/* THE VAULT — full-bleed vault door. Red (#FB0D1B) + off-white (#FFF4EC) only. */
:root{
  --red:#FB0D1B; --red-deep:#9c0a12; --red-dark:#5e0a0e;
  --cream:#FFF4EC; --ink:#160506; --steel:#2a1416;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#160506;color:var(--cream);
  font-family:'Trebuchet MS',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
#root{min-height:100dvh;position:relative;overflow:hidden}

/* ---------- THE DOOR (fills the viewport) ---------- */
.door{position:fixed;inset:0;z-index:1;overflow:hidden;
  background:
    radial-gradient(135% 100% at 50% 38%, #c8121b 0%, #9e0e16 40%, #6a0b10 70%, #420709 100%);}
/* brushed circular machining + fine scratches over the whole door */
.door::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-conic-gradient(from 0deg at 50% 40%, rgba(255,244,236,.045) 0deg .6deg, transparent .6deg 2.2deg),
    repeating-linear-gradient(115deg, rgba(255,244,236,.035) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(64deg, rgba(0,0,0,.05) 0 1px, transparent 1px 9px);
  mix-blend-mode:overlay;opacity:.6}
/* scattered subtle scratches + a vignette for depth */
.door::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(78deg, transparent 0 12%, rgba(255,244,236,.06) 12.3%, transparent 12.6% 100%),
    linear-gradient(72deg, transparent 0 34%, rgba(255,244,236,.05) 34.2%, transparent 34.4% 100%),
    linear-gradient(83deg, transparent 0 61%, rgba(0,0,0,.06) 61.2%, transparent 61.4% 100%),
    linear-gradient(69deg, transparent 0 78%, rgba(255,244,236,.045) 78.2%, transparent 78.4% 100%),
    radial-gradient(120% 100% at 50% 42%, transparent 55%, rgba(0,0,0,.5) 100%);}
/* concentric machined ring embossed around the central dial-plate */
.door-plate{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);z-index:2;pointer-events:none;
  width:min(78vw,560px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 42%, rgba(255,244,236,.06), transparent 60%);
  box-shadow:
    0 0 0 2px rgba(0,0,0,.25), 0 0 0 14px rgba(255,244,236,.04),
    0 0 0 16px rgba(0,0,0,.3), inset 0 0 60px rgba(0,0,0,.35);}
/* heavy riveted frame */
.door-frame{position:fixed;inset:0;z-index:3;pointer-events:none;
  border:18px solid #3a0608;
  box-shadow:
    inset 0 0 0 2px rgba(255,244,236,.1),
    inset 0 0 0 20px rgba(255,244,236,.03),
    inset 0 0 0 22px rgba(0,0,0,.4),
    inset 0 0 160px rgba(0,0,0,.6);}
.rivets{position:fixed;inset:0;z-index:4;pointer-events:none}
.rivet{position:absolute;width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 35% 28%, #fff1e8, #c79a8e 38%, #5e0a0e 78%);
  box-shadow:0 1px 3px rgba(0,0,0,.7), inset 0 -1px 2px rgba(0,0,0,.4)}

/* heavy locking bolts at the door edges (retract on win) */
.bolts{position:fixed;inset:0;z-index:4;pointer-events:none}
.bolt{position:absolute;border-radius:5px;
  background:linear-gradient(180deg,#fff1e8,#cdb4a9 45%,#8a6f64);
  box-shadow:0 3px 8px rgba(0,0,0,.6), inset 0 1px 1px rgba(255,255,255,.5);transition:transform .9s cubic-bezier(.6,.02,.2,1)}
.bolt.h{width:110px;height:20px}
.bolt.v{width:20px;height:110px}
.bolts.retracted .bolt.l{transform:translateX(-120px)}
.bolts.retracted .bolt.r{transform:translateX(120px)}
.bolts.retracted .bolt.t{transform:translateY(-120px)}
.bolts.retracted .bolt.b{transform:translateY(120px)}

/* seam light leak (tension/rumble) */
.seam-leak{position:fixed;top:0;bottom:0;left:calc(50% - 2px);width:4px;z-index:5;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,244,236,.9),transparent);opacity:0;transition:opacity .4s}
.win-stage.stage-2 .seam-leak{opacity:.85;animation:leakflicker .12s infinite alternate}
@keyframes leakflicker{from{filter:brightness(1)}to{filter:brightness(1.6)}}

/* white burst flash on door opening */
.burst-flash{position:fixed;inset:0;z-index:8;pointer-events:none;background:#FFF4EC;opacity:0}
.win-stage.stage-3 .burst-flash{animation:flash 1.1s ease-out forwards}
@keyframes flash{0%{opacity:0}12%{opacity:.95}100%{opacity:0}}

/* rumble shake during tension/bolts */
.win-stage.stage-1 .door,.win-stage.stage-1 .door-frame,.win-stage.stage-2 .door,.win-stage.stage-2 .door-frame,
.win-stage.stage-1 .content,.win-stage.stage-2 .content{animation:rumble .09s linear infinite}
@keyframes rumble{0%{transform:translate(0,0)}25%{transform:translate(-2px,1px)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,2px)}100%{transform:translate(1px,-2px)}}
/* darken during tension */
.win-stage.stage-1::after,.win-stage.stage-2::after{content:"";position:fixed;inset:0;z-index:6;background:rgba(0,0,0,.45);pointer-events:none;animation:heartbeat 1.1s ease-in-out infinite}
@keyframes heartbeat{0%,100%{opacity:.55}50%{opacity:.2}}

/* the two door leaves that split open on WIN. Hidden until the win sequence,
   so normal states show ONE solid safe door (no permanent centre seam). */
.leaf{position:fixed;top:0;bottom:0;width:50%;z-index:6;display:none;
  background:radial-gradient(120% 90% at 100% 40%, #c41019, #6e0b10 70%, #3a0608);
  transition:transform 1.6s cubic-bezier(.7,.02,.2,1);will-change:transform}
.win-stage .leaf{display:block}
.leaf.left{left:0;border-right:3px solid #3a0608;transform-origin:left center}
.leaf.right{right:0;border-left:3px solid #3a0608;background:radial-gradient(120% 90% at 0% 40%, #c41019, #6e0b10 70%, #3a0608);transform-origin:right center}
.opening .leaf.left{transform:perspective(1600px) rotateY(-118deg)}
.opening .leaf.right{transform:perspective(1600px) rotateY(118deg)}
.leaf .leaf-rivets{position:absolute;inset:0}

/* the chamber revealed BEHIND the door (money room) */
.chamber{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:radial-gradient(70% 60% at 50% 45%, #3a0d10, #120304 80%);opacity:0;transform:scale(1.25);
  transition:opacity .5s .5s, transform 1.4s cubic-bezier(.2,.7,.2,1) .4s}
.opening .chamber{opacity:1;transform:scale(1)}
.chamber-light{position:absolute;inset:0;background:radial-gradient(50% 45% at 50% 42%, rgba(255,244,236,.28), transparent 70%);animation:cpulse 3s ease-in-out infinite}
@keyframes cpulse{50%{opacity:.6}}

/* ---------- CONTENT layer (on the door face) ---------- */
.content{position:relative;z-index:7;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;text-align:center;padding:48px 20px}

.kicker{letter-spacing:.36em;font-size:13px;color:var(--cream);font-weight:700;text-transform:uppercase;opacity:.92;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.headline{font-size:clamp(28px,6.2vw,58px);line-height:1.0;text-transform:uppercase;font-weight:800;color:var(--cream);text-shadow:0 2px 24px rgba(0,0,0,.55)}
.sub{opacity:.86;font-size:16px;max-width:36ch;color:var(--cream)}
.fine{opacity:.6;font-size:13px;color:var(--cream)}

/* engraved plate behind text/dial for legibility on the door */
.plate{background:rgba(20,4,5,.42);border:1px solid rgba(255,244,236,.12);border-radius:20px;
  backdrop-filter:blur(2px);padding:30px 26px;display:flex;flex-direction:column;align-items:center;gap:18px;
  box-shadow:inset 0 0 40px rgba(0,0,0,.4),0 20px 50px rgba(0,0,0,.4)}

/* Countdown */
.countdown{display:flex;align-items:center;gap:8px}
.cd-unit{background:rgba(20,4,5,.55);border:1px solid rgba(255,244,236,.22);border-radius:12px;padding:14px;min-width:72px}
.cd-num{font-size:clamp(26px,6vw,38px);font-weight:800;color:var(--cream);font-variant-numeric:tabular-nums;line-height:1}
.cd-lbl{font-size:10px;letter-spacing:.2em;color:var(--cream);opacity:.65;margin-top:5px}
.cd-sep{color:var(--cream);font-size:26px;font-weight:800;opacity:.4;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.12}}

.cta{margin-top:6px;background:var(--cream);color:var(--red-deep);text-decoration:none;padding:16px 38px;border-radius:999px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;box-shadow:0 12px 30px rgba(0,0,0,.4);transition:transform .15s;position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);animation:sheen 3.6s ease-in-out infinite}
@keyframes sheen{0%,60%{left:-60%}100%{left:140%}}
.cta:hover{transform:translateY(-2px)}
.cta:active{transform:scale(.98)}
.tc-link{color:var(--cream);opacity:.5;font-size:12px;text-decoration:underline;margin-top:8px}

/* Entry */
.entry,.attempt-area{width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center;gap:14px}
.entry h2{font-weight:700;font-size:20px;color:var(--cream)}
.entry input{width:min(360px,90%);padding:15px 16px;border-radius:12px;border:1px solid rgba(255,244,236,.25);background:rgba(20,4,5,.5);color:var(--cream);font-size:16px;text-align:center;outline:none}
.entry input::placeholder{color:rgba(255,244,236,.4)}
.entry input:focus{border-color:var(--cream)}
.unlock-btn,.again-btn{background:var(--cream);color:var(--red-deep);border:none;padding:15px 44px;border-radius:999px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;box-shadow:0 10px 26px rgba(0,0,0,.4);transition:transform .12s}
.unlock-btn.big{font-size:18px;padding:17px 56px}
.unlock-btn:active{transform:scale(.97)}
.unlock-btn:disabled{opacity:.5;cursor:not-allowed}
.again-btn{background:transparent;border:1.5px solid var(--cream);color:var(--cream);box-shadow:none;padding:11px 28px}
.attempts-left{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream);opacity:.85}
.attempts-left.none{color:#ffb3b3}

/* Mechanical dial */
.dial-block{display:flex;flex-direction:column;align-items:center;gap:14px}
.dial-canvas-wrap{width:min(80vw,340px)}
.dial-canvas{touch-action:none;cursor:grab;filter:drop-shadow(0 16px 34px rgba(0,0,0,.55))}
.dial-canvas:active{cursor:grabbing}
.dial-readout{display:flex;gap:12px}
.ro-digit{width:44px;height:58px;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:800;color:var(--cream);background:rgba(20,4,5,.6);border:1px solid rgba(255,244,236,.2);border-radius:10px;font-variant-numeric:tabular-nums;box-shadow:inset 0 0 16px rgba(0,0,0,.6);transition:border-color .2s,box-shadow .2s}
.ro-digit.act{border-color:var(--cream);box-shadow:inset 0 0 16px rgba(0,0,0,.6),0 0 14px rgba(255,244,236,.35)}
.dial-controls{display:flex;align-items:center;gap:14px}
.nudge{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,244,236,.25);background:rgba(20,4,5,.5);color:var(--cream);font-size:24px;cursor:pointer;line-height:1}
.nudge:disabled{opacity:.4}
.ring-pick{display:flex;gap:8px}
.ring-pick button{width:34px;height:34px;border-radius:8px;border:1px solid rgba(255,244,236,.25);background:transparent;color:rgba(255,244,236,.6);cursor:pointer;font-weight:700}
.ring-pick button.on{background:var(--cream);color:var(--red-deep);border-color:var(--cream)}
.dial-hint{font-size:12px;opacity:.5;color:var(--cream)}
.unlocking-label{font-size:16px;letter-spacing:.3em;color:var(--cream);text-transform:uppercase;animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}

/* Results */
.result{display:flex;flex-direction:column;align-items:center;gap:10px;animation:fadeUp .4s forwards}
.result h3{text-transform:uppercase;letter-spacing:.04em;font-size:26px;color:var(--cream)}
.r-miss{color:#ff9b9b}
.r-dup,.r-err{color:var(--cream)}
.view-wall{color:var(--cream);opacity:.7;text-decoration:underline;cursor:pointer;font-size:14px;margin-top:4px}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* Wall */
.wall{width:100%;max-width:520px;margin-top:14px;background:rgba(20,4,5,.55);border:1px solid rgba(255,244,236,.16);border-radius:14px;padding:16px}
.wall-head{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream);opacity:.85;margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:8px}
.wall-dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);animation:pulse 1.4s infinite}
.wall-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-height:240px;overflow:auto}
.wall-code{font-variant-numeric:tabular-nums;font-size:15px;padding:3px 8px;color:rgba(255,244,236,.5);position:relative}
.wall-code::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--red);transform:rotate(-8deg) scaleX(0);transform-origin:left;animation:strikeline .4s .1s forwards}
@keyframes strikeline{to{transform:rotate(-8deg) scaleX(1)}}

/* Turnstile: hidden off-screen by default (managed mode works silently);
   only pulled on-screen if a manual challenge is genuinely required. */
.ts-wrap{position:fixed;left:-9999px;top:-9999px;display:flex;justify-content:center}
.ts-wrap.needs{position:static;left:auto;top:auto;margin:10px auto 0;min-height:70px}
.ts-hint{font-size:12px;color:var(--cream);opacity:.7;margin-top:6px}
.closed-note{opacity:.75;margin-top:14px;color:var(--cream)}

/* ---------- WIN reveal (staged) ---------- */
.tension-plate{align-items:center}
.tension-code{font-size:clamp(34px,9vw,64px);font-weight:800;letter-spacing:.2em;color:var(--cream);font-variant-numeric:tabular-nums;text-shadow:0 0 24px rgba(255,244,236,.4);padding-left:.2em}
.reveal{display:flex;flex-direction:column;align-items:center;gap:14px;z-index:7;padding:0 20px;max-width:560px;text-align:center}
.rv-kicker{letter-spacing:.34em;color:var(--cream);font-weight:700;text-transform:uppercase;font-size:14px;opacity:0;animation:rvIn .6s .2s forwards}
.rv-cash{display:flex;flex-direction:column;align-items:center;gap:2px;opacity:0;transform:scale(.6);animation:cashPop .9s .15s cubic-bezier(.2,.9,.2,1) forwards}
.rv-cash-label{font-size:14px;letter-spacing:.28em;color:var(--cream);opacity:.85;text-transform:uppercase}
.cash-amount{font-size:clamp(46px,13vw,120px);font-weight:800;color:var(--cream);line-height:1;text-shadow:0 0 40px rgba(255,244,236,.55),0 4px 14px rgba(0,0,0,.6);font-variant-numeric:tabular-nums}
.rv-aud{font-size:13px;letter-spacing:.34em;color:var(--cream);opacity:.7;text-transform:uppercase}
.rv-code{font-size:16px;letter-spacing:.1em;color:var(--cream);opacity:0;animation:rvIn .6s .5s forwards}
.rv-code b{color:var(--red);font-size:22px;letter-spacing:.18em;text-shadow:0 0 18px rgba(251,13,27,.6)}
.rv-winner{font-size:20px;color:var(--cream);font-weight:700;opacity:0;animation:rvIn .6s .7s forwards}
.rv-next{margin-top:10px;background:rgba(20,4,5,.5);border:1px solid rgba(255,244,236,.16);border-radius:16px;padding:20px 22px;opacity:0;transform:translateY(16px);text-align:left;width:100%}
.stage-5 .rv-next{animation:nextIn .7s .2s forwards}
.rv-next-title{font-size:12px;letter-spacing:.24em;color:var(--cream);opacity:.8;text-transform:uppercase;text-align:center;margin-bottom:12px}
.rv-steps{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0 0 16px}
.rv-steps li{display:flex;align-items:flex-start;gap:12px;color:var(--cream);font-size:15px;line-height:1.35}
.rv-n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--red);color:var(--cream);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.rv-next .cta{display:block;text-align:center;margin:0 auto;max-width:240px}
@keyframes rvIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes cashPop{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes nextIn{to{opacity:1;transform:translateY(0)}}
.stage-3 .reveal{visibility:hidden}

/* Confetti / falling cash (red + cream) */
.cine-confetti{position:fixed;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.conf{position:absolute;top:-30px;width:10px;height:14px;border-radius:2px;opacity:.95;
  animation-name:fall;animation-timing-function:linear;animation-iteration-count:1;
  transform:translateY(0) rotate(0)}
.conf-red{background:var(--red)}
.conf-cream{background:var(--cream)}
.conf-cash{background:transparent;color:var(--cream);font-weight:800;font-size:20px;width:auto;height:auto;text-shadow:0 1px 4px rgba(0,0,0,.5)}
@keyframes fall{to{transform:translateY(110vh) translateX(var(--drift)) rotate(var(--rot));opacity:.4}}

@media (max-width:480px){
  .ro-digit{width:40px;height:54px;font-size:28px}
  .cd-unit{min-width:60px;padding:12px 8px}
  .plate{padding:22px 16px}
}