@font-face{font-family:Arcade;src:url('/fonts/PressStart2P-Regular.ttf') format('truetype');font-display:swap}
:root{--ink-black:#001219ff;--dark-teal:#005f73ff;--dark-cyan:#0a9396ff;--pearl-aqua:#94d2bdff;--vanilla-custard:#e9d8a6ff;--golden-orange:#ee9b00ff;--burnt-caramel:#ca6702ff;--rusty-spice:#bb3e03ff;--oxidized-iron:#ae2012ff;--brown-red:#9b2226ff;--ink:var(--ink-black);--panel:color-mix(in srgb,var(--dark-teal) 30%,var(--ink-black));--well:var(--ink-black);--on-accent:var(--ink-black);--pixel:Arcade,monospace;color-scheme:dark}
[hidden]{display:none!important}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{display:flex;flex-direction:column;background:var(--ink);color:var(--text);font:15px/1.55 ui-monospace,'Courier New',monospace}button,input,a{touch-action:manipulation}button,input{font:inherit}a{color:var(--accent);text-underline-offset:4px}a:hover{color:var(--text)}:focus-visible{outline:3px solid var(--accent);outline-offset:5px}header{height:78px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--well);border-bottom:4px solid var(--well);flex-shrink:0}.brand{font:16px/1.7 var(--pixel);letter-spacing:-1px;text-decoration:none;color:var(--text);text-shadow:3px 3px var(--ink)}.brand span{color:var(--accent);margin-left:10px}main{position:relative;flex:1;min-height:0;background-color:var(--on-accent);background-image:linear-gradient(#94d2bd08 1px,transparent 1px),linear-gradient(90deg,#94d2bd08 1px,transparent 1px);background-size:24px 24px}canvas{display:block;width:100%;height:100%;outline:none}footer{height:44px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:3px solid var(--well);background:var(--well);color:var(--text);font-size:11px;flex-shrink:0}kbd{font:inherit;color:var(--text)}button,input{border:3px solid var(--primary);border-radius:0;padding:10px 12px;background:var(--text);color:var(--on-accent);box-shadow:3px 3px 0 var(--well);min-height:44px;font-weight:800}button{cursor:pointer;transition:background-color 80ms,transform 80ms}button:hover:enabled{background:var(--text);transform:translate(-1px,-1px)}button:active:enabled{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--well)}button:disabled{opacity:.42;cursor:default;box-shadow:none}button.primary{background:var(--accent);border-color:var(--text);color:var(--on-accent)}button.primary:hover:enabled{background:var(--text)}input{background:var(--well);color:var(--text);font-weight:400;box-shadow:inset 3px 3px #00121944}input::placeholder{color:var(--text)}#online{font:10px/1.6 var(--pixel);max-width:50%;background:var(--panel);color:var(--text);border-color:var(--accent);overflow-wrap:anywhere}.eyebrow{font:9px/1.8 var(--pixel);letter-spacing:1px;color:var(--text);margin-bottom:14px}#lobby,#solo-panel{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:min(640px,calc(100% - 32px));max-height:calc(100% - 32px);overflow-y:auto;padding:26px;background:var(--panel);border:4px solid var(--text);box-shadow:6px 6px 0 var(--ink),10px 10px 0 var(--brown-red);scrollbar-color:var(--text) var(--well)}h1{font:19px/1.55 var(--pixel);color:var(--accent);margin:0 0 14px;text-shadow:3px 3px var(--well);overflow-wrap:anywhere}#lobby p{margin:10px 0;color:var(--text)}#lobby>p:first-of-type{color:var(--text)}h2{font:10px/1.8 var(--pixel);letter-spacing:1px;margin:22px 0 12px;color:var(--text)}#admin-label{font:11px/1.8 ui-monospace,monospace;color:var(--text);white-space:nowrap}#join{display:flex;gap:12px}#room{min-width:0;flex:1;text-transform:lowercase}#netstatus{padding:12px;border-left:4px solid var(--accent);background:var(--well);min-height:44px}#members{display:flex;gap:12px;margin:20px 0;flex-wrap:wrap}.member{padding:10px 14px;border:3px solid var(--primary);background:var(--well);box-shadow:3px 3px var(--ink)}#actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}#actions button{flex:1;min-width:130px}#invite{display:block;overflow-wrap:anywhere;font-size:12px;margin:18px 0}#leave{display:inline-block;color:var(--text);margin-top:20px;font-size:12px}#colors{display:flex;gap:12px;flex-wrap:wrap}.swatch{width:38px;height:38px;min-height:38px;padding:0;border:3px solid var(--well);box-shadow:3px 3px var(--ink)}.swatch[aria-pressed="true"]{outline:3px solid var(--accent);outline-offset:2px}.swatch:disabled{opacity:.3;position:relative}.swatch:disabled::after{content:'×';font-size:24px;color:var(--on-accent);position:absolute;inset:-3px 0}.playlist-row{display:flex;align-items:center;gap:8px;margin:10px 0;padding:10px;background:var(--well);border-left:4px solid var(--brown-red)}.playlist-row span{flex:1;font-weight:700;color:var(--text)}.playlist-row button{padding:3px 8px;min-height:34px;box-shadow:2px 2px var(--ink);font-size:12px}#add-games{display:flex;gap:12px;margin-top:14px}#add-games button{flex:1;font-size:12px;background:var(--text);border-color:var(--primary)}.hint{font-size:12px;color:var(--text)!important}#scoreboard{overflow-x:auto;margin:20px 0;padding:12px;border:3px solid var(--primary);background:var(--well)}#scoreboard table{border-collapse:collapse;width:100%;font-size:13px}#scoreboard th,#scoreboard td{text-align:left;padding:10px 7px;border-bottom:2px solid var(--primary)}#scoreboard th{color:var(--text);font-size:11px}#scoreboard td:last-child{color:var(--accent);font-weight:900}#engine-status{border:3px solid var(--accent);padding:14px;margin:16px 0;background:var(--well)}#engine-status p{margin:0 0 10px;font-size:12px}progress{width:100%;height:18px;accent-color:var(--accent);border:2px solid var(--text);border-radius:0;background:var(--well)}progress::-webkit-progress-bar{background:var(--well)}progress::-webkit-progress-value{background:repeating-linear-gradient(90deg,var(--accent) 0 10px,var(--well) 10px 13px)}progress:indeterminate{animation:blink 1s steps(2,end) infinite}details{font-size:11px;color:var(--text);margin-top:10px}summary{cursor:pointer;min-height:30px}#hud{position:absolute;top:16px;left:20px;white-space:pre-line;font:12px/1.9 var(--pixel);color:var(--text);text-shadow:2px 2px var(--ink);background:#001219ed;padding:10px 14px;border-left:4px solid var(--accent);pointer-events:none;z-index:1}#countdown,#loading,#boot-loading{position:absolute;inset:0;display:grid;place-content:center;text-align:center;z-index:2}#countdown{pointer-events:none;white-space:pre-line;font:22px/2 var(--pixel);color:var(--text);text-shadow:3px 3px var(--ink);background:#00121999;padding:20px}#loading,#boot-loading{background:var(--ink);color:var(--text)}#boot-loading{z-index:4;font:14px/2 var(--pixel)}#loading strong{font:24px/2 var(--pixel);color:var(--accent)}#status{margin:18px auto 0;color:var(--text);max-width:480px;padding:20px;line-height:1.8}.spinner{margin:24px auto 0;width:28px;height:28px;border:6px solid var(--brown-red);border-right-color:var(--accent);animation:spin 1s steps(4,end) infinite}#spectator{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);padding:12px 16px;background:var(--well);border:3px solid var(--accent);z-index:2;color:var(--text);font-size:12px;max-width:90%;text-align:center;pointer-events:none}#solo-panel{text-align:center;width:min(480px,calc(100% - 32px))}#solo-panel button{display:block;margin:16px auto;width:100%}#solo-panel a{display:inline-block;margin:12px auto;font-size:12px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes blink{50%{opacity:.45}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}@media(max-width:600px){header{height:70px;padding:0 16px}.brand{font-size:12px}.brand span{display:block;margin:0}#online{font-size:8px;max-width:58%;padding:8px}footer{padding:0 12px;font-size:10px}footer span:last-child{display:none}#lobby,#solo-panel{padding:18px;width:calc(100% - 24px);max-height:calc(100% - 24px)}h1{font-size:16px}.eyebrow{font-size:8px}#join{flex-direction:column}#hud{font-size:9px;left:12px;top:12px;padding:8px}#countdown{font-size:16px}.playlist-row{gap:5px;padding:8px}.playlist-row button{padding:4px;font-size:11px}#add-games{gap:8px}}

/* Cool structure, warm actions, and restrained accents. */
header{border-bottom-color:var(--secondary)}
a,.eyebrow,#admin-label,details,.hint{color:var(--muted)!important}
button:hover:enabled{background:var(--muted)}
#lobby,#solo-panel{border-color:var(--secondary);box-shadow:6px 6px 0 var(--background),10px 10px 0 var(--primary)}
#lobby>p:first-of-type{color:var(--muted)}
.playlist-row{border-left-color:var(--burnt-caramel)}
#engine-status{border-color:var(--secondary)}
#scoreboard th{color:var(--muted)}
.spinner{border-color:var(--oxidized-iron);border-right-color:var(--accent)}
button:active:enabled{border-color:var(--rusty-spice)}

:root{--primary:#005f73;--secondary:#0a9396;--accent:#ee9b00;--text:#e9d8a6;--muted:#94d2bd;--background:#001219;--panel:color-mix(in srgb,var(--primary) 30%,var(--background));--well:var(--background);--ink:var(--background);--on-accent:#001219}
:root[data-theme="1"]{--primary:#bb3e03;--secondary:#94d2bd;--accent:#0a9396;--muted:#e9d8a6;--background:#240e08}
:root[data-theme="2"]{--primary:#00354b;--secondary:#ee9b00;--accent:#ca6702;--muted:#94d2bd;--background:#001219}
:root[data-theme="3"]{--primary:#0a9396;--secondary:#9b2226;--accent:#94d2bd;--muted:#94d2bd;--background:#001219}
:root[data-theme="4"]{--primary:#ca6702;--secondary:#005f73;--accent:#e9d8a6;--muted:#94d2bd;--background:#20170b}
#theme-toggle{margin-left:auto;font:10px/1.5 var(--pixel);background:var(--primary);color:var(--text);border-color:var(--accent)}
#theme-panel{position:absolute;z-index:10;right:18px;top:86px;width:min(480px,calc(100vw - 36px));max-height:calc(100vh - 105px);overflow:auto;padding:20px;background:var(--panel);border:3px solid var(--secondary);box-shadow:6px 6px var(--background)}
#theme-panel h2{margin:0 0 10px}#theme-panel p{font-size:12px;color:var(--muted)}
#theme-options{display:grid;gap:10px;margin:14px 0}.theme-option{display:grid;grid-template-columns:52px 1fr;text-align:left;gap:12px;align-items:center;background:var(--background);color:var(--text);border-color:var(--primary);font-size:13px}
.theme-option[aria-pressed="true"]{outline:2px solid var(--accent);outline-offset:2px}.theme-option:hover:enabled{background:var(--panel)}
.theme-preview{height:34px;border:1px solid var(--muted);display:flex}.theme-preview i{flex:1}.theme-option small{display:block;font-weight:400;color:var(--muted);margin-top:3px}
@media(max-width:600px){#theme-toggle{font-size:8px;padding:7px}header{gap:8px}#online{max-width:35%}}
