/* ================================================================
   BubbleBlip — css/rewards.css
   All cosmetic styles live here. To add a new cosmetic:
     1. Add a CSS class below
     2. Add a row to the cosmetics DB table
   No other CSS file needs to change.
   ================================================================ */

/* ── Title badge ─────────────────────────────────────────────── */

.cosmetic-title {
  display: block;
  font-size: 0.6em;
  font-weight: 500;
  opacity: 0.8;
  margin-top: 1px;
  line-height: 1.2;
}

/* ── Name colour ─────────────────────────────────────────────── */
/* Applied via inline style="color:..." — no class needed */

/* ── Glow effect ─────────────────────────────────────────────── */

.cosmetic-glow .pill-name,
.cosmetic-glow .lb-name,
.cosmetic-glow .tt-name,
.cosmetic-glow .final-name { text-shadow: 0 0 8px currentColor; }

/* ── Sparkle effect ──────────────────────────────────────────── */
/* A twinkling star either side of the name, staggered out of sync so they
   don't blink together — reads as sparkle rather than one static emoji. */

@keyframes mb-sparkle-twinkle {
  0%, 100% { opacity: .25; transform: scale(.7) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1.15) rotate(15deg); }
}

.cosmetic-sparkle .pill-name::before, .cosmetic-sparkle .pill-name::after,
.cosmetic-sparkle .lb-name::before,   .cosmetic-sparkle .lb-name::after,
.cosmetic-sparkle .tt-name::before,   .cosmetic-sparkle .tt-name::after,
.cosmetic-sparkle .final-name::before, .cosmetic-sparkle .final-name::after {
  content: '✨';
  font-style: normal;
  font-size: 0.8em;
  display: inline-block;
  animation: mb-sparkle-twinkle 1.6s ease-in-out infinite;
}
.cosmetic-sparkle .pill-name::before, .cosmetic-sparkle .lb-name::before,
.cosmetic-sparkle .tt-name::before,   .cosmetic-sparkle .final-name::before {
  margin-right: 3px;
  animation-delay: .5s;
}
.cosmetic-sparkle .pill-name::after, .cosmetic-sparkle .lb-name::after,
.cosmetic-sparkle .tt-name::after,   .cosmetic-sparkle .final-name::after {
  margin-left: 3px;
}

/* ── Rainbow effect ──────────────────────────────────────────── */

@keyframes mb-rainbow {
  0%   { color: #e53e3e; }
  17%  { color: #dd6b20; }
  34%  { color: #d69e2e; }
  51%  { color: #38a169; }
  68%  { color: #3182ce; }
  85%  { color: #805ad5; }
  100% { color: #e53e3e; }
}

.cosmetic-rainbow .pill-name,
.cosmetic-rainbow .lb-name,
.cosmetic-rainbow .tt-name,
.cosmetic-rainbow .final-name {
  animation: mb-rainbow 3s linear infinite;
}

/* ── Avatar glow (extends existing Glow effect to avatar) ───── */

.cosmetic-glow .pill-avatar {
  filter: drop-shadow(0 0 8px #805ad5);
}

/* ── Avatar rainbow (hue-rotate cycles SVG colours) ─────────── */

@keyframes mb-hue-rotate {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}

.cosmetic-rainbow .pill-avatar {
  animation: mb-hue-rotate 3s linear infinite;
}

/* ── Avatar border rings ─────────────────────────────────────── */
/* box-shadow conforms to whatever border-radius .pill-avatar already has
   (css/mp-shared.css) — no need to force a shape here, and forcing 50%
   used to fight that rounded-square radius and ellipse the avatar box. */

.cosmetic-border-gold .pill-avatar  { box-shadow: 0 0 0 3px #f6c90e; }
.cosmetic-border-neon .pill-avatar  { box-shadow: 0 0 0 2px #3182ce, 0 0 8px #3182ce; }
.cosmetic-border-flame .pill-avatar { box-shadow: 0 0 0 2px #e53e3e, 0 0 10px #e53e3e; }

@keyframes mb-pulse-border {
  0%, 100% { box-shadow: 0 0 0 2px #805ad5, 0 0 6px #805ad5; }
  50%       { box-shadow: 0 0 0 4px #805ad5, 0 0 14px #805ad5; }
}

.cosmetic-border-pulse .pill-avatar { animation: mb-pulse-border 1.8s ease-in-out infinite; }

/* ── Shop page (shop.html) ───────────────────────────────────────
   Everything sits on solid, theme-coloured cards — never straight on the
   page scene (css/bg-scene.css) — so text stays readable on every scene
   and theme. Colours come from the theme tokens, so dark themes work too. */

/* Header banner: copy + points balance */
.shop-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  flex-wrap: wrap;
  padding: 28px 30px;
  margin-bottom: 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 14%, var(--surface)), color-mix(in srgb, var(--purple) 4%, var(--surface)) 70%);
  border: 1.5px solid color-mix(in srgb, var(--purple) 26%, var(--toolbar-border, var(--btn-border)));
  box-shadow: 0 8px 26px rgba(0,0,0,.14);
}
.shop-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1 1 360px; min-width: 0; }
.shop-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: 20px;
  background: var(--purple-light); color: var(--purple);
  font-size: 12.5px; font-weight: 700;
}
.shop-page h1 {
  font-size: clamp(28px, 3.6vw, 36px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--btn-text);
  margin: 0;
}
.shop-lead {
  font-size: 15px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--text-muted) 50%, var(--btn-text));
  margin: 0;
  max-width: 520px;
}

/* Points balance: a solid "wallet" tile inside the banner */
.rewards-balance {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  padding: 16px 22px 16px 16px;
  border-radius: 18px;
  background: var(--purple);
  color: #fff;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--purple) 35%, transparent);
}
.rewards-balance .coin {
  width: 48px; height: 48px; padding: 9px; box-sizing: border-box;
  border-radius: 14px; background: rgba(255,255,255,.18); color: #FCD34D;
}
.rewards-balance-right { display: flex; flex-direction: column; gap: 0; }
.rewards-balance-num { font-size: 34px; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.rewards-balance-label { font-size: 13px; font-weight: 700; opacity: .85; margin-top: 3px; }

/* Info note + links: links mix the accent with the text colour so they
   read on light and dark themes alike */
.shop-page .shop-note { align-items: center; color: color-mix(in srgb, var(--text-muted) 50%, var(--btn-text)); border-radius: 14px; margin-bottom: 14px; }
.shop-page .shop-note .ach-warning-icon { color: var(--purple); font-size: 18px; margin: 0; }
.shop-page a { color: color-mix(in srgb, var(--purple) 70%, var(--btn-text)); font-weight: 700; }

/* Section card: icon + title + one-line description, then the items */
.shop-section-wrap {
  background: var(--surface);
  border: 1.5px solid var(--btn-border);
  border-radius: 18px;
  padding: 18px 20px 20px;
  margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.rewards-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rewards-section-icon {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--purple-light); color: var(--purple); font-size: 18px;
}
.rewards-section-title { font-size: 17px; font-weight: 800; color: var(--btn-text); margin: 0; letter-spacing: -.01em; }
.rewards-section-sub { font-size: 13px; color: var(--text-muted); margin: 1px 0 0; }

/* Item grid + cards */
.rewards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.rewards-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  min-width: 0;
  padding: 12px 12px 12px;
  border-radius: 14px;
  background: var(--surface-2, var(--surface));
  border: 1.5px solid var(--btn-border);
  color: var(--btn-text);
  text-align: center;
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.rewards-card:hover    { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.1); }
.rewards-card.owned    { border-color: color-mix(in srgb, var(--teal, #38a169) 60%, var(--btn-border)); }
.rewards-card.equipped { border-color: var(--purple); background: color-mix(in srgb, var(--purple) 8%, var(--surface)); }
.rewards-card.locked   { cursor: default; opacity: .7; }
.rewards-card.locked:hover { transform: none; box-shadow: none; }

/* Preview tile: every item's picture sits in the same tinted box */
.rewards-card-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 72px;
  margin-bottom: 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--purple) 7%, var(--surface));
  font-size: 1.5em;
}
.rewards-card-name { font-size: 14px; font-weight: 800; margin-bottom: 2px; color: var(--btn-text); }
.rewards-card-cost {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 700;
  color: color-mix(in srgb, var(--text-muted) 60%, var(--btn-text));
}
.rewards-card-hint { font-size: 12px; line-height: 1.35; margin-top: 3px; color: var(--text-muted); }
.pts-star { width: 1.05em; height: 1.05em; flex: none; color: #F59E0B; }

.rewards-card-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--purple);
  color: #fff;
  letter-spacing: .03em;
}
.rewards-card.owned    .rewards-card-badge { background: var(--teal, #38a169); }
.rewards-card.equipped .rewards-card-badge { background: var(--purple); }

.rewards-btn {
  margin-top: auto;
  width: 100%;
  min-height: 36px;
  padding: 7px 8px;
  border-radius: 10px;
  border: none;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  transition: filter .15s, opacity .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 5px;
  line-height: 1.2;
}
.rewards-card-name + .rewards-btn,
.rewards-card-cost + .rewards-btn,
.rewards-card-hint + .rewards-btn { margin-top: 10px; }
.rewards-btn:hover:not(:disabled) { filter: brightness(1.08); }
.rewards-btn:disabled { opacity: .45; cursor: default; }
.rewards-btn .pts-star { color: #fff; }
.rewards-btn.buy      { background: #D97706; color: #fff; }
.rewards-btn.equip    { background: #0F8A6E; color: #fff; }
.rewards-btn.equipped { background: var(--purple); color: #fff; }
.rewards-btn.unequip  { background: transparent; color: var(--btn-text); border: 1.5px solid var(--btn-border); }

/* Effect previews (were emoji) */
.shop-fx { font-size: 17px; font-weight: 800; color: var(--btn-text); }
.shop-fx-glow { text-shadow: 0 0 8px color-mix(in srgb, var(--purple) 70%, transparent); }
.shop-fx-sparkle { color: #D97706; text-shadow: 0 0 6px rgba(245,158,11,.55); }
.shop-fx-rainbow { background: linear-gradient(90deg, #EF4444, #F59E0B, #10B981, #3B82F6, #8B5CF6); -webkit-background-clip: text; background-clip: text; color: transparent; }

@media (max-width: 600px) {
  .shop-hero { padding: 22px 18px; }
  .rewards-balance { width: 100%; }
  .shop-section-wrap { padding: 16px 14px; }
  .rewards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

.rewards-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: #1a202c;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.9em;
  font-weight: 600;
  transition: transform 0.3s;
  z-index: 999;
  pointer-events: none;
}

.rewards-toast.show { transform: translateX(-50%) translateY(0); }

/* ── Points-earned toast (appears after solo game completion) ─── */

.pts-earned-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(60px);
  background: var(--purple, #805ad5);
  color: #fff;
  padding: 7px 16px;
  border-radius: 99px;
  font-size: 0.82em;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(.2,.8,.3,1), opacity 0.3s;
  z-index: 1000;
  pointer-events: none;
}

.pts-earned-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.pts-earned-main { display: inline; }
.pts-earned-sub  { display: inline; opacity: 0.75; margin-left: 6px; }

/* Blip Village materials toast (js/nav.js MB_SHOW_VILLAGE), above the points toast */
.village-earned-toast {
  position: fixed;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%) translateY(40px);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  background: #fff;
  color: #1E1B3A;
  padding: 8px 16px 8px 8px;
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: transform .3s ease, opacity .3s ease;
}
.village-earned-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.village-earned-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}
.village-earned-icon svg { width: 22px; height: 22px; }
.village-earned-toast.is-capped .village-earned-icon { opacity: .55; }
.village-earned-text { display: flex; flex-direction: column; line-height: 1.25; }
.village-earned-text b    { font-size: .95em; }
.village-earned-text span { font-size: .78em; font-weight: 700; color: #4A4668; }
.village-earned-toast.is-treasure { bottom: 128px; }   /* Treasure Map toast stacks above the village one */
html[data-reduce-motion] .village-earned-toast { transition: none; }

/* ── Classes: welcome-back toast + one-tap game-start banner ──── */

.class-game-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--purple, #805ad5);
  color: #fff;
  padding: 10px 16px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  font-size: 0.9em;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
  transform: translateY(-100%);
  transition: transform 0.3s cubic-bezier(.2,.8,.3,1);
  z-index: 1001;
}
.class-game-banner.show { transform: translateY(0); }
.class-game-banner button {
  border: none;
  border-radius: 99px;
  padding: 6px 14px;
  font-weight: 700;
  font-size: 0.95em;
  cursor: pointer;
  background: #fff;
  color: var(--purple, #805ad5);
}
.class-game-banner .class-banner-dismiss {
  background: transparent;
  color: #fff;
  opacity: 0.8;
  font-weight: 400;
  padding: 6px 10px;
}

/* ── Nav shop points badge ────────────────────────────────────── */

.nav-shop-pts {
  font-size: 0.7em;
  font-weight: 700;
  background: var(--purple, #805ad5);
  color: #fff;
  padding: 1px 5px;
  border-radius: 99px;
  min-width: 18px;
  text-align: center;
  line-height: 1.5;
  display: none;
}

/* ── Classes: check-in prompt (index.html/app.html/my-data.html) ────── */
.checkin-prompt {
  position: relative;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 8px 36px 8px 16px;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  background: var(--purple, #805ad5);
  color: #fff;
  font-size: 0.85em;
}
.checkin-prompt-label { opacity: 0.85; }
.checkin-prompt-btn {
  border: none;
  border-radius: 99px;
  padding: 5px 14px;
  background: #fff;
  color: var(--purple, #805ad5);
  font-weight: 700;
  font-size: 0.95em;
  cursor: pointer;
}
.checkin-prompt-btn:disabled { opacity: 0.6; cursor: default; }
.checkin-prompt-close {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: #fff;
  opacity: 0.75;
  font-size: 1.2em;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
}
.checkin-prompt-close:hover { opacity: 1; }