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

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1a0f08;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-family: 'Segoe UI', system-ui, sans-serif;
}

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

.hidden {
  display: none !important;
}

#hud {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
  z-index: 5;
}

#distance {
  display: inline-block;
  padding: 6px 22px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: #ffd76a;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background: rgba(10, 5, 2, 0.55);
  color: #fff;
  z-index: 10;
  pointer-events: none;
}

.overlay h1 {
  font-size: clamp(38px, 11vw, 64px);
  line-height: 1.05;
  color: #ffd76a;
  text-shadow: 0 4px 0 #7a4a12, 0 8px 18px rgba(0, 0, 0, 0.9);
  letter-spacing: 2px;
}

/* --- Menú principal: ilustración completa + zonas táctiles --------- */
/* La imagen (2:3 vertical) se ancla por ALTURA y se centra: en móvil
   angosto desborda un poco por los lados (recorte tipo cover) y en
   pantallas anchas deja bandas laterales donde se ve la mina animada
   del fondo. container-type permite dimensionar los textos dinámicos
   en cqw (proporcionales a la imagen, no a la pantalla). */
.menu-screen {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.menu-art {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  aspect-ratio: 1024 / 1536;
  background: url('../img/menu-bg.jpg') center / cover no-repeat;
  container-type: size;
}

.hot {
  position: absolute;
  pointer-events: auto;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.hot:active {
  background: rgba(255, 255, 255, 0.10);
  border-radius: 2cqw;
}

.menu-dyn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: #f5e9d4;
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

.menu-dyn.start {
  justify-content: flex-start;
}

.menu-dyn.gold {
  color: #ffd76a;
}

.menu-dyn.green {
  color: #9fd86a;
  text-decoration: underline;
}

.menu-dyn.blue {
  color: #8ec7ff;
  text-decoration: underline;
}

/* Insignia de monedas y pastilla del jugador: el arte del menú no las
   trae, así que son elementos HTML con estilo acorde (madera oscura,
   borde café, texto dorado) dimensionados en cqw para escalar con la
   ilustración. */
.coin-pill2 {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 1.3cqw;
  padding: 0 2.2cqw;
  border-radius: 999px;
  background: rgba(26, 15, 7, 0.88);
  border: 0.4cqw solid #6b4a26;
  color: #ffd76a;
  font-size: 3.2cqw;
  font-weight: 800;
  font-family: inherit;
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 0 0.4cqw 1cqw rgba(0, 0, 0, 0.65);
}

.coin-pill2 .plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  background: rgba(255, 215, 106, 0.16);
  border: 1px solid rgba(255, 215, 106, 0.55);
  font-size: 0.9em;
  font-weight: 900;
}

/* Botones de música e idioma: reemplazan a los pintados en el arte
   (se borraron de la imagen) para poder anclarlos al borde visible y
   reflejar el estado real (🔊/🔇). Estilo acorde a los originales. */
.icon-btn2 {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.8cqw;
  height: 7.8cqw;
  border-radius: 1.7cqw;
  background: linear-gradient(#6d3c2c, #4e2a1e);
  border: 0.45cqw solid #d8c9a8;
  color: #f5e9d4;
  font-size: 3.6cqw;
  font-family: inherit;
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 0 0.4cqw 1cqw rgba(0, 0, 0, 0.65);
}

.icon-btn2:active {
  transform: translateY(0.3cqw);
}

.player-pill {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2cqw;
  background: rgba(26, 15, 7, 0.82);
  border: 0.3cqw solid rgba(122, 74, 18, 0.9);
  color: #e8c9a0;
  font-size: 2.8cqw;
  font-weight: 700;
  font-family: inherit;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
}

.player-pill strong {
  color: #ffd76a;
}

.player-pill u {
  color: #cbb391;
  font-size: 0.82em;
}

#menu .guest-notice {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 7.4%;
  z-index: 3;
  padding: 1.4cqw 2cqw;
  border-radius: 2cqw;
  background: rgba(10, 5, 2, 0.78);
}

.overlay h2 {
  font-size: clamp(30px, 9vw, 52px);
  color: #ff6b5e;
  text-shadow: 0 3px 0 #6e1408, 0 6px 14px rgba(0, 0, 0, 0.9);
}

.subtitle {
  font-size: 15px;
  color: #e8c9a0;
  opacity: 0.9;
}

.result {
  font-size: clamp(44px, 14vw, 80px);
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.9);
}

.record {
  font-size: 22px;
  font-weight: 800;
  color: #7dff8e;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
  animation: pop 0.5s ease;
}

.best {
  font-size: 17px;
  color: #ffd76a;
  font-weight: 600;
}

.go-coins {
  font-size: 18px;
  font-weight: 800;
  color: #ffd76a;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.help {
  font-size: 14px;
  color: #cbb391;
  line-height: 1.5;
}

.blink {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #fff;
  animation: blink 1.1s steps(2, start) infinite;
}

.mode-buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(78vw, 320px);
}

.mode-btn {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 14px 20px;
  border: 3px solid #7a4a12;
  border-radius: 14px;
  background: linear-gradient(#8f6d4a, #6b4e30);
  color: #ffe9c4;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 2px;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 0 #4c3826, 0 8px 16px rgba(0, 0, 0, 0.6);
}

.mode-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #4c3826, 0 4px 8px rgba(0, 0, 0, 0.6);
}

.mode-btn.small {
  font-size: 15px;
  padding: 10px 18px;
  width: auto;
}

.go-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.privacy-link {
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.75;
}

.login-bg {
  background: #1a0f08 url('../img/login-bg.jpg') no-repeat top center / cover;
  justify-content: flex-end;
  padding-bottom: max(28px, env(safe-area-inset-bottom));
}

/* Pantallas anchas (escritorio / tablet horizontal): la ilustración es
   vertical (3:4), así que "cover" la recortaba hasta dejar solo un
   trozo del letrero gigante. Se muestra completa (contain) sobre el
   mismo café de fondo y el panel pasa a la banda lateral derecha para
   no tapar el arte. */
@media (min-aspect-ratio: 5/4) {
  .login-bg {
    background-size: contain;
    background-position: center;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 24px;
    padding-right: max(4vw, env(safe-area-inset-right));
  }
}

.login-panel {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(84vw, 340px);
  padding: 18px 20px 22px;
  border-radius: 18px;
  background: rgba(10, 5, 2, 0.72);
  border: 2px solid rgba(122, 74, 18, 0.7);
  backdrop-filter: blur(2px);
}

.login-label {
  font-size: 15px;
  color: #e8c9a0;
}

/* Encabezado del panel de login: dice si se esta CREANDO una cuenta o
   entrando a una existente, para que el formulario no sea ambiguo.
   Con .overlay delante: si no, la regla general .overlay h2 (más
   específica) lo agrandaba a 52 px. */
.overlay .login-title {
  margin: 0;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #ffd76a;
  text-align: center;
}

#nick {
  pointer-events: auto;
  width: min(70vw, 280px);
  padding: 12px 16px;
  border: 3px solid #7a4a12;
  border-radius: 12px;
  background: rgba(20, 10, 4, 0.85);
  color: #ffe9c4;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  font-family: inherit;
  outline: none;
}

#nick:focus,
#pin:focus {
  border-color: #ffd76a;
}

#pin {
  pointer-events: auto;
  width: min(70vw, 280px);
  padding: 12px 16px;
  border: 3px solid #7a4a12;
  border-radius: 12px;
  background: rgba(20, 10, 4, 0.85);
  color: #ffe9c4;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 4px;
  font-family: inherit;
  outline: none;
}

.login-error {
  font-size: 13px;
  font-weight: 700;
  color: #ff8a7a;
  min-height: 16px;
}

.guest-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 12px;
  color: #ffbf7a;
}

.player-row {
  font-size: 16px;
  color: #e8c9a0;
}

.player-row strong {
  color: #ffd76a;
}

.link-btn {
  pointer-events: auto;
  border: none;
  background: none;
  color: #cbb391;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
}

.rank-title {
  color: #ffd76a !important;
}

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

.tab-btn {
  pointer-events: auto;
  padding: 8px 12px;
  border: 2px solid #7a4a12;
  border-radius: 10px;
  background: rgba(20, 10, 4, 0.7);
  color: #cbb391;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
  font-family: inherit;
}

.tab-btn.active {
  background: linear-gradient(#8f6d4a, #6b4e30);
  color: #ffe9c4;
  border-color: #ffd76a;
}

.rank-status {
  font-size: 14px;
  color: #ffd76a;
  font-weight: 700;
  min-height: 18px;
}

.rank-list {
  /* Sin esto el toque no llegaba a la lista (.overlay los ignora) y no
     se podía desplazar para ver más allá de los primeros puestos. */
  pointer-events: auto;
  list-style: none;
  width: min(80vw, 340px);
  max-height: 46vh;
  overflow-y: auto;
  /* Reactiva el scroll táctil vertical (el body lo desactiva con
     touch-action: none para el juego). */
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rank-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  color: #e8c9a0;
  font-size: 15px;
  font-weight: 600;
}

.rank-list li:first-child {
  background: rgba(122, 74, 18, 0.6);
  color: #ffd76a;
}

.rank-list li .rank-pos {
  color: #cbb391;
  min-width: 26px;
}

.rank-list li .rank-m {
  color: #ffd76a;
}

.rank-empty {
  color: #cbb391;
  font-size: 14px;
  text-align: center;
  padding: 12px;
}

#distance.hardcore {
  color: #e08aff;
  box-shadow: inset 0 0 0 2px rgba(150, 40, 200, 0.8);
}

.btn-best {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  opacity: 0.85;
}

#distance.hard {
  color: #ff9c6a;
  box-shadow: inset 0 0 0 2px rgba(220, 70, 40, 0.7);
}

.coin-pill {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid #7a4a12;
  color: #ffd76a;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.shop-daily {
  font-size: 13px;
  color: #cbb391;
}

.shop-redeem {
  width: min(88vw, 380px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: auto;
}

.redeem-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.redeem-input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: 2px solid #7a4a12;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #ffe9c4;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: inherit;
  text-transform: uppercase;
}

.redeem-input::placeholder {
  color: #a98a63;
  letter-spacing: 0.5px;
  text-transform: none;
}

.shop-redeem .mode-btn.small {
  flex-shrink: 0;
}

.redeem-status {
  font-size: 13px;
  font-weight: 700;
  margin: 0;
}

.redeem-status.ok {
  color: #7fe07f;
}

.redeem-status.err {
  color: #ff9b7a;
}

.shop-list {
  width: min(88vw, 380px);
  max-height: 52vh;
  overflow-y: auto;
  /* Reactiva el scroll táctil vertical (ver .rank-list). */
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: auto;
}

.skin-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid rgba(122, 74, 18, 0.6);
  /* Acento de color según la rareza (--rarity lo pone el JS). */
  border-left: 5px solid var(--rarity, rgba(122, 74, 18, 0.6));
}

.skin-thumb {
  width: 54px;
  height: 54px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
}

.skin-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

.skin-name {
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  color: #e8c9a0;
  line-height: 1.2;
}

.skin-rarity {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 1px 7px;
  border: 1px solid currentColor;
  border-radius: 999px;
  line-height: 1.4;
}

/* Tarjeta "próximamente" (rareza sin skins todavía). */
.skin-card-soon {
  opacity: 0.75;
}

.skin-thumb-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--rarity, #888);
  border-radius: 10px;
  color: var(--rarity, #888);
  font-size: 26px;
  font-weight: 800;
  filter: none;
}

.skin-btn {
  pointer-events: auto;
  flex-shrink: 0;
  padding: 8px 12px;
  border: 2px solid #7a4a12;
  border-radius: 10px;
  background: linear-gradient(#8f6d4a, #6b4e30);
  color: #ffe9c4;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  font-family: inherit;
  cursor: pointer;
}

.skin-btn:active {
  transform: translateY(2px);
}

.skin-btn.equipped {
  background: linear-gradient(#3f7a34, #2a5522);
  border-color: #2a5522;
  color: #d9ffcf;
  cursor: default;
}

.skin-btn.buy {
  background: linear-gradient(#a8842a, #7a5a12);
  border-color: #ffd76a;
  color: #fff3d0;
}

.skin-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

@keyframes blink {
  to {
    visibility: hidden;
  }
}

@keyframes pop {
  0% {
    transform: scale(0.3);
  }
  70% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* Línea de ayuda bajo el nombre de una skin (p. ej. cómo se desbloquea
   la épica, que no se compra con monedas sino viendo anuncios). */
.skin-hint {
  font-size: 10px;
  line-height: 1.3;
  color: #a98a63;
}

/* Aviso de version nueva (ver js/version.js). Va sobre todo lo demas
   pero no bloquea: el jugador puede cerrarlo y seguir jugando. */
.update-banner {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  left: 8px;
  right: 8px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(26, 15, 7, 0.96);
  border: 2px solid #c07a2e;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7);
  pointer-events: auto;
}

.update-text {
  flex: 1;
  min-width: 0;
  text-align: left;
  font-size: 13px;
  line-height: 1.35;
  color: #f5e9d4;
}

.update-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  border: 2px solid #7a4a12;
  border-radius: 10px;
  background: linear-gradient(#c9862f, #9a611f);
  color: #fff6e2;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  font-family: inherit;
  cursor: pointer;
}

.update-btn:active {
  transform: translateY(2px);
}

.update-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #cbb391;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
}

/* Fila de etiquetas de una skin (rareza + ventaja pasiva). */
.skin-tags {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.skin-perk {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 1px 7px;
  border-radius: 999px;
  color: #ffd76a;
  border: 1px solid rgba(255, 215, 106, 0.55);
  background: rgba(255, 215, 106, 0.10);
  line-height: 1.4;
}

/* Nota al pie de la oferta de revivir y del fin de partida. Pequeña,
   porque el protagonismo es del botón, pero con contraste y sombra: sobre
   el riel y la roca el color apagado de antes no se leía. */
.rv-note {
  font-size: 13px;
  line-height: 1.35;
  color: #e3c9a2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  max-width: 34ch;
  margin: 4px auto 10px;
}

/* "Toca para continuar" tras revivir. Centrado y sin captar el toque:
   el toque tiene que llegar al manejador global que reanuda la partida. */
.resume-hint {
  position: fixed;
  top: 40%;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  pointer-events: none;
  z-index: 6;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

/* Icono del botón de orientación: el mismo móvil, girado cuando el
   juego está en horizontal. */
.orient-icon {
  display: inline-block;
  transition: transform 0.2s ease;
}
.orient-icon.landscape {
  transform: rotate(90deg);
}

/* Móvil en horizontal: la pantalla tiene poca altura (~330-400 px) y los
   tamaños pensados para vertical empujaban los botones del fin de partida
   y de la oferta de revivir fuera de la pantalla. Aquí los textos se
   dimensionan por la altura y los espacios se comprimen. */
@media (orientation: landscape) and (max-height: 520px) {
  #gameover,
  #revive {
    gap: 4px;
    padding: 8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  }
  #gameover h2,
  #revive h2 {
    font-size: clamp(22px, 9vh, 40px);
  }
  #gameover .result,
  #revive .result {
    font-size: clamp(32px, 15vh, 60px);
    line-height: 1.05;
  }
  #gameover .best,
  #revive .best,
  #gameover .go-coins,
  #gameover .record {
    font-size: 15px;
  }
  #gameover .blink {
    font-size: 15px;
  }
  #gameover .rv-note,
  #revive .rv-note {
    max-width: 60ch;
    margin: 0 auto 4px;
  }
  #gameover .mode-btn.small,
  #revive .mode-btn.small {
    font-size: 16px;
    padding: 8px 20px;
  }
}


/* Fila del propio jugador en el ranking. */
.rank-list li.rank-me {
  outline: 2px solid #7dff8e;
  background: rgba(40, 90, 40, 0.6);
  color: #ffffff;
}

/* Bienvenida y login en móvil horizontal. Con el teclado abierto quedan
   ~150 px de alto: el panel centrado se salía por arriba y por abajo, y
   el botón de entrar quedaba fuera de la pantalla sin poder alcanzarlo.
   Ahora la pantalla se desplaza (margin auto centra si cabe y no recorta
   si no cabe) y el panel es más compacto. */
@media (orientation: landscape) and (max-height: 520px) {
  .login-bg {
    align-items: flex-start;
    overflow-y: auto;
    pointer-events: auto;
    touch-action: pan-y;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .login-bg .login-panel {
    margin-block: auto;
    gap: 6px;
    padding: 10px 16px 12px;
  }
  .login-bg #nick,
  .login-bg #pin {
    padding: 6px 12px;
    font-size: 17px;
  }
  .login-bg .mode-btn {
    padding: 8px 18px;
    font-size: 17px;
  }
}

/* Ranking y tienda: la pantalla entera se desplaza cuando no cabe
   (móvil en horizontal). margin auto en el primer y el último hijo centra
   el contenido si cabe y no lo recorta si no cabe. flex-shrink 0 evita
   que la lista de la tienda se aplaste hasta desaparecer. */
#ranking,
#shop {
  justify-content: flex-start;
  overflow-y: auto;
  pointer-events: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
#ranking > *,
#shop > * {
  flex-shrink: 0;
}
#ranking > :first-child,
#shop > :first-child {
  margin-top: auto;
}
#ranking > :last-child,
#shop > :last-child {
  margin-bottom: auto;
}
@media (orientation: landscape) and (max-height: 520px) {
  #ranking,
  #shop {
    gap: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  #ranking .rank-title,
  #shop .rank-title {
    font-size: clamp(24px, 9vh, 40px);
  }
  #ranking .rank-list {
    max-height: 48vh;
  }
  #shop .shop-list {
    max-height: 70vh;
  }
}


/* Aviso mientras la página se recarga para recuperar la fluidez (ver
   js/restart.js). Tapa todo y se traga los toques de esos instantes. */
.restart-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a0f08;
  color: #a98a63;
  font-size: 22px;
  letter-spacing: 1px;
}