/* StarRex Cosmetics — opt-in themes + animated banner effects.
   Nothing here applies unless a player has bought AND equipped an item, so the default
   look of every page (background video, ambient mode, panels) is left exactly as it was.
   Themes layer a tint + a slow animated overlay on top of the normal page; they never replace
   the background. Item ids match utils/cosmetics.js. */

/* ============================== UI THEMES ============================== */
body[data-cx-theme]::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;contain:strict;
  mix-blend-mode:screen;opacity:.55;
}
html body[data-cx-theme] .card,
html body[data-cx-theme] .gate,
html body[data-cx-theme] .exchange-nav,
html body[data-cx-theme] .nav,
html body[data-cx-theme] .feature,
html body[data-cx-theme] .hero-showcase,
html body[data-cx-theme] .terminal,
html body[data-cx-theme] .telemetry-card,
html body[data-cx-theme] .server-card,
html body[data-cx-theme] .version,
html body[data-cx-theme] .ann-card,
html body[data-cx-theme] .post-wrap,
html body[data-cx-theme] .sr-article,
html body[data-cx-theme] .log-hero,
html body[data-cx-theme] .chat-shell,
html body[data-cx-theme] .exchange-panel,
html body[data-cx-theme] .panel{
  border-color:color-mix(in srgb,var(--cx-a) 38%,transparent);
  box-shadow:0 12px 34px rgba(0,0,0,.34),0 0 26px color-mix(in srgb,var(--cx-a) 14%,transparent);
}
html body[data-cx-theme] .card:hover,html body[data-cx-theme] .feature:hover,html body[data-cx-theme] .version:hover{border-color:var(--cx-a)}
html body[data-cx-theme] .eyebrow{color:var(--cx-a)}
html body[data-cx-theme] h1{text-shadow:0 0 22px color-mix(in srgb,var(--cx-a) 45%,transparent)}
html body[data-cx-theme] .exchange-nav a.active,html body[data-cx-theme] .nav a.active{color:var(--cx-a)}
html body[data-cx-theme] .live-dot{color:var(--cx-a)}

/* Neon Brick */
body[data-cx-theme="theme_neon_brick"]{--cx-a:#19e6f0;--cx-b:#ff2fd0}
body[data-cx-theme="theme_neon_brick"]::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='64'%3E%3Cg fill='none' stroke-width='2'%3E%3Cpath d='M0 1H96M0 33H96' stroke='%2319e6f0'/%3E%3Cpath d='M1 0V32M49 0V32' stroke='%23ff2fd0'/%3E%3Cpath d='M25 32V64M73 32V64' stroke='%23ff2fd0'/%3E%3C/g%3E%3C/svg%3E");
  background-size:96px 64px;opacity:.16;animation:cxBrickGlow 5.5s ease-in-out infinite,cxBrickDrift 90s linear infinite}
@keyframes cxBrickGlow{0%,100%{opacity:.08}50%{opacity:.26}}
@keyframes cxBrickDrift{to{background-position:96px 64px}}

/* Aurora */
body[data-cx-theme="theme_aurora"]{--cx-a:#7cf7c9;--cx-b:#8a7cff}
body[data-cx-theme="theme_aurora"]::after{
  background:radial-gradient(60% 45% at 20% 18%,rgba(124,247,201,.55),transparent 70%),radial-gradient(55% 40% at 80% 28%,rgba(138,124,255,.5),transparent 70%),radial-gradient(70% 40% at 50% 8%,rgba(60,200,255,.35),transparent 70%);
  background-size:140% 140%;opacity:.32;filter:blur(18px);animation:cxAurora 24s ease-in-out infinite alternate}
@keyframes cxAurora{0%{background-position:0% 0%;transform:scale(1)}100%{background-position:100% 30%;transform:scale(1.08)}}

/* Inferno */
body[data-cx-theme="theme_inferno"]{--cx-a:#ff6a2b;--cx-b:#ffcc4d}
body[data-cx-theme="theme_inferno"]::after{
  background:radial-gradient(90% 38% at 50% 108%,rgba(255,106,43,.75),transparent 70%),radial-gradient(50% 26% at 15% 105%,rgba(255,204,77,.5),transparent 70%),radial-gradient(50% 26% at 85% 105%,rgba(255,80,30,.5),transparent 70%);
  opacity:.5;animation:cxFlicker 3.2s ease-in-out infinite}
@keyframes cxFlicker{0%,100%{opacity:.34;transform:translateY(0)}35%{opacity:.58;transform:translateY(-6px)}65%{opacity:.4;transform:translateY(2px)}}

/* Cyber Grid */
body[data-cx-theme="theme_cyber_grid"]{--cx-a:#b36bff;--cx-b:#19e6f0}
body[data-cx-theme="theme_cyber_grid"]::after{
  background-image:linear-gradient(rgba(179,107,255,.55) 1px,transparent 1px),linear-gradient(90deg,rgba(25,230,240,.4) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(180deg,transparent 35%,#000 100%);mask-image:linear-gradient(180deg,transparent 35%,#000 100%);
  opacity:.26;animation:cxGridScroll 7s linear infinite}
@keyframes cxGridScroll{to{background-position:0 56px,56px 0}}

/* Sakura Night */
body[data-cx-theme="theme_sakura"]{--cx-a:#ff8fc7;--cx-b:#ffd1e8}
body[data-cx-theme="theme_sakura"]::after{
  background-image:radial-gradient(ellipse 7px 4px at 20px 30px,rgba(255,170,210,.95),transparent 70%),radial-gradient(ellipse 6px 3px at 90px 100px,rgba(255,209,232,.9),transparent 70%),radial-gradient(ellipse 8px 4px at 160px 60px,rgba(255,143,199,.9),transparent 70%),radial-gradient(60% 40% at 80% 0%,rgba(255,143,199,.22),transparent 70%);
  background-size:200px 160px,200px 160px,200px 160px,100% 100%;
  opacity:.5;animation:cxPetals 16s linear infinite}
@keyframes cxPetals{to{background-position:-60px 160px,-40px 160px,-80px 160px,0 0}}

/* Gold Rush */
body[data-cx-theme="theme_gold_rush"]{--cx-a:#ffcc4d;--cx-b:#fff1b8}
body[data-cx-theme="theme_gold_rush"]::after{
  background:linear-gradient(105deg,transparent 35%,rgba(255,226,140,.5) 50%,transparent 65%),radial-gradient(70% 30% at 50% 0%,rgba(255,204,77,.28),transparent 70%);
  background-size:260% 100%,100% 100%;opacity:.4;animation:cxGoldSweep 9s ease-in-out infinite}
@keyframes cxGoldSweep{0%{background-position:130% 0,0 0}100%{background-position:-60% 0,0 0}}

/* ============================ BANNER EFFECTS ============================ */
/* Put .cx-banner + .cx-b-<id> on any row/box; the effect lives behind its content. */
.cx-banner{position:relative;isolation:isolate;overflow:hidden}
.cx-banner::before,.cx-banner::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.cx-banner>*{position:relative;z-index:1}

.cx-b-banner_pulse{--cx-a:#19e6f0;--cx-b:#19e88f;box-shadow:inset 0 0 0 1px rgba(25,230,240,.4)}
.cx-b-banner_pulse::before{background:linear-gradient(100deg,rgba(25,230,240,.32),rgba(25,232,143,.22) 55%,rgba(25,230,240,.08));animation:cxPulse 3s ease-in-out infinite}
@keyframes cxPulse{0%,100%{opacity:.55}50%{opacity:1}}

.cx-b-banner_flame{--cx-a:#ff6a2b;--cx-b:#ffcc4d;box-shadow:inset 0 0 0 1px rgba(255,106,43,.45)}
.cx-b-banner_flame::before{background:radial-gradient(120% 140% at 10% 130%,rgba(255,204,77,.7),transparent 55%),radial-gradient(120% 140% at 60% 135%,rgba(255,106,43,.6),transparent 55%),linear-gradient(90deg,rgba(255,60,20,.2),rgba(255,106,43,.1));background-size:160% 100%;animation:cxFlame 2.4s ease-in-out infinite alternate}
.cx-b-banner_flame::after{background:repeating-linear-gradient(100deg,transparent 0 14px,rgba(255,220,140,.12) 14px 16px);animation:cxFlameShift 5s linear infinite}
@keyframes cxFlame{0%{background-position:0 0;filter:brightness(.9)}100%{background-position:100% 0;filter:brightness(1.25)}}
@keyframes cxFlameShift{to{background-position:64px 0}}

.cx-b-banner_glitch{--cx-a:#ff2fd0;--cx-b:#19e6f0;box-shadow:inset 0 0 0 1px rgba(255,47,208,.4)}
.cx-b-banner_glitch::before{background:linear-gradient(90deg,rgba(255,47,208,.3),transparent 40%,rgba(25,230,240,.3));animation:cxGlitch 3.4s steps(1,end) infinite}
.cx-b-banner_glitch::after{background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 2px,transparent 2px 4px);opacity:.7}
@keyframes cxGlitch{0%,86%,100%{transform:translateX(0);clip-path:inset(0)}88%{transform:translateX(-6px);clip-path:inset(20% 0 55% 0)}91%{transform:translateX(7px);clip-path:inset(60% 0 12% 0)}94%{transform:translateX(-3px);clip-path:inset(8% 0 70% 0)}}

.cx-b-banner_starfield{--cx-a:#8a7cff;--cx-b:#ffffff;background-color:rgba(8,6,28,.55);box-shadow:inset 0 0 0 1px rgba(138,124,255,.4)}
.cx-b-banner_starfield::before{background-image:radial-gradient(1.5px 1.5px at 12px 18px,#fff,transparent),radial-gradient(1px 1px at 60px 40px,rgba(255,255,255,.9),transparent),radial-gradient(2px 2px at 110px 12px,rgba(190,180,255,.95),transparent),radial-gradient(1px 1px at 150px 52px,#fff,transparent);background-size:170px 64px;animation:cxStars 22s linear infinite,cxTwinkle 3s ease-in-out infinite alternate}
.cx-b-banner_starfield::after{background:radial-gradient(80% 120% at 85% 20%,rgba(138,124,255,.28),transparent 65%)}
@keyframes cxStars{to{background-position:-170px 0}}
@keyframes cxTwinkle{from{opacity:.55}to{opacity:1}}

.cx-b-banner_aurora{--cx-a:#7cf7c9;--cx-b:#8a7cff;box-shadow:inset 0 0 0 1px rgba(124,247,201,.38)}
.cx-b-banner_aurora::before{background:linear-gradient(110deg,rgba(124,247,201,.4),rgba(138,124,255,.38),rgba(60,200,255,.34),rgba(124,247,201,.4));background-size:300% 100%;animation:cxAuroraWave 9s ease-in-out infinite alternate}
@keyframes cxAuroraWave{to{background-position:100% 0}}

.cx-b-banner_gold{--cx-a:#ffcc4d;--cx-b:#fff1b8;box-shadow:inset 0 0 0 1px rgba(255,204,77,.55)}
.cx-b-banner_gold::before{background:linear-gradient(120deg,rgba(120,84,10,.55),rgba(255,204,77,.35) 50%,rgba(120,84,10,.5))}
.cx-b-banner_gold::after{background:linear-gradient(105deg,transparent 40%,rgba(255,246,200,.55) 50%,transparent 60%);background-size:250% 100%;animation:cxShine 5s ease-in-out infinite}
@keyframes cxShine{0%{background-position:130% 0}100%{background-position:-40% 0}}

/* Animated effects are decoration only — hold still for people who ask for less motion. */
@media (prefers-reduced-motion:reduce){
  body[data-cx-theme]::after,.cx-banner::before,.cx-banner::after,.cx-prev::before,.cx-prev::after{animation:none!important}
}

/* ============================ MARKET: COSMETICS STORE ============================ */
.market-tabs{display:flex;gap:8px;margin:0 0 14px;flex-wrap:wrap}
.market-tab{padding:9px 16px;border-radius:999px;border:1px solid var(--line,#232c3a);background:transparent;color:var(--text-dim,#8a94a6);font:600 13px/1 inherit;cursor:pointer;transition:.15s}
.market-tab:hover{color:var(--text,#e9edf4)}
.market-tab.active{color:#06120d;background:var(--rise,#19e88f);border-color:var(--rise,#19e88f)}
.cx-store-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.cx-store-head h3{margin:2px 0 0}
.cx-coins{font:600 13px 'JetBrains Mono',monospace;color:var(--gold,#ffcc4d)}
.cx-section-title{margin:22px 0 10px;font:700 14px 'Sora',sans-serif;letter-spacing:.04em;color:var(--text-dim,#8a94a6);text-transform:uppercase}
.cx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.cx-card{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.09);background:rgba(7,11,17,.45)}
.cx-card.is-equipped{border-color:var(--rise,#19e88f);box-shadow:0 0 0 1px rgba(25,232,143,.25)}
.cx-card h4{margin:0;font-size:15px}
.cx-card p{margin:0;font-size:12.5px;line-height:1.45;color:var(--text-dim,#8a94a6)}
.cx-card .cx-price{font:700 13px 'JetBrains Mono',monospace;color:var(--gold,#ffcc4d)}
.cx-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.cx-prev{position:relative;isolation:isolate;overflow:hidden;height:74px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:#06090f;display:flex;align-items:center;gap:10px;padding:0 12px}
.cx-prev .cx-prev-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#334,#556);flex:none}
.cx-prev .cx-prev-name{font-weight:700;font-size:13px}
.cx-prev .cx-prev-sub{font-size:11px;opacity:.7}
.cx-prev>*{position:relative;z-index:1}
.cx-prev.is-theme::before{content:"";position:absolute;inset:0;z-index:0}
.cx-prev-theme_neon_brick::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='32'%3E%3Cg fill='none' stroke-width='1.5'%3E%3Cpath d='M0 1H48M0 17H48' stroke='%2319e6f0'/%3E%3Cpath d='M1 0V16M25 0V16' stroke='%23ff2fd0'/%3E%3Cpath d='M13 16V32M37 16V32' stroke='%23ff2fd0'/%3E%3C/g%3E%3C/svg%3E");background-size:48px 32px;animation:cxBrickGlow 5.5s ease-in-out infinite}
.cx-prev-theme_aurora::before{background:radial-gradient(60% 80% at 20% 30%,rgba(124,247,201,.7),transparent 70%),radial-gradient(60% 80% at 80% 40%,rgba(138,124,255,.65),transparent 70%);background-size:140% 140%;animation:cxAurora 10s ease-in-out infinite alternate}
.cx-prev-theme_inferno::before{background:radial-gradient(90% 70% at 50% 120%,rgba(255,106,43,.9),transparent 70%),radial-gradient(40% 50% at 20% 110%,rgba(255,204,77,.7),transparent 70%);animation:cxFlicker 3.2s ease-in-out infinite}
.cx-prev-theme_cyber_grid::before{background-image:linear-gradient(rgba(179,107,255,.7) 1px,transparent 1px),linear-gradient(90deg,rgba(25,230,240,.55) 1px,transparent 1px);background-size:20px 20px;animation:cxGridScroll 4s linear infinite}
.cx-prev-theme_sakura::before{background-image:radial-gradient(ellipse 5px 3px at 14px 14px,rgba(255,170,210,.95),transparent 70%),radial-gradient(ellipse 4px 2px at 52px 50px,rgba(255,209,232,.9),transparent 70%),radial-gradient(ellipse 5px 3px at 90px 28px,rgba(255,143,199,.9),transparent 70%);background-size:110px 74px;animation:cxPetals 8s linear infinite}
.cx-prev-theme_gold_rush::before{background:linear-gradient(105deg,transparent 35%,rgba(255,226,140,.6) 50%,transparent 65%),linear-gradient(180deg,rgba(255,204,77,.18),transparent);background-size:260% 100%,100% 100%;animation:cxGoldSweep 5s ease-in-out infinite}

/* ============================ LEADERBOARD + PROFILE HOOKS ============================ */
.leaderboard-row.cx-banner{border-color:color-mix(in srgb,var(--cx-a,#19e6f0) 45%,transparent)!important;background-color:rgba(7,11,17,.35)}
.leaderboard-row.cx-banner .lb-user{text-shadow:0 1px 8px rgba(0,0,0,.7)}
.cx-badge{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font:700 10px 'JetBrains Mono',monospace;letter-spacing:.04em;background:color-mix(in srgb,var(--cx-a,#19e6f0) 22%,transparent);color:var(--cx-a,#19e6f0);vertical-align:middle}

#market-panel[hidden],#cosmetics-panel[hidden]{display:none!important}
.lb-profile-link:hover{text-decoration:underline!important}

/* ============================ STARREX PROFILE PAGE ============================ */
.pf-card{display:flex;flex-direction:column;gap:14px;padding:16px;max-width:900px;margin:0 auto 42px}
.pf-banner{display:flex;align-items:center;gap:16px;padding:22px 20px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(110deg,rgba(25,230,240,.10),rgba(7,11,17,.5) 60%)}
.pf-banner.cx-banner{border-color:color-mix(in srgb,var(--cx-a,#19e6f0) 55%,transparent)}
.pf-avatar{width:76px;height:76px;border-radius:50%;object-fit:cover;flex:none;border:2px solid rgba(255,255,255,.25);background:linear-gradient(135deg,#2a3346,#46506a)}
.pf-avatar-fallback{display:flex;align-items:center;justify-content:center;font-size:30px}
.pf-ident{min-width:0;flex:1}
.pf-ident h2{margin:0;font-size:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.pf-level{font:600 13px 'JetBrains Mono',monospace;color:var(--text-dim,#8a94a6)}
.pf-xp-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.pf-xp-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--rise,#19e88f),#19e6f0)}
.pf-xp small{display:block;margin-top:6px;color:var(--text-dim,#8a94a6);font-size:12px}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.pf-tile{padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(7,11,17,.4)}
.pf-tile span{display:block;font:600 10.5px 'JetBrains Mono',monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim,#8a94a6)}
.pf-tile b{display:block;margin-top:3px;font:700 17px 'JetBrains Mono',monospace}
@media(max-width:560px){.pf-banner{flex-wrap:wrap}.pf-customize{width:100%;text-align:center}}

/* member dropdown shortcut */
.member-dropdown-link{display:block;padding:9px 12px;border-radius:8px;color:inherit;text-decoration:none;font:600 13px 'Sora',sans-serif}
.member-dropdown-link:hover{background:rgba(255,255,255,.07)}

/* ============== v2: themes on every page, static (free) looks, owner-uploaded PNG/GIF ============== */
/* Without StarRex+ the animated looks hold still (the same look, frozen). */
body[data-cx-theme][data-cx-static]::after,
.cx-static::before,.cx-static::after,.cx-prev.cx-static::before,.cx-prev.cx-static::after{animation:none!important}

/* Free, non-animated UI themes */
body[data-cx-theme="theme_static_midnight"]{--cx-a:#19e6f0;--cx-b:#2a3f5a}
body[data-cx-theme="theme_static_midnight"]::after{background:radial-gradient(70% 45% at 50% 0%,rgba(25,230,240,.28),transparent 70%),linear-gradient(180deg,rgba(20,40,80,.35),transparent 60%);opacity:.45}
body[data-cx-theme="theme_static_ember"]{--cx-a:#ff6a2b;--cx-b:#ffcc4d}
body[data-cx-theme="theme_static_ember"]::after{background:radial-gradient(90% 38% at 50% 108%,rgba(255,106,43,.6),transparent 70%),radial-gradient(60% 30% at 10% 0%,rgba(255,204,77,.18),transparent 70%);opacity:.45}
body[data-cx-theme="theme_static_forest"]{--cx-a:#4ade80;--cx-b:#14532d}
body[data-cx-theme="theme_static_forest"]::after{background:radial-gradient(70% 40% at 80% 0%,rgba(74,222,128,.3),transparent 70%),radial-gradient(60% 40% at 10% 100%,rgba(20,83,45,.5),transparent 70%);opacity:.45}
body[data-cx-theme="theme_static_rose"]{--cx-a:#ff8fc7;--cx-b:#ffd1e8}
body[data-cx-theme="theme_static_rose"]::after{background:radial-gradient(70% 40% at 20% 0%,rgba(255,143,199,.32),transparent 70%),radial-gradient(60% 40% at 90% 100%,rgba(255,209,232,.18),transparent 70%);opacity:.45}
body[data-cx-theme="theme_static_violet"]{--cx-a:#b36bff;--cx-b:#19e6f0}
body[data-cx-theme="theme_static_violet"]::after{background:radial-gradient(70% 45% at 50% 0%,rgba(179,107,255,.34),transparent 70%),radial-gradient(50% 35% at 100% 100%,rgba(25,230,240,.16),transparent 70%);opacity:.45}

/* Owner-uploaded UI theme (PNG = still, GIF = animated): the picture is laid over the page, tinted by its accent colours. */
body[data-cx-theme="custom"]{--cx-a:var(--cx-custom-a,#19e6f0);--cx-b:var(--cx-custom-b,#8a7cff)}
body[data-cx-theme="custom"]::after{background:var(--cx-img) center/cover no-repeat;mix-blend-mode:normal;opacity:.34}

/* Free, non-animated banners */
.cx-b-banner_static_cyan{--cx-a:#19e6f0;--cx-b:#19e88f;box-shadow:inset 0 0 0 1px rgba(25,230,240,.4)}
.cx-b-banner_static_cyan::before{background:linear-gradient(100deg,rgba(25,230,240,.3),rgba(25,232,143,.2) 55%,rgba(25,230,240,.08))}
.cx-b-banner_static_ember{--cx-a:#ff6a2b;--cx-b:#ffcc4d;box-shadow:inset 0 0 0 1px rgba(255,106,43,.45)}
.cx-b-banner_static_ember::before{background:linear-gradient(100deg,rgba(255,106,43,.34),rgba(255,204,77,.2) 60%,rgba(255,106,43,.08))}
.cx-b-banner_static_violet{--cx-a:#8a7cff;--cx-b:#ffffff;box-shadow:inset 0 0 0 1px rgba(138,124,255,.45)}
.cx-b-banner_static_violet::before{background:linear-gradient(100deg,rgba(138,124,255,.36),rgba(60,40,140,.22) 60%,rgba(138,124,255,.08))}
.cx-b-banner_static_mint{--cx-a:#7cf7c9;--cx-b:#8a7cff;box-shadow:inset 0 0 0 1px rgba(124,247,201,.4)}
.cx-b-banner_static_mint::before{background:linear-gradient(100deg,rgba(124,247,201,.32),rgba(138,124,255,.2) 60%,rgba(124,247,201,.08))}
.cx-b-banner_static_gold{--cx-a:#ffcc4d;--cx-b:#fff1b8;box-shadow:inset 0 0 0 1px rgba(255,204,77,.5)}
.cx-b-banner_static_gold::before{background:linear-gradient(120deg,rgba(120,84,10,.5),rgba(255,204,77,.32) 50%,rgba(120,84,10,.45))}

/* Owner-uploaded banner (PNG = still, GIF = animated) */
.cx-b-custom{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cx-a,#19e6f0) 55%,transparent)}
.cx-b-custom::before{background:var(--cx-img) center/cover no-repeat;opacity:.95}
.cx-b-custom::after{background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,.12) 70%)}

/* previews of the free + custom looks in the store */
.cx-prev-theme_static_midnight::before{background:radial-gradient(70% 90% at 50% 0%,rgba(25,230,240,.5),transparent 70%)}
.cx-prev-theme_static_ember::before{background:radial-gradient(90% 70% at 50% 120%,rgba(255,106,43,.8),transparent 70%)}
.cx-prev-theme_static_forest::before{background:radial-gradient(70% 90% at 80% 0%,rgba(74,222,128,.55),transparent 70%)}
.cx-prev-theme_static_rose::before{background:radial-gradient(70% 90% at 20% 0%,rgba(255,143,199,.6),transparent 70%)}
.cx-prev-theme_static_violet::before{background:radial-gradient(70% 90% at 50% 0%,rgba(179,107,255,.6),transparent 70%)}
.cx-prev-theme_custom::before{background:var(--cx-img) center/cover no-repeat}

/* StarRex+ badge (Achievements, Profile, Leaderboard, header menu) */
.cx-plus-badge{display:inline-flex;align-items:center;gap:3px;margin-left:7px;padding:1px 8px;border-radius:999px;vertical-align:middle;white-space:nowrap;
  font:700 10px 'JetBrains Mono',monospace;letter-spacing:.04em;color:#fff1b8;
  background:linear-gradient(120deg,rgba(255,204,77,.28),rgba(138,124,255,.3));border:1px solid rgba(255,204,77,.55);box-shadow:0 0 12px rgba(255,204,77,.18)}
.cx-tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font:700 10px 'JetBrains Mono',monospace;letter-spacing:.04em;vertical-align:middle;border:1px solid rgba(255,255,255,.16);color:var(--text-dim,#8a94a6)}
.cx-tag.is-anim{color:#19e88f;border-color:rgba(25,232,143,.4)}
.cx-tag.is-lock{color:#ffcc4d;border-color:rgba(255,204,77,.45)}

/* header profile menu with the banner effect */
.member-dropdown-header.cx-banner{border-radius:10px;padding:10px 12px;margin:0 0 8px;text-shadow:0 1px 8px rgba(0,0,0,.7);flex-wrap:wrap}
.member-pill.cx-banner{border-color:color-mix(in srgb,var(--cx-a,#19e6f0) 55%,transparent)}
.member-pill.cx-banner>*{position:relative;z-index:1}

/* subscription panel (Market → Cosmetics) */
.cx-sub{display:grid;gap:12px;margin:0 0 6px;padding:14px;border-radius:14px;border:1px solid rgba(255,204,77,.4);background:linear-gradient(120deg,rgba(255,204,77,.09),rgba(138,124,255,.1))}
.cx-sub h3{margin:2px 0 4px}
.cx-sub-status{font:600 13px 'JetBrains Mono',monospace;color:#fff1b8}
.cx-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.cx-plan{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(7,11,17,.45)}
.cx-plan b{font-size:15px}.cx-plan .cx-price{font:700 14px 'JetBrains Mono',monospace;color:var(--gold,#ffcc4d)}
.cx-plan small{color:var(--text-dim,#8a94a6)}
.cx-plan .cx-actions{margin-top:auto}
.cx-card.is-locked{opacity:.92}
.cx-prev.cx-prev-img{background-size:cover;background-position:center}

/* staff badges (Owner / Developer) */
.cx-staff-badge{display:inline-flex;align-items:center;gap:3px;margin-left:7px;padding:1px 8px;border-radius:999px;vertical-align:middle;white-space:nowrap;font:700 10px 'JetBrains Mono',monospace;letter-spacing:.04em;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff}
.cx-staff-owner{color:#ffd76a;border-color:rgba(255,215,106,.6);background:rgba(255,215,106,.14)}
.cx-staff-developer{color:#8fd3ff;border-color:rgba(143,211,255,.55);background:rgba(143,211,255,.12)}

/* Locked animated cosmetics (no active StarRex+): visible, but dimmed and not clickable */
.cx-card{position:relative}
.cx-card.is-locked{opacity:1;border-color:rgba(255,204,77,.25)}
.cx-card.is-locked .cx-prev,.cx-card.is-locked h4,.cx-card.is-locked>div>p{filter:grayscale(.55) brightness(.8)}
.cx-card.is-locked .cx-prev{pointer-events:none}
.cx-card.is-locked .cx-prev *{animation:none!important}
.cx-lock-ico{position:absolute;top:10px;right:12px;z-index:2;font-size:15px;padding:3px 6px;border-radius:999px;background:rgba(7,11,17,.78);border:1px solid rgba(255,204,77,.45);pointer-events:none}
.cx-lock-note{color:#ffcc4d!important}
.cx-locked-btn,.cx-locked-btn:hover{opacity:.7;cursor:not-allowed;pointer-events:none;color:#ffcc4d;border-color:rgba(255,204,77,.4)}

/* Video cosmetics (MP4 / WebM uploaded in Cosmetics Studio): a muted looping <video> instead of a CSS background */
.cx-b-video::before{background:none!important}
video.cx-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;opacity:.95;pointer-events:none;border-radius:inherit}
.cx-banner>video.cx-vid,.member-pill.cx-banner>video.cx-vid{position:absolute;z-index:-1}
video.cx-theme-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.34;pointer-events:none}

/* Limited-time / limited-edition / premium cosmetics */
.cx-tag.is-limited{color:#ffcc4d;border-color:rgba(255,204,77,.5);background:rgba(255,204,77,.1)}
.cx-tag.is-prem{color:#c9b8ff;border-color:rgba(138,124,255,.55);background:rgba(138,124,255,.12)}
.cx-limit-note{color:#ffcc4d!important;font:600 12px 'JetBrains Mono',monospace;margin:4px 0 0}
/* A video that cannot be played (unsupported codec, missing file...) falls back to the banner's own colours instead of a blank box */
.cx-b-video.cx-vid-failed::before{background:linear-gradient(110deg,var(--cx-a,#19e6f0),var(--cx-b,#8a7cff))!important;opacity:.55}

/* ============ Ambient <-> equipped theme binding ============
   While a theme is equipped (cosmetics.js sets html[data-cx-bound] + --cx-bind-a/-b), the ambient lights, glass tint
   and glowing buttons use the THEME's colours and ignore the ambient's own colour choice / sampled background colours.
   !important beats the inline values ambient-settings.js writes. Unequip the theme and everything returns to normal. */
html[data-cx-bound]{
  --amb-a:var(--cx-bind-a)!important;--amb-b:var(--cx-bind-b)!important;
  --ambient-one:var(--cx-bind-a)!important;--ambient-two:var(--cx-bind-b)!important;
  --amb-tint:var(--cx-bind-a)!important;
}
html[data-cx-bound] body.site-page.ambient-mode,html[data-cx-bound] body.ambient-mode{--amb-tint:var(--cx-bind-a)!important}
html[data-cx-bound] .amb-color-row{display:none!important}
.amb-bound-note{display:none;margin:6px 0 2px;font:600 12px/1.4 'JetBrains Mono',monospace;color:#9fe8f0}
html[data-cx-bound] .amb-bound-note{display:block}

/* ---- StarRex+ loyalty tiers (badge colours) ---- */
.cx-plus-badge.cx-tier-starter{color:#d9f4ff;background:linear-gradient(120deg,rgba(25,230,240,.22),rgba(138,124,255,.3));border-color:rgba(25,230,240,.55);box-shadow:0 0 12px rgba(25,230,240,.2)}
.cx-plus-badge.cx-tier-bronze{color:#ffd9b0;background:linear-gradient(120deg,rgba(205,127,50,.32),rgba(120,70,30,.35));border-color:rgba(205,127,50,.7);box-shadow:0 0 12px rgba(205,127,50,.25)}
.cx-plus-badge.cx-tier-silver{color:#eef2f8;background:linear-gradient(120deg,rgba(200,210,225,.3),rgba(120,135,160,.3));border-color:rgba(200,210,225,.7);box-shadow:0 0 12px rgba(200,210,225,.22)}
.cx-plus-badge.cx-tier-gold{color:#fff1b8;background:linear-gradient(120deg,rgba(255,204,77,.38),rgba(255,150,40,.3));border-color:rgba(255,204,77,.85);box-shadow:0 0 14px rgba(255,204,77,.32)}
.cx-plus-badge.cx-tier-platinum{color:#e8fbff;background:linear-gradient(120deg,rgba(150,240,255,.34),rgba(179,107,255,.34));border-color:rgba(170,240,255,.85);box-shadow:0 0 16px rgba(150,240,255,.35)}
.cx-plus-badge.cx-tier-star{color:#fff;background:linear-gradient(120deg,rgba(255,204,77,.5),rgba(255,111,181,.42),rgba(138,124,255,.5));border-color:rgba(255,255,255,.9);box-shadow:0 0 18px rgba(255,204,77,.5),0 0 28px rgba(179,107,255,.35)}

/* ---- earning boost card + tier ladder ---- */
.cx-earn{display:grid;gap:6px;padding:12px 14px;border-radius:12px;border:1px solid rgba(25,232,143,.4);background:linear-gradient(120deg,rgba(25,232,143,.09),rgba(138,124,255,.08))}
.cx-earn-head{display:flex;justify-content:space-between;align-items:baseline;font:700 11px 'JetBrains Mono',monospace;letter-spacing:.08em;color:var(--text-dim,#8a94a6)}
.cx-earn-head b{font-size:22px;color:#19e88f;letter-spacing:0}
.cx-earn-row{display:flex;justify-content:space-between;font:500 13px 'JetBrains Mono',monospace}
.cx-earn-row b{color:#fff}
.cx-earn-note,.cx-earn-hint{display:block;color:var(--text-dim,#8a94a6);font-size:11.5px;line-height:1.45}
.cx-earn-hint{color:#ffe08a}
.cx-ladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px;margin:10px 0 6px}
.cx-ladder-step{display:grid;gap:1px;justify-items:center;padding:8px 6px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);text-align:center}
.cx-ladder-step span{font-size:18px}.cx-ladder-step b{font-size:12px}.cx-ladder-step small{font-size:10.5px;color:var(--text-dim,#8a94a6)}.cx-ladder-step em{font:700 13px 'JetBrains Mono',monospace;font-style:normal;color:#19e88f}
.cx-ladder-step.is-on{border-color:rgba(255,204,77,.85);background:rgba(255,204,77,.1);box-shadow:0 0 14px rgba(255,204,77,.22)}

/* ---------------- badge pop-ups: the badge panel + the Get StarRex+ sheet ----------------
   Clicking 👑 / 💎Starter anywhere (profile, leaderboard, header menu, achievements)
   opens this: the badge the player has, when they got it, and the progress left to the
   NEXT tier — laid out like the tier grid, with locked tiers greyed out. */
.cx-plus-badge[data-cx-badge],.cx-staff-badge[data-cx-badge]{cursor:pointer}
.cx-plus-badge[data-cx-badge]:hover,.cx-staff-badge[data-cx-badge]:hover{filter:brightness(1.18)}
.cx-plus-badge:focus-visible,.cx-staff-badge:focus-visible{outline:2px solid rgba(255,204,77,.7);outline-offset:2px}
/* tight spots (leaderboard rows): emoji only, still clickable */
.cx-badge-mini{padding:1px 6px;font-size:11px;gap:0}

html.cxb-lock{overflow:hidden}
.cxb-modal{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:20px}
.cxb-modal[hidden]{display:none}
.cxb-bg{position:absolute;inset:0;background:rgba(2,4,9,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cxb-sheet{position:relative;width:min(560px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:22px 22px 24px;border-radius:22px;
  background:linear-gradient(180deg,#111a29,#090d15);border:1px solid rgba(255,255,255,.14);color:var(--text,#e9edf4);
  box-shadow:0 40px 120px rgba(0,0,0,.65);animation:cxbIn .2s ease-out}
@keyframes cxbIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.cxb-x{position:absolute;top:12px;right:12px;z-index:6;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(6,10,16,.7);color:#fff;font-size:14px;cursor:pointer}
.cxb-hero{display:grid;justify-items:center;gap:2px;text-align:center;padding:6px 0 14px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:14px}
.cxb-hero-ico{font-size:42px;line-height:1}
.cxb-hero h3{margin:6px 0 0;font-size:20px;letter-spacing:.02em}
.cxb-hero p{margin:0;color:var(--text-dim,#8a94a6);font-size:12.5px}
.cxb-hero.cx-tier-starter{--cxb-col:#19e6f0}
.cxb-hero.cx-tier-bronze{--cxb-col:#cd7f32}
.cxb-hero.cx-tier-silver{--cxb-col:#c8d2e1}
.cxb-hero.cx-tier-gold{--cxb-col:#ffcc4d}
.cxb-hero.cx-tier-platinum{--cxb-col:#96f0ff}
.cxb-hero.cx-tier-star{--cxb-col:#ff6fb5}
.cxb-hero.cx-tier-staff{--cxb-col:#8a7cff}
.cxb-hero[class*="cx-tier-"] .cxb-hero-ico{filter:drop-shadow(0 0 18px var(--cxb-col,rgba(255,204,77,.5)))}
.cxb-hero[class*="cx-tier-"] h3{color:var(--cxb-col,#fff)}
.cxb-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.cxb-facts>div{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);text-align:center}
.cxb-facts span{display:block;font:700 10px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim,#8a94a6)}
.cxb-facts b{font-size:15px}
.cxb-prog{padding:12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);margin-bottom:14px}
.cxb-prog-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font:700 11.5px 'JetBrains Mono',monospace;letter-spacing:.03em}
.cxb-prog-head b{color:#ffcc4d}
.cxb-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden;margin:8px 0 6px}
.cxb-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#19e6f0,#8a7cff)}
.cxb-prog small{color:var(--text-dim,#8a94a6);font-size:11px}
.cxb-ladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:8px;margin-bottom:14px}
.cxb-step{display:grid;justify-items:center;gap:1px;padding:9px 6px;border-radius:11px;text-align:center;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03)}
.cxb-step span{font-size:17px}
.cxb-step b{font-size:11.5px}
.cxb-step small{font-size:10px;color:var(--text-dim,#8a94a6)}
.cxb-step em{font:700 12px 'JetBrains Mono',monospace;font-style:normal;color:#19e88f}
.cxb-step i{font:700 9.5px 'JetBrains Mono',monospace;font-style:normal;color:var(--text-dim,#8a94a6)}
.cxb-step.is-on{border-color:rgba(255,204,77,.75);background:linear-gradient(120deg,rgba(255,204,77,.14),rgba(138,124,255,.14))}
.cxb-step.is-on i{color:#ffcc4d}
.cxb-step.is-next{border-color:rgba(25,230,240,.5)}
.cxb-step.is-next i{color:#19e6f0}
.cxb-step.is-lock{opacity:.62}
.cxb-copy{margin:0 0 12px;color:var(--text-dim,#8a94a6);font-size:12.5px;line-height:1.55}
.cxb-copy b{color:var(--text,#e9edf4)}
.cxb-cta{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px 14px;border-radius:12px;
  background:linear-gradient(120deg,rgba(255,204,77,.12),rgba(138,124,255,.12));border:1px solid rgba(255,204,77,.4)}
.cxb-cta p{margin:0;font-size:13px}
.cxb-plans{display:grid;gap:10px;margin-bottom:12px}
.cxb-plan{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.cxb-plan b{display:block;font-size:14px}
.cxb-plan span{display:block;font:700 12px 'JetBrains Mono',monospace;color:#ffcc4d}
.cxb-plan small{color:var(--text-dim,#8a94a6);font-size:11px}
.cxb-plan-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cxb-ok{margin:6px 0 0;color:#19e88f;font-size:12.5px}
.cxb-err{margin:6px 0 0;color:#ff3b5c;font-size:12.5px}

@media (max-width:720px){
  .cxb-modal{align-items:flex-end;padding:0}
  .cxb-sheet{width:100%;max-height:92vh;border-radius:22px 22px 0 0;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  .cxb-facts{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){.cxb-sheet{animation:none}}
.cxb-step.is-past{opacity:.85;border-color:rgba(25,230,240,.28)}
.cxb-step.is-past i{color:#19e88f}

/* =========================================================================
   StarKid additions (v1.7.7) — hover-only previews, theme background, perf
   Additive: nothing above is changed. Appended so these rules win the cascade.
   ========================================================================= */

/* ---- 1. Preview animations run ONLY while hovered / focused --------------
   Every animated look (UI themes, banners) animates through a CSS animation on
   ::before / ::after. Until now those ran forever, on every tile at once, which
   is most of what made the Market and the Cosmetics shop feel heavy — the
   browser was compositing a dozen infinite animations before you touched
   anything. Now each preview sits on its first frame until the pointer (or
   keyboard focus) is on it, and freezes again when it leaves.
   Static looks declare no animation at all, so they never move either way. */
.cx-prev::before,
.cx-prev::after,
.cx-banner::before,
.cx-banner::after { animation-play-state: paused; }

.cxs-tile:hover .cx-prev::before,
.cxs-tile:hover .cx-prev::after,
.cxs-tile:hover .cx-banner::before,
.cxs-tile:hover .cx-banner::after,
.cxs-tile:focus-visible .cx-prev::before,
.cxs-tile:focus-visible .cx-prev::after,
.cxs-tile:focus-visible .cx-banner::before,
.cxs-tile:focus-visible .cx-banner::after,
.cxs-pv-art:hover .cx-prev::before,
.cxs-pv-art:hover .cx-prev::after,
.cxs-pv-art:hover .cx-banner::before,
.cxs-pv-art:hover .cx-banner::after,
.cxs-inc-art:hover .cx-prev::before,
.cxs-inc-art:hover .cx-prev::after,
.cxs-hero-art:hover .cx-prev::before,
.cxs-hero-art:hover .cx-prev::after { animation-play-state: running; }

/* ---- 2. An equipped UI theme replaces the page's own background ----------
   The still frame (bg-poster.jpg) is painted by <body> ITSELF in
   site-theme.css, forex-pro.css, studio-theme.css and light-theme.css —
   hiding the video wrapper alone only stops the motion and leaves that frame
   showing, which reads as "paused" rather than gone. So the whole original
   background comes off <body> too: no image, no gradient, no poster. What is
   left is the site's base colour (--site-bg) for the theme's own layer to sit
   on. Unequipping restores all of it — nothing is deleted, just hidden. */
.site-bg-video { transition: opacity .45s ease; }
body[data-cx-theme] .site-bg-video { opacity: 0 !important; }

/* kill the poster + its tint wherever it is declared */
html body[data-cx-theme] { background-image: none !important; }
/* dark pages: drop the colour too, so the theme sits on the plain base */
html body[data-cx-theme]:not([data-theme="light"]) { background-color: transparent !important; }
/* light pages: keep the light base, just remove the artwork */
html body[data-cx-theme][data-theme="light"] { background-color: #f3f6fb !important; }

/* ---- 3. Perf: keep each tile's layout and paint to itself ---------------
   The shop grid can hold hundreds of tiles. Isolating layout per tile stops
   one tile's reflow from invalidating its neighbours, which is what makes
   scrolling and clicking feel sticky once the grid is long. */
.cxs-tile { contain: layout style; }
.cxs-media { contain: paint; }