@import url('./mythic-chest-v1.css');
/* Version 1 Shop and Recharge (M1). Same surface language as Profile and Collection (mint panels, turquoise header,
   raised cream buttons, gold primary). Phone floors (Fable UI-05): information text >= 11px, prices and primary
   buttons >= 14px, spend/confirm/close targets >= 44x44px, other controls >= 32x32px with 8px gaps. */
.shop-dialog{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:inherit;overflow:hidden;color:#184e68;background:linear-gradient(100deg,#c8f5ee 0%,#d6f5ea 62%,#c6eff1 100%);box-shadow:none;z-index:6;font:600 13px/1.35 'Nunito Sans','Nunito',sans-serif}
.shop-dialog[open]{display:flex;flex-direction:column}
.shop-dialog button{font-family:inherit;cursor:pointer}
.shop-dialog :focus-visible{outline:3px solid #ffb938;outline-offset:2px}
.shop-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.shop-top{flex:none;display:flex;align-items:center;gap:14px;min-height:68px;padding:10px 20px;border-bottom:2px solid #d4ffec;background:linear-gradient(110deg,#53c8dbef,#80dddcef);box-shadow:0 3px 0 #1d899322}
.shop-top h1{font:800 31px/1 'Baloo 2',sans-serif;margin:0;letter-spacing:-.6px;color:#164e70;text-shadow:0 2px 0 #d1fff2}
.shop-wallet{display:flex;align-items:center;gap:8px;margin-left:auto;min-width:0}
.shop-balance{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:3px 12px 3px 5px;border:2px solid #fff6d0;border-radius:999px;background:linear-gradient(#fffbe8,#fde9a9);color:#5b4312;box-shadow:0 3px 0 #c79d4c;white-space:nowrap}
.shop-balance strong{font:800 19px/1 'Baloo 2',sans-serif}
.shop-balance small{font-size:11px;font-weight:800;opacity:.85}
.shop-balance-drops{border-color:#effcff;background:linear-gradient(#ecfcff,#b8ecff);color:#134a6e;box-shadow:0 3px 0 #4a9cc4}
.shop-balance-drops:hover{background:linear-gradient(#fff,#cff4ff)}
.shop-balance-drops b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#2f8fd6;color:#fff;font:900 18px/1 'Nunito Sans',sans-serif;box-shadow:0 2px 0 #1b5f95}
.shop-balance[data-currency=sparkle]{border-color:#fbefff;background:linear-gradient(#fdf4ff,#efd6ff);color:#56296f;box-shadow:0 3px 0 #a574c9}
.shop-icon{width:28px;height:28px;flex:none;overflow:visible}
.shop-icon-coins circle{fill:#f7c948;stroke:#b8862b;stroke-width:1.5}.shop-icon-coins path{fill:#fff6cf;stroke:#c4912e;stroke-width:.8}
.shop-icon-drops path:first-child{fill:#39b5f0;stroke:#1b6fa8;stroke-width:1.3}.shop-icon-drops .shine{fill:none;stroke:#e9fbff;stroke-width:1.7;stroke-linecap:round}
.shop-icon-sparkle path{fill:#c07ef2;stroke:#7d3fb3;stroke-width:1}.shop-icon-sparkle .small{fill:#f6d4ff}
.shop-back{flex:none;display:inline-flex;align-items:center;gap:6px;min-width:44px;min-height:44px;padding:6px 14px;border:2px solid #b4ebff;border-radius:12px;background:linear-gradient(#5ca9d7,#327db6);color:#fff;font:900 14px/1 'Nunito Sans',sans-serif;box-shadow:0 3px 0 #265c95}
.shop-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}

.shop-tabs{flex:none;display:flex;gap:8px;padding:12px 20px 8px;overflow-x:auto;scrollbar-width:none}
.shop-tabs::-webkit-scrollbar{display:none}
.shop-tabs button{flex:none;min-height:42px;padding:8px 18px;border:2px solid #eafff5;border-radius:12px;background:#cff9f1;color:#26647a;font:900 14px/1 'Nunito Sans',sans-serif;box-shadow:0 3px 0 #4399ae}
.shop-tabs button[aria-selected=true]{color:#72511a;border-color:#fff8d6;background:linear-gradient(#fff2ad,#ffd878);box-shadow:0 3px 0 #ba9046}
.shop-tabs button[data-shop-tab=recharge]{background:linear-gradient(#e5f9ff,#bfeaff);color:#155078;box-shadow:0 3px 0 #4a9cc4}
.shop-tabs button[data-shop-tab=recharge][aria-selected=true]{background:linear-gradient(#fff2ad,#ffd878);color:#72511a;box-shadow:0 3px 0 #ba9046}
.shop-banner{flex:none;margin:0 20px 6px;padding:10px 14px;border-radius:12px;background:#fff1c2;color:#6b4a0f;font-weight:800;font-size:13px;border:2px solid #ffe08a}

.shop-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 20px 28px;scroll-padding:12px}
.shop-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin:4px 0 14px}
.shop-heading small{display:block;font-size:11px;font-weight:900;letter-spacing:1.6px;color:#3f8c93}
.shop-heading h2{margin:2px 0 0;font:800 28px/1.05 'Baloo 2',sans-serif;color:#16506e}
.shop-heading p{margin:0;max-width:520px;font-size:13px;color:#2e6879;text-align:right}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:18px}
.shop-card{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;padding:10px 10px 12px;border:3px solid #d4ece0;border-radius:20px;background:linear-gradient(160deg,#fcffea,#d3eee4);box-shadow:0 5px 0 #79b9bb}
.shop-card[data-tier=legendary]{border-color:#f3d98e;background:linear-gradient(160deg,#fffaf0,#f7e8c8);box-shadow:0 5px 0 #c9a55a}
.shop-card[data-state=owned]{border-color:#9fe1cf}
.shop-card h3{margin:0;font:800 19px/1.1 'Baloo 2',sans-serif;color:#17506c}
.shop-card-meta{margin:0;font-size:12px;line-height:1.3;color:#2d6677}
.shop-card-alt{color:#6a4c9c;font-weight:800}
.shop-tier{font-size:11px;font-weight:900;letter-spacing:1.1px;color:#46838a}
.shop-card-foot{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:auto}
.shop-price{display:inline-flex;align-items:center;gap:5px;padding:4px 10px 4px 4px;border-radius:999px;background:#fffdf1;border:2px solid #f3e3a9;color:#5b4312}
.shop-price strong{font:800 18px/1 'Baloo 2',sans-serif}
.shop-price .shop-icon{width:24px;height:24px}
.shop-price[data-currency=drops]{background:#f0fbff;border-color:#bfe7fb;color:#134a6e}
.shop-buy,.shop-primary{min-width:84px;min-height:44px;margin-left:auto;padding:8px 16px;border:2px solid #fff3c9;border-radius:13px;background:linear-gradient(#ffd97a,#f7a93b);color:#5b3208;font:900 15px/1 'Nunito Sans',sans-serif;box-shadow:0 4px 0 #bf7a26,0 6px 10px #9a5c1030}
.shop-buy:hover,.shop-primary:hover{background:linear-gradient(#ffe39a,#fbb551)}
.shop-buy:disabled,.shop-primary:disabled{cursor:not-allowed;background:linear-gradient(#f0ede0,#d9d4c1);color:#6c6656;border-color:#fbf8ee;box-shadow:0 3px 0 #a7a08a}
.shop-owned{display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:4px 12px;border-radius:999px;background:#d8fbef;color:#18644f;font-weight:900;font-size:14px;border:2px solid #aeeed9}
.shop-owned svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.shop-source{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:#4c5f73;line-height:1.25}
.shop-source svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2}
.shop-note{flex-basis:100%;margin:0;font-size:12px;font-weight:800;color:#8a5a12}
.shop-stars{display:flex;align-items:center;gap:3px;margin:0}
.shop-stars span svg{width:22px;height:22px;fill:#d9d3c3;stroke:#a89c7c;stroke-width:1.2}
.shop-stars span[data-lit=true] svg{fill:#ffcf3f;stroke:#b8841d}
.shop-stars small{margin-left:6px;font-size:12px;font-weight:800;color:#6d5320}
.shop-hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.shop-hero-chips button{min-height:36px;min-width:64px;padding:6px 12px;border:2px solid #eafff5;border-radius:12px;background:#f6fff7;color:#285f73;font:900 13px/1 'Nunito Sans',sans-serif;box-shadow:0 3px 0 #6fb1b8}
.shop-hero-chips button[aria-pressed=true]{background:linear-gradient(#5ed8cc,#39bdb3);color:#073a3d;border-color:#dafff8;box-shadow:0 3px 0 #22817c}
.shop-balloon-art{display:grid;place-items:center;aspect-ratio:1;border-radius:16px;background:radial-gradient(circle at 50% 40%,#ffffff,#bfeee9 60%,#86d2d8);overflow:hidden}
.shop-balloon-art[data-tier=legendary]{background:radial-gradient(circle at 50% 40%,#fffbe9,#f4dfb0 58%,#caa7ea)}
.shop-balloon-art img{width:82%;height:82%;object-fit:contain;filter:drop-shadow(0 6px 6px #1a4d5a40)}
.shop-balloon-original{width:52%;aspect-ratio:.82;border-radius:50% 50% 48% 48%;background:radial-gradient(circle at 38% 30%,#b4fff7,#26cce9 45%,#0095ca);box-shadow:inset -6px -8px 0 #0a7fb055}
.shop-trail-preview{width:100%;aspect-ratio:16/9;border-radius:14px;background:#163c50;display:block}

.recharge-status{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;margin:0 0 14px;padding:12px 16px;border-radius:14px;border:2px solid #ffd98a;background:linear-gradient(#fff8dc,#ffecb7);color:#5f4209;font-size:14px}
.recharge-status strong{font-weight:900}
.recharge-balance{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;padding:6px 16px 6px 8px;border-radius:999px;background:#effbff;border:2px solid #bfe7fb;color:#134a6e;font-weight:800;font-size:14px}
.recharge-balance strong{font:800 22px/1 'Baloo 2',sans-serif}
.recharge-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.recharge-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 14px 14px;border:3px solid #cdeefb;border-radius:22px;background:linear-gradient(170deg,#f5fdff,#d6f1fb);box-shadow:0 5px 0 #6cb6d4;text-align:center}
.recharge-card[data-size="3"]{border-color:#f3d98e;background:linear-gradient(170deg,#fffaf0,#f7e7c3);box-shadow:0 5px 0 #c9a55a}
.recharge-art{display:flex;align-items:end;justify-content:center;min-height:74px}
.recharge-art .shop-icon{width:46px;height:46px;margin:0 -8px;filter:drop-shadow(0 4px 3px #0f4a7040)}
.recharge-card[data-size="0"] .recharge-art .shop-icon{width:58px;height:58px}
.recharge-card h3{margin:0;font:800 18px/1.1 'Baloo 2',sans-serif;color:#15506f}
.recharge-card h3 strong{display:block;font-size:30px;color:#0f6fa8}
.recharge-price{margin:0;font:800 24px/1 'Baloo 2',sans-serif;color:#264d62}
.recharge-price small{font:800 12px 'Nunito Sans',sans-serif;color:#557a8a}
.recharge-select{min-height:44px;width:100%;border:2px solid #effcff;border-radius:13px;background:linear-gradient(#e9fbff,#b9e8fb);color:#124d73;font:900 15px/1 'Nunito Sans',sans-serif;box-shadow:0 4px 0 #4a9cc4}
.recharge-footnote{margin:16px 0 0;font-size:12px;color:#3f6f7d}
.recharge-unavailable{padding:10px 12px;border-radius:12px;background:#fff3cf;border:2px solid #ffdf8e;color:#5f4209;font-size:13px}

.shop-sheet-layer{position:absolute;inset:0;z-index:12;display:grid;place-items:center;padding:12px;background:#0b36507a;backdrop-filter:blur(2px)}
.shop-sheet-layer[hidden]{display:none}
.shop-sheet{position:relative;display:grid;grid-template-columns:minmax(120px,170px) 1fr;grid-template-areas:"art copy" "art actions";gap:10px 20px;width:min(640px,100%);max-height:100%;overflow:auto;padding:22px 22px 20px;border:3px solid #e9fffa;border-radius:24px;background:linear-gradient(160deg,#fbfff4,#d6f3ea);box-shadow:0 8px 0 #2d7f93,0 24px 50px #03253a66}
.shop-sheet-art{grid-area:art;align-self:start}
.shop-sheet-art.recharge-art{align-items:center;min-height:160px;border-radius:18px;background:radial-gradient(circle at 50% 40%,#fff,#c6ecfb 70%)}
.shop-sheet-art.recharge-art .shop-icon{width:96px;height:96px}
.shop-sheet-trail{display:grid;place-items:center;aspect-ratio:1;border-radius:18px;background:#163c50}
.shop-sheet-trail .shop-icon{width:70px;height:70px}
.shop-sheet-copy{grid-area:copy;min-width:0;padding-right:36px}
.shop-sheet-copy h2{margin:2px 0 8px;font:800 26px/1.08 'Baloo 2',sans-serif;color:#15506f}
.shop-sheet-copy p{margin:6px 0;font-size:14px;color:#285f71}
.shop-eyebrow{font-size:11px;font-weight:900;letter-spacing:1.5px;color:#3f8c93}
.shop-sheet-price .shop-price strong{font-size:22px}
.shop-sheet-spend{display:flex;align-items:center;gap:8px;font-size:15px!important}
.shop-sheet-spend strong{font:800 24px/1 'Baloo 2',sans-serif;color:#0f6fa8}
.shop-shortfall,.shop-error{padding:8px 12px;border-radius:10px;background:#ffe7df;border:2px solid #ffc3ae;color:#86311a!important;font-weight:800}
.shop-sheet-actions{grid-area:actions;display:flex;flex-wrap:wrap;align-items:center;gap:10px;align-self:end}
.shop-sheet-actions .shop-primary{margin-left:0}
.shop-sheet-actions button:not(.shop-primary){min-height:44px;min-width:88px;padding:8px 16px;border:2px solid #eafff5;border-radius:13px;background:linear-gradient(#e9fff7,#b4ecdf);color:#22576c;font:900 15px/1 'Nunito Sans',sans-serif;box-shadow:0 3px 0 #4b99a8}
.shop-sheet-close{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:44px;height:44px;border:2px solid #d9fff4;border-radius:12px;background:#effff9;color:#245f72;box-shadow:0 3px 0 #6fb1b8}
.shop-sheet-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}

/* Phone landscape: compact header, horizontal cards, same floors. */
@media (max-height:600px){
 .shop-dialog{font-size:12px}
 .shop-top{min-height:0;gap:8px;padding:6px 10px}
 .shop-top h1{font-size:22px}
 .shop-wallet{gap:6px}
 .shop-balance{min-height:40px;padding:2px 8px 2px 3px;gap:4px}
 .shop-balance small{display:none}
 .shop-balance strong{font-size:16px}
 .shop-icon{width:22px;height:22px}
 .shop-balance-drops{min-height:44px}
 .shop-balance-drops b{width:20px;height:20px;font-size:15px}
 .shop-back{padding:4px 10px}
 .shop-back span{display:none}
 .shop-tabs{gap:8px;padding:6px 10px 4px}
 .shop-tabs button{min-height:36px;padding:6px 12px;font-size:14px}
 .shop-banner{margin:0 10px 4px;padding:6px 10px}
 .shop-body{padding:4px 10px 18px}
 .shop-heading{margin:2px 0 8px}
 .shop-heading h2{font-size:21px}
 .shop-heading p{display:none}
 .shop-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
 .shop-card{display:grid;grid-template-columns:86px 1fr;grid-auto-rows:min-content;column-gap:10px;row-gap:4px;padding:8px;border-radius:16px}
 .shop-card>.character-card-art,.shop-card>.shop-balloon-art,.shop-card>.shop-trail-preview{grid-row:1 / span 6;align-self:start}
 .shop-card>.shop-trail-preview{width:86px;aspect-ratio:1;object-fit:cover}
 .shop-card>.character-card-art .character-card-name{font-size:14px}
 .shop-card>.character-card-art .character-card-subtitle{font-size:11px}
 .shop-card>.character-card-art .character-card-stamp{transform:scale(.8);transform-origin:top center}
 .shop-card h3{font-size:16px}
 .shop-card-foot{grid-column:2}
 .shop-buy,.shop-primary{min-width:72px;font-size:14px}
 .recharge-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
 .recharge-card{padding:10px}
 .recharge-art{min-height:48px}
 .recharge-art .shop-icon{width:32px;height:32px}
 .recharge-card h3 strong{font-size:24px}
 .recharge-status{padding:8px 12px;font-size:13px}
 .shop-sheet{grid-template-columns:96px 1fr;padding:14px 14px 12px;gap:8px 12px}
 .shop-sheet-copy h2{font-size:20px}
 .shop-sheet-copy p{font-size:13px;margin:4px 0}
 .shop-sheet-art.recharge-art{min-height:96px}
 .shop-sheet-art.recharge-art .shop-icon{width:60px;height:60px}
}
@media (max-height:600px) and (max-width:700px){
 .shop-grid{grid-template-columns:1fr 1fr}
 .shop-card{grid-template-columns:72px 1fr}
 .shop-card>.shop-trail-preview{width:72px}
 .shop-hero-chips button{min-width:56px;padding:6px 8px}
}
@media (prefers-reduced-motion:reduce){.shop-dialog *{transition:none!important;animation:none!important}}

/* Locked heroes in the home and room character pickers (ENT-03): price badge, softened art, still focusable. */
#home-character-grid>button[data-character-id],#room-character-grid>button[data-character-id]{position:relative}
#home-character-grid>button[data-locked=true] .character-card-art,#room-character-grid>button[data-locked=true] img{filter:grayscale(.6) brightness(.93)}
.hero-lock-badge{position:absolute;top:8px;right:8px;z-index:4;display:inline-flex;align-items:center;gap:4px;padding:3px 9px 3px 4px;border-radius:999px;background:linear-gradient(#fffbe8,#fde9a9);border:2px solid #fff6d0;box-shadow:0 2px 0 #c79d4c;color:#5b4312;font:800 13px/1 'Baloo 2',sans-serif;pointer-events:none}
.hero-lock-badge .shop-icon{width:18px;height:18px}

/* The home screen colours <strong>/<b> for its own cards; inside the Shop every emphasis keeps the local text colour. */
.shop-dialog strong,.shop-dialog b{color:inherit}
.shop-price strong{color:#5b4312}.shop-price[data-currency=drops] strong{color:#134a6e}
.recharge-balance strong{color:#0f6fa8}
/* Shared card component inside the Shop: keep its labels at the 11px information floor on phones. */
.shop-card .character-card-stamp-label,.shop-sheet .character-card-stamp-label{font-size:11px}
.shop-card .character-card-subtitle,.shop-sheet .character-card-subtitle{font-size:11px}
@media (max-height:600px){.shop-card>.character-card-art .character-card-stamp{transform:none}}

/* ---- Root RECHARGE-VISUAL-01 ---- */
/* Explicit foreground colours everywhere in the Shop: nothing inherits the home screen's light-on-dark text. */
.shop-dialog,.shop-dialog p,.shop-dialog span,.shop-dialog small,.shop-dialog li{color:#1d5268}
.shop-dialog h1,.shop-dialog h2,.shop-dialog h3{color:#15506f}
.shop-balance,.shop-balance strong,.shop-balance small{color:#5b4312}
.shop-balance-drops,.shop-balance-drops strong,.shop-balance-drops small{color:#134a6e}
.shop-balance[data-currency=sparkle],.shop-balance[data-currency=sparkle] strong,.shop-balance[data-currency=sparkle] small{color:#56296f}
.shop-balance-drops b{color:#fff}
.recharge-status,.recharge-status strong,.recharge-status span,.recharge-unavailable,.recharge-unavailable strong{color:#5f4209}
.shop-heading small,.shop-eyebrow{color:#2f7f86}
.shop-card-alt{color:#5d3f8f}
.shop-note{color:#7a4d0c}
.shop-shortfall,.shop-error{color:#86311a}
.shop-owned,.shop-owned svg{color:#18644f}
.shop-back,.shop-back span{color:#fff}
.shop-buy,.shop-primary{color:#5b3208}
.shop-buy:disabled,.shop-primary:disabled{color:#6c6656}
.character-card-art .character-card-name{color:#fffbed}.character-card-art .character-card-subtitle{color:#d7f4f4}
/* Recharge: a deliberate, centred four-pack grid on desktop. */
.recharge-status{margin:0 auto 14px;max-width:1120px}
.recharge-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1120px;margin:0 auto}
.recharge-card{padding:18px 16px 16px}
.recharge-footnote{max-width:1120px;margin:12px auto 0;text-align:center}
.recharge-account-note{margin-top:4px;font-size:12px;opacity:.85}
/* Phones: the tab names the section, so headings go; Recharge shows its status line and the full pack row at once. */
@media (max-height:600px){
 .shop-heading{display:none}
 .shop-hero-chips{margin-bottom:10px}
 .recharge-status{margin:2px 0 8px;padding:6px 10px;font-size:12px;border-radius:10px;max-width:none}
 .recharge-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:none}
 .recharge-card{gap:4px;padding:8px 6px 8px;border-radius:16px;border-width:2px;box-shadow:0 3px 0 #6cb6d4}
 .recharge-card[data-size="3"]{box-shadow:0 3px 0 #c9a55a}
 .recharge-art{min-height:26px}
 .recharge-art .shop-icon,.recharge-card[data-size="0"] .recharge-art .shop-icon{width:24px;height:24px;margin:0 -5px}
 .recharge-card h3{font-size:13px}
 .recharge-card h3 strong{font-size:20px}
 .recharge-price{font-size:18px}
 .recharge-price small{font-size:11px}
 .recharge-select{min-height:44px;font-size:14px;padding:6px 4px}
 .recharge-footnote{margin-top:8px;font-size:11px}
}
.shop-dialog .shop-owned,.shop-dialog .shop-owned svg{color:#18644f}
.shop-dialog .shop-source{color:#4c5f73}
.shop-dialog .shop-note{color:#7a4d0c}
.shop-dialog .shop-card-alt{color:#5d3f8f}
.shop-dialog .shop-tier{color:#3b7a82}
.shop-dialog .shop-price,.shop-dialog .shop-price strong{color:#5b4312}
.shop-dialog .shop-price[data-currency=drops],.shop-dialog .shop-price[data-currency=drops] strong{color:#134a6e}
.shop-dialog .shop-stars small{color:#6d5320}
.shop-dialog .recharge-price,.shop-dialog .recharge-price small{color:#264d62}
.shop-dialog .recharge-card h3 strong{color:#0f6fa8}
.shop-dialog .shop-heading small,.shop-dialog .shop-eyebrow{color:#2f7f86}
.shop-dialog .shop-balance-drops b{color:#fff}
.shop-dialog .character-card-art .character-card-name{color:#fffbed}
.shop-dialog .character-card-art .character-card-subtitle{color:#d7f4f4}
.shop-dialog .character-card-art .character-card-stamp-label{color:var(--stamp-ink)}
@media (max-height:390px){
 .shop-tabs{padding-top:4px;padding-bottom:2px}
 .recharge-status{margin:0 0 6px;padding:4px 10px}
 .recharge-card{gap:2px;padding:6px 6px 6px}
 .recharge-art{min-height:22px}
 .recharge-card h3 strong{font-size:19px}
}

/* ---- Narrow portrait (root RECHARGE-VISUAL-01 portrait follow-up, 390x844): header wraps, wallet gets its own row,
   two-column grids, stacked sheets. Landscape phones and desktop keep their layouts. ---- */
@media (max-width:560px){
 .shop-top{flex-wrap:wrap;gap:8px;min-height:0;padding:8px 10px}
 .shop-top h1{font-size:24px}
 .shop-back{margin-left:auto;padding:4px 12px}
 .shop-wallet{order:3;flex-basis:100%;margin-left:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .shop-balance{justify-content:center;min-width:0;min-height:44px;padding:2px 8px 2px 4px;gap:4px}
 .shop-balance small{display:none}
 .shop-balance strong{font-size:16px}
 .shop-icon{width:22px;height:22px}
 .shop-balance-drops b{width:20px;height:20px;font-size:15px}
 .shop-tabs{padding:8px 10px 6px}
 .shop-banner{margin:0 10px 6px}
 .shop-body{padding:4px 10px 22px}
 .shop-heading{margin:2px 0 10px}
 .shop-heading h2{font-size:22px}
 .shop-heading p{display:none}
 .shop-grid,.recharge-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .shop-card{padding:8px 8px 10px;border-radius:16px}
 .shop-card h3{font-size:16px}
 .shop-card-foot{gap:6px}
 .shop-buy,.shop-primary{min-width:64px;padding:8px 10px}
 .recharge-status{font-size:13px;padding:8px 10px;margin:0 0 10px}
 .recharge-card{padding:12px 8px 10px;gap:4px}
 .recharge-art{min-height:34px}
 .recharge-art .shop-icon,.recharge-card[data-size="0"] .recharge-art .shop-icon{width:30px;height:30px;margin:0 -6px}
 .recharge-card h3 strong{font-size:22px}
 .recharge-price{font-size:19px}
 .shop-sheet{grid-template-columns:1fr;grid-template-areas:"art" "copy" "actions";padding:16px 14px 14px;gap:8px}
 .shop-sheet-art{max-width:110px;justify-self:center}
 .shop-sheet-art.recharge-art{min-height:80px;width:110px}
 .shop-sheet-art.recharge-art .shop-icon{width:56px;height:56px}
 .shop-sheet-copy{padding-right:0;text-align:center}
 .shop-sheet-copy h2{font-size:21px}
 .shop-sheet-spend{justify-content:center}
 .shop-sheet-actions{justify-content:center}
}

/* Fable m1-ui-02a E3: prices keep the 14px price floor everywhere, including phone sheets (preferred 18px+). */
.shop-dialog .shop-sheet-copy .recharge-price{font:800 20px/1.15 'Baloo 2',sans-serif;margin:4px 0}
.shop-dialog .shop-sheet-copy .recharge-price small{font:800 12px/1 'Nunito Sans',sans-serif}
.shop-dialog .shop-sheet-price .shop-price strong{font-size:22px}

/* Fable m1-ui-03a A7: contrast. White "Back" and "+" sit on darker blues (5.4:1 and 5.9:1); kickers darken to 5.9:1. */
.shop-dialog .shop-back{background:linear-gradient(#1f6fa3,#155a8a);border-color:#9fdcf5;box-shadow:0 3px 0 #0f4670}
.shop-dialog .shop-balance-drops b{background:#1668a8;box-shadow:0 2px 0 #0e4a7a}
.shop-dialog .shop-heading small,.shop-dialog .shop-eyebrow{color:#1d6269}
/* A request in flight keeps focus on its button (aria-disabled) and looks paused. */
.shop-dialog .shop-primary[data-busy]{cursor:progress;background:linear-gradient(#f0ede0,#d9d4c1);color:#6c6656;border-color:#fbf8ee;box-shadow:0 3px 0 #a7a08a}

/* Fable m1-ui-03a A10: labels inside small card pictures. Every card picture in the Shop is a size container. Below
   125px its stamp shows the rarity emblem only (the tab and the card frame already name the rarity), and names scale
   with the picture instead of breaking inside a word. */
.shop-dialog .character-card-art{container:shopcard/inline-size}
.shop-dialog .character-card-art .character-card-copy .character-card-name{overflow-wrap:normal;word-break:normal;hyphens:manual}
@container shopcard (max-width:160px){
 .shop-dialog .character-card-art .character-card-copy .character-card-name{font-size:clamp(12px,17cqi,18px);line-height:1.08}
}
@container shopcard (max-width:124px){
 .shop-dialog .character-card-art .character-card-stamp{left:5px;right:auto;top:5px;min-height:0;padding:2px;gap:0}
 .shop-dialog .character-card-art .character-card-stamp .character-card-stamp-label{display:none}
 .shop-dialog .character-card-art .character-card-copy{inset:auto 6px 7px}
}
@media (max-height:600px) and (max-width:700px){
 .shop-card{grid-template-columns:80px 1fr}
 .shop-card>.shop-trail-preview{width:80px}
}

/* Fable m1-ui grade note: a spend control that is still arming (the first 0.5 s after it appears) shows it is not ready
   yet, then settles to full strength; busy buttons keep their own paused look. */
.shop-dialog [data-spend-guard]:not([data-busy]){transition:opacity .18s ease-out,filter .18s ease-out}
.shop-dialog [data-spend-guard][data-armed=false]:not([data-busy]){opacity:.62;filter:saturate(.7);cursor:progress}
@media (prefers-reduced-motion:reduce){.shop-dialog [data-spend-guard]{transition:none}}

/* Fable m1-ui-01: the gold 13,000 pack says why it is gold (the best rate: 130 Splash Drops per dollar against 101-112).
   The ribbon sits over the card's top edge and takes no layout space, so the approved first view is unchanged. */
.recharge-card{position:relative}
.shop-dialog .recharge-best{position:absolute;top:-9px;left:50%;transform:translateX(-50%);z-index:2;padding:2px 10px;border-radius:999px;background:#6b4a0f;border:2px solid #fff3c9;color:#fff8df;font:900 11px/1.3 'Nunito Sans',sans-serif;letter-spacing:.4px;white-space:nowrap;box-shadow:0 2px 0 #b8841d}
.recharge-grid{padding-top:10px}
@media (max-height:600px){.recharge-grid{padding-top:9px}}
/* The ribbon rides on the border line, clear of the pack art on compact phone cards. */
.shop-dialog .recharge-best{top:-12px;padding:1px 9px;line-height:1.25}
.recharge-grid{padding-top:12px}
@media (max-height:600px){.recharge-grid{padding-top:12px}}

/* V32 (refine audit RUI-04/RUI-05): the refine sheet's balance line, a refusal and a shortfall's reason open its action row,
   above Refine (or Go to Splash Chest). On short (phone landscape) screens the refine sheet keeps that row in view and
   scrolls its copy instead, so the balance and the reason are never below the sheet's fold. */
.shop-dialog .shop-sheet-actions>p{flex-basis:100%;margin:0}
.shop-dialog .shop-sheet-actions .refine-balance{font-size:14px}
.shop-dialog .shop-sheet-actions .shop-shortfall,.shop-dialog .shop-sheet-actions .shop-error{font-size:13px;line-height:1.35}
@media (max-height:600px){
 .shop-dialog .shop-sheet:has(>.refine-copy){grid-template-rows:minmax(0,1fr) auto;overflow:hidden}
 .shop-dialog .shop-sheet>.refine-copy{min-height:0;overflow-y:auto;overscroll-behavior:contain}
 .shop-dialog .shop-sheet:has(>.refine-copy) .shop-sheet-actions{gap:6px 10px}
 .shop-dialog .shop-sheet-actions .refine-balance{font-size:13px}
 .shop-dialog .shop-sheet-actions .shop-shortfall,.shop-dialog .shop-sheet-actions .shop-error{font-size:12px;padding:5px 10px}
}
/* V32 (refine phone sheet, after RUI-05): on phone landscape screens the refine sheet shows, without scrolling, everything
   its rule promises before a spend: the result line, the cost, chance and guarantee, the refines so far with their bar,
   the balance, a refusal or shortfall reason and the buttons. Stars sit beside the name, the count beside its bar, text
   keeps compact line heights, and the action row spans the sheet: the reason on one line, then the balance beside the
   buttons. Only the star-3 sentence may give way on the smallest screens: it then scrolls on its own under a cue. */
@media (max-height:600px) and (min-width:561px){
 .shop-dialog .shop-sheet-layer:has(>.shop-sheet>.refine-copy){padding-top:6px;padding-bottom:6px}
 .shop-dialog .shop-sheet:has(>.refine-copy){padding:10px 14px;row-gap:6px}
 .shop-dialog .shop-sheet:has(>.refine-copy>.refine-rules){grid-template-areas:"art copy" "actions actions"}
 .shop-dialog .shop-sheet>.refine-copy{display:grid;grid-template-columns:minmax(0,auto) 1fr;align-content:start;gap:4px 10px;padding-right:0}
 .shop-dialog .shop-sheet>.refine-copy>*{grid-column:1/-1;margin:0}
 .shop-dialog .shop-sheet>.refine-copy p{line-height:1.3}
 .shop-dialog .shop-sheet>.refine-copy>.shop-eyebrow{padding-right:46px}
 .shop-dialog .shop-sheet>.refine-copy>h2{grid-column:1;align-self:center}
 .shop-dialog .shop-sheet>.refine-copy>.refine-stars{grid-column:2;align-self:center;padding-right:46px}
 .shop-dialog .shop-sheet>.refine-copy>.refine-result{padding:5px 10px}
 .shop-dialog .shop-sheet>.refine-copy>.refine-rules{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 10px;min-height:0}
 .shop-dialog .shop-sheet>.refine-copy .refine-rules>p{margin:0}
 .shop-dialog .shop-sheet>.refine-copy .refine-rules>p:first-child,.shop-dialog .shop-sheet>.refine-copy .refine-rules>.refine-next{grid-column:1/-1}
 .shop-dialog .shop-sheet>.refine-copy .refine-count{white-space:nowrap}
 .shop-dialog .shop-sheet>.refine-copy .refine-next{align-self:stretch;min-height:0;overflow-y:auto;overscroll-behavior:contain}
 /* V32 (Opus, after the phone-sheet verifier): while a Sparkle shortfall shows, no refine can be bought, so the next-star
    sentence gives its room to the reason; on the smallest phones it otherwise collapsed or sat under its scroll cue */
 .shop-dialog .shop-sheet:has(.shop-shortfall)>.refine-copy .refine-next{display:none}
 .shop-dialog .shop-sheet:has(>.refine-copy) .shop-sheet-actions>.refine-balance{flex:0 1 auto;line-height:1.3}
 .shop-dialog .shop-sheet:has(>.refine-copy) .shop-sheet-actions>:is(.shop-shortfall,.shop-error){order:-1;line-height:1.3}
}
/* The cue: while the star-3 sentence has more below, a "More below" tag sits on its last visible line (scroll-driven, so
   it only shows while that sentence actually scrolls and fades out at its end). */
@keyframes refine-more{0%,92%{opacity:1}100%{opacity:0}}
@supports (animation-timeline:scroll()){
 @media (max-height:600px) and (min-width:561px){
  .shop-dialog .shop-sheet>.refine-copy .refine-next::after{content:var(--copy-more-below,'More below') ' ↓';position:sticky;bottom:0;display:block;width:max-content;height:17px;margin:-17px 0 0 auto;padding:0 8px;border-radius:9px;background:#1d6269;color:#fff;font:800 11px/17px 'Nunito Sans',sans-serif;pointer-events:none;opacity:0;animation:refine-more linear both;animation-timeline:scroll(nearest block)}
 }
}
/* V32 (refine audit RUI-02): the lobby toast that says a recovered refine's outcome keeps the 11px phone floor (styles.css
   sets toasts to 10px in landscape phone layouts); battle toasts keep their own size. */
@media (max-height:520px) and (min-width:650px){body:not(.is-playing) #toast{font-size:11px;line-height:15px}}
/* V32 (VC-6): a Drops chest sheet that also names the player's free chests (one more line, a "Use a free chest" button)
   keeps every line and button in view on phone landscape screens: compact paragraph lines and the action row across the
   sheet. Sheets without that line keep their layout. */
@media (max-height:600px) and (min-width:561px){
 .shop-dialog .shop-sheet:has([data-chest-free-held]){grid-template-areas:"art copy" "actions actions";row-gap:6px}
 .shop-dialog .shop-sheet:has([data-chest-free-held]) .shop-sheet-copy p{line-height:1.3}
}
/* user 2026-10-02 ten-chest: paid Open 1 (120) and Open 10 (1,000) sit in their own block, titled when earned chests are
   shown, with a line that explains a short balance; earned buttons say "Open N free" over "Uses N earned chests". The
   chest panel's base rules live in chest-v32.css (loaded after this file), so these selectors carry .chest-panel. */
.shop-dialog .chest-panel .chest-paid{display:flex;flex-direction:column;gap:6px}
.shop-dialog .chest-panel .chest-paid-title{margin:0;font:900 13px/1.2 'Nunito Sans',sans-serif;letter-spacing:.3px;color:#1d5268}
.shop-dialog .chest-panel .chest-paid-need{margin:0;font-size:13px;font-weight:800;line-height:1.35;color:#7b3412}
.shop-dialog .chest-panel .chest-open-held{flex-direction:column;justify-content:center;gap:2px}
.shop-dialog .chest-panel .chest-open-held small{font:800 12px/1.1 'Nunito Sans',sans-serif;color:#6b3f0c}
.shop-dialog .chest-stage-buttons [data-chest-again]{display:inline-flex;align-items:center;gap:5px}
.shop-dialog .chest-stage-buttons [data-chest-again] .shop-icon{width:18px;height:18px}
/* Short (phone landscape) screens: both ways to open come first and stay in view without scrolling (earned row, then the
   paid block); the contents line, odds link and note follow. The earned row packs its count beside its buttons and keeps
   its longer explanation for screen readers only (the buttons already say free and how many chests they use). */
@media (max-height:600px){
 .shop-dialog .chest-panel{gap:8px}
 .shop-dialog .chest-panel .chest-contents,.shop-dialog .chest-panel .chest-free-note{order:2}
 .shop-dialog .chest-panel .chest-odds-link{order:3}
 .shop-dialog .chest-panel .chest-note{order:4}
 .shop-dialog .chest-panel .chest-held{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 10px}
 .shop-dialog .chest-panel .chest-held-count small{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .shop-dialog .chest-panel .chest-held .chest-actions{flex:1 1 auto;align-items:center;gap:6px 10px}
 .shop-dialog .chest-panel .chest-open-held{padding:4px 12px;font-size:15px}
 .shop-dialog .chest-panel .chest-held-note{flex:1 1 150px}
 .shop-dialog .chest-panel .chest-paid{gap:4px}
 .shop-dialog .chest-panel .chest-paid-title,.shop-dialog .chest-panel .chest-paid-need,.shop-dialog .chest-panel .chest-open-held small{font-size:11px}
}