/* Nights End — subsite styles (dark-fantasy purple/gold) */
:root{
  --bg:#0b0916; --bg2:#130f24; --panel:#1a1530; --panel2:#221b3d;
  --gold:#e7c25c; --gold-dim:#bd962f; --ink:#ece7f4; --muted:#a99fc4;
  --line:#3a3158; --accent:#a874ff; --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 620px at 50% -8%, #241645 0%, var(--bg) 62%);
}
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(11,9,22,.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{height:30px; width:auto}
.nav nav{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.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:520px; 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 30%; filter:saturate(1.08)}
.hero .scrim{position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(7,5,14,.94) 0%, rgba(7,5,14,.6) 55%, rgba(7,5,14,.15) 100%)}
.hero .inner{position:relative; padding:60px 0}
.hero .wordmark{max-width:520px; width:70%; margin-bottom:14px; filter:drop-shadow(0 6px 18px #000)}
.hero .sub{font-size:1.15rem; color:var(--gold); margin:.1em 0 .7em; letter-spacing:4px; text-transform:uppercase}
.hero p{max-width:560px; font-size:1.1rem; color:#dcd6ea}
.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(231,194,92,.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)}

/* Steam badge */
.btn-steam{display:inline-flex; align-items:center; gap:11px; background:#1b2838; color:#c7d5e0;
  padding:10px 22px; border-radius:9px; border:1px solid #33506b; box-shadow:0 6px 20px rgba(0,0,0,.35);
  margin-top:22px; vertical-align:middle}
.btn-steam:hover{background:#223349; color:#fff}
.btn-steam svg{flex:0 0 auto; fill:#c7d5e0}
.btn-steam:hover svg{fill:#fff}
.btn-steam .lbl{display:flex; flex-direction:column; line-height:1.05; text-align:left}
.btn-steam .lbl small{font-weight:600; font-size:.6rem; letter-spacing:1.5px; text-transform:uppercase; color:#8fa9bf}
.btn-steam .lbl b{font-size:1.02rem; font-weight:700}
.nav .btn-steam{margin-top:0; padding:7px 15px; box-shadow:0 2px 10px rgba(0,0,0,.28)}
@media(max-width:560px){ .nav .btn-steam .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}

.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}

.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)}
.feat li strong{color:#f0e3b0}

/* click-to-enlarge lightbox */
section img{cursor:zoom-in; transition:transform .12s ease, box-shadow .12s ease}
section .card 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}

footer{border-top:1px solid var(--line); background:#08060f; 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}
.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}
  .hero .wordmark{width:88%}
}

/* ── subpage components (How to Play / Versions) ── */
.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}
.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(231,194,92,.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(231,194,92,.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}
@media(max-width:820px){ .step{grid-template-columns:1fr} .step:nth-child(even) .txt{order:0} }