/* Atlas — identidad, 2 de octubre de 2026.
 * Conserva los 15 nombres de la paleta raíz de web/style.css. Este archivo define tokens;
 * la migración de componentes se describe en README.md.
 * Tema: data-theme="claro" / data-theme="oscuro" en el elemento raíz.
 * Sin atributo, sigue la preferencia del sistema.
 */
/* Modo oscuro automático apagado (decisión de Daniel, 3-oct-2026): el juego es claro siempre. */
:root {
  color-scheme: light;
  /* Tintas de marca: constantes incluso en el tema oscuro. */
  --papel: #F3EBDD;
  --atlas: #202C29;
  --yel: #F4C542; /* Amarillo exclusivo del jugador. */
  --geo: #2C5F8A; /* Geografía · el Cóndor · azul de mapa. */
  --pob: #D67B40; /* Población · el Chigüiro · naranja de tierra. */
  --seg: #AD4138; /* Seguridad · el Sabueso · rojo de sello. */
  --tra: #82651B; /* Transporte · la Mula · mostaza oscuro, también de noche. */
  --agro: #35715A; /* Agro · el Colibrí · verde de hoja. */
  --prom: #7A5B46; /* La promesa · el Armadillo · café de tierra. */

  /* Pares para texto o siluetas SOBRE rellenos de categoría. */
  --on-geo: var(--papel);
  --on-pob: var(--atlas);
  --on-seg: var(--papel);
  --on-tra: var(--papel);
  --on-agro: var(--papel);
  --on-prom: var(--papel);
  --on-yel: var(--atlas);
  --atlas-fg: var(--papel);
  --atlas-edge: var(--papel);

  /* Tipografía: fuentes cargadas por la aplicación, nunca por estos SVG. */
  --hf: 'Fraunces', Georgia, 'Times New Roman', serif;
  --bf: 'Archivo', Arial, Helvetica, sans-serif;
  --heading-axes: 'SOFT' 0, 'WONK' 0;
  --weight-heading: 700;
  --weight-body: 400;
  --weight-label: 600;
  --text-source: 0.8125rem;
  --text-small: 0.875rem;
  --text-body: 1rem;
  --text-title: 1.5rem;
  --text-question: 2rem;
  --text-score: 2.5rem;
  --text-display: 3rem;
  --leading-body: 1.5;
  --leading-heading: 1.125;

  /* Construcción: reglas firmes, remates rectos y pocos radios. */
  --unit: 4px;
  --stroke-fine: 1px;
  --stroke: 2px;
  --stroke-emphasis: 3px;
  --radius-chip: 4px;
  --radius-button: 4px;
  --card-cut: 24px;
  --target-min: 48px;
  --shadow: none;
  --grain-opacity: 0.16;

  /* El color NO codifica el resultado. Ambos usan tinta y superficie.
   * Acierto: chulo dentro de círculo + «Le atinaste.»
   * Error: equis dentro de cuadrado + «No fue esta.»
   * La selección lleva pin amarillo; no anticipa el chulo de acierto.
   */
  --ok-fg: var(--ink);
  --ok-bg: var(--card);
  --ok-border: var(--ink);
  --ok-radius: 50%;
  --error-fg: var(--ink);
  --error-bg: var(--card);
  --error-border: var(--ink);
  --error-radius: 0;
  --status-stroke: 2.5px;
  --tie-fg: var(--ink);
  --tie-bg: var(--card);
  --clock-fg: var(--ink);
  --clock-urgent-fg: var(--ink); /* Urgencia: contorno doble + texto, sin rojo. */
  --selected-bg: var(--yel);
  --selected-fg: var(--atlas);
  --selected-border: var(--atlas);
  --focus-inner: var(--card);
  --focus-outer: var(--ink);
  --focus-width: 3px;
  --disabled-fg: var(--muted);
  --disabled-bg: var(--surface-subtle);
}

:root,
:root[data-theme="claro"] {
  color-scheme: light;
  --bg: #F3EBDD;
  --card: #FBF6EB;
  --ink: #202C29;
  --muted: #5D685F; /* Gris con sesgo vegetal, no gris azulado de interfaz. */
  --line: #B8B9A8; /* Solo separadores decorativos. */
  --border-strong: #687567; /* Controles y límites que deben percibirse. */
  --surface-subtle: #E7E4D6;
  --note: #E7E4D6; /* Nota neutra: el amarillo sigue siendo del jugador. */
  --note-fg: #35463A;
  --map-bg: #E7E4D6;
  --map-land: #FBF6EB;
  --map-line: #687567;
  --pattern-ink: #667C71;
  --category-edge: #202C29;
}

:root[data-theme="oscuro"] {
  color-scheme: dark;
  --bg: #17211E;
  --card: #24302A;
  --ink: #F3EBDD; /* Texto legible; --atlas sigue siendo tinta oscura. */
  --muted: #B5BEAF;
  --line: #46564B;
  --border-strong: #89988A;
  --surface-subtle: #2D3B32;
  --note: #2D3B32;
  --note-fg: #E0E6D6;
  --map-bg: #24302A;
  --map-land: #344239;
  --map-line: #89988A;
  --pattern-ink: #89988A;
  --category-edge: #F3EBDD;
}

@media (prefers-color-scheme: dark) and (min-width: 99999px) {
  :root:not([data-theme="claro"]):not([data-theme="oscuro"]) {
    color-scheme: dark;
    --bg: #17211E;
    --card: #24302A;
    --ink: #F3EBDD;
    --muted: #B5BEAF;
    --line: #46564B;
    --border-strong: #89988A;
    --surface-subtle: #2D3B32;
    --note: #2D3B32;
    --note-fg: #E0E6D6;
    --map-bg: #24302A;
    --map-land: #344239;
    --map-line: #89988A;
    --pattern-ink: #89988A;
    --category-edge: #F3EBDD;
  }
}

/* Aplicación de la identidad al prototipo. Los SVG de estado conservan las
   formas de identidad/recursos.svg: el resultado se reconoce sin color. */
:root {
  --signo-acierto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M9 16L14 21L23 10' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E");
  --signo-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='2' y='2' width='28' height='28' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M10 10L22 22M22 10L10 22' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E");
  --pin-jugador: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 64'%3E%3Cpath d='M24 2C11.85 2 2 11.85 2 24C2 39 24 62 24 62S46 39 46 24C46 11.85 36.15 2 24 2Z' fill='%23F4C542' stroke='%23202C29' stroke-width='3'/%3E%3Ccircle cx='24' cy='24' r='7' fill='%23202C29'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--bf); font-size: var(--text-body); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
b, strong { font-weight: var(--weight-label); }
img { max-width: 100%; }
h1, h2, .titulo, .titulo-tarjeta, .veredicto { font-family: var(--hf); font-weight: var(--weight-heading); font-optical-sizing: auto; font-variation-settings: var(--heading-axes); line-height: var(--leading-heading); letter-spacing: -.015em; text-wrap: balance; }
h1, h2 { margin: 0; }
.app { max-width: 480px; margin-inline: auto; min-height: 100vh;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 16px; }
.app > *, .app :where(div, span, b, p) { min-width: 0; }
[hidden] { display: none !important; }
button:focus-visible, input:focus-visible, summary:focus-visible { outline: var(--focus-width) solid var(--focus-outer); outline-offset: 4px; box-shadow: 0 0 0 2px var(--focus-inner); }
input::placeholder { color: var(--muted); opacity: 1; }

/* Tarjetas: borde continuo de 2 px y corte dibujado, sin recortar el foco. */
.tarjeta, .opcion, .dial, .promesa, .barras, .mapa, .final, .nota, .vs > div {
  position: relative; border: var(--stroke) solid var(--edge, var(--ink)); border-radius: 0;
}
.tarjeta::before, .opcion::before, .dial::before, .promesa::before, .barras::before, .mapa::before, .final::before, .nota::before, .vs > div::before {
  content: ""; position: absolute; z-index: 1; top: -2px; right: -2px; width: var(--card-cut); height: var(--card-cut); pointer-events: none;
  background: linear-gradient(45deg, transparent calc(50% - 1px), var(--edge, var(--ink)) calc(50% - 1px), var(--edge, var(--ink)) calc(50% + 1px), var(--bg) calc(50% + 1px));
}

/* Marca, cabecera y categorías. */
.marca { display: grid; justify-items: center; padding: 12px 0 20px; gap: 8px; }
.marca h1 { width: min(100%, 304px); padding: 20px; }
.logo { display: block; width: 100%; height: auto; }
.logo-oscuro { display: none; }
:root[data-theme="oscuro"] .logo-claro { display: none; }
:root[data-theme="oscuro"] .logo-oscuro { display: block; }
@media (prefers-color-scheme: dark) and (min-width: 99999px) {
  :root:not([data-theme="claro"]):not([data-theme="oscuro"]) .logo-claro { display: none; }
  :root:not([data-theme="claro"]):not([data-theme="oscuro"]) .logo-oscuro { display: block; }
}
.marca p { margin: 0; font-size: var(--text-body); text-align: center; }
.cab { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.cab .ronda { color: var(--muted); font-weight: 600; font-size: var(--text-small); }
.cab .marcador { font-size: 20px; }
.marcador, .reloj, .num, .dial input, .meta b, .barras b, .vs b, .vs em, .opcion span, .cubo { font-family: var(--bf); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.progreso { display: flex; gap: 6px; }
.progreso i { flex: 1; height: 4px; background: var(--line); }
.progreso i.ok { background: var(--ink); }
.fila-chip { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.chip { display: inline-flex; align-items: center; gap: 8px; background: var(--cat, var(--atlas)); color: var(--on-cat, var(--papel)); border: 1px solid var(--category-edge); font-weight: 600; font-size: var(--text-small); line-height: 1.3; padding: 8px 12px; border-radius: var(--radius-chip); }
.chip .punto { display: block; flex: none; width: 24px; height: 24px; filter: brightness(0) saturate(100%) invert(94%) sepia(9%) saturate(491%) hue-rotate(342deg) brightness(99%) contrast(93%); }
/* Población conserva su par de contraste tinta sobre naranja. */
.chip[style*="--on-pob"] .punto { filter: brightness(0) saturate(100%) invert(13%) sepia(13%) saturate(683%) hue-rotate(111deg) brightness(94%) contrast(90%); }
.pregunta { display: grid; grid-template-columns: minmax(0, 1fr) 72px; column-gap: 12px; align-items: center; }
.pregunta h2 { grid-column: 1; grid-row: 1; font-size: var(--text-question); overflow-wrap: break-word; }
.pregunta p { grid-column: 1 / -1; margin: 12px 0 0; color: var(--muted); font-size: var(--text-small); }
.bicho-pregunta { grid-column: 2; grid-row: 1; width: 72px; height: 72px; object-fit: contain; }

/* Opciones: selección con pin del jugador; resultado con forma en tinta. */
.opciones { display: grid; gap: 12px; }
.opcion { text-align: left; background: var(--card); padding: 24px 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; transition: transform .08s ease; }
.opcion:active:not(:disabled), .cubo:active:not(:disabled) { transform: scale(.985); }
.opcion b { font-size: 24px; line-height: 1.2; display: block; overflow-wrap: anywhere; }
.opcion span { display: block; margin-top: 4px; color: var(--muted); font-size: var(--text-small); }
.opcion .radio { width: 32px; height: 32px; border-radius: 50%; background: var(--bg); border: 2px solid var(--border-strong); }
.opcion.sel { --edge: var(--selected-border); background: var(--selected-bg); color: var(--selected-fg); }
.opcion.sel span { color: var(--selected-fg); }
.opcion.sel .radio { border: 0; border-radius: 0; height: 40px; background: var(--pin-jugador) center / contain no-repeat; }
.opcion.bien, .opcion.mal, .cubo.bien, .cubo.mal { background: var(--card); color: var(--ink); border-color: var(--ink); }
.opcion.bien .radio, .opcion.mal .radio { border: 0; border-radius: 0; background: var(--ink); mask: var(--signo-acierto) center / contain no-repeat; }
.opcion.mal .radio { mask-image: var(--signo-error); }
.o { text-align: center; color: var(--muted); font-family: var(--hf); font-weight: 700; }

/* Cifras y promesas. */
.dial { background: var(--card); padding: 24px; display: grid; gap: 12px; text-align: center; }
.dial label { color: var(--muted); font-size: var(--text-small); font-weight: 600; }
.dial input { width: 100%; min-height: var(--target-min); background: transparent; border: 0; border-bottom: 2px solid var(--border-strong); border-radius: 0; color: var(--ink); font-size: var(--text-score); text-align: center; padding: 8px 0; }
.dial small { color: var(--muted); font-size: var(--text-source); }
.promesa { background: var(--card); padding: 24px 20px; display: grid; gap: 12px; }
.promesa small { color: var(--muted); font-size: var(--text-small); }
.promesa .meta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.promesa .meta b { font-size: var(--text-score); line-height: 1.1; overflow-wrap: anywhere; }
.promesa .meta span { flex: 1 1 160px; font-size: var(--text-body); }
.cubos { display: grid; gap: 8px; }
.cubo { position: relative; text-align: left; background: var(--card); border: 2px solid var(--border-strong); border-radius: 4px; padding: 16px 56px 16px 16px; min-height: var(--target-min); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; transition: transform .08s ease; }
.cubo b { font-size: var(--text-body); }
.cubo span { color: var(--muted); font-size: var(--text-small); }
.cubo em { grid-column: 1 / -1; font-style: normal; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.cubo em:empty { display: none; }
.cubo em i { font-style: normal; font-size: var(--text-source); padding: 4px 8px; border: 1px solid var(--category-edge); border-radius: 4px; overflow-wrap: anywhere; }
.cubo em i.yo { background: var(--yel); color: var(--on-yel); }
.cubo em i.el { background: var(--atlas); color: var(--atlas-fg); }
.cubo.sel { background: var(--selected-bg); border-color: var(--selected-border); color: var(--selected-fg); }
.cubo.sel span { color: var(--selected-fg); }
.cubo.sel::after, .cubo.bien::after, .cubo.mal::after { content: ""; position: absolute; right: 12px; top: calc(50% - 16px); width: 32px; height: 32px; }
.cubo.sel::after { height: 40px; top: calc(50% - 20px); background: var(--pin-jugador) center / contain no-repeat; }
.cubo.bien::after, .cubo.mal::after { background: var(--ink); mask: var(--signo-acierto) center / contain no-repeat; }
.cubo.mal::after { mask-image: var(--signo-error); }
.barras { background: var(--card); padding: 24px 16px 16px; display: grid; gap: 8px; }
.barras div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: var(--text-small); color: var(--muted); }
.barras div b { color: var(--ink); }
.barras i { display: block; height: 10px; background: var(--border-strong); margin-bottom: 8px; }
.barras i.rep { background: var(--prom); }

/* El mapa conserva las coordenadas y la interacción originales. */
.mapa { background: var(--map-bg); padding: 16px; }
.mapa svg { width: 100%; height: auto; display: block; touch-action: manipulation; }
.mapa path { fill: var(--map-land); stroke: var(--map-line); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mapa path:hover { fill: var(--surface-subtle); }

/* Amarillo del jugador, flecha y controles de al menos 48 px. */
.btn { width: 100%; min-height: var(--target-min); padding: 16px 20px; border: 2px solid var(--atlas); border-radius: var(--radius-button); font-family: var(--bf); font-weight: 600; font-size: var(--text-body); line-height: 1.25; background: var(--yel); color: var(--on-yel); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.btn::after { content: "→"; font-family: Arial, sans-serif; font-size: 28px; font-weight: 400; line-height: 1; }
.btn.amarillo, .btn.cat { background: var(--yel); color: var(--on-yel); }
.btn.hueco { background: var(--card); color: var(--ink); border-color: var(--ink); justify-content: center; }
.btn.hueco::after { content: none; }
.btn:disabled { background: var(--disabled-bg); border-color: var(--border-strong); color: var(--disabled-fg); }
.btn:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 4px; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Revelación y rival: el Atlas se reconoce por el mapa con ojo. */
.revela { display: grid; gap: 16px; }
.revela-cabecera { display: flex; align-items: center; gap: 16px; }
.bicho-resultado { width: 96px; height: 96px; flex: none; object-fit: contain; }
.veredicto { font-size: var(--text-title); overflow-wrap: anywhere; }
.resultado-texto { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: var(--text-small); }
.estado { display: inline-block; width: 28px; height: 28px; flex: none; vertical-align: middle; }
.ok, .no { color: var(--ink); }
.emp { color: var(--tie-fg); }
.vs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.vs > div { padding: 76px 16px 16px; background: var(--card); }
.vs .yo::after { content: ""; position: absolute; top: 16px; left: 16px; width: 32px; height: 44px; background: var(--pin-jugador) center / contain no-repeat; }
.rival-atlas { position: absolute; top: 8px; left: 8px; width: 56px; height: 56px; object-fit: contain; }
.rival-inicial { position: absolute; top: 16px; left: 16px; display: grid; place-items: center; width: 40px; height: 40px; background: var(--atlas); color: var(--atlas-fg); border: 1px solid var(--atlas-edge); font-size: 24px; font-weight: 600; }
.vs small { display: block; color: var(--muted); font-size: var(--text-source); font-weight: 600; overflow-wrap: anywhere; }
.vs b { font-size: 24px; line-height: 1.2; display: block; margin-top: 8px; overflow-wrap: anywhere; }
.vs em { display: block; font-style: normal; color: var(--muted); font-size: var(--text-small); margin-top: 8px; }
.vs.solo { grid-template-columns: 1fr; }
.nota { --edge: var(--border-strong); background: var(--note); color: var(--note-fg); padding: 24px 16px 16px; font-size: var(--text-small); overflow-wrap: anywhere; }
.fuente { color: var(--muted); font-size: var(--text-source); line-height: 1.4; text-align: center; overflow-wrap: anywhere; }

/* Inicio y resultado. */
.tarjeta { background: var(--card); padding: 24px; display: grid; gap: 12px; }
.titulo-tarjeta { font-size: var(--text-title); }
.texto-secundario { color: var(--muted); font-size: var(--text-small); }
.bichos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; text-align: center; padding: 8px 0; }
.bicho-inicio { display: block; width: 72px; height: 72px; object-fit: contain; margin: 0 auto 4px; }
.bichos b, .bichos span { display: block; font-size: var(--text-source); }
.bichos span { color: var(--muted); }
.final { --edge: var(--border-strong); background: var(--atlas); color: var(--atlas-fg); padding: 32px 24px 24px; text-align: center; display: grid; gap: 12px; }
.final .titulo { font-size: 40px; color: var(--atlas-fg); overflow-wrap: anywhere; }
.final .num { font-size: 40px; line-height: 1.1; }
.final small { color: var(--papel); font-size: var(--text-small); }
.lista { display: grid; gap: 8px; }
.fila { background: var(--card); border: 2px solid var(--border-strong); border-radius: 4px; padding: 12px; display: grid; grid-template-columns: 8px minmax(0, 1fr) 28px 28px; gap: 10px; align-items: center; font-size: var(--text-small); }
.fila i { width: 8px; height: 24px; background: var(--cat); }
.fila span { overflow-wrap: anywhere; }
.cargando { color: var(--muted); text-align: center; padding: 40px 0; font-weight: 600; }
.error { background: var(--error-bg); color: var(--error-fg); border: 2px solid var(--error-border); padding: 20px; font-size: var(--text-small); overflow-wrap: anywhere; }
.error::before { content: ""; display: block; width: 32px; height: 32px; margin-bottom: 12px; background: var(--ink); mask: var(--signo-error) center / contain no-repeat; }

/* Reloj: conserva su arco, texto e identificadores. Urgencia en tinta. */
.reloj { position: relative; width: 44px; height: 44px; flex: none; color: var(--clock-fg); }
.reloj svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.reloj circle { fill: none; stroke: var(--line); stroke-width: 4; }
.reloj #arco { stroke: var(--clock-fg); stroke-linecap: round; transition: stroke-dashoffset .2s linear; }
.reloj b { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--text-small); font-weight: 600; }
.reloj.urgente { outline: 3px double var(--clock-urgent-fg); outline-offset: 2px; border-radius: 50%; }
.reloj.urgente #arco { stroke: var(--clock-urgent-fg); }
.reloj.urgente b { color: var(--clock-urgent-fg); }
.reloj.quieto { color: var(--muted); }
.reloj.quieto #arco { stroke: var(--muted); }

/* Retos entre personas. */
.nombre { display: grid; gap: 8px; }
.nombre span { font-size: var(--text-small); font-weight: 600; color: var(--muted); }
.nombre input, .enlace { width: 100%; min-height: var(--target-min); padding: 12px 16px; border-radius: 4px; border: 2px solid var(--border-strong); background: var(--card); color: var(--ink); }
.enlace { font-size: var(--text-body); margin-block: 8px 4px; }
.pulso { font-size: var(--text-small); color: var(--muted); }
.detalle summary { cursor: pointer; min-height: var(--target-min); padding: 12px 0; font-size: var(--text-small); color: var(--muted); font-weight: 600; }
.detalle .enlace { margin-top: 8px; }
@media (max-width: 380px) {
  .cubo { grid-template-columns: minmax(0, 1fr); }
  .cubo span { grid-column: 1; }
  .vs b { font-size: 20px; }
  .dos { grid-template-columns: 1fr; }
}
@media (min-width: 900px) {
  .app { max-width: 720px; padding-top: 32px; }
  .bichos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .final .num, .dial input { font-size: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* compartir */
.compartir { display: grid; gap: 10px; margin-top: 6px; }
.compartir > b { font-family: var(--hf); font-size: 16px; }
.redes { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.btn.red { padding: 12px 10px; font-size: 14px; min-height: 46px; text-align: center; text-decoration: none; display: grid; place-items: center; }
.btn.red::after { content: none; }
.aviso-red { color: var(--muted); font-size: 13px; }

/* la escena del bicho: toma la pantalla y habla */
.bicho-boton { background: none; padding: 4px 0; border-radius: 12px; color: inherit; cursor: pointer; }
.bicho-boton:hover .bicho-inicio, .bicho-boton:focus-visible .bicho-inicio { transform: translateY(-4px); }
.bicho-inicio { transition: transform .15s ease; }
.escena { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center; align-items: center;
  padding-top: calc(16px + env(safe-area-inset-top, 0px)); overflow: auto; animation: escena-entra .22s ease-out; }
.escena-cerrar { justify-self: end; margin-right: 20px; background: none; border: 2px solid var(--ink); color: var(--ink); font: 600 14px var(--bf); padding: 10px 16px; min-height: 44px; cursor: pointer; }
.escena-globo { position: relative; width: min(560px, calc(100% - 40px)); margin-top: 16px; background: var(--card); border: 2px solid var(--ink); padding: 22px 24px; }
.escena-globo::after { content: ""; position: absolute; left: 50%; bottom: -15px; width: 26px; height: 26px; background: var(--card); border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateX(-50%) rotate(45deg); }
.escena-globo p { margin: 0; font-family: var(--hf); font-weight: 700; font-size: clamp(24px, 6vw, 36px); line-height: 1.15; text-wrap: balance; text-align: center; }
.escena-bicho { background: none; border: 0; padding: 0; cursor: pointer; align-self: end; }
.escena-bicho img { display: block; width: min(78vw, 46vh, 440px); height: auto; }
.escena-bicho.salta img { animation: bicho-salta .45s ease-out; }
.escena-piso { width: 100%; background: var(--cat); color: var(--sobre); text-align: center; padding: 22px 20px calc(26px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 4px; }
.escena-piso small { font: 600 13px var(--bf); letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.escena-piso h2 { font-size: clamp(36px, 9vw, 56px); line-height: 1; color: inherit; }
.escena-piso span { font-size: 14px; opacity: .85; }
@keyframes escena-entra { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes bicho-salta { 0% { transform: translateY(18px) scale(.94); } 55% { transform: translateY(-10px) scale(1.03); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .escena, .escena-bicho.salta img { animation: none; } .bicho-inicio { transition: none; } }

/* en celular: la pregunta queda a la vista con el teclado abierto */
.fila-chip, .pregunta { scroll-margin-top: calc(12px + env(safe-area-inset-top, 0px)); }
.revela { scroll-margin-bottom: 16px; }

/* modo oscuro: el botón del bicho no lleva borde ni fondo propios */
.bicho-boton { border: 0; box-shadow: none; }

/* la escena siempre cabe completa en la ventana, por bajita que sea: el bicho es lo que se encoge */
.escena { height: 100vh; height: 100dvh; grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; }
.escena-globo { padding: clamp(12px, 2.4vh, 22px) 24px; margin-top: clamp(6px, 1.6vh, 16px); }
.escena-globo p { font-size: clamp(20px, min(6vw, 4.6vh), 36px); }
.escena-bicho { align-self: stretch; justify-self: center; width: min(78vw, 440px); min-height: 0; height: 100%; padding-top: 18px; display: block; }
.escena-bicho img { width: 100%; height: 100%; object-fit: contain; }
.escena-piso { padding: clamp(10px, 2.4vh, 22px) 20px calc(clamp(12px, 2.6vh, 26px) + env(safe-area-inset-bottom, 0px)); }
.escena-piso h2 { font-size: clamp(28px, min(9vw, 7vh), 56px); }
html.con-escena, html.con-escena body { overflow: hidden; }