:root{--bg:#12131a;--surface:#1c1e28;--surface-2:#262938;--text:#eef0f6;--muted:#8a8fa3;--x:#ff6b6b;--o:#4dabf7;--accent:#ffd43b;--radius:14px;color:var(--text);background:var(--bg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{background:var(--bg);min-height:100dvh;margin:0}button,input{font:inherit;color:inherit}button{cursor:pointer;border-radius:var(--radius);background:var(--surface-2);border:0;padding:.7rem 1.1rem;font-weight:600}button:disabled{cursor:default;opacity:.45}button.primary{background:var(--accent);color:#1a1a1a}button.link{color:var(--muted);background:0 0;padding:.25rem 0;font-weight:500}input{border:2px solid var(--surface-2);border-radius:var(--radius);background:var(--surface);outline:none;width:100%;padding:.7rem .9rem}input:focus{border-color:var(--accent)}.muted{color:var(--muted)}.app{max-width:480px;margin:0 auto;padding:2rem 16px}.home{flex-direction:column;gap:1.5rem;display:flex}.intro{text-align:center}.intro .title{margin-bottom:.75rem}.intro p{color:var(--muted);margin:0;font-size:1.05rem;line-height:1.55}.title .accent{color:var(--accent)}.game-list{flex-direction:column;gap:.75rem;margin:0;padding:0;list-style:none;display:flex}.game-card{border-radius:var(--radius);background:var(--surface);color:inherit;border:2px solid #0000;flex-direction:column;gap:.3rem;padding:1.1rem 1.2rem;text-decoration:none;transition:border-color .15s,background .15s;display:flex}.game-card:hover,.game-card:focus-visible{border-color:var(--accent);background:var(--surface-2);outline:none}.game-card strong{font-size:1.25rem}.game-card small{color:var(--muted)}.more{text-align:center;margin:0;font-size:.9rem}.lobby,.join-room,.notice{flex-direction:column;gap:1rem;display:flex}.back{color:var(--muted);align-self:flex-start;font-weight:500;text-decoration:none}.title{text-align:center;letter-spacing:-.02em;margin:1rem 0 1.5rem;font-size:clamp(2.4rem,11vw,3.4rem)}.title .x{color:var(--x)}.title .o{color:var(--o)}.field{color:var(--muted);flex-direction:column;gap:.4rem;font-size:.9rem;display:flex}.join{gap:.5rem;display:flex}.join input{text-transform:uppercase;letter-spacing:.3em;text-align:center;font-weight:700}.room{flex-direction:column;gap:1.25rem;display:flex}.room-header{justify-content:space-between;align-items:center;display:flex}.code{letter-spacing:.25em;background:0 0;flex-direction:column;align-items:flex-end;padding:0;font-size:1.6rem;font-weight:800;display:flex}.code small{letter-spacing:normal;color:var(--muted);font-size:.7rem;font-weight:500}.banner{border-radius:var(--radius);color:var(--accent);text-align:center;background:#5c3b00;margin:0;padding:.6rem 1rem}.seats{grid-template-columns:1fr auto 1fr;align-items:stretch;gap:.6rem;display:grid}.seat{border-radius:var(--radius);background:var(--surface);border:2px solid #0000;flex-direction:column;align-items:center;gap:.35rem;min-width:0;padding:.8rem .5rem;transition:border-color .2s;display:flex}.seat.x.turn{border-color:var(--x)}.seat.o.turn{border-color:var(--o)}.seat .mark{font-size:1.6rem;font-weight:800}.seat.x .mark{color:var(--x)}.seat.o .mark{color:var(--o)}.seat .name{text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:.35rem;max-width:100%;display:flex;overflow:hidden}.seat button{padding:.35rem .8rem;font-size:.85rem}.seat .score{font-size:1.4rem;font-weight:700}.dot{background:var(--muted);border-radius:50%;flex:none;width:.5rem;height:.5rem}.dot.online{background:#51cf66}.draws{color:var(--muted);flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:.8rem;font-size:.75rem;display:flex}.draws span{color:var(--text);font-size:1.1rem;font-weight:700}.status{text-align:center;min-height:1.5em;margin:0;font-size:1.2rem;font-weight:600}.board{aspect-ratio:1;grid-template-columns:repeat(3,1fr);gap:.5rem;display:grid}.cell{aspect-ratio:1;background:var(--surface);padding:0;font-size:clamp(2.5rem,16vw,4.5rem);font-weight:800;transition:background .15s,transform .1s}.cell:not(:disabled):hover{background:var(--surface-2)}.cell:not(:disabled):active{transform:scale(.96)}.cell:disabled{opacity:1}.cell.x{color:var(--x)}.cell.o{color:var(--o)}.cell.win{background:var(--surface-2);box-shadow:inset 0 0 0 3px var(--accent)}.room-footer{text-align:center;flex-direction:column;align-items:center;gap:.25rem;display:flex}.room-footer p{margin:0;font-size:.9rem}.notice{text-align:center;align-items:center;padding:2rem 0}.boom,.boom-phase,.boom-form{flex-direction:column;gap:1rem;display:flex}.boom-center{text-align:center;margin:0}.boom-round{color:var(--muted);justify-content:space-between;align-items:center;font-weight:600;display:flex}.countdown{color:var(--text);font-variant-numeric:tabular-nums;font-size:1.6rem;font-weight:800}.countdown.low{color:var(--x)}.boom-prompt{margin:0;font-size:1.3rem;font-weight:600;line-height:1.4}.boom-prompt .blank{color:var(--accent)}.boom-matchup{gap:.75rem;display:grid}.roast{text-align:left;flex-direction:column;gap:.5rem;padding:1.1rem;font-size:1.1rem;line-height:1.4;display:flex}.roast:disabled{opacity:1}.boom .roast.picked{background:var(--surface-2);box-shadow:inset 0 0 0 3px var(--accent), 3px 5px 0 #2b1d1438}.roast-by{font-size:.9rem}.boom-winner{text-align:center;color:var(--accent);margin:.5rem 0;font-size:clamp(1.8rem,8vw,3rem)}.boom-ranking{flex-direction:column;gap:.4rem;margin:0;padding:0;list-style:none;display:flex}.boom-ranking li{justify-content:space-between;padding:.7rem 1rem;display:flex}.grill{aspect-ratio:2;border-radius:var(--radius);background:radial-gradient(ellipse at 50% 80%, #3a1d12, var(--surface) 70%);width:100%;overflow:hidden}.grill canvas{display:block}.picker{grid-template-columns:repeat(3,1fr);gap:.6rem;display:grid}.picker button{text-transform:capitalize;flex-direction:column;align-items:center;gap:.2rem;padding:.6rem .3rem;font-size:.85rem;display:flex}.boom .picker button.picked,.boom .picker button:hover,.boom .picker button:focus-visible{border-color:var(--accent);outline:none}.picker .doodle{object-fit:contain;aspect-ratio:1;width:100%;max-width:6rem}.app:has(.boom.tv){box-sizing:border-box;z-index:0;max-width:1400px;min-height:100dvh;font-size:1.4rem;position:relative}.app:has(.boom){--text:#2b1d14;--muted:#6b5747;--surface:#f7f1e3;--surface-2:#ece0c6;--accent:#c2410c;--x:#b42318;color:var(--text)}.app:has(.boom) button.primary{color:#fff8ec}.boom input{border-color:var(--text)}body:has(.boom){background:url(/assets/background-qyZh1MmL.png) 50%/cover fixed}.boom :is(.tv-join,.tv-timer,.roast,.me-card,.boom-ranking li,.picker button){border:2.5px solid var(--text);background:var(--surface);border-radius:255px 15px 225px/15px 225px 15px 255px;box-shadow:3px 5px #2b1d1438}.boom.tv .grill{z-index:-1;aspect-ratio:auto;background:0 0;border-radius:0;width:auto;height:100%;position:fixed;inset:0}.boom.tv:has(.tv-join) .grill{right:calc(min(22vw,40vh) + 6vw)}.tv-join{text-align:center;flex-direction:column;align-items:center;gap:.4rem;padding:1.2rem 1.4rem;display:flex;position:fixed;top:50%;right:3vw;translate:0 -50%;rotate:1.5deg}.tv-join p{margin:0}.tv-qr{aspect-ratio:1;width:min(22vw,40vh)}.tv-code{letter-spacing:.15em;font-size:2.6rem}.tv-timer{align-items:center;gap:1rem;padding:.6rem 1.2rem;font-weight:600;display:flex;position:fixed;top:3vh;left:3vw}.tv-timer .countdown{font-size:3rem}.boom.tv .boom-matchup{grid-template-columns:1fr 1fr;gap:2rem;margin-top:5.5rem}.boom.tv .roast{font-size:2rem}.boom.tv .roast.side-0{rotate:-1deg}.boom.tv .roast.side-1{rotate:1deg}.boom.tv .roast-by{align-items:center;gap:.5rem;font-size:1.2rem;animation:.4s ease-out both pop-in;display:flex}.roast-by .doodle{object-fit:contain;width:2.5rem;height:2.5rem}.roast-by .points{color:var(--x);border:3px solid;border-radius:8px;margin-left:auto;padding:0 .35em;font-size:1.6em;animation:.3s ease-in .5s both stamp;rotate:-8deg}.boom .roast.won{animation:.6s ease-out .3s both sizzle;translate:0 -.6rem;box-shadow:6px 12px #2b1d1447}@keyframes stamp{0%{opacity:0;scale:2.2}}@keyframes pop-in{0%{opacity:0;transform:translateY(1rem)scale(.9)}}@keyframes sizzle{30%{transform:scale(1.05)rotate(-1deg)}60%{transform:scale(1.03)rotate(1deg)}}@media (prefers-reduced-motion:reduce){.boom.tv .roast-by,.roast-by .points,.boom .roast.won{animation:none}}.tv-podium{grid-template-columns:auto 1fr minmax(14rem,22rem);gap:1.5rem;min-height:60vh;display:grid}.doneness{border-radius:var(--radius);color:#fff;background:linear-gradient(#e86a6a,#c0603a 40%,#7a3b1c 75%,#1c1210);flex-direction:column;justify-content:space-between;align-items:center;width:3rem;padding:.8rem 0;font-size:.8em;font-weight:700;display:flex}.doneness span{writing-mode:vertical-rl}.doneness-spots{margin:0;padding:0;list-style:none;position:relative}.doneness-spots li{flex-wrap:wrap;gap:1rem;display:flex;position:absolute;left:0;right:0}.doneness-player{align-items:center;gap:.4rem;font-weight:600;display:flex}.doneness-player .doodle{object-fit:contain;width:3.5rem;height:3.5rem}.me-card{flex-direction:column;align-items:center;gap:.4rem;padding:1.2rem;display:flex}.me-card .doodle{object-fit:contain;width:8rem;height:8rem}.phone-big{text-align:center;margin-top:2rem;font-size:1.6rem;font-weight:700}.tv-sound{z-index:2;position:fixed;bottom:3vh;left:3vw}
