/* ============================================================
   Морской бой — страница игры и игровая комната
   ============================================================ */
.primary-link.sea-primary{background:var(--ocean);box-shadow:0 6px 16px rgba(27,107,224,.25)}
.primary-link.sea-primary:hover{background:var(--ocean-deep);box-shadow:0 10px 22px rgba(27,107,224,.3)}

/* ---------- Витрина ---------- */
.sea-hero-visual{position:relative;min-height:440px;overflow:hidden;border-radius:var(--r-lg);background:radial-gradient(circle at 60% 42%,rgba(58,166,255,.45),transparent 28%),linear-gradient(160deg,#1f74e6 0%,#0e3f8f 100%);isolation:isolate}
.sea-hero-visual::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:linear-gradient(to bottom,#000,transparent 95%);mask-image:linear-gradient(to bottom,#000,transparent 95%)}
.sea-hero-visual>img{position:absolute;z-index:3;left:4%;top:30%;width:92%;filter:drop-shadow(0 26px 20px rgba(0,0,0,.4));transform:rotate(-7deg);animation:shipFloat 5s ease-in-out infinite}
@keyframes shipFloat{50%{transform:rotate(-6deg) translateY(-9px)}}
.sea-radar{position:absolute;left:50%;top:46%;width:340px;aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.25);border-radius:50%}
.sea-radar i{position:absolute;inset:17%;border:1px solid rgba(255,255,255,.2);border-radius:50%}
.sea-radar i:nth-child(2){inset:34%}
.sea-radar i:nth-child(3){inset:49.5%}
.sea-radar span{position:absolute;left:50%;top:50%;width:50%;height:1px;background:linear-gradient(90deg,#9fe2ff,transparent);transform-origin:left;animation:radar 4s linear infinite}
@keyframes radar{to{transform:rotate(360deg)}}
.sea-visual-chip{position:absolute;z-index:4;left:22px;top:22px;padding:6px 12px;border-radius:var(--r-pill);background:var(--mint);color:#063a27;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.sea-target{position:absolute;z-index:5;width:46px;height:46px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.6);border-radius:50%;color:#fff;font-size:12px;font-weight:800}
.sea-target::before,.sea-target::after{content:"";position:absolute;background:rgba(255,255,255,.5)}
.sea-target::before{width:66px;height:1px}
.sea-target::after{width:1px;height:66px}
.target-a{top:20%;right:12%}
.target-b{bottom:24%;left:11%}
.sea-hero-score{position:absolute;z-index:5;right:22px;bottom:22px;min-width:170px;padding:14px 18px;border-radius:var(--r);background:#fff;box-shadow:var(--shadow-md)}
.sea-hero-score small{display:block;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.sea-hero-score strong{display:block;margin:4px 0 2px;font-size:28px;font-weight:800}
.sea-hero-score i{color:var(--faint);font-style:normal}
.sea-hero-score span{display:block;color:var(--muted);font-size:12px}
.fleet-list{display:grid;gap:10px}
.fleet-list article{display:grid;grid-template-columns:48px 1fr 180px;align-items:center;min-height:72px;padding:8px 18px;border-radius:var(--r);background:var(--surface-2)}
.fleet-list b{color:var(--ocean);font-size:18px;font-weight:800}
.fleet-list img{width:100%;max-width:240px;max-height:52px;object-fit:contain;filter:drop-shadow(0 8px 6px rgba(28,32,48,.25))}
.fleet-list span{color:var(--muted);font-size:13px;font-weight:600;text-align:right}

/* ---------- Комната ---------- */
.sea-play-page{width:min(1440px,calc(100% - 48px))}
.sea-command-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;padding:14px 18px;border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow-sm)}
.sea-command-status{display:flex;align-items:center;gap:12px}
.sea-command-status small{display:block;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.sea-command-status strong{font-size:15px}
.pulse-dot{flex:0 0 auto;width:10px;height:10px}
.sea-command-actions{display:flex;flex-wrap:wrap;gap:10px}
.sea-secondary{height:44px;padding:0 16px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:#fff;color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;transition:border-color .15s}
.sea-secondary:hover:not(:disabled){border-color:var(--ink)}
.sea-secondary:disabled{opacity:.45;cursor:not-allowed}

.fleet-editor{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(420px,2fr) auto auto auto;align-items:center;gap:16px;margin-bottom:16px;padding:14px 18px;border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow-sm);transition:opacity .2s}
.fleet-editor-copy small{display:block;color:var(--ocean);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.fleet-editor-copy strong{display:block;margin:3px 0;font-size:15px}
.fleet-editor-copy span{display:block;max-width:230px;color:var(--muted);font-size:13px;line-height:1.4}
.fleet-dock{display:grid;grid-template-columns:repeat(10,minmax(40px,1fr));gap:6px;min-width:0}
.dock-ship{position:relative;min-width:0;height:60px;padding:6px 4px 4px;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);cursor:grab;touch-action:none;transition:border-color .15s,background .15s,transform .15s,box-shadow .15s}
.dock-ship:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.dock-ship.selected{border-color:var(--ocean);background:var(--sky-soft);box-shadow:0 0 0 3px rgba(27,107,224,.15)}
.dock-ship.waiting::after{content:"";position:absolute;inset:4px;border:1px dashed var(--coral);border-radius:9px;pointer-events:none}
.dock-ship:active{cursor:grabbing}
.dock-ship-image{height:26px;display:grid;place-items:center}
.dock-ship-image img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 3px rgba(28,32,48,.3))}
.dock-ship-image.vertical img{transform:rotate(90deg) scale(.65)}
.dock-ship b{position:absolute;left:6px;bottom:4px;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:var(--ocean);color:#fff;font-size:11px;font-weight:700}
.dock-ship small{position:absolute;right:6px;bottom:6px;color:var(--faint);font-size:10px;font-weight:700;text-transform:uppercase}
.orientation-control{display:grid;grid-template-columns:1fr 1fr;gap:6px;min-width:220px}
.orientation-control>span{grid-column:1/-1;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.orientation-control button{height:38px;padding:0 10px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text);font-size:13px;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.orientation-control button b{font-weight:600}
.orientation-control button.active{border-color:var(--ocean);background:var(--ocean);color:#fff}
.clear-fleet{align-self:end;height:38px;padding:0 12px;border:0;background:transparent;color:var(--muted);font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.placement-count{align-self:stretch;min-width:80px;display:grid;align-content:center;justify-items:center;padding:6px 12px;border-left:1px solid var(--line)}
.placement-count span{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.placement-count strong{font-size:20px;font-weight:800}
.placement-count strong b{color:var(--ocean)}
.fleet-editor.locked{opacity:.55}
.fleet-editor.locked .fleet-editor-copy span{display:none}
.fleet-editor button:disabled{cursor:not-allowed}

.sea-battlefield{display:grid;grid-template-columns:minmax(380px,1fr) 56px minmax(380px,1fr);align-items:center}
.ocean-panel{min-width:0;padding:22px;border-radius:var(--r-xl);background:#fff;box-shadow:var(--shadow-sm)}
.ocean-panel>header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.ocean-panel>header small{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.ocean-panel h2{margin-top:2px;font-size:18px}
.fleet-counter{min-width:78px;padding:8px 12px;border-radius:12px;background:var(--sky-soft);text-align:center}
.fleet-counter span{display:block;color:var(--sky-ink);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.fleet-counter strong{display:block;margin-top:1px;color:var(--ocean);font-size:20px;font-weight:800}
.sea-board-frame{position:relative;padding:28px 0 0 28px}
.battle-grid,.ship-layer{aspect-ratio:1;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);gap:3px}
.battle-grid{position:relative;z-index:2;padding:4px;border-radius:14px;background:linear-gradient(160deg,#2a7ff0,#1358c2);box-shadow:inset 0 0 24px rgba(6,29,70,.35)}
/* Вода: два блика медленно плывут по полю. */
.battle-grid::before{content:"";position:absolute;inset:0;z-index:0;border-radius:14px;pointer-events:none;background:radial-gradient(ellipse 55% 40% at 30% 30%,rgba(255,255,255,.22),transparent 65%),radial-gradient(ellipse 50% 35% at 70% 70%,rgba(255,255,255,.16),transparent 65%);background-size:180% 180%,180% 180%;animation:seaShimmer 10s ease-in-out infinite alternate}
@keyframes seaShimmer{from{background-position:0% 0%,100% 100%}to{background-position:100% 100%,0% 0%}}
.battle-cell{position:relative;z-index:1;min-width:0;padding:0;border:0;border-radius:5px;background:rgba(255,255,255,.2);color:#fff;cursor:default;overflow:visible;transition:transform .15s,background .15s,box-shadow .15s}
.own-grid .battle-cell{cursor:crosshair}
.own-grid .battle-cell.placement-preview.valid{z-index:5;background:rgba(120,255,190,.8);box-shadow:inset 0 0 0 2px #fff}
.own-grid .battle-cell.placement-preview.invalid{z-index:5;background:rgba(255,107,87,.9);box-shadow:inset 0 0 0 2px #fff}
.enemy-grid.can-shoot .battle-cell:not(.hit):not(.miss):not(.sunk){cursor:crosshair}
.enemy-grid.can-shoot .battle-cell:not(.hit):not(.miss):not(.sunk):hover{z-index:2;transform:scale(1.1);background:rgba(255,255,255,.6);box-shadow:0 0 0 2px #fff,0 6px 14px rgba(6,29,70,.35)}
.battle-cell.ship{background:rgba(255,255,255,.42)}
/* Попадание: тёмная пробоина и живой язычок огня. */
.battle-cell.hit,.battle-cell.sunk{background:radial-gradient(circle,#3a1512 0 30%,rgba(120,40,30,.85) 31% 60%,rgba(255,107,87,.35) 61%)}
.battle-cell.hit::after,.battle-cell.sunk::after{content:"";position:absolute;left:28%;right:28%;bottom:38%;height:48%;border-radius:50% 50% 45% 45%;background:radial-gradient(ellipse at 50% 100%,#fff3a0 0,#ffb01f 35%,#ff6b57 65%,transparent 74%);transform-origin:50% 100%;animation:seaFlame .45s ease-in-out infinite alternate;pointer-events:none}
@keyframes seaFlame{from{transform:scaleY(.8) scaleX(1.05)}to{transform:scaleY(1.2) scaleX(.85)}}
/* Потопленный: пробоина темнее, над палубой тянется дым. */
.battle-cell.sunk{background:radial-gradient(circle,#1c0b0a 0 34%,rgba(70,25,20,.95) 35% 62%,rgba(90,40,35,.6) 63%)}
.battle-cell.sunk::before{content:"";position:absolute;left:30%;top:-30%;width:40%;height:55%;border-radius:50%;background:radial-gradient(circle,rgba(110,110,125,.6),transparent 70%);animation:seaSmoke 2.2s ease-out infinite;pointer-events:none}
.battle-cell.sunk:nth-child(odd)::before{animation-delay:-1.1s}
@keyframes seaSmoke{0%{transform:translateY(30%) scale(.5);opacity:0}25%{opacity:.85}100%{transform:translateY(-120%) scale(1.7);opacity:0}}
.battle-cell.miss{background:radial-gradient(circle,#fff 0 13%,rgba(255,255,255,.4) 14% 30%,transparent 31%)}
/* Одноразовые вспышки: взрыв на попадании, круги на воде при промахе. */
.sea-fx{position:absolute;inset:0;z-index:7;pointer-events:none;border-radius:50%}
.sea-fx.boom{inset:-70%;background:radial-gradient(circle,#fff 0 10%,#ffe08a 16%,#ff8a3d 38%,rgba(255,107,87,0) 68%);animation:seaBoom .75s ease-out forwards}
@keyframes seaBoom{0%{transform:scale(.15);opacity:1}55%{opacity:.95}100%{transform:scale(1.35);opacity:0}}
.sea-fx.splash{inset:8%;border:3px solid rgba(255,255,255,.95);animation:seaSplash .85s ease-out forwards}
.sea-fx.splash::after{content:"";position:absolute;inset:25%;border-radius:50%;border:2px solid rgba(255,255,255,.7)}
@keyframes seaSplash{0%{transform:scale(.3);opacity:1}100%{transform:scale(2.6);opacity:0}}
/* Чей ход — то поле и светится. */
.ocean-panel{transition:box-shadow .3s}
.ocean-panel.is-turn{animation:seaTurn 1.8s ease-in-out infinite}
@keyframes seaTurn{0%,100%{box-shadow:0 0 0 2px rgba(27,107,224,.45),0 10px 26px rgba(27,107,224,.16)}50%{box-shadow:0 0 0 4px rgba(27,107,224,.28),0 14px 34px rgba(27,107,224,.3)}}
.ship-layer{position:absolute;z-index:3;inset:32px 4px 4px 32px;pointer-events:none}
.ship-unit{z-index:1;min-width:0;align-self:stretch;justify-self:stretch;padding:7%;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;filter:drop-shadow(0 8px 5px rgba(6,29,70,.5));cursor:grab;pointer-events:auto;touch-action:none;transition:background .15s,box-shadow .15s}
.ship-unit:hover,.ship-unit.selected{z-index:4;background:rgba(255,255,255,.22)}
.ship-unit.selected{box-shadow:inset 0 0 0 2px #fff}
.ship-unit.dragging{opacity:.3;pointer-events:none;cursor:grabbing}
.ship-unit img{width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.ship-unit.fresh img{animation:seaDock .4s cubic-bezier(.2,.9,.3,1.4)}
@keyframes seaDock{0%{transform:translateY(-14px) scale(1.12);opacity:.4}}
.ship-unit.fresh.vertical img{animation:seaDockVertical .4s cubic-bezier(.2,.9,.3,1.4)}
@keyframes seaDockVertical{0%{transform:rotate(90deg) translateY(-14px) scale(1.12);opacity:.4}}
.ship-unit.vertical img{width:calc(100% * var(--length));max-width:none;transform:rotate(90deg)}
.ship-layer.locked .ship-unit{pointer-events:none;cursor:default}
.ship-layer.locked .ship-unit.selected{box-shadow:none;background:transparent}
.sea-axis{position:absolute;display:grid;color:var(--faint);font-size:12px;font-weight:700}
.sea-axis i{display:grid;place-items:center;font-style:normal}
.sea-axis-top{top:0;left:28px;right:0;height:24px;grid-template-columns:repeat(10,1fr)}
.sea-axis-side{top:28px;bottom:0;left:0;width:24px;grid-template-rows:repeat(10,1fr)}
.ocean-panel>footer{display:flex;align-items:center;gap:8px;min-height:32px;margin-top:12px;color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.ocean-enemy>footer{justify-content:space-between}
.ocean-enemy>footer strong{padding:6px 10px;border-radius:8px;background:var(--surface-2);color:var(--muted);font-size:12px;letter-spacing:.06em}
.ocean-enemy>footer strong.active{background:var(--green-soft);color:var(--green-ink)}
.legend-dot{width:9px;height:9px;border-radius:50%;background:var(--ocean)}
.legend-dot.hit{background:var(--coral)}
.legend-dot.miss{background:#bcd8fa}
.sea-versus{position:relative;display:grid;place-items:center}
.sea-versus span{z-index:1;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--ink);font-size:13px;font-weight:800;box-shadow:var(--shadow-md)}
.sea-versus i{position:absolute;width:1px;height:90px;background:var(--line-strong)}
.sea-result{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(28,32,48,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.sea-result>div{width:100%;max-width:460px;padding:40px;border-radius:var(--r-xl);background:#fff;text-align:center;box-shadow:var(--shadow-lg)}
.sea-result small{color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.sea-result h2{margin:12px 0;font-size:40px}
.sea-result p{margin-bottom:24px;color:var(--muted);font-size:15px}

@media(max-width:1380px){
  .fleet-editor{grid-template-columns:180px 1fr auto auto}
  .placement-count{display:none}
  .fleet-dock{grid-template-columns:repeat(5,1fr)}
  .dock-ship{height:54px}
}
@media(max-width:1150px){
  .sea-battlefield{grid-template-columns:1fr;gap:18px}
  .sea-versus{display:none}
  .ocean-panel{width:100%;max-width:720px;margin:auto}
  .fleet-editor{grid-template-columns:1fr auto}
  .fleet-editor-copy{grid-column:1/-1}
  .fleet-dock{grid-column:1/-1;grid-template-columns:repeat(10,1fr)}
  .orientation-control{min-width:0}
  .placement-count{display:grid;border-left:0}
}
@media(max-width:760px){
  .play-nav{display:none}
  .sea-hero-visual{min-height:380px}
  .sea-hero-visual>img{top:36%}
  .fleet-list article{grid-template-columns:40px 1fr}
  .fleet-list span{display:none}
  .sea-command-bar{align-items:stretch;flex-direction:column}
  .sea-command-actions{width:100%}
  .sea-command-actions button{flex:1}
  .fleet-editor{grid-template-columns:1fr;padding:14px}
  .fleet-dock{grid-template-columns:repeat(5,1fr)}
  .clear-fleet{align-self:center}
  .placement-count{display:none}
  .ocean-panel{padding:14px 12px;border-radius:var(--r-lg)}
  .battle-grid,.ship-layer{gap:2px}
  .battle-cell{border-radius:3px}
  .ship-layer{inset:32px 4px 4px 32px}
}