@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Kaushan+Script&display=swap');

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  background: #071a45;
}

.font-script {
  font-family: "Kaushan Script", cursive;
}

.shadow-header {
  box-shadow: 0 10px 35px rgb(0 0 0 / 22%);
}

.shadow-gold {
  box-shadow: 0 8px 24px rgb(218 172 80 / 25%);
}

.site-navbar {
  box-shadow: 0 12px 35px rgb(0 0 0 / 20%);
}

.site-navbar::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 8%, rgb(218 172 80 / 45%) 50%, transparent 92%);
  pointer-events: none;
}

.nav-link::after {
  content: "";
  position: absolute;
  right: 50%;
  bottom: 1.15rem;
  left: 50%;
  height: 2px;
  border-radius: 999px;
  background: #daac50;
  transition: 180ms ease;
}

.nav-link:hover::after,
.nav-link-active::after {
  right: 0.5rem;
  left: 0.5rem;
}

.nav-link-active {
  color: #fff;
}

.navbar-cta {
  box-shadow: 0 8px 22px rgb(218 172 80 / 18%);
}

.navbar-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 11px 26px rgb(218 172 80 / 26%);
}

.mobile-nav-link-active {
  background: linear-gradient(90deg, rgb(218 172 80 / 11%), transparent);
}

.casino-sidebar {
  box-shadow: 14px 0 38px rgb(0 0 0 / 18%);
  scrollbar-width: thin;
  scrollbar-color: rgb(218 172 80 / 25%) transparent;
}

.sidebar-brand {
  min-height: 99px;
  background: linear-gradient(135deg, rgb(18 59 143 / 16%), transparent);
}

.sidebar-nav-link {
  position: relative;
}

.sidebar-nav-link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -1rem;
  height: 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: #daac50;
  transform: translateY(-50%);
  transition: 180ms ease;
}

.sidebar-nav-link-active {
  background: linear-gradient(90deg, rgb(218 172 80 / 13%), rgb(218 172 80 / 3%));
  box-shadow: inset 0 0 0 1px rgb(218 172 80 / 10%);
}

.sidebar-nav-link-active::before {
  height: 1.65rem;
}

.sidebar-nav-icon {
  display: inline-flex;
  height: 2rem;
  width: 2rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 0.65rem;
  background: rgb(255 255 255 / 4%);
  color: #64748b;
  font-size: 0.78rem;
}

.sidebar-nav-link:hover .sidebar-nav-icon,
.sidebar-nav-link-active .sidebar-nav-icon,
.mobile-nav-link-active .sidebar-nav-icon {
  background: rgb(218 172 80 / 13%);
  color: #edce86;
}

.sidebar-bonus {
  position: relative;
  background:
    radial-gradient(circle at 100% 0%, rgb(218 172 80 / 17%), transparent 9rem),
    linear-gradient(145deg, #0d3278, #071a45);
}

.sidebar-bonus::after {
  content: "\2660";
  position: absolute;
  right: -1rem;
  bottom: -3rem;
  color: rgb(255 255 255 / 4%);
  font-family: serif;
  font-size: 10rem;
  line-height: 1;
  transform: rotate(-12deg);
}

@media (min-width: 1280px) {
  body.has-site-sidebar {
    padding-left: 276px;
  }
}

.brand-ribbon {
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  background: linear-gradient(90deg, rgb(226 20 45 / 14%), rgb(8 31 85 / 80%) 25%, rgb(8 31 85 / 80%) 75%, rgb(5 164 78 / 14%));
}

.logo-frame {
  position: relative;
  display: inline-flex;
  height: 3.625rem;
  width: 3.625rem;
  flex: none;
  border-radius: 1rem;
  padding: 2px;
  background: linear-gradient(145deg, #f4d995, #a87219);
  box-shadow: 0 9px 25px rgb(0 0 0 / 28%), 0 0 0 3px rgb(218 172 80 / 8%);
  transition: 180ms ease;
}

.group:hover .logo-frame {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgb(0 0 0 / 32%), 0 0 22px rgb(218 172 80 / 18%);
}

.logo-frame-large {
  height: 5rem;
  width: 5rem;
  border-radius: 1.125rem;
}

.nav-icon {
  display: inline-flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 0.625rem;
  background: rgb(255 255 255 / 4%);
  color: #94a3b8;
  transition: 180ms ease;
}

.nav-item:hover .nav-icon {
  border-color: rgb(218 172 80 / 38%);
  color: #edce86;
  transform: rotate(-4deg) scale(1.04);
}

.nav-item-active {
  background: linear-gradient(135deg, rgb(218 172 80 / 14%), rgb(218 172 80 / 3%));
  box-shadow: inset 0 0 0 1px rgb(218 172 80 / 16%);
}

.nav-icon-active {
  border-color: rgb(218 172 80 / 42%);
  background: linear-gradient(145deg, rgb(218 172 80 / 24%), rgb(218 172 80 / 8%));
  color: #edce86;
  box-shadow: 0 0 16px rgb(218 172 80 / 15%);
}

.action-icon {
  display: inline-flex;
  height: 1.9rem;
  width: 1.9rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.55rem;
  background: rgb(255 255 255 / 8%);
  color: #edce86;
}

.action-icon-dark {
  background: rgb(8 31 85 / 12%);
  color: #081f55;
}

.footer-shell::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #e2142d, #daac50 35%, #daac50 65%, #05a44e);
}

.footer-shell::after {
  content: "";
  position: absolute;
  top: -12rem;
  left: 35%;
  height: 24rem;
  width: 24rem;
  border-radius: 999px;
  background: rgb(18 59 143 / 20%);
  filter: blur(80px);
  pointer-events: none;
}

.footer-suit {
  position: absolute;
  color: rgb(255 255 255 / 2.5%);
  font-size: 14rem;
  line-height: 1;
  pointer-events: none;
}

.footer-suit-left {
  left: -3rem;
  bottom: -2rem;
  transform: rotate(-15deg);
}

.footer-suit-right {
  right: -3rem;
  top: 2rem;
  transform: rotate(15deg);
}

.support-icon {
  display: inline-flex;
  height: 2.75rem;
  width: 2.75rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 0.8rem;
  background: linear-gradient(145deg, #edce86, #bd8426);
  color: #081f55;
  font-size: 1.1rem;
  box-shadow: 0 8px 20px rgb(218 172 80 / 18%);
}

.support-card:hover .support-icon {
  transform: rotate(-5deg) scale(1.04);
}

.footer-title {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-title::after {
  content: "";
  display: block;
  width: 2rem;
  height: 2px;
  margin-top: 0.75rem;
  background: #daac50;
}

.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #94a3b8;
  transition: 180ms ease;
}

.footer-link i {
  color: #daac50;
  font-size: 0.65rem;
}

.footer-link:hover {
  color: #fff;
  transform: translateX(3px);
}

/* Homepage */
.hero-section {
  background:
    radial-gradient(circle at 50% 0%, rgb(18 59 143 / 52%), transparent 42rem),
    linear-gradient(180deg, #081f55 0%, #071a45 100%);
}

.hero-banner {
  position: relative;
  box-shadow: 0 28px 75px rgb(0 0 0 / 38%), 0 0 45px rgb(218 172 80 / 8%);
}

.hero-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%);
  pointer-events: none;
}

.hero-orb {
  position: absolute;
  height: 22rem;
  width: 22rem;
  border-radius: 999px;
  filter: blur(100px);
  pointer-events: none;
}

.hero-orb-red {
  top: 12rem;
  left: -12rem;
  background: rgb(226 20 45 / 13%);
}

.hero-orb-green {
  top: 25rem;
  right: -12rem;
  background: rgb(5 164 78 / 12%);
}

.quick-action {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  border-radius: 0.875rem;
  padding: 0.7rem;
  transition: 180ms ease;
}

.quick-action:hover {
  background: rgb(255 255 255 / 5%);
  transform: translateY(-2px);
}

.quick-action-icon {
  display: inline-flex;
  height: 2.65rem;
  width: 2.65rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(218 172 80 / 28%);
  border-radius: 0.75rem;
  background: linear-gradient(145deg, rgb(218 172 80 / 22%), rgb(218 172 80 / 6%));
  color: #edce86;
}

.quick-action small,
.quick-action strong {
  display: block;
}

.quick-action small {
  margin-bottom: 0.12rem;
  color: #64748b;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.quick-action strong {
  color: #fff;
  font-size: 0.78rem;
  white-space: nowrap;
}

.section-kicker {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0.3rem 0.3rem 0.4rem;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-kicker::before,
.hero-chip::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -0.35rem;
  bottom: 0.05rem;
  left: -0.25rem;
  height: 0.72rem;
  background: linear-gradient(90deg, rgb(218 172 80 / 14%), rgb(218 172 80 / 46%) 48%, rgb(218 172 80 / 18%));
  clip-path: polygon(1% 38%, 16% 20%, 43% 31%, 67% 7%, 100% 23%, 97% 78%, 72% 70%, 48% 95%, 21% 76%, 0 92%);
  transform: rotate(-1.3deg) skewX(-7deg);
}

.section-kicker i,
.hero-chip i {
  color: #edce86;
}

.gold-text {
  color: #edce86;
  background: linear-gradient(180deg, #fff0b8, #daac50);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.primary-cta,
.secondary-cta {
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  border-radius: 0.9rem;
  padding: 0.8rem 1.35rem;
  font-size: 0.875rem;
  font-weight: 900;
  transition: 180ms ease;
}

.primary-cta {
  background: linear-gradient(145deg, #f2d485, #c98e2b);
  color: #081f55;
  box-shadow: 0 12px 30px rgb(218 172 80 / 22%);
}

.primary-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 35px rgb(218 172 80 / 30%);
}

.secondary-cta {
  border: 1px solid rgb(255 255 255 / 15%);
  background: rgb(255 255 255 / 4%);
  color: #fff;
}

.secondary-cta:hover {
  border-color: rgb(218 172 80 / 45%);
  color: #edce86;
  transform: translateY(-3px);
}

.section-heading {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.section-heading > p {
  max-width: 32rem;
  color: #94a3b8;
  font-size: 0.95rem;
  line-height: 1.8;
}

.feature-card {
  position: relative;
  overflow: hidden;
  min-height: 18rem;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 1.4rem;
  background: linear-gradient(145deg, rgb(18 59 143 / 24%), rgb(255 255 255 / 2%));
  padding: 1.5rem;
  transition: 220ms ease;
}

.feature-card::after {
  content: "";
  position: absolute;
  right: -3rem;
  bottom: -3rem;
  height: 8rem;
  width: 8rem;
  border-radius: 999px;
  background: rgb(218 172 80 / 7%);
  filter: blur(12px);
}

.feature-card:hover {
  border-color: rgb(218 172 80 / 30%);
  transform: translateY(-6px);
}

.feature-number {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  color: rgb(255 255 255 / 6%);
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1;
}

.feature-icon {
  display: inline-flex;
  height: 3.5rem;
  width: 3.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(218 172 80 / 30%);
  border-radius: 1rem;
  background: linear-gradient(145deg, rgb(218 172 80 / 24%), rgb(218 172 80 / 6%));
  color: #edce86;
  font-size: 1.25rem;
  box-shadow: 0 10px 25px rgb(0 0 0 / 18%);
}

.feature-card h3 {
  margin-top: 2.6rem;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
}

.feature-card p {
  margin-top: 0.75rem;
  color: #94a3b8;
  font-size: 0.83rem;
  line-height: 1.75;
}

.game-card {
  position: relative;
  display: flex;
  min-height: 24rem;
  overflow: hidden;
  align-items: flex-end;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 1.75rem;
  padding: 2rem;
  transition: 240ms ease;
}

.game-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgb(4 19 50 / 5%) 20%, rgb(4 19 50 / 92%) 88%);
  pointer-events: none;
}

.game-card-image {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}

.game-card:hover .game-card-image {
  transform: scale(1.045);
}

.game-card-slot {
  background: #123b8f;
}

.game-card-live {
  background: #461629;
}

.game-card:hover {
  border-color: rgb(218 172 80 / 40%);
  transform: translateY(-5px);
}

.game-card-glow {
  position: absolute;
  top: -7rem;
  right: -5rem;
  height: 20rem;
  width: 20rem;
  border-radius: 999px;
  background: rgb(218 172 80 / 10%);
  filter: blur(45px);
}

.game-card-icon {
  position: absolute;
  top: 2rem;
  right: 2rem;
  color: rgb(237 206 134 / 13%);
  font-size: 9rem;
  line-height: 1;
  transition: 300ms ease;
}

.game-card:hover .game-card-icon {
  color: rgb(237 206 134 / 18%);
  transform: rotate(-6deg) scale(1.06);
}

.game-label {
  display: inline-flex;
  border: 1px solid rgb(218 172 80 / 28%);
  border-radius: 999px;
  background: rgb(218 172 80 / 9%);
  padding: 0.35rem 0.65rem;
  color: #edce86;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.game-card h3 {
  margin-top: 1rem;
  color: #fff;
  font-size: 2rem;
  font-weight: 900;
}

.game-card p {
  margin-top: 0.75rem;
  max-width: 26rem;
  color: #cbd5e1;
  font-size: 0.9rem;
  line-height: 1.8;
}

.game-link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.25rem;
  color: #edce86;
  font-size: 0.82rem;
  font-weight: 800;
}

.game-card:hover .game-link i {
  transform: translateX(5px);
}

.download-section {
  background:
    radial-gradient(circle at 14% 50%, rgb(18 59 143 / 32%), transparent 34rem),
    #071a45;
}

.download-image-ring {
  position: absolute;
  inset: -1.5rem;
  border: 1px solid rgb(218 172 80 / 10%);
  border-radius: 2.8rem;
  transform: rotate(-3deg);
}

.download-step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 1rem;
  background: rgb(255 255 255 / 3%);
  padding: 1rem;
  transition: 180ms ease;
}

.download-step:hover {
  border-color: rgb(218 172 80 / 28%);
  transform: translateX(4px);
}

.download-step > span {
  display: inline-flex;
  height: 2.25rem;
  width: 2.25rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 0.7rem;
  background: #daac50;
  color: #081f55;
  font-size: 0.8rem;
  font-weight: 900;
}

.download-step strong {
  display: block;
  color: #fff;
  font-size: 0.9rem;
}

.download-step p {
  margin-top: 0.3rem;
  color: #94a3b8;
  font-size: 0.78rem;
  line-height: 1.6;
}

.store-button {
  display: inline-flex;
  min-width: 9.5rem;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 0.9rem;
  background: #041332;
  padding: 0.7rem 1rem;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 800;
  transition: 180ms ease;
}

.store-button > i {
  color: #edce86;
  font-size: 1.6rem;
}

.store-button small {
  display: block;
  color: #64748b;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
}

.store-button:hover {
  border-color: rgb(218 172 80 / 40%);
  transform: translateY(-3px);
}

.trust-card {
  display: flex;
  min-height: 10rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 1.25rem;
  background: linear-gradient(145deg, rgb(18 59 143 / 20%), rgb(255 255 255 / 2%));
  padding: 1rem;
  text-align: center;
}

.trust-card i {
  color: #edce86;
  font-size: 1.5rem;
}

.trust-card strong,
.trust-card span {
  display: block;
}

.trust-card strong {
  margin-top: 1rem;
  color: #fff;
  font-size: 0.9rem;
}

.trust-card span {
  margin-top: 0.25rem;
  color: #64748b;
  font-size: 0.68rem;
}

.long-content-card {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 1.35rem;
  background: linear-gradient(145deg, rgb(18 59 143 / 18%), rgb(255 255 255 / 2%));
  padding: 1.5rem;
}

.long-content-icon {
  display: inline-flex;
  height: 3.25rem;
  width: 3.25rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(218 172 80 / 25%);
  border-radius: 0.9rem;
  background: rgb(218 172 80 / 9%);
  color: #edce86;
  font-size: 1.1rem;
}

.long-content-card h3 {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
}

.long-content-card p {
  margin-top: 0.75rem;
  color: #94a3b8;
  font-size: 0.84rem;
  line-height: 1.85;
}

.faq-item {
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 1rem;
  background: rgb(255 255 255 / 3%);
  transition: 180ms ease;
}

.faq-item[open] {
  border-color: rgb(218 172 80 / 28%);
  background: rgb(218 172 80 / 5%);
}

.faq-item summary {
  display: flex;
  cursor: pointer;
  list-style: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.3rem;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary i {
  color: #edce86;
  font-size: 0.7rem;
  transition: 180ms ease;
}

.faq-item[open] summary i {
  transform: rotate(45deg);
}

.faq-item p {
  padding: 0 1.3rem 1.3rem;
  color: #94a3b8;
  font-size: 0.83rem;
  line-height: 1.8;
}

.cta-suit {
  position: absolute;
  color: rgb(255 255 255 / 3%);
  font-size: 13rem;
}

.cta-suit-left {
  left: -2rem;
  bottom: -4rem;
  transform: rotate(-18deg);
}

.cta-suit-right {
  right: -2rem;
  top: -4rem;
  transform: rotate(18deg);
}

@media (min-width: 768px) {
  .section-heading {
    flex-direction: row;
    align-items: end;
    justify-content: space-between;
  }
}

@media (max-width: 639px) {
  .hero-banner {
    border-radius: 1rem;
  }

  .quick-action strong {
    font-size: 0.75rem;
  }

  .game-card {
    min-height: 20rem;
    padding: 1.5rem;
  }

  .game-card-icon {
    top: 1.5rem;
    right: 1.5rem;
    font-size: 6.5rem;
  }

  .download-image-ring {
    inset: -0.6rem;
    border-radius: 2.2rem;
  }

  .feature-card {
    display: grid;
    min-height: 0;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    column-gap: 0.85rem;
    padding: 1rem;
  }

  .feature-number {
    top: 0.8rem;
    right: 0.9rem;
    font-size: 2rem;
  }

  .feature-icon {
    grid-row: 1 / 3;
    height: 2.75rem;
    width: 2.75rem;
    border-radius: 0.75rem;
    font-size: 0.95rem;
  }

  .feature-card h3 {
    align-self: end;
    margin-top: 0;
    padding-right: 1.5rem;
    font-size: 0.9rem;
  }

  .feature-card p {
    margin-top: 0.3rem;
    font-size: 0.75rem;
    line-height: 1.55;
  }

  .long-content-card {
    display: block;
    padding: 1.15rem;
  }

  .long-content-icon {
    height: 2.75rem;
    width: 2.75rem;
    margin-bottom: 1rem;
  }
}

/* Internal pages */
.subpage-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgb(255 255 255 / 9%);
  background:
    radial-gradient(circle at 75% 25%, rgb(218 172 80 / 12%), transparent 25rem),
    radial-gradient(circle at 20% 10%, rgb(18 59 143 / 58%), transparent 32rem),
    #071a45;
}

.subpage-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #daac50, transparent);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
}

.breadcrumb a {
  color: #94a3b8;
  transition: 160ms ease;
}

.breadcrumb a:hover {
  color: #edce86;
}

.breadcrumb i {
  color: #daac50;
  font-size: 0.55rem;
}

.hero-symbol {
  position: relative;
  display: flex;
  min-height: 22rem;
  align-items: center;
  justify-content: center;
}

.hero-symbol::before,
.hero-symbol::after {
  content: "";
  position: absolute;
  border: 1px solid rgb(218 172 80 / 15%);
  border-radius: 50%;
}

.hero-symbol::before {
  height: 19rem;
  width: 19rem;
}

.hero-symbol::after {
  height: 14rem;
  width: 14rem;
  border-style: dashed;
  animation: slow-spin 22s linear infinite;
}

.hero-symbol > i {
  color: rgb(237 206 134 / 18%);
  font-size: 11rem;
  filter: drop-shadow(0 18px 32px rgb(0 0 0 / 30%));
}

.hero-chip {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0.3rem 0.3rem 0.4rem;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@keyframes slow-spin {
  to { transform: rotate(360deg); }
}

.content-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 1.35rem;
  background: linear-gradient(145deg, rgb(18 59 143 / 21%), rgb(255 255 255 / 2%));
  padding: 1.5rem;
  transition: 200ms ease;
}

.content-card:hover {
  border-color: rgb(218 172 80 / 30%);
  transform: translateY(-4px);
}

.content-card-icon {
  display: inline-flex;
  height: 3.25rem;
  width: 3.25rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(218 172 80 / 28%);
  border-radius: 0.9rem;
  background: rgb(218 172 80 / 9%);
  color: #edce86;
  font-size: 1.15rem;
}

.content-card h3 {
  margin-top: 1.35rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
}

.content-card p {
  margin-top: 0.65rem;
  color: #94a3b8;
  font-size: 0.82rem;
  line-height: 1.75;
}

.process-line {
  position: relative;
  display: flex;
  gap: 1rem;
  padding-left: 0.25rem;
}

.process-line:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 2.7rem;
  bottom: -1rem;
  left: 1.5rem;
  width: 1px;
  background: linear-gradient(#daac50, rgb(218 172 80 / 8%));
}

.process-line > span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  height: 2.5rem;
  width: 2.5rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background: #daac50;
  color: #081f55;
  font-size: 0.78rem;
  font-weight: 900;
  box-shadow: 0 7px 20px rgb(218 172 80 / 18%);
}

.process-line strong {
  display: block;
  color: #fff;
  font-size: 0.9rem;
}

.process-line p {
  margin-top: 0.35rem;
  color: #94a3b8;
  font-size: 0.8rem;
  line-height: 1.7;
}

.promo-strip {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(218 172 80 / 28%);
  border-radius: 1.75rem;
  background:
    radial-gradient(circle at 85% 50%, rgb(218 172 80 / 17%), transparent 20rem),
    linear-gradient(135deg, #123b8f, #071a45 68%);
}

.promo-strip::after {
  content: "";
  position: absolute;
  top: -3rem;
  right: 3rem;
  height: 12rem;
  width: 12rem;
  border: 1px dashed rgb(218 172 80 / 20%);
  border-radius: 50%;
}

.blog-card {
  display: flex;
  min-height: 23rem;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 1.4rem;
  background: #071a45;
  transition: 220ms ease;
}

.blog-card:hover {
  border-color: rgb(218 172 80 / 34%);
  transform: translateY(-6px);
  box-shadow: 0 22px 45px rgb(0 0 0 / 20%);
}

.blog-card-art {
  position: relative;
  display: flex;
  height: 10.5rem;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle, rgb(218 172 80 / 15%), transparent 58%),
    linear-gradient(145deg, #123b8f, #06183f);
}

.blog-card-art::before {
  content: "";
  position: absolute;
  height: 8rem;
  width: 8rem;
  border: 1px dashed rgb(218 172 80 / 22%);
  border-radius: 50%;
}

.blog-card-art:has(img)::before {
  display: none;
}

.blog-card-art img {
  position: relative;
  z-index: 1;
  max-height: 8rem;
  max-width: 82%;
  border-radius: 0.75rem;
  object-fit: contain;
}

.review-logo-stage::before,
.review-logo-stage::after {
  display: none;
}

.review-brand-logo {
  position: relative;
  z-index: 1;
  max-height: 18rem;
  max-width: 88%;
  border-radius: 1.25rem;
  object-fit: contain;
  filter: drop-shadow(0 20px 28px rgb(0 0 0 / 28%));
}

.category-hero-stage::before,
.category-hero-stage::after {
  display: none;
}

.category-hero-image {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 23rem;
  border: 1px solid rgb(218 172 80 / 22%);
  border-radius: 1.5rem;
  object-fit: cover;
  box-shadow: 0 22px 48px rgb(0 0 0 / 30%);
}

@media (max-width: 639px) {
  .category-hero-stage {
    min-height: 14rem;
  }

  .category-hero-image {
    max-height: 16rem;
    border-radius: 1rem;
  }
}

.blog-card-art > i {
  position: relative;
  z-index: 1;
  color: #edce86;
  font-size: 4rem;
  filter: drop-shadow(0 12px 20px rgb(0 0 0 / 32%));
}

.blog-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.35rem;
}

.blog-card-meta {
  color: #64748b;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.blog-card h2,
.blog-card h3 {
  margin-top: 0.75rem;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.45;
}

.blog-card p {
  margin-top: 0.75rem;
  color: #94a3b8;
  font-size: 0.78rem;
  line-height: 1.7;
}

.blog-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1.25rem;
  color: #edce86;
  font-size: 0.75rem;
  font-weight: 800;
}

.article-layout {
  display: grid;
  gap: 2rem;
}

.article-sidebar {
  align-self: start;
}

.toc-card,
.review-facts {
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 1.2rem;
  background: rgb(255 255 255 / 3%);
  padding: 1.25rem;
}

.toc-card h2,
.review-facts h2 {
  color: #fff;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.toc-card ul {
  margin-top: 1rem;
}

.toc-card a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border-top: 1px solid rgb(255 255 255 / 6%);
  padding: 0.7rem 0;
  color: #94a3b8;
  font-size: 0.75rem;
  transition: 160ms ease;
}

.toc-card a:hover {
  color: #edce86;
  padding-left: 0.25rem;
}

.toc-card a i {
  color: #daac50;
  font-size: 0.55rem;
}

.review-facts {
  margin-top: 1rem;
}

.fact-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid rgb(255 255 255 / 6%);
  padding: 0.65rem 0;
  color: #64748b;
  font-size: 0.72rem;
}

.fact-row:first-of-type {
  margin-top: 0.9rem;
}

.fact-row strong {
  color: #cbd5e1;
  font-weight: 700;
  text-align: right;
}

.article-body {
  min-width: 0;
}

.article-section {
  scroll-margin-top: 8.5rem;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  padding-bottom: 2rem;
}

.article-section + .article-section {
  padding-top: 2rem;
}

.article-section h2 {
  color: #fff;
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1.35;
}

.article-section h3 {
  margin-top: 1.5rem;
  color: #edce86;
  font-size: 1rem;
  font-weight: 800;
}

.article-section p {
  margin-top: 1rem;
  color: #a8b4c7;
  font-size: 0.92rem;
  line-height: 1.9;
}

.article-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.article-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: #a8b4c7;
  font-size: 0.85rem;
  line-height: 1.7;
}

.article-list i {
  margin-top: 0.3rem;
  color: #daac50;
  font-size: 0.7rem;
}

.article-link {
  color: #edce86;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: rgb(218 172 80 / 35%);
  text-underline-offset: 0.22rem;
}

.article-link:hover {
  text-decoration-color: #daac50;
}

.slot-overview-table {
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 1rem;
}

.slot-table-row {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1.5fr;
  gap: 1rem;
  border-top: 1px solid rgb(255 255 255 / 7%);
  padding: 0.9rem 1rem;
  color: #94a3b8;
  font-size: 0.78rem;
  line-height: 1.5;
}

.slot-table-row:first-child {
  border-top: 0;
}

.slot-table-row strong {
  color: #fff;
}

.slot-table-head {
  background: rgb(218 172 80 / 8%);
  color: #edce86;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.slot-note {
  border-left: 3px solid #daac50;
  padding-left: 1rem;
}

.provider-heading {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.provider-heading img {
  max-height: 4.5rem;
  width: 6.5rem;
  object-fit: contain;
}

.provider-heading > div > span {
  color: #64748b;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.provider-heading h2 {
  margin-top: 0.25rem;
}

.provider-wordmark {
  flex: none;
  color: #edce86;
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: -0.08em;
}

.provider-wordmark span {
  color: #fff;
}

.game-directory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.75rem;
  border-top: 1px solid rgb(255 255 255 / 9%);
}

.game-entry {
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  padding: 1.35rem 0;
}

.game-entry h3 {
  margin-top: 0;
  color: #fff;
}

.game-entry p {
  margin-top: 0.45rem;
  font-size: 0.8rem;
  line-height: 1.75;
}

@media (max-width: 767px) {
  .slot-overview-table {
    overflow-x: auto;
  }

  .slot-table-row {
    min-width: 38rem;
  }

  .game-directory {
    grid-template-columns: 1fr;
  }

  .provider-heading {
    align-items: flex-start;
  }

  .provider-heading img {
    max-height: 3.5rem;
    width: 5rem;
  }
}

.verdict-box {
  border: 1px solid rgb(218 172 80 / 25%);
  border-radius: 1.25rem;
  background: linear-gradient(135deg, rgb(218 172 80 / 10%), rgb(18 59 143 / 13%));
  padding: 1.4rem;
}

.verdict-box strong {
  color: #edce86;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.verdict-box p {
  margin-top: 0.6rem;
  color: #d7dfeb;
  font-size: 0.9rem;
  line-height: 1.8;
}

.pros-cons {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.pros-box,
.cons-box {
  border-radius: 1rem;
  padding: 1.2rem;
}

.pros-box {
  border: 1px solid rgb(5 164 78 / 25%);
  background: rgb(5 164 78 / 6%);
}

.cons-box {
  border: 1px solid rgb(226 20 45 / 21%);
  background: rgb(226 20 45 / 5%);
}

.pros-box h3,
.cons-box h3 {
  margin: 0;
  color: #fff;
}

.pros-box i { color: #34d399; }
.cons-box i { color: #fb7185; }

@media (min-width: 768px) {
  .pros-cons { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .article-layout { grid-template-columns: 16rem minmax(0, 1fr); gap: 3rem; }
  .article-sidebar { position: sticky; top: 9rem; }
}

/* Plain icon treatment: keep icons visible without decorative boxes. */
.sidebar-nav-icon,
.content-card-icon,
.feature-icon,
.long-content-icon,
.support-icon,
.quick-action-icon,
.action-icon {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #edce86;
}

.sidebar-nav-link:hover .sidebar-nav-icon,
.sidebar-nav-link-active .sidebar-nav-icon,
.mobile-nav-link-active .sidebar-nav-icon {
  background: transparent;
  color: #edce86;
}

.content-card-icon,
.feature-icon {
  height: auto;
  min-height: 2rem;
}

.long-content-icon {
  height: auto;
  width: 2rem;
  justify-content: flex-start;
  padding-top: 0.15rem;
  font-size: 1.35rem;
}

.support-icon {
  height: auto;
  width: 1.75rem;
  font-size: 1.25rem;
}

.support-card:hover .support-icon {
  transform: none;
}

.hero-symbol::before,
.hero-symbol::after {
  display: none;
}

/* Popular live table cards use the game itself as the visual cue. */
.table-game-card {
  overflow: hidden;
  padding: 0;
}

.table-game-card > img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-bottom: 1px solid rgb(218 172 80 / 22%);
  transition: transform 350ms ease, filter 350ms ease;
}

.table-game-card:hover > img {
  transform: scale(1.035);
  filter: saturate(1.08);
}

.table-game-copy {
  padding: 1.2rem 1.25rem 1.35rem;
}

.table-game-copy h3,
.table-game-copy p {
  margin-top: 0;
}

.table-game-copy p {
  margin-top: 0.65rem;
}

@media (max-width: 639px) {
  .table-game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .table-game-copy {
    padding: 0.85rem 0.85rem 1rem;
  }

  .table-game-copy h3 {
    font-size: 0.95rem;
  }

  .table-game-copy p {
    font-size: 0.75rem;
    line-height: 1.55;
  }
}