.live-casino-page[hidden] { display: none !important; }

body.live-casino-open .main > :not(.live-casino-page):not(#siteFooter) { display: none !important; }
body.live-casino-open .top-info-banners { display: none !important; }

.live-casino-page {
  --live-accent: #a6e652;
  --live-ink: #f7f8fa;
  --live-muted: #a3afbe;
  max-width: 1480px;
  margin: 0 auto;
  padding: 4px 0 36px;
  color: var(--live-ink);
}

.live-page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  margin-bottom: 12px;
}

.live-back-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px 6px 5px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #c6d0db;
  font-size: 12px;
  font-weight: 750;
}

.live-back-button:hover { background: #ffffff0b; color: #fff; }
.live-back-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.live-page-mark {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #9eabb9;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.5px;
}

.live-page-mark i,
.live-hero-eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9de24d;
  box-shadow: 0 0 12px #9de24d99;
}

.live-casino-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 244px;
  align-items: center;
  overflow: hidden;
  padding: 28px clamp(22px, 4vw, 54px);
  border: 1px solid #7ead4a;
  border-radius: 22px;
  background: radial-gradient(ellipse at 82% 45%, #1c53602b 0 22%, transparent 50%), linear-gradient(115deg, #111c32 0%, #14223c 47%, #1a3450 100%);
  box-shadow: inset 0 0 0 4px #a3e74c0b, 0 16px 40px #07101b80;
}

.live-casino-hero::before {
  position: absolute;
  z-index: -1;
  inset: 8px;
  border: 1px solid #a9e55a35;
  border-radius: 16px;
  content: "";
  pointer-events: none;
}

.live-casino-hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, #111b30 1%, #111b30ed 39%, #111b303b 74%, #111b3066), repeating-linear-gradient(135deg, transparent 0 18px, #ffffff03 19px 20px);
  content: "";
  pointer-events: none;
}

.live-hero-copy { position: relative; z-index: 2; max-width: 590px; }

.live-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 13px;
  color: #c3e7a1;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.7px;
}

.live-hero-eyebrow i { width: 6px; height: 6px; }

.live-casino-hero h1 {
  max-width: 480px;
  margin: 0;
  color: #fff;
  font-size: clamp(27px, 4vw, 42px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -1.5px;
  text-shadow: 0 5px 22px #050a14;
}

.live-casino-hero p {
  max-width: 390px;
  margin: 10px 0 17px;
  color: #c0cbd8;
  font-size: 13px;
  line-height: 1.5;
}

.live-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid #b2eb6c;
  border-radius: 8px;
  background: linear-gradient(180deg, #a5e851, #80c438);
  box-shadow: 0 5px 17px #92d04740, inset 0 1px #ffffff62;
  color: #172515;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}

.live-hero-cta:hover { filter: brightness(1.08); }
.live-hero-cta span { font-size: 17px; line-height: 1; }

.live-hero-art {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 5%;
  width: min(40%, 390px);
  aspect-ratio: 1.3;
  transform: translateY(-50%);
}

.live-hero-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 74%;
  aspect-ratio: 1;
  border: 1px solid #a9e55a55;
  border-radius: 50%;
  box-shadow: 0 0 0 13px #a9e55a0b, 0 0 0 29px #a9e55a09, inset 0 0 27px #a9e55a13;
  transform: translate(-50%, -50%);
}

.live-hero-ring-two {
  width: 48%;
  border-color: #d1b76e77;
  box-shadow: 0 0 0 7px #d1b76e13, inset 0 0 22px #d1b76e26;
}

.live-hero-chip {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 35%;
  aspect-ratio: 1;
  place-items: center;
  border: 8px dotted #f2d38c;
  border-radius: 50%;
  background: radial-gradient(circle, #27364c 0 53%, #b48948 55% 64%, #25394c 66%);
  color: #eee0bd;
  font-size: clamp(25px, 4.5vw, 48px);
  text-shadow: 0 2px 8px #0009;
  box-shadow: 0 13px 30px #050a1466, 0 0 32px #a6e65229;
  transform: translate(-50%, -50%) rotate(-17deg);
}

.live-hero-orb {
  position: absolute;
  top: 12%;
  right: 12%;
  width: 18px;
  height: 18px;
  border: 1px solid #f0d68c;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3ce, #d4a654 55%, #704b30);
  box-shadow: 0 0 16px #e4be7166;
}

.live-hero-count {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 17px;
  display: grid;
  gap: 2px;
  min-width: 58px;
  padding: 8px 11px;
  border: 1px solid #a1e24b44;
  border-radius: 8px;
  background: #090f1bd9;
  text-align: center;
}

.live-hero-count strong { color: #a7e653; font-size: 12px; letter-spacing: 1px; }
.live-hero-count span { color: #c0cad7; font-size: 7px; font-weight: 850; letter-spacing: 1.2px; }

.live-category-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  margin: 20px 0 14px;
  padding: 1px 1px 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.live-category-rail::-webkit-scrollbar { display: none; }

.live-category-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 43px;
  padding: 0 17px;
  border: 1px solid #3c4858;
  border-radius: 999px;
  background: linear-gradient(180deg, #2e3847, #283240);
  color: #d1d7df;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
  transition: border-color .18s, background .18s, color .18s;
}

.live-category-chip span { color: #b9c3ce; font-size: 17px; line-height: 1; }
.live-category-chip:hover { border-color: #758c62; color: #fff; }

.live-category-chip.is-active {
  border-color: #94d648;
  background: linear-gradient(180deg, #364536, #29392e);
  color: #e6f6d7;
  box-shadow: inset 0 0 0 1px #9bdd5120, 0 4px 14px #0b130b55;
}

.live-category-chip.is-active span { color: #a8e45f; }

.live-game-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .9fr);
  gap: 12px;
  margin-bottom: 21px;
}

.live-search-box,
.live-provider-trigger {
  display: flex;
  min-width: 0;
  min-height: 52px;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border: 1px solid #354151;
  border-radius: 15px;
  background: linear-gradient(180deg, #2c3645, #27313f);
  color: #c8d1dc;
  box-shadow: inset 0 1px #ffffff06;
}

.live-search-box:focus-within { border-color: #7fa94e; box-shadow: 0 0 0 3px #91d84a16; }
.live-search-box svg,.live-provider-trigger svg { width: 21px; height: 21px; flex: 0 0 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.live-search-box input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f6f8fa;
  font: inherit;
  font-size: 13px;
}

.live-search-box input::placeholder { color: #9da9b8; opacity: 1; }
.live-search-box input::-webkit-search-cancel-button { cursor: pointer; }

.live-search-box kbd {
  flex: 0 0 auto;
  padding: 3px 5px;
  border: 1px solid #526071;
  border-radius: 5px;
  color: #9eabba;
  font: 9px ui-monospace, monospace;
}

.live-provider-wrap { position: relative; min-width: 0; }

.live-provider-trigger {
  width: 100%;
  justify-content: flex-start;
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
  text-align: left;
}

.live-provider-trigger:hover,
.live-provider-trigger[aria-expanded="true"] { border-color: #758a63; color: #fff; }

.live-provider-trigger > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-provider-chevron { margin-left: auto; color: #aab5c2; font-size: 19px; line-height: 1; }

.live-provider-menu {
  position: absolute;
  z-index: 10;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  overflow: hidden;
  padding: 6px;
  border: 1px solid #4a586a;
  border-radius: 14px;
  background: #202a38f5;
  box-shadow: 0 16px 36px #050910c9;
  backdrop-filter: blur(14px);
}

.live-provider-menu[hidden] { display: none; }

.live-provider-menu button {
  display: flex;
  width: 100%;
  min-height: 39px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 11px;
  border-radius: 9px;
  background: transparent;
  color: #d2dbe4;
  font-size: 12px;
  text-align: left;
}

.live-provider-menu button:hover { background: #ffffff0b; color: #fff; }
.live-provider-menu button i { visibility: hidden; color: #a8e75b; font-style: normal; font-weight: 900; }
.live-provider-menu button.is-selected { background: #91d84a16; color: #d9f1c2; }
.live-provider-menu button.is-selected i { visibility: visible; }

.live-results-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  scroll-margin-top: 96px;
}

.live-results-kicker {
  display: block;
  margin-bottom: 4px;
  color: #9cb589;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.8px;
}

.live-results-head h2 { margin: 0; color: #f3f6f8; font-size: 17px; font-weight: 850; letter-spacing: -.35px; }

.live-game-count {
  padding: 5px 9px;
  border: 1px solid #3f4c5c;
  border-radius: 999px;
  color: #aeb9c7;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.live-game-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.live-game-card {
  display: block;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid #364354;
  border-radius: 15px;
  background: linear-gradient(180deg, #252f3d, #202a37);
  color: inherit;
  text-align: left;
  box-shadow: 0 8px 20px #080d1666;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.live-game-card:hover { transform: translateY(-3px); border-color: #829d69; box-shadow: 0 13px 27px #080d1680; }
.live-game-card[hidden] { display: none; }

.live-game-art {
  position: relative;
  isolation: isolate;
  display: block;
  height: clamp(115px, 12vw, 154px);
  overflow: hidden;
  background-color: #263645;
}

.live-game-art::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(90deg, #0b111d8c, transparent 74%), linear-gradient(0deg, #0b111dd9, transparent 74%);
  content: "";
}

.live-game-art::after {
  position: absolute;
  z-index: 0;
  right: -30px;
  bottom: -85px;
  width: 190px;
  height: 140px;
  border: 1px solid #ffffff42;
  border-radius: 50%;
  box-shadow: 0 0 0 10px #ffffff08, 0 0 0 20px #ffffff06;
  content: "";
}

.live-art-blackjack { background: radial-gradient(ellipse at 75% 50%, #c98342 0 15%, transparent 16%), linear-gradient(125deg, #180e16, #75311d 45%, #120e17); }
.live-art-turkish-roulette { background: radial-gradient(circle at 76% 46%, #fff2c6 0 7%, #daa752 8% 12%, #2e2835 13% 27%, transparent 28%), linear-gradient(130deg, #152520, #587335 50%, #211d2d); }
.live-art-lightning { background: radial-gradient(circle at 76% 48%, #fff0a7 0 9%, #f8c44b 10% 15%, #6547aa 16% 31%, transparent 32%), linear-gradient(130deg, #1b2349, #4d3990 53%, #18334d); }
.live-art-vip { background: radial-gradient(ellipse at 75% 53%, #f4d2a0 0 13%, #513c49 14% 20%, transparent 21%), linear-gradient(130deg, #311c27, #71424f 52%, #20374b); }
.live-art-poker { background: radial-gradient(circle at 75% 48%, #cfb276 0 10%, #24433c 11% 20%, transparent 21%), linear-gradient(130deg, #122925, #315147 52%, #28364a); }
.live-art-show { background: radial-gradient(circle at 75% 48%, #ffe57b 0 8%, #ed7e48 9% 15%, #893e6a 16% 28%, transparent 29%), linear-gradient(130deg, #281b45, #873f7c 52%, #283d62); }
.live-art-gala { background: radial-gradient(circle at 75% 48%, #faf1c2 0 9%, #d3ab61 10% 15%, #254a48 16% 29%, transparent 30%), linear-gradient(130deg, #123339, #287361 52%, #35314f); }
.live-art-wheel { background: radial-gradient(circle at 75% 47%, #c6f9ed 0 6%, #5fd6bb 7% 11%, #346183 12% 27%, transparent 28%), linear-gradient(130deg, #162b42, #26718b 50%, #443b7b); }

.live-game-label-top,
.live-game-special {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  color: #f0d28d;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 1px;
  line-height: 1.05;
  text-shadow: 0 2px 5px #000b;
}

.live-game-special {
  top: 9px;
  right: 9px;
  left: auto;
  padding: 5px 7px;
  border: 1px solid #d6f29b66;
  border-radius: 999px;
  background: #78b844e8;
  color: #f5ffe9;
  font-size: 7px;
  letter-spacing: .7px;
}

.live-game-dealer {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 22%;
  color: #f7dfab;
  font-size: clamp(43px, 5vw, 65px);
  line-height: 1;
  text-shadow: 0 4px 18px #000a, 0 0 22px #fff4;
  transform: translateY(-50%) rotate(-9deg);
}

.live-art-lightning .live-game-dealer,
.live-art-show .live-game-dealer,
.live-art-wheel .live-game-dealer { color: #fff0a0; }

.live-game-art-title {
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 11px;
  color: #fff4df;
  font-size: 18px;
  font-weight: 950;
  line-height: .95;
  letter-spacing: -.65px;
  text-align: right;
  text-shadow: 0 3px 9px #080b12;
}

.live-game-art-title small { color: #b9e976; font-size: 10px; letter-spacing: 1.3px; }
.live-game-art-glow { position: absolute; z-index: 1; inset: auto 0 0; height: 3px; background: linear-gradient(90deg, transparent, #a5e652, transparent); opacity: .75; }

.live-game-copy { display: grid; gap: 5px; padding: 11px 12px 12px; }
.live-game-provider { overflow: hidden; color: #9daaba; font-size: 9px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.live-game-provider i { padding: 0 3px; color: #758797; font-style: normal; }
.live-game-copy strong { overflow: hidden; color: #f1f4f6; font-size: 12px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.live-game-open { display: flex; align-items: center; justify-content: space-between; margin-top: 3px; color: #b2dc85; font-size: 9px; font-weight: 800; }
.live-game-open b { color: #c5ed95; font-size: 15px; line-height: 1; }

.live-empty-state {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 40px 16px;
  border: 1px dashed #435164;
  border-radius: 16px;
  color: #d4dce5;
  text-align: center;
}

.live-empty-state[hidden] { display: none; }
.live-empty-state > span { color: #9cdb53; font-size: 27px; }
.live-empty-state strong { font-size: 14px; }
.live-empty-state p { margin: 0; color: #9ba8b7; font-size: 11px; }
.live-empty-state button { margin-top: 5px; padding: 8px 12px; border: 1px solid #65864d; border-radius: 8px; background: #283a2a; color: #dcf4c5; font-size: 11px; font-weight: 800; }

@media (max-width: 760px) {
  .live-casino-page { padding: 0 0 26px; }
  .live-page-toolbar { min-height: 34px; margin-bottom: 10px; }
  .live-back-button { margin-left: -4px; font-size: 11px; }
  .live-page-mark { font-size: 8px; }
  .live-casino-hero { min-height: 187px; padding: 19px 17px; border-radius: 17px; }
  .live-casino-hero::before { inset: 6px; border-radius: 12px; }
  .live-casino-hero::after { background: linear-gradient(90deg, #111b30 0%, #111b30e8 48%, #111b3049 100%); }
  .live-hero-copy { max-width: 74%; }
  .live-hero-eyebrow { gap: 6px; margin-bottom: 10px; font-size: 8px; letter-spacing: 1.1px; }
  .live-casino-hero h1 { max-width: 250px; font-size: clamp(23px, 7vw, 30px); letter-spacing: -.9px; }
  .live-casino-hero p { max-width: 230px; margin: 8px 0 12px; font-size: 10px; line-height: 1.4; }
  .live-hero-cta { min-height: 32px; gap: 8px; padding: 0 11px; border-radius: 7px; font-size: 9px; }
  .live-hero-count { top: 12px; right: 12px; min-width: 48px; padding: 6px 8px; }
  .live-hero-count strong { font-size: 10px; }
  .live-hero-count span { font-size: 6px; }
  .live-hero-art { top: 54%; right: -5%; width: 48%; opacity: .84; }
  .live-hero-chip { width: 38%; border-width: 5px; }
  .live-hero-ring { width: 82%; }
  .live-hero-ring-two { width: 55%; }
  .live-hero-orb { width: 11px; height: 11px; }
  .live-category-rail { gap: 8px; margin: 14px -12px 12px; padding: 1px 12px 4px; }
  .live-category-chip { min-height: 40px; gap: 6px; padding: 0 13px; font-size: 10px; }
  .live-category-chip span { font-size: 15px; }
  .live-game-tools { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 8px; margin-bottom: 18px; }
  .live-search-box,.live-provider-trigger { min-height: 46px; gap: 8px; padding: 0 11px; border-radius: 13px; }
  .live-search-box svg,.live-provider-trigger svg { width: 19px; height: 19px; flex-basis: 19px; }
  .live-search-box input,.live-provider-trigger { font-size: 11px; }
  .live-search-box kbd { display: none; }
  .live-provider-menu { top: calc(100% + 6px); }
  .live-provider-menu button { min-height: 38px; font-size: 11px; }
  .live-results-head { margin-bottom: 10px; scroll-margin-top: 82px; }
  .live-results-head h2 { font-size: 15px; }
  .live-game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .live-game-card { border-radius: 12px; }
  .live-game-art { height: clamp(104px, 31vw, 142px); }
  .live-game-copy { gap: 4px; padding: 9px 9px 10px; }
  .live-game-provider { font-size: 8px; }
  .live-game-copy strong { font-size: 10px; }
  .live-game-open { font-size: 8px; }
  .live-game-art-title { right: 8px; bottom: 9px; font-size: 15px; }
  .live-game-label-top { top: 8px; left: 8px; font-size: 7px; }
  .live-game-special { top: 7px; right: 7px; padding: 4px 6px; font-size: 6px; }
  .live-game-dealer { right: 19%; font-size: 47px; }
}

@media (max-width: 380px) {
  .live-casino-hero { min-height: 174px; padding-inline: 14px; }
  .live-hero-copy { max-width: 78%; }
  .live-casino-hero h1 { font-size: 23px; }
  .live-casino-hero p { max-width: 190px; font-size: 9px; }
  .live-category-chip { padding-inline: 11px; }
  .live-game-tools { grid-template-columns: minmax(0, 1fr) minmax(0, .88fr); gap: 6px; }
  .live-search-box,.live-provider-trigger { gap: 6px; padding-inline: 8px; }
  .live-search-box input,.live-provider-trigger { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .live-category-chip,.live-game-card,.live-hero-cta { transition: none; }
}

/* Replaceable photo carousel for the live-casino feature banner. */
.live-casino-hero {
  display: block;
  height: clamp(225px, 25vw, 320px);
  min-height: 0;
  padding: 0;
  background: #101a2a;
}

.live-casino-hero::after { display: none; }

.live-banner-slides,
.live-banner-slide {
  position: absolute;
  inset: 0;
}

.live-banner-slides { overflow: hidden; border-radius: inherit; }

.live-banner-slide {
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease, visibility .55s ease;
}

.live-banner-slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
}

.live-banner-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.live-banner-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #091321ed 0%, #101b2bd9 36%, #111b2c5c 68%, #111b2c14 100%), linear-gradient(0deg, #07111d73 0%, transparent 54%);
}

.live-banner-slide .live-hero-copy {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  max-width: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 28px clamp(22px, 4vw, 54px);
}

.live-banner-slide .live-casino-hero h1,
.live-banner-slide h1 { max-width: min(56%, 560px); }

.live-banner-slide .live-hero-eyebrow { margin-bottom: 13px; }
.live-banner-slide p { max-width: min(48%, 440px); }

.live-banner-counter {
  position: absolute;
  z-index: 4;
  top: 16px;
  right: 17px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 63px;
  justify-content: center;
  padding: 8px 10px;
  border: 1px solid #ffffff2e;
  border-radius: 9px;
  background: #08101cd9;
  color: #c7d1dc;
  font-size: 11px;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.live-banner-counter strong { color: #fff; }
.live-banner-counter > span:first-of-type { color: #8593a2; }

.live-banner-dots {
  position: absolute;
  z-index: 5;
  bottom: 17px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 6px;
  transform: translateX(-50%);
}

.live-banner-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: #ffffff8c;
  box-shadow: 0 1px 5px #0008;
  transition: width .2s ease, background .2s ease;
}

.live-banner-dots button.is-active { width: 23px; background: #a8e653; }

.live-banner-controls {
  position: absolute;
  z-index: 5;
  right: 16px;
  bottom: 12px;
  display: flex;
  gap: 6px;
}

.live-banner-controls button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid #ffffff48;
  border-radius: 50%;
  background: #0c1422c9;
  color: white;
  font-size: 22px;
  line-height: 1;
  backdrop-filter: blur(8px);
  transition: border-color .18s ease, background .18s ease;
}

.live-banner-controls button:hover { border-color: #a9e75c; background: #253329e8; }

@media (max-width: 760px) {
  .live-casino-hero { height: clamp(176px, 52vw, 220px); border-radius: 17px; }
  .live-banner-slides { border-radius: inherit; }
  .live-banner-slide .live-hero-copy { max-width: none; padding: 19px 16px 26px; }
  .live-banner-slide h1 { max-width: 70%; font-size: clamp(21px, 6.5vw, 29px); letter-spacing: -.8px; }
  .live-banner-slide .live-hero-eyebrow { margin-bottom: 8px; font-size: 8px; letter-spacing: 1px; }
  .live-banner-slide p { max-width: 68%; margin: 7px 0 10px; font-size: 10px; line-height: 1.35; }
  .live-banner-slide .live-hero-cta { min-height: 31px; padding-inline: 10px; font-size: 9px; }
  .live-banner-shade { background: linear-gradient(90deg, #091321ed 0%, #101b2bdc 40%, #111b2c78 76%, #111b2c32 100%), linear-gradient(0deg, #07111d82 0%, transparent 55%); }
  .live-banner-counter { top: 11px; right: 11px; min-width: 51px; padding: 6px 8px; font-size: 9px; }
  .live-banner-dots { bottom: 13px; left: 50%; }
  .live-banner-dots button { width: 6px; height: 6px; }
  .live-banner-dots button.is-active { width: 18px; }
  .live-banner-controls { right: 9px; bottom: 7px; gap: 4px; }
  .live-banner-controls button { width: 26px; height: 26px; font-size: 18px; }
}

@media (max-width: 380px) {
  .live-casino-hero { height: 174px; }
  .live-banner-slide .live-hero-copy { padding-inline: 13px; }
  .live-banner-slide h1 { max-width: 72%; font-size: 21px; }
  .live-banner-slide p { max-width: 70%; font-size: 9px; }
  .live-banner-controls { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .live-banner-slide,.live-banner-dots button,.live-banner-controls button { transition: none; }
}