:root {
  color-scheme: dark;
  --bg-top: #262626;
  --bg-bot: #161616;
  --panel: rgba(255, 255, 255, 0.045);
  --panel-line: rgba(255, 255, 255, 0.1);
  --card: #1c1c1c;
  --card-line: rgba(255, 255, 255, 0.14);
  --ink: #f2f0ed;
  --muted-30: rgba(242, 240, 237, 0.3);
  --muted-45: rgba(242, 240, 237, 0.45);
  --muted-5: rgba(242, 240, 237, 0.5);
  --muted-6: rgba(242, 240, 237, 0.62);
  --line: rgba(242, 240, 237, 0.08);
  --accent-rgb: 255, 146, 0;
  --accent: #ff9200;
  --accent-2: #ffb74d;
  --accent-soft: rgba(var(--accent-rgb), 0.14);
  --accent-pale: #ffd9a8;
  --accent-deep: #7a4a12;
  --water: #4fc3f7;
  --water-2: #81d4fa;
  --danger: #c98b8b;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* cor de destaque escolhida em Ajustes — troca só os tokens de acento,
   o resto da paleta (fundo, água/erro em azul, etc.) fica igual. */
:root[data-theme="blue"] {
  --accent: #2f8fe0; --accent-2: #74c1f5; --accent-soft: rgba(47, 143, 224, 0.14);
  --accent-rgb: 47, 143, 224; --accent-pale: #bfe3ff; --accent-deep: #1c4a73;
}
:root[data-theme="green"] {
  --accent: #33a865; --accent-2: #7fd39c; --accent-soft: rgba(51, 168, 101, 0.14);
  --accent-rgb: 51, 168, 101; --accent-pale: #c6f0d6; --accent-deep: #1e5c3a;
}

/* alguns elementos (tabbar, botão do mapa, aviso de resultado) definem seu próprio
   display (flex) e isso vence a regra padrão do navegador pro atributo "hidden" —
   sem isto, esconder via el.hidden = true não tinha efeito nenhum. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: #161616;
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  display: flex;
  justify-content: center;
}

/* O app é SEMPRE a altura exata da tela (nunca menos, nunca mais) — o conteúdo
   rola por dentro de #content, então a barra de abas e o botão de mapa (ambos
   ancorados nas bordas de #app) nunca são empurrados pra fora da tela nem ficam
   se sobrepondo a nada, não importa o quanto o conteúdo cresça. */
#app {
  width: 100%;
  max-width: none;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1.4px 1.4px at 0 0, rgba(255, 255, 255, 0.22) 1.4px, transparent 0) 0 0/22px 22px,
    radial-gradient(130% 50% at 12% 0%, var(--bg-top) 0%, var(--bg-bot) 55%, #161616 100%);
  position: relative;
  overflow: hidden;
}
#content { overflow-y: auto; min-height: 0; }

/* ---- tela grande: o app preenche a janela do navegador de verdade — sem
   cartão pequeno flutuando, sem margem decorativa. Isso É a tela cheia. ---- */
@media (min-width: 720px) and (min-height: 560px) {
  body { align-items: stretch; }
  #app {
    max-width: none;
    width: 100vw;
    height: 100dvh;
  }
  .board-wrap { max-width: 400px; }

  /* fora da tela de combate, o conteúdo estica de ponta a ponta da janela —
     e fica centralizado verticalmente também, senão o menu/ajustes ficam
     grudados no topo com um vazio enorme embaixo. */
  #content:not(.combat-screen) { justify-content: center; padding-left: 48px; padding-right: 48px; }
  .tabbar { padding-left: 48px; padding-right: 48px; }

  /* o tabuleiro deve preencher a largura real da coluna (a "aba" de combate),
     não ficar pequeno dentro dela — só a altura da janela limita o tamanho. */
  #app.combat-wide .board-wrap { max-width: min(100%, 72vh, 720px); }
  #app.combat-wide .combat-sidebar { display: flex; flex-direction: column; height: 100%; }
  #app.combat-wide .combat-log { flex: 1; min-height: 0; overflow-y: auto; }
  #app.combat-wide .combat-map-col { align-self: stretch; overflow-y: auto; }
}

#content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: calc(28px + var(--safe-top)) 16px 20px;
}

#content.tabbed { padding-bottom: 16px; }

h1, h4, h5 { margin: 0; font-weight: 500; letter-spacing: -0.02em; }
h1 { font-size: 36px; line-height: 1; }
h4 { font-size: 17px; }
h5 { font-size: 15px; }
p { margin: 0; }

.hr { border: none; border-top: 1px solid var(--line); margin: 0; }

.btn {
  font: 500 13.5px "DM Sans", system-ui, sans-serif;
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  color: var(--ink);
  background: var(--panel);
  min-height: 38px;
  -webkit-tap-highlight-color: transparent;
}
.btn:disabled { opacity: .4; cursor: default; }
.btn-block { width: 100%; }
.btn-primary {
  background: rgba(var(--accent-rgb), 0.12);
  box-shadow: inset 0 0 0 1.5px var(--accent);
  color: var(--accent); font-weight: 700; letter-spacing: -.01em;
  transition: transform .12s ease, background .12s ease;
}
.btn-primary:active:not(:disabled) { transform: translateY(1px) scale(.99); background: rgba(var(--accent-rgb), 0.22); }
.btn-secondary { background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--card-line); transition: box-shadow .12s ease; }
.btn-secondary:active:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--accent); }
.btn-ghost { background: transparent; color: var(--muted-6); padding: 8px 6px; }

.pill {
  padding: 8px 13px;
  border-radius: 9px;
  font: 600 12.5px "DM Sans", system-ui;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted-6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: box-shadow .12s ease, background .12s ease, color .12s ease;
}
.pill.active { color: var(--accent); background: rgba(var(--accent-rgb), 0.14); border-color: var(--accent); box-shadow: none; }

.tag {
  font-size: 10.5px;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(233, 233, 237, 0.08);
  color: var(--muted-6);
}

.field label { display: block; font-size: 11px; color: var(--muted-5); margin-bottom: 6px; }
.input {
  flex: 1;
  min-width: 0;
  background: rgba(233, 233, 237, 0.06);
  border: 1px solid var(--card-line);
  border-radius: 8px;
  padding: 8px 11px;
  color: var(--ink);
  font: 500 14px "DM Sans", system-ui;
}
.input::placeholder { color: var(--muted-30); }

/* ---- boards ---- */
.board-wrap { width: 100%; max-width: 340px; margin: 0 auto; }
.board {
  display: grid;
  gap: 3px;
}
.board-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 11px "DM Sans", system-ui;
  color: var(--muted-30);
}
.board-label { font: 500 9.5px "DM Sans", system-ui; color: var(--muted-30); }
button.board-cell {
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 4px;
  aspect-ratio: 1;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}

.cell-setup-empty { background: rgba(233, 233, 237, 0.03); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.14); }
.cell-setup-occupied { background: rgba(var(--accent-rgb), 0.05); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.22); }
.cell-setup-ghost { background: rgba(var(--accent-rgb), 0.38); box-shadow: inset 0 0 0 1px var(--accent-2); }
.cell-setup-ghost-bad { background: rgba(233, 120, 120, 0.28); box-shadow: inset 0 0 0 1px #c98b8b; }

.cell-empty { background: rgba(233, 233, 237, 0.028); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.16); color: transparent; }
.cell-scanned { background: rgba(var(--accent-rgb), 0.13); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.45); }
.cell-miss {
  border-radius: 50% !important;
  box-shadow: inset 0 0 0 1px rgba(79, 195, 247, 0.4);
  background: radial-gradient(circle, rgba(79, 195, 247, 0.7) 0 12%, rgba(79, 195, 247, 0.08) 13%);
  color: transparent;
}
/* acerto: marca de bomba (cratera com estilhaços) em vez do quadrado laranja */
.cell-hit {
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.45), 0 0 12px -4px rgba(var(--accent-rgb), 0.8);
  background: radial-gradient(circle, rgba(40, 18, 6, .9) 0 38%, rgba(var(--accent-rgb), 0.12) 70%);
  animation: bn-pulse .3s ease both;
}
.cell-sunk {
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(201, 139, 139, 0.45);
  background: rgba(60, 20, 12, 0.55);
}
.cell-disabled { cursor: default; opacity: .55; }

/* casco translúcido do navio, desenhado como um item de grid sobreposto às células —
   acompanha a orientação/tamanho real do navio em vez de quadrados soltos. */
.ship-hull {
  position: relative;
  pointer-events: none;
  margin: 1px;
  min-width: 0;
  min-height: 0;
  color: var(--accent-pale);
  border-radius: 6px;
  background: rgba(var(--accent-rgb), 0.07);
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.35));
}
/* desenho técnico do navio (planta vista de cima) */
/* posição absoluta: o desenho nunca empurra a grade (sem tamanho próprio, o SVG alargava o tabuleiro no celular) */
.bp-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bp { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.bp * { vector-effect: non-scaling-stroke; }
.bp .bp-casco { fill: rgba(var(--accent-rgb), 0.16); stroke-width: 1.6; }
.bp circle, .bp rect, .bp ellipse { fill: rgba(var(--accent-rgb), 0.12); }
.bp .bp-fino { stroke-width: .7; opacity: .7; }
.ship-hull.bad { color: #e0a0a0; background: rgba(233, 120, 120, 0.16); }
.ship-hull.sunk { color: #c98b8b; background: rgba(201, 139, 139, 0.12); filter: none; opacity: .85; }
.ship-hull.sunk .bp-casco { fill: rgba(201, 139, 139, 0.2); }

/* radar: área com alvo pisca em destaque; sem alvo fica azul de "água limpa" */
.cell-radar-alvo { background: rgba(var(--accent-rgb), 0.3); box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 12px -2px rgba(var(--accent-rgb), 0.9); animation: radar-alvo 1.6s ease-in-out infinite; }
.cell-radar-limpo { background: rgba(79, 195, 247, 0.1); box-shadow: inset 0 0 0 1px rgba(79, 195, 247, 0.45); }
.radar-num { font: 800 13px "DM Sans", system-ui; color: #fff; text-shadow: 0 0 6px rgba(0, 0, 0, .6); }
@keyframes radar-alvo { 50% { background: rgba(var(--accent-rgb), 0.45); box-shadow: inset 0 0 0 1.5px var(--accent-2), 0 0 18px 0 rgba(var(--accent-rgb), 0.9); } }
@media (prefers-reduced-motion: reduce) { .cell-radar-alvo { animation: none; } }

.mini-board { display: grid; gap: 2px; }
.mini-cell { width: 100%; aspect-ratio: 1; border-radius: 3px; background: rgba(233, 233, 237, 0.05); }
.mini-cell.hit { background: var(--accent); border-radius: 3px; }
.mini-cell.sunk-mark { background: #c98b8b; box-shadow: inset 0 0 0 1px #e0b4b4; border-radius: 3px; }
.mini-cell.miss { border-radius: 50%; background: radial-gradient(circle, rgba(79, 195, 247, 0.65) 0 22%, rgba(79, 195, 247, 0.08) 23%); }
.mini-cell.shield-mark { background: rgba(79, 195, 247, 0.16); box-shadow: inset 0 0 0 1.5px #4fc3f7; border-radius: 3px; }
.mini-hull {
  position: relative;
  pointer-events: none; margin: 1.5px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.4), rgba(var(--accent-rgb), 0.2));
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.75);
}
.mini-hull.dead { background: rgba(201, 139, 139, 0.38); box-shadow: inset 0 0 0 1px #c98b8b; }

/* ---- menu ---- */
.kicker { font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--accent); }
.radar-hero { position: relative; height: 150px; }
.radar-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(var(--accent-rgb), 0.2); }
.radar-sweep {
  position: absolute; left: -34px; top: -16px; width: 186px; height: 186px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(var(--accent-rgb), 0.34), rgba(var(--accent-rgb), 0) 30%);
  animation: bn-sweep 5.5s linear infinite;
}
.radar-dot {
  position: absolute; left: 57px; top: 74px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-2); box-shadow: 0 0 12px 3px rgba(var(--accent-rgb), 0.55);
}
.radar-title { position: absolute; right: 0; bottom: 6px; text-align: right; }
.radar-title p { margin-top: 8px; font-size: 12.5px; color: var(--muted-6); max-width: 190px; margin-left: auto; }

.install-banner {
  display: flex; align-items: center; gap: 11px; padding: 11px;
  border: 1px solid rgba(var(--accent-rgb), 0.32); border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.07); animation: bn-slide .3s ease both;
}
.install-icon {
  width: 38px; height: 38px; flex: none; border-radius: 9px; border: 1px solid rgba(var(--accent-rgb), 0.45);
  display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--accent-2);
}
.row-btn {
  display: flex; align-items: center; justify-content: space-between; padding: 13px 11px;
  border-radius: 8px; cursor: pointer; background: rgba(35, 37, 50, 0.6); border: 0;
  box-shadow: inset 0 0 0 1px var(--panel-line); font: 400 13.5px "DM Sans", system-ui; color: var(--ink);
  min-height: 46px; width: 100%; text-align: left;
}

/* ---- setup ---- */
.fleet-chip {
  display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 8px;
  cursor: pointer; background: var(--panel); box-shadow: inset 0 0 0 1px var(--panel-line);
  touch-action: none;
}
.fleet-chip.active { background: rgba(var(--accent-rgb), 0.16); box-shadow: inset 0 0 0 1px var(--accent); }
.fleet-chip.done { background: rgba(var(--accent-rgb), 0.1); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.3); }
.fleet-chip .pips { letter-spacing: 2px; font-size: 10px; color: var(--muted-45); }
.fleet-chip.done .pips { color: var(--accent-2); }
.fleet-chip .state { margin-left: auto; font-size: 11px; color: var(--muted-45); }

/* ---- play ---- */
.turn-pill { font: 700 11.5px "DM Sans", system-ui; padding: 5px 12px; border-radius: 7px; letter-spacing: -.01em; }
.turn-pill.mine { color: var(--accent); background: rgba(var(--accent-rgb), 0.14); box-shadow: inset 0 0 0 1px var(--accent); }
.turn-pill.theirs { color: var(--danger); box-shadow: inset 0 0 0 1px rgba(201, 139, 139, 0.5); }

.timer-track { height: 4px; border-radius: 2px; background: rgba(233, 233, 237, 0.1); overflow: hidden; }
.timer-bar { height: 100%; border-radius: 2px; transition: width 1s linear; background: var(--accent); }
.timer-bar.low { background: var(--danger); }

.turn-banner { display: flex; align-items: center; gap: 9px; padding: 12px 13px; border-radius: 10px; }
.turn-banner.mine { background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.26), rgba(var(--accent-rgb), 0.1)); color: #ece9ff; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.5); animation: bn-turn 1.9s ease-in-out infinite; }
.turn-banner.theirs { background: rgba(201, 139, 139, 0.1); color: var(--danger); box-shadow: 0 0 0 1px rgba(201, 139, 139, 0.35); }
.turn-banner .dot { width: 9px; height: 9px; flex: none; border-radius: 50%; animation: bn-dots 1.1s ease-in-out infinite; }
.turn-banner.mine .dot { background: var(--accent-2); box-shadow: 0 0 10px 2px rgba(var(--accent-rgb), .8); }
.turn-banner.theirs .dot { background: var(--danger); }

.board-frame { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 12px; transition: box-shadow .3s ease; }
.board-frame.mine-turn { box-shadow: 0 0 0 1.5px rgba(var(--accent-rgb), 0.7), 0 0 36px -6px rgba(var(--accent-rgb), 0.65); }
.board-frame.idle { box-shadow: 0 0 0 1px rgba(233, 233, 237, 0.06); }

/* mesmo radar animado do menu, reaproveitado como overlay sobre o tabuleiro
   inimigo enquanto o radar está armado (escolhendo a área do scan). */
.board-radar-overlay {
  position: absolute; inset: 6px; border-radius: 8px; overflow: hidden; pointer-events: none; z-index: 5;
  background: rgba(10, 8, 4, 0.55);
  display: flex; align-items: center; justify-content: center;
}
.board-radar-overlay .radar-scale { position: relative; width: 55%; aspect-ratio: 1; }

/* mesmo componente de radar em anéis — reaproveitado no overlay do tabuleiro
   e na tela de abertura (por isso são classes globais, não presas a um pai). */
.r-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(var(--accent-rgb), 0.4); }
.r-sweep {
  position: absolute; inset: 0; border-radius: 50%; transform-origin: center;
  background: conic-gradient(from 0deg, rgba(var(--accent-rgb), 0.5), rgba(var(--accent-rgb), 0) 30%);
  animation: bn-sweep 2.4s linear infinite;
}
.r-dot {
  position: absolute; left: 50%; top: 50%; width: 8%; height: 8%; transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--accent-2); box-shadow: 0 0 12px 3px rgba(var(--accent-rgb), 0.65); animation: bn-dots 1.1s ease-in-out infinite;
}

/* avião sobrevoando o alvo do ataque aéreo */
.plane-overlay {
  position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; border-radius: 8px;
  background: rgba(10, 8, 4, 0.35);
}
.plane-overlay svg {
  position: absolute; top: 45%; left: -15%; width: 34px; height: 34px; color: var(--accent-2);
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .8));
  animation: bn-flyover 0.9s linear both;
}
.plane-overlay svg path { fill: currentColor; stroke: none; }
@keyframes bn-flyover { 0% { left: -15%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 110%; opacity: 0; } }

.mini-cell-target { cursor: pointer; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .5); }

/* mira antes do impacto + explosão no acerto */
.cell-target::after {
  content: "+"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 700 16px "DM Sans", system-ui; color: var(--accent-2); animation: bn-target .35s ease both;
}
button.board-cell:not(.cell-disabled):not(.cell-hit):not(.cell-sunk):not(.cell-miss):hover::after {
  content: "+"; position: absolute; color: rgba(var(--accent-rgb), .6); font-size: 14px; pointer-events: none;
}
.cell-hit.cell-boom, .cell-sunk.cell-boom { animation: bn-boom .5s cubic-bezier(.2,.8,.3,1) both; z-index: 5; overflow: visible; }
.cell-boom::before {
  content: ""; position: absolute; inset: -40%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.9) 0%, rgba(var(--accent-rgb),.9) 30%, rgba(var(--accent-rgb),0) 70%);
  animation: bn-shock .5s ease-out both;
}

/* botão só com ícone (pausa) */
.icon-btn { padding: 8px; min-height: 0; }
.icon-btn svg { display: block; }

.action-btn {
  flex: 0 0 auto; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer;
  background: rgba(var(--accent-rgb), 0.1); color: var(--accent-2); border: 1px solid rgba(var(--accent-rgb), 0.35);
  transition: box-shadow .12s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.action-btn .ico { display: inline-flex; }
.action-btn.armed { background: rgba(var(--accent-rgb), 0.22); color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.action-btn:disabled, .action-btn.spent { opacity: .4; cursor: default; }

/* atalhos de teclado — só fazem sentido com um teclado de verdade por perto */
.kbd-hint { display: none; }
@media (min-width: 720px) and (min-height: 560px) {
  .kbd-hint {
    display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center;
    font-size: 10.5px; color: var(--muted-45);
  }
  .kbd-hint kbd {
    display: inline-block; margin-right: 4px; padding: 1px 5px; border-radius: 4px;
    font: 600 10px "DM Sans", system-ui; background: rgba(255,255,255,0.06);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16); color: var(--muted-6);
  }
}
.action-btn:active:not(:disabled) { transform: translateY(1px) scale(.98); }

.legend { display: flex; align-items: center; gap: 14px; justify-content: center; flex-wrap: wrap; }
.legend .item { display: flex; align-items: center; gap: 5.6px; }
.legend .swatch { width: 13px; height: 13px; border-radius: 2px; }
.legend .label { font-size: 10.5px; color: var(--muted-5); }

.fleet-tags { display: flex; flex-wrap: wrap; gap: 5.6px; }
.fleet-tag { font-size: 10.5px; padding: 3px 9px; border-radius: 6px; background: rgba(233, 233, 237, 0.05); color: var(--muted-6); }
.fleet-tag.dead { background: var(--accent-deep); color: var(--accent-pale); text-decoration: line-through; }

.log-line { display: flex; gap: 5.6px; align-items: baseline; font-size: 11.5px; line-height: 1.4; animation: bn-slide .25s ease both; }
.log-dot { width: 5px; height: 5px; flex: none; border-radius: 50%; margin-top: 5px; background: var(--accent); }

/* ---- layout de combate: uma coluna no celular, tabuleiro + painel lado a lado no desktop ---- */
.combat-body { display: flex; flex-direction: column; gap: 11.2px; flex: 1; min-height: 0; }
.combat-sidebar { display: flex; flex-direction: column; gap: 11.2px; }
/* espaço entre o tabuleiro e a legenda logo abaixo — sem isso eles ficam colados
   e o brilho da borda do tabuleiro parece "encavalar" nas amostras da legenda. */
.combat-board-col { display: flex; flex-direction: column; gap: 11.2px; }
@media (min-width: 720px) and (min-height: 560px) {
  .combat-body { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
  .combat-sidebar { align-self: stretch; }
}

/* mesmo visual dos botões de ação (radar/defesa/avião) — sem glow branco de foco */
.map-fab {
  position: absolute; right: 16px; bottom: 16px; z-index: 15;
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb), 0.1); color: var(--accent-2);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  -webkit-tap-highlight-color: transparent;
}
.map-fab.active { background: rgba(var(--accent-rgb), 0.22); color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }

/* "Meu mapa" é uma seção normal da página — empilha no celular, vira uma
   coluna de verdade ao lado do tabuleiro no desktop (ver .combat-body acima). */
.map-card {
  padding: 14px; border-radius: 14px; background: var(--card);
  box-shadow: inset 0 0 0 1px var(--card-line);
  animation: bn-slide .2s ease both;
}
.map-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.map-panel-head button { background: transparent; border: 0; color: var(--muted-5); font-size: 18px; cursor: pointer; line-height: 1; }

.result-flash {
  position: absolute; left: 50%; top: 18%; transform: translate(-50%, -8px); z-index: 20;
  padding: 12px 22px; border-radius: 14px; font: 700 16px "DM Sans", system-ui; text-align: center;
  pointer-events: none; opacity: 0; white-space: nowrap;
  box-shadow: 0 14px 40px -10px rgba(0,0,0,0.7);
}
.result-flash.show { animation: bn-flash-pop 1.3s cubic-bezier(.2,.8,.3,1) both; }
.result-flash.hit { background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #14121f; }
.result-flash.sunk { background: linear-gradient(180deg, var(--accent-pale), var(--accent-deep)); color: #f5f4ff; }
.result-flash.miss { background: linear-gradient(180deg, var(--water-2), var(--water)); color: #0a2530; }
.result-flash.foehit { background: linear-gradient(180deg, #e0a3a3, var(--danger)); color: #2a1212; }
.result-flash.shield { background: linear-gradient(180deg, #7fd4fb, #1976d2); color: #06202f; }
@keyframes bn-flash-pop {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(.9); }
  12% { opacity: 1; transform: translate(-50%, -8px) scale(1.04); }
  20% { transform: translate(-50%, -8px) scale(1); }
  82% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -14px) scale(1); }
}

/* ---- over ---- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8.4px; }
.stat-grid .v { font-size: 25px; font-weight: 500; }
.stat-grid .k { font-size: 10.5px; color: var(--muted-5); }
.log-panel { display: flex; flex-direction: column; gap: 5.6px; padding: 11.2px; border-radius: 8px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); }

/* ---- profile / settings ---- */
.avatar { width: 52px; height: 52px; border-radius: 50%; flex: none; border: 1px solid rgba(var(--accent-rgb), 0.5); display: flex; align-items: center; justify-content: center; font-size: 19px; color: var(--accent-2); }
.profile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8.4px; }
.profile-grid .card { padding: 11.2px; border-radius: 8px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--panel-line); }
.profile-grid .v { font-size: 24px; font-weight: 500; }
.profile-grid .k { font-size: 11px; color: var(--muted-5); }
.history-row { display: flex; align-items: center; gap: 8.4px; padding-bottom: 5.6px; border-bottom: 1px solid var(--line); }
.history-tag { width: 20px; height: 20px; flex: none; border-radius: 5px; display: flex; align-items: center; justify-content: center; font: 500 10.5px "DM Sans", system-ui; }
.history-tag.win { background: var(--accent-deep); color: var(--accent-pale); }
.history-tag.loss { background: rgba(201, 139, 139, 0.18); color: var(--danger); }
.empty-hint { font-size: 12px; color: var(--muted-45); padding: 12px 0; }

.toggle-row { display: flex; align-items: center; gap: 11px; }
.toggle-row .label { font-size: 13.5px; }
.toggle-row .hint { font-size: 11px; color: var(--muted-5); }
.toggle-track { width: 44px; height: 26px; flex: none; border-radius: 13px; padding: 2px; border: 0; cursor: pointer; display: flex; background: rgba(233, 233, 237, 0.12); justify-content: flex-start; }
.toggle-track.on { background: var(--accent-deep); justify-content: flex-end; }
.toggle-knob { width: 22px; height: 22px; border-radius: 50%; background: rgba(233, 233, 237, 0.55); }
.toggle-track.on .toggle-knob { background: #e7e5fe; }

.lobby-code-card { padding: 16.8px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); display: flex; flex-direction: column; gap: 11px; align-items: center; text-align: center; }

/* ---- tabbar ---- */
.tabbar {
  display: flex; gap: 2px; padding: 8px 14px calc(14px + var(--safe-bottom));
  border-top: 1px solid var(--line); background: rgba(19, 21, 31, 0.85); backdrop-filter: blur(12px);
}
.tab-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 0;
  border: 0; background: transparent; cursor: pointer; font: 600 10.5px "DM Sans", system-ui; color: var(--muted-45);
  border-radius: 10px; transition: background .15s ease, color .15s ease;
}
.tab-btn.active { color: var(--accent-2); background: rgba(var(--accent-rgb), 0.12); }
.tab-ico { display: flex; }
.tab-ico svg { width: 19px; height: 19px; }
.tab-btn.active .tab-ico svg { filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), .6)); }

@keyframes bn-pulse { 0% { transform: scale(.4); opacity: 0; } 45% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes bn-target { 0% { transform: scale(1.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes bn-boom { 0% { transform: scale(.6); } 40% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes bn-shock { 0% { opacity: 1; transform: scale(.2); } 100% { opacity: 0; transform: scale(1.6); } }

/* ---- tela de abertura: radar procurando o alvo e atirando ---- */
.splash-screen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; cursor: pointer; }
.splash-radar-scale { position: relative; width: min(58vw, 240px); aspect-ratio: 1; }
.splash-crosshair {
  position: absolute; left: 50%; top: 50%; font: 700 26px "DM Sans", system-ui; color: var(--accent-2);
  transform: translate(-50%, -50%); animation: bn-splash-hunt 1.8s ease-in-out infinite;
  text-shadow: 0 0 10px rgba(var(--accent-rgb), .8);
}
.splash-boom {
  position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(var(--accent-rgb),.9) 30%, rgba(var(--accent-rgb),0) 72%);
  opacity: 0; animation: bn-splash-fire 1.8s ease-out infinite;
}
.splash-title-wrap { text-align: center; width: min(92vw, 420px); }
.splash-title-wrap p { margin: 8px auto 0; font-size: 13px; color: var(--muted-6); max-width: 300px; min-height: 2.6em; }
/* mira e explosão ficam repetindo em loop (o jogo não avança sozinho — só ao tocar em "Iniciar jogo") */
@keyframes bn-splash-hunt {
  0% { transform: translate(-135%, -110%); opacity: .3; }
  22% { transform: translate(90%, -85%); opacity: .7; }
  46% { transform: translate(-100%, 60%); opacity: .7; }
  70% { transform: translate(55%, 40%); opacity: .9; }
  88%, 100% { transform: translate(-50%, -50%); opacity: 1; }
}
@keyframes bn-splash-fire {
  0%, 78% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  88% { opacity: 1; transform: translate(-50%, -50%) scale(.3); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); }
}
@keyframes bn-sweep { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
@keyframes bn-dots { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes bn-slide { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes bn-turn { 0%, 100% { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.45), 0 0 22px -6px rgba(var(--accent-rgb), 0.35); } 50% { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.85), 0 0 30px -4px rgba(var(--accent-rgb), 0.6); } }

a { color: var(--accent); }
a:hover { color: var(--accent-2); }

/* ---------- Padrão do portal Oficina Ministerial ---------- */
.om-portal-linha { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 12px; color: var(--muted-6); }
.om-portal-linha img { width: 22px; height: 22px; object-fit: cover; object-position: 0 50%; border-radius: 6px; }
.om-portal-linha b { color: #ff9200; }
.om-portal-card { display: flex; flex-direction: column; gap: 8px; padding: 15px; border-radius: 12px; text-decoration: none; color: #e9e9ed;
  background: radial-gradient(120% 140% at 100% 0%, rgba(255,146,0,.22), transparent 60%), #141414; box-shadow: inset 0 0 0 1px rgba(255,146,0,.35); }
.om-portal-topo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; line-height: 1.1; }
.om-portal-topo img { width: 32px; height: 32px; object-fit: cover; object-position: 0 50%; border-radius: 8px; }
.om-portal-topo b { color: #ff9200; }
.om-portal-texto { font-size: 11.5px; line-height: 1.5; color: rgba(233,233,237,.7); }
.om-portal-texto b { color: #fff; }
.om-portal-link { font-size: 11.5px; font-weight: 700; color: #ff9200; }
body.em-combate .om-duvidas, body.em-combate .om-duvidas-painel { display: none !important; }

/* ---- marca de bomba, explosão e navio destruído ---- */
.marca-bomba { width: 78%; height: 78%; pointer-events: none; }
.marca-bomba .mb-cratera { fill: #1b0d06; stroke: rgba(0, 0, 0, .5); }
.marca-bomba .mb-estilhaco { fill: rgba(var(--accent-rgb), .22); stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; }
.marca-bomba .mb-brasa { fill: #ffb74d; filter: drop-shadow(0 0 3px #ff7a00); }
.cell-sunk .marca-bomba { opacity: .55; }
.mini-cell { position: relative; z-index: 2; display: grid; place-items: center; }
.mini-cell.hit, .mini-cell.sunk-mark { background: transparent; box-shadow: none; }
.mini-cell .marca-bomba { width: 100%; height: 100%; }
.mini-hull { z-index: 1; background: rgba(var(--accent-rgb), 0.08) !important; box-shadow: none !important; color: var(--accent-pale); border-radius: 3px !important; min-width: 0; min-height: 0; }
.mini-hull.dead { color: #d98a7a; }

.explosao { position: absolute; left: 50%; top: 50%; width: 260%; height: 260%; transform: translate(-50%, -50%); pointer-events: none; z-index: 6; }
.explosao::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, #fffbe6 0 9%, #ffd54f 17%, #ff8a00 30%, rgba(230, 60, 0, .75) 44%, rgba(80, 30, 10, .35) 56%, transparent 66%);
  animation: bn-explode .65s ease-out both; }
.explosao i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #ffd54f; box-shadow: 0 0 6px #ff8a00; animation: bn-faisca .6s ease-out both; }
.explosao i:nth-child(1) { --dx: -38px; --dy: -30px; } .explosao i:nth-child(2) { --dx: 40px; --dy: -26px; }
.explosao i:nth-child(3) { --dx: -44px; --dy: 18px; } .explosao i:nth-child(4) { --dx: 36px; --dy: 34px; }
.explosao i:nth-child(5) { --dx: 4px; --dy: -46px; } .explosao i:nth-child(6) { --dx: -6px; --dy: 44px; }
@keyframes bn-explode { 0% { transform: scale(.15); opacity: 1; } 55% { opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes bn-faisca { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .explosao::before, .explosao i { animation-duration: .01s; } }

/* navio destruído: partido, chamuscado, com furos e fogo */
.bp-destruido .bp-casco { fill: rgba(70, 22, 12, 0.55); }
.bp-destruido .bp-racha { stroke: #ffb199; stroke-width: 1.8; fill: none; }
.bp-destruido .bp-racha.fina { stroke-width: .9; opacity: .8; }
.bp-destruido .bp-furo { fill: #120804; stroke: #ff8a65; stroke-width: .8; }
.bp-destruido .bp-fogo { fill: rgba(255, 138, 0, .85); stroke: #ffd54f; stroke-width: .8; filter: drop-shadow(0 0 3px #ff5a00); }
.ship-hull.sunk { color: #d98a7a; background: rgba(120, 30, 15, 0.16); filter: drop-shadow(0 0 6px rgba(255, 80, 20, .35)); opacity: 1; }
.ship-hull.sunk .bp-casco { fill: rgba(70, 22, 12, 0.55); }
.ship-hull.inimigo { z-index: 3; }

/* radar: o vulto do que há na área, borrado */
.ship-hull.vulto { z-index: 3; background: transparent; color: var(--accent-pale); filter: blur(1.6px) drop-shadow(0 0 6px rgba(var(--accent-rgb), .8)); opacity: .8; }

/* ---- abertura: sonar que procura o navio escondido ---- */
.sonar { position: relative; width: min(92vw, 560px); aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(var(--accent-rgb), .10) 0 1px, transparent 1px 10%),
    repeating-linear-gradient(0deg, rgba(var(--accent-rgb), .10) 0 1px, transparent 1px 12.5%),
    radial-gradient(120% 90% at 50% 50%, rgba(var(--accent-rgb), .07), transparent 70%), var(--card);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .35), 0 0 40px -10px rgba(var(--accent-rgb), .45); }
.sonar-canto { position: absolute; font: 700 9.5px "DM Sans", system-ui; letter-spacing: .16em; color: rgba(var(--accent-rgb), .7); }
.sonar-canto.tl { left: 12px; top: 10px; } .sonar-canto.tr { right: 12px; top: 10px; }
.sonar-canto.bl { left: 12px; bottom: 10px; } .sonar-canto.br { right: 12px; bottom: 10px; }
.sonar-canto.achou { color: var(--accent); text-shadow: 0 0 8px rgba(var(--accent-rgb), .9); animation: bn-dots 1s ease-in-out infinite; }
.sonar-feixe { position: absolute; top: 0; bottom: 0; left: 0; width: 26%; transform: translateX(-100%); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .05) 40%, rgba(var(--accent-rgb), .28) 92%, rgba(var(--accent-rgb), .9) 99%, transparent);
  mix-blend-mode: screen; }
.sonar-feixe::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: var(--accent-2); box-shadow: 0 0 14px 2px rgba(var(--accent-rgb), .9); }
.sonar-alvo { position: absolute; width: 74px; height: 74px; transform: translate(-50%, -50%); opacity: 0; display: grid; place-items: center; }
.sonar-alvo img { width: 100%; height: 100%; filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), .6)); position: relative; z-index: 1; }
.sonar-alvo.achou img { animation: bn-achou .5s cubic-bezier(.2, .8, .3, 1.4) both; filter: drop-shadow(0 0 16px rgba(var(--accent-rgb), .95)); }
.sonar-ping { position: absolute; inset: -30%; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; }
.sonar-alvo.achou .sonar-ping { animation: bn-ping 1.6s ease-out infinite; }
.sonar-alvo.achou .sonar-ping.p2 { animation-delay: .8s; }
@keyframes bn-achou { 0% { transform: scale(.5); } 100% { transform: scale(1); } }
@keyframes bn-ping { 0% { transform: scale(.35); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.splash-nome { min-height: 1.15em; font-size: clamp(34px, 9vw, 52px); letter-spacing: -.02em; }
.splash-cursor { display: inline-block; width: 3px; height: .9em; margin-left: 4px; vertical-align: -.08em; background: var(--accent); animation: bn-dots .9s steps(1) infinite; }
.splash-fim { margin-top: 18px; opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.splash-fim.on { opacity: 1; transform: none; pointer-events: auto; }

/* ---- fim da partida: quem venceu, em destaque ---- */
.fim { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 26px 16px 22px; border-radius: 20px; }
.fim-vitoria { background: radial-gradient(90% 80% at 50% 0%, rgba(var(--accent-rgb), .32), transparent 70%), var(--card); box-shadow: inset 0 0 0 1.5px rgba(var(--accent-rgb), .6), 0 0 50px -12px rgba(var(--accent-rgb), .7); }
.fim-derrota { background: radial-gradient(90% 80% at 50% 0%, rgba(201, 80, 60, .28), transparent 70%), var(--card); box-shadow: inset 0 0 0 1.5px rgba(201, 120, 110, .55); }
.fim-emblema { position: relative; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px; }
.fim-vitoria .fim-emblema { background: rgba(var(--accent-rgb), .14); box-shadow: 0 0 0 2px var(--accent), 0 0 40px rgba(var(--accent-rgb), .7); animation: bn-emblema .7s cubic-bezier(.2, .8, .3, 1.4) both; }
.fim-vitoria .fim-emblema::before { content: ""; position: absolute; inset: -40%; border-radius: 50%; z-index: -1;
  background: repeating-conic-gradient(rgba(var(--accent-rgb), .22) 0 10deg, transparent 10deg 30deg); animation: bn-sweep 12s linear infinite; }
.fim-emblema svg { width: 56px; height: 56px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fim-derrota .fim-emblema { background: rgba(201, 80, 60, .12); box-shadow: 0 0 0 2px rgba(201, 120, 110, .8); }
.fim-derrota .fim-emblema img { width: 58px; filter: grayscale(.6) sepia(.4) hue-rotate(-20deg); animation: bn-afunda 2.6s ease-in-out infinite; }
.fim-titulo { font-size: clamp(42px, 12vw, 64px); line-height: 1; letter-spacing: -.03em; margin: 2px 0 0; }
.fim-vitoria .fim-titulo { color: var(--accent); text-shadow: 0 0 24px rgba(var(--accent-rgb), .55); }
.fim-derrota .fim-titulo { color: #e39a8c; }
.fim-quem { font-size: 17px; font-weight: 700; margin: 0; }
.fim-confete i { position: absolute; top: -12px; left: var(--x); width: 7px; height: 12px; border-radius: 2px; background: var(--accent);
  opacity: 0; transform: rotate(var(--r)); animation: bn-confete 2.4s ease-in var(--d) infinite; }
.fim-confete i:nth-child(3n) { background: var(--accent-2); } .fim-confete i:nth-child(4n) { background: var(--accent-pale); width: 5px; }
.fim-bolhas i { position: absolute; bottom: 20%; left: 50%; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid rgba(201, 160, 150, .8); opacity: 0; animation: bn-bolha 2.2s ease-in infinite; }
.fim-bolhas i:nth-child(2) { left: 38%; animation-delay: .5s; } .fim-bolhas i:nth-child(3) { left: 60%; animation-delay: 1s; } .fim-bolhas i:nth-child(4) { left: 46%; animation-delay: 1.5s; }
@keyframes bn-emblema { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes bn-confete { 0% { opacity: 1; transform: translateY(0) rotate(var(--r)); } 100% { opacity: 0; transform: translateY(260px) rotate(calc(var(--r) + 540deg)); } }
@keyframes bn-afunda { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(6px) rotate(-14deg); } }
@keyframes bn-bolha { 0% { opacity: .9; transform: translateY(0) scale(.6); } 100% { opacity: 0; transform: translateY(-60px) scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .fim-confete, .fim-bolhas { display: none; } .fim-emblema, .fim-emblema img, .fim-vitoria .fim-emblema::before { animation: none !important; } }

/* ---- modo claro (Ajustes → Aparência) ---- */
:root[data-modo="claro"] {
  color-scheme: light;
  --bg-top: #fbf8f3; --bg-bot: #f1ebe2;
  --panel: rgba(60, 40, 20, 0.04); --panel-line: rgba(60, 40, 20, 0.12);
  --card: #ffffff; --card-line: rgba(60, 40, 20, 0.16);
  --ink: #241d16;
  --muted-30: rgba(36, 29, 22, 0.35); --muted-45: rgba(36, 29, 22, 0.5); --muted-5: rgba(36, 29, 22, 0.55); --muted-6: rgba(36, 29, 22, 0.68);
  --line: rgba(36, 29, 22, 0.1);
  --accent: #e07800; --accent-2: #c46a00; --accent-pale: #8a4a00; --accent-deep: #f6c68a;
  --water: #1f8fc4; --water-2: #4fb3e0; --danger: #b5584c;
}
:root[data-modo="claro"][data-theme="blue"] { --accent: #1f7acc; --accent-2: #1966ad; --accent-pale: #164f85; --accent-deep: #b9dbf7; }
:root[data-modo="claro"][data-theme="green"] { --accent: #24914f; --accent-2: #1d7a42; --accent-pale: #175e33; --accent-deep: #bfe8cf; }
html[data-modo="claro"], html[data-modo="claro"] body { background: #f4efe7; }
html[data-modo="claro"] #app { background:
    radial-gradient(1.4px 1.4px at 0 0, rgba(60, 40, 20, 0.18) 1.4px, transparent 0) 0 0/22px 22px,
    radial-gradient(130% 50% at 12% 0%, var(--bg-top) 0%, var(--bg-bot) 55%, #efe8dd 100%); }
html[data-modo="claro"] .btn-secondary, html[data-modo="claro"] .input { background: rgba(60, 40, 20, 0.04); }
html[data-modo="claro"] .cell-setup-empty, html[data-modo="claro"] .cell-empty { background: rgba(60, 40, 20, 0.035); }
html[data-modo="claro"] .mini-cell, html[data-modo="claro"] .fleet-tag { background: rgba(60, 40, 20, 0.05); }
html[data-modo="claro"] .timer-track, html[data-modo="claro"] .toggle-track { background: rgba(60, 40, 20, 0.12); }
html[data-modo="claro"] .toggle-knob { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
html[data-modo="claro"] .board-frame.idle { box-shadow: 0 0 0 1px rgba(60, 40, 20, 0.1); }
html[data-modo="claro"] .board-radar-overlay, html[data-modo="claro"] .plane-overlay { background: rgba(255, 250, 242, 0.6); }
html[data-modo="claro"] #tabbar, html[data-modo="claro"] .tabbar { background: rgba(255, 252, 247, 0.9); }
html[data-modo="claro"] .om-portal-card { background: radial-gradient(120% 140% at 100% 0%, rgba(255,146,0,.18), transparent 60%), #fff; }
html[data-modo="claro"] .om-portal-texto { color: var(--muted-6); }
html[data-modo="claro"] .radar-num { color: #fff; }
html[data-modo="claro"] .ship-hull { filter: none; }
html[data-modo="claro"] .marca-bomba .mb-cratera { fill: #3a2414; }
html[data-modo="claro"] .cell-hit { background: radial-gradient(circle, rgba(60, 30, 10, .85) 0 38%, rgba(var(--accent-rgb), 0.16) 70%); }
html[data-modo="claro"] .sonar-feixe { mix-blend-mode: multiply; }
html[data-modo="claro"] .fim-derrota .fim-titulo { color: #b5584c; }
html[data-modo="claro"] .turn-banner.mine { color: #5a3000; }
html[data-modo="claro"] .turn-banner.mine span { color: inherit; }