/* Fill the Cauldron as a witch's lair (assets/js/trunk-lair.js): stone walls, a
   shelf of potions, a fire under the pot, three bags of candy to drag in, three
   zombies who wake one by one, and the Zombie Candy Party. Elementary friendly:
   soft purples and a green glow, light words on a parchment card. */
.rt-trunk-lair, .rt-trunk-badge, .rt-trunk-guest, .rt-trunk-party-done, .rt-trunk-bag--ghost, .rt-trunk-vial-ghost { --tr-font: "RT Boo", "Chalkboard SE", "Comic Sans MS", cursive; --tr-orange: #f26b1d; --tr-orange-deep: #c8520f; --tr-orange-soft: #ffb066; --tr-purple: #5b2a86; --tr-purple-deep: #3a1a5c; --tr-night: #1b1430; --tr-cream: #fff6e9; --tr-ink: #241a3a; --tr-glow: #7ed957; }
.rt-trunk-lair { position: relative; overflow: hidden; max-width: 980px; border-radius: 22px; padding: 22px 18px 18px; color: #fff; background: radial-gradient(ellipse 58% 42% at 50% 64%, color-mix(in srgb, var(--brew) 22%, transparent), transparent 70%), repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 40px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .09) 0 2px, transparent 2px 86px), linear-gradient(180deg, #2b1b4f 0%, #1b1430 58%, #120c22 100%); box-shadow: inset 0 0 80px rgba(0, 0, 0, .45); transition: box-shadow .5s, --brew 1s, --brew-hi 1s, --brew-lv 1s, --brew-pale 1s, --brew-mid 1s, --brew-deep 1s, --brew-ink 1s, --brew-top 1s, --brew-foam 1s, --brew-edge 1s, --brew-froth 1s; }
/* ---- The brew (FURIOPS-394): a potion tossed in turns the cauldron, its glow and the
   Potion Meter its own color. The tokens are registered colors, so the change flows
   through every gradient instead of snapping. Green slime is the brew a visit starts with. ---- */
@property --brew { syntax: "<color>"; inherits: true; initial-value: #7ed957; }
@property --brew-hi { syntax: "<color>"; inherits: true; initial-value: #b8ff8f; }
@property --brew-lv { syntax: "<color>"; inherits: true; initial-value: #8ef05c; }
@property --brew-pale { syntax: "<color>"; inherits: true; initial-value: #c9ff9e; }
@property --brew-mid { syntax: "<color>"; inherits: true; initial-value: #7be855; }
@property --brew-deep { syntax: "<color>"; inherits: true; initial-value: #3fae2a; }
@property --brew-ink { syntax: "<color>"; inherits: true; initial-value: #2b6b1c; }
@property --brew-top { syntax: "<color>"; inherits: true; initial-value: #5fcf35; }
@property --brew-foam { syntax: "<color>"; inherits: true; initial-value: #6fd645; }
@property --brew-edge { syntax: "<color>"; inherits: true; initial-value: #3f9c22; }
@property --brew-froth { syntax: "<color>"; inherits: true; initial-value: #dfffc9; }
.rt-trunk-lair, .rt-brew { --brew: #7ed957; --brew-hi: #b8ff8f; --brew-lv: #8ef05c; --brew-pale: #c9ff9e; --brew-mid: #7be855; --brew-deep: #3fae2a; --brew-ink: #2b6b1c; --brew-top: #5fcf35; --brew-foam: #6fd645; --brew-edge: #3f9c22; --brew-froth: #dfffc9; --tr-glow: var(--brew); }
.rt-trunk-lair[data-brew="purple"], .rt-brew[data-brew="purple"] { --brew: #b06cf0; --brew-hi: #e2c6ff; --brew-lv: #c792ff; --brew-pale: #eedcff; --brew-mid: #b77cf5; --brew-deep: #7a3cc4; --brew-ink: #3d1670; --brew-top: #9a55e0; --brew-foam: #a865ec; --brew-edge: #6a2fb0; --brew-froth: #f1e2ff; }
.rt-trunk-lair[data-brew="orange"], .rt-brew[data-brew="orange"] { --brew: #ff8a2a; --brew-hi: #ffd29a; --brew-lv: #ff9d45; --brew-pale: #ffe3b0; --brew-mid: #ff9a3c; --brew-deep: #e0560f; --brew-ink: #7a2a05; --brew-top: #f37a1f; --brew-foam: #ff8f33; --brew-edge: #c4500d; --brew-froth: #ffe9c9; }
.rt-trunk-lair[data-brew="blue"], .rt-brew[data-brew="blue"] { --brew: #57c7f2; --brew-hi: #ccf3ff; --brew-lv: #7fd8ff; --brew-pale: #e4f9ff; --brew-mid: #74d2f7; --brew-deep: #2a8fc8; --brew-ink: #0f4a72; --brew-top: #4ab8e6; --brew-foam: #6fd0f5; --brew-edge: #2b88b8; --brew-froth: #f0fcff; }
.rt-trunk-lair .rt-brew-top { fill: var(--brew-top); }
.rt-trunk-lair .rt-brew-shine { fill: var(--brew-hi); }
.rt-trunk-lair .rt-brew-foam { fill: var(--brew-foam); stroke: var(--brew-edge); }
.rt-trunk-lair .rt-brew-froth { fill: var(--brew-froth); }
/* The meter takes the new color with a pulse. */
.rt-trunk-potion.is-brew .rt-fr-bar { animation: rt-brew-pulse 1.3s ease-out; }
.rt-trunk-potion.is-brew .rt-trunk-potion-level b { display: inline-block; animation: rt-brew-pop .9s cubic-bezier(.22, 1.4, .36, 1); }
@keyframes rt-brew-pulse { 0% { box-shadow: inset 0 3px 8px rgba(0, 0, 0, .55), 0 0 0 0 var(--brew); } 35% { box-shadow: inset 0 3px 8px rgba(0, 0, 0, .55), 0 0 44px 12px var(--brew); } 100% { box-shadow: inset 0 3px 8px rgba(0, 0, 0, .55), 0 0 22px color-mix(in srgb, var(--brew) 25%, transparent); } }
@keyframes rt-brew-pop { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
/* ---- The potions on the shelf: game pieces (Grip's hold, touch: 'drag'). Each stands in a
   90-wide slot of the shelf's 400 x 90 drawing, its foot on the plank (top at 66 of 90). ---- */
.rt-trunk-lair-shelf { z-index: 4; }
.rt-trunk-vial { position: absolute; bottom: 26.667%; width: 22.5%; height: 80%; margin: 0; padding: 0; border: 0; border-radius: 12px; background: none; color: inherit; cursor: grab; pointer-events: auto; touch-action: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.rt-trunk-vial:focus { outline: none; }
.rt-trunk-vial:focus-visible { outline: 3px solid var(--tr-orange-soft); outline-offset: 2px; }
.rt-trunk-vial-glass { position: absolute; inset: 0; display: block; transform-origin: 50% 100%; transition: transform .2s, opacity .2s, filter .25s; }
.rt-trunk-vial svg { display: block; width: 100%; height: 100%; }
.rt-trunk-vial:hover .rt-trunk-vial-glass, .rt-trunk-vial:focus-visible .rt-trunk-vial-glass { transform: translateY(-3px) scale(1.06); }
.rt-trunk-vial.is-held .rt-trunk-vial-glass, .rt-trunk-vial.is-wiggle .rt-trunk-vial-glass { filter: drop-shadow(0 0 6px var(--vial)) drop-shadow(0 0 14px var(--vial)) brightness(1.15); }
.rt-trunk-vial.is-wiggle .rt-trunk-vial-glass { animation: rt-lair-wiggle .6s ease-in-out; }
.rt-trunk-vial.is-lift .rt-trunk-vial-glass { opacity: .25; filter: none; }
.rt-trunk-vial.is-gone .rt-trunk-vial-glass, .rt-trunk-vial.is-arm .rt-trunk-vial-glass { visibility: hidden; }
/* Held: the potion rides the finger, glowing, with sparks circling it; over the pot it tips to pour. */
.rt-trunk-vial-ghost { position: fixed; z-index: 99999; width: 96px; height: 77px; pointer-events: none; transform: translate(-50%, -62%) rotate(-6deg); transition: transform .25s; animation: rt-vial-glow .9s ease-in-out infinite alternate; }
.rt-trunk-vial-ghost svg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.rt-trunk-vial-ghost::before { content: ""; position: absolute; inset: -38% -30%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--vial) 60%, #fff) 0%, color-mix(in srgb, var(--vial) 45%, transparent) 38%, transparent 68%); animation: rt-vial-halo .9s ease-in-out infinite alternate; }
@keyframes rt-vial-halo { from { opacity: .55; transform: scale(.9); } to { opacity: 1; transform: scale(1.12); } }
.rt-trunk-vial-ghost.is-pour { transform: translate(-50%, -62%) rotate(-38deg) scale(1.08); }
.rt-vial-spark { position: absolute; left: 50%; top: 55%; z-index: 2; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 3px var(--vial); animation: rt-vial-orbit 1.6s linear infinite; }
.rt-vial-spark:nth-child(2) { width: 6px; height: 6px; animation-duration: 1.3s; animation-delay: -.5s; }
.rt-vial-spark:nth-child(3) { width: 5px; height: 5px; animation-duration: 1.9s; animation-delay: -1.1s; animation-direction: reverse; }
.rt-vial-spark:nth-child(4) { animation-duration: 2.2s; animation-delay: -.8s; animation-direction: reverse; }
@keyframes rt-vial-glow { from { filter: drop-shadow(0 0 6px var(--vial)) drop-shadow(0 0 14px var(--vial)) drop-shadow(0 12px 14px rgba(0, 0, 0, .5)); } to { filter: drop-shadow(0 0 10px var(--vial)) drop-shadow(0 0 30px var(--vial)) brightness(1.2) drop-shadow(0 12px 14px rgba(0, 0, 0, .5)); } }
@keyframes rt-vial-orbit { 0% { transform: rotate(0deg) translateX(44px) scale(1); opacity: 1; } 50% { transform: rotate(180deg) translateX(36px) scale(.5); opacity: .35; } 100% { transform: rotate(360deg) translateX(44px) scale(1); opacity: 1; } }
/* The creepy arm: it rises out of the plank where the potion stood, sways, and its fingers creep. */
/* The arm stands taller than a potion (its box reaches 40% above the slot), bottom on the plank. */
.rt-trunk-arm { position: absolute; inset: -40% 0 0; display: none; overflow: hidden; pointer-events: none; }
.rt-trunk-arm-in { position: absolute; inset: 0; display: block; }
.rt-trunk-vial.is-arm { cursor: pointer; }
.rt-trunk-vial.is-arm .rt-trunk-arm { display: block; }
.rt-trunk-vial.is-rising .rt-trunk-arm-in { animation: rt-arm-rise 1.1s cubic-bezier(.2, 1.25, .4, 1) both; }
.rt-trunk-vial.is-arm .rt-arm-all { transform-box: view-box; transform-origin: 45px 72px; animation: rt-arm-sway 3.2s ease-in-out infinite alternate; }
.rt-trunk-vial.is-arm .rt-arm-f { transform-box: fill-box; transform-origin: 50% 100%; animation: rt-arm-creep 1.8s ease-in-out infinite alternate; }
.rt-trunk-vial.is-arm .rt-arm-f--2 { animation-delay: -.45s; }
.rt-trunk-vial.is-arm .rt-arm-f--3 { animation-delay: -.9s; }
.rt-trunk-vial.is-arm .rt-arm-f--4 { animation-delay: -1.35s; }
.rt-trunk-vial.is-arm .rt-arm-f--t { animation-duration: 2.6s; }
.rt-trunk-vial[data-rt-trunk-vial="purple"] .rt-arm-all, .rt-trunk-vial[data-rt-trunk-vial="blue"] .rt-arm-all { animation-delay: -1.6s; animation-direction: alternate-reverse; }
.rt-trunk-vial.is-grab .rt-arm-f { animation: rt-arm-grab .8s ease-in-out; }
@keyframes rt-arm-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes rt-arm-sway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes rt-arm-creep { from { transform: scaleY(1) rotate(-3deg); } to { transform: scaleY(.78) rotate(5deg); } }
@keyframes rt-arm-grab { 0%, 100% { transform: scaleY(1); } 35%, 60% { transform: scaleY(.5) rotate(8deg); } }
/* ---- The poof: a blaze in the potion's color (--pc) out of the pot's mouth, then its own magic. ---- */
.rt-trunk-pot.is-poof { z-index: 5; }
.rt-trunk-pot.is-flare .rt-trunk-fire { transform: translateX(-50%) scale(1.5); }
.rt-trunk-pot.is-frost .rt-trunk-cauldron-svg { filter: drop-shadow(0 0 18px #bff0ff) brightness(1.35) saturate(.55); }
.rt-trunk-poof { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.rt-trunk-poof > span { position: absolute; left: 50%; top: 33%; pointer-events: none; }
.rt-poof-blaze { width: 120%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff 0%, color-mix(in srgb, var(--pc) 85%, #fff) 18%, color-mix(in srgb, var(--pc) 60%, transparent) 42%, transparent 68%); mix-blend-mode: screen; opacity: 0; animation: rt-poof-blaze 1s ease-out forwards; }
.rt-poof-column { width: 46%; height: 100%; border-radius: 50% 50% 40% 40%; background: linear-gradient(0deg, color-mix(in srgb, var(--pc) 90%, #fff), color-mix(in srgb, var(--pc) 50%, transparent) 55%, transparent); filter: blur(6px); mix-blend-mode: screen; transform-origin: 50% 100%; opacity: 0; animation: rt-poof-column 1.2s ease-out forwards; }
.rt-poof-puff { width: var(--sz); height: var(--sz); margin: calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, color-mix(in srgb, var(--pc) 70%, #fff) 45%, color-mix(in srgb, var(--pc) 40%, transparent) 75%); opacity: 0; animation: rt-poof-puff 1.2s ease-out forwards; }
@keyframes rt-poof-blaze { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 1; } 60% { opacity: .9; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } }
@keyframes rt-poof-column { 0% { transform: translate(-50%, -100%) scaleY(0); opacity: 1; } 35% { transform: translate(-50%, -100%) scaleY(1); opacity: .95; } 100% { transform: translate(-50%, -110%) scale(.6, 1.1); opacity: 0; } }
@keyframes rt-poof-puff { 0% { transform: translate(0, 0) scale(.3); opacity: .95; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.6); opacity: 0; } }
/* Purple: lightning strikes the pot and the lair flashes. */
.rt-poof-bolt { transform: translate(calc(-50% + var(--x)), -100%) rotate(var(--rot)); transform-origin: 50% 100%; filter: drop-shadow(0 0 5px var(--pc)) drop-shadow(0 0 14px var(--pc)); opacity: 0; animation: rt-poof-bolt .8s linear forwards; }
.rt-poof-bolt svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rt-poof-bolt-glow { fill: none; stroke: var(--pc); stroke-width: 8; stroke-linejoin: round; stroke-linecap: round; opacity: .6; }
.rt-poof-bolt-core { fill: none; stroke: #fff; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.rt-poof-flash { position: absolute; inset: -40px; z-index: 6; pointer-events: none; background: radial-gradient(ellipse at 50% 70%, color-mix(in srgb, var(--pc) 55%, #fff), color-mix(in srgb, var(--pc) 25%, transparent) 55%, transparent 80%); mix-blend-mode: screen; opacity: 0; animation: rt-poof-flash .9s linear forwards; }
@keyframes rt-poof-bolt { 0% { opacity: 0; } 6% { opacity: 1; } 14% { opacity: .15; } 22% { opacity: 1; } 34% { opacity: .3; } 44% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rt-poof-flash { 0% { opacity: 0; } 5% { opacity: .9; } 12% { opacity: .1; } 22% { opacity: .75; } 34% { opacity: 0; } 46% { opacity: .5; } 100% { opacity: 0; } }
/* Orange: flames leap out of the pot and the fire under it flares. */
.rt-poof-flame { width: var(--w); height: var(--h); margin-left: calc(var(--w) / -2); border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%; background: radial-gradient(ellipse 50% 60% at 50% 75%, #fff8d6 0%, #ffd23f 25%, #ff8a2a 52%, rgba(226, 70, 10, .8) 72%, transparent 76%); mix-blend-mode: screen; transform-origin: 50% 100%; opacity: 0; animation: rt-poof-flame 1.3s ease-out forwards; }
@keyframes rt-poof-flame { 0% { opacity: 0; transform: translate(var(--x), -100%) rotate(var(--rot)) scale(.3, .2); } 15% { opacity: 1; transform: translate(var(--x), -100%) rotate(var(--rot)) scale(1, 1); } 45% { transform: translate(var(--x), -112%) rotate(calc(var(--rot) * -1)) scale(.85, 1.15); } 100% { opacity: 0; transform: translate(var(--x), -150%) rotate(var(--rot)) scale(.4, 1.3); } }
/* Blue: a frost ring rolls off the mouth, snowflakes fly, icicles hang from the rim and the pot frosts over. */
.rt-poof-ring { width: 60%; aspect-ratio: 1; border-radius: 50%; border: 5px solid #eafcff; box-shadow: 0 0 16px var(--pc), inset 0 0 16px var(--pc); opacity: 0; animation: rt-poof-ring 1s ease-out forwards; }
.rt-poof-flake { color: #eafcff; text-shadow: 0 0 8px var(--pc), 0 0 2px #fff; opacity: 0; animation: rt-poof-flake 1.4s ease-out forwards; }
.rt-poof-flake i { display: block; }
.rt-trunk-poof > .rt-poof-icicle { top: 39%; width: calc(var(--h) * .38); height: var(--h); margin-left: calc(var(--h) * -.19); background: linear-gradient(180deg, #fff, #bfefff 60%, rgba(150, 220, 255, .6)); clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 0 4px var(--pc)); transform: scaleY(0); transform-origin: 50% 0; animation: rt-poof-icicle 2.1s ease-out forwards; }
@keyframes rt-poof-ring { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.2, .07); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.2, .8); } }
@keyframes rt-poof-flake { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.4) rotate(0deg); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1) rotate(var(--spin)); } }
@keyframes rt-poof-icicle { 0% { transform: scaleY(0); opacity: 1; } 25% { transform: scaleY(1); } 75% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
/* Green: slime oozes over the rim and drips down the pot. */
.rt-trunk-poof > .rt-poof-drip { top: 38%; width: var(--w); height: var(--h); margin-left: calc(var(--w) / -2); border-radius: 0 0 999px 999px; background: linear-gradient(180deg, var(--pc), color-mix(in srgb, var(--pc) 70%, #000)); box-shadow: inset 2px 0 0 rgba(255, 255, 255, .35); transform: scaleY(0); transform-origin: 50% 0; animation: rt-poof-drip 2.2s cubic-bezier(.3, .6, .4, 1) forwards; }
.rt-poof-drip::after { content: ""; position: absolute; left: 50%; bottom: -30%; width: 140%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: color-mix(in srgb, var(--pc) 75%, #000); }
@keyframes rt-poof-drip { 0% { transform: scaleY(0); opacity: 1; } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1.15); opacity: 0; } }
.rt-trunk-lair > h3 { position: relative; z-index: 1; color: var(--tr-orange-soft); text-shadow: 0 3px 0 var(--tr-purple-deep), 0 8px 20px rgba(0, 0, 0, .5); }
.rt-trunk-lair-web { position: absolute; top: 0; width: 130px; height: 130px; opacity: .3; pointer-events: none; }
.rt-trunk-lair-web svg { display: block; width: 100%; height: 100%; }
.rt-trunk-lair-web--l { left: 0; transform: scaleX(-1); }
.rt-trunk-lair-web--r { right: 0; }
.rt-trunk-lair-stage { position: relative; min-height: 430px; margin: 8px 0 12px; --tr-ground: 19px; }
.rt-trunk-lair-shelf { position: absolute; left: 3%; top: 6px; width: min(46%, 360px); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); pointer-events: none; }
.rt-trunk-lair-shelf svg { display: block; width: 100%; height: auto; }
.rt-trunk-lair-bags { position: absolute; left: 5%; top: 92px; display: flex; gap: 12px; z-index: 3; }
.rt-trunk-bag { width: 66px; height: 74px; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45)); transition: transform .2s, opacity .2s; }
.rt-trunk-bag svg { display: block; width: 100%; height: 100%; }
.rt-trunk-bag:hover, .rt-trunk-bag:focus-visible { transform: translateY(-4px) scale(1.06); outline: none; }
.rt-trunk-bag:focus-visible { filter: drop-shadow(0 0 0 3px var(--tr-orange-soft)); }
.rt-trunk-bag.is-lift { opacity: .3; }
.rt-trunk-bag.is-wiggle svg { animation: rt-lair-wiggle .6s ease-in-out; }
.rt-trunk-bag--ghost { position: fixed; z-index: 99999; width: 76px; height: 84px; margin: 0; pointer-events: none; transform: translate(-50%, -60%) rotate(-8deg); filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .55)); transition: none; }
.rt-trunk-pot { position: absolute; left: 50%; bottom: 4px; width: 300px; transform: translateX(-50%); z-index: 2; }
.rt-trunk-pot .rt-trunk-cauldron-svg { position: relative; z-index: 2; display: block; width: 300px; height: 300px; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--brew) 45%, transparent)); transition: filter .3s, transform .3s; }
.rt-trunk-pot.is-over .rt-trunk-cauldron-svg { transform: scale(1.06); filter: drop-shadow(0 0 16px var(--tr-glow)); }
.rt-trunk-pot.is-drop .rt-trunk-cauldron-svg { animation: rt-lair-jiggle .9s ease-in-out; filter: drop-shadow(0 0 22px var(--tr-glow)); }
.rt-trunk-pot-glow { position: absolute; left: 50%; top: 30%; width: 350px; height: 210px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brew) 60%, transparent), color-mix(in srgb, var(--brew) 0%, transparent) 66%); filter: blur(10px); opacity: .65; z-index: 1; transition: opacity .4s; }
.rt-trunk-pot.is-hot .rt-trunk-pot-glow { opacity: 1; animation: rt-lair-glow 1.1s ease-in-out infinite alternate; }
.rt-trunk-pot.is-hot .rt-trunk-cauldron-svg { filter: drop-shadow(0 0 26px var(--tr-glow)); }
.rt-trunk-pot-bubbles { position: absolute; left: 50%; top: 10%; width: 210px; height: 160px; transform: translateX(-50%); pointer-events: none; z-index: 4; }
.rt-lair-bubble { position: absolute; bottom: 0; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--brew-froth), var(--tr-glow) 60%, color-mix(in srgb, var(--brew) 15%, transparent)); opacity: 0; animation: rt-lair-bubble 1.7s ease-out forwards; }
.rt-trunk-fire { position: absolute; left: 50%; bottom: -12px; width: 185px; transform: translateX(-50%); z-index: 3; pointer-events: none; transform-origin: 50% 100%; transition: transform .35s ease-out; }
.rt-trunk-fire svg { display: block; width: 100%; height: auto; }
.rt-trunk-fire .f-1, .rt-trunk-fire .f-2, .rt-trunk-fire .f-3 { transform-origin: 80px 66px; transform-box: view-box; animation: rt-lair-flicker 1.1s ease-in-out infinite alternate; }
.rt-trunk-fire .f-2 { animation-duration: .9s; animation-delay: .2s; }
.rt-trunk-fire .f-3 { animation-duration: .7s; animation-delay: .4s; }
/* The ground is the line under the cauldron (Furi, 10-14): the zombies stand on it awake, and sit or lie on it once they are full. */
.rt-trunk-zombies { position: absolute; right: 3%; bottom: var(--tr-ground); display: flex; align-items: flex-end; gap: 8px; z-index: 3; }
.rt-trunk-dancer { position: relative; width: 100px; }
.rt-trunk-dancer-body { position: relative; z-index: 2; transform-origin: 50% 90%; }
.rt-trunk-dancer-body svg { display: block; width: 100%; height: auto; }
.rt-trunk-dancer.is-pop .rt-trunk-dancer-body { animation: rt-lair-pop .8s cubic-bezier(.22, 1.4, .36, 1); }
.rt-trunk-spot { position: absolute; left: 50%; bottom: -8px; width: 190px; height: 260px; transform: translateX(-50%); opacity: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse 50% 28% at 50% 100%, var(--z-light, #7ed957), transparent 72%), linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--z-light, #7ed957) 40%, transparent) 100%); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); transition: opacity .5s; }
body.rt-trunk-party .rt-trunk-spot { opacity: .9; animation: rt-lair-spot 2.2s ease-in-out infinite alternate; }
.rt-trunk-dancer.is-dancing .rt-trunk-dancer-body { animation: rt-lair-bob .5s ease-in-out infinite alternate; }
.rt-trunk-dancer.is-dancing .z-arm-l { animation: rt-lair-arm-l .5s ease-in-out infinite alternate; }
.rt-trunk-dancer.is-dancing .z-arm-r { animation: rt-lair-arm-r .5s ease-in-out infinite alternate-reverse; }
.rt-trunk-dancer.is-dancing .z-head { animation: rt-lair-head .5s ease-in-out infinite alternate; }
.rt-trunk-dancer.is-dancing .z-leg-l { animation: rt-lair-leg .5s ease-in-out infinite alternate; }
.rt-trunk-dancer.is-dancing .z-leg-r { animation: rt-lair-leg .5s ease-in-out infinite alternate-reverse; }
.rt-trunk-dancer[data-rt-trunk-dancer="2"].is-dancing .rt-trunk-dancer-body, .rt-trunk-dancer[data-rt-trunk-dancer="2"].is-dancing .z-arm-l, .rt-trunk-dancer[data-rt-trunk-dancer="2"].is-dancing .z-arm-r, .rt-trunk-dancer[data-rt-trunk-dancer="2"].is-dancing .z-head, .rt-trunk-dancer[data-rt-trunk-dancer="2"].is-dancing .z-leg-l, .rt-trunk-dancer[data-rt-trunk-dancer="2"].is-dancing .z-leg-r { animation-duration: .64s; }
.rt-trunk-dancer[data-rt-trunk-dancer="3"].is-dancing .rt-trunk-dancer-body, .rt-trunk-dancer[data-rt-trunk-dancer="3"].is-dancing .z-arm-l, .rt-trunk-dancer[data-rt-trunk-dancer="3"].is-dancing .z-arm-r, .rt-trunk-dancer[data-rt-trunk-dancer="3"].is-dancing .z-head, .rt-trunk-dancer[data-rt-trunk-dancer="3"].is-dancing .z-leg-l, .rt-trunk-dancer[data-rt-trunk-dancer="3"].is-dancing .z-leg-r { animation-duration: .42s; }
/* The little one's pail sits on the floor (its z-bucket is a sibling of the arms, pivot at the hand), so that arm stays almost still and the pail rocks instead. */
.rt-trunk-dancer--3.is-dancing .z-arm-r { animation: rt-lair-arm-hold .42s ease-in-out infinite alternate; }
.rt-trunk-dancer--3.is-dancing .z-bucket { animation: rt-lair-pail .42s ease-in-out infinite alternate; }
.rt-trunk-dancer--3.is-sit .z-arm-r, .rt-trunk-dancer--3.is-lie .z-arm-r { transform: rotate(-3deg); }
@keyframes rt-lair-arm-hold { from { transform: rotate(-2deg); } to { transform: rotate(3deg); } }
@keyframes rt-lair-pail { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
/* Out of the lair and across the page: the dancer rides a fixed layer during the party. */
.rt-trunk-party-floor { position: fixed; inset: 0; z-index: 9703; pointer-events: none; overflow: hidden; }
/* Each dancer has its own seat and its own loop around it (Furi, 10-15: on one shared path they kept lining up
   on the same up-left, down-right diagonal). The boy loops low on the left, the girl high in the middle, the
   little one low on the right; they walk from the lair to their seats. */
.rt-trunk-party-floor .rt-trunk-dancer { transition: left 1.2s ease-in-out, top 1.2s ease-in-out; }
.rt-trunk-party-floor .rt-trunk-dancer.is-dancing { animation: rt-lair-wander-1 11s ease-in-out infinite; }
.rt-trunk-party-floor .rt-trunk-dancer[data-rt-trunk-dancer="2"].is-dancing { animation-name: rt-lair-wander-2; animation-duration: 13s; }
.rt-trunk-party-floor .rt-trunk-dancer[data-rt-trunk-dancer="3"].is-dancing { animation-name: rt-lair-wander-3; animation-duration: 9s; }
/* Too much candy: two sit, one lies down. */
/* Sitting: the legs swing out, the body drops 12% so the feet stay on the ground line, and the shadow (drawn at the feet's standing spot) lifts back onto the line. */
.rt-trunk-dancer.is-sit .rt-trunk-dancer-body { transform: translateY(12%); }
.rt-trunk-dancer.is-sit .z-shadow { transform: translateY(-19px); }
.rt-trunk-dancer.is-sit .z-leg-l { transform: rotate(-62deg); }
.rt-trunk-dancer.is-sit .z-leg-r { transform: rotate(62deg); }
.rt-trunk-dancer.is-sit .z-arm-l { transform: rotate(45deg); }
.rt-trunk-dancer.is-sit .z-arm-r { transform: rotate(-45deg); }
.rt-trunk-dancer.is-sit .z-head { transform: rotate(-10deg); }
/* Lying along the ground, head to the left: rotate about the feet, then slide so the figure is centered on its own box and rests on the line (percentages are of the body's own box: H/2 is 66.7% of W, W/2 is 37.5% of H). */
.rt-trunk-dancer.is-lie .rt-trunk-dancer-body { transform-origin: 50% 100%; transform: translate(66.667%, -37.5%) rotate(-90deg); }
.rt-trunk-dancer.is-lie .z-arm-l { transform: rotate(60deg); }
.rt-trunk-dancer.is-lie .z-arm-r { transform: rotate(-60deg); }
.rt-trunk-dancer.is-sit .z-shadow, .rt-trunk-dancer.is-lie .z-shadow { opacity: .4; }
/* Rested, they sit where the candy bags were (empty by then), well clear of the fire. */
.rt-trunk-lair.is-rested .rt-trunk-zombies { left: 3%; right: auto; gap: 12px; }
.rt-trunk-lair.is-rested .rt-trunk-dancer { width: 76px; }
.rt-trunk-lair.is-rested .rt-trunk-dancer.is-lie { order: -1; margin: 0 14px; }
.rt-trunk-lair-hint { position: relative; z-index: 1; margin: 0 0 12px; text-align: center; font-weight: 700; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
/* ---- The Potion Meter (FURIOPS-380): the fleet tracker (rt-fr-*, fundraiser.css + .js) in a
   corked glass tube of bubbling green potion; its palette rides the --fr-* tokens. ---- */
.rt-trunk-potion { --fr-ink: #e9dcff; --fr-primary: var(--brew-lv); --fr-bright: var(--brew-hi); --fr-silver: #b6a6d9; --fr-gold: #ffd23f; --fr-display: var(--tr-font); position: relative; z-index: 1; max-width: 760px; margin: 4px auto 26px; padding: 18px 38px 8px 22px; border-radius: 22px; text-align: center; color: var(--tr-cream); background: radial-gradient(ellipse 80% 70% at 50% 40%, color-mix(in srgb, var(--brew) 14%, transparent), transparent 70%), rgba(18, 12, 34, .55); box-shadow: inset 0 0 0 1px rgba(182, 166, 217, .25), 0 10px 30px rgba(0, 0, 0, .35); }
.rt-trunk-potion-kicker { margin: 0; font-size: .82rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--brew-hi); }
.rt-trunk-potion-kicker i { margin-right: .3em; }
.rt-trunk-potion-level { margin: 2px 0 0; font-family: var(--tr-font); line-height: 1; color: var(--tr-cream); }
.rt-trunk-potion-level b { font-weight: 400; font-size: clamp(3rem, 8vw, 4.2rem); color: var(--brew-lv); text-shadow: 0 0 18px color-mix(in srgb, var(--brew) 75%, transparent), 0 4px 0 var(--brew-ink); }
.rt-trunk-potion-level span { font-size: clamp(1.8rem, 5vw, 2.4rem); color: var(--brew-lv); text-shadow: 0 0 14px color-mix(in srgb, var(--brew) 60%, transparent); }
.rt-trunk-potion-level em { font-style: normal; font-size: 1.3rem; letter-spacing: .04em; margin-left: .2em; }
/* The glass: a tube on its side, round at the left, corked at the right. */
.rt-trunk-potion .rt-fr-bar { height: 34px; margin: 16px 0 5.2rem; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04) 55%, rgba(0, 0, 0, .18)), rgba(30, 18, 56, .75); border: 2px solid rgba(233, 220, 255, .55); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .55), 0 0 22px color-mix(in srgb, var(--brew) 25%, transparent); }
.rt-trunk-potion .rt-fr-bar::before { content: ""; position: absolute; left: 14px; right: 18px; top: 4px; height: 6px; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .12)); z-index: 2; pointer-events: none; }
.rt-trunk-potion-cork { position: absolute; right: -24px; top: 50%; width: 24px; height: 26px; margin-top: -13px; border-radius: 4px 8px 8px 4px; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 6px), linear-gradient(180deg, #c99561, #8a5a2f); box-shadow: 0 3px 6px rgba(0, 0, 0, .4); }
.rt-trunk-potion .rt-fr-fill { overflow: hidden; background: linear-gradient(180deg, var(--brew-pale) 0%, var(--brew-mid) 38%, var(--brew-deep) 100%); box-shadow: 0 0 18px color-mix(in srgb, var(--brew) 85%, transparent), inset 0 -4px 8px rgba(0, 0, 0, .25); }
.rt-trunk-potion-bubbles { position: absolute; inset: 0; border-radius: inherit; background-image: radial-gradient(circle, rgba(255, 255, 255, .8) 0 2px, transparent 3px), radial-gradient(circle, rgba(255, 255, 255, .55) 0 1.4px, transparent 2.4px), radial-gradient(circle, rgba(232, 255, 214, .7) 0 2.6px, transparent 3.6px); background-size: 28px 34px, 17px 26px, 46px 40px; background-position: 0 0, 9px 12px, 20px 5px; animation: rt-potion-bubbles 2.6s linear infinite; }
@keyframes rt-potion-bubbles { to { background-position: 0 -34px, 9px -14px, 20px -35px; } }
.rt-trunk-potion .rt-fr-mark { color: var(--fr-ink); }
.rt-trunk-potion .rt-fr-mark b { font-family: var(--tr-font); font-weight: 400; font-size: 1rem; letter-spacing: .03em; text-transform: none; }
.rt-trunk-potion .rt-fr-mark.is-hit { color: var(--brew-hi); }
.rt-trunk-potion .rt-fr-mark.is-hit i { color: var(--brew-lv); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--brew-lv) 85%, transparent)); }
.rt-trunk-potion .rt-fr-mark.is-latest::before { background: radial-gradient(circle, color-mix(in srgb, var(--brew-hi) 50%, transparent) 0%, color-mix(in srgb, var(--brew-lv) 20%, transparent) 55%, transparent 72%); }
.rt-trunk-potion .rt-fr-togo { margin: 0 0 6px; font-family: var(--tr-font); font-weight: 400; font-size: 1.35rem; letter-spacing: .03em; text-transform: none; color: var(--tr-orange-soft); }
/* A newly reached milestone's moment (fundraiser.js) in the lair's colors. */
:root:has(.rt-trunk-potion) .rt-fr-hero-dim { background: rgba(27, 20, 48, .8); }
:root:has(.rt-trunk-potion) .rt-fr-hero-icon { color: #3fae2a; background: radial-gradient(circle at 40% 35%, #fff, #e3ffd2); box-shadow: 0 0 0 6px rgba(142, 240, 92, .5), 0 0 40px rgba(142, 240, 92, .7); }
:root:has(.rt-trunk-potion) .rt-fr-hero b { font-family: var(--tr-font, "RT Boo", cursive); font-weight: 400; text-transform: none; }
:root:has(.rt-trunk-potion) .rt-fr-hero b .rt-fr-hero-pct { color: #8ef05c; }
/* ---- The drive, in its own cards ---- */
.rt-trunk-drive { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 820px; margin: 30px auto 26px; }
.rt-trunk-drive-card { position: relative; margin: 0; padding: 32px 20px 18px; border-radius: 18px; background: var(--tr-cream); color: var(--tr-ink); text-align: center; border-top: 6px solid var(--tr-orange); box-shadow: 0 12px 26px rgba(0, 0, 0, .38); }
.rt-trunk-drive-card--why { border-top-color: #7ed957; }
.rt-trunk-drive-icon { position: absolute; left: 50%; top: -24px; transform: translateX(-50%); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--tr-purple); color: #fff; font-size: 1.25rem; box-shadow: 0 0 0 4px var(--tr-cream), 0 6px 14px rgba(0, 0, 0, .35); }
.rt-trunk-drive-card--why .rt-trunk-drive-icon { background: #3fae2a; }
.rt-trunk-drive-card h4 { margin: 2px 0 10px; font-family: var(--tr-font); font-weight: 400; font-size: 1.55rem; line-height: 1.1; color: var(--tr-purple); }
.rt-trunk-drive-card p { margin: 0 0 8px; line-height: 1.5; }
.rt-trunk-drive-card p i { color: var(--tr-orange-deep); margin-right: .2em; }
.rt-trunk-drive-dates { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--tr-orange); color: #fff; font-weight: 800; }
/* The party: the page dims except the lair (a hole in a shadow that follows the lair), a floor over everything for the dancers, candy rain, Done Dancing. */
.rt-trunk-dim { position: fixed; z-index: 9700; pointer-events: none; border-radius: 22px; box-shadow: 0 0 0 200vmax rgba(8, 4, 20, .78); opacity: 0; transition: opacity .5s; }
.rt-trunk-dim.is-on { opacity: 1; }
body.rt-trunk-party .rt-trunk-lair { box-shadow: inset 0 0 80px rgba(0, 0, 0, .45), 0 0 0 4px color-mix(in srgb, var(--brew) 40%, transparent), 0 0 70px 14px color-mix(in srgb, var(--brew) 30%, transparent); }
.rt-trunk-party-done { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 9706; transform: translateX(-50%); white-space: nowrap; padding: 13px 24px; border: 0; border-radius: 999px; background: var(--tr-orange); color: #fff; font: inherit; font-weight: 800; font-size: 1.05rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 4px rgba(255, 176, 102, .5); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rt-trunk-guest { position: absolute; width: var(--w, 90px); pointer-events: none; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5)); animation: rt-lair-guest var(--d, 6s) ease-in-out infinite alternate; }
.rt-trunk-guest img { position: relative; z-index: 2; display: block; width: 100%; height: auto; }
.rt-trunk-guest i { position: relative; z-index: 2; display: block; font-size: var(--w, 60px); color: #fff; }
.rt-trunk-guest--spider i { color: #1b1430; filter: drop-shadow(0 0 3px #fff); }
.rt-trunk-rain { position: fixed; inset: 0; z-index: 9704; pointer-events: none; overflow: hidden; }
.rt-trunk-rain-piece { position: absolute; top: -40px; width: 38px; animation: rt-lair-fall var(--t, 3s) linear forwards; }
.rt-trunk-rain-piece svg { display: block; width: 100%; height: auto; }
/* The badge */
.rt-trunk-badge { border: 0; padding: 0; background: transparent; max-width: min(92vw, 440px); width: 100%; overflow: visible; }
.rt-trunk-badge::backdrop { background: rgba(8, 4, 20, .7); }
.rt-trunk-badge-card { position: relative; border-radius: 22px; padding: 28px 22px 22px; background: radial-gradient(ellipse 90% 60% at 50% 0%, color-mix(in srgb, var(--brew) 40%, transparent), transparent 70%), linear-gradient(170deg, color-mix(in srgb, var(--brew-deep) 55%, #241a3a) 0%, color-mix(in srgb, var(--brew-ink) 65%, #0d0818) 100%); color: #fff; text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 0 2px color-mix(in srgb, var(--brew) 55%, transparent), 0 0 40px color-mix(in srgb, var(--brew) 45%, transparent); }
.rt-trunk-badge-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 20px; cursor: pointer; }
.rt-trunk-badge-medal { width: 100px; height: 100px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, var(--brew-hi), var(--brew) 50%, var(--brew-deep) 85%); color: #fff; text-shadow: 0 2px 0 var(--brew-ink); font-size: 48px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--brew-hi) 55%, transparent), 0 0 30px 8px color-mix(in srgb, var(--brew) 60%, transparent); animation: rt-lair-pop .8s cubic-bezier(.22, 1.4, .36, 1); }
.rt-trunk-badge-kicker { margin: 0; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; font-weight: 800; color: var(--brew-hi); }
.rt-trunk-badge h3 { margin: 4px 0 8px; font-family: var(--tr-font); font-weight: 400; font-size: 2.2rem; line-height: 1; color: #fff; text-shadow: 0 4px 0 var(--brew-ink), 0 8px 20px rgba(0, 0, 0, .5); }
.rt-trunk-badge p { margin: 0 0 10px; font-size: 1.02rem; }
.rt-trunk-badge-actions { margin-top: 14px; }
.rt-trunk-badge .rt-btn { background: var(--brew-hi); border-color: var(--brew-hi); color: var(--brew-ink) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brew) 50%, transparent), 0 0 22px color-mix(in srgb, var(--brew) 55%, transparent); font-weight: 800; padding: 12px 22px; border-radius: 999px; cursor: pointer; font: inherit; }
/* Motion */
@keyframes rt-lair-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
@keyframes rt-lair-jiggle { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.08, .94); } 55% { transform: scale(.96, 1.06); } 80% { transform: scale(1.03, .98); } }
@keyframes rt-lair-glow { from { opacity: .7; transform: translateX(-50%) scale(1); } to { opacity: 1; transform: translateX(-50%) scale(1.18); } }
@keyframes rt-lair-flicker { from { transform: scale(1, 1); } to { transform: scale(.94, 1.12); } }
@keyframes rt-lair-bubble { 0% { opacity: 0; transform: translateY(0) scale(.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-120px) scale(1.25); } }
@keyframes rt-lair-pop { 0% { transform: scale(0) translateY(40px); } 70% { transform: scale(1.15) translateY(-10px); } 100% { transform: scale(1) translateY(0); } }
@keyframes rt-lair-bob { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-12px) rotate(3deg); } }
@keyframes rt-lair-arm-l { from { transform: rotate(-25deg); } to { transform: rotate(30deg); } }
@keyframes rt-lair-arm-r { from { transform: rotate(25deg); } to { transform: rotate(-30deg); } }
@keyframes rt-lair-head { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes rt-lair-leg { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes rt-lair-spot { from { opacity: .6; } to { opacity: 1; } }
@keyframes rt-lair-wander-1 { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(16vw, -10vh); } 50% { transform: translate(26vw, 4vh); } 75% { transform: translate(10vw, 10vh); } }
@keyframes rt-lair-wander-2 { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-14vw, 8vh); } 50% { transform: translate(0, 14vh); } 75% { transform: translate(14vw, 6vh); } }
@keyframes rt-lair-wander-3 { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(-12vw, -14vh); } 66% { transform: translate(4vw, -6vh); } }
@keyframes rt-lair-guest { 0% { transform: translate(0, 0) rotate(-6deg); } 50% { transform: translate(var(--dx, 30vw), -14vh) rotate(6deg); } 100% { transform: translate(calc(var(--dx, 30vw) * -1), 8vh) rotate(-4deg); } }
@keyframes rt-lair-fall { to { transform: translateY(112vh) rotate(540deg); } }
@media (prefers-reduced-motion: reduce) { .rt-trunk-lair *, .rt-trunk-guest, .rt-trunk-rain-piece, .rt-trunk-badge-medal, .rt-trunk-potion-bubbles, .rt-trunk-vial-ghost, .rt-trunk-vial-ghost::before, .rt-vial-spark, .rt-trunk-badge-card, .rt-trunk-badge-fx *, .rt-trunk-party-fx * { animation: none !important; } }
@media (max-width: 720px) { .rt-trunk-party-done { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 640px) {
  .rt-trunk-potion { padding: 14px 30px 4px 12px; margin-bottom: 18px; }
  .rt-trunk-potion .rt-fr-bar { height: 28px; margin-bottom: 7.4rem; }
  /* Four labels do not fit side by side on a phone: 25 and 75 drop a row, so neighbors never touch. */
  .rt-trunk-potion .rt-fr-mark[data-rt-fr-mark="25"], .rt-trunk-potion .rt-fr-mark[data-rt-fr-mark="75"] { margin-top: 3.3rem; }
  .rt-trunk-potion .rt-fr-mark[data-rt-fr-mark="25"]::after, .rt-trunk-potion .rt-fr-mark[data-rt-fr-mark="75"]::after { content: ""; position: absolute; left: 50%; bottom: 100%; width: 0; height: 2.9rem; border-left: 2px dotted rgba(233, 220, 255, .35); }
  .rt-trunk-potion-cork { right: -20px; width: 20px; height: 22px; margin-top: -11px; }
  .rt-trunk-potion .rt-fr-mark { width: 5.2em; }
  .rt-trunk-potion .rt-fr-mark b { font-size: .86rem; }
  .rt-trunk-drive { grid-template-columns: 1fr; gap: 36px; margin-top: 34px; }
  .rt-trunk-lair { padding: 18px 12px 14px; }
  .rt-trunk-lair-stage { min-height: 370px; --tr-ground: 17px; }
  .rt-trunk-lair-shelf { width: 92%; left: 4%; }
  .rt-trunk-lair-bags { left: 3%; top: 84px; gap: 4px; }
  .rt-trunk-bag { width: 52px; height: 60px; }
  .rt-trunk-pot { left: 42%; width: 205px; bottom: 6px; }
  .rt-trunk-pot .rt-trunk-cauldron-svg { width: 205px; height: 205px; }
  .rt-trunk-pot-glow { width: 250px; height: 150px; }
  .rt-trunk-pot-bubbles { width: 150px; height: 120px; }
  .rt-trunk-fire { width: 135px; }
  .rt-trunk-zombies { left: 2%; right: 2%; gap: 4px; justify-content: flex-end; }
  .rt-trunk-dancer { width: 52px; }
  .rt-trunk-spot { width: 120px; height: 170px; }
  .rt-trunk-lair-web { width: 90px; height: 90px; }
  .rt-trunk-lair.is-rested .rt-trunk-zombies { left: 2%; right: 2%; gap: 4px; }
  .rt-trunk-lair.is-rested .rt-trunk-dancer { width: 52px; }
  .rt-trunk-lair.is-rested .rt-trunk-dancer.is-lie { width: 46px; margin: 0 auto 0 0; }
}
/* ---- The party wears the brew (FURIOPS-397): the badge, the dim, Done Dancing and a sky of the
   brew's own magic over the page. Pieces carry .rt-brew[data-brew]; --pc is the brew for the
   bolts the poof shares. ---- */
.rt-trunk-badge-brew { display: inline-flex; align-items: center; gap: .4em; padding: 4px 12px; border-radius: 999px; font-weight: 800; font-size: .9rem; letter-spacing: .04em; color: var(--brew-hi); background: color-mix(in srgb, var(--brew) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brew-hi) 55%, transparent); }
.rt-trunk-badge .rt-trunk-badge-brew { margin: 0 0 10px; font-size: .9rem; }
.rt-trunk-dim.rt-brew { box-shadow: 0 0 0 200vmax color-mix(in srgb, var(--brew-ink) 30%, rgba(8, 4, 20, .8)); }
.rt-trunk-party-done.rt-brew { background: var(--brew-hi); color: var(--brew-ink); box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 4px color-mix(in srgb, var(--brew) 70%, transparent), 0 0 26px var(--brew); }
/* The badge card's edge. */
.rt-trunk-badge-fx { position: absolute; left: 0; right: 0; top: 0; height: 0; pointer-events: none; --pc: var(--brew); }
.rt-trunk-badge-fx > span { position: absolute; top: 0; }
.rt-trunk-badge-fx > .rt-fx-bolt { top: auto; bottom: -8px; width: 40px; height: 80px; margin-left: -20px; filter: drop-shadow(0 0 5px var(--brew)) drop-shadow(0 0 12px var(--brew)); opacity: 0; animation: rt-fx-strike 2.7s linear infinite; }
.rt-fx-bolt svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rt-trunk-badge[data-brew="purple"] .rt-trunk-badge-card { animation: rt-fx-zap 2.7s linear infinite; }
.rt-trunk-badge-fx > .rt-fx-flame { top: auto; bottom: -10px; width: 34px; height: var(--h); margin-left: -17px; border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%; background: radial-gradient(ellipse 50% 60% at 50% 75%, #fff8d6 0%, #ffd23f 25%, #ff8a2a 52%, rgba(226, 70, 10, .8) 72%, transparent 76%); transform-origin: 50% 100%; animation: rt-fx-flicker .7s ease-in-out infinite alternate; }
.rt-trunk-badge-fx > .rt-fx-icicle { width: calc(var(--h) * .36); height: var(--h); margin-left: calc(var(--h) * -.18); background: linear-gradient(180deg, #fff, #c9f2ff 55%, rgba(170, 230, 255, .55)); clip-path: polygon(0 0, 100% 0, 50% 100%); animation: rt-fx-shimmer 3s ease-in-out infinite; }
.rt-trunk-badge[data-brew="blue"] .rt-trunk-badge-card { box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 0 2px rgba(234, 252, 255, .75), 0 0 40px color-mix(in srgb, var(--brew) 55%, transparent), inset 0 0 34px rgba(200, 240, 255, .3); }
.rt-trunk-badge-fx > .rt-fx-goo { left: 0; right: 0; height: 14px; border-radius: 22px 22px 0 0; background: var(--brew); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35); }
.rt-trunk-badge-fx > .rt-fx-goo::after { content: ""; position: absolute; left: 12px; right: 12px; top: 100%; height: 8px; background: radial-gradient(circle at 50% 0, var(--brew) 7px, transparent 7.5px) 0 0 / 22px 8px repeat-x; }
.rt-trunk-badge-fx > .rt-fx-drip { top: 10px; width: var(--w); height: var(--h); margin-left: calc(var(--w) / -2); border-radius: 0 0 999px 999px; background: var(--brew); box-shadow: inset 2px 0 0 rgba(255, 255, 255, .35); transform-origin: 50% 0; animation: rt-fx-ooze 2.6s ease-in-out infinite alternate; }
.rt-trunk-badge-fx > .rt-fx-drip::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 150%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: var(--brew); }
@keyframes rt-fx-strike { 0%, 62% { opacity: 0; } 64% { opacity: 1; } 67% { opacity: .2; } 70% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes rt-fx-zap { 0%, 62%, 80%, 100% { box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 0 2px color-mix(in srgb, var(--brew) 55%, transparent), 0 0 40px color-mix(in srgb, var(--brew) 45%, transparent); } 65%, 71% { box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 0 3px #fff, 0 0 70px var(--brew); } }
@keyframes rt-fx-flicker { from { transform: scale(1, 1) skewX(-4deg); } to { transform: scale(.88, 1.22) skewX(5deg); } }
@keyframes rt-fx-shimmer { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
@keyframes rt-fx-ooze { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
/* The party's sky: over the dim, under the dancers and the candy. */
.rt-trunk-party-fx { position: fixed; inset: 0; z-index: 9702; pointer-events: none; overflow: hidden; --pc: var(--brew); }
.rt-trunk-party-fx > span { position: absolute; pointer-events: none; }
.rt-trunk-party-fx > .rt-pfx-flash { inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb, var(--brew) 55%, #fff), color-mix(in srgb, var(--brew) 22%, transparent) 55%, transparent 85%); mix-blend-mode: screen; opacity: 0; animation: rt-poof-flash .9s linear forwards; }
.rt-trunk-party-fx > .rt-pfx-bolt { top: 0; margin-left: -60px; filter: drop-shadow(0 0 6px var(--brew)) drop-shadow(0 0 18px var(--brew)); opacity: 0; animation: rt-poof-bolt .8s linear forwards; }
.rt-pfx-bolt svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rt-trunk-party-fx > .rt-pfx-flame { bottom: -18px; width: 9vw; min-width: 46px; height: var(--h); border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%; background: radial-gradient(ellipse 50% 60% at 50% 75%, #fff8d6 0%, #ffd23f 25%, #ff8a2a 52%, rgba(226, 70, 10, .75) 72%, transparent 76%); mix-blend-mode: screen; opacity: .9; transform-origin: 50% 100%; animation: rt-fx-flicker .7s ease-in-out infinite alternate; }
.rt-trunk-party-fx > .rt-pfx-ember { bottom: -12px; width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle, #fff6c2 0%, #ffd23f 35%, #ff8a2a 60%, transparent 72%); animation: rt-pfx-rise var(--t) linear forwards; }
.rt-trunk-party-fx > .rt-pfx-frost { inset: 0; box-shadow: inset 0 0 90px 24px rgba(200, 240, 255, .45), inset 0 0 0 3px rgba(234, 252, 255, .5); }
.rt-trunk-party-fx > .rt-pfx-icicle { top: 0; width: calc(var(--h) * .34); height: var(--h); background: linear-gradient(180deg, #fff, #c9f2ff 55%, rgba(170, 230, 255, .5)); clip-path: polygon(0 0, 100% 0, 50% 100%); animation: rt-fx-shimmer 3s ease-in-out infinite; }
.rt-trunk-party-fx > .rt-pfx-flake { top: -40px; color: #eafcff; text-shadow: 0 0 8px var(--brew), 0 0 2px #fff; animation: rt-pfx-snow var(--t) linear forwards; }
.rt-trunk-party-fx > .rt-pfx-goo { top: 0; left: 0; right: 0; height: 16px; background: var(--brew); box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--brew-deep) 70%, transparent); }
.rt-trunk-party-fx > .rt-pfx-goo::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; background: radial-gradient(circle at 50% 0, var(--brew) 10px, transparent 10.5px) 0 0 / 30px 12px repeat-x; }
.rt-trunk-party-fx > .rt-pfx-drip { top: 12px; width: var(--w); height: var(--h); margin-left: calc(var(--w) / -2); border-radius: 0 0 999px 999px; background: linear-gradient(180deg, var(--brew), color-mix(in srgb, var(--brew) 75%, #000)); transform-origin: 50% 0; animation: rt-pfx-drip var(--t) ease-in forwards; }
.rt-trunk-party-fx > .rt-pfx-drip::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 150%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: color-mix(in srgb, var(--brew) 75%, #000); }
.rt-trunk-party-fx > .rt-pfx-bubble { bottom: -30px; width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--brew-froth), var(--brew) 60%, color-mix(in srgb, var(--brew) 15%, transparent)); animation: rt-pfx-rise var(--t) ease-out forwards; }
@keyframes rt-pfx-rise { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(var(--dx), -105vh); opacity: 0; } }
@keyframes rt-pfx-snow { to { transform: translate(var(--dx), calc(100vh + 80px)) rotate(var(--spin)); } }
@keyframes rt-pfx-drip { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); } 100% { transform: translateY(105vh) scaleY(1.3); } }
.rt-pfx-bolt .rt-poof-bolt-core { stroke-width: 5; }
.rt-pfx-bolt .rt-poof-bolt-glow { stroke-width: 14; }
/* Done Dancing wears a wrapped candy on each side (Furi, 10-15): the page's own candy art in the brew's color, rocking. */
.rt-trunk-party-done { display: inline-flex; align-items: center; gap: .55em; }
.rt-trunk-done-candy { display: inline-block; flex: 0 0 auto; width: 36px; --candy: var(--brew, #f26b1d); transform: rotate(-16deg); animation: rt-done-candy 1.1s ease-in-out infinite alternate; }
.rt-trunk-done-candy--r { transform: rotate(16deg) scaleX(-1); animation-direction: alternate-reverse; }
.rt-trunk-done-candy svg { display: block; width: 100%; height: auto; }
@keyframes rt-done-candy { from { rotate: -10deg; } to { rotate: 10deg; } }
@media (prefers-reduced-motion: reduce) { .rt-trunk-done-candy { animation: none; } }
/* ---- The reset ghost (FURIOPS-400): in the stage at the potions' level, right of the shelf (Furi, 10-15), a start-over arrow on its belly. Its spell
   sends sparks to every potion, bag and the pot, a shimmer sweeps the stage, and what comes back pops in. ---- */
.rt-trunk-reset { position: absolute; top: 0; right: 3%; z-index: 5; width: 78px; height: 78px; padding: 0; margin: 0; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; animation: rt-reset-float 3.2s ease-in-out infinite; }
.rt-trunk-reset:focus { outline: none; }
.rt-trunk-reset:focus-visible { outline: 3px solid var(--tr-orange-soft); outline-offset: 2px; }
.rt-trunk-reset > .fa-ghost { display: block; font-size: 60px; line-height: 78px; filter: drop-shadow(0 0 10px rgba(199, 125, 255, .75)) drop-shadow(0 4px 6px rgba(0, 0, 0, .45)); transition: transform .2s; }
.rt-trunk-reset:hover > .fa-ghost, .rt-trunk-reset:focus-visible > .fa-ghost { transform: rotate(-8deg) scale(1.08); }
/* The start-over arrow rides the ghost's lower-right edge like a badge, clear of his face (Furi, 10-15). */
.rt-trunk-reset-icon { position: absolute; left: 78%; top: 80%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; display: grid; place-items: center; background: var(--tr-purple); color: #fff; font-size: 12px; box-shadow: 0 0 0 2px #fff, 0 0 10px rgba(199, 125, 255, .9); }
.rt-trunk-reset.is-casting > .fa-ghost { animation: rt-reset-cast 1.1s ease-in-out; }
.rt-trunk-reset.is-casting .rt-trunk-reset-icon { animation: rt-reset-spin .9s linear; }
body.rt-trunk-party .rt-trunk-reset { opacity: .35; pointer-events: none; }
.rt-spell-spark { position: absolute; z-index: 6; width: 14px; height: 14px; margin: -7px 0 0 -7px; pointer-events: none; filter: drop-shadow(0 0 5px #c77dff) drop-shadow(0 0 9px #b8ff8f); opacity: 0; animation: rt-spell-fly .9s cubic-bezier(.3, .1, .3, 1) forwards; }
.rt-spell-spark::before { content: ""; position: absolute; inset: 0; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.rt-spell-sweep { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(230, 200, 255, .32) 46%, rgba(184, 255, 143, .26) 54%, transparent 70%) 100% 0 / 260% 100% no-repeat; mix-blend-mode: screen; animation: rt-spell-sweep 1.1s ease-in-out forwards; }
.rt-trunk-bag.is-respawn svg, .rt-trunk-vial.is-respawn .rt-trunk-vial-glass { animation: rt-respawn .7s cubic-bezier(.22, 1.4, .36, 1) both; }
@keyframes rt-reset-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes rt-reset-cast { 0% { transform: rotate(0) scale(1); } 45% { transform: rotate(-360deg) scale(1.3); } 100% { transform: rotate(-360deg) scale(1); } }
@keyframes rt-reset-spin { to { transform: rotate(-720deg); } }
@keyframes rt-spell-fly { 0% { opacity: 0; transform: translate(0, 0) scale(.4) rotate(0deg); } 15% { opacity: 1; } 80% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1.2) rotate(180deg); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(2) rotate(240deg); } }
@keyframes rt-spell-sweep { from { background-position: 100% 0; opacity: 1; } 80% { opacity: 1; } to { background-position: 0 0; opacity: 0; } }
@keyframes rt-respawn { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); } }
/* A phone: the shelf leaves the right edge to the ghost, at the potions' level. */
@media (max-width: 640px) {
  .rt-trunk-lair-shelf { width: calc(100% - 70px); left: 2px; }
  .rt-trunk-reset { top: 0; right: 0; width: 60px; height: 60px; }
  .rt-trunk-reset > .fa-ghost { font-size: 46px; line-height: 60px; }
  .rt-trunk-reset-icon { width: 19px; height: 19px; margin: -9.5px 0 0 -9.5px; font-size: 9.5px; }
  .rt-trunk-lair-bags { top: 74px; }
}
/* ---- The party's guests answer a tap (FURIOPS-404): each does a party move on its own art, under its wander. ---- */
.rt-trunk-party-floor .rt-trunk-guest, .rt-trunk-party-floor .rt-trunk-dancer { pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* The three candy zombies dance over the guests, so a tap on one always reaches it. */
.rt-trunk-party-floor .rt-trunk-guest { z-index: 1; }
.rt-trunk-party-floor .rt-trunk-dancer { z-index: 2; }
.rt-trunk-guest.is-play > i, .rt-trunk-guest.is-play > img { animation: rt-guest-move .9s cubic-bezier(.3, 1.4, .5, 1); }
.rt-trunk-party-floor .rt-trunk-dancer.is-play .rt-trunk-dancer-body { animation: rt-dancer-move .9s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes rt-guest-move { 0% { transform: none; } 30% { transform: translateY(-26px) scale(1.25) rotate(-12deg); } 65% { transform: translateY(-8px) scale(1.1) rotate(200deg); } 100% { transform: rotate(360deg); } }
@keyframes rt-dancer-move { 0% { transform: none; } 35% { transform: translateY(-34px) rotate(-10deg) scale(1.15); } 70% { transform: translateY(-10px) rotate(360deg) scale(1.05); } 100% { transform: rotate(360deg); } }