:root {
    --fondo: #faf8f4;
    --superficie: #ffffff;
    --texto: #1f2333;
    --texto-suave: #5b6070;
    --primario: #4f46e5;
    --primario-oscuro: #3730a3;
    --primario-suave: #eef0ff;
    --borde: #e4e1da;
    --correcto: #15803d;
    --correcto-fondo: #e8f6ee;
    --aviso: #b45309;
    --aviso-fondo: #fff4e0;
    --apuntado: #6d28d9;
    --apuntado-fondo: #f3ecff;
    --radio: 18px;
    /* 2 cm, lo que recomienda NN/g para niños pequeños (unos 76 px CSS) */
    --toque: 76px;
    color-scheme: light;
  }
  *, *::before, *::after { box-sizing: border-box; }
  html, body { height: 100%; margin: 0; }
  body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background: var(--fondo);
    color: var(--texto);
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    overscroll-behavior: none;
    overflow: hidden;
  }
  button { font: inherit; touch-action: manipulation; cursor: pointer; }

  .app {
    max-width: 720px;
    height: 100%;
    margin: 0 auto;
    padding: 8px 16px calc(12px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
  }
  .cabecera { display: flex; align-items: center; gap: 12px; min-height: 84px; }
  .puntos { flex: 1; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
  .punto { width: 12px; height: 12px; border-radius: 50%; background: var(--borde); }
  .punto.hecho { background: var(--primario); }
  .punto.actual { background: var(--primario); box-shadow: 0 0 0 4px var(--primario-suave); }
  /* Salir: la única excepción, con el altavoz, a «nada de arriba parece un botón» (decisión del autor,
     10 de octubre de 2026). Pequeña y gris, para que no llame la atención como el altavoz. */
  .boton-salir {
    width: 48px; height: 48px; flex: none; border: none; border-radius: 50%;
    background: transparent; color: var(--texto-suave);
    display: grid; place-items: center;
  }
  .boton-salir:active { background: var(--borde); }
  .boton-sub {
    width: 48px; height: 48px; border-radius: 12px;
    border: 2px solid var(--borde); background: var(--superficie);
    color: var(--texto-suave); font-weight: 800; font-size: 1rem;
  }
  .boton-sub[aria-pressed='true'] { border-color: var(--primario); color: var(--primario); }
  .boton-oir {
    width: var(--toque); height: var(--toque); flex: none;
    border: none; border-radius: 50%;
    background: var(--primario); color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 5px 0 var(--primario-oscuro);
  }
  .boton-oir:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--primario-oscuro); }
  .boton-oir[hidden] { display: none; }
  .boton-oir.hablando svg { animation: latido 0.9s ease-in-out infinite; }

  .rotulo { margin: 0 0 4px; text-align: center; font-size: 1.5rem; font-weight: 800; line-height: 1.2; min-height: 1.2em; }
  .subtitulo { margin: 0 0 6px; text-align: center; font-size: 1rem; line-height: 1.35; color: var(--texto-suave); }
  .subtitulo[hidden] { display: none; }
  .aviso-voz {
    margin: 0 0 8px; padding: 8px 12px; border-radius: 12px;
    background: var(--aviso-fondo); color: var(--aviso); font-size: 0.95rem; text-align: center;
  }

  .escenario { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
  .escenario > svg { width: 100%; height: 100%; touch-action: none; overflow: visible; }

  .opciones {
    display: flex; gap: 12px; justify-content: center;
    margin: 4px -8px 0; padding: 10px 8px 10px; min-height: calc(var(--toque) + 20px);
    border-radius: 24px;
  }
  /* Cuando hay que contestar abajo se ilumina la barra entera, nunca una opción: sin flechas. */
  .opciones.llamando { animation: barra 0.7s ease-in-out 3; }
  .opcion {
    flex: 1; max-width: 140px; min-width: var(--toque); min-height: var(--toque);
    border: 3px solid var(--borde-opcion, var(--borde)); border-radius: var(--radio);
    background: var(--superficie); color: var(--texto);
    font-size: 2.4rem; font-weight: 800; line-height: 1;
    display: grid; place-items: center;
    box-shadow: 0 5px 0 var(--borde);
  }
  .opcion:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--borde); }
  .opcion.llamar { animation: llamar 0.7s ease-in-out 3; }
  .opcion.elegida-mal { border-color: var(--aviso); animation: temblor 0.4s; }
  .opcion.elegida-bien { border-color: var(--correcto); background: var(--correcto-fondo); }
  .opcion.elegida { border-color: var(--apuntado); background: var(--apuntado-fondo); }
  .opcion.ancha { max-width: 260px; font-size: 1.4rem; gap: 10px; display: flex; justify-content: center; align-items: center; }

  .empezar {
    width: 148px; height: 148px; border-radius: 50%; border: none;
    background: var(--primario); color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 8px 0 var(--primario-oscuro);
  }
  .empezar:active { transform: translateY(4px); box-shadow: 0 4px 0 var(--primario-oscuro); }
  .portada { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
  .portada p { margin: 0; color: var(--texto-suave); }

  /* La franja de respuesta, como en el reproductor: verde, naranja (nunca roja) o morada. */
  .franja {
    position: fixed; left: 0; right: 0; bottom: 0;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    transform: translateY(110%); transition: transform 0.25s ease-out;
    z-index: 10;
  }
  .franja.visible { transform: none; }
  /* Con la franja abierta, las opciones suben: no quedan tapadas. */
  body.con-franja .app { padding-bottom: 116px; }
  .franja-dentro { max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
  .franja .icono { width: 56px; height: 56px; flex: none; border-radius: 50%; background: #fff; display: grid; place-items: center; }
  .franja .texto { flex: 1; font-size: 1.3rem; font-weight: 800; line-height: 1.2; }
  .franja.bien { background: var(--correcto-fondo); color: var(--correcto); }
  .franja.aviso { background: var(--aviso-fondo); color: var(--aviso); }
  .franja.apuntado { background: var(--apuntado-fondo); color: var(--apuntado); }
  .seguir {
    min-width: 128px; min-height: var(--toque); border: none; border-radius: var(--radio);
    color: #fff; font-size: 1.25rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center; gap: 6px;
  }
  .franja.bien .seguir { background: var(--correcto); box-shadow: 0 5px 0 #0f5a2b; }
  .franja.aviso .seguir { background: var(--aviso); box-shadow: 0 5px 0 #7c3d07; }
  .franja.apuntado .seguir { background: var(--apuntado); box-shadow: 0 5px 0 #4c1d95; }
  .seguir[hidden] { display: none; }

  /* ¿Quieres salir? Por encima de todo (también de la franja de respuesta), con los dos botones grandes. */
  .franja.salir { background: var(--superficie); color: var(--texto); z-index: 20; box-shadow: 0 -6px 24px rgb(0 0 0 / 0.15); }
  .salir-dentro { flex-direction: column; align-items: stretch; text-align: center; }
  .salir-dentro .texto { margin: 0 0 4px; }
  .salir-botones { display: flex; gap: 12px; }
  .salir-botones .seguir { flex: 1; min-width: 0; text-decoration: none; }
  .seguir.quedarse { background: var(--primario); box-shadow: 0 5px 0 var(--primario-oscuro); }
  .seguir.irse { background: var(--superficie); color: var(--texto-suave); border: 2px solid var(--borde); box-shadow: 0 5px 0 var(--borde); }

  /* Dibujos */
  .zona { fill: transparent; }
  .tocable { cursor: pointer; outline: none; }
  .tocable:focus-visible .zona { stroke: var(--primario); stroke-width: 3; }
  .contada .zona { fill: rgb(79 70 229 / 0.08); }
  .tocable.elegida-mal { animation: temblor 0.4s; transform-box: fill-box; }
  .tocable.elegida-mal .zona { fill: var(--aviso-fondo); stroke: var(--aviso); stroke-width: 3; }
  .tocable.elegida-bien .zona { fill: var(--correcto-fondo); stroke: var(--correcto); stroke-width: 4; }
  .numero-objeto {
    font-size: 26px; font-weight: 800; fill: #fff;
    paint-order: stroke; stroke: var(--texto); stroke-width: 5px; stroke-linejoin: round;
    pointer-events: none; text-anchor: middle; dominant-baseline: central;
  }
  .numero-objeto.pequeno { font-size: 17px; stroke-width: 4px; }
  .insignia circle { fill: #fff; stroke: var(--texto); stroke-width: 2.5; }
  .insignia text { font-size: 16px; font-weight: 800; fill: var(--texto); text-anchor: middle; dominant-baseline: central; }
  .insignia.nueva { animation: aparecer 0.25s ease-out; transform-box: fill-box; transform-origin: center; }
  .bocadillo rect, .bocadillo path { fill: #fff; stroke: var(--borde); stroke-width: 2.5; }
  .bocadillo text { font-size: 40px; font-weight: 800; fill: var(--texto); text-anchor: middle; dominant-baseline: central; }
  .bandeja { fill: #f1f5ff; stroke: #d6e2ff; stroke-width: 2; }
  .frutero { fill: #fff7ed; stroke: #fed7aa; stroke-width: 2; }
  .franja-huecos { fill: transparent; }
  .hueco { fill: none; stroke: #b9b4aa; stroke-width: 2.5; stroke-dasharray: 5 5; }
  .hueco.ocupado { stroke: transparent; }
  .hueco.solo { stroke: var(--aviso); stroke-width: 4; stroke-dasharray: none; }
  .arrastrable { transition: transform 0.25s ease-out; }
  .arrastrable.arrastrando { transition: none; }
  .seleccionada .zona { fill: rgb(79 70 229 / 0.16); stroke: var(--primario); stroke-width: 3; }
  .estrella { fill: #facc15; stroke: #b7791f; stroke-width: 2; stroke-linejoin: round; }
  .pulso { animation: pulso 0.9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .meneo { animation: temblor 0.35s; transform-box: fill-box; transform-origin: center; }

  .confeti { position: fixed; top: -20px; width: 10px; height: 16px; border-radius: 3px; z-index: 20; pointer-events: none; animation: caer 2.4s ease-in forwards; }

  @keyframes latido { 50% { transform: scale(1.15); } }
  @keyframes pulso { 50% { transform: scale(1.2); } }
  @keyframes aparecer { from { transform: scale(0.2); opacity: 0; } }
  @keyframes temblor { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
  @keyframes barra { 50% { background: var(--primario-suave); box-shadow: 0 0 0 4px var(--primario); } }
  @keyframes llamar { 50% { transform: translateY(-5px); } }
  @keyframes caer { to { transform: translateY(110vh) rotate(540deg); } }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .opciones.llamando { background: var(--primario-suave); box-shadow: 0 0 0 4px var(--primario); }
  }

  /* Piloto de 5-8 años: tablero, recta, enlaces y menú */
  a.opcion { text-decoration: none; color: var(--texto); }
  .casilla { fill: #fff; stroke: #d6d1c7; stroke-width: 2.5; }
  .tocable.elegida-bien .casilla { fill: var(--correcto-fondo); stroke: var(--correcto); }
  .tocable.elegida-mal .casilla { fill: var(--aviso-fondo); stroke: var(--aviso); }
  .numero-casilla { font-size: 16px; font-weight: 700; fill: #9ca3af; text-anchor: middle; dominant-baseline: central; }
  .numero-raya { font-size: 19px; font-weight: 800; fill: var(--texto); text-anchor: middle; dominant-baseline: central; }
  .ficha { transition: transform 0.35s ease-out; }
  .menu { max-width: 560px; margin: 0 auto; padding: 16px 16px 32px; }
  .menu h1 { font-size: 1.6rem; margin: 8px 0 4px; }
  .menu > p { margin: 0 0 16px; color: var(--texto-suave); }
  .menu ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
  .menu a {
    display: flex; align-items: center; gap: 14px; min-height: var(--toque);
    padding: 10px 16px; border-radius: var(--radio); background: var(--superficie);
    border: 3px solid var(--borde); box-shadow: 0 5px 0 var(--borde);
    color: var(--texto); text-decoration: none; font-size: 1.25rem; font-weight: 800;
  }
  .menu a:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--borde); }
  .menu .numero { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--primario); color: #fff; }
  .menu .saber { display: block; font-size: 0.85rem; font-weight: 600; color: var(--texto-suave); }
  body.pagina-menu { overflow: auto; }
  .etiqueta-dibujo { font-size: 22px; font-weight: 800; fill: var(--texto); text-anchor: middle; dominant-baseline: central; }
  .tocable.elegida .casilla { fill: var(--apuntado-fondo); stroke: var(--apuntado); stroke-width: 4; }