/* Moonlit collection folio — motion stays behind the task. */
body{background:#111b31;isolation:isolate}
body::before{content:"";position:fixed;inset:-15%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 18% 20%,#665b9d66,transparent 45%),radial-gradient(ellipse at 85% 65%,#9d654d33,transparent 42%),radial-gradient(ellipse at 45% 85%,#345b8666,transparent 45%);animation:moon-current 24s ease-in-out infinite alternate;will-change:transform}
.panel{box-shadow:0 18px 48px #030b1b20,inset 0 1px 0 #ffffff;border-color:#dce2ef}
.mix-stage{position:relative;overflow:hidden;background:linear-gradient(125deg,#fffafb,#f6f8ff 52%,#fffcf3)}
.mix-stage::before{content:"";position:absolute;width:380px;height:380px;right:-210px;top:-220px;border:1px solid #b6a0cc44;border-radius:50%;box-shadow:0 0 0 38px #b6a0cc0a,0 0 0 76px #b6a0cc08;pointer-events:none}
.theme-option{background:linear-gradient(120deg,#fffafa,#f5e8ef);border-color:#d7b8c7;box-shadow:inset 0 1px 0 #fff,0 10px 28px #7334480c}
.theme-option.gold{background:linear-gradient(120deg,#fffef8,#f5ecd4);border-color:#dfcca2}
.theme-option::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,#ffffff80 48%,transparent 65%);transform:translateX(-120%);animation:moon-sheen 12s ease-in-out infinite}
.theme-option>*{position:relative;z-index:1}
.theme-option .theme-creature{position:absolute}
.theme-option .theme-seal{position:absolute}
.theme-creature img{animation:moon-float 7s ease-in-out infinite}
.hero{background:linear-gradient(150deg,#ffffff,#f6f8fd);border-top:2px solid #b1bee5}
.pool-badge{background:linear-gradient(145deg,#fff,#e7ebf6);box-shadow:0 6px 18px #26396212,inset 0 1px 0 #fff}
.bar>i{background:linear-gradient(100deg,#6d79c7,#aaa6e2,#d1b789);position:relative;overflow:hidden}
.bar>i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#ffffff80,transparent);animation:moon-sheen 5s ease-in-out infinite}
.pet.has-avatar{transform-style:preserve-3d;transition:box-shadow .25s,border-color .25s,transform .25s;box-shadow:inset 0 1px 0 #ffffffb0,0 3px 8px #29395306}
.pet.moon-red.got{background:linear-gradient(125deg,#faedf1,#ecd6e1);border-color:#bd859b}
.pet.moon-gold.got{background:linear-gradient(125deg,#fff9e8,#eee0b9);border-color:#c5aa68}
.pet.has-avatar:focus-visible,.branch:focus-visible{outline:3px solid #7c88c7;outline-offset:4px}
.branch{transition:transform .25s,box-shadow .25s,border-color .25s}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .pet.has-avatar:hover{transform:perspective(700px) translateY(-3px) rotateX(4deg);box-shadow:0 9px 19px #27395315}
 .branch:hover{transform:translateY(-3px);box-shadow:0 10px 24px #27395310;border-color:#b5bfdb}
}
@keyframes moon-current{from{transform:translate3d(-2%,-1%,0) rotate(-5deg)}to{transform:translate3d(3%,2%,0) rotate(6deg)}}
@keyframes moon-sheen{0%,65%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes moon-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2deg)}}
@media(max-width:600px){body::before{animation:none}.theme-creature img{animation-duration:9s}}
@media(prefers-reduced-motion:reduce){body::before,.theme-option::after,.bar>i::after,.theme-creature img{animation:none;will-change:auto}.theme-option::after,.bar>i::after{display:none}.pet.has-avatar,.branch{transition:none}}