/* Copyright © 2026 MELDIX. TrioSoft. All rights reserved. */
/* TrioSoft avatar decorations — pairs with /avatar-deco.js */

.deco-avatar {
  --deco-size: 64px;
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--deco-size);
  height: var(--deco-size);
  isolation: isolate;
  vertical-align: middle;
}
.deco-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, var(--os-coral, #ff5a36), var(--deco-accent, var(--os-violet, #6c4cff)) 55%, var(--os-mint, #10c59a));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.deco-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.deco-face b { font-family: var(--os-display, inherit); font-size: calc(var(--deco-size) * .42); font-weight: 800; line-height: 1; letter-spacing: -.02em; user-select: none; }

.deco-layer { position: absolute; inset: -10%; z-index: 2; pointer-events: none; }
.deco-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* conic rings drawn with HTML (SVG has no conic gradients) */
.dk-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  -webkit-mask: radial-gradient(closest-side, transparent 82.6%, #000 83.6%, #000 95%, transparent 96.2%);
  mask: radial-gradient(closest-side, transparent 82.6%, #000 83.6%, #000 95%, transparent 96.2%);
}
.dk-holo { background: conic-gradient(#ff7ad9, #7af0ff, #b4ff8a, #ffe27a, #b38cff, #ff7ad9); animation: dk-rot 6s linear infinite; }
.dk-holo-gloss { background: conic-gradient(transparent 0 18%, rgba(255, 255, 255, .95) 24%, transparent 30% 66%, rgba(255, 255, 255, .7) 72%, transparent 78%); animation: dk-rot 3.4s linear infinite reverse; }
.dk-aurora-a, .dk-aurora-b {
  -webkit-mask: radial-gradient(closest-side, transparent 80%, #000 85%, #000 92%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 80%, #000 85%, #000 92%, transparent 100%);
  filter: blur(1.6px);
}
.dk-aurora-a { background: conic-gradient(transparent 0 6%, #2dffb0 18%, transparent 34% 46%, #8a5cff 58%, transparent 70% 78%, #2de0ff 88%, transparent 98%); animation: dk-rot 9s linear infinite; }
.dk-aurora-b { inset: -3%; background: conic-gradient(from 120deg, transparent 0 10%, #b6ff6a 22%, transparent 36% 52%, #ff6ad5 64%, transparent 78%); opacity: .8; animation: dk-rot 13s linear infinite reverse; }

/* glows per decoration (CSS filter on the outer svg is supported everywhere) */
.deco-trio .deco-svg { filter: drop-shadow(0 0 3px rgba(108, 76, 255, .55)); }
.deco-neon .deco-svg { filter: drop-shadow(0 0 2.5px #ff3df2) drop-shadow(0 0 5px rgba(61, 245, 255, .7)); }
.deco-starlight .deco-svg { filter: drop-shadow(0 0 2px rgba(255, 240, 200, .9)); }
.deco-pulse .deco-svg { filter: drop-shadow(0 0 4px rgba(138, 99, 255, .7)); }
.deco-frost .deco-svg { filter: drop-shadow(0 0 3px rgba(143, 220, 255, .8)); }
.deco-hearts .deco-svg { filter: drop-shadow(0 0 3px rgba(255, 79, 139, .55)); }
.deco-halo .deco-svg { filter: drop-shadow(0 0 3px rgba(255, 230, 140, .75)); }
.deco-horns .deco-svg { filter: drop-shadow(0 0 3px rgba(255, 45, 85, .6)); }
.deco-aurora .deco-svg { filter: drop-shadow(0 0 2px #c9fff0); }
.deco-reviewer .deco-svg, .deco-premium .deco-svg { filter: drop-shadow(0 0 3px rgba(255, 201, 60, .6)); }
.deco-vision .deco-svg { filter: drop-shadow(0 0 3px rgba(85, 185, 255, .7)); }
.deco-ambassador .deco-svg { filter: drop-shadow(0 0 4px rgba(255, 110, 30, .8)); }

/* motion vocabulary — view-box elements rotate around the avatar centre */
.dk-spin { transform-origin: 60px 60px; animation: dk-rot 9s linear infinite; }
.dk-spin-slow { transform-origin: 60px 60px; animation: dk-rot 26s linear infinite; }
.dk-spin-rev { transform-origin: 60px 60px; animation: dk-rot 18s linear infinite reverse; }
.dk-spin-fill { transform-box: fill-box; transform-origin: center; animation: dk-rot 12s linear infinite; }
.dk-twinkle { transform-box: fill-box; transform-origin: center; animation: dk-twinkle 2.4s ease-in-out infinite; }
.dk-flicker { animation: dk-flicker 3.2s steps(1, end) infinite; }
.dk-ripple { transform-origin: 60px 60px; animation: dk-ripple 2.7s cubic-bezier(.2, .7, .3, 1) infinite; }
.dk-beat { transform-box: fill-box; transform-origin: center; animation: dk-beat 1.4s ease-in-out infinite; }
.dk-bubble { transform-box: fill-box; transform-origin: center; animation: dk-bubble 3.6s ease-in infinite; }
.dk-sway { transform-box: fill-box; transform-origin: center; animation: dk-sway 4.2s ease-in-out infinite; }
.dk-sway-slow { transform-box: fill-box; transform-origin: 70% 100%; animation: dk-sway 5s ease-in-out infinite; }
.dk-fall { transform-box: fill-box; transform-origin: center; animation: dk-fall 5.6s linear infinite; opacity: 0; }
.dk-rise { transform-box: fill-box; transform-origin: center; animation: dk-rise 4.6s ease-out infinite; opacity: 0; }
.dk-ember { transform-box: fill-box; transform-origin: center; animation: dk-ember 2.6s ease-out infinite; opacity: 0; }
.dk-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: dk-flame 1.2s ease-in-out infinite alternate; }
.dk-bob { animation: dk-bob 3s ease-in-out infinite; }
.dk-flap { transform-box: fill-box; transform-origin: 100% 70%; animation: dk-flap 2.6s ease-in-out infinite; }
.dk-ear-l, .dk-ear-r { transform-box: fill-box; transform-origin: 80% 90%; }
.dk-ear-r { animation: dk-ear 5.5s ease-in-out infinite; }
.dk-shine { animation: dk-shine 3.6s linear infinite; }

@keyframes dk-rot { to { transform: rotate(360deg); } }
@keyframes dk-twinkle { 0%, 100% { transform: scale(.45) rotate(0deg); opacity: .35; } 50% { transform: scale(1.08) rotate(45deg); opacity: 1; } }
@keyframes dk-flicker { 0%, 100% { opacity: 1; } 8% { opacity: .35; } 10% { opacity: 1; } 52% { opacity: .55; } 54% { opacity: 1; } 56% { opacity: .4; } 58% { opacity: 1; } }
@keyframes dk-ripple { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.17); opacity: 0; } }
@keyframes dk-beat { 0%, 40%, 100% { transform: scale(1); } 15% { transform: scale(1.28); } 28% { transform: scale(1.1); } }
@keyframes dk-bubble { 0% { transform: translateY(0) scale(.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-34px) scale(1.15); opacity: 0; } }
@keyframes dk-sway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes dk-fall { 0% { transform: translate(0, 0) rotate(0deg); opacity: 0; } 12% { opacity: 1; } 85% { opacity: .9; } 100% { transform: translate(-14px, 58px) rotate(260deg); opacity: 0; } }
@keyframes dk-rise { 0% { transform: translateY(0) scale(.5); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-62px) scale(1.15) rotate(12deg); opacity: 0; } }
@keyframes dk-ember { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(4px, -24px) scale(.3); opacity: 0; } }
@keyframes dk-flame { 0% { transform: scale(1, 1) skewX(0deg); } 35% { transform: scale(.9, 1.14) skewX(4deg); } 70% { transform: scale(1.06, .9) skewX(-3deg); } 100% { transform: scale(.96, 1.08) skewX(2deg); } }
@keyframes dk-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.6px); } }
@keyframes dk-flap { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-9deg); } }
@keyframes dk-ear { 0%, 84%, 100% { transform: rotate(0deg); } 88% { transform: rotate(-12deg); } 92% { transform: rotate(4deg); } 96% { transform: rotate(-6deg); } }
@keyframes dk-shine { to { stroke-dashoffset: -333; } }

/* ---------- 17.2 detail layers ---------- */
.deco-butterflies .deco-svg { filter: drop-shadow(0 0 2px rgba(124, 196, 255, .6)); }
.deco-lightning .deco-svg { filter: drop-shadow(0 0 3px #3aa8ff) drop-shadow(0 0 6px rgba(127, 216, 255, .6)); }
.deco-galaxy .deco-svg { filter: drop-shadow(0 0 2px #cdb8ff); }
.deco-autumn .deco-svg { filter: drop-shadow(0 1px 2px rgba(122, 47, 18, .45)); }
.deco-roses .deco-svg { filter: drop-shadow(0 1px 2px rgba(122, 10, 34, .5)); }
.dk-galaxy {
  -webkit-mask: radial-gradient(closest-side, transparent 80%, #000 84%, #000 94%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 80%, #000 84%, #000 94%, transparent 100%);
  background: conic-gradient(from 30deg, rgba(108, 76, 255, .0), rgba(108, 76, 255, .65), rgba(255, 106, 213, .5), rgba(47, 155, 255, .55), rgba(108, 76, 255, .0) 70%, rgba(205, 184, 255, .4));
  filter: blur(2px);
  animation: dk-rot 16s linear infinite;
}
.dk-flicker-fast { animation: dk-flicker 1.6s steps(1, end) infinite; }
.dk-shoot { animation: dk-shoot 4.8s ease-in infinite; opacity: 0; }
.dk-drip { transform-box: fill-box; transform-origin: top center; animation: dk-drip 3.2s ease-in infinite; opacity: 0; }
.dk-droplet { transform-box: fill-box; transform-origin: center; animation: dk-drip 2.8s ease-in infinite; opacity: 0; }
.dk-caustic { animation: dk-caustic 3.4s ease-in-out infinite; }
.dk-ecg { animation: dk-ecg 2.7s linear infinite; }
.dk-bell { transform-box: fill-box; transform-origin: 50% 0; animation: dk-bell 3.6s ease-in-out infinite; }
.dk-tail { transform-box: fill-box; transform-origin: 0 0; animation: dk-tail 3s ease-in-out infinite; }
.dk-hover { animation: dk-bob 2.4s ease-in-out infinite; }
.dk-wing-l { transform-box: fill-box; transform-origin: 100% 50%; animation: dk-wing .55s ease-in-out infinite alternate; }
.dk-zap { animation: dk-zap 1.6s steps(1, end) infinite; }
@keyframes dk-shoot { 0%, 70% { transform: translate(0, 0); opacity: 0; } 74% { opacity: 1; } 100% { transform: translate(-42px, 16px); opacity: 0; } }
@keyframes dk-drip { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(12px) scale(1); opacity: 0; } }
@keyframes dk-caustic { 0%, 100% { opacity: .2; } 50% { opacity: .9; } }
@keyframes dk-ecg { 0% { stroke-dashoffset: 80; opacity: 1; } 60% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -80; opacity: 0; } }
@keyframes dk-bell { 0%, 70%, 100% { transform: rotate(0deg); } 76% { transform: rotate(16deg); } 84% { transform: rotate(-12deg); } 92% { transform: rotate(6deg); } }
@keyframes dk-tail { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(10deg); } }
@keyframes dk-wing { from { transform: scaleX(1); } to { transform: scaleX(.35); } }
@keyframes dk-zap { 0%, 100% { opacity: 0; } 4% { opacity: 1; } 10% { opacity: .2; } 14% { opacity: 1; } 22% { opacity: 0; } }

/* custom decorations uploaded by administrators (transparent PNG / GIF / WebP, Discord-style 1.2× box) */
.deco-custom img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: auto; }
/* Discord originals: the untouched file, no filters, never clipped by the round avatar mask.
   The still frame is loaded only where it is shown (lazy images that are not displayed are not fetched). */
.deco-stored img { max-width: none; filter: none; user-select: none; -webkit-user-drag: none; }
.deco-stored .deco-still { display: none; }
.deco-hover .deco-stored .deco-anim { display: none; }
.deco-hover .deco-stored .deco-still { display: block; }
.deco-hover:hover .deco-stored .deco-anim, :hover > .deco-hover .deco-stored .deco-anim { display: block; }
.deco-hover:hover .deco-stored .deco-still, :hover > .deco-hover .deco-stored .deco-still { display: none; }

/* ---------- styled nicknames (Premium) ---------- */
.ts-name { display: inline; overflow-wrap: anywhere; }
.ts-name-solid { color: var(--ts-name-color) !important; }
.ts-name-gradient {
  color: var(--ts-name-color);
  background-image: var(--ts-name-gradient);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ts-name-gradient.is-animated { background-size: 200% 100%; animation: ts-name-flow 4s linear infinite; }
.ts-name.has-glow { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ts-name-color) 70%, transparent)); }
/* A gradient that passes through the page's own background (black on dark, white on light)
   erased letters mid-word; a hairline contour keeps any chosen gradient readable. */
html[data-theme="dark"] .ts-name-gradient { filter: drop-shadow(0 0 .6px rgba(255, 255, 255, .75)); }
html[data-theme="dark"] .ts-name-gradient.has-glow { filter: drop-shadow(0 0 .6px rgba(255, 255, 255, .75)) drop-shadow(0 0 6px color-mix(in srgb, var(--ts-name-color) 70%, transparent)); }
html:not([data-theme="dark"]) .ts-name-gradient { filter: drop-shadow(0 0 .6px rgba(0, 0, 0, .55)); }
html:not([data-theme="dark"]) .ts-name-gradient.has-glow { filter: drop-shadow(0 0 .6px rgba(0, 0, 0, .55)) drop-shadow(0 0 6px color-mix(in srgb, var(--ts-name-color) 70%, transparent)); }
@keyframes ts-name-flow { from { background-position: 0% 0; } to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { .ts-name-gradient.is-animated { animation: none; } }
.account-reduce-motion .ts-name-gradient.is-animated { animation: none; }

/* lists of many avatars animate only on hover (as in Discord) */
.deco-hover .deco-layer, .deco-hover .deco-layer * { animation-play-state: paused !important; }
.deco-hover:hover .deco-layer, .deco-hover:hover .deco-layer *,
:hover > .deco-hover .deco-layer, :hover > .deco-hover .deco-layer * { animation-play-state: running !important; }

@media (prefers-reduced-motion: reduce) {
  .deco-layer, .deco-layer * { animation: none !important; }
  .dk-fall, .dk-rise, .dk-ember, .dk-shoot, .dk-drip, .dk-droplet { opacity: 0 !important; }
  .dk-zap { opacity: .8 !important; }
}
.account-reduce-motion .deco-layer, .account-reduce-motion .deco-layer * { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .deco-stored .deco-anim, .deco-hover:hover .deco-stored .deco-anim, :hover > .deco-hover .deco-stored .deco-anim { display: none; }
  .deco-stored .deco-still, .deco-hover:hover .deco-stored .deco-still, :hover > .deco-hover .deco-stored .deco-still { display: block; }
}
.account-reduce-motion .deco-stored .deco-anim, .account-reduce-motion .deco-hover:hover .deco-stored .deco-anim { display: none; }
.account-reduce-motion .deco-stored .deco-still, .account-reduce-motion .deco-hover:hover .deco-stored .deco-still { display: block; }
.account-reduce-motion :is(.dk-fall, .dk-rise, .dk-ember, .dk-shoot, .dk-drip, .dk-droplet) { opacity: 0 !important; }
.account-reduce-motion .dk-zap { opacity: .8 !important; }

/* ---------- achievement medals ---------- */
.ts-medal { --medal-size: 56px; --m1: #e9edf5; --m2: #9aa3b5; --m3: #5d6578; --mf1: #4a5163; --mf2: #2c3140; --mg: rgba(170, 180, 200, .45); position: relative; display: inline-grid; place-items: center; flex: none; width: var(--medal-size); height: var(--medal-size); isolation: isolate; }
.ts-medal.medal-rare { --m1: #d6ecff; --m2: #4ea6ff; --m3: #1b58c9; --mf1: #2470d8; --mf2: #0f2f73; --mg: rgba(47, 155, 255, .55); }
.ts-medal.medal-epic { --m1: #f0dcff; --m2: #a774ff; --m3: #5a22c9; --mf1: #7a3cf0; --mf2: #33106e; --mg: rgba(138, 92, 255, .6); }
.ts-medal.medal-legendary { --m1: #fff6c8; --m2: #ffc93c; --m3: #b06e00; --mf1: #f0a20b; --mf2: #7a4300; --mg: rgba(255, 190, 40, .7); }
.ts-medal-rim, .ts-medal-face, .ts-medal-shine { position: absolute; clip-path: polygon(50% 0, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0 50%, 15% 15%); }
.ts-medal-rim { inset: 0; background: conic-gradient(from 200deg, var(--m1), var(--m2), var(--m3), var(--m2), var(--m1), var(--m2), var(--m3), var(--m1)); filter: drop-shadow(0 4px 10px var(--mg)); }
.ts-medal-face { inset: 12%; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--mf1) 70%, #fff), var(--mf1) 45%, var(--mf2)); box-shadow: inset 0 2px 4px rgba(255, 255, 255, .35), inset 0 -3px 6px rgba(0, 0, 0, .35); }
.ts-medal-face .ui-icon { width: 44%; height: 44%; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.ts-medal-shine { inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 48%, transparent 60%); background-size: 260% 100%; background-position: 120% 0; mix-blend-mode: screen; }
.ts-medal.medal-epic .ts-medal-shine, .ts-medal.medal-legendary .ts-medal-shine { animation: ts-medal-shine 3.6s ease-in-out infinite; }
.ts-medal-spark { position: absolute; width: 22%; height: 22%; background: radial-gradient(closest-side, #fff, transparent); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: ts-medal-spark 2.6s ease-in-out infinite; }
.ts-medal-spark.a { top: -4%; right: 2%; }
.ts-medal-spark.b { bottom: 6%; left: -2%; animation-delay: 1.3s; }
.ts-medal.is-locked { filter: grayscale(1) brightness(.75); opacity: .65; }
.ts-medal.is-locked .ts-medal-shine, .ts-medal.is-locked .ts-medal-spark { display: none; }
@keyframes ts-medal-shine { 0%, 55% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@keyframes ts-medal-spark { 0%, 100% { transform: scale(.3) rotate(0deg); opacity: 0; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ts-medal-shine, .ts-medal-spark { animation: none !important; } }