/* ufa99 — stadium night theme (midnight navy / volt lime) */
html { scroll-behavior: smooth; }
body {
  background-color: #050a1c;
  background-image:
    radial-gradient(60rem 30rem at 85% -10%, rgba(200, 255, 46, .09), transparent 60%),
    radial-gradient(50rem 30rem at -10% 30%, rgba(60, 90, 200, .18), transparent 60%);
  background-attachment: fixed;
}
::selection { background: #c8ff2e; color: #050a1c; }

/* pitch lines used behind heroes */
.vx-pitch {
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 46px),
    linear-gradient(180deg, rgba(12,22,51,.0), rgba(12,22,51,.85));
}

/* Glass card with glowing edge */
.vx-glass {
  background: linear-gradient(160deg, rgba(28, 44, 88, .55), rgba(7, 14, 38, .72));
  border: 1px solid rgba(170, 180, 212, .14);
  border-radius: 1.25rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .9);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.vx-glow:hover {
  border-color: rgba(200, 255, 46, .55);
  box-shadow: 0 0 0 1px rgba(200, 255, 46, .25), 0 18px 46px -18px rgba(200, 255, 46, .35);
  transform: translateY(-3px);
}
.vx-solid { background: #0c1633; border: 1px solid #1c2c58; border-radius: 1.25rem; }

/* Buttons */
.vx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.5rem; border-radius: .75rem;
  font-family: "Kodchasan", "Krub", sans-serif; font-weight: 700;
  color: #050a1c; background: #c8ff2e;
  box-shadow: 0 0 0 0 rgba(200, 255, 46, .5), 0 10px 26px -10px rgba(200, 255, 46, .7);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 94% 100%, 0 100%);
}
.vx-btn:hover { background: #e2ff8f; transform: translateY(-2px); }
.vx-btn:focus-visible, .vx-ghost:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid #c8ff2e; outline-offset: 3px; }
.vx-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.4rem; border-radius: .75rem; font-weight: 600;
  border: 1px solid rgba(244, 247, 255, .22); color: #f4f7ff;
  transition: border-color .2s ease, color .2s ease;
}
.vx-ghost:hover { border-color: #c8ff2e; color: #c8ff2e; }

/* Section kicker */
.vx-kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #c8ff2e;
}
.vx-kicker::before { content: ""; width: 1.6rem; height: 2px; background: currentColor; }

/* Nav */
.vx-nav a[aria-current="page"] { color: #c8ff2e; }
.vx-nav a[aria-current="page"]::after { transform: scaleX(1); }
.vx-nav a { position: relative; }
.vx-nav a::after {
  content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .2rem; height: 2px;
  background: #c8ff2e; transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.vx-nav a:hover::after { transform: scaleX(1); }

/* Mobile bottom navigation */
.vx-dock { padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -12px 30px -14px rgba(0, 0, 0, .9); }
.vx-dock a { transition: color .2s ease; }
.vx-dock a:hover, .vx-dock a[aria-current="page"] { color: #c8ff2e; }
.vx-dock a[aria-current="page"] svg { filter: drop-shadow(0 0 6px rgba(200, 255, 46, .6)); }
.vx-dock-cta span { box-shadow: 0 0 0 1px rgba(200, 255, 46, .35), 0 8px 22px -6px rgba(200, 255, 46, .75); transition: transform .2s ease; }
.vx-dock-cta:active span { transform: scale(.94); }
/* keep the footer clear of the dock on phones and tablets */
@media (max-width: 1023px) { body { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); } }

/* Live ticker dot */
.vx-live { width: .55rem; height: .55rem; border-radius: 999px; background: #ff5a36; box-shadow: 0 0 0 0 rgba(255, 90, 54, .6); animation: vx-pulse 1.8s infinite; }
@keyframes vx-pulse { 70% { box-shadow: 0 0 0 .55rem rgba(255, 90, 54, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 90, 54, 0); } }

/* Scoreboard digits */
.vx-digit { font-variant-numeric: tabular-nums; font-family: "Kodchasan", sans-serif; }

/* Reveal on scroll (only when JS is running) */
html:not(.no-js) .vx-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
html:not(.no-js) .vx-reveal.is-in { opacity: 1; transform: none; }

/* Article typography */
.vx-prose p { margin: 0 0 1.1rem; line-height: 1.95; color: #d6dcf0; }
.vx-prose h2 { margin: 2.4rem 0 1rem; font-family: "Kodchasan", sans-serif; font-size: 1.55rem; font-weight: 700; color: #f4f7ff; }
.vx-prose h3 { margin: 1.8rem 0 .7rem; font-family: "Kodchasan", sans-serif; font-size: 1.2rem; font-weight: 700; color: #e2ff8f; }
.vx-prose ul, .vx-prose ol { margin: 0 0 1.2rem 1.25rem; color: #d6dcf0; line-height: 1.9; }
.vx-prose ul { list-style: square; }
.vx-prose ol { list-style: decimal; }
.vx-prose li::marker { color: #c8ff2e; }
.vx-prose a { color: #c8ff2e; text-decoration: underline; text-underline-offset: 3px; }
.vx-prose blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 4px solid #c8ff2e; background: rgba(200, 255, 46, .06); border-radius: 0 .75rem .75rem 0; color: #f4f7ff; }
.vx-prose strong { color: #f4f7ff; }

/* FAQ */
details.vx-faq summary { list-style: none; cursor: pointer; }
details.vx-faq summary::-webkit-details-marker { display: none; }
details.vx-faq summary .vx-plus { transition: transform .25s ease; }
details.vx-faq[open] summary .vx-plus { transform: rotate(45deg); }

/* Blog filter chips */
[data-filter][aria-pressed="true"] { background: #c8ff2e; color: #050a1c; border-color: #c8ff2e; }

/* Game Provider Logo Slider (structure from topspinonline) */
.providers-section { margin: 0; padding: 2.75rem 0 1.5rem; border-top: 1px solid rgba(200, 255, 46, .12); border-bottom: 1px solid rgba(200, 255, 46, .12); background: linear-gradient(180deg, rgba(12, 22, 51, .7), rgba(5, 10, 28, .2)); }
.providers-header { text-align: center; max-width: 46rem; margin: 0 auto 1.4rem; padding: 0 1rem; }
.providers-header h2 { font-family: "Kodchasan", sans-serif; font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 1.8rem); color: #f4f7ff; }
.providers-header p { margin-top: .5rem; color: #aab4d4; font-size: .95rem; line-height: 1.75; }
.providers-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.providers-track {
  display: flex;
  gap: 16px;
  width: max-content;
  margin: 0;
  padding: 10px 0 22px;
  list-style: none;
  animation: providers-scroll 50s linear infinite;
  animation-play-state: paused;
}
/* runs only while on screen (toggled by uf99.js) */
.providers-marquee.is-active .providers-track { animation-play-state: running; }
.providers-marquee.is-active:hover .providers-track { animation-play-state: paused; }
.providers-track li {
  flex: none;
  border-radius: 16px;
  outline: 1px solid rgba(200, 255, 46, .18);
  outline-offset: 3px;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .55));
  transition: transform .2s ease, outline-color .2s ease;
}
.providers-track li:hover { transform: translateY(-3px); outline-color: rgba(200, 255, 46, .7); }
.providers-track img { width: 220px; height: 141px; display: block; border-radius: 16px; }
/* track holds two identical sets: shift by one set (+ one gap) for a seamless loop */
@keyframes providers-scroll {
  to { transform: translateX(calc(-50% - 8px)); }
}
@media (max-width: 600px) {
  .providers-track { gap: 12px; animation-duration: 35s; }
  .providers-track img { width: 170px; height: 109px; }
  @keyframes providers-scroll { to { transform: translateX(calc(-50% - 6px)); } }
}
/* reduced-motion users still get the loop, just at half speed (hover still pauses it) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .providers-track { animation-duration: 100s; }
  .providers-track li, .vx-glass, .vx-btn { transition: none; }
  .vx-live { animation: none; }
  html:not(.no-js) .vx-reveal { opacity: 1; transform: none; transition: none; }
}