:root {
  --aw-cyan:        #00e5ff;
  --aw-cyan-soft:   #66f8ff;
  --aw-cyan-ghost:  rgba(0, 229, 255, 0.18);
  --aw-cyan-tint:   rgba(0, 229, 255, 0.12);
  --aw-ink:         #001018;
  --aw-bg-glass:    rgba(0, 12, 20, 0.82);
  --aw-bg-glass-2:  rgba(0, 14, 22, 0.92);
  --aw-text:        #e8f6fb;
  --aw-text-dim:    #b0d8e8;
  --aw-danger:      #ff4060;
  --aw-success:     #50ffaa;

  --aw-radius-sm:   8px;
  --aw-radius-md:   12px;
  --aw-radius-lg:   18px;
  --aw-radius-pill: 999px;

  --aw-focus-ring:  0 0 0 3px rgba(0, 229, 255, 0.45),
                    0 0 0 5px rgba(0, 229, 255, 0.18);

  --aw-ease:        cubic-bezier(.2, .7, .3, 1);
}

/* Keyframe for the list icon pulse */
@keyframes icon-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* ------------------------ Accessibility ----------------------------- */

/* Visually hidden but available to assistive tech */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link: first focusable element; jumps past the splash chrome
   straight into the game canvas for keyboard users. */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2147483647;
  padding: 10px 18px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--aw-ink);
  background: var(--aw-cyan);
  border-radius: var(--aw-radius-md);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.18s var(--aw-ease);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Universal :focus-visible — keyboard users see a ring, mouse users don't.
   Override the suppressed default outline only when keyboard-focused. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: none;
  box-shadow: var(--aw-focus-ring);
  border-radius: var(--aw-radius-sm);
}

/* Pointer-locked canvas should not show the focus ring */
#canvas:focus-visible { box-shadow: none; outline: none; }

/* --------------------- Unified HUD chrome buttons -------------------- */
/* Bring mic-toggle and back-to-menu into the same visual contract as
   .corner-btn (account/shop). Single hover/active/focus contract. */
#mic-toggle,
#back-to-menu,
.corner-btn {
  font-feature-settings: "tnum" 1, "ss01" 1;
  border-radius: var(--aw-radius-md);
  transition:
    transform 0.15s var(--aw-ease),
    background 0.15s var(--aw-ease),
    color      0.15s var(--aw-ease),
    border-color 0.15s var(--aw-ease),
    box-shadow 0.18s var(--aw-ease);
}

#mic-toggle:focus-visible,
#back-to-menu:focus-visible,
.corner-btn:focus-visible {
  outline: none;
  box-shadow:
    var(--aw-focus-ring),
    0 0 14px rgba(0, 229, 255, 0.55);
}

/* --------------------- Play CTAs (the "switch" row) ------------------ */
/* The .xr-button-container holds VR / AR / Desktop / Mobile launchers.
   Make the row read as one tactical interface; keyboard/touch parity. */

.xr-button-container > a,
#desktop-button,
#mobile-button {
  -webkit-tap-highlight-color: transparent;
}

.xr-button-container > a:focus-visible,
#desktop-button:focus-visible,
#mobile-button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(0, 229, 255, 0.55),
    0 0 24px rgba(0, 229, 255, 0.45);
  border-radius: var(--aw-radius-lg);
}

/* Crisper hover lift for the play row; keeps `transform:scale(1.06)` from
   base but layers a subtle vertical rise for affordance. */
.xr-button-container > a:hover,
#desktop-button:hover,
#mobile-button:hover {
  transform: translateY(-2px) scale(1.04);
}
.xr-button-container > a:active,
#desktop-button:active,
#mobile-button:active {
  transform: translateY(0) scale(0.96);
}

/* Re-assert a generous minimum touch target on coarse pointers so the
   play CTAs always meet Apple HIG / Material 44x44 px floor. */
@media (pointer: coarse) {
  .xr-button-container > a,
  #desktop-button,
  #mobile-button {
    min-height: 56px;
  }
  #mic-toggle,
  #back-to-menu,
  .corner-btn,
  .pn-dot {
    min-height: 44px;
    padding: 0 10px; /* Smaller horizontal padding */
    font-size: 12px; /* Smaller font size */
    letter-spacing: 1px; /* Tighter letter spacing */
  }
  .pn-dot {
    /* keep visual 8px dot but enlarge the hit-area pad */
    min-width: 44px;
  }
}

/* The page-nav dots already have an ::before hit-area pad, but make their
   focus ring more visible for keyboard users. */
.pn-dot:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(0, 229, 255, 0.6),
    0 0 12px rgba(0, 229, 255, 0.5);
}

/* --------------------- WCAG AA contrast bumps ------------------------ */
/* Bring borderline-low contrast colors to >= 4.5:1 on the #0b0102 base. */

.pn-dot {
  background: rgba(0, 229, 255, 0.45);  /* was 0.25 -> too low contrast */
  border-color: rgba(0, 229, 255, 0.75);
}
.pn-dot:hover:not(.active) {
  background: rgba(0, 229, 255, 0.7);
}

/* Muted text (used in gc-* sections + footer fine print) */
.muted,
#splash-game-desc {
  color: rgba(208, 232, 244, 0.72) !important;
}

.gc-stat-l { color: rgba(200, 230, 245, 0.78) !important; }

/* --------------------- Layout containment (perf) --------------------- */
/* Tell the browser these sections paint/layout in isolation.
   Saves repaint cost on splash animations and modal toggles. */
#splash,
.gc-section,
.aw-panel,
#mobile-hud,
#mobile-settings,
#legal-overlay,
#reset-overlay,
#verify-overlay,
#prox-chat-info {
  contain: layout style paint;
}

/* The canvas owns its entire box; never let it leak layout work to siblings */
#canvas {
  contain: strict;
}

/* Hint the splash video stays GPU-composited (was already z:-1, this avoids
   the occasional repaint storm on Firefox when the splash fades out). */
#splash-video {
  will-change: opacity, transform;
  transform: translateZ(0);
}

/* --------------------- Small layout tidy-ups ------------------------- */

/* Footer legal bar: clean separator on top, kerned link text */
#arena-legal-footer a,
#arena-legal-footer button {
  letter-spacing: 0.04em;
}

/* Eliminate a 1-frame jump on the splash dismissal by promoting to a
   compositor layer at rest (cheap when nothing is animating). */
#splash { will-change: opacity, transform; }
#splash.hide { will-change: auto; }

/* Modal overlays: clear focus contract */
#legal-overlay[aria-hidden="false"],
#reset-overlay[aria-hidden="false"],
#verify-overlay[aria-hidden="false"] {
  /* Already handled by base; this just makes sure CSS contains them */
  contain: layout style;
}

/* --------------------- Reduced-motion polish ------------------------- */
@media (prefers-reduced-motion: reduce) {
  .xr-button-container > a:hover,
  #desktop-button:hover,
  #mobile-button:hover,
  #mic-toggle:hover,
  #back-to-menu:hover,
  .corner-btn:hover {
    transform: none !important;
  }
  .skip-link { transition: none; }
  .gc-credits li::before,
  .aw-gi-credits li::before {
    animation: none !important;
  }
}

/* --------------------- Forced-colors (Windows HC) -------------------- */
@media (forced-colors: active) {
  #mic-toggle,
  #back-to-menu,
  .corner-btn,
  .xr-button-container > a,
  #desktop-button,
  #mobile-button {
    border: 2px solid CanvasText;
    background: Canvas;
    color: CanvasText;
    filter: none !important;
    box-shadow: none !important;
  }
  *:focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 2px;
    box-shadow: none !important;
  }
}

/* --------------------- Print stub (clean fallback) ------------------- */
@media print {
  body { background: #ffffff !important; color: #000 !important; }
  #canvas,
  #splash,
  #splash-video,
  .xr-button-container,
  #mic-toggle, #account-toggle, #shop-toggle,
  #back-to-menu, #mobile-hud, #adsense-zone,
  #scroll-hint, #page-nav { display: none !important; }
  #arena-legal-footer { position: static !important; color: #000 !important; background: transparent !important; }
}

/* =====================================================================
   SLEEK MOBILE LAYER
   Refines responsiveness without touching base rules. Strategy:
     - Use dvh/svh so mobile browser chrome doesn't clip the splash.
     - Honour safe-area insets on notched / dynamic-island devices.
     - Suppress hover transforms on touch (hover:none) for snappier feel.
     - Lift form inputs to >=16px so iOS Safari never auto-zooms.
     - Polish corner buttons / mic / legal footer for thumb reach.
   ===================================================================== */

/* Allow the splash + canvas to follow the *visible* mobile viewport
   (dvh accounts for collapsing browser chrome on iOS/Android). */
@supports (height: 100dvh) {
  html, body { min-height: 100dvh; }
  #canvas    { height: 100dvh !important; }
  #splash    { height: 100dvh; }
}

/* Kill the blue iOS tap flash globally (already on some elements; cover
   the rest for a consistent feel). */
a, button, [role="button"], .pn-dot, .corner-btn,
#back-to-menu, #mic-toggle,
#mobile-exit, #mobile-settings-btn,
#arena-legal-footer button, .al-tab, .al-close,
.xr-button-container > a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* removes ~300ms click delay where present */
}

/* Don't apply hover-lift on touch screens — it sticks visually on tap. */
@media (hover: none) {
  .xr-button-container > a:hover,
  #launch-btn:hover,
  #desktop-button:hover,
  #mobile-button:hover,
  #mic-toggle:hover,
  #back-to-menu:hover,
  .corner-btn:hover,
  .pn-dot:hover {
    transform: none !important;
  }
}

/* Prevent iOS Safari auto-zoom on text inputs — affects every form
   field in the account/shop/reset panels. */
@media (max-width: 720px) {
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="search"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ------------------ Safe-area insets (notch / island) ---------------- */
/* The play-button row, legal footer, and bottom HUD all need to sit
   above the home indicator on iOS and below the dynamic island. */
.xr-button-container {
  padding-left:  max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
}

/* Play CTAs on <body>: viewport-fixed, never scroll with wiki content */
#play-cta-portal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100002 !important;
  pointer-events: none !important;
}
#play-cta-portal #play-cta-dock,
#play-cta-portal .xr-button-container {
  position: absolute !important;
  top: 72% !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}
body.past-hero #play-cta-portal {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.session-desktop #play-cta-portal,
body.session-mobile  #play-cta-portal,
body.session-xr      #play-cta-portal {
  display: none !important;
}
#arena-legal-footer {
  padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  padding-left:   max(12px, env(safe-area-inset-left));
  padding-right:  max(12px, env(safe-area-inset-right));
}
#mobile-hud {
  padding-left:  env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}
#account-toggle,
#shop-toggle {
  margin-top:   env(safe-area-inset-top);
  margin-right: env(safe-area-inset-right);
}
#back-to-menu,
#mic-toggle {
  margin-top:  env(safe-area-inset-top);
  margin-left: env(safe-area-inset-left);
}

/* ------------------ Sleek splash on small portraits ------------------ */
@media (max-width: 480px) and (orientation: portrait) {
  /* Tighter, more readable title block on phones */
  #splash-title {
    font-size: clamp(34px, 11vw, 56px) !important;
    letter-spacing: 1px !important;
    line-height: 0.95 !important;
  }
  #splash-subtitle {
    font-size: clamp(11px, 3.2vw, 14px) !important;
    letter-spacing: 2.5px !important;
  }
  #splash-features {
    gap: 10px !important;
    font-size: 11px !important;
  }
  #splash-game-desc {
    font-size: clamp(11px, 3vw, 13px) !important;
    line-height: 1.45 !important;
    padding: 0 12px !important;
  }
  /* Scroll-hint clutters small portraits; the dot-nav already hints scroll. */
  #scroll-hint { display: none !important; }
}

/* On the smallest devices, collapse the side dot-nav (it overlaps content). */
@media (max-width: 380px) {
  #page-nav { display: none !important; }
}

/* ------------------ Sleek info pages on mobile ----------------------- */
@media (max-width: 560px) {
  .gc-section .gc-inner   { padding: 14px 14px 18px !important; }
  .gc-section h2          { font-size: clamp(20px, 5.5vw, 26px) !important; }
  .gc-section h3          { font-size: clamp(15px, 4vw, 18px) !important; }
  .gc-section p,
  .gc-section li          { font-size: 13.5px !important; line-height: 1.55 !important; }
  .gc-section-bar         { padding: 8px 12px !important; }
  .gc-bar-label           { font-size: 13px !important; }
  /* Ad inside info pages can shrink to a single banner. */
  .gc-section-ad ins.adsbygoogle { max-width: 320px !important; }
}

/* ------------------ Legal footer mobile polish ----------------------- */
@media (max-width: 560px) {
  #arena-legal-footer {
    gap: 6px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    font-size: 12px !important;
  }
  #arena-legal-footer button {
    min-height: 36px;
    padding: 6px 10px !important;
    flex: 0 0 auto;
  }
}

/* ------------------ Legal/reset/verify modal mobile ----------------- */
@media (max-width: 560px) {
  .al-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
  }
  .al-body {
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 14px 16px max(20px, env(safe-area-inset-bottom)) !important;
  }
  .al-head {
    padding: 8px 10px !important;
    padding-top: max(10px, env(safe-area-inset-top)) !important;
  }
  .al-tabs {
    gap: 4px !important;
    flex-wrap: wrap;
  }
  .al-tab {
    font-size: 12px !important;
    padding: 6px 10px !important;
    min-height: 36px;
  }
  .al-close {
    min-width: 44px;
    min-height: 44px;
    font-size: 24px !important;
  }
}

/* ------------------ Mobile HUD micro-polish ------------------------- */
@media (pointer: coarse) {
  /* Settings cog: enlarged hit area; the visible glyph stays small */
  #mobile-settings-btn {
    min-width: 44px;
    min-height: 44px;
  }
  /* EXIT button safer thumb size + safe-area */
  #mobile-exit {
    min-height: 40px;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
  }
  /* Range sliders: larger thumb for fingers */
  #mobile-settings input[type="range"] {
    height: 28px;
  }
}

/* ------------------ Splash content: dynamic-viewport fix ------------- */
@media (orientation: portrait) {
  /* On portrait phones, splash-title-block sometimes hugs the top under
     the dynamic island. Push it down past the safe-area inset. */
  #splash-title-block {
    padding-top: max(12px, env(safe-area-inset-top));
  }
}

/* ------------------ Mobile Panel Polish ---------------- */
@media (max-width: 480px) {
  .aw-panel {
    overscroll-behavior: contain;
  }
}

/* ------------------ Smooth-scroll polish ---------------------------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overscroll-behavior-y: contain; }
.gc-section-scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,229,255,0.45) transparent;
}
.gc-section-scroll::-webkit-scrollbar       { width: 6px; }
.gc-section-scroll::-webkit-scrollbar-thumb { background: rgba(0,229,255,0.45); border-radius: 3px; }
.gc-section-scroll::-webkit-scrollbar-track { background: transparent; }

/* ------------------ Backdrop-blur progressive enhancement ----------- */
@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
  .aw-panel,
  .al-modal,
  #prox-chat-info,
  #mobile-settings,
  #adsense-zone {
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter:         blur(10px) saturate(140%);
  }
}

/* ------------------ AdSense zone: graceful column stack ------------- */
@media (max-width: 720px) {
  #adsense-ad-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .aw-ad-unit {
    width: min(100%, 360px);
    max-width: 360px;
  }
  /* On phones, only the first ad shows to keep the splash usable. */
  .aw-ad-unit:nth-child(n+2) { display: none !important; }
}

/* ------------------ Landscape phones: hide non-essential chrome ----- */
@media (max-height: 480px) and (orientation: landscape) and (pointer: coarse) {
  #scroll-hint,
  #page-nav { display: none !important; }
  #splash-features { display: none !important; }
  #splash-game-desc { display: none !important; }
}

/* ------------------ Selection color polish -------------------------- */
::selection {
  background: rgba(0, 229, 255, 0.45);
  color: #001018;
}

/* =====================================================================
   RESPONSIVE HEADER & TOP HUD POLISH
   ===================================================================== */

#aw-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100001;
  pointer-events: none;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
  box-sizing: border-box;
}

.aw-header-scroll-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  pointer-events: auto;
}

/* Reset individual buttons positioning when inside the header container */
#aw-header #aw-nav-dock,
#aw-header #aw-action-dock {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  position: static !important;
  margin: 0 !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
}

#aw-header .corner-btn {
  position: static !important;
  margin: 0 !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
}

/* Unified header control height — nav dock + action dock */
#aw-header .aw-nav-btn,
#aw-header .corner-btn {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}

/* Mobile & Tablet Overrides (Screen width <= 800px) */
@media (max-width: 800px) {
  #aw-header {
    padding: max(8px, env(safe-area-inset-top)) 8px 0 8px !important;
  }
  
  .aw-header-scroll-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    padding: 0 !important;
    gap: 4px !important;
  }
  
  #aw-header #aw-nav-dock,
  #aw-header #aw-action-dock {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
  }

  #aw-header #aw-action-dock {
    justify-content: flex-end !important;
    flex: 0 1 auto !important;
  }

  /* Keep the menu container always visible — never let flexbox collapse it */
  #aw-header .aw-more-dropdown-container {
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
    flex-shrink: 0 !important;
  }

  /* Compact high-tech styling for portrait buttons */
  #aw-header .aw-nav-btn,
  #aw-header .corner-btn {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 4px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(0, 229, 255, 0.45) !important;
    background: rgba(0, 10, 18, 0.8) !important;
    backdrop-filter: blur(8px) !important;
    font-size: clamp(8px, 2.2vw, 10.5px) !important;
    letter-spacing: 0.5px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 3px !important;
    box-shadow: inset 0 0 6px rgba(0, 229, 255, 0.15), 0 0 4px rgba(0, 229, 255, 0.1) !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    display: inline-flex !important;
  }

  #aw-header .aw-nav-btn .nb-label,
  #aw-header .corner-btn {
    font-size: clamp(8px, 2.2vw, 10.5px) !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
  }

  #aw-header .aw-nav-btn .nb-icon,
  #aw-header .corner-btn lucide-icon {
    margin-right: 0 !important;
    vertical-align: middle !important;
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #aw-header .aw-nav-btn lucide-icon svg,
  #aw-header .corner-btn lucide-icon svg {
    width: 12px !important;
    height: 12px !important;
  }

  #hud-level-badge {
    padding: 0 4px !important;
    border-radius: 6px !important;
  }

  #hud-level-text {
    font-size: clamp(8px, 2.2vw, 10.5px) !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
  }

  /* Safe spacing to prevent HUD overlap on portrait screens */
  @media (orientation: portrait) {
    #splash-title-block {
      padding-top: max(80px, calc(72px + env(safe-area-inset-top))) !important;
    }
  }
}

/* Narrow phones: icon-first nav, compact action labels — stays one row */
@media (max-width: 520px) {
  #aw-header .aw-nav-btn .nb-label {
    display: none !important;
  }
  #aw-header .aw-nav-btn {
    width: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  #aw-header #mute-toggle,
  #aw-header #shop-toggle,
  #aw-header #account-toggle,
  #aw-header #pwa-install-btn {
    padding: 0 6px !important;
    font-size: clamp(7px, 1.9vw, 9px) !important;
  }
  #aw-header #pwa-install-btn {
    display: none !important;
  }
  /* Keep the menu container visible and in-flow on narrow phones */
  #aw-header .aw-more-dropdown-container {
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
    flex-shrink: 0 !important;
  }
  /* Icon-only Menu button on narrow phones — matches other action buttons */
  #aw-header #aw-more-toggle {
    padding: 0 6px !important;
    font-size: clamp(7px, 1.9vw, 9px) !important;
    flex-shrink: 0 !important;
    min-width: 28px !important;
  }
  #aw-header #aw-more-toggle .menu-label {
    display: none !important;
  }
}

/* Landscape Mobile Overrides (Screen height <= 480px) */
@media (max-height: 480px) and (pointer: coarse) {
  #aw-header {
    padding: max(4px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left)) !important;
  }

  .aw-header-scroll-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 6px !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    padding: 0 !important;
  }

  #aw-header #aw-nav-dock,
  #aw-header #aw-action-dock {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    justify-content: flex-start !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
  }

  #aw-header #aw-action-dock {
    justify-content: flex-end !important;
    flex: 0 1 auto !important;
  }

  /* Ensure Menu dropdown container never collapses in landscape */
  #aw-header .aw-more-dropdown-container {
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
    flex-shrink: 0 !important;
  }

  /* Make buttons super sleek and small — same height on both docks */
  #aw-header .aw-nav-btn,
  #aw-header .corner-btn {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 6px !important;
    min-width: 0 !important;
    border-radius: 5px !important;
    border: 1px solid rgba(0, 229, 255, 0.45) !important;
    font-size: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Hide labels on small landscape screens to create elegant icon-only buttons */
  @media (max-width: 680px) {
    #aw-header .aw-nav-btn {
      width: 28px !important;
      padding: 0 !important;
      justify-content: center !important;
    }
    #aw-header .aw-nav-btn .nb-label {
      display: none !important;
    }
    
    #aw-header #mute-toggle,
    #aw-header #shop-toggle,
    #aw-header #account-toggle,
    #aw-header #aw-more-toggle {
      font-size: 0 !important;
      letter-spacing: 0 !important;
      color: transparent !important;
      width: 28px !important;
      padding: 0 !important;
      justify-content: center !important;
    }
    #aw-header #aw-more-toggle .menu-label {
      display: none !important;
    }
    
    #aw-header .aw-nav-btn .nb-icon,
    #aw-header .corner-btn lucide-icon {
      margin-right: 0 !important;
      width: 12px !important;
      height: 12px !important;
    }
  }
}

/* Hide header elements during gameplay session */
body.session-desktop #aw-header,
body.session-mobile  #aw-header,
body.session-xr      #aw-header,
body.session-desktop #mute-toggle,
body.session-mobile  #mute-toggle,
body.session-xr      #mute-toggle {
  display: none !important;
}

/* Cyber Button Interactive States */
.aw-nav-btn,
.corner-btn {
  text-shadow: 0 0 4px rgba(0, 229, 255, 0.3) !important;
  box-shadow: inset 0 0 8px rgba(0, 229, 255, 0.1) !important;
  transition: all 0.15s var(--aw-ease) !important;
}

#mute-toggle.muted {
  border-color: rgba(255, 64, 96, 0.45) !important;
  color: rgba(255, 64, 96, 0.75) !important;
  text-shadow: 0 0 4px rgba(255, 64, 96, 0.3) !important;
  box-shadow: inset 0 0 8px rgba(255, 64, 96, 0.1) !important;
}
#mute-toggle.muted lucide-icon {
  color: rgba(255, 64, 96, 0.75) !important;
}

@media (hover: hover) {
  .aw-nav-btn:hover,
  .corner-btn:hover,
  #back-to-menu:hover,
  #mic-toggle:hover {
    transform: translateY(-2px) scale(1.02) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.5) !important;
    box-shadow: 
      0 0 14px rgba(0, 229, 255, 0.45),
      0 0 4px rgba(255, 255, 255, 0.1),
      inset 0 0 12px rgba(0, 229, 255, 0.2) !important;
  }
  #mute-toggle.muted:hover {
    border-color: #ffffff !important;
    color: #ffffff !important;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.5) !important;
    box-shadow: 
      0 0 14px rgba(255, 64, 96, 0.45),
      0 0 4px rgba(255, 255, 255, 0.1),
      inset 0 0 12px rgba(255, 64, 96, 0.2) !important;
  }
}

.aw-nav-btn:active,
.corner-btn:active,
#back-to-menu:active,
#mic-toggle:active {
  transform: scale(0.95) !important;
  transition: transform 0.05s var(--aw-ease) !important;
}

/* Ad Unit Glassmorphic Upgrades */
.aw-ad-unit {
  background: linear-gradient(135deg, rgba(0, 16, 24, 0.72) 0%, rgba(0, 8, 14, 0.88) 100%) !important;
  border: 1px solid rgba(0, 229, 255, 0.28) !important;
  box-shadow: 
    0 8px 32px 0 rgba(0, 0, 0, 0.4),
    0 0 20px rgba(0, 229, 255, 0.08),
    inset 0 0 16px rgba(0, 229, 255, 0.04) !important;
  transition: border-color 0.3s var(--aw-ease), box-shadow 0.3s var(--aw-ease), transform 0.3s var(--aw-ease) !important;
}

.aw-ad-unit:hover {
  border-color: rgba(0, 229, 255, 0.55) !important;
  box-shadow: 
    0 12px 40px 0 rgba(0, 0, 0, 0.6),
    0 0 28px rgba(0, 229, 255, 0.18),
    inset 0 0 20px rgba(0, 229, 255, 0.08) !important;
  transform: translateY(-2px) !important;
}

/* =====================================================================
   UNIFIED CYBERNETIC BUTTON SYSTEM (Premium Upgrades)
   ===================================================================== */

/* 1. Global Interactive Font Reset for all Button Elements */
button, .al-tab, .al-close, .cc-btn, .aw-tab-btn, .aw-save-btn {
  font-family: 'Rajdhani', sans-serif !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  transition: transform 0.15s var(--aw-ease), 
              background 0.15s var(--aw-ease), 
              color 0.15s var(--aw-ease), 
              border-color 0.15s var(--aw-ease), 
              box-shadow 0.15s var(--aw-ease), 
              filter 0.15s var(--aw-ease) !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* 2. Cyber Button Core Properties:
   Apply the HUD semi-transparent dark glass + blur + drop shadow + inset shadow contract */
.aw-save-btn,
#aw-panel-account button:not(.aw-ph-close) {
  position: relative !important;
  box-sizing: border-box !important;
  border-radius: var(--aw-radius-md, 12px) !important;
  background: rgba(0, 12, 20, 0.78) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-shadow: 0 0 4px rgba(0, 229, 255, 0.3) !important;
}

/* 3. Color Theme Subclasses:
   A. Primary Neon Cyan (Save button, Standard Account buttons) */
.aw-save-btn,
#aw-panel-account button:not(.aw-ph-close):not(.ghost):not(.danger) {
  color: var(--aw-cyan, #00e5ff) !important;
  border: 2px solid var(--aw-cyan, #00e5ff) !important;
  box-shadow: inset 0 0 8px rgba(0, 229, 255, 0.1) !important;
  filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.25)) !important;
}

/* B. Secondary/Ghost Cyan (Change name, Log in instead) */
#aw-panel-account button.ghost {
  color: rgba(0, 229, 255, 0.7) !important;
  border: 1.5px solid rgba(0, 229, 255, 0.25) !important;
  box-shadow: inset 0 0 4px rgba(0, 229, 255, 0.05) !important;
  background: rgba(0, 12, 20, 0.45) !important;
}

/* C. Destructive Red/Pink (Log out button) */
#aw-panel-account button.danger {
  color: var(--aw-danger, #ff4060) !important;
  border: 2px solid var(--aw-danger, #ff4060) !important;
  box-shadow: inset 0 0 8px rgba(255, 64, 96, 0.1) !important;
  filter: drop-shadow(0 0 4px rgba(255, 64, 96, 0.2)) !important;
  background: rgba(20, 0, 8, 0.78) !important;
}

/* D. Premium Boost Shop Gold Theme */
#aw-panel-shop .shop-item button {
  position: relative !important;
  box-sizing: border-box !important;
  border-radius: var(--aw-radius-md, 12px) !important;
  background: rgba(18, 12, 0, 0.82) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffaa00 !important;
  border: 2px solid #ffaa00 !important;
  text-shadow: 0 0 4px rgba(255, 170, 0, 0.3) !important;
  box-shadow: inset 0 0 8px rgba(255, 170, 0, 0.1) !important;
  filter: drop-shadow(0 0 4px rgba(255, 170, 0, 0.25)) !important;
}
#aw-panel-shop .shop-item button:disabled {
  opacity: 0.45 !important;
  filter: none !important;
  cursor: not-allowed !important;
}

/* 4. Global Hover & Active Interactive States (Tactile Animations) */
@media (hover: hover) {
  /* Hover effects for primary/save/account buttons */
  .aw-save-btn:hover:not(:disabled),
  #aw-panel-account button:not(.aw-ph-close):not(.ghost):not(.danger):hover {
    transform: translateY(-2px) scale(1.02) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.5) !important;
    box-shadow: 
      0 0 14px rgba(0, 229, 255, 0.45),
      0 0 4px rgba(255, 255, 255, 0.1),
      inset 0 0 12px rgba(0, 229, 255, 0.2) !important;
    filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.6)) !important;
  }
  
  /* Hover for secondary/ghost buttons */
  #aw-panel-account button.ghost:hover {
    transform: translateY(-2px) scale(1.02) !important;
    border-color: rgba(0, 229, 255, 0.75) !important;
    color: #ffffff !important;
    background: rgba(0, 12, 20, 0.78) !important;
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.4) !important;
    box-shadow: 
      0 0 10px rgba(0, 229, 255, 0.25),
      inset 0 0 8px rgba(0, 229, 255, 0.1) !important;
  }

  /* Hover for danger button */
  #aw-panel-account button.danger:hover {
    transform: translateY(-2px) scale(1.02) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.5) !important;
    box-shadow: 
      0 0 14px rgba(255, 64, 96, 0.45),
      0 0 4px rgba(255, 255, 255, 0.1),
      inset 0 0 12px rgba(255, 64, 96, 0.2) !important;
    filter: drop-shadow(0 0 8px rgba(255, 64, 96, 0.6)) !important;
  }

  /* Hover for gold shop buttons */
  #aw-panel-shop .shop-item button:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.02) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.5) !important;
    box-shadow: 
      0 0 14px rgba(255, 170, 0, 0.45),
      0 0 4px rgba(255, 255, 255, 0.1),
      inset 0 0 12px rgba(255, 170, 0, 0.2) !important;
    filter: drop-shadow(0 0 8px rgba(255, 170, 0, 0.6)) !important;
  }
}

/* Tactile Active state (Physical press down) */
.aw-save-btn:active:not(:disabled),
#aw-panel-account button:not(.aw-ph-close):active,
#aw-panel-shop .shop-item button:active:not(:disabled) {
  transform: scale(0.96) !important;
  transition: transform 0.05s var(--aw-ease) !important;
}

/* 5. Legal Overlay Modal Tabs (.al-tab) and Close (.al-close) Upgrades */
.al-tab {
  border: 1.5px solid rgba(0, 229, 255, 0.15) !important;
  background: rgba(0, 12, 20, 0.42) !important;
  color: #9fb6c1 !important;
  padding: 8px 16px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.al-tab:hover {
  border-color: rgba(0, 229, 255, 0.4) !important;
  color: #ffffff !important;
  background: rgba(0, 12, 20, 0.6) !important;
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.15) !important;
}
.al-tab.active {
  background: rgba(0, 229, 255, 0.12) !important;
  color: var(--aw-cyan, #00e5ff) !important;
  border-color: rgba(0, 229, 255, 0.65) !important;
  text-shadow: 0 0 6px rgba(0, 229, 255, 0.45) !important;
  box-shadow: 
    0 0 10px rgba(0, 229, 255, 0.25),
    inset 0 0 8px rgba(0, 229, 255, 0.1) !important;
}
.al-close {
  border: 2px solid rgba(0, 229, 255, 0.45) !important;
  background: rgba(0, 12, 20, 0.78) !important;
  color: var(--aw-cyan, #00e5ff) !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  box-shadow: inset 0 0 6px rgba(0, 229, 255, 0.1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.al-close:hover {
  border-color: #ffffff !important;
  color: #ffffff !important;
  background: var(--aw-cyan-ghost, rgba(0, 229, 255, 0.18)) !important;
  box-shadow: 
    0 0 12px rgba(0, 229, 255, 0.35),
    inset 0 0 8px rgba(0, 229, 255, 0.1) !important;
}
.al-tab:active,
.al-close:active {
  transform: scale(0.95) !important;
}

/* 6. Cookie Consent Button Upgrades (.cc-btn) */
.cc-btn {
  border: 2px solid var(--aw-cyan, #00e5ff) !important;
  background: rgba(0, 12, 20, 0.78) !important;
  color: var(--aw-cyan, #00e5ff) !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  box-shadow: inset 0 0 8px rgba(0, 229, 255, 0.1) !important;
  text-shadow: 0 0 4px rgba(0, 229, 255, 0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.cc-btn:hover {
  border-color: #ffffff !important;
  color: #ffffff !important;
  background: rgba(0, 229, 255, 0.15) !important;
  box-shadow: 
    0 0 12px rgba(0, 229, 255, 0.35),
    inset 0 0 8px rgba(0, 229, 255, 0.1) !important;
}
.cc-btn-primary {
  background: var(--aw-cyan, #00e5ff) !important;
  color: #001018 !important;
  border-color: var(--aw-cyan, #00e5ff) !important;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.4) !important;
  text-shadow: none !important;
}
.cc-btn-primary:hover {
  background: var(--aw-cyan-soft, #66f8ff) !important;
  color: #001018 !important;
  border-color: var(--aw-cyan-soft, #66f8ff) !important;
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.7) !important;
}
.cc-btn-secondary {
  border-color: rgba(159, 182, 193, 0.5) !important;
  color: #cfe7ef !important;
  background: rgba(0, 12, 20, 0.5) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.cc-btn-secondary:hover {
  border-color: #ffffff !important;
  color: #ffffff !important;
  background: rgba(0, 12, 20, 0.78) !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.15) !important;
}
.cc-btn:active {
  transform: scale(0.96) !important;
}

/* 7. Game Info Panel Tabs (.aw-tab-btn) Cyan Vibe */
.aw-tab-btn {
  border-radius: 8px !important;
  border: 1px solid transparent !important;
}
.aw-tab-btn:hover {
  color: #ffffff !important;
  background: rgba(0, 229, 255, 0.05) !important;
  border-color: rgba(0, 229, 255, 0.15) !important;
}
.aw-tab-btn.active {
  color: var(--aw-cyan, #00e5ff) !important;
  background: var(--aw-cyan-tint, rgba(0, 229, 255, 0.12)) !important;
  border-color: rgba(0, 229, 255, 0.35) !important;
  box-shadow: 
    inset 0 -2px 0 0 var(--aw-cyan, #00e5ff), 
    0 0 18px rgba(0, 229, 255, 0.2) !important;
  text-shadow: 0 0 14px rgba(0, 229, 255, 0.55) !important;
}
.aw-tab-btn:active {
  transform: scale(0.97) !important;
}

#arena-legal-footer button:hover {
  color: var(--aw-cyan, #00e5ff) !important;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.6) !important;
  transform: translateY(-1px) !important;
}

/* =====================================================================
   ARENA WARS DEFINITIVE GRID & VIEWPORT LOCK PRESETS
   ===================================================================== */

/* Force clean, zero-bleed viewport boundaries on menu view */
body:not(.session-desktop):not(.session-mobile):not(.session-xr) {
  min-height: 100vh !important;
  overflow-x: hidden !important;
}

/* Fix portal viewport alignment - ensure clean centering rules */
#play-cta-portal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 100002 !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Ground the button container cleanly centered in the viewport, positioned below text */
#play-cta-portal .xr-button-container,
#play-cta-portal #play-cta-dock {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important; /* Vertically and horizontally centered in viewport */
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  pointer-events: auto !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  width: min(92vw, 800px) !important; /* Spans wider horizontally to bridge all content gaps! */
  height: auto !important;
}

/* Ensure the central Play Now SVG uses balanced scaling constraints */
#launch-btn {
  position: relative !important;
  top: unset !important;
  left: unset !important;
  transform: none !important;
  width: 100% !important;
  max-width: 780px !important; /* Premium Giant width! Bridges horizontal content gaps perfectly! */
  height: 120px !important; /* Scales up native SVG proportionally for high-fidelity rendering */
  z-index: 100003 !important;
  transition: transform 0.28s ease !important;
}
#launch-btn:hover {
  transform: scale(1.04) !important;
}
#launch-btn:active {
  transform: scale(0.97) !important;
}

/* Force standard responsive columns when the selector panel expands */
body.device-select-open .xr-button-container > a {
  flex: 1 1 0% !important;
  width: auto !important;
  max-width: 240px !important;
  display: block !important;
}

/* Ensure below-the-fold codex panels align in their layout lane */
.aw-portal-layout {
  position: relative !important;
  z-index: 100003 !important; /* Forces layout above your canvas layers */
  background-color: #07080c !important;
  margin-top: 4vh !important;
}

/* Position title block absolutely in upper portion of screen to prevent HUD overlap and CTA collision */
#splash-title-block {
  position: absolute !important;
  top: clamp(92px, 14vh, 140px) !important; /* Clears top header buttons beautifully with safe margin on all screen sizes */
  bottom: auto !important; /* Clears any inherited layout-stretching bottom properties */
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 90% !important;
  max-width: 800px !important;
  min-height: unset !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: clamp(8px, 1.8vh, 16px) !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important; /* Guarantees glowing letters, animation rise, and sheen effects are never flat-clipped */
  z-index: 2 !important;
}

/* When device selection is closed, hide the actual game buttons completely so they don't take up space in the flex flow */
body:not(.device-select-open) #play-cta-portal .xr-button-container > a {
  display: none !important;
}

/* When device selection is open, hide the launch button completely so it doesn't squeeze the active buttons */
body.device-select-open #launch-btn {
  display: none !important;
}

/* Responsive constraints for tablets and mobile devices */
@media (max-width: 768px) {
  #play-cta-portal .xr-button-container,
  #play-cta-portal #play-cta-dock {
    top: 50% !important; /* Centered play buttons on mobile */
    bottom: auto !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 90% !important;
    max-width: 455px !important; /* Spans beautifully wide on portrait mobiles to eliminate gaps */
    transform: translate(-50%, -50%) !important; /* Re-assert absolute vertical & horizontal center alignment */
  }

  body.device-select-open #play-cta-portal #play-cta-dock {
    max-width: 300px !important; /* Keeps platform choice buttons compact and perfectly centered when open */
  }

  #launch-btn {
    height: 70px !important; /* Taller, prominent CTA target */
    max-width: 455px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #splash-title-block {
    top: calc(max(8px, env(safe-area-inset-top)) + 48px) !important; /* Clears mobile header buttons (height 36px + padding) with comfortable headroom */
    bottom: auto !important;
    gap: 8px !important;
  }

  /* Force clean centering for all title/desc text elements and clear decorative lines that break on wrap */
  #splash-title-block * {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #splash-subtitle::before,
  #splash-subtitle::after {
    content: none !important;
    display: none !important;
  }

  body.device-select-open .xr-button-container > a {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Overrides for mobile landscape or short viewports to keep play buttons in a row rather than stacking */
@media (max-width: 960px) and (orientation: landscape) {
  #play-cta-portal .xr-button-container,
  #play-cta-portal #play-cta-dock {
    flex-direction: row !important;
    width: auto !important;
    max-width: 95% !important;
    gap: 12px !important;
    top: 50% !important; /* Centered in landscape */
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }
  body.device-select-open .xr-button-container > a {
    flex: 0 1 auto !important;
    width: clamp(130px, 20vw, 180px) !important;
    max-width: 180px !important;
  }
  #launch-btn {
    max-width: 520px !important; /* Giant wide play button on mobile landscape to eliminate gaps */
    height: 80px !important; /* Premium proportional height */
  }
}

/* High-Fidelity Loading Spinners for Dynamic Legal Modal content */
.legal-loading-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 250px;
  width: 100%;
}

.legal-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(0, 229, 255, 0.1);
  border-top: 3px solid #00e5ff;
  border-radius: 50%;
  animation: legal-spin 0.8s linear infinite;
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.2);
  margin-bottom: 16px;
}

.legal-loading-text {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #00e5ff;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
  animation: legal-pulse 1.5s ease-in-out infinite;
  margin: 0;
  text-transform: uppercase;
}

@keyframes legal-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes legal-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.legal-error-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 250px;
  text-align: center;
  padding: 20px;
}

.legal-error-text {
  font-family: 'Rajdhani', sans-serif;
  color: #ff0055;
  text-shadow: 0 0 8px rgba(255, 0, 85, 0.4);
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  letter-spacing: 1px;
}

.legal-retry-btn {
  background: transparent;
  border: 1px solid #ff0055;
  color: #ff0055;
  padding: 6px 16px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 10px rgba(255, 0, 85, 0.1);
}

.legal-retry-btn:hover {
  background: #ff0055;
  color: #07080c;
  box-shadow: 0 0 15px rgba(255, 0, 85, 0.4);
}

/* =====================================================================
   ARENA WARS DEFINITIVE HUD OPTIONS DROPDOWN
   ===================================================================== */

.aw-more-dropdown-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  pointer-events: auto;
}

#aw-more-toggle.active {
  background: rgba(0, 229, 255, 0.15) !important;
  border-color: #00e5ff !important;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.4) !important;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.6) !important;
}

.aw-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 170px;
  background: rgba(0, 10, 18, 0.94) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(0, 229, 255, 0.35) !important;
  border-radius: 8px !important;
  padding: 6px 0 !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 100005 !important;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.8),
    0 0 15px rgba(0, 229, 255, 0.15),
    inset 0 0 8px rgba(0, 229, 255, 0.05) !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.96);
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), 
              visibility 0.2s !important;
  pointer-events: none;
}

.aw-dropdown-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto !important;
}

/* Individual Dropdown Item styles */
.aw-dropdown-item {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: #cfe7ef !important;
  padding: 10px 16px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: unset !important;
  max-height: unset !important;
  margin: 0 !important;
}

.aw-dropdown-item:hover {
  background: rgba(0, 229, 255, 0.08) !important;
  color: var(--aw-cyan, #00e5ff) !important;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.5) !important;
  padding-left: 20px !important; /* Elegant slide-right micro-interaction */
}

.aw-dropdown-item .nb-icon,
.aw-dropdown-item lucide-icon {
  width: 14px !important;
  height: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: inherit !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
}

.aw-dropdown-item lucide-icon svg {
  width: 14px !important;
  height: 14px !important;
}

.aw-dropdown-item:hover lucide-icon svg {
  filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.8));
}

/* =====================================================================
   ARENA WARS RESPONSIVE SPLASH OVERRIDES (ZERO OVERLAP & NO HIDDEN CONTENT)
   ===================================================================== */

/* Ensure the subtitle, features, and description are NEVER hidden by media queries */
#splash-subtitle,
#splash-features,
#splash-game-desc {
  display: flex !important; /* flex for features */
  opacity: 1 !important;
  visibility: visible !important;
}

#splash-subtitle {
  display: block !important;
}

#splash-game-desc {
  display: block !important;
}

/* Tighter layout structure on short viewports to prevent any overlap */
@media (max-height: 560px) {
  #splash-title-block {
    top: clamp(68px, 11vh, 80px) !important; /* Clears header on short viewports */
    gap: 4px !important;
  }
  #splash-title {
    font-size: clamp(24px, 6vw, 42px) !important;
    line-height: 1.0 !important;
  }
  #splash-subtitle {
    font-size: clamp(9px, 2.2vw, 11px) !important;
    letter-spacing: 1.5px !important;
    margin: 0 !important;
  }
  #splash-features {
    gap: 4px !important;
    font-size: clamp(9px, 2.2vw, 10px) !important;
    margin: 0 !important;
  }
  #splash-features li {
    padding: 2px 6px !important;
  }
  #splash-game-desc {
    font-size: clamp(9.5px, 2.2vw, 11px) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 10px !important;
    max-width: 520px !important;
  }
  /* On extremely short screens, ensure play buttons remain perfectly centered */
  #play-cta-portal .xr-button-container,
  #play-cta-portal #play-cta-dock {
    top: 50% !important; /* Centered */
    bottom: auto !important;
  }
}

/* Overrides for coarse landscape phones */
@media (max-height: 480px) and (orientation: landscape) and (pointer: coarse) {
  #scroll-hint,
  #page-nav { display: none !important; }
  
  #splash-title-block {
    top: clamp(52px, 12vh, 68px) !important; /* Safe headroom clearing the compact landscape header */
  }
  #play-cta-portal .xr-button-container,
  #play-cta-portal #play-cta-dock {
    top: 50% !important; /* Centered */
    bottom: auto !important;
  }
}

/* ── 6. PWA Install Splash Screen Hero Promo Button ── */

/* Hide redundant top-right header PWA install button when splash screen is active */
body:not(.session-desktop):not(.session-mobile):not(.session-xr) #aw-header #pwa-install-btn {
  display: none !important;
}
#pwa-install-btn-promo {
  position: absolute !important;
  left: 50% !important;
  top: calc(50% + 110px) !important; /* Positioned directly below the play CTA dock on desktop */
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  z-index: 100003 !important;
  pointer-events: auto !important;
}

/* Responsive positions for PWA Promo Button */
@media (max-width: 768px) {
  #pwa-install-btn-promo {
    top: calc(50% + 85px) !important; /* Positioned below centered play button on mobile portrait */
  }
  body.device-select-open #pwa-install-btn-promo {
    top: calc(50% + 190px) !important; /* Positioned below stacked buttons when device selection is open */
  }
}
@media (max-width: 960px) and (orientation: landscape) {
  #pwa-install-btn-promo {
    top: calc(50% + 80px) !important; /* Positioned below row in landscape mobile */
  }
}
@media (max-height: 560px) {
  #pwa-install-btn-promo {
    top: calc(50% + 80px) !important; /* Positioned below play buttons on short viewports */
  }
}

.aw-pwa-promo-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 18px !important;
  padding: 8px 18px !important;
  background: rgba(0, 229, 255, 0.05) !important;
  border: 1.5px solid rgba(0, 229, 255, 0.35) !important;
  border-radius: 20px !important;
  color: #00e5ff !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.1), inset 0 0 8px rgba(0, 229, 255, 0.05) !important;
  transition: all 0.25s var(--aw-ease) !important;
  pointer-events: auto !important; /* Force interactive through splash click-through wrapper */
  animation: pwa-pulse 2.5s infinite alternate ease-in-out !important;
}
.aw-pwa-promo-btn:hover {
  background: rgba(0, 229, 255, 0.15) !important;
  border-color: #00e5ff !important;
  box-shadow: 0 0 18px rgba(0, 229, 255, 0.45), inset 0 0 10px rgba(0, 229, 255, 0.1) !important;
  transform: translateY(-1px) scale(1.03) !important;
}
.aw-pwa-promo-btn:active {
  transform: translateY(0) scale(0.98) !important;
}

@keyframes pwa-pulse {
  0% {
    border-color: rgba(0, 229, 255, 0.3) !important;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.08) !important;
  }
  100% {
    border-color: rgba(0, 229, 255, 0.7) !important;
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.25) !important;
  }
}

/* Responsive Scaling for Short/Mobile Screens */
@media (max-width: 800px), (max-height: 520px) {
  .aw-pwa-promo-btn {
    margin-top: 10px !important;
    padding: 5px 12px !important;
    font-size: 9.5px !important;
    border-radius: 12px !important;
  }
}

/* =====================================================================
   FINAL POLISH PASS — ARENA WARS
   ===================================================================== */

/* ── 1. Header glassmorphic backing strip
        Gives the HUD dock a subtle dark band so buttons always read
        against light/bright video frames without a heavy overlay.      */
#aw-header::after {
  content: '';
  position: absolute;
  inset: 0;
  bottom: -6px;
  background: linear-gradient(
    to bottom,
    rgba(0, 5, 12, 0.55) 0%,
    rgba(0, 5, 12, 0.0)  100%
  );
  pointer-events: none;
  z-index: -1;
}

/* ── 2. Feature badges — dark pill backing for legibility over video  */
#splash-features li {
  background: rgba(0, 8, 18, 0.62) !important;
  border: 1px solid rgba(0, 229, 255, 0.22) !important;
  border-radius: 999px !important;
  padding: 3px 10px 3px 8px !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  white-space: nowrap !important;
}

/* ── 3. Play button — richer layered glow + pulse aura               */
@keyframes launch-aura {
  0%   { box-shadow: 0 0 22px rgba(0, 229, 255, 0.35), 0 4px 28px rgba(0, 0, 0, 0.65), inset 0 0 18px rgba(0, 229, 255, 0.12); }
  50%  { box-shadow: 0 0 40px rgba(0, 229, 255, 0.55), 0 6px 36px rgba(0, 0, 0, 0.7),  inset 0 0 24px rgba(0, 229, 255, 0.2);  }
  100% { box-shadow: 0 0 22px rgba(0, 229, 255, 0.35), 0 4px 28px rgba(0, 0, 0, 0.65), inset 0 0 18px rgba(0, 229, 255, 0.12); }
}
#launch-btn {
  animation: launch-aura 2.4s ease-in-out infinite !important;
  border-width: 2px !important;
}
#launch-btn:hover {
  animation: none !important;
  box-shadow:
    0 0 52px rgba(0, 229, 255, 0.75),
    0 6px 40px rgba(0, 0, 0, 0.75),
    inset 0 0 28px rgba(0, 229, 255, 0.28) !important;
}

/* ── 4. Dropdown menu — stronger glass + left accent bar on items     */
.aw-dropdown-menu {
  background: linear-gradient(
    160deg,
    rgba(0, 8, 18, 0.97) 0%,
    rgba(0, 14, 26, 0.97) 100%
  ) !important;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(0, 229, 255, 0.18),
    0 0 20px rgba(0, 229, 255, 0.12),
    inset 0 0 12px rgba(0, 229, 255, 0.04) !important;
  min-width: 180px !important;
}

.aw-dropdown-item {
  position: relative !important;
  border-left: 2px solid transparent !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, padding-left 0.12s ease !important;
}

.aw-dropdown-item:hover {
  background: rgba(0, 229, 255, 0.07) !important;
  border-left-color: #00e5ff !important;
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.6) !important;
  padding-left: 18px !important;
}

/* ── 5. Dropdown opens left-anchored on narrow screens (≤480px)
        Prevents the right-aligned menu from clipping the viewport edge */
@media (max-width: 480px) {
  .aw-dropdown-menu {
    right: auto !important;
    left: 0 !important;
    min-width: 160px !important;
  }
}

/* ── 6. Header button glow enhancement — stronger base glow on mobile */
@media (max-width: 800px) {
  #aw-header .aw-nav-btn,
  #aw-header .corner-btn {
    box-shadow:
      inset 0 0 8px rgba(0, 229, 255, 0.18),
      0 0 6px rgba(0, 229, 255, 0.12) !important;
  }
}

/* ── 7. PWA promo button — slightly more prominent on mobile          */
@media (max-width: 768px) {
  .aw-pwa-promo-btn {
    font-size: 10px !important;
    padding: 7px 16px !important;
    letter-spacing: 1.8px !important;
    border-width: 1.5px !important;
  }
}

/* ── 8. Mobile title-block top fine-tune for 390px iPhone viewport   */
@media (max-width: 430px) and (orientation: portrait) {
  #splash-title-block {
    top: calc(max(8px, env(safe-area-inset-top)) + 52px) !important;
    gap: 6px !important;
    width: 94% !important;
  }
  #splash-features {
    gap: 6px !important;
  }
  #splash-features li {
    font-size: 10px !important;
    padding: 2px 8px 2px 7px !important;
  }
}

/* ── 9. Splash subtitle — sharper text contrast                       */
#splash-subtitle {
  text-shadow:
    0 0 18px rgba(0, 229, 255, 0.5),
    0 1px 6px rgba(0, 0, 0, 0.9) !important;
  letter-spacing: 3.5px !important;
}

/* ── 10. Splash title letters — deeper drop-shadow for video contrast  */
#splash-title .t-letter {
  text-shadow:
    0 0 24px rgba(0, 229, 255, 0.7),
    0 2px 12px rgba(0, 0, 0, 0.95),
    0 0 4px rgba(0, 0, 0, 1) !important;
}

/* ── 11. Active nav/corner buttons — clear pressed-in glow state      */
#aw-header .aw-nav-btn[aria-pressed="true"],
#aw-header .corner-btn[aria-expanded="true"] {
  background: rgba(0, 229, 255, 0.14) !important;
  border-color: rgba(0, 229, 255, 0.7) !important;
  box-shadow:
    0 0 12px rgba(0, 229, 255, 0.4),
    inset 0 0 10px rgba(0, 229, 255, 0.18) !important;
  color: #ffffff !important;
}

/* ── 12. Active session gameplay background blackouts (Zero-leak) ── */
body.session-desktop,
body.session-mobile,
body.session-xr {
  background: #000000 !important;
  background-image: none !important;
}
body.session-desktop #game-container,
body.session-mobile #game-container,
body.session-xr #game-container {
  background: #000000 !important;
}
body.session-desktop .main-bg,
body.session-mobile .main-bg,
body.session-xr .main-bg {
  display: none !important;
}