/* REX revealer — PULSE GRID house style.
   Palette, motion vocabulary and type are lifted from the game this drop rides
   on: ground #04050d, neon accents, callouts that land-hold-fade, decaying
   shake, beat pulses, slow-mo on the big pulls.

   The visual ladder: --tier recolours the whole page per pull, and the stage
   carries a hype class h0..h4 — h0 is a clean landing, h2+ adds the aura,
   h4 (GENESIS) adds rotating rays and a persistent gold frame. Rarity must be
   legible from across the room. */
:root{
  --ground:#04050d; --panel:#0b0f1c; --line:#1b2338; --ink:#eaf7ff; --dim:#6f86b8;
  --gold:#ffd97d; --pink:#ff7da8; --mint:#7dffb0; --cyan:#7df3ff; --violet:#d9a8ff;
  --amber:#ffb84d; --steel:#8fa7d8; --red:#ff5070; --brand:#4CBE64;
  --tier:var(--steel);            /* recoloured per pull */
  --display:"Chakra Petch","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono","SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ground);color:var(--ink);font:16px/1.55 var(--display);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
body{min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:20px 16px 64px}
.wrap{width:100%;max-width:460px;position:relative;z-index:1}

.top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
h1{font-size:clamp(25px,7.4vw,34px);margin:0;font-weight:700;letter-spacing:.14em;line-height:1.05}
h1 span{color:var(--mint);text-shadow:0 0 18px rgba(125,255,176,.45)}
.chip{width:auto;margin:2px 0 0;padding:7px 10px;border-radius:5px;background:transparent;white-space:nowrap;
  border:1px solid var(--line);color:var(--dim);font:600 10px/1 var(--mono);letter-spacing:.14em;cursor:pointer}
.chip:hover{color:var(--ink)}
.lede{color:var(--dim);font:12.5px/1.65 var(--mono);margin:10px 0 16px;letter-spacing:.02em}
.lede b{color:var(--ink);font-weight:500}

/* ---- cards / gate --------------------------------------------------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px}
label{display:block;font:11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
input{width:100%;background:#05070f;border:1px solid var(--line);border-radius:8px;color:var(--ink);
  padding:13px 12px;font:14px/1.3 var(--mono);outline:none}
input:focus{border-color:var(--mint);box-shadow:0 0 0 3px rgba(125,255,176,.12)}
button{width:100%;margin-top:10px;padding:14px;border:0;border-radius:8px;background:var(--mint);
  color:#02140a;font:700 14px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  transition:filter .12s,transform .08s}
button:hover:not(:disabled){filter:brightness(1.1)}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{opacity:.3;cursor:not-allowed}
button.ghost{background:transparent;border:1px solid var(--line);color:var(--dim);font-weight:600}
button.ghost:hover:not(:disabled){color:var(--ink);filter:none}

/* ---- vault strip (gate context) ------------------------------------- */
.vault h3{margin:0 0 12px;font:11px/1 var(--mono);letter-spacing:.16em;color:var(--dim);
  display:flex;justify-content:space-between;align-items:baseline}
.vault h3 em{font-style:normal;color:var(--gold);letter-spacing:.08em}
.vrow{display:grid;grid-template-columns:74px 1fr 38px 46px;align-items:center;gap:8px;padding:4px 0}
.vrow b{font:700 10.5px/1 var(--mono);letter-spacing:.1em;color:var(--tc)}
.vrow .vbar{display:block;height:6px;border-radius:3px;background:#05070f;overflow:hidden}
.vrow .vbar u{display:block;height:100%;background:var(--tc);border-radius:3px;opacity:.85}
.vrow em{font-style:normal;font:11px/1 var(--mono);color:var(--dim);text-align:right;font-variant-numeric:tabular-nums}
.vrow s{text-decoration:none;font:600 8px/1 var(--mono);letter-spacing:.12em;color:var(--gold);
  border:1px solid rgba(255,217,125,.4);border-radius:3px;padding:2px 3px;text-align:center}
.vrow s.blank{border:0}
.vnote{margin:10px 0 0;font:10.5px/1.6 var(--mono);color:var(--dim)}
.vnote b{color:var(--ink);font-weight:500}

/* ---- notices --------------------------------------------------------- */
.notice{margin-top:12px;padding:11px 12px;border-radius:8px;border:1px solid var(--line);
  font:12px/1.6 var(--mono);color:var(--dim);background:#070a14}
.notice b{color:var(--ink);font-weight:500}
.notice.err{border-color:rgba(255,80,112,.45);color:#ffb3c2}
.notice.err b{color:#fff}
.notice.warn{border-color:rgba(255,217,125,.4);color:#ffe8b8}
.notice.warn b{color:#fff}
.notice.info{border-color:var(--line);color:var(--dim)}
.nbtn{display:block;width:auto;margin:10px 0 0;padding:8px 14px;border-radius:5px;background:transparent;
  border:1px solid currentColor;color:inherit;font:600 11px/1 var(--mono);letter-spacing:.12em}

/* ---- hud ------------------------------------------------------------- */
.hud{display:flex;justify-content:space-between;align-items:flex-end;margin:18px 0 4px}
.hudcell{display:flex;align-items:flex-end;gap:9px}
.hudcell.right{flex-direction:row-reverse;text-align:right}
.hudcell b{font:700 42px/.85 var(--display);color:var(--gold);text-shadow:0 0 22px rgba(255,217,125,.42);
  font-variant-numeric:tabular-nums}
.hudcell.right b{color:var(--mint);text-shadow:0 0 22px rgba(125,255,176,.35)}
.hudcell b.tick{animation:tick .32s ease-out}
@keyframes tick{0%{transform:scale(1.28);filter:brightness(1.7)}100%{transform:scale(1)}}
.hudcell span{font:10px/1.35 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--dim);padding-bottom:3px}
.who{font:10.5px/1 var(--mono);color:var(--dim);letter-spacing:.08em;margin:0 0 10px}

/* ---- stage ----------------------------------------------------------- */
.stage{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(circle at 50% 44%,#131c33,#04050d 72%);display:grid;place-items:center;
  transition:border-color .4s,box-shadow .4s}
.stage.charging{animation:shake .28s linear infinite}
@keyframes shake{0%,100%{transform:translate(0,0)}25%{transform:translate(-5px,2px)}75%{transform:translate(5px,-2px)}}
.stage.hit{animation:kick .5s cubic-bezier(.2,.9,.2,1)}
@keyframes kick{0%{transform:scale(1.05)}100%{transform:scale(1)}}

/* landed frames — rarity readable at a glance, and it PERSISTS on the stage */
.stage.landed{border-color:var(--tier)}
.stage.landed.h2{box-shadow:0 0 26px -6px var(--tier)}
.stage.landed.h3{box-shadow:0 0 34px -4px var(--tier),inset 0 0 0 1px var(--tier)}
.stage.landed.h4{box-shadow:0 0 48px -2px var(--tier),inset 0 0 0 2px var(--tier)}

.egg{width:46%;filter:drop-shadow(0 0 24px rgba(125,255,176,.5));animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(-5px)}50%{transform:translateY(5px)}}
.stage.charging .egg{animation:bob .5s ease-in-out infinite;filter:drop-shadow(0 0 40px var(--tier))}

#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.reveal{position:absolute;inset:0;opacity:0;transform:scale(.86);transition:opacity .45s,transform .45s;z-index:2}
.reveal.on{opacity:1;transform:scale(1)}
.reveal img{width:100%;height:100%;object-fit:cover;display:block}
.flash{position:absolute;inset:0;background:var(--tier);opacity:0;pointer-events:none;mix-blend-mode:screen;z-index:4}
.flash.go{animation:fl .6s ease-out}
@keyframes fl{0%{opacity:.9}100%{opacity:0}}

/* the tell: an ambient bloom in the tier colour that ignites MID-SPIN on
   rare pulls — the buyer sees it coming before the reel stops */
.aura{position:absolute;inset:-18%;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(circle at 50% 55%,var(--tier),transparent 62%)}
.aura.on{opacity:.5;animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.34}50%{opacity:.62}}

/* GENESIS only: slow gold rays behind everything */
.rays{position:absolute;inset:-40%;z-index:1;pointer-events:none;opacity:0;transition:opacity .6s;
  background:conic-gradient(from 0deg,transparent 0 14deg,rgba(255,217,125,.16) 14deg 22deg,
    transparent 22deg 40deg,rgba(255,217,125,.16) 40deg 48deg,transparent 48deg 66deg,
    rgba(255,217,125,.16) 66deg 74deg,transparent 74deg 92deg,rgba(255,217,125,.16) 92deg 100deg,
    transparent 100deg 118deg,rgba(255,217,125,.16) 118deg 126deg,transparent 126deg 144deg,
    rgba(255,217,125,.16) 144deg 152deg,transparent 152deg 170deg,rgba(255,217,125,.16) 170deg 178deg,
    transparent 178deg 196deg,rgba(255,217,125,.16) 196deg 204deg,transparent 204deg 222deg,
    rgba(255,217,125,.16) 222deg 230deg,transparent 230deg 248deg,rgba(255,217,125,.16) 248deg 256deg,
    transparent 256deg 274deg,rgba(255,217,125,.16) 274deg 282deg,transparent 282deg 300deg,
    rgba(255,217,125,.16) 300deg 308deg,transparent 308deg 326deg,rgba(255,217,125,.16) 326deg 334deg,
    transparent 334deg)}
.rays.on{opacity:1;animation:spinrays 14s linear infinite}
@keyframes spinrays{to{transform:rotate(360deg)}}

/* the callout: lands, holds, fades — same beat as the game's combo shout */
.shout{position:absolute;left:0;right:0;top:34%;text-align:center;z-index:5;pointer-events:none;opacity:0}
.shout b{display:block;font:700 clamp(30px,10vw,46px)/1 var(--display);letter-spacing:.1em;
  color:var(--tier);text-shadow:0 0 26px var(--tier),0 3px 0 rgba(0,0,0,.55);-webkit-text-stroke:1px rgba(0,0,0,.35)}
.shout i{display:block;margin-top:8px;font:500 clamp(12px,3.6vw,15px)/1.3 var(--mono);font-style:normal;
  letter-spacing:.22em;color:var(--ink);text-shadow:0 0 12px var(--tier),0 2px 0 rgba(0,0,0,.6)}
.shout.go{animation:shout 1.9s cubic-bezier(.15,1.4,.4,1) forwards}
@keyframes shout{
  0%{opacity:0;transform:scale(2.4) rotate(-6deg)}
  14%{opacity:1;transform:scale(1) rotate(-2deg)}
  78%{opacity:1;transform:scale(1) rotate(-2deg)}
  100%{opacity:0;transform:scale(1.15) rotate(-2deg)}
}

.skiphint{position:absolute;left:0;right:0;bottom:9px;text-align:center;z-index:5;pointer-events:none;
  font:500 10px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:rgba(234,247,255,.55);
  opacity:0;transition:opacity .4s}
.skiphint.on{opacity:1;animation:hintpulse 1.2s ease-in-out infinite}
@keyframes hintpulse{0%,100%{opacity:.35}50%{opacity:.85}}

.batchhud{position:absolute;top:9px;left:9px;right:9px;z-index:6;display:flex;justify-content:space-between;
  align-items:center;gap:8px;pointer-events:none}
.batchhud span{font:500 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);text-shadow:0 1px 2px rgba(0,0,0,.8);background:rgba(4,5,13,.55);padding:6px 9px;border-radius:5px}
.batchhud button{pointer-events:auto;width:auto;margin:0;padding:7px 11px;border-radius:5px;
  background:rgba(4,5,13,.72);border:1px solid var(--line);color:var(--dim);
  font:600 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}

/* ---- controls -------------------------------------------------------- */
.controls{display:flex;gap:9px;margin-top:12px}
.controls button{margin-top:0}
.controls #rollAll{flex:0 0 38%}

/* ---- result card ------------------------------------------------------ */
.result{margin-top:16px;border:1px solid var(--line);border-radius:12px;padding:15px;background:var(--panel);
  border-top:2px solid var(--tier)}
.plaque{display:inline-block;font:700 9.5px/1 var(--mono);letter-spacing:.26em;color:#04050d;
  background:var(--tier);border-radius:3px;padding:4px 8px;margin-bottom:8px}
.nm{font:700 21px/1.2 var(--display);letter-spacing:.01em}
.badges{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap;align-items:center}
.tierbadge{padding:5px 12px;border-radius:4px;font:700 11px/1 var(--mono);letter-spacing:.17em;
  background:var(--tier);color:#04050d}
.pop{font:11px/1 var(--mono);letter-spacing:.13em;color:var(--tier);border:1px solid var(--tier);
  padding:5px 9px;border-radius:4px;font-variant-numeric:tabular-nums}
.rank{font:10px/1 var(--mono);letter-spacing:.1em;color:var(--dim);border:1px solid var(--line);
  padding:5px 8px;border-radius:4px;font-variant-numeric:tabular-nums}
.lore{color:var(--dim);font:italic 13px/1.6 var(--display);margin-top:10px;min-height:0}
.lore:empty{display:none}

/* rider unlock — the second prize, brand green because it belongs to the game */
.unlock{margin-top:12px;border:1px solid rgba(76,190,100,.5);border-radius:8px;padding:11px 12px;
  background:linear-gradient(180deg,rgba(76,190,100,.1),rgba(76,190,100,.03))}
.unlock i{display:block;font:700 9px/1 var(--mono);font-style:normal;letter-spacing:.24em;color:var(--brand)}
.unlock b{display:block;font:700 19px/1.1 var(--display);letter-spacing:.06em;color:var(--mint);margin-top:5px}
.unlock span{display:block;font:11px/1.5 var(--mono);color:var(--dim);margin-top:4px}
.unlock a{display:inline-block;margin-top:8px;font:700 11px/1 var(--mono);letter-spacing:.16em;
  color:var(--brand);text-decoration:none;border:1px solid rgba(76,190,100,.5);border-radius:5px;padding:8px 13px}
.unlock a:hover{background:rgba(76,190,100,.14)}

.traits{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:13px}
.trt{background:#070a14;border:1px solid var(--line);border-radius:7px;padding:9px 10px}
.trt i{display:block;font:10px/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--dim);font-style:normal}
.trt b{font:600 13.5px/1.35 var(--display)}
.trt em{display:block;font-style:normal;color:var(--dim);font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums}

/* ---- delivery stepper ------------------------------------------------- */
.delivery{margin-top:13px;padding:11px 12px;border-radius:8px;border:1px solid var(--line);background:#070a14}
.steps{display:flex;align-items:center;gap:6px;margin-bottom:9px}
.steps .st{font:600 9px/1 var(--mono);letter-spacing:.14em;color:#3d4c74;padding:4px 7px;
  border:1px solid var(--line);border-radius:3px;white-space:nowrap}
.steps .st.done{color:var(--mint);border-color:rgba(125,255,176,.45)}
.steps .st.done.fin{background:rgba(125,255,176,.12)}
.steps .st.cur{color:var(--cyan);border-color:rgba(125,243,255,.55);animation:curstep 1.3s ease-in-out infinite}
@keyframes curstep{0%,100%{box-shadow:0 0 0 0 rgba(125,243,255,0)}50%{box-shadow:0 0 10px 0 rgba(125,243,255,.35)}}
.steps .ln{flex:1;height:1px;background:var(--line)}
.steps .ln.done{background:rgba(125,255,176,.45)}
.delivery p{margin:0;font:11.5px/1.6 var(--mono);color:var(--dim)}
.delivery a{display:inline-block;margin-top:7px;font:11.5px/1.5 var(--mono);color:var(--cyan);
  text-decoration:none;border-bottom:1px solid rgba(125,243,255,.35)}
.delivery a:hover{color:#aef6ff}
.dots i{animation:dot 1.4s infinite;font-style:normal}
.dots i:nth-child(2){animation-delay:.2s}
.dots i:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,60%,100%{opacity:.25}30%{opacity:1}}
.claimbtn{width:auto;margin:10px 0 0;padding:10px 18px;border-radius:5px;background:var(--mint);color:#02140a;
  font:700 11px/1 var(--display);letter-spacing:.16em;text-transform:uppercase}
.claimbtn:disabled{opacity:.45}

/* ---- recap ------------------------------------------------------------ */
.recap{margin-top:14px;border:1px solid var(--line);border-radius:10px;padding:13px 14px;background:var(--panel)}
.recap h3{margin:0 0 9px;font:11px/1 var(--mono);letter-spacing:.16em;color:var(--gold);
  display:flex;justify-content:space-between}
.recap h3 em{font-style:normal;color:var(--dim);letter-spacing:.06em;text-transform:lowercase}
.recap p{margin:9px 0 0;font:12px/1.5 var(--mono);color:var(--dim)}

/* ---- collection -------------------------------------------------------- */
.coll{margin-top:18px}
.coll h3{margin:0 0 9px;font:11px/1 var(--mono);letter-spacing:.16em;color:var(--dim);
  display:flex;justify-content:space-between;align-items:baseline}
.coll h3 em{font-style:normal;color:var(--mint);letter-spacing:.06em}
.tally{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}
.tchip{font:600 9.5px/1 var(--mono);letter-spacing:.1em;color:var(--tc);border:1px solid var(--tc);
  border-radius:3px;padding:4px 6px;opacity:.9}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.cell{position:relative;margin:0;padding:0;width:100%;aspect-ratio:1;border-radius:6px;overflow:hidden;
  border:1px solid var(--line);background:#070a14;cursor:pointer;box-shadow:inset 0 0 0 1px transparent;
  transition:transform .1s}
.cell:hover{transform:scale(1.04)}
.cell img{width:100%;height:100%;object-fit:cover;display:block}
.cell{border-color:color-mix(in srgb,var(--tc) 55%,var(--line))}
.cell.named{border-color:var(--tc);box-shadow:0 0 10px -2px var(--tc)}
.cell .dot{position:absolute;right:4px;bottom:4px;width:7px;height:7px;border-radius:50%;
  background:#3d4c74;border:1px solid rgba(4,5,13,.8)}
.cell .dot.mid{background:var(--cyan);animation:curstep 1.3s ease-in-out infinite}
.cell .dot.ok{background:var(--mint)}
#claimAll{margin-top:10px}

/* ---- endcard ----------------------------------------------------------- */
.endcard{margin-top:16px;border:1px solid rgba(255,217,125,.4);border-radius:12px;padding:15px;
  background:linear-gradient(180deg,rgba(255,217,125,.07),rgba(255,217,125,.015))}
.endcard h3{margin:0;font:700 15px/1 var(--display);letter-spacing:.14em;color:var(--gold)}
.endcard p{margin:9px 0 0;font:12px/1.6 var(--mono);color:var(--dim)}
.endcard p b{font-weight:600}
.endcard .paths{display:flex;flex-direction:column;gap:7px;margin-top:13px}
.endcard .paths a{font:700 12px/1 var(--mono);letter-spacing:.14em;color:var(--ink);text-decoration:none;
  border:1px solid var(--line);border-radius:7px;padding:12px 13px;background:#070a14}
.endcard .paths a:hover{border-color:var(--gold);color:var(--gold)}

/* ---- pricing ----------------------------------------------------------- */
.prices{margin-top:20px;border:1px solid var(--line);border-radius:10px;background:var(--panel);overflow:hidden}
.prices h3{margin:0;padding:11px 13px;font:11px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--dim);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.prices h3 em{font-style:normal;color:var(--mint);letter-spacing:.05em;text-transform:none}
.tierrow{display:flex;align-items:baseline;gap:10px;padding:10px 13px;border-bottom:1px solid var(--line)}
.tierrow:last-child{border-bottom:0}
.tierrow b{font:700 15px/1 var(--display);min-width:78px;font-variant-numeric:tabular-nums}
.tierrow span{color:var(--dim);font:11px/1 var(--mono);letter-spacing:.1em;flex:1;text-transform:uppercase}
.tierrow i{font-style:normal;font:12px/1 var(--mono);color:var(--violet);font-variant-numeric:tabular-nums}
.pfoot{padding:9px 13px 11px;font:10.5px/1.5 var(--mono);color:var(--dim)}

.foot{margin-top:22px;font:10.5px/1.7 var(--mono);color:#4b5c86;word-break:break-all;
  border-top:1px solid var(--line);padding-top:16px}
.hide{display:none!important}

/* ---- reduced motion -----------------------------------------------------
   The reveal leans on motion, so this path must still DELIVER the result:
   no reel/shake/particles (JS skips them), the shout stays visible instead of
   animating through, and the tier frame + aura render statically so a GENESIS
   still looks like a GENESIS. */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .shout.go{opacity:1}
  .shout{top:6%}
  .aura.on{opacity:.4}
  .rays.on{opacity:.6}
  .skiphint{display:none}
}