/* vlfern · catálogo de juegos
   Tipografía pixel (Press Start 2P) solo para títulos y etiquetas; el texto corrido usa la fuente del sistema
   para que se lea bien en cualquier pantalla. Los colores de cada juego llegan por variables --g-*. */
@font-face{ font-family:'Press Start 2P'; src:url('/assets/afec86997fdaf54a.woff2') format('woff2'); font-display:swap; }

:root{
  --paper:#fff8ec; --paper-2:#ffefd2; --ink:#2b2140; --text:#2b2140; --muted:#5f5279;
  --seal:#ee4266; --line:#2b2140; --card:#fffdf8; --focus:#3a86ff;
  --pixel:'Press Start 2P', ui-monospace, 'Courier New', monospace;
  --body:system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --step:4px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --paper:#17122a; --paper-2:#211a3a; --ink:#0b0816; --text:#fff4e0; --muted:#c7b8ea; --line:#fff4e0; --card:#241d40; }
}
:root[data-theme="dark"]{ --paper:#17122a; --paper-2:#211a3a; --ink:#0b0816; --text:#fff4e0; --muted:#c7b8ea; --line:#fff4e0; --card:#241d40; }
html{ scroll-padding-top:env(safe-area-inset-top,0px); -webkit-text-size-adjust:100%; }
*,*::before,*::after{ box-sizing:inherit; }
body{
  margin:0; min-height:100vh; background:var(--paper); color:var(--text);
  font:400 1.0625rem/1.65 var(--body);
  background-image:radial-gradient(color-mix(in srgb, var(--line) 9%, transparent) 1px, transparent 1.2px);
  background-size:12px 12px;
}
img{ max-width:100%; height:auto; display:block; image-rendering:pixelated; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }
.skip{ position:absolute; left:-9999px; top:8px; z-index:10; background:var(--card); padding:8px 12px; border:3px solid var(--line); }
.skip:focus{ left:8px; }
.wrap{ width:min(1120px, 100% - 32px); margin-inline:auto; }

/* ---------- Cabecera ---------- */
.site-head{ border-bottom:4px solid var(--line); background:color-mix(in srgb, var(--paper) 88%, transparent); }
.site-head .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand .seal{ width:34px; height:34px; }
.brand-name{ font:400 clamp(14px, 2.6vw, 18px)/1 var(--pixel); letter-spacing:1px; }
.site-nav{ display:flex; gap:18px; font:400 10px/1 var(--pixel); }
.site-nav a{ text-decoration:none; padding:6px 0; border-bottom:3px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"]{ border-bottom-color:var(--seal); }
.seal{ display:block; color:var(--seal); transform:rotate(8deg); flex:0 0 auto; }
.seal svg{ display:block; width:100%; height:100%; }

/* ---------- Portada ---------- */
.hero{ padding:clamp(28px, 6vw, 64px) 0 clamp(18px, 4vw, 36px); }
.hero h1{ font:400 clamp(20px, 4.6vw, 40px)/1.35 var(--pixel); margin:0 0 18px; text-wrap:balance; }
.hero h1 em{ font-style:normal; color:var(--seal); }
.hero p{ max-width:60ch; margin:0; font-size:1.125rem; color:var(--muted); }
.section-title{ font:400 clamp(13px, 2.2vw, 16px)/1.4 var(--pixel); margin:0 0 20px; display:flex; align-items:center; gap:12px; }
.section-title::after{ content:''; flex:1; height:4px; background:repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px); }

.grid{ list-style:none; margin:0 0 56px; padding:0; display:grid; gap:28px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.card{
  display:flex; flex-direction:column; height:100%; background:var(--card); border:4px solid var(--line);
  box-shadow:6px 6px 0 var(--ink); position:relative;
}
.card-label{ background:var(--g-bg); color:var(--g-ink); border-bottom:4px solid var(--line); padding:10px 12px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.card-label h3{ margin:0; font:400 12px/1.4 var(--pixel); }
.card-label h3 a{ text-decoration:none; }
.card-label h3 a::after{ content:''; position:absolute; inset:0; z-index:0; }   /* toda la tarjeta lleva a la ficha */
.card-media{ background:var(--g-bg); border-bottom:4px solid var(--line); aspect-ratio:16/10; overflow:hidden; }
.card-media img{ width:100%; height:100%; object-fit:cover; image-rendering:auto; }
.card-body{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:12px; flex:1; }
.card-body p{ margin:0; }
.card-tag{ font-weight:600; }
.card-actions{ display:flex; gap:12px; margin-top:auto; flex-wrap:wrap; position:relative; z-index:1; }

.chip{ display:inline-block; font:400 8px/1 var(--pixel); padding:6px 7px 5px; border:2px solid currentColor; white-space:nowrap; letter-spacing:.5px; }
.chip.pending{ color:#8a5a00; background:#fff2c2; border-color:#8a5a00; }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px;
  font:400 12px/1 var(--pixel); text-decoration:none; padding:12px 16px 11px; cursor:pointer;
  border:3px solid var(--line); background:var(--card); color:var(--text); box-shadow:inset 0 -4px 0 color-mix(in srgb, var(--line) 25%, transparent);
}
.btn:active{ transform:translateY(2px); box-shadow:inset 0 -1px 0 color-mix(in srgb, var(--line) 25%, transparent); }
.btn-play{ background:#e8423f; color:#fff; border-color:#2b2140; box-shadow:inset 0 -5px 0 #a32835; }
.btn-play:active{ box-shadow:inset 0 -2px 0 #a32835; }
.btn-play::before{ content:''; width:0; height:0; border-left:8px solid currentColor; border-top:6px solid transparent; border-bottom:6px solid transparent; }
.btn-lg{ font-size:clamp(13px, 2.4vw, 16px); padding:16px 22px 15px; }

/* ---------- Ficha ---------- */
.crumbs{ font-size:.95rem; margin:22px 0 0; color:var(--muted); }
.crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; }
.crumbs li+li::before{ content:'›'; margin-right:6px; }
.game-hero{ display:grid; gap:28px; padding:24px 0 36px; grid-template-columns:1fr; align-items:start; }
@media (min-width: 880px){ .game-hero{ grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); } }
.game-hero h1{ font:400 clamp(20px, 3.8vw, 32px)/1.35 var(--pixel); margin:14px 0 14px; text-wrap:balance; }
.game-hero .tagline{ font-size:1.2rem; font-weight:600; margin:0 0 12px; }
.game-hero .lead{ margin:0 0 22px; color:var(--muted); }
.hero-shot{ border:4px solid var(--line); box-shadow:6px 6px 0 var(--ink); background:var(--g-bg); }
.hero-shot img{ width:100%; image-rendering:auto; }
.actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.ext{ font-size:.95rem; }

.panel{ background:var(--card); border:4px solid var(--line); box-shadow:6px 6px 0 var(--ink); padding:clamp(18px, 3vw, 28px); margin:0 0 32px; }
.panel h2{ font:400 13px/1.5 var(--pixel); margin:0 0 16px; color:var(--g-accent-text, var(--seal)); }
.panel p{ margin:0 0 12px; max-width:72ch; }
.panel p:last-child{ margin-bottom:0; }
.panel ol, .panel ul{ margin:0; padding-left:1.3em; max-width:72ch; }
.panel li{ margin:0 0 6px; }
.cols{ display:grid; gap:0 32px; grid-template-columns:1fr; }
@media (min-width: 880px){ .cols{ grid-template-columns:1fr 1fr; } }
.controls{ width:100%; border-collapse:collapse; font-size:1rem; }
.controls th, .controls td{ text-align:left; vertical-align:top; padding:9px 10px 9px 0; border-bottom:2px dashed color-mix(in srgb, var(--line) 30%, transparent); }
.controls th{ font-weight:650; width:42%; }
.facts{ display:grid; grid-template-columns:auto 1fr; gap:8px 18px; margin:0; }
.facts dt{ font:400 9px/1.9 var(--pixel); color:var(--muted); }
.facts dd{ margin:0; }
.micro{ columns:2 220px; column-gap:28px; }
.micro li{ break-inside:avoid; }
.status{ border-left:8px solid var(--g-bg); padding-left:14px; }
.gallery{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin:0; padding:0; list-style:none; }
.gallery figure{ margin:0; }
.gallery img{ border:3px solid var(--line); background:var(--g-bg); width:auto; max-width:100%; max-height:440px; margin-inline:auto; image-rendering:auto; }
.gallery figcaption{ font-size:.9rem; color:var(--muted); margin-top:8px; }
.back{ margin:8px 0 48px; }

/* ---------- Pie ---------- */
.site-foot{ border-top:4px solid var(--line); padding:26px 0 34px; color:var(--muted); font-size:.95rem; }
.site-foot .wrap{ display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:space-between; }
.sig{ display:flex; align-items:center; gap:10px; font:400 9px/1.7 var(--pixel); }
.sig .seal{ width:28px; height:28px; }
.sig b{ color:var(--text); font-weight:400; }
.about{ max-width:62ch; }

/* ---------- 404 ---------- */
.lost{ text-align:center; padding:80px 0; }
.lost h1{ font:400 clamp(28px, 8vw, 64px)/1.2 var(--pixel); margin:0 0 18px; color:var(--seal); }

@media (max-width: 560px){
  .site-nav{ gap:12px; font-size:9px; }
  .card-label h3{ font-size:11px; }
  .btn{ font-size:11px; }
}
@media (prefers-reduced-motion: reduce){ *{ scroll-behavior:auto !important; } }

/* ---------- Solo en la vista previa de archivo único ---------- */
.pv-player{ position:fixed; inset:0; z-index:50; background:#000; display:flex; flex-direction:column; }
.pv-player[hidden]{ display:none; }
.pv-bar{ display:flex; align-items:center; gap:12px; padding:calc(env(safe-area-inset-top,0px) + 6px) 10px 6px; background:#2b2140; color:#fff8ec; font:400 9px/1 var(--pixel); }
.pv-bar button{ font:inherit; background:#fff8ec; color:#2b2140; border:2px solid #fff8ec; padding:8px 10px; cursor:pointer; }
.pv-player iframe{ flex:1; width:100%; border:0; background:#000; }

[hidden]{display:none!important}