/* =====================================================================
   Tema: arcade noventoso sobre verde, con la paleta de The Simpsons.
   Bloques planos, contornos negros gruesos, sombras duras sin blur y
   esquinas rectas. Nada de degradados ni bordes redondeados.
   ===================================================================== */

:root {
  /* --- Paleta del póster --- */
  --amarillo:      #FFD520;
  --amarillo-osc:  #E8B800;
  --naranja:       #F05A28;
  --azul:          #0D7DC1;
  --celeste:       #6DCFF6;
  --azul-medio:    #2FA8D5;
  --azul-suave:    #6FA9DC;
  --verde:         #7AC143;
  --verde-claro:   #CDE6A5;
  --gris-azul:     #5F7B7E;
  --beige:         #D3B183;
  --blanco:        #FFFFFF;
  --negro:         #12100E;

  /* --- Fondo por instancia de la carrera ---
     Arranca en un verde profundo de aula y se va oscureciendo: azul noche
     en el medio y berenjena al final. Contra estos tonos las cartas blancas
     y las franjas amarillas pegan mucho más que contra el verde chillón. */
  --fase-ingresante: #2C6157;
  --fase-intermedio: #24486E;
  --fase-avanzado:   #4A2A46;

  /* --- Roles --- */
  --fondo:         var(--fase-ingresante);
  --panel:         var(--blanco);
  --texto:         var(--negro);
  --muted:         #6B6B63;
  --acento:        var(--amarillo);
  --ok:            #3F9B2F;
  --mal:           #D9401C;

  --borde:         4px solid var(--negro);
  --sombra:        8px 8px 0 var(--negro);
  --sombra-chica:  5px 5px 0 var(--negro);

  --pixel: "Press Start 2P", "Courier New", monospace;
  --titulo: "Archivo Black", "Arial Black", Impact, sans-serif;
  --cuerpo: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  color: var(--texto);
  font: 16px/1.55 var(--cuerpo);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  overflow-x: hidden;
  /* Cuadrícula de píxeles sobre el color de la instancia */
  background-color: var(--fondo);
  background-image:
    linear-gradient(rgba(0,0,0,.16) 2px, transparent 2px),
    linear-gradient(90deg, rgba(0,0,0,.16) 2px, transparent 2px);
  background-size: 18px 18px;
}

body[data-fase="ingresante"] { --fondo: var(--fase-ingresante); }
body[data-fase="intermedio"] { --fondo: var(--fase-intermedio); }
body[data-fase="avanzado"]   { --fondo: var(--fase-avanzado); }

#app { width: 100%; max-width: 540px; padding: 18px 16px 40px; position: relative; }

.pantalla { display: none; }
.pantalla.activa { display: block; }
.oculto { display: none !important; }

/* ---------------- Inicio ----------------
   Cada bloque respira: título, y después una pregunta por sección,
   separadas con línea punteada. */
.inicio-box {
  margin-top: 4vh;
  background: var(--panel);
  border: var(--borde);
  padding: 34px 26px 30px;
  box-shadow: var(--sombra);
}
.inicio-box h1 {
  margin: 0 0 16px;
  font-family: var(--titulo);
  font-size: 38px;
  line-height: .95;
  letter-spacing: -1px;
  text-transform: uppercase;
  color: var(--amarillo);
  -webkit-text-stroke: 3px var(--negro);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--naranja);
}
/* Regla gruesa: corta la cabecera del formulario */
.sub {
  margin: 0 0 34px;
  padding-bottom: 30px;
  border-bottom: 4px solid var(--negro);
  font-family: var(--pixel);
  font-size: 9px;
  line-height: 2;
  color: var(--muted);
}

.campo { display: block; margin: 0; }
/* Punteada entre secciones: separa sin pesar como la regla del título */
.campo + .campo {
  margin-top: 32px;
  padding-top: 30px;
  border-top: 3px dashed rgba(18, 16, 14, .22);
}
.campo > span {
  display: block;
  font-family: var(--pixel);
  font-size: 9px;
  line-height: 1.7;
  color: var(--negro);
  margin-bottom: 14px;
  text-transform: uppercase;
}

input[type=text] {
  width: 100%;
  background: #F4F2E9;
  border: 3px solid var(--negro);
  color: var(--negro);
  padding: 12px 13px;
  font-size: 16px;
  font-family: var(--cuerpo);
  font-weight: 600;
}
input[type=text]:focus { outline: none; background: var(--amarillo); }

.opciones { display: flex; flex-wrap: wrap; gap: 10px; }
.opciones button {
  flex: 1 1 auto;
  background: var(--blanco);
  border: 3px solid var(--negro);
  color: var(--negro);
  padding: 12px 12px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--cuerpo);
  cursor: pointer;
  transition: none;
}
.opciones button:hover { background: var(--celeste); }
.opciones button:active { filter: brightness(.88); }
.opciones button.sel {
  background: var(--amarillo);
  box-shadow: inset 0 0 0 3px var(--blanco);
}

.primario {
  width: 100%;
  background: var(--naranja);
  color: var(--blanco);
  border: 4px solid var(--negro);
  padding: 15px;
  font-family: var(--pixel);
  font-size: 13px;
  cursor: pointer;
  margin-top: 8px;
}
.primario:hover { background: #FF6E3D; }
.primario:active { filter: brightness(.85); }
.primario:disabled { opacity: .5; cursor: default; }

/* Acción secundaria: mismo peso de botón, menos jerarquía de color */
.primario.secundario {
  background: var(--amarillo);
  color: var(--negro);
}
.primario.secundario:hover { background: #FFE05C; }

/* El botón cierra el formulario: necesita aire propio arriba */
.inicio-box .primario { margin-top: 38px; }

.aviso-progreso {
  font-family: var(--pixel);
  font-size: 8px;
  line-height: 2.1;
  text-align: center;
  color: var(--muted);
  margin: 26px 0 0;
}

/* ---------------- HUD ---------------- */
#hud {
  background: var(--negro);
  border: var(--borde);
  padding: 12px 12px 10px;
  margin-bottom: 16px;
  box-shadow: var(--sombra-chica);
}

#stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stat { text-align: center; cursor: help; }
.stat .ico { display: flex; justify-content: center; line-height: 0; }
.stat .ico svg { width: 22px; height: 22px; display: block; }

/* Barra segmentada, como una vida de arcade. Sin número: el valor exacto
   vive en el tooltip. */
.stat .barra {
  height: 14px;
  background: #33322D;
  margin-top: 8px;
  border: 2px solid var(--negro);
  overflow: hidden;
  position: relative;
}
.stat .barra i {
  display: block;
  height: 100%;
  transition: width .35s steps(10, end);
}
.stat .barra::after {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    90deg, transparent 0 6px, var(--negro) 6px 8px);
  pointer-events: none;
}
.stat.pulso .ico { animation: pulso .45s steps(3); }
.stat.baja .ico { animation: baja .45s steps(3); }
@keyframes pulso { 0%{transform:none} 45%{transform:translateY(-5px) scale(1.25)} 100%{transform:none} }
@keyframes baja  { 0%{transform:none} 45%{transform:translateY(5px) scale(.8)} 100%{transform:none} }

#progreso {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px;
  font-family: var(--pixel);
  font-size: 8px;
  color: var(--amarillo);
  text-transform: uppercase;
}
.barra-rondas { flex: 1; height: 8px; background: #33322D; border: 2px solid #33322D; }
#barra-rondas-fill {
  height: 100%;
  width: 0;
  background: var(--amarillo);
  transition: width .3s steps(8, end);
}

/* ---------------- Carta ---------------- */
#escenario { position: relative; min-height: 360px; display: flex; align-items: stretch; }

.carta {
  width: 100%;
  background: var(--panel);
  border: var(--borde);
  padding: 0 0 22px;
  box-shadow: var(--sombra);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  /* Sin overflow:hidden. Con esquinas rectas no hay nada que recortar, y
     recortaba el minijuego, que es más alto que los 360px del contenedor. */
}
.carta.arrastrando { cursor: grabbing; }
.carta.animada { transition: transform .3s steps(6, end), opacity .3s; }

/* ---------------- Ilustraciones ---------------- */
/* Franja de color arriba: el tinte cambia según la categoría del evento */
.ilustracion {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 18px 0 14px;
  background: var(--tinte, var(--amarillo));
  border-bottom: 4px solid var(--negro);
  color: var(--negro);
  pointer-events: none;
}
.ilustracion svg {
  width: 128px;
  height: 128px;
  display: block;
  animation: entrar-ilu .28s steps(4, end) both;
}
.ilustracion.chica { padding: 12px 0 10px; }
.ilustracion.chica svg { width: 86px; height: 86px; }
.ilustracion.grande svg { width: 148px; height: 148px; }

@keyframes entrar-ilu {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Tintes por categoría, tomados del póster */
.carta[data-cat="generales"],    .ilustracion[data-cat="generales"]    { --tinte: var(--amarillo); }
.carta[data-cat="guita"],        .ilustracion[data-cat="guita"]        { --tinte: var(--verde-claro); }
.carta[data-cat="conocimiento"], .ilustracion[data-cat="conocimiento"] { --tinte: var(--celeste); }
.carta[data-cat="fama"],         .ilustracion[data-cat="fama"]         { --tinte: var(--naranja); }
.carta[data-cat="politica"],     .ilustracion[data-cat="politica"]     { --tinte: var(--azul-suave); }
.carta[data-cat="aviso"],        .ilustracion[data-cat="aviso"]        { --tinte: var(--beige); }
.carta[data-cat="minijuego"],    .ilustracion[data-cat="minijuego"]    { --tinte: var(--azul-medio); }

.carta-personaje {
  font-family: var(--pixel);
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--blanco);
  background: var(--negro);
  align-self: center;
  padding: 6px 12px;
  margin: -1px 0 14px;
  text-align: center;
}
/* De qué decisión previa viene el aviso. Va arriba del título, en cursiva y
   apagado, para que se lea como una nota al margen y no compita con la carta. */
.carta-origen {
  margin: -8px 22px 10px;
  font-size: 13px;
  font-style: italic;
  line-height: 1.35;
  text-align: center;
  color: var(--gris-azul);
}
.carta-origen[hidden] { display: none; }

.carta h2 {
  margin: 0 22px 12px;
  font-family: var(--titulo);
  font-size: 23px;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  color: var(--negro);
}
.carta p {
  margin: 0 22px;
  font-size: 15.5px;
  color: #24211C;
  font-weight: 500;
}

/* El aviso se distingue con marco doble */
.carta.aviso { box-shadow: var(--sombra), inset 0 0 0 4px var(--naranja); }

.hint-swipe {
  position: absolute; top: 176px;
  font-family: var(--pixel);
  font-size: 8px; line-height: 1.7;
  text-transform: uppercase;
  color: var(--blanco);
  background: var(--negro);
  padding: 6px 8px;
  opacity: 0;
  max-width: 42%;
  z-index: 3;
}
#hint-izq { left: 10px; text-align: left; }
#hint-der { right: 10px; text-align: right; }

/* ---------------- Respuestas ---------------- */
#respuestas { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.respuesta {
  background: var(--amarillo);
  border: 4px solid var(--negro);
  color: var(--negro);
  padding: 13px 15px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--cuerpo);
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
}
.respuesta:hover { background: var(--celeste); }
.respuesta:active { filter: brightness(.88); }
.respuesta .num {
  font-family: var(--pixel);
  font-size: 11px;
  background: var(--negro);
  color: var(--amarillo);
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 26px;
  margin: 0;
}

/* ---------------- Resultado ---------------- */
/* El resultado sí tapa la carta, pero puede crecer si el texto es largo:
   se ancla arriba en vez de estirarse entre top y bottom. */
.resultado {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  min-height: 100%;
  justify-content: center;
  padding: 26px 22px;
  background: var(--panel);
}
.resultado p { font-size: 17px; margin: 0 0 20px; font-weight: 600; }
.deltas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.delta {
  font-family: var(--pixel);
  font-size: 11px;
  padding: 7px 10px;
  border: 3px solid var(--negro);
  background: var(--blanco);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.delta-ico { line-height: 0; }
.delta-ico svg { width: 17px; height: 17px; display: block; }
.delta.pos { background: var(--verde-claro); color: #2B6B1F; }
.delta.neg { background: #FFC9BA; color: #A32E11; }

/* ---------------- Minijuego ----------------
   El minijuego REEMPLAZA a la carta, no la tapa: va en el flujo normal y
   el contenedor crece con él. Como overlay quedaba recortado a 360px y el
   botón "Jugar" caía fuera de la pantalla. */
.minijuego { text-align: center; padding-bottom: 20px; }
.mj-tag {
  align-self: center;
  font-family: var(--pixel);
  font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--negro); background: var(--amarillo);
  border: 3px solid var(--negro);
  padding: 6px 12px; margin: 14px 0 0;
}
.minijuego h2 { text-align: center; margin-top: 12px; }
.minijuego p { text-align: center; color: var(--muted); font-size: 14px; }
#mj-area {
  margin: 20px 22px 8px; min-height: 120px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px;
}
#mj-estado {
  font-family: var(--pixel); font-size: 10px;
  color: var(--negro); min-height: 20px;
}
.minijuego .primario { width: calc(100% - 44px); margin: 10px auto 0; }

/* --- Piezas compartidas por varios minijuegos --- */
.op-mj {
  background: var(--blanco);
  border: 3px solid var(--negro);
  color: var(--negro);
  padding: 12px 14px;
  font-size: 15px; font-weight: 700;
  font-family: var(--cuerpo);
  cursor: pointer; text-align: left;
}
.op-mj:hover { background: var(--celeste); }
.op-mj.bien { background: var(--verde); }
.op-mj.mal  { background: var(--naranja); color: var(--blanco); }
.opciones-mj { display: flex; flex-direction: column; gap: 9px; width: 100%; }

.input-mj {
  flex: 1;
  background: #F4F2E9;
  border: 3px solid var(--negro);
  padding: 12px 13px;
  font-size: 17px; font-weight: 700;
  font-family: var(--cuerpo);
  text-align: center;
}
.input-mj:focus { outline: none; background: var(--amarillo); }
.input-mj.bien { background: var(--verde); }
.input-mj.mal  { background: var(--naranja); color: var(--blanco); }
.fila-input { display: flex; gap: 9px; width: 100%; }
.op-mj.enviar { flex: 0 0 62px; text-align: center; font-family: var(--pixel); font-size: 11px; }

.palabra {
  font-family: var(--titulo);
  font-size: 27px;
  text-transform: lowercase;
  background: var(--amarillo);
  border: 4px solid var(--negro);
  padding: 12px 18px;
  margin-bottom: 4px;
}
.como-suena {
  font-family: var(--titulo);
  font-size: 25px;
  color: var(--naranja);
  -webkit-text-stroke: 2px var(--negro);
  paint-order: stroke fill;
  margin-bottom: 4px;
}

/* --- 1. Tres en línea --- */
.ttt { display: grid; grid-template-columns: repeat(3, 74px); gap: 6px; justify-content: center; }
.ttt-c {
  width: 74px; height: 74px;
  background: var(--blanco);
  border: 4px solid var(--negro);
  font-family: var(--titulo);
  font-size: 34px; line-height: 1;
  color: var(--azul); cursor: pointer;
}
.ttt-c:hover:not(.ocupada) { background: var(--celeste); }
.ttt-c.rival { color: var(--naranja); }
.ttt-c.ocupada { cursor: default; }
.ttt-c.gana { background: var(--amarillo); }

/* --- 2. Memo test: retratos pixelados --- */
.memo { display: grid; gap: 8px; justify-content: center; }
.memo-c {
  width: 72px; height: 72px;
  background: var(--azul-suave);
  border: 4px solid var(--negro);
  cursor: pointer;
  padding: 0;
  position: relative;
  overflow: hidden;
  /* Dorso: una trama para que se note que está dada vuelta */
  background-image: repeating-linear-gradient(
    45deg, rgba(18,16,14,.14) 0 6px, transparent 6px 12px);
}
.memo-c svg {
  width: 100%; height: 100%; display: block;
  image-rendering: pixelated;
}
.memo-c.vista { background: var(--verde-claro); background-image: none; }
.memo-c.lista { background: var(--verde); background-image: none; cursor: default; }
.memo-nom {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--negro); color: var(--blanco);
  font-family: var(--pixel); font-size: 5.5px;
  padding: 3px 0; letter-spacing: .3px;
}

/* --- 4. Sopa de letras --- */
.sopa { display: grid; gap: 3px; justify-content: center; }
.sopa-c {
  width: 33px; height: 33px;
  background: var(--blanco);
  border: 2px solid var(--negro);
  font-family: var(--pixel); font-size: 11px;
  color: var(--negro); cursor: pointer; padding: 0;
}
.sopa-c:hover { background: var(--celeste); }
.sopa-c.sel { background: var(--amarillo); }
.sopa-c.hallada { background: var(--verde); }
.sopa-lista { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; }
.sopa-w {
  font-family: var(--pixel); font-size: 9px;
  border: 2px solid var(--negro); padding: 5px 8px;
  background: var(--blanco);
}
.sopa-w.hallada { background: var(--verde); text-decoration: line-through; }

/* --- 5. Crucigrama --- */
.cruci { display: grid; gap: 3px; justify-content: center; }
.cruci-x { width: 34px; height: 34px; }
.cruci-c {
  width: 34px; height: 34px;
  background: var(--blanco);
  border: 3px solid var(--negro);
  font-family: var(--pixel); font-size: 12px;
  text-align: center; text-transform: uppercase;
  color: var(--negro); padding: 0;
}
.cruci-c:focus { outline: none; background: var(--amarillo); }
.cruci-c.bien { background: var(--verde); }
.pistas { margin-top: 12px; text-align: left; width: 100%; }
.pista { font-size: 13px; font-weight: 600; color: #3A362F; margin-bottom: 5px; }

/* --- 7. Conector de puntos --- */
.puntos { width: 100%; height: auto; background: var(--blanco); border: 4px solid var(--negro); }
.punto { cursor: pointer; }
.punto circle { fill: var(--blanco); stroke: var(--negro); stroke-width: 2; }
.punto text { font-family: var(--pixel); font-size: 5px; fill: var(--negro); }
.punto:hover circle { fill: var(--celeste); }
.punto.hecho circle { fill: var(--amarillo); }
.punto.error circle { fill: var(--naranja); }
.puntos-linea { fill: none; stroke: var(--azul); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }

/* --- 8. Saltar el molinete --- */
.runner {
  width: 100%; height: auto;
  background: var(--celeste);
  border: 4px solid var(--negro);
  cursor: pointer; touch-action: manipulation;
}

/* ---------------- Final ---------------- */
.final-box {
  margin-top: 4vh;
  background: var(--panel);
  border: var(--borde);
  padding: 0 0 26px;
  box-shadow: var(--sombra);
  text-align: center;
  overflow: hidden;
}
.final-sello {
  font-family: var(--pixel);
  font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--blanco); background: var(--negro);
  display: inline-block;
  padding: 7px 14px;
  margin: 18px 0 14px;
}
.final-box h1 {
  margin: 0 22px 18px;
  font-family: var(--titulo);
  font-size: 30px;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--naranja);
  -webkit-text-stroke: 2.5px var(--negro);
  paint-order: stroke fill;
}
.final-box > p {
  color: #24211C; text-align: left;
  margin: 0 22px 24px;
  font-size: 15.5px; font-weight: 500;
}

.final-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 22px 22px; }
.final-stats .fs { background: var(--negro); padding: 11px 4px 10px; }
.final-stats .fs-ico { display: block; line-height: 0; margin-bottom: 8px; }
.final-stats .fs-ico svg { width: 20px; height: 20px; display: inline-block; }
.final-stats .fs b {
  display: block;
  font-family: var(--pixel);
  font-size: 15px;
}
.final-stats .fs-nom {
  display: block;
  font-family: var(--pixel);
  font-size: 6.5px;
  color: #B9B7AE;
  text-transform: uppercase;
  margin-top: 7px;
}

.resumen { text-align: left; margin: 0 22px 22px; }
.resumen summary {
  cursor: pointer;
  font-family: var(--pixel); font-size: 9px;
  background: var(--amarillo);
  border: 3px solid var(--negro);
  padding: 10px;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.resumen ol { padding-left: 22px; margin: 0; }
.resumen li { font-size: 14px; margin-bottom: 14px; color: #3A362F; }
.resumen li b { color: var(--negro); }
.resumen li em { color: var(--muted); font-style: normal; }
.resumen li small { font-family: var(--pixel); font-size: 8px; }
.final-box .primario { width: calc(100% - 44px); margin: 0 auto; display: block; }
.final-box .primario + .primario { margin-top: 12px; }

/* =====================================================================
   Transición de instancia: cortina de bloques en diagonal.
   Los bloques entran de a uno con retraso creciente, tapan la pantalla,
   se cambia el fondo por debajo y se retiran con el mismo barrido.
   ===================================================================== */
.transicion {
  position: fixed; inset: 0;
  z-index: 60;
  display: none;
  pointer-events: none;
}
.transicion.activa { display: block; pointer-events: auto; }

.tr-grid { position: absolute; inset: 0; display: grid; }
.tr-grid i {
  background: var(--tr-color, var(--negro));
  transform: scale(0);
  transform-origin: center;
}
.tr-grid i.entra { animation: tr-entra .16s steps(2, end) var(--d) forwards; }
.tr-grid i.sale  { transform: scale(1); animation: tr-sale .16s steps(2, end) var(--d) forwards; }

@keyframes tr-entra { to { transform: scale(1); } }
@keyframes tr-sale  { to { transform: scale(0); } }

.tr-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--pixel);
  font-size: 22px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--amarillo);
  text-shadow: 5px 5px 0 var(--negro);
  opacity: 0;
}
.tr-label.visible { animation: tr-label .62s steps(6, end); }
@keyframes tr-label {
  0%   { opacity: 0; transform: scale(.7); }
  25%  { opacity: 1; transform: scale(1); }
  75%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.1); }
}

/* =====================================================================
   Panel de desarrollo. Solo aparece con ?dev en la URL.
   ===================================================================== */
#dev-panel {
  position: fixed;
  right: 12px; bottom: 12px;
  z-index: 80;
  width: 264px;
  background: var(--negro);
  border: 3px solid var(--amarillo);
  color: var(--blanco);
  font-family: var(--pixel);
  font-size: 8px;
  box-shadow: 6px 6px 0 rgba(0,0,0,.45);
}
.dev-barra {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--amarillo); color: var(--negro);
  padding: 6px 8px;
  font-size: 9px; letter-spacing: 1px;
}
.dev-barra button {
  background: var(--negro); color: var(--amarillo);
  border: none; width: 20px; height: 18px;
  font-family: var(--pixel); font-size: 10px; cursor: pointer;
}
.dev-cuerpo { padding: 10px; display: flex; flex-direction: column; gap: 9px; }
#dev-panel.plegado .dev-cuerpo { display: none; }

#dev-panel label { display: block; line-height: 1.9; color: #B9B7AE; }
#dev-panel select,
#dev-panel input {
  width: 100%;
  background: #24221D;
  color: var(--blanco);
  border: 2px solid #4A473E;
  padding: 5px;
  font-family: var(--cuerpo);
  font-size: 12px;
  font-weight: 600;
}
#dev-panel select:focus, #dev-panel input:focus { outline: none; border-color: var(--amarillo); }

.dev-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.dev-stats label { text-align: center; line-height: 1.4; }
.dev-stats input { padding: 4px 2px; text-align: center; font-size: 11px; }

.dev-fila { display: flex; gap: 6px; }
.dev-fila button {
  flex: 1;
  background: var(--amarillo); color: var(--negro);
  border: none; padding: 7px 4px;
  font-family: var(--pixel); font-size: 7.5px;
  cursor: pointer;
}
.dev-fila button:hover { background: #FFE05C; }
#dev-nota { color: var(--verde); font-size: 7.5px; line-height: 1.6; word-break: break-word; }

/* Franja para no confundir una sesión de testeo con una partida real */
body.dev-activo::before {
  content: "MODO DEV";
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 79;
  background: var(--amarillo); color: var(--negro);
  font-family: var(--pixel); font-size: 7px; letter-spacing: 2px;
  text-align: center; padding: 3px 0;
}
body.dev-activo #app { padding-top: 30px; }

@media (max-width: 640px) {
  #dev-panel { width: calc(100% - 24px); }
}

@media (prefers-reduced-motion: reduce) {
  .tr-grid i.entra, .tr-grid i.sale { animation-duration: .01s; animation-delay: 0s; }
  .tr-label.visible { animation-duration: .3s; }
}

/* En pantallas bajas se comprime la separación para no obligar a scrollear
   toda la pantalla de inicio */
@media (max-height: 820px) {
  .inicio-box { margin-top: 2vh; padding: 26px 24px 24px; }
  .inicio-box h1 { margin-bottom: 12px; }
  .sub { padding-bottom: 22px; margin-bottom: 26px; }
  .campo + .campo { margin-top: 24px; padding-top: 22px; }
  .inicio-box .primario { margin-top: 28px; }
  .aviso-progreso { margin-top: 20px; }
}

/* Las grillas de sopa (10x10), crucigrama (hasta 8 columnas) y memo test
   (4 columnas de 80px con borde = 344px) no entran en pantallas angostas con
   el tamaño de celda de escritorio. */
/* --- Simon Dice: duelo de baile --------------------------------------
   Cuatro pads grandes. El pad encendido sube el brillo y crece un poco,
   que a este tamaño se lee mejor que un cambio de color. */
.simon {
  display: grid;
  grid-template-columns: repeat(2, 116px);
  gap: 10px;
  justify-content: center;
}
.simon-pad {
  width: 116px; height: 116px;
  border: 4px solid var(--negro);
  padding: 0;
  cursor: pointer;
  filter: brightness(.62) saturate(.75);
  transition: filter .08s linear, transform .08s linear;
}
.simon-pad.on {
  filter: brightness(1.25) saturate(1.1);
  transform: scale(1.04);
}

@media (max-width: 480px) {
  .simon { grid-template-columns: repeat(2, 92px); }
  .simon-pad { width: 92px; height: 92px; }
  .sopa-c { width: 28px; height: 28px; font-size: 9px; }
  .cruci-c, .cruci-x { width: 29px; height: 29px; }
  .cruci-c { font-size: 11px; }
  .memo { gap: 6px; }
  .memo-c { width: 60px; height: 60px; }
}

@media (max-width: 420px) {
  .inicio-box h1 { font-size: 30px; }
  .carta h2 { font-size: 20px; margin-left: 16px; margin-right: 16px; }
  .carta p { margin: 0 16px; font-size: 15px; }
  .grilla { grid-template-columns: repeat(2, 74px); }
  .celda { width: 74px; height: 74px; }
}