/* Dense Knight site. Dark first, mobile first. Palette from Dense Knight Marketing/brand/BRAND.md */
@font-face{font-family:"Fira Sans";font-weight:800;font-style:normal;font-display:swap;src:url(../fonts/FiraSans-ExtraBold.woff2) format("woff2")}
@property --h{syntax:"<number>";inherits:true;initial-value:0}
:root{
  --night:#1B1040;--deep:#120a2b;--ink:#1E0A24;--panel:#2a1a5c;--panel2:#33206e;
  --cream:#FFF1D6;--muted:#d4c6e8;--gold:#FFC233;--gold-l:#FFF08A;--orange:#FF9A1F;
  --cyan:#2FD6C8;--cyan-l:#B9FFF5;--magenta:#C21A6A;--pink:#E8478F;--crimson:#8A1250;
  --line:rgba(255,241,214,.16);--radius:18px;--gut:clamp(16px,4vw,40px);--max:1180px;
  --display:"Fira Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--cream);font:500 1.0625rem/1.65 var(--body);overflow-x:hidden}
img,video,picture{max-width:100%;display:block}
a{color:var(--cyan-l)}
a:hover{color:var(--gold-l)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--ink);padding:10px 16px;border-radius:8px;z-index:100;font-weight:700}
.skip:focus{left:8px}
.wrap{width:min(100% - 2*var(--gut),var(--max));margin-inline:auto}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.08;letter-spacing:.01em;margin:0 0 .5em}
h1{font-size:clamp(2.2rem,6vw,4rem)}
h2{font-size:clamp(1.8rem,4.6vw,3rem)}
h3{font-size:1.3rem}
p{margin:0 0 1em}
.eyebrow{font:800 .8rem/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin-bottom:.9rem}
.lead{font-size:clamp(1.1rem,2.3vw,1.3rem);color:var(--muted);max-width:60ch}
section{padding:clamp(56px,9vw,110px) 0;position:relative}

/* header */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s,backdrop-filter .3s}
.site-header.solid{background:rgba(18,10,43,.86);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:16px;min-height:62px}
.brand{display:flex;align-items:center;gap:10px;color:var(--cream);text-decoration:none;font:800 1.15rem var(--display);letter-spacing:.06em}
.brand img{width:34px;height:34px;border-radius:9px}
.brand b{color:var(--gold)}
.nav{margin-left:auto;display:flex;gap:4px;align-items:center}
.nav a{color:var(--cream);text-decoration:none;font-weight:700;padding:10px 12px;border-radius:10px;font-size:.95rem}
.nav a:hover,.nav a[aria-current=page]{background:rgba(255,241,214,.12);color:var(--gold-l)}
.nav .nav-cta{background:var(--gold);color:var(--ink);margin-left:6px}
.nav .nav-cta:hover{background:var(--gold-l);color:var(--ink)}
.menu-btn{display:none;margin-left:auto;background:rgba(255,241,214,.12);color:var(--cream);border:0;border-radius:10px;padding:10px 14px;font:700 .95rem var(--body);cursor:pointer}
@media(max-width:820px){
 .menu-btn{display:block}
 .nav{display:none;position:absolute;top:62px;left:0;right:0;flex-direction:column;align-items:stretch;background:rgba(18,10,43,.97);padding:10px var(--gut) 18px;margin:0;border-bottom:1px solid var(--line)}
 .nav.open{display:flex}
 .nav a{padding:14px 12px;font-size:1.05rem}
}

/* hero */
.hero{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:84px 0 56px;overflow:hidden;isolation:isolate;text-align:center}
.hero-bg{position:absolute;left:-4%;top:-4%;width:108%;height:108%;z-index:-3;will-change:transform}
.hero-bg picture{display:block;width:100%;height:100%}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;filter:saturate(1.1)}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:
  radial-gradient(ellipse at 50% 42%,rgba(18,10,43,.05) 0%,rgba(18,10,43,.45) 62%,rgba(18,10,43,.88) 100%),
  linear-gradient(180deg,rgba(27,16,64,.55) 0%,rgba(27,16,64,0) 30%,rgba(27,16,64,.55) 78%,var(--night) 100%)}
#sparks{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hero-content{will-change:transform;display:flex;flex-direction:column;align-items:center}
.hero-logo{width:auto;height:clamp(150px,30vh,300px);aspect-ratio:900/826;filter:drop-shadow(0 10px 30px rgba(0,0,0,.5))}
.hook{font:800 clamp(1.25rem,3.2vw,2rem)/1.25 var(--display);margin:10px auto 4px;max-width:30ch;text-shadow:0 3px 18px rgba(0,0,0,.7)}
.hook em{font-style:normal;color:var(--gold)}
.sub{color:var(--cream);max-width:60ch;font-size:1rem;line-height:1.5;text-shadow:0 2px 12px rgba(0,0,0,.8);margin-bottom:22px}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.chip{background:rgba(18,10,43,.72);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font:700 .85rem var(--body);backdrop-filter:blur(6px)}
.scroll-hint{position:absolute;bottom:14px;left:50%;translate:-50% 0;color:var(--cream);opacity:.8;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none}

/* THE button */
.wl-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.wishlist{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;text-decoration:none;border:0;
  font:800 clamp(1.45rem,5.2vw,3rem)/1 var(--display);white-space:nowrap;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);
  padding:clamp(18px,2.6vw,30px) clamp(20px,4vw,64px);border-radius:26px;width:min(100%,760px);overflow:hidden;
  background:linear-gradient(180deg,var(--gold-l),var(--gold) 45%,var(--orange));
  box-shadow:0 0 0 4px var(--ink),0 0 0 7px var(--gold-l),0 14px 0 var(--crimson),0 22px 50px rgba(255,154,31,.55);
  transition:transform .15s,box-shadow .15s;animation:pulse 2.6s ease-in-out infinite}
.wishlist:hover{transform:translateY(-3px) scale(1.02);color:var(--ink)}
.wishlist:active{transform:translateY(8px);box-shadow:0 0 0 4px var(--ink),0 0 0 7px var(--gold-l),0 4px 0 var(--crimson),0 10px 30px rgba(255,154,31,.5)}
.wishlist::after{content:"";position:absolute;top:0;bottom:0;width:30%;left:-40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg);animation:shine 4.8s ease-in-out infinite}
.wishlist small{font:800 clamp(.75rem,1.9vw,1rem)/1.2 var(--body);letter-spacing:.12em;color:var(--crimson)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px var(--ink),0 0 0 7px var(--gold-l),0 14px 0 var(--crimson),0 22px 44px rgba(255,154,31,.40)}50%{box-shadow:0 0 0 4px var(--ink),0 0 0 7px var(--gold-l),0 14px 0 var(--crimson),0 22px 80px rgba(255,194,51,.85)}}
@keyframes shine{0%,55%{left:-40%}100%{left:140%}}
.wl-note{max-width:58ch;font-size:.98rem;color:var(--cream);background:rgba(18,10,43,.78);border:1px solid var(--line);border-radius:14px;padding:12px 16px;text-shadow:none}
.wl-note[hidden]{display:none}
.wl-alt{font-size:.95rem}
.release{font:700 .9rem var(--body);color:var(--cream);opacity:.92}
.release b{color:var(--gold)}

/* sticky mobile bar */
.sticky-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));background:rgba(18,10,43,.94);backdrop-filter:blur(10px);border-top:2px solid var(--gold);transform:translateY(110%);transition:transform .3s;display:none}
.sticky-bar.show{transform:none}
.sticky-bar .wishlist{width:100%;font-size:1.25rem;padding:14px 18px;border-radius:16px;animation:none;box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--gold-l),0 6px 0 var(--crimson)}
@media(max-width:820px){.sticky-bar{display:block}body{padding-bottom:0}}

/* facts strip */
.facts{padding:0;margin-top:-1px;background:linear-gradient(180deg,var(--night),var(--deep))}
.facts ul{list-style:none;margin:0;padding:26px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;text-align:center}
.facts b{display:block;font:800 clamp(1.8rem,5vw,2.8rem)/1 var(--display);color:var(--gold)}
.facts span{font-size:.9rem;color:var(--muted)}

/* generic bg bands */
.band{background:var(--deep)}
.band-pink{background:linear-gradient(135deg,var(--crimson),var(--night) 70%)}
.center{text-align:center}
.center .lead{margin-inline:auto}

/* cards */
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.card{--rx:0deg;--ry:0deg;background:linear-gradient(160deg,var(--panel),var(--night));border:1px solid var(--line);border-radius:var(--radius);padding:26px;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .15s,border-color .2s;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.card:hover{border-color:var(--gold)}
.card .ico{font-size:2rem;line-height:1;margin-bottom:12px;display:block}
.card h3{color:var(--gold-l)}
.card p{color:var(--muted);margin:0}
.card.media-card{padding:0;overflow:hidden}
.card.media-card .body{padding:20px 24px 24px}

/* rainbow text: letters shift hue like the Puzzle flip colour effect (slow, no flashing) */
.rainbow .w{white-space:nowrap}
.rainbow .l{display:inline-block;color:hsl(var(--h) 100% 74%);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 rgba(30,10,36,.9);animation:hue 9s linear infinite;animation-delay:calc(var(--i) * -.6s)}
@keyframes hue{from{--h:0}to{--h:360}}
.rainbow.static .l{animation:none;color:hsl(calc(var(--i) * 36) 100% 74%)}
.puzzle h2{font-size:clamp(2.6rem,10vw,6.5rem)}
.split{display:grid;gap:36px;align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}.split.rev>:first-child{order:2}}
.frame{border-radius:var(--radius);overflow:hidden;border:3px solid var(--ink);box-shadow:0 0 0 2px var(--gold),0 24px 60px rgba(0,0,0,.5);background:var(--deep)}
.frame video,.frame img{width:100%;height:auto}
.cap{font-size:.9rem;color:var(--muted);margin-top:8px}

/* gallery */
.shots{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.shot{padding:0;border:2px solid var(--ink);border-radius:14px;overflow:hidden;background:var(--deep);cursor:zoom-in;position:relative;aspect-ratio:16/9;box-shadow:0 10px 24px rgba(0,0,0,.4);transition:transform .2s,border-color .2s}
.shot:hover{transform:translateY(-4px);border-color:var(--gold)}
.shot img{width:100%;height:100%;object-fit:cover}
.shot span{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 8px;text-align:left;font:700 .85rem var(--body);color:var(--cream);background:linear-gradient(0deg,rgba(18,10,43,.92),transparent)}
dialog.lb{border:0;padding:0;background:transparent;max-width:96vw;max-height:94vh;color:var(--cream)}
dialog.lb::backdrop{background:rgba(10,5,25,.92)}
dialog.lb img{max-height:84vh;width:auto;margin:auto;border-radius:12px}
dialog.lb p{text-align:center;margin:10px 0 0}
dialog.lb button{position:fixed;top:14px;right:14px;background:var(--gold);color:var(--ink);border:0;border-radius:10px;padding:10px 18px;font:800 1rem var(--body);cursor:pointer}
.vids{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}

/* banner */
.banner{text-align:center;background:radial-gradient(ellipse at 50% 0%,rgba(194,26,106,.55),transparent 65%),var(--deep);overflow:hidden}
.banner h2{font-size:clamp(2.2rem,7vw,4.6rem)}

/* forms/lists */
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;padding:0}
.faq summary{cursor:pointer;padding:18px 22px;font:800 1.1rem var(--display);list-style:none;display:flex;justify-content:space-between;gap:14px}
.faq summary::after{content:"+";color:var(--gold);font-size:1.5rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 22px 18px;margin:0;color:var(--muted)}
.prose{max-width:74ch}
.prose h2{font-size:1.7rem;margin-top:1.6em}
.prose li{margin-bottom:.4em}
.page-head{padding:130px 0 40px;background:linear-gradient(180deg,var(--crimson),var(--night))}
table.facts-table{width:100%;border-collapse:collapse}
.facts-table th,.facts-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.facts-table th{width:34%;color:var(--gold-l);font-family:var(--display)}
.dl{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
.dl a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;text-decoration:none;color:var(--cream);font-size:.9rem}
.dl a:hover{border-color:var(--gold)}
.dl img{aspect-ratio:4/3;object-fit:contain;width:100%;background:repeating-conic-gradient(#2a1a5c 0 25%,#33206e 0 50%) 0 0/20px 20px;border-radius:8px;margin-bottom:8px}
.btn{display:inline-block;background:var(--cyan);color:var(--ink);font:800 1rem var(--display);padding:12px 22px;border-radius:12px;text-decoration:none}
.btn:hover{background:var(--cyan-l);color:var(--ink)}
.badge-live{position:fixed;right:12px;bottom:12px;z-index:90;background:var(--emerald,#22C07A);color:#04210f;font:800 .8rem var(--body);padding:6px 12px;border-radius:999px;letter-spacing:.08em}

/* footer */
footer{background:var(--ink);border-top:1px solid var(--line);padding:50px 0 90px;font-size:.95rem;color:var(--muted)}
footer .cols{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
footer h2{font-size:1rem;color:var(--cream)}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:6px}
footer .legal{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);font-size:.85rem}

/* reveal */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s,transform .7s}
.js .reveal.in{opacity:1;transform:none}

/* reduced motion: static look, no loops, no tilt, no parallax */
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .wishlist,.wishlist::after{animation:none}
 .rainbow .l{animation:none;color:hsl(calc(var(--i) * 36) 100% 74%)}
 .js .reveal{opacity:1;transform:none;transition:none}
 .card{transform:none!important}
}

.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.pair figure{margin:0}.pair .shot{display:block;width:100%}.pair .cap{text-align:center}

/* launch-list signup */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.notify{position:relative;overflow:hidden;isolation:isolate;border-radius:28px;padding:clamp(28px,5vw,56px);display:grid;gap:26px;align-items:center;
  background:radial-gradient(ellipse at 15% 0%,rgba(255,194,51,.28),transparent 55%),radial-gradient(ellipse at 100% 100%,rgba(47,214,200,.25),transparent 55%),linear-gradient(135deg,var(--crimson),var(--night) 80%);
  border:3px solid var(--ink);box-shadow:0 0 0 2px var(--gold),0 30px 70px rgba(0,0,0,.5)}
@media(min-width:900px){.notify{grid-template-columns:1.05fr 1fr}}
.notify h2{font-size:clamp(2.2rem,6vw,4rem);margin-bottom:.3em;color:var(--gold-l);text-shadow:0 4px 0 rgba(30,10,36,.8)}
.notify .lead{color:var(--cream)}
.notify-gems i{position:absolute;z-index:-1;width:22px;height:22px;background:var(--cyan);transform:rotate(45deg);border-radius:4px;opacity:.5;animation:drift 7s ease-in-out infinite}
.notify-gems i:nth-child(1){left:6%;top:12%}.notify-gems i:nth-child(2){right:8%;top:10%;background:var(--pink);animation-delay:-2s}.notify-gems i:nth-child(3){right:30%;bottom:8%;background:var(--gold);animation-delay:-4s}.notify-gems i:nth-child(4){left:40%;top:6%;background:#9B4DFF;animation-delay:-1s;width:14px;height:14px}.notify-gems i:nth-child(5){left:3%;bottom:10%;background:var(--orange);animation-delay:-3s;width:16px;height:16px}
@keyframes drift{0%,100%{translate:0 0}50%{translate:0 -14px}}
.nf-row{display:flex;gap:10px;flex-wrap:wrap}
.nf-row input{flex:1 1 220px;min-width:0;font:600 1.15rem var(--body);color:var(--ink);background:var(--cream);border:3px solid var(--ink);border-radius:16px;padding:16px 18px;box-shadow:inset 0 3px 0 rgba(30,10,36,.12)}
.nf-row input::placeholder{color:#6b5a78}
.nf-row input:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.btn-notify{flex:0 0 auto;cursor:pointer;border:3px solid var(--ink);border-radius:16px;padding:16px 26px;font:800 1.15rem var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
  background:linear-gradient(180deg,var(--cyan-l),var(--cyan));box-shadow:0 6px 0 var(--ink),0 10px 30px rgba(47,214,200,.45);transition:transform .12s,box-shadow .12s}
.btn-notify:hover{transform:translateY(-2px)}
.btn-notify:active{transform:translateY(5px);box-shadow:0 1px 0 var(--ink)}
.btn-notify:disabled{opacity:.7;cursor:progress}
.notify .btn-notify{font-size:1.3rem;padding:18px 30px;animation:pulse-c 2.8s ease-in-out infinite}
@keyframes pulse-c{0%,100%{box-shadow:0 6px 0 var(--ink),0 10px 26px rgba(47,214,200,.35)}50%{box-shadow:0 6px 0 var(--ink),0 10px 60px rgba(47,214,200,.8)}}
.nf-fine{font-size:.88rem;color:var(--muted);margin:12px 0 0}
.nf-msg{min-height:1.4em;margin:8px 0 0;font-weight:700;font-size:.95rem}
.nf-msg.bad{color:#ffb3c7}
.nf-done{position:relative;padding:22px 24px;border-radius:18px;background:rgba(18,10,43,.75);border:2px solid var(--gold);display:grid;gap:6px;text-align:left}
.nf-done b{font:800 1.5rem var(--display);color:var(--gold-l)}
.burst{position:absolute;left:50%;top:50%;width:12px;height:12px;background:var(--c);transform:rotate(45deg);border-radius:3px;pointer-events:none;animation:burst 1.1s ease-out forwards}
@keyframes burst{from{opacity:1;translate:0 0}to{opacity:0;translate:calc(cos(var(--a))*130px) calc(sin(var(--a))*90px)}}
.notify-mini{width:min(100%,640px);margin-top:14px;background:rgba(18,10,43,.78);border:1px solid var(--line);border-radius:18px;padding:14px;backdrop-filter:blur(6px);text-align:left}
.nm-label{display:block;font:700 .95rem var(--body);margin-bottom:8px;color:var(--cream)}
.notify-mini .nf-row input{padding:12px 14px;font-size:1.05rem;border-radius:12px}
.notify-mini .btn-notify{padding:12px 20px;font-size:1rem;border-radius:12px}
.notify-mini .nf-msg{margin:4px 0 0;min-height:0}
.steam-live .notify-mini{display:none}
@media(prefers-reduced-motion:reduce){.notify-gems i,.notify .btn-notify{animation:none}.burst{display:none}}
.dl-shots a{padding:10px}
.dl-shots img{aspect-ratio:16/9;object-fit:cover;background:var(--deep);border-radius:10px}
.notify-gems{position:absolute;inset:0;pointer-events:none}
.dl img{height:auto}
dialog.lb img{background:repeating-conic-gradient(#2a1a5c 0 25%,#33206e 0 50%) 0 0/20px 20px;max-width:92vw}