:root {
  --bg: #0d0b1a;
  --panel: #15122b;
  --ink: #e8e6ff;
  --accent: #5cf2c0;
  --accent2: #ff5c8a;
  --warn: #ffd34d;
  --dim: #7b76a8;
  --good: #5cf2c0;
  --bad: #ff5c8a;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
  background: #050410;
  color: var(--ink);
  font-family: "Press Start 2P", "Courier New", monospace;
  -webkit-font-smoothing: none;
  overflow: hidden;
}
#app {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* dvh: en móvil descuenta la barra del navegador (si no, corta la parte de abajo del pad) */
  display: flex;
  flex-direction: column;
  background: #050410;
}
#app:fullscreen,
#app:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
}

/* ---------- Controles (pantalla completa / sonido) ---------- */
#controls {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 30;
  display: flex;
  gap: 6px;
}
#controls button {
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  color: var(--ink);
  background: rgba(10, 8, 28, 0.7);
  border: 1px solid #342e66;
  border-radius: 5px;
  padding: 6px 8px;
}
#controls button:hover {
  border-color: var(--accent);
}

/* ---------- Stage: split izquierda/derecha ---------- */
#stage {
  position: relative;
  flex: 1;
  display: flex;
  min-height: 0;
  border-top: 3px solid #1a1538;
}
#left {
  position: relative;
  flex: 1.35;
  min-width: 0;
  background: var(--bg);
  overflow: hidden;
  border-right: 3px solid #2a2350;
}
#scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  /* CLAVE para el arrastre táctil: sin esto, en móvil el navegador interpreta el
     drag como scroll/pinch, dispara pointercancel y deja de enviar pointermove →
     las piezas de los minijuegos no siguen al dedo. `none` cede TODO el gesto al juego. */
  touch-action: none;
  -ms-touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
#left::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.1) 3px
  );
  mix-blend-mode: multiply;
}
#right {
  flex: 1;
  min-width: 280px;
  max-width: 480px;
  background: #0a0820;
  display: flex;
  padding: 10px;
}

/* ---------- PATCH-PAD (carcasa de hardware) ---------- */
#pad {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* carcasa de plástico GRIS retro (mismo diseño que el dispositivo recogido) */
  background: linear-gradient(
    180deg,
    #8e8e9c 0%,
    #74747f 7%,
    #67676f 50%,
    #50505a 92%,
    #5e5e68 100%
  );
  border-radius: 18px;
  padding: 16px 16px 12px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.28),
    inset 0 -3px 6px rgba(0, 0, 0, 0.5),
    inset 0 0 0 2px #3a3a44,
    0 10px 24px rgba(0, 0, 0, 0.55);
}
/* tornillos en las esquinas */
.screw {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #b9b9c4, #3a3a46 70%);
  box-shadow:
    inset 0 0 0 1px #2a2a32,
    0 1px 1px rgba(0, 0, 0, 0.5);
}
.screw::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 1px;
  background: linear-gradient(45deg, transparent 40%, #0c0a1e 40%, #0c0a1e 60%, transparent 60%);
}
.screw.tl {
  top: 6px;
  left: 6px;
}
.screw.tr {
  top: 6px;
  right: 6px;
}
.screw.bl {
  bottom: 6px;
  left: 6px;
}
.screw.br {
  bottom: 6px;
  right: 6px;
}

/* botones laterales (a ambos lados, como el dispositivo) */
.pad-side {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 9px;
  z-index: 3;
}
.pad-side.left {
  left: -3px;
}
.pad-side.right {
  right: -3px;
}
.pad-side i {
  width: 7px;
  height: 18px;
  border-radius: 3px;
  background: linear-gradient(#646470, #3a3a44);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 2px 2px rgba(0, 0, 0, 0.5);
}

#pad-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: #20202c;
  margin: 0 6px 8px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
#pad-name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  letter-spacing: 1px;
}
.pad-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5cf2c0;
  box-shadow:
    0 0 6px #5cf2c0,
    0 0 2px #fff inset;
  animation: led 1.4s steps(1) infinite;
}
@keyframes led {
  50% {
    background: #1c7a5e;
    box-shadow: 0 0 2px #1c7a5e;
  }
}
#pad-byte {
  color: #173a50;
  font-size: 9px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* pantalla empotrada (cristal oscuro con bisel y scanlines) */
#pad-screen {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: linear-gradient(180deg, #07120e, #050a14);
  border-radius: 8px;
  padding: 12px;
  box-shadow:
    inset 0 0 0 2px #0a3a30,
    inset 0 0 14px rgba(0, 0, 0, 0.9),
    inset 0 2px 8px rgba(0, 0, 0, 0.8),
    0 0 0 3px #34343e;
  overflow: hidden;
}
#pad-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 255, 180, 0.04) 3px
  );
}
#pad-screen > * {
  position: relative;
  z-index: 1;
}

/* botonera decorativa inferior */
#pad-deco {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 26px;
  margin: 8px 6px 0;
  opacity: 0.9;
}
.dpad {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: linear-gradient(#5a5a64, #3a3a44);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 2px 3px rgba(0, 0, 0, 0.5);
  position: relative;
}
.dpad::before,
.dpad::after {
  content: "";
  position: absolute;
  background: #23232b;
  border-radius: 1px;
}
.dpad::before {
  left: 9px;
  top: 3px;
  width: 4px;
  height: 16px;
}
.dpad::after {
  top: 9px;
  left: 3px;
  width: 16px;
  height: 4px;
}
.grille {
  flex: 1;
  height: 14px;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, #2a2a32 0 3px, #46464f 3px 6px);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}
.abtn,
.bbtn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: #0c0a1e;
  font-family: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 2px 3px rgba(0, 0, 0, 0.5);
}
.abtn {
  background: radial-gradient(circle at 35% 30%, #7df0c8, #2c9b78);
}
.bbtn {
  background: radial-gradient(circle at 35% 30%, #ff9ab5, #c23f64);
}
#byte-hint {
  font-size: 8px;
  line-height: 1.7;
  color: var(--warn);
  background: #06040f;
  border-left: 3px solid #36d6ff;
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 10px;
  min-height: 34px;
}
.diag {
  margin-bottom: 10px;
}
.diag-label {
  font-size: 7px;
  color: var(--dim);
  margin-bottom: 3px;
  letter-spacing: 1px;
}
.diag-bar {
  height: 7px;
  background: #221c44;
  border: 1px solid #3a3470;
  border-radius: 3px;
  overflow: hidden;
}
#diag-fill {
  height: 100%;
  width: 5%;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  transition: width 0.4s ease;
}

#pad-idle {
  margin: auto;
  text-align: center;
  color: var(--dim);
  font-size: 9px;
  line-height: 2;
}
#pad-idle .dim {
  color: #3f3a68;
  font-size: 7px;
}

/* ---------- Pregunta dentro del PATCH-PAD ---------- */
#panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}
#q-meta {
  font-size: 7px;
  color: var(--dim);
  margin-bottom: 6px;
  letter-spacing: 1px;
}
#q-text {
  font-size: clamp(9px, 1.05vw, 12px);
  line-height: 1.8;
  margin-bottom: 12px;
  text-shadow: 1px 1px 0 #000;
}
#q-text code {
  font-family: "Courier New", monospace;
  background: #06040f;
  color: var(--accent);
  padding: 1px 4px;
  border-radius: 3px;
}
#q-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.opt {
  font-family: inherit;
  font-size: clamp(8px, 1vw, 10px);
  text-align: left;
  line-height: 1.6;
  color: var(--ink);
  background: #1c1840;
  border: 2px solid #342e66;
  border-radius: 5px;
  padding: 10px 12px;
  cursor: pointer;
  transition:
    transform 0.05s,
    background 0.12s,
    border-color 0.12s;
}
.opt:hover {
  background: #261f55;
  border-color: var(--accent);
}
.opt:active {
  transform: translateY(2px);
}
.opt .k {
  color: var(--warn);
  margin-right: 8px;
}
.opt.correct {
  background: #123a2c;
  border-color: var(--good);
}
.opt.wrong {
  background: #3a1224;
  border-color: var(--bad);
}
.opt:disabled {
  cursor: default;
  opacity: 0.9;
}

/* find-the-bug */
#q-options.code-block {
  display: block;
  background: #06040f;
  border: 2px solid #342e66;
  border-radius: 6px;
  padding: 6px;
  font-family: "Courier New", monospace;
}
.codeline {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  text-align: left;
  font-family: "Courier New", monospace;
  font-size: clamp(9px, 1vw, 12px);
  line-height: 1.6;
  color: #cfe9ff;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 4px;
  padding: 3px 6px;
  cursor: pointer;
  white-space: pre;
}
.codeline:hover {
  background: #16123a;
  border-color: var(--accent2);
}
.codeline .ln {
  color: #4b4680;
  user-select: none;
}
.codeline .src {
  white-space: pre-wrap;
}
.codeline.correct {
  background: #123a2c;
  border-color: var(--good);
}
.codeline.wrong {
  background: #3a1224;
  border-color: var(--bad);
}

#q-feedback {
  margin-top: 12px;
  font-size: clamp(8px, 1vw, 9px);
  line-height: 1.8;
  padding: 10px 12px;
  border-radius: 5px;
  background: #06040f;
}
#q-feedback.good {
  border-left: 4px solid var(--good);
}
#q-feedback.bad {
  border-left: 4px solid var(--bad);
}
#q-feedback .tag {
  display: block;
  margin-bottom: 6px;
}
#q-feedback.good .tag {
  color: var(--good);
}
#q-feedback.bad .tag {
  color: var(--bad);
}
#q-next {
  margin-top: 12px;
  font-family: inherit;
  font-size: 10px;
  background: var(--accent);
  color: #06281d;
  border: none;
  border-radius: 5px;
  padding: 12px 18px;
  cursor: pointer;
}
#q-next:hover {
  filter: brightness(1.1);
}

/* ---------- HUD ---------- */
#hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  font-size: 8px;
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
}
.hud-left,
.hud-right {
  display: flex;
  gap: 12px;
  align-items: center;
}
.combo span {
  color: var(--warn);
}
.score span {
  color: var(--accent);
}
.streak {
  color: var(--accent2);
}
.wave span {
  color: #36d6ff;
}
/* Vida de los 3 nodos: icono + barra + valor (legible, no solo color) */
.nodes {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--dim);
}
.nodes .node {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.nodes .node i {
  display: inline-block;
  height: 5px;
  width: 0;
  background: currentColor;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  max-width: 22px;
}
.nodes .node b {
  font-weight: normal;
}
.nodes .node.ok {
  color: #5cf2c0;
}
.nodes .node.warn {
  color: #ffd34d;
}
.nodes .node.low {
  color: #ff5c8a;
}
.nodes .node.dead {
  color: #6b6690;
}

/* ---------- Cinemática ---------- */
#cutscene {
  position: absolute;
  inset: 0;
  z-index: 9;
}
#cs-box {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 5%;
  background: rgba(6, 4, 15, 0.92);
  border: 3px solid var(--accent);
  border-radius: 8px;
  padding: 14px 16px 16px;
  min-height: 64px;
  box-shadow:
    0 0 0 2px #06040f,
    0 8px 24px rgba(0, 0, 0, 0.6);
}
#cs-speaker {
  margin: 0 0 8px;
  font-size: 9px;
  color: var(--warn);
  text-shadow: 1px 1px 0 #000;
}
#cs-text {
  margin: 0;
  font-size: clamp(8px, 1.1vw, 11px);
  line-height: 1.9;
  color: var(--ink);
  text-shadow: 1px 1px 0 #000;
}
#cs-next {
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-family: inherit;
  font-size: 10px;
  color: var(--accent);
  background: transparent;
  border: none;
  cursor: pointer;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink {
  50% {
    opacity: 0.2;
  }
}
#cs-skip {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: inherit;
  font-size: 7px;
  color: var(--dim);
  background: rgba(6, 4, 15, 0.7);
  border: 1px solid #342e66;
  border-radius: 4px;
  padding: 6px 8px;
  cursor: pointer;
}
#cs-skip:hover {
  color: var(--ink);
}

/* ---------- Overlays (título / resultado) ---------- */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: radial-gradient(120% 120% at 50% 0%, #1a1538 0%, #0a0820 75%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  gap: 10px;
  overflow-y: auto;
}
h1 {
  font-size: clamp(18px, 5vw, 40px);
  margin: 0;
  color: var(--accent);
  letter-spacing: 2px;
}
.glitch {
  text-shadow:
    3px 0 var(--accent2),
    -3px 0 #36d6ff;
  animation: flick 2.6s infinite steps(1);
}
@keyframes flick {
  0%,
  92%,
  100% {
    text-shadow:
      3px 0 var(--accent2),
      -3px 0 #36d6ff;
  }
  93% {
    text-shadow:
      -3px 0 var(--accent2),
      3px 0 #36d6ff;
  }
  96% {
    text-shadow:
      2px 2px var(--accent2),
      -2px -2px #36d6ff;
  }
}
.subtitle {
  font-size: clamp(8px, 1.8vw, 12px);
  margin: 2px 0;
}
.tagline {
  font-size: clamp(7px, 1.4vw, 9px);
  color: var(--dim);
  margin: 0 0 6px;
}
.title-card {
  max-width: 540px;
  font-size: clamp(7px, 1.3vw, 9px);
  line-height: 1.9;
  color: #c9c5f0;
  background: rgba(8, 6, 24, 0.6);
  border: 2px solid #2a2350;
  border-radius: 6px;
  padding: 12px 14px;
}
.title-card b {
  color: var(--accent2);
}
#player-name,
#player-email {
  font-family: inherit;
  text-align: center;
  color: var(--accent);
  background: #06040f;
  border: 2px solid #342e66;
  border-radius: 6px;
  padding: 12px;
  width: min(86vw, 320px);
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
#player-name {
  font-size: 11px;
  text-transform: uppercase;
}
#player-email {
  font-size: 10px;
  letter-spacing: 0.5px;
}
#player-name::placeholder,
#player-email::placeholder {
  color: #4b4680;
}
#player-name:focus,
#player-email:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(92, 242, 192, 0.18);
}
.consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 360px;
  font-size: 7px;
  line-height: 1.7;
  color: var(--dim);
  text-align: left;
  cursor: pointer;
}
.consent input {
  margin-top: 1px;
  accent-color: var(--accent);
}
button#start,
.result-actions button,
.result-actions a {
  font-family: inherit;
  cursor: pointer;
  border: none;
  border-radius: 6px;
  padding: 14px 22px;
  font-size: 12px;
  color: #06281d;
  background: var(--accent);
  box-shadow: 0 4px 0 #2c9b78;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.05s,
    box-shadow 0.05s,
    filter 0.12s;
}
button#start:hover,
.result-actions button:hover,
.result-actions a:hover {
  filter: brightness(1.08);
}
button#start:active,
.result-actions button:active,
.result-actions a:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 #2c9b78;
}
button#start:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
.hint {
  font-size: 7px;
  color: var(--dim);
  margin-top: 4px;
}
.hint b {
  color: var(--warn);
}
.start-msg {
  font-size: 8px;
  line-height: 1.7;
  color: var(--bad);
  margin-top: 8px;
  max-width: 340px;
  text-align: center;
}

#result-belt {
  font-size: clamp(14px, 4vw, 28px);
  color: var(--warn);
  margin: 0;
}
#result-stats {
  font-size: clamp(7px, 1.3vw, 10px);
  line-height: 2;
  background: rgba(8, 6, 24, 0.6);
  border: 2px solid #2a2350;
  border-radius: 6px;
  padding: 10px 16px;
}
#result-stats b {
  color: var(--accent);
}
#cert {
  width: min(90vw, 560px);
  height: auto;
  border: 3px solid #2a2350;
  border-radius: 6px;
  image-rendering: auto;
}
.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.result-actions button,
.result-actions a {
  font-size: 9px;
  padding: 12px 16px;
}
#share {
  background: #36d6ff;
  box-shadow: 0 4px 0 #1f8fb0;
}
#retry {
  background: var(--warn);
  box-shadow: 0 4px 0 #b89225;
  color: #2a1e04;
}
.hidden {
  display: none !important;
}

/* ---------- Página del certificado (certificado.html) ---------- */
/* html/body llevan overflow:hidden para el juego; esta página SÍ debe poder scrollear. */
body.cert-page {
  overflow: auto;
}
.cert-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  background: radial-gradient(120% 120% at 50% 0%, #1a1538 0%, #0a0820 75%);
}
.cert-title {
  font-size: clamp(14px, 4vw, 24px);
  color: var(--accent);
  margin: 0;
  letter-spacing: 2px;
}
.cert-page #cert {
  width: min(92vw, 620px);
  height: auto;
  border: 3px solid #2a2350;
  border-radius: 8px;
  image-rendering: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.cert-empty {
  font-size: 9px;
  line-height: 1.9;
  color: var(--dim);
  max-width: 380px;
  text-align: center;
}
.cert-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.cert-actions button,
.cert-actions .btn-link {
  font-family: inherit;
  cursor: pointer;
  border: none;
  border-radius: 6px;
  padding: 12px 18px;
  font-size: 10px;
  color: #06281d;
  background: var(--accent);
  box-shadow: 0 4px 0 #2c9b78;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.05s,
    box-shadow 0.05s,
    filter 0.12s;
}
.cert-actions button:hover,
.cert-actions .btn-link:hover {
  filter: brightness(1.08);
}
.cert-actions button:active,
.cert-actions .btn-link:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 #2c9b78;
}
.cert-back {
  background: var(--warn);
  box-shadow: 0 4px 0 #b89225;
  color: #2a1e04;
}

/* ---------- Candidatura (CTA "Aplicar al puesto") ---------- */
#apply {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: min(90vw, 380px);
  background: rgba(8, 6, 24, 0.6);
  border: 2px solid var(--good, #5cf2c0);
  border-radius: 8px;
  padding: 14px 16px;
}
#apply-pitch {
  font-size: 8px;
  line-height: 1.9;
  color: var(--dim);
  text-align: center;
  margin: 0;
}
#apply-pitch b {
  color: var(--good, #5cf2c0);
}
#apply-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  align-items: center;
}
#apply-send {
  font-family: inherit;
  cursor: pointer;
  border: none;
  border-radius: 6px;
  padding: 12px 18px;
  font-size: 10px;
  color: #06281d;
  background: var(--good, #5cf2c0);
  box-shadow: 0 4px 0 #2c9b78;
  transition:
    transform 0.05s,
    box-shadow 0.05s,
    filter 0.12s;
}
#apply-send:hover {
  filter: brightness(1.08);
}
#apply-send:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 #2c9b78;
}
#apply-done {
  font-size: 9px;
  color: var(--good, #5cf2c0);
  text-align: center;
  margin: 0;
}

/* ---------- Transparencia / derechos del candidato ---------- */
.info {
  max-width: min(92vw, 420px);
  text-align: left;
  background: rgba(8, 6, 24, 0.5);
  border: 1px solid var(--line, #2a2350);
  border-radius: 8px;
  padding: 8px 12px;
}
.info > summary {
  cursor: pointer;
  font-size: 8px;
  color: var(--accent);
  line-height: 1.8;
}
.info > div {
  font-size: 8px;
  line-height: 1.9;
  color: var(--dim);
  margin-top: 6px;
}
.info p {
  margin: 6px 0;
}
.info b {
  color: var(--txt, #e8e6ff);
}
.explain-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}
.area-chip {
  font-size: 8px;
  padding: 3px 7px;
  border-radius: 10px;
  border: 1px solid var(--line, #2a2350);
  color: var(--dim);
}
.area-chip.lvl-fuerte {
  color: var(--good, #5cf2c0);
  border-color: var(--good, #5cf2c0);
}
.area-chip.lvl-medio {
  color: var(--accent, #36d6ff);
  border-color: var(--accent, #36d6ff);
}
.area-chip.lvl-a-reforzar {
  color: var(--warn, #ffd34d);
  border-color: var(--warn, #ffd34d);
}
#contest-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
#contest-msg {
  flex: 1;
  min-width: 180px;
  font-family: inherit;
  font-size: 8px;
  color: var(--accent);
  background: #06040f;
  border: 1px solid var(--line, #2a2350);
  border-radius: 5px;
  padding: 9px;
}
#contest-send {
  font-family: inherit;
  font-size: 8px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  padding: 9px 12px;
  color: #2a0a16;
  background: var(--warn, #ffd34d);
}
#contest-done {
  font-size: 8px;
  color: var(--good, #5cf2c0);
  margin: 6px 0 0;
}

/* ---------- PATCH-PAD: vista de historia (cinemática) ---------- */
#pad-story {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
}
#pad-byte-canvas {
  width: 120px;
  height: 84px;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 6px rgba(54, 214, 255, 0.4));
}
#pad-story-speaker {
  margin: 0;
  font-size: 10px;
  color: var(--warn);
  letter-spacing: 1px;
}
#pad-story-text {
  margin: 0;
  font-size: clamp(8px, 1.05vw, 11px);
  line-height: 1.9;
  color: var(--ink);
  max-width: 96%;
}
#pad-story-hint {
  margin: 6px 0 0;
  font-size: 8px;
  color: var(--accent);
  animation: blink 1s steps(1) infinite;
}

/* el pad aparece (cuando llega el dispositivo) */
#pad {
  transition: opacity 0.25s ease;
}
#pad.arriving {
  opacity: 0;
}
/* animación de encendido de la pantalla */
#pad.booting #pad-screen {
  animation: powerOn 0.9s ease-out;
  transform-origin: center;
}
@keyframes powerOn {
  0% {
    transform: scaleY(0.02);
    filter: brightness(3);
    opacity: 0;
  }
  18% {
    transform: scaleY(0.06);
    opacity: 1;
  }
  40% {
    transform: scaleY(1);
    filter: brightness(2.4);
  }
  55% {
    filter: brightness(0.35);
  }
  70% {
    filter: brightness(1.9);
  }
  100% {
    transform: scaleY(1);
    filter: brightness(1);
  }
}

/* ---------- Responsive: apilar en vertical ---------- */
@media (max-width: 820px) {
  /* Apilado: escena arriba, PATCH-PAD abajo. Repartimos por PROPORCIÓN (flex), no
     por vh, para no pelearnos con la barra del navegador. El pad se lleva la mayor
     parte (~60%) porque ahí se LEEN las respuestas: si se cortan, el juego (que va
     a contrarreloj) se vuelve injugable. */
  #stage {
    flex-direction: column;
  }
  #left {
    flex: 2 1 0;
    min-height: 0;
    border-right: none;
    border-bottom: 3px solid #2a2350;
  }
  #right {
    flex: 3 1 0;
    min-height: 0;
    max-width: none;
    padding: 6px;
  }
  /* Recortamos el "cromo" decorativo del pad para ganar alto útil de pantalla. */
  #pad {
    padding: 10px 10px 8px;
    border-radius: 14px;
  }
  #pad-top {
    margin: 0 4px 6px;
  }
  #pad-screen {
    padding: 10px;
  }
  #pad-deco {
    display: none;
  } /* botonera decorativa (dpad/altavoz/A-B): fuera en móvil */
  .pad-side {
    display: none;
  } /* botones laterales decorativos: evitan desbordes en pantallas estrechas */
  /* Enunciado + 4 opciones más compactos para que quepan sin scroll. */
  #q-text {
    margin-bottom: 8px;
  }
  #q-options {
    gap: 6px;
  }
  .opt {
    padding: 8px 10px;
  }
  #q-next {
    margin-top: 8px;
    padding: 10px 14px;
  }
}

/* Móviles bajos (SE, 360×640, apaisado…): la escena cede más alto y apretamos el
   interlineado para que quepan enunciado + 4 respuestas sin scroll. */
@media (max-width: 820px) and (max-height: 680px) {
  #left {
    flex: 3 1 0;
  }
  #right {
    flex: 5 1 0;
  }
  #q-meta {
    margin-bottom: 4px;
  }
  #q-text {
    margin-bottom: 6px;
    line-height: 1.6;
  }
  #q-options {
    gap: 5px;
  }
  .opt {
    padding: 7px 9px;
    line-height: 1.5;
  }
}

/* ============ TUTORIAL GUIADO (coach) — solo Nivel 1, 1ª vez ============ */
/* Foco rojo móvil sobre cada parte del HUD + burbuja de BYTE que lo explica. */
#coach {
  position: absolute;
  inset: 0;
  z-index: 24;
}
#coach.hidden {
  display: none;
}

/* El "recuadro rojo": marca el objetivo y, con un box-shadow enorme, oscurece
   TODO lo de alrededor (efecto foco/spotlight sin recortes). */
#coach-box {
  position: absolute;
  border: 2px solid #ff3b5c;
  border-radius: 6px;
  box-shadow:
    0 0 0 9999px rgba(6, 4, 20, 0.62),
    0 0 14px #ff3b5c,
    inset 0 0 10px rgba(255, 59, 92, 0.35);
  pointer-events: none;
  transition:
    left 0.32s ease,
    top 0.32s ease,
    width 0.32s ease,
    height 0.32s ease;
  animation: coachPulse 1.1s ease-in-out infinite;
}
@keyframes coachPulse {
  0%,
  100% {
    border-color: #ff3b5c;
    box-shadow:
      0 0 0 9999px rgba(6, 4, 20, 0.62),
      0 0 10px #ff3b5c,
      inset 0 0 8px rgba(255, 59, 92, 0.3);
  }
  50% {
    border-color: #ff7a96;
    box-shadow:
      0 0 0 9999px rgba(6, 4, 20, 0.62),
      0 0 20px #ff3b5c,
      inset 0 0 14px rgba(255, 59, 92, 0.5);
  }
}

/* Burbuja con BYTE y el texto del paso. */
#coach-bubble {
  position: absolute;
  width: 264px;
  max-width: 86%;
  background: rgba(13, 11, 28, 0.97);
  border: 2px solid #36d6ff;
  border-radius: 10px;
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.55),
    0 0 16px rgba(54, 214, 255, 0.25);
  padding: 12px 12px 10px;
  z-index: 2;
  transition:
    left 0.32s ease,
    top 0.32s ease;
}
#coach .coach-row {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
#coach .coach-byte {
  width: 48px;
  height: 48px;
  flex: none;
}
#coach-text {
  margin: 2px 0 0;
  font-size: 9px;
  line-height: 1.85;
  color: var(--ink);
}
#coach .coach-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
#coach-dots {
  font-size: 9px;
  color: #4a4570;
  letter-spacing: 2px;
}
#coach-next {
  font-family: inherit;
  font-size: 8px;
  color: #061018;
  background: #36d6ff;
  border: none;
  border-radius: 5px;
  padding: 7px 9px;
  cursor: pointer;
  letter-spacing: 0.5px;
}
#coach-next:hover {
  background: #6ee2ff;
}
#coach-skip {
  position: absolute;
  top: -11px;
  right: -10px;
  font-family: inherit;
  font-size: 7px;
  color: var(--dim);
  background: rgba(6, 4, 15, 0.92);
  border: 1px solid #342e66;
  border-radius: 5px;
  padding: 5px 7px;
  cursor: pointer;
}
#coach-skip:hover {
  color: var(--ink);
  border-color: #5cf2c0;
}