/* cazador-aprende.css — el Cazador que ENSEÑA (28-sep-2026).
   · .cz-ap        el cartel que para la caseta al fallar (señal, familia, ¿quién manda?, te afecta)
   · .cz-fig       las figuras de cartón de «¿QUIÉN MANDA?»
   · .cz-ap-panel  el panel complementario con silueta de vehículo, e .cz-insignia «tú vas en…»
   Color con significado: VERDE lo que te pedían / lo que manda, ROJO lo que has disparado, ORO la clave,
   AZUL lo que dice la norma. Todo escala con --cz-k (tablet). Solo se anima transform/opacity. */

:root {
  --ap-verde: #4ade80; --ap-verde-2: #2d8b4e;
  --ap-rojo: #ff5a4a;  --ap-rojo-2: #b3261e;
  --ap-oro: #f3d27a;   --ap-oro-2: #d4a843;
  --ap-azul: #5b9dff;
  --ap-crema: #fff7e6;
  --ap-madera: linear-gradient(180deg, #4a321b 0%, #33210f 55%, #241609 100%);
  --ap-veta: repeating-linear-gradient(94deg, rgba(255,210,150,.035) 0 2px, transparent 2px 9px, rgba(0,0,0,.06) 9px 11px, transparent 11px 19px);
  --ap-chaflan: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}

/* ─────────────────────────── el cartel ─────────────────────────── */
.cz-ap {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  padding: max(64px, env(safe-area-inset-top, 0px) + 56px) 12px max(16px, env(safe-area-inset-bottom, 0px) + 12px);
  background: radial-gradient(ellipse at 50% 45%, rgba(20,12,4,.55), rgba(4,3,2,.86) 70%);
  opacity: 0; transition: opacity .18s ease-out; overflow-y: auto; -webkit-tap-highlight-color: transparent;
}
.cz-ap[hidden] { display: none; }
.cz-ap.cz-ap-in { opacity: 1; }
body.cz-ap-on .cz-toast { opacity: 0 !important; }

.cz-ap-carta {
  position: relative; width: min(100%, calc(420px * var(--cz-k, 1))); margin: auto;
  padding: calc(14px * var(--cz-k, 1)) calc(14px * var(--cz-k, 1)) calc(10px * var(--cz-k, 1));
  color: var(--ap-crema); font-family: var(--cz-fb, 'DM Sans', sans-serif);
  background: var(--ap-veta), var(--ap-madera);
  clip-path: var(--ap-chaflan);
  box-shadow: inset 0 0 0 2px rgba(243,210,122,.75), inset 0 0 0 5px #1a1006, inset 0 0 0 6px rgba(243,210,122,.35), inset 0 2px 0 7px rgba(255,220,150,.08);
  transform: translateY(14px) scale(.94); transition: transform .26s cubic-bezier(.2,1.2,.3,1);
}
/* el resplandor de oro va en un hermano por detrás (clip-path recorta las sombras) */
.cz-ap-carta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.cz-ap.cz-ap-in .cz-ap-carta { transform: none; }
.cz-ap-in .cz-ap-carta { filter: drop-shadow(0 0 22px rgba(243,210,122,.28)) drop-shadow(0 10px 18px rgba(0,0,0,.6)); }

.cz-ap-cab { text-align: center; margin-bottom: calc(10px * var(--cz-k, 1)); line-height: 1; }
.cz-ap-kicker {
  display: inline-block; font: 800 calc(12px * var(--cz-k, 1))/1 var(--cz-fb, sans-serif); letter-spacing: .22em; text-transform: uppercase;
  color: #fff; padding: 5px 10px; margin-bottom: 7px; background: linear-gradient(180deg, var(--ap-rojo), var(--ap-rojo-2));
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%);
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.cz-ap-cab b {
  display: block; font: 900 calc(22px * var(--cz-k, 1))/1.05 var(--cz-fd, 'Syne', sans-serif); letter-spacing: -.01em; text-transform: uppercase;
  color: var(--ap-oro); text-shadow: 0 2px 0 #5a3d08, 0 0 18px rgba(243,210,122,.55);
}

/* las dos señales, lado a lado */
.cz-ap-par { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: calc(6px * var(--cz-k, 1)); }
.cz-ap-par:has(> .cz-ap-lado:only-child) { grid-template-columns: minmax(0, 60%); justify-content: center; }
.cz-ap-lado { margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: calc(6px * var(--cz-k, 1)); text-align: center; }
.cz-ap-lado figcaption {
  font: 900 calc(12px * var(--cz-k, 1))/1 var(--cz-fb, sans-serif); letter-spacing: .12em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px;
}
.cz-ap-ok figcaption { color: #062812; background: linear-gradient(180deg, #9af5b8, var(--ap-verde)); box-shadow: 0 0 12px rgba(74,222,128,.55); }
.cz-ap-mal figcaption { color: #fff; background: linear-gradient(180deg, #ff8b7e, var(--ap-rojo-2)); box-shadow: 0 0 12px rgba(255,90,74,.5); }
.cz-ap-marco {
  position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 14px;
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.10), rgba(0,0,0,.35) 72%), #140d06;
}
.cz-ap-ok .cz-ap-marco { box-shadow: inset 0 0 0 2px var(--ap-verde), 0 0 22px rgba(74,222,128,.45), inset 0 0 26px rgba(74,222,128,.22); }
.cz-ap-mal .cz-ap-marco { box-shadow: inset 0 0 0 2px var(--ap-rojo), 0 0 22px rgba(255,90,74,.42), inset 0 0 26px rgba(255,90,74,.2); }
.cz-ap-senal { width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.cz-ap-nom { font: 800 calc(13.5px * var(--cz-k, 1))/1.18 var(--cz-fb, sans-serif); color: var(--ap-crema); text-wrap: balance; }
.cz-ap-ok .cz-ap-nom { color: #c9ffd9; }
.cz-ap-mal .cz-ap-nom { color: #ffd0ca; }
.cz-ap-cod {
  font: 800 calc(12px * var(--cz-k, 1))/1 var(--cz-fb, sans-serif); letter-spacing: .06em; color: var(--ap-oro);
  padding: 3px 7px; border: 1px solid rgba(243,210,122,.55); border-radius: 4px; background: rgba(0,0,0,.3);
}
.cz-ap-vs {
  align-self: center; margin-top: calc(-18px * var(--cz-k, 1)); width: calc(30px * var(--cz-k, 1)); height: calc(30px * var(--cz-k, 1)); border-radius: 50%;
  display: grid; place-items: center; font: 900 calc(11px * var(--cz-k, 1))/1 var(--cz-fd, sans-serif); color: #1a1005;
  background: radial-gradient(circle at 35% 30%, #fff3c4, var(--ap-oro-2)); box-shadow: 0 0 14px rgba(243,210,122,.6), 0 2px 0 #5a3d08;
}

/* la clave (oro) y la norma (azul) */
.cz-ap-clave, .cz-ap-norma { margin-top: calc(10px * var(--cz-k, 1)); padding: calc(8px * var(--cz-k, 1)) calc(10px * var(--cz-k, 1)); clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px); }
.cz-ap-clave { color: #1a1005; background: linear-gradient(180deg, #fff0c0, var(--ap-oro-2)); }
.cz-ap-clave span, .cz-ap-norma span { display: block; font: 900 calc(12px * var(--cz-k, 1))/1 var(--cz-fb, sans-serif); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 4px; }
.cz-ap-clave span { color: #6b4708; }
.cz-ap-clave p { margin: 0; font: 800 calc(15px * var(--cz-k, 1))/1.3 var(--cz-fb, sans-serif); text-wrap: pretty; }
.cz-ap-norma { background: rgba(10,18,36,.72); box-shadow: inset 0 0 0 1px rgba(91,157,255,.55); }
.cz-ap-norma span { color: var(--ap-azul); }
.cz-ap-norma p { margin: 0; font: 600 calc(15px * var(--cz-k, 1))/1.34 var(--cz-fb, sans-serif); color: #e6eeff; text-wrap: pretty; }

.cz-ap-pie { margin-top: calc(10px * var(--cz-k, 1)); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cz-ap-mecha { width: 100%; height: 5px; border-radius: 3px; background: rgba(0,0,0,.45); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(243,210,122,.25); }
.cz-ap-mecha i { display: block; height: 100%; transform-origin: 0 50%; background: linear-gradient(90deg, #ffb347, var(--ap-oro)); box-shadow: 0 0 8px rgba(243,210,122,.8); }
.cz-ap-pie span { font: 700 calc(12px * var(--cz-k, 1))/1 var(--cz-fb, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,247,230,.6); }
/* 5-oct: el cartel espera a «Seguir» (ya no se va solo). Botón oro de la casa. */
.cz-ap-seguir {
  align-self: stretch; min-height: calc(48px * var(--cz-k, 1)); padding: .7em 1.4em; border: 0; border-radius: 999px; cursor: pointer;
  font: 900 calc(16px * var(--cz-k, 1))/1 var(--cz-fb, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: #1a1005;
  background: linear-gradient(180deg, #fff0c0, var(--ap-oro, #f3d27a) 38%, #d4a843);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(0,0,0,.25), 0 0 18px rgba(243,210,122,.45);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.cz-ap-seguir:active { transform: scale(.98); }
.cz-ap-seguir:focus-visible { outline: 3px solid #fff7e6; outline-offset: 3px; }

/* Móviles de 800-880 px de alto (360×800, 390×844): con la letra de lectura a
   15 px (1-oct) el cartel más largo se salía casi 100 px y había que hacer
   scroll. Se aprieta el decorado, no la letra: marcos más pequeños, menos aire. */
@media (max-width: 600px) and (max-height: 880px) {
  .cz-ap { padding-top: max(54px, env(safe-area-inset-top, 0px) + 50px); padding-bottom: max(8px, env(safe-area-inset-bottom, 0px) + 6px); }
  .cz-ap-carta { padding: 11px 12px 8px; }
  .cz-ap-cab { margin-bottom: 6px; }
  .cz-ap-kicker { margin-bottom: 5px; }
  .cz-ap-cab b { font-size: 19px; }
  .cz-ap .cz-ap-carta .cz-ap-entrada { margin-bottom: 6px; }
  .cz-ap-marco { width: 74%; }
  .cz-ap-lado { gap: 4px; }
  .cz-ap-clave, .cz-ap-norma, .cz-ap-escalera { margin-top: 7px; }
  .cz-ap-norma p { line-height: 1.28; }
  .cz-ap .cz-ap-carta .cz-ap-cierre { margin-top: 5px; }
  .cz-ap-pie { margin-top: 6px; }
}

/* figuras y paneles dentro del cartel */
.cz-ap-marco-fig .cz-ap-figsvg, .cz-ap-marco-fig > img { width: 62%; height: 88%; display: grid; place-items: center; }
.cz-ap-marco-fig .cz-ap-figsvg svg { width: 100%; height: 100%; }
.cz-ap-marco-fig > img { object-fit: contain; }
.cz-ap-marco-panel { grid-template-rows: auto auto; align-content: center; gap: 4%; }
.cz-ap-marco-panel .cz-ap-senal { width: 62%; height: auto; }
.cz-ap-marco-panel .cz-ap-panel { position: static; width: 44%; justify-self: center; }
.cz-ap-marco-veh { color: var(--ap-crema); }
.cz-ap-marco-veh svg { width: 74%; height: auto; }
.cz-ap-yo figcaption { color: #1a1005; background: linear-gradient(180deg, #fff0c0, var(--ap-oro-2)); }
.cz-ap-yo .cz-ap-marco { box-shadow: inset 0 0 0 2px var(--ap-oro), 0 0 18px rgba(243,210,122,.35); }
/* la escalera de prioridad: el que manda en verde, el disparado en rojo */
.cz-ap-escalera { list-style: none; margin: calc(10px * var(--cz-k, 1)) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.cz-ap-escalera li { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border-radius: 8px; background: rgba(0,0,0,.3);
  font: 800 calc(12px * var(--cz-k, 1))/1.1 var(--cz-fb, sans-serif); text-transform: none; letter-spacing: 0; color: rgba(255,247,230,.72); text-align: center; }
.cz-ap-escalera li b { font: 900 calc(15px * var(--cz-k, 1))/1 var(--cz-fd, sans-serif); color: var(--ap-oro); }
.cz-ap-escalera li.cz-ap-esc-ok { background: rgba(74,222,128,.18); box-shadow: inset 0 0 0 2px var(--ap-verde); color: #d9ffe5; }
.cz-ap-escalera li.cz-ap-esc-mal { background: rgba(255,90,74,.16); box-shadow: inset 0 0 0 2px var(--ap-rojo); color: #ffd9d4; }

/* ── ?fallo=2: el mostrador sube desde abajo y deja ver la caseta ── */
.cz-ap-v2.cz-ap-fallo { align-items: flex-end; padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(4,3,2,0) 0%, rgba(4,3,2,.35) 35%, rgba(4,3,2,.85) 100%); }
.cz-ap-v2.cz-ap-fallo .cz-ap-carta { margin: auto auto 0; width: min(100%, calc(460px * var(--cz-k, 1))); transform: translateY(40%); }
.cz-ap-v2.cz-ap-fallo.cz-ap-in .cz-ap-carta { transform: none; }
.cz-ap-v2.cz-ap-fallo .cz-ap-par { grid-template-columns: 1fr auto 1fr; }
.cz-ap-v2.cz-ap-fallo .cz-ap-marco { width: 72%; }

/* ── ?fallo=3: una encima de otra, la señal a la izquierda y el nombre a la derecha ── */
.cz-ap-v3 .cz-ap-par { grid-template-columns: 1fr; gap: 4px; }
.cz-ap-v3 .cz-ap-lado { display: grid; grid-template-columns: 34% 1fr; grid-template-rows: auto auto 1fr; column-gap: 12px; row-gap: 5px; align-items: center; text-align: left; justify-items: start;
  padding: 8px; border-radius: 12px; background: rgba(0,0,0,.25); }
.cz-ap-v3 .cz-ap-lado .cz-ap-marco { grid-row: 1 / 4; grid-column: 1; }
.cz-ap-v3 .cz-ap-lado figcaption, .cz-ap-v3 .cz-ap-lado .cz-ap-nom, .cz-ap-v3 .cz-ap-lado .cz-ap-cod { grid-column: 2; }
.cz-ap-v3 .cz-ap-lado .cz-ap-nom { font-size: calc(15px * var(--cz-k, 1)); align-self: start; }
.cz-ap-v3 .cz-ap-vs { justify-self: center; margin: -8px 0; position: relative; z-index: 1; }

/* ─────────────────────────── el letrero en las rondas nuevas ─────────────────────────── */
body.cz-partida .cz-rule.cz-rule-q .cz-rule-name, body.cz-partida .cz-rule.cz-rule-f .cz-rule-name, body.cz-partida .cz-rule.cz-rule-a .cz-rule-name {
  color: var(--ap-oro); text-shadow: 0 2px 0 #5a3d08, 0 0 18px rgba(243,210,122,.6);
}
body.cz-partida .cz-rule .cz-rule-chip { display: inline-flex; align-items: center; gap: 6px; }
body.cz-partida .cz-rule .cz-rule-cuenta b { font-weight: 900; }
.cz-rule-veh { display: inline-block; width: 2.2em; line-height: 0; }
.cz-rule-veh svg { width: 100%; height: auto; }
.cz-rule-pop { animation: czChipPop .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes czChipPop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.cz-rule-mecha { position: absolute; left: 7%; right: 7%; bottom: 4px; height: 4px; border-radius: 2px; background: rgba(0,0,0,.5); overflow: hidden; pointer-events: none; }
.cz-rule-mecha i { display: block; height: 100%; transform-origin: 0 50%; background: linear-gradient(90deg, var(--ap-rojo), #ffb347 45%, var(--ap-oro)); box-shadow: 0 0 6px rgba(255,190,90,.8); }

/* ─────────────────────────── ¿QUIÉN MANDA?: figuras de cartón ─────────────────────────── */
.cz-fig {
  position: absolute; left: 0; top: 0; z-index: 2; padding: 0; border: 0; background: none; cursor: crosshair;
  transform-origin: 50% 100%; opacity: 0; transition: opacity .25s ease-out; will-change: transform;
  filter: drop-shadow(0 8px 8px rgba(0,0,0,.55)); -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.cz-fig.cz-fig-in { opacity: 1; }
.cz-fig svg { width: 100%; height: 100%; display: block; }
/* la señal vertical, en su poste y con peana */
.cz-fig-senal img { position: absolute; left: 4%; top: 6%; width: 92%; height: auto; aspect-ratio: 1; object-fit: contain; z-index: 1; }
.cz-fig-senal .cz-fig-poste { position: absolute; left: 45%; width: 10%; top: 45%; bottom: 3%; border-radius: 2px;
  background: linear-gradient(90deg, #5b6068, #c4c9cf 45%, #6d737b); box-shadow: 0 0 0 2px #fff4dc; }
.cz-fig-senal::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 0; height: 5%; background: linear-gradient(180deg, #6b4520, #3b2410); border-radius: 2px; }
.cz-fig.cz-fig-cae { animation: czFigCae .7s cubic-bezier(.5,0,.7,.4) forwards; filter: drop-shadow(0 0 16px var(--ap-verde)); }
@keyframes czFigCae { 0% { rotate: x 0deg; opacity: 1; } 75% { rotate: x 82deg; opacity: 1; } 100% { rotate: x 90deg; opacity: 0; } }
.cz-fig.cz-item-mal { filter: drop-shadow(0 0 14px var(--ap-rojo)); }
.cz-fig.cz-item-buena { filter: drop-shadow(0 0 16px var(--ap-verde)) drop-shadow(0 0 4px var(--ap-verde)); }

/* ─────────────────────────── señales con panel complementario ─────────────────────────── */
/* La señal arriba y el panel DEBAJO, sin pisarse (Nico, 29-sep: «la de
   adelantamiento prohibido y la de un camión están mal hechas»). El botón
   centra la imagen en vertical, así que con height:70% la señal quedaba entre
   el 15 % y el 85 % de la caja y el panel (anclado abajo, ~31 % de alto) le
   tapaba el tercio de abajo del disco. Ahora la imagen va anclada arriba
   (0-72 %) y el panel, algo más estrecho, empieza en el 75 %. */
body.cz-partida .cz-sign.cz-ap-conpanel img { position: absolute; left: 0; top: 0; height: 72%; width: 100%; object-fit: contain; object-position: 50% 0; }
body.cz-partida .cz-sign.cz-ap-conpanel .cz-ap-panel { top: 75%; bottom: auto; left: 28%; right: 28%; padding: 2% 3%; }
.cz-ap-panel {
  position: absolute; left: 22%; right: 22%; bottom: 0; z-index: 1; display: grid; place-items: center; padding: 3% 4%; line-height: 0;
  color: #111; background: #fbfbf6; border: 2px solid #111; border-radius: 3px; box-shadow: 0 2px 4px rgba(0,0,0,.5);
}
.cz-ap-panel svg { width: 100%; height: auto; }
/* «TÚ VAS EN…»: insignia de chapa junto a la escopeta */
.cz-insignia {
  position: fixed; left: 12px; top: 72%; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: calc(6px * var(--cz-k, 1)) calc(10px * var(--cz-k, 1)); border-radius: 12px; pointer-events: none;
  color: var(--ap-crema); background: var(--ap-veta), var(--ap-madera);
  box-shadow: inset 0 0 0 2px rgba(243,210,122,.8), 0 0 16px rgba(243,210,122,.35), 0 6px 10px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .3s cubic-bezier(.2,1.3,.3,1);
}
.cz-insignia.cz-insignia-in { opacity: 1; transform: none; }
.cz-insignia span { font: 800 calc(12px * var(--cz-k, 1))/1 var(--cz-fb, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,247,230,.7); }
.cz-insignia i { width: calc(54px * var(--cz-k, 1)); line-height: 0; color: var(--ap-oro); filter: drop-shadow(0 0 6px rgba(243,210,122,.6)); }
.cz-insignia i svg { width: 100%; height: auto; }
.cz-insignia b { font: 900 calc(13px * var(--cz-k, 1))/1 var(--cz-fd, sans-serif); text-transform: uppercase; color: var(--ap-oro); }

/* fallo / decidida */
.cz-item-mal { animation: czItemMal .42s ease-out; }
.cz-sign.cz-item-mal { filter: drop-shadow(0 0 12px var(--ap-rojo)) !important; }
@keyframes czItemMal { 0%, 100% { translate: 0 0; } 20% { translate: -7px 0; } 40% { translate: 6px 0; } 60% { translate: -4px 0; } 80% { translate: 2px 0; } }
.cz-sign.cz-item-buena { filter: drop-shadow(0 0 14px var(--ap-verde)) !important; }
.cz-item-fuera { opacity: 0 !important; transition: opacity .3s ease-in; }
.cz-item-escapa { translate: 110vw 0; transition: translate .5s cubic-bezier(.5,0,.8,.5); }

@media (prefers-reduced-motion: reduce) {
  .cz-ap, .cz-ap-carta { transition: none; }
  .cz-fig.cz-fig-cae, .cz-item-mal { animation: none; }
}