/* ==========================================================================
   COSMETICS, SECOND WAVE — the seven new sets, banners as pixel art, and the Diamond league.
   Ids are in server/bp-catalog.js; drawing for skies/ground is the shader (js/04f-sky.js), banners are
   painted by js/45b-cosmetic-art.js, texture filters live in js/45-cosmetics.js. Motion here is only
   on Legendary and Diamond items (and a few older ones that already moved); prefers-reduced-motion stops it all.
   ========================================================================== */
@property --ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes cz-ang{ to{ --ang:360deg; } }
@keyframes cz-sheen2{ from{ background-position:150% 0; } to{ background-position:-150% 0; } }
@keyframes cz-glitch{
  0%, 90%, 100%{ text-shadow:1px 0 #ff3fa3, -1px 0 #39d0ff; transform:none; }
  91%{ text-shadow:-3px 0 #ff3fa3, 3px 0 #39d0ff; transform:translateX(1px); }
  93%{ text-shadow:3px 0 #ff3fa3, -3px 0 #39d0ff; transform:translateX(-1px) skewX(-6deg); }
  95%{ text-shadow:-2px 1px #ff3fa3, 2px -1px #39d0ff; transform:none; } }

/* ---- Usernames ---- */
.cz-fb_name, .cz-ef_name, .cz-vg_name, .cz-sa_name, .cz-cp_name, .cz-sp_name{ -webkit-background-clip:text; background-clip:text; color:transparent; }
.cz-fb_name{ background-image:linear-gradient(180deg,#fff,#a9dcff 55%,#5aa8ff); filter:drop-shadow(0 0 4px #9fd8ff77); letter-spacing:.02em; }
.cz-ef_name{ background-image:linear-gradient(180deg,#ffd98a,#ff7a1a 55%,#b32000); filter:drop-shadow(0 0 5px #ff6a1a77); }
.cz-vg_name{ background-image:linear-gradient(90deg,#b6f27a,#2fae4a); }
.cz-sa_name{ background-image:linear-gradient(100deg,#c79a2e 20%,#fff0b0 40%,#c79a2e 60%); background-size:200% 100%; animation:cz-sheen 4.5s linear infinite; }
.cz-cp_name{ background-image:linear-gradient(90deg,#ff8fc8,#ffd6ec 45%,#7fe8d0); -webkit-text-stroke:.4px #ffffff66; }
.cz-sp_name{ background-image:linear-gradient(180deg,#fff3b0,#e0a82a 55%,#8a5a10); filter:drop-shadow(0 1px 0 #4a2a00); }
.cz-cc_name{ display:inline-block; color:#8ffcff; text-shadow:1px 0 #ff3fa3, -1px 0 #39d0ff; animation:cz-glitch 3.2s steps(1) infinite; }
/* Diamond: the gradient, a red glow, and a cyan pulse of light travelling along it */
.cz-dm2610_name{ background-image:linear-gradient(100deg,#3a0a0a 0%,#e01b1b 22%,#ff6a2a 38%,#d8ffff 50%,#ff6a2a 62%,#e01b1b 78%,#3a0a0a 100%); background-size:260% 100%; animation:cz-sheen 3.6s linear infinite;
  filter:drop-shadow(0 0 4px #ff3a1a99) drop-shadow(0 0 1px #55ffff); }

/* ---- Profile frames (rings around the picture; .cos-avatar::after is the ring, ::before is free for extras) ---- */
.cz-fb_frame::after{ border-color:#dff3ff !important; box-shadow:0 0 0 2px #7fc8ff, 0 0 10px #bfe6ffaa; }
.cz-fb_frame::before{ content:''; position:absolute; inset:calc(var(--av) * -.2); border-radius:50%; pointer-events:none; opacity:.9;
  background:repeating-conic-gradient(#fff 0 5deg, transparent 5deg 60deg); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - var(--av) * .09), #000 0); mask:radial-gradient(farthest-side, transparent calc(100% - var(--av) * .09), #000 0); }
.cz-ef_frame::after{ border-color:#ff7a1a !important; box-shadow:0 0 0 2px #ffc13a, 0 0 12px #ff5a0aaa, inset 0 0 6px #ff7a1a88; }
.cz-vg_frame::after{ border-color:#3f9a3a !important; border-style:dotted !important; box-shadow:0 0 0 2px #9be36a; }
.cz-sa_frame::after{ border-color:#29d6c8 !important; box-shadow:0 0 0 2px #0c3a46, 0 0 14px #5fffe8; animation:cz-pulse 2.6s ease-in-out infinite; }
.cz-cp_frame::after{ border-color:transparent !important; background:repeating-conic-gradient(#ff8fc8 0 18deg, #fff 18deg 36deg) border-box;
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - var(--av) * .1), #000 0); mask:radial-gradient(farthest-side, transparent calc(100% - var(--av) * .1), #000 0); }
.cz-cc_frame::after{ border-color:transparent !important; background:conic-gradient(#39d0ff, #ff3fa3, #ffe14d, #39d0ff) border-box; animation:cz-spin 5s linear infinite;
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - var(--av) * .1), #000 0); mask:radial-gradient(farthest-side, transparent calc(100% - var(--av) * .1), #000 0); }
.cz-sp_frame::after{ border-color:#e8b93a !important; box-shadow:0 0 0 2px #5a3a08, 0 0 8px #e8b93a88; }
.cz-sp_frame::before{ content:''; position:absolute; top:calc(var(--av) * -.2); left:calc(50% - var(--av) * .09); width:calc(var(--av) * .18); height:calc(var(--av) * .18); transform:rotate(45deg); z-index:2; background:#29d6c8; border:1px solid #ffffff99; box-shadow:0 0 6px #29d6c8; }
/* Diamond: a spinning blood-and-obsidian ring with a thin cyan halo that pulses */
.cz-dm2610_frame::after{ border-color:transparent !important; background:conic-gradient(#140a0c, #e01b1b, #ff6a2a, #140a0c, #e01b1b, #140a0c) border-box; animation:cz-spin 5s linear infinite; box-shadow:0 0 14px #e01b1baa;
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - var(--av) * .1), #000 0); mask:radial-gradient(farthest-side, transparent calc(100% - var(--av) * .1), #000 0); }
.cz-dm2610_frame::before{ content:''; position:absolute; inset:calc(var(--av) * -.2); border-radius:50%; pointer-events:none; border:1px solid #55ffff; box-shadow:0 0 8px #55ffffaa; animation:cz-pulse 2.8s ease-in-out infinite; }

/* ---- Post styles (on .cm-post) ---- */
.cos-post{ position:relative; }
.cos-post.cz-fb_post{ border:2px solid #bfe6ff; background:linear-gradient(135deg,#ffffff18,transparent 42%), var(--bg-3); box-shadow:inset 0 0 18px #7fc8ff33, 0 0 0 1px #ffffff22; }
.cos-post.cz-ef_post{ border:3px solid #2a2523; color:#f4ece4; box-shadow:inset 0 0 0 1px #ff7a1a66;
  background:radial-gradient(circle at 8px 8px,#8a8580 0 2px,transparent 3px), radial-gradient(circle at calc(100% - 8px) 8px,#8a8580 0 2px,transparent 3px), radial-gradient(circle at 8px calc(100% - 8px),#8a8580 0 2px,transparent 3px), radial-gradient(circle at calc(100% - 8px) calc(100% - 8px),#8a8580 0 2px,transparent 3px), linear-gradient(#ffffff08,#00000030), #22201f; }
.cos-post.cz-ef_post .mono-dim{ color:#c9b8a8; }
.cos-post.cz-vg_post{ border:3px ridge #2e6b2a; background:radial-gradient(circle at 0 0,#3f9a3a66,transparent 32%), radial-gradient(circle at 100% 100%,#3f9a3a66,transparent 32%), var(--bg-3); }
.cos-post.cz-sa_post{ border:2px solid #3fbfae; background:repeating-linear-gradient(45deg,#2fa89a18 0 6px,transparent 6px 12px), var(--bg-3); box-shadow:0 0 10px #3fe0c855; }
.cos-post.cz-cp_post{ border:0; border-top:10px solid #ff9ccf; border-radius:12px; background:radial-gradient(#ffd84d 1.5px,transparent 2px) 0 0/22px 22px, radial-gradient(#7fe8d0 1.5px,transparent 2px) 11px 11px/22px 22px, var(--bg-3); }
.cos-post.cz-cc_post{ background:#050a08; color:#7dffb0; border:1px solid #1fe07a; box-shadow:0 0 14px #1fe07a44; font-family:var(--font-body); padding-top:30px !important; }
.cos-post.cz-cc_post::before{ content:'● ● ●   terminal'; position:absolute; top:0; left:0; right:0; padding:6px 12px; font-size:11px; letter-spacing:.04em; color:#1fe07a; background:#0b1a12; border-bottom:1px solid #1fe07a55; }
.cos-post.cz-cc_post .mono-dim{ color:#4fbf84; }
.cos-post.cz-sp_post{ background:linear-gradient(#e6d3a0,#d9c186); color:#3b2a10; border:2px solid #b8892b; border-radius:10px; box-shadow:inset 0 0 0 3px #e6d3a0, inset 0 0 0 4px #b8892b88; }
.cos-post.cz-sp_post .mono-dim{ color:#6b5128; }
/* Diamond: a moving iridescent edge around dark glass */
.cos-post.cz-dm2610_post{ border:2px solid transparent; box-shadow:0 0 18px #55ffff22, 0 0 12px #d0181833;
  background:linear-gradient(#120a0e,#120a0e) padding-box, conic-gradient(from var(--ang), #55ffff, #8a0d16, #ff3a1c, #ffffff, #55ffff) border-box; animation:cz-ang 7s linear infinite; }

/* ---- Banners: pixel art painted by js/45b-cosmetic-art.js (each id gets its own .cz-<id> rule with the picture) ---- */
.cos-banner, .cos-bg{ background-size:cover; background-position:center bottom; image-rendering:pixelated; }
.cos-banner{ height:64px; border-radius:var(--r-lg) var(--r-lg) 0 0; position:relative; overflow:hidden; }
.cos-banner-none{ background:linear-gradient(120deg,var(--bg-4),var(--bg-2)); }
/* Legendary and Diamond banners shimmer */
.cz-banner_beacon::after, .cz-cc_banner::after, .cz-dm2610_banner::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, #ffffff3a 50%, transparent 62%) 0 0/260% 100%; animation:cz-sheen2 5.5s linear infinite; }
.cos-banner.cz-dm2610_banner{ box-shadow:inset 0 0 0 1px #55ffff66, inset 0 -18px 28px #8a0d1688; }

/* A banner that is worn becomes the header of a post or shared build — full strength, so it clearly differs from none */
.has-banner{ position:relative; isolation:isolate; overflow:hidden; }
.has-banner > .cos-bg{ position:absolute; left:0; right:0; top:0; height:60px; z-index:-1; pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 60%, transparent); mask-image:linear-gradient(#000 60%, transparent); }
.cm-post.has-banner{ padding-top:76px; }
.cm-post.has-banner .cm-post-head{ text-shadow:0 1px 3px rgba(0,0,0,.65); }
.cm-card.has-banner > .cos-bg{ height:34px; z-index:3; -webkit-mask-image:linear-gradient(#000 40%, transparent); mask-image:linear-gradient(#000 40%, transparent); }
.chat-row.has-banner > .cos-bg, .chat-thread-head.has-banner > .cos-bg{ height:100%; opacity:.5; -webkit-mask-image:linear-gradient(90deg, transparent 15%, #000); mask-image:linear-gradient(90deg, transparent 15%, #000); }
@media (prefers-reduced-motion: reduce){ [class*="cz-"], [class*="cz-"]::before, [class*="cz-"]::after{ animation:none !important; } }

/* ======================= Shop: each kind of cosmetic has its own shape ======================= */
.mk-daily{ display:grid; grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); grid-auto-flow:dense; gap:14px; }
.mk-daily .mk-card[data-slot=banner], .mk-row .mk-card[data-slot=banner]{ grid-column:span 2; }
.mk-foot-note{ margin:14px 0 0; }
.mk-card .mk-prev{ --ar:1 / 1; aspect-ratio:var(--ar); }
.mk-card[data-slot=sky_day] .mk-prev, .mk-card[data-slot=sky_night] .mk-prev, .mk-card[data-slot=ground] .mk-prev{ --ar:16 / 10; }
.mk-card[data-slot=banner] .mk-prev{ --ar:16 / 6.2; }
.mk-card[data-slot=username] .mk-prev{ --ar:2 / 1; }
.mk-card[data-slot=texture] .mk-prev{ --ar:2 / 1; }
.mk-card[data-slot=post] .mk-prev{ --ar:4 / 3.4; }
.mk-card[data-slot=frame] .mk-prev{ --ar:1 / 1; background:radial-gradient(70% 70% at 50% 50%, color-mix(in srgb, var(--rc) 36%, transparent), transparent 75%), var(--bg-1); }
.mk-card[data-slot=username] .mk-prev{ background:linear-gradient(135deg, var(--bg-3), var(--bg-1)); }
.mk-card .mk-prev .cos-tile{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.mk-card .mk-prev .ct-scene{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; image-rendering:auto; }
.mk-card .mk-prev .ct-tex{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; image-rendering:pixelated; }
.mk-card .mk-prev .ct-chat{ display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--bg-2); border:1px solid var(--border-soft); border-radius:12px; }
.ct-chat p{ margin:2px 0 0; font-size:12px; color:var(--text-dim); }
.ct-nm{ font-weight:700; font-size:15px; }
.mk-card .mk-prev .ct-profile{ position:absolute; inset:0; display:flex; flex-direction:column; border-radius:0; background:var(--bg-2); }
.ct-profile .ct-pbanner{ flex:1; min-height:0; background-size:cover; background-position:center; image-rendering:pixelated; }
.ct-profile .ct-prow{ display:flex; align-items:center; gap:10px; padding:8px 12px; margin-top:-14px; position:relative; }
.ct-pname{ display:grid; line-height:1.15; font-weight:700; font-size:13px; text-shadow:0 1px 2px rgba(0,0,0,.4); }
.ct-pname small{ font-weight:500; font-size:10.5px; color:var(--text-dim); }
.ct-profile.big .ct-pname{ font-size:16px; }
.ct-post{ padding:10px 12px !important; gap:6px !important; border-radius:12px !important; width:84%; font-size:11px; }
.ct-post .cm-post-head{ gap:6px; }
.ct-post .cm-post-body{ margin:0; font-size:11px; }
.ct-post.has-banner{ padding-top:46px !important; }
.ct-img{ display:block; height:22px; border-radius:6px; background:linear-gradient(120deg,var(--bg-4),var(--bg-3)); }
.mk-card .mk-prev .ct-post{ position:relative; }
.mk-card .mk-prev .ct-frame{ display:grid; place-items:center; }
.mk-flag.hot{ background:#e8412a; border-color:transparent; }
.mk-card .mk-prev .mk-flag{ right:auto; left:8px; }
.mk-gem{ display:inline-block; width:14px; height:14px; transform:rotate(45deg); border-radius:3px; background:conic-gradient(from 0deg,#7ff,#9bf,#f9f,#7ff); box-shadow:0 0 10px #5ff9; }
.mk-card .mk-prev > .mk-gem{ position:absolute; right:10px; top:10px; z-index:2; }

/* ---- set cards ---- */
.mk-sets{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.mk-set-card{ position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); border:1px solid var(--border); border-radius:18px; overflow:hidden; background:var(--bg-2); }
.mk-set-art{ position:relative; min-height:230px; background:var(--bg-1); }
.mk-set-art .ct-scene{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mk-set-badge{ position:absolute; left:12px; top:12px; z-index:2; padding:4px 11px; border-radius:99px; font:700 12.5px var(--font-body); background:#ffd23f; color:#241a00; box-shadow:0 4px 14px rgba(0,0,0,.35); }
.mk-set-badge.own{ background:var(--bg-4); color:var(--text-dim); box-shadow:none; }
.mk-set-body{ display:flex; flex-direction:column; gap:8px; padding:16px 18px 18px; min-width:0; }
.mk-set-body h4{ margin:0; font:700 21px/1.15 var(--font-display); }
.mk-set-body .mk-hint{ margin:0; }
.mk-set-items{ display:flex; flex-wrap:wrap; gap:5px; }
.mk-set-chip{ --rc:var(--r-common); padding:3px 9px; font:600 11.5px var(--font-body); border-radius:99px; cursor:pointer; color:var(--text); background:var(--bg-3); border:1px solid color-mix(in srgb, var(--rc) 55%, transparent); }
.mk-set-chip[data-rarity=uncommon]{ --rc:var(--r-uncommon); } .mk-set-chip[data-rarity=rare]{ --rc:var(--r-rare); } .mk-set-chip[data-rarity=epic]{ --rc:var(--r-epic); } .mk-set-chip[data-rarity=legendary]{ --rc:var(--r-legendary); }
.mk-set-chip.owned{ opacity:.55; text-decoration:line-through; }
.mk-set-chip:hover{ background:color-mix(in srgb, var(--rc) 22%, var(--bg-3)); }
.mk-set-buy{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding-top:6px; }
.mk-set-price{ font-size:18px; }
.mk-set-price .bp-amt{ color:var(--accent-strong); }
.mk-set-note{ margin:6px 0; padding:8px 11px; border-radius:10px; background:var(--accent-soft); font-size:13px; }

/* ---- Diamond: a league of its own ---- */
.mk-diamond{ position:relative; isolation:isolate; padding:22px 22px 24px; border-radius:22px; border:1px solid transparent;
  background:linear-gradient(160deg,#07101c,#0d0a1d 55%,#070b14) padding-box, conic-gradient(from var(--ang,0deg),#5ff,#8af,#f8f,#fd6,#5ff) border-box;
  animation:cz-ang 9s linear infinite; box-shadow:0 0 0 1px #0004, 0 18px 70px #3be4ff22, inset 0 0 90px #7a5cff14; }
.mk-diamond::before{ content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:radial-gradient(60% 50% at 15% 0%, #4ff2, transparent 70%), radial-gradient(50% 60% at 100% 100%, #f6f2, transparent 70%); }
.mk-diamond .mk-shelf-head h3{ font-size:24px; background:linear-gradient(90deg,#aef,#fff,#fbe); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:.02em; }
.mk-diamond .mk-hint{ color:#a9c4de; }
.mk-diamond-lead{ margin:0 0 16px; max-width:60ch; color:#cfe3f5; font-size:14px; }
.mk-diamond .mk-card{ background:#0a1220; border-color:#5ff3; }
.mk-diamond .mk-card .mk-body{ border-top:2px solid transparent; border-image:linear-gradient(90deg,#5ff,#a8f,#f8c) 1; }
.mk-card[data-rarity=exclusive]:hover{ box-shadow:0 14px 40px #4ff3, 0 0 0 1px #7ff6; }
.mk-card[data-rarity=exclusive] .mk-rarity{ background:linear-gradient(90deg,#7ff,#9bf,#f9f); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mk-detail-diamond .mk-prev-big{ box-shadow:0 0 0 1px #5ff6, 0 10px 50px #4ff3; border-radius:var(--r-lg); }

/* ---- the item dialog's stage ---- */
.mk-detail .mk-prev-big{ display:block; min-height:0; background:none; overflow:visible; }
.cos-stage{ display:grid; gap:12px; }
.cos-stage > .cos-tile{ position:relative; border-radius:14px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--bg-3); min-height:120px; }
.cos-stage-sky_day > .cos-tile, .cos-stage-sky_night > .cos-tile, .cos-stage-ground > .cos-tile{ aspect-ratio:16 / 10; }
.cos-stage > .cos-tile .ct-scene{ width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0; }
.cos-stage-texture > .cos-tile{ aspect-ratio:2 / 1; padding:0; }
.cos-stage-texture .ct-tex{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; image-rendering:pixelated; }
.cos-stage-banner > .cos-tile, .cos-stage-frame > .cos-tile, .cos-stage-username > .cos-tile{ padding:0; display:block; }
.cos-stage-banner > .cos-tile{ aspect-ratio:16 / 8; }
.cos-stage-banner .ct-profile{ position:absolute; inset:0; display:flex; flex-direction:column; }
.cos-stage-frame > .cos-tile{ min-height:190px; background:radial-gradient(60% 70% at 50% 50%, #ffffff12, transparent), var(--bg-1); display:grid; place-items:center; }
.cos-stage-username > .cos-tile{ min-height:90px; display:grid; place-items:center; }
.cos-stage > .ct-post, .cos-stage .cm-post{ width:100%; margin:0; }
.cos-stage-post > .cos-tile{ min-height:170px; background:var(--bg-1); }
.cos-stage > .ct-profile{ border-radius:14px; overflow:hidden; background:var(--bg-2); border:1px solid var(--border-soft); }
.cos-stage > .ct-profile .ct-pbanner{ height:56px; flex:none; }

@media (max-width: 900px){ .mk-sets{ grid-template-columns:minmax(0,1fr); } }
@media (max-width: 600px){
  .mk-set-card{ grid-template-columns:minmax(0,1fr); } .mk-set-art{ min-height:170px; }
  .mk-daily{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .mk-diamond{ padding:16px 14px 18px; }
}
@media (prefers-reduced-motion: reduce){ .mk-diamond{ animation:none; } }
.mk-card .mk-body{ grid-template-columns:minmax(0,1fr); min-width:0; }
.mk-card .mk-body > b{ overflow-wrap:anywhere; }
.mk-detail{ align-items:start; }
@media (max-width: 640px){ .mk-detail{ grid-template-columns:minmax(0,1fr); } }