/* SahaX UI v3 - mobile landscape player interface */
:root {
  --ui-v3-safe-top: max(6px, env(safe-area-inset-top));
  --ui-v3-safe-right: max(6px, env(safe-area-inset-right));
  --ui-v3-safe-bottom: max(6px, env(safe-area-inset-bottom));
  --ui-v3-safe-left: max(6px, env(safe-area-inset-left));
  --ui-v3-shell-gap: clamp(6px, 1.4dvh, 12px);
  --ui-v3-header-h: clamp(42px, 10dvh, 58px);
  --ui-v3-footer-h: clamp(44px, 10dvh, 58px);
  --ui-v3-radius: 12px;
  --ui-v3-radius-sm: 7px;
  --ui-v3-bg: #050a13;
  --ui-v3-panel: rgba(7, 14, 27, 0.88);
  --ui-v3-panel-strong: rgba(8, 16, 31, 0.96);
  --ui-v3-card: rgba(17, 28, 48, 0.82);
  --ui-v3-card-hover: rgba(28, 43, 69, 0.9);
  --ui-v3-line: rgba(191, 219, 254, 0.16);
  --ui-v3-line-strong: rgba(125, 211, 252, 0.36);
  --ui-v3-text: #f8fafc;
  --ui-v3-muted: #a9b7ca;
  --ui-v3-cyan: #66d7f5;
  --ui-v3-green: #67d78a;
  --ui-v3-gold: #f0c95d;
  --ui-v3-red: #f36f7c;
  --ui-v3-violet: #b69af5;
  --ui-v3-shadow: 0 18px 48px rgba(0, 0, 0, 0.48);
  --ui-v3-screen-image: url("assets/ui-v3/auth-tunnel-960.webp");
  --ui-v3-screen-position: center;
  --ui-v3-screen-dim: 0.56;
}

html,
body.ui-v3 {
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden !important;
  background: var(--ui-v3-bg);
  overscroll-behavior: none;
}

body.ui-v3 {
  color: var(--ui-v3-text);
  letter-spacing: 0;
}

body.ui-v3:not([data-screen="game"]) .flow {
  position: fixed !important;
  inset: 0 !important;
  width: 100dvw !important;
  height: 100dvh !important;
  max-width: none !important;
  padding: var(--ui-v3-safe-top) var(--ui-v3-safe-right) var(--ui-v3-safe-bottom) var(--ui-v3-safe-left) !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  isolation: isolate;
  background: #050a13 !important;
}

body.ui-v3:not([data-screen="game"]) .flow::before,
body.ui-v3:not([data-screen="game"]) .flow::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body.ui-v3:not([data-screen="game"]) .flow::before {
  z-index: -2;
  background-image: var(--ui-v3-screen-image);
  background-position: var(--ui-v3-screen-position);
  background-size: cover;
  background-repeat: no-repeat;
  filter: saturate(0.9) contrast(1.04);
  transform: scale(1.01);
  transition: opacity 180ms ease;
}

body.ui-v3:not([data-screen="game"]) .flow::after {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(2, 6, 15, 0.94), rgba(5, 11, 22, calc(var(--ui-v3-screen-dim) + 0.12)) 48%, rgba(3, 8, 17, var(--ui-v3-screen-dim))),
    linear-gradient(180deg, rgba(1, 5, 12, 0.2), rgba(1, 5, 12, 0.82));
}

body.ui-v3[data-screen="main"] .flow::before,
body.ui-v3[data-screen="main"] .flow::after {
  opacity: 0;
}

body.ui-v3 .flow > .flow-card:not(#screenMainMenu) {
  position: relative !important;
  z-index: 1;
  width: min(1180px, 100%) !important;
  max-width: 1180px !important;
  height: calc(100dvh - var(--ui-v3-safe-top) - var(--ui-v3-safe-bottom)) !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 clamp(10px, 2vw, 22px) clamp(8px, 1.7dvh, 16px) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ui-v3-shell-gap) !important;
  overflow: hidden !important;
  border: 1px solid var(--ui-v3-line) !important;
  border-radius: var(--ui-v3-radius) !important;
  background: linear-gradient(135deg, rgba(7, 14, 27, 0.92), rgba(10, 21, 39, 0.78)) !important;
  box-shadow: var(--ui-v3-shadow) !important;
  backdrop-filter: blur(10px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(115%) !important;
}

body.ui-v3 .flow > .flow-card:not(#screenMainMenu).hidden,
body.ui-v3 .flow > #screenMainMenu.hidden {
  display: none !important;
}

body.ui-v3 .flow-card:not(#screenMainMenu) > h2,
body.ui-v3 .flow-card:not(#screenMainMenu) > .screen-header,
body.ui-v3 .flow-card:not(#screenMainMenu) > .flow-card-head {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  flex: 0 0 var(--ui-v3-header-h) !important;
  min-height: var(--ui-v3-header-h) !important;
  width: auto !important;
  margin: 0 calc(clamp(10px, 2vw, 22px) * -1) !important;
  padding: 0 clamp(12px, 2.2vw, 24px) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-bottom: 1px solid var(--ui-v3-line) !important;
  background: linear-gradient(180deg, rgba(8, 16, 31, 0.96), rgba(8, 16, 31, 0.76)) !important;
  color: var(--ui-v3-text) !important;
  font-family: "Orbitron", "Outfit", sans-serif !important;
  font-size: clamp(16px, 3.8dvh, 24px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase;
  text-align: center !important;
  z-index: 5;
  -webkit-text-fill-color: var(--ui-v3-text) !important;
  background-image: none !important;
}

body.ui-v3 .flow-card:not(#screenMainMenu) > .screen-header h2,
body.ui-v3 .flow-card:not(#screenMainMenu) > .flow-card-head h2 {
  margin: 0 !important;
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
}

body.ui-v3 .screen-header .btn-close,
body.ui-v3 .flow-card-head .flow-top-back {
  position: absolute !important;
  right: clamp(8px, 1.5vw, 16px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 8px !important;
  border: 1px solid var(--ui-v3-line) !important;
  background: rgba(18, 29, 50, 0.92) !important;
  color: #fff !important;
}

body.ui-v3 .flow-card:not(#screenMainMenu) > :is(
  #profileScreenBody,
  #publicProfileScreenBody,
  #teamBody,
  #inventoryBody,
  #marketBody,
  #friendsBody,
  #leaderboardScreenBody,
  #socialHubBody,
  #liveopsTabContent,
  #spectatorRoomList
) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(125, 211, 252, 0.28) transparent;
}

body.ui-v3 .flow-card:not(#screenMainMenu) > button[data-flow-back],
body.ui-v3 .flow-card:not(#screenMainMenu) > .quick-play-actions,
body.ui-v3 .flow-card:not(#screenMainMenu) .play-actions {
  flex: 0 0 var(--ui-v3-footer-h) !important;
  min-height: var(--ui-v3-footer-h) !important;
  margin: 0 !important;
  padding: 4px 0 0 !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: flex-end !important;
  z-index: 6;
}

body.ui-v3 .flow-card:not(#screenMainMenu) > button[data-flow-back] {
  width: min(320px, 46%) !important;
  align-self: center !important;
}

body.ui-v3 .flow-card:not(#screenMainMenu) button,
body.ui-v3 .mobile-popup button,
body.ui-v3 .confirm-modal button {
  min-height: 44px;
  border-radius: var(--ui-v3-radius-sm);
  border: 1px solid var(--ui-v3-line);
  background: linear-gradient(180deg, rgba(31, 45, 72, 0.94), rgba(17, 28, 49, 0.94));
  color: var(--ui-v3-text);
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  letter-spacing: 0;
}

body.ui-v3 .flow-card:not(#screenMainMenu) button:hover:not(:disabled),
body.ui-v3 .mobile-popup button:hover:not(:disabled) {
  transform: none !important;
  border-color: var(--ui-v3-line-strong) !important;
  background: var(--ui-v3-card-hover) !important;
  box-shadow: 0 0 0 1px rgba(102, 215, 245, 0.16), 0 8px 20px rgba(0, 0, 0, 0.28) !important;
}

body.ui-v3 .flow-card:not(#screenMainMenu) button:active:not(:disabled),
body.ui-v3 .mobile-popup button:active:not(:disabled) {
  transform: scale(0.97) !important;
}

body.ui-v3 .blue-btn,
body.ui-v3 .green-btn,
body.ui-v3 .btn-cyan,
body.ui-v3 .play-choice.selected,
body.ui-v3 .play-choice[aria-pressed="true"],
body.ui-v3 button.selected,
body.ui-v3 button[aria-pressed="true"] {
  color: #07111b !important;
  border-color: rgba(180, 244, 209, 0.75) !important;
  background: linear-gradient(180deg, #86e5a5, #4fbd77) !important;
  box-shadow: 0 7px 20px rgba(45, 170, 101, 0.24) !important;
}

body.ui-v3 .danger,
body.ui-v3 .btn-red,
body.ui-v3 button[data-action="delete"] {
  color: #fff !important;
  border-color: rgba(243, 111, 124, 0.5) !important;
  background: linear-gradient(180deg, rgba(171, 54, 68, 0.92), rgba(110, 31, 42, 0.96)) !important;
}

body.ui-v3 input,
body.ui-v3 select,
body.ui-v3 textarea {
  min-height: 44px;
  box-sizing: border-box;
  border: 1px solid var(--ui-v3-line) !important;
  border-radius: var(--ui-v3-radius-sm) !important;
  background: rgba(3, 9, 19, 0.82) !important;
  color: var(--ui-v3-text) !important;
  font-family: "Inter", sans-serif !important;
  font-size: 13px !important;
}

body.ui-v3 input:focus,
body.ui-v3 select:focus,
body.ui-v3 textarea:focus {
  outline: none !important;
  border-color: var(--ui-v3-cyan) !important;
  box-shadow: 0 0 0 3px rgba(102, 215, 245, 0.12) !important;
}

/* Authentication and onboarding */
body.ui-v3[data-screen="login"] .flow,
body.ui-v3[data-screen="name"] .flow,
body.ui-v3[data-screen="serverSelect"] .flow {
  place-items: center end !important;
  padding-right: max(5vw, var(--ui-v3-safe-right)) !important;
}

body.ui-v3 #screenLogin,
body.ui-v3 #screenName,
body.ui-v3 #screenServerSelect {
  width: clamp(360px, 43vw, 500px) !important;
  max-width: calc(100dvw - 24px) !important;
  height: min(calc(100dvh - 16px), 520px) !important;
  padding: clamp(14px, 2.6dvh, 24px) !important;
  overflow: auto !important;
  background: rgba(5, 12, 24, 0.9) !important;
}

body.ui-v3 #screenLogin h2,
body.ui-v3 #screenName h2,
body.ui-v3 #screenServerSelect h2 {
  position: static !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  justify-content: flex-start !important;
  font-size: clamp(18px, 4dvh, 28px) !important;
}

body.ui-v3 .auth-provider-btn {
  background: rgba(19, 31, 51, 0.9) !important;
  border-color: var(--ui-v3-line) !important;
}

/* Image-led mode selection */
body.ui-v3 #screenQuickPlay .quick-play-grid,
body.ui-v3 #screenRankedChoice .quick-play-grid,
body.ui-v3 #screenMultiplayer .quick-play-grid,
body.ui-v3 #screenTeam .quick-play-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(8px, 1.4vw, 16px) !important;
  overflow: hidden !important;
  align-items: stretch !important;
}

body.ui-v3 #screenMultiplayer .quick-play-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.ui-v3 .mode-card {
  position: relative !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: clamp(12px, 2.5dvh, 22px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  overflow: hidden !important;
  isolation: isolate;
  border: 1px solid rgba(191, 219, 254, 0.22) !important;
  background-color: rgba(8, 16, 30, 0.9) !important;
  background-size: cover !important;
  background-position: center !important;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.36) !important;
  text-align: left !important;
}

body.ui-v3 .mode-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(2, 7, 16, 0.06), rgba(3, 8, 17, 0.82) 76%);
}

body.ui-v3 .mode-card .mode-card-glow {
  opacity: 0.22 !important;
}

body.ui-v3 #quickAiTrainingButton {
  background-image: url("assets/ui-v3/club-facility-960.webp") !important;
}

body.ui-v3 #quickClassicButton {
  background-image: url("assets/ui-v3/menu-stadium-hero-960.webp") !important;
}

body.ui-v3 #quickRankedButton,
body.ui-v3 #screenRankedChoice .ranked-mode-card {
  background-image: url("assets/ui-v3/ranked-arena-960.webp") !important;
}

body.ui-v3 #flowJoinRoomButton {
  background-image: url("assets/ui-v3/menu-room-hero-960.webp") !important;
}

body.ui-v3 #flowCreateRoomButton {
  background-image: url("assets/ui-v3/control-room-960.webp") !important;
}

body.ui-v3 #screenTeam .mode-card {
  background-image: url("assets/ui-v3/club-facility-960.webp") !important;
}

body.ui-v3 .mode-card-header,
body.ui-v3 .mode-card-body,
body.ui-v3 .mode-card-footer {
  position: relative;
  z-index: 2;
}

body.ui-v3 .mode-card h3 {
  margin: 0 0 3px !important;
  color: #fff !important;
  font-family: "Outfit", sans-serif !important;
  font-size: clamp(16px, 4.2dvh, 25px) !important;
  font-weight: 900 !important;
  font-style: italic;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

body.ui-v3 .mode-card-subtitle {
  color: #dce6f4 !important;
  font-size: clamp(11px, 2.5dvh, 14px) !important;
  font-weight: 700 !important;
}

body.ui-v3 .mode-card-desc {
  color: #b9c7d9 !important;
  font-size: clamp(11px, 2.25dvh, 13px) !important;
  line-height: 1.35 !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

body.ui-v3 .mode-card-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding-top: 8px !important;
  color: var(--ui-v3-green) !important;
}

body.ui-v3 .mode-card-icon {
  width: clamp(28px, 7dvh, 42px) !important;
  height: clamp(28px, 7dvh, 42px) !important;
  border-radius: 8px !important;
  background: rgba(5, 13, 26, 0.74) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Setup, ranked and lobby */
body.ui-v3 #screenPlaySetup .play-setup-grid,
body.ui-v3 #screenRankedSoloHub .ranked-hub-container,
body.ui-v3 #screenRankedTeamHub .ranked-hub-container {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 2px 4px !important;
  scrollbar-width: thin;
}

body.ui-v3 .play-section,
body.ui-v3 .ranked-season-info-bar,
body.ui-v3 .ranked-profile-card,
body.ui-v3 .ranked-stats-card,
body.ui-v3 .portal-card {
  border: 1px solid var(--ui-v3-line) !important;
  border-radius: 9px !important;
  background: rgba(11, 21, 39, 0.84) !important;
  box-shadow: none !important;
}

body.ui-v3 .play-actions {
  position: sticky !important;
  bottom: 0 !important;
  padding: 6px 0 0 !important;
  background: linear-gradient(180deg, transparent, rgba(5, 11, 22, 0.98) 32%) !important;
}

body.ui-v3 .play-option-grid {
  gap: 7px !important;
}

body.ui-v3 .play-option-grid .play-choice {
  min-height: 44px !important;
  padding: 7px 10px !important;
  font-size: 13px !important;
}

/* Profile, club, social, market and inventory */
body.ui-v3 #screenTeam,
body.ui-v3 #screenFriends {
  background:
    linear-gradient(90deg, rgba(4, 12, 24, 0.9), rgba(5, 20, 28, 0.68)),
    url("assets/ui-v3/club-facility-960.webp") center/cover no-repeat !important;
}

body.ui-v3 #screenLeaderboard,
body.ui-v3 #screenLiveOps {
  background:
    linear-gradient(90deg, rgba(7, 9, 27, 0.9), rgba(23, 13, 38, 0.68)),
    url("assets/ui-v3/ranked-arena-960.webp") center/cover no-repeat !important;
}

body.ui-v3 #screenMarket,
body.ui-v3 #screenInventory {
  background-color: rgba(6, 12, 22, 0.88) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

body.ui-v3 #screenMarket {
  background-image:
    linear-gradient(90deg, rgba(5, 11, 20, 0.91), rgba(12, 16, 24, 0.65)),
    url("assets/ui-v3/menu-market-hero-960.webp") !important;
}

body.ui-v3 #screenInventory {
  background-image:
    linear-gradient(90deg, rgba(5, 10, 22, 0.92), rgba(10, 12, 30, 0.64)),
    url("assets/ui-v3/menu-inventory-hero-960.webp") !important;
}

body.ui-v3 #screenProfile,
body.ui-v3 #screenPublicProfile,
body.ui-v3 #screenSocialHub {
  background:
    linear-gradient(90deg, rgba(5, 11, 22, 0.92), rgba(7, 16, 29, 0.7)),
    url("assets/ui-v3/social-lounge-960.webp") center/cover no-repeat !important;
}

body.ui-v3 #screenLiveOps {
  background:
    linear-gradient(90deg, rgba(7, 10, 22, 0.9), rgba(22, 12, 20, 0.66)),
    url("assets/ui-v3/reward-gallery-960.webp") center/cover no-repeat !important;
}

body.ui-v3 #screenPlaySetup,
body.ui-v3 #screenServerSelect {
  background:
    linear-gradient(90deg, rgba(5, 11, 22, 0.91), rgba(6, 16, 29, 0.7)),
    url("assets/ui-v3/control-room-960.webp") center/cover no-repeat !important;
}

body.ui-v3 .profile-top,
body.ui-v3 .profile-level-panel,
body.ui-v3 .profile-card,
body.ui-v3 .team-section,
body.ui-v3 .friends-section,
body.ui-v3 .friend-card,
body.ui-v3 .leader-card,
body.ui-v3 .premium-card-sec,
body.ui-v3 .client-quest-card,
body.ui-v3 .login-streak-card,
body.ui-v3 .market-item,
body.ui-v3 .inventory-owned-card {
  border: 1px solid var(--ui-v3-line) !important;
  border-radius: 9px !important;
  background: rgba(10, 20, 37, 0.84) !important;
  box-shadow: none !important;
}

body.ui-v3 .team-home-grid,
body.ui-v3 .team-dashboard-grid,
body.ui-v3 .friends-layout,
body.ui-v3 .leaderboard-layout {
  min-height: 0 !important;
}

body.ui-v3 .market-layout,
body.ui-v3 .inventory-layout {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: clamp(112px, 17vw, 170px) minmax(0, 1fr) !important;
  gap: clamp(8px, 1.5vw, 14px) !important;
  overflow: hidden !important;
}

body.ui-v3 .market-tabs,
body.ui-v3 .inventory-tabs {
  min-height: 0 !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  padding-right: 3px !important;
}

body.ui-v3 .market-tabs button,
body.ui-v3 .inventory-tabs button {
  flex: 0 0 44px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 7px 9px !important;
  font-size: clamp(10px, 1.8vw, 13px) !important;
  text-align: left !important;
}

body.ui-v3 .market-grid,
body.ui-v3 .inventory-grid,
body.ui-v3 .inventory-owned-grid {
  min-height: 0 !important;
  overflow-y: auto !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 25vw, 235px), 1fr)) !important;
  align-content: start !important;
  gap: 10px !important;
  padding: 2px 4px 8px !important;
}

body.ui-v3 .market-item,
body.ui-v3 .inventory-owned-card {
  min-height: clamp(132px, 33dvh, 190px) !important;
  padding: 10px !important;
}

body.ui-v3 .leaderboard-filter-bar,
body.ui-v3 .leaderboard-filters,
body.ui-v3 .leaderboard-dropdown-filters-bar,
body.ui-v3 .social-hub-tabs,
body.ui-v3 .liveops-tab-nav {
  flex: 0 0 auto !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 5px !important;
  display: grid !important;
  gap: 6px !important;
  border: 1px solid var(--ui-v3-line) !important;
  border-radius: 9px !important;
  background: rgba(7, 15, 29, 0.82) !important;
}

body.ui-v3 .social-hub-tabs {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

body.ui-v3 .liveops-tab-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

body.ui-v3 .social-hub-tab,
body.ui-v3 .liveops-tab-btn {
  min-width: 0 !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 5px 6px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(9px, 1.45vw, 12px) !important;
}

body.ui-v3 .leaderboard-filters {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body.ui-v3 .leaderboard-dropdown-filters-bar {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body.ui-v3 #screenLeaderboard > button[data-flow-back] {
  display: none !important;
}

body.ui-v3 .dropdown-filter-item {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

body.ui-v3 .dropdown-filter-item label {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  color: var(--ui-v3-muted) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.ui-v3 .podium-crown::before {
  content: "";
  display: block;
  width: 22px;
  height: 18px;
  background: currentColor;
  clip-path: polygon(0 28%, 24% 58%, 50% 0, 76% 58%, 100% 28%, 88% 100%, 12% 100%);
}

body.ui-v3 .leaderboard-filters select {
  min-width: 0 !important;
  width: 100% !important;
}

body.ui-v3 .leaderboard-podium,
body.ui-v3 .leader-podium {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

/* Settings shell */
body.ui-v3 .mobile-popup.show {
  position: fixed !important;
  inset: 0 !important;
  z-index: 12000 !important;
  width: 100dvw !important;
  height: 100dvh !important;
  padding: var(--ui-v3-safe-top) var(--ui-v3-safe-right) var(--ui-v3-safe-bottom) var(--ui-v3-safe-left) !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(2, 7, 15, 0.9), rgba(4, 11, 23, 0.7)),
    url("assets/ui-v3/control-room-960.webp") center/cover no-repeat !important;
}

body.ui-v3 .mobile-popup-card {
  width: min(1180px, 100%) !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 10px !important;
  display: grid !important;
  grid-template-columns: clamp(118px, 18vw, 180px) minmax(0, 1fr) !important;
  grid-template-rows: var(--ui-v3-header-h) minmax(0, 1fr) !important;
  gap: 8px 12px !important;
  overflow: hidden !important;
  border: 1px solid var(--ui-v3-line) !important;
  border-radius: var(--ui-v3-radius) !important;
  background: rgba(6, 13, 26, 0.93) !important;
  box-shadow: var(--ui-v3-shadow) !important;
}

body.ui-v3 .mobile-popup-card.settings-popup-card {
  width: min(1180px, 100%) !important;
  height: 100% !important;
  max-height: none !important;
  padding: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

body.ui-v3 .settings-header-row {
  flex: 0 0 var(--ui-v3-header-h) !important;
  min-height: var(--ui-v3-header-h) !important;
  margin: 0 !important;
  padding: 0 4px 6px !important;
  border-bottom: 1px solid var(--ui-v3-line) !important;
}

body.ui-v3 .settings-header-row h2 {
  font-family: var(--ui-v3-display) !important;
  font-size: clamp(17px, 2.8vw, 24px) !important;
  letter-spacing: 0 !important;
}

body.ui-v3 .settings-header-row #popupCloseBtn {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: transparent !important;
  position: relative !important;
}

body.ui-v3 .settings-header-row #popupCloseBtn::before,
body.ui-v3 .settings-header-row #popupCloseBtn::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 21px;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transform: rotate(45deg);
}

body.ui-v3 .settings-header-row #popupCloseBtn::after {
  transform: rotate(-45deg);
}

body.ui-v3 .settings-popup-container {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: clamp(112px, 19vw, 170px) minmax(0, 1fr) !important;
  gap: 8px !important;
  overflow: hidden !important;
}

body.ui-v3 .settings-popup-sidebar {
  min-height: 0 !important;
  padding-right: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
}

body.ui-v3 .popup-settings-tab {
  flex: 0 0 44px !important;
  min-height: 44px !important;
  height: 44px !important;
  border-radius: 6px !important;
}

body.ui-v3 .settings-popup-content-area {
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 4px 0 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
}

body.ui-v3 .settings-popup-content-area,
body.ui-v3 .settings-popup-content-area * {
  -webkit-text-fill-color: currentColor;
}

body.ui-v3 .settings-popup-panel:not(.hidden) {
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important;
}

body.ui-v3 .mobile-popup-head {
  grid-column: 1 / -1 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 4px 8px !important;
  border-bottom: 1px solid var(--ui-v3-line) !important;
}

body.ui-v3 .settings-popup-tabs {
  grid-column: 1 !important;
  grid-row: 2 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding-right: 4px !important;
}

body.ui-v3 .settings-popup-tab {
  flex: 0 0 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  text-align: left !important;
}

body.ui-v3 .settings-popup-panels,
body.ui-v3 .settings-popup-panel:not(.hidden) {
  grid-column: 2 !important;
  grid-row: 2 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow-y: auto !important;
}

/* Modal system */
body.ui-v3 .confirm-modal:not(.hidden),
body.ui-v3 .team-lobby-overlay.show,
body.ui-v3 .match-end-panel.show {
  padding: var(--ui-v3-safe-top) var(--ui-v3-safe-right) var(--ui-v3-safe-bottom) var(--ui-v3-safe-left) !important;
  background: rgba(1, 5, 13, 0.78) !important;
}

body.ui-v3 .team-lobby-overlay.show {
  background:
    linear-gradient(90deg, rgba(2, 8, 16, 0.9), rgba(4, 16, 24, 0.72)),
    url("assets/ui-v3/club-facility-960.webp") center/cover no-repeat !important;
}

body.ui-v3 .match-end-panel.show {
  background:
    linear-gradient(90deg, rgba(4, 7, 17, 0.9), rgba(17, 10, 18, 0.7)),
    url("assets/ui-v3/reward-gallery-960.webp") center/cover no-repeat !important;
}

body.ui-v3 .confirm-card,
body.ui-v3 .team-lobby-card,
body.ui-v3 .team-lobby-popup-card,
body.ui-v3 .match-end-card {
  max-width: min(960px, 96dvw) !important;
  max-height: calc(100dvh - var(--ui-v3-safe-top) - var(--ui-v3-safe-bottom)) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--ui-v3-line) !important;
  border-radius: var(--ui-v3-radius) !important;
  background: var(--ui-v3-panel-strong) !important;
  box-shadow: var(--ui-v3-shadow) !important;
}

body.ui-v3 .confirm-body,
body.ui-v3 .team-lobby-grid,
body.ui-v3 .team-lobby-popup-body,
body.ui-v3 .match-end-body {
  min-height: 0 !important;
  overflow-y: auto !important;
}

/* Main menu compatibility only */
@media (orientation: landscape) and (max-width: 760px) {
  body.ui-v3 #screenMainMenu.premium-main-menu .premium-main-topbar {
    grid-template-columns: minmax(0, 1fr) minmax(120px, 0.55fr) minmax(205px, 1.05fr) !important;
  }

  body.ui-v3 #screenMainMenu.premium-main-menu .premium-top-center {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body.ui-v3 #screenMainMenu.premium-main-menu .main-menu-wallet {
    width: auto !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.ui-v3 #screenMainMenu.premium-main-menu .wallet-chip {
    min-width: 0 !important;
    width: auto !important;
  }
}

@media (orientation: landscape) and (max-width: 720px) {
  body.ui-v3 #screenMainMenu.premium-main-menu .premium-main-topbar {
    grid-template-columns: minmax(0, 0.92fr) minmax(94px, 0.42fr) minmax(235px, 1.15fr) !important;
  }

  body.ui-v3 #screenMainMenu.premium-main-menu .premium-top-center .energy-foot,
  body.ui-v3 #screenMainMenu.premium-main-menu .premium-level-track,
  body.ui-v3 #screenMainMenu.premium-main-menu .wallet-chip em {
    display: none !important;
  }

  body.ui-v3 #screenMainMenu.premium-main-menu .main-menu-wallet {
    position: static !important;
    transform: none !important;
  }

  body.ui-v3 #screenMainMenu.premium-main-menu .premium-card-copy strong {
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    line-height: 1.02 !important;
  }

  body.ui-v3 #screenMainMenu.premium-main-menu [data-sahax-edit-text="menu-friends-title"] {
    font-size: 10px !important;
  }
}

/* Compact landscape: 568x320 and similar */
@media (orientation: landscape) and (max-height: 360px) {
  :root {
    --ui-v3-safe-top: max(4px, env(safe-area-inset-top));
    --ui-v3-safe-right: max(4px, env(safe-area-inset-right));
    --ui-v3-safe-bottom: max(4px, env(safe-area-inset-bottom));
    --ui-v3-safe-left: max(4px, env(safe-area-inset-left));
    --ui-v3-header-h: 38px;
    --ui-v3-footer-h: 42px;
    --ui-v3-shell-gap: 5px;
    --ui-v3-radius: 8px;
  }

  body.ui-v3 .flow > .flow-card:not(#screenMainMenu) {
    padding-inline: 8px !important;
    padding-bottom: 5px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.ui-v3 .flow-card:not(#screenMainMenu) > h2,
  body.ui-v3 .flow-card:not(#screenMainMenu) > .screen-header,
  body.ui-v3 .flow-card:not(#screenMainMenu) > .flow-card-head {
    margin-inline: -8px !important;
    padding-inline: 10px !important;
    font-size: 15px !important;
  }

  body.ui-v3 .screen-header .btn-close,
  body.ui-v3 .flow-card-head .flow-top-back {
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  body.ui-v3 .mode-card {
    padding: 9px !important;
  }

  body.ui-v3 .mode-card h3 {
    font-size: 15px !important;
  }

  body.ui-v3 .mode-card-desc,
  body.ui-v3 .mode-card-tags,
  body.ui-v3 .mode-card-badge {
    display: none !important;
  }

  body.ui-v3 .mode-card-subtitle {
    font-size: 10px !important;
  }

  body.ui-v3 .mode-card-icon {
    width: 28px !important;
    height: 28px !important;
  }

  body.ui-v3 .play-section {
    padding: 7px !important;
  }

  body.ui-v3 .play-option-grid .play-choice,
  body.ui-v3 .flow-card:not(#screenMainMenu) button {
    min-height: 44px !important;
  }

  body.ui-v3 .market-layout,
  body.ui-v3 .inventory-layout {
    grid-template-columns: 104px minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  body.ui-v3 .market-tabs button,
  body.ui-v3 .inventory-tabs button,
  body.ui-v3 .settings-popup-tab {
    flex-basis: 44px !important;
    min-height: 44px !important;
    font-size: 10px !important;
  }

  body.ui-v3 .market-item,
  body.ui-v3 .inventory-owned-card {
    min-height: 120px !important;
  }

  body.ui-v3 .social-hub-tab,
  body.ui-v3 .liveops-tab-btn {
    min-height: 44px !important;
    font-size: 8.5px !important;
  }

  body.ui-v3 .mobile-popup-card {
    grid-template-columns: 108px minmax(0, 1fr) !important;
    padding: 6px !important;
    gap: 5px 8px !important;
  }
}

@media (orientation: landscape) and (min-height: 431px) {
  body.ui-v3 .flow > .flow-card:not(#screenMainMenu) {
    width: min(1180px, calc(100% - 2vw)) !important;
    height: min(560px, calc(100dvh - var(--ui-v3-safe-top) - var(--ui-v3-safe-bottom))) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ui-v3 *,
  body.ui-v3 *::before,
  body.ui-v3 *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  body.ui-v3 .flow > .flow-card:not(#screenMainMenu),
  body.ui-v3 .mobile-popup-card,
  body.ui-v3 .confirm-card {
    background: #0a1425 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* 20260711 landscape repair: content-led screens do not reserve a large footer. */
body.ui-v3[data-flow-role="browse"] .flow-card:not(#screenMainMenu) > .quick-play-actions,
body.ui-v3[data-flow-role="browse"] .flow-card:not(#screenMainMenu) > button[data-flow-back] {
  display: none !important;
}

body.ui-v3 .ui-v3-flow-close {
  position: absolute !important;
  z-index: 20 !important;
  top: calc((var(--ui-v3-header-h) - 40px) / 2) !important;
  right: clamp(8px, 1.5vw, 16px) !important;
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 8px !important;
  border: 1px solid var(--ui-v3-line) !important;
  background: rgba(18, 29, 50, 0.92) !important;
  color: #fff !important;
}

body.ui-v3[data-flow-role="setup"] #playSetupBackButton {
  display: none !important;
}

body.ui-v3[data-flow-role="setup"] #screenPlaySetup .play-actions {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

body.ui-v3[data-flow-role="setup"] #screenPlaySetup .play-actions #playSetupStartButton {
  width: min(260px, 44vw) !important;
  min-width: 160px !important;
}

body.ui-v3[data-flow-role="browse"] #screenTeam #teamBody,
body.ui-v3[data-flow-role="browse"] #screenSpectator #spectatorRoomList,
body.ui-v3[data-flow-role="browse"] #screenMarket #marketBody,
body.ui-v3[data-flow-role="browse"] #screenSocialHub #socialHubBody,
body.ui-v3[data-flow-role="browse"] #screenRankedTeamHub .ranked-hub-container,
body.ui-v3[data-flow-role="browse"] #screenRankedSoloHub .ranked-hub-container {
  padding-bottom: 6px !important;
}

/* Club cards use distinct, brighter scenes while keeping labels readable. */
body.ui-v3 #screenTeam .club-scene-card {
  background-position: center !important;
  border-color: rgba(162, 214, 248, 0.34) !important;
}

body.ui-v3 #screenTeam .club-scene-card::before {
  background: linear-gradient(90deg, rgba(3, 9, 19, 0.78) 0%, rgba(3, 9, 19, 0.40) 53%, rgba(3, 9, 19, 0.14) 100%) !important;
}

body.ui-v3 #screenTeam .club-scene-create { background-image: url("assets/ui-v3/club-create-960.webp") !important; }
body.ui-v3 #screenTeam .club-scene-mine,
body.ui-v3 #screenTeam .club-scene-mine-management { background-image: url("assets/ui-v3/club-mine-960.webp") !important; }
body.ui-v3 #screenTeam .club-scene-list,
body.ui-v3 #screenTeam .club-scene-mine-matches,
body.ui-v3 #screenTeam .club-scene-mine-leaderboard { background-image: url("assets/ui-v3/club-list-960.webp") !important; }
body.ui-v3 #screenTeam .club-scene-mine-members { background-image: url("assets/ui-v3/club-members-960.webp") !important; }
body.ui-v3 #screenTeam .club-scene-mine-training { background-image: url("assets/ui-v3/club-training-960.webp") !important; }
body.ui-v3 #screenTeam .club-scene-mine-schedules { background-image: url("assets/ui-v3/club-schedule-960.webp") !important; }
body.ui-v3 #screenTeam .club-scene-mine-chat { background-image: url("assets/ui-v3/club-chat-960.webp") !important; }

body.ui-v3 #screenTeam .club-scene-card .mode-card-icon {
  display: none !important;
}

body.ui-v3 #screenTeam .club-scene-card h3 {
  font-family: "Orbitron", "Outfit", sans-serif !important;
  font-size: clamp(18px, 4.8dvh, 28px) !important;
  text-transform: uppercase;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.98) !important;
}

body.ui-v3 #screenTeam .club-scene-card .mode-card-desc {
  max-width: min(28ch, 78%);
  color: rgba(240, 247, 255, 0.92) !important;
}

body.ui-v3 #screenTeam .quick-play-grid {
  height: auto !important;
  grid-auto-rows: minmax(clamp(122px, 27dvh, 180px), 1fr) !important;
  overflow: visible !important;
}

/* Club cup hub: one active tournament mode at a time, no three-column squeeze. */
body.ui-v3 #screenRankedTeamHub {
  gap: 6px !important;
}

body.ui-v3 #screenRankedTeamHub > h2 {
  flex-basis: calc(var(--ui-v3-header-h) - 4px) !important;
  min-height: calc(var(--ui-v3-header-h) - 4px) !important;
}

body.ui-v3 .cup-mode-selector {
  flex: 0 0 42px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 0 2px;
}

body.ui-v3 .cup-mode-selector button {
  min-height: 40px !important;
  padding: 4px 10px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: rgba(11, 22, 40, 0.92) !important;
  color: #d8e4f2 !important;
}

body.ui-v3 .cup-mode-selector button strong {
  color: #fff;
  font-family: "Orbitron", sans-serif;
  font-size: 13px;
}

body.ui-v3 .cup-mode-selector button span {
  color: rgba(220, 234, 248, 0.75);
  font-size: 11px;
  white-space: nowrap;
}

body.ui-v3 .cup-mode-selector button.active {
  border-color: rgba(91, 230, 174, 0.82) !important;
  background: linear-gradient(180deg, rgba(42, 172, 122, 0.96), rgba(17, 102, 78, 0.96)) !important;
  color: #06150e !important;
}

body.ui-v3 .cup-mode-selector button.active span,
body.ui-v3 .cup-mode-selector button.active strong {
  color: #fff !important;
}

body.ui-v3 #screenRankedTeamHub .ranked-season-info-bar {
  flex: 0 0 auto !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 5px 9px !important;
}

body.ui-v3 #screenRankedTeamHub .ranked-season-info-bar > div:first-child {
  min-width: 0;
  flex: 1;
}

body.ui-v3 #screenRankedTeamHub[data-cup-mode="6v6"] .cup-season-11,
body.ui-v3 #screenRankedTeamHub[data-cup-mode="6v6"] .cup-reward-11,
body.ui-v3 #screenRankedTeamHub[data-cup-mode="11v11"] .cup-season-6,
body.ui-v3 #screenRankedTeamHub[data-cup-mode="11v11"] .cup-reward-6,
body.ui-v3 #screenRankedTeamHub[data-cup-mode="6v6"] .cup-portal.cup-11v11,
body.ui-v3 #screenRankedTeamHub[data-cup-mode="11v11"] .cup-portal.cup-6v6 {
  display: none !important;
}

body.ui-v3 #screenRankedTeamHub .ranked-hub-container {
  overflow: hidden !important;
  padding: 0 !important;
}

body.ui-v3 #screenRankedTeamHub #rankedTeamLayout {
  height: 100% !important;
  min-height: 0 !important;
  grid-template-columns: minmax(146px, 0.7fr) minmax(0, 1.3fr) !important;
  gap: 8px !important;
}

body.ui-v3 #screenRankedTeamHub .player-license-card {
  min-height: 0 !important;
  padding: 10px !important;
  overflow: hidden !important;
}

body.ui-v3 #screenRankedTeamHub .player-license-card > h3 {
  margin: 0 0 6px !important;
  font-size: clamp(13px, 3.4dvh, 18px) !important;
}

body.ui-v3 #screenRankedTeamHub #rankedTeamMuseumContainer {
  max-height: none !important;
  overflow: hidden !important;
}

body.ui-v3 #screenRankedTeamHub .mode-portal-wrapper {
  display: block !important;
  min-height: 0 !important;
}

body.ui-v3 #screenRankedTeamHub .cup-portal {
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: clamp(10px, 2dvh, 16px) !important;
  background: linear-gradient(125deg, rgba(7, 18, 31, 0.94), rgba(11, 45, 55, 0.76)) !important;
}

body.ui-v3 #screenRankedTeamHub .cup-portal .portal-card-body {
  min-height: 0;
}

body.ui-v3 #screenRankedTeamHub .cup-portal .portal-card-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

body.ui-v3 #screenRankedTeamHub .cup-portal .portal-card-footer {
  margin-top: auto;
}

body.ui-v3 #screenRankedTeamHub .cup-portal .portal-card-footer > div:last-child {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px !important;
}

body.ui-v3 #screenRankedTeamHub .cup-portal .skewed-btn {
  min-height: 36px !important;
  padding: 4px 7px !important;
  font-size: 10px !important;
}

/* Actual market DOM is category menu + product grid; cards must grow with their actions. */
body.ui-v3 #screenMarket .market-layout {
  grid-template-columns: clamp(96px, 16vw, 150px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

body.ui-v3 #screenMarket .market-category-menu {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  padding: 2px 3px 7px 0 !important;
}

body.ui-v3 #screenMarket .market-category-menu > button {
  flex: 0 0 44px !important;
  min-height: 44px !important;
  padding: 7px 8px !important;
  text-align: left !important;
  font-size: clamp(10px, 1.7vw, 13px) !important;
}

body.ui-v3 #screenMarket .market-grid {
  grid-column: 2 !important;
  grid-row: 1 !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  overflow-y: auto !important;
}

body.ui-v3 #screenMarket .market-item {
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  padding: 10px !important;
}

body.ui-v3 #screenMarket .market-item .market-visual {
  flex: 0 0 72px !important;
  height: 72px !important;
  margin-bottom: 7px !important;
}

body.ui-v3 #screenMarket .market-item-title {
  min-height: 18px;
}

body.ui-v3 #screenMarket .market-item-desc {
  min-height: 0 !important;
  margin-bottom: 8px !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

body.ui-v3 #screenMarket .market-item .badge {
  min-height: 28px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Match setup stays dense and proportional in landscape instead of stretching empty panels. */
body.ui-v3 #screenPlaySetup .play-setup-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr) !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  gap: 8px !important;
}

body.ui-v3 #screenPlaySetup .play-section {
  min-height: 0 !important;
  padding: 10px !important;
  align-content: start !important;
}

body.ui-v3 #screenPlaySetup .play-section-title {
  margin: 0 0 7px !important;
  font-size: clamp(12px, 2.8dvh, 15px) !important;
}

body.ui-v3 #screenPlaySetup .play-option-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.ui-v3 #screenPlaySetup .play-option-grid .wide-choice {
  grid-column: 1 / -1 !important;
}

body.ui-v3 #screenPlaySetup.classic-setup-mode #playModeSection { grid-column: 1 !important; }
body.ui-v3 #screenPlaySetup.classic-setup-mode #playPartySection { grid-column: 2 !important; }

body.ui-v3 #screenPlaySetup.ai-setup-mode .play-setup-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: 820px;
  margin-inline: auto;
}

body.ui-v3 #screenPlaySetup.ai-setup-mode #playAiTrainingOptions { grid-column: 1 !important; }
body.ui-v3 #screenPlaySetup.room-setup-mode .play-setup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
body.ui-v3 #screenPlaySetup.room-setup-mode #playRoomNameSection,
body.ui-v3 #screenPlaySetup.room-setup-mode #playRoomCardSection { grid-column: 1 / -1 !important; }
body.ui-v3 #screenPlaySetup.room-setup-mode #playRoomCardSection { max-height: 196px; overflow: auto; }

@media (orientation: landscape) and (max-height: 360px) {
  body.ui-v3 .ui-v3-flow-close {
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    top: calc((var(--ui-v3-header-h) - 34px) / 2) !important;
  }

  body.ui-v3 #screenTeam .club-scene-card .mode-card-desc,
  body.ui-v3 #screenRankedTeamHub .cup-portal .portal-card-desc,
  body.ui-v3 #screenRankedTeamHub .player-license-card h4,
  body.ui-v3 #screenRankedTeamHub .mode-card-tags {
    display: none !important;
  }

  body.ui-v3 #screenRankedTeamHub #rankedTeamLayout {
    grid-template-columns: minmax(118px, 0.62fr) minmax(0, 1.38fr) !important;
  }

  body.ui-v3 #screenMarket .market-layout {
    grid-template-columns: 82px minmax(0, 1fr) !important;
  }

  body.ui-v3 #screenPlaySetup .play-setup-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr) !important;
    gap: 6px !important;
  }

  body.ui-v3 #screenPlaySetup .play-section {
    padding: 7px !important;
  }

  body.ui-v3 #screenPlaySetup .play-option-grid .play-choice {
    min-height: 36px !important;
    padding: 5px 6px !important;
    font-size: 11px !important;
  }

}