/* ===== Морской бой ===== */
.g-battleship { --lbl: 16px; }

/* ---------- the sea: coordinates + water with grid lines ---------- */
.g-battleship .bsg { display: grid; grid-template-columns: var(--lbl) 1fr; grid-template-rows: var(--lbl) auto; width: var(--gs, 100%); margin: 0 auto; }
.g-battleship .bsg-top { grid-column: 2; display: grid; grid-template-columns: repeat(10, 1fr); }
.g-battleship .bsg-left { grid-row: 2; display: grid; grid-template-rows: repeat(10, 1fr); }
.g-battleship .bsg-top span, .g-battleship .bsg-left span { display: grid; place-items: center; font-size: 10px; font-weight: 600; color: var(--dim); }
.g-battleship .sea {
  grid-row: 2; grid-column: 2; position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; container-type: inline-size;
  background: radial-gradient(130% 120% at 30% 15%, #1b3049 0%, #12223a 55%, #0d192b 100%);
  box-shadow: inset 0 0 0 1px rgba(140, 180, 230, .16), inset 0 2px 12px rgba(0, 0, 0, .35);
  transition: box-shadow .25s;
}
.g-battleship .sea::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(150, 190, 240, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 190, 240, .11) 1px, transparent 1px);
  background-size: 10% 10%;
}
.g-battleship .sea-ships, .g-battleship .sea-cells { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr); }
.g-battleship .sea-ships { z-index: 1; pointer-events: none; }
.g-battleship .sea-cells { z-index: 2; }

/* ---------- ships: one hull per ship ---------- */
.g-battleship .ship, .bs-ghost {
  position: relative; margin: 1.1cqw; border-radius: 3.6cqw;
  background: linear-gradient(180deg, #d2d9e3 0%, #a5afbd 52%, #838d9c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(0, 0, 0, .22), 0 3px 8px rgba(0, 0, 0, .45);
}
.g-battleship .ship.v, .bs-ghost.v { background: linear-gradient(90deg, #d2d9e3 0%, #a5afbd 52%, #838d9c 100%); }
.g-battleship .ship::after, .bs-ghost::after { content: ""; position: absolute; border-radius: 99px; background: rgba(48, 60, 78, .32); }
.g-battleship .ship.h::after, .bs-ghost.h::after { left: 2.4cqw; right: 2.4cqw; top: 42%; height: 16%; }
.g-battleship .ship.v::after, .bs-ghost.v::after { top: 2.4cqw; bottom: 2.4cqw; left: 42%; width: 16%; }
.g-battleship .ship.sunk { background: linear-gradient(180deg, #a3243a, #6c1222); box-shadow: inset 0 1px 0 rgba(255, 180, 190, .25), 0 2px 6px rgba(0, 0, 0, .45); }
.g-battleship .ship.v.sunk { background: linear-gradient(90deg, #a3243a, #6c1222); }
.g-battleship .ship.sunk::after { background: rgba(0, 0, 0, .25); }
.g-battleship .ship.reveal { background: rgba(210, 220, 235, .14); box-shadow: inset 0 0 0 1.5px rgba(210, 220, 235, .45); }
.g-battleship .ship.reveal::after { display: none; }

/* ---------- shots ---------- */
.g-battleship .cell { position: relative; display: grid; place-items: center; transition: background .15s; }
.g-battleship .cell.miss::after { content: ""; width: 2.3cqw; height: 2.3cqw; border-radius: 50%; background: rgba(160, 190, 230, .6); }
.g-battleship .cell.hit { background: radial-gradient(circle, rgba(255, 77, 109, .38) 0%, rgba(255, 77, 109, 0) 70%); }
.g-battleship .cell.hit::before, .g-battleship .cell.hit::after, .g-battleship .cell.sunk::before, .g-battleship .cell.sunk::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 6cqw; height: 1.1cqw; border-radius: 1cqw; background: #ff4d6d;
  box-shadow: 0 0 1.6cqw rgba(255, 77, 109, .8);
}
.g-battleship .cell.hit::before, .g-battleship .cell.sunk::before { transform: translate(-50%, -50%) rotate(45deg); }
.g-battleship .cell.hit::after, .g-battleship .cell.sunk::after { transform: translate(-50%, -50%) rotate(-45deg); }
.g-battleship .cell.sunk::before, .g-battleship .cell.sunk::after { background: #ffd2da; box-shadow: none; width: 5cqw; }
.g-battleship .cell.last { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .9); border-radius: 2px; animation: bsLast 1.2s ease-out 2; }
@keyframes bsLast { 0% { box-shadow: inset 0 0 0 2px #fff, 0 0 0 0 rgba(255, 255, 255, .6); } 100% { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .9), 0 0 0 10px rgba(255, 255, 255, 0); } }
.g-battleship .bsg.target .cell.free { cursor: crosshair; }
@media (hover: hover) { .g-battleship .bsg.target .cell.free:hover { background: rgba(255, 255, 255, .1); } }
.g-battleship .cell.aim { background: rgba(255, 255, 255, .28); }

/* ---------- placement: drag & drop ---------- */
.g-battleship .bsg.edit .sea-cells { pointer-events: none; }
.g-battleship .bsg.edit .sea-ships { pointer-events: auto; }
.g-battleship .bsg.edit .ship { cursor: grab; touch-action: none; }
.g-battleship .bsg.edit .sea { touch-action: none; }
.g-battleship .ship.lifted, .g-battleship .dock-ship.lifted { opacity: .25; }
.g-battleship .ship.nope { animation: shake .4s; }
.g-battleship .ship-pv { margin: .6cqw; border-radius: 3.6cqw; z-index: 3; pointer-events: none; }
.g-battleship .ship-pv.ok { background: rgba(61, 220, 132, .22); box-shadow: inset 0 0 0 2px rgba(61, 220, 132, .9); }
.g-battleship .ship-pv.bad { background: rgba(255, 77, 109, .22); box-shadow: inset 0 0 0 2px rgba(255, 77, 109, .9); }
.bs-ghost { position: fixed; left: 0; top: 0; margin: 0; z-index: 200; pointer-events: none; opacity: .92; box-shadow: 0 12px 26px rgba(0, 0, 0, .55); }
.bs-ghost.bad { filter: saturate(.4) brightness(.8); }
.bs-ghost { border-radius: calc(var(--c) * .36); }
.bs-ghost.h::after { left: calc(var(--c) * .24); right: calc(var(--c) * .24); }
.bs-ghost.v::after { top: calc(var(--c) * .24); bottom: calc(var(--c) * .24); }

.g-battleship .bs-place { container-type: inline-size; --gs: min(100cqw, calc(var(--app-h, 100svh) - 362px)); --cell: calc((var(--gs) - var(--lbl)) / 10);
  display: flex; flex-direction: column; justify-content: center; gap: 10px; min-height: 0; user-select: none; -webkit-user-select: none; }
.g-battleship .bs-place-side { display: contents; }
.g-battleship .bs-place-side > .prow { order: 1; }
.g-battleship .bs-place-title { order: 2; display: grid; justify-items: center; gap: 2px; text-align: center; }
.g-battleship .bs-place-title b { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; }
.g-battleship .bs-place-title b .timer { font-size: 13px; }
.g-battleship .bs-place-title span { font-size: 12.5px; color: var(--muted); }
.g-battleship .bs-place-board { order: 3; }
.g-battleship .bs-dock {
  order: 4; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(var(--cell) * .3) calc(var(--cell) * .4);
  min-height: calc(var(--cell) * 2 + 18px); width: var(--gs); margin: 0 auto; padding: 8px; border-radius: 12px;
  background: rgba(255, 255, 255, .03); border: 1px dashed rgba(255, 255, 255, .1); box-sizing: border-box;
}
.g-battleship .bs-dock.off { opacity: .6; }
.g-battleship .dock-ship {
  width: calc(var(--n) * var(--cell) - var(--cell) * .22); height: calc(var(--cell) * .78); border-radius: calc(var(--cell) * .36);
  background: linear-gradient(180deg, #d2d9e3 0%, #a5afbd 52%, #838d9c 100%); cursor: grab; touch-action: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(0, 0, 0, .22), 0 3px 8px rgba(0, 0, 0, .45);
}
.g-battleship .dock-empty { font-size: 12.5px; color: var(--dim); }
.g-battleship .bs-place-acts { order: 5; display: flex; justify-content: center; align-items: center; gap: 8px; margin: 0; }
.g-battleship .bs-place-acts .btn { flex: 1 1 0; max-width: 150px; }

/* ---------- battle ---------- */
.g-battleship .bs-battle { container-type: inline-size; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.g-battleship .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.g-battleship .duo .prow { padding: 7px 8px; gap: 8px; min-width: 0; }
.g-battleship .duo .av { width: 30px !important; height: 30px !important; font-size: 12px !important; }
.g-battleship .duo .pname b { font-size: 13px; }
.g-battleship .bs-who { display: none; }
.g-battleship .bs-status { display: grid; justify-items: center; gap: 1px; padding: 6px 0; }
.g-battleship .shot-word { display: flex; align-items: baseline; gap: 8px; animation: bannerIn .3s var(--ease-out); }
.g-battleship .shot-word span { font-size: 12px; color: var(--muted); }
.g-battleship .shot-word b { font-size: 17px; font-weight: 800; color: #9fb6d6; }
.g-battleship .shot-word.idle b { color: var(--text); }
.g-battleship .shot-word.hit b { color: #ff5c7a; }
.g-battleship .shot-word.sunk b { color: var(--gold); }
.g-battleship .bs-status .status-line { margin: 0; }
.g-battleship .bs-strikes { color: #ff5c7a; font-weight: 700; }
.g-battleship .bs-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.g-battleship .bs-board { display: grid; gap: 4px; }
.g-battleship .bs-board-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; white-space: nowrap; width: var(--gs); margin: 0 auto; padding-left: var(--lbl); box-sizing: border-box; font-size: 12px; font-weight: 700; color: var(--muted); }
.g-battleship .fleet { display: flex; gap: 3px; align-items: center; }
.g-battleship .fleet i { width: calc(var(--n) * 5px); height: 5px; border-radius: 3px; background: #a5afbd; }
body.in-game .g-battleship .bs-board.cold .fleet i { width: calc(var(--n) * 3.5px); height: 4px; }
body.in-game .g-battleship .bs-board.cold .bs-board-title { font-size: 11px; }
.g-battleship .fleet i.dead { background: rgba(255, 77, 109, .45); }
.g-battleship .bs-board.enemy.hot .sea { box-shadow: inset 0 0 0 1px rgba(140, 180, 230, .16), 0 0 0 2px rgba(var(--red-rgb), .75), 0 0 26px -6px rgba(var(--red-rgb), .7); }
.g-battleship .bs-board.mine.hot .sea { box-shadow: inset 0 0 0 1px rgba(140, 180, 230, .16), 0 0 0 2px rgba(255, 255, 255, .22); }
.g-battleship .bs-board.cold .bsg { opacity: .8; }
.g-battleship .bs-board { --gs: min(100cqw, 420px); }

/* phone in game: everything on one screen, the board you shoot at is the larger one */
body.in-game .g-battleship .bs-battle .bs-board.hot { --gs: min(100cqw, calc((var(--app-h, 100svh) - 270px) * .58)); }
body.in-game .g-battleship .bs-battle .bs-board.cold { --gs: min(100cqw, calc((var(--app-h, 100svh) - 270px) * .42)); }
body.in-game .g-battleship .bs-battle .bs-board.cold .bsg { --lbl: 13px; }
body.in-game .g-battleship .bs-battle .bs-board.cold .bsg-top span, body.in-game .g-battleship .bs-battle .bs-board.cold .bsg-left span { font-size: 8.5px; }

/* ---------- desktop: two equal boards side by side, each with its own player ---------- */
@media (min-width: 900px) {
  .g-battleship { --lbl: 20px; }
  .g-battleship .bsg-top span, .g-battleship .bsg-left span { font-size: 12px; }
  .g-battleship .bs-battle .duo { display: none; }
  .g-battleship .bs-who { display: block; width: var(--gs); margin: 0 auto 4px; padding-left: var(--lbl); box-sizing: border-box; }
  .g-battleship .bs-status { padding: 4px 0 14px; }
  .g-battleship .shot-word b { font-size: 22px; }
  .g-battleship .bs-wrap { flex-direction: row; justify-content: center; align-items: flex-start; gap: 40px; }
  .g-battleship .bs-board, body.in-game .g-battleship .bs-battle .bs-board.hot, body.in-game .g-battleship .bs-battle .bs-board.cold {
    --gs: min(calc(50cqw - 24px), calc(var(--app-h, 100svh) - 290px), 600px);
  }
  body.in-game .g-battleship .bs-battle .bs-board.cold .bsg { --lbl: 20px; }
  body.in-game .g-battleship .bs-battle .bs-board.cold .bsg-top span, body.in-game .g-battleship .bs-battle .bs-board.cold .bsg-left span { font-size: 12px; }
  .g-battleship .bs-board.cold .bsg { opacity: .9; }
  .g-battleship .bs-board-title { font-size: 13px; }
  .g-battleship .fleet i, body.in-game .g-battleship .bs-board.cold .fleet i { width: calc(var(--n) * 8px); height: 6px; }
  body.in-game .g-battleship .bs-board.cold .bs-board-title { font-size: 13px; }

  .g-battleship .bs-place { flex-direction: row; align-items: center; justify-content: center; gap: 40px; height: 100%;
    --gs: min(calc(100cqw - 400px), calc(var(--app-h, 100svh) - 170px), 620px); }
  .g-battleship .bs-place-side { display: flex; flex-direction: column; gap: 16px; width: 340px; order: 2; }
  .g-battleship .bs-place-board { order: 1; }
  .g-battleship .bs-place-title { justify-items: start; text-align: left; }
  .g-battleship .bs-place-title b { font-size: 24px; }
  .g-battleship .bs-place-title span { font-size: 14px; }
  .g-battleship .bs-dock { width: 100%; justify-content: flex-start; --cell: 30px; min-height: 96px; padding: 12px; }
  .g-battleship .bs-place-acts { flex-wrap: wrap; justify-content: flex-start; }
  .g-battleship .bs-place-acts .btn { max-width: none; }
  .g-battleship .bs-place-acts .btn.primary { flex-basis: 100%; order: -1; height: 48px; }
}