/*
 * TravTools · © MUNLabs
 * Badges — Verified-Siegel (Inline-SVG, _shared/badges.php)
 *
 * Das Badge sitzt direkt hinter dem Spielernamen und ist immer relativ zur
 * Schriftgroesse des Namens (1.06em). Dadurch ist es auf jeder Seite gleich
 * proportional. Die alten Groessen-Klassen bleiben als Marker erhalten,
 * veraendern die Groesse aber nicht mehr.
 */
.tt-badge,
.tt-chat-badge,
.tt-badge-icon{display:none!important;}

.tt-vbadge,
.tt-badge-img{
  display:inline-block!important;
  width:1.06em!important;
  height:1.06em!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  margin:0 0 0 .04em!important;
  padding:0!important;
  vertical-align:-.17em!important;
  line-height:0!important;
  flex:0 0 auto!important;
  background:none!important;
  border:none!important;
  box-shadow:none!important;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.35));
  -webkit-user-select:none;user-select:none;
}
.tt-vbadge svg{display:block!important;width:100%!important;height:100%!important;overflow:visible;}

/* Groessen-Klassen: alle gleich (Marker fuer bestehende Aufrufe) */
.tt-vbadge[class*="tt-badge-size-"]{width:1.06em!important;height:1.06em!important;}

/* Stufen-Glow */
.tt-vbadge-lvl2,.tt-badge-lvl2{filter:drop-shadow(0 0 3px rgba(242,193,74,.45));}
.tt-vbadge-lvl3,.tt-badge-lvl3{filter:drop-shadow(0 0 3px rgba(123,157,255,.45));}
.tt-vbadge-lvl4,.tt-badge-lvl4{filter:drop-shadow(0 0 3px rgba(61,108,245,.6)) drop-shadow(0 0 8px rgba(242,193,74,.3));}
.tt-vbadge-lvl5,.tt-badge-lvl5{filter:drop-shadow(0 0 3px rgba(242,193,74,.7)) drop-shadow(0 0 9px rgba(61,108,245,.4));}

/* Grosse Vorschau (Profil-Widget, Badge-Verwaltung): ueber die Schriftgroesse des Containers */
.tt-supporter-badge{font-size:34px;}
.tt-badge-preview-icon{font-size:40px;line-height:1;}
.tt-badge-preview-icon .tt-vbadge{margin-left:0!important;}
.tt-badge-showcase .tt-vbadge,.tt-badge-row .tt-vbadge{margin-left:.28em!important;}
.tt-name-inline{display:inline!important;white-space:nowrap;}

/* =====================================================================
   Effekte je Stufe (r87)

   Platin leicht, Diamant deutlich, Elite auffaellig – so, dass man beim
   Ueberfliegen einer Namensliste sofort sieht, wo jemand hoeher steht.

   Alles haengt an .tt-vb-fx. Ohne diese Klasse (Schalter aus in der
   Abzeichenverwaltung) steht jedes Siegel still. Wer in seinem System
   weniger Bewegung eingestellt hat, bekommt sie ebenfalls nicht – das
   steht ganz unten und gilt fuer alles hier.

   Bewegt werden nur transform, opacity, filter und stroke-dashoffset.
   Die laufen auf der Grafikkarte; eine Liste mit hundert Namen kostet
   damit nichts.
   ===================================================================== */

/* ---------- Platin: ein leiser Schimmer, der ueber das Siegel zieht ---------- */
.tt-vb-fx.tt-vbadge-lvl3{ filter:drop-shadow(0 0 3px rgba(45,226,193,.55)); animation:tt-vb-atem3 4.2s ease-in-out infinite; }
.tt-vb-fx.tt-vbadge-lvl3 .tt-vb-gloss{ animation:tt-vb-schimmer 4.2s ease-in-out infinite; }
@keyframes tt-vb-atem3{
  0%,100%{ filter:drop-shadow(0 0 3px rgba(45,226,193,.45)); }
  50%    { filter:drop-shadow(0 0 5px rgba(45,226,193,.8)); }
}
@keyframes tt-vb-schimmer{
  0%,68%,100%{ opacity:.26; transform:translate(0,0); }
  78%        { opacity:.62; transform:translate(4px,3px); }
  88%        { opacity:.26; transform:translate(8px,6px); }
}

/* ---------- Diamant: kraeftiges Pulsen, drehender Kranz, wanderndes Glanzlicht ---------- */
.tt-vb-fx.tt-vbadge-lvl4{ animation:tt-vb-atem4 2.6s ease-in-out infinite; }
.tt-vb-fx.tt-vbadge-lvl4 .tt-vb-flare{ transform-origin:12px 12px; animation:tt-vb-dreh 9s linear infinite, tt-vb-funkeln 2.6s ease-in-out infinite; }
.tt-vb-fx.tt-vbadge-lvl4 .tt-vb-gloss{ animation:tt-vb-schimmer 2.6s ease-in-out infinite; }
@keyframes tt-vb-atem4{
  0%,100%{ filter:drop-shadow(0 0 3px rgba(61,108,245,.7)) drop-shadow(0 0 7px rgba(242,193,74,.3)); }
  50%    { filter:drop-shadow(0 0 6px rgba(123,157,255,1)) drop-shadow(0 0 13px rgba(242,193,74,.55)); }
}
@keyframes tt-vb-dreh{ to{ transform:rotate(360deg); } }
@keyframes tt-vb-funkeln{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

/* ---------- Elite: Laeufer am Rand, Haken zeichnet sich neu, Kranz dreht ---------- */
.tt-vb-fx.tt-vbadge-lvl5{ animation:tt-vb-atem5 2.2s ease-in-out infinite; }
/* Der Laeufer: ein kurzes Stueck Licht, das einmal in 2,4 s um das Siegel wandert.
   Der Rest der Linie ist durch stroke-dasharray unsichtbar. */
.tt-vb-fx.tt-vbadge-lvl5 .tt-vb-runner{ animation:tt-vb-lauf 2.4s linear infinite; }
/* Der Haken laeuft alle paar Sekunden neu ein und bleibt dann stehen –
   nicht dauerhaft in Bewegung, sonst wird es unruhig. */
.tt-vb-fx.tt-vbadge-lvl5 .tt-vb-check{ stroke-dasharray:100; animation:tt-vb-haken 3.6s cubic-bezier(.65,0,.35,1) infinite; }
.tt-vb-fx.tt-vbadge-lvl5 .tt-vb-flare{ transform-origin:12px 12px; animation:tt-vb-dreh 6s linear infinite, tt-vb-funkeln 2.2s ease-in-out infinite; }
.tt-vb-fx.tt-vbadge-lvl5 .tt-vb-gloss{ animation:tt-vb-schimmer 2.2s ease-in-out infinite; }
@keyframes tt-vb-atem5{
  0%,100%{ filter:drop-shadow(0 0 3px rgba(242,193,74,.8)) drop-shadow(0 0 8px rgba(226,75,74,.45)); }
  50%    { filter:drop-shadow(0 0 7px rgba(255,216,106,1)) drop-shadow(0 0 16px rgba(226,75,74,.75)); }
}
@keyframes tt-vb-lauf{ from{ stroke-dashoffset:0; } to{ stroke-dashoffset:-100; } }
@keyframes tt-vb-haken{
  0%      { stroke-dashoffset:100; }
  22%     { stroke-dashoffset:0; }
  82%     { stroke-dashoffset:0; }
  92%,100%{ stroke-dashoffset:-100; }
}

/* Grosse Ansichten (Profil, Abzeichenverwaltung): dort darf es etwas mehr sein,
   weil das Siegel dort allein steht und nicht neben hundert Namen. */
.tt-supporter-badge .tt-vb-fx.tt-vbadge-lvl5,
.tt-badge-preview-icon .tt-vb-fx.tt-vbadge-lvl5{ animation-duration:1.8s; }
.tt-supporter-badge .tt-vb-fx.tt-vbadge-lvl5 .tt-vb-runner,
.tt-badge-preview-icon .tt-vb-fx.tt-vbadge-lvl5 .tt-vb-runner{ stroke-width:2.2; }

/* Wer weniger Bewegung eingestellt hat, bekommt die Farben, aber keine Animation. */
@media (prefers-reduced-motion: reduce){
  .tt-vb-fx, .tt-vb-fx *{ animation:none!important; }
}