:root{--bg:#0b1b2b;--panel:#12304a;--deep:#0a2236;--line:#1f4a6b;--text:#e6f0f8;--muted:#8fa9bf;--accent:#2aa6c9;--hit:#e5533d;--miss:#9fb8cc;--ship:#5d7b94;--sunk:#7a1f16;--ok:#3fbf7f}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at top,#10304b,var(--bg) 60%);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;padding:12px max(12px,env(safe-area-inset-right)) 24px max(12px,env(safe-area-inset-left))}
#app{max-width:760px;margin:0 auto}
header{display:flex;align-items:center;justify-content:space-between;gap:8px}
h1{font-size:1.3rem;margin:4px 0 10px}
h2{font-size:1.1rem;margin:0 0 8px}
.conn{font-size:.8rem;padding:3px 8px;border-radius:99px;background:var(--panel);color:var(--muted)}
.conn.bad{background:#5a2a22;color:#ffd7cf}
.banner{background:#5a2a22;color:#ffe3dd;border-radius:8px;padding:8px 12px;margin-bottom:10px;font-size:.95rem}
.banner.info{background:var(--panel);color:var(--text)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px}
button{font:inherit;touch-action:manipulation;background:var(--accent);color:#04202e;border:0;border-radius:8px;padding:10px 14px;min-height:44px;font-weight:600;cursor:pointer}
button.sec{background:transparent;color:var(--text);border:1px solid var(--line)}
button:disabled{opacity:.45;cursor:default}
button:focus-visible,input:focus-visible{outline:2px solid #fff;outline-offset:2px}
input{font:inherit;font-size:1.1rem;letter-spacing:.2em;text-transform:uppercase;width:9em;padding:10px;min-height:44px;border-radius:8px;border:1px solid var(--line);background:var(--deep);color:var(--text)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.muted{color:var(--muted)}
.code{font-size:2rem;font-weight:700;letter-spacing:.2em}
.linkbox{word-break:break-all;background:var(--deep);padding:8px;border-radius:8px;font-size:.9rem;margin:8px 0}
#qr{background:#fff;padding:8px;border-radius:8px;display:inline-block;line-height:0}
#qr svg{width:160px;height:160px}
.status{font-weight:700;font-size:1.05rem;margin:0 0 8px}
.status.you{color:var(--ok)}
.boards{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:700px){.boards{grid-template-columns:1fr 1fr}}
.boards h2{display:flex;justify-content:space-between}
.grid{display:grid;grid-template-columns:repeat(10,1fr);gap:2px;background:var(--line);padding:2px;border-radius:8px;width:100%;max-width:420px;margin:0 auto;touch-action:manipulation}
.c{aspect-ratio:1;background:var(--deep);position:relative;border:0;padding:0;min-height:0;border-radius:2px;font-size:0}
button.c{cursor:pointer}
.c.ship{background:var(--ship)}
.c.pre{background:#3b8da8}
.c.bad{background:#a33}
.c.miss::after{content:"";position:absolute;inset:36%;border-radius:50%;background:var(--miss)}
.c.hit{background:var(--hit)}
.c.hit::after{content:"✕";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(10px,3.6vw,18px);color:#fff;font-weight:700}
.c.sunk{background:var(--sunk)}
.c.rev{background:#8b6b3a}
.c.last{outline:2px solid #ffd54a;outline-offset:-2px}
.fleet{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.fleet button{min-width:44px;background:var(--deep);color:var(--text);border:1px solid var(--line)}
.fleet button.sel{border-color:var(--accent);background:#164d68}
.fleet button.done{opacity:.4}
.result{font-size:1.2rem;font-weight:700}

/* Effekte */
.mute{margin-left:auto;min-height:36px;padding:4px 10px}
@keyframes fx-miss{0%{box-shadow:0 0 0 0 rgba(159,184,204,.9)}100%{box-shadow:0 0 0 18px rgba(159,184,204,0)}}
@keyframes fx-hit{0%{transform:scale(1.9);filter:brightness(2.2);box-shadow:0 0 14px 6px #ffb347}60%{transform:scale(.9)}100%{transform:scale(1);filter:none;box-shadow:0 0 0 0 transparent}}
@keyframes fx-sunkship{0%,100%{filter:none}25%,75%{filter:brightness(2.4) saturate(1.6);box-shadow:0 0 10px 3px #ff5a3c}}
@keyframes shake{0%,100%{transform:translate(0,0)}15%{transform:translate(-5px,2px)}30%{transform:translate(5px,-3px)}45%{transform:translate(-4px,-2px)}60%{transform:translate(4px,3px)}80%{transform:translate(-2px,1px)}}
@keyframes fxpop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}30%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-62%) scale(1)}}
.c.fx-miss{animation:fx-miss .9s ease-out both;z-index:2}
.c.fx-hit{animation:fx-hit .8s ease-out both;z-index:3}
.c.fx-sunk{animation:fx-hit 1s ease-out both;z-index:3}
.c.fx-sunkship{animation:fx-sunkship 1.2s ease-in-out both;z-index:2}
.card.shake{animation:shake .5s ease-in-out both}
.fxtext{position:fixed;left:50%;top:38%;z-index:50;pointer-events:none;font-weight:900;font-size:clamp(2rem,10vw,4rem);letter-spacing:.04em;text-align:center;max-width:92vw;text-shadow:0 3px 14px rgba(0,0,0,.7);animation:fxpop 1.5s ease-out both}
.fxtext.hit{color:#ffb347}
.fxtext.hit.enemy{color:#ff8a70;font-size:clamp(1.6rem,8vw,3rem)}
.fxtext.sunk{color:#ff4b2e;font-size:clamp(1.8rem,9vw,3.6rem)}
.fxtext.miss{color:#9fd3ea;font-size:clamp(1.6rem,8vw,2.8rem)}
.fxtext.win{color:#6fe3a0}
.fxtext.lose{color:#c9d6e2}
@media (prefers-reduced-motion:reduce){.c.fx-miss,.c.fx-hit,.c.fx-sunk,.c.fx-sunkship,.card.shake{animation:none}.fxtext{animation-duration:1.5s;animation-name:none;opacity:1;transform:translate(-50%,-50%)}}

.banner{position:fixed;top:8px;left:12px;right:12px;max-width:560px;margin:0 auto;z-index:60;box-shadow:0 4px 16px rgba(0,0,0,.45)}

.c.rm{outline:2px dashed #ffd54a;outline-offset:-2px;cursor:pointer}
.row.actions{position:sticky;bottom:0;z-index:15;padding:10px 0;background:linear-gradient(to top,var(--bg) 70%,transparent)}