/* AIDEV-NOTE: estilos del catálogo de juegos (GAMECATALOG014-JSK). Lo usan juegos.html (chips, "soon", botón lima)
   y las páginas juegos/<slug>.html, que generan tools/gen-juego.py. Las páginas de juego cargan antes
   ../charlas/charla.css (header .th, cuerpo .tb, tarjetas laterales y compartir); aquí solo va lo que cambia. */

/* ---------- comunes a juegos.html y a las páginas de juego ---------- */
.btn.lime{--c:var(--lime);--t:#0c2403}
.chip{font-family:var(--f-head);font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;padding:5px 11px;border:2px solid var(--line);background:var(--ink-2);color:var(--sillar)}
.soon{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-pixel);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);border:2px dashed var(--line);padding:12px 18px}
/* inspirado en Arequipa o en la cultura peruana (GAMECATALOG019-JSK): chip dorado, distinto de los de plataforma y género */
.chip.pe{border-color:var(--gold);color:var(--gold);background:rgba(255,179,31,.08)}

/* ---------- header de juego: key art ancho en vez del retrato de la charla ---------- */
.jh .eyebrow{color:var(--k,var(--gold))}
.jh .wrap{grid-template-columns:1fr 1fr}
.jh .th-side{max-width:none}
.jh .shot{position:relative;padding:10px;width:100%}
.jh .shot img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.jh .th-side .th-actions .btn{flex:0 1 auto}
@media (max-width:820px){
  /* móvil: volver → key art → título; la imagen es lo que identifica al juego, va arriba */
  .jh .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:0}
  .jh .wrap > div:first-child,.jh .th-side{display:contents}
  .jh .wrap > div:first-child > *{order:2}
  .jh .wrap > div:first-child > .back{order:0;margin-bottom:16px}
  .jh .shot{order:1;margin-bottom:20px;padding:6px}
  .jh .facts,.jh .th-actions{width:100%}
  .jh .th-side > .th-actions{order:3;margin-top:24px}
  .jh h1.big{margin-top:12px}
}

/* ---------- cuerpo ---------- */
/* charla.css pinta de dorado los links del cuerpo (.tb .block a): los botones y las tarjetas de "Más juegos" no */
.tb .block a.btn{color:var(--t);text-decoration:none}
.tb .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tb .btn-row{margin-top:18px}
.tb .soon{margin-top:18px}
/* video del juego (GAMECATALOG019-JSK): iframe de YouTube, TikTok o Drive a 16:9; .vert es un TikTok vertical */
.vid{aspect-ratio:16/9;padding:0;background:#000;margin-top:18px}
.vid iframe{display:block;width:100%;height:100%;border:0}
.vid.vert{aspect-ratio:9/16;max-width:360px}
/* quién lo hace: nombre del estudio, qué es y sus redes (los chips .bio-links vienen de charla.css) */
.quien p{color:var(--mute)}
.quien p b{color:var(--sillar);font-family:var(--f-head);font-weight:800;font-size:19px;text-transform:uppercase;letter-spacing:.03em}
.quien .bio-links{margin:14px 0 0}
.bio-links .it{--k:#fa5c5c}.bio-links .as{--k:#13aff0}
.more-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.tb .more-row a{display:flex;flex-direction:column;gap:4px;padding:14px 16px;text-decoration:none;color:var(--sillar)}
.more-row a:last-child{text-align:right}
.more-row small{font-family:var(--f-pixel);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--k,var(--dim))}
.more-row b{font-family:var(--f-display);font-weight:400;font-size:clamp(20px,2vw,26px);line-height:1}
.more-row a:hover b{color:var(--k,var(--gold))}
@media (max-width:520px){.more-row{grid-template-columns:1fr}.more-row a:last-child{text-align:left}}