/* ============================================================
   Guerra Naval — sala de mando (templates/play_naval.html y
   naval_hub.html). Sin imágenes: el mar, el papel náutico y el latón
   son degradados y ruido SVG en línea.

   Variables de la sala (tema claro = papel de carta náutica; tema
   oscuro = puente de mando de noche); los tableros son siempre mar
   profundo con marco de latón:
     --nv-room  fondo de la sala · --nv-ink / --nv-ink-2 texto
     --nv-panel / --nv-panel-line  paneles laterales
     --nv-brass / --nv-brass-hi    latón (marcos, foco, detalles)
     --nv-sea   el agua · --nv-grid  la cuadrícula
   ============================================================ */

.nv-shell, .nv-hub-art {
  --nv-brass: #A47A2E; --nv-brass-hi: #D8B46A; --nv-brass-lo: #6E5020;
  --nv-ink: #13283D; --nv-ink-2: #4A5D70;
  --nv-panel: rgba(255, 255, 255, .62); --nv-panel-line: rgba(19, 40, 61, .14);
  --nv-room:
    radial-gradient(110% 80% at 15% -10%, rgba(255, 255, 255, .7), transparent 60%),
    radial-gradient(90% 70% at 100% 110%, rgba(164, 122, 46, .16), transparent 62%),
    repeating-linear-gradient(0deg, transparent 0 63px, rgba(30, 80, 120, .07) 63px 64px),
    repeating-linear-gradient(90deg, transparent 0 63px, rgba(30, 80, 120, .07) 63px 64px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.36  0 0 0 0 0.22  0 0 0 0.5 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    linear-gradient(170deg, #F5EEDF 0%, #EDE3CF 60%, #E6DAC2 100%);
  --nv-frame: linear-gradient(160deg, #1B3550 0%, #11263B 55%, #0B1B2B 100%);
  --nv-sea:
    radial-gradient(130% 90% at 25% 10%, rgba(120, 190, 235, .22), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.05' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.75  0 0 0 0 0.88  0 0 0 0 1  0 0 0 0.9 -0.32'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 260px 260px,
    linear-gradient(165deg, #1A527D 0%, #12406A 45%, #0C2E4E 100%);
  --nv-grid: rgba(196, 224, 246, .17);
  --nv-coord: #D9BC7C;
  --nv-water: #DCEBF7;
  --nv-hit: #E2553A;
  --nv-ok: #4FC08D; --nv-bad: #E8573C;
  --nv-hull: #A3B1BE; --nv-hull-edge: #46586A; --nv-deck: #7D8D9C; --nv-turret: #5D6E7E; --nv-bridge: #DCE4EB; --nv-window: #26384A;
  --nv-ease: cubic-bezier(.22, .9, .25, 1);
}
:root[data-theme="dark"] .nv-shell, :root[data-theme="dark"] .nv-hub-art {
  --nv-brass: #C9A45C; --nv-brass-hi: #E6C98A; --nv-brass-lo: #7A5B26;
  --nv-ink: #E6EDF4; --nv-ink-2: rgba(230, 237, 244, .68);
  --nv-panel: rgba(255, 255, 255, .045); --nv-panel-line: rgba(255, 255, 255, .1);
  --nv-room:
    radial-gradient(100% 70% at 20% -10%, rgba(90, 150, 210, .16), transparent 60%),
    radial-gradient(80% 60% at 100% 110%, rgba(201, 164, 92, .10), transparent 62%),
    repeating-linear-gradient(0deg, transparent 0 63px, rgba(160, 200, 240, .035) 63px 64px),
    repeating-linear-gradient(90deg, transparent 0 63px, rgba(160, 200, 240, .035) 63px 64px),
    linear-gradient(175deg, #0E1C2B 0%, #0A1520 60%, #070F18 100%);
  --nv-frame: linear-gradient(160deg, #18293B 0%, #0F1D2C 55%, #09131E 100%);
}

/* ---------- sala ---------- */
.nv-shell { max-width: 1220px; }
.nv-shell .play-sub { min-width: 0; }
.nv-shell .play-sub .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-room {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(12px, 2vw, 22px) clamp(10px, 2.2vw, 26px) clamp(14px, 2.2vw, 24px);
  border-radius: var(--r-xl, 18px); background: var(--nv-room); color: var(--nv-ink);
  box-shadow: inset 0 0 0 1px var(--nv-panel-line), 0 18px 40px -28px rgba(10, 30, 50, .55);
}
.nv-room.is-curtain { min-height: 460px; }
.nv-status {
  margin: 0 0 12px; min-height: 2.6em; display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center;
  font-size: .95rem; line-height: 1.35; color: var(--nv-ink-2);
}
.nv-status b { color: var(--nv-ink); font-weight: 600; }
.nv-status .nv-hint { color: var(--nv-ink-2); font-style: italic; }
.nv-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--nv-brass); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nv-brass) 22%, transparent); }

.nv-layout {
  display: grid; gap: 16px clamp(16px, 2.4vw, 30px); align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
  grid-template-areas: "enemy own" "enemy side";
}
.nv-layout[hidden] { display: none; }
.nv-sea-enemy { grid-area: enemy; }
.nv-sea-own { grid-area: own; }
.nv-side { grid-area: side; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.nv-shell[data-phase="placement"] .nv-layout {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); grid-template-areas: "own side";
}
.nv-shell[data-phase="placement"] .nv-sea-enemy,
.nv-shell[data-phase="placement"] .nv-fleets { display: none; }
.nv-shell:not([data-phase="placement"]) .nv-dock { display: none; }
.nv-over-actions[hidden] { display: none; }

.nv-sea { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.nv-sea-head { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; max-width: var(--nv-w, 100%); }
.nv-sea-head h2 {
  margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; letter-spacing: .01em; color: var(--nv-ink);
}
.nv-sea-sub { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--nv-ink-2); text-align: right; }
.nv-sea-enemy { --nv-w: min(100%, 600px, max(300px, calc(100svh - 330px))); }
.nv-sea-own { --nv-w: 100%; }
.nv-shell[data-phase="placement"] .nv-sea-own { --nv-w: min(100%, 560px, max(300px, calc(100svh - 290px))); }
.nv-sea-own.is-targeted .nv-frame { box-shadow: var(--nv-frame-sh), 0 0 0 2px color-mix(in srgb, var(--nv-hit) 55%, transparent); }

/* ---------- marco de latón con coordenadas ---------- */
.nv-frame {
  --nv-gut: 20px;
  --nv-frame-sh: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 0 0 1px var(--nv-brass-lo), 0 0 0 3px var(--nv-brass), 0 0 0 4px var(--nv-brass-lo),
                 0 18px 34px -16px rgba(5, 20, 35, .7);
  position: relative; width: var(--nv-w, 100%); display: grid;
  grid-template-columns: var(--nv-gut) minmax(0, 1fr); grid-template-rows: var(--nv-gut) auto;
  padding: 6px 10px 10px 6px; border-radius: 12px; background: var(--nv-frame); box-shadow: var(--nv-frame-sh);
  transition: box-shadow .3s ease;
}
.nv-corner { grid-area: 1 / 1; }
.nv-coords { display: grid; font-family: var(--font-num); font-size: .7rem; color: var(--nv-coord); user-select: none; }
.nv-coords.cols { grid-area: 1 / 2; grid-template-columns: repeat(10, 1fr); }
.nv-coords.rows { grid-area: 2 / 1; grid-template-rows: repeat(10, 1fr); }
.nv-coords span { display: grid; place-items: center; }
.nv-board {
  grid-area: 2 / 2; position: relative; display: grid; aspect-ratio: 1;
  grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: repeat(10, minmax(0, 1fr));
  border-radius: 4px; overflow: hidden; background: var(--nv-sea);
  box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .45), inset 0 0 30px rgba(0, 10, 25, .45);
  touch-action: manipulation;
}
/* oleaje: un brillo que se desplaza, casi imperceptible */
.nv-board::before {
  content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(115deg, transparent 0 22px, rgba(170, 215, 245, .05) 22px 24px);
  animation: nv-swell 14s linear infinite;
}
@keyframes nv-swell { to { transform: translateX(48px); } }

.nv-cell {
  position: relative; z-index: 2; display: block; min-width: 0; padding: 0; margin: 0; border: 0; font: inherit; color: inherit;
  background: transparent; box-shadow: inset -1px -1px 0 var(--nv-grid); cursor: default; -webkit-tap-highlight-color: transparent;
}
.nv-cell:nth-child(10n) { box-shadow: inset 0 -1px 0 var(--nv-grid); }
.nv-cell:nth-child(n+91) { box-shadow: inset -1px 0 0 var(--nv-grid); }
.nv-cell:nth-child(100) { box-shadow: none; }
.nv-cell:focus { outline: none; }
.nv-cell:focus-visible { outline: 2px solid var(--nv-brass-hi); outline-offset: -2px; z-index: 4; }
.nv-cell:disabled { cursor: default; }

/* marcas: agua, tocado, hundido */
.nv-mk { position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.nv-cell.is-water .nv-mk {
  width: 26%; height: 26%; background: var(--nv-water); opacity: .9;
  box-shadow: 0 0 0 3px rgba(220, 235, 248, .16), 0 0 0 7px rgba(220, 235, 248, .06);
}
.nv-cell.is-hit { background: rgba(214, 70, 40, .2); }
.nv-cell.is-hit .nv-mk {
  width: 42%; height: 42%;
  background: radial-gradient(circle at 50% 42%, #FFF1C4 0 12%, #FFB24A 30%, #E2553A 62%, #8E1F12 100%);
  box-shadow: 0 0 10px 2px rgba(255, 120, 50, .55);
  animation: nv-ember 1.8s ease-in-out infinite alternate;
}
.nv-cell.is-sunk { background: rgba(70, 14, 8, .42); }
.nv-cell.is-sunk .nv-mk {
  width: 30%; height: 30%; background: radial-gradient(circle at 50% 45%, #FFB070 0 15%, #C2401F 55%, #5A140A 100%);
  box-shadow: 0 0 6px rgba(255, 110, 50, .35);
}
@keyframes nv-ember { from { transform: translate(-50%, -50%) scale(.94); filter: brightness(.95); } to { transform: translate(-50%, -50%) scale(1.04); filter: brightness(1.12); } }

/* puntería */
.nv-board.is-armed .nv-cell:not(.is-water):not(.is-hit):not(.is-sunk) { cursor: crosshair; }
.nv-cell::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .15s ease, transform .15s ease; transform: scale(.7);
  background:
    linear-gradient(var(--nv-brass-hi), var(--nv-brass-hi)) center / 1.5px 100% no-repeat,
    linear-gradient(var(--nv-brass-hi), var(--nv-brass-hi)) center / 100% 1.5px no-repeat;
  box-shadow: 0 0 0 1.5px var(--nv-brass-hi); -webkit-mask: radial-gradient(circle, transparent 0 18%, #000 19%); mask: radial-gradient(circle, transparent 0 18%, #000 19%);
}
@media (hover: hover) and (pointer: fine) {
  .nv-board.is-armed .nv-cell:not(.is-water):not(.is-hit):not(.is-sunk):hover::after { opacity: .55; transform: scale(1); }
}
.nv-cell.is-aim::after { opacity: 1; transform: scale(1); animation: nv-aim 1.2s ease-in-out infinite; }
.nv-cell.is-aim { background: rgba(216, 180, 106, .18); }
@keyframes nv-aim { 50% { transform: scale(.86); } }
.nv-cell.is-last::before {
  content: ""; position: absolute; inset: 6%; border-radius: 6px; pointer-events: none;
  box-shadow: 0 0 0 2px var(--nv-brass-hi); animation: nv-last 1.6s ease-out both;
}
@keyframes nv-last { 0% { opacity: 0; transform: scale(1.5); } 20% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
.nv-cell.is-shake { animation: nv-shake .38s ease; }
@keyframes nv-shake { 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }

/* vista previa de colocación */
.nv-cell.is-ok { background: color-mix(in srgb, var(--nv-ok) 34%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--nv-ok) 85%, transparent); }
.nv-cell.is-bad { background: color-mix(in srgb, var(--nv-bad) 36%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--nv-bad) 90%, transparent); }
.nv-shell[data-phase="placement"] #nv-own .nv-cell { cursor: pointer; touch-action: none; }
.nv-shell[data-phase="placement"] #nv-own .nv-cell.has-ship { cursor: grab; }
.nv-shell.is-dragging, .nv-shell.is-dragging * { cursor: grabbing !important; user-select: none; }

/* ---------- barcos ---------- */
.nv-ship { position: relative; z-index: 1; pointer-events: none; padding: 1px; min-width: 0; min-height: 0; }
.nv-ship svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 3px rgba(0, 12, 30, .45)); }
.nv-ship .h { fill: var(--nv-hull); stroke: var(--nv-hull-edge); stroke-width: 4; }
.nv-ship .d { stroke: var(--nv-deck); stroke-width: 5; stroke-linecap: round; fill: none; }
.nv-ship .t { fill: var(--nv-turret); }
.nv-ship .t rect { fill: var(--nv-hull-edge); }
.nv-ship .b { fill: var(--nv-bridge); stroke: var(--nv-hull-edge); stroke-width: 3; }
.nv-ship .w { fill: var(--nv-window); }
.nv-ship .fd { fill: var(--nv-deck); }
.nv-ship .rw { stroke: rgba(255, 255, 255, .75); stroke-width: 3; stroke-dasharray: 16 12; fill: none; }
.nv-ship.is-fresh svg { animation: nv-drop .32s var(--nv-ease); }
@keyframes nv-drop { from { transform: scale(1.06); opacity: .5; } }
/* tu barco hundido: casco quemado */
.nv-ship.is-sunk { --nv-hull: #5B4440; --nv-hull-edge: #2B1714; --nv-deck: #45302C; --nv-turret: #3A2420; --nv-bridge: #6F5751; }
/* barco enemigo hundido: contorno de latón y silueta en sombra */
.nv-ship.is-outline::before {
  content: ""; position: absolute; inset: 3px; border-radius: 999px; pointer-events: none;
  border: 2px dashed var(--nv-brass-hi); opacity: .95;
}
.nv-ship.is-outline svg { opacity: .55; }
.nv-ship.is-outline { animation: nv-reveal .7s var(--nv-ease) both; }
@keyframes nv-reveal { from { opacity: 0; transform: scale(1.08); } }
/* al final: dónde estaba el resto de la flota rival */
.nv-ship.is-revealed { --nv-hull: #C8B48A; --nv-hull-edge: #6E5020; --nv-bridge: #F1E6CC; }
.nv-ship.is-revealed svg { opacity: .7; }

/* ---------- efectos del disparo ---------- */
.nv-fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.nv-fx::before, .nv-fx::after { content: ""; position: absolute; border-radius: 50%; }
.nv-fx-shell::before {
  inset: 32%; background: radial-gradient(circle at 35% 30%, #F5E6C3, #2A2A2A 55%, #0A0A0A);
  animation: nv-incoming .42s cubic-bezier(.5, 0, .9, .6) both;
}
@keyframes nv-incoming { 0% { transform: scale(3) translateY(-40%); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(.5); opacity: .9; } }
.nv-fx-splash::before, .nv-fx-splash::after { inset: 18%; border: 2px solid rgba(225, 242, 255, .95); animation: nv-ring .75s ease-out both; }
.nv-fx-splash::after { animation-delay: .12s; border-width: 1.5px; }
@keyframes nv-ring { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.nv-fx-boom::before {
  inset: 0; background: radial-gradient(circle, #FFF6C9 0 12%, #FFC34D 30%, #F06A2E 50%, rgba(226, 85, 58, 0) 70%);
  animation: nv-boom .6s ease-out both;
}
.nv-fx-boom::after { inset: 10%; background: radial-gradient(circle, rgba(70, 64, 60, .55), rgba(70, 64, 60, 0) 70%); animation: nv-smoke 1s ease-out .1s both; }
@keyframes nv-boom { from { transform: scale(.2); opacity: 1; } 60% { opacity: .9; } to { transform: scale(2); opacity: 0; } }
@keyframes nv-smoke { from { transform: scale(.4); opacity: .8; } to { transform: scale(2.3) translateY(-12%); opacity: 0; } }

/* ---------- puntería por coordenada ---------- */
.nv-fire {
  width: var(--nv-w, 100%); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; justify-content: center;
  margin-top: 6px;
}
.nv-fire label { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--nv-ink-2); }
.nv-fire input {
  min-height: 44px; width: 104px; padding: 0 12px; border-radius: 10px; font-family: var(--font-num); font-size: 1.1rem; text-transform: uppercase; text-align: center;
  color: var(--nv-ink); background: var(--nv-panel); border: 1px solid var(--nv-panel-line); letter-spacing: .08em;
}
.nv-fire input:focus-visible { outline: 2px solid var(--nv-brass); outline-offset: 1px; }
.nv-fire input:disabled { opacity: .5; }
.nv-fire-btn { min-height: 44px; gap: 6px; }
.nv-fire-btn svg { width: 18px; height: 18px; }
.nv-fire-tip { flex: 1 1 100%; margin: 0; font-size: .76rem; color: var(--nv-ink-2); text-align: center; }

/* ---------- panel lateral ---------- */
.nv-dock, .nv-fleet {
  padding: 14px; border-radius: 14px; background: var(--nv-panel); border: 1px solid var(--nv-panel-line);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.nv-dock { display: flex; flex-direction: column; gap: 12px; }
.nv-dock-h { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.nv-dock-h b { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; }
.nv-dock-h span { font-size: .75rem; color: var(--nv-ink-2); font-family: var(--font-num); }
.nv-ships { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nv-ship-btn {
  width: 100%; display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 48px;
  padding: 6px 10px; border-radius: 10px; font: inherit; text-align: left; color: var(--nv-ink); cursor: grab; touch-action: none;
  background: transparent; border: 1px solid var(--nv-panel-line);
  transition: border-color .2s ease, background .2s ease, opacity .2s ease;
}
.nv-ship-btn:hover { background: color-mix(in srgb, var(--nv-brass) 8%, transparent); }
.nv-ship-btn[aria-pressed="true"] { border-color: var(--nv-brass); background: color-mix(in srgb, var(--nv-brass) 14%, transparent); box-shadow: 0 0 0 1px var(--nv-brass); }
.nv-ship-btn:focus-visible { outline: 2px solid var(--nv-brass); outline-offset: 2px; }
.nv-ship-btn.is-placed:not([aria-pressed="true"]) { opacity: .62; }
.nv-ship-art { display: block; height: 22px; width: calc(var(--len, 3) * 20px); padding: 0; }
.nv-ship-art svg { display: block; width: 100%; height: 100%; }
.nv-ship-art .h { fill: var(--nv-hull); stroke: var(--nv-hull-edge); stroke-width: 5; }
.nv-ship-art .d { stroke: var(--nv-deck); stroke-width: 5; fill: none; }
.nv-ship-art .t { fill: var(--nv-turret); } .nv-ship-art .t rect { fill: var(--nv-hull-edge); }
.nv-ship-art .b { fill: var(--nv-bridge); stroke: var(--nv-hull-edge); stroke-width: 3; }
.nv-ship-art .w { fill: var(--nv-window); } .nv-ship-art .fd { fill: var(--nv-deck); }
.nv-ship-art .rw { stroke: rgba(255, 255, 255, .8); stroke-width: 3; stroke-dasharray: 16 12; fill: none; }
.nv-ship-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.nv-ship-txt b { font-weight: 600; font-size: .92rem; }
.nv-ship-txt small { font-size: .74rem; color: var(--nv-ink-2); }
.nv-dock-actions, .nv-over-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.nv-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 13px; border-radius: 999px; font: inherit; font-size: .82rem;
  color: var(--nv-ink); background: var(--nv-panel); border: 1px solid var(--nv-panel-line); cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.nv-chip:hover { border-color: var(--nv-brass); }
.nv-chip:focus-visible { outline: 2px solid var(--nv-brass); outline-offset: 2px; }
.nv-chip svg { width: 15px; height: 15px; }
.nv-ready { min-height: 46px; }
.nv-ready:disabled { opacity: .5; cursor: not-allowed; }
.nv-dock-tip { margin: 0; font-size: .76rem; line-height: 1.45; color: var(--nv-ink-2); }
.nv-dock-tip kbd, .nv-help kbd { font-family: var(--font-num); font-size: .7rem; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--nv-panel-line); }

.nv-fleets { display: flex; flex-direction: column; gap: 10px; }
.nv-fleet h3 { margin: 0 0 8px; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--nv-ink-2); }
.nv-fleet ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.nv-fleet li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; font-size: .86rem; }
.nv-fl-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-fleet li small { grid-column: 1 / -1; font-size: .7rem; color: var(--nv-ink-2); display: none; }
.nv-pips { display: inline-flex; gap: 3px; }
.nv-pips i { width: 10px; height: 10px; border-radius: 2px; background: color-mix(in srgb, var(--nv-ink) 32%, transparent); }
.nv-pips i.is-hit { background: var(--nv-hit); box-shadow: 0 0 4px rgba(226, 85, 58, .6); }
.nv-fleet li.is-sunk .nv-fl-name { text-decoration: line-through; text-decoration-color: var(--nv-hit); opacity: .6; }
.nv-fleet li.is-sunk .nv-pips i { background: var(--nv-hit); opacity: .55; }

/* ---------- cortina de privacidad ---------- */
.nv-curtain {
  position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: 18px;
  background:
    radial-gradient(70% 60% at 50% 40%, rgba(216, 180, 106, .14), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(160, 200, 240, .05) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(160, 200, 240, .05) 47px 48px),
    linear-gradient(170deg, #10273D, #081624);
  animation: tt-fade .25s ease both;
}
.nv-curtain[hidden] { display: none; }
.nv-curtain-card {
  width: min(100%, 420px); padding: 26px 24px 22px; text-align: center; border-radius: var(--r-xl, 18px);
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
}
.nv-curtain-card h2 { margin: 6px 0 8px; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.1; }
.nv-curtain-card p { margin: 0 0 18px; color: var(--ink-2); }
.nv-curtain-card .eyebrow { margin: 0; }
.nv-curtain-card .btn { width: 100%; }
.nv-compass {
  display: block; width: 58px; height: 58px; margin: 0 auto 10px; border-radius: 50%;
  background:
    conic-gradient(from 0deg, var(--nv-brass) 0 2%, transparent 2% 23%, var(--nv-brass) 23% 27%, transparent 27% 48%, var(--nv-brass) 48% 52%, transparent 52% 73%, var(--nv-brass) 73% 77%, transparent 77% 98%, var(--nv-brass) 98%);
  -webkit-mask: radial-gradient(circle, transparent 0 30%, #000 31% 62%, transparent 63% 70%, #000 71%); mask: radial-gradient(circle, transparent 0 30%, #000 31% 62%, transparent 63% 70%, #000 71%);
  box-shadow: inset 0 0 0 2px var(--nv-brass);
}

/* ---------- resultado y aviso ---------- */
.nv-room .tt-result { border-radius: 14px; --tt-table: #0B1B2B; color: var(--ink); }
.nv-r-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 10px; }
.nv-r-grid div { display: flex; flex-direction: column; gap: 2px; padding: 10px 4px; border-radius: var(--r-md, 12px); background: var(--surface-2); }
.nv-r-grid b { font-family: var(--font-num); font-weight: 500; font-size: 1.35rem; color: var(--ink); }
.nv-r-grid span { font-size: .72rem; color: var(--muted); }
.nv-toast {
  position: absolute; left: 50%; top: 42%; z-index: 25; padding: 12px 22px; border-radius: 999px; pointer-events: none;
  font-weight: 600; letter-spacing: .01em; color: #FBF3E0; white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis;
  background: rgba(8, 20, 32, .86); border: 1px solid color-mix(in srgb, var(--nv-brass-hi) 60%, transparent);
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .6);
  transform: translate(-50%, -50%); animation: nv-toast 2.2s ease both;
}
@keyframes nv-toast { 0% { opacity: 0; transform: translate(-50%, -40%) scale(.96); } 12%, 80% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -58%); } }

/* ---------- sonido ---------- */
.nv-sound-pop { min-width: 250px; padding: 14px; flex-direction: column; gap: 12px; }
.tool-group.open .nv-sound-pop { display: flex; }
.nv-sound-btn.is-muted svg, #nv-sound-btn.is-muted svg { opacity: .45; }
.nv-switch { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--t-sm); }
.nv-switch input { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; flex: none; }
.nv-switch-row { align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md, 12px); }
.nv-switch-row span { display: flex; flex-direction: column; gap: 3px; }
.nv-switch-row small { color: var(--muted); font-size: .78rem; line-height: 1.4; }
.nv-vol { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-size: var(--t-sm); }
.nv-vol input { width: 100%; min-height: 30px; accent-color: var(--accent); }
.nv-vol output { font-family: var(--font-num); font-size: .78rem; color: var(--muted); min-width: 4ch; text-align: right; }
.nv-sound-note { margin: 0; font-size: .74rem; color: var(--muted); line-height: 1.4; }

/* ---------- nueva partida ---------- */
.nv-setup fieldset { border: 0; margin: 14px 0 0; padding: 0; min-width: 0; }
.nv-setup legend { margin-bottom: 6px; font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.nv-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.nv-seg label { position: relative; }
.nv-seg input { position: absolute; opacity: 0; pointer-events: none; }
.nv-seg span {
  display: flex; flex-direction: column; gap: 2px; height: 100%; min-height: 44px; padding: 9px 12px; border-radius: var(--r-md, 12px);
  border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; transition: border-color var(--dur), background var(--dur);
}
.nv-seg span b { font-weight: 600; font-size: var(--t-sm); color: var(--ink); }
.nv-seg span small { font-size: .74rem; color: var(--muted); line-height: 1.35; }
.nv-seg input:checked + span { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); background: var(--surface-2); }
.nv-seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.nv-stat-table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: .84rem; }
.nv-stat-table th { text-align: left; font-weight: 600; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 6px 4px; border-bottom: 1px solid var(--line); }
.nv-stat-table td { padding: 7px 4px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }

/* ---------- portada ---------- */
.nv-hub-art { display: block; margin: 0 0 14px; border-radius: 14px; overflow: hidden; background: var(--nv-room); padding: 14px; }
.nv-hub-art svg { display: block; width: 100%; height: auto; }
.nv-hub-art .sea { fill: #12406A; }
.nv-hub-art .grid { stroke: rgba(196, 224, 246, .2); stroke-width: 1; }
.nv-hub-art .frame { fill: none; stroke: var(--nv-brass); stroke-width: 3; }
.nv-hub-art .coord { fill: var(--nv-brass); font: 600 10px var(--font-num); }
.nv-hub-art .h { fill: #A3B1BE; stroke: #46586A; stroke-width: 2; }
.nv-hub-art .miss { fill: #DCEBF7; opacity: .9; }
.nv-hub-art .hit { fill: #F06A2E; }
.nv-hub-art .ring { fill: none; stroke: #D8B46A; stroke-width: 2; }
.nv-hub-fleet { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px 14px; padding: 0; margin: 8px 0 0; list-style: none; }
.nv-hub-fleet li { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: var(--t-sm); color: var(--ink-2); }
.nv-hub-fleet i { display: inline-flex; gap: 2px; }
.nv-hub-fleet i::before { content: ""; height: 10px; width: calc(var(--n) * 12px); border-radius: 5px 7px 7px 5px; background: linear-gradient(90deg, #6F8193, #A3B1BE); }

/* ============================================================
   Pantallas
   ============================================================ */
@media (max-width: 860px) {
  .nv-layout, .nv-shell[data-phase="placement"] .nv-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "enemy" "own" "side"; }
  .nv-shell[data-phase="placement"] .nv-layout { grid-template-areas: "own" "side"; }
  .nv-shell:not([data-phase="placement"]) .nv-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "enemy enemy" "own side"; }
  .nv-sea-enemy, .nv-shell[data-phase="placement"] .nv-sea-own { --nv-w: min(100%, 600px); }
  .nv-shell:not([data-phase="placement"]) .nv-sea-own .nv-frame { --nv-gut: 13px; padding: 4px 6px 6px 3px; }
  .nv-shell:not([data-phase="placement"]) .nv-sea-own .nv-coords { font-size: .55rem; }
  .nv-shell:not([data-phase="placement"]) .nv-sea-own .nv-sea-head h2 { font-size: .98rem; }
  .nv-shell:not([data-phase="placement"]) .nv-sea-own .nv-sea-sub { display: none; }
  .nv-ships { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width: 560px) {
  .nv-room { margin-left: -8px; margin-right: -8px; padding: 10px 8px 14px; border-radius: 14px; }
  .nv-status { font-size: .86rem; margin-bottom: 8px; }
  .nv-frame { --nv-gut: 15px; padding: 4px 7px 7px 3px; border-radius: 10px; }
  .nv-coords { font-size: .6rem; }
  .nv-sea-head h2 { font-size: 1rem; }
  .nv-sea-sub { font-size: .66rem; }
  .nv-fire input { flex: 1 1 0; width: auto; min-width: 0; }
  .nv-fire-btn { flex: none; }
  .nv-fire label { display: none; }
  .nv-fire-tip { display: none; }
  .nv-fleet { padding: 10px; }
  .nv-fleet li { font-size: .78rem; }
  .nv-pips i { width: 7px; height: 7px; }
  .nv-side { gap: 8px; }
  .nv-dock { padding: 12px 10px; }
  .nv-ship-btn { grid-template-columns: 84px minmax(0, 1fr); gap: 8px; }
  .nv-ship-art { height: 18px; width: calc(var(--len, 3) * 16px); }
  .nv-seg { grid-template-columns: minmax(0, 1fr); }
  .nv-hide-xs { display: none; }
}
@media (max-width: 380px) {
  .nv-shell:not([data-phase="placement"]) .nv-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "enemy" "own" "side"; }
  .nv-shell:not([data-phase="placement"]) .nv-sea-own { --nv-w: min(100%, 250px); }
  .nv-fl-name { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nv-board::before, .nv-cell.is-hit .nv-mk, .nv-cell.is-aim::after, .nv-cell.is-last::before, .nv-cell.is-shake,
  .nv-ship.is-fresh svg, .nv-ship.is-outline, .nv-curtain, .nv-fx::before, .nv-fx::after { animation: none !important; }
  .nv-toast { animation-duration: 2.6s; }
}