:root{
  --ground:#F1EFE6;
  --paper:#FAF9F4;
  --grid:rgba(43,108,176,.14);
  --grid-major:rgba(43,108,176,.32);
  --ink:#17233A;
  --ink-2:#4A5670;
  --ink-3:#8791A6;
  --line:#2B6CB0;
  --truth:#2B6CB0;
  --truth-soft:rgba(43,108,176,.18);
  --pencil:#E5483C;
  --pencil-soft:rgba(229,72,60,.22);
  --btn:#17233A;
  --btn-text:#FAF9F4;
  --chip:#E7E4D8;
  --good:#2C8F55;
  --ok:#8F6D00;
  --meh:#B55A12;
  --bad:#C0392B;
  --on-grade:#FFFFFF;
  --shadow:0 12px 30px rgba(23,35,58,.12);
  --focus:#2B6CB0;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0B2547;
    --paper:#10315E;
    --grid:rgba(150,190,240,.13);
    --grid-major:rgba(150,190,240,.30);
    --ink:#EEF3FB;
    --ink-2:#B9C8E2;
    --ink-3:#7F97BD;
    --line:#8FB6E8;
    --truth:#F6EFC2;
    --truth-soft:rgba(246,239,194,.22);
    --pencil:#FF6F5F;
    --pencil-soft:rgba(255,111,95,.26);
    --btn:#F6EFC2;
    --btn-text:#10315E;
    --chip:#1B3E70;
    --good:#43B26F;
    --ok:#E2B52B;
    --meh:#F0913D;
    --bad:#E85757;
    --on-grade:#0B2547;
    --shadow:0 12px 30px rgba(0,0,0,.35);
    --focus:#F6EFC2;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#0B2547;
  --paper:#10315E;
  --grid:rgba(150,190,240,.13);
  --grid-major:rgba(150,190,240,.30);
  --ink:#EEF3FB;
  --ink-2:#B9C8E2;
  --ink-3:#7F97BD;
  --line:#8FB6E8;
  --truth:#F6EFC2;
  --truth-soft:rgba(246,239,194,.22);
  --pencil:#FF6F5F;
  --pencil-soft:rgba(255,111,95,.26);
  --btn:#F6EFC2;
  --btn-text:#10315E;
  --chip:#1B3E70;
  --good:#43B26F;
  --ok:#E2B52B;
  --meh:#F0913D;
  --bad:#E85757;
  --on-grade:#0B2547;
  --shadow:0 12px 30px rgba(0,0,0,.35);
  --focus:#F6EFC2;
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
  overscroll-behavior-y:none;
}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-touch-callout:none}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
[hidden]{display:none!important}

#app{
  max-width:480px;
  margin:0 auto;
  padding:10px 14px 28px;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* ---------- header ---------- */
header{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:4px 2px 0;
}
.wordmark{
  display:flex;align-items:baseline;gap:10px;background:none;border:0;padding:0;color:var(--ink);cursor:pointer;
  font-family:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  font-weight:900;
  font-size:34px;
  letter-spacing:.03em;
  line-height:1;
  text-transform:uppercase;
}
.wordmark .num{
  font-weight:700;
  font-size:20px;
  color:var(--ink-3);
  letter-spacing:.02em;
}
nav{display:flex;gap:6px}
.icon-btn{
  width:42px;height:42px;border-radius:10px;border:1.5px solid transparent;
  background:transparent;display:grid;place-items:center;color:var(--ink-2);
}
.icon-btn:hover{border-color:var(--grid-major);color:var(--ink)}
.icon-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- progress strip ---------- */
.strip{
  display:grid;grid-template-columns:repeat(5,1fr);gap:6px;
}
.slot{
  height:46px;border-radius:8px;
  border:1.5px solid var(--grid-major);
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-weight:700;font-size:15px;color:var(--ink-2);
  background:transparent;
  transition:transform .25s ease, background-color .25s ease;
}
.slot .em{font-size:17px;line-height:1}
.slot.active{border-color:var(--ink);border-width:2px;color:var(--ink)}
.slot.done{border-color:transparent;color:var(--on-grade)}
.slot.done .em{filter:grayscale(1) brightness(10)}
.slot.g-good{background:var(--good)}
.slot.g-ok{background:var(--ok)}
.slot.g-meh{background:var(--meh)}
.slot.g-bad{background:var(--bad)}
.slot.pop{animation:pop .45s cubic-bezier(.2,.9,.3,1.4)}
@keyframes pop{0%{transform:scale(.9)}100%{transform:scale(1)}}

/* ---------- stage ---------- */
.stage{
  position:relative;
  aspect-ratio:1/1;
  width:100%;
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-major) 1px,transparent 1px),
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:20% 20%,20% 20%,5% 5%,5% 5%;
  background-position:-1px -1px;
  border:1.5px solid var(--line);
  border-radius:4px;
  overflow:hidden;
  touch-action:none;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
.stage.plain{background-image:none}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.stage-ui{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center}
.stage-ui>*{pointer-events:auto}

/* intro panel inside stage */
.intro{
  text-align:center;padding:24px 22px;display:flex;flex-direction:column;align-items:center;gap:14px;
  max-width:92%;
}
.intro .big{
  font-family:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  font-weight:900;font-size:clamp(64px,22vw,104px);line-height:.9;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink);
}
.intro .date{color:var(--ink-2);font-size:15px}
.intro p{margin:0;max-width:30ch;color:var(--ink-2);text-wrap:balance}
.challenge-banner{
  background:var(--pencil);color:#fff;border-radius:10px;padding:10px 14px;font-weight:700;
  max-width:34ch;text-wrap:balance;
}
:root[data-theme="dark"] .challenge-banner{color:#1a1010}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .challenge-banner{color:#1a1010}}

/* hold button (timer event) */
.hold{
  width:58%;aspect-ratio:1;border-radius:50%;
  border:3px solid var(--ink);background:var(--paper);
  font-family:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  font-weight:900;font-size:clamp(34px,10vw,52px);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);
  transition:transform .08s ease,background-color .08s ease;
  touch-action:none;
}
.hold.holding{transform:scale(.94);background:var(--ink);color:var(--paper)}

/* count event ready prompt */
.tap-prompt{
  padding:16px 22px;border-radius:12px;border:2px dashed var(--grid-major);
  color:var(--ink-2);font-weight:700;text-align:center;background:transparent;
}

/* ---------- dock ---------- */
.dock{min-height:156px;display:flex;flex-direction:column;gap:12px;padding-top:2px}
.instr{
  margin:0;font-size:17px;line-height:1.35;min-height:46px;
  display:flex;align-items:center;gap:10px;
}
.instr .ev-name{
  font-family:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  font-weight:900;font-size:26px;letter-spacing:.04em;text-transform:uppercase;
  flex:none;
}
.instr .em{flex:none;font-size:22px}
.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;min-height:50px}
.btn{
  height:50px;padding:0 22px;border-radius:10px;border:1.5px solid transparent;
  font-weight:700;font-size:16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--chip);color:var(--ink);
  transition:transform .08s ease,opacity .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.primary{background:var(--btn);color:var(--btn-text)}
.btn.ghost{background:transparent;border-color:var(--grid-major)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.grow{flex:1}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.numrow{display:flex;align-items:stretch;gap:0;border:1.5px solid var(--grid-major);border-radius:10px;overflow:hidden;background:var(--paper)}
.numrow button{width:50px;border:0;background:transparent;font-size:24px;font-weight:700;color:var(--ink-2)}
.numrow button:hover{background:var(--chip);color:var(--ink)}
.numrow input{
  width:96px;border:0;text-align:center;background:transparent;color:var(--ink);
  font-family:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;font-weight:900;font-size:32px;
  -moz-appearance:textfield;appearance:textfield;
}
.numrow input::-webkit-outer-spin-button,.numrow input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.numrow .unit{display:flex;align-items:center;padding-right:12px;color:var(--ink-3);font-weight:700}

.score-chip{
  display:flex;align-items:center;gap:14px;flex:1;min-width:0;
}
.score-chip .n{
  font-family:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  font-weight:900;font-size:52px;line-height:1;letter-spacing:.02em;
  min-width:64px;
}
.score-chip .n.g-good{color:var(--good)}
.score-chip .n.g-ok{color:var(--ok)}
.score-chip .n.g-meh{color:var(--meh)}
.score-chip .n.g-bad{color:var(--bad)}
.score-chip .d{display:flex;flex-direction:column;gap:2px;min-width:0}
.score-chip .d b{font-size:16px}
.score-chip .d span{color:var(--ink-2);font-size:14px}

/* ---------- results ---------- */
.results{display:flex;flex-direction:column;gap:16px}
.res-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:6px 2px 0;
}
.res-head>div:first-child{min-width:0;flex:1}
.res-head .rank{
  font-family:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  font-weight:900;font-size:clamp(36px,10.5vw,52px);line-height:.95;letter-spacing:.02em;text-transform:uppercase;
  overflow-wrap:anywhere;
}
.res-head .sub{color:var(--ink-2);margin-top:6px;font-size:15px}
.res-head .total{
  flex:none;text-align:right;
  font-family:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  font-weight:900;font-size:clamp(44px,13vw,60px);line-height:.95;
}
.res-head .total small{font-size:.45em;color:var(--ink-3);font-weight:700}
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.tile{
  border-radius:10px;padding:10px 4px 8px;text-align:center;color:var(--on-grade);
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.tile .em{font-size:20px;filter:grayscale(1) brightness(10);line-height:1}
.tile .s{
  font-family:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  font-weight:900;font-size:30px;line-height:1;
}
.tile .nm{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.9}
.tile.g-good{background:var(--good)}
.tile.g-ok{background:var(--ok)}
.tile.g-meh{background:var(--meh)}
.tile.g-bad{background:var(--bad)}
.vs{
  border:1.5px solid var(--grid-major);border-radius:10px;padding:12px 14px;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.vs b{font-size:17px}
.vs span{color:var(--ink-2)}
.res-actions{display:flex;flex-direction:column;gap:8px}
.res-actions .row{display:flex;gap:8px}
.res-actions .btn{flex:1;white-space:normal;padding:0 12px;font-size:15px;line-height:1.15;min-width:0}
.next-in{color:var(--ink-2);text-align:center;font-size:15px}
.next-in b{color:var(--ink);font-variant-numeric:tabular-nums}
.streakline{display:flex;gap:18px;justify-content:center;color:var(--ink-2);font-size:14px}
.streakline b{color:var(--ink);font-size:18px;font-family:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;font-weight:900;margin-right:4px}

/* ---------- dialogs ---------- */
dialog{
  border:0;border-radius:14px;padding:0;background:var(--paper);color:var(--ink);
  width:min(92vw,420px);max-height:min(88vh,88dvh);overflow:auto;box-shadow:var(--shadow);
}
dialog::backdrop{background:rgba(10,20,40,.55);backdrop-filter:blur(2px)}
.dlg{padding:20px 22px 22px;display:flex;flex-direction:column;gap:14px}
.dlg h2{
  margin:0;font-family:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  font-weight:900;font-size:34px;letter-spacing:.03em;text-transform:uppercase;line-height:1;
  display:flex;justify-content:space-between;align-items:center;
}
.dlg h2 .icon-btn{width:38px;height:38px}
.dlg p{margin:0;color:var(--ink-2);max-width:60ch}
.dlg p b{color:var(--ink)}
.ev-list{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.ev-list li{display:grid;grid-template-columns:24px 82px 1fr;gap:8px;align-items:baseline;font-size:13px;line-height:1.3;color:var(--ink-2)}
.ev-list li b{color:var(--ink);font-family:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;font-weight:900;font-size:17px;letter-spacing:.03em;text-transform:uppercase}
.legend{display:flex;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--ink-2)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:4px}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.statgrid div b{
  display:block;font-family:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  font-weight:900;font-size:34px;line-height:1;
}
.statgrid div span{font-size:12px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.hist{display:grid;gap:5px}
.hist .row{display:grid;grid-template-columns:64px 1fr;gap:8px;align-items:center;font-size:13px;color:var(--ink-2)}
.hist .bar{height:20px;background:var(--grid-major);border-radius:4px;min-width:2px;display:flex;align-items:center;justify-content:flex-end;padding-right:6px;color:var(--ink);font-weight:700;font-size:12px}
.hist .bar.me{background:var(--good);color:var(--on-grade)}
.bests{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.bests div{text-align:center;border:1.5px solid var(--grid-major);border-radius:8px;padding:6px 2px}
.bests div b{display:block;font-family:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;font-weight:900;font-size:22px;line-height:1}
.bests div span{font-size:14px}
.card-img{width:100%;display:block;border-radius:8px;border:1.5px solid var(--grid-major)}
.subtle{font-size:13px;color:var(--ink-3)}
.subtle a{color:inherit}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:10px;font-weight:700;
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:50;
  max-width:90vw;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

footer{margin-top:auto;text-align:center;color:var(--ink-3);font-size:13px;padding-top:8px}
footer button{background:none;border:0;color:inherit;text-decoration:underline;padding:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- account / avatar ---------- */
.avatar-btn{padding:0;overflow:hidden}
.avatar-btn img{width:30px;height:30px;border-radius:50%;display:block;object-fit:cover}
.account{display:flex;align-items:center;gap:12px}
.account img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.account .who b{display:block}
.account .who span{color:var(--ink-2);font-size:14px}
.handle-row{display:flex;gap:8px;align-items:stretch}
.handle-row input{
  flex:1;min-width:0;border:1.5px solid var(--grid-major);border-radius:10px;background:var(--paper);color:var(--ink);
  padding:0 12px;font:inherit;font-weight:700;font-size:16px;
}
.handle-row .at{display:flex;align-items:center;color:var(--ink-3);font-weight:700}
#gsi-btn{display:flex;justify-content:center;min-height:44px}
.why{display:grid;gap:6px;margin:0;padding:0;list-style:none;color:var(--ink-2);font-size:14px}
.why li::before{content:"→ ";color:var(--ink-3)}

/* ---------- compare / leaderboard ---------- */
.compare{border:1.5px solid var(--grid-major);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px}
.compare .lead{font-size:17px;line-height:1.3}
.compare .lead b{font-family:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;font-weight:900;font-size:30px;letter-spacing:.02em;margin-right:6px}
.compare .muted{color:var(--ink-2);font-size:14px}
.board{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.board li{
  display:grid;grid-template-columns:34px 1fr auto auto;gap:10px;align-items:center;
  padding:7px 10px;border-radius:8px;font-size:15px;
}
.board li.me{background:var(--chip);outline:1.5px solid var(--grid-major)}
.board .rk{font-family:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;font-weight:900;font-size:20px;color:var(--ink-3)}
.board li.me .rk{color:var(--ink)}
.board .hd{display:flex;align-items:center;gap:8px;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board .hd img{width:22px;height:22px;border-radius:50%;flex:none;object-fit:cover}
.board .sq{font-size:12px;letter-spacing:-1px}
.board .tot{font-family:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;font-weight:900;font-size:22px;min-width:40px;text-align:right}
.board .empty{display:block;grid-template-columns:none;color:var(--ink-2);text-align:center;padding:14px 4px;line-height:1.4}
.tabs{display:flex;gap:6px}
.tabs button{flex:1;height:40px;border-radius:8px;border:1.5px solid var(--grid-major);background:transparent;font-weight:700}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.compare .row{display:flex;gap:8px}
.compare .row .btn{flex:1;white-space:normal;padding:0 12px;font-size:15px;line-height:1.15;height:46px}