@font-face{font-family:ValvePulp;src:url('/assets/valvepulp-bold.ttf') format('truetype');font-display:swap}
@font-face{font-family:ValveOracle;src:url('/assets/valveoracle-medium.ttf') format('truetype');font-display:swap}
:root{color-scheme:dark;--bg:#12262a;--text:#f1e8d5;--gold:#e3bd75;--muted:#b0bfb8;--green:#c8e7a6;--red:#f2a08e}
*{box-sizing:border-box}
html,body{margin:0;min-width:260px;min-height:100%;background:var(--bg);color:var(--text);font-family:ValveOracle,Georgia,serif}
#background{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
main{position:relative;z-index:1;width:100%;max-width:800px;margin:0 auto;padding:28px 20px calc(24px + env(safe-area-inset-bottom))}
.game{position:relative;padding:24px;border:1px solid #e7e6d52b;border-radius:18px;background:#0b1b1ed4;box-shadow:0 22px 80px #0006;isolation:isolate}
.game::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4}
.stats{display:flex;gap:12px}.stats>div{flex:1;padding:10px 14px;border:1px solid #e5dcc61c;border-radius:9px;background:#07141655}
.stats span,.meter>span{display:block;font:11px/1.4 system-ui,sans-serif;color:var(--muted)}.stats strong{display:block;margin-top:4px;color:var(--gold);font:22px/1.1 ValvePulp,Georgia,serif;font-variant-numeric:tabular-nums}
.meter{text-align:right;margin-top:20px;padding-right:8px}
#multiplier{font-family:ValvePulp,Georgia,serif;font-weight:bold;font-size:clamp(54px,13vw,86px);line-height:1.08;font-variant-numeric:tabular-nums;transform-origin:right center}
.stage{position:relative;height:330px;overflow:visible}
#motion{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#chart{position:absolute;left:48%;top:8px;width:52%;height:calc(91.5% - 8px);z-index:1}
#actor{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:visible}
#model{position:absolute;inset:0;width:100%;height:100%}
.floor{position:absolute;bottom:8.5%;left:0;right:0;height:1px;background:#e5dcc62b;pointer-events:none}
#stop{display:block;width:100%;min-height:58px;margin-top:12px;border:1px solid #ffe4ab55;border-radius:9px;background:var(--gold);color:#211e16;font-family:ValveOracle,Georgia,serif;font-size:22px;font-weight:bold;letter-spacing:1px;cursor:pointer;touch-action:manipulation;box-shadow:0 4px 0 #897346}
#stop:disabled{background:#33463f;color:#b6c5b7;cursor:default;border-color:#ffffff12;box-shadow:0 4px 0 #1d3029}
#stop:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 #897346}
#toast{position:absolute;left:6%;right:6%;top:10px;z-index:3;text-align:center;font:13px/1.5 system-ui,sans-serif;overflow-wrap:anywhere;pointer-events:none}
#toast.notice{padding:9px 14px;border:1px solid #b6d6a044;border-radius:24px;background:#1d3832f2;color:var(--text)}
#toast.outcome{padding:5px 10px;text-shadow:0 2px 20px #000c;animation:resultArrive .45s ease-out both}
.outcome strong{display:block;font:32px/1.15 ValvePulp,Georgia,serif;letter-spacing:1px;margin-bottom:5px}.outcome span{color:var(--text)}
.hint{margin:17px 0 5px;text-align:center;color:var(--text);font:13px/1.45 system-ui,sans-serif}.subhint{margin:0;text-align:center;font:10px/1.5 system-ui,sans-serif;color:var(--muted)}
.won{border-color:#c8e7a66b;box-shadow:0 22px 80px #0006,0 0 35px #b5d88519}.won::after{animation:winGlow 1.1s ease-out both}
.won #multiplier{color:var(--green);text-shadow:0 0 24px #b5dd7c55;animation:catchNumber .6s ease-out both}.won .outcome strong,.won #last{color:var(--green)}
.won #stop:disabled{background:#3c5941;border-color:#c8e7a644;color:#d5eac4;box-shadow:0 4px 0 #233c27}
.crashed{border-color:#e38b7966;animation:lossImpact .42s ease-out both}.crashed::after{animation:lossGlow 1s ease-out both}
.crashed #multiplier{color:var(--red);text-shadow:0 0 22px #ee735d44;animation:lostNumber .45s ease-out both}.crashed .outcome strong{color:var(--red)}
.crashed #stop:disabled{background:#543a3b;border-color:#ed927e33;color:#e6c3bc;box-shadow:0 4px 0 #34272c}
@keyframes winGlow{0%{box-shadow:inset 0 0 65px #d5eca85c}100%{box-shadow:inset 0 0 25px #c8e7a600}}
@keyframes lossGlow{0%{box-shadow:inset 0 0 85px #d7706866}100%{box-shadow:inset 0 0 35px #8b46511c}}
@keyframes lossImpact{0%,100%{transform:translateX(0)}20%{transform:translateX(-3px)}42%{transform:translateX(3px)}65%{transform:translateX(-2px)}82%{transform:translateX(1px)}}
@keyframes catchNumber{0%{transform:scale(1)}28%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes lostNumber{0%{transform:translateY(-3px)}45%{transform:translateY(3px)}100%{transform:translateY(0)}}
@keyframes resultArrive{0%{opacity:0;transform:translateY(8px) scale(.96)}100%{opacity:1;transform:translateY(0) scale(1)}}
[hidden]{display:none!important}
@media(max-width:480px){main{padding:14px 10px calc(16px + env(safe-area-inset-bottom))}.game{padding:17px 13px;border-radius:14px}.stage{height:260px}.meter{margin-top:16px}.stats>div{padding:9px 11px}.stats strong{font-size:20px}.outcome strong{font-size:27px}.outcome span{font-size:12px}}
@media(max-width:330px){.game{padding:14px 10px}.stats{gap:8px}.stats span{font-size:10px}.stage{height:230px}#multiplier{font-size:52px}.hint{font-size:12px}.subhint{font-size:9px}.outcome strong{font-size:24px}}
@media(prefers-reduced-motion:reduce){.game,.game::after,#multiplier,#toast.outcome{animation:none!important}}