/*
 * Fobos Bot — la web. El depósito de chatarra de noche, bajo la luz de una farola de sodio.
 * Paleta sacada del arte del juego (portada de la Torre): violeta noche, óxido, ámbar de farola, cobre verde y hueso.
 * Lo que se mueve solo es del juego: el ojo de Magna en la Torre (la web también está vigilada), Fobos andando por el
 * suelo del depósito y los jefes atacando en sus arenas. Las tiras salen de herramientas/tiras.py; con
 * prefers-reduced-motion todo se queda quieto en su primer fotograma.
 */
@font-face { font-family: 'Jersey 10'; src: url('fuentes/jersey10.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url('fuentes/atkinson-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url('fuentes/atkinson-400i.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url('fuentes/atkinson-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --noche: #1a1325;
  --noche-alta: #241a33;
  --humo: #3a2f4a;
  --oxido: #b4532a;
  --oxido-oscuro: #6e2f17;
  --ambar: #ffcf4a;
  --cobre: #4fb3a1;
  --hueso: #ece3d2;
  --ceniza: #b3a9bd;
  --rojo-magna: #ff3b3b;
  --display: 'Jersey 10', 'Atkinson', system-ui, sans-serif;
  --texto: 'Atkinson', system-ui, sans-serif;
  --ancho: 68rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--noche);
  color: var(--hueso);
  font: 400 1.0625rem/1.6 var(--texto);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ambar); text-underline-offset: 3px; }
a:hover { color: var(--hueso); }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1; margin: 0; letter-spacing: 0.01em; }
h2 { font-size: clamp(2.4rem, 5.5vw, 4rem); color: var(--ambar); text-wrap: balance; }
h3 { font-size: 2rem; color: var(--hueso); }
p { margin: 0; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Portada: el depósito de los niveles 1–3 por capas, cada una a su velocidad ──────── */
.portada { position: relative; }
.escena-marco {
  /* En pantallas anchas y bajas se recorta el cielo de arriba para que el logo y los botones quepan a la vista. */
  position: relative; overflow: hidden; max-width: 1600px; margin: 0 auto;
  max-height: 72svh; display: flex; align-items: flex-end;
}
.escena {
  /* Las capas del juego son de 512 × 256. En el móvil la escena crece hasta 52svh de alto y se recorta por los
     lados dejando la ciudad en ruinas en el centro. */
  position: relative;
  flex: none;
  width: max(100%, 52svh * 2);
  aspect-ratio: 2 / 1;
  left: 50%; translate: -50% 0;
}
.escena::after {
  /* El suelo de la escena se funde con la noche de la página. */
  content: '';
  position: absolute; inset: auto 0 0 0; height: 32%;
  background: linear-gradient(to bottom, transparent, var(--noche) 92%);
}
.capa { position: absolute; inset: 0; image-rendering: pixelated; }
.capa-cielo { background: url('arte/anim/portada_lejos.webp?v=4') 50% 0 / 100% auto no-repeat; }
/* medio es de 282 × 141 en la misma escala: 55,08 % del ancho de la escena, repetida abajo. */
.capa-cerca { inset: auto 0 -6% 0; height: 55.08%; background: url('arte/anim/portada_medio.webp?v=4') 30% 100% / 55.08% auto repeat-x; }
.pajaro {
  /* Los pájaros del bloque 1 cruzan el cielo como en el juego (11 × 12, a la escala de la capa). */
  position: absolute; left: -4%;
  width: 1.6%; aspect-ratio: 11 / 12;
  background: url('arte/anim/pajaro.webp?v=4') 0 0 / 100% 100%;
  animation: vuela 26s linear infinite;
}
.pajaro-1 { top: 17%; }
.pajaro-2 { top: 23%; width: 1.25%; animation-duration: 34s; animation-delay: -12s; }
.pajaro-3 { top: 14%; width: 1.4%; animation-duration: 30s; animation-delay: -21s; }
@keyframes vuela { to { left: 104%; } }

/* Al entrar, una vez: el depósito aparece y la chatarra de delante sube a su sitio. */
.capa-cielo { animation: aparece-cielo 0.9s ease-out both; }
.capa-cerca { animation: sube-capa 1s ease-out 0.2s both; }
@keyframes aparece-cielo { from { opacity: 0; } }
@keyframes sube-capa { from { opacity: 0; transform: translateY(14%); } }

/* Al bajar por la página, lo lejano se queda atrás (solo donde el navegador sabe atar animaciones al scroll). */
@supports (animation-timeline: scroll()) {
  .capa-cielo, .capa-cerca { animation-name: var(--entrada), profundidad; animation-duration: 1s, auto;
    animation-timing-function: ease-out, linear; animation-fill-mode: both, both;
    animation-timeline: auto, scroll(root); animation-range: normal, 0 100svh; }
  .capa-cielo { --entrada: aparece-cielo; --hasta: 34%; animation-delay: 0s, 0s; }
  .capa-cerca { --entrada: sube-capa; --hasta: 4%; animation-delay: 0.2s, 0s; }
  @keyframes profundidad { to { translate: 0 var(--hasta); } }
}
.portada-texto {
  position: relative;
  max-width: var(--ancho);
  margin: -9rem auto 0;
  padding: 0 1rem 4rem;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 1.25rem;
}
.logo {
  width: clamp(220px, 28vw, 360px);
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 0 rgb(0 0 0 / 0.45));
}
.lema { max-width: 34rem; font-size: 1.2rem; color: var(--hueso); text-wrap: balance; }
.acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.pronto { color: var(--ceniza); font-size: 0.95rem; }

/* ── El suelo del depósito, con Fobos cruzándolo ────────────────────────────────────── */
.suelo {
  /* 96 px de suelo y, encima, aire para Fobos. */
  position: relative;
  height: 190px;
  margin-top: -40px;
  overflow: hidden;
  background: url('arte/anim/suelo.webp?v=4') repeat-x 0 100% / 288px 96px;
  image-rendering: pixelated;
}
.suelo::before {
  /* El tile del juego es de día; de noche, bajo la farola, se oscurece hacia los bordes. */
  content: '';
  position: absolute; inset: auto 0 0; height: 96px;
  background: linear-gradient(to bottom, rgb(26 19 37 / 0.15), rgb(26 19 37 / 0.75)),
              linear-gradient(to right, var(--noche), transparent 15%, transparent 85%, var(--noche));
}
.fobos-anda {
  /* caminar_0..7, 64 × 64, al doble. Los pies tocan el borde de arriba del suelo. */
  position: absolute; left: 0; bottom: 66px; z-index: 1;
  width: 128px; height: 128px;
  background: url('arte/anim/fobos.webp?v=4') 0 0 / 1024px 128px;
  image-rendering: pixelated;
  animation: paso-fobos 0.8s steps(8) infinite, cruza 18s linear infinite;
}
@keyframes paso-fobos { to { background-position-x: -1024px; } }
@keyframes cruza { from { translate: -140px 0; } to { translate: 100vw 0; } }

/* ── Botones: ámbar de farola y chapa remachada ─────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0.4rem 1.4rem;
  font: 400 1.6rem/1 var(--display);
  text-decoration: none; cursor: pointer;
  border: 0; border-radius: 4px;
  box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.3);
  transition: translate 0.08s, box-shadow 0.08s;
}
.boton:active { translate: 0 2px; box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.3); }
.boton-ambar { background: var(--ambar); color: var(--noche); }
.boton-ambar:hover { background: #ffe08a; color: var(--noche); }
.boton-chapa {
  color: var(--hueso);
  background:
    radial-gradient(circle at 8px 50%, #8a8195 0 2px, transparent 3px),
    radial-gradient(circle at calc(100% - 8px) 50%, #8a8195 0 2px, transparent 3px),
    var(--humo);
  padding-inline: 1.6rem;
}
.boton-chapa:hover { background-color: #4a3d5c; color: var(--hueso); }

/* ── El juego: una captura grande y dos al lado ─────────────────────────────────────── */
main > section { max-width: var(--ancho); margin: 0 auto; padding: 4rem 1rem; }
.juego { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; }
.juego > h2 { grid-column: 1 / -1; max-width: 30ch; }
.pieza { margin: 0; display: grid; gap: 1rem; align-content: start; }
.pieza img {
  border-radius: 6px;
  border: 3px solid var(--humo);
  box-shadow: 0 0 0 1px #000, 0 18px 40px -20px #000;
}
.pieza figcaption { display: grid; gap: 0.4rem; max-width: 34rem; }
.pieza p { color: var(--ceniza); }
.pieza-grande { grid-column: 1 / -1; grid-template-columns: 3fr 2fr; align-items: center; gap: 2rem; }
.pieza-grande h3 { font-size: 2.6rem; color: var(--ambar); }

/* ── Los jefes: cada uno en su arena, atacando ───────────────────────────────────────── */
/* Fobos y el jefe tienen tiras con los mismos fotogramas (--n): con la misma duración van a la par, y Fobos salta o
   recibe el golpe justo cuando llega el ataque. Fondo: el del tramo de cada jefe. */
.jefes { display: grid; gap: 2rem; }
.jefes-cabeza { display: grid; gap: 0.6rem; max-width: 42rem; }
.jefes-cabeza p { color: var(--ceniza); }
.jefes-lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 2rem 1.25rem;
}
.jefe { grid-column: span 2; display: grid; gap: 0.35rem; align-content: start; }
.jefe:nth-child(n + 4) { grid-column: span 3; }
.jefe h3 { font-size: 2rem; margin-top: 0.5rem; }
.jefe-nivel { color: var(--ambar); font: 400 1.25rem/1 var(--display); }
.jefe p:last-child { color: var(--ceniza); }
.arena {
  --t: calc(var(--n) * 0.11s);
  position: relative;
  height: 13.5rem;
  overflow: hidden;
  border-radius: 4px;
  border: 2px solid var(--humo);
  background: linear-gradient(rgb(26 19 37 / 0.25), rgb(26 19 37 / 0.6)), var(--fondo) 50% 30% / cover;
  image-rendering: pixelated;
}
.arena::after {
  content: '';
  position: absolute; inset: auto 0 0; height: 40px;
  background: linear-gradient(rgb(26 19 37 / 0.1), rgb(26 19 37 / 0.6)), url('arte/anim/suelo.webp?v=4') 0 0 / 120px 40px repeat-x;
}
.arena-fobos, .arena-jefe { position: absolute; z-index: 1; image-rendering: pixelated; }
.arena-fobos {
  left: 9%; bottom: 28px;
  width: 80px; height: 80px;
  background: var(--fobos) 0 0 / calc(80px * var(--n)) 80px;
  animation: fobos-ataque var(--t) steps(var(--n)) infinite;
}
.arena-jefe {
  right: 7%; bottom: var(--pie, 32px);
  width: calc(var(--w) * var(--s)); height: calc(var(--h) * var(--s));
  background: var(--sprite) 0 0 / calc(var(--w) * var(--s) * var(--n)) 100%;
  animation: jefe-ataque var(--t) steps(var(--n)) infinite;
}
@keyframes fobos-ataque { to { background-position-x: calc(80px * var(--n) * -1); } }
/* Los fotogramas de saltar no suben: el salto lo pone el CSS, con la cima en el golpe (fotograma 17 de 21 en la
   Compactadora, el anillo de fuego en el 18 del Pistón). */
.jefe-compactadora .arena-fobos, .jefe-piston .arena-fobos { animation-name: fobos-ataque, var(--brinco); animation-timing-function: steps(var(--n)), ease-in-out; }
.jefe-compactadora .arena-fobos { --brinco: brinco-compactadora; }
.jefe-piston .arena-fobos { --brinco: brinco-piston; }
@keyframes brinco-compactadora { 0%, 62% { translate: 0 0; } 81% { translate: 0 -52px; } 100% { translate: 0 0; } }
@keyframes brinco-piston { 0%, 67% { translate: 0 0; } 86% { translate: 0 -52px; } 100% { translate: 0 0; } }
@keyframes jefe-ataque { to { background-position-x: calc(var(--w) * var(--s) * var(--n) * -1); } }
.jefe-compactadora .arena { --n: 21; --w: 88px; --h: 80px; --s: 1.6; --fondo: url('arte/anim/arena_compactadora.webp?v=4');
  --sprite: url('arte/anim/compactadora.webp?v=4'); --fobos: url('arte/anim/fobos_compactadora.webp?v=4'); }
.jefe-vigia .arena { --n: 21; --w: 128px; --h: 128px; --s: 1; --fondo: url('arte/anim/arena_vigia.webp?v=4');
  --sprite: url('arte/anim/vigia.webp?v=4'); --fobos: url('arte/anim/fobos_vigia.webp?v=4'); --pie: 40px; }
.jefe-grua .arena { --n: 24; --w: 145px; --h: 116px; --s: 1; --fondo: url('arte/anim/arena_grua.webp?v=4');
  --sprite: url('arte/anim/grua.webp?v=4'); --fobos: url('arte/anim/fobos_grua.webp?v=4'); --pie: 70px; }
.jefe-piston .arena { --n: 21; --w: 128px; --h: 144px; --s: 1; --fondo: url('arte/anim/arena_piston.webp?v=4');
  --sprite: url('arte/anim/piston.webp?v=4'); --fobos: url('arte/anim/fobos_piston.webp?v=4'); }
.jefe-gran-iman .arena { --n: 21; --w: 160px; --h: 128px; --s: 1; --fondo: url('arte/anim/arena_gran_iman.webp?v=4');
  --sprite: url('arte/anim/gran_iman.webp?v=4'); --fobos: url('arte/anim/fobos_gran_iman.webp?v=4'); }

/* ── El ranking: chapas remachadas ──────────────────────────────────────────────────── */
.ranking {
  border-top: 4px solid var(--oxido-oscuro);
  display: grid;
  gap: 1.5rem;
}
.ranking-cabeza { display: grid; gap: 0.6rem; max-width: 42rem; }
.ranking-cabeza p { color: var(--ceniza); }
.pestanas { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 2px solid var(--humo); }
.pestanas a {
  font: 400 1.5rem/1 var(--display);
  color: var(--ceniza); text-decoration: none;
  padding: 0.55rem 1rem 0.45rem;
  border-radius: 4px 4px 0 0;
  margin-bottom: -2px;
  border: 2px solid transparent;
}
.pestanas a:hover { color: var(--hueso); }
.pestanas a[aria-current='page'] { color: var(--ambar); background: var(--noche-alta); border-color: var(--humo) var(--humo) var(--noche-alta); }
.buscar { display: grid; gap: 0.4rem; max-width: 30rem; }
.buscar label { color: var(--ceniza); font-size: 0.95rem; }
.campo-boton { display: flex; gap: 0.5rem; }
.campo-boton input { flex: 1; min-width: 0; }

input:not([type]), input[type='text'] {
  font: 400 1.05rem var(--texto);
  color: var(--hueso);
  background: #120c1b;
  border: 2px solid var(--humo);
  border-radius: 4px;
  padding: 0.65rem 0.8rem;
  min-height: 48px;
}
input::placeholder { color: #776d85; }
input:focus-visible { border-color: var(--ambar); outline-offset: 1px; }

.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.chapa {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem 1fr auto auto;
  align-items: center;
  gap: 0.25rem 1rem;
  padding: 0.75rem 1rem 0.75rem 0.5rem;
  border-radius: 3px;
  background:
    radial-gradient(circle at 10px 10px, #6b6178 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 10px calc(100% - 10px), #6b6178 0 2.5px, transparent 3.5px),
    linear-gradient(180deg, #2c2238, #241b30);
  border: 1px solid #3c3049;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04), inset 0 -3px 0 rgb(0 0 0 / 0.25);
}
.puesto { font: 400 2.2rem/1 var(--display); color: var(--ceniza); text-align: center; }
.quien { display: grid; min-width: 0; }
.alias { font: 400 1.75rem/1.05 var(--display); color: var(--hueso); overflow-wrap: anywhere; }
.donde { color: var(--ceniza); font-size: 0.95rem; }
.medallas { display: flex; gap: 0.35rem; align-items: center; }
.medalla { width: 22px; height: 22px; display: inline-block; border-radius: 50%; box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.3), 0 0 0 2px #120c1b; }
.m-campana { background: var(--oxido); clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 77%, 20% 100%, 30% 60%, 0 38%, 38% 35%); border-radius: 0; box-shadow: none; }
.m-normal { background: radial-gradient(circle at 35% 30%, #fff 0 12%, #c9c9d6 30%, #8b8b9c 100%); }
.m-heroica { background: radial-gradient(circle at 35% 30%, #fff6c8 0 12%, var(--ambar) 35%, #b8860b 100%); }
.dorado { image-rendering: pixelated; }
.reportar {
  color: #6b6178; text-decoration: none; font-size: 1.1rem;
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 4px;
}
.reportar:hover { color: var(--rojo-magna); background: rgb(255 59 59 / 0.08); }

/* El podio: la primera chapa es de latón, la segunda de acero, la tercera de cobre. */
.podio .puesto { color: var(--noche); background: var(--ceniza); border-radius: 4px; padding: 0.35rem 0; }
.p1 { background: radial-gradient(circle at 10px 10px, #8f6a14 0 2.5px, transparent 3.5px), radial-gradient(circle at 10px calc(100% - 10px), #8f6a14 0 2.5px, transparent 3.5px), linear-gradient(180deg, #4a3714, #2e2414); border-color: #8f6a14; }
.p1 .puesto { background: var(--ambar); }
.p1 .alias { color: var(--ambar); font-size: 2.1rem; }
.p2 .puesto { background: #c9c9d6; }
.p3 .puesto { background: #c98552; }
.tuya { outline: 3px solid var(--cobre); outline-offset: 2px; }

.vacio {
  display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.25rem; align-items: center; align-content: center;
  padding: 2rem 1.5rem;
  border: 2px dashed var(--humo); border-radius: 4px;
  color: var(--ceniza);
}
.vacio b { font: 400 2rem/1 var(--display); color: var(--hueso); }
.vacio p { grid-column: 2; }
.fobos-mira {
  /* Fobos curioso: el puesto 1 está libre y él ya está mirando. */
  grid-row: span 2;
  width: 120px; height: 120px;
  background: url('arte/anim/fobos_curioso.webp?v=4') 0 0 / 480px 120px;
  image-rendering: pixelated;
  animation: mira 1.4s steps(4) infinite;
}
@keyframes mira { to { background-position-x: -480px; } }

.aviso { padding: 0.8rem 1rem; border-left: 4px solid var(--cobre); background: rgb(79 179 161 / 0.1); border-radius: 0 4px 4px 0; }
.aviso-bien { border-color: var(--cobre); }
.aviso-mal { border-color: var(--rojo-magna); background: rgb(255 59 59 / 0.1); }

.reporte {
  display: grid; gap: 0.9rem; max-width: 36rem;
  padding: 1.5rem; border-radius: 4px;
  background: var(--noche-alta); border: 2px solid var(--oxido-oscuro);
}
.reporte h3 { color: var(--ambar); }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
legend { margin-bottom: 0.4rem; }
.opcion { display: flex; gap: 0.6rem; align-items: center; min-height: 44px; cursor: pointer; }
.opcion input { width: 22px; height: 22px; accent-color: var(--ambar); flex: none; }
.fila-botones { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.nota { color: var(--ceniza); font-size: 0.92rem; }

/* ── Subir el código: los tres pasos y el formulario ────────────────────────────────── */
.subir { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 3rem; align-items: start; border-top: 4px solid var(--oxido-oscuro); }
.subir > h2 { grid-column: 1 / -1; }
.pasos { margin: 0; padding: 0; list-style: none; counter-reset: paso; display: grid; gap: 1.4rem; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 3rem 1fr; gap: 0 1rem; color: var(--ceniza); }
.pasos li::before {
  content: counter(paso);
  grid-row: span 2;
  font: 400 2.6rem/1 var(--display);
  color: var(--noche); background: var(--cobre);
  width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 4px;
}
.pasos b { color: var(--hueso); display: block; }
.formulario {
  display: grid; gap: 0.5rem;
  padding: 1.5rem; border-radius: 4px;
  background: var(--noche-alta); border: 2px solid var(--humo);
}
.formulario label:not(.opcion) { color: var(--ceniza); font-size: 0.95rem; margin-top: 0.4rem; }
.formulario .boton { margin-top: 0.6rem; justify-self: start; }
.codigo { font-family: ui-monospace, 'Cascadia Mono', monospace !important; letter-spacing: 0.04em; text-transform: uppercase; }
.trampa { position: absolute; left: -9999px; }

/* ── Pie ────────────────────────────────────────────────────────────────────────────── */
.pie {
  max-width: var(--ancho); margin: 0 auto; padding: 2.5rem 1rem 3rem;
  display: flex; gap: 1rem; align-items: center;
  border-top: 2px solid var(--humo);
  color: var(--ceniza); font-size: 0.95rem;
}
.pie div { display: grid; gap: 0.3rem; }
.pie b { color: var(--hueso); }
.pie-icono { border-radius: 12px; flex: none; }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }

/* ── Privacidad ─────────────────────────────────────────────────────────────────────── */
.texto-largo { max-width: 42rem; margin: 0 auto; padding: 3rem 1rem; display: grid; gap: 1rem; }
.texto-largo h1 { font-size: clamp(2.6rem, 6vw, 3.6rem); color: var(--ambar); }
.texto-largo h2 { font-size: 2rem; color: var(--hueso); margin-top: 1rem; }
.texto-largo p, .texto-largo li { color: var(--ceniza); }
.texto-largo .volver { font: 400 1.4rem/1 var(--display); }

@media (max-width: 960px) {
  /* Los jefes en fila, deslizando con el dedo; el siguiente asoma por el borde. */
  .jefes-lista {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(19rem, 46%);
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: -1rem; padding: 0 1rem 1rem; scroll-padding-inline: 1rem;
  }
  .jefe, .jefe:nth-child(n + 4) { grid-column: auto; scroll-snap-align: start; }
}

@media (max-width: 760px) {
  .juego, .subir { grid-template-columns: 1fr; }
  .jefes-lista { grid-auto-columns: 86%; }
  .vacio { grid-template-columns: 1fr; justify-items: start; }
  .vacio p { grid-column: auto; }
  .fobos-mira { grid-row: auto; }
  .pieza-grande { grid-template-columns: 1fr; }
  .portada-texto { margin-top: -3rem; padding-bottom: 2.5rem; }
  .chapa { grid-template-columns: 2.6rem 1fr auto; padding-right: 0.25rem; }
  .medallas { grid-column: 2; grid-row: 2; }
  .reportar { grid-column: 3; grid-row: 1 / span 2; }
  .puesto { font-size: 1.8rem; }
  .p1 .alias { font-size: 1.8rem; }
  .pie { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .capa, .pajaro { animation: none !important; }
  .pajaro { display: none; }
  .fobos-anda { animation: none; left: 12%; }
  .arena-fobos, .arena-jefe, .fobos-mira { animation: none; }
  .boton { transition: none; }
}