@font-face { font-family: "Popular Roboto"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../assets/fonts/popular-roboto-400-700.woff2") format("woff2"); }
    * { box-sizing: border-box; }
    html { color-scheme: dark; background: #340700; }
    body { margin: 0; min-height: 100vh; font: 1rem/1.6 Arial, sans-serif; color: #eee; }
    .page-background { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; pointer-events: none; z-index: 0; }
    .page { position: relative; z-index: 1; width: 100%; max-width: 1250px; margin-inline: auto; min-height: 100vh; background: #333; }
    .utility-bar { height: 44px; background: #090909; border-bottom: 1px solid rgb(255 255 255 / 2%); }
    .utility-inner { height: 100%; margin: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .utility-actions, .account-actions { display: flex; align-items: center; }
    .utility-actions { gap: 5px; }
    .utility-button, .language-button { position: relative; width: 24px; height: 24px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 3px; background: transparent; color: #fff; font: inherit; opacity: 1; cursor: default; }
    .utility-button.is-active { background: #71bb09; }
    .utility-symbol { position: relative; display: block; }
    .chat-symbol { width: 15px; height: 12px; border-radius: 4px; background: #fff; }
    .chat-symbol::before { content: "•••"; position: absolute; inset: -7px 0 0; color: #555; font-size: 10px; letter-spacing: -1px; text-align: center; }
    .chat-symbol::after { content: ""; position: absolute; left: 3px; bottom: -3px; border-top: 4px solid #fff; border-right: 4px solid transparent; }
    .android-symbol { width: 14px; height: 11px; margin-top: 3px; border-radius: 3px 3px 2px 2px; background: #fff; }
    .android-symbol::before { content: ""; position: absolute; left: 2px; top: -5px; width: 10px; height: 7px; border-radius: 8px 8px 2px 2px; background: #fff; }
    .android-symbol::after { content: "••"; position: absolute; left: 2px; top: -9px; width: 10px; color: #69a800; font-size: 9px; letter-spacing: 2px; }
    .phone-symbol { width: 9px; height: 16px; border: 1.5px solid #fff; border-radius: 1px; }
    .phone-symbol::after { content: ""; position: absolute; left: 2px; bottom: 1px; width: 3px; height: 1px; background: #fff; }
    .search-symbol { width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; }
    .search-symbol::after { content: ""; position: absolute; width: 6px; height: 2px; right: -5px; bottom: -3px; background: #fff; transform: rotate(45deg); transform-origin: center; }
    .language-button { width: 43px; grid-template-columns: 22px 10px; gap: 3px; }
    .language-button::before, .language-button::after { content: ""; position: absolute; top: 3px; bottom: 3px; width: 1px; border-left: 1px dotted rgb(255 255 255 / 65%); }
    .language-button::before { left: -2px; }
    .language-button::after { right: -2px; }
    .indonesia-flag { width: 20px; height: 20px; display: block; overflow: hidden; border-radius: 50%; background: linear-gradient(#ef1e26 0 50%, #fff 50% 100%); box-shadow: 0 0 0 1px rgb(255 255 255 / 20%); }
    .language-caret { color: #fff; font-size: 10px; }
    .account-actions { gap: 10px; }
    .account-button { position: relative; min-width: 89px; height: 28px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgb(255 255 255 / 16%); border-radius: 999px; color: #fff; font: 700 11px/1 Arial, Helvetica, sans-serif; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 5px 14px rgb(0 0 0 / 24%); opacity: 1; cursor: pointer; text-decoration: none; }
    .register-button { background: linear-gradient(135deg, #00d878, #00e7ff); color: #041015; }
    .login-button { background: linear-gradient(135deg, #1028ff, #22c4ff); }
    .site-header { min-height: 112px; padding: 0 20px; display: flex; align-items: center; gap: 16px; background: #111; }
    .site-logo { display: block; width: 250px; max-width: 100%; height: auto; flex: 0 0 auto; }
    .main-menu { flex: 1 1 0; min-width: 0; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #666 #111; }
    .main-menu:focus-visible { outline: 2px solid #ffb744; outline-offset: -2px; }
    .menu-list { display: grid; grid-template-columns: repeat(12, minmax(72px, 1fr)); min-width: 864px; margin: 0; padding: 0; list-style: none; }
    .menu-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 3px 16px; text-align: center; color: #fff; }
    .menu-icon { display: block; width: 36px; height: 36px; object-fit: contain; flex: 0 0 auto; }
    .menu-label { display: block; min-height: 2.5em; font-size: .75rem; line-height: 1.25; font-weight: 700; }
    .home-content { padding: 0; }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
    .hero-banner { margin: 0; width: 100%; background: #14081c; }
    .hero-banner img { display: block; width: 100%; height: auto; }
    .category-list { list-style: none; margin: 0; padding: 30px 24px 40px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
    .category-item { display: flex; flex-direction: column; align-items: center; }
    .category-art { width: 100px; height: 100px; display: grid; place-items: center; border-radius: 50%; background: #fff; }
    .category-art img { display: block; width: 88px; height: 88px; object-fit: contain; }
    .category-label { display: grid; place-items: center; width: 100px; min-height: 31px; padding: 4px 3px; border-radius: 5px; background: linear-gradient(#ffad00, #ff8600); color: #080808; font-size: 12px; line-height: 1.3; font-weight: 700; box-shadow: 0 14px 26px rgb(255 171 0 / 14%); }
    .popular-section { padding: 40px 24px 32px; }
    .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
    .section-heading h2 { margin: 0; color: #fff; font-size: 26px; line-height: 1.25; }
    .gallery-controls { display: flex; gap: 8px; }
    .gallery-arrow { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 50%; background: #ff9d00; color: #141414; font: 700 28px/1 Arial,sans-serif; cursor: pointer; }
    .gallery-arrow:disabled { background: #424242; border-color: #505050; color: #777; cursor: default; }
    .gallery-arrow:focus-visible, .game-gallery:focus-visible { outline: 2px solid #ffbf47; outline-offset: 3px; }
    .game-gallery { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 100px) / 6); column-gap: 20px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
    .game-gallery::-webkit-scrollbar { display: none; }
    .game-card { min-width: 0; overflow: hidden; border-radius: 8px; background: #303030; scroll-snap-align: start; }
    .game-card img { display: block; width: 100%; height: auto; aspect-ratio: 1.4; object-fit: cover; }
    .game-card p { padding: 12px 5px; color: #fff; font-size: 14px; line-height: 1.4; font-weight: 700; text-align: center; }
    .casino-section { padding: 18px 16px 20px; }
    .casino-gallery { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 60px) / 5); gap: 15px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
    .casino-gallery::-webkit-scrollbar { display: none; }
    .casino-gallery:focus-visible { outline: 2px solid #ffbf47; outline-offset: 3px; }
    .casino-card { position: relative; min-width: 0; padding: 24px 0; overflow: hidden; border: 2px solid transparent; border-radius: 5px; background: #2f2f2f; scroll-snap-align: start; }
    .casino-card:not(:first-child) { border-color: #ed176b; }
    .casino-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; }
    .casino-card::after { content: ""; position: absolute; inset: auto 0 0; height: 42px; background: linear-gradient(transparent, #172025); pointer-events: none; }
    .casino-count { position: absolute; z-index: 1; top: 3px; left: 4px; padding: 2px 6px; border-radius: 2px; background: rgb(16 32 39 / 75%); color: #fff; font: 700 10px/15px "Segoe UI", Arial, sans-serif; }
    .casino-provider { position: absolute; z-index: 2; left: 0; bottom: 0; max-width: 100%; padding: 4px 6px; overflow: hidden; color: #fff; font: 700 10.8px/16.2px "Segoe UI", Arial, sans-serif; white-space: nowrap; text-overflow: ellipsis; }
    .casino-card[data-flag] .casino-provider { max-width: calc(100% - 55px); }
    .casino-flag { position: absolute; z-index: 2; right: 0; bottom: 0; padding: 4px 8px; border-radius: 2px 0 0; background: #c2185b; color: #fff; font: italic 700 8px/12px "Segoe UI", Arial, sans-serif; }
    .sports-section { padding: 18px 16px 20px; }
    .sports-title { display: flex; align-items: center; gap: 8px; }
    .sports-title img { display: block; width: 40px; height: 40px; object-fit: contain; }
    .sports-see-all { flex-shrink: 0; padding: 4px 12px; border-radius: 14px; background: #102027; color: #fff; font: 600 11px/16px "Segoe UI", Arial, sans-serif; }
    .sports-image { display: block; width: 100%; max-width: 324px; height: auto; margin-inline: auto; }
    .sports-cta { display: block; width: 100%; max-width: 300px; margin: 8px auto 0; padding: 9px 16px; border-radius: 5px; background: #1dbed2; color: #fff; font: 700 14px/20px Arial, sans-serif; text-align: center; }
    .extra-section { min-width: 0; padding: 18px 16px 20px; }
    .extra-title { display: flex; align-items: center; gap: 8px; }
    .extra-icon { display: block; flex-shrink: 0; width: 40px; height: 40px; object-fit: contain; }
    .extra-see-all { flex-shrink: 0; padding: 4px 12px; border-radius: 14px; background: #102027; color: #fff; font: 600 11px/16px "Segoe UI", Arial, sans-serif; }
    .extra-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
    .extra-card { position: relative; min-width: 0; overflow: hidden; border-radius: 5px; background: #2f2f2f; }
    .extra-card-image { display: block; width: 100%; height: auto; aspect-ratio: 19 / 26; object-fit: cover; border-radius: 5px; }
    .promotion-caption { position: absolute; inset: auto 0 0; padding: 24px 6.4px 6.4px; border-radius: 0 0 5px 5px; background: linear-gradient(0deg, rgb(16 32 39 / 94%) 35%, transparent); color: #fff; font: 700 11px/14.3px "Segoe UI", Arial, sans-serif; }
    .extra-feature-image { display: block; width: 100%; max-width: 324px; height: auto; margin-inline: auto; }
    .extra-cta { display: block; width: 100%; max-width: 300px; margin: 8px auto 0; padding: 9px 16px; border-radius: 5px; background: #1dbed2; color: #fff; font: 700 14px/20px Arial, sans-serif; text-align: center; }
    .slots-section { --slot-visible: 8; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 4px 16px; color: #fff; font-family: "Segoe UI", Arial, sans-serif; }
    .slot-section-heading { display: flex; align-items: center; gap: 8px; margin: 0; color: #fff; font-size: 14px; line-height: 21px; white-space: nowrap; }
    .slot-section-heading img { display: block; width: 40px; height: 40px; object-fit: contain; }
    .slot-rail { display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; align-items: center; gap: 4px; min-width: 0; }
    .slot-list { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--slot-visible) - 1) * 4px) / var(--slot-visible)); gap: 4px; margin: 0; padding: 8px 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
    .slot-list::-webkit-scrollbar { display: none; }
    .slot-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; scroll-snap-align: start; }
    .slot-thumb { display: grid; place-items: center; width: 56px; height: 56px; padding: 4px; border: 1px solid #102027; border-radius: 50%; background: #102027; }
    .slot-thumb img { display: block; width: 46px; height: 46px; object-fit: contain; }
    .slot-thumb--live { border-color: #fd3a52; }
    .slot-thumb--promo { border-color: #ffab1b; }
    .slot-badge { position: absolute; top: 44px; left: 50%; transform: translateX(-50%); padding: 0 4px; border-radius: 2px; font-size: 8px; line-height: 12px; font-weight: 900; }
    .slot-badge--live { background: #fd3a52; color: #fff; }
    .slot-badge--promo { background: #ffab1b; color: #102027; }
    .slot-label { display: block; width: 100%; overflow: hidden; color: #fff; font-size: 12px; line-height: 18px; font-weight: 500; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
    .slot-arrow { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; font: 700 25px/1 Arial, sans-serif; cursor: pointer; }
    .slot-arrow:disabled { opacity: .3; cursor: default; }
    .slot-arrow:not(:disabled):hover { background: rgb(255 255 255 / 10%); }
    .slot-see-all { min-width: 90px; padding: 4px 12px; border: 0; border-radius: 14px; background: #102027; color: #fff; font: 600 11px/16px "Segoe UI", Arial, sans-serif; cursor: pointer; }
    .slot-arrow:focus-visible, .slot-see-all:focus-visible, .slot-list:focus-visible { outline: 2px solid #ffab1b; outline-offset: 2px; }
    .slots-section.is-expanded { align-items: start; }
    .slots-section.is-expanded .slot-section-heading, .slots-section.is-expanded .slot-see-all { margin-top: 16px; }
    .slots-section.is-expanded .slot-list { grid-auto-flow: row; grid-template-columns: repeat(var(--slot-visible), minmax(0, 1fr)); grid-auto-columns: auto; row-gap: 16px; overflow: visible; }
    .slots-section.is-expanded .slot-arrow { visibility: hidden; }
    p { margin: 0; color: #d2d2d2; }
    @media (min-width: 1001px) {
      .home-content { display: flow-root; padding-bottom: 16px; background: #1b1b1b; }
      .content-box { margin: 14px 16px 0; border: 1px solid #414141; border-radius: 6px; background: #333; }
      .casino-sports-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; margin: 14px 16px 0; }
      .casino-sports-row > .content-box { min-width: 0; margin: 0; }
      .casino-sports-row .casino-section { display: flex; flex-direction: column; }
      .casino-sports-row .casino-gallery { grid-auto-columns: calc((100% - 45px) / 4); margin-block: auto; }
      .extras-row { display: grid; gap: 14px; margin: 14px 16px 0; }
      .extras-row--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .extras-row--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .extras-row > .content-box { margin: 0; }
      .content-box .category-list { padding: 22px 16px 26px; }
      .popular-section { padding: 18px 16px 20px; }
      .section-heading { min-height: 42px; gap: 16px; margin-bottom: 10px; }
      .section-heading h2 { font-family: "Popular Roboto", Arial, sans-serif; }
      .gallery-arrow { width: 31px; height: 31px; border-color: rgb(255 255 255 / 22%); background: #666; color: #fff; transition: opacity .15s ease; }
      #games-next, #casino-next { background: #ff9800; border-color: #ff9800; color: #111; }
      .gallery-arrow span { display: block; margin-top: -2px; font: 700 27px/1 Arial, sans-serif; }
      .gallery-arrow:disabled { background: #666; border-color: rgb(255 255 255 / 22%); color: #fff; opacity: .35; }
      .gallery-arrow:not(:disabled):hover { background: #ff9800; color: #111; }
      .gallery-arrow:not(:disabled):active { transform: scale(.9); }
      .game-gallery { grid-auto-columns: calc((100% - 75px) / 6); column-gap: 15px; }
      .game-card { border-radius: 10px; background: #2f2f2f; }
      .game-card img { aspect-ratio: 1.35; padding: 4px; object-fit: contain; object-position: center top; border-radius: 10px 10px 0 0; }
      .game-card p { height: 41px; min-height: 41px; padding: 10px; line-height: 21px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    }
    @media (max-width: 1170px) { .site-header { gap: 12px; } .site-logo { width: 180px; } }
    @media (min-width: 701px) and (max-width: 1000px) { .category-art { width: 76px; height: 76px; } .category-art img { width: 66px; height: 66px; } .category-label { width: 76px; font-size: 10px; } .game-gallery { grid-auto-columns: calc((100% - 40px) / 3); } }
    @media (max-width: 700px) {
      .utility-bar { height: 42px; }
      .utility-inner { margin-inline: 7px; gap: 8px; }
      .utility-actions { gap: 2px; }
      .utility-button { width: 21px; }
      .language-button { width: 37px; grid-template-columns: 20px 8px; }
      .account-actions { gap: 5px; }
      .account-button { min-width: 60px; height: 25px; padding: 0 10px; font-size: 9px; }
      .site-header { min-height: 96px; padding: 0 7px; gap: 0; flex-wrap: nowrap; }
      .site-logo { width: 76px; margin-inline: 4px; height: auto; }
      .main-menu { align-self: stretch; display: flex; align-items: center; flex-basis: 0; scrollbar-width: none; overscroll-behavior-x: contain; }
      .main-menu::-webkit-scrollbar { display: none; }
      .menu-list { width: 816px; min-width: 816px; grid-template-columns: repeat(12, 68px); flex-shrink: 0; }
      .menu-item { padding: 10px 2px 6px; gap: 3px; }
      .menu-icon { width: 30px; height: 30px; }
      .menu-label { min-height: 26px; font-size: 10px; line-height: 1.3; }
      .menu-label br { display: none; }
      .category-list { padding: 22px 12px 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 8px; }
      .category-art { width: 60px; height: 60px; }
      .category-art img { width: 52px; height: 52px; }
      .category-label { width: 100%; max-width: 90px; min-height: 26px; font-size: 10px; }
      .popular-section { padding: 22px 12px 28px; }
      .section-heading { gap: 12px; margin-bottom: 14px; }
      .section-heading h2 { font-size: 22px; }
      .gallery-arrow { width: 30px; height: 30px; }
      .game-gallery { grid-auto-columns: calc((100% - 20px) / 2.2); column-gap: 10px; }
      .game-card p { font-size: 12px; padding: 10px 5px; }
    }
    @media (max-width: 310px) { .utility-bar { height: auto; } .utility-inner { flex-wrap: wrap; padding-block: 8px; } }
@font-face { font-family: "Footer Avenir"; src: url("../assets/fonts/footer-avenir-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Footer Avenir"; src: url("../assets/fonts/footer-avenir-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Footer Avenir"; src: url("../assets/fonts/footer-avenir-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Footer Avenir"; src: url("../assets/fonts/footer-avenir-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Footer Icons"; src: url("../assets/fonts/footer-icons-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
.demo-footer { background: #37474f; color: #fff; font: 400 16px/1.5 "Footer Avenir", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
.demo-footer :where(h1, h2, h3, p, ul) { margin: 0; padding: 0; }
.demo-footer ul { list-style: none; }
.footer-container { width: 100%; max-width: 1232px; margin: 0 auto; padding: 0 16px; }
.demo-footer-intro { border-top: 1px solid rgb(255 255 255 / 10%); }
.demo-footer-intro .footer-container { padding-top: 16px; padding-bottom: 20px; }
.footer-intro-line { height: 17px; border-bottom: 1px solid rgb(255 255 255 / 10%); }
.demo-footer-main { padding: 24px 0 32px; }
.demo-footer .footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
.demo-footer .footer-group h2 { margin-bottom: 8px; font-size: 14px; font-weight: 900; }
.demo-footer .footer-group li { margin-bottom: 6px; color: rgb(255 255 255 / 60%); font-size: 12px; }
.demo-footer .footer-social ul { display: flex; gap: 12px; }
.demo-footer .footer-social li { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #102027; color: #fff; }
.footer-icon { display: inline-block; font-family: "Footer Icons"; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.footer-social .footer-icon { font-size: 16px; }
.demo-footer .footer-article, .demo-footer .footer-payment, .demo-footer .footer-partners { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / 10%); }
.demo-footer .footer-seo-title { margin-bottom: 12px; font-size: 30px; font-weight: 900; line-height: 1.4; text-align: center; text-wrap: balance; }
.demo-footer .footer-article-body { font-size: 12px; }
.demo-footer [hidden] { display: none !important; }
.demo-footer .footer-article-toggle { padding: 8px 0 0; border: 0; background: transparent; color: #26c6da; font: 700 12px/18px "Footer Avenir", sans-serif; cursor: pointer; }
.demo-footer .footer-article-toggle:hover { color: #80deea; }
.demo-footer .footer-article-toggle:focus-visible { outline: 2px solid #26c6da; outline-offset: 4px; }
.demo-footer .footer-article-body h2 { margin: 0 0 8px; font-size: 24px; font-weight: 700; line-height: 1.4; }
.demo-footer .footer-article-body p { margin-bottom: 8px; color: rgb(255 255 255 / 60%); text-align: justify; }
.demo-footer .footer-article-body a { color: #80deea; text-decoration: underline; text-underline-offset: 2px; }
.demo-footer .footer-payment h2, .demo-footer .footer-partners h2 { margin-bottom: 12px; font-size: 14px; font-weight: 900; }
.demo-footer .footer-payment ul { display: flex; flex-wrap: wrap; gap: 8px; }
.demo-footer .footer-payment li { display: grid; place-items: center; width: 120px; height: 40px; padding: 6px 12px; border-radius: 5px; background: #102027; }
.demo-footer .footer-payment img { display: block; width: auto; height: auto; max-width: 100%; max-height: 28px; object-fit: contain; }
.demo-footer .footer-partners ul { display: grid; gap: 12px 8px; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.demo-footer .footer-partners li { display: flex; flex-direction: column; align-items: center; gap: 4px; color: rgb(255 255 255 / 60%); text-align: center; }
.demo-footer .footer-partners .footer-icon { font-size: 36px; }
.demo-footer .footer-partners span { width: 100%; font-size: 10px; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.demo-footer .footer-copyright { margin-top: 24px; font-size: 12px; color: rgb(255 255 255 / 60%); }
@media (min-width: 768px) { .demo-footer .footer-links { grid-template-columns: repeat(4, minmax(0, 1fr)); } }


    /* Standalone HTML5: navigation, focus states, and narrow-screen layout. */
    html { scroll-behavior: smooth; scroll-padding-top: 16px; }
    [hidden] { display: none !important; }
    a { color: inherit; }
    a:focus-visible, button:focus-visible { outline: 3px solid #ffbf47; outline-offset: 4px; }
    .skip-link { position: fixed; top: 10px; left: 10px; z-index: 20; padding: 10px 16px; border-radius: 4px; background: #ffbf47; color: #111; font-weight: 700; transform: translateY(-180%); }
    .skip-link:focus { transform: translateY(0); }
    .menu-entry { min-width: 0; }
    a.menu-item { height: 100%; text-decoration: none; border-radius: 4px; }
    a.menu-item:hover { background: #252525; color: #ffbf47; }
    .category-link { display: flex; flex-direction: column; align-items: center; width: 100%; border-radius: 5px; text-decoration: none; }
    .category-link:hover .category-label { background: #ffc04a; }
    .footer-group a { text-decoration: none; }
    .footer-group a:hover { color: #fff; text-decoration: underline; }
    .footer-article-body a { color: #80deea; }
    .sports-cta, .extra-cta { border: 0; opacity: 1; }
    .slot-list, .main-menu, .game-gallery, .casino-gallery { touch-action: pan-x pan-y; }
    .account-button, .category-label, .slot-see-all, .sports-see-all, .extra-see-all { font-size: .75rem; }
    .demo-footer .footer-article-body { font-size: 1rem; }
    @media (min-width: 701px) and (max-width: 1000px) {
      .slots-section { --slot-visible: 5; }
      .category-art { width: 76px; height: 76px; }
      .category-label { width: 100%; max-width: 90px; }
    }
    @media (max-width: 700px) {
      .utility-bar { height: auto; min-height: 44px; }
      .utility-inner { flex-wrap: wrap; padding-block: 7px; }
      .account-button { height: 28px; padding-inline: 9px; }
      .menu-list { width: 1008px; min-width: 1008px; grid-template-columns: repeat(12, 84px); }
      .menu-label { font-size: .75rem; }
      .slots-section { --slot-visible: 4; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 16px 12px; }
      .slot-section-heading { grid-column: 1; grid-row: 1; }
      .slot-see-all { grid-column: 2; grid-row: 1; min-height: 36px; }
      .slot-rail { grid-column: 1 / -1; grid-row: 2; }
      .slots-section.is-expanded .slot-section-heading, .slots-section.is-expanded .slot-see-all { margin-top: 0; }
      .casino-gallery { grid-auto-columns: calc((100% - 15px) / 2.2); }
      .casino-card { padding-block: 24px; }
      .category-label { font-size: .75rem; }
      .section-heading { flex-wrap: wrap; }
      .section-heading h2 { overflow-wrap: anywhere; }
    }
    @media (max-width: 380px) {
      .slots-section { --slot-visible: 3; }
      .extra-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation: none !important; transition: none !important; }
    }

.bottombar { display: none; }

/* Mobile preview v5: the desktop rules above remain unchanged. */
@media (max-width: 700px) {
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  html { scroll-padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  .bottombar {
    display: grid;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 98;
    height: calc(62px + env(safe-area-inset-bottom, 0px));
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #37474f;
    border-top: 1px solid rgb(255 255 255 / 10%);
    font-family: "Footer Avenir", "Segoe UI", Arial, sans-serif;
  }
  .bottombar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    gap: 3px;
    padding: 8px 4px;
    color: rgb(255 255 255 / 60%);
    font-size: 11px;
    line-height: 16px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
  }
  .bottombar__item i {
    display: inline-block;
    font: normal 400 20px/1 "Footer Icons";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .bottombar .icon-home::before { content: "\e922"; }
  .bottombar .icon-register::before { content: "\e95a"; }
  .bottombar .icon-login::before { content: "\e91b"; }
  .bottombar .icon-promo::before { content: "\e97f"; }
  .bottombar .icon-chat::before { content: "\e9cf"; }
  .bottombar__item.is-active { color: #26c6da; }
  a.bottombar__item { color: #fff; }
  a.bottombar__item > span { text-decoration: underline; }
  a.bottombar__item:hover { color: #26c6da; }
  a.bottombar__item:focus-visible { outline-offset: -3px; }
  .site-header { min-height: 80px; }
  .main-menu {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    scroll-snap-type: x proximity;
    touch-action: pan-x pan-y pinch-zoom;
  }
  .menu-list {
    width: 300%;
    min-width: 300%;
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .menu-list > li { scroll-snap-align: start; }
  .menu-item { min-width: 0; padding: 8px 2px 6px; gap: 3px; }
  .menu-icon { width: 26px; height: 26px; -webkit-user-drag: none; }
  .menu-label { min-height: 25px; font-size: 10px; line-height: 1.25; }
  .menu-label br { display: block; }
  .main-menu.is-dragging { cursor: grabbing; scroll-snap-type: none; }
  .main-menu.is-dragging * { cursor: grabbing; }
  .demo-footer .footer-article-body p {
    text-align: left;
  }
  .home-content {
    --mobile-surface: #37474f;
    --mobile-surface-light: #505d64;
    background: var(--mobile-surface);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "hero hero"
      "categories categories"
      "slots slots"
      "sports poker"
      "popular popular"
      "casino casino"
      "exclusive exclusive"
      "promotions promotions"
      "lotto fishing";
    gap: 0;
  }
  .home-content > .casino-sports-row,
  .home-content > .extras-row { display: contents; }
  .home-content .content-box {
    min-width: 0;
    background: var(--mobile-surface);
    border-radius: 5px 5px 0 0;
  }
  .home-content :is(.slots-section, .popular-section, .promotions-section) {
    background: var(--mobile-surface-light);
  }
  .hero-banner { grid-area: hero; }
  .category-section { grid-area: categories; }
  #slots-section { grid-area: slots; }
  #sports-section { grid-area: sports; }
  #poker-section { grid-area: poker; }
  #popular-section { grid-area: popular; }
  #casino-section { grid-area: casino; }
  #exclusive-section { grid-area: exclusive; }
  #promotions-section { grid-area: promotions; }
  #lotto-section { grid-area: lotto; }
  #fishing-section { grid-area: fishing; }

  .slots-section {
    --slot-visible: 5;
    --slot-thumb-size: min(56px, calc((100vw - 104px) / 5));
    gap: 8px;
    padding: 8px 12px;
  }
  .slot-see-all {
    min-width: 0;
    min-height: 24px;
    padding: 4px 12px;
    line-height: 16px;
  }
  .slot-list {
    grid-template-rows: repeat(3, minmax(0, 1fr));
    row-gap: 8px;
  }
  .slot-thumb {
    width: var(--slot-thumb-size);
    height: var(--slot-thumb-size);
  }
  .slot-thumb img { width: 100%; height: 100%; }
  .slot-badge { top: calc(var(--slot-thumb-size) - 12px); }
  .slots-section.is-expanded .slot-list {
    grid-template-rows: none;
    row-gap: 8px;
  }

  :is(.sports-section, .poker-section, .lotto-section, .fishing-section) {
    padding: 16px;
    border-radius: 6px 6px 0 0;
  }
  :is(.sports-section, .poker-section, .lotto-section, .fishing-section) .section-heading {
    flex-wrap: nowrap;
    min-height: 40px;
    gap: 0;
    margin-bottom: 16px;
  }
  :is(.sports-section, .poker-section, .lotto-section, .fishing-section) .section-heading h2 {
    gap: 8px;
    font-size: 14px;
    line-height: 21px;
    white-space: nowrap;
  }
  :is(.sports-section, .poker-section, .lotto-section, .fishing-section) .section-heading img {
    flex: 0 0 40px;
  }
  .sports-see-all,
  :is(.poker-section, .lotto-section, .fishing-section) .extra-see-all { display: none; }
  .sports-image,
  :is(.poker-section, .lotto-section, .fishing-section) .extra-feature-image {
    width: calc(100% + 16px);
    max-width: none;
    margin-inline: -8px;
  }
  .sports-cta,
  :is(.poker-section, .lotto-section, .fishing-section) .extra-cta {
    max-width: none;
    padding: 9px 4px;
    white-space: nowrap;
  }

  :is(.promotions-section, .exclusive-section) { padding: 16px 0; }
  :is(.promotions-section, .exclusive-section) .section-heading {
    flex-wrap: nowrap;
    min-height: 40px;
    margin: 0 0 16px;
    padding-inline: 16px;
    gap: 8px;
  }
  :is(.promotions-section, .exclusive-section) .section-heading h2 {
    font-size: 14px;
    line-height: 21px;
    white-space: nowrap;
  }
  :is(.promotions-section, .exclusive-section) .extra-see-all { flex-shrink: 0; }
  :is(.promotions-section, .exclusive-section) .extra-card-grid {
    grid-template-columns: none;
    grid-template-rows: minmax(0, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: 29%;
    gap: 8px;
    padding: 0 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 8px;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
  }
  :is(.promotions-section, .exclusive-section) .extra-card-grid::-webkit-scrollbar { display: none; }
  :is(.promotions-section, .exclusive-section) .extra-card-grid:focus-visible {
    outline: 2px solid #26c6da;
    outline-offset: -2px;
  }
  :is(.promotions-section, .exclusive-section) .extra-card-grid.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
  }
  :is(.promotions-section, .exclusive-section) .extra-card { scroll-snap-align: start; }
  :is(.promotions-section, .exclusive-section) .extra-card-image { -webkit-user-drag: none; }
  .promotions-section .promotion-caption {
    padding: 20px 6px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}