:root{color-scheme:dark;font-family:Inter,system-ui,sans-serif;background:#10151d;color:#f5f4ed;font-size:16px}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 10% 0%,#23313a,transparent 55%);min-height:100vh}main{max-width:1120px;margin:auto;padding:28px}header,.room-head{display:flex;align-items:center;justify-content:space-between;gap:16px}header{margin-bottom:44px}.brand{color:#faf9f2;text-decoration:none;font-weight:950;letter-spacing:-1px;font-size:24px}.brand span{color:#d5fb74}#connection,.muted,small{color:#aebac8;font-size:.875rem}.panel{background:#1a222d;border:1px solid #354150;border-radius:20px;padding:32px;box-shadow:0 16px 48px #0002}.entry{max-width:610px;margin:0 auto}.eyebrow{color:#d5fb74;font-size:.8rem;letter-spacing:2px;font-weight:750}h1{font-size:clamp(1.8rem,4vw,2.65rem);line-height:1.15;letter-spacing:-1px;margin:20px 0}h1 em{font-style:normal;color:#d5fb74}p{line-height:1.6;color:#c8d0db}label{display:block;margin:20px 0 8px}input,select,button{font:inherit;border:1px solid #455365;border-radius:10px;padding:14px;color:inherit;background:#111923}input{width:100%}button{cursor:pointer;font-weight:650;touch-action:manipulation}button:hover:enabled{border-color:#d5fb74;background:#2c3845}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #9ec5ff;outline-offset:3px}.primary{background:#d5fb74;color:#17210a;border-color:#d5fb74}.primary:hover:enabled{background:#e3ffa4;color:#17210a}.entry>.primary{width:100%;margin-top:14px}.divider{text-align:center;color:#aebac8;margin:24px 0 14px}.join{display:flex;gap:10px}#code{text-transform:uppercase;letter-spacing:4px}.entry small{display:block;text-align:center;margin-top:26px}.room-head{margin-bottom:24px}h2{margin:8px 0 16px}#roomcode{letter-spacing:6px;font-size:2rem;margin-bottom:0}.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px}.modes{display:grid;grid-template-columns:1fr 1fr;gap:12px}.modes button{text-align:left;padding:20px}.modes button span{display:block;color:#b9c4d0;font-size:.9rem;line-height:1.6;margin-top:12px}.modes .selected{border:2px solid #d5fb74;background:#28352b}.check{display:flex;align-items:center;gap:12px}.check input{width:20px;height:20px}#lives{min-width:90px}#players{list-style:none;padding:0}#players li{padding:16px 0;border-bottom:1px solid #354150;overflow-wrap:anywhere}#players strong{display:block;margin-bottom:6px}#players small{line-height:1.7}.timer-face{border:1px solid #425363;border-radius:100%;width:220px;height:220px;margin:28px auto;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#131c26}.timer-face>span{font-size:3.5rem;font-weight:800;font-variant-numeric:tabular-nums}.timer-face small{padding-top:8px}#game{text-align:center}.big{display:block;width:100%;padding:22px;font-size:1.3rem}.danger{margin-top:12px;width:100%;color:#ffb89f;border-color:#81554b}.counting .timer-face{border-color:#d5fb74;box-shadow:0 0 40px #d5fb7415}.quiet{background:transparent}.reveal{font-size:2rem;color:#d5fb74;font-weight:800}.rank{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid #354150;overflow-wrap:anywhere}#next,#back{margin-top:24px}#error{background:#5e2929;color:#fff;padding:16px;margin-bottom:20px;border-radius:10px}footer{text-align:center;color:#9caab9;font-size:.875rem;padding:32px 0}#feedback{min-height:26px}[hidden]{display:none!important}@media(max-width:760px){main{padding:18px}.layout{grid-template-columns:1fr}.panel{padding:22px}header{margin-bottom:26px}.modes{grid-template-columns:1fr}.room-head{align-items:flex-start}.room-head button{padding:10px;font-size:.875rem}.timer-face{width:190px;height:190px}.rank{flex-wrap:wrap}aside{order:2}}@media(prefers-reduced-motion:no-preference){button{transition:background .15s,border-color .15s}}
