:root{
  --bg-card:#131318;
  --bg-card-2:#1a1a20;
  --ac:#635bff;
  --ac-light:#93c5fd;
  --ac-soft:rgba(99,91,255,.10);
  --ac-glow:rgba(99,91,255,.35);
  --green-soft:rgba(34,197,94,.10);
  --green-border:rgba(34,197,94,.25);
  --red-soft:rgba(239,68,68,.10);
  --red-border:rgba(239,68,68,.25);
  --yellow-soft:rgba(245,158,11,.10);
  --yellow-border:rgba(245,158,11,.25);
  --d:150ms;
  --d-slow:400ms;
}
html{scroll-behavior:smooth}
body{overflow-x:hidden;min-height:100vh;position:relative;z-index:0}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--b2);border-radius:10px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--b3)}

/* NAV */

/* BACK */
.backbar{padding:88px 48px 0;max-width:1200px;margin:0 auto;position:relative;z-index:1}
.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--mt);font-size:13px;font-weight:500;text-decoration:none;cursor:pointer;transition:color var(--d) var(--ease),border-color var(--d) var(--ease),background var(--d) var(--ease);background:var(--bg-elev);border:1px solid var(--b1);padding:7px 14px;border-radius:8px}
.back-link:hover{color:var(--tx);border-color:var(--ac);background:var(--ac-soft)}
.back-link svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;transition:transform var(--d) var(--ease)}
.back-link:hover svg{transform:translateX(-3px)}

/* HERO */
.detail-hero{max-width:1200px;margin:0 auto;padding:20px 48px 0;position:relative;z-index:1}
.detail-banner{height:340px;border-radius:16px;position:relative;overflow:hidden;border:1px solid var(--b1);box-shadow:var(--shadow-md);animation:fadeUp .4s var(--ease) both}
.detail-banner-bg{position:absolute;inset:0;transition:transform 6s ease}
.detail-banner:hover .detail-banner-bg{transform:scale(1.05)}
.detail-banner-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,1) 0%,rgba(10,10,10,.4) 50%,rgba(10,10,10,0) 100%)}
.detail-hero-content{position:absolute;bottom:0;left:0;right:0;padding:32px 40px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;z-index:2}
.dbadge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:6px;letter-spacing:.5px;text-transform:uppercase}
.dbadge.online{background:var(--green-soft);border:1px solid var(--green-border);color:var(--green)}
.dbadge.new{background:var(--green);color:#fff}
.dbadge.hot{background:var(--ac);color:#fff}
.dbadge.genre{background:var(--bg-elev);border:1px solid var(--b1);color:var(--mt)}
.detail-badges-row{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.detail-title{font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-1.5px;line-height:1.1;color:var(--tx);margin-bottom:8px}
.detail-meta-row{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--mt);font-weight:500;flex-wrap:wrap}
.detail-meta-row .dstar{color:var(--yellow);letter-spacing:1.5px;font-size:13px}
.detail-meta-row .dsep{width:3px;height:3px;border-radius:50%;background:var(--mt3)}
.detail-rating-pill{display:flex;align-items:center;gap:10px;background:var(--bg-elev);border:1px solid var(--b1);border-radius:10px;padding:12px 20px;box-shadow:var(--shadow);transition:border-color var(--d) var(--ease)}
.detail-rating-pill:hover{border-color:var(--b2)}
.drp-num{font-size:28px;font-weight:800;color:var(--tx);letter-spacing:-1px}
.drp-stars{color:var(--yellow);font-size:13px;letter-spacing:1.5px}
.drp-count{font-size:10px;color:var(--mt2);font-weight:500;text-transform:uppercase;letter-spacing:.5px}

/* TAGS BAR */
.tags-bar{max-width:1200px;margin:20px auto 0;padding:0 48px;display:flex;gap:6px;flex-wrap:wrap;position:relative;z-index:1}
.d-tag{background:var(--bg-elev);border:1px solid var(--b1);border-radius:6px;padding:5px 12px;font-size:11px;font-weight:600;color:var(--mt);letter-spacing:.5px;text-transform:uppercase;transition:color var(--d) var(--ease),border-color var(--d) var(--ease),background var(--d) var(--ease)}
.d-tag:hover{color:var(--ac);border-color:var(--ac);background:var(--ac-soft)}

/* CONTENT LAYOUT */
.detail-wrap{max-width:1200px;margin:24px auto 0;padding:0 48px 80px;display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start;position:relative;z-index:1}
.d-left{display:flex;flex-direction:column;gap:16px}
.d-right{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px}

/* GLASS PANELS */
.d-section{background:var(--bg-elev);border:1px solid var(--b1);border-radius:12px;padding:24px;box-shadow:var(--shadow);transition:border-color var(--d) var(--ease)}
.d-section:hover{border-color:var(--b2)}
.d-section-title{font-size:12px;font-weight:700;color:var(--mt);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.d-section-title svg{width:14px;height:14px;stroke:var(--mt);fill:none;stroke-width:2;flex-shrink:0}

/* DESCRIPTION */
.d-desc{font-size:14px;color:var(--mt);line-height:1.8}

/* SCREENSHOTS */
.screens-scroll{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.screen-thumb{aspect-ratio:16/9;border-radius:8px;overflow:hidden;position:relative;cursor:pointer;transition:border-color var(--d) var(--ease);border:1px solid var(--b1)}
.screen-thumb:hover{border-color:var(--b2)}
.screen-thumb-bg{position:absolute;inset:0;transition:transform .6s var(--ease)}
.screen-thumb:hover .screen-thumb-bg{transform:scale(1.08)}
.screen-thumb-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,0),rgba(0,0,0,.3))}
.screen-thumb-num{position:absolute;top:6px;right:6px;background:var(--bg);color:var(--tx);font-size:9px;font-weight:700;padding:2px 7px;border-radius:4px;border:1px solid var(--b1);letter-spacing:.5px}

/* REQS */
.req-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.req-col{background:var(--bg-soft);border:1px solid var(--b1);border-radius:10px;padding:16px;transition:border-color var(--d) var(--ease)}
.req-col:hover{border-color:var(--b2)}
.req-col-title{font-size:11px;font-weight:700;color:var(--tx);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--b1)}
.req-col-title::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ac);margin-right:7px}
.req-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--b1);font-size:12px;transition:background var(--d) var(--ease)}
.req-row:hover{background:var(--bg-elev)}
.req-row:last-child{border-bottom:none}
.req-label{color:var(--mt);font-weight:500}
.req-val{color:var(--tx);font-weight:600;text-align:right;font-size:11px}

/* REVIEWS */
.review-mini{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--b1);transition:background var(--d) var(--ease);border-radius:6px;padding:14px 8px;margin:0 -8px}
.review-mini:hover{background:var(--bg-elev)}
.review-mini:last-child{border-bottom:none}
.review-mini-avatar{width:36px;height:36px;border-radius:50%;background:var(--ac);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}
.review-mini-name{font-size:13px;font-weight:600;color:var(--tx);margin-bottom:3px}
.review-mini-stars{color:var(--yellow);font-size:11px;letter-spacing:1px;margin-bottom:5px}
.review-mini-text{font-size:12px;color:var(--mt);line-height:1.65}

/* BUY BOX */
.buy-box{background:var(--bg-elev);border:1px solid var(--b1);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);animation:fadeUp .4s var(--ease) both;transition:border-color var(--d) var(--ease)}
.buy-box:hover{border-color:var(--b2)}
.buy-box-banner{height:130px;position:relative;overflow:hidden}
.buy-box-banner-bg{position:absolute;inset:0;transition:transform 5s var(--ease)}
.buy-box:hover .buy-box-banner-bg{transform:scale(1.08)}
.buy-box-banner-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,10,10,0),var(--bg-elev))}
.buy-box-body{padding:20px 22px 22px;margin-top:-40px;position:relative;background:linear-gradient(180deg,rgba(17,17,17,0) 0%,var(--bg-elev) 30%)}
.buy-price-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px}
.buy-price{font-size:20px;font-weight:800;color:var(--tx);letter-spacing:-.5px}
.buy-price-note{font-size:12px;color:var(--mt);margin-bottom:16px;line-height:1.5}
.btn-buy{width:100%;background:var(--ac);color:#fff;font-size:13px;font-weight:700;padding:13px;border-radius:8px;cursor:pointer;border:none;font-family:var(--font);transition:background var(--d) var(--ease);margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-buy:hover{background:var(--ac-hover)}
.btn-buy svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2.2}
.btn-steam{width:100%;background:var(--bg);color:var(--mt);font-size:12px;font-weight:600;padding:11px;border-radius:8px;cursor:pointer;border:1px solid var(--b1);font-family:var(--font);transition:color var(--d) var(--ease),border-color var(--d) var(--ease),background var(--d) var(--ease);margin-bottom:16px;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn-steam:hover{color:var(--tx);border-color:var(--ac);background:var(--ac-soft)}
.btn-steam svg{width:13px;height:13px;fill:currentColor;transition:transform var(--d) var(--ease)}
.btn-steam:hover svg{transform:scale(1.1)}
.buy-divider{height:1px;background:var(--b1);margin:0 0 12px}
.buy-feature{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mt);margin-bottom:8px;font-weight:500;transition:color var(--d) var(--ease)}
.buy-feature:hover{color:var(--tx)}
.buy-feature:last-child{margin-bottom:0}
.buy-feature svg{width:14px;height:14px;stroke:var(--green);fill:none;stroke-width:2.5;flex-shrink:0}

/* SIMILAR */
.similar-card{display:flex;gap:10px;padding:8px;border-radius:8px;cursor:pointer;transition:border-color var(--d) var(--ease),background var(--d) var(--ease);background:var(--bg-elev);border:1px solid var(--b1);margin-bottom:6px}
.similar-card:hover{border-color:var(--ac);background:var(--ac-soft)}
.similar-thumb{width:56px;height:36px;border-radius:6px;overflow:hidden;flex-shrink:0;position:relative}
.similar-thumb-bg{position:absolute;inset:0;transition:transform var(--d-slow) var(--ease)}
.similar-card:hover .similar-thumb-bg{transform:scale(1.1)}
.similar-name{font-size:12px;font-weight:600;color:var(--tx);margin-bottom:2px;line-height:1.3}
.similar-genre{font-size:10px;color:var(--mt2);font-weight:500}

/* LIGHTBOX */
.lightbox{position:fixed;inset:0;background:rgba(10,10,10,.95);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--d) var(--ease)}
.lightbox.show{opacity:1;pointer-events:auto}
.lightbox-img{width:80vw;max-width:1000px;aspect-ratio:16/9;border-radius:12px;overflow:hidden;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.7);border:1px solid var(--b2);animation:fadeUp .4s var(--ease)}
.lightbox-img-bg{position:absolute;inset:0;transition:transform 6s var(--ease)}
.lightbox.show .lightbox-img-bg{transform:scale(1.04)}
.lightbox-close{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:8px;background:var(--bg-elev);border:1px solid var(--b1);color:var(--tx);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--d) var(--ease),border-color var(--d) var(--ease),color var(--d) var(--ease)}
.lightbox-close:hover{background:var(--ac-soft);border-color:var(--ac);color:var(--ac)}
.lightbox-close svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:10px;background:var(--bg-elev);border:1px solid var(--b1);color:var(--tx);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--d) var(--ease),border-color var(--d) var(--ease),color var(--d) var(--ease)}
.lightbox-nav:hover{background:var(--ac-soft);border-color:var(--ac);color:var(--ac)}
.lightbox-nav.prev{left:20px}
.lightbox-nav.next{right:20px}
.lightbox-nav.prev:hover{transform:translateY(-50%) translateX(-3px)}
.lightbox-nav.next:hover{transform:translateY(-50%) translateX(3px)}
.lightbox-nav svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}

/* FOOTER */
.footer{margin:24px 48px 24px;padding:24px 0;border-top:1px solid var(--b1);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;position:relative;z-index:1}
.footer-logo{font-size:14px;font-weight:700;color:var(--tx)}
.footer-links{display:flex;gap:18px}
.footer-link{font-size:12px;color:var(--mt);text-decoration:none;transition:color var(--d) var(--ease);font-weight:500;position:relative;padding:4px 0}
.footer-link:hover{color:var(--ac)}
.footer-copy{font-size:12px;color:var(--mt2);font-weight:500;letter-spacing:.5px}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.5}}

/* RESPONSIVE */
@media(max-width:900px){
  .nav{padding:0 24px}
  .nav-links{display:none}
  .backbar{padding:80px 20px 0}
  .detail-hero{padding:16px 20px 0}
  .detail-banner{height:260px}
  .detail-hero-content{padding:20px}
  .tags-bar{padding:0 20px}
  .detail-wrap{grid-template-columns:1fr;padding:0 20px 60px;gap:20px}
  .d-right{position:relative;top:0}
  .req-grid{grid-template-columns:1fr}
  .screens-scroll{grid-template-columns:repeat(2,1fr)}
  .footer{margin:24px 20px;flex-direction:column;text-align:center}
}