/* SHADOW BROKER TRANSMOG -- avatar effects, auras, message styles, the
   equip entrance and the IDENTITY VAULT wardrobe (js/broker-transmog.js).
   Every look is keyed on one attribute value, so switching sets swaps whole
   looks and nothing from a previous set lingers:
     img[data-broker-avatar][data-broker-effect]      avatar animation
     html[data-broker-aura]                           avatar halo
     .shadow-broker-transmission[data-broker-message-effect]  message style
   The html:not(#..) prefix only raises specificity above the many
   #game-screen#game-screen chat rules; it matches every page.
   Appearance only: nothing here changes layout (no size/padding/margin). */

/* ---------------------------------------------------------- frame ----- */
html:not(#btmA):not(#btmB):not(#btmC) img[data-broker-avatar] { border-color: var(--broker-frame, #9b5de0) !important; }
/* ------------------------------------------------- avatar effects ----- */
/* Chat-size motion: on the image itself (filter / transform / opacity /
   clip-path), so no chat layout can move. One look per set. */
html:not(#btmA):not(#btmB):not(#btmC) img[data-broker-avatar][data-broker-effect="signal"], html:not(#btmA):not(#btmB):not(#btmC) img.btm-avatar[data-broker-effect="signal"], html:not(#btmA):not(#btmB):not(#btmC) #broker-transmog-overlay img.shadow-broker-avatar[data-broker-effect="signal"], html:not(#btmA):not(#btmB):not(#btmC) .btm-entrance img[data-broker-effect="signal"], html:not(#btmA):not(#btmB):not(#btmC) .btm-tile:is(:hover, :focus-visible, [aria-pressed="true"]) .btm-thumb img[data-broker-effect="signal"] { animation: btm-signal 4.2s ease-in-out infinite !important; }
@keyframes btm-signal {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(155,93,224,.55)); }
  45% { filter: drop-shadow(0 0 9px rgba(170,110,255,.85)) brightness(1.06); }
  70% { filter: drop-shadow(0 0 4px rgba(155,93,224,.6)); }
  72% { filter: drop-shadow(0 0 10px rgba(200,140,255,.95)) brightness(1.3) contrast(1.1); }
  74% { filter: drop-shadow(0 0 4px rgba(155,93,224,.6)); }
  76% { filter: drop-shadow(0 0 12px rgba(210,150,255,1)) brightness(1.35) contrast(1.15); }
  79% { filter: drop-shadow(0 0 5px rgba(155,93,224,.65)); }
}
html:not(#btmA):not(#btmB):not(#btmC) img[data-broker-avatar][data-broker-effect="void"], html:not(#btmA):not(#btmB):not(#btmC) img.btm-avatar[data-broker-effect="void"], html:not(#btmA):not(#btmB):not(#btmC) #broker-transmog-overlay img.shadow-broker-avatar[data-broker-effect="void"], html:not(#btmA):not(#btmB):not(#btmC) .btm-entrance img[data-broker-effect="void"], html:not(#btmA):not(#btmB):not(#btmC) .btm-tile:is(:hover, :focus-visible, [aria-pressed="true"]) .btm-thumb img[data-broker-effect="void"] { animation: btm-void-glow 7s ease-in-out infinite, btm-void-breath 7s ease-in-out infinite !important; }
@keyframes btm-void-glow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(110,30,220,.6)) brightness(.92) hue-rotate(-6deg); }
  50% { filter: drop-shadow(0 0 16px rgba(122,44,255,.95)) drop-shadow(0 0 4px rgba(0,0,0,.9)) brightness(1.08) hue-rotate(8deg) saturate(1.25); }
}
@keyframes btm-void-breath { 0%, 100% { transform: scale(.975); } 50% { transform: scale(1.02); } }
html:not(#btmA):not(#btmB):not(#btmC) img[data-broker-avatar][data-broker-effect="heartbeat"], html:not(#btmA):not(#btmB):not(#btmC) img.btm-avatar[data-broker-effect="heartbeat"], html:not(#btmA):not(#btmB):not(#btmC) #broker-transmog-overlay img.shadow-broker-avatar[data-broker-effect="heartbeat"], html:not(#btmA):not(#btmB):not(#btmC) .btm-entrance img[data-broker-effect="heartbeat"], html:not(#btmA):not(#btmB):not(#btmC) .btm-tile:is(:hover, :focus-visible, [aria-pressed="true"]) .btm-thumb img[data-broker-effect="heartbeat"] { animation: btm-heartbeat 1.7s cubic-bezier(.3,0,.3,1) infinite !important; }
@keyframes btm-heartbeat {
  0% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(224,24,47,.55)); }
  9% { transform: scale(1.07); filter: drop-shadow(0 0 13px rgba(255,30,50,1)) saturate(1.3) brightness(1.1); }
  18% { transform: scale(.99); filter: drop-shadow(0 0 5px rgba(224,24,47,.65)); }
  27% { transform: scale(1.045); filter: drop-shadow(0 0 10px rgba(255,30,50,.9)) saturate(1.2); }
  42%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(224,24,47,.55)); }
}
html:not(#btmA):not(#btmB):not(#btmC) img[data-broker-avatar][data-broker-effect="frost"], html:not(#btmA):not(#btmB):not(#btmC) img.btm-avatar[data-broker-effect="frost"], html:not(#btmA):not(#btmB):not(#btmC) #broker-transmog-overlay img.shadow-broker-avatar[data-broker-effect="frost"], html:not(#btmA):not(#btmB):not(#btmC) .btm-entrance img[data-broker-effect="frost"], html:not(#btmA):not(#btmB):not(#btmC) .btm-tile:is(:hover, :focus-visible, [aria-pressed="true"]) .btm-thumb img[data-broker-effect="frost"] { animation: btm-frost 5.2s linear infinite !important; }
@keyframes btm-frost {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(160,225,255,.7)) brightness(1.02); transform: none; }
  20% { filter: drop-shadow(0 0 9px rgba(190,240,255,.9)) brightness(1.12) contrast(1.05); }
  23% { filter: drop-shadow(0 0 6px rgba(160,225,255,.75)) brightness(1.03); }
  55% { filter: drop-shadow(0 0 12px rgba(220,248,255,.95)) brightness(1.18) saturate(.85); }
  58% { filter: drop-shadow(0 0 5px rgba(160,225,255,.7)) brightness(1.02); }
  90% { transform: none; }
  92% { transform: translate(.6px, 0); }
  94% { transform: translate(-.6px, 0); }
  96% { transform: translate(.4px, 0); }
  98% { transform: none; }
}
html:not(#btmA):not(#btmB):not(#btmC) img[data-broker-avatar][data-broker-effect="warsong"], html:not(#btmA):not(#btmB):not(#btmC) img.btm-avatar[data-broker-effect="warsong"], html:not(#btmA):not(#btmB):not(#btmC) #broker-transmog-overlay img.shadow-broker-avatar[data-broker-effect="warsong"], html:not(#btmA):not(#btmB):not(#btmC) .btm-entrance img[data-broker-effect="warsong"], html:not(#btmA):not(#btmB):not(#btmC) .btm-tile:is(:hover, :focus-visible, [aria-pressed="true"]) .btm-thumb img[data-broker-effect="warsong"] { animation: btm-warsong 2.3s ease-out infinite !important; }
@keyframes btm-warsong {
  0% { transform: none; filter: drop-shadow(0 0 5px rgba(255,80,20,.7)); }
  6% { transform: scale(1.06); filter: drop-shadow(0 0 16px rgba(255,110,30,1)) contrast(1.25) brightness(1.12); }
  12% { transform: translate(-1.2px, .8px) rotate(-1.2deg); }
  18% { transform: translate(1.2px, -.6px) rotate(1deg); }
  24% { transform: translate(-.6px, 0) rotate(-.4deg); filter: drop-shadow(0 0 9px rgba(255,80,20,.85)); }
  30%, 100% { transform: none; filter: drop-shadow(0 0 5px rgba(255,80,20,.7)); }
  65% { filter: drop-shadow(0 0 8px rgba(255,120,40,.85)) brightness(1.05); }
}
html:not(#btmA):not(#btmB):not(#btmC) img[data-broker-avatar][data-broker-effect="crown"], html:not(#btmA):not(#btmB):not(#btmC) img.btm-avatar[data-broker-effect="crown"], html:not(#btmA):not(#btmB):not(#btmC) #broker-transmog-overlay img.shadow-broker-avatar[data-broker-effect="crown"], html:not(#btmA):not(#btmB):not(#btmC) .btm-entrance img[data-broker-effect="crown"], html:not(#btmA):not(#btmB):not(#btmC) .btm-tile:is(:hover, :focus-visible, [aria-pressed="true"]) .btm-thumb img[data-broker-effect="crown"] { animation: btm-crown 6s ease-in-out infinite !important; }
@keyframes btm-crown {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(255,195,70,.7)) drop-shadow(0 0 2px rgba(196,134,239,.6)); transform: none; }
  45% { filter: drop-shadow(0 0 13px rgba(255,205,90,.95)) drop-shadow(0 0 4px rgba(196,134,239,.8)); transform: translateY(-1px); }
  80% { filter: drop-shadow(0 0 7px rgba(255,195,70,.75)); }
  84% { filter: drop-shadow(0 0 14px rgba(255,230,140,1)) brightness(1.3) saturate(1.2); }
  88% { filter: drop-shadow(0 0 7px rgba(255,195,70,.75)); transform: none; }
}
html:not(#btmA):not(#btmB):not(#btmC) img[data-broker-avatar][data-broker-effect="revan"], html:not(#btmA):not(#btmB):not(#btmC) img.btm-avatar[data-broker-effect="revan"], html:not(#btmA):not(#btmB):not(#btmC) #broker-transmog-overlay img.shadow-broker-avatar[data-broker-effect="revan"], html:not(#btmA):not(#btmB):not(#btmC) .btm-entrance img[data-broker-effect="revan"], html:not(#btmA):not(#btmB):not(#btmC) .btm-tile:is(:hover, :focus-visible, [aria-pressed="true"]) .btm-thumb img[data-broker-effect="revan"] { animation: btm-revan 3.4s ease-in-out infinite !important; }
@keyframes btm-revan {
  0%,100% { filter: drop-shadow(-6px 0 7px rgba(118,42,220,.52)) drop-shadow(6px 0 7px rgba(224,18,48,.52)); }
  50% { filter: drop-shadow(-9px 0 12px rgba(143,63,255,.64)) drop-shadow(9px 0 12px rgba(255,35,66,.64)) brightness(1.08); }
}
html:not(#btmA):not(#btmB):not(#btmC) img[data-broker-avatar][data-broker-effect="glitch"], html:not(#btmA):not(#btmB):not(#btmC) img.btm-avatar[data-broker-effect="glitch"], html:not(#btmA):not(#btmB):not(#btmC) #broker-transmog-overlay img.shadow-broker-avatar[data-broker-effect="glitch"], html:not(#btmA):not(#btmB):not(#btmC) .btm-entrance img[data-broker-effect="glitch"], html:not(#btmA):not(#btmB):not(#btmC) .btm-tile:is(:hover, :focus-visible, [aria-pressed="true"]) .btm-thumb img[data-broker-effect="glitch"] { animation: btm-glitch 3.4s steps(1) infinite !important; }
@keyframes btm-glitch {
  0%, 62%, 100% { filter: drop-shadow(1px 0 0 rgba(20,224,200,.8)) drop-shadow(-1px 0 0 rgba(255,46,114,.8)); transform: none; clip-path: none; }
  64% { filter: drop-shadow(4px 0 0 rgba(20,224,200,.95)) drop-shadow(-4px 0 0 rgba(255,46,114,.95)) hue-rotate(40deg); transform: translate(-2px, 1px) skewX(4deg); }
  66% { clip-path: inset(18% 0 46% 0 round 4px); transform: translate(3px, 0); }
  68% { clip-path: none; filter: drop-shadow(-3px 0 0 rgba(20,224,200,.95)) drop-shadow(3px 0 0 rgba(255,46,114,.95)) contrast(1.6); transform: translate(1px, -1px); }
  70% { clip-path: inset(52% 0 12% 0 round 4px); transform: translate(-3px, 0) skewX(-6deg); }
  72% { clip-path: none; transform: none; filter: drop-shadow(1px 0 0 rgba(20,224,200,.8)) drop-shadow(-1px 0 0 rgba(255,46,114,.8)) brightness(1.4); }
  74% { filter: drop-shadow(1px 0 0 rgba(20,224,200,.8)) drop-shadow(-1px 0 0 rgba(255,46,114,.8)); }
  86% { filter: drop-shadow(2px 0 0 rgba(20,224,200,.9)) drop-shadow(-2px 0 0 rgba(255,46,114,.9)) invert(.08); transform: translateX(1px); }
  87% { filter: drop-shadow(1px 0 0 rgba(20,224,200,.8)) drop-shadow(-1px 0 0 rgba(255,46,114,.8)); transform: none; }
}
html:not(#btmA):not(#btmB):not(#btmC) img[data-broker-avatar][data-broker-effect="omen"], html:not(#btmA):not(#btmB):not(#btmC) img.btm-avatar[data-broker-effect="omen"], html:not(#btmA):not(#btmB):not(#btmC) #broker-transmog-overlay img.shadow-broker-avatar[data-broker-effect="omen"], html:not(#btmA):not(#btmB):not(#btmC) .btm-entrance img[data-broker-effect="omen"], html:not(#btmA):not(#btmB):not(#btmC) .btm-tile:is(:hover, :focus-visible, [aria-pressed="true"]) .btm-thumb img[data-broker-effect="omen"] { animation: btm-omen 8s ease-in-out infinite !important; }
@keyframes btm-omen {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255,205,110,.5)) sepia(.15) brightness(.95); transform: none; }
  40% { filter: drop-shadow(0 0 8px rgba(255,210,120,.7)) sepia(.25) brightness(1); }
  58% { filter: drop-shadow(0 0 5px rgba(255,205,110,.55)) sepia(.2) brightness(.85); transform: scale(.99); }
  62% { filter: drop-shadow(0 0 20px rgba(255,215,130,1)) sepia(.1) brightness(1.35) contrast(1.15); transform: scale(1.04); }
  70% { filter: drop-shadow(0 0 10px rgba(255,210,120,.8)) sepia(.2) brightness(1.05); transform: scale(1.01); }
  80% { transform: none; }
}
html:not(#btmA):not(#btmB):not(#btmC) img[data-broker-avatar][data-broker-effect="bloodfang"], html:not(#btmA):not(#btmB):not(#btmC) img.btm-avatar[data-broker-effect="bloodfang"], html:not(#btmA):not(#btmB):not(#btmC) #broker-transmog-overlay img.shadow-broker-avatar[data-broker-effect="bloodfang"], html:not(#btmA):not(#btmB):not(#btmC) .btm-entrance img[data-broker-effect="bloodfang"], html:not(#btmA):not(#btmB):not(#btmC) .btm-tile:is(:hover, :focus-visible, [aria-pressed="true"]) .btm-thumb img[data-broker-effect="bloodfang"] { animation: btm-bloodfang 6s ease-in-out infinite !important; }
@keyframes btm-bloodfang {
  0%, 38% { opacity: 1; filter: drop-shadow(0 0 3px rgba(196,18,44,.7)) contrast(1.08); transform: none; }
  48% { opacity: .38; filter: drop-shadow(0 0 1px rgba(0,0,0,.9)) brightness(.6) blur(.6px); transform: scale(.98); }
  56% { opacity: .22; filter: brightness(.45) blur(.8px); transform: scale(.97); }
  60% { opacity: 1; filter: drop-shadow(0 0 14px rgba(255,30,60,1)) drop-shadow(0 0 3px rgba(255,180,190,.8)) contrast(1.3) brightness(1.15); transform: scale(1.06) translateX(-1px); }
  66% { filter: drop-shadow(0 0 6px rgba(220,20,50,.85)) contrast(1.12); transform: scale(1); }
  100% { opacity: 1; filter: drop-shadow(0 0 3px rgba(196,18,44,.7)) contrast(1.08); }
}
html:not(#btmA):not(#btmB):not(#btmC) img[data-broker-avatar][data-broker-effect="fel"], html:not(#btmA):not(#btmB):not(#btmC) img.btm-avatar[data-broker-effect="fel"], html:not(#btmA):not(#btmB):not(#btmC) #broker-transmog-overlay img.shadow-broker-avatar[data-broker-effect="fel"], html:not(#btmA):not(#btmB):not(#btmC) .btm-entrance img[data-broker-effect="fel"], html:not(#btmA):not(#btmB):not(#btmC) .btm-tile:is(:hover, :focus-visible, [aria-pressed="true"]) .btm-thumb img[data-broker-effect="fel"] { animation: btm-fel 1.15s ease-in-out infinite alternate, btm-fel-surge 5.5s ease-in-out infinite !important; }
@keyframes btm-fel {
  0% { filter: drop-shadow(0 -2px 5px rgba(61,255,42,.85)) drop-shadow(0 0 3px rgba(61,255,42,.6)); }
  35% { filter: drop-shadow(0 -5px 9px rgba(90,255,60,.9)) drop-shadow(0 0 4px rgba(61,255,42,.7)) saturate(1.2); }
  60% { filter: drop-shadow(0 -3px 6px rgba(61,255,42,.8)) drop-shadow(0 0 3px rgba(61,255,42,.6)) brightness(1.05); }
  100% { filter: drop-shadow(0 -7px 14px rgba(110,255,70,1)) drop-shadow(0 0 5px rgba(61,255,42,.8)) saturate(1.3) brightness(1.1); }
}
@keyframes btm-fel-surge { 0%, 84%, 100% { transform: none; } 88% { transform: scale(1.07) translateY(-1px); } 92% { transform: scale(.99); } 95% { transform: scale(1.02); } }
html:not(#btmA):not(#btmB):not(#btmC) img[data-broker-avatar][data-broker-effect="pulse"], html:not(#btmA):not(#btmB):not(#btmC) img.btm-avatar[data-broker-effect="pulse"], html:not(#btmA):not(#btmB):not(#btmC) #broker-transmog-overlay img.shadow-broker-avatar[data-broker-effect="pulse"], html:not(#btmA):not(#btmB):not(#btmC) .btm-entrance img[data-broker-effect="pulse"], html:not(#btmA):not(#btmB):not(#btmC) .btm-tile:is(:hover, :focus-visible, [aria-pressed="true"]) .btm-thumb img[data-broker-effect="pulse"] { filter: drop-shadow(0 0 4px var(--broker-frame)); animation: btm-pulse 2.8s ease-in-out infinite !important; }@keyframes btm-pulse { 50% { filter: drop-shadow(0 0 11px var(--broker-frame)) brightness(1.12); } }
html:not(#btmA):not(#btmB):not(#btmC) img[data-broker-avatar][data-broker-effect="eclipse"], html:not(#btmA):not(#btmB):not(#btmC) img.btm-avatar[data-broker-effect="eclipse"], html:not(#btmA):not(#btmB):not(#btmC) #broker-transmog-overlay img.shadow-broker-avatar[data-broker-effect="eclipse"], html:not(#btmA):not(#btmB):not(#btmC) .btm-entrance img[data-broker-effect="eclipse"], html:not(#btmA):not(#btmB):not(#btmC) .btm-tile:is(:hover, :focus-visible, [aria-pressed="true"]) .btm-thumb img[data-broker-effect="eclipse"] { animation: btm-eclipse 6s ease-in-out infinite !important; }@keyframes btm-eclipse { 0%,100% { filter: brightness(.82) contrast(1.15) drop-shadow(0 0 3px var(--broker-frame)); } 50% { filter: brightness(.55) contrast(1.3) drop-shadow(0 0 10px rgba(0,0,0,.95)) drop-shadow(0 0 4px var(--broker-frame)); } }
html:not(#btmA):not(#btmB):not(#btmC) img[data-broker-avatar][data-broker-effect="inferno"], html:not(#btmA):not(#btmB):not(#btmC) img.btm-avatar[data-broker-effect="inferno"], html:not(#btmA):not(#btmB):not(#btmC) #broker-transmog-overlay img.shadow-broker-avatar[data-broker-effect="inferno"], html:not(#btmA):not(#btmB):not(#btmC) .btm-entrance img[data-broker-effect="inferno"], html:not(#btmA):not(#btmB):not(#btmC) .btm-tile:is(:hover, :focus-visible, [aria-pressed="true"]) .btm-thumb img[data-broker-effect="inferno"] { animation: btm-inferno 1.6s ease-in-out infinite alternate !important; }@keyframes btm-inferno { from { filter: drop-shadow(0 0 4px #ff3b1f) drop-shadow(0 -2px 6px rgba(255,120,30,.6)); } to { filter: drop-shadow(0 0 9px #ff2a14) drop-shadow(0 -4px 12px rgba(255,150,40,.75)) brightness(1.08); } }
/* ---------------------------------------------------------- auras ----- */
html:not(#btmA):not(#btmB):not(#btmC)[data-broker-aura="void"] img[data-broker-avatar], html:not(#btmA):not(#btmB):not(#btmC) img.btm-avatar[data-broker-aura="void"], html:not(#btmA):not(#btmB):not(#btmC) #broker-transmog-overlay img.shadow-broker-avatar[data-broker-aura="void"], html:not(#btmA):not(#btmB):not(#btmC) .btm-entrance img[data-broker-aura="void"] { box-shadow: 0 0 0 2px rgba(122,44,255,.55), 0 0 16px 3px rgba(110,30,220,.45) !important; }
html:not(#btmA):not(#btmB):not(#btmC)[data-broker-aura="blood"] img[data-broker-avatar], html:not(#btmA):not(#btmB):not(#btmC) img.btm-avatar[data-broker-aura="blood"], html:not(#btmA):not(#btmB):not(#btmC) #broker-transmog-overlay img.shadow-broker-avatar[data-broker-aura="blood"], html:not(#btmA):not(#btmB):not(#btmC) .btm-entrance img[data-broker-aura="blood"] { box-shadow: 0 0 0 2px rgba(224,24,47,.6), 0 0 16px 2px rgba(200,10,30,.45) !important; }
html:not(#btmA):not(#btmB):not(#btmC)[data-broker-aura="frost"] img[data-broker-avatar], html:not(#btmA):not(#btmB):not(#btmC) img.btm-avatar[data-broker-aura="frost"], html:not(#btmA):not(#btmB):not(#btmC) #broker-transmog-overlay img.shadow-broker-avatar[data-broker-aura="frost"], html:not(#btmA):not(#btmB):not(#btmC) .btm-entrance img[data-broker-aura="frost"] { box-shadow: 0 0 0 2px rgba(190,235,255,.7), 0 0 16px 3px rgba(150,220,255,.45) !important; }
html:not(#btmA):not(#btmB):not(#btmC)[data-broker-aura="warsong"] img[data-broker-avatar], html:not(#btmA):not(#btmB):not(#btmC) img.btm-avatar[data-broker-aura="warsong"], html:not(#btmA):not(#btmB):not(#btmC) #broker-transmog-overlay img.shadow-broker-avatar[data-broker-aura="warsong"], html:not(#btmA):not(#btmB):not(#btmC) .btm-entrance img[data-broker-aura="warsong"] { box-shadow: 0 0 0 2px rgba(212,32,15,.7), 0 0 18px 3px rgba(255,90,20,.45) !important; }
html:not(#btmA):not(#btmB):not(#btmC)[data-broker-aura="royal"] img[data-broker-avatar], html:not(#btmA):not(#btmB):not(#btmC) img.btm-avatar[data-broker-aura="royal"], html:not(#btmA):not(#btmB):not(#btmC) #broker-transmog-overlay img.shadow-broker-avatar[data-broker-aura="royal"], html:not(#btmA):not(#btmB):not(#btmC) .btm-entrance img[data-broker-aura="royal"] { box-shadow: 0 0 0 2px rgba(240,180,50,.75), 0 0 0 4px rgba(155,93,224,.45), 0 0 16px 3px rgba(255,200,80,.35) !important; }
html:not(#btmA):not(#btmB):not(#btmC)[data-broker-aura="revan"] img[data-broker-avatar], html:not(#btmA):not(#btmB):not(#btmC) img.btm-avatar[data-broker-aura="revan"], html:not(#btmA):not(#btmB):not(#btmC) #broker-transmog-overlay img.shadow-broker-avatar[data-broker-aura="revan"], html:not(#btmA):not(#btmB):not(#btmC) .btm-entrance img[data-broker-aura="revan"] { box-shadow: -7px 0 18px 2px rgba(116,38,220,.39), 7px 0 18px 2px rgba(224,18,48,.39), inset 4px 0 8px rgba(121,45,225,.15), inset -4px 0 8px rgba(225,22,52,.15) !important; }
html:not(#btmA):not(#btmB):not(#btmC)[data-broker-aura="static"] img[data-broker-avatar], html:not(#btmA):not(#btmB):not(#btmC) img.btm-avatar[data-broker-aura="static"], html:not(#btmA):not(#btmB):not(#btmC) #broker-transmog-overlay img.shadow-broker-avatar[data-broker-aura="static"], html:not(#btmA):not(#btmB):not(#btmC) .btm-entrance img[data-broker-aura="static"] { box-shadow: 0 0 0 2px rgba(20,224,200,.6), -2px 0 10px rgba(255,46,114,.5), 2px 0 10px rgba(20,224,200,.5) !important; }
html:not(#btmA):not(#btmB):not(#btmC)[data-broker-aura="omen"] img[data-broker-avatar], html:not(#btmA):not(#btmB):not(#btmC) img.btm-avatar[data-broker-aura="omen"], html:not(#btmA):not(#btmB):not(#btmC) #broker-transmog-overlay img.shadow-broker-avatar[data-broker-aura="omen"], html:not(#btmA):not(#btmB):not(#btmC) .btm-entrance img[data-broker-aura="omen"] { box-shadow: 0 0 0 2px rgba(201,160,80,.65), 0 0 20px 4px rgba(120,90,30,.45) !important; }
html:not(#btmA):not(#btmB):not(#btmC)[data-broker-aura="bloodfang"] img[data-broker-avatar], html:not(#btmA):not(#btmB):not(#btmC) img.btm-avatar[data-broker-aura="bloodfang"], html:not(#btmA):not(#btmB):not(#btmC) #broker-transmog-overlay img.shadow-broker-avatar[data-broker-aura="bloodfang"], html:not(#btmA):not(#btmB):not(#btmC) .btm-entrance img[data-broker-aura="bloodfang"] { box-shadow: 0 0 0 2px rgba(140,10,30,.85), 0 0 0 3px rgba(10,0,2,.9), 0 0 12px 2px rgba(196,18,44,.4) !important; }
html:not(#btmA):not(#btmB):not(#btmC)[data-broker-aura="fel"] img[data-broker-avatar], html:not(#btmA):not(#btmB):not(#btmC) img.btm-avatar[data-broker-aura="fel"], html:not(#btmA):not(#btmB):not(#btmC) #broker-transmog-overlay img.shadow-broker-avatar[data-broker-aura="fel"], html:not(#btmA):not(#btmB):not(#btmC) .btm-entrance img[data-broker-aura="fel"] { box-shadow: 0 0 0 2px rgba(62,224,31,.75), 0 0 20px 4px rgba(70,255,40,.45), 0 -6px 18px rgba(90,255,50,.35) !important; }
html:not(#btmA):not(#btmB):not(#btmC)[data-broker-aura="static"] img[data-broker-avatar], html:not(#btmA):not(#btmB):not(#btmC) img.btm-avatar[data-broker-aura="static"], html:not(#btmA):not(#btmB):not(#btmC) #broker-transmog-overlay img.shadow-broker-avatar[data-broker-aura="static"], html:not(#btmA):not(#btmB):not(#btmC) .btm-entrance img[data-broker-aura="static"] { animation-name: btm-glitch; }
/* ---------------------------------------------------- message styles ----- */
html:not(#btmA):not(#btmB):not(#btmC) .shadow-broker-transmission[data-broker-message-effect="void"] { background: linear-gradient(135deg, rgba(40,10,80,.55), rgba(6,2,16,.85)) !important; border-color: rgba(122,44,255,.65) !important; box-shadow: 0 0 16px rgba(110,30,220,.28), inset 0 0 22px rgba(80,20,170,.25) !important; }
html:not(#btmA):not(#btmB):not(#btmC) .shadow-broker-transmission[data-broker-message-effect="void"] .shadow-broker-name { color: #b98bff !important; }
html:not(#btmA):not(#btmB):not(#btmC) .shadow-broker-transmission[data-broker-message-effect="void"] .shadow-broker-text { color: #ece2ff !important; text-shadow: 0 0 8px rgba(150,80,255,.35) !important; }
html:not(#btmA):not(#btmB):not(#btmC) .shadow-broker-transmission[data-broker-message-effect="blood"] { background: linear-gradient(135deg, rgba(90,4,16,.55), rgba(18,2,4,.85)) !important; border-color: rgba(224,24,47,.7) !important; box-shadow: 0 0 14px rgba(200,10,30,.3), inset 0 0 18px rgba(140,0,20,.25) !important; }
html:not(#btmA):not(#btmB):not(#btmC) .shadow-broker-transmission[data-broker-message-effect="blood"] .shadow-broker-name { color: #ff6b7d !important; }
html:not(#btmA):not(#btmB):not(#btmC) .shadow-broker-transmission[data-broker-message-effect="blood"] .shadow-broker-text { color: #ffe6e9 !important; text-shadow: 0 0 6px rgba(255,40,60,.3) !important; }
html:not(#btmA):not(#btmB):not(#btmC) .shadow-broker-transmission[data-broker-message-effect="royal"] { background: linear-gradient(135deg, rgba(70,40,4,.45), rgba(30,10,46,.8)) !important; border-color: rgba(240,180,50,.75) !important; box-shadow: 0 0 14px rgba(255,190,60,.22), inset 0 0 0 1px rgba(155,93,224,.35) !important; }
html:not(#btmA):not(#btmB):not(#btmC) .shadow-broker-transmission[data-broker-message-effect="royal"] .shadow-broker-name { color: #ffcc4d !important; }
html:not(#btmA):not(#btmB):not(#btmC) .shadow-broker-transmission[data-broker-message-effect="royal"] .shadow-broker-text { color: #fff6dc !important; text-shadow: 0 0 6px rgba(255,200,80,.25) !important; }
html:not(#btmA):not(#btmB):not(#btmC) .shadow-broker-transmission[data-broker-message-effect="static"] { background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px), linear-gradient(135deg, rgba(4,40,40,.6), rgba(30,4,20,.8)) !important; border-color: rgba(20,224,200,.6) !important; box-shadow: -2px 0 0 rgba(255,46,114,.45), 2px 0 0 rgba(20,224,200,.45) !important; }
html:not(#btmA):not(#btmB):not(#btmC) .shadow-broker-transmission[data-broker-message-effect="static"] .shadow-broker-name { color: #14e0c8 !important; }
html:not(#btmA):not(#btmB):not(#btmC) .shadow-broker-transmission[data-broker-message-effect="static"] .shadow-broker-text { color: #e9fffb !important; text-shadow: -1px 0 rgba(255,46,114,.55), 1px 0 rgba(20,224,200,.55) !important; }
html:not(#btmA):not(#btmB):not(#btmC) .shadow-broker-transmission[data-broker-message-effect="frost"] { background: linear-gradient(135deg, rgba(160,215,245,.18), rgba(10,22,34,.85)) !important; border-color: rgba(190,235,255,.75) !important; box-shadow: 0 0 14px rgba(150,220,255,.25), inset 0 1px 0 rgba(255,255,255,.25) !important; }
html:not(#btmA):not(#btmB):not(#btmC) .shadow-broker-transmission[data-broker-message-effect="frost"] .shadow-broker-name { color: #bfe9ff !important; }
html:not(#btmA):not(#btmB):not(#btmC) .shadow-broker-transmission[data-broker-message-effect="frost"] .shadow-broker-text { color: #f2fbff !important; text-shadow: 0 0 6px rgba(170,230,255,.35) !important; }
html:not(#btmA):not(#btmB):not(#btmC) .shadow-broker-transmission[data-broker-message-effect="warsong"] { background: linear-gradient(135deg, rgba(110,10,4,.6), rgba(10,4,2,.9)) !important; border-color: rgba(255,90,20,.7) !important; box-shadow: 0 0 16px rgba(255,60,20,.3), inset 3px 0 0 rgba(255,90,20,.8) !important; }
html:not(#btmA):not(#btmB):not(#btmC) .shadow-broker-transmission[data-broker-message-effect="warsong"] .shadow-broker-name { color: #ff7a2e !important; }
html:not(#btmA):not(#btmB):not(#btmC) .shadow-broker-transmission[data-broker-message-effect="warsong"] .shadow-broker-text { color: #fff0e6 !important; text-shadow: 0 0 6px rgba(255,90,20,.35) !important; }
html:not(#btmA):not(#btmB):not(#btmC) .shadow-broker-transmission[data-broker-message-effect="omen"] { background: radial-gradient(120% 140% at 0% 0%, rgba(120,90,30,.35), rgba(8,6,2,.9)) !important; border-color: rgba(201,160,80,.65) !important; box-shadow: 0 0 18px rgba(120,90,30,.35) !important; }
html:not(#btmA):not(#btmB):not(#btmC) .shadow-broker-transmission[data-broker-message-effect="omen"] .shadow-broker-name { color: #ffe2a0 !important; }
html:not(#btmA):not(#btmB):not(#btmC) .shadow-broker-transmission[data-broker-message-effect="omen"] .shadow-broker-text { color: #f6efe0 !important; text-shadow: 0 0 8px rgba(255,210,120,.25) !important; }
html:not(#btmA):not(#btmB):not(#btmC) .shadow-broker-transmission[data-broker-message-effect="bloodfang"] { background: linear-gradient(135deg, rgba(12,2,4,.92), rgba(40,2,8,.88)) !important; border-color: rgba(140,10,30,.85) !important; box-shadow: 0 0 0 1px rgba(0,0,0,.8), 0 0 12px rgba(196,18,44,.22), inset 0 -2px 0 rgba(196,18,44,.6) !important; }
html:not(#btmA):not(#btmB):not(#btmC) .shadow-broker-transmission[data-broker-message-effect="bloodfang"] .shadow-broker-name { color: #ff2a48 !important; }
html:not(#btmA):not(#btmB):not(#btmC) .shadow-broker-transmission[data-broker-message-effect="bloodfang"] .shadow-broker-text { color: #f4e8ea !important; text-shadow: none !important; }
html:not(#btmA):not(#btmB):not(#btmC) .shadow-broker-transmission[data-broker-message-effect="fel"] { background: radial-gradient(120% 140% at 100% 0%, rgba(40,140,10,.35), rgba(2,10,2,.92)) !important; border-color: rgba(62,224,31,.75) !important; box-shadow: 0 0 18px rgba(70,255,40,.3), inset 0 0 20px rgba(40,160,10,.22) !important; }
html:not(#btmA):not(#btmB):not(#btmC) .shadow-broker-transmission[data-broker-message-effect="fel"] .shadow-broker-name { color: #7dff4e !important; }
html:not(#btmA):not(#btmB):not(#btmC) .shadow-broker-transmission[data-broker-message-effect="fel"] .shadow-broker-text { color: #ecffe2 !important; text-shadow: 0 0 8px rgba(90,255,50,.35) !important; }
html:not(#btmA):not(#btmB):not(#btmC) .shadow-broker-transmission[data-broker-message-effect="bloodfang"] .shadow-broker-name { letter-spacing: .22em; }
html:not(#btmA):not(#btmB):not(#btmC) .shadow-broker-transmission[data-broker-message-effect="fel"] { animation: btm-fel-msg 2.6s ease-in-out infinite alternate; }
@keyframes btm-fel-msg { to { box-shadow: 0 0 24px rgba(90,255,50,.4), inset 0 0 26px rgba(50,180,20,.28); } }
html:not(#btmA):not(#btmB):not(#btmC) .shadow-broker-transmission[data-broker-message-effect="omen"] .shadow-broker-text { font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  html:not(#btmA):not(#btmB):not(#btmC) img[data-broker-avatar], html:not(#btmA):not(#btmB):not(#btmC) img.btm-avatar, html:not(#btmA):not(#btmB):not(#btmC) .shadow-broker-transmission[data-broker-message-effect] { animation: none !important; transform: none !important; }
}

/* ------------------------------------------------- GM toolbar button ----- */
.battle-controls-utility-row .transmog-utility-btn {
  border-color: rgba(196, 134, 239, .6) !important;
  background: linear-gradient(180deg, rgba(60, 26, 82, .9), rgba(22, 10, 30, .95)) !important;
  color: #ead8f8 !important;
  letter-spacing: .2em;
}
.battle-controls-utility-row .transmog-utility-btn:hover { border-color: #c486ef !important; box-shadow: 0 0 14px rgba(155, 93, 224, .4); }

/* ------------------------------------------------------ IDENTITY VAULT ----- */
.btm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: radial-gradient(120% 90% at 50% 30%, rgba(40, 14, 60, .55), rgba(3, 2, 6, .9));
  backdrop-filter: blur(5px);
  font-family: var(--font-machine, monospace);
  color: #e9e1f2;
}
.btm-overlay[hidden] { display: none !important; }
.btm-vault {
  width: min(1180px, 100%);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(155, 93, 224, .45);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(155, 93, 224, .07), transparent 120px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 22px),
    linear-gradient(180deg, #120c18, #07060a);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .05);
  overflow: hidden;
}
.btm-head { display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-bottom: 1px solid rgba(155, 93, 224, .22); }
.btm-title b { display: block; font-size: 18px; letter-spacing: .38em; color: #f1e6ff; text-shadow: 0 0 18px rgba(155, 93, 224, .5); }
.btm-title small { display: block; margin-top: 4px; color: #8a7a99; font-size: 10px; letter-spacing: .26em; }
.btm-count { margin-left: auto; padding: 6px 12px; border: 1px solid rgba(155, 93, 224, .35); border-radius: 999px; color: #c9b2e6; font-size: 10.5px; letter-spacing: .2em; }
.btm-x { border: 0; background: none; color: #b9a6d6; font-size: 26px; line-height: 1; cursor: pointer; }
.btm-x:hover { color: #fff; }
.btm-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); }

/* Preview stage */
.btm-stage {
  --set-frame: #9b5de0;
  --set-accent: #c486ef;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 26px 24px 20px;
  border-right: 1px solid rgba(155, 93, 224, .18);
  background: radial-gradient(80% 60% at 50% 22%, color-mix(in srgb, var(--set-frame) 22%, transparent), transparent 70%);
  overflow: auto;
  isolation: isolate;
}
.btm-stage-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55; }
.btm-stage-glow[data-aura="fel"] { background: radial-gradient(60% 40% at 50% 26%, rgba(70, 255, 40, .22), transparent 70%); animation: btm-fel-msg 2.4s ease-in-out infinite alternate; }
.btm-stage-glow[data-aura="bloodfang"] { background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 40%), radial-gradient(50% 30% at 50% 30%, rgba(196, 18, 44, .2), transparent 70%); }
.btm-stage-glow[data-aura="void"] { background: radial-gradient(60% 45% at 50% 28%, rgba(110, 30, 220, .3), transparent 70%); }
.btm-stage-glow[data-aura="frost"] { background: radial-gradient(60% 45% at 50% 28%, rgba(170, 230, 255, .2), transparent 70%); }
.btm-stage-glow[data-aura="royal"] { background: radial-gradient(60% 45% at 50% 28%, rgba(255, 200, 80, .18), transparent 70%); }
.btm-stage-glow[data-aura="revan"] { background: radial-gradient(52% 46% at 32% 28%, rgba(119,42,220,.19), transparent 70%), radial-gradient(52% 46% at 68% 28%, rgba(224,18,48,.17), transparent 70%); }
.btm-stage-glow[data-aura="omen"] { background: radial-gradient(60% 45% at 50% 28%, rgba(201, 160, 80, .2), transparent 70%); }
.btm-stage-glow[data-aura="warsong"], .btm-stage-glow[data-aura="blood"] { background: radial-gradient(60% 45% at 50% 28%, rgba(220, 30, 20, .2), transparent 70%); }
.btm-stage-glow[data-aura="static"] { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px); }
.btm-stage-avatar { width: 200px; height: 200px; display: grid; place-items: center; }
.btm-stage-avatar .btm-avatar { width: 184px; height: 184px; border-radius: 50%; object-fit: cover; background: #000; }
.btm-stage-meta { text-align: center; }
.btm-rarity { display: block; color: var(--set-accent); font-size: 10px; letter-spacing: .26em; }
.btm-stage-meta h2 { margin: 6px 0 4px; font: 900 26px/1.1 var(--font-machine, monospace); letter-spacing: .2em; color: #fff; text-shadow: 0 0 22px color-mix(in srgb, var(--set-frame) 70%, transparent); }
.btm-stage-meta p { margin: 0 0 10px; color: #b3a6c2; font: 500 13px/1.45 var(--font-system, system-ui); }
.btm-status { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.btm-status.is-equipped { border: 1px solid rgba(120, 240, 170, .6); color: #8ff0c2; background: rgba(40, 140, 90, .14); }
.btm-status.is-preview { border: 1px solid color-mix(in srgb, var(--set-frame) 70%, transparent); color: var(--set-accent); }
.btm-status.is-locked { border: 1px solid rgba(255, 255, 255, .2); color: #a59aae; }
.btm-sample { width: 100%; }
.btm-sample .shadow-broker-mirror-message { justify-content: flex-end; }
.btm-sample .shadow-broker-avatar { width: 40px !important; height: 40px !important; flex: 0 0 40px; }
.btm-sample .shadow-broker-transmission { padding: 9px 12px; }

/* CUSTOM forge */
.btm-forge { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btm-forge label { display: grid; gap: 5px; color: #a898bb; font-size: 9.5px; font-weight: 800; letter-spacing: .18em; }
.btm-forge select, .btm-forge input[type="color"] { height: 34px; border: 1px solid rgba(155, 93, 224, .35); border-radius: 8px; background: #0c0a10; color: #f1e8ff; font: 700 11px var(--font-machine, monospace); letter-spacing: .1em; }
.btm-forge input[type="color"] { padding: 2px; }
.btm-upload { grid-column: 1 / -1; position: relative; }
.btm-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.btm-upload span { display: grid; place-items: center; height: 38px; border: 1px dashed rgba(155, 93, 224, .6); border-radius: 9px; color: #e2d2f6; }
.btm-upload:hover span { background: rgba(155, 93, 224, .14); }

/* Collection */
.btm-collection { display: flex; flex-direction: column; min-height: 0; padding: 18px 22px; }
.btm-collection-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.btm-collection-head b { font-size: 12px; letter-spacing: .3em; color: #d9c8f5; }
.btm-collection-head small { color: #7f7394; font-size: 9.5px; letter-spacing: .16em; }
.btm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; overflow: auto; padding: 2px; }
.btm-tile {
  --set-frame: #9b5de0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px 12px;
  border: 1px solid color-mix(in srgb, var(--set-frame) 35%, rgba(255, 255, 255, .06));
  border-radius: 12px;
  background: radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--set-frame) 18%, transparent), rgba(10, 8, 14, .92));
  color: #e9e1f2;
  font: inherit;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.btm-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--set-frame) 75%, transparent); box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 0 18px color-mix(in srgb, var(--set-frame) 25%, transparent); }
.btm-tile[aria-pressed="true"] { border-color: var(--set-frame); box-shadow: 0 0 0 1px var(--set-frame), 0 0 24px color-mix(in srgb, var(--set-frame) 35%, transparent); }
.btm-thumb { width: 92px; height: 92px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px color-mix(in srgb, var(--set-frame) 70%, transparent), 0 0 16px color-mix(in srgb, var(--set-frame) 30%, transparent); }
.btm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.btm-tile b { font-size: 11.5px; letter-spacing: .14em; text-align: center; }
.btm-tile small { color: #8a7a99; font-size: 9px; letter-spacing: .2em; }
.btm-tile.rarity-rare small { color: #6fb4ff; }
.btm-tile.rarity-epic small { color: #c486ef; }
.btm-tile.rarity-legendary small { color: #ffa53a; }
.btm-tile.rarity-mythic small { color: #ff5a6e; }
.btm-tile.is-locked .btm-thumb { filter: grayscale(1) brightness(.45); }
.btm-tile.is-locked b { color: #8a7f92; }
.btm-tile.is-custom .btm-thumb { box-shadow: 0 0 0 2px rgba(255, 255, 255, .25), 0 0 0 4px rgba(155, 93, 224, .35); }
.btm-badge { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: 12px; }
.btm-badge.is-equipped { background: #1d6b48; color: #c6ffe0; box-shadow: 0 0 10px rgba(80, 220, 150, .5); }
.btm-badge.is-locked { background: rgba(0, 0, 0, .6); font-size: 11px; }

.btm-foot { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid rgba(155, 93, 224, .22); }
.btm-foot button { padding: 11px 18px; border: 1px solid rgba(155, 93, 224, .4); border-radius: 10px; background: rgba(155, 93, 224, .08); color: #e2d2f6; font: 800 11px var(--font-machine, monospace); letter-spacing: .2em; cursor: pointer; }
.btm-foot button:hover:not(:disabled) { border-color: #c486ef; background: rgba(155, 93, 224, .2); }
.btm-foot .is-primary { min-width: 150px; border-color: #c486ef; background: linear-gradient(180deg, #7b3fc0, #3d1a66); color: #fff; }
.btm-foot button:disabled { opacity: .45; cursor: default; }
.btm-note { margin-right: auto; color: #ffb3c0; font-size: 10.5px; letter-spacing: .14em; }

/* ------------------------------------------------------- equip entrance ----- */
.btm-entrance {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: radial-gradient(60% 40% at 50% 50%, color-mix(in srgb, var(--set-frame) 25%, transparent), transparent 70%);
  animation: btm-in-fade .35s ease-out;
}
.btm-entrance.is-leaving { opacity: 0; transition: opacity .45s ease; }
.btm-entrance-card { display: flex; align-items: center; gap: 18px; padding: 16px 26px 16px 16px; border: 1px solid var(--set-frame); border-radius: 999px; background: rgba(6, 4, 10, .92); box-shadow: 0 0 50px color-mix(in srgb, var(--set-frame) 45%, transparent); }
.btm-entrance-card img { width: 86px; height: 86px; border-radius: 50%; object-fit: cover; background: #000; }
.btm-entrance-card small { display: block; color: #9d90b3; font-size: 10px; letter-spacing: .26em; }
.btm-entrance-card b { display: block; margin-top: 4px; color: var(--set-accent); font: 900 24px var(--font-machine, monospace); letter-spacing: .22em; text-shadow: 0 0 18px var(--set-frame); }
.btm-entrance[data-entrance="rise"] .btm-entrance-card { animation: btm-in-rise .6s cubic-bezier(.2, .8, .2, 1); }
.btm-entrance[data-entrance="slam"] .btm-entrance-card { animation: btm-in-slam .5s cubic-bezier(.3, 1.6, .5, 1); }
.btm-entrance[data-entrance="shatter"] .btm-entrance-card { animation: btm-in-shatter .6s ease-out; }
.btm-entrance[data-entrance="glitch"] .btm-entrance-card { animation: btm-glitch .7s steps(1) 2, btm-in-fade .3s ease-out; }
.btm-entrance[data-entrance="strike"] .btm-entrance-card { animation: btm-in-strike .45s cubic-bezier(.2, .9, .2, 1); }
.btm-entrance[data-entrance="strike"]::after { content: ""; position: absolute; left: -10%; right: -10%; top: 50%; height: 2px; background: linear-gradient(90deg, transparent, #ff2a48, transparent); transform: rotate(-12deg); animation: btm-slash .45s ease-out forwards; }
.btm-entrance[data-entrance="fel"] .btm-entrance-card { animation: btm-in-fel .8s ease-out; }
.btm-entrance[data-entrance="fel"] { background: radial-gradient(60% 45% at 50% 55%, rgba(70, 255, 40, .28), transparent 70%); }
@keyframes btm-in-fade { from { opacity: 0; } }
@keyframes btm-in-rise { from { opacity: 0; transform: translateY(40px) scale(.94); } }
@keyframes btm-in-slam { from { opacity: 0; transform: scale(1.6); } }
@keyframes btm-in-shatter { 0% { opacity: 0; transform: scale(.9); filter: blur(8px) brightness(2); } 100% { filter: none; } }
@keyframes btm-in-strike { from { opacity: 0; transform: translateX(-60px) skewX(-12deg); } }
@keyframes btm-slash { from { transform: rotate(-12deg) scaleX(0); opacity: 1; } to { transform: rotate(-12deg) scaleX(1); opacity: 0; } }
@keyframes btm-in-fel { 0% { opacity: 0; transform: scale(.7); filter: drop-shadow(0 0 0 #3dff2a) brightness(2.2) saturate(2); } 60% { filter: drop-shadow(0 0 40px #3dff2a); } }
@media (prefers-reduced-motion: reduce) {
  .btm-entrance, .btm-entrance *, .btm-entrance::after, .btm-tile, .btm-stage-glow { animation: none !important; transition: none !important; }
}
html:not(#btmA):not(#btmB):not(#btmC) #broker-transmog-overlay img.shadow-broker-avatar { border-color: var(--broker-frame, #9b5de0) !important; }

/* ---------------------------------------------- large-avatar scenes ----- */
/* Vault preview, equip entrance and selected/hovered tiles get a full scene:
   .btm-fx-back behind the art, .btm-fx-front over it, keyed on data-fx. */
.btm-fx-host { position: relative; display: inline-grid; place-items: center; isolation: isolate; }
.btm-fx-host > img { position: relative; z-index: 1; }
.btm-fx { position: absolute; border-radius: 50%; pointer-events: none; }
.btm-fx-back { inset: -16%; z-index: 0; }
.btm-fx-front { inset: 2%; z-index: 2; overflow: hidden; mix-blend-mode: screen; }
.btm-tile .btm-fx { opacity: 0; transition: opacity .25s ease; }
.btm-tile:is(:hover, :focus-visible, [aria-pressed="true"]) .btm-fx { opacity: 1; }
.btm-tile .btm-thumb.btm-fx-host { overflow: visible; }
.btm-tile .btm-thumb.btm-fx-host > img { border-radius: 50%; width: 92px; height: 92px; }
.btm-tile .btm-thumb.btm-fx-host { box-shadow: none; }
.btm-tile .btm-thumb.btm-fx-host > img { box-shadow: 0 0 0 2px color-mix(in srgb, var(--set-frame) 70%, transparent), 0 0 16px color-mix(in srgb, var(--set-frame) 30%, transparent); }
.btm-tile.is-custom .btm-thumb.btm-fx-host > img { box-shadow: 0 0 0 2px rgba(255, 255, 255, .25), 0 0 0 4px rgba(155, 93, 224, .35); }
@keyframes btm-spin { to { transform: rotate(1turn); } }
@keyframes btm-spin-rev { to { transform: rotate(-1turn); } }
@keyframes btm-rise { from { background-position: 0 0, 0 0; } to { background-position: 0 -120px, 0 -80px; } }
@keyframes btm-fall { from { background-position: 0 0, 0 0; } to { background-position: 0 120px, 0 80px; } }
@keyframes btm-sweep { 0%, 55% { transform: translateY(-120%); } 100% { transform: translateY(120%); } }
@keyframes btm-gleam { 0%, 70% { transform: translateX(-130%) rotate(25deg); } 100% { transform: translateX(130%) rotate(25deg); } }
@keyframes btm-breathe { 0%, 100% { opacity: .45; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes btm-ring-out { 0% { opacity: 0; transform: scale(.8); } 10% { opacity: .9; transform: scale(.85); } 45% { opacity: 0; transform: scale(1.15); } 100% { opacity: 0; } }
@keyframes btm-flicker { 0%, 100% { opacity: .75; } 20% { opacity: 1; } 40% { opacity: .6; } 60% { opacity: .95; } 80% { opacity: .7; } }
@keyframes btm-strike-line { 0%, 57% { opacity: 0; transform: rotate(-35deg) scaleX(0); } 60% { opacity: 1; transform: rotate(-35deg) scaleX(1); } 70%, 100% { opacity: 0; transform: rotate(-35deg) scaleX(1); } }
@keyframes btm-bars { 0%, 60%, 100% { opacity: 0; } 62% { opacity: .9; transform: translateY(-10%); } 66% { opacity: .6; transform: translateY(14%); } 70% { opacity: 0; } 86% { opacity: .7; transform: translateY(-4%); } 87% { opacity: 0; } }

/* DEFAULT: rotating signal ring + scan sweep */
[data-fx="signal"] > .btm-fx-back { background: repeating-conic-gradient(rgba(170,110,255,.85) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, transparent 60%, #000 61.5%, #000 63.5%, transparent 65%); mask: radial-gradient(circle, transparent 60%, #000 61.5%, #000 63.5%, transparent 65%); animation: btm-spin 14s linear infinite; filter: drop-shadow(0 0 6px rgba(155,93,224,.9)); }
[data-fx="signal"] > .btm-fx-front::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(200,150,255,.35) 50%, transparent 60%); animation: btm-sweep 4.2s ease-in-out infinite; }
/* VOID: dark vortex + drifting motes */
[data-fx="void"] > .btm-fx-back { background: conic-gradient(from 0deg, rgba(122,44,255,.0), rgba(122,44,255,.55), rgba(10,0,30,.0) 30%, rgba(160,90,255,.45) 55%, rgba(0,0,0,0) 75%, rgba(122,44,255,.5)); -webkit-mask: radial-gradient(circle, transparent 50%, #000 60%, transparent 72%); mask: radial-gradient(circle, transparent 50%, #000 60%, transparent 72%); animation: btm-spin 9s linear infinite; filter: blur(2px); }
[data-fx="void"] > .btm-fx-front { background: radial-gradient(circle, rgba(190,140,255,.9) 0 1.5px, transparent 2px) 0 0 / 34px 41px, radial-gradient(circle, rgba(150,90,255,.7) 0 1px, transparent 1.5px) 11px 7px / 23px 29px; animation: btm-rise 6s linear infinite; opacity: .7; }
/* BLOOD: heartbeat rings */
[data-fx="heartbeat"] > .btm-fx-back { border: 3px solid rgba(255,30,50,.85); inset: -6%; animation: btm-ring-out 1.7s ease-out infinite; box-shadow: 0 0 18px rgba(255,30,50,.6); }
[data-fx="heartbeat"] > .btm-fx-front { background: radial-gradient(circle, transparent 55%, rgba(200,0,20,.35)); animation: btm-ring-out 1.7s ease-out infinite; mix-blend-mode: normal; }
/* WHITEOUT: cold halo + falling snow */
[data-fx="frost"] > .btm-fx-back { background: radial-gradient(circle, rgba(200,240,255,.45), transparent 66%); animation: btm-breathe 5.2s ease-in-out infinite; }
[data-fx="frost"] > .btm-fx-front { background: radial-gradient(circle, #fff 0 1.4px, transparent 2px) 0 0 / 27px 31px, radial-gradient(circle, rgba(220,245,255,.9) 0 1px, transparent 1.5px) 9px 13px / 19px 23px; animation: btm-fall 5s linear infinite; opacity: .85; }
/* WARSONG: flare + rising embers */
[data-fx="warsong"] > .btm-fx-back { background: radial-gradient(circle, rgba(255,90,20,.55), transparent 64%); animation: btm-ring-out 2.3s ease-out infinite; }
[data-fx="warsong"] > .btm-fx-front { background: radial-gradient(circle, rgba(255,170,60,1) 0 1.6px, transparent 2.2px) 0 0 / 29px 37px, radial-gradient(circle, rgba(255,90,20,.9) 0 1.2px, transparent 1.8px) 13px 5px / 21px 27px; animation: btm-rise 2.6s linear infinite; }
/* SOVEREIGN: rotating gold rays + gleam */
[data-fx="crown"] > .btm-fx-back { background: repeating-conic-gradient(rgba(255,205,90,.5) 0 4deg, transparent 4deg 22deg); -webkit-mask: radial-gradient(circle, transparent 56%, #000 60%, transparent 74%); mask: radial-gradient(circle, transparent 56%, #000 60%, transparent 74%); animation: btm-spin 30s linear infinite; }
[data-fx="crown"] > .btm-fx-front::before { content: ""; position: absolute; inset: -30% 40%; background: linear-gradient(90deg, transparent, rgba(255,240,180,.55), transparent); animation: btm-gleam 6s ease-in-out infinite; }
/* GLITCH: RGB bars + scanlines */
[data-fx="glitch"] > .btm-fx-back { background: linear-gradient(180deg, transparent 30%, rgba(20,224,200,.6) 30% 36%, transparent 36% 58%, rgba(255,46,114,.6) 58% 63%, transparent 63%); animation: btm-bars 3.4s steps(1) infinite; }
[data-fx="glitch"] > .btm-fx-front { background: repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 3px); animation: btm-flicker .9s steps(4) infinite; }
/* OMEN: slow rune ring + amber fog */
[data-fx="omen"] > .btm-fx-back { background: repeating-conic-gradient(rgba(232,195,114,.75) 0 1.2deg, transparent 1.2deg 10deg); -webkit-mask: radial-gradient(circle, transparent 59%, #000 60%, #000 64%, transparent 65%); mask: radial-gradient(circle, transparent 59%, #000 60%, #000 64%, transparent 65%); animation: btm-spin-rev 40s linear infinite; filter: drop-shadow(0 0 5px rgba(255,207,106,.7)); }
[data-fx="omen"] > .btm-fx-front { background: radial-gradient(60% 40% at 50% 85%, rgba(200,160,80,.35), transparent 70%); animation: btm-breathe 8s ease-in-out infinite; }
/* BLOODFANG: red mist + the strike */
[data-fx="bloodfang"] > .btm-fx-back { background: radial-gradient(70% 45% at 50% 90%, rgba(160,0,20,.55), transparent 72%); animation: btm-breathe 6s ease-in-out infinite; filter: blur(3px); }
[data-fx="bloodfang"] > .btm-fx-front::before { content: ""; position: absolute; left: -10%; right: -10%; top: 50%; height: 3px; background: linear-gradient(90deg, transparent, #ff2a48, #ffd2d8, #ff2a48, transparent); box-shadow: 0 0 12px #ff2a48; animation: btm-strike-line 6s ease-in-out infinite; }
/* THE BETRAYER: fel flames + rising motes */
[data-fx="fel"] > .btm-fx-back { background: radial-gradient(40% 55% at 30% 85%, rgba(70,255,40,.7), transparent 70%), radial-gradient(40% 60% at 70% 88%, rgba(110,255,60,.65), transparent 70%), radial-gradient(70% 40% at 50% 100%, rgba(40,200,10,.6), transparent 75%); animation: btm-flicker 1.1s ease-in-out infinite, btm-breathe 2.2s ease-in-out infinite; filter: blur(4px); }
[data-fx="fel"] > .btm-fx-front { background: radial-gradient(circle, rgba(180,255,120,1) 0 1.5px, transparent 2.1px) 0 0 / 25px 33px, radial-gradient(circle, rgba(80,255,40,.9) 0 1.1px, transparent 1.7px) 7px 11px / 17px 23px; animation: btm-rise 2.2s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .btm-fx, .btm-fx::before { animation: none !important; }
  html:not(#btmA):not(#btmB):not(#btmC) img[data-broker-effect] { animation: none !important; transform: none !important; opacity: 1 !important; clip-path: none !important; }
}
/* Particles stay off the face: they drift at the rim, in three uneven sizes. */
:is([data-fx="void"], [data-fx="frost"], [data-fx="warsong"], [data-fx="fel"]) > .btm-fx-front {
  -webkit-mask: radial-gradient(circle at 50% 42%, transparent 40%, rgba(0,0,0,.55) 56%, #000 72%);
  mask: radial-gradient(circle at 50% 42%, transparent 40%, rgba(0,0,0,.55) 56%, #000 72%);
}
[data-fx="void"] > .btm-fx-front { background: radial-gradient(circle, rgba(200,150,255,.9) 0 1.6px, transparent 2.2px) 0 0 / 47px 53px, radial-gradient(circle, rgba(150,90,255,.75) 0 1px, transparent 1.6px) 19px 31px / 31px 37px, radial-gradient(circle, rgba(230,200,255,.7) 0 .8px, transparent 1.3px) 7px 13px / 23px 61px; }
[data-fx="frost"] > .btm-fx-front { background: radial-gradient(circle, #fff 0 1.5px, transparent 2.1px) 0 0 / 43px 47px, radial-gradient(circle, rgba(220,245,255,.9) 0 1px, transparent 1.6px) 17px 23px / 29px 37px, radial-gradient(circle, rgba(255,255,255,.75) 0 .8px, transparent 1.3px) 5px 9px / 19px 53px; }
[data-fx="warsong"] > .btm-fx-front { background: radial-gradient(circle, rgba(255,180,70,1) 0 1.7px, transparent 2.3px) 0 0 / 41px 49px, radial-gradient(circle, rgba(255,90,20,.9) 0 1.2px, transparent 1.8px) 15px 27px / 29px 35px, radial-gradient(circle, rgba(255,220,120,.8) 0 .9px, transparent 1.4px) 9px 3px / 23px 57px; }
[data-fx="fel"] > .btm-fx-front { background: radial-gradient(circle, rgba(180,255,120,1) 0 1.6px, transparent 2.2px) 0 0 / 39px 51px, radial-gradient(circle, rgba(80,255,40,.9) 0 1.1px, transparent 1.7px) 13px 29px / 27px 33px, radial-gradient(circle, rgba(220,255,180,.8) 0 .8px, transparent 1.3px) 21px 7px / 21px 59px; }
@keyframes btm-rise { from { background-position: 0 0, 15px 27px, 9px 3px; } to { background-position: 0 -153px, 15px -72px, 9px -168px; } }
@keyframes btm-fall { from { background-position: 0 0, 17px 23px, 5px 9px; } to { background-position: 0 141px, 17px 134px, 5px 168px; } }