/* Layer stack inside #game-container: bg → canvas → splash → HUD/CTAs */
#game-container {
  position: relative;
  isolation: isolate;
}
.main-bg {
  position: absolute !important;
  inset: 0;
  z-index: 0 !important;
  pointer-events: none;
  background: #030407 url('background.webp') center/cover no-repeat, linear-gradient(black, #2b2b2b);
}
#canvas {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
}
#splash {
  position: absolute !important;
  inset: 0;
  z-index: 2 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column;
}
#splash-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
#splash > .splash-scanlines,
#splash::before,
#splash::after,
#splash-title-block,
#splash-content {
  position: relative;
  z-index: 1;
}
/* =====================================================================
   Arena Wars -- index.html primary stylesheet
   Extracted from inline blocks for production:
     - Cacheable separately from the HTML shell
     - Original cascade preserved by concatenating blocks IN ORDER
   ===================================================================== */

/* ── Game font: Rajdhani Bold (self-hosted) ── */
@font-face {
  font-family: 'Rajdhani';
  src: url('/RajdhaniBold-3xdp.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---- block 1 (main styles) (was lines 90-3237) ---- */
    html {
        min-height: 100vh;
        overflow-y: auto;
        scroll-behavior: smooth;
        /* No CSS scroll-snap: native wheel/trackpad scrolling stays fully
           fluent and uninterrupted. The right-side dot-nav still jumps
           to any section via JS scrollTo({behavior:'smooth'}), which now
           also honors this CSS-level smooth setting for anchor links. */
    }
    @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
    }
    body {
        min-height: 100vh;
        margin: 0px;
        background: #030407 url('background.webp') center/cover no-repeat, linear-gradient(black, #2b2b2b);
        font-family: 'Rajdhani', sans-serif;
        overflow-x: hidden; /* Prevent horizontal scroll from fixed-positioned buttons */
    }
    .xr-button-container {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: calc(var(--landing-bottom-stack, 180px) + var(--landing-cta-gap, 24px));
      margin: 0;
      top: auto;
      width: min(96vw, 880px) !important;
      padding: clamp(28px, 4.5vh, 44px) clamp(22px, 3vw, 40px) clamp(20px, 3vh, 30px) !important;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: stretch;
      justify-content: center;
      gap: clamp(8px, 2vw, 16px);
      overflow-x: auto;
      scrollbar-width: none;
        pointer-events: none;
        z-index: 99999;
        width: min(96vw, 880px);
        padding: clamp(20px, 3vh, 28px) clamp(10px, 2vw, 20px) clamp(12px, 2vh, 18px);
        animation: play-row-rise 0.7s cubic-bezier(.2,.7,.3,1) 0.15s both;
      }
      .xr-button-container::-webkit-scrollbar {
        display: none;
    }
    @keyframes play-row-rise {
      from { opacity: 0; transform: translate(-50%, 24px); }
      to   { opacity: 1; transform: translate(-50%, 0);    }
    }

    /* === HARD ALIGNMENT: all play CTAs are identical-sized flex items. === */
    .xr-button-container > a {
      flex: 0 0 clamp(180px, 22vw, 230px) !important;
      width:    clamp(180px, 22vw, 230px) !important;
      height:   auto !important;
      margin: 0 !important;
      padding: 0 !important;
      box-sizing: border-box;
      display: block;
      pointer-events: all;
      cursor: pointer;
      opacity: 1;
      align-self: center;
    }
    .xr-button-container > a > svg {
      display: block;
      width: 100%;
      height: auto;
    }

    .button {
      width: 0px; /* Hidden until we know supported state */
      padding: 0;
      display: block;
      pointer-events: all;
      cursor: pointer;
      opacity: 0.25;
      transition: transform 0.15s ease;
      will-change: transform;
      -webkit-tap-highlight-color: transparent;
    }
    .button[data-supported] {
      /* Equal-width play-mode CTAs (matches Desktop/Mobile). */
      width: clamp(180px, 22vw, 230px) !important;
      transition: 0.5s;
    }
    .button[data-supported='true'] {
      opacity: 1.0;
    }

    #canvas {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      touch-action: none;
    }

    .xr-button-label {
      fill: #ffffff;
      font-family: 'Rajdhani', sans-serif;
      font-size: 22px;
      font-weight: 900;
      letter-spacing: 3px;
      text-transform: uppercase;
      filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.85));
    }

    .xr-button-frame {
      stroke: #00e5ff;
      stroke-width: 3.5px;
    }

    @keyframes vr-pulse {
      0%, 100% { filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.75)); }
      50%      { filter: drop-shadow(0 0 26px rgba(0, 229, 255, 1.0));  }
    }

    /* "RECOMMENDED" tag floats above the VR CTA. */
    #vr-button {
      position: relative;
    }
    #vr-button::before {
      content: 'RECOMMENDED';
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      font-family: 'Rajdhani', sans-serif;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 3px;
      color: #001018;
      background: linear-gradient(135deg, #00e5ff 0%, #66f8ff 100%);
      padding: 3px 10px 3px 11px;
      border-radius: 999px;
      box-shadow: 0 0 14px rgba(0, 229, 255, 0.9);
      white-space: nowrap;
      pointer-events: none;
      z-index: 2;
      animation: tag-pulse 2.2s ease-in-out infinite;
    }
    @keyframes tag-pulse {
      0%, 100% { box-shadow: 0 0 10px rgba(0, 229, 255, 0.7); }
      50%      { box-shadow: 0 0 22px rgba(0, 229, 255, 1.0); }
    }

    .button:hover {
      transform: scale(1.06);
      filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.35));
    }
    .button:hover .xr-button-frame {
      filter: drop-shadow(0 0 14px rgba(0, 229, 255, 0.9));
    }
    .button:hover .xr-button-label {
      fill: #ffffff;
      filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.9));
    }
    .xr-button-icon {
      fill: #00e5ff;
      transition: fill 0.15s ease;
    }
    .button:hover .xr-button-icon {
      fill: #ffffff;
    }
    .button:hover .xr-button-icon ellipse[fill="#00e5ff"] {
      fill: #ffffff;
    }

    .desktop-button-label {
      fill: #ffffff;
      font-family: 'Rajdhani', sans-serif;
      font-size: 22px;
      font-weight: 900;
      letter-spacing: 3px;
      text-transform: uppercase;
      filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.85));
    }

    .desktop-button-frame {
      stroke: #00e5ff;
      filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.5));
    }

    #desktop-button {
      /* In-flow flex child of .xr-button-container — centered row at the
         bottom alongside Start VR and Play Mobile. */
      width: clamp(180px, 22vw, 240px);
      padding: 0;
      pointer-events: all;
      cursor: pointer;
      opacity: 1.0;
      display: block;
      transition: transform 0.15s ease, filter 0.15s ease;
      will-change: transform;
      -webkit-tap-highlight-color: transparent;
    }
    #desktop-button svg,
    #mobile-button  svg,
    .button         svg { width: 100%; height: auto; display: block; }

    #desktop-button:hover {
      transform: scale(1.06);
    }
    #desktop-button:hover .desktop-button-label {
      fill: #ffffff;
      filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.9));
    }
    #desktop-button:hover .desktop-button-frame {
      filter: drop-shadow(0 0 14px rgba(0, 229, 255, 0.9));
    }
    .desktop-button-icon {
      transition: fill 0.15s ease;
    }
    #desktop-button:hover .desktop-button-icon {
      fill: #ffffff;
    }
    #desktop-button:hover .desktop-button-icon rect,
    #desktop-button:hover .desktop-button-icon line {
      stroke: #ffffff;
    }

    /* Mobile mode button — same size as Desktop, stacked below it. Only
       displayed on touch-capable devices (set via JS). */
    #mobile-button {
      width: clamp(180px, 22vw, 240px);
      padding: 0;
      pointer-events: all;
      cursor: pointer;
      opacity: 1.0;
      display: block;
      transition: transform 0.15s ease, filter 0.15s ease;
      will-change: transform;
      -webkit-tap-highlight-color: transparent;
    }
    #mobile-button:hover { transform: scale(1.06); }
    #mobile-button:hover .desktop-button-label {
      fill: #ffffff;
      filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.9));
    }
    #mobile-button:hover .desktop-button-frame {
      filter: drop-shadow(0 0 14px rgba(0, 229, 255, 0.9));
    }
    #mobile-button:hover .desktop-button-icon { fill: #ffffff; }
    #mobile-button:hover .desktop-button-icon rect,
    #mobile-button:hover .desktop-button-icon line { stroke: #ffffff; }

    /* In-session "Back to Menu" — appears top-left when desktop/mobile mode
       is active, replaces the Desktop/Mobile launchers visually. */
    #back-to-menu {
      display: none;
      position: fixed;
      top: 20px;
      left: 20px;
      z-index: 100004; /* Above panels (100003), backdrop (100002), canvas (100000) */
      padding: 10px 22px;
      font-family: 'Rajdhani', sans-serif;
      font-size: 16px;
      font-weight: 900;
      letter-spacing: 2px;
      color: #00e5ff;
      background: rgba(0, 12, 20, 0.7);
      border: 2px solid #00e5ff;
      border-radius: 12px;
      cursor: pointer;
      pointer-events: all;
      text-transform: uppercase;
      filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.5));
      transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
    }
    #back-to-menu:hover {
      transform: scale(1.08);
      background: rgba(0, 229, 255, 0.15);
      color: #ffffff;
      border-color: #ffffff;
      filter: drop-shadow(0 0 14px rgba(0, 229, 255, 0.9));
    }

    /* ─────────────────────────────────────────────────────────────────
       Unified session-mode chrome state machine
       body.session-menu     → splash, all play buttons, mic & corner btns
       body.session-desktop  → only #back-to-menu + crosshair (canvas FPS)
       body.session-mobile   → only #back-to-menu + #mobile-hud
       body.session-xr       → no 2D DOM chrome (headset takes over)
       Single source of truth — JS only flips the body class.
       ───────────────────────────────────────────────────────────────── */
    /* Always-hidden top-right "ESC" duplicate; #back-to-menu replaces it. */
    #desktop-exit-button { display: none !important; }

    /* In-session: show the universal back button (desktop only — mobile uses
       the in-HUD EXIT button to keep the top corners clear for the look-zone). */
    body.session-desktop #back-to-menu { display: block; }

    body.session-desktop .xr-button-container,
    body.session-mobile  .xr-button-container,
    body.session-xr      .xr-button-container { display: none !important; }

    body.session-desktop #account-toggle,
    body.session-mobile  #account-toggle,
    body.session-xr      #account-toggle,
    body.session-desktop #shop-toggle,
    body.session-mobile  #shop-toggle,
    body.session-xr      #shop-toggle { display: none !important; }

    body.session-desktop #account-panel,
    body.session-mobile  #account-panel,
    body.session-xr      #account-panel,
    body.session-desktop #shop-panel,
    body.session-mobile  #shop-panel,
    body.session-xr      #shop-panel { display: none !important; }

    /* Mobile-mode safety: belt-and-braces guarantee the back button is gone
       so it never blocks #mobile-look-zone touches. */
    body.session-mobile  #back-to-menu { display: none !important; }

    /* VR session: hide every 2D DOM widget (the headset stereo view is the UI). */
    body.session-xr #back-to-menu,
    body.session-xr #prox-chat-info,
    body.session-xr #version,
    body.session-xr #mobile-hud { display: none !important; }

    /* Legal footer is hidden in any active session. */
    body.session-desktop #arena-legal-footer,
    body.session-mobile  #arena-legal-footer,
    body.session-xr      #arena-legal-footer { display: none !important; }

    /* Main background is hidden in any active session to prevent leaking into transparent gameplay canvas. */
    body.session-desktop .main-bg,
    body.session-mobile  .main-bg,
    body.session-xr      .main-bg { display: none !important; }

    #version {
      text-align: right;
      position: absolute;
      right: 10px;
      bottom: 10px;
      color: white;
      font-size: 18pt;
      font-family: monospace;
      /*display: none; */
      z-index: 99999;
    }

    #version a {
      transition: opacity 0.5s;
      opacity: 0;
    }

    #version:hover a{
      opacity: 1;
    }

    /* Desktop crosshair - visible only when pointer is locked */
    #desktop-crosshair {
      --crosshair-color: rgba(255, 255, 255, 0.85);
      --dot-color: rgba(0, 255, 255, 0.9);
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 99998;
    }
    #desktop-crosshair::before,
    #desktop-crosshair::after {
      content: '';
      position: absolute;
      background: var(--crosshair-color);
      transition: transform 0.12s ease-out;
    }
    /* Horizontal line */
    #desktop-crosshair::before {
      width: 16px;
      height: 2px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    /* Vertical line */
    #desktop-crosshair::after {
      width: 2px;
      height: 16px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    /* ADS tightened crosshair — GPU-accelerated scale instead of width/height */
    #desktop-crosshair.ads::before {
      transform: translate(-50%, -50%) scaleX(0.625);
    }
    #desktop-crosshair.ads::after {
      transform: translate(-50%, -50%) scaleY(0.625);
    }
    /* Sniper ADS: dot only — scale to 0 instead of setting width/height */
    #desktop-crosshair.ads-sniper::before,
    #desktop-crosshair.ads-sniper::after {
      transform: translate(-50%, -50%) scale(0);
    }
    /* Center dot */
    #desktop-crosshair-dot {
      position: absolute;
      width: 3px;
      height: 3px;
      background: var(--dot-color);
      border-radius: 50%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: transform 0.12s ease-out;
    }
    #desktop-crosshair.ads #desktop-crosshair-dot {
      transform: translate(-50%, -50%) scale(1.333);
    }

    #desktop-exit-button {
      display: none;
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 100004; /* Above panels (100003) */
      padding: 10px 28px;
      font-family: 'Rajdhani', sans-serif;
      font-size: 18px;
      font-weight: 900;
      letter-spacing: 2px;
      color: #00e5ff;
      background: rgba(0, 12, 20, 0.7);
      border: 2px solid #00e5ff;
      border-radius: 12px;
      cursor: pointer;
      pointer-events: all;
      text-transform: uppercase;
      filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.5));
      transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
    }
    #desktop-exit-button:hover {
      transform: scale(1.08);
      background: rgba(0, 229, 255, 0.15);
      color: #ffffff;
      border-color: #ffffff;
      filter: drop-shadow(0 0 14px rgba(0, 229, 255, 0.9));
    }

    /* ── Proximity Chat Info Panel ── */
    #prox-chat-info {
      position: fixed;
      top: 70px;
      left: 20px;
      z-index: 99998;
      width: 260px;
      padding: 14px 18px;
      font-family: 'Rajdhani', sans-serif;
      font-size: 13px;
      color: #b0e0ff;
      background: rgba(0, 12, 20, 0.85);
      border: 1px solid rgba(0, 229, 255, 0.3);
      border-radius: 12px;
      pointer-events: all;
      display: none;
      filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.2));
    }
    #prox-chat-info.visible { display: block; }
    #prox-chat-info h4 {
      margin: 0 0 8px 0;
      font-size: 14px;
      font-weight: 900;
      letter-spacing: 1.5px;
      color: #00e5ff;
      text-transform: uppercase;
    }
    #prox-chat-info p {
      margin: 0 0 8px 0;
      line-height: 1.5;
    }
    #prox-chat-info .info-status {
      display: inline-block;
      margin-top: 8px;
      font-size: 12px;
      font-weight: 700;
      color: #00e5ff;
    }

    /* ── Account & Shop launchers (top-right) ── */
    .corner-btn {
      position: fixed;
      top: 20px;
      z-index: 100002; /* Above canvas (100000), header (100001) and backdrop (100002) */
      height: 40px;
      padding: 0 18px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: 'Rajdhani', sans-serif;
      font-size: 14px;
      font-weight: 900;
      letter-spacing: 2px;
      color: #00e5ff;
      background: rgba(0, 12, 20, 0.78);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      border: 2px solid #00e5ff;
      border-radius: 12px;
      cursor: pointer;
      pointer-events: all;
      text-transform: uppercase;
      filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.5));
      transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
    }
    .corner-btn:hover {
      transform: scale(1.08);
      background: rgba(0, 229, 255, 0.15);
      color: #ffffff;
      border-color: #ffffff;
      filter: drop-shadow(0 0 14px rgba(0, 229, 255, 0.9));
    }
    #account-toggle  { right: 20px; }
    #shop-toggle     { right: 180px; }
    #mute-toggle     { right: 350px; }
    #pwa-install-btn { right: 510px; }

    .corner-panel {
      position: fixed;
      top: 70px;
      right: 20px;
      width: 320px;
      z-index: 100008;
      padding: 18px 20px;
      font-family: 'Rajdhani', sans-serif;
      font-size: 13px;
      color: #b0e0ff;
      background: rgba(0, 12, 20, 0.92);
      border: 1px solid rgba(0, 229, 255, 0.4);
      border-radius: 12px;
      pointer-events: all;
      display: none;
      filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.3));
      max-height: calc(100vh - 100px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .corner-panel.visible { display: block; z-index: 100020; }
    .corner-panel h4 {
      margin: 0 0 10px 0;
      font-size: 14px;
      font-weight: 900;
      letter-spacing: 1.5px;
      color: #00e5ff;
      text-transform: uppercase;
    }
    .corner-panel p { margin: 0 0 10px 0; line-height: 1.5; }
    .corner-panel .name-row {
      font-size: 16px;
      font-weight: 700;
      color: #ffffff;
      margin: 0 0 4px 0;
      word-break: break-all;
    }
    .corner-panel .status-row {
      font-size: 11px;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: #00e5ff;
      margin: 0 0 12px 0;
    }
    .corner-panel input {
      width: 100%;
      box-sizing: border-box;
      padding: 8px 10px;
      margin: 4px 0;
      font-family: inherit;
      font-size: 13px;
      color: #ffffff;
      background: rgba(0, 0, 0, 0.5);
      border: 1px solid rgba(0, 229, 255, 0.4);
      border-radius: 6px;
      outline: none;
    }
    .corner-panel input:focus { border-color: #00e5ff; }
    .corner-panel button {
      width: 100%;
      padding: 9px;
      margin-top: 6px;
      font-family: inherit;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: #00e5ff;
      background: rgba(0, 229, 255, 0.08);
      border: 1.5px solid #00e5ff;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.12s ease, color 0.12s ease;
    }
    .corner-panel button:hover {
      background: rgba(0, 229, 255, 0.25);
      color: #ffffff;
    }
    .corner-panel button.ghost {
      color: #b0e0ff;
      border-color: rgba(176, 224, 255, 0.4);
      background: transparent;
    }
    .corner-panel button.ghost:hover {
      color: #ffffff;
      border-color: #ffffff;
    }
    .corner-panel button.danger {
      color: #ff8090;
      border-color: rgba(255, 64, 96, 0.5);
    }
    .corner-panel button.danger:hover {
      color: #ffffff;
      background: rgba(255, 64, 96, 0.2);
      border-color: #ff4060;
    }
    .corner-panel .divider {
      border: none;
      border-top: 1px solid rgba(0, 229, 255, 0.2);
      margin: 14px 0 10px 0;
    }
    .corner-panel .msg {
      min-height: 16px;
      font-size: 12px;
      margin: 8px 0 2px 0;
      color: #b0e0ff;
    }
    .corner-panel .msg.ok    { color: #50ffaa; }
    .corner-panel .msg.err   { color: #ff8090; }

    /* Shop item card */
    .shop-item {
      padding: 12px;
      margin-bottom: 10px;
      background: rgba(0, 229, 255, 0.05);
      border: 1px solid rgba(0, 229, 255, 0.2);
      border-radius: 8px;
    }
    .shop-item h5 {
      margin: 0 0 4px 0;
      font-size: 13px;
      color: #ffffff;
      letter-spacing: 1px;
      text-transform: uppercase;
    }
    .shop-item .desc {
      font-size: 11px;
      color: #88b8d0;
      margin: 0 0 8px 0;
      line-height: 1.4;
    }
    .shop-item .owned {
      display: inline-block;
      padding: 2px 8px;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 1px;
      color: #50ffaa;
      background: rgba(80, 255, 170, 0.1);
      border: 1px solid rgba(80, 255, 170, 0.4);
      border-radius: 4px;
      text-transform: uppercase;
    }

    /* ───────────────────────── SPLASH OVERLAY ─────────────────────────
       Foreground landing screen — sits between the canvas and the play
       buttons. Dismissed (fade-out) the first time any play mode
       (VR / Desktop / Mobile) is engaged. */
    #splash {
      pointer-events: none;
      background: transparent;
      opacity: 1;
      transition: opacity 0.6s ease, transform 0.6s ease;
      /* Pre-promote to GPU compositing layer — ensures the fade-out is
         handled purely by the compositor and does not repaint the canvas
         beneath during intermediate frames, preventing flicker. */
      will-change: opacity, transform;
    }
    /* Looping background video — sits below the gradient/ember layers but
       above the solid #0b0102 fallback that shows while it's still buffering. */
    #splash-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -1;             /* keep ::before/::after ember layers on top */
      pointer-events: none;
      background: #0b0102;
    }
    #splash.hide {
      opacity: 0;
      transform: scale(1.04);
      pointer-events: none;
      /* Snap will-change off after transition so we don't keep memory allocated */
    }

    /* Subtle animated red ember flicker behind the title — purely CSS,
       no image asset, GPU-cheap (two radial layers + slow filter). */
    #splash::before {
      content: '';
      position: absolute;
      inset: -10%;
      background:
        radial-gradient(circle at 18% 78%, rgba(0,229,255,0.10) 0%, transparent 35%),
        radial-gradient(circle at 82% 75%, rgba(0,229,255,0.10) 0%, transparent 35%),
        radial-gradient(circle at 50% 50%, rgba(255,40,30,0.18) 0%, transparent 60%);
      filter: blur(4px);
      animation: splash-flicker 6s ease-in-out infinite alternate;
      pointer-events: none;
    }
    @keyframes splash-flicker {
      0%   { opacity: 0.85; transform: translate3d(0, 0, 0); }
      50%  { opacity: 1.0;  transform: translate3d(0, -6px, 0); }
      100% { opacity: 0.75; transform: translate3d(0, 4px, 0); }
    }

    #splash-content {
      position: static;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      padding-bottom: clamp(190px, 24vh, 260px);
      padding-bottom: max(clamp(190px, 24vh, 260px), env(safe-area-inset-bottom, 0px));
      text-align: center;
      pointer-events: none;
    }

    /* Bottom-edge vignette removed per user request — video plays at full brightness */
    #splash::after {
      content: '';
      position: absolute;
      inset: 0;
      background: none;
      pointer-events: none;
    }

    /* ── Title block — upper-center of the splash ── */
    #splash-title-block {
      position: static;
      width: 100%;
      min-height: clamp(34vh, 42vh, 48vh);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      gap: clamp(6px, 1.5vh, 18px);
      padding-bottom: clamp(72px, 14vh, 112px);
      pointer-events: none;
      user-select: none;
      z-index: 2;
    }

    /* Horizontal neon rule above & below the title block */
    #splash-title-block::before,
    #splash-title-block::after {
      content: '';
      position: absolute;
      left: 5%; right: 5%;
      height: 1.5px;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(0,229,255,0.6) 20%,
        rgba(0,229,255,0.9) 50%,
        rgba(0,229,255,0.6) 80%,
        transparent 100%);
      box-shadow: 0 0 10px rgba(0,229,255,0.7);
    }
    #splash-title-block::before { top: 0; }
    #splash-title-block::after  { bottom: 0; }

    /* Title — outline-only glyphs with multi-layer cyan glow over red.
       Uses CSS text-stroke (Safari/Chromium) with a text-shadow fallback. */
    #splash-title {
      font-family: 'Rajdhani', sans-serif;
      font-size: clamp(40px, 8.5vw, 136px);
      font-weight: 900;
      letter-spacing: clamp(2px, 0.4vw, 8px);
      line-height: 1;
      color: transparent;
      -webkit-text-stroke: clamp(1.5px, 0.22vw, 3.5px) #66f8ff;
      text-shadow:
        0 0 4px  rgba(0, 229, 255, 1.0),
        0 0 12px rgba(0, 229, 255, 0.90),
        0 0 30px rgba(0, 229, 255, 0.70),
        0 0 60px rgba(0, 200, 255, 0.50),
        0 0 110px rgba(0, 180, 255, 0.30);
      margin: 0;
      pointer-events: none;
      user-select: none;
      animation: title-pulse 3.2s ease-in-out infinite;
      text-transform: uppercase;
    }
    @keyframes title-pulse {
      0%, 100% {
        filter: drop-shadow(0 0 12px rgba(0,229,255,0.50));
        -webkit-text-stroke-color: #66f8ff;
      }
      50% {
        filter: drop-shadow(0 0 32px rgba(0,229,255,1.0));
        -webkit-text-stroke-color: #a8feff;
      }
    }

    #splash-subtitle {
      margin: 0;
      font-family: 'Rajdhani', sans-serif;
      font-size: clamp(13px, 3vw, 28px);
      font-weight: 700;
      letter-spacing: clamp(2px, 1vw, 14px);
      font-style: normal;
      color: #f0faff;
      text-shadow:
        0 0 8px  rgba(0, 229, 255, 1.0),
        0 0 24px rgba(0, 229, 255, 0.75),
        0 0 50px rgba(0, 229, 255, 0.45);
      text-transform: uppercase;
      pointer-events: none;
      user-select: none;
      animation: subtitle-pulse 3.2s ease-in-out infinite;
    }
    @keyframes subtitle-pulse {
      0%, 100% { opacity: 0.92; }
      50%      { opacity: 1.0; }
    }

    #splash-hint {
      display: inline-block;
      margin: 0 0 clamp(10px, 1.5vh, 18px) 0;
      padding: 9px 20px;
      background: rgba(0, 12, 20, 0.78);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      border: 1.5px solid rgba(0, 229, 255, 0.6);
      border-radius: 999px;
      font-family: 'Rajdhani', sans-serif;
      font-size: clamp(12px, 1.3vw, 15px);
      font-weight: 700;
      letter-spacing: 3px;
      color: #e8faff;
      text-transform: uppercase;
      text-shadow: 0 0 8px rgba(0, 229, 255, 0.9);
      box-shadow: 0 0 18px rgba(0, 229, 255, 0.35);
      pointer-events: none;
      user-select: none;
      animation: hint-blink 1.8s ease-in-out infinite;
    }
    @keyframes hint-blink {
      0%, 100% { opacity: 0.75; }
      50%      { opacity: 1.0; }
    }

    /* HUD decorations top-left / top-right — match the screenshot's
       tactical-overlay vibe without needing image assets. */
    .splash-hud {
      position: absolute;
      width: clamp(120px, 14vw, 230px);
      height: clamp(70px, 9vw, 140px);
      border: 1.5px solid rgba(0, 229, 255, 0.55);
      border-radius: 8px;
      background: linear-gradient(135deg, rgba(0,229,255,0.06) 0%, rgba(0,229,255,0.01) 100%);
      box-shadow: 0 0 18px rgba(0, 229, 255, 0.25) inset, 0 0 12px rgba(0,229,255,0.15);
      pointer-events: none;
    }
    .splash-hud::after {
      content: '';
      position: absolute;
      inset: 6px;
      border: 1px dashed rgba(0, 229, 255, 0.3);
      border-radius: 5px;
    }
    .splash-hud.tl { top: 16px; left: 16px; }
    .splash-hud.tr { top: 16px; right: 16px; }
    .splash-hud.bl { bottom: 20px; left: 16px;  width: clamp(160px, 18vw, 280px); }
    .splash-hud.br { bottom: 20px; right: 16px; width: clamp(160px, 18vw, 280px); }

    /* While the splash is visible, keep all three play CTAs perfectly
       co-planar — the "RECOMMENDED" tag alone differentiates VR. */
    body:not(.splash-dismissed) #desktop-button,
    body:not(.splash-dismissed) #mobile-button { z-index: 99500; }

    /* ─────────────────── TOUCH FEEDBACK ───────────────────
       Instant scale-down on tap — removes the grey flash and
       provides tactile confirmation on all interactive elements. */
    .button:active,
    #desktop-button:active,
    #mobile-button:active {
      transform: scale(0.95) !important;
      transition: transform 0.08s ease !important;
    }
    .corner-btn:active,
    #back-to-menu:active {
      transform: scale(0.93) !important;
      transition: transform 0.08s ease !important;
    }
    /* Keep corner buttons tap-highlight free */
    .corner-btn,
    #back-to-menu,
    #desktop-exit-button,
    #account-toggle,
    #shop-toggle,
    #mute-toggle,
    #pwa-install-btn {
      -webkit-tap-highlight-color: transparent;
    }

    /* ────────────────────────── RESPONSIVE ──────────────────────────
       Layered breakpoints:
         720px  Tablet / large phone
         560px  Play-button reflow  (VR full-width, Desktop + Mobile 50/50)
         480px  Small phone         (bottom-sheet panels, smaller HUD)
         400px  Very small
       Landscape short viewport handled separately. */

    /* ── 720px: Tablets / large phones ── */
    @media (max-width: 720px) {
      .corner-btn      { font-size: 12px; padding: 0 12px; letter-spacing: 1px; height: 36px; }
      #shop-toggle     { right: 20px; top: 66px; }
      .corner-panel    { width: min(92vw, 320px); top: 118px; }
      #splash-content  { padding-bottom: clamp(220px, 30vh, 300px); }
    }

    /* ── 560px: Play-button reflow ──
       VR spans the full row; Desktop and Mobile share the row below it.
       Without a VR button both fallback to the existing single-row wrap. */
    @media (max-width: 560px) {
      .xr-button-container {
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        width: 100vw !important;
        gap: 4px !important;
        padding: 10px 2px 10px !important;
        border-radius: 12px !important;
        overflow-x: auto !important;
      }
      .xr-button-container::-webkit-scrollbar {
        display: none;
      }
      /* VR / AR / Desktop / Mobile: all equal halves — two per row */
      #vr-button,
      #ar-button,
      #desktop-button,
      #mobile-button {
        flex: 0 0 calc(50% - 4px) !important;
        width: calc(50% - 4px) !important;
      }
      /* Ensure WLE-managed buttons stay 100% width too */
      .button[data-supported] {
        width: 100% !important;
      }
      /* Keep RECOMMENDED tag correctly centered */
      #vr-button::before {
        font-size: 9px;
        top: -12px;
        letter-spacing: 2.5px;
      }
    }

    /* ── 480px: Small phones ── */
    @media (max-width: 480px) {
      /* HUD buttons */
      .corner-btn      { font-size: 11px; padding: 0 10px; height: 34px; letter-spacing: 1px; }
      #account-toggle  { right: 12px; top: 20px; }
      #shop-toggle     { right: 12px; top: 60px; }

      #splash-title-block { height: 48%; }
      /* Adjust play buttons and ad zone for the shorter 48% title block on small phones */
      #play-cta-portal .xr-button-container,
      #play-cta-portal #play-cta-dock { bottom: calc(var(--landing-bottom-stack) + var(--landing-cta-gap)) !important; }
      #adsense-zone { top: 48%; }

      /* ── Bottom-sheet corner panels ──
         Slide up from the bottom like a native mobile sheet instead of
         dropping from the top-right corner where they can be hard to read. */
      .corner-panel {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: 78vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 20px 20px 0 0 !important;
        border: none !important;
        border-top: 1px solid rgba(0, 229, 255, 0.45) !important;
        padding: 28px 18px 28px !important;
        box-sizing: border-box;
        z-index: 100000 !important; /* above xr-button-container (99999) */
        /* draggable handle visual hint */
        background: linear-gradient(180deg,
          rgba(0, 8, 14, 0.97) 0%,
          rgba(0, 4, 8, 0.99)  100%) !important;
      }
      /* Drag handle pill */
      .corner-panel::before {
        content: '';
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 38px;
        height: 4px;
        background: rgba(0, 229, 255, 0.4);
        border-radius: 2px;
        pointer-events: none;
      }
      /* Prevent iOS auto-zoom on inputs */
      .corner-panel input {
        font-size: 16px !important;
      }
    }

    /* ── 400px: Very small phones ── */
    @media (max-width: 400px) {
      #account-toggle  { right: 10px; }
      #shop-toggle     { right: 10px; }
      #splash-title    { letter-spacing: 0; }
    }

    /* ── Landscape short viewport (phones in landscape) ── */
    @media (max-height: 520px) {
      #splash-content  { padding-bottom: clamp(100px, 32vh, 160px); }
      #play-cta-portal .xr-button-container,
      #play-cta-portal #play-cta-dock {
        bottom: calc(var(--landing-bottom-stack) + var(--landing-cta-gap)) !important;
        padding: 14px 12px 12px;
        gap: 6px;
      }
      /* Landscape: all three buttons identical size */
      #vr-button,
      #desktop-button,
      #mobile-button { flex: 0 0 clamp(140px, 22vw, 200px) !important; width: clamp(140px, 22vw, 200px) !important; }
    }

    /* ── Landscape phone: slim banner row + tighter title block ── */
    @media (max-height: 520px) and (pointer: coarse) {
      #splash-title-block        { height: 44%; }
      #adsense-zone              { top: 44%; }
      #play-cta-portal .xr-button-container,
      #play-cta-portal #play-cta-dock { bottom: calc(var(--landing-bottom-stack) + var(--landing-cta-gap)) !important; }
      #adsense-ad-row            { gap: 8px; padding: 0 8px; }
      .aw-ad-unit                { height: 90px; flex: 1 1 auto; max-width: 300px; }
      .aw-ad-unit:nth-child(n+2) { display: none !important; }
    }

    /* ── Desktop ultrawide / large screens ── */
    @media (min-width: 1400px) {
      .xr-button-container {
        bottom: calc(45% + 12px);
        gap: 28px;
      }
    }

    /* ── AdSense: hide entire ad zone during active gameplay sessions ── */
    body.session-desktop #adsense-zone,
    body.session-mobile  #adsense-zone,
    body.session-xr      #adsense-zone,
    body.session-desktop ins.adsbygoogle,
    body.session-mobile  ins.adsbygoogle,
    body.session-xr      ins.adsbygoogle { display: none !important; }

    body.session-desktop .gc-section,
    body.session-mobile  .gc-section,
    body.session-xr      .gc-section { display: none !important; }

    /* ── Scroll hint (down arrow on page 1) ── */
    #scroll-hint {
      position: fixed;
      /* Sit in the gap between the CTA buttons and the ad zone */
      bottom: calc(var(--landing-footer-h) + var(--landing-ad-h) + var(--landing-ad-gap) + 95px);
      left: 50%;
      transform: translateX(-50%);
      z-index: 100002; /* Consistent with panel system — above canvas/header, below panels */
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      pointer-events: all;
      user-select: none;
      opacity: 1;
      transition: opacity 0.4s ease;
      -webkit-tap-highlight-color: transparent;
    }
    #scroll-hint.hint-hidden { opacity: 0; pointer-events: none; }
    #scroll-hint span {
      font-family: 'Rajdhani', sans-serif;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 4px;
      color: rgba(0, 229, 255, 0.55);
      text-transform: uppercase;
    }
    #scroll-hint svg {
      animation: hint-bounce 1.8s ease-in-out infinite;
      filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.6));
    }
    @keyframes hint-bounce {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(7px); }
    }

    /* ── Side dot-nav (page indicator) ── */
    #page-nav {
      position: fixed;
      right: 22px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 100002; /* Same tier as scroll-hint — below panels */
      display: flex;
      flex-direction: column;
      gap: 10px;
      pointer-events: all;
    }
    .pn-dot {
      position: relative;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(0, 229, 255, 0.25);
      border: 1.5px solid rgba(0, 229, 255, 0.50);
      cursor: pointer;
      transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
      -webkit-tap-highlight-color: transparent;
    }
    /* Invisible 32×32 hit-area so the dot is comfortable to click/tap
       without inflating the visual marker. */
    .pn-dot::before {
      content: '';
      position: absolute;
      inset: -12px;
      border-radius: 50%;
    }
    .pn-dot:focus-visible {
      outline: 2px solid #00e5ff;
      outline-offset: 4px;
    }
    .pn-dot.active {
      background: #00e5ff;
      transform: scale(1.45);
      box-shadow: 0 0 10px rgba(0, 229, 255, 0.9);
    }
    .pn-dot:hover:not(.active) {
      background: rgba(0, 229, 255, 0.55);
      transform: scale(1.2);
    }
    body.session-desktop #page-nav,
    body.session-mobile  #page-nav,
    body.session-xr      #page-nav { display: none !important; }
    body.session-desktop #scroll-hint,
    body.session-mobile  #scroll-hint,
    body.session-xr      #scroll-hint { display: none !important; }

    /* ── Publisher content: always-visible game description on page 1 ──
       Sits inside the hero title block. No animations — always legible
       for crawlers and users alike. Hidden only during active gameplay. */
    #splash-game-desc {
      font-family: 'Rajdhani', sans-serif;
      font-size: clamp(11px, 1.1vw, 13px);
      line-height: 1.55;
      color: rgba(176, 220, 238, 0.5);
      letter-spacing: 0.04em;
      margin: clamp(6px, 1.2vh, 14px) auto 0;
      padding: 0 20px;
      max-width: 560px;
      pointer-events: none;
      user-select: none;
    }
    body.session-desktop #splash-game-desc,
    body.session-mobile  #splash-game-desc,
    body.session-xr      #splash-game-desc { display: none !important; }
    @media (max-height: 560px) { #splash-game-desc { display: none !important; } }

    /* ── Hint pill — removed from layout ── */
    #splash-hint { display: none !important; }

    /* ── Bottom-corner HUD decorations — hidden; ad zone occupies that area ── */
    .splash-hud.bl, .splash-hud.br { display: none !important; }

    /* ── Ad zone: fixed flex container occupying the space between the
       title-block neon line (55% from top) and the legal footer.
       Flexbox centers the ad unit both horizontally and vertically. ── */
    #adsense-zone {
      position: static;
      top: unset;
      left: unset;
      right: unset;
      bottom: unset;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 99000;   /* above canvas/splash, below play buttons */
      pointer-events: none;
    }

    /* ── Ad row: 3 rectangle units side-by-side, collapse gracefully ── */
    #adsense-ad-row {
      display: flex;
      flex-direction: row;
      gap: 18px;
      align-items: center;
      justify-content: center;
      padding: 0 18px;
      width: 100%;
      box-sizing: border-box;
    }
    .aw-ad-unit {
      flex: 0 0 clamp(200px, 26vw, 300px);
      min-width: 0;
      height: clamp(170px, 28vh, 220px);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: all;
      background: rgba(0, 8, 14, 0.72);
      border: 1px solid rgba(0, 229, 255, 0.18);
      border-radius: 12px;
      box-shadow:
        0 0 18px rgba(0, 229, 255, 0.07),
        inset 0 0 12px rgba(0, 229, 255, 0.03);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      padding: 4px;
      box-sizing: border-box;
      overflow: hidden;
    }
    /* Subtle placeholder — visible only when no ad has loaded */
    .aw-ad-unit::before {
      content: 'ADVERTISEMENT';
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Rajdhani', sans-serif;
      font-size: 9px;
      letter-spacing: 3px;
      color: rgba(0, 229, 255, 0.12);
      text-transform: uppercase;
      pointer-events: none;
      z-index: 0;
    }
    /* Collapse unfilled units — hide the whole card so the row shrinks gracefully */
    .aw-ad-unit:has(ins.adsbygoogle[data-ad-status="unfilled"]) {
      display: none !important;
    }
    /* Tablet + landscape phone (≤ 960px): show 2 units */
    @media (max-width: 960px) {
      .aw-ad-unit:nth-child(3) { display: none !important; }
    }
    /* Phone portrait (≤ 520px): single fluid unit */
    @media (max-width: 520px) {
      .aw-ad-unit:nth-child(2) { display: none !important; }
      #adsense-ad-row { padding: 0 10px; gap: 0; }
      .aw-ad-unit { flex: 1 1 auto; max-width: 300px; }
    }

    /* ════════════════════════════════════════════════════════════════════
       LANDING POLISH PASS — Layout rework + title flourishes
       ─────────────────────────────────────────────────────────────────
       Goals:
       • Stop the ad zone from devouring the middle of the screen — it
         used to span 55%→bottom:40px and the play buttons sat on top of
         it. We rebuild it as a slim, bottom-anchored banner strip so the
         layout becomes a predictable vertical stack:

            ┌─────────────────────────────┐
            │  TITLE BLOCK                │  top
            │                             │
            │  PLAY BUTTONS (centered)    │
            │  ─ ad strip ─               │
            │  legal footer               │  bottom
            └─────────────────────────────┘

       • Title flourishes: per-letter reveal, gradient sheen sweep,
         brand glyph entrance, feature pills, scanline overlay, CTA
         shimmer hover. All gated by prefers-reduced-motion.
       ════════════════════════════════════════════════════════════════════ */

    :root {
      --landing-footer-h: 40px;
      --landing-ad-h: clamp(96px, 13vh, 130px);
      --landing-ad-gap: 18px;
      --landing-cta-gap: 24px;
      --landing-bottom-stack:
        calc(var(--landing-footer-h)
             + var(--landing-ad-h)
             + var(--landing-ad-gap)
             + env(safe-area-inset-bottom, 0px));
    }

    /* ── Ad zone: bottom-anchored slim strip (no more middle overlap) ── */
    #adsense-zone {
      top: auto !important;
      bottom: calc(var(--landing-footer-h)
                   + env(safe-area-inset-bottom, 0px)) !important;
      height: var(--landing-ad-h);
      align-items: stretch;
      padding-top: 6px;
    }
    #adsense-zone::before {
      content: 'SPONSORED';
      position: absolute;
      top: -6px; left: 50%;
      transform: translateX(-50%);
      font-family: 'Rajdhani', sans-serif;
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 4px;
      color: rgba(0, 229, 255, 0.30);
      pointer-events: none;
      text-shadow: 0 0 6px rgba(0, 229, 255, 0.25);
    }
    #adsense-ad-row {
      height: 100%;
      align-items: stretch;
    }
    .aw-ad-unit {
      height: 100% !important;
      flex: 1 1 clamp(180px, 22vw, 300px) !important;
      max-width: 360px;
    }

    /* ── Play CTAs: glued just above the ad strip ── */
    .xr-button-container {
      bottom: calc(var(--landing-bottom-stack)
                   + var(--landing-cta-gap)) !important;
      top: auto !important;
    }

    /* ── Title block: free-flowing top region (no longer forced to 55%) ── */
    #splash-title-block {
      height: auto !important;
      min-height: clamp(34vh, 42vh, 48vh);
      top: 0; left: 0; right: 0;
      padding-top: clamp(40px, 8vh, 96px);
      padding-bottom: clamp(20px, 4vh, 40px);
      gap: clamp(10px, 2vh, 22px);
    }
    #splash-content {
      /* Reserve the bottom stack so the optional hint doesn't collide */
      padding-bottom: calc(var(--landing-bottom-stack)
                           + var(--landing-cta-gap)
                           + 160px) !important;
    }

    /* ── Responsive: tighten the stack on smaller / shorter screens ── */
    @media (max-width: 720px) {
      :root { --landing-ad-h: clamp(86px, 12vh, 114px); }
    }
    @media (max-width: 560px) {
      :root {
        --landing-ad-h: clamp(78px, 11vh, 100px);
        --landing-cta-gap: 16px;
      }
      #splash-title-block {
        min-height: clamp(28vh, 36vh, 42vh);
        padding-top: clamp(28px, 6vh, 64px);
      }
    }
    @media (max-width: 480px) {
      /* Override the old "top: 48%" rules — base now anchors from bottom */
      #adsense-zone { top: auto !important; }
      #splash-title-block {
        min-height: 30vh !important;
        /* Ensure hero text clears the shrunken nav dock (44px + 10px top = 54px) */
        padding-top: max(66px, 10vh) !important;
      }
      .xr-button-container {
        bottom: calc(var(--landing-bottom-stack)
                     + var(--landing-cta-gap)) !important;
      }
    }
    @media (max-height: 600px) {
      :root { --landing-ad-h: clamp(64px, 10vh, 88px); }
      #splash-title-block {
        min-height: 24vh !important;
        padding-top: 22px;
        padding-bottom: 10px;
      }
    }
    @media (max-height: 520px) and (pointer: coarse) {
      :root {
        --landing-ad-h: 60px;
        --landing-cta-gap: 10px;
        --landing-ad-gap: 10px;
      }
      #splash-title-block {
        min-height: 20vh !important;
        padding-top: 14px;
        padding-bottom: 6px;
      }
      /* Single ad unit only on landscape phones — keep it slim */
      .aw-ad-unit:nth-child(n+2) { display: none !important; }
    }

    /* Collapse the whole ad strip if every unit failed to fill, so the
       CTAs slide down naturally instead of leaving a hollow band */
    #adsense-zone:not(:has(.aw-ad-unit:not([style*="display: none"]):not(:has(ins.adsbygoogle[data-ad-status="unfilled"])))) {
      display: none !important;
    }
    body:has(#adsense-zone[style*="display: none"]),
    body:has(#adsense-zone:not(:has(.aw-ad-unit:not([style*="display: none"]):not(:has(ins.adsbygoogle[data-ad-status="unfilled"]))))) {
      --landing-ad-h: 0px;
      --landing-ad-gap: 0px;
    }

    /* ════════ TITLE BLOCK — brand mark, letter reveal, sheen ════════ */

    #splash-brand-mark {
      width: clamp(40px, 5.5vw, 72px);
      height: clamp(40px, 5.5vw, 72px);
      margin-bottom: clamp(4px, 1vh, 12px);
      opacity: 0;
      transform: translateY(-12px) scale(0.85);
      animation: brand-mark-in 0.9s cubic-bezier(.2,.7,.3,1) 0.1s forwards,
                 brand-mark-float 5s ease-in-out 1.2s infinite;
      filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.65));
    }
    #splash-brand-mark svg { width: 100%; height: 100%; display: block; }
    @keyframes brand-mark-in {
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes brand-mark-float {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-4px); }
    }

    /* Per-letter reveal of the title — overrides the bulk h1 styles
       by inheriting (color/stroke) onto inline-block spans. */
    #splash-title {
      position: relative;
      display: inline-flex;
      align-items: baseline;
      justify-content: center;
      overflow: visible;
    }
    #splash-title .t-letter {
      display: inline-block;
      color: inherit;
      -webkit-text-stroke: inherit;
      opacity: 0;
      transform: translateY(28px) rotateX(-55deg);
      transform-origin: 50% 100%;
      animation: letter-rise 0.7s cubic-bezier(.2,.8,.25,1) forwards;
      animation-delay: calc(0.35s + var(--i, 0) * 70ms);
      will-change: transform, opacity;
    }
    @keyframes letter-rise {
      to { opacity: 1; transform: translateY(0) rotateX(0); }
    }

    /* Sheen sweep across the title every few seconds */
    #splash-title .t-sheen {
      position: absolute;
      inset: -8% -4%;
      pointer-events: none;
      background: linear-gradient(105deg,
        transparent 35%,
        rgba(168, 254, 255, 0.55) 48%,
        rgba(255, 255, 255, 0.85) 50%,
        rgba(168, 254, 255, 0.55) 52%,
        transparent 65%);
      mix-blend-mode: screen;
      transform: translateX(-120%);
      animation: title-sheen 6s ease-in-out 1.4s infinite;
      opacity: 0.65;
      filter: blur(1px);
    }
    @keyframes title-sheen {
      0%, 65% { transform: translateX(-120%); }
      80%     { transform: translateX(120%); }
      100%    { transform: translateX(120%); }
    }

    /* Subtitle entrance */
    #splash-subtitle {
      opacity: 0;
      transform: translateY(10px);
      animation: subtitle-in 0.8s ease-out 1.15s forwards,
                 subtitle-pulse 3.2s ease-in-out 2s infinite;
    }
    @keyframes subtitle-in {
      to { opacity: 0.92; transform: translateY(0); }
    }

    /* Feature pills under the subtitle */
    #splash-features {
      list-style: none;
      margin: clamp(4px, 1vh, 10px) 0 0 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      gap: clamp(8px, 1.4vw, 16px);
      justify-content: center;
      pointer-events: none;
      user-select: none;
      opacity: 0;
      transform: translateY(8px);
      animation: features-in 0.7s ease-out 1.4s forwards;
    }
    @keyframes features-in {
      to { opacity: 1; transform: translateY(0); }
    }
    #splash-features li {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px;
      font-family: 'Rajdhani', sans-serif;
      font-size: clamp(10px, 1.1vw, 12px);
      font-weight: 700;
      letter-spacing: clamp(1.5px, 0.3vw, 3px);
      text-transform: uppercase;
      color: #d8f6ff;
      background: linear-gradient(180deg,
        rgba(0, 24, 40, 0.55) 0%,
        rgba(0, 8, 14, 0.72) 100%);
      border: 1px solid rgba(0, 229, 255, 0.32);
      border-radius: 999px;
      box-shadow:
        0 0 14px rgba(0, 229, 255, 0.18),
        inset 0 0 8px rgba(0, 229, 255, 0.06);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      text-shadow: 0 0 6px rgba(0, 229, 255, 0.55);
    }
    #splash-features .sf-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: #00e5ff;
      box-shadow: 0 0 8px rgba(0, 229, 255, 0.95),
                  0 0 14px rgba(0, 229, 255, 0.55);
      animation: feat-dot-pulse 1.8s ease-in-out infinite;
    }
    #splash-features li:nth-child(2) .sf-dot { animation-delay: 0.3s; }
    #splash-features li:nth-child(3) .sf-dot { animation-delay: 0.6s; }
    @keyframes feat-dot-pulse {
      0%, 100% { opacity: 0.6; transform: scale(1); }
      50%      { opacity: 1.0; transform: scale(1.15); }
    }
    @media (max-width: 380px) {
      #splash-features li { padding: 5px 10px; letter-spacing: 1.5px; }
      #splash-features { gap: 6px; }
    }

    /* ════════ AMBIENT SCANLINES OVER SPLASH ════════ */
    #splash > .splash-scanlines {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image: repeating-linear-gradient(
        180deg,
        rgba(0, 229, 255, 0.05) 0px,
        rgba(0, 229, 255, 0.05) 1px,
        transparent 1px,
        transparent 3px);
      mix-blend-mode: overlay;
      opacity: 0.35;
      z-index: 1;
      animation: scanline-drift 14s linear infinite;
    }
    @keyframes scanline-drift {
      from { background-position: 0 0; }
      to   { background-position: 0 24px; }
    }

    /* ════════ PLAY BUTTONS — shimmer on hover ════════ */
    .xr-button-container > a {
      position: relative;
      overflow: hidden;
      border-radius: 18px;
    }
    .xr-button-container > a::after { content: none; }

    /* ════════ REDUCED MOTION — disable all entrance/loop anims ════════ */
    @media (prefers-reduced-motion: reduce) {
      #splash-title .t-letter,
      #splash-subtitle,
      #splash-features,
      #splash-brand-mark {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
      }
      #splash-title .t-sheen,
      #splash > .splash-scanlines,
      #splash::before,
      .xr-button-frame,
      #vr-button::before {
        animation: none !important;
      }
      #splash-features .sf-dot { animation: none !important; }
    }

    /* ════════════════════════════════════════════════════════════════════
       CALM / PROFESSIONAL PASS
       ─────────────────────────────────────────────────────────────────
       Reported problems addressed here:
         (1) Title was blinking from too many infinite animations
             (title-pulse + sheen-loop + tag-pulse + vr-pulse + scanline
              drift + ember flicker + subtitle-pulse all running at once).
         (2) Half the hero content was clipped — the absolute title block
             had min-height with justify-content:flex-end, so brand mark +
             title + features overflowed upward on shorter screens.
         (3) Ad band blended into the hero — no clear separation,
             undermining AdSense visibility (which is critical).

       Fix strategy:
         • Kill every infinite "pulse" loop. Keep ONLY one-time entrance
           animations. The hero now arrives cinematically, then stays put.
         • Re-flow the title block top-anchored with natural height so all
           content is guaranteed visible at every aspect ratio.
         • Promote the ad band into a first-class, clearly-delineated
           region with a hairline divider + label + frosted background.
       ════════════════════════════════════════════════════════════════════ */

    /* ── (1) Title block: top-anchored natural flow, content can't clip ── */
    #splash-title-block {
      position: absolute;
      top: 0; left: 0; right: 0;
      height: auto !important;
      min-height: 0 !important;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start !important;
      gap: clamp(8px, 1.6vh, 18px);
      padding-top: max(clamp(40px, 7vh, 88px),
                       calc(env(safe-area-inset-top, 0px) + 24px));
      padding-bottom: clamp(20px, 3vh, 36px);
    }
    /* The bottom neon rule now sits flush under the natural content,
       which acts as a clean hero divider instead of floating at 55% */
    #splash-title-block::before { top: 0; }
    #splash-title-block::after  { bottom: 0; opacity: 0.65; }

    /* ── (2) KILL ALL THE FLICKER ──
       Replace every infinite animation with a stable, professional state. */

    /* Title: no more pulsing stroke + filter — just a static neon outline */
    #splash-title {
      animation: none !important;
      filter: drop-shadow(0 0 14px rgba(0, 229, 255, 0.55));
      -webkit-text-stroke-color: #8cf7ff !important;
    }

    /* Subtitle: settles at 92% opacity after entrance, no more wobble */
    #splash-subtitle {
      animation: subtitle-in 0.8s ease-out 1.15s forwards !important;
    }

    /* Title sheen: runs ONCE on load, then stops. No more 6s flash loop. */
    #splash-title .t-sheen {
      animation: title-sheen-once 1.6s ease-out 1.55s 1 forwards !important;
      opacity: 0;
      mix-blend-mode: screen;
    }
    @keyframes title-sheen-once {
      0%   { transform: translateX(-120%); opacity: 0;    }
      20%  { opacity: 0.55; }
      100% { transform: translateX(120%);  opacity: 0;    }
    }

    /* Ember layer behind title: static glow, no flicker */
    #splash::before {
      animation: none !important;
      opacity: 0.85;
    }

    /* Scanlines: stay as static texture (no drift) */
    .splash-scanlines {
      animation: none !important;
      opacity: 0.22 !important;
    }

    /* Play CTAs: static frame glow, no pulsing breathing */
    .xr-button-frame {
      animation: none !important;
      filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.55)) !important;
    }

    /* RECOMMENDED tag: solid, no glow-pulse */
    #vr-button::before {
      animation: none !important;
      box-shadow: 0 0 12px rgba(0, 229, 255, 0.55) !important;
    }

    /* Feature dots: slow, calm breathing (not a strobe) */
    #splash-features .sf-dot {
      animation: feat-dot-calm 3.4s ease-in-out infinite !important;
    }
    @keyframes feat-dot-calm {
      0%, 100% { opacity: 0.72; transform: scale(1); }
      50%      { opacity: 1.0;  transform: scale(1.08); }
    }

    /* Brand mark: entrance only, no perpetual float */
    #splash-brand-mark {
      animation: brand-mark-in 0.9s cubic-bezier(.2,.7,.3,1) 0.1s forwards !important;
    }

    /* ── (3) AD BAND — promote to first-class layout region ────────── */
    #adsense-zone {
      border-top: 1px solid rgba(0, 229, 255, 0.22);
      background:
        linear-gradient(180deg,
          rgba(0, 10, 16, 0.55) 0%,
          rgba(0, 4,  8,  0.82) 100%);
      padding-top: 20px;
      padding-bottom: 10px;
      -webkit-backdrop-filter: blur(10px) saturate(115%);
      backdrop-filter: blur(10px) saturate(115%);
      box-shadow:
        0 -1px 0 rgba(0, 229, 255, 0.10) inset,
        0 -10px 30px -10px rgba(0, 0, 0, 0.45);
    }
    /* "SPONSORED" pill straddles the divider line for a magazine feel */
    #adsense-zone::before {
      top: -9px;
      padding: 2px 12px;
      background: linear-gradient(180deg, #06121a 0%, #020608 100%);
      border: 1px solid rgba(0, 229, 255, 0.28);
      border-radius: 999px;
      color: rgba(0, 229, 255, 0.65);
      letter-spacing: 4px;
      font-size: 9px;
      text-shadow: none;
      box-shadow: 0 0 10px rgba(0, 229, 255, 0.20);
    }
    .aw-ad-unit {
      background: rgba(0, 14, 22, 0.85) !important;
      border: 1px solid rgba(0, 229, 255, 0.24) !important;
      box-shadow:
        0 0 14px rgba(0, 229, 255, 0.08),
        inset 0 0 10px rgba(0, 229, 255, 0.04) !important;
    }
    .aw-ad-unit::before {
      color: rgba(0, 229, 255, 0.16) !important;
      font-size: 9px !important;
      letter-spacing: 4px !important;
    }

    /* ── Breathing room between CTAs and ads on tall / short screens ── */
    @media (min-height: 820px) { :root { --landing-cta-gap: 38px; } }
    @media (max-height: 560px) { :root { --landing-cta-gap: 12px; } }

    /* On very tall portrait screens give the title block extra top air */
    @media (min-height: 900px) and (orientation: portrait) {
      #splash-title-block {
        padding-top: max(clamp(80px, 11vh, 140px),
                         calc(env(safe-area-inset-top, 0px) + 64px));
      }
    }

    /* Vignette removed */
    #splash::after { background: none !important; }

    /* ════════════════════════════════════════════════════════════════════
       FINAL LAYOUT LOCK — three guaranteed non-overlapping zones
       ─────────────────────────────────────────────────────────────────
       Zone A: HERO       top:0  →  bottom of CTA top edge
       Zone B: PLAY CTAs  fixed bottom band, single source of truth
       Zone C: AD STRIP   fixed bottom band, above legal footer
       Footer:            fixed bottom: 0

       Title font was clamp(40px, 8.5vw, 136px) — at 1700 vw that's 136px,
       which collided with the CTA row. Capped to clamp(34px, 6vw, 88px)
       so the hero never crowds the CTAs at any viewport.
       ════════════════════════════════════════════════════════════════════ */

    :root {
      /* Real measured CTA-row height (single row by default) */
      --landing-cta-h: clamp(110px, 14vh, 150px);
    }
    /* Two-row CTA reflow happens below 560px — needs more room */
    @media (max-width: 560px) {
      :root { --landing-cta-h: clamp(160px, 24vh, 220px); }
    }

    /* ── HERO ZONE: explicit top + bottom so it can NEVER reach CTAs ── */
    #splash-title-block {
      position: fixed !important;
      top:    max(env(safe-area-inset-top, 0px) + 14px, 14px) !important;
      bottom: calc(var(--landing-bottom-stack)
                   + var(--landing-cta-h)
                   + var(--landing-cta-gap)
                   + 20px) !important;
      left: 0; right: 0;
      height: auto !important;
      min-height: 0 !important;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center !important;
      gap: clamp(8px, 1.6vh, 18px);
      padding: 8px 18px;
      overflow: hidden;
      z-index: 99001;
    }

    /* Title: capped font so it can't bulldoze the layout on wide screens */
    #splash-title {
      font-size: clamp(34px, 6vw, 88px) !important;
      letter-spacing: clamp(2px, 0.3vw, 6px) !important;
      line-height: 1 !important;
    }
    #splash-title .t-letter {
      /* Stop the title from being so glowy it bleeds into the subtitle */
      text-shadow:
        0 0 4px  rgba(0, 229, 255, 0.95),
        0 0 12px rgba(0, 229, 255, 0.65),
        0 0 26px rgba(0, 229, 255, 0.40);
    }

    /* Subtitle: smaller, calmer */
    #splash-subtitle {
      font-size: clamp(11px, 1.6vw, 18px) !important;
      letter-spacing: clamp(2px, 0.5vw, 7px) !important;
      text-shadow:
        0 0 6px rgba(0, 229, 255, 0.65),
        0 0 16px rgba(0, 229, 255, 0.30) !important;
    }

    /* Brand mark: smaller default */
    #splash-brand-mark {
      width: clamp(38px, 4.2vw, 56px) !important;
      height: clamp(38px, 4.2vw, 56px) !important;
      margin-bottom: 0;
    }

    /* On short viewports, drop the features and shrink the mark */
    @media (max-height: 620px) {
      #splash-features { display: none !important; }
      #splash-title { font-size: clamp(30px, 5vw, 56px) !important; }
      #splash-brand-mark {
        width: clamp(32px, 3.6vw, 44px) !important;
        height: clamp(32px, 3.6vw, 44px) !important;
      }
    }
    @media (max-height: 480px) {
      #splash-brand-mark { display: none !important; }
      #splash-title { font-size: clamp(26px, 4vw, 44px) !important; }
      #splash-subtitle { font-size: clamp(10px, 1.4vw, 14px) !important; }
    }

    /* The decorative neon rules around the title block were anchored to
       the title block edges — with the new explicit-zone block they
       look detached. Hide them and rely on the ad-band divider only. */
    #splash-title-block::before,
    #splash-title-block::after { display: none !important; }

    /* ── PLAY CTAs: lock to bottom band; never re-anchored from middle ── */
    .xr-button-container {
      top: auto !important;
      bottom: calc(var(--landing-bottom-stack)
                   + var(--landing-cta-gap)) !important;
      width: min(96vw, 940px) !important;
      padding-top: clamp(36px, 5.5vh, 52px) !important;
    }
    /* The wide-screen media query was forcing bottom:45% — neutralize it */
    @media (min-width: 1400px) {
      .xr-button-container {
        bottom: calc(var(--landing-bottom-stack)
                     + var(--landing-cta-gap)) !important;
      }
    }
    /* The landscape-phone rule was forcing bottom:56% — neutralize too */
    @media (max-height: 520px) and (pointer: coarse) {
      .xr-button-container {
        bottom: calc(var(--landing-bottom-stack)
                     + var(--landing-cta-gap)) !important;
      }
    }

    /* ── AD STRIP improvements: more visible + clearly framed ── */
    #adsense-zone {
      /* Slight pull-up so SPONSORED pill aligns with the divider line */
      border-top-color: rgba(0, 229, 255, 0.28);
    }
    .aw-ad-unit {
      /* The placeholder "ADVERTISEMENT" text was almost invisible. Make
         the empty state look intentional, not broken. */
      background:
        linear-gradient(135deg,
          rgba(0, 18, 28, 0.92) 0%,
          rgba(0, 10, 16, 0.92) 100%) !important;
      border: 1px solid rgba(0, 229, 255, 0.32) !important;
      box-shadow:
        0 0 16px rgba(0, 229, 255, 0.10),
        inset 0 0 12px rgba(0, 229, 255, 0.05) !important;
    }
    .aw-ad-unit::before {
      color: rgba(0, 229, 255, 0.35) !important;
      font-size: 10px !important;
      letter-spacing: 5px !important;
      font-weight: 700 !important;
    }

    /* ════════════════════════════════════════════════════════════════════
       FINISHING PASS — kill the dead-air, fight HUD bleed-through
       ─────────────────────────────────────────────────────────────────
       The hero was anchored top + centered inside its zone, leaving a
       large empty middle where the gameplay video's HUD (Chaos/Veteran/
       Kills) leaked through and competed with the title. Fix:

         • Anchor hero content to the BOTTOM of its zone so it visually
           docks onto the CTA card — no more dead air.
         • Strengthen the splash darkening + add a soft radial spotlight
           behind the hero so the title pops even over a busy video frame.
         • Add a vertical fade between hero & CTAs that doubles as a
           reading scrim for the subtitle.
       ════════════════════════════════════════════════════════════════════ */

    /* Stronger overall splash darkening so video HUD elements can't
       compete with the menu text. Affects the gradient only — the video
       layer underneath is untouched. */
    /* Background overlay removed — video plays through unobscured */
    #splash { background: transparent !important; }

    /* Subtle reading scrim directly behind the hero text */
    #splash-title-block {
      justify-content: flex-end !important;   /* dock to bottom of zone   */
      padding-bottom: clamp(12px, 2vh, 24px) !important;
    }

    /* Tighten the cushion between hero bottom and the CTA row */
    :root {
      --landing-cta-gap: 14px;
    }
    @media (min-height: 820px) { :root { --landing-cta-gap: 22px; } }
    @media (max-height: 560px) { :root { --landing-cta-gap: 8px;  } }

    /* Re-enable the features pill row on slightly taller screens that
       previously hit the max-height:620 hide rule. They add visual
       balance beneath the subtitle when the room allows. */
    @media (min-height: 540px) {
      #splash-features { display: flex !important; }
    }
    /* Only really tight viewports drop the pills */
    @media (max-height: 460px) {
      #splash-features { display: none !important; }
    }

    /* Slightly larger title now that we have the room (no more 136px,
       but bumped from 88px to a tasteful 96px max) */
    #splash-title {
      font-size: clamp(36px, 6.4vw, 96px) !important;
    }

    /* ════════════════════════════════════════════════════════════════════
       BREATHING-ROOM PASS — fix top-cramp + close the gap to CTAs
       ─────────────────────────────────────────────────────────────────
       Screenshot showed the title hugging the top edge with a large
       empty gap above the CTAs. Cause: the hero zone is tall, content
       sits at top (earlier `justify-content: center` rules + small
       content), and the bottom-stack adds a fat +20px buffer.

       Strategy:
         • Anchor hero content to ITS CENTER but bias slightly upward of
           the CTAs by tightening the zone's bottom and adding controlled
           top padding (so the title has breathing room from the top
           bar, not crammed against it).
         • Reduce the +20px gap above CTAs to +4px so the hero zone
           extends closer to the CTA card → kills the empty gap.
         • Add real padding-top scaling with viewport so the title can
           never touch the top.
       ════════════════════════════════════════════════════════════════════ */
    #splash-title-block {
      /* override the +20px buffer above CTAs with a tight +4px */
      bottom: calc(var(--landing-bottom-stack)
                   + var(--landing-cta-h)
                   + var(--landing-cta-gap)
                   + 4px) !important;
      /* recentre but with comfortable top breathing room */
      justify-content: center !important;
      padding-top: clamp(36px, 7vh, 88px) !important;
      padding-bottom: clamp(8px, 1.4vh, 18px) !important;
      gap: clamp(10px, 1.8vh, 20px) !important;
    }

    /* Short / landscape viewports: keep top breathing but stay compact */
    @media (max-height: 600px) {
      #splash-title-block {
        padding-top: clamp(28px, 6vh, 56px) !important;
        padding-bottom: 6px !important;
        gap: clamp(6px, 1.2vh, 12px) !important;
      }
    }
    @media (max-height: 460px) {
      #splash-title-block {
        padding-top: clamp(18px, 4vh, 32px) !important;
        padding-bottom: 4px !important;
      }
    }

    /* Subtitle: pull it a touch closer to the title (the gap looked
       loose at 22px from the block's own gap property) */
    #splash-subtitle {
      margin-top: clamp(-2px, 0vh, 4px) !important;
    }

    /* Brand mark removed from markup — belt & suspenders hide rule */
    #splash-brand-mark { display: none !important; }

    /* ════════════════════════════════════════════════════════════════════
       CINEMATIC PASS — kill HUD bleed, lift the hero, add polish
       ─────────────────────────────────────────────────────────────────
       Despite the radial spotlight the in-video gameplay HUD (Bot/
       Veteran/Kills/+100xp) still competed with the title because the
       video itself was full-brightness. Solution: a layered treatment.

         1. Soften the video itself (brightness/saturate/blur) so it
            reads as ambient atmosphere, not a competing UI.
         2. Strong top-vignette overlay specifically over the upper
            ~30% where the HUD lives.
         3. Tighten the hero card: small uppercase "eyebrow" badge above
            the title for a more product-launch / esports-poster feel.
         4. Cleaner CTA card: deeper backdrop, refined border.
         5. Reduce ad band visual weight so it never competes with CTAs.
       ════════════════════════════════════════════════════════════════════ */

    /* 1. Video at full brightness — no filter, no scale */
    #splash-video {
      filter: none !important;
      transform: none !important;
    }

    /* 2. Vignette removed */
    #splash::after { background: none !important; }

    /* 3. Hero refinements: subtle bottom border-glow under the title */
    #splash-title {
      text-shadow:
        0 0 18px rgba(0, 229, 255, 0.55),
        0 0 42px rgba(0, 229, 255, 0.30),
        0 2px 0 rgba(0, 0, 0, 0.6) !important;
    }
    #splash-subtitle {
      color: rgba(220, 248, 255, 0.92) !important;
      letter-spacing: clamp(3px, 0.45vw, 7px) !important;
      text-shadow: 0 0 14px rgba(0, 229, 255, 0.4),
                   0 2px 8px rgba(0, 0, 0, 0.7) !important;
    }
    /* Subtle decorative rule under subtitle — two thin cyan lines */
    #splash-subtitle::before,
    #splash-subtitle::after {
      content: "";
      display: inline-block;
      width: clamp(20px, 4vw, 56px);
      height: 1px;
      background: linear-gradient(90deg,
        transparent, rgba(0, 229, 255, 0.55), transparent);
      vertical-align: middle;
      margin: 0 clamp(8px, 1.2vw, 16px);
      transform: translateY(-2px);
    }
    #splash-features li {
      background: rgba(0, 14, 22, 0.55) !important;
      border: 1px solid rgba(0, 229, 255, 0.28) !important;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }

    /* 4. CTA card: no container background — individual SVG buttons carry their own frames */

    /* 5. Ad band: visually quieter — no thick borders, recessed feel */
    #adsense-zone {
      background: linear-gradient(180deg,
        rgba(0, 8, 14, 0.55) 0%,
        rgba(0, 4, 8, 0.78) 100%) !important;
      border-top: 1px solid rgba(0, 229, 255, 0.14) !important;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .aw-ad-unit {
      background: rgba(0, 6, 12, 0.42) !important;
      border: 1px solid rgba(0, 229, 255, 0.10) !important;
      border-radius: 10px !important;
    }

    /* Footer: faint, doesn't compete */
    #arena-legal-footer {
      background: linear-gradient(180deg,
        rgba(0, 4, 8, 0.0) 0%,
        rgba(0, 2, 4, 0.85) 100%) !important;
    }

    /* Make sure the hero card sits above the new top vignette */
    #splash-title-block,
    .xr-button-container,
    #adsense-zone,
    #arena-legal-footer,
    .splash-corner,
    #splash-skip {
      z-index: 99002 !important;
    }

    /* ════════════════════════════════════════════════════════════════════
       CTA RHYTHM PASS — RECOMMENDED tag visible + clean hero↔CTA seam
       ─────────────────────────────────────────────────────────────────
       Issues fixed:
         • "RECOMMENDED" badge above START VR was getting clipped by the
           top edge of the CTA card (tag at top:-14px on the button vs
           clamp-shrunk card padding). Ensure overflow:visible and add
           enough top padding so the tag floats cleanly OUT of the card
           with a glow, not crammed against its border.
         • Hero zone left a soft gap above the CTA card. Close it: the
           subtitle/features should "rest" just above the CTA card with
           consistent rhythm — no dead air, no overlap.
       ════════════════════════════════════════════════════════════════════ */

    /* CTA card must never clip floating decorations (RECOMMENDED tag) */
    .xr-button-container {
      overflow: visible !important;
      padding-top: clamp(34px, 5.5vh, 52px) !important;
      padding-bottom: clamp(20px, 3vh, 30px) !important;
      background: none !important;
      border: none !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    /* RECOMMENDED tag: lift it a touch higher and make it unmistakable */
    #vr-button::before {
      top: -16px !important;
      padding: 4px 12px !important;
      font-size: 10px !important;
      letter-spacing: 2.6px !important;
      box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 0 14px rgba(0, 229, 255, 0.85),
        0 4px 10px rgba(0, 0, 0, 0.45) !important;
      z-index: 5 !important;
    }

    /* Hero ↔ CTA rhythm: kill the seam. The hero block ends 6px above
       the CTA card; its own padding-bottom provides the visual breathing
       room so subtitle/features never crowd the buttons. */
    #splash-title-block {
      bottom: calc(var(--landing-bottom-stack)
                   + var(--landing-cta-h)
                   + var(--landing-cta-gap)
                   + 6px) !important;
      padding-bottom: clamp(14px, 2.4vh, 26px) !important;
    }

    /* Same compaction for tall-viewport desktop overrides */
    @media (max-width: 560px) {
      .xr-button-container {
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        width: 100vw !important;
        gap: 4px !important;
        padding: 12px 4px 12px !important;
        border-radius: 12px !important;
      }
      #vr-button,
      #ar-button,
      #desktop-button,
      #mobile-button {
        flex: 1 1 0 !important;
        width: auto !important;
      }
    }

/* Shop and Account panels: always above canvas and main UI, below modals */
.corner-panel {
  z-index: 100010 !important;
}
.corner-panel.visible {
  z-index: 100020 !important;
}
    /* ══════════════════════════════════════════════════════════════
       PAGES 2–4 — THREE SCROLL-SNAP GAME INFO SECTIONS
       Each section is one full viewport, snap-aligned, with a
       scrollable content area and an in-content ad at the bottom.
       ═════════════════════════════════════════════════════════════ */
    .gc-section {
      position: relative;
      z-index: 200000;
      isolation: isolate;
      /* No CSS scroll-snap — sections are full-viewport-tall blocks that the
         user scrolls through naturally. The right-side dot-nav still jumps
         precisely to each section's offsetTop on click. */
      height: 100vh;
      background: #040d13;
      color: #b0d8e8;
      font-family: 'Rajdhani', sans-serif;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    /* Tactical-grid overlay on every section */
    .gc-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(0, 229, 255, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 229, 255, 0.022) 1px, transparent 1px);
      background-size: 56px 56px;
      pointer-events: none;
      z-index: 0;
    }
    #gc-s1 { border-top: 2px solid rgba(0, 229, 255, 0.4); box-shadow: 0 -32px 80px rgba(0, 0, 0, 1); }
    #gc-s2, #gc-s4, #gc-s3 { border-top: 1px solid rgba(0, 229, 255, 0.15); }
    #gc-pager {
      position: relative;
      height: 100vh;
      width: 100%;
      overflow: hidden;
      isolation: isolate;
      z-index: 200000;
    }
    #gc-pager > .gc-section {
      position: absolute;
      inset: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      pointer-events: none;
      transform: translateY(14px);
      transition: opacity .35s ease, transform .35s ease;
      z-index: 1;
      /* Override the standalone-mode top borders so layered sections don't
         double-stack neon lines on top of the current section. */
      border-top: 0 !important;
      box-shadow: none !important;
    }
    #gc-pager > .gc-section.is-current {
      opacity: 1;
      pointer-events: auto;
      transform: none;
      z-index: 2;
    }
    @media (prefers-reduced-motion: reduce) {
      #gc-pager > .gc-section { transition: none; transform: none; }
    }

    /* ── Floating prev / next arrows ── */
    .gc-pager-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 100;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(4, 13, 19, 0.7);
      color: rgba(0, 229, 255, 0.75);
      border: 1px solid rgba(0, 229, 255, 0.35);
      border-radius: 50%;
      cursor: pointer;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transition: background .2s, color .2s, border-color .2s, transform .2s, opacity .2s;
      -webkit-tap-highlight-color: transparent;
      font: inherit;
      padding: 0;
      line-height: 1;
    }
    .gc-pager-arrow:hover:not(:disabled),
    .gc-pager-arrow:focus-visible {
      background: rgba(0, 229, 255, 0.18);
      color: #ffffff;
      border-color: rgba(0, 229, 255, 0.85);
      transform: translateY(-50%) scale(1.06);
      outline: none;
    }
    .gc-pager-arrow:disabled {
      opacity: 0.25;
      cursor: not-allowed;
    }
    .gc-pager-prev { left: clamp(12px, 2vw, 28px); }
    .gc-pager-next { right: clamp(12px, 2vw, 28px); }
    .gc-pager-arrow svg { width: 18px; height: 18px; }
    @media (max-width: 560px) {
      .gc-pager-arrow { width: 38px; height: 38px; }
      .gc-pager-arrow svg { width: 16px; height: 16px; }
    }
    body.session-desktop .gc-pager-arrow,
    body.session-mobile  .gc-pager-arrow,
    body.session-xr      .gc-pager-arrow { display: none !important; }
    /* ── Section header bar ── */
    .gc-section-bar {
      flex-shrink: 0;
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 clamp(20px, 6vw, 96px);
      height: 46px;
      background: rgba(4, 13, 19, 0.95);
      border-bottom: 1px solid rgba(0, 229, 255, 0.12);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .gc-bar-label {
      font-family: 'Rajdhani', sans-serif;
      font-size: clamp(8px, 0.9vw, 10px);
      font-weight: 700;
      letter-spacing: 4px;
      color: rgba(0, 229, 255, 0.65);
      text-transform: uppercase;
    }
    .gc-bar-pager { display: flex; align-items: center; gap: 7px; }
    .gc-pager-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: rgba(0, 229, 255, 0.18);
      transition: background 0.25s, transform 0.25s;
    }
    .gc-pager-dot.on {
      background: #00e5ff;
      transform: scale(1.45);
      box-shadow: 0 0 8px rgba(0, 229, 255, 0.8);
    }
    #gc-back {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: rgba(0, 229, 255, 0.45);
      font-family: 'Rajdhani', sans-serif;
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      text-decoration: none !important;
      cursor: pointer;
      transition: color 0.2s;
      white-space: nowrap;
    }
    #gc-back:hover { color: #00e5ff; }
    /* ── Scrollable content area ── */
    .gc-section-scroll {
      flex: 1;
      min-height: 0;        /* prevent flex child from growing past container */
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;  /* prevent inner scroll from chaining to outer page scroll */
      position: relative;
      z-index: 1;
      scrollbar-width: thin;
      scrollbar-color: rgba(0, 229, 255, 0.2) transparent;
    }
    .gc-section-scroll::-webkit-scrollbar { width: 4px; }
    .gc-section-scroll::-webkit-scrollbar-track { background: transparent; }
    .gc-section-scroll::-webkit-scrollbar-thumb {
      background: rgba(0, 229, 255, 0.22);
      border-radius: 2px;
    }
    .gc-inner {
      position: relative;
      z-index: 1;
      max-width: 1180px;
      margin: 0 auto;
      padding: clamp(22px, 3.5vh, 48px) clamp(20px, 6vw, 96px) clamp(16px, 2.5vh, 32px);
      box-sizing: border-box;
    }
    /* ── Bottom ad slot ── */
    .gc-section-ad {
      flex-shrink: 0;
      position: relative;
      z-index: 2;
      padding: 6px clamp(20px, 4vw, 64px) 8px;
      border-top: 1px solid rgba(0, 229, 255, 0.1);
      background: rgba(0, 3, 6, 0.8);
    }
    .gc-ad-label {
      font-family: 'Rajdhani', sans-serif;
      font-size: 7px;
      font-weight: 700;
      letter-spacing: 4px;
      color: rgba(0, 229, 255, 0.2);
      text-align: center;
      margin-bottom: 4px;
      text-transform: uppercase;
      pointer-events: none;
      user-select: none;
    }
    /* ── Hero title + tagline ── */
    .gc-eyebrow {
      font-family: 'Rajdhani', sans-serif;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 5px;
      color: rgba(0, 229, 255, 0.5);
      text-transform: uppercase;
      margin: 0 0 10px 0;
    }
    .gc-title {
      font-family: 'Rajdhani', sans-serif;
      font-size: clamp(30px, 5.5vw, 58px);
      font-weight: 900;
      letter-spacing: clamp(2px, 0.4vw, 7px);
      color: #ffffff;
      text-transform: uppercase;
      margin: 0 0 14px 0;
      line-height: 1.05;
      text-shadow: 0 0 32px rgba(0, 229, 255, 0.25);
    }
    .gc-title em {
      font-style: normal;
      color: #00e5ff;
      text-shadow: 0 0 22px rgba(0, 229, 255, 0.75);
    }
    .gc-tagline {
      font-size: clamp(14px, 1.5vw, 17px);
      line-height: 1.7;
      color: rgba(176, 216, 232, 0.72);
      margin: 0;
      max-width: 640px;
    }
    /* ── Stat strip ── */
    .gc-stats {
      display: flex;
      flex-wrap: wrap;
      gap: clamp(10px, 1.6vw, 18px);
      margin: clamp(22px, 3.5vh, 36px) 0;
    }
    .gc-stat {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex: 1 1 88px;
      min-width: 80px;
      padding: clamp(12px, 1.8vh, 18px) 14px;
      background: rgba(0, 229, 255, 0.04);
      border: 1px solid rgba(0, 229, 255, 0.16);
      border-radius: 12px;
      transition: border-color 0.2s, background 0.2s;
    }
    .gc-stat:hover {
      background: rgba(0, 229, 255, 0.07);
      border-color: rgba(0, 229, 255, 0.32);
    }
    .gc-stat-n {
      font-family: 'Rajdhani', sans-serif;
      font-size: clamp(26px, 4vw, 40px);
      font-weight: 900;
      color: #00e5ff;
      line-height: 1;
      text-shadow: 0 0 16px rgba(0, 229, 255, 0.65);
    }
    .gc-stat-l {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 3px;
      color: rgba(176, 216, 232, 0.5);
      text-transform: uppercase;
      margin-top: 5px;
    }
    /* ── Divider ── */
    .gc-divider {
      border: none;
      height: 1px;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 229, 255, 0.22) 25%,
        rgba(0, 229, 255, 0.22) 75%,
        transparent 100%);
      margin: clamp(28px, 4.5vh, 52px) 0;
    }
    /* ── Section label (h2) ── */
    .gc-section h2 {
      font-family: 'Rajdhani', sans-serif;
      font-size: clamp(11px, 1.3vw, 13px);
      font-weight: 700;
      letter-spacing: 5px;
      color: rgba(0, 229, 255, 0.55);
      text-transform: uppercase;
      margin: 0 0 clamp(14px, 2.2vh, 22px) 0;
    }
    /* ── Mode cards ── */
    .gc-modes {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: clamp(10px, 1.6vw, 18px);
    }
    .gc-card {
      position: relative;
      background: rgba(4, 12, 20, 0.85);
      border: 1px solid rgba(0, 229, 255, 0.1);
      border-radius: 14px;
      padding: clamp(16px, 2vw, 22px) clamp(16px, 2vw, 22px) clamp(14px, 1.8vw, 20px);
      overflow: hidden;
      transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    }
    .gc-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--ca, rgba(0, 229, 255, 0.5));
    }
    .gc-card:hover {
      transform: translateY(-5px);
      border-color: rgba(0, 229, 255, 0.25);
      box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45),
                  0 0 20px var(--cg, rgba(0, 229, 255, 0.08));
    }
    .gc-card h3 {
      font-family: 'Rajdhani', sans-serif;
      font-size: clamp(11px, 1.1vw, 13px);
      font-weight: 700;
      letter-spacing: 1.5px;
      color: #e0f4ff;
      text-transform: uppercase;
      margin: 0 0 8px 0;
    }
    .gc-card p {
      font-size: clamp(12px, 1.1vw, 14px);
      line-height: 1.65;
      color: rgba(160, 210, 228, 0.65);
      margin: 0;
    }
    .gc-card[data-mode="training"] { --ca: rgba(140,170,190,0.6); --cg: rgba(140,170,190,0.06); }
    .gc-card[data-mode="duel"]     { --ca: rgba(255,195,50,0.7);  --cg: rgba(255,195,50,0.07); }
    .gc-card[data-mode="chaos"]    { --ca: rgba(255,60,70,0.75);  --cg: rgba(255,60,70,0.07);  }
    .gc-card[data-mode="team"]     { --ca: rgba(0,229,255,0.65);  --cg: rgba(0,229,255,0.07);  }
    .gc-card[data-mode="flagship"] {
      --ca: linear-gradient(90deg, #ffb020, #ff6420);
      --cg: rgba(255,150,30,0.10);
      background: rgba(16, 9, 0, 0.9);
      border-color: rgba(255, 150, 30, 0.18);
    }
    .gc-card[data-mode="flagship"] h3 { color: #ffc870; }
    /* ── Feature rows ── */
    .gc-features {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: clamp(14px, 2vw, 22px);
    }
    .gc-feature {
      display: flex;
      gap: 14px;
      align-items: flex-start;
    }
    .gc-feature-icon {
      flex-shrink: 0;
      width: 42px;
      height: 42px;
      border-radius: 11px;
      background: rgba(0, 229, 255, 0.07);
      border: 1px solid rgba(0, 229, 255, 0.18);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 19px;
    }
    .gc-feature-text h3 {
      font-family: 'Rajdhani', sans-serif;
      font-size: clamp(11px, 1.1vw, 13px);
      font-weight: 700;
      letter-spacing: 1.5px;
      color: #d8f0fa;
      text-transform: uppercase;
      margin: 0 0 5px 0;
    }
    .gc-feature-text p {
      font-size: clamp(12px, 1.1vw, 14px);
      line-height: 1.65;
      color: rgba(160, 210, 228, 0.6);
      margin: 0;
    }
    /* ── Discord CTA ── */
    .gc-discord {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: clamp(18px, 2.8vh, 40px) clamp(20px, 4vw, 56px);
      background: linear-gradient(135deg,
        rgba(88, 101, 242, 0.10) 0%,
        rgba(0, 229, 255, 0.05) 100%);
      border: 1px solid rgba(88, 101, 242, 0.30);
      border-radius: 18px;
      position: relative;
      overflow: hidden;
    }
    .gc-discord::after {
      content: '';
      position: absolute;
      inset: -1px;
      border-radius: 18px;
      background: linear-gradient(135deg,
        rgba(88, 101, 242, 0.35),
        rgba(0, 229, 255, 0.15));
      opacity: 0.4;
      animation: disc-pulse 4s ease-in-out infinite alternate;
      pointer-events: none;
      z-index: 0;
    }
    .gc-discord > * { position: relative; z-index: 1; }
    @keyframes disc-pulse { 0% { opacity: 0.22; } 100% { opacity: 0.55; } }
    .gc-discord h2 {
      font-family: 'Rajdhani', sans-serif;
      font-size: clamp(16px, 2.2vw, 26px);
      font-weight: 900;
      letter-spacing: clamp(2px, 0.4vw, 5px);
      color: #ffffff;
      text-transform: uppercase;
      margin: 0 0 10px 0;
    }
    .gc-discord p {
      font-size: clamp(13px, 1.3vw, 16px);
      color: rgba(176, 216, 232, 0.7);
      margin: 0 0 22px 0;
      max-width: 460px;
    }
    .gc-discord-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 13px 34px;
      background: rgba(88, 101, 242, 0.18);
      border: 2px solid #5865f2;
      border-radius: 12px;
      color: #c8ccff;
      font-family: 'Rajdhani', sans-serif;
      font-size: clamp(11px, 1.2vw, 14px);
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      text-decoration: none !important;
      transition: background 0.18s, box-shadow 0.18s, transform 0.15s;
    }
    .gc-discord-btn:hover {
      background: rgba(88, 101, 242, 0.38);
      box-shadow: 0 0 26px rgba(88, 101, 242, 0.55);
      transform: translateY(-2px);
    }
    /* ── Credits ── */
    .gc-credits {
      font-size: 12px;
      color: rgba(160, 200, 220, 0.4);
      line-height: 1.9;
      text-align: center;
    }
    .gc-credits strong { color: rgba(160, 200, 220, 0.65); }
    .gc-credits a { color: rgba(0, 229, 255, 0.5); text-decoration: none; }
    .gc-credits a:hover { color: #00e5ff; text-decoration: underline; }
    .gc-credits ul { list-style: none; padding: 0; margin: 6px 0; }
    .gc-credits li { margin-bottom: 2px; }
    /* ── Scroll-reveal: VISIBLE BY DEFAULT for crawlers / no-JS ──
       The animation state is only active when JS adds .gc-anim to #game-content.
       Without JS (or before JS runs) all text content is fully readable. */
    .gc-reveal {
      transition: opacity 0.55s ease, transform 0.55s ease;
      transition-delay: var(--gd, 0ms);
    }
    .gc-section.gc-anim .gc-reveal         { opacity: 0; transform: translateY(18px); }
    .gc-section.gc-anim .gc-reveal.visible { opacity: 1; transform: translateY(0); }
    @media (prefers-reduced-motion: reduce) {
      .gc-section.gc-anim .gc-reveal { opacity: 1; transform: none; transition: none; }
    }
    /* ── Responsive ── */
    @media (max-width: 640px) {
      .gc-stats { gap: 8px; }
      .gc-stat  { min-width: 70px; padding: 10px 10px; }
      .gc-modes { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 420px) {
      .gc-modes { grid-template-columns: 1fr; }
    }
    @media (max-width: 640px) {
      .gc-features { grid-template-columns: 1fr; }
      .gc-bar-label { font-size: 8px; letter-spacing: 2px; }
    }
    /* Short viewports: landscape phones, small tablets */
    @media (max-height: 680px) {
      .gc-inner    { padding-top: 14px; padding-bottom: 8px; }
      .gc-stats    { margin: 12px 0; }
      .gc-discord  { padding: 14px clamp(20px, 4vw, 48px); }
      .gc-discord h2  { margin-bottom: 6px; }
      .gc-discord p   { margin-bottom: 12px; }
      .gc-discord-btn { padding: 9px 24px; }
      .gc-divider  { margin: 14px 0; }
    }

    /* ── Progression / Unlock track (gc-s2 enrichment) ── */
    .gc-rich-lead {
      font-size: clamp(13px, 1.25vw, 15px);
      line-height: 1.7;
      color: rgba(176, 216, 232, 0.78);
      margin: 0 0 clamp(18px, 2.6vh, 28px);
      max-width: 760px;
    }
    .gc-rich-lead strong { color: #e0f4ff; }
    .gc-unlock-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: clamp(10px, 1.4vw, 16px);
    }
    .gc-unlock {
      position: relative;
      padding: 14px 16px 12px;
      background: rgba(0, 229, 255, 0.04);
      border: 1px solid rgba(0, 229, 255, 0.16);
      border-radius: 12px;
      transition: border-color .2s, background .2s, transform .2s;
    }
    .gc-unlock:hover {
      background: rgba(0, 229, 255, 0.08);
      border-color: rgba(0, 229, 255, 0.35);
      transform: translateY(-2px);
    }
    .gc-unlock-lvl {
      font-family: 'Rajdhani', sans-serif;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 3px;
      color: #00e5ff;
      text-transform: uppercase;
      margin: 0 0 4px;
    }
    .gc-unlock h4 {
      font-family: 'Rajdhani', sans-serif;
      font-size: clamp(11px, 1vw, 13px);
      font-weight: 700;
      letter-spacing: 1px;
      color: #e8f6fb;
      text-transform: uppercase;
      margin: 0 0 4px;
    }
    .gc-unlock p {
      font-size: 12px;
      line-height: 1.5;
      color: rgba(160, 210, 228, 0.65);
      margin: 0;
    }
    .gc-unlock[data-tier="prestige"] {
      background: linear-gradient(135deg, rgba(255, 176, 32, 0.07), rgba(255, 100, 32, 0.04));
      border-color: rgba(255, 176, 32, 0.32);
    }
    .gc-unlock[data-tier="prestige"] .gc-unlock-lvl { color: #ffc870; }

    /* ── Callout block (proximity chat / pickup note) ── */
    .gc-callout {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: clamp(14px, 2vh, 20px) clamp(16px, 2.4vw, 22px);
      background: rgba(0, 229, 255, 0.05);
      border-left: 3px solid #00e5ff;
      border-radius: 8px;
      margin: clamp(18px, 2.6vh, 28px) 0;
    }
    .gc-callout-icon {
      flex-shrink: 0;
      font-size: 22px;
      line-height: 1;
    }
    .gc-callout p {
      margin: 0;
      font-size: clamp(12px, 1.1vw, 14px);
      line-height: 1.65;
      color: rgba(200, 230, 240, 0.85);
    }
    .gc-callout strong { color: #fff; }

    /* ── About studio block (gc-s3 enrichment, AdSense publisher signal) ── */
    .gc-about {
      padding: clamp(20px, 3vh, 32px) clamp(20px, 3vw, 32px);
      background: linear-gradient(135deg, rgba(0, 24, 40, 0.55), rgba(0, 8, 14, 0.7));
      border: 1px solid rgba(0, 229, 255, 0.18);
      border-radius: 14px;
      margin: clamp(22px, 3.4vh, 36px) 0;
    }
    .gc-about h3 {
      font-family: 'Rajdhani', sans-serif;
      font-size: clamp(12px, 1.2vw, 14px);
      font-weight: 700;
      letter-spacing: 3px;
      color: #ffffff;
      text-transform: uppercase;
      margin: 0 0 10px;
    }
    .gc-about p {
      font-size: clamp(12px, 1.1vw, 14px);
      line-height: 1.7;
      color: rgba(176, 216, 232, 0.7);
      margin: 0 0 8px;
    }
    .gc-about p:last-child { margin-bottom: 0; }
    .gc-about a { color: #00e5ff; text-decoration: none; }
    .gc-about a:hover { text-decoration: underline; }

/* ---- block 2 (overrides) (was lines 3476-3513) ---- */
      /* Absolute-center the disclosure above the ad row so it doesn't break
         the horizontal flex layout of #adsense-zone (which has the ad row
         as a flex item). Sits just above the top edge of the row. */
      #adsense-zone .ad-disclosure {
        position: absolute;
        top: -4px;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        padding: 5px 18px;
        font-family: 'Rajdhani', sans-serif;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: rgba(180, 220, 235, 0.55);
        text-shadow: 0 0 6px rgba(0, 229, 255, 0.25);
        white-space: nowrap;
        user-select: none;
        pointer-events: none;
        z-index: 2;
      }
      /* Dedupe: kill the older 'SPONSORED' pseudo since .ad-disclosure now
         provides the labelling (and includes the German 'Anzeige' wording
         required by UWG §5a(4)). */
      #adsense-zone::before { content: none !important; }

/* Ensure launcher ad zone never sits flush against the play CTAs.
         The CTAs are anchored near 45% from bottom; reserve a clear gap so
         AdSense reviewer does not flag "accidental click" risk. */
      #adsense-zone {
        margin-top: clamp(120px, 18vh, 200px) !important;
      }
      body.session-desktop #adsense-zone,
      body.session-mobile  #adsense-zone,
      body.session-xr      #adsense-zone { display: none !important; }

/* ---- block 3 (mobile HUD) (was lines 4116-4234) ---- */
      /* Footer */
      #arena-legal-footer{
        position:fixed;left:0;right:0;bottom:0;z-index:2147483640;
        padding:8px 14px;padding-bottom:max(8px, env(safe-area-inset-bottom, 0px));
        display:flex;flex-wrap:wrap;gap:10px;justify-content:center; /* Tighter gap */
        align-items:center;font-family:'Rajdhani',sans-serif;font-size:12px;
        color:#9fb6c1;background:linear-gradient(0deg, rgba(0, 4, 8, 0.95), transparent);
        pointer-events:none;letter-spacing:.5px;
      }
      #arena-legal-footer button{
        color:#9fb6c1;text-decoration:none;pointer-events:all;opacity:.85;
        transition:.15s ease;background:none;border:none;font:inherit;cursor:pointer;padding:0;
      }
      #arena-legal-footer button:hover{color:#00e5ff;opacity:1}
      body.in-session #arena-legal-footer{display:none}

      /* Overlay scaffold (shared by legal modal, reset, verify) */
      .al-overlay{
        position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:2147483645;
        display:none;align-items:stretch;justify-content:stretch;padding:0;
        font-family:'Rajdhani',sans-serif;
      }
      .al-overlay.open{display:flex}
      .al-modal{
        width:100%;height:100%;max-height:100%;overflow:hidden;
        display:flex;flex-direction:column;
        color:#e8f6fb;
        background:linear-gradient(180deg,#001a26,#000a10);
        border:none;border-radius:0;padding:0;
      }
      .al-modal .al-head{
        display:flex;align-items:center;gap:8px;padding:16px 22px;flex-shrink:0;
        border-bottom:1px solid rgba(0,229,255,.18);
      }
      .al-modal .al-tabs{display:flex;flex:1;flex-wrap:wrap;gap:4px}
      .al-tab{
        appearance:none;border:1px solid transparent;background:transparent;color:#9fb6c1;
        padding:6px 12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
        font-size:11px;border-radius:8px;cursor:pointer;transition:.15s ease;
      }
      .al-tab:hover{color:#fff}
      .al-tab.active{background:rgba(0,229,255,.12);color:#00e5ff;border-color:rgba(0,229,255,.35)}
      .al-close{
        appearance:none;border:1px solid rgba(0,229,255,.35);background:transparent;color:#00e5ff;
        padding:4px 10px;font-size:18px;line-height:1;border-radius:8px;cursor:pointer;
      }
      .al-close:hover{background:rgba(0,229,255,.12);color:#fff}
      .al-body{padding:18px 22px;font-size:14px;line-height:1.55;color:#cfe7ef;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
      .al-body h2{margin:18px 0 6px;color:#fff;font-size:16px;letter-spacing:.5px}
      .al-body h3{margin:14px 0 4px;color:#fff;font-size:14px}
      .al-body p,.al-body ul{margin:0 0 10px}
      .al-body ul{padding-left:20px}
      .al-body code{background:rgba(0,229,255,.08);padding:1px 5px;border-radius:4px;color:#9ef}
      .al-body table{width:100%;border-collapse:collapse;font-size:12px;margin:8px 0 12px}
      .al-body th,.al-body td{border:1px solid rgba(0,229,255,.18);padding:6px 8px;text-align:left}
      .al-body th{background:rgba(0,229,255,.08);color:#fff}
      .al-body .muted{color:#7c98a3;font-size:12px}
      .al-body .notice{
        background:rgba(255,140,0,.08);border:1px solid rgba(255,140,0,.35);
        padding:10px 12px;border-radius:8px;margin:6px 0 14px;color:#ffd9a8;font-size:13px;
      }
      .al-pane{display:none}
      .al-pane.active{display:block}

      /* Cookie banner / preferences */
      .cc-bar{
        position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
        width:min(720px,calc(100vw - 32px));
        background:linear-gradient(180deg,rgba(0,24,40,.92),rgba(0,8,14,.96));
        color:#e8f6fb;border:1px solid rgba(0,229,255,.35);border-radius:16px;
        box-shadow:0 12px 40px rgba(0,0,0,.55),0 0 32px rgba(0,229,255,.18);
        font-family:'Rajdhani',sans-serif;font-size:14px;line-height:1.5;
        padding:18px 20px;z-index:2147483646;
        backdrop-filter:blur(8px) saturate(120%);-webkit-backdrop-filter:blur(8px) saturate(120%);
      }
      .cc-bar h3{margin:0 0 6px;font-size:16px;color:#fff;letter-spacing:.5px}
      .cc-bar p{margin:0 0 12px;color:#cfe7ef}
      .cc-bar a,.cc-bar button.cc-link{
        color:#00e5ff;background:none;border:none;padding:0;font:inherit;cursor:pointer;text-decoration:underline;
      }
      .cc-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
      .cc-btn{
        appearance:none;border:1px solid #00e5ff;background:transparent;color:#00e5ff;
        padding:8px 14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
        font-size:12px;border-radius:8px;cursor:pointer;transition:.15s ease;
      }
      .cc-btn:hover{background:rgba(0,229,255,.12);color:#fff}
      .cc-btn-primary{background:#00e5ff;color:#001018}
      .cc-btn-primary:hover{background:#66f8ff;color:#001018}
      .cc-btn-secondary{border-color:#9fb6c1;color:#cfe7ef}
      .cc-cat{border:1px solid rgba(0,229,255,.22);border-radius:10px;padding:12px 14px;margin:10px 0;background:rgba(0,229,255,.04)}
      .cc-cat-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
      .cc-cat-head strong{color:#fff}
      .cc-cat p{margin:6px 0 0;font-size:13px;color:#cfe7ef}
      .cc-switch{position:relative;display:inline-block;width:42px;height:22px;flex:0 0 42px}
      .cc-switch input{opacity:0;width:0;height:0}
      .cc-slider{position:absolute;cursor:pointer;inset:0;background:#334;border-radius:22px;transition:.2s}
      .cc-slider:before{
        content:"";position:absolute;height:16px;width:16px;left:3px;top:3px;background:#fff;
        border-radius:50%;transition:.2s;
      }
      .cc-switch input:checked + .cc-slider{background:#00e5ff}
      .cc-switch input:checked + .cc-slider:before{transform:translateX(20px)}
      .cc-switch input:disabled + .cc-slider{opacity:.55;cursor:not-allowed}
      .cc-row-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
      @media (max-width:480px){
        .cc-bar{bottom:12px;padding:14px 16px}
        .cc-actions{justify-content:stretch}
        .cc-actions .cc-btn{flex:1 1 100%}
      }

      /* Auth (reset / verify) overlay forms */
      .al-form{display:flex;flex-direction:column;gap:12px;margin-top:12px}
      .al-form label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#cfe7ef}
      .al-form input{
        width:100%;padding:10px;background:#001a26;color:#fff;
        border:1px solid rgba(0,229,255,.35);border-radius:8px;font:inherit;
      }
      .al-msg{margin-top:14px;font-size:13px;min-height:18px}

/* ---- block 4 (legal / panels) (was lines 4749-4959) ---- */
      #mobile-hud {
        position: fixed;
        inset: 0;
        z-index: 100005; /* CRITICAL: Must be above fullscreen canvas (100000), header (100001), backdrop (100002), panels (100003), back-to-menu (100004) */
        pointer-events: none;
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        touch-action: none;
        font-family: 'Rajdhani', sans-serif;
        color: #cffaff;
        display: none;
      }
      #mobile-hud.active { display: block; }

      /* Left thumb move pad */
      #mobile-hud .pad {
        position: absolute;
        left: 28px; bottom: 28px;
        width: 170px; height: 170px;
        border-radius: 50%;
        background: radial-gradient(circle at 50% 50%, rgba(0,229,255,0.10) 0%, rgba(0,30,50,0.32) 65%, rgba(0,8,16,0.55) 100%);
        border: 1.5px solid rgba(0,229,255,0.42);
        box-shadow: 0 0 12px rgba(0,229,255,0.25) inset;
        pointer-events: auto;
        touch-action: none;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
      }
      #mobile-hud .pad .stick {
        position: absolute;
        left: 50%; top: 50%;
        width: 68px; height: 68px;
        margin: -34px 0 0 -34px;
        border-radius: 50%;
        background: radial-gradient(circle at 50% 35%, #5cf2ff 0%, #00b8d4 60%, #00485e 100%);
        border: 2px solid rgba(207,250,255,0.7);
        box-shadow: 0 0 10px rgba(0,229,255,0.55);
        pointer-events: none;
        transition: background 0.12s ease, box-shadow 0.12s ease;
      }
      #mobile-hud .pad.sprinting {
        border-color: rgba(255, 224, 102, 0.75);
        box-shadow: 0 0 16px rgba(255, 224, 102, 0.45) inset;
      }
      #mobile-hud .pad.sprinting .stick {
        background: radial-gradient(circle at 50% 35%, #fff2a0 0%, #ffb84d 60%, #663300 100%);
        box-shadow: 0 0 14px rgba(255, 200, 60, 0.65);
      }

      /* Generic button */
      #mobile-hud .btn {
        position: absolute;
        display: flex; align-items: center; justify-content: center;
        font-weight: 900;
        letter-spacing: 1.2px;
        color: #00e5ff;
        background: rgba(0, 8, 18, 0.55);
        border: 2px solid rgba(0,229,255,0.70);
        border-radius: 50%;
        pointer-events: auto;
        touch-action: none;
        text-transform: uppercase;
        box-shadow: 0 0 8px rgba(0,229,255,0.30);
        transition: transform 0.07s ease, background 0.07s ease, color 0.07s ease, box-shadow 0.07s ease;
        -webkit-tap-highlight-color: transparent;
      }
      #mobile-hud .btn.active {
        background: rgba(0, 229, 255, 0.85);
        color: #001218;
        transform: scale(0.92);
        box-shadow: 0 0 18px rgba(0,229,255,0.70);
      }

      /* ── Right-thumb action cluster ── */
      /* SVG icons — inherit color, block display, no pointer events */
      #mobile-hud .btn svg.hud-icon {
        display: block; overflow: visible; pointer-events: none; flex-shrink: 0;
      }
      /* FIRE and ADS stack icon + label vertically */
      #mobile-hud .btn.fire,
      #mobile-hud .btn.ads  { flex-direction: column; gap: 4px; }
      #mobile-hud .fire-label,
      #mobile-hud .ads-label {
        font-size: 10px; font-weight: 900; letter-spacing: 2.5px;
        line-height: 1; text-transform: uppercase; pointer-events: none;
      }

      /* FIRE: big bottom-right */
      #mobile-hud .btn.fire   { right: 20px;  bottom: 20px;  width: 126px; height: 126px; }
      #mobile-hud .btn.fire.auto-on {
        border-color: #00ff88;
        color: #00ff88;
        background: rgba(0, 30, 16, 0.55);
        box-shadow: 0 0 18px rgba(0,255,136,0.55), 0 0 8px rgba(0,255,136,0.25) inset;
        animation: auto-pulse 1.6s ease-in-out infinite;
      }
      #mobile-hud .btn.fire.auto-on.active {
        background: rgba(0,255,136,0.80);
        color: #001810;
        animation: none;
      }
      @keyframes auto-pulse {
        0%, 100% { box-shadow: 0 0 14px rgba(0,255,136,0.45), 0 0 6px rgba(0,255,136,0.20) inset; }
        50%      { box-shadow: 0 0 28px rgba(0,255,136,0.85), 0 0 14px rgba(0,255,136,0.45) inset; }
      }
      #mobile-hud .btn.fire.hit-flash {
        animation: fire-hit-flash 0.22s ease-out;
      }
      @keyframes fire-hit-flash {
        0%   { box-shadow: 0 0 32px rgba(255, 80, 80, 0.95), 0 0 16px rgba(255, 80, 80, 0.6) inset; border-color: #ff5050; }
        100% { box-shadow: 0 0 18px rgba(0,255,136,0.55), 0 0 8px rgba(0,255,136,0.25) inset; }
      }

      /* ADS: left of FIRE — tap-toggle scope lock */
      #mobile-hud .btn.ads    { right: 162px; bottom: 44px;  width: 90px;  height: 90px; }
      #mobile-hud .btn.ads.ads-on {
        background: rgba(0, 229, 255, 0.20);
        border-color: #00e5ff;
        color: #ffffff;
        box-shadow: 0 0 22px rgba(0,229,255,0.75), 0 0 8px rgba(0,229,255,0.35) inset;
        animation: ads-on-pulse 2s ease-in-out infinite;
      }
      @keyframes ads-on-pulse {
        0%,100% { box-shadow: 0 0 16px rgba(0,229,255,0.55), 0 0 6px rgba(0,229,255,0.25) inset; }
        50%     { box-shadow: 0 0 32px rgba(0,229,255,0.95), 0 0 14px rgba(0,229,255,0.50) inset; }
      }
      /* JUMP: above FIRE */
      #mobile-hud .btn.jump   { right: 26px;  bottom: 168px; width: 92px;  height: 92px; }

      /* PICKUP: right of joystick, left-thumb reach */
      #mobile-hud .btn.pickup { left: 210px;  bottom: 44px;  width: 76px;  height: 76px; }

      /* Top-left EXIT, top-right SETTINGS cog */
      #mobile-hud #mobile-exit {
        position: absolute; top: 16px; left: 16px;
        padding: 8px 16px; font-size: 13px;
        background: rgba(0, 8, 16, 0.75);
        border: 1.5px solid #ff4d4f; color: #ff8a8c;
        border-radius: 10px; pointer-events: auto; cursor: pointer;
        font-weight: 900; letter-spacing: 2px;
      }
      #mobile-hud #mobile-settings-btn {
        position: absolute; top: 14px; right: 16px;
        width: 42px; height: 42px; font-size: 22px;
        background: rgba(0, 8, 16, 0.70);
        border: 1.5px solid rgba(0,229,255,0.6); color: #00e5ff;
        border-radius: 50%; pointer-events: auto; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        line-height: 1;
      }

      /* Swipe-look area covers most of the right side BEHIND buttons */
      #mobile-hud #mobile-look-zone {
        position: absolute;
        right: 0; top: 0; bottom: 0;
        width: 62%;
        pointer-events: auto;
        touch-action: none;
        background: transparent;
      }

      /* Settings panel */
      #mobile-hud #mobile-settings {
        position: absolute;
        top: 64px; right: 16px;
        width: 280px;
        background: rgba(0, 8, 18, 0.94);
        border: 1.5px solid rgba(0,229,255,0.6);
        border-radius: 12px;
        padding: 14px 16px;
        display: none;
        pointer-events: auto;
        box-shadow: 0 8px 32px rgba(0,0,0,0.6);
      }
      #mobile-hud #mobile-settings.visible { display: block; }
      #mobile-hud #mobile-settings h4 {
        margin: 0 0 6px; font-size: 13px; letter-spacing: 2px;
        color: #00e5ff; text-transform: uppercase;
      }
      #mobile-hud #mobile-settings input[type=range] {
        width: 100%; accent-color: #00e5ff;
        margin-bottom: 4px;
      }
      #mobile-hud #mobile-settings .row {
        display: flex; align-items: center; justify-content: space-between;
        font-size: 12px; margin: 10px 0 2px;
        color: #b8edf5; letter-spacing: 1px;
      }
      #mobile-hud #mobile-settings .row .val {
        color: #00e5ff; font-weight: 700; min-width: 36px; text-align: right;
      }
      #mobile-hud #mobile-settings .toggles {
        display: flex; justify-content: space-between;
        font-size: 12px; margin-top: 12px; color: #b8edf5;
      }
      #mobile-hud #mobile-settings .toggles label {
        display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
      }
      #mobile-hud #mobile-settings .toggles input { accent-color: #00e5ff; }

      /* Small-screen / landscape phone scaling */
      @media (max-height: 420px) {
        #mobile-hud .pad    { width: 126px; height: 126px; left: 16px; bottom: 16px; }
        #mobile-hud .pad .stick { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
        #mobile-hud .btn.fire   { width: 96px;  height: 96px;  right: 16px; bottom: 16px; }
        #mobile-hud .btn.ads    { width: 72px;  height: 72px;  right: 126px; bottom: 28px; }
        #mobile-hud .btn.jump   { width: 72px;  height: 72px;  right: 22px;  bottom: 130px; }
        #mobile-hud .btn.pickup { width: 60px;  height: 60px;  left: 158px;  bottom: 22px; }
      }

/* =====================================================================
   PLAY NOW LAUNCH BUTTON + DEVICE SELECT
   ---------------------------------------------------------------------
   #launch-btn is an absolute overlay centered inside .xr-button-container.
   The chips reserve layout space via visibility:hidden, so the launch
   button is guaranteed to sit at the chips' geometric center on every
   viewport. Toggling body.device-select-open swaps which is visible.
   ===================================================================== */

/* Chips reserve space but stay hidden + non-interactive by default.
   visibility:hidden keeps layout; pointer-events:none prevents click-through. */
.xr-button-container > a {
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.32s ease;
  opacity: 0;
}

/* Open state: reveal chips with stagger, make interactive. */
body.device-select-open .xr-button-container > a {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
}
body.device-select-open .xr-button-container > a:nth-child(1) { transition-delay:   0ms; }
body.device-select-open .xr-button-container > a:nth-child(2) { transition-delay: 100ms; }
body.device-select-open .xr-button-container > a:nth-child(3) { transition-delay: 200ms; }
body.device-select-open .xr-button-container > a:nth-child(4) { transition-delay: 300ms; }

/* ── PLAY NOW button: absolutely centered overlay ── */
#launch-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(90%, 480px);
  height: clamp(64px, 9vh, 88px);
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 3;
  pointer-events: auto;
  opacity: 1;
  transition: opacity 0.32s ease, transform 0.28s ease;
  -webkit-tap-highlight-color: transparent;
  font: inherit;
}
#launch-btn svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 14px rgba(0, 229, 255, 0.7))
          drop-shadow(0 0 32px rgba(0, 229, 255, 0.35));
  animation: launch-pulse 2.4s ease-in-out infinite;
}
@keyframes launch-pulse {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(0,229,255,.70)) drop-shadow(0 0 32px rgba(0,229,255,.35)); }
  50%      { filter: drop-shadow(0 0 28px rgba(0,229,255,1.0)) drop-shadow(0 0 58px rgba(0,229,255,.65)); }
}
#launch-btn:hover  { transform: translate(-50%, -50%) scale(1.04); }
#launch-btn:active { transform: translate(-50%, -50%) scale(0.97); }
#launch-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,229,255,.6), 0 0 24px rgba(0,229,255,.5);
  border-radius: 22px;
}

/* Hidden when device-select is open or during active sessions. */
body.device-select-open #launch-btn {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.94);
}
body.session-desktop  #launch-btn,
body.session-mobile   #launch-btn,
body.session-xr       #launch-btn,
body.splash-dismissed #launch-btn { display: none; }

/* ── RECOMMENDED badge — JS-driven onto the detected device chip ── */
body.launch-btn-ready #vr-button::before { display: none; }
body.launch-btn-ready .chip-recommended  {
  position: relative;
  overflow: visible !important; /* badge sits at top: -16px outside the chip */
}
/* Container & SVG must not clip the badge either. */
body.launch-btn-ready .xr-button-container { overflow: visible !important; }
body.launch-btn-ready .chip-recommended svg { overflow: visible; }
body.launch-btn-ready .chip-recommended::before {
  content: 'RECOMMENDED';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 3px;
  color: #001018;
  background: linear-gradient(135deg, #00e5ff 0%, #66f8ff 100%);
  padding: 3px 10px 3px 11px;
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.9);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
  animation: tag-pulse 2.2s ease-in-out infinite;
}

/* Splash brightens slightly when device-select opens. */
#splash-video { transition: filter 0.4s ease; }
body.device-select-open #splash-video { filter: brightness(1.18) saturate(1.08); }

/* Click-outside dismiss overlay. */
#device-select-dismiss {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99990;
  cursor: default;
}
body.device-select-open #device-select-dismiss { display: block; }

/* Quest auto-select countdown ring (inside #vr-button). */
#vr-countdown {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
}
body.device-select-open #vr-countdown { display: flex; }
#vr-countdown circle {
  stroke-dasharray: 163.36;
  stroke-dashoffset: 163.36;
  transition: none;
}

/* Reduced-motion: drop the pulse, keep static glow. */
@media (prefers-reduced-motion: reduce) {
  #launch-btn svg                              { animation: none; }
  body.device-select-open .xr-button-container > a { transition-delay: 0ms; }
}

/* =====================================================================
   VIEWPORT-FIXED PLAY CTAs (must beat every prior !important rule)
   ---------------------------------------------------------------------
   Play row is a direct child of <body> so fixed positioning is never
   trapped by #game-container (overflow:hidden / stacking context).
   Bottom-anchored above the ad strip — not vertically centered.
   ===================================================================== */
#play-cta-portal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100002 !important;
  pointer-events: none !important;
  overflow: visible !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#play-cta-portal #play-cta-dock,
#play-cta-portal .xr-button-container {
  position: absolute !important;
  top: auto !important;
  bottom: calc(var(--landing-bottom-stack) + var(--landing-cta-gap)) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  animation: none !important;
}
body.past-hero #play-cta-portal {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Session-* hide rules must still win, so re-assert them at higher specificity. */
body.session-desktop #play-cta-portal,
body.session-mobile  #play-cta-portal,
body.session-xr      #play-cta-portal,
body.session-desktop .xr-button-container,
body.session-mobile  .xr-button-container,
body.session-xr      .xr-button-container { display: none !important; }