/* Las tipografías de la marca (brand/tokens.json), servidas desde aquí (antes, Google Fonts, que recibía la IP de cada
   jugador: así no sale de nuestra web). Solo los pesos que se usan; licencia OFL, en assets/fuentes/LICENCIA-*.txt */
@font-face { font-family: 'Unbounded'; font-weight: 600; font-style: normal; font-display: swap; src: url('assets/fuentes/unbounded-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Unbounded'; font-weight: 700; font-style: normal; font-display: swap; src: url('assets/fuentes/unbounded-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('assets/fuentes/instrument-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('assets/fuentes/instrument-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-weight: 700; font-style: normal; font-display: swap; src: url('assets/fuentes/space-mono-latin-700-normal.woff2') format('woff2'); }

/* Tokens de Virave (brand/tokens.json) */
:root {
  --void: #0a0910;
  --night: #13111c;
  --dusk: #1e1a2b;
  --line: #3a3452;
  --line-strong: #6b6390;
  --ink: #f4f0ff;
  --ink-muted: #a8a2c2;
  --ultra: #9b6bff;
  --flare: #ff4d9d;
  --volt: #3ee6ff;
  --on-neon: #0a0910;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-pill: 999px;
  --glow-ultra: 0 0 24px rgba(155, 107, 255, 0.55);
  --font-display: "Unbounded", "Arial Black", sans-serif;
  --font-sans: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-tap-highlight-color: transparent;
  touch-action: none;           /* el juego gestiona los gestos */
  user-select: none;
  -webkit-user-select: none;
}

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Fundido al pasar de la sala a la calle (zonas.js): sobre la escena, debajo del menú y los botones */
.fundido {
  position: fixed;
  inset: 0;
  background: var(--void);
  opacity: 0;
  pointer-events: none;
  display: none;
  align-items: flex-end;
  justify-content: center;
}
.fundido.activo { display: flex; }
.fundido p {
  margin: 0 0 22vh;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.hud-top {
  position: fixed;
  top: calc(env(safe-area-inset-top) + var(--space-4));
  left: var(--space-4);
  right: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.logo { height: 22px; width: auto; }

.chip {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--night);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 4px var(--space-2);
}

/* Los controles de la derecha, cada uno en su hueco fijo (Joao, 01/11: «el jugador aprende dónde están una
   sola vez»). Una rejilla de tamaño fijo con un hueco con nombre por control (acciones.js, HUECOS): el que
   no toca se esconde y deja su hueco vacío, y ningún otro se mueve ni cambia de tamaño. Va anclada abajo a
   la derecha: lo de texto, alineado a su borde derecho, que tampoco se mueve aunque cambie lo que pone.
   Tres repartos, según la pantalla (abajo): el PC y las tabletas, el móvil en vertical y el móvil tumbado.
   PC: los redondos abajo a la derecha (golpear en la esquina, grande; a su lado saltar y la rueda de armas;
   Joao, 3/11), lo de texto a su izquierda y lo social, arriba */
.hud-actions {
  --hueco: 56px;                 /* los redondos */
  --hueco-grande: 68px;          /* golpear (y la rueda de armas) */
  --hueco-texto: 52px;           /* alto de los de texto: interactuar, sentarse y besar */
  --hueco-social: 40px;          /* chat, baile, bailar y «Más» */
  position: fixed;
  right: max(var(--space-4), env(safe-area-inset-right));
  bottom: calc(env(safe-area-inset-bottom) + var(--space-6));
  display: grid;
  gap: 10px;
  grid-template-columns: auto var(--hueco) var(--hueco) var(--hueco-grande);
  grid-template-rows: var(--hueco-texto) var(--hueco) var(--hueco-grande);
  grid-template-areas:
    "sentar social  social  social"
    "inter  recarga apuntar cubre"
    "beso   armas   salto   golpe";
  align-items: center;
  justify-items: center;
  pointer-events: none;          /* los huecos vacíos dejan mirar y tocar la sala */
}
.hud-actions > *, .acciones-social > * { pointer-events: auto; }
.acciones-social {
  grid-area: social;
  justify-self: end;
  display: grid;
  grid-template-columns: repeat(4, var(--hueco-social));
  grid-template-areas: "mas chat baile bailar";
  gap: 8px;
  pointer-events: none;
}
/* Los de texto, a la derecha de su hueco; si no cabe lo que pone, con puntos suspensivos */
.hud-actions > .btn:not(.btn-icono) {
  justify-self: end;
  height: var(--hueco-texto);
  min-height: 0;
  max-width: min(46vw, 280px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Interactuar: uno solo a la vez, el que haría la E (acciones.js) */
.hud-actions .btn.tapado { display: none; }
/* Lo que no tiene hueco propio (funciones nuevas): en el panel de «Más», encima, sin mover nada */
.acciones-extra {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-2);
  background: rgba(10, 9, 16, 0.86);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.acciones-extra[hidden] { display: none; }
/* Móvil en vertical: una columna estrecha; abajo, los redondos al alcance del pulgar (golpear en la esquina,
   saltar a su lado, cubrirse encima) y, encima, interactuar, sentarse, besar y lo social */
@media (max-width: 700px) and (orientation: portrait) {
  .hud-actions {
    --hueco: 54px;
    --hueco-grande: 66px;
    --hueco-texto: 46px;
    --hueco-social: 38px;
    bottom: calc(env(safe-area-inset-bottom) + var(--space-4));
    gap: 8px;
    grid-template-columns: var(--hueco) var(--hueco) var(--hueco-grande);
    grid-template-rows: var(--hueco-social) var(--hueco-texto) var(--hueco-texto) var(--hueco-texto) var(--hueco) var(--hueco-grande);
    grid-template-areas:
      "social  social  social"
      "beso    beso    beso"
      "sentar  sentar  sentar"
      "inter   inter   inter"
      "recarga apuntar cubre"
      "armas   salto   golpe";
  }
  .hud-actions > .btn:not(.btn-icono) { max-width: 100%; padding: 0 var(--space-4); font-size: 14px; }
}
/* Móvil tumbado (poca altura): como en el PC, más pequeño y más abajo */
@media (max-height: 500px) {
  .hud-actions {
    --hueco: 48px;
    --hueco-grande: 58px;
    --hueco-texto: 42px;
    --hueco-social: 34px;
    bottom: calc(env(safe-area-inset-bottom) + var(--space-2));
    gap: 6px 8px;
  }
  .hud-actions > .btn:not(.btn-icono) { padding: 0 var(--space-4); font-size: 13px; }
}

.btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  min-width: 112px;
  min-height: 56px;              /* objetivo táctil grande */
  padding: 0 var(--space-6);
  border-radius: var(--radius-pill);
  border: 2px solid var(--line-strong);
  background: var(--dusk);
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
}

.btn-primary {
  background: var(--ultra);
  border-color: var(--ultra);
  color: var(--on-neon);
}

/* Echado por los porteros: el botón de entrar espera a la cuenta atrás */
.btn:disabled {
  background: var(--dusk);
  border-color: var(--line);
  color: var(--ink-muted);
  cursor: not-allowed;
}

/* Cubrirse, mientras se mantiene (main.js) */
/* y golpear: mantenido dispara a ráfagas o, en el sigilo, se arrastra para apuntar la lata */
#cubrirse-btn, #colleja-btn { touch-action: none; user-select: none; -webkit-user-select: none; }
#cubrirse-btn[aria-pressed="true"] {
  background: var(--volt);
  border-color: var(--volt);
  color: var(--void);
}

.btn-primary[aria-pressed="true"] {
  background: var(--flare);
  border-color: var(--flare);
  box-shadow: 0 0 24px rgba(255, 77, 157, 0.55);
}

@media (hover: hover) {
  .btn-primary:hover { box-shadow: var(--glow-ultra); }
}

.btn:focus-visible {
  outline: 2px solid var(--volt);
  outline-offset: 2px;
}

/* Joystick virtual: aparece donde el pulgar toca la mitad izquierda */
.stick {
  position: fixed;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: rgba(19, 17, 28, 0.55);
  display: none;
  pointer-events: none;
}

.stick.on { display: block; }

.stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: var(--ultra);
}

.hint {
  position: fixed;
  left: var(--space-4);
  bottom: calc(env(safe-area-inset-bottom) + var(--space-6) + 56px);   /* encima de «Ocultar chat» */
  max-width: 55%;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-muted);
  pointer-events: none;
  transition: opacity 0.6s;
}

.loading {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-4);
  background: var(--void);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  transition: opacity 0.5s;
}

.loading.done { opacity: 0; pointer-events: none; }

@media (min-width: 900px) {
  .logo { height: 28px; }
}

/* ------------------------------------------------------------ multijugador */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
}

.chip[data-estado="conectado"] .dot { background: var(--volt); }
.chip[data-estado="conectado"] { color: var(--ink); }

.campo {
  font: 400 16px/24px var(--font-sans);   /* 16 px: iOS no hace zoom al escribir */
  color: var(--ink);
  background: var(--dusk);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 12px var(--space-4);
  min-height: 48px;
  width: 100%;
  user-select: text;
  -webkit-user-select: text;
}

.campo::placeholder { color: var(--ink-muted); }
.campo:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }

/* Aviso de edad: tapa la entrada hasta que se contesta */
.edad {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: rgba(10, 9, 16, 0.86);
}
.edad[hidden] { display: none; }
.edad-panel {
  width: min(400px, 100%);
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  padding: var(--space-6);
  background: var(--night);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
}
.edad-panel h2 { margin: 0; font: 700 24px/30px var(--font-display); color: var(--ink); }
.edad-texto { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.edad-botones { display: grid; gap: var(--space-2); width: 100%; }
.edad-botones .btn { width: 100%; min-height: 48px; }

/* La cuenta con email (cuenta.js): en la entrada, una línea y su botón; el panel, como el aviso de edad */
.cuenta { display: grid; gap: var(--space-2); width: 100%; }
.cuenta[hidden] { display: none; }
.cuenta-estado { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.cuenta-botones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.btn-cuenta { min-height: 44px; font-size: 14px; padding: 0 var(--space-4); }
.btn-enlace {
  font: 600 14px/20px var(--font-sans);
  color: var(--volt);
  background: none;
  border: 0;
  padding: 12px 0;              /* (el toque, de 44 px) */
  min-height: 44px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  touch-action: manipulation;
}
.btn-enlace[hidden] { display: none; }
.btn-enlace:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.cuenta-panel { max-height: calc(100dvh - 2 * var(--space-4)); overflow-y: auto; }
.cuenta-panel .btn[hidden] { display: none; }
.btn-invitado { width: 100%; min-height: 48px; }
/* «Continuar con Google» (cuenta.js): su logotipo tal cual, como pide Google; el botón, de la casa */
.btn-google { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.btn-google svg { flex: none; }
.cuenta-o { margin: 0; width: 100%; text-align: center; font: 700 12px/16px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.cuenta-o[hidden], .cuenta-panel label[hidden], .cuenta-panel input[hidden] { display: none; }
.cuenta-error { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink); }
.cuenta-error:empty { display: none; }
.cuenta-legal { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.cuenta-legal[hidden] { display: none; }
.cuenta-legal a { color: var(--volt); }
.cuenta-panel[aria-busy="true"] .btn { opacity: 0.6; pointer-events: none; }

/* Los enlaces legales, al pie de la entrada */
.legal-enlaces { margin: 0; width: 100%; font-size: 13px; line-height: 20px; color: var(--ink-muted); text-align: center; }
.legal-enlaces a { color: var(--ink-muted); display: inline-block; padding: 12px 4px; text-underline-offset: 3px; }
.legal-enlaces a:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }

/* Pantalla de entrada */
.entrar {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(400px, calc(100% - 2 * var(--space-4)));
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  padding: var(--space-6);
  background: rgba(19, 17, 28, 0.92);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
}

.entrar[hidden] { display: none; }

.entrar h1 {
  margin: 0;
  font: 700 24px/30px var(--font-display);
  color: var(--ink);
}

/* La temporada (Navidad): un distintivo encima del título y copos que caen detrás de la entrada */
.temporada-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 calc(-1 * var(--space-2));
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--volt);
  color: var(--on-neon);
  font: 700 12px/16px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.temporada-chip[hidden] { display: none; }
.temporada-chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
body.navidad.entrando::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* tres capas de copos con tamaños de casilla distintos: así no se ve una rejilla */
  background-image:
    radial-gradient(circle at 23% 31%, rgba(244, 240, 255, 0.8) 0 1.8px, transparent 2.4px),
    radial-gradient(circle at 71% 64%, rgba(244, 240, 255, 0.5) 0 1.2px, transparent 1.7px),
    radial-gradient(circle at 42% 83%, rgba(244, 240, 255, 0.35) 0 1px, transparent 1.4px);
  background-size: 173px 211px, 97px 131px, 251px 293px;
  animation: nieve-entrada 18s linear infinite;
}
@keyframes nieve-entrada {
  from { background-position: 0 0, 40px 15px, 90px 60px; }
  to { background-position: 60px 422px, 70px 393px, 130px 293px; }
}
@media (prefers-reduced-motion: reduce) { body.navidad.entrando::after { animation: none; } }

.etiqueta {
  font: 700 12px/16px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: calc(-1 * var(--space-2));
}

.btn-entrar { width: 100%; }
/* Los dos modos al entrar (main.js): historia u online, uno al lado del otro (en un móvil estrecho, uno encima) */
/* (pegados abajo del panel: si el panel tiene que deslizarse, siguen a la vista) */
.modos {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
  position: sticky; bottom: calc(-1 * var(--space-6)); z-index: 1; width: 100%;
  margin: 0 calc(-1 * var(--space-6)) calc(-1 * var(--space-6)); padding: var(--space-2) var(--space-6) var(--space-6);
  box-sizing: content-box; background: rgba(19, 17, 28, 0.97);
}
.modos .btn-entrar { display: flex; flex-direction: column; align-items: center; gap: 2px; height: auto; padding-top: 10px; padding-bottom: 10px; }
.modos .btn-entrar small { font: 400 12px/16px var(--font-sans); opacity: 0.8; }
/* El modo online, «Próximamente» (main.js, ONLINE_PRONTO): se ve, pero no se puede pulsar */
.modos .btn-entrar:disabled { opacity: 0.45; cursor: not-allowed; }
/* El Instagram, «Próximamente» (main.js, INSTAGRAM_PRONTO) */
.campo:disabled { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 340px) { .modos { grid-template-columns: 1fr; } }
.ajustes-modo .btn { width: 100%; }

/* Los consejos (hud.js, consejo), como los recuadros de ayuda del GTA: debajo del dinero y la vida. Más
   anchos que el radar en el que van (antes, una columna estrecha y muy alta) */
.consejo {
  margin: 6px 0 0;
  width: max-content;
  max-width: min(300px, 62vw);
  padding: 8px 10px;
  border-left: 3px solid var(--volt);
  border-radius: var(--radius-sm);
  background: rgba(10, 9, 16, 0.86);
  color: var(--ink);
  font: 600 13px/18px var(--font-sans);
  pointer-events: none;
}
.consejo[hidden] { display: none; }
.consejo.entra { animation: consejo-entra 0.3s ease-out; }
/* Lo que se lee, de uno en uno (hud.js): con el pantallazo del centro, fuera el recuadro de la misión (dice lo
   mismo), el chat y la ayuda de abajo; con alguien hablando, en el móvil, fuera el chat (el subtítulo va en su
   sitio). Vuelven solos al acabar */
.hud-banner :is(.mision-aviso, .chat-log, .hint) { visibility: hidden; }
@media (max-width: 700px) { .hud-habla .chat-log { visibility: hidden; } }
@keyframes consejo-entra { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.nota {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-muted);
}

.nota:empty { display: none; }

/* Chat: los últimos mensajes encima de la ayuda, y el panel para escribir */
.chat-log {
  position: fixed;
  left: var(--space-4);
  bottom: calc(env(safe-area-inset-bottom) + 96px);
  width: min(360px, 60%);
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
}

.chat-log li {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
  background: rgba(19, 17, 28, 0.72);
  border-radius: var(--radius-sm);
  padding: 4px var(--space-2);
  width: fit-content;
  max-width: 100%;
  overflow-wrap: anywhere;
  transition: opacity 0.6s;
}

.chat-log li.viejo { opacity: 0; }
.chat-log.oculto { display: none; }
.chat-ver {
  position: fixed;
  left: var(--space-4);
  bottom: calc(env(safe-area-inset-bottom) + var(--space-6));
  pointer-events: auto;
}
.chat-ver[hidden], .entrando .chat-ver { display: none; }
.chat-ver.nuevo { border-color: var(--volt); color: var(--volt); }
@media (max-width: 700px) {
  .chat-log { width: min(300px, 58%); }
  .chat-log li { font-size: 13px; line-height: 18px; padding: 3px var(--space-2); }
  .chat-log .quien { font-size: 11px; line-height: 18px; }
}
.chat-log .quien { font: 700 12px/20px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; margin-right: var(--space-2); }
.chat-log .sistema { color: var(--ink-muted); }

.chat-panel {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: calc(env(safe-area-inset-bottom) + var(--space-4));
  max-width: 560px;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background: rgba(19, 17, 28, 0.94);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
}

.chat-panel[hidden] { display: none; }
.chat-fila { display: flex; gap: var(--space-2); }
.chat-fila .btn { min-width: 0; padding: 0 var(--space-4); min-height: 48px; }
.chat-frases { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.frase {
  font: 600 14px/20px var(--font-sans);
  color: var(--ink);
  background: var(--dusk);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  min-height: 40px;
  cursor: pointer;
  touch-action: manipulation;
}

.frase:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.frase.activa { border-color: var(--ultra); box-shadow: inset 0 0 0 1px var(--ultra); }

/* Chat privado: a quién va (toda la sala o una persona) y bloquear a esa persona */
.chat-para {
  display: grid;
  grid-template-columns: auto 40px 1fr 40px auto;
  align-items: center;
  gap: var(--space-2);
}
.chat-para .etiqueta { margin: 0; }
.chat-para .btn-mini[hidden] { display: none; }
.chat-log li.privado { border-left: 3px solid var(--volt); }
.chat-insta {
  font: 700 12px/20px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--volt);
  text-decoration: none;
  justify-self: start;
  padding: 4px 0;
}
.chat-insta[hidden] { display: none; }
.chat-insta:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.chat-log .privado-marca {
  font: 700 12px/20px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--volt);
  margin-right: var(--space-2);
}

/* Alguien te pide un beso: sí o no (caduca solo) */
.beso-pregunta {
  position: fixed;
  left: 50%;
  top: calc(env(safe-area-inset-top) + 88px);
  transform: translateX(-50%);
  width: min(340px, calc(100% - 2 * var(--space-4)));
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background: rgba(19, 17, 28, 0.94);
  border: 1px solid var(--ultra);
  border-radius: var(--radius-md);
}
.beso-pregunta[hidden] { display: none; }
.beso-texto { margin: 0; font: 600 16px/22px var(--font-sans); color: var(--ink); }
.beso-botones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.beso-botones .btn { min-height: 48px; }

/* ------------------------------------------------------------------ música */
.hud-top-der {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.btn-mini {
  pointer-events: auto;              /* la cabecera deja pasar los toques al juego */
  font: 700 12px/16px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--night);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  min-height: 44px;
  padding: 0 14px;
  cursor: pointer;
  touch-action: manipulation;
}

.btn-mini[aria-pressed="true"] {
  border-color: var(--volt);
  box-shadow: inset 0 0 0 1px var(--volt);
}

.btn-mini:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }

/* Créditos de la canción que suena (las licencias CC BY piden citar al autor) */
.ahora-suena {
  position: fixed;
  top: calc(env(safe-area-inset-top) + var(--space-4) + 52px);
  right: var(--space-4);
  max-width: min(240px, calc(100% - 2 * var(--space-4)));
  font: 400 10px/13px var(--font-sans);
  color: var(--ink-muted);
  background: rgba(19, 17, 28, 0.7);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ahora-suena b {
  font: 700 9px/13px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--volt);
  margin-right: 4px;
}

.ahora-suena strong { color: var(--ink); font-weight: 600; }
a.ahora-suena[href] { pointer-events: auto; }
.ahora-suena:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }

/* Móviles: con «Misiones» en la cabecera, todo en una línea (el número de gente, sin «en la sala») */
@media (max-width: 599px) {
  .chip { white-space: nowrap; }
  .hud-top-der { gap: 6px; }
  .btn-mini { letter-spacing: 0.04em; padding: 0 10px; }
  .logo { height: 18px; }
}
/* Móviles estrechos (360 px): la cabecera cabe en una línea */
@media (max-width: 379px) {
  .hud-top-der { gap: 6px; }
  .chip { letter-spacing: 0.04em; padding: 4px 6px; }
  .btn-mini { letter-spacing: 0.04em; padding: 0 10px; }
}

/* ------------------------------------------------------- editor de avatar */
.aspecto {
  display: grid;
  gap: 4px;
  width: 100%;
}

.aspecto-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.rasgo {
  display: grid;
  grid-template-columns: 1fr 44px minmax(0, 1.3fr) 44px;
  align-items: center;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 0 0 0 var(--space-2);
}

.rasgo.activa { border-color: var(--line-strong); }
.rasgo.apagada { opacity: 0.45; }

.rasgo-nombre {
  font: 700 12px/16px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.rasgo-valor {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
  text-align: center;
}

.rasgo-flecha {
  font: 700 20px/1 var(--font-sans);
  color: var(--ink);
  background: var(--dusk);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  width: 44px;
  height: 44px;
  cursor: pointer;
  touch-action: manipulation;
}

.rasgo-flecha:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }

/* En el móvil el panel de entrada va abajo, para ver el avatar encima */
@media (max-width: 899px) {
  .entrar {
    top: auto;
    bottom: 0;
    left: 0;
    transform: none;
    width: 100%;
    max-height: 56vh;
    max-height: 56dvh;
    overflow-y: auto;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding-bottom: calc(env(safe-area-inset-bottom) + var(--space-6));
  }
  .entrar img { display: none; }
  .entrar h1 { font-size: 20px; line-height: 26px; }
}

/* En el ordenador, a la izquierda */
@media (min-width: 900px) {
  .entrar {
    left: var(--space-6);
    transform: translateY(-50%);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
}

/* Mientras se elige el avatar, solo el panel de entrada */
.entrando .hud-actions,
.entrando .hint { display: none; }
/* Los redondos (main.js, ponerIcono): golpear, cubrirse, saltar, apuntar, recargar y lo social; en el PC,
   con su tecla. Cada uno, del tamaño de su hueco */
.hud-actions .btn-icono {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--hueco);
  height: var(--hueco);
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  border-width: 3px;
}
.btn-icono svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#colleja-btn.btn-icono { border-color: var(--flare); color: var(--flare); }
#colleja-btn.btn-icono.recargando { opacity: 0.5; }
#cubrirse-btn.btn-icono { border-color: var(--volt); color: var(--volt); }
#cubrirse-btn.btn-icono[aria-pressed="true"] { background: var(--volt); color: var(--void); }
/* (display: grid tapaba el atributo hidden: salían el escudo, apuntar y recargar cuando no tocaban) */
.hud-actions .btn-icono[hidden] { display: none; }
#saltar-btn.btn-icono { background: var(--ultra); border-color: var(--ultra); color: var(--void); }
#saltar-btn.btn-icono svg { stroke-width: 2.4; }
/* Golpear, el grande de la esquina (mantenido, la rueda de armas: inventario.js) */
#colleja-btn.btn-icono { width: var(--hueco-grande); height: var(--hueco-grande); }
#colleja-btn.btn-icono svg { width: 36px; height: 36px; }
#colleja-btn.btn-icono.pide, #armas-btn.btn-icono.pide { animation: rueda-pide 1s ease-in-out infinite; }
/* La rueda de armas (inventario.js): su botón, al lado de saltar */
#armas-btn.btn-icono { color: var(--volt); border-color: var(--volt); }
@keyframes rueda-pide { 50% { border-color: var(--volt); color: var(--volt); box-shadow: 0 0 0 4px rgba(62, 230, 255, 0.35); } }
.acciones-social .btn-icono { width: var(--hueco-social); height: var(--hueco-social); border-width: 2px; }
.acciones-social .btn-icono svg { width: 20px; height: 20px; }
#dance.btn-icono[aria-pressed="true"] { background: var(--ultra); border-color: var(--ultra); color: var(--void); }
#chat-btn.btn-icono[aria-expanded="true"], #acciones-mas.btn-icono[aria-expanded="true"] { border-color: var(--volt); color: var(--volt); }
#acciones-mas .cuenta { background: var(--volt); }
/* En un tiroteo, en el móvil: lo social, escondido (en su sitio: no se mueve nada) para no tocarlo sin
   querer mientras disparas */
@media (max-width: 900px), (max-height: 500px) {
  .en-tiroteo .acciones-social { visibility: hidden; }
}
/* En un tiroteo: apuntar (fija la mira) y recargar */
#apuntar-btn.btn-icono { border-color: var(--ultra); color: var(--ultra); }
#apuntar-btn.btn-icono[aria-pressed="true"] { background: var(--ultra); color: var(--void); }
#recargar-btn.btn-icono { border-color: var(--ink); color: var(--ink); }
/* Lo que ahora no se puede (cubrirse lejos de todo, recargar con el cargador lleno): apagado, pero en su sitio */
.hud-actions .btn-icono.inactivo { opacity: 0.4; }
/* En el sigilo, la lata: cuántas quedan (arriba, a la derecha) y, mientras se apunta, rellena */
.btn-icono .cuenta {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--flare);
  color: var(--void);
  font: 700 12px/20px var(--font-mono);
  text-align: center;
}
#colleja-btn.btn-icono.apuntando { background: var(--flare); color: var(--void); }
#colleja-btn.btn-icono.apuntando .cuenta { background: var(--void); color: var(--flare); }
.btn-icono .tecla {
  display: none;
  position: absolute;
  right: -6px;
  bottom: -6px;
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}
@media (hover: hover) and (pointer: fine) {
  .btn-icono .tecla { display: block; }
}

/* ------------------------------------------------------------------ barra */
.carta {
  position: fixed;
  left: var(--space-4);
  bottom: calc(env(safe-area-inset-bottom) + var(--space-4));
  width: min(340px, calc(100% - 2 * var(--space-4)));
  max-height: calc(100dvh - env(safe-area-inset-bottom) - 2 * var(--space-4));
  overflow-y: auto;            /* con el espectáculo no cabe entera en un móvil apaisado */
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background: rgba(19, 17, 28, 0.94);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
}

.carta[hidden] { display: none; }

.carta h2 {
  margin: 0;
  font: 700 20px/26px var(--font-display);
}

.carta-saldo {
  margin: 0;
  font: 700 12px/16px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--volt);
}

/* Para quién es la copa: tú o alguien que tengas al lado (invitar) */
.carta-para {
  display: grid;
  grid-template-columns: auto 40px 1fr 40px;
  align-items: center;
  gap: var(--space-2);
}
.carta-para[hidden] { display: none; }
.carta-para .etiqueta { margin: 0; }
.carta-para-nombre {
  text-align: center;
  font: 600 15px/20px var(--font-sans);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.carta-lista { display: grid; gap: 6px; }

.carta-copa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--space-4);
  font: 600 16px/20px var(--font-sans);
  color: var(--ink);
  background: var(--dusk);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  touch-action: manipulation;
}

.carta-copa[hidden] { display: none; }
/* «Hablar con Rafa/Marta» (su encargo), arriba de las copas */
.carta-encargo .carta-precio { color: var(--volt); font: 700 12px/16px var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.carta-copa.activa { border-color: var(--ultra); box-shadow: inset 0 0 0 1px var(--ultra); }
.carta-copa:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.carta-precio { font: 700 12px/16px var(--font-mono); letter-spacing: 0.08em; color: var(--ink-muted); }
.carta .btn { min-height: 48px; }
.carta-seccion { margin: var(--space-2) 0 0; }

/* ------------------------------------------------------------ Kebab Variyas */
/* La carta de comida rápida (kebab.js): cada cosa con su dibujo, lo que lleva, lo que hace y el precio */
.kebab-carta { width: min(380px, calc(100% - 2 * var(--space-4))); }
.kebab-sitio { margin: 0; }
.kebab-lista { display: grid; gap: var(--space-2); }
.kebab-producto {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: var(--space-2) 12px;
  min-height: 72px;
  padding: var(--space-2);
  text-align: left;
  color: var(--ink);
  background: var(--dusk);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  touch-action: manipulation;
}
.kebab-producto.activa { border-color: var(--ultra); box-shadow: inset 0 0 0 1px var(--ultra); }
.kebab-producto:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.kebab-producto[aria-disabled="true"] { opacity: 0.6; }
.kebab-dibujo { width: 72px; height: 54px; border-radius: var(--radius-sm); }
.kebab-texto { display: grid; gap: 2px; min-width: 0; }
.kebab-nombre { font: 700 16px/20px var(--font-display); }
.kebab-detalle { font-size: 13px; line-height: 17px; color: var(--ink-muted); }
.kebab-efecto { font: 700 11px/15px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--volt); }
.kebab-precio {
  padding: 4px 8px;
  font: 700 14px/18px var(--font-mono);
  color: var(--on-neon);
  background: var(--volt);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.kebab-producto.no-llega .kebab-precio { background: var(--line); color: var(--ink-muted); }
.kebab-cuenta, .kebab-ayuda { margin: 0; }
/* «Pulsa E para pedir», como la ayuda del GTA: arriba a la izquierda, debajo del dinero */
.kebab-aviso {
  position: fixed;
  top: calc(env(safe-area-inset-top) + var(--space-4) + 96px);
  left: var(--space-4);
  max-width: 260px;
  margin: 0;
  padding: var(--space-2) 12px;
  font: 600 15px/20px var(--font-sans);
  color: var(--ink);
  background: rgba(10, 9, 16, 0.86);
  border-left: 3px solid var(--volt);
  border-radius: var(--radius-sm);
  pointer-events: none;
}
.kebab-aviso[hidden], .entrando .kebab-aviso { display: none; }
@media (min-width: 900px) {
  .kebab-aviso { top: calc(env(safe-area-inset-top) + var(--space-4) + 120px); }
}

/* ---------------------------------------------------------------- misiones */
.misiones {
  width: min(380px, calc(100% - 2 * var(--space-4)));
  /* deja a la vista la cabecera (y su botón «Misiones», que lo cierra) */
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 72px - var(--space-4));
}
.misiones-lista { display: grid; gap: var(--space-2); }
.mision {
  display: grid;
  gap: 6px;
  padding: var(--space-2) var(--space-4) var(--space-4);
  background: var(--dusk);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
}
.mision.elegida { border-color: var(--ultra); box-shadow: inset 0 0 0 1px var(--ultra); }
/* Estado de cada misión: en curso, disponible, hecha (se repite por una propina) o bloqueada */
.mision-estado {
  justify-self: start;
  padding: 2px 8px;
  font: 700 10px/16px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}
.mision-estado.disponible { background: var(--volt); color: var(--on-neon); }
.mision-estado.activa { background: var(--ultra); color: var(--on-neon); }
.mision-estado.hecha { background: var(--line); color: var(--ink); }
.mision-estado.bloqueada { border: 1px solid var(--line-strong); color: var(--ink-muted); }
.mision.bloqueada .mision-titulo, .mision.bloqueada .mision-desc { color: var(--ink-muted); }
.mision.activa { border-color: var(--volt); }
.mision-titulo { margin: 0; display: flex; justify-content: space-between; gap: var(--space-2); font: 600 16px/22px var(--font-sans); color: var(--ink); }
.mision-premio { font: 700 12px/22px var(--font-mono); letter-spacing: 0.06em; color: var(--volt); white-space: nowrap; }
.mision-desc { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.mision .btn { min-height: 44px; }
.mision .btn:disabled { opacity: 0.45; cursor: default; }
/* Modo prueba (solo en el entorno de pruebas): elegir capítulo o encargo con ‹ › */
.misiones-probar { margin-bottom: var(--space-2); }
.mision.probar { border-style: dashed; }
.mision.probar .mision-historia-cab { color: var(--ultra); }      /* el flare, para la historia */
.probar-selector { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: var(--space-2); }
/* Quién te guía en la historia (panel de misiones, misiones.js) */
.probar-flecha { min-width: 44px; width: 44px; min-height: 44px; padding: 0; font: 700 20px/1 var(--font-sans); }
.probar-nombre { justify-content: center; text-align: center; font-size: 14px; line-height: 20px; }
.misiones-feeling { display: grid; gap: 6px; }
.feeling { display: grid; grid-template-columns: minmax(0, 1fr) 2fr auto; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--ink); }
.feeling-barra { height: 8px; background: var(--night); border-radius: var(--radius-pill); overflow: hidden; }
.feeling-barra span { display: block; height: 100%; background: var(--flare); }
/* Logros (misiones.js): cada uno con su progreso; los conseguidos, en volt */
.misiones-logros { display: grid; gap: var(--space-2); }
.misiones-logros[hidden], .carta-seccion[hidden] { display: none; }
.logro { display: grid; gap: 4px; padding: var(--space-2) 12px; background: var(--dusk); border: 1px solid var(--line); border-radius: var(--radius-md); }
.logro.hecho { border-color: var(--volt); }
.logro p { margin: 0; }
.logro-titulo { display: flex; justify-content: space-between; gap: var(--space-2); font: 600 14px/20px var(--font-sans); color: var(--ink); }
.logro-texto { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.logro-barra span { background: var(--ultra); }
.logro.hecho .logro-barra span { background: var(--volt); }

/* El paso que toca, arriba en el centro */
.mision-aviso {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 64px);
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, calc(100% - 2 * var(--space-4)));
  padding: var(--space-2) var(--space-4);
  background: rgba(19, 17, 28, 0.86);
  border: 1px solid var(--volt);
  border-radius: var(--radius-md);
  pointer-events: none;
}
.mision-aviso[hidden] { display: none; }
.mision-aviso p { margin: 0; }
.mision-aviso-cabeza { display: flex; align-items: baseline; gap: var(--space-2); font: 600 14px/20px var(--font-sans); color: var(--ink); }
.mision-aviso-cabeza .etiqueta { margin: 0; color: var(--volt); }
.mision-tiempo { margin-left: auto; font: 700 12px/20px var(--font-mono); color: var(--ink-muted); }
.mision-tiempo.poco { color: var(--flare); }
.mision-aviso-texto { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.mision-aviso-texto strong { font-weight: 700; color: var(--volt); }
/* El contador del objetivo («3/5») con su barra */
.mision-cuenta { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/20px var(--font-mono); color: var(--ink); }
.mision-cuenta[hidden] { display: none; }
.mision-cuenta-barra { width: 48px; height: 6px; background: var(--line); border-radius: var(--radius-pill); overflow: hidden; }
.mision-cuenta-barra > span { display: block; height: 100%; background: var(--volt); transition: width 0.3s ease-out; }
.entrando .mision-aviso { display: none; }
.misiones.contacto .carta-seccion, .misiones.contacto .misiones-feeling { display: none; }
.misiones-historia[hidden], .misiones-encargos[hidden] { display: none; }
.mision.historia { border-color: var(--flare); }
.mision-historia-cab { margin: 0 0 4px; color: var(--flare); }
.eleccion { top: auto; bottom: calc(env(safe-area-inset-bottom) + 30%); border-color: var(--volt); }
.eleccion .etiqueta { margin: 0; color: var(--volt); }
.eleccion-botones { display: grid; gap: var(--space-2); }
.eleccion-botones .btn { min-height: 48px; }
@media (min-width: 900px) { .eleccion-botones { grid-template-columns: 1fr 1fr; } }

/* -------------------------------------------- minimapa y pantallazos (hud.js) */
.radar {
  --radar: 92px;
  position: fixed;
  top: calc(env(safe-area-inset-top) + var(--space-4) + 32px);
  left: var(--space-4);
  width: var(--radar);
  pointer-events: none;
}
.radar[hidden], .entrando .radar { display: none; }
.radar p { margin: 0; }
.radar-mapa {
  display: block;
  width: var(--radar);
  height: var(--radar);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.radar-dinero {
  position: relative;
  margin-top: 4px !important;
  font: 700 16px/22px var(--font-display);
  color: var(--ink);
  text-shadow: 0 1px 0 var(--void), 0 0 8px var(--void);
  white-space: nowrap;
}
.radar-cobro {
  position: absolute;
  left: 0;
  top: 100%;
  font: 700 12px/16px var(--font-mono);
  color: var(--volt);
  opacity: 0;
}
.radar-cobro.sube { animation: cobro 1.8s ease-out forwards; }
.radar-cobro.baja { color: var(--flare); white-space: nowrap; }
@keyframes cobro {
  0% { opacity: 0; transform: translateY(8px); }
  15% { opacity: 1; transform: translateY(0); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-14px); }
}
.radar-lio { display: flex; gap: 2px; margin-top: 2px !important; }
/* La racha de la noche (hud.js), debajo del dinero */
.radar-racha { margin-top: 2px !important; font: 700 11px/16px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--volt); text-shadow: 0 1px 0 var(--void), 0 0 8px var(--void); }
.radar-racha[hidden] { display: none; }
.radar-lio[hidden] { display: none; }
.estrella {
  width: 14px;
  height: 14px;
  background: var(--line);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.estrella.llena { background: var(--ink); }
.radar-lio.parpadea .estrella.llena { animation: lio 0.7s steps(1) infinite; }
@keyframes lio { 50% { background: var(--flare); } }
/* Huyendo (historia, paso «escapar»): las estrellas de búsqueda, en flare y más grandes; sin que te vean, parpadean */
.radar-lio.busqueda .estrella { width: 18px; height: 18px; }
.radar-lio.busqueda .estrella.llena { background: var(--flare); }
.radar-lio.busqueda.parpadea .estrella.llena { animation: busca 0.6s steps(1) infinite; }
@keyframes busca { 50% { background: var(--line); } }

.radar-mapa[hidden] { display: none; }
/* En el móvil el aviso de la misión va debajo del dinero y las estrellas */
@media (max-width: 700px) {
  .mision-aviso { top: calc(env(safe-area-inset-top) + var(--space-4) + 80px); }
}
@media (min-width: 900px) {
  .radar { --radar: 150px; top: calc(env(safe-area-inset-top) + var(--space-4) + 40px); }
  .radar-dinero { font-size: 20px; line-height: 28px; }
  .estrella { width: 18px; height: 18px; }
}

.pantallazo {
  position: fixed;
  top: 26%;
  left: 50%;
  transform: translateX(-50%);
  width: min(640px, calc(100% - 2 * var(--space-4)));
  text-align: center;
  pointer-events: none;
  text-shadow: 0 2px 0 var(--void), 0 0 18px var(--void);
}
.pantallazo[hidden] { display: none; }
.pantallazo p { margin: 0; }
.pantallazo.entra { animation: pantallazo 0.45s ease-out; }
@keyframes pantallazo {
  from { opacity: 0; transform: translateX(-50%) scale(1.25); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}
.pantallazo-etiqueta { color: var(--volt); }
/* Franjas de cine con los pantallazos de misión (hud.js); en el PC, el mundo se apaga detrás */
.cine { position: fixed; inset: 0; pointer-events: none; }
.cine::before, .cine::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 11vh;
  background: var(--void);
  transition: transform 0.4s ease-out;
}
.cine::before { top: 0; transform: translateY(-100%); }
.cine::after { bottom: 0; transform: translateY(100%); }
.cine.on::before, .cine.on::after { transform: translateY(0); }
/* En las conversaciones de las misiones (dialogo.js): más finas, para no tapar los botones */
.cine.dialogo::before, .cine.dialogo::after { transform: translateY(0); height: 7vh; }
/* Las cinemáticas, como en el GTA (main.js: aplicarCine; Joao, 30/10): la pantalla limpia (fuera el
   dinero, el minimapa, los botones, el chat y el objetivo), franjas de cine más anchas, los subtítulos
   abajo, como en una película, el fundido a negro al entrar y salir y «Mantén para saltar» arriba */
body.en-cine :is(.hud-top, .radar, .mision-aviso, .hud-actions, .stick, .chat-log, .chat-ver, #ajustes-btn, .ahora-suena, .rueda-armas) { visibility: hidden !important; }
body.en-cine #mision-btn { visibility: hidden !important; }
/* La carta de la barra (se abre sola al estar en la barra) no tapa la conversación con Rafa o Marta */
body.en-cine #carta { visibility: hidden !important; }
body.en-cine .cine.dialogo::before, body.en-cine .cine.dialogo::after { height: 12vh; }
@media (orientation: portrait) {
  body.en-cine .cine.dialogo::before, body.en-cine .cine.dialogo::after { height: 10vh; }
}
body.en-cine .subtitulo {
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + 12vh + 10px);
  max-width: min(720px, calc(100% - 2 * var(--space-4)));
  text-align: center;
  font: 600 17px/24px var(--font-sans);
  background: rgba(10, 9, 16, 0.55);
}
@media (orientation: portrait) {
  body.en-cine .subtitulo { bottom: calc(env(safe-area-inset-bottom) + 10vh + 8px); font-size: 16px; line-height: 22px; }
}
.fundido { position: fixed; inset: 0; background: var(--void); opacity: 0; pointer-events: none; }
.fundido.sale { animation: fundido-sale 0.5s ease-out; }
@keyframes fundido-sale { 0%, 25% { opacity: 1; } 100% { opacity: 0; } }
.saltar-cine {
  --p: 0;
  position: fixed;
  top: calc(env(safe-area-inset-top) + 2vh);
  right: var(--space-4);
  overflow: hidden;
  padding: 7px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: rgba(10, 9, 16, 0.6);
  color: var(--ink);
  font: 700 11px/16px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.saltar-cine[hidden] { display: none; }
.saltar-cine-fondo { position: absolute; inset: 0; width: calc(var(--p) * 100%); background: var(--ultra); opacity: 0.45; }
.saltar-cine-texto { position: relative; }
[data-dispositivo="keyboard"] .saltar-cine-texto::after, [data-dispositivo="mouse"] .saltar-cine-texto::after { content: ' · Espacio'; }
[data-dispositivo="gamepad"] .saltar-cine-texto::after { content: ' · A'; }
#scene { transition: filter 0.5s ease-out; }
#scene.cine-apagado { filter: saturate(0.35) brightness(0.75); }
.pantallazo-titulo {
  margin-top: var(--space-2) !important;
  font: 700 28px/34px var(--font-display);
  text-transform: uppercase;
  color: var(--ink);
}
.pantallazo[data-tipo="ok"] .pantallazo-titulo { color: var(--volt); }
.pantallazo[data-tipo="mal"] .pantallazo-titulo { color: var(--flare); }
.pantallazo[data-tipo="muerte"] .pantallazo-titulo { color: var(--flare); }
.pantallazo[data-tipo="nivel"] .pantallazo-titulo { color: var(--ultra); }
.pantallazo[data-tipo="noche"] .pantallazo-titulo { color: var(--ultra); }
.misiones-noche { margin: 0; color: var(--volt); }
.misiones-noche[hidden] { display: none; }
.misiones-socio { margin: 0; color: var(--ink-muted); }
.carta-precio.oferta { color: var(--volt); }
.pantallazo-texto { margin-top: var(--space-2) !important; font: 600 16px/22px var(--font-sans); color: var(--ink); }
@media (min-width: 900px) {
  .pantallazo-titulo { font-size: 44px; line-height: 52px; }
  .pantallazo-texto { font-size: 18px; line-height: 26px; }
}

.subtitulo {
  position: fixed;
  left: 50%;
  bottom: 42%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(560px, calc(100% - 2 * var(--space-4)));
  margin: 0;
  padding: 4px var(--space-2);
  text-align: center;
  font: 600 15px/22px var(--font-sans);
  color: var(--ink);
  background: rgba(10, 9, 16, 0.72);
  border-radius: var(--radius-sm);
  pointer-events: none;
}
.subtitulo[hidden] { display: none; }
/* Con una pregunta en pantalla («¿Reintentar?», elegir qué haces), los subtítulos esperan: se pisaban (la
   pregunta ya lleva su texto, y la voz se sigue oyendo) */
body:has(.eleccion:not([hidden])) .subtitulo { visibility: hidden; }
/* En el móvil no cabe todo a la vez en medio de la pantalla (Joao, 28/10: «se juntan muchos textos y unos
   pisan a otros, sobre todo en las misiones»). Con una pregunta en pantalla, fuera los botones de la
   derecha (la pregunta lleva los suyos) y la pregunta, más abajo, para que no tape el pantallazo de
   encima («Misión fallida» y por qué). En las conversaciones, los botones también fuera, menos el de la
   misión: no hacen falta y los subtítulos pisaban «Chat» */
@media (max-width: 700px) {
  body:has(.eleccion:not([hidden])) .hud-actions { visibility: hidden; }
  .eleccion { bottom: calc(env(safe-area-inset-bottom) + 76px); }
  body:has(.cine.dialogo) .hud-actions { visibility: hidden; }
  body:has(.cine.dialogo):not(:has(.eleccion:not([hidden]), .pantallazo:not([hidden]))) #mision-btn { visibility: visible; }
}
/* En los móviles bajos (el iPhone SE): los subtítulos de fuera de las conversaciones, a la izquierda y sin
   llegar a los botones de la derecha; y con un pantallazo en medio, más abajo */
@media (max-width: 700px) and (max-height: 760px) {
  body:not(:has(.cine.dialogo)) .subtitulo {
    left: var(--space-4);
    transform: none;
    max-width: calc(100% - 2 * var(--space-4) - 200px);   /* sin llegar a los controles (acciones.js) */
    text-align: left;
  }
  body:not(:has(.cine.dialogo)) .subtitulo { bottom: 26%; }
  body:has(.pantallazo:not([hidden])) .subtitulo { bottom: 16%; }
  /* con el pantallazo grande de empezar, acabar o morir en medio, los botones de la derecha esperan */
  body:has(.pantallazo:not([hidden]):is([data-tipo="empieza"], [data-tipo="ok"], [data-tipo="mal"], [data-tipo="muerte"])) .hud-actions { visibility: hidden; }
}
/* Con el dedo, la ayuda de las teclas de la pregunta («Espacio o A: la primera…») sobra y la hacía más alta */
[data-dispositivo="touch"] #eleccion-ayuda { display: none; }
@media (max-height: 760px) {
  .eleccion { padding-top: var(--space-2); padding-bottom: var(--space-2); }
  .eleccion-botones .btn { min-height: 44px; }
}
/* En el móvil, un hueco bajo el dinero para los avisos que salen ahí («-20 €», «¡Te tienen fijado!»): se
   montaban encima de la misión (apilar.js deja la misión debajo de ese hueco) */
@media (max-width: 700px) {
  .radar { padding-bottom: 16px; }
  .radar-cobro { top: auto; bottom: 0; }
}
/* En los móviles bajos, el pantallazo, algo más pequeño: el título del capítulo ocupaba tres líneas */
@media (max-width: 700px) and (max-height: 760px) {
  /* y los rótulos grandes («¡A cubierto!», «K.O.»), más abajo: arriba ya está la misión con sus barras */
  body .sello, body .sello.accion, body .sello.contra { top: 46%; }
  .pantallazo-titulo { font-size: 22px; line-height: 28px; }
  .pantallazo-texto { font-size: 14px; line-height: 20px; }
}
.subtitulo-quien { font: 700 12px/22px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--volt); }
@media (min-width: 900px) { .subtitulo { bottom: 22%; font-size: 18px; line-height: 26px; } }

.movil {
  position: fixed;
  top: calc(env(safe-area-inset-top) + var(--space-4) + 44px);
  right: var(--space-4);
  width: min(300px, calc(100% - 2 * var(--space-4) - 100px));
  padding: var(--space-2) var(--space-4) 10px;
  background: var(--night);
  border: 1px solid var(--ultra);
  border-radius: var(--radius-md);
  pointer-events: none;
  z-index: 2;
}
.movil[hidden], .entrando .movil, .entrando .pantallazo, .entrando .subtitulo { display: none; }
.movil.entra { animation: movil 0.35s ease-out; }
@keyframes movil { from { opacity: 0; transform: translateX(24px); } }
.movil p { margin: 0; }
.movil-de { margin: 0 0 4px !important; color: var(--ultra); }
.movil-texto { font: 400 14px/20px var(--font-sans); color: var(--ink); }
.movil-pista { margin-top: 4px !important; font: 700 12px/16px var(--font-mono); color: var(--ink-muted); }
.movil-pista:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  .pantallazo.entra, .movil.entra, .radar-cobro.sube, .radar-lio.parpadea .estrella.llena, .herida.activo { animation: none; }
  .radar-cobro.sube { opacity: 1; }
}

/* -------------------------------------------------- probador de avatares */
.probador #escena {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.probador-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-2) var(--space-4) calc(env(safe-area-inset-bottom) + var(--space-4));
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: linear-gradient(to top, var(--void) 70%, transparent);
}

.probador-ficha {
  margin: 0;
  font: 700 12px/16px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.probador-fila {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.probador-fila::-webkit-scrollbar { display: none; }
.probador-fila .frase { flex: none; }

.frase[aria-pressed="true"] {
  border-color: var(--volt);
  box-shadow: inset 0 0 0 1px var(--volt);
}

.probador-ayuda {
  margin: 0;
  font: 400 12px/16px var(--font-sans);
  color: var(--ink-muted);
}

.probador-creditos {
  max-width: min(520px, calc(100% - 2 * var(--space-4)));
  color: var(--ink);
  background: var(--night);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.probador-creditos::backdrop { background: rgba(10, 9, 16, 0.75); }
.probador-creditos h2 { margin: 0 0 var(--space-2); font: 700 20px/26px var(--font-display); }
.probador-creditos p, .probador-creditos li { font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }

/* Comparar la calidad de los personajes (comparar.html): una etiqueta encima de cada mitad (comparar.js le da la
   altura de lo que queda por encima del panel; en vertical, una mitad encima de la otra) */
.comparar-lados {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  pointer-events: none;
}
.comparar-lados[data-vertical="true"] {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
}
.comparar-lados span {
  justify-self: center;
  align-self: start;
  margin-top: calc(env(safe-area-inset-top) + 64px);
  padding: 4px 10px;
  font: 700 12px/16px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--night);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}
.comparar-lados span + span { border-color: var(--volt); }
.comparar-lados[data-vertical="true"] span + span { margin-top: var(--space-2); }

/* ------------------------------------------------------- grabar voces (grabar.html) */
/* Herramienta para grabar los diálogos con Dubbing AI: página normal, con scroll */
html:has(body.grabar), body.grabar {
  height: auto;
  min-height: 100%;
  overflow: auto;
  touch-action: auto;
}
.grabar-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: calc(env(safe-area-inset-top) + var(--space-4)) var(--space-4) var(--space-4);
}
.grabar-main {
  display: grid;
  gap: var(--space-4);
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--space-4) calc(env(safe-area-inset-bottom) + var(--space-6));
}
.grabar-tarjeta {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--night);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.grabar-tarjeta h1 { margin: 0; font: 700 24px/30px var(--font-display); }
.grabar-ayuda { margin: 0; font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
.grabar-ayuda b { color: var(--ink); font-weight: 600; }
.grabar-fila { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-2) var(--space-4); }
.grabar-entre { justify-content: space-between; align-items: center; }
.grabar-campo { display: grid; gap: var(--space-2); flex: 1 1 260px; }
.grabar-etiqueta {
  margin: 0;
  font: 700 12px/16px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.grabar-nota { margin: 0; font: 600 16px/24px var(--font-sans); color: var(--volt); }
.grabar-antes { margin: 0; font: 400 15px/22px var(--font-sans); color: var(--ink-muted); }
.grabar-texto { margin: 0; font: 600 24px/34px var(--font-sans); color: var(--ink); user-select: text; }
.grabar-frase .chip[data-estado="conectado"] { color: var(--volt); border-color: var(--volt); }
.grabar-nivel { height: 8px; border-radius: var(--radius-pill); background: var(--dusk); overflow: hidden; }
.grabar-nivel div { height: 100%; width: 0; background: var(--volt); }
.grabar-nivel div[data-alto="si"] { background: var(--flare); }
.grabar-botones { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.grabar-botones .btn { flex: 1 1 140px; }
.grabar select.campo { appearance: auto; }
.grabar-casilla { display: flex; gap: var(--space-2); align-items: flex-start; font: 400 15px/22px var(--font-sans); cursor: pointer; }
.grabar-casilla input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ultra); flex: none; }

/* Minijuego de baile (src/ritmo.js): las flechas caen al ritmo y se aciertan en el círculo.
   Mientras dura, fuera el joystick y los botones de abajo (se baila en el sitio) */
/* El brindis de la ronda de chupitos (brindis.js): un círculo que se cierra sobre el aro y el botón
   «¡Chin!». Pequeño y centrado, por encima del joystick y de los botones: se juega de pie junto a la
   cuadrilla y se puede seguir andando */
.brindis {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 132px);
  transform: translateX(-50%);
  width: 196px;
  padding: 10px 12px 12px;
  background: rgba(19, 17, 28, 0.94);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--ink);
  text-align: center;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.brindis[hidden] { display: none; }
.brindis-cab { display: flex; justify-content: space-between; align-items: baseline; }
.brindis-cuenta { font-family: var(--font-mono); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; }
.brindis-diana { position: relative; width: 120px; height: 120px; margin: 6px auto 0; display: grid; place-items: center; }
.brindis-aro, .brindis-circulo { position: absolute; width: 40px; height: 40px; border-radius: 50%; }
.brindis-aro { border: 3px solid var(--volt); transition: background 0.15s; }
.brindis-aro.toca { background: var(--volt); }
.brindis-circulo { border: 3px solid var(--ultra); will-change: transform; }
.brindis-voz {
  min-height: 1.3em;
  margin: 4px 0 8px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.brindis-voz.perfecto { color: var(--volt); }
.brindis-voz.bien { color: var(--ultra); }
.brindis-voz.mal { color: var(--ink-muted); }
.brindis-boton {
  position: relative;
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--ultra);
  color: var(--void);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  cursor: pointer;
}
.brindis-boton.toca { transform: scale(0.96); }
.brindis-boton .tecla { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 11px; opacity: 0.7; }
[data-dispositivo="touch"] .brindis-boton .tecla { display: none; }
[data-dispositivo="gamepad"] .brindis-boton .tecla { font-size: 0; }
[data-dispositivo="gamepad"] .brindis-boton .tecla::after { content: 'X'; font-size: 11px; }

.ritmo {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + var(--space-4));
  transform: translateX(-50%);
  width: min(360px, calc(100vw - 2 * var(--space-4)));
  padding: 12px;
  background: rgba(19, 17, 28, 0.94);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--ink);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.ritmo[hidden] { display: none; }
.ritmo-activo .stick, .ritmo-activo .hud-actions { visibility: hidden; }
.ritmo-activo .subtitulo { bottom: max(42%, calc(env(safe-area-inset-bottom) + 372px)); }   /* por encima del panel */
.ritmo-cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.ritmo-cuenta { font-family: var(--font-mono); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.ritmo-fallos { margin-left: auto; font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.ritmo-fallos.justo { color: var(--ink); }
.ritmo-barra { height: 6px; margin-top: 6px; border-radius: var(--radius-pill); background: var(--dusk); overflow: hidden; }
.ritmo-barra span { display: block; height: 100%; width: 0; background: var(--ultra); transition: width 0.2s; }
.ritmo-rival { margin-top: 8px; }
.ritmo-rival-nombre { font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.ritmo-rival .ritmo-barra span { background: var(--ink-muted); }
.ritmo-pista {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  height: 176px;
  margin-top: 10px;
}
.ritmo-carril { position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--void); }
.ritmo-diana {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  border: 2px solid var(--volt);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--volt);
  font-size: 20px;
  opacity: 0.85;
}
.ritmo-flecha {
  position: absolute;
  left: 50%;
  top: 0;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ultra);
  color: var(--on-neon);
  font-size: 22px;
  font-weight: 700;
  will-change: transform;
}
.ritmo-flecha.acertada { background: var(--volt); opacity: 0; transition: opacity 0.2s; }
.ritmo-flecha.fallada { background: var(--dusk); color: var(--ink-muted); }
.ritmo-pista.quieta .ritmo-carril { opacity: 0.4; }
.ritmo-nota, .ritmo-espera {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ritmo-nota { top: 38%; font-size: 18px; }
.ritmo-nota.perfecto { color: var(--volt); }
.ritmo-nota.bien { color: var(--ultra); }
.ritmo-nota.mal { color: var(--ink-muted); }
.ritmo-espera { top: 40%; font-size: 12px; color: var(--ink); }
/* Cuenta atrás al llegar a la marca: 3, 2, 1, ¡Ya! */
.ritmo-atras {
  position: absolute;
  left: 0;
  right: 0;
  top: 20%;
  margin: 0;
  text-align: center;
  pointer-events: none;
  font: 700 56px/1 var(--font-display);
  color: var(--volt);
}
.ritmo-atras[hidden] { display: none; }
.ritmo-atras small {
  display: block;
  margin-top: 8px;
  font: 700 12px/1.2 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.ritmo-atras small[hidden] { display: none; }
.ritmo-botones { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-top: 10px; }
.ritmo-boton {
  height: 56px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  background: var(--dusk);
  color: var(--ink);
  font-size: 24px;
  touch-action: manipulation;
}
.ritmo-boton.toca { background: var(--ultra); color: var(--on-neon); border-color: var(--ultra); }

/* La rueda de la caja fuerte (combinacion.js) */
.rueda {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 14%); transform: translateX(-50%);
  width: min(calc(100vw - 32px), 360px); display: grid; gap: 12px; text-align: center; z-index: 30;
  padding: var(--space-4); background: var(--night); border: 1px solid var(--volt); border-radius: var(--radius-md);
}
.rueda[hidden] { display: none; }
.rueda .etiqueta { margin: 0; color: var(--volt); }
.rueda-casillas { display: flex; justify-content: center; gap: var(--space-2); }
.rueda-casilla {
  width: 40px; height: 48px; display: grid; place-items: center; font: 700 24px var(--font-mono); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.rueda-casilla.toca { border-color: var(--volt); }
.rueda-dial { display: flex; align-items: center; justify-content: center; gap: 12px; }
.rueda-gira {
  width: 48px; height: 48px; border-radius: 50%; font-size: 28px; line-height: 1;
  background: var(--dusk); color: var(--ink); border: 1px solid var(--line);
}
.rueda-disco {
  position: relative; width: 164px; height: 164px; border-radius: 50%; touch-action: none; cursor: grab;
  background: var(--dusk); border: 3px solid var(--line-strong);
}
.rueda-numeros { position: absolute; inset: 0; transition: transform 0.12s ease-out; }
.rueda-numeros span {
  position: absolute; left: 50%; top: 50%; font: 700 15px var(--font-mono); color: var(--ink-muted);
  transform: translate(-50%, -50%) rotate(calc(var(--n) * 36deg)) translateY(-62px);
}
.rueda-marca {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 12px solid var(--volt);
}
.rueda-actual { position: absolute; inset: 0; display: grid; place-items: center; font: 700 44px var(--font-display); color: var(--volt); }
.rueda-botones { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.rueda-botones .btn { min-height: 48px; }
.rueda-ayuda { margin: 0; }
.rueda-activa .stick, .rueda-activa .hud-actions { visibility: hidden; }

/* El flash de las fotos de la historia */
.flash-foto { position: fixed; inset: 0; z-index: 40; pointer-events: none; background: var(--ink); opacity: 0; }
.flash-foto.activo { animation: flash-foto 0.45s ease-out; }
@keyframes flash-foto { 0% { opacity: 0.85; } 100% { opacity: 0; } }

/* Te dan en un tiroteo (o te matan): el borde de la pantalla, en rojo un momento (main.js) */
.herida { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 18vmin 4vmin var(--flare); }
.herida.activo { animation: herida 0.6s ease-out; }
/* La mira de los tiroteos (main.js): cuatro rayas alrededor del centro de la pantalla; apuntando, más
   cerradas; con alguien en la mira, en flare */
.mira { position: fixed; left: 50%; top: 50%; width: 0; height: 0; z-index: 30; pointer-events: none; --abre: 16px; }
.mira[hidden] { display: none; }
.mira span { position: absolute; background: var(--ink); box-shadow: 0 0 2px rgba(10, 9, 16, 0.9); transition: transform 0.12s; }
.mira span:nth-child(1), .mira span:nth-child(2) { width: 2px; height: 9px; left: -1px; }
.mira span:nth-child(3), .mira span:nth-child(4) { width: 9px; height: 2px; top: -1px; }
.mira span:nth-child(1) { top: calc(-1 * var(--abre) - 9px); }
.mira span:nth-child(2) { top: var(--abre); }
.mira span:nth-child(3) { left: calc(-1 * var(--abre) - 9px); }
.mira span:nth-child(4) { left: var(--abre); }
.mira.apuntando { --abre: 7px; }
.mira.blanco span { background: var(--flare); }
@keyframes herida { 0% { opacity: 0.9; } 100% { opacity: 0; } }
/* Las balas del tiroteo, debajo del dinero (hud.js) */
.radar-balas { margin-top: 2px !important; white-space: nowrap; font: 700 11px/16px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); text-shadow: 0 1px 0 var(--void), 0 0 8px var(--void); }
.radar-balas[hidden] { display: none; }
.radar-balas.recarga { color: var(--ink-muted); }

/* El Modo Neón (hud.js), debajo de las balas: su nombre y la barra, en ultra; llena, parpadea en volt; encendido,
   se vacía. Es un botón (tocándolo se enciende): de 44 px de alto para el dedo, aunque la barra sea fina */
.radar-neon {
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  width: 100%; min-height: 44px; margin: 0; padding: 4px 0; pointer-events: auto;
  background: none; border: 0; color: var(--ink); cursor: pointer; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.radar-neon[hidden] { display: none; }
.radar-neon-nombre { font: 700 10px/12px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; text-shadow: 0 1px 0 var(--void), 0 0 8px var(--void); }
.radar-neon-barra { display: block; height: 7px; padding: 1px; background: var(--void); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.radar-neon-barra span { display: block; height: 100%; background: var(--ultra); border-radius: 2px; }
.radar-neon.listo .radar-neon-nombre { color: var(--volt); }
.radar-neon.listo .radar-neon-barra span { background: var(--volt); animation: neon-listo 0.9s steps(1) infinite; }
.radar-neon.activo .radar-neon-nombre { color: var(--ultra); }
.radar-neon.falta { opacity: 0.6; }
.radar-neon:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
@keyframes neon-listo { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .radar-neon.listo .radar-neon-barra span { animation: none; } }
/* Encendido: los bordes de la pantalla en ultra (en todos) y, en el PC, el mundo desaturado (quality.js,
   filtrosPantalla) */
.neon-velo { position: fixed; inset: 0; z-index: 29; pointer-events: none; opacity: 0; transition: opacity 0.35s ease-out;
  box-shadow: inset 0 0 14vmin 2vmin var(--ultra); }
.neon-velo.activo { opacity: 0.75; }
#scene.neon-lento { filter: saturate(0.45) contrast(1.12); }

/* La vida, debajo del dinero (hud.js) */
.radar-vida {
  width: 100%; height: 8px; margin: 4px 0 0 !important; padding: 1px;
  background: var(--void); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.radar-vida[hidden] { display: none; }
.radar-vida span { display: block; height: 100%; background: var(--volt); border-radius: 2px; transition: width 0.3s ease-out; }
.radar-vida.poca span { background: var(--flare); animation: vida-poca 0.7s steps(1) infinite; }
/* El chaleco, debajo, en ultra y más fino */
.radar-chaleco { height: 6px; margin-top: 3px !important; }
.radar-chaleco span { background: var(--ultra); }
@keyframes vida-poca { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .radar-vida.poca span { animation: none; } }

/* El visor de la cámara de Flash (visor.js): toda la pantalla, como mirando por la cámara. Deja pasar el
   dedo y el ratón (se encuadra arrastrando); solo sus botones se pulsan */
.visor { position: fixed; inset: 0; z-index: 30; pointer-events: none; box-shadow: inset 0 0 18vmin rgba(10, 9, 16, 0.85); }
.visor[hidden] { display: none; }
.visor-marco { position: absolute; inset: 9vh 7vw 16vh; }
.visor-marco span { position: absolute; width: 34px; height: 34px; border: 3px solid var(--ink); }
.visor-marco span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.visor-marco span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.visor-marco span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.visor-marco span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.visor-enfoque {
  position: absolute; left: 50%; top: 46%; width: 22vmin; height: 26vmin; transform: translate(-50%, -50%);
  border: 2px solid var(--volt);
}
.visor-dato { position: absolute; top: calc(9vh + 12px); margin: 0; font: 700 13px var(--font-mono); letter-spacing: 0.08em; color: var(--ink); text-transform: uppercase; }
.visor-izq { left: calc(7vw + 16px); display: flex; align-items: center; gap: 8px; }
.visor-der { right: calc(7vw + 16px); color: var(--volt); }
.visor-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--flare); animation: visor-rec 1s steps(2) infinite; }
@keyframes visor-rec { 50% { opacity: 0; } }
.visor-ayuda { position: absolute; left: 50%; bottom: calc(16vh + 14px); transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); margin: 0; font-size: 13px; color: var(--ink-muted); text-align: center; }
.visor-botones {
  position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 16px);
  display: flex; justify-content: center; align-items: center; gap: var(--space-6); pointer-events: none;
}
.visor-botones button { pointer-events: auto; }
.visor-disparo {
  width: 76px; height: 76px; border-radius: 50%; cursor: pointer; touch-action: manipulation;
  background: var(--ink); border: 6px solid var(--void); box-shadow: 0 0 0 3px var(--ink);
}
.visor-disparo:active { transform: scale(0.94); }
.visor.disparo { animation: visor-flash 0.5s ease-out; }
@keyframes visor-flash { 0% { background: rgba(244, 240, 255, 0.95); } 100% { background: transparent; } }
/* Mirando por la cámara, fuera lo demás de la pantalla */
.en-visor .hud-actions, .en-visor .hud-top, .en-visor .stick, .en-visor .hint, .en-visor .cine,
.en-visor .ahora-suena, .en-visor .chat-ver, .en-visor .chat-log { display: none; }

/* Pruebas de ingenio: los dibujos (simbolos.js) en las sumas del objetivo y en la rueda del candado */
.simbolo { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.mision-pistas { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.mision-pistas[hidden] { display: none; }
.pista { display: inline-flex; align-items: center; gap: 4px; font: 700 14px var(--font-mono); color: var(--volt); }
.pista i { font-style: normal; color: var(--ink-muted); }
.pista b { color: var(--ink); }
.rueda-casilla.con-dibujo { height: 72px; flex-direction: column; gap: 2px; display: flex; align-items: center; justify-content: center; }
.rueda-casilla.con-dibujo .simbolo { width: 26px; height: 26px; color: var(--volt); }
.rueda-casilla.con-dibujo b { font: 700 22px var(--font-mono); }

/* La libreta de la comanda de Rafa (comanda.js): pistas arriba y la cuadrícula clientes × copas */
.comanda {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30;
  width: min(calc(100vw - 32px), 520px); max-height: calc(100vh - 32px); overflow-y: auto;
  display: grid; gap: 10px; padding: var(--space-4);
  background: var(--night); border: 1px solid var(--volt); border-radius: var(--radius-md);
}
.comanda[hidden] { display: none; }
.comanda .etiqueta { margin: 0; color: var(--volt); }
.comanda-pistas { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--ink); font-size: 14px; }
.comanda-tabla { display: grid; grid-template-columns: minmax(84px, auto) repeat(var(--copas), 1fr); gap: 4px; align-items: center; }
.comanda-copa { font: 700 11px var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); text-align: center; }
.comanda-persona { display: grid; line-height: 1.15; }
.comanda-persona b { color: var(--ink); font-size: 14px; }
.comanda-persona small { color: var(--ink-muted); font-size: 11px; }
.comanda-casilla {
  min-height: 44px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--dusk);
  color: var(--ink); font: 700 20px var(--font-mono); cursor: pointer; touch-action: manipulation;
}
.comanda-casilla.m1 { color: var(--ink-muted); }
.comanda-casilla.m2 { background: var(--volt); color: var(--void); border-color: var(--volt); }
.comanda-casilla.toca, .comanda-botones .btn.toca { outline: 2px solid var(--ultra); outline-offset: 2px; }
.comanda-aviso { margin: 0; min-height: 1em; color: var(--flare); }
.comanda-botones { display: flex; justify-content: flex-end; gap: var(--space-2); }
.comanda-ayuda { margin: 0; }
.comanda-activa .stick, .comanda-activa .hud-actions { visibility: hidden; }

/* Los pads de DJ Miau (pads.js): cuatro en cruz, de colores de la marca, que se encienden al sonar */
.pads {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30;
  width: min(calc(100vw - 32px), 360px); display: grid; gap: 12px; justify-items: center; text-align: center;
  padding: var(--space-4); background: var(--night); border: 1px solid var(--volt); border-radius: var(--radius-md);
}
.pads[hidden] { display: none; }
.pads .etiqueta { margin: 0; color: var(--volt); }
.pads-estado { margin: 0; font: 700 15px var(--font-display); color: var(--ink); min-height: 1.3em; }
.pads-cruz { display: grid; grid-template-columns: repeat(3, 76px); grid-template-rows: repeat(3, 76px); gap: 6px; }
.pad { border-radius: 50%; border: 3px solid currentColor; background: transparent; cursor: pointer; touch-action: none; opacity: 0.55; transition: opacity 0.08s, background 0.08s; }
.pad.luz { opacity: 1; background: currentColor; box-shadow: 0 0 28px currentColor; }
.pad-0 { grid-area: 1 / 2; color: var(--volt); }
.pad-1 { grid-area: 2 / 3; color: var(--ultra); }
.pad-2 { grid-area: 3 / 2; color: var(--flare); }
.pad-3 { grid-area: 2 / 1; color: var(--ink); }
.pads-rondas { display: flex; gap: 6px; }
.pads-rondas span { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--ink-muted); }
.pads-rondas span.hecha { background: var(--volt); border-color: var(--volt); }
.pads-rondas span.toca { border-color: var(--volt); }
.pads-ayuda { margin: 0; }
.pads-activos .stick, .pads-activos .hud-actions { visibility: hidden; }

/* Las frecuencias de la furgoneta de Flash (frecuencias.js): la onda de la cámara (volt, a trazos) y la tuya */
.frecuencias {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30;
  width: min(calc(100vw - 32px), 380px); display: grid; gap: 10px; justify-items: stretch; text-align: center;
  padding: var(--space-4); background: var(--night); border: 1px solid var(--volt); border-radius: var(--radius-md);
}
.frecuencias[hidden] { display: none; }
.frecuencias .etiqueta { margin: 0; color: var(--volt); }
.frec-estado { margin: 0; font: 700 15px var(--font-display); color: var(--ink); min-height: 1.3em; }
.frec-pantalla { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-sm, 6px); background: var(--void); }
.frec-camaras { display: flex; gap: 6px; justify-content: center; }
.frec-camaras span { font: 700 11px var(--font-mono); letter-spacing: 0.08em; padding: 3px 8px; border: 1px solid var(--ink-muted); border-radius: 999px; color: var(--ink-muted); }
.frec-camaras span.toca { border-color: var(--volt); color: var(--volt); }
.frec-camaras span.hecha { background: var(--volt); border-color: var(--volt); color: var(--void); }
.frec-mando { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 10px; text-align: left; font: 700 11px var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }
.frec-mando input { width: 100%; height: 36px; accent-color: var(--flare); touch-action: none; }
.frecuencias .pads-botones { justify-self: center; }
.frec-ayuda { margin: 0; }
.frec-tiempo { margin: 0; font: 700 12px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.frec-tiempo.poco { color: var(--volt); }
.frec-mando.elegido span { color: var(--volt); }

/* El cuadro eléctrico del sótano (cables.js): la rejilla con los bornes de colores y los cables */
.cables {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30;
  width: min(calc(100vw - 32px), 360px); display: grid; gap: 10px; justify-items: center; text-align: center;
  padding: var(--space-4); background: var(--night); border: 1px solid var(--volt); border-radius: var(--radius-md);
}
.cables[hidden] { display: none; }
.cables .etiqueta { margin: 0; color: var(--volt); }
.cables-estado { margin: 0; font: 700 15px var(--font-display); color: var(--ink); min-height: 1.3em; }
.cables-rejilla { width: min(100%, 300px); height: auto; aspect-ratio: 1; border-radius: var(--radius-sm); touch-action: none; cursor: pointer; }
.cables .pads-botones { display: flex; gap: 8px; }
.cables-ayuda { margin: 0; }

/* La caja de los anillos del señor Yang (anillos.js): tres tiras de dibujos; la casilla del medio es la ventana */
.anillos {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30;
  width: min(calc(100vw - 32px), 380px); display: grid; gap: 10px; justify-items: center; text-align: center;
  padding: var(--space-4); background: var(--night); border: 1px solid var(--volt); border-radius: var(--radius-md);
}
.anillos[hidden] { display: none; }
.anillos .etiqueta { margin: 0; color: var(--volt); }
.anillos-nota { display: flex; align-items: center; gap: 8px; font: 700 11px var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }
.anillos-meta { display: flex; gap: 6px; color: var(--flare); }
.anillos-meta .simbolo { width: 30px; height: 30px; }
.anillos-caja { display: grid; gap: 8px; width: 100%; }
.anillo { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 6px; border-radius: var(--radius-sm); padding: 4px; border: 1px solid transparent; }
.anillo.elegido { border-color: var(--line-strong, var(--line)); }
.anillo-tira { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--dusk); border-radius: var(--radius-sm); overflow: hidden; }
.anillo-casilla { display: grid; place-items: center; height: 42px; color: var(--ink-muted); opacity: 0.5; }
.anillo-casilla.ventana { opacity: 1; color: var(--ink); background: var(--void); box-shadow: inset 0 0 0 2px var(--ultra); }
.anillo-casilla.ventana.bien { color: var(--volt); box-shadow: inset 0 0 0 2px var(--volt); }
.anillo-casilla .simbolo { width: 26px; height: 26px; }
.anillo-giro { height: 42px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--dusk); color: var(--ink); font: 700 22px var(--font-display); cursor: pointer; touch-action: manipulation; }
.anillos-estado { margin: 0; font: 700 15px var(--font-display); color: var(--ink); min-height: 1.3em; }
.anillos-ayuda { margin: 0; }
.anillos-giros { margin: 0; font: 700 12px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.anillos-giros.pocos { color: var(--volt); }
.anillos .pads-botones { display: flex; gap: 8px; }

/* La partida de contrabandistas contra la Rata (contrabando.js) */
.contrabando {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30;
  width: min(calc(100vw - 32px), 360px); display: grid; gap: 10px; justify-items: center; text-align: center;
  padding: var(--space-4); background: var(--night); border: 1px solid var(--volt); border-radius: var(--radius-md);
}
.contrabando[hidden] { display: none; }
.contrabando .etiqueta { margin: 0; color: var(--volt); }
.contrabando-estado { margin: 0; font: 700 15px var(--font-display); color: var(--ink); min-height: 1.3em; }
.contrabando-tablero { width: min(100%, 300px); height: auto; aspect-ratio: 1; border-radius: var(--radius-sm); touch-action: none; cursor: pointer; }
.contrabando .pads-botones { display: flex; gap: 8px; }
.contrabando-ayuda { margin: 0; }

/* El móvil, menos cargado (Joao, 28/10): la canción que suena, solo un rato al empezar; el objetivo, más
   compacto; el minijuego de baile, más bajo; el puño y el escudo, algo más pequeños */
@media (max-width: 700px) {
  .ahora-suena:not(.reciente) { display: none; }
  .mision-aviso { padding: 6px var(--space-2); }
  .mision-aviso-cabeza { font-size: 13px; line-height: 18px; }
  .mision-aviso-texto { font-size: 13px; line-height: 18px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .ritmo { width: min(320px, calc(100vw - 2 * var(--space-4))); padding: 8px; }
  .ritmo-pista { height: 118px; margin-top: 6px; }
  .ritmo-diana, .ritmo-flecha { width: 36px; height: 36px; margin-left: -18px; }
  .ritmo-botones { margin-top: 6px; }
  .ritmo-boton { height: 46px; font-size: 20px; }
  .ritmo-activo .subtitulo { bottom: max(36%, calc(env(safe-area-inset-bottom) + 262px)); }
  .btn-icono svg { width: 28px; height: 28px; }
}

/* El menú (ajustes.js): Esc, el engranaje o Start. Encima de todo; la sala sigue detrás, más oscura */
.btn-engranaje { width: 44px; min-width: 44px; padding: 0; display: inline-grid; place-items: center; }
.btn-engranaje svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.btn-engranaje[aria-expanded="true"] { border-color: var(--volt); color: var(--volt); }
/* Pantalla completa (pantalla.js): solo en el móvil y mientras no lo está */
.btn-pantalla { width: 44px; min-width: 44px; padding: 0; display: inline-grid; place-items: center; flex: none; margin-right: auto; }
.btn-pantalla[hidden] { display: none; }
.btn-pantalla svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }
.pantalla-nota b { color: var(--ink); font-weight: 600; }
/* En móviles estrechos no caben los dos: mientras se ve el botón, va en el sitio del logo (vuelve a pantalla completa) */
@media (max-width: 419px) {
  .hud-top:has(.btn-pantalla:not([hidden])) .logo { display: none; }
}
.logo { min-width: 0; flex: 0 1 auto; object-fit: contain; object-position: left center; }
.hud-top { gap: var(--space-2); }
.hud-top-der { flex: none; }
.ajustes {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: calc(env(safe-area-inset-top) + var(--space-4)) var(--space-4) calc(env(safe-area-inset-bottom) + var(--space-4));
  background: rgba(10, 9, 16, 0.8);
  touch-action: pan-y;
}
.ajustes[hidden] { display: none; }
.ajustes-panel {
  width: min(480px, 100%); max-height: 100%;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  display: grid; gap: 10px; align-content: start;
  padding: var(--space-6);
  background: var(--night);
  border: 1px solid var(--line-strong);
  border-top: 4px solid var(--ultra);
  border-radius: var(--radius-md);
  touch-action: pan-y;
}
.ajustes-panel h2 { margin: 0 0 6px; font: 700 28px/34px var(--font-display); color: var(--ink); }
.ajustes-arriba { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.ajustes-arriba.solo { grid-template-columns: 1fr; }
.ajustes-arriba .btn { width: 100%; min-width: 0; padding: 0 var(--space-4); }
.ajustes-arriba .btn[hidden] { display: none; }
.ajustes-grupo { margin: var(--space-4) 0 0; color: var(--volt); }
.ajuste {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 4px 8px 4px 14px;
  background: var(--dusk);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}
.ajuste-nombre { min-width: 0; font-size: 15px; line-height: 20px; color: var(--ink); }
.ajuste-control { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.ajuste-flecha {
  width: 40px; height: 40px; padding: 0;
  border-radius: 50%; border: 1px solid var(--line-strong);
  background: var(--night); color: var(--ink);
  font: 700 18px/1 var(--font-mono);
  cursor: pointer; touch-action: manipulation;
}
.ajuste-barra { display: inline-flex; gap: 2px; }
.ajuste-barra i { width: 7px; height: 18px; background: var(--line); }
.ajuste-barra i.lleno { background: var(--volt); }
.ajuste-num { min-width: 2ch; text-align: right; font: 700 12px/16px var(--font-mono); color: var(--ink-muted); }
.ajuste-valor { min-width: 7.5em; text-align: center; font: 700 12px/16px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.ajuste-si {
  min-width: 72px; height: 40px; padding: 0 14px;
  border-radius: var(--radius-pill); border: 1px solid var(--line-strong);
  background: var(--night); color: var(--ink-muted);
  font: 700 12px/16px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; touch-action: manipulation;
}
.ajuste-si[aria-checked="true"] { background: var(--volt); border-color: var(--volt); color: var(--void); }
.ajuste-detalle { margin-top: -4px; font-size: 13px; line-height: 18px; }
.ajustes.con-cursor .ajuste.toca { border-color: var(--volt); }
.ajustes.con-cursor .ajustes-arriba .btn.toca { outline: 2px solid var(--volt); outline-offset: 2px; }
.ajuste-flecha:focus-visible, .ajuste-si:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.ajustes-controles { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 14px; line-height: 20px; }
.ajustes-controles dt { color: var(--ink-muted); }
.ajustes-controles dd { margin: 0; color: var(--ink); font: 700 12px/20px var(--font-mono); letter-spacing: 0.04em; }
.ajustes-ayuda { margin-top: var(--space-2); }
/* Subtítulos apagados en el menú */
.sin-subtitulos #subtitulo { display: none !important; }
@media (max-width: 420px) {
  .ajustes-panel { padding: var(--space-4); }
  .ajustes-panel h2 { font-size: 24px; line-height: 30px; }
  .ajuste { padding-left: 10px; gap: 8px; }
  .ajuste-nombre { font-size: 14px; }
  .ajuste-flecha { width: 36px; height: 36px; }
  .ajuste-barra i { width: 5px; }
  .ajuste-num { display: none; }
  .ajuste-valor { min-width: 6.5em; }
}

/* Viñeta de cine (main.js, quality.vineta): los bordes, un poco más oscuros. Al morir en una misión
   («muriendo»), se cierra hacia el centro y, en el PC, el mundo se queda en gris */
.vineta { position: fixed; inset: 0; pointer-events: none; }
.vineta.siempre { background: radial-gradient(ellipse at center, rgba(10, 9, 16, 0) 60%, rgba(10, 9, 16, 0.45) 100%); }
.vineta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(10, 9, 16, 0.25) 20%, rgba(10, 9, 16, 0.92) 100%);
  opacity: 0;
  transition: opacity 0.9s ease-out;
}
.muriendo .vineta::after { opacity: 1; }
#scene.muerte-gris { filter: grayscale(1) contrast(1.15) brightness(0.8); transition: filter 0.9s ease-out; }
/* Los fundidos de cine (fundido.js): el rótulo, un poco más arriba que el de la calle */
.fundido-cine p { margin-bottom: 30vh; color: var(--ink); }

/* La pantalla de carga (carga.js): la barra de lo que falta y un consejo abajo, como en los juegos grandes */
.carga-barra { width: min(240px, 60vw); height: 3px; background: var(--line); overflow: hidden; }
.carga-barra i { display: block; height: 100%; background: var(--volt); transform: scaleX(0); transform-origin: left center; transition: transform 0.3s ease-out; }
.carga-consejo {
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: calc(env(safe-area-inset-bottom) + 40px);
  margin: 0 auto;
  max-width: 560px;
  display: grid;
  gap: 6px;
  text-align: center;
  font: 400 15px/22px var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.carga-consejo-etiqueta { font: 700 12px/16px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--volt); }
.carga-consejo.entra { animation: consejo 0.5s ease-out; }
@keyframes consejo {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .carga-consejo.entra { animation: none; }
  .vineta::after, #scene.muerte-gris { transition: none; }
}

/* La tecla o el botón del mando de cada acción (main.js, TECLAS_ACCION): en el PC, la tecla; con mando,
   su botón; en el móvil, nada. En el puño y el escudo, en la esquina, como su tecla de siempre */
.hud-actions .btn[data-tecla]::after {
  display: inline-block;
  margin-left: 10px;
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: var(--void);
  color: var(--ink);
  font: 700 11px/16px var(--font-mono);
  letter-spacing: 0;
  vertical-align: 2px;
}
[data-dispositivo="keyboard"] .hud-actions .btn[data-tecla]:not(.btn-icono)::after,
[data-dispositivo="mouse"] .hud-actions .btn[data-tecla]:not(.btn-icono)::after { content: attr(data-tecla); }
[data-dispositivo="gamepad"] .hud-actions .btn[data-boton]::after { content: attr(data-boton); }
[data-dispositivo="gamepad"] .hud-actions .btn-icono::after { position: absolute; right: -6px; bottom: -6px; margin: 0; }
[data-dispositivo="gamepad"] .btn-icono .tecla,
[data-dispositivo="touch"] .btn-icono .tecla { display: none; }
.btn-primary[data-tecla]::after { border-color: var(--void); }

/* El plano de entrada (main.js, empezarIntro): el rótulo de Virave con la hora y, mientras baja la
   cámara, sin botones ni dinero, como en los juegos grandes */
.intro-titulo {
  position: fixed;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 12px;
  pointer-events: none;
  text-align: center;
  opacity: 0;
}
.intro-titulo[hidden] { display: none; }
.intro-titulo img { width: min(420px, 66vw); height: auto; filter: drop-shadow(0 0 16px rgba(10, 9, 16, 0.9)); }
.intro-titulo img[hidden] { display: none; }
.intro-titulo .etiqueta { margin: 0; color: var(--ink); text-shadow: 0 1px 0 var(--void), 0 0 12px var(--void); }
.intro-titulo.entra { animation: intro-titulo 3.4s ease-in-out forwards; }
@keyframes intro-titulo {
  0% { opacity: 0; transform: translate(-50%, -44%); }
  22% { opacity: 1; transform: translate(-50%, -50%); }
  72% { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(-50%, -52%); }
}
.en-intro .hud-actions, .en-intro .radar, .en-intro .hint, .en-intro .mision-aviso { visibility: hidden; }

/* Adónde ir (objetivo.js): un rombo volt con los metros encima del sitio y, fuera de la pantalla, una
   flecha en el borde que apunta hacia allí */
.objetivo {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  will-change: transform;
}
.objetivo[hidden], .entrando .objetivo { display: none; }
.objetivo-flecha {
  position: absolute;
  left: -7px;
  top: -7px;
  width: 14px;
  height: 14px;
  background: var(--volt);
  border: 2px solid var(--void);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(62, 230, 255, 0.6);
}
.objetivo:not(.fuera) .objetivo-flecha { transform: rotate(45deg); }
/* Fuera de la pantalla: un triángulo que apunta (el giro lo pone objetivo.js) */
.objetivo.fuera .objetivo-flecha {
  left: -11px;
  top: -9px;
  width: 22px;
  height: 18px;
  border: 0;
  background: var(--volt);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 22% 50%);
  box-shadow: none;
}
.objetivo-metros {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  padding: 0 5px;
  border-radius: var(--radius-sm);
  background: rgba(10, 9, 16, 0.72);
  font: 700 11px/16px var(--font-mono);
  color: var(--volt);
  white-space: nowrap;
}
.objetivo.fuera .objetivo-metros { top: 14px; }

/* De dónde viene el golpe (main.js, danoDesde): un arco flare en el borde, hacia quien te ha dado */
.dano-dir {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(78vw, 78vh);
  height: min(78vw, 78vh);
  border-radius: 50%;
  border-top: 6px solid var(--flare);
  pointer-events: none;
  opacity: 0;
  animation: dano-dir 1s ease-out;
  z-index: 3;
}
@keyframes dano-dir {
  0% { opacity: 0.95; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .dano-dir { animation-duration: 0.6s; } }

/* Las barras de la acción (barras.js), dentro del aviso de la misión: la vida del rival a trozos, la
   sospecha y lo que le falta a quien huye para escaparse */
.barras {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "quien aviso" "barra barra";
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.barras[hidden] { display: none; }
.barras-quien { grid-area: quien; font: 700 12px/16px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barras-aviso { grid-area: aviso; justify-self: end; font: 700 12px/16px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }
.barras-barra { grid-area: barra; display: flex; gap: 3px; height: 8px; }
.barras-barra i { flex: 1; height: 100%; background: var(--line); }
.barras[data-modo="pelea"] .barras-barra i.lleno { background: var(--flare); }
/* Sospecha y persecución: una sola barra que se llena */
.barras:not([data-modo="pelea"]) .barras-barra { background: var(--line); }
.barras:not([data-modo="pelea"]) .barras-barra i { flex: none; width: 100%; background: var(--volt); transform: scaleX(0); transform-origin: left center; transition: transform 0.15s linear; }
.barras.peligro .barras-barra i { background: var(--flare); }
.barras.peligro .barras-aviso, .barras.amaga .barras-aviso { color: var(--flare); }
.barras.contra .barras-aviso { color: var(--volt); animation: parpadeo 0.35s steps(2) infinite; }
@keyframes parpadeo { 50% { opacity: 0.35; } }

/* El sigilo (sigilo.js): encima de cada vigilante, su medidor (un aro que se llena, con un «?» volt que pasa
   a «!» flare); si no se le ve, al borde de la pantalla, con una flecha hacia él */
.vigias { position: fixed; inset: 0; pointer-events: none; z-index: 3; }
.entrando .vigias, body.en-cine .vigias { display: none; }
.vigia { position: fixed; left: 0; top: 0; width: 40px; height: 40px; color: var(--volt); will-change: transform; }
.vigia[hidden] { display: none; }
.vigia svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.vigia-fondo { fill: var(--void); fill-opacity: 0.78; stroke: var(--line); stroke-width: 3; }
.vigia-lleno { fill: none; stroke: currentColor; stroke-width: 3.5; stroke-dasharray: 0 100; transition: stroke-dasharray 0.15s linear; }
.vigia b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 19px/1 var(--font-display); color: currentColor; }
.vigia.peligro { color: var(--flare); }
.vigia.busca b { animation: parpadeo 0.5s steps(2) infinite; }
.vigia-flecha { display: none; }
.vigia.fuera .vigia-flecha {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-left: 9px solid currentColor;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  transform-origin: 0 0;
  transform: rotate(var(--giro, 0rad)) translate(23px, -7px);
}
@media (prefers-reduced-motion: reduce) { .vigia.busca b { animation: none; } .vigia-lleno { transition: none; } }
/* Debajo de la sospecha: si vas agachado y las latas que te quedan */
.barras-sigilo { grid-column: 1 / -1; display: flex; gap: 6px; margin-top: 2px; }
.barras-sigilo[hidden], .barras-chip[hidden] { display: none; }
.barras-chip { padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; font: 700 10px/16px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.barras-chip.activa { border-color: var(--volt); background: var(--volt); color: var(--void); }

/* «K.O.» y «¡Contraataque!» (main.js, sello): entran de golpe en el centro y se van */
.sello {
  position: fixed;
  left: 50%;
  top: 38%;
  margin: 0;
  transform: translate(-50%, -50%);
  font: 700 64px/1 var(--font-display);
  text-transform: uppercase;
  color: var(--flare);
  text-shadow: 0 3px 0 var(--void), 0 0 24px var(--void);
  pointer-events: none;
  white-space: nowrap;
  z-index: 4;
  animation: sello 1.6s ease-out forwards;
}
.sello.contra { top: 30%; font-size: 30px; color: var(--volt); animation-duration: 0.9s; }
@keyframes sello {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.08); }
}
@media (max-width: 700px) { .sello { font-size: 48px; } .sello.contra { font-size: 24px; } }

/* Con poca vida en una misión (main.js, latir): los bordes laten en flare, al ritmo del corazón (solo
   cambia la opacidad: no se repinta la sombra en cada fotograma) */
.vineta::before {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 18vmin rgba(255, 77, 157, 0.45);
  opacity: 0;
}
.vida-baja .vineta::before { animation: vida-baja 0.95s ease-out infinite; }
@keyframes vida-baja {
  0%, 100% { opacity: 0.25; }
  20% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sello { animation-duration: 0.8s; }
  .barras.contra .barras-aviso { animation: none; }
  .vida-baja .vineta::before { animation: none; opacity: 0.7; }
}

/* Medallas (server/src/misiones.js, MEDALLAS): en el pantallazo de «Misión superada» y en el panel. Con los
   colores de la marca: oro en volt, plata en ink y bronce en ultra (el nombre va escrito) */
.pantallazo-medalla { display: grid; justify-items: center; gap: 6px; margin-top: var(--space-2) !important; }
.pantallazo-medalla[hidden] { display: none; }
.medalla {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font: 700 12px/18px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--void);
  text-shadow: none;
}
.medalla-oro { background: var(--volt); }
.medalla-plata { background: var(--ink); }
.medalla-bronce { background: var(--ultra); }
.pantallazo-medalla .medalla { font-size: 14px; line-height: 22px; padding: 3px 14px; }
.medalla-datos { font: 700 12px/18px var(--font-mono); color: var(--ink); letter-spacing: 0.04em; }
/* En el panel de la historia: lo que pide el oro del capítulo (misiones.js) */
.mision-retos { margin: 4px 0 0; font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.mision-retos .etiqueta { color: var(--volt); }
.mision-retos .medalla { font-size: 10px; line-height: 16px; padding: 0 6px; vertical-align: 1px; }
/* Los retos del oro (hud.js, server/src/retos.js): cumplidos en volt, los demás apagados */
.medalla-retos { display: grid; gap: 2px; margin: 4px 0 0; padding: 0; list-style: none; text-align: left; }
.medalla-retos .reto { display: flex; align-items: center; gap: 6px; font: 600 13px/18px var(--font-sans); color: var(--ink-muted); }
.medalla-retos .reto.ok { color: var(--ink); }
.medalla-retos svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--line); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.medalla-retos .reto.ok svg { stroke: var(--volt); }
.mision-titulo .medalla { margin-left: var(--space-2); font-size: 10px; line-height: 16px; padding: 0 6px; vertical-align: 1px; }

/* Al empezar la acción (main.js): «¡Pelea!», «¡A cubierto!», «¡Que no se escape!»; y «¡Despejado!» al tumbar
   al último del tiroteo */
.sello.accion { top: 32%; font-size: 40px; color: var(--ink); animation-duration: 1.3s; }
.sello.accion.pelea { color: var(--flare); }
.sello.despejado { font-size: 48px; color: var(--volt); }
@media (max-width: 700px) {
  .sello.accion { font-size: 30px; }
  .sello.despejado { font-size: 36px; }
}
/* La historia principal y las secundarias, separadas (misiones.js): la barra de capítulos de la historia
   y la cabecera de cada grupo de secundarias (Trabajos, Fiesta, Ligar) */
.historia-porcentaje { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 6px; }
.historia-porcentaje strong { font-family: var(--font-display); font-size: 28px; line-height: 1; color: var(--ink); }
.historia-porcentaje .etiqueta { color: var(--ink-muted); }
.historia-progreso { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; height: 6px; margin-bottom: 2px; }
.historia-progreso span { background: var(--line); border-radius: 1px; }
.historia-progreso span.hecho { background: var(--flare); }
.historia-progreso span.ahora { background: var(--ultra); }
.misiones-grupo { margin: var(--space-2) 0 0; color: var(--ink-muted); }
.misiones-grupo:first-child { margin-top: 0; }
.mision.bloqueada { gap: 2px; padding: var(--space-2) var(--space-4); }
/* Tu aguante en las peleas duras (barras.js): una barra fina volt que se gasta al pegar y al parar; sin
   aire o con la guardia rota, en flare */
.barras-aguante { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; margin: 2px 0 4px; }
.barras-aguante[hidden] { display: none; }
.barras-aguante .etiqueta { font-size: 10px; line-height: 14px; color: var(--ink-muted); }
.barras-aguante-barra { height: 4px; background: var(--line); overflow: hidden; }
.barras-aguante-barra i { display: block; width: 100%; height: 100%; background: var(--volt); transform-origin: left center; transition: transform 0.25s linear; }
.barras-aguante.flojo .barras-aguante-barra i { background: var(--flare); }

/* El personaje del modo online (editor.js, createOnline): en una fila que se desliza; los de candado, apagados */
.online-personajes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.online-personajes::-webkit-scrollbar { display: none; }
.online-personajes .frase { flex: none; }
.online-personajes .frase.bloqueado { opacity: 0.45; border-style: dashed; }

/* La rueda de armas (inventario.js), como la del GTA: se abre con su botón, al lado de saltar (o Tab). En el centro
   de la pantalla, un aro con los puños, el bate, la ametralladora y el pasamontañas (lo que tengas); lo resaltado,
   en ultra; lo que llevas en la mano y el pasamontañas puesto, con el borde en volt; el arma que pide la misión,
   latiendo. En el centro, su nombre */
.rueda-armas {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background: rgba(10, 9, 16, 0.45);
  touch-action: none;
}
.rueda-armas[hidden] { display: none; }
.rueda-armas.solo-ver { pointer-events: none; background: none; }
/* El aro y, a su lado (debajo en el móvil en vertical), las barras de lo resaltado */
.rueda-armas-caja {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-4);
}
.rueda-armas-aro {
  position: relative;
  width: min(80vw, 320px, 72vh);
  aspect-ratio: 1;
}
/* Los cuatro trozos del aro: oscuros y translúcidos con un filo claro; el resaltado, en ultra; lo que llevas,
   con el filo en volt; lo que aún no tienes, casi apagado */
.rueda-armas-trozos { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rueda-armas-trozos path {
  fill: rgba(10, 9, 16, 0.78);
  stroke: var(--line-strong);
  stroke-width: 0.5;
  transition: fill 0.12s;
}
.rueda-armas-trozos path.vacia { fill: rgba(10, 9, 16, 0.5); stroke: var(--line); }
.rueda-armas-trozos path.en-mano { stroke: var(--volt); stroke-width: 0.9; }
.rueda-armas-trozos path.sel { fill: rgba(155, 107, 255, 0.55); stroke: var(--ultra); stroke-width: 0.9; }
.rueda-armas-trozos path.pide:not(.sel) { animation: rueda-trozo-pide 1s ease-in-out infinite; }
@keyframes rueda-trozo-pide { 50% { stroke: var(--volt); stroke-width: 1.4; } }
/* Los iconos, grandes y sin botón alrededor, en el centro de su trozo */
.rueda-armas-cosa {
  position: absolute;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  touch-action: none;
}
.rueda-armas-cosa svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rueda-armas-cosa.vacia { color: var(--ink-muted); opacity: 0.35; cursor: default; }
.rueda-armas-cosa.en-mano { color: var(--volt); }
.rueda-armas-cosa.sel { color: var(--ink); }
.rueda-armas-cosa:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.rueda-armas-cosa .tecla {
  position: absolute;
  right: 4px;
  bottom: 4px;
  min-width: 16px;
  padding: 0 3px;
  font: 700 10px/16px var(--font-mono);
  color: var(--ink-muted);
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: none;
}
[data-dispositivo="keyboard"] .rueda-armas-cosa .tecla, [data-dispositivo="mouse"] .rueda-armas-cosa .tecla { display: block; }
.rueda-armas-centro {
  position: absolute;
  inset: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  pointer-events: none;
}
.rueda-armas-nombre { font: 600 15px/1.15 var(--font-display); color: var(--ink); }
.rueda-armas-que { font: 700 10px/14px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--volt); }
/* Daño, cadencia, precisión y alcance, en barras */
.rueda-armas-datos {
  display: grid;
  grid-template-columns: auto 120px;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  padding: 12px var(--space-4);
  background: rgba(10, 9, 16, 0.78);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  pointer-events: none;
}
.rueda-armas-datos[hidden] { display: none; }
.rueda-armas-datos dt { font: 700 10px/14px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.rueda-armas-datos dd { margin: 0; height: 6px; background: var(--line); overflow: hidden; }
.rueda-armas-datos i { display: block; height: 100%; background: var(--ink); transform-origin: left center; transition: transform 0.15s; }
@media (prefers-reduced-motion: reduce) { .rueda-armas-trozos path.pide, #colleja-btn.btn-icono.pide, #armas-btn.btn-icono.pide { animation: none; border-color: var(--volt); stroke: var(--volt); } }

/* El cochazo de la puerta (vehiculos.js): el letrero de encima, al acercarte */
.coche-letrero {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 3;
  padding: 6px 12px;
  border: 1px solid var(--volt);
  border-radius: var(--radius-md);
  background: rgba(10, 9, 16, 0.88);
  color: var(--ink);
  font: 600 14px/20px var(--font-sans);
  white-space: nowrap;
  pointer-events: none;
  will-change: transform;
}
.coche-letrero[hidden], .entrando .coche-letrero, body.en-cine .coche-letrero { display: none; }
.coche-letrero kbd {
  display: inline-block;
  min-width: 22px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--volt);
  color: var(--void);
  font: 700 13px/20px var(--font-mono);
  text-align: center;
}
.coche-letrero span { color: var(--ink-muted); }

/* La barbería La Navaja y la tienda Drip (estilista.js). Móvil de pie: abajo, ocupando algo menos de la mitad
   (arriba se ve tu cara de cerca); apaisado y PC: a la derecha. Lo que llevas puesto, marcado en ultra; lo que
   resaltas con el teclado o el mando, con el borde volt; pagar, el único botón en flare */
.estilista {
  position: fixed; z-index: 45; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; max-height: 46vh;
  padding: var(--space-4) var(--space-4) calc(env(safe-area-inset-bottom) + var(--space-2));
  background: rgba(10, 9, 16, 0.94); border-top: 1px solid var(--line-strong);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  color: var(--ink); font-family: var(--font-sans);
}
.estilista[hidden] { display: none; }
@media (orientation: landscape), (min-width: 900px) {
  .estilista {
    left: auto; top: 0; width: min(380px, 42vw); max-height: none;
    padding-top: calc(env(safe-area-inset-top) + var(--space-4));
    border-top: 0; border-left: 1px solid var(--line-strong); border-radius: 0;
  }
}
.estilista-cabeza { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px var(--space-2); }
.estilista-cabeza .etiqueta { grid-column: 1 / -1; margin: 0; font: 700 11px/14px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--volt); }
.estilista h2 { margin: 0; font: 600 18px/24px var(--font-display); }
.estilista-girar {
  min-height: 40px; padding: 0 12px; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--dusk); color: var(--ink); border: 1px solid var(--line-strong);
  font: 700 11px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
}
.estilista-pestanas { display: flex; gap: var(--space-2); margin: var(--space-2) 0; }
.estilista-pestanas[hidden] { display: none; }
.estilista-pestanas button {
  flex: 1; min-height: 40px; border-radius: var(--radius-pill); cursor: pointer;
  background: transparent; color: var(--ink-muted); border: 1px solid var(--line);
  font: 700 12px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.estilista-pestanas button[aria-selected="true"] { background: var(--ultra); border-color: var(--ultra); color: var(--void); }
.estilista-lista { flex: 1; min-height: 0; overflow-y: auto; margin: 0; padding: 0; list-style: none; overscroll-behavior: contain; }
.estilista-grupo { padding: 10px 2px 4px; font: 700 10px/12px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.estilista-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: 2px 0; padding: 0 12px;
  background: var(--dusk); color: var(--ink); border: 2px solid transparent; border-radius: var(--radius-md);
  font: 500 15px/1.2 var(--font-sans); text-align: left; cursor: pointer;
}
.estilista-item[aria-selected="true"] { background: var(--ultra); color: var(--void); }
.estilista-item.resaltado { border-color: var(--volt); }
.estilista-nombre { flex: 1; }
.estilista-precio { font: 700 12px/1 var(--font-mono); opacity: 0.85; }
.estilista-muestra { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink); flex: none; }
.estilista-pie { padding-top: var(--space-2); }
.estilista-cuenta { margin: 0 0 var(--space-2); min-height: 18px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.estilista-botones { display: flex; gap: var(--space-2); }
.estilista-botones .btn { flex: 1; min-width: 0; }
.estilista-pagar { background: var(--flare); color: var(--void); border-color: var(--flare); }
.estilista-pagar:disabled { background: var(--dusk); color: var(--ink-muted); border-color: var(--line); }
.estilista-ayuda { margin: var(--space-2) 0 0; font: 400 11px/15px var(--font-mono); color: var(--ink-muted); }
/* Con el panel abierto, fuera lo demás de la pantalla (como en las conversaciones), y sin las franjas de cine */
body.en-estilista :is(.hud-top, .radar, .mision-aviso, .hud-actions, .stick, .chat-log, .chat-ver, #ajustes-btn, .ahora-suena, .rueda-armas, .consejo, .pantallazo, .movil) { visibility: hidden !important; }
body.en-estilista .cine.dialogo::before, body.en-estilista .cine.dialogo::after { height: 0; }

/* Primeros pasos (ensenanza.js): una tarjeta arriba, en medio; el paso hecho, en volt; el botón que toca, con un
   anillo volt que late (en el móvil) */
.ensenanza {
  position: fixed; z-index: 35; left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top) + 64px);
  width: min(340px, calc(100vw - 2 * var(--space-4)));
  padding: 12px var(--space-4) 10px;
  background: rgba(10, 9, 16, 0.9); border: 1px solid var(--ultra); border-radius: var(--radius-md);
  color: var(--ink); font-family: var(--font-sans); pointer-events: auto;
}
.ensenanza[hidden] { display: none; }
.ensenanza p { margin: 0; }
.ensenanza-cabeza { display: flex; justify-content: space-between; font: 700 10px/14px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.ensenanza-cabeza .etiqueta { color: var(--ultra); }
.ensenanza-titulo { margin-top: 4px !important; font: 600 16px/22px var(--font-display); }
.ensenanza-texto { margin-top: 2px !important; font-size: 14px; line-height: 19px; color: var(--ink); }
.ensenanza-barra { height: 4px; margin-top: 10px; background: var(--dusk); border-radius: 2px; overflow: hidden; }
.ensenanza-barra span { display: block; height: 100%; width: 0; background: var(--ultra); transition: width 0.4s ease-out; }
.ensenanza.hecho { border-color: var(--volt); }
.ensenanza.hecho .ensenanza-titulo { color: var(--volt); }
.ensenanza.hecho .ensenanza-barra span { background: var(--volt); }
.ensenanza-saltar {
  display: block; margin: 8px 0 0 auto; min-height: 32px; padding: 0 10px; cursor: pointer;
  background: none; border: 0; color: var(--ink-muted); font: 700 10px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.ensena-foco { outline: 3px solid var(--volt); outline-offset: 4px; animation: ensena-late 1s ease-in-out infinite; }
@keyframes ensena-late { 50% { outline-offset: 8px; outline-color: rgba(62, 230, 255, 0.35); } }
@media (prefers-reduced-motion: reduce) { .ensena-foco { animation: none; } }
body.en-intro .ensenanza, body.en-cine .ensenanza, body.en-estilista .ensenanza, body.pads-activos .ensenanza { display: none; }
@media (orientation: portrait) and (max-width: 899px) { .estilista.tienda { max-height: 40vh; } }

/* La noche en orden en el panel de misiones (misiones.js, pintarNoche): capítulos y encargos intercalados */
.noche-orden { display: grid; gap: 6px; }
.noche-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 260px; overflow-y: auto; }
.noche-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid transparent; font: 400 14px var(--font-sans); color: var(--ink); }
.noche-item.cap span { font-weight: 700; }
.noche-item.hecho { color: var(--ink-muted); }
.noche-item.hecho span::before { content: '✓ '; color: var(--volt); }
.noche-item.toca { border-color: var(--volt); background: var(--dusk); }
.noche-item.luego { opacity: 0.45; }
.noche-item.elegida { outline: 2px solid var(--volt); outline-offset: 1px; }
.noche-btn { min-height: 30px; min-width: 0; padding: 0 12px; font-size: 13px; }


/* Los minijuegos de las misiones, que quepan en cualquier móvil (Joao, 4/11: «muchos errores en el móvil»).
   Probado con Playwright en iPhone SE (320 x 568), Pixel 7 y los dos tumbados:
   - nunca más altos que la pantalla: si no caben, se desplazan por dentro (antes, en un móvil bajo o tumbado,
     el título, el estado o «Salir» quedaban fuera y no se podían tocar)
   - la tarjeta de «Primeros pasos» se aparta con cualquier minijuego, la cámara de fotos, el menú o una pregunta
     (tapaba las pistas de la comanda y las casillas del candado) */
.pads, .frecuencias, .cables, .anillos, .contrabando, .rueda {
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.rueda-activa .ensenanza, body.comanda-activa .ensenanza, body.en-visor .ensenanza, body.en-menu .ensenanza,
body:has(#eleccion:not([hidden])) .ensenanza, body:has(#misiones:not([hidden])) .ensenanza { display: none; }
/* La rueda: «Borrar», «Marcar» y «Salir» en una fila, sin el ancho mínimo de los botones grandes */
.rueda-botones .btn { min-width: 0; padding: 0 var(--space-2); }
/* La comanda: las columnas de las copas, iguales aunque el nombre sea largo («Botella») */
.comanda-tabla { grid-template-columns: minmax(72px, auto) repeat(var(--copas), minmax(0, 1fr)); }
.comanda-copa { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Móviles estrechos (320 px): la rueda, más pequeña para que quepan las flechas */
@media (max-width: 359px) {
  .rueda { padding: 12px; }
  .rueda-dial { gap: 8px; }
  .rueda-gira { width: 44px; height: 44px; }
  .rueda-disco { width: 136px; height: 136px; }
  .rueda-numeros span { transform: translate(-50%, -50%) rotate(calc(var(--n) * 36deg)) translateY(-50px); }
  .rueda-actual { font-size: 38px; }
  .rueda-casilla { width: 36px; height: 44px; }
}

/* Tumbado (poco alto): el tablero o la rueda a un lado y lo demás al otro, centrados en la pantalla */
@media (orientation: landscape) and (max-height: 540px) {
  .cables, .contrabando, .anillos, .frecuencias, .rueda, .pads {
    top: 50%; bottom: auto; transform: translate(-50%, -50%);
    width: min(calc(100vw - 32px), 680px);
    grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-4); row-gap: 8px; align-items: center;
    padding: 12px var(--space-4);
  }
  .cables > *, .contrabando > *, .anillos > *, .frecuencias > *, .rueda > *, .pads > * { grid-column: 2; }
  .pads .pads-cruz { grid-column: 1; grid-row: 1 / span 6; }
  .cables-rejilla, .contrabando-tablero {
    grid-column: 1; grid-row: 1 / span 6;
    width: min(300px, calc(100vh - 56px)); width: min(300px, calc(100dvh - 56px));
  }
  .anillos .anillos-caja { grid-column: 1; grid-row: 1 / span 6; width: min(340px, 46vw); }
  .frecuencias .frec-pantalla, .frecuencias .frec-camaras, .frecuencias .frec-tiempo { grid-column: 1; }
  .frecuencias .frec-pantalla { grid-row: 1 / span 4; width: min(320px, 44vw); }
  .frecuencias .frec-camaras { grid-row: 5; }
  .frecuencias .frec-tiempo { grid-row: 6; }
  .rueda .rueda-casillas, .rueda .rueda-dial { grid-column: 1; }
  .rueda .rueda-casillas { grid-row: 1; }
  .rueda .rueda-dial { grid-row: 2 / span 4; }
  .rueda-disco { width: 136px; height: 136px; }
  .rueda-numeros span { transform: translate(-50%, -50%) rotate(calc(var(--n) * 36deg)) translateY(-50px); }
  .rueda-botones { grid-template-columns: 1fr; }
  .rueda-botones .btn, .pads-botones .btn { min-height: 44px; }
  /* La comanda: las pistas a la izquierda y la libreta a la derecha */
  .comanda {
    width: min(calc(100vw - 32px), 760px); max-height: calc(100dvh - 16px);
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: var(--space-4); row-gap: 6px; padding: 12px var(--space-4);
  }
  .comanda > * { grid-column: 2; }
  .comanda .etiqueta, .comanda .comanda-pistas, .comanda .comanda-ayuda { grid-column: 1; }
  .comanda .etiqueta { grid-row: 1; }
  .comanda .comanda-pistas { grid-row: 2 / span 3; align-self: start; font-size: 13px; }
  .comanda .comanda-ayuda { grid-row: 5; }
  .comanda .comanda-tabla { grid-row: 1 / span 2; }
  .comanda-casilla { min-height: 38px; }
  .comanda-botones .btn { min-height: 44px; }
}
/* Móviles de 320 px: la cabecera no cabía y el engranaje del menú quedaba fuera de la pantalla. Del indicador de
   la sala queda el punto (su color dice si estás conectado) */
@media (max-width: 359px) {
  #gente-texto { display: none; }
  .hud-top-der .chip { padding: 4px 6px; }
  .hud-top-der .btn-mini { padding: 0 8px; }
}
/* Con el panel de misiones abierto, el aviso del móvil se aparta: en el móvil quedaba encima de la cabecera del
   panel (la reputación y la noche). El mensaje también queda en el chat */
body:has(#misiones:not([hidden])) .movil { visibility: hidden; }