/* cazador-v3.css — Cazador de Señales como ESCENA (5-sep-2026, diseño aprobado sobre games/dev-cazador.html ?p=partida&v=1).
   Se carga DESPUÉS de cazador-v2.css y solo cambia la capa visual de la PARTIDA: la lógica (cazador-senales.js), los ids y
   los handlers siguen iguales. La escena es la galería de tiro de feria frontal (assets/cazador/escenas/partida-A3.webp,
   1080×1920): el nombre de la señal va en el letrero de madera, las señales pasan apoyadas en las tres baldas de neón
   y la escopeta (assets/cazador/escenas/escopeta.webp) pivota hacia el dedo con retroceso y fogonazo.
   Todo va bajo `body.cz-partida`, que pone games/cazador/escena.js observando la portada y el fin de partida del juego:
   portada, pausa, oleada y fin se quedan como estaban (se rediseñan aparte). Las posiciones (letrero, baldas, HUD)
   las fija escena.js por fracciones de la imagen; en tablet (W ≥ 700) el HUD escala con --cz-k. */

:root {
  --cz-fd: 'Syne', var(--font-display, sans-serif), sans-serif;
  --cz-fb: 'DM Sans', var(--font-body, sans-serif), sans-serif;
  --cz-k: 1;
  --cz-gold-2: #f3d27a;
}

/* ── escena y capas propias (existen siempre; solo se ven en partida) ── */
.cz-escena { position: fixed; inset: 0; z-index: 0; background: #0a0806 center bottom no-repeat; background-image: url(../assets/cazador/escenas/partida-A3.webp); }
.cz-velo { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(6,5,4,.5) 0%, rgba(6,5,4,0) 12%, rgba(6,5,4,0) 88%, rgba(6,5,4,.55) 100%); }
.cz-anc { position: fixed; z-index: 1; }
body:not(.cz-partida) .cz-escena, body:not(.cz-partida) .cz-velo, body:not(.cz-partida) .fx-vignette, body:not(.cz-partida) .fx-canvas,
body:not(.cz-partida) .cz-escopeta, body:not(.cz-partida) .cz-mira, body.cz-pausa .cz-escopeta, body.cz-pausa .cz-mira { display: none; }
body:not(.cz-partida) .cz-anc, body:not(.cz-partida) #cz-stage { visibility: hidden; }

body.cz-partida { background: #0a0806; }
body.cz-partida .cz-shell { position: relative; z-index: 2; pointer-events: none; background: none; }
body.cz-partida .cz-shell > * { pointer-events: auto; }
body.cz-partida .cz-top { pointer-events: none; display: block; height: 0; }
body.cz-partida .cz-title, body.cz-partida .cz-top-spacer, body.cz-partida .cz-lane, body.cz-partida .cz-hud-acc { display: none; }
/* pausa y fin cubren toda la pantalla (en tablet la cáscara solo mide 460px) */
body.cz-partida .cz-pauseov, body.cz-partida .cz-over { position: fixed; }

/* La pausa solo con la partida en marcha (cazador-senales.js pone body.cz-en-juego
   en startRun y lo quita en gameOver). Antes seguía en la esquina de la caja
   registradora sin hacer nada (1-oct). Gana a controles-juego.css por especificidad. */
body:not(.cz-en-juego) #cz-pause { display: none !important; }

/* ── pausa: chip de madera arriba a la derecha, a la altura del Volver ── */
body.cz-partida .cz-pause {
  position: fixed; top: max(10px, env(safe-area-inset-top, 0px)); right: 14px; z-index: 5; pointer-events: auto;
  width: 38px; height: 38px; border-radius: 0; color: #f3e7c9; font-size: 1.1rem;
  transform: scale(var(--cz-k)); transform-origin: 100% 0;
  background: linear-gradient(180deg, #3a2a18, #1c130a); border: 1px solid rgba(212,168,67,.55);
  box-shadow: inset 0 1px 0 rgba(255,220,150,.3), 0 4px 10px rgba(0,0,0,.6);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}

/* el "¿algo falla?" (feedback.js) va en la fila del Volver, a la izquierda de la pausa: bajo ella taparía el chip de puntos */
body.cz-partida .vp-fb-btn { top: calc(max(10px, env(safe-area-inset-top, 0px)) + (38px * var(--cz-k) - 30px) / 2); right: calc(22px + 38px * var(--cz-k)); }

/* ── HUD: chips de madera y latón, fila fija bajo el Volver ── */
body.cz-partida .cz-hud {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 54px); z-index: 5; width: var(--cz-hw, 362px);
  transform: translateX(-50%) scale(var(--cz-k)); transform-origin: 50% 0;
  display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0; background: none; border: 0; border-radius: 0;
}
body.cz-partida .cz-hud-cell, body.cz-partida .cz-hud-lives {
  display: flex; flex-direction: row; align-items: center; gap: 6px; min-width: 0; min-height: 34px; padding: 6px 8px;
  font: 800 12px/1 var(--cz-fb); letter-spacing: .06em; text-transform: uppercase; color: #f3e7c9; white-space: nowrap;
  background: linear-gradient(180deg, #3a2a18, #1c130a); border: 1px solid rgba(212,168,67,.55);
  box-shadow: inset 0 1px 0 rgba(255,220,150,.3), 0 4px 10px rgba(0,0,0,.6);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
body.cz-partida .cz-hud-cell { flex: 0 0 auto; }
body.cz-partida .cz-hud-cell.cz-hud-acc { display: none; }   /* precisión no cabe en la fila del móvil: va en el fin de partida */
body.cz-partida .cz-hud-l { font: inherit; letter-spacing: inherit; color: inherit; }
body.cz-partida .cz-hud-v { font: 900 14px/1 var(--cz-fd); color: var(--cz-gold-2); letter-spacing: 0; font-variant-numeric: tabular-nums; }
body.cz-partida .cz-hud-score .cz-hud-v { color: var(--cz-gold-2); }
/* vidas = cartuchos (el juego pinta ❤/🖤 en cada span; aquí el texto se oculta y el span es el cartucho) */
body.cz-partida .cz-hud-lives { gap: 4px; padding: 6px 9px; }
body.cz-partida .cz-heart {
  display: block; width: 11px; height: 20px; font-size: 0; line-height: 0; color: transparent; overflow: hidden; border-radius: 3px 3px 4px 4px;
  background: linear-gradient(180deg, #ffb347, #c0392b 30%, #8e1b12); box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 2px 4px rgba(0,0,0,.6);
}
body.cz-partida .cz-heart-off { opacity: 1; background: #2a2118; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
/* Los cartuchos no se encogen nunca. A 360 px la fila pedía 355 px y había 332:
   las vidas se aplastaban a 30 px y desaparecían. En móviles estrechos se
   aprietan relleno y huecos (la letra sigue a 12 px). */
body.cz-partida .cz-hud-lives { flex: 0 0 auto; }
@media (max-width: 379px) {
  body.cz-partida .cz-hud { gap: 3px; }
  body.cz-partida .cz-hud-cell { gap: 4px; padding: 6px 5px; letter-spacing: .02em; }
  body.cz-partida .cz-hud-lives { gap: 3px; padding: 6px 6px; }
}

/* ── la regla, dentro del letrero de madera (rect y tamaño de letra por JS) ── */
body.cz-partida .cz-rule {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 6px 10px; text-align: center; color: #fff7e6; background: none; border: 0; border-radius: 0;
}
body.cz-partida .cz-rule-pre { font: 800 max(12px, .55em)/1 var(--cz-fb); letter-spacing: .24em; text-transform: uppercase; color: var(--cz-gold-2); text-shadow: 0 0 8px rgba(243,210,122,.6); }
body.cz-partida .cz-rule-name { font: 900 1em/1.05 var(--cz-fd); letter-spacing: -.01em; color: #fff7e6; text-shadow: 0 2px 0 rgba(0,0,0,.7), 0 0 18px rgba(255,200,120,.35); text-wrap: balance; }
body.cz-partida .cz-rule-fam, body.cz-partida .cz-rule-fam[class*="cz-fam-"] {
  font: 800 max(12px, .5em)/1 var(--cz-fb); letter-spacing: .12em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; border: 0;
  color: #1a1005; background: linear-gradient(180deg, #fff0c0, #d4a843); margin-top: 2px;
}

/* ── escenario: cubre la pantalla bajo el HUD (disparo al aire en cualquier sitio); las señales, sobre las baldas ── */
#cz-stage { position: fixed; left: 0; margin: 0; flex: none; min-height: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; }
body.cz-partida .cz-sign { width: var(--cz-sw, 76px); height: var(--cz-sw, 76px); filter: drop-shadow(0 6px 5px rgba(0,0,0,.65)); cursor: crosshair; }
body.cz-partida .cz-sign::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -6%; height: 12%; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 70%); }
/* el golpe (juice .jx-pop) y la muerte (.cz-sign-die) animan `transform` en el botón y pisarían el translate3d con el que el
   juego lo mueve (la señal saltaría al borde izquierdo): aquí se animan sobre la imagen y la señal se queda en su balda */
body.cz-partida .cz-sign img, body.cz-partida .cz-sign .cz-ph-code { transform-origin: 50% 100%; }
body.cz-partida .cz-sign.jx-pop { animation: none; }
body.cz-partida .cz-sign.jx-pop img, body.cz-partida .cz-sign.jx-pop .cz-ph-code { animation: czPopImg .46s cubic-bezier(.22,1,.36,1); }
@keyframes czPopImg { 0% { transform: scale(1); } 12% { transform: scale(.965); } 38% { transform: scale(1.14); } 62% { transform: scale(.985); } 82% { transform: scale(1.02); } 100% { transform: scale(1); } }
body.cz-partida .cz-sign.cz-sign-die { animation: none; opacity: 0; transition: opacity .22s ease-out; }
body.cz-partida .cz-sign.cz-sign-die img, body.cz-partida .cz-sign.cz-sign-die .cz-ph-code { animation: czDieImg .22s ease-out forwards; }
@keyframes czDieImg { to { transform: scale(1.35); } }
body.cz-partida .cz-sign.cz-ph { border-radius: 14px; }
body.cz-partida .cz-float { font: 900 22px/1 var(--cz-fd); color: var(--cz-gold-2); text-shadow: 0 2px 0 #5a3d08, 0 0 14px rgba(243,210,122,.8); }

/* aviso de señal (código · nombre): chip de madera bajo el letrero */
body.cz-partida .cz-toast {
  top: var(--cz-toast-top, 8px); padding: 7px 14px; border-radius: 0; font: 700 calc(12px * var(--cz-k))/1.2 var(--cz-fb); color: #f3e7c9;
  background: linear-gradient(180deg, #3a2a18, #1c130a); border: 1px solid rgba(212,168,67,.55); box-shadow: 0 4px 10px rgba(0,0,0,.6);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
body.cz-partida .cz-toast b { color: var(--cz-gold-2); }
body.cz-partida .cz-toast-bad { border-color: rgba(255,90,74,.7); }
body.cz-partida .cz-toast-bad b { color: #ff8a7a; }
/* rótulo de oleada: centrado en toda la pantalla (se rediseña aparte) */
body.cz-partida .cz-wavebanner { position: fixed; inset: 0; }
body.cz-partida .cz-wb-num { font: 900 calc(2.4rem * var(--cz-k))/1 var(--cz-fd); color: var(--cz-gold-2); text-shadow: 0 4px 0 #5a3d08, 0 0 30px rgba(243,210,122,.7); }
body.cz-partida .cz-wb-sub { font: 800 calc(.8rem * var(--cz-k))/1 var(--cz-fb); letter-spacing: .2em; color: #fff; text-shadow: 0 1px 4px #000; }

/* ── escopeta: objeto generado (nogal y acero), pivota en la culata hacia el punto de disparo y retrocede ── */
.cz-escopeta {
  position: fixed; right: -12%; bottom: -9%; z-index: 2; width: min(64vw, 360px); pointer-events: none; transform-origin: 92% 96%;
  transform: rotate(var(--ang, 0deg)) translate(var(--rec, 0px), var(--rec, 0px)); transition: transform .09s ease-out;
  filter: drop-shadow(-10px 6px 14px rgba(0,0,0,.6));
}
.cz-escopeta img { width: 100%; display: block; }
.cz-fogonazo {
  position: fixed; z-index: 3; width: 120px; height: 120px; margin: -60px 0 0 -60px; pointer-events: none; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255,250,220,1), rgba(255,190,80,.85) 30%, rgba(255,120,30,.35) 55%, transparent 70%);
  animation: czFog .18s ease-out forwards;
}
@keyframes czFog { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
/* mira: sigue el dedo/puntero */
.cz-mira { position: fixed; z-index: 3; width: 54px; height: 54px; margin: -27px 0 0 -27px; pointer-events: none; opacity: .9; }
.cz-mira::before, .cz-mira::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.cz-mira::before { border: 2px solid var(--cz-gold-2); box-shadow: 0 0 10px rgba(243,210,122,.8), inset 0 0 8px rgba(243,210,122,.4); }
.cz-mira::after { inset: 20px; background: var(--cz-gold-2); box-shadow: 0 0 8px rgba(243,210,122,.9); }
.cz-mira i { position: absolute; left: 50%; top: -8px; width: 2px; height: 14px; background: var(--cz-gold-2); margin-left: -1px; }
.cz-mira i:nth-child(2) { top: auto; bottom: -8px; }
.cz-mira i:nth-child(3) { top: 50%; left: -8px; width: 14px; height: 2px; margin: -1px 0 0; }
.cz-mira i:nth-child(4) { top: 50%; left: auto; right: -8px; width: 14px; height: 2px; margin: -1px 0 0; }

@media (prefers-reduced-motion: reduce) { .cz-escopeta { transition: none; } .cz-fogonazo { animation: none; opacity: 0; } }

/* ═══════════════════════════════════════════════════════════════════════════
   FIN DE PARTIDA · LA CAJA REGISTRADORA — 28-sep-2026
   La elegida por Nico (caza-fin→2 del artefacto «Tres opciones por pantalla»).
   Antes se veía la foto sin su diseño: sin «FIN DE LA CAZA», el número flotando
   en la madera, y en tablet toda la pantalla encajada en 460 px (la capa era
   `position:absolute` dentro de la cáscara del juego en cuanto se quitaba
   body.cz-partida, 350 ms después de aparecer). Ahora:
   · Título en oro arriba y, debajo, el récord real (vp_caz_best) o el sello
     de NUEVO RÉCORD.
   · Los puntos en un visor verde encima del visor de la caja. La foto y el
     visor los coloca cazador-senales.js (layoutFin) en píxeles.
   · Tres cifras con su color: precisión verde, dianas azul, combo naranja.
   · OTRA PARTIDA en oro con brillo, COMPARTIR oscuro y «Salir» como enlace.
   Solo se anima transform/opacity (60 fps).
   ═════════════════════════════════════════════════════════════════════════ */
/* Portada, pausa y fin cubren SIEMPRE la pantalla entera: dentro de la
   cáscara (max-width 460 px) en un iPad salían como una columna de móvil. */
.cz-portada, .cz-pauseov, .cz-over { position: fixed; }

.cz-over {
  inset: 0; padding: 0; display: block; overflow: hidden;
  background: #060608; backdrop-filter: none;
  --fin-verde: #4ade80; --fin-azul: #4aa3ff; --fin-naranja: #ff9a3c; --fin-oro: #f0d089;
}
.cz-fin-escena { position: absolute; inset: 0; overflow: hidden; }
.cz-fin-foto {
  position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; display: block;
  /* si la foto no llega a un borde, se funde con el negro en vez de cortar en seco */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
/* Velos: arriba para que el título se lea, abajo para las cifras y botones. */
.cz-over .cz-esc-velo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,6,8,.96) 0%, rgba(6,6,8,.72) 12%, rgba(6,6,8,0) 26%),
    linear-gradient(0deg, rgba(6,6,8,.97) 0%, rgba(6,6,8,.85) 22%, rgba(6,6,8,0) 44%);
}

/* ── Cabecera: título en oro repujado + récord ── */
.cz-fin-cab {
  position: absolute; left: 0; right: 0; z-index: 3; text-align: center;
  top: calc(env(safe-area-inset-top, 0px) + clamp(46px, 6.2vh, 90px));
  padding: 0 16px; pointer-events: none;
}
.cz-fin-titulo {
  margin: 0; font-family: var(--cz-fd); font-weight: 800; line-height: .98; letter-spacing: .02em;
  font-size: clamp(1.9rem, min(9vw, 5vh), 4.4rem);
  background: linear-gradient(180deg, #fff6d6 0%, #f3d27a 42%, #d9a53a 70%, #9a6a14 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #3a2708) drop-shadow(0 0 18px rgba(240,190,90,.45));
}
.cz-over-marca {
  display: inline-flex; align-items: center; gap: .55em; margin-top: clamp(8px, 1.3vh, 18px);
  padding: .62em 1.1em; border-radius: 999px; white-space: nowrap;
  font-family: var(--cz-fb); font-weight: 800; font-size: clamp(.86rem, 1.7vh, 1.25rem); letter-spacing: .04em;
  color: rgba(245,243,239,.82);
  background: linear-gradient(180deg, rgba(30,23,14,.92), rgba(12,9,6,.94));
  border: 1px solid rgba(240,208,137,.45);
  box-shadow: 0 6px 18px rgba(0,0,0,.55), 0 0 16px rgba(212,168,67,.18);
}
.cz-over-marca:empty { display: none; }
.cz-over-marca b { font-family: var(--cz-fd); color: var(--fin-oro, #f0d089); font-size: 1.08em; letter-spacing: .03em; }
.cz-fin-rec-l { text-transform: uppercase; letter-spacing: .12em; font-size: max(12px, .86em); color: rgba(245,243,239,.66); }
.cz-fin-falta { color: rgba(245,243,239,.62); font-weight: 700; }
/* Nuevo récord: la píldora se vuelve oro y el sello rebota. */
.cz-fin-record .cz-over-marca {
  background: linear-gradient(180deg, #ffe9ae, #d4a843); border-color: #fff0c4; color: #3a2708;
  box-shadow: 0 6px 26px rgba(212,168,67,.6), inset 0 1px 0 rgba(255,255,255,.7);
}
.cz-fin-record .cz-fin-falta { color: rgba(58,39,8,.7); }
/* El sello va recto y en la misma línea que «antes X» (Nico, 29-sep: «lo que
   pone NUEVO RÉCORD está doblado»: tenía un giro de -2° de sello de goma y,
   con dos tipos de letra de alto distinto, parecía torcido y descolocado). */
.cz-over-marca > * { line-height: 1; }
.cz-over-marca .cz-sello { font-family: var(--cz-fd); font-weight: 800; letter-spacing: .12em; display: inline-block;
  animation: czSello .5s cubic-bezier(.34,1.56,.64,1) both; }
.cz-over-marca .cz-sello + .cz-fin-falta::before { content: "·"; margin-right: .55em; opacity: .7; }
@keyframes czSello { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: none; } }

/* ── El visor de la caja: los puntos en verde luminoso ── */
.cz-fin-lcd {
  position: absolute; z-index: 2; left: 0; top: 0; width: 0; height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  container-type: size; border-radius: clamp(6px, 1.2vw, 12px);
  background: radial-gradient(120% 90% at 50% 40%, #11532e 0%, #0a3219 55%, #041a0c 100%);
  border: 2px solid #43e585;
  box-shadow: 0 0 0 3px rgba(10,40,20,.8), 0 0 26px rgba(67,229,133,.55), inset 0 0 22px rgba(67,229,133,.35), inset 0 2px 0 rgba(255,255,255,.15);
}
.cz-fin-lcd .cz-over-score {
  display: block; font-family: var(--cz-fd); font-weight: 800; line-height: 1; white-space: nowrap;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
  font-size: min(44cqh, 21cqw); color: #8dffbe;
  text-shadow: 0 0 10px rgba(67,229,133,.9), 0 0 26px rgba(67,229,133,.55);
}
.cz-fin-lcd .cz-over-scorelbl {
  display: block; margin-top: 4cqh; font-family: var(--cz-fb); font-weight: 800; text-transform: uppercase;
  font-size: max(12px, min(12cqh, 6.4cqw)); letter-spacing: .26em; color: #a9f3c9; opacity: .9;
}

/* ── Pie: cifras y botones. Crece con la pantalla (tablet) ── */
.cz-over-pie {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  width: min(100%, 640px); margin: 0 auto;
  padding: 0 clamp(14px, 3vw, 28px) calc(env(safe-area-inset-bottom, 0px) + clamp(10px, 2vh, 30px));
}
.cz-over .cz-over-near { margin: 0 0 1vh; text-align: center; }
.cz-over .cz-over-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1.4vw, 14px); margin: 0 0 clamp(12px, 2vh, 26px); }
.cz-over .cz-over-stat {
  --c: #fff; text-align: center; padding: clamp(8px, 1.3vh, 18px) 4px; border-radius: 12px; min-width: 0;
  background: linear-gradient(180deg, rgba(22,19,15,.94), rgba(8,7,6,.96));
  border: 1.5px solid color-mix(in srgb, var(--c) 70%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--c) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.5);
}
.cz-over .cz-st-prec { --c: var(--fin-verde); }
.cz-over .cz-st-dian { --c: var(--fin-azul); }
.cz-over .cz-st-combo { --c: var(--fin-naranja); }
.cz-over .cz-over-statn {
  display: block; font-family: var(--cz-fd); font-weight: 800; line-height: 1.05; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-size: clamp(1.25rem, min(6.4vw, 3.1vh), 2.4rem);
  color: var(--c); text-shadow: 0 0 14px color-mix(in srgb, var(--c) 55%, transparent);
}
.cz-over .cz-over-statl {
  display: block; margin-top: .35em; font-family: var(--cz-fb); font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; font-size: clamp(.75rem, 1.4vh, .95rem); line-height: 1.1; text-wrap: balance; color: rgba(245,243,239,.78);
}
.cz-over .cz-over-btns { margin: 0; display: flex; flex-direction: column; align-items: stretch; }
.cz-over .cz-play {
  font-family: var(--cz-fd); font-weight: 800; letter-spacing: .1em; color: #2a1c05;
  padding: clamp(14px, 2vh, 26px) 15px; font-size: clamp(1rem, 2vh, 1.55rem); border-radius: 14px;
  background: linear-gradient(180deg, #ffeab0 0%, #f0c96a 45%, #d4a843 100%);
  box-shadow: 0 0 24px rgba(240,200,110,.5), 0 8px 22px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.75), inset 0 -3px 0 rgba(120,80,10,.45);
}
.cz-over .cz-btn2 {
  margin-top: clamp(9px, 1.3vh, 16px); padding: clamp(12px, 1.7vh, 22px) 12px;
  font-family: var(--cz-fd); font-weight: 800; letter-spacing: .1em; font-size: clamp(.92rem, 1.75vh, 1.35rem);
  color: #f3e2bd; border-radius: 14px;
  background: linear-gradient(180deg, rgba(34,30,26,.96), rgba(14,12,10,.97));
  border: 1px solid rgba(240,208,137,.32);
}
.cz-fin-salir {
  align-self: center; margin-top: clamp(4px, .8vh, 14px); padding: 12px 30px; min-height: 44px; cursor: pointer;
  background: none; border: 0; color: rgba(245,243,239,.78);
  font-family: var(--cz-fb); font-weight: 700; font-size: clamp(.9rem, 1.7vh, 1.25rem);
  text-decoration: underline; text-underline-offset: 4px; touch-action: manipulation;
}
.cz-fin-salir:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { .cz-over-marca .cz-sello { animation: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   PORTADA, PAUSA Y OLEADA con su escena (22-sep-2026)
   Las tres estaban generadas y el juego seguía enseñándolas sobre un fondo
   oscuro con desenfoque. Aquí solo cambia el decorado: la tarjeta, sus textos
   y sus botones son los mismos, y la lógica no se toca.
   ═════════════════════════════════════════════════════════════════════════ */

/* La portada es el chaval apuntando desde el mostrador de la caseta. */
.cz-portada {
  background: #07060a center/cover no-repeat url("../assets/cazador/escenas/menu.webp");
  backdrop-filter: none;
}
/* La pausa es la opción 1 que eligió Nico, «La caseta»: has soltado la escopeta
   en el mostrador y el muestrario de señales se queda ahí esperando. */
.cz-pauseov {
  background: #07060a center/cover no-repeat url("../assets/cazador/escenas/menu-2.webp");
  backdrop-filter: none;
}
/* Velo suave y solo donde va el texto: antes se comía la caseta entera y la
   pantalla de salir quedaba en una caja gris sobre negro (Nico, 22-sep: «la
   pantalla cuando le das a salir es un destrozo»). */
.cz-portada::before, .cz-pauseov::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,5,8,.30) 0%, rgba(6,5,8,.20) 34%, rgba(6,5,8,.72) 72%, rgba(6,5,8,.93) 100%);
}
/* La tarjeta, como la madera del mostrador: no un rectángulo gris. */
.cz-portada-card, .cz-pause-card {
  position: relative; z-index: 1;
  background: linear-gradient(180deg, rgba(38,26,16,.90), rgba(14,10,8,.95));
  border: 2px solid rgba(212,168,67,.55);
  box-shadow: 0 0 0 1px rgba(255,214,130,.18) inset, 0 20px 50px rgba(0,0,0,.65), 0 0 40px rgba(212,168,67,.12);
  backdrop-filter: blur(3px);
}
/* El rótulo del juego, en su arte. */
.cz-portada-rotulo {
  height: clamp(54px, 15vw, 84px); margin: -4px auto 4px;
  background: center/contain no-repeat url("../assets/cazador/escenas/rotulo-cazador.webp");
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.7));
}
/* El nombre ya lo dice el rótulo dibujado: el <h1> se queda para quien usa
   lector de pantalla, pero no se pinta dos veces. */
.cz-portada-rotulo + .cz-portada-title {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* La pausa NO lleva tarjeta: el mostrador ya es el decorado, y una caja encima
   lo tapaba. El título, las cifras y los botones van sueltos sobre la escena.
   (Sobrescribe el .cz-pause-card común de cazador-v2.css.) */
.cz-pauseov .cz-pause-card {
  background: none; border: 0; box-shadow: none; backdrop-filter: none;
  padding: 0; width: min(92vw, 420px);
  display: flex; flex-direction: column; align-items: stretch; gap: 14px;
}
/* «PAUSA» en oro repujado, como el rótulo de la caseta. */
.cz-pauseov .cz-pause-card h2 {
  margin: 0; font-family: var(--font-display, Georgia, serif); font-weight: 900;
  font-size: clamp(1.9rem, 9vw, 2.9rem); letter-spacing: .12em; line-height: 1;
  background: linear-gradient(180deg, #fff6d6, #f3d27a 45%, #c9952c 72%, #8a5f10);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #3a2708) drop-shadow(0 8px 18px rgba(0,0,0,.75));
}
/* Lo cazado: tres chapas oscuras sobre la escena, legibles sobre cualquier
   punto del dibujo porque llevan su propio fondo. */
.cz-pause-stats { display: flex; gap: 10px; }
.cz-pause-stats .cz-pstat {
  flex: 1; min-width: 0; padding: 10px 6px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(26,20,14,.92), rgba(10,8,6,.95));
  border: 1px solid rgba(212,168,67,.42);
  box-shadow: 0 8px 22px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,214,130,.14);
}
.cz-pause-stats .cz-pstat-n {
  display: block; font-family: var(--font-display, Georgia, serif); font-weight: 900;
  font-variant-numeric: tabular-nums; font-size: clamp(1rem, 4.6vw, 1.5rem);
  line-height: 1.05; color: #f0d089;
  /* Una cifra NUNCA se parte: «1.240» se leía «1.24 / 0». Si no cabe, encoge. */
  white-space: nowrap; overflow: hidden; text-overflow: clip;
}
.cz-pause-stats .cz-pstat-l {
  display: block; margin-top: 3px; font-size: .75rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(245,243,239,.7);
}
/* Los botones, con el nombre de la caseta y sin el margen del botón común
   (aquí el hueco lo pone el `gap`). */
.cz-pauseov .cz-play, .cz-pauseov .cz-btn2 { margin: 0; letter-spacing: .08em; }
.cz-pauseov .cz-play {
  background: linear-gradient(180deg, #ffe9ae, #d4a843);
  box-shadow: 0 8px 26px rgba(212,168,67,.45), inset 0 1px 0 rgba(255,255,255,.7);
}
.cz-pauseov .cz-btn2 {
  background: linear-gradient(180deg, rgba(26,20,14,.92), rgba(10,8,6,.95));
  border-color: rgba(212,168,67,.32); color: #f3e2bd;
}
/* En tablet la escena es enorme: la columna crece con ella en vez de quedarse
   en el ancho de un móvil en mitad del iPad (pantallas-responsive-ipad). */
@media (min-width: 700px) {
  .cz-pauseov .cz-pause-card { width: min(70vw, 560px); gap: 18px; }
  .cz-pause-stats .cz-pstat { padding: 14px 8px; }
  .cz-pause-stats .cz-pstat-n { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
  .cz-pause-stats .cz-pstat-l { font-size: .85rem; }
}

/* El cartel de la oleada: el rótulo colgado de cadenas de la feria. El banner
   sigue siendo la capa a pantalla completa de siempre (la anima `czWave`); el
   cartel entra como pseudo-elemento detrás de las letras, así no hay que tocar
   ni el HTML ni la animación. */
/* El cartel cuelga de dos cadenas: la madera donde va el texto ocupa solo la
   mitad de abajo de la imagen. Por eso el dibujo se sube, para que el centro de
   la MADERA caiga donde el juego centra sus letras. */
.cz-wavebanner { --cz-cartel: min(74vw, 300px); }
.cz-wavebanner::before {
  content: ""; position: absolute; left: 50%;
  top: calc(50% - var(--cz-cartel) * 456 / 279 * 0.19);
  width: var(--cz-cartel); aspect-ratio: 279/456;
  transform: translate(-50%, -50%);
  background: center/100% 100% no-repeat url("../assets/cazador/escenas/oleada-cartel.webp");
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.6));
}
.cz-wavebanner .cz-wb-num, .cz-wavebanner .cz-wb-sub { position: relative; z-index: 1; max-width: calc(var(--cz-cartel) * 0.80); text-align: center; text-wrap: balance; }
.cz-wavebanner .cz-wb-num { font-size: clamp(1.35rem, 7.2vw, 1.9rem); white-space: nowrap;
  text-shadow: 0 3px 0 rgba(0,0,0,.55), 0 0 26px rgba(255,190,80,.65); }
.cz-wb-sub { color: #f3e2bd; text-shadow: 0 2px 8px rgba(0,0,0,.9); }

/* Fin de un reto (lado del retado): el veredicto va en la misma línea que el marcador */
.cz-over .cz-reto-info .cz-reto-verd { display: inline; margin: 0; font: 800 1.08em var(--cz-fd); letter-spacing: .03em; }
/* La píldora «★ NUEVO RÉCORD · antes 1.243» se salía por la derecha a 360 px */
@media (max-width: 379px) {
  .cz-over-marca { gap: .4em; padding: .62em .8em; max-width: calc(100vw - 24px); }
  .cz-over-marca .cz-sello { letter-spacing: .05em; }
  .cz-over-marca .cz-sello + .cz-fin-falta::before { margin-right: .4em; }
}