/* Entrena a Bit (v002): Isla Cubo de día, mundo de bloques. Estilo de videojuego: contornos gruesos y oscuros,
   colores saturados y botones gordos. Sin filtros de difuminado (son lentos en ordenadores viejos). */
@font-face { font-family: 'Andika'; src: url('../fuentes/andika-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Andika'; src: url('../fuentes/andika-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --cielo: #8fd3ff;
  --cielo-2: #dff4ff;
  --panel: #ffffff;
  --panel-2: #f2f8ff;
  --borde: #9cc9e6;
  --texto: #1b2140;
  --suave: #4f5f86;
  --contorno: #14182e;
  --naranja: #ffb02e;
  --naranja-2: #ff8a1f;
  --cian: #3ef0ff;
  --amarillo: #ffd23f;
  --verde: #46d160;
  --rojo: #ff6b6b;
  --morado: #8b5cf6;
  --hierba: #6cc644;
  --tierra: #a8683a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: linear-gradient(var(--cielo), var(--cielo-2) 70%); color: var(--texto); font-family: 'Andika', system-ui, sans-serif;
       font-size: 18px; line-height: 1.3; overflow: hidden; display: flex; flex-direction: column; }
[hidden] { display: none !important; }
h1 { margin: 0; }
h2 { font-size: 1.2rem; margin: .1rem 0 .4rem; }
h3 { font-size: 1rem; margin: .2rem 0; color: var(--suave); }
p { margin: .3rem 0; }

.btn {
  font: inherit; font-weight: 700; color: var(--texto); background: #fff; border: 3px solid var(--contorno);
  border-radius: 14px; padding: .4rem .9rem; min-height: 44px; cursor: pointer; box-shadow: 0 4px 0 var(--contorno);
  position: relative; overflow: hidden;
}
.btn:hover:not(:disabled) { background: var(--panel-2); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 var(--contorno); }
.btn:focus-visible { outline: 3px solid var(--morado); outline-offset: 2px; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.pequeno { min-height: 38px; padding: .25rem .65rem; font-size: .95rem; }
.btn.grande { font-size: 1.35rem; padding: .6rem 1.4rem; }
.btn.principal { background: var(--naranja); }
.btn.principal:hover:not(:disabled) { background: #ffc35a; }
.btn.activo, .btn[aria-pressed='true'] { background: var(--cian); }
.btn .relleno { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(139, 92, 246, .35); pointer-events: none; }
.btn .texto { position: relative; }

/* Barra de arriba */
.barra { display: flex; align-items: center; gap: 1rem; padding: .3rem 1rem; background: #fff; border-bottom: 4px solid var(--contorno); flex: none; }
.barra-titulo { font-weight: 700; font-size: 1.15rem; }
.barra-derecha { margin-left: auto; display: flex; align-items: center; }
.bit-mini { width: 54px; height: 62px; overflow: visible; }
.franja { background: var(--amarillo); border: 2px solid var(--contorno); border-radius: 10px; padding: .1rem .6rem; font-size: .9rem; }

#app { flex: 1; min-height: 0; position: relative; }
.pantalla { height: 100%; display: flex; flex-direction: column; }
.panel { background: var(--panel); border: 4px solid var(--contorno); border-radius: 18px; box-shadow: 0 6px 0 var(--contorno); padding: .6rem .8rem; min-height: 0; }

/* Bocadillos de Bit */
.bit-habla { display: flex; align-items: flex-start; gap: .4rem; }
.bit-cara { width: 70px; height: 80px; flex: none; overflow: visible; }
.bocadillo { position: relative; background: #fff; border: 3px solid var(--contorno); border-radius: 16px; padding: .4rem .6rem; margin: .2rem 0;
             font-weight: 700; font-size: 1.08rem; min-height: 2.4em; flex: 1; display: flex; align-items: center; gap: .4rem; }
.bocadillo .icono { width: 34px; height: 34px; flex: none; }
.bocadillo.grande { font-size: 1.4rem; max-width: 34rem; }
.bocadillo.morado { border-color: var(--morado); }

/* Portada */
.portada { align-items: center; justify-content: center; text-align: center; gap: .4rem; padding: 1rem; }
.portada h1 { font-size: 3.2rem; color: #fff; -webkit-text-stroke: 2px var(--contorno); text-shadow: 0 5px 0 var(--contorno); }
.lema { font-size: 1.3rem; font-weight: 700; }
.bit-grande { width: 200px; height: 228px; overflow: visible; flex: none; }

/* Mapa */
.zona-mapa { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 340px; gap: .7rem; padding: .7rem; }
.mapa-dibujo { position: relative; min-width: 0; min-height: 0; border: 4px solid var(--contorno); border-radius: 18px; overflow: hidden;
               background: linear-gradient(#9fdcff, #e6f7ff); box-shadow: 0 6px 0 var(--contorno); }
.mapa3d, .mapa2d { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapa3d canvas { display: block; width: 100%; height: 100%; }
.mapa-botones { position: absolute; inset: 0; pointer-events: none; }
.zona-boton { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; display: flex; align-items: center; gap: .3rem;
              font: inherit; font-weight: 700; font-size: 1rem; background: #fff; border: 3px solid var(--contorno); border-radius: 999px;
              padding: .2rem .7rem; min-height: 40px; cursor: pointer; box-shadow: 0 3px 0 var(--contorno); white-space: nowrap; }
.zona-boton[data-estado='cerrada'], .zona-boton[data-estado='proximamente'] { background: #dfe6f2; color: var(--suave); }
.zona-boton[data-estado='aconsejada'] { background: var(--naranja); animation: latir 1.2s ease-in-out infinite; }
.zona-boton[data-estado='completa'] { background: var(--verde); }
.zona-boton[aria-pressed='true'] { outline: 4px solid var(--morado); }
.aviso-mapa { position: absolute; left: .6rem; bottom: .4rem; margin: 0; background: #fff; border: 2px solid var(--contorno); border-radius: 10px; padding: .1rem .5rem; font-size: .9rem; }
.panel-mapa { display: flex; flex-direction: column; gap: .3rem; overflow: auto; }
.lista-misiones { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .3rem; }
.lista-misiones li { border: 3px solid var(--borde); border-radius: 14px; padding: .2rem .4rem; background: var(--panel-2); }
.lista-misiones li.cerrada { opacity: .6; }
.lista-misiones .mision-nombre { font-weight: 700; display: block; margin-bottom: .15rem; font-size: .95rem; }
.rondas-mapa { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; }
.rondas-mapa .btn { min-height: 34px; padding: .1rem .2rem; font-size: .85rem; }
.btn.hecha { background: #c9f5d6; }
.profe { margin-top: auto; border-top: 3px dashed var(--borde); padding-top: .2rem; }
.profe h3 { font-size: .85rem; margin: 0; }
.profe-botones { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.profe-abrir { display: flex; gap: .3rem; align-items: center; }
.profe select { font: inherit; font-size: .95rem; border: 3px solid var(--contorno); border-radius: 10px; min-height: 38px; background: #fff; }
.profe-aviso { font-size: .8rem; color: var(--suave); min-height: 1em; margin: .1rem 0 0; }
.confirmar { background: #fff6d6; border: 3px solid var(--contorno); border-radius: 12px; padding: .3rem .5rem; }

/* Misión */
.zona-mision { flex: 1; min-height: 0; display: grid; grid-template-columns: 270px 1fr 290px; gap: .6rem; padding: .6rem; }
.zona-mision.sin-herramientas { grid-template-columns: 270px 1fr; }
.zona-mision.sin-herramientas .herramientas { display: none; }
.panel-mision { display: flex; flex-direction: column; gap: .25rem; overflow: hidden; }
.mision-numero { margin: 0; font-weight: 700; color: var(--naranja-2); }
.objetivo { display: flex; align-items: center; gap: .3rem; margin: 0; font-size: .92rem; background: #fff6d6; border: 2px solid var(--contorno); border-radius: 10px; padding: .15rem .4rem; }
.objetivo .icono { width: 26px; height: 26px; flex: none; }
.rondas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; }
.rondas .btn { min-height: 36px; padding: .1rem .15rem; font-size: .8rem; }
.rondas .btn.actual { background: var(--naranja); }
.pasos { list-style: none; padding: 0; margin: .2rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: .2rem; }
.pasos li { border: 2px solid var(--borde); border-radius: 10px; padding: .05rem .4rem; font-size: .88rem; color: var(--suave); }
.pasos li.hecho { background: #e3f8e9; color: var(--texto); }
.pasos li.actual { background: var(--amarillo); border-color: var(--contorno); color: var(--texto); font-weight: 700; }
.panel-mision .bit-habla { margin-top: auto; }
.centro { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: .5rem; }
.escena { flex: 1; min-height: 0; width: 100%; background: #bfe9ff; border: 4px solid var(--contorno); border-radius: 18px; box-shadow: 0 6px 0 var(--contorno); }
.acciones { flex: none; display: flex; gap: .5rem; align-items: center; justify-content: center; min-height: 56px; flex-wrap: wrap; }
.herramientas { display: flex; flex-direction: column; gap: .4rem; overflow: auto; }
.carta { min-width: 120px; font-size: 1.15rem; display: inline-flex; align-items: center; gap: .3rem; justify-content: center; }
.carta svg { width: 34px; height: 34px; }
.carta[aria-pressed='true'] { background: var(--cian); }
.contador { font-weight: 700; font-size: 1.1rem; margin: 0; }

/* Reglas de la Granja */
.regla { display: flex; flex-direction: column; gap: .15rem; border: 3px solid var(--contorno); border-radius: 14px; padding: .2rem .35rem; background: #fff7dc; }
.regla.encendida { background: var(--amarillo); }
.regla.rota { background: #ffd6d6; }
.regla-fila { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.regla-pal { font-weight: 900; font-size: .9rem; }
.regla .hueco { min-height: 32px; padding: .05rem .35rem; font-size: .9rem; }
.regla .btn.pequeno { min-height: 30px; }
.regla .hueco.vacio { background: #fff; border-style: dashed; }
.regla .quitar { margin-left: auto; min-height: 30px; padding: 0 .45rem; }
.paleta { display: grid; grid-template-columns: repeat(2, 1fr); gap: .25rem; border: 3px solid var(--contorno); border-radius: 14px; padding: .3rem; background: #fff; }
.paleta .btn { min-height: 30px; padding: .05rem .2rem; font-size: .82rem; display: flex; align-items: center; justify-content: center; gap: .2rem; box-shadow: 0 2px 0 var(--contorno); }
.muestra { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--contorno); }
.si-no { font-size: .88rem; color: var(--suave); border-radius: 10px; padding: .1rem .3rem; }
.si-no.rota { background: #ffd6d6; color: var(--texto); border: 3px solid #ff3b3b; }
.contador-reglas { font-size: 1.25rem; font-weight: 900; text-align: center; background: var(--naranja); border: 3px solid var(--contorno); border-radius: 14px; }

/* Gafas de la Mina */
.gafas { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
.gafas .btn { display: flex; flex-direction: column; align-items: center; padding: .2rem; min-height: 64px; font-size: .9rem; }
.gafas .btn svg { width: 64px; height: 30px; }
.leyenda { display: flex; flex-direction: column; gap: .2rem; font-size: .95rem; }
.leyenda span { display: flex; align-items: center; gap: .3rem; }
.leyenda i { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--contorno); display: inline-block; }

/* SVG de las escenas */
.escena text, .laberinto text { font-family: 'Andika', system-ui, sans-serif; }
.tocable { cursor: pointer; }
/* Lo que se dibuja encima (líneas, marcas, insignias, «?») no tapa lo que hay debajo. */
.interrogante, .lineas, .linea, .insignia, .marca, .sombra-bit, .resalte, .marca-eleccion, [data-cae], [data-examen] { pointer-events: none; }
.elegida > .marca-eleccion { display: inline; }
.marca-eleccion { display: none; }
.arrastrando { opacity: .85; pointer-events: none; }
.cubito .on { display: none; }
.cubito.encendido .on { display: inline; }
.cubito.encendido .off { display: none; }

/* Premio */
.zona-premio { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 340px; gap: .7rem; padding: .7rem; }
.laberinto { width: 100%; height: 100%; min-height: 0; background: #e8f6d8; border: 4px solid var(--contorno); border-radius: 18px; box-shadow: 0 6px 0 var(--contorno); }
.panel-premio { display: flex; flex-direction: column; gap: .5rem; }

/* Capas (fin de ronda, Embrollo) */
.capa { position: absolute; inset: 0; background: rgba(20, 24, 46, .55); display: flex; align-items: center; justify-content: center; z-index: 20; }
.tarjeta { background: #fff; border: 4px solid var(--contorno); border-radius: 22px; box-shadow: 0 8px 0 var(--contorno); padding: 1rem 1.6rem;
           display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; max-width: 560px; }
.tarjeta h2 { font-size: 1.8rem; }
.descubre { font-size: 1.3rem; font-weight: 700; background: var(--amarillo); border: 3px solid var(--contorno); border-radius: 14px; padding: .3rem .8rem; }
.fin-botones { display: flex; gap: .6rem; }
.embrollo-dibujo { width: 260px; height: 260px; overflow: visible; }

/* La guía de la primera vez (como en Chispa) */
#guia { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
.guia-velo { position: fixed; background: rgba(20, 24, 46, .62); pointer-events: auto; }
.guia-marco { position: fixed; border: 5px solid var(--amarillo); border-radius: 16px; box-shadow: 0 0 0 4px var(--contorno), 0 0 24px 6px rgba(255, 210, 63, .6);
              animation: latir 1.1s ease-in-out infinite; pointer-events: none; }
.guia-burbuja { position: fixed; display: flex; align-items: center; gap: .5rem; max-width: 400px; background: #fff; border: 4px solid var(--contorno);
                border-radius: 18px; padding: .35rem .8rem .35rem .4rem; box-shadow: 0 6px 0 var(--contorno); pointer-events: none; z-index: 52; }
.guia-burbuja.sacudir { animation: sacudir .4s; }
.guia-bit { width: 52px; height: 60px; flex: none; overflow: visible; }
.guia-frase { margin: 0; font-size: 1.3rem; font-weight: 700; }
.guia-mano { position: fixed; left: 0; top: 0; width: 60px; height: 99px; z-index: 53; pointer-events: none; transition: transform .42s ease, opacity .3s, scale .18s; overflow: visible; }
.guia-mano.oculta { opacity: 0; }
.guia-mano.toca { scale: .82; }
.guia-mano.sin-movimiento { transition: opacity .3s; }
.guia-ya-se { position: fixed; right: 18px; bottom: 18px; z-index: 54; pointer-events: auto; font-size: 1.15rem; background: var(--cian); }
.guia-ya-se.izquierda { right: auto; left: 18px; }

@keyframes latir { 50% { opacity: .55; } }
@keyframes sacudir { 25% { translate: -8px 0; } 75% { translate: 8px 0; } }
@keyframes rebote { 50% { translate: 0 -10px; } }
.rebota { animation: rebote .5s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) {
  .zona-boton[data-estado='aconsejada'], .guia-marco, .guia-burbuja.sacudir, .rebota { animation: none; }
  .guia-mano { transition: opacity .3s; }
}

/* Pantallas pequeñas: pensado para 1024 × 600 o más (como Chispa). */
#aviso-tamano { display: none; }
@media (max-width: 999px), (max-height: 579px) {
  #aviso-tamano { display: flex; position: fixed; inset: 0; z-index: 100; background: var(--cielo-2); color: var(--texto);
    align-items: center; justify-content: center; text-align: center; padding: 2rem; font-size: 1.3rem; font-weight: 700; }
}
/* Pantallas bajas (1366 × 768 con barras del navegador): todo más compacto. */
@media (max-height: 720px) {
  body { font-size: 15.5px; }
  .zona-mision { grid-template-columns: 240px 1fr 260px; gap: .5rem; padding: .5rem; }
  .zona-mision.sin-herramientas { grid-template-columns: 240px 1fr; }
  .bit-cara { width: 56px; height: 64px; }
  .bit-grande { width: 150px; height: 172px; }
  .zona-mapa { grid-template-columns: 1fr 320px; }
  .panel-mapa .bit-cara { width: 48px; height: 56px; }
  .panel-mapa .bocadillo { min-height: 0; font-size: .95rem; padding: .25rem .5rem; }
  .panel-mapa h2 { font-size: 1.05rem; margin: 0; }
  .bocadillo { font-size: 1rem; }
  .pasos li { font-size: .8rem; }
}
@media (max-width: 1200px) {
  .zona-mision { grid-template-columns: 230px 1fr 250px; }
  .zona-mision.sin-herramientas { grid-template-columns: 230px 1fr; }
}