/* Página de juegos: las cinco fichas grandes que sustituyen al desplegable de la
   cabecera. La maqueta es la de siempre (tarjetas blancas en rejilla), lo que cambia
   es cuánto manda el color de cada juego: franja a la izquierda a modo de lomo, icono
   en color sólido, nombre y acción en el color del juego y borde teñido al pasar.

   Los colores por juego son los mismos que usaban las tarjetas del desplegable en
   search.css, con su variante de oscuro y de sepia. */

/* Color propio del índice: añil. Ninguno de los cinco juegos usa el azul (coral,
   violeta, teja, vino y verde oliva), así que la raíz se reconoce sin confundirse con
   ninguna ficha y deja que los cinco colores sigan mandando dentro de la página.
   El glifo del rótulo cambia de lado según el tema: en claro y sepia el añil es oscuro
   y pide texto claro; en oscuro la variante es clara y pide tinta (8,6 / 8,2 / 6,9).

   El papel también es propio. Hasta aquí el índice heredaba el de Portadas (mismo
   --paper, --glow y --dot), y por eso daba la sensación de estar en la misma página:
   el añil se veía solo en el rótulo. Ahora el fondo, el degradado y el punteado van
   fríos. En sepia se enfría menos: ese tema lo elige quien quiere calor. */
body[data-game=hub]{--coral:#2f4d6b;--sobre-coral:#fffdf8;--paper:#eef1f6;--card:#fbfcfe;--line:#dde2ea;--glow:#dde7f2;--glow-2:#cfdcec;--dot:rgba(47,77,107,.05)}
html[data-theme=dark] body[data-game=hub]{--coral:#8ab4dc;--sobre-coral:#201511;--paper:#141922;--card:#1d232d;--ink:#e9eef5;--muted:#a7b4c4;--line:#2e3846;--glow:#1a212c;--glow-2:#0f141c;--dot:rgba(138,180,220,.05)}
/* En sepia el papel se enfría lo justo: con #e9e7da el texto de la introducción se
   quedaba en 4,39. A #f0eee3 vuelve a pasar y el tono frío se nota igual. */
html[data-theme=sepia] body[data-game=hub]{--coral:#3a5a78;--sobre-coral:#fffdf8;--paper:#f0eee3;--card:#fdfbf5;--glow:#e6e8de;--glow-2:#dce0d5}

.juegos-main{width:100%;max-width:1080px;margin:auto;padding:0 20px}
.juegos-main .hero{padding:56px 0 26px;text-align:center}
.juegos-main .hero h1{font-size:clamp(32px,4.6vw,50px)}
.juegos-main .hero .intro{color:color-mix(in srgb,var(--ink) 82%,var(--card))}
/* El añil también aparece en el antetítulo y en el filete de la cabecera activa: sin
   esto el color se vería solo en el rótulo y la página seguiría pareciendo Portadas. */
.juegos-main .hero .eyebrow{color:var(--coral)}
/* Firma de la página: un filete con los cinco colores, uno por juego y en su orden.
   Es decorativo (aria-hidden) y no se traduce: si algún día cambia un color de juego,
   hay que cambiarlo aquí y en --game-color de cada .ficha. */
.juegos-main .hero .hero-regla{display:flex;justify-content:center;gap:5px;margin:18px auto 0}
.juegos-main .hero .hero-regla span{width:46px;height:4px;border-radius:2px}
.juegos-main .hero .hero-regla span:nth-child(1){background:#9b270d}
.juegos-main .hero .hero-regla span:nth-child(2){background:#463178}
.juegos-main .hero .hero-regla span:nth-child(3){background:#227770}
.juegos-main .hero .hero-regla span:nth-child(4){background:#812836}
.juegos-main .hero .hero-regla span:nth-child(5){background:#617c3c}
.juegos-main .hero .hero-regla span:nth-child(6){background:#d9962a}
html[data-theme=dark] .juegos-main .hero .hero-regla span:nth-child(1){background:#ed6945}
html[data-theme=dark] .juegos-main .hero .hero-regla span:nth-child(2){background:#955ce5}
html[data-theme=dark] .juegos-main .hero .hero-regla span:nth-child(3){background:#5cb8a8}
html[data-theme=dark] .juegos-main .hero .hero-regla span:nth-child(4){background:#e55c6e}
html[data-theme=dark] .juegos-main .hero .hero-regla span:nth-child(5){background:#8fb056}
html[data-theme=dark] .juegos-main .hero .hero-regla span:nth-child(6){background:#e8b24c}
html[data-theme=sepia] .juegos-main .hero .hero-regla span:nth-child(1){background:#8f2a10}
html[data-theme=sepia] .juegos-main .hero .hero-regla span:nth-child(2){background:#463178}
html[data-theme=sepia] .juegos-main .hero .hero-regla span:nth-child(3){background:#1d6b64}
html[data-theme=sepia] .juegos-main .hero .hero-regla span:nth-child(4){background:#7a2634}
html[data-theme=sepia] .juegos-main .hero .hero-regla span:nth-child(5){background:#5d7238}
html[data-theme=sepia] .juegos-main .hero .hero-regla span:nth-child(6){background:#c98a2e}

.juegos-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:26px 0 0}

.ficha{--game-color:#9b270d;--ficha-fondo:var(--game-color);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:18px 20px 18px 26px;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:inset 6px 0 0 0 var(--game-color),0 10px 26px #544c3b0b;transition:transform .15s,box-shadow .15s,background .15s,border-color .15s}
.ficha-emoji{--game-color:#463178}
.ficha-vs{--game-color:#227770}
.ficha-quote{--game-color:#812836}
.ficha-crono{--game-color:#617c3c}
.ficha-contrareloj{--game-color:#d9962a}
html[data-theme=dark] .ficha-cover{--game-color:#ed6945}
html[data-theme=dark] .ficha-emoji{--game-color:#955ce5}
html[data-theme=dark] .ficha-vs{--game-color:#5cb8a8}
html[data-theme=dark] .ficha-quote{--game-color:#e55c6e}
html[data-theme=dark] .ficha-crono{--game-color:#8fb056}
html[data-theme=dark] .ficha-contrareloj{--game-color:#e8b24c}
html[data-theme=sepia] .ficha-cover{--game-color:#8f2a10}
html[data-theme=sepia] .ficha-emoji{--game-color:#463178}
html[data-theme=sepia] .ficha-vs{--game-color:#1d6b64}
html[data-theme=sepia] .ficha-quote{--game-color:#7a2634}
html[data-theme=sepia] .ficha-crono{--game-color:#5d7238}
html[data-theme=sepia] .ficha-contrareloj{--game-color:#c98a2e}
/* En oscuro los cinco colores son claros: ahí el relleno del icono se oscurece para
   que el glifo blanco siga pasando contraste (con el color tal cual, el verde de Años
   se queda en 2,5:1). */
html[data-theme=dark] .ficha{--ficha-fondo:color-mix(in srgb,var(--game-color) 62%,#14170f)}

/* Icono: relleno del color del juego y glifo en blanco. Medido sobre los cinco
   colores, el peor caso es el verde de Años en claro (4,7:1). */
.ficha .game-card-icon{width:44px;height:44px;border-radius:13px;background:var(--ficha-fondo);color:#fff;font:700 20px Georgia,serif;display:grid;place-items:center}
.ficha-vs .game-card-icon{font:800 13px 'Manrope',sans-serif}
.ficha-quote .game-card-icon{font-size:26px;padding-top:3px;box-sizing:border-box}
.ficha-crono .game-card-icon{font:700 20px 'DM Mono',monospace}

.ficha-cuerpo{display:grid;gap:4px;min-width:0}
.ficha strong{font:700 21px Fraunces,Georgia,serif;letter-spacing:-.4px;color:var(--game-color)}
html[data-theme=dark] .ficha strong{color:color-mix(in srgb,var(--game-color) 62%,#fff)}
.ficha-desc{font-size:12.5px;line-height:1.5;color:color-mix(in srgb,var(--ink) 82%,var(--card))}
.ficha-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px;min-height:22px}
.ficha-tipo{padding:3px 8px;border-radius:20px;background:color-mix(in srgb,var(--game-color) 18%,var(--card));color:var(--game-color);font:500 9.5px 'DM Mono',monospace;letter-spacing:.9px;text-transform:uppercase}
html[data-theme=dark] .ficha-tipo{background:color-mix(in srgb,var(--game-color) 22%,var(--card));color:color-mix(in srgb,var(--game-color) 62%,#fff)}
/* Estado del reto de hoy. El pendiente va en tinte suave; el hecho, en el color
   entero del juego con texto blanco (mismo contraste que el icono, medido). */
.ficha-estado{padding:3px 8px;border-radius:20px;background:color-mix(in srgb,var(--game-color) 12%,var(--card));color:color-mix(in srgb,var(--game-color) 75%,var(--ink));font:500 9.5px 'DM Mono',monospace;letter-spacing:.9px;text-transform:uppercase}
/* En oscuro el tinte del fondo es oscuro y la mezcla con --ink se queda en 4,25:1, así
   que el texto se aclara hacia el blanco (5,5:1). `:not(.hecho)` es necesario porque
   sin él esta regla (0,2,1) ganaría a `.ficha-estado.hecho` (0,2,0) y el texto blanco
   del reto ya jugado pasaría a ser del color del juego sobre ese mismo color. */
html[data-theme=dark] .ficha-estado:not(.hecho){color:color-mix(in srgb,var(--game-color) 62%,#fff)}
.ficha-estado.hecho{background:var(--ficha-fondo);color:#fff}
.ficha-ir{font:500 11px 'DM Mono',monospace;letter-spacing:.6px;color:var(--game-color);white-space:nowrap}
html[data-theme=dark] .ficha-ir{color:color-mix(in srgb,var(--game-color) 62%,#fff)}

.ficha:hover{background:color-mix(in srgb,var(--game-color) 10%,var(--card));border-color:color-mix(in srgb,var(--game-color) 55%,var(--line));box-shadow:inset 6px 0 0 0 var(--game-color),0 16px 34px #544c3b14;transform:translateY(-2px)}
.ficha:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

.juegos-more{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 12px;margin:22px 0 0;padding:18px 20px;border:1px dashed var(--line);border-radius:14px}
.juegos-more .games-more-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--glow);color:color-mix(in srgb,var(--ink) 82%,var(--card));font-size:17px;grid-row:span 2}
.juegos-more strong{font:700 15px Fraunces,Georgia,serif}
.juegos-more-nota{font-size:12.5px;line-height:1.55;color:color-mix(in srgb,var(--ink) 82%,var(--card))}

@media(max-width:620px){
  .juegos-main{padding:0 14px}
  .juegos-main .hero{padding:34px 0 18px}
  .juegos-grid{grid-template-columns:1fr}
  .ficha{padding:15px 16px 15px 20px;gap:12px;box-shadow:inset 5px 0 0 0 var(--game-color),0 8px 20px #544c3b0b}
  .ficha .game-card-icon{width:38px;height:38px;font-size:17px}
  .ficha strong{font-size:19px}
}
@media(prefers-reduced-motion:reduce){.ficha{transition:none}}