/* Reset & Base */
:root{--bg:#0f1422;--card:rgba(255,255,255,.03);--line:rgba(255,255,255,.08);--muted:#9ec7ff}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:#e9eeff;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial}
a{color:inherit;text-decoration:none}
.container{width:min(1150px,92%);margin:0 auto;padding:12px 0}

/* Header */
.site-header{position:sticky;top:0;z-index:90;background:#0d1118;border-bottom:1px solid var(--line)}
.site-header .bar{display:grid;grid-template-columns:220px 1fr 60px;align-items:center;min-height:56px}
.site-logo{display:inline-flex;align-items:center;gap:10px;padding-left:16px}
.site-logo img{height:26px;width:auto;display:block}
.main-nav{display:flex;justify-content:center;gap:36px}
.main-nav a{font-weight:800;color:#8db8ff;opacity:.95;letter-spacing:.2px}
.main-nav a:hover{color:#b9d4ff;opacity:1}
.main-nav a.active{color:#fff}
.site-search{display:flex;justify-content:flex-end;padding-right:12px;position:relative}
.search-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:#161c28;color:#cfe0ff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.search-pop{position:absolute;right:0;top:56px;background:rgba(17,22,33,.98);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.4);padding:8px;display:none}
.search-pop.open{display:block}
.search-pop form{display:flex;gap:8px}
.search-pop input{width:280px;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.02);color:#fff}
.search-pop button{border:1px solid rgba(255,255,255,.12);background:#1b2232;color:#fff;border-radius:10px;padding:10px 14px;cursor:pointer}
@media (max-width:880px){.site-header .bar{grid-template-columns:1fr auto 48px}.main-nav{gap:18px}}

/* Title + stars */
.page-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 12px}
.rating-wrap{display:flex;align-items:center;gap:10px}
.rating{display:inline-flex;gap:6px;user-select:none}
.rating .star{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer}
.rating .star svg{width:20px;height:20px}
.rating .star .base{color:#fff;opacity:.65}
.rating .star .fill{color:#ffd400;opacity:0;transition:opacity .15s ease}
.rating-summary{font-size:.85rem;opacity:.8}

/* Game area */
.game-wrap{position:relative;border-radius:12px;overflow:hidden;background:#000;border:1px solid var(--line)}
.game-iframe{display:block;width:100%;height:560px;border:0}
.game-wrap.fs-active .game-iframe{width:100vw;height:100vh;max-width:100vw;max-height:100vh}

/* Toolbar */
.toolbar{display:flex;justify-content:center;align-items:center;gap:12px;margin:14px 0;padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.toolbar .btn{appearance:none;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:#fff;border-radius:12px;padding:8px 12px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;opacity:.95;transition:.2s}
.toolbar .btn:hover{opacity:1;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2)}
.icon-only{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0}
.share-wrap{position:relative}
.share-pop{position:absolute;top:100%;right:0;margin-top:8px;background:rgba(18,22,35,.98);backdrop-filter:saturate(1.4) blur(6px);border:1px solid var(--line);border-radius:12px;min-width:64px;box-shadow:0 10px 30px rgba(0,0,0,.35);padding:6px;display:none;z-index:30}
.share-pop.open{display:block}
.share-grid{display:flex;flex-direction:column;gap:6px}
.share-btn{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:rgba(26,31,49,.95);display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer}
.share-btn:hover{background:rgba(33,39,63,.98)}
.share-btn svg{width:18px;height:18px}

/* Related + description + video + reply */
.section-title{margin:18px 0 8px;font-weight:800;opacity:.92}
.related-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-bottom:6px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:transform .08s ease, background .2s}
.card:hover{transform:translateY(-2px);background:rgba(255,255,255,.05)}
.card img{display:block;width:100%;height:120px;object-fit:cover}
.card .p{padding:10px;font-weight:700}
.desc-box{margin-top:8px;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.desc-box h2{margin:12px 0 8px;font-size:1.1rem}
.desc-box p{opacity:.92;line-height:1.7}
.video-box{margin-top:12px}
.video-embed{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#000}
.video-embed::before{content:"";display:block;aspect-ratio:16/9}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%}
.reply-box{margin-top:12px}
.reply-box form{display:grid;gap:10px;max-width:720px}
.reply-box textarea{min-height:120px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.02);color:#fff;padding:10px}
.reply-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.reply-box input{border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.02);color:#fff;padding:10px}
.reply-box button{justify-self:start;border:1px solid rgba(255,255,255,.18);background:rgba(20,24,37,.85);color:#fff;padding:10px 14px;border-radius:10px;cursor:pointer}
.reply-box button:hover{background:rgba(26,31,49,.95)}
.footer{margin:22px 0;opacity:.9;text-align:center;font-size:14px}
.footer a{color:var(--muted)}.footer a:hover{text-decoration:underline}

/* Catalog / category pages */
.catalog-toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:12px 0 8px}
.catalog-toolbar .left{display:flex;gap:12px;align-items:center}
.catalog-toolbar select{border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.02);color:#fff;padding:8px 10px}
.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin:10px 0 28px}
.game-card{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.game-card img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.game-card .title{font-weight:800;padding:10px}
.game-card .meta{display:flex;gap:10px;opacity:.8;padding:0 10px 10px}
.sidebar{position:sticky;top:70px;background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:12px;padding:12px}
.catalog-layout{display:grid;grid-template-columns:1fr 300px;gap:24px}
@media (max-width:980px){.catalog-layout{grid-template-columns:1fr}.sidebar{position:static}}
.breadcrumbs{font-size:.9rem;opacity:.8;display:flex;gap:8px;align-items:center}
.breadcrumbs a{color:var(--muted)}
.pagination{display:flex;gap:6px;justify-content:center;margin:16px 0}
.pagination button{border:1px solid rgba(255,255,255,.12);background:rgba(20,24,37,.85);color:#fff;padding:8px 12px;border-radius:8px;cursor:pointer}

.footer .links a{margin:0 6px;}