:root {
  --bg: #071b36;
  --panel: #0e315a;
  --panel-2: #174673;
  --red: #ee6d59;
  --orange: #f7bf63;
  --teal: #75d9e7;
  --text: #f3f9ff;
  --muted: #b9d0e2;
  --line: rgba(187, 224, 248, .2);
  --wrap: 1220px;
}
html, body, button, a { letter-spacing: 0; }
body { background: var(--bg); color: var(--text); font-family: Tahoma, "Noto Sans Thai", Arial, sans-serif; }
.site-header { position: relative; background: #06182f; border-color: #24507c; }
.header-top { height: 4px; background: #77d9ec; }
.header-inner { min-height: 76px; gap: 18px; }
.brand { font-size: 43px; }
.brand .brand-12 { color: #f4fbff; }
.brand .brand-bet { color: #7bdcff; }
.brand small { color: #e9b864; }
.desktop-nav { gap: 16px; }
.desktop-nav a { color: #d6e9f6; font-size: 13px; }
.desktop-nav a:hover, .desktop-nav a[aria-current] { color: #91e5f3; }
.button { border-radius: 5px; }
.button-primary { background: #f2b85c; color: #092746; box-shadow: none; }
.button-primary:hover { background: #ffd37d; }
.button-outline { background: #12365d; border-color: #6bb7d2; color: #f5fbff; }
.menu-toggle { background: #12365d; color: #fff; }
.eyebrow { color: #83dfec; }

.hero-carousel { padding: 0; background: #0a2d57; border-color: #336388; }
.carousel-stage { height: 500px; background: #0a2d57; }
.carousel-slide { display: block; position: absolute; inset: 0; overflow: hidden; }
.carousel-slide::before { display: none; }
.carousel-slide[hidden] { display: none; }
.carousel-slide > img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.carousel-copy { position: absolute; top: 50%; left: max(calc((100% - 1220px) / 2), 30px); transform: translateY(-50%); width: min(520px, 42%); z-index: 1; }
.carousel-copy h2 { font-size: 49px; line-height: 1.2; margin: 0 0 13px; color: #f6fbff; }
.carousel-copy p:not(.eyebrow) { margin: 0 0 24px; font-size: 19px; color: #cfe8fa; }
.carousel-copy .button { min-height: 48px; padding-inline: 27px; }
.carousel-controls { left: auto; right: max(calc((100% - 1220px) / 2), 24px); bottom: 19px; transform: none; background: rgba(6, 25, 49, .88); border-color: #8abedc; z-index: 3; }
.carousel-arrow:hover { background: #1e699a; }
.carousel-dot::before { background: #47708c; }
.carousel-dot[aria-pressed="true"]::before { background: #82e2ee; }

.hero-brand { background: #c6edff; border: 0; color: #08294c; }
.hero-brand-inner { padding-block: 24px; }
.hero-brand .eyebrow { color: #176891; }
.hero-brand h1 { font-size: 86px; color: #08294c; }
.hero-brand h1 span { color: #e8644f; }
.hero-brand p:not(.eyebrow) { color: #173f62; }
.hero-brand small { color: #466d8b; }
.hero-brand .button-outline { background: #eaf8ff; border-color: #2a6a95; color: #0b365c; }
.lobby-strip { background: #0b3158; border-color: #3d6e91; }
.lobby-strip strong { color: #f7c56e; }
.lobby-strip p { color: #d2e8f5; }
.quick-nav { padding: 18px 0 9px; }
.quick-nav .wrap { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.quick-nav a { min-height: 62px; background: #123b66; border-color: #41749c; }
.quick-nav a:hover { background: #1e527e; border-color: #99e8f1; }
.quick-nav a:nth-child(2n) { border-bottom: 3px solid #ef8069; }
.quick-nav a:nth-child(2n+1) { border-bottom: 3px solid #83ddeb; }

.section { padding: 54px 0; }
.section-heading h2, .feature-copy h2, .final-cta h2 { color: #f7fbff; }
.inline-link, .entry-content a, .breadcrumbs a { color: #f7c36c; }
.filter-tabs button { background: #12365c; color: #d9edfa; border-color: #49779a; }
.filter-tabs button[aria-selected=true] { background: #9ee5f4; border-color: #9ee5f4; color: #0a3358; }
.game-tile { background: #103457; border-color: #396c96; }
.game-tile:hover { border-color: #f9bf70; }
.game-tile span { color: #eff9ff; }
.feature-band { background: #0d2d50; border-color: #326287; }
.feature-copy p { color: #c9deec; }
.editorial-band { background: #0a2443; }
.rewards-band { background: #103b62; border-block: 1px solid #4d819d; padding: 42px 0; }
.rewards-inner { display: grid; grid-template-columns: 1.35fr 1fr; align-items: center; gap: 46px; }
.rewards-inner h2 { margin: 5px 0 10px; font-size: 30px; line-height: 1.3; color: #fff; }
.rewards-inner p:not(.eyebrow) { margin: 0; color: #d7eaf5; max-width: 650px; }
.rewards-inner nav { border-top: 1px solid #6f9cb4; }
.rewards-inner nav a { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid #6f9cb4; color: #f8c873; font-weight: 700; text-decoration: none; }
.rewards-inner nav a:hover { color: #fff; }
.editorial-item { border-color: #74d5e9; }
.body-band { background: #08213d; }
.entry-content { color: #e0edf8; }
.entry-content h2, .entry-content h3 { color: #f7fbff; }
.entry-content mark, .keyword { background: #b9e9fb; color: #08365d; border-radius: 3px; padding: 1px 5px; font-size: 1.08em; font-weight: 800; }
.entry-content th { color: #f8c873; }
.entry-content blockquote { border-color: #70d7e8; }
.entry-content .callout { background: #17446e; border-color: #eb886d; }
.entry-content figure img { border-radius: 5px; border: 1px solid #396991; }
.page-hero { background: #123b68; border-color: #4780a6; }
.page-hero-inner { min-height: 305px; }
.page-hero h1 { font-size: 54px; }
.page-hero h1 em { color: #bcefff; }
.page-hero p { color: #d5eaf8; }
.page-hero-art img { border: 1px solid #5c87a7; }
.page-hero-art.is-single img { width: min(100%, 260px); }
.breadcrumbs { color: #9ebed3; }
.final-cta { background: #164369; border-color: #4e86a9; }
.final-cta p { color: #cce4f1; }
.site-footer { background: #04172d; border-color: #326287; }
.footer-grid h2 { color: #80ddec; }
.footer-grid a:not(.brand) { color: #c7dfec; }
.footer-grid p, .footer-base { color: #9fbcd0; }

@media (max-width: 1180px) {
  .desktop-nav { gap: 9px; }
  .desktop-nav a { font-size: 12px; }
  .brand { font-size: 36px; }
  .header-actions .button { padding-inline: 12px; }
}
@media (max-width: 900px) {
  .mobile-menu:not([hidden]) { background: #0b2e54; }
  .quick-nav .wrap { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .carousel-copy { left: 24px; width: 46%; }
  .carousel-copy h2 { font-size: 36px; }
  .carousel-copy p:not(.eyebrow) { font-size: 16px; }
}
@media (max-width: 600px) {
  .rewards-inner { grid-template-columns: 1fr; gap: 20px; }
  .rewards-inner h2 { font-size: 25px; }
  .wrap { width: calc(100% - 28px); }
  .header-inner { min-height: 62px; }
  .brand { font-size: 32px; }
  .carousel-stage { display: block; height: 360px; }
  .carousel-slide { height: 360px; aspect-ratio: auto; }
  .carousel-slide > img { position: absolute; top: 0; left: 0; width: 100%; height: 180px; object-fit: cover; object-position: right center; }
  .carousel-copy { position: absolute; top: 180px; left: 0; right: 0; bottom: 0; width: auto; transform: none; padding: 17px 18px; background: #103762; }
  .carousel-copy .eyebrow { margin: 0 0 3px; font-size: 10px; }
  .carousel-copy h2 { font-size: 24px; margin: 0 0 5px; }
  .carousel-copy p:not(.eyebrow) { font-size: 13px; line-height: 1.4; margin: 0 0 9px; }
  .carousel-copy .button { min-height: 34px; padding: 4px 14px; font-size: 12px; }
  .carousel-controls { position: absolute; right: 8px; bottom: 8px; left: auto; margin: 0; padding: 0 3px; }
  .carousel-arrow, .carousel-dot { width: 36px; height: 36px; }
  .carousel-dot::before { inset: 12px; }
  .hero-brand-inner { padding-block: 17px; gap: 10px; }
  .hero-brand h1 { font-size: 58px; }
  .hero-brand p:not(.eyebrow) { font-size: 14px; }
  .hero-brand small { font-size: 11px; }
  .hero-brand-actions .button { min-height: 40px; }
  .quick-nav .wrap { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .quick-nav a { min-height: 51px; padding: 4px; text-align: center; font-size: 12px; }
  .page-hero { padding: 34px 0; }
  .page-hero h1 { font-size: 37px; }
  .page-hero-art img { width: 38%; }
  .page-hero-art.is-single { justify-content: center; }
  .page-hero-art.is-single img { width: min(58%, 240px); }
  .bottom-actions { background: #061d38; border-color: #4c81a2; }
}

.hero-carousel { padding: 0 0 56px; }
.carousel-stage { width: min(100%, 1920px); height: auto; aspect-ratio: 1920 / 500; overflow: visible; }
.carousel-slide { position: absolute; inset: 0; width: 100%; height: 100%; }
.carousel-image-link, .carousel-image-link img { display: block; width: 100%; height: 100%; }
.carousel-image-link img { object-fit: contain; }
.carousel-image-link:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }
.carousel-controls { left: auto; right: 50%; bottom: -51px; transform: translateX(50%); }
@media (max-width: 600px) {
  .hero-carousel { padding-bottom: 55px; }
  .carousel-stage { width: 100%; height: auto; aspect-ratio: 1920 / 500; }
  .carousel-slide { inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .carousel-controls { position: absolute; left: auto; right: 50%; bottom: -49px; transform: translateX(50%); margin: 0; padding: 0 3px; }
}