/* ============================================================
   MyGames · estilos
   Paleta: fondo azul-noche profundo, acento lima eléctrico +
   magenta arcade. Tipografía Space Grotesk (display) + Inter.
   ============================================================ */
:root{
  --bg:#0a0e1a;
  --bg2:#111726;
  --card:#161d30;
  --line:#232c44;
  --text:#eef2fb;
  --muted:#8b97b4;
  --lime:#c6ff3f;
  --magenta:#ff3fa4;
  --cyan:#3fe0ff;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ---------- Header ---------- */
.site-head{
  background:linear-gradient(180deg,var(--bg2),var(--bg));
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.head-inner{
  max-width:1180px;margin:0 auto;padding:14px 18px;
  display:flex;align-items:center;gap:18px;justify-content:space-between;
}
.logo{display:flex;align-items:center;gap:9px;font-family:'Space Grotesk',sans-serif;font-size:1.4rem;font-weight:700;}
.logo-mark{
  display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  background:var(--lime);color:#0a0e1a;font-size:.9rem;transform:rotate(0deg);
}
.logo-txt b{color:var(--lime)}
.search{display:flex;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:999px;overflow:hidden;flex:1;max-width:420px;}
.search input{flex:1;background:none;border:none;outline:none;color:var(--text);padding:10px 16px;font-size:.92rem;}
.search input::placeholder{color:var(--muted)}
.search button{background:none;border:none;color:var(--lime);font-size:1.3rem;padding:0 14px;cursor:pointer;}
.cats{
  max-width:1180px;margin:0 auto;padding:0 18px 12px;
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
}
.cats::-webkit-scrollbar{display:none}
.cats a{
  white-space:nowrap;font-size:.85rem;font-weight:500;color:var(--muted);
  padding:6px 14px;border-radius:999px;border:1px solid var(--line);transition:.15s;
}
.cats a:hover{color:var(--bg);background:var(--lime);border-color:var(--lime)}

/* ---------- Layout ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:24px 18px 40px}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(600px 200px at 15% 0%,rgba(198,255,63,.14),transparent),
    radial-gradient(500px 200px at 85% 100%,rgba(255,63,164,.14),transparent),
    var(--bg2);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 30px;margin-bottom:30px;
}
.hero h1{
  font-family:'Space Grotesk',sans-serif;font-size:2rem;margin:0 0 8px;line-height:1.1;
}
.hero h1 span{color:var(--lime)}
.hero p{color:var(--muted);margin:0;max-width:560px}

/* ---------- Secciones ---------- */
.section{margin-bottom:36px}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.section-head h2{
  font-family:'Space Grotesk',sans-serif;font-size:1.15rem;margin:0;
  display:flex;align-items:center;gap:9px;
}
.section-head h2::before{content:"";width:8px;height:20px;border-radius:3px;background:var(--magenta)}
.section-head .more{font-size:.82rem;color:var(--muted)}
.section-head .more:hover{color:var(--lime)}

/* ---------- Grilla de juegos ---------- */
.grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;transition:transform .16s,border-color .16s;
}
.card:hover{transform:translateY(-3px);border-color:var(--lime)}
.card-img{aspect-ratio:4/3;overflow:hidden;background:#0c1120}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-title{
  padding:9px 11px;font-size:.85rem;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- Página de juego ---------- */
.play-wrap{max-width:960px;margin:0 auto}
.play-title{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;margin:0 0 14px}
.play-frame{
  position:relative;width:100%;aspect-ratio:4/3;max-height:70vh;
  background:#000;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
.play-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.play-meta{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0;color:var(--muted);font-size:.85rem}
.play-meta .tag{background:var(--card);border:1px solid var(--line);padding:4px 12px;border-radius:999px}
.play-desc{color:var(--muted);margin:16px 0 30px;line-height:1.7}

/* ---------- Bloques de texto (SEO / legales) ---------- */
.prose{max-width:820px;color:#cdd5e8;line-height:1.75}
.prose h1{font-family:'Space Grotesk',sans-serif;font-size:1.7rem;color:var(--text)}
.prose h2{font-family:'Space Grotesk',sans-serif;font-size:1.2rem;color:var(--text);margin-top:28px}
.prose a{color:var(--lime)}

/* ---------- Footer ---------- */
.site-foot{border-top:1px solid var(--line);background:var(--bg2);margin-top:40px}
.foot-inner{max-width:1180px;margin:0 auto;padding:26px 18px;display:flex;flex-direction:column;gap:12px}
.foot-brand{font-family:'Space Grotesk',sans-serif}
.foot-brand b,.logo-txt b{color:var(--lime)}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
.foot-links a{color:var(--muted);font-size:.86rem}
.foot-links a:hover{color:var(--lime)}
.foot-copy{color:var(--muted);font-size:.78rem}

/* ---------- Estados vacíos ---------- */
.empty{text-align:center;color:var(--muted);padding:50px 20px}
.empty b{color:var(--text)}

@media(max-width:600px){
  .hero h1{font-size:1.5rem}
  .grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .head-inner{flex-wrap:wrap}
}