/* DBRANKED DERBY — profile cosmetics (shared by the SERVICE RECORD card on
   derby.php and the public dossier on index.php). RADs-bought, equipped layer. */

/* element wearing cosmetics becomes a positioned, clipped tactical surface */
.derby-profile-customized{position:relative;isolation:isolate}

/* ---------- BACKGROUNDS ---------- */
.derby-cos-bg-reactor-grid{
  background:
    radial-gradient(120% 95% at 50% -12%,rgba(49,231,255,.22),transparent 60%),
    linear-gradient(rgba(49,231,255,.07) 1px,transparent 1px) 0 0/26px 26px,
    linear-gradient(90deg,rgba(49,231,255,.07) 1px,transparent 1px) 0 0/26px 26px,
    #060c15 !important;}
.derby-cos-bg-redline-alert{
  background:
    repeating-linear-gradient(135deg,rgba(255,64,88,.12) 0 14px,transparent 14px 32px),
    radial-gradient(120% 95% at 50% -12%,rgba(255,64,88,.24),transparent 62%),
    #0d0709 !important;}
.derby-cos-bg-merc-blueprint{
  background:
    linear-gradient(rgba(74,163,255,.08) 1px,transparent 1px) 0 0/22px 22px,
    linear-gradient(90deg,rgba(74,163,255,.08) 1px,transparent 1px) 0 0/22px 22px,
    radial-gradient(130% 110% at 82% -8%,rgba(74,163,255,.18),transparent 60%),
    #05080f !important;}
.derby-cos-bg-void-grid{
  background:
    repeating-linear-gradient(90deg,rgba(150,90,255,.06) 0 2px,transparent 2px 26px),
    radial-gradient(140% 110% at 50% 125%,rgba(150,90,255,.30),transparent 60%),
    #08060f !important;}

/* ---------- FRAMES (rarity-tinted rails + soft outer light) ---------- */
.derby-cos-frame-signal-frame{box-shadow:inset 0 0 0 1px rgba(49,231,255,.55),0 0 24px rgba(49,231,255,.18) !important;border-color:rgba(49,231,255,.5) !important;}
.derby-cos-frame-hazard-frame{box-shadow:inset 0 0 0 1px rgba(255,160,40,.55),0 0 24px rgba(255,140,30,.16) !important;border-color:rgba(255,160,40,.5) !important;}
.derby-cos-frame-elite-command-frame{box-shadow:inset 0 0 0 1px rgba(255,209,102,.6),inset 0 0 22px rgba(255,209,102,.08),0 0 30px rgba(255,209,102,.22) !important;border-color:rgba(255,209,102,.6) !important;}

/* ---------- STICKERS (equipped marks, up to 3) ---------- */
.derby-profile-stickers{position:absolute;top:10px;right:12px;display:flex;gap:7px;z-index:3;pointer-events:none}
.derby-profile-sticker{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:15px;
  font-family:"Spline Sans Mono",monospace;color:#eef7ff;background:rgba(6,11,20,.7);
  border:1px solid rgba(93,220,255,.4);box-shadow:0 0 14px rgba(49,231,255,.22);
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px))}
.derby-profile-sticker[data-sticker="rads-core"]{color:#79ff9f;border-color:rgba(121,255,159,.5);box-shadow:0 0 14px rgba(121,255,159,.28)}
.derby-profile-sticker[data-sticker="last-contract"]{color:#ff4058;border-color:rgba(255,64,88,.5);box-shadow:0 0 14px rgba(255,64,88,.28)}
.derby-profile-sticker[data-sticker="board-crown"]{color:#ffd166;border-color:rgba(255,209,102,.55);box-shadow:0 0 14px rgba(255,209,102,.3)}
.derby-profile-sticker[data-sticker="dbr-seal"]{font-size:9px;font-weight:700;letter-spacing:.04em}

/* swatch previews used inside the store grid cards */
.cos-swatch{width:100%;height:96px;position:relative;overflow:hidden;border:1px solid rgba(93,220,255,.18);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  display:flex;align-items:center;justify-content:center}
.cos-swatch .cos-tag{font-family:"Spline Sans Mono",monospace;font-size:13px;color:#cfe9ff;
  background:rgba(5,8,14,.66);padding:5px 9px;border:1px solid rgba(93,220,255,.3);letter-spacing:.05em}
.cos-swatch.frame-swatch{background:#070d17}

/* ========================================================================
   DBRANKED COSMETICS — PHASE A (additive)
   Motion rule: animate transform/opacity ONLY (never layout). Every animation
   sits inside @media (prefers-reduced-motion:no-preference); a reduce-override
   pins the intentional static state. Animated background layers ride a
   z-index:-1 pseudo inside the isolated .derby-profile-customized root, so
   content always paints on top. Concurrency is bounded structurally: background
   is a single slot, so at most one animated backdrop is ever live.
   ======================================================================== */

/* ---------- RARITY COLOURS (adds the tiers the base sheet lacks) ---------- */
.r-legendary{color:#c9a6ff}
.r-earned{color:#79ff9f}
.r-mythic{color:#ff9b3d;background:linear-gradient(92deg,#ffd166,#ff7a18,#ff4058,#ffd166);background-size:280% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@media (prefers-reduced-motion:no-preference){.r-mythic{animation:dbr-mythic 7s linear infinite}}
@keyframes dbr-mythic{to{background-position:280% 0}}

/* ---------- ANIMATED BACKGROUNDS (Phase A) ---------- */
.derby-cos-bg-ember-drift{
  background:
    radial-gradient(120% 90% at 50% 120%,rgba(255,122,24,.18),transparent 60%),
    radial-gradient(120% 95% at 50% -10%,rgba(255,64,88,.10),transparent 60%),
    #0a0a10 !important;}
.derby-cos-bg-ember-drift::before{
  content:"";position:absolute;inset:-10% 0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(2px 2px at 20% 80%,rgba(255,170,80,.85),transparent 60%),
    radial-gradient(2px 2px at 45% 90%,rgba(255,120,40,.7),transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 75%,rgba(255,200,120,.8),transparent 60%),
    radial-gradient(2px 2px at 85% 95%,rgba(255,140,60,.7),transparent 60%),
    radial-gradient(1.5px 1.5px at 32% 70%,rgba(255,180,90,.7),transparent 60%);
  background-size:100% 100%;opacity:.0;}
.derby-cos-bg-geiger-static{
  background:
    repeating-linear-gradient(0deg,rgba(121,255,159,.05) 0 1px,transparent 1px 3px),
    radial-gradient(130% 100% at 50% -10%,rgba(121,255,159,.16),transparent 62%),
    #060c0a !important;}
.derby-cos-bg-geiger-static::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(180,255,200,.10) 0 1px,transparent 1px 4px);
  opacity:.3;}
.derby-cos-bg-reactor-pulse{
  background:
    radial-gradient(120% 95% at 50% -12%,rgba(49,231,255,.18),transparent 60%),
    #05080f !important;}
.derby-cos-bg-reactor-pulse::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 8%,rgba(49,231,255,.30),transparent 70%);
  transform:scale(.96);opacity:.5;}
@media (prefers-reduced-motion:no-preference){
  .derby-cos-bg-ember-drift::before{opacity:.7;animation:dbr-ember 9s ease-in-out infinite alternate}
  .derby-cos-bg-geiger-static::before{animation:dbr-geiger 1.1s steps(2,end) infinite}
  .derby-cos-bg-reactor-pulse::before{animation:dbr-pulse 4.5s ease-in-out infinite}
}
@keyframes dbr-ember{from{transform:translateY(6%);opacity:.45}to{transform:translateY(-7%);opacity:.85}}
@keyframes dbr-geiger{0%{opacity:.18}100%{opacity:.42}}
@keyframes dbr-pulse{0%,100%{transform:scale(.95);opacity:.45}50%{transform:scale(1.05);opacity:.8}}

/* ---------- ANIMATED FRAMES (Phase A) — ride the ::after of the root ---------- */
.derby-cos-frame-caution-sweep{box-shadow:inset 0 0 0 1px rgba(255,176,32,.5),0 0 22px rgba(255,150,30,.14) !important;border-color:rgba(255,176,32,.5) !important;}
.derby-cos-frame-caution-sweep::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,200,90,.22) 50%,transparent 70%);
  background-size:240% 100%;background-position:200% 0;}
.derby-cos-frame-holo-edge{box-shadow:inset 0 0 0 1px rgba(150,180,255,.55),0 0 26px rgba(120,160,255,.16) !important;border-color:rgba(160,190,255,.5) !important;}
.derby-cos-frame-holo-edge::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(120deg,rgba(49,231,255,.10),rgba(154,123,255,.12),rgba(255,64,88,.08),rgba(49,231,255,.10));
  opacity:.5;}
@media (prefers-reduced-motion:no-preference){
  .derby-cos-frame-caution-sweep::after{animation:dbr-sweep 3.2s linear infinite}
  .derby-cos-frame-holo-edge::after{animation:dbr-holo 5s ease-in-out infinite}
}
@keyframes dbr-sweep{from{background-position:200% 0}to{background-position:-60% 0}}
@keyframes dbr-holo{0%,100%{opacity:.32}50%{opacity:.6}}

/* ---------- HEADER BANNERS (Phase A) — real element, behind content ---------- */
.derby-profile-banner{position:absolute;top:0;left:0;right:0;height:74px;z-index:-1;pointer-events:none;
  border-bottom:1px solid rgba(93,220,255,.18);
  -webkit-mask:linear-gradient(#000,transparent);mask:linear-gradient(#000,transparent);opacity:.9}
.derby-cos-banner-banner-mercline{background:
  linear-gradient(90deg,rgba(49,231,255,.16),transparent 60%),
  repeating-linear-gradient(90deg,rgba(49,231,255,.10) 0 2px,transparent 2px 9px),#070d17}
.derby-cos-banner-banner-hazard{background:
  repeating-linear-gradient(135deg,rgba(255,176,32,.22) 0 16px,rgba(10,8,6,.6) 16px 34px)}
.derby-cos-banner-banner-contam{background:
  radial-gradient(80% 160% at 30% -40%,rgba(121,255,159,.28),transparent 60%),
  radial-gradient(70% 160% at 80% -40%,rgba(150,90,255,.22),transparent 60%),#06100b}
.derby-cos-banner-banner-apex{background:
  linear-gradient(100deg,transparent 20%,rgba(255,209,102,.30) 48%,rgba(49,231,255,.22) 56%,transparent 80%),#06090f;
  background-size:240% 100%;background-position:200% 0}
@media (prefers-reduced-motion:no-preference){
  .derby-cos-banner-banner-apex{animation:dbr-sweep 4.5s linear infinite}
}

/* ---------- FONTS (Phase A) — self-host drop-in; strong on-brand fallback ----------
   Drop matching subset woff2 into assets/fonts/ to activate the true faces; until
   then the stacks fall back to the already-loaded brand fonts. */
@font-face{font-family:'DBR Stencil';src:url('fonts/dbr-stencil.woff2') format('woff2');font-display:swap;font-weight:400 800}
@font-face{font-family:'DBR Combat Mono';src:url('fonts/dbr-combat-mono.woff2') format('woff2');font-display:swap;font-weight:400 700}
@font-face{font-family:'DBR Brutalist';src:url('fonts/dbr-brutalist.woff2') format('woff2');font-display:swap;font-weight:500 800}
.derby-profile-font .profile-title-line,
.derby-profile-font .profile-title-line span,
.derby-profile-font .panel-title{font-family:var(--profile-font,'Chakra Petch',sans-serif) !important}
.derby-profile-font.derby-cos-font-font-stencil .profile-title-line{letter-spacing:.06em;text-transform:uppercase}

/* ---------- ACCENT SYSTEM (Phase A) — one var re-skins the dossier ----------
   Gated by .derby-profile-accent (only present when an accent is equipped) so a
   non-accented profile matches a !important-free rule set = byte-identical. */
.derby-profile-accent .profile-title-rr{color:var(--accent,#31e7ff) !important;text-shadow:0 0 14px color-mix(in srgb,var(--accent,#31e7ff) 45%,transparent)}
.derby-profile-accent .panel-title{color:var(--accent,#31e7ff) !important}
.derby-profile-accent .panel{border-color:color-mix(in srgb,var(--accent,#31e7ff) 42%,rgba(93,220,255,.18)) !important}
.derby-profile-accent .rr-graph-svg path[fill="none"]:not([filter]){stroke:var(--accent,#31e7ff)}
/* animated chrome accent: a slow holographic shimmer on the accent text surfaces */
.derby-cos-accent-accent-chrome .profile-title-rr{
  background:linear-gradient(92deg,#bfe9ff,#9a7bff,#31e7ff,#bfe9ff);background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent !important}
@media (prefers-reduced-motion:no-preference){
  .derby-cos-accent-accent-chrome .profile-title-rr{animation:dbr-mythic 6s linear infinite}
}

/* ---------- GRAPH SKINS (Phase A) — restyle the RR history SVG ---------- */
.rr-graph-svg.derby-cos-graph-graph-neon path[fill="none"]:not([filter]){stroke-width:2.4;filter:drop-shadow(0 0 6px rgba(49,231,255,.55))}
.rr-graph-svg.derby-cos-graph-graph-tactical path[fill="none"]:not([filter]){stroke-dasharray:7 5;stroke-width:2}
.rr-graph-svg.derby-cos-graph-graph-heat path[fill="none"]:not([filter]){filter:drop-shadow(0 0 5px rgba(255,122,24,.5))}
/* heat: tint ONLY the gradient-filled area path — leave the green/red gain-loss data points intact */
.rr-graph-svg.derby-cos-graph-graph-heat path[fill^="url("]{fill:rgba(255,122,24,.18)}
.rr-graph-svg.derby-cos-graph-graph-ekg path[fill="none"]:not([filter]){stroke-width:2.2}
@media (prefers-reduced-motion:no-preference){
  .rr-graph-svg.derby-cos-graph-graph-ekg path[fill="none"]:not([filter]){animation:dbr-ekg 1.8s ease-in-out infinite}
}
@keyframes dbr-ekg{0%,100%{opacity:.7}50%{opacity:1}}

/* ---------- STICKER WAVE (Phase A) — basic + animated decals ---------- */
.derby-profile-sticker[data-sticker="trefoil"]{color:#ffd166;border-color:rgba(255,209,102,.5)}
.derby-profile-sticker[data-sticker="medkit"]{color:#79ff9f;border-color:rgba(121,255,159,.5)}
.derby-profile-sticker[data-sticker="wrench"]{color:#9fb4c9;border-color:rgba(150,180,210,.5)}
.derby-profile-sticker[data-sticker="flame"]{color:#ff7a18;border-color:rgba(255,122,24,.55)}
.derby-profile-sticker[data-sticker="sticker-anim-pulse"]{color:#31e7ff;border-color:rgba(49,231,255,.55)}
.derby-profile-sticker[data-sticker="sticker-anim-spin"]{color:#ffd166;border-color:rgba(255,209,102,.5)}
.derby-profile-sticker[data-sticker="sticker-anim-flicker"]{color:#79ff9f;border-color:rgba(121,255,159,.5)}
@media (prefers-reduced-motion:no-preference){
  .derby-profile-sticker[data-sticker="sticker-anim-pulse"]{animation:dbr-stk-pulse 2.2s ease-in-out infinite}
  .derby-profile-sticker[data-sticker="sticker-anim-spin"]{animation:dbr-stk-spin 4s linear infinite}
  .derby-profile-sticker[data-sticker="sticker-anim-flicker"]{animation:dbr-stk-flicker 1.4s steps(2,end) infinite}
}
@keyframes dbr-stk-pulse{0%,100%{transform:scale(.92);opacity:.75}50%{transform:scale(1.08);opacity:1}}
@keyframes dbr-stk-spin{to{transform:rotate(360deg)}}
@keyframes dbr-stk-flicker{0%,100%{opacity:1}50%{opacity:.45}}

/* ---------- STORE SWATCH PREVIEWS for the new categories ---------- */
.cos-swatch.banner-swatch{height:96px}
.cos-swatch.font-swatch{background:#070d17;font-family:var(--sw-font,'Chakra Petch',sans-serif);font-size:34px;color:#eef7ff;letter-spacing:.04em}
.cos-swatch.accent-swatch{background:linear-gradient(120deg,var(--sw1,#31e7ff),var(--sw2,#ff4058));position:relative}
.cos-swatch.accent-swatch .cos-tag{background:rgba(5,8,14,.55);color:#fff}
.cos-swatch.graph-swatch{background:#070d17;position:relative;overflow:hidden}
.cos-swatch.graph-swatch::before{content:"";position:absolute;left:8%;right:8%;top:55%;height:2px;
  background:var(--sw1,#31e7ff);box-shadow:0 0 8px var(--sw1,#31e7ff);
  transform:skewY(-8deg)}
.cos-swatch.graph-swatch.derby-cos-graph-graph-tactical::before{background:repeating-linear-gradient(90deg,#31e7ff 0 7px,transparent 7px 12px);box-shadow:none}
.cos-swatch.graph-swatch.derby-cos-graph-graph-heat::before{background:#ff7a18;box-shadow:0 0 8px #ff7a18}

/* ---------- ACCESSIBILITY: hard stop for reduce-motion users ---------- */
@media (prefers-reduced-motion:reduce){
  .r-mythic,
  .derby-cos-bg-ember-drift::before,.derby-cos-bg-geiger-static::before,.derby-cos-bg-reactor-pulse::before,
  .derby-cos-frame-caution-sweep::after,.derby-cos-frame-holo-edge::after,
  .derby-cos-banner-banner-apex,.derby-cos-accent-accent-chrome .profile-title-rr,
  .rr-graph-svg.derby-cos-graph-graph-ekg path,
  .derby-profile-sticker[data-sticker^="sticker-anim-"]{animation:none !important}
  .derby-cos-bg-ember-drift::before{opacity:.55}
  .derby-cos-bg-reactor-pulse::before{transform:scale(1);opacity:.6}
}

/* ---------- RESPONSIVE — homepage card width (~455px) + mobile (~390px) ---------- */
@media (max-width:480px){
  .derby-profile-banner{height:58px}
  .derby-profile-stickers{top:8px;right:8px;gap:5px}
  .derby-profile-sticker{width:26px;height:26px;font-size:13px}
}

/* ---------- MINI-PROFILE (svc-card) accent + font parity ---------- */
.svc-card.derby-profile-accent{border-color:color-mix(in srgb,var(--accent,#31e7ff) 50%,rgba(93,220,255,.25)) !important}
.svc-card.derby-profile-accent .svc-rank{color:var(--accent,#31e7ff)}
.svc-card.derby-profile-accent .svc-stat span{color:var(--accent,#31e7ff)}
.svc-card.derby-profile-font .svc-rank,
.svc-card.derby-profile-font .svc-cs{font-family:var(--profile-font,'Chakra Petch',sans-serif)}

/* ======================================================================
   DBRANKED COSMETICS — PHASE B (additive): ambient effects, emblem
   treatments, avatar presets + frames, info box, section show/hide.
   transform/opacity-only animation · prefers-reduced-motion honoured.
   ====================================================================== */

/* ---------- AMBIENT EFFECTS — subtle overlay film, never blocks input ---------- */
.derby-profile-fx{position:absolute;inset:0;z-index:5;pointer-events:none}
.derby-cos-fx-fx-scanlines{background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);opacity:.55}
.derby-cos-fx-fx-vignette::before{content:"";position:absolute;inset:0;box-shadow:inset 0 0 140px 24px rgba(0,0,0,.5);opacity:.85}
.derby-cos-fx-fx-motes::before,.derby-cos-fx-fx-shimmer::before{content:"";position:absolute;inset:0}
.derby-cos-fx-fx-motes::before{background:
  radial-gradient(2px 2px at 15% 60%,rgba(255,170,80,.6),transparent 60%),
  radial-gradient(1.5px 1.5px at 60% 30%,rgba(255,200,120,.5),transparent 60%),
  radial-gradient(2px 2px at 80% 70%,rgba(255,140,60,.5),transparent 60%),
  radial-gradient(1.5px 1.5px at 40% 85%,rgba(255,190,100,.5),transparent 60%);opacity:.6}
.derby-cos-fx-fx-shimmer::before{background:linear-gradient(115deg,transparent 42%,rgba(49,231,255,.10) 50%,rgba(154,123,255,.10) 56%,transparent 64%);background-size:260% 100%;background-position:200% 0}
@media (prefers-reduced-motion:no-preference){
  .derby-cos-fx-fx-motes::before{animation:dbr-motes 11s ease-in-out infinite alternate}
  .derby-cos-fx-fx-shimmer::before{animation:dbr-sweep 6.5s linear infinite}
  .derby-cos-fx-fx-vignette::before{animation:dbr-vig 5s ease-in-out infinite}
}
@keyframes dbr-motes{from{transform:translateY(5%);opacity:.45}to{transform:translateY(-6%);opacity:.8}}
@keyframes dbr-vig{0%,100%{opacity:.7}50%{opacity:1}}

/* ---------- EMBLEM TREATMENTS (behind the rank emblem; ::after only) ---------- */
/* !important so the treatment survives the ranked-skin .profile-rank-emblem rules (equal specificity, skin CSS loads later) */
.derby-cos-emblem-emblem-glow .profile-rank-emblem{box-shadow:0 0 34px rgba(49,231,255,.28) !important}
.derby-cos-emblem-emblem-steel .profile-rank-emblem{background:linear-gradient(160deg,rgba(150,170,190,.16),rgba(10,14,20,.5)) !important;box-shadow:inset 0 0 0 1px rgba(180,200,220,.25) !important}
.derby-cos-emblem-emblem-orbit .profile-rank-emblem{position:relative}
/* a true CIRCLE centred on the emblem (inset on the TALL emblem column made a giant oval) */
.derby-cos-emblem-emblem-orbit .profile-rank-emblem::after{content:"";position:absolute;top:50%;left:50%;width:min(100%,168px);aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid rgba(49,231,255,.35);border-top-color:rgba(49,231,255,.9);border-radius:50%;pointer-events:none}
@media (prefers-reduced-motion:no-preference){.derby-cos-emblem-emblem-orbit .profile-rank-emblem::after{animation:dbr-stk-spin 6s linear infinite}}

/* ---------- AVATAR PRESETS (CSS placeholder portrait + tone) ---------- */
.derby-profile-avatar{width:166px;height:166px;max-width:100%;margin:0 auto;position:relative;display:flex;align-items:center;justify-content:center;
  border-radius:6px;overflow:hidden;
  background:radial-gradient(120% 120% at 50% 0,var(--avatar-tone,#31e7ff),transparent 58%),linear-gradient(160deg,rgba(255,255,255,.06),rgba(0,0,0,.42)),#070d17;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.derby-profile-avatar::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 6px,transparent 6px 14px)}
.derby-profile-avatar .av-glyph{position:relative;font-size:74px;line-height:1;color:#eef7ff;font-family:'Chakra Petch',sans-serif;
  filter:drop-shadow(0 0 16px color-mix(in srgb,var(--avatar-tone,#31e7ff) 65%,transparent))}
/* ---------- AVATAR FRAMES (rings around the portrait) ---------- */
.derby-cos-avframe-avframe-signal .derby-profile-avatar{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 0 3px rgba(49,231,255,.5),0 0 22px rgba(49,231,255,.25)}
.derby-cos-avframe-avframe-hazard .derby-profile-avatar{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 0 3px rgba(255,176,32,.6)}
.derby-cos-avframe-avframe-hazard .derby-profile-avatar::after{content:"";position:absolute;inset:-7px;border:2px dashed rgba(255,176,32,.7);border-radius:9px;pointer-events:none}
.derby-cos-avframe-avframe-command .derby-profile-avatar{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 0 3px rgba(255,209,102,.6),0 0 26px rgba(255,209,102,.3)}
.derby-cos-avframe-avframe-command .derby-profile-avatar::after{content:"";position:absolute;inset:-9px;border:1px solid rgba(255,209,102,.6);border-radius:11px;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .derby-cos-avframe-avframe-hazard .derby-profile-avatar::after{animation:dbr-stk-spin 9s linear infinite}
  .derby-cos-avframe-avframe-command .derby-profile-avatar::after{animation:dbr-stk-spin 16s linear infinite reverse}
}

/* ---------- INFO BOX (player tagline under the name) ---------- */
.derby-profile-info{margin:9px 0 0;font-family:'Spline Sans Mono','Rajdhani',monospace;font-size:12.5px;line-height:1.4;
  color:#cfe9ff;border-left:2px solid var(--accent,#31e7ff);padding:5px 0 5px 11px;letter-spacing:.01em;max-width:560px}

/* ---------- SECTION SHOWCASE — hide (reorder handled by guarded JS) ---------- */
.derby-hide-emblem .profile-rank-emblem,
.derby-hide-stats .wl-recent,
.derby-hide-climb_lab #scout-report,
.derby-hide-history_graph .history,
.derby-hide-info .derby-profile-info,
.derby-hide-stickers_strip .derby-profile-stickers{display:none !important}
/* hiding the emblem must collapse the 2-col profile grid, or the content is stranded in the 200px column */
.derby-hide-emblem .profile-main{grid-template-columns:1fr !important}
/* BACKDROP VISIBILITY: ranked skins paint a ~95%-opaque .profile-main over the root, which is
   where the background + header-banner cosmetics live (z-index:-1) — so on ranked profiles a paid
   backdrop/banner is almost fully occluded. When one is equipped, thin that layer so the cosmetic
   shows through while panel text stays readable. Higher specificity (.profile-rank-skin.flag) beats
   the skins' `.gold-profile-skin .profile-main` regardless of source order. */
.profile-rank-skin.derby-has-backdrop .profile-main{background:linear-gradient(rgba(6,10,18,.5),rgba(4,7,13,.66)) !important}
/* avatar is a SECONDARY portrait above the always-kept rank emblem — it never replaces the earned rank */
.profile-rank-emblem .derby-profile-avatar{width:104px;height:104px;margin:0 auto 10px}
.profile-rank-emblem .derby-profile-avatar .av-glyph{font-size:48px}

/* ---------- STORE SWATCHES for the new categories ---------- */
.cos-swatch.avatar-swatch{background:radial-gradient(120% 120% at 50% 0,var(--sw1,#31e7ff),transparent 58%),#070d17}
.cos-swatch.avatar-swatch .cos-tag{font-size:40px;color:#eef7ff;background:none;border:none;text-shadow:0 0 16px var(--sw1,#31e7ff)}
.cos-swatch.avframe-swatch{background:#070d17;box-shadow:inset 0 0 0 3px var(--sw1,#31e7ff),inset 0 0 22px rgba(49,231,255,.2)}
.cos-swatch.emblem-swatch{background:radial-gradient(60% 60% at 50% 50%,rgba(49,231,255,.2),#070d17);box-shadow:inset 0 0 24px var(--sw1,rgba(49,231,255,.35))}
.cos-swatch.effect-swatch{background:repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px),#070d17}
.cos-swatch.unlock-swatch{background:linear-gradient(135deg,rgba(255,209,102,.14),#070d17)}
.cos-swatch.unlock-swatch .cos-tag{color:#ffd166}

/* ---------- MINI-PROFILE (svc-card) effect parity ---------- */
.svc-card .derby-profile-fx{z-index:5}

/* ---------- REDUCE-MOTION hard stop (Phase B) ---------- */
@media (prefers-reduced-motion:reduce){
  .derby-cos-fx-fx-motes::before,.derby-cos-fx-fx-shimmer::before,.derby-cos-fx-fx-vignette::before,
  .derby-cos-emblem-emblem-orbit .profile-rank-emblem::after,
  .derby-cos-avframe-avframe-hazard .derby-profile-avatar::after,
  .derby-cos-avframe-avframe-command .derby-profile-avatar::after{animation:none !important}
}
@media (max-width:480px){
  .derby-profile-avatar{width:140px;height:140px}
  .derby-profile-avatar .av-glyph{font-size:60px}
  .derby-profile-info{font-size:12px}
}

/* ---------- STORE: Dossier Tools editor (info box + section layout) ---------- */
.dossier-tools{margin-top:14px;border:1px solid rgba(93,220,255,.18);background:rgba(6,11,20,.5);padding:12px;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
.dt-eyebrow{font-family:'Chakra Petch',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:#9fb4c9;margin-bottom:10px}
.dt-block{margin-bottom:14px}
.dt-block:last-child{margin-bottom:0}
.dt-label{display:block;font-size:11px;letter-spacing:.05em;color:#cfe9ff;margin-bottom:6px}
.dt-lock{color:#ff9daa;font-size:10px}
.dt-input{width:100%;box-sizing:border-box;background:rgba(5,8,14,.7);border:1px solid rgba(93,220,255,.3);color:#eef7ff;padding:7px 9px;font-family:'Spline Sans Mono',monospace;font-size:12px}
.dt-input:disabled{opacity:.45}
.dt-save{margin-top:8px;width:100%;background:rgba(49,231,255,.12);border:1px solid rgba(49,231,255,.45);color:#cfeeff;padding:7px;font-family:'Chakra Petch',sans-serif;letter-spacing:.06em;text-transform:uppercase;font-size:11px;cursor:pointer}
.dt-save:disabled{opacity:.4;cursor:not-allowed}
.dt-reset{border-color:rgba(255,64,88,.45);background:rgba(255,64,88,.08);color:#ffb3bd}
.dt-reset:hover{border-color:var(--red);box-shadow:0 0 14px rgba(255,64,88,.2)}
.dt-seclist{list-style:none;margin:0;padding:0}
.dt-secitem{display:flex;align-items:center;gap:6px;padding:5px 0;border-bottom:1px solid rgba(93,220,255,.08);font-size:12px;color:#dfeeff}
.dt-secitem .dt-secname{flex:1}
.dt-secitem button{background:rgba(5,8,14,.7);border:1px solid rgba(93,220,255,.25);color:#cfe9ff;width:24px;height:24px;line-height:1;cursor:pointer;font-size:11px}
.dt-secitem.dt-hidden .dt-secname{opacity:.4;text-decoration:line-through}
/* fixed (non-reorderable) sections: a dim pin in place of the move arrows, hide toggle still works */
.dt-secitem .dt-secpin{width:24px;text-align:center;color:rgba(207,233,255,.35);font-size:14px}
.dt-secitem.dt-secfixed .dt-secname{color:rgba(223,238,255,.7)}