:root{--bg:#0b1118;--panel:#121c26;--panel-2:#1a2735;--line:#263340;--ink:#e6edf2;--ink-2:#aebbc6;--ink-3:#7e8d99;--accent:#f08a5a;--accent-ink:#1b0d05;--hit:#e5654c;--sunk:#7c2f22;--miss:#4f6478;--ship:#6cc0c7;--good:#7cc244;--warn:#f0b25a;--font-display:"Barlow Condensed", "Arial Narrow", Impact, sans-serif;--font-body:"IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;--font-mono:"IBM Plex Mono", Consolas, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--ink);font-family:var(--font-body);margin:0;line-height:1.45}body{min-height:100dvh}h1,h2,h3{font-family:var(--font-display);text-wrap:balance;margin:0;font-weight:700;line-height:1.05}h1{font-size:40px}h2{font-size:28px}h3{font-size:20px}p{margin:0 0 12px}a{color:var(--accent)}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.eyebrow{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-size:12px}.muted{color:var(--ink-3)}.small{font-size:13px}.btn{border:1px solid var(--line);background:var(--panel-2);color:var(--ink);border-radius:6px;justify-content:center;align-items:center;gap:8px;min-height:44px;padding:12px 18px;font-weight:600;display:inline-flex}.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.btn-block{width:100%}.btn-sm{min-height:34px;padding:6px 12px;font-size:14px}.btn-danger{border-color:var(--hit);color:var(--hit)}.field{flex-direction:column;gap:6px;margin-bottom:14px;display:flex}.field label{color:var(--ink-2);font-size:13px}.input{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:6px;width:100%;min-height:44px;padding:12px 14px}.input-code{font-family:var(--font-mono);letter-spacing:.3em;text-transform:uppercase;text-align:center;font-size:28px}.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:16px}.stack{flex-direction:column;gap:12px;display:flex}.row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.error{color:var(--hit);font-size:14px}.pill{font-size:12px;font-family:var(--font-mono);background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:2px 10px;display:inline-block}.grid{aspect-ratio:1;gap:3px;width:100%;display:grid}.grid.labeled{grid-template-columns:auto repeat(var(--n), 1fr)}.cell{background:var(--panel-2);aspect-ratio:1;width:100%;color:var(--ink-3);border:0;border-radius:2px;justify-content:center;align-items:center;padding:0;font-size:10px;display:flex;position:relative}.cell.clickable{cursor:pointer}.cell.clickable:hover{outline:1px solid var(--ink-3)}.cell.miss{background:var(--miss)}.cell.hit{background:var(--hit)}.cell.sunk{background:var(--sunk)}.cell.ship{background:var(--ship)}.cell.ship.hit{background:var(--hit);box-shadow:inset 0 0 0 2px var(--ship)}.cell.preview{background:#6cc0c773}.cell.invalid{background:#e5654c80}.cell.selected{outline:3px solid var(--accent);outline-offset:-3px}.cell.fresh:after{content:"";border:2px solid #fff;border-radius:2px;animation:1.2s ease-out 3 pulse;position:absolute;inset:0}.axis{font-family:var(--font-mono);color:var(--ink-3);justify-content:center;align-items:center;font-size:10px;display:flex}@keyframes pulse{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.6)}}@media (prefers-reduced-motion:reduce){.cell.fresh:after{animation:none}}.pips{gap:3px;display:inline-flex}.pip{background:var(--ship);border-radius:2px;width:10px;height:10px}.pip.damaged{background:var(--warn)}.pip.sunk{background:#3a4653}.phone{max-width:480px;margin:0 auto;padding:16px 16px 84px}.phone-top{border-bottom:1px solid var(--line);justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px;padding-bottom:12px;display:flex}.tabs{background:var(--panel);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);display:flex;position:fixed;bottom:0;left:0;right:0}.tab{color:var(--ink-3);background:0 0;border:0;flex:1;min-height:52px;padding:12px 8px;font-weight:600;position:relative}.tab.active{color:var(--accent)}.badge{background:var(--accent);color:var(--accent-ink);font-size:11px;font-family:var(--font-mono);border-radius:999px;padding:1px 6px;position:absolute;top:6px;right:calc(50% - 28px)}.options{grid-template-columns:1fr 1fr;gap:10px;display:grid}.option{border:1px solid var(--line);background:var(--panel-2);border-radius:8px;min-height:72px;padding:18px 12px;font-size:17px;font-weight:600}.option.chosen{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.answer-card{text-align:left;border:1px solid var(--line);background:var(--panel-2);border-radius:8px;width:100%;padding:14px;font-size:17px}.answer-card.chosen{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.targets{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.target{border:1px solid var(--line);background:var(--panel);text-align:left;border-radius:6px;padding:8px}.target.chosen{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.target .grid{gap:1px}.chat-list{flex-direction:column;gap:8px;display:flex}.chat-thread{flex-direction:column;gap:6px;max-height:50dvh;padding:8px 0;display:flex;overflow-y:auto}.bubble{background:var(--panel-2);border-radius:12px;max-width:85%;padding:8px 12px}.bubble.mine{background:var(--accent);color:var(--accent-ink);align-self:flex-end}.color-dot{border-radius:50%;width:12px;height:12px;display:inline-block}.seat{background:var(--panel);border:1px solid var(--line);border-radius:6px;align-items:center;gap:10px;padding:10px 12px;display:flex}.swatches{flex-wrap:wrap;gap:8px;display:flex}.swatch{border:3px solid #0000;border-radius:50%;width:40px;height:40px}.swatch.chosen{border-color:#fff}.tv{grid-template-rows:auto 1fr;gap:16px;height:100dvh;padding:20px 28px;display:grid}.tv-banner{background:var(--panel);border:1px solid var(--line);border-radius:10px;grid-template-columns:1fr auto;align-items:center;gap:24px;min-height:120px;padding:18px 24px;display:grid}.tv-banner h2{font-size:clamp(24px,3.2vw,44px)}.tv-clock{font-family:var(--font-display);color:var(--accent);font-variant-numeric:tabular-nums;font-size:clamp(40px,6vw,84px);line-height:1}.tv-clock.paused{color:var(--warn);font-size:clamp(24px,3vw,40px)}.oceans{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(3,1fr);gap:16px;min-height:0;display:grid}.oceans.n2,.oceans.n4{grid-template-columns:repeat(2,1fr)}.oceans.n2,.oceans.n3{grid-template-rows:1fr}.ocean{background:var(--panel);border:1px solid var(--line);border-radius:10px;grid-template-rows:auto 1fr;gap:8px;min-height:0;padding:12px;display:grid}.ocean.out{opacity:.45}.ocean.turn{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.ocean-head{font-family:var(--font-display);justify-content:space-between;align-items:center;gap:8px;font-size:22px;display:flex}.ocean-body{justify-content:center;min-height:0;display:flex}.ocean-body .grid{width:auto;max-width:100%;height:100%}.online{background:var(--good);border-radius:50%;width:8px;height:8px}.online.off{background:var(--hit)}.tv-lobby{grid-template-columns:1fr 1fr;align-items:center;gap:32px;display:grid}.tv-code{font-family:var(--font-mono);letter-spacing:.15em;font-size:clamp(64px,12vw,160px);line-height:1}.tv-answers{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;display:grid}.tv-answer{background:var(--panel-2);border-radius:8px;padding:14px 16px;font-size:22px}.tv-answer .by{color:var(--ink-3);font-size:14px}.tv-answer.winner{outline:2px solid var(--accent)}.bar{background:var(--accent);border-radius:4px;height:8px;margin-top:8px}.ticker{font-family:var(--font-mono);color:var(--ink-2);font-size:14px}.center{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:24px;display:flex}.landing{max-width:520px;margin:0 auto;padding:32px 20px 64px}.landing h1{font-size:56px}.landing .card+.card{margin-top:16px}
