/* menu-delight.js: openings, level up, button personality, living sky, Season Pass road. */
.md-layer{position:fixed;inset:0;width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:none;overflow:visible;pointer-events:none;color:inherit}
.md-layer>span{position:fixed;pointer-events:none}

/* Play portal */
.md-portal{margin:0;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,#fff6d6 0 8%,#c9a2ff55 22%,transparent 62%),repeating-conic-gradient(from 0deg,#b48cff 0 14deg,#f4c95d 14deg 22deg,transparent 22deg 40deg);mask:radial-gradient(circle,transparent 0 14%,#000 30%,#000 52%,transparent 70%);-webkit-mask:radial-gradient(circle,transparent 0 14%,#000 30%,#000 52%,transparent 70%);filter:drop-shadow(0 0 12px #b48cff)}

/* Level up */
.md-drop{width:8px;height:10px;margin:-5px -4px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 35% 30%,#fff,#d9b8ff 40%,#7b4bd1);box-shadow:0 0 8px #b48cff}
.md-ring{translate:-50% -50%;border-radius:50%;border:3px solid #f4dc9a;box-shadow:0 0 18px #f4c95d,inset 0 0 12px #f4c95d}
.md-level-tag{padding:3px 10px;border-radius:999px;background:linear-gradient(#f6e2a6,#d7b469);color:#3a2a14;font:800 14px "Trebuchet MS",system-ui,sans-serif;white-space:nowrap;box-shadow:0 2px 10px #0008,0 0 14px #f4c95d88}

/* Buttons with personality: the squish is in menu-delight.js (WAAPI, so it never overrides a button's own transitions). */
#lobby .wallet-shop{transform-origin:50% 0}
/* Ready chests give a little rattle every few seconds. */
#chest-action.ready img,#phone-rewards-open.claim-notice img{animation:md-rattle 4.2s ease-in-out infinite;transform-origin:50% 90%}
@keyframes md-rattle{0%,82%,100%{rotate:0deg;translate:0 0}85%{rotate:-7deg;translate:0 -2px}88%{rotate:6deg}91%{rotate:-5deg;translate:0 -1px}94%{rotate:3deg}97%{rotate:-1deg}}

/* Living sky, behind the home menu. */
.md-sky{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;transition:background 2s}
.md-sky[data-period=dawn]{background:radial-gradient(ellipse 90% 55% at 70% 0,#ffb48a33,transparent 70%),linear-gradient(#ff9fb31a,transparent 60%)}
.md-sky[data-period=day]{background:radial-gradient(ellipse 80% 50% at 50% 0,#bfe1ff1f,transparent 70%)}
.md-sky[data-period=dusk]{background:radial-gradient(ellipse 90% 55% at 30% 0,#ff9a5c2e,transparent 70%),linear-gradient(#c45ba61c,transparent 65%)}
.md-sky[data-period=night]{background:radial-gradient(ellipse 80% 50% at 50% 0,#2a3a8a2e,transparent 70%),linear-gradient(#05061866,transparent 70%)}
.md-motes>i{position:absolute;left:var(--x);top:var(--y);pointer-events:none;scale:var(--size)}
.md-firefly{width:5px;height:5px;border-radius:50%;background:#fff6b0;box-shadow:0 0 8px 3px #f4dc6a99;animation:md-wander var(--d) ease-in-out var(--delay) infinite alternate,md-blink 2.6s ease-in-out var(--delay) infinite}
@keyframes md-wander{0%{translate:0 0}33%{translate:calc(var(--drift)*.5) -30px}66%{translate:var(--drift) 18px}100%{translate:calc(var(--drift)*-.4) -12px}}
@keyframes md-blink{0%,100%{opacity:.15}45%,60%{opacity:1}}
.md-snow,.md-petals,.md-leaves,.md-seeds,.md-spooky{top:-6%!important;animation:md-fall var(--d) linear var(--delay) infinite}
@keyframes md-fall{0%{translate:0 0;rotate:0deg;opacity:0}8%{opacity:1}92%{opacity:1}100%{translate:var(--drift) 112vh;rotate:540deg;opacity:0}}
.md-snow{width:6px;height:6px;border-radius:50%;background:#f4f7ff;box-shadow:0 0 6px #fff}
.md-petals{width:9px;height:6px;border-radius:70% 0 70% 0;background:linear-gradient(135deg,#ffd4ea,#f39ac8)}
.md-leaves{width:11px;height:7px;border-radius:0 80% 0 80%;background:linear-gradient(135deg,#f4c95d,#c9702f)}
.md-seeds{width:3px;height:10px;border-radius:2px;background:linear-gradient(#fffbe8,#d8cfae);box-shadow:0 -3px 6px 2px #ffffffaa}
.md-spooky{width:16px;height:7px;background:#1a1028;clip-path:polygon(0 30%,20% 0,35% 40%,50% 20%,65% 40%,80% 0,100% 30%,75% 100%,50% 70%,25% 100%);animation-name:md-flap-fly!important;animation-timing-function:ease-in-out!important}
@keyframes md-flap-fly{0%{translate:-10vw 20vh;scale:1 1;opacity:0}10%{opacity:.9}50%{translate:calc(50vw + var(--drift)) 8vh;scale:1 .5}90%{opacity:.9}100%{translate:110vw 26vh;scale:1 1;opacity:0}}
body.watching-background .md-sky{display:none}

/* Season Pass road: reached tiers glow; the sweep lights them one by one. */
#season-pass-dialog .pass-tier.md-reached>h3{color:#f6e2a6;text-shadow:0 0 8px #f4c95d99}
#season-pass-dialog .pass-tier.md-lit>h3::after{content:"";display:block;width:60%;height:2px;margin:3px auto 0;border-radius:2px;background:linear-gradient(90deg,transparent,#f4dc9a,transparent)}
.md-pass-spark{width:6px;height:6px;margin:-3px;border-radius:50%;background:#fff3c4;box-shadow:0 0 8px #f4c95d}

html[data-motion=gentle] #chest-action.ready img,html[data-motion=gentle] #phone-rewards-open.claim-notice img{animation:none}
/* Level orb pokes: bubbles rise from the glass; dizzy stars circle it after the secret overflow. */
.md-bubble{width:6px;height:6px;margin:-3px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#e2cdff 45%,#8d63d9 100%);box-shadow:0 0 6px #c7a6ff}
.md-dizzy{margin:-8px -6px;font:700 13px/1 Georgia,serif;color:#ffe7a8;text-shadow:0 0 6px #f4c95d,0 1px 0 #3a2410}
.md-bubble{width:9px;height:9px;margin:-4.5px}
.md-geyser{width:12px;height:15px;margin:-7.5px -6px}
.md-dizzy{margin:-11px -9px;font-size:20px}
/* Wardrobe doors: the menu stays visible behind the opening doors, then the usual dim fades in. */
#hub-dialog[data-md-doors]::backdrop{animation:md-backdrop-in .5s ease-in both}
@keyframes md-backdrop-in{0%,40%{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}}