/* ===== canonical layout: single source of truth ===== */
:root{
  --layout-shell-max-width: 900px;
  --layout-side-gap: 10px;
  --layout-top-gap: 6px;
  --layout-toolbar-drop: 12px;
  --layout-bottom-gap: 28px;
  --layout-toolbar-height: 54px;
  --layout-toolbar-radius: 20px;
  --layout-content-gap: 8px;
  --layout-nav-height: 76px;
  --layout-nav-radius: 24px;
  --layout-app-top-offset: 0px;
  --tg-top-ui-offset: 0px;
  --layout-shell-top: calc(var(--safe-top) + var(--layout-app-top-offset) + var(--layout-top-gap) + var(--layout-toolbar-height) + 2px);
  --layout-shell-bottom: calc(var(--safe-bottom) + var(--layout-bottom-gap) + var(--layout-nav-height) + 10px);
  --fullscreen-overlay-top-offset: max(44px, var(--tg-top-ui-offset, 0px), var(--layout-app-top-offset, 0px));
  --layout-extra-top-clearance: 0px;
  --yak-modal-side-left: max(8px, env(safe-area-inset-left, 0px) + 8px);
  --yak-modal-side-right: max(8px, env(safe-area-inset-right, 0px) + 8px);
  --yak-modal-top-offset: calc(var(--safe-top) + max(var(--tg-top-ui-offset, 0px), var(--layout-app-top-offset, 0px)) + 8px);
  --yak-modal-bottom-offset: calc(var(--safe-bottom) + 10px);
  --yak-modal-bottom-offset-nav: calc(var(--safe-bottom) + var(--layout-nav-height, var(--nav-h, 72px)) + 10px);
}

html,
body{
  width:100%;
  height:var(--tg-vh, 100svh) !important;
  min-height:var(--tg-vh, 100svh) !important;
  max-height:var(--tg-vh, 100svh) !important;
  overflow:hidden !important;
}

body{
  overscroll-behavior:none;
}

html.is-tg-fullscreen{
  --layout-app-top-offset: 0px;
  --tg-top-ui-offset: 56px;
  --layout-extra-top-clearance: 10px;
}

html.is-tg-fullscreen.is-short-screen{
  --layout-app-top-offset: 0px;
  --tg-top-ui-offset: 56px;
  --layout-extra-top-clearance: 14px;
}

html.is-tg-fullscreen.is-tiny-screen{
  --layout-app-top-offset: 0px;
  --tg-top-ui-offset: 56px;
  --layout-extra-top-clearance: 18px;
}

body.tg-fullscreen{
  --layout-app-top-offset: 44px;
}

html.is-short-screen body.tg-fullscreen{
  --layout-app-top-offset: 44px;
}

html.is-tiny-screen body.tg-fullscreen{
  --layout-app-top-offset: 44px;
}

  .app-shell,
  .app-shell.app-shell-redesign,
  .app-shell-redesign{
  position:relative !important;
  width:min(100%, var(--layout-shell-max-width)) !important;
  max-width:var(--layout-shell-max-width) !important;
  height:var(--tg-vh, 100svh) !important;
  min-height:var(--tg-vh, 100svh) !important;
  margin:0 auto !important;
  padding:
    calc(
      var(--safe-top)
      + max(var(--tg-top-ui-offset, 0px), var(--layout-app-top-offset, 0px))
      + var(--layout-top-gap)
      + var(--layout-toolbar-height)
      + 2px
      + var(--layout-extra-top-clearance)
    )
    var(--layout-side-gap)
    var(--layout-shell-bottom) !important;
  display:flex !important;
  flex-direction:column !important;
  gap:var(--layout-content-gap) !important;
  overflow:hidden !important;
}

.floating-balance-card,
.floating-balance-card.compact-balance-toolbar,
.compact-balance-toolbar{
  position:fixed !important;
  top:max(10px, calc(var(--safe-top) + max(var(--tg-top-ui-offset, 0px), var(--layout-app-top-offset, 0px)) + var(--layout-top-gap) + var(--layout-toolbar-drop) + var(--layout-extra-top-clearance))) !important;
  left:max(var(--layout-side-gap), env(safe-area-inset-left)) !important;
  right:max(var(--layout-side-gap), env(safe-area-inset-right)) !important;
  width:auto !important;
  max-width:none !important;
  min-height:var(--layout-toolbar-height) !important;
  padding:6px 8px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  border-radius:var(--layout-toolbar-radius) !important;
  z-index:70 !important;
}

.floating-balance-row{
  display:flex !important;
  align-items:center !important;
  flex:1 1 0 !important;
  min-width:0 !important;
}

.floating-balance-main{
  width:100% !important;
  min-width:0 !important;
  min-height:calc(var(--layout-toolbar-height) - 12px) !important;
  padding:0 12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  border-radius:14px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.balance-actions-inline,
.global-balance-actions,
.compact-balance-actions{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  flex:0 0 auto !important;
}

.mini-action-btn,
.trophy-mini-btn,
.balance-actions-inline .mini-action-btn,
.compact-balance-toolbar .mini-action-btn{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  flex:0 0 42px !important;
  border-radius:14px !important;
  padding:0 !important;
}

.main-layout,
.main-layout.redesigned-main-layout,
.redesigned-main-layout{
  flex:1 1 auto !important;
  min-height:0 !important;
  height:100% !important;
  margin-top:0 !important;
  padding-top:0 !important;
  display:block !important;
  overflow:hidden !important;
}

.screen,
.screen.active{
  min-height:0 !important;
}

.screen.active{
  height:100% !important;
  padding:0 0 calc(var(--safe-bottom) + 8px) !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}

#games-screen,
#games-screen.screen,
#games-screen.screen.active{
  overflow:hidden !important;
  padding-bottom:0 !important;
}

#games-screen .cards-stack.redesign-games-stack{
  height:100% !important;
  min-height:0 !important;
  display:grid !important;
  grid-template-rows:1fr !important;
  gap:0 !important;
}#games-screen .redesign-screen-head {
  display:none !important;
}

#games-screen .game-select-grid.redesign-games-grid{
  height:100% !important;
  min-height:0 !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:repeat(4, minmax(0, 1fr)) !important;
  gap:12px !important;
  align-content:stretch !important;
}

#games-screen .game-pick-card.game-pick-visual{
  min-height:0 !important;
  height:100% !important;
}

.redesign-bottom-nav,
.bottom-nav{
  position:fixed !important;
  left:max(var(--layout-side-gap), env(safe-area-inset-left)) !important;
  right:max(var(--layout-side-gap), env(safe-area-inset-right)) !important;
  bottom:14px !important;
  width:auto !important;
  min-height:auto !important;
  padding:6px !important;
  display:grid !important;
  grid-auto-flow:column !important;
  grid-auto-columns:minmax(0, 1fr) !important;
  gap:6px !important;
  border-radius:28px !important;
  transform:none !important;
  z-index:80 !important;
}

.redesign-bottom-nav .tab,
.bottom-nav .tab,
.tab{
  min-width:0 !important;
  min-height:64px !important;
  padding:7px 5px !important;
  border-radius:18px !important;
}

.redesign-bottom-nav .tab span:last-child,
.bottom-nav .tab span:last-child,
.tab span:last-child{
  font-size:11px !important;
}

.fullscreen-game-overlay{
  position:fixed !important;
  inset:0 !important;
  z-index:120 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 50% -16%, rgba(89, 112, 255, 0.22), transparent 28%),
    linear-gradient(180deg, #041022 0%, #061731 54%, #041022 100%) !important;
}

.fullscreen-game-shell{
  width:min(100%, var(--layout-shell-max-width)) !important;
  height:var(--tg-vh, 100svh) !important;
  min-height:var(--tg-vh, 100svh) !important;
  margin:0 auto !important;
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  overflow:hidden !important;
}

.fullscreen-game-topbar{
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  align-items:center !important;
  gap:10px !important;
  min-height:50px !important;
  padding:calc(var(--safe-top) + var(--fullscreen-overlay-top-offset) + var(--layout-extra-top-clearance) + 8px) 12px 10px !important;
  background:linear-gradient(180deg, rgba(3, 15, 32, 0.96), rgba(3, 15, 32, 0.78) 72%, rgba(3, 15, 32, 0)) !important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.fullscreen-floating-balance{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:6px !important;
  min-width:0 !important;
}

.fullscreen-balance-pill{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  min-height:34px !important;
  padding:0 10px !important;
  border-radius:999px !important;
  background:rgba(255, 255, 255, 0.08) !important;
  border:1px solid rgba(255, 255, 255, 0.07) !important;
  font-size:13px !important;
  font-weight:800 !important;
  white-space:nowrap !important;
}

.fullscreen-panel{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  padding:8px 10px calc(var(--safe-bottom) + 10px) !important;
  -webkit-overflow-scrolling:touch;
}

.fullscreen-game-shell > .solo-game-panel{
  display:none !important;
  flex:1 1 auto;
  min-height:0;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}

.fullscreen-game-shell > .solo-game-panel.active{
  display:block !important;
}

.overlay-back-btn{
  min-width:98px !important;
  min-height:40px !important;
  padding:0 14px !important;
  border-radius:16px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  background:linear-gradient(180deg, rgba(11,25,58,.96), rgba(7,15,37,.98)) !important;
  border:1px solid rgba(108,143,220,.16) !important;
  color:#f2f7ff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 18px rgba(0,0,0,.16) !important;
  font-size:14px !important;
  font-weight:800 !important;
  letter-spacing:-0.01em !important;
}

.overlay-back-btn:hover,
.overlay-back-btn:active{
  background:linear-gradient(180deg, rgba(16,31,71,.98), rgba(8,18,42,.99)) !important;
}

#staking-screen .staking-back-btn,
#tasks-screen .chip-btn[data-screen-target],
#tournament-screen .chip-btn[data-screen-target]{
  min-height:40px !important;
  padding:0 14px !important;
  border-radius:16px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  background:linear-gradient(180deg, rgba(11,25,58,.96), rgba(7,15,37,.98)) !important;
  border:1px solid rgba(108,143,220,.16) !important;
  color:#f2f7ff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 18px rgba(0,0,0,.14) !important;
  font-size:14px !important;
  font-weight:800 !important;
}

.fullscreen-game-title{
  font-size:18px !important;
  font-weight:800 !important;
  text-align:center !important;
  letter-spacing:-0.02em !important;
}

html.is-short-screen{
  --layout-top-gap: 8px;
  --layout-bottom-gap: 22px;
  --layout-toolbar-height: 50px;
  --layout-content-gap: 10px;
  --layout-nav-height: 72px;
}

html.is-tiny-screen{
  --layout-top-gap: 6px;
  --layout-bottom-gap: 20px;
  --layout-toolbar-height: 48px;
  --layout-content-gap: 8px;
  --layout-nav-height: 68px;
}

@media (max-width: 640px){
  :root{
    --layout-side-gap: 8px;
    --layout-top-gap: 4px;
    --layout-toolbar-height: 48px;
    --layout-content-gap: 6px;
    --layout-nav-height: 72px;
    --fullscreen-overlay-top-offset: max(46px, var(--tg-top-ui-offset, 0px), var(--layout-app-top-offset, 0px));
  }

  .floating-balance-card,
  .floating-balance-card.compact-balance-toolbar,
  .compact-balance-toolbar{
    padding:5px 6px !important;
    gap:6px !important;
  }

  .floating-balance-main{
    min-height:calc(var(--layout-toolbar-height) - 10px) !important;
    padding:0 10px !important;
    font-size:13px !important;
  }

  .mini-action-btn,
  .trophy-mini-btn,
  .balance-actions-inline .mini-action-btn,
  .compact-balance-toolbar .mini-action-btn{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    flex-basis:38px !important;
  }

  .fullscreen-game-topbar{
    min-height:46px !important;
    padding:calc(var(--safe-top) + var(--fullscreen-overlay-top-offset) + var(--layout-extra-top-clearance) + 4px) 10px 8px !important;
    gap:8px !important;
  }

  .overlay-back-btn{
    min-width:92px !important;
    padding:0 12px !important;
    font-size:14px !important;
  }

  .fullscreen-game-title{
    font-size:17px !important;
  }

  .fullscreen-balance-pill{
    min-height:32px !important;
    padding:0 8px !important;
    font-size:12px !important;
  }

  .redesign-bottom-nav .tab,
  .bottom-nav .tab,
  .tab{
    min-height:60px !important;
  }

  #games-screen .game-select-grid.redesign-games-grid{
    gap:10px !important;
  }
}

@media (max-width: 420px){
  :root{
    --layout-side-gap: 6px;
    --layout-top-gap: 3px;
    --layout-toolbar-height: 44px;
    --layout-content-gap: 4px;
    --layout-nav-height: 66px;
    --fullscreen-overlay-top-offset: max(44px, var(--tg-top-ui-offset, 0px), var(--layout-app-top-offset, 0px));
  }

  .floating-balance-main{
    font-size:12px !important;
    padding:0 8px !important;
  }

  .mini-action-btn,
  .trophy-mini-btn,
  .balance-actions-inline .mini-action-btn,
  .compact-balance-toolbar .mini-action-btn{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    flex-basis:34px !important;
    border-radius:12px !important;
  }

  .fullscreen-game-topbar{
    gap:6px !important;
  }

  .overlay-back-btn{
    min-width:84px !important;
  }

  .fullscreen-balance-pill{
    min-height:30px !important;
    padding:0 7px !important;
    font-size:11px !important;
  }

  .redesign-bottom-nav .tab span:last-child,
  .bottom-nav .tab span:last-child,
  .tab span:last-child{
    font-size:10px !important;
  }

  #games-screen .game-select-grid.redesign-games-grid{
    gap:8px !important;
  }
}


/* cases screen bottom nav stability fix */
.bottom-nav.bottom-nav-4,
.redesign-bottom-nav.bottom-nav-4{
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  grid-auto-flow:unset !important;
  grid-auto-columns:auto !important;
}

#cases-screen.screen.active{
  padding-bottom:calc(var(--layout-nav-height) + var(--safe-bottom) + 18px) !important;
}

.bottom-nav,
.redesign-bottom-nav{
  z-index:200 !important;
}

/* exact modal wallet button color overrides v2026-04-04 */
.profile-action-modal #buyStarsBtn,
#wallet-screen #buyStarsBtn{
  background:linear-gradient(135deg,#d79a2e 0%,#f0c76d 52%,#fff0b8 100%) !important;
  color:#3a2400 !important;
  border:1px solid rgba(255,220,140,.42) !important;
  box-shadow:0 10px 24px rgba(216,154,47,.22), inset 0 1px 0 rgba(255,255,255,.34) !important;
}
.profile-action-modal #depositTonBtn,
#wallet-screen #depositTonBtn{
  background:linear-gradient(135deg,#6438ff 0%, var(--violet) 100%) !important;
  color:#fff !important;
  border:1px solid rgba(145,120,255,.34) !important;
}
.profile-action-modal #unbindTonWalletBtn,
#wallet-screen #unbindTonWalletBtn{
  background:linear-gradient(135deg,#ff8b77 0%, #ff4f68 100%) !important;
  color:#fff !important;
  border:1px solid rgba(255,158,158,.34) !important;
  box-shadow:0 10px 24px rgba(255,86,108,.18), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.profile-action-modal #convertStarsBtn,
#wallet-screen #convertStarsBtn{
  background:linear-gradient(135deg,#d79a2e 0%,#f0c76d 52%,#fff0b8 100%) !important;
  color:#3a2400 !important;
  border:1px solid rgba(255,220,140,.42) !important;
  box-shadow:0 10px 24px rgba(216,154,47,.22), inset 0 1px 0 rgba(255,255,255,.34) !important;
}
.profile-action-modal #unbindTonWalletBtn .masked-icon,
#wallet-screen #unbindTonWalletBtn .masked-icon{
  color:currentColor !important;
}