/* Purple night, pumpkin light. Motion stays decorative and respects reduced motion. */
html:root{--paper:#332044;--ink:#fff3dd;--muted:#d0bfdc;--line:#69497f;--white:#442d58;--yellow:#ffa54f;--soft:#654272;background:#21132e;color-scheme:dark}
body{background:radial-gradient(ellipse at 80% 6%,#61417e55,transparent 48%),var(--paper);box-shadow:0 0 100px #10081755}
.header{position:relative;z-index:2}.brand,.language{background:#3d2852;border-color:#77528c}.brand:hover,.language:hover,.secondary:hover{background:#513567;border-color:#bd8adb}.brand .home-cube path:first-child{fill:#f5ac62}.brand .home-cube{color:#f6bb73}
.language select option{background:#3d2852;color:#fff3dd}
.primary{background:#ffab55;color:#321d3c;box-shadow:0 4px 0 #bd6c35}.primary:hover{background:#ffbf75;transform:translateY(-2px)}.primary:active{transform:translateY(1px);box-shadow:0 1px 0 #bd6c35}.secondary{background:#57396f;border-color:#9870ae;color:#fff3dd}
.home{position:relative}.home .eyebrow{display:inline-block;padding:8px 14px;border:1px solid #b67d5370;border-radius:30px;background:#54324d;color:#ffc285;font-size:.68rem;letter-spacing:.05em;margin-bottom:17px}
.title-logo{filter:none;width:100%;height:auto;max-width:430px;max-height:170px}
.home .intro{color:#e1d2e9;max-width:365px}.home .under-cta{margin-top:20px}
.parade{position:relative;margin-top:35px;margin-bottom:24px;isolation:isolate}
.parade:before,.parade:after{content:'';position:absolute;pointer-events:none;background:url('assets/halloween/bat.svg?v=premium-1') center/contain no-repeat;width:48px;height:32px;top:-18px;left:1px;animation:bat-drift 7s ease-in-out infinite;z-index:-1}
.parade:after{left:auto;right:8px;top:-10px;width:35px;animation-delay:-3s}
.parade .parcel-toy{width:46%;margin:0 -6.5%;padding:0;flex:none;position:relative;background:transparent;border-radius:26px;isolation:isolate;cursor:pointer;transition:filter .2s}
.parade .parcel-toy .soul-art{width:100%;margin:0;animation:parcel-float 5s ease-in-out infinite;filter:drop-shadow(0 15px 9px #160d2450)}
.parade .parcel-toy:nth-child(2){z-index:1}.parade .parcel-toy:nth-child(2) .soul-art{animation-delay:-1.8s}.parade .parcel-toy:nth-child(3) .soul-art{animation-delay:-3.2s}
.parcel-toy:hover .soul-art,.parcel-toy:focus-visible .soul-art{filter:drop-shadow(0 6px 14px #eeb26160)}
.parcel-toy.is-playing .soul-art{animation-play-state:paused}.parcel-reaction{position:absolute;top:3%;left:50%;transform:translate(-50%,5px) rotate(-7deg);padding:4px 10px;border-radius:20px;background:#ffe0a0;color:#49263f;font-size:.8rem;font-weight:700;opacity:0;transition:opacity .16s,transform .16s;pointer-events:none;z-index:3;white-space:nowrap}
.is-playing .parcel-reaction{opacity:1;transform:translate(-50%,-6px) rotate(-7deg)}
.play-hint{font-size:.75rem;color:#e8c398;margin:-8px auto 23px;line-height:1.5}
.magic-burst{position:absolute;inset:0;pointer-events:none}.magic-burst i{position:absolute;left:50%;top:50%;color:#ffdb8b;font-style:normal;font-size:16px;animation:magic-pop .8s ease-out forwards;--a:calc(var(--spark)*60deg)}
@keyframes magic-pop{0%{opacity:0;transform:rotate(var(--a)) translateY(-25px) rotate(calc(-1*var(--a))) scale(.3)}25%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(-90px) rotate(calc(-1*var(--a))) scale(.8)}}
.home:before{content:'✦';position:absolute;top:183px;left:24px;color:#ffb25d;text-shadow:0 0 14px #ffae65;animation:spark-glow 4s ease-in-out infinite;pointer-events:none}
.home:after{content:'✧';position:absolute;top:220px;right:22px;color:#ffd294;font-size:22px;animation:spark-glow 4s ease-in-out -2s infinite;pointer-events:none}
.progress .active i{background:#ffa54f;border-color:#ffa54f;color:#321d3c}.progress .active{color:#ffd4a0}
.tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}.tab{font-size:.72rem;min-width:0;padding:8px 2px;overflow-wrap:anywhere}.tab.active{background:#f5a453;color:#34213e}.tab:hover:not(.active){background:#5b3b73}
.stage,.stack-board{background-color:#6c4886;background-image:url('assets/halloween/bat.svg?v=premium-1'),url('assets/halloween/pumpkin.svg?v=premium-1'),radial-gradient(ellipse at 50% 60%,#9c73b3aa,transparent 70%);background-size:48px auto,34px auto,auto;background-position:right 16px top 30px,left 17px bottom 17px,center;background-repeat:no-repeat;border-color:#9468ab}
.stage{position:sticky;top:8px;z-index:3;height:clamp(190px,32svh,270px);box-shadow:0 7px 25px #1c0e3038}
#live-pet{max-width:275px;width:min(100%,32svh)}
.stage-label{color:#f6e8ff;font-size:.6rem;top:11px}.stage-bottom{color:#f1e6f7;font-size:.6rem;bottom:7px;background:#5b387588;border-radius:8px;padding:2px 6px;max-width:84%;margin:auto}
.tools{background:#442d58;border-color:#73528b}.option{background:#53396a;color:#fff1dd}.option.active{background:#7a514b;border-color:#ffb364;box-shadow:inset 0 0 0 1px #ffb364}.option:hover{border-color:#c69ddd}
.tools .option .soul-art{height:auto;aspect-ratio:1;max-width:135px;width:100%}.tools .options{max-height:290px}.option>span:last-child{display:block;padding:0 2px;line-height:1.5;font-size:.72rem}.fixed-color-note{margin:10px 0 0;font-size:.72rem}
.tools input[type=range]{accent-color:#ffab55}.tools input[type=range]:focus-visible{outline-offset:1px}.tone-panel{padding-bottom:4px}.palette .swatch.chosen:before{box-shadow:0 0 0 2px #442d58,0 0 0 3.5px #ffbf77}
.choice-row{display:flex;gap:5px;margin-top:8px}.choice{flex:1;min-height:36px;padding:6px 5px;background:#513567;border:1px solid #79548f;border-radius:10px;font-size:.7rem;line-height:1.4}.choice.active{background:#78547f;border-color:#ffc38a;color:#ffdbb3}.choice:hover{background:#684678}.rarity-row .choice{font-size:.65rem}.tint-row{margin-top:5px}.face-modes{margin-bottom:4px}
.pet-art{background:none}.soul-art{display:grid;place-items:center;position:relative}.soul-art img{display:block;width:100%;height:100%;object-fit:contain}.art-loading{font-size:.65rem;color:var(--muted);text-align:center;max-width:90%}.art-error{font-size:.7rem;padding:10px;text-align:center;background:#5a364c;border-radius:12px}
.soul-art:not(.ready):before{content:'';width:23px;height:23px;border:2px solid #9771ac;border-top-color:#ffb66b;border-radius:50%;animation:load-spin 1s linear infinite;position:absolute;top:25%}.art-error:before{display:none}
.name-field{background:#442d58;color:#fff3dd;border-color:#89639d}.name-field:focus{border-color:#ffb56c}.name-field::placeholder{color:#bca6cd}
.game-section{border-color:#79538d}.game-copy .eyebrow{color:#ffbe7e}.social img{filter:brightness(0) invert(1);opacity:.87}.social a:hover{background:#67447e}.add-outline{border-color:#e3b1ef;color:#ffdaae}
.game-photo{background:#d8c9e8}.pet-actions{background:#442d58;border-color:#a57eb5}.pet-actions button{color:#fff3dd}.toast{background:#21142e;color:#fff4dd;border:1px solid #9767ad}.skip-link{background:#21142e}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,.language:focus-within{outline-color:#ffb967}
@keyframes parcel-float{0%,100%{transform:translateY(5px) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}
@keyframes bat-drift{0%,100%{transform:translate(0,0) rotate(-10deg)}50%{transform:translate(7px,-7px) rotate(7deg)}}
@keyframes spark-glow{0%,100%{opacity:.45;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}
@keyframes load-spin{to{transform:rotate(360deg)}}
@media(max-width:380px){.tab{font-size:.64rem}.tabs{gap:1px}.tab .glyph svg{width:22px;height:22px}.tools{padding:12px}.choice{font-size:.63rem}.rarity-row .choice{font-size:.6rem}.tools .options{max-height:235px}.stage{top:4px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Faces retain a pale drawing surface for readable dark ink previews. */
.option .pet-art:has(svg){background:#eedfcb;border-radius:10px;margin-bottom:5px}
#live-pet .soul-art{transform:scale(1.16)}
/* Keep the keyboard shortcut hidden until it receives focus. */
.skip-link:not(:focus){clip-path:inset(50%);pointer-events:none}
.game-photo{background:transparent;box-shadow:0 16px 36px #180d2840;border-radius:18px}

/* Keep selection on the parcel silhouette, with actions clear of the stack. */
.selectable-stack .stack-hit.selected{background:transparent}
.selectable-stack .stack-hit .pet-art{transition:filter .18s ease}
.selectable-stack .stack-hit.selected .pet-art{filter:drop-shadow(2px 0 0 #ffda8c) drop-shadow(-2px 0 0 #ffda8c) drop-shadow(0 2px 0 #ffda8c) drop-shadow(0 -2px 0 #ffda8c) drop-shadow(0 0 7px #ffc36b55)}
.selectable-stack .contact-stack{overflow:clip;overflow-clip-margin:8px}
.stack-selection-slot{width:min(100%,420px);min-height:66px;margin-top:18px;position:relative;z-index:10}
.stack-selection-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px 8px 14px;border:1px solid #c8a0df66;border-radius:20px;background:#352343;box-shadow:0 5px 16px #21142e25;text-align:left}
.stack-selection-name{display:flex;align-items:center;gap:8px;color:#fff0cd;min-width:0;font-size:.9rem}
.stack-selection-name>svg{width:17px;height:17px;color:#ffcd7d;flex-shrink:0}
.stack-selection-name small{display:block;color:#c9b3d9;font-size:.7rem;line-height:1.3}
.stack-selection-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px;margin-left:auto}
.stack-selection-actions button{min-height:44px;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:13px;padding:8px 12px;font-size:.8rem;transition:background .15s ease,transform .15s ease}
.stack-selection-actions svg{width:18px;height:18px}
.stack-selection-actions .stack-edit{background:#ffce88;color:#352343}
.stack-selection-actions .stack-edit:hover{background:#ffdfab;transform:translateY(-1px)}
.stack-selection-actions .stack-remove{width:44px;padding:10px;color:#dcc4e9;background:#ffffff0a}
.stack-selection-actions .stack-remove:hover:not(:disabled){color:#ffd4c8;background:#a6536240}
.stack-selection-actions button:disabled{opacity:.3;cursor:not-allowed}
@media(prefers-reduced-motion:reduce){.selectable-stack .stack-hit .pet-art,.stack-selection-actions button{transition:none}}

.stack-selection-actions .stack-up{background:#644878;color:#fff0cd;border:1px solid #a57bbb}
.stack-selection-actions .stack-up:hover{background:#79588f;transform:translateY(-1px)}