:root {
  --m9-green: #0a6f62;
  --m9-green-dark: #073d38;
  --m9-green-light: #2e9482;
  --m9-yellow: #ffd719;
  --m9-blue: #203c73;
  --m9-bottom: 46px;
  --m9-rail: 72px;
}

html {
  background: #2b412d;
}

body {
  min-width: 320px;
  color: #fff;
  background: #2b412d;
}

.page-web {
  position: relative;
  width: min(100%, 390px) !important;
  min-height: 100vh;
  margin: 0 auto !important;
  overflow-x: clip;
  background: #0d4d44 url("assets/m9/bg.png") center top / auto 100vh fixed;
  box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 0 32px rgba(0,0,0,.45);
}

.page-web img {
  max-width: 100%;
}

.right-tools,
.welcome-strip,
.m9-mobile-close,
.float-check,
.bottom-nav button[data-page="home"] {
  display: none !important;
}

/* The original lobby keeps a 390px mobile canvas on desktop as well. */
@media (min-width: 0px) {
  .page-web {
    width: 100% !important;
    padding-top: 43px !important;
    padding-bottom: var(--m9-bottom) !important;
  }

  .download-strip {
    position: fixed !important;
    top: 0 !important;
    left: 50% !important;
    z-index: 3200 !important;
    width: min(100%, 390px) !important;
    height: 43px !important;
    transform: translateX(-50%) !important;
  }

  .download-strip > .strip-close {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    left: auto !important;
    width: 24px !important;
    height: 24px !important;
  }

  body.m9-authenticated .download-strip {
    grid-template-columns: repeat(3,minmax(0,1fr)) 28px !important;
    gap: 3px !important;
    padding: 3px !important;
    background: #edf2ff !important;
  }

  body.m9-authenticated .download-strip > .app-pill {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0,1fr) 10px !important;
    align-items: center !important;
    width: auto !important;
    height: 37px !important;
    min-width: 0 !important;
    padding: 0 4px !important;
    overflow: hidden !important;
    border: 1px solid #697080 !important;
    border-radius: 7px !important;
    color: #ddd !important;
    background: #333 !important;
    opacity: 1 !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18) !important;
    font-size: 11px !important;
  }

  body.m9-authenticated .download-strip > .app-pill.download {
    color: #eee !important;
    background: #303e9c !important;
  }

  body.m9-authenticated .download-strip > .app-pill::after {
    content: ">" !important;
    display: block !important;
    color: #ddd !important;
    font-size: 15px !important;
  }

  body.m9-authenticated .download-strip > .app-pill img {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    border-radius: 5px !important;
    object-fit: cover !important;
    opacity: 1 !important;
  }

  body.m9-authenticated .download-strip > .strip-close {
    top: 6px !important;
    right: 3px !important;
    display: grid !important;
    place-items: center !important;
    width: 25px !important;
    height: 25px !important;
    border-radius: 50% !important;
    color: #fff !important;
    background: #168bd0 !important;
    opacity: 1 !important;
    font-size: 18px !important;
  }

  body.m9-download-hidden .page-web { padding-top: 0 !important; }
  body.m9-download-hidden .m9-reference-menu,
  body.m9-download-hidden #referenceLogin,
  body.m9-download-hidden #referenceRegister { top: 61px !important; }
  body.m9-download-hidden.m9-authenticated .m9-reference-menu { top: 29px !important; }
  body.m9-download-hidden .side-drawer { top: 51px !important; max-height: calc(100vh - 62px) !important; }
  body.m9-download-hidden.m9-scrolled .game-tabs { top: 7px !important; }
  body.m9-download-hidden.m9-scrolled .feature-strip { top: 2px !important; }

  .page-header {
    position: relative !important;
    height: 112px !important;
    min-height: 112px !important;
    background: rgba(5,55,50,.85) url("assets/m9/bg.png") center top / cover !important;
  }

  .page-header::before {
    content: "";
    position: absolute;
    top: 17px;
    left: 50%;
    width: 68px;
    height: 68px;
    border-radius: 12px;
    background: transparent url("assets/m9/app-logo-green-transparent.png") center / contain no-repeat;
    box-shadow: 0 5px 12px rgba(0,0,0,.35);
    transform: translateX(-50%);
  }

  .page-header > .brand-logo {
    top: 17px !important;
    width: 68px !important;
    height: 68px !important;
    opacity: 0 !important;
  }

  .page-header > .hamburger,
  .page-header > .login-btn { display: none !important; }

  .page-header .m9-news-marquee {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 4 !important;
    height: 25px !important;
    overflow: hidden !important;
    color: #e7e7e7 !important;
    background: rgba(4,40,36,.82) !important;
    font-size: 13px !important;
    line-height: 25px !important;
  }

  .page-header .m9-news-marquee span {
    display: inline-block !important;
    min-width: 100% !important;
    padding-left: 100% !important;
    white-space: nowrap !important;
    animation: m9-scroll-news 24s linear infinite !important;
  }

  @keyframes m9-scroll-news {
    to { transform: translateX(-100%); }
  }

  .m9-reference-menu {
    position: fixed !important;
    top: 104px !important;
    left: calc(50% - min(50vw, 195px) + 10px) !important;
    z-index: 2500 !important;
    display: grid !important;
    place-items: center !important;
    width: 35px !important;
    height: 35px !important;
    border-radius: 5px !important;
    background: rgba(53,125,116,.75) !important;
  }

  .m9-reference-menu span { display: block !important; width: 20px !important; height: 3px !important; margin: 2px auto !important; border-radius: 2px !important; background: #22f1d1 !important; }

  #referenceLogin {
    position: fixed !important;
    top: 104px !important;
    left: auto !important;
    right: calc(50% - min(50vw, 195px) + 10px) !important;
    z-index: 2500 !important;
    display: grid !important;
    width: 66px !important;
    height: 32px !important;
    border-radius: 7px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    transform: none !important;
  }

  .m9-account-strip {
    display: none !important;
    grid-template-columns: minmax(0,1fr) auto 32px 34px !important;
    align-items: center !important;
    gap: 5px !important;
    width: calc(100% + var(--m9-rail) + 3px) !important;
    height: 46px !important;
    margin-left: calc((var(--m9-rail) + 3px) * -1) !important;
    padding: 4px 7px 4px 9px !important;
    color: #fff !important;
    background: rgba(11,91,78,.88) !important;
  }
  body.m9-authenticated .m9-account-strip { display: grid !important; }
  body.m9-authenticated .page-header { height: 82px !important; min-height: 82px !important; }
  body.m9-authenticated .page-header::before { top: 10px !important; width: 62px !important; height: 62px !important; }
  body.m9-authenticated .m9-reference-menu { top: 72px !important; }
  body.m9-authenticated #referenceLogin { display: none !important; }
  .m9-account-copy { display: grid !important; gap: 2px !important; min-width: 0 !important; padding: 1px 0 0 4px !important; line-height: 1.1 !important; }
  .m9-account-copy strong { overflow: hidden !important; font-size: 12px !important; white-space: nowrap !important; text-overflow: ellipsis !important; }
  .m9-account-copy small { overflow: hidden !important; color: #c9d8d4 !important; font-size: 10px !important; white-space: nowrap !important; text-overflow: ellipsis !important; }
  .m9-account-strip > b { min-width: 92px !important; height: 32px !important; padding: 0 10px !important; border: 1px solid #d2bd59 !important; border-radius: 17px !important; line-height: 30px !important; text-align: right !important; font-size: 12px !important; font-weight: 500 !important; }
  .m9-account-strip > button { width: 32px !important; height: 32px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; color: #ddd !important; background: rgba(0,0,0,.28) !important; font-size: 22px !important; }
  .m9-account-strip > button:last-child { width: 34px !important; height: 34px !important; font-size: 23px !important; }

  .page-content {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 3px calc(var(--m9-bottom) + 8px) var(--m9-rail) !important;
  }

  .banner-row {
    width: 390px !important;
    max-width: 100vw !important;
    height: 140px !important;
    min-height: 140px !important;
    margin: 0 0 0 calc(var(--m9-rail) * -1) !important;
    background-image: none !important;
  }

  .banner-row .banner-card:not(.main-banner) {
    display: none !important;
  }

  .banner-card.main-banner {
    display: block !important;
    width: 100% !important;
    height: 140px !important;
    min-height: 140px !important;
    border: 0 !important;
    border-radius: 0 !important;
    opacity: 1 !important;
  }

  .banner-card.main-banner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: none !important;
  }

  .game-tabs {
    position: fixed !important;
    top: var(--m9-rail-top, 295px) !important;
    left: calc(50% - min(50vw, 195px) + 4px) !important;
    z-index: 2100 !important;
    display: grid !important;
    width: 65px !important;
    max-height: calc(100vh - var(--m9-bottom) - 48px) !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
  }

  .game-tabs::-webkit-scrollbar { display: none !important; }

  body.m9-scrolled .game-tabs {
    top: 50px !important;
  }

  body.m9-scrolled .feature-strip {
    top: 45px !important;
  }

  body.m9-scrolled .m9-reference-menu,
  body.m9-scrolled #referenceLogin,
  body.m9-scrolled #referenceRegister {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .game-tabs > .game-tab,
  .game-tabs > button.game-tab {
    display: grid !important;
    grid-template-rows: 39px 16px !important;
    place-items: center !important;
    width: 65px !important;
    min-width: 65px !important;
    max-width: 65px !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    padding: 3px 1px 2px !important;
    border: 0 !important;
    border-radius: 11px !important;
    color: #fff !important;
    background: linear-gradient(#309587,#087267) !important;
    box-shadow: 0 4px 5px rgba(0,0,0,.42) !important;
  }

  .game-tabs > .game-tab img,
  .game-tabs > button.game-tab img {
    width: 39px !important;
    height: 39px !important;
    object-fit: contain !important;
  }

  .game-tabs > .game-tab span,
  .game-tabs > button.game-tab span {
    max-width: 62px !important;
    overflow: hidden !important;
    color: inherit !important;
    font-size: 13px !important;
    line-height: 15px !important;
    white-space: nowrap !important;
  }

  .game-tabs > .game-tab.active,
  .game-tabs > button.game-tab.active {
    color: #111 !important;
    background: linear-gradient(#ffec24,#ffc000) !important;
  }

  .feature-strip {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    width: calc(100vw - var(--m9-rail) - 6px) !important;
    max-width: 312px !important;
    height: 38px !important;
    min-height: 38px !important;
    gap: 2px !important;
    margin: 7px 0 8px !important;
    padding: 3px !important;
    border-radius: 13px !important;
    background: rgba(39,118,102,.76) !important;
  }

  .feature-chip:first-child { display: none !important; }

  .feature-chip {
    display: grid !important;
    grid-template-columns: 27px minmax(0,1fr) !important;
    width: auto !important;
    min-width: 0 !important;
    height: 31px !important;
    min-height: 31px !important;
    padding: 0 3px !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: linear-gradient(#258b7c,#09695f) !important;
    font-size: 10px !important;
    line-height: 10px !important;
  }

  .feature-chip img {
    width: 27px !important;
    height: 27px !important;
  }

  .view-shell,
  .home-lobby,
  .m9-category-page,
  .m9-subpage {
    width: calc(100vw - var(--m9-rail) - 3px) !important;
    max-width: 315px !important;
  }

  .view-shell { gap: 8px !important; }

  .home-lobby {
    display: grid !important;
    gap: 10px !important;
  }

  .page-content > .view-shell > .home-lobby > .m9-race-panel {
    width: 100% !important;
    max-width: 100% !important;
    height: 215px !important;
    min-height: 215px !important;
  }

  .page-content > .view-shell > .home-lobby > .daily-board {
    width: 100% !important;
    max-width: 100% !important;
    height: 165px !important;
    min-height: 165px !important;
    max-height: 165px !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    background: #203b6d !important;
    box-shadow: inset 0 0 0 1px rgba(255,221,31,.45) !important;
  }

  .home-lobby .daily-board header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 0 0 21px !important;
    color: #fff !important;
    background: #294e8d !important;
  }

  .home-lobby .daily-board header strong { font-size: 15px !important; font-weight: 500 !important; }
  .home-lobby .daily-board header span { min-width: 65px !important; padding: 2px 5px !important; border-radius: 2px !important; background: #172b50 !important; font: 12px/1 monospace !important; }

  .home-lobby .board-caption {
    height: 20px !important;
    padding: 4px 0 0 !important;
    color: #fff !important;
    background: #172b50 !important;
    font-size: 12px !important;
  }

  .daily-board-rows {
    height: 119px !important;
    overflow-y: auto !important;
    background: #203b6d !important;
    scrollbar-width: none !important;
  }

  .daily-board-rows::-webkit-scrollbar { display: none !important; }

  .m9-total-bonus {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: center !important;
    width: 100% !important;
    height: 52px !important;
    margin-top: -2px !important;
    padding: 4px 8px !important;
    overflow: hidden !important;
    border-radius: 6px !important;
    color: #f7d87c !important;
    background: linear-gradient(90deg,#5c3502,#8a6004 65%,#bc9d06) !important;
    box-shadow: inset 0 0 0 1px rgba(255,226,90,.35) !important;
    border: 1px solid #d8b515 !important;
    cursor: pointer !important;
    text-align: left !important;
  }
  .m9-total-bonus div { display: grid !important; grid-template-columns: 70px 1fr !important; grid-template-rows: 17px 24px !important; align-items: center !important; }
  .m9-total-bonus b { grid-row: 1/3 !important; font: italic 900 27px/1 Georgia,serif !important; }
  .m9-total-bonus span { font-size: 10px !important; }
  .m9-total-bonus strong { overflow: hidden !important; font: italic 700 17px/1 Georgia,serif !important; white-space: nowrap !important; }
  .m9-total-bonus time { align-self: end !important; padding: 3px 5px !important; border-radius: 3px !important; color: #111 !important; background: #e2c21d !important; font: 10px/1 monospace !important; }

  .home-lobby .daily-board article {
    display: grid !important;
    grid-template-columns: 22px 40px minmax(62px,1fr) minmax(85px,1fr) 25px !important;
    align-items: center !important;
    gap: 4px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 3px !important;
    border: 1px solid #182f59 !important;
    border-radius: 3px !important;
    background: linear-gradient(90deg,#283f72,#395c94 60%,#2f5189) !important;
  }

  .home-lobby .daily-board article img { width: 34px !important; height: 34px !important; border-radius: 4px !important; object-fit: cover !important; }
  .home-lobby .daily-board article i { display: grid !important; place-items: center !important; font-size: 14px !important; font-style: normal !important; }
  .home-lobby .daily-board article span { overflow: hidden !important; font-size: 14px !important; white-space: nowrap !important; text-overflow: ellipsis !important; }
  .home-lobby .daily-board article b { font-size: 13px !important; font-weight: 500 !important; white-space: nowrap !important; }
  .home-lobby .daily-board article em { display: grid !important; place-items: center !important; width: 24px !important; height: 24px !important; border-radius: 3px !important; background: #7f91ad !important; font-size: 0 !important; }
  .home-lobby .daily-board article em::before { content: "\2197" !important; color: #fff !important; font-size: 18px !important; font-style: normal !important; }

  .home-game-section,
  .local-jackpot,
  .home-footer {
    width: 100% !important;
    max-width: 100% !important;
  }

  .home-game-section header,
  .m9-category-title {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 31px !important;
    color: var(--m9-yellow) !important;
  }

  .home-game-section header strong,
  .m9-category-title strong {
    font-size: 18px !important;
    white-space: nowrap !important;
  }

  .home-game-section header span,
  .m9-category-title span {
    height: 1px !important;
    background: linear-gradient(90deg,#ead427,transparent) !important;
  }

  .home-game-section header button { display: none !important; }

  .home-game-grid,
  .game-grid {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 9px 7px !important;
    padding: 0 !important;
  }

  .game-card {
    overflow: hidden !important;
    border: 2px solid #10231f !important;
    border-radius: 8px !important;
    background: #101010 !important;
  }

  .game-card button {
    display: grid !important;
    grid-template-rows: minmax(0,1fr) 28px !important;
    width: 100% !important;
    aspect-ratio: .72 !important;
  }

  .game-card .game-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .game-card .game-img.is-image-loading,
  .m9-home-card > button > img.is-image-loading,
  .game-launch .launch-art.is-image-loading,
  .m9-casino-feature img.is-image-loading,
  .m9-casino-provider-grid img.is-image-loading,
  .provider-filter-row .provider-top-game.is-image-loading {
    color: transparent !important;
    background: linear-gradient(100deg,#092b27 20%,#155e54 40%,#092b27 60%) 0 0 / 220% 100% !important;
    animation: m9-game-image-loading 1.2s ease-in-out infinite !important;
  }

  @keyframes m9-game-image-loading {
    to { background-position: -220% 0; }
  }

  .game-card .game-img.is-image-fallback,
  .m9-home-card > button > img.is-image-fallback,
  .game-launch .launch-art.is-image-fallback {
    padding: 14px !important;
    background: #101010 !important;
    object-fit: contain !important;
  }

  .game-card .platform-row {
    display: grid !important;
    place-items: center !important;
    min-width: 0 !important;
    padding: 2px !important;
    background: #101010 !important;
  }

  .game-card .platform-row img,
  .m9-home-card small img {
    display: block !important;
    width: auto !important;
    max-width: 72% !important;
    height: 22px !important;
    object-fit: contain !important;
  }

  .provider-wordmark {
    display: grid !important;
    place-items: center !important;
    max-width: 92% !important;
    height: 22px !important;
    overflow: hidden !important;
    color: #f2c837 !important;
    font: 900 12px/1 Arial,sans-serif !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  .game-card .game-tag { top: 3px !important; left: 3px !important; z-index: 2 !important; font-size: 8px !important; }

  .m9-category-page > .game-grid {
    gap: 20px 5px !important;
    padding: 0 3px 0 4px !important;
  }

  .m9-category-page > .game-grid .game-card button {
    aspect-ratio: .732 !important;
  }

  .provider-filter-row {
    display: grid !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 8px 6px !important;
    width: 100% !important;
    max-height: none !important;
    margin: 0 0 6px !important;
    padding: 0 8px !important;
    overflow: visible !important;
  }

  .provider-filter-row button {
    position: relative !important;
    display: grid !important;
    grid-template-rows: 31px 19px !important;
    align-items: center !important;
    justify-items: center !important;
    min-width: 0 !important;
    height: 50px !important;
    padding: 1px 2px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 7px !important;
    color: #fff !important;
    background: linear-gradient(#2b9686,#087167) !important;
    box-shadow: 0 3px 4px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.13) !important;
  }

  .provider-filter-row button::before {
    content: "PROMO" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 2 !important;
    padding: 1px 4px !important;
    color: #fff !important;
    background: #ef3136 !important;
    font: 700 7px/1 Arial,sans-serif !important;
  }

  .provider-filter-row button.active { background: linear-gradient(#ffe91d,#ffbd00) !important; color: #111 !important; }
  .provider-filter-row .provider-top-game { width: 100% !important; height: 31px !important; border-radius: 5px 5px 1px 1px !important; object-fit: cover !important; }
  .provider-filter-row .provider-top-game.is-image-fallback { padding: 4px !important; background: #174d47 !important; object-fit: contain !important; }
  .provider-filter-row span { display: grid !important; place-items: center !important; width: 100% !important; height: 19px !important; overflow: hidden !important; }
  .provider-filter-row .provider-tile-logo { width: auto !important; max-width: 82% !important; height: 16px !important; object-fit: contain !important; }
  .provider-filter-row span b { overflow: hidden !important; font-size: 8px !important; white-space: nowrap !important; text-overflow: ellipsis !important; }
  .provider-filter-row em { display: none !important; }

  .m9-category-page { min-height: 500px !important; }

  .m9-casino-page {
    padding: 12px 4px 0 !important;
  }

  .m9-casino-feature {
    display: block !important;
    width: 100% !important;
    height: 145px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 2px solid #10231f !important;
    border-radius: 10px !important;
    background: #101010 !important;
  }

  .m9-casino-feature img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

  .m9-casino-provider-grid {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 5px !important;
    margin-top: 7px !important;
  }

  .m9-casino-provider-grid button {
    display: block !important;
    height: 145px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 2px solid #10231f !important;
    border-radius: 9px !important;
    background: #101010 !important;
  }

  .m9-casino-provider-grid > button > img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

  .bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 50% !important;
    z-index: 3000 !important;
    display: grid !important;
    grid-template-columns: repeat(3,1fr) !important;
    width: min(100%,390px) !important;
    min-height: var(--m9-bottom) !important;
    max-height: var(--m9-bottom) !important;
    height: var(--m9-bottom) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    background: linear-gradient(#258b7c,#075e55) !important;
    transform: translateX(-50%) !important;
  }

  .bottom-nav button {
    display: grid !important;
    grid-template-rows: 28px 14px !important;
    place-items: center !important;
    min-width: 0 !important;
    min-height: var(--m9-bottom) !important;
    max-height: var(--m9-bottom) !important;
    height: var(--m9-bottom) !important;
    padding: 2px !important;
    color: #fff !important;
    background: transparent !important;
  }

  .bottom-nav button::before { width: 25px !important; height: 25px !important; background-size: contain !important; }
  .bottom-nav button::after { font-size: 10px !important; }
  .bottom-nav button[data-page="promotion"]::after { content: "Promotion" !important; }
  .bottom-nav button[data-page="cashin"]::after { content: "ငွေသွင်း" !important; }
  .bottom-nav button[data-page="messages"]::after { content: "Messages" !important; }

  body.modal-open .bottom-nav,
  body.drawer-open .bottom-nav,
  body.modal-open .game-tabs,
  body.drawer-open .game-tabs {
    display: none !important;
  }

  .game-tabs {
    pointer-events: auto !important;
  }

  .game-tabs > .game-tab {
    pointer-events: auto !important;
  }

  .side-drawer {
    position: fixed !important;
    top: 94px !important;
    left: calc(50% - min(50vw,195px) + 10px) !important;
    bottom: auto !important;
    z-index: 5100 !important;
    display: grid !important;
    align-content: start !important;
    gap: 6px !important;
    width: 273px !important;
    max-height: calc(100vh - 105px) !important;
    padding: 8px 10px 10px !important;
    overflow-y: auto !important;
    border: 1px solid #00e6cf !important;
    border-radius: 0 0 7px 7px !important;
    background: #248776 !important;
  }

  .drawer-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 5000 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: rgba(0,0,0,.58) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    backdrop-filter: blur(3px) !important;
  }
  .drawer-backdrop[hidden] { display: none !important; }

  .side-drawer[hidden] { display: none !important; }
  .drawer-language { display: flex !important; justify-content: center !important; gap: 6px !important; height: 31px !important; color: #00ffe4 !important; background: transparent !important; }
  .drawer-language-list { display: grid !important; grid-template-columns: repeat(2,1fr) !important; gap: 4px !important; }
  .drawer-language-list[hidden] { display: none !important; }
  .drawer-language-list button { height: 32px !important; border-radius: 6px !important; color: #fff !important; background: #08685f !important; }

  .drawer-head { justify-content: center !important; height: 88px !important; }
  .drawer-head img { width: 76px !important; height: 76px !important; border-radius: 12px !important; object-fit: contain !important; }
  .drawer-head .modal-close { display: none !important; }
  .side-drawer .member-card { display: none !important; }

  .drawer-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 54px !important;
    padding: 7px 14px !important;
    border: 0 !important;
    border-radius: 11px !important;
    color: #00ffe4 !important;
    background: #075e56 !important;
    font-family: "Noto Sans Myanmar", "Myanmar Text", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(0,255,228,.18) !important;
  }

  .drawer-link[hidden] { display: none !important; }
  .drawer-link span { flex: 0 0 20px !important; width: 20px !important; text-align: center !important; pointer-events: none !important; }
  .drawer-link b { margin-left: auto !important; pointer-events: none !important; }
  .drawer-link:active { transform: translateY(1px) !important; background: #064f48 !important; }
  .drawer-partners { display: grid !important; grid-template-columns: repeat(2,1fr) !important; gap: 5px !important; padding: 5px !important; border-radius: 8px !important; background: rgba(0,0,0,.15) !important; }
  .drawer-partners[hidden] { display: none !important; }
  .drawer-partners button { display: grid !important; place-items: center !important; height: 45px !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
  .drawer-partners img { width: auto !important; max-width: 100% !important; height: 45px !important; aspect-ratio: 2 / 1 !important; object-fit: contain !important; }

  .modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 6000 !important;
    display: grid !important;
    place-items: center !important;
    padding: 18px !important;
    background: rgba(0,0,0,.7) !important;
  }

  .modal[hidden] { display: none !important; }

  .modal-box {
    position: relative !important;
    width: min(100%,350px) !important;
    max-height: calc(100vh - 36px) !important;
    padding: 20px !important;
    overflow-y: auto !important;
    border: 2px solid #49665f !important;
    border-radius: 9px !important;
    color: #ccc !important;
    background: #202020 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.55) !important;
  }

  .game-launch {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    width: min(100%,338px) !important;
    padding: 18px !important;
  }

  .game-launch .modal-close {
    top: 18px !important;
    right: 18px !important;
    z-index: 3 !important;
    width: 32px !important;
    height: 32px !important;
    color: #fff !important;
    background: transparent !important;
    font-size: 27px !important;
    font-weight: 900 !important;
  }

  .game-launch .launch-art {
    width: 200px !important;
    height: 200px !important;
    margin: 0 auto 12px !important;
    border-radius: 13px !important;
    object-fit: contain !important;
  }

  .game-launch .launch-copy {
    display: grid !important;
    gap: 7px !important;
  }

  .game-launch .launch-provider {
    display: flex !important;
    align-items: center !important;
    width: 88px !important;
    height: 50px !important;
    margin: 0 !important;
  }

  .game-launch .launch-provider img {
    width: auto !important;
    max-width: 88px !important;
    height: 45px !important;
    object-fit: contain !important;
  }

  .game-launch .launch-provider .provider-wordmark {
    width: auto !important;
    max-width: 88px !important;
    color: #f2c837 !important;
    font-size: 18px !important;
  }

  .game-launch h2 { color: #d7d7d7 !important; font-size: 23px !important; }
  .game-launch p { color: #d7d7d7 !important; font-size: 15px !important; }
  .game-launch .submit-btn { margin-top: 19px !important; }
  .game-launch .ghost-btn { height: 40px !important; border-color: #4b4b4b !important; border-radius: 9px !important; background: #303030 !important; }

  .detail-modal.is-bonus-event {
    display: block !important;
    padding: 0 !important;
    overflow-y: auto !important;
    background: rgba(0,0,0,.82) !important;
  }

  .m9-detail-box.m9-bonus-event-box {
    width: min(100%,390px) !important;
    min-height: 100vh !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 0 12px 68px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #fff !important;
    background:
      radial-gradient(circle at 92% 35%,rgba(244,217,38,.26),transparent 28%),
      #0b3d37 url("assets/m9/bg.png") center top / cover fixed !important;
  }

  .m9-bonus-event-detail { display: grid !important; gap: 12px !important; }
  .m9-bonus-page-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    display: grid !important;
    grid-template-columns: 34px 54px minmax(0,1fr) !important;
    grid-template-rows: 28px 25px !important;
    align-items: center !important;
    min-height: 64px !important;
    margin: 0 -12px !important;
    padding: 5px 12px !important;
    border-bottom: 2px solid #d9b613 !important;
    color: #f7dc86 !important;
    background: linear-gradient(90deg,#432b0b,#785408 64%,#ab920c) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,.35) !important;
  }
  .m9-bonus-page-head .m9-bonus-back { grid-row: 1/3 !important; height: 44px !important; color: #fff !important; background: transparent !important; font-size: 38px !important; }
  .m9-bonus-page-head > img { grid-row: 1/3 !important; width: 50px !important; height: 44px !important; object-fit: contain !important; }
  .m9-bonus-page-head > div { display: grid !important; align-self: end !important; }
  .m9-bonus-page-head small { font-size: 9px !important; }
  .m9-bonus-page-head strong { overflow: hidden !important; font: italic 700 18px/1 Georgia,serif !important; white-space: nowrap !important; }
  .m9-bonus-page-head time { grid-column: 3 !important; justify-self: end !important; padding: 3px 6px !important; border-radius: 3px !important; color: #111 !important; background: #e2c21d !important; font: 9px/1 monospace !important; }

  .m9-bonus-hero {
    display: grid !important;
    place-items: center !important;
    min-height: 170px !important;
    padding: 18px 15px !important;
    border: 2px solid rgba(239,203,51,.65) !important;
    border-radius: 8px !important;
    text-align: center !important;
    background: linear-gradient(145deg,rgba(65,32,5,.96),rgba(153,101,5,.88) 55%,rgba(46,22,4,.96)) !important;
  }
  .m9-bonus-hero span { font-size: 10px !important; color: #f5d983 !important; }
  .m9-bonus-hero h2 { margin: 4px 0 0 !important; color: #fff0a5 !important; font: italic 900 27px/1 Georgia,serif !important; }
  .m9-bonus-hero strong { color: #ffd72e !important; font-size: 28px !important; }
  .m9-bonus-hero p { margin: 4px 0 0 !important; font-size: 11px !important; }

  .m9-bonus-summary { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 6px !important; }
  .m9-bonus-summary article { display: grid !important; gap: 4px !important; min-height: 62px !important; padding: 8px 4px !important; border: 1px solid rgba(245,211,81,.45) !important; border-radius: 7px !important; text-align: center !important; background: rgba(0,34,30,.82) !important; }
  .m9-bonus-summary small { color: #b9c8c1 !important; font-size: 8px !important; }
  .m9-bonus-summary b { color: #ffd719 !important; font-size: 13px !important; }
  .m9-bonus-progress { position: relative !important; height: 28px !important; overflow: hidden !important; border: 1px solid #c4a624 !important; border-radius: 14px !important; background: #152e2a !important; }
  .m9-bonus-progress span { position: absolute !important; inset: 0 auto 0 0 !important; background: linear-gradient(90deg,#9a6604,#f4ce27) !important; }
  .m9-bonus-progress b { position: relative !important; z-index: 1 !important; display: grid !important; place-items: center !important; height: 100% !important; font-size: 10px !important; }
  .m9-bonus-title { display: grid !important; grid-template-columns: auto 1fr !important; align-items: center !important; gap: 8px !important; color: #ffd719 !important; }
  .m9-bonus-title span { height: 1px !important; background: #d2b824 !important; }
  .m9-bonus-game-grid { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 8px !important; overflow: visible !important; }
  .m9-bonus-rules { padding: 10px !important; border: 1px solid rgba(255,215,25,.4) !important; border-radius: 7px !important; background: rgba(1,45,39,.86) !important; }
  .m9-bonus-rules h3 { margin: 0 0 5px !important; color: #ffd719 !important; }
  .m9-bonus-rules p { margin: 0 !important; color: #ddd !important; font-size: 11px !important; line-height: 1.5 !important; }

  .auth-box {
    display: block !important;
    height: 432px !important;
    min-height: 432px !important;
    max-height: 432px !important;
    padding: 144px 20px 64px !important;
    overflow: hidden !important;
  }
  .auth-box > .modal-close {
    top: 10px !important;
    right: 10px !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 27px !important;
  }
  .auth-language { position: absolute !important; top: 10px !important; left: 22px !important; }
  .auth-language button { color: #fff !important; background: transparent !important; font-size: 16px !important; }
  .auth-box .modal-logo {
    position: absolute !important;
    top: 64px !important;
    left: 50% !important;
    display: block !important;
    width: 78px !important;
    height: 78px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    object-fit: cover !important;
    transform: translateX(-50%) !important;
  }
  .auth-box .modal-tabs { display: none !important; }
  .modal-tabs button { flex: 1 !important; height: 34px !important; color: #aaa !important; background: #151515 !important; }
  .modal-tabs button.active { color: #fff !important; background: var(--m9-green) !important; }
  .auth-pane { position: relative !important; display: grid !important; gap: 10px !important; }
  .auth-pane[hidden] { display: none !important; }
  .auth-pane label { display: grid !important; gap: 6px !important; color: #aaa !important; font-size: 12px !important; line-height: 14px !important; }
  .auth-pane input:not([type="checkbox"]) { width: 100% !important; height: 50px !important; padding: 0 12px !important; border: 0 !important; border-radius: 8px !important; color: #fff !important; background: #101010 !important; font-size: 16px !important; }
  .auth-pane label.remember-row {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
  }
  .remember-row span { padding: 5px 8px !important; border-radius: 4px !important; color: #ddd !important; background: #424242 !important; font-weight: 500 !important; }
  .auth-pane .remember-row input[type="checkbox"] {
    appearance: none !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    border: 1px solid #777 !important;
    border-radius: 50% !important;
    background: #111 !important;
  }
  .auth-pane .remember-row input[type="checkbox"]:checked::after { content: "\2713" !important; display: grid !important; place-items: center !important; width: 100% !important; height: 100% !important; color: #36d4bd !important; font-size: 20px !important; }
  .auth-box .compatibility { position: absolute !important; right: 0 !important; bottom: 0 !important; left: 0 !important; margin: 0 !important; }
  .auth-box .submit-btn { height: 47px !important; min-height: 47px !important; margin-top: 0 !important; font-size: 20px !important; }
  .auth-box .auth-status { position: absolute !important; right: 20px !important; bottom: 51px !important; left: 20px !important; min-height: 0 !important; margin: 0 !important; text-align: center !important; }
  .auth-box .auth-status:empty { display: none !important; }
  .submit-btn { min-height: 47px !important; border: 0 !important; border-radius: 8px !important; color: #fff !important; background: linear-gradient(#2aa995,#08776a) !important; font-size: 20px !important; font-weight: 700 !important; }
  .compatibility { margin: 14px -20px -20px !important; padding: 12px !important; text-align: center !important; border-top: 1px solid #444 !important; font-size: 12px !important; }

  .m9-announcement-box { width: 347px !important; max-height: calc(100vh - 44px) !important; padding: 54px 0 0 !important; overflow: hidden !important; color: #222 !important; background: #f2f2f2 !important; }
  .m9-announcement-box .announcement-read { position: absolute !important; top: 7px !important; left: 7px !important; display: flex !important; align-items: center !important; gap: 5px !important; padding: 8px 12px !important; border-radius: 20px !important; color: #fff !important; background: #050505 !important; }
  .m9-announcement-box .modal-close { top: 7px !important; right: 7px !important; border-radius: 50% !important; background: #4f5364 !important; }
  .m9-announcement-box h2 { margin: -42px 50px 8px !important; text-align: center !important; font-size: 17px !important; }
  .m9-announcement-box img { display: block !important; width: 100% !important; max-height: calc(100vh - 110px) !important; object-fit: cover !important; object-position: top !important; }
  .m9-announcement-box > .submit-btn { display: none !important; }

  .m9-subpage-head {
    display: grid !important;
    grid-template-columns: 36px 1fr 36px !important;
    align-items: center !important;
    min-height: 45px !important;
    margin-bottom: 8px !important;
    color: #fff !important;
    background: #263044 !important;
  }

  .m9-subpage-head button { color: #fff !important; background: transparent !important; font-size: 28px !important; }
  .m9-subpage-head h1 { margin: 0 !important; text-align: center !important; font-size: 18px !important; }

  .m9-load-more {
    display: grid !important;
    place-items: center !important;
    width: 180px !important;
    min-height: 42px !important;
    margin: 14px auto 4px !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    border-radius: 8px !important;
    color: #fff !important;
    background: linear-gradient(#2a9b8a,#087266) !important;
    font-weight: 700 !important;
  }
  .m9-load-more small { color: rgba(255,255,255,.75) !important; font-size: 10px !important; }

  .m9-subtabs {
    display: grid !important;
    grid-template-columns: repeat(3,1fr) !important;
    gap: 4px !important;
    width: 100% !important;
    margin-bottom: 8px !important;
    padding: 4px !important;
    border-radius: 9px !important;
    background: #174f48 !important;
  }

  .m9-subtabs button { height: 38px !important; border-radius: 7px !important; color: #fff !important; background: #0b675c !important; }
  .m9-subtabs button.active { color: #111 !important; background: var(--m9-yellow) !important; }

  .view-head,
  .banking-layout,
  .table-card,
  .message-list,
  .profile-grid,
  .promo-grid,
  .support-grid {
    width: 100% !important;
    margin: 0 0 8px !important;
    padding: 10px !important;
  }

  .view-head { border-radius: 8px !important; background: rgba(7,89,79,.9) !important; }
  .view-head h1 { font-size: 18px !important; }
  .view-head p { font-size: 11px !important; }
  .banking-layout,.table-card { border-radius: 8px !important; background: rgba(7,89,79,.9) !important; }
  .banking-layout input,.banking-layout select { color: #fff !important; background: #0a3935 !important; }
  .finance-method { min-height: 58px !important; }
  .promo-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 9px !important; }
  .promo-box { display: grid !important; grid-template-columns: 94px 1fr auto !important; min-height: 92px !important; padding: 7px !important; }
  .promo-box > img { grid-row: 1 / span 3 !important; width: 94px !important; height: 76px !important; border-radius: 6px !important; object-fit: cover !important; }
  .promo-box strong { font-size: 15px !important; }
  .promo-box p { overflow: hidden !important; font-size: 11px !important; white-space: nowrap !important; text-overflow: ellipsis !important; }
  .promo-box button { grid-column: 3 !important; grid-row: 1 / span 3 !important; align-self: center !important; }
  .profile-grid { display: grid !important; grid-template-columns: repeat(2,1fr) !important; gap: 7px !important; }
  .profile-grid article { min-height: 75px !important; padding: 10px !important; }
  .m9-account-panel { display: grid !important; gap: 10px !important; padding: 12px !important; border-radius: 8px !important; background: rgba(7,89,79,.9) !important; }
  .m9-account-panel label { display: grid !important; gap: 5px !important; }
  .m9-account-panel input { height: 44px !important; padding: 0 10px !important; color: #fff !important; background: #102b28 !important; }
  .m9-empty-state { min-height: 360px !important; padding-top: 90px !important; text-align: center !important; color: rgba(255,255,255,.6) !important; }
}

@media (min-width: 521px) {
  .page-web { width: 390px !important; }
}

/* Authenticated provider list: matches M9's same-origin game-list frame. */
body.m9-provider-view {
  background: #17332f !important;
}

body.m9-provider-view .download-strip,
body.m9-provider-view .welcome-strip,
body.m9-provider-view .page-header,
body.m9-provider-view .m9-reference-menu,
body.m9-provider-view #referenceLogin,
body.m9-provider-view #referenceRegister,
body.m9-provider-view .m9-mobile-close,
body.m9-provider-view .banner-row,
body.m9-provider-view .m9-account-strip,
body.m9-provider-view .game-tabs,
body.m9-provider-view .feature-strip,
body.m9-provider-view .float-check,
body.m9-provider-view .right-tools,
body.m9-provider-view .bottom-nav {
  display: none !important;
}

body.m9-provider-view .page-web {
  min-height: 100vh !important;
  padding: 0 !important;
  background: #17332f !important;
}

body.m9-provider-view .page-content,
body.m9-provider-view .view-shell {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.m9-provider-page {
  min-height: 100vh;
  color: #fff;
  background: #17332f;
}

.m9-provider-head {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 104px;
  align-items: center;
  width: 100%;
  height: 45px;
  padding: 0 7px 0 5px;
  background: linear-gradient(180deg, #495064 0%, #303544 100%);
  box-shadow: none;
}

.m9-provider-head > button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 42px;
  padding: 0 0 5px;
  border: 0;
  color: #d8deed;
  background: transparent;
  font: 58px/1 Arial, sans-serif;
}

.m9-provider-head > div {
  min-width: 0;
  padding-left: 4px;
  line-height: 1.08;
}

.m9-provider-head strong {
  display: block;
  overflow: hidden;
  color: #fff;
  font: 16px/1.05 Georgia, serif;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.m9-provider-head small {
  display: block;
  overflow: hidden;
  margin-top: 5px;
  color: #bdc0cb;
  font: 12px/1 Arial, sans-serif;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.m9-provider-head > b {
  justify-self: end;
  min-width: 83px;
  padding: 8px 9px;
  border: 1px solid #e7bd48;
  border-radius: 24px;
  color: #fff;
  font: 13px/1 Arial, sans-serif;
  text-align: center;
  white-space: nowrap;
}

.m9-provider-status {
  position: relative;
  height: 85px;
  background: #17332f;
}

.m9-provider-status::after {
  content: "";
  position: absolute;
  right: 51px;
  bottom: 41px;
  width: 5px;
  height: 10px;
  background: #61d8e6;
  box-shadow: 8px -3px 0 #61d8e6, 16px 1px 0 #61d8e6;
}

.m9-provider-status i { display: none; }

.m9-provider-game-grid {
  display: grid;
  grid-template-columns: repeat(3, 31%);
  justify-content: center;
  gap: 20px 1.282%;
  width: 100%;
  padding: 12px 0 28px;
  background: #17332f;
}

.m9-provider-game-card {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  overflow: visible;
}

.m9-provider-game-card > button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 3.375px;
  border: 0;
  border-radius: 8px;
  background: #080808;
  box-shadow: 0 2px 0 #292d35;
}

.m9-provider-game-card img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
  object-fit: cover;
  background: linear-gradient(110deg, #0b0b0b 20%, #222 45%, #0b0b0b 70%);
}

.m9-provider-jackpot,
.m9-provider-hot,
.m9-provider-new {
  position: absolute;
  z-index: 3;
  display: block;
  color: #fff;
  font-family: Arial, sans-serif;
  font-weight: 900;
  pointer-events: none;
}

.m9-provider-jackpot {
  top: -14px;
  left: 50%;
  padding: 1px 7px;
  border-radius: 3px 3px 0 0;
  background: #05090a;
  font-size: 12px;
  font-style: italic;
  text-shadow: 0 1px 1px #4fc7ff;
  transform: translateX(-50%);
}

.m9-provider-hot {
  top: 22px;
  left: -5px;
  padding: 3px 5px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #e82424;
  font-size: 10px;
  transform: rotate(-9deg);
}

.m9-provider-new {
  top: 45px;
  left: -4px;
  padding: 3px 5px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #13aa89;
  font-size: 9px;
  transform: rotate(-9deg);
}

/* The supplied M9 logo is a transparent cutout, so every compact logo slot
   keeps the full mark visible instead of cropping it like the old JPEG. */
.app-pill img,
.drawer-head img,
.auth-box .modal-logo,
.download-card img {
  object-fit: contain !important;
  background: transparent !important;
}

@media (max-width: 520px) {
  .view-shell > .home-footer,
  .home-lobby > .home-footer {
    width: calc(100% + var(--m9-rail) + 3px) !important;
    max-width: none !important;
    margin: 12px 0 0 calc(var(--m9-rail) * -1) !important;
    padding: 28px 18px 108px !important;
    box-sizing: border-box !important;
    color: rgba(255,255,255,.68) !important;
    text-align: center !important;
  }

  .home-footer .partner-logo-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--logo-cols), minmax(0,1fr)) !important;
    align-items: center !important;
    gap: 10px 12px !important;
    width: 100% !important;
    max-width: 354px !important;
    margin: 0 auto 10px !important;
  }

  .home-footer .partner-logo-grid img {
    display: block !important;
    width: 100% !important;
    height: 27px !important;
    object-fit: contain !important;
  }

  .home-footer .bank-logo-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 18px !important;
    margin: 34px 0 25px !important;
    color: rgba(255,255,255,.76) !important;
    font-size: 13px !important;
  }

  .home-footer p {
    max-width: 360px !important;
    margin: 14px auto !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  .home-footer .browser-row { margin-top: 34px !important; }
  .home-footer .responsible-row { display: flex !important; justify-content: center !important; gap: 18px !important; color: #d8c089 !important; }
}

/* Buffalo1996 additions keep the original M9 shell while exposing register and chat. */
#referenceRegister {
  position: fixed !important;
  top: 104px !important;
  right: calc(50% - min(50vw, 195px) + 84px) !important;
  z-index: 2500 !important;
  display: grid !important;
  place-items: center !important;
  width: 66px !important;
  height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 7px !important;
  color: #fff !important;
  background: linear-gradient(180deg,#d1ab28,#8f6500) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,.35) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

body.m9-authenticated #referenceRegister,
#referenceRegister[hidden] { display: none !important; }

.banner-card.main-banner { position: relative !important; overflow: hidden !important; }
.banner-card.main-banner #mainBannerImage { transition: opacity .16s ease !important; }
.banner-card.main-banner #mainBannerImage.is-changing { opacity: .25 !important; }
.banner-dots {
  position: absolute !important;
  right: 10px !important;
  bottom: 6px !important;
  z-index: 2 !important;
  display: flex !important;
  gap: 5px !important;
  width: auto !important;
  height: auto !important;
}
.banner-dots i {
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.55) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.5) !important;
}
.banner-dots i.active { width: 15px !important; border-radius: 5px !important; background: #fff !important; }

/* Original M9 provider tile: game art left, provider mark right, name below. */
.provider-filter-row button {
  grid-template-columns: 34px minmax(0,1fr) !important;
  grid-template-rows: 34px 16px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  padding: 0 !important;
}
.provider-filter-row .provider-top-game {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 5px 1px 1px 1px !important;
}
.provider-filter-row span {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  display: grid !important;
  grid-template-rows: 34px 16px !important;
  width: 100% !important;
  height: 50px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.provider-filter-row .provider-tile-logo {
  align-self: center !important;
  justify-self: center !important;
  width: 31px !important;
  max-width: 94% !important;
  height: 29px !important;
  object-fit: contain !important;
}
.provider-filter-row .provider-logo-fallback {
  align-self: center !important;
  justify-self: center !important;
  color: #f0ca31 !important;
  font: 900 12px/1 Arial,sans-serif !important;
}
.provider-filter-row span b {
  grid-row: 2 !important;
  align-self: center !important;
  justify-self: center !important;
  max-width: 100% !important;
  padding: 0 2px !important;
  color: rgba(255,255,255,.82) !important;
  font-size: 7px !important;
  line-height: 12px !important;
}
.provider-filter-row button.active span b { color: #342300 !important; }

.auth-switch {
  width: 100% !important;
  min-height: 30px !important;
  border: 0 !important;
  color: #3bd8c0 !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.auth-modal.register-mode .auth-box {
  height: 530px !important;
  min-height: 0 !important;
  max-height: calc(100vh - 24px) !important;
  overflow-y: auto !important;
}

.m9-announcement-box .announcement-art {
  position: relative !important;
  width: 347px !important;
  height: min(559px, calc(100vh - 110px)) !important;
  overflow: hidden !important;
  background: #13072a !important;
}
.m9-announcement-box .announcement-art img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 390px !important;
  max-width: none !important;
  height: 844px !important;
  max-height: none !important;
  object-fit: fill !important;
  transform: translate(-22px,-219px) !important;
}

.bottom-nav button[data-open-chat]::before {
  content: "\2709" !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  font-size: 29px !important;
  line-height: 1 !important;
}
.bottom-nav button[data-open-chat]::after { content: "Chat" !important; }

.detail-modal.is-chat .m9-detail-box {
  width: min(360px,calc(100% - 20px)) !important;
  height: min(650px,calc(100vh - 34px)) !important;
  max-height: calc(100vh - 34px) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(59,216,192,.5) !important;
  border-radius: 8px !important;
  color: #fff !important;
  background: #102c28 !important;
}
.detail-modal.is-chat .m9-detail-box > .modal-close {
  top: 8px !important;
  right: 8px !important;
  z-index: 4 !important;
  color: #fff !important;
  background: rgba(0,0,0,.28) !important;
}
.chat-panel { display: grid !important; grid-template-rows: 58px minmax(0,1fr) 58px 20px !important; height: 100% !important; }
.chat-panel > header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 48px 8px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,.13) !important;
  background: linear-gradient(#248f80,#087166) !important;
}
.chat-panel h2 { margin: 0 !important; font-size: 18px !important; }
.chat-panel header small { color: rgba(255,255,255,.72) !important; font-size: 10px !important; }
.chat-online { color: #bfffe9 !important; font-size: 10px !important; }
.chat-online::before { content: "" !important; display: inline-block !important; width: 7px !important; height: 7px !important; margin-right: 4px !important; border-radius: 50% !important; background: #38e793 !important; }
.chat-messages {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-height: 0 !important;
  padding: 12px !important;
  overflow-y: auto !important;
  background: linear-gradient(rgba(6,42,37,.93),rgba(9,54,48,.96)),url("assets/m9/bg.png") center/cover !important;
}
.chat-message {
  align-self: flex-start !important;
  width: fit-content !important;
  max-width: 82% !important;
  padding: 7px 9px 4px !important;
  border-radius: 9px 9px 9px 2px !important;
  background: #244c47 !important;
  box-shadow: 0 2px 5px rgba(0,0,0,.2) !important;
}
.chat-message.mine { align-self: flex-end !important; border-radius: 9px 9px 2px 9px !important; background: #147e70 !important; }
.chat-message p { margin: 0 !important; color: #fff !important; font-size: 13px !important; line-height: 1.35 !important; white-space: pre-wrap !important; overflow-wrap: anywhere !important; }
.chat-message a { display: block !important; }
.chat-message img { display: block !important; width: auto !important; max-width: 100% !important; max-height: 240px !important; border-radius: 6px !important; object-fit: contain !important; }
.chat-message time { display: block !important; margin-top: 3px !important; color: rgba(255,255,255,.58) !important; text-align: right !important; font-size: 8px !important; }
.chat-empty { margin: auto !important; color: rgba(255,255,255,.65) !important; text-align: center !important; font-size: 12px !important; }
.chat-empty.error,.chat-status { color: #ffb0a8 !important; }
.chat-form { display: grid !important; grid-template-columns: 38px minmax(0,1fr) 55px !important; gap: 6px !important; align-items: center !important; padding: 7px !important; border-top: 1px solid rgba(255,255,255,.13) !important; background: #0a544b !important; }
.chat-form input[name="message"] { width: 100% !important; height: 40px !important; padding: 0 10px !important; border: 0 !important; border-radius: 7px !important; color: #fff !important; background: rgba(0,0,0,.28) !important; }
.chat-photo { display: grid !important; place-items: center !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; color: #fff !important; background: #238e7f !important; font-size: 27px !important; cursor: pointer !important; }
.chat-photo input { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.chat-form button { height: 38px !important; padding: 0 !important; border: 0 !important; border-radius: 7px !important; color: #fff !important; background: #c39a1b !important; font-size: 12px !important; font-weight: 700 !important; }
.chat-form button:disabled { opacity: .55 !important; }
.chat-status { min-height: 20px !important; margin: 0 !important; padding: 2px 10px !important; background: #0a544b !important; font-size: 10px !important; }
.chat-login-required { display: grid !important; align-content: center !important; gap: 12px !important; height: 100% !important; padding: 28px !important; text-align: center !important; }
.chat-login-required h2,.chat-login-required p { margin: 0 !important; }

/* Immersive M9 registration screen. Login keeps the original M9 treatment. */
.auth-modal.register-mode {
  padding: 12px !important;
  background: rgba(0,10,42,.78) !important;
  backdrop-filter: blur(8px) !important;
}
.auth-modal.register-mode .auth-box {
  display: block !important;
  width: min(430px,100%) !important;
  max-width: 430px !important;
  height: min(844px,calc(100dvh - 24px)) !important;
  min-height: 620px !important;
  max-height: calc(100dvh - 24px) !important;
  padding: 220px 18px 22px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 1px solid rgba(115,222,255,.38) !important;
  border-radius: 20px !important;
  color: #11253b !important;
  background:
    linear-gradient(180deg,rgba(0,15,67,.08),rgba(0,21,74,.3)),
    url("assets/m9/register-bg-v1.png") center/cover no-repeat !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.55) !important;
}
.auth-modal.register-mode .auth-language,
.auth-modal.register-mode .modal-tabs,
.auth-modal.register-mode .compatibility { display: none !important; }
.auth-modal.register-mode .auth-box > .modal-close {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  z-index: 4 !important;
  width: 38px !important;
  height: 38px !important;
  color: #fff !important;
  border-radius: 50% !important;
  background: rgba(3,26,76,.5) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.28) !important;
  font: 400 32px/34px Arial,sans-serif !important;
}
.auth-modal.register-mode .auth-box .modal-logo {
  position: absolute !important;
  top: 48px !important;
  left: 50% !important;
  width: 154px !important;
  height: 112px !important;
  margin: 0 !important;
  object-fit: contain !important;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)) !important;
  transform: translateX(-50%) !important;
}
.auth-modal.register-mode .auth-pane[data-pane="register"] {
  display: grid !important;
  gap: 14px !important;
  width: 100% !important;
  padding: 28px 22px 24px !important;
  border-radius: 20px !important;
  color: #16314c !important;
  background: rgba(250,249,255,.96) !important;
  box-shadow: 0 16px 42px rgba(0,14,54,.34) !important;
}
.auth-modal.register-mode .register-title {
  margin: 0 0 12px !important;
  color: #16ace0 !important;
  text-align: center !important;
  font-size: 29px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}
.auth-modal.register-mode .register-field {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0,1fr) 34px !important;
  align-items: center !important;
  gap: 8px !important;
  height: 56px !important;
  padding: 0 10px 0 12px !important;
  border: 1px solid rgba(21,75,115,.06) !important;
  border-radius: 9px !important;
  color: #59636c !important;
  background: #fff !important;
  box-shadow: 0 5px 14px rgba(26,89,129,.05) !important;
}
.auth-modal.register-mode .register-field input {
  width: 100% !important;
  height: 54px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: #23313c !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}
.auth-modal.register-mode .register-field input::placeholder { color: #a9afb5 !important; opacity: 1 !important; }
.register-field-icon { position: relative !important; display: block !important; width: 22px !important; height: 22px !important; }
.register-user-icon::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 7px !important;
  width: 8px !important;
  height: 8px !important;
  border: 2px solid #525b64 !important;
  border-radius: 50% !important;
}
.register-user-icon::after {
  content: "" !important;
  position: absolute !important;
  right: 1px !important;
  bottom: 0 !important;
  left: 1px !important;
  height: 9px !important;
  border: 2px solid #525b64 !important;
  border-bottom: 0 !important;
  border-radius: 12px 12px 0 0 !important;
}
.register-lock-icon::before {
  content: "" !important;
  position: absolute !important;
  top: 1px !important;
  left: 5px !important;
  width: 12px !important;
  height: 10px !important;
  border: 2px solid #525b64 !important;
  border-bottom: 0 !important;
  border-radius: 7px 7px 0 0 !important;
}
.register-lock-icon::after {
  content: "" !important;
  position: absolute !important;
  right: 1px !important;
  bottom: 0 !important;
  left: 1px !important;
  height: 13px !important;
  border: 2px solid #525b64 !important;
  border-radius: 2px !important;
}
.auth-modal.register-mode .password-toggle {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  color: #606a74 !important;
  background: transparent !important;
  font-size: 20px !important;
  opacity: .72 !important;
}
.auth-modal.register-mode .password-toggle.is-visible { color: #13aeda !important; opacity: 1 !important; }
.auth-modal.register-mode .register-phone-field {
  grid-template-columns: 27px 39px 1px minmax(0,1fr) !important;
}
.register-country-flag { font-size: 22px !important; line-height: 1 !important; }
.register-country-code { color: #4f5963 !important; font-size: 16px !important; font-weight: 600 !important; }
.register-phone-field > i { display: block !important; width: 1px !important; height: 28px !important; background: #8a9197 !important; }
.auth-modal.register-mode .auth-pane[data-pane="register"] .submit-btn {
  width: 100% !important;
  height: 64px !important;
  min-height: 64px !important;
  margin: 4px 0 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #fff !important;
  background: linear-gradient(180deg,#19c0f2,#12aee2) !important;
  box-shadow: 0 10px 20px rgba(19,174,226,.25) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
}
.auth-modal.register-mode .auth-switch {
  min-height: 34px !important;
  color: #242424 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}
.auth-modal.register-mode .auth-switch b { color: #0ba8dc !important; }
.auth-modal.register-mode .auth-status {
  position: absolute !important;
  right: 38px !important;
  bottom: 28px !important;
  left: 38px !important;
  z-index: 5 !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  color: #fff !important;
  background: rgba(7,27,61,.92) !important;
  text-align: center !important;
  font-size: 12px !important;
}
.auth-modal.register-mode .auth-status:empty { display: none !important; }

@media (max-width:520px) {
  .auth-modal.register-mode { padding: 0 !important; }
  .auth-modal.register-mode .auth-box {
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding: max(210px,25dvh) 14px 22px !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  .auth-modal.register-mode .auth-box .modal-logo { top: 42px !important; width: 146px !important; height: 106px !important; }
  .auth-modal.register-mode .auth-pane[data-pane="register"] { padding: 25px 20px 22px !important; }
}

@media (max-height:700px) {
  .auth-modal.register-mode .auth-box { padding-top: 170px !important; }
  .auth-modal.register-mode .auth-box .modal-logo { top: 30px !important; width: 120px !important; height: 88px !important; }
  .auth-modal.register-mode .auth-pane[data-pane="register"] { gap: 10px !important; padding-top: 20px !important; }
  .auth-modal.register-mode .register-title { margin-bottom: 5px !important; font-size: 24px !important; }
  .auth-modal.register-mode .register-field { height: 50px !important; }
  .auth-modal.register-mode .register-field input { height: 48px !important; }
  .auth-modal.register-mode .auth-pane[data-pane="register"] .submit-btn { height: 54px !important; min-height: 54px !important; }
}