/* =============================================================
   GAME: Sea Battle
   ============================================================= */
.board-seabattle {
  --cell: 32px; --lab: calc(var(--cell) * .62); --sb-glow: #ffa040; --sb-mine: #3df5ff;
  display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%;
}
.sb-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sb-seas { display: flex; gap: 22px; justify-content: center; align-items: flex-start; }
.sb-side {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px 6px; border-radius: 16px;
  background: radial-gradient(ellipse at 50% 0%, #10294a, #081428 70%);
  box-shadow: 0 0 0 2px var(--sb-glow), 0 0 26px rgba(255, 160, 64, .3);
}
.sb-mine { box-shadow: 0 0 0 2px var(--sb-mine), 0 0 26px rgba(61, 245, 255, .25); }
.sb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-left: calc(var(--lab) + 2px); min-height: 22px; }
.sb-title { font: 800 .78rem var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--sb-glow); white-space: nowrap; }
.sb-mine .sb-title { color: var(--sb-mine); }
.sb-fleet { display: inline-flex; gap: 4px; align-items: center; }
.sb-chip {
  display: inline-block; height: 7px; width: calc(var(--len) * 6px); border-radius: 4px;
  background: linear-gradient(180deg, #e6eef8, #8295ab); box-shadow: 0 0 6px rgba(200, 230, 255, .35);
}
.sb-chip.sunk { background: linear-gradient(180deg, #ff6b5c, #8a1c22); opacity: .55; box-shadow: none; }

/* the sea: letters across, numbers down, then the 10×10 grid */
.sb-sea {
  display: grid; grid-template-columns: var(--lab) repeat(10, var(--cell)); grid-template-rows: var(--lab) repeat(10, var(--cell));
}
.sb-sea.boom { animation: sb-shake .45s ease-out; }
@keyframes sb-shake { 15%, 55% { translate: -4px 1px; } 35%, 75% { translate: 4px -1px; } }
.sb-lab { display: grid; place-items: center; font: 700 calc(var(--cell) * .36) / 1 var(--font-body); color: var(--muted); font-variant-numeric: tabular-nums; }
.sb-col { grid-row: 1; }
.sb-row { grid-column: 1; }
.sb-grid {
  grid-column: 2 / -1; grid-row: 2 / -1; position: relative;
  display: grid; grid-template-columns: repeat(10, var(--cell)); grid-auto-rows: var(--cell);
  border-radius: 6px;
  background:
    repeating-linear-gradient(170deg, transparent 0 9px, rgba(140, 210, 255, .05) 9px 11px),
    radial-gradient(circle at 30% 20%, #1d6292, #0c3157 58%, #071a33);
  box-shadow: inset 0 0 0 1px rgba(120, 200, 255, .35), inset 0 0 22px rgba(0, 0, 0, .55);
}
.sb-enemy .sb-grid {
  background:
    repeating-linear-gradient(170deg, transparent 0 9px, rgba(140, 210, 255, .05) 9px 11px),
    radial-gradient(circle at 70% 20%, #1a4d7c, #0b2747 58%, #06142a);
}
.sb-cell {
  display: block; border: 0; padding: 0; margin: 0; background: transparent; border-radius: 2px;
  box-shadow: inset 0 0 0 .5px rgba(130, 200, 255, .2); -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
button.sb-cell { cursor: default; }
.sb-grid.armed .sb-cell:not(.done) { cursor: crosshair; }
.sb-grid.armed .sb-cell:not(.done):hover { background: rgba(255, 160, 64, .22); box-shadow: inset 0 0 0 2px var(--sb-glow); }
.sb-cell:focus { outline: none; }
.sb-cell:focus-visible { box-shadow: inset 0 0 0 3px var(--focus); position: relative; z-index: 3; }
.sb-cell.drop-ok { background: rgba(80, 255, 170, .35); box-shadow: inset 0 0 0 1px rgba(80, 255, 170, .8); }
.sb-cell.drop-bad { background: rgba(255, 60, 90, .38); box-shadow: inset 0 0 0 1px rgba(255, 60, 90, .8); }

/* ships */
.sb-ships { position: absolute; inset: 0; pointer-events: none; }
.sb-ship {
  position: absolute; left: calc(var(--c) * var(--cell)); top: calc(var(--r) * var(--cell));
  width: calc(var(--len) * var(--cell)); height: var(--cell); padding: 1px 2px;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .55)); transition: left .14s ease, top .14s ease; border-radius: 10px;
}
.sb-ship.v { width: var(--cell); height: calc(var(--len) * var(--cell)); padding: 2px 1px; }
.sb-ship svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sb-setup .sb-ship.movable { pointer-events: auto; cursor: grab; touch-action: none; }
.sb-ship:focus { outline: none; }
.sb-ship.sel { filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .55)) drop-shadow(0 0 5px var(--sb-mine)); }
.sb-ship:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sb-ship.dragging { z-index: 6; opacity: .88; transition: none; cursor: grabbing; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .6)) drop-shadow(0 0 6px var(--sb-mine)); }
.sb-ship.shake { animation: sb-nope .35s ease-out; }
@keyframes sb-nope { 25% { translate: -3px 0; } 50% { translate: 3px 0; } 75% { translate: -2px 0; } }
.sb-ship.sunk { filter: grayscale(.75) brightness(.5) sepia(.5) hue-rotate(-25deg) saturate(2.2) drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
.sb-ship.sinking { animation: sb-sink 1.1s ease-out; }
@keyframes sb-sink {
  0% { filter: brightness(2.2) sepia(1) saturate(4) hue-rotate(-20deg) drop-shadow(0 0 12px #ff7a3d); transform: scale(1.08); }
  35% { filter: brightness(1.2) sepia(1) saturate(3) hue-rotate(-25deg) drop-shadow(0 0 10px #ff3d3d); transform: scale(1) rotate(-1.5deg); }
  100% { transform: none; }
}
.sb-ship.ghost { opacity: .6; filter: grayscale(.2) drop-shadow(0 0 4px rgba(255, 160, 64, .6)); }

/* shot marks sit on top of the ships */
.sb-marks { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(10, var(--cell)); grid-auto-rows: var(--cell); pointer-events: none; z-index: 2; }
.sb-mark { position: relative; display: block; }
.sb-mark::before, .sb-mark::after { content: none; position: absolute; pointer-events: none; }
.sb-mark.miss::before {
  content: ""; inset: 33%; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffffff, #bfe6ff 55%, #6fb4e6);
  box-shadow: 0 0 0 2px rgba(190, 230, 255, .28), 0 0 6px rgba(190, 230, 255, .6);
}
.sb-mark.clear::before { content: ""; inset: 43%; border-radius: 50%; background: rgba(170, 210, 240, .35); }
.sb-mark.hit::before {
  content: ""; inset: 12%; border-radius: 50% 50% 46% 46%;
  background: radial-gradient(circle at 50% 62%, #fff6c8 0, #ffd23f 22%, #ff7a2b 48%, #e0262f 72%, rgba(224, 38, 47, 0) 74%);
  box-shadow: 0 0 10px rgba(255, 110, 40, .85); animation: sb-fire 1.1s ease-in-out infinite alternate;
}
.sb-mark.hit.burnt::before {
  inset: 18%; animation: none;
  background: radial-gradient(circle at 50% 55%, #ffb36b 0, #e0402b 30%, #5a1418 62%, rgba(40, 10, 12, 0) 66%);
  box-shadow: 0 0 6px rgba(255, 80, 40, .5);
}
@keyframes sb-fire { from { transform: scale(.9) translateY(1px); filter: brightness(.95); } to { transform: scale(1.06) translateY(-1px); filter: brightness(1.2); } }
/* the latest shot on each grid */
.sb-mark.last { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7); border-radius: 3px; }
.sb-mine .sb-mark.last { box-shadow: inset 0 0 0 2px var(--sb-glow); }
/* splash: rings spread out on the water */
.sb-mark.new.miss::after {
  content: ""; inset: 10%; border-radius: 50%; border: 2px solid rgba(200, 240, 255, .95);
  animation: sb-ring .8s ease-out both; box-shadow: 0 0 0 4px rgba(200, 240, 255, .25);
}
@keyframes sb-ring { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
.sb-mark.new.miss::before { animation: sb-drop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes sb-drop { from { transform: scale(2.2); opacity: .2; } }
/* explosion: a hot flash bigger than the cell */
.sb-mark.new.hit::after {
  content: ""; inset: -60%; border-radius: 50%; z-index: 3;
  background: radial-gradient(circle, rgba(255, 255, 230, .95) 0, rgba(255, 210, 63, .9) 18%, rgba(255, 110, 40, .75) 40%, rgba(224, 38, 47, .35) 60%, rgba(224, 38, 47, 0) 70%);
  animation: sb-blast .7s ease-out both;
}
@keyframes sb-blast { from { transform: scale(.15); opacity: 1; } 55% { opacity: .9; } to { transform: scale(1.25); opacity: 0; } }
/* crosshair locking on before the shot lands */
.sb-mark.aim::after {
  content: ""; inset: 6%; border-radius: 50%; border: 2px solid var(--sb-glow); z-index: 4;
  background:
    linear-gradient(var(--sb-glow), var(--sb-glow)) center / 2px 100% no-repeat,
    linear-gradient(var(--sb-glow), var(--sb-glow)) center / 100% 2px no-repeat;
  box-shadow: 0 0 10px var(--sb-glow); animation: sb-aim .3s ease-out both;
}
@keyframes sb-aim { from { transform: scale(2.4) rotate(-45deg); opacity: 0; } }

/* setup: the enemy grid waits under a veil */
.sb-veil {
  display: none; position: absolute; inset: 0; border-radius: 16px; z-index: 5; padding: 18px;
  background: rgba(5, 10, 24, .74); backdrop-filter: blur(2px);
  place-items: center; text-align: center; color: var(--muted); font-weight: 700;
}
.sb-setup .sb-veil { display: grid; }
.sb-dock { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.sb-dock[hidden] { display: none; }
.sb-hint { margin: 0; color: var(--muted); font-size: .9rem; font-weight: 600; max-width: 520px; }
.sb-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sb-acts .btn-glow { min-width: 150px; }
.sb-note { margin: 0; min-height: 1.4em; text-align: center; color: var(--ink); font-weight: 600; font-size: .92rem; }
.sb-busy .sb-enemy .sb-grid { cursor: progress; }
.sb-over .sb-grid { cursor: default; }
.sb-dot-enemy { background: #ffa040; }
.sb-dot-mine { background: #3df5ff; }

/* tabs: only on narrow screens, during the battle */
.sb-tabs { display: none; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.sb-narrow:not(.sb-setup) .sb-tabs { display: inline-flex; }
.sb-tabs button {
  display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 6px 14px; min-height: 36px; cursor: pointer;
  font: 700 .86rem var(--font-body); color: var(--muted); background: transparent;
}
.sb-tabs button[aria-selected="true"] { color: #1a0e02; background: linear-gradient(135deg, #ffc061, #ff8a2b); box-shadow: 0 0 14px rgba(255, 160, 64, .45); }
.sb-tabs button[data-tab="mine"][aria-selected="true"] { color: #02181c; background: linear-gradient(135deg, #8ffaff, #22c8e0); box-shadow: 0 0 14px rgba(61, 245, 255, .4); }
.sb-tabs button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sb-tn { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: rgba(0, 0, 0, .3); font-size: .78rem; }
.sb-narrow .sb-seas { gap: 0; }
.sb-narrow.sb-view-enemy .sb-mine, .sb-narrow.sb-view-mine .sb-enemy { display: none; }
@media (max-width: 480px) {
  .sb-side { padding: 6px 8px 8px 4px; border-radius: 14px; }
  .sb-title { font-size: .7rem; }
  .sb-chip { width: calc(var(--len) * 5px); height: 6px; }
}