:root{--blue:#08bde8;--blue-dark:#047da7;--navy:#063653;--ice:#effbff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}a{color:inherit}img,video{max-width:100%}button,input,textarea{font:inherit}[hidden]{display:none!important}.static-toast{position:fixed;z-index:180;left:50%;bottom:88px;padding:10px 18px;color:#fff;border-radius:999px;background:#063653;box-shadow:0 10px 28px rgba(0,40,60,.28);font:800 11px/1.2 "Trebuchet MS",sans-serif;transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:.2s}.static-toast.is-visible{transform:translate(-50%,0);opacity:1}

.winnerBoard header,
.railWinners header { position: relative; overflow: hidden; isolation: isolate; }
.winnerBoard header::after,
.railWinners header::after { content: ""; width: 22%; position: absolute; z-index: -1; inset-block: -70%; left: -28%; pointer-events: none; transform: rotate(18deg); background: linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent); animation: winnerHeaderSweep 4.2s ease-in-out infinite; }
.winnerLiveStatus { display: inline-flex; align-items: center; gap: 5px; animation: winnerStatusGlow 1.8s ease-in-out infinite; }
.winnerLiveStatus::before { content: ""; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #35f3ab; box-shadow: 0 0 0 3px rgba(53,243,171,.18); animation: winnerStatusDot 1.8s ease-out infinite; }
.winnerRow.winnerEntering,
.railWinnerRow.winnerEntering { position: relative; z-index: 1; background: linear-gradient(90deg,rgba(19,201,232,.03),rgba(19,201,232,.2),rgba(19,201,232,.03)); animation: winnerFeedIn .72s cubic-bezier(.2,.76,.25,1) both; }
.winnerRow.winnerEntering b,
.railWinnerRow.winnerEntering b { animation: winnerValuePop .72s ease both; }
.winnerRow.winnerEntering em,
.railWinnerRow.winnerEntering em { animation: winnerValuePop .72s .07s ease both; }
@keyframes winnerHeaderSweep { 0%,38% { left: -28%; opacity: 0; } 48% { opacity: .8; } 72%,100% { left: 118%; opacity: 0; } }
@keyframes winnerStatusGlow { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.28); text-shadow: 0 0 9px rgba(255,255,255,.45); } }
@keyframes winnerStatusDot { 0% { box-shadow: 0 0 0 0 rgba(53,243,171,.48); } 100% { box-shadow: 0 0 0 7px rgba(53,243,171,0); } }
@keyframes winnerFeedIn { 0% { opacity: 0; transform: translateY(-11px) scale(.985); } 46% { opacity: 1; transform: translateY(0) scale(1.006); } 100% { opacity: 1; transform: translateY(0) scale(1); background-color: transparent; } }
@keyframes winnerValuePop { 0% { transform: scale(.88); filter: brightness(1); } 52% { transform: scale(1.12); filter: brightness(1.24); } 100% { transform: scale(1); filter: brightness(1); } }
@media (prefers-reduced-motion: reduce) { .winnerBoard header::after,.railWinners header::after,.winnerLiveStatus,.winnerLiveStatus::before,.winnerRow.winnerEntering,.railWinnerRow.winnerEntering,.winnerRow.winnerEntering b,.railWinnerRow.winnerEntering b,.winnerRow.winnerEntering em,.railWinnerRow.winnerEntering em { animation: none !important; } }

.rightPanel,
.rightRail { position: relative; overflow: visible !important; }
.rightBonusFloat { width: clamp(76px,6.1vw,98px); position: absolute; z-index: 12; top: 220px; right: 4px; display: block; overflow: hidden; border: 2px solid rgba(74,224,249,.85); border-radius: 13px; background: #063b68; box-shadow: 0 13px 28px rgba(0,34,58,.35),0 0 18px rgba(19,201,232,.3); transform-origin: center; animation: rightBonusFloat 3.6s ease-in-out infinite; }
.rightBonusFloat::after { content: ""; width: 28%; position: absolute; inset-block: -35%; left: -45%; pointer-events: none; transform: rotate(17deg); background: linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent); animation: rightBonusSweep 3.8s ease-in-out infinite; }
.rightBonusFloat img { width: 100%; aspect-ratio: 2 / 3; display: block; object-fit: cover; }
.rightBonusFloat:hover { animation-play-state: paused; transform: translateY(-3px) scale(1.035); }
@keyframes rightBonusFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes rightBonusSweep { 0%,35% { left: -45%; opacity: 0; } 48% { opacity: .85; } 72%,100% { left: 125%; opacity: 0; } }
@media (max-width: 1180px) { .rightBonusFloat { width: 74px; top: 205px; right: 3px; } }
@media (max-width: 820px) { .rightBonusFloat { display: none; } }
@media (prefers-reduced-motion: reduce) { .rightBonusFloat,.rightBonusFloat::after { animation: none !important; } }

.imageDownloadStrip { min-height: 0 !important; height: auto !important; aspect-ratio: 4.5 / 1; position: relative; display: block !important; overflow: hidden; padding: 0 !important; border: 1px solid rgba(53,216,244,.82) !important; border-radius: 10px !important; background: #031d35 url('/assets/winbox-download-app-strip-v1.jpg') center / cover no-repeat !important; box-shadow: 0 8px 18px rgba(0,37,62,.24),0 0 13px rgba(16,189,224,.16); text-decoration: none; transition: transform .18s ease,box-shadow .18s ease; }
.imageDownloadStrip > * { display: none !important; }
.imageDownloadStrip::after { content: ""; width: 22%; position: absolute; inset-block: -80%; left: -35%; pointer-events: none; transform: rotate(16deg); background: linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent); animation: downloadStripSweep 4.4s ease-in-out infinite; }
.imageDownloadStrip:hover { transform: translateY(-2px); box-shadow: 0 11px 24px rgba(0,37,62,.3),0 0 18px rgba(16,189,224,.24); }
@keyframes downloadStripSweep { 0%,45% { left: -35%; opacity: 0; } 56% { opacity: .8; } 78%,100% { left: 120%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .imageDownloadStrip::after { animation: none !important; } }

/* 2026-08-30 global UX and accessibility pass */
.srOnly {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  position: absolute !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
[hidden] { display: none !important; }
.bottomNav a { min-height: 44px; }
.bottomNav b,.bottomNav small { font-size: 11px !important; line-height: 1.15; }
.footerLinks a { min-height: 44px; font-size: 12px; }
.footerIntro,.footerMeta { font-size: 12px; }
@media (max-width: 900px) {
  .bottomNav b,.bottomNav small { font-size: 10px !important; }
  .footerLinks a { min-height: 46px; font-size: 13px; }
}

/* 20260831 shared site chrome */
.languagePicker { position: relative; }
.languagePicker > button { min-width: 88px; height: 38px; padding: 0 11px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #8edff1; border-radius: 999px; color: #063f59; background: #fff; cursor: pointer; }
.languagePicker button span { font-size: 16px; }
.languagePicker button b { font-size: 10px; }
.languagePicker button i { width: 10px; height: 10px; color: #087fa5; }
.languageMenu { width: 174px; padding: 7px; position: absolute; z-index: 180; top: calc(100% + 6px); right: 0; display: grid; border: 1px solid #8edff1; border-radius: 11px; background: #fff; box-shadow: 0 15px 35px rgba(2,37,56,.2); }
.languageMenu[hidden] { display: none !important; }
.languageMenu a { padding: 9px; display: flex; align-items: center; gap: 9px; border-radius: 7px; color: #063f59; font-size: 10px; text-decoration: none; }
.languageMenu a:hover, .languageMenu .currentLanguage { color: #087fa5; background: #effbfe; }
.sharedMobileMasthead { display: none; }
.sharedFooter { margin: 14px 12px 22px; padding: 18px; border: 1px solid #8edff1; border-radius: 12px; color: #dff8fc; background: #063f59; }
.sharedFooterInner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 14px 28px; }
.sharedFooterBrand { display: inline-flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; }
.sharedFooterBrand img { width: 38px; height: 38px; object-fit: contain; border-radius: 9px; }
.sharedFooterBrand span { display: grid; gap: 2px; }
.sharedFooterBrand strong { font-size: 18px; line-height: 1; }
.sharedFooterBrand small { color: #a9e8f3; font-size: 8px; }
.sharedFooter nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 18px; }
.sharedFooter nav a { color: #e8fbff; font-size: 9px; font-weight: 800; text-decoration: none; }
.sharedFooter p { grid-column: 1 / -1; margin: 0; padding-top: 10px; border-top: 1px solid rgba(196,240,247,.16); color: #9fcbd4; font-size: 8px; }
.sharedFooter p span { float: right; }
.shell > .sharedFooter { margin: 0; padding-bottom: 84px; border-right: 0; border-left: 0; border-radius: 0; }
@media (max-width: 900px) {
  .sharedMobileMasthead { padding: 8px 10px 5px; display: grid; gap: 7px; background: #fff; }
  .mobileDownloadDismiss { width: 1px; height: 1px; position: absolute; opacity: 0; pointer-events: none; }
  .mobileDownloadBar { min-height: 50px; padding: 6px 10px 6px 8px; display: grid; grid-template-columns: minmax(0,1fr) auto 24px; align-items: center; column-gap: 9px; border: 1px solid #d7eef5; border-radius: 12px; background: linear-gradient(105deg,#fff,#f5fcff); box-shadow: 0 7px 20px rgba(0,68,96,.1); }
  .mobileDownloadDismiss:checked + .mobileDownloadBar { display: none !important; }
  .mobileDownloadInfo { min-width: 0; display: flex; align-items: center; gap: 8px; color: #063f59; text-decoration: none; }
  .mobileDownloadInfo img { width: 34px; height: 34px; flex: 0 0 34px; object-fit: cover; border-radius: 10px; }
  .mobileDownloadInfo span { min-width: 0; display: grid; gap: 2px; }
  .mobileDownloadInfo strong, .mobileDownloadInfo small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobileDownloadInfo strong { font-size: 11px; }
  .mobileDownloadInfo small { color: #4d6672; font-size: 8px; }
  .mobileDownloadCta { min-width: 64px; height: 28px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; color: #fff; background: linear-gradient(135deg,#04a5d1,#23d2e7); font-size: 8px; font-weight: 900; text-decoration: none; }
  .mobileDownloadBar label { width: 24px; height: 24px; display: grid; place-items: center; color: #063f59; font-size: 20px; cursor: pointer; }
  .mobileMastheadTop { min-height: 38px; display: flex; align-items: center; gap: 7px; }
  .mobileBrand { margin-right: auto; display: flex; align-items: center; gap: 8px; color: #063f59; text-decoration: none; }
  .mobileBrand img { width: 26px; height: 26px; border-radius: 7px; }
  .mobileBrand strong { font-size: 15px; }
  .currency { min-height: 32px; padding: 0 9px; display: flex; align-items: center; gap: 4px; border: 1px solid #d2e8ee; border-radius: 999px; color: #9d7b16; background: #fffdf3; font-size: 9px; white-space: nowrap; }
  .currency b { color: #3e4f56; }
  .currencyChevron { width: 6px; height: 6px; margin: -3px 1px 0 1px; border-right: 1.5px solid #8d741f; border-bottom: 1.5px solid #8d741f; transform: rotate(45deg); }
  .sharedMobileMasthead .languagePicker > button { min-width: 66px; height: 32px; padding-inline: 7px; gap: 6px; }
  .sharedMobileMasthead .languagePicker button span { font-size: 15px; }
  .sharedMobileMasthead .languageMenu { top: 37px; }
  .mobileHeaderMenu { padding: 0; display: grid; place-items: center; border: 0; background: transparent; }
  .mobileHeaderMenu .hamburger { width: 32px; height: 32px; display: grid; align-content: center; gap: 4px; padding: 0 8px; border-radius: 9px; color: #fff; background: linear-gradient(#17c8ec,#078cad); }
  .mobileHeaderMenu .hamburger i { height: 2px; border-radius: 2px; background: currentColor; }
  .mobileAuthActions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .mobileAuthActions a { height: 38px; padding: 0 12px; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 10px; font-size: 11px; font-weight: 900; text-decoration: none; }
  .mobileAuthActions svg { width: 16px; height: 16px; }
  .mobileLoginAction { color: #057fa6; border: 1.5px solid #0bb9db; background: #fff; }
  .mobileSignupAction { color: #fff; border: 1.5px solid #11b9d7; background: linear-gradient(135deg,#0298c3,#22d3e8); box-shadow: 0 7px 16px rgba(0,166,205,.22); }
  .sharedFooter { margin: 10px 8px 18px; padding: 15px 13px; }
  .sharedFooterInner { grid-template-columns: 1fr; gap: 12px; }
  .sharedFooter nav { justify-content: flex-start; gap: 9px 15px; }
  .sharedFooter p span { float: none; display: block; margin-top: 3px; }
}

/* 20260831 entry promotion popup */
.entryPromo[hidden] { display: none !important; }
.entryPromo { padding: 16px; position: fixed; z-index: 260; inset: 0; display: grid; place-items: center; }
.entryPromoBackdrop { position: absolute; inset: 0; border: 0; background: rgba(0,20,33,.78); backdrop-filter: blur(7px); cursor: pointer; }
.entryPromoCard { width: min(360px,calc(100vw - 28px)); max-height: calc(100svh - 32px); position: relative; z-index: 1; margin: 0; overflow: visible; border: 1px solid rgba(115,225,246,.85); border-radius: 18px; background: #032f49; box-shadow: 0 24px 70px rgba(0,0,0,.48); }
.entryPromoCard > a { display: block; overflow: hidden; border-radius: 17px; }
.entryPromoCard img { width: 100%; max-height: calc(100svh - 32px); height: auto; display: block; object-fit: contain; border-radius: 17px; }
.entryPromoClose { width: 34px; height: 34px; position: absolute; z-index: 2; top: -11px; right: -11px; display: grid; place-items: center; padding: 0; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #063f59; box-shadow: 0 6px 16px rgba(0,0,0,.3); font-size: 21px; line-height: 1; cursor: pointer; }
.entryPromo:not([hidden]) .entryPromoBackdrop { animation: entryPromoFade .24s ease-out both; }
.entryPromo:not([hidden]) .entryPromoCard { animation: entryPromoRise .34s cubic-bezier(.2,.8,.2,1) both; }
@keyframes entryPromoFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes entryPromoRise { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .entryPromo:not([hidden]) .entryPromoBackdrop,
  .entryPromo:not([hidden]) .entryPromoCard { animation: none; }
}
@media (max-width: 430px) {
  .entryPromo { padding: 14px; }
  .entryPromoCard { width: min(330px,calc(100vw - 30px)); max-height: calc(100svh - 30px); border-radius: 16px; }
  .entryPromoCard > a, .entryPromoCard img { border-radius: 15px; }
  .entryPromoCard img { max-height: calc(100svh - 30px); }
  .entryPromoClose { width: 32px; height: 32px; top: -9px; right: -9px; }
}

/* 20260831 floating WINBOX lucky wheel */
.luckyWheelDismiss { width: 1px; height: 1px; position: fixed; opacity: 0; pointer-events: none; }
.luckyWheelWidget { width: clamp(118px,10vw,158px); position: fixed; z-index: 125; left: 10px; bottom: 74px; filter: drop-shadow(0 10px 14px rgba(0,35,66,.28)); }
.luckyWheelWidget > a, .luckyWheelWidget img { width: 100%; display: block; }
.luckyWheelWidget img { height: auto; }
.luckyWheelWidget label { width: 24px; height: 24px; position: absolute; z-index: 2; top: 2px; right: 2px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; background: rgba(4,62,91,.88); box-shadow: 0 4px 10px rgba(0,0,0,.25); font-size: 16px; line-height: 1; cursor: pointer; }
.luckyWheelDismiss:checked + .luckyWheelWidget { display: none !important; }
@media (max-width: 820px) {
  .luckyWheelWidget { width: clamp(94px,24vw,116px); left: 4px; bottom: 76px; }
  .luckyWheelWidget label { width: 21px; height: 21px; top: 0; right: 0; font-size: 14px; }
}

/* 20260831 final shared mobile masthead and navigation */
.mobileBottomNav { display: none !important; }
@media (max-width: 900px) {
  .sharedMobileMasthead {
    min-height: 187px !important;
    padding: 10px 8px 12px !important;
    display: grid !important;
    gap: 9px !important;
    overflow: visible !important;
  }

  .sharedMobileMasthead .mobileDownloadBar {
    min-height: 48px !important;
    margin: 0 0 8px !important;
    padding: 5px 11px 5px 7px !important;
  }

  .sharedMobileMasthead .mobileMastheadTop {
    min-height: 46px !important;
    padding: 5px 7px !important;
    gap: 8px !important;
    border: 1px solid #d7eef5 !important;
    border-radius: 12px !important;
    background: linear-gradient(105deg,#fff,#f7fdff) !important;
  }

  .sharedMobileMasthead .mobileAuthActions {
    height: 40px !important;
    margin: 4px 0 0 !important;
    gap: 8px !important;
  }

  .sharedMobileMasthead .mobileAuthActions a {
    height: 40px !important;
  }

  .bottomNav {
    display: none !important;
  }

  .mobileBottomNav {
    width: 100vw !important;
    height: calc(58px + env(safe-area-inset-bottom)) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    position: fixed !important;
    z-index: 130 !important;
    inset-inline: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5,minmax(0,1fr)) !important;
    border-top: 1px solid #d4e8ed !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 -4px 14px rgba(2,45,63,.12) !important;
  }

  .mobileBottomNav > a {
    min-width: 0 !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    color: #82949b !important;
    text-decoration: none !important;
  }

  .mobileBottomNav small {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  .mobileBottomNav > a > i {
    width: 20px !important;
    height: 20px !important;
    position: relative !important;
    display: block !important;
    border: 1.5px solid currentColor !important;
    border-radius: 5px !important;
  }

  .mobileBottomNav .mobileWinboxButton {
    transform: translateY(-8px) !important;
  }

  .mobileBottomNav .mobileWinboxButton img {
    width: 40px !important;
    height: 40px !important;
    display: block !important;
    object-fit: cover !important;
    border: 4px solid #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 11px rgba(0,139,188,.22) !important;
  }

  .mobileSystemIcon::before { content:""; width:9px; height:9px; position:absolute; left:4px; top:4px; border:1.5px solid currentColor; border-radius:50%; }
  .mobileContactIcon::before,.mobileMeIcon::before { content:""; width:7px; height:7px; position:absolute; left:5px; top:3px; border:1.5px solid currentColor; border-radius:50%; }
  .mobileContactIcon::after,.mobileMeIcon::after { content:""; width:11px; height:5px; position:absolute; left:3px; bottom:2px; border:1.5px solid currentColor; border-radius:7px 7px 2px 2px; }
  .mobileTransactionIcon::before { content:"⇄"; position:absolute; inset:-1px 0 0; display:grid; place-items:center; font-size:14px; font-style:normal; }

  .shell {
    padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
  }
}