.tg { position: relative; display: inline-flex; align-items: center; flex: none; gap: 0.34em; height: 1.82em; padding: 0 0.62em; border-radius: 0.55em; color: #fff; font-size: 10.5px; font-style: normal; font-weight: 900; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; text-shadow: none; white-space: nowrap; vertical-align: middle; isolation: isolate; }
.tg::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--fill, #51607f); box-shadow: var(--rim, none); }
span.tg > b { position: relative; z-index: 2; margin: 0; font-weight: inherit; }
.tg-ico { position: relative; z-index: 2; flex: none; width: 1.3em; height: 1.3em; fill: currentColor; }
.tg-clip { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.tg-shine { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%); transform: translateX(-130%); animation: tg-shine 4.2s ease-in-out infinite; }
.tg-scan { position: absolute; left: 0; right: 0; top: 0; height: 0.36em; background: linear-gradient(180deg, transparent, rgba(180, 255, 160, 0.6), transparent); transform: translateY(-120%); animation: tg-scan 3.2s ease-in-out infinite; }
.tg-aura { position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none; opacity: 0.4; animation: tg-pulse 2.4s ease-in-out infinite; }
.tg-wick { position: absolute; left: 0.77em; top: 0.68em; z-index: 1; width: 1em; height: 0.82em; border-radius: 50%; background: radial-gradient(closest-side, #fff4b8, #ffc23a 60%, rgba(255, 160, 40, 0)); pointer-events: none; animation: tg-wick 2.8s linear infinite; }
.tg-rays { position: absolute; left: 50%; top: 50%; z-index: -3; width: 4.6em; height: 4.6em; margin: -2.3em 0 0 -2.3em; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 228, 140, 0.6) 0deg 6deg, transparent 6deg 30deg); -webkit-mask: radial-gradient(closest-side, #000 30%, transparent); mask: radial-gradient(closest-side, #000 30%, transparent); pointer-events: none; animation: tg-spin 16s linear infinite; }
.tg-spark { position: absolute; z-index: 3; width: 0.62em; height: 0.62em; background: #fffbe6; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; pointer-events: none; animation: tg-twinkle 2.4s ease-in-out infinite; }
.tg-spark.s0 { left: 6%; top: -0.24em; }
.tg-spark.s1 { right: 22%; top: -0.3em; animation-delay: -0.8s; }
.tg-spark.s2 { right: -0.26em; bottom: -0.18em; animation-delay: -1.6s; }

.tg-og { --fill: linear-gradient(135deg, #0a1f40, #12427a 55%, #0b2550); --rim: inset 0 0 0 1px rgba(255, 215, 120, 0.6), 0 1px 3px rgba(0, 0, 0, 0.35); color: #ffd778; }
.tg-og > b { background: linear-gradient(90deg, #8be9ff, #ffe39a); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.tg-halloween { --fill: linear-gradient(180deg, #ffab3d, #f07614 55%, #c94f08); --rim: inset 0 0 0 1px rgba(26, 10, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.35); color: #170900; }
.tg-halloween > b { text-shadow: 0 1px 0 rgba(255, 214, 140, 0.45); }
.tg-alien { --fill: radial-gradient(120% 140% at 50% 115%, #1f7a35, #0a2412 60%, #050f08); --rim: inset 0 0 0 1px rgba(120, 255, 110, 0.6); color: #a6ff7d; }
.tg-alien > b { text-shadow: 0 0 0.4em rgba(80, 255, 120, 0.85); }
.tg-alien .tg-aura { box-shadow: 0 0 0.5em 0.1em rgba(70, 255, 110, 0.75); }
.tg-donator { --fill: linear-gradient(120deg, #4a0a26, #a3164d 60%, #ff3d77); --rim: inset 0 0 0 1px rgba(255, 215, 107, 0.45); color: #ffd76b; }
.tg-donator > b { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); }

.tg-staff.mod { --st: #3d8bfd; --st2: #1c4fa8; --ink: #d8e8ff; }
.tg-staff.admin { --st: #ef4b45; --st2: #8f1a22; --ink: #ffe0de; }
.tg-staff > b { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); }
.tg-staff.trial { --fill: rgba(8, 12, 20, 0.45); --rim: inset 0 0 0 1px var(--st); color: var(--ink); }
.tg-staff.junior { --fill: linear-gradient(180deg, var(--st2), color-mix(in srgb, var(--st2) 70%, #000)); --rim: inset 0 0 0 1px var(--st); }
.tg-staff.full { --fill: linear-gradient(180deg, var(--st), var(--st2)); --rim: 0 1px 3px rgba(0, 0, 0, 0.35); }
.tg-staff.senior { --fill: linear-gradient(180deg, var(--st), var(--st2)); --rim: inset 0 0 0 1px #ffd778, 0 1px 3px rgba(0, 0, 0, 0.35); }
.tg-staff.root { --fill: linear-gradient(180deg, #ffd56a, #b07a14); --rim: inset 0 0 0 1px #fff0b8; color: #2a1a00; }
.tg-staff.root > b { text-shadow: 0 1px 0 rgba(255, 240, 200, 0.5); }
.tg-staff.root .tg-aura { box-shadow: 0 0 0.6em rgba(255, 200, 70, 0.7); }

.tg-god { gap: 0.2em; padding: 0 0.72em 0 0.24em; --fill: linear-gradient(180deg, #2c1f05, #120c02); --rim: inset 0 0 0 1px #ffe08a, 0 0 0 1px rgba(255, 210, 63, 0.35); color: #fff3c4; }
.tg-god > b { background: linear-gradient(90deg, #fffaf0, #ffd23f 45%, #fff6d8 70%, #ffc23a); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; letter-spacing: 0.16em; }
.tg-god .tg-aura { box-shadow: 0 0 0.7em 0.15em rgba(255, 214, 90, 0.85), 0 0 1.6em 0.3em rgba(255, 240, 190, 0.35); animation-duration: 1.8s; }
.tg-god .tg-shine { animation-duration: 3s; }

.tg-truelegend { --fill: linear-gradient(100deg, #ffffff, #fff3cf 34%, #ffd462 70%, #d8951a); --rim: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(196, 132, 18, 0.6), 0 1px 3px rgba(0, 0, 0, 0.35); color: #4a2f00; }
.tg-truelegend > b { letter-spacing: 0.1em; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); }
.tg-truelegend .tg-ico { color: #9a6400; }
.tg-truelegend .tg-aura { box-shadow: 0 0 0.6em 0.12em rgba(255, 226, 140, 0.85), 0 0 1.4em 0.25em rgba(255, 255, 255, 0.3); }
.tg-truelegend .tg-shine { background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.95) 50%, transparent 70%); animation-duration: 3.4s; }
.tg-truelegend .tg-spark { background: #fffdf2; }
.tg-truelegend .tg-spark.s1 { background: #ffd462; }
.iv-art .tg-truelegend { height: auto; min-height: 1.82em; max-width: 100%; padding: 0.34em 0.6em; white-space: normal; }
.iv-art .tg-truelegend > b { min-width: 0; line-height: 1.15; text-align: center; }

.tg-rank { gap: 0; height: auto; padding: 0; }
.tg-rank::before { content: none; }
.tg > .rf, .tg > .rk-emblem { position: relative; z-index: 2; flex: none; }

.ink { position: relative; }
.ink-halloween::before, .ink-alien::before, .ink-god::before, .ink-god::after { content: attr(data-t); position: absolute; left: 0; top: 0; white-space: pre; pointer-events: none; }
.ink-og { background: linear-gradient(90deg, #4fd8ff, #9fe9ff 40%, #ffd778 75%, #ffc24a); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; }
.ink-halloween { color: #ff8a1f; -webkit-text-fill-color: #ff8a1f; text-shadow: 1px 1px 0 #1a0b00, -1px 1px 0 #1a0b00, 1px -1px 0 #1a0b00, -1px -1px 0 #1a0b00; }
.ink-halloween::before { z-index: -1; color: transparent; -webkit-text-fill-color: transparent; text-shadow: 0 0 6px #ffb02e, 0 0 12px rgba(255, 120, 20, 0.8); animation: tg-wick 2.8s linear infinite; }
.ink-alien { color: #9dff6e; -webkit-text-fill-color: #9dff6e; text-shadow: 0 0 4px rgba(60, 255, 110, 0.55); }
.ink-alien::before { z-index: -1; color: transparent; -webkit-text-fill-color: transparent; text-shadow: 0 0 6px #46ff6e, 0 0 13px rgba(40, 255, 100, 0.8); opacity: 0.3; animation: tg-pulse 2.4s ease-in-out infinite; }
.ink-god { color: #fff1bf; -webkit-text-fill-color: #fff1bf; text-shadow: 0 0 4px rgba(255, 210, 63, 0.9); }
.ink-god::before { z-index: -1; color: transparent; -webkit-text-fill-color: transparent; text-shadow: 0 0 7px #ffd23f, 0 0 16px rgba(255, 236, 170, 0.9), 0 0 26px rgba(255, 190, 40, 0.6); opacity: 0.35; animation: tg-pulse 1.8s ease-in-out infinite; }
.ink-god::after { z-index: 1; background: linear-gradient(90deg, #ffd23f, #fffaf0 50%, #ffc23a); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; opacity: 0; animation: ink-swap 3.6s ease-in-out infinite; }
.ink-staff.mod { color: #8fc0ff; -webkit-text-fill-color: #8fc0ff; }
.ink-staff.admin { color: #ff8f88; -webkit-text-fill-color: #ff8f88; }
.ink-staff.root { color: #ffd56a; -webkit-text-fill-color: #ffd56a; }
.ink-spark { position: absolute; z-index: 2; width: 0.5em; height: 0.5em; background: #fffbe6; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; pointer-events: none; animation: tg-twinkle 2.6s ease-in-out infinite; }
.ink-spark.s0 { right: -0.42em; top: -0.28em; }
.ink-spark.s1 { left: -0.3em; bottom: -0.12em; width: 0.4em; height: 0.4em; animation-delay: -1.3s; }
.ink-og .ink-spark { background: #ffe9a8; }

.fx-off, .fx-off *, .fx-off::before, .fx-off::after, .fx-off *::before, .fx-off *::after { animation: none !important; }

@keyframes tg-shine { 0%, 60% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@keyframes tg-scan { 0%, 55% { transform: translateY(-120%); } 100% { transform: translateY(560%); } }
@keyframes tg-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes tg-wick { 0%, 100% { opacity: 1; } 18% { opacity: 0.7; } 30% { opacity: 0.95; } 52% { opacity: 0.55; } 64% { opacity: 1; } 82% { opacity: 0.75; } }
@keyframes tg-spin { to { transform: rotate(360deg); } }
@keyframes tg-twinkle { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(90deg); } }
@keyframes ink-swap { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

html[data-motion="lite"] .tg-rays, html[data-motion="lite"] .tg-spark, html[data-motion="lite"] .tg-scan, html[data-motion="lite"] .ink-spark { display: none; }
html[data-motion="lite"] .tg-shine { animation-duration: 9s; }
html[data-motion="lite"] .tg-aura, html[data-motion="lite"] .tg-wick, html[data-motion="lite"] .ink::before, html[data-motion="lite"] .ink::after { animation: none; }
html[data-still] .tg *, html[data-still] .ink::before, html[data-still] .ink::after, html[data-still] .ink * { animation: none !important; }
html[data-still] .tg-rays, html[data-still] .tg-spark, html[data-still] .ink-spark { display: none; }
@media (prefers-reduced-motion: reduce) {
  .tg-rays, .tg-spark, .tg-scan, .ink-spark { display: none; }
  .tg *, .ink::before, .ink::after { animation: none !important; }
}

.mc .uname .tg, .dm .uname .tg { font-size: 11.5px; }
.pf-who .tg { font-size: 13px; }
.chat-line .tg, .bx-chat-line .tg { margin-right: 5px; font-size: 9.5px; vertical-align: 1px; }
.chat-line .tg-rank, .bx-chat-line .tg-rank { vertical-align: -3px; }
.chat:not(.open) .chat-line.gone *, .chat:not(.open) .chat-line.gone *::before, .chat:not(.open) .chat-line.gone *::after, .bx-chat:not(.open) .bx-chat-line.old *, .bx-chat:not(.open) .bx-chat-line.old *::before, .bx-chat:not(.open) .bx-chat-line.old *::after { animation: none !important; }
