.halloween-sound{position:fixed;right:24px;bottom:24px;z-index:80;display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 10px 8px 12px;border:1px solid #ffffff26;border-radius:22px;background:linear-gradient(130deg,#342318e8,#171719f5 70%);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#f5f2ec;box-shadow:0 8px 32px #0005,inset 0 1px 0 #ffffff0b;font-family:Inter,sans-serif;text-align:left;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.halloween-sound[hidden]{display:none}
.halloween-sound:hover{border-color:#e9a35f80;box-shadow:0 8px 32px #0005,0 0 24px #ed7b1814}
.halloween-pumpkin{display:block;width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 0 7px #ff8c0033);flex:none}
.halloween-player-copy{display:grid;gap:4px;padding-right:4px}
.halloween-player-title{font-size:12px;font-weight:600;line-height:1.2;letter-spacing:.01em}
.halloween-status{font-size:10px;line-height:1.2;color:#a6a29e}
.halloween-sound-state{display:grid;place-items:center;width:34px;height:34px;border:1px solid #ffffff14;border-radius:50%;background:#ffffff08;color:#bdb9b4}
.halloween-sound.is-playing .halloween-sound-state{background:#f6a04c18;border-color:#f6a04c30;color:#ffc58a}
.halloween-sound.is-playing .halloween-status{color:#dfb791}
.halloween-sound .halloween-speaker-waves{display:none}
.halloween-sound.is-playing .halloween-speaker-waves{display:block}
.halloween-sound.is-playing .halloween-speaker-muted{display:none}
.halloween-sound.is-playing .halloween-pumpkin{animation:pumpkin-spin 9s linear infinite}
.halloween-sound:focus-visible{outline:3px solid #ffd389;outline-offset:4px}
@keyframes pumpkin-spin{to{transform:rotate(360deg)}}
@media(max-width:640px){.halloween-sound{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));min-height:58px;padding:7px 8px 7px 10px;gap:9px;border-radius:20px}.halloween-pumpkin{width:38px;height:38px}.halloween-sound-state{width:32px;height:32px}}
@media(prefers-reduced-motion:reduce){.halloween-sound{transition:none}.halloween-sound.is-playing .halloween-pumpkin{animation:none}}

.halloween-price-card{position:relative}
.halloween-card-decoration{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;user-select:none}
.halloween-web{position:absolute;right:0;top:0;width:114px;height:114px;color:#d4c5b3;opacity:.16}
@media(max-width:640px){.halloween-web{width:76px;height:76px;opacity:.13}}

/* Compact pumpkin control, matching the original player's footprint. */
.halloween-sound{width:58px;height:58px;min-height:0;padding:8px;gap:0;border-radius:50%;justify-content:center}
.halloween-player-copy{display:none}
.halloween-sound .halloween-pumpkin{width:40px;height:40px}
.halloween-sound-state{position:absolute;right:-3px;bottom:-1px;width:22px;height:22px;background:#211b17;border-color:#8e694440}
.halloween-sound-state svg{width:13px;height:13px}
@media(max-width:640px){.halloween-sound{width:52px;height:52px;min-height:0;padding:7px;gap:0;border-radius:50%}.halloween-sound .halloween-pumpkin{width:36px;height:36px}.halloween-sound-state{width:20px;height:20px}}
/* Smaller artwork with an explicit playing-state ring. */
.halloween-sound .halloween-pumpkin{width:30px;height:30px}
.halloween-sound.is-playing{outline:2px solid #ffd18a;outline-offset:3px}
@media(max-width:640px){.halloween-sound .halloween-pumpkin{width:27px;height:27px}}

.halloween-crawler{position:absolute;right:15px;top:65px;width:44px;height:44px;animation:spider-crawl-edge 26s linear infinite;will-change:top,transform}
.halloween-real-spider{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(1px 2px 2px #0009);animation:spider-crawl-step .28s ease-in-out infinite alternate}
@keyframes spider-crawl-edge{0%,3%{top:65px;transform:rotate(180deg)}44%,47%{top:calc(100% - 64px);transform:rotate(180deg)}50%,53%{top:calc(100% - 64px);transform:rotate(0deg)}94%,97%{top:65px;transform:rotate(0deg)}100%{top:65px;transform:rotate(180deg)}}
@keyframes spider-crawl-step{from{transform:translateX(-.6px) rotate(-2deg) scaleY(.98)}to{transform:translateX(.6px) rotate(2deg) scaleY(1.02)}}
@media(max-width:640px){.halloween-crawler{right:1px;width:28px;height:28px}}
@media(prefers-reduced-motion:reduce){.halloween-crawler,.halloween-real-spider{animation:none;will-change:auto}}
.halloween-sound{transform-origin:bottom right;transition:transform .25s ease,border-color .2s,box-shadow .2s}
.halloween-sound.is-playing .halloween-pumpkin{width:22.5px;height:22.5px}
@media(max-width:640px){.halloween-sound.is-playing .halloween-pumpkin{width:20.25px;height:20.25px}}
@media(prefers-reduced-motion:reduce){.halloween-sound{transition:none}}

/* Subtle hanging spider and audio-linked atmosphere. */
.halloween-spider{position:absolute;right:20px;top:-55px;width:32px;height:120px;animation:spider-descend 14s ease-in-out infinite}
@keyframes spider-descend{0%,100%{transform:translateY(0)}35%,55%{transform:translateY(46px)}75%{transform:translateY(20px)}}
.llwrap.ai-mode .ai-price-panel.halloween-is-playing{border-color:#ffd18a;box-shadow:0 0 0 1px #ffd18a45,0 0 28px #ffb65a0d}
.halloween-card-decoration::before,.halloween-card-decoration::after{content:'';position:absolute;left:-25%;bottom:-45px;width:150%;height:135px;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 20% 70%,#cfccd322,transparent 38%),radial-gradient(ellipse at 64% 80%,#cfccd326,transparent 43%),radial-gradient(ellipse at 90% 70%,#c3bfcd20,transparent 35%);filter:blur(12px);transition:opacity .6s;animation:halloween-fog-drift 18s ease-in-out infinite alternate;animation-play-state:paused}
.halloween-card-decoration::after{bottom:-25px;height:110px;animation-duration:25s;animation-direction:alternate-reverse}
.halloween-is-playing .halloween-card-decoration::before,.halloween-is-playing .halloween-card-decoration::after{opacity:1;animation-play-state:running}
@keyframes halloween-fog-drift{from{transform:translateX(-8%) scaleY(.85)}to{transform:translateX(8%) scaleY(1.15)}}
@media(max-width:640px){.halloween-spider{right:5px;width:23px;height:100px;top:-45px}.halloween-card-decoration::before,.halloween-card-decoration::after{height:95px}}
@media(prefers-reduced-motion:reduce){.halloween-spider{animation:none;transform:translateY(18px)}.halloween-card-decoration::before,.halloween-card-decoration::after{animation:none;transition:none}}
/* Keep the seasonal card clear of fog. */
.halloween-card-decoration::before,.halloween-card-decoration::after{content:none;animation:none}
.llwrap.ai-mode .ai-price-panel.halloween-price-card{transition:border-color .2s ease,box-shadow .2s ease}
@media(hover:hover){.llwrap.ai-mode .ai-price-panel.halloween-price-card:hover{border-color:#ffd18a;box-shadow:0 0 0 1px #ffd18a45,0 0 28px #ffb65a0d}}
.llwrap.ai-mode .ai-price-panel.halloween-price-card:focus-within{border-color:#ffd18a;box-shadow:0 0 0 1px #ffd18a45,0 0 28px #ffb65a0d}
@media(prefers-reduced-motion:reduce){.llwrap.ai-mode .ai-price-panel.halloween-price-card{transition:none}}
.halloween-sound .halloween-pumpkin{width:36px;height:36px;transition:width .35s ease,height .35s ease}
.halloween-sound.is-playing .halloween-pumpkin{width:27px;height:27px}
@media(max-width:640px){.halloween-sound .halloween-pumpkin{width:32.4px;height:32.4px}.halloween-sound.is-playing .halloween-pumpkin{width:24.3px;height:24.3px}}
@media(prefers-reduced-motion:reduce){.halloween-sound .halloween-pumpkin{transition:none}}
