/* ============================================================
   FUGA 1985 — pantalla de juego y portada.
   La ciudad es un <canvas>; las pantallas (título, etapas, pausa,
   resultados…) son HTML encima, con la estética nocturna del juego.
   ============================================================ */
.fg-shell {
  --fg-ink: #f4f1ff; --fg-muted: #b9b2d8; --fg-bg: #0a0817; --fg-panel: rgba(14, 10, 32, .9);
  --fg-pink: #ff4fa3; --fg-cyan: #3df2ff; --fg-gold: #ffd166; --fg-green: #5dffa6; --fg-line: rgba(160, 140, 255, .28);
  display: flex; flex-direction: column; gap: 10px;
}
.play-fuga .page { max-width: 1400px; }
.fg-topbar { min-height: 44px; }
.fg-top-actions { display: flex; align-items: center; gap: 2px; }
.fg-top-actions .tool-btn { text-decoration: none; }
.fg-top-actions .tool-btn.is-off { color: var(--muted); }
.fg-top-actions .tool-btn.is-off svg path:last-child { opacity: .25; }

.fg-stage {
  position: relative; overflow: hidden; isolation: isolate;
  width: 100%; height: min(calc(100dvh - 150px), 62.5vw); min-height: 300px;
  border-radius: 16px; background: var(--fg-bg); color: var(--fg-ink);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 24px 60px -24px rgba(40, 10, 80, .55);
  font-family: var(--font-ui);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.fg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; image-rendering: pixelated; }

/* pantalla completa (API o, en iPhone, a toda ventana) */
.fg-shell.fg-full { position: fixed; inset: 0; z-index: 9999; background: #000; gap: 0; }
.fg-shell.fg-full .fg-topbar { display: none; }
.fg-shell.fg-full .fg-stage { height: 100%; border-radius: 0; flex: 1; }
.fg-shell:fullscreen { background: #000; }
@media (max-height: 520px) and (orientation: landscape) {
  /* teléfono acostado: el juego ocupa toda la altura */
  .play-fuga .topbar, .play-fuga .play-motto, .play-fuga .sidebar { display: none; }
  .play-fuga .app-main { margin-left: 0; }
  .play-fuga .page { padding: 0; max-width: none; }
  .fg-shell { gap: 0; }
  .fg-topbar { display: none; }
  .fg-stage { height: 100dvh; border-radius: 0; }
}
@media (max-width: 720px) and (orientation: portrait) {
  .fg-stage { height: calc(100dvh - 190px); min-height: 420px; border-radius: 12px; }
  .fg-top-actions .lbl { display: none; }
}

/* ---------- pantallas ---------- */
.fg-screen {
  position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 18px; overflow-y: auto;
  background: radial-gradient(120% 90% at 50% 10%, rgba(30, 10, 60, .35), rgba(5, 3, 15, .78));
}
.fg-screen[hidden] { display: none; }
.fg-title { background: linear-gradient(180deg, rgba(5, 3, 15, .15), rgba(5, 3, 15, .72) 70%); justify-content: flex-end; padding-bottom: 6%; }
.fg-logo { width: min(520px, 86%); height: auto; image-rendering: pixelated; filter: drop-shadow(0 6px 18px rgba(255, 60, 140, .35)); }
.fg-tagline { margin: -4px 0 4px; font-size: .95rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-cyan); text-shadow: 0 0 12px rgba(61, 242, 255, .6); text-align: center; }
.fg-menu { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: min(320px, 100%); }
.fg-title .fg-menu { display: grid; grid-template-columns: 1fr 1fr; width: min(460px, 100%); }
.fg-title .fg-menu .fg-btn-main, .fg-title .fg-menu [data-act="continue"] { grid-column: 1 / -1; }
.fg-hint { margin: 0; font-size: .78rem; color: var(--fg-muted); text-align: center; }
.fg-touchy .fg-hint { display: none; }
.fg-k { display: inline-block; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--fg-line); background: rgba(255, 255, 255, .06); font-family: var(--font-num); font-size: .78em; color: var(--fg-ink); }

.fg-btn {
  appearance: none; border: 1px solid var(--fg-line); background: rgba(20, 14, 44, .82); color: var(--fg-ink);
  min-height: 44px; padding: 0 18px; border-radius: 12px; cursor: pointer;
  font: 600 .92rem/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase;
  transition: transform .12s, background .15s, border-color .15s, box-shadow .15s;
}
.fg-btn:hover, .fg-btn:focus-visible { background: rgba(48, 30, 100, .9); border-color: var(--fg-cyan); box-shadow: 0 0 0 1px var(--fg-cyan), 0 0 22px rgba(61, 242, 255, .3); outline: none; }
.fg-btn:active { transform: translateY(1px) scale(.99); }
.fg-btn-main { background: linear-gradient(180deg, #ff5a8a, #d8264f); border-color: #ff8fb0; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.fg-btn-main:hover, .fg-btn-main:focus-visible { background: linear-gradient(180deg, #ff77a0, #e8365f); border-color: #fff; box-shadow: 0 0 0 1px #fff, 0 0 26px rgba(255, 80, 140, .55); }
.fg-btn-ghost { background: transparent; }
.fg-btn[hidden] { display: none; }

.fg-panel {
  width: min(560px, 100%); padding: 22px 22px 18px; border-radius: 18px;
  background: var(--fg-panel); border: 1px solid var(--fg-line);
  box-shadow: 0 0 0 1px rgba(255, 79, 163, .12), 0 30px 80px -30px rgba(255, 79, 163, .35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; flex-direction: column; gap: 10px; max-height: 100%;
}
.fg-wide { width: min(880px, 100%); }
.fg-scroll { overflow-y: auto; }
.fg-h { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.fg-win { color: var(--fg-green); text-shadow: 0 0 18px rgba(93, 255, 166, .45); }
.fg-lose { color: #ff6b81; text-shadow: 0 0 18px rgba(255, 60, 90, .45); }
.fg-kicker { margin: 0; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-pink); }
.fg-sub { margin: 0; color: var(--fg-muted); font-size: .9rem; }
.fg-goal { margin: 0; font-size: 1.02rem; line-height: 1.45; color: var(--fg-ink); }
.fg-facts { margin: 4px 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.fg-facts li { padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--fg-line); font-size: .8rem; color: var(--fg-muted); }
.fg-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.fg-row .fg-btn { flex: 1 1 auto; }

/* elegir etapa */
.fg-zones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fg-zone h3 { margin: 0 0 6px; font-size: .95rem; color: #fff; display: flex; gap: 8px; align-items: baseline; }
.fg-zone h3 span { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-cyan); }
.fg-zone[data-zone="2"] h3 span { color: var(--fg-gold); }
.fg-zone[data-zone="3"] h3 span { color: #7fb8ff; }
.fg-zone[data-zone="4"] h3 span { color: var(--fg-pink); }
.fg-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.fg-stage-b {
  appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  min-height: 86px; padding: 9px 10px; border-radius: 12px; cursor: pointer;
  background: rgba(20, 14, 44, .85); border: 1px solid var(--fg-line); color: var(--fg-ink); font-family: var(--font-ui);
}
.fg-stage-b b { font-family: var(--font-num); font-size: .78rem; color: var(--fg-muted); }
.fg-stage-b span { font-weight: 600; font-size: .86rem; line-height: 1.15; }
.fg-stage-b i { font-style: normal; color: var(--fg-gold); letter-spacing: .08em; font-size: .9rem; }
.fg-stage-b small { color: var(--fg-muted); font-size: .7rem; }
.fg-stage-b:hover:not(:disabled), .fg-stage-b:focus-visible { border-color: var(--fg-cyan); box-shadow: 0 0 0 1px var(--fg-cyan); outline: none; }
.fg-stage-b:disabled { opacity: .45; cursor: not-allowed; }

/* resultados */
.fg-stars { display: flex; gap: 8px; font-size: 2.3rem; line-height: 1; }
.fg-star { color: rgba(255, 255, 255, .15); }
.fg-star.on { color: var(--fg-gold); text-shadow: 0 0 16px rgba(255, 209, 102, .65); animation: fg-pop .45s both cubic-bezier(.2, 1.6, .4, 1); }
@keyframes fg-pop { from { transform: scale(.2) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
.fg-tally { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.fg-tl { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed rgba(255, 255, 255, .1); animation: fg-in .35s both; }
.fg-tl:last-child { border-bottom: 0; }
.fg-tl dt { color: var(--fg-muted); font-size: .88rem; }
.fg-tl dd { margin: 0; font-family: var(--font-num); font-weight: 600; color: #fff; }
@keyframes fg-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.fg-record { margin: 0; color: var(--fg-gold); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; animation: fg-pulse 1s infinite alternate; }
@keyframes fg-pulse { from { opacity: .65; } to { opacity: 1; } }

/* ayuda */
.fg-help { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; font-size: .9rem; line-height: 1.45; color: var(--fg-ink); }
.fg-help h3 { margin: 6px 0 4px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-cyan); }
.fg-help p { margin: 0 0 8px; }
.fg-keys, .fg-legend { margin: 0 0 8px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.fg-legend li { display: flex; gap: 10px; align-items: center; }
.fg-legend canvas { width: 36px; height: 36px; flex: none; image-rendering: pixelated; background: #1c1a29; border-radius: 8px; }

/* opciones */
.fg-opts { display: flex; flex-direction: column; gap: 12px; }
.fg-opts label { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .9rem; color: var(--fg-ink); }
.fg-opts input[type="range"] { width: 55%; accent-color: var(--fg-pink); }
.fg-opts select { min-height: 36px; border-radius: 8px; background: #1a1433; color: #fff; border: 1px solid var(--fg-line); padding: 0 8px; }
.fg-check { justify-content: flex-start !important; }
.fg-check input { width: 18px; height: 18px; accent-color: var(--fg-pink); }

/* récords */
.fg-rec-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fg-rec-top div { padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid var(--fg-line); display: flex; flex-direction: column; }
.fg-rec-top small { color: var(--fg-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.fg-rec-top b { font-family: var(--font-num); font-size: 1.2rem; color: #fff; }
.fg-rec { width: 100%; border-collapse: collapse; font-size: .86rem; }
.fg-rec th { text-align: left; color: var(--fg-muted); font-weight: 500; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; padding: 6px 4px; }
.fg-rec td { padding: 6px 4px; border-top: 1px solid rgba(255, 255, 255, .07); color: var(--fg-ink); }
.fg-rec td:nth-child(2) { color: var(--fg-gold); letter-spacing: .06em; }
.fg-rec td:nth-child(3), .fg-rec td:nth-child(4) { font-family: var(--font-num); }

.fg-confirm { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 18px; background: rgba(5, 3, 15, .7); }
.fg-confirm[hidden] { display: none; }

/* ---------- controles táctiles ---------- */
.fg-touch { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.fg-touch[hidden] { display: none; }
.fg-pad {
  position: absolute; left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom));
  width: min(176px, 38vmin); height: min(176px, 38vmin); pointer-events: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
}
.fg-pad-b {
  appearance: none; border: 1px solid rgba(255, 255, 255, .22); background: rgba(20, 14, 44, .5); border-radius: 14px; padding: 0;
  touch-action: none; position: relative;
}
.fg-pad-b::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translate(-50%, -50%);
  border: 9px solid transparent;
}
.fg-up { grid-area: 1 / 2; } .fg-up::after { border-bottom-color: rgba(255, 255, 255, .8); margin-top: -5px; }
.fg-down { grid-area: 3 / 2; } .fg-down::after { border-top-color: rgba(255, 255, 255, .8); margin-top: 5px; }
.fg-left { grid-area: 2 / 1; } .fg-left::after { border-right-color: rgba(255, 255, 255, .8); margin-left: -5px; }
.fg-right { grid-area: 2 / 3; } .fg-right::after { border-left-color: rgba(255, 255, 255, .8); margin-left: 5px; }
.fg-pad-b.on { background: rgba(255, 79, 163, .55); border-color: #fff; }
.fg-smoke-b {
  position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom));
  width: min(96px, 22vmin); height: min(96px, 22vmin); border-radius: 50%; pointer-events: auto; touch-action: none;
  border: 2px solid rgba(255, 255, 255, .5); background: radial-gradient(circle at 40% 35%, rgba(220, 225, 240, .55), rgba(80, 80, 110, .55));
  color: #fff; font: 700 .85rem/1 var(--font-ui); letter-spacing: .1em; text-shadow: 0 1px 2px #000;
}
.fg-smoke-b.on { transform: scale(.94); background: rgba(255, 255, 255, .7); color: #222; }
.fg-pause-b {
  position: absolute; right: max(12px, env(safe-area-inset-right)); top: max(56px, env(safe-area-inset-top)); pointer-events: auto;
  width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(10, 8, 24, .55);
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.fg-pause-b span { width: 4px; height: 16px; background: #fff; border-radius: 1px; }
.fg-rotate {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 6; margin: 0; width: min(320px, 86%);
  padding: 14px 16px; border-radius: 14px; background: rgba(10, 8, 24, .9); border: 1px solid var(--fg-line); color: var(--fg-ink);
  font-size: .9rem; text-align: center;
}
.fg-rotate[hidden] { display: none; }
.fg-rotate button { display: block; margin: 10px auto 0; min-height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--fg-line); background: transparent; color: var(--fg-cyan); font-weight: 600; }

@media (max-width: 720px) {
  .fg-zones { grid-template-columns: 1fr; }
  .fg-help { grid-template-columns: 1fr; }
  .fg-panel { padding: 16px 14px 14px; }
  .fg-title .fg-menu { grid-template-columns: 1fr 1fr; gap: 6px; }
  .fg-btn { min-height: 42px; font-size: .82rem; padding: 0 10px; }
}
@media (max-height: 520px) {
  .fg-screen { justify-content: flex-start; padding: 10px; }
  .fg-title { justify-content: center; }
  .fg-logo { width: min(300px, 50%); }
  .fg-title .fg-menu { grid-template-columns: repeat(3, 1fr); width: min(600px, 100%); }
  .fg-title .fg-menu .fg-btn-main, .fg-title .fg-menu [data-act="continue"] { grid-column: auto; }
  .fg-stage-b { min-height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .fg-star.on, .fg-tl, .fg-record { animation: none; }
}

/* ---------- portada del juego ---------- */
.fg-hub-banner { display: block; border-radius: 18px; overflow: hidden; margin: 6px 0 18px; background: #0a0817; aspect-ratio: 1920 / 640; }
.fg-hub-banner img, .fg-hub-banner canvas { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.fg-hub-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 12px; }
.fg-hub-progress div { padding: 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); display: flex; flex-direction: column; }
.fg-hub-progress small { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.fg-hub-progress b { font-family: var(--font-num); font-size: 1.15rem; }
.fg-hub-zones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.fg-hub-zones li { padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.fg-hub-zones b { display: block; font-size: .95rem; }
.fg-hub-zones span { display: block; color: var(--muted); font-size: .82rem; }
.fg-hub-zones small { display: block; margin-top: 4px; font-size: .8rem; color: var(--ink-2, var(--ink)); }
@media (max-width: 560px) { .fg-hub-zones { grid-template-columns: 1fr; } }