:root{
  --gold:#e4a936;
  --gold2:#ffc95d;
  --gold3:#ffe09a;
  --red:#a8141b;
  --red2:#dc2d39;
  --cream:#fff9f2;
  --muted:#aaa19c;
  --line:rgba(255,255,255,.12);
}
*{box-sizing:border-box}
html,body{
  margin:0;
  min-height:100%;
  background:#030303;
  color:var(--cream);
  font-family:Inter,sans-serif
}
body{
  padding:10px;
  background:
    radial-gradient(circle at 50% 0,#21100c 0,#070505 34%,#020202 72%)
}
button{font:inherit}
.app{max-width:520px;margin:auto}

.screen{
  display:none;
  position:relative;
  overflow:hidden;
  min-height:calc(100vh - 20px);
  padding:18px 16px;
  border:1px solid rgba(225,166,43,.48);
  border-radius:25px;
  background:linear-gradient(180deg,#0c0c0c,#050505 72%,#090606);
  box-shadow:0 25px 70px #000
}
.screen.active{display:block}

/* ---------- Home ---------- */
.header{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.kicker,.eyebrow{
  color:var(--gold2);
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  text-align:center
}
.kicker{text-align:left}
h1{
  font-family:Philosopher,serif;
  font-size:33px;
  line-height:1;
  margin:4px 0
}
.tagline{
  font-size:11px;
  margin:5px 0 0;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#ddd
}

.jackpot-box{
  display:grid;
  grid-template-columns:37px 1fr;
  gap:9px;
  align-items:center;
  margin:14px 0 11px;
  padding:9px 12px;
  border:1px solid rgba(231,172,47,.58);
  border-radius:14px;
  background:
    radial-gradient(circle at 10% 50%,rgba(222,157,35,.18),transparent 38%),
    #0d0b08;
  box-shadow:inset 0 0 22px rgba(229,168,44,.045)
}
.crown{
  font-size:29px;
  color:var(--gold2);
  text-align:center;
  text-shadow:0 0 13px rgba(255,193,72,.22)
}
.jackpot-box small{
  display:block;
  color:var(--gold2);
  font-size:8px;
  font-weight:800;
  letter-spacing:.15em
}
.jackpot-box strong{
  font-family:Philosopher,serif;
  font-size:17px
}

.ladder{
  display:flex;
  flex-direction:column-reverse;
  gap:4px
}
.rung{
  display:grid;
  grid-template-columns:29px 1fr auto;
  gap:8px;
  align-items:center;
  min-height:40px;
  padding:5px 9px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#12100f;
  transition:.25s ease
}
.rung-num{
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  border-radius:50%;
  background:#262322;
  font-size:9px;
  font-weight:800
}
.rung strong{
  font-family:Philosopher,serif;
  font-size:16px
}
.rung small{
  font-size:7.5px;
  color:#aaa;
  font-weight:700
}
.rung.future{opacity:.72}
.rung.passed{opacity:.43}
.rung.current{
  border-color:#e0a02d;
  background:linear-gradient(90deg,rgba(151,86,12,.35),rgba(70,13,13,.35));
  box-shadow:0 0 18px rgba(220,155,34,.12)
}
.rung.current .rung-num{
  background:linear-gradient(#f3c46c,#d88c35);
  color:#17100a
}
.rung.jackpot strong{color:#efbd61}

.decision{
  text-align:center;
  padding:12px 5px 4px
}
.decision-amount{
  font-family:Philosopher,serif;
  font-size:48px;
  line-height:1;
  margin:6px 0
}
.decision p{
  font-size:11px;
  color:#c9c1bd;
  margin:8px auto 12px;
  max-width:360px;
  line-height:1.45
}
.actions,.result-actions{
  display:grid;
  grid-template-columns:1fr 1.28fr;
  gap:8px
}
.btn{
  min-height:50px;
  border-radius:12px;
  border:0;
  padding:10px 9px;
  font-weight:800;
  cursor:pointer;
  transition:transform .15s ease,filter .15s ease
}
.btn:active{transform:scale(.985)}
.btn:hover{filter:brightness(1.05)}
.gold{
  color:#170d04;
  background:linear-gradient(#f5cc7b,#d68a2e);
  box-shadow:
    0 8px 22px rgba(219,148,40,.18),
    inset 0 1px rgba(255,255,255,.35)
}
.red{
  color:#fff;
  background:linear-gradient(#c92e38,#761015);
  border:1px solid rgba(255,76,76,.26);
  box-shadow:
    0 8px 22px rgba(133,16,21,.24),
    inset 0 1px rgba(255,255,255,.07)
}
.full{width:100%;margin-top:9px}

.safety,.result-safety{
  position:relative;
  display:grid;
  grid-template-columns:31px 1fr;
  gap:9px;
  align-items:center;
  margin-top:9px;
  padding:8px 10px;
  border:1px solid rgba(223,165,44,.30);
  border-radius:11px;
  background:rgba(185,126,20,.04)
}
.safety-trigger{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  cursor:inherit;
  -webkit-tap-highlight-color:transparent;
  appearance:none
}
.shield{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border:2px solid #d9a43d;
  border-radius:50%;
  color:#efbd5d;
  font-weight:900
}
.safety strong,.result-safety strong{
  display:block;
  color:#eab74e;
  font-size:8px;
  letter-spacing:.13em
}
.safety span{
  font-size:8.5px;
  color:#a9a19d
}
footer{
  text-align:center;
  color:#6d6662;
  font-size:7.5px;
  margin-top:9px
}

/* ---------- Result Screens ---------- */
.result-screen{
  padding:23px 18px;
  text-align:center;
  background:
    radial-gradient(circle at 50% 22%,rgba(189,122,20,.13),transparent 35%),
    linear-gradient(#080808,#020202)
}
.result-top{position:relative;z-index:2}
.stars{
  color:var(--gold2);
  letter-spacing:.25em;
  font-size:14px
}
.result-kicker{
  font-family:Philosopher,serif;
  color:var(--gold2);
  font-size:32px;
  font-weight:700;
  margin-top:5px
}
.result-level{
  font-size:14px;
  font-weight:700;
  letter-spacing:.09em
}
.result-amount{
  font-family:Philosopher,serif;
  font-size:62px;
  line-height:1;
  margin:4px 0
}
.result-sub{
  color:var(--gold2);
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em
}
.result-copy{
  font-size:12px;
  line-height:1.5;
  color:#d4ceca;
  margin:14px auto;
  max-width:330px
}
.small-gap{margin-bottom:4px}
.compact{margin-top:3px}

.intact-ladder{
  position:relative;
  width:155px;
  height:225px;
  margin:10px auto
}
.rail{
  position:absolute;
  top:0;
  bottom:0;
  width:12px;
  border-radius:8px;
  background:linear-gradient(90deg,#7d4d0a,#ffc956,#80520c);
  box-shadow:0 0 15px rgba(255,184,46,.22)
}
.rail.left{left:15px;transform:rotate(4deg)}
.rail.right{right:15px;transform:rotate(-4deg)}
.intact-ladder i{
  position:relative;
  display:block;
  width:116px;
  height:9px;
  margin:0 auto 25px;
  top:17px;
  border-radius:4px;
  background:linear-gradient(#ffce66,#a8670e);
  box-shadow:0 0 10px rgba(255,186,48,.22)
}
.ladder-glow{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 20%,rgba(255,179,33,.22),transparent 55%);
  filter:blur(15px)
}
.result-safety{text-align:left;margin-top:12px}
.result-safety p{
  font-size:9px;
  color:#aaa;
  margin:3px 0;
  line-height:1.4
}
.shield.big{width:39px;height:39px}

/* ---------- Slip ---------- */
.slip-screen{
  background:
    radial-gradient(circle at 50% 30%,rgba(179,16,16,.18),transparent 40%),
    #030303
}
.slip-title{
  font-family:Philosopher,serif;
  color:#e13434;
  font-size:39px;
  font-weight:700;
  text-shadow:0 0 20px rgba(255,30,30,.25)
}
.broken-ladder{
  height:260px;
  position:relative;
  margin:7px 0
}
.broken{
  position:absolute;
  width:125px;
  height:100px;
  left:50%;
  transform:translateX(-50%) rotate(4deg)
}
.broken.top{top:13px}
.broken.bottom{
  bottom:10px;
  transform:translateX(-50%) rotate(-7deg)
}
.broken:before,.broken:after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:10px;
  background:linear-gradient(#a51c18,#3e0c0a);
  box-shadow:0 0 16px rgba(255,40,25,.32)
}
.broken:before{left:12px}
.broken:after{right:12px}
.broken b{
  display:block;
  position:relative;
  top:13px;
  width:90px;
  height:8px;
  margin:0 auto 19px;
  background:#7e1713;
  box-shadow:0 0 9px rgba(255,39,28,.2)
}
.sparks{
  position:absolute;
  top:46%;
  left:0;
  right:0;
  color:#e63825;
  font-size:24px;
  letter-spacing:.35em
}
.slip-target{
  font-family:Philosopher,serif;
  font-size:45px;
  color:#e02c2c
}
.terminal-eyebrow{margin-top:11px}

/* ---------- Cash ---------- */
.lock-icon{
  display:grid;
  place-items:center;
  width:94px;
  height:94px;
  margin:30px auto 22px;
  border:2px solid #d7a038;
  border-radius:50%;
  color:#efb950;
  font-size:42px;
  box-shadow:0 0 30px rgba(224,164,48,.08)
}
.reveal-box{
  margin-top:11px;
  padding:16px;
  border:1px solid rgba(223,165,44,.35);
  border-radius:13px;
  background:#100d09
}
.reveal-box span{
  display:block;
  color:#d8a545;
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em
}
.reveal-box strong{
  display:block;
  margin:5px 0;
  font-family:Philosopher,serif;
  font-size:30px;
  color:#f0bd5a
}
.reveal-box p{
  margin:0;
  color:#bdb3ad;
  font-size:11px;
  line-height:1.45
}

/* ---------- Jackpot ---------- */
.jackpot-screen{
  background:
    radial-gradient(circle at 50% 20%,rgba(246,178,38,.24),transparent 30%),
    radial-gradient(circle at 10% 70%,rgba(176,20,20,.13),transparent 28%),
    radial-gradient(circle at 90% 70%,rgba(176,20,20,.13),transparent 28%),
    #020202
}
.jackpot-rays{
  position:absolute;
  width:520px;
  height:520px;
  top:-170px;
  left:50%;
  transform:translateX(-50%);
  opacity:.15;
  background:repeating-conic-gradient(
    from 0deg,
    #ffcf64 0deg 7deg,
    transparent 7deg 17deg
  );
  border-radius:50%;
  animation:spinRays 18s linear infinite
}
@keyframes spinRays{
  to{transform:translateX(-50%) rotate(360deg)}
}
.jackpot-stars{font-size:18px}
.jackpot-kicker{
  color:#ffe09a;
  text-shadow:0 0 18px rgba(255,194,69,.18)
}
.jackpot-word{
  position:relative;
  z-index:2;
  font-family:Philosopher,serif;
  font-size:54px;
  color:#ffd166;
  line-height:1;
  margin:5px 0;
  text-shadow:
    0 0 12px rgba(255,190,50,.35),
    0 0 32px rgba(255,152,0,.18)
}
.jackpot-prize{
  position:relative;
  z-index:2;
  color:#fff3d4;
  font-size:18px;
  font-weight:800;
  letter-spacing:.04em
}
.jackpot-ladder{
  height:240px;
  margin-top:14px;
  filter:drop-shadow(0 0 11px rgba(255,177,32,.18))
}
.ladder-glow.huge{
  background:radial-gradient(circle at 50% 30%,rgba(255,185,35,.42),transparent 60%);
  filter:blur(19px)
}
.jackpot-copy{
  color:#f4dfba;
  font-size:14px
}
.winner-badge{
  display:inline-block;
  padding:9px 14px;
  border:1px solid rgba(255,199,78,.55);
  border-radius:999px;
  background:rgba(215,145,31,.08);
  color:#ffd36d;
  font-size:10px;
  font-weight:800;
  letter-spacing:.10em
}

/* ---------- Countdown ---------- */
.auto-return{
  margin-top:15px;
  color:#817872;
  font-size:10px;
  text-align:center
}
.auto-return strong{
  color:#d9a545;
  font-size:12px
}
.jackpot-return{color:#a99369}
.jackpot-return strong{color:#ffd06b}

/* ---------- Effects ---------- */
.hidden{display:none!important}
#fx{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:99
}
.confetti{
  position:absolute;
  top:-16px;
  width:7px;
  height:13px;
  background:currentColor;
  animation:fall linear forwards
}
@keyframes fall{
  to{
    transform:translate3d(var(--x),110vh,0) rotate(920deg);
    opacity:0
  }
}
.cannon-piece{
  position:absolute;
  width:8px;
  height:16px;
  background:currentColor;
  animation:cannonBurst 1.55s cubic-bezier(.12,.7,.25,1) forwards
}
@keyframes cannonBurst{
  0%{transform:translate(0,0) rotate(0);opacity:1}
  72%{opacity:1}
  100%{transform:translate(var(--cx),var(--cy)) rotate(900deg);opacity:0}
}
.firework{
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 10px currentColor;
  animation:firework 1.1s ease-out forwards
}
@keyframes firework{
  to{
    transform:translate(var(--fx),var(--fy)) scale(.2);
    opacity:0
  }
}

@media(max-width:390px){
  body{padding:5px}
  .screen{
    min-height:calc(100vh - 10px);
    padding:13px 10px;
    border-radius:20px
  }
  h1{font-size:29px}
  .jackpot-box{margin-top:10px}
  .rung{min-height:37px}
  .rung strong{font-size:14.5px}
  .decision{padding-top:10px}
  .decision-amount{font-size:44px}
  .actions{grid-template-columns:1fr 1.2fr}
  .btn{font-size:11.5px;min-height:47px}
  .result-kicker{font-size:29px}
  .intact-ladder{height:212px}
  .broken-ladder{height:235px}
}