/* The toys tab's look. Classes are santa-toys-*; colours are the --santa-* tokens of public/theme.css.

   An expensive collectibles gallery, not a badge list: a midnight-navy room with a barely-there gold dust, dark cards with thin
   gold or silver borders, large ornaments, each with its own accent (the ornament's glow colour, set on the card as --accent,
   --accent-rgb, --accent-deep and --accent-light by colors.js). Restrained: no animated gradients, no glow but on a filled bar, one
   slow sheen on an unlocked card, nothing that moves faster than a breath. The pictures of the registry (public/santa/assets.js)
   arrive as --toys-* custom properties on .santa-toys; where one is not set, the gradient written here is the placeholder. */

.santa-toys {
  --toys-ink: var(--santa-ivory);
  --toys-dim: var(--santa-dim);
  --toys-silver: #c9d1dc;
  --toys-line-silver: rgba(201, 209, 220, 0.3);
  --toys-line-gold: rgba(255, 209, 107, 0.34);
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  color: var(--toys-ink);
  font-family: var(--santa-font);
  -webkit-font-smoothing: antialiased;
}

/* The room. */
.santa-toys-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: var(--santa-navy-deep);
  background-image: var(--toys-bg, radial-gradient(120% 52% at 50% -6%, rgba(50, 79, 134, 0.5), transparent 68%), radial-gradient(90% 34% at 50% 104%, rgba(28, 129, 92, 0.1), transparent 70%), linear-gradient(180deg, #0d1832 0%, #0a1329 56%, #070e20 100%));
  background-size: cover;
  background-position: center;
}
.santa-toys-dust { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

/* The scroll. Room at the top for Telegram's header, at the foot for the bar. */
.santa-toys-scroll {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.santa-toys-scroll::-webkit-scrollbar { display: none; }
.santa-toys-inner {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 560px;
  margin: 0 auto;
  padding: calc(var(--santa-top) + 14px) 16px calc(var(--santa-nav-space) + 28px);
}

/* Loading, the error, nothing to show: the platform's state card, set in the room. */
.santa-toys .santa-toys-state { margin: 22vh auto 0; width: 100%; max-width: 320px; background: rgba(22, 38, 74, 0.7); border-color: var(--santa-line); }
.santa-toys-state .pg-spin { width: 28px; height: 28px; border-width: 3px; border-color: rgba(255, 255, 255, 0.12); border-top-color: var(--santa-gold); }

/* ---------------------------------------------------------------------------------------------------- My Collection */

.santa-toys-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 18px;
  border-radius: 26px;
  text-align: center;
  background:
    radial-gradient(72% 46% at 50% 30%, rgba(var(--accent-rgb), 0.13), transparent 72%),
    linear-gradient(180deg, rgba(24, 41, 80, 0.94), rgba(12, 23, 50, 0.96));
  border: 1px solid var(--toys-line-silver);
  box-shadow: 0 24px 46px -20px rgba(2, 6, 18, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: border-color 0.3s;
}
.santa-toys-hero.is-epic.is-unlocked, .santa-toys-hero.is-epic.is-equipped,
.santa-toys-hero.is-legendary.is-unlocked, .santa-toys-hero.is-legendary.is-equipped { border-color: var(--toys-line-gold); }
.santa-toys-hero.is-mythic.is-unlocked, .santa-toys-hero.is-mythic.is-equipped { border-color: rgba(200, 236, 255, 0.5); }
.santa-toys-hero.is-locked { border-color: rgba(154, 166, 194, 0.2); }

.santa-toys-hero-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; width: 100%; }
.santa-toys-kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--santa-gold); }
.santa-toys-count { margin: 0; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--toys-dim); }

/* The big ornament stands on a soft pool of its own light. */
.santa-toys-stage { position: relative; width: min(66vw, 256px); margin: 2px 0 -4px; }
.santa-toys-stage::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 2%;
  height: 18%;
  border-radius: 50%;
  background: var(--toys-stage, radial-gradient(closest-side, rgba(var(--accent-rgb), 0.18), transparent));
  background-size: 100% 100%;
}
.santa-toys-hero-art { position: relative; display: block; width: 100%; aspect-ratio: 1; }

.santa-toys-hero-name { margin: 0; font-size: 22px; font-weight: 750; line-height: 1.15; letter-spacing: -0.01em; color: var(--toys-ink); }
.santa-toys-hero-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; }
.santa-toys-hero-goal { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 300px; margin-top: 2px; }
.santa-toys-hero-goal .santa-toys-cond { font-size: 14px; color: var(--toys-ink); opacity: 0.85; }

.santa-toys-hero .santa-toys-equip.pg-btn {
  width: 100%;
  max-width: 320px;
  min-height: 52px;
  margin-top: 6px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.santa-toys-hero .santa-toys-equip.is-equip {
  color: #2a1a00;
  background: linear-gradient(180deg, #ffe494 0%, #f3b94d 100%);
  border-color: rgba(255, 236, 170, 0.65);
  box-shadow: 0 12px 24px -12px rgba(255, 209, 107, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.santa-toys-hero .santa-toys-equip.is-equip:disabled { opacity: 0.85; }
.santa-toys-hero .santa-toys-equip.is-equipped:disabled { opacity: 1; color: var(--santa-gold); background: rgba(255, 209, 107, 0.09); border-color: rgba(255, 209, 107, 0.36); }
.santa-toys-hero .santa-toys-equip.is-locked:disabled { opacity: 1; color: var(--toys-dim); background: rgba(154, 166, 194, 0.08); border-color: rgba(154, 166, 194, 0.24); }

.santa-toys-link {
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  background: none;
  font: 600 14px/1.2 var(--santa-font);
  color: var(--pg-link, #ffe2a1);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.santa-toys-link:active { opacity: 0.6; }
.santa-toys-link:focus-visible, .santa-toys-pick:focus-visible { outline: 2px solid var(--santa-gold); outline-offset: 2px; border-radius: 10px; }

/* ---------------------------------------------------------------------------------------------------- rarity and status */

.santa-toys-rarity {
  --rarity-ink: #cdd5e6;
  --rarity-line: rgba(205, 213, 230, 0.28);
  --rarity-gem: #cdd5e6;
  --rarity-glow: transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border: 1px solid var(--rarity-line);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rarity-ink);
  background-color: rgba(255, 255, 255, 0.03);
  background-size: 100% 100%;
}
.santa-toys-card .santa-toys-rarity { align-self: flex-start; }
.santa-toys-rarity-gem { flex: none; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: var(--rarity-gem); box-shadow: 0 0 6px var(--rarity-glow); }
.santa-toys-rarity.is-common { background-image: var(--toys-rarity-common, none); }
.santa-toys-rarity.is-rare { --rarity-ink: #cfe0ff; --rarity-line: rgba(207, 224, 255, 0.4); --rarity-gem: #9ec0ff; --rarity-glow: rgba(158, 192, 255, 0.5); background-image: var(--toys-rarity-rare, none); }
.santa-toys-rarity.is-epic { --rarity-ink: #ffd98a; --rarity-line: rgba(255, 209, 107, 0.42); --rarity-gem: #ffd16b; --rarity-glow: rgba(255, 209, 107, 0.5); background-image: var(--toys-rarity-epic, none); }
.santa-toys-rarity.is-legendary { --rarity-ink: #ffc46b; --rarity-line: rgba(255, 179, 71, 0.55); --rarity-gem: #ffb347; --rarity-glow: rgba(255, 179, 71, 0.65); background-image: var(--toys-rarity-legendary, none); }
.santa-toys-rarity.is-mythic { --rarity-ink: #d6f1ff; --rarity-line: rgba(191, 230, 255, 0.6); --rarity-gem: #bfe6ff; --rarity-glow: rgba(191, 230, 255, 0.75); background-image: var(--toys-rarity-mythic, none); }

.santa-toys-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 650; line-height: 1.2; color: var(--toys-dim); }
.santa-toys-status.is-unlocked { color: #7fe3b4; }
.santa-toys-status.is-equipped { color: var(--santa-gold); }
.santa-toys-glyph { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------------------------------------------- the collections */

.santa-toys-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.santa-toys-section-title { margin: 0; font-size: 18px; font-weight: 750; letter-spacing: -0.01em; color: var(--toys-ink); }
.santa-toys-section-count { margin: 0; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--toys-dim); }
.santa-toys-note { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--toys-dim); }
.santa-toys-cosmetic {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  padding: 9px 12px;
  border: 1px solid rgba(154, 166, 194, 0.16);
  border-radius: 12px;
  background: rgba(154, 166, 194, 0.07);
}
.santa-toys-cosmetic .santa-toys-glyph { margin-top: 1px; color: var(--toys-dim); }
.santa-toys-grid {
  display: flex;
  gap: 12px;
  margin: 14px -16px 0;
  padding: 2px 16px 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.santa-toys-grid::-webkit-scrollbar { display: none; }

/* A collectible. */
.santa-toys-card {
  --card-line: rgba(154, 166, 194, 0.18);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 0 0 min(54vw, 204px);
  min-width: 0;
  padding: 6px 10px 12px;
  overflow: hidden;
  border: 1px solid var(--card-line);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(21, 36, 71, 0.96), rgba(13, 25, 54, 0.96));
  box-shadow: 0 16px 28px -18px rgba(2, 6, 18, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.santa-toys-card { scroll-snap-align: start; }
.santa-toys-card.in-santa { background: radial-gradient(90% 44% at 50% 0%, rgba(217, 65, 67, 0.17), transparent 76%), linear-gradient(180deg, rgba(55, 28, 48, 0.97), rgba(18, 26, 53, 0.98)); }
.santa-toys-card.in-deposit { --card-line: rgba(231, 181, 115, 0.3); background: radial-gradient(80% 44% at 50% 0%, rgba(157, 54, 62, 0.25), transparent 75%), linear-gradient(180deg, rgba(49, 28, 48, 0.98), rgba(18, 24, 49, 0.98)); }
.santa-toys-card.in-live { background: radial-gradient(80% 46% at 50% 0%, rgba(var(--accent-rgb), 0.17), transparent 74%), linear-gradient(180deg, rgba(24, 39, 76, 0.98), rgba(11, 21, 48, 0.98)); }
.santa-toys-card.in-special { background: radial-gradient(90% 52% at 50% 0%, rgba(114, 100, 205, 0.21), transparent 74%), linear-gradient(180deg, rgba(31, 33, 78, 0.98), rgba(12, 21, 52, 0.98)); }
/* The registry's frame (Stage 2) sits behind the content; with no file it is a transparent border and nothing shows. */
.santa-toys-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 24px solid transparent;
  border-radius: inherit;
  pointer-events: none;
}
.santa-toys-card.is-locked::before { border-image: var(--toys-frame-locked, none) 48 fill / 24px stretch; }
.santa-toys-card.is-unlocked::before { border-image: var(--toys-frame-unlocked, none) 48 fill / 24px stretch; }
.santa-toys-card.is-equipped::before { border-image: var(--toys-frame-equipped, none) 48 fill / 24px stretch; }

/* Silver for the plain, gold for the rich, ice for the rarest; the locked ones keep a quiet grey. */
.santa-toys-card.is-unlocked.is-common, .santa-toys-card.is-unlocked.is-rare, .santa-toys-card.is-equipped.is-common, .santa-toys-card.is-equipped.is-rare { --card-line: var(--toys-line-silver); }
.santa-toys-card.is-unlocked.is-epic, .santa-toys-card.is-unlocked.is-legendary, .santa-toys-card.is-equipped.is-epic, .santa-toys-card.is-equipped.is-legendary { --card-line: var(--toys-line-gold); }
.santa-toys-card.is-unlocked.is-mythic, .santa-toys-card.is-equipped.is-mythic { --card-line: rgba(200, 236, 255, 0.5); }
.santa-toys-card.is-unlocked, .santa-toys-card.is-equipped { background: linear-gradient(180deg, rgba(27, 46, 90, 0.97), rgba(15, 29, 62, 0.97)); }
.santa-toys-card.is-equipped { box-shadow: 0 16px 28px -18px rgba(2, 6, 18, 0.9), 0 0 0 1px rgba(var(--accent-rgb), 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.santa-toys-card.is-selected { --card-line: rgba(var(--accent-rgb), 0.8); box-shadow: 0 16px 28px -18px rgba(2, 6, 18, 0.9), 0 0 0 1px rgba(var(--accent-rgb), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08); }

/* An unlocked card is brighter and, now and then, a soft band of light crosses it. Slow; the cards are out of step with each other. */
.santa-toys-card.is-unlocked::after, .santa-toys-card.is-equipped::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  z-index: 3;
  width: 46%;
  background: var(--toys-shine, linear-gradient(100deg, rgba(255, 244, 214, 0) 0%, rgba(255, 244, 214, 0.15) 50%, rgba(255, 244, 214, 0) 100%));
  background-size: 100% 100%;
  transform: translateX(-130%) skewX(-18deg);
  animation: santa-toys-sheen 9s ease-in-out infinite;
  pointer-events: none;
}
.santa-toys-card:nth-child(2n)::after { animation-delay: -3.1s; }
.santa-toys-card:nth-child(3n)::after { animation-delay: -6.2s; }
@keyframes santa-toys-sheen {
  0%, 64% { transform: translateX(-130%) skewX(-18deg); }
  84%, 100% { transform: translateX(340%) skewX(-18deg); }
}

.santa-toys-card-art { position: relative; margin: 0 -4px; }
.santa-toys-card-canvas { display: block; width: 100%; aspect-ratio: 1; filter: drop-shadow(0 8px 14px rgba(var(--accent-rgb), 0.2)); }
.santa-toys-card[data-skin="diamond"] .santa-toys-card-canvas,
.santa-toys-card[data-skin="celestial-star"] .santa-toys-card-canvas { filter: drop-shadow(0 0 16px rgba(176, 229, 255, 0.45)); }
.santa-toys-card[data-skin="santas-crown"] .santa-toys-card-canvas,
.santa-toys-card[data-skin="winter-crown"] .santa-toys-card-canvas { filter: drop-shadow(0 0 14px rgba(255, 209, 107, 0.42)); }
.santa-toys-card[data-skin="celestial-star"] { --card-line: rgba(176, 229, 255, 0.65); }
.santa-toys-card[data-skin="diamond"] { --card-line: rgba(179, 227, 255, 0.55); }
.santa-toys-card[data-skin="santas-crown"], .santa-toys-card[data-skin="winter-crown"] { --card-line: rgba(255, 211, 123, 0.55); }
.santa-toys-card-art .santa-toys-status {
  position: absolute;
  top: 8px;
  left: 2px;
  z-index: 1;
  padding: 3px 8px 3px 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font-size: 11px;
  background: rgba(8, 14, 32, 0.66);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

.santa-toys-card-name { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.2; letter-spacing: -0.005em; }
.santa-toys-card-collection { margin: -3px 0 0; color: var(--toys-dim); font-size: 10px; font-weight: 700; letter-spacing: 0.09em; line-height: 1.25; text-transform: uppercase; }
.santa-toys-card.is-locked .santa-toys-card-name { color: rgba(247, 233, 201, 0.78); }
/* The name is the card's button, stretched over the whole card; Share sits above it. */
.santa-toys-pick {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.santa-toys-pick::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 20px; }
.santa-toys-pick:focus-visible { outline: none; }
.santa-toys-pick:focus-visible::after { outline: 2px solid var(--santa-gold); outline-offset: -2px; }

.santa-toys-cond { margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--toys-dim); }
.santa-toys-conditions { display: flex; flex-direction: column; gap: 9px; width: 100%; }
.santa-toys-condition { display: flex; flex-direction: column; gap: 4px; }
.santa-toys-condition.is-complete .santa-toys-cond { color: #9bdcb7; }
.santa-toys-condition .santa-toys-progress { margin-top: 0; padding-top: 0; gap: 4px; }
.santa-toys-condition .santa-toys-bar { height: 7px; }
.santa-toys-condition .santa-toys-nums-count { font-size: 11px; }
.santa-toys-condition .santa-toys-nums-pct { font-size: 10px; }
.santa-toys-card.is-unavailable { filter: saturate(0.62); }
.santa-toys-card.is-unavailable .santa-toys-status { color: #e9c7a6; }

/* The bar: thick, rounded, the ornament's own light; the glow only on what is filled; the number always beside it. */
.santa-toys-progress { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 4px; }
.santa-toys-bar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(4, 9, 22, 0.78);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.santa-toys-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent) 62%, var(--accent-light));
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s;
}
.santa-toys-bar.is-empty .santa-toys-bar-fill { opacity: 0; box-shadow: none; }
.santa-toys-card.is-locked .santa-toys-bar-fill { box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
.santa-toys-nums { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-variant-numeric: tabular-nums; }
.santa-toys-nums-count { font-size: 13px; font-weight: 700; color: var(--toys-ink); }
.santa-toys-nums-pct { font-size: 12px; font-weight: 650; color: var(--accent-light); }

.santa-toys-card-foot { position: relative; z-index: 4; margin-top: 2px; }
.santa-toys-card .santa-toys-share.pg-btn {
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--toys-ink);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}

/* Narrow phones (320 wide): a little less padding, so the cards keep their breathing room. */
@media (max-width: 340px) {
  .santa-toys-inner { padding-left: 12px; padding-right: 12px; }
  .santa-toys-grid { gap: 10px; }
  .santa-toys-card { padding: 5px 8px 10px; }
  .santa-toys-card-name { font-size: 13.5px; }
  .santa-toys-card .santa-toys-rarity { padding: 3px 8px 3px 7px; font-size: 10px; letter-spacing: 0.04em; }
}

/* Asked for less motion: the sheen is gone, the bars take their value at once. */
@media (prefers-reduced-motion: reduce) {
  .santa-toys-card.is-unlocked::after, .santa-toys-card.is-equipped::after { animation: none; display: none; }
  .santa-toys-bar-fill, .santa-toys-hero, .santa-toys-card { transition: none; }
}