*{box-sizing:border-box}html,body{margin:0;background:#061f1a;color:#f3ebdd;font-family:Impact,'Arial Narrow',Arial,sans-serif;overscroll-behavior:none;height:100%;user-select:none;-webkit-user-select:none}body{display:flex;justify-content:center}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none}button:focus-visible{outline:3px solid #ffcc35;outline-offset:3px}#app{width:100%;max-width:500px;height:100dvh;display:flex;flex-direction:column;position:relative;background:#0a332b;padding-top:env(safe-area-inset-top);overflow:hidden;box-shadow:0 0 80px #0008}header{position:relative;text-align:center;padding:9px 48px 7px}.brand{font:800 11px Arial,sans-serif;letter-spacing:3px}.title{font-size:clamp(24px,7vw,36px);letter-spacing:-1px;text-shadow:2px 3px #000}.title span{color:#ffcc35}#pause{position:absolute;right:12px;top:15px;border:2px solid #f3ebdd;border-radius:50%;width:34px;height:34px;background:transparent;color:#f3ebdd;font:900 20px Arial}.hud{margin:0 12px 7px;padding:7px 14px;display:flex;align-items:center;justify-content:space-between;border:2px solid #558570;border-radius:17px;background:#062a23;flex-shrink:0}.hud small{font:800 10px Arial,sans-serif;letter-spacing:1px}.hud strong{display:block;color:#ffcc35;font-size:34px;line-height:1}.dots{color:#ffcc35;font:22px Arial}.dots i{font-style:normal;color:#b9cdbd}.max{font-size:15px;color:#91b3a0;border-left:1px solid #47715c;padding-left:10px}#stage{position:relative;flex:1;min-height:160px;overflow:hidden;border-block:3px solid #031d17}canvas{width:100%;height:100%;display:block;touch-action:none}.stage-label{position:absolute;top:10px;left:12px;font:700 9px Arial;letter-spacing:1px;color:#c9d4b9;background:#06261ed9;padding:7px 9px;border-radius:4px}.stage-label b{color:#ffcc35;margin-left:8px}.height{position:absolute;right:7px;top:16px;bottom:16px;width:4px;background:#011b14;border-radius:4px;display:flex;align-items:flex-end}.height span{width:100%;background:#ffcc35;border-radius:4px}#toast{position:absolute;top:46px;left:0;right:0;text-align:center;color:#ffcc35;font-size:19px;text-shadow:2px 2px #000;pointer-events:none}.controls{display:flex;gap:9px;align-items:center;justify-content:center;background:#f3ebdd;padding:10px 12px 7px;flex-shrink:0}.controls button{color:#f3ebdd;background:#0a332b;border:4px solid #051e19;border-radius:50%;width:66px;height:66px;font:900 28px Arial;box-shadow:inset 0 0 0 3px #33674c,0 3px #b7ab8b}.controls button.pressed{transform:translateY(3px);filter:brightness(1.4);box-shadow:inset 0 0 0 3px #33674c}.controls .climb{display:flex;flex-direction:column;gap:6px;margin-inline:4px}.controls .climb button{width:42px;height:35px;font-size:16px;border-width:3px}.controls .jump{background:#ff303b;box-shadow:inset 0 0 0 3px #ff6570,0 3px #b7ab8b;width:84px;height:78px;font:26px Impact,'Arial Narrow',sans-serif;margin-left:auto}footer{background:#f3ebdd;color:#355e4d;display:flex;justify-content:space-between;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));font:700 9px Arial;flex-shrink:0}.overlay{position:absolute;inset:0;background:#021f18bd;backdrop-filter:blur(5px);z-index:4;display:flex;align-items:center;justify-content:center;padding:20px}.overlay[hidden]{display:none}.card{width:100%;max-height:100%;overflow:auto;background:#f3ebdd;color:#0a332b;padding:28px 25px;border:3px solid #ffcc35;border-radius:20px;box-shadow:0 15px 50px #0006}.eyebrow{font:800 10px Arial;letter-spacing:1.4px}h1{font-size:clamp(40px,13vw,64px);line-height:.98;margin:18px 0;letter-spacing:-1px}h1 em{font-style:normal;color:#cf2631}.card p{font:16px/1.5 Arial;margin:12px 0}.card p.muted{font-size:12px;color:#4e6858}.primary,.secondary{width:100%;border:0;border-radius:9px;padding:16px 12px;margin-top:12px;background:#0a332b;color:#f3ebdd;font:800 15px Arial}.secondary{background:transparent;color:#0a332b;border:2px solid #0a332b}.card-foot{text-align:center;margin-top:17px;font:11px Arial;color:#617866}@media(max-height:650px){header{padding-block:5px}.brand{font-size:9px}.title{font-size:25px}.hud{padding-block:4px}.hud strong{font-size:26px}.controls{padding-block:5px}.controls button{width:54px;height:54px}.controls .jump{height:65px;width:73px}.controls .climb button{height:29px}footer{padding-top:5px}.card{padding:18px}h1{font-size:40px;margin:12px 0}.card p{font-size:13px}}

.dots .current{color:#ff3944}.dots .done{color:#ffcc35}.dots .upcoming{color:#b9cdbd}

#sound{position:absolute;left:10px;top:13px;width:30px;height:30px;border:1px solid #91b3a0;border-radius:50%;background:transparent;color:#f3ebdd;font:18px Arial}.plays-count{font:9px Arial;letter-spacing:.04em;color:#b9cdbd;margin-top:3px}.claim-form label,.claim-code{display:block;font:700 13px Arial;margin-top:12px}.claim-form input,.claim-form select,.claim-code input{display:block;width:100%;padding:12px;margin-top:5px;border:1px solid #91a38d;border-radius:5px;font:16px Arial;user-select:text;-webkit-user-select:text;background:white;color:#0a332b}.claim-error{color:#a43a35!important;font-size:13px!important}.egg-party{position:absolute;inset:0;overflow:hidden;z-index:6;background:#082d23b5;pointer-events:none}.egg-party strong{position:absolute;left:0;right:0;top:26%;text-align:center;font-size:42px;color:#ffcc35;text-shadow:3px 3px #001b11}.egg-party i{position:absolute;top:-20px;width:8px;height:15px;animation:egg-confetti linear forwards}.egg-march{position:absolute;width:220px;bottom:18%;right:-230px;animation:egg-march 4.2s linear forwards;border-radius:18px}@keyframes egg-confetti{to{top:110%;transform:rotate(700deg) translateX(55px)}}@keyframes egg-march{to{right:105%}}@media(prefers-reduced-motion:reduce){.egg-party i{animation:none;top:50%}.egg-march{animation:none;right:calc(50% - 110px)}}
.website-link{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:12px;color:#0a332b;font:800 12px Arial;text-decoration:underline;text-underline-offset:4px}.website-link[hidden]{display:none}
