/* ============================================================
   WaveBlue© — Avatar Animator CSS v2.0
   Fortnite-Style 3D Ring Podium + Spotlight + Tiefenschatten
   ============================================================ */

/* ── 1. CSS Custom Properties ─────────────────────────────── */
.av-podium-wrapper {
  --civ-color: #6C63FF;
  --civ-color-glow: rgba(108, 99, 255, 0.4);
}

/* ── 2. Plattform-Widget (Fortnite-Style) ─────────────────── */
.av-podium-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 130px;
  user-select: none;
}

/* Spotlight-Kegel von oben (wie Fortnite-Bühnen-Spot) */
.av-podium-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 85%;
  background: radial-gradient(ellipse 55% 100% at 50% 0%,
    var(--civ-color-glow) 0%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: av-spotlight-breathe 3.5s ease-in-out infinite;
}

/* Boden-Glow unter dem Charakter */
.av-podium-wrapper::after {
  content: '';
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 30px;
  background: radial-gradient(ellipse 100% 100% at 50% 100%,
    var(--civ-color-glow) 0%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: av-ground-glow 2.5s ease-in-out infinite;
}

@keyframes av-spotlight-breathe {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 0.85; }
}
@keyframes av-ground-glow {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) scaleX(1); }
  50%       { opacity: 1;   transform: translateX(-50%) scaleX(1.1); }
}

.av-podium-svg-container {
  width: 120px;
  height: 140px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
  z-index: 1;
}
.av-podium-svg-container svg { width: 100%; height: 100%; overflow: visible; }

/* ── 3D Ring Plattform (Fortnite Lobby Ring) ──────────────── */
.av-podium-platform {
  width: 105px;
  height: 105px;
  border-radius: 50%;
  border: 2.5px solid var(--civ-color);
  background: radial-gradient(circle,
    var(--civ-color-glow) 0%,
    transparent 65%);
  box-shadow:
    0 0 12px var(--civ-color),
    0 0 28px var(--civ-color-glow),
    inset 0 0 22px var(--civ-color-glow);
  /* Perspektiv-Kipp → sieht aus wie Ring auf dem Boden */
  transform: perspective(200px) rotateX(72deg);
  margin-top: -52px;
  position: relative;
  z-index: 0;
  animation: av-ring-pulse 2.8s ease-in-out infinite;
}

@keyframes av-ring-pulse {
  0%, 100% {
    box-shadow: 0 0 12px var(--civ-color), 0 0 28px var(--civ-color-glow), inset 0 0 22px var(--civ-color-glow);
    opacity: 0.9;
  }
  50% {
    box-shadow: 0 0 22px var(--civ-color), 0 0 55px var(--civ-color-glow), 0 0 80px var(--civ-color-glow), inset 0 0 40px var(--civ-color-glow);
    opacity: 1;
  }
}

.av-action-buttons { display:flex; gap:6px; margin-top:10px; position: relative; z-index: 2; }
.av-action-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; padding: 4px 8px;
  font-size: 0.75rem; cursor: pointer;
  color: var(--fg, #f0f0f5);
  transition: background 0.15s, border-color 0.15s;
}
.av-action-btn:hover { background: rgba(255,255,255,0.12); border-color: var(--civ-color); }

/* ── 3. Speech Bubble ─────────────────────────────────────── */
.av-speech-bubble {
  position: absolute;
  top: -42px; left: 50%;
  transform: translateX(-50%) scale(0.85);
  background: var(--surface-2, #18181f);
  border: 1px solid var(--civ-color);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 0.7rem;
  color: var(--fg, #f0f0f5);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 10px var(--civ-color-glow);
  z-index: 10;
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.av-speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -7px; left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--civ-color);
  border-bottom: none;
}
.av-speech-bubble.visible { opacity: 1; transform: translateX(-50%) scale(1); }

/* ── 4. Idle-Keyframes ────────────────────────────────────── */

/* HUMAN */
@keyframes av-breathe { 0%,100%{transform:scaleY(1) translateY(0)} 50%{transform:scaleY(1.03) translateY(-1px)} }
@keyframes av-blink { 0%,94%,100%{transform:scaleY(1)} 96%{transform:scaleY(0.05)} }

/* SOLDIER */
@keyframes av-salute-arm { 0%,60%,100%{transform:rotate(0deg)} 20%,45%{transform:rotate(-55deg) translateY(-4px)} }

/* WARRIOR */
@keyframes av-warrior-look { 0%,40%,100%{transform:rotate(0deg)} 15%{transform:rotate(-8deg)} 65%{transform:rotate(8deg)} }

/* ANIME */
@keyframes av-anime-hop { 0%,100%{transform:translateY(0)} 30%{transform:translateY(-8px)} 50%{transform:translateY(-10px)} 70%{transform:translateY(-4px)} }
@keyframes av-hair-wave { 0%,100%{transform:rotate(0deg) skewX(0deg)} 25%{transform:rotate(3deg) skewX(2deg)} 75%{transform:rotate(-3deg) skewX(-2deg)} }

/* ROBOT */
@keyframes av-robot-head { 0%,70%,100%{transform:rotate(0deg)} 20%{transform:rotate(15deg)} 50%{transform:rotate(-15deg)} }
@keyframes av-robot-eye-blink { 0%,88%,100%{opacity:1} 90%,96%{opacity:0.1} }

/* ANDROID */
@keyframes av-holo-flicker { 0%,97%,100%{opacity:1;filter:none} 98%{opacity:0.6;filter:hue-rotate(20deg) brightness(1.4)} 99%{opacity:0.9;filter:none} }
@keyframes av-holo-scan { 0%{top:0%;opacity:0.6} 100%{top:100%;opacity:0} }

/* SUPERHERO */
@keyframes av-cape-wave { 0%,100%{transform:skewX(0deg) scaleX(1)} 25%{transform:skewX(-4deg) scaleX(0.97)} 75%{transform:skewX(4deg) scaleX(1.03)} }

/* MINECRAFT */
@keyframes av-mc-hop { 0%,100%{transform:translateY(0)} 40%,60%{transform:translateY(-6px)} }
@keyframes av-mc-arm-swing { 0%,100%{transform:rotate(0deg)} 50%{transform:rotate(-25deg)} }

/* ALIEN */
@keyframes av-tentacle-wave { 0%,100%{transform:rotate(0deg) scaleY(1)} 33%{transform:rotate(10deg) scaleY(1.05)} 66%{transform:rotate(-8deg) scaleY(0.97)} }

/* FRUIT */
@keyframes av-fruit-wibble { 0%,100%{transform:scale(1) rotate(0deg)} 25%{transform:scale(1.04,0.97) rotate(-2deg)} 75%{transform:scale(0.97,1.04) rotate(2deg)} }

/* MOTORSPORT */
@keyframes av-steer { 0%,100%{transform:rotate(0deg)} 25%{transform:rotate(-20deg)} 75%{transform:rotate(20deg)} }

/* FOOTBALLER */
@keyframes av-ball-juggle { 0%,100%{transform:translateY(0) translateX(0)} 30%{transform:translateY(-12px) translateX(5px)} 60%{transform:translateY(-8px) translateX(-3px)} }

/* ── 5. Spezial-Animationen Keyframes ─────────────────────── */
@keyframes av-salute { 0%,100%{transform:rotate(0deg)} 15%,75%{transform:rotate(-55deg) translateY(-5px)} }
@keyframes av-wave-hand { 0%,100%{transform:rotate(0deg)} 20%{transform:rotate(-20deg)} 40%{transform:rotate(15deg)} 60%{transform:rotate(-15deg)} 80%{transform:rotate(10deg)} }
@keyframes av-victory-arms { 0%{transform:translateY(0) rotate(0deg)} 30%{transform:translateY(-8px) rotate(-20deg)} 60%{transform:translateY(-10px) rotate(20deg)} 100%{transform:translateY(0) rotate(0deg)} }
@keyframes av-victory-hop { 0%,100%{transform:translateY(0)} 25%,75%{transform:translateY(-10px)} 50%{transform:translateY(-6px)} }
@keyframes av-defeat-head { 0%{transform:rotate(0deg) translateY(0)} 100%{transform:rotate(20deg) translateY(4px)} }
@keyframes av-defeat-body { 0%{transform:translateY(0)} 100%{transform:translateY(6px)} }
@keyframes av-dance-body { 0%,100%{transform:rotate(0deg) translateY(0)} 25%{transform:rotate(-5deg) translateY(-3px)} 50%{transform:rotate(0deg) translateY(-6px)} 75%{transform:rotate(5deg) translateY(-3px)} }
@keyframes av-pushup-body { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-15px)} }
@keyframes av-sword-swing { 0%{transform:rotate(0deg)} 40%{transform:rotate(-90deg) translateX(-5px)} 70%{transform:rotate(20deg)} 100%{transform:rotate(0deg)} }
@keyframes av-goal-run { 0%,100%{transform:translateX(0)} 50%{transform:translateX(10px)} }
@keyframes av-drift-body { 0%,100%{transform:rotate(0deg)} 30%{transform:rotate(-12deg) translateX(-5px)} 70%{transform:rotate(8deg) translateX(3px)} }
@keyframes av-confetti-fall { 0%{transform:translateY(0) rotate(0deg);opacity:1} 100%{transform:translateY(80px) rotate(720deg);opacity:0} }

/* ── 6. Idle-Klassen ──────────────────────────────────────── */
.av-idle-human #av-body { animation: av-breathe 3s ease-in-out infinite; }
.av-idle-human #av-head { animation: av-blink 4s ease-in-out infinite 1.5s; }
.av-idle-soldier #av-arm-r { animation: av-salute-arm 6s ease-in-out infinite 2s; }
.av-idle-warrior #av-head { animation: av-warrior-look 5s ease-in-out infinite; }
.av-idle-anime #av-body { animation: av-anime-hop 1.2s ease-in-out infinite; }
.av-idle-anime #av-hair { animation: av-hair-wave 1.5s ease-in-out infinite; }
.av-idle-robot #av-head { animation: av-robot-head 4s ease-in-out infinite; }
.av-idle-robot #av-effects { animation: av-robot-eye-blink 3s ease-in-out infinite; }
.av-idle-android .av-podium-svg-container { animation: av-holo-flicker 5s ease-in-out infinite; }
.av-idle-superhero #av-cape { animation: av-cape-wave 2s ease-in-out infinite; }
.av-idle-minecraft #av-body { animation: av-mc-hop 1.5s ease-in-out infinite; }
.av-idle-minecraft #av-arm-r { animation: av-mc-arm-swing 1.5s ease-in-out infinite; }
.av-idle-alien #av-effects { animation: av-tentacle-wave 2s ease-in-out infinite; }
.av-idle-fruit #av-body { animation: av-fruit-wibble 1s ease-in-out infinite; }
.av-idle-motorsport #av-arm-r { animation: av-steer 2s ease-in-out infinite; }
.av-idle-motorsport #av-arm-l { animation: av-steer 2s ease-in-out infinite reverse; }
.av-idle-footballer #av-effects { animation: av-ball-juggle 1.8s ease-in-out infinite; }

/* ── 7. Spezial-Klassen ───────────────────────────────────── */
.av-anim-victory #av-body { animation: av-victory-hop 0.5s ease-in-out 4; }
.av-anim-victory #av-arm-r { animation: av-victory-arms 0.5s ease-in-out 4; }
.av-anim-victory #av-arm-l { animation: av-victory-arms 0.5s ease-in-out 4 0.15s; }
.av-anim-defeat #av-head { animation: av-defeat-head 0.8s ease-out forwards; }
.av-anim-defeat #av-body { animation: av-defeat-body 0.8s ease-out forwards; }
.av-anim-wave #av-arm-r { animation: av-wave-hand 0.8s ease-in-out 3; }
.av-anim-dance #av-body { animation: av-dance-body 0.4s ease-in-out 6; }
.av-anim-salute #av-arm-r { animation: av-salute 1.5s ease-in-out 2; }
.av-anim-pushup #av-body { animation: av-pushup-body 0.6s ease-in-out 6; }
.av-anim-attack #av-weapon-r { animation: av-sword-swing 0.8s ease-in-out 2; }
.av-anim-goal #av-body { animation: av-goal-run 0.3s ease-in-out 8; }
.av-anim-drift #av-body { animation: av-drift-body 0.4s ease-in-out 5; }
.av-confetti-piece { position:absolute; width:6px; height:6px; border-radius:1px; animation:av-confetti-fall 1.2s ease-in forwards; pointer-events:none; }
.av-holo-scanline { position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--civ-color),transparent); animation:av-holo-scan 2s linear infinite; pointer-events:none; }

/* will-change nur wo nötig */
.av-idle-human #av-body, .av-idle-anime #av-body, .av-idle-soldier #av-arm-r { will-change: transform; }

/* ── 8. Civ-Badge + Chat-Ring ─────────────────────────────── */
.civ-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
  border: 1.5px solid var(--civ-color, rgba(255,255,255,.2));
  border-radius: 20px;
  box-shadow: 0 0 12px var(--civ-color-glow, transparent);
  font-size: 0.78rem;
}
.civ-badge .civ-emoji { font-size: 1rem; }
.civ-badge .civ-name { font-weight: 700; color: var(--civ-color, #fff); }
.civ-badge .civ-rank { font-size: 0.65rem; color: rgba(255,255,255,0.5); margin-left: 4px; }
.chat-avatar-civ { border: 2px solid var(--civ-ring-color, transparent) !important; box-shadow: 0 0 6px var(--civ-ring-color, transparent); }
.chat-avatar-civ.civ-champion { border-width: 4px !important; box-shadow: 0 0 12px var(--civ-ring-color, transparent); }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — Avatar 2099 System
   ══════════════════════════════════════════════════════════════════ */

/* ── Tablet (≤1024px) ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .civ-lb-box { width: min(520px, 94vw); }
  .civ-lb-bar-wrap { width: 70px; }
}

/* ── Mobile (≤768px) ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .av-podium-wrapper { width: 100px; }
  .av-podium-svg-container { width: 90px; height: 108px; }
  .av-podium-platform { width: 70px; height: 12px; }
  .av-action-buttons { gap: 4px; }
  .av-action-btn { padding: 3px 6px; font-size: 0.68rem; }
  .av-speech-bubble { font-size: 0.65rem; max-width: 160px; top: -36px; }
  .civ-badge { padding: 4px 10px; font-size: 0.72rem; gap: 5px; }
  .civ-badge .civ-rank { display: none; }
  .ac2-body { grid-template-columns: 1fr !important; overflow-y: auto; }
  .ac2-left  { display: none !important; }
  .ac2-right { border-left: none !important; border-top: 1px solid rgba(255,255,255,0.07); max-height: 280px; }
  .ac2-center { padding: 10px 8px; }
  .ac2-preview { min-height: 200px; }
  .ac2-box { max-height: 98vh; border-radius: 12px 12px 0 0; align-self: flex-end; }
  #ac2-modal { align-items: flex-end; }
  .ac-civ-card { flex: 0 0 120px; min-width: 120px; height: 90px; }
  .ac-civ-card:hover { height: 90px; }
  .ac-civ-card .ac-civ-lore { display: none !important; }
  .civ-lb-box { width: 100vw; max-height: 92vh; border-radius: 16px 16px 0 0; }
  .civ-lb-modal { align-items: flex-end; }
  .civ-lb-pts { display: none; }
  .civ-lb-bar-wrap { width: 60px; }
  .battle-civ-header { font-size: 0.7rem; padding: 5px 10px; }
  #avatar-podium-mount { flex-direction: column !important; align-items: center !important; gap: 8px !important; }
  #avatar-2099-preview { flex-direction: row !important; align-items: center !important; gap: 6px; }
  #avatar-2099-mount { width: 60px !important; height: 75px !important; }
  #avatar-2099-preview button { font-size: 0.58rem !important; padding: 2px 6px !important; }
  #user-avatar-2099 { bottom: -12px !important; right: -10px !important; }
}

/* ── Kleine Phones (≤480px) ───────────────────────────────────── */
@media (max-width: 480px) {
  .av-podium-wrapper { width: 80px; }
  .av-podium-svg-container { width: 76px; height: 92px; }
  .av-podium-platform { width: 60px; height: 10px; }
  .av-action-buttons { display: none; }
  .av-speech-bubble { max-width: 130px; font-size: 0.6rem; }
  .ac2-right { max-height: 220px; }
  .ac2-preview { min-height: 160px; }
  .civ-badge .civ-emoji { font-size: 0.9rem; }
  .civ-badge .civ-name  { font-size: 0.68rem; }
  .ac-civ-card { flex: 0 0 100px; min-width: 100px; }
  #avatar-2099-mount { width: 50px !important; height: 62px !important; }
}

/* ── Winzige Phones (≤360px) ──────────────────────────────────── */
@media (max-width: 360px) {
  .av-podium-wrapper { width: 70px; }
  .av-podium-svg-container { width: 68px; height: 82px; }
  .av-podium-platform { width: 52px; }
  #avatar-2099-preview { display: none !important; }
  .civ-badge { padding: 3px 8px; }
}

/* ── Touch-Geräte: Hover deaktivieren, :active stattdessen ─────── */
@media (hover: none) {
  .av-action-btn:hover  { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
  .ac-civ-card:hover    { height: auto; border-color: rgba(255,255,255,0.08); }
  .ac-type-btn:hover    { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
  .ac-style-btn:hover   { background: rgba(255,255,255,0.05); }
  .ac-color-dot:hover   { transform: none; }
  .av-action-btn:active { background: rgba(255,255,255,0.14) !important; }
  .ac-type-btn:active   { background: rgba(108,99,255,0.2) !important; }
  .ac-style-btn:active  { background: rgba(255,255,255,0.12) !important; }
  .ac-color-dot:active  { transform: scale(1.2); }
  .av-speech-bubble { pointer-events: auto; }
}

/* ── Battle Civ-Header auf kleinen Screens ─────────────────────── */
@media (max-width: 600px) {
  .battle-civ-header .vs-sep { display: none; }
  .battle-civ-header { font-size: 0.68rem; gap: 4px; padding: 4px 8px; }
}

/* ══════════════════════════════════════════════════════════════════
   DiceBear Edition — Animationen auf .av-dicebear-img
   (Ersetzt SVG-Gruppen-Animationen für das neue System)
   ══════════════════════════════════════════════════════════════════ */

/* ── DiceBear: Bild + Overlay fluid skalieren ─────────────────── */
.av-podium-svg-container .av-char-wrap {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  position: relative;
}
.av-podium-svg-container .av-dicebear-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  transform-origin: bottom center;
  border-radius: 8px;
  /* Fortnite-Style: Tiefenschatten + Bühnen-Glow von unten */
  filter:
    drop-shadow(0 6px 18px var(--civ-color-glow))
    drop-shadow(0 2px 6px rgba(0,0,0,0.7))
    brightness(1.08)
    contrast(1.05);
}
.av-podium-svg-container .av-overlay-svg {
  position: absolute !important;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
  overflow: visible;
}
/* Avatar Creator Preview — größere Darstellung */
.ac2-preview .av-char-wrap {
  width: 240px !important;
  height: 240px !important;
}
.ac2-preview .av-dicebear-img {
  width: 240px !important;
  height: 240px !important;
}
/* user.html Fremdprofil 2099-Overlay */
#user-avatar-2099 .av-char-wrap {
  width: 80px !important;
  height: 80px !important;
}
#user-avatar-2099 .av-dicebear-img {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50%;
}

/* ── Idle-Animationen (auf .av-dicebear-img) ──────────────────── */
.av-idle-human    .av-dicebear-img { animation: av-breathe-img 3.5s ease-in-out infinite; }
.av-idle-soldier  .av-dicebear-img { animation: av-soldier-idle 6s ease-in-out infinite; }
.av-idle-warrior  .av-dicebear-img { animation: av-warrior-idle 5s ease-in-out infinite; }
.av-idle-anime    .av-dicebear-img { animation: av-anime-hop-img 1.2s ease-in-out infinite; }
.av-idle-robot    .av-dicebear-img { animation: av-robot-idle 4s ease-in-out infinite; }
.av-idle-android  .av-dicebear-img { animation: av-holo-flicker 4s ease-in-out infinite; }
.av-idle-superhero .av-dicebear-img { animation: av-hero-idle 2.5s ease-in-out infinite; }
.av-idle-minecraft .av-dicebear-img { animation: av-mc-hop-img 1.4s ease-in-out infinite; }
.av-idle-alien    .av-dicebear-img { animation: av-alien-idle 2s ease-in-out infinite; }
.av-idle-fruit    .av-dicebear-img { animation: av-fruit-wibble-img 1s ease-in-out infinite; }
.av-idle-motorsport .av-dicebear-img { animation: av-racer-idle 2.2s ease-in-out infinite; }
.av-idle-footballer .av-dicebear-img { animation: av-football-idle 1.8s ease-in-out infinite; }

/* ── Idle Keyframes (Fortnite-Style — lebendig, Gewichtsverschiebung) ─── */

/* HUMAN: Atmen + subtiles Hip-Sway */
@keyframes av-breathe-img {
  0%   { transform: translateY(0) scale(1) rotate(0deg); }
  20%  { transform: translateY(-2px) scale(1.008) rotate(-0.5deg); }
  40%  { transform: translateY(-4px) scale(1.015) rotate(0.3deg); }
  60%  { transform: translateY(-3px) scale(1.01) rotate(-0.3deg); }
  80%  { transform: translateY(-1px) scale(1.005) rotate(0.5deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}

/* SOLDIER: Aufrecht, gelegentliches Gewichtsverlagern */
@keyframes av-soldier-idle {
  0%   { transform: translateY(0) rotate(0deg) scaleX(1); }
  15%  { transform: translateY(-2px) rotate(-1.5deg) scaleX(0.99); }
  35%  { transform: translateY(-3px) rotate(0.5deg) scaleX(1.01); }
  55%  { transform: translateY(-2px) rotate(1.5deg) scaleX(0.99); }
  75%  { transform: translateY(-1px) rotate(-0.5deg) scaleX(1); }
  100% { transform: translateY(0) rotate(0deg) scaleX(1); }
}

/* WARRIOR: Bedrohliche Standfestigkeit, leichtes Schwanken */
@keyframes av-warrior-idle {
  0%   { transform: rotate(0deg) translateY(0) scaleX(1); }
  20%  { transform: rotate(-2.5deg) translateY(-2px) scaleX(0.99); }
  50%  { transform: rotate(0.5deg) translateY(-1px) scaleX(1.01); }
  75%  { transform: rotate(2deg) translateY(-2px) scaleX(0.99); }
  100% { transform: rotate(0deg) translateY(0) scaleX(1); }
}

/* ANIME: Energetisches Hüpfen */
@keyframes av-anime-hop-img {
  0%   { transform: translateY(0) scale(1) rotate(0deg); }
  25%  { transform: translateY(-7px) scale(1.03, 0.97) rotate(-1deg); }
  45%  { transform: translateY(-11px) scale(1.04) rotate(0.5deg); }
  65%  { transform: translateY(-6px) scale(1.02, 0.99) rotate(1deg); }
  85%  { transform: translateY(-2px) scale(1.01) rotate(-0.5deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}

/* ROBOT: Mechanisches Ticking */
@keyframes av-robot-idle {
  0%   { transform: rotate(0deg) translateY(0); }
  18%  { transform: rotate(-4deg) translateY(-1px); }
  19%  { transform: rotate(-4deg) translateY(-1px); }
  36%  { transform: rotate(0deg) translateY(0); }
  54%  { transform: rotate(4deg) translateY(-1px); }
  55%  { transform: rotate(4deg) translateY(-1px); }
  72%  { transform: rotate(0deg) translateY(0); }
  100% { transform: rotate(0deg) translateY(0); }
}

/* HERO: Schwebendes Abheben */
@keyframes av-hero-idle {
  0%   { transform: translateY(0) scale(1) rotate(0deg); }
  30%  { transform: translateY(-6px) scale(1.02) rotate(-0.5deg); }
  55%  { transform: translateY(-8px) scale(1.025) rotate(0.5deg); }
  80%  { transform: translateY(-4px) scale(1.01) rotate(-0.3deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}

/* MINECRAFT: Blocky Hop */
@keyframes av-mc-hop-img {
  0%, 100% { transform: translateY(0) scaleY(1); image-rendering: pixelated; }
  30%      { transform: translateY(-7px) scaleY(1.04); }
  50%      { transform: translateY(-8px) scaleY(1.05); }
  70%      { transform: translateY(-4px) scaleY(1.02); }
}

/* ALIEN: Fremdartiges Pulsieren */
@keyframes av-alien-idle {
  0%   { transform: scale(1) rotate(0deg); filter: hue-rotate(0deg) brightness(1); }
  25%  { transform: scale(1.04) rotate(1.5deg); filter: hue-rotate(8deg) brightness(1.05); }
  50%  { transform: scale(0.98) rotate(-1deg); filter: hue-rotate(-5deg) brightness(0.95); }
  75%  { transform: scale(1.03) rotate(2deg); filter: hue-rotate(12deg) brightness(1.08); }
  100% { transform: scale(1) rotate(0deg); filter: hue-rotate(0deg) brightness(1); }
}

/* FRUIT: Wobble */
@keyframes av-fruit-wibble-img {
  0%, 100% { transform: scale(1) rotate(0deg); }
  20%      { transform: scale(1.05, 0.96) rotate(-2.5deg); }
  45%      { transform: scale(0.97, 1.05) rotate(1deg); }
  70%      { transform: scale(1.04, 0.97) rotate(2.5deg); }
  90%      { transform: scale(0.99, 1.02) rotate(-1deg); }
}

/* RACER: Cockpit-Vibrieren + Lenkbewegung */
@keyframes av-racer-idle {
  0%   { transform: rotate(0deg) translateX(0); }
  15%  { transform: rotate(-2.5deg) translateX(-2px); }
  35%  { transform: rotate(1deg) translateX(1px); }
  55%  { transform: rotate(-1.5deg) translateX(-1px); }
  75%  { transform: rotate(2deg) translateX(2px); }
  100% { transform: rotate(0deg) translateX(0); }
}

/* FOOTBALLER: Tänzelndes Gewicht */
@keyframes av-football-idle {
  0%   { transform: translateY(0) rotate(0deg) scaleX(1); }
  20%  { transform: translateY(-3px) rotate(-1.5deg) scaleX(0.99); }
  45%  { transform: translateY(-5px) rotate(0.5deg) scaleX(1.01); }
  65%  { transform: translateY(-3px) rotate(1.5deg) scaleX(0.99); }
  85%  { transform: translateY(-1px) rotate(-0.5deg) scaleX(1); }
  100% { transform: translateY(0) rotate(0deg) scaleX(1); }
}

/* ── Spezial-Animationen (auf .av-dicebear-img) ───────────────── */
.av-anim-victory .av-dicebear-img  { animation: av-victory-img  0.4s ease-in-out 5 !important; }
.av-anim-defeat  .av-dicebear-img  { animation: av-defeat-img   0.8s ease-out forwards !important; }
.av-anim-wave    .av-dicebear-img  { animation: av-wave-img     0.7s ease-in-out 3 !important; }
.av-anim-dance   .av-dicebear-img  { animation: av-dance-img    0.35s ease-in-out 7 !important; }
.av-anim-salute  .av-dicebear-img  { animation: av-salute-img   1.5s ease-in-out 2 !important; }
.av-anim-pushup  .av-dicebear-img  { animation: av-pushup-img   0.5s ease-in-out 6 !important; }
.av-anim-goal    .av-dicebear-img  { animation: av-goal-img     0.3s ease-in-out 8 !important; }
.av-anim-drift   .av-dicebear-img  { animation: av-drift-img    0.4s ease-in-out 5 !important; }
.av-anim-attack  .av-dicebear-img  { animation: av-attack-img   0.6s ease-in-out 2 !important; }

@keyframes av-victory-img {
  0%, 100% { transform: translateY(0) scale(1); }
  25%      { transform: translateY(-12px) scale(1.05); }
  50%      { transform: translateY(-14px) scale(1.06); }
  75%      { transform: translateY(-8px) scale(1.03); }
}
@keyframes av-defeat-img {
  0%   { transform: translateY(0) rotate(0deg); filter: brightness(1.08) contrast(1.05); }
  100% { transform: translateY(5px) rotate(5deg); filter: brightness(0.6) grayscale(0.5) contrast(0.9); }
}
@keyframes av-wave-img {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-8deg) translateY(-2px); }
  50%      { transform: rotate(8deg) translateY(-2px); }
  75%      { transform: rotate(-5deg) translateY(-1px); }
}
@keyframes av-dance-img {
  0%, 100% { transform: rotate(0deg) translateY(0) scale(1); }
  25%      { transform: rotate(-6deg) translateY(-4px) scale(1.02); }
  50%      { transform: rotate(0deg) translateY(-7px) scale(1.03); }
  75%      { transform: rotate(6deg) translateY(-4px) scale(1.02); }
}
@keyframes av-salute-img {
  0%, 60%, 100% { transform: rotate(0deg) translateY(0); }
  20%, 45%      { transform: rotate(-5deg) translateY(-3px); }
}
@keyframes av-pushup-img {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50%      { transform: translateY(-8px) scaleY(1.04); }
}
@keyframes av-goal-img {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(8px) rotate(2deg); }
}
@keyframes av-drift-img {
  0%, 100% { transform: rotate(0deg); }
  30%      { transform: rotate(-8deg) translateX(-4px); }
  70%      { transform: rotate(6deg) translateX(3px); }
}
@keyframes av-attack-img {
  0%   { transform: rotate(0deg) scale(1); }
  30%  { transform: rotate(-8deg) scale(1.04) translateX(-3px); }
  60%  { transform: rotate(6deg) scale(1.02) translateX(2px); }
  100% { transform: rotate(0deg) scale(1); }
}

/* ══════════════════════════════════════════════════════════════════
   DiceBear Responsive — Fluid Scaling aller Varianten
   ══════════════════════════════════════════════════════════════════ */

/* ── Basis: Podium-Container skaliert, Bild füllt ihn ─────────── */
.av-podium-svg-container {
  overflow: visible;
}

/* ── Avatar Creator Preview ───────────────────────────────────── */
@media (max-width: 768px) {
  .ac2-preview .av-char-wrap  { width: 160px !important; height: 160px !important; }
  .ac2-preview .av-dicebear-img { width: 160px !important; height: 160px !important; }
}
@media (max-width: 480px) {
  .ac2-preview .av-char-wrap  { width: 130px !important; height: 130px !important; }
  .ac2-preview .av-dicebear-img { width: 130px !important; height: 130px !important; }
}

/* ── Profile: Podium neben Foto-Kreis ─────────────────────────── */
#avatar-2099-mount .av-char-wrap    { width: 80px !important; height: 80px !important; }
#avatar-2099-mount .av-dicebear-img { width: 80px !important; height: 80px !important; }

@media (max-width: 768px) {
  #avatar-2099-mount .av-char-wrap    { width: 60px !important; height: 60px !important; }
  #avatar-2099-mount .av-dicebear-img { width: 60px !important; height: 60px !important; }
}
@media (max-width: 480px) {
  #avatar-2099-mount .av-char-wrap    { width: 50px !important; height: 50px !important; }
  #avatar-2099-mount .av-dicebear-img { width: 50px !important; height: 50px !important; }
}

/* ── app.html Orbit-Widget ────────────────────────────────────── */
#sb-avatar-2099-mount .av-char-wrap    { width: 52px !important; height: 52px !important; }
#sb-avatar-2099-mount .av-dicebear-img {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50%;
}

/* ── user.html Fremdprofil Overlay ────────────────────────────── */
#user-avatar-2099 {
  position: absolute;
  bottom: -10px;
  right: -14px;
  z-index: 2;
}
#user-avatar-2099 .av-podium-wrapper  { width: 70px; }
#user-avatar-2099 .av-podium-svg-container { width: 64px; height: 64px; }
#user-avatar-2099 .av-char-wrap    { width: 64px !important; height: 64px !important; max-width: 64px !important; }
#user-avatar-2099 .av-dicebear-img { width: 64px !important; height: 64px !important; border-radius: 50%; }
#user-avatar-2099 .av-podium-platform { width: 60px; height: 10px; }

@media (max-width: 768px) {
  #user-avatar-2099 .av-podium-wrapper { width: 54px; }
  #user-avatar-2099 .av-podium-svg-container { width: 50px; height: 50px; }
  #user-avatar-2099 .av-char-wrap    { width: 50px !important; height: 50px !important; max-width: 50px !important; }
  #user-avatar-2099 .av-dicebear-img { width: 50px !important; height: 50px !important; }
  #user-avatar-2099 .av-podium-platform { width: 46px; height: 8px; }
}
@media (max-width: 480px) {
  #user-avatar-2099 { display: none; }
}

/* ── watch.html / Stream-Seite ─────────────────────────────────── */
/* Podium im Stream-Chat-Overlay (falls eingebunden) */
.chat-overlay .av-podium-wrapper,
.stream-sidebar .av-podium-wrapper {
  width: 90px;
}
.chat-overlay .av-podium-svg-container,
.stream-sidebar .av-podium-svg-container {
  width: 84px; height: 84px;
}
.chat-overlay .av-char-wrap,
.stream-sidebar .av-char-wrap {
  width: 84px !important; height: 84px !important; max-width: 84px !important;
}
@media (max-width: 768px) {
  .chat-overlay .av-podium-wrapper  { width: 70px; }
  .chat-overlay .av-podium-svg-container { width: 64px; height: 64px; }
  .chat-overlay .av-char-wrap    { width: 64px !important; height: 64px !important; max-width: 64px !important; }
}

/* ── Plattform: passt sich Container-Breite an ─────────────────── */
.av-podium-platform {
  width: 90%;
  max-width: 90px;
}
@media (max-width: 768px) { .av-podium-platform { max-width: 70px; } }
@media (max-width: 480px) { .av-podium-platform { max-width: 56px; } }
@media (max-width: 360px) { .av-podium-platform { max-width: 48px; } }

/* ── Pixel-Art: image-rendering beibehalten ───────────────────── */
.av-idle-minecraft .av-dicebear-img,
.av-podium-svg-container .av-dicebear-img[src*="pixel-art"] {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ── Touch: reduce-motion respektieren ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .av-dicebear-img { animation: none !important; }
  .av-podium-platform { animation: none !important; }
}