/* Vault extras — door, lock, receipt, drawer, log, stress, waterfall, your box. */

/* door on entry */
html.door-lock{overflow:hidden}
.door-intro{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#0B0D0F;perspective:1400px;cursor:pointer;transition:opacity .6s}
.door-intro.gone{opacity:0;pointer-events:none}
.door-svg{width:min(72vmin,520px);height:auto;transform-origin:left center;transition:transform .7s cubic-bezier(.6,0,.3,1);filter:drop-shadow(0 30px 60px #000)}
.door-intro.open .door-svg{transform:rotateY(-108deg)}
#doorWheel{transform-box:fill-box;transform-origin:center;transition:transform .75s cubic-bezier(.5,0,.3,1)}
.door-intro.spin #doorWheel{transform:rotate(270deg)}
.bolt{fill:#6B737A;transition:fill .25s}
.door-intro.unbolt .bolt{fill:#262B30}
.door-skip{font:600 12px var(--display);letter-spacing:.18em;text-transform:uppercase;color:#5E5A50}

/* combination lock */
.lock{display:flex;align-items:center;gap:6px;padding:12px;background:#0E1012;border:1px solid var(--rule);border-radius:8px;box-shadow:inset 0 2px 8px rgba(0,0,0,.6)}
.drum{display:grid;justify-items:center;gap:2px;outline:none;border-radius:6px}
.drum:focus-visible{box-shadow:0 0 0 2px var(--accent)}
.drum button{width:100%;height:16px;border:0;background:transparent;cursor:pointer;position:relative}
.drum button::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-left:6px solid transparent;border-right:6px solid transparent}
.drum-up::before{border-bottom:7px solid var(--muted)}
.drum-dn::before{border-top:7px solid var(--muted)}
.drum button:hover::before{border-bottom-color:var(--accent);border-top-color:var(--accent)}
.drum-win{width:44px;height:56px;overflow:hidden;border-radius:6px;cursor:ns-resize;touch-action:none;
  background:linear-gradient(#0000,#0000),linear-gradient(180deg,#C9A75A,#E9CF8A 45%,#B28F45);box-shadow:inset 0 6px 8px rgba(0,0,0,.45),inset 0 -6px 8px rgba(0,0,0,.45),0 0 0 1px #6E5A2C}
.drum-col{height:1000%;transition:transform .28s cubic-bezier(.3,.7,.2,1)}
.drum-col span{display:flex;align-items:center;justify-content:center;height:10%;font:800 34px var(--display);color:#1A1508}
.lock-dot{font:800 34px var(--display);color:var(--accent);align-self:center;margin-inline:-2px}
.lock-unit{font:800 18px var(--display);letter-spacing:.1em;color:var(--accent);margin-left:6px}

/* receipt */
.rcpt-box{width:min(560px,100%)}
.rcpt-slot{position:relative;overflow:hidden;border-top:6px solid #0B0D0F;border-radius:4px;box-shadow:inset 0 8px 10px -6px #000}
.rcpt-slot img{display:block;width:100%;height:auto}
.rcpt-slot img.printing{animation:printOut 1.4s cubic-bezier(.3,.6,.2,1)}
@keyframes printOut{0%{transform:translateY(-100%)}70%{transform:translateY(2%)}100%{transform:none}}

/* coin drawer becomes a pull-out deposit drawer */
.drawer{left:50%;top:50%;right:auto;bottom:auto;width:min(620px,calc(100% - 32px));max-height:min(88vh,860px);border:1px solid var(--brass-2);border-radius:10px;transform:translate(-50%,-50%) scale(.97);opacity:0;transition:opacity .22s,transform .3s cubic-bezier(.2,.8,.2,1);box-shadow:0 40px 90px #000;padding:14px 24px 24px}
.drawer.open{transform:translate(-50%,-50%);opacity:1}
.drawer::before{content:"";justify-self:center;width:84px;height:8px;border-radius:4px;background:linear-gradient(180deg,#E6C984,#A88B45);box-shadow:0 2px 0 #0008}
.scrim{background:rgba(5,6,7,.7)}

/* your box */
.yourbox{margin-top:16px;padding-top:14px;border-top:1px solid var(--rule);display:grid;gap:8px}
.yb-row{display:flex;gap:8px}
.yb-row .inrow{flex:1}
.yb-out{margin:0;font-size:14px;color:#C9C3B4;line-height:1.6}
.yb-out b{color:var(--accent)}
.yb-out .pill{margin-left:6px}
.box.mine{box-shadow:0 0 0 2px var(--accent),0 0 22px rgba(216,184,106,.35)}
.box.mine .door::after{content:"Yours";position:absolute;right:6px;bottom:22px;font:700 10px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent);padding:1px 5px;border-radius:2px}

/* vault log */
.vlog{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule)}
.vlog-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.vlog ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.vlog li{display:grid;grid-template-columns:64px 18px minmax(0,1fr);gap:8px;align-items:center;font-size:13px;color:#C9C3B4;padding:4px 0;animation:logIn .5s cubic-bezier(.2,.8,.2,1)}
.vlog li:first-child{color:var(--ink)}
.vlog time{font:500 11px var(--mono);color:var(--muted)}
.vl-dot{background:var(--brass-2)}
@keyframes logIn{from{transform:translateY(-6px);opacity:.2}}

/* stress test */
.stress{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:28px;margin-top:24px;align-items:start}
.stress label b{color:var(--ink);font-weight:700;margin-left:6px}
.st-out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-bottom:16px}
.st-out>div{display:grid;gap:4px;padding:14px 14px 14px 0}
.st-out>div+div{padding-left:14px;border-left:1px solid var(--rule)}
.st-out b{font:800 36px var(--display);letter-spacing:.02em}
#stChart text{font-family:var(--body)}

/* contribution waterfall */
.carried{margin-top:40px}
.carried-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.carried .note{margin:8px 0 6px}
#carChart{height:260px}
#carChart text{font-family:var(--body)}

@media (max-width:900px){
  .stress{grid-template-columns:1fr}
  .st-out b{font-size:26px}
  .drum-win{width:38px;height:50px}
  .drum-col span,.lock-dot{font-size:28px}
}
@media (prefers-reduced-motion:reduce){
  .rcpt-slot img.printing,.vlog li{animation:none}
  .drum-col,.drawer{transition:none}
}

/* mobile: single columns must be allowed to shrink below their content width */
@media (max-width:900px){ .desk,.two,.arb,.builder,.stress,.route-grid,.wallet-bar,.hero{grid-template-columns:minmax(0,1fr)} .two>*,.desk>*,.arb>*,.builder>*,.stress>*,.route-grid>*,.hero>*{min-width:0} }