/* Store page */

.store-page .title { margin-bottom: 8px; }
.intro { max-width: 760px; line-height: 1.6; margin: 0 0 22px; }
.intro strong { color: var(--cyan); font-weight: normal; }
.store-page .panel { margin-bottom: 20px; }
.panel-body { padding: 16px; display: grid; gap: 12px; min-width: 0; }
.muted-text { color: var(--muted); font-size: 0.82rem; line-height: 1.55; margin: 0; }
.stat-label { font-size: 0.7rem; color: var(--muted); letter-spacing: 0.15em; }

.wallet-body { padding: 14px 18px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.creds { color: var(--cyan); font-size: 1.6rem; text-shadow: 0 0 8px var(--cyan-dim); }

.store-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 0 20px; align-items: start; }
.preview-panel { position: sticky; top: 12px; }

/* leaderboard preview */
.pv-board { display: grid; gap: 2px; }
.pv-row { display: grid; grid-template-columns: 2em minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; background: rgba(0, 0, 0, 0.3); border-left: 2px solid var(--yellow-dim); }
.pv-row.dim { opacity: 0.55; border-left-color: transparent; }
.pv-rank { color: var(--yellow); }
.pv-score { color: var(--text); font-variant-numeric: tabular-nums; }
.pv-name { min-width: 0; }

/* mini board, recoloured by data-theme */
.pv-mat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 12px; border: 1px solid var(--yellow-dim); background: rgba(0, 0, 0, 0.35); background-image: linear-gradient(var(--theme-tint, transparent), var(--theme-tint, transparent)); }
.pv-grid { display: grid; grid-template-columns: repeat(4, 30px); gap: 4px; }
.pv-grid span { display: grid; place-items: center; height: 26px; font-size: 0.72rem; color: var(--text); border: 1px solid rgba(255, 255, 255, 0.06); }
.pv-grid span.line { background: var(--yellow-faint); border-color: var(--yellow-dim); color: var(--yellow); }
.pv-grid span.hot { background: var(--cyan-faint); border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 8px var(--cyan-dim); }
.pv-grid span.bad { color: var(--red); border-color: var(--red-dim); }
.pv-side { display: grid; gap: 8px; align-content: start; min-width: 0; font-size: 0.72rem; }
.pv-buffer { display: flex; gap: 4px; }
.pv-buffer span { width: 26px; height: 22px; display: grid; place-items: center; border: 1px solid var(--yellow-dim); color: var(--yellow); }
.pv-buffer span.empty { border-style: dashed; }
.pv-daemon { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pv-daemon span { padding: 1px 4px; border: 1px solid var(--yellow-dim); color: var(--text); }
.pv-daemon span.on { background: var(--cyan); color: var(--bg); border-color: var(--cyan); }
.pv-daemon b { font-weight: normal; color: var(--yellow); letter-spacing: 0.08em; }
.pv-daemon.bad b { color: var(--red); }
.pv-daemon.bad span { border-color: var(--red-dim); }

/* catalog */
.owned-toggle { font-size: 0.8rem; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.item {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 6px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 2px solid var(--muted);
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font: inherit;
  letter-spacing: inherit;
  min-width: 0;
}
.item:hover, .item:focus-visible { outline: none; border-color: var(--cyan-dim); }
.item.trying { box-shadow: 0 0 0 1px var(--cyan), 0 0 14px var(--cyan-dim); }
.item.r-rare { border-top-color: #4f9fd5; }
.item.r-epic { border-top-color: #a86cff; }
.item.r-legendary { border-top-color: #ffcf6b; box-shadow: inset 0 0 18px rgba(255, 207, 107, 0.06); }
.item-preview { min-height: 44px; display: grid; align-items: center; padding: 6px 8px; background: rgba(0, 0, 0, 0.35); overflow: hidden; }
.item-preview .pname { font-size: 1.15rem; }
.item-preview .big-title { color: var(--text); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.8rem; }
.item-preview .big-badge { width: 28px; height: 28px; color: var(--yellow); }
.item-preview .swatch { display: flex; gap: 4px; }
.item-preview .swatch i { width: 18px; height: 18px; display: block; }
.item-name { color: var(--yellow); font-size: 0.9rem; letter-spacing: 0.06em; }
.item-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 0.72rem; color: var(--muted); }
.rarity { letter-spacing: 0.12em; text-transform: uppercase; }
.rarity.rare { color: #7fb3d5; }
.rarity.epic { color: #c49bff; }
.rarity.legendary { color: #ffcf6b; }
.item-action { align-self: end; }
.item-action .btn { width: 100%; }
.item-action .owned-tag { display: block; text-align: center; font-size: 0.75rem; color: var(--cyan); letter-spacing: 0.12em; padding: 6px 0; }

@media (max-width: 900px) {
  .store-grid { grid-template-columns: minmax(0, 1fr); }
  .preview-panel { position: static; }
}
@media (max-width: 560px) {
  .items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .item { padding: 10px; }
  .pv-grid { grid-template-columns: repeat(4, 24px); }
  .pv-grid span { height: 22px; font-size: 0.65rem; }
}
.swatch i:nth-child(1) { background: var(--yellow); }
.swatch i:nth-child(2) { background: var(--cyan); }
.swatch i:nth-child(3) { background: var(--red); }

/* ---------- v2: weekly shelf, new types, paint ---------- */
.wallet-body > div:nth-child(2) { margin-right: auto; }
.creds.cans { color: var(--yellow); text-shadow: 0 0 8px var(--yellow-dim); }
.tab-week { border-color: var(--cyan-dim); }
.tab-week:not(.active) { color: var(--cyan); }
.shelf-clock { margin: 0; font-size: 0.8rem; color: var(--text); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.shelf-clock b { color: var(--cyan); font-weight: normal; }
.clock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: clock-blink 2s ease-in-out infinite; }
@keyframes clock-blink { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .clock-dot { animation: none; } }
.shelf-note { grid-column: 1 / -1; }

.item-preview { position: relative; }
.chip-week { position: absolute; top: 4px; right: 4px; font-size: 0.55rem; letter-spacing: 0.12em; color: var(--bg); background: var(--cyan); padding: 1px 5px; }
.item-kind { display: block; font-size: 0.62rem; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 2px; }
.item.off-shelf .item-name, .item.off-shelf .item-meta { opacity: 0.6; }
.item-preview .vbanner.mini { font-size: 0.68rem; letter-spacing: 0.1em; padding: 6px 4px; margin: 0; animation: none; }
.fx-tile { display: grid; place-items: center; width: 40px; height: 30px; border: 1px solid var(--cyan); background: var(--cyan-faint); color: var(--cyan); font-size: 0.8rem; }

.pv-fx-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
#pvBanner .vbanner { margin: 0; font-size: clamp(0.9rem, 3.5vw, 1.2rem); }

/* paint */
.items.paint-mode { grid-template-columns: minmax(0, 1fr); }
.paint-buy { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--yellow-dim); background: var(--yellow-faint); }
.paint-buy strong { color: var(--cyan); font-weight: normal; }
.paint-buy-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.paint-buy-row b { color: var(--yellow); font-weight: normal; }
.can-count { font-size: 0.8rem; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; margin-left: auto; }
.can-count select { background: var(--bg); color: var(--text); border: 1px solid var(--yellow-dim); font: inherit; padding: 3px 6px; }
.paint-rows { display: grid; gap: 6px; }
.paint-row { display: grid; grid-template-columns: minmax(0, 1fr) 46px 96px auto; gap: 10px; align-items: center; padding: 10px 12px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.08); }
.paint-label { color: var(--yellow); font-size: 0.85rem; letter-spacing: 0.05em; min-width: 0; }
.paint-label small { display: block; color: var(--muted); font-size: 0.68rem; letter-spacing: 0; }
.paint-row input[type="color"] { width: 46px; height: 30px; padding: 0; border: 1px solid var(--yellow-dim); background: transparent; cursor: pointer; }
.paint-check { font-size: 0.72rem; }
.paint-check.ok { color: var(--cyan); }
.paint-check.bad { color: var(--red); }
.paint-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
@media (max-width: 560px) {
  .paint-row { grid-template-columns: minmax(0, 1fr) 46px; }
  .paint-check { grid-column: 1; }
  .paint-actions { grid-column: 1 / -1; justify-content: stretch; }
  .paint-actions .btn { flex: 1; }
  .can-count { margin-left: 0; }
}

/* theme cards: a tiny live board */
.item-preview .theme-mini { display: block; padding: 6px; border: 1px solid var(--yellow-dim); background-color: rgba(0, 0, 0, 0.35); }
.theme-mini .pv-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; }
.theme-mini .pv-grid span { height: 20px; font-size: 0.62rem; }
.item-fx { display: block; font-size: 0.66rem; color: var(--muted); letter-spacing: 0.04em; margin-top: 2px; }

/* emote cards */
.item-preview .emote-bubble { justify-self: start; font-size: 0.75rem; }
.item-preview .emote-bubble.pop { animation: emote-pop 0.35s ease-out; }
.item-preview .emote-bubble.r-legendary.pop { animation: emote-pop 0.35s ease-out, nc-shimmer 3s linear infinite; }
@keyframes emote-pop { from { transform: scale(0.8); opacity: 0.3; } to { transform: none; opacity: 1; } }
.item-preview:has(.chip-week) { padding-top: 20px; } /* the THIS WEEK tag never covers the preview */