:root{
  --bg:#060911; --panel:#0b1220; --elev:#0e1627; --line:#1b2742;
  --muted:#788397; --text:#e8eefc; --brand:#60a5fa; --accent:#a78bfa;
}
:root.light{
  --bg:#f6f7fb; --panel:#ffffff; --elev:#ffffff; --line:#e5e7eb;
  --muted:#6b7280; --text:#0f172a; --brand:#2563eb; --accent:#7c3aed;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.container{max-width:1200px;margin:0 auto;}

/* Header with theme toggle */
.header{position:sticky;top:0;z-index:50;background:color-mix(in oklab, var(--bg) 88%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-inner{display:grid;grid-template-columns:auto 1fr auto;gap:10px;padding:12px 0;align-items:center}
.brand{display:flex;align-items:center;gap:10px;font-weight:900}
.brand-badge{width:30px;height:30px;border-radius:10px;background:conic-gradient(from 180deg,var(--brand),var(--accent),#00f0ff,var(--brand));display:grid;place-items:center;color:#03101a;font-weight:900}
.nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.nav a{padding:8px 12px;border-radius:12px;color:var(--muted);border:1px solid transparent}
.nav a:hover{border-color:var(--line);background:color-mix(in oklab, var(--panel) 94%, transparent)}
.search{justify-self:end;max-width:520px;width:100%}
.search input{width:100%;padding:10px 42px 10px 14px;border-radius:14px;background:var(--panel);border:1px solid var(--line);color:var(--text);outline:none}
.search .icon{position:relative;left:-34px;opacity:.7}
.toggle{margin-left:10px}
.toggle button{padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer}
@media (max-width: 880px){
  .header-inner{grid-template-columns:auto 1fr}
  .nav{grid-column:1/-1}
  .search{grid-column:1/-1}
}

/* Grid & cards */
.grid{display:grid;gap:14px}
.grid.cards-6{grid-template-columns:repeat(6,1fr)}
@media (max-width: 1100px){.grid.cards-6{grid-template-columns:repeat(5,1fr)}}
@media (max-width: 900px){.grid.cards-6{grid-template-columns:repeat(4,1fr)}}
@media (max-width: 700px){.grid.cards-6{grid-template-columns:repeat(3,1fr)}}
@media (max-width: 520px){.grid.cards-6{grid-template-columns:repeat(2,1fr)} 
.card-title{display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;} .card{height: auto;}
.card{height: auto !important;} h1, h2{font-size: 1.5rem;}
}


.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;
      transition:transform .16s ease, box-shadow .16s ease, border-color .2s ease;
      height: 310px;
}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.25);border-color:var(--brand)}
.thumb{aspect-ratio:1/1;background:var(--elev)}
.thumb img{width:100%;height:100%;object-fit:cover;}
.card-body{padding:10px 12px;}

.card-title{
    font-weight:700;
    font-size:14px;
    margin:0 0 6px; 
}

.card-meta{font-size:12px;color:var(--muted);display:flex;justify-content:space-between}

/* Sections */
.section{margin:26px 0}
.section h2{font-size:20px;margin:0 0 12px}
.badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{
  font-size:12px;
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--text);
  padding:10px 10px;
  border-radius:10px;
  cursor:pointer
}

.badge:hover{border-color:var(--brand)}
.kicker{font-size:12px;color:var(--muted);margin-top:2px}
.breadcrumbs{font-size:12px;color:var(--muted);margin:12px 0}
.page-title{display:flex;align-items:center;justify-content:space-between;gap:12px}
.meta-list{display:flex;gap:10px;color:var(--muted);font-size:12px;flex-wrap:wrap}

/* Game page */
.split {display:grid;grid-template-columns:2fr 1fr;gap:16px}

@media (max-width: 900px){
    .split {grid-template-columns:1fr}}
.playbox{background:var(--elev);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.playbox iframe{width:100%;height:540px;border:0;display:block;background:#000}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px}
.table{width:100%;border-collapse:collapse}
.table td{padding:6px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--text)}

/* Footer */
.footer{margin-top:40px;border-top:1px solid var(--line)}
.footer .inner{padding:24px 0;color:var(--muted);font-size:14px;display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between}

/* Skeletons */
.skel{background:linear-gradient(90deg, var(--elev), color-mix(in oklab, var(--elev) 70%, white 10%), var(--elev));background-size:200% 100%;animation:shimmer 1.2s infinite;display:block;border-radius:12px}
.skel.thumb{aspect-ratio:1/1}
.skel.line{height:12px;margin-top:8px;width:80%}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}