/* ============================================================================
   CIDER COMMON ROOM — LOOT SYSTEM STYLES
   Daily wheel, loot boxes, drop-rate info, reward pool browser, community
   jackpot, collection, reward modals, full-screen mega-win animations, and the
   site-wide rare-pull announcement banner.
   Loaded on tavern.html (where the loot panel + chat WS live).
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Shared rarity color tokens (mirror tavern-loot.js RARITY map)
   --------------------------------------------------------------------------- */
:root {
  --r-common:    #9fb0c0;
  --r-uncommon:  #5ad17a;
  --r-rare:      #4aa3ff;
  --r-epic:      #b06aff;
  --r-legendary: #ffb52e;
  --r-mythic:    #ff3df0;
}

/* ---------------------------------------------------------------------------
   Coin toast (engagement.js fires these on coin grants)
   --------------------------------------------------------------------------- */
.coin-toast-wrap {
  position: fixed; right: 18px; bottom: 18px; z-index: 9400;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.coin-toast {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, #2a2113, #1a1408);
  border: 1px solid color-mix(in srgb, var(--amber) 55%, transparent);
  color: #ffe7b0; font-weight: 700; font-size: 14px;
  padding: 9px 14px; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 0 1px rgba(255,200,90,.1) inset;
  transform: translateY(12px); opacity: 0;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
.coin-toast.is-in { transform: translateY(0); opacity: 1; }
.coin-toast.is-out { transform: translateY(-8px); opacity: 0; }
.coin-toast__icon { font-size: 16px; }
.coin-toast--xp { border-color: color-mix(in srgb, var(--grass) 55%, transparent); color: #cdf5c8; }

/* ---------------------------------------------------------------------------
   Loot panel scaffolding + balance header
   --------------------------------------------------------------------------- */
.loot-balance {
  display: inline-flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, #2a2113, #181206);
  border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
  padding: 7px 8px 7px 14px; border-radius: 999px;
  font-weight: 800; color: #ffe7b0; font-size: 16px;
}
.loot-balance__coin { font-size: 18px; }
.loot-balance__coins { display: inline-flex; align-items: baseline; gap: 7px; }
.loot-balance__coin-icon { font-size: 18px; }
.loot-balance__amount { font-variant-numeric: tabular-nums; font-weight: 900; }
.loot-balance__label { font-size: 13px; font-weight: 700; color: #e8cd95; }
/* The "How do I earn coins?" pill button — was rendering as an unstyled white
   browser default; give it a proper dark-amber chip look. */
.loot-balance__how {
  appearance: none; border: 1px solid color-mix(in srgb, var(--amber) 38%, transparent);
  background: rgba(255,210,120,.08); color: #ffe7b0;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
  white-space: nowrap;
}
.loot-balance__how:hover {
  background: rgba(255,210,120,.16);
  border-color: color-mix(in srgb, var(--amber) 60%, transparent);
  transform: translateY(-1px);
}
.loot-balance__how:active { transform: translateY(0); }
.loot-balance__how:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.loot-balance.is-flash { animation: lootBalFlash .5s ease; }
@keyframes lootBalFlash {
  0%,100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 3px rgba(255,80,80,.5); border-color: #ff6a6a; }
}

.loot-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 18px;
}
.loot-card__head { margin-bottom: 16px; }
.loot-card__title {
  font-size: 20px; font-weight: 800; color: var(--text);
  display: flex; align-items: center; gap: 8px; margin: 0 0 4px;
}
.loot-card__sub { font-size: 14px; color: var(--text-dim); margin: 0; line-height: 1.5; }
.loot-card__title .loot-coll__total {
  margin-left: auto; font-size: 13px; font-weight: 700; color: var(--amber-soft);
  background: rgba(255,184,82,.12); border-radius: 999px; padding: 2px 12px;
}

.loot-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: none; border-radius: 12px; cursor: pointer;
  font-family: inherit; font-weight: 800; font-size: 14px;
  padding: 11px 16px; transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.loot-btn:hover { transform: translateY(-2px); }
.loot-btn:active { transform: translateY(0); }
.loot-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.loot-btn__coin { font-size: 15px; }
.loot-btn--buy { background: var(--amber); color: #1a0e00; box-shadow: 0 4px 14px rgba(232,146,60,.3); }
.loot-btn--buy:hover:not(:disabled) { background: var(--amber-soft); }
.loot-btn--free { background: linear-gradient(180deg, #2c7a45, #1f5e34); color: #eafff0; }
.loot-btn--free:hover:not(:disabled) { filter: brightness(1.1); }
.loot-btn--free.is-claimed { background: var(--surface-2); color: var(--text-dim); }
.loot-btn--spin {
  background: linear-gradient(90deg, var(--amber), #ffd24a); color: #1a0e00;
  font-size: 16px; padding: 13px 28px; box-shadow: 0 4px 16px rgba(255,184,82,.35);
}
.loot-btn--equip { background: var(--twitch); color: #fff; }
.loot-btn--equip:hover { filter: brightness(1.12); }

/* ---------------------------------------------------------------------------
   DAILY WHEEL
   --------------------------------------------------------------------------- */
.loot-card--wheel { text-align: center; }
.loot-wheel-wrap { position: relative; width: 300px; max-width: 80vw; margin: 6px auto 14px; aspect-ratio: 1; }
.loot-wheel__pointer {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  font-size: 28px; color: var(--amber); z-index: 4; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5));
}
.loot-wheel {
  position: relative; width: 100%; height: 100%; border-radius: 50%;
  border: 6px solid #2a1c0c;
  box-shadow: 0 0 0 4px #11151c, 0 10px 40px rgba(0,0,0,.5), 0 0 30px rgba(255,184,82,.15);
}
.loot-wheel__labels { position: absolute; inset: 0; }
.loot-wheel__label {
  position: absolute; top: 0; left: 50%; height: 50%;
  transform-origin: bottom center; width: 0;
}
.loot-wheel__label-inner {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 70px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.loot-wheel__label-icon { font-size: 16px; }
.loot-wheel__label-text { font-size: 10px; font-weight: 700; line-height: 1.1; }
/* Real decorated cosmetic rendered on a wheel wedge (colored name / title /
   badge). Scaled down + clipped so it sits neatly inside the slice and spins
   with the wheel. */
.loot-wheel__label-cos {
  display: inline-flex; align-items: center; justify-content: center;
  max-width: 74px; transform: scale(.82); transform-origin: top center;
  pointer-events: none;
}
.loot-wheel__label-cos .loot-swatch { min-width: 0; min-height: 0; }
.loot-wheel__label-cos .loot-swatch--title .tavern-title-chip {
  font-size: 9px; padding: 2px 6px; max-width: 74px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.loot-wheel__label-cos .ctm-name-color, .loot-wheel__label-cos .ctm-name-wrap { font-size: 11px; font-weight: 800; }
.loot-wheel__hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 54px; height: 54px; border-radius: 50%; z-index: 3;
  background: radial-gradient(circle at 35% 30%, #3a2a16, #1a1206);
  border: 3px solid var(--amber); display: flex; align-items: center; justify-content: center;
  font-size: 24px; box-shadow: 0 0 16px rgba(255,184,82,.4);
}
.loot-wheel__cta-row { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.loot-wheel__next { font-size: 12px; color: var(--text-dim); }
.loot-wheel__pool { margin-top: 16px; text-align: left; border-top: 1px solid var(--border); padding-top: 14px; }
.loot-wheel__pool-label { font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; }
.loot-wheel__pool-items { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.loot-pool-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 10px 4px 5px; font-size: 12px; color: var(--text);
}
.loot-pool-chip__name { font-weight: 600; }
.loot-owned-tag { font-size: 10px; color: var(--grass); font-weight: 700; text-transform: uppercase; }

/* ---------------------------------------------------------------------------
   COMMUNITY JACKPOT PANEL
   --------------------------------------------------------------------------- */
.loot-jackpot {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 50% -20%, rgba(255,180,40,.18), transparent 60%), linear-gradient(180deg, #241a0c, #14100a);
  border: 1px solid color-mix(in srgb, var(--amber) 50%, transparent);
  border-radius: 16px; padding: 18px; margin-bottom: 18px;
}
.loot-jackpot__glow {
  position: absolute; inset: -40% -10% auto -10%; height: 80%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,210,74,.25), transparent 70%);
  pointer-events: none; animation: lootJackpotGlow 4s ease-in-out infinite;
}
@keyframes lootJackpotGlow { 0%,100% { opacity: .6; } 50% { opacity: 1; } }
.loot-jackpot__head { position: relative; display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.loot-jackpot__reel { font-size: 30px; line-height: 1; filter: drop-shadow(0 0 8px rgba(255,210,74,.5)); }
.loot-jackpot__title { font-size: 18px; font-weight: 800; color: #ffe7b0; margin: 0 0 2px; }
.loot-jackpot__sub { font-size: 13px; color: #d9c79e; margin: 0; line-height: 1.45; }
.loot-jackpot__body { position: relative; }
.loot-jackpot__pot-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 12px; }
.loot-jackpot__pot-label { font-size: 12px; font-weight: 700; color: var(--amber-soft); text-transform: uppercase; letter-spacing: 1px; }
.loot-jackpot__pot {
  font-size: 40px; font-weight: 900; line-height: 1.1;
  background: linear-gradient(90deg, #ffcf3a, #fff4c2, #ff9e2a, #ffcf3a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 100%; animation: ctmJackpotGold2 3s linear infinite;
  text-shadow: 0 0 18px rgba(255,180,40,.3);
  display: inline-flex; align-items: center; gap: 8px;
}
.loot-jackpot__pot .loot-jackpot__coin { -webkit-text-fill-color: initial; color: initial; font-size: 30px; }
.loot-jackpot__pot.is-bump { animation: ctmJackpotGold2 3s linear infinite, lootPotBump .5s ease; }
@keyframes lootPotBump { 0%,100% { transform: scale(1); } 40% { transform: scale(1.12); } }
.loot-jackpot__odds { font-size: 12px; color: #cdbd96; }
.loot-jackpot__winner {
  display: flex; align-items: center; gap: 9px; justify-content: center;
  background: rgba(255,210,74,.08); border: 1px solid rgba(255,210,74,.2);
  border-radius: 10px; padding: 8px 12px; font-size: 13px; color: #f0e3c0;
}
.loot-jackpot__winner--none { color: #c9bd9c; }
.loot-jackpot__winner-icon { font-size: 16px; }
.loot-jackpot__winner strong { color: #ffe7b0; }
.loot-jackpot__ago { color: #a99c78; font-size: 11px; }

/* Previous-winners leaderboard inside the jackpot panel */
.loot-jackpot__winners {
  margin-top: 12px; background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,210,74,.16); border-radius: 12px;
  padding: 12px 14px;
}
.loot-jackpot__winners-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 800; color: #ffe7b0;
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: 9px;
}
.loot-jackpot__winners-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .5px; color: #8fe6a3;
  text-transform: uppercase;
}
.loot-jackpot__winners-live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #4ade80; box-shadow: 0 0 6px #4ade80;
  animation: jpLivePulse 1.6s ease-in-out infinite;
}
@keyframes jpLivePulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }
.loot-jackpot__winners-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.loot-jackpot__win-row {
  display: grid; grid-template-columns: 22px 1fr auto auto; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 8px; font-size: 12.5px; color: #e7ddc4;
  transition: background .2s ease;
}
.loot-jackpot__win-row:nth-child(odd) { background: rgba(255,255,255,.025); }
.loot-jackpot__win-row.is-latest {
  background: rgba(255,210,74,.12); border: 1px solid rgba(255,210,74,.28);
  animation: jpRowIn .5s ease;
}
@keyframes jpRowIn { from { background: rgba(122,249,255,.25); } to {} }
.loot-jackpot__win-rank { font-weight: 800; color: #a99c78; font-variant-numeric: tabular-nums; text-align: center; }
.loot-jackpot__win-row.is-latest .loot-jackpot__win-rank { color: #ffd24a; }
.loot-jackpot__win-name { font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loot-jackpot__win-amt { font-weight: 800; color: #ffe7b0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.loot-jackpot__win-ago { color: #a99c78; font-size: 11px; white-space: nowrap; }
.loot-jackpot__winners-none { margin: 0; font-size: 12.5px; color: #c9bd9c; }

/* ---------------------------------------------------------------------------
   FREE DAILY BOX banner + flags
   --------------------------------------------------------------------------- */
.loot-free-banner {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, rgba(45,122,69,.18), rgba(31,94,52,.1));
  border: 1px solid color-mix(in srgb, var(--grass) 45%, transparent);
  border-radius: 12px; padding: 11px 14px; margin-bottom: 16px;
  font-size: 13.5px; color: #d6f5db; line-height: 1.45;
}
.loot-free-banner.is-done { background: var(--surface-2); border-color: var(--border); color: var(--text-dim); }
.loot-free-banner__icon { font-size: 18px; flex-shrink: 0; }
.loot-free-banner strong { color: #b6ffc6; }
.loot-free-banner.is-done strong { color: var(--text); }

/* ---------------------------------------------------------------------------
   LOOT BOX GRID + cards
   --------------------------------------------------------------------------- */
.loot-box-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.loot-box-card {
  position: relative; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 16px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.loot-box-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--amber) 40%, transparent); box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.loot-box-card.is-locked { opacity: .82; }
.loot-box-card--iron { border-color: color-mix(in srgb, #8fa3b8 25%, var(--border)); }
.loot-box-card--gold { border-color: color-mix(in srgb, var(--amber) 30%, var(--border)); }
.loot-box-card__free-flag {
  position: absolute; top: 10px; right: 10px;
  background: linear-gradient(90deg, #2c7a45, #3da55e); color: #eafff0;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  padding: 3px 8px; border-radius: 999px;
}
.loot-box-card__icon { font-size: 42px; line-height: 1; text-align: center; filter: drop-shadow(0 3px 6px rgba(0,0,0,.4)); }
.loot-box-card__name { font-size: 17px; font-weight: 800; color: var(--text); margin: 0; text-align: center; }
.loot-box-card__blurb { font-size: 12.5px; color: var(--text-dim); margin: 0; text-align: center; line-height: 1.4; min-height: 34px; }
.loot-box-card__btns { display: flex; flex-direction: column; gap: 7px; margin-top: auto; }
.loot-box-card__btns .loot-btn { width: 100%; }

/* Per-box drop odds rows */
.loot-odds { display: flex; flex-direction: column; gap: 5px; }
.loot-odds__row { display: grid; grid-template-columns: 10px 64px 1fr 42px; align-items: center; gap: 7px; }
.loot-odds__dot { width: 9px; height: 9px; border-radius: 50%; }
.loot-odds__name { font-size: 11px; font-weight: 700; }
.loot-odds__bar { height: 6px; background: rgba(255,255,255,.07); border-radius: 4px; overflow: hidden; }
.loot-odds__bar span { display: block; height: 100%; border-radius: 4px; }
.loot-odds__pct { font-size: 11px; color: var(--text-dim); text-align: right; font-variant-numeric: tabular-nums; }
.loot-odds--compact .loot-odds__row { grid-template-columns: 9px 54px 1fr 40px; }

/* ---------------------------------------------------------------------------
   DROP-RATE INFO CENTER
   --------------------------------------------------------------------------- */
.loot-info, .loot-pool {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px; margin-top: 16px;
}
.loot-info__head { margin-bottom: 14px; }
.loot-info__title { font-size: 15px; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 7px; margin: 0 0 3px; }
.loot-info__sub { font-size: 12.5px; color: var(--text-dim); margin: 0; line-height: 1.45; }
.loot-info__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.loot-info__col { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.loot-info__col-head { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.loot-info__legend { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border); padding-top: 12px; }
.loot-info__legend-row { display: grid; grid-template-columns: 10px 110px 1fr; align-items: start; gap: 8px; }
.loot-info__legend-name { font-size: 12px; font-weight: 800; }
.loot-info__legend-text { font-size: 12px; color: var(--text-dim); line-height: 1.4; }

/* ---------------------------------------------------------------------------
   REWARD POOL BROWSER
   --------------------------------------------------------------------------- */
.loot-pool__group { margin-top: 12px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.loot-pool__group.is-mythic {
  border-color: color-mix(in srgb, var(--r-mythic) 50%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--r-mythic) 25%, transparent), 0 0 22px color-mix(in srgb, var(--r-mythic) 14%, transparent);
}
.loot-pool__group-head {
  width: 100%; display: flex; align-items: center; gap: 9px;
  background: transparent; border: none; cursor: pointer;
  padding: 11px 14px; color: var(--text); font-family: inherit; text-align: left;
}
.loot-pool__group-head:hover { background: rgba(255,255,255,.03); }
.loot-pool__group-name { font-size: 13.5px; font-weight: 800; }
.loot-pool__group-count { margin-left: auto; font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.loot-pool__group-caret { font-size: 12px; color: var(--text-dim); transition: transform .2s ease; }
.loot-pool__group.is-collapsed .loot-pool__group-caret { transform: rotate(-90deg); }
.loot-pool__cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 9px;
  padding: 0 14px 14px;
  max-height: 1400px; overflow: hidden; transition: max-height .25s ease, opacity .2s ease, padding .25s ease;
}
.loot-pool__group.is-collapsed .loot-pool__cards { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
.loot-pool-card {
  position: relative; display: flex; align-items: center; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 9px; padding: 10px 11px; min-width: 0;
}
/* Titles + name colors/VFX have a WIDE swatch (a chip/name preview), so stack
   the swatch on top and give the label the full card width below it. Badges
   keep the compact horizontal layout since their swatch is a small icon. */
.loot-pool-card--title,
.loot-pool-card--name_color,
.loot-pool-card--name_vfx {
  flex-direction: column; align-items: stretch; text-align: left; gap: 8px;
}
.loot-pool-card.is-owned { border-color: color-mix(in srgb, var(--grass) 40%, var(--border)); }
.loot-pool-card.is-mythic {
  background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--r-mythic) 16%, transparent), transparent 70%), var(--surface-2);
  border-color: color-mix(in srgb, var(--r-mythic) 45%, transparent);
}
.loot-pool-card__crown { position: absolute; top: -8px; left: -6px; font-size: 16px; filter: drop-shadow(0 0 4px rgba(255,61,240,.6)); z-index: 2; }
.loot-pool-card__owned { position: absolute; top: 6px; right: 7px; font-size: 12px; color: var(--grass); font-weight: 900; z-index: 2; }
.loot-pool-card__swatch { flex-shrink: 0; min-width: 0; max-width: 100%; overflow: hidden; }
.loot-pool-card--title .loot-pool-card__swatch { display: flex; }
.loot-pool-card--title .loot-swatch--title { max-width: 100%; }
.loot-pool-card--title .tavern-title-chip {
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.loot-pool-card__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.loot-pool-card__name {
  font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.25;
  white-space: normal; overflow-wrap: anywhere; word-break: break-word;
}
/* Badges keep a single-line ellipsis name (swatch is small, room is tight). */
.loot-pool-card--elite .loot-pool-card__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loot-pool-card__type { font-size: 10.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .4px; }

/* Loot swatches (used in pool/collection/reward) */
.loot-swatch { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 28px; }
.loot-swatch--badge svg { display: block; }
.loot-swatch--title .tavern-title-chip { font-size: 11px; }

/* ---------------------------------------------------------------------------
   COLLECTION + EARN DRAWER
   --------------------------------------------------------------------------- */
.loot-coll { display: flex; flex-direction: column; gap: 14px; }
.loot-coll__group-head { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.loot-coll__count { color: var(--text-dim); font-weight: 700; font-size: 12px; }
.loot-coll__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.loot-coll-chip {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 5px; transition: transform .12s ease;
}
.loot-coll-chip:hover { transform: translateY(-2px); }
.loot-coll-chip.is-missing { opacity: .35; filter: grayscale(.7); }
.loot-coll-chip.is-owned { border-color: color-mix(in srgb, var(--grass) 35%, var(--border)); }

.loot-earn__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.loot-earn__col h4 { font-size: 14px; font-weight: 800; color: var(--text); margin: 0 0 10px; }
.loot-earn__wk { font-size: 11px; color: var(--text-dim); font-weight: 600; }
.loot-earn__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.loot-earn__list li { font-size: 13px; color: var(--text-dim); display: flex; gap: 8px; align-items: baseline; }
.loot-earn__list li strong { color: var(--text); }
.loot-earn__ms { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 9px; }
.loot-earn__ms.is-done { border-color: color-mix(in srgb, var(--grass) 40%, var(--border)); }
.loot-earn__ms-top { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.loot-earn__ms-reward { color: var(--amber-soft); }
.loot-earn__ms.is-done .loot-earn__ms-reward { color: var(--grass); }
.loot-earn__ms-bar { height: 6px; background: rgba(255,255,255,.07); border-radius: 4px; overflow: hidden; }
.loot-earn__ms-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--amber), var(--amber-soft)); border-radius: 4px; }
.loot-earn__ms-count { font-size: 11px; color: var(--text-dim); margin-top: 4px; text-align: right; }

/* ---------------------------------------------------------------------------
   BOX-OPEN ANIMATION (overlay before reward modal)
   --------------------------------------------------------------------------- */
.loot-open-overlay {
  position: fixed; inset: 0; z-index: 9500;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,8,12,0); transition: background .3s ease;
}
.loot-open-overlay.is-active { background: rgba(6,8,12,.8); }
.loot-open-stage { position: relative; }
.loot-open-box {
  font-size: 96px; line-height: 1; transform: scale(.4); opacity: 0;
  transition: transform .5s cubic-bezier(.2,1.4,.4,1), opacity .4s ease;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.6));
  animation: lootBoxShake 1.4s ease-in-out;
}
.loot-open-overlay.is-active .loot-open-box { transform: scale(1); opacity: 1; }
.loot-open-overlay.is-burst .loot-open-box { transform: scale(1.6); opacity: 0; }
@keyframes lootBoxShake {
  0%,100% { rotate: 0deg; } 20% { rotate: -8deg; } 40% { rotate: 8deg; }
  60% { rotate: -6deg; } 80% { rotate: 6deg; }
}
.loot-open-rays {
  position: absolute; inset: -120px; border-radius: 50%; opacity: 0;
  background: conic-gradient(from 0deg, transparent 0 8deg, rgba(255,255,255,.18) 8deg 12deg, transparent 12deg 20deg);
  transition: opacity .3s ease; animation: lootRaySpin 6s linear infinite;
}
.loot-open-overlay.is-burst .loot-open-rays { opacity: 1; }
@keyframes lootRaySpin { to { transform: rotate(360deg); } }
/* Rarity tint of the rays */
.loot-open-overlay.loot-rarity-legendary .loot-open-rays { background: conic-gradient(from 0deg, transparent 0 8deg, rgba(255,181,46,.35) 8deg 12deg, transparent 12deg 20deg); }
.loot-open-overlay.loot-rarity-epic .loot-open-rays { background: conic-gradient(from 0deg, transparent 0 8deg, rgba(176,106,255,.35) 8deg 12deg, transparent 12deg 20deg); }
.loot-open-overlay.loot-rarity-mythic .loot-open-rays { background: conic-gradient(from 0deg, transparent 0 8deg, rgba(255,61,240,.45) 8deg 12deg, transparent 12deg 20deg); }

/* ---------------------------------------------------------------------------
   REWARD MODAL
   --------------------------------------------------------------------------- */
.loot-reward-modal { position: fixed; inset: 0; z-index: 9600; display: flex; align-items: center; justify-content: center; padding: 16px; }
.loot-reward-modal[hidden] { display: none; }
.loot-reward-modal__backdrop { position: absolute; inset: 0; background: rgba(6,8,12,.78); backdrop-filter: blur(4px); }
.loot-reward-modal__panel {
  position: relative; width: min(440px, 92vw);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border); border-radius: 18px; padding: 26px 22px 22px;
  text-align: center; box-shadow: 0 24px 70px rgba(0,0,0,.6);
  transform: scale(.9) translateY(10px); opacity: 0;
  transition: transform .3s cubic-bezier(.2,1.2,.3,1), opacity .25s ease;
}
.loot-reward-modal.is-open .loot-reward-modal__panel { transform: scale(1) translateY(0); opacity: 1; }
.loot-reward-modal__panel.is-jackpot {
  border-color: color-mix(in srgb, var(--amber) 55%, transparent);
  box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(255,210,74,.25), 0 0 40px rgba(255,180,40,.2);
}
.loot-reward-modal__panel.loot-rarity-mythic { border-color: color-mix(in srgb, var(--r-mythic) 55%, transparent); box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 40px rgba(255,61,240,.25); }
.loot-reward-modal__panel.is-event-jackpot { background: linear-gradient(180deg, #241a0c, #14100a); }
.loot-reward-modal__panel.is-event-million { background: linear-gradient(180deg, #0e1a24, #0a1014); border-color: color-mix(in srgb, #7af9ff 50%, transparent); }
.loot-reward-modal__panel.is-event-overflow { background: linear-gradient(180deg, #221a0c, #14110a); }
.loot-reward-modal__rarity {
  display: inline-block; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px;
  border: 1px solid currentColor; border-radius: 999px; padding: 3px 12px; margin-bottom: 10px;
}
.loot-reward-modal__title { font-size: 19px; font-weight: 800; color: var(--text); margin: 0 0 16px; line-height: 1.3; }
.loot-reward-modal__items { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; max-height: 46vh; overflow-y: auto; }
.loot-reward-item {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 11px; padding: 10px 13px;
}
.loot-reward-item.is-cosmetic { border-color: color-mix(in srgb, var(--amber) 35%, var(--border)); }
.loot-reward-item.is-dup { opacity: .8; }
.loot-reward-item__icon { font-size: 22px; }
.loot-reward-item__swatch { flex-shrink: 0; }
.loot-reward-item__text { font-size: 14px; font-weight: 700; color: var(--text); }
.loot-reward-modal__actions { margin-bottom: 12px; }
.loot-reward-modal__actions .loot-btn { width: 100%; }
.loot-reward-modal__close {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 11px; padding: 11px; width: 100%; font-family: inherit; font-weight: 800; font-size: 14px; cursor: pointer;
  transition: border-color .12s ease;
}
.loot-reward-modal__close:hover { border-color: var(--amber); color: var(--amber); }

/* ---------------------------------------------------------------------------
   CONFETTI
   --------------------------------------------------------------------------- */
.loot-confetti { position: fixed; inset: 0; z-index: 9650; pointer-events: none; overflow: hidden; }
.loot-confetti i {
  position: absolute; top: -16px; width: 9px; height: 14px; border-radius: 2px;
  animation: lootConfetti var(--dur, 2.4s) linear var(--delay, 0s) forwards;
}
@keyframes lootConfetti {
  0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(102vh) rotate(var(--rot, 360deg)); opacity: .9; }
}

/* ---------------------------------------------------------------------------
   MEGA-WIN FULL-SCREEN ANIMATIONS (distinct per kind)
   --------------------------------------------------------------------------- */
.loot-mega {
  position: fixed; inset: 0; z-index: 9700;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4,6,10,0); transition: background .35s ease;
  overflow: hidden; pointer-events: none;
}
.loot-mega.is-active { background: rgba(4,6,10,.88); }
.loot-mega.is-out { background: rgba(4,6,10,0); transition: background .5s ease; }
.loot-mega.is-out .loot-mega__core { transform: scale(1.3); opacity: 0; }
.loot-mega__rays {
  position: absolute; width: 180vmax; height: 180vmax; opacity: 0;
  transition: opacity .5s ease .1s; animation: lootRaySpin 9s linear infinite;
}
.loot-mega.is-active .loot-mega__rays { opacity: .8; }
.loot-mega__core {
  position: relative; text-align: center;
  transform: scale(.5); opacity: 0;
  transition: transform .5s cubic-bezier(.2,1.5,.4,1), opacity .4s ease;
}
.loot-mega.is-active .loot-mega__core { transform: scale(1); opacity: 1; }
.loot-mega__icon { font-size: 88px; line-height: 1; animation: lootMegaPop 1.6s ease-in-out infinite; }
@keyframes lootMegaPop { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.loot-mega__headline {
  font-size: clamp(34px, 8vw, 68px); font-weight: 900; letter-spacing: 1px; margin-top: 8px;
  line-height: 1.05;
}
.loot-mega__sub { font-size: clamp(14px, 3vw, 20px); font-weight: 700; color: #f0f0f4; margin-top: 8px; opacity: .92; }
.loot-mega__particles { position: absolute; inset: 0; }
.loot-mega__particle {
  position: absolute; top: -8%; font-size: 22px;
  transform: scale(var(--s, 1));
  animation: lootMegaFall var(--t, 2.4s) linear var(--d, 0s) infinite;
}
@keyframes lootMegaFall {
  0% { transform: translateY(-10vh) scale(var(--s,1)) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(112vh) scale(var(--s,1)) rotate(360deg); opacity: .9; }
}

/* MYTHIC — hot pink cosmic */
.loot-mega.mega-mythic .loot-mega__rays { background: conic-gradient(from 0deg, transparent 0 6deg, rgba(255,61,240,.4) 6deg 10deg, transparent 10deg 18deg); }
.loot-mega.mega-mythic .loot-mega__headline {
  background: linear-gradient(90deg, #ff3df0, #ff9ce8, #c66dff, #ff3df0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 300% 100%; animation: ctmRainbow 3s linear infinite;
  text-shadow: 0 0 30px rgba(255,61,240,.4);
}
.loot-mega.mega-mythic .loot-mega__icon { filter: drop-shadow(0 0 18px rgba(255,61,240,.7)); }

/* JACKPOT — molten gold + coins */
.loot-mega.mega-jackpot .loot-mega__rays { background: conic-gradient(from 0deg, transparent 0 5deg, rgba(255,210,74,.45) 5deg 9deg, transparent 9deg 16deg); }
.loot-mega.mega-jackpot .loot-mega__headline {
  background: linear-gradient(90deg, #ffcf3a, #fff4c2, #ff9e2a, #ffcf3a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 100%; animation: ctmJackpotGold2 2.4s linear infinite;
  text-shadow: 0 0 30px rgba(255,180,40,.45);
}
.loot-mega.mega-jackpot .loot-mega__icon { filter: drop-shadow(0 0 18px rgba(255,200,60,.8)); }

/* OVERFLOW — bright star burst */
.loot-mega.mega-overflow .loot-mega__rays { background: conic-gradient(from 0deg, transparent 0 6deg, rgba(255,225,120,.4) 6deg 10deg, transparent 10deg 18deg); }
.loot-mega.mega-overflow .loot-mega__headline {
  background: linear-gradient(90deg, #ffd76a, #fff0b0, #ffb52e, #ffd76a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 100%; animation: ctmJackpotGold2 3s linear infinite;
  text-shadow: 0 0 26px rgba(255,200,80,.4);
}
.loot-mega.mega-overflow .loot-mega__icon { filter: drop-shadow(0 0 16px rgba(255,220,110,.7)); }

/* MILLION — prismatic cyan/violet */
.loot-mega.mega-million .loot-mega__rays { background: conic-gradient(from 0deg, transparent 0 5deg, rgba(122,249,255,.4) 5deg 9deg, rgba(201,139,255,.4) 9deg 12deg, transparent 12deg 18deg); }
.loot-mega.mega-million .loot-mega__headline {
  background: linear-gradient(90deg, #7af9ff, #b6f0ff, #c98bff, #ff9ce8, #7af9ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 300% 100%; animation: ctmMillionPrism 3.5s linear infinite;
  text-shadow: 0 0 30px rgba(150,200,255,.4);
}
.loot-mega.mega-million .loot-mega__icon { filter: drop-shadow(0 0 20px rgba(150,220,255,.8)); }

/* ---------------------------------------------------------------------------
   SITE-WIDE RARE-PULL ANNOUNCE BANNER
   --------------------------------------------------------------------------- */
.loot-announce {
  position: fixed; top: 16px; left: 50%; transform: translate(-50%, -140%);
  z-index: 9300; max-width: min(560px, 94vw);
  display: flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-radius: 999px;
  font-size: 14px; color: #fff; font-weight: 700;
  background: linear-gradient(180deg, #1c2230, #11151c);
  border: 1px solid var(--border);
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
  transition: transform .4s cubic-bezier(.2,1,.3,1), opacity .3s ease;
  opacity: 0;
}
.loot-announce.is-in { transform: translate(-50%, 0); opacity: 1; }
.loot-announce.is-out { transform: translate(-50%, -140%); opacity: 0; }
.loot-announce__icon { font-size: 18px; }
.loot-announce__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loot-announce__detail { color: #d7dbe2; font-weight: 600; }
.loot-announce__spark { font-size: 16px; }
.loot-announce.mega-mythic { border-color: color-mix(in srgb, var(--r-mythic) 55%, transparent); box-shadow: 0 12px 40px rgba(0,0,0,.55), 0 0 24px rgba(255,61,240,.3); }
.loot-announce.mega-jackpot { border-color: color-mix(in srgb, var(--amber) 60%, transparent); box-shadow: 0 12px 40px rgba(0,0,0,.55), 0 0 24px rgba(255,180,40,.35); }
.loot-announce.mega-overflow { border-color: color-mix(in srgb, #ffd76a 55%, transparent); box-shadow: 0 12px 40px rgba(0,0,0,.55), 0 0 24px rgba(255,210,100,.3); }
.loot-announce.mega-million { border-color: color-mix(in srgb, #7af9ff 55%, transparent); box-shadow: 0 12px 40px rgba(0,0,0,.55), 0 0 24px rgba(122,249,255,.3); }
.loot-announce.mega-jackpot .loot-announce__text strong,
.loot-announce.mega-jackpot { color: #ffe7b0; }
.loot-announce.mega-mythic .loot-announce__text strong { color: #ff9ce8; }
.loot-announce.mega-million .loot-announce__text strong { color: #b6f0ff; }

/* ===========================================================================
   ONE-IN-A-MILLION — EPIC MEGA-WIN OVERHAUL
   ---------------------------------------------------------------------------
   The single most theatrical moment in the tavern. Layered: white flash,
   drifting starfield, triple prismatic shockwave rings, a sweeping light
   beam, an 80-glyph confetti storm, a letter-cascade headline, and a brief
   screen-shake. Everything is tuned to read as "jaw-dropping rare."
   =========================================================================== */
.loot-mega--epic.is-active { background: radial-gradient(circle at 50% 45%, rgba(20,10,40,.92), rgba(2,3,8,.96)); }
.loot-mega--epic .loot-mega__rays { opacity: 0; }
.loot-mega--epic.is-active .loot-mega__rays { opacity: .9; animation: lootRaySpin 6s linear infinite; }

/* Opening white flash */
.loot-mega__flash {
  position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none;
}
.loot-mega--epic.is-active .loot-mega__flash { animation: lootMegaFlash 1s ease-out forwards; }
@keyframes lootMegaFlash { 0% { opacity: .95; } 18% { opacity: .7; } 100% { opacity: 0; } }

/* Drifting starfield */
.loot-mega__stars { position: absolute; inset: 0; }
.loot-mega__stars i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px 1px rgba(190,230,255,.9);
  transform: scale(var(--s,1)); opacity: 0;
}
.loot-mega--epic.is-active .loot-mega__stars i { animation: lootStarTwinkle 2.6s ease-in-out var(--d,0s) infinite; }
@keyframes lootStarTwinkle { 0%,100% { opacity: 0; transform: scale(calc(var(--s,1) * .4)); } 50% { opacity: 1; transform: scale(var(--s,1)); } }

/* Triple prismatic shockwave rings */
.loot-mega__shock { position: absolute; left: 50%; top: 45%; transform: translate(-50%,-50%); }
.loot-mega__shock span {
  position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%; border: 3px solid rgba(150,220,255,.9); opacity: 0;
  box-shadow: 0 0 30px rgba(122,249,255,.7), inset 0 0 20px rgba(201,139,255,.6);
}
.loot-mega--epic.is-active .loot-mega__shock span { animation: lootShock 2.2s cubic-bezier(.1,.6,.3,1) forwards; }
.loot-mega--epic.is-active .loot-mega__shock span:nth-child(2) { animation-delay: .35s; border-color: rgba(201,139,255,.9); }
.loot-mega--epic.is-active .loot-mega__shock span:nth-child(3) { animation-delay: .7s; border-color: rgba(255,156,232,.9); }
@keyframes lootShock {
  0% { width: 40px; height: 40px; margin: -20px 0 0 -20px; opacity: .9; }
  100% { width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax; opacity: 0; border-width: 1px; }
}

/* Sweeping light beam */
.loot-mega__beam {
  position: absolute; left: 50%; top: 50%; width: 12px; height: 200vmax;
  margin-left: -6px; transform-origin: top center; transform: translateY(-50%) rotate(0deg);
  background: linear-gradient(to bottom, rgba(255,255,255,.85), rgba(150,220,255,.25) 30%, transparent 70%);
  filter: blur(2px); opacity: 0; mix-blend-mode: screen;
}
.loot-mega--epic.is-active .loot-mega__beam { opacity: .55; animation: lootBeamSweep 5.5s linear infinite; }
@keyframes lootBeamSweep { 0% { transform: translateY(-50%) rotate(0deg); } 100% { transform: translateY(-50%) rotate(360deg); } }

/* Bigger, glowing icon for the million */
.loot-mega--epic .loot-mega__icon { font-size: 120px; animation: lootMegaPopBig 1.4s ease-in-out infinite; }
@keyframes lootMegaPopBig { 0%,100% { transform: scale(1) rotate(-4deg); } 50% { transform: scale(1.18) rotate(4deg); } }
.loot-mega.mega-million.loot-mega--epic .loot-mega__icon {
  filter: drop-shadow(0 0 26px rgba(150,220,255,.95)) drop-shadow(0 0 48px rgba(201,139,255,.7));
}

/* Letter-cascade headline */
.loot-mega__headline--split { display: inline-flex; flex-wrap: wrap; justify-content: center; }
.loot-mega__headline--split .loot-mega__sp { width: .35em; }
.loot-mega__headline--split .loot-mega__ch {
  display: inline-block; opacity: 0; transform: translateY(40px) scale(.4) rotate(-12deg);
}
.loot-mega--epic.is-active .loot-mega__headline--split .loot-mega__ch {
  animation: lootCharIn .6s cubic-bezier(.2,1.6,.3,1) forwards;
  animation-delay: calc(.5s + var(--i) * .07s);
}
@keyframes lootCharIn { to { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); } }

/* Particle drift override for epic storm */
.loot-mega--epic .loot-mega__particle { font-size: 26px; }
.loot-mega--epic .loot-mega__particle { animation-name: lootMegaFallDrift; }
@keyframes lootMegaFallDrift {
  0% { transform: translate(0,-12vh) scale(var(--s,1)) rotate(0deg); opacity: 0; }
  8% { opacity: 1; }
  100% { transform: translate(var(--x,0px),114vh) scale(var(--s,1)) rotate(540deg); opacity: .85; }
}

/* Screen-shake (applied to body briefly) */
.ctm-screenshake { animation: ctmScreenShake .9s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes ctmScreenShake {
  10%,90% { transform: translate(-2px,1px); }
  20%,80% { transform: translate(4px,-2px); }
  30%,50%,70% { transform: translate(-6px,3px); }
  40%,60% { transform: translate(6px,-3px); }
}

/* ---------------------------------------------------------------------------
   RARITY name colorings for reward titles
   --------------------------------------------------------------------------- */
.loot-rarity-mythic .loot-reward-modal__title { color: var(--r-mythic); }

/* ---------------------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .loot-mega__icon, .loot-mega__rays, .loot-mega__particle,
  .loot-jackpot__glow, .loot-open-rays, .loot-open-box,
  .loot-confetti i, .loot-jackpot__pot,
  .loot-mega__flash, .loot-mega__stars i, .loot-mega__shock span,
  .loot-mega__beam, .loot-mega__headline--split .loot-mega__ch { animation: none !important; }
  .ctm-screenshake { animation: none !important; }
  .loot-mega__headline--split .loot-mega__ch { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   Mobile
   --------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .loot-box-grid { grid-template-columns: 1fr 1fr; }
  .loot-jackpot__pot { font-size: 32px; }
  .loot-mega__headline { font-size: clamp(28px, 9vw, 44px); }
  .loot-announce { font-size: 12.5px; padding: 9px 14px; }
}

/* ===========================================================================
   LOOT COSMETICS — PREMIUM VFX PACK  (added for loot overhaul)
   ---------------------------------------------------------------------------
   Every loot-exclusive color / VFX / title / badge effect lives here so the
   pull-able cosmetics look at least as good as (usually better than) the
   earned ones. Organized: badge keyframes -> badge classes -> title VFX ->
   loot name-colors -> loot name-VFX -> mythic showpieces.
   =========================================================================== */

/* ===========================================================================
   BADGE VFX — FULL OVERHAUL
   Every badge has its own unique class + keyframe(s). No two share a look.
   Rarity: common=subtle, uncommon=one clear effect, rare=two layers,
           epic=rich aura+particles, legendary=very elaborate,
           mythic/jackpot/million=spectacular showpieces.
   All particle pseudo-elements require: position:relative; overflow:visible;
   display:inline-flex (kept on each rule).
   =========================================================================== */

/* ---- Shared utility orbital keyframe (used across multiple unique classes
        but each class uses different radii/speeds so motion stays distinct) ---- */
@keyframes ctmOrbitCW  { 0% { transform: rotate(0deg)   translateX(var(--r,10px)) rotate(0deg);   } 100% { transform: rotate(360deg)  translateX(var(--r,10px)) rotate(-360deg);  } }
@keyframes ctmOrbitCCW { 0% { transform: rotate(0deg)   translateX(var(--r,10px)) rotate(0deg);   } 100% { transform: rotate(-360deg) translateX(var(--r,10px)) rotate(360deg);   } }

/* ===== ELITE (achievement) BADGES ===== */

/* --- netherite_star: gold starburst pulse + radiating gold motes --- */
@keyframes ctmNetherStarBase { 0%,100% { filter: drop-shadow(0 0 5px #ffd24a) drop-shadow(0 0 2px #fff3b0); } 50% { filter: drop-shadow(0 0 14px #ffd24a) drop-shadow(0 0 24px #ffb52e) brightness(1.3); } }
@keyframes ctmNetherStarSpark { 0%,100% { opacity:0; transform:scale(.3) rotate(0deg); } 40%,60% { opacity:1; transform:scale(1) rotate(180deg); } }
.vfx-loot-netherstar {
  animation: ctmNetherStarBase 2s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-netherstar::before {
  content:""; position:absolute; inset:-4px; border-radius:50%;
  background: conic-gradient(transparent 0deg, rgba(255,210,74,.18) 45deg, transparent 90deg, rgba(255,210,74,.18) 135deg, transparent 180deg, rgba(255,210,74,.18) 225deg, transparent 270deg, rgba(255,210,74,.18) 315deg, transparent 360deg);
  animation: ctmOrbitCW 4s linear infinite;
  --r:0px;
}
.vfx-loot-netherstar::after {
  content:""; position:absolute; width:3px; height:3px; border-radius:50%; top:50%; left:50%; margin:-1.5px;
  background:#fff3b0;
  box-shadow: 8px -6px 0 1px #ffd24a, -8px 6px 0 1px #ffd24a, 6px 8px 0 1px #fff3b0, -6px -8px 0 1px #fff3b0;
  animation: ctmNetherStarSpark 1.8s ease-in-out infinite;
}

/* --- ender_eye: arcane violet iris pulse + slow orbit ring --- */
@keyframes ctmEnderEyeBase { 0%,100% { filter: drop-shadow(0 0 5px #9b5aff) drop-shadow(0 0 10px #4a1a8a); } 50% { filter: drop-shadow(0 0 14px #c77dff) drop-shadow(0 0 22px #7040cc) brightness(1.25); } }
@keyframes ctmEnderEyePupil { 0%,100% { opacity:.4; transform:scale(.6); } 50% { opacity:1; transform:scale(1.1); } }
.vfx-loot-endereye {
  animation: ctmEnderEyeBase 2.4s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-endereye::before {
  content:""; position:absolute; width:4px; height:4px; border-radius:50%; top:50%; left:50%; margin:-2px;
  background: radial-gradient(circle, #d0a3ff 0%, #7040cc 60%, transparent 80%);
  animation: ctmOrbitCW 3.5s linear infinite; --r:9px;
}
.vfx-loot-endereye::after {
  content:""; position:absolute; width:4px; height:4px; border-radius:50%; top:50%; left:50%; margin:-2px;
  background: radial-gradient(circle, #fff 0%, #9b5aff 55%, transparent 80%);
  animation: ctmEnderEyePupil 1.8s ease-in-out infinite;
}

/* --- dragon_egg: void-purple gravitational spiral + floating void wisps --- */
@keyframes ctmDragonEggBase { 0%,100% { filter: drop-shadow(0 0 6px #5a1a9a) brightness(.95); transform:scale(1); } 50% { filter: drop-shadow(0 0 16px #b066ff) drop-shadow(0 0 28px #3a008a) brightness(1.2); transform:scale(1.05); } }
@keyframes ctmDragonEggWisp { 0% { opacity:0; transform:translateY(3px) scale(.5); } 40% { opacity:.8; } 100% { opacity:0; transform:translateY(-12px) scale(1.1) rotate(20deg); } }
.vfx-loot-dragonegg {
  animation: ctmDragonEggBase 3s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-dragonegg::before {
  content:""; position:absolute; width:3px; height:3px; border-radius:50%; top:50%; left:50%; margin:-1.5px;
  background:#c77dff;
  box-shadow: 7px -5px 0 #9b5aff, -7px 5px 0 #b066ff, 5px 8px 0 #7a3aee;
  animation: ctmOrbitCCW 4s linear infinite; --r:8px;
}
.vfx-loot-dragonegg::after {
  content:""; position:absolute; width:2px; height:4px; border-radius:2px; left:-6px; top:20%;
  background:linear-gradient(to top, transparent, #b066ff);
  box-shadow: 16px 3px 0 rgba(155,90,255,.7), 8px -2px 0 rgba(180,110,255,.6);
  animation: ctmDragonEggWisp 2.2s ease-in infinite;
}

/* --- elytra: gliding silver-blue feather shimmer + lift float --- */
@keyframes ctmElytraBase { 0%,100% { filter: drop-shadow(0 0 4px #7ad4ff); transform:translateY(0); } 50% { filter: drop-shadow(0 0 12px #aae8ff) drop-shadow(0 0 20px #4ab8ff); transform:translateY(-2px); } }
@keyframes ctmElytraFeather { 0%,100% { opacity:0; transform:translateY(0) translateX(0) rotate(-15deg); } 30% { opacity:.9; } 100% { opacity:0; transform:translateY(-10px) translateX(3px) rotate(10deg); } }
.vfx-loot-elytra {
  animation: ctmElytraBase 2.6s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-elytra::before {
  content:""; position:absolute; width:2px; height:5px; border-radius:1px; left:-5px; bottom:0;
  background:linear-gradient(to top, transparent, #7ad4ff);
  box-shadow: 14px -2px 0 rgba(122,212,255,.8), 8px 1px 0 rgba(170,232,255,.7);
  animation: ctmElytraFeather 2.2s ease-in infinite;
}
.vfx-loot-elytra::after {
  content:""; position:absolute; width:2px; height:5px; border-radius:1px; right:-5px; bottom:0;
  background:linear-gradient(to top, transparent, #aae8ff);
  animation: ctmElytraFeather 2.2s ease-in .8s infinite;
}

/* --- trident: electric cyan arc flash + lightning sparks --- */
@keyframes ctmTridentBase { 0%,92%,100% { filter: drop-shadow(0 0 4px #39d0ff); } 95% { filter: drop-shadow(0 0 16px #fff) drop-shadow(0 0 24px #39d0ff) brightness(1.4); } }
@keyframes ctmTridentArc { 0%,88%,100% { opacity:0; } 93% { opacity:1; transform:scaleX(1); } 96% { opacity:.3; } }
.vfx-loot-trident {
  animation: ctmTridentBase 3.2s linear infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-trident::before {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; top:20%; left:50%; margin-left:-1px;
  background:#fff;
  box-shadow: 6px -4px 0 #39d0ff, -6px -4px 0 #39d0ff, 0 -8px 0 #7fffff;
  animation: ctmTridentArc 3.2s linear infinite;
}
.vfx-loot-trident::after {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; bottom:20%; right:-4px;
  background:#39d0ff;
  box-shadow: -8px 3px 0 rgba(57,208,255,.8), -4px -5px 0 rgba(120,255,255,.7);
  animation: ctmTridentArc 3.2s linear 1.6s infinite;
}

/* --- beacon: ascending beam column + radiating rings --- */
@keyframes ctmBeaconBase { 0%,100% { filter: drop-shadow(0 0 6px #39d0ff) drop-shadow(0 0 14px #0a8aff); } 50% { filter: drop-shadow(0 0 14px #7df0ff) drop-shadow(0 0 26px #39d0ff) brightness(1.3); } }
@keyframes ctmBeaconRay { 0% { opacity:.7; transform:scaleY(0) translateY(0); transform-origin:bottom center; } 60% { opacity:.5; transform:scaleY(1) translateY(-6px); } 100% { opacity:0; transform:scaleY(1.2) translateY(-10px); } }
@keyframes ctmBeaconRing { 0% { transform:scale(.5); opacity:.8; } 100% { transform:scale(2.2); opacity:0; } }
.vfx-loot-beacon {
  animation: ctmBeaconBase 2s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-beacon::before {
  content:""; position:absolute; width:3px; top:-14px; bottom:50%; left:50%; margin-left:-1.5px;
  background:linear-gradient(to top, rgba(57,208,255,.9), transparent);
  animation: ctmBeaconRay 1.8s ease-out infinite;
}
.vfx-loot-beacon::after {
  content:""; position:absolute; width:10px; height:10px; border-radius:50%; border:1.5px solid rgba(57,208,255,.6); top:50%; left:50%; margin:-5px;
  animation: ctmBeaconRing 2s ease-out infinite;
}

/* --- end_crystal: prismatic facet spin + pink float drift --- */
@keyframes ctmEndCrystalBase { 0%,100% { filter: drop-shadow(0 0 6px #ff7de0) drop-shadow(0 0 12px #9b4acc); transform:translateY(0); } 50% { filter: drop-shadow(0 0 16px #ffb3f0) drop-shadow(0 0 26px #cc66ff); transform:translateY(-3px); } }
@keyframes ctmEndCrystalSpin { 0% { transform:rotate(0deg) translateX(10px) rotate(0deg); } 100% { transform:rotate(360deg) translateX(10px) rotate(-360deg); } }
.vfx-loot-endcrystal {
  animation: ctmEndCrystalBase 2.4s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-endcrystal::before {
  content:""; position:absolute; width:3px; height:3px; border-radius:50%; top:50%; left:50%; margin:-1.5px;
  background: radial-gradient(circle, #ffb3f0 0%, #cc66ff 60%, transparent 80%);
  animation: ctmEndCrystalSpin 2.8s linear infinite;
}
.vfx-loot-endcrystal::after {
  content:""; position:absolute; width:3px; height:3px; border-radius:50%; top:50%; left:50%; margin:-1.5px;
  background: radial-gradient(circle, #fff 0%, #ff7de0 60%, transparent 80%);
  animation: ctmEndCrystalSpin 2.8s linear 1.4s infinite;
}

/* --- totem: golden life-force pulse + orbiting life sparks --- */
@keyframes ctmTotemBase { 0%,100% { filter: drop-shadow(0 0 5px #ffd24a) drop-shadow(0 0 8px #9b5aff); transform:scale(1); } 50% { filter: drop-shadow(0 0 14px #fff3b0) drop-shadow(0 0 20px #c77dff) brightness(1.3); transform:scale(1.06); } }
@keyframes ctmTotemOrbit { 0% { transform:rotate(0deg) translateX(9px) rotate(0deg); } 100% { transform:rotate(360deg) translateX(9px) rotate(-360deg); } }
.vfx-loot-totem {
  animation: ctmTotemBase 1.8s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-totem::before {
  content:""; position:absolute; width:3px; height:3px; border-radius:50%; top:50%; left:50%; margin:-1.5px;
  background:#ffd24a;
  box-shadow: 0 0 4px #ffd24a;
  animation: ctmTotemOrbit 2s linear infinite;
}
.vfx-loot-totem::after {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; top:50%; left:50%; margin:-1px;
  background:#c77dff;
  box-shadow: 0 0 4px #c77dff;
  animation: ctmTotemOrbit 2s linear 1s infinite;
}

/* --- sculk_sensor: cyan sonar ripple pulses --- */
@keyframes ctmSculkBase { 0%,100% { filter: drop-shadow(0 0 4px #39d0c8); } 50% { filter: drop-shadow(0 0 12px #7df0e8) drop-shadow(0 0 20px #39d0c8) brightness(1.2); } }
@keyframes ctmSculkRipple { 0% { transform:scale(.6); opacity:.9; border-color:rgba(57,208,200,.8); } 100% { transform:scale(2.4); opacity:0; border-color:rgba(57,208,200,0); } }
.vfx-loot-sculk {
  animation: ctmSculkBase 1.6s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-sculk::before {
  content:""; position:absolute; width:10px; height:10px; border-radius:50%; border:1.5px solid rgba(57,208,200,.7); top:50%; left:50%; margin:-5px;
  animation: ctmSculkRipple 1.6s ease-out infinite;
}
.vfx-loot-sculk::after {
  content:""; position:absolute; width:10px; height:10px; border-radius:50%; border:1.5px solid rgba(57,208,200,.5); top:50%; left:50%; margin:-5px;
  animation: ctmSculkRipple 1.6s ease-out .8s infinite;
}

/* --- ancient_debris: deep ember glow + drifting magma sparks --- */
@keyframes ctmDebrisBase { 0%,100% { filter: drop-shadow(0 0 5px #cc4a1a) brightness(1.05); } 50% { filter: drop-shadow(0 0 14px #ff8c3a) drop-shadow(0 0 22px #cc4a1a) brightness(1.25); } }
@keyframes ctmDebrisSpark { 0% { opacity:0; transform:translateY(2px) scale(.5); } 35% { opacity:1; } 100% { opacity:0; transform:translateY(-11px) scale(1.2); } }
.vfx-loot-debris {
  animation: ctmDebrisBase 2s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-debris::before {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; bottom:2px; left:30%;
  background:#ff8c3a;
  box-shadow: 6px -1px 0 #ffd24a, 10px 2px 0 #ff6a1a;
  animation: ctmDebrisSpark 1.5s ease-in infinite;
}
.vfx-loot-debris::after {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; bottom:2px; right:25%;
  background:#ff6a1a;
  box-shadow: -5px 1px 0 #ffb34a;
  animation: ctmDebrisSpark 1.5s ease-in .7s infinite;
}

/* --- enchanted_golden_apple: gold+purple halo ring + divine shimmer --- */
@keyframes ctmEGAppleBase { 0%,100% { filter: drop-shadow(0 0 6px #ffd24a) drop-shadow(0 0 10px #9b5aff); } 50% { filter: drop-shadow(0 0 16px #ffe87a) drop-shadow(0 0 24px #c77dff) brightness(1.35); } }
@keyframes ctmEGAppleHalo { 0% { transform:rotate(0deg); opacity:.6; } 100% { transform:rotate(360deg); opacity:.6; } }
.vfx-loot-egapple {
  animation: ctmEGAppleBase 2.2s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-egapple::before {
  content:""; position:absolute; width:16px; height:16px; border-radius:50%;
  border:1.5px solid rgba(255,210,74,.5);
  box-shadow: 0 0 6px rgba(255,210,74,.3), inset 0 0 4px rgba(199,125,255,.3);
  top:50%; left:50%; margin:-8px;
  animation: ctmEGAppleHalo 4s linear infinite;
}
.vfx-loot-egapple::after {
  content:""; position:absolute; width:3px; height:3px; border-radius:50%; top:50%; left:50%; margin:-1.5px;
  background:#ffd24a;
  box-shadow: 7px -5px 0 #c77dff, -7px 5px 0 #ffd24a, 5px 7px 0 #c77dff;
  animation: ctmOrbitCW 3s linear infinite; --r:8px;
}

/* --- diamond_sword: ice-blue keen edge gleam + slash trail --- */
@keyframes ctmDSwordBase { 0%,100% { filter: drop-shadow(0 0 4px #4dd2ff); } 50% { filter: drop-shadow(0 0 12px #b9f6ff) drop-shadow(0 0 20px #4dd2ff) brightness(1.2); } }
@keyframes ctmDSwordSlash { 0%,75%,100% { opacity:0; transform:rotate(-30deg) scaleX(0); } 80% { opacity:.9; transform:rotate(-30deg) scaleX(1); } 88% { opacity:0; transform:rotate(-30deg) scaleX(1.3); } }
.vfx-loot-dsword {
  animation: ctmDSwordBase 2.4s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-dsword::before {
  content:""; position:absolute; width:12px; height:1.5px; top:30%; left:10%;
  background:linear-gradient(to right, transparent, #b9f6ff, transparent);
  animation: ctmDSwordSlash 2.4s ease-in-out infinite;
}
.vfx-loot-dsword::after {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; top:20%; right:10%;
  background:#b9f6ff;
  box-shadow: -5px 3px 0 rgba(77,210,255,.8), 3px 5px 0 rgba(185,246,255,.7);
  animation: ctmNetherStarSpark 2s ease-in-out .4s infinite;
}

/* --- diamond_pickaxe: cyan mining spark burst + tool gleam --- */
@keyframes ctmDPickBase { 0%,100% { filter: drop-shadow(0 0 4px #39d0ff); } 50% { filter: drop-shadow(0 0 11px #7df0ff) drop-shadow(0 0 18px #39d0ff) brightness(1.2); } }
@keyframes ctmDPickSpark { 0%,80%,100% { opacity:0; transform:scale(0); } 85% { opacity:1; transform:scale(1); } 93% { opacity:.3; transform:scale(1.4); } }
.vfx-loot-dpick {
  animation: ctmDPickBase 2.6s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-dpick::before {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; top:25%; right:8%;
  background:#fff;
  box-shadow: 4px -3px 0 #7df0ff, -4px 2px 0 #39d0ff, 2px 5px 0 #fff;
  animation: ctmDPickSpark 2.6s ease-in-out infinite;
}
.vfx-loot-dpick::after {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; top:50%; left:20%;
  background:#39d0ff;
  box-shadow: 5px -4px 0 rgba(57,208,255,.7);
  animation: ctmDPickSpark 2.6s ease-in-out 1.3s infinite;
}

/* --- golden_axe: warm-gold chop flash + ember sparks --- */
@keyframes ctmGAxeBase { 0%,100% { filter: drop-shadow(0 0 4px #ffd24a); } 50% { filter: drop-shadow(0 0 12px #ffe87a) drop-shadow(0 0 20px #ffb52e) brightness(1.25); } }
@keyframes ctmGAxeChop { 0%,70%,100% { opacity:0; transform:rotate(15deg) scaleX(0); transform-origin:left center; } 75% { opacity:.9; transform:rotate(15deg) scaleX(1); } 83% { opacity:0; } }
.vfx-loot-gaxe {
  animation: ctmGAxeBase 2.2s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-gaxe::before {
  content:""; position:absolute; width:10px; height:1.5px; top:35%; left:15%;
  background:linear-gradient(to right, transparent, #ffd24a, transparent);
  animation: ctmGAxeChop 2.2s ease-in-out infinite;
}
.vfx-loot-gaxe::after {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; bottom:30%; right:15%;
  background:#ffb52e;
  box-shadow: -5px -3px 0 #ffd24a, 3px -5px 0 rgba(255,210,74,.7);
  animation: ctmDebrisSpark 1.8s ease-in .6s infinite;
}

/* --- enchanted_bow: violet enchantment sheen + arrow-speed streak --- */
@keyframes ctmEBowBase { 0%,100% { filter: drop-shadow(0 0 5px #b066ff); } 50% { filter: drop-shadow(0 0 14px #d0a3ff) drop-shadow(0 0 22px #7040cc) brightness(1.3); } }
@keyframes ctmEBowStreak { 0%,60%,100% { opacity:0; transform:translateX(0) scaleX(0); } 65% { opacity:.8; transform:translateX(4px) scaleX(1); } 75% { opacity:0; transform:translateX(10px) scaleX(.5); } }
.vfx-loot-ebow {
  animation: ctmEBowBase 2.4s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-ebow::before {
  content:""; position:absolute; width:10px; height:1.5px; top:40%; right:-4px;
  background:linear-gradient(to right, #b066ff, transparent);
  animation: ctmEBowStreak 2.4s ease-in-out infinite;
}
.vfx-loot-ebow::after {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; top:30%; left:30%;
  background:#d0a3ff;
  box-shadow: 5px -3px 0 rgba(176,102,255,.8), -4px 4px 0 rgba(208,163,255,.7), 3px 5px 0 rgba(176,102,255,.6);
  animation: ctmNetherStarSpark 2.2s ease-in-out .5s infinite;
}

/* --- steve_head: friendly warm glow + pixel sparkle blink --- */
@keyframes ctmSteveBase { 0%,100% { filter: drop-shadow(0 0 4px #8b6914); } 50% { filter: drop-shadow(0 0 10px #c8922a) brightness(1.15); } }
@keyframes ctmSteveBlink { 0%,90%,100% { opacity:0; } 93%,97% { opacity:1; } }
.vfx-loot-stevehead {
  animation: ctmSteveBase 3s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-stevehead::before {
  content:""; position:absolute; width:2px; height:2px; background:#fff3b0; top:10%; right:10%;
  animation: ctmSteveBlink 3s linear infinite;
}
.vfx-loot-stevehead::after {
  content:""; position:absolute; width:2px; height:2px; background:#c8922a; top:10%; left:10%;
  animation: ctmSteveBlink 3s linear 1.5s infinite;
}

/* --- alex_head: warm-copper glow + soft green leaf mote --- */
@keyframes ctmAlexBase { 0%,100% { filter: drop-shadow(0 0 4px #c87a3a); } 50% { filter: drop-shadow(0 0 10px #e8a060) brightness(1.15); } }
@keyframes ctmAlexLeaf { 0% { opacity:0; transform:translateY(0) rotate(0deg); } 40% { opacity:.9; } 100% { opacity:0; transform:translateY(-10px) rotate(40deg); } }
.vfx-loot-alexhead {
  animation: ctmAlexBase 3.2s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-alexhead::before {
  content:"🌿"; position:absolute; font-size:7px; top:-4px; right:-4px;
  animation: ctmAlexLeaf 3s ease-in-out infinite;
}
.vfx-loot-alexhead::after {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; background:#e8a060; top:15%; left:15%;
  animation: ctmSteveBlink 2.8s linear .9s infinite;
}


/* ===== LOOT (item) BADGES ===== */

/* ---- COMMON — very subtle, each unique ---- */

/* loot_mug: faint foam bubble drift */
@keyframes ctmMugBubble { 0% { opacity:0; transform:translateY(0) scale(.4); } 30% { opacity:.6; } 100% { opacity:0; transform:translateY(-9px) scale(.8); } }
.vfx-loot-mug {
  animation: none;
  display:inline-flex; position:relative; overflow:visible;
  filter: drop-shadow(0 0 2px rgba(200,170,120,.3));
}
.vfx-loot-mug::before {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; bottom:3px; left:35%;
  background:rgba(240,230,200,.7);
  box-shadow: 5px -1px 0 rgba(240,230,200,.5);
  animation: ctmMugBubble 2.6s ease-in infinite;
}
.vfx-loot-mug::after {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; bottom:3px; right:30%;
  background:rgba(240,230,200,.5);
  animation: ctmMugBubble 2.6s ease-in 1.3s infinite;
}

/* loot_token (copper): soft metallic glint sweep */
@keyframes ctmCopperGlint { 0%,100% { filter: drop-shadow(0 0 2px rgba(180,100,40,.3)); } 50% { filter: drop-shadow(0 0 6px rgba(200,120,50,.6)) brightness(1.1); } }
@keyframes ctmCopperSheen { 0%,100% { opacity:0; transform:translateX(-4px) scaleX(0); } 40%,60% { opacity:.7; transform:translateX(0) scaleX(1); } }
.vfx-loot-copper {
  animation: ctmCopperGlint 3.5s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-copper::before {
  content:""; position:absolute; width:7px; height:1px; top:35%; left:20%;
  background:linear-gradient(to right, transparent, rgba(220,150,70,.65), transparent);
  animation: ctmCopperSheen 3.5s ease-in-out infinite;
}

/* loot_loaf (bread): tiny warm crumb-steam wisp */
@keyframes ctmBreadSteam { 0% { opacity:0; transform:translateY(0) scaleX(1); } 40% { opacity:.5; } 100% { opacity:0; transform:translateY(-8px) scaleX(1.3); } }
.vfx-loot-bread {
  animation: none;
  display:inline-flex; position:relative; overflow:visible;
  filter: drop-shadow(0 0 2px rgba(200,140,60,.25));
}
.vfx-loot-bread::before {
  content:""; position:absolute; width:1.5px; height:5px; border-radius:2px; top:-4px; left:40%;
  background:linear-gradient(to top, rgba(220,180,100,.5), transparent);
  animation: ctmBreadSteam 2.8s ease-in infinite;
}
.vfx-loot-bread::after {
  content:""; position:absolute; width:1.5px; height:4px; border-radius:2px; top:-3px; right:35%;
  background:linear-gradient(to top, rgba(220,180,100,.4), transparent);
  animation: ctmBreadSteam 2.8s ease-in .9s infinite;
}

/* loot_pebble: barely-there gray shimmer */
@keyframes ctmPebbleShim { 0%,100% { filter: drop-shadow(0 0 1px rgba(150,150,150,.2)); } 50% { filter: drop-shadow(0 0 4px rgba(180,180,180,.45)); } }
.vfx-loot-pebble {
  animation: ctmPebbleShim 4s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}

/* loot_candle: single flame flicker + one ember drift */
@keyframes ctmCandleFlame { 0%,100% { filter: drop-shadow(0 0 3px #ffb347) brightness(1.05); } 50% { filter: drop-shadow(0 0 7px #ff8c2a) brightness(1.18); } }
@keyframes ctmCandleEmber { 0% { opacity:0; transform:translateY(0) translateX(0); } 40% { opacity:.8; } 100% { opacity:0; transform:translateY(-8px) translateX(2px); } }
.vfx-loot-candle {
  animation: ctmCandleFlame 1.3s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-candle::before {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; top:5%; left:45%;
  background:#ff9a3a;
  animation: ctmCandleEmber 2s ease-in infinite;
}

/* loot_acorn: faint green leaf-glint */
@keyframes ctmAcornGlint { 0%,100% { filter: drop-shadow(0 0 2px rgba(80,160,40,.25)); } 60% { filter: drop-shadow(0 0 5px rgba(100,200,50,.5)); } }
@keyframes ctmAcornLeafTwitch { 0%,100% { opacity:0; transform:rotate(-10deg) scaleX(0); transform-origin:left center; } 40%,65% { opacity:.6; transform:rotate(5deg) scaleX(1); } }
.vfx-loot-acorn {
  animation: ctmAcornGlint 3.8s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-acorn::before {
  content:""; position:absolute; width:5px; height:1px; top:25%; right:15%;
  background:linear-gradient(to right, transparent, rgba(100,200,50,.5), transparent);
  animation: ctmAcornLeafTwitch 3.8s ease-in-out .5s infinite;
}

/* ---- UNCOMMON — one clear effect, themed ---- */

/* loot_apple (Golden Apple): golden dust orbit + soft auric glow */
@keyframes ctmAppleGlow { 0%,100% { filter: drop-shadow(0 0 4px #ffd24a); } 50% { filter: drop-shadow(0 0 12px #ffe87a) drop-shadow(0 0 18px #ffb52e) brightness(1.2); } }
@keyframes ctmAppleDust { 0% { opacity:0; transform:translateY(0) scale(.5) rotate(0deg); } 35% { opacity:1; } 100% { opacity:0; transform:translateY(-10px) scale(1.1) rotate(180deg); } }
.vfx-loot-apple {
  animation: ctmAppleGlow 2.4s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-apple::before {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; bottom:5px; left:20%;
  background:#ffd24a;
  box-shadow: 8px -2px 0 rgba(255,210,74,.8), 12px 3px 0 rgba(255,232,120,.6), 4px 6px 0 rgba(255,181,46,.7);
  animation: ctmAppleDust 2.2s ease-in-out infinite;
}
.vfx-loot-apple::after {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; bottom:5px; right:15%;
  background:#ffe87a;
  box-shadow: -6px -2px 0 rgba(255,232,120,.7);
  animation: ctmAppleDust 2.2s ease-in-out 1.1s infinite;
}

/* loot_emerald_chip: green crystalline glints orbiting */
@keyframes ctmEmeraldGlow { 0%,100% { filter: drop-shadow(0 0 4px #3ecb5a); } 50% { filter: drop-shadow(0 0 12px #6fffa8) drop-shadow(0 0 18px #3ecb5a) brightness(1.2); } }
@keyframes ctmEmeraldGlint { 0%,100% { opacity:0; transform:scale(.3) rotate(0deg); } 40%,60% { opacity:1; transform:scale(1) rotate(90deg); } }
.vfx-loot-emerald {
  animation: ctmEmeraldGlow 2.6s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-emerald::before {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; top:50%; left:50%; margin:-1px;
  background:#6fffa8;
  box-shadow: 0 0 4px #3ecb5a;
  animation: ctmOrbitCW 3s linear infinite; --r:8px;
}
.vfx-loot-emerald::after {
  content:""; position:absolute; width:3px; height:3px; top:20%; right:10%;
  background:#3ecb5a;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  animation: ctmEmeraldGlint 2s ease-in-out .5s infinite;
}

/* loot_lantern: warm orange ember drift + flame flicker glow */
@keyframes ctmLanternGlow { 0%,100% { filter: drop-shadow(0 0 5px #ffb347) brightness(1.05); } 45% { filter: drop-shadow(0 0 10px #ff8c2a) brightness(1.22); } 55% { filter: drop-shadow(0 0 4px #ff7a1a) brightness(.97); } }
@keyframes ctmLanternEmber { 0% { opacity:0; transform:translateY(2px) scale(.6); } 35% { opacity:1; } 100% { opacity:0; transform:translateY(-12px) scale(1.1) rotate(15deg); } }
.vfx-loot-lantern {
  animation: ctmLanternGlow 1.4s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-lantern::before {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; bottom:0; left:30%;
  background:#ff9a3a;
  box-shadow: 7px -2px 0 rgba(255,180,60,.8), 12px 2px 0 rgba(255,154,58,.6);
  animation: ctmLanternEmber 1.8s ease-in infinite;
}
.vfx-loot-lantern::after {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; bottom:0; right:25%;
  background:#ffb347;
  box-shadow: -5px -1px 0 rgba(255,154,58,.7);
  animation: ctmLanternEmber 1.8s ease-in .7s infinite;
}

/* loot_compass (Wayfinder): cyan directional sweep + N-pointer orbit */
@keyframes ctmCompassGlow { 0%,100% { filter: drop-shadow(0 0 4px #39d0ff); } 50% { filter: drop-shadow(0 0 11px #7df0ff) drop-shadow(0 0 18px #0088cc) brightness(1.2); } }
@keyframes ctmCompassSweep { 0% { transform:rotate(0deg); opacity:.7; } 100% { transform:rotate(360deg); opacity:.7; } }
.vfx-loot-compass {
  animation: ctmCompassGlow 2.2s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-compass::before {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; top:50%; left:50%; margin:-1px;
  background:#ff4040;
  box-shadow: 0 0 4px #ff6060;
  animation: ctmOrbitCW 2.5s linear infinite; --r:7px;
}
.vfx-loot-compass::after {
  content:""; position:absolute; width:10px; height:1px; top:50%; left:50%; margin-top:-.5px; margin-left:-5px;
  background:linear-gradient(to right, rgba(57,208,255,.3), rgba(57,208,255,.7), rgba(57,208,255,.3));
  animation: ctmCompassSweep 2s linear infinite;
  transform-origin:50% 50%;
}

/* ---- RARE — two layers, themed ---- */

/* loot_clover (Lucky Clover): green orbiting sparkles + lucky-drift */
@keyframes ctmCloverGlow { 0%,100% { filter: drop-shadow(0 0 5px #3ecb5a); transform:translateY(0); } 50% { filter: drop-shadow(0 0 12px #6fffa8) drop-shadow(0 0 18px #2a9a3a); transform:translateY(-2px); } }
@keyframes ctmCloverSpark { 0% { opacity:0; transform:translateY(0) scale(.4); } 30% { opacity:1; } 100% { opacity:0; transform:translateY(-8px) scale(.9) rotate(120deg); } }
.vfx-loot-clover {
  animation: ctmCloverGlow 2.2s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-clover::before {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; top:50%; left:50%; margin:-1px;
  background:#6fffa8;
  box-shadow: 0 0 5px #3ecb5a;
  animation: ctmOrbitCW 2.4s linear infinite; --r:9px;
}
.vfx-loot-clover::after {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; bottom:2px; left:25%;
  background:#3ecb5a;
  box-shadow: 7px -1px 0 rgba(111,255,168,.7), 12px 2px 0 rgba(62,203,90,.6);
  animation: ctmCloverSpark 2s ease-in .4s infinite;
}

/* loot_coin (Golden Coin): gold coin spin shimmer + orbiting flecks */
@keyframes ctmCoinGlow { 0%,100% { filter: drop-shadow(0 0 5px #ffd24a); transform:scale(1); } 50% { filter: drop-shadow(0 0 14px #ffe87a) drop-shadow(0 0 22px #ffb52e) brightness(1.3); transform:scale(1.05); } }
@keyframes ctmCoinFleck { 0% { opacity:0; transform:translateY(0) scale(.4) rotate(0deg); } 35% { opacity:1; } 100% { opacity:0; transform:translateY(-9px) scale(1) rotate(180deg); } }
.vfx-loot-coin {
  animation: ctmCoinGlow 2s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-coin::before {
  content:""; position:absolute; width:3px; height:3px; border-radius:50%; top:50%; left:50%; margin:-1.5px;
  background:#ffd24a;
  box-shadow: 0 0 5px #ffe87a;
  animation: ctmOrbitCW 2.2s linear infinite; --r:9px;
}
.vfx-loot-coin::after {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; bottom:3px; left:20%;
  background:#fff3b0;
  box-shadow: 8px -1px 0 #ffd24a, 14px 2px 0 rgba(255,210,74,.6);
  animation: ctmCoinFleck 1.9s ease-in .3s infinite;
}

/* loot_die (Lucky Die): pink bounce + dice-pip sparkle burst */
@keyframes ctmDieBounce { 0%,100% { transform:translateY(0) rotate(0deg); filter: drop-shadow(0 0 4px #ff7de0); } 40% { transform:translateY(-3px) rotate(-8deg); filter: drop-shadow(0 0 10px #ffb3f0); } 60% { transform:translateY(-1px) rotate(4deg); } }
@keyframes ctmDiePip { 0%,100% { opacity:0; transform:scale(0); } 40%,60% { opacity:1; transform:scale(1); } }
.vfx-loot-die {
  animation: ctmDieBounce 1.3s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-die::before {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; top:20%; right:15%;
  background:#ffb3f0;
  box-shadow: -5px 3px 0 #ff7de0, 2px 5px 0 #ffc0e8, -8px -2px 0 rgba(255,179,240,.7);
  animation: ctmDiePip 1.3s ease-in-out infinite;
}
.vfx-loot-die::after {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; bottom:15%; left:10%;
  background:#ff7de0;
  box-shadow: 5px -2px 0 rgba(255,125,224,.8);
  animation: ctmDiePip 1.3s ease-in-out .65s infinite;
}

/* loot_horseshoe (Lucky Horseshoe): gold luck-arc ring + sparkle drift */
@keyframes ctmHorseshoeGlow { 0%,100% { filter: drop-shadow(0 0 5px #ffd24a); transform:translateY(0); } 50% { filter: drop-shadow(0 0 13px #ffe87a) drop-shadow(0 0 20px rgba(255,210,74,.5)); transform:translateY(-2px); } }
@keyframes ctmHorseshoeSpark { 0% { opacity:0; transform:scale(.3) rotate(0deg); } 40%,55% { opacity:1; transform:scale(1) rotate(120deg); } 100% { opacity:0; transform:scale(1.2) rotate(240deg); } }
.vfx-loot-horseshoe {
  animation: ctmHorseshoeGlow 2.4s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-horseshoe::before {
  content:""; position:absolute; width:14px; height:14px; border-radius:50%;
  border:1.5px solid rgba(255,210,74,.4);
  top:50%; left:50%; margin:-7px;
  animation: ctmCompassSweep 3.5s linear infinite;
}
.vfx-loot-horseshoe::after {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; top:20%; right:20%;
  background:#ffd24a;
  box-shadow: -5px 4px 0 rgba(255,232,120,.8), 3px 6px 0 rgba(255,181,46,.7);
  animation: ctmHorseshoeSpark 2s ease-in-out .5s infinite;
}

/* loot_mushroom (Charm Mushroom): pink spore drift float */
@keyframes ctmMushroomGlow { 0%,100% { filter: drop-shadow(0 0 5px #ff7de0); transform:translateY(0); } 50% { filter: drop-shadow(0 0 12px #ffb3f0) drop-shadow(0 0 20px rgba(255,125,224,.4)); transform:translateY(-2px); } }
@keyframes ctmMushroomSpore { 0% { opacity:0; transform:translateY(2px) scale(.4); } 30% { opacity:.8; } 100% { opacity:0; transform:translateY(-10px) scale(.7) translateX(3px); } }
.vfx-loot-mushroom {
  animation: ctmMushroomGlow 2.3s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-mushroom::before {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; bottom:2px; left:25%;
  background:#ff7de0;
  box-shadow: 7px -1px 0 rgba(255,179,240,.8), 12px 2px 0 rgba(255,125,224,.6), 4px 4px 0 rgba(255,192,216,.7);
  animation: ctmMushroomSpore 2.4s ease-in infinite;
}
.vfx-loot-mushroom::after {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; bottom:2px; right:20%;
  background:rgba(255,125,224,.7);
  box-shadow: -4px -1px 0 rgba(255,179,240,.6);
  animation: ctmMushroomSpore 2.4s ease-in 1.2s infinite;
}

/* ---- EPIC — rich aura ring + multi-particle field ---- */

/* loot_gem (Mystery Gem): prismatic rainbow facet sweep + spectrum sparkles */
@keyframes ctmGemBase { 0% { filter: drop-shadow(0 0 6px #ff7de0) hue-rotate(0deg); transform:translateY(0); } 50% { filter: drop-shadow(0 0 16px #7df0ff) hue-rotate(180deg) brightness(1.3); transform:translateY(-2px) scale(1.04); } 100% { filter: drop-shadow(0 0 6px #ff7de0) hue-rotate(360deg); transform:translateY(0); } }
@keyframes ctmGemSparkle { 0%,100% { opacity:0; transform:scale(.3) rotate(0deg); } 45%,55% { opacity:1; transform:scale(1.1) rotate(180deg); } }
.vfx-loot-gem {
  animation: ctmGemBase 3s linear infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-gem::before {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; top:50%; left:50%; margin:-1px;
  background:#7df0ff;
  box-shadow: 9px -6px 0 #ff7de0, -9px 6px 0 #ffd24a, 6px 9px 0 #9b5aff, -6px -9px 0 #39d0ff;
  animation: ctmGemSparkle 1.8s ease-in-out infinite;
}
@keyframes ctmGemRingBreath { 0%,100% { transform:scale(1) rotate(0deg); opacity:.35; } 50% { transform:scale(1.18) rotate(180deg); opacity:.12; } }
.vfx-loot-gem::after {
  content:""; position:absolute; width:14px; height:14px; border-radius:50%;
  border:1.5px solid rgba(125,240,255,.25);
  top:50%; left:50%; margin:-7px;
  animation: ctmGemRingBreath 4s ease-in-out infinite;
}

/* loot_skull (Cursed Skull): toxic green wisps rising + ghostly rattle shake */
@keyframes ctmSkullBase { 0%,100% { filter: drop-shadow(0 0 5px #39ff6a) brightness(.95); transform:translateX(0); } 25% { transform:translateX(-1px) rotate(-2deg); } 45% { filter: drop-shadow(0 0 14px #9bff52) drop-shadow(0 0 22px rgba(57,255,106,.3)) brightness(1.2); } 75% { transform:translateX(1px) rotate(2deg); } }
@keyframes ctmSkullWisp { 0% { opacity:0; transform:translateY(2px) scale(.5); } 35% { opacity:.9; } 100% { opacity:0; transform:translateY(-14px) scale(1.1) rotate(10deg); } }
.vfx-loot-skull {
  animation: ctmSkullBase 0.9s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-skull::before {
  content:""; position:absolute; width:2px; height:3px; border-radius:2px; bottom:0; left:20%;
  background:linear-gradient(to top, transparent, #39ff6a);
  box-shadow: 9px -1px 0 rgba(57,255,106,.7), 16px 2px 0 rgba(155,255,82,.6);
  animation: ctmSkullWisp 1.4s ease-in infinite;
}
.vfx-loot-skull::after {
  content:""; position:absolute; width:2px; height:3px; border-radius:2px; bottom:0; right:15%;
  background:linear-gradient(to top, transparent, #9bff52);
  animation: ctmSkullWisp 1.4s ease-in .5s infinite;
}

/* loot_orb (Arcane Orb): blue arcane runes orbiting + inner pulse */
@keyframes ctmOrbBase { 0%,100% { filter: drop-shadow(0 0 6px #4a8aff) drop-shadow(0 0 12px #1a44cc); transform:scale(1); } 50% { filter: drop-shadow(0 0 16px #7db8ff) drop-shadow(0 0 26px #3a6aee) brightness(1.3); transform:scale(1.05); } }
@keyframes ctmOrbRune { 0% { transform:rotate(0deg) translateX(10px) rotate(0deg); opacity:.9; } 100% { transform:rotate(360deg) translateX(10px) rotate(-360deg); opacity:.9; } }
.vfx-loot-orb {
  animation: ctmOrbBase 2.2s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-orb::before {
  content:"ᚱ"; position:absolute; font-size:7px; color:#7db8ff; top:50%; left:50%; margin:-4px 0 0 -3px;
  animation: ctmOrbRune 3s linear infinite;
}
.vfx-loot-orb::after {
  content:"ᚨ"; position:absolute; font-size:6px; color:#4a8aff; top:50%; left:50%; margin:-4px 0 0 -3px;
  animation: ctmOrbRune 3s linear 1.5s infinite;
}

/* loot_amulet (Eye Amulet): purple watchful eye pulse + orbiting purple motes */
@keyframes ctmAmuletBase { 0%,100% { filter: drop-shadow(0 0 6px #9b5aff); transform:translateY(0); } 50% { filter: drop-shadow(0 0 16px #c77dff) drop-shadow(0 0 26px #7040cc) brightness(1.25); transform:translateY(-1px); } }
@keyframes ctmAmuletEyePulse { 0%,100% { transform:scaleY(1); } 45%,55% { transform:scaleY(.15); } }
.vfx-loot-amulet {
  animation: ctmAmuletBase 2.6s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-amulet::before {
  content:""; position:absolute; width:3px; height:3px; border-radius:50%; top:50%; left:50%; margin:-1.5px;
  background:#c77dff;
  box-shadow: 0 0 5px #9b5aff;
  animation: ctmOrbitCW 2.8s linear infinite; --r:10px;
}
.vfx-loot-amulet::after {
  content:""; position:absolute; width:3px; height:3px; border-radius:50%; top:50%; left:50%; margin:-1.5px;
  background:#7040cc;
  box-shadow: 0 0 4px #c77dff;
  animation: ctmOrbitCCW 3.4s linear infinite; --r:8px;
}

/* ---- LEGENDARY — orbiting + drifting + shimmer ---- */

/* loot_chest (Treasure Chest): gold coins orbiting + treasure shimmer burst */
@keyframes ctmChestBase { 0%,100% { filter: drop-shadow(0 0 6px #ffd24a) drop-shadow(0 0 12px #ffb52e); transform:scale(1); } 50% { filter: drop-shadow(0 0 18px #ffe87a) drop-shadow(0 0 30px #ff9a3a) brightness(1.3); transform:scale(1.05); } }
@keyframes ctmChestCoin { 0% { opacity:0; transform:translateY(0) scale(.4) rotate(0deg); } 25% { opacity:1; } 60% { opacity:.8; } 100% { opacity:0; transform:translateY(-14px) scale(.8) rotate(360deg); } }
.vfx-loot-chest {
  animation: ctmChestBase 2s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-chest::before {
  content:"🪙"; position:absolute; font-size:7px; top:50%; left:50%; margin:-4px 0 0 -4px;
  animation: ctmOrbitCW 2.4s linear infinite; --r:11px;
}
.vfx-loot-chest::after {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; bottom:0; left:15%;
  background:#ffd24a;
  box-shadow: 8px -2px 0 #fff3b0, 14px 1px 0 #ffb52e, 5px 4px 0 #ffe87a, 18px -1px 0 rgba(255,210,74,.6);
  animation: ctmChestCoin 2s ease-in .4s infinite;
}

/* loot_crown (Loot Crown): rainbow aura ring + floating gem sparkles */
@keyframes ctmCrownBase { 0% { filter: drop-shadow(0 0 7px #ffd24a) hue-rotate(0deg); } 50% { filter: drop-shadow(0 0 18px #ff7de0) hue-rotate(180deg) brightness(1.3); } 100% { filter: drop-shadow(0 0 7px #ffd24a) hue-rotate(360deg); } }
@keyframes ctmCrownGem { 0%,100% { opacity:0; transform:scale(.3) rotate(0deg); } 40%,60% { opacity:1; transform:scale(1.1) rotate(180deg); } }
.vfx-loot-crown {
  animation: ctmCrownBase 4s linear infinite;
  display:inline-flex; position:relative; overflow:visible;
}
@keyframes ctmCrownHaloOrbit { 0% { transform:rotate(0deg) scaleX(1.08) scaleY(.92); opacity:.45; } 50% { opacity:.2; } 100% { transform:rotate(360deg) scaleX(1.08) scaleY(.92); opacity:.45; } }
.vfx-loot-crown::before {
  content:""; position:absolute; width:18px; height:18px; border-radius:50%;
  border:1.5px solid rgba(255,210,74,.35);
  box-shadow: 0 0 8px rgba(199,125,255,.2);
  top:50%; left:50%; margin:-9px;
  animation: ctmCrownHaloOrbit 3s linear infinite;
}
.vfx-loot-crown::after {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; top:10%; left:40%;
  background:#ffd24a;
  box-shadow: 4px -2px 0 #9b5aff, -3px 3px 0 #7df0ff, 7px 4px 0 #ff7de0, -6px -3px 0 #ffd24a;
  animation: ctmCrownGem 2.2s ease-in-out infinite;
}

/* loot_shifter (Shapeshifter): morph hue-shift + shape-shifting particle field */
@keyframes ctmShifterBase { 0% { filter: drop-shadow(0 0 6px #ff7de0) hue-rotate(0deg); transform:scale(1) rotate(0deg); } 33% { filter: drop-shadow(0 0 14px #7df0ff) hue-rotate(120deg) brightness(1.2); transform:scale(1.04) rotate(2deg); } 66% { filter: drop-shadow(0 0 14px #ffd24a) hue-rotate(240deg) brightness(1.25); transform:scale(.97) rotate(-2deg); } 100% { filter: drop-shadow(0 0 6px #ff7de0) hue-rotate(360deg); transform:scale(1) rotate(0deg); } }
@keyframes ctmShifterMote { 0% { opacity:0; transform:translateY(2px) scale(.4); } 35% { opacity:1; } 100% { opacity:0; transform:translateY(-12px) scale(.9) rotate(90deg); } }
.vfx-loot-shifter {
  animation: ctmShifterBase 3s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-shifter::before {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; bottom:2px; left:15%;
  background:#ff7de0;
  box-shadow: 8px -2px 0 #7df0ff, 14px 1px 0 #ffd24a, 5px 5px 0 #9b5aff;
  animation: ctmShifterMote 2s ease-in infinite;
}
.vfx-loot-shifter::after {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; top:2px; right:15%;
  background:#7df0ff;
  box-shadow: -6px 3px 0 #ff7de0, 3px 6px 0 #ffd24a;
  animation: ctmShifterMote 2s ease-in .7s infinite;
}

/* loot_phoenix (Phoenix Egg): fiery embers rising + warm rebirth pulse */
@keyframes ctmPhoenixEggBase { 0%,100% { filter: drop-shadow(0 0 6px #ff5c1a) brightness(1.1) hue-rotate(0deg); transform:scale(1); } 50% { filter: drop-shadow(0 0 18px #ffd64a) brightness(1.35) hue-rotate(-12deg); transform:scale(1.06); } }
@keyframes ctmPhoenixEggEmber { 0% { opacity:0; transform:translateY(3px) scale(.5); } 35% { opacity:1; } 100% { opacity:0; transform:translateY(-16px) scale(1.2) rotate(20deg); } }
.vfx-loot-phoenix {
  animation: ctmPhoenixEggBase 2.2s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-loot-phoenix::before {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; bottom:0; left:15%;
  background:#ff8c3a;
  box-shadow: 8px -2px 0 #ffd64a, 14px 1px 0 #ff5c1a, 5px 5px 0 #ffb52e, 18px -3px 0 rgba(255,100,26,.7);
  animation: ctmPhoenixEggEmber 1.6s ease-in infinite;
}
.vfx-loot-phoenix::after {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; bottom:0; right:10%;
  background:#ffb52e;
  box-shadow: -6px -1px 0 rgba(255,100,26,.8), -10px 2px 0 rgba(255,213,74,.7);
  animation: ctmPhoenixEggEmber 1.6s ease-in .6s infinite;
}

/* loot_prism (Living Prism): 3D spin + rainbow refraction beams */
@keyframes ctmPrismBase { 0% { filter: drop-shadow(0 0 6px #7df0ff) hue-rotate(0deg); transform:rotateY(0deg) scale(1); } 50% { filter: drop-shadow(0 0 18px #ff7de0) hue-rotate(180deg) brightness(1.3); transform:rotateY(180deg) scale(1.06); } 100% { filter: drop-shadow(0 0 6px #7df0ff) hue-rotate(360deg); transform:rotateY(360deg) scale(1); } }
@keyframes ctmPrismBeam { 0%,100% { opacity:0; transform:rotate(var(--angle,0deg)) scaleX(0); transform-origin:left center; } 40%,60% { opacity:.6; transform:rotate(var(--angle,0deg)) scaleX(1); } }
.vfx-loot-prism {
  animation: ctmPrismBase 3s linear infinite;
  display:inline-flex; position:relative; overflow:visible;
  transform-style:preserve-3d;
}
.vfx-loot-prism::before {
  content:""; position:absolute; width:12px; height:1px; top:50%; left:50%; margin-top:-.5px;
  background:linear-gradient(to right, transparent, #7df0ff, transparent);
  --angle:30deg;
  animation: ctmPrismBeam 2s ease-in-out infinite;
}
.vfx-loot-prism::after {
  content:""; position:absolute; width:12px; height:1px; top:50%; left:50%; margin-top:-.5px;
  background:linear-gradient(to right, transparent, #ff7de0, transparent);
  --angle:-45deg;
  animation: ctmPrismBeam 2s ease-in-out .6s infinite;
}

/* ===== MYTHIC BADGE SHOWPIECES — max elaboration, every badge signature-unique ===== */

/* ─── GALAXY CORE ─── signature: deep cosmic rotation + nebula drift pulse + multi-plane orbiting stardust */
@keyframes ctmBadgeGalaxyRotate {
  0%   { filter: drop-shadow(0 0 5px #9b5aff) drop-shadow(0 0 12px #4a1a8a) brightness(1.08); transform: rotate(0deg) scale(1); }
  25%  { filter: drop-shadow(0 0 9px #7df0ff) drop-shadow(0 0 18px #1a6080) brightness(1.15); transform: rotate(90deg) scale(1.05); }
  50%  { filter: drop-shadow(0 0 14px #ff7de0) drop-shadow(0 0 24px #8a0060) brightness(1.22); transform: rotate(180deg) scale(1.09); }
  75%  { filter: drop-shadow(0 0 9px #c77dff) drop-shadow(0 0 16px #4a1a8a) brightness(1.15); transform: rotate(270deg) scale(1.05); }
  100% { filter: drop-shadow(0 0 5px #9b5aff) drop-shadow(0 0 12px #4a1a8a) brightness(1.08); transform: rotate(360deg) scale(1); }
}
@keyframes ctmBadgeGalaxyOrbitA { 0% { transform:rotate(0deg) translateX(13px) rotate(0deg); opacity:.9; } 100% { transform:rotate(360deg) translateX(13px) rotate(-360deg); opacity:.9; } }
@keyframes ctmBadgeGalaxyOrbitB { 0% { transform:rotate(90deg) translateX(9px) rotate(0deg); opacity:.7; } 100% { transform:rotate(450deg) translateX(9px) rotate(-360deg); opacity:.7; } }
@keyframes ctmBadgeGalaxyNebula { 0%,100% { transform:scale(1) rotate(0deg); opacity:.45; border-color:rgba(155,90,255,.5); } 50% { transform:scale(1.4) rotate(180deg); opacity:.15; border-color:rgba(125,240,255,.3); } }
.vfx-mythic-galaxy {
  animation: ctmBadgeGalaxyRotate 6s linear infinite;
  display:inline-flex; position:relative; overflow:visible;
  border-radius:50%; transform-style:preserve-3d;
}
.vfx-mythic-galaxy::before {
  content:"✦"; position:absolute; font-size:8px; color:#fff; top:50%; left:50%; margin:-4px 0 0 -4px;
  text-shadow:0 0 5px #7df0ff, 0 0 10px #9b5aff;
  animation: ctmBadgeGalaxyOrbitA 2.8s linear infinite;
}
.vfx-mythic-galaxy::after {
  content:""; position:absolute; width:18px; height:18px; border-radius:50%;
  border:1.5px solid rgba(155,90,255,.5);
  top:50%; left:50%; margin:-9px;
  animation: ctmBadgeGalaxyNebula 4s ease-in-out infinite;
}

/* ─── DRAGON'S EYE ─── signature: slow predatory iris-dilation + heat shimmer + cascading fire arcs */
@keyframes ctmBadgeDragonIris {
  0%,100% { filter: drop-shadow(0 0 5px #ff8c2a) drop-shadow(0 0 10px #7a2a00) brightness(1.05); transform: scale(1); }
  18%    { filter: drop-shadow(0 0 9px #ffd64a) drop-shadow(0 0 18px #cc4400) brightness(1.2); transform: scale(1.04) scaleY(.96); }
  36%    { filter: drop-shadow(0 0 6px #ff8c2a) brightness(1.08); transform: scale(1) scaleY(1); }
  52%    { filter: drop-shadow(0 0 22px #ff4400) drop-shadow(0 0 36px #660000) brightness(1.45); transform: scale(1.1) scaleX(.92); }
  68%    { filter: drop-shadow(0 0 10px #ffa020) brightness(1.18); transform: scale(1.04); }
}
@keyframes ctmBadgeDragonArcFire {
  0%,100% { opacity:0; transform:rotate(0deg) translateX(12px) rotate(0deg) scaleX(0); }
  40%,60% { opacity:1; transform:rotate(360deg) translateX(12px) rotate(-360deg) scaleX(1); }
}
@keyframes ctmBadgeDragonEmberRise {
  0%   { opacity:0; transform:translateY(4px) translateX(0) scale(.5); }
  30%  { opacity:1; }
  100% { opacity:0; transform:translateY(-16px) translateX(3px) scale(1.3) rotate(30deg); }
}
.vfx-mythic-dragon {
  animation: ctmBadgeDragonIris 3.2s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-mythic-dragon::before {
  content:""; position:absolute; width:3px; height:3px; border-radius:50%; top:50%; left:50%; margin:-1.5px;
  background:#ff8c2a;
  box-shadow: 11px -6px 0 1px #ffd64a, -11px 6px 0 1px #ff5c1a, 6px 11px 0 1px #ffb52e, -6px -11px 0 1px #ff6a1a;
  animation: ctmBadgeDragonArcFire 3.2s ease-in-out infinite;
}
.vfx-mythic-dragon::after {
  content:""; position:absolute; width:2px; height:3px; border-radius:2px; bottom:-1px; left:18%;
  background:linear-gradient(to top, transparent, #ff8c2a);
  box-shadow: 10px -1px 0 1px rgba(255,120,30,.9), 18px 2px 0 rgba(255,200,60,.7), 5px 4px 0 rgba(255,90,20,.8), 25px -1px 0 rgba(255,150,40,.5);
  animation: ctmBadgeDragonEmberRise 1.2s ease-in infinite;
}

/* ─── VOID HEART ─── signature: gravitational inward-collapse + void motes spiral inward + eerie pulsing rim */
@keyframes ctmBadgeVoidCollapse {
  0%   { filter: drop-shadow(0 0 4px #9b5aff) brightness(.92); transform: scale(1); }
  20%  { filter: drop-shadow(0 0 8px #7a3aff) brightness(.88); transform: scale(.97); }
  40%  { filter: drop-shadow(0 0 22px #c77dff) drop-shadow(0 0 36px #5a00aa) brightness(1.25); transform: scale(1.12); }
  55%  { filter: drop-shadow(0 0 30px #ffffff) drop-shadow(0 0 48px #9b3aff) brightness(1.55); transform: scale(1.18); }
  70%  { filter: drop-shadow(0 0 10px #9b5aff) brightness(.95); transform: scale(.94); }
  100% { filter: drop-shadow(0 0 4px #9b5aff) brightness(.92); transform: scale(1); }
}
@keyframes ctmBadgeVoidSpiralIn {
  0%   { transform:rotate(0deg) translateX(14px) rotate(0deg) scale(1); opacity:.8; }
  80%  { transform:rotate(640deg) translateX(2px) rotate(-640deg) scale(.15); opacity:.3; }
  81%  { transform:rotate(641deg) translateX(14px) rotate(-641deg) scale(1); opacity:0; }
  100% { transform:rotate(720deg) translateX(14px) rotate(-720deg) scale(1); opacity:.8; }
}
@keyframes ctmBadgeVoidSpiralIn2 {
  0%   { transform:rotate(180deg) translateX(10px) rotate(0deg) scale(1); opacity:.6; }
  80%  { transform:rotate(820deg) translateX(1px) rotate(-640deg) scale(.1); opacity:.2; }
  81%  { transform:rotate(821deg) translateX(10px) rotate(-641deg) scale(1); opacity:0; }
  100% { transform:rotate(900deg) translateX(10px) rotate(-720deg) scale(1); opacity:.6; }
}
@keyframes ctmBadgeVoidRimPulse {
  0%,100% { transform:scale(1); opacity:.5; border-color:rgba(155,90,255,.5); }
  50%      { transform:scale(1.35); opacity:.15; border-color:rgba(200,100,255,.2); }
}
.vfx-mythic-void {
  animation: ctmBadgeVoidCollapse 4s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-mythic-void::before {
  content:""; position:absolute; width:3px; height:3px; border-radius:50%; top:50%; left:50%; margin:-1.5px;
  background:radial-gradient(circle, #e0aaff 0%, #7a20cc 60%, transparent 80%);
  animation: ctmBadgeVoidSpiralIn 2.5s ease-in infinite;
}
.vfx-mythic-void::after {
  content:""; position:absolute; width:20px; height:20px; border-radius:50%;
  border:1.5px solid rgba(155,90,255,.5);
  top:50%; left:50%; margin:-10px;
  animation: ctmBadgeVoidRimPulse 4s ease-in-out infinite;
}

/* ─── PHOENIX LORD ─── signature: rebirth ascent — badge rises+flares then crashes down in ember explosion */
@keyframes ctmBadgePhoenixRebirth {
  0%   { filter: drop-shadow(0 0 5px #ff5c1a) brightness(1.08); transform: translateY(0) scale(1); }
  15%  { filter: drop-shadow(0 0 8px #ffd64a) brightness(1.18); transform: translateY(-3px) scale(1.03); }
  30%  { filter: drop-shadow(0 0 5px #ff8c2a) brightness(1.08); transform: translateY(0) scale(1); }
  45%  { filter: drop-shadow(0 0 20px #ffffff) drop-shadow(0 0 36px #ff8c2a) brightness(1.6); transform: translateY(-5px) scale(1.16); }
  55%  { filter: drop-shadow(0 0 28px #ffd64a) drop-shadow(0 0 48px #ff4400) brightness(1.7); transform: translateY(-6px) scale(1.2) rotate(-3deg); }
  65%  { filter: drop-shadow(0 0 10px #ff8c2a) brightness(1.12); transform: translateY(1px) scale(.97) rotate(2deg); }
  80%  { filter: drop-shadow(0 0 5px #ff5c1a) brightness(1.05); transform: translateY(0) scale(1) rotate(0deg); }
  100% { filter: drop-shadow(0 0 5px #ff5c1a) brightness(1.08); transform: translateY(0) scale(1); }
}
@keyframes ctmBadgePhoenixEmbers {
  0%   { opacity:0; transform:translateY(6px) translateX(0) scale(.4) rotate(0deg); }
  20%  { opacity:1; }
  100% { opacity:0; transform:translateY(-22px) translateX(5px) scale(1.4) rotate(40deg); }
}
@keyframes ctmBadgePhoenixEmbers2 {
  0%   { opacity:0; transform:translateY(4px) translateX(0) scale(.3) rotate(0deg); }
  25%  { opacity:.9; }
  100% { opacity:0; transform:translateY(-18px) translateX(-6px) scale(1.2) rotate(-30deg); }
}
@keyframes ctmBadgePhoenixHalo {
  0%   { transform:scale(.6) rotate(0deg); opacity:.9; border-color:rgba(255,180,50,.9); }
  100% { transform:scale(2.2) rotate(180deg); opacity:0; border-color:rgba(255,100,20,0); }
}
.vfx-mythic-phoenix {
  animation: ctmBadgePhoenixRebirth 3.4s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-mythic-phoenix::before {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; bottom:-1px; left:12%;
  background:#ff9a3a;
  box-shadow: 10px -2px 0 #ffd64a, 18px 2px 0 #ff5c1a, 6px 5px 0 #ffb52e, 24px -2px 0 rgba(255,120,30,.7), 14px 5px 0 rgba(255,210,60,.6), 28px 0px 0 rgba(255,80,20,.4), 3px -4px 0 #fff7d6;
  animation: ctmBadgePhoenixEmbers 1.3s ease-in infinite;
}
.vfx-mythic-phoenix::after {
  content:""; position:absolute; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,180,50,.9);
  top:50%; left:50%; margin:-8px;
  animation: ctmBadgePhoenixHalo 1.8s ease-out infinite;
}

/* ─── JACKPOT ROYAL ─── signature: coin shower explosion + shockwave ring */
@keyframes ctmJackpotRoyal { 0%,100% { filter: drop-shadow(0 0 6px #ffd24a) brightness(1.1); transform: translateY(0) scale(1); } 50% { filter: drop-shadow(0 0 18px #ffe87a) drop-shadow(0 0 28px #ffb52e) brightness(1.35); transform: translateY(-2px) scale(1.07); } }
@keyframes ctmBadgeJackpotCoinA {
  0%   { opacity:0; transform:translateY(3px) translateX(0) scale(.4) rotate(0deg); }
  20%  { opacity:1; }
  65%  { opacity:.9; }
  100% { opacity:0; transform:translateY(-20px) translateX(8px) scale(.8) rotate(540deg); }
}
@keyframes ctmBadgeJackpotCoinB {
  0%   { opacity:0; transform:translateY(3px) translateX(0) scale(.4) rotate(0deg); }
  20%  { opacity:1; }
  65%  { opacity:.9; }
  100% { opacity:0; transform:translateY(-16px) translateX(-9px) scale(.7) rotate(-360deg); }
}
@keyframes ctmBadgeJackpotShockwave {
  0%   { transform:scale(.5); opacity:1; border-color:rgba(255,210,74,1); }
  100% { transform:scale(2.8); opacity:0; border-color:rgba(255,180,50,0); }
}
.vfx-jackpot-royal {
  animation: ctmJackpotRoyal 2s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
}
.vfx-jackpot-royal::before {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; bottom:5%; left:20%;
  background:#ffd24a;
  box-shadow: 8px -3px 0 #ffe87a, 16px 1px 0 #ffb52e, -2px -5px 0 #fff3b0, 14px -5px 0 rgba(255,220,80,.8), 22px -2px 0 rgba(255,180,50,.6), 5px 4px 0 rgba(255,240,100,.7);
  animation: ctmBadgeJackpotCoinA 1.6s ease-in infinite;
}
.vfx-jackpot-royal::after {
  content:""; position:absolute; width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(255,210,74,1);
  top:50%; left:50%; margin:-7px;
  animation: ctmBadgeJackpotShockwave 2s ease-out infinite;
}

/* ─── MILLION SINGULARITY ─── signature: prismatic full rotation + stardust twin orbit + event-horizon burst */
@keyframes ctmMillionSingularity { 0% { transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 8px #7df0ff) drop-shadow(0 0 14px #9b5aff) brightness(1.15); } 25% { transform: rotate(90deg) scale(1.03); filter: drop-shadow(0 0 10px #c77dff) drop-shadow(0 0 18px #ff7de0) brightness(1.2); } 48% { transform: rotate(170deg) scale(1.02); filter: drop-shadow(0 0 9px #ff7de0) drop-shadow(0 0 16px #ffd64a) brightness(1.18); } 52% { transform: rotate(184deg) scale(1.14); filter: drop-shadow(0 0 24px #ffffff) drop-shadow(0 0 38px #7df0ff) brightness(1.6); } 56% { transform: rotate(196deg) scale(1.02); filter: drop-shadow(0 0 9px #9be9ff) drop-shadow(0 0 16px #c77dff) brightness(1.18); } 75% { transform: rotate(270deg) scale(1.03); filter: drop-shadow(0 0 10px #ffd64a) drop-shadow(0 0 18px #7df0ff) brightness(1.2); } 100% { transform: rotate(360deg) scale(1); filter: drop-shadow(0 0 8px #7df0ff) drop-shadow(0 0 14px #9b5aff) brightness(1.15); } }
@keyframes ctmMillionStardustA { 0% { transform:rotate(0deg) translateX(13px) rotate(0deg); } 100% { transform:rotate(360deg) translateX(13px) rotate(-360deg); } }
@keyframes ctmMillionStardustB { 0% { transform:rotate(180deg) translateX(9px) rotate(0deg); } 100% { transform:rotate(540deg) translateX(9px) rotate(-360deg); } }
@keyframes ctmMillionPrismaticAura { 0% { transform:scale(.6) rotate(0deg); opacity:.9; } 100% { transform:scale(2.8) rotate(180deg); opacity:0; } }
.vfx-million-singularity {
  animation: ctmMillionSingularity 6s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
  border-radius:50%; transform-style:preserve-3d;
}
.vfx-million-singularity::before {
  content:"★"; position:absolute; font-size:6px; color:#fff; top:50%; left:50%; margin:-4px 0 0 -3px;
  text-shadow:0 0 4px #7df0ff;
  animation: ctmMillionStardustA 2.8s linear infinite;
}
.vfx-million-singularity::after {
  content:"★"; position:absolute; font-size:5px; color:#ffd64a; top:50%; left:50%; margin:-3px 0 0 -3px;
  text-shadow:0 0 4px #ff7de0;
  animation: ctmMillionStardustB 3.4s linear infinite;
}
/* alias kept */
.vfx-million-prismatic { animation: ctmMillionSingularity 6s ease-in-out infinite; display:inline-flex; border-radius:50%; }

/* ---- BRAIN GENIUS (comedic): keep think-wobble; add green sparks + 💡 orbit ---- */
@keyframes ctmBrainGenius { 0% { transform: translateY(0) rotate(-2deg) scale(1); filter: drop-shadow(0 0 4px #39ff8c) brightness(1.05); } 20% { transform: translateY(-1px) rotate(2deg) scale(1.04); filter: drop-shadow(0 0 9px #39ff8c) brightness(1.12); } 40% { transform: translateY(0) rotate(-2deg) scale(1); filter: drop-shadow(0 0 4px #39ff8c) brightness(1.05); } 48% { transform: translateY(-2px) rotate(0deg) scale(1.1); filter: drop-shadow(0 0 16px #aaffd0) drop-shadow(0 0 22px #39ff8c) brightness(1.35); } 56% { transform: translateY(0) rotate(0deg) scale(1); filter: drop-shadow(0 0 4px #39ff8c) brightness(1.05); } 100% { transform: translateY(0) rotate(-2deg) scale(1); filter: drop-shadow(0 0 4px #39ff8c) brightness(1.05); } }
@keyframes ctmBrainLightbulb { 0% { transform:rotate(0deg) translateX(11px) rotate(0deg); } 100% { transform:rotate(360deg) translateX(11px) rotate(-360deg); } }
@keyframes ctmBrainKnowledgeSpark { 0% { opacity:0; transform:scale(.4) rotate(0deg); } 40%,55% { opacity:1; transform:scale(1) rotate(180deg); } 100% { opacity:0; transform:scale(1.2) rotate(360deg); } }
.vfx-brain-genius {
  animation: ctmBrainGenius 2.6s ease-in-out infinite;
  display:inline-flex; position:relative; overflow:visible;
  transform-origin:50% 80%;
}
.vfx-brain-genius::before {
  content:"💡"; position:absolute; font-size:7px; top:50%; left:50%; margin:-4px 0 0 -4px;
  animation: ctmBrainLightbulb 3.5s linear infinite;
}
.vfx-brain-genius::after {
  content:""; position:absolute; width:2px; height:2px; border-radius:50%; top:20%; right:10%;
  background:#39ff8c;
  box-shadow: -5px 3px 0 rgba(57,255,140,.8), 3px 5px 0 rgba(170,255,208,.7), -8px -2px 0 rgba(57,255,140,.6);
  animation: ctmBrainKnowledgeSpark 2s ease-in-out .4s infinite;
}

/* ===== FALLBACK: keep old shared utility classes so any cached markup doesn't break ===== */
/* These are now effectively legacy — new vfx strings in engagement.js replace them.
   Keeping them avoids blank badges on stale markup. */
.vfx-glow-gold   { animation: ctmGlowGold 2.2s ease-in-out infinite; display:inline-flex; }
.vfx-glow-green  { animation: ctmGlowGreen 2.2s ease-in-out infinite; display:inline-flex; }
.vfx-glow-blue   { animation: ctmGlowBlue 2.2s ease-in-out infinite; display:inline-flex; }
.vfx-pulse-blue  { animation: ctmPulseBlue 1.7s ease-in-out infinite; display:inline-flex; }
.vfx-flicker     { animation: ctmBadgeFlicker 1.4s ease-in-out infinite; display:inline-flex; }
.vfx-shake       { animation: ctmBadgeShake 0.5s ease-in-out infinite; display:inline-flex; }


/* ==========================================================================
   MYTHIC TITLE VFX — absolute-maximum showpieces, each bespoke + distinct
   ========================================================================== */

/* ── THE ASCENDED ── radiant white-gold: float + halo bloom + light-ray sweep */
@keyframes ctmTitleAscendedSlide {
  0%   { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}
@keyframes ctmTitleAscendedFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-2px); }
}
@keyframes ctmTitleAscendedHalo {
  0%,100% {
    text-shadow:
      0 0 6px rgba(255,255,255,.7),
      0 0 14px rgba(200,230,255,.5),
      0 0 28px rgba(255,230,140,.3);
  }
  50% {
    text-shadow:
      0 0 12px rgba(255,255,255,1),
      0 0 28px rgba(200,230,255,.9),
      0 0 52px rgba(255,230,140,.65),
      0 0 80px rgba(255,255,255,.3);
  }
}
@keyframes ctmTitleAscendedRay {
  0%   { background-position: -200% 0; opacity: 0; }
  10%  { opacity: .55; }
  90%  { opacity: .55; }
  100% { background-position: 300% 0; opacity: 0; }
}
.title-vfx-ascended {
  position: relative;
  background: linear-gradient(90deg,
    #fff9f0, #ffffff, #e8f4ff, #ffffff,
    #ffe9b0, #fff8e0, #ffffff, #d8ecff,
    #ffffff, #fff9f0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 400% 100%;
  animation:
    ctmTitleAscendedSlide 6s linear infinite,
    ctmTitleAscendedFloat 3.2s ease-in-out infinite,
    ctmTitleAscendedHalo  2.4s ease-in-out infinite;
  font-weight: 800;
  letter-spacing: .02em;
}
.title-vfx-ascended::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255,255,255,.55) 48%,
    rgba(230,245,255,.4) 52%,
    transparent 80%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: ctmTitleAscendedRay 4.8s ease-in-out infinite;
  pointer-events: none;
}
.title-vfx-ascended::after {
  content: "✦";
  position: absolute; left: -10px; top: -4px;
  font-size: 8px;
  color: rgba(255,248,220,.9);
  animation: ctmTitleAscendedHalo 1.8s ease-in-out infinite;
  pointer-events: none;
}

/* ── CELESTIAL SOVEREIGN ── deep cosmic blue/violet: nebula swirl + star-twinkle + regal sway */
@keyframes ctmTitleCelestialNebula {
  0%   { background-position: 0% 50%;   filter: brightness(1.0) hue-rotate(0deg); }
  33%  { background-position: 200% 50%; filter: brightness(1.15) hue-rotate(15deg); }
  66%  { background-position: 100% 50%; filter: brightness(1.05) hue-rotate(-10deg); }
  100% { background-position: 400% 50%; filter: brightness(1.0) hue-rotate(0deg); }
}
@keyframes ctmTitleCelestialSway {
  0%,100% { transform: translateY(0) rotate(0deg); }
  25%     { transform: translateY(-1.5px) rotate(.2deg); }
  75%     { transform: translateY(-.8px) rotate(-.15deg); }
}
@keyframes ctmTitleCelestialSparkle {
  0%,100% { opacity: 0; transform: scale(.3) rotate(0deg); }
  45%,55% { opacity: 1; transform: scale(1.1) rotate(180deg); }
}
@keyframes ctmTitleCelestialSparkleB {
  0%,100% { opacity: 0; transform: scale(.2) rotate(0deg); }
  40%,60% { opacity: .85; transform: scale(1) rotate(90deg); }
}
.title-vfx-celestial {
  position: relative;
  background: linear-gradient(90deg,
    #1a0a3a, #3a1a6a, #6a3aff, #2a0a5a,
    #0d0d2e, #4a2a8a, #c77dff, #8a4aff,
    #1a0a3a, #2a1a5a, #5a2aff, #1a0a3a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 400% 100%;
  animation:
    ctmTitleCelestialNebula 8s ease-in-out infinite,
    ctmTitleCelestialSway   4.5s ease-in-out infinite;
  font-weight: 800;
  text-shadow:
    0 0 8px rgba(140,100,255,.6),
    0 0 20px rgba(100,60,200,.4),
    0 0 40px rgba(80,30,160,.2);
  letter-spacing: .025em;
}
.title-vfx-celestial::before {
  content: "✦";
  position: absolute; left: -8px; top: -6px;
  font-size: 9px;
  color: rgba(180,150,255,.95);
  animation: ctmTitleCelestialSparkle 2.6s ease-in-out infinite;
  pointer-events: none;
}
.title-vfx-celestial::after {
  content: "✦";
  position: absolute; right: -8px; bottom: -4px;
  font-size: 7px;
  color: rgba(210,180,255,.9);
  animation: ctmTitleCelestialSparkleB 3.1s ease-in-out 1.2s infinite;
  pointer-events: none;
}

/* ── ETERNAL ONE ── molten gold/ember: animated gradient + ember glow pulse + flicker */
@keyframes ctmTitleEternalGold {
  0%   { background-position: 0% 50%;   filter: brightness(1.05); }
  30%  { background-position: 150% 50%; filter: brightness(1.25) drop-shadow(0 0 6px #ff9a3a); }
  60%  { background-position: 300% 50%; filter: brightness(1.1); }
  100% { background-position: 0% 50%;   filter: brightness(1.05); }
}
@keyframes ctmTitleEternalEmber {
  0%,100% {
    text-shadow:
      0 0 4px #ffd24a,
      0 0 10px #ff9a3a,
      0 0 20px rgba(255,100,30,.5);
  }
  40% {
    text-shadow:
      0 0 8px #fff3b0,
      0 0 18px #ffd24a,
      0 0 36px rgba(255,150,40,.8),
      0 0 60px rgba(255,80,20,.35);
  }
  70% {
    text-shadow:
      0 0 5px #ffcf3a,
      0 0 12px #ff8c20,
      0 0 24px rgba(255,100,30,.6);
  }
}
@keyframes ctmTitleEternalFlicker {
  0%,100% { opacity: 1; }
  92%     { opacity: 1; }
  93%     { opacity: .82; }
  94%     { opacity: 1; }
  96%     { opacity: .9; }
  97%     { opacity: 1; }
}
.title-vfx-eternal {
  position: relative;
  background: linear-gradient(90deg,
    #8a5a00, #ffd24a, #fff3b0,
    #ff9a3a, #ffd24a, #ffe87a,
    #ff7a20, #ffd24a, #fff8d0,
    #8a5a00);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 300% 100%;
  animation:
    ctmTitleEternalGold    4s ease-in-out infinite,
    ctmTitleEternalEmber   2.2s ease-in-out infinite,
    ctmTitleEternalFlicker 7s linear infinite;
  font-weight: 800;
  letter-spacing: .02em;
}
.title-vfx-eternal::before {
  content: "✦";
  position: absolute; right: -9px; top: -5px;
  font-size: 7px;
  color: rgba(255,200,60,.9);
  animation: ctmTitleEternalFlicker 3.4s linear infinite,
             ctmTitleEternalEmber   1.8s ease-in-out infinite;
  pointer-events: none;
}
.title-vfx-eternal::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 60%,
    rgba(255,150,30,.12) 0%,
    transparent 70%);
  pointer-events: none;
  animation: ctmTitleEternalEmber 2.8s ease-in-out infinite;
}
/* NOTE: .title-vfx-jackpot and .title-vfx-million are defined in styles.css (ctmJackpotGold2 / ctmMillionPrism) — deduped, removed from here */

/* ===========================================================================
   LOOT NAME-COLORS — every gradient gets its OWN unique @keyframes (ctmNc*)
   No two classes share the same primary keyframe. Scaled by rarity.
   =========================================================================== */

/* --- RARE: glowstone — warmth breathes in/out like an ember glow ---------- */
@keyframes ctmNcGlowstonePulse {
  0%,100% { filter: brightness(1)    drop-shadow(0 0 2px rgba(255,200,60,.4));  background-position: 0% 50%; }
  40%     { filter: brightness(1.18) drop-shadow(0 0 7px rgba(255,220,80,.7));  background-position: 60% 50%; }
  70%     { filter: brightness(1.28) drop-shadow(0 0 12px rgba(255,180,40,.9)); background-position: 100% 50%; }
}
.name-color-glowstone {
  background: radial-gradient(ellipse at 50% 50%, #fff3a0 0%, #ffce3a 40%, #ff9a1a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 200%; animation: ctmNcGlowstonePulse 2.8s ease-in-out infinite; font-weight: 700;
}

/* --- RARE: magma — gradient flows downward like dripping lava + heat skew - */
@keyframes ctmNcMagmaFlow {
  0%   { background-position: 50% 0%;   transform: skewX(0deg); }
  25%  { background-position: 50% 40%;  transform: skewX(0.6deg); }
  50%  { background-position: 50% 100%; transform: skewX(0deg); }
  75%  { background-position: 50% 60%;  transform: skewX(-0.6deg); }
  100% { background-position: 50% 0%;   transform: skewX(0deg); }
}
.name-color-magma {
  background: linear-gradient(180deg, #ffd64a 0%, #ff5c1a 35%, #cc1a00 70%, #3a0a0a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 100% 300%; animation: ctmNcMagmaFlow 3.6s ease-in-out infinite; font-weight: 700;
}

/* --- RARE: aurora — gradient waves horizontally, hue drifts green↔violet -- */
@keyframes ctmNcAuroraWave {
  0%   { background-position: 0% 50%;   filter: hue-rotate(0deg); }
  33%  { background-position: 60% 50%;  filter: hue-rotate(30deg); }
  66%  { background-position: 120% 50%; filter: hue-rotate(-25deg); }
  100% { background-position: 200% 50%; filter: hue-rotate(0deg); }
}
.name-color-aurora {
  background: linear-gradient(90deg, #00ff99, #39ffb0, #4dd2ff, #c77dff, #ff80e0, #39ffb0, #00ff99);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 400% 100%; animation: ctmNcAuroraWave 5s ease-in-out infinite; font-weight: 700;
}

/* --- RARE: candy — diagonal stripe scrolls + bouncy scale beat ------------ */
@keyframes ctmNcCandyRoll {
  0%   { background-position: 0% 0%;    transform: scale(1); }
  48%  { background-position: 100% 100%; transform: scale(1); }
  50%  { background-position: 100% 100%; transform: scale(1.045); }
  52%  { background-position: 100% 100%; transform: scale(1); }
  100% { background-position: 200% 200%; transform: scale(1); }
}
.name-color-candy {
  background: repeating-linear-gradient(45deg, #ff7ed4 0px, #ff7ed4 8px, #ffd24a 8px, #ffd24a 16px, #7ec8ff 16px, #7ec8ff 24px, #ff7ed4 24px);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 48px 48px; animation: ctmNcCandyRoll 3.5s linear infinite; font-weight: 700;
}

/* --- RARE: toxic — radioactive jitter: opacity flicker + x-shake ---------- */
@keyframes ctmNcToxicFlicker {
  0%,100% { opacity: 1;    transform: translateX(0);    filter: brightness(1)    drop-shadow(0 0 3px rgba(155,255,82,.5)); }
  8%      { opacity: .82;  transform: translateX(-1px); filter: brightness(1.15) drop-shadow(0 0 6px rgba(212,255,57,.8)); }
  16%     { opacity: 1;    transform: translateX(1px);  filter: brightness(1.22) drop-shadow(0 0 9px rgba(155,255,82,.9)); }
  24%     { opacity: .9;   transform: translateX(0);    filter: brightness(1);   }
  72%     { opacity: 1;    transform: translateX(0);    filter: brightness(.95); }
  80%     { opacity: .75;  transform: translateX(1px);  filter: brightness(1.2)  drop-shadow(0 0 8px rgba(212,255,57,.85)); }
  88%     { opacity: 1;    transform: translateX(-1px); filter: brightness(1.1); }
}
.name-color-toxic {
  background: linear-gradient(90deg, #1a3a0a, #9bff52, #d4ff39, #9bff52, #1a3a0a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 100%; animation: ctmNcToxicFlicker 4s ease-in-out infinite; font-weight: 700;
}

/* --- EPIC: galaxy — hue slowly rotates while the name drifts in a circle -- */
@keyframes ctmNcGalaxyDrift {
  0%   { background-position: 0% 50%;   transform: translate(0, 0)      rotate(0deg);   filter: hue-rotate(0deg); }
  25%  { background-position: 50% 50%;  transform: translate(1.5px,-1px) rotate(0.3deg); filter: hue-rotate(45deg); }
  50%  { background-position: 100% 50%; transform: translate(0, -2px)    rotate(0deg);   filter: hue-rotate(90deg); }
  75%  { background-position: 150% 50%; transform: translate(-1.5px,-1px) rotate(-0.3deg); filter: hue-rotate(135deg); }
  100% { background-position: 200% 50%; transform: translate(0, 0)      rotate(0deg);   filter: hue-rotate(180deg); }
}
.name-color-galaxy {
  background: linear-gradient(90deg, #0d0826, #6a8aff, #c77dff, #ff7de0, #0d0826);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 400% 100%; animation: ctmNcGalaxyDrift 7s linear infinite; font-weight: 700;
}

/* --- EPIC: gilded — bright specular highlight sweeps left→right (metal glint) */
@keyframes ctmNcGildedSheen {
  0%,100% { background-position: -100% 0; filter: brightness(1); }
  35%     { background-position: 50% 0;   filter: brightness(1.08); }
  50%     { background-position: 130% 0;  filter: brightness(1.22) drop-shadow(0 0 4px rgba(255,240,140,.6)); }
  65%     { background-position: 200% 0;  filter: brightness(1.08); }
}
.name-color-gilded {
  background: linear-gradient(90deg, #8a6a1a 0%, #c89a28 20%, #ffd64a 40%, #fff3b0 50%, #ffd64a 60%, #c89a28 80%, #8a6a1a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 300% 100%; animation: ctmNcGildedSheen 3.2s ease-in-out infinite; font-weight: 700;
  text-shadow: 0 0 6px rgba(255,210,74,.3);
}

/* MYTHIC name-colors — absolute maximum showpieces, each a REAL-TIME EVOLUTION
   that visibly cycles through distinct life stages (no shared base motion). */

/* --- MYTHIC: SUPERNOVA — full stellar lifecycle in real time -----------------
   stable star → gravitational collapse (dim+shrink) → IGNITION → SUPERNOVA
   detonation (white flash + scale burst) → expanding nebula remnant → reborn.
   The gradient & scale & glow all evolve together through the stages. */
@keyframes ctmNcSupernovaLife {
  0%   { background-position: 0% 50%;   transform: scale(1);    filter: brightness(1); }      /* stable */
  22%  { background-position: 20% 50%;  transform: scale(.9);   filter: brightness(.7) saturate(.8); } /* collapse */
  30%  { background-position: 30% 50%;  transform: scale(.84);  filter: brightness(.55); }   /* core implodes */
  37%  { background-position: 40% 50%;  transform: scale(1.18); filter: brightness(2.4) saturate(1.6); } /* DETONATION */
  44%  { background-position: 60% 50%;  transform: scale(1.1);  filter: brightness(1.6); }    /* shockwave */
  65%  { background-position: 110% 50%; transform: scale(1.02); filter: brightness(1.15) saturate(1.2); } /* nebula */
  100% { background-position: 200% 50%; transform: scale(1);    filter: brightness(1); }      /* reborn */
}
@keyframes ctmNcSupernovaBlast {
  0%,30%,100% { text-shadow: 0 0 8px rgba(255,154,58,.5); }
  35%         { text-shadow: 0 0 6px #fff, 0 0 22px #fff3b0, 0 0 44px rgba(255,180,80,.9), 0 0 80px rgba(255,90,60,.6); }
  46%         { text-shadow: 0 0 10px rgba(255,154,58,.7), 0 0 30px rgba(255,90,60,.4); }
}
.name-color-supernova {
  background: linear-gradient(90deg, #2a0a3a, #ff3b6b, #ff9a3a, #fff3b0, #ffffff, #ff9a3a, #9b1aff, #2a0a3a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 400% 100%;
  animation: ctmNcSupernovaLife 6.5s ease-in-out infinite, ctmNcSupernovaBlast 6.5s ease-in-out infinite;
  font-weight: 800; text-shadow: 0 0 8px rgba(255,154,58,.5); display: inline-block;
}

/* --- MYTHIC: CHROMATIC — material EVOLUTION through three textures -----------
   liquid chrome MIRROR (steel highlights) → molten METAL pour (orange heat)
   → prismatic OIL-SLICK spectrum → back to chrome. Distinct material per stage,
   not just a hue spin. A vertical "pour" reflection sweeps the surface. */
@keyframes ctmNcChromaMaterial {
  0%   { background-position: 0% 0%;   filter: hue-rotate(0deg)   contrast(1.1) brightness(1.1); } /* chrome */
  33%  { background-position: 50% 50%; filter: hue-rotate(0deg)   contrast(1.3) brightness(1.25) sepia(.4) saturate(2); } /* molten */
  66%  { background-position: 100% 100%; filter: hue-rotate(160deg) contrast(1.2) brightness(1.15) saturate(2.2); } /* oil-slick */
  100% { background-position: 200% 0%; filter: hue-rotate(360deg) contrast(1.1) brightness(1.1); } /* chrome */
}
@keyframes ctmNcChromaPour {
  0%,100% { transform: perspective(120px) rotateX(0deg); }
  50%     { transform: perspective(120px) rotateX(7deg); }
}
.name-color-chroma {
  background: linear-gradient(135deg, #e8eef5, #9fb4c8, #ffffff, #ff8a3a, #ffd24a, #00eeff, #8a5aff, #ff22cc, #e8eef5);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 400% 240%;
  animation: ctmNcChromaMaterial 5.4s ease-in-out infinite, ctmNcChromaPour 3.2s ease-in-out infinite;
  font-weight: 800; display: inline-block;
}

/* --- MYTHIC: OBLIVION — matter EVOLUTION around a black hole ----------------
   solid matter → spaghettified & dragged inward (compress + shear) →
   crushed to a singularity point (near-zero width, blink) → re-emerges from a
   WHITE-HOLE on the other side (over-extend then settle). Real event-horizon. */
@keyframes ctmNcOblivionCollapse {
  0%,100% { transform: scaleX(1)    skewX(0deg);   opacity: 1;   filter: blur(0px); }      /* matter */
  30%     { transform: scaleX(.72)  skewX(10deg);  opacity: .85; filter: blur(.6px); }     /* dragged */
  44%     { transform: scaleX(.3)   skewX(22deg);  opacity: .4;  filter: blur(2px); }      /* spaghettify */
  50%     { transform: scaleX(.06)  skewX(0deg);   opacity: .08; filter: blur(3px); }      /* singularity */
  56%     { transform: scaleX(.3)   skewX(-22deg); opacity: .4;  filter: blur(2px); }      /* white-hole */
  70%     { transform: scaleX(1.12) skewX(-8deg);  opacity: .9;  filter: blur(.4px); }     /* over-extend */
  85%     { transform: scaleX(.96)  skewX(2deg);   opacity: 1;   filter: blur(0px); }      /* settle */
}
@keyframes ctmNcOblivionBg {
  0%   { background-position: 0% 50%;   filter: drop-shadow(0 0 8px rgba(140,60,255,.7)); }
  50%  { background-position: 200% 50%; filter: drop-shadow(0 0 2px rgba(60,20,120,.4)); }
  100% { background-position: 400% 50%; filter: drop-shadow(0 0 8px rgba(140,60,255,.7)); }
}
.name-color-oblivion {
  background: linear-gradient(90deg, #0a0014, #3a0a6a, #9a4aff, #ffffff, #c77dff, #4a0a8a, #1a0030, #0a0014);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 400% 100%;
  animation: ctmNcOblivionBg 5s linear infinite, ctmNcOblivionCollapse 5.6s cubic-bezier(.6,0,.4,1) infinite;
  font-weight: 800; text-shadow: 0 0 14px rgba(140,90,255,.6); display: inline-block;
}

/* --- MYTHIC (1-in-a-million): million — living rainbow + float + counter-rot + light-sweep */
@keyframes ctmNcMillionPrism {
  0%   { background-position: 0% 50%;   filter: hue-rotate(0deg)   brightness(1.05); }
  100% { background-position: 500% 50%; filter: hue-rotate(360deg) brightness(1.05); }
}
@keyframes ctmNcMillionFloat {
  0%,100% { transform: translateY(0)    rotate(0deg); }
  25%     { transform: translateY(-2px) rotate(-0.25deg); }
  50%     { transform: translateY(-3px) rotate(0deg); }
  75%     { transform: translateY(-2px) rotate(0.25deg); }
}
@keyframes ctmNcMillionAura {
  0%,100% { text-shadow: 0 0 6px rgba(125,240,255,.65), 0 0 14px rgba(155,90,255,.45), 0 0 26px rgba(255,125,224,.3); }
  33%     { text-shadow: 0 0 10px rgba(255,255,255,.95), 0 0 22px rgba(125,240,255,.7), 0 0 36px rgba(155,90,255,.5), 0 0 50px rgba(255,125,224,.35); }
  66%     { text-shadow: 0 0 8px rgba(255,220,80,.75),  0 0 18px rgba(125,240,255,.6), 0 0 30px rgba(255,125,224,.45); }
}
@keyframes ctmNcMillionSweep {
  0%,70%,100% { filter: brightness(1.05); }
  80%         { filter: brightness(1.4) drop-shadow(0 0 8px rgba(255,255,255,.8)); }
  88%         { filter: brightness(1.1); }
}
.name-color-million {
  background: linear-gradient(90deg, #ffffff, #a0f0ff, #9b5aff, #ff7de0, #ffd64a, #80ffcc, #a0f0ff, #ffffff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 600% 100%;
  animation: ctmNcMillionPrism 2.4s linear infinite, ctmNcMillionFloat 3.8s ease-in-out infinite, ctmNcMillionAura 2.8s ease-in-out infinite, ctmNcMillionSweep 5s ease-in-out infinite;
  font-weight: 800; text-shadow: 0 0 10px rgba(125,240,255,.7), 0 0 18px rgba(155,90,255,.45);
}

/* ===========================================================================
   LOOT NAME-VFX — particle / glow overlays (were referenced, never defined)
   Each wraps .ctm-name-wrap; effects via ::before / ::after so they layer on
   top of the name color without disturbing layout.
   =========================================================================== */
/* =========================================================================
   LOOT NAME VFX — STRUCTURALLY UNIQUE MOTIONS PER EFFECT
   Every effect owns a bespoke primary @keyframes (ctmVfx*).
   ctmLootTwinkle / ctmLootDrop kept only as minor filler — never primary.
   Orbit fix (ctmNameOrbit / Wide / Pull) preserved + extended.
   ========================================================================= */

/* Base positioning for all loot name-vfx */
.name-vfx-loot-sparkle, .name-vfx-loot-coins, .name-vfx-loot-confetti,
.name-vfx-loot-hearts, .name-vfx-loot-stars, .name-vfx-loot-snow,
.name-vfx-loot-neon, .name-vfx-loot-glitch,
.name-vfx-loot-galaxy, .name-vfx-loot-inferno,
.name-vfx-loot-emberglow, .name-vfx-loot-frostkiss, .name-vfx-loot-mossveil,
.name-vfx-loot-dustmote, .name-vfx-loot-fireflies, .name-vfx-loot-petals,
.name-vfx-loot-bubblestream, .name-vfx-loot-leaffall, .name-vfx-loot-runes,
.name-vfx-loot-raindrop, .name-vfx-loot-musicnotes, .name-vfx-loot-thunder,
.name-vfx-loot-prismwave, .name-vfx-loot-phantomtrail, .name-vfx-loot-dragonaura,
.name-vfx-loot-starfield, .name-vfx-loot-blackhole, .name-vfx-loot-celestine { position: relative; display: inline-block; }

/* Kept for minor filler use — NOT the primary motion of any effect */
@keyframes ctmLootTwinkle { 0%,100% { opacity: 0; transform: scale(.4) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(180deg); } }
@keyframes ctmLootDrop    { 0% { opacity: 0; transform: translateY(-8px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(10px); } }
@keyframes ctmLootSnow    { 0% { opacity: 0; transform: translateY(-6px) translateX(0); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(12px) translateX(3px); } }

/* ---- COMMON (subtle, one unique motion each) ---- */

/* Dust Mote — lazy diagonal drift across the name, slow lazy float */
@keyframes ctmVfxDust {
  0%   { opacity: 0; transform: translate(-6px, 4px) scale(.5); }
  20%  { opacity: .55; }
  80%  { opacity: .4; }
  100% { opacity: 0; transform: translate(6px, -6px) scale(.85); }
}
.name-vfx-loot-dustmote { text-shadow: 0 0 4px rgba(180,170,150,.55); }
.name-vfx-loot-dustmote::before { content: ""; position: absolute; left: -8px; top: 40%; width: 3px; height: 3px; border-radius: 50%; background: rgba(210,200,180,.85); animation: ctmVfxDust 3.8s ease-in-out infinite; }
.name-vfx-loot-dustmote::after  { content: ""; position: absolute; right: -8px; top: 55%; width: 2px; height: 2px; border-radius: 50%; background: rgba(200,190,165,.75); animation: ctmVfxDust 3.8s ease-in-out 1.9s infinite; }

/* Ember Glow — embers rising upward and winking out */
@keyframes ctmVfxEmber {
  0%   { opacity: 0; transform: translateY(3px) scale(.55) translateX(0); }
  30%  { opacity: .9; }
  70%  { opacity: .6; transform: translateY(-7px) scale(.8) translateX(2px); }
  100% { opacity: 0; transform: translateY(-13px) scale(1) translateX(3px); }
}
.name-vfx-loot-emberglow { text-shadow: 0 0 5px rgba(255,140,42,.55); animation: none; }
.name-vfx-loot-emberglow::before { content: ""; position: absolute; left: -6px; bottom: -2px; width: 3px; height: 3px; border-radius: 50%; background: #ff8c2a; box-shadow: 0 0 5px #ff8c2a; animation: ctmVfxEmber 2.1s ease-in infinite; }
.name-vfx-loot-emberglow::after  { content: ""; position: absolute; right: -6px; bottom: -2px; width: 2px; height: 2px; border-radius: 50%; background: #ffb347; box-shadow: 0 0 4px #ffb347; animation: ctmVfxEmber 2.1s ease-in 1.05s infinite; }

/* Frost Kiss — frost crystal forming at edge + slow icy shimmer of the name */
@keyframes ctmVfxFrost {
  0%,100% { text-shadow: 0 0 5px rgba(150,210,255,.5), 0 0 10px rgba(100,170,230,.2); letter-spacing: 0; }
  50%      { text-shadow: 0 0 9px rgba(200,235,255,.85), 0 0 18px rgba(120,200,255,.4); letter-spacing: .3px; }
}
@keyframes ctmVfxFrostCrystal {
  0%,100% { opacity: 0; transform: scale(.3) rotate(0deg); }
  20%,80% { opacity: .7; transform: scale(1) rotate(30deg); }
  50%     { opacity: .9; transform: scale(1.1) rotate(60deg); }
}
.name-vfx-loot-frostkiss { animation: ctmVfxFrost 3.2s ease-in-out infinite; }
.name-vfx-loot-frostkiss::before { content: "\2745"; position: absolute; left: -10px; top: -4px; font-size: 8px; color: #b8e4ff; animation: ctmVfxFrostCrystal 3.2s ease-in-out infinite; }
.name-vfx-loot-frostkiss::after  { content: "\2745"; position: absolute; right: -10px; bottom: -4px; font-size: 7px; color: #d4f0ff; animation: ctmVfxFrostCrystal 3.2s ease-in-out 1.6s infinite; }

/* Moss Veil — slow green spore drift downward + gentle green pulse on name */
@keyframes ctmVfxMoss {
  0%,100% { text-shadow: 0 0 5px rgba(123,191,58,.45); }
  50%      { text-shadow: 0 0 9px rgba(150,220,60,.75), 0 0 16px rgba(90,160,30,.3); }
}
@keyframes ctmVfxSpore {
  0%   { opacity: 0; transform: translateY(-3px) translateX(0) scale(.5); }
  30%  { opacity: .7; }
  100% { opacity: 0; transform: translateY(10px) translateX(-2px) scale(.9); }
}
.name-vfx-loot-mossveil { animation: ctmVfxMoss 3.6s ease-in-out infinite; }
.name-vfx-loot-mossveil::before { content: ""; position: absolute; left: -7px; top: -3px; width: 3px; height: 3px; border-radius: 50%; background: #7abf3a; box-shadow: 0 0 4px rgba(122,191,58,.7); animation: ctmVfxSpore 3s ease-in infinite; }
.name-vfx-loot-mossveil::after  { content: ""; position: absolute; right: -7px; top: -1px; width: 2px; height: 2px; border-radius: 50%; background: #96d040; box-shadow: 0 0 4px rgba(150,208,64,.7); animation: ctmVfxSpore 3s ease-in 1.5s infinite; }

/* Sparkle — discrete pops scale(0→1→0) at staggered positions */
@keyframes ctmVfxSparklePop {
  0%,100% { opacity: 0; transform: scale(0) rotate(0deg); }
  15%     { opacity: 1; transform: scale(1.2) rotate(45deg); }
  40%     { opacity: .8; transform: scale(1) rotate(90deg); }
  70%     { opacity: .3; transform: scale(.7) rotate(135deg); }
}
.name-vfx-loot-sparkle { text-shadow: 0 0 4px rgba(255,230,120,.35); }
.name-vfx-loot-sparkle::before { content: "\2728"; position: absolute; left: -13px; top: -5px; font-size: 10px; animation: ctmVfxSparklePop 2s ease-in-out infinite; }
.name-vfx-loot-sparkle::after  { content: "\2728"; position: absolute; right: -13px; bottom: -5px; font-size: 10px; animation: ctmVfxSparklePop 2s ease-in-out 1s infinite; }

/* ---- UNCOMMON / RARE (clearly distinct motions) ---- */

/* Coin Shower — gold coins flipping (rotateY) as they fall */
@keyframes ctmVfxCoinFlip {
  0%   { opacity: 0; transform: translateY(-10px) rotateY(0deg); }
  15%  { opacity: 1; }
  50%  { transform: translateY(2px) rotateY(180deg); }
  100% { opacity: 0; transform: translateY(12px) rotateY(360deg); }
}
.name-vfx-loot-coins { text-shadow: 0 0 5px rgba(255,210,74,.35); }
.name-vfx-loot-coins::before { content: "\1FA99"; position: absolute; left: -14px; top: -8px; font-size: 11px; animation: ctmVfxCoinFlip 1.5s linear infinite; }
.name-vfx-loot-coins::after  { content: "\1FA99"; position: absolute; right: -14px; top: -8px; font-size: 11px; animation: ctmVfxCoinFlip 1.5s linear .75s infinite; }

/* Confetti — multicolor pieces tumbling (rotate + fall + sway) */
@keyframes ctmVfxConfetti {
  0%   { opacity: 0; transform: translateY(-8px) translateX(0) rotate(0deg) scale(.8); }
  20%  { opacity: 1; }
  60%  { transform: translateY(5px) translateX(3px) rotate(160deg) scale(1); }
  100% { opacity: 0; transform: translateY(14px) translateX(-2px) rotate(300deg) scale(.7); }
}
.name-vfx-loot-confetti { text-shadow: 0 0 5px rgba(255,200,100,.3); }
.name-vfx-loot-confetti::before { content: "\1F389"; position: absolute; left: -15px; top: -6px; font-size: 11px; animation: ctmVfxConfetti 1.7s linear infinite; }
.name-vfx-loot-confetti::after  { content: "\1F38A"; position: absolute; right: -15px; top: -6px; font-size: 11px; animation: ctmVfxConfetti 1.7s linear .85s infinite; }

/* Hearts — floating up with a pulse-beat scale */
@keyframes ctmVfxHeartBeat {
  0%   { opacity: 0; transform: translateY(4px) scale(.5); }
  12%  { transform: scale(1.25); opacity: 1; }
  24%  { transform: scale(.9); }
  36%  { transform: scale(1.1); }
  50%  { transform: translateY(-4px) scale(1); opacity: .85; }
  100% { opacity: 0; transform: translateY(-14px) scale(.6); }
}
.name-vfx-loot-hearts { text-shadow: 0 0 5px rgba(255,92,138,.35); }
.name-vfx-loot-hearts::before { content: "\2764"; position: absolute; left: -14px; top: -6px; font-size: 10px; color: #ff5c8a; animation: ctmVfxHeartBeat 1.8s ease-in infinite; }
.name-vfx-loot-hearts::after  { content: "\2764"; position: absolute; right: -14px; top: -6px; font-size: 10px; color: #ff7aa8; animation: ctmVfxHeartBeat 1.8s ease-in 1s infinite; }

/* Music Notes — notes rising on a sine bob + fade */
@keyframes ctmVfxNoteRise {
  0%   { opacity: 0; transform: translateY(4px) translateX(0) scale(.7); }
  20%  { opacity: 1; }
  40%  { transform: translateY(-4px) translateX(2px) scale(1); }
  60%  { transform: translateY(-8px) translateX(-1px) scale(1); }
  80%  { transform: translateY(-12px) translateX(2px) scale(.9); opacity: .6; }
  100% { opacity: 0; transform: translateY(-18px) translateX(0) scale(.6); }
}
.name-vfx-loot-musicnotes { text-shadow: 0 0 6px rgba(77,210,255,.4); }
.name-vfx-loot-musicnotes::before { content: "\1F3B5"; position: absolute; left: -14px; bottom: -3px; font-size: 10px; color: #6fd6ff; animation: ctmVfxNoteRise 2.2s ease-in-out infinite; }
.name-vfx-loot-musicnotes::after  { content: "\1F3B6"; position: absolute; right: -15px; bottom: -3px; font-size: 10px; color: #4dd2ff; animation: ctmVfxNoteRise 2.2s ease-in-out 1.1s infinite; }

/* Fireflies — wandering x/y drift + blink (non-linear path) */
@keyframes ctmVfxFirefly {
  0%   { opacity: 0; transform: translate(-4px, 2px) scale(.6); }
  15%  { opacity: .9; }
  30%  { transform: translate(3px, -5px) scale(1); }
  50%  { transform: translate(-2px, -8px) scale(.85); opacity: .6; }
  70%  { transform: translate(4px, -4px) scale(1); opacity: .9; }
  85%  { opacity: .4; }
  100% { opacity: 0; transform: translate(0, -12px) scale(.5); }
}
.name-vfx-loot-fireflies { text-shadow: 0 0 6px rgba(255,232,120,.4); }
.name-vfx-loot-fireflies::before { content: ""; position: absolute; left: -9px; top: 30%; width: 3px; height: 3px; border-radius: 50%; background: #ffe878; box-shadow: 0 0 7px #ffe878, 0 0 3px #fff; animation: ctmVfxFirefly 2.6s ease-in-out infinite; }
.name-vfx-loot-fireflies::after  { content: ""; position: absolute; right: -9px; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: #fff1a8; box-shadow: 0 0 7px #ffe878, 0 0 3px #fff; animation: ctmVfxFirefly 2.6s ease-in-out 1.3s infinite; }

/* Bubble Stream — wobble-rise + pop (scale shrinks at top) */
@keyframes ctmVfxBubble {
  0%   { opacity: 0; transform: translateY(4px) scale(.55) translateX(0); }
  20%  { opacity: .85; }
  40%  { transform: translateY(-3px) scale(.9) translateX(2px); }
  65%  { transform: translateY(-9px) scale(1) translateX(-1px); }
  85%  { opacity: .6; transform: translateY(-14px) scale(1.15) translateX(1px); }
  100% { opacity: 0; transform: translateY(-17px) scale(.3) translateX(0); }
}
.name-vfx-loot-bubblestream { text-shadow: 0 0 5px rgba(120,200,255,.4); }
.name-vfx-loot-bubblestream::before { content: "\1FAE7"; position: absolute; left: -11px; bottom: -4px; font-size: 10px; animation: ctmVfxBubble 2.1s ease-in infinite; }
.name-vfx-loot-bubblestream::after  { content: "\1FAE7"; position: absolute; right: -11px; bottom: -4px; font-size: 10px; animation: ctmVfxBubble 2.1s ease-in 1.05s infinite; }

/* Leaf Fall — pendulum tumble-fall (heavier, twisting) */
@keyframes ctmVfxLeaf {
  0%   { opacity: 0; transform: translateY(-5px) translateX(0) rotate(-20deg) scale(.8); }
  20%  { opacity: 1; }
  40%  { transform: translateY(4px) translateX(4px) rotate(15deg) scale(1); }
  60%  { transform: translateY(8px) translateX(-3px) rotate(-10deg); }
  100% { opacity: 0; transform: translateY(16px) translateX(5px) rotate(50deg) scale(.7); }
}
.name-vfx-loot-leaffall::before { content: "\1F343"; position: absolute; left: -13px; top: -7px; font-size: 10px; animation: ctmVfxLeaf 2.6s cubic-bezier(.4,0,.6,1) infinite; }
.name-vfx-loot-leaffall::after  { content: "\1F342"; position: absolute; right: -13px; top: -7px; font-size: 10px; animation: ctmVfxLeaf 2.6s cubic-bezier(.4,0,.6,1) 1.3s infinite; }

/* Cherry Petals — soft pendulum sway (lighter, swinging arc — distinct from leaf) */
@keyframes ctmVfxPetal {
  0%   { opacity: 0; transform: translateY(-3px) rotate(-40deg) scale(.7); }
  15%  { opacity: .9; }
  40%  { transform: translateY(3px) rotate(10deg) scale(1) translateX(2px); }
  70%  { transform: translateY(8px) rotate(-5deg) scale(1) translateX(-2px); }
  100% { opacity: 0; transform: translateY(14px) rotate(30deg) scale(.6) translateX(3px); }
}
.name-vfx-loot-petals::before { content: "\1F338"; position: absolute; left: -13px; top: -7px; font-size: 10px; animation: ctmVfxPetal 2.8s ease-in-out infinite; }
.name-vfx-loot-petals::after  { content: "\1F338"; position: absolute; right: -13px; top: -7px; font-size: 10px; animation: ctmVfxPetal 2.8s ease-in-out 1.4s infinite; }

/* Snow — drift with gentle side-sway, slower */
@keyframes ctmVfxSnow {
  0%   { opacity: 0; transform: translateY(-7px) translateX(0) rotate(0deg); }
  25%  { opacity: .9; }
  50%  { transform: translateY(3px) translateX(3px) rotate(45deg); }
  75%  { transform: translateY(8px) translateX(-2px) rotate(90deg); }
  100% { opacity: 0; transform: translateY(15px) translateX(2px) rotate(135deg); }
}
.name-vfx-loot-snow { text-shadow: 0 0 6px #bfe6ff; }
.name-vfx-loot-snow::before { content: "\2744"; position: absolute; left: -12px; top: -7px; font-size: 9px; color: #d6f0ff; animation: ctmVfxSnow 2.4s linear infinite; }
.name-vfx-loot-snow::after  { content: "\2744"; position: absolute; right: -12px; top: -7px; font-size: 9px; color: #e8f8ff; animation: ctmVfxSnow 2.4s linear 1.2s infinite; }

/* Rain Shower — fast straight streaks downward + tiny splash at bottom */
@keyframes ctmVfxRain {
  0%   { opacity: 0; transform: translateY(-10px) scaleY(.6); }
  15%  { opacity: 1; transform: translateY(-4px) scaleY(1.2); }
  80%  { opacity: .8; transform: translateY(9px) scaleY(.9); }
  90%  { opacity: .4; transform: translateY(12px) scaleY(.4) scaleX(1.6); }
  100% { opacity: 0; transform: translateY(13px) scaleY(.1) scaleX(2); }
}
.name-vfx-loot-raindrop { text-shadow: 0 0 6px rgba(90,160,230,.5); }
.name-vfx-loot-raindrop::before { content: "\1F4A7"; position: absolute; left: -12px; top: -9px; font-size: 9px; animation: ctmVfxRain 1s linear infinite; }
.name-vfx-loot-raindrop::after  { content: "\1F4A7"; position: absolute; right: -12px; top: -9px; font-size: 9px; animation: ctmVfxRain 1s linear .5s infinite; }

/* Neon Pulse — buzzing on/off flicker + steady hum glow */
@keyframes ctmVfxNeonBuzz {
  0%,100% { text-shadow: 0 0 4px #39ffd0, 0 0 10px #39ffd0; opacity: 1; }
  88%     { text-shadow: 0 0 4px #39ffd0, 0 0 10px #39ffd0; opacity: 1; }
  89%     { opacity: .3; text-shadow: none; }
  90%     { opacity: 1; text-shadow: 0 0 14px #00ffc8, 0 0 28px #00ffc8; }
  91%     { opacity: .5; text-shadow: 0 0 4px #39ffd0; }
  92%     { opacity: 1; text-shadow: 0 0 8px #39ffd0, 0 0 20px #00ffc8, 0 0 30px #00ffc8; }
  96%,98% { opacity: .6; text-shadow: 0 0 4px #39ffd0; }
  97%,99% { opacity: 1; text-shadow: 0 0 8px #39ffd0, 0 0 18px #00ffc8; }
}
.name-vfx-loot-neon { animation: ctmVfxNeonBuzz 2.2s linear infinite; }

/* Glitch — per-letter independent RGB-split data-corruption */
@keyframes ctmVfx2GlitchLetter {
  0%,100% { text-shadow: none; transform: translate(0,0) skewX(0deg); opacity: 1; filter: none; }
  5%      { text-shadow: -3px 0 #ff0040, 3px 0 #00ffee; transform: translate(-2px, 1px) skewX(-4deg); opacity: .85; }
  6%      { text-shadow: 3px 0 #ff0040, -3px 0 #00ffee; transform: translate(2px,-1px) skewX(3deg); }
  7%      { text-shadow: none; transform: translate(0,0) skewX(0deg); opacity: 1; }
  20%     { text-shadow: 0 2px #ff0040, 0 -2px #00ffee; transform: skewX(-6deg) scaleY(1.05); filter: brightness(1.3); }
  21%     { text-shadow: none; transform: skewX(0deg) scaleY(1); filter: none; }
  35%     { opacity: 0; transform: translate(4px,0) scaleX(.9); }
  36%     { opacity: 1; transform: translate(-3px,0) scaleX(1.1); }
  37%     { opacity: 1; transform: translate(0,0) scaleX(1); }
  55%     { text-shadow: -4px 0 rgba(255,0,64,.9), 4px 0 rgba(0,255,238,.9); transform: translate(-1px,2px) skewX(5deg); filter: hue-rotate(30deg); }
  56%     { text-shadow: none; transform: translate(0,0); filter: none; }
  80%     { text-shadow: 2px 0 #ff0040, -2px 0 #00ffee; transform: translate(2px,-2px) skewX(-3deg); opacity: .7; }
  81%     { opacity: 0; transform: translate(-2px,1px); text-shadow: none; }
  82%     { opacity: 1; transform: translate(0,0); }
}
.name-vfx-loot-glitch { }
.name-vfx-loot-glitch .ctm-nl {
  animation: ctmVfx2GlitchLetter 1.6s steps(1) infinite;
  animation-delay: calc(var(--i) * 0.13s);
  will-change: transform, text-shadow, opacity;
}

/* Shooting Stars — 5-point stars spinning + twinkling */
@keyframes ctmVfxStarSpin {
  0%   { opacity: 0; transform: scale(.3) rotate(0deg) translateY(-8px); }
  20%  { opacity: 1; transform: scale(1.1) rotate(72deg) translateY(-4px); }
  50%  { transform: scale(1) rotate(180deg) translateY(0px); }
  80%  { opacity: .7; transform: scale(1.1) rotate(288deg) translateY(4px); }
  100% { opacity: 0; transform: scale(.4) rotate(360deg) translateY(10px); }
}
.name-vfx-loot-stars { text-shadow: 0 0 6px #fff, 0 0 12px #ffd24a; }
.name-vfx-loot-stars::before { content: "\2B50"; position: absolute; left: -15px; top: -7px; font-size: 11px; animation: ctmVfxStarSpin 1.6s ease-in-out infinite; }
.name-vfx-loot-stars::after  { content: "\1F320"; position: absolute; right: -17px; top: -8px; font-size: 12px; animation: ctmVfxStarSpin 2s ease-in-out .6s infinite; }

/* Phantom Trail — ghostly afterimage: name drifts + echo fades */
@keyframes ctmVfxPhantomEcho {
  0%,100% { transform: translateX(0) translateY(0); opacity: .95; text-shadow: 3px 0 8px rgba(160,100,255,.45), -3px 0 8px rgba(100,70,220,.3); }
  25%     { transform: translateX(-2px) translateY(-1px); opacity: .8; text-shadow: 5px 0 12px rgba(180,120,255,.6), -1px 0 4px rgba(80,60,200,.25); }
  50%     { transform: translateX(2px) translateY(0); opacity: .9; text-shadow: -5px 0 12px rgba(120,80,255,.55), 3px 0 6px rgba(180,140,255,.3); }
  75%     { transform: translateX(-1px) translateY(1px); opacity: .8; text-shadow: 4px 0 10px rgba(140,100,255,.5), -4px 0 10px rgba(100,70,230,.35); }
}
.name-vfx-loot-phantomtrail { animation: ctmVfxPhantomEcho 2s ease-in-out infinite; }
.name-vfx-loot-phantomtrail::before { content: "\1F47B"; position: absolute; left: -14px; top: -5px; font-size: 10px; opacity: .75; animation: ctmLootTwinkle 2.6s ease-in-out infinite; }

/* Prism Wave — a prismatic light bar sweeping through + hue-rotate */
@keyframes ctmVfxPrism {
  0%   { background-position: 0% 50%; filter: hue-rotate(0deg); }
  100% { background-position: 300% 50%; filter: hue-rotate(360deg); }
}
.name-vfx-loot-prismwave {
  background: linear-gradient(90deg, #ff5e62, #ffe066, #66ff8a, #66ffe8, #6a8aff, #c66dff, #ff5e62);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 400% 100%; animation: ctmVfxPrism 2.5s linear infinite; font-weight: 700;
}

/* Thunder — storm: periodic lightning FLASH whites-out + bolt particle flicker */
@keyframes ctmVfxThunder {
  0%,86%,100% { text-shadow: 0 0 4px #aef0ff; letter-spacing: 0; }
  88%  { text-shadow: 0 0 18px #fff, 0 0 32px #6cf, 0 0 44px #2a8aff; letter-spacing: .8px; }
  90%  { text-shadow: 0 0 4px #aef0ff; letter-spacing: 0; }
  93%  { text-shadow: 0 0 14px #fff, 0 0 26px #6cf; letter-spacing: .4px; }
  95%  { text-shadow: 0 0 4px #aef0ff; letter-spacing: 0; }
}
@keyframes ctmVfxBoltFlash {
  0%,84%,100% { opacity: 0; transform: scaleY(1); }
  88% { opacity: 1; transform: scaleY(1.2); }
  92% { opacity: .15; transform: scaleY(.9); }
  94% { opacity: .8; transform: scaleY(1.1); }
  96% { opacity: 0; }
}
.name-vfx-loot-thunder { animation: ctmVfxThunder 2.8s linear infinite; }
.name-vfx-loot-thunder::before { content: "\26A1"; position: absolute; left: -13px; top: -6px; font-size: 11px; animation: ctmVfxBoltFlash 2.8s linear infinite; }
.name-vfx-loot-thunder::after  { content: "\26A1"; position: absolute; right: -13px; top: -6px; font-size: 11px; animation: ctmVfxBoltFlash 2.8s linear 1.3s infinite; }

/* Dragon Aura — per-letter scorching fire-wave sweeping left-to-right */
@keyframes ctmVfx2DragonHeat {
  0%,100% { color: #ffd24a; text-shadow: 0 0 4px #ff8c2a, 0 0 8px rgba(255,90,0,.4); transform: translateY(0) scaleX(1); }
  20%     { color: #ff9a00; text-shadow: 0 0 8px #ff6600, 0 0 16px #ff3300, 0 0 24px rgba(255,100,0,.6); transform: translateY(-3px) scaleX(1.04); }
  35%     { color: #fff0a0; text-shadow: 0 0 14px #fff, 0 0 22px #ffcc00, 0 0 32px #ff5500; transform: translateY(-5px) scaleX(.97) skewX(-3deg); }
  50%     { color: #ffffff; text-shadow: 0 0 18px #fff, 0 0 28px #ffd24a, 0 0 40px #ff4400; transform: translateY(-4px) scaleX(1.06) skewX(2deg); }
  70%     { color: #ff8800; text-shadow: 0 0 10px #ff6600, 0 0 18px #ff3300; transform: translateY(-2px) scaleX(1); }
  85%     { color: #ffd24a; text-shadow: 0 0 5px #ff8c2a; transform: translateY(0); }
}
@keyframes ctmVfx2DragonEmberMote {
  0%   { opacity: 0; transform: translateY(2px) translateX(0) scale(.4); }
  20%  { opacity: 1; }
  60%  { opacity: .7; transform: translateY(-10px) translateX(3px) scale(.8) rotate(15deg); }
  100% { opacity: 0; transform: translateY(-20px) translateX(-2px) scale(.3) rotate(40deg); }
}
@keyframes ctmVfx2DragonWrapperThrob {
  0%,100% { filter: drop-shadow(0 2px 6px rgba(255,100,0,.45)); }
  40%     { filter: drop-shadow(0 4px 14px rgba(255,60,0,.75)) drop-shadow(0 0 22px rgba(255,200,0,.4)); }
  70%     { filter: drop-shadow(0 2px 8px rgba(255,140,0,.5)); }
}
.name-vfx-loot-dragonaura {
  font-weight: 800;
  position: relative; display: inline-block;
  animation: ctmVfx2DragonWrapperThrob 2.2s ease-in-out infinite;
}
.name-vfx-loot-dragonaura .ctm-nl {
  color: #ffd24a;
  -webkit-text-fill-color: initial;
  animation: ctmVfx2DragonHeat 2.0s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.11s);
  will-change: transform, color, text-shadow;
  transform-origin: bottom center;
}
.name-vfx-loot-dragonaura .ctm-nl::after {
  content: "";
  position: absolute; left: 50%; bottom: -2px; margin-left: -2px;
  width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, #ffdd44, #ff8800);
  box-shadow: 0 0 6px #ff6600;
  animation: ctmVfx2DragonEmberMote 1.4s ease-in infinite;
  animation-delay: calc(var(--i) * 0.11s + 0.3s);
  pointer-events: none;
}

/* Star Field — per-letter constellation pulse at different stellar depths */
@keyframes ctmVfx2StarLetter {
  0%,100% { opacity: .55; transform: scale(.88) translateY(0); text-shadow: 0 0 3px #aee0ff; }
  20%     { opacity: 1; transform: scale(1.06) translateY(-2px); text-shadow: 0 0 8px #fff, 0 0 14px #9fd0ff, 0 0 22px #6ab8ff; }
  45%     { opacity: .7; transform: scale(.94) translateY(1px); text-shadow: 0 0 4px #cce8ff; }
  65%     { opacity: .9; transform: scale(1.03) translateY(-1px); text-shadow: 0 0 6px #fff, 0 0 10px #b0d8ff; }
  85%     { opacity: .5; transform: scale(.85) translateY(2px); text-shadow: 0 0 2px #88c4ff; filter: blur(.4px); }
}
@keyframes ctmVfx2StarMote {
  0%,100% { opacity: 0; transform: scale(0) translateY(0); }
  15%     { opacity: 1; transform: scale(1.2) translateY(-6px); }
  50%     { opacity: .6; transform: scale(.8) translateY(-10px); }
  80%     { opacity: .2; transform: scale(.4) translateY(-14px); }
}
@keyframes ctmVfx2StarDrift {
  0%,100% { transform: translateX(0) translateY(0); }
  33%     { transform: translateX(-2px) translateY(-1.5px); }
  66%     { transform: translateX(2px) translateY(1px); }
}
@keyframes ctmVfx2ShootingStar {
  0%,70%,100% { opacity: 0; transform: translateX(-120%) translateY(-6px) scaleX(0); }
  73%          { opacity: .9; transform: translateX(-60%) translateY(-4px) scaleX(1); }
  78%          { opacity: 0; transform: translateX(30%) translateY(-2px) scaleX(.3); }
}
.name-vfx-loot-starfield {
  position: relative; display: inline-block;
  animation: ctmVfx2StarDrift 6s ease-in-out infinite;
}
.name-vfx-loot-starfield .ctm-nl {
  animation: ctmVfx2StarLetter 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.18s);
  will-change: transform, opacity, text-shadow;
}
.name-vfx-loot-starfield .ctm-nl::before {
  content: "★";
  position: absolute; left: 50%; top: -9px; margin-left: -4px;
  font-size: 7px; color: #e8f4ff;
  filter: drop-shadow(0 0 3px #9fd0ff);
  animation: ctmVfx2StarMote 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.18s + 0.5s);
  pointer-events: none;
}
.name-vfx-loot-starfield::after {
  content: "";
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.0) 40%, rgba(220,240,255,.9) 50%, rgba(200,230,255,.5) 55%, transparent 70%);
  animation: ctmVfx2ShootingStar 5s linear infinite;
  border-radius: 1px;
  z-index: 10;
}

/* ---- MYTHIC: absolute-maximum showpieces ---- */

/* ---- INFERNO — whole-word TRUE INFERNO engulf with evolving ember/flame cycle ---- */
@keyframes ctmVfx2InfernoText {
  0%,100% {
    background-position: 50% 100%;
    text-shadow: 0 0 8px #ff4400, 0 0 18px #ff2200, 0 0 30px rgba(200,30,0,.7);
    filter: brightness(1);
  }
  15%     {
    background-position: 50% 60%;
    text-shadow: 0 0 14px #ff9900, 0 0 26px #ff4400, 0 0 42px rgba(255,100,0,.7), 0 -3px 8px #ffee88;
    filter: brightness(1.12);
  }
  30%     {
    background-position: 50% 30%;
    text-shadow: 0 0 20px #fff0a0, 0 0 36px #ffbb00, 0 0 54px #ff3300;
    filter: brightness(1.25);
    transform: skewX(.4deg) skewY(.1deg) scaleX(1.01);
  }
  45%     {
    background-position: 50% 10%;
    text-shadow: 0 0 28px #ffffff, 0 0 44px #ffd24a, 0 0 64px #ff4400;
    filter: brightness(1.35);
    transform: skewX(-.3deg) skewY(-.2deg) scaleX(.99);
  }
  60%     {
    background-position: 50% 30%;
    text-shadow: 0 0 18px #ffbb00, 0 0 34px #ff5500, 0 0 50px rgba(200,50,0,.8);
    filter: brightness(1.2);
    transform: skewX(.2deg) skewY(.1deg);
  }
  80%     {
    background-position: 50% 70%;
    text-shadow: 0 0 10px #ff6600, 0 0 20px #ff3300, 0 0 34px rgba(200,30,0,.6);
    filter: brightness(1.06);
    transform: skewX(0deg) skewY(0deg);
  }
}
@keyframes ctmVfx2InfernoEmberRise {
  0%   { opacity: 0; transform: translateY(4px) translateX(0) scale(.5,.8); filter: hue-rotate(0deg); }
  20%  { opacity: 1; }
  55%  { opacity: .8; transform: translateY(-10px) translateX(2px) scale(.6,.6) rotate(-8deg); filter: hue-rotate(-15deg); }
  100% { opacity: 0; transform: translateY(-22px) translateX(-3px) scale(.2,.3) rotate(10deg); filter: hue-rotate(25deg); }
}
@keyframes ctmVfx2InfernoEmberB {
  0%   { opacity: 0; transform: translateY(3px) scale(.4,.9) rotate(8deg); }
  18%  { opacity: .9; }
  60%  { opacity: .65; transform: translateY(-8px) scale(.55,.55) rotate(-5deg); }
  100% { opacity: 0; transform: translateY(-18px) scale(.2,.25) rotate(12deg); }
}
@keyframes ctmVfx2InfernoGlow {
  0%,100% { box-shadow: none; }
  40%     { box-shadow: 0 -4px 18px 2px rgba(255,100,0,.55), 0 0 30px 4px rgba(255,200,0,.3); }
}
.name-vfx-loot-inferno {
  background: linear-gradient(180deg, #fff5a0 0%, #ffd24a 18%, #ff8800 40%, #ff2200 65%, #990000 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 100% 300%;
  animation: ctmVfx2InfernoText 1.4s ease-in-out infinite;
  font-weight: 800; isolation: isolate; position: relative; z-index: 0;
}
.name-vfx-loot-inferno > * { position: relative; z-index: 2; }
.name-vfx-loot-inferno::before {
  content: "";
  position: absolute; left: -4px; right: -4px; bottom: -3px;
  height: 22px;
  background: linear-gradient(180deg, transparent 0%, rgba(255,80,0,.18) 40%, rgba(255,120,0,.35) 70%, rgba(255,60,0,.22) 100%);
  animation: ctmVfx2InfernoEmberRise 1.0s ease-in infinite;
  border-radius: 0 0 4px 4px;
  z-index: -1;
  pointer-events: none;
}
.name-vfx-loot-inferno::after {
  content: "";
  position: absolute; left: -8px; right: -8px; bottom: -5px;
  height: 30px;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,120,0,.5) 0%, rgba(255,50,0,.2) 40%, transparent 70%);
  animation: ctmVfx2InfernoEmberB 1.3s ease-in .4s infinite;
  z-index: -1;
  pointer-events: none;
}

/* ---- EVENT HORIZON (blackhole) — per-letter gravitational spaghettification ---- */
@keyframes ctmVfx2BhLetterPull {
  0%,100% { transform: scaleX(1) scaleY(1) translateY(0); text-shadow: 0 0 4px #6a3aff, 0 0 10px rgba(50,0,100,.6); opacity: 1; filter: brightness(1); }
  18%     { transform: scaleX(1.12) scaleY(.88) translateY(1px); text-shadow: 0 0 8px #9b5aff, 0 0 16px #3a0a8a; opacity: .9; }
  35%     { transform: scaleX(.82) scaleY(1.18) translateY(-2px); text-shadow: 0 0 14px #c77dff, 0 0 24px #1a0048; opacity: .8; filter: brightness(.85); }
  50%     { transform: scaleX(.55) scaleY(1.35) translateY(-3px); text-shadow: 0 0 20px #7df0ff, 0 0 32px #0a0028; opacity: .65; filter: brightness(.7); }
  60%     { transform: scaleX(.7) scaleY(1.2) translateY(-2px); opacity: .75; }
  75%     { transform: scaleX(.9) scaleY(1.06) translateY(-1px); text-shadow: 0 0 10px #9b5aff; opacity: .88; filter: brightness(.9); }
}
@keyframes ctmVfx2BhAccretion {
  0%   { transform: rotate(0deg) scaleX(2.4) scaleY(.3); opacity: .5; border-color: rgba(155,90,255,.7); }
  50%  { transform: rotate(180deg) scaleX(2.4) scaleY(.3); opacity: .18; border-color: rgba(125,240,255,.35); }
  100% { transform: rotate(360deg) scaleX(2.4) scaleY(.3); opacity: .5; border-color: rgba(155,90,255,.7); }
}
@keyframes ctmVfx2BhInfallMote {
  0%   { transform: translate(80px,0) scale(1); z-index: 3; opacity: .9; }
  25%  { transform: translate(0,-14px) scale(.76); z-index: 3; opacity: .8; }
  50%  { transform: translate(-55px,0) scale(.44); z-index: -1; opacity: .4; }
  75%  { transform: translate(0,14px) scale(.76); z-index: -1; opacity: .6; }
  100% { transform: translate(80px,0) scale(1); z-index: 3; opacity: .9; }
}
.name-vfx-loot-blackhole {
  font-weight: 800; isolation: isolate; position: relative; z-index: 0; display: inline-block;
}
.name-vfx-loot-blackhole > * { position: relative; z-index: 2; }
.name-vfx-loot-blackhole .ctm-nl {
  animation: ctmVfx2BhLetterPull 2.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.14s);
  transform-origin: center center;
  will-change: transform, opacity, text-shadow, filter;
}
.name-vfx-loot-blackhole::before {
  content: "";
  position: absolute; left: 50%; top: 50%; margin: -4px 0 0 -4px;
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid rgba(155,90,255,.7);
  animation: ctmVfx2BhAccretion 2.8s linear infinite;
  pointer-events: none; z-index: -1;
}
.name-vfx-loot-blackhole::after {
  content: "";
  position: absolute; left: 50%; top: 50%; margin: -3px 0 0 -3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle, #7df0ff 0%, #6a3aff 50%, transparent 80%);
  box-shadow: 0 0 8px #9b5aff, 0 0 16px #3a0a8a;
  animation: ctmVfx2BhInfallMote 3.1s linear infinite;
  z-index: 3;
  pointer-events: none;
}

/* ---- CELESTINE HALO — per-letter divine ascension + gold-shimmer halo ---- */
@keyframes ctmVfx2CelestineLetter {
  0%,100% {
    color: #ffd24a; text-shadow: 0 0 4px rgba(255,210,74,.5);
    transform: translateY(0) rotateX(0deg); opacity: 1; filter: brightness(1);
  }
  15%     {
    color: #ffe87a; text-shadow: 0 0 8px #ffd24a, 0 0 14px rgba(255,240,160,.6);
    transform: translateY(-3px) rotateX(10deg); filter: brightness(1.1);
  }
  30%     {
    color: #ffffff; text-shadow: 0 0 14px #fff, 0 0 22px #ffd24a, 0 0 32px rgba(255,200,80,.6);
    transform: translateY(-5px) rotateX(20deg) scale(1.08); filter: brightness(1.25);
  }
  50%     {
    color: #fffbe0; text-shadow: 0 0 10px #fff, 0 0 18px #ffd24a, 0 0 26px rgba(255,220,100,.5);
    transform: translateY(-4px) rotateX(12deg) scale(1.05); filter: brightness(1.18);
  }
  70%     {
    color: #ffe87a; text-shadow: 0 0 6px #ffd24a, 0 0 12px rgba(255,200,80,.4);
    transform: translateY(-1px) rotateX(4deg) scale(1.02); filter: brightness(1.08);
  }
}
@keyframes ctmVfx2CelestineHalo {
  0%,100% { transform: scale(1); opacity: .35; box-shadow: 0 0 12px 4px rgba(255,210,74,.35), 0 0 30px 8px rgba(255,240,160,.15); }
  30%     { transform: scale(1.15); opacity: .18; box-shadow: 0 0 20px 8px rgba(255,230,100,.5), 0 0 48px 14px rgba(255,250,200,.2); }
  60%     { transform: scale(1.06); opacity: .28; box-shadow: 0 0 16px 6px rgba(255,220,80,.4), 0 0 38px 10px rgba(255,240,160,.18); }
}
@keyframes ctmVfx2CelestineRay {
  0%,75%,100% { opacity: 0; transform: scaleX(0) translateY(-12px) rotate(-2deg); transform-origin: center center; }
  78%          { opacity: .65; transform: scaleX(1.2) translateY(-8px) rotate(0deg); }
  83%,88%      { opacity: 0; transform: scaleX(.5) translateY(-5px) rotate(1deg); }
  85%          { opacity: .3; transform: scaleX(.9) translateY(-6px); }
}
.name-vfx-loot-celestine {
  font-weight: 800; isolation: isolate; position: relative; z-index: 0; display: inline-block;
}
.name-vfx-loot-celestine > * { position: relative; z-index: 2; }
.name-vfx-loot-celestine .ctm-nl {
  color: #ffd24a;
  -webkit-text-fill-color: initial;
  animation: ctmVfx2CelestineLetter 2.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.15s);
  will-change: transform, color, text-shadow, filter;
  transform-origin: bottom center;
}
.name-vfx-loot-celestine::before {
  content: "";
  position: absolute; left: 50%; top: 50%; margin: -10px 0 0 -30px;
  width: 60px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(255,210,74,.5);
  animation: ctmVfx2CelestineHalo 3.2s ease-in-out infinite;
  z-index: -1; pointer-events: none;
}
.name-vfx-loot-celestine::after {
  content: "";
  position: absolute; left: 10%; right: 10%; top: -4px; height: 6px;
  background: linear-gradient(90deg, transparent, rgba(255,240,180,.7) 30%, rgba(255,255,220,.95) 50%, rgba(255,240,180,.7) 70%, transparent);
  border-radius: 3px;
  filter: blur(2px);
  animation: ctmVfx2CelestineRay 4.5s ease-in-out infinite;
  z-index: 10; pointer-events: none;
}

/* ---- GALAXY SWIRL — per-letter cosmic tornado, letter-by-letter vortex rotation ---- */
@keyframes ctmVfx2GalaxyLetter {
  0%,100% {
    transform: rotate(0deg) translateX(0) scale(1);
    text-shadow: 0 0 6px #9b5aff, 0 0 12px #4aa3ff;
    filter: hue-rotate(0deg) brightness(1);
  }
  20%     {
    transform: rotate(-8deg) translateX(-1px) scale(1.08);
    text-shadow: 0 0 10px #ff7de0, 0 0 18px #7df0ff;
    filter: hue-rotate(40deg) brightness(1.12);
  }
  40%     {
    transform: rotate(6deg) translateX(1px) scale(.94);
    text-shadow: 0 0 14px #ffd24a, 0 0 22px #9b5aff;
    filter: hue-rotate(90deg) brightness(1.18);
  }
  60%     {
    transform: rotate(-4deg) translateX(-2px) scale(1.04);
    text-shadow: 0 0 12px #7df0ff, 0 0 20px #c77dff;
    filter: hue-rotate(150deg) brightness(1.1);
  }
  80%     {
    transform: rotate(3deg) translateX(1px) scale(.97);
    text-shadow: 0 0 8px #9b5aff, 0 0 16px #4aa3ff;
    filter: hue-rotate(220deg) brightness(1.05);
  }
}
@keyframes ctmVfx2GalaxyOrbitA {
  0%   { transform: translate(108px,0)  scale(1.1);  z-index: 3; opacity: .9; }
  25%  { transform: translate(0,-18px) scale(.78); z-index: 3; opacity: .8; }
  50%  { transform: translate(-108px,0) scale(.5);  z-index: -1; opacity: .4; }
  75%  { transform: translate(0,18px)  scale(.78); z-index: -1; opacity: .6; }
  100% { transform: translate(108px,0)  scale(1.1);  z-index: 3; opacity: .9; }
}
@keyframes ctmVfx2GalaxyOrbitB {
  0%   { transform: translate(0,-80px) scale(.9);  z-index: 3; opacity: .7; }
  25%  { transform: translate(72px,0)  scale(1.05); z-index: 3; opacity: .9; }
  50%  { transform: translate(0,80px)  scale(.9);  z-index: -1; opacity: .5; }
  75%  { transform: translate(-72px,0) scale(.6);  z-index: -1; opacity: .35; }
  100% { transform: translate(0,-80px) scale(.9);  z-index: 3; opacity: .7; }
}
.name-vfx-loot-galaxy {
  font-weight: 800; isolation: isolate; position: relative; z-index: 0; display: inline-block;
}
.name-vfx-loot-galaxy > * { position: relative; z-index: 2; }
.name-vfx-loot-galaxy .ctm-nl {
  animation: ctmVfx2GalaxyLetter 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.16s);
  will-change: transform, text-shadow, filter;
  transform-origin: center center;
}
.name-vfx-loot-galaxy::before {
  content: "\2727";
  position: absolute; left: 50%; top: 50%; margin: -5px 0 0 -4px;
  font-size: 9px; color: #fff;
  filter: drop-shadow(0 0 5px #9b5aff);
  animation: ctmVfx2GalaxyOrbitA 3.6s linear infinite;
  pointer-events: none;
}
.name-vfx-loot-galaxy::after {
  content: "\2605";
  position: absolute; left: 50%; top: 50%; margin: -5px 0 0 -4px;
  font-size: 8px; color: #ff7de0;
  filter: drop-shadow(0 0 4px #c77dff);
  animation: ctmVfx2GalaxyOrbitB 5.2s linear -1.3s infinite;
  pointer-events: none;
}

/* Arcane Runes — orbiting glyphs + periodic arcane flare pulse */
@keyframes ctmVfxRuneFlare {
  0%,100% { text-shadow: 0 0 7px rgba(182,109,255,.55); filter: brightness(1); }
  25%     { text-shadow: 0 0 12px rgba(210,163,255,.85), 0 0 22px rgba(160,80,255,.4); filter: brightness(1.1); }
  50%     { text-shadow: 0 0 16px rgba(220,180,255,.95), 0 0 30px rgba(180,90,255,.5); filter: brightness(1.18); }
  75%     { text-shadow: 0 0 10px rgba(200,140,255,.7); filter: brightness(1.06); }
}
.name-vfx-loot-runes {
  animation: ctmVfxRuneFlare 2.6s ease-in-out infinite;
  isolation: isolate; position: relative; z-index: 0;
}
.name-vfx-loot-runes > * { position: relative; z-index: 2; }
.name-vfx-loot-runes::before { content: "\16A0"; position: absolute; left: 50%; top: 50%; margin: -6px 0 0 -4px; font-size: 10px; color: #d0a3ff; filter: drop-shadow(0 0 4px #9b5aff); animation: ctmRuneSummon 3.2s ease-out infinite; }
.name-vfx-loot-runes::after  { content: "\16B1"; position: absolute; left: 50%; top: 50%; margin: -6px 0 0 -4px; font-size: 10px; color: #b66dff; filter: drop-shadow(0 0 4px #7040cc); animation: ctmRuneSummon 3.2s ease-out -1.6s infinite; }

/* ============================================================================================
   ONE-IN-A-MILLION NAME VFX — "Event Singularity"
   The ultimate: orbiting wide rings (ctmNameOrbitWide), prismatic aura, name levitating,
   periodic reality-bend warp. Clearly out-classes everything above.
   ============================================================================================ */
@keyframes ctmMillionAura { 0%,100% { text-shadow: 0 0 8px rgba(125,240,255,.6), 0 0 16px rgba(155,90,255,.4); } 50% { text-shadow: 0 0 16px rgba(255,255,255,.9), 0 0 28px rgba(255,125,224,.6), 0 0 40px rgba(125,240,255,.5); } }
@keyframes ctmVfxMillionFloat {
  0%,100% { transform: translateY(0) skewX(0deg); filter: brightness(1); }
  20%     { transform: translateY(-2px) skewX(.3deg); filter: brightness(1.05); }
  40%     { transform: translateY(-3px) skewX(-.2deg); filter: brightness(1.1); }
  60%     { transform: translateY(-1.5px) skewX(.4deg); filter: brightness(1.07); }
  80%     { transform: translateY(-2.5px) skewX(-.3deg); filter: brightness(1.04); }
}
@keyframes ctmVfxRealityBend {
  0%,85%,100% { transform: skewX(0deg) skewY(0deg) scaleX(1); }
  87%         { transform: skewX(1.5deg) skewY(.5deg) scaleX(1.01); }
  89%         { transform: skewX(-1deg) skewY(-.3deg) scaleX(.99); }
  91%         { transform: skewX(.8deg) skewY(.2deg) scaleX(1.01); }
  93%         { transform: skewX(0deg) skewY(0deg) scaleX(1); }
}
.name-vfx-million {
  position: relative; display: inline-block; font-weight: 800;
  background: linear-gradient(90deg, #ffffff, #7df0ff, #9b5aff, #ff7de0, #ffd64a, #7df0ff, #ffffff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 500% 100%;
  animation: ctmRainbow 2.4s linear infinite, ctmMillionAura 1.8s ease-in-out infinite, ctmVfxMillionFloat 3.2s ease-in-out infinite, ctmVfxRealityBend 5s linear infinite;
  isolation: isolate; z-index: 0;
}
.name-vfx-million::before { content: "\1F30C"; position: absolute; left: 50%; top: 50%; margin: -7px 0 0 -7px; font-size: 12px; filter: drop-shadow(0 0 6px #7df0ff); animation: ctmCosmosSpiral 5s ease-in-out infinite; }
.name-vfx-million::after  { content: "\1F4AB"; position: absolute; left: 50%; top: 50%; margin: -6px 0 0 -6px; font-size: 10px; filter: drop-shadow(0 0 6px #ff7de0); animation: ctmCosmosSpiral 5s ease-in-out -2.5s infinite; }

/* ===========================================================================
   FREE JOKE COSMETICS — "30% Extra Brain" matching set (always unlocked)
   Name color, name VFX, and title VFX all share the smug big-brain green.
   =========================================================================== */
/* Name color: bouncy genius-green wobble (own keyframe, never shares ctmShimmerBg) */
@keyframes ctmBrainGlow { 0%,100% { text-shadow: 0 0 6px rgba(57,255,140,.5); } 50% { text-shadow: 0 0 14px rgba(57,255,140,.9); } }
@keyframes ctmNcBrainWobble {
  0%,100% { transform: translateY(0)     skewX(0deg);    background-position: 0% 50%;   }
  15%     { transform: translateY(-2px)  skewX(1.5deg);  background-position: 30% 50%;  }
  30%     { transform: translateY(0)     skewX(0deg);    background-position: 60% 50%;  }
  45%     { transform: translateY(-1px)  skewX(-1.5deg); background-position: 90% 50%;  }
  60%     { transform: translateY(0)     skewX(0deg);    background-position: 120% 50%; }
  75%     { transform: translateY(-2px)  skewX(1deg);    background-position: 150% 50%; }
}
.name-color-brain30 {
  background: linear-gradient(90deg, #2bd672, #39ff8c, #d6ffe6, #39ff8c, #2bd672);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 300% 100%; animation: ctmNcBrainWobble 3.2s ease-in-out infinite, ctmBrainGlow 2s ease-in-out infinite;
  font-weight: 800;
}
/* Name VFX: brain pulse + orbiting brain emoji — bespoke unique motion */
@keyframes ctmVfxBrainPulse {
  0%,100% { filter: drop-shadow(0 0 3px #39ff8c) brightness(1); transform: scale(1); }
  20%     { filter: drop-shadow(0 0 7px #39ff8c) brightness(1.1); transform: scale(1.03); }
  40%     { filter: drop-shadow(0 0 4px #39ff8c) brightness(1.02); transform: scale(1); }
  55%     { filter: drop-shadow(0 0 12px #aaffd0) brightness(1.22); transform: scale(1.06); }
  70%     { filter: drop-shadow(0 0 5px #39ff8c) brightness(1.05); transform: scale(1.01); }
}
.name-vfx-brainwave { position: relative; display: inline-block; animation: ctmVfxBrainPulse 2.4s ease-in-out infinite; isolation: isolate; z-index: 0; }
.name-vfx-brainwave > * { position: relative; z-index: 2; }
.name-vfx-brainwave::before { content: "\1F9E0"; position: absolute; left: 50%; top: 50%; margin: -6px 0 0 -6px; font-size: 9px; animation: ctmBrainSynapse 1.6s steps(1,end) infinite; }
.name-vfx-brainwave::after  { content: "\2728"; position: absolute; left: 50%; top: 50%; margin: -6px 0 0 -6px; font-size: 7px; color: #39ff8c; animation: ctmBrainSynapse 1.6s steps(1,end) -0.8s infinite; }
/* Title VFX: matching big-brain green shimmer for the equipped title text */
.title-vfx-brainwave {
  background: linear-gradient(90deg, #2bd672, #39ff8c, #d6ffe6, #39ff8c, #2bd672);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 300% 100%; animation: ctmShimmerBg 3s linear infinite, ctmBrainGlow 2s ease-in-out infinite;
  font-weight: 800;
}

/* ===========================================================================
   SHARED "ORBIT AROUND THE NAME" MOTION
   The old orbit keyframes spun particles on a tiny ~15px radius centered on the
   name, so they passed straight THROUGH the letters. These wide elliptical
   paths swing the particle out past the sides of the name (large X radius) and
   only a little above/below (small Y radius), and toggle z-index so the body
   tucks BEHIND the text on the far half of the orbit and in FRONT on the near
   half — a believable 3D orbit that never cuts across the letters.
   X radius (~100px) comfortably clears typical usernames so the particle swings
   OUT past the sides; combined with the behind-text depth, even longer names
   read as "orbited" rather than crossed.
   =========================================================================== */
@keyframes ctmNameOrbit {
  0%   { transform: translate(102px, 0)   scale(1);   z-index: 3; }
  25%  { transform: translate(0, -17px)   scale(.78); z-index: 3; }
  50%  { transform: translate(-102px, 0)  scale(.58); z-index: -1; }
  75%  { transform: translate(0, 17px)    scale(.78); z-index: -1; }
  100% { transform: translate(102px, 0)   scale(1);   z-index: 3; }
}
/* Wider, slightly taller path for the million-tier showpiece */
@keyframes ctmNameOrbitWide {
  0%   { transform: translate(116px, 0)   scale(1.05) rotate(0deg);   z-index: 3; }
  25%  { transform: translate(0, -22px)   scale(.82) rotate(90deg);   z-index: 3; }
  50%  { transform: translate(-116px, 0)  scale(.56) rotate(180deg);  z-index: -1; }
  75%  { transform: translate(0, 22px)    scale(.82) rotate(270deg);  z-index: -1; }
  100% { transform: translate(116px, 0)   scale(1.05) rotate(360deg); z-index: 3; }
}
/* Gravitational pull-in path — radius shrinks toward the core on the far side */
@keyframes ctmNameOrbitPull {
  0%   { transform: translate(98px, 0)    scale(1);  z-index: 3; }
  25%  { transform: translate(0, -15px)   scale(.78); z-index: 3; }
  50%  { transform: translate(-66px, 0)   scale(.48); z-index: -1; }
  75%  { transform: translate(0, 15px)    scale(.78); z-index: -1; }
  100% { transform: translate(98px, 0)    scale(1);  z-index: 3; }
}

/* ===== Unique per-VFX motions (replace shared orbit on brainwave/lilpup/runes/votm/million) ===== */

/* brainwave: nervous electric synapse jitter — darts between firing points, never a smooth circle */
@keyframes ctmBrainSynapse {
  0%   { transform: translate(48px, -10px)  scale(1)   rotate(0deg);   opacity: 1; }
  12%  { transform: translate(40px, 8px)    scale(.55) rotate(0deg);   opacity: .5; }
  20%  { transform: translate(-30px, 14px)  scale(1.1)  rotate(0deg);  opacity: 1; }
  34%  { transform: translate(-46px, -6px)  scale(.6)  rotate(0deg);   opacity: .55; }
  46%  { transform: translate(10px, -18px)  scale(1.15) rotate(0deg);  opacity: 1; }
  58%  { transform: translate(44px, 4px)    scale(.5)  rotate(0deg);   opacity: .45; }
  70%  { transform: translate(-12px, 16px)  scale(1.1)  rotate(0deg);  opacity: 1; }
  82%  { transform: translate(-42px, -12px) scale(.6)  rotate(0deg);   opacity: .55; }
  100% { transform: translate(48px, -10px)  scale(1)   rotate(0deg);   opacity: 1; }
}

/* lilpup: paws trot left-to-right in a bouncing walk loop with a hop arc, then wrap around */
@keyframes ctmPawTrot {
  0%   { transform: translate(-56px, 6px)  rotate(-12deg) scale(.9); opacity: 0; }
  8%   { transform: translate(-46px, 2px)  rotate(-8deg)  scale(1);  opacity: 1; }
  25%  { transform: translate(-22px, -6px) rotate(6deg)   scale(1);  opacity: 1; }
  42%  { transform: translate(4px, 4px)    rotate(-6deg)  scale(1);  opacity: 1; }
  60%  { transform: translate(30px, -7px)  rotate(8deg)   scale(1);  opacity: 1; }
  78%  { transform: translate(52px, 3px)   rotate(-6deg)  scale(1);  opacity: 1; }
  92%  { transform: translate(60px, 5px)   rotate(10deg)  scale(.92); opacity: 0; }
  100% { transform: translate(-56px, 6px)  rotate(-12deg) scale(.9); opacity: 0; }
}

/* loot-runes: runes spiral outward from the core, growing and fading like a summoning ring */
@keyframes ctmRuneSummon {
  0%   { transform: rotate(0deg) translateX(8px)  rotate(0deg)    scale(.4); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: rotate(320deg) translateX(58px) rotate(-320deg) scale(1.2); opacity: 0; }
}

/* votm crown: slow majestic figure-8 (lemniscate) — regal, sweeping, never a plain ring */
@keyframes ctmCrownReign {
  0%   { transform: translate(0, 0)        scale(1);   z-index: 3; }
  12.5%{ transform: translate(58px, -16px) scale(1.1); z-index: 3; }
  25%  { transform: translate(82px, 0)     scale(.7);  z-index: -1; }
  37.5%{ transform: translate(58px, 16px)  scale(1.1); z-index: 3; }
  50%  { transform: translate(0, 0)        scale(1);   z-index: 3; }
  62.5%{ transform: translate(-58px, -16px) scale(1.1); z-index: 3; }
  75%  { transform: translate(-82px, 0)    scale(.7);  z-index: -1; }
  87.5%{ transform: translate(-58px, 16px) scale(1.1); z-index: 3; }
  100% { transform: translate(0, 0)        scale(1);   z-index: 3; }
}

/* votm clock: stepped ticking orbit — snaps between hour positions like a watch hand */
@keyframes ctmClockTick {
  0%,7%    { transform: translate(0, -64px)   scale(1);  z-index: 3; }
  8.33%,15%{ transform: translate(32px, -55px) scale(.92); z-index: 3; }
  16.66%,24%{ transform: translate(55px, -32px) scale(.85); z-index: 3; }
  25%,32%  { transform: translate(64px, 0)    scale(.8);  z-index: -1; }
  33.3%,40%{ transform: translate(55px, 32px) scale(.85); z-index: -1; }
  41.6%,49%{ transform: translate(32px, 55px) scale(.92); z-index: -1; }
  50%,57%  { transform: translate(0, 64px)    scale(1);  z-index: -1; }
  58.3%,65%{ transform: translate(-32px, 55px) scale(.92); z-index: -1; }
  66.6%,74%{ transform: translate(-55px, 32px) scale(.85); z-index: -1; }
  75%,82%  { transform: translate(-64px, 0)   scale(.8);  z-index: -1; }
  83.3%,90%{ transform: translate(-55px, -32px) scale(.85); z-index: 3; }
  91.6%,99%{ transform: translate(-32px, -55px) scale(.92); z-index: 3; }
  100%     { transform: translate(0, -64px)   scale(1);  z-index: 3; }
}

/* million: gravitational cosmos spiral — radius collapses inward then flings back out, with spin */
@keyframes ctmCosmosSpiral {
  0%   { transform: rotate(0deg)   translateX(120px) rotate(0deg)    scale(1.1); z-index: 3; }
  35%  { transform: rotate(180deg) translateX(40px)  rotate(-180deg) scale(.55); z-index: -1; }
  55%  { transform: rotate(280deg) translateX(18px)  rotate(-280deg) scale(.42); z-index: -1; }
  75%  { transform: rotate(420deg) translateX(72px)  rotate(-420deg) scale(.8);  z-index: 3; }
  100% { transform: rotate(720deg) translateX(120px) rotate(-720deg) scale(1.1); z-index: 3; }
}
/* Make the name text its own stacking layer so the "behind" (z-index:-1) half of
   an orbit truly hides behind the glyphs, while the wrapper stays transparent. */
.name-vfx-loot-galaxy, .name-vfx-loot-runes, .name-vfx-loot-celestine,
.name-vfx-loot-blackhole, .name-vfx-million, .name-vfx-brainwave {
  position: relative; z-index: 0; isolation: isolate;
}
.name-vfx-loot-galaxy > *, .name-vfx-loot-runes > *, .name-vfx-loot-celestine > *,
.name-vfx-loot-blackhole > *, .name-vfx-million > *, .name-vfx-brainwave > * {
  position: relative; z-index: 2;
}

/* ===========================================================================
   TITLE VFX — PART A: NEW UNIQUE LOOT TITLE CLASSES
   Each loot title that previously shared an achievement class now gets its own
   unique class with a distinct color palette and unique motion.
   Rarity scaling: uncommon → rare → epic → legendary
   =========================================================================== */

/* --- UNCOMMON LOOT TITLES --- */

/* loot_miner — Deep Miner: slate-grey with faint orange spark flicker */
@keyframes ctmTitleDeepStonePulse {
  0%,100% { text-shadow: 0 0 3px rgba(160,148,132,.5), 0 0 6px rgba(255,130,40,.15); }
  50%      { text-shadow: 0 0 7px rgba(180,165,145,.8), 0 0 14px rgba(255,140,50,.4); }
}
.title-vfx-deepstone {
  color: #a8988a;
  text-shadow: 0 0 4px rgba(168,152,138,.5);
  animation: ctmTitleDeepStonePulse 2.4s ease-in-out infinite;
  font-weight: 600;
}

/* loot_tinkerer — Tinkerer: copper-orange with gear-spark glint */
@keyframes ctmTitleGearSpark {
  0%,85%,100% { text-shadow: 0 0 4px rgba(205,100,30,.4); letter-spacing: 0; }
  90%          { text-shadow: 0 0 10px rgba(255,180,80,.9), 0 0 18px rgba(255,100,30,.5); letter-spacing: .3px; }
  93%          { text-shadow: 0 0 4px rgba(205,100,30,.4); letter-spacing: 0; }
}
.title-vfx-gearspark {
  color: #e07a2a;
  text-shadow: 0 0 4px rgba(224,122,42,.4);
  animation: ctmTitleGearSpark 3.2s linear infinite;
  font-weight: 600;
}

/* loot_minstrel — Minstrel: warm rose-gold gentle shimmer + slow drift */
@keyframes ctmTitleSerenadeDrift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.title-vfx-serenade {
  background: linear-gradient(90deg, #f0a0b8, #ffd0e0, #d0709a, #f0a0b8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 100%;
  animation: ctmTitleSerenadeDrift 4.2s linear infinite;
  font-weight: 600;
}

/* loot_scout — Scout: electric-lime speed-dash streaks */
@keyframes ctmTitleTrailwind {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes ctmTitleTrailwindGlow {
  0%,100% { text-shadow: 0 0 4px rgba(160,230,50,.4); }
  50%      { text-shadow: 0 0 10px rgba(180,255,60,.7), 0 0 18px rgba(120,200,20,.4); }
}
.title-vfx-trailwind {
  background: linear-gradient(90deg, #8ae820, #d6ff6a, #b4e838, #8ae820);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 100%;
  animation: ctmTitleTrailwind 1.8s linear infinite, ctmTitleTrailwindGlow 1.6s ease-in-out infinite;
  font-weight: 600;
}

/* loot_brewer — Master Brewer: warm amber-brown frothy brew shimmer */
@keyframes ctmTitleBrewFroth {
  0%,100% { text-shadow: 0 0 4px rgba(220,140,40,.35), 0 0 8px rgba(150,60,20,.2); }
  50%      { text-shadow: 0 0 10px rgba(240,170,60,.65), 0 0 18px rgba(180,80,20,.35); }
}
.title-vfx-brewfroth {
  background: linear-gradient(90deg, #c97c2a, #f2c060, #e08030, #c97c2a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 100%;
  animation: ctmShimmerBg 3.6s linear infinite, ctmTitleBrewFroth 2.2s ease-in-out infinite;
  font-weight: 600;
}

/* loot_scholar — Scholar: deep ink-blue with glowing arcane shimmer */
@keyframes ctmTitleInkGlow {
  0%,100% { text-shadow: 0 0 4px rgba(80,100,220,.4), 0 0 8px rgba(40,60,180,.2); filter: brightness(1); }
  50%      { text-shadow: 0 0 10px rgba(120,140,255,.7), 0 0 18px rgba(80,100,220,.4); filter: brightness(1.15); }
}
.title-vfx-inkglow {
  color: #8090e8;
  animation: ctmTitleInkGlow 2.8s ease-in-out infinite;
  font-weight: 600;
}

/* --- RARE LOOT TITLES --- */

/* loot_nightowl — Night Owl: deep indigo dusk with moonlit feather shimmer */
@keyframes ctmTitleMoonfeather {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes ctmTitleMoonfeatherGlow {
  0%,100% { text-shadow: 0 0 5px rgba(100,80,200,.4), 0 0 10px rgba(30,20,80,.3); }
  50%      { text-shadow: 0 0 12px rgba(200,190,255,.7), 0 0 22px rgba(100,80,200,.5); }
}
.title-vfx-moonfeather {
  position: relative; display: inline-block; overflow: visible;
  background: linear-gradient(90deg, #3a2a70, #b0a0ff, #ffe8c8, #b0a0ff, #3a2a70);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 300% 100%;
  animation: ctmTitleMoonfeather 5s ease-in-out infinite, ctmTitleMoonfeatherGlow 3.5s ease-in-out infinite;
  font-weight: 600;
}
.title-vfx-moonfeather::after {
  content: "\2022";
  position: absolute;
  right: -10px; top: -4px;
  font-size: 7px;
  color: rgba(200,190,255,.8);
  animation: ctmTitleTrailwindGlow 2s ease-in-out .5s infinite;
}

/* --- EPIC LOOT TITLES --- */

/* loot_collector — The Collector: deep vault-gold with crystalline facet glint */
@keyframes ctmTitleVaultGlint {
  0%,80%,100% { filter: brightness(1); }
  85%           { filter: brightness(1.6) drop-shadow(0 0 4px rgba(255,235,160,.8)); }
  90%           { filter: brightness(1); }
  95%           { filter: brightness(1.4) drop-shadow(0 0 3px rgba(255,215,100,.6)); }
}
@keyframes ctmTitleVaultPulse {
  0%,100% { text-shadow: 0 0 6px rgba(200,160,60,.5), 0 0 12px rgba(150,110,30,.3); }
  50%      { text-shadow: 0 0 14px rgba(255,210,90,.8), 0 0 26px rgba(200,150,50,.5); }
}
.title-vfx-vault {
  position: relative; display: inline-block; overflow: visible;
  background: linear-gradient(90deg, #c8a040, #ffe89a, #d4b460, #fff8d8, #c8a040);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 300% 100%;
  animation: ctmShimmerBg 3s linear infinite, ctmTitleVaultPulse 2s ease-in-out infinite, ctmTitleVaultGlint 5s linear infinite;
  font-weight: 700;
}
.title-vfx-vault::before {
  content: "\2726";
  position: absolute;
  left: -12px; top: -3px;
  font-size: 8px;
  color: rgba(255,215,100,.7);
  animation: ctmLootStarTwinkle 2.4s ease-in-out infinite;
}

/* loot_pyromancer — Pyromancer: magma red-orange inferno burst */
@keyframes ctmTitlePyreburst {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes ctmTitlePyreGlow {
  0%,100% { text-shadow: 0 0 6px rgba(255,60,10,.5), 0 0 12px rgba(200,30,0,.3); }
  50%      { text-shadow: 0 0 16px rgba(255,120,20,.9), 0 0 28px rgba(255,60,0,.6), 0 0 40px rgba(200,10,0,.3); }
}
.title-vfx-pyreburst {
  position: relative; display: inline-block; overflow: visible;
  background: linear-gradient(90deg, #ff2a00, #ff7a20, #ff4500, #ffb040, #ff2a00);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 250% 100%;
  animation: ctmTitlePyreburst 2s linear infinite, ctmTitlePyreGlow 1.4s ease-in-out infinite;
  font-weight: 700;
}
.title-vfx-pyreburst::after {
  content: "\1F525";
  position: absolute;
  right: -12px; bottom: -4px;
  font-size: 8px;
  animation: ctmLootEmberDrift 1.8s ease-in infinite;
}

/* loot_stormcaller — Storm Caller: electric storm-blue with crackling discharge */
@keyframes ctmTitleTempest {
  0%,88%,100% { text-shadow: 0 0 4px rgba(100,200,255,.5); color: #a0d8ff; }
  90%          { text-shadow: 0 0 20px #fff, 0 0 34px #4ab8ff, 0 0 50px #0088cc; color: #fff; }
  93%          { text-shadow: 0 0 4px rgba(100,200,255,.5); color: #a0d8ff; }
  96%          { text-shadow: 0 0 15px #fff, 0 0 26px #4ab8ff; color: #ddf2ff; }
}
.title-vfx-tempest {
  position: relative; display: inline-block; overflow: visible;
  color: #a0d8ff;
  animation: ctmTitleTempest 2.8s linear infinite;
  font-weight: 700;
}
.title-vfx-tempest::before {
  content: "\26A1";
  position: absolute;
  left: -11px; top: -3px;
  font-size: 8px;
  color: rgba(180,230,255,.8);
  animation: ctmLootBoltFlash 2.2s linear .4s infinite;
}

/* --- LEGENDARY LOOT TITLE --- */

/* loot_dragonborn — Dragonborn: multi-color wyrm-fire animated gradient + rising embers */
@keyframes ctmTitleWyrmfire {
  0%   { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}
@keyframes ctmTitleWyrmGlow {
  0%,100% { filter: brightness(1) drop-shadow(0 0 4px rgba(200,80,255,.4)); }
  33%      { filter: brightness(1.2) drop-shadow(0 0 10px rgba(255,80,180,.6)); }
  66%      { filter: brightness(1.15) drop-shadow(0 0 8px rgba(80,255,220,.5)); }
}
.title-vfx-wyrmfire {
  position: relative; display: inline-block; overflow: visible;
  background: linear-gradient(90deg, #ff2080, #ff8040, #ffe040, #40ffe0, #8040ff, #ff2080, #ff8040);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 400% 100%;
  animation: ctmTitleWyrmfire 4s linear infinite, ctmTitleWyrmGlow 2.6s ease-in-out infinite;
  font-weight: 800;
}
.title-vfx-wyrmfire::before {
  content: "\1F525";
  position: absolute;
  left: -12px; bottom: -3px;
  font-size: 9px;
  animation: ctmLootEmberDrift 1.6s ease-in .2s infinite;
}
.title-vfx-wyrmfire::after {
  content: "\2728";
  position: absolute;
  right: -12px; top: -4px;
  font-size: 8px;
  color: #ff60e0;
  animation: ctmLootStarTwinkle 1.9s ease-in-out .7s infinite;
}


/* ===========================================================================
   TITLE VFX — PART B: COMMON LOOT TITLE SUBTLE EFFECTS
   Each common loot title gets its own faint-but-unique glow or slow shimmer.
   NO particles — commons are understated. Each is a different color.
   =========================================================================== */

/* loot_regular — The Regular: warm amber tavern-candle glow */
@keyframes ctmTitleCRegularGlow {
  0%,100% { text-shadow: 0 0 4px rgba(220,160,40,.3); }
  50%      { text-shadow: 0 0 8px rgba(240,190,70,.55); }
}
.title-vfx-c-regular {
  color: #d4a040;
  animation: ctmTitleCRegularGlow 3.5s ease-in-out infinite;
}

/* loot_patron — Tavern Patron: cool slate-blue faint glow */
@keyframes ctmTitleCPatronGlow {
  0%,100% { text-shadow: 0 0 3px rgba(80,110,200,.25); }
  50%      { text-shadow: 0 0 7px rgba(100,140,240,.45); }
}
.title-vfx-c-patron {
  color: #7090c8;
  animation: ctmTitleCPatronGlow 4.2s ease-in-out infinite;
}

/* loot_newcomer — Newcomer: soft mint-green gentle shimmer */
@keyframes ctmTitleCNewcomerShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.title-vfx-c-newcomer {
  background: linear-gradient(90deg, #60c890, #a8e8c0, #60c890);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 100%;
  animation: ctmTitleCNewcomerShimmer 5.5s linear infinite;
}

/* loot_barfly — Barfly: muted terracotta-red slow pulse */
@keyframes ctmTitleCBarflyGlow {
  0%,100% { text-shadow: 0 0 3px rgba(200,80,50,.25); }
  50%      { text-shadow: 0 0 7px rgba(220,100,60,.45); }
}
.title-vfx-c-barfly {
  color: #c86050;
  animation: ctmTitleCBarflyGlow 3.8s ease-in-out infinite;
}

/* loot_traveler — Traveler: dusty sandy beige slow drift */
@keyframes ctmTitleCTravelerDrift {
  0%   { background-position: -100% 50%; }
  100% { background-position: 100% 50%; }
}
.title-vfx-c-traveler {
  background: linear-gradient(90deg, #b09060, #d8c090, #b09060);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 100%;
  animation: ctmTitleCTravelerDrift 6.5s linear infinite;
}

/* loot_apprentice — Apprentice: faint lavender arcane flicker */
@keyframes ctmTitleCApprenticeFlicker {
  0%,100% { text-shadow: 0 0 3px rgba(160,120,220,.25); opacity: 1; }
  45%      { opacity: .92; }
  50%      { text-shadow: 0 0 7px rgba(180,140,240,.45); opacity: 1; }
  80%      { opacity: .95; }
}
.title-vfx-c-apprentice {
  color: #a080d0;
  animation: ctmTitleCApprenticeFlicker 4.0s ease-in-out infinite;
}


/* Reduced motion: kill the loot cosmetic animations too */
@media (prefers-reduced-motion: reduce) {
  [class*="name-vfx-"]::before, [class*="name-vfx-"]::after { animation: none !important; }
  [class*="vfx-"]::before, [class*="vfx-"]::after { animation: none !important; }
  [class*="name-vfx-"], [class*="name-color-"], [class^="vfx-"], [class*=" vfx-"],
  [class*="title-vfx-"] { animation: none !important; }
}

/* ============================================================================================
   VIEWER-OF-THE-MONTH — MISSWIKI EXCLUSIVE SET (May)
   Account-gated cosmetics: badge glow, title, name color, name vfx, chat tag.
   All motions are bespoke (ctmVotm*) and do not reuse other effects' primary keyframes.
   Royal palette: pink (#ff5b9e / #ff8ec8) + gold (#ffd24a / #fff3c0).
   ============================================================================================ */

/* ---- Badge wrapper glow (gold+pink royal aura, breathing) ---- */
@keyframes ctmVotmBadgeGlow {
  0%,100% { filter: drop-shadow(0 0 6px rgba(255,210,74,.65)) drop-shadow(0 0 10px rgba(255,91,158,.4)) brightness(1.04); transform: translateY(0) scale(1); }
  50%     { filter: drop-shadow(0 0 16px rgba(255,224,138,.9)) drop-shadow(0 0 26px rgba(255,124,200,.6)) brightness(1.18); transform: translateY(-1.5px) scale(1.05); }
}
.vfx-votm-royal { animation: ctmVotmBadgeGlow 2.6s ease-in-out infinite; display: inline-block; }

/* ---- Title "Viewer of the Month · May" — royal pink↔gold gradient + crown sparkle + regal sway ---- */
@keyframes ctmTitleVotmGrad {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes ctmTitleVotmSway {
  0%,100% { transform: translateY(0) rotate(-0.6deg); }
  50%     { transform: translateY(-1.5px) rotate(0.6deg); }
}
@keyframes ctmTitleVotmGlow {
  0%,100% { text-shadow: 0 0 6px rgba(255,210,74,.5), 0 0 12px rgba(255,91,158,.35); }
  50%     { text-shadow: 0 0 14px rgba(255,224,138,.85), 0 0 26px rgba(255,124,200,.55); }
}
@keyframes ctmTitleVotmCrown {
  0%,100% { transform: translateY(0) scale(1) rotate(0deg); opacity: .9; }
  50%     { transform: translateY(-2px) scale(1.18) rotate(-8deg); opacity: 1; }
}
.title-vfx-votm {
  background: linear-gradient(100deg, #ff8ec8, #ffd24a, #fff3c0, #ff5b9e, #ffd24a, #ff8ec8);
  background-size: 280% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800; position: relative; display: inline-block;
  animation: ctmTitleVotmGrad 5s linear infinite, ctmTitleVotmSway 4.5s ease-in-out infinite, ctmTitleVotmGlow 2.8s ease-in-out infinite;
}
.title-vfx-votm::before {
  content: ""; /* jewelled gold+ruby crown (matches badge) */
  position: absolute; left: -1.55em; top: 50%; margin-top: -0.58em;
  width: 1.5em; height: 0.94em;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2040%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23fff8dd%22%2F%3E%3Cstop%20offset%3D%2250%25%22%20stop-color%3D%22%23f4c233%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%239a6a08%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22r%22%20cx%3D%2238%25%22%20cy%3D%2232%25%22%20r%3D%2275%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ffd2dd%22%2F%3E%3Cstop%20offset%3D%2230%25%22%20stop-color%3D%22%23ff4d6d%22%2F%3E%3Cstop%20offset%3D%2272%25%22%20stop-color%3D%22%23c5102f%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%237a0518%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M7%2034%20L11%2012%20L18%2024%20L26%206%20L32%2022%20L38%206%20L46%2024%20L53%2012%20L57%2034%20Z%22%20fill%3D%22url%28%23g%29%22%20stroke%3D%22%237a5306%22%20stroke-width%3D%221.2%22%20stroke-linejoin%3D%22round%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2232%22%20width%3D%2252%22%20height%3D%227%22%20rx%3D%222.4%22%20fill%3D%22url%28%23g%29%22%20stroke%3D%22%237a5306%22%20stroke-width%3D%221.2%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%2233%22%20width%3D%2250%22%20height%3D%222%22%20rx%3D%221%22%20fill%3D%22%23fff6da%22%20opacity%3D%220.6%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2235.6%22%20r%3D%222.5%22%20fill%3D%22url%28%23r%29%22%20stroke%3D%22%235e0413%22%20stroke-width%3D%220.5%22%2F%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2235.6%22%20r%3D%222.9%22%20fill%3D%22url%28%23r%29%22%20stroke%3D%22%235e0413%22%20stroke-width%3D%220.5%22%2F%3E%3Ccircle%20cx%3D%2246%22%20cy%3D%2235.6%22%20r%3D%222.5%22%20fill%3D%22url%28%23r%29%22%20stroke%3D%22%235e0413%22%20stroke-width%3D%220.5%22%2F%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%225%22%20r%3D%223.2%22%20fill%3D%22url%28%23r%29%22%20stroke%3D%22%235e0413%22%20stroke-width%3D%220.5%22%2F%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%223.2%22%20r%3D%223.6%22%20fill%3D%22url%28%23r%29%22%20stroke%3D%22%235e0413%22%20stroke-width%3D%220.5%22%2F%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%225%22%20r%3D%223.2%22%20fill%3D%22url%28%23r%29%22%20stroke%3D%22%235e0413%22%20stroke-width%3D%220.5%22%2F%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%222.4%22%20fill%3D%22url%28%23g%29%22%20stroke%3D%22%237a5306%22%20stroke-width%3D%220.6%22%2F%3E%3Ccircle%20cx%3D%2253%22%20cy%3D%2211%22%20r%3D%222.4%22%20fill%3D%22url%28%23g%29%22%20stroke%3D%22%237a5306%22%20stroke-width%3D%220.6%22%2F%3E%3Ccircle%20cx%3D%2225%22%20cy%3D%224%22%20r%3D%221%22%20fill%3D%22%23ffe1e7%22%2F%3E%3Ccircle%20cx%3D%2231%22%20cy%3D%222.2%22%20r%3D%221.1%22%20fill%3D%22%23ffe1e7%22%2F%3E%3Ccircle%20cx%3D%2237%22%20cy%3D%224%22%20r%3D%221%22%20fill%3D%22%23ffe1e7%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat; background-position: center; background-size: contain;
  filter: drop-shadow(0 0 5px rgba(255,124,200,.85));
  animation: ctmTitleVotmCrown 2.4s ease-in-out infinite;
}
.title-vfx-votm::after {
  content: "\2727"; /* sparkle */
  position: absolute; right: -0.95em; top: 0.05em;
  font-size: 0.6em; color: #fff3c0;
  -webkit-text-fill-color: #fff3c0;
  filter: drop-shadow(0 0 4px #ffd24a);
  animation: ctmTitleVotmCrown 2.4s ease-in-out -1.2s infinite;
}

/* ---- Name color "May Royalty" — pink↔gold royal sliding gradient (legible) ---- */
@keyframes ctmColorVotm {
  0%   { background-position: 0% 50%; filter: brightness(1); }
  45%  { background-position: 100% 50%; filter: brightness(1.12); }
  55%  { background-position: 100% 50%; filter: brightness(1.12); }
  100% { background-position: 0% 50%; filter: brightness(1); }
}
.name-color-votm {
  background: linear-gradient(95deg, #ffb3d9, #ff5b9e, #ffd24a, #fff3c0, #ffd24a, #ff5b9e, #ffb3d9);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800;
  animation: ctmColorVotm 4.5s ease-in-out infinite;
  text-shadow: 0 0 8px rgba(255,124,200,.25);
}

/* ---- Name VFX "Crown of Hours" — orbiting crown + clock + sparkle, royal bloom on the name ---- */
@keyframes ctmVfxVotmBloom {
  0%,100% { text-shadow: 0 0 7px rgba(255,210,74,.55), 0 0 16px rgba(255,91,158,.35); }
  50%     { text-shadow: 0 0 13px rgba(255,224,138,.9), 0 0 28px rgba(255,124,200,.6), 0 0 40px rgba(255,210,74,.3); }
}
.name-vfx-votm {
  animation: ctmVfxVotmBloom 2.8s ease-in-out infinite;
  font-weight: 800; isolation: isolate; position: relative; z-index: 0;
}
.name-vfx-votm > * { position: relative; z-index: 2; }
/* crown orbits wide */
.name-vfx-votm::before {
  content: "\265B";
  position: absolute; left: 50%; top: 50%; margin: -7px 0 0 -6px;
  font-size: 12px; color: #ffd24a;
  filter: drop-shadow(0 0 5px rgba(255,124,200,.85));
  animation: ctmCrownReign 6s ease-in-out infinite;
}
/* clock (watch hours) ticks around like a real watch hand */
.name-vfx-votm::after {
  content: "\23F1"; /* stopwatch */
  position: absolute; left: 50%; top: 50%; margin: -6px 0 0 -5px;
  font-size: 10px; color: #ff8ec8;
  filter: drop-shadow(0 0 5px #ffd24a);
  animation: ctmClockTick 7.2s steps(1,end) infinite;
}

/* ---- Chat tag next to her name everywhere ---- */
@keyframes ctmVotmTagShine {
  0%,100% { box-shadow: 0 0 4px rgba(255,210,74,.5), inset 0 0 4px rgba(255,255,255,.25); }
  50%     { box-shadow: 0 0 10px rgba(255,224,138,.85), 0 0 16px rgba(255,124,200,.5), inset 0 0 6px rgba(255,255,255,.4); }
}
.ctm-chat-tag {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 6px; padding: 1px 7px 1px 5px;
  font-size: 0.62em; font-weight: 800; line-height: 1.5;
  letter-spacing: 0.04em; white-space: nowrap;
  border-radius: 999px; vertical-align: middle;
  -webkit-text-fill-color: initial;
}
.ctm-chat-tag--votm {
  color: #4a2606;
  background: linear-gradient(100deg, #ffe9a0, #ffd24a 45%, #ffb3d9 78%, #ff8ec8);
  border: 1px solid rgba(255,124,200,.85);
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
  animation: ctmVotmTagShine 2.4s ease-in-out infinite;
}
.ctm-chat-tag--votm .ctm-chat-tag__crown {
  font-size: 1.05em; color: #b8005e; line-height: 1;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.6));
}
/* Compact VOTM/EOTM tag for the chat roster rows (online + offline) */
.ctm-chat-tag--roster {
  margin-left: 4px; padding: 0 5px 0 3px;
  font-size: 8.5px; line-height: 1.5;
  vertical-align: middle;
  flex: 0 0 auto;            /* tag never shrinks or clips */
}
/* keep name + tag together, centered, on one line; the USERNAME text
   truncates with an ellipsis so the tag and the OFFLINE chip stay visible
   even in a narrow sidebar. */
.cr-online-item__name:has(.ctm-chat-tag--roster) {
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap;
  min-width: 0; max-width: 100%;
  overflow: hidden;
}
.cr-online-item__name:has(.ctm-chat-tag--roster) > .ctm-chat-tag--roster ~ * { flex: 0 0 auto; }
/* the bare username text is wrapped at render time in .cr-online-item__uname */
.cr-online-item__uname {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cr-online-item--offline .ctm-chat-tag--roster { opacity: .92; }

/* ============================================================================================
   EMPLOYEE-OF-THE-MONTH — TEMPEST IGNEUM EXCLUSIVE SET (May)
   Account-gated cosmetics: badge glow, title, name color, name vfx, chat tag.
   Earned for tapping the MOST LIKES on stream. Theme: rapid like-spam + ember fire.
   All motions are bespoke (ctmEotm*) and do NOT reuse any other effect's keyframes.
   Ember palette: hot pink (#ff5c8a / #ff4d79) + ember orange (#ff7a59 / #ffb066) + spark gold (#ffd166).
   ============================================================================================ */

/* ---- Badge wrapper glow — rapid double-tap pulse (mimics frantic like-clicking) ---- */
@keyframes ctmEotmBadgeGlow {
  0%   { filter: drop-shadow(0 0 6px rgba(255,92,138,.6)) drop-shadow(0 0 9px rgba(255,122,89,.35)) brightness(1.04); transform: scale(1); }
  12%  { filter: drop-shadow(0 0 15px rgba(255,92,138,.95)) drop-shadow(0 0 24px rgba(255,122,89,.6)) brightness(1.2); transform: scale(1.07); }
  24%  { filter: drop-shadow(0 0 6px rgba(255,92,138,.6)) drop-shadow(0 0 9px rgba(255,122,89,.35)) brightness(1.04); transform: scale(1); }
  36%  { filter: drop-shadow(0 0 15px rgba(255,92,138,.95)) drop-shadow(0 0 24px rgba(255,122,89,.6)) brightness(1.2); transform: scale(1.07); }
  48%,100% { filter: drop-shadow(0 0 6px rgba(255,92,138,.6)) drop-shadow(0 0 9px rgba(255,122,89,.35)) brightness(1.04); transform: scale(1); }
}
.vfx-eotm-ember { animation: ctmEotmBadgeGlow 1.6s ease-in-out infinite; display: inline-block; }

/* ---- Title "Employee of the Month · May" — ember gradient + heart pop + flame flicker ---- */
@keyframes ctmTitleEotmGrad {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes ctmTitleEotmFlicker {
  0%,100% { text-shadow: 0 0 6px rgba(255,92,138,.5), 0 0 11px rgba(255,122,89,.35); }
  30%     { text-shadow: 0 0 12px rgba(255,77,121,.8), 0 0 22px rgba(255,122,89,.5); }
  55%     { text-shadow: 0 0 8px rgba(255,92,138,.6), 0 0 16px rgba(255,176,102,.45); }
  78%     { text-shadow: 0 0 14px rgba(255,77,121,.9), 0 0 26px rgba(255,209,102,.5); }
}
@keyframes ctmTitleEotmHeartPop {
  0%,100% { transform: scale(1) translateY(0); opacity: .9; }
  20%     { transform: scale(1.32) translateY(-1px); opacity: 1; }
  40%     { transform: scale(.96) translateY(0); opacity: .95; }
  60%     { transform: scale(1.22) translateY(-1px); opacity: 1; }
}
.title-vfx-eotm {
  background: linear-gradient(102deg, #ff8ab0, #ff4d79, #ff7a59, #ffd166, #ff7a59, #ff5c8a, #ff8ab0);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800; position: relative; display: inline-block;
  animation: ctmTitleEotmGrad 5.2s linear infinite, ctmTitleEotmFlicker 2.4s ease-in-out infinite;
}
.title-vfx-eotm::before {
  content: "\2764"; /* heart being spam-tapped, left of title */
  position: absolute; left: -1.25em; top: 50%; margin-top: -0.55em;
  font-size: 0.92em; line-height: 1; color: #ff4d79;
  -webkit-text-fill-color: #ff4d79;
  filter: drop-shadow(0 0 5px rgba(255,92,138,.85));
  transform-origin: 50% 70%;
  animation: ctmTitleEotmHeartPop 1.4s ease-in-out infinite;
}
.title-vfx-eotm::after {
  content: "\1F5B1"; /* mouse glyph spark on the right */
  position: absolute; right: -1.05em; top: 0.04em;
  font-size: 0.58em; opacity: .9;
  filter: drop-shadow(0 0 4px #ffd166);
  animation: ctmTitleEotmHeartPop 1.4s ease-in-out -0.7s infinite;
}

/* ---- Name color "Ember Tapper" — hot-pink↔ember sliding gradient with heat shimmer ---- */
@keyframes ctmColorEotm {
  0%   { background-position: 0% 50%; filter: brightness(1) saturate(1); }
  40%  { background-position: 100% 50%; filter: brightness(1.14) saturate(1.1); }
  60%  { background-position: 100% 50%; filter: brightness(1.14) saturate(1.1); }
  100% { background-position: 0% 50%; filter: brightness(1) saturate(1); }
}
.name-color-eotm {
  background: linear-gradient(95deg, #ffb0c4, #ff5c8a, #ff4d79, #ff7a59, #ffd166, #ff7a59, #ff5c8a, #ffb0c4);
  background-size: 280% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800;
  animation: ctmColorEotm 4.2s ease-in-out infinite;
  text-shadow: 0 0 8px rgba(255,92,138,.25);
}

/* ---- Name VFX "Like Storm" — hearts erupt + drift while a click ripple pulses around name ---- */
@keyframes ctmVfxEotmHeat {
  0%,100% { text-shadow: 0 0 7px rgba(255,92,138,.5), 0 0 15px rgba(255,122,89,.32); }
  50%     { text-shadow: 0 0 12px rgba(255,77,121,.85), 0 0 26px rgba(255,122,89,.55), 0 0 38px rgba(255,209,102,.28); }
}
@keyframes ctmEotmHeartFly {
  0%   { transform: translate(0,4px) scale(.5) rotate(0deg); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translate(11px,-15px) scale(1.05) rotate(14deg); opacity: 0; }
}
@keyframes ctmEotmHeartFly2 {
  0%   { transform: translate(0,4px) scale(.5) rotate(0deg); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(-12px,-17px) scale(1) rotate(-16deg); opacity: 0; }
}
.name-vfx-eotm {
  animation: ctmVfxEotmHeat 2.2s ease-in-out infinite;
  font-weight: 800; isolation: isolate; position: relative; z-index: 0;
}
.name-vfx-eotm > * { position: relative; z-index: 2; }
/* heart erupting up-right */
.name-vfx-eotm::before {
  content: "\2764";
  position: absolute; left: 50%; bottom: -2px; margin-left: -5px;
  font-size: 10px; color: #ff4d79;
  -webkit-text-fill-color: #ff4d79;
  filter: drop-shadow(0 0 4px rgba(255,92,138,.9));
  animation: ctmEotmHeartFly 1.5s ease-out infinite;
}
/* second heart erupting up-left, offset timing — like-spam shower */
.name-vfx-eotm::after {
  content: "\2764";
  position: absolute; left: 50%; bottom: -2px; margin-left: -3px;
  font-size: 8px; color: #ff7a59;
  -webkit-text-fill-color: #ff7a59;
  filter: drop-shadow(0 0 4px #ffd166);
  animation: ctmEotmHeartFly2 1.5s ease-out -0.75s infinite;
}

/* ---- Chat tag next to his name everywhere ---- */
@keyframes ctmEotmTagShine {
  0%   { box-shadow: 0 0 4px rgba(255,92,138,.5), inset 0 0 4px rgba(255,255,255,.22); }
  15%  { box-shadow: 0 0 11px rgba(255,77,121,.85), 0 0 17px rgba(255,122,89,.5), inset 0 0 6px rgba(255,255,255,.4); }
  30%  { box-shadow: 0 0 4px rgba(255,92,138,.5), inset 0 0 4px rgba(255,255,255,.22); }
  45%  { box-shadow: 0 0 11px rgba(255,77,121,.85), 0 0 17px rgba(255,122,89,.5), inset 0 0 6px rgba(255,255,255,.4); }
  60%,100% { box-shadow: 0 0 4px rgba(255,92,138,.5), inset 0 0 4px rgba(255,255,255,.22); }
}
@keyframes ctmEotmTagHeart {
  0%,100% { transform: scale(1); }
  25%     { transform: scale(1.35); }
  50%     { transform: scale(.95); }
  75%     { transform: scale(1.25); }
}
.ctm-chat-tag--eotm {
  color: #4a0f1f;
  background: linear-gradient(100deg, #ffd0a8, #ff7a59 42%, #ff5c8a 76%, #ff4d79);
  border: 1px solid rgba(255,77,121,.85);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  animation: ctmEotmTagShine 1.8s ease-in-out infinite;
}
.ctm-chat-tag--eotm .ctm-chat-tag__heart {
  font-size: 1.02em; color: #b3163f; line-height: 1;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.6));
  transform-origin: 50% 60%;
  animation: ctmEotmTagHeart 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .vfx-eotm-ember,
  .title-vfx-eotm, .title-vfx-eotm::before, .title-vfx-eotm::after,
  .name-color-eotm,
  .name-vfx-eotm, .name-vfx-eotm::before, .name-vfx-eotm::after,
  .ctm-chat-tag--eotm, .ctm-chat-tag--eotm .ctm-chat-tag__heart {
    animation: none !important;
  }
  .name-vfx-eotm::before, .name-vfx-eotm::after { opacity: 0; }
}

/* ============================================================================
   ADMIN CHAT TAG — STAFF EXCLUSIVE (xppot, Cider)
   A bespoke authority badge: deep indigo → cyan steel gradient with a thin
   moving "scan" highlight and a softly pulsing shield glyph. Uses its OWN
   keyframes (ctmAdminTag*) — no motion is shared with any other cosmetic.
   ============================================================================ */
.ctm-chat-tag--admin {
  position: relative;
  overflow: hidden;
  color: #eaf6ff;
  background: linear-gradient(100deg, #1b2a52 0%, #244a8c 42%, #2f7fb8 72%, #36c6e0 100%);
  border: 1px solid rgba(96, 196, 230, .9);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
  box-shadow: 0 0 0 1px rgba(20, 30, 60, .55), 0 0 8px rgba(54, 198, 224, .35);
  animation: ctmAdminTagGlow 2.6s ease-in-out infinite;
}
/* Thin diagonal highlight that sweeps across the tag */
.ctm-chat-tag--admin::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -40%;
  width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  animation: ctmAdminTagScan 3.4s ease-in-out infinite;
  pointer-events: none;
}
.ctm-chat-tag--admin .ctm-chat-tag__shield {
  font-size: 1.02em; line-height: 1; color: #bff0ff;
  filter: drop-shadow(0 0 3px rgba(120, 220, 255, .85));
  animation: ctmAdminTagShield 2.1s ease-in-out infinite;
}
@keyframes ctmAdminTagGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(20, 30, 60, .55), 0 0 7px rgba(54, 198, 224, .30); }
  50%      { box-shadow: 0 0 0 1px rgba(20, 30, 60, .55), 0 0 13px rgba(72, 210, 240, .60); }
}
@keyframes ctmAdminTagScan {
  0%   { left: -45%; }
  55%  { left: 115%; }
  100% { left: 115%; }
}
@keyframes ctmAdminTagShield {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 2px rgba(120, 220, 255, .7)); }
  50%      { transform: scale(1.16); filter: drop-shadow(0 0 5px rgba(150, 235, 255, 1)); }
}
@media (prefers-reduced-motion: reduce) {
  .ctm-chat-tag--admin, .ctm-chat-tag--admin::after, .ctm-chat-tag--admin .ctm-chat-tag__shield {
    animation: none !important;
  }
  .ctm-chat-tag--admin::after { opacity: 0; }
}

/* ============================================================================
   MYTHIC + LEGENDARY TITLES — PER-LETTER "GO ALL OUT" OVERHAUL
   Markup: .tavern-title-chip--letters > span.ctm-ltr[style="--i:n"]
   Each glyph animates independently (lift, flip, burn, phase, crack).
   Every title below uses its OWN bespoke @keyframes — no shared base motion.
   Color is applied PER-LETTER (the old wrapper background-clip:text cannot
   reach split children), so we neutralise the wrapper gradient here.
   ============================================================================ */
.tavern-title-chip--letters {
  -webkit-text-fill-color: initial;            /* undo background-clip transparent */
  background: rgba(255,184,82,.06) !important;  /* keep the chip pill bg, kill text gradient */
  color: inherit;
  white-space: nowrap;
  overflow: visible;
  animation: none !important;                   /* per-letter anim owns the motion */
}
.ctm-ltr {
  display: inline-block;
  position: relative;
  will-change: transform, opacity, filter;
  transform-style: preserve-3d;
}
.ctm-ltr--space { width: .32em; }

/* ── THE ASCENDED (mythic) ──────────────────────────────────────────────────
   Holy ascension: each letter lifts off, hovers weightless, then settles —
   a slow rolling levitation wave down the word with a radiant halo bloom. */
@keyframes ctmLtrAscend {
  0%, 12%   { transform: translateY(0) scale(1); }
  38%       { transform: translateY(-9px) scale(1.14); }
  60%       { transform: translateY(-4px) scale(1.05); }
  100%      { transform: translateY(0) scale(1); }
}
@keyframes ctmLtrAscendGlow {
  0%,100% { filter: drop-shadow(0 0 2px rgba(255,248,220,.55)); }
  38%     { filter: drop-shadow(0 0 10px rgba(255,255,255,.95)) drop-shadow(0 0 18px rgba(255,220,140,.7)); }
}
.title-vfx-ascended.tavern-title-chip--letters .ctm-ltr {
  background: linear-gradient(180deg, #ffffff 0%, #fff3d0 55%, #ffd98a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation:
    ctmLtrAscend 2.8s ease-in-out infinite,
    ctmLtrAscendGlow 2.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.16s);
}

/* ── CELESTIAL SOVEREIGN (mythic) ───────────────────────────────────────────
   Each letter flips a full 360° on its vertical axis like a spinning coin of
   the cosmos, flaring violet-white at the edge-on apex. Sequential cascade. */
@keyframes ctmLtrFlip3D {
  0%, 20%  { transform: rotateY(0deg); }
  55%      { transform: rotateY(360deg); }
  100%     { transform: rotateY(360deg); }
}
@keyframes ctmLtrFlipShine {
  0%,20%,100% { color: #c9b3ff; text-shadow: 0 0 6px rgba(150,110,255,.6); }
  37%         { color: #ffffff; text-shadow: 0 0 14px #b48aff, 0 0 26px #6a3aff; }
}
.title-vfx-celestial.tavern-title-chip--letters .ctm-ltr {
  animation:
    ctmLtrFlip3D 3.4s cubic-bezier(.6,.05,.3,1) infinite,
    ctmLtrFlipShine 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.22s);
}

/* ── ETERNAL ONE (mythic) ───────────────────────────────────────────────────
   Letters are living embers: each flares molten, then collapses to ash
   (shrinks + darkens + drops) and reignites from the bottom of the word. */
@keyframes ctmLtrEmberDie {
  0%   { color: #fff3b0; transform: translateY(0) scale(1); text-shadow: 0 0 10px #ff9a3a, 0 0 18px #ff5a10; opacity: 1; }
  45%  { color: #ff7a20; transform: translateY(1px) scale(1); text-shadow: 0 0 6px #ff6a10; opacity: 1; }
  70%  { color: #5a1500; transform: translateY(4px) scale(.82); text-shadow: none; opacity: .35; }
  86%  { color: #2a0a00; transform: translateY(6px) scale(.7);  text-shadow: none; opacity: .1; }
  100% { color: #fff3b0; transform: translateY(0) scale(1); text-shadow: 0 0 12px #ffb04a, 0 0 22px #ff5a10; opacity: 1; }
}
.title-vfx-eternal.tavern-title-chip--letters .ctm-ltr {
  animation: ctmLtrEmberDie 2.6s ease-in infinite;
  animation-delay: calc(var(--i) * 0.19s);
}

/* ── DRAGONBORN (legendary) ─────────────────────────────────────────────────
   A burn-through sweep: each letter chars from molten orange to scorched
   black at the leading edge then is reforged, like dragonfire licking across
   the word. Subtle horizontal jitter as the flame hits. */
@keyframes ctmLtrScorch {
  0%   { color: #ffcf7a; text-shadow: 0 0 8px #ff8a2a; transform: translateX(0) rotate(0deg); }
  30%  { color: #ff6a1a; text-shadow: 0 0 14px #ff4a10, 0 0 22px #c01a00; transform: translateX(.5px) rotate(.4deg); }
  48%  { color: #401000; text-shadow: 0 0 4px #ff3a00; transform: translateX(-.5px) rotate(-.5deg); }
  60%  { color: #1a0600; text-shadow: none; transform: translateX(.4px) rotate(.3deg); }
  100% { color: #ffcf7a; text-shadow: 0 0 8px #ff8a2a; transform: translateX(0) rotate(0deg); }
}
.title-vfx-wyrmfire.tavern-title-chip--letters .ctm-ltr {
  animation: ctmLtrScorch 2.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.13s);
}

/* ── MYTHIC PATRON (legendary) ──────────────────────────────────────────────
   Letters phase IN and OUT of existence — they teleport: blink away with a
   prismatic glitch-shear, then snap back at a slightly offset position. */
@keyframes ctmLtrPhase {
  0%, 30%  { opacity: 1; transform: translate(0,0) skewX(0deg); filter: none; }
  42%      { opacity: .15; transform: translate(3px,-2px) skewX(-14deg); filter: hue-rotate(120deg) blur(.6px); }
  46%      { opacity: 0;   transform: translate(-4px,2px) skewX(10deg); }
  54%      { opacity: 0;   transform: translate(5px,1px); }
  60%      { opacity: .2;  transform: translate(-2px,-1px) skewX(8deg); filter: hue-rotate(260deg); }
  72%,100% { opacity: 1;   transform: translate(0,0) skewX(0deg); filter: none; }
}
@keyframes ctmLtrPhaseHue {
  0%   { color: #ffe066; } 25% { color: #ff9966; } 50% { color: #c66dff; }
  75%  { color: #66ffe8; } 100%{ color: #ffe066; }
}
.title-vfx-mythicaura.tavern-title-chip--letters .ctm-ltr {
  animation:
    ctmLtrPhase 3s steps(60) infinite,
    ctmLtrPhaseHue 5s linear infinite;
  animation-delay: calc(var(--i) * 0.21s), 0s;
  text-shadow: 0 0 8px currentColor;
}

/* ── LIVING LEGEND (legendary) ──────────────────────────────────────────────
   Each gold letter is CARVED in stone, then a crack splits it — the glyph
   fractures with a sharp jitter + a fracture-line flash, then re-seals.
   Implemented with a clip-path that snaps a jagged split across the glyph. */
@keyframes ctmLtrCrack {
  0%, 55%  { transform: translate(0,0) rotate(0deg); }
  58%      { transform: translate(-1.5px,1px) rotate(-2deg); }
  61%      { transform: translate(1.5px,-1px) rotate(2.5deg); }
  64%      { transform: translate(-1px,0) rotate(-1.5deg); }
  68%      { transform: translate(0,0) rotate(0deg); }
}
@keyframes ctmLtrCrackLine {
  0%, 56% { opacity: 0; transform: scaleY(0); }
  60%     { opacity: 1; transform: scaleY(1); }
  72%     { opacity: 0; transform: scaleY(1); }
  100%    { opacity: 0; transform: scaleY(0); }
}
.title-vfx-legend.tavern-title-chip--letters .ctm-ltr {
  background: linear-gradient(180deg, #fff7d6 0%, #ffd24a 45%, #ffae42 75%, #fff8e8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 1px 0 rgba(120,80,0,.5));
  animation: ctmLtrCrack 4.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.12s);
}
.title-vfx-legend.tavern-title-chip--letters .ctm-ltr::after {
  content: "";
  position: absolute; left: 48%; top: -10%; width: 1.5px; height: 120%;
  background: linear-gradient(180deg, transparent, #fff 30%, #ffd24a 60%, transparent);
  box-shadow: 0 0 5px #fff, 0 0 9px #ffd24a;
  transform-origin: center top;
  animation: ctmLtrCrackLine 4.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.12s);
  pointer-events: none;
}

/* Suppress legacy single-glyph ::before/::after sparkle decorations on the
   per-letter titles — the new motion is carried entirely by .ctm-ltr glyphs. */
.tavern-title-chip--letters.title-vfx-ascended::before,
.tavern-title-chip--letters.title-vfx-ascended::after,
.tavern-title-chip--letters.title-vfx-celestial::before,
.tavern-title-chip--letters.title-vfx-celestial::after,
.tavern-title-chip--letters.title-vfx-eternal::before,
.tavern-title-chip--letters.title-vfx-eternal::after,
.tavern-title-chip--letters.title-vfx-wyrmfire::before,
.tavern-title-chip--letters.title-vfx-wyrmfire::after,
.tavern-title-chip--letters.title-vfx-mythicaura::before,
.tavern-title-chip--letters.title-vfx-mythicaura::after,
.tavern-title-chip--letters.title-vfx-legend::before,
.tavern-title-chip--letters.title-vfx-legend::after { content: none !important; display: none !important; }


/* ============================================================================
   BADGE STRUCTURAL TRANSFORMATIONS & REAL-TIME EVOLUTIONS
   These target the live SVG sub-elements (class hooks added in engagement.js).
   Each badge now physically breaks apart / crumbles / explodes / reforms /
   evolves — no two share a build. transform-box:fill-box lets SVG children
   transform around their own box.
   ============================================================================ */

/* shared: every animatable SVG sub-element transforms around its own centre */
.vfx-mythic-galaxy .gc-arms,
.vfx-mythic-galaxy .gc-core,
.vfx-mythic-galaxy .gc-corewhite,
.vfx-mythic-galaxy .gc-bloom,
.vfx-mythic-galaxy .gc-sparks,
.vfx-mythic-void .vh-shell,
.vfx-mythic-void .vh-frag,
.vfx-mythic-void .vh-core,
.vfx-mythic-void .vh-ring1,
.vfx-mythic-void .vh-ring2,
.vfx-mythic-phoenix .pl-wing-l,
.vfx-mythic-phoenix .pl-wing-r,
.vfx-mythic-phoenix .pl-body,
.vfx-mythic-phoenix .pl-head,
.vfx-mythic-phoenix .pl-embers,
.vfx-mythic-dragon .de-lid-top,
.vfx-mythic-dragon .de-lid-bot,
.vfx-mythic-dragon .de-iris,
.vfx-mythic-dragon .de-pupil,
.vfx-loot-chest .tc-lid,
.vfx-loot-chest .tc-burst,
.vfx-loot-crown .lc-gem,
.vfx-loot-prism .lp-shard,
.vfx-loot-prism .lp-glint,
.vfx-loot-shifter .ctm-bf,
.vfx-loot-phoenix .ctm-bf {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}

/* ─────────────────────────────────────────────────────────────
   GALAXY CORE — SUPERNOVA EVOLUTION
   stable spiral → core over-brightens → supernova FLASH blows the
   arms+stars outward → everything spirals back and re-forms.
   ───────────────────────────────────────────────────────────── */
@keyframes ctmGcArmsBlow {
  0%,38%   { transform: scale(1) rotate(0deg); opacity:.9; }
  46%      { transform: scale(2.3) rotate(40deg); opacity:0; }      /* blown out */
  47%      { transform: scale(.2) rotate(-180deg); opacity:0; }     /* snap inward, hidden */
  72%      { transform: scale(1.06) rotate(-12deg); opacity:.9; }   /* spiral back */
  100%     { transform: scale(1) rotate(0deg); opacity:.9; }
}
@keyframes ctmGcCoreNova {
  0%,30%   { transform: scale(1); }
  40%      { transform: scale(1.9); }   /* core swells */
  44%      { transform: scale(3.4); }   /* DETONATION */
  50%      { transform: scale(.4); }    /* collapse */
  72%      { transform: scale(1.1); }
  100%     { transform: scale(1); }
}
@keyframes ctmGcWhiteFlash {
  0%,40%   { transform: scale(1); opacity:.0; }
  44%      { transform: scale(9); opacity:1; }     /* blinding flash */
  52%      { transform: scale(2); opacity:0; }
  100%     { transform: scale(1); opacity:0; }
}
@keyframes ctmGcSparksScatter {
  0%,40%   { transform: scale(1); opacity:.95; }
  46%      { transform: scale(3.2); opacity:0; }
  47%      { transform: scale(.3); opacity:0; }
  74%      { transform: scale(1); opacity:.95; }
  100%     { transform: scale(1); opacity:.95; }
}
.vfx-mythic-galaxy .gc-arms   { animation: ctmGcArmsBlow 5s ease-in-out infinite; }
.vfx-mythic-galaxy .gc-core   { animation: ctmGcCoreNova 5s ease-in-out infinite; }
.vfx-mythic-galaxy .gc-corewhite { animation: ctmGcWhiteFlash 5s ease-in-out infinite; }
.vfx-mythic-galaxy .gc-sparks { animation: ctmGcSparksScatter 5s ease-in-out infinite; }

/* ─────────────────────────────────────────────────────────────
   DRAGON'S EYE — LIVING BLINK + PREDATORY IRIS DILATION
   eye snaps shut (lids meet) then reopens; iris dilates wide then
   contracts to a hunting slit — a creature watching the room.
   ───────────────────────────────────────────────────────────── */
@keyframes ctmDeBlinkTop {
  0%,70%,100% { transform: translateY(0); }
  82%         { transform: translateY(11px); }   /* lid closes down */
  86%         { transform: translateY(11px); }
}
@keyframes ctmDeBlinkBot {
  0%,70%,100% { transform: translateY(0); }
  82%         { transform: translateY(-11px); }   /* lid closes up */
  86%         { transform: translateY(-11px); }
}
@keyframes ctmDeIris {
  0%,100% { transform: scale(1); }
  30%     { transform: scale(1.28); }    /* dilate — locked on */
  55%     { transform: scale(.82); }     /* contract — hunting slit */
  70%     { transform: scale(1); }
}
@keyframes ctmDePupil {
  0%,100% { transform: scaleX(1) scaleY(1); }
  30%     { transform: scaleX(1.1) scaleY(1.25); }
  55%     { transform: scaleX(.4)  scaleY(1.15); }  /* vertical reptilian slit */
  70%     { transform: scaleX(1) scaleY(1); }
}
.vfx-mythic-dragon .de-lid-top { animation: ctmDeBlinkTop 4.2s ease-in-out infinite; }
.vfx-mythic-dragon .de-lid-bot { animation: ctmDeBlinkBot 4.2s ease-in-out infinite; }
.vfx-mythic-dragon .de-iris    { animation: ctmDeIris 4.2s ease-in-out infinite; }
.vfx-mythic-dragon .de-pupil   { animation: ctmDePupil 4.2s ease-in-out infinite; }

/* ─────────────────────────────────────────────────────────────
   VOID HEART — CRUMBLE INTO THE SINGULARITY → REFORM
   crystal facets break off one-by-one and are dragged into the void
   centre (shrinking + spiralling), the void pulses, then the facets
   snap back out and the shell re-seals. A collapse/rebirth cycle.
   ───────────────────────────────────────────────────────────── */
@keyframes ctmVhFrag1 {
  0%,30%  { transform: translate(0,0) scale(1) rotate(0deg); opacity:.8; }
  55%     { transform: translate(6px,7px) scale(.05) rotate(220deg); opacity:0; }  /* sucked in */
  56%,70% { transform: translate(0,0) scale(.05) rotate(0deg); opacity:0; }
  88%     { transform: translate(0,0) scale(1.08) rotate(-8deg); opacity:.8; }     /* snap back */
  100%    { transform: translate(0,0) scale(1) rotate(0deg); opacity:.8; }
}
@keyframes ctmVhFrag2 {
  0%,32%  { transform: translate(0,0) scale(1) rotate(0deg); opacity:.8; }
  57%     { transform: translate(-6px,7px) scale(.05) rotate(-260deg); opacity:0; }
  58%,72% { transform: translate(0,0) scale(.05) rotate(0deg); opacity:0; }
  89%     { transform: translate(0,0) scale(1.08) rotate(8deg); opacity:.8; }
  100%    { transform: translate(0,0) scale(1) rotate(0deg); opacity:.8; }
}
@keyframes ctmVhFrag3 {
  0%,34%  { transform: translate(0,0) scale(1) rotate(0deg); opacity:.9; }
  59%     { transform: translate(7px,-4px) scale(.05) rotate(300deg); opacity:0; }
  60%,74% { transform: translate(0,0) scale(.05) rotate(0deg); opacity:0; }
  90%     { transform: translate(0,0) scale(1.06); opacity:.9; }
  100%    { transform: translate(0,0) scale(1); opacity:.9; }
}
@keyframes ctmVhFrag4 {
  0%,36%  { transform: translate(0,0) scale(1) rotate(0deg); opacity:.9; }
  61%     { transform: translate(-7px,-4px) scale(.05) rotate(-320deg); opacity:0; }
  62%,76% { transform: translate(0,0) scale(.05) rotate(0deg); opacity:0; }
  91%     { transform: translate(0,0) scale(1.06); opacity:.9; }
  100%    { transform: translate(0,0) scale(1); opacity:.9; }
}
@keyframes ctmVhShell {
  0%,40%  { opacity:1; transform: scale(1); }
  62%     { opacity:.15; transform: scale(.92); }   /* shell thins as it crumbles */
  88%     { opacity:1; transform: scale(1.03); }
  100%    { opacity:1; transform: scale(1); }
}
@keyframes ctmVhCorePull {
  0%,100% { transform: scale(1); opacity:.95; }
  55%     { transform: scale(1.5); opacity:1; }    /* void gorges on the matter */
  70%     { transform: scale(.7); opacity:.9; }
}
.vfx-mythic-void .vh-frag1 { animation: ctmVhFrag1 4.6s ease-in-out infinite; }
.vfx-mythic-void .vh-frag2 { animation: ctmVhFrag2 4.6s ease-in-out infinite; }
.vfx-mythic-void .vh-frag3 { animation: ctmVhFrag3 4.6s ease-in-out infinite; }
.vfx-mythic-void .vh-frag4 { animation: ctmVhFrag4 4.6s ease-in-out infinite; }
.vfx-mythic-void .vh-shell { animation: ctmVhShell 4.6s ease-in-out infinite; }
.vfx-mythic-void .vh-core  { animation: ctmVhCorePull 4.6s ease-in-out infinite; }

/* ─────────────────────────────────────────────────────────────
   PHOENIX LORD — DEATH & REBIRTH EVOLUTION
   the firebird BURSTS apart — wings fling outward and fade, body &
   head dissolve, embers explode upward — then everything draws back
   in and the phoenix reassembles. The undying-rebirth cycle.
   ───────────────────────────────────────────────────────────── */
@keyframes ctmPlWingL {
  0%,34%  { transform: translate(0,0) rotate(0deg) scale(1); opacity:1; }
  50%     { transform: translate(-14px,-6px) rotate(-40deg) scale(.6); opacity:0; }   /* flung off */
  51%,68% { transform: translate(-14px,-6px) rotate(-40deg) scale(.6); opacity:0; }
  86%     { transform: translate(0,0) rotate(4deg) scale(1.04); opacity:1; }          /* fly back */
  100%    { transform: translate(0,0) rotate(0deg) scale(1); opacity:1; }
}
@keyframes ctmPlWingR {
  0%,34%  { transform: translate(0,0) rotate(0deg) scale(1); opacity:1; }
  50%     { transform: translate(14px,-6px) rotate(40deg) scale(.6); opacity:0; }
  51%,68% { transform: translate(14px,-6px) rotate(40deg) scale(.6); opacity:0; }
  86%     { transform: translate(0,0) rotate(-4deg) scale(1.04); opacity:1; }
  100%    { transform: translate(0,0) rotate(0deg) scale(1); opacity:1; }
}
@keyframes ctmPlBody {
  0%,38%  { transform: scale(1); opacity:1; }
  52%     { transform: scale(.2); opacity:0; }       /* dissolves to ash */
  53%,66% { transform: scale(.2); opacity:0; }
  84%     { transform: scale(1.08); opacity:1; }      /* reborn */
  100%    { transform: scale(1); opacity:1; }
}
@keyframes ctmPlHead {
  0%,40%  { transform: translateY(0) scale(1); opacity:1; }
  54%     { transform: translateY(-10px) scale(.2); opacity:0; }
  55%,68% { transform: translateY(-10px) scale(.2); opacity:0; }
  85%     { transform: translateY(0) scale(1.06); opacity:1; }
  100%    { transform: translateY(0) scale(1); opacity:1; }
}
@keyframes ctmPlEmbers {
  0%,42%  { transform: translateY(0) scale(1); opacity:0; }
  50%     { transform: translateY(-4px) scale(1.6); opacity:1; }    /* explosion of embers */
  64%     { transform: translateY(-14px) scale(2.2); opacity:0; }
  100%    { transform: translateY(0) scale(1); opacity:0; }
}
.vfx-mythic-phoenix .pl-wing-l { animation: ctmPlWingL 4.4s ease-in-out infinite; }
.vfx-mythic-phoenix .pl-wing-r { animation: ctmPlWingR 4.4s ease-in-out infinite; }
.vfx-mythic-phoenix .pl-body   { animation: ctmPlBody 4.4s ease-in-out infinite; }
.vfx-mythic-phoenix .pl-head   { animation: ctmPlHead 4.4s ease-in-out infinite; }
.vfx-mythic-phoenix .pl-embers { animation: ctmPlEmbers 4.4s ease-in-out infinite; }

/* ─────────────────────────────────────────────────────────────
   TREASURE CHEST — LID OPENS & SLAMS + LOOT BURSTS
   the lid hinges open, a burst of gold light/coins flares out of the
   chest, then the lid slams shut. Greedy, satisfying, repeating.
   ───────────────────────────────────────────────────────────── */
@keyframes ctmTcLid {
  0%,30%  { transform: rotate(0deg) translateY(0); }
  48%     { transform: rotate(-26deg) translateY(-1px); }   /* hinge open (origin left) */
  70%     { transform: rotate(-26deg) translateY(-1px); }
  78%     { transform: rotate(3deg)  translateY(0); }        /* over-slam */
  100%    { transform: rotate(0deg) translateY(0); }
}
@keyframes ctmTcBurst {
  0%,34%  { transform: translateY(0) scale(.6); opacity:0; }
  50%     { transform: translateY(-3px) scale(1.6); opacity:1; }    /* loot flares out */
  68%     { transform: translateY(-6px) scale(2);  opacity:0; }
  100%    { transform: translateY(0) scale(.6); opacity:0; }
}
.vfx-loot-chest .tc-lid   { transform-origin: 2px 7px; animation: ctmTcLid 2.8s ease-in-out infinite; }
.vfx-loot-chest .tc-burst { animation: ctmTcBurst 2.8s ease-in-out infinite; }

/* ─────────────────────────────────────────────────────────────
   LOOT CROWN — GEMS POP OUT, SHATTER, RE-SET
   each jewel pops up off its setting, spins, then snaps back into
   place — staggered so the crown sparkles seat-by-seat.
   ───────────────────────────────────────────────────────────── */
@keyframes ctmLcGem {
  0%,55%,100% { transform: translateY(0) scale(1) rotate(0deg); opacity:1; }
  68%         { transform: translateY(-4px) scale(1.5) rotate(180deg); opacity:1; }   /* pops + spins */
  74%         { transform: translateY(-5px) scale(.2) rotate(220deg); opacity:0; }     /* shatters */
  75%,82%     { transform: translateY(0) scale(.2); opacity:0; }
  90%         { transform: translateY(0) scale(1.3) rotate(0deg); opacity:1; }          /* re-set */
}
.vfx-loot-crown .lc-gem1 { animation: ctmLcGem 3.2s ease-in-out infinite; }
.vfx-loot-crown .lc-gem2 { animation: ctmLcGem 3.2s ease-in-out .2s infinite; }
.vfx-loot-crown .lc-gem3 { animation: ctmLcGem 3.2s ease-in-out .4s infinite; }
.vfx-loot-crown .lc-gem4 { animation: ctmLcGem 3.2s ease-in-out .6s infinite; }

/* ─────────────────────────────────────────────────────────────
   LIVING PRISM — SHATTER INTO SHARDS → SNAP BACK
   the stacked rainbow bands fly apart in every direction like a
   broken crystal, hang scattered for a beat, then violently snap
   back into a perfect prism. The glint streaks across on re-form.
   ───────────────────────────────────────────────────────────── */
@keyframes ctmLpShard1 { 0%,30%,100%{transform:translate(0,0) rotate(0);opacity:1;} 55%{transform:translate(-9px,-9px) rotate(-90deg);opacity:.4;} 72%{transform:translate(-9px,-9px) rotate(-90deg);opacity:.4;} }
@keyframes ctmLpShard2 { 0%,30%,100%{transform:translate(0,0) rotate(0);opacity:1;} 55%{transform:translate(8px,-7px) rotate(70deg);opacity:.4;} 72%{transform:translate(8px,-7px) rotate(70deg);opacity:.4;} }
@keyframes ctmLpShard3 { 0%,30%,100%{transform:translate(0,0) rotate(0);opacity:1;} 55%{transform:translate(-7px,-3px) rotate(-50deg);opacity:.4;} 72%{transform:translate(-7px,-3px) rotate(-50deg);opacity:.4;} }
@keyframes ctmLpShard4 { 0%,30%,100%{transform:translate(0,0) rotate(0);opacity:1;} 55%{transform:translate(9px,-2px) rotate(60deg);opacity:.4;} 72%{transform:translate(9px,-2px) rotate(60deg);opacity:.4;} }
@keyframes ctmLpShard5 { 0%,30%,100%{transform:translate(0,0) rotate(0);opacity:1;} 55%{transform:translate(-10px,2px) rotate(-30deg);opacity:.4;} 72%{transform:translate(-10px,2px) rotate(-30deg);opacity:.4;} }
@keyframes ctmLpShard6 { 0%,30%,100%{transform:translate(0,0) rotate(0);opacity:1;} 55%{transform:translate(10px,3px) rotate(40deg);opacity:.4;} 72%{transform:translate(10px,3px) rotate(40deg);opacity:.4;} }
@keyframes ctmLpShard7 { 0%,30%,100%{transform:translate(0,0) rotate(0);opacity:1;} 55%{transform:translate(-8px,7px) rotate(-70deg);opacity:.4;} 72%{transform:translate(-8px,7px) rotate(-70deg);opacity:.4;} }
@keyframes ctmLpShard8 { 0%,30%,100%{transform:translate(0,0) rotate(0);opacity:1;} 55%{transform:translate(8px,9px) rotate(80deg);opacity:.4;} 72%{transform:translate(8px,9px) rotate(80deg);opacity:.4;} }
@keyframes ctmLpShard9 { 0%,30%,100%{transform:translate(0,0) rotate(0);opacity:1;} 55%{transform:translate(2px,10px) rotate(120deg);opacity:.4;} 72%{transform:translate(2px,10px) rotate(120deg);opacity:.4;} }
@keyframes ctmLpGlint {
  0%,80% { transform: translateX(0) scaleY(1); opacity:0; }
  88%    { transform: translateX(0) scaleY(1.2); opacity:.9; }   /* flash on snap-back */
  100%   { transform: translateX(0) scaleY(1); opacity:.45; }
}
.vfx-loot-prism .lp-s1 { animation: ctmLpShard1 3.4s cubic-bezier(.7,-0.4,.3,1.4) infinite; }
.vfx-loot-prism .lp-s2 { animation: ctmLpShard2 3.4s cubic-bezier(.7,-0.4,.3,1.4) infinite; }
.vfx-loot-prism .lp-s3 { animation: ctmLpShard3 3.4s cubic-bezier(.7,-0.4,.3,1.4) infinite; }
.vfx-loot-prism .lp-s4 { animation: ctmLpShard4 3.4s cubic-bezier(.7,-0.4,.3,1.4) infinite; }
.vfx-loot-prism .lp-s5 { animation: ctmLpShard5 3.4s cubic-bezier(.7,-0.4,.3,1.4) infinite; }
.vfx-loot-prism .lp-s6 { animation: ctmLpShard6 3.4s cubic-bezier(.7,-0.4,.3,1.4) infinite; }
.vfx-loot-prism .lp-s7 { animation: ctmLpShard7 3.4s cubic-bezier(.7,-0.4,.3,1.4) infinite; }
.vfx-loot-prism .lp-s8 { animation: ctmLpShard8 3.4s cubic-bezier(.7,-0.4,.3,1.4) infinite; }
.vfx-loot-prism .lp-s9 { animation: ctmLpShard9 3.4s cubic-bezier(.7,-0.4,.3,1.4) infinite; }
.vfx-loot-prism .lp-glint { animation: ctmLpGlint 3.4s ease-out infinite; }

/* ─────────────────────────────────────────────────────────────
   SHAPESHIFTER — TRUE FORM-MORPH EVOLUTION (4 stages)
   clover → coin → gem → die, each form cross-fading + scaling into
   the next on a loop. The frames existed but were never animated —
   now it actually shape-shifts in real time.
   ───────────────────────────────────────────────────────────── */
@keyframes ctmBf4 {
  0%,18%   { opacity:1; transform: scale(1) rotate(0deg); }
  25%,93%  { opacity:0; transform: scale(.55) rotate(-90deg); }
  100%     { opacity:1; transform: scale(1) rotate(0deg); }
}
.vfx-loot-shifter .ctm-bf4-1 { animation: ctmBf4 5.2s ease-in-out infinite; }
.vfx-loot-shifter .ctm-bf4-2 { animation: ctmBf4 5.2s ease-in-out -3.9s infinite; }
.vfx-loot-shifter .ctm-bf4-3 { animation: ctmBf4 5.2s ease-in-out -2.6s infinite; }
.vfx-loot-shifter .ctm-bf4-4 { animation: ctmBf4 5.2s ease-in-out -1.3s infinite; }

/* ─────────────────────────────────────────────────────────────
   PHOENIX EGG — HATCH EVOLUTION (3 stages)
   egg → cracking flame → phoenix, cycling forever. Frames existed
   but were static — now the egg visibly hatches in real time, with
   a swell on each transition like a heartbeat of new life.
   ───────────────────────────────────────────────────────────── */
@keyframes ctmBf3 {
  0%,22%   { opacity:1; transform: scale(1); }
  30%      { opacity:0; transform: scale(1.25); }   /* burst-swell into next form */
  31%,92%  { opacity:0; transform: scale(.7); }
  100%     { opacity:1; transform: scale(1); }
}
.vfx-loot-phoenix .ctm-bf3-1 { animation: ctmBf3 4.2s ease-in-out infinite; }
.vfx-loot-phoenix .ctm-bf3-2 { animation: ctmBf3 4.2s ease-in-out -2.8s infinite; }
.vfx-loot-phoenix .ctm-bf3-3 { animation: ctmBf3 4.2s ease-in-out -1.4s infinite; }

/* ==========================================================================
   LIL' PUP IN A HOOD — free cosmetic set (badge + title + name color + vfx)
   Original art inspired by the "side-eye dog in a hoodie" meme energy.
   Badge eyes BLINK and GLANCE on their own in real time.
   ========================================================================== */

/* ----- Badge: live eye animation ----- */
.vfx-lilpup { display:inline-flex; position:relative; overflow:visible; }
/* gentle peek-bob so the whole pup feels alive */
.vfx-lilpup svg { animation: ctmLilPupBob 5.6s ease-in-out infinite; transform-origin:50% 75%; }
@keyframes ctmLilPupBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  45%      { transform: translateY(-0.6px) rotate(-1deg); }
  72%      { transform: translateY(0.4px) rotate(0.8deg); }
}
/* blink: top lids drop to cover the eyes, with a quick double-blink */
@keyframes ctmLilPupBlink {
  0%, 88%, 100% { transform: translateY(0); }
  90%, 95%      { transform: translateY(7px); }
  92.5%         { transform: translateY(1px); }
}
/* side-glance: pupils flick away then snap back to the smug right-stare */
@keyframes ctmLilPupLook {
  0%, 28%, 100% { transform: translateX(0); }
  40%, 58%      { transform: translateX(-4px); }
  68%           { transform: translateX(0.5px); }
}
.vfx-lilpup .lp-lid-l,
.vfx-lilpup .lp-lid-r { animation: ctmLilPupBlink 4.4s ease-in-out infinite; }
.vfx-lilpup .lp-look-l,
.vfx-lilpup .lp-look-r { animation: ctmLilPupLook 6.2s ease-in-out infinite; transform-box: fill-box; }
/* ears give a subtle independent twitch so it's not all in sync */
.vfx-lilpup .lp-ear-l { animation: ctmLilPupEarL 6.2s ease-in-out infinite; }
.vfx-lilpup .lp-ear-r { animation: ctmLilPupEarR 6.2s ease-in-out 0.5s infinite; }
@keyframes ctmLilPupEarL { 0%,82%,100%{transform:rotate(0deg);} 88%{transform:rotate(-7deg);} }
@keyframes ctmLilPupEarR { 0%,82%,100%{transform:rotate(0deg);} 88%{transform:rotate(7deg);} }

/* ----- Name color: warm caramel pup gradient ----- */
@keyframes ctmLilPupColorFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
.name-color-lilpup {
  background: linear-gradient(90deg, #c98a4f, #e7b481, #f3d2a6, #d49a62, #c98a4f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 300% 100%; animation: ctmLilPupColorFlow 4.5s linear infinite;
  font-weight: 800;
}

/* ----- Title VFX: matching caramel shimmer for the equipped title text ----- */
.title-vfx-lilpup {
  background: linear-gradient(90deg, #c98a4f, #e7b481, #f3d2a6, #d49a62, #c98a4f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 300% 100%; animation: ctmLilPupColorFlow 4s linear infinite;
  font-weight: 800;
}

/* ----- Name VFX: orbiting paw prints around the name ----- */
.name-vfx-lilpup { position: relative; display: inline-block; isolation: isolate; z-index: 0; animation: ctmLilPupNamePulse 3.4s ease-in-out infinite; }
.name-vfx-lilpup > * { position: relative; z-index: 2; }
.name-vfx-lilpup::before {
  content: "\1F43E"; position: absolute; left: 50%; top: 50%; margin: -6px 0 0 -6px;
  font-size: 9px; animation: ctmPawTrot 2.8s ease-in-out infinite;
}
.name-vfx-lilpup::after {
  content: "\1F43E"; position: absolute; left: 50%; top: 50%; margin: -6px 0 0 -6px;
  font-size: 7px; opacity: .85; animation: ctmPawTrot 2.8s ease-in-out -1.4s infinite;
}
@keyframes ctmLilPupNamePulse {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(201,138,79,.5)); }
  50%      { filter: drop-shadow(0 0 6px rgba(231,180,129,.85)); }
}

/* ============================================================
   FALLBACK LOOT TOAST
   Used when the shared chat-extras toast module isn't wired
   yet (e.g. clicking a loot box before chat init). Ensures
   "Not enough coins" and similar notices always surface.
   ============================================================ */
.loot-toast-host {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}
.loot-toast {
  pointer-events: auto;
  max-width: min(90vw, 420px);
  padding: 12px 18px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: #f6efe2;
  background: linear-gradient(180deg, #2a2118, #1d1711);
  border: 1px solid rgba(231, 180, 129, .35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  opacity: 0;
  transform: translateY(14px) scale(.96);
  transition: opacity .28s ease, transform .28s cubic-bezier(.2, .8, .2, 1);
}
.loot-toast.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.loot-toast--error {
  background: linear-gradient(180deg, #3a1d18, #2a1411);
  border-color: rgba(255, 120, 100, .5);
  color: #ffdcd2;
}
.loot-toast--success {
  background: linear-gradient(180deg, #1f2e1c, #152213);
  border-color: rgba(140, 220, 130, .5);
  color: #dcffd2;
}

/* =====================================================================
   AVATAR FRAME RING VFX (.af-*) — animate the SVG rings drawn around the
   badge slot in chat + hero + picker swatches. The SVG markup lives in
   engagement.js AVATAR_FRAMES; these classes drive the motion + glow.
   Helper classes (af-rot/af-pulse/af-orb) are applied to inner SVG <g>.
   Rarity scales motion complexity. Each animation is UNIQUE.
   ===================================================================== */
/* Inner-SVG motion helpers (target transform-box so rotation centers). */
.af-rot { transform-box: fill-box; transform-origin: center; animation: afRotate 8s linear infinite; }
.af-rot--rev { transform-box: fill-box; transform-origin: center; animation: afRotateRev 10s linear infinite; }
.af-rot--fast { animation-duration: 3.5s; }
@keyframes afRotate { to { transform: rotate(360deg); } }
@keyframes afRotateRev { to { transform: rotate(-360deg); } }
.af-pulse { animation: afPulse 2.6s ease-in-out infinite; }
.af-pulse--fast { animation-duration: 1.4s; }
@keyframes afPulse { 0%,100% { opacity:.65; stroke-width:1.6; } 50% { opacity:1; stroke-width:2.6; } }
.af-orb { animation: afOrbGlow 2.2s ease-in-out infinite; }
@keyframes afOrbGlow { 0%,100% { opacity:.6; } 50% { opacity:1; } }

/* Per-frame outer wrappers — add glow/filter scaled by rarity. */
/* Common — static, no glow. */
.loot-swatch--frame.af-iron, .cr-frame.af-iron { filter: none; }
.loot-swatch--frame.af-oak, .cr-frame.af-oak { filter: none; }
/* Uncommon — faint glow. */
.loot-swatch--frame.af-copper, .cr-frame.af-copper { filter: drop-shadow(0 0 2px rgba(224,138,74,.5)); }
.loot-swatch--frame.af-emerald, .cr-frame.af-emerald { filter: drop-shadow(0 0 2px rgba(34,215,122,.5)); }
/* Rare — moderate glow (rings rotate via inner .af-rot). */
.loot-swatch--frame.af-runes, .cr-frame.af-runes { filter: drop-shadow(0 0 3px rgba(126,200,255,.6)); }
.loot-swatch--frame.af-lapis, .cr-frame.af-lapis { filter: drop-shadow(0 0 3px rgba(58,79,255,.6)); }
/* Epic — strong glow + breathing pulse on the whole frame. */
.loot-swatch--frame.af-amethyst, .cr-frame.af-amethyst { filter: drop-shadow(0 0 5px rgba(191,106,255,.7)); animation: afFrameBreathePurple 3s ease-in-out infinite; }
@keyframes afFrameBreathePurple { 0%,100% { filter: drop-shadow(0 0 4px rgba(191,106,255,.6)); } 50% { filter: drop-shadow(0 0 9px rgba(191,106,255,.95)); } }
.loot-swatch--frame.af-flame, .cr-frame.af-flame { animation: afFrameBreatheFlame 1.8s ease-in-out infinite; }
@keyframes afFrameBreatheFlame { 0%,100% { filter: drop-shadow(0 0 4px rgba(255,122,46,.6)); } 50% { filter: drop-shadow(0 0 10px rgba(255,160,60,1)); } }
/* Legendary — radiant glow + slow hue cycle. */
.loot-swatch--frame.af-dragon, .cr-frame.af-dragon { animation: afFrameDragon 4s linear infinite; }
@keyframes afFrameDragon { 0% { filter: drop-shadow(0 0 6px rgba(176,106,255,.8)) hue-rotate(0deg); } 100% { filter: drop-shadow(0 0 6px rgba(176,106,255,.8)) hue-rotate(360deg); } }
.loot-swatch--frame.af-celestial, .cr-frame.af-celestial { animation: afFrameCelestial 3.4s ease-in-out infinite; }
@keyframes afFrameCelestial { 0%,100% { filter: drop-shadow(0 0 5px rgba(255,224,138,.7)); } 50% { filter: drop-shadow(0 0 13px rgba(255,246,194,1)); } }
/* Mythic — maximum: intense glow + hue shift + scale shimmer. */
.loot-swatch--frame.af-galaxy, .cr-frame.af-galaxy { animation: afFrameGalaxy 6s linear infinite; }
@keyframes afFrameGalaxy { 0% { filter: drop-shadow(0 0 8px rgba(179,136,255,.9)) hue-rotate(0deg); } 50% { filter: drop-shadow(0 0 14px rgba(122,212,255,1)) hue-rotate(180deg); } 100% { filter: drop-shadow(0 0 8px rgba(179,136,255,.9)) hue-rotate(360deg); } }
.loot-swatch--frame.af-phoenix, .cr-frame.af-phoenix { animation: afFramePhoenix 2.2s ease-in-out infinite; }
@keyframes afFramePhoenix { 0%,100% { filter: drop-shadow(0 0 6px rgba(255,90,30,.8)); transform: scale(1); } 50% { filter: drop-shadow(0 0 16px rgba(255,210,74,1)); transform: scale(1.04); } }
/* Achievement — Veteran's Laurel (epic): warm gold steady glow. */
.loot-swatch--frame.af-veteran, .cr-frame.af-veteran { animation: afFrameVeteran 3.2s ease-in-out infinite; }
@keyframes afFrameVeteran { 0%,100% { filter: drop-shadow(0 0 4px rgba(217,178,74,.6)); } 50% { filter: drop-shadow(0 0 11px rgba(243,217,138,.95)); } }

/* The avatar-frame wrapper element used in chat/hero around the badge.
   The inner badge is a SQUARE, so the circular ring must be oversized enough
   that the circle encloses the square's corners (diameter >= side * 1.414).
   The ring SVG's visible circle is ~90% of its box, so the ring is sized to
   ~150% of the wrapper and centered, fully surrounding the square badge
   instead of cutting its corners. overflow stays visible so it isn't clipped. */
.cr-frame { position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: visible; }
.cr-frame > svg {
  position: absolute; left: 50%; top: 50%;
  width: 150%; height: 150%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
/* When a badge sits INSIDE a circular avatar ring, clip the (square) badge
   into a circle so its corners don't poke out past the round frame. The badge
   gets a subtle dark circular backdrop so it reads as a coin inside the ring. */
.cr-frame > .cr-msg__badge,
.cr-frame > .cr-msg__elite {
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  justify-content: center;
  background: radial-gradient(circle at 50% 42%, rgba(28,30,38,.92), rgba(12,13,18,.96));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.45);
}
.cr-frame > .cr-msg__badge > img,
.cr-frame > .cr-msg__badge > svg,
.cr-frame > .cr-msg__elite > img,
.cr-frame > .cr-msg__elite > svg {
  width: 78%; height: 78%; object-fit: contain;
}

/* Cursor-trail particle element (spawned by JS pointer tracker). */
.ctm-trail-dot { position: fixed; pointer-events: none; z-index: 9998; font-size: 14px; line-height: 1; transform: translate(-50%, -50%); will-change: transform, opacity; animation: ctmTrailFade .9s ease-out forwards; }
@keyframes ctmTrailFade { 0% { opacity: .9; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.4) translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
  .af-rot, .af-rot--rev, .af-pulse, .af-orb,
  .loot-swatch--frame[class*="af-"], .cr-frame[class*="af-"] { animation: none !important; }
  .ctm-trail-dot { animation: none !important; }
}

/* =========================================================================
   LIVE LOOT FEED — every box opened across the tavern, in real time.
   Rendered by tavern-loot.js (renderFeedShell + appendFeedRow). Specials are
   highlighted; rarity drives the accent color. Unique keyframes: lfx*.
   ========================================================================= */
.loot-feed{
  margin-top:14px; padding:18px;
  border:1px solid var(--border); border-radius:18px;
  background:
    radial-gradient(140% 120% at 100% 0%, rgba(74,163,255,.08), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, #000), var(--surface-2));
}
.loot-feed__head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.loot-feed__pulse{
  width:11px; height:11px; border-radius:50%; background:#ff5d5d; position:relative; flex:none;
  box-shadow:0 0 0 0 rgba(255,93,93,.6); animation:lfxPulse 1.8s ease-out infinite;
}
@keyframes lfxPulse{
  0%{ box-shadow:0 0 0 0 rgba(255,93,93,.55); }
  70%{ box-shadow:0 0 0 9px rgba(255,93,93,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,93,93,0); }
}
.loot-feed__title{ margin:0; font:800 17px/1.1 var(--font-body); letter-spacing:.3px; }
.loot-feed__sub{ color:var(--text-dim); font-size:12.5px; flex:1; min-width:160px; }
.loot-feed__list{ display:flex; flex-direction:column; gap:9px; min-height:230px; max-height:560px; overflow-y:auto; padding-right:4px; }
.loot-feed__list::-webkit-scrollbar{ width:8px; }
.loot-feed__list::-webkit-scrollbar-thumb{ background:var(--border); border-radius:8px; }
.loot-feed__empty{ color:var(--text-dim); font-style:italic; font-size:13px; padding:14px 4px; text-align:center; }

.loot-feed__row{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:13px;
  border:1px solid var(--border); background:color-mix(in srgb, var(--surface-2) 78%, #000);
  border-left:3px solid var(--r-common);
  opacity:0; transform:translateY(-8px) scale(.98);
  transition:opacity .42s ease, transform .42s cubic-bezier(.22,1,.36,1);
  position:relative; overflow:hidden;
}
.loot-feed__row.is-in{ opacity:1; transform:none; }
.loot-feed__row.loot-rarity-uncommon{ border-left-color:var(--r-uncommon); }
.loot-feed__row.loot-rarity-rare{ border-left-color:var(--r-rare); }
.loot-feed__row.loot-rarity-epic{ border-left-color:var(--r-epic); }
.loot-feed__row.loot-rarity-legendary{ border-left-color:var(--r-legendary); }
.loot-feed__row.loot-rarity-mythic{ border-left-color:var(--r-mythic); }

/* Special pulls get a glowing border + animated wash. */
.loot-feed__row.is-special{
  border-color:color-mix(in srgb, var(--r-legendary) 55%, var(--border));
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--r-legendary) 12%, transparent), transparent 60%),
    color-mix(in srgb, var(--surface-2) 70%, #000);
  box-shadow:0 0 18px color-mix(in srgb, var(--r-legendary) 28%, transparent);
  animation:lfxSpecialGlow 3.2s ease-in-out infinite;
}
@keyframes lfxSpecialGlow{
  0%,100%{ box-shadow:0 0 14px color-mix(in srgb, var(--r-legendary) 22%, transparent); }
  50%{ box-shadow:0 0 26px color-mix(in srgb, var(--r-legendary) 42%, transparent); }
}
.loot-feed__row--jackpot{ border-color:color-mix(in srgb, var(--throne) 60%, var(--border)); }
.loot-feed__row--mythic{ border-color:color-mix(in srgb, var(--r-mythic) 60%, var(--border)); }
.loot-feed__row--million{ border-color:color-mix(in srgb, #fff 50%, var(--r-mythic)); }
.loot-feed__row--overflow{ border-color:color-mix(in srgb, var(--r-epic) 60%, var(--border)); }
/* Sweep of light across special rows. */
.loot-feed__row.is-special::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.16) 50%, transparent 70%);
  background-size:240% 100%; animation:lfxSweep 2.6s linear infinite;
}
@keyframes lfxSweep{ 0%{ background-position:160% 0; } 100%{ background-position:-160% 0; } }

.loot-feed__swatch{ flex:none; width:38px; height:38px; display:grid; place-items:center; }
.loot-feed__swatch > *{ width:34px; height:34px; }
.loot-feed__icon{ flex:none; width:38px; height:38px; display:grid; place-items:center; font-size:20px; border-radius:11px; }
.loot-feed__icon--xp{ color:#c9b8ff; background:color-mix(in srgb, var(--r-epic) 18%, transparent); }
.loot-feed__icon--coins{ color:var(--throne); background:color-mix(in srgb, var(--throne) 16%, transparent); }
.loot-feed__body{ flex:1; min-width:0; }
.loot-feed__line{ font-size:13.5px; line-height:1.35; }
.loot-feed__who{ color:var(--text); font-weight:800; }
.loot-feed__verb{ color:var(--text-dim); }
.loot-feed__reward{ color:var(--text); font-weight:600; }
.loot-feed__meta{ margin-top:2px; font-size:11px; color:var(--text-dim); display:flex; gap:2px; flex-wrap:wrap; }
.loot-feed__rarity{ font-weight:800; letter-spacing:.3px; }
.loot-feed__source,.loot-feed__time{ opacity:.85; }
.loot-feed__spark{ flex:none; font-size:18px; animation:lfxSpark 1.9s ease-in-out infinite; }
@keyframes lfxSpark{
  0%,100%{ transform:scale(1) rotate(0); opacity:.85; }
  50%{ transform:scale(1.25) rotate(18deg); opacity:1; }
}

/* =========================================================================
   GIFTED LOOT BOXES — admin-granted boxes held in inventory.
   Banner + per-crate flag + "Open gifted" button. Unique keyframes: gbx*.
   ========================================================================= */
.loot-gift-banner{
  display:flex; align-items:center; gap:11px; padding:12px 15px; margin:0 0 16px;
  border-radius:14px;
  border:1px solid color-mix(in srgb, var(--accent-violet, #b488e0) 45%, var(--border));
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--accent-violet, #b488e0) 16%, transparent), transparent 60%),
    color-mix(in srgb, var(--surface-2) 80%, #000);
  font-size:13.5px; line-height:1.45;
  box-shadow:0 0 18px color-mix(in srgb, var(--accent-violet, #b488e0) 18%, transparent);
}
.loot-gift-banner strong{ color:#e4d0ff; }
.loot-gift-banner em{ font-style:normal; color:var(--throne); font-weight:700; }
.loot-gift-banner__icon{ font-size:22px; flex:none; animation:gbxFloat 3s ease-in-out infinite; }
@keyframes gbxFloat{
  0%,100%{ transform:translateY(0) rotate(-4deg); }
  50%{ transform:translateY(-4px) rotate(4deg); }
}
.loot-box-card.has-gift{
  border-color:color-mix(in srgb, var(--accent-violet, #b488e0) 50%, var(--border)) !important;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent-violet, #b488e0) 30%, transparent), 0 10px 30px rgba(0,0,0,.4);
}
.loot-box-card__gift-flag{
  position:absolute; top:10px; right:10px; z-index:3;
  padding:3px 9px; border-radius:999px;
  font:800 10.5px/1 var(--font-body); letter-spacing:.4px; text-transform:uppercase;
  color:#12101b; background:linear-gradient(135deg, var(--accent-violet, #b488e0), #d8c0f4);
  box-shadow:0 4px 12px color-mix(in srgb, var(--accent-violet, #b488e0) 50%, transparent);
  animation:gbxFlagPop .5s cubic-bezier(.34,1.56,.64,1) both, gbxFlagGlow 2.4s ease-in-out 0.5s infinite;
}
@keyframes gbxFlagPop{ from{ transform:scale(0) rotate(-12deg); opacity:0; } to{ transform:scale(1) rotate(0); opacity:1; } }
@keyframes gbxFlagGlow{
  0%,100%{ box-shadow:0 4px 10px color-mix(in srgb, var(--accent-violet, #b488e0) 40%, transparent); }
  50%{ box-shadow:0 4px 18px color-mix(in srgb, var(--accent-violet, #b488e0) 75%, transparent); }
}
.loot-btn--gift{
  background:linear-gradient(135deg, var(--accent-violet, #b488e0), #d8c0f4) !important;
  color:#12101b !important; font-weight:800;
  position:relative; overflow:hidden;
  box-shadow:0 6px 18px color-mix(in srgb, var(--accent-violet, #b488e0) 45%, transparent);
}
.loot-btn--gift::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 35%, rgba(255,255,255,.4) 50%, transparent 65%);
  background-size:240% 100%; animation:gbxShine 2.4s linear infinite;
}
@keyframes gbxShine{ 0%{ background-position:160% 0; } 100%{ background-position:-160% 0; } }
.loot-btn--gift:hover{ filter:brightness(1.07); transform:translateY(-2px); }
.loot-btn__coin{ display:inline-flex; }

@media (prefers-reduced-motion: reduce){
  .loot-feed__pulse,.loot-feed__row.is-special,.loot-feed__row.is-special::after,
  .loot-feed__spark,.loot-gift-banner__icon,.loot-box-card__gift-flag,.loot-btn--gift::after{
    animation:none !important;
  }
}