.navigation-sidebar {
  position: relative;
  z-index: 30;
  width: var(--layout-sidebar-collapsed);
  height: 100%;
  flex: 0 0 var(--layout-sidebar-collapsed);
  padding: 20px 8px;
  overflow: hidden;
  background: var(--sidebar);
  color: #606d8e;
  transition: width .5s cubic-bezier(.4,0,.2,1),flex-basis .5s cubic-bezier(.4,0,.2,1),transform .35s ease;
}

.game-nav,
.account-nav { display: flex; flex-direction: column; }
.game-nav a,
.account-nav a { position: relative; width: 100%; height: 40px; display: flex; align-items: center; gap: 12px; padding: 8px 20px; overflow: hidden; border-radius: 4px; text-transform: uppercase; font-family: "Roboto Condensed","Inter Display",sans-serif; font-size: 16px; font-weight: 700; white-space: nowrap; }
.account-nav a { font-size: 12px; }
.game-nav a > img,
.account-nav a > img { width: 24px; height: 24px; flex: 0 0 24px; object-fit: contain; opacity: 1; }
.account-nav a:nth-child(2) > img { padding: 2px; }
.account-nav a:nth-child(4) > img { padding: 4.5px .75px 3px; }
.account-nav a:nth-child(5) > img { padding: 2px 3px; }
.game-nav a:hover,
.account-nav a:hover { color: #bbc6e6; background: rgba(255,255,255,.025); }
.account-nav .bonus { color: #ffb937; }
.account-nav .active { color: #97e0ff; background: rgba(151,224,255,.1); }
.navigation-sidebar__label { min-width: 0; opacity: 0; transform: translateX(-8px); transition: opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1); }
.navigation-sidebar__badge,
.account-nav a b { margin-left: auto; flex: 0 0 auto; }
.navigation-sidebar__badge { padding: 2px 5px; border-radius: 8px; background: #535b72; color: #8c95ae; font-size: 9px; }
.account-nav a b { width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50%; background: #f03a00; color: #fff; font-size: 8px; }
.sidebar-divider { width: 100%; height: 1px; margin: 20px 0; background: rgba(96,109,142,.25); }

.side-promos { width: 208px; margin-top: 24px; display: grid; gap: 8px; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.side-promo { position: relative; width: 208px; height: 64px; overflow: hidden; border-radius: 8px; text-transform: uppercase; color: #fff; font-family: "Roboto Condensed",sans-serif; font-size: 14px; font-weight: 700; }
.side-promo > div { position: relative; z-index: 2; padding: 10px 16px; line-height: 16px; }
.side-promo > img { position: absolute; z-index: 1; max-width: none; object-fit: contain; }
.side-promo strong { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 17px; }
.side-promo strong img { width: 18px; height: 18px; }
.side-promo--blue { background: linear-gradient(90deg,#136bb3,#3680bd); }
.side-promo--blue > img { width: 112px; height: 112px; right: -14px; top: -23px; }
.side-promo--green { background: linear-gradient(90deg,#248619,#bfbf00); }
.side-promo--green > img { width: 140px; height: 140px; right: -31px; top: -39px; }
.side-promo--orange { background: linear-gradient(90deg,#b2500e,#d89700); }
.side-promo--orange > img { width: 112px; height: 112px; right: -2px; top: -8px; }

.sidebar-bottom { position: absolute; left: 8px; right: 8px; bottom: 20px; display: flex; flex-direction: column; gap: 6px; }
.sidebar-bottom button { height: 40px; border: 1px solid #343b50; border-radius: 8px; background: #292f41; color: var(--muted); }
.language { width: 40px; padding: 0 12px; display: flex; align-items: center; gap: 8px; overflow: hidden; text-align: left; font-size: 14px; }
.language span,
.language img:last-child { display: none; }
.language img { width: 16px; height: 16px; flex: 0 0 16px; }
.sound { width: 40px; }
.sound img { width: 20px; height: 20px; display: block; margin: auto; }
.navigation-sidebar__toggle { display: none; position: absolute; top: 14px; right: -16px; width: 32px; height: 32px; padding: 8px; border: 0; border-radius: 50%; background: #2c3243; z-index: 2; }
.navigation-sidebar__toggle img { width: 16px; height: 16px; transition: transform .4s ease; }

@media (min-width: 1920px) {
  .navigation-sidebar { width: var(--layout-sidebar-expanded); flex-basis: var(--layout-sidebar-expanded); padding-inline: 20px; overflow: visible; }
  .navigation-sidebar .game-nav a,
  .navigation-sidebar .account-nav a { padding-inline: 8px; }
  .navigation-sidebar__label { opacity: 1; transform: none; }
  .side-promos { opacity: 1; pointer-events: auto; }
  .sidebar-bottom { left: 20px; right: 20px; flex-direction: row; }
  .language { width: auto; flex: 1; }
  .language span,
  .language img:last-child { display: block; }
  .navigation-sidebar__toggle { display: block; }
  body.sidebar-collapsed .navigation-sidebar { width: var(--layout-sidebar-collapsed); flex-basis: var(--layout-sidebar-collapsed); padding-inline: 8px; }
  body.sidebar-collapsed .navigation-sidebar__label,
  body.sidebar-collapsed .side-promos { opacity: 0; pointer-events: none; }
  body.sidebar-collapsed .navigation-sidebar .game-nav a,
  body.sidebar-collapsed .navigation-sidebar .account-nav a { padding-inline: 20px; }
  body.sidebar-collapsed .sidebar-bottom { left: 8px; right: 8px; flex-direction: column; }
  body.sidebar-collapsed .language { width: 40px; flex: 0 0 40px; }
  body.sidebar-collapsed .language span,
  body.sidebar-collapsed .language img:last-child { display: none; }
  body.sidebar-collapsed .navigation-sidebar__toggle img { transform: rotate(180deg); }
}

@media (max-width: 1023px) {
  .navigation-sidebar { display: none; }
}

@media (max-width: 799px) {
  body.mobile-nav-open { overflow: hidden; }
  body.mobile-nav-open .navigation-sidebar { display: block; position: fixed; top: calc(var(--layout-header-h) + env(safe-area-inset-top)); left: 0; bottom: 0; width: min(304px,86vw); height: auto; padding: 20px; overflow-y: auto; }
  body.mobile-nav-open .navigation-sidebar__label { opacity: 1; transform: none; }
  body.mobile-nav-open .side-promos { opacity: 1; pointer-events: auto; }
  body.mobile-nav-open .sidebar-bottom { position: static; margin-top: 24px; flex-direction: row; }
  body.mobile-nav-open .language { width: auto; flex: 1; }
  body.mobile-nav-open .language span,
  body.mobile-nav-open .language img:last-child { display: block; }
}