:root{
  --bg:#13122a;
  --panel:#1b1a36;
  --panel-2:#252347;
  --text:#e6e6ff;
  --muted:#acacd6;
  --brand:#7b5cff;
  --brand-2:#a66cff;
}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial;
  overflow-x:hidden;
}
a{color:inherit}
.app{display:grid; grid-template-columns:260px 1fr; min-height:100vh;}
/* Sidebar */
.sidebar{background:linear-gradient(180deg,#171535 0%,#161433 100%); border-right:1px solid rgba(255,255,255,.04); position:sticky; top:0; height:100vh; padding:20px 16px;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); font-weight:700; letter-spacing:.2px; margin-bottom:18px; padding:6px 8px; border-radius:12px;}
.brand:hover{background:rgba(255,255,255,.04)}
.brand i{font-size:28px; color:#9ee2ff}
.cat-title{font-size:.9rem;color:var(--muted);margin:12px 8px 6px}
.nav-cat{list-style:none;padding:0;margin:0}
.nav-cat li a{display:flex; align-items:center; gap:12px; padding:10px 12px; color:var(--text); text-decoration:none; border-radius:12px; transition:.2s ease; font-weight:500;}
.nav-cat li a:hover{background:rgba(255,255,255,.06)}
.nav-cat li a i{width:26px;height:26px; display:grid; place-items:center; font-size:18px; color:#8bd1ff; background:#0e3c54; border-radius:10px;}
/* Header */
.header{position:sticky; top:0; z-index:10; background:rgba(19,18,42,.8); backdrop-filter: blur(6px); border-bottom:1px solid rgba(255,255,255,.04);}
.searchbar{background:#19183a; border:1px solid rgba(255,255,255,.06); height:46px; color:var(--text); border-radius:16px; padding-left:46px; box-shadow:none; outline:none;}
.search-wrap{position:relative}
.search-wrap i{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted)}
.top-nav a{color:var(--muted); text-decoration:none; font-weight:500; margin-left:18px}
.top-nav a:hover{color:#fff}
/* Hero */
.hero{background:var(--panel); border-radius:22px; padding:28px; margin-top:22px; border:1px solid rgba(255,255,255,.06);}
.hero h2{font-weight:700}
.hero p{color:var(--muted)}
/* CTA */
.cta{border-radius:16px; border:1px solid rgba(255,255,255,.06); background:linear-gradient(90deg, rgba(123,92,255,.25), rgba(166,108,255,.15)); padding:20px 22px; display:flex; align-items:center; justify-content:space-between; gap:20px;}
.cta .btn{border-radius:999px; padding:10px 18px; background:#f0e6ff; color:#413067; font-weight:600; border:0}
/* Section */
.section-title{display:flex; align-items:center; gap:10px; margin:28px 0 14px}
.section-title .spark{width:34px;height:34px;background:#29265a;border:1px solid rgba(255,255,255,.06); border-radius:50%; display:grid; place-items:center; color:#bda8ff}
/* Cards */
.game-card{background:var(--panel-2); border:1px solid rgba(255,255,255,.06); border-radius:18px; overflow:hidden; position:relative; transition: transform .2s ease, box-shadow .2s ease; cursor:pointer;}
.game-card:hover{transform: translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.35)}
.thumb{aspect-ratio:1/1;background:#111; position:relative}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}
.play-btn{position:absolute; right:12px; bottom:-20px; width:46px; height:46px; border-radius:50%; border:none; outline:none; display:grid; place-items:center; color:#fff; background: radial-gradient(circle at 30% 30%, var(--brand-2), var(--brand)); box-shadow:0 10px 18px rgba(123,92,255,.4)}
.game-body{padding:14px}
.game-title{font-size:.98rem; font-weight:600; margin:4px 0 0}
.meta{font-size:.8rem; color:var(--muted)}
/* Tables */
.table-arcade{--bs-table-bg:transparent; color:var(--text)}
.table-arcade thead{color:var(--muted)}
.table-arcade tr{border-color:rgba(255,255,255,.06)}
/* Forms */
.form-arcade .form-control{background:#19183a; border:1px solid rgba(255,255,255,.06); color:var(--text); border-radius:14px; padding:10px 14px}
.form-arcade .btn-brand{background: radial-gradient(circle at 30% 30%, var(--brand-2), var(--brand)); color:white; border:0; border-radius:12px; padding:10px 16px; font-weight:600}
/* Footer spacing */
.page-pad{padding-bottom:3rem}
/* Responsive */
@media (max-width:992px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed; left:-100%; width:280px; z-index:20; transition:left .25s ease}
  .sidebar.open{left:0}
  .sidebar-scrim{position:fixed; inset:0; background:rgba(0,0,0,.5); display:none}
  .sidebar-scrim.show{display:block}
}
.text-muted { color: #ffffff !important; }
.no-games { color: #fff; }
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:9999}
.cookie-inner{
  display:flex;gap:12px;align-items:center;justify-content:space-between;
  background:#1c1f2e;color:#fff;border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:14px 16px;box-shadow:0 10px 30px rgba(0,0,0,.35)
}
.cookie-inner a{color:#9fd4ff}
.cookie-actions{display:flex;gap:8px;flex-shrink:0}

@media (max-width:576px){ .cookie-inner{flex-direction:column;align-items:stretch} .cookie-actions{justify-content:flex-end} }

::placeholder { color: #ffffffcc !important; }

/* Ad placeholder helper */
.ad-ph { padding: 10px; }

/* --- NEW: Sidebar scroll area --- */
.sidebar-scroll{
  max-height: calc(100vh - 340px);
  overflow:auto;
  padding-right: 4px;
  margin-right: -4px;
}
.sidebar-scroll::-webkit-scrollbar{ width:8px }
.sidebar-scroll::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.12);
  border-radius: 8px;
}
@media (max-width:992px){
  .sidebar-scroll{ max-height: calc(100vh - 280px); }
}

/* --- NEW: ad card helper to center ad blocks inside grids --- */
.ad-card{ min-height: 100%; padding: 8px; }
.ad-card .ad-ph{ min-height: 120px; }

/* --- NEW: fullscreen interstitial overlay + blur --- */
.interstitial-overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.72);
  z-index: 5;
  padding: 16px;
}
.interstitial-box{
  background: rgba(28,27,56,.96);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 16px;
  width: min(760px, 96%);
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
}
.game-frame-wrap.blurred{
  filter: blur(4px);
  pointer-events:none;
}
.sidebar { overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.sidebar::-webkit-scrollbar { display: none; }