/* Realm of Shadows — site styles */
:root{
  --bg:#0d0a18; --bg2:#151127; --panel:#1c1733; --panel2:#241d40;
  --gold:#e0b63c; --gold-dim:#b9912f; --ink:#e8e3f0; --muted:#a99fc4;
  --line:#3a3158; --accent:#9a6cff; --green:#6fd08a; --red:#e07b6b;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Segoe UI",system-ui,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6;
  background-image:radial-gradient(1200px 600px at 50% -10%, #1b1536 0%, var(--bg) 60%);
}
a{color:var(--gold); text-decoration:none}
a:hover{color:#fff}
img{max-width:100%; display:block}
h1,h2,h3{font-family:"Trebuchet MS","Segoe UI",sans-serif; letter-spacing:.5px; line-height:1.2}
h2{color:var(--gold); font-size:1.9rem; margin:0 0 .3em}
h3{color:#f0e3b0; font-size:1.2rem}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px}
.muted{color:var(--muted)}

/* nav */
header.nav{position:sticky; top:0; z-index:50; background:rgba(13,10,24,.92);
  backdrop-filter:blur(6px); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; gap:18px; height:62px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--gold); font-size:1.15rem}
.brand img{width:34px; height:34px; border-radius:7px; border:1px solid var(--line)}
.nav nav{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap}
.nav nav a{padding:8px 14px; border-radius:7px; color:var(--ink); font-weight:600}
.nav nav a:hover,.nav nav a.active{background:var(--panel2); color:var(--gold)}

/* hero */
.hero{position:relative; min-height:460px; display:flex; align-items:center;
  border-bottom:1px solid var(--line); overflow:hidden}
.hero .bg{position:absolute; inset:0; background-size:cover; background-position:center;
  filter:saturate(1.05)}
.hero .scrim{position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(8,6,16,.92) 0%, rgba(8,6,16,.55) 55%, rgba(8,6,16,.2) 100%)}
.hero .inner{position:relative; padding:54px 0}
.hero h1{font-size:3.1rem; color:#fff; text-shadow:0 3px 18px #000}
.hero .sub{font-size:1.35rem; color:var(--gold); margin:.2em 0 .8em; letter-spacing:3px}
.hero p{max-width:560px; font-size:1.08rem; color:#d8d2e6}
.tagrow{margin:18px 0 0; display:flex; gap:10px; flex-wrap:wrap}
.tag{background:var(--panel2); border:1px solid var(--line); color:#e9dfff;
  padding:5px 12px; border-radius:20px; font-size:.85rem}

.btn{display:inline-block; margin-top:22px; background:linear-gradient(180deg,var(--gold),var(--gold-dim));
  color:#1a1206; font-weight:700; padding:12px 26px; border-radius:9px; border:1px solid #f0d77a;
  box-shadow:0 6px 20px rgba(224,182,60,.25)}
.btn:hover{filter:brightness(1.08); color:#1a1206}
.btn.ghost{background:transparent; color:var(--gold); border:1px solid var(--gold-dim); box-shadow:none}
.btn.ghost:hover{background:var(--panel2)}

/* Microsoft Store badge */
.btn-store{display:inline-flex; align-items:center; gap:11px; background:#fff; color:#15131c;
  padding:10px 22px; border-radius:9px; border:1px solid #cfc9dd; box-shadow:0 6px 20px rgba(0,0,0,.3);
  margin-top:22px; vertical-align:middle}
.btn-store:hover{background:#f1eef8; color:#15131c}
.btn-store svg{flex:0 0 auto}
.btn-store .lbl{display:flex; flex-direction:column; line-height:1.05; text-align:left}
.btn-store .lbl small{font-weight:600; font-size:.6rem; letter-spacing:1.5px; text-transform:uppercase; color:#5a5570}
.btn-store .lbl b{font-size:1.02rem; font-weight:700}
.nav .btn-store{margin-top:0; padding:7px 15px; box-shadow:0 2px 10px rgba(0,0,0,.28)}
/* beat the generic nav-link colour so the badge keeps its dark Store lettering */
.nav .btn-store, .nav .btn-store:hover, .nav .btn-store .lbl b{color:#15131c}
@media(max-width:560px){ .nav .btn-store .lbl small{display:none} }

/* sections */
section{padding:54px 0}
section.alt{background:linear-gradient(180deg,var(--bg2),var(--bg))}
.lead{max-width:760px; color:#d4cde6; font-size:1.08rem; margin-bottom:8px}
.eyebrow{color:var(--accent); font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:.8rem}

/* feature grid */
.grid{display:grid; gap:20px; margin-top:26px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.card .pad{padding:16px 18px}
.card h3{margin-bottom:6px}
.card p{color:var(--muted); font-size:.96rem}
.card img{width:100%; aspect-ratio:16/9; object-fit:cover; border-bottom:1px solid var(--line); background:#000}

/* step / walkthrough rows */
.step{display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center; margin:34px 0;
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px; overflow:hidden}
.step:nth-child(even) .txt{order:2}
.step img{border-radius:10px; border:1px solid var(--line); width:100%; box-shadow:0 8px 24px rgba(0,0,0,.4)}
.step .num{display:inline-block; background:var(--gold); color:#1a1206; font-weight:800;
  width:30px; height:30px; line-height:30px; text-align:center; border-radius:50%; margin-bottom:8px}
.step h3{font-size:1.35rem; color:#f3e6b3}
.step p{color:#cfc7e2}
.kbd{display:inline-block; background:var(--panel2); border:1px solid var(--line); border-bottom-width:2px;
  border-radius:5px; padding:1px 7px; font-family:Consolas,monospace; font-size:.85em; color:#f0e3b0}

/* lists */
.feat{list-style:none; margin:18px 0 0; display:grid; gap:10px}
.feat li{padding-left:26px; position:relative; color:#d4cde6}
.feat li::before{content:"\2756"; position:absolute; left:0; color:var(--gold)}

.editor{display:grid; grid-template-columns:1.1fr 1fr; gap:26px; align-items:center; margin:30px 0;
  border-bottom:1px solid var(--line); padding-bottom:30px}
.editor:nth-child(even) .shot{order:-1}
.editor img{border-radius:10px; border:1px solid var(--line); box-shadow:0 8px 22px rgba(0,0,0,.4)}
.editor .pill{display:inline-block; font-size:.75rem; letter-spacing:1px; text-transform:uppercase;
  color:var(--accent); border:1px solid var(--line); border-radius:14px; padding:3px 10px; margin-bottom:8px}

/* click-to-enlarge lightbox */
section img{cursor:zoom-in; transition:transform .12s ease, box-shadow .12s ease}
section .card img:hover, section .editor img:hover, section .step img:hover{
  transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.5)}
.lb{position:fixed; inset:0; z-index:200; background:rgba(6,4,12,.93);
  display:none; align-items:center; justify-content:center; padding:24px; cursor:zoom-out}
.lb.open{display:flex}
.lb img{max-width:96vw; max-height:92vh; border:1px solid var(--line); border-radius:8px;
  box-shadow:0 24px 70px rgba(0,0,0,.7); cursor:default}
.lb .x{position:fixed; top:14px; right:24px; color:#fff; font-size:2.2rem; line-height:1;
  font-weight:700; cursor:pointer; opacity:.85}
.lb .x:hover{opacity:1}
.lb .hint{position:fixed; bottom:18px; left:0; right:0; text-align:center; color:#cfc7e2;
  font-size:.85rem; pointer-events:none}
.banner{width:100%; display:block; border-radius:12px; border:1px solid var(--line);
  box-shadow:0 10px 34px rgba(0,0,0,.45)}
.shotfull{margin:22px 0 0; border-radius:12px; border:1px solid var(--line); overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.4)}
.shotfull img{width:100%; display:block}
.shotfull figcaption{background:var(--panel); color:var(--muted); font-size:.9rem;
  padding:10px 16px; border-top:1px solid var(--line); cursor:auto}

/* story video embed (responsive 16:9) */
.videobox{margin:24px 0 0; display:flex; justify-content:center}
.videobox .player{width:100%; max-width:760px; aspect-ratio:16/9; border-radius:12px;
  border:1px solid var(--line); background:#000; box-shadow:0 12px 34px rgba(0,0,0,.5); overflow:hidden}
.videobox .player iframe{width:100%; height:100%; border:0; display:block}

/* version / changelog */
.notice{background:var(--panel2); border:1px solid var(--gold-dim); border-radius:12px;
  padding:16px 20px; color:#e7dcc0; margin-top:18px; line-height:1.55}
.notice strong{color:var(--gold)}
.release{background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:22px 24px; margin:22px 0}
.release.current{border-color:#3f7a52; box-shadow:0 0 0 1px rgba(111,208,138,.22)}
.release.next{border-color:var(--gold-dim); box-shadow:0 0 0 1px rgba(224,182,60,.2)}
.release-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:4px}
.release-head h3{color:#fff; font-size:1.5rem; margin:0}
.release-head .date{color:var(--muted); font-size:.88rem; margin-left:auto}
.vbadge{font-size:.7rem; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
  padding:4px 11px; border-radius:20px; border:1px solid}
.vbadge.live{color:var(--green); border-color:#3f7a52; background:rgba(111,208,138,.1)}
.vbadge.review{color:var(--gold); border-color:var(--gold-dim); background:rgba(224,182,60,.1)}
.vbadge.old{color:var(--muted); border-color:var(--line); background:var(--panel2)}
.release ul{list-style:none; margin:12px 0 0; display:grid; gap:9px}
.release li{padding-left:24px; position:relative; color:#d4cde6; font-size:.98rem}
.release li::before{content:"\2756"; position:absolute; left:0; color:var(--gold)}
.release li strong{color:#f0e3b0}

footer{border-top:1px solid var(--line); background:#0a0814; padding:30px 0; color:var(--muted); font-size:.9rem}
footer .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center}
/* producer / company button */
.btn-brand{display:inline-flex; align-items:center; gap:7px; background:var(--panel2);
  border:1px solid var(--gold-dim); color:var(--gold); font-weight:700; letter-spacing:.4px;
  padding:6px 14px; border-radius:8px; vertical-align:middle}
.btn-brand::before{content:""; width:14px; height:14px; border-radius:3px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--gold),var(--gold-dim)); border:1px solid #f0d77a}
.btn-brand:hover{background:var(--gold); color:#1a1206}
.btn-brand:hover::before{background:#1a1206; border-color:#1a1206}

@media(max-width:820px){
  .g3,.g2{grid-template-columns:1fr}
  .step,.editor{grid-template-columns:1fr}
  .step:nth-child(even) .txt,.editor:nth-child(even) .shot{order:0}
  .hero h1{font-size:2.2rem}
}