.supply-cinematic{position:fixed;inset:0;z-index:145;isolation:isolate;display:grid;grid-template-rows:minmax(150px,1fr) auto;justify-items:center;align-items:center;padding:max(16px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom));overflow:auto;color:#f0f5f4;background:#060e18b8;overscroll-behavior:contain;font-family:inherit}
.item-scene{position:relative;width:min(68vw,270px);height:min(36vh,270px);min-height:150px;display:grid;place-items:center;pointer-events:none;color:var(--item-color)}
.item-object{width:180px;height:180px;z-index:2;filter:drop-shadow(0 14px 24px #0008);transform-origin:50% 70%}
.item-glyph{display:block;width:100%;height:100%;overflow:visible}
.item-aura{position:absolute;width:190px;height:190px;max-width:100%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--item-color) 24%,transparent),transparent 70%);animation:item-aura calc(1700ms / var(--item-rate)) both}
.item-orbit{position:absolute;width:190px;height:190px;border:1px solid color-mix(in srgb,var(--item-color) 45%,transparent);border-radius:50%;animation:item-orbit calc(1600ms / var(--item-rate)) both}
.item-particles{position:absolute;inset:50%;z-index:3}
.item-particles i{position:absolute;display:block;width:6px;height:12px;background:var(--item-color);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);transform:rotate(var(--angle));animation:item-spark calc(1400ms / var(--item-rate)) calc(var(--i) * 17ms / var(--item-rate)) both}
.item-specific{position:absolute;inset:0;display:grid;place-items:center;z-index:4}
.item-receipt{position:relative;z-index:5;width:min(100%,460px);padding:20px 22px;border:1px solid color-mix(in srgb,var(--item-color) 45%,transparent);border-radius:22px;background:#101e2af5;box-shadow:0 16px 70px #0008;text-align:center;animation:item-receipt calc(420ms / var(--item-rate)) both}
.item-kicker{margin:0 0 8px;font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--item-color)}
.item-receipt h2{margin:0;font-size:clamp(23px,6vw,34px);line-height:1.1;letter-spacing:-.7px}
.item-recipient{margin:8px 0 0;font-size:14px;font-weight:700}.item-detail,.item-frozen-names{margin:8px 0;color:#bfcdd5;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.item-metrics{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:14px 0}.item-metrics>span{display:grid;gap:4px;min-width:100px;padding:9px 14px;background:#ffffff07;border-radius:10px;color:#bfcdd5;font-size:11px}.item-metrics strong{font-size:20px;color:#fff}.item-metrics i{font-style:normal;color:var(--item-color);padding:0 6px}
.item-continue{min-height:44px;min-width:160px;padding:10px 18px;border:1px solid #ffffff26;border-radius:12px;background:#263945;color:#e8f3f2;font:inherit;font-size:13px;font-weight:700;cursor:pointer}.item-continue span{color:var(--item-color);padding-left:12px}.item-continue:focus-visible{outline:3px solid var(--item-color);outline-offset:3px}
.item-consumed{margin:10px 0;color:#9caeb8;font-size:11px;line-height:1.4}
.supply-cinematic.is-settled .item-target{opacity:0;transition:opacity .2s}
.supply-cinematic .item-receipt{box-sizing:border-box;min-width:0}
.supply-cinematic .item-continue{position:sticky;bottom:0;max-width:100%;background:#263945;box-shadow:0 0 0 5px #101e2a}
.item-target{position:fixed;z-index:4;width:var(--target-width);min-height:48px;display:grid;place-items:center;transform:translate(-50%,-50%);border:2px solid var(--item-color);border-radius:18px;color:var(--item-color);background:#0b172de0;font-size:14px;font-weight:900;box-shadow:0 0 30px color-mix(in srgb,var(--item-color) 30%,transparent);pointer-events:none;animation:item-target calc(1800ms / var(--item-rate)) both}
.supply-field-tonic .item-object{animation:tonic-pour calc(1400ms / var(--item-rate)) both}.item-heal-cross{font-size:100px;font-weight:400;opacity:0;animation:tonic-rise calc(1400ms / var(--item-rate)) both}.supply-field-tonic .item-particles i{border-radius:80% 0 80% 0;clip-path:none;animation:tonic-drop calc(1300ms / var(--item-rate)) calc(var(--i) * 28ms / var(--item-rate)) both}
.supply-ember-flask .item-object{animation:ember-pop calc(1100ms / var(--item-rate)) both}.supply-ember-flask .item-particles i{background:#ffb05f;animation:ember-spiral calc(1500ms / var(--item-rate)) calc(var(--i) * 20ms / var(--item-rate)) both}.item-gems{font-size:38px;letter-spacing:8px;position:absolute;bottom:0;animation:ember-gems calc(1600ms / var(--item-rate)) both}
.supply-sealed-letter .item-letter{animation:letter-unfold calc(1300ms / var(--item-rate)) both;transform-origin:center}.supply-sealed-letter .item-seal{animation:letter-seal calc(600ms / var(--item-rate)) both;transform-origin:100px 110px}.supply-sealed-letter .item-particles{display:none}.item-drawn-card{position:absolute;display:grid;place-items:center;gap:8px;width:100px;min-height:130px;padding:12px 8px;border:1px solid #eddaab;border-radius:10px;background:#243443;color:#eddaab;font-size:28px;box-shadow:0 8px 24px #0008;animation:letter-card calc(1500ms / var(--item-rate)) both;--spread:calc((var(--i) - .5) * 100px)}.item-drawn-card b{color:#f5eee0;font-size:11px;line-height:1.35;text-align:center}
.supply-ward-salt .item-object{animation:salt-scatter calc(1200ms / var(--item-rate)) both}.supply-ward-salt .item-particles i{width:5px;height:5px;clip-path:none;animation:salt-grain calc(1500ms / var(--item-rate)) calc(var(--i) * 16ms / var(--item-rate)) both}.item-shield{font-size:180px;line-height:1;text-shadow:0 0 24px #b8dcff;animation:salt-shield calc(1700ms / var(--item-rate)) both}
.supply-bone-knife .item-object{animation:knife-throw calc(1100ms / var(--item-rate)) both}.item-cut{width:230px;height:6px;background:#fff1dc;box-shadow:0 0 18px #ff8d9b;transform:rotate(-40deg);animation:knife-cut calc(1300ms / var(--item-rate)) both}.supply-bone-knife .item-orbit{border-radius:0;transform:rotate(45deg);border-color:#ff9da9}
.supply-winter-bottle .item-object{animation:winter-break calc(1200ms / var(--item-rate)) both}.item-frost{font-size:190px;line-height:1;animation:winter-bloom calc(1600ms / var(--item-rate)) both}.supply-winter-bottle .item-orbit{border-radius:0;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);background:#a6ecff16}.supply-winter-bottle .item-target{border-radius:3px;border-style:dashed;background:#15374edb}.supply-winter-bottle .item-particles i{width:4px;height:18px}
@keyframes item-aura{0%{opacity:0;scale:.4}40%{opacity:1;scale:1.4}100%{opacity:.4;scale:1}}
@keyframes item-orbit{0%{opacity:0;scale:.3}45%{opacity:1}100%{opacity:0;scale:1.6}}
@keyframes item-spark{0%{opacity:0;transform:rotate(var(--angle)) translateY(0)}30%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateY(-130px) scale(.2)}}
@keyframes item-receipt{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes item-target{0%,25%{opacity:0;scale:.8}45%,85%{opacity:1;scale:1}100%{opacity:.7;scale:1}}
@keyframes tonic-pour{0%{transform:translateY(20px) rotate(0)}30%,55%{transform:translate(-20px,-10px) rotate(-65deg)}100%{transform:translateY(0) rotate(0)}}
@keyframes tonic-drop{0%,15%{opacity:0;transform:translate(-35px,-35px)}30%{opacity:1}100%{opacity:0;transform:translate(calc((var(--i) - 9) * 9px),110px) scale(.2)}}
@keyframes tonic-rise{0%,35%{opacity:0;transform:translateY(45px) scale(.5)}65%{opacity:1}100%{opacity:0;transform:translateY(-75px) scale(1)}}
@keyframes ember-pop{0%{transform:scale(.7)}25%{transform:rotate(8deg) scale(1.1)}40%{transform:rotate(-6deg)}100%{transform:rotate(0) scale(.85)}}
@keyframes ember-spiral{0%{opacity:0;transform:rotate(var(--angle)) translateY(0)}35%{opacity:1}100%{opacity:0;transform:rotate(calc(var(--angle) + 100deg)) translateY(-110px)}}
@keyframes ember-gems{0%,30%{opacity:0;transform:translateY(30px) scale(.5)}70%,100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes letter-unfold{0%,20%{transform:translateY(35px) scaleY(.5)}70%,100%{transform:translateY(-35px) scaleY(1)}}
@keyframes letter-seal{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(40px) rotate(70deg) scale(.3)}}
@keyframes letter-card{0%,35%{opacity:0;transform:translateY(20px) scale(.4)}70%,100%{opacity:1;transform:translate(var(--spread),-20px) rotate(calc((var(--i) - .5) * 12deg)) scale(1)}}
@keyframes salt-scatter{0%{transform:rotate(0)}25%,45%{transform:rotate(65deg) translateY(-25px)}65%{transform:rotate(-15deg)}100%{opacity:.3;transform:scale(.7)}}
@keyframes salt-grain{0%{opacity:0;transform:translate(30px,-40px)}30%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateY(-130px)}}
@keyframes salt-shield{0%,40%{opacity:0;transform:scale(.3) rotate(-30deg)}75%,100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes knife-throw{0%{opacity:0;transform:translate(-80px,70px) rotate(-30deg)}25%{opacity:1}65%{opacity:1;transform:translate(20px,-20px) rotate(10deg)}100%{opacity:0;transform:translate(110px,-100px) rotate(20deg)}}
@keyframes knife-cut{0%,50%{opacity:0;scale:0}65%{opacity:1;scale:1.2}100%{opacity:0;scale:1}}
@keyframes winter-break{0%{transform:scale(.7)}30%{transform:rotate(-7deg) scale(1)}45%{transform:rotate(7deg)}65%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(.4)}}
@keyframes winter-bloom{0%,45%{opacity:0;transform:scale(.1) rotate(-25deg)}70%{opacity:1}100%{opacity:.65;transform:scale(1.1) rotate(15deg)}}
.supply-cinematic.calm *{animation:none!important}.supply-cinematic.calm .item-particles,.supply-cinematic.calm .item-orbit,.supply-cinematic.calm .item-specific{display:none}.supply-cinematic.calm .item-object{opacity:1;transform:none}.supply-cinematic.calm .item-target{animation:none;opacity:1}
@media(prefers-reduced-motion:reduce){.supply-cinematic *{animation:none!important}.supply-cinematic .item-particles,.supply-cinematic .item-orbit,.supply-cinematic .item-specific{display:none}}
@media(max-height:480px) and (min-width:600px){.supply-cinematic{grid-template-columns:minmax(190px,1fr) minmax(300px,460px);grid-template-rows:1fr;gap:16px;padding:14px 24px}.item-scene{width:220px;height:220px}.item-receipt{padding:14px 18px}.item-receipt h2{font-size:25px}.item-metrics{margin:10px 0}.item-detail{margin:6px 0}.item-kicker{margin-bottom:5px}}
@media(max-height:550px) and (max-width:599px){.supply-cinematic{grid-template-rows:130px auto;align-content:start;gap:8px}.item-scene{height:130px;min-height:130px}.item-object{width:130px;height:130px}.item-receipt{padding:14px}.item-receipt h2{font-size:22px}.item-metrics{margin:8px 0}}