/* V32 home Chest + Pass group (user 2026-10-02 home steering: "Move Chest AND Pass together to the UPPER RIGHT directly
   ABOVE Casual/Ranked cards, replacing the current island chest and bottom Pass location"). One tidy group, right-aligned
   with the mode cards and its bottom a fixed gap above Casual and Ranked at every layout (the same right edge and the
   same top as .home-modes in lobbies.css). Order: the Splash Chest (home-chest-v32.mjs/.css: its glow windows and held
   count), then the Splash Pass (its ready-rewards badge from pass-v32.mjs). Both open what they opened before (the Shop's
   Splash Chest tab; the Pass screen).
   Desktop (the PC layout keeps every other element where it was): free-standing icons, a name plate under each.
   Phones in landscape: one 36px chip each (the 32px target floor); narrow desktop windows (the tall layout): 44px chips;
   only there the mode cards start lower to make room. home-quick-v32.mjs guards the spot (data-guard); a desktop spot
   that does not fit gets 44px chips (data-fit=compact).
   The Pass icon has one swap point, PASS_ICON_SRC in home-quick-v32.mjs: an image there replaces the drawn icon inside
   the same art box (data-art=image), so root's coming 3D Pass icon (media-production/pass-icon-v1) changes no layout. */
.home-quick{--hq-art:64px;position:absolute;right:28px;bottom:calc(83% + 18px);display:flex;align-items:flex-end;gap:14px;pointer-events:none}
.home-quick-item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0;padding:0;min-width:calc(var(--hq-art) + 16px);border:0;border-radius:18px;background:none;color:#fff;font:inherit;text-align:center;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .12s ease}
.home-quick-item[hidden]{display:none}
.home-quick-item:focus-visible{outline:3px solid #fff6c9;outline-offset:3px;box-shadow:0 0 0 6px #0f4f7a}
.home-quick-item:active{transform:scale(.95)}
.home-quick-art{position:relative;display:block;flex:none;width:var(--hq-art);height:var(--hq-art);pointer-events:none}
/* the name plate: white on deep blue (7.8:1 at its lightest stop, 6.2:1 hovered), a gold rim like the chest's glow */
.home-quick-label{position:relative;display:block;margin-top:-6px;padding:2px 10px 3px;border:2px solid #ffe7a0;border-radius:10px;background:linear-gradient(#1d548c,#123a66);box-shadow:0 2px 0 #0b2a4a99;color:#fff;font:900 12px/1.15 'Nunito Sans',sans-serif;letter-spacing:.4px;white-space:nowrap;pointer-events:none}
@media(hover:hover){.home-quick-item:hover .home-quick-label{background:linear-gradient(#2463a3,#164777)}}
/* the drawn Pass icon until the 3D one comes: the menu's ticket on a gold medallion (the glyph 4.5:1 or more against
   every stop of the medallion) */
.home-pass-art{display:grid;place-items:center;color:#462803}
.home-pass-art::before{content:'';position:absolute;inset:9%;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fffbe6 0,#ffe08a 30%,#f7b733 64%,#d98a14 100%);box-shadow:inset 0 -3px 0 #b8680d73,inset 0 2px 0 #fff8,0 0 0 3px #fff3c4,0 0 12px #ffd76a99,0 4px 8px #0b2a4a66}
.home-pass-art>i[data-icon]{position:relative;display:grid;place-items:center;width:100%;height:100%;margin:0;color:inherit;filter:none}
.home-pass-art>i[data-icon] svg{width:calc(var(--hq-art)*.6);height:calc(var(--hq-art)*.6);stroke-width:2.2}
/* the swap point's image (data-art=image): it fills the art box, the medallion and drawn icon step aside */
.home-pass-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.home-pass[data-art=image] .home-pass-art::before,.home-pass[data-art=image] .home-pass-art>i[data-icon]{display:none}
/* the Pass's ready-rewards badge (pass-v32.mjs) matches the chest's count in the group */
.home-quick .pass-ready-count{top:-4px;right:-4px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;font:900 12px/22px 'Nunito Sans',sans-serif;box-shadow:0 1px 0 #7d1322,0 0 0 2px #fff5d3}
@media(prefers-reduced-motion:reduce){.home-quick-item{transition:none}.home-quick-item:active{transform:none}}
/* large desktops: larger icons (the space above the cards is half as tall again) */
@media(min-width:1500px){.home-quick{right:40px}}
@media(min-width:1500px) and (min-height:900px){.home-quick{--hq-art:76px}}
@media(max-width:1100px){.home-quick{right:20px;bottom:calc(82% + 18px)}}
/* chips: phones in landscape and narrow windows; 36px (the 32px phone target floor) */
@media(max-height:520px) and (min-width:650px),(max-width:760px){
 .home-quick{--hq-art:30px;gap:8px}
 .home-quick-item{flex-direction:row;gap:5px;height:36px;min-width:0;padding:0 14px 0 1px;border:2px solid #ffe7a0;border-radius:18px;background:linear-gradient(#1d548cf2,#123a66f2);box-shadow:0 3px 0 #0b2a4a99}
 .home-quick-label{margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;font-size:12px}
 .home-quick .pass-ready-count{top:-8px;right:-8px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;font-size:11px;line-height:20px}
}
/* the tall layout (narrow desktop windows; portrait phones wait behind the turn-your-device gate): 44px chips, the
   desktop target floor */
@media(max-width:760px) and (min-height:521px){.home-quick{--hq-art:38px}.home-quick-item{height:44px;border-radius:22px}}
/* a desktop spot the guard found too small (data-fit=compact): 44px chips; phones are chips already, so there the
   attribute only reports */
@media(min-width:761px) and (min-height:521px){
 .home-quick[data-fit=compact]{--hq-art:38px;gap:8px}
 .home-quick[data-fit=compact] .home-quick-item{flex-direction:row;gap:5px;height:44px;min-width:0;padding:0 14px 0 2px;border:2px solid #ffe7a0;border-radius:22px;background:linear-gradient(#1d548cf2,#123a66f2);box-shadow:0 3px 0 #0b2a4a99}
 .home-quick[data-fit=compact] .home-quick-label{margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;font-size:13px}
 .home-quick[data-fit=compact] .pass-ready-count{top:-8px;right:-8px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;font-size:11px;line-height:20px}
}
/* phones in landscape: the chips in the party bar's row, the mode cards 39px lower (their top was 20px) */
@media(max-height:520px) and (min-width:650px){
 .home-quick{top:10px;bottom:auto;right:14px}
 .home-modes{top:59px}
}
/* the tall layout: the chips between the stage and the cards; the cards and the bottom row 54px lower */
@media(max-width:760px) and (min-height:521px){
 .home-quick{top:410px;bottom:auto;right:16px}
 .home-modes{top:464px}
 .home-bottom{margin-top:792px}
}
@media(max-width:649px) and (max-height:520px){
 .home-quick{top:452px;bottom:auto;right:16px}
 .home-modes{top:498px}
 .home-bottom{margin-top:826px}
}