@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlow-condensed-500.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-condensed-600.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-700.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/plex-mono-600.woff2) format("woff2")}

:root{
  --bg:#E7E8EB; --surface:#FFFFFF; --surface-2:#DCDEE3; --sunk:#D2D5DB;
  --ink:#15171C; --ink-2:#5C626D; --ink-3:#949AA4;
  --line:#C7CAD1; --line-2:#B3B7C0;
  --track:#C1452B; --track-soft:#F1DCD6;
  --good:#2F7A64; --gold:#A8802A;
  --l1:#C1452B; --l2:#B5822B; --l3:#2F7A64; --l4:#3C5E86; --l5:#7A3F63; --l6:#5E7A2B;
  --shadow:0 1px 0 rgba(21,23,28,.06), 0 8px 24px -14px rgba(21,23,28,.5);
  --pad:16px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1115; --surface:#181B21; --surface-2:#21252D; --sunk:#0A0C10;
    --ink:#ECEDF0; --ink-2:#9BA2AE; --ink-3:#6B727E;
    --line:#2C313A; --line-2:#3A404B;
    --track:#E2664A; --track-soft:#3A211B;
    --good:#46A98A; --gold:#D6A94A;
    --l1:#E2664A; --l2:#D9A344; --l3:#46A98A; --l4:#6C97C9; --l5:#B2708F; --l6:#93B851;
    --shadow:0 1px 0 rgba(0,0,0,.4), 0 10px 28px -16px #000;
  }
}
:root[data-theme="dark"]{
  --bg:#0F1115; --surface:#181B21; --surface-2:#21252D; --sunk:#0A0C10;
  --ink:#ECEDF0; --ink-2:#9BA2AE; --ink-3:#6B727E;
  --line:#2C313A; --line-2:#3A404B;
  --track:#E2664A; --track-soft:#3A211B;
  --good:#46A98A; --gold:#D6A94A;
  --l1:#E2664A; --l2:#D9A344; --l3:#46A98A; --l4:#6C97C9; --l5:#B2708F; --l6:#93B851;
  --shadow:0 1px 0 rgba(0,0,0,.4), 0 10px 28px -16px #000;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* `touch-action:manipulation` is what actually stops double-tap-to-zoom.
   The viewport meta says `user-scalable=no`, but iOS Safari has ignored that
   since iOS 10 on purpose, for accessibility — so on the one event where the
   whole point is to tap 50 times as fast as possible, every second tap was
   zooming the page. `manipulation` keeps panning and pinch working (the
   scroll list sets its own pan-y, the arenas their own none) and drops only
   the double-tap gesture, which this game never uses. */
html,body{touch-action:manipulation}
body{
  background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14px; line-height:1.4;
  overscroll-behavior:none;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--track);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.disp{font-family:"Barlow Condensed",Oswald,"Arial Narrow",sans-serif;font-weight:700;letter-spacing:.01em}

/* ---------- frame ---------- */
#app{
  max-width:460px; margin:0 auto; min-height:100vh; min-height:100dvh;
  background:var(--bg);
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
}
.screen{flex:1;display:flex;flex-direction:column}

/* ---------- masthead ---------- */
.mast{
  display:flex;align-items:center;gap:10px;
  padding:14px var(--pad) 10px;
}
.mark{
  width:34px;height:34px;flex:none;border-radius:9px;
  background:var(--track);display:grid;place-items:center;
  box-shadow:var(--shadow);
}
.mark svg{width:20px;height:20px;fill:#fff}
/* Ranked/offline used to be TWO channels: a dot in the masthead and the
   CHALLENGE trophy dimming. The dot is gone — the owner: "I do not think the
   network dot is needed. There is no browser game you play offline." Ranked
   play requires the network by an explicit earlier decision, so a permanent
   "you are online" light says nothing. The trophy (.best .cup, below) carries
   it alone now, via opacity rather than colour, which is the channel that
   survived colour blindness anyway. The PER-RUN truth — a run the referee
   refused (✕) against a run that simply never reached it ("—") — is a
   different signal on a different screen and is untouched. */
.mast .wm{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;
  display:flex;gap:.22em;font-size:27px;line-height:1;
  letter-spacing:.07em;text-transform:uppercase;
}
.mast .wm i{font-style:normal;color:var(--ink)}
.mast .wm em{font-style:normal;color:var(--track)}
.mast .spacer{flex:1}
.mast .ic-btn{
  width:38px;height:38px;flex:none;border-radius:11px;
  border:1px solid var(--line);background:var(--surface);
  display:grid;place-items:center;
}
.mast .ic-btn svg{width:19px;height:19px;stroke:var(--ink-2);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mast .ic-btn.flagbtn{font-size:19px;line-height:1}

/* ---------- lanes ---------- */
.lanes{display:flex;flex-direction:column;gap:8px;padding:0 var(--pad) 8px}
.lane{
  display:grid;grid-template-columns:30px 34px 1fr auto;align-items:center;gap:9px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:11px 13px 11px 0; text-align:left; width:100%;
  position:relative; overflow:hidden;
  transition:transform .12s ease, border-color .12s ease;
}
.lane:active{transform:scale(.985);border-color:var(--line-2)}
.lane .rail{position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--lc)}
.lane .no{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:19px;
  color:var(--ink-3);text-align:center;padding-left:5px;
}
.lane .ic{width:34px;height:34px;display:grid;place-items:center}
.lane .ic svg{width:27px;height:27px;stroke:var(--lc);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lane .meta{display:flex;flex-direction:column;min-width:0}
.lane .evname{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:17px;
  letter-spacing:.04em;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lane .pts{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:23px;
  line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.lane .pts u{text-decoration:none;font-family:"IBM Plex Mono",monospace;font-size:9px;
  font-weight:400;color:var(--ink-3);margin-left:4px;letter-spacing:.1em}
.lane .pts.none{color:var(--ink-3);font-weight:500}

/* ---------- settings tiles (inside the ID sheet) ---------- */
.toggles{display:flex;gap:8px;padding:0 var(--pad) 16px}
.toggles button{
  flex:1;border:1px solid var(--line);background:var(--surface);border-radius:12px;
  padding:16px 0;display:grid;place-items:center;gap:6px;
}
.toggles svg{width:21px;height:21px;stroke:var(--ink-2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.toggles .lbl{font-size:9px;letter-spacing:.16em;color:var(--ink-3)}
#soundIc{font-size:20px;line-height:21px}
.bigflag{font-size:26px;line-height:1;flex:none}

/* ---------- full screens ---------- */
.full{
  position:absolute;inset:0;background:var(--bg);
  display:flex;flex-direction:column;z-index:20;
}
.fbar{display:flex;align-items:center;gap:10px;padding:12px var(--pad)}
.fbar .x{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center}
.fbar .x svg{width:16px;height:16px;stroke:var(--ink-2);stroke-width:2;stroke-linecap:round}
.fbar .t{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:20px;letter-spacing:.08em;text-transform:uppercase}
.fbar .spacer{flex:1}
.fbar .lane-no{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:15px;
  color:#fff;background:var(--lc);border-radius:7px;padding:2px 9px;letter-spacing:.06em;
}

/* intro */
.intro{flex:1;display:flex;flex-direction:column;padding:0 var(--pad) calc(20px + env(safe-area-inset-bottom));gap:16px}
.demo{
  flex:1;min-height:210px;max-height:330px;border-radius:16px;background:var(--surface);
  border:1px solid var(--line);position:relative;overflow:hidden;display:grid;place-items:center;
}
.demo:before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent 0 11px,var(--surface-2) 11px 12px);
  opacity:.6;
}
.demo .phone{width:128px;height:230px;border-radius:19px;border:2px solid var(--line-2);position:relative;background:var(--surface-2);overflow:hidden;z-index:1;box-shadow:var(--shadow)}
.demo .dot{position:absolute;width:30px;height:30px;border-radius:50%;background:var(--lc);opacity:.85;left:49px;top:100px}
.demo .tgt{position:absolute;border:2px solid var(--lc);border-radius:4px}
@keyframes d-tap{0%,100%{transform:scale(1);opacity:.5}45%{transform:scale(.7);opacity:1}}
@keyframes d-hunt{0%{transform:translate(-24px,-40px)}25%{transform:translate(26px,-8px)}50%{transform:translate(-14px,34px)}75%{transform:translate(22px,44px)}100%{transform:translate(-24px,-40px)}}
@keyframes d-scroll{0%{transform:translateY(0)}55%{transform:translateY(-96px)}100%{transform:translateY(-96px)}}
@keyframes d-swipe{0%{transform:translateX(-30px);opacity:0}18%{opacity:1}55%{transform:translateX(30px);opacity:1}70%,100%{transform:translateX(30px);opacity:0}}
@keyframes d-lock{0%{stroke-dashoffset:260}60%,100%{stroke-dashoffset:0}}
/* ZOOM SNIPER: pinch -> match -> RELEASE -> clear. The release is the rule
   now (see RULES.zoom in rules.js), so the loop has to show the fingers
   leaving the glass and the round clearing because of it. Four tracks, one
   2.4s clock: the tile grows, two finger dots travel out with it, the dots
   fade at 52% (the lift), and the target ring goes solid green right after —
   the clear, caused by the letting go. */
@keyframes d-zoom{0%,6%{transform:scale(.55);background:var(--lc)}46%,52%{transform:scale(1.5);background:var(--lc)}58%,92%{transform:scale(1.5);background:var(--good)}100%{transform:scale(.55);background:var(--lc)}}
@keyframes d-zpinchA{0%,6%{transform:translate(-11px,-11px);opacity:.85}46%,50%{transform:translate(-30px,-30px);opacity:.85}56%,100%{transform:translate(-30px,-30px);opacity:0}}
@keyframes d-zpinchB{0%,6%{transform:translate(11px,11px);opacity:.85}46%,50%{transform:translate(30px,30px);opacity:.85}56%,100%{transform:translate(30px,30px);opacity:0}}
@keyframes d-zok{0%,52%{border-color:var(--line-2);border-style:dashed}58%,92%{border-color:var(--good);border-style:solid}100%{border-color:var(--line-2);border-style:dashed}}
.stats{display:flex;gap:8px}
.stat{
  flex:1;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;display:flex;flex-direction:column;gap:3px;
}
.stat .k{font-size:9px;letter-spacing:.16em;color:var(--ink-3)}
.stat .v{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:26px;line-height:1;font-variant-numeric:tabular-nums}
.stat .v small{font-size:11px;font-family:"IBM Plex Mono",monospace;font-weight:400;color:var(--ink-3);margin-left:3px}
.go{
  width:100%;background:var(--lc);color:#fff;border-radius:14px;
  padding:19px 0;display:grid;place-items:center;box-shadow:var(--shadow);
}
.go svg{width:26px;height:26px;fill:#fff}
.go[disabled]{opacity:.4}

/* play surface */
.arena{
  flex:1;position:relative;background:var(--surface);margin:0 var(--pad);
  border-radius:16px;border:1px solid var(--line);overflow:hidden;
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.hud{
  display:flex;align-items:center;gap:10px;padding:10px var(--pad) 12px;
}
.hud .big{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:40px;line-height:.9;font-variant-numeric:tabular-nums}
.hud .unit{font-size:10px;letter-spacing:.16em;color:var(--ink-3)}
.hud .spacer{flex:1}
.pips{display:flex;gap:4px}
.pips i{width:8px;height:8px;border-radius:2px;background:var(--sunk)}
.pips i.on{background:var(--lc)}
.pips i.bad{background:var(--track)}
.timerbar{height:4px;background:var(--sunk);margin:0 var(--pad) 10px;border-radius:2px;overflow:hidden}
.timerbar i{display:block;height:100%;background:var(--lc);width:100%}
.pad-bottom{padding-bottom:calc(20px + env(safe-area-inset-bottom))}

/* result */
.result{flex:1;display:flex;flex-direction:column;padding:0 var(--pad) calc(20px + env(safe-area-inset-bottom));gap:14px}
.bigscore{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:20px;text-align:center;box-shadow:var(--shadow);
}
.bigscore .raw{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:64px;line-height:.85;font-variant-numeric:tabular-nums}
.bigscore .raw small{font-size:16px;font-family:"IBM Plex Mono",monospace;font-weight:400;color:var(--ink-3);margin-left:6px}
.bigscore .pb{margin-top:10px;font-size:11px;letter-spacing:.14em;color:var(--gold)}
.actions{display:flex;gap:8px}
.actions button{
  flex:1;border:1px solid var(--line);background:var(--surface);border-radius:13px;
  padding:16px 0;display:grid;place-items:center;
}
.actions button svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.actions button.pri{background:var(--lc);border-color:var(--lc)}
.actions button.pri svg{stroke:#fff}

/* board */
.board{flex:1;overflow-y:auto;padding:0 var(--pad) calc(20px + env(safe-area-inset-bottom))}
.tabs{display:flex;gap:6px;overflow-x:auto;padding:0 var(--pad) 12px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:none;border:1px solid var(--line);background:var(--surface);border-radius:10px;
  width:44px;height:44px;display:grid;place-items:center;
}
.tab svg{width:24px;height:24px;stroke:var(--ink-3);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tab[aria-selected="true"]{background:var(--lc);border-color:var(--lc)}
.tab[aria-selected="true"] svg{stroke:#fff}
.tab .tot{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:15px;letter-spacing:.04em;color:var(--ink-3)}
.tab[aria-selected="true"] .tot{color:#fff}
.rows{display:flex;flex-direction:column;gap:4px}
.row{
  display:grid;grid-template-columns:32px auto 1fr auto;align-items:center;gap:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 12px;
}
.row .nm{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:16px;letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2);min-width:0;
}
.row.me .nm{color:var(--ink)}
.row.me{border-color:var(--lc);background:var(--track-soft)}
:root[data-theme="dark"] .row.me,
:root:not([data-theme="light"]) .row.me{background:var(--surface-2)}
.row .rk{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:19px;color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums}
.row.p1 .rk{color:var(--gold)}
.row .fl{font-size:17px}
.row .sc{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:21px;font-variant-numeric:tabular-nums;text-align:right}
.row .sc u{text-decoration:none;font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:400;color:var(--ink-3);margin-left:4px}
.empty{display:grid;place-items:center;gap:10px;padding:44px 0;color:var(--ink-3)}
.empty svg{width:44px;height:44px;stroke:var(--line-2);fill:none;stroke-width:1.5}

/* pickers */
.grid-pick{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding:0 var(--pad) 14px}
.grid-pick button{
  aspect-ratio:1;border:1px solid var(--line);border-radius:10px;background:var(--surface);
  display:grid;place-items:center;font-size:21px;
}
.grid-pick button[aria-pressed="true"]{background:var(--track);border-color:var(--track);transform:scale(.94)}
.seclbl{
  display:flex;align-items:center;gap:8px;padding:14px var(--pad) 8px;
  font-size:10px;letter-spacing:.2em;color:var(--ink-3);
}
.seclbl:before{content:"";width:18px;height:1px;background:var(--line-2)}

/* ---- taking the top of a board ---- */
.confetti{
  position:absolute;top:-26px;width:9px;height:15px;z-index:80;pointer-events:none;
  animation-name:conf;animation-timing-function:linear;animation-fill-mode:forwards;
}
@keyframes conf{
  from{transform:translate3d(0,0,0) rotate(0deg);opacity:1}
  to{transform:translate3d(var(--dx),108vh,0) rotate(var(--rot));opacity:.85}
}
.wrbadge{
  display:inline-flex;align-items:center;gap:9px;margin-top:13px;
  background:var(--gold);color:#fff;border-radius:999px;padding:7px 18px 7px 13px;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:22px;letter-spacing:.05em;
  box-shadow:0 6px 18px -10px var(--gold);
}
.wrbadge span{font-size:19px;line-height:1}
.stat .v.gold, .totalcard .big.gold{color:var(--gold)}
.stat .v .cup{font-size:17px;margin-right:4px}
/* A verification-failed run swaps the rank digit for the same ✕ every close
   button on the page already uses — every icon svg in this file is sized and
   coloured by its own selector, none by a browser default, so this one needs
   its own rule too or it renders as an invisible zero-width fill. */
#mrRank svg, #resRank svg{width:24px;height:24px;stroke:var(--track);fill:none;stroke-width:2.6;stroke-linecap:round;vertical-align:-3px}
.row.p1 .rk:before{content:"🏆";font-size:12px;margin-right:3px;vertical-align:2px}

/* toast */
.toast{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  background:var(--ink);color:var(--bg);border-radius:999px;padding:9px 18px;
  font-size:12px;letter-spacing:.06em;z-index:60;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:8px;
}
.toast svg{width:15px;height:15px;stroke:var(--bg);fill:none;stroke-width:2}

/* ---- event-specific play surfaces ---- */
#tapPad{position:absolute;inset:0;display:grid;place-items:center}
#tapPad .ring{width:150px;height:150px;border-radius:50%;border:3px solid var(--lc);display:grid;place-items:center;transition:transform .05s}
#tapPad.hit .ring{transform:scale(.93)}
#tapPad .ring span{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:62px;color:var(--lc);font-variant-numeric:tabular-nums}

.popup{
  position:absolute;background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:8px;box-shadow:var(--shadow);
}
.popup .body{position:absolute;inset:0;border-radius:8px}
.popup .close{
  position:absolute;display:grid;place-items:center;border-radius:5px;
  background:rgba(128,128,128,.18);
}
.popup .close svg{stroke:var(--ink-2);fill:none;stroke-width:2.2;stroke-linecap:round}
.popup .barcode{position:absolute;left:10px;right:10px;top:12px;bottom:12px;display:flex;gap:3px;align-items:flex-end;opacity:.35}
.popup .barcode i{flex:1;background:var(--ink-3);border-radius:1px}

#scrollList{position:absolute;inset:0;overflow-y:scroll;-webkit-overflow-scrolling:touch;touch-action:pan-y;scrollbar-width:none}
#scrollList::-webkit-scrollbar{display:none}
#scrollList .sp{height:50%}
#scrollList .r{
  height:44px;display:flex;align-items:center;justify-content:center;gap:0;
  font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:22px;
  color:var(--ink-3);font-variant-numeric:tabular-nums;border-bottom:1px solid var(--line);
}
#scrollHair{position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-22px);pointer-events:none;border-top:2px solid var(--lc);border-bottom:2px solid var(--lc)}
#scrollHair:before,#scrollHair:after{content:"";position:absolute;top:50%;width:9px;height:9px;background:var(--lc);transform:translateY(-50%) rotate(45deg)}
#scrollHair:before{left:-4px}#scrollHair:after{right:-4px}
#scrollGoal{
  position:absolute;left:50%;top:16px;transform:translateX(-50%);
  background:var(--lc);color:#fff;border-radius:10px;padding:4px 16px;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:30px;line-height:1.1;
  font-variant-numeric:tabular-nums;pointer-events:none;box-shadow:var(--shadow);z-index:3;
}

.card{
  position:absolute;left:50%;top:50%;width:190px;height:190px;margin:-95px 0 0 -95px;
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:18px;
  display:grid;place-items:center;box-shadow:var(--shadow);
}
.card svg{width:88px;height:88px;stroke:var(--lc);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.card.bad{border-color:var(--track);background:var(--track-soft)}
.card.bad svg{stroke:var(--track)}

#zoomArena{position:absolute;inset:0;display:grid;place-items:center}
#zTarget{
  position:absolute;z-index:2;pointer-events:none;
  border:3px dashed var(--ink-3);border-radius:16px;
  transition:border-color .12s;
}
#zTarget.ok{border-color:var(--good);border-style:solid;border-width:4px}
#zShape{
  position:absolute;z-index:1;border-radius:13px;background:var(--lc);
  display:grid;place-items:center;box-shadow:var(--shadow);
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.13) 0 8px,transparent 8px 16px);
}
#zShape.ok{background-color:var(--good)}
#zDelta{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;color:#fff;
  font-variant-numeric:tabular-nums;line-height:1;transition:opacity .1s;
}

#lockSvg{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.lk-ghost{stroke:var(--lc);stroke-width:8;fill:none;opacity:.16;stroke-linecap:round;stroke-linejoin:round}
.lk-trace{stroke:var(--lc);stroke-width:8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.lk-node{fill:var(--sunk)}
.lk-node.key{fill:var(--surface);stroke:var(--lc);stroke-width:2.5;opacity:.55}
.lk-node.on{fill:var(--lc);stroke:var(--lc);opacity:1}
.lk-num{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:16px;fill:var(--ink-3);text-anchor:middle;dominant-baseline:central;pointer-events:none}
#lockSvg.done .lk-trace{stroke:var(--good)}
#lockSvg.done .lk-node.on{fill:var(--good);stroke:var(--good)}

.countdown{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;background:var(--surface);z-index:5;
}
.countdown svg{width:56px;height:56px;stroke:var(--lc);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.countdown b{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:110px;line-height:1;color:var(--lc)}
/* The count has reached zero and the server's seed has not arrived yet. The
   screen has to stay a WAIT and not become a stall — the alternative, the one
   this replaced, was to give up on the seed and start the event unranked
   without a word. The event's own icon pulses; no number, no glyph that is
   not already on this screen, and the reduced-motion block below flattens it
   to a still icon (still correct: the wait is bounded either way). */
.countdown.waiting b{display:none}
.countdown.waiting svg{animation:cd-wait 1.1s ease-in-out infinite}
@keyframes cd-wait{0%,100%{opacity:.28;transform:scale(.94)}50%{opacity:.8;transform:scale(1.06)}}

/* ---- feedback effects ---- */
.fx-ring{
  position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  border:3px solid var(--lc);pointer-events:none;z-index:9;
  animation:fx-ring .42s cubic-bezier(.2,.7,.3,1) forwards;
}
.fx-ring.bad{border-color:var(--track)}
@keyframes fx-ring{from{transform:scale(.5);opacity:.95}to{transform:scale(4.6);opacity:0}}
.fx-flash{position:absolute;inset:0;pointer-events:none;z-index:8;animation:fx-flash .3s ease-out forwards}
.fx-flash.ok{background:var(--good)}
.fx-flash.bad{background:var(--track)}
@keyframes fx-flash{from{opacity:.28}to{opacity:0}}
.fx-burst{position:absolute;pointer-events:none;z-index:9;width:8px;height:8px;margin:-4px 0 0 -4px;
  border-radius:2px;background:var(--lc);animation:fx-burst .5s ease-out forwards}
@keyframes fx-burst{from{transform:translate(0,0) scale(1);opacity:1}
  to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}

/* ---- the meet: the one thing this page is for ---- */
.enter{
  margin:2px var(--pad) 18px;display:flex;flex-direction:column;gap:18px;
  background:var(--track);color:#fff;border-radius:22px;padding:22px 20px 20px;
  width:calc(100% - var(--pad)*2);text-align:left;
  box-shadow:0 2px 0 rgba(21,23,28,.05), 0 24px 40px -26px var(--track);
  transition:transform .12s ease;
}
.enter:active{transform:scale(.99)}
.enter .row1{display:flex;align-items:center;gap:16px}
.enter .pl{
  width:clamp(56px,17vw,72px);aspect-ratio:1;flex:none;border-radius:50%;
  background:rgba(255,255,255,.17);display:grid;place-items:center;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28);
}
.enter .pl svg{width:31px;height:31px;fill:#fff;margin-left:4px}
.enter .n{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;min-width:0;
  font-size:clamp(24px,7.6vw,38px);line-height:.92;letter-spacing:.045em;
  overflow:hidden;
}
.enter .n small{
  display:block;font-size:10px;letter-spacing:.2em;opacity:.72;
  margin-top:7px;font-weight:600;white-space:nowrap;
}
.enter .best{
  display:flex;align-items:baseline;gap:10px;
  border-top:1px solid rgba(255,255,255,.22);padding-top:13px;
}
.enter .best span{font-size:9px;letter-spacing:.2em;opacity:.72;font-weight:600}
.enter .best b{
  margin-left:auto;font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:40px;line-height:.86;font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.enter .best b i{font-style:normal;font-size:11px;letter-spacing:.18em;opacity:.72;margin-left:7px}
/* Offline/unranked dims the trophy instead of removing it: the "goes out"
   read, on a non-colour channel (opacity). Since the masthead dot was
   removed this is the ONLY standing indication that a run cannot be scored,
   so it must never be deleted without a replacement — test/bootstrap.mjs and
   test/notcounted.mjs both assert it. */
.enter.unranked .best .cup{opacity:.25}
.enter .ev6{display:flex;gap:7px}
.enter .ev6 span{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px}
.enter .ev6 svg{width:25px;height:25px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.66}
.enter .ev6 u{
  text-decoration:none;font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:14px;line-height:1;opacity:.78;font-variant-numeric:tabular-nums;
}
.seclbl.solo{padding-top:2px}

/* ---- meet result ---- */
#mr .board{padding-top:2px}
.totalcard{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:20px 18px 18px;text-align:center;box-shadow:var(--shadow);margin-bottom:12px;
}
.totalcard .big{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:74px;line-height:.82;font-variant-numeric:tabular-nums}
.totalcard .of{font-size:11px;letter-spacing:.2em;color:var(--ink-3);margin-top:8px}
.totalcard .strip{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--sunk);margin-top:14px}
.totalcard .strip i{display:block;height:100%}
.brk{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.brk .r{display:grid;grid-template-columns:24px 24px 1fr auto;align-items:center;gap:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:9px 12px}
.brk .no{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:14px;color:var(--ink-3)}
.brk svg{width:20px;height:20px;stroke:var(--lc);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.brk .evn{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:17px;letter-spacing:.04em;
  color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brk .p{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:21px;text-align:right;font-variant-numeric:tabular-nums}
.idrow{
  display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:9px 11px;margin-bottom:12px;
}
.idrow button.mini{font-size:20px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:9px;padding:6px 10px;line-height:1;flex:none}
.idrow .handle{
  flex:1;min-width:0;font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:21px;letter-spacing:.05em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.idrow .roll{font-size:17px;background:var(--track);border-color:var(--track)}
.handlebar{
  display:flex;align-items:center;gap:11px;margin:4px var(--pad) 4px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:9px 11px;
}
.handlebar .handle{flex:1;min-width:0;font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:21px;letter-spacing:.05em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.handlebar button{font-size:17px;background:var(--track);border:1px solid var(--track);
  border-radius:9px;padding:6px 10px;line-height:1;flex:none}
#shareCanvas{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);display:block;margin-bottom:12px;box-shadow:var(--shadow)}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}