/* MineDemon Tags (2026-10): Rang-, Clan-, Clan-Level- und Discord-Tags im Pixel-Stil des Logos.
   Ein Baustein für alle Seiten (Ranking, Stats, Clans, Team, Chat, Markt): .md-tag + Varianten.
   Markup kommt aus main.js (rankBadgeHtml, discordVerifiedBadgeHtml, discordBoosterBadgeHtml, clanBadgeHtml,
   clanEloBadgeHtml, clanLevelMiniHtml). Die alten Klassen (.rank-badge, .clan-elo-pill ...) bleiben am Element,
   damit die Effekt-Einstellungen aus dem Setup weiter greifen; hier wird nur das Aussehen vereinheitlicht.
   Doppelte Klasse (.md-tag.md-tag) = höhere Spezifität als die vielen Seiten-Regeln in style.css. */

body.v2 .md-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }

body.v2 .md-tag.md-tag {
  --tag-color: var(--rank-color, #b388ff);
  --tag-edge: #050308;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  min-height: 26px;
  margin: 0;
  padding: 0 9px 0 4px !important;
  overflow: hidden;
  vertical-align: middle;
  white-space: nowrap;
  cursor: default;
  font: 900 11px/1 var(--v2-font, system-ui, sans-serif) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff !important;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0 2px, transparent 2px),
    linear-gradient(90deg, color-mix(in srgb, var(--tag-color) 42%, #0d0915) 0%, color-mix(in srgb, var(--tag-color) 16%, #0d0915) 100%) !important;
  border: 0 !important;
  box-shadow:
    inset 0 0 0 2px var(--tag-edge),
    inset 0 0 0 3px color-mix(in srgb, var(--tag-color) 60%, transparent),
    inset 0 -4px 0 rgba(0, 0, 0, 0.28) !important;
  clip-path: var(--px-clip, none);
  transform: none;
  animation: none;
  transition: transform 0.12s steps(2, end), filter 0.12s ease;
}

body.v2 .md-tag.md-tag:hover,
body.v2 .md-tag.md-tag:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.18) saturate(1.1);
}

/* Symbol-Kachel: Minecraft-Item in einem dunklen Slot, wie im Inventar */
body.v2 .md-tag.md-tag .md-tag-ico,
body.v2 .md-tag.md-tag > .md-tag-ico-img {
  flex: none;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  margin: 0;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tag-color) 45%, transparent), inset 2px 2px 0 rgba(0, 0, 0, 0.45);
  color: var(--tag-color);
  font-size: 10px;
  object-fit: contain;
  image-rendering: pixelated;
}
body.v2 .md-tag.md-tag .md-tag-ico img {
  width: 14px;
  height: 14px;
  margin: 0;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.6));
  transition: transform 0.12s steps(2, end);
}
body.v2 .md-tag.md-tag .md-tag-ico i { width: auto; color: inherit; filter: none; transform: none; animation: none; }
body.v2 .md-tag.md-tag:hover .md-tag-ico img { transform: translateY(-1px) scale(1.15); }

/* Seiten-Regeln wie ".leader-player b" dürfen Schrift und Abstände im Tag nicht verändern */
body.v2 .md-tag.md-tag b,
body.v2 .md-tag.md-tag strong,
body.v2 .md-tag.md-tag span:not(.md-tag-ico):not(.md-lvl) {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
  background: none;
  box-shadow: none;
}

body.v2 .md-tag.md-tag .md-tag-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

/* groß (Stats-Profil, Popups) */
body.v2 .md-tag.md-tag.md-tag-lg { min-height: 34px; gap: 8px; padding: 0 12px 0 5px !important; font-size: 13px !important; }
body.v2 .md-tag.md-tag.md-tag-lg .md-tag-ico { width: 24px; height: 24px; font-size: 13px; }
body.v2 .md-tag.md-tag.md-tag-lg .md-tag-ico img { width: 18px; height: 18px; }

/* ---------- Ränge ---------- */
body.v2 .md-tag.md-tag.md-tier-staff {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0 2px, transparent 2px),
    linear-gradient(90deg, color-mix(in srgb, var(--tag-color) 62%, #120a14) 0%, color-mix(in srgb, var(--tag-color) 28%, #0d0915) 100%) !important;
}
body.v2 .md-tag.md-tag.md-tier-premium {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0 2px, transparent 2px),
    linear-gradient(90deg, color-mix(in srgb, var(--tag-color) 48%, #0d0915) 0%, color-mix(in srgb, var(--tag-color) 14%, #0d0915) 70%, color-mix(in srgb, var(--tag-color) 26%, #0d0915) 100%) !important;
}
body.v2 .md-tag.md-tag.md-tier-player,
body.v2 .md-tag.md-tag.rank-empty { --tag-color: #8f86a3; color: #ddd6ea !important; }
body.v2 .md-tag.md-tag.md-tag-more { --tag-color: #6d6382; padding: 0 8px !important; color: #e6def4 !important; cursor: help; }

/* ---------- Discord ---------- */
body.v2 .md-tag.md-tag.md-tag-discord { --tag-color: #5865f2; }
body.v2 .md-tag.md-tag.md-tag-discord .md-tag-ico { color: #c7cbff; font-size: 11px; }
body.v2 .md-tag.md-tag .md-tag-check {
  flex: none;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  margin-left: -1px;
  font-size: 8px;
  color: #052e16;
  background: #4ade80;
  box-shadow: inset 0 0 0 1px #052e16, inset -2px -2px 0 rgba(0, 0, 0, 0.2);
  filter: none;
  transform: none;
}
body.v2 .md-tag.md-tag.md-tag-boost { --tag-color: #ff73fa; }

/* ---------- Clan ---------- */
body.v2 .md-tag.md-tag.md-tag-clan {
  --tag-color: var(--clan-color, var(--clan-elo-color, #b388ff));
  padding-right: 4px !important;
  /* Clanfarben sind oft Neon (Level-Paletten): als Fläche gedämpft, als Rand und Kürzel kräftig */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px),
    linear-gradient(90deg, color-mix(in srgb, var(--tag-color) 24%, #0d0915) 0%, color-mix(in srgb, var(--tag-color) 8%, #0d0915) 100%) !important;
  text-transform: none;
  letter-spacing: 0.02em;
  cursor: default;
}
body.v2 button.md-tag.md-tag.md-tag-clan { cursor: pointer; }
body.v2 .md-tag.md-tag.md-tag-clan > .md-tag-ico-img { width: 20px; height: 20px; padding: 1px; flex-basis: 20px; }
body.v2 .md-tag.md-tag.md-tag-clan .md-tag-text { display: inline-flex; align-items: baseline; gap: 5px; }
body.v2 .md-tag.md-tag .md-clan-short { color: color-mix(in srgb, var(--tag-color) 70%, #fff); font-weight: 900; letter-spacing: 0.04em; }
body.v2 .md-tag.md-tag .md-clan-name { overflow: hidden; text-overflow: ellipsis; }
body.v2 .md-tag.md-tag .md-tag-sub { color: #cbbfe0; font-weight: 800; font-size: 0.92em; letter-spacing: 0; text-transform: none; }
body.v2 .md-tag.md-tag.md-tag-clan.empty { --tag-color: #6d6382; padding-right: 9px !important; color: #cbbfe0 !important; }

/* Clan-Level: kleiner Block in der Level-Farbe (Setup-Farben über --clan-level-color) */
body.v2 .md-lvl.md-lvl {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 18px;
  margin: 0 0 0 2px;
  padding: 0 5px 0 2px;
  font: 900 10px/1 var(--v2-font, system-ui, sans-serif);
  letter-spacing: 0.02em;
  text-transform: none;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
  background: color-mix(in srgb, var(--clan-level-color, #b388ff) 38%, #07050b) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--clan-level-border-color, var(--clan-level-color, #b388ff)) 80%, #000) !important;
  overflow: hidden;
}
body.v2 .md-lvl.md-lvl .clan-level-mini-image { width: 14px; height: 14px; margin: 0; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.55)); }
body.v2 .md-lvl.md-lvl .md-lvl-text { white-space: nowrap; }

/* ---------- Effekte ----------
   Die eingebauten Deko-Pseudoelemente der alten Badges entfallen; Setup-Effekte (rank-effect-* / clan-effect-*)
   behalten ihre eigenen ::before/::after. */
body.v2 .md-tag.md-tag:not(.rank-effect-custom):not([class*="clan-effect-"])::before,
body.v2 .md-tag.md-tag:not(.rank-effect-custom):not([class*="clan-effect-"])::after { content: none; }

/* Glanz: ein Pixel-Lichtstreifen läuft in Stufen über den Tag (Team, Demon, Booster) */
body.v2 .md-tag.md-tag.md-fx-shine:not(.rank-effect-custom)::after,
body.v2 .md-tag.md-tag.md-fx-crown:not(.rank-effect-custom)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 10px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0 2px, rgba(255, 255, 255, 0.55) 2px 4px, rgba(255, 255, 255, 0.25) 4px 8px, transparent 8px);
  transform: translateX(-16px) skewX(-18deg);
  animation: md-tag-shine 4.2s steps(14, end) infinite;
}
body.v2 .md-tag.md-tag.md-fx-crown {
  --tag-color: var(--rank-color, #d04a4a);
  animation: md-tag-crown 2.4s ease-in-out infinite;
}
body.v2 .md-tag.md-tag.md-fx-crown .md-tag-ico img { animation: md-tag-bob 1.6s steps(4, end) infinite; }
body.v2 .md-tag.md-tag.md-fx-shine:hover::after,
body.v2 .md-tag.md-tag.md-fx-crown:hover::after { animation-duration: 1.2s; }

@keyframes md-tag-shine {
  0%, 62% { transform: translateX(-16px) skewX(-18deg); }
  100% { transform: translateX(260px) skewX(-18deg); }
}
@keyframes md-tag-crown {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--tag-edge), inset 0 0 0 3px color-mix(in srgb, var(--tag-color) 60%, transparent), inset 0 -4px 0 rgba(0, 0, 0, 0.28); }
  50% { box-shadow: inset 0 0 0 2px var(--tag-edge), inset 0 0 0 3px color-mix(in srgb, var(--tag-color) 95%, #fff), inset 0 0 12px color-mix(in srgb, var(--tag-color) 55%, transparent), inset 0 -4px 0 rgba(0, 0, 0, 0.28); }
}
@keyframes md-tag-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
  body.v2 .md-tag.md-tag,
  body.v2 .md-tag.md-tag::after,
  body.v2 .md-tag.md-tag .md-tag-ico img { animation: none !important; transition: none !important; }
  body.v2 .md-tag.md-tag.md-fx-shine::after,
  body.v2 .md-tag.md-tag.md-fx-crown::after { content: none; }
}

/* Plätze, an denen die alten Badges eine eigene Größe hatten */
body.v2 .stats-primary-rank .md-tag.md-tag { min-height: 36px; }
body.v2 .clan-member-ranks .md-tags,
body.v2 .homepage-chat-ranks.md-tags { gap: 4px; }
body.v2 .homepage-chat-ranks .md-tag.md-tag { min-height: 20px; padding: 0 6px 0 2px !important; font-size: 9px !important; gap: 4px; }
body.v2 .homepage-chat-ranks .md-tag.md-tag .md-tag-ico { width: 14px; height: 14px; }
body.v2 .homepage-chat-ranks .md-tag.md-tag .md-tag-ico img { width: 11px; height: 11px; }