/* Live-Anzeige „Zuletzt gezogen“ (assets/js/vote-card-feed.js) über der täglichen Vote-Belohnung: eine Reihe aus den
   8 zuletzt gezogenen Vote-Karten, neueste links. Nutzt Panel, Kopfzeile, Tonknopf und das komplette Karten-Markup aus
   vote-rewards.css (.vr-*), hier nur kleiner abgestimmt; eigene Klassen mit "vf-" Präfix. Pixel-Stil wie v2.css,
   Seltenheitsfarbe je Karte über --vr-c / --vr-c-rgb. */

.vote-feed-root { margin: 28px 0 8px; }
.vote-feed-root:empty { display: none; }
.vote-feed-root + .vote-reward-root { margin-top: 18px; }

.vf-panel .vr-head { margin-bottom: 6px; }
.vf-kicker { color: #b9ff8a; }
.vf-dot {
  width: 10px; height: 10px; flex: none; background: #4ade80;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6), 0 0 10px rgba(74, 222, 128, 0.85);
  animation: vf-live 1.6s steps(2, end) infinite;
}
.vf-dot.is-stale { background: #9ca3af; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6); animation: none; }

/* ---------- Reihe: 8 Spalten, sonst wischbarer Streifen (Reihenfolge bleibt: neueste links) ---------- */
.vf-wrap { position: relative; }
.vf-strip {
  --vf-fade-l: 0px; --vf-fade-r: 0px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 6px;
  margin: 0 -6px; padding: 16px 6px 8px; scrollbar-width: thin; scrollbar-color: #3b0f6e transparent; outline: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--vf-fade-l), #000 calc(100% - var(--vf-fade-r)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--vf-fade-l), #000 calc(100% - var(--vf-fade-r)), transparent 100%);
}
.vf-strip:focus-visible { box-shadow: inset 0 0 0 2px #c084fc; }
.vf-track { position: relative; display: grid; grid-template-columns: repeat(8, minmax(128px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.vf-fx { position: absolute; inset: -24px -12px -12px; z-index: 3; width: calc(100% + 24px); height: calc(100% + 36px); pointer-events: none; }

/* ---------- eine Karte mit Spieler darunter ---------- */
.vf-slot { position: relative; display: grid; grid-template-rows: auto auto; min-width: 0; scroll-snap-align: start; }
.vf-slot-card { position: relative; container-type: inline-size; }
.vf-panel .vf-slot .vr-card { cursor: default; animation: none; }

/* Karten-Markup der Vote-Belohnung, auf ~130-150 px Breite abgestimmt (Schrift über Container-Breite) */
.vf-slot .vr-front {
  padding: 9% 6% 8%; gap: 3px;
  box-shadow: inset 0 0 0 3px #050308, inset 0 0 0 6px var(--vr-c), inset 0 0 0 7px #050308, inset 8px 8px 0 2px rgba(255, 255, 255, 0.08), inset -8px -8px 0 2px rgba(0, 0, 0, 0.45);
}
.vf-slot .vr-back { box-shadow: inset 0 0 0 3px #07040c, inset 0 0 0 6px #2a0b4d, inset 0 0 0 7px #07040c, inset 8px 8px 0 2px rgba(255, 255, 255, 0.07), inset -8px -8px 0 2px rgba(0, 0, 0, 0.45); }
.vf-slot .vr-rarity { margin-top: 2px; padding: 2px 6px; font-size: clamp(0.5rem, 6.2cqi, 0.68rem); letter-spacing: 0.08em; }
.vf-slot .vr-pips { gap: 3px; }
.vf-slot .vr-pips i { width: 5px; height: 5px; }
.vf-slot .vr-label { font-size: clamp(0.68rem, 8.6cqi, 0.95rem); color: var(--vr-c); color: color-mix(in srgb, var(--vr-c) 70%, #fff); text-shadow: 2px 2px 0 #000, 0 0 8px rgba(var(--vr-c-rgb), 0.45); }
.vf-slot .vr-detail { font-size: clamp(0.5rem, 5.8cqi, 0.66rem); }
.vf-slot .vr-icon { filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 0 8px rgba(var(--vr-c-rgb), 0.55)); }
.vf-slot .vr-card-glow { filter: blur(16px); }
.vf-slot .vr-card-shadow { bottom: -9px; height: 8px; }
.vf-slot .vr-back-emblem { gap: 5px; }
.vf-slot .vr-back-emblem span { display: inline-block; padding: 2px 6px; font-size: clamp(0.42rem, 5cqi, 0.58rem); letter-spacing: 0.12em; }
.vf-slot .vr-back-corner { width: 6px; height: 6px; }
.vf-slot .vr-back-corner.c1, .vf-slot .vr-back-corner.c3 { left: 10px; }
.vf-slot .vr-back-corner.c2, .vf-slot .vr-back-corner.c4 { right: 10px; }
.vf-slot .vr-back-corner.c1, .vf-slot .vr-back-corner.c2 { top: 10px; }
.vf-slot .vr-back-corner.c3, .vf-slot .vr-back-corner.c4 { bottom: 10px; }

.vf-new {
  position: absolute; top: -8px; right: -6px; z-index: 4; display: none; padding: 3px 7px; font-size: 0.64rem; font-weight: 900; letter-spacing: 0.1em;
  text-transform: uppercase; color: #1a0f00; background: #ffd84d; box-shadow: inset 0 0 0 2px #7a5200, 3px 3px 0 rgba(0, 0, 0, 0.6); transform: rotate(8deg);
}
.vf-slot.has-new .vf-new { display: block; animation: vf-pop 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.4) 0.9s both; }

.vf-plate {
  display: grid; align-content: start; gap: 4px; min-width: 0; min-height: 84px; margin-top: 12px; padding: 7px 7px 8px;
  background: rgba(0, 0, 0, 0.42); box-shadow: inset 0 0 0 2px #2a2138, inset 0 3px 0 var(--vr-c, #2a2138), inset 3px 6px 0 rgba(0, 0, 0, 0.3);
}
.vf-plate-player { display: flex; align-items: center; gap: 6px; min-width: 0; }
.vf-plate-head { flex: none; display: block; width: 22px; height: 22px; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6); }
.vf-plate-head img { display: block; width: 22px; height: 22px; image-rendering: pixelated; }
.vf-plate-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; font-weight: 900; color: #fff; text-shadow: 1px 1px 0 #000; }
.vf-plate-date { display: flex; flex-wrap: wrap; gap: 0 5px; font-size: 0.66rem; font-weight: 800; line-height: 1.35; color: #d6cce8; }
.vf-plate-foot { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.vf-ago { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 5px; font-size: 0.64rem; font-weight: 800; color: #cfc6e2; background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 0 0 2px #2a2138; }
.vf-status { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; background: rgba(0, 0, 0, 0.45); }
.vf-status img { width: 16px; height: 16px; image-rendering: pixelated; }
.vf-status.is-delivered { box-shadow: inset 0 0 0 2px rgba(128, 255, 32, 0.5); }
.vf-status.is-pending { box-shadow: inset 0 0 0 2px rgba(192, 132, 252, 0.55); }
.vf-status.is-pending img { animation: vr-tick 1.2s steps(2, end) infinite; }

/* freier Platz (weniger als 8 Ziehungen) */
.vf-slot.is-placeholder .vf-slot-card { opacity: 0.35; filter: grayscale(0.6); }
.vf-slot.is-placeholder .vr-card-float, .vf-slot.is-placeholder .vr-back::before { animation: none; }
.vf-slot.is-placeholder .vf-plate { display: grid; place-items: center; box-shadow: inset 0 0 0 2px #1d1727; background: rgba(0, 0, 0, 0.25); }
.vf-plate-free { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; color: #6f6585; text-transform: uppercase; }

/* ---------- Bewegung ---------- */
/* Erster Stand: Karten werden von links nach rechts ausgeteilt. */
.vf-track.is-intro .vf-slot { animation: vf-slot-deal 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.15) backwards; animation-delay: calc(var(--vf-i, 0) * 70ms); }
/* Neue Karte: kommt links verdeckt herein (Umdrehen: .vr-card-inner aus vote-rewards.css). Nur "backwards", damit das
   FLIP-Verschieben der nächsten Karte (Inline-transform) danach nicht überdeckt wird. */
.vf-slot.is-entering { animation: vf-slot-in 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.15) backwards; z-index: 2; }
.vf-slot.is-flash .vr-card-glow { opacity: 1; animation: vf-glow-burst 1.3s ease-out 1; }
.vf-slot.is-flash .vf-slot-card::after {
  content: ""; position: absolute; inset: -18% -30%; z-index: 3; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(var(--vr-c-rgb), 0.6), transparent 62%); animation: vf-flash 1.1s ease-out 1 both;
}
/* Strahlen hinter neuen Karten ab Episch */
.vf-slot.is-flash[data-tier="3"] .vf-slot-card::before, .vf-slot.is-flash[data-tier="4"] .vf-slot-card::before, .vf-slot.is-flash[data-tier="5"] .vf-slot-card::before {
  content: ""; position: absolute; left: 50%; top: 45%; z-index: 0; width: 190%; aspect-ratio: 1; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(var(--vr-c-rgb), 0.5) 0deg 9deg, transparent 9deg 24deg);
  -webkit-mask: radial-gradient(circle closest-side, #000 40%, transparent 100%); mask: radial-gradient(circle closest-side, #000 40%, transparent 100%);
  animation: vf-rays 1.55s ease-out 1 both;
}
.vf-slot.is-flash[data-tier="5"] .vf-slot-card::before { animation-duration: 2s; width: 230%; }
.vf-slot-card > .vr-card { position: relative; z-index: 1; }
/* Karte, die rechts aus der Reihe fällt */
.vf-slot.is-leaving { z-index: 0; pointer-events: none; opacity: 0; transform: translateX(46px) scale(0.86); transition: opacity 0.45s ease, transform 0.5s ease; }

/* ---------- leer / laden ---------- */
.vf-empty { display: grid; grid-template-columns: minmax(110px, 150px) minmax(0, 1fr); gap: 18px 24px; align-items: center; padding-top: 8px; }
.vf-empty-card { width: 100%; max-width: 150px; padding: 10px 0 14px; }
.vf-empty-card .vr-card { filter: grayscale(0.4) brightness(0.8); }
.vf-empty.is-loading .vf-empty-card .vr-card { animation: none; }
.vf-empty-title { margin: 0 0 6px; font-size: 1.15rem; font-weight: 900; color: #f1edf8; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55); }
.vf-empty.is-loading .vf-empty-title { color: var(--v2-muted, #b3a9c9); }

/* Ersatzkarte, falls vote-rewards.js fehlt */
.vf-plain-card { display: block; aspect-ratio: 5 / 7; }
.vf-plain-back, .vf-plain-front {
  display: grid; place-items: center; gap: 6px; height: 100%; padding: 10px; text-align: center; clip-path: var(--px-clip-lg, none);
  background: rgba(0, 0, 0, 0.55); box-shadow: inset 0 0 0 3px #050308, inset 0 0 0 6px var(--vr-c, #3b0f6e);
}
.vf-plain-back { font-size: 2rem; font-weight: 900; color: #e9d5ff; }
.vf-plain-front span { font-size: 0.62rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vr-c); }
.vf-plain-front img { width: 40px; height: 40px; image-rendering: pixelated; }
.vf-plain-front b { font-size: 0.78rem; }

/* ---------- Animationen ---------- */
@keyframes vf-live { 50% { opacity: 0.35; } }
@keyframes vf-flash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vf-rays {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(0.6); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(70deg) scale(1.05); }
}
@keyframes vf-slot-deal { from { opacity: 0; transform: translateY(-26px) rotate(-6deg) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes vf-slot-in {
  from { opacity: 0; transform: translate(-60px, -26px) rotate(-10deg) scale(0.8); }
  70% { opacity: 1; transform: translate(3px, 2px) rotate(1deg) scale(1.03); }
  to { opacity: 1; transform: none; }
}
@keyframes vf-glow-burst { 0% { opacity: 0.2; transform: scale(0.9); } 30% { opacity: 1; transform: scale(1.25); } 100% { opacity: 0.6; transform: scale(1); } }
@keyframes vf-pop { from { opacity: 0; transform: rotate(8deg) scale(0.3); } to { opacity: 1; transform: rotate(8deg) scale(1); } }

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
  .vf-track { grid-template-columns: repeat(8, 132px); gap: 10px; }
  .vf-empty { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .vf-empty-card { width: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .vf-dot, .vf-new, .vf-status img, .vf-track.is-intro .vf-slot, .vf-slot.is-entering, .vf-slot.is-flash .vr-card-glow,
  .vf-slot.is-flash .vf-slot-card::after, .vf-slot.is-flash .vf-slot-card::before { animation: none !important; }
  .vf-slot.is-flash .vf-slot-card::after, .vf-slot.is-flash .vf-slot-card::before { display: none; }
  .vf-slot, .vf-slot.is-leaving { transition: none !important; }
  .vf-strip { scroll-behavior: auto; }
}