/* Videojuegos: estilos propios de la guía.
   Paleta de la consola NES (gris del plástico, carbón y el rojo del logo) sobre el fondo común del sitio
   (el de la documentación de Claude). Cada parte usa un color de los subpíxeles (rojo, verde, azul).
   Títulos en Tektur (esquinas cortadas, como los menús de un juego) y texto en Rubik.
   Lo común (barra, índice, secciones, widgets) viene de /css/base.css y /css/guide-kit.css; acá se redefinen sus tokens. */
:root {
  --sea: #FCFCFB; --surface: #FFFFFF; --tint: #D7D4CD; --ink: #26262B; --muted: #5C5A60; --rule: #C3BFB7;
  --nes-red: #B5242B;
  --px-r: #B82A30; --px-g: #176A3C; --px-b: #2556B5;
  --f-slate: #4F4D55; --f-blue: var(--nes-red);
  --sky: #EEF1F3;
  --font-title: "Tektur", "Rubik", system-ui, sans-serif;
  --font-display: "Rubik", system-ui, sans-serif;
  --font-body: "Rubik", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nes-red: #FF6464; --px-r: #FF6B6B; --px-g: #5BE08F; --px-b: #6EA8FF; --f-slate: #A9B1C2;
    --sky: #111A2C; --on-strand: #151515;
  }
}
:root[data-theme="dark"] {
  --nes-red: #FF6464; --px-r: #FF6B6B; --px-g: #5BE08F; --px-b: #6EA8FF; --f-slate: #A9B1C2;
  --sky: #111A2C; --on-strand: #151515;
}

/* Tipografía: Tektur en títulos, números y años; Rubik en el resto */
.hero h1 { color: var(--ink); font-family: var(--font-title); font-weight: 800; font-variation-settings: normal; letter-spacing: -.01em; line-height: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero h1 { color: var(--ink); text-shadow: 0 0 22px rgba(255, 100, 100, .22); } }
:root[data-theme="dark"] .hero h1 { text-shadow: 0 0 22px rgba(255, 100, 100, .22); }
.part-head h2, .reference > h2, .sec h3, .tl-year, .sp-name { font-family: var(--font-title); font-variation-settings: normal; letter-spacing: 0; }
.part-head h2, .reference > h2 { font-weight: 750; }
.sec h3 { font-weight: 650; }
.sec h4, .widget-title { font-variation-settings: normal; }
a { text-decoration-color: var(--strand, var(--nes-red)); }
.range { accent-color: var(--strand); }

/* Botones más cómodos en pantallas táctiles */
@media (pointer: coarse) {
  .chip, .btn { min-height: 44px; }
  .chip { padding-inline: .9rem; }
}

/* Línea de tiempo: horizontal y desplazable en pantallas anchas, vertical en el celular */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 22px 0; }
.timeline li { position: relative; padding: 30px 18px 0 0; display: grid; gap: 4px; align-content: start; }
.timeline li::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: var(--rule); }
.timeline li::after { content: ""; position: absolute; left: 0; top: 4px; width: 8px; height: 8px; background: var(--strand); border: 2px solid var(--sea); box-shadow: 0 0 0 2px var(--strand); }
.tl-year { font-weight: 750; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.tl-text { font-size: .93rem; line-height: 1.45; }
@media (max-width: 640px) {
  .timeline { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .timeline li { padding: 0 0 16px 26px; }
  .timeline li::before { left: 5px; right: auto; top: 12px; bottom: 0; width: 2px; height: auto; }
  .timeline li:last-child::before { display: none; }
  .timeline li::after { top: 6px; }
}

/* Las cuatro piezas */
.pieces { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.pieces div { padding: 14px 0; border-top: 2px solid var(--strand); }
.pieces dt { font-weight: 700; display: flex; align-items: center; gap: 10px; }
.pieces dt svg { width: 24px; height: 24px; color: var(--strand); flex: none; }
.pieces dd { margin: 4px 0 0; }
@media (max-width: 640px) { .pieces { grid-template-columns: minmax(0, 1fr); } }

pre.code { margin: 0; padding: 14px 16px; background: var(--tint); border-radius: 10px; overflow-x: auto; font-family: var(--font-mono); font-size: .86rem; line-height: 1.6; }
pre.code code { background: none; padding: 0; white-space: pre; font-size: 1em; }
.formula { margin: 0; padding: 12px 16px; border-left: 3px solid var(--strand); background: var(--tint); border-radius: 0 10px 10px 0; font-family: var(--font-mono); font-size: .95rem; }

/* Lienzos de los widgets */
.fold-canvas, .sphere-canvas, .frame-canvas { display: block; width: 100%; border-radius: 10px; background: var(--sky); }
.fold-canvas { aspect-ratio: 2 / 1; }
.sphere-canvas { aspect-ratio: 16 / 9; }
.frame-canvas { aspect-ratio: 16 / 9; }
.fold-status { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fold-status p { margin: 0; font-size: .95rem; }
@media (max-width: 640px) { .fold-status { grid-template-columns: minmax(0, 1fr); } }

.sphere-info { display: grid; gap: 6px; }
.sphere-info p { margin: 0; }
.meter { height: 10px; border-radius: 5px; background: var(--tint); overflow: hidden; }
.meter span { display: block; height: 100%; width: 0; background: var(--strand); transition: width .35s ease; }
.meter-label { font-size: .84rem; color: var(--muted); }

/* CPU contra GPU */
.race-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.race-grid figure { margin: 0; display: grid; gap: 8px; }
.race-grid figcaption { font-size: .92rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.race-grid figcaption strong { color: var(--ink); }
.race-canvas { display: block; width: 100%; aspect-ratio: 3 / 2; border-radius: 8px; background: var(--tint); image-rendering: pixelated; }
@media (max-width: 480px) { .race-grid { grid-template-columns: minmax(0, 1fr); } }

/* Caballo de Muybridge */
.horse-stage { background: #F2F0EA; border-radius: 10px; overflow: hidden; display: grid; place-items: center; }
.horse-canvas { display: block; width: 100%; max-width: 480px; aspect-ratio: 3 / 2; }
.horse-strip { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 3px; }
.horse-strip span { aspect-ratio: 3 / 2; background-image: url("/gamedev/img/muybridge.webp"); background-size: 1500% 100%; border-radius: 2px; opacity: .45; outline: 2px solid transparent; outline-offset: 1px; }
.horse-strip span.on { opacity: 1; outline-color: var(--strand); }

/* Carriles: FPS y delta time */
.lanes { display: grid; gap: 10px; }
.lane { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.lane-label { font-size: .9rem; font-weight: 700; }
.lane-time { font-size: .9rem; color: var(--muted); min-width: 4.2rem; text-align: right; font-variant-numeric: tabular-nums; }
.lane-track { position: relative; height: 34px; border-radius: 8px; background: var(--tint); }
.lane-track.finish { background: linear-gradient(to left, color-mix(in srgb, var(--strand) 22%, var(--tint)) 3px, var(--tint) 3px); }
.ball, .runner { position: absolute; top: 50%; left: 0; width: 22px; height: 22px; margin-top: -11px; will-change: transform; }
.ball { border-radius: 50%; background: var(--strand); }
.runner { border-radius: 4px; background: var(--px-r); }
.runner.ok { background: var(--strand); }
@media (max-width: 640px) {
  .lane { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .lane-label { grid-column: 1; }
  .lane-time { grid-column: 2; grid-row: 1; }
  .lane-track { grid-column: 1 / -1; }
}