/* ============================================================
   THE APPRENTICE — landing site
   ============================================================ */

#site{opacity:0;transition:opacity .7s ease}
#site.on{opacity:1}
#site.hide{display:none}

/* ------------------------------------------------------------- ticker tape */
.tape{
  position:fixed;top:0;left:0;right:0;z-index:120;height:30px;overflow:hidden;
  background:linear-gradient(90deg,#0b0d12,#141821,#0b0d12);
  border-bottom:1px solid var(--line);display:flex;align-items:center;
}
.tape::before,.tape::after{
  content:'';position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.tape::before{left:0;background:linear-gradient(90deg,#0b0d12,transparent)}
.tape::after{right:0;background:linear-gradient(270deg,#0b0d12,transparent)}
/* The strip is rendered twice, so translating by exactly half loops seamlessly
   and there is never an empty gap on first paint. */
.tape-run{
  display:flex;gap:30px;white-space:nowrap;padding-left:30px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  animation:tapeLoop 46s linear infinite;will-change:transform;
}
@keyframes tapeLoop{to{transform:translateX(-50%)}}
.tape-run:hover{animation-play-state:paused}
.tape-run b{color:var(--text);font-weight:600;margin-right:7px}
.tape-run em{font-style:normal;color:var(--dim-2);margin-right:7px}
.tk{display:inline-flex;align-items:center}
.tk .ar{margin-right:3px;font-size:9px}

/* ------------------------------------------------------------------- nav */
.nav{
  position:fixed;top:30px;left:0;right:0;z-index:110;
  transition:background .3s,border-color .3s,backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.nav.stuck{
  background:rgba(2,6,9,.86);backdrop-filter:blur(18px) saturate(1.3);
  border-bottom-color:var(--line);
}
.nav-in{display:flex;align-items:center;gap:30px;height:70px}
.brand{display:flex;align-items:center;gap:12px;flex:none}
/* The logo is a full square lockup with its own yellow ground, so the old
   clipped-corner tile is gone: cutting the corner off a finished mark crops the
   artwork rather than framing it. */
.brand-mk{
  width:36px;height:36px;flex:none;display:block;object-fit:contain;
  border-radius:3px;
}
.brand-tx{display:flex;flex-direction:column;line-height:1.15}
.brand-tx b{font-family:var(--disp);font-size:15px;letter-spacing:.05em}
.brand-tx i{font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.16em;color:var(--dim-2)}
.nav-links{display:flex;gap:26px;margin-left:auto;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.nav-links a{color:var(--dim);position:relative;padding:5px 0;transition:color .2s}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width .28s var(--ease);
}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{width:100%}

/* ------------------------------------------------------------------ hero */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:150px 0 90px;overflow:hidden;isolation:isolate;
}
.hero-bg{
  position:absolute;inset:0;z-index:-4;
  background:url('../assets/img/bg/bg-hero.jpg') center 38%/cover no-repeat;
  transform:scale(1.06);animation:heroDrift 34s ease-in-out infinite alternate;
  filter:saturate(.9);
}
@keyframes heroDrift{to{transform:scale(1.14) translate(-1.4%,-1.6%)}}
.hero-canvas{position:absolute;inset:0;z-index:-3;width:100%;height:100%}
.hero-grid{
  position:absolute;inset:0;z-index:-2;opacity:.4;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:74px 74px;
  mask-image:radial-gradient(ellipse 80% 60% at 30% 50%,#000,transparent 72%);
}
.hero-vig{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,var(--ink) 2%,rgba(2,6,9,.9) 28%,rgba(2,6,9,.35) 58%,transparent 78%),
    linear-gradient(180deg,rgba(2,6,9,.9),transparent 30%,transparent 55%,var(--ink) 97%);
}
.hero-in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:40px;align-items:center;width:min(1280px,92vw)}

.hero-h{font-size:clamp(3.1rem,8.4vw,7.6rem);margin-bottom:26px}
.hero-h .l{display:block;overflow:hidden}
.hero-h .l>*,.hero-h .l{will-change:transform}
.hero-h .l{opacity:0;transform:translateY(.5em) skewY(4deg);
  animation:heroLine .95s var(--ease) forwards}
.hero-h .l[data-d="1"]{animation-delay:.1s}
.hero-h .l[data-d="2"]{animation-delay:.2s}
@keyframes heroLine{to{opacity:1;transform:none}}
.hero-h .fired em{
  /* The wordmark is the loudest thing on the page, so it is the one place the
     brand colour has to be the brand colour. Red here was left over from a
     scheme the logo replaced. */
  font-style:normal;color:var(--gold);position:relative;display:inline-block;
  text-shadow:0 0 46px rgba(255,186,0,.5);
}
.hero-h .fired em::before,.hero-h .fired em::after{
  content:attr(data-t);position:absolute;inset:0;opacity:0;
}
.hero-h .fired em.gl::before{color:#ffd24a;opacity:.9;animation:glA .3s steps(2) 2}
.hero-h .fired em.gl::after{color:#ffe600;opacity:.9;animation:glB .3s steps(2) 2}
@keyframes glA{0%{transform:translate(-5px,2px)}50%{transform:translate(4px,-3px)}100%{transform:none}}
@keyframes glB{0%{transform:translate(5px,-2px)}50%{transform:translate(-4px,3px)}100%{transform:none}}

.hero-lede{margin-bottom:34px;font-size:clamp(.98rem,1.18vw,1.08rem);
  opacity:0;animation:fadeUp .8s var(--ease) .42s forwards}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px;
  opacity:0;animation:fadeUp .8s var(--ease) .55s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.hero-stats{display:flex;gap:0;border-top:1px solid var(--line);
  opacity:0;animation:fadeUp .8s var(--ease) .68s forwards;flex-wrap:wrap}
.hero-stats .st{padding:18px 26px 0 0;margin-right:26px;border-right:1px solid var(--line);flex:1;min-width:110px}
.hero-stats .st:last-child{border-right:0}
/* min-height keeps the values on one baseline when a label wraps to two lines */
.hero-stats .k{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim-2);margin-bottom:7px;min-height:2.1em;line-height:1.4}
.hero-stats .v{font-family:var(--disp);font-size:clamp(1.3rem,2.1vw,1.85rem);line-height:1}

/* hero art */
.hero-art{position:relative;display:grid;place-items:end center;min-height:520px}
/* height, not max-height: the pixel sprites are authored at 160px tall, and
   max-height only caps — it never scales a small source up to fill its slot. */
.hero-art img{
  height:min(74svh,660px);width:auto;filter:drop-shadow(0 40px 60px rgba(0,0,0,.85));
  opacity:0;animation:bossIn 1.1s var(--ease) .3s forwards;
  transform-origin:bottom center;
}
@keyframes bossIn{from{opacity:0;transform:translateY(46px) scale(.94)}to{opacity:1;transform:none}}
.hero-art-glow{
  position:absolute;bottom:-6%;left:50%;translate:-50%;width:78%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(255,186,0,.34),transparent 62%);
  filter:blur(24px);animation:glowPulse 4.5s ease-in-out infinite;
}
@keyframes glowPulse{50%{opacity:.55;transform:translateX(-50%) scale(1.1)}}
.hero-bark{
  position:absolute;top:4%;left:-13%;max-width:262px;
  background:rgba(6,9,13,.93);border:1px solid var(--line-hot);
  border-left:3px solid var(--gold);padding:14px 18px;backdrop-filter:blur(10px);
  box-shadow:var(--shadow);opacity:0;transform:translateY(10px);
  transition:opacity .35s,transform .35s;
}
.hero-bark.on{opacity:1;transform:none}
.hero-bark .who{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold-hot);margin-bottom:6px}
.hero-bark .txt{font-size:14.5px;line-height:1.45}
.hero-bark::after{
  content:'';position:absolute;right:-9px;top:26px;width:0;height:0;
  border:9px solid transparent;border-left-color:var(--line-hot);border-right:0;
}

.scroll-hint{
  position:absolute;bottom:26px;left:50%;translate:-50%;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--mono);font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--dim-2);
}
.scroll-hint i{width:1px;height:44px;background:linear-gradient(var(--gold),transparent);animation:hintDrop 2s ease-in-out infinite}
@keyframes hintDrop{0%,100%{transform:scaleY(.35);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* ----------------------------------------------------------------- sections */
.sec{padding:clamp(72px,8vw,116px) 0;position:relative}
.sec.alt{background:linear-gradient(180deg,transparent,rgba(20,23,29,.5) 18%,rgba(20,23,29,.5) 82%,transparent)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;
  align-items:end;margin-bottom:clamp(42px,5vw,72px)}
.sec-head h2 .o{color:var(--dim-2)}

/* reveal */
.rv{opacity:0;transform:translateY(30px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ------------------------------------------------------------------- loop */
.loop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:2px;
  background:var(--line);border:1px solid var(--line)}
.lp{
  background:var(--navy);padding:32px 26px 30px;position:relative;overflow:hidden;
  transition:background .35s var(--ease);min-height:270px;display:flex;flex-direction:column;
}
.lp::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-hot));
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.lp:hover{background:var(--navy-2)}
.lp:hover::after{transform:scaleX(1)}
.lp .n{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--dim-2);margin-bottom:22px}
.lp .ic{width:38px;height:38px;margin-bottom:20px;color:var(--gold-hot);
  transition:transform .45s var(--ease),color .3s}
.lp:hover .ic{transform:translateY(-4px) scale(1.08);color:var(--gold-hot)}
.lp h3{font-size:1.28rem;margin-bottom:11px}
.lp p{font-size:13.6px;color:var(--dim);line-height:1.62;flex:1}
.lp .cost{
  margin-top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim-2);padding-top:14px;border-top:1px solid var(--line);
}
.lp .cost b{color:var(--gold-hot);font-weight:600}

/* ----------------------------------------------------------------- ladder */
.ladder{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:2px;
  background:var(--line);border:1px solid var(--line)}
.ladder-rail{background:var(--navy);display:flex;flex-direction:column}
.lr{
  display:flex;align-items:center;gap:16px;padding:19px 22px;text-align:left;width:100%;
  border-bottom:1px solid var(--line);position:relative;transition:background .25s,padding-left .25s var(--ease);
}
.lr:last-child{border-bottom:0}
.lr::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);
  transform:scaleY(0);transition:transform .3s var(--ease)}
.lr:hover{background:rgba(30,34,41,.6);padding-left:28px}
.lr.on{background:var(--navy-2);padding-left:28px}
.lr.on::before{transform:scaleY(1)}
.lr .rk{font-family:var(--mono);font-size:10px;color:var(--dim-2);width:18px;flex:none}
.lr .nm{flex:1}
.lr .nm b{display:block;font-family:var(--disp);font-size:16px;letter-spacing:.03em}
.lr .nm i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--dim-2);letter-spacing:.1em}
.lr.on .nm i{color:var(--gold-hot)}
.lr .mx{font-family:var(--disp);font-size:19px;color:var(--gold-hot)}

.ladder-view{background:var(--navy);display:grid;grid-template-rows:auto 1fr}
.lv-room{position:relative;aspect-ratio:16/9;overflow:hidden}
.lv-room img{width:100%;height:100%;object-fit:cover;object-position:center 46%;
  transition:opacity .45s,transform 9s linear;transform:scale(1.02)}
.lv-room img.swap{opacity:0}
.lv-room:hover img{transform:scale(1.09)}
.lv-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,6,9,.45),transparent 34%,rgba(12,14,18,.94))}
.lv-badge{
  position:absolute;left:22px;top:22px;font-family:var(--disp);font-size:13px;letter-spacing:.14em;
  background:var(--gold);color:#fff;padding:6px 13px 5px;
  clip-path:polygon(0 0,100% 0,100% 70%,88% 100%,0 100%);
}
.lv-body{padding:28px 30px 32px}
.lv-body h3{font-size:clamp(1.6rem,2.8vw,2.3rem);margin-bottom:9px}
.lv-perk{color:var(--dim);font-size:14.5px;margin-bottom:24px;max-width:60ch}
.lv-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:1px;background:var(--line)}
.lv-stats .s{background:var(--navy);padding:15px 17px}
.lv-stats .k{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim-2);margin-bottom:6px}
.lv-stats .v{font-family:var(--mono);font-size:16px;font-weight:600}

/* -------------------------------------------------------------- pnl / sim */
.formula{
  display:flex;align-items:flex-start;justify-content:center;gap:clamp(10px,1.6vw,22px);
  flex-wrap:wrap;padding:36px 26px;margin-bottom:52px;
  border:1px solid var(--line);background:linear-gradient(180deg,rgba(30,34,41,.5),transparent);
}
.f-out{font-family:var(--disp);font-size:clamp(1.3rem,2.4vw,2rem);color:var(--gold-hot)}
.f-eq,.f-op{font-family:var(--disp);font-size:clamp(1.2rem,2vw,1.7rem);color:var(--dim-2);padding-top:2px}
.f-t{display:flex;flex-direction:column;font-family:var(--disp);
  font-size:clamp(1.1rem,2.1vw,1.75rem);position:relative;padding-bottom:9px}
.f-t i{font-family:var(--body);font-style:normal;font-size:11px;letter-spacing:.02em;
  text-transform:none;color:var(--dim-2);margin-top:8px;font-weight:400}
.f-t::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px}
.f-t.market{color:#ffd24a}.f-t.market::after{background:#ffd24a}
.f-t.skill{color:var(--gold-hot)}.f-t.skill::after{background:var(--gold-hot)}
.f-t.var{color:#ff9d2e}.f-t.var::after{background:#ff9d2e}

.sim{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:2px;
  background:var(--line);border:1px solid var(--line)}
.sim-side{background:var(--navy);padding:30px 28px}
.sim-side h3{font-size:1.25rem;margin-bottom:10px}
.sim-note{font-size:12.8px;color:var(--dim-2);line-height:1.6;margin-bottom:28px}
.ctl{display:block;margin-bottom:26px}
.ctl-h{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim-2);margin-bottom:12px}
.ctl-h b{font-family:var(--disp);font-size:14px;letter-spacing:.04em;color:var(--text)}
.ctl-scale{display:flex;justify-content:space-between;margin-top:8px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2)}
.ctl-scale i{font-style:normal}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:3px;background:rgba(255,255,255,.1);
  outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;background:var(--gold-hot);
  border:3px solid var(--ink);box-shadow:0 0 0 1px var(--gold-hot),0 0 16px var(--gold-hot);
  cursor:grab;transition:transform .15s;
}
input[type=range]::-webkit-slider-thumb:active{transform:scale(1.25);cursor:grabbing}
input[type=range]::-moz-range-thumb{
  width:14px;height:14px;border-radius:0;background:var(--gold-hot);border:3px solid var(--ink);
  box-shadow:0 0 0 1px var(--gold-hot);cursor:grab;
}

.sim-out{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.sim-out .r{background:var(--navy-2);padding:12px 15px;display:flex;justify-content:space-between;align-items:baseline}
.sim-out .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim-2)}
.sim-out .v{font-family:var(--mono);font-size:15px;font-weight:700}

.sim-chart{background:var(--navy);padding:22px;display:flex;flex-direction:column}
.sim-chart canvas{width:100%;height:auto;flex:1}
.sim-legend{display:flex;gap:24px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2)}
.sim-legend span{display:flex;align-items:center;gap:8px}
.sw{width:11px;height:11px;flex:none}
.sw.win{background:var(--green)}.sw.loss{background:var(--red)}

/* --------------------------------------------------------------- flywheel */
.flow{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:clamp(30px,5vw,70px);align-items:center}
.flow-svg{width:100%;height:auto;overflow:visible}
.flow-dash{animation:dashRun 9s linear infinite}
@keyframes dashRun{to{stroke-dashoffset:-1232}}
.flow-svg .nd{cursor:pointer}
.flow-svg .nd circle{fill:var(--navy-2);stroke:var(--line-hot);stroke-width:1;transition:.3s}
.flow-svg .nd:hover circle,.flow-svg .nd.on circle{fill:var(--gold);stroke:var(--gold-hot);r:34}
.flow-svg .nd:hover text,.flow-svg .nd.on text{fill:#150e00;font-weight:700}
.flow-svg .nd text{fill:var(--dim);font-family:'JetBrains Mono',monospace;font-size:9px;
  letter-spacing:.14em;text-anchor:middle;text-transform:uppercase;transition:fill .3s}
.flow-svg .nd:hover text,.flow-svg .nd.on text{fill:#fff}
.flow-svg .core{fill:none;stroke:var(--gold);stroke-width:1;opacity:.3}
.flow-svg .ctxt{fill:var(--gold-hot);font-family:'Anton',sans-serif;font-size:26px;text-anchor:middle;letter-spacing:.04em}
.flow-svg .csub{fill:var(--dim-2);font-family:'JetBrains Mono',monospace;font-size:8.5px;text-anchor:middle;letter-spacing:.24em}

.flow-cards{display:grid;gap:2px;background:var(--line);border:1px solid var(--line)}
.fc{background:var(--navy);padding:22px 24px;transition:background .3s}
.fc.on{background:var(--navy-3)}
.fc .h{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.fc .h b{font-family:var(--disp);font-size:1.05rem;letter-spacing:.04em}
.fc .h .pill{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  padding:3px 9px;border:1px solid var(--line-hot);color:var(--dim-2)}
.fc.burn .h .pill{border-color:var(--red);color:var(--red-hot)}
.fc.earn .h .pill{border-color:var(--gold);color:var(--gold-hot)}
.fc p{font-size:13.2px;color:var(--dim);line-height:1.6}

/* ------------------------------------------------------------------- boss */
.boss-lay{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:2px;
  background:var(--line);border:1px solid var(--line)}
.boss-tbl{background:var(--navy);display:flex;flex-direction:column}
.bt{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:15px 24px;
  border-bottom:1px solid var(--line);cursor:pointer;transition:background .2s;align-items:baseline}
.bt:last-child{border-bottom:0}
.bt:hover,.bt.on{background:var(--navy-2)}
.bt .ev{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim-2)}
.bt:hover .ev,.bt.on .ev{color:var(--gold-hot)}
.bt .ln{font-size:14px;color:var(--dim)}
.bt:hover .ln,.bt.on .ln{color:var(--text)}

.boss-roll{background:var(--navy);padding:26px;display:flex;flex-direction:column;
  align-items:center;justify-content:space-between;gap:18px;position:relative;overflow:hidden}
.boss-roll::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 50% at 50% 88%,rgba(255,186,0,.16),transparent 70%);
}
.bd-frame{position:relative;flex:1;display:grid;place-items:end center;width:100%;min-height:330px}
.bd-frame img{height:340px;width:auto;filter:drop-shadow(0 24px 40px rgba(0,0,0,.8));
  transition:opacity .22s}
.bd-frame img.swap{opacity:0}
.bd-bubble{
  position:absolute;top:0;left:0;right:0;background:rgba(6,9,13,.94);
  border:1px solid var(--line-hot);border-left:3px solid var(--gold);padding:14px 17px;
  font-size:14px;line-height:1.5;backdrop-filter:blur(8px);z-index:2;
}
.bd-bubble.pop{animation:bubblePop .4s var(--ease)}
@keyframes bubblePop{0%{opacity:0;transform:translateY(-10px) scale(.96)}100%{opacity:1;transform:none}}

/* ----------------------------------------------------------------- roster */
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:2px;
  background:var(--line);border:1px solid var(--line)}
.mc{
  background:var(--navy);position:relative;overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column;transition:background .35s;
}
.mc::before{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .4s;
  background:radial-gradient(ellipse 70% 55% at 50% 78%,var(--rg),transparent 70%);
}
.mc:hover{background:var(--navy-2)}
.mc:hover::before{opacity:1}
.mc-art{position:relative;aspect-ratio:1;overflow:hidden}
/* Absolute + object-fit rather than a percentage max-height: the percentage does
   not resolve against the grid area and the sprite gets clipped at the ankles. */
.mc-art img{
  position:absolute;inset:14px 14px 0;width:100%;height:calc(100% - 14px);
  object-fit:contain;object-position:bottom;
  transition:transform .5s var(--ease);filter:drop-shadow(0 14px 22px rgba(0,0,0,.7));
}
.mc:hover .mc-art img{transform:translateY(-7px) scale(1.06)}
.mc-r{position:absolute;top:11px;left:11px;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.18em;text-transform:uppercase;padding:3px 8px;
  border:1px solid var(--rc);color:var(--rc);background:rgba(2,6,9,.65);z-index:2}
.mc-b{padding:15px 16px 18px;border-top:1px solid var(--line);position:relative;z-index:2}
.mc-b b{display:block;font-family:var(--disp);font-size:15px;letter-spacing:.04em;margin-bottom:5px}
.mc-b i{display:block;font-style:normal;font-size:11.8px;color:var(--dim-2);line-height:1.5}
.mc-tag{position:absolute;top:11px;right:11px;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2);z-index:2}

/* ------------------------------------------------------------------ risks */
.risks{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:2px;
  background:var(--line);border:1px solid var(--line)}
.rk{background:var(--navy);padding:26px 24px}
.rk .h{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.rk .h svg{width:16px;height:16px;color:var(--gold);flex:none}
.rk .h b{font-family:var(--disp);font-size:1rem;letter-spacing:.04em}
.rk p{font-size:13px;color:var(--dim);line-height:1.62}

/* ----------------------------------------------------------------- footer */
.foot{border-top:1px solid var(--line);padding:52px 0 60px;background:var(--ink)}
.foot-in{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:44px;align-items:start}
.foot-brand{display:flex;gap:13px;align-items:center}
.foot-brand b{display:block;font-family:var(--disp);font-size:15px;letter-spacing:.05em}
.foot-brand i{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--dim-2)}
.foot-legal{font-size:11.6px;color:var(--dim-2);line-height:1.75;max-width:82ch}

.rotate-note{display:none}

/* --------------------------------------------------------------- responsive */
@media (max-width:1080px){
  .hero-in{grid-template-columns:1fr;gap:20px}
  .hero-art{min-height:auto;order:-1;justify-items:center}
  /* height, not max-height: the pixel sprites are authored at 160px tall, and
   max-height only caps — it never scales a small source up to fill its slot. */
.hero-art img{height:38svh}
  /* Stacked, the bark would sit across the Boss's face — drop it to his feet. */
  .hero-bark{left:0;right:0;top:auto;bottom:-10px;max-width:none}
  .hero-bark::after{display:none}
  .sec-head{grid-template-columns:1fr;gap:22px;align-items:start}
  .ladder,.sim,.boss-lay{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .flow-svg{max-width:440px;margin-inline:auto}
  .ladder-rail{flex-direction:row;overflow-x:auto;scrollbar-width:none}
  .ladder-rail::-webkit-scrollbar{display:none}
  .lr{flex:none;width:210px;border-bottom:0;border-right:1px solid var(--line)}
  .lr::before{right:0;left:0;bottom:auto;height:3px;width:auto;transform:scaleX(0)}
  .lr.on::before{transform:scaleX(1)}
  .nav-links{display:none}
  .foot-in{grid-template-columns:1fr}
}
@media (max-width:620px){
  .hero{padding-top:120px}
  .hero-stats .st{min-width:calc(50% - 26px);padding-bottom:16px}
  .hero-stats .st:nth-child(2){border-right:0}
  .formula{gap:10px}
  .bt{grid-template-columns:1fr;gap:5px}
}

/* ------------------------------------------------------------------ wallet
   The connect button lives in the header, so the answer to "does my wallet
   work here" is on screen before anyone scrolls. The panel is anchored to the
   button rather than centred as a modal: this is a status readout, not a
   decision that deserves to take over the page. */

.wal-wrap{position:relative;display:flex;align-items:center}

#navWallet{padding:13px 18px;letter-spacing:.14em;white-space:nowrap}
#navWallet svg{opacity:.72;flex:none}
#navWallet .t{font-variant-numeric:tabular-nums}

/* Connected and on the right chain. The dot carries the state so the label can
   stay the balance, which is the number the player actually came to see. */
#navWallet.on{border-color:var(--gold);color:#fff}
#navWallet.on svg{opacity:1;color:var(--green-hot)}

/* Wrong network is the one state that is actionable and easy to miss. */
#navWallet.warn{border-color:var(--gold);color:var(--gold);
  background:rgba(255,186,0,.10)}
#navWallet.warn svg{color:var(--gold);opacity:1}

.wal-pop{
  position:absolute;top:calc(100% + 12px);right:0;z-index:80;width:320px;
  background:#0b0906;border:1px solid var(--line-hot);
  box-shadow:var(--shadow);padding:20px;
  opacity:0;transform:translateY(-6px);transition:opacity .18s var(--ease),transform .18s var(--ease);
}
.wal-pop.on{opacity:1;transform:translateY(0)}

.wal-h{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.wal-p{font-size:13.5px;line-height:1.55;color:var(--dim);margin-bottom:16px}
.wal-f{font-size:11.5px;line-height:1.5;color:var(--dim-2);margin-top:14px}

.wal-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:13px}
.wal-row:last-of-type{border-bottom:0}
.wal-row span{color:var(--dim-2)}
.wal-row b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}

.wal-acts{display:flex;gap:8px;margin-top:14px}
.wal-acts .btn{flex:1;justify-content:center;padding:11px 10px;letter-spacing:.1em}

.wal-list{display:flex;flex-direction:column;gap:6px}
.wal-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;
  background:rgba(255,255,255,.03);border:1px solid transparent;color:#fff;
  font-family:var(--body);font-size:14px;text-align:left;transition:.16s var(--ease)}
.wal-item:hover{border-color:var(--gold);background:rgba(255,186,0,.10)}
.wal-item img{border-radius:5px;flex:none}
.wal-dot{width:22px;height:22px;border-radius:5px;background:var(--gold);flex:none}

/* The header is tight on a phone; the label collapses to the icon and the
   panel spans the viewport instead of hanging off the right edge. */
@media (max-width:820px){
  #navWallet .t{display:none}
  #navWallet{padding:13px 14px}
  .wal-pop{position:fixed;left:12px;right:12px;top:70px;width:auto}
}

/* --------------------------------------------------------- large monitors
   Everything above is clamped, which is what stops the type running away —
   and on a 1440 laptop that is exactly right. Past about 1700px it becomes
   the opposite problem: the type is sitting at its ceiling and the container
   at its cap, so the page is a 1280px column with several hundred pixels of
   black either side and no relationship to the screen it is on.

   Two fixed steps rather than one fluid rule. The card grids are `auto-fit`
   with a minmax floor, so widening the container is enough on its own — they
   pick up another column and the cards keep their proportions. A fluid width
   would land them mid-reflow at arbitrary sizes instead. */

@media (min-width:1700px){
  .wrap,.hero-in{width:min(1520px,90vw)}
  /* `auto-fit` is right up to here and wrong past it: given 1780px it will
     happily make six risk cards into one thin row and twelve mascots into a
     row of eight with an orphan four underneath. Each grid has a known number
     of items, so at this width the layout is stated rather than derived. */
  .loop-grid{grid-template-columns:repeat(5,1fr)}    /* 5 verbs   */
  .risks{grid-template-columns:repeat(3,1fr)}        /* 6 -> 3x2  */
  .roster{grid-template-columns:repeat(6,1fr)}       /* 12 -> 6x2 */
  .lv-stats{grid-template-columns:repeat(6,1fr)}     /* 6 stats   */
  .sec{padding:132px 0}
  h2{font-size:5.2rem}
  .hero-h{font-size:8.6rem}
  .lede{font-size:1.2rem;max-width:70ch}
  .hero-lede{font-size:1.18rem}
  .sec-head{gap:56px}
}

@media (min-width:2200px){
  .wrap,.hero-in{width:min(1780px,88vw)}
  .sec{padding:156px 0}
  h2{font-size:5.9rem}
  .hero-h{font-size:9.8rem}
  .lede{font-size:1.32rem}
  .hero-lede{font-size:1.28rem}
  /* The header is the one place that should not spread with the rest: nav
     links three metres apart stop reading as a group. */
  .nav-links{gap:38px}
}

/* ----------------------------------------------------------- rewards counter
   The one number on this page a stranger will actually check, so it is stated
   plainly and it says where it comes from. Three states, and they must not
   look alike: waiting (no contracts yet), live (read this minute), error
   (could not reach the chain). A counter that shows $0.00 when it simply could
   not connect is worse than one that admits it. */

.rtrack{
  border:1px solid var(--line-hot);background:rgba(255,186,0,.035);
  padding:30px 34px;margin-bottom:44px;position:relative;overflow:hidden;
}
.rtrack::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);
}
.rtrack.waiting::before{background:var(--dim-2)}
.rtrack.error::before{background:var(--red)}

.rt-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.rt-k{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--dim-2)}
.rt-dot{width:7px;height:7px;border-radius:50%;background:var(--dim-2);flex:none}
.rtrack.live .rt-dot{background:var(--green-hot);box-shadow:0 0 9px var(--green-hot)}
.rtrack.error .rt-dot{background:var(--red)}

.rt-hero{font-family:var(--disp);font-size:clamp(2.6rem,5vw,4.2rem);line-height:1;
  color:#fff;letter-spacing:-.01em;margin-bottom:26px}
.rtrack.waiting .rt-hero{color:var(--dim-2)}

.rt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line)}
.rt-c{background:var(--ink);padding:15px 18px;display:flex;flex-direction:column;gap:6px}
.rt-c .k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim-2)}
.rt-c .v{font-size:1.28rem;font-weight:600;color:#fff}

.rt-note{margin-top:14px;font-size:12px;color:var(--dim-2);line-height:1.5}

@media (max-width:620px){
  .rtrack{padding:22px 20px}
  .rt-grid{grid-template-columns:1fr}
}