/* ============================================================
   Battleship — style.css
   ============================================================ */

/* ---------- reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: #06152b;
  color: #e7f0fb;
  min-height: 100dvh;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }

/* ---------- animated sea backdrop ---------- */
.sea-bg {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background:
    radial-gradient(1100px 750px at 72% -12%, #16436f 0%, rgba(22,67,111,0) 60%),
    radial-gradient(900px 700px at 8% 108%, #0a2c54 0%, rgba(10,44,84,0) 55%),
    linear-gradient(180deg, #081d3a 0%, #050f1f 100%);
}
.sea-bg::after {
  content: ""; position: absolute; inset: -100px;
  background: repeating-linear-gradient(90deg,
    transparent 0 46px, rgba(103,197,255,.035) 46px 48px, transparent 48px 92px);
  animation: drift 26s linear infinite;
}
@keyframes drift { to { background-position: 184px 0; } }

/* ---------- header ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1080px; margin: 0 auto; padding: 14px 18px 4px;
}
.logo {
  font-size: clamp(1.15rem, 3.4vw, 1.9rem);
  font-weight: 800; letter-spacing: .3em; text-transform: uppercase;
  background: linear-gradient(180deg, #eaf4ff, #9cc8f8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo span {
  background: linear-gradient(180deg, #ffe29a, #f0a13c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.top-actions { display: flex; gap: 8px; }

/* ---------- buttons ---------- */
.btn {
  appearance: none; -webkit-appearance: none;
  border: 1px solid rgba(125,190,255,.35);
  background: linear-gradient(180deg, #1d4470, #16385d);
  color: #e7f0fb; border-radius: 12px; padding: 10px 16px;
  font-weight: 700; letter-spacing: .03em; cursor: pointer;
  transition: transform .12s, box-shadow .2s, border-color .2s, opacity .2s;
  touch-action: manipulation;
}
.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(2,12,28,.4);
  border-color: rgba(147,197,253,.6);
}
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid #f6c453; outline-offset: 2px; }
.btn.primary {
  background: linear-gradient(180deg, #ffd97a, #f2a93b);
  border-color: #f6c453; color: #31230a;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  box-shadow: 0 6px 16px rgba(242,169,59,.25);
}
.btn.icon { padding: 9px 11px; border-radius: 10px; display: inline-flex; align-items: center; }
.btn.icon svg { display: block; }
#btnStart { min-width: 150px; }
#btnSound .mln { display: none; }
#btnSound.muted .mln { display: block; }
#btnSound.muted .wv { opacity: .18; }

/* ---------- stage / status ---------- */
.stage {
  display: flex; flex-direction: column; gap: 10px;
  max-width: 1080px; margin: 0 auto; padding: 2px 12px 34px;
}
.status-row { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 2px; }
.turn-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; border-radius: 999px;
  font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid transparent;
}
.turn-pill::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 8px currentColor;
}
.turn-pill.you {
  color: #0b3050; background: linear-gradient(180deg, #5eead4, #2dd4bf);
  border-color: #99f6e4;
}
.turn-pill.foe {
  color: #fff; background: linear-gradient(180deg, #f87171, #dc2626);
  border-color: #fca5a5; animation: pillPulse 1.6s ease-in-out infinite;
}
.turn-pill.neutral {
  color: #cfe3f8; background: rgba(30,64,110,.55);
  border-color: rgba(125,190,255,.3);
}
.turn-pill.over {
  color: #fff; background: linear-gradient(180deg, #f6c453, #e08c1d);
  border-color: #ffd97a;
}
@keyframes pillPulse { 50% { box-shadow: 0 0 0 6px rgba(248,113,113,.14); } }

.status {
  min-height: 1.5em; text-align: center; color: #bcd7f2; font-size: 1rem;
}
.status.good { color: #6ee7b7; }
.status.bad { color: #fca5a5; }
.status.pop { animation: pop .3s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(4px); } }

/* ---------- boards ---------- */
.boards {
  --bw: min(42vw, 58dvh, 520px);
  display: flex; gap: 26px; justify-content: center; align-items: flex-start;
  flex-wrap: wrap; padding: 6px 0 4px;
}
.board { width: var(--bw); animation: boardIn .5s ease both; }
@keyframes boardIn { from { opacity: 0; transform: translateY(12px); } }

.board-head {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 6px 12px; padding: 2px 6px 8px;
}
.board-head h2 {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .16em;
  color: #cfe3f8; display: flex; align-items: center; gap: 8px;
}
.board.you h2::before, .board.foe h2::before {
  content: ""; width: 9px; height: 9px; border-radius: 3px; display: inline-block;
}
.board.you h2::before { background: #38bdf8; }
.board.foe h2::before { background: #f87171; }

/* fleet tracker chips */
.fleet { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  display: flex; gap: 2px; align-items: center; padding: 4px 5px;
  border-radius: 6px; background: rgba(255,255,255,.045); position: relative;
}
.chip i { width: 8px; height: 8px; border-radius: 2px; background: rgba(148,163,184,.32); }
.chip.placed i { background: var(--sc); box-shadow: inset 0 -1px 0 rgba(0,0,0,.3); }
.chip.sunk i { background: #7f1d1d; }
.chip.sunk::after {
  content: ""; position: absolute; left: 3px; right: 3px; top: calc(50% - 1px);
  height: 2px; background: #f87171; transform: rotate(-9deg); border-radius: 2px;
}

/* ship palette (shared by cells, cards, chips, ghost) */
[data-ship="0"] { --sc: #38bdf8; }
[data-ship="1"] { --sc: #34d399; }
[data-ship="2"] { --sc: #fbbf24; }
[data-ship="3"] { --sc: #a78bfa; }
[data-ship="4"] { --sc: #fb923c; }

/* ---------- grid ---------- */
.grid-wrap {
  position: relative;
  background: rgba(8,25,49,.62);
  border: 1px solid rgba(96,165,250,.22);
  border-radius: 16px; padding: 8px;
  box-shadow: 0 20px 50px rgba(2,10,24,.45);
}
.grid-wrap.shake { animation: shake .5s ease-in-out; }
@keyframes shake {
  15% { transform: translate(-5px, 2px) rotate(-.4deg); }
  30% { transform: translate(4px,-2px) rotate(.3deg); }
  45% { transform: translate(-3px, 1px); }
  60% { transform: translate(3px, 1px); }
  80% { transform: translate(-1px, 0); }
}
body[data-turn="enemy"] .board.you .grid-wrap { animation: dangerGlow 1.6s ease-in-out infinite; }
@keyframes dangerGlow { 50% { box-shadow: 0 0 34px rgba(248,113,113,.35); } }

.grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(10, 1fr);
  gap: 2px; position: relative;
  padding: 3px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(15,50,95,.5), rgba(9,30,60,.5));
}
.grid::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 10px;
  background: linear-gradient(115deg, transparent 42%, rgba(147,197,253,.05) 50%, transparent 58%);
  background-size: 260% 260%;
  animation: sheen 13s ease-in-out infinite;
}
@keyframes sheen { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }

.lbl {
  display: grid; place-items: center;
  font-size: clamp(.48rem, 1.4vw, .72rem); font-weight: 700; letter-spacing: .05em;
  color: #6f9cd0;
}
.lbl.corner::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #35597f; }

.cell {
  appearance: none; -webkit-appearance: none;
  width: 100%; aspect-ratio: 1 / 1; padding: 0;
  border: 1px solid rgba(96,165,250,.14); border-radius: 14%;
  background: rgba(23,64,116,.5); position: relative;
  transition: background .15s, border-color .15s, box-shadow .15s;
  touch-action: manipulation;
}
.cell:focus-visible { outline: 2px solid #f6c453; outline-offset: -2px; }

body[data-phase="placement"] .board.you .grid { cursor: crosshair; }
body[data-phase="battle"][data-turn="player"] .board.foe .grid { cursor: crosshair; }
body:not([data-turn="player"]) .board.foe .grid { pointer-events: none; opacity: .96; }

/* hover crosshair on enemy grid (fine pointers only) */
@media (hover:hover) {
  body[data-phase="battle"][data-turn="player"]
    .board.foe .cell:not(.hit):not(.miss):hover {
    background: rgba(246,196,83,.16);
    border-color: rgba(246,196,83,.55);
    box-shadow: inset 0 0 10px rgba(246,196,83,.15);
  }
}

/* placement preview */
.cell.preview.ok {
  background: rgba(74,222,128,.32);
  border-color: rgba(74,222,128,.85);
  box-shadow: 0 0 10px rgba(74,222,128,.22);
}
.cell.preview.bad {
  background: rgba(248,113,113,.35);
  border-color: rgba(248,113,113,.9);
  box-shadow: 0 0 10px rgba(248,113,113,.25);
}

/* ships */
.cell.ship {
  background: var(--sc);
  border-color: rgba(0,0,0,.3);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.22), inset 0 -3px 0 rgba(0,0,0,.22);
}
.cell.ship.revealed { outline: 1px dashed rgba(255,255,255,.4); outline-offset: -3px; }
.cell.placed-anim { animation: shipPop .4s ease both; }
@keyframes shipPop {
  0% { transform: scale(.5); filter: brightness(2); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* shot markers */
.cell.miss { background: rgba(10,26,48,.62); border-color: rgba(148,163,184,.25); }
.cell.miss::after {
  content: ""; position: absolute; inset: 35%; border-radius: 50%;
  background: #d5e3f3; opacity: .9;
  box-shadow: 0 0 6px rgba(213,227,243,.35);
}
.cell.hit {
  background: #b3261e; border-color: #ef4444;
  box-shadow: 0 0 12px rgba(239,68,68,.28), inset 0 0 6px rgba(0,0,0,.35);
}
.cell.hit::after {
  content: ""; position: absolute; inset: 22%; border-radius: 2px;
  background:
    linear-gradient(45deg, transparent 42%, #ffe3b3 46% 54%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, #ffe3b3 46% 54%, transparent 58%);
}
.cell.sunk {
  background: #7f1d1d;
  background: color-mix(in srgb, var(--sc, #b3261e) 28%, #40000a);
  border-color: #f87171;
}
.cell.sink-anim { animation: sinkFlash .9s ease both; }
@keyframes sinkFlash {
  0% { filter: brightness(2.6); transform: scale(1.12); }
  45% { filter: brightness(.45) sepia(.6) hue-rotate(-25deg); transform: scale(.94); }
  100% { filter: none; transform: scale(1); }
}
.cell.last { animation: lastPulse 1.3s ease-in-out infinite; }
@keyframes lastPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(253,224,71,.75), 0 0 12px rgba(253,224,71,.2); }
  50% { box-shadow: 0 0 0 2px rgba(253,224,71,.2), 0 0 4px rgba(253,224,71,.05); }
}
.cell.nope { animation: nope .18s ease-in-out 2; }
@keyframes nope { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* ---------- shot FX ---------- */
.fx { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.fx.splash::before {
  content: ""; position: absolute; inset: -18%; border-radius: 50%;
  border: 2px solid rgba(191,219,254,.85);
  animation: ringOut .7s ease-out forwards;
}
.fx.splash::after {
  content: ""; position: absolute; inset: 30%; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #e0f2fe 0%, rgba(224,242,254,0) 72%);
  animation: splashDot .7s ease-out forwards;
}
@keyframes ringOut { from { transform: scale(.35); opacity: .95; } to { transform: scale(1.5); opacity: 0; } }
@keyframes splashDot { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.2); opacity: 0; } }

.fx.boom::before {
  content: ""; position: absolute; inset: -25%; border-radius: 50%;
  background: radial-gradient(circle,
    #fff7d6 0%, #ffb703 32%, rgba(249,115,22,.55) 55%, transparent 72%);
  animation: boomFlash .6s ease-out forwards;
}
.fx.boom::after {
  content: ""; position: absolute; inset: -10%; border-radius: 50%;
  border: 2px solid rgba(253,186,116,.9);
  animation: ringOut .55s ease-out forwards;
}
@keyframes boomFlash {
  0% { transform: scale(.25); opacity: 1; }
  70% { opacity: .85; }
  100% { transform: scale(1.6); opacity: 0; }
}
.fx .spark {
  position: absolute; left: 50%; top: 50%;
  width: 15%; height: 15%; min-width: 3px; min-height: 3px;
  border-radius: 50%; background: #fde68a;
  box-shadow: 0 0 6px #f59e0b;
  transform: translate(-50%, -50%);
  animation: sparkFly var(--dur, .6s) ease-out forwards;
}
@keyframes sparkFly {
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.1); opacity: 0; }
}

/* ---------- drag ghost ---------- */
.ghost {
  position: fixed; z-index: 90; pointer-events: none;
  display: flex; padding: 3px; border-radius: 10px;
  background: rgba(246,196,83,.12);
  border: 1px dashed rgba(246,196,83,.6);
  transform: translate(-50%, -50%);
  transition: opacity .15s;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.45));
}
.ghost.vert { flex-direction: column; }
.ghost i {
  width: var(--cs, 34px); height: var(--cs, 34px); margin: 2px;
  border-radius: 7px; background: var(--sc, #f6c453);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25), inset 0 -3px 0 rgba(0,0,0,.25);
}

/* ---------- ship tray ---------- */
.tray-wrap {
  width: min(96vw, 720px); margin: 0 auto;
  background: rgba(10,32,60,.55);
  border: 1px solid rgba(96,165,250,.18);
  border-radius: 18px; padding: 16px 18px 18px;
}
.tray-head { text-align: center; margin-bottom: 12px; }
.tray-head h2 {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .16em; color: #cfe3f8;
}
.hint { color: #8fb4dd; font-size: .82rem; line-height: 1.45; margin-top: 5px; }
.tray {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  align-items: stretch; min-height: 66px;
}
.tray-empty { color: #8fb4dd; font-size: .9rem; align-self: center; }
.tray-card {
  display: flex; flex-direction: column; gap: 7px; align-items: center;
  padding: 11px 13px; border-radius: 13px;
  background: rgba(16,47,86,.85);
  border: 1px solid rgba(96,165,250,.25);
  cursor: grab; touch-action: none;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.tray-card:hover { transform: translateY(-2px); border-color: rgba(125,211,252,.5); }
.tray-card.selected {
  border-color: #f6c453;
  box-shadow: 0 0 0 2px rgba(246,196,83,.35), 0 8px 20px rgba(0,0,0,.35);
  transform: translateY(-2px);
}
.tray-card:active { cursor: grabbing; }
.tname {
  font-size: .68rem; letter-spacing: .07em; text-transform: uppercase;
  color: #bcd7f7; font-weight: 700;
}
.pips { display: flex; gap: 3px; }
.pips.vert { flex-direction: column; }
.pips i {
  width: 13px; height: 13px; border-radius: 4px;
  background: var(--sc);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.25);
}
.tray-actions {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-top: 14px;
}

/* ---------- phase visibility ---------- */
body[data-phase="placement"] .board.foe { display: none; }
body:not([data-phase="placement"]) .tray-wrap { display: none; }

/* ---------- end overlay ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 20px;
  background: rgba(3,10,22,.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: fadeIn .35s ease both;
}
.overlay[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } }

.panel {
  position: relative; z-index: 2;
  width: min(92vw, 440px);
  background: linear-gradient(180deg, #10294d, #0a1c36);
  border: 1px solid rgba(125,190,255,.28);
  border-radius: 22px; padding: 30px 28px; text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  animation: popIn .45s cubic-bezier(.18,1.4,.4,1) both;
}
@keyframes popIn { from { transform: scale(.82) translateY(16px); opacity: 0; } }
.end-title {
  font-size: clamp(2.1rem, 9vw, 3rem); letter-spacing: .22em; font-weight: 800;
  margin-bottom: 8px; padding-left: .22em;
}
.panel.win .end-title {
  background: linear-gradient(180deg, #ffe9a8, #f0a13c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.panel.lose .end-title {
  background: linear-gradient(180deg, #fca5a5, #dc2626);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.end-sub { color: #bcd7f2; margin-bottom: 18px; }
.end-stats { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }
.es {
  flex: 1 1 150px; text-align: left;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(125,190,255,.15);
  border-radius: 14px; padding: 12px 14px;
}
.es h3 {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .14em;
  color: #9fc7f0; margin-bottom: 8px;
}
.es div {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: .92rem; padding: 3px 0; color: #cfe3f8;
}
.es b { color: #fff; }
.btn.big { padding: 13px 30px; font-size: 1.05rem; border-radius: 14px; }

/* confetti */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.cf {
  position: absolute; top: 0; width: 8px; height: 13px; opacity: .95;
  animation: confFall var(--dur, 3s) linear var(--delay, 0s) forwards;
}
@keyframes confFall {
  from { transform: translateY(-6vh) rotate(var(--r0, 0deg)); }
  to { transform: translateY(108vh) rotate(calc(var(--r0, 0deg) + 540deg)); }
}

.noscript { text-align: center; padding: 20px; color: #fca5a5; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .boards { --bw: min(92vw, 52dvh, 560px); flex-direction: column; align-items: center; gap: 16px; }
  body[data-phase="battle"] .board.foe { order: -1; }
  .tray-actions .btn { flex: 1 1 30%; min-height: 44px; }
  #btnStart { min-width: 0; flex-basis: 60%; }
}
@media (max-width: 480px) {
  .top { padding: 10px 12px 2px; }
  .stage { padding: 2px 8px 28px; }
  .status { font-size: .92rem; }
  .tray-wrap { padding: 12px 12px 14px; }
  .hint { font-size: .76rem; }
}
@media (orientation: landscape) and (max-height: 560px) and (max-width: 1024px) {
  .boards { --bw: min(43vw, 78dvh, 480px); flex-direction: row; gap: 14px; }
  body[data-phase="battle"] .board.foe { order: 0; }
  .stage { padding-bottom: 12px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}