/* ===== Tokens & themes ===== */
:root{
  --bg:#030814;--bg2:#08183a;--panel:rgba(8,20,44,.86);--panel2:rgba(14,32,66,.92);
  --line:rgba(90,200,255,.18);--line2:rgba(90,200,255,.42);
  --accent:#2ee6ff;--accent2:#7b5cff;--hit:#ff3d6e;--ok:#3dffa2;--warn:#ffd23d;
  --text:#e8f6ff;--muted:#8ea8cc;--ship-a:#2c7dff;--ship-b:#14d9ff;
  --glow:0 0 18px rgba(46,230,255,.45);--r:6px;
  --font:"Rajdhani",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
  --display:"Orbitron",var(--font);
  --bw:min(92vw,440px);
  --cut:10px;
}
[data-theme=arctic]{--bg:#05101c;--bg2:#0c2338;--accent:#9ef0ff;--accent2:#4fa8ff;--hit:#ff6b6b;--ship-a:#6fb8ff;--ship-b:#d9f6ff;--line:rgba(180,235,255,.2);--line2:rgba(180,235,255,.48);--glow:0 0 18px rgba(158,240,255,.45)}
[data-theme=inferno]{--bg:#100508;--bg2:#2a0b10;--accent:#ffa53d;--accent2:#ff3d6e;--hit:#ff2848;--ship-a:#ff7a2e;--ship-b:#ffd23d;--line:rgba(255,160,90,.2);--line2:rgba(255,160,90,.48);--glow:0 0 18px rgba(255,165,61,.45);--panel:rgba(36,10,14,.88);--panel2:rgba(58,16,20,.92)}
[data-theme=toxic]{--bg:#030d07;--bg2:#08261a;--accent:#9dff3d;--accent2:#22e3a6;--hit:#ff3dd8;--ship-a:#22c46a;--ship-b:#c6ff3d;--line:rgba(157,255,61,.18);--line2:rgba(157,255,61,.45);--glow:0 0 18px rgba(157,255,61,.4);--panel:rgba(6,30,18,.88);--panel2:rgba(10,44,28,.92)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;min-height:100vh;min-height:100dvh;background:transparent;color:var(--text);font:500 17px/1.45 var(--font);
  overflow-x:hidden;-webkit-tap-highlight-color:transparent;padding-bottom:env(safe-area-inset-bottom)}
[dir=rtl] body{font-family:"Noto Sans Arabic",var(--font)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent)}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.muted{color:var(--muted)}
::selection{background:color-mix(in srgb,var(--accent) 35%,transparent)}

/* ===== Background: static layers + one canvas radar (no blur, no repainting CSS animations) ===== */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,var(--bg2),var(--bg) 70%)}
.bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),radial-gradient(ellipse at 50% 45%,transparent 45%,rgba(0,0,0,.55))}
.bg-grid{position:absolute;left:-50%;right:-50%;bottom:-10%;height:55%;transform:perspective(420px) rotateX(62deg);transform-origin:50% 100%;opacity:.55;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;
  mask-image:linear-gradient(to top,#000 10%,transparent 80%);-webkit-mask-image:linear-gradient(to top,#000 10%,transparent 80%)}
.bg-radar{position:absolute;inset:0;width:100%;height:100%;transition:opacity .6s}
body[data-screen=game] .bg-radar{opacity:.22}
.bg-glow{position:absolute;inset:0;background:radial-gradient(circle at 12% 18%,color-mix(in srgb,var(--accent2) 16%,transparent),transparent 40%),radial-gradient(circle at 88% 75%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 45%)}

/* ===== Header ===== */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:linear-gradient(var(--bg) 40%,color-mix(in srgb,var(--bg) 70%,transparent) 75%,transparent)}
.logo{direction:ltr;display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--text);font:800 clamp(16px,4.4vw,22px)/1 var(--display);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.logo i{font-style:normal;color:var(--accent);text-shadow:var(--glow)}
.logo-mark{width:26px;height:26px;border-radius:50%;border:2px solid var(--accent);box-shadow:var(--glow),inset 0 0 8px color-mix(in srgb,var(--accent) 60%,transparent);position:relative;flex:none;overflow:hidden}
.logo-mark::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 270deg,var(--accent));animation:spin 2.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.top-actions{display:flex;gap:8px;align-items:center}
.lang-pick select{appearance:none;background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238ea8cc'/%3E%3C/svg%3E") no-repeat right 10px center;
  border:1px solid var(--line);border-radius:var(--r);padding:7px 28px 7px 10px;font-size:15px;max-width:150px}
[dir=rtl] .lang-pick select{background-position:left 10px center;padding:7px 10px 7px 28px}
.icon-btn{width:40px;height:40px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel);display:grid;place-items:center;padding:0;transition:border-color .2s}
.icon-btn:hover{border-color:var(--accent)}
.icon-btn svg{width:22px;height:22px;fill:currentColor}
.icon-btn[aria-pressed=false] .wave{opacity:.15}

/* ===== Layout ===== */
main{max-width:1100px;margin:0 auto;padding:4px 16px 24px}
.screen{display:none}
.screen.active{display:block;animation:in .4s cubic-bezier(.2,.8,.2,1)}
@keyframes in{from{opacity:0;transform:translateY(10px)}}

/* HUD panel: dark glass without blur, corner brackets */
.card{position:relative;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--r);padding:20px;
  box-shadow:0 18px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05)}
.card::before{content:"";position:absolute;inset:-1px;pointer-events:none;border-radius:inherit;background-repeat:no-repeat;
  background-image:linear-gradient(var(--accent),var(--accent)),linear-gradient(var(--accent),var(--accent)),linear-gradient(var(--accent),var(--accent)),linear-gradient(var(--accent),var(--accent)),
    linear-gradient(var(--accent),var(--accent)),linear-gradient(var(--accent),var(--accent)),linear-gradient(var(--accent),var(--accent)),linear-gradient(var(--accent),var(--accent));
  background-size:18px 2px,2px 18px,18px 2px,2px 18px,18px 2px,2px 18px,18px 2px,2px 18px;
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%}

/* ===== Home ===== */
.hero{text-align:center;margin:18px auto 22px;max-width:680px}
.hero h1{font:800 clamp(26px,6.6vw,48px)/1.06 var(--display);margin:10px 0 10px;letter-spacing:.03em;text-transform:uppercase;
  background:linear-gradient(90deg,var(--text) 10%,var(--accent) 55%,var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px color-mix(in srgb,var(--accent) 30%,transparent))}
.tagline{color:var(--muted);margin:0;font-size:clamp(16px,4vw,20px);letter-spacing:.02em}
.menu{max-width:470px;margin:0 auto;display:grid;gap:16px}
.field{display:grid;gap:6px;font:600 12px var(--display);color:var(--muted);text-transform:uppercase;letter-spacing:.16em}
.field input,.join input{width:100%;padding:12px 14px;border-radius:var(--r);border:1px solid var(--line);background:rgba(0,6,18,.55);font:600 18px var(--font);outline:none;
  text-transform:none;letter-spacing:normal;color:var(--text);transition:border-color .2s,box-shadow .2s}
.field input:focus,.join input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.mode-ai{display:grid;gap:8px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);background:rgba(0,6,18,.55);border:1px solid var(--line);border-radius:var(--r);padding:3px;gap:3px}
.seg button{border:0;background:none;padding:8px 4px;border-radius:4px;font:700 13px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);transition:color .2s,background-color .2s}
.seg button[aria-checked=true]{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.join{display:grid;grid-template-columns:1fr auto;gap:8px}
.join input{text-transform:uppercase;letter-spacing:.3em;font-family:var(--display);font-size:17px}
.join input::placeholder{letter-spacing:.05em;font-family:var(--font);text-transform:none}
.stats{margin:0;text-align:center;color:var(--muted);font-size:15px;letter-spacing:.03em}
.stats:empty{display:none}
.links{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px}
.link{background:none;border:0;color:var(--accent);padding:4px;font-weight:600;text-decoration:none;letter-spacing:.03em}
.link:hover{text-decoration:underline;text-underline-offset:4px}

/* ===== Buttons (chamfered) ===== */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border:1px solid var(--line2);border-radius:0;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 12%,transparent),color-mix(in srgb,var(--accent) 4%,transparent)),var(--panel2);
  font-weight:700;letter-spacing:.05em;text-decoration:none;color:var(--text);user-select:none;transition:transform .12s,background-color .2s,border-color .2s,color .2s}
.btn:hover{border-color:var(--accent);color:#fff;background-color:color-mix(in srgb,var(--accent) 14%,var(--panel2))}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn:disabled{opacity:.45;pointer-events:none}
.btn.primary{background:linear-gradient(110deg,var(--accent),var(--accent2));color:#021022;border:0;overflow:hidden}
.btn.primary::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);pointer-events:none}
.btn.primary:hover::after{animation:shine .8s ease}
@keyframes shine{to{left:130%}}
.btn.big{padding:16px 18px;font:800 clamp(15px,4.2vw,18px) var(--display);letter-spacing:.1em;text-transform:uppercase;width:100%;--cut:14px}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn.small{padding:7px 12px;font-size:15px;--cut:7px}
.btn.tile{flex-direction:column;gap:2px;padding:16px 8px 14px;text-align:center;line-height:1.15;--cut:14px}
.btn.tile b{font:700 14px var(--display);letter-spacing:.06em;text-transform:uppercase}.btn.tile small{color:var(--muted);font-weight:500;font-size:13px}
.btn .ico{font-size:1.2em;line-height:1}
.btn.tile .ico{font-size:26px;color:var(--accent);margin-bottom:6px;text-shadow:var(--glow)}
.btn.primary .ico{color:#021022}

/* ===== SEO article / footer ===== */
.seo{max-width:760px;margin:30px auto 0;color:#c9dcf3}
.seo h2{font:700 20px/1.25 var(--display);margin:0 0 10px;color:var(--text);letter-spacing:.03em}
.seo h3{font:700 15px var(--display);letter-spacing:.08em;text-transform:uppercase;margin:20px 0 6px;color:var(--accent)}
.seo p,.seo li{font-size:16px}
.seo details{border-top:1px solid var(--line);padding:10px 0}
.seo summary{cursor:pointer;font-weight:700}
.seo summary::marker{color:var(--accent)}
.foot{max-width:1100px;margin:10px auto 0;padding:18px 16px 28px;text-align:center;color:var(--muted);font-size:14px}
.foot nav{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px;margin-bottom:6px}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--accent)}
.ad-slot{max-width:760px;margin:18px auto 0;min-height:100px;text-align:center;overflow:hidden}
.ad-slot::before{content:"Advertisement";display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);opacity:.6;margin-bottom:4px}

/* ===== Lobby ===== */
.lobby{max-width:470px;margin:20px auto;text-align:center;display:grid;gap:14px;justify-items:center}
#lobby-friend{display:grid;gap:12px;justify-items:center;width:100%}
#lobby-friend p{margin:0}
.lobby h2{font:700 18px/1.3 var(--display);margin:0;letter-spacing:.08em;text-transform:uppercase}
.radar-spin{width:170px;height:170px;display:block;border-radius:50%;box-shadow:0 0 40px color-mix(in srgb,var(--accent) 22%,transparent)}
.room-code{font:800 clamp(30px,10vw,44px)/1 var(--display);letter-spacing:.2em;padding:16px 10px 16px 24px;border-radius:var(--r);border:1px solid var(--accent);
  background:repeating-linear-gradient(90deg,transparent 0 3px,rgba(0,0,0,.18) 3px 4px),rgba(0,8,20,.7);color:var(--accent);text-shadow:var(--glow);width:100%;
  box-shadow:inset 0 0 24px color-mix(in srgb,var(--accent) 18%,transparent)}
[dir=rtl] .room-code{padding:16px 24px 16px 10px}
.share-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.share-row .btn{padding:9px 12px;font-size:15px;--cut:7px}
.qr{background:#fff;padding:10px;border-radius:var(--r);line-height:0;width:max-content;justify-self:center;box-shadow:0 0 0 1px var(--accent),var(--glow)}
.qr img,.qr svg{width:150px;height:150px;image-rendering:pixelated}
.timer-text{font:700 30px var(--display);margin:0;color:var(--accent);text-shadow:var(--glow)}

/* ===== Game HUD ===== */
.hud{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin:2px auto 12px;max-width:920px}
.who{display:flex;align-items:center;gap:7px;min-width:0;font-weight:700;padding:7px 10px;border:1px solid var(--line);background:var(--panel);
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.who.op{justify-content:flex-end;clip-path:polygon(0 0,100% 0,100% 100%,10px 100%);border-color:color-mix(in srgb,var(--hit) 30%,transparent)}
.pname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{color:var(--accent);font-size:14px;text-shadow:var(--glow)}.op .avatar{color:var(--hit);text-shadow:0 0 12px var(--hit)}
.wins{font:700 15px var(--display);padding:1px 7px;border-radius:4px;background:rgba(0,0,0,.35);border:1px solid var(--line)}
.wins:empty{display:none}
.online{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);flex:none}
.online.off{background:#556;box-shadow:none}
.hud-mid{text-align:center;min-width:0}
.status{position:relative;font:700 clamp(12px,3.4vw,16px)/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase;padding:9px 14px;border:1px solid var(--line);background:var(--panel);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62vw;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%)}
.status.mine{color:#021022;background:linear-gradient(110deg,var(--accent),var(--accent2));border-color:transparent}
.status.theirs{color:var(--hit);border-color:color-mix(in srgb,var(--hit) 45%,transparent);background:color-mix(in srgb,var(--hit) 8%,var(--panel))}
.clock{height:4px;margin-top:6px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;position:relative}
.clock i{position:absolute;inset:0;transform-origin:left;background:var(--accent);box-shadow:var(--glow);transform:scaleX(var(--p,1));transition:transform .25s linear}
.clock.low i{background:var(--hit)}
.clock span{display:none}

/* ===== Boards ===== */
.boards{display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;gap:16px 28px}
.board-wrap{display:grid;gap:7px;justify-items:center;position:relative}
.board-wrap h3{margin:0;font:700 12px var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.board-wrap.enemy h3{color:color-mix(in srgb,var(--hit) 70%,var(--muted))}
.board{--size:var(--bw);width:var(--size);height:var(--size);position:relative;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);
  border:1px solid var(--line2);border-radius:4px;overflow:hidden;touch-action:manipulation;user-select:none;-webkit-user-select:none;
  background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 72%),linear-gradient(180deg,#041530,#020a1a);
  box-shadow:0 0 0 4px rgba(0,0,0,.3),0 0 40px color-mix(in srgb,var(--accent) 12%,transparent),inset 0 0 50px rgba(0,0,0,.55)}
[dir=rtl] .board{direction:ltr}
/* turn glow + sonar scan line: opacity/transform only, so the GPU does the work */
.board::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;opacity:0;
  box-shadow:inset 0 0 0 2px var(--accent),inset 0 0 34px color-mix(in srgb,var(--accent) 40%,transparent)}
.board::after{content:"";position:absolute;left:0;right:0;top:0;height:22%;z-index:1;pointer-events:none;opacity:0;transform:translateY(-100%);
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 16%,transparent) 85%,color-mix(in srgb,var(--accent) 45%,transparent))}
.board.can-fire::before{animation:edge 1.8s ease-in-out infinite}
.board.can-fire::after{opacity:1;animation:scan 3.2s linear infinite}
@keyframes edge{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes scan{to{transform:translateY(460%)}}
.cell{position:relative;border-right:1px solid color-mix(in srgb,var(--accent) 11%,transparent);border-bottom:1px solid color-mix(in srgb,var(--accent) 11%,transparent)}
.cell:nth-child(10n){border-right:0}
.cell::after,.cell::before{content:"";position:absolute;inset:0;margin:auto;pointer-events:none}
.cell.m::after{width:34%;height:34%;border-radius:50%;border:2px solid color-mix(in srgb,var(--accent) 55%,transparent);
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 70%,transparent) 0 22%,transparent 26%)}
.cell.h,.cell.s{background:radial-gradient(circle,color-mix(in srgb,var(--hit) 42%,transparent),transparent 72%)}
.cell.h::after,.cell.s::after{width:50%;height:50%;border-radius:50%;z-index:3;
  background:radial-gradient(circle,#fff 0 14%,#ffd27a 26%,var(--hit) 46%,transparent 72%);animation:flicker 1.3s ease-in-out infinite alternate}
.cell.s{background:color-mix(in srgb,var(--hit) 20%,transparent)}
.cell.s::after{animation:none;opacity:.7;background:radial-gradient(circle,#ffe 0 8%,var(--hit) 28%,transparent 66%)}
@keyframes flicker{from{opacity:.75;transform:scale(.9)}to{opacity:1;transform:scale(1.08)}}
.cell.new.m::before,.cell.new.h::before,.cell.new.s::before{inset:-60%;border-radius:50%;border:2px solid var(--accent);animation:ring .6s ease-out forwards;z-index:4}
.cell.new.h::before,.cell.new.s::before{border-color:var(--hit);border-width:3px}
@keyframes ring{from{transform:scale(.2);opacity:1}to{transform:scale(1);opacity:0}}
.cell.last{outline:2px solid color-mix(in srgb,var(--warn) 80%,transparent);outline-offset:-2px;z-index:2}
/* shot sent, waiting for the server */
.cell.pend::before{inset:12%;border:2px solid var(--warn);border-radius:50%;border-top-color:transparent;border-bottom-color:transparent;animation:spin .6s linear infinite;z-index:4}

.board.can-fire .cell:not(.m):not(.h):not(.s){cursor:crosshair}
@media (hover:hover){
  .board.can-fire .cell:not(.m):not(.h):not(.s):hover{background:color-mix(in srgb,var(--accent) 20%,transparent)}
  .board.can-fire .cell:not(.m):not(.h):not(.s):hover::after{inset:14%;border:2px solid var(--accent);border-radius:50%;
    background:linear-gradient(var(--accent),var(--accent)) center/2px 100% no-repeat,linear-gradient(var(--accent),var(--accent)) center/100% 2px no-repeat;opacity:.85}
}
.cell.pv-ok{background:color-mix(in srgb,var(--ok) 28%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 60%,transparent)}
.cell.pv-bad{background:color-mix(in srgb,var(--hit) 32%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hit) 60%,transparent)}

/* ships: SVG art laid over the grid */
.ship{position:absolute;left:calc(var(--c) * 10%);top:calc(var(--r) * 10%);width:calc(var(--len) * 10%);height:10%;pointer-events:none;z-index:1;transition:left .15s,top .15s;
  --hull:color-mix(in srgb,var(--ship-a) 28%,#08111f);--deck:color-mix(in srgb,var(--ship-a) 45%,#0d1c33);--sup:color-mix(in srgb,var(--ship-b) 30%,#1a2a44);
  --gun:color-mix(in srgb,var(--ship-b) 55%,#c8e6ff);--trim:var(--ship-b)}
.ship.v{width:10%;height:calc(var(--len) * 10%)}
.ship svg,.mini svg{display:block;width:100%;height:100%;overflow:visible}
.ship svg{filter:drop-shadow(0 0 4px color-mix(in srgb,var(--ship-b) 55%,transparent))}
.ship.v svg{position:absolute;top:0;left:100%;width:calc(var(--len) * 100%);height:calc(100% / var(--len));transform-origin:0 0;transform:rotate(90deg)}
.hull{fill:var(--hull);stroke:var(--trim);stroke-width:4}
.deck{fill:var(--deck)}
.sup{fill:var(--sup);stroke:rgba(255,255,255,.3);stroke-width:2}
.gun{fill:var(--gun)}
.gun .dim{fill:var(--hull)}
.dim{fill:rgba(0,0,0,.35)}
.mast{fill:var(--trim)}
.mark{fill:none;stroke:var(--trim);stroke-width:3;opacity:.55}
.ship.sunk,.dead .mini{--hull:#2a0c13;--deck:#43141e;--sup:#3a1218;--gun:#6a2a32;--trim:var(--hit)}
.ship.sunk svg{filter:none;opacity:.92}
.ship.enemy-sunk{z-index:2}
.ship.ghost{opacity:.5}
.ship.ghost .hull{stroke-dasharray:10 8}
.ship.sel svg{filter:drop-shadow(0 0 3px var(--warn)) drop-shadow(0 0 10px var(--warn))}
.board.placing .ship{pointer-events:none}
.board.placing{touch-action:none;cursor:pointer}
.mini{display:block;width:calc(var(--len) * 18px);height:18px;
  --hull:color-mix(in srgb,var(--ship-a) 28%,#08111f);--deck:color-mix(in srgb,var(--ship-a) 45%,#0d1c33);--sup:color-mix(in srgb,var(--ship-b) 30%,#1a2a44);
  --gun:color-mix(in srgb,var(--ship-b) 55%,#c8e6ff);--trim:var(--ship-b)}

.fleet-bar{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:var(--bw)}
.fleet-bar span{display:flex;padding:3px 6px;border-radius:4px;background:rgba(0,0,0,.3);border:1px solid var(--line)}
.fleet-bar .mini{width:calc(var(--len) * 11px);height:11px}
.fleet-bar span.dead{opacity:.55;border-color:color-mix(in srgb,var(--hit) 40%,transparent)}

/* placement */
.place-ui{max-width:560px;margin:14px auto 0;display:grid;gap:12px;text-align:center}
.hint{margin:0;color:var(--muted);font-size:15px}
.dock{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.dock button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 10px 7px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel);touch-action:none;transition:border-color .2s,opacity .2s}
.dock button:hover{border-color:var(--line2)}
.dock button small{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.04em}
.dock button.sel{border-color:var(--warn);box-shadow:0 0 14px color-mix(in srgb,var(--warn) 40%,transparent)}
.dock button.done{opacity:.4}
.place-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

/* phases */
#s-game.ph-place #wrap-enemy,#s-game.ph-place #fleet-mine{display:none}
#s-game:not(.ph-place) #place-ui{display:none}
#s-game.ph-place .board-wrap.mine h3{display:none}
#s-game.ph-battle #wrap-mine{--bw:min(56vw,250px)}
#s-game.ph-battle #wrap-mine .fleet-bar span{padding:2px 4px}
#s-game.ph-battle #wrap-mine .fleet-bar .mini{width:calc(var(--len) * 8px);height:8px}
.game-foot{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.emotes{display:flex;gap:4px;padding:4px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line)}
.emotes button{border:0;background:none;font-size:22px;padding:4px 6px;border-radius:4px;line-height:1;transition:transform .12s}
.emotes button:hover{background:var(--panel2);transform:scale(1.15)}
.bubble{position:fixed;z-index:70;font-size:44px;pointer-events:none;animation:bub 2.4s ease forwards;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}
@keyframes bub{0%{transform:translateY(10px) scale(.4);opacity:0}15%{transform:translateY(0) scale(1.15);opacity:1}80%{opacity:1}100%{transform:translateY(-40px) scale(1);opacity:0}}

@media (min-width:860px){
  :root{--bw:min(42vw,440px)}
  #s-game.ph-battle #wrap-mine{--bw:min(36vw,380px)}
  #s-game.ph-place .board-wrap.mine{--bw:min(70vh,480px)}
}
@media (max-width:859px){
  #s-game.ph-battle .boards{gap:12px}
  #s-game.ph-battle #wrap-mine{grid-template-columns:auto auto;align-items:center}
  #s-game.ph-battle #wrap-mine h3{grid-column:1/-1}
  #s-game.ph-battle #wrap-mine .fleet-bar{flex-direction:column;max-width:none}
}

/* ===== Toasts, banner, modal ===== */
.toasts{position:fixed;left:50%;top:calc(64px + env(safe-area-inset-top));transform:translateX(-50%);z-index:80;display:grid;gap:8px;width:max-content;max-width:92vw;pointer-events:none}
.toast{padding:10px 18px;background:var(--panel2);border:1px solid var(--line2);font-weight:700;letter-spacing:.03em;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.5);animation:toast 2.6s ease forwards;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.toast.hit{border-color:var(--hit);color:#ffd6df;background:color-mix(in srgb,var(--hit) 14%,var(--panel2))}.toast.good{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,var(--panel2))}
@keyframes toast{0%{opacity:0;transform:translateY(-10px)}10%,85%{opacity:1;transform:none}100%{opacity:0}}
.net-banner{position:fixed;bottom:0;left:0;right:0;z-index:90;padding:10px calc(16px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom));text-align:center;background:#5a1020;color:#fff;font-weight:700}
.modal{border:0;padding:0;background:transparent;color:var(--text);max-width:min(92vw,440px);width:100%}
.modal::backdrop{background:rgba(1,4,12,.8)}
.modal[open]{animation:pop .32s cubic-bezier(.2,1.3,.4,1)}
@keyframes pop{from{transform:scale(.88);opacity:0}}
.modal-body{position:relative;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line2);border-radius:var(--r);padding:24px 18px;text-align:center;
  box-shadow:0 20px 70px rgba(0,0,0,.6),0 0 40px color-mix(in srgb,var(--accent) 18%,transparent);max-height:88vh;overflow:auto}
.modal-body h2{font:800 30px/1.1 var(--display);margin:4px 0 8px;letter-spacing:.08em;text-transform:uppercase}
.modal-body h2.win{color:var(--ok);text-shadow:0 0 22px color-mix(in srgb,var(--ok) 60%,transparent);font-size:clamp(30px,9vw,40px)}
.modal-body h2.lose{color:var(--hit);text-shadow:0 0 22px color-mix(in srgb,var(--hit) 60%,transparent);font-size:clamp(30px,9vw,40px)}
.modal-body p{margin:6px 0;color:#c9dcf3}
.modal-body ol{text-align:start;padding-inline-start:22px}
.modal-actions{display:grid;gap:8px;margin-top:16px}
.modal-actions .row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}
.kpis div{background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:4px;padding:10px 4px;border-top:2px solid var(--accent)}
.kpis b{display:block;font:700 22px var(--display);color:var(--accent);text-shadow:var(--glow)}
.kpis small{color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.themes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.themes button{border-radius:var(--r);border:1px solid var(--line);padding:14px 8px;background:var(--panel);display:grid;gap:6px;justify-items:center;font-weight:700}
.themes button.on{border-color:var(--accent);box-shadow:var(--glow)}
.themes .sw{width:60px;height:18px;border-radius:9px}
.themes small{color:var(--muted);font-weight:500;font-size:12px}
.fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}
.shake{animation:shake .35s}
@keyframes shake{20%{transform:translate(-5px,2px)}40%{transform:translate(4px,-3px)}60%{transform:translate(-3px,1px)}80%{transform:translate(2px,2px)}}

/* ===== Content pages ===== */
.page{max-width:780px;margin:10px auto 0;padding:26px clamp(18px,4vw,34px)}
.page h1{font:800 clamp(24px,5vw,34px)/1.15 var(--display);margin:6px 0 16px;letter-spacing:.03em;
  background:linear-gradient(90deg,var(--text),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.page h2{font:700 18px/1.3 var(--display);letter-spacing:.05em;color:var(--accent);margin:28px 0 8px;padding-top:14px;border-top:1px solid var(--line)}
.page p,.page li{color:#cfe0f5;line-height:1.6}
.page li{margin:4px 0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}
}
#s-game.ph-wait #wrap-enemy,#s-game.ph-wait #fleet-mine,#s-game.ph-wait .board-wrap.mine h3{display:none}
@media (min-width:860px){#s-game.ph-wait .board-wrap.mine{--bw:min(70vh,480px)}}
.board .layer{position:absolute;inset:0;pointer-events:none}
@media (max-width:440px){
  .top{padding-left:12px;padding-right:12px}
  .lang-pick select{max-width:104px;font-size:14px}
  .logo{font-size:15px;gap:6px}.logo-mark{width:22px;height:22px}
  .who{font-size:15px;padding:6px 8px}.avatar{display:none}
  .status{padding:9px 10px;letter-spacing:.03em;max-width:54vw}
}