:root{--fg: #e8e2d4;--dim: #8a857a;--live: #c8261f;--blank: #3a6fd0;--accent: #d8c58a;--bg: #000;--font: "Lucida Console", "Courier New", ui-monospace, monospace}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);overflow:hidden;font-family:var(--font);-webkit-user-select:none;user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent}#view{position:fixed;inset:0;width:100vw;height:100vh;display:block;image-rendering:pixelated}#ui{position:fixed;inset:0;pointer-events:none;z-index:2}#ui .layer{position:absolute;inset:0}#ui .interactive,#ui button,#ui input,#ui .clickable{pointer-events:auto}.caption{position:absolute;left:50%;bottom:14%;transform:translate(-50%);text-align:center;font-size:clamp(14px,2.2vw,26px);letter-spacing:.12em;text-transform:uppercase;text-shadow:0 0 6px #000,0 0 2px #000;white-space:pre-line;opacity:0;transition:opacity .25s;width:min(92vw,900px)}.caption.show{opacity:1}.caption.top{bottom:auto;top:12%}.caption .live{color:var(--live)}.caption .blank{color:var(--blank)}.announce{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(28px,6vw,72px);letter-spacing:.35em;text-indent:.35em;opacity:0;transition:opacity .6s;text-shadow:0 0 12px #000}.announce.show{opacity:1}.blackout{position:absolute;inset:0;background:#000;opacity:0;transition:opacity .8s}.blackout.show{opacity:1}.tooltip{position:absolute;top:6%;left:50%;transform:translate(-50%);text-align:center;font-size:clamp(12px,1.6vw,19px);letter-spacing:.08em;text-shadow:0 0 4px #000;opacity:0;transition:opacity .15s;width:min(92vw,760px)}.tooltip.show{opacity:1}.tooltip{text-transform:uppercase}.tooltip .title{color:var(--accent);text-transform:uppercase;letter-spacing:.16em;margin-bottom:.3em}.prompt-row{position:absolute;bottom:calc(5% + env(safe-area-inset-bottom));left:0;right:0;display:flex;justify-content:center;gap:2vw;flex-wrap:wrap}.menu{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2vh;background:radial-gradient(ellipse at center,#000000b8,#000000eb);padding:4vh 16px;overflow-y:auto}.menu.solid{background:#000}.menu h1{font-weight:400;font-size:clamp(30px,7vw,92px);letter-spacing:.12em;margin:0 0 3vh;line-height:.95;text-align:center;text-shadow:0 0 18px rgba(200,30,20,.35)}.menu h1 small{display:block;font-size:.3em;letter-spacing:.6em;color:var(--dim);margin-top:1.2em}.menu h2{font-weight:400;letter-spacing:.3em;margin:0 0 2vh;font-size:clamp(18px,3vw,34px)}.menu p{max-width:min(90vw,640px);text-align:center;color:var(--dim);line-height:1.5;margin:.4em 0}.btn{font:inherit;background:none;border:none;color:var(--dim);font-size:clamp(15px,2.1vw,24px);letter-spacing:.25em;text-transform:uppercase;padding:.35em .9em;cursor:pointer;transition:color .12s}.btn:hover,.btn:focus-visible,.btn.sel{color:var(--fg);outline:none}.btn:hover:before,.btn:focus-visible:before,.btn.sel:before{content:"> "}.btn:disabled{opacity:.45;cursor:default}.btn.small{font-size:clamp(12px,1.4vw,16px)}.field{font:inherit;background:#0009;border:1px solid #555;color:var(--fg);font-size:clamp(16px,2.4vw,28px);letter-spacing:.4em;text-transform:uppercase;padding:.3em .6em;text-align:center;width:9em;outline:none}.field:focus{border-color:var(--fg)}.panel{background:#000000d1;border:1px solid #3b3b3b;padding:2.4vh 3vw;min-width:min(92vw,420px);max-width:92vw}.lobby-list{list-style:none;padding:0;margin:1.5vh 0;min-width:min(80vw,360px)}.lobby-list li{display:flex;justify-content:space-between;padding:.45em 0;border-bottom:1px dashed #333;letter-spacing:.2em}.lobby-list .ok{color:#7bd47b}.lobby-list .no{color:var(--dim)}.room-code{font-size:clamp(32px,6vw,64px);letter-spacing:.5em;text-indent:.5em;color:var(--accent)}.slider-row{display:flex;align-items:center;gap:1em;letter-spacing:.15em;width:min(86vw,460px);justify-content:space-between}.slider-row input[type=range]{width:50%;accent-color:#bbb}.stats{width:min(90vw,520px);font-size:clamp(13px,1.8vw,20px);letter-spacing:.14em}.stats .row{display:flex;justify-content:space-between;padding:.3em 0;opacity:0;transition:opacity .3s}.stats .row.show{opacity:1}.stats .total{border-top:1px solid #555;margin-top:.6em;padding-top:.6em;color:var(--accent)}.timer{position:absolute;top:2.5%;right:2.5%;font-size:clamp(14px,2vw,22px);letter-spacing:.15em;color:var(--dim)}.timer.warn{color:var(--live)}.hint{position:absolute;bottom:calc(1.5% + env(safe-area-inset-bottom));left:50%;transform:translate(-50%);font-size:clamp(10px,1.3vw,14px);color:#b5ae9f;letter-spacing:.15em;text-align:center;width:max-content;max-width:94vw;text-shadow:0 0 4px #000,0 0 2px #000}.prompt-row .btn{color:var(--fg);background:#0000009e;border:1px solid #4a463e;min-height:44px}.prompt-row .btn:hover,.prompt-row .btn:focus-visible{border-color:var(--fg)}.tooltip{background:#0000008c;padding:.4em .8em;width:auto!important;max-width:min(92vw,760px)}.rotate-hint{display:none;position:absolute;top:calc(1.5% + env(safe-area-inset-top));left:50%;transform:translate(-50%);font-size:11px;letter-spacing:.15em;color:#b5ae9f;background:#0009;padding:.35em .8em;white-space:nowrap}@media(orientation:portrait)and (max-width:700px){.rotate-hint{display:block}}.corner-btn{position:absolute;top:calc(1.5% + env(safe-area-inset-top));left:calc(1.5% + env(safe-area-inset-left));display:flex;gap:4px;z-index:5}.corner-btn .btn{background:#0000008c;font-size:12px;padding:.4em .8em}@media(pointer:coarse){.btn{min-height:44px}.slider-row input[type=range]{height:44px}.field{min-height:44px}.menu{gap:.4vh}.hint,.rotate-hint{font-size:12px}}@media(hover:none){.btn:hover:before{content:none}.btn:focus-visible:before,.btn.sel:before{content:"> "}}.toast{position:absolute;top:12%;left:50%;transform:translate(-50%);background:#3c0000d9;border:1px solid #a33;padding:.5em 1em;letter-spacing:.1em;font-size:clamp(12px,1.6vw,18px)}@media(max-width:640px){.caption{bottom:22%}.menu h1{font-size:clamp(26px,11vw,48px)}.btn{padding:.5em .9em}.prompt-row{flex-direction:column;align-items:center;gap:8px}}
