:root{
  --bg:#12102a;--bg2:#1b1840;--panel:#221e4d;--panel2:#2b2660;--line:#3a3478;
  --text:#f4f2ff;--muted:#a9a3d6;--accent:#7c5cff;--accent2:#ff4fd8;--accent3:#22d3ee;--good:#34d399;--warn:#fbbf24;
  --grad:linear-gradient(135deg,#7c5cff 0%,#ff4fd8 55%,#22d3ee 100%);
  --r:14px;--gap:12px;--tile:160px;--top:64px;
  font-family:ui-rounded,"Nunito","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text)}
body{min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;cursor:pointer}
h1{font-size:clamp(1.4rem,2.6vw,2rem);margin:.6em 0 .3em}
h2{font-size:1.15rem;margin:0}
.sr,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;top:8px;left:8px;z-index:99;background:#fff;color:#000;padding:8px 12px;border-radius:8px}
.wrap{width:100%;max-width:1480px;margin:0 auto;padding:0 20px 40px;flex:1;outline:none}
.js .ssr{display:none} /* crawlable server-injected content; JS renders the real UI */

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:50;height:var(--top);display:flex;align-items:center;gap:16px;padding:0 20px;background:rgba(18,16,42,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.25rem;letter-spacing:-.02em;white-space:nowrap}
.logo b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.search{position:relative;flex:1;max-width:560px;margin:0 auto}
.search svg{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);fill:var(--muted);pointer-events:none}
.search input{width:100%;height:42px;border-radius:999px;border:1px solid var(--line);background:var(--bg2);color:var(--text);padding:0 16px 0 42px;font-size:1rem;outline:none;transition:border-color .15s,box-shadow .15s}
.search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,92,255,.3)}
.suggest{position:absolute;top:48px;left:0;right:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 20px 50px rgba(0,0,0,.5);overflow:hidden;max-height:70vh;overflow-y:auto}
.suggest a{display:flex;align-items:center;gap:12px;padding:8px 12px}
.suggest a:hover,.suggest a[aria-selected=true]{background:var(--panel2)}
.suggest img{width:64px;height:48px;object-fit:cover;border-radius:8px;background:var(--bg2)}
.suggest small{color:var(--muted);display:block}
.suggest .all{justify-content:center;color:var(--accent3);font-weight:700}
.suggest .empty{padding:14px;color:var(--muted)}
.topnav{display:flex;gap:6px}
.topnav a{padding:9px 14px;border-radius:999px;font-weight:700;color:var(--muted);transition:.15s}
.topnav a:hover,.topnav a.on{background:var(--panel);color:var(--text)}
.badge{display:inline-block;min-width:20px;padding:0 6px;border-radius:999px;background:var(--accent2);color:#fff;font-size:.75rem;text-align:center}

/* category chips */
.chips{display:flex;gap:8px;overflow-x:auto;padding:10px 20px;scrollbar-width:none;max-width:1480px;margin:0 auto;width:100%}
.chips::-webkit-scrollbar{display:none}
.chips a{flex:none;padding:7px 14px;border-radius:999px;background:var(--bg2);border:1px solid var(--line);font-weight:700;font-size:.9rem;color:var(--muted);transition:.15s}
.chips a:hover,.chips a.on{color:#fff;background:var(--accent);border-color:var(--accent)}

/* ---------- cards ---------- */
.card{position:relative;display:block;border-radius:var(--r);overflow:hidden;background:var(--panel);aspect-ratio:4/3;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:transform .18s cubic-bezier(.3,1.6,.6,1),box-shadow .18s;isolation:isolate}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .35s,filter .2s;background:linear-gradient(110deg,var(--panel) 30%,var(--panel2) 50%,var(--panel) 70%);background-size:200% 100%;animation:shimmer 1.4s infinite}
.card img.ok{animation:none}
.card .t{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 8px;font-weight:800;font-size:.88rem;line-height:1.2;background:linear-gradient(transparent,rgba(10,8,30,.92));opacity:0;transform:translateY(6px);transition:.18s}
.card .play{position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center;opacity:0;transform:scale(.6);transition:.18s;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.card .play::before{content:"";border-left:16px solid var(--accent);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.card .fav{position:absolute;top:6px;right:6px;width:32px;height:32px;border-radius:50%;border:0;background:rgba(10,8,30,.6);display:grid;place-items:center;opacity:0;transition:.15s;z-index:2}
.card .fav svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2}
.card .fav.on{opacity:1}.card .fav.on svg{fill:var(--accent2);stroke:var(--accent2)}
.card .tagline{position:absolute;top:6px;left:6px;padding:2px 8px;border-radius:999px;font-size:.7rem;font-weight:800;background:var(--grad);color:#fff;text-transform:uppercase;letter-spacing:.04em}
.card:hover,.card:focus-visible{transform:translateY(-4px) scale(1.04);box-shadow:0 14px 34px rgba(124,92,255,.45);z-index:3;outline:none}
.card:hover img,.card:focus-visible img{transform:scale(1.08);filter:brightness(.8) saturate(1.2)}
.card:hover .t,.card:focus-visible .t,.card:hover .play,.card:focus-visible .play,.card:hover .fav,.card:focus-visible .fav{opacity:1;transform:none}
@media (hover:none){.card .t{opacity:1;transform:none;font-size:.78rem}}
@keyframes shimmer{to{background-position:-200% 0}}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--tile),1fr));gap:var(--gap);grid-auto-flow:dense}
.grid.mosaic .card:nth-child(11n+1){grid-column:span 2;grid-row:span 2}
.grid.mosaic .card:nth-child(11n+1) .t{font-size:1.05rem;opacity:1;transform:none}
.row{margin:26px 0}
.row-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px}
.row-h h2{display:flex;align-items:center;gap:8px}
.row-h a{color:var(--accent3);font-weight:700;font-size:.9rem;white-space:nowrap}
.row-h .ico{font-size:1.2rem}
.scroller{position:relative}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:var(--tile);gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 12px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.strip .card{scroll-snap-align:start}
.arrow{position:absolute;top:calc(50% - 24px);width:40px;height:40px;border-radius:50%;border:0;background:var(--panel2);box-shadow:0 4px 14px rgba(0,0,0,.4);z-index:4;font-size:1.2rem;display:none}
.arrow.l{left:-14px}.arrow.r{right:-14px}
@media (hover:hover) and (min-width:800px){.scroller:hover .arrow{display:block}}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:2fr 1fr;gap:var(--gap);margin-top:14px}
.hero-main{position:relative;border-radius:20px;overflow:hidden;min-height:300px;background:var(--panel)}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s;display:flex;align-items:flex-end}
.hero-slide.on{opacity:1;z-index:1}
.hero-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,16,42,.95) 0%,rgba(18,16,42,.55) 50%,transparent 100%)}
.hero-copy{position:relative;z-index:2;padding:28px;max-width:560px}
.hero-copy .k{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--grad);font-weight:800;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}
.hero-copy h2{font-size:clamp(1.4rem,3vw,2.3rem);margin:.35em 0}
.hero-copy p{color:#d9d5ff;margin:0 0 16px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;border:0;background:var(--grad);color:#fff;font-weight:800;font-size:1rem;box-shadow:0 8px 24px rgba(124,92,255,.45);transition:transform .15s}
.btn:hover{transform:translateY(-2px) scale(1.03)}
.btn.ghost{background:var(--panel2);box-shadow:none}
.dots{position:absolute;right:16px;bottom:16px;z-index:3;display:flex;gap:6px}
.dots button{width:10px;height:10px;border-radius:50%;border:0;background:rgba(255,255,255,.4);padding:0}
.dots button.on{background:#fff;width:24px;border-radius:6px}
.hero-side{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:var(--gap)}
.hero-side .card{aspect-ratio:auto}

/* ---------- game page ---------- */
.crumbs{font-size:.88rem;color:var(--muted);margin:14px 0 8px;display:flex;flex-wrap:wrap;gap:6px}
.crumbs a{color:var(--accent3)}
.gp{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.player{position:relative;border-radius:18px;overflow:hidden;background:#000;aspect-ratio:16/9;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.player.portrait{aspect-ratio:auto;height:min(78vh,860px);max-width:min(100%,520px);margin:0 auto}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.cover{position:absolute;inset:0;display:grid;place-items:center;text-align:center;z-index:2;cursor:pointer}
.cover .bgimg{position:absolute;inset:-20px;width:calc(100% + 40px);height:calc(100% + 40px);object-fit:cover;filter:blur(18px) brightness(.45);transform:scale(1.05)}
.cover .inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px}
.cover .thumb{width:200px;aspect-ratio:4/3;object-fit:cover;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.cover h1{margin:0;font-size:clamp(1.2rem,2.5vw,1.8rem)}
.cover .btn{font-size:1.15rem;padding:14px 34px}
.loading{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:rgba(10,8,30,.92);text-align:center;transition:opacity .3s}
.loading.done{opacity:0;pointer-events:none}
.spinner{width:56px;height:56px;border-radius:50%;border:5px solid var(--panel2);border-top-color:var(--accent2);animation:spin .8s linear infinite;margin:0 auto 14px}
.loading .slow{color:var(--muted);font-size:.9rem;margin-top:8px}
@keyframes spin{to{transform:rotate(360deg)}}
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:8px 10px;margin-top:10px}
.toolbar .name{font-weight:800;margin-right:auto;flex:1 1 0;display:flex;align-items:center;gap:10px;min-width:0}
.toolbar .name img{width:40px;height:30px;border-radius:6px;object-fit:cover}
.toolbar .name span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbtn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:10px;border:0;background:var(--panel);font-weight:700;font-size:.9rem;transition:.15s}
.tbtn:hover{background:var(--panel2)}
.tbtn svg{width:18px;height:18px;fill:currentColor}
.tbtn.on{color:var(--accent2)}
.info{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin-top:14px;line-height:1.55}
.info h2{margin-bottom:8px}
.info p{color:#dcd8ff;margin:.4em 0 .9em}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.tags a,.tags span{padding:4px 10px;border-radius:999px;background:var(--panel);font-size:.82rem;color:var(--muted);font-weight:700}
.tags a.cat{background:var(--accent);color:#fff}
.attrib{margin-top:14px;padding:12px 14px;border-radius:12px;background:rgba(34,211,238,.07);border:1px dashed rgba(34,211,238,.4);font-size:.88rem;color:var(--muted)}
.attrib dl{display:grid;grid-template-columns:max-content 1fr;gap:4px 12px;margin:6px 0 0}
.attrib dt{font-weight:800;color:var(--text)}.attrib dd{margin:0;word-break:break-word}
.attrib .pending{color:var(--warn);font-weight:700}
.side h2{margin:0 0 10px}
.side .grid{--tile:140px;grid-template-columns:1fr 1fr}
.player.fake-fs{position:fixed;inset:0;z-index:100;border-radius:0;height:100%;max-width:none;aspect-ratio:auto}
.fs-exit{display:none;position:absolute;top:10px;right:10px;z-index:5;width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,.6);font-size:1.2rem}
.player.fake-fs .fs-exit{display:block}

/* ---------- misc pages ---------- */
.page-h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.page-h p{color:var(--muted);margin:0 0 6px}
.cat-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--gap);margin-top:14px}
.cat-tile{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/9;background:var(--panel);transition:transform .18s}
.cat-tile img{width:100%;height:100%;object-fit:cover;filter:brightness(.55) saturate(1.2)}
.cat-tile div{position:absolute;inset:auto 0 0 0;padding:14px;font-weight:800;font-size:1.15rem}
.cat-tile small{display:block;font-weight:600;color:#cfc9ff;font-size:.8rem}
.cat-tile:hover{transform:translateY(-3px) scale(1.02)}
.pager{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:24px 0}
.pager a,.pager span{min-width:40px;height:40px;display:grid;place-items:center;padding:0 12px;border-radius:10px;background:var(--panel);font-weight:800}
.pager .on{background:var(--accent)}
.pager .gap{background:none}
.more{display:flex;justify-content:center;margin:20px 0}
.sentinel{height:1px}
.empty-state{text-align:center;color:var(--muted);padding:40px 10px}
.empty-state .btn{margin-top:10px}
.nf{text-align:center;padding:30px 10px 0}
.nf h1{font-size:clamp(2rem,6vw,3.6rem);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nf p{color:var(--muted)}
.big-search{display:flex;gap:8px;margin:12px 0 4px}
.big-search input{flex:1;height:50px;border-radius:14px;border:1px solid var(--line);background:var(--bg2);color:var(--text);padding:0 16px;font-size:1.1rem;outline:none}
.big-search input:focus{border-color:var(--accent)}
.notice{margin:14px 0 0;padding:10px 14px;border-radius:12px;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.4);color:#fde68a;font-size:.88rem}
.skeleton-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--tile),1fr));gap:var(--gap);margin-top:20px}
.skeleton-grid i{aspect-ratio:4/3;border-radius:var(--r);background:linear-gradient(110deg,var(--panel) 30%,var(--panel2) 50%,var(--panel) 70%);background-size:200% 100%;animation:shimmer 1.4s infinite}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:var(--panel2);padding:10px 18px;border-radius:999px;font-weight:700;opacity:0;transition:.25s;z-index:200;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.toast.on{opacity:1;transform:translateX(-50%)}
.footer{border-top:1px solid var(--line);background:var(--bg2);margin-top:30px}
.footer-in{max-width:1480px;margin:0 auto;padding:24px 20px;display:grid;gap:10px;color:var(--muted);font-size:.9rem}
.footer-in>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.footer-in>div p{margin:0;flex-basis:100%}
.footer nav{display:flex;gap:16px;flex-wrap:wrap}.footer nav a{color:var(--text);font-weight:700}
.fine{font-size:.78rem;margin:0}
.bottomnav{display:none}

/* ---------- responsive ---------- */
@media (max-width:1100px){.gp{grid-template-columns:1fr}.side .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}
@media (max-width:900px){.hero{grid-template-columns:1fr}.hero-side{grid-template-columns:repeat(4,1fr);grid-template-rows:auto}.hero-side .card{aspect-ratio:4/3}}
@media (max-width:760px){
  :root{--tile:118px;--gap:9px;--top:56px}
  .wrap{padding:0 12px 90px}
  .topbar{padding:0 12px;gap:10px}
  .logo span,.topnav{display:none}
  .chips{padding:8px 12px}
  .hero-main{min-height:230px}
  .hero-copy{padding:18px}.hero-copy p{display:none}
  .hero-side{grid-template-columns:repeat(2,1fr)}
  .grid.mosaic .card:nth-child(11n+1){grid-column:span 2;grid-row:span 2}
  .player{border-radius:12px;margin:0 -12px;border-radius:0}
  .player.portrait{height:72vh}
  .player:not(.portrait){aspect-ratio:4/3}
  .cover .thumb{width:110px;border-radius:12px}
  .cover .inner{gap:8px;padding:10px}
  .cover h1{font-size:1.15rem}
  .cover .btn{padding:11px 26px;font-size:1rem}
  .toolbar{gap:4px}.tbtn{padding:0 10px}
  .toolbar .tlabel{display:none}
  .bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(27,24,64,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:6px 0 calc(6px + env(safe-area-inset-bottom))}
  .bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.7rem;font-weight:700;color:var(--muted)}
  .bottomnav svg{width:24px;height:24px;fill:currentColor}
  .bottomnav a.on{color:#fff}.bottomnav a.on svg{fill:var(--accent2)}
  .footer{margin-bottom:64px}
  .toast{bottom:84px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.credit{margin:10px 2px 0;font-size:.9rem;color:var(--muted)}
.credit a{color:var(--accent3);font-weight:700}
.credit .sh{color:var(--good);font-weight:800}
.asset-credits ul{margin:0;padding-left:18px}.asset-credits li{margin:2px 0}