:root { color-scheme: dark; --ink:#eaf6ff; --muted:#8da1ae; --line:#27404c; --panel:#10232c; --cyan:#3ce6df; --red:#ff626c; --green:#7ee66b; --yellow:#ffd75d; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; background:#071319; color:var(--ink); font:15px/1.35 ui-monospace,Consolas,monospace; display:grid; place-items:center; }
main { width:min(960px,100%); padding:22px; } header,.controls { display:flex; align-items:center; justify-content:space-between; gap:16px; } h1 { margin:0; letter-spacing:-.06em; font-size:clamp(28px,5vw,52px); } .eyebrow { color:var(--cyan); font-size:11px; margin:0 0 3px; letter-spacing:.08em; }
.status { display:flex; align-items:center; gap:8px; color:var(--muted); } .status small { border-left:1px solid var(--line); padding-left:8px; } #dot { width:9px;height:9px;border-radius:50%;background:#647681; } #dot.live { background:var(--cyan); box-shadow:0 0 14px var(--cyan); }
.game-shell { margin:18px auto 12px; width:min(900px,100%); max-width:100%; border:1px solid var(--line); background:#9bcde3; position:relative; overflow:hidden; box-shadow:0 22px 70px #0008; } .game-shell:fullscreen { width:min(100vw,calc(100vh * 640 / 501)); border:0; box-shadow:none; } canvas { display:block; width:100%; height:auto; aspect-ratio:640/501; cursor:pointer; image-rendering:auto; } #overlay { position:absolute; inset:0; display:grid; place-content:center; gap:8px; text-align:center; background:#071319c9; color:var(--muted); } #overlay[hidden] { display:none; } #overlay strong { color:var(--ink); font-size:22px; }
.controls { flex-wrap:wrap; padding:12px; border:1px solid var(--line); background:var(--panel); } label { display:flex; align-items:center; gap:8px; color:var(--muted); } input,button { font:inherit; border:1px solid var(--line); background:#08171e; color:var(--ink); padding:9px 12px; } input { width:130px; } #room { text-transform:uppercase; } button { cursor:pointer; } button:hover:not(:disabled) { border-color:var(--cyan); } button:disabled { opacity:.45; cursor:not-allowed; } #join { border-color:var(--cyan); color:var(--cyan); } #players { margin-left:auto; color:var(--muted); } kbd { color:var(--cyan); }
@media (max-width:620px) { body { display:block; min-height:100svh; } main { width:100%; padding:8px; } header { align-items:flex-start; gap:8px; } h1 { font-size:24px; } .eyebrow { display:none; } .status { max-width:54%; flex-wrap:wrap; justify-content:flex-end; gap:4px; font-size:10px; } .status small { padding-left:4px; } .game-shell { width:calc(100vw - 16px); margin:8px auto; } .controls { gap:6px; padding:8px; font-size:12px; } .controls button { padding:7px 9px; } #players { width:100%; margin-left:0; } }
@supports (height:100svh) { @media (max-width:620px) { .game-shell { width:min(calc(100vw - 16px),calc((100svh - 168px) * 640 / 501)); } } }

#front-screen,#end-screen { position:absolute; inset:0; z-index:2; overflow:hidden; }
#front-screen { background:#000 url('/assets/menu/loading-splash.png') center/cover no-repeat; }
#front-screen[data-phase="menu"] { background-image:url('/assets/menu/menu-background.png'); }
#loading-panel,#menu-panel,#lobby-panel { position:absolute; inset:0; display:grid; place-items:center; text-align:center; }
#loading-panel { align-content:end; padding:0 0 38px 0; color:#fff; font-size:19px; font-weight:bold; letter-spacing:.12em; text-shadow:0 0 9px #fff; animation:loading-out .35s .9s forwards; }
#loading-panel i { width:176px; height:4px; margin-top:10px; overflow:hidden; background:#18252c; border:1px solid #63737d; }
#loading-panel i::after { content:''; display:block; height:100%; background:#e1fbff; animation:loading-bar .8s ease-out forwards; }
#menu-panel { opacity:0; pointer-events:none; align-content:end; gap:11px; padding:0 0 74px; background:linear-gradient(180deg,#020609 0 42%,#020609dd 48%,transparent 70%); transition:opacity .35s .72s; }
#front-screen[data-phase="menu"] #menu-panel { opacity:1; pointer-events:auto; }
#front-screen[data-phase="menu"] #loading-panel { display:none; }
#lobby-panel { display:none; padding:26px; background:linear-gradient(180deg,#020609aa,#08141bd9); }
#front-screen[data-phase="lobby"] { background-image:url('/assets/menu/menu-background.png'); }
#front-screen[data-phase="lobby"] #lobby-panel { display:grid; }
.lobby-card { width:min(548px,100%); display:grid; gap:10px; padding:18px; border:1px solid #5f91a7; background:#07141ce8; box-shadow:0 12px 36px #000b; }
.lobby-card strong { font-size:25px; letter-spacing:.08em; }.lobby-kicker { color:var(--cyan); letter-spacing:.16em; font-size:12px; }.lobby-card p { margin:0; color:#b8d0dc; }.lobby-card ol { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0; padding:0; list-style:none; }
#lobby-progress { display:grid; gap:5px; color:#b8d0dc; font-size:12px; text-align:left; } #lobby-progress i { display:block; height:7px; overflow:hidden; border:1px solid #386276; background:#08171e; } #lobby-progress b { display:block; width:0; height:100%; background:linear-gradient(90deg,#3ce6df,#b8fbff); box-shadow:0 0 10px #3ce6df; transition:width .18s ease; }
.lobby-card li { position:relative; aspect-ratio:1; display:grid; grid-template-rows:auto 1fr auto; place-items:center; min-width:0; padding:6px; border:1px solid #284552; background:#0c2029; color:#8da1ae; }.lobby-card li.occupied { color:#edf8ff; border-color:var(--role-color); box-shadow:inset 0 0 18px color-mix(in srgb,var(--role-color) 14%,transparent); }.lobby-name { width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }.lobby-avatar { width:72%; aspect-ratio:65/77; align-self:center; background:var(--avatar-image) 0 0/1500% 900% no-repeat; opacity:.25; }.occupied .lobby-avatar { opacity:1; filter:drop-shadow(0 2px 5px #000); }.lobby-card li em { color:var(--role-color); font-size:11px; font-style:normal; }.lobby-card li b { position:absolute; right:5px; bottom:4px; color:#ffd95c; font-size:10px; }.lobby-card button { justify-self:center; min-width:216px; }
.menu-title-mask { position:absolute; top:65px; left:50%; display:grid; place-items:center; width:360px; min-height:145px; margin:auto; transform:translateX(-50%); background:linear-gradient(180deg,#03070b,#101a24); border-block:1px solid #3c5669; box-shadow:0 0 35px #000; text-transform:uppercase; }
.menu-title-mask strong { color:#eaf7ff; font-size:46px; letter-spacing:.16em; text-shadow:0 0 10px #70d8ff,2px 3px 0 #273640; }
.menu-title-mask span { color:#ffd95c; font-size:18px; letter-spacing:.58em; margin-right:-.58em; }
#menu-panel p { margin:0; color:#dbeaf1; text-shadow:0 2px 3px #000; }
#menu-panel label { justify-self:center; padding:7px 10px; background:#060d12d9; border:1px solid #4a6575; color:#cae6ef; }
#menu-panel #room { width:128px; padding:5px 8px; border-color:#7896a4; background:#071117; }
.menu-actions { display:flex; justify-content:center; gap:8px; }
#menu-start,#solo-start,#back-menu { min-width:154px; justify-self:center; padding:10px 18px; border:1px solid #d8e8f0; background:linear-gradient(#314b5b,#101f2b); color:#fff; font-weight:bold; letter-spacing:.12em; text-shadow:0 1px #000; box-shadow:inset 0 0 0 2px #14232d,0 4px 14px #0008; }
#menu-start:hover,#solo-start:hover,#back-menu:hover { border-color:#f5d961; color:#fff4ad; }
#end-screen { z-index:4; background:#000 url('/assets/menu/multi-end.png') center/cover no-repeat; animation:end-in .45s ease-out; }
#end-screen[hidden],#front-screen[hidden] { display:none; }
#overlay { z-index:3; }
#spectator-banner { position:absolute; z-index:1; top:66px; left:50%; transform:translateX(-50%); padding:7px 13px; border:1px solid #d8c56f; background:#111c25dc; color:#fff0a8; font-weight:bold; text-shadow:0 1px #000; } #spectator-banner[hidden] { display:none; }
#end-rankings { position:absolute; inset:0; margin:0; padding:0; list-style:none; pointer-events:none; }
#end-rankings li { position:absolute; display:grid; place-items:center; }
#end-rankings li:nth-child(1) { left:16.40625%; top:29.94012%; width:23.4375%; height:37.92415%; }
#end-rankings li:nth-child(2) { left:51.5625%; top:22.55489%; width:9.0625%; height:14.37126%; }
#end-rankings li:nth-child(3) { left:51.5625%; top:41.91617%; width:9.0625%; height:14.37126%; }
#end-rankings li:nth-child(4) { left:51.5625%; top:63.07385%; width:9.0625%; height:14.37126%; }
.rank-avatar { display:block; width:100%; aspect-ratio:65/77; background:var(--avatar-image) 0 0/1500% 900% no-repeat; filter:drop-shadow(0 3px 5px #000); }
#end-rankings li:nth-child(1) .rank-avatar { width:86.66667%; }
.rank-score { position:absolute; left:50%; top:100%; transform:translateX(-50%); padding:1px 4px; border:1px solid #456170; background:#061017d9; color:#eaf6ff; font-size:clamp(7px,2.1vw,14px); font-weight:bold; line-height:1.15; white-space:nowrap; text-shadow:0 1px #000; }
#end-rankings li:nth-child(1) .rank-score { top:79%; }
#next-round { position:absolute; right:12px; bottom:12px; z-index:1; min-width:94px; padding:7px 10px; border-color:#d8e8f0; background:linear-gradient(#314b5b,#101f2b); color:#fff; font-size:12px; font-weight:bold; text-shadow:0 1px #000; }
#page-refresh { border-color:#5e93a7; color:#d6edf5; }
#dev-panel { position:fixed; z-index:20; top:10px; right:10px; width:276px; max-height:calc(100dvh - 20px); overflow:auto; padding:10px; border:1px solid #3ce6df; background:#07151de8; color:#d8edf5; box-shadow:0 10px 30px #000a; font-size:12px; backdrop-filter:blur(7px); }
#dev-panel header { display:flex; justify-content:space-between; align-items:center; gap:8px; } #dev-panel header strong { color:#5bf6ef; letter-spacing:.05em; } #dev-panel header button { padding:3px 7px; font-size:11px; }
#dev-panel p { margin:7px 0; color:#94abb6; line-height:1.35; } #dev-panel.collapsed { width:auto; min-width:0; } #dev-panel.collapsed > :not(header) { display:none; }
.dev-overlay-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; padding:7px 0; border-block:1px solid #264755; color:#b8d6df; } .dev-overlay-options label { white-space:nowrap; }
.dev-tuning-controls { display:grid; gap:7px; padding:8px 0; } .dev-tuning-controls label { display:grid; grid-template-columns:1fr auto; gap:2px 7px; align-items:center; } .dev-tuning-controls input { grid-column:1/-1; width:100%; accent-color:#3ce6df; } .dev-tuning-controls output { color:#ffd95c; font-variant-numeric:tabular-nums; }
.dev-readout { display:block; margin:0 0 7px; padding:5px; border:1px solid #294b59; background:#051018; color:#aee5ed; font:10px/1.35 ui-monospace,Consolas,monospace; font-variant-numeric:tabular-nums; }
.dev-actions { display:flex; flex-wrap:wrap; gap:5px; } .dev-actions button,.dev-import { padding:5px 7px; border:1px solid #416b7c; background:#102a36; color:#e8f8ff; font-size:11px; cursor:pointer; } .dev-import input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; }
.controls > span { color:var(--muted); }
@keyframes loading-bar { from { width:0; } to { width:100%; } }
@keyframes loading-out { to { opacity:0; transform:translateY(8px); } }
@keyframes end-in { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:scale(1); } }
@media (max-width:620px) {
  header { display:block; }
  .status { max-width:none; justify-content:flex-start; }
  #diagnostics { display:none; }
  .controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; }
  .controls button { min-height:42px; padding:7px 4px; white-space:nowrap; }
  #flip kbd { display:none; }
  #course-status,#players { grid-column:1/-1; width:auto; margin-left:0; }
  #course-status { padding-top:2px; }

  #lobby-panel { padding:10px; }
  .lobby-card { width:min(440px,100%); gap:5px; padding:10px; }
  .lobby-kicker { font-size:10px; }
  .lobby-card strong { font-size:20px; }
  .lobby-card p { font-size:11px; line-height:1.2; }
  #lobby-progress { gap:3px; font-size:10px; }
  #lobby-progress i { height:5px; }
  .lobby-card ol { gap:4px; }
  .lobby-card li { height:74px; aspect-ratio:auto; padding:3px; }
  .lobby-name { font-size:10px; }
  .lobby-avatar { width:38px; }
  .lobby-card li em { font-size:9px; line-height:1.1; }
  .lobby-card li b { right:3px; bottom:2px; font-size:8px; }
  #lobby-start { min-width:0; min-height:42px; width:min(220px,100%); padding:8px; }

  .menu-title-mask { top:12px; transform:translateX(-50%) scale(.55); transform-origin:top center; }
  #menu-panel { padding:0 8px 12px; gap:4px; }
  #menu-panel p { display:none; }
  #menu-panel label { padding:3px 6px; font-size:12px; }
  #menu-panel input { width:126px; padding:4px 6px; }
  .menu-actions { gap:5px; }
  #menu-start,#solo-start { min-width:0; padding:8px 10px; }
  #dev-panel { top:auto; right:6px; bottom:6px; width:min(284px,calc(100vw - 12px)); max-height:55dvh; }
}