/* style.css - modern layout with dark/light toggle */
:root{
  --bg:#0b0f17; --panel:#0f1720; --muted:#9aa4b2; --accent1:#d946ef; --accent2:#6366f1;
  --glass: rgba(255,255,255,0.03);
  --card-shadow: 0 6px 20px rgba(2,6,23,0.6);
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#03040a,#000);color:#e6eef8;font-family:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;min-height:100vh;transition:background .25s,color .25s}
body.light{background:linear-gradient(180deg,#f6f7fb,#fff);color:#0b1220}
.app{display:flex;min-height:100vh}
.sidebar{width:260px;background:linear-gradient(180deg,var(--panel),#071026);padding:20px;display:flex;flex-direction:column;gap:18px;border-right:1px solid rgba(255,255,255,0.03)}
body.light .sidebar{background:linear-gradient(180deg,#fff,#f3f4f6);border-right:1px solid rgba(0,0,0,0.06)}
.brand{display:flex;gap:12px;align-items:center}
.brand .logo{width:44px;height:44px;border-radius:10px;background:linear-gradient(90deg,var(--accent1),var(--accent2));display:grid;place-items:center;box-shadow:0 10px 30px rgba(99,102,241,0.08)}
.brand h1{margin:0;font-size:18px}
.sub{font-size:12px;color:var(--muted)}

nav#menu{display:flex;flex-direction:column;gap:8px}
nav#menu button{background:transparent;border:none;color:var(--muted);padding:10px;border-radius:8px;text-align:left;cursor:pointer}
nav#menu button.active, nav#menu button:hover{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:white}

.login{margin-top:auto}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);padding:8px 10px;border-radius:8px;cursor:pointer}
.sidefoot{font-size:13px;color:var(--muted);}

/* main */
.main{flex:1;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid rgba(255,255,255,0.03);background:linear-gradient(90deg,rgba(255,255,255,0.02),transparent)}
.topbar input{flex:1;background:var(--glass);border:1px solid rgba(255,255,255,0.03);padding:10px 12px;border-radius:10px;color:inherit}
.top-actions{display:flex;align-items:center;gap:10px}
.btn{background:linear-gradient(90deg,var(--accent1),var(--accent2));border:none;padding:8px 12px;border-radius:8px;color:white;cursor:pointer}

/* hero */
.hero{display:flex;gap:20px;padding:28px 36px;align-items:center}
.hero-left{flex:1}
.hero-right{width:420px}
.grad{background:linear-gradient(90deg,#8b5cf6,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:#cbd5e1}

/* filters & grid */
.content{padding:0 36px 36px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.filter-pill{background:var(--glass);padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,0.03);cursor:pointer;color:var(--muted)}
.filter-pill.active{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:white}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}

/* card */
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.03);box-shadow:var(--card-shadow)}
.card-hero{height:140px;background:linear-gradient(90deg,#3b82f6,#8b5cf6);display:flex;align-items:flex-end;padding:12px;color:white}
.card-body{padding:14px;text-align:left}
.card-title{margin:0;font-size:18px}
.card-tagline{color:var(--muted);font-size:13px;margin-top:6px}
.card-genres{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}
.card-genres .g{background:rgba(255,255,255,0.04);padding:4px 8px;border-radius:8px;font-size:12px;color:var(--muted)}
.card-row{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.card-actions{display:flex;gap:8px;margin-top:12px}
.card-actions .btn{flex:1}
.card-actions .btn-ghost{flex:1}

/* modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(2,6,23,0.7);z-index:9999}
.modal.hidden{display:none}
.modal-inner{background:#071025;padding:18px;border-radius:12px;width:min(960px,95%);max-height:90vh;overflow:auto;border:1px solid rgba(255,255,255,0.04);position:relative}
.close{position:absolute;right:20px;top:18px;border:none;background:transparent;color:var(--muted);font-size:20px;cursor:pointer}

/* mini-games area */
.game-area{padding:12px;background:#071028;border-radius:10px;color:#fff}
.game-canvas{display:block;margin:0 auto;background:#000;border-radius:6px}

/* responsive */
@media (max-width:900px){
  .sidebar{display:none}
  .hero-right{display:none}
  .topbar input{width:100%}
}

/* glow for favicon image */
.logo img { filter: drop-shadow(0 6px 20px rgba(217,70,239,0.35)); width:44px; height:44px; border-radius:10px; }