/* Layout: the rink fills the whole screen; a glass HUD sits on top (info card top-left, icons top-right,
   status pill + dock at the bottom). Everything else opens from the dock as a sheet over the game. */
:root{
  --bg:#08121a; --surface:#f7fafc; --ink:#0e2130; --muted:#5d7180; --rule:#d5e0e7;
  --glass:rgba(247,250,252,.82); --glass-ink:#0e2130; --glass-muted:#55697a; --glass-rule:rgba(14,33,48,.12);
  --red:#d42a3c; --blue:#2a62c4; --gold:#b98a1d; --skater:#d42a3c; --onaccent:#ffffff;
  --ice:#f3f8fb; --ice-2:#dfeaf1; --board:#ffffff; --pad:#1d4f9c; --pad-2:#e8b425; --scratch:rgba(70,100,125,.22);
  --f-display:"Black Han Sans","IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-body:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --f-num:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --sl:max(12px,env(safe-area-inset-left,0px)); --sr:max(12px,env(safe-area-inset-right,0px));
  --st:max(12px,env(safe-area-inset-top,0px)); --sb:max(10px,env(safe-area-inset-bottom,0px));
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --surface:#0f1d28;--ink:#e6f0f6;--muted:#8ea3b2;--rule:#1f3242;--glass:rgba(12,26,38,.78);--glass-ink:#e6f0f6;--glass-muted:#9fb3c2;--glass-rule:rgba(255,255,255,.12);
  --red:#ff5468;--gold:#e0b44a;--ice:#cfdfe9;--ice-2:#bccfdc;--board:#d9e3ea;--pad:#173f80;--pad-2:#c99a1c;--scratch:rgba(40,70,95,.28);color-scheme:dark}}
:root[data-theme="dark"]{
  --surface:#0f1d28;--ink:#e6f0f6;--muted:#8ea3b2;--rule:#1f3242;--glass:rgba(12,26,38,.78);--glass-ink:#e6f0f6;--glass-muted:#9fb3c2;--glass-rule:rgba(255,255,255,.12);
  --red:#ff5468;--gold:#e0b44a;--ice:#cfdfe9;--ice-2:#bccfdc;--board:#d9e3ea;--pad:#173f80;--pad-2:#c99a1c;--scratch:rgba(40,70,95,.28);color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg)}
body{color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
button:focus-visible,input:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
svg{width:20px;height:20px;display:block;flex:none}

.stage{position:fixed;inset:0;overflow:hidden;background:#0b1620}
canvas#fpv{position:absolute;inset:0;width:100%;height:100%;display:block}
canvas#fpv{touch-action:none}
.stage.lounge canvas#fpv{cursor:crosshair}
.stage.orbit:not(.lounge) canvas#fpv{cursor:grab}
.stage.top canvas#fpv{display:none}
canvas#rink{position:absolute;right:var(--sr);top:calc(var(--st) + 54px);width:min(30vw,240px);aspect-ratio:16/9;border-radius:12px;border:1.5px solid rgba(255,255,255,.7);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.stage.top canvas#rink{inset:0;width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}
.stage.lounge canvas#rink,.stage.birdseye canvas#rink,.stage.nomap canvas#rink{display:none}
.stage::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .25s;z-index:30}
.stage.flash::after{opacity:.85;transition:none}

.glass{background:var(--glass);color:var(--glass-ink);border:1px solid var(--glass-rule);backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);box-shadow:0 6px 22px rgba(0,0,0,.18)}
.info{position:absolute;left:var(--sl);top:var(--st);border-radius:16px;padding:9px 13px 10px;max-width:min(360px,calc(100vw - 190px));display:grid;gap:3px;z-index:5}
.info .logo{width:132px;height:auto;display:block;margin:0 0 2px -2px}
.info #cap{font-size:13px;font-weight:600;line-height:1.35}
.info .meta{font-family:var(--f-num);font-size:11px;color:var(--glass-muted);display:flex;gap:4px 10px;flex-wrap:wrap}
.info .meta #who::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-right:5px;vertical-align:1px;animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}
.icons{position:absolute;right:var(--sr);top:var(--st);border-radius:14px;display:flex;align-items:center;padding:4px;gap:2px;z-index:5}
.icons .ib{display:grid;place-items:center;width:36px;height:36px;border-radius:10px}
.icons .ib:hover{background:var(--glass-rule)}
.icons .ib[aria-pressed="true"]{color:var(--red)}
.icons .sep{width:1px;height:20px;background:var(--glass-rule);margin:0 3px}
.rinksw{display:flex;gap:2px}
.rinksw button{font-size:12.5px;font-weight:700;padding:7px 10px;border-radius:10px;white-space:nowrap}
.rinksw button[aria-selected="true"]{background:var(--glass-ink);color:var(--glass)}
.icons .ib .off{display:none}
#bSound[aria-pressed="false"] .on{display:none}#bSound[aria-pressed="false"] .off{display:block}

.bottom{position:absolute;left:0;right:0;bottom:var(--sb);display:grid;justify-items:center;gap:8px;z-index:6;pointer-events:none;padding:0 var(--sr) 0 var(--sl)}
.bottom>*{pointer-events:auto}
.pill{border-radius:999px;padding:5px 14px;font-size:12.5px;font-weight:600;display:flex;gap:10px;align-items:center;font-family:var(--f-num);white-space:nowrap}
.pill b{font-weight:600}
.pill .sep{opacity:.35}
.stage.lounge .pill .race-only{display:none}
.dock{border-radius:18px;padding:5px;display:flex;gap:2px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.dock::-webkit-scrollbar{display:none}
.dockset{display:flex;gap:2px}
.dk{display:grid;justify-items:center;gap:3px;min-width:56px;padding:8px 6px 6px;border-radius:13px;font-size:11px;font-weight:600;color:var(--glass-ink);transition:background .15s,transform .08s}
.dk:hover{background:var(--glass-rule)}
.dk:active{transform:translateY(1px)}
.dk .lb{white-space:nowrap;line-height:1.1}
.dk[aria-pressed="true"],.dk[aria-expanded="true"]{background:var(--glass-ink);color:var(--glass)}
.dk.go{background:var(--red);color:#fff}
.dk.go[aria-pressed="true"]{background:var(--glass-ink);color:var(--glass)}
.dk .ic-pause{display:none}.dk.go[aria-pressed="true"] .ic-play{display:none}.dk.go[aria-pressed="true"] .ic-pause{display:block}
.kbd{display:none}

.toast{position:absolute;left:50%;top:calc(var(--st) + 64px);transform:translateX(-50%);background:var(--glass-ink);color:var(--glass);padding:9px 16px;border-radius:12px;font-size:14px;font-weight:600;opacity:0;transition:opacity .3s;pointer-events:none;text-align:center;max-width:min(92vw,520px);z-index:20}
.toast.on{opacity:1}
.pushbtn{position:absolute;left:0;top:0;z-index:7;transform:translate(-50%,calc(-100% - 10px));background:var(--red);color:#fff;font-weight:700;font-size:14px;line-height:1;padding:9px 14px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.32);white-space:nowrap;animation:pop .18s ease-out}
.pushbtn::after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top-color:var(--red)}
.pushbtn:active{filter:brightness(.92)}
@keyframes pop{from{opacity:0;transform:translate(-50%,calc(-100% - 2px)) scale(.85)}}

.joy{display:none;position:absolute;left:var(--sl);bottom:calc(var(--sb) + 112px);width:116px;height:116px;border-radius:50%;background:rgba(10,30,50,.32);border:2px solid rgba(255,255,255,.55);touch-action:none;backdrop-filter:blur(3px);z-index:4}
.joy .knob{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.stage.lounge .joy{display:block}
.camctl{display:none;position:absolute;right:var(--sr);top:50%;transform:translateY(-50%);flex-direction:column;gap:6px;z-index:4}
.stage.lounge .camctl,.stage.orbit .camctl{display:flex}
.camctl button{border-radius:12px;min-width:46px;padding:9px 10px;font-size:15px;font-weight:600}
.camctl .shotbtn{background:var(--red);color:#fff;border-color:var(--red);font-size:13px}

/* sheets that open from the dock */
.sheet{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--sb) + 116px);width:min(560px,calc(100vw - 24px));max-height:min(62vh,640px);overflow:auto;border-radius:20px;padding:16px 18px 18px;z-index:12;display:grid;gap:14px;align-content:start;overscroll-behavior:contain}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:10px;position:sticky;top:-16px;margin:-16px -18px 0;padding:14px 12px 8px 18px;background:inherit;border-radius:20px 20px 0 0;z-index:1}
.sheet-head h2{font-family:var(--f-display);font-weight:400;font-size:22px;margin:0;line-height:1.1}
.sheet-head p{margin:2px 0 0;font-size:12.5px;color:var(--glass-muted)}
.x{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;flex:none}
.x:hover{background:var(--glass-rule)}
.sheet h3{font-family:var(--f-display);font-weight:400;font-size:18px;margin:4px 0 0}
.sheet .btn{border:1px solid var(--glass-rule);background:var(--glass);border-radius:12px;padding:9px 14px;font-weight:600;font-size:14px}
.sheet .btn.primary,.shot .btn.primary{background:var(--red);border-color:var(--red);color:#fff}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--glass-rule);border-radius:14px;overflow:hidden}
.stat{background:var(--glass);padding:9px 12px;min-width:0}
.stat b{display:block;font-family:var(--f-num);font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat span{font-size:11.5px;color:var(--glass-muted)}
.stamps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.stamp{display:grid;justify-items:center;gap:5px;text-align:center;min-width:0}
.seal{width:100%;max-width:74px;aspect-ratio:1;border-radius:50%;border:2px dashed var(--glass-rule);display:grid;place-items:center;color:var(--glass-muted);font-family:var(--f-display);font-size:14px;line-height:1.05;padding:8px;transition:transform .4s}
.stamp.got .seal{border:3px double var(--red);color:var(--red);transform:rotate(-8deg);background:color-mix(in srgb,var(--red) 8%,transparent)}
.stamp.got.fresh .seal{animation:thunk .5s ease-out}
@keyframes thunk{0%{transform:scale(1.6) rotate(-20deg);opacity:0}70%{transform:scale(.94) rotate(-6deg);opacity:1}100%{transform:rotate(-8deg)}}
.stamp small{font-size:11px;color:var(--glass-muted);line-height:1.3}
.stamp.got small{color:var(--glass-ink)}
form{display:grid;grid-template-columns:100px minmax(0,1fr) auto;gap:8px}
#cheerForm,#banForm{grid-template-columns:minmax(0,1fr) auto}
.mynick{margin:0 0 8px;font-size:13px;color:var(--ink-2,#5b6b78);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mynick .nick-val{color:var(--ink,#0e2130)}
.reroll{font:inherit;font-size:12px;padding:3px 9px;border-radius:999px;border:1px solid currentColor;background:transparent;color:inherit;opacity:.8;cursor:pointer}
.reroll:hover{opacity:1}
.hidebtn{font-size:11px;padding:1px 7px;margin-left:4px;vertical-align:1px}
input{font:inherit;font-size:14px;border:1px solid var(--glass-rule);border-radius:12px;padding:9px 12px;background:var(--glass);color:var(--glass-ink);min-width:0;width:100%}
.note{font-size:12.5px;color:var(--glass-muted);margin:0}
.cheers{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--glass-rule)}
.cheers li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:9px 2px;border-bottom:1px solid var(--glass-rule)}
.cheers li p{margin:0;overflow-wrap:anywhere}
.cheers li span{font-size:12px;color:var(--glass-muted);white-space:nowrap}
.cheers li em{font-style:normal;font-size:12px;color:var(--glass-muted);grid-column:1/-1}
.empty{padding:14px 4px;color:var(--glass-muted);font-size:14px}
.card-row{display:grid;grid-template-columns:140px minmax(0,1fr);gap:14px;align-items:center}
@media (max-width:420px){.card-row{grid-template-columns:110px minmax(0,1fr)}}
canvas#card{width:100%;aspect-ratio:4/5;border-radius:10px;border:1px solid var(--glass-rule);display:block}
.btns{display:flex;flex-wrap:wrap;gap:8px}
.facts{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:13.5px}
.facts li{display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px}
.facts b{font-family:var(--f-num);font-weight:600;font-size:12.5px;color:var(--red)}
.people{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.people li{display:flex;align-items:center;gap:7px;border:1px solid var(--glass-rule);border-radius:999px;padding:5px 12px 5px 8px;font-size:13.5px}
.people i{width:12px;height:12px;border-radius:50%;display:inline-block}
.emotes{display:flex;flex-wrap:wrap;gap:8px}
.shot{position:absolute;inset:0;z-index:25;display:grid;place-items:center;background:rgba(4,10,16,.55);padding:20px}
.shot .box{border-radius:20px;padding:14px;display:grid;gap:12px;width:min(640px,100%);max-height:100%;overflow:auto}
.shot img{width:100%;border-radius:12px;display:block}
.shot h2{font-family:var(--f-display);font-weight:400;font-size:20px;margin:0}
.shot .btn{border:1px solid var(--glass-rule);border-radius:12px;padding:9px 14px;font-weight:600}
@media (max-width:600px){
  .info{top:calc(var(--st) + 50px);max-width:calc(100vw - 24px - 36vw - 10px);padding:8px 11px}.info .logo{width:104px}.info #cap{font-size:12px}
  .rinksw button{padding:6px 8px;font-size:12px}.icons .ib{width:32px;height:32px}
  canvas#rink{width:36vw;top:calc(var(--st) + 50px)}
  .icons{left:auto}
  .dk{min-width:43px;font-size:10px;padding:7px 3px 5px}.dock{padding:4px;gap:0}
  .sheet{bottom:calc(var(--sb) + 108px);max-height:58vh}
  .toast{top:calc(var(--st) + 150px)}
}
@media (max-width:400px){.dk{min-width:39px;padding:7px 2px 5px;font-size:10px}.dock{padding:3px}}
.sheet h4{margin:2px 0 -4px;font-size:13px;font-weight:700;color:var(--glass-muted)}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tile{display:grid;justify-items:center;align-content:center;gap:6px;min-height:84px;padding:12px 8px;border-radius:18px;background:color-mix(in srgb,var(--glass) 70%,#fff 30%);border:1px solid var(--glass-rule);box-shadow:0 1px 2px rgba(0,0,0,.06);font-size:13px;font-weight:700;text-align:center;line-height:1.25;transition:transform .08s,background .15s}
.tile:hover{background:var(--glass)}
.tile:active{transform:translateY(1px)}
.tile .emo{font-size:24px;line-height:1}
.note.fine{font-size:12px;line-height:1.6}
.stage.lounge .race-only,.stage:not(.lounge) .lounge-only{display:none!important}
.sheet{border-radius:26px}
.x{border-radius:50%;background:var(--glass-rule)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tile{background:rgba(255,255,255,.06)}}
:root[data-theme="dark"] .tile{background:rgba(255,255,255,.06)}
@media (prefers-reduced-motion:reduce){.info .meta #who::before{animation:none}.stamp.got.fresh .seal{animation:none}}
.ib.lang{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font:700 12px var(--f-body);color:inherit}