/* Main stylesheet loader. Split from legacy monolith without changing cascade order. */
/* admin tab layout fix: no empty slot for regular users, 5th slot only when admin tab is visible */
.bottom-nav.bottom-nav-4,
.redesign-bottom-nav.bottom-nav-4{
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
}

.bottom-nav.bottom-nav-4:has(.tab.admin-only:not([hidden]):not(.hidden):not([style*="display:none"]):not([style*="display: none"])),
.redesign-bottom-nav.bottom-nav-4:has(.tab.admin-only:not([hidden]):not(.hidden):not([style*="display:none"]):not([style*="display: none"])){
  grid-template-columns:repeat(4, minmax(0, 1fr)) auto !important;
}

.bottom-nav.bottom-nav-5,
.redesign-bottom-nav.bottom-nav-5{
  grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
}

.bottom-nav.bottom-nav-5:has(.tab.admin-only:not([hidden]):not(.hidden):not([style*="display:none"]):not([style*="display: none"])),
.redesign-bottom-nav.bottom-nav-5:has(.tab.admin-only:not([hidden]):not(.hidden):not([style*="display:none"]):not([style*="display: none"])){
  grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
}

.bottom-nav.bottom-nav-6,
.redesign-bottom-nav.bottom-nav-6{
  grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
}

.bottom-nav.bottom-nav-6:has(.tab.admin-only:not([hidden]):not(.hidden):not([style*="display:none"]):not([style*="display: none"])),
.redesign-bottom-nav.bottom-nav-6:has(.tab.admin-only:not([hidden]):not(.hidden):not([style*="display:none"]):not([style*="display: none"])){
  grid-template-columns:repeat(7, minmax(0, 1fr)) !important;
}

.bottom-nav.bottom-nav-6 .tab,
.redesign-bottom-nav.bottom-nav-6 .tab{
  min-width:0;
  padding-left:3px;
  padding-right:3px;
}

.bottom-nav.bottom-nav-6 .tab span:last-child,
.redesign-bottom-nav.bottom-nav-6 .tab span:last-child{
  font-size:clamp(9px, 2.25vw, 12px);
}

.app-splash-screen{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  opacity:1;
  visibility:visible;
  transition:opacity .24s ease, visibility .24s ease;
}

.app-splash-screen.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.app-splash-screen__content{
  position:relative;
  width:100vw;
  height:100vh;
  height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#000;
}

.app-splash-screen__loader{
  width:min(220px, 58vw);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.app-splash-screen__spinner{
  width:34px;
  height:34px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.18);
  border-top-color:#fff;
  animation:app-splash-spin .8s linear infinite;
}

.app-splash-screen__text{
  color:rgba(255,255,255,.86);
  font-size:15px;
  font-weight:700;
  line-height:1;
}

.app-splash-screen__bar{
  width:100%;
  height:4px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.14);
}

.app-splash-screen__bar span{
  display:block;
  width:42%;
  height:100%;
  border-radius:inherit;
  background:#fff;
  animation:app-splash-bar 1.05s ease-in-out infinite;
}

@keyframes app-splash-spin{
  to{ transform:rotate(360deg); }
}

@keyframes app-splash-bar{
  0%{ transform:translateX(-110%); }
  100%{ transform:translateX(250%); }
}

/* Stable fullscreen-game paint tree for desktop, iOS and Android. */
#fullscreenGameOverlay,
#fullscreenGameOverlay .fullscreen-game-shell,
#fullscreenGameOverlay .fullscreen-game-shell > .solo-game-panel{
  background-attachment:scroll !important;
}

#fullscreenGameOverlay:not(.hidden) .fullscreen-game-shell,
#fullscreenGameOverlay:not(.hidden) .fullscreen-game-shell > .solo-game-panel.active{
  isolation:isolate;
}

html[data-solo-game="squid"] #fullscreenGameOverlay:not(.hidden) #solo-squid-panel.active{
  display:flex !important;
  flex-direction:column !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior-y:contain !important;
  touch-action:pan-y !important;
}

html[data-solo-game="squid"] #fullscreenGameOverlay:not(.hidden) #solo-squid-panel.active > .squid-shell{
  flex:0 0 auto !important;
  width:100% !important;
  min-height:max-content !important;
}

html[data-solo-game="squid"] #fullscreenGameOverlay:not(.hidden) #solo-squid-panel.active > .squid-shell > *{
  flex-shrink:0 !important;
}

/* Stable fixed-overlay paint tree across the app. */
.toast,
#toast,
.profile-action-modal,
.gift-withdraw-dialog,
#cases-screen .cases-create-overlay,
.cases-nft-overlay,
.cases-open-overlay,
#fullscreenGameOverlay .crash-screen-modal,
#fullscreenGameOverlay .pvp-modal,
#fullscreenGameOverlay .plinko-nft-modal{
  background-attachment:scroll !important;
  isolation:isolate;
}

.toast,
#toast,
.profile-action-modal,
.gift-withdraw-dialog{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Android Telegram WebView needs stricter paint containment for animated modes. */
html.is-tg-android{
  --yak-app-bg-image:url('/static/img/fonyakzen.webp?v=20260605a') !important;
}

html.is-tg-android,
html.is-tg-android body,
html.is-tg-android #fullscreenGameOverlay{
  background-color:#05030d !important;
  background-image:
    radial-gradient(circle at 78% 12%, rgba(42,103,255,.16), transparent 30%),
    radial-gradient(circle at 16% 78%, rgba(151,48,255,.10), transparent 32%),
    linear-gradient(180deg, rgba(4,10,24,.42), rgba(2,5,18,.74)),
    var(--yak-app-bg-image) !important;
  background-attachment:scroll !important;
  background-position:center top, center top, center top, center top !important;
  background-size:auto, auto, auto, cover !important;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat !important;
}

html.is-tg-android .app-shell,
html.is-tg-android .main-layout,
html.is-tg-android .screen,
html.is-tg-android #fullscreenGameOverlay .fullscreen-game-shell,
html.is-tg-android #fullscreenGameOverlay .fullscreen-game-shell > .solo-game-panel{
  background-color:transparent !important;
  background-image:none !important;
  background-attachment:scroll !important;
}

html.is-tg-android #fullscreenGameOverlay:not(.hidden) .fullscreen-game-shell,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .fullscreen-game-shell > .solo-game-panel.active,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .fullscreen-game-shell > .solo-game-panel.active canvas,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .fullscreen-board-card,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .crash-stage-card,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .crash-scene,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .crash-flight-dots,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .crash-plane-art,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .pvp-wheel-board,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .pvp-wheel,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .lucky-wheel-wrap,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .lucky-wheel,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .riskbar-stage,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .riskbar-circle,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .riskbar-ring,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .riskbar-lane,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .mines-board-card,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .mines-board-grid,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .squid-board,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .squid-board-pattern,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .squid-fill,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .squid-ball{
  isolation:isolate !important;
  contain:paint !important;
}

html.is-tg-android #fullscreenGameOverlay:not(.hidden) .plinko-ball,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .plinko-win-particle,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .slot,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .crash-flight-beam::after,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .crash-plane-art::before,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .crash-plane-art::after,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .crash-flight-dot,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .crash-plane-wrap,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .pvp-wheel,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .lucky-wheel,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .lucky-wheel.is-spinning,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .riskbar-ring,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .riskbar-ring::before,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .riskbar-ring::after,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .riskbar-ball,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .mines-cell,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .mines-cell.is-pending,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .mines-cell.is-safe,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .mines-cell.is-bomb,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .mines-cell.is-hit,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .squid-ball,
html.is-tg-android #fullscreenGameOverlay:not(.hidden) .squid-win-card{
  filter:none !important;
  box-shadow:none !important;
  transform-style:flat !important;
  will-change:auto !important;
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
}

html.is-tg-android .toast,
html.is-tg-android #toast{
  contain:paint !important;
}

html.is-tg-android .profile-action-modal,
html.is-tg-android .gift-withdraw-dialog,
html.is-tg-android #cases-screen .cases-create-overlay,
html.is-tg-android .cases-nft-overlay,
html.is-tg-android .cases-open-overlay,
html.is-tg-android #fullscreenGameOverlay .crash-screen-modal,
html.is-tg-android #fullscreenGameOverlay .pvp-modal,
html.is-tg-android #fullscreenGameOverlay .plinko-nft-modal{
  contain:none !important;
}

.gift-withdraw-dialog-card,
#cases-screen .cases-create-modal,
.cases-nft-modal,
.cases-open-modal,
.crash-screen-modal-card,
.pvp-modal-card,
.plinko-modal-card{
  position:relative !important;
  z-index:1 !important;
  pointer-events:auto !important;
}

.crash-screen-modal-backdrop,
.pvp-modal-backdrop,
.plinko-modal-backdrop{
  z-index:0;
}

/* hide bottom nav only when fullscreen game overlay is actually open */
.app-shell:has(#fullscreenGameOverlay:not(.hidden)) .bottom-nav,
.app-shell:has(#fullscreenGameOverlay:not(.hidden)) .redesign-bottom-nav{
  display:none !important;
}

/* fallback for WebView without stable :has() support */
body.game-overlay-open .bottom-nav,
body.game-overlay-open .redesign-bottom-nav{
  display:none !important;
}

body.game-overlay-open #balance.floating-balance-card.compact-balance-toolbar{
  display:none !important;
}

html[data-solo-game="riskbar"] .app-shell:has(#fullscreenGameOverlay:not(.hidden)) .bottom-nav,
html[data-solo-game="riskbar"] .app-shell:has(#fullscreenGameOverlay:not(.hidden)) .redesign-bottom-nav,
html[data-solo-game="riskbar"] body.game-overlay-open .bottom-nav,
html[data-solo-game="riskbar"] body.game-overlay-open .redesign-bottom-nav,
html[data-solo-game="plinko"] .app-shell:has(#fullscreenGameOverlay:not(.hidden)) .bottom-nav,
html[data-solo-game="plinko"] .app-shell:has(#fullscreenGameOverlay:not(.hidden)) .redesign-bottom-nav,
html[data-solo-game="plinko"] body.game-overlay-open .bottom-nav,
html[data-solo-game="plinko"] body.game-overlay-open .redesign-bottom-nav,
html[data-solo-game="mines"] .app-shell:has(#fullscreenGameOverlay:not(.hidden)) .bottom-nav,
html[data-solo-game="mines"] .app-shell:has(#fullscreenGameOverlay:not(.hidden)) .redesign-bottom-nav,
html[data-solo-game="mines"] body.game-overlay-open .bottom-nav,
html[data-solo-game="mines"] body.game-overlay-open .redesign-bottom-nav{
  display:grid !important;
  z-index:140 !important;
}

html[data-solo-game="riskbar"] #fullscreenGameOverlay:not(.hidden) .fullscreen-game-shell,
html[data-solo-game="plinko"] #fullscreenGameOverlay:not(.hidden) .fullscreen-game-shell,
html[data-solo-game="mines"] #fullscreenGameOverlay:not(.hidden) .fullscreen-game-shell{
  padding-bottom:var(--layout-nav-height, var(--nav-h, 78px)) !important;
}

/* hide bottom nav when profile action modal is open */
.app-shell:has(#profileActionModal:not(.hidden)) .bottom-nav,
.app-shell:has(#profileActionModal:not(.hidden)) .redesign-bottom-nav,
.app-shell:has(#casesCreateOverlay:not(.hidden)) .bottom-nav,
.app-shell:has(#casesCreateOverlay:not(.hidden)) .redesign-bottom-nav{
  display:none !important;
}

/* shared neon toast for hints, errors, and short status messages */
.toast,
#toast{
  position:fixed !important;
  left:50% !important;
  right:auto !important;
  bottom:calc(var(--layout-nav-height, var(--nav-h, 78px)) + var(--safe-bottom, 0px) + 18px) !important;
  width:max-content !important;
  max-width:min(82vw, 390px) !important;
  min-width:min(72vw, 280px) !important;
  transform:translateX(-50%) translateY(18px) scale(.98) !important;
  padding:clamp(12px, 3.4vw, 18px) clamp(14px, 4.2vw, 22px) !important;
  border-radius:clamp(18px, 5vw, 26px) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(192,44,255,.24), transparent 38%),
    radial-gradient(circle at 88% 100%, rgba(53,200,255,.18), transparent 42%),
    linear-gradient(180deg, rgba(5,18,42,.94), rgba(3,9,26,.96)) !important;
  border:1px solid rgba(97,198,255,.34) !important;
  color:#f6fbff !important;
  box-shadow:none !important;
  backdrop-filter:blur(14px) saturate(130%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(130%) !important;
  font-size:clamp(14px, 3.8vw, 17px) !important;
  font-weight:800 !important;
  line-height:1.35 !important;
  letter-spacing:0 !important;
  text-align:center !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  z-index:260 !important;
}

.toast.show,
#toast.show{
  opacity:1 !important;
  transform:translateX(-50%) translateY(0) scale(1) !important;
}

@media (max-width:360px){
  .toast,
  #toast{
    max-width:calc(100vw - 24px) !important;
    min-width:min(78vw, 260px) !important;
  }
}

/* keyboard mode: keep the app height stable and free the input area */
html.is-keyboard-open .app-shell.app-shell-redesign{
  padding-bottom:calc(var(--safe-bottom, 0px) + 12px) !important;
}

html.is-keyboard-open .main-layout,
html.is-keyboard-open .main-layout.redesigned-main-layout,
html.is-keyboard-open .redesigned-main-layout,
html.is-keyboard-open .fullscreen-game-shell > .solo-game-panel.active{
  overflow-y:auto !important;
  scroll-padding-bottom:calc(var(--keyboard-inset, 0px) + 28px) !important;
  -webkit-overflow-scrolling:touch !important;
}

html.is-keyboard-open .screen.active{
  padding-bottom:calc(var(--keyboard-inset, 0px) + 96px) !important;
}

html.is-keyboard-open .fullscreen-game-shell > .solo-game-panel.active{
  padding-bottom:calc(var(--keyboard-inset, 0px) + 34px) !important;
}

html.is-keyboard-open #cases-screen .cases-create-overlay,
html.is-keyboard-open .cases-nft-overlay,
html.is-keyboard-open .cases-open-overlay{
  align-items:flex-start !important;
  padding-bottom:calc(var(--keyboard-inset, 0px) + 120px) !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
}

html.is-keyboard-open #cases-screen .cases-create-modal,
html.is-keyboard-open .cases-nft-modal,
html.is-keyboard-open .cases-open-modal{
  max-height:calc(var(--tg-vh, 100svh) - var(--safe-top, 0px) - var(--keyboard-inset, 0px) - 28px) !important;
  margin-top:calc(var(--safe-top, 0px) + 10px) !important;
  padding-bottom:calc(var(--keyboard-inset, 0px) + 120px) !important;
  scroll-padding-bottom:calc(var(--keyboard-inset, 0px) + 120px) !important;
}

html.is-keyboard-open #free-screen .redesign-promo-card{
  margin-bottom:160px !important;
}

html.is-keyboard-open #free-screen.screen.active{
  overflow-y:auto !important;
  padding-bottom:180px !important;
  -webkit-overflow-scrolling:touch !important;
}

html.is-keyboard-open #free-screen .cards-stack.redesign-free-stack{
  min-height:auto !important;
  padding-bottom:180px !important;
  justify-content:flex-start !important;
}

html.is-keyboard-open #solo-pvp-panel.active,
html.is-keyboard-open #solo-lucky-panel.active,
html.is-keyboard-open #solo-riskbar-panel.active{
  overflow-y:auto !important;
  scroll-padding-top:calc(var(--safe-top, 0px) + 88px) !important;
  scroll-padding-bottom:180px !important;
  padding-bottom:180px !important;
  -webkit-overflow-scrolling:touch !important;
}

html.is-keyboard-open #solo-pvp-panel .pvp-shell,
html.is-keyboard-open #solo-lucky-panel .lucky-shell,
html.is-keyboard-open #solo-riskbar-panel .riskbar-shell{
  min-height:auto !important;
  padding-top:0 !important;
  padding-bottom:180px !important;
}

html.is-keyboard-open #solo-pvp-panel .pvp-wheel-board{
  height:clamp(250px, 38svh, 360px) !important;
  align-items:start !important;
  padding-top:4px !important;
  overflow:visible !important;
}

html.is-keyboard-open #solo-pvp-panel .pvp-wheel{
  width:min(58vw, 260px) !important;
  height:min(58vw, 260px) !important;
}

html.is-keyboard-open #solo-pvp-panel .pvp-wheel-center{
  width:min(20vw, 78px) !important;
  height:min(20vw, 78px) !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%, -50%) !important;
}

html.is-keyboard-open #solo-pvp-panel .pvp-wheel-pointer{
  top:8px !important;
  transform:translateX(-50%) scale(.82) !important;
}

html.is-keyboard-open #solo-lucky-panel .lucky-top-line{
  min-height:34px !important;
}

html.is-keyboard-open #solo-lucky-panel .lucky-total-pill{
  height:22px !important;
}

html.is-keyboard-open #solo-lucky-panel .lucky-wheel-wrap{
  height:clamp(190px, 31svh, 280px) !important;
  margin-top:0 !important;
}

html.is-keyboard-open #solo-lucky-panel .lucky-wheel{
  width:min(56vw, 240px) !important;
}

html.is-keyboard-open #solo-lucky-panel .lucky-wheel-ring{
  width:min(60vw, 260px) !important;
  height:min(60vw, 260px) !important;
}

html.is-keyboard-open #solo-lucky-panel .lucky-wheel-center{
  width:min(20vw, 76px) !important;
  height:min(20vw, 76px) !important;
  font-size:clamp(16px, 4.4vw, 22px) !important;
}

html.is-keyboard-open #solo-lucky-panel .lucky-wheel-pointer{
  top:2px !important;
  transform:translateX(-50%) scale(.76) !important;
}

html.is-keyboard-open #solo-riskbar-panel .riskbar-stage{
  min-height:clamp(220px, 34svh, 320px) !important;
}

html.is-keyboard-open #solo-riskbar-panel .riskbar-circle{
  width:min(58vw, 260px) !important;
  margin-top:4px !important;
}

html.is-keyboard-open #solo-riskbar-panel .riskbar-multiplier{
  font-size:clamp(38px, 11vw, 56px) !important;
}

html.is-keyboard-open #solo-riskbar-panel .riskbar-lane{
  height:clamp(50px, 9vh, 70px) !important;
  bottom:4px !important;
}

html.is-keyboard-open #solo-riskbar-panel .riskbar-history-btn{
  top:0 !important;
}

html.is-keyboard-open .bottom-nav,
html.is-keyboard-open .redesign-bottom-nav{
  transform:translateY(calc(100% + max(18px, var(--safe-bottom, 0px)))) !important;
  opacity:0 !important;
  pointer-events:none !important;
}

html.is-keyboard-open #balance.floating-balance-card.compact-balance-toolbar{
  transform:translateY(-6px) !important;
}