:root { --bg:#f5f5f7; --surface:#fff; --ink:#18181b; --muted:#6b6b73; --line:#d2d2d7; --accent:#18181b; --contrast:#fff; --sea:#dbeafe; --sea-strong:#93c5fd; --hit:#c62828; --hit-bg:#ffd9d9; --miss:#8e8e93; --miss-bg:#f1f1f3; --success:#15803d; --hover:#f0f7ff; --revealed-a:#dbeafe; --revealed-b:#bfdbfe; }
.secondary-button { width:100%; border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--ink); font-weight:750; padding:12px; margin-top:9px; }
:root[data-theme="dark"] { --bg:#111113; --surface:#1c1c1e; --ink:#f5f5f7; --muted:#a7a7ad; --line:#3b3b40; --accent:#f5f5f7; --contrast:#111113; --sea:#17335d; --sea-strong:#285a96; --hit:#ff8585; --hit-bg:#4a2022; --miss:#b1b1ba; --miss-bg:#2a2a2e; --success:#62dc8b; --hover:#252f3b; --revealed-a:#17335d; --revealed-b:#224a78; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--ink); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; padding:max(18px,env(safe-area-inset-top)) 12px max(36px,env(safe-area-inset-bottom)); -webkit-tap-highlight-color:transparent; }
.game { width:min(100%,600px); margin:auto; }.game-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }.header-actions { display:flex; gap:7px; }.game-header h1 { margin:0; font-size:clamp(2rem,8vw,2.6rem); line-height:1; }.game-header p { margin:7px 0 20px; color:var(--muted); } button,input { font:inherit; } button { cursor:pointer; }
.icon-button,.share-actions button,.section-title button,.join-row button { border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--ink); font-weight:700; }.icon-button { width:43px; height:43px; font-size:1.5rem; }.card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px; }.welcome h2 { margin:0 0 7px; }.welcome p,.hint { color:var(--muted); line-height:1.45; }.field-label { display:block; margin:18px 0 7px; font-size:.82rem; font-weight:750; color:var(--muted); } input { width:100%; border:1px solid var(--line); border-radius:11px; padding:12px; background:var(--surface); color:var(--ink); }.primary-button { width:100%; border:0; border-radius:11px; background:var(--accent); color:var(--contrast); font-weight:750; padding:13px; margin-top:11px; }
.join-line { display:grid; grid-template-columns:1fr auto 1fr; gap:9px; align-items:center; margin:20px 0 0; color:var(--muted); font-size:.8rem; }.join-line:before,.join-line:after { content:""; height:1px; background:var(--line); }.join-row { display:flex; gap:8px; }.join-row input { text-transform:uppercase; }.join-row button { padding:0 15px; }.share-card { text-align:center; margin-bottom:12px; }.eyebrow { display:block; color:var(--muted); font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }.share-card strong { display:block; font-size:clamp(1.8rem,7vw,2.5rem); letter-spacing:.14em; margin:4px 0 12px; }.share-actions { display:flex; justify-content:center; gap:8px; }.share-actions button,.section-title button { padding:9px 11px; }
.captains { display:flex; justify-content:center; flex-wrap:wrap; gap:6px 16px; margin:0 0 13px; color:var(--muted); font-size:.85rem; }.captains b { color:var(--ink); }
.captains span { padding:4px 7px; border-radius:999px; }.captains .active-turn { background:var(--sea-strong); color:var(--ink); font-weight:800; }.captains .eliminated { opacity:.45; text-decoration:line-through; }.targets { grid-column:1 / -1; display:flex; flex-wrap:wrap; justify-content:center; gap:7px; }.targets button { border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); padding:8px 10px; font-weight:700; }.targets button.selected { background:var(--ink); color:var(--contrast); }.targets button.eliminated { opacity:.45; text-decoration:line-through; }
.taunts { grid-column:1 / -1; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:7px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:10px; }.taunts span { color:var(--muted); font-size:.8rem; font-weight:800; margin-right:2px; }.taunts button { border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); font-size:.8rem; font-weight:700; padding:7px 9px; }.taunts button:active { transform:scale(.96); }.screen-shake { animation:screen-shake .42s ease-in-out; }.confetti-piece { position:fixed; z-index:5; top:-16px; width:10px; height:16px; border-radius:2px; pointer-events:none; animation:confetti-fall 1.3s ease-in forwards; } @keyframes screen-shake { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-8px); } 40% { transform:translateX(8px); } 60% { transform:translateX(-5px); } 80% { transform:translateX(5px); } } @keyframes confetti-fall { to { transform:translate(var(--drift),110vh) rotate(680deg); opacity:0; } }
.taunt-banner { position:fixed; z-index:6; left:50%; top:max(18px,env(safe-area-inset-top)); transform:translate(-50%,-18px); width:max-content; max-width:90vw; border:1px solid var(--line); border-radius:999px; background:var(--ink); color:var(--contrast); padding:11px 16px; font-weight:800; box-shadow:0 8px 28px #0004; opacity:0; pointer-events:none; transition:opacity 160ms ease,transform 160ms ease; }.taunt-banner.show { opacity:1; transform:translate(-50%,0); }
.status { min-height:55px; display:flex; align-items:center; justify-content:center; text-align:center; font-weight:700; line-height:1.35; padding:8px; }.your-turn { color:var(--success); }.finished { color:var(--hit); }.section-title { display:flex; align-items:center; justify-content:space-between; gap:10px; }.section-title h2 { font-size:1.05rem; margin:8px 0; }.counter { color:var(--muted); font-size:.84rem; font-weight:700; }.ships { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; margin:10px 0; }.ship-picker { display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line); border-radius:10px; padding:9px; background:var(--surface); color:var(--ink); font-size:.8rem; font-weight:700; }.ship-picker.selected { outline:2px solid var(--ink); }.ship-picker.placed { opacity:.4; }.ship-picker i { display:flex; gap:2px; }.ship-picker i:after { content:""; display:block; width:calc(var(--ship-size)*7px); height:8px; border-radius:6px; background:var(--sea-strong); }
.board { width:min(94vw,520px); aspect-ratio:1; display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); grid-template-rows:repeat(10,minmax(0,1fr)); border:4px solid var(--ink); border-radius:4px; overflow:hidden; background:var(--surface); margin:auto; }.cell { appearance:none; border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:clamp(16px,4.5vw,28px); font-weight:800; line-height:1; min-width:0; min-height:0; overflow:hidden; padding:0; }.cell:hover:not(:disabled) { background:var(--hover); }.cell:disabled { cursor:default; }.cell.ship { background:var(--sea-strong); }.cell.hit { background:var(--hit-bg); color:var(--hit); }.cell.miss { background:var(--miss-bg); color:var(--miss); }.ready-button:disabled { opacity:.45; cursor:not-allowed; }.boards { display:grid; gap:18px; }.enemy-board .cell:not(:disabled) { cursor:crosshair; }.toast { position:fixed; z-index:2; left:50%; bottom:22px; transform:translateX(-50%); width:max-content; max-width:90vw; background:var(--ink); color:var(--contrast); border-radius:11px; padding:11px 14px; font-weight:650; box-shadow:0 8px 28px #0004; }.hidden { display:none!important; }
.cell.preview { background:var(--sea); box-shadow:inset 0 0 0 2px var(--sea-strong); }.cell.revealed-ship { background:repeating-linear-gradient(135deg,var(--revealed-a) 0 6px,var(--revealed-b) 6px 12px); }.placement-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }.placement-actions button { border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--ink); font-weight:700; padding:11px 8px; }.placement-actions button:disabled { opacity:.45; cursor:not-allowed; }
@media (min-width:650px) { .boards { grid-template-columns:1fr 1fr; gap:14px; }.board { width:100%; }.ships { grid-template-columns:repeat(5,1fr); }.ship-picker { display:block; }.ship-picker i { margin-top:6px; } }