/* ==== Gamificación de Microprocesadores — versión web ==== */

:root {
  --bg: #10141f;
  --panel: #ffffff;
  --ink: #1d2333;
  --ink-soft: #5b6478;
  --accent: #e3350d;        /* rojo pokédex */
  --accent-dark: #b52a0a;
  --gold: #ffcb05;          /* amarillo pokémon */
  --blue: #2a75bb;
  --ok: #21b25f;
  --ok-soft: #e3f8ec;
  --bad: #e3350d;
  --bad-soft: #fdeae5;
  --border: #d7dbe7;
  --radius: 14px;
  --font-ui: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "SF Mono", "Cascadia Code", Consolas, Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: radial-gradient(1200px 700px at 50% 20%, #1c2438 0%, var(--bg) 70%);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  color: var(--ink);
  touch-action: manipulation;   /* sin zoom por doble toque */
  overscroll-behavior: none;    /* sin rebote elástico en móvil */
  /* A pantalla completa (PWA standalone, status bar black-translucent) el
     contenido se mete bajo la isla dinámica / notch: dejamos ese margen. En
     escritorio y navegadores sin notch los env() valen 0 y no afectan. */
  padding:
    env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#stage {
  position: relative;
  width: 768px;   /* main.js lo reescala: encoge en ventanas pequeñas, agranda en pasos de 0,5 (×1,5, ×2…) en grandes */
  height: 512px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 6px #262e44, 0 0 0 10px #0b0e16;
  background: #000;
}

/* en táctil el juego se pega arriba y deja la zona baja para los controles */
body.touch { align-items: flex-start; padding-top: calc(14px + env(safe-area-inset-top)); }

#game-canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  pointer-events: none;
}
#hud-lives { height: 28px; image-rendering: pixelated; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.hud-badge {
  background: rgba(16,20,31,.82);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 5px 12px;
  border-radius: 999px;
}
#hud-gear, #hud-map, #hud-medals {
  pointer-events: auto;
  background: rgba(16,20,31,.82);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform .15s;
}
#hud-map { margin-left: auto; font-size: 16px; }
#hud-medals { font-size: 16px; }
#hud-map:hover, #hud-medals:hover { transform: scale(1.15); }
#hud-gear:hover { transform: rotate(45deg); }
#hud-gear img { width: 18px; image-rendering: pixelated; }

/* ---------- Medallero ---------- */
.medals-box {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 22px 24px 20px;
  max-width: min(560px, 92vw);
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
  text-align: center;
}
.medals-box h2 { margin: 0 0 10px; color: var(--ink); }
#medals-count { display: inline-block; margin-bottom: 16px; }
#medals-grid {
  display: grid;
  /* minmax(0,1fr): sin el 0, el ancho de .medal-name (oculto pero ocupa sitio en
     las bloqueadas) infla columnas desiguales y la última se sale de la caja. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px 8px;
}
.medal { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.medal img {
  width: 100%; max-width: 62px; aspect-ratio: 1;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
  transition: transform .15s;
}
.medal.earned img:hover { transform: scale(1.12) rotate(-4deg); }
.medal.locked img { filter: grayscale(1) brightness(.45) contrast(.8); }
.medal-name { font-size: 10.5px; font-weight: 700; color: var(--ink-soft); line-height: 1.1; }
.medal.earned .medal-name { color: var(--ink); }
.medal.locked .medal-name { visibility: hidden; }
.medal.locked .medal-lock { position: absolute; font-size: 20px; }
.medal-wrap { position: relative; display: grid; place-items: center; width: 100%; }
#medals-games {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 14px;
  padding: 6px 12px;
  background: #f1f4fb;
  border: 1px solid var(--border);
  border-radius: 999px;
  display: inline-block;
}
.medals-hint { font-size: 12.5px; color: var(--ink-soft); margin-top: 10px; }
@media (max-width: 460px) {
  #medals-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Medalla recién ganada en la pantalla de fin de prueba */
.earned-medal { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.earned-medal img {
  width: 84px; height: 84px; image-rendering: pixelated;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.35));
  animation: medal-pop .5s ease-out;
}
.earned-medal .medal-name { font-size: 13px; color: var(--ink); }
@keyframes medal-pop {
  0% { transform: scale(0) rotate(-30deg); opacity: 0; }
  70% { transform: scale(1.2) rotate(8deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ---------- Minimapa ---------- */
#map-mission {
  font-size: 14px;
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(16,20,31,.9);
}
#map-frame { position: relative; }
#map-frame img {
  display: block;
  max-width: 92vw;
  max-height: 78vh;
  image-rendering: pixelated;
  border: 4px solid #2a3150;
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
}
.map-dot {
  position: absolute;
  width: 13px; height: 13px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,.4);
}
.dot-you { background: var(--blue); animation: map-pulse 1.3s ease-out infinite; }
.dot-target { background: var(--gold); }
@keyframes map-pulse {
  50% { box-shadow: 0 0 0 2px rgba(0,0,0,.4), 0 0 0 9px rgba(42,117,187,.3); }
}
.map-tp, .map-mg {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 12px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.7));
}

/* ---------- Caja de diálogo ---------- */
#dialog {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  display: flex;
  gap: 12px;
  background: #fffdf5;
  border: 4px solid #2a3150;
  border-radius: 12px;
  box-shadow: inset 0 0 0 2px #fff, 0 10px 25px rgba(0,0,0,.45);
  padding: 12px 14px;
  min-height: 110px;
  animation: pop-up .18s ease-out;
}
@keyframes pop-up { from { transform: translateY(12px); opacity: 0; } }
#dialog-portrait {
  width: 84px; height: 84px;
  align-self: center;
  image-rendering: pixelated;
  border-radius: 10px;
  border: 2px solid #2a3150;
  background: #e9ecf5;
}
#dialog-body { flex: 1; display: flex; flex-direction: column; }

/* en táctil el diálogo no cabe dentro del #stage encogido: pasa a fijo,
   abajo del viewport (los controles táctiles se ocultan mientras tanto) */
body.touch #dialog {
  position: fixed;
  left: calc(10px + env(safe-area-inset-left));
  right: calc(10px + env(safe-area-inset-right));
  bottom: calc(10px + env(safe-area-inset-bottom));
  max-width: 640px;
  margin: 0 auto;
  z-index: 16;
}
body.touch #dialog-portrait { width: 64px; height: 64px; }
/* En táctil, ≥16px evita que iOS/Android hagan zoom automático al enfocar el
   campo (descuadraría el quiz fijo). Los desplegables no lo sufren, pero se
   igualan por coherencia visual. */
body.touch .gap-input, body.touch .gap-select { font-size: 16px; }
#dialog-name {
  font-weight: 800;
  color: var(--blue);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
#dialog-text {
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-wrap;
  flex: 1;
}
#dialog-actions { display: flex; gap: 10px; margin-top: 6px; justify-content: flex-end; flex-wrap: wrap; }
.dialog-hint {
  font-size: 12px;
  color: var(--ink-soft);
  background: #eef1f8;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 10px;
}
.dialog-hint b { color: var(--ink); }

/* ---------- Pantallas superpuestas ----------
   fixed (no absolute): ocupan el viewport entero a tamaño natural, aunque el
   #stage esté encogido en pantallas pequeñas */
.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(13,17,27,.86);
  backdrop-filter: blur(4px);
  z-index: 20;
  /* fixed → no hereda el padding del body: el contenido centrado y los botones
     de los bordes se apartan de la isla dinámica / notch por su cuenta */
  padding:
    env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#screen-title { background: linear-gradient(180deg, #2a75bb 0%, #173d63 55%, #10141f 100%); }
.title-logo { width: min(380px, 82vw); image-rendering: pixelated; filter: drop-shadow(0 8px 0 rgba(0,0,0,.25)); animation: float 3s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px); } }
.title-sub {
  color: var(--gold);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 14px;
  text-shadow: 0 2px 0 rgba(0,0,0,.4);
  text-align: center;
  padding: 0 12px;
}
.title-buttons { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; min-width: 240px; }
.title-credits img { height: 40px; margin-top: 10px; opacity: .9; }

/* ---------- Botones ---------- */
.btn {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 10px;
  border: 2px solid #2a3150;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 3px 0 #2a3150;
  transition: transform .08s, box-shadow .08s, background .15s;
}
.btn:hover { background: #f4f6fb; }
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 #2a3150; }
.btn-primary { background: var(--accent); border-color: var(--accent-dark); color: #fff; box-shadow: 0 3px 0 var(--accent-dark); }
.btn-primary:hover { background: #f03d12; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); box-shadow: none; }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-danger { color: var(--accent); border-color: var(--accent-dark); box-shadow: 0 3px 0 var(--accent-dark); }
.btn-danger:hover { background: #fff4f1; }
.btn-danger.confirm { background: var(--accent); border-color: var(--accent-dark); color: #fff; }
.btn-danger.confirm:hover { background: #f03d12; }
.btn:disabled { opacity: .35; cursor: default; pointer-events: none; }
.btn-small { font-size: 13px; padding: 7px 14px; border-radius: 8px; box-shadow: 0 2px 0 #2a3150; }
.btn-small.btn-primary { box-shadow: 0 2px 0 var(--accent-dark); }
.btn-small kbd { margin-left: 4px; }

/* ---------- Paneles ---------- */
.panel {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 26px 30px;
  width: min(520px, 92%);
  max-height: 92%;
  overflow: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.panel.center { text-align: center; align-items: center; }
.panel h2 { font-size: 22px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; }
.field em { font-weight: 400; color: var(--ink-soft); }
.field input[type="text"] {
  font-family: var(--font-ui);
  font-size: 15px;
  padding: 10px 12px;
  border: 2px solid var(--border);
  border-radius: 10px;
  outline: none;
  transition: border-color .15s;
}
.field input[type="text"]:focus { border-color: var(--blue); }
.gender-row { display: flex; gap: 12px; }
.gender-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: #fafbfe;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  transition: border-color .15s, background .15s;
}
.gender-card img { width: 48px; image-rendering: pixelated; }
.gender-card.selected { border-color: var(--accent); background: #fff4f1; }
.error { color: var(--bad); font-size: 14px; font-weight: 700; }

/* Pantalla de instrucciones (misión + instalar PWA) */
#instr-goal { font-size: 15px; line-height: 1.5; }
.instr-hint { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.instr-install {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.9;
  background: #f4f6fb;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
}
.instr-install strong { color: var(--ink); }
.help-keys { font-size: 12.5px; color: var(--ink-soft); font-weight: 400; line-height: 2; }
kbd {
  background: #eef1f8;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
}
.settings-buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.credits { font-size: 12px; color: var(--ink-soft); text-align: center; line-height: 1.6; }
input[type="range"] { accent-color: var(--accent); width: 100%; }
.volume-row { display: flex; align-items: center; gap: 10px; }
.volume-row input[type="range"] { flex: 1; }
.mute-btn {
  flex: none;
  width: 38px; height: 38px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s, border-color .15s, transform .08s;
}
.mute-btn:hover { background: #f4f6fb; }
.mute-btn:active { transform: scale(.92); }
.mute-btn.muted { border-color: var(--accent); background: var(--bad-soft); }

/* ---------- Overlay del test ---------- */
#quiz {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(42,117,187,.35), transparent 60%),
    radial-gradient(700px 500px at 10% 110%, rgba(227,53,13,.28), transparent 60%),
    rgba(10,13,22,.93);
  backdrop-filter: blur(6px);
}
#quiz-card {
  width: min(700px, 95%);
  max-height: 94%;
  background: var(--panel);
  border-radius: 16px;
  box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: quiz-in .22s ease-out;
}
@keyframes quiz-in { from { transform: scale(.94) translateY(14px); opacity: 0; } }

#quiz-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 10px;
}
#quiz-tag {
  background: var(--gold);
  color: #4d3f00;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
#quiz-title { font-weight: 800; font-size: 15px; flex: 1; }
#quiz-progress-label { font-size: 13px; color: var(--ink-soft); font-weight: 700; white-space: nowrap; }
#quiz-progress { height: 5px; background: #edf0f7; }
#quiz-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--blue), var(--accent));
  transition: width .25s ease;
}

#quiz-question {
  padding: 18px 22px 6px;
  font-size: 15.5px;
  line-height: 1.55;
  overflow: auto;
}
#quiz-question pre, #quiz-answers pre {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  background: #171c2b;
  color: #dce3f5;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 10px 0 4px;
  overflow-x: auto;
  white-space: pre-wrap;
}

#quiz-answers { padding: 12px 22px 6px; overflow: auto; flex: 1; }

/* Multiple choice */
.mc-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 14.5px;
  line-height: 1.45;
  background: #fafbfe;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 11px 14px;
  margin-bottom: 9px;
  cursor: pointer;
  transition: border-color .12s, background .12s, transform .12s;
}
.mc-option:hover { border-color: var(--blue); transform: translateX(3px); }
.mc-option .mc-letter {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: #e8ecf5;
  color: var(--ink-soft);
  font-weight: 900;
  font-size: 13px;
  text-transform: uppercase;
  transition: background .12s, color .12s;
}
.mc-option.selected { border-color: var(--accent); background: #fff4f1; }
.mc-option.selected .mc-letter { background: var(--accent); color: #fff; }
.mc-option code { font-family: var(--font-mono); font-size: 13px; background: #eef1f8; border-radius: 5px; padding: 1px 5px; }

/* Texto con huecos (dropdown y fill-in) */
.gap-text { white-space: pre-wrap; }
.gap-select, .gap-input {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--blue);
  border-radius: 8px;
  padding: 4px 8px;
  margin: 2px 3px;
  vertical-align: middle;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.gap-select:focus, .gap-input:focus { box-shadow: 0 0 0 3px rgba(42,117,187,.25); }
.gap-input { width: 150px; }
.gap-input.answered, .gap-select.answered { border-color: var(--ok); background: var(--ok-soft); }
.gap-number {
  display: inline-grid;
  place-items: center;
  min-width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  margin-right: 4px;
  vertical-align: middle;
}

#quiz-prev {
  background: #fff;
  color: var(--ink-soft);
  border-color: var(--border);
  box-shadow: 0 3px 0 var(--border);
}
#quiz-prev:hover { color: var(--ink); border-color: #b9c0d4; }

/* "Abandonar": btn-ghost está pensado para fondos oscuros (texto blanco);
   sobre la tarjeta blanca del quiz necesita sus propios colores */
#quiz-quit {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--border);
  box-shadow: none;
}
#quiz-quit:hover { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); }

#quiz-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 20px 16px;
  border-top: 1px solid #edf0f7;
  flex-wrap: wrap;
  flex-shrink: 0;
}
#quiz-dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #d9dfec;
  transition: background .15s, transform .15s;
}
.dot.answered { background: var(--blue); }
.dot.current { transform: scale(1.45); background: var(--accent); }

/* ---------- Resultado del test ---------- */
.result-icon { font-size: 46px; }
.result-title { font-size: 24px; font-weight: 900; }
.result-sub { color: var(--ink-soft); line-height: 1.5; }
.key-badge {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .35em;
  padding: 10px 20px 10px 24px;
  background: #fff8dd;
  color: #7a6200;
  border: 2px dashed var(--gold);
  border-radius: 12px;
}
.result-grid { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.result-q {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  font-weight: 900;
  font-size: 15px;
}
.result-q.ok  { background: var(--ok-soft); color: var(--ok); }
.result-q.bad { background: var(--bad-soft); color: var(--bad); }

/* Aviso de última vida (recuperar vidas con Fran) */
.result-warn {
  align-self: stretch;
  text-align: left;
  line-height: 1.5;
  font-size: 14px;
  color: #7a3d00;
  background: #fff2e0;
  border: 2px solid #ffb45c;
  border-radius: 12px;
  padding: 12px 14px;
}

/* Enunciados de las preguntas falladas (sin solución) */
.result-fails {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.result-fails-head { font-size: 13px; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.result-fail {
  display: flex;
  gap: 10px;
  align-items: baseline;
  background: var(--bad-soft);
  border-radius: 10px;
  padding: 8px 12px;
}
.result-fail-num {
  flex: none;
  font-weight: 900;
  font-size: 13px;
  color: var(--bad);
}
.result-fail-text { font-size: 13.5px; line-height: 1.45; min-width: 0; overflow-wrap: anywhere; }
.result-fail-text pre {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.45;
  background: #171c2b;
  color: #dce3f5;
  border-radius: 8px;
  padding: 8px 10px;
  margin: 6px 0 2px;
  overflow-x: auto;
  white-space: pre-wrap;
}
/* Detalle de fallo por hueco/opción (sin desvelar la solución) */
.result-fail-marks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mark-bad {
  font-size: 12px;
  font-weight: 700;
  color: var(--bad);
  background: #fff;
  border: 1px solid var(--bad);
  border-radius: 999px;
  padding: 2px 9px;
}
.mark-bad i { font-weight: 600; opacity: .8; }

/* ---------- Minijuegos (Zipi / Zape) ---------- */
.mg-card {
  position: relative;
  background: var(--panel);
  border-radius: 16px;
  padding: 22px 24px 24px;
  width: min(420px, 92vw);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  animation: quiz-in .22s ease-out;
}
.mg-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: #fff;
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  display: grid; place-items: center;
  transition: color .12s, border-color .12s, background .12s;
}
.mg-close:hover { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); }
.mg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding-right: 28px; }
.mg-title { font-size: 17px; font-weight: 900; color: var(--ink); }
.mg-record { font-size: 12px; font-weight: 800; color: var(--ink-soft); white-space: nowrap; }
.mg-score { font-size: 14px; font-weight: 700; color: var(--ink-soft); text-align: center; margin: 4px 0 12px; }
.mg-score b { color: var(--accent); font-size: 18px; }
.mg-hint { font-size: 12px; color: var(--ink-soft); text-align: center; margin-top: 12px; }

/* feedback de acierto/fallo (flash del recuadro) */
.mg-flash-ok { animation: mg-ok .35s ease-out; }
.mg-flash-bad { animation: mg-bad .4s ease-out; }
@keyframes mg-ok  { 0% { background: var(--ok-soft); } 100% { background: var(--panel); } }
@keyframes mg-bad { 0%,60% { transform: translateX(0); background: var(--bad-soft); } 15% { transform: translateX(-7px); } 30% { transform: translateX(6px); } 45% { transform: translateX(-4px); } 100% { transform: translateX(0); background: var(--panel); } }

/* Zipi: binario → hex */
.mg-timebar { height: 8px; background: #edf0f7; border-radius: 999px; overflow: hidden; margin-bottom: 4px; }
.mg-timefill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--ok), var(--gold) 60%, var(--accent)); border-radius: 999px; }
.mg-prompt { text-align: center; margin: 6px 0 14px; }
.mg-bin {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .08em;
  color: #9ef0b4;
  background: #171c2b;
  border-radius: 10px;
  padding: 12px 8px;
}
.mg-arrow { font-size: 20px; font-weight: 800; color: var(--ink-soft); margin-top: 8px; }
.mg-hex { font-family: var(--font-mono); color: var(--accent); font-size: 24px; letter-spacing: .1em; }
.mg-arrow sub { font-size: 11px; color: var(--ink-soft); }
.mg-keypad { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.mg-key {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 800;
  padding: 10px 0;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: #fafbfe;
  color: var(--ink);
  cursor: pointer;
  transition: background .1s, border-color .1s, transform .06s;
}
.mg-key:hover { border-color: var(--blue); background: #eef4fb; }
.mg-key:active { transform: translateY(2px); }
.mg-key-wide { grid-column: span 3; }
.mg-key-ok { background: var(--accent); border-color: var(--accent-dark); color: #fff; }
.mg-key-ok:hover { background: #f03d12; border-color: var(--accent-dark); }

/* Zape: Simon de LEDs */
.mg-status { font-size: 13.5px; font-weight: 700; color: var(--ink); text-align: center; min-height: 20px; margin-bottom: 12px; }
.mg-pads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 280px;
  margin: 0 auto;
}
.mg-pad {
  aspect-ratio: 1;
  border-radius: 16px;
  border: 3px solid rgba(0,0,0,.25);
  cursor: pointer;
  opacity: .45;
  transition: opacity .08s, transform .06s, box-shadow .08s;
}
.mg-pad:active { transform: scale(.97); }
.mg-pad.lit { opacity: 1; box-shadow: 0 0 22px 4px currentColor; }
.mg-pad-0 { background: var(--ok);   color: var(--ok); }
.mg-pad-1 { background: var(--accent); color: var(--accent); }
.mg-pad-2 { background: var(--gold); color: var(--gold); }
.mg-pad-3 { background: var(--blue); color: var(--blue); }

/* Menú de la recreativa */
.mg-menu { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; }
.mg-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  font: inherit;
  background: #fafbfe;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  transition: border-color .12s, background .12s, transform .12s;
}
.mg-menu-item:hover { border-color: var(--blue); background: #eef4fb; transform: translateX(3px); }
.mg-menu-icon { font-size: 26px; flex: none; }
.mg-menu-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.mg-menu-name { font-weight: 800; font-size: 15px; color: var(--ink); }
.mg-menu-desc { font-size: 12px; color: var(--ink-soft); line-height: 1.3; }
.mg-menu-record { font-size: 12px; font-weight: 800; color: var(--ink-soft); white-space: nowrap; flex: none; }
.mg-menu-item.locked { cursor: default; opacity: .6; background: #f1f2f6; }
.mg-menu-item.locked:hover { border-color: var(--border); background: #f1f2f6; transform: none; }
.mg-menu-item.locked .mg-menu-name { color: var(--ink-soft); }
.mg-menu-item.locked .mg-menu-record { color: #b58f00; }

/* Tira / anillo de LEDs (Equilibrista, Francotirador, Gato y ratón) */
.mg-strip { display: flex; justify-content: center; gap: 8px; margin: 12px 0; }
.mg-led {
  width: 30px; height: 30px; border-radius: 50%;
  background: #e6e9f2; border: 2px solid #cfd5e6; box-sizing: border-box;
  transition: background .05s, box-shadow .05s;
}
.mg-led.center { border-color: var(--gold); border-style: dashed; }
.mg-led.on,
.mg-led.player { background: var(--blue); border-color: var(--blue); box-shadow: 0 0 12px 2px rgba(42,117,187,.6); }
.mg-led.target { background: var(--gold); border-color: #b58f00; box-shadow: 0 0 10px 1px rgba(255,203,5,.6); }
.mg-led.cursor,
.mg-led.chaser { background: var(--accent); border-color: var(--accent-dark); box-shadow: 0 0 12px 2px rgba(227,53,13,.6); }
.mg-led.aligned { background: var(--ok); border-color: #178a48; box-shadow: 0 0 14px 3px rgba(33,178,95,.7); }
.mg-strip-btns { display: flex; gap: 8px; justify-content: center; margin-top: 4px; }
.mg-strip-btns .mg-key-wide { grid-column: auto; min-width: 92px; }

.mg-ring { position: relative; width: 180px; height: 180px; margin: 10px auto; }
.mg-led.ring { position: absolute; transform: translate(-50%, -50%); }

/* El Rosco (pasapalabra) */
.mg-rosco-ring {
  position: relative; width: min(260px, 76vw); aspect-ratio: 1; margin: 6px auto 10px;
}
.mg-rl {
  position: absolute; transform: translate(-50%, -50%);
  width: 23px; height: 23px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 900; color: var(--ink-soft);
  background: #eef0f7; border: 2px solid var(--border);
  transition: transform .12s, background .12s, border-color .12s, color .12s;
}
.mg-rl.pass { background: var(--gold); border-color: #b58f00; color: #4a3a00; }
.mg-rl.ok   { background: var(--ok);  border-color: #178a48; color: #fff; }
.mg-rl.bad  { background: var(--bad); border-color: #b02a1a; color: #fff; }
.mg-rl.cur  {
  transform: translate(-50%, -50%) scale(1.35);
  background: var(--blue); border-color: var(--blue); color: #fff;
  box-shadow: 0 0 12px 2px rgba(42,117,187,.6); z-index: 2;
}
.mg-rosco-clue { text-align: center; min-height: 62px; margin-bottom: 10px; }
.mg-rosco-lead { font-size: 12px; font-weight: 900; color: var(--gold); text-transform: uppercase; letter-spacing: .5px; }
.mg-rosco-def { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-top: 3px; }
.mg-rosco-input { display: flex; gap: 6px; align-items: stretch; }
.mg-rosco-input input {
  flex: 1; min-width: 0; font: inherit; font-size: 16px; font-weight: 700;
  color: var(--ink); background: #fafbfe; border: 2px solid var(--border);
  border-radius: 10px; padding: 8px 12px;
}
.mg-rosco-input input:focus { outline: none; border-color: var(--blue); background: #fff; }
.mg-rosco-input .mg-key { flex: 0 0 auto; min-width: 46px; padding: 8px 10px; font-size: 18px; }

/* Clasifica el componente (taller) */
.mg-comp {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #171c2b; color: #dce3f5;
  border-radius: 12px; padding: 14px; margin: 8px 0 12px;
  min-height: 58px; text-align: center;
}
.mg-comp-ic { font-size: 26px; }
.mg-comp-name { font-size: 17px; font-weight: 800; }
.mg-bins { display: flex; flex-direction: column; gap: 7px; }
.mg-bin {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  font: inherit; font-size: 14.5px; font-weight: 700; color: var(--ink);
  background: #fafbfe; border: 2px solid var(--border); border-radius: 10px;
  padding: 9px 12px; cursor: pointer;
  transition: border-color .1s, background .1s, transform .06s;
}
.mg-bin:hover { border-color: var(--blue); background: #eef4fb; }
.mg-bin:active { transform: translateY(1px); }
.mg-bin-k {
  flex: none; width: 20px; height: 20px; display: grid; place-items: center;
  border-radius: 6px; background: #e8ecf5; color: var(--ink-soft);
  font-size: 12px; font-weight: 900;
}
.mg-bin-ic { font-size: 18px; flex: none; }
.mg-bin.bin-ok  { border-color: var(--ok);  background: var(--ok-soft); }
.mg-bin.bin-bad { border-color: var(--bad); background: var(--bad-soft); }

/* ¿Con qué lo hago? — elección A/B */
.mg-ab { display: flex; gap: 10px; margin-top: 2px; }
.mg-ab-btn {
  flex: 1; min-height: 66px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font: inherit; font-size: 15px; font-weight: 800; color: var(--ink); text-align: center;
  background: #fafbfe; border: 2px solid var(--border); border-radius: 12px; padding: 8px 10px;
  cursor: pointer; transition: border-color .1s, background .1s, transform .06s;
}
.mg-ab-btn:hover { border-color: var(--blue); background: #eef4fb; }
.mg-ab-btn:active { transform: translateY(1px); }
.mg-ab-btn .mg-ab-k { font-size: 11px; font-weight: 900; color: var(--ink-soft); }
.mg-ab-btn.ok  { border-color: var(--ok);  background: var(--ok-soft); }
.mg-ab-btn.bad { border-color: var(--bad); background: var(--bad-soft); }

/* Diseña el sistema — puzzle de asignación */
.mg-des { display: flex; flex-direction: column; gap: 7px; margin: 8px 0 12px; }
.mg-des-row {
  display: flex; align-items: center; gap: 8px;
  background: #fafbfe; border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px;
}
.mg-des-name { flex: 1; font-size: 13px; font-weight: 700; color: var(--ink); min-width: 0; }
.mg-des-p, .mg-des-t {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--ink);
  background: #fff; border: 2px solid var(--blue); border-radius: 8px; padding: 4px 6px; outline: none;
}
.mg-des-t { border-color: var(--gold); }
.mg-des-fixed { font-size: 11.5px; color: var(--ink-soft); font-style: italic; }
#mg-de-check { align-self: center; }

/* Resultado del minijuego */
.mg-result { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 0 4px; }
.mg-result-icon { font-size: 44px; }
.mg-result-score { font-size: 18px; font-weight: 700; color: var(--ink); }
.mg-result-score b { color: var(--accent); font-size: 24px; }
.mg-result-record { font-size: 14px; font-weight: 800; color: var(--gold); text-shadow: 0 1px 0 rgba(0,0,0,.15); }
.mg-result-btns { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }

/* ---------- Controles táctiles ---------- */
#touch-controls {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-between;
  /* el botón 💬 se centra vertical respecto a la cruceta (más alta), quedando
     a la altura de las flechas ◀ ▶; la cruceta ocupa toda la fila y no se mueve */
  align-items: center;
  padding:
    0 calc(16px + env(safe-area-inset-right))
    calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  pointer-events: none;   /* solo los botones capturan el dedo */
  z-index: 15;
}
.tc-btn {
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  border: 2px solid rgba(255,255,255,.4);
  border-radius: 12px;
  background: rgba(16,20,31,.55);
  color: rgba(255,255,255,.9);
  font-size: 20px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.tc-btn.pressed, .tc-btn:active { background: rgba(227,53,13,.75); border-color: rgba(255,255,255,.7); }
#touch-dpad {
  display: grid;
  grid-template-areas: ". up ." "left . right" ". down .";
  grid-template-columns: repeat(3, 54px);
  grid-template-rows: repeat(3, 54px);
  gap: 4px;
}
.tc-up { grid-area: up; } .tc-down { grid-area: down; }
.tc-left { grid-area: left; } .tc-right { grid-area: right; }
/* Botones estilo Game Boy: A (💬 hablar/aceptar) y B (🏃 correr), en diagonal
   como el DMG (A arriba-derecha, B abajo-izquierda). */
#touch-right { display: flex; align-items: center; gap: 8px; }
.gb-col { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.gb-col.gb-a { transform: translateY(-16px); } /* A más arriba */
.gb-col.gb-b { transform: translateY(16px); }  /* B más abajo */
.gb-btn {
  width: 66px; height: 66px;
  border-radius: 50%;
  font-size: 26px; font-weight: 900;
  color: #fff;
  border: 2px solid #4a1630;
  background: radial-gradient(circle at 35% 30%, #c94d80, #8e2d57 60%, #6e1f44);
  box-shadow: 0 5px 0 #531634, 0 7px 12px rgba(0,0,0,.45);
  text-shadow: 0 1px 1px rgba(0,0,0,.5);
}
.gb-btn.pressed, .gb-btn:active {
  transform: translateY(3px);
  background: radial-gradient(circle at 35% 30%, #b5416f, #7d2149 60%, #5e1a3a);
  box-shadow: 0 2px 0 #531634, 0 3px 8px rgba(0,0,0,.45);
  border-color: #4a1630;
}

/* ---------- Carga ---------- */
#loading { background: var(--bg); color: #8b94ab; z-index: 40; }
.loader {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 5px solid #2a3150;
  border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }