/* The Shop: the Starter Pack carousel, the supply and gem cards, and the Remove Ads banner. */
.shop-card .dot { --dot-size: 22px; top: -8px; right: -8px; }
.shop {
  padding: 0 13px 24px;
}
.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.shop-card {
  text-align: center;
  padding: 14px 4px 9px;
  border: 2px solid #2c637d;
  border-radius: 9px;
  background: #c0d7df;
  box-shadow: inset 0 2px #e1f3f6;
  color: var(--slate-700);
}
.shop-card h4 {
  font-size: 11px;
  margin: 7px 0 12px;
}
.shop-card .btn {

  padding: 5px;
}
.shop-card .btn {
  padding: 9px 5px;
  width: 100%;
  margin-top: 10px;
}
.shop-card {
  padding-left: 9px;
  padding-right: 9px;
}
.screen.shop {background-color:var(--slate-700)}
.screen.shop {background-image:var(--pattern-shop)}
/* One-time campaign stashes: character, gold pile, and explicit reward tiles. */
.stash-pack {position:relative;display:grid;grid-template-columns:36% minmax(0,1fr);gap:4px;min-height:218px;padding:12px 12px 18px 0;border:2px solid var(--ink);border-radius:22px;background:linear-gradient(100deg,var(--stash-shade),var(--stash-color) 75%);box-shadow:0 var(--button-depth) var(--button-drop);overflow:hidden}
.stash-portrait {position:relative;align-self:stretch;min-width:0;min-height:174px}
.stash-portrait > .painted-sprite {position:absolute;width:135%;height:165px;max-width:none;left:-10%;bottom:26px;filter:drop-shadow(2px 2px 0 #fffdf0) drop-shadow(-2px -2px 0 #fffdf0)}
.stash-coins {position:absolute;left:-25%;right:-10%;bottom:-20px;height:94px}
.stash-content {z-index:1;display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0;text-align:center}
.stash-content h3 {width:100%;margin:0;padding:7px 5px;border-radius:24px;background:#28521645;font-size:21px;line-height:1.05;color:white;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-transform:uppercase}
.stash-once {color:#32420d;font-size:12px;letter-spacing:1px}
.stash-items {display:flex;justify-content:center;gap:5px;width:100%;margin:5px 0}
.stash-item {position:relative;flex:1;min-width:0;max-width:56px;aspect-ratio:1;border:2px solid var(--slate-900);border-radius:10px;background:#ffe073;box-shadow:inset 0 2px #fff8bf;display:grid;place-items:center;padding:3px 3px 12px}
.stash-item .painted-sprite {width:100%;height:100%;max-height:38px}
.stash-item b {position:absolute;bottom:1px;right:3px;font-size:13px;color:white;-webkit-text-stroke:2px var(--slate-900);paint-order:stroke fill}
.stash-content .btn {min-width:112px;padding:10px 12px;margin:0}
@media(max-width:360px){.stash-pack{grid-template-columns:32% minmax(0,1fr);padding-right:8px}.stash-content h3{font-size:18px}.stash-item b{font-size:11px}.stash-items{gap:3px}.stash-portrait>.painted-sprite{height:142px}
}

.remove-ads-banner {display:flex;align-items:center;gap:12px;width:100%;margin:22px 0;padding:15px 12px;background:linear-gradient(100deg,var(--blue),var(--blue-top));border:5px solid white;border-radius:17px;box-shadow:0 var(--button-depth) var(--button-drop);outline:2px solid var(--slate-900);text-align:left;color:white}
.remove-ads-banner>span:nth-child(2){flex:1;min-width:0}
.remove-ads-banner b,.remove-ads-banner strong {font-size:22px;-webkit-text-stroke:3px var(--slate-950);paint-order:stroke fill}
.remove-ads-banner small {display:block;color:#25407b;font-size:10px;margin-top:3px}
.no-ads-icon {display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1}
.no-ads-icon svg {display:block;filter:drop-shadow(2px 2px 0 #fffdf0) drop-shadow(-2px -2px 0 #fffdf0)}
.shop-card {position:relative;padding:0 6px 12px;overflow:visible;border:2px solid var(--ink);border-radius:20px;background:var(--gray);box-shadow:0 var(--button-depth) var(--button-drop);color:white;display:flex;flex-direction:column;align-items:center}
.shop-card h4 {align-self:stretch;margin:0 -6px 18px;padding:13px 3px;background:#8b94ad;border-radius:18px 18px 0 0;font-size:20px;-webkit-text-stroke:3px var(--slate-900);paint-order:stroke fill}
.shop-card.gem-offer {background:var(--green-soft)}
.shop-card.gem-offer h4 {background:var(--green)}
.shop-reward-tile {position:relative;display:grid;place-items:center;width:76px;height:82px;border:3px solid var(--slate-900);border-radius:14px;background:var(--purple);margin:0 auto 17px}
.shop-reward-tile b {position:absolute;bottom:1px;right:3px;font-size:21px;-webkit-text-stroke:3px var(--slate-900);paint-order:stroke fill}
.shop-card .btn {margin-top:auto;white-space:normal}
@media(max-width:400px){.remove-ads-banner{gap:8px;padding:13px 8px}.remove-ads-banner b,.remove-ads-banner strong{font-size:18px}.remove-ads-banner small{font-size:10px}.shop-card h4{font-size:17px}.shop-reward-tile{width:64px;height:74px}.shop-card .btn{padding:7px 2px}
}

/* Supply artwork and quantities follow the shop's collectible-card style. */
.supply-gem .shop-reward-tile {width:82px;height:88px;margin-top:4px;margin-bottom:20px;box-shadow:inset 3px 3px var(--purple-top)}

.shop-section-title {margin:20px 0 13px;padding:7px 0;text-align:center;font-size:18px;letter-spacing:.6px;color:white;background:none;border:0;box-shadow:none}


/* Stash carousel: distinct pack palettes and a separate, roomy navigation row. */
.stash-pack {grid-template-columns:32% minmax(0,1fr);gap:12px;min-height:230px;padding:16px 14px 20px 0;margin-bottom:14px}
.stash-portrait > .painted-sprite {width:112%;left:-4%;height:156px;bottom:35px}
.stash-coins {left:-16%;right:-2%;bottom:-24px;height:78px}
.stash-content {gap:13px;justify-content:center}
.stash-content h3 {background:#24213630;padding:9px 6px;font-size:20px}
.stash-once {color:var(--slate-900);font-size:11px}
.stash-items {gap:7px;margin:4px 0 7px}
.stash-content .btn {min-width:120px;margin-top:2px}
@media(max-width:360px){
 .stash-pack {grid-template-columns:29% minmax(0,1fr);gap:8px;padding-right:10px}
 .stash-content h3 {font-size:17px}
 .stash-portrait>.painted-sprite {height:132px;bottom:42px}
 .stash-items {gap:4px}
 .stash-item b {font-size:11px}
}

/* Side arrows leave the stash footer and reward area uncluttered. */
.stash-carousel {position:relative;margin:0 0 26px}
.stash-carousel .stash-pack {margin:0 8px;padding-right:24px}
/* Stash arrows (.arrow-button) pinned to the carousel's sides. */
.stash-navigation {position:absolute;inset:0 -5px;z-index:2;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.stash-navigation button {pointer-events:auto}
/* No pack that way: hide the arrow but keep its slot so the other stays on its side. */
.stash-navigation .arrow-button:disabled {visibility:hidden}

.shop-card .btn {padding:7px 4px; gap:3px}

/* Compact shop: tighter cards and smaller art so more offers fit on screen. */
.stash-pack {min-height:0;gap:8px;padding:8px 14px 10px 0}
/* The shop heading is gone, so the stash needs its own space below the HUD. */
.stash-carousel {margin-top:26px}
.stash-carousel .stash-pack {padding-right:26px}
.stash-portrait {min-height:150px}
/* iOS Safari clips the filtered character and coins to the card's square box, not its
   rounded one, so they show past the corners. Clip them here instead: out to the card's
   8px/10px padding and round with its inner radius (22px corner less the 2px border). */
.stash-portrait {clip-path:inset(-8px -100vw -10px 0 round 20px 0 0 20px)}
.stash-portrait > .painted-sprite {height:138px;bottom:6px}
.stash-coins {bottom:-30px;height:78px}
.stash-content {gap:4px}
.stash-content h3 {padding:5px 6px}
/* Every reward tile is the same height with a same-size icon centered in it; a
   fourth reward only narrows the tiles, so stashes keep one height. */
.stash-items {margin:2px 0 4px}
.stash-item {height:52px;aspect-ratio:auto;padding:4px 4px 13px}
.stash-item>.painted-sprite,.stash-item>.epic-key {width:30px;height:30px;max-height:none}
.stash-item>.epic-key svg {width:100%;height:100%}
.remove-ads-banner {padding:8px 12px}
.shop-card {padding-bottom:9px}
.shop-card h4 {margin-bottom:8px;padding:7px 3px}
.shop-reward-tile,.supply-gem .shop-reward-tile {width:68px;height:auto;aspect-ratio:1;margin:0 auto 10px;border-width:2px;border-radius:12px}
.shop-reward-tile>.painted-sprite {width:78%;height:78%}
.shop-reward-tile b {right:3px;bottom:0;font-size:17px;line-height:1.2;-webkit-text-stroke:2px var(--slate-950)}
/* Gold sits on green, gems on purple, energy on blue; keys keep the bag's yellow tile. */
.supply-coin .shop-reward-tile {background:var(--green);box-shadow:inset 0 3px var(--green-top)}
.supply-bolt .shop-reward-tile {background:var(--blue);box-shadow:inset 0 3px var(--blue-top)}
.shop-card .btn {margin-top:auto}
@media(max-width:360px){
 .shop-reward-tile,.supply-gem .shop-reward-tile {width:58px}
 .shop-reward-tile b {font-size:14px}
 .stash-portrait>.painted-sprite {height:124px;bottom:10px}
}

/* Daily shop cards are the tap target; the price sits under the tile as plain text. */
button.shop-card {width:100%;min-width:0;font:inherit;cursor:pointer;transition:transform .08s}
button.shop-card:active {transform:translateY(2px);box-shadow:0 1px var(--button-drop)}
.shop-price {display:flex;align-items:center;justify-content:center;gap:4px;min-height:30px;margin-top:auto;font-size:20px;line-height:1;color:white;-webkit-text-stroke:3px var(--slate-900);paint-order:stroke fill;white-space:nowrap}
.shop-price>.painted-sprite {flex-shrink:0}
/* "Watch ad" is a longer label than a price, so it sits a size smaller. */
.shop-price.is-ad {font-size:16px;-webkit-text-stroke-width:2.5px}
@media(max-width:360px){.shop-price{font-size:17px}.shop-price.is-ad{font-size:14px}
}

/* Remove Ads dailies: gray and locked until ads are removed, then green. */
.no-ads-dailies {margin-top:12px}
.shop-card.no-ads-daily h4 {white-space:nowrap}
/* Unlocked, they turn green like the free gems. */
.shop-card.no-ads-daily:not(.is-locked) {background:var(--green-soft)}
.shop-card.no-ads-daily:not(.is-locked) h4 {background:var(--green)}
.no-ads-daily .shop-reward-tile {background:var(--cream);box-shadow:inset 0 3px white}
.no-ads-daily .shop-price .ui-glyph {width:16px;height:16px;flex-shrink:0}
.shop-coin-pile {position:relative;display:block;width:86%;height:80%;margin:6% 0 10%}
/* Daily shop icons sit bare on their tiles: the gold pile drops the white outline it wears elsewhere. */
.shop-reward-tile .coin-pile {filter:none}

/* Checkout: the gem crate's payment popup. A green title bar (main), the gems on a green-soft
   card, the total on slate, and a pay button that stays gray until the store is live. */
.checkout-modal .modal-title {background:var(--green);box-shadow:inset 0 4px var(--green-top)}
.checkout {display:flex;flex-direction:column;align-items:center;gap:14px}
.checkout-item {display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;padding:14px 12px 12px;background:var(--green-soft);border:3px solid var(--slate-900);border-radius:14px;box-shadow:inset 0 -4px color-mix(in srgb,var(--green) 70%,white)}
.checkout-gems {position:relative;display:block;width:130px;height:110px}
.checkout-gems .painted-sprite {filter:drop-shadow(0 2px #145c3a)}
.checkout-item b {font-size:24px;color:white;-webkit-text-stroke:3px var(--slate-900);paint-order:stroke fill}
.checkout-total {display:flex;justify-content:space-between;align-items:center;width:100%;margin:0;padding:10px 14px;background:var(--slate-500);border-radius:9px;font-size:18px;color:white}
.checkout-total dd {margin:0;font-size:22px;-webkit-text-stroke:3px var(--slate-900);paint-order:stroke fill}
.checkout .btn {width:100%;margin:0}
.checkout .panel-hint {margin:-4px 0 0;font-size:12px}