/* LO-E RETRO · estética Game Boy / CRT */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{
  --ink:#f7f7ff;--muted:#aeb2ce;--cian:#55e6ff;--verde:#3ddc97;--violeta:#9a7cff;
  --rojo:#ff4d6d;--amarillo:#ffd166;--line:rgba(255,255,255,.16);
  --consola:#141a2e;--consola2:#0d1222;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:#070a14;color:var(--ink);font-family:"Space Grotesk",system-ui,sans-serif}
body{background:
  radial-gradient(circle at 12% 0%,rgba(85,230,255,.16),transparent 45%),
  radial-gradient(circle at 88% 100%,rgba(154,124,255,.16),transparent 45%),#070a14}
.wrap{width:min(880px,100%);margin:auto;padding:18px 14px 40px}
.top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.marca{display:flex;align-items:center;gap:10px}
.marca img{height:40px;width:auto;display:block;border-radius:8px}
.marca b{font:700 .78rem "DM Mono",monospace;letter-spacing:.12em}
.volver{color:var(--cian);text-decoration:none;font:700 .62rem "DM Mono",monospace;border:1px solid var(--line);border-radius:9px;padding:8px 11px;white-space:nowrap}
.volver:hover{border-color:var(--cian)}
.hero{margin:10px 0 18px}
.hero .eyebrow{margin:0 0 8px;color:var(--amarillo);font:.62rem "DM Mono",monospace;letter-spacing:.16em}
.hero h1{margin:0;font-size:clamp(2rem,8vw,3.2rem);line-height:.94;letter-spacing:-.05em}
.hero h1 span{color:var(--cian)}
.hero p{margin:10px 0 0;color:var(--muted);font-size:.92rem;line-height:1.6;max-width:60ch}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.juego{position:relative;display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,rgba(20,26,46,.95),rgba(13,18,34,.95));cursor:pointer;text-align:left;color:inherit;font:inherit;transition:transform .12s,border-color .12s}
.juego:hover{transform:translateY(-2px);border-color:var(--cian)}
.juego .ico{height:52px;border-radius:9px;display:grid;place-items:center;font:700 1.05rem "DM Mono",monospace;letter-spacing:.05em;color:#0a0e1a;text-shadow:0 1px 0 rgba(255,255,255,.25)}
.juego b{font-size:.82rem;letter-spacing:-.01em}
.juego span{color:var(--muted);font:.58rem "DM Mono",monospace;line-height:1.5}
.juego .ano{position:absolute;top:8px;right:9px;color:#0a0e1a;background:rgba(255,255,255,.6);border-radius:6px;padding:1px 6px;font:700 .5rem "DM Mono",monospace}

/* ---- pantalla del juego ---- */
.pantalla{z-index:20;position:fixed;inset:0;display:none;flex-direction:column;background:#070a14}
.pantalla.on{display:flex}
.barra{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;background:rgba(7,10,20,.92);border-bottom:1px solid var(--line)}
.barra .tit{font:700 .72rem "DM Mono",monospace;letter-spacing:.1em}
.barra .datos{display:flex;gap:8px;font:.58rem "DM Mono",monospace;color:var(--muted)}
.barra .datos b{color:var(--ink)}
.barra button{padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.05);color:var(--ink);font:700 .58rem "DM Mono",monospace;cursor:pointer}
.barra button:hover{border-color:var(--cian);color:var(--cian)}
.lienzo{flex:1;display:grid;place-items:center;padding:12px 8px;min-height:0}
.marco{position:relative;border-radius:14px;padding:10px;background:linear-gradient(180deg,var(--consola),var(--consola2));box-shadow:0 24px 70px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.07)}
canvas{display:block;border-radius:8px;background:#0b0f1a;image-rendering:pixelated;touch-action:none}
.marco:after{content:"";position:absolute;inset:10px;border-radius:8px;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);mix-blend-mode:multiply;opacity:.55}
.mando{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(7,10,20,.92);border-top:1px solid var(--line)}
.cruceta{position:relative;width:132px;height:132px;flex:0 0 auto}
.cruceta button{position:absolute;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.06);color:var(--ink);font-size:.8rem;cursor:pointer}
.cruceta button:active{background:rgba(85,230,255,.25)}
.cruceta .ar{left:44px;top:0}.cruceta .ab{left:44px;top:88px}.cruceta .iz{left:0;top:44px}.cruceta .de{left:88px;top:44px}
.cruceta .ce{left:44px;top:44px;background:rgba(255,255,255,.03);border-style:dashed;pointer-events:none}
.botones{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.botones button{width:58px;height:58px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--ink);font:700 .6rem "DM Mono",monospace;cursor:pointer}
.botones button:active{background:rgba(255,209,102,.25)}
.botones .a{background:rgba(255,77,109,.22)}
.botones .b{background:rgba(154,124,255,.22)}
.botones .peq{width:44px;height:44px;border-radius:10px}
/* modo fácil del emulador: botones más grandes y A bien visible */
.mando.facil .cruceta{width:150px;height:150px}
.mando.facil .cruceta button{width:50px;height:50px;font-size:1rem}
.mando.facil .cruceta .ar,.mando.facil .cruceta .ab{left:50px}
.mando.facil .cruceta .ar{top:0}.mando.facil .cruceta .ab{top:100px}
.mando.facil .cruceta .iz{left:0;top:50px}.mando.facil .cruceta .de{left:100px;top:50px}
.mando.facil .cruceta .ce{left:50px;top:50px}
.mando.facil .botones button{width:76px;height:76px;font-size:.9rem}
.mando.facil .botones .peq{width:56px;height:56px;font-size:.55rem}
.mando.facil #emuA{background:rgba(255,77,109,.42);border-color:#ff4d6d;color:#fff}
.mando.facil #emuB{background:rgba(154,124,255,.35);border-color:#9a7cff}
.aviso{margin:12px 0 0;color:var(--muted);font:.62rem "DM Mono",monospace;line-height:1.7;text-align:center}
.nota{color:#8b93b5;font:.6rem "DM Mono",monospace;line-height:1.7;margin:18px 0 0;text-align:center}
@media (max-width:620px){
  .rejilla{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
  .mando{padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .cruceta{width:120px;height:120px}
  .cruceta button{width:40px;height:40px}
  .cruceta .ar,.cruceta .ab{left:40px}.cruceta .ar{top:0}.cruceta .ab{top:80px}
  .cruceta .iz{left:0;top:40px}.cruceta .de{left:80px;top:40px}
  .cruceta .ce{left:40px;top:40px}
  .botones button{width:52px;height:52px}
  .botones .peq{width:40px;height:40px}
  .mando.facil .cruceta{width:132px;height:132px}
  .mando.facil .cruceta button{width:44px;height:44px}
  .mando.facil .cruceta .ar,.mando.facil .cruceta .ab{left:44px}
  .mando.facil .cruceta .ar{top:0}.mando.facil .cruceta .ab{top:88px}
  .mando.facil .cruceta .iz{left:0;top:44px}.mando.facil .cruceta .de{left:88px;top:44px}
  .mando.facil .cruceta .ce{left:44px;top:44px}
  .mando.facil .botones button{width:64px;height:64px;font-size:.8rem}
  .mando.facil .botones .peq{width:46px;height:46px}
}