:root{--bg:#12101a;--bg-glow:#1d1830;--card:#1c1928;--card-hover:#241f33;--line:#322c46;--text:#f2eefb;--muted:#9b93b4;--accent:#ffc45c;--hit:#3ddc97;--radius:18px}*{box-sizing:border-box}body,html{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:ui-rounded,SF Pro Rounded,Segoe UI,system-ui,-apple-system,sans-serif;-webkit-text-size-adjust:100%}body{min-height:100dvh;background:radial-gradient(1100px 600px at 50% -15%,var(--bg-glow),transparent 70%),var(--bg)}.shell{max-width:620px;margin:0 auto;padding:32px 16px 64px}.masthead{text-align:center;margin-bottom:8px}.masthead h1{margin:0;font-size:clamp(26px,7vw,38px);letter-spacing:-.02em;font-weight:800}.tagline{margin:6px 0 0;color:var(--muted);font-size:14px}.tagline b{color:var(--accent);font-weight:600}.board{display:grid;grid-gap:10px;gap:10px;margin:24px 0 20px}.square{position:relative;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--text);font:inherit;font-size:clamp(11px,3vw,13.5px);line-height:1.25;text-align:center;cursor:pointer;transition:transform .12s ease,background .16s ease,border-color .16s ease;-webkit-tap-highlight-color:transparent}.square:hover{background:var(--card-hover)}.square:active{transform:scale(.96)}.square:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.square .emoji{font-size:clamp(20px,6vw,26px);line-height:1;transition:transform .22s cubic-bezier(.34,1.6,.64,1)}.square .label{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.square.hit{border-color:color-mix(in srgb,var(--who) 60%,transparent);background:color-mix(in srgb,var(--who) 16%,var(--card));animation:pop .26s cubic-bezier(.34,1.6,.64,1)}.square.hit .emoji{transform:scale(1.12)}.square.in-line{border-color:var(--hit);box-shadow:inset 0 0 0 1px var(--hit)}.caller{position:absolute;top:7px;right:8px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--who);color:#12101a;font-size:10px;font-weight:800}@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.06)}to{transform:scale(1)}}.bingo{margin:0 0 20px;padding:14px 16px;border-radius:var(--radius);background:color-mix(in srgb,var(--hit) 16%,var(--card));border:1px solid color-mix(in srgb,var(--hit) 50%,transparent);text-align:center;font-weight:700;animation:pop .4s cubic-bezier(.34,1.6,.64,1)}.bingo small{display:block;font-weight:500;color:var(--muted);margin-top:3px}.panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:14px 16px;margin-bottom:14px}.panel h2{margin:0 0 10px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700}.tally{display:flex;flex-direction:column;gap:8px}.tally-row{display:flex;align-items:center;gap:10px;font-size:14px}.tally-row .dot{width:10px;height:10px;border-radius:50%;background:var(--who);flex:none}.tally-row .count{margin-left:auto;color:var(--muted);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.empty{color:var(--muted);font-size:14px;margin:0}.controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}button.ghost{padding:9px 15px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);font:inherit;font-size:13px;cursor:pointer;transition:color .14s ease,border-color .14s ease}button.ghost:hover{color:var(--text);border-color:var(--muted)}.status{font-size:12px;color:var(--muted);margin-left:auto}.status.warn{color:var(--accent)}.gate{position:fixed;inset:0;display:grid;place-items:center;padding:24px;background:color-mix(in srgb,var(--bg) 85%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:10}.gate form{width:100%;max-width:360px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:22px;text-align:center}.gate h2{margin:0 0 4px;font-size:19px}.gate p{margin:0 0 16px;color:var(--muted);font-size:14px}.gate input{width:100%;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit;font-size:16px;margin-bottom:10px}.gate input:focus{outline:2px solid var(--accent);outline-offset:1px}.gate button[type=submit]{width:100%;padding:11px;border-radius:12px;border:none;background:var(--accent);color:#12101a;font:inherit;font-weight:700;font-size:15px;cursor:pointer}@media (prefers-reduced-motion:reduce){*,:after,:before{animation:none!important;transition:none!important}}