/* =========================================================
   NOCHE DE JUEGOS EN FAMILIA — hoja de estilos única
   Paleta:  noche #17123A · violeta #2B1F63 · crema #FFF6E9
            amarillo #FFC93C · coral #FF5F6D · turquesa #2EC4B6
            lila #A66CFF · verde #4ADE80
   ========================================================= */

:root{
  --noche:#17123A;
  --violeta:#2B1F63;
  --crema:#FFF6E9;
  --amarillo:#FFC93C;
  --coral:#FF5F6D;
  --turquesa:#2EC4B6;
  --lila:#A66CFF;
  --verde:#4ADE80;
  --sombra-ficha: 0 8px 0 rgba(0,0,0,.28);
  --radio:26px;
  --display:'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --texto:'Nunito', -apple-system, 'Segoe UI', system-ui, sans-serif;
}

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

html, body{ height:100%; }

body{
  font-family:var(--texto);
  color:var(--crema);
  background:
    radial-gradient(1100px 700px at 15% -10%, #3A2A85 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 110%, #5B2A6E 0%, transparent 55%),
    var(--noche);
  background-attachment:fixed;
  overflow-x:hidden;
  -webkit-user-select:none;
  user-select:none;
}

#app{ min-height:100dvh; }

/* ---------- Navegación entre pantallas ---------- */
.pantalla{ display:none; }
.pantalla.activa{
  display:flex;
  flex-direction:column;
  min-height:100dvh;
  padding:20px 20px 32px;
  animation:entrar .28s ease-out;
}
@keyframes entrar{
  from{ opacity:0; transform:translateY(14px) scale(.99); }
  to{ opacity:1; transform:none; }
}

/* =========================================================
   HUB
   ========================================================= */
.hub-header{ text-align:center; padding:18px 0 26px; }

.eyebrow{
  font-size:.82rem; letter-spacing:.22em; text-transform:uppercase;
  font-weight:800; color:var(--amarillo); opacity:.9;
}
.hub-titulo{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.4rem, 6vw, 4.2rem); line-height:.95; margin:10px 0 12px;
}
.hub-titulo span{
  color:var(--amarillo);
  display:inline-block;
  transform:rotate(-2deg);
}
.hub-bajada{ font-size:1.02rem; opacity:.78; max-width:44ch; margin:0 auto; }

.grilla{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(2, 1fr);
  max-width:1180px; width:100%; margin:0 auto;
}
@media (min-width:760px){ .grilla{ grid-template-columns:repeat(3, 1fr); gap:20px; } }
@media (min-width:1080px){ .grilla{ grid-template-columns:repeat(5, 1fr); } }

/* Fichas: se hunden al tocarlas, como una pieza de madera */
.ficha{
  position:relative;
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  min-height:150px; padding:18px 16px;
  border:none; border-radius:var(--radio);
  background:var(--ficha-color);
  color:var(--noche);
  text-align:left; cursor:pointer;
  font-family:var(--display); font-weight:800;
  box-shadow:var(--sombra-ficha);
  transition:transform .12s ease, box-shadow .12s ease;
}
.ficha:active{ transform:translateY(8px); box-shadow:0 0 0 rgba(0,0,0,.28); }
.ficha:focus-visible{ outline:4px solid var(--crema); outline-offset:4px; }
.ficha-emoji{ font-size:2.3rem; line-height:1; }
.ficha-nombre{ font-size:1.12rem; line-height:1.12; }
.ficha-tipo{
  font-family:var(--texto); font-weight:700; font-size:.76rem;
  text-transform:uppercase; letter-spacing:.06em; opacity:.62; margin-top:auto;
}

.c1{ --ficha-color:#FFC93C; }
.c2{ --ficha-color:#2EC4B6; }
.c3{ --ficha-color:#FF9F68; }
.c4{ --ficha-color:#FF5F6D; }
.c5{ --ficha-color:#A66CFF; }
.c6{ --ficha-color:#4ADE80; }
.c7{ --ficha-color:#7DD3FC; }
.c8{ --ficha-color:#FDA4AF; }
.c9{ --ficha-color:#FDE68A; }
.c10{ --ficha-color:#C4B5FD; }

.pie{ text-align:center; opacity:.45; font-size:.82rem; margin-top:28px; }
.pie code{ font-family:ui-monospace, Menlo, monospace; background:rgba(255,255,255,.08); padding:2px 6px; border-radius:6px; }

/* =========================================================
   BARRA SUPERIOR DE CADA JUEGO
   ========================================================= */
.barra{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding-bottom:16px; border-bottom:2px dashed rgba(255,246,233,.18);
  margin-bottom:20px;
}
.barra-titulo{ font-family:var(--display); font-size:1.35rem; font-weight:800; }
.barra-acciones{ margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.volver{
  min-height:60px; padding:0 22px;
  border:none; border-radius:18px;
  background:rgba(255,246,233,.12); color:var(--crema);
  font-family:var(--display); font-weight:800; font-size:1rem; cursor:pointer;
  transition:background .15s ease, transform .12s ease;
}
.volver:active{ transform:translateY(3px); background:rgba(255,246,233,.2); }

/* =========================================================
   BOTONES GENÉRICOS (mínimo 60px de alto)
   ========================================================= */
.boton{
  min-height:60px; padding:0 26px;
  border:none; border-radius:20px;
  background:var(--crema); color:var(--noche);
  font-family:var(--display); font-weight:800; font-size:1.05rem;
  cursor:pointer; box-shadow:0 6px 0 rgba(0,0,0,.3);
  transition:transform .12s ease, box-shadow .12s ease, opacity .15s ease;
}
.boton:active{ transform:translateY(6px); box-shadow:0 0 0 rgba(0,0,0,.3); }
.boton:focus-visible{ outline:4px solid var(--amarillo); outline-offset:3px; }
.boton.primario{ background:var(--amarillo); }
.boton.grande{ font-size:1.2rem; padding:0 34px; }
.boton.chico{ min-height:60px; font-size:.95rem; padding:0 18px; box-shadow:0 5px 0 rgba(0,0,0,.3); }
.boton[disabled]{ opacity:.45; pointer-events:none; }

.fila-botones{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }

/* =========================================================
   ESCENARIO (contenedor de juego)
   ========================================================= */
.escenario{
  flex:1; display:flex; flex-direction:column; gap:20px;
  max-width:1100px; width:100%; margin:0 auto;
}
.escenario.centrado{ align-items:center; justify-content:center; text-align:center; }
.escenario.doble{ flex-direction:row; align-items:center; justify-content:center; gap:40px; flex-wrap:wrap; }
.columna{ display:flex; flex-direction:column; gap:20px; align-items:center; max-width:520px; }

.instruccion{ font-size:1.05rem; opacity:.8; max-width:52ch; }
.instruccion.suave{ opacity:.5; font-size:.95rem; }
.mensaje-juego{ text-align:center; font-family:var(--display); font-size:1.2rem; color:var(--amarillo); min-height:1.6em; }
.marcador{
  font-family:var(--display); font-weight:800; font-size:1.1rem;
  background:rgba(255,246,233,.12); padding:10px 16px; border-radius:14px;
}
.marcador-grande{ font-family:var(--display); font-size:1.15rem; color:var(--amarillo); }
.oculto{ display:none !important; }

.tarjeta-resultado{
  background:var(--crema); color:var(--noche);
  border-radius:var(--radio); padding:26px 28px;
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.2rem, 3.2vw, 1.9rem); line-height:1.25;
  max-width:640px; box-shadow:0 8px 0 rgba(0,0,0,.28);
  animation:pop .25s ease-out;
}
.tarjeta-resultado.grande{ font-size:clamp(1.5rem, 4.5vw, 2.4rem); }
.tarjeta-resultado.vacia{
  background:rgba(255,246,233,.08); color:var(--crema);
  font-weight:600; font-family:var(--texto); font-size:1rem;
  box-shadow:none; animation:none;
}
@keyframes pop{
  0%{ transform:scale(.9); opacity:0; }
  70%{ transform:scale(1.03); }
  100%{ transform:scale(1); opacity:1; }
}

/* =========================================================
   1. RULETA
   ========================================================= */
.disco{
  width:min(62vw, 260px); height:min(62vw, 260px);
  border:none; border-radius:50%;
  background:conic-gradient(var(--amarillo) 0 25%, var(--coral) 0 50%, var(--turquesa) 0 75%, var(--lila) 0);
  color:var(--noche); font-family:var(--display); font-weight:800; font-size:1.6rem;
  cursor:pointer; position:relative;
  box-shadow:0 10px 0 rgba(0,0,0,.32);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.4);
}
.disco::after{
  content:''; position:absolute; inset:26px; border-radius:50%;
  background:var(--crema); z-index:-1;
}
.disco span{ position:relative; }
.disco.girando{ animation:girar .6s linear infinite; }
@keyframes girar{ to{ transform:rotate(360deg); } }

/* =========================================================
   2. MEMORICE
   ========================================================= */
.tablero-memorice{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:12px;
  max-width:720px; width:100%; margin:0 auto;
}
.carta{
  aspect-ratio:3/4; min-height:80px;
  border:none; border-radius:20px; cursor:pointer;
  background:var(--lila); box-shadow:0 6px 0 rgba(0,0,0,.3);
  font-size:clamp(1.8rem, 7vw, 3rem);
  display:flex; align-items:center; justify-content:center;
  transition:transform .18s ease, background .18s ease;
  color:transparent;
}
.carta::before{ content:'❔'; font-size:1.6rem; color:var(--noche); position:absolute; }
.carta.abierta, .carta.lograda{ background:var(--crema); color:inherit; }
.carta.abierta::before, .carta.lograda::before{ content:none; }
.carta.abierta{ transform:rotateY(0) scale(1.03); }
.carta.lograda{ background:var(--verde); box-shadow:0 6px 0 rgba(0,0,0,.18); pointer-events:none; }
.carta{ position:relative; }

/* =========================================================
   3. PIZARRA
   ========================================================= */
.palabra-secreta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:center; }
.concepto{
  font-family:var(--display); font-weight:800; font-size:1.5rem;
  background:var(--amarillo); color:var(--noche);
  padding:12px 22px; border-radius:18px;
}
.marco-canvas{
  flex:1; min-height:320px; border-radius:var(--radio); overflow:hidden;
  background:var(--crema); box-shadow:0 8px 0 rgba(0,0,0,.28);
}
#pizarra{ display:block; width:100%; height:100%; touch-action:none; cursor:crosshair; }
.color-btn{
  width:60px; height:60px; border-radius:50%; cursor:pointer;
  background:var(--c); border:4px solid rgba(255,246,233,.25);
}
.color-btn.activo{ border-color:var(--crema); transform:scale(1.08); }

/* =========================================================
   4. SEMÁFORO
   ========================================================= */
.semaforo{
  background:#0D0A22; border-radius:36px; padding:22px;
  display:flex; flex-direction:column; gap:18px;
  box-shadow:0 10px 0 rgba(0,0,0,.4);
}
.luz{
  width:88px; height:88px; border-radius:50%;
  background:rgba(255,255,255,.08);
  transition:background .12s ease, box-shadow .12s ease;
}
.luz.roja.on{ background:var(--coral); box-shadow:0 0 34px var(--coral); }
.luz.amarilla.on{ background:var(--amarillo); box-shadow:0 0 34px var(--amarillo); }
.luz.verde.on{ background:var(--verde); box-shadow:0 0 34px var(--verde); }

/* =========================================================
   5. DEBATE
   ========================================================= */
.reloj{ display:flex; flex-direction:column; align-items:center; gap:12px; width:min(100%, 520px); }
.reloj-numero{ font-family:var(--display); font-weight:800; font-size:clamp(3rem, 12vw, 5rem); line-height:1; }
.reloj-barra{ width:100%; height:18px; border-radius:99px; background:rgba(255,246,233,.14); overflow:hidden; }
.reloj-barra span{ display:block; height:100%; width:100%; background:var(--turquesa); transition:width .3s linear; }
.reloj.alerta .reloj-numero{ color:var(--coral); }
.reloj.alerta .reloj-barra span{ background:var(--coral); }

/* =========================================================
   6. CHARADAS
   ========================================================= */
.zona-tap{ align-items:center; justify-content:center; text-align:center; cursor:pointer; gap:16px; }
.palabra-gigante{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.6rem, 13vw, 7rem); line-height:1.02;
  color:var(--amarillo); word-break:break-word;
}

/* =========================================================
   7. CUENTOS
   ========================================================= */
.turno{
  font-family:var(--display); font-weight:800; font-size:1.5rem;
  color:var(--noche); background:var(--turquesa);
  padding:12px 22px; border-radius:18px; align-self:flex-start;
}
.hoja{
  flex:1; min-height:200px; overflow-y:auto;
  background:var(--crema); color:var(--noche);
  border-radius:var(--radio); padding:26px 30px;
  font-size:clamp(1.05rem, 2.4vw, 1.4rem); line-height:1.6;
  box-shadow:0 8px 0 rgba(0,0,0,.28);
}
.fila-input{ display:flex; gap:14px; flex-wrap:wrap; }
#cuentos-input{
  flex:1; min-width:220px; min-height:60px;
  border:none; border-radius:20px; padding:0 22px;
  font-family:var(--texto); font-size:1.1rem;
  background:rgba(255,246,233,.14); color:var(--crema);
}
#cuentos-input::placeholder{ color:rgba(255,246,233,.45); }
#cuentos-input:focus{ outline:4px solid var(--amarillo); }

/* =========================================================
   8. TRIVIA
   ========================================================= */
.pregunta{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.5rem, 4.5vw, 2.4rem); line-height:1.2;
  max-width:22ch; margin:0 auto 30px;
}
.opciones{ display:flex; flex-direction:column; gap:16px; width:min(100%, 620px); margin:0 auto; }
.opciones .boton{ width:100%; }
.opcion-correcta{ background:var(--verde) !important; }
.opcion-incorrecta{ background:var(--coral) !important; }

/* =========================================================
   9. BINGO
   ========================================================= */
.carton{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;
  max-width:720px; width:100%; margin:0 auto;
}
.casilla{
  min-height:110px; padding:14px; cursor:pointer;
  border:none; border-radius:20px;
  background:var(--crema); color:var(--noche);
  font-family:var(--display); font-weight:800; font-size:clamp(.9rem, 2.4vw, 1.15rem);
  line-height:1.2; box-shadow:0 6px 0 rgba(0,0,0,.28);
  transition:transform .12s ease, background .15s ease;
}
.casilla:active{ transform:translateY(5px); }
.casilla.marcada{ background:var(--verde); text-decoration:line-through; }

/* =========================================================
   10. MÁQUINA DEL TIEMPO
   ========================================================= */
.visor-anio{
  background:#0D0A22; border-radius:var(--radio);
  padding:24px 46px; box-shadow:inset 0 0 0 6px rgba(255,246,233,.12);
  font-family:var(--display); font-weight:800;
  font-size:clamp(3.4rem, 15vw, 7rem); line-height:1;
  color:var(--turquesa); letter-spacing:.06em;
}
.visor-anio.viajando{ animation:temblor .12s linear infinite; color:var(--amarillo); }
@keyframes temblor{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-3px); }
  75%{ transform:translateX(3px); }
}

/* =========================================================
   Accesibilidad y pantallas chicas
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
@media (max-width:520px){
  .barra-titulo{ font-size:1.1rem; width:100%; order:3; }
  .escenario.doble{ gap:22px; }
  .luz{ width:64px; height:64px; }
}