/* ============================================================
   Batalha Naval — tema sunset com tabuleiro estilo carta náutica.
   ============================================================ */

.sj-game-host:has(.bn) {
  --sj-text:           #2d2438;
  --sj-text-dim:       #5d5468;
  --sj-text-mute:      rgba(45, 36, 56, 0.42);
  --sj-bg-card:        rgba(255, 255, 255, 0.85);
  --sj-bg-elev:        rgba(255, 255, 255, 0.7);
  --sj-bg-card-hover:  rgba(255, 255, 255, 0.95);
  --sj-border:         rgba(255, 255, 255, 0.5);
  --sj-border-bright:  rgba(45, 36, 56, 0.18);
  --sj-accent:         #6b5bff;
  --sj-accent-hover:   #5347d6;
  --sj-accent-soft:    rgba(107, 91, 255, 0.12);
  --sj-gold:           #ffd93d;
  --sj-danger:         #ff3355;
  --sj-score-bg:       #fff;
  --bn-water-1:        #1e88e5;
  --bn-water-2:        #0d4a8c;
  --bn-water-3:        #08306b;
  --bn-ship:           #2d2438;
  --bn-ship-edge:      #0f0a18;
}
.sj-game-host:has(.bn),
body:has(.sj-game-stage) .sj-game-host:has(.bn) {
  background:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,0.18), transparent 35%),
    radial-gradient(circle at 85% 80%, rgba(107,91,255,0.20), transparent 40%),
    linear-gradient(135deg, #ff7e5f 0%, #feb47b 45%, #ff6b95 100%);
}
.sj-game-stage-frame:has(.bn) {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.25);
}

/* ============ Wrapper ============ */
.bn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px;
  height: 100%;
  box-sizing: border-box;
  width: 100%;
}
.bn-stage { width: 100%; max-width: 920px; }
.bn-stage[hidden] { display: none; }

/* ============ Setup ============ */
.bn-setup {
  /* --cell define o tamanho da casa pra TUDO no setup (bank + board + ships).
     O JS sobrescreve esse valor com o ideal pra cada viewport (mas mantém
     bank e board sincronizados → sem flicker). */
  --cell: 32px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 240px;
  gap: 16px;
  /* stretch: bank acompanha a altura do board. */
  align-items: stretch;
}
.bn-fleet {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 8px 22px rgba(45, 36, 56, 0.18);
}

/* ============ Bank — os navios "moram" aqui em estado natural ============
   Os mesmos elementos <div.bn-ship> migram entre 3 lugares via JS:
     bank → grabbed (fixed, segue cursor) → placed (absolute no board) → bank …
   IMPORTANTE: o tamanho da casa do ship vem de --cell, que é herdado do
   .bn-setup (parent comum). Assim bank/grabbed/placed têm exatamente o mesmo
   tamanho → sem flicker ao grabar. */
.bn-bank {
  display: flex;
  flex-direction: column;        /* ships horizontais → empilhados em coluna */
  gap: 4px;                     /* bem maior que o gap interno de 2px das casas */
  align-items: flex-start;
  touch-action: none;
}
/* Quando os ships estão verticais, a bandeja vira row (side-by-side) — senão
   cada ship vira super-alto e a coluna estoura. */
.bn-bank[data-bank-ori="v"] {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* ============ Ship element ============ */
.bn-ship {
  display: inline-flex;
  flex-direction: row;
  gap: 2px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
  transition: filter .15s;

}
.bn-bank .bn-ship {
  background-color: #666;
  border-radius: 3px;
}
.bn-ship[data-ori="v"] { flex-direction: column; }
.bn-ship:hover  { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.28)); }
.bn-ship:active { cursor: grabbing; }
.bn-ship-cell {
  width:  var(--cell, 32px);
  height: var(--cell, 32px);
  background: var(--bn-ship);
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px var(--bn-ship-edge),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Placeholder no bank durante drag — silhueta translúcida. */
.bn-ship-placeholder {
  display: inline-flex;
  flex-direction: row;
  gap: 2px;
  pointer-events: none;
}
.bn-ship-placeholder[data-ori="v"] { flex-direction: column; }
.bn-ship-placeholder .bn-ship-cell {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(45, 36, 56, 0.20);
}

/* Grabbed: viewport-fixed; left/top setados via JS pra seguir o cursor. */
.bn-ship.is-grabbed {
  position: fixed;
  z-index: 100;
  cursor: grabbing;
  pointer-events: none;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
}
.bn-ship.is-placed {
  position: absolute;
  z-index: 2;
  cursor: grab;
  transition: opacity .12s;
}
.bn-ship.is-placed:active { cursor: grabbing; }

/* Durante o drag, ships já posicionados ficam translúcidos pra o preview
   das cells de baixo continuar visível. */
.bn-board.is-dragging .bn-ship.is-placed {
  opacity: 0.5;
  pointer-events: none;
}
.bn-setup-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;     /* empurra os botões pro rodapé do fleet card */
}
.bn-btn {
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  font-family: var(--sj-font-mono);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform .12s, box-shadow .12s;
}
.bn-btn--ghost {
  background: #fff;
  color: var(--sj-text);
  box-shadow: inset 0 0 0 1.5px rgba(45, 36, 56, 0.10);
}
.bn-btn--ghost:hover {
  box-shadow: inset 0 0 0 1.5px var(--sj-accent);
  transform: translateY(-1px);
}
.bn-btn--accent {
  background: var(--sj-accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(107, 91, 255, 0.35);
}
.bn-btn--accent:hover { background: var(--sj-accent-hover); transform: translateY(-1px); }
.bn-btn--accent:disabled {
  background: rgba(45, 36, 56, 0.18);
  color: rgba(45, 36, 56, 0.4);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.bn-btn-icon { font-size: 16px; line-height: 1; }
/* Glifo de orientação no botão Girar — barra horizontal/vertical. JS troca
   data-orient="h|v"; o transform deixa óbvia a orientação atual. */
.bn-btn--rotate .bn-orient {
  display: inline-block;
  width: 14px;
  height: 4px;
  background: currentColor;
  border-radius: 2px;
  margin: 0 4px;
  transition: transform .18s ease;
  transform-origin: center;
}
.bn-btn--rotate[data-orient="v"] .bn-orient { transform: rotate(90deg); }

/* ============ Battle ============ */
.bn-battle {
  display: flex;
  flex-direction: row;        /* landscape default: enemy esquerda, mine direita */
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
}
.bn-zone { flex: 0 0 auto; }
/* Em portrait, empilha verticalmente (caso engine não force landscape). */
@media (orientation: portrait) {
  .bn-battle { flex-direction: column; }
}
.bn-zone {
  background: transparent;
  padding: 0;
  border-radius: 0;
}
/* Zone-head: só o título ("Frota inimiga" / "Sua frota") fica visível. O
   sub-texto dinâmico ("Sua vez · escolha um alvo" etc) é escondido — o tour
   já explica o fluxo. */
.bn-zone-head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  padding: 0 4px 6px;
}
.bn-zone-title {
  font-family: var(--sj-font-display);
  font-weight: 900;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* ============ Board (10×10) ============ */
.bn-board {
  --cell: 32px;        /* default; setup-grid e JS sobrescrevem por contexto */
  --board-gap: 2px;
  --board-pad: 4px;
  display: grid;
  grid-template-columns: repeat(10, var(--cell));
  grid-template-rows:    repeat(10, var(--cell));
  gap: var(--board-gap);
  padding: var(--board-pad);
  border-radius: 8px;
  margin: 0 auto;
  touch-action: none;          /* drag em mobile não vira scroll */
  /* Água: gradient + ondas em ::before */
  background:
    linear-gradient(135deg, var(--bn-water-1) 0%, var(--bn-water-2) 60%, var(--bn-water-3) 100%);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.18);
  width: max-content;
}
/* Sweep luminoso simulando onda */
.bn-board::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.12), transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.10), transparent 38%);
  pointer-events: none;
  animation: bn-water 8s ease-in-out infinite alternate;
}
.bn-board::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(115deg,
      rgba(255,255,255,0.04) 0 2px,
      transparent 2px 8px);
  pointer-events: none;
  opacity: 0.6;
  animation: bn-ripple 6s linear infinite;
}
@keyframes bn-water {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(8px, -6px); }
}
@keyframes bn-ripple {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-12px); }
}
.bn-board--mine-small { --cell: 22px; }

.bn-cell {
  width: var(--cell);
  height: var(--cell);
  background: rgba(255, 255, 255, 0.04);
  border: 0;
  border-radius: 3px;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  transition: background .1s;
}
.bn-cell:hover:not(:disabled):not(.is-ship):not(.is-hit):not(.is-miss):not(.is-sunk) {
  background: rgba(255, 255, 255, 0.18);
}
.bn-cell:disabled { cursor: default; }

/* Navio inimigo NÃO usa o sistema de drag — só pinta os cells (revelado quando
   afunda). Mantém a classe .is-ship no cell pro inimigo. */
.bn-cell.is-ship {
  background: var(--bn-ship);
  box-shadow:
    inset 0 0 0 1px var(--bn-ship-edge),
    inset 0 1px 0 rgba(255,255,255,0.15);
}
/* Cantos arredondados nas extremidades de qualquer ship (placeado ou afundado) */
.bn-cell.bow-w { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.bn-cell.bow-e { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.bn-cell.bow-n { border-top-left-radius: 8px; border-top-right-radius: 8px; }
.bn-cell.bow-s { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }

/* Tiro errado (água) */
.bn-cell.is-miss {
  background: rgba(255, 255, 255, 0.12);
  animation: bn-splash .5s ease-out;
}
.bn-cell.is-miss::after {
  content: '';
  width: 32%;
  height: 32%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}
@keyframes bn-splash {
  0%   { transform: scale(0.6); opacity: 0; }
  50%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}

/* Tiro certeiro (acerto, navio ainda não afundou) */
.bn-cell.is-hit {
  background: var(--bn-ship);
  animation: bn-explode .55s ease-out;
}
.bn-cell.is-hit::after {
  content: '💥';
  font-size: calc(var(--cell) * 0.7);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4));
}
@keyframes bn-explode {
  0%   { box-shadow: 0 0 0 0 rgba(255, 200, 60, 0.9); transform: scale(0.6); }
  50%  { box-shadow: 0 0 24px 8px rgba(255, 100, 30, 0.7); transform: scale(1.18); }
  100% { box-shadow: 0 0 0 0 rgba(255, 100, 30, 0); transform: scale(1); }
}

/* Navio afundado: revela a silhueta completa em vermelho */
.bn-cell.is-sunk {
  background: var(--sj-danger);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.18);
  animation: bn-sunk-flash .9s ease-out;
}
.bn-cell.is-sunk::after {
  content: '✕';
  color: rgba(0,0,0,0.6);
  font-size: calc(var(--cell) * 0.6);
  font-weight: 900;
}
@keyframes bn-sunk-flash {
  0%   { background: #ffcc66; }
  40%  { background: #ff8833; }
  100% { background: var(--sj-danger); }
}

/* Indicador de turno: tabuleiro inativo fica esmaecido */
.bn-zone--enemy.is-disabled .bn-board,
.bn-zone--mine.is-disabled  .bn-board { opacity: 0.7; filter: saturate(0.85); }
.bn-zone--enemy.is-disabled .bn-cell:not(.is-hit):not(.is-miss):not(.is-sunk) { cursor: not-allowed; }

/* Preview do navio sendo posicionado (setup) */
.bn-cell.is-preview-ok    { background: rgba(34, 197, 94, 0.55); }
.bn-cell.is-preview-bad   { background: rgba(255, 51, 85, 0.55); }

/* ============ Mobile / espaços apertados ============ */
/* Encolhe a cell do board conforme a largura cai. Vale pra qualquer orientação;
   o layout grid (board + bank lado a lado) é mantido até portrait — em mobile
   portrait o orientation-warn da engine cobre tudo, mas em landscape mantemos
   o lado-a-lado mesmo com pouca largura. */
@media (max-width: 720px) {
  .bn-board { --cell: 28px; }
  .bn-board--mine-small { --cell: 18px; }
}
@media (max-width: 420px) {
  .bn-board { --cell: 24px; }
  .bn-board--mine-small { --cell: 16px; }
}
/* Só colapsa pra 1 coluna em portrait — landscape sempre fica side-by-side. */
@media (orientation: portrait) {
  .bn-setup { grid-template-columns: 1fr; }
}

/* Landscape mobile (altura apertada): compacta bank + actions pra caber. O JS
   já dimensiona o board (altura máxima respeitando ≤ 50% da largura). */
@media (orientation: landscape) and (max-height: 500px) {
  .bn-fleet         { padding: 8px; gap: 6px; }
  .bn-bank          { gap: 4px; }
  .bn-setup-actions { gap: 4px; }    /* margin-top: auto herdado */
  .bn-btn           { padding: 7px 10px; font-size: 11px; }
  .bn-setup {
    /* Bank passa a ser estreito também — não fixa 240px */
    grid-template-columns: auto minmax(150px, 200px);
    gap: 10px;
  }
  /* Battle phase: cells reduzidas pros 2 boards side-by-side caberem na
     altura (337px no iPhone SE landscape). */
  .bn-board { --cell: 22px; }
  .bn-board--mine-small { --cell: 14px; }
  .bn-battle { gap: 10px; }
}