:root{
  --bg:#0b0b0f;
  --card:#11121a;
  --muted:#8b8ea1;
  --text:#e9e9f1;
  --brand:#6d5efb;
  --brand-2:#a06af9;
  --ok:#5bbb7b;
  --warn:#e2b93b;
  --danger:#ef5d60;
  --border:rgba(255,255,255,.08);
  --card-hover: #171827;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
header.site{
  position:sticky;top:0;z-index:20;backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(180deg, rgba(11,11,15,.9), rgba(11,11,15,.5));
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex;gap:16px;align-items:center;justify-content:space-between;
  max-width:1200px;margin:0 auto;padding:12px 16px;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.4px}
.brand-badge{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-2));display:grid;place-items:center;font-weight:800}
.brand span{opacity:.9}
.searchbar{flex:1;display:flex;gap:10px;align-items:center;max-width:680px}
.searchbar input{flex:1;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#0f1020;color:var(--text);outline:none}
.searchbar button{padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:linear-gradient(135deg,var(--brand),var(--brand-2));color:white;font-weight:600;cursor:pointer}
.filters{display:flex;gap:10px;flex-wrap:wrap}
.filter-chip{padding:8px 10px;border-radius:999px;border:1px solid var(--border);background:#0f1020;color:var(--muted);cursor:pointer}
.filter-chip.active{background:rgba(160,106,249,.18);border-color:rgba(160,106,249,.35);color:#fff}
main{max-width:1200px;margin:0 auto;padding:16px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:720px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(5,1fr)}}
.card{
  background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.card:hover{transform:translateY(-2px);background:var(--card-hover)}
.card .poster{aspect-ratio:2/3;background:#0e0f14;overflow:hidden}
.card .poster img{width:100%;height:100%;object-fit:cover}
.card .meta{padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.card .title{font-weight:700;line-height:1.2}
.card .sub{color:var(--muted);font-size:13px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.badge{padding:2px 8px;border-radius:999px;border:1px solid var(--border);font-size:12px;color:var(--muted)}
.avail{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.avail .pill{display:flex;gap:6px;align-items:center;padding:6px 8px;border-radius:999px;border:1px solid var(--border);color:#d7d7e7;background:#0f1020;font-size:12px}
.pill.ok{border-color:rgba(91,187,123,.4);background:rgba(91,187,123,.08);color:#c5f2d6}
footer.site{
  position:sticky;bottom:0;z-index:10;background:linear-gradient(0deg, rgba(11,11,15,.94), rgba(11,11,15,.6));backdrop-filter:blur(6px);
  border-top:1px solid var(--border);
}
.footer-inner{max-width:1200px;margin:0 auto;padding:8px 16px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.footer-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:#0f1020;color:#e9e9f1;cursor:pointer}
.btn.brand{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:white;border:0}
.btn.ghost{background:transparent}
.details{max-width:980px;margin:0 auto;padding:16px;display:grid;gap:16px}
.details .hero{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:880px){.details .hero{grid-template-columns:280px 1fr}}
.hero .poster{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#0d0e16}
.hero .info{display:flex;flex-direction:column;gap:10px}
h1{margin:0;font-size:28px}
.meta-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;color:var(--muted)}
.rating-10{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.rating-10 .dot{width:20px;height:20px;border-radius:50%;border:1px solid var(--border);background:#0f1020;cursor:pointer}
.rating-10 .dot.active{background:linear-gradient(135deg,var(--brand),var(--brand-2));border-color:transparent}
.rating-10 .score{margin-left:8px;color:#fff;font-weight:700}
.platforms{display:flex;gap:8px;flex-wrap:wrap}
.platform{display:flex;gap:8px;align-items:center;padding:8px;border:1px solid var(--border);border-radius:12px;background:#0f1020}
.platform img{width:96px;height:32px}
.platform .status{font-size:12px;color:var(--muted)}
blockquote.hint{margin:0;padding:10px 12px;border-left:3px solid var(--brand);background:#0f1020;color:#b9b9c9;border-radius:8px}
kbd{border:1px solid var(--border);border-bottom-color:#000;background:#161724;padding:2px 6px;border-radius:6px;color:#d7d7df}
.small{font-size:12px;color:var(--muted)}
.meta-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.meta-grid .item{border:1px solid var(--border);border-radius:10px;padding:8px}
.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}