/* Solo la "carcasa" del juego (recuadro, HUD, textos): el dibujo del propio
   juego (canvas, física, colores del astronauta y los obstáculos) se deja
   tal cual está programado en game.html. */

/* flex + min-height:0: antes este bloque solo ocupaba lo que su
   contenido medía y el hueco libre de móviles altos se quedaba en
   blanco entre la consola y el menú de abajo (empujado ahí por el
   margin-top:auto de .bottom-nav). Con flex:1 se queda con todo ese
   espacio de sobra él mismo, para poder pasárselo a la consola (ver
   #console-unit más abajo). */
#game-wrap {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.6vw, 18px);
  user-select: none;
}

/* Ya no hace falta empujarlo con margin-top:auto: #game-wrap (con
   flex:1) ya consume todo el hueco libre por su cuenta, así que
   .bottom-nav simplemente queda pegado justo debajo. */
.page-shell > .bottom-nav {
  flex: 0 0 auto;
}

.mode-select#menu-screen {
  width: 100%;
}

.hidden {
  display: none !important;
}

/* ---------- Contenedor del juego, sin recuadro: solo agrupa HUD + canvas ---------- */
.game-frame {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.2vw, 14px);
}

/* HUD (HI / SCORE) superpuesto arriba, dentro de la propia pantalla del
   juego, en vez de ir en una barra aparte por fuera. */
#hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  font-family: 'Courier New', monospace;
  font-size: clamp(0.75rem, 1.4vw, 0.95rem);
  letter-spacing: 1px;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 6px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* Texto "HI"/"SCORE" quitado de la pantalla, pero los elementos se dejan
   en el DOM (solo ocultos) porque el JS sigue actualizando su contenido
   para calcular hiscore/ranking. */
.hud-visually-hidden {
  display: none !important;
}

/* El "HI" de la izquierda se deja invisible pero ocupando su hueco (en
   vez de display:none) para que, con justify-content:space-between, el
   SCORE de la derecha no se recoloque a la izquierda al quedarse solo. */
.hud-hi-hidden {
  visibility: hidden;
}

/* ---------- Cuerpo único de consola: pantalla arriba + mando abajo ---------- */
/* En relieve hacia fuera, como una carcasa de verdad: un canto sólido
   debajo (--key-depth) más un brillo arriba y una sombra abajo por
   dentro, igual que el resto de botones "tecla" del panel. */
.console-unit {
  --key-depth: 10px;
  width: 100%;
  max-width: 600px;
  /* flex:1 (dentro de .game-frame, que también es flex:1): la consola se
     estira para ocupar todo el alto libre de la pantalla en vez de
     quedarse en su alto "natural" y dejar hueco vacío por debajo. La
     pantalla del juego (canvas) mantiene su proporción de siempre —
     justify-content:space-between manda el espacio de más al hueco
     entre la pantalla y el panel de mando, así el panel queda pegado
     abajo del todo de la consola en vez de flotar en medio. */
  flex: 1 1 auto;
  min-height: 0;
  /* Textura camuflaje real (camuflaje.avif), en vez del patrón dibujado
     con radial-gradient. */
  background: url('../assets/game/camuflaje.avif') center / cover no-repeat;
  border-radius: 22px;
  outline: 2px solid rgba(255, 255, 255, 0.35);
  outline-offset: -2px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    inset 0 -10px 16px rgba(0, 0, 0, 0.45),
    0 var(--key-depth) 0 0 rgba(0, 0, 0, 0.5),
    0 calc(var(--key-depth) + 14px) 26px rgba(0, 0, 0, 0.5);
  /* OJO: el problema real nunca fue "poco margen debajo de los botones"
     (subir ese padding solo hacía falta MÁS alto total, así que en
     pantallas bajas la fila se salía TODAVÍA más por abajo — por eso
     subirlo una y otra vez no arreglaba nada). El problema de verdad es
     que #console-unit no recorta lo que no le cabe (no tiene
     overflow:hidden) y en una pantalla de móvil "baja de verdad" (el
     alto visible real, contando la barra de Chrome — que dado deja
     bastante menos alto libre que Safari en el mismo móvil) todo el
     contenido del panel (logo + fila de botones + este padding) no cabe
     y se sale por debajo del recuadro. La solución de verdad es que ese
     contenido se achique en pantallas bajas (ver .console-logo,
     .console-round-icon y .console-extra-row, todos con un tope en vh
     además del de vw) — este padding se queda modesto y también con
     tope en vh. */
  padding: clamp(12px, 2vw, 18px) clamp(12px, 2vw, 18px) clamp(10px, 2vh, 24px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: min(clamp(12px, 2vw, 18px), 1vh);
}

/* En móvil, todos los botones (saltar, agacharse, pausa, color, ranking,
   música/efectos) suben un poco más — más margen debajo de toda la fila.
   El tope en vh (no solo un valor fijo) hace que en una pantalla baja de
   verdad esto se quede pequeño solo (en vez de reintroducir el problema
   de antes, donde no cabía y se salía del recuadro). */
@media (max-width: 700px) {
  .console-unit {
    padding-bottom: clamp(24px, 5vh, 46px);
  }
}

#canvas-container {
  position: relative;
  width: 100%;
}

/* El fondo de verdad (fondo-ciudad.webp / FONO10) se dibuja en el canvas
   (ver drawCityBg en game.html), a pantalla completa y con paralaje —
   este color de aquí solo se ve un instante mientras esa imagen carga,
   o en el borde de abajo del todo. Ya no hay un color de cielo distinto
   por nivel (antes rosa en el 1, azul/verde lima/naranja/lila en el
   2-5): con una imagen de fondo de verdad, tintarla de un color liso ya
   no pegaba. */
#game {
  display: block;
  width: 100%;
  height: auto;
  background: #2a2135;
  border-radius: 14px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  image-rendering: auto;
  touch-action: manipulation;
}

/* ---------- Barra de progreso del nivel 1: fina, dentro de la propia
   pantalla del juego, pegada arriba del todo. ---------- */
.level-progress {
  position: absolute;
  top: clamp(8px, 1.6vw, 14px);
  left: 12%;
  right: 12%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.level-progress-track {
  position: relative;
  flex: 1;
  height: clamp(6px, 1.1vw, 9px);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.4) inset;
  overflow: hidden;
}

/* Mismo amarillo/dorado de boton-izquierdo.webp (el botón de agacharse),
   en vez del rosa de antes — color fijo, no ligado a --pink (esa
   variable es global de toda la web). */
.level-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ab7301, #e0a100);
  box-shadow: 0 0 8px rgba(224, 161, 0, 0.7);
  transition: width 0.15s linear;
}

.level-progress-label {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  font-size: clamp(0.6rem, 1.2vw, 0.75rem);
  letter-spacing: 0.5px;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}

#overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: none;
  pointer-events: none;
}

#overlay.show {
  display: block;
}

#overlay h2 {
  margin: 0 0 6px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  color: #ffffff;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}

/* Al perder: solo "GAME OVER" grande en medio, sin nada más alrededor. */
#overlay.game-over h2 {
  margin: 0;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
}

#overlay p {
  margin: 0;
  font-size: clamp(0.75rem, 1.4vw, 0.9rem);
  color: rgba(255, 255, 255, 0.8);
}

#overlay-controls {
  margin-top: 6px;
  font-family: 'Courier New', monospace;
  font-size: clamp(0.7rem, 1.2vw, 0.8rem);
  color: rgba(255, 255, 255, 0.6);
}

/* ---------- Ranking (modo infinito): desplegable a pantalla completa,
   igual que el de elegir color de la consola, en vez de un recuadro fijo
   siempre a la vista debajo del juego. Se abre con el botón del trofeo
   del panel de mando (solo visible en este modo) y se cierra con la ✕,
   tocando fuera, o el propio botón otra vez. ---------- */
.ranking-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 32px);
  background: rgba(8, 4, 10, 0.88);
  backdrop-filter: blur(3px);
}

.ranking-modal.hidden {
  display: none !important;
}

/* Mismo verde oliva/caqui que el resto de recuadros del sitio (tarjetas
   de nivel en historia.html, caja de leyenda en seleccion.html), en vez
   del panel gris translúcido de antes. */
.ranking-modal-inner {
  width: 100%;
  max-width: 600px;
  max-height: 100%;
  overflow-y: auto;
  background: radial-gradient(120% 140% at 50% -10%, #7c8a52 0%, #5b6a3a 45%, #333d21 100%);
  border-radius: 14px;
  outline: 2px solid #cdc7a0;
  outline-offset: -2px;
  box-shadow:
    inset 0 0 0 4px rgba(26, 31, 14, 0.55),
    inset 0 2px 6px rgba(255, 255, 255, 0.25),
    0 10px 24px rgba(0, 0, 0, 0.45);
  padding: clamp(12px, 2vw, 18px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ranking-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  color: #ffffff;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}

.ranking-you {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(26, 31, 14, 0.45);
  outline: 2px solid rgba(205, 199, 160, 0.5);
  outline-offset: -2px;
}

.ranking-you--logged {
  background: rgba(26, 31, 14, 0.7);
  outline-color: #cdc7a0;
}

.ranking-you-pos {
  font-family: 'Anton', sans-serif;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: #e8c847;
  min-width: 1.4em;
}

.ranking-you-name {
  font-family: 'Anton', sans-serif;
  letter-spacing: 0.02em;
  font-size: clamp(0.75rem, 1.3vw, 0.9rem);
  color: rgba(255, 255, 255, 0.85);
}

.ranking-you-score {
  font-family: 'Anton', sans-serif;
  font-size: clamp(0.85rem, 1.5vw, 1rem);
  letter-spacing: 1px;
  color: #fff;
}

.ranking-you-cta {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(0.7rem, 1.1vw, 0.85rem);
  color: #163a0c;
  background: linear-gradient(160deg, #d5f26a, #9fd423);
  border: none;
  padding: 6px 14px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ranking-you-cta:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(201, 242, 74, 0.6);
}

/* Lista con scroll propio (en vez de estirar todo el modal): el recuadro
   no crece por mucha gente que haya — se queda fijo enseñando unos 5
   puestos de golpe, y hace falta desplazarla a mano para ver el resto,
   mientras el título y tu propio puesto (.ranking-you) se quedan
   siempre a la vista arriba. Altura fija (no en vh) para que sean
   siempre ~5 filas, en cualquier pantalla. */
.ranking-list {
  list-style: none;
  margin: 0;
  padding: 0 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 186px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #cdc7a0 rgba(26, 31, 14, 0.4);
}

.ranking-list::-webkit-scrollbar {
  width: 6px;
}

.ranking-list::-webkit-scrollbar-track {
  background: rgba(26, 31, 14, 0.4);
  border-radius: 4px;
}

.ranking-list::-webkit-scrollbar-thumb {
  background: #cdc7a0;
  border-radius: 4px;
}

.ranking-row {
  display: grid;
  grid-template-columns: 2em 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  font-family: 'Anton', sans-serif;
  letter-spacing: 0.02em;
  font-size: clamp(0.75rem, 1.3vw, 0.9rem);
}

.ranking-row:nth-child(odd) {
  background: rgba(26, 31, 14, 0.3);
}

.ranking-row-pos {
  color: rgba(255, 255, 255, 0.65);
  text-align: center;
  font-weight: bold;
}

/* Metallic podium colours with a soft moving reflection. */
.ranking-row--gold{--podium:#ffdc58;--podium-light:#fff5bb;--podium-dark:#bc7f16;--podium-glow:#ffc93866}
.ranking-row--silver{--podium:#dfe9f3;--podium-light:#ffffff;--podium-dark:#8b9cba;--podium-glow:#dcecff66}
.ranking-row--bronze{--podium:#efa96e;--podium-light:#ffe2c0;--podium-dark:#ac5e2c;--podium-glow:#e3985566}
.ranking-row:is(.ranking-row--gold,.ranking-row--silver,.ranking-row--bronze){position:relative;border:0;box-shadow:none;overflow:visible;flex-shrink:0;padding-block:12px;background-image:linear-gradient(110deg,transparent 30%,#ffffff99 48%,transparent 64%),linear-gradient(180deg,var(--podium-light) 0%,var(--podium) 25%,var(--podium-light) 43%,var(--podium-dark) 49%,var(--podium-dark) 54%,var(--podium) 65%,var(--podium-light) 85%,var(--podium) 100%);background-size:260% 100%,100% 100%;background-position:160% 0,0 0;animation:podium-chrome 6s ease-in-out infinite}
.ranking-row:is(.ranking-row--gold,.ranking-row--silver,.ranking-row--bronze)>span{position:relative;z-index:1;font-weight:bold;color:#151711;-webkit-text-fill-color:#151711;text-shadow:0 1px 1px #ffffff80;background:none;filter:none;animation:none}
.ranking-row--silver{animation-delay:-2s!important}.ranking-row--bronze{animation-delay:-4s!important}
@keyframes podium-chrome{0%,25%{background-position:160% 0,0 0}75%,100%{background-position:-100% 0,0 0}}
@media(prefers-reduced-motion:reduce){.ranking-row{animation:none!important}}

.ranking-row-name {
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-row-score {
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 1px;
}

.ranking-note {
  margin: 0;
  text-align: center;
  font-family: 'Anton', sans-serif;
  letter-spacing: 0.02em;
  font-size: clamp(0.65rem, 1.1vw, 0.75rem);
  color: rgba(255, 255, 255, 0.45);
}

/* ---------- Panel de mando: ya no es un recuadro aparte, es la mitad de
   abajo de .console-unit (la pantalla del juego es la mitad de arriba),
   solo con una costura fina arriba para marcar dónde acaba una y empieza
   la otra, como en una consola de verdad. ---------- */
.console-panel {
  width: 100%;
}

/* Logo pequeño encima de todo el panel de mando (botones de saltar/
   agacharse y huecos de las monedas), centrado. min() con un tope en vh
   (no solo en vw): en una pantalla ancha pero BAJA (poco alto real,
   como Chrome de móvil con su barra siempre visible) este logo puramente
   decorativo se achica solo para dejar sitio a los botones de abajo, en
   vez de robarles el hueco y empujarlos fuera del recuadro. */
.console-logo {
  display: block;
  width: min(clamp(140px, 50vw, 270px), 17vh);
  margin: 0 auto clamp(6px, 1.4vw, 12px);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
  pointer-events: none;
  user-select: none;
}

/* En un móvil realmente bajo de alto visible (el caso típico: Chrome con
   su barra de dirección siempre puesta, que dado deja bastante menos
   alto que Safari en el mismo teléfono), encoger este logo ya no basta
   — se quita del todo (es solo decoración, no hace nada) para
   garantizar que el resto del panel (los botones de verdad) quepa
   siempre dentro del recuadro sin salirse. */
@media (max-height: 700px) {
  .console-logo {
    display: none;
  }
}

/* ---------- Fila de botones redondos debajo de las monedas: a los lados,
   on/off de música y de efectos; en medio, el color de la consola (abre
   el desplegable a pantalla completa de ahí abajo). Todos centrados. ---------- */
.console-extra-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 3vw, 22px);
  /* Tope en vh además del de vw, mismo motivo que .console-logo/
     .console-round-icon: en pantallas bajas de verdad, este hueco se
     achica en vez de sumar a lo que ya no cabía. */
  margin-top: min(clamp(10px, 2vw, 16px), 1vh);
}

/* Botón redondo en 3D (mismo efecto "tecla" que saltar/agacharse: un
   canto sólido debajo que desaparece al pulsar), sin texto — solo el
   círculo con el color/textura actual. */
/* Sin fondo/anillo/sombra propios: la imagen (paleta-nueva/boton-trofeo/
   boton-pausa/boton-play) YA es el botón entero, con su propio aro
   metálico y bisel dibujados — poner otro círculo detrás (como antes)
   se veía como un doble borde/aro asomando por detrás de la imagen. */
.console-color-trigger {
  position: relative;
  width: clamp(40px, 8vw, 52px);
  height: clamp(40px, 8vw, 52px);
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: none;
  transform: scale(1);
  transition: transform 0.12s ease;
}

.console-color-trigger:active {
  transform: scale(0.92);
}

/* Icono fijo dentro del botón redondo (color, ranking, pausa/play): la
   imagen ya es un círculo con su propio fondo, así que basta con
   recortarla al círculo del botón (object-fit + border-radius) para que
   encaje justa. */
.console-color-trigger-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* Botones on/off de música y efectos: sin recuadro/pastilla alrededor —
   solo la etiqueta (Música/Efectos) y, debajo, un interruptor mecánico
   tipo consola antigua: una ranura metálica oscura empotrada con una
   palanca rectangular (con rayitas de agarre) que se desliza de un
   extremo al otro, más un pequeño piloto LED fijo que se enciende en
   verde (ON) o queda apagado en rojo (OFF), como el testigo de
   encendido de un aparato de verdad. */
.console-toggle-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: clamp(52px, 11vw, 68px);
  height: clamp(40px, 8vw, 52px);
  padding: 0;
  border: none;
  border-radius: 0;
  cursor: pointer;
  background: none;
  outline: none;
  box-shadow: none;
}

.console-toggle-label {
  font-family: 'Anton', sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: clamp(0.55rem, 1.6vw, 0.68rem);
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.console-toggle-switch {
  /* Ancho y alto en variables para que la palanca (que depende de la
     altura, no del ancho) y el desplazamiento al activar usen siempre
     el mismo valor ya resuelto. */
  --switch-w: clamp(40px, 8.6vw, 50px);
  --switch-h: clamp(20px, 4.4vw, 24px);
  position: relative;
  display: block;
  width: var(--switch-w);
  height: var(--switch-h);
  border-radius: 5px;
  background: linear-gradient(180deg, #17171a, #35353a 45%, #17171a);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.85),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

/* Piloto LED fijo en la esquina de la ranura (no se mueve con la
   palanca): apagado/rojo cuando está en OFF, verde y con resplandor
   cuando está en ON. */
.console-toggle-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 4px;
  width: clamp(3px, 0.9vw, 4px);
  height: clamp(3px, 0.9vw, 4px);
  border-radius: 50%;
  background: #601515;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.6);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.console-toggle-btn[aria-pressed="true"] .console-toggle-switch::after {
  background: #7dffa3;
  box-shadow: 0 0 5px 1.5px rgba(125, 255, 163, 0.9);
}

/* Palanca rectangular metálica, con líneas de agarre grabadas en el
   centro — no una bolita redonda, si no una pestaña tipo interruptor
   físico. */
.console-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(var(--switch-w) * 0.4);
  height: calc(var(--switch-h) - 4px);
  border-radius: 3px;
  background: linear-gradient(180deg, #f2f2f0, #bcbcba 45%, #8f8f8d);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 2px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), filter 0.1s ease;
}

.console-toggle-knob::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 55%;
  height: 50%;
  transform: translate(-50%, -50%);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.4) 0,
    rgba(0, 0, 0, 0.4) 1px,
    transparent 1px,
    transparent 3px
  );
}

.console-toggle-btn:active .console-toggle-knob {
  filter: brightness(0.92);
}

.console-toggle-btn[aria-pressed="true"] .console-toggle-knob {
  transform: translateX(calc(var(--switch-w) - var(--switch-w) * 0.4 - 4px));
}

/* ---------- Desplegable a pantalla completa con las "carcasas" (una
   preview grande por color, con la misma forma que el recuadro de la
   consola) para elegir. ---------- */
.console-color-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 32px);
  background: rgba(8, 4, 10, 0.88);
  backdrop-filter: blur(3px);
}

.console-color-modal.hidden {
  display: none !important;
}

.console-color-modal-inner {
  width: 100%;
  max-width: 640px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.5vw, 20px);
  overflow-y: auto;
  /* overflow-y: auto también hace que el navegador recorte en horizontal
     (no solo en vertical), así que el brillo de la carcasa elegida
     (box-shadow hacia fuera) se cortaba en seco contra ese borde. Con
     este margen alrededor (más que el brillo en sí, con margen de
     sobra) queda sitio de sobra para que se vea completo antes de
     llegar al borde recortado. */
  padding: clamp(26px, 5vw, 36px);
  margin: clamp(-26px, -5vw, -36px);
}

.console-color-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

.console-color-close {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.35) inset;
  transition: background 0.15s ease, transform 0.12s ease;
}

.console-color-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.console-color-close:active {
  transform: scale(0.92);
}

/* Submenú Básico / Camuflaje / Especiales: solo se ve la sección de la
   pestaña activa (ver JS), en vez de las 3 rejillas seguidas. */
.console-color-tabs {
  display: flex;
  gap: 8px;
}

.console-color-tab {
  flex: 1 1 0;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(0.7rem, 1.4vw, 0.85rem);
  color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 10px;
  padding: 8px 6px;
  cursor: pointer;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.2) inset;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.console-color-tab:hover {
  background: rgba(255, 255, 255, 0.14);
}

.console-color-tab.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85) inset, 0 0 10px rgba(255, 255, 255, 0.4);
}

.console-color-section {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.6vw, 12px);
}

.console-color-grid {
  display: grid;
  /* Mínimo más bajo que antes (130px) para que en un móvil estrecho
     (~320-360px) quepan 2-3 columnas de sobra en vez de que las tarjetas
     se aprieten o se salgan del ancho disponible. */
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: clamp(10px, 2.5vw, 18px);
}

/* Cada "carcasa": una preview grande con la misma pinta (esquinas
   redondeadas, sombra) que el recuadro real de la consola, para que se
   vea claro cómo va a quedar antes de elegirla. */
.console-case {
  position: relative;
  aspect-ratio: 4 / 3;
  border: none;
  border-radius: 18px;
  cursor: pointer;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.3) inset, 0 6px 16px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}

.console-case:hover {
  transform: translateY(-2px) scale(1.03);
}

.console-case:active {
  transform: scale(0.97);
}

.console-case.active {
  z-index: 1;
  box-shadow: 0 0 0 3px #ffffff inset, 0 0 16px rgba(255, 255, 255, 0.8);
}

.console-case--camo {
  background: url('../assets/game/camuflaje.avif') center / cover no-repeat;
}

.console-case-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 10px;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.65), transparent);
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(0.65rem, 1.4vw, 0.8rem);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Fila principal: agacharse a la izquierda, monedas en medio, saltar a
   la derecha. Los tamaños/huecos de aquí para abajo van todos en clamp()
   con un mínimo pensado para que quepan los tres bloques (agacharse +
   monedas + saltar) en un móvil estrecho (~320-360px) sin que nada se
   salga de la pantalla; en desktop siguen tan grandes como antes. */
.console-screen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 4vw, 34px);
}

/* Colección de monedas: la bandeja sobresale hacia fuera en relieve
   (como una placa montada sobre la consola, con su canto sólido debajo,
   igual que los botones de saltar/agacharse), y dentro de ella cada
   moneda sigue hundida (ver .coin-slot). */
.coin-collection {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2vw, 14px);
  padding: clamp(6px, 1.6vw, 12px) clamp(6px, 2vw, 16px);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(20, 8, 20, 0.5));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -4px 8px rgba(0, 0, 0, 0.3),
    0 5px 0 0 rgba(0, 0, 0, 0.35),
    0 8px 14px rgba(0, 0, 0, 0.4);
}

/* Cada hueco, mientras no se ha cogido la moneda, es un agujero: un
   círculo hundido (degradado radial oscuro + sombra hacia dentro), no
   una moneda en gris. */
.coin-slot {
  width: clamp(30px, 8vw, 60px);
  height: clamp(30px, 8vw, 60px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  box-shadow:
    inset 0 3px 6px rgba(0, 0, 0, 0.85),
    inset 0 -1px 2px rgba(255, 255, 255, 0.08);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* En cuanto se coge, el agujero "se rellena": desaparece el hundido y se
   ve la moneda a color, a tamaño completo. */
.coin-slot.collected {
  background: none;
  box-shadow: none;
}

.coin-slot-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.coin-slot.collected .coin-slot-img {
  opacity: 1;
}

.coin-slot.collected .coin-slot-img {
  filter: none;
  opacity: 1;
}

/* flex-shrink:0 (como estaba antes) obligaba a este botón a mantener
   SIEMPRE su tamaño "preferido" (el de clamp(...,20vw,...) de
   .console-round-icon, calculado sobre el ancho de toda la pantalla, no
   sobre el hueco real que le deja aquí al lado la bandeja de monedas) —
   en anchos intermedios (ni muy estrecho ni de sobra ancho, algo que en
   Chrome se nota en más tamaños de móvil que en Safari por cómo redondea
   los mismos cálculos) eso no cabía y el círculo se salía literalmente
   del recuadro camuflaje. Con flex-shrink:1 + min-width:0, el botón
   sigue prefiriendo ese tamaño pero puede encogerse si hace falta para
   no desbordar — ver también max-width/flex-basis en .console-round-icon. */
.console-round-btn {
  /* grow:0 (no crece más de la cuenta), shrink:1 (si no cabe, se encoge),
     basis: el tamaño "de sobra" de siempre — así .console-round-icon
     (que ahora es 100% de este ancho) tiene de qué partir para calcular
     su tamaño preferido, y de qué encogerse cuando no cabe. */
  flex: 0 1 clamp(66px, 23vw, 172px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  transform: translateX(0);
  border: none;
  background: none;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* Mantener pulsado saltar/agacharse en Chrome de Android abría el menú
     de "guardar imagen" (por el background-image de .console-round-icon)
     y soltaba el dedo del botón a media partida — con esto se quita ese
     menú contextual/callout del todo, y touch-action evita cualquier
     otro gesto del navegador (arrastrar, hacer zoom...) de por medio. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

/* Agacharse un poco hacia el centro (derecha) y saltar un poco hacia el
   centro (izquierda), sin tocar el tamaño del recuadro (translateX en vez
   de márgenes). */
.console-round-btn--duck {
  transform: translateX(clamp(8px, 2vw, 16px));
}

.console-round-btn--jump {
  transform: translateX(clamp(-16px, -2vw, -8px));
}

/* Botones de saltar/agacharse: las imágenes que has puesto (boton-derecho
   = saltar, boton-izquierdo = agacharse, ya con su propio triángulo y
   relieve dibujados), en vez del círculo con degradado + triángulo de
   texto de antes. Al pulsar, solo se encoge un poco (no hay canto 3D que
   "hundir" porque el relieve ya viene pintado en la propia imagen). */
.console-round-icon {
  /* max-width (no width fijo): el tamaño de sobra sigue siendo hasta
     clamp(...,20vw,...), pero ahora es un TOPE, no un mínimo obligado —
     si el flex del botón se ha encogido (ver .console-round-btn), esta
     imagen se encoge con él en vez de desbordar por su cuenta. El min()
     con 24vh es el mismo tope pero mirando el ALTO real disponible: en
     una pantalla baja (Chrome de móvil con su barra siempre visible, por
     ejemplo) este botón se achica en vez de forzar más altura de la que
     hay y salirse del recuadro por abajo. */
  width: 100%;
  max-width: min(clamp(66px, 23vw, 172px), 12.5vh);
  aspect-ratio: 1 / 1;
  height: auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: scale(1);
  transition: transform 0.12s ease;
}

.console-round-btn--jump .console-round-icon {
  background-image: url('../assets/game/boton-derecho.webp');
}

.console-round-btn--duck .console-round-icon {
  background-image: url('../assets/game/boton-izquierdo.webp');
}

.console-round-btn:active .console-round-icon {
  transform: scale(0.92);
}


/* ---------- Tema "Hello Kitty" (carcasa especial): además del fondo de
   la consola, cambia los botones de saltar/agacharse por los suyos
   propios (ya vienen con su forma/relieve dibujado, así que se quita el
   canto 3D de "tecla" que llevan los demás) y el hueco de las 3 monedas
   por su propia bandeja con los 3 agujeros ya recortados en la imagen —
   las monedas en sí (el círculo de cada .coin-slot) se colocan encima,
   en las mismas coordenadas donde están esos agujeros. ---------- */
.theme-hello .console-round-icon {
  outline: none;
  box-shadow: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.theme-hello .console-round-btn--jump .console-round-icon {
  background-image: url('../assets/game/botoneshello-jump.webp');
}

.theme-hello .console-round-btn--duck .console-round-icon {
  background-image: url('../assets/game/botoneshello-duck.webp');
}

.theme-hello .coin-collection {
  position: relative;
  width: min(100%, 340px);
  aspect-ratio: 1973 / 707;
  background: url('../assets/game/monedashello.webp') center / contain no-repeat;
  box-shadow: none;
  padding: 0;
  gap: 0;
}

.theme-hello .coin-slot {
  position: absolute;
  top: 48.5%;
  width: 15.8%;
  aspect-ratio: 1 / 1;
  height: auto;
  transform: translate(-50%, -50%);
  background: none;
  box-shadow: none;
}

.theme-hello #coin-slot-0 { left: 26.1%; }
.theme-hello #coin-slot-1 { left: 49.5%; }
.theme-hello #coin-slot-2 { left: 73%; }


/* ---------- Modal de login/registro (Supabase): mismo estilo que el
   resto de desplegables del sitio (selector de color, ranking...) —
   tarjeta verde oliva/caqui a pantalla completa. ---------- */
.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 32px);
  background: rgba(8, 4, 10, 0.88);
  backdrop-filter: blur(3px);
}

.auth-modal.hidden {
  display: none !important;
}

.auth-modal-inner {
  width: 100%;
  max-width: 380px;
  max-height: 100%;
  overflow-y: auto;
  background: radial-gradient(120% 140% at 50% -10%, #7c8a52 0%, #5b6a3a 45%, #333d21 100%);
  border-radius: 14px;
  outline: 2px solid #cdc7a0;
  outline-offset: -2px;
  box-shadow:
    inset 0 0 0 4px rgba(26, 31, 14, 0.55),
    inset 0 2px 6px rgba(255, 255, 255, 0.25),
    0 10px 24px rgba(0, 0, 0, 0.45);
  padding: clamp(14px, 3vw, 20px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(1.1rem, 2.6vw, 1.4rem);
  color: #ffffff;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}

.auth-tabs {
  display: flex;
  gap: 8px;
}

.auth-tab {
  flex: 1 1 0;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(0.7rem, 1.4vw, 0.85rem);
  color: rgba(230, 224, 196, 0.75);
  background: rgba(26, 31, 14, 0.45);
  border: none;
  border-radius: 10px;
  padding: 8px 6px;
  cursor: pointer;
  outline: 2px solid rgba(205, 199, 160, 0.35);
  outline-offset: -2px;
  transition: background 0.15s ease, color 0.15s ease, outline-color 0.15s ease;
}

.auth-tab.active {
  color: #ffffff;
  background: linear-gradient(160deg, #7c8a52, #333d21);
  outline-color: #cdc7a0;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-form.hidden {
  display: none;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: 'Anton', sans-serif;
  letter-spacing: 0.02em;
  font-size: clamp(0.65rem, 1.3vw, 0.75rem);
  text-transform: uppercase;
  color: rgba(230, 224, 196, 0.8);
}

.auth-field input {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: clamp(0.85rem, 1.6vw, 0.95rem);
  color: #ffffff;
  background: rgba(26, 31, 14, 0.5);
  border: 2px solid rgba(205, 199, 160, 0.4);
  border-radius: 8px;
  padding: 8px 10px;
  outline: none;
  transition: border-color 0.15s ease;
}

.auth-field input:focus {
  border-color: #cdc7a0;
}

.auth-error {
  margin: 0;
  font-size: clamp(0.7rem, 1.3vw, 0.8rem);
  color: #ffb3a3;
}

.auth-error.hidden {
  display: none;
}

.auth-note {
  margin: 0;
  font-size: clamp(0.7rem, 1.3vw, 0.8rem);
  color: rgba(230, 224, 196, 0.75);
}

.auth-submit {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(0.85rem, 1.6vw, 1rem);
  color: #163a0c;
  background: linear-gradient(160deg, #d5f26a, #9fd423);
  border: none;
  border-radius: 10px;
  padding: 10px 0;
  cursor: pointer;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    0 4px 10px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.auth-submit:hover {
  transform: translateY(-1px);
}

.auth-submit:active {
  transform: scale(0.97);
}

.auth-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ---------- Estado "sesión iniciada" en la cabecera (sustituye a los
   botones de iniciar sesión/regístrate) ---------- */
.auth-user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Anton', sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: clamp(0.75rem, 1.4vw, 0.95rem);
  color: #ffffff;
}

.auth-user-chip-name {
  color: #e8c847;
}

.auth-logout-btn {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(0.65rem, 1.2vw, 0.8rem);
  color: #ffffff;
  background: rgba(26, 31, 14, 0.6);
  border: 1.5px solid rgba(205, 199, 160, 0.6);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.auth-logout-btn:hover {
  background: rgba(26, 31, 14, 0.85);
  transform: scale(1.05);
}

.auth-logout-btn:active {
  transform: scale(0.96);
}

.auth-modal-close {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.35) inset;
  transition: background 0.15s ease, transform 0.12s ease;
}

.auth-modal-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.auth-modal-close:active {
  transform: scale(0.92);
}

/* Compact weekly countdown, matching the console's olive and cream finish. */
.ranking-countdown{flex-shrink:0;padding:10px 12px;border:1px solid #d4d1a270;border-radius:12px;background:linear-gradient(145deg,#394328,#222a1a);color:#eeebd1}
.ranking-countdown[hidden]{display:none}
.ranking-countdown-heading{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;align-items:center;margin-bottom:8px}
.ranking-countdown-heading strong{font-size:12px;letter-spacing:.06em;color:#e4d45f}
.ranking-countdown-heading>span{font-size:10px;color:#d0d0b9}
.ranking-countdown-clock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;text-align:center}
.ranking-countdown-clock>span{display:flex;align-items:baseline;justify-content:center;gap:5px;background:#151b1166;border-radius:6px;padding:5px 2px}
.ranking-countdown-clock b{font-size:22px;line-height:1.15;font-variant-numeric:tabular-nums}
.ranking-countdown-clock small{font-size:9px;letter-spacing:.03em;color:#d0d0b9}
.ranking-countdown-ended{grid-column:1/-1;font-size:13px;padding:5px}
@media(max-width:380px){.ranking-countdown-clock>span{flex-direction:column;align-items:center;gap:2px}}