/* V32 home Splash Chest (user request 2026-10-01: "a chest icon onscreen homepage like Naraka: Bladepoint with vfx
   glowing around it"). The approved closed still (the Shop's crop of assets/chest-v32/chest-closed.png) with code-drawn
   treasure effects: a soft golden aura that pulses, light rays turning behind it, sparkles rising round it and a gentle
   bob. Held Splash Chests add the count and a stronger glow. Since the user's 2026-10-02 home steering the chest is the
   first item of the Chest + Pass group above the Casual and Ranked cards (.home-quick, home-quick-v32.css lays out the
   group, the item, its name plate and the art box size --hq-art); this sheet draws the chest inside its art box
   (.home-chest-icon). No z-index on purpose: its glow box (.home-chest-fx, a quarter of the art size round it) may reach
   under the Pass and the mode cards, which come later in the page and paint over it.
   Idle effects loop continuously while the home screen is active. Only transform and opacity animate, six layers
   (rays, aura, chest, shadow, two sparkle sprays). The loops pause while the page is hidden, a dialog is open or the
   home screen is away (data-paused). Reduced motion keeps a still glow with no animation. */
.home-chest{--hc-size:var(--hq-art,64px);--hc-dot-big:max(4px,calc(var(--hc-size)*.088));--hc-dot-small:max(3px,calc(var(--hc-size)*.063))}
.home-chest-icon{position:relative;width:var(--hc-size);height:var(--hc-size)}
.home-chest-icon>span,.home-chest-fx>span{position:absolute;pointer-events:none}
.home-chest-fx{inset:-25%}
/* Still glow for reduced motion. Persistent compositor layers preserve the art's sub-pixel edges when paused. */
.home-chest-rays{inset:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,#ffc23a00 0deg,#ffc94ef2 5deg,#ffc23a00 10deg,#ffc23a00 30deg);-webkit-mask:radial-gradient(closest-side,#000 24%,#000d 50%,#0000 100%);mask:radial-gradient(closest-side,#000 24%,#000d 50%,#0000 100%);opacity:.7;transform:rotate(8deg);will-change:transform}
.home-chest-aura{inset:12%;border-radius:50%;background:radial-gradient(closest-side,#fff6c8 0,#ffd54ff2 30%,#ffad1fcc 56%,#ff8f0059 78%,#ff8f0000 100%);opacity:.75;will-change:transform,opacity}
.home-chest-shadow{left:20%;right:20%;bottom:5%;height:12%;border-radius:50%;background:radial-gradient(closest-side,#0b2f3f70,#0b2f3f00)}
.home-chest-art{inset:6% 3% 10%;display:flex;align-items:center;justify-content:center;will-change:transform}
.home-chest-art .chest-still{width:100%;filter:drop-shadow(0 0 3px #ffe7a0) drop-shadow(0 3px 3px #0b2f3f59)}
.home-chest-art .chest-svg{width:100%;height:auto;animation:none}
.home-chest-sparkles{inset:-25%;font-size:var(--hc-size);display:none}
/* two sprays of sparkles (one animated layer each; was one layer per sparkle): 3 sparkles idle, 6 with held chests. A
   spray grows from half size about its bottom centre as it rises, so its sparkles fan out; it starts lower than the old
   single sparkles did, so it never rises past their old reach (the glow box). */
.home-chest-sparkles>i{--hc-dot:radial-gradient(circle,#fff 0 22%,#ffeaa8 42%,#ffeaa800 70%);position:absolute;left:0;right:0;bottom:20%;height:12%;opacity:0;transform-origin:50% 100%;background-repeat:no-repeat}
.home-chest-sparkles>i:nth-child(1){background-image:var(--hc-dot),var(--hc-dot);background-position:24% 100%,70% 40%;background-size:var(--hc-dot-big) var(--hc-dot-big)}
.home-chest-sparkles>i:nth-child(2){background-image:var(--hc-dot);background-position:46% 70%;background-size:var(--hc-dot-big) var(--hc-dot-big)}
.home-chest[data-held=true] .home-chest-sparkles>i:nth-child(1){background-image:var(--hc-dot),var(--hc-dot),var(--hc-dot);background-position:24% 100%,70% 40%,60% 0;background-size:var(--hc-dot-big) var(--hc-dot-big),var(--hc-dot-big) var(--hc-dot-big),var(--hc-dot-small) var(--hc-dot-small)}
.home-chest[data-held=true] .home-chest-sparkles>i:nth-child(2){background-image:var(--hc-dot),var(--hc-dot),var(--hc-dot);background-position:46% 70%,34% 15%,80% 95%;background-size:var(--hc-dot-big) var(--hc-dot-big),var(--hc-dot-small) var(--hc-dot-small),var(--hc-dot-small) var(--hc-dot-small)}
.home-chest-count{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#c8243a;color:#fff;font:900 12px/22px 'Nunito Sans',sans-serif;text-align:center;box-shadow:0 1px 0 #7d1322,0 0 0 2px #fff5d3;pointer-events:none}
.home-chest-count[hidden]{display:none}
/* held chests: brighter rays, a fuller aura (its still size a little larger), all six sparkles, a brighter chest */
.home-chest[data-held=true] .home-chest-rays{opacity:1}
.home-chest[data-held=true] .home-chest-aura{inset:2%;transform:scale(1.05)}
.home-chest[data-held=true] .home-chest-art .chest-still{filter:drop-shadow(0 0 2px #fff6d0) drop-shadow(0 0 6px #ffd76a) drop-shadow(0 3px 3px #0b2f3f59)}
@media(hover:hover){.home-chest:hover .home-chest-art .chest-still{filter:drop-shadow(0 0 2px #fff6d0) drop-shadow(0 0 7px #ffd76a) drop-shadow(0 3px 3px #0b2f3f59)}}
/* Seamless loops: rays turn a whole number of their 30deg repeats; the bob and aura return to their starting pose.
   Sparkles alternate on two layers, avoiding additional DOM or a JavaScript frame loop. */
@media(prefers-reduced-motion:no-preference){
 .home-chest[data-fx=on] .home-chest-rays{animation:hc-rays 6s linear infinite}
 .home-chest[data-fx=on][data-held=true] .home-chest-rays{animation-name:hc-rays-held}
 .home-chest[data-fx=on] .home-chest-aura{animation:hc-pulse 6s ease-in-out infinite}
 .home-chest[data-fx=on][data-held=true] .home-chest-aura{animation-name:hc-pulse-held}
 .home-chest[data-fx=on] .home-chest-shadow{animation:hc-shadow 3s ease-in-out infinite}
 .home-chest[data-fx=on] .home-chest-art{animation:hc-bob 3s ease-in-out infinite}
 .home-chest[data-fx=on] .home-chest-sparkles{display:block}
 .home-chest[data-fx=on] .home-chest-sparkles>i{animation:hc-rise 3s ease-out infinite}
 .home-chest[data-fx=on] .home-chest-sparkles>i:nth-child(2){animation-delay:-1.5s}
}
@keyframes hc-rays{from{transform:rotate(8deg)}to{transform:rotate(98deg)}}
@keyframes hc-rays-held{from{transform:rotate(8deg)}to{transform:rotate(188deg)}}
@keyframes hc-pulse{0%,100%{transform:scale(1);opacity:.75}25%{transform:scale(1.05);opacity:.95}62.5%{transform:scale(.88);opacity:.6}}
@keyframes hc-pulse-held{0%,100%{transform:scale(1.05);opacity:.75}14%{transform:scale(1.1);opacity:1}36%{transform:scale(.94);opacity:.85}58%{transform:scale(1.1);opacity:1}80%{transform:scale(.94);opacity:.85}}
@keyframes hc-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6%)}}
@keyframes hc-shadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.82);opacity:.65}}
@keyframes hc-rise{0%{transform:translateY(0) scale(.5);opacity:0}18%{opacity:1}70%{opacity:.8}100%{transform:translateY(-.78em) scale(1);opacity:0}}
/* paused: a hidden page, an open dialog or the home screen away; portrait phones behind the turn-your-device gate */
.home-chest[data-paused=true] :is(.home-chest-rays,.home-chest-aura,.home-chest-shadow,.home-chest-art,.home-chest-sparkles>i){animation-play-state:paused}
@media(pointer:coarse) and (orientation:portrait){.home-chest :is(.home-chest-rays,.home-chest-aura,.home-chest-shadow,.home-chest-art,.home-chest-sparkles>i){animation-play-state:paused}}
/* the group's chips (phones in landscape, narrow windows, a compact spot; home-quick-v32.css): the count a little
   smaller, out on the chip's corner, clear of the name */
@media(max-height:520px),(max-width:760px){
 .home-chest-count{top:-8px;right:-8px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;font-size:11px;line-height:20px}
}
.home-quick[data-fit=compact] .home-chest-count{top:-8px;right:-8px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;font-size:11px;line-height:20px}
/* HC-TAP-1 (verify-C): the bottom row's containers are transparent boxes (.home-bottom spans the chat bar and the menu;
   .home-nav is as tall as its tallest button); their empty space lets the pointer through to the island, as
   .home-party-seats already does; the chat bar and every menu button keep their own pointer events. */
.home-bottom,.home-bottom .home-nav{pointer-events:none}
.home-bottom>*,.home-bottom .home-nav>*{pointer-events:auto}