/* V32 Splash Pass (M4): home-nav entry with a ready badge, and the pass dialog: XP bar, a horizontal strip of tiers with
   the free reward above the premium reward, collect-one and collect-all. Text never goes below 11px; the strip scrolls
   inside the dialog, never the page. */
.home-nav [data-home="pass"]{position:relative}
/* V32 (economy client): white 11px on #c8243a is 5.6:1 (#ec4d5f was 3.6:1); the Shop button's held-chest count reuses it */
.pass-ready-count{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#c8243a;color:#fff;font:900 11px/18px sans-serif;text-align:center;box-shadow:0 1px 0 #7d1322}
.pass-ready-count[hidden]{display:none}

.pass-dialog{width:min(1120px,calc(100vw - 26px));max-height:calc(100dvh - 26px);padding:20px 22px;overflow:hidden;display:none}
.pass-dialog[open]{display:flex;flex-direction:column}
.pass-shell{display:flex;flex-direction:column;gap:10px;min-height:0;flex:1}
.pass-head{display:flex;gap:18px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;padding-right:46px}
.pass-head h2{margin:6px 0 4px}
.pass-head .eyebrow{font-size:11px}
.pass-how{margin:0;color:#4d6f8c;font-size:12px;line-height:1.5}
.pass-how b{color:#235890}
.pass-level{display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:220px}
.pass-level strong{font:800 20px/1 'Baloo 2',sans-serif;color:#235890}
.pass-bar{display:block;width:220px;height:10px;border-radius:6px;background:#dae9f7;border:1px solid #a4c8e4;overflow:hidden}
.pass-bar>span{display:block;height:100%;width:0;background:linear-gradient(90deg,#3ea6ec,#397ed1);transition:width .4s ease-out}
.pass-level small{font-size:12px;font-weight:800;color:#2f6a97}

.pass-tracks{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;padding:4px 2px 10px;min-height:0;scroll-behavior:smooth}
.pass-rowheads{position:sticky;left:0;z-index:2;display:grid;grid-template-rows:22px 1fr 1fr;gap:6px;background:linear-gradient(90deg,#f6fbff 85%,#f6fbff00);padding-right:8px}
/* V32 (UI-05, QA L9): the sticky label column also covers the strip's own padding (2px to its left, 2-10px above and
   below), where the edges of scrolled cards showed to the left of FREE and PREMIUM; paint only, so no layout moves and
   the strip's clip trims the cover to its padding box */
.pass-rowheads{box-shadow:-4px 0 0 #f6fbff,-4px -10px 0 #f6fbff,-4px 10px 0 #f6fbff}
.pass-rowheads::before{content:''}
.pass-rowhead{display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;transform:rotate(180deg);font-size:12px;font-weight:900;letter-spacing:.8px;text-transform:uppercase;color:#48708f;border-radius:10px;background:#dae9f7;padding:6px 4px}
.pass-rowhead[data-row="premium"]{background:#f5e3b5;color:#7a5200}
.pass-rowhead[data-locked="true"]::after{content:' 🔒'}
.pass-tiers{display:flex;gap:8px;margin:0;padding:0;list-style:none}
.pass-tier{display:grid;grid-template-rows:22px 1fr 1fr;gap:6px;width:122px;flex:none}
.pass-tier-num{display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:#6f93b1;border-radius:11px}
.pass-tier[data-reached="true"] .pass-tier-num{background:#397ed1;color:#fff}
.pass-tier[data-next="true"] .pass-tier-num{background:#fff;color:#397ed1;box-shadow:inset 0 0 0 2px #397ed1}
.pass-reward{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:4px;min-height:112px;padding:8px 6px;border-radius:14px;border:2px solid #c3dcf0;background:#eef6fd;color:#27517a;text-align:center;min-width:0}
.pass-reward[data-track="premium"]{background:#fff8e6;border-color:#ecd49a}
.pass-reward[data-state="ready"]{border-color:#2fb46b;background:#ecfbf2;box-shadow:0 0 0 3px #2fb46b33;cursor:pointer}
.pass-reward[data-state="ready"]:hover{background:#dff7e9}
.pass-reward[data-state="claimed"]{opacity:.62}
.pass-reward[data-state="locked"],.pass-reward[data-state="premium"]{filter:saturate(.55)}
.pass-reward:disabled{cursor:default}
.pass-reward[aria-busy="true"]{opacity:.7}
.pass-reward-art{width:46px;height:46px;flex:none;border-radius:10px;object-fit:cover}
.pass-reward-art[data-art="coins"]{border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff1b8,#f5b92e 55%,#c98a12);box-shadow:inset 0 -3px 0 #a86f0c;width:34px;height:34px;margin-top:6px}
.pass-reward-art[data-art="balloon"]{width:32px;height:40px;border-radius:50% 50% 48% 48%;background:radial-gradient(circle at 35% 30%,#fff6d0,#f5b92e 45%,#b8860b);box-shadow:0 0 0 2px #fff,0 0 0 4px #f5b92e}
.pass-reward-text{display:flex;flex-direction:column;gap:1px;min-width:0;max-width:100%}
.pass-reward-text strong{font-size:14px;line-height:1.15;overflow-wrap:anywhere;color:#1f4d78}/* a global dialog strong rule is near white */
.pass-reward-text small{font-size:11px;line-height:1.2;color:#56768f}
.pass-reward[data-kind="outfit"],.pass-reward[data-kind="balloon"]{border-width:3px}
.pass-reward[data-kind="outfit"] .pass-reward-text strong,.pass-reward[data-kind="balloon"] .pass-reward-text strong{color:#7a5200}
.pass-reward-badge{font-size:11px;font-weight:900;border-radius:8px;padding:2px 7px;background:#dae9f7;color:#48708f}
.pass-reward[data-state="ready"] .pass-reward-badge{background:#2fb46b;color:#fff}
.pass-reward[data-state="claimed"] .pass-reward-badge{background:none;color:#2f8a57}
.pass-reward[data-state="premium"] .pass-reward-badge{background:#f5e3b5;color:#7a5200}
/* V32 (user economy decision 2026-10-01): premium levels pay Splash Drops (20/40/60/80/100) and a Splash Chest
   (10/30/50/70/90). The Drops art is the Shop's drop icon; the chest art is the approved closed-chest still. */
.pass-reward-art[data-art="drops"]{display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffffff,#d6f0fc 70%);box-shadow:inset 0 -3px 0 #a9d4ea}
.pass-reward-art[data-art="drops"] .shop-icon{width:30px;height:30px}
.pass-reward-art[data-art="chest"]{display:grid;place-items:center;border-radius:10px;overflow:hidden}
.pass-reward-art[data-art="chest"] .chest-still,.pass-reward-art[data-art="chest"] .chest-svg{width:100%;height:auto}
.pass-reward[data-kind="drops"] .pass-reward-text strong{color:#235890}
.pass-reward[data-kind="chest"] .pass-reward-text strong{color:#7a5200}
.pass-reward[data-kind="drops"],.pass-reward[data-kind="chest"]{border-width:3px}

.pass-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pass-status{margin:0;flex:1 1 260px;min-height:1.4em;font-size:12px;font-weight:800;color:#2f6a97}
.pass-status[data-kind="ok"]{color:#2f8a57}
.pass-status[data-kind="error"]{color:#b5283a}
.pass-status[data-kind="pending"]{color:#8a5a00}
.pass-premium-note{margin:0;flex:1 1 260px;font-size:12px;color:#7a5200}
.pass-premium-note .short{display:none}
.pass-premium-note[data-premium="true"]{color:#2f8a57;font-weight:800}
/* V32 (UI-06): the green "Collected ..." and "Premium track unlocked." lines at 5.9:1 (#2f8a57 measured 3.9-4.0:1 on
   the dialog, 11-12px bold) */
.pass-status[data-kind="ok"],.pass-premium-note[data-premium="true"]{color:#246b45}
.pass-collect-all{border-radius:14px;padding:10px 16px;font-size:13px;font-weight:900;background:#2fb46b;color:#fff;border:0;box-shadow:0 3px 0 #1f8a4f}
.pass-collect-all:disabled{background:#c7d6e3;color:#5e7890;box-shadow:none}
.pass-test-note{margin:0;font-size:11px;color:#6f93b1}

/* V32 (economy client): Premium in the footer. While the player can pay, a primary Unlock button (white on #7a5200,
   about 7:1); while the Splash Drops are short and Recharge is off, an honest info chip that opens the same sheet with
   the reason, never a primary call to action. */
.pass-premium{display:flex;align-items:center;gap:8px;flex:1 1 260px;min-width:0}
.pass-premium:empty{display:none}
.pass-unlock{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 14px;border:0;border-radius:14px;background:#7a5200;color:#fff;font:900 14px/1 'Nunito Sans',sans-serif;box-shadow:0 3px 0 #523700;cursor:pointer;white-space:nowrap}
.pass-unlock:hover{background:#8a5f05}
.pass-unlock .shop-icon,.pass-premium-chip .shop-icon{width:20px;height:20px}
.pass-unlock span{font:800 16px/1 'Baloo 2',sans-serif}
.pass-premium-chip{display:inline-flex;align-items:center;gap:5px;min-height:36px;padding:6px 12px;border:2px solid #ecd49a;border-radius:12px;background:#fff8e6;color:#6b4800;font:800 13px/1 'Nunito Sans',sans-serif;box-shadow:none;cursor:pointer;white-space:nowrap}
.pass-premium-chip span{font-weight:900}
.pass-premium-chip[data-premium="pending"]{color:#6b4800;font-weight:800}
.pass-premium-why{font-size:12px;line-height:1.35;color:#6b4800}
.pass-open-chest{min-height:44px;padding:8px 14px;border:2px solid #ecd49a;border-radius:14px;background:#fff8e6;color:#6b4800;font:900 14px/1 'Nunito Sans',sans-serif;box-shadow:0 3px 0 #c9a85a;cursor:pointer;white-space:nowrap}
.pass-open-chest[hidden]{display:none}
/* the page runs an older pass than the island server: one line and a Reload button above the strip */
.pass-stale{display:flex;align-items:center;gap:10px;margin:0;padding:6px 10px;border-radius:12px;background:#ffe7df;border:2px solid #ffc3ae;color:#86311a;font-size:13px;font-weight:800}
.pass-stale[hidden]{display:none}
.pass-dialog[data-stale="true"] .pass-reward{opacity:.55;filter:saturate(.3)}
.pass-reload{min-height:44px;padding:8px 14px;border:0;border-radius:12px;background:#2f6cc0;color:#fff;font:900 14px/1 'Nunito Sans',sans-serif;box-shadow:0 3px 0 #173f75;cursor:pointer}

/* The Premium unlock sheet, over the pass inside its dialog. It sets its own type sizes and colours: the dialog's global
   rules (strong near white, an 8px eyebrow, a 34px h2, pale 11px paragraphs) are not for a white sheet. */
.pass-sheet-layer{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:12px;background:#0b2a4573;border-radius:inherit}
.pass-sheet-layer[hidden]{display:none}
.pass-sheet{display:flex;flex-direction:column;gap:10px;width:min(460px,100%);max-height:100%;overflow:hidden;padding:16px 18px;border:3px solid #f5e3b5;border-radius:18px;background:#fff;color:#1f4d78;box-shadow:0 6px 0 #7a5200,0 18px 40px #03253a66;text-align:left}
.pass-sheet-copy{min-height:0;overflow-y:auto;overscroll-behavior:contain}
.pass-sheet strong,.pass-sheet b{color:inherit}
.pass-sheet-eyebrow{display:block;font-size:11px;font-weight:900;letter-spacing:1.5px;color:#7a5200}
.pass-sheet .pass-sheet-title{margin:2px 0 6px;font:800 26px/1.1 'Baloo 2',sans-serif;color:#1f4d78;letter-spacing:0}
.pass-sheet p{margin:6px 0;font-size:14px;line-height:1.4;color:#24506f}
.pass-sheet-list{margin:4px 0 6px;padding:0 0 0 18px;font-size:14px;line-height:1.35;color:#24506f}
.pass-sheet-list li{margin:0 0 3px;padding:0;color:#24506f}
.pass-sheet .pass-sheet-note{font-size:13px;font-weight:800;color:#6b4800}
.pass-sheet .pass-sheet-price,.pass-sheet .pass-sheet-spend{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;color:#1f4d78}
.pass-sheet-price .shop-icon,.pass-sheet-spend .shop-icon{width:26px;height:26px}
.pass-sheet-price strong,.pass-sheet-spend strong{font:800 24px/1 'Baloo 2',sans-serif;color:#0f5f92}
.pass-sheet .pass-sheet-balance{font-size:14px;font-weight:800}
.pass-sheet .pass-sheet-ready{font-size:13px;color:#24506f}
.pass-sheet .pass-sheet-shortfall,.pass-sheet .pass-sheet-error{flex-basis:100%;margin:0;padding:8px 12px;border-radius:10px;background:#ffe7df;border:2px solid #ffc3ae;color:#86311a;font-size:13px;font-weight:800;line-height:1.35}
.pass-sheet-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;flex:none}
.pass-primary,.pass-secondary{min-height:44px;min-width:88px;padding:8px 16px;border-radius:13px;font:900 14px/1 'Nunito Sans',sans-serif;cursor:pointer}
.pass-primary{border:0;background:#7a5200;color:#fff;box-shadow:0 3px 0 #523700}
.pass-primary:hover{background:#8a5f05}
.pass-primary[data-busy]{cursor:progress;background:#d9d4c1;color:#4f4a3c;box-shadow:0 3px 0 #a7a08a}
.pass-primary[aria-disabled="true"]:not([data-busy]){cursor:default}
.pass-secondary{border:2px solid #c3dcf0;background:#eef6fd;color:#1f4d78;box-shadow:0 3px 0 #a4c8e4}
.pass-secondary:disabled{opacity:.6;cursor:default}
.pass-dialog[data-sheet="open"] .pass-shell{filter:saturate(.8)}

/* phones in landscape: shorter cards, tighter header */
@media (max-height:480px){
 .pass-dialog{padding:12px 14px}
 .pass-head{gap:8px;padding-right:40px}
 .pass-head h2{font-size:20px;margin:2px 0}
 .pass-how{font-size:11px}
 .pass-level{min-width:0}
 .pass-bar{width:160px}
 .pass-tier{width:108px;grid-template-rows:20px 1fr 1fr;gap:4px}
 /* V32 (UI-05, QA M4): the tiers drop the global `dialog li` gap and indent (13px under every tier, 5px beside it): it
    cost the short cards their room and left the FREE/PREMIUM labels 6-13px out of line with their rows */
 .pass-tier{margin:0;padding:0}
 .pass-rowheads{grid-template-rows:20px 1fr 1fr;gap:4px}
 .pass-reward{min-height:84px;padding:5px 4px;gap:2px}
 .pass-reward-art{width:34px;height:34px}
 .pass-reward-art[data-art="coins"]{width:26px;height:26px;margin-top:2px}
 .pass-reward-art[data-art="balloon"]{width:24px;height:30px}
 .pass-reward-text strong{font-size:12px}
 /* V32 (UI-05, QA M4): a named prize (Tavi's outfit, his balloon) has a two-line name and a line under it, which with
    the badge ran up to 45px below the short card; its tier is wider and the words sit beside the picture, so name,
    line and badge stay inside the card. The coin cards keep their layout. */
 .pass-tier:has(>.pass-reward[data-kind="outfit"],>.pass-reward[data-kind="balloon"]){width:164px}
 .pass-reward[data-kind="outfit"],.pass-reward[data-kind="balloon"]{display:grid;grid-template:minmax(0,1fr) auto/auto minmax(0,1fr);align-items:center;gap:2px 6px;text-align:left}
 .pass-reward[data-kind="outfit"] .pass-reward-text,.pass-reward[data-kind="balloon"] .pass-reward-text{flex-direction:column;align-items:flex-start}
 .pass-reward[data-kind="outfit"] .pass-reward-badge,.pass-reward[data-kind="balloon"] .pass-reward-badge{grid-column:1/-1;justify-self:center}
 .pass-reward[data-kind="balloon"] .pass-reward-art{margin:0 4px}
 .pass-shell{gap:6px}
 .pass-test-note{display:none}
 .pass-head .eyebrow{display:none}
 .pass-tracks{flex:1 1 auto;padding:2px 2px 6px}
 /* V32 (UI-05, QA L9): on phones the labels sit flush with the strip's edge, so no strip is left beside them where a
    tap could reach a card hidden under them */
 .pass-tracks{padding-left:0}
 .pass-reward{min-height:70px}
 .pass-reward-badge{padding:1px 6px}
 .pass-foot{flex-wrap:nowrap;gap:8px}
 .pass-status{flex:1 1 auto;min-height:0}
 .pass-status:empty{display:none}
 .pass-premium-note{flex:1 1 auto;font-size:11px}
 .pass-premium-note .long{display:none}
 .pass-premium-note .short{display:inline}
 .pass-collect-all{padding:8px 12px;font-size:12px;white-space:nowrap}
 /* V32 (economy client, player critique): the Drops and chest prizes take the named prizes' wider tier with the words
    beside the picture, so title, line and the 14px Collect badge stay inside the short card at 667 x 375 */
 .pass-tier:has(>.pass-reward[data-kind="drops"],>.pass-reward[data-kind="chest"]){width:150px}
 .pass-reward[data-kind="drops"],.pass-reward[data-kind="chest"]{display:grid;grid-template:minmax(0,1fr) auto/auto minmax(0,1fr);align-items:center;gap:2px 6px;text-align:left}
 .pass-reward[data-kind="drops"] .pass-reward-text,.pass-reward[data-kind="chest"] .pass-reward-text{flex-direction:column;align-items:flex-start}
 .pass-reward[data-kind="drops"] .pass-reward-badge,.pass-reward[data-kind="chest"] .pass-reward-badge{grid-column:1/-1;justify-self:center}
 .pass-reward-art[data-art="drops"]{width:30px;height:30px}
 .pass-reward-art[data-art="drops"] .shop-icon{width:22px;height:22px}
 .pass-reward-art[data-art="chest"]{width:36px;height:32px}
 /* footer: Premium, Open chest and Collect all at the primary floor (14px, 44px); the chip's reason is in its sheet */
 .pass-premium{flex:0 1 auto}
 .pass-premium-why{display:none}
 .pass-unlock{padding:6px 10px;font-size:14px}
 .pass-unlock span{font-size:15px}
 .pass-premium-chip{min-height:36px;padding:4px 10px;font-size:12px}
 .pass-open-chest{padding:6px 10px}
 /* V32 (VC-1): while Open chest(s) shows after a collection, it takes the place of the "Premium unlocked." note (the
    premium cards already show it) and of an emptied Collect all ("Nothing to collect yet"), so the result line keeps
    the row: nothing overlaps and the tracks keep their height. The line wraps at 1.3 and stops at three lines (screen
    readers still get all of it from the live region). */
 .pass-foot:has(>.pass-open-chest:not([hidden])) .pass-premium:has(>.pass-premium-note[data-premium="true"]),
 .pass-foot:has(>.pass-open-chest:not([hidden]))>.pass-collect-all[data-empty="true"]{display:none}
 .pass-status{line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
 .pass-stale{font-size:12px;padding:3px 8px}
 /* the sheet: wider and tighter so the list, the balance and the actions fit 375px without scrolling */
 .pass-sheet-layer{padding:8px}
 .pass-sheet{width:min(600px,100%);gap:6px;padding:10px 14px}
 .pass-sheet .pass-sheet-title{font-size:18px;margin:0 0 2px}
 .pass-sheet p{font-size:12px;margin:3px 0;line-height:1.3}
 .pass-sheet-list{columns:2;column-gap:18px;margin:2px 0 4px;font-size:12px;line-height:1.3}
 .pass-sheet-list li{break-inside:avoid}
 .pass-sheet .pass-sheet-note,.pass-sheet .pass-sheet-ready{font-size:12px}
 .pass-sheet .pass-sheet-price,.pass-sheet .pass-sheet-spend{font-size:13px}
 .pass-sheet-price .shop-icon,.pass-sheet-spend .shop-icon{width:22px;height:22px}
 .pass-sheet-price strong,.pass-sheet-spend strong{font-size:19px}
 .pass-sheet .pass-sheet-balance{font-size:13px}
 .pass-sheet .pass-sheet-shortfall,.pass-sheet .pass-sheet-error{font-size:12px;padding:5px 10px}
 .pass-sheet-actions{gap:8px}
}