/* THE PAW SHOP. Built 29 Aug from frames of both competitors' shops, her call:
   "it's fun when cartoony". Their layout, our colours, and the two things neither
   of them gets right: a free daily card that gives a reason to open it, and tiers
   whose colour actually climbs. */

#shop { position:fixed; inset:0; z-index:80; display:none;
  background:rgba(70,48,30,.55); backdrop-filter:blur(2px);
  align-items:flex-start; justify-content:center; overflow-y:auto; padding:14px 0 26px; }
#shop.show { display:flex; }

/* the panel: one tall rounded slab, theirs is terracotta, ours is warm honey */
#shopPanel { position:relative; width:min(92vw, 430px); margin-top:52px;
  background:#e08b4a; border-radius:26px; padding:30px 14px 18px;
  box-shadow:0 18px 44px rgba(60,35,15,.35); }

/* the title rides a wooden ribbon banner overlapping the top edge, theirs exactly */
/* her own banner art, fired 29 Aug. The words are baked in, which is fine for one
   language; a translated build swaps the file rather than the CSS. */
#shopTitle { position:absolute; left:50%; top:-30px; transform:translateX(-50%);
  width:min(78%, 300px); height:auto; z-index:3;
  filter:drop-shadow(0 4px 8px rgba(90,55,20,.28)); }

#shopClose { position:absolute; right:10px; top:-16px; width:38px; height:38px;
  border-radius:50%; border:3px solid #d69a2c; background:#fff8ec; color:#a4713d;
  font:800 18px/1 system-ui; cursor:pointer; }

.shopHead { color:#fff; font:800 13px/1 system-ui, sans-serif; letter-spacing:.13em;
  text-align:center; margin:16px 0 10px; opacity:.95; }
.shopHead span { display:inline-block; padding:0 12px; }

/* the cards. Rounded squares, white rim, tinted, big art, fat number, green pill. */
.shopGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.shopCard { position:relative; background:url(art/ui/shop_card.webp) center/100% 100% no-repeat;
  border:none; border-radius:0; padding:16px 10px 12px; text-align:center; cursor:pointer;
  /* HER CATCH, 3 Sep: "the buy button for 1 vip ticket is not aligned in the line
     with the others". The card was a plain stack, so a name that fits on one line
     while its neighbours take two lifts its green button above theirs. The card is
     a column now and the button is pushed to the floor of it, so whatever the name
     or the price does above, the three buttons stand on the same line. */
  display:flex; flex-direction:column; }
.shopCard .shopBuy { margin-top:auto; }
.shopCard img { width:80%; height:58px; object-fit:contain; display:block; margin:14px auto 0; }
.shopCard b { display:block; font:800 19px/1 system-ui, sans-serif; color:#5d4126;
  -webkit-text-stroke:.5px #fff; margin:2px 0 6px; }
/* THE PRICE HAS TO BE READ, 31 Aug. Flavia: "hard to read, now is white and not
   bold". It WAS bold, but a thin green outline on white at 13px eats its own
   edges and reads as grey mush. Warm mustard on the green button, a size bigger,
   and a hard dark shadow underneath instead of a stroke around it: an outline
   thins a letter from both sides, a shadow only sits behind it. */
.shopBuy { display:block; width:100%; border:none; border-radius:0;
  background:url(art/ui/shop_button.webp) center/100% 100% no-repeat;
  color:#FFD86B; -webkit-text-stroke:0;
  text-shadow:0 1px 0 #3b2410, 0 0 3px rgba(40,25,8,.5);
  font:900 15px/1 system-ui, sans-serif; letter-spacing:.2px;
  padding:10px 0 12px; cursor:pointer; }
.shopBuy.free { background:#5bb8e8; border-bottom:4px solid #3f92bd;
  border-radius:11px; -webkit-text-stroke:0; color:#fff;
  text-shadow:0 1px 0 #24607f, 0 0 3px rgba(10,40,60,.45); }
.shopCard:active { transform:translateY(1px); }

/* the tiers CLIMB in colour, which is the mistake Dreamy Room's analyst names */
/* THE TIERS CLIMB, but only the CARD tints, never its contents. Filtering the whole
   card turned the paw blue, the button pink and the ribbon teal, so the dearest tier
   looked like a different game. The art moves to a ::before layer that takes the
   filter alone. Dreamy Room's mistake is tiers that do not climb, so this stays. */
.shopCard { background:none; }
.shopCard::before { content:""; position:absolute; inset:0; z-index:0;
  background:url(art/ui/shop_card.webp) center/100% 100% no-repeat; }
.shopCard > * { position:relative; z-index:1; }
/* the tiers climb by WASHING colour over the card's fill, never by rotating hue.
   Hue rotation turned the dark brown rim navy, so the dearest card looked selected
   rather than premium. The wash is clipped to the card art, so the rim stays brown. */
.shopCard::after { content:""; position:absolute; inset:0; z-index:0; opacity:0;
  border-radius:14px; margin:7px 6px 8px; pointer-events:none; }
.shopCard.t2::after { background:#ffb45e; opacity:.20; }
.shopCard.t3::after { background:#ff7ea8; opacity:.20; }
.shopCard.t4::after { background:#a97ce8; opacity:.24; }

/* HER NOTE 29 Aug, after looking: the word sat at the ribbon's far left, hanging off
   into nothing, with two thirds of the banner empty. The ribbon is now a flex box so
   the word CENTRES on it, and the letters carry a dark outline so they read on pink. */
.shopCard .ribbon { position:absolute; left:-13px; top:-8px; z-index:3;
  width:80px; height:30px; display:flex; align-items:center; justify-content:center;
  background:url(art/ui/shop_ribbon.webp) center/100% 100% no-repeat;
  color:#fff; font:800 9px/1 system-ui, sans-serif; letter-spacing:.04em;
  text-shadow:0 1px 0 #b93a63, 0 -1px 0 #b93a63, 1px 0 0 #b93a63, -1px 0 0 #b93a63;
  /* the words tilt with the banner. Measured off the art itself: it is drawn at
     8.7 degrees, not the 13 I first guessed, which is why the text fought it. The
     box stays upright and only the LABEL turns, so it rides the ribbon's own slope. */
  transform:none; padding:0; }
/* MEASURED off the art, not guessed: the banner's body sits 4.2% above the file's
   own centre and fills only 38% of its height, the rest being tails and shadow. So
   centring the word in the box drops it BELOW the banner. It lifts to sit on the
   body, and turns 8.7 degrees to match the slope the art is drawn at. */
.shopCard .ribbon span { display:block; transform:translateY(-11%) rotate(-8.7deg); }
.shopCard .ribbon.deal { filter:hue-rotate(-24deg) saturate(1.3); }

.shopCard .daily { position:absolute; left:50%; top:-11px; transform:translateX(-50%);
  background:#e8c98a; color:#6b4a2e; font:800 9.5px/1 system-ui; letter-spacing:.05em;
  padding:4px 10px; border-radius:7px; border:2px solid #fff; white-space:nowrap; }

/* the coin that flies to the counter when a free claim lands. Their best moment. */
.flycoin { position:fixed; width:26px; height:26px; z-index:120; pointer-events:none;
  background:url(art/ui/coin.webp) center/contain no-repeat; }

/* HER ASK, 8 Sep: "can u make the bao shop product cards a bit smaller to look
   better on mobile or we break the code?". It cannot break the code. shop.css had
   NO media query at all, so a phone was getting desktop sizing: a card ran about a
   third of the screen tall and "400 coins" nearly touched its own edges.
   PHONE ONLY and PAINT ONLY. Nothing in here touches a rule the layout depends on:
   the card is still a flex column and .shopBuy still has margin-top:auto, so the
   three green pills still stand on one line, which was her catch on 3 Sep. */
@media (max-width: 480px) {
  .shopGrid { gap:7px; }
  .shopCard { padding:8px 5px 7px; }
  .shopCard img { height:34px; margin-top:5px; }
  /* 13.5px is chosen, not guessed: it puts "One shadow" and "Whole room" on ONE
     line inside a 101px card, and a line saved is 15px of height on every card.
     That is what turns the tall rectangle into something near square. */
  .shopCard b { font-size:13.5px; margin:1px 0 4px; }
  /* THE PRICE IS NOT SHRUNK FURTHER. Her complaint of 31 Aug was that it was hard
     to read, so 12.5px is the floor here. */
  .shopBuy { font-size:12.5px; padding:7px 0 8px; letter-spacing:0; }
  .shopHead { margin:12px 0 8px; font-size:13px; }
}