/* ============================================================
   Steam-style profile themes. One .theme-<id> class on .profile-card
   re-skins the WHOLE card: token overrides (frame, accent, ring, card
   gradient, tiles, hero tint, tabs) PLUS per-theme descendant rules -
   avatar frame SHAPES, gradient borders, hero patterns and motion -
   so each theme reads as a different skin, not a recolour (Steam
   profile-theme vibe). Tier-agnostic: loads after .tier-frame-* and
   wins the cascade at equal specificity. IDs match the seeded Theme
   catalog (SeedData).

   The per-style rules themselves moved to wwwroot/styles/<id>/style.css
   (one folder per style, manifest alongside) and are served concatenated
   by StylePackCatalog. What is left here is the shared base that belongs
   to NO single style: the try-on preview, the shop tiles, the avatar-img
   radius inherit, and the keyframes two or more styles share.

   Cascade sandwich - do not reorder the links in ChronosHead.razor:
     22-profile-themes.css  (this file)   ->  wins over .shop-preview-* only
     styles/<id>/style.css  (the packs)   ->  frame rules beat the preview box
     27-avatar-shapes-base.css            ->  shape clipping beats frame decor
   Both neighbours tie with the packs at (0,3,0), so source order is the only
   thing deciding those two ties.
   ============================================================ */

/* ---- Steam-style try-on preview (inside the customization modal) ----
   A miniature .profile-card so the theme token set applies for free; the hovered
   theme class / background swap in live before the user commits. */
.theme-modal-card .profile-card.shop-preview {
  width: 100%;
  max-height: none;
  overflow: hidden;
  margin: 0 0 16px;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px var(--accent),
    0 0 24px color-mix(in srgb, var(--accent) 30%, transparent);
  pointer-events: none;
  transition: box-shadow 0.2s ease-out;
}
.shop-preview .profile-hero.shop-preview-hero {
  height: 58px;
  border-radius: 12px 12px 0 0;
}
.shop-preview .profile-hero.shop-preview-hero::before { border-radius: 12px 12px 0 0; }
.shop-preview .hero-streak { top: 10px; right: 16px; }
.shop-preview .hero-streak-count { font-size: 24px; }
.shop-preview .hero-streak-fire { font-size: 14px; }
.shop-preview-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px 12px;
  margin-top: -20px;
}
.shop-preview .profile-avatar.shop-preview-avatar {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  border-width: 2px;
}
.shop-preview-avatar .profile-avatar-initial { font-size: 20px; }
.shop-preview-name { font-size: 15px; font-weight: 800; color: #fff; padding-top: 18px; }
.shop-preview .profile-stat.shop-preview-stat {
  margin-left: auto;
  margin-top: 18px;
  padding: 5px 10px;
}
.shop-preview .profile-stat-value { font-size: 14px; min-height: 0; }

/* ---- Theme shop (inside the customization modal) ---- */
.theme-shop {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.theme-shop-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.theme-shop-tile.is-equipped {
  border-color: rgba(255, 215, 0, 0.55);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.25);
}
.theme-shop-swatch {
  height: 46px;
  border-radius: 8px;
  border: 2px solid;
}
.theme-shop-name {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.theme-shop-btn {
  padding: 5px 8px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(124, 58, 237, 0.25);
  color: #ede9fe;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.theme-shop-btn:hover:not(:disabled) { opacity: 0.85; transform: translateY(-1px); }
.theme-shop-btn:disabled { cursor: not-allowed; opacity: 0.45; }
.theme-shop-buy { background: rgba(56, 189, 248, 0.18); color: #bae6fd; }
.theme-shop-state {
  font-size: 10px;
  font-weight: 800;
  color: #fde68a;
  letter-spacing: 0.06em;
}
.theme-shop-locked { color: #a79ec6; }

/* ---- Shared theme plumbing ----
   v0.4.65: avatar-frame rules are keyed by .frame-<id> (not .theme-<id>) so the frame
   can be equipped separately from the profile style after the paid unbundle. The razor
   always emits a frame class (defaulting to the equipped style theme), so linked
   profiles look exactly as before.
   The photo follows the frame's container shape unconditionally - the old five-theme
   whitelist left wave-2 frames (chronometer, star-chart, abyss, ...) with an 11px
   square photo poking out of round frames. Badges/uploader sit outside the border box
   and stay untouched. */
.profile-card .profile-avatar .profile-avatar-img {
  border-radius: inherit;
}

@keyframes theme-shimmer {
  from { background-position: 220% 0; }
  to   { background-position: -120% 0; }
}
@keyframes theme-spin { to { transform: rotate(360deg); } }
@keyframes theme-pulse-red {
  0%, 100% { box-shadow: 0 0 16px rgba(233, 69, 96, 0.35), 0 6px 18px rgba(0,0,0,0.5); }
  50%      { box-shadow: 0 0 30px rgba(233, 69, 96, 0.65), 0 6px 18px rgba(0,0,0,0.5); }
}
@keyframes theme-flicker {
  0%, 100% { box-shadow: 0 0 14px rgba(255, 120, 40, 0.4), 0 6px 18px rgba(0,0,0,0.5); }
  42%      { box-shadow: 0 0 28px rgba(255, 150, 60, 0.75), 0 6px 18px rgba(0,0,0,0.5); }
  58%      { box-shadow: 0 0 18px rgba(255, 120, 40, 0.5), 0 6px 18px rgba(0,0,0,0.5); }
}