:root{
  --void:#0a0a16;
  --void-2:#1a1428;
  --void-3:#100819;
  --ochre:#c9a06a;
  --ochre-deep:#8d6a3c;
  --pink:#f5a9b8;
  --sky:#5bcefa;
  --white:#ffffff;
  --holo:#6ddcff;
  --cream:#f0e8d6;
  --dim:#7a708a;
  --hair:rgba(240,232,214,.16);

  --f-display:"Big Shoulders Stencil Display","Black Ops One","Anton",Impact,system-ui,sans-serif;
  --f-body:"Barlow Condensed","Barlow",system-ui,sans-serif;
  --f-mono:"Major Mono Display",ui-monospace,monospace;
}
*{ box-sizing:border-box; margin:0; padding:0 }
html, body{
  background:
    radial-gradient(ellipse at 70% 12%, rgba(201,160,106,.18), transparent 50%),
    radial-gradient(ellipse at 18% 80%, rgba(91,206,250,.10), transparent 55%),
    linear-gradient(180deg, var(--void) 0%, var(--void-2) 50%, var(--void-3) 100%);
  background-attachment:fixed;
  color:var(--cream);
  font-family:var(--f-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body{ min-height:100vh }
a{ color:inherit; text-decoration:none }
img{ display:block; max-width:100% }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; padding:0 }
:focus-visible{ outline:2px solid var(--holo); outline-offset:3px }
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* star dust */
body::before{
  content:""; position:fixed; inset:0; z-index:0;
  pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(1px 1px at 20% 30%, var(--cream), transparent 70%),
    radial-gradient(1px 1px at 75% 45%, var(--cream), transparent 70%),
    radial-gradient(1px 1px at 40% 70%, var(--cream), transparent 70%),
    radial-gradient(1px 1px at 90% 85%, var(--cream), transparent 70%),
    radial-gradient(1px 1px at 12% 88%, var(--holo), transparent 70%),
    radial-gradient(1px 1px at 55% 15%, var(--cream), transparent 70%),
    radial-gradient(1px 1px at 82% 22%, var(--cream), transparent 70%);
  background-size:600px 600px, 800px 800px, 500px 500px, 700px 700px, 900px 900px, 650px 650px, 750px 750px;
}

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:auto;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  align-items:center;
  gap:48px;
  padding:80px 48px 70px;
  z-index:1;
}
.hero-left{ position:relative; min-width:0 }
.eyebrow{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:4px;
  color:var(--holo);
  text-transform:lowercase;
  margin-bottom:20px;
  opacity:.9;
}
.eyebrow::before{
  content:"// "; color:var(--ochre); margin-right:2px;
}

.wordmark{
  position:relative;
  font-family:var(--f-display);
  font-weight:900;
  font-size:clamp(48px, 7.2vw, 92px);
  line-height:.88;
  letter-spacing:1px;
  color:var(--cream);
  text-transform:uppercase;
  text-shadow:0 3px 0 var(--void), 0 0 50px rgba(201,160,106,.32);
  padding-left:22px;
  word-break:break-word;
}
.wordmark .wm-1{ display:block }
.wordmark .wm-2{ display:block; padding-left:.5em; color:var(--cream) }
.wordmark .heraldic{
  position:absolute; left:0; top:4px; bottom:4px; width:7px;
  background:linear-gradient(180deg, var(--sky) 0%, var(--sky) 33%, var(--pink) 33%, var(--pink) 66%, var(--white) 66%, var(--white) 100%);
  box-shadow:0 0 18px rgba(245,169,184,.4);
}
.ticker{
  margin-top:18px;
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--f-mono);
  font-size:13px;
  letter-spacing:3.5px;
  color:var(--ochre);
}
.ticker::before, .ticker::after{
  content:""; width:28px; height:1px;
  background:var(--ochre-deep);
}
.creed-line{
  margin-top:36px;
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(18px, 2vw, 26px);
  letter-spacing:5px;
  color:var(--cream);
  text-transform:uppercase;
  text-shadow:0 0 16px rgba(109,220,255,.28);
}
.creed-line .dim{ color:var(--dim) }

.hero-meta{
  margin-top:34px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px 26px;
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:2.5px;
  color:var(--dim);
  text-transform:uppercase;
}
.hero-meta > div{ min-width:0 }
.hero-meta b{
  color:var(--cream);
  font-family:var(--f-body);
  font-weight:500;
  font-size:14px;
  letter-spacing:1.5px;
  display:block; margin-top:4px;
}

.hero-right{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-width:0;
}
.helmet-stage{
  position:relative;
  width:100%;
  max-width:520px;
}
.helmet-stage img{
  width:100%; height:auto; display:block;
  border-radius:6px;
  box-shadow:
    0 0 0 1px rgba(240,232,214,.15),
    0 40px 80px rgba(0,0,0,.55),
    0 0 120px rgba(245,169,184,.18);
  filter:saturate(1.05);
}
.helmet-stage::after{
  content:""; position:absolute; inset:-2px;
  border:1px dashed rgba(109,220,255,.35);
  pointer-events:none;
  border-radius:6px;
}
.helmet-corners{ position:absolute; inset:-10px; pointer-events:none }
.helmet-corners span{
  position:absolute; width:20px; height:20px;
  border:2px solid var(--holo);
  box-shadow:0 0 12px rgba(109,220,255,.5);
}
.helmet-corners .tl{ top:0; left:0; border-right:none; border-bottom:none }
.helmet-corners .tr{ top:0; right:0; border-left:none; border-bottom:none }
.helmet-corners .bl{ bottom:0; left:0; border-right:none; border-top:none }
.helmet-corners .br{ bottom:0; right:0; border-left:none; border-top:none }
.helmet-tag{
  position:absolute; top:14px; left:14px;
  font-family:var(--f-mono);
  font-size:9px; letter-spacing:2.5px;
  color:var(--holo);
  background:rgba(10,10,22,.78);
  padding:5px 9px;
  border:1px solid rgba(109,220,255,.4);
  text-transform:uppercase;
}

/* ============ CREED RECITAL ============ */
.creed{
  position:relative;
  padding:90px 24px 100px;
  text-align:center;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  z-index:1;
  overflow:hidden;
}
.section-label{
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:4px;
  color:var(--ochre);
  text-transform:lowercase;
  margin-bottom:24px;
}
.section-label::before{ content:"+ "; color:var(--holo) }
.creed h2{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(30px, 4.2vw, 56px);
  line-height:.96;
  color:var(--cream);
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:14px;
}
.creed p{
  font-family:var(--f-body);
  font-weight:400;
  font-size:15px;
  letter-spacing:1.5px;
  color:var(--dim);
  max-width:50ch;
  margin:0 auto 36px;
  text-transform:uppercase;
  line-height:1.5;
}
.recital-btn{
  display:inline-flex; align-items:center; gap:16px;
  font-family:var(--f-display);
  font-weight:800;
  font-size:18px;
  letter-spacing:4px;
  color:var(--cream);
  text-transform:uppercase;
  background:transparent;
  border:2px solid var(--cream);
  padding:14px 34px;
  position:relative;
  transition:color .14s ease, background .14s ease, border-color .14s ease;
}
.recital-btn::before, .recital-btn::after{
  content:""; position:absolute;
  width:9px; height:9px;
  border:2px solid var(--ochre);
}
.recital-btn::before{ top:-4px; left:-4px; border-right:none; border-bottom:none }
.recital-btn::after{ bottom:-4px; right:-4px; border-left:none; border-top:none }
.recital-btn:hover{ color:var(--void); background:var(--cream); border-color:var(--cream) }
.recital-btn .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--ochre);
  box-shadow:0 0 10px rgba(201,160,106,.6);
}
.recital-count{
  margin-top:26px;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:2.5px;
  color:var(--dim);
  text-transform:uppercase;
}
.recital-count b{ color:var(--ochre); font-weight:400; padding:0 6px; font-variant-numeric:tabular-nums }

/* wave layer */
.wave-layer{ position:fixed; inset:0; pointer-events:none; z-index:120; overflow:hidden }
.wave{
  position:absolute; left:0; right:0;
  font-family:var(--f-display);
  font-weight:900;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--cream);
  opacity:0;
  transform:translateX(-110%);
  font-size:clamp(48px, 8vw, 108px);
  letter-spacing:4px;
  text-shadow:0 0 26px rgba(245,169,184,.4), 0 0 50px rgba(91,206,250,.3);
}
.wave.w1{ top:22%; color:var(--cream) }
.wave.w2{ top:44%; color:var(--pink); font-size:clamp(42px, 7vw, 92px); letter-spacing:6px }
.wave.w3{ top:66%; color:var(--sky); font-size:clamp(40px, 7.5vw, 100px); letter-spacing:3px }
body.is-firing .wave.w1{ animation:wave-roll 1.7s cubic-bezier(.25,.7,.3,1) forwards }
body.is-firing .wave.w2{ animation:wave-roll 1.7s cubic-bezier(.25,.7,.3,1) .25s forwards }
body.is-firing .wave.w3{ animation:wave-roll 1.7s cubic-bezier(.25,.7,.3,1) .5s forwards }
@keyframes wave-roll{
  0%{ transform:translateX(-110%); opacity:0 }
  20%{ opacity:1 }
  80%{ opacity:1 }
  100%{ transform:translateX(110%); opacity:0 }
}
body.is-firing .helmet-stage img{ animation:helmet-pulse 1.4s ease forwards }
@keyframes helmet-pulse{
  0%, 100%{ transform:scale(1); filter:saturate(1.05) }
  40%{ transform:scale(1.025); filter:saturate(1.25) brightness(1.1) }
}

/* ============ DOSSIER ============ */
.dossier{
  padding:90px 48px;
  z-index:1; position:relative;
}
.dossier-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--hair);
  padding-bottom:18px;
  margin-bottom:42px;
}
.dossier-head h2{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(28px, 3.6vw, 46px);
  letter-spacing:2px;
  color:var(--cream);
  text-transform:uppercase;
  line-height:1;
}
.dossier-head .stamp{
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:3px;
  color:var(--ochre);
  border:1px solid var(--ochre-deep);
  padding:5px 11px;
  text-transform:uppercase;
}
.specs{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  column-gap:60px;
  row-gap:4px;
}
.spec-row{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:18px;
  padding:14px 0;
  border-bottom:1px dashed var(--hair);
}
.spec-key{
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:2.5px;
  color:var(--dim);
  text-transform:uppercase;
  padding-top:4px;
}
.spec-val{
  font-family:var(--f-body);
  font-weight:500;
  font-size:18px;
  letter-spacing:1px;
  color:var(--cream);
  text-transform:uppercase;
  line-height:1.3;
}
.spec-val .accent{ color:var(--pink) }
.spec-val .holo{ color:var(--holo) }
.spec-val .ochre{ color:var(--ochre) }

/* ============ CULTURAL MOMENT ============ */
.moment{
  position:relative; z-index:1;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  overflow:hidden;
  background:#000;
}
.moment img{ width:100%; height:auto; display:block; opacity:.86 }
.moment-caption{
  position:absolute; bottom:14px; left:20px; right:20px;
  display:flex; align-items:center; gap:12px;
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:2.5px;
  color:var(--cream);
  text-transform:uppercase;
}
.moment-caption .tag{
  background:var(--ochre); color:var(--void);
  padding:3px 8px;
  letter-spacing:2px;
}

/* ============ BOUNTY PUCK ============ */
.bounty{
  padding:100px 24px 80px;
  text-align:center;
  position:relative; z-index:1;
}
.puck-wrap{
  position:relative;
  width:min(300px, 78vw);
  height:min(300px, 78vw);
  margin:0 auto;
  cursor:pointer;
}
.puck-wrap svg{ width:100%; height:100%; display:block; overflow:visible }
.puck-base{ fill:#262030; stroke:var(--ochre); stroke-width:2; filter:drop-shadow(0 12px 30px rgba(0,0,0,.6)) }
.puck-inner{ fill:#161220; stroke:var(--ochre-deep); stroke-width:1 }
.puck-rim-text{ fill:var(--ochre); font-family:var(--f-mono); font-size:11px; letter-spacing:3px }
.puck-center{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24%;
  text-align:center;
  pointer-events:none;
}
.puck-glyph{
  font-family:var(--f-display);
  font-weight:800;
  font-size:36px;
  letter-spacing:2px;
  color:var(--cream);
  text-transform:uppercase;
}
.puck-label{
  margin-top:6px;
  font-family:var(--f-mono);
  font-size:9px; letter-spacing:2.5px;
  color:var(--holo);
  text-transform:uppercase;
}
.puck-action{
  margin-top:12px;
  font-family:var(--f-mono);
  font-size:8px; letter-spacing:2.5px;
  color:var(--dim);
  text-transform:uppercase;
}
.puck-wrap:hover .puck-base{ filter:drop-shadow(0 12px 30px rgba(109,220,255,.35)) drop-shadow(0 0 20px rgba(109,220,255,.4)) }
.puck-wrap.is-copied .puck-action{ color:var(--holo) }
.puck-wrap.is-copied .puck-base{ stroke:var(--holo); animation:holo-flicker .55s steps(2) }
@keyframes holo-flicker{ 50%{ opacity:.5 } }
.puck-ca-line{
  margin:30px auto 0;
  font-family:var(--f-mono);
  font-size:10px; letter-spacing:2px;
  color:var(--dim);
  word-break:break-all;
  max-width:60ch;
}
.puck-ca-line b{ color:var(--cream); font-weight:400 }

/* ============ ROSTER ============ */
.roster{
  max-width:780px;
  margin:0 auto;
  padding:50px 24px 90px;
  position:relative; z-index:1;
}
.roster .section-label{ text-align:left; margin-bottom:20px }
.roster-row{
  display:grid;
  grid-template-columns:44px 1fr auto;
  align-items:center;
  gap:20px;
  padding:18px 0;
  border-top:1px solid var(--hair);
  transition:padding-left .18s ease, background .18s ease;
}
.roster-row:last-child{ border-bottom:1px solid var(--hair) }
.roster-row:hover:not(.disabled){
  padding-left:12px;
  background:linear-gradient(90deg, rgba(109,220,255,.06), transparent 60%);
}
.roster-num{
  font-family:var(--f-mono);
  font-size:11px; letter-spacing:2.5px;
  color:var(--ochre);
}
.roster-title{
  font-family:var(--f-display);
  font-weight:700;
  font-size:18px;
  letter-spacing:2.5px;
  color:var(--cream);
  text-transform:uppercase;
}
.roster-meta{
  font-family:var(--f-mono);
  font-size:9px;
  letter-spacing:2.5px;
  color:var(--dim);
  text-transform:uppercase;
}
.roster-row.disabled{ opacity:.4; cursor:not-allowed }

/* ============ FOOTER ============ */
footer{
  padding:38px 24px 60px;
  border-top:1px solid var(--hair);
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:22px;
}
.foot-poster{
  width:min(320px, 80vw);
  opacity:.55;
  border:1px solid var(--hair);
}
.foot-line{
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:3.5px;
  color:var(--dim);
  text-transform:uppercase;
  text-align:center;
  line-height:2;
}

/* ============ TOAST ============ */
.toast{
  position:fixed; bottom:22px; left:50%;
  transform:translateX(-50%) translateY(40px);
  background:rgba(10,10,22,.92);
  color:var(--cream);
  border:1px solid var(--holo);
  box-shadow:0 0 22px rgba(109,220,255,.35);
  padding:11px 22px;
  font-family:var(--f-mono);
  font-size:10px; letter-spacing:2px;
  text-transform:uppercase;
  opacity:0;
  transition:transform .25s ease, opacity .25s ease;
  z-index:200; pointer-events:none;
}
.toast.is-on{ opacity:1; transform:translateX(-50%) translateY(0) }

/* ============ RESPONSIVE ============ */
@media (max-width:1100px){
  .hero{ grid-template-columns:1fr; gap:40px; padding:60px 28px 60px }
  .hero-right{ order:-1 }
  .helmet-stage{ max-width:420px; margin:0 auto }
  .hero-meta{ grid-template-columns:repeat(3, auto); justify-content:start }
  .dossier{ padding:80px 28px }
}
@media (max-width:680px){
  .hero{ padding:48px 18px 48px }
  .wordmark{ font-size:clamp(44px, 14vw, 72px); padding-left:18px }
  .wordmark .heraldic{ width:6px }
  .hero-meta{ grid-template-columns:repeat(2, auto); gap:12px 24px }
  .dossier{ padding:60px 18px }
  .specs{ grid-template-columns:1fr; column-gap:0 }
  .spec-row{ grid-template-columns:110px 1fr; gap:12px; padding:12px 0 }
  .spec-val{ font-size:16px }
  .creed{ padding:60px 18px 70px }
  .creed h2{ font-size:28px; letter-spacing:1px }
  .recital-btn{ padding:12px 24px; font-size:16px; letter-spacing:3px }
  .bounty{ padding:60px 18px 50px }
  .roster{ padding:30px 18px 70px }
  .roster-row{ grid-template-columns:34px 1fr auto; gap:12px }
  .roster-title{ font-size:15px; letter-spacing:2px }
}

@media (prefers-reduced-motion: reduce){
  body.is-firing .wave, body.is-firing .helmet-stage img{ animation:none !important }
  .wave{ opacity:0 !important }
  .puck-wrap.is-copied .puck-base{ animation:none }
}