#store-dialog.store-studio{--ink:#ecedde;--muted:#98b1b9;--gold:#e9ca93;--panel:#192d3d;position:fixed;inset:20px;transform:none;width:min(1440px,calc(100% - 40px));height:calc(100dvh - 40px);max-width:none;max-height:none;margin:auto;padding:0;overflow:auto;border:1px solid #6b898456;border-radius:18px;background:#112333;color:var(--ink);box-shadow:0 30px 100px #000a;font-family:inherit;text-align:left}
.store-studio *{box-sizing:border-box}.store-studio button{font-family:inherit}.store-studio button:focus-visible,.store-studio select:focus-visible,.store-studio canvas:focus-visible{outline:3px solid #9ae4df;outline-offset:4px}.shop-header{display:flex;align-items:center;gap:30px;padding:24px 36px;background:linear-gradient(120deg,#213c49,#172b3e);border-bottom:1px solid #aec3b51a}.shop-kicker{display:block;font-size:10px;letter-spacing:2px;font-weight:800;color:#b8d5d0;line-height:1.6}.store-studio h2#store-heading{font-size:30px;line-height:1.15;letter-spacing:-1px;margin:3px 0 0;font-style:italic}.shop-header h2 span{font-size:10px;font-style:normal;letter-spacing:2px;margin-left:16px;color:#c7b991}.shop-wallet{display:flex;align-items:center;gap:20px;margin-left:auto;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}.shop-wallet>span{color:#edce92}.shop-wallet button{border:1px solid #97d9d142;background:#0c23334d;border-radius:9px;color:#9ee5e1;padding:11px 15px}.shop-wallet b{margin-left:12px;color:#eff8e5}.shop-close{font-size:28px;line-height:1;border:0;background:none;color:#dce5da;cursor:pointer;padding:8px}.shop-tabs{display:flex;gap:26px;padding:0 36px;border-bottom:1px solid #9dbbb327;background:#122738;position:sticky;top:0;z-index:4}.shop-tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:19px 0 15px;letter-spacing:1.8px;font-size:11px;font-weight:800;color:#95adb7;cursor:pointer}.shop-tabs button[aria-selected=true]{border-color:#ebce96;color:#f1e2be}.shop-message{padding:0 36px;color:#f1c88f;font-size:13px;line-height:1.5}.shop-message:not(:empty){padding-top:15px}.shop-body{padding:24px 36px 36px}.shop-featured{display:grid;grid-template-columns:1.65fr 1fr;gap:22px}.shop-tile{position:relative;display:block;width:100%;border:1px solid #b1c1b52b;border-radius:12px;background:#1c3444;overflow:hidden;text-align:left;color:#edf1e2;padding:0;cursor:pointer;transition:border-color .18s,transform .18s}.shop-tile:hover{border-color:var(--accent);transform:translateY(-2px)}.shop-tile canvas{display:block;width:100%;aspect-ratio:1.75;object-fit:cover}.shop-hero canvas{height:100%;aspect-ratio:auto;object-fit:cover;min-height:450px}.shop-hero{min-height:450px}.shop-tile-copy{position:absolute;inset:auto 0 0;padding:45px 22px 20px;background:linear-gradient(transparent,#0a1b2de8 40%)}.shop-tile-copy>.shop-kicker{color:var(--accent)}.shop-tile-copy>strong{display:block;font-size:29px;font-weight:900;letter-spacing:-1px;line-height:1.2;margin:5px 0 13px}.shop-hero .shop-tile-copy{padding:70px 30px 27px}.shop-hero .shop-tile-copy>strong{font-size:43px}.shop-tile-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:11px;color:#bfd0cf}.shop-tile-bottom b{color:#f4d7a0;font-size:14px;white-space:nowrap}.shop-feature-side{display:flex;flex-direction:column;gap:20px}.shop-feature-side>.shop-tile{flex:1}.shop-note{padding:15px 10px 5px}.shop-note h3{font-size:24px;margin:8px 0;color:#eee4c9;line-height:1.2}.shop-note p{font-size:12px;color:#9fb7b9;margin:10px 0}.shop-note .text-button{font-size:10px;color:#c9e2d7;letter-spacing:1px;padding-left:0}.shop-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:30px 0 18px}.shop-section-heading:first-child{margin-top:0}.shop-section-heading h3{font-size:29px;letter-spacing:-.7px;margin:5px 0 0;color:#f0e8cf;line-height:1.2}.shop-section-heading>span,.shop-section-heading p{font-size:12px;color:#9fb7ba;margin:0}.shop-set-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.shop-collection{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.shop-collection .shop-tile canvas{aspect-ratio:1.5}.shop-collection .shop-tile-copy{padding:30px 16px 15px}.shop-collection .shop-tile-copy>strong{font-size:20px;margin:3px 0 8px}.shop-collection .shop-tile-bottom>span{font-size:10px}.shop-filters{display:flex;align-items:end;gap:16px;margin-bottom:22px}.shop-filters label{display:flex;flex-direction:column;gap:6px;color:#9bb5b8;font-size:9px;letter-spacing:1.5px}.shop-filters select{border:1px solid #8bb5b53b;background:#1a3344;color:#e5e9da;padding:10px 28px 10px 12px;border-radius:7px;font:inherit;font-size:12px;letter-spacing:0}.shop-filters>span{margin-left:auto;font-size:11px;color:#cfbd91;padding-bottom:10px}.shop-footer{display:flex;justify-content:space-between;gap:15px;border-top:1px solid #9dbbb321;padding:18px 36px;font-size:9px;letter-spacing:1.3px;color:#9aafae}.shop-footer>span:last-child{letter-spacing:0;color:#829da6}.shop-back{font-size:10px;padding:0 0 20px;color:#c4dacf;letter-spacing:1px}.shop-product{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(290px,1fr);gap:30px;align-items:start}.shop-stage{position:relative;overflow:hidden;border:1px solid #b6d5ca24;border-radius:12px;background:#142a3d}.shop-stage canvas{display:block;width:100%;aspect-ratio:1.4}.shop-stage canvas.shop-practice{height:540px;aspect-ratio:auto}.shop-stage-top{position:absolute;inset:16px 18px auto;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.shop-stage-top .text-button{pointer-events:auto;font-size:9px;letter-spacing:1px;color:#e2e5ce;padding:7px 9px;background:#102437a6;border-radius:5px}.shop-stage-top>.shop-kicker{font-size:8px;padding:5px 8px;background:#102437a6;border-radius:4px}.shop-poses{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:6px}.shop-poses button{font-size:9px;letter-spacing:.7px;padding:9px 12px;border:1px solid #91b9ba44;background:#102536d9;color:#c4d7d4;border-radius:6px;cursor:pointer}.shop-poses button[aria-pressed=true]{background:#cde0d4;color:#173044}.shop-product-copy{padding:8px 0}.shop-product-copy h3{font-size:42px;line-height:1.03;letter-spacing:-1.8px;color:#f2e5c6;margin:10px 0 14px}.shop-description{font-size:13px;line-height:1.6;color:#abc1c3;max-width:34ch}.shop-contents{margin:23px 0 18px;border-top:1px solid #9db9b52b}.shop-contents>div{display:grid;grid-template-columns:88px 1fr 15px;gap:8px;align-items:center;padding:12px 0;border-bottom:1px solid #9db9b51a}.shop-contents>div>span{font-size:10px;color:#9eb4ba}.shop-contents strong{font-size:12px;font-weight:700}.shop-contents b{color:#9edac1}.shop-product-copy>.button{display:block;width:100%;margin:10px 0;font-size:11px;letter-spacing:1px;min-height:46px}.shop-product-copy>.text-button{display:block;margin:auto;color:#c6dfd9;font-size:10px;letter-spacing:1px}.shop-fine{font-size:10px!important;line-height:1.6!important;color:#a1b5b8!important;margin:12px 0!important}.shop-price{display:flex;align-items:center;gap:16px;margin-top:22px}.shop-price strong{font-size:29px;letter-spacing:-1px;color:#f1d29b}.shop-price>span{font-size:10px;color:#a6bebc;line-height:1.5;max-width:18ch}.shop-confirm{padding:17px;border:1px solid #e7cc9266;border-radius:9px;margin-top:18px;background:#273e49}.shop-confirm>strong{font-size:14px}.shop-confirm p{font-size:11px;color:#d9d7c2;line-height:1.6}.shop-confirm .button{width:100%;font-size:11px}.shop-confirm .text-button{display:block;margin:8px auto 0;color:#e9dfc2;font-size:10px}.shop-packs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.shop-pack{padding:30px 20px;border:1px solid #95c5bf2f;border-radius:12px;background:radial-gradient(ellipse at 50% 10%,#43777955,transparent 70%),#1a3343;text-align:center}.diamond-emblem{display:block;color:#b4f3e5;text-shadow:0 0 35px #86e5e866;font-size:75px;line-height:1.5}.shop-pack h3{font-size:36px;color:#e9edda;margin:4px 0 15px}.shop-pack h3 small{display:block;font-size:12px;font-weight:500;color:#a8c3c3;margin-top:5px}.shop-pack .shop-kicker{font-size:8px;min-height:20px}.shop-pack .button{display:block;width:100%;margin-top:23px}.shop-status{font-size:12px;line-height:1.6;color:#aec3c3;padding:16px 0}.shop-ad{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px;border:1px solid #a1c2b52b;border-radius:10px;background:#1a3040}.shop-ad strong{font-size:17px;color:#e7dfc8}.shop-ad p{font-size:12px;color:#a8c0bf;margin-bottom:0}.shop-ad button{font-size:10px}.shop-touch{position:absolute;bottom:14px;left:15px;right:15px;display:flex;gap:8px;justify-content:center}.shop-touch button{touch-action:none;border:1px solid #abc7ba66;background:#142b3ee6;color:#e9e8cf;border-radius:7px;padding:12px 16px;font-size:10px;font-weight:bold;user-select:none}.shop-touch button:active{background:#d2ddc8;color:#1a3040}.store-studio .button:disabled{opacity:.4;cursor:not-allowed}
.shop-receipts{border-top:1px solid #9dbbb329;border-bottom:1px solid #9dbbb329;margin:8px 0 22px;padding:16px 0;color:#bed1ce}.shop-receipts summary{font-size:10px;letter-spacing:1.4px;cursor:pointer}.shop-receipts>div{display:grid;grid-template-columns:1fr auto;gap:7px;padding:15px 0;border-bottom:1px solid #9dbbb317}.shop-receipts strong{font-size:12px}.shop-receipts span,.shop-receipts p{font-size:11px}.shop-receipts small{grid-column:1/-1;font-size:9px;overflow-wrap:anywhere;color:#8faeb4}.shop-test-mode{display:inline-block;margin-left:12px;border:1px solid #e9ca9366;border-radius:4px;padding:3px 7px;font-size:9px;letter-spacing:1px}.shop-message .text-button{font-size:10px;color:#d6e8d9;margin-left:12px}
@media(min-width:1400px){.shop-hero canvas{min-height:520px}}
@media(max-width:850px){#store-dialog.store-studio{inset:10px;width:calc(100% - 20px);height:calc(100dvh - 20px);border-radius:12px}.shop-header{padding:20px;gap:15px}.shop-body{padding:20px}.shop-tabs{padding:0 20px;gap:22px}.shop-wallet{font-size:12px;gap:12px}.store-studio h2#store-heading{font-size:24px}.shop-header h2 span{display:none}.shop-featured{grid-template-columns:1fr 1fr;gap:16px}.shop-hero,.shop-hero canvas{min-height:360px}.shop-hero .shop-tile-copy>strong{font-size:32px}.shop-tile-copy>strong{font-size:23px}.shop-feature-side .shop-tile-copy{padding:40px 16px 15px}.shop-product{grid-template-columns:1.2fr 1fr;gap:20px}.shop-product-copy h3{font-size:33px}.shop-collection{grid-template-columns:repeat(2,minmax(0,1fr))}.shop-filters{flex-wrap:wrap}.shop-filters>span{display:none}.shop-footer{padding:18px 20px}.shop-contents>div{grid-template-columns:75px 1fr 12px}.shop-packs{gap:14px}.shop-message{padding-left:20px;padding-right:20px}}
@media(max-width:600px){.shop-header{padding:16px 14px}.shop-header>.shop-kicker{font-size:8px}.shop-wallet{gap:8px;font-size:11px}.shop-wallet button{padding:9px}.shop-wallet b{margin-left:5px}.shop-close{padding:5px}.shop-tabs{gap:0;justify-content:space-between;padding:0 14px}.shop-tabs button{font-size:9px;letter-spacing:1px;padding:16px 0 13px}.shop-body{padding:16px 14px 25px}.shop-featured{grid-template-columns:1fr}.shop-hero,.shop-hero canvas{min-height:340px}.shop-feature-side{display:grid;grid-template-columns:1fr}.shop-feature-side>.shop-tile canvas{aspect-ratio:2}.shop-note{display:none}.shop-set-grid{grid-template-columns:1fr;gap:16px}.shop-section-heading h3{font-size:25px}.shop-section-heading>span,.shop-section-heading>p{font-size:10px;max-width:15ch;text-align:right}.shop-collection{gap:10px}.shop-collection .shop-tile canvas{aspect-ratio:.9}.shop-collection .shop-tile-copy{padding:25px 10px 12px}.shop-collection .shop-tile-copy>strong{font-size:16px;letter-spacing:-.4px}.shop-collection .shop-tile-bottom{display:block}.shop-collection .shop-tile-bottom>span{display:none}.shop-collection .shop-tile-bottom b{font-size:12px}.shop-collection .shop-kicker{font-size:7px;letter-spacing:1px}.shop-filters{gap:8px}.shop-filters label{flex:1;min-width:0;font-size:8px;letter-spacing:1px}.shop-filters select{max-width:100%;font-size:10px;padding:9px 3px}.shop-product{grid-template-columns:1fr}.shop-product-copy h3{font-size:35px}.shop-stage canvas{aspect-ratio:1.25}.shop-stage canvas.shop-practice{height:390px}.shop-product-copy{padding:0 3px}.shop-packs{grid-template-columns:1fr}.shop-pack{display:grid;grid-template-columns:65px 1fr 100px;gap:10px;align-items:center;padding:20px 15px;text-align:left}.diamond-emblem{font-size:44px;grid-row:1/3}.shop-pack h3{font-size:27px;margin:0}.shop-pack .shop-kicker{grid-column:2;font-size:7px;letter-spacing:1px}.shop-pack .button{grid-column:3;grid-row:1/3;margin:0;font-size:12px}.shop-ad{display:block}.shop-ad button{margin-top:15px;width:100%}.shop-footer{padding:16px 14px;font-size:7px;gap:10px}.shop-footer>span:last-child{max-width:20ch;text-align:right}.shop-message{padding-left:14px;padding-right:14px}.shop-touch button{padding:12px 14px}}
@media(prefers-reduced-motion:reduce){.shop-tile{transition:none}.shop-tile:hover{transform:none}}
/* The shop owns the viewport; the game header must not cover its sticky tabs. */
#dialog-backdrop:has(>#store-dialog:not(.hidden)){inset:0;z-index:60}
@media(max-width:600px){.shop-header{gap:8px}.store-studio h2#store-heading{font-size:20px;white-space:nowrap}.shop-header>.shop-wallet{gap:8px}.shop-header>.shop-wallet button{padding:9px 7px}}
/* Small products keep the artwork unobscured above their short labels. */
.store-studio .shop-feature-side>.shop-tile .shop-tile-copy,.store-studio .shop-collection .shop-tile-copy{position:relative;background:#142b3c;padding:14px 16px}
.store-studio .shop-feature-side>.shop-tile canvas{aspect-ratio:2;max-height:260px}
.store-studio .shop-collection .shop-tile canvas{aspect-ratio:1.5}
@media(max-width:600px){.store-studio .shop-collection .shop-tile-copy{padding:12px 10px}.store-studio .shop-collection .shop-tile canvas{aspect-ratio:1.15}}
.store-studio .shop-feature-side>.shop-tile{flex:none}
.store-studio .shop-feature-side>.shop-tile .shop-tile-copy,.store-studio .shop-collection .shop-tile-copy{display:block}
/* Override the game's full-height canvas rule inside product cards. */
.store-studio .shop-tile:not(.shop-hero) canvas,.store-studio .shop-stage canvas:not(.shop-practice){height:auto}
/* Currency art stays recognizable at price-label size. */
.store-studio .currency-amount{display:inline-flex;align-items:center;gap:.32em;white-space:nowrap;vertical-align:middle;font-variant-numeric:tabular-nums}
.store-studio .currency-icon{display:inline-block;width:1.4em;height:1.4em;object-fit:contain;vertical-align:middle;flex:none;filter:drop-shadow(0 1px 1px #0007)}
.store-studio .currency-coins{color:#ffd16c}
.store-studio .currency-diamonds{color:#78d5ff}
.shop-wallet>button{display:inline-flex;align-items:center;gap:8px}
.store-studio .shop-price>strong .currency-icon{width:1.2em;height:1.2em}
.store-studio img.diamond-emblem{display:block;width:100px;height:100px;margin:0 auto 16px;filter:drop-shadow(0 6px 16px #198cdd55)}
.shop-tile-bottom>span .currency-amount{font-weight:800}
.shop-filters>span>.currency-icon{width:18px;height:18px}
@media(max-width:600px){.store-studio img.diamond-emblem{width:55px;height:55px;margin:0;grid-row:1/3}.shop-wallet>button{gap:3px}}

.shop-purchase-pause{box-sizing:border-box;width:min(440px,calc(100vw - 32px));padding:36px;border:1px solid #5d91ae;border-radius:20px;background:linear-gradient(145deg,#203e50,#101f30);color:#f7efd5;text-align:center;box-shadow:0 24px 100px #0009}
.shop-purchase-pause::backdrop{background:#030b18ba;backdrop-filter:blur(7px)}
.shop-purchase-pause>img{display:block;width:88px;height:88px;margin:0 auto 20px;filter:drop-shadow(0 0 24px #4dbdff66)}
.shop-purchase-pause .shop-kicker{color:#8edbff;font-size:10px;letter-spacing:2px}
.shop-purchase-pause h3{font-size:30px;line-height:1.1;margin:14px 0;font-weight:900}
.shop-purchase-pause p{color:#bfd1dd;line-height:1.6;margin:0 0 26px}
.shop-purchase-pause button{width:100%}