/* V64.31 — collection interpretation of the owner UI kit, not a new store.
   Prices, ownership, progress, unlock/equip and payment flows remain live. */
.cosmetics-screen { padding-top: 16px; padding-bottom: 14px; }
.cosmetics-screen :is(h1,h2,strong,b,button,small,p,span) { font-family: var(--spark-font-ui); }
.cosmetics-screen .cosmetic-hero { align-items: start; gap: 12px; }
.cosmetics-screen .cosmetic-hero h1 { font-size: 30px; line-height: 1.08; font-weight: 700; letter-spacing: -.015em; }
.cosmetics-screen .eyebrow { font-size: 11px; color: #84caff; letter-spacing: .16em; }
.cosmetics-screen .cosmetic-hero .muted { font-size: 13px; line-height: 18px; color: #aec7e5; }
.cosmetics-screen .cosmetic-balance { min-width: 76px; padding: 11px 9px; background: #06172b; border-color: #0ca4ce66; }
.cosmetics-screen .cosmetic-balance span { font-size: 11px; letter-spacing: .04em; }
.cosmetics-screen .cosmetic-balance strong { font-size: 23px; line-height: 26px; font-variant-numeric: tabular-nums; }
.cosmetics-screen .cosmetic-showcase { min-height: 260px; margin: 14px 0; border-radius: 20px; background: radial-gradient(ellipse at 50% 40%, #123b6d88, transparent 65%), #030b19; }
.cosmetics-screen .cosmetic-showcase .spark-stage { width: 100%; min-height: 218px; margin: 0 0 42px; transform: none; background: none; }
.cosmetics-screen .cosmetic-showcase .spark-visual { width: 230px; max-width: 80%; }
.cosmetics-screen .cosmetic-showcase .spark-character { max-height: 230px; }
.cosmetics-screen .cosmetic-showcase .spark-aura { width: 184px; }
.cosmetics-screen .cosmetic-showcase > div:last-child { min-height: 37px; padding-top: 9px; bottom: 8px; }
.cosmetics-screen .cosmetic-showcase > div:last-child span { font-size: 11px; letter-spacing: .06em; }
.cosmetics-screen .cosmetic-showcase > div:last-child strong { font-size: 17px; text-align: right; }
.cosmetics-screen .cosmetic-tabs { gap: 6px; }
.cosmetics-screen .cosmetic-tabs button { min-width: 0; min-height: 44px; padding: 6px 3px; font-size: 13px; line-height: 16px; letter-spacing: 0; border-radius: 12px; background: #061226; }
.cosmetics-screen .cosmetic-tabs button.active { color: #fff; border-color: #ac66ff; background: linear-gradient(130deg, #8d24db, #3125a4); box-shadow: inset 0 1px #ddb2ff38, 0 0 12px #882cda26; }
.cosmetics-screen .cosmetic-card { border-radius: 17px; background: linear-gradient(145deg, #0a1730, #040b18); border-color: #1b4675; }
.cosmetics-screen .cosmetic-card.active { border-color: #00d7ed; background: linear-gradient(145deg, #082838, #070e24); box-shadow: inset 0 1px #94efff26, 0 0 14px #00d5ff12; }
.cosmetics-screen .cosmetic-card.owned:not(.active) { border-color: #376570; }
.cosmetics-screen .cosmetic-preview { border: 0; background: radial-gradient(ellipse at center, #12496a66, transparent 70%); }
.cosmetics-screen .cosmetic-card.locked .cosmetic-preview { opacity: 1; filter: none; }
.cosmetics-screen .cosmetic-card.locked .cosmetic-preview img { opacity: 1; filter: drop-shadow(0 0 8px #00aaff22); }
.cosmetics-screen .cosmetic-name { flex-wrap: wrap; gap: 4px 8px; }
.cosmetics-screen .cosmetic-name h2 { font-size: 19px; line-height: 22px; font-weight: 700; }
.cosmetics-screen .cosmetic-name span { font-size: 10px; line-height: 14px; color: #8dbeed; letter-spacing: .04em; }
.cosmetics-screen .cosmetic-copy p { font-size: 13px; line-height: 17px; color: #abc5e5; }
.cosmetics-screen .cosmetic-action { min-height: 44px; padding: 8px 6px; font-size: 13px; line-height: 16px; letter-spacing: .02em; border-radius: 11px; }
.cosmetics-screen .cosmetic-action.unlock { border: 1px solid #9d75ff; background: var(--spark-primary-fill); color: #fff; }
.cosmetics-screen .cosmetic-action.equipped { opacity: 1; color: #62f6b4; background: #06332a; border-color: #11b87566; }
.cosmetics-screen .cosmetic-action.premium { border-color: #b7913f80; background: linear-gradient(120deg, #342140, #19172c); color: #ffdb74; }
.cosmetics-screen .cosmetic-card-progress span,
.cosmetics-screen .cosmetic-card-progress strong { font-size: 11px; line-height: 14px; letter-spacing: 0; }
.cosmetics-screen .cosmetic-card-progress > div:first-child { flex-wrap: wrap; gap: 3px 6px; }
.cosmetics-screen .cosmetic-premium-source { padding: 7px; gap: 6px; grid-template-columns: 20px minmax(0,1fr); }
.cosmetics-screen .cosmetic-premium-source > span { width: 20px; height: 26px; }
.cosmetics-screen .cosmetic-premium-source strong { font-size: 10px; letter-spacing: .015em; }
.cosmetics-screen .cosmetic-premium-source small { font-size: 11px; line-height: 14px; color: #b9b6cd; }
/* Skins are a gallery; effect/frame categories retain their compact list. */
.cosmetics-screen .cosmetic-grid[data-cosmetic-kind="skin"] { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.cosmetics-screen [data-cosmetic-kind="skin"] .cosmetic-card { display: flex; flex-direction: column; align-items: stretch; min-width: 0; padding: 10px; gap: 10px; }
.cosmetics-screen [data-cosmetic-kind="skin"] .cosmetic-preview { width: 100%; height: clamp(126px, 36vw, 148px); overflow: hidden; border-radius: 12px; }
.cosmetics-screen [data-cosmetic-kind="skin"] .cosmetic-preview img { width: 100%; height: 100%; object-fit: contain; }
.cosmetics-screen [data-cosmetic-kind="skin"] .cosmetic-copy { flex: 1; }
.cosmetics-screen [data-cosmetic-kind="skin"] .cosmetic-name { display: grid; gap: 4px; }
.cosmetics-screen [data-cosmetic-kind="skin"] .cosmetic-action { margin: 0; }
.cosmetics-screen :is(.cosmetic-goal,.cosmetic-earn) { padding: 14px; border-radius: 17px; background: linear-gradient(135deg, #0b1e33, #090e20); }
.cosmetics-screen .cosmetic-goal h2 { font-size: 20px; }
.cosmetics-screen :is(.cosmetic-goal p,.cosmetic-earn-list small,.cosmetic-store-note p) { font-size: 13px; line-height: 18px; }
.cosmetics-screen :is(.cosmetic-goal-foot button,.cosmetic-earn-actions button) { min-height: 44px; font-size: 12px; line-height: 16px; }
.cosmetics-screen .cosmetic-goal-foot { flex-wrap: wrap; }
.cosmetics-screen .cosmetic-earn-head strong { font-size: 20px; }
.cosmetics-screen .cosmetic-earn-list b { font-size: 15px; }
.cosmetics-screen .cosmetic-store-note { border-radius: 16px; padding: 14px; }
/* Match the Home navigation's legible icons without altering other screens. */
body:has(.cosmetics-screen) .app-shell { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
body:has(.cosmetics-screen) .bottom-nav { left: 50%; right: auto; width: min(100%,420px); transform: translateX(-50%); min-height: 64px; padding: 8px 14px calc(9px + env(safe-area-inset-bottom, 0px)); border-radius: 0; background: #020a16f5; }
body:has(.cosmetics-screen) .bottom-nav button { display: grid; grid-template-rows: 25px 16px; align-content: center; justify-items: center; min-height: 44px; font-size: 12px; line-height: 16px; color: #7f9ac9; }
body:has(.cosmetics-screen) .bottom-nav button > span { display: grid; place-items: center; width: 25px; height: 25px; }
body:has(.cosmetics-screen) .bottom-nav .nav-icon { width: 23px; height: 23px; fill: currentColor; }
body:has(.cosmetics-screen) .bottom-nav button.active { color: #bb6bff; }
@media (max-width: 350px) {
  .cosmetics-screen .cosmetic-hero h1 { font-size: 26px; }
  .cosmetics-screen [data-cosmetic-kind="skin"] .cosmetic-card { padding: 8px; }
  .cosmetics-screen .cosmetic-name h2 { font-size: 18px; }
}