/* Layout: portada con dos fichas de juego que se apilan en el móvil */
:root{
  --bg:#0f120c; --ink:#f3efe1; --muted:#a9ab98; --line:rgba(255,255,255,.1);
  --garden:#86b84e; --shell:#f0a14c; --yellow:#e2cb5f;
  --body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.5;
  padding-block:max(40px,env(safe-area-inset-top,0px)) 48px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
main{max-width:1100px;margin:0 auto;display:grid;gap:32px}
header{display:grid;gap:8px}
.eyebrow{font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:700}
h1{margin:0;font-family:'Grandstander','Trebuchet MS',sans-serif;font-size:clamp(2.6rem,7vw,4.8rem);line-height:1;text-wrap:balance}
header p{margin:0;color:var(--muted);max-width:60ch;font-size:1.05rem}
.games{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px}
.game{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;background:#161a12;transition:transform .15s,border-color .15s}
.game:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.25)}
.game:focus-visible{outline:3px solid var(--shell);outline-offset:3px}
.art{aspect-ratio:16/9;max-width:100%;display:grid;place-items:center;position:relative;overflow:hidden}
.art.caracol{background:radial-gradient(circle at 30% 30%,#4f7a34,#22361a 70%)}
.art.backrooms{background:repeating-linear-gradient(90deg,#cbb65f 0 22px,#bfa955 22px 44px);}
.art.backrooms::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.7))}
.shell{width:34%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe2a6,#f0a14c 35%,#a8501f 75%,#552610);box-shadow:0 14px 30px rgba(0,0,0,.45)}
.tape{position:relative;z-index:1;font-family:'VT323','Courier New',monospace;font-size:clamp(2.2rem,6vw,3.6rem);color:#1a1405;background:rgba(255,253,242,.9);padding:0 .5em;letter-spacing:.06em}
.info{padding:20px 22px 24px;display:grid;gap:10px;align-content:start}
.info h2{margin:0;font-size:1.5rem}
.info p{margin:0;color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-size:.78rem;font-weight:700;padding:.2em .7em;border-radius:99px;background:rgba(255,255,255,.07);color:var(--ink)}
.play{justify-self:start;margin-top:6px;font-weight:700;padding:.55em 1.3em;border-radius:99px;color:#1d1204}
.caracol-btn{background:var(--shell)}
.backrooms-btn{background:var(--yellow)}
footer{color:var(--muted);font-size:.9rem}
@media (prefers-reduced-motion:reduce){.game{transition:none}}