/* === ANCHOR: BASE === */
  :root{
    --void:#070318; --toxic:#39ff7a; --magenta:#ff2bd6; --cyan:#21e6ff; --gold:#ffd23f; --danger:#ff3b5c;
  }
  *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html,body{ margin:0; padding:0; width:100%; height:100%; height:100dvh; overflow:hidden; background:#070318;
    overscroll-behavior:none; touch-action:none; user-select:none; -webkit-user-select:none;
    /* Stop Android font-boosting from inflating button text (why buttons looked too big on
       Android/OnePlus but fine on iOS). Pins text to the CSS-specified sizes on all platforms. */
    -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; text-size-adjust:100%; }
  /* The container is sized precisely by JS (resize() in index.html) to the TRUE visible
     viewport every frame, so the canvas always exactly fills the visible area — never
     taller than the screen (which would crop it and read as "zoomed"). The vw/dvh values
     here are only a pre-JS fallback; dvh tracks the Telegram/browser chrome. body bg is
     the void so any sub-pixel seam during a rotate/resize blends with the scene. */
  #game{ position:fixed; inset:0; margin:0; padding:0; overflow:hidden;
    width:100vw; height:100vh; height:100dvh; }
  #fatal{ position:fixed; top:0; left:0; right:0; z-index:999; display:none;
    background:#1a0008; color:#ff6b81; font:12px/1.5 ui-monospace,monospace; padding:14px;
    white-space:pre-wrap; border-bottom:2px solid #ff3b5c; }
  canvas{ display:block; }
  #game canvas{ width:100% !important; height:100% !important; display:block; }

  #crt{ position:fixed; inset:0; pointer-events:none; z-index:30;
    background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.06) 3px, rgba(0,0,0,0) 4px);
    mix-blend-mode:multiply; }
  #vignette{ position:fixed; inset:0; pointer-events:none; z-index:29;
    background:radial-gradient(ellipse at center, rgba(0,0,0,0) 52%, rgba(0,0,0,0.6) 100%); }

  /* === ANCHOR: HUD === */
  #hud{ position:fixed; top:0; left:0; right:0; z-index:20; display:flex; justify-content:space-between;
    align-items:flex-start; padding:14px 16px; pointer-events:none; font-family:'Orbitron',sans-serif; color:#fff;
    padding-top:calc(14px + env(safe-area-inset-top)); }
  .hud-block{ display:flex; flex-direction:column; gap:4px; }
  .hud-right{ align-items:flex-end; }
  .hud-label{ font-size:9px; letter-spacing:2px; opacity:.6; }
  #score{ font-size:26px; font-weight:900; color:var(--cyan); text-shadow:0 0 12px var(--cyan); line-height:1; }
  #lives{ font-size:18px; letter-spacing:2px; }
  #combo{ font-family:'Press Start 2P'; font-size:11px; color:var(--toxic); text-shadow:0 0 10px var(--toxic); opacity:0; transition:opacity .15s; }
  #vipBadge{ display:none; margin-top:6px; font-family:'Press Start 2P'; font-size:8px; color:var(--gold);
    border:1px solid var(--gold); border-radius:4px; padding:4px 6px; text-shadow:0 0 8px var(--gold);
    box-shadow:0 0 12px rgba(255,210,63,.4); animation:vipPulse 1.4s ease-in-out infinite; }
  @keyframes vipPulse{ 0%,100%{box-shadow:0 0 8px rgba(255,210,63,.3)} 50%{box-shadow:0 0 20px rgba(255,210,63,.7)} }

  #popups{ position:fixed; inset:0; z-index:22; pointer-events:none; }
  .popup{ position:absolute; transform:translate(-50%,-50%); font-family:'Press Start 2P'; font-size:13px;
    white-space:nowrap; animation:floatUp .9s ease-out forwards; text-shadow:0 0 8px currentColor; }
  @keyframes floatUp{ 0%{opacity:0;transform:translate(-50%,-50%) scale(.6)} 20%{opacity:1;transform:translate(-50%,-70%) scale(1.15)} 100%{opacity:0;transform:translate(-50%,-150%) scale(1)} }

  #banner{ position:fixed; top:36%; left:0; right:0; text-align:center; z-index:23; font-family:'Press Start 2P';
    font-size:20px; color:var(--magenta); text-shadow:0 0 18px var(--magenta); opacity:0; pointer-events:none; }
  .banner-show{ animation:bannerFlash 1.3s ease-out forwards; }
  @keyframes bannerFlash{ 0%{opacity:0;transform:scale(.6)} 20%{opacity:1;transform:scale(1.18)} 70%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1.4)} }

  /* === ANCHOR: OVERLAYS === */
  /* UPPER MENU PROTECTION: when the centered column grows taller than a short/narrow
     viewport, plain flex centering pushes the TOP of the content (logo, hero, the
     tab-bar clearance) above the top edge where it is clipped and unreachable.
     `safe center` makes the browser fall back to start-alignment the instant content
     overflows, and overflow-y:auto lets it scroll instead of clipping — so the top UI
     always stays bound inside the upper viewport. */
  .overlay{ position:fixed; inset:0; z-index:40; display:flex; flex-direction:column; align-items:safe center;
    justify-content:safe center; overflow-y:auto; text-align:center; padding:24px; font-family:'Orbitron',sans-serif; color:#fff;
    background:linear-gradient(rgba(7,3,24,.55), rgba(7,3,24,.86)); }
  .hidden{ display:none !important; }
  /* The tab bar (#tabbar, fixed top, z-index 46) renders above this centered overlay,
     so reserve clearance at the top or the hero art slides under the bar in portrait.
     Asymmetric top padding shifts the centered column down clear of the bar. */
  #startScreen{ padding-top:calc(72px + env(safe-area-inset-top)); }
  /* Title + hero art grouped so the title stays directly ABOVE the image in both
     orientations; in landscape this whole wrap is the LEFT half of the split. */
  .heroWrap{ display:flex; flex-direction:column; align-items:center; }
  .game-title{ font-family:'Press Start 2P'; font-size:20px; line-height:1.45; letter-spacing:1px;
    margin:0 0 8px; color:var(--toxic); text-shadow:0 0 14px rgba(57,255,122,.6), 3px 3px 0 #5a1a8a; }
  .game-title .title-accent{ color:var(--magenta); text-shadow:0 0 14px rgba(255,43,214,.6), 3px 3px 0 #2a0a44; }
  #heroImg{ width:210px; max-width:60vw; height:auto; margin-bottom:2px;
    filter:drop-shadow(0 0 12px rgba(0,0,0,.6));
    animation:heroFloat 3.2s ease-in-out infinite; }
  @keyframes heroFloat{ 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-10px) rotate(1deg)} }
  /* Rotate-to-landscape nudge. Hidden by default; only revealed to mobile/touch
     players who are still in portrait (see the @media rule near the bottom) — pointless
     on desktop or once already rotated to landscape. Clean, readable Orbitron. */
  .orient-hint{ display:none; font-family:'Orbitron',sans-serif; font-weight:500; font-size:11px;
    letter-spacing:.4px; line-height:1.5; color:var(--cyan); text-shadow:0 0 10px rgba(33,230,255,.5);
    max-width:320px; margin:0 auto 4px; }
  /* Right-hand column wrapper. display:contents = invisible to layout in portrait (its
     children flow as direct flex items of #startScreen, unchanged); the landscape media
     query promotes it to the flex column on the RIGHT half of the split. */
  .startCol{ display:contents; }
  .btn{ font-family:'Press Start 2P'; font-size:13px; letter-spacing:1px; color:#04130a; background:var(--toxic);
    border:none; border-radius:10px; padding:18px 26px; cursor:pointer; pointer-events:auto;
    box-shadow:0 0 22px rgba(57,255,122,.55), inset 0 -4px 0 rgba(0,0,0,.25); transition:transform .08s ease; }
  .btn:active{ transform:translateY(2px) scale(.98); }
  .btn.secondary{ background:transparent; color:var(--cyan); border:2px solid var(--cyan); box-shadow:0 0 16px rgba(33,230,255,.4); }
  .btn.small{ font-size:9px; padding:11px 16px; border-radius:8px; line-height:1.5; max-width:260px; }
  /* gold invite CTA — stands apart from the green START / cyan CONNECT buttons */
  .btn.invite{ background:linear-gradient(135deg,#ffd23f,#ff8a3a); color:#1a1030;
    box-shadow:0 0 22px rgba(255,168,58,.55), inset 0 -4px 0 rgba(0,0,0,.22); }
  .invite-hint{ font-size:8px; letter-spacing:1px; color:var(--gold,#ffd23f); opacity:.8; margin-top:6px; }
  /* Telegram-blue CTA — join the community group */
  .btn.tg{ background:linear-gradient(135deg,#2aabee,#229ed9); color:#fff;
    box-shadow:0 0 20px rgba(42,171,238,.5), inset 0 -4px 0 rgba(0,0,0,.22); }
  /* ===== compact menu utility row =====
     Replaces three stacked full-width buttons (connect / invite / telegram) whose
     sentence-long labels dominated the start screen. Same actions, same IDs, one row. */
  .menuRow{ display:flex; gap:8px; margin-top:18px; width:100%; max-width:340px; justify-content:center; }
  .mbtn{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:6px;
    font-family:'Press Start 2P'; font-size:7px; line-height:1.6; letter-spacing:.5px; cursor:pointer;
    pointer-events:auto; color:var(--cyan); background:rgba(20,10,40,.7); border:2px solid #2a2150;
    border-radius:10px; padding:10px 4px; transition:transform .08s ease, border-color .12s, box-shadow .12s; }
  .mbtn:hover{ border-color:var(--cyan); box-shadow:0 0 14px rgba(33,230,255,.35); }
  .mbtn:active{ transform:translateY(2px) scale(.98); }
  .mbtn-ic{ font-size:17px; line-height:1; }
  .mbtn-lb{ opacity:.92; }
  /* Payoff badge — says what the button GIVES you, not just what it does. */
  .mbtn-tag{ font-size:6px; letter-spacing:.3px; line-height:1.4; color:#1a1030; background:var(--gold);
    border-radius:999px; padding:3px 5px; margin-top:1px; white-space:nowrap; max-width:100%; }
  .mbtn.gold{ color:var(--gold); } .mbtn.gold:hover{ border-color:var(--gold); box-shadow:0 0 14px rgba(255,210,63,.35); }
  .mbtn.tg{ color:#5ec6f5; } .mbtn.tg:hover{ border-color:#2aabee; box-shadow:0 0 14px rgba(42,171,238,.35); }

  /* ===== HOW TO PLAY panel =====
     The shared .overlay backdrop (.55 -> .86 alpha) is tuned for sparse screens like
     PAUSED; behind a dense reference panel the whole start menu shows through it and
     the text becomes unreadable. This one gets a near-solid backdrop of its own. */
  #howtoPanel, #loginPanel{ background:rgba(5,2,16,.965); backdrop-filter:blur(3px); }
  /* the sign-in sheet is short — centre it instead of pinning it to the top like the tall panels */
  #loginPanel{ justify-content:safe center; padding-top:calc(74px + env(safe-area-inset-top)); }
  #loginPanel .panelInner{ max-width:340px; align-items:center; text-align:center; }
  .htLead{ font-size:10px; line-height:1.7; color:#cfe3f2; text-align:left; margin-bottom:4px; }
  .htLead b{ color:var(--toxic); }
  .htHead{ font-family:'Press Start 2P'; font-size:9px; letter-spacing:1px; text-align:left;
    margin:12px 0 2px; color:#9fb6c9; }
  .htHead.good{ color:var(--toxic); } .htHead.bad{ color:var(--danger); }
  .htRow{ display:flex; align-items:center; gap:12px; text-align:left;
    border:2px solid #2a2150; border-radius:10px; padding:8px 10px; background:rgba(20,10,40,.55); }
  /* contain: the art is every shape from a tall truck to a square jar */
  .htPic{ flex:0 0 auto; width:46px; height:46px; border-radius:9px; border:2px solid #2a2150;
    background:#140a28 center/contain no-repeat; }
  /* bossDriving_sheet.webp is a 2x1 strip (two tread frames) — show only the first */
  .htPic.sheet2{ background-size:200% 100%; background-position:left center; }
  .htTxt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
  .htTxt b{ font-family:'Press Start 2P'; font-size:9px; letter-spacing:.5px; color:#fff; }
  .htTxt span{ font-size:10px; line-height:1.5; color:#9fb6c9; }
  .htChips{ display:flex; flex-wrap:wrap; gap:6px; }
  .htChip{ font-size:9px; letter-spacing:.5px; padding:6px 9px; border-radius:999px;
    color:var(--c); border:1px solid var(--c); background:rgba(20,10,40,.6); opacity:.95; }
  .htRule{ margin-top:14px; font-size:10px; line-height:1.7; text-align:left; color:#cfe3f2;
    border-left:4px solid var(--gold); padding:8px 10px; background:rgba(255,210,63,.07); border-radius:0 8px 8px 0; }
  .htRule b{ color:var(--gold); }

  .wallet{ margin-top:18px; font-size:10px; letter-spacing:1px; min-height:16px; color:var(--cyan); opacity:.9; word-break:break-all; max-width:300px; }
  .status-line{ margin-top:8px; font-size:10px; color:var(--gold); min-height:14px; }
  .go-title{ font-family:'Press Start 2P'; font-size:24px; color:var(--danger); text-shadow:0 0 16px var(--danger); margin-bottom:14px; }
  /* Rank milestone block (filled by game.js): current run title + distance to next. */
  .go-rank{ display:flex; flex-direction:column; align-items:center; gap:3px; margin-bottom:14px; }
  .go-rank-label{ font-size:8px; letter-spacing:3px; color:#9fb6c9; opacity:.7; }
  .go-rank-cur{ font-family:'Press Start 2P'; font-size:13px; color:var(--gold); text-shadow:0 0 12px var(--gold); }
  .go-rank-next{ font-size:10px; letter-spacing:.5px; color:#9fb6c9; }
  .go-rank-world{ margin-top:3px; font-family:'Press Start 2P'; font-size:9px; color:var(--cyan); text-shadow:0 0 8px var(--cyan); }
  .go-stats{ display:flex; flex-direction:column; align-items:center; }
  .stat{ font-size:13px; margin:6px 0; letter-spacing:1px; }
  .stat .num{ color:var(--cyan); font-weight:900; font-size:20px; text-shadow:0 0 10px var(--cyan); }
  .best{ color:var(--gold); }
  .go-buttons{ display:flex; flex-direction:column; gap:12px; margin-top:22px; }
  /* z-index 50 keeps the sound toggle above the overlays (40) and tab bar (46) so
     it stays visible and tappable on the menu, in gameplay, and on the game-over
     screen — not buried behind a full-screen overlay. */
  #soundBtn{ position:fixed; z-index:50; right:14px; bottom:calc(14px + env(safe-area-inset-bottom));
    width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
    background:rgba(10,6,19,.6); color:#fff; font-size:18px; pointer-events:auto; cursor:pointer; }
  /* z-index 50 (matching #soundBtn) keeps the tilt toggle above the overlays so it is
     visible and tappable on the start screen and every other screen, stacked just above
     the sound button in the bottom-right corner — clear of the menu text/buttons. */
  #tiltBtn{ position:fixed; z-index:50; right:14px; bottom:calc(68px + env(safe-area-inset-bottom));
    width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
    background:rgba(10,6,19,.6); color:#fff; font-size:18px; pointer-events:auto; cursor:pointer; }
  #tiltBtn.on{ border-color:var(--toxic); color:var(--toxic); box-shadow:0 0 12px rgba(57,255,122,.4); }
  #pauseBtn{ position:fixed; z-index:25; top:calc(10px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
    width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
    background:rgba(10,6,19,.6); color:#fff; font-size:16px; pointer-events:auto; cursor:pointer; }
  .blink{ animation:blink 1s steps(2,start) infinite; }
  @keyframes blink{ 50%{opacity:.25} }

  /* ===== bag readout in HUD ===== */
  #bagWrap{ display:flex; flex-direction:column; align-items:flex-end; margin-top:8px; }
  #bagWrap .hud-label{ color:var(--toxic); }
  #bagHud{ font-family:'Orbitron'; font-weight:900; font-size:15px; color:var(--toxic); text-shadow:0 0 10px var(--toxic); }

  /* ===== tab bar ===== */
  /* === ANCHOR: UI_PANELS === */
  #tabbar{ position:fixed; top:0; left:0; right:0; z-index:46; display:flex; gap:6px;
    padding:calc(8px + env(safe-area-inset-top)) 8px 8px; background:linear-gradient(rgba(7,3,24,.92),rgba(7,3,24,.4)); }
  #tabbar .tab{ flex:1; font-family:'Press Start 2P'; font-size:8px; letter-spacing:1px; color:#9fb6c9;
    background:rgba(20,10,40,.7); border:2px solid #2a2150; border-radius:8px; padding:11px 2px; transition:all .12s; }
  #tabbar .tab.on{ color:#04130a; background:var(--toxic); border-color:var(--toxic); box-shadow:0 0 16px rgba(57,255,122,.5); }

  /* ===== panels ===== */
  .panel{ justify-content:flex-start; padding-top:calc(74px + env(safe-area-inset-top)); }
  .panelInner{ width:100%; max-width:420px; display:flex; flex-direction:column; gap:10px;
    max-height:82vh; overflow-y:auto; padding:0 4px 20px; }
  /* Every menu panel: the native scrollbar is replaced by .rankThumb (attachScrollThumb in
     game.js), which is short and takes the colour of the [data-band] block it is scrolled
     over. Native thumbs can do neither — length is forced proportional and colour is static. */
  .panelInner{ scrollbar-width:none; -ms-overflow-style:none; }
  .panelInner::-webkit-scrollbar{ width:0; height:0; }
  .rankThumb{ position:fixed; width:5px; border-radius:3px; background:#9fb6c9; opacity:0;
    pointer-events:none; z-index:60; transition:background .18s ease, opacity .2s ease; }
  .pnl-title{ font-family:'Press Start 2P'; font-size:12px; line-height:1.5; margin:0 0 6px; padding-left:10px;
    border-left:6px solid var(--magenta); color:#fff; text-align:left; }
  .sub{ font-size:10px; letter-spacing:1px; color:#9fb6c9; text-align:left; margin-top:6px; }
  .pbtn{ width:100%; margin-top:2px; }

  /* wallet */
  .wcard{ border:2px solid #2a2150; border-radius:10px; padding:14px; background:rgba(20,10,40,.55); display:flex; flex-direction:column; gap:10px; }
  .wrow{ display:flex; justify-content:space-between; align-items:center; font-size:12px; }
  .wrow b{ font-family:'Orbitron'; font-size:16px; }
  .tierbadge{ text-align:center; border:2px solid var(--toxic); border-radius:8px; padding:7px;
    font-family:'Press Start 2P'; font-size:9px; letter-spacing:1px; }
  .simrow{ display:flex; gap:6px; }
  .sbtn{ flex:1; font-family:'Press Start 2P'; font-size:8px; color:var(--toxic); background:rgba(20,10,40,.7);
    border:2px solid var(--toxic); border-radius:8px; padding:11px 2px; }
  .sbtn.dump{ color:var(--danger); border-color:var(--danger); }
  .ttable{ display:flex; flex-direction:column; gap:5px; margin-top:4px; }
  .trow{ display:flex; justify-content:space-between; font-size:11px; border:2px solid #2a2150; border-radius:8px; padding:9px 12px; color:#cdd8e6; }
  .trow.on{ border-color:var(--toxic); background:rgba(57,255,122,.08); color:var(--toxic); }
  .trow b{ font-family:'Orbitron'; }

  /* missions */
  .mrow{ border:2px solid #2a2150; border-radius:10px; padding:11px; display:flex; flex-direction:column; gap:7px; text-align:left; }
  .mrow.done{ border-color:var(--toxic); }
  .mtop{ display:flex; justify-content:space-between; font-size:11px; font-family:'Orbitron'; }
  .mtop b{ color:var(--magenta); }
  .mbar{ height:9px; background:#06030f; border:1px solid #2a2150; border-radius:6px; overflow:hidden; }
  .mbar i{ display:block; height:100%; }
  .msub{ font-size:9px; color:#9fb6c9; text-align:right; }

  /* leaderboard */
  .lrow{ display:flex; align-items:center; gap:10px; border:2px solid #1f1840; border-radius:8px; padding:10px 12px; font-size:13px; }
  .lrow.you{ border-color:var(--toxic); background:rgba(57,255,122,.08); }
  .lrank{ font-family:'Press Start 2P'; font-size:10px; color:var(--cyan); width:26px; }
  .lname{ flex:1; font-family:'Orbitron'; }
  .lrow b{ font-family:'Orbitron'; color:var(--magenta); }

  /* skins */
  .sgrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .scard{ border:2px solid #2a2150; border-radius:10px; padding:10px; display:flex; flex-direction:column; align-items:center; gap:7px; background:rgba(20,10,40,.5); }
  .sprev{ font-size:46px; height:54px; display:flex; align-items:center; justify-content:center; }
  .sname{ font-family:'Press Start 2P'; font-size:8px; text-align:center; line-height:1.4; }
  .sbuy{ width:100%; font-family:'Press Start 2P'; font-size:8px; border:2px solid; border-radius:7px; padding:9px 2px; }
  .sbuy:disabled{ opacity:.45; }

  /* toast */
  /* === ANCHOR: TOAST === */
  .xz-toast{ position:fixed; left:50%; top:84px; transform:translate(-50%,-12px); z-index:60;
    font-family:'Press Start 2P'; font-size:9px; color:#fff; background:rgba(7,3,24,.92);
    border:2px solid var(--toxic); border-radius:8px; padding:10px 14px; opacity:0; transition:all .3s; pointer-events:none; max-width:88vw; text-align:center; }
  .xz-toast.show{ opacity:1; transform:translate(-50%,0); }

  /* mega NO MERCY banner */
  #banner.mega{ font-size:34px; color:var(--toxic);
    text-shadow:3px 3px 0 var(--magenta), 6px 6px 0 #5a1a8a, 0 0 26px var(--toxic); }

  /* === ANCHOR: NARROW-VIEWPORT SCALE === */
  /* Aspect-aware zoom-out for the HTML menu/UI (the 3D scene is scaled by the camera
     FOV in index.html). On narrow phones the hero art + type scale down proportionally
     so the whole menu fits without clipping the top elements; on short screens the
     vertical rhythm tightens so the centered column stays inside the viewport. */
  @media (max-width:400px){
    #heroImg{ width:170px; max-width:48vw; }
    .game-title{ font-size:15px; }
    .orient-hint{ font-size:10px; }
    .btn{ font-size:11px; padding:15px 20px; }
    .btn.small{ font-size:8px; padding:10px 14px; }
    .go-title{ font-size:20px; }
    .go-rank-cur{ font-size:11px; }
    #startScreen{ padding-top:calc(64px + env(safe-area-inset-top)); }
    #tabbar .tab{ font-size:7px; padding:10px 1px; }
  }
  @media (max-height:640px){
    #heroImg{ width:130px; margin-bottom:0; }
    .go-buttons{ margin-top:16px; gap:8px; }
    .panelInner{ max-height:74vh; }
  }

  /* === ANCHOR: LANDSCAPE-SPLIT === */
  /* Mobile landscape (short viewport): stop stacking the start menu vertically — which
     would push the buttons off a short landscape screen and force scrolling — and lay it
     out side-by-side instead: the hero art fills the LEFT half, and the subtitle, tagline,
     options and action buttons sit tightly on the RIGHT half. Everything is constrained
     within 100vh (overflow hidden on the row; the right column caps at 100vh with an
     auto-scroll safety net) so the player never has to scroll to reach START. */
  @media (orientation:landscape) and (max-height:600px){
    /* padding-top clears the fixed tabbar so the menu never sits under it */
    #startScreen{ flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:center;
      gap:22px; padding:8px 22px; padding-top:calc(58px + env(safe-area-inset-top)); overflow:hidden; }
    #startScreen .heroWrap{ flex:0 1 42%; max-width:42%; max-height:96vh; justify-content:center; }
    #startScreen .game-title{ font-size:13px; margin-bottom:5px; }
    #startScreen .heroWrap #heroImg{ width:auto; max-width:100%; max-height:72vh; margin:0; }
    /* flex-start (not center) so overflow never pushes START up under the tabbar — it stays
       reachable at the top and the column just scrolls if a short screen can't fit it all. */
    #startScreen .startCol{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
      flex:1 1 52%; max-width:440px; max-height:calc(100vh - 66px); overflow-y:auto; gap:4px; text-align:center; }
    #startScreen #startBtn{ font-size:11px; padding:11px 18px; }
    #startScreen #connectBtn{ margin-top:6px !important; font-size:7px; padding:8px 10px; }
    #startScreen .wallet, #startScreen .status-line{ font-size:8px; margin-top:3px; min-height:0; }
    /* keep the invite + Telegram CTAs compact so the whole column fits a short landscape screen */
    #startScreen .btn.small{ font-size:7px; padding:8px 12px; max-width:230px; }
    #startScreen #mainInvite, #startScreen #joinTgBtn{ margin-top:8px !important; }
    #startScreen .invite-hint{ font-size:7px; margin-top:3px; }
    /* In the split layout the action buttons live on the RIGHT, so move the floating
       sound/tilt toggles to the bottom-LEFT (over the non-interactive hero art) where
       they stay completely clear of the menu buttons and wallet text. */
    #soundBtn{ left:14px; right:auto; }
    #tiltBtn{ left:14px; right:auto; }

    /* GAME OVER, landscape: compress everything onto one screen (no scrolling) — stats
       and buttons flow horizontally, type tightens, and the overlay clips overflow. */
    #gameOverScreen{ padding:8px 20px; padding-top:calc(8px + env(safe-area-inset-top)); overflow:hidden; }
    #gameOverScreen .go-title{ font-size:18px; margin-bottom:6px; }
    #gameOverScreen .go-rank{ margin-bottom:8px; }
    #gameOverScreen .go-rank-cur{ font-size:11px; }
    #gameOverScreen .go-stats{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:6px 20px; }
    #gameOverScreen .stat{ font-size:11px; margin:2px 0; }
    #gameOverScreen .stat .num{ font-size:16px; }
    #gameOverScreen .go-buttons{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:12px; }
    #gameOverScreen .go-buttons .btn{ font-size:10px; padding:11px 16px; margin-top:0 !important; }
  }

  /* Rotate-to-landscape nudge: only for touch players still in portrait. */
  @media (pointer:coarse) and (orientation:portrait){
    .orient-hint{ display:block; }
  }

  /* === ANCHOR: GAME-FEEL UI === */
  /* Combo decay bar — under the combo text in the HUD; width/colour set each frame. */
  #comboBar{ width:74px; height:4px; margin-top:3px; border-radius:3px; background:rgba(255,255,255,.14);
    overflow:hidden; opacity:0; transition:opacity .2s; }
  #comboBar i{ display:block; height:100%; width:100%; background:var(--toxic); border-radius:3px;
    transition:width .08s linear, background .2s; }

  /* First-run tutorial overlay */
  #tutorial{ position:fixed; inset:0; z-index:55; display:flex; align-items:center; justify-content:center;
    background:rgba(7,3,24,.55); opacity:0; transition:opacity .25s; pointer-events:auto; }
  #tutorial.show{ opacity:1; }
  .tut-card{ background:rgba(10,6,25,.94); border:2px solid var(--toxic); border-radius:14px; padding:20px 24px;
    font-family:'Orbitron',sans-serif; color:#fff; max-width:300px; text-align:center; box-shadow:0 0 30px rgba(57,255,122,.4); }
  .tut-row{ font-size:13px; margin:8px 0; letter-spacing:.4px; }
  .tut-ic{ font-size:18px; margin-right:6px; }
  .tut-tip{ font-size:11px; opacity:.85; margin-top:12px; }
  .tut-tip b.good{ color:var(--magenta); } .tut-tip b.bad{ color:var(--cyan); }
  .tut-dismiss{ margin-top:14px; font-family:'Press Start 2P'; font-size:9px; color:var(--toxic);
    animation:blink 1s steps(2,start) infinite; }

  /* Full-screen rank-up celebration flash */
  #rankFlash{ position:fixed; inset:0; z-index:54; display:flex; align-items:center; justify-content:center;
    pointer-events:none; opacity:0; }
  #rankFlash.show{ animation:rankPop 1.5s ease-out forwards; }
  #rankFlashTxt{ font-family:'Press Start 2P'; font-size:22px; color:var(--gold); text-align:center;
    text-shadow:0 0 18px var(--gold), 0 0 42px var(--magenta);
    background:radial-gradient(ellipse at center, rgba(255,210,63,.18) 0%, rgba(0,0,0,0) 70%); padding:46px 28px; }
  @keyframes rankPop{ 0%{opacity:0;transform:scale(.5)} 15%{opacity:1;transform:scale(1.16)}
    70%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1.3)} }

  /* Daily-challenge streak line + rank-locked skin card */
  .dailyTop{ display:flex; justify-content:space-between; align-items:center; font-family:'Orbitron';
    font-size:12px; color:var(--gold); margin:2px 0 8px; padding:0 2px; }
  .dailyTop b{ color:#fff; }
  .scard.locked{ opacity:.9; }
  @media (max-width:400px){ #rankFlashTxt{ font-size:17px; } }

  /* ---- FORCE-LANDSCAPE overlay: animated "rotate your device" gate for phones ----
     Hidden by default; the forceLandscape() script adds .show while a phone is in portrait. */
  #rotateOverlay{ position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center;
    text-align:center; background:radial-gradient(120% 90% at 50% 42%, #1a0f43 0%, var(--void) 72%); }
  #rotateOverlay.show{ display:flex; }
  .ro-inner{ padding:24px; }
  .ro-phone{ position:relative; width:60px; height:104px; margin:0 auto 30px; border:4px solid var(--cyan);
    border-radius:13px; box-shadow:0 0 20px rgba(33,230,255,.65), inset 0 0 12px rgba(33,230,255,.25);
    transform-origin:50% 50%; animation:roRotate 2.4s ease-in-out infinite; }
  .ro-dot{ position:absolute; left:50%; top:8px; transform:translateX(-50%); width:20px; height:4px;
    border-radius:2px; background:var(--cyan); opacity:.75; }
  @keyframes roRotate{ 0%,18%{transform:rotate(0)} 48%,72%{transform:rotate(-90deg)} 100%{transform:rotate(0)} }
  .ro-title{ font-family:'Press Start 2P','Orbitron',sans-serif; font-size:15px; letter-spacing:1px; color:#fff;
    text-shadow:0 0 12px var(--cyan), 0 0 30px rgba(33,230,255,.5); }
  .ro-sub{ margin-top:12px; font-family:'Orbitron',sans-serif; font-size:11px; letter-spacing:1px; color:#9fb6c9; }

  /* ================= GROWTH LAYER: pump banner, daily run, share card =========
     Added alongside the SHARE CARD / DAILY RUG RUN / PUMP MODE features in game.js.
     All three mount on the start screen inside .startCol, so they inherit its
     centred column layout in both portrait and the landscape split. */

  /* ---- PUMP MODE: live $XZILLA chart strip -------------------------------- */
  .pumpBanner{ margin-top:14px; width:100%; max-width:300px; border:2px solid #1f1840; border-radius:10px;
    padding:10px 12px; background:rgba(10,3,38,.55); text-align:center; }
  .pumpMode{ font-family:'Press Start 2P'; font-size:10px; letter-spacing:1px; line-height:1.6; }
  .pumpNote{ font-family:'Orbitron',sans-serif; font-size:9px; letter-spacing:.5px; color:#9fb6c9; margin-top:5px; line-height:1.5; }
  .pumpRow{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:7px;
    font-family:'Orbitron',sans-serif; font-size:10px; letter-spacing:1px; color:#9fb6c9; }
  .pumpRow b{ font-size:12px; }
  .pumpMc{ opacity:.75; }

  /* ---- DAILY RUG RUN card ------------------------------------------------- */
  .dailyCard{ margin-top:14px; width:100%; max-width:300px; border:2px solid var(--cyan); border-radius:10px;
    padding:12px; background:rgba(33,230,255,.06); text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:8px; }
  .dailyCard:empty{ display:none; }
  .dailyHead{ font-family:'Press Start 2P'; font-size:10px; letter-spacing:1px; color:var(--cyan);
    text-shadow:0 0 10px rgba(33,230,255,.6); line-height:1.6; }
  .dailySub{ font-family:'Orbitron',sans-serif; font-size:9px; letter-spacing:.5px; color:#9fb6c9; line-height:1.5; }
  .dailySub.dim{ opacity:.65; }
  .dailyScore{ font-family:'Press Start 2P'; font-size:22px; color:var(--gold); text-shadow:0 0 14px rgba(255,210,63,.7); }
  .dailyScore span{ font-size:9px; color:#9fb6c9; text-shadow:none; margin-left:5px; }
  /* Shared header row for the daily + sign-in cards: title left, status right, one line
     instead of two. Used by renderDailyCard() and renderLoginCard(). */
  .cardTop{ width:100%; display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
  .cardTop .dailySub, .cardTop .loginSub{ white-space:nowrap; flex:0 0 auto; }
  /* Titles must not wrap — at 300px wide the countdown otherwise pushes them to two lines. */
  .cardTop .dailyHead, .cardTop .loginHead{ white-space:nowrap; font-size:9px; }
  .dailyDone{ display:flex; align-items:baseline; gap:10px; }
  .dailyScore{ line-height:1.1; }
  .dailyRank{ font-family:'Press Start 2P'; font-size:8px; color:var(--gold); white-space:nowrap; }
  /* cyan variant of the primary CTA, so DAILY reads as distinct from the green START */
  .btn.daily{ background:linear-gradient(135deg,#21e6ff,#2a7bff); color:#04131a; font-size:11px; padding:14px 20px;
    box-shadow:0 0 22px rgba(33,230,255,.55), inset 0 -4px 0 rgba(0,0,0,.22); }

  /* ---- verified holder badge on leaderboard rows -------------------------- */
  /* Rendered ONLY from the Worker's server-side balance check — see holderBadge(). */
  .hbadge{ display:inline-block; font-family:'Orbitron',sans-serif; font-size:8px; letter-spacing:.5px;
    border:1px solid; border-radius:4px; padding:1px 4px; margin-left:5px; vertical-align:middle; white-space:nowrap; }

  /* ---- share-card preview overlay ----------------------------------------- */
  #cardPreview{ z-index:9500; background:rgba(4,2,14,.92); }
  #cardPreview.hidden{ display:none; }
  .cardWrap{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:18px; max-width:min(94vw,760px); }
  .cardWrap img{ width:100%; height:auto; border-radius:12px; border:2px solid var(--cyan);
    box-shadow:0 0 30px rgba(33,230,255,.4); }
  .cardBtns{ display:flex; flex-direction:column; align-items:center; gap:10px; }
  /* Landscape phones: keep the whole card + its buttons on screen without scrolling. */
  @media (orientation:landscape) and (max-height:520px){
    .cardWrap{ flex-direction:row; max-width:96vw; gap:16px; }
    .cardWrap img{ max-height:78vh; width:auto; }
  }

  /* ---- sign-in card (web players; hidden inside Telegram) ------------------ */
  .loginCard{ margin-top:14px; width:100%; max-width:300px; border:2px solid var(--magenta); border-radius:10px;
    padding:12px; background:rgba(255,43,214,.07); text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:8px; }
  .loginCard:empty{ display:none !important; }
  .loginHead{ font-family:'Press Start 2P'; font-size:10px; letter-spacing:1px; color:var(--magenta);
    text-shadow:0 0 10px rgba(255,43,214,.6); line-height:1.6; }
  .loginSub{ font-family:'Orbitron',sans-serif; font-size:9px; letter-spacing:.5px; color:#9fb6c9; line-height:1.5; }
  .loginSub.dim{ opacity:.65; }
  .loginWho{ font-family:'Orbitron',sans-serif; font-size:13px; color:#fff; word-break:break-all; }
  .loginWho span{ font-size:9px; color:#9fb6c9; }
  .btn.wallet-login{ background:linear-gradient(135deg,#ff2bd6,#8b2bff); color:#fff; font-size:10px; padding:14px 18px;
    box-shadow:0 0 22px rgba(255,43,214,.5), inset 0 -4px 0 rgba(0,0,0,.22); }
  /* second line inside a .btn — the what-happens-next note under a button's label */
  .btnHint{ display:block; font-family:'Orbitron',sans-serif; font-size:8px; letter-spacing:.4px;
    line-height:1.5; margin-top:6px; opacity:.82; text-transform:none; }
  /* ---- provider picker: one icon tile per login method --------------------
     Four stacked full-width buttons pushed the sheet past the fold on a phone in
     landscape; as icons the whole choice fits on one row and reads at a glance. */
  .loginGrid{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px; width:100%; margin:2px 0 2px; }
  .ltile{ position:relative; width:70px; min-height:74px; padding:9px 4px 7px; border-radius:12px; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); color:#fff;
    transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
  .ltile:hover{ transform:translateY(-2px); }
  .ltile:active{ transform:translateY(0) scale(.97); }
  .ltile[disabled]{ opacity:.55; cursor:default; transform:none; }
  .ltile.busy .lico{ animation:ltilePulse .9s ease-in-out infinite; }
  @keyframes ltilePulse{ 50%{ opacity:.35; } }
  .lico{ display:flex; align-items:center; justify-content:center; height:28px; }
  .llab{ font-family:'Press Start 2P'; font-size:6.5px; letter-spacing:.5px; color:#dfeaf5; line-height:1; }
  /* the wallet's ×2 payoff, marked on the tile itself */
  .lbadge{ position:absolute; top:-6px; right:-4px; font-family:'Press Start 2P'; font-size:7px; padding:3px 4px;
    border-radius:6px; background:var(--gold); color:#1a1206; box-shadow:0 0 10px rgba(255,210,63,.55); }
  .tl-wallet{ border-color:rgba(255,43,214,.75); background:linear-gradient(150deg,rgba(255,43,214,.28),rgba(139,43,255,.22));
    box-shadow:0 0 16px rgba(255,43,214,.32); }
  .tl-discord{ border-color:rgba(88,101,242,.8); background:rgba(88,101,242,.22); box-shadow:0 0 14px rgba(88,101,242,.28); }
  .tl-telegram{ border-color:rgba(34,158,217,.85); background:rgba(34,158,217,.22); box-shadow:0 0 14px rgba(34,158,217,.28); }
  .tl-google{ border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.09); }
  .tl-google .lico{ overflow:hidden; }
  /* GIS ships a 40px circle; nudge it down to match the other tiles' 28px glyphs. */
  .tl-google #gsiButton{ transform:scale(.78); transform-origin:center; }
  /* the wallet's payoff, stated where the wallet button actually is */
  .loginPerk{ font-family:'Orbitron',sans-serif; font-size:9px; line-height:1.6; letter-spacing:.3px;
    color:var(--gold); border:1px solid rgba(255,210,63,.45); background:rgba(255,210,63,.08);
    border-radius:8px; padding:7px 10px; }
  .gold{ color:var(--gold); }
  /* GIS renders its own iframe button; keep it from overflowing the card on narrow phones. */
  #gsiButton{ max-width:100%; overflow:hidden; display:flex; justify-content:center; }
  /* Discriminator shown after a board name only when that name is duplicated in the
     visible list — Google logins provide a first name, not a unique handle. */
  .ltag{ font-family:'Orbitron',sans-serif; font-size:9px; color:#9fb6c9; opacity:.7; margin-left:3px; }
  /* Turnstile widget inside the sign-in card. Only rendered when a sitekey is set. */
  .tsWidget{ margin-top:4px; min-height:0; display:flex; justify-content:center; max-width:100%; overflow:hidden; }