: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; }

[data-view="home"] > label { margin:0 0 6px; }
#score-mode { height:32px; font-size:11px; }
.original-scores li { height:40px; }

#play-area { position:relative; display:flex; align-items:center; justify-content:center; }
#stage-wrap { flex:none; }
.touch-controls { flex:none; }
.touch-key { border:1px solid #838b70; border-bottom-width:3px; border-radius:8px; background:linear-gradient(#414939,#20271d); color:#f4e9d0; font:bold 22px Arial,sans-serif; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.touch-key.pressed { background:#ae3329; border-color:#ed9a69; transform:translateY(2px); border-bottom-width:1px; }
.touch-key:disabled { opacity:.3; }
#rotate-notice { position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px; text-align:center; background:#101510; }
#rotate-notice h2 { font-size:30px; margin:28px 0 8px; }
#rotate-notice p { font-size:14px; }
.rotate-phone { width:46px; height:80px; border:3px solid #e3d8b9; border-radius:9px; transform:rotate(-90deg); display:grid; place-items:center; font:40px Arial,sans-serif; color:#e3d8b9; }
body.touch-device { display:block; min-height:0; height:100vh; height:100dvh; overflow:hidden; overscroll-behavior:none; touch-action:manipulation; }
.touch-device #app { position:relative; width:100%; height:var(--usable-height,100dvh); padding:env(safe-area-inset-top) max(6px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left)); display:grid; grid-template-rows:36px minmax(0,1fr); gap:4px; --touch-key-size:clamp(38px,12vh,52px); }
.touch-device .toolbar { height:36px; min-width:0; padding-left:62px; gap:8px; }
.touch-device .brand { font-size:14px; }
.touch-device .brand span,.touch-device #connection,.touch-device .footer { display:none; }
.touch-device .toolbar-actions { gap:12px; margin-left:auto; }
.touch-device #touch-esc { position:absolute; z-index:30; left:max(6px,env(safe-area-inset-left)); top:calc(2px + env(safe-area-inset-top)); width:52px; height:32px; font-size:14px; padding:0; border:1px solid #838b70; background:#30392b; }
.touch-device #play-area { min-width:0; min-height:0; width:100%; gap:8px; overflow:hidden; }
.touch-device #stage-wrap { margin:0; border:0; box-shadow:none; }
.touch-device #game { touch-action:none; }
.touch-device #touch-actions { display:flex; flex-direction:column; justify-content:center; gap:16px; width:var(--touch-key-size); }
.touch-device #touch-actions .touch-key { width:var(--touch-key-size); height:calc(var(--touch-key-size) * 1.3); }
.touch-device #touch-directions { display:grid; grid-template-columns:repeat(3,var(--touch-key-size)); grid-template-rows:repeat(2,var(--touch-key-size)); gap:4px; }
.touch-device #touch-up { grid-column:2; grid-row:1; }
.touch-device #touch-left { grid-column:1; grid-row:2; }
.touch-device #touch-right { grid-column:3; grid-row:2; }
.touch-device #touch-down { grid-column:2; grid-row:2; }
/* Keep HTML menus at readable CSS-pixel sizes while the original canvas scales. */
.touch-device #menu,.touch-device .overlay,.touch-device #loading { inset:0 auto auto 0; width:var(--game-width); height:var(--game-height); transform:scale(var(--inverse-game-scale)); transform-origin:top left; }
/* The start menu uses the whole mobile area; touch rails are reserved for gameplay. */
.touch-device .menu-screen #menu,.touch-device .menu-screen #loading { width:var(--menu-width); height:var(--menu-height); }
.touch-device .menu-screen #menu { display:grid; grid-template-columns:minmax(140px,.85fr) minmax(0,1.15fr); grid-template-rows:30px minmax(0,1fr); gap:8px 14px; padding:8px 12px; background:linear-gradient(#101510a6,#101510a6),url('/assets/menu.jpg') center/cover; }
.touch-device .menu-heading { position:static; grid-column:1 / -1; grid-row:1; min-width:0; }
.touch-device h1 { font-size:23px; line-height:30px; margin:0; letter-spacing:1px; }
.touch-device .main-nav { position:static; grid-column:1; grid-row:2; width:auto; height:auto; min-height:0; padding:0 5px; gap:4px; overflow-y:auto; background:none; }
.touch-device .nav-button { flex:1; font-size:clamp(16px,4.8vh,24px); min-height:30px; padding:4px 0; gap:8px; }
.touch-device .nav-button small { font-size:8px; letter-spacing:.5px; }
.touch-device .menu-panel { position:static; grid-column:2; grid-row:2; width:auto; height:auto; min-width:0; min-height:0; margin:0; padding:8px; background:#11180fe6; border-top-color:var(--red); overscroll-behavior:contain; }
.touch-device .menu-panel:has([data-view="home"]:not([hidden])) { background:#11180fe6; border-top-color:var(--red); }
.touch-device [data-view="home"] { height:100%; min-height:0; display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:32px minmax(0,1fr) auto; gap:6px 10px; align-items:center; }
.touch-device [data-view="home"] > label { margin:0; }
.touch-device #score-mode { width:100%; min-width:0; height:32px; font-size:16px; padding:4px 6px; }
.touch-device #home-scores { grid-column:1 / -1; min-height:0; height:100%; margin:0; display:grid; grid-template-rows:repeat(10,minmax(0,1fr)); }
.touch-device #home-scores li { height:auto; min-height:0; gap:10px; font-size:clamp(13px,4vh,21px); line-height:1; }
.touch-device #home-scores span:first-child { flex:1; min-width:0; max-width:none; text-overflow:ellipsis; }
.touch-device #home-scores span:last-child { flex:none; max-width:none; }
.touch-device #scores-status { grid-column:1 / -1; margin:0; }
.touch-device .menu-panel h2 { font-size:22px; margin:0 0 10px; }
.touch-device .menu-panel h3 { font-size:18px; margin-top:12px; }
.touch-device .menu-panel p { font-size:11px; margin:8px 0; }
.touch-device .menu-panel label { font-size:11px; margin:8px 0 4px; }
.touch-device .menu-panel input:not([type=checkbox]):not([type=range]),.touch-device .menu-panel select { font-size:16px; height:36px; padding:6px; }
.touch-device .menu-panel .action { min-height:40px; font-size:16px; padding:8px 4px; margin-top:8px; }
.touch-device .menu-panel .text-button { min-height:36px; margin-top:8px; }
.touch-device .original-scores li { height:26px; font-size:20px; }
.touch-device .multiplayer-settings:has(#battle-options:not([hidden])) { display:block; }
.touch-device .controls-list { grid-template-columns:55px 1fr; gap:8px; }
.touch-device .dialog { width:min(340px,calc(100% - 12px)); max-height:calc(100% - 12px); overflow-y:auto; padding:14px; }
.touch-device .dialog h2 { font-size:25px; margin-bottom:10px; }
.touch-device .dialog .action { min-height:40px; margin-top:8px; padding:8px; }
.touch-device .dialog .text-button { min-height:36px; margin-top:8px; }
.touch-device .dialog input { font-size:16px; }
.touch-device #loading img { width:100%; height:100%; }
.touch-device #loading p { position:absolute; bottom:10px; font-size:12px; }
.touch-device #toast { left:calc(8px * var(--inverse-game-scale)); bottom:calc(8px * var(--inverse-game-scale)); width:calc(var(--game-width) - 16px); max-width:none; transform:scale(var(--inverse-game-scale)); transform-origin:bottom left; font-size:12px; padding:8px; }

.touch-device .menu-panel #score-mode { height:32px; }
.touch-device .menu-screen #toast { width:calc(var(--menu-width) - 16px); }