.hidden,
.mp-team-slot.hidden,
.mlbb-podium-card.hidden,
.mlbb-room-vs-emblem.hidden,
.mp-modal.hidden,
.mp-view.hidden,
.mp-quick-searching-box.hidden,
.mp-searching-bar.hidden,
.mp-multi-hud.hidden,
.mp-battle-hud.hidden,
.mp-race-bar-wrap.hidden,
.mlbb-invite-toast.hidden {
  display: none !important;
}
/* =========================================================
   FLAPPY BIRD: CLOUDFLARE MULTIPLAYER LOBBY (COMPACT NO-SCROLL STUDIO THEME)
   ========================================================= */

.mp-modal {
  position: relative !important;
  width: min(600px, 96vw) !important;
  max-width: 600px !important;
  height: min(320px, 94vh) !important;
  max-height: min(320px, 94vh) !important;
  background: linear-gradient(180deg, #142442 0%, #0c172c 100%) !important;
  border: 2px solid #254a78 !important;
  border-radius: 16px !important;
  padding: 6px 10px 8px !important;
  color: #f1f5f9 !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.75), inset 0 1.5px 0 rgba(255, 255, 255, 0.15) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.mp-modal.hidden {
  display: none !important;
}

.mp-modal::before {
  display: none !important;
}

/* Close Button (Top-Right Chunky Red Arcade) */
.mp-modal .close {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  left: auto !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, #f87171 0%, #ef4444 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid #b91c1c !important;
  box-shadow: 0 2px 0 #991b1b !important;
  font-size: 15px !important;
  line-height: 19px !important;
  cursor: pointer !important;
  z-index: 100 !important;
  transition: all 0.15s !important;
}

.mp-modal .close:hover {
  transform: rotate(90deg) scale(1.08) !important;
  filter: brightness(1.15) !important;
}
.mp-modal .close:active {
  transform: translateY(1px) scale(0.95) !important;
  box-shadow: 0 1px 0 #991b1b !important;
}

/* 1. Header Bar with Integrated Tabs */
.mp-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 28px 4px 0 !important;
  margin: 0 0 4px 0 !important;
  border-bottom: 1.5px solid rgba(37, 74, 120, 0.7) !important;
  flex-shrink: 0 !important;
}

.mp-icon-badge {
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%) !important;
  border: 1px solid #7dd3fc !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
  flex-shrink: 0 !important;
}

.mp-titles {
  display: flex !important;
  flex-direction: column !important;
  margin-right: auto !important;
}

.mp-titles h2 {
  font: 900 11px/1 'Trebuchet MS', Arial, sans-serif !important;
  color: #ffffff !important;
  margin: 0 !important;
  letter-spacing: 0.2px !important;
}

.mp-status-indicator {
  font: 800 7.5px 'Trebuchet MS', Arial, sans-serif !important;
  color: #94a3b8 !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  margin-top: 1px !important;
}

.mp-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  box-shadow: 0 0 5px #22c55e !important;
}

/* Integrated Header Tabs */
.mp-tabs {
  display: flex !important;
  background: #091427 !important;
  border: 1.5px solid #1c355a !important;
  border-radius: 7px !important;
  padding: 2px !important;
  gap: 2px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.mp-tab-btn {
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  font: 900 9px/1 'Trebuchet MS', Arial, sans-serif !important;
  padding: 3.5px 7px !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  min-height: 20px !important;
  white-space: nowrap !important;
}

.mp-tab-btn:hover {
  background: rgba(56, 189, 248, 0.15) !important;
  color: #e2e8f0 !important;
}

.mp-tab-btn.active {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%) !important;
  border: 1px solid #38bdf8 !important;
  color: #ffffff !important;
  box-shadow: 0 1.5px 0 #075985 !important;
}

/* 2. Sub-Mode Selector Bar */
.mp-submode-wrapper {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 6px !important;
  background: #091427 !important;
  border: 1.5px solid #1c355a !important;
  border-radius: 7px !important;
  padding: 2.5px 8px !important;
  margin-bottom: 5px !important;
  flex-shrink: 0 !important;
}

.mp-submode-row {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
}

.mp-submode-label {
  font-size: 7.5px !important;
  font-weight: 800 !important;
  color: #93c5fd !important;
  letter-spacing: 0.2px !important;
}

.mp-submode-pill-group {
  display: flex !important;
  gap: 2.5px !important;
}

.mp-submode-pill, .mp-player-count-pill {
  background: #11203b !important;
  border: 1.5px solid #1e385f !important;
  color: #94a3b8 !important;
  font: 900 8px/1 'Trebuchet MS', Arial, sans-serif !important;
  padding: 2.5px 6px !important;
  min-height: 18px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}

.mp-submode-pill:hover, .mp-player-count-pill:hover {
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}

.mp-submode-pill.active, .mp-player-count-pill.active {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  box-shadow: 0 1.5px 0 #075985 !important;
}

/* 3. DUAL-PANE BODY */
.mp-body-dual-pane {
  display: flex !important;
  gap: 6px !important;
  flex: 1 !important;
  min-height: 0 !important;
}

.mp-left-pane {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  min-width: 0 !important;
}

/* TAB 1: QUICK MATCH */
.mp-view {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  gap: 4px !important;
}

.mp-view.hidden {
  display: none !important;
}

.mp-team-slots {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(65px, 1fr)) !important;
  gap: 4px !important;
  flex: 1 !important;
  min-height: 0 !important;
}

.mp-team-slot {
  background: linear-gradient(180deg, #182c4e 0%, #12213d 100%) !important;
  border: 1.5px solid #254b7a !important;
  border-radius: 8px !important;
  padding: 4px 2px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  position: relative !important;
}

.mp-team-slot.is-you {
  border-color: #facc15 !important;
  background: linear-gradient(180deg, #2b220d 0%, #171306 100%) !important;
}

.mp-slot-number {
  position: absolute !important;
  top: 2px !important;
  left: 4px !important;
  font-size: 6.5px !important;
  color: #94a3b8 !important;
  font-weight: 900 !important;
}

.mp-slot-bird {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1.5px solid #38bdf8 !important;
  background: #091427 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  color: #38bdf8 !important;
  margin-bottom: 2px !important;
}

.mp-slot-bird img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
}

.mp-team-slot b {
  font-size: 7.5px !important;
  color: #ffffff !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 70px !important;
}

.mp-team-slot small {
  font-size: 6px !important;
  color: #94a3b8 !important;
}

/* Quick Match Bottom Bar */
.mp-quick-box {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #091427 !important;
  border: 1.5px solid #1c355a !important;
  border-radius: 7px !important;
  padding: 3px 8px !important;
  flex-shrink: 0 !important;
}

.mp-quick-info {
  display: flex !important;
  flex-direction: column !important;
}

.mp-quick-title {
  font-size: 9px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
}

.mp-quick-desc {
  font-size: 7px !important;
  color: #94a3b8 !important;
}

.mp-btn-find {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
  border: 1.5px solid #4ade80 !important;
  box-shadow: 0 2px 0 #166534 !important;
  color: #ffffff !important;
  font: 900 9px 'Trebuchet MS', Arial, sans-serif !important;
  padding: 4px 12px !important;
  min-height: 24px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  margin: 0 !important;
}

/* TAB 2: BUAT ROOM (PODIUM ARENA) */
.mlbb-room-top-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #091427 !important;
  border: 1.5px solid #1c355a !important;
  border-radius: 7px !important;
  padding: 2.5px 8px !important;
  flex-shrink: 0 !important;
}

.mlbb-room-code-tag {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.mlbb-room-code-label {
  font-size: 7.5px !important;
  font-weight: 800 !important;
  color: #94a3b8 !important;
}

.mlbb-code-glow {
  font-size: 12px !important;
  font-weight: 900 !important;
  color: #facc15 !important;
  letter-spacing: 2px !important;
}

.mp-btn-copy {
  background: #1e293b !important;
  border: 1px solid #475569 !important;
  color: #ffffff !important;
  font: 900 7px Arial !important;
  padding: 2px 5px !important;
  border-radius: 3px !important;
  cursor: pointer !important;
}

.mlbb-room-ping-tag {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 7px !important;
  color: #4ade80 !important;
  font-weight: 800 !important;
}

.mlbb-room-clash-arena {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  flex: 1 !important;
  min-height: 0 !important;
}

.mlbb-podium-card {
  flex: 1 !important;
  min-width: 65px !important;
  max-width: 100px !important;
  background: linear-gradient(180deg, #182c4e 0%, #12213d 100%) !important;
  border: 1.5px solid #254b7a !important;
  border-radius: 8px !important;
  padding: 4px 2px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
  position: relative !important;
}

.mlbb-podium-card.host {
  border-color: #facc15 !important;
}

.mlbb-podium-crown {
  position: absolute !important;
  top: -7px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.mlbb-podium-avatar-wrap {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1.5px solid #38bdf8 !important;
  background: #091427 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 2px !important;
}

.mlbb-podium-name {
  font-size: 8px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 75px !important;
}

.mlbb-podium-role {
  font-size: 6px !important;
  font-weight: 800 !important;
  color: #94a3b8 !important;
}

.mlbb-podium-status {
  font-size: 6.5px !important;
  font-weight: 900 !important;
  padding: 1px 4px !important;
  border-radius: 3px !important;
  margin-top: 1px !important;
}

.mlbb-podium-status.ready {
  background: rgba(34, 197, 94, 0.2) !important;
  color: #4ade80 !important;
  border: 1px solid #22c55e !important;
}

.mlbb-podium-status.waiting {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
  border: 1px solid #ef4444 !important;
}

.mlbb-room-vs-emblem {
  font-size: 13px !important;
  font-weight: 900 !important;
  color: #facc15 !important;
  text-shadow: 0 0 6px rgba(250, 204, 21, 0.6) !important;
  flex-shrink: 0 !important;
}

.mlbb-room-start-btn, .mlbb-room-ready-btn {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
  border: 1.5px solid #4ade80 !important;
  box-shadow: 0 2px 0 #166534 !important;
  color: #ffffff !important;
  font: 900 9.5px 'Trebuchet MS', Arial !important;
  padding: 4px 12px !important;
  min-height: 24px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  margin: 0 !important;
  width: 100% !important;
  flex-shrink: 0 !important;
}

.mlbb-room-start-btn:disabled {
  background: #334155 !important;
  border-color: #475569 !important;
  box-shadow: none !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
}

/* TAB 3: GABUNG ROOM */
#mpViewJoin .mp-room-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  flex: 1 !important;
  background: #091427 !important;
  border: 1.5px solid #1c355a !important;
  border-radius: 8px !important;
  padding: 8px !important;
}

.mp-join-label {
  font-size: 8px !important;
  font-weight: 800 !important;
  color: #cbd5e1 !important;
}

.mp-code-input {
  background: #11203b !important;
  border: 1.5px solid #38bdf8 !important;
  border-radius: 7px !important;
  color: #facc15 !important;
  font: 900 15px 'Trebuchet MS', Arial !important;
  text-align: center !important;
  letter-spacing: 4px !important;
  padding: 4px 10px !important;
  width: 140px !important;
  outline: none !important;
}

#mpJoinRoomBtn {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%) !important;
  border: 1.5px solid #38bdf8 !important;
  box-shadow: 0 2px 0 #075985 !important;
  color: #ffffff !important;
  font: 900 9.5px 'Trebuchet MS', Arial !important;
  padding: 4px 14px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
}

/* 4. RIGHT PANE: MLBB FRIEND INVITE SIDEBAR */
.mp-friends-panel {
  width: 155px !important;
  background: #091427 !important;
  border: 1.5px solid #1c355a !important;
  border-radius: 8px !important;
  padding: 4px 6px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

.mp-friends-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid #1c355a !important;
  padding-bottom: 3px !important;
  margin-bottom: 3px !important;
  font-size: 7.5px !important;
  font-weight: 900 !important;
  color: #7dd3fc !important;
}

.mp-friends-sub {
  font-size: 6.5px !important;
  color: #4ade80 !important;
}

.mp-lobby-friends-list {
  flex: 1 !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.mp-friend-row {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: #11203b !important;
  border: 1px solid #1e385f !important;
  border-radius: 5px !important;
  padding: 3px 4px !important;
}

.mp-friend-avatar {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: #091427 !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mp-friend-avatar img, .mp-friend-avatar svg {
  width: 16px !important;
  height: 16px !important;
}

.mp-friend-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

.mp-friend-info b {
  font-size: 7.5px !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.mp-friend-info small {
  font-size: 5.5px !important;
  color: #4ade80 !important;
}

.mp-lobby-invite-btn {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
  border: 1px solid #4ade80 !important;
  box-shadow: 0 1px 0 #166534 !important;
  color: #ffffff !important;
  font: 900 7px 'Trebuchet MS', Arial !important;
  padding: 2px 5px !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.mp-lobby-invite-btn:hover {
  filter: brightness(1.15) !important;
}

.mp-friends-empty {
  font-size: 7px !important;
  color: #94a3b8 !important;
  text-align: center !important;
  padding: 10px 4px !important;
}

/* =========================================================
   IN-GAME MULTIPLAYER HUD (1v1, SPRINT RACE, 3P/4P HUD)
   ========================================================= */

.mp-battle-hud {
  position: absolute !important;
  top: 6px !important;
  left: 8px !important;
  right: 8px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  z-index: 25 !important;
  pointer-events: none !important;
}

.mp-battle-hud.hidden {
  display: none !important;
}

.mp-hud-card {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(15, 23, 42, 0.9) !important;
  border: 1.5px solid #254a78 !important;
  border-radius: 8px !important;
  padding: 3px 6px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
  pointer-events: auto !important;
}

.mp-hud-card.player {
  border-color: #38bdf8 !important;
}

.mp-hud-card.rival {
  border-color: #f43f5e !important;
  flex-direction: row-reverse !important;
}

.mp-hud-avatar {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: #091427 !important;
  border: 1px solid #38bdf8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.mp-hud-avatar.rival {
  border-color: #f43f5e !important;
}

.mp-hud-avatar img, .mp-hud-avatar svg {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain !important;
}

.mp-hud-info {
  display: flex !important;
  flex-direction: column !important;
}

.mp-hud-info.rival {
  align-items: flex-end !important;
}

.mp-hud-meta {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
}

.mp-hud-name {
  font: 900 8px/1 'Trebuchet MS', Arial, sans-serif !important;
  color: #ffffff !important;
  max-width: 65px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.mp-hud-tier {
  font: 900 6.5px/1 'Trebuchet MS', Arial, sans-serif !important;
  color: #facc15 !important;
  background: rgba(250, 204, 21, 0.2) !important;
  padding: 1px 3px !important;
  border-radius: 2px !important;
}

.mp-hud-tier.rival {
  color: #fb7185 !important;
  background: rgba(244, 63, 94, 0.2) !important;
}

.mp-hud-hearts {
  display: flex !important;
  gap: 2px !important;
  margin-top: 1px !important;
}

.mp-heart svg {
  width: 9px !important;
  height: 9px !important;
}

.mp-hud-score-badge {
  font: 900 11px/1 'Trebuchet MS', Arial, sans-serif !important;
  color: #38bdf8 !important;
  background: rgba(2, 132, 199, 0.25) !important;
  border: 1px solid #0284c7 !important;
  border-radius: 5px !important;
  padding: 2px 5px !important;
  min-width: 14px !important;
  text-align: center !important;
}

.mp-hud-score-badge.rival {
  color: #fb7185 !important;
  background: rgba(244, 63, 94, 0.25) !important;
  border-color: #e11d48 !important;
}

.mp-hud-mute-btn {
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid #334155 !important;
  color: #94a3b8 !important;
  border-radius: 50% !important;
  width: 22px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* SPRINT RACE BAR */
.mp-race-bar-wrap {
  position: absolute !important;
  top: 32px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 180px !important;
  background: rgba(15, 23, 42, 0.9) !important;
  border: 1.5px solid #254a78 !important;
  border-radius: 7px !important;
  padding: 2px 6px !important;
  z-index: 25 !important;
}

.mp-race-meta {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 7px !important;
  font-weight: 800 !important;
  color: #cbd5e1 !important;
  margin-bottom: 2px !important;
}

.mp-race-tag {
  color: #facc15 !important;
}

.mp-race-track {
  position: relative !important;
  height: 4px !important;
  background: #1e293b !important;
  border-radius: 2px !important;
}

.mp-race-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #38bdf8, #22c55e) !important;
  border-radius: 2px !important;
}

.mp-race-pin {
  position: absolute !important;
  top: -3px !important;
  transform: translateX(-50%) !important;
}

.pin-dot.my {
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #38bdf8 !important;
  border: 1.5px solid #fff !important;
}

.pin-dot.rival {
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #f43f5e !important;
  border: 1.5px solid #fff !important;
}

/* 3P / 4P MULTI HUD */
.mp-multi-hud {
  position: absolute !important;
  top: 34px !important;
  right: 8px !important;
  background: rgba(15, 23, 42, 0.9) !important;
  border: 1.5px solid #254a78 !important;
  border-radius: 7px !important;
  padding: 2px 5px !important;
  z-index: 25 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.mp-multi-player-row {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 7.5px !important;
  color: #fff !important;
}

.mp-multi-rank {
  font-weight: 900 !important;
  color: #facc15 !important;
}

.mp-multi-avatar {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

.mp-multi-avatar img, .mp-multi-avatar svg {
  width: 100% !important;
  height: 100% !important;
}

.mp-multi-name {
  max-width: 50px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.mp-multi-score {
  font-weight: 900 !important;
  color: #38bdf8 !important;
  margin-left: auto !important;
}

/* =========================================================
   MLBB REAL-TIME INCOMING GAME INVITE POPUP BANNER
   ========================================================= */

.mlbb-invite-toast {
  position: absolute !important;
  top: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(420px, 92vw) !important;
  background: linear-gradient(180deg, #142442 0%, #0c172c 100%) !important;
  border: 2px solid #38bdf8 !important;
  border-radius: 12px !important;
  padding: 6px 10px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 16px rgba(56, 189, 248, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  z-index: 99999 !important;
  animation: invitePopDown 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.mlbb-invite-toast.hidden {
  display: none !important;
}

@keyframes invitePopDown {
  from { top: -60px; opacity: 0; }
  to { top: 10px; opacity: 1; }
}

.mlbb-it-avatar {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  border: 1.5px solid #38bdf8 !important;
  background: #091427 !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mlbb-it-avatar img, .mlbb-it-avatar svg {
  width: 24px !important;
  height: 24px !important;
}

.mlbb-it-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

.mlbb-it-title {
  font: 900 8.5px/1 'Trebuchet MS', Arial !important;
  color: #facc15 !important;
  letter-spacing: 0.3px !important;
}

.mlbb-it-desc {
  font: 700 8px/1.2 'Trebuchet MS', Arial !important;
  color: #f1f5f9 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-top: 2px !important;
}

.mlbb-it-desc span {
  color: #38bdf8 !important;
  font-weight: 900 !important;
}

.mlbb-it-actions {
  display: flex !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
}

.mlbb-it-btn {
  font: 900 8px/1 'Trebuchet MS', Arial !important;
  padding: 5px 8px !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  border: none !important;
  transition: all 0.15s !important;
}

.mlbb-it-btn.reject {
  background: #334155 !important;
  color: #cbd5e1 !important;
  border: 1px solid #475569 !important;
}

.mlbb-it-btn.accept {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
  border: 1px solid #4ade80 !important;
  box-shadow: 0 1.5px 0 #166534 !important;
  color: #ffffff !important;
}

/* =========================================================
   MLBB FLOATING TOP MATCHMAKING TIMER BAR (SLIDES FROM TOP)
   ========================================================= */

.mp-searching-bar {
  position: absolute !important;
  top: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(440px, 92vw) !important;
  background: linear-gradient(180deg, #142442 0%, #0c172c 100%) !important;
  border: 2px solid #38bdf8 !important;
  border-radius: 14px !important;
  padding: 5px 12px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 0 18px rgba(56, 189, 248, 0.45) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  z-index: 99999 !important;
  animation: mmBarDropIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
}

.mp-searching-bar.hidden {
  display: none !important;
}

@keyframes mmBarDropIn {
  from { top: -60px; opacity: 0; }
  to { top: 10px; opacity: 1; }
}

.mp-search-spinner {
  width: 22px !important;
  height: 22px !important;
  border: 2.5px solid rgba(56, 189, 248, 0.3) !important;
  border-top-color: #38bdf8 !important;
  border-radius: 50% !important;
  animation: mmSpin 0.9s linear infinite !important;
  flex-shrink: 0 !important;
}

@keyframes mmSpin {
  to { transform: rotate(360deg); }
}

.mp-search-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

.mp-search-title {
  font: 900 9px/1 'Trebuchet MS', Arial, sans-serif !important;
  color: #facc15 !important;
  letter-spacing: 0.3px !important;
  text-shadow: 0 0 6px rgba(250, 204, 21, 0.4) !important;
}

.mp-search-meta-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 2px !important;
}

.mp-search-estimate, .mp-search-elapsed {
  font: 700 7.5px/1.2 'Trebuchet MS', Arial, sans-serif !important;
  color: #94a3b8 !important;
}

.mp-search-divider {
  color: #334155 !important;
  font-size: 8px !important;
}

.mp-search-estimate b, .mp-search-elapsed b {
  color: #38bdf8 !important;
  font-weight: 900 !important;
}

.mp-search-cancel-btn {
  background: linear-gradient(180deg, #f87171 0%, #ef4444 100%) !important;
  border: 1px solid #b91c1c !important;
  box-shadow: 0 1.5px 0 #991b1b !important;
  color: #ffffff !important;
  font: 900 8.5px/1 'Trebuchet MS', Arial, sans-serif !important;
  padding: 5px 10px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all 0.15s !important;
}

.mp-search-cancel-btn:hover {
  filter: brightness(1.15) !important;
}
.mp-search-cancel-btn:active {
  transform: translateY(1px) !important;
}