.vinyl-reward-screen{box-sizing:border-box;width:100%;min-height:100svh;max-height:100svh;padding:clamp(34px,7svh,66px) 22px max(20px,env(safe-area-inset-bottom));text-align:center;background:var(--signal-soft);flex-direction:column;justify-content:flex-start;align-items:center;display:flex;overflow:hidden}.vinyl-reward-copy{margin-top:clamp(16px,5svh,44px)}.vinyl-reward-copy .eyebrow{color:var(--signal);letter-spacing:1.5px;margin:0 0 8px;font-size:9px;font-weight:850}.vinyl-reward-copy h1{color:var(--ink);letter-spacing:-.8px;margin:0;font-size:30px;line-height:1.05}.vinyl-crate-button{cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;width:280px;height:300px;margin:clamp(22px,5svh,48px) auto 4px;padding:0;position:relative}.vinyl-crate-button:focus-visible{outline:3px solid var(--signal);outline-offset:5px;border-radius:28px}.vinyl-crate-button:disabled{cursor:default}.vinyl-crate-art{transform-origin:50% 78%;width:100%;height:100%;overflow:visible}.crate-back{fill:var(--signal-strong)}.crate-inner{fill:#382071}.crate-record{transform-box:fill-box;transform-origin:50%;transition:transform .42s cubic-bezier(.2,.85,.3,1.12);transform:translateY(52px)}.crate-record>circle:first-child{fill:#292631}.record-two>circle:first-child{fill:#7250d8}.record-three>circle:first-child{fill:#896be6}.record-four>circle:first-child{fill:#5a35c2}.record-ring{fill:none;stroke:#b9a6ef;stroke-width:4px}.record-label{fill:#a98ff0}.record-hole{fill:var(--paper)}.crate-front>path:first-child{fill:var(--signal)}.crate-panel{fill:#714add}.crate-brace{fill:#8b6bea}.crate-badge{fill:var(--signal-soft)}.crate-badge-core{fill:#fff}.crate-tap-marks circle{fill:#a892df;transform-box:fill-box;transform-origin:50%;transition:fill .16s,transform .16s}.tap-1 .crate-tap-marks circle:first-child,.tap-2 .crate-tap-marks circle:nth-child(-n+2),.is-open .crate-tap-marks circle{fill:#fff;transform:scale(1.25)}.crate-burst path{fill:none;stroke:#a58ce9;stroke-width:7px;stroke-linecap:round;opacity:0;transform-origin:140px 150px}.tap-1 .vinyl-crate-art{animation:.3s cubic-bezier(.2,.8,.3,1.2) crate-tap-one}.tap-2 .vinyl-crate-art{animation:.34s cubic-bezier(.2,.8,.3,1.2) crate-tap-two}.is-open .vinyl-crate-art{animation:.55s cubic-bezier(.18,.9,.28,1.2) both crate-open}.tap-1 .crate-records{animation:.3s ease-out records-nudge-one}.tap-2 .crate-records{animation:.34s ease-out records-nudge-two}.tap-1 .record-one{transform:translate(-1px,39px)rotate(-2deg)}.tap-1 .record-two{transform:translateY(37px)rotate(-1deg)}.tap-1 .record-three{transform:translateY(37px)rotate(1deg)}.tap-1 .record-four{transform:translate(1px,39px)rotate(2deg)}.tap-2 .record-one{transform:translate(-3px,23px)rotate(-5deg)}.tap-2 .record-two{transform:translate(-1px,19px)rotate(-2deg)}.tap-2 .record-three{transform:translate(1px,18px)rotate(3deg)}.tap-2 .record-four{transform:translate(3px,23px)rotate(5deg)}.is-open .record-one{transform:translate(-3px,-43px)rotate(-17deg)}.is-open .record-two{transform:translate(-1px,-57px)rotate(-7deg)}.is-open .record-three{transform:translate(1px,-59px)rotate(8deg)}.is-open .record-four{transform:translate(3px,-42px)rotate(18deg)}.is-open .crate-burst path{animation:.65s ease-out 80ms both vinyl-ray}.vinyl-tap-copy{color:var(--signal-strong);margin:0 0 13px;font-size:14px;font-weight:800}.vinyl-tap-progress{gap:7px;display:flex}.vinyl-tap-progress i{background:#c9bce9;border-radius:99px;width:22px;height:6px;transition:background .2s,transform .2s}.vinyl-tap-progress i.filled{background:var(--signal);transform:scaleX(1.08)}.vinyl-reward-result{color:var(--signal-strong);grid-template-columns:27px auto;justify-content:center;align-items:center;gap:2px 8px;animation:.42s cubic-bezier(.2,.9,.3,1.2) .24s both vinyl-result-in;display:grid}.vinyl-reward-result span{grid-row:1/3;width:27px;height:27px}.vinyl-reward-result svg{width:100%;height:100%}.vinyl-reward-result strong{font-size:27px;line-height:1}.vinyl-reward-result small{letter-spacing:1px;grid-column:2;font-size:9px;font-weight:850}.vinyl-reward-continue{width:100%;margin-top:auto;box-shadow:none!important}.chapter-mini-crate-reward .vinyl-crate-button{width:245px;height:270px}.chapter-final-crate-reward{background:#e8e0ff}.chapter-final-crate-reward .vinyl-reward-copy h1{font-size:34px}.chapter-final-crate-reward .vinyl-crate-button{width:min(320px,82vw);height:335px;margin-top:clamp(14px,3svh,30px)}.chapter-final-crate-reward .vinyl-crate-art{filter:drop-shadow(0 10px #4b279d)}.chapter-final-crate-reward .crate-burst path{stroke-width:9px}@keyframes crate-tap-one{35%{transform:translateY(5px)scaleX(1.035)scaleY(.95)rotate(-1.5deg)}72%{transform:translateY(-2px)scaleX(.985)scaleY(1.025)}}@keyframes crate-tap-two{28%{transform:translateY(7px)scaleX(1.05)scaleY(.935)rotate(1.8deg)}62%{transform:translateY(-4px)scaleX(.98)scaleY(1.035)rotate(-1deg)}}@keyframes records-nudge-one{42%{transform:translateY(-5px)rotate(1.5deg)}}@keyframes records-nudge-two{38%{transform:translateY(-9px)rotate(-2deg)}72%{transform:translateY(2px)}}@keyframes crate-open{0%{transform:translateY(0)}28%{transform:translateY(11px)scaleX(1.075)scaleY(.91)}56%{transform:translateY(-7px)scaleX(.97)scaleY(1.055)}to{transform:translateY(5px)scale(1.025)}}@keyframes vinyl-ray{0%{opacity:0;transform:scale(.3)}30%{opacity:1}to{opacity:0;transform:scale(1.35)}}@keyframes vinyl-result-in{0%{opacity:0;transform:translateY(12px)scale(.82)}}@media (max-height:650px){.vinyl-reward-screen{padding-top:22px}.vinyl-reward-copy{margin-top:0}.vinyl-crate-button{width:215px;height:245px;margin:17px auto 3px;transform:scale(.9)}.vinyl-reward-result{margin-top:-8px}}@media (prefers-reduced-motion:reduce){.tap-1 .vinyl-crate-art,.tap-2 .vinyl-crate-art,.tap-1 .crate-records,.tap-2 .crate-records,.is-open .vinyl-crate-art,.is-open .crate-burst path,.vinyl-reward-result{animation:none}}