:root{
  --steel:#dfe1dd;
  --steel-2:#cfd3cf;
  --plate:#e9ebe7;
  --ink:#121212;
  --ink-2:#4a4d4b;
  --mute:#7b7f7c;
  --orange:#ff4a1c;
  --orange-d:#d93a10;
  --yellow:#ffd23a;
  --line:#121212;
  --won:#1f6dff;
  --stencil:'Big Shoulders Stencil Display',Impact,sans-serif;
  --body:'Archivo',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--steel);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.45;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#e6e8e4,#d6d9d5);
  overflow-x:hidden;
}
a{color:inherit}
button{font:inherit;color:inherit}
code{font-family:var(--mono)}

/* hazard tape ticker */
.tape{background:var(--yellow);border-bottom:3px solid var(--ink);overflow:hidden;white-space:nowrap;position:relative;height:34px}
.tape::before,.tape::after{content:"";position:absolute;top:0;bottom:0;width:46px;z-index:2;
  background:repeating-linear-gradient(-45deg,var(--ink) 0 10px,var(--yellow) 10px 20px)}
.tape::before{left:0}.tape::after{right:0}
.tape-run{display:inline-flex;gap:48px;padding:7px 0 0 60px;font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:uppercase;animation:tape 60s linear infinite}
.tape-run span b{color:var(--orange-d)}
@keyframes tape{to{transform:translateX(-50%)}}

/* header */
.top{display:flex;align-items:center;gap:20px;padding:14px clamp(16px,4vw,40px);border-bottom:3px solid var(--ink);background:var(--plate);position:sticky;top:0;z-index:20}
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--stencil);font-weight:900;font-size:34px;letter-spacing:.02em;text-decoration:none;line-height:1}
.logo.small{font-size:22px}
.logo-dial{width:28px;height:28px;border-radius:50%;background:var(--orange);border:3px solid var(--ink);position:relative;animation:spin 8s linear infinite}
.logo.small .logo-dial{width:20px;height:20px}
.logo-dial::after{content:"";position:absolute;left:50%;top:-3px;width:4px;height:50%;background:var(--ink);transform:translateX(-50%)}
@keyframes spin{to{transform:rotate(360deg)}}
.top-nav{display:flex;gap:18px;margin-left:12px}
.top-nav a{text-decoration:none;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.06em}
.top-nav a:hover{color:var(--orange-d)}
.top-act{margin-left:auto;display:flex;gap:10px;align-items:center}
.ca{display:flex;gap:8px;align-items:center;border:2px solid var(--ink);background:#fff;padding:7px 10px;cursor:pointer;font-size:13px}
.ca span{font-weight:800}
.btn{display:inline-block;text-decoration:none;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:14px;padding:10px 16px;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:transform .1s,box-shadow .1s}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn-buy{background:var(--orange);color:#fff}
.btn-ghost{background:#fff}

main{max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto 70px;gap:clamp(20px,3vw,44px);align-items:center;padding:clamp(28px,5vw,64px) 0 30px}
.kicker{display:inline-block;margin:0 0 14px;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.08em;background:var(--ink);color:#fff;padding:6px 10px}
.kicker span{color:var(--yellow)}
h1{font-family:var(--stencil);font-weight:900;font-size:clamp(52px,7.4vw,104px);line-height:.88;margin:0 0 20px;text-transform:uppercase;letter-spacing:.005em}
h1 em{font-style:normal;color:var(--orange)}
.lede{font-size:18px;max-width:34em;margin:0 0 24px;color:var(--ink-2)}
.hero-stats{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats div{border:3px solid var(--ink);background:var(--plate);padding:10px 14px;box-shadow:4px 4px 0 var(--ink)}
.hero-stats b{display:block;font-family:var(--stencil);font-size:32px;line-height:1}
.hero-stats span{font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;color:var(--ink-2)}

/* jackpot door */
.door-wrap{--d:min(500px,86vw);container-type:inline-size;width:var(--d);height:var(--d);position:relative}
.door{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f7f8f6,#c3c7c3 55%,#9ea39f 100%);
  border:5px solid var(--ink);box-shadow:10px 12px 0 var(--ink),inset 0 0 0 14px rgba(0,0,0,.06)}
.door.shake{animation:shake .5s}
@keyframes shake{20%{transform:translate(-6px,2px) rotate(-1deg)}40%{transform:translate(5px,-3px) rotate(1deg)}60%{transform:translate(-4px,3px)}80%{transform:translate(3px,-1px)}}
.door-ring{position:absolute;inset:11%;border-radius:50%;border:4px solid var(--ink);
  background:repeating-conic-gradient(var(--ink) 0 1deg,transparent 1deg 6deg);
  -webkit-mask:radial-gradient(circle closest-side,transparent 78%,#000 79%);mask:radial-gradient(circle closest-side,transparent 78%,#000 79%);
  transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.door-bolts{position:absolute;inset:0}
.door-bolts i{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px;border-radius:50%;background:#8e938f;border:3px solid var(--ink)}
.door-face{position:absolute;inset:27%;border-radius:50%;background:var(--ink);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:5px solid var(--orange);padding:6px}
.door-tag{font-size:clamp(9px,1.6vw,11px);font-weight:800;letter-spacing:.1em;color:var(--yellow)}
.door-sol{font-family:var(--stencil);font-size:clamp(40px,8vw,74px);line-height:.95;margin-top:4px}
.door-unit{font-weight:800;letter-spacing:.2em;font-size:12px;color:var(--orange)}
.door-usd{font-family:var(--mono);font-size:13px;margin-top:4px;color:#cfd3cf}
.door-known{margin-top:8px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--orange);padding:3px 8px}
.door-slots{position:absolute;inset:0}
.jslot{position:absolute;left:50%;top:50%;width:clamp(58px,13vw,86px);height:26px;margin:-13px 0 0 calc(clamp(58px,13vw,86px) / -2);
  display:flex;align-items:center;justify-content:center;gap:3px;font-family:var(--mono);font-size:clamp(9px,1.8vw,12px);font-weight:600;
  background:var(--plate);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.jslot small{color:var(--mute);font-size:9px}
.jslot.on{background:var(--yellow)}
.jslot.new{animation:stampS .6s cubic-bezier(.3,1.6,.5,1)}
/* jackpot slots are placed with an inline transform: animate scale/rotate, never transform, or the slot jumps to the door centre */
@keyframes stampS{0%{scale:1.9;rotate:-6deg;opacity:0}60%{scale:.92;opacity:1}100%{scale:1;rotate:0deg}}

/* ladder */
.ladder{position:relative;height:min(500px,86vw);width:70px}
.ladder-rail{position:absolute;left:28px;top:0;bottom:0;width:14px;border:3px solid var(--ink);background:#fff;overflow:hidden}
.ladder-fill{position:absolute;left:0;right:0;bottom:0;height:0;background:repeating-linear-gradient(-45deg,var(--orange) 0 8px,var(--orange-d) 8px 16px);transition:height 1s}
.ladder-step{position:absolute;left:0;right:0;height:0}
.ladder-step i{position:absolute;left:22px;width:26px;height:3px;background:var(--ink);top:-1px}
.ladder-step span{position:absolute;right:calc(100% - 18px);transform:translateY(-50%);font-family:var(--stencil);font-weight:900;font-size:18px;white-space:nowrap;padding-right:4px}
.ladder-step.hit span{color:var(--orange-d)}
.ladder-pin{position:absolute;left:46px;transform:translateY(50%);transition:bottom 1s;white-space:nowrap}
.ladder-pin span{display:inline-block;background:var(--ink);color:#fff;font-family:var(--mono);font-size:12px;padding:3px 6px;position:relative}
.ladder-pin span::before{content:"";position:absolute;left:-8px;top:50%;margin-top:-6px;border:6px solid transparent;border-right:8px solid var(--ink);border-left:0}

/* fee pipe */
.pipe{margin:10px 0 40px;border:3px solid var(--ink);background:var(--plate);box-shadow:6px 6px 0 var(--ink);padding:14px 16px}
.pipe-head{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.pipe-head b{font-family:var(--stencil);font-size:24px}
.pipe-head span{font-size:14px;color:var(--ink-2)}
.pipe-tube{height:18px;border:3px solid var(--ink);margin:12px 0;background:#fff;overflow:hidden}
.pipe-flow{height:100%;width:200%;background:repeating-linear-gradient(90deg,var(--orange) 0 18px,transparent 18px 34px);animation:flow 1.2s linear infinite}
@keyframes flow{to{transform:translateX(-34px)}}
.pipe-split{display:grid;grid-template-columns:10fr 10fr 15fr 15fr 50fr;gap:4px}
.pipe-split div{border:2px solid var(--ink);padding:6px 8px;font-size:12px;font-weight:800;text-transform:uppercase;background:#fff;position:relative;overflow:hidden;min-width:0}
.pipe-split div.jack{background:var(--ink);color:#fff}
.pipe-split div b{display:block;font-family:var(--stencil);font-size:20px;line-height:1}
.pipe-split div.dead{background:repeating-linear-gradient(-45deg,#fff 0 6px,#e5e7e3 6px 12px);color:var(--mute)}
.drip{position:absolute;right:6px;top:4px;font-family:var(--mono);font-size:11px;color:var(--orange-d);animation:drip 1.4s forwards}
.pipe-split div.jack .drip{color:var(--yellow)}
@keyframes drip{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-16px)}}

/* section heads */
.sec-head{margin:0 0 20px}
.sec-head h2{font-family:var(--stencil);font-weight:900;font-size:clamp(38px,5vw,60px);line-height:.95;margin:0 0 6px;text-transform:uppercase}
.sec-head p{margin:0;color:var(--ink-2);max-width:40em}

/* vaults */
.vaults{padding:10px 0 50px}
.vault-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px}
.vault{border:3px solid var(--ink);background:var(--plate);box-shadow:6px 6px 0 var(--ink);display:flex;flex-direction:column;position:relative}
.vault.dropping{box-shadow:6px 6px 0 var(--orange);border-color:var(--orange-d)}
.vault.dropping .v-top{background:var(--orange)}
.vault.cracked{background:repeating-linear-gradient(-45deg,var(--plate) 0 10px,#dcdfdb 10px 20px)}
.v-top{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--ink);color:#fff}
.v-cap{font-family:var(--stencil);font-weight:900;font-size:28px;line-height:1}
.v-badge{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;background:#fff;color:var(--ink)}
.dropping .v-badge{background:var(--ink);color:var(--yellow);animation:blink 1s steps(2) infinite}
.open .v-badge{background:var(--yellow)}
.cracked .v-badge{background:var(--won);color:#fff}
@keyframes blink{50%{opacity:.4}}
.v-body{padding:12px;display:flex;flex-direction:column;gap:10px;flex:1}
.v-bal{display:flex;align-items:baseline;gap:6px}
.v-bal b{font-family:var(--stencil);font-size:44px;line-height:1}
.v-bal span{font-weight:800;color:var(--orange-d)}
.v-bal em{font-style:normal;margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.v-addr{font-family:var(--mono);font-size:11px;color:var(--ink-2);display:flex;justify-content:space-between;gap:6px}
.v-addr button{background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;font-size:11px;font-family:var(--mono)}
.v-words{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:0;padding:0;list-style:none;counter-reset:w}
.v-words li{display:flex;gap:4px;align-items:center;height:28px;padding:0 6px;border:2px solid var(--ink);background:#c9cdc9;font-family:var(--mono);font-size:12px;font-weight:600;overflow:hidden;
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.18)}
.v-words li small{color:var(--mute);font-size:9px;min-width:13px}
.v-words li.on{background:#fff;box-shadow:2px 2px 0 var(--ink)}
.v-words li.new{animation:stamp .6s cubic-bezier(.3,1.6,.5,1);background:var(--yellow)}
.v-words li.lock::after{content:"";flex:1;height:8px;background:repeating-linear-gradient(90deg,var(--ink-2) 0 4px,transparent 4px 7px);opacity:.35}
@keyframes stamp{0%{transform:scale(1.9) rotate(-6deg);opacity:0}60%{transform:scale(.92);opacity:1}100%{transform:scale(1)}}
.v-meter{font-size:12px;font-weight:600}
.v-meter-bar{height:10px;border:2px solid var(--ink);background:#fff;margin-top:4px;overflow:hidden}
.v-meter-bar i{display:block;height:100%;background:var(--orange);transition:width .6s}
.v-next{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--orange-d)}
.v-winner{font-size:13px;border-top:2px dashed var(--ink);padding-top:8px}
.v-winner code{background:var(--won);color:#fff;padding:1px 5px}
.v-jack-tag{position:absolute;right:-10px;top:-14px;background:var(--yellow);border:3px solid var(--ink);font-weight:900;font-size:12px;padding:3px 8px;transform:rotate(4deg)}

/* crack maths */
.crack{padding:10px 0 50px}
.crack-list{display:flex;flex-direction:column;gap:10px}
.crow{display:grid;grid-template-columns:110px 1fr 200px;gap:14px;align-items:center;border:3px solid var(--ink);background:var(--plate);padding:10px 14px}
.crow-cap{font-family:var(--stencil);font-size:28px;font-weight:900;line-height:1}
.crow-mid{min-width:0}
.crow-mid .bits{display:flex;gap:3px;margin-bottom:6px}
.crow-mid .bits i{flex:1;height:14px;border:2px solid var(--ink);background:#fff}
.crow-mid .bits i.on{background:var(--ink)}
.crow-mid p{margin:0;font-size:13px;color:var(--ink-2);font-family:var(--mono);overflow-wrap:anywhere}
.crow-time{text-align:right}
.crow-time b{display:block;font-family:var(--stencil);font-size:30px;line-height:1}
.crow-time span{font-size:11px;text-transform:uppercase;font-weight:800;letter-spacing:.06em;color:var(--ink-2)}
.crow.hot{border-color:var(--orange-d);box-shadow:5px 5px 0 var(--orange)}
.crow.hot .crow-time b{color:var(--orange-d)}
.crow.done{opacity:.55}
.crack-note{font-size:13px;color:var(--mute);margin:12px 0 0}

/* feed */
.feed-sec{padding:10px 0 50px}
.feed{list-style:none;margin:0;padding:0;border:3px solid var(--ink);background:#fff;max-height:360px;overflow:auto}
.feed li{display:flex;gap:12px;padding:9px 14px;border-bottom:1px solid #d2d5d1;font-size:14px;align-items:baseline}
.feed li time{font-family:var(--mono);font-size:11px;color:var(--mute);flex:none}
.feed li.word{background:#fff8d6}
.feed li.crack{background:var(--won);color:#fff}
.feed li.crack time{color:#cfe0ff}
.feed li.open{background:var(--orange);color:#fff}
.feed li.open time{color:#ffe0d6}
.feed li code{font-size:12px}
.feed li.new{animation:feedIn .5s}
@keyframes feedIn{from{transform:translateX(-14px);opacity:0}}

/* how */
.how{padding:10px 0 50px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;counter-reset:s}
.steps li{border:3px solid var(--ink);background:var(--plate);padding:14px;counter-increment:s;position:relative;padding-top:44px}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;top:8px;left:12px;font-family:var(--stencil);font-size:30px;font-weight:900;color:var(--orange);line-height:1}
.steps b{display:block;font-size:18px;margin-bottom:4px}
.steps span{color:var(--ink-2);font-size:14px}

/* proof */
.proof{padding:10px 0 60px}
.proof-list{border:3px solid var(--ink);background:#fff}
.prow{display:grid;grid-template-columns:90px 1fr auto;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid #d2d5d1}
.prow:last-child{border-bottom:0}
.prow b{font-family:var(--stencil);font-size:22px}
.prow code{font-size:12px;overflow-wrap:anywhere;color:var(--ink-2)}
.prow span{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:3px 7px;border:2px solid var(--ink)}
.prow span.ok{background:var(--won);color:#fff;border-color:var(--won)}
.proof-how{font-size:13px;color:var(--mute)}

.foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:20px clamp(16px,4vw,40px);border-top:3px solid var(--ink);background:var(--plate);font-weight:600;font-size:14px}

/* toast + flash */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,120px);background:var(--ink);color:#fff;padding:12px 18px;border:3px solid var(--orange);font-weight:800;z-index:50;transition:transform .35s cubic-bezier(.3,1.4,.5,1);max-width:calc(100vw - 32px);text-align:center}
.toast.show{transform:translate(-50%,0)}
.flash{position:fixed;inset:0;pointer-events:none;z-index:40;opacity:0}
.flash.go{animation:flash .9s}
.flash.open{background:var(--orange)}
.flash.crack{background:var(--won)}
@keyframes flash{0%{opacity:.55}100%{opacity:0}}

/* responsive */
@media (max-width:1060px){
  .hero{grid-template-columns:1fr;justify-items:center}
  .hero-copy{justify-self:stretch}
  .ladder{width:100%;height:60px;order:3}
  .ladder-rail{left:0;right:0;top:22px;bottom:auto;width:auto;height:14px}
  .ladder-fill{top:0;bottom:0;height:auto!important;left:0;right:auto;width:0;transition:width 1s}
  .ladder-step{top:0;bottom:0;width:0;height:auto}
  .ladder-step i{left:-1px;top:16px;width:3px;height:26px}
  .ladder-step span{right:auto;left:50%;top:-6px;transform:translateX(-50%);font-size:15px;padding:0}
  .ladder-step span{top:auto;bottom:-8px}
  .ladder-pin{top:-6px;left:0;transform:translateX(-50%);bottom:auto!important;transition:left 1s}
  .ladder-pin span::before{display:none}
}
@media (max-width:720px){
  .top-nav{display:none}
  .top{gap:10px}
  .ca code{display:none}
  .pipe-split{grid-template-columns:1fr 1fr;}
  .pipe-split div.jack{grid-column:1 / -1}
  .crow{grid-template-columns:1fr auto}
  .crow-mid{grid-column:1 / -1;grid-row:2}
  .prow{grid-template-columns:70px 1fr}
  .prow span{grid-column:2;justify-self:start}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* the viewer cracked it */
.v-winner code.you,.feed code.you{background:var(--orange);color:#fff}
.vault.you{box-shadow:6px 6px 0 var(--orange)}

/* module buttons in the header: one row on desktop, their own full-width row under the logo on phones */
#mount-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
@media (max-width:720px){
  .top{flex-wrap:wrap}
  #mount-head{order:9;width:100%;justify-content:flex-start;padding-top:8px;border-top:2px dashed var(--ink)}
  .top-act{margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
}

/* ---------- control room page ---------- */
.btn-room{white-space:nowrap}
.room-tag{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:var(--orange);color:#fff;border:2px solid var(--ink);padding:4px 8px;transform:rotate(-2deg)}
.room-intro{padding:clamp(24px,4vw,40px) 0 20px}
.room-stats{display:flex;gap:12px;flex-wrap:wrap}
.room-stats div{border:3px solid var(--ink);background:var(--plate);padding:10px 14px;box-shadow:4px 4px 0 var(--ink);min-width:140px}
.room-stats b{display:block;font-family:var(--stencil);font-size:32px;line-height:1}
.room-stats span{font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;color:var(--ink-2)}
.page-room .top-nav{gap:14px}
.sec-head p a{color:var(--orange-d);font-weight:600}
.foot a{color:var(--orange-d);font-weight:800;text-decoration:none}
@media (max-width:900px){.page-room .top-nav{display:none}}