/* ============================================================================
   GameLab SanFran — ESTILOS COMPARTIDOS v2.0
   Los colores reales los inyecta motor.js desde el bloque gamelab-metadata.
   ============================================================================ */

:root{
  --primario:#ff3d7f;
  --secundario:#ffd166;
  --fondo:#12141f;
  --texto:#f4f0ff;
  --panel:rgba(255,255,255,.07);
  --borde:rgba(255,255,255,.14);
  --sombra:0 10px 30px rgba(0,0,0,.45);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  margin:0; padding:0; height:100%;
  background:var(--fondo); color:var(--texto);
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  overflow:hidden;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
button{ font-family:inherit; cursor:pointer; }

/* ---------- PANTALLAS ---------- */
.pantalla{
  display:none; position:fixed; inset:0;
  flex-direction:column; align-items:center; justify-content:center;
  padding:24px; text-align:center;
}
.pantalla.activa{ display:flex; animation:aparecer .28s ease; }
@keyframes aparecer{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

.pantalla::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(60% 45% at 20% 10%, color-mix(in srgb, var(--primario) 32%, transparent), transparent 70%),
    radial-gradient(55% 40% at 85% 85%, color-mix(in srgb, var(--secundario) 22%, transparent), transparent 70%);
}

h1{ font-size:clamp(26px,7vw,44px); margin:0 0 6px; line-height:1.05;
    color:var(--primario); letter-spacing:-.02em; text-shadow:0 3px 0 rgba(0,0,0,.35); }
.subtitulo{ color:var(--secundario); margin:0 0 24px; font-size:15px; font-weight:600; }
.texto{ max-width:460px; line-height:1.6; font-size:15px; opacity:.92; margin:0 0 20px; }

.btn{
  background:var(--primario); color:#fff; border:none; border-radius:14px;
  padding:15px 30px; font-size:16px; font-weight:700; margin:6px; min-width:220px;
  box-shadow:var(--sombra); transition:transform .12s ease, filter .12s ease;
}
.btn:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.btn:active{ transform:translateY(1px); }
.btn.secundario{
  background:transparent; border:2px solid var(--borde); color:var(--texto);
  box-shadow:none; font-weight:600; padding:13px 28px;
}
.btn.secundario:hover{ border-color:var(--secundario); color:var(--secundario); }

/* ---------- JUEGO ---------- */
#pantallaJuego{ padding:0; justify-content:flex-start; }

#hud{
  position:absolute; top:0; left:0; right:0; z-index:6;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px; background:linear-gradient(rgba(0,0,0,.55),transparent);
  font-size:14px; font-weight:600;
}
#hud .grupo{ display:flex; align-items:center; gap:8px; }
#hud .dato{ background:var(--panel); border:1px solid var(--borde);
  border-radius:10px; padding:5px 11px; backdrop-filter:blur(6px); }
#hud button{ background:var(--panel); border:1px solid var(--borde); color:var(--texto);
  font-size:16px; border-radius:10px; width:36px; height:34px; }
.corazon{ color:#ff5d73; font-size:16px; }
.corazon.vacio{ color:rgba(255,255,255,.22); }

#zonaJuego{ margin-top:56px; display:flex; justify-content:center; width:100%; }
#lienzo{ display:block; border-radius:14px; touch-action:none;
  box-shadow:var(--sombra); background:var(--fondo); }

#hudMisionTexto{
  position:absolute; top:52px; left:0; right:0; z-index:5;
  text-align:center; font-size:13px; opacity:.8; padding:0 20px;
  pointer-events:none;
}

#aviso{
  position:absolute; top:44%; left:50%; transform:translate(-50%,-50%) scale(.9);
  z-index:8; background:rgba(0,0,0,.72); border:1px solid var(--secundario);
  color:var(--secundario); padding:12px 24px; border-radius:14px;
  font-weight:700; font-size:17px; opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
#aviso.visible{ opacity:1; transform:translate(-50%,-50%) scale(1); }

@keyframes sacudida{
  0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-7px); }
  40%{ transform:translateX(7px); } 60%{ transform:translateX(-4px); } 80%{ transform:translateX(4px); }
}
#pantallaJuego.sacudir{ animation:sacudida .3s ease; }
@media (prefers-reduced-motion:reduce){ #pantallaJuego.sacudir{ animation:none; } .pantalla.activa{ animation:none; } }

/* ---------- GÉNEROS DE BOTONES (quiz, memoria, aventura) ---------- */
#areaDom{ margin-top:64px; padding:16px; width:100%; max-width:520px;
  overflow-y:auto; max-height:calc(100vh - 150px); }
.enunciado{ font-size:17px; line-height:1.5; margin:0 0 18px; font-weight:600; }
.reloj{ height:7px; background:rgba(255,255,255,.14); border-radius:4px; overflow:hidden; margin-bottom:16px; }
.reloj i{ display:block; height:100%; width:100%; background:var(--primario);
  transition:width .1s linear; border-radius:4px; }

.opcion{
  display:block; width:100%; text-align:left;
  background:var(--panel); color:var(--texto);
  border:2px solid var(--borde); border-radius:13px;
  padding:14px 16px; margin-bottom:11px; font-size:15px; line-height:1.4;
  transition:border-color .15s, background .15s, transform .1s;
}
.opcion:hover{ border-color:var(--secundario); }
.opcion.seleccionado{ border-color:var(--secundario); background:rgba(255,255,255,.13);
  transform:translateX(4px); box-shadow:0 0 0 3px color-mix(in srgb, var(--secundario) 30%, transparent); }
.opcion.correcto{ border-color:#5ee08a; background:rgba(94,224,138,.16); }
.opcion.incorrecto{ border-color:#ff6b6b; background:rgba(255,107,107,.16); }
.opcion:disabled{ opacity:.9; cursor:default; }

.grilla{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.carta{ aspect-ratio:1; background:var(--panel); border:2px solid var(--borde);
  border-radius:13px; font-size:28px; color:var(--texto); display:flex;
  align-items:center; justify-content:center; transition:transform .18s, border-color .15s; }
.carta.seleccionado{ border-color:var(--secundario); transform:scale(1.06); }
.carta.emparejada{ border-color:var(--primario); opacity:.5; }
.carta svg{ width:64%; height:64%; }

/* ---------- CONTROLES TÁCTILES ---------- */
#controles{
  position:absolute; bottom:16px; left:0; right:0; z-index:6;
  display:flex; align-items:flex-end; justify-content:space-between; padding:0 18px;
}
.cruceta{ display:grid; grid-template-columns:repeat(3,46px); grid-template-rows:repeat(3,46px); gap:5px; }
.cruceta span{ display:block; }
.tecla{
  background:var(--panel); border:1px solid var(--borde); color:var(--texto);
  border-radius:12px; font-size:18px; backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
}
.tecla.activo{ background:var(--secundario); color:#111; }
.acciones{ display:flex; gap:10px; align-items:flex-end; }
.tecla.accion{ width:70px; height:70px; border-radius:50%; background:var(--primario);
  color:#fff; font-size:13px; font-weight:800; border:none; }
.tecla.accion.chica{ width:52px; height:52px; font-size:12px;
  background:var(--panel); border:1px solid var(--borde); color:var(--texto); }

@media (min-width:900px){ #controles{ opacity:.35; } #controles:hover{ opacity:1; } }

/* ---------- RANKING ---------- */
#ranking{ display:none; margin-top:18px; width:100%; max-width:320px; }
#ranking.visible{ display:block; }
#ranking h3{ font-size:13px; text-transform:uppercase; letter-spacing:.08em;
  opacity:.6; margin:0 0 8px; }
.fila-ranking{ display:flex; justify-content:space-between; gap:10px;
  padding:7px 12px; background:var(--panel); border-radius:9px; margin-bottom:5px; font-size:14px; }

/* ---------- PIE ---------- */
.pie{ position:fixed; bottom:8px; left:0; right:0; text-align:center;
  font-size:10px; letter-spacing:.06em; color:rgba(255,255,255,.28); pointer-events:none; }
.marcador-grande{ font-size:46px; font-weight:800; color:var(--secundario); margin:6px 0 2px; }