:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; color: #e0e0da; background:#101110; --red:#c32f28; --muted:#a9aaa2; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; display:grid; place-items:center; background:radial-gradient(ellipse at 50% 35%,#292b27 0%,#101110 70%); } button,input,select { font:inherit; } button { cursor:pointer; } button:disabled { cursor:default; opacity:.45; } [hidden] { display:none !important; }
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible { outline:2px solid #e8bd77; outline-offset:4px; } button { color:inherit; } #app { width:min(100%,1160px); padding:0 24px; } .toolbar { height:62px; display:flex; align-items:center; justify-content:space-between; gap:12px; } .brand { font-family:Impact,'Arial Narrow',sans-serif; font-size:22px; letter-spacing:1px; text-decoration:none; color:#d7d8d1; white-space:nowrap; }.brand span { font:10px Arial,sans-serif; letter-spacing:2px; color:#8c9087; margin-left:12px; } .toolbar-actions { display:flex; align-items:center; gap:18px; } #connection { color:#8f978b; font-size:10px; letter-spacing:1.2px; } .toolbar button,.footer button { border:0; background:none; font-size:10px; letter-spacing:1px; padding:8px 0; color:#c4c6bc; } #fullscreen { font-size:23px; } #stage-wrap { position:relative; margin:auto; border:1px solid #494d41; box-shadow:0 20px 80px #0009; overflow:hidden; background:black; } #stage { position:absolute; left:0; top:0; width:1024px; height:768px; transform-origin:top left; } #game { position:absolute; inset:0; width:1024px; height:768px; outline:0; cursor:default; }
#menu { position:absolute; inset:0; background:url('/assets/menu.jpg') center/100% 100%; } .menu-heading { position:absolute; left:196px; top:34px; } .menu-heading >span { font-size:10px; letter-spacing:3.5px; color:#aaa; } h1,h2,h3,.nav-button,.action,.room-code,.result-score { font-family:Impact,'Arial Narrow','Helvetica Neue',sans-serif; font-weight:400; } h1 { margin:5px 0 0; font-size:47px; letter-spacing:2px; text-shadow:2px 3px #000; } .main-nav { position:absolute; left:198px; top:120px; width:295px; padding:17px 24px; height:335px; display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(90deg,#1119,#1113); } .nav-button { display:flex; align-items:center; gap:12px; text-align:left; width:100%; padding:9px 0; border:0; background:none; font-size:29px; line-height:1; letter-spacing:.5px; text-shadow:1px 2px #0009; transition:color .15s,transform .15s; } .nav-button small { font:8px Arial,sans-serif; letter-spacing:1px; color:#d0d0c9; } .nav-button:hover,.nav-button.selected,.nav-button.primary { color:#ed4438; }.nav-button:hover { transform:translateX(4px); } .menu-panel { position:absolute; left:612px; top:118px; width:274px; height:523px; padding:24px 20px 18px; background:#171a15d9; border-top:2px solid #c32f28; overflow-y:auto; scrollbar-width:thin; }.eyebrow { font-size:9px; letter-spacing:1.8px; color:#c4c6b8; margin:0 0 15px; }.menu-panel h2 { font-size:33px; line-height:1.08; letter-spacing:.7px; margin:0 0 22px; } p { font-size:12px; line-height:1.65; color:#d0d0c7; } .menu-panel p { margin:14px 0; }.menu-panel .eyebrow { margin-top:0; } .menu-panel h3 { margin:24px 0 4px; font-size:23px; }.menu-panel h3+p { margin-top:0; font-size:11px; color:var(--muted); }.rule { height:1px; background:#ffffff24; margin:24px 0; } .accent { color:#f1a087; }.panel-footer { margin-top:42px; font-size:8px; letter-spacing:1px; color:#a6b697; display:flex; align-items:center; gap:8px; }.dot { display:inline-block; width:5px; height:5px; border-radius:50%; background:#8da27b; }.menu-bottom { position:absolute; bottom:27px; right:50px; font-size:10px; letter-spacing:3px; color:#b6bcac; text-shadow:1px 1px black; }
label { display:block; font-size:11px; color:#d3d5cb; margin:13px 0 7px; } input:not([type=checkbox]):not([type=range]),select { background:#0b0e0ac9; border:1px solid #646859; color:#eee; border-radius:0; padding:10px; width:100%; font-size:13px; height:37px; } select { padding:7px; } #room-code { text-transform:uppercase; letter-spacing:5px; } .action { width:100%; background:#9f2521; border:1px solid #da5142; padding:11px 8px; margin-top:14px; font-size:19px; letter-spacing:1px; box-shadow:0 2px 0 #0008; }.action:hover { background:#c03027; }.action.secondary { background:#33372e; border-color:#6e7560; color:#e3e6d9; }.action.secondary:hover { background:#464d3d; }.text-button { border:0; background:none; width:100%; margin-top:17px; padding:7px 0; font-size:10px; letter-spacing:1px; color:#c6cbbd; text-decoration:underline; text-underline-offset:4px; }.or { font-size:8px; color:#9a9f90; margin:24px 0 15px; letter-spacing:.8px; }.hint { font-size:10px; line-height:1.6; color:#afb5a6; }.switch-row { display:flex; align-items:center; justify-content:space-between; position:relative; gap:10px; min-height:23px; margin-top:17px; }.switch-row input { position:absolute; right:0; width:33px; height:20px; opacity:0; cursor:pointer; z-index:1; }.switch { display:block; width:32px; height:17px; background:#4f5548; border:1px solid #78806e; }.switch::before { content:''; display:block; background:#d1d6c7; width:11px; height:11px; margin:2px; transition:transform .12s; }.switch-row input:checked+.switch { background:#8b2822; border-color:#d85441; }.switch-row input:checked+.switch::before { transform:translateX(15px); }.switch-row input:focus-visible+.switch { outline:2px solid #e8bd77; outline-offset:4px; }.switch-row input:disabled+.switch { opacity:.4; } input[type=range] { width:100%; accent-color:#c84b39; margin:0; height:13px; } output { float:right; font-size:10px; color:#aab29d; }.controls-list { display:grid; grid-template-columns:100px 1fr; gap:12px 7px; font-size:11px; }.controls-list dt { color:#efdfc5; }.controls-list dd { margin:0; color:#c0c6b5; }.room-code { font-size:39px; letter-spacing:7px; color:#f3d7ba; margin:4px 0 16px; }.roster { list-style:none; padding:0; margin:0; }.roster li { font-size:12px; padding:9px 0; border-bottom:1px solid #ffffff1a; display:flex; justify-content:space-between; align-items:center; }.roster small { color:#89967e; font-size:8px; }.address { overflow-wrap:anywhere; user-select:all; }.score-list { padding:0; list-style:none; counter-reset:scores; }.score-list li { counter-increment:scores; display:flex; justify-content:space-between; gap:5px; border-bottom:1px solid #ffffff18; padding:10px 0; font-size:12px; }.score-list li::before { content:counter(scores,decimal-leading-zero); color:#939e87; font-size:10px; }.score-list span { flex:1; margin-left:5px; }.score-list small { display:block; font-size:8px; color:#8e9a81; margin-top:4px; }.score-list strong { color:#f0dcc3; }
.overlay { position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:center; background:#080b08ad; backdrop-filter:blur(3px); }.dialog { width:340px; padding:32px; background:#1b2019f5; border:1px solid #5f6855; border-top:3px solid var(--red); box-shadow:0 18px 80px #000; }.dialog h2 { margin:0 0 16px; font-size:38px; letter-spacing:1px; }.dialog .eyebrow { font-size:9px; }.dialog .hint { margin-bottom:18px; }.result-score { font-size:76px; color:#e6d8bb; line-height:1; margin:22px 0 0; } #toast { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); background:#1b2019f5; border-left:3px solid #cf563f; padding:12px 18px; font-size:13px; z-index:10; box-shadow:0 5px 25px #000; max-width:750px; } #loading { position:absolute; inset:0; background:#050505; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:20; } #loading img { width:700px; height:500px; object-fit:contain; } #loading p { color:#ec6e55; letter-spacing:3px; font-size:12px; }.footer { height:42px; display:flex; align-items:center; justify-content:space-between; gap:12px; color:#8e9586; font-size:9px; letter-spacing:.6px; }.footer b { color:#5a6151; margin:0 9px; } #mode-label { color:#bdc5ad; font-size:9px; white-space:nowrap; }
@media(max-width:760px) { #app { padding:0 8px; }.brand { font-size:17px; }.brand span,#connection { display:none; }.toolbar { height:45px; }.toolbar-actions { gap:14px; }.footer { font-size:7px; height:38px; }.footer b { margin:0 3px; } #mode-label { font-size:7px; } } @media(max-width:520px) { #footer-controls { max-width:220px; line-height:1.7; } }

.original-scores { list-style:none; margin:8px 0; padding:0; } .original-scores li { display:flex; align-items:center; justify-content:space-between; height:45px; font:27px Impact, "Arial Narrow", sans-serif; color:#eee; gap:12px; }.original-scores span { overflow:hidden; text-overflow:clip; max-width:175px; white-space:nowrap; }.menu-panel:has([data-view="home"]:not([hidden])) { background:#15191166; border-top-color:transparent; }

.nav-button:focus-visible { color:#ed4438; outline:none; transform:translateX(4px); }.main-nav:has(.nav-button:focus-visible) .primary:not(:focus-visible) { color:#e0e0da; }

.multiplayer-settings { border-bottom:1px solid #ffffff22; padding-bottom:5px; margin-bottom:10px; }
.multiplayer-settings label { margin-top:8px; }
.multiplayer-settings .hint { margin:9px 0; }
.battle-standings { list-style:none; padding:0; margin:20px 0; }
.battle-standings li { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid #ffffff20; font-size:14px; }
.battle-standings li span { overflow-wrap:anywhere; }
.battle-standings strong { white-space:nowrap; color:#e2c899; }
.battle-standings .winner { color:#e5c790; }
#over-title { overflow-wrap:anywhere; }
/* Keep both create and join actions visible alongside the battle options. */
.menu-panel:has([data-view="coop"]:not([hidden])) { padding-top:20px; }
[data-view="coop"] h2 { margin-bottom:12px; }
.multiplayer-settings:has(#battle-options:not([hidden])) { display:grid; grid-template-columns:1fr 88px; column-gap:12px; align-items:end; }
.multiplayer-settings:has(#battle-options:not([hidden])) > label { grid-column:1; grid-row:1; }
.multiplayer-settings:has(#battle-options:not([hidden])) > select { grid-column:1; grid-row:2; }
#battle-options { grid-column:2; grid-row:1 / span 2; }
#battle-description { grid-column:1 / -1; }
#battle-options label { line-height:1.3; }
#room-form .or { margin:16px 0 10px; }
#room-form .hint { margin:8px 0; }