:root{
    --bg:#05060c;--ink:#eef0ff;--muted:#8a90b8;
    --clay:#d97757;--blue:#7c8cff;--mint:#54e6b5;--pink:#ff5fa2;--gold:#ffd95e;
    --mono:ui-monospace,'Cascadia Code','Consolas',monospace;
    --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--sans);user-select:none;
    touch-action:none;overscroll-behavior:none}   /* kill pull-to-refresh / scroll-bounce during play */
  #game {
  position: fixed;
  inset: 0;
  display: block;
  cursor: crosshair;
  background-color: #05060c;
}

  .panel{position:fixed;pointer-events:none;z-index:5}
  #hud{top:0;left:0;right:0;padding:16px 20px;display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
  .stat{font-family:var(--mono);font-size:13px;color:var(--muted);letter-spacing:.04em}
  .stat b{display:block;font-size:22px;color:var(--ink);font-weight:800;letter-spacing:-.02em;font-family:var(--sans)}
  .stat.r{text-align:right}

  #bars{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);width:min(520px,82vw);z-index:5;pointer-events:none}
  .bar{height:12px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;border:1px solid rgba(255,255,255,.08);position:relative}
  .bar+.bar{margin-top:8px;height:8px}
  .fill{height:100%;width:100%;transition:width .18s}
  #hpfill{background:linear-gradient(90deg,var(--pink),var(--clay))}
  #xpfill{background:linear-gradient(90deg,var(--blue),var(--mint));width:0%}
  .barlabel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:rgba(255,255,255,.85);text-transform:uppercase}

  /* weapon loadout pips */
  #loadout{position:fixed;left:20px;bottom:64px;z-index:5;display:flex;flex-direction:column;gap:6px;pointer-events:none}
  #minimap{position:fixed;right:14px;bottom:14px;z-index:5;width:160px;height:160px;display:none;pointer-events:none;
    border:1px solid rgba(124,140,255,.4);border-radius:8px;background:rgba(8,9,16,.6)}
  body.playing #minimap{display:block}
  .wpip{font-family:var(--mono);font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px;opacity:.9}
  .wpip i{font-style:normal;font-size:15px}
  .wpip b{color:var(--ink)}

  /* safe center: center the stack when it fits, but fall back to top-aligned + scrollable when it
   * overflows (plain center clips+locks the top of tall menus — e.g. the achievements panel). */
  .overlay{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:safe center;
    background:radial-gradient(circle at 50% 45%,rgba(10,11,22,.72),rgba(5,6,12,.94));backdrop-filter:blur(4px);text-align:center;padding:18px;overflow-y:auto}
  .overlay.hidden{display:none}
  .title{font-size:clamp(2.6rem,9vw,5.4rem);font-weight:900;letter-spacing:-.05em;line-height:.9;
    background:linear-gradient(110deg,var(--clay),var(--blue) 55%,var(--mint));-webkit-background-clip:text;background-clip:text;color:transparent;
    background-size:200% auto;animation:sh 5s linear infinite}
  @keyframes sh{to{background-position:200% center}}
  .tag{color:var(--muted);margin-top:14px;max-width:48ch;font-size:1.02rem;line-height:1.5}
  .keys{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap;justify-content:center}
  .key{font-family:var(--mono);font-size:13px;padding:8px 14px;border:1px solid rgba(255,255,255,.14);border-radius:9px;color:var(--ink);background:rgba(255,255,255,.04)}
  .btn{margin-top:34px;pointer-events:auto;cursor:pointer;border:none;font-family:var(--sans);font-weight:800;font-size:18px;
    padding:16px 40px;border-radius:14px;color:#1a0f0a;background:linear-gradient(120deg,var(--clay),var(--gold));
    box-shadow:0 14px 40px rgba(217,119,87,.4);transition:transform .15s,box-shadow .15s;letter-spacing:.02em;will-change:transform}
  .btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 20px 50px rgba(217,119,87,.55)}
  .btn:active{transform:translateY(1px) scale(.99)}
  /* primary actions row: PLAY + MULTIPLAYER side by side */
  .startactions{margin-top:28px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center}
  .startactions .btn{margin-top:0}
  /* secondary button: outlined, cyan accent — visually subordinate to the gold PLAY */
  .btn2{background:rgba(84,230,255,.08);color:var(--ink);border:1px solid rgba(84,230,255,.45);
    box-shadow:none;font-size:15px;padding:15px 26px}
  .btn2:hover{background:rgba(84,230,255,.16);box-shadow:0 12px 30px rgba(84,230,255,.25)}
  /* keyboard/controller focus rings — invisible to mouse users, accessible to everyone else */
  .btn:focus-visible,.menubtn:focus-visible,.diff:focus-visible,.upg:focus-visible,.qcyes:focus-visible,.qcno:focus-visible,.quitbtn:focus-visible,#sound:focus-visible{
    outline:2px solid var(--mint);outline-offset:3px}
  .diffsel{display:flex;gap:10px;margin-top:30px}
  .diff{font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.08em;cursor:pointer;pointer-events:auto;
    padding:11px 22px;border-radius:11px;color:var(--muted);background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.12);transition:.18s}
  .diff:hover{color:var(--ink);border-color:rgba(255,255,255,.3)}
  .diff.on{color:#0b0c12;background:var(--dc,#ffd95e);border-color:var(--dc,#ffd95e)}
  .diffhint{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:13px;min-height:16px}

  /* main-menu info panels */
  #start .title{font-size:clamp(1.7rem,5.5vw,3.4rem)}
  #start .tag{margin-top:10px;font-size:.92rem;line-height:1.4;max-width:56ch}
  /* responsive grid: 4 panels across on desktop → 2×2 on mid widths → 1 col on mobile, no wrap-orphans */
  .menupanels{display:grid;grid-template-columns:repeat(auto-fit,minmax(208px,1fr));gap:14px;margin-top:24px;
    max-width:1120px;width:100%;align-items:start}
  .mpanel{min-width:0;border:1px solid rgba(255,255,255,.1);border-radius:14px;
    padding:15px 16px;background:rgba(255,255,255,.025);text-align:left}
  .mptitle{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);margin-bottom:13px;font-weight:700}
  .legend{display:flex;flex-direction:column;gap:11px}
  .legrow{display:flex;align-items:flex-start;gap:10px}
  .legrow .lico{font-size:19px;width:22px;text-align:center;flex-shrink:0}
  .legrow .ltext b{display:block;font-size:13px;color:var(--ink);font-weight:700;line-height:1.3}
  .legrow .ltext span{font-size:11.5px;color:var(--muted);line-height:1.35}
  .lb{display:flex;flex-direction:column;gap:8px}
  .lbrow{display:flex;align-items:baseline;gap:9px;font-family:var(--mono)}
  .lbrow .rank{color:var(--muted);width:16px;font-size:12px}
  .lbrow .sc{color:var(--gold);font-weight:700;min-width:54px;font-size:14px}
  .lbrow .meta{color:var(--muted);font-size:11px}
  .lb .empty{color:var(--muted);font-family:var(--mono);font-size:12px;line-height:1.5}
  /* loading skeleton: shimmer bars that resolve instantly once the prefetched board lands */
  .lbrow.skel .sc{min-width:54px;height:12px;border-radius:3px}
  .lbrow.skel .meta{flex:1;height:10px;border-radius:3px;max-width:160px}
  .lbrow.skel .sc,.lbrow.skel .meta{background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.14) 37%,rgba(255,255,255,.05) 63%);
    background-size:400% 100%;animation:lbshimmer 1.2s ease-in-out infinite}
  @keyframes lbshimmer{0%{background-position:100% 0}100%{background-position:0 0}}
  @media (prefers-reduced-motion:reduce){.lbrow.skel .sc,.lbrow.skel .meta{animation:none}}
  .menubtn{margin-top:16px;pointer-events:auto;cursor:pointer;background:none;border:none;
    font-family:var(--mono);font-size:13px;color:var(--muted);text-decoration:underline;letter-spacing:.05em}
  .menubtn:hover{color:var(--ink)}
  /* achievements grid (main-menu panel) — locked rows dimmed, unlocked glow gold */
  .achlist{display:flex;flex-direction:column;gap:9px;max-height:200px;overflow-y:auto;padding-right:4px}
  .achrow{display:flex;align-items:center;gap:10px;opacity:.4;transition:opacity .2s}
  .achrow.got{opacity:1}
  .achrow .achico{font-size:18px;width:24px;text-align:center;flex-shrink:0}
  .achrow .achtext{flex:1;min-width:0}
  .achrow .achtext b{display:block;font-size:12.5px;color:var(--ink);font-weight:700;line-height:1.3}
  .achrow .achtext span{font-size:11px;color:var(--muted);line-height:1.3}
  .achrow.got .achmark{color:var(--gold)}
  .achrow .achmark{font-size:13px;flex-shrink:0}
  /* global leaderboard — difficulty tabs */
  .gtabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
  .gtab{flex:1 1 auto;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;cursor:pointer;pointer-events:auto;
    padding:7px 10px;border-radius:8px;color:var(--muted);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.12);transition:.15s}
  .gtab:hover{color:var(--ink);border-color:rgba(255,255,255,.3)}
  .gtab.on{color:#0b0c12;background:var(--gold);border-color:var(--gold)}
  .editname{float:right;cursor:pointer;pointer-events:auto;background:none;border:1px solid rgba(255,255,255,.16);
    color:var(--muted);font-family:var(--mono);font-size:10px;letter-spacing:.06em;padding:3px 8px;border-radius:7px;transition:.15s}
  .editname:hover{color:var(--ink);border-color:rgba(255,255,255,.4)}
  /* username onboarding modal */
  .unamebox{margin-top:22px;width:min(92vw,360px);display:flex;flex-direction:column;align-items:center;gap:10px}
  .unamebox input{width:100%;font-family:var(--mono);font-size:18px;letter-spacing:.06em;text-align:center;color:var(--ink);
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:14px 16px;outline:none;transition:border-color .15s}
  .unamebox input:focus{border-color:var(--mint)}
  /* access-code field: arcade-styled, set apart from the name/email inputs — wide-tracked tabular glyphs
   * read as a "secure uplink" code; gold focus glow ties it to the menu's clay→gold action buttons. The
   * reveal anim replays each time _setShown un-hides it (display:none→'' restarts CSS animations). */
  #authcode{font-size:24px;letter-spacing:.5em;font-variant-numeric:tabular-nums;font-weight:700;
    padding-left:calc(16px + .5em);text-transform:uppercase;animation:codeReveal .26s cubic-bezier(.2,.9,.3,1)}
  #authcode:focus{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 8px 30px rgba(255,217,94,.22)}
  #authcode::placeholder{letter-spacing:.06em;font-size:16px;text-transform:none;color:var(--muted)}
  @keyframes codeReveal{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
  .unameerr{min-height:16px;margin-top:9px;font-family:var(--mono);font-size:12px;color:var(--pink)}
  .credit{position:fixed;bottom:16px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:11px;color:var(--muted);z-index:21;letter-spacing:.06em}
  .gostat{font-family:var(--mono);color:var(--mint);margin-top:8px;font-size:15px}
  .gostat .big{font-size:2.4rem;color:var(--ink);font-weight:900;font-family:var(--sans)}
  .hi{color:var(--gold)}
  .gofeedback{margin-top:12px;font-family:var(--mono);font-size:13px;line-height:1.4;min-height:16px;letter-spacing:.03em}
  .gofeedback.qualified{color:var(--mint)}
  .gofeedback.missed{color:var(--pink)}
  .gofeedback.offline{color:var(--muted)}

  #levelup{position:fixed;inset:0;z-index:25;display:none;flex-direction:column;align-items:center;justify-content:center;
    background:radial-gradient(circle at 50% 40%,rgba(12,14,28,.82),rgba(5,6,12,.96));backdrop-filter:blur(6px);padding:24px}
  #levelup.show{display:flex;animation:fade .25s}
  @keyframes fade{from{opacity:0}}
  .luhead{font-size:clamp(1.6rem,5vw,2.6rem);font-weight:900;letter-spacing:-.03em;margin-bottom:6px}
  .lusub{color:var(--muted);font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:30px}
  .cards{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;max-width:840px}
  .upg{width:230px;pointer-events:auto;cursor:pointer;border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:26px 22px;
    background:rgba(255,255,255,.03);text-align:left;transition:transform .2s,background .2s,border-color .2s,box-shadow .2s;position:relative;overflow:hidden;
    will-change:transform;animation:upgin .32s cubic-bezier(.2,.7,.3,1) backwards}
  /* staggered entrance — cards rise in sequence each level-up; `backwards` fill keeps hover lift working after */
  .upg:nth-child(2){animation-delay:.07s}
  .upg:nth-child(3){animation-delay:.14s}
  @keyframes upgin{from{opacity:0;transform:translateY(16px) scale(.96)}}
  .upg:hover{transform:translateY(-8px);background:rgba(255,255,255,.07);border-color:var(--c);box-shadow:0 18px 44px rgba(0,0,0,.45)}
  .upg::after{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c)}
  .upg .uico{font-size:30px;margin-bottom:14px}
  .upg h3{font-size:1.22rem;letter-spacing:-.01em;margin-bottom:8px}
  .upg p{color:var(--muted);font-size:.92rem;line-height:1.45}
  .upg .lvl{position:absolute;top:18px;right:20px;font-family:var(--mono);font-size:11px;color:var(--muted)}
  .upg .new{position:absolute;top:16px;right:18px;font-family:var(--mono);font-size:10px;font-weight:700;color:#1a0f0a;background:var(--c);padding:3px 7px;border-radius:6px;letter-spacing:.1em}

  #flash{position:fixed;inset:0;z-index:8;pointer-events:none;background:var(--pink);opacity:0;mix-blend-mode:screen}
  #sound{position:fixed;bottom:16px;right:18px;z-index:22;pointer-events:auto;cursor:pointer;
    font-family:var(--mono);font-size:12px;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
    border-radius:8px;padding:5px 10px;display:none}
  #sound.show{display:block}

  /* pause screen */
  .pstats{display:grid;grid-template-columns:repeat(3,minmax(86px,auto));gap:18px 44px;margin-top:26px}
  .pstat{text-align:center}
  .pstat b{display:block;font-size:1.8rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
  .pstat span{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
  .pttl{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--clay);margin-top:34px;font-weight:700}
  .pbuild{margin-top:14px;max-width:600px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
  .pchip{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12.5px;color:var(--ink);
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:5px 11px}
  .pchip i{font-style:normal;font-size:14px}
  .pchip b{color:var(--gold)}
  .pbuild .none{color:var(--muted);font-family:var(--mono);font-size:13px}
  /* compact menus so they fit any screen without scrolling */
  .keys{margin-top:14px}
  .diffsel{margin-top:16px}
  .menupanels{margin-top:16px}
  .btn{margin-top:18px}
  .mpanel{padding:12px 14px}
  .pstats{margin-top:16px;gap:10px 30px}
  .pstat b{font-size:1.5rem}
  .pttl{margin-top:16px}
  .pbuild{margin-top:8px}
  .pchip{padding:4px 9px;font-size:11.5px}
  /* hide the cursor during active play (keyboard-controlled) */
  body.playing,body.playing #game{cursor:none}
  .quitbtn{margin-top:14px;pointer-events:auto;cursor:pointer;background:none;
    border:1px solid rgba(255,80,110,.45);color:#ff6072;font-family:var(--mono);font-size:13px;
    padding:9px 18px;border-radius:9px;letter-spacing:.04em;transition:.18s}
  .quitbtn:hover{background:rgba(255,80,110,.14);border-color:#ff6072}
  .quitconfirm{display:none;margin-top:18px;max-width:440px;border:1px solid rgba(255,80,110,.55);
    background:rgba(36,8,14,.72);border-radius:14px;padding:18px 20px;pointer-events:auto}
  .quitconfirm.show{display:block;animation:fade .2s}
  .quitconfirm p{color:#ffd2d8;font-size:14px;line-height:1.55}
  .quitconfirm b{color:#ff9aa6}
  .qcbtns{display:flex;gap:10px;margin-top:16px;justify-content:center;flex-wrap:wrap}
  .qcyes{cursor:pointer;pointer-events:auto;border:none;background:#ff3b5c;color:#fff;font-weight:800;
    font-family:var(--sans);font-size:14px;padding:11px 20px;border-radius:10px;transition:.15s}
  .qcyes:hover{background:#ff5f7a}
  .qcno{cursor:pointer;pointer-events:auto;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);
    color:var(--ink);font-weight:700;font-family:var(--sans);font-size:14px;padding:11px 20px;border-radius:10px;transition:.15s}
  .qcno:hover{border-color:#54e6b5;color:#54e6b5}

  /* low-health red border vignette — pulse runs on the compositor (was a per-frame JS opacity write).
     JS just sets --sev (0..1 severity) and toggles .danger; the keyframe handles the heartbeat. */
  #lowhp{position:fixed;inset:0;z-index:7;pointer-events:none;opacity:0;transition:opacity .25s;
    background:radial-gradient(ellipse at center,transparent 52%,rgba(255,38,72,.55) 100%);
    box-shadow:inset 0 0 120px 20px rgba(255,30,60,.45)}
  #lowhp.danger{animation:lowpulse 1.1s ease-in-out infinite}
  @keyframes lowpulse{0%,100%{opacity:calc(var(--sev,.5)*.5+.12)}50%{opacity:calc(var(--sev,.5)*.85+.15)}}

  /* item-spawn toast */
  #toast{position:fixed;top:74px;left:50%;transform:translateX(-50%) translateY(-14px);z-index:9;pointer-events:none;
    display:flex;align-items:center;gap:10px;padding:10px 18px;border-radius:12px;opacity:0;
    font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.01em;
    background:rgba(12,14,26,.85);border:1px solid var(--tc,#fff);backdrop-filter:blur(6px);transition:opacity .3s,transform .3s;will-change:transform,opacity}
  #toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  #toast .tico{font-size:20px}
  #toast small{color:var(--muted);font-weight:600;font-size:12px;font-family:var(--mono)}

  /* dev FPS benchmark overlay (toggled with F3) */
  #perfhud{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:30;display:none;pointer-events:none;
    font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.04em;color:var(--mint);text-align:left;
    background:rgba(6,7,14,.82);border:1px solid rgba(84,230,181,.35);border-radius:8px;padding:5px 12px;
    white-space:pre;max-width:96vw;overflow:hidden}   /* pre: keep the 3 newline-joined lines; dev-only */
  #nethud{position:fixed;top:8px;left:8px;z-index:30;display:none;pointer-events:none;
    font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.04em;color:#7cc8ff;text-align:left;
    background:rgba(6,7,14,.82);border:1px solid rgba(84,230,255,.35);border-radius:8px;padding:5px 12px;
    white-space:pre;max-width:96vw;overflow:hidden}   /* F4 network overlay; dev-only */

  /* respect reduced-motion: drop the decorative looping animations */
  @media(prefers-reduced-motion:reduce){
    .title{animation:none}.upg{animation:none}#lowhp.danger{animation:none;opacity:calc(var(--sev,.5)*.7+.15)}}

  @media(max-width:520px){.upg{width:100%;max-width:300px}#loadout{bottom:60px}}

  /* ===== MOBILE: on-screen controls + responsive layout (gated by body.mobile, set in main.js) ===== */
  #joy,#mpause{display:none}                       /* hidden on desktop; revealed under body.mobile */
  #joy[hidden],#mpause[hidden]{display:none!important}
  body.mobile #joy{display:block;position:fixed;width:120px;height:120px;border-radius:50%;z-index:20;pointer-events:none;
    transform:translate(-50%,-50%);border:2px solid rgba(124,140,255,.35);background:rgba(124,140,255,.06)}
  #joynub{position:absolute;left:50%;top:50%;width:46px;height:46px;border-radius:50%;
    transform:translate(-50%,-50%);background:rgba(120,230,255,.5);box-shadow:0 0 16px rgba(120,230,255,.5)}
  body.mobile #mpause{display:flex;position:fixed;right:12px;z-index:22;   /* stacked just above the mute button, matching its palette */
    bottom:calc(max(12px,env(safe-area-inset-bottom)) + 52px);
    align-items:center;justify-content:center;width:44px;height:44px;border-radius:8px;pointer-events:auto;cursor:pointer;
    font-size:18px;color:var(--ink);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
  body.mobile #sound{bottom:max(12px,env(safe-area-inset-bottom));right:12px}   /* same trigger as #mpause so the pair aligns on wide touch tablets too */

  @media(max-width:820px){
    #hud{padding:10px 12px;gap:8px}
    .stat b{font-size:18px}
    #bars{width:min(520px,92vw);bottom:max(18px,env(safe-area-inset-bottom))}
    #loadout{left:10px;bottom:96px;transform:scale(.85);transform-origin:left bottom}
    .menupanels{flex-direction:column;gap:12px}    /* stack so panels never clip off-screen */
    .cards{flex-direction:column;align-items:center}/* level-up cards stack vertically */
    .upg{width:100%;max-width:300px}
    /* tall menus must never trap content off-screen: let every full-screen overlay scroll */
    .overlay,#levelup{justify-content:flex-start;overflow-y:auto;
      padding-top:max(20px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom))}
  }
  @media(max-width:820px) and (orientation:landscape){
    #bars{width:min(420px,60vw)}#loadout{bottom:70px}  /* phone landscape: reclaim vertical space */
  }
  /* very narrow phones: the 3-up pause grid overflows — drop to 2 columns */
  @media(max-width:380px){.pstats{grid-template-columns:repeat(2,1fr);gap:10px 18px}}
  /* touch devices: every interactive control meets the 44px minimum tap target */
  @media(pointer:coarse){
    .btn,.menubtn,.diff,.quitbtn,.qcyes,.qcno,.gtab,.editname,#sound,#unameok{min-height:44px}
    .menubtn{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px}
    .diff{padding:13px 22px}
    .editname{min-width:44px;display:inline-flex;align-items:center;justify-content:center}
    /* shift minimap top-left, clear of the bottom-right pause/mute buttons and the thumb-stick / #bars zones */
    #minimap{left:14px;top:max(64px,calc(env(safe-area-inset-top) + 60px));right:auto;bottom:auto;width:108px;height:108px}
  }