/* Vocab Cup · Mode previews in the setup (setup-previews.js)
   Duel Mode, Possession Rush, Single Round and Full Cup as small animated night pitches.
   All classes and keyframes use the prefix "vcp-" so nothing collides with styles.css.
   Calm and premium: dark glass, deep green-navy pitch, thin light lines, gold accents.
   Paused off screen (.vcp-paused); calm end state for .vcp-static, reduced motion and
   Performance Mode. Size through --vcp-preview-w (default 132px). */

.vcp-preview {
  --vcp-a: #5aa7ff;
  --vcp-b: #ff6363;
  --vcp-font: Inter, Aptos, "Segoe UI", Arial, sans-serif;
  --vcp-ink: #f7fbff;
  --vcp-navy: #0f2236;
  --vcp-gold: #f7d84a;
  --vcp-gold-deep: #d9a520;
  --vcp-gold-soft: rgba(247, 216, 74, 0.14);
  --vcp-grass: #1d4d3a;
  --vcp-grass-stripe: #1a4535;
  --vcp-line: rgba(255, 255, 255, 0.55);
  --vcp-normal: #4cc9f0;
  --vcp-challenge: #ffb84a;
  --vcp-elite: #ff4059;
  position: relative;
  width: var(--vcp-preview-w, 132px);
  max-width: 100%;
  aspect-ratio: 220 / 124;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: calc(var(--vcp-preview-w, 132px) * 0.075);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 38%),
    radial-gradient(circle at 50% 0%, rgba(247, 216, 74, 0.07), transparent 60%),
    rgba(8, 22, 39, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 22px rgba(0, 0, 0, 0.32);
  font-family: var(--vcp-font);
  box-sizing: border-box;
}

.vcp-preview-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.vcp-preview.vcp-paused *,
.vcp-preview.vcp-paused *::before,
.vcp-preview.vcp-paused *::after {
  animation-play-state: paused !important;
}

/* Pitch ------------------------------------------------------------------ */
.vcp-grass {
  fill: var(--vcp-grass);
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
}

.vcp-grass-stripe { fill: var(--vcp-grass-stripe); }

.vcp-line {
  fill: none;
  stroke: var(--vcp-line);
  stroke-width: 1.5;
}

.vcp-spot { fill: var(--vcp-line); }

.vcp-goal-frame {
  fill: rgba(255, 255, 255, 0.06);
  stroke: rgba(255, 255, 255, 0.78);
  stroke-width: 1.6;
}

.vcp-zone {
  fill: rgba(255, 255, 255, 0.26);
  stroke: none;
}

/* Ball ------------------------------------------------------------------- */
.vcp-ball-shadow { fill: rgba(0, 0, 0, 0.34); }

.vcp-ball-skin {
  fill: #f7fbff;
  stroke: var(--vcp-navy);
  stroke-width: 1.2;
}

.vcp-ball-patch { fill: var(--vcp-navy); }

.vcp-ball-seam {
  fill: none;
  stroke: var(--vcp-navy);
  stroke-width: 1;
}

/* Trophy (shared by Single Round and Full Cup) ---------------------------- */
.vcp-cup-body {
  fill: var(--vcp-gold);
  stroke: var(--vcp-gold-deep);
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.vcp-cup-handle {
  fill: none;
  stroke: var(--vcp-gold-deep);
  stroke-width: 2.6;
  stroke-linecap: round;
}

.vcp-cup-shine {
  fill: none;
  stroke: rgba(255, 255, 255, 0.62);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.vcp-sparkle {
  fill: var(--vcp-gold);
  opacity: 0.75;
}

/* Team discs and possession timer ----------------------------------------- */
.vcp-pv-team-disc {
  stroke: rgba(255, 255, 255, 0.82);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
}

.vcp-pv-team-a .vcp-pv-team-disc { fill: var(--vcp-a); }
.vcp-pv-team-b .vcp-pv-team-disc { fill: var(--vcp-b); }

.vcp-pv-ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 2;
}

.vcp-pv-ring {
  fill: none;
  stroke: var(--vcp-gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 40;
}

.vcp-pv-team-b .vcp-pv-ring { stroke-dashoffset: 100; }

/* Duel Mode: the ball moves back and forth, the pushing team pulses briefly */
.vcp-preview-duel .vcp-pv-ball {
  transform: translate(135.5px, 74px);
  animation: vcp-pv-duel-ball 6.4s ease-in-out infinite;
}

.vcp-preview-duel .vcp-pv-team-a .vcp-pv-team-disc { animation: vcp-pv-duel-a 6.4s ease-in-out infinite; }
.vcp-preview-duel .vcp-pv-team-b .vcp-pv-team-disc { animation: vcp-pv-duel-b 6.4s ease-in-out infinite; }

/* Possession Rush: the timer ring drains, the ball stays with the team, then possession changes */
.vcp-preview-possession .vcp-pv-ball {
  transform: translate(161px, 74px);
  animation: vcp-pv-pos-ball 8s ease-in-out infinite;
}

.vcp-pv-halo {
  fill: none;
  stroke: var(--vcp-gold);
  stroke-width: 1.2;
  opacity: 0.85;
}

.vcp-preview-possession .vcp-pv-halo { animation: vcp-pv-pos-halo 8s linear infinite; }
.vcp-preview-possession .vcp-pv-team-a .vcp-pv-ring { animation: vcp-pv-pos-ring-a 8s linear infinite; }
.vcp-preview-possession .vcp-pv-team-b .vcp-pv-ring { animation: vcp-pv-pos-ring-b 8s linear infinite; }
.vcp-preview-possession .vcp-pv-team-b .vcp-pv-team-disc { animation: vcp-pv-pos-b 8s ease-in-out infinite; }

.vcp-pv-swap {
  opacity: 0;
  transform: translate(161px, 55px);
}

.vcp-preview-possession .vcp-pv-swap { animation: vcp-pv-pos-swap 8s ease-in-out infinite; }

.vcp-pv-swap-bg {
  fill: rgba(8, 22, 39, 0.94);
  stroke: rgba(247, 216, 74, 0.7);
  stroke-width: 1;
}

.vcp-pv-swap-arrows {
  fill: none;
  stroke: var(--vcp-gold);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Single Round: the ball goes into the goal, one trophy */
.vcp-preview-single-round .vcp-pv-ball {
  opacity: 0;
  transform: translate(213px, 64px);
  animation: vcp-pv-single-ball 6s ease-in-out infinite;
}

.vcp-pv-trophy {
  transform-box: fill-box;
  transform-origin: center;
}

.vcp-preview-single-round .vcp-pv-trophy { animation: vcp-pv-single-cup 6s ease-in-out infinite; }

.vcp-pv-trophy-glow { fill: rgba(8, 22, 39, 0.72); }

.vcp-pv-trophy-ring {
  fill: var(--vcp-gold-soft);
  stroke: rgba(247, 216, 74, 0.42);
  stroke-width: 1;
}

/* Full Cup: three trophies N, C, E fill one after another */
.vcp-pv-shelf {
  fill: rgba(8, 22, 39, 0.9);
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 1;
}

.vcp-pv-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.vcp-pv-track-fill {
  fill: none;
  stroke: var(--vcp-gold);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

.vcp-preview-full-cup .vcp-pv-track-fill { animation: vcp-pv-cup-track 7.5s ease-in-out infinite; }

.vcp-cup-empty .vcp-cup-body {
  fill: rgba(255, 255, 255, 0.03);
  stroke: rgba(255, 255, 255, 0.3);
  stroke-dasharray: 2.5 2;
}

.vcp-cup-empty .vcp-cup-handle { stroke: rgba(255, 255, 255, 0.3); stroke-width: 1.4; }
.vcp-cup-empty .vcp-cup-shine { display: none; }

.vcp-cup-full {
  transform-box: fill-box;
  transform-origin: center bottom;
}

.vcp-preview-full-cup .vcp-pv-slot-n .vcp-cup-full { animation: vcp-pv-cup-n 7.5s ease-in-out infinite; }
.vcp-preview-full-cup .vcp-pv-slot-c .vcp-cup-full { animation: vcp-pv-cup-c 7.5s ease-in-out infinite; }
.vcp-preview-full-cup .vcp-pv-slot-e .vcp-cup-full { animation: vcp-pv-cup-e 7.5s ease-in-out infinite; }

.vcp-pv-chip {
  fill: rgba(6, 17, 31, 0.96);
  stroke-width: 1.2;
}

.vcp-pv-slot-n .vcp-pv-chip { stroke: var(--vcp-normal); }
.vcp-pv-slot-c .vcp-pv-chip { stroke: var(--vcp-challenge); }
.vcp-pv-slot-e .vcp-pv-chip { stroke: var(--vcp-elite); }

.vcp-pv-chip-text {
  font-family: var(--vcp-font);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.vcp-pv-slot-n .vcp-pv-chip-text { fill: var(--vcp-normal); }
.vcp-pv-slot-c .vcp-pv-chip-text { fill: var(--vcp-challenge); }
.vcp-pv-slot-e .vcp-pv-chip-text { fill: var(--vcp-elite); }

/* ------------------------------------------------------------------------ */
/* Calm end state: no transitions, no loops                                  */
/* (reduced motion option, system setting and Performance Mode)              */
/* ------------------------------------------------------------------------ */
.vcp-static *,
.vcp-static *::before,
.vcp-static *::after,
body.performance-mode .vcp-preview *,
body.performance-mode .vcp-preview *::before,
body.performance-mode .vcp-preview *::after {
  transition: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .vcp-preview *,
  .vcp-preview *::before,
  .vcp-preview *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ------------------------------------------------------------------------ */
/* Keyframes                                                                 */
/* ------------------------------------------------------------------------ */
/* Duel Mode (zones x: 84.5 · 110 · 135.5 · 161) */
@keyframes vcp-pv-duel-ball {
  0%, 9% { transform: translate(110px, 74px); }
  15%, 24% { transform: translate(135.5px, 74px); }
  30%, 39% { transform: translate(161px, 74px); }
  45%, 54% { transform: translate(135.5px, 74px); }
  60%, 69% { transform: translate(110px, 74px); }
  75%, 84% { transform: translate(84.5px, 74px); }
  90%, 100% { transform: translate(110px, 74px); }
}

@keyframes vcp-pv-duel-a {
  0%, 6%, 15%, 21%, 30%, 81%, 90%, 100% { transform: scale(1); }
  10%, 25%, 85% { transform: scale(1.16); }
}

@keyframes vcp-pv-duel-b {
  0%, 36%, 45%, 51%, 60%, 66%, 75%, 100% { transform: scale(1); }
  40%, 55%, 70% { transform: scale(1.16); }
}

/* Possession Rush */
@keyframes vcp-pv-pos-ball {
  0% { transform: translate(110px, 74px); opacity: 0; }
  3% { opacity: 1; }
  13% { transform: translate(110px, 74px); }
  18%, 31% { transform: translate(135.5px, 74px); }
  36%, 100% { transform: translate(161px, 74px); }
  94% { opacity: 1; }
  99% { opacity: 0; }
}

/* The gold halo dims for a moment while possession changes */
@keyframes vcp-pv-pos-halo {
  0%, 70% { opacity: 0.85; }
  74% { opacity: 0.15; }
  80%, 100% { opacity: 0.85; }
}

@keyframes vcp-pv-pos-ring-a {
  0% { stroke-dashoffset: 0; opacity: 1; }
  13% { stroke-dashoffset: 45; }
  15% { stroke-dashoffset: 0; }
  31% { stroke-dashoffset: 45; }
  33% { stroke-dashoffset: 0; }
  72% { stroke-dashoffset: 100; opacity: 1; }
  78%, 100% { stroke-dashoffset: 100; opacity: 0; }
}

@keyframes vcp-pv-pos-ring-b {
  0%, 74% { stroke-dashoffset: 0; opacity: 0; }
  78% { stroke-dashoffset: 0; opacity: 1; }
  96% { stroke-dashoffset: 35; opacity: 1; }
  100% { stroke-dashoffset: 40; opacity: 0; }
}

@keyframes vcp-pv-pos-b {
  0%, 74%, 84%, 100% { transform: scale(1); }
  78% { transform: scale(1.16); }
}

@keyframes vcp-pv-pos-swap {
  0%, 72% { opacity: 0; transform: translate(161px, 57px) scale(0.6); }
  76% { opacity: 1; transform: translate(161px, 55px) scale(1.04); }
  80%, 88% { opacity: 1; transform: translate(161px, 55px) scale(1); }
  92%, 100% { opacity: 0; transform: translate(161px, 55px) scale(1); }
}

/* Single Round */
@keyframes vcp-pv-single-ball {
  0% { transform: translate(135.5px, 64px); opacity: 0; }
  4% { opacity: 1; }
  12% { transform: translate(135.5px, 64px); }
  20%, 28% { transform: translate(161px, 64px); }
  36%, 42% { transform: translate(186.5px, 64px); }
  50% { transform: translate(213px, 64px); opacity: 1; }
  58%, 100% { transform: translate(213px, 64px); opacity: 0; }
}

@keyframes vcp-pv-single-cup {
  0%, 52% { opacity: 0; transform: scale(0.7); }
  60% { opacity: 1; transform: scale(1.04); }
  66%, 90% { opacity: 1; transform: scale(1); }
  97%, 100% { opacity: 0; transform: scale(1); }
}

/* Full Cup */
@keyframes vcp-pv-cup-n {
  0%, 8% { opacity: 0; transform: scale(0.6); }
  14% { opacity: 1; transform: scale(1.05); }
  18%, 90% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes vcp-pv-cup-c {
  0%, 34% { opacity: 0; transform: scale(0.6); }
  40% { opacity: 1; transform: scale(1.05); }
  44%, 90% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes vcp-pv-cup-e {
  0%, 60% { opacity: 0; transform: scale(0.6); }
  66% { opacity: 1; transform: scale(1.05); }
  70%, 90% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes vcp-pv-cup-track {
  0%, 14% { stroke-dashoffset: 100; opacity: 1; }
  40% { stroke-dashoffset: 50; }
  66%, 90% { stroke-dashoffset: 0; opacity: 1; }
  96% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 100; opacity: 0; }
}