:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#f3f3f3;background:#0b0b0d;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -20%,#30252d 0,#111116 35%,#08080a 75%);color:#f5f5f5}button,input{font:inherit}.shell{width:min(980px,100%);margin:0 auto;padding:28px 18px 60px}header{text-align:center;margin-bottom:30px}.brand{font-weight:950;letter-spacing:.19em;font-size:clamp(25px,5vw,42px)}.subtitle{opacity:.45;text-transform:uppercase;letter-spacing:.3em;font-size:10px;margin-top:5px}.card{background:#19191eeb;border:1px solid #35353d;border-radius:20px;padding:24px;box-shadow:0 20px 60px #0007}.hero{max-width:520px;margin:0 auto}.hero h1{font-size:34px;margin:0 0 8px}.hero p{opacity:.68;line-height:1.5}.card label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.12em;opacity:.6;margin:20px 0 8px}input{width:100%;border:1px solid #41414c;background:#111116;color:#fff;border-radius:12px;padding:14px;outline:none}input:focus{border-color:#8f7180}button{border:1px solid #454550;background:#24242b;color:#fff;border-radius:12px;padding:12px 16px;cursor:pointer}button:hover{background:#303039}button:disabled{opacity:.35;cursor:not-allowed}.primary{width:100%;margin-top:12px;background:#eee;color:#111;border-color:#eee;font-weight:850}.primary:hover{background:#fff}.danger{border-color:#64383d;color:#ffc2c7}.row{display:flex;gap:10px}.divider{display:flex;align-items:center;gap:12px;margin:22px 0 0;color:#777;font-size:12px}.divider:before,.divider:after{content:"";height:1px;background:#38383f;flex:1}.roomcode{letter-spacing:.18em;font-size:13px;opacity:.7}.roomcode strong{font-size:24px;color:#fff;opacity:1}.status{display:inline-block;margin-top:5px;border:1px solid #4b4b55;border-radius:999px;padding:6px 11px;font-size:11px;letter-spacing:.14em}.gameHeader{display:flex;align-items:center;justify-content:space-between;margin:15px 0 24px}.gameHeader small{opacity:.4}.cycleSmall{font-size:20px;font-weight:850;letter-spacing:.08em}.grid{display:grid;grid-template-columns:1fr 260px;gap:28px}.grid h2{margin-top:0}.grid h2 small{font-size:13px;opacity:.45}.players{display:grid;gap:8px}.player{display:flex;align-items:center;gap:10px;background:#141419;border:1px solid #2d2d34;padding:11px 12px;border-radius:11px}.player em{margin-left:auto;font-style:normal;font-size:10px;letter-spacing:.12em;opacity:.45}.dot{width:9px;height:9px;border-radius:50%;background:#5b5b63}.dot.on{background:#d7d7d7;box-shadow:0 0 0 3px #d7d7d722}aside{display:flex;flex-direction:column;gap:10px;align-items:stretch}.qr{width:100%;border-radius:14px;background:#fff;padding:10px}.mini{text-align:center;font-size:11px;opacity:.5;margin-top:-3px}.pinbox{border:1px dashed #55545d;border-radius:14px;padding:14px;margin-top:22px;display:flex;flex-direction:column;align-items:center;gap:4px}.pinbox span,.pinbox small{opacity:.5;font-size:11px}.pinbox strong{font-size:28px;letter-spacing:.18em}.hostPanel{margin-top:22px;border-top:1px solid #34343b;padding-top:18px;display:flex;flex-wrap:wrap;gap:9px}.hostPanel h3{width:100%;margin:0 0 2px}.hostPanel .primary{width:auto;margin-top:0}.hint,.error{margin-top:12px;font-size:13px}.hint{opacity:.55}.error{color:#ffb2b2}.tabs{display:flex;gap:8px;margin:18px 0}.tabs button{flex:1}.tabs .active{background:#eee;color:#111}.display{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;text-align:center}.huge{font-size:clamp(36px,8vw,90px)}.cycle{margin-top:35px;font-size:clamp(25px,5vw,56px);font-weight:900;letter-spacing:.12em}.phase{margin-top:8px;font-size:clamp(18px,3vw,35px);letter-spacing:.18em;opacity:.7}.count{margin-top:18px;opacity:.55;letter-spacing:.15em}.displayPlayers{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:34px;max-width:1100px}.displayPlayers span{border:1px solid #484850;border-radius:999px;padding:9px 15px;font-size:18px}.offline{opacity:.35}@media(max-width:720px){.grid{grid-template-columns:1fr}.grid aside{max-width:260px;margin:0 auto;width:100%}.hero h1{font-size:29px}.card{padding:18px}.shell{padding-top:18px}.gameHeader{align-items:flex-start}.hostPanel{flex-direction:column}.hostPanel .primary{width:100%}}