/* Eclipse theme — Material-inspired dark casino */
html, body { margin: 0; padding: 0; }
body.ecl-body {
  background: #0A1122;
  color: #E6E1E5;
  font-family: Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
  overflow-x: hidden;
}
* { box-sizing: border-box; }
a { color: #D0BCFF; text-decoration: none; }
a:hover { color: #EADDFF; }
a:focus-visible, button:focus-visible {
  outline: 2px solid #D0BCFF;
  outline-offset: 2px;
}
::selection { background: #4F378B; color: #FFFFFF; }

.ecl-shell { max-width: 100%; }
button.ecl-btn, button.ecl-game, button.ecl-prov {
  font-family: inherit;
  cursor: pointer;
}

@keyframes ecl-ticker-run {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Header */
.ecl-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(12, 20, 38, 0.94);
  border-bottom: 1px solid #22315A;
}
.ecl-header-inner {
  max-width: 1440px; margin: 0 auto;
  padding: 12px 24px;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px;
}
.ecl-logo-link { display: block; flex: 0 0 auto; }
.ecl-logo--header {
  width: clamp(120px, 14vw, 208px); height: 56px;
  object-fit: contain; display: block;
}
.ecl-nav-slot--desktop { flex: 1 1 auto; min-width: 0; }
.ecl-nav-slot--desktop .ecl-main-nav {
  display: flex; flex-wrap: nowrap; align-items: center;
  gap: 2px; justify-content: safe center;
}
.ecl-nav-slot--desktop .ecl-nav-link {
  display: inline-flex; align-items: center; height: 40px;
  padding: 0 8px; border-radius: 999px;
  color: #E6E1E5; font-size: clamp(12px, 1.3vw, 15px); font-weight: 500;
  white-space: nowrap;
}
.ecl-nav-slot--desktop .ecl-nav-link:hover { background: #1B2851; color: #EADDFF; }

.ecl-header-actions {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px; white-space: nowrap;
}
.ecl-burger {
  display: none; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid #33456F; background: #152040; cursor: pointer; padding: 0;
}
.ecl-burger span { display: block; width: 18px; height: 2px; background: #E6E1E5; border-radius: 1px; }

.ecl-nav-slot--mobile {
  display: none; flex-basis: 100%; flex-direction: column;
  padding-top: 6px; border-top: 1px solid #22315A;
}
.ecl-nav-slot--mobile[hidden] { display: none !important; }
.ecl-header.is-open .ecl-nav-slot--mobile:not([hidden]) { display: flex; }
.ecl-nav-slot--mobile .ecl-main-nav {
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  padding: 6px 0 10px;
}
.ecl-nav-slot--mobile .ecl-nav-link {
  display: flex; align-items: center; min-height: 44px;
  padding: 0 8px; border-radius: 999px; color: #E6E1E5; font-size: 15px; font-weight: 500;
}
.ecl-nav-slot--mobile .ecl-nav-link:hover { background: #1B2851; }

/* Buttons — Example 3 */
.ecl-btn {
  flex: 0 0 auto; height: 44px; padding: 0 16px; border-radius: 999px;
  font-size: 15px; font-weight: 500; letter-spacing: 0.4px;
  transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1), background 150ms ease, border-color 150ms ease;
}
.ecl-btn--ghost {
  border: 1.5px solid #D0BCFF; background: transparent; color: #D0BCFF;
  box-shadow: 0 0 0 1px rgba(208,188,255,0.25), 0 0 18px rgba(208,188,255,0.35), inset 0 0 12px rgba(208,188,255,0.12);
  text-shadow: 0 0 12px rgba(208,188,255,0.7);
}
.ecl-btn--ghost:hover {
  box-shadow: 0 0 0 1px rgba(208,188,255,0.45), 0 0 28px rgba(208,188,255,0.6), inset 0 0 16px rgba(208,188,255,0.2);
}
.ecl-btn--pink {
  border: none; background: #EFB8C8; color: #492532; font-weight: 700; padding: 0 18px;
  box-shadow: 0 0 22px rgba(239,184,200,0.55), 0 0 60px rgba(239,184,200,0.25);
}
.ecl-btn--pink:hover {
  box-shadow: 0 0 32px rgba(239,184,200,0.8), 0 0 80px rgba(239,184,200,0.4);
}
.ecl-btn--gold {
  border: none; background: #FFC24A; color: #3A2600; font-weight: 700;
  box-shadow: 0 0 26px rgba(255,194,74,0.55), 0 0 70px rgba(255,194,74,0.28);
}
.ecl-btn--gold:hover {
  box-shadow: 0 0 38px rgba(255,194,74,0.85), 0 0 100px rgba(255,194,74,0.45);
}
.ecl-btn--mint {
  border: none; background: #7CE3B1; color: #08321F; font-weight: 700;
  box-shadow: 0 0 28px rgba(124,227,177,0.55), 0 0 80px rgba(124,227,177,0.28);
}
.ecl-btn--mint:hover {
  box-shadow: 0 0 40px rgba(124,227,177,0.85), 0 0 110px rgba(124,227,177,0.45);
}
.ecl-btn--lg {
  height: 60px; padding: 0 40px; font-size: 17px; font-weight: 700; white-space: nowrap;
}
.ecl-btn--outline {
  height: 48px; padding: 0 32px;
  border: 1px solid #33456F; background: transparent; color: #D0BCFF; font-weight: 500;
}
.ecl-btn--outline:hover { background: #152040; border-color: #7F67BE; }

/* Hero */
.ecl-hero { max-width: 1440px; margin: 0 auto; padding: 24px; }
.ecl-hero-box {
  position: relative; width: 100%; aspect-ratio: 1950 / 807; min-height: 470px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 0 2% 0 11%;
  background: transparent var(--ecl-hero) center center / contain no-repeat;
}
.ecl-hero-img { display: none; width: 100%; height: auto; }
.ecl-hero-text {
  position: relative; max-width: 56%;
  display: flex; flex-direction: column; align-items: flex-start; z-index: 1;
}
.ecl-hero-title {
  margin: 0;
  font-size: clamp(26px, 3.6vw, 52px);
  line-height: 1.08; font-weight: 700; letter-spacing: -0.25px; color: #FFFFFF;
  text-shadow: 0 0 40px rgba(208,188,255,0.35);
  word-break: normal; overflow-wrap: normal; hyphens: none;
}
.ecl-hero-cta { margin-left: 96px; margin-top: 28px; z-index: 1; }

/* Sections */
.ecl-section { max-width: 1440px; margin: 0 auto; padding: 32px 24px 8px; }
.ecl-section-head { margin-bottom: 24px; }
.ecl-section-title {
  margin: 0 0 6px; font-size: 36px; line-height: 1.15; font-weight: 700;
  color: #FFFFFF; letter-spacing: -0.25px;
}

/* Games — 8 cols desktop; show-more = +1 full row */
.ecl-games-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 24px 16px;
}
.ecl-game {
  display: flex; flex-direction: column; gap: 10px;
  padding: 0; border: 0; background: transparent; text-align: left; color: inherit; width: 100%;
}
.ecl-game.is-hidden, .ecl-prov.is-hidden { display: none !important; }
.ecl-game-frame {
  display: block; border-radius: 14px; padding: 3px; border: 2px solid #D0BCFF;
  background: #152040; overflow: hidden;
  box-shadow: 0 0 16px rgba(208,188,255,0.25);
}
.ecl-game-frame--0 { border-color: #D0BCFF; box-shadow: 0 0 16px rgba(208,188,255,0.25); }
.ecl-game-frame--1 { border-color: #EFB8C8; box-shadow: 0 0 16px rgba(239,184,200,0.25); }
.ecl-game-frame--2 { border-color: #CCC2DC; box-shadow: 0 0 16px rgba(204,194,220,0.25); }
.ecl-game-frame--3 { border-color: #B69DF8; box-shadow: 0 0 16px rgba(182,157,248,0.25); }
.ecl-game-frame--4 { border-color: #D29DAC; box-shadow: 0 0 16px rgba(210,157,172,0.25); }
.ecl-game-frame--5 { border-color: #B5F5A8; box-shadow: 0 0 16px rgba(181,245,168,0.25); }
.ecl-game-frame img {
  display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
  border-radius: 11px; background: #1B2851;
}
.ecl-game-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px;
}
.ecl-game-players, .ecl-game-likes {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
}
.ecl-game-players { color: #CCC2DC; }
.ecl-game-likes { color: #EFB8C8; gap: 4px; }
.ecl-dot {
  width: 7px; height: 7px; border-radius: 999px; background: #B5F5A8;
  box-shadow: 0 0 8px rgba(181,245,168,0.9);
}
.ecl-heart {
  display: inline-block; font-size: 14px; line-height: 1; color: #EFB8C8;
}
.ecl-more-wrap { display: flex; justify-content: center; padding: 28px 0 8px; }
.ecl-more-wrap.is-hidden { display: none; }

/* Content */
.ecl-prose-section { max-width: 880px; padding: 48px 24px; }
.ecl-article { }
.ecl-content { font-size: 17px; line-height: 1.65; color: #CAC4D0; }
.ecl-content h1, .ecl-content h2, .ecl-content h3 {
  color: #FFFFFF; font-weight: 700; line-height: 1.2; letter-spacing: -0.25px;
}
.ecl-content h1 { font-size: 36px; margin: 0 0 16px; }
.ecl-content h2 { font-size: 28px; margin: 28px 0 12px; color: #D0BCFF; font-weight: 500; }
.ecl-content h3 { font-size: 24px; margin: 28px 0 12px; color: #D0BCFF; font-weight: 500; }
.ecl-content p { margin: 0 0 18px; }
.ecl-content ul, .ecl-content ol { margin: 0 0 32px; padding-left: 24px; color: #E6E1E5; font-size: 16px; line-height: 1.7; }
.ecl-content li { margin-bottom: 8px; }
.ecl-content a { color: #D0BCFF; }
.ecl-content blockquote {
  margin: 0 0 32px; padding: 24px 28px;
  border-left: 4px solid #EFB8C8; border-radius: 0 16px 16px 0;
  background: #152040; color: #FFD8E4; font-size: 19px; line-height: 1.55; font-weight: 300;
}
/* Tables: unify all CMS table cards (any light wrapper hex) like Live dealer */
.ecl-content div:has(> table) {
  background: #121B36 !important;
  border: 1px solid #33456F !important;
  color: #E8E2F2 !important;
}
.ecl-content table {
  width: 100%; border-collapse: collapse; font-size: 15px;
  border: 1px solid #33456F; border-radius: 12px; overflow: hidden;
  color: #E8E2F2 !important; background: #0A1122 !important;
}
.ecl-content table th, .ecl-content table td {
  padding: 14px 20px; text-align: left; border-top: 1px solid #22315A; vertical-align: top;
  color: #E8E2F2 !important; background: transparent !important;
}
.ecl-content table th {
  background: #243568 !important; font-size: 13px; font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase; color: #F5F0FF !important;
}
.ecl-content table td { color: #E8E2F2 !important; line-height: 1.6; }
.ecl-content table td:first-child,
.ecl-content table td:first-child b,
.ecl-content table td:first-child strong { color: #FFFFFF !important; font-weight: 600; }
.ecl-content table b, .ecl-content table strong { color: inherit !important; }
.ecl-content table tbody tr:nth-child(odd) { background: #152040 !important; }
.ecl-content table tbody tr:nth-child(even) { background: #0E1730 !important; }
.ecl-content table thead tr { background: #243568 !important; }
.ecl-content-cta { margin-top: 28px; display: flex; justify-content: center; }

@media (max-width: 768px) {
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* Ticker */
.ecl-ticker-wrap {
  padding: 24px 0 40px;
  border-top: 1px solid #22315A; border-bottom: 1px solid #22315A;
  background: #0E1730;
}
.ecl-ticker-label-row {
  max-width: 1440px; margin: 0 auto;
  padding: 16px 24px 20px;
  display: flex; align-items: center; gap: 12px;
}
.ecl-trophy {
  width: 22px; height: 22px; flex: 0 0 auto;
  background: #EFB8C8;
  clip-path: polygon(20% 10%, 80% 10%, 85% 35%, 70% 35%, 70% 55%, 85% 70%, 85% 90%, 15% 90%, 15% 70%, 30% 55%, 30% 35%, 15% 35%);
}
.ecl-ticker-title {
  margin: 0; font-size: 22px; font-weight: 500; letter-spacing: 0.1px; color: #FFFFFF;
}
.ecl-ticker-viewport { overflow: hidden; width: 100%; }
.ecl-ticker-track {
  display: flex; width: max-content; gap: 16px;
  animation: ecl-ticker-run 60s linear infinite;
}
.ecl-ticker-item {
  display: flex; align-items: center; gap: 14px;
  margin-right: 0; padding: 10px 20px 10px 10px;
  border-radius: 999px; background: #152040; border: 1px solid #22315A;
}
.ecl-ticker-item img {
  width: 44px; height: 44px; border-radius: 999px; object-fit: cover;
  flex: 0 0 auto; background: #1B2851; box-shadow: 0 0 0 2px #2A3963; display: block;
}
.ecl-ticker-nick {
  font-size: 14px; font-weight: 500; color: #E6E1E5; white-space: nowrap;
}
.ecl-ticker-amount {
  font-size: 16px; font-weight: 700; color: #B5F5A8; white-space: nowrap;
  text-shadow: 0 0 14px rgba(181,245,168,0.45);
}

/* Providers — 7 cols desktop; show-more = +1 full row */
.ecl-prov-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.ecl-prov {
  display: flex; align-items: center; justify-content: center;
  height: 104px; padding: 20px; border-radius: 16px;
  border: 1px solid rgba(208,188,255,0.33);
  background: linear-gradient(160deg, #332D41 0%, #0E1730 100%);
  box-shadow: inset 0 0 24px rgba(208,188,255,0.12);
  transition: transform 150ms cubic-bezier(0.2, 0, 0, 1);
}
.ecl-prov:hover { transform: translateY(-2px); }
.ecl-prov--1 { border-color: rgba(239,184,200,0.33); background: linear-gradient(160deg, #3A2A3F 0%, #0E1730 100%); }
.ecl-prov--2 { border-color: rgba(204,194,220,0.33); background: linear-gradient(160deg, #1B2851 0%, #0E1730 100%); }
.ecl-prov--3 { border-color: rgba(182,157,248,0.33); background: linear-gradient(160deg, #31283C 0%, #0E1730 100%); }
.ecl-prov--4 { border-color: rgba(210,157,172,0.33); background: linear-gradient(160deg, #3B2A33 0%, #0E1730 100%); }
.ecl-prov--5 { border-color: rgba(181,245,168,0.33); background: linear-gradient(160deg, #26283A 0%, #0E1730 100%); }
.ecl-prov img {
  width: 100%; height: 56px; object-fit: contain; display: block;
}

/* Promo banner */
.ecl-banner {
  position: relative;
  background: transparent var(--ecl-banner) center center / contain no-repeat;
  min-height: 420px; display: flex; align-items: center; justify-content: center;
}
.ecl-banner-img { display: none; width: 100%; height: auto; }
.ecl-banner-inner {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 20px; text-align: center; padding: 40px; margin-top: 72px;
}

/* Footer */
.ecl-footer {
  border-top: 1px solid #22315A; background: #0E1730;
}
.ecl-footer-top {
  max-width: 1440px; margin: 0 auto;
  padding: 32px 20px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 32px;
}
.ecl-logo--footer {
  width: clamp(140px, 20vw, 208px); height: 56px;
  object-fit: contain; display: block;
}
.ecl-nav-slot--footer .ecl-footer-nav {
  display: flex; flex-direction: column; align-items: center; gap: 11px;
}
.ecl-footer-link {
  font-size: 15px; font-weight: 500; color: #E6E1E5;
}
.ecl-footer-link:hover { color: #D0BCFF; }
.ecl-footer-bottom {
  max-width: 1440px; margin: 0 auto; padding: 0 24px 40px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.ecl-sec-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px;
}
.ecl-sec-img { height: 28px; width: auto; opacity: 0.8; display: block; }
.ecl-rg {
  margin: 0; font-size: 12px; line-height: 1.6; color: #958DA5;
  max-width: 720px; text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .ecl-ticker-track { animation: none !important; }
}

@media (max-width: 900px) {
  .ecl-nav-slot--desktop { display: none !important; }
  .ecl-burger { display: inline-flex; }
}

@media (max-width: 760px) {
  .ecl-header-inner { padding: 10px 16px; gap: 10px; }
  .ecl-logo--header { width: 124px; height: 42px; }
  .ecl-btn--ghost { display: none; }
  .ecl-header-actions .ecl-btn { min-height: 44px; }

  .ecl-hero { padding: 16px; }
  .ecl-hero-box {
    aspect-ratio: auto; min-height: 0;
    display: flex; flex-direction: column; gap: 18px; align-items: center;
    padding: 0; background: none !important;
  }
  .ecl-hero-img { display: block; order: 1; }
  .ecl-hero-text {
    position: absolute; left: 12%; top: 20%; width: 29%; max-width: none; z-index: 2;
  }
  .ecl-hero-title {
    font-size: clamp(11px, 3vw, 17px); line-height: 1.15;
    word-break: normal; overflow-wrap: normal;
  }
  .ecl-hero-cta { order: 2; margin: 0; width: 100%; display: flex; justify-content: center; }
  .ecl-hero-cta .ecl-btn { width: 100%; max-width: 360px; }

  .ecl-section-title { font-size: 28px; }
  .ecl-games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .ecl-prov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .ecl-banner {
    min-height: 0; flex-direction: column; gap: 18px; align-items: center;
    background: none !important;
  }
  .ecl-banner-img { display: block; order: 1; }
  .ecl-banner-inner { order: 2; margin-top: 0; padding: 0 4px 8px; }

  .ecl-nav-slot--footer .ecl-footer-nav { gap: 11px; }
}

@media (max-width: 1099px) and (min-width: 761px) {
  .ecl-games-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ecl-prov-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) and (min-width: 761px) {
  .ecl-games-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ecl-prov-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}