/* ==========================================================
   Avalurna Games — estilo retro pixel (VGA / DOS, años 90)
   ========================================================== */
:root{
  --night:#0c1220;      /* fondo del logo */
  --night-2:#121a2e;
  --night-3:#1b2640;
  --line:#2c3a5c;
  --cream:#f3e6c4;      /* letras del logo */
  --gold:#e2b25a;       /* estrella del logo */
  --gold-2:#ffd27a;
  --sky:#8fa3c8;        /* "GAMES" del logo */
  --dim:#a9b3c9;
  --shire:#8cc06b;
  --shire-dark:#2f4a22;
  --orange:#f07f2a;     /* Outmapped */
  --teal:#3e9c94;
  --red:#d9574a;
  --px:4px;             /* tamaño de "píxel" para bordes */
  --font-pixel:"Jersey 15", "Avalurna VGA", monospace;
  --font-mono:"Avalurna VGA", "Courier New", monospace;
  --font-tiny:"Avalurna VGA", "Courier New", monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0;background:var(--night);color:var(--cream);
  font-family:var(--font-mono);font-size:1.25rem;line-height:1.55;font-synthesis:none;
  image-rendering:auto;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,b,strong{font-weight:400}
strong,b{color:var(--cream)}
a{color:var(--gold-2)}
a:hover{color:#fff}
::selection{background:var(--gold);color:var(--night)}

/* ---------- capas de ambiente ---------- */
#stars{position:fixed;inset:0;width:100%;height:100%;z-index:-2;image-rendering:pixelated}
.scanlines{pointer-events:none;position:fixed;inset:0;z-index:50;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.13) 2px 3px);
  mix-blend-mode:multiply}

/* ---------- barra de menú tipo DOS ---------- */
.menubar{position:sticky;top:0;z-index:40;background:var(--cream);color:var(--night);
  display:flex;align-items:center;gap:0;font-family:var(--font-pixel);font-size:1.45rem;
  box-shadow:0 var(--px) 0 var(--night),0 calc(var(--px)*2) 0 rgba(0,0,0,.35)}
.menubar .brand{display:flex;align-items:center;gap:.5rem;padding:.35rem .9rem;background:var(--night);color:var(--cream);text-decoration:none;letter-spacing:.04em}
.menubar .brand img{width:26px;height:26px;image-rendering:auto}
.menubar nav{display:flex;flex-wrap:wrap;flex:1}
.menubar nav a{color:var(--night);text-decoration:none;padding:.35rem .8rem}
.menubar nav a:hover,.menubar nav a:focus-visible{background:var(--night);color:var(--cream);outline:none}
.menubar nav a .hk{text-decoration:underline;text-underline-offset:3px}
.lang{display:flex;margin-right:.4rem}
.lang button{font:inherit;font-size:1.2rem;border:0;background:transparent;color:var(--night);padding:.3rem .55rem;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--night);color:var(--gold-2)}
.lang button:focus-visible{outline:2px dashed var(--night);outline-offset:-4px}

/* ---------- contenedores ---------- */
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
section{padding:4.5rem 0}
.section-title{font-family:var(--font-pixel);font-weight:400;font-size:clamp(2.6rem,5.5vw,3.8rem);margin:0 0 .3rem;line-height:1;color:var(--cream);text-shadow:var(--px) var(--px) 0 #000}
.kicker{font-family:var(--font-tiny);font-size:1rem;letter-spacing:.14em;color:var(--sky);text-transform:uppercase;margin:0 0 1rem}
.lead{color:var(--dim);max-width:62ch;margin:.4rem 0 0}

/* ---------- ventana VGA (marco pixelado) ---------- */
.win{position:relative;background:var(--night-2);
  box-shadow:
    0 0 0 var(--px) #000,
    0 0 0 calc(var(--px)*2) var(--cream),
    0 0 0 calc(var(--px)*3) #000,
    calc(var(--px)*3) calc(var(--px)*4) 0 calc(var(--px)*2) rgba(0,0,0,.55);
  margin:calc(var(--px)*3)}
.win-title{display:flex;justify-content:space-between;align-items:center;background:var(--cream);color:var(--night);
  font-family:var(--font-mono);font-size:1rem;padding:.1rem .6rem}
.win-title .dots{display:flex;gap:6px}
.win-title .dots i{width:10px;height:10px;background:var(--night);display:block}
.win-body{padding:1.4rem}

/* ---------- botones chunky ---------- */
.btn{--c:var(--gold);--t:var(--night);display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-pixel);font-weight:400;font-size:1.55rem;line-height:1;text-decoration:none;
  color:var(--t);background:var(--c);padding:.65rem 1.2rem;border:0;cursor:pointer;position:relative;
  box-shadow:inset calc(var(--px)*-1) calc(var(--px)*-1) 0 rgba(0,0,0,.35),inset var(--px) var(--px) 0 rgba(255,255,255,.45),
    0 0 0 var(--px) #000,var(--px) calc(var(--px)*2) 0 var(--px) #000;
  transition:transform .06s steps(1)}
.btn:hover{color:var(--t);filter:brightness(1.08)}
.btn:active{transform:translate(var(--px),var(--px));box-shadow:inset var(--px) var(--px) 0 rgba(0,0,0,.35),0 0 0 var(--px) #000}
.btn:focus-visible{outline:3px dashed var(--cream);outline-offset:8px}
.btn.ghost{--c:var(--night-3);--t:var(--cream)}
.btn.green{--c:var(--shire);--t:#13210c}
.btn.orange{--c:var(--orange);--t:#1c0c02}
.btn .ico{font-family:var(--font-mono);font-size:1rem}
.btn small{font-family:var(--font-mono);font-weight:400;font-size:1rem;opacity:.8}

/* ---------- héroe ---------- */
.hero{min-height:calc(100svh - 40px);display:grid;place-items:center;text-align:center;padding:3rem 0 4rem}
.hero .logo{width:min(640px,88vw);margin:0 auto;filter:drop-shadow(0 0 22px rgba(226,178,90,.25))}
.hero h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hero .tag{font-family:var(--font-pixel);font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1.1;color:var(--cream);margin:1.6rem auto .4rem;max-width:none}
.hero .sub{color:var(--sky);margin:0 auto 2.2rem;max-width:46ch}
.press{font-family:var(--font-tiny);font-size:1rem;color:var(--gold-2);margin-top:2.6rem;letter-spacing:.1em;animation:blink 1.1s steps(1) infinite}
.press a{color:inherit;text-decoration:none}
@keyframes blink{50%{opacity:0}}
.hero .ctas{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap}

/* ---------- tarjetas de juego ---------- */
.games{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:2.2rem;margin-top:2.4rem}
.card{display:flex;flex-direction:column}
.card .win-body{flex:1;display:flex;flex-direction:column}
.card .win-body .btn{align-self:flex-start;margin-top:auto}
.card .shot{display:block;aspect-ratio:16/9;overflow:hidden;background:#000;position:relative}
.card .shot img,.card .shot video{width:100%;height:100%;object-fit:cover}
.card .shot .badge{position:absolute;left:12px;top:12px}
.badge{display:inline-block;font-family:var(--font-tiny);font-size:1rem;padding:.2rem .55rem;background:var(--night);color:var(--cream);box-shadow:0 0 0 3px #000,0 0 0 6px currentColor;letter-spacing:.06em;line-height:1.3}
.badge.free{color:var(--shire)}
.badge.dev{color:var(--orange)}
.card h3{font-family:var(--font-pixel);font-weight:400;font-size:2.4rem;margin:0 0 .3rem;line-height:1.05}
.card p{margin:.3rem 0 1.2rem;color:var(--dim)}
.card .meta{display:flex;flex-wrap:wrap;gap:.4rem 1rem;color:var(--sky);font-size:1rem;margin-bottom:1.2rem}
.card .meta span::before{content:"■ ";color:var(--gold)}

/* ---------- Outmapped teaser ---------- */
.om{background:linear-gradient(180deg,transparent,rgba(240,127,42,.07) 30%,rgba(240,127,42,.07) 70%,transparent)}
.om-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:2.4rem;align-items:center}
.om-logo{width:min(420px,100%);margin-bottom:1rem}
.om .quote{font-family:var(--font-pixel);font-size:1.8rem;line-height:1.1;color:var(--orange);border-left:var(--px) solid var(--orange);padding-left:1rem;margin:1.4rem 0}
.pillars{list-style:none;padding:0;margin:1.2rem 0;display:grid;gap:.45rem}
.pillars li{padding-left:1.8rem;position:relative}
.pillars li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:12px;background:var(--teal);box-shadow:3px 3px 0 #000}
.om .win{background:#0d0905}

/* ---------- estudio ---------- */
.studio{display:grid;grid-template-columns:auto 1fr;gap:2.2rem;align-items:start}
.studio .avatar{width:150px;height:150px;background:var(--night-3);display:grid;place-items:center}
.studio .avatar img{width:96px}
.stats{display:flex;flex-wrap:wrap;gap:1rem 2.2rem;margin-top:1.4rem}
.stat b{display:block;font-family:var(--font-pixel);font-size:3.2rem;color:var(--gold-2);line-height:1}
.stat span{color:var(--sky);font-size:1rem}

/* ---------- contacto ---------- */
.contact{text-align:center}
.mail{font-family:var(--font-pixel);font-size:clamp(1.7rem,5vw,2.8rem);color:var(--gold-2);word-break:break-all;text-decoration:none;display:inline-block;margin:1rem 0 .4rem;border-bottom:var(--px) solid var(--gold)}
.mail:hover{color:#fff;border-color:#fff}

/* ---------- pie ---------- */
footer{padding:2.4rem 0 3rem;border-top:var(--px) solid var(--line);color:var(--sky);font-size:1rem;margin-top:2rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center}
footer a{color:var(--cream)}
footer nav{display:flex;gap:1.2rem;flex-wrap:wrap}

/* ==========================================================
   Página de El bolsillo de Bilbo (tema Comarca)
   ========================================================== */
.shire-page{--bg:#141d10}
.shire-hero{position:relative;min-height:min(86svh,820px);display:grid;align-items:end;overflow:hidden;border-bottom:var(--px) solid #000}
.shire-hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%}
.shire-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,18,32,.15) 0%,rgba(12,18,32,.1) 30%,rgba(12,18,32,.78) 66%,var(--night) 100%)}
.shire-hero .wrap{position:relative;z-index:2;padding-bottom:2.6rem}
.shire-hero .logo-b{width:min(560px,86vw);filter:drop-shadow(4px 4px 0 rgba(0,0,0,.6))}
.shire-hero .tagline{font-family:var(--font-pixel);font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.1;max-width:40ch;margin:.8rem 0 1.4rem;text-shadow:3px 3px 0 #000}
.shire-hero .ctas{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center}
.hero-art-credit{display:none}

.two{display:grid;grid-template-columns:1.3fr 1fr;gap:2.4rem;align-items:start}
.features{list-style:none;padding:0;margin:1rem 0;display:grid;gap:.6rem}
.features li{padding-left:2rem;position:relative}
.features li::before{content:"✦";position:absolute;left:0;color:var(--gold)}

.trailer video{width:100%;display:block;background:#000;aspect-ratio:16/9}

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:1.2rem;margin-top:2rem}
.gallery button{padding:0;border:0;background:#000;cursor:zoom-in;aspect-ratio:16/9;overflow:hidden;
  box-shadow:0 0 0 var(--px) #000,0 0 0 calc(var(--px)*2) var(--line);transition:box-shadow .1s steps(1)}
.gallery button:hover,.gallery button:focus-visible{box-shadow:0 0 0 var(--px) #000,0 0 0 calc(var(--px)*2) var(--gold);outline:none}
.gallery img{width:100%;height:100%;object-fit:cover}

dialog.lightbox{padding:0;border:0;background:transparent;max-width:min(1280px,96vw);width:100%}
dialog.lightbox::backdrop{background:rgba(5,8,14,.92)}
dialog.lightbox img{width:100%;box-shadow:0 0 0 var(--px) #000,0 0 0 calc(var(--px)*2) var(--cream)}
dialog.lightbox .close{position:absolute;top:-3rem;right:0}

.download .win-body{display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:center}
.download .icon{width:128px;height:128px;image-rendering:auto}
.dl-meta{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;color:var(--sky);font-size:1rem;margin:.6rem 0 1rem}
.hash{font-family:var(--font-mono);font-size:1rem;color:var(--dim);word-break:break-all;background:#070b14;padding:.5rem .7rem;margin-top:1rem}
.note{font-size:1rem;color:var(--dim);margin-top:1rem}
.note b{color:var(--cream)}

.controls{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.2rem;margin:0}
.controls dt{font-family:var(--font-pixel);font-size:1.5rem;line-height:1.2;color:var(--gold-2)}
.controls dd{margin:0;color:var(--dim)}

.legal-box{background:#0a0f1a;box-shadow:0 0 0 var(--px) #000,0 0 0 calc(var(--px)*2) var(--red);padding:1.6rem;margin:calc(var(--px)*2)}
.legal-box h2{font-family:var(--font-pixel);font-weight:400;color:#ffb3a8;margin:0 0 .6rem;font-size:2.2rem}
.legal-box p,.legal-box li{color:var(--dim);font-size:1rem}
.legal-box strong{color:var(--cream)}

/* ---------- textos legales ---------- */
.prose{max-width:72ch}
.prose h2{font-family:var(--font-pixel);font-weight:400;font-size:2.2rem;margin:2.4rem 0 .5rem;color:var(--gold-2)}
.prose p,.prose li{color:var(--dim)}
.prose strong{color:var(--cream)}

/* ---------- utilidades ---------- */
.center{text-align:center}
.mt{margin-top:2rem}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--night);padding:.5rem 1rem;z-index:100}
.skip:focus{left:8px;top:8px}
[hidden]{display:none!important}

/* ---------- móvil ---------- */
@media (max-width:820px){
  body{font-size:1.125rem}
  .om-grid,.two,.studio{grid-template-columns:1fr}
  .menubar{flex-wrap:wrap}
  .menubar nav a{padding:.35rem .55rem}
  .download .win-body{grid-template-columns:1fr}
  .download .icon{width:96px;height:96px}
  .win-body{padding:1.1rem}
  section{padding:3.2rem 0}
  .studio .avatar{width:110px;height:110px}
  .studio .avatar img{width:70px}
}
@media (hover:none){.press{display:none}}
@media (max-width:480px){
  :root{--px:3px}
  .menubar nav{flex-wrap:nowrap}
  .menubar .brand{padding:.35rem .6rem}
  .menubar .brand span{display:none}
  .menubar nav a.opt{display:none}
  .btn{font-size:1.1rem;padding:.6rem 1rem}
}

.btn.soon{--c:#3a4a3a;--t:#cfe3c2;cursor:default;filter:none}
.btn.soon:active{transform:none}

/* ---------- sobre mí ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;margin-top:3rem;align-items:start}
.about .win-body p{margin:.2rem 0 .9rem}
.about .sign{font-family:var(--font-pixel);font-size:1.8rem;color:var(--gold-2);margin-top:.4rem}
.menubar .short{display:none}
@media (max-width:820px){.about{grid-template-columns:1fr}}
@media (max-width:600px){.menubar .long{display:none}.menubar .short{display:inline}}