/* Steam-like dark UI (responsive). Replace assets/img/logo.png & assets/img/banner6.jpg with your final images. */

:root{
  --bg0:#0b141e;
  --bg1:#1b2838;
  --bg2:#16202d;
  --card:#0f1923;
  --line:rgba(255,255,255,.08);
  --text:#c6d4df;
  --muted:#8f98a0;
  --accent:#66c0f4;
  --green:#5c7e10;
  --btn:#2a475e;
  --btn2:#4c6b22;
  --orange:#f2a000;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 35% 10%, rgba(102,192,244,.10), transparent 60%),
    radial-gradient(900px 500px at 75% 30%, rgba(242,160,0,.08), transparent 60%),
    linear-gradient(180deg, #0b141e 0%, #111a24 45%, #0b141e 100%);
}

/* Accessibility */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Top black-ish bar */
.topbar{
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  gap:14px;
  align-items:center;
  padding:10px 14px;
}
.brand{display:flex;align-items:center;text-decoration:none}
.brand-logo{height:34px;width:auto;display:block}

.topnav{
  display:flex;
  gap:14px;
  align-items:center;
  flex:1;
  overflow:auto hidden;
  scrollbar-width:none;
}
.topnav::-webkit-scrollbar{height:0}
.topnav-link{
  color:#d6d6d6;
  text-decoration:none;
  font-weight:600;
  letter-spacing:.2px;
  white-space:nowrap;
  opacity:.9;
}
.topnav-link.is-active{color:var(--accent); opacity:1}
.topnav-link:hover{color:white;opacity:1}

.top-actions{display:flex;gap:8px;align-items:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:7px 10px;
  border-radius:3px;
  text-decoration:none;
  font-weight:700;
  border:1px solid rgba(255,255,255,.12);
  color:var(--text);
  background:rgba(255,255,255,.04);
}
.btn:hover{filter:brightness(1.1)}
.btn-primary{
  border-color:rgba(102,192,244,.45);
  background:linear-gradient(180deg, rgba(102,192,244,.25), rgba(102,192,244,.12));
  color:#e9f6ff;
}
.btn-ghost{
  background:rgba(255,255,255,.02);
}

/* Blue store bar */
.storebar{
  background:linear-gradient(180deg, rgba(42,71,94,.95), rgba(33,54,71,.95));
  border-bottom:1px solid rgba(0,0,0,.35);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}
.storebar-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 14px;
}
.store-links{
  display:flex;
  gap:14px;
  align-items:center;
  flex:1;
  overflow:auto hidden;
  scrollbar-width:none;
}
.store-links::-webkit-scrollbar{height:0}
.store-links a{
  color:#cfe6f8;
  text-decoration:none;
  white-space:nowrap;
  font-weight:600;
}
.store-links a:hover{color:white}

.search{
  display:flex;
  align-items:center;
  gap:0;
  border:1px solid rgba(0,0,0,.35);
  background:rgba(0,0,0,.25);
  border-radius:2px;
  overflow:hidden;
}
.search input{
  width:260px;
  max-width:40vw;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  padding:8px 10px;
}
.search button{
  border:0;
  background:rgba(102,192,244,.25);
  color:#fff;
  padding:8px 10px;
  cursor:pointer;
}
.wishlist{
  color:#d7e6f5;
  text-decoration:none;
  white-space:nowrap;
  font-weight:600;
}
.wishlist:hover{color:white}

/* Page frame */
.page{
  max-width:1100px;
  margin:0 auto;
  padding:18px 14px 40px;
}
.breadcrumbs{
  color:rgba(198,212,223,.78);
  font-size:12px;
  margin:12px 0 10px;
}
.breadcrumbs a{color:rgba(198,212,223,.88); text-decoration:none}
.breadcrumbs a:hover{color:white}
.breadcrumbs span{margin:0 6px; opacity:.7}

.hero{
  background:linear-gradient(180deg, rgba(22,32,45,.85), rgba(14,22,32,.92));
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  border-radius:2px;
  padding:18px;
}
.hero-head{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.title{
  margin:0;
  font-size:26px;
  font-weight:800;
  letter-spacing:.2px;
  flex:1;
}
.community{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  padding:8px 10px;
  border-radius:2px;
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  white-space:nowrap;
}
.community:hover{filter:brightness(1.1)}

.hero-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:16px;
}
.poster{
  width:100%;
  height:auto;
  display:block;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.poster.small{margin-bottom:12px}

.cta{
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.08);
  padding:12px;
}
.cta-frame{
  position:relative;
  padding:10px;
  border-radius:6px;
  border:2px solid rgba(255, 204, 0, .55);
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.10));
  overflow:hidden;
}
.cta-glow{
  position:absolute;
  inset:-40px -80px auto -80px;
  height:100px;
  background:radial-gradient(circle at 50% 40%, rgba(255,208,64,.50), transparent 60%);
  filter:blur(2px);
  pointer-events:none;
}
.cta-btn{
  position:relative;
  display:block;
  text-align:center;
  padding:14px 14px;
  border-radius:4px;
  text-decoration:none;
  font-weight:900;
  letter-spacing:.5px;
  color:#0b141e;
  background:linear-gradient(180deg, #ffd25e, #f2a000);
  box-shadow:0 10px 18px rgba(0,0,0,.35);
}
.cta-btn:hover{filter:brightness(1.06)}

.desc{
  margin:12px 0 10px;
  color:rgba(198,212,223,.92);
}
.meta{
  display:grid;
  gap:6px;
  font-size:12px;
  color:rgba(198,212,223,.85);
}
.meta span{
  color:rgba(198,212,223,.60);
  display:inline-block;
  min-width:130px;
}

/* Below section layout */
.below{
  margin-top:18px;
  display:grid;
  grid-template-columns: 1fr 330px;
  gap:16px;
  align-items:start;
}
.leftcol .notice{
  border:1px solid rgba(255, 150, 64, .40);
  background:rgba(0,0,0,.20);
  padding:12px 14px;
}
.notice-title{color:#ff9a3a;font-weight:900;margin-bottom:6px}
.notice-body{color:rgba(198,212,223,.88); font-size:13px}

.purchase{
  margin-top:14px;
  background:rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.06);
}
.purchase-row{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px 12px;
  border-top:1px solid rgba(255,255,255,.06);
}
.purchase-row:first-child{border-top:0}
.purchase-title{font-weight:900; font-size:18px; flex:1}
.purchase-sub{margin:-4px 0 10px 12px; color:rgba(198,212,223,.78); font-size:12px}
.purchase-right{
  display:flex; gap:8px; align-items:center;
}
.discount{
  background:#4c6b22;
  color:#d2ffa8;
  font-weight:900;
  padding:6px 10px;
  border-radius:2px;
}
.price{
  background:rgba(0,0,0,.25);
  padding:6px 10px;
  border-radius:2px;
  border:1px solid rgba(255,255,255,.06);
  white-space:nowrap;
}
.cart{
  background:linear-gradient(180deg, rgba(92,126,16,.9), rgba(76,107,34,.9));
  color:#efffd3;
  font-weight:900;
  text-decoration:none;
  padding:8px 10px;
  border-radius:2px;
  border:1px solid rgba(0,0,0,.35);
  white-space:nowrap;
}
.cart:hover{filter:brightness(1.05)}
.info{
  background:rgba(102,192,244,.14);
  border:1px solid rgba(102,192,244,.25);
  color:#d9f0ff;
  padding:7px 10px;
  border-radius:2px;
  text-decoration:none;
  font-weight:800;
  white-space:nowrap;
}
.bundle{font-size:12px; opacity:.75; margin-left:6px}

.section{
  margin-top:16px;
  background:rgba(0,0,0,.12);
  border:1px solid rgba(255,255,255,.06);
  padding:14px;
}
.section h2{
  margin:0 0 10px;
  font-size:16px;
  font-weight:900;
}
.section h3{
  margin:14px 0 8px;
  font-size:14px;
  font-weight:900;
  color:#d7e6f5;
}
.link{
  display:block;
  margin:8px 0;
  color:var(--accent);
  text-decoration:none;
}
.link:hover{color:white}
.badges{display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 10px}
.badge{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  font-weight:800;
  font-size:12px;
}
.paragraph{margin:0 0 8px; color:rgba(198,212,223,.90)}
.paragraph.dim{color:rgba(198,212,223,.70)}
.sysreq{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  margin-top:8px;
}
.sys-title{font-weight:900; margin-bottom:6px}
.sysreq ul{margin:0; padding-left:16px; color:rgba(198,212,223,.88)}
.sysreq li{margin:6px 0}
.footnote{margin-top:10px; font-size:12px; color:rgba(198,212,223,.65)}

/* Right column panels */
.panel{
  background:rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.06);
  margin-bottom:12px;
}
.panel-title{
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-weight:900;
}
.panel-body{padding:12px}
.x{color:rgba(198,212,223,.85)}
.x a{color:var(--accent); text-decoration:none}
.tags{margin-top:12px; display:grid; gap:8px}
.tag{
  padding:8px 10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  font-weight:700;
  border-radius:2px;
}
.lang{padding:10px 12px}
.lang-row{
  display:grid;
  grid-template-columns: 1.4fr .8fr .5fr .5fr;
  gap:8px;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-size:12px;
}
.lang-row:last-child{border-bottom:0}
.ok{color:#c9ff8a; font-weight:900}
.muted{color:rgba(198,212,223,.55)}
.more{
  display:inline-block;
  margin-top:10px;
  color:var(--accent);
  text-decoration:none;
  font-weight:800;
}
.more:hover{color:white}
.thumbs{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:6px;
  padding:10px 12px 12px;
}
.thumbs img{
  width:100%;
  height:54px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.10);
}
.sidebtn{
  display:block;
  padding:10px 12px;
  text-align:center;
  text-decoration:none;
  font-weight:900;
  color:#d9f0ff;
  background:linear-gradient(180deg, rgba(102,192,244,.18), rgba(102,192,244,.10));
  border-top:1px solid rgba(255,255,255,.06);
}

/* Footer */
.footer{
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.35);
}
.footer-inner{
  max-width:1100px;
  margin:0 auto;
  padding:16px 14px;
  color:rgba(198,212,223,.70);
  font-size:12px;
}

/* Mobile */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .below{grid-template-columns:1fr}
  .rightcol{order:2}
  .search input{width:160px}
  .title{font-size:22px}
  .sysreq{grid-template-columns:1fr}
}
@media (max-width: 520px){
  .topbar-inner{flex-wrap:wrap}
  .top-actions{width:100%; justify-content:flex-end}
  .purchase-row{flex-direction:column; align-items:flex-start}
  .purchase-right{width:100%; justify-content:flex-end; flex-wrap:wrap}
  .meta span{min-width:110px}
  .thumbs{grid-template-columns:repeat(2,1fr)}
}