*,*:before,*:after{box-sizing:border-box}:root{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#f8fafc;background:#020617;font-synthesis:none}body{margin:0;min-width:320px;min-height:100vh;min-height:100dvh;overflow:hidden}button,input{font:inherit}#app{min-height:100vh;display:grid;grid-template-rows:auto auto 1fr}.hud{z-index:2;padding:.8rem clamp(1rem,3vw,2rem);background:#07111f;border-bottom:1px solid #164e63;display:grid;grid-template-columns:1fr auto 1fr;gap:1.5rem;align-items:center}.hud h1,.hud p{margin:0}.hud h1{color:#67e8f9;letter-spacing:.16em;font-size:clamp(1.1rem,3vw,1.7rem)}.hud p{margin-top:.35rem;color:#94a3b8;font-size:.8rem}.score{display:flex;gap:.8rem;align-items:center;color:#94a3b8}.score b{color:#f8fafc;font-size:clamp(1.8rem,5vw,3rem)}.score i{color:#22d3ee;font-style:normal}.room-controls,.room-controls form{display:flex;gap:.45rem;align-items:end;justify-content:end;flex-wrap:wrap}.room-controls label{display:block;color:#94a3b8;font-size:.75rem}.room-controls input,.room-controls button{min-height:2.35rem;border:1px solid #155e75;border-radius:.2rem;padding:.35rem .65rem}.room-controls button{color:#ecfeff;background:#0e7490;cursor:pointer}.room-controls button:disabled{opacity:.5;cursor:wait}.room-controls input{width:min(15rem,50vw);color:#e2e8f0;background:#0f172a}kbd{margin-inline:.1rem;padding:.08rem .3rem;border:1px solid #475569;border-radius:.2rem}.canvas-host{min-height:20rem}.canvas-host canvas{display:block;width:100%;height:100%}.result{position:fixed;z-index:4;inset:50% auto auto 50%;transform:translate(-50%,-50%);min-width:min(28rem,calc(100vw - 2rem));padding:1.5rem;color:#67e8f9;background:#020617ee;border:2px solid #22d3ee;text-align:center}.result h2{margin:0 0 1.25rem;font-size:clamp(2rem,8vw,5rem);letter-spacing:.12em}.result-actions{display:flex;justify-content:center;gap:.75rem}.result-actions button{min-height:3rem;padding:.6rem 1rem;border:1px solid #22d3ee;border-radius:.2rem;color:#ecfeff;background:#0e7490;cursor:pointer}.result-actions #delete-room{border-color:#ef4444;background:#991b1b}.touch-controls{display:none;position:fixed;z-index:3;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));left:max(1rem,env(safe-area-inset-left));justify-content:space-between;pointer-events:none}.touch-controls button{width:5rem;height:5rem;border:2px solid #22d3ee;border-radius:50%;color:#ecfeff;background:#0e7490cc;font-size:2.2rem;font-weight:700;touch-action:none;user-select:none;-webkit-user-select:none;pointer-events:auto}.touch-controls button:active{background:#22d3ee;color:#083344;transform:scale(.96)}:focus-visible{outline:3px solid #67e8f9;outline-offset:3px}@media(max-width:850px){.hud{grid-template-columns:1fr auto;gap:.65rem;padding:.55rem .75rem}.room-controls{grid-column:1 / -1;justify-content:start}}@media(max-width:540px){.hud h1{font-size:1rem}.hud p{font-size:.7rem}.score{gap:.35rem}.score b{font-size:1.6rem}.room-controls input{width:min(11rem,48vw)}.room-controls input,.room-controls button{min-height:2.75rem}}@media(hover:none),(pointer:coarse){.touch-controls{display:flex}}