:root {
  --bg: #101827;
  --panel: #1b2436;
  --panel-2: #232f45;
  --text: #eef2ff;
  --muted: #9aa7c7;
  --accent: #ffd54f;
  --accent-2: #42a5f5;
  --ok: #66bb6a;
  --bad: #ef5350;
}

* { box-sizing: border-box; }

/* Sin esto, los estilos con display (modal, cuenta atrás) ganan al atributo
   hidden del HTML y aparecen siempre. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  row-gap: 0.4rem;
  padding: 0.75rem 1.25rem;
  background: #0b1220;
  border-bottom: 1px solid #24304a;
}

.brand { font-weight: 700; color: var(--accent); text-decoration: none; font-size: 1.15rem; }
.tagline { color: var(--muted); font-size: 0.9rem; }
.topbar .audio-controls { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.audio-controls button { padding: 0.35rem 0.6rem; font-size: 1rem; }
.audio-controls input[type="range"] { width: 110px; accent-color: var(--accent); }
.page {
  padding: clamp(0.6rem, 1.6vw, 1.25rem);
  max-width: 1200px;
  margin: 0 auto;
  padding-left: max(clamp(0.6rem, 1.6vw, 1.25rem), env(safe-area-inset-left));
  padding-right: max(clamp(0.6rem, 1.6vw, 1.25rem), env(safe-area-inset-right));
}

.hero { margin-bottom: 1.25rem; }
.hero-intro {
  max-width: 46rem;
  margin: 0.9rem auto 0;
  text-align: center;
  line-height: 1.45;
  color: #c9d3e6;
}
.hero-intro a { color: var(--accent); white-space: nowrap; }
/* La portada se ve entera (sin recortar el título) y su alto se limita por la ventana. */
.hero-art {
  display: block;
  width: min(100%, calc(38vh * 16 / 9));
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 18px;
  border: 1px solid #2b3854;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

/* En pantallas anchas, entrar y las partidas van en dos columnas para no
   tener que bajar con el scroll. */
.lobby-grid { display: grid; gap: 1.25rem; }
@media (min-width: 1024px) {
  .lobby-grid {
    grid-template-columns: minmax(320px, 1fr) minmax(0, 1.15fr);
    align-items: start;
  }
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.panel {
  background: var(--panel);
  border: 1px solid #2b3854;
  border-radius: 14px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.panel-head { display: flex; justify-content: space-between; align-items: center; }
.panel-head { flex-wrap: wrap; gap: 0.5rem; }
.rank-tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.rank-tabs button { padding: 0.35rem 0.7rem; font-size: 0.9rem; }
.rank-tabs button[aria-selected="true"] { background: var(--accent); color: #201a00; border-color: var(--accent); }
.rank-list { list-style: none; padding: 0; margin: 0.75rem 0 0.5rem; display: grid; gap: 0.35rem; max-height: 420px; overflow-y: auto; }
.rank-row { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; background: var(--panel-2); border-radius: 10px; padding: 0.4rem 0.7rem; }
.rank-row.me { outline: 2px solid var(--accent); background: rgba(255, 213, 79, 0.12); }
.rank-position { font-weight: 700; text-align: center; font-size: 1.05rem; }
.rank-player { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-values { display: flex; gap: 0.6rem; font-size: 0.85rem; color: var(--muted); }
.rank-value.active { color: var(--accent); font-weight: 700; font-size: 1rem; }
@media (max-width: 480px) {
  .rank-values .rank-value:not(.active) { display: none; }
}
h1, h2, h3 { margin-top: 0; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.status { min-height: 1.2rem; color: var(--accent); }
.status.error { color: #ff6b6b; font-weight: 700; }
.pin-create { margin-top: 0.5rem; padding: 1rem; border: 2px solid var(--accent); border-radius: 12px; }
.pin-create h2 { margin-top: 0; }

.row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; color: var(--muted); }
input, select {
  background: var(--panel-2);
  border: 1px solid #38486a;
  color: var(--text);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  font-size: 1rem;
}
button, .button {
  background: var(--accent);
  color: #201a00;
  border: none;
  border-radius: 8px;
  padding: 0.55rem 1rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button.ghost { background: transparent; color: var(--text); border: 1px solid #3a4a6d; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.match-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.5rem; }
.match-list li {
  background: var(--panel-2);
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.stats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.stats span { background: var(--panel-2); padding: 0.4rem 0.7rem; border-radius: 8px; font-size: 0.9rem; }

.trophy-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.trophy-list li { background: var(--panel-2); border-radius: 10px; padding: 0.5rem 0.75rem; font-size: 0.85rem; }

.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1rem; }
.canvas-wrap { display: flex; justify-content: center; align-items: flex-start; }
canvas {
  cursor: none;
  background: #0d1524;
  border-radius: 12px;
  border: 1px solid #2b3854;
  max-width: 100%;
}
/* Solo el lienzo de juego bloquea gestos; los decorativos del lobby deben dejar hacer scroll. */
#screen { touch-action: none; }

.hud { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.hud-left, .hud-right { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.badge { background: var(--panel-2); border-radius: 999px; padding: 0.3rem 0.7rem; font-size: 0.85rem; }

.sidebar { background: var(--panel); border-radius: 12px; padding: 0.9rem; border: 1px solid #2b3854; }
.cake { display: grid; place-items: center; margin-bottom: 1rem; }
.cake svg { width: min(100%, 200px); height: auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45)); }
.cake svg path { transition: fill 0.4s ease; }
.cake svg path.owned { animation: wedge-in 0.6s ease; transform-origin: center; }
.cake svg path.missing { animation: wedge-pulse 2.4s ease-in-out infinite; }
@keyframes wedge-pulse { 50% { fill-opacity: 0.6; } }
.cake-legend { list-style: none; padding: 0; margin: 0.6rem 0 0; display: grid; gap: 0.25rem; width: 100%; font-size: 0.82rem; }
.cake-legend li { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 0.45rem; padding: 0.2rem 0.4rem; border-radius: 6px; }
.cake-legend li.missing { background: rgba(255, 255, 255, 0.04); }
.cake-legend li.missing strong { color: var(--accent); font-weight: 600; }
.cake-legend li.owned { color: var(--muted); }
.cake-legend li.owned strong { color: var(--ok); }
.cake-legend .swatch { width: 14px; height: 14px; border-radius: 3px; }
@keyframes wedge-in { from { opacity: 0.2; } to { opacity: 1; } }

.end-card { text-align: center; }
.end-body { display: flex; gap: 1.5rem; align-items: center; justify-content: center; flex-wrap: wrap; margin: 0.5rem 0 1rem; }
.end-cake svg { width: 180px; height: 180px; }
.end-stats { display: grid; grid-template-columns: auto auto; gap: 0.35rem 1rem; margin: 0; text-align: left; }
.end-stats dt { color: var(--muted); }
.end-stats dd { margin: 0; font-weight: 700; }
.end-card .row { justify-content: center; }

.leaderboard { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.35rem; }
.leaderboard li { background: var(--panel-2); border-radius: 8px; padding: 0.4rem 0.6rem; font-size: 0.85rem; display: flex; justify-content: space-between; gap: 0.5rem; }
.leaderboard li small { display: block; color: var(--muted); }
.leaderboard li.me, .room-players li.me { outline: 2px solid var(--accent-2); }
.leaderboard li { align-items: center; }
.leaderboard .lb-name { flex: 1; min-width: 0; }
.mini-cake svg { width: 34px; height: 34px; display: block; }
.mini-cake.mine svg { width: 46px; height: 46px; filter: drop-shadow(0 0 6px rgba(255, 213, 79, 0.8)); }
.leaderboard li.me { outline: 2px solid var(--accent); background: rgba(255, 213, 79, 0.12); }

.hud-helps { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
#hud-ammo.low { background: #b71c1c; color: #fff; }

.avatar {
  display: inline-grid;
  place-items: center;
  width: var(--avatar-size, 32px);
  height: var(--avatar-size, 32px);
  border-radius: 50%;
  background: var(--avatar-bg, #42a5f5);
  border: 2px solid #ffffff;
  font-size: calc(var(--avatar-size, 32px) * 0.62);
  line-height: 1;
  vertical-align: middle;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.profile-link { color: var(--text); text-decoration: none; border: 1px solid #3a4a6d; border-radius: 8px; padding: 0.3rem 0.65rem; font-size: 0.9rem; }
.profile-link:hover { border-color: var(--accent); color: var(--accent); }
.profile-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.profile-head p { margin: 0.2rem 0 0; }
.avatar-picker { display: grid; gap: 0.75rem; margin: 0.5rem 0 1rem; }
.avatar-group { border: 1px solid #2b3854; border-radius: 10px; padding: 0.5rem 0.75rem 0.75rem; margin: 0; }
.avatar-group legend { color: var(--accent); font-weight: 600; padding: 0 0.3rem; }
.avatar-group legend small { color: var(--muted); font-weight: 400; }
.avatar-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 0.5rem; }
.avatar-option {
  background: var(--panel-2);
  color: var(--text);
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 0.5rem 0.25rem;
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  font-weight: 500;
  font-size: 0.8rem;
}
.avatar-option:hover { border-color: #3a4a6d; }
.avatar-option.selected { border-color: var(--accent); background: #2d3a1f; }
.badge.help { background: #2d3a1f; border: 1px solid #6b8e23; cursor: help; }

.canvas-wrap { position: relative; }
/* Jugando en táctil: los gestos sobre el juego no desplazan la página ni recargan con «tirar hacia abajo». */
html.touch-game, html.touch-game body { overscroll-behavior: none; }
html.touch-game .canvas-wrap { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

.touch-controls {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0.75rem;
  pointer-events: none;
  z-index: 4;
}
.touch-stick, .touch-actions button { pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.touch-stick {
  position: relative;
  width: clamp(96px, 22vmin, 140px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.35);
}
.touch-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44%;
  height: 44%;
  margin: -22% 0 0 -22%;
  border-radius: 50%;
  background: rgba(255, 213, 79, 0.85);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.touch-actions { display: flex; align-items: flex-end; gap: 0.6rem; }
.touch-actions button { border-radius: 50%; display: grid; place-items: center; padding: 0; opacity: 0.9; transition: transform 0.08s ease-out, filter 0.08s ease-out; }
.touch-actions button:active { transform: scale(0.88); filter: brightness(1.2); }
/* El mando vuelve al centro con rebote al soltarlo; mientras se arrastra sigue al dedo sin retraso. */
.touch-knob { transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); }
.touch-stick.dragging .touch-knob { transition: none; }
.touch-open { width: clamp(48px, 11vmin, 64px); aspect-ratio: 1; font-size: 1.4rem; background: rgba(255, 213, 79, 0.85); }

.rotate-hint { display: none; margin: 0 0 0.5rem; padding: 0.5rem 0.75rem; border-radius: 8px; background: #2d3a1f; color: var(--accent); text-align: center; }
@media (orientation: portrait) and (max-width: 600px) and (pointer: coarse) {
  .rotate-hint { display: block; }
}

/* Dedos: todo lo que se toca mide al menos 44 px y no espera al doble toque. */
@media (pointer: coarse) {
  button, .button, select, input:not([type="range"]), .profile-link { min-height: 44px; }
  button, .button { min-width: 44px; }
  .button, .profile-link { display: inline-flex; align-items: center; justify-content: center; }
  button, .button, a, select { touch-action: manipulation; }
}

.touch-only { display: none; }
html.touch-game .touch-only { display: inline-flex; align-items: center; justify-content: center; }

/* Partida en móvil/tablet: pantalla de juego a todo el alto, HUD en una línea y el mapa
   ocupando el resto. La tarta, jugadores y ayuda pasan a un panel desplegable (ℹ️). */
html.touch-game body { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
/* Jugando en táctil no hay barra superior: el sonido está en el panel ℹ️ y el mapa gana alto. */
html.touch-game .topbar { display: none; }
html.touch-game .rotate-hint { animation: hint-out 0.35s ease-in 6s forwards; overflow: hidden; }
@keyframes hint-out { to { max-height: 0; padding-block: 0; margin: 0; opacity: 0; } }
html.touch-game .topbar {
  padding: max(0.2rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) 0.2rem max(0.75rem, env(safe-area-inset-left));
  flex-wrap: nowrap;
}
html.touch-game .topbar .tagline,
html.touch-game .topbar .profile-link,
html.touch-game .topbar .audio-controls input,
html.touch-game .topbar .audio-controls span { display: none; }
html.touch-game .page {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: none;
  display: flex;
  padding-top: max(0.35rem, env(safe-area-inset-top));
  padding-bottom: max(0.35rem, env(safe-area-inset-bottom));
}
html.touch-game #game-root { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
html.touch-game .rotate-hint { margin-bottom: 0.35rem; padding: 0.3rem 0.6rem; font-size: 0.85rem; max-height: 4rem; }
html.touch-game .hud {
  flex: none;
  flex-wrap: nowrap;
  margin-bottom: 0.35rem;
  gap: 0.35rem;
}
/* Los marcadores se desplazan en horizontal; los botones (ℹ️, ⛶, Terminar) quedan siempre a la vista. */
html.touch-game .hud-left { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
html.touch-game .hud-left::-webkit-scrollbar { display: none; }
html.touch-game .hud-right { flex: none; }
@media (max-width: 600px) {
  html.touch-game #hud-status { display: none; }
}
html.touch-game .hud-left, html.touch-game .hud-right { flex-wrap: nowrap; gap: 0.3rem; }
html.touch-game .hud .badge, html.touch-game #hud-player { white-space: nowrap; }
html.touch-game .hud-helps { flex-wrap: nowrap; }
/* Móvil en horizontal: sin barra superior (el sonido está en el panel ℹ️) para ganar alto de mapa. */
@media (orientation: landscape) and (max-height: 500px) {
  html.touch-game .topbar { display: none; }
  html.touch-game .page { padding-top: max(0.3rem, env(safe-area-inset-top)); }
  html.touch-game .hud { margin-bottom: 0.25rem; }
  html.touch-game .hud button { min-height: 40px; padding-block: 0.25rem; }
}
html.touch-game .drawer-head {
  position: sticky;
  top: -0.9rem;
  z-index: 1;
  display: flex;
  gap: 0.5rem;
  margin: -0.9rem -0.9rem 0.75rem;
  padding: 0.6rem 0.9rem;
  background: var(--panel);
  border-bottom: 1px solid #2b3854;
}
html.touch-game .drawer-head button { flex: 1; }
.info-backdrop { display: none; }
html.touch-game #game-root.show-info .info-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 24;
  background: rgba(5, 8, 16, 0.55);
}
.players-strip { display: none; }
html.touch-game .game-layout { flex: 1; min-height: 0; display: block; position: relative; }
html.touch-game .canvas-wrap { height: 100%; min-width: 0; align-items: stretch; }
html.touch-game canvas { border: 0; border-radius: 10px; display: block; }
/* Sobre el mapa, arriba a la izquierda (el minimapa ocupa la derecha); no captura toques. */
html.touch-game .players-strip {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  max-width: calc(100% - var(--minimap-w, 140px) - 0.7rem);
  pointer-events: none;
  z-index: 3;
}
html.touch-game .players-strip li {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.45rem 0.15rem 0.2rem;
  border-radius: 10px;
  background: rgba(11, 18, 32, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
html.touch-game .players-strip li.me { border: 2px solid var(--accent); background: rgba(40, 32, 8, 0.78); }
.strip-cake svg { width: 26px; height: 26px; display: block; }
.players-strip li.me .strip-cake svg { width: 30px; height: 30px; filter: drop-shadow(0 0 5px rgba(255, 213, 79, 0.7)); }
.strip-text { display: grid; min-width: 0; line-height: 1.1; }
.strip-text strong { font-size: 0.75rem; max-width: 7.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.players-strip li.me .strip-text strong { color: var(--accent); }
.strip-text small { font-size: 0.68rem; color: #c9d3ea; }
html.touch-game .sidebar {
  display: none;
  position: fixed;
  z-index: 25;
  top: max(0.5rem, env(safe-area-inset-top));
  right: max(0.5rem, env(safe-area-inset-right));
  bottom: max(0.5rem, env(safe-area-inset-bottom));
  width: min(340px, 88vw);
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
html.touch-game #game-root.show-info .sidebar { display: block; animation: drawer-in 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .touch-knob, .touch-actions button { transition: none; }
  html.touch-game #game-root.show-info .sidebar { animation: none; }
}
/* Móvil en horizontal: poca altura, se ocultan extras del HUD para dar sitio al mapa. */
@media (orientation: landscape) and (max-height: 500px) {
  .topbar .tagline, .topbar .profile-link { display: none; }
  .topbar { padding: 0.3rem 0.75rem; }
  .page { padding-top: 0.4rem; padding-bottom: 0.4rem; }
  .hud { margin-bottom: 0.35rem; }
  .badge { font-size: 0.75rem; padding: 0.2rem 0.5rem; }
  .modal-card { max-height: 96vh; padding: 0.75rem 1rem; }
  .modal-card h2 { font-size: 1.1rem; }
  .options { grid-template-columns: 1fr 1fr; margin: 0.5rem 0; }
}
.room-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(8, 12, 20, 0.72);
  border-radius: 12px;
  z-index: 5;
}
.room-card { background: var(--panel); border: 1px solid #2b3854; border-radius: 14px; padding: 1.25rem 1.5rem; width: min(92%, 460px); }
.room-players { list-style: none; padding: 0; margin: 0.75rem 0; display: grid; gap: 0.4rem; }
.room-players li { background: var(--panel-2); border-radius: 8px; padding: 0.5rem 0.75rem; display: flex; justify-content: space-between; gap: 0.75rem; }
.room-players small { color: var(--muted); }
.room-share { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.75rem; }
.btn-whatsapp { background: #25d366; color: #06210f; }
.share-url { flex-basis: 100%; }

.legend { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.3rem; color: var(--muted); }
.legend .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; margin-right: 0.35rem; }
.dot-player { background: #1e88e5; }
.dot-bot { border: 3px solid #ff1744; }
.dot-chest { background: #ffd54f; box-shadow: 0 0 6px #ffd54f; }
.dot-prop { background: #8d6e63; border-radius: 3px !important; }
.dot-wedge { background: conic-gradient(#ffd54f 0 17%, #42a5f5 0 34%, #ec407a 0 50%, #8d6e63 0 67%, #66bb6a 0 84%, #ffa726 0); }
.dot-life { background: #d32f2f; border-radius: 3px !important; }
.dot-weapon { background: #2e7d32; border-radius: 3px !important; }
.dot-shield { background: #0277bd; border-radius: 3px !important; }

/* Rebote del HUD al recibir una recompensa (equivale a un Tween con TRANS_BACK). */
@keyframes hud-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); box-shadow: 0 0 14px var(--accent); }
  100% { transform: scale(1); }
}
.badge.pop { animation: hud-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
@media (prefers-reduced-motion: reduce) {
  .badge.pop { animation: none; }
}

.countdown {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(8, 12, 20, 0.75);
  font-size: 5rem;
  font-weight: 800;
  color: var(--accent);
  z-index: 20;
}

.modal { position: fixed; inset: 0; background: rgba(8, 12, 20, 0.8); display: grid; place-items: center; z-index: 30; }
.modal-card {
  background: var(--panel);
  border-radius: 16px;
  padding: clamp(1rem, 2vw, 1.5rem);
  max-width: 620px;
  width: min(92vw, 620px);
  max-height: 90vh;
  overflow: auto;
}
.options { display: grid; gap: 0.5rem; margin: 1rem 0; }
.options button { background: var(--panel-2); color: var(--text); text-align: left; border: 1px solid #3a4a6d; }
.options button.correct { background: rgba(102, 187, 106, 0.25); border-color: var(--ok); }
.options button.wrong { background: rgba(239, 83, 80, 0.25); border-color: var(--bad); }

.results-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.results-table th, .results-table td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid #2b3854; }

@media (max-width: 900px) {
  .game-layout { grid-template-columns: 1fr; }
  .tagline { display: none; }
  .hero-art { width: min(100%, calc(30vh * 16 / 9)); }
}

@media (max-width: 640px) {
  .topbar { padding: 0.5rem 0.75rem; gap: 0.5rem; }
  .audio-controls input[type="range"] { width: 70px; }
  .panel { padding: 0.9rem; border-radius: 12px; }
  .row > label { flex: 1 1 140px; }
  .row > label input, .row > label select { width: 100%; }
  .row > button, .row > .button { flex: 1 1 auto; text-align: center; }
  .match-list li { flex-wrap: wrap; }
  .hero-art { width: 100%; border-radius: 12px; }
  .options button { padding: 0.8rem 1rem; font-size: 1rem; }
  .countdown { font-size: 3.5rem; }
  .avatar-options { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
  .hud { gap: 0.4rem; }
  .hud-left, .hud-right { gap: 0.35rem; }
  .badge { font-size: 0.78rem; padding: 0.25rem 0.55rem; }
  .sidebar { padding: 0.7rem; }
}

/* ===========================================================================
   Sistema visual arcade: tipografía gruesa, botones físicos con profundidad,
   paneles con borde marcado y colores saturados. Todo lo demás lo hereda.
   =========================================================================== */

:root {
  --font-display: "Segoe UI Black", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --ink: #160f2e;
  --bg: #1a1240;
  --panel: #251b5a;
  --panel-2: #33277a;
  --muted: #b8b0e8;
  --play: #3ee07a;
  --play-dark: #12924a;
  --blue: #3ba8ff;
  --blue-dark: #1b5fb8;
  --pink: #ff4fa3;
  --edge: 3px solid var(--ink);
}

html { background: #140e33; }
body {
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(255, 79, 163, 0.28), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(59, 168, 255, 0.28), transparent 60%),
    linear-gradient(180deg, #23185a 0%, #140e33 100%) fixed;
}
h1, h2, h3, .brand { font-family: var(--font-display); font-weight: 900; letter-spacing: 0.01em; }
.brand { font-size: 1.3rem; text-shadow: 0 3px 0 var(--ink); }
.topbar { background: rgba(14, 9, 36, 0.85); border-bottom: var(--edge); backdrop-filter: blur(6px); }

.panel {
  background: linear-gradient(180deg, #2e2370 0%, #241a5c 100%);
  border: var(--edge);
  border-radius: 22px;
  box-shadow: 0 6px 0 var(--ink), 0 14px 30px rgba(0, 0, 0, 0.35);
}

/* Botones físicos: borde, sombra de profundidad y se hunden al pulsarlos. */
button, .button {
  font-family: var(--font-display);
  font-weight: 900;
  border: var(--edge);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffe27a 0%, #ffc21a 100%);
  color: var(--ink);
  box-shadow: 0 5px 0 var(--ink), inset 0 -4px 0 rgba(0, 0, 0, 0.15), inset 0 3px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, filter 0.12s;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
button:hover:not(:disabled), .button:hover { filter: brightness(1.08); transform: translateY(-1px); }
button:active:not(:disabled), .button:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--ink), inset 0 -2px 0 rgba(0, 0, 0, 0.15);
}
button.ghost {
  background: linear-gradient(180deg, #4a3c9e 0%, #33277a 100%);
  color: #fff;
  border: var(--edge);
  text-shadow: 0 2px 0 var(--ink);
}
button:disabled { filter: grayscale(0.6); box-shadow: 0 2px 0 var(--ink); }

.btn-play {
  background: linear-gradient(180deg, #7dff9f 0%, var(--play) 45%, var(--play-dark) 100%);
  color: #fff;
  text-shadow: 0 2px 0 rgba(10, 60, 30, 0.9);
  font-size: 1.15rem;
  padding: 0.7rem 1.4rem;
}
.btn-secondary {
  background: linear-gradient(180deg, #8fd0ff 0%, var(--blue) 45%, var(--blue-dark) 100%);
  color: #fff;
  text-shadow: 0 2px 0 rgba(10, 30, 70, 0.9);
}
.btn-huge {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  width: 100%;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1;
  padding: 1rem 1.5rem 0.9rem;
  border-radius: 22px;
  box-shadow: 0 8px 0 var(--ink), inset 0 -6px 0 rgba(0, 0, 0, 0.18), inset 0 4px 0 rgba(255, 255, 255, 0.5);
  animation: play-breathe 2.2s ease-in-out infinite;
}
.btn-huge small { font-size: 0.9rem; font-weight: 700; opacity: 0.95; letter-spacing: 0.02em; }
.btn-huge:active:not(:disabled) { transform: translateY(6px); box-shadow: 0 2px 0 var(--ink); }
@keyframes play-breathe { 50% { transform: scale(1.035); } }

input, select {
  border: var(--edge);
  border-radius: 12px;
  background: #140e33;
  font-weight: 700;
}
label { font-weight: 800; color: #d9d3ff; }

.badge {
  font-weight: 800;
  border: 2px solid var(--ink);
  background: linear-gradient(180deg, #44379a, #2e2370);
  box-shadow: 0 3px 0 var(--ink);
}

/* --- Lobby / arena ------------------------------------------------------- */
.arena {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "player stats"
    "stage play";
  gap: 1rem 1.5rem;
  align-items: center;
  margin-bottom: 1.25rem;
  padding: clamp(1rem, 2.5vw, 1.75rem);
  border: var(--edge);
  border-radius: 28px;
  background:
    radial-gradient(circle at 30% 70%, rgba(255, 213, 79, 0.18), transparent 45%),
    linear-gradient(160deg, #3b2b9a 0%, #2a1d72 55%, #1d1452 100%);
  box-shadow: 0 8px 0 var(--ink), 0 22px 40px rgba(0, 0, 0, 0.4);
}
.arena-player { grid-area: player; display: flex; align-items: center; gap: 1rem; }
.arena-avatar .avatar { border-width: 4px; box-shadow: 0 5px 0 var(--ink); }
.arena-player-info { flex: 1; min-width: 0; }
.arena-name { margin: 0 0 0.35rem; font-family: var(--font-display); font-weight: 900; font-size: clamp(1.4rem, 3vw, 2rem); text-shadow: 0 3px 0 var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.level-row { display: flex; align-items: center; gap: 0.6rem; }
.level-badge {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.3rem;
  color: #fff;
  text-shadow: 0 2px 0 var(--ink);
  background: linear-gradient(180deg, #b388ff, #7c4dff);
  border: var(--edge);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.xp-bar { flex: 1; height: 18px; border: var(--edge); border-radius: 999px; background: #140e33; overflow: hidden; }
.xp-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd54f, #ff9f1a); transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.xp-text { font-weight: 800; font-size: 0.85rem; color: #ffe082; white-space: nowrap; }
.arena-stats { grid-area: stats; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.stat-chip {
  display: grid;
  justify-items: center;
  padding: 0.55rem 0.3rem 0.45rem;
  border: var(--edge);
  border-radius: 16px;
  background: linear-gradient(180deg, #4a3c9e, #2e2370);
  box-shadow: 0 4px 0 var(--ink);
}
.stat-chip .stat-icon { font-size: 1.5rem; line-height: 1; }
.stat-chip strong { font-family: var(--font-display); font-size: 1.4rem; text-shadow: 0 2px 0 var(--ink); }
.stat-chip small { font-weight: 800; color: var(--muted); font-size: 0.72rem; text-transform: uppercase; }
.stat-trophy strong { color: #ffd54f; }
.stat-quesito strong { color: #ffb74d; }
.stat-bot strong { color: #ff8a80; }
.stat-points strong { color: #80d8ff; }
.arena-stage { grid-area: stage; display: grid; justify-items: center; gap: 0.4rem; }
.arena-bot { width: min(100%, 240px); height: auto; background: none; border: none; border-radius: 0; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.45)); }
.arena-loop { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; margin: 0; }
.arena-loop span { font-weight: 900; font-size: 0.85rem; padding: 0.2rem 0.55rem; border-radius: 999px; border: 2px solid var(--ink); background: #140e33; }
.arena-play { grid-area: play; display: grid; gap: 0.9rem; }
.arena-pickers { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.arena-pickers select { width: 100%; }

.collection-grid { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 0.6rem; }
.collection-card {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  padding: 0.6rem 0.4rem;
  text-align: center;
  border: var(--edge);
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cat) 35%, #2e2370), #241a5c);
  box-shadow: 0 4px 0 var(--ink);
}
.collection-card strong { font-size: 0.8rem; line-height: 1.15; }
.collection-count { font-family: var(--font-display); font-weight: 900; font-size: 1.2rem; color: #fff; text-shadow: 0 2px 0 var(--ink); }
.collection-card.locked { filter: grayscale(0.7) brightness(0.85); opacity: 0.85; }
.trophy-card { border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); font-weight: 700; }
.trophy-card .trophy-icon { font-size: 1.2rem; }
.trophy-oro { background: linear-gradient(180deg, #8a6a12, #5c470c); }
.trophy-diamante { background: linear-gradient(180deg, #1f6f8b, #134a5d); }
.trophy-plata { background: linear-gradient(180deg, #6b7280, #4b5160); }
.trophy-bronce { background: linear-gradient(180deg, #8d5a2b, #5e3b1c); }

@media (max-width: 760px) {
  /* Móvil: JUGAR tiene que verse sin bajar; las cifras van debajo. */
  .arena { grid-template-columns: 1fr; grid-template-areas: "player" "stage" "play" "stats"; gap: 0.8rem; }
  .arena-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
  .stat-chip { padding: 0.4rem 0.2rem; }
  .stat-chip .stat-icon { font-size: 1.15rem; }
  .stat-chip strong { font-size: 1.1rem; }
  .stat-chip small { font-size: 0.6rem; }
  .arena-bot { width: 120px; }
  .arena-avatar .avatar { --avatar-size: 56px !important; width: 56px; height: 56px; font-size: 34px; }
}

/* --- Pregunta: tarjeta de quiz ------------------------------------------- */
.quiz-modal { background: radial-gradient(circle at 50% 30%, rgba(40, 20, 90, 0.82), rgba(8, 6, 20, 0.92)); }
.quiz-card {
  --cat: #ffd54f;
  --cat-dark: #8a6d00;
  width: min(94vw, 720px);
  max-width: 720px;
  border: var(--edge);
  border-radius: 26px;
  padding: clamp(1rem, 2.5vw, 1.6rem);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cat) 30%, #2e2370) 0%, #241a5c 38%);
  box-shadow: 0 8px 0 var(--ink), 0 0 0 6px color-mix(in srgb, var(--cat) 55%, transparent), 0 30px 60px rgba(0, 0, 0, 0.55);
}
.quiz-card.enter { animation: card-in 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }
.quiz-card.win { animation: card-win 0.5s ease-out; box-shadow: 0 8px 0 var(--ink), 0 0 0 8px var(--play), 0 0 60px rgba(62, 224, 122, 0.6); }
.quiz-card.lose { animation: card-shake 0.42s ease-in-out; }
@keyframes card-in { from { transform: scale(0.7) translateY(30px); opacity: 0; } }
@keyframes card-win { 40% { transform: scale(1.04); } }
@keyframes card-shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
.quiz-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.4rem; }
.quiz-bot {
  width: 96px;
  height: 96px;
  flex: none;
  border: var(--edge);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--cat) 45%, #2e2370), #140e33);
  box-shadow: 0 4px 0 var(--ink);
}
.quiz-head-text { display: grid; gap: 0.35rem; min-width: 0; }
.category-badge {
  justify-self: start;
  margin: 0;
  padding: 0.35rem 0.9rem;
  border: var(--edge);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  color: var(--ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cat) 60%, #fff), var(--cat));
  box-shadow: 0 4px 0 var(--ink);
}
.quiz-kicker { margin: 0; font-weight: 800; color: #ffe082; }
.quiz-question {
  margin: 0.6rem 0 0.9rem;
  font-size: clamp(1.25rem, 3.2vw, 1.85rem);
  line-height: 1.25;
  text-shadow: 0 2px 0 var(--ink);
}
.answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 0 0 0.6rem; }
.answer-grid .answer {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 74px;
  padding: 0.65rem 0.9rem;
  text-align: left;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  color: #fff;
  text-shadow: 0 2px 0 var(--ink);
  background: linear-gradient(180deg, #5847c4 0%, #3d2f9a 100%);
  animation: answer-in 0.36s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--i, 0) * 60ms + 120ms);
}
.answer-key {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border: var(--edge);
  border-radius: 10px;
  color: var(--ink);
  text-shadow: none;
  background: linear-gradient(180deg, #fff, #d9d3ff);
}
.answer-text { min-width: 0; overflow-wrap: anywhere; }
.answer-grid .answer.correct {
  background: linear-gradient(180deg, #7dff9f 0%, var(--play) 50%, var(--play-dark) 100%);
  border-color: var(--ink);
  animation: answer-correct 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 1;
}
.answer-grid .answer.wrong {
  background: linear-gradient(180deg, #ff8a80 0%, #ef5350 50%, #b71c1c 100%);
  border-color: var(--ink);
  animation: card-shake 0.38s ease-in-out;
}
.answer-grid .answer:disabled:not(.correct):not(.wrong) { opacity: 0.45; }
@keyframes answer-in { from { transform: scale(0.6); opacity: 0; } }
@keyframes answer-correct { 0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1.04); } }
.quiz-feedback { font-weight: 800; font-size: 1.05rem; min-height: 1.4rem; }
.quiz-actions { justify-content: flex-end; }
@media (max-width: 560px) {
  .answer-grid { grid-template-columns: 1fr; }
  .quiz-bot { width: 72px; height: 72px; }
  .answer-grid .answer { min-height: 58px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .answer-grid { grid-template-columns: 1fr 1fr; gap: 0.45rem; }
  .answer-grid .answer { min-height: 48px; padding: 0.4rem 0.7rem; }
  .quiz-bot { width: 56px; height: 56px; }
  .quiz-question { margin: 0.3rem 0 0.5rem; }
}

/* --- Recompensa del quesito ---------------------------------------------- */
.reward-overlay {
  --cat: #ffd54f;
  --cat-dark: #8a6d00;
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--cat) 55%, #1a1240) 0%, #0e0926 70%);
}
.reward-rays {
  position: absolute;
  width: 160vmax;
  height: 160vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.13) 0deg 10deg, transparent 10deg 20deg);
  animation: rays-spin 14s linear infinite;
  mask-image: radial-gradient(circle, #000 0%, transparent 60%);
}
@keyframes rays-spin { to { transform: rotate(360deg); } }
.reward-card { position: relative; display: grid; justify-items: center; gap: 0.35rem; text-align: center; padding: 1rem; width: min(92vw, 460px); }
.reward-kicker {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1rem, 3vw, 1.3rem);
  color: #ff8a80;
  text-shadow: 0 3px 0 var(--ink);
}
.reward-wedge svg { width: clamp(120px, 34vmin, 190px); height: auto; filter: drop-shadow(0 0 24px color-mix(in srgb, var(--cat) 80%, #fff)); }
.reward-title {
  margin: 0.2rem 0 0;
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  color: #fff;
  text-shadow: 0 4px 0 var(--ink), 0 0 24px color-mix(in srgb, var(--cat) 70%, transparent);
}
.reward-category { display: grid; justify-items: center; gap: 0.3rem; margin: 0; }
.reward-tagline { font-weight: 800; color: #ffe082; }
.reward-cake svg { width: 110px; height: 110px; }
.reward-progress { margin: 0; font-weight: 800; }
.reward-card .btn-play { font-size: 1.35rem; padding: 0.8rem 1.8rem; margin-top: 0.3rem; }
/* Secuencia de entrada: aviso, quesito con rebote, título estampado y el resto. */
.reward-card.enter .reward-kicker { animation: drop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.reward-card.enter .reward-wedge { animation: wedge-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s both, wedge-float 2.6s ease-in-out 0.9s infinite; }
.reward-card.enter .reward-title { animation: stamp 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s both; }
.reward-card.enter .reward-category,
.reward-card.enter .reward-cake,
.reward-card.enter .reward-progress,
.reward-card.enter .btn-play { animation: rise-in 0.4s ease-out 0.7s both; }
@keyframes drop-in { from { transform: translateY(-30px); opacity: 0; } }
@keyframes wedge-pop { 0% { transform: scale(0) rotate(-200deg); } 70% { transform: scale(1.18) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes wedge-float { 50% { transform: translateY(-8px) rotate(-3deg); } }
@keyframes stamp { from { transform: scale(2.4); opacity: 0; } }
@keyframes rise-in { from { transform: translateY(18px); opacity: 0; } }
/* Pantallas bajas (móvil en horizontal): todo compacto para que «¡A por más!» quede siempre visible. */
.reward-overlay { overflow-y: auto; place-items: safe center; }
@media (max-height: 640px) {
  .reward-card { gap: 0.15rem; padding: 0.4rem 1rem max(0.4rem, env(safe-area-inset-bottom)); }
  .reward-wedge svg { width: clamp(64px, 20vh, 120px); }
  .reward-title { font-size: clamp(1.3rem, 6vh, 2rem); margin: 0; }
  .reward-cake svg { width: clamp(48px, 13vh, 80px); height: clamp(48px, 13vh, 80px); }
  .reward-card .btn-play { font-size: 1.15rem; padding: 0.6rem 1.6rem; }
}
@media (max-height: 420px) {
  .reward-card { grid-template-columns: auto 1fr; column-gap: 1rem; width: min(96vw, 640px); }
  .reward-kicker, .reward-title, .reward-category, .reward-progress, .reward-card .btn-play { grid-column: 2; }
  .reward-wedge { grid-column: 1; grid-row: 1 / span 4; align-self: center; }
  .reward-cake { grid-column: 1; grid-row: 5 / span 2; }
  .reward-tagline { display: none; }
}

.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.confetti {
  position: absolute;
  width: 10px;
  height: 14px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  animation: confetti-fly 1.25s cubic-bezier(0.15, 0.7, 0.4, 1) var(--delay, 0ms) both;
}
@keyframes confetti-fly {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 140px)) rotate(var(--rot)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-huge, .quiz-card.enter, .quiz-card.win, .quiz-card.lose, .answer-grid .answer,
  .reward-rays, .reward-card.enter * { animation: none !important; }
}

/* --- Joystick de apuntado y barra de energía ----------------------------- */
.touch-aim {
  width: clamp(104px, 24vmin, 150px);
  background: radial-gradient(circle, rgba(255, 82, 82, 0.28), rgba(255, 82, 82, 0.1));
  border: 3px solid rgba(255, 138, 128, 0.75);
}
.touch-aim .aim-knob {
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  background: rgba(255, 82, 82, 0.92);
  border: 3px solid var(--ink);
}
.touch-aim.dragging { border-color: #ffffff; box-shadow: 0 0 18px rgba(255, 82, 82, 0.7); }
.touch-actions { gap: 0.9rem; }
.energy-badge { display: inline-flex; align-items: center; gap: 0.35rem; }

/* Salas abiertas: anfitrión bien visible y código para decir a los amigos a cuál entrar. */
.match-list li.room-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.75rem; border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.room-main { display: grid; gap: 0.15rem; min-width: 0; }
.room-main strong { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-code { font-family: var(--font-display); font-weight: 900; letter-spacing: 0.08em; padding: 0.25rem 0.6rem; border: 2px solid var(--ink); border-radius: 10px; background: #140e33; color: #ffe082; }
@media (max-width: 560px) {
  .match-list li.room-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .match-list li.room-row button { grid-column: 1 / -1; }
  .room-main strong { white-space: normal; overflow-wrap: anywhere; }
}
.energy-bar { display: inline-block; width: 64px; height: 10px; border: 2px solid var(--ink); border-radius: 999px; background: #140e33; overflow: hidden; }
.energy-bar span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #69f0ae, #00c853); transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.energy-badge.low .energy-bar span { background: linear-gradient(90deg, #ff8a80, #ff1744); }
.energy-badge.pop { animation: energy-hit 0.6s ease-out; }
@keyframes energy-hit { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-4px); background: #b71c1c; } 40%, 80% { transform: translateX(4px); } }

/* Páginas de contenido (cómo jugar, familia, niños, preguntas). */
.content-page { max-width: 46rem; margin: 0 auto; padding: 0.5rem 0 2rem; line-height: 1.6; }
.content-page h1 { font-size: clamp(1.6rem, 4.5vw, 2.3rem); line-height: 1.15; margin: 0.6rem 0 0.8rem; }
.content-page h2 { margin-top: 1.8rem; color: var(--accent); }
.content-page a { color: #8fd0ff; }
.content-page .lead { font-size: 1.1rem; color: var(--text); }
.content-page li { margin: 0.3rem 0; }
.crumbs { font-size: 0.9rem; color: var(--muted); }
.content-table { width: 100%; border-collapse: collapse; margin: 0.5rem 0; }
.content-table th, .content-table td { text-align: left; padding: 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.15); vertical-align: top; }
.content-cta { margin: 2rem 0 1rem; padding: 1rem 1.2rem; border: var(--edge); border-radius: 18px; background: var(--panel); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.content-cta p { margin: 0; flex: 1 1 16rem; }
.content-cta .button { text-decoration: none; }
.content-links, .site-footer nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.topic-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.6rem; }
.topic-grid a { display: block; padding: 0.7rem 0.9rem; border-radius: 12px; background: var(--panel); border-left: 6px solid var(--topic); text-decoration: none; color: var(--text); font-weight: 700; }
.topic-dot { display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.45em; border-radius: 50%; background: var(--topic); vertical-align: -0.05em; }
.quiz-list { padding-left: 1.4rem; }
.quiz-list > li { margin: 1.1rem 0; padding: 0.8rem 1rem; border-radius: 14px; background: var(--panel); }
.quiz-q { font-weight: 700; margin: 0 0 0.4rem; }
.quiz-options { margin: 0 0 0.5rem; padding-left: 1.1rem; color: var(--muted); }
.quiz-list summary { cursor: pointer; color: var(--accent); font-weight: 700; }
.site-footer { max-width: 46rem; margin: 1rem auto 2rem; padding: 0 1rem; font-size: 0.9rem; color: var(--muted); }
.site-footer a { color: var(--muted); }
html.touch-game .site-footer { display: none; }