/* ============================================================
   ASTRAL SEVER — Everreach Labs
   Design language lifted from the in-game SDF HUD.
   ============================================================ */

:root{
  --void:#05060A;
  --ink:#0A0C12;
  --ink2:#0E1118;
  --panel:rgba(255,255,255,.035);
  --panel2:rgba(255,255,255,.06);
  --line:rgba(215,215,215,.16);
  --line2:rgba(215,215,215,.28);
  --txt:#E9ECF1;
  /* both lifted for legibility on the near-black ground while keeping the
     three-step hierarchy: --txt > --dim (body) > --dim2 (micro HUD labels) */
  --dim:#8A919D;
  --dim2:#5E6673;
  --red:#FF2A32;
  --red2:#C1121A;
  --grn:#45E08D;
  --amber:#FFA53D;

  --t-common:#98A0AD;
  --t-rare:#3DA9FF;
  --t-epic:#B15CFF;

  --f-d:'Chakra Petch',"Eurostile","Bank Gothic",system-ui,sans-serif;
  --f-m:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --gut:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease2:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
body{
  margin:0;background:var(--void);color:var(--txt);
  font-family:var(--f-d);font-weight:400;font-size:16px;line-height:1.6;
  overflow-x:clip;-webkit-font-smoothing:antialiased;
}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0}
kbd{
  font-family:var(--f-m);font-size:.72em;border:1px solid var(--line2);
  border-radius:3px;padding:.1em .4em;background:rgba(255,255,255,.05);
}
::selection{background:var(--red);color:#fff}

.wrap{width:min(1440px,100% - var(--gut)*2);margin-inline:auto}

/* ---------- BOOT ---------- */
#boot{
  position:fixed;inset:0;z-index:9000;background:var(--void);
  display:grid;place-items:center;transition:opacity .5s var(--ease);
}
#boot.is-off{opacity:0;pointer-events:none}
.boot__inner{width:min(560px,86vw)}
.boot__mark{display:flex;align-items:center;gap:12px;color:var(--txt);margin-bottom:26px}
.sdf-mark{width:26px;height:29px;flex:none;animation:pulseM 2.4s infinite}
@keyframes pulseM{0%,100%{opacity:1}50%{opacity:.35}}
.boot__mark span{font-weight:700;letter-spacing:.16em;font-size:14px}
.boot__mark em{font-style:normal;font-size:9px;letter-spacing:.24em;color:var(--dim);display:block;margin-top:2px}
.boot__log{
  font-family:var(--f-m);font-size:11.5px;line-height:1.85;color:var(--dim);
  margin:0 0 20px;height:150px;overflow:hidden;white-space:pre-wrap;
}
.boot__log b{color:var(--grn);font-weight:400}
.boot__log i{color:var(--red);font-style:normal}
.boot__bar{height:2px;background:rgba(255,255,255,.08);overflow:hidden}
.boot__bar i{display:block;height:100%;width:0;background:var(--red);box-shadow:0 0 12px var(--red)}
.boot__pct{font-family:var(--f-m);font-size:10px;color:var(--dim);margin-top:8px;letter-spacing:.2em}
.boot__skip{
  position:absolute;bottom:32px;right:32px;font-family:var(--f-m);font-size:10px;
  letter-spacing:.2em;color:var(--dim2);cursor:pointer;transition:color .2s;
}
.boot__skip:hover{color:var(--txt)}

/* ---------- CHROME OVERLAYS ---------- */
.grain,.scanlines,.vignette{position:fixed;inset:0;pointer-events:none;z-index:400}
.grain{
  opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(4) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}}
.scanlines{
  opacity:.5;
  background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,.28) 2px 3px);
  mix-blend-mode:multiply;
}
.vignette{background:radial-gradient(ellipse at 50% 45%,transparent 40%,rgba(0,0,0,.55) 100%);z-index:399}

.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:500;background:rgba(255,255,255,.05)}
.progress i{display:block;height:100%;width:0;background:var(--red);box-shadow:0 0 10px var(--red)}

/* ---------- CURSOR ---------- */
.cursor{position:fixed;top:0;left:0;z-index:600;pointer-events:none;mix-blend-mode:difference}
.cursor__ring,.cursor__dot{position:absolute;border-radius:50%;transform:translate(-50%,-50%)}
.cursor__ring{width:30px;height:30px;border:1px solid rgba(255,255,255,.75);transition:width .25s var(--ease),height .25s var(--ease),border-color .25s,border-radius .25s}
.cursor__dot{width:3px;height:3px;background:#fff}
.cursor.is-link .cursor__ring{width:52px;height:52px;border-color:var(--red)}
.cursor.is-grab .cursor__ring{width:16px;height:16px;border-width:2px}
.cursor.is-down .cursor__ring{width:20px;height:20px}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ---------- RAIL ---------- */
.rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:290;display:flex;flex-direction:column;gap:11px}
.rail__i{width:12px;height:2px;background:rgba(255,255,255,.22);transition:.35s var(--ease)}
.rail__i.is-on{width:26px;background:var(--red);box-shadow:0 0 8px var(--red)}

/* ---------- BUTTONS ---------- */
.btn{
  --bg:transparent;--bd:var(--line2);--fg:var(--txt);
  display:inline-flex;align-items:center;gap:12px;cursor:pointer;position:relative;
  padding:14px 26px;border:1px solid var(--bd);background:var(--bg);color:var(--fg);
  font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  overflow:hidden;transition:color .3s,border-color .3s;
}
.btn::before{content:"";position:absolute;inset:0;background:var(--red);transform:translateY(101%);transition:transform .38s var(--ease);z-index:0}
.btn>*{position:relative;z-index:1}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:#fff;border-color:var(--red)}
.btn i{font-style:normal;transition:transform .3s var(--ease)}
.btn:hover i{transform:translateX(4px)}
.btn__ic{width:15px;height:15px;flex:none;margin-right:-4px}
.btn--red{border-color:var(--red);color:var(--red)}
.btn--red::before{background:var(--red)}
.btn--ghost{border-color:var(--line2);color:var(--dim)}
.btn--deploy{
  width:100%;justify-content:center;flex-wrap:wrap;padding:13px 20px;margin-top:auto;
  border-color:var(--red);color:var(--red);gap:4px 12px;
}
.btn--deploy em{font-style:normal;font-size:9px;letter-spacing:.16em;opacity:.7;width:100%;text-align:center;font-weight:400}
.btn--deploy i{position:absolute;right:20px;top:50%;transform:translateY(-50%)}
.btn--deploy:hover i{transform:translateY(-50%) translateX(4px)}

/* ---------- SHARED BITS ---------- */
.tag{
  display:inline-block;font-family:var(--f-m);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--dim);
}
.tag--red{color:var(--red)}
.sec-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.sec-idx{font-family:var(--f-m);font-size:11px;color:var(--red)}
.sec-tag{font-family:var(--f-m);font-size:10px;letter-spacing:.24em;color:var(--dim);position:relative;padding-left:44px}
.sec-tag::before{content:"";position:absolute;left:0;top:50%;width:34px;height:1px;background:var(--line2)}
.sec-h{
  font-size:clamp(38px,6.4vw,84px);line-height:.98;font-weight:700;letter-spacing:-.02em;
  margin:0 0 44px;text-transform:uppercase;
}
.sec-h__sub{
  display:block;font-size:clamp(13px,1.2vw,16px);font-weight:400;letter-spacing:.02em;
  text-transform:none;color:var(--dim);margin-top:14px;max-width:44ch;line-height:1.55;
}
.lede{color:var(--dim);font-size:clamp(14px,1.2vw,17px);line-height:1.7;max-width:52ch}
.panel{background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(12px)}
.panel__h{font-size:11px;letter-spacing:.2em;color:var(--dim);margin:0 0 16px;font-weight:600}
.panel__note{font-size:11.5px;color:var(--dim2);line-height:1.6;margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.panel__note b{color:var(--txt)}
.kv{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid rgba(215,215,215,.08)}
.kv span{font-family:var(--f-m);font-size:9.5px;letter-spacing:.16em;color:var(--dim2);text-transform:uppercase}
.kv b{font-size:13px;font-weight:600;letter-spacing:.04em}
.kv b i{font-style:normal}
.is-grn{color:var(--grn)}.is-red{color:var(--red)}.is-amber{color:var(--amber)}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:7px;flex:none}
.dot--red{background:var(--red)}.dot--grn{background:var(--grn)}.dot--amb{background:var(--amber)}
.hud-line{height:2px;background:rgba(255,255,255,.1);overflow:hidden}
.hud-line--tall{height:3px}
.hud-line i{display:block;height:100%;background:var(--red);box-shadow:0 0 8px var(--red);transition:width .6s var(--ease)}
.seg{display:flex;gap:3px}
.seg i{flex:1;height:5px;background:#D7D7D7}
.seg i.dmg{background:var(--red)}
.seg i.off{background:rgba(255,255,255,.14)}
.seg--lg i{height:9px}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden}
.hero__media{position:absolute;inset:-6% -3%;z-index:0}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover}
.hero__poster{position:absolute;inset:0}
.hero__video{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease)}
.hero__video.is-on{opacity:1}
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to bottom,rgba(5,6,10,.75) 0%,rgba(5,6,10,.15) 28%,rgba(5,6,10,.35) 62%,var(--void) 100%),
    radial-gradient(ellipse at 50% 70%,transparent 30%,rgba(5,6,10,.7) 100%);
}
.hero__hud{
  position:relative;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;
  gap:20px;padding:38px var(--gut) 0;
}
.hud-obj{font-size:clamp(20px,2.4vw,30px);font-weight:700;letter-spacing:.02em;text-transform:uppercase;line-height:1.1;margin-top:6px}
.hud-sub{font-family:var(--f-m);font-size:10px;letter-spacing:.16em;color:var(--dim);margin:5px 0 8px}
.hud-sub b{color:var(--txt);font-weight:400}
.hud-tl .hud-line{width:min(280px,32vw)}
.hud-tc{text-align:center;justify-self:center;min-width:min(340px,40vw)}
.hud-titan span{font-family:var(--f-m);font-size:12px;letter-spacing:.2em}
.hud-titan em{font-style:normal;font-family:var(--f-m);font-size:12px;letter-spacing:.14em;color:var(--red)}
.hud-integrity{margin-top:8px;display:flex;align-items:center;gap:12px}
.hud-integrity__label{font-family:var(--f-m);font-size:8.5px;letter-spacing:.18em;color:var(--dim);white-space:nowrap}
.hud-integrity .seg{flex:1}
.hud-tr{text-align:right;justify-self:end}
.hud-debt{font-family:var(--f-m);font-size:11px;letter-spacing:.14em;color:var(--dim);margin-top:8px}
.hud-debt b{color:var(--red);font-weight:600}

.hero__body{position:relative;z-index:2;margin-top:auto;padding:0 var(--gut);text-align:center}
.title{margin:0;line-height:.82;font-weight:700;text-transform:uppercase;letter-spacing:-.03em}
/* height-aware so the hero still fits (HUD + title + CTAs + readouts) on short viewports */
.title__l{display:block;font-size:clamp(52px,min(15.5vw,21svh),230px)}
.title__l--red{
  color:transparent;-webkit-text-stroke:1.5px var(--red);
  position:relative;
}
.title span.ch{display:inline-block;will-change:transform,opacity}
.title.is-glitch .title__l{animation:glitch .34s steps(2) 2}
@keyframes glitch{
  0%{transform:translate(0,0);filter:none}
  25%{transform:translate(-4px,2px);filter:drop-shadow(3px 0 var(--red)) drop-shadow(-3px 0 var(--grn))}
  50%{transform:translate(4px,-2px)}
  75%{transform:translate(-2px,-1px);filter:drop-shadow(-3px 0 var(--red))}
  100%{transform:translate(0,0)}
}
.hero__kicker{
  margin:22px auto 0;max-width:46ch;font-size:clamp(13px,1.35vw,17px);color:var(--dim);
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
}
.hero__kicker em{font-style:normal;color:var(--red);font-weight:600}
.hero__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}

.hero__foot{
  position:relative;z-index:2;margin-top:auto;
  display:flex;align-items:flex-end;gap:clamp(20px,4vw,60px);
  padding:44px var(--gut) 30px;flex-wrap:wrap;
}
.readout{display:flex;flex-direction:column;gap:5px}
.readout--wide{margin-left:auto;align-items:flex-end;text-align:right}
.readout__k{font-family:var(--f-m);font-size:8.5px;letter-spacing:.22em;color:var(--dim2)}
.readout__v{font-family:var(--f-m);font-size:11px;letter-spacing:.14em;font-weight:500}
.readout__v--red{color:var(--red)}.readout__v--grn{color:var(--grn)}.readout__v--amb{color:var(--amber)}
.spark,.wave{opacity:.85}
.scrollcue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-family:var(--f-m);font-size:8.5px;letter-spacing:.28em;color:var(--dim2);
}
.scrollcue i{width:1px;height:40px;background:linear-gradient(to bottom,transparent,var(--red));animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- RESONANCE ---------- */
.reso{padding:clamp(90px,13vw,170px) 0;background:linear-gradient(to bottom,var(--void),var(--ink),var(--void))}
/* stretch, not start — the two panels must bottom out on the same line */
.reso__grid{display:grid;grid-template-columns:1.65fr 1fr;gap:24px;align-items:stretch}
.reso__main{padding:clamp(24px,3vw,40px)}
.reso__top{display:flex;gap:clamp(24px,4vw,56px);align-items:center;flex-wrap:wrap;margin-bottom:30px}
.reso__dial{position:relative;width:190px;height:190px;flex:none}
.reso__dial svg{width:100%;height:100%;transform:rotate(-90deg)}
.dial__bg{fill:none;stroke:rgba(255,255,255,.08);stroke-width:5}
.dial__fg{fill:none;stroke:var(--grn);stroke-width:5;stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:117;filter:drop-shadow(0 0 6px currentColor);transition:stroke .3s}
.reso__num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:3px;font-family:var(--f-m);pointer-events:none}
.reso__num b{font-size:44px;font-weight:700;letter-spacing:-.04em;line-height:1}
/* nudge the % down so it sits on the number's baseline, not its centre */
.reso__num span{font-size:15px;color:var(--dim);line-height:1;transform:translateY(14px)}
.reso__state{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  font-family:var(--f-m);font-size:9px;letter-spacing:.22em;color:var(--grn);white-space:nowrap;
}
.reso__meta{flex:1;min-width:250px}
.reso__wave{width:100%;height:auto;margin-bottom:34px;opacity:.9}
.band{position:relative;height:44px;cursor:grab;touch-action:none;outline:none}
.band:active{cursor:grabbing}
.band:focus-visible .band__knob{box-shadow:0 0 0 3px rgba(255,42,50,.35)}
.band__track{position:absolute;top:18px;left:0;right:0;height:8px;display:flex;overflow:hidden}
.band__zone{height:100%}
/* escalating gauge: stable -> elevated -> overcharge */
.band__zone--safe{width:50%;background:linear-gradient(90deg,rgba(69,224,141,.30),rgba(69,224,141,.20))}
.band__zone--warn{width:30%;background:linear-gradient(90deg,rgba(255,165,61,.22),rgba(255,165,61,.42))}
.band__zone--high{width:20%;background:linear-gradient(90deg,rgba(255,42,50,.45),var(--red))}
/* thinner than the zone track so the radiation / optimal / overcharge bands stay readable behind it */
.band__fill{position:absolute;top:20px;left:0;height:4px;background:var(--grn);box-shadow:0 0 14px var(--grn);width:64%;transition:background .25s,box-shadow .25s}
.band__knob{
  position:absolute;top:22px;left:64%;transform:translate(-50%,-50%);
  width:20px;height:20px;border:2px solid #fff;background:var(--void);border-radius:50%;
  display:grid;place-items:center;transition:box-shadow .2s;
}
.band__knob i{width:5px;height:5px;background:#fff;border-radius:50%}
.band__ticks{position:absolute;top:32px;left:0;right:0;height:14px}
.band__ticks span{position:absolute;transform:translateX(-50%);font-family:var(--f-m);font-size:8.5px;letter-spacing:.16em;color:var(--dim2);white-space:nowrap}
.band__legend{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px}
.band__legend span{display:flex;align-items:center;font-family:var(--f-m);font-size:9.5px;letter-spacing:.1em;color:var(--dim2)}
.reso__side{padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column}
/* the tune note sits on the panel floor so the extra height reads as a footer */
.reso__side .panel__note{margin-top:auto}
.costs{list-style:none;margin:0;padding:0}
.costs li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid rgba(215,215,215,.08);font-size:12.5px}
.costs li .ic{width:16px;height:16px;flex:none;color:var(--dim2)}
.costs li .ic path{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.costs li:hover .ic{color:var(--txt)}
.costs li b{font-weight:500;letter-spacing:.1em;font-size:11px;color:var(--dim)}
.costs li i{margin-left:auto;font-style:normal;font-family:var(--f-m);font-weight:500;font-size:12.5px;color:var(--grn);transition:color .25s}
.costs li i.is-mid{color:var(--amber)}
.costs li i.is-bad{color:var(--red)}

/* ---------- RIFTS ---------- */
.rifts{position:relative;padding:clamp(90px,13vw,170px) 0;overflow:hidden}
/* blurred right down — it's texture behind the panel, not a second readable globe */
.rifts__bg{position:absolute;inset:-10% 0;z-index:0;opacity:.13}
.rifts__bg img{width:100%;height:100%;object-fit:cover;filter:blur(4px) grayscale(.5)}
.rifts .wrap{position:relative;z-index:1}
/* stretch so the list, globe and detail panel all bottom out together */
.rifts__grid{display:grid;grid-template-columns:290px 1fr 340px;gap:26px;align-items:stretch}
.rifts__list{display:flex;flex-direction:column;gap:10px;justify-content:space-between}
.rift{
  position:relative;display:grid;gap:3px;text-align:left;padding:16px 18px;cursor:pointer;
  border:1px solid var(--line);background:rgba(10,12,18,.6);backdrop-filter:blur(10px);
  transition:border-color .3s,background .3s,transform .3s var(--ease);
}
.rift:hover{border-color:var(--line2);transform:translateX(4px)}
.rift.is-on{border-color:var(--red);background:rgba(255,42,50,.07)}
.rift__id{font-size:16px;font-weight:700;letter-spacing:.06em}
.rift__mag{font-family:var(--f-m);font-size:9px;letter-spacing:.18em;color:var(--dim)}
.rift__threat{font-family:var(--f-m);font-size:9.5px;letter-spacing:.14em;margin-top:6px}
.rift__glyph{position:absolute;right:16px;top:15px;color:var(--red);font-style:normal;font-family:var(--f-m);font-size:12px;letter-spacing:.1em}

.rifts__globe{
  position:relative;min-height:460px;overflow:hidden;
  border:1px solid var(--line);background:radial-gradient(ellipse at 50% 55%,#0B0F17,var(--void) 70%);
  cursor:grab;touch-action:pan-y;
}
.rifts__globe:active{cursor:grabbing}
.rifts__globe.is-over{cursor:pointer}
/* absolute, so it fills the stage even where the stage height comes from
   min-height/aspect-ratio and a percentage height would not resolve */
#riftGlobe{position:absolute;inset:0;width:100%;height:100%;display:block}

/* HUD frame corners */
.globe__corner{position:absolute;width:14px;height:14px;border:1px solid var(--line2);pointer-events:none}
.globe__corner--tl{top:8px;left:8px;border-right:0;border-bottom:0}
.globe__corner--tr{top:8px;right:8px;border-left:0;border-bottom:0}
.globe__corner--bl{bottom:8px;left:8px;border-right:0;border-top:0}
.globe__corner--br{bottom:8px;right:8px;border-left:0;border-top:0}

.globe__hud{
  position:absolute;top:14px;left:18px;pointer-events:none;
  font-family:var(--f-m);font-size:8.5px;letter-spacing:.22em;line-height:1.7;
}
.globe__hud span{color:var(--dim2);display:block}
.globe__hud b{color:var(--grn);font-weight:500}
.globe__hint{
  position:absolute;bottom:12px;right:16px;pointer-events:none;
  font-family:var(--f-m);font-size:8.5px;letter-spacing:.22em;color:var(--dim2);
  transition:opacity .4s;
}
.rifts__globe.is-touched .globe__hint{opacity:0}

/* titan popup — small card pinned to the selected marker, positioned each
   frame by the globe so it tracks the site as the planet turns */
.tpop{
  position:absolute;top:0;left:0;width:176px;pointer-events:none;
  border:1px solid rgba(255,42,50,.45);background:rgba(8,10,16,.94);
  backdrop-filter:blur(8px);
  opacity:0;transform:translate(0,0) scale(.94);transform-origin:0 100%;
  transition:opacity .22s var(--ease),scale .22s var(--ease);
  box-shadow:0 10px 30px rgba(0,0,0,.6);
}
.tpop.is-on{opacity:1}
.tpop::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--red)}
.tpop__img{height:92px;overflow:hidden;background:rgba(255,255,255,.03);display:grid;place-items:center}
.tpop__img img{max-height:100%;max-width:100%;width:auto;object-fit:contain}
.tpop.is-noart .tpop__img{display:none}
.tpop__body{padding:9px 11px;font-family:var(--f-m)}
.tpop__body span{display:block;font-size:7.5px;letter-spacing:.24em;color:var(--dim2)}
.tpop__body b{display:block;font-size:14px;letter-spacing:.1em;color:var(--txt);font-weight:700;margin:2px 0 1px}
.tpop__body i{font-style:normal;font-size:8px;letter-spacing:.16em;color:var(--red)}

/* rift callouts — positioned per frame from the projection */
.globe__labels{position:absolute;inset:0;pointer-events:none}
.glab{
  position:absolute;top:0;left:0;white-space:nowrap;
  font-family:var(--f-m);font-size:9px;letter-spacing:.16em;
  transform-origin:0 50%;opacity:0;transition:opacity .25s;
}
.glab b{display:block;color:var(--txt);font-weight:500}
.glab i{font-style:normal;font-size:8px;color:var(--dim2)}
.glab.is-on b{color:var(--red)}
.glab.is-on i{color:var(--red);opacity:.75}

.rifts__panel{padding:clamp(16px,1.9vw,22px);display:flex;flex-direction:column}
.rifts__ph{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:2px}
.rifts__ph b{font-size:20px;font-weight:700;letter-spacing:.04em}
.rifts__ph span{font-family:var(--f-m);font-size:9.5px;letter-spacing:.2em}
.rifts__odds{margin-top:12px}
.rifts__odds>span{font-family:var(--f-m);font-size:9px;letter-spacing:.2em;color:var(--dim2);display:block}
.rifts__odds>b{font-family:var(--f-m);font-size:27px;font-weight:700;letter-spacing:-.03em;display:block;margin:1px 0 7px}
.rifts__haz{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.rifts__haz em{
  font-style:normal;font-family:var(--f-m);font-size:8px;letter-spacing:.12em;
  border:1px solid var(--line);padding:4px 7px;color:var(--dim);
}
.rifts__haz em.hi{border-color:rgba(255,42,50,.5);color:var(--red)}

.rifts__rows .kv{padding:4px 0}

/* ---------- OPERATORS ---------- */
.ops{
  --acc:#E8B429;
  position:relative;padding:clamp(90px,13vw,170px) 0;
  background:linear-gradient(to bottom,var(--void),var(--ink) 45%,var(--void));
}

.ops__stage{
  display:grid;grid-template-columns:minmax(230px,300px) 1fr minmax(240px,320px);
  gap:clamp(20px,3vw,48px);align-items:center;
}

/* --- info, left */
.ops__info h3{
  font-size:clamp(30px,3.8vw,52px);font-weight:700;letter-spacing:.03em;
  margin:10px 0 4px;text-transform:uppercase;line-height:1;
}
.ops__class{
  display:block;font-family:var(--f-m);font-size:10px;letter-spacing:.24em;
  color:var(--acc);transition:color .4s var(--ease);
}
.ops__desc{margin:20px 0 0;color:var(--dim);font-size:14px;line-height:1.75}
.ops__nav{display:flex;align-items:center;gap:16px;margin-top:26px}
.opnav{
  width:42px;height:42px;flex:none;cursor:pointer;display:grid;place-items:center;
  border:1px solid var(--line2);color:var(--txt);font-size:20px;line-height:1;
  transition:border-color .25s,background .25s,color .25s;
}
.opnav:hover{border-color:var(--acc);color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent)}
.ops__count{font-family:var(--f-m);font-size:11px;letter-spacing:.18em;color:var(--dim2)}
.ops__count b{color:var(--txt);font-weight:500}

/* --- stage, centre */
.ops__view{
  --stage-h:clamp(400px,60vh,640px);
  position:relative;height:var(--stage-h);overflow:hidden;
  cursor:grab;touch-action:pan-y;user-select:none;
}
.ops__view:active{cursor:grabbing}
.ops__track{display:flex;height:100%;will-change:transform;transition:transform .55s var(--ease)}
.ops__track.no-anim{transition:none}
.opslide{flex:0 0 100%;margin:0;display:grid;place-items:end center;height:100%}
/* explicit height, not 100% — a percentage max-height doesn't resolve against
   the grid area, so the figures rendered at natural size (760px) and the whole
   lower body was clipped by the stage's overflow */
.opslide img{
  max-height:var(--stage-h);height:var(--stage-h);width:auto;max-width:100%;
  object-fit:contain;object-position:50% 100%;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.8));
  pointer-events:none;
}
/* accent pool the operator stands in */
.ops__glow{
  position:absolute;left:50%;bottom:-4%;translate:-50% 0;
  width:74%;aspect-ratio:1/.42;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--acc) 46%,transparent),transparent 68%);
  transition:background .5s var(--ease);
}
.ops__floor{
  position:absolute;left:8%;right:8%;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--acc) 70%,transparent),transparent);
}

/* --- stats, right */
.ops__panel{
  border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(12px);
  padding:clamp(18px,2.2vw,26px);
}
.ops__stats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.ops__stats li{display:grid;grid-template-columns:1fr 34px;grid-template-areas:"lbl val" "bar bar";gap:6px 10px}
.ops__stats span{grid-area:lbl;font-family:var(--f-m);font-size:8.5px;letter-spacing:.18em;color:var(--dim2)}
.ops__stats em{grid-area:val;font-style:normal;font-family:var(--f-m);font-size:11px;color:var(--txt);text-align:right}
.ops__stats i{grid-area:bar;display:block;height:3px;background:rgba(255,255,255,.09);position:relative;overflow:hidden}
.ops__stats i b{
  position:absolute;inset:0 auto 0 0;width:0;background:var(--acc);
  box-shadow:0 0 8px var(--acc);transition:width .6s var(--ease),background .4s var(--ease);
}

/* --- name rail under the stage */
.ops__dots{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:clamp(24px,3vw,40px)}
.opdot{
  --acc:var(--line2);
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:10px 18px;border:1px solid var(--line);background:transparent;
  font-family:var(--f-m);font-size:10px;letter-spacing:.2em;color:var(--dim);
  transition:color .25s,border-color .25s,background .25s;
}
.opdot i{width:6px;height:6px;border-radius:50%;background:var(--acc);opacity:.45;transition:opacity .25s}
.opdot:hover{color:var(--txt);border-color:var(--line2)}
.opdot.is-on{color:var(--txt);border-color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent)}
.opdot.is-on i{opacity:1;box-shadow:0 0 8px var(--acc)}

@media(max-width:1080px){
  .ops__stage{grid-template-columns:1fr;gap:24px}
  .ops__view{order:-1;--stage-h:clamp(340px,52vh,500px)}
}

/* ---------- LOADOUT ---------- */
.load{padding:clamp(90px,13vw,170px) 0;background:var(--ink)}
.load__wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.load__detail{margin-top:36px;border:1px solid var(--line);background:var(--panel);padding:26px;min-height:250px}
.load__slot{font-family:var(--f-m);font-size:9px;letter-spacing:.22em;color:var(--red)}
.load__detail h3{font-size:clamp(22px,2.6vw,32px);margin:10px 0 12px;font-weight:700;text-transform:uppercase;letter-spacing:-.01em}
.load__detail p{margin:0;color:var(--dim);font-size:14px;line-height:1.7;min-height:72px}
.load__meta{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.load__meta .kv{flex-direction:column;align-items:flex-start;gap:5px;border:0;padding:0}
.load__wheel{position:relative;display:grid;place-items:center}
.wheel__title{
  font-family:var(--f-m);font-size:11px;letter-spacing:.3em;color:var(--dim);
  text-transform:uppercase;margin-bottom:10px;
}
.wheel{width:min(500px,92%);height:auto;overflow:visible}
.wseg{cursor:pointer}
.wseg__bg{
  fill:rgba(14,17,24,.82);stroke:rgba(215,215,215,.13);stroke-width:1.2;
  transition:fill .28s var(--ease),stroke .28s;
}
.wseg:hover .wseg__bg{fill:rgba(24,29,40,.9);stroke:rgba(215,215,215,.3)}
.wseg.is-on .wseg__bg{fill:rgba(69,224,141,.1);stroke:var(--grn);stroke-width:1.6;filter:url(#wglow)}
.wseg__ic path{fill:none;stroke:var(--txt);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .28s,fill .28s}
.wseg--fill .wseg__ic path{fill:var(--txt);stroke:none}
.wseg.is-on .wseg__ic path{stroke:var(--grn)}
.wseg--fill.is-on .wseg__ic path{fill:var(--grn);stroke:none}
.wseg__n{fill:var(--txt);font-family:var(--f-d);font-size:21px;font-weight:700;text-anchor:middle;transition:fill .28s}
.wseg.is-on .wseg__n{fill:var(--grn)}
.wseg__l{fill:var(--dim);font-family:var(--f-m);font-size:8.5px;letter-spacing:.16em;text-anchor:middle;transition:fill .28s}
.wseg.is-on .wseg__l{fill:var(--grn)}
.wheel__pin path{fill:var(--grn);filter:drop-shadow(0 0 5px var(--grn))}
.wheel__pin{transition:transform .35s var(--ease)}
/* sits in the notch at the bottom of the ring, like the in-game wheel */
.wheel__use rect{fill:rgba(255,255,255,.07);stroke:var(--line2);stroke-width:1.2}
.wheel__use-k{fill:var(--txt);font-family:var(--f-m);font-size:15px;font-weight:700;text-anchor:middle}
.wheel__use-t{fill:var(--dim);font-family:var(--f-m);font-size:12px;letter-spacing:.2em}
.load__hint{margin-top:20px;font-family:var(--f-m);font-size:9px;letter-spacing:.24em;color:var(--dim2)}

@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* ---------- BLACK MARKET ---------- */
/* Rarity is its own semantic axis, so it gets its own hues rather than
   reusing the red/green the HUD already spends on danger and resonance. */
.mkt{padding:clamp(90px,13vw,170px) 0;background:linear-gradient(to bottom,var(--void),var(--ink) 40%,var(--void))}
.mkt__bar{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-bottom:20px;margin-bottom:28px;border-bottom:1px solid var(--line);
}
.mkt__filters{display:flex;gap:8px;flex-wrap:wrap}
.mfil{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:9px 16px;border:1px solid var(--line);background:transparent;
  font-family:var(--f-m);font-size:10px;letter-spacing:.2em;color:var(--dim);
  transition:color .25s,border-color .25s,background .25s;
}
.mfil:hover{color:var(--txt);border-color:var(--line2)}
.mfil.is-on{color:var(--txt);border-color:var(--red);background:rgba(255,42,50,.08)}
.tier-dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}
.tier-dot--common{background:var(--t-common)}
.tier-dot--rare{background:var(--t-rare)}
.tier-dot--epic{background:var(--t-epic)}
.mkt__creds{display:flex;align-items:baseline;gap:12px}
.mkt__creds span{font-family:var(--f-m);font-size:9.5px;letter-spacing:.22em;color:var(--dim2)}
.mkt__creds b{font-family:var(--f-m);font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--grn)}
.mkt__creds b::after{content:" cr";font-size:11px;color:var(--dim2);font-weight:400;letter-spacing:.1em}

/* 4 across — one rarity is shown at a time and no tier exceeds 8 listings,
   so every view lands inside a 4x2 grid */
.mkt__disclaimer{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 0 18px;padding:11px 14px;
  border:1px solid rgba(255,165,61,.35);background:rgba(255,165,61,.07);
  font-family:var(--f-m);font-size:10.5px;letter-spacing:.08em;color:var(--dim);
}
.mkt__disclaimer span{
  flex:none;font-size:8.5px;letter-spacing:.22em;color:var(--amber);
  border:1px solid rgba(255,165,61,.5);padding:3px 8px;
}
.mkt__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1180px){.mkt__grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.mkt__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.mkt__grid{grid-template-columns:1fr}}
.mkt__msg{
  font-family:var(--f-m);font-size:11px;letter-spacing:.14em;min-height:20px;
  margin:20px 0 0;color:var(--grn);
}
.mkt__msg.is-bad{color:var(--red)}

.item{
  --tier:var(--t-common);
  position:relative;display:flex;flex-direction:column;
  border:1px solid var(--line);background:var(--panel);padding:16px;
  transition:border-color .3s,transform .35s var(--ease),background .3s;
}
.item--rare{--tier:var(--t-rare)}
.item--epic{--tier:var(--t-epic)}
.item::before{
  content:"";position:absolute;left:0;top:0;width:2px;height:0;background:var(--tier);
  transition:height .4s var(--ease);
}
.item:hover{transform:translateY(-4px);border-color:rgba(215,215,215,.3);background:var(--panel2)}
.item:hover::before{height:100%}
.item.is-owned{opacity:.5}
/* Entrance is a CSS animation, not a JS tween. The resting state of .item is
   already visible, and `backwards` only applies the from-state during the
   delay — so a stalled or never-fired animation still leaves the card on
   screen. A GSAP from-tween parked the whole grid at opacity 0 instead. */
@keyframes itemIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.item.is-in{animation:itemIn .5s var(--ease) backwards;animation-delay:calc(var(--d,0) * 45ms)}
.item__top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.item__tier{
  font-family:var(--f-m);font-size:8.5px;letter-spacing:.22em;color:var(--tier);
  border:1px solid var(--tier);padding:3px 8px;
}
.item__stock{font-family:var(--f-m);font-size:8.5px;letter-spacing:.16em;color:var(--dim2)}
.item__art{
  --art-h:180px;
  position:relative;display:grid;place-items:center;height:var(--art-h);margin-bottom:16px;
  background:radial-gradient(ellipse at 50% 62%,color-mix(in srgb,var(--tier) 20%,transparent),transparent 68%);
}
/* px, not 100% — a percentage max-height doesn't resolve against the grid area
   here, so the art overflowed and got clipped square */
.item__art img{
  max-height:var(--art-h);max-width:100%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.75));
  transition:transform .55s var(--ease);
}
.item:hover .item__art img{transform:scale(1.07)}
.item__name{font-size:16px;font-weight:600;letter-spacing:-.01em;margin:0 0 5px}
.item__cat{font-family:var(--f-m);font-size:8.5px;letter-spacing:.2em;color:var(--dim2)}
.item__desc{font-size:12px;color:var(--dim);line-height:1.6;margin:12px 0 0}
.item__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:16px;
}
.item__price{font-family:var(--f-m);font-size:17px;font-weight:700;letter-spacing:-.02em}
.item__price em{font-style:normal;font-size:10px;color:var(--dim2);font-weight:400;margin-left:2px}
.item__buy{
  cursor:pointer;padding:8px 14px;border:1px solid var(--tier);color:var(--tier);
  font-family:var(--f-m);font-size:9.5px;letter-spacing:.18em;
  transition:background .25s,color .25s;
}
.item__buy:hover{background:var(--tier);color:var(--void)}
.item__buy[disabled]{border-color:var(--line);color:var(--dim2);cursor:not-allowed;background:none}
.item.is-broke .item__buy{border-color:rgba(255,42,50,.5);color:var(--red)}
.item.is-shake{animation:shake .35s}

/* ---------- HERO ON SMALL SCREENS ---------- */
/* At 390x844 the three HUD blocks (241px) and three readouts (268px) left the
   title no air at all. Keep the contract line and the resonance trace — the two
   that carry the fiction — and drop the rest rather than shrinking everything. */
@media(max-width:760px){
  .hero__hud{gap:10px;padding-top:24px}
  .hud-tc{display:none}                     /* titan integrity bar — unreadable this small */
  .hud-tr{display:none}                     /* bio-pressure + debt */
  .hud-obj{font-size:19px}
  .hud-tl .hud-line{width:min(220px,60vw)}

  .hero__body{padding-block:8px}
  .hero__kicker{margin-top:16px;gap:4px}
  .hero__cta{margin-top:22px;gap:10px;flex-wrap:nowrap}
  /* side by side — "WISHLIST ON" is dropped below so the labels still fit */
  .hero__cta .btn{flex:1;min-width:0;justify-content:center;padding-inline:14px;letter-spacing:.12em}

  /* bottom padding leaves the absolutely-positioned scroll cue its own lane */
  .hero__foot{gap:14px;padding:24px var(--gut) 66px}
  .hero__foot .readout:not(.readout--wide){display:none}   /* keep only resonance */
  .readout--wide{width:100%}
  .readout--wide .wave{width:100%}
  .scrollcue{bottom:14px}
  .scrollcue i{height:26px}
}

/* "WISHLIST ON STEAM" is too long for two buttons on one phone row —
   drop the prefix and let the store name carry it. */
@media(max-width:760px){ .btn__pre{display:none} }

/* ---------- TOUCH TARGETS ---------- */
/* Coarse pointers need ~44px. Keyed on width as well as pointer type — a
   touchscreen laptop doesn't always report `pointer:coarse`, but a 760px
   viewport is a phone either way. */
@media (max-width:760px),(hover:none),(pointer:coarse){
  .opdot{padding:14px 18px}
  .mfil{padding:13px 16px}
  .item__buy{padding:13px 16px}
  .opnav{width:48px;height:48px}
  .foot__legal a{padding:13px 0}
  .rift{padding:18px}
  .load__hint{display:none}
}

/* ---------- SECTION POWER-ON ---------- */
/* Fires every time a section scrolls into view. Every keyframe ENDS at the
   element's natural state and none use `forwards`, so a skipped or stalled
   animation leaves the section fully visible — the effect is purely additive. */
.reso,.load,.mkt{position:relative}

.pwr{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden;opacity:0}
.is-boot .pwr{animation:pwrTint .9s var(--ease)}
@keyframes pwrTint{
  0%{opacity:0;background:transparent}
  6%{opacity:1;background:rgba(233,236,241,.05)}
  40%{opacity:1;background:rgba(233,236,241,.015)}
  100%{opacity:0;background:transparent}
}

/* boot readout in the section's top-left gutter */
.pwr__msg{
  position:absolute;top:clamp(20px,4vw,54px);left:var(--gut);
  font-family:var(--f-m);font-size:9px;letter-spacing:.24em;color:var(--grn);
  white-space:nowrap;opacity:0;
}
.is-boot .pwr__msg{animation:pwrMsg 1.5s var(--ease)}
@keyframes pwrMsg{
  0%{opacity:0}
  10%{opacity:1}
  16%{opacity:.2}
  22%{opacity:1}
  70%{opacity:1}
  100%{opacity:0}
}

/* CRT-ish flicker on the section's content */
.is-boot > .wrap,
.is-boot > .rifts__bg + .wrap{animation:pwrIn .78s var(--ease)}
/* opacity + brightness only — blurring a whole section every time it scrolls
   into view is expensive on integrated GPUs, and the stutter reads the same */
@keyframes pwrIn{
  0%{opacity:0;filter:brightness(2.6)}
  9%{opacity:1}
  14%{opacity:.22}
  21%{opacity:1}
  30%{opacity:.55}
  40%{opacity:1;filter:brightness(1.4)}
  70%{filter:brightness(1.08)}
  100%{opacity:1;filter:none}
}

@media(prefers-reduced-motion:reduce){.pwr{display:none}}

/* ---------- FAQ ---------- */
.faq{position:relative;padding:clamp(80px,11vw,150px) 0;background:var(--ink)}
.faq__list{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 0;cursor:pointer;list-style:none;
  font-size:clamp(16px,1.7vw,21px);font-weight:600;letter-spacing:-.01em;
  transition:color .25s;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--red)}
.faq__item summary i{
  position:relative;flex:none;width:14px;height:14px;
}
.faq__item summary i::before,.faq__item summary i::after{
  content:"";position:absolute;inset:50% 0 auto 0;height:1.5px;background:var(--red);
  transition:transform .3s var(--ease);
}
.faq__item summary i::after{transform:rotate(90deg)}
.faq__item[open] summary i::after{transform:rotate(0)}
.faq__item[open] summary{color:var(--red)}
.faq__item p{
  margin:0 0 24px;max-width:76ch;color:var(--dim);
  font-size:14.5px;line-height:1.8;
}
@media(max-width:760px){
  .faq__item summary{padding:18px 0;gap:14px}
  .faq__item p{font-size:14px;margin-bottom:20px}
}

/* ---------- LEGAL / DOC PAGES ---------- */
body.legal{background:var(--void)}
.doc{padding:clamp(60px,8vw,110px) 0 clamp(50px,6vw,90px);max-width:820px}
.doc__back{
  display:inline-block;margin-bottom:32px;font-family:var(--f-m);font-size:10px;
  letter-spacing:.2em;color:var(--dim);transition:color .2s;
}
.doc__back:hover{color:var(--red)}
.doc__back--end{margin:48px 0 0;padding-top:28px;border-top:1px solid var(--line);width:100%}
.doc__h{
  font-size:clamp(34px,5.4vw,64px);line-height:1;font-weight:700;letter-spacing:-.025em;
  text-transform:uppercase;margin:0 0 14px;
}
.doc__meta{font-family:var(--f-m);font-size:10px;letter-spacing:.16em;color:var(--dim2);margin:0 0 34px}
.doc__meta a{color:var(--dim);border-bottom:1px solid var(--line2)}
.doc__meta a:hover{color:var(--red)}
.doc__note{
  border:1px solid rgba(255,165,61,.35);background:rgba(255,165,61,.06);
  padding:14px 16px;margin:0 0 40px;font-size:13.5px;line-height:1.7;color:var(--dim);
}
.doc__note strong{color:var(--txt)}
.doc h2{
  font-size:clamp(16px,1.7vw,20px);font-weight:700;letter-spacing:.02em;
  margin:38px 0 12px;color:var(--txt);
}
.doc p,.doc li{color:var(--dim);font-size:14.5px;line-height:1.85}
.doc p{margin:0 0 14px}
.doc ul{margin:0 0 16px;padding-left:20px}
.doc li{margin-bottom:7px}
.doc a{color:var(--txt);border-bottom:1px solid rgba(255,42,50,.5);transition:color .2s}
.doc a:hover{color:var(--red)}
.doc strong{color:var(--txt)}
.foot--slim{padding-top:0;background:transparent}

/* ---------- FOOTER ---------- */
.foot{--r:20px;padding-top:clamp(40px,5vw,70px);background:var(--void)}
.foot .wrap{display:flex;flex-direction:column;gap:12px}

.fcard{position:relative;border-radius:var(--r);overflow:hidden;isolation:isolate}
.fcard__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.fcard__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to right,rgba(5,6,10,.86) 0%,rgba(5,6,10,.45) 42%,rgba(5,6,10,.12) 72%),
    linear-gradient(to bottom,rgba(5,6,10,.5),rgba(5,6,10,.1) 40%,rgba(5,6,10,.8));
}
.fcard--mark .fcard__bg{filter:blur(2px) grayscale(.35);transform:scale(1.06)}
.fcard__scrim--soft{background:linear-gradient(to bottom,rgba(5,6,10,.62),rgba(5,6,10,.86))}

/* --- CTA card */
/* tall enough that the 16:9 key art keeps both the ears and the water
   reflection — a shorter card crops one or the other away */
.fcard--cta{min-height:clamp(380px,60vh,640px);display:flex}
.fcard--cta .fcard__bg{object-position:50% 46%}
.fcard__body{
  position:relative;z-index:2;flex:1;display:flex;flex-direction:column;
  justify-content:space-between;gap:32px;padding:clamp(24px,3.4vw,46px);
}
.fcard__h{
  margin:0;font-size:clamp(34px,5.4vw,72px);line-height:1.02;font-weight:700;
  letter-spacing:-.025em;text-transform:uppercase;max-width:14ch;
}
.fcta{display:flex;flex-direction:column;gap:14px}
.fcta__note{font-family:var(--f-m);font-size:9.5px;letter-spacing:.16em;color:var(--dim)}
.fcta__row{display:flex;gap:10px;flex-wrap:wrap}
.fbtn{
  display:inline-flex;align-items:center;gap:11px;cursor:pointer;
  padding:15px 26px;border-radius:999px;border:1px solid var(--line2);
  background:rgba(5,6,10,.55);backdrop-filter:blur(10px);color:var(--txt);
  font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  transition:background .28s var(--ease),border-color .28s,color .28s,transform .28s var(--ease);
}
.fbtn svg{width:15px;height:15px;flex:none}
.fbtn i{font-style:normal;transition:transform .3s var(--ease)}
.fbtn:hover{background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-2px)}
.fbtn:hover i{transform:translateX(4px)}

/* --- wordmark card */
.fcard--mark{min-height:clamp(200px,26vh,280px);display:flex;align-items:flex-end}
.fmark{
  position:absolute;left:50%;top:42%;translate:-50% -50%;z-index:2;
  width:96%;text-align:center;white-space:nowrap;
  font-size:clamp(38px,9.4vw,140px);font-weight:700;letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1px rgba(233,236,241,.4);
  pointer-events:none;user-select:none;
}
.fcredit{
  position:relative;z-index:3;margin:0;padding:0 clamp(16px,2.2vw,30px);
  font-family:var(--f-m);font-size:9.5px;letter-spacing:.18em;color:var(--dim);
  text-transform:uppercase;
}
.fcredit a{color:var(--txt);border-bottom:1px solid rgba(255,42,50,.5);transition:color .2s}
.fcredit a:hover{color:var(--red)}
.flinks{
  position:relative;z-index:3;width:100%;
  display:grid;grid-template-columns:repeat(3,1fr);
}
.flinks a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:clamp(18px,2.4vw,30px) clamp(16px,2.2vw,30px);
  font-size:clamp(20px,2.6vw,34px);font-weight:700;letter-spacing:-.01em;
  text-transform:uppercase;color:var(--txt);
  border-left:1px solid rgba(233,236,241,.22);
  transition:background .28s var(--ease),color .28s;
}
.flinks a:first-child{border-left:0}
.flinks a i{font-style:normal;font-size:.5em;opacity:0;transform:translateX(-6px);transition:.28s var(--ease)}
.flinks a:hover{background:rgba(255,42,50,.16);color:#fff}
.flinks a:hover i{opacity:1;transform:none}

/* --- social pills */
.fsocial{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.fpill{
  display:grid;place-items:center;height:clamp(56px,6vw,76px);border-radius:var(--r);
  background:var(--red);color:#fff;
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.fpill svg{width:22px;height:22px}
.fpill:hover{background:#fff;color:var(--void);transform:translateY(-3px)}

.foot__bar{
  margin-top:clamp(26px,3vw,44px);border-top:1px solid var(--line);
  padding:18px var(--gut);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--f-m);font-size:9.5px;letter-spacing:.16em;color:var(--dim2);
}
.foot__legal{display:flex;gap:20px}
.foot__legal a{transition:color .2s}
.foot__legal a:hover{color:var(--red)}

@media(max-width:760px){
  .fcredit{
  position:relative;z-index:3;margin:0;padding:0 clamp(16px,2.2vw,30px);
  font-family:var(--f-m);font-size:9.5px;letter-spacing:.18em;color:var(--dim);
  text-transform:uppercase;
}
.fcredit a{color:var(--txt);border-bottom:1px solid rgba(255,42,50,.5);transition:color .2s}
.fcredit a:hover{color:var(--red)}
.flinks{grid-template-columns:1fr}
  .flinks a{border-left:0;border-top:1px solid rgba(233,236,241,.22)}
  .flinks a:first-child{border-top:0}
  .fsocial{grid-template-columns:repeat(2,1fr)}
  .fcta__row{flex-wrap:nowrap}
  .fcta__row .fbtn{flex:1;min-width:0;justify-content:center;padding-inline:14px;letter-spacing:.12em}
  /* the wordmark is nowrap, so shrink it hard and lift it clear of the
     stacked link rows */
  .fmark{font-size:clamp(20px,7.4vw,60px);top:22%}
  .fcard--mark{min-height:0}
  .fcard--cta{min-height:clamp(340px,54vh,460px)}
}

/* ---------- REVEAL HELPERS ---------- */
[data-reveal]{opacity:0;transform:translateY(28px)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1180px){
  .reso__grid{grid-template-columns:1fr}
  .rifts__grid{grid-template-columns:1fr 1fr;grid-template-areas:"list panel" "globe globe"}
  .rifts__list{grid-area:list}.rifts__panel{grid-area:panel}.rifts__globe{grid-area:globe}
  .load__wrap{grid-template-columns:1fr}
  .load__wheel{order:-1}
}
@media(max-width:900px){
  .rail{display:none}
  .hero__hud{grid-template-columns:1fr;gap:14px;padding-top:30px}
  .hud-tc,.hud-tr{text-align:left;justify-self:start}
  .hud-tc{min-width:0;width:100%}
  .hero__foot{gap:22px;padding-bottom:64px}
  .readout--wide{margin-left:0;align-items:flex-start;text-align:left;width:100%}
  /* the 1180 breakpoint assigns grid-area names to these children; dropping
     the template here without clearing them leaves phantom named lines and
     collapses the tracks to 0 */
  .rifts__grid{grid-template-columns:1fr;grid-template-areas:none}
  .rifts__list,.rifts__panel,.rifts__globe{grid-area:auto}
  .rifts__globe{min-height:0;aspect-ratio:1/1}
}
@media(max-width:640px){
  .reso__dial{width:150px;height:150px}
  .reso__num b{font-size:34px}
  .load__meta{grid-template-columns:1fr}
}

/* ---------- REDUCED MOTION ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .grain{animation:none}
  [data-reveal]{opacity:1;transform:none}
}