:root{
  --void:#05060d; --panel:#0b0e1c; --cyan:#36e6ff; --crimson:#ff2d6a;
  --gold:#ffd23f; --green:#7dff9d; --text:#e8ecff; --dim:#7b84ad; --line:#2a3158;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--void);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;color:var(--text)}
/* Pin the WebGL canvas behind every DOM overlay so it can't swallow clicks.
   Without this, the canvas sat in document flow and some browsers (and the
   in-IDE preview panel) routed pointer events to it instead of to the menus. */
canvas{
  display:block;
  position:fixed;
  inset:0;
  width:100vw;height:100vh;
  z-index:0;
  pointer-events:none;
}
body.desktopActive canvas{pointer-events:auto}
/* Bring the overlay tree forward of the canvas. */
#overlay,#loginOverlay,#pauseOverlay,#resultsOverlay,#linkOverlay,#leaderboardOverlay,#confirmOverlay,#historyOverlay{
  pointer-events:auto;
}
.big,.chip,.link,input,button,a{pointer-events:auto}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}

/* ─── shared dialog scaffolding ─────────────────────────────── */
.dialog,#overlay,#loginOverlay,#pauseOverlay,#resultsOverlay,#linkOverlay,#leaderboardOverlay,#confirmOverlay,#historyOverlay{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:center;overflow:auto;
  background:radial-gradient(ellipse at 50% 38%,#101633 0%,var(--void) 70%);
  transition:opacity .35s;
}
/* Explicit per-overlay stacking. Without these, #loginOverlay (which sits
   FIRST in DOM order) painted behind #overlay — so the "Sign in" click
   silently rendered the login card under the main menu and looked broken. */
#overlay            { z-index: 10; }
#confirmOverlay     { z-index: 30; }
#linkOverlay        { z-index: 32; }
#leaderboardOverlay { z-index: 32; }
#historyOverlay     { z-index: 32; }
#resultsOverlay     { z-index: 32; }
#pauseOverlay       { z-index: 34; }
#loginOverlay       { z-index: 40; }
#overlay{flex-direction:column;gap:16px}
#overlay.hidden,#loginOverlay.hidden,#pauseOverlay.hidden,
#resultsOverlay.hidden,#linkOverlay.hidden,#leaderboardOverlay.hidden,#confirmOverlay.hidden,#historyOverlay.hidden{
  display:none;
  opacity:0;
  pointer-events:none;
}

h1{font-size:clamp(40px,8vw,84px);font-weight:900;letter-spacing:.06em;line-height:1}
h1 .n,h2 .n{color:var(--cyan);text-shadow:0 0 24px var(--cyan),0 0 90px #36e6ff66}
h1 .s,h2 .s{color:var(--crimson);text-shadow:0 0 24px var(--crimson),0 0 90px #ff2d6a66}

.tag{color:var(--dim);letter-spacing:.35em;font-size:13px;text-transform:uppercase}

.row{display:flex;gap:36px;flex-wrap:wrap;justify-content:center;align-items:flex-start}
.col{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:240px}
.label{color:var(--dim);font-size:11px;letter-spacing:.3em;text-transform:uppercase}

.chipRow{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chip{
  background:transparent;border:1px solid var(--line);color:var(--dim);
  padding:8px 16px;border-radius:999px;font-size:13px;letter-spacing:.12em;
  cursor:pointer;text-transform:uppercase;transition:all .15s;
  font-family:inherit;
}
.chip:hover{color:var(--text);border-color:#3a4270}
.chip.sel{border-color:var(--cyan);color:var(--cyan);
  box-shadow:0 0 14px #36e6ff55, inset 0 0 14px #36e6ff22}

.btnRow{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.btnRow.secondary{margin-top:-6px}
.big{
  font-size:17px;font-weight:700;letter-spacing:.08em;padding:14px 32px;
  border-radius:12px;border:none;cursor:pointer;text-transform:uppercase;
  transition:transform .12s;font-family:inherit;color:var(--text);
  background:transparent;border:1px solid #3a4270;
}
.big:hover{transform:translateY(-2px)}
.big.primary{background:linear-gradient(135deg,#36e6ff,#3f7bff);color:#031018;
  box-shadow:0 0 30px #36e6ff55;border:none}
.big.ghost{opacity:.85}
.big:disabled{background:#1a2040;color:#566;box-shadow:none;cursor:not-allowed;
  transform:none;border-color:#1a2040}
.link{background:transparent;border:none;color:var(--cyan);
  text-decoration:underline;font-family:inherit;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;padding:6px 0}
.miniLink{
  background:transparent;border:none;color:var(--cyan);font:inherit;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
}
.miniLink:hover{text-decoration:underline}

#howto{max-width:620px;color:var(--dim);font-size:14px;line-height:1.7}
#howto b{color:var(--text)}
.c-red {color:var(--crimson)!important}
.c-cyan{color:var(--cyan)!important}

#xrNote{font-size:12px;color:#566;max-width:480px;min-height:1em}
#bestRow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  text-shadow:0 0 12px #ffd23f44;min-height:1em}

.mainLeaderboard{
  width:min(620px, 92vw);border:1px solid #2f3c6b;border-radius:12px;
  background:rgba(7,10,22,0.68);box-shadow:0 0 22px #36e6ff18;
  padding:10px 12px;display:flex;flex-direction:column;gap:8px;
}
.mainLbHead{
  display:flex;justify-content:space-between;align-items:center;
  color:var(--dim);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
}
.mainLbHead span{color:var(--cyan);text-shadow:0 0 10px #36e6ff55}
.mainLbList{display:grid;gap:5px}
.mainLbRow{
  display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;
  padding:7px 10px;border:1px solid #20294b;border-radius:8px;background:#070a16;
  font-size:12px;letter-spacing:.08em;
}
.mainLbRow .rank{color:var(--gold);font-weight:800;font-variant-numeric:tabular-nums}
.mainLbRow .name{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mainLbRow .score{color:var(--cyan);font-weight:800;font-variant-numeric:tabular-nums}
.mainLbEmpty{
  padding:9px;color:var(--dim);font-size:12px;letter-spacing:.1em;text-align:center;
}

#deskHud{position:fixed;left:0;right:0;bottom:14px;display:none;z-index:5;
  text-align:center;color:var(--dim);font-size:13px;letter-spacing:.06em;
  pointer-events:none}

/* Persistent "Back to menu" button shown during gameplay so desktop players
   never get trapped without a way out. High z-index keeps it on top. */
.backBtn{
  position:fixed;top:14px;left:14px;z-index:30;
  background:rgba(7,10,22,0.85);color:var(--text);
  border:1px solid var(--line);border-radius:999px;
  padding:8px 16px;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;font-family:inherit;cursor:pointer;
  transition:all .12s;backdrop-filter:blur(6px);
}
.backBtn:hover{border-color:var(--cyan);color:var(--cyan);
  box-shadow:0 0 14px #36e6ff44}
.backBtn.hidden{display:none}
.backBtn:active{transform:scale(.96)}

/* ─── universal motion polish ───────────────────────────────
   Tactile feedback on every clickable surface — press scales it down by 4%
   and adds a subtle inset glow. The `prefers-reduced-motion` block at the
   bottom switches all of this off for users who asked for it. */
.big,.chip,.link,.linkChip,.googleBtn,.backBtn,
.recentPlayer,.histRow{
  transition: transform .14s cubic-bezier(.4,.0,.2,1),
              background-color .14s ease,
              border-color .14s ease,
              color .14s ease,
              box-shadow .18s ease,
              opacity .15s ease;
}
.big:active,.chip:active,.linkChip:active,.googleBtn:active,
.backBtn:active,.recentPlayer:active,.histRow:active{
  transform:scale(.96);
}
.big.primary:hover{box-shadow:0 0 40px #36e6ff77,0 4px 18px #36e6ff33}
.big:focus-visible,.chip:focus-visible,.link:focus-visible,
.googleBtn:focus-visible,.linkChip:focus-visible,.backBtn:focus-visible,
.loginForm input:focus-visible{
  outline:2px solid var(--cyan);outline-offset:2px;
}

/* Overlay fade-in. Hidden state already does opacity:0; this adds the
   in-direction so menus feel weighty rather than snapping in. */
#overlay,#loginOverlay,#pauseOverlay,#resultsOverlay,#linkOverlay,#leaderboardOverlay,#confirmOverlay,#historyOverlay,
#loadingOverlay{
  animation:fadeUp .42s cubic-bezier(.2,.7,.2,1);
}
#overlay.hidden,#loginOverlay.hidden,#pauseOverlay.hidden,
#resultsOverlay.hidden,#linkOverlay.hidden,#leaderboardOverlay.hidden,#confirmOverlay.hidden,#historyOverlay.hidden,#loadingOverlay.hidden{
  animation:none;
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(8px) }
  to  { opacity:1; transform:none }
}

/* ─── shortcut hint panel ─────────────────────────────────── */
.hotkeyHint{
  position:fixed;right:18px;bottom:54px;z-index:25;
  background:rgba(7,10,22,0.92);border:1px solid var(--line);
  border-radius:14px;padding:14px 18px;backdrop-filter:blur(8px);
  display:flex;flex-direction:column;gap:8px;min-width:230px;
  font-size:12px;letter-spacing:.06em;color:var(--dim);
  box-shadow:0 0 24px #36e6ff22;
}
.hotkeyHint.hidden{display:none}
.hotkeyHint .khdr{
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--cyan);text-shadow:0 0 8px #36e6ff66;margin-bottom:2px;
}
.hotkeyHint .krow{display:flex;align-items:center;gap:10px;justify-content:space-between}
.hotkeyHint .krow span{color:var(--text);font-size:11px;text-align:right}
.hotkeyHint kbd{
  background:#101633;border:1px solid #34416e;border-radius:6px;
  padding:2px 7px;color:var(--cyan);font:600 11px/1 ui-monospace,monospace;
  letter-spacing:0;min-width:22px;text-align:center;
}

/* ─── loading overlay ────────────────────────────────────── */
#loadingOverlay{
  position:fixed;inset:0;z-index:50;display:flex;align-items:center;
  justify-content:center;background:rgba(5,6,13,0.85);backdrop-filter:blur(6px);
  pointer-events:auto;
}
#loadingOverlay.hidden{display:none;opacity:0;pointer-events:none}
.loadingCard{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:32px 40px;border:1px solid var(--line);border-radius:18px;
  background:var(--panel);box-shadow:0 0 60px #36e6ff33;min-width:240px;
}
.loadingLabel{
  font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:var(--text);
}
.loadingSub{
  font-size:11px;color:var(--dim);letter-spacing:.12em;min-height:1em;
}
/* 4-dot rotating spinner — purely CSS so it never blocks the JS thread. */
.spinner{
  position:relative;width:48px;height:48px;
}
.spinner span{
  position:absolute;width:10px;height:10px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 10px var(--cyan);
  animation:spinnerOrbit 1.1s linear infinite;
}
.spinner span:nth-child(1){animation-delay:0s;   top:0;        left:19px;}
.spinner span:nth-child(2){animation-delay:.275s;top:19px;     left:38px;background:var(--crimson);box-shadow:0 0 10px var(--crimson);}
.spinner span:nth-child(3){animation-delay:.55s; top:38px;     left:19px;}
.spinner span:nth-child(4){animation-delay:.825s;top:19px;     left:0;   background:var(--crimson);box-shadow:0 0 10px var(--crimson);}
@keyframes spinnerOrbit{
  0%,100%{ transform:scale(.6); opacity:.5 }
  50%    { transform:scale(1.2); opacity:1 }
}

/* ─── toast stream ───────────────────────────────────────── */
.toastHost{
  position:fixed;left:50%;bottom:34px;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:8px;z-index:60;
  pointer-events:none;
}
.toast{
  background:rgba(11,14,28,0.92);border:1px solid var(--line);
  border-left:3px solid var(--cyan);border-radius:10px;
  padding:10px 16px;color:var(--text);font-size:13px;letter-spacing:.06em;
  box-shadow:0 0 24px #36e6ff22;max-width:480px;
  animation:toastIn .26s cubic-bezier(.2,.7,.2,1);
  pointer-events:auto;
}
.toast.err{border-left-color:var(--crimson);box-shadow:0 0 24px #ff2d6a33}
.toast.ok {border-left-color:var(--green);box-shadow:0 0 24px #7dff9d33}
@keyframes toastIn{
  from{ opacity:0; transform:translateY(8px) }
  to  { opacity:1; transform:none }
}
@keyframes toastOut{
  from{ opacity:1; transform:none }
  to  { opacity:0; transform:translateY(6px) }
}
.toast.leaving{animation:toastOut .22s ease forwards}

/* ─── score count-up ─────────────────────────────────────── */
.rcScore{
  font-variant-numeric:tabular-nums;
}
.rcRank{
  animation:rankPop .55s cubic-bezier(.2,.9,.2,1.6) both;
}
@keyframes rankPop{
  0%   { opacity:0; transform:scale(.5) }
  60%  { opacity:1; transform:scale(1.08) }
  100% { opacity:1; transform:scale(1) }
}

/* ─── motivation strip on main menu ──────────────────────── */
.motivationStrip{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);min-height:1.5em;margin-top:-2px;
}
.motivationStrip .pill{
  padding:6px 14px;border:1px solid var(--line);border-radius:999px;
  background:rgba(7,10,22,0.6);
}
.motivationStrip .pill.streak{border-color:var(--gold);color:var(--gold);
  text-shadow:0 0 10px #ffd23f44}
.motivationStrip .pill.rank{border-color:var(--cyan);color:var(--cyan);
  text-shadow:0 0 10px #36e6ff44}
.motivationStrip .pill.goal{border-color:var(--crimson);color:var(--crimson);
  text-shadow:0 0 10px #ff2d6a44}

/* ─── score card extras ──────────────────────────────────── */
.rcBeat{
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--crimson);
  text-shadow:0 0 12px #ff2d6a44;min-height:1em;text-align:center;
}
.rcRankBadge{
  display:flex;justify-content:center;gap:10px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
  min-height:1em;
}
.rcRankBadge .b{
  padding:4px 10px;border-radius:999px;background:rgba(7,10,22,0.6);
  border:1px solid var(--line);
}
.rcRankBadge .b.gold{border-color:var(--gold);color:var(--gold)}
.rcRankBadge .b.up{border-color:var(--green);color:var(--green);
  animation:rcRankPulse .8s ease-in-out 2 alternate}
@keyframes rcRankPulse{
  from{ box-shadow:0 0 0 #7dff9d00 }
  to  { box-shadow:0 0 16px #7dff9d88 }
}

/* ─── leaderboard panel ──────────────────────────────────── */
.lbCard{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:18px;padding:24px 26px 18px;display:flex;flex-direction:column;
  gap:14px;width:min(680px, 95vw);max-height:90vh;
  box-shadow:0 0 60px #36e6ff22;
}
.lbHead{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}
.lbTitle h2{font-size:24px;letter-spacing:.04em;color:var(--text);text-align:left}
.lbSub{font-size:11px;letter-spacing:.22em;color:var(--dim);text-transform:uppercase;margin-top:2px}
.lbFilters{display:flex;gap:8px;flex-wrap:wrap}
.lbSelect{
  background:#070a16;border:1px solid var(--line);border-radius:8px;
  padding:8px 12px;color:var(--text);font:inherit;font-size:13px;
  letter-spacing:.06em;outline:none;cursor:pointer;
}
.lbSelect:focus{border-color:var(--cyan)}
.lbMine{
  display:none;background:linear-gradient(135deg,#13183a 0%,#0b0e1c 100%);
  border:1px solid var(--cyan);border-radius:12px;padding:10px 14px;
  box-shadow:0 0 18px #36e6ff22;font-size:13px;letter-spacing:.06em;
  color:var(--text);display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:14px;
}
.lbMine.hidden{display:none}
.lbMine .rk{font-size:22px;font-weight:800;color:var(--cyan);
  text-shadow:0 0 12px #36e6ff66;min-width:54px;text-align:center}
.lbMine .nm{color:var(--text)}
.lbMine .nm .me{color:var(--gold);font-size:10px;letter-spacing:.22em;display:block;margin-bottom:2px}
.lbMine .sc{font-weight:800;font-size:20px;color:var(--text);text-align:right}
.lbList{
  display:flex;flex-direction:column;gap:6px;overflow:auto;flex:1;
  max-height:50vh;margin:0 -6px;padding:0 6px;
}
.lbRow{
  display:grid;grid-template-columns:56px 24px 1fr auto;
  align-items:center;gap:12px;padding:9px 12px;
  background:#070a16;border:1px solid var(--line);border-radius:10px;
  font-size:13px;letter-spacing:.04em;transition:border-color .14s;
}
.lbRow:hover{border-color:#3a4270}
.lbRow.me{border-color:var(--cyan);background:linear-gradient(135deg,#0c1a35 0%,#070a16 100%);
  box-shadow:0 0 14px #36e6ff22}
.lbRow .rk{
  font-weight:800;font-size:16px;color:var(--dim);text-align:center;
  font-variant-numeric:tabular-nums;
}
.lbRow.r1 .rk{color:var(--gold);text-shadow:0 0 10px #ffd23f88;font-size:18px}
.lbRow.r2 .rk{color:#cfd6e9;text-shadow:0 0 8px #cfd6e955}
.lbRow.r3 .rk{color:#d9a36b;text-shadow:0 0 8px #d9a36b55}
.lbRow .av{
  width:24px;height:24px;border-radius:50%;background:#1a2040 center/cover;
  border:1px solid var(--line);
}
.lbRow .nm{display:flex;flex-direction:column;line-height:1.2}
.lbRow .nm b{color:var(--text);font-weight:600}
.lbRow .nm span{color:var(--dim);font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.lbRow .sc{font-weight:700;color:var(--text);text-align:right;font-variant-numeric:tabular-nums}
.lbEmpty{color:var(--dim);text-align:center;padding:30px;letter-spacing:.1em;font-size:13px}
.lbEmpty.hidden{display:none}
.lbFooter{
  font-size:11px;color:var(--dim);letter-spacing:.08em;
  border-top:1px solid var(--line);padding-top:10px;
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.lbFooter .cloudOn  { color:var(--green) }
.lbFooter .cloudOff { color:var(--crimson) }

/* ─── responsive: phones + small tablets ─────────────────── */
@media (max-width: 760px){
  #overlay{padding:90px 14px 30px;justify-content:flex-start}
  .topBar{padding:0 14px;flex-wrap:wrap;gap:6px}
  .topBar .who{font-size:11px}
  h1{font-size:42px}
  .row{flex-direction:column;gap:18px;width:100%}
  .col{min-width:0;width:100%}
  .chipRow{justify-content:flex-start;overflow-x:auto;
    flex-wrap:nowrap;padding-bottom:4px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .chipRow::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto}
  .big{font-size:15px;padding:14px 22px;min-height:48px;width:100%;max-width:340px}
  .btnRow{flex-direction:column;width:100%;align-items:center}
  .btnRow.secondary{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .btnRow.secondary .link{padding:8px 6px}
  .loginCard{min-width:0;width:100%;padding:24px 20px}
  .pausePanel{min-width:0;width:90%;padding:24px}
  .resultCard{min-width:0;width:95%;padding:22px 18px}
  .rcGrid{grid-template-columns:repeat(2,1fr)}
  .rcRank{font-size:100px}
  .rcScore{font-size:34px}
  .lbCard{padding:18px 16px;width:96vw;max-height:92vh}
  .lbRow{grid-template-columns:42px 22px 1fr auto;gap:8px;padding:8px 10px;font-size:12px}
  .lbRow .rk{font-size:14px}
  .lbHead{flex-direction:column}
  .backBtn{top:10px;left:10px;padding:6px 12px;font-size:11px}
  .hotkeyHint{right:10px;bottom:10px;font-size:11px;min-width:180px}
  /* Disable lean transform on mobile — the canvas takes the full width and
     hand-input via swipe doesn't need it. */
  .desktopActive canvas{pointer-events:auto;touch-action:none}
}
/* Touch-target floor — 44px is Apple's HIG minimum. */
@media (pointer:coarse){
  .chip{min-height:44px;padding:0 18px}
  .link{min-height:44px;display:inline-flex;align-items:center}
  .linkChip{min-height:32px}
  .loginClose{width:44px;height:44px;font-size:26px}
}

/* ─── reduced-motion respect ─────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ─── top bar with player name ─────────────────────────────── */
.topBar{
  position:absolute;top:18px;left:0;right:0;display:flex;justify-content:space-between;
  padding:0 28px;align-items:center;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);
}
.who b{color:var(--text)}
.linkChip{
  margin:0 8px;padding:7px 13px;border:1px solid var(--cyan);border-radius:999px;
  background:linear-gradient(135deg,#092743,#07172a);color:var(--cyan);font:inherit;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  box-shadow:0 0 16px #36e6ff33;
}
.linkChip:hover{background:#0b223e;box-shadow:0 0 24px #36e6ff55}
.betaTag{
  display:inline-block;margin:0 6px;padding:3px 8px;border-radius:6px;
  background:linear-gradient(135deg,#ffd23f 0%,#ff8a3d 100%);
  color:#1a1402;font-size:10px;font-weight:900;letter-spacing:.22em;
  text-transform:uppercase;line-height:1;vertical-align:middle;
  box-shadow:0 0 12px #ffd23f55;
  animation:betaPulse 2.4s ease-in-out infinite;
}
@keyframes betaPulse{
  0%,100%{ box-shadow:0 0 8px #ffd23f44 }
  50%    { box-shadow:0 0 18px #ffd23f99 }
}
.badges{display:flex;gap:8px}
.badge{padding:5px 12px;border:1px solid var(--line);border-radius:999px;color:var(--dim)}
.badge.on{border-color:var(--green);color:var(--green);box-shadow:0 0 10px #7dff9d33}

/* ─── login card ──────────────────────────────────────────── */
.loginCard{
  position:relative;background:linear-gradient(180deg,#101532 0%,#080b19 100%);
  border:1px solid #31406f;border-radius:18px;
  padding:28px;min-width:min(420px,calc(100vw - 32px));max-width:460px;display:flex;
  flex-direction:column;gap:16px;box-shadow:0 0 60px #36e6ff22,0 0 36px #ff2d6a18;
}
.loginClose{
  position:absolute;right:14px;top:12px;width:34px;height:34px;border:1px solid #34416e;
  border-radius:999px;background:#070a16;color:var(--dim);font-size:22px;line-height:1;
  cursor:pointer;
}
.loginClose:hover{color:var(--text);border-color:var(--cyan)}
.brandLockup{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:4px}
.logoMark{
  position:relative;width:96px;height:96px;border-radius:24px;
  background:radial-gradient(circle at 50% 50%,#1e2e65 0%,#080b19 62%);
  border:1px solid #31406f;box-shadow:inset 0 0 24px #36e6ff1f,0 0 30px #ff2d6a24;
}
.logoMark .slash{
  position:absolute;left:45px;top:15px;width:8px;height:66px;border-radius:999px;
  transform-origin:center;box-shadow:0 0 18px currentColor;
}
.logoMark .cyan{color:var(--cyan);background:var(--cyan);transform:rotate(42deg)}
.logoMark .crimson{color:var(--crimson);background:var(--crimson);transform:rotate(-42deg)}
.logoMark .core{
  position:absolute;left:36px;top:36px;width:24px;height:24px;border-radius:999px;
  background:#e8ecff;box-shadow:0 0 20px #e8ecffcc;
}
.loginCard h2{font-size:42px;letter-spacing:.02em;line-height:1;text-transform:none}
.loginCard .sub{font-size:11px;color:var(--dim);letter-spacing:.16em;text-transform:uppercase}
.googleBtn{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  min-height:48px;border:1px solid #dfe4f2;border-radius:10px;background:#f8fbff;
  color:#111827;font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;font-family:inherit;
}
.googleBtn:hover{filter:brightness(1.04)}
.googleBtn:disabled{opacity:.55;cursor:not-allowed}
.loginForm{display:flex;flex-direction:column;gap:10px;align-items:stretch;text-align:left}
.loginForm label{display:flex;flex-direction:column;gap:4px;font-size:11px;
  color:var(--dim);letter-spacing:.2em;text-transform:uppercase}
.loginForm .row-inline{
  display:grid;grid-template-columns:18px 1fr;align-items:center;gap:10px;
  color:var(--text);letter-spacing:.08em;text-transform:none;font-size:13px;
}
.loginForm .row-inline input{width:18px;height:18px;padding:0;accent-color:var(--cyan)}
.loginForm input{
  background:#070a16;border:1px solid var(--line);border-radius:8px;padding:12px 14px;
  font-size:16px;color:var(--text);font-family:inherit;outline:none;
  transition:border-color .12s;letter-spacing:.05em;
}
.loginForm input:focus{border-color:var(--cyan)}
.loginInfo{
  border:1px solid #31406f;border-radius:10px;background:#070a16;padding:14px;
  color:#aab4dd;font-size:13px;line-height:1.5;letter-spacing:.04em;text-align:center;
}
.err{color:var(--crimson);font-size:12px;min-height:1em;letter-spacing:.1em;text-transform:uppercase}
.recent{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.recent .recentPlayer{
  display:flex;justify-content:space-between;align-items:center;padding:8px 14px;
  background:#070a16;border:1px solid var(--line);border-radius:10px;cursor:pointer;
  font-size:13px;letter-spacing:.08em;transition:border-color .12s;
}
.recent .recentPlayer:hover{border-color:var(--cyan)}
.recent .recentPlayer .n{color:var(--text);font-weight:600}
.recent .recentPlayer .d{color:var(--dim);font-size:11px}
.legal{margin-top:14px;font-size:10px;letter-spacing:.08em;color:#556;line-height:1.5;text-align:left}

/* ─── pause ───────────────────────────────────────────────── */
.pausePanel{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:36px 42px;display:flex;flex-direction:column;gap:22px;
  min-width:340px;align-items:center;box-shadow:0 0 60px #36e6ff22;
}
.pausePanel h2{font-size:42px;letter-spacing:.2em;color:var(--cyan);
  text-shadow:0 0 18px var(--cyan)}
.settings{display:flex;flex-direction:column;gap:10px;width:100%}
.settings label{display:flex;justify-content:space-between;align-items:center;
  gap:14px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.settings input[type=range]{flex:1;accent-color:var(--cyan)}

.confirmCard{
  background:linear-gradient(180deg,#101532 0%,#080b19 100%);
  border:1px solid #31406f;border-radius:18px;padding:30px;
  width:min(420px, calc(100vw - 32px));display:flex;flex-direction:column;
  gap:16px;align-items:center;box-shadow:0 0 50px #ff2d6a22;
}
.confirmCard h2{
  color:var(--crimson);font-size:34px;letter-spacing:.08em;text-transform:uppercase;
  text-shadow:0 0 18px #ff2d6a66;
}
.confirmCard p{color:#aab4dd;font-size:14px;letter-spacing:.06em}

/* ─── score card ─────────────────────────────────────────── */
.resultCard{
  position:relative;background:linear-gradient(160deg,#0b0e1c 0%,#13183a 100%);
  border:1px solid var(--line);border-radius:24px;padding:28px 34px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  min-width:380px;max-width:520px;box-shadow:0 0 80px #36e6ff22, 0 0 30px #ff2d6a22;
}
.rcTop{display:flex;justify-content:space-between;width:100%;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim);align-items:center;gap:14px}
.rcPlayer{display:flex;align-items:center;gap:10px}
.rcPlayer b{color:var(--text);font-size:14px;display:block;letter-spacing:.1em;text-transform:none}
.rcPlayer span{color:var(--dim);font-size:10px}
.rcPlayerName{display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.2}
.rcAvatar{
  width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,#1a2040,#070a16) center/cover no-repeat;
  border:2px solid var(--cyan);box-shadow:0 0 14px #36e6ff55;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:800;color:var(--text);letter-spacing:0;
  text-transform:uppercase;flex-shrink:0;
}
.rcAvatar.guest{border-color:var(--dim);box-shadow:none;color:var(--dim)}
.rcVerdict{
  font-size:42px;font-weight:900;letter-spacing:.32em;text-transform:uppercase;
  min-height:1.1em;
}
.rcVerdict.pass{color:var(--green);text-shadow:0 0 24px var(--green)}
.rcVerdict.fail{color:var(--crimson);text-shadow:0 0 24px var(--crimson)}
.rcRank{font-size:130px;font-weight:900;line-height:1;color:var(--cyan);
  text-shadow:0 0 30px var(--cyan)}
.rcRank.s{color:var(--crimson);text-shadow:0 0 30px var(--crimson)}
.rcRank.gold{color:var(--gold);text-shadow:0 0 30px var(--gold)}
.rcScore{font-size:44px;font-weight:800;letter-spacing:.06em}
.rcGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;margin-top:6px}
.rcGrid .cell{display:flex;flex-direction:column;align-items:center;
  background:#070a16;border:1px solid var(--line);border-radius:10px;padding:10px}
.rcGrid .cell .v{font-size:22px;font-weight:700;color:var(--text)}
.rcGrid .cell .k{font-size:10px;color:var(--dim);letter-spacing:.18em;text-transform:uppercase;margin-top:4px}
.rcFit{width:100%;font-size:12px;color:var(--green);letter-spacing:.18em;
  text-transform:uppercase;text-align:center;min-height:1em;
  text-shadow:0 0 14px #7dff9d33}

/* ─── history ────────────────────────────────────────────── */
.histCard{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:28px 32px;display:flex;flex-direction:column;gap:14px;
  min-width:380px;max-width:600px;width:90%;align-items:stretch;
}
.histCard h2{font-size:26px;letter-spacing:.06em;text-align:center;color:var(--text)}
.histCard h2 span{color:var(--cyan)}
.histList{display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow:auto}
.histRow{display:grid;grid-template-columns:80px 1fr 90px 90px;gap:10px;
  padding:10px 12px;background:#070a16;border:1px solid var(--line);
  border-radius:8px;font-size:13px;letter-spacing:.08em;align-items:center}
.histRow .rank{font-weight:800;color:var(--gold);font-size:18px}
.histRow .meta{color:var(--dim);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.histRow .score{text-align:right;font-weight:700;color:var(--text)}
.histEmpty{color:var(--dim);font-size:13px;text-align:center;padding:24px;letter-spacing:.08em}