/* Shop (shop-ui.js): Featured, Daily, Grit Corner. Rarity colours follow economy.cosmeticPricing (grey, teal,
   violet, magenta, gold). No countdowns, no flashing: the plan's anti-dark-pattern rules. */
.shop-head { display: grid; gap: 8px; }
.shop-note { margin: 0; max-width: 70ch; }
.shop-section { display: grid; gap: 10px; }
.shop-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.shop-section-head h2 { margin: 0; font-size: 1.2rem; }
.shop-section.corner { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.shop-section.corner > .hint { margin: 0; }
.shop-foot { margin: 4px 0 0; }

.shop-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.shop-grid.featured { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.shop-card { --r: #8e97a8; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 8px 12px; padding: 12px;
  background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--r); border-radius: 14px; min-width: 0; }
.shop-card.r-common { --r: #8e97a8; }
.shop-card.r-uncommon { --r: #0E8AA6; }
.shop-card.r-rare { --r: #6B3FD1; }
.shop-card.r-epic { --r: #C2347A; }
.shop-card.r-legendary { --r: #E0B241; }
.shop-card.featured { grid-template-columns: 1fr; text-align: left; background: linear-gradient(160deg, color-mix(in srgb, var(--r) 16%, var(--panel)), var(--panel) 60%); }
.shop-card .rarity { color: var(--r); }
.shop-art { grid-row: span 2; width: 96px; height: 72px; border-radius: 10px; background: #080a14; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--r) 70%, transparent); overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 4px; color: #fff; font-family: "Russo One", sans-serif; }
.shop-art canvas { width: 100%; height: auto; display: block; }
.shop-art.big { grid-row: auto; width: 100%; height: auto; aspect-ratio: 4 / 3; padding: 10px; box-shadow: inset 0 0 0 2px var(--r), 0 10px 30px color-mix(in srgb, var(--r) 30%, transparent); }
.shop-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shop-body b { font-size: 1.02rem; }
.shop-body .hint { margin: 0; font-size: 0.84rem; }
.shop-card .price { margin-top: 4px; font-size: 0.92rem; }
.shop-card .price b { font-family: "Russo One", sans-serif; font-weight: 400; color: var(--ink); }
.shop-card .price span { color: var(--muted); }
.shop-act { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.shop-act .hint { margin: 0; font-size: 0.8rem; }
.shop-act .btn.small { min-height: 40px; }
.btn.wish.on, .btn.wish[aria-pressed="true"] { background: color-mix(in srgb, #C2347A 12%, var(--panel)); border-color: #C2347A; color: #C2347A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.wish.on { color: #ff8fc8; border-color: #ff8fc8; } }
:root[data-theme="dark"] .btn.wish.on { color: #ff8fc8; border-color: #ff8fc8; }
.confirm-row { display: flex; flex-wrap: wrap; gap: 6px; }
.confirm-row .btn { flex: 1 1 auto; } /* "Not now" is as big as "Buy" */
@media (max-width: 480px) {
  .shop-grid, .shop-grid.featured { grid-template-columns: 1fr; }
}