/* Rewards (shop) page + daily-challenge card + sound toggle — v0.1.
   Built on the platform's existing --dc-* tokens so dark/light both work. */

/* ---------- sound toggle (topbar) ---------- */
.sound-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--dc-border, #d5d9e0); border-radius: 10px;
  background: transparent; color: var(--dc-text-muted, #5b6472); cursor: pointer;
}
.sound-toggle .hi { width: 19px; height: 19px; }
.sound-toggle.is-muted { opacity: 0.55; }
.sound-toggle.is-muted::after {
  content: ''; position: absolute; width: 22px; height: 2px; border-radius: 1px;
  background: currentColor; transform: rotate(-45deg);
}
.sound-toggle { position: relative; }

/* ---------- daily challenge (dashboard) ---------- */
.daily-challenge-card {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px; margin-top: 16px;
}
.daily-challenge-icon {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--dc-accent-soft, rgba(41,98,255,.1)); color: var(--dc-accent, #2962ff);
}
.daily-challenge-icon .hi { width: 24px; height: 24px; }
.daily-challenge-copy { flex: 1 1 auto; min-width: 0; }
.daily-challenge-copy h2 { margin: 2px 0 4px; font-size: 1.02rem; }
.daily-challenge-copy p { margin: 0; color: var(--dc-text-muted, #5b6472); font-size: .86rem; }
.daily-challenge-done {
  flex: 0 0 auto; font-size: .82rem; font-weight: 600; color: var(--dc-ok, #1a7f37);
  border: 1px solid currentColor; border-radius: 999px; padding: 4px 12px;
}
.daily-challenge-go { flex: 0 0 auto; }

/* ---------- shop page ---------- */
.shop-page { max-width: 880px; margin: 0 auto; padding: 8px 4px 48px; }
.shop-heading { margin: 4px 0 18px; }
.shop-balance { display: flex; flex-direction: column; gap: 2px; padding: 22px 24px; margin-bottom: 16px; }
.shop-balance-num { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em; }
.shop-balance-sub { margin: 0; color: var(--dc-text-muted, #5b6472); }
.shop-quest { padding: 20px 22px; margin-bottom: 16px; }
.shop-quest-title { margin: 4px 0 4px; }
.shop-quest-meta { color: var(--dc-text-muted, #5b6472); margin: 0 0 12px; }
.shop-quest-go { display: inline-block; }
.shop-claimed {
  display: inline-block; font-size: .82rem; font-weight: 600; color: var(--dc-ok, #1a7f37);
  border: 1px solid currentColor; border-radius: 999px; padding: 3px 12px;
}
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 8px; }
.shop-item { display: flex; gap: 12px; padding: 16px; align-items: flex-start; }
.shop-item-ico {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--dc-accent-soft, rgba(41,98,255,.1)); color: var(--dc-accent, #2962ff);
}
.shop-item-ico svg { width: 22px; height: 22px; }
.shop-item-body { flex: 1 1 auto; min-width: 0; }
.shop-item-title { margin: 0 0 4px; font-size: .98rem; }
.shop-item-desc { margin: 0 0 6px; color: var(--dc-text-muted, #5b6472); font-size: .84rem; }
.shop-item-owned { margin: 0; color: var(--dc-ok, #1a7f37); font-size: .8rem; min-height: 1em; }
.shop-item-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.shop-item-price { font-weight: 700; }
.shop-note { margin: 8px 0 0; color: var(--dc-err, #c62828); font-size: .84rem; }
.shop-history { margin-top: 16px; padding: 16px 20px; }
.shop-history h2 { margin: 0 0 8px; font-size: 1rem; }
.shop-history-list { margin: 0; padding-left: 18px; color: var(--dc-text-muted, #5b6472); }
.shop-signin { padding: 22px 24px; }
.shop-signin h2 { margin-top: 0; }

/* Reduced motion: no confetti motion (canvas still draws one static frame) */
@media (prefers-reduced-motion: reduce) {
  #juice-confetti { display: none; }
}