:root {
  --modern-bg: #070b12;
  --modern-surface: rgba(17, 24, 35, .86);
  --modern-surface-2: rgba(25, 35, 49, .82);
  --modern-line: rgba(255, 255, 255, .09);
  --modern-text: #f4f7fb;
  --modern-muted: #94a3b8;
  --modern-primary: #72f2b3;
  --modern-primary-strong: #23ce8b;
  --modern-accent: #86a8ff;
  --modern-radius: 18px;
  --modern-shadow: 0 18px 54px rgba(0, 0, 0, .32);
}

html {
  scroll-behavior: smooth;
  background: var(--modern-bg);
}

body {
  color: var(--modern-text) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(35, 206, 139, .14), transparent 32rem),
    radial-gradient(circle at 92% 14%, rgba(134, 168, 255, .12), transparent 34rem),
    var(--modern-bg) !important;
  font-family: "Poppins", "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .28;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000, transparent 75%);
}

a, button, .btn { transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease !important; }
a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 3px solid rgba(114,242,179,.42) !important; outline-offset: 3px; }

.content-background-radial-bg { opacity: .45; filter: saturate(.65) hue-rotate(14deg); }
.content { background: transparent !important; min-height: 100vh; }

/* Header */
.header {
  position: sticky !important;
  top: 0;
  z-index: 1000;
  min-height: 76px;
  padding: 10px clamp(16px, 3vw, 40px) !important;
  background: rgba(7, 11, 18, .78) !important;
  border-bottom: 1px solid var(--modern-line) !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.2) !important;
  backdrop-filter: blur(20px) saturate(145%);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
}
.header-logo__img { width: auto !important; max-width: 148px; max-height: 50px !important; object-fit: contain; }
.header-category__menu { gap: 4px !important; }
.header-category__menu-item-link {
  min-width: 72px;
  padding: 8px 10px !important;
  border: 1px solid transparent;
  border-radius: 12px !important;
  color: var(--modern-muted) !important;
}
.header-category__menu-item-link:hover {
  color: var(--modern-text) !important;
  background: rgba(255,255,255,.055) !important;
  border-color: var(--modern-line);
  transform: translateY(-2px);
}
.header-category__menu-item-img { width: 27px !important; height: 27px !important; opacity: .9; }
.header-misc__link, .custom-btn-action, .welcome__btn {
  border-radius: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
}
.header-misc__menu-item:nth-last-child(2) .header-misc__link,
.welcome__btn {
  color: #04120c !important;
  background: linear-gradient(135deg, var(--modern-primary), var(--modern-primary-strong)) !important;
  border: 0 !important;
  box-shadow: 0 8px 26px rgba(35,206,139,.24);
}
.header-misc__link:hover, .custom-btn-action:hover, .welcome__btn:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* Main layout */
.content__container { width: min(1500px, calc(100% - 32px)) !important; margin-inline: auto !important; }
.content__wrapper { padding-inline: 0 !important; }
.marquee { margin: 16px 0 14px !important; }
.marquee__wrapper {
  overflow: hidden;
  min-height: 42px;
  color: #cbd5e1 !important;
  background: rgba(17,24,35,.74) !important;
  border: 1px solid var(--modern-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  backdrop-filter: blur(14px);
}
.marquee__label { background: rgba(114,242,179,.12) !important; border-right: 1px solid rgba(114,242,179,.16); }

/* Hero carousel */
.splide-home-main { margin-bottom: 18px !important; }
.splide-home-main .splide__track { border-radius: 22px !important; box-shadow: var(--modern-shadow); }
.splide-home-main .splide__slide { overflow: hidden; border-radius: 22px !important; }
.splide-home-main__img {
  width: 100% !important;
  aspect-ratio: 2 / 1;
  object-fit: cover !important;
  border-radius: 22px !important;
  transform: scale(1.002);
}
.splide-home-main .splide__slide:hover .splide-home-main__img { transform: scale(1.025); filter: saturate(1.08); }
.splide__arrow { background: rgba(7,11,18,.72) !important; border: 1px solid rgba(255,255,255,.15) !important; backdrop-filter: blur(10px); }
.splide__pagination__page { background: rgba(255,255,255,.38) !important; }
.splide__pagination__page.is-active { width: 24px; border-radius: 99px; background: var(--modern-primary) !important; }

/* Sections */
.content-page,
.content-page--alt,
.content-page--alt1,
.content-page--alt2 {
  position: relative;
  margin: 14px 0 !important;
  padding: clamp(16px, 2.2vw, 28px) !important;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(22,31,44,.92), rgba(11,17,26,.88)) !important;
  border: 1px solid var(--modern-line) !important;
  border-radius: var(--modern-radius) !important;
  box-shadow: 0 14px 42px rgba(0,0,0,.22) !important;
}
.content-page::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  top: -150px;
  right: -70px;
  pointer-events: none;
  border-radius: 50%;
  background: rgba(114,242,179,.1);
  filter: blur(25px);
}
.content-page__header { position: relative; z-index: 1; gap: 18px !important; margin-bottom: 18px !important; }
.content-page__header-title-text {
  color: var(--modern-text) !important;
  font-size: clamp(19px, 2vw, 28px) !important;
  font-weight: 800 !important;
  line-height: 1.18;
  letter-spacing: -.025em !important;
  text-transform: none !important;
}
.content-page__header-title-text--alt { color: var(--modern-text) !important; }
.content-page__header-title-badge, .badge {
  color: #b9c4d3 !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px !important;
}
.content-page__header-btn, .badge-btn {
  padding: 9px 14px !important;
  color: var(--modern-primary) !important;
  background: rgba(114,242,179,.08) !important;
  border: 1px solid rgba(114,242,179,.2) !important;
  border-radius: 11px !important;
}
.content-page__header-btn:hover, .badge-btn:hover { background: rgba(114,242,179,.15) !important; transform: translateY(-2px); }
.content-page__header-logo { padding: 8px; border-radius: 12px; background: rgba(255,255,255,.055); }
.counter-prize { padding: 10px 14px !important; background: rgba(255,255,255,.045) !important; border: 1px solid var(--modern-line); border-radius: 13px !important; }
.counter-prize__item { color: var(--modern-muted) !important; }
.counter-prize__item--value .fa-circle { color: var(--modern-primary) !important; box-shadow: 0 0 15px rgba(114,242,179,.7); }

/* Provider chips */
.content-provider__wrapper { gap: 9px !important; }
.content-provider__item-link {
  min-height: 74px;
  padding: 9px !important;
  color: var(--modern-muted) !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.055) !important;
  border-radius: 13px !important;
}
.content-provider__item-link:hover { color: #fff !important; background: rgba(255,255,255,.075) !important; border-color: rgba(114,242,179,.22) !important; transform: translateY(-3px); }
.content-provider__item-img-wrapper { background: rgba(255,255,255,.07) !important; border-radius: 11px !important; }

/* Game cards */
.splide-game-default__wrapper,
.splide-game-number__wrapper,
.splide-game-default-alt__item {
  overflow: hidden;
  background: rgba(20,29,41,.88) !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  border-radius: 15px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.22) !important;
}
.splide-game-default__wrapper:hover,
.splide-game-number__wrapper:hover,
.splide-game-default-alt__item:hover {
  border-color: rgba(114,242,179,.26) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.3), 0 0 0 1px rgba(114,242,179,.08) !important;
  transform: translateY(-5px);
}
.splide-game-default__img, .splide-game-number__img { width: 100% !important; object-fit: cover !important; background: #101722; }
.splide-game-default__caption { padding: 11px 12px !important; color: var(--modern-text) !important; background: linear-gradient(to bottom, rgba(20,29,41,.92), rgba(14,21,31,.98)) !important; }
.splide-game-default__caption--tag { color: var(--modern-muted) !important; font-weight: 500; }
.game-playing { color: var(--modern-primary) !important; }

/* Modal and footer */
.modal-content { color: var(--modern-text) !important; background: #111923 !important; border: 1px solid var(--modern-line) !important; border-radius: 20px !important; box-shadow: var(--modern-shadow) !important; }
.modal-backdrop, .modals-alt-overlay { backdrop-filter: blur(12px); }
.footer { margin-top: 28px !important; color: var(--modern-muted) !important; background: #080d14 !important; border-top: 1px solid var(--modern-line) !important; }
.footer a { color: #cbd5e1 !important; }
.footer a:hover { color: var(--modern-primary) !important; }
.footer-partner--item, .footer-payments--item { opacity: .72; filter: grayscale(.2); transition: opacity .2s ease, filter .2s ease, transform .2s ease; }
.footer-partner--item:hover, .footer-payments--item:hover { opacity: 1; filter: none; transform: translateY(-2px); }

/* Hide neutral placeholders instead of showing broken-looking tiles. */
img[src$="placeholder.svg"] { opacity: .16 !important; filter: grayscale(1); }
.content-provider__item-img-wrapper:has(img[src$="placeholder.svg"])::after {
  content: "•";
  color: var(--modern-primary);
  font-size: 24px;
}

@media (max-width: 992px) {
  .header { min-height: 64px; padding: 8px 14px !important; }
  .header-logo__img { max-width: 118px; max-height: 42px !important; }
  .content__container { width: min(100% - 20px, 1500px) !important; }
  .content-page { padding: 16px !important; }
  .content-page__header { align-items: flex-start !important; flex-direction: column !important; }
  .content-page__header-side { width: 100% !important; }
  .counter-prize { width: 100%; }
  .splide-home-main__img { border-radius: 16px !important; }
  .splide-home-main .splide__track, .splide-home-main .splide__slide { border-radius: 16px !important; }
}

@media (max-width: 640px) {
  .content__container { width: min(100% - 14px, 1500px) !important; }
  .marquee { margin-top: 9px !important; }
  .content-page { margin: 9px 0 !important; padding: 13px !important; border-radius: 15px !important; }
  .content-page__header-title-text { font-size: 19px !important; }
  .content-provider__item-link { min-height: 64px; }
  .splide-home-main__img { aspect-ratio: 16 / 9; }
  .header-category__menu-item-link { min-width: 62px; padding: 6px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}