/* Layout da barra lateral expandida. */
.sidebar:not(.collapsed),
.sidebar.collapsed.hover-expanded {
  width: 250px;
}
.sidebar:not(.collapsed) .side-avatar,
.sidebar.collapsed.hover-expanded .side-avatar,
.sidebar:not(.collapsed) .side-avatar .avatar-img,
.sidebar.collapsed.hover-expanded .side-avatar .avatar-img {
  width: 160px;
  height: 160px;
}
.sidebar:not(.collapsed) .side-user,
.sidebar.collapsed.hover-expanded .side-user {
  margin-top: 10px;
}
.sidebar:not(.collapsed) .side-nickname-row,
.sidebar.collapsed.hover-expanded .side-nickname-row {
  display: flex !important;
  align-items: center;
  min-height: 34px;
  margin-top: 5px;
}
.sidebar:not(.collapsed) .profile-medal,
.sidebar.collapsed.hover-expanded .profile-medal {
  display: block !important;
}
.sidebar:not(.collapsed) .daily-limit:not([hidden]),
.sidebar.collapsed.hover-expanded .daily-limit:not([hidden]) {
  display: grid;
  margin:5px 0 0;
}
.sidebar:not(.collapsed) .menu-entry,
.sidebar.collapsed.hover-expanded .menu-entry {
  width: 100%;
}
.sidebar:not(.collapsed) #currentNickname,
.sidebar.collapsed.hover-expanded #currentNickname { display:inline; color:var(--text); }
.sidebar:not(.collapsed) .profile-medal,
.sidebar.collapsed.hover-expanded .profile-medal { width:64px; height:64px; flex-basis:64px; }
.sidebar:not(.collapsed) .menu-entry .menu-item,
.sidebar.collapsed.hover-expanded .menu-entry .menu-item { text-align:left; background:#fff; color:var(--blue); }
.sidebar:not(.collapsed) .menu-entry .menu-item.active,
.sidebar.collapsed.hover-expanded .menu-entry .menu-item.active { background:var(--blue); color:#fff; }
.sidebar:not(.collapsed) .sidebar-settings,
.sidebar:not(.collapsed) .logout,
.sidebar.collapsed.hover-expanded .sidebar-settings,
.sidebar.collapsed.hover-expanded .logout { text-align:left; background:#fff; color:var(--blue); }

/* Perfil: avatar, imagem do plano, nome do plano e nickname. */
.sidebar:not(.collapsed) .sidebar-profile-details,
.sidebar.collapsed.hover-expanded .sidebar-profile-details {
  display:flex !important;
  justify-content:center;
  gap:10px;
  padding-top:0;
}
.sidebar:not(.collapsed) .sidebar-profile-copy,
.sidebar.collapsed.hover-expanded .sidebar-profile-copy { display:grid; min-width:0; gap:2px; text-align:left; }
.sidebar:not(.collapsed) .current-plan,
.sidebar.collapsed.hover-expanded .current-plan { display:block; overflow:hidden; color:var(--muted); font-size:.78rem; font-weight:800; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.sidebar:not(.collapsed) #currentNickname,
.sidebar.collapsed.hover-expanded #currentNickname { display:block !important; max-width:none; overflow:hidden; font-size:.88rem; text-overflow:ellipsis; white-space:nowrap; }

/* O ícone não faz parte do botão: grade fixa de 20px à esquerda e botão à direita. */
.sidebar:not(.collapsed) .menu-entry,
.sidebar.collapsed.hover-expanded .menu-entry { display:grid; grid-template-columns:20px minmax(0,1fr); align-items:center; column-gap:10px; width:100%; }
.sidebar:not(.collapsed) .menu-entry .menu-icon,
.sidebar.collapsed.hover-expanded .menu-entry .menu-icon { display:grid; place-items:center; width:20px; min-width:20px; height:100%; margin:0; color:#fff; }
.sidebar:not(.collapsed) .menu-entry button,
.sidebar.collapsed.hover-expanded .menu-entry button { width:100%; min-width:0; text-align:left; background:#fff; color:var(--blue); }
.sidebar:not(.collapsed) .menu-entry button.active,
.sidebar.collapsed.hover-expanded .menu-entry button.active { background:var(--blue); color:#fff; }

/* Configurações e Sair usam a mesma grade visual de Jogar, Ranking e Desafios. */
.sidebar:not(.collapsed) .sidebar-settings,
.sidebar:not(.collapsed) .logout,
.sidebar.collapsed.hover-expanded .sidebar-settings,
.sidebar.collapsed.hover-expanded .logout { width:100%; min-width:0; flex:none; text-align:left; background:#fff; color:var(--blue); }
.sidebar:not(.collapsed) .sidebar-settings .menu-label,
.sidebar.collapsed.hover-expanded .sidebar-settings .menu-label { display:inline !important; }
.sidebar:not(.collapsed) .logout .menu-label,
.sidebar.collapsed.hover-expanded .logout .menu-label { display:inline !important; }
.sidebar:not(.collapsed) .sidebar-account-actions .menu-entry button,
.sidebar.collapsed.hover-expanded .sidebar-account-actions .menu-entry button { text-align:left; padding-left:14px; }
.sidebar:not(.collapsed) .sidebar-settings.active,
.sidebar:not(.collapsed) .logout.active,
.sidebar.collapsed.hover-expanded .sidebar-settings.active,
.sidebar.collapsed.hover-expanded .logout.active { background:var(--blue); color:#fff; }

/* Cores consistentes para toda a barra: branco/azul e azul/branco no estado ativo. */
.sidebar:not(.collapsed) button:not(.sidebar-toggle),
.sidebar.collapsed.hover-expanded button:not(.sidebar-toggle) { background:#fff; color:var(--blue); }
.sidebar:not(.collapsed) button.active,
.sidebar.collapsed.hover-expanded button.active { background:var(--blue); color:#fff; }
.sidebar:not(.collapsed) .sidebar-actions-toggle,
.sidebar.collapsed.hover-expanded .sidebar-actions-toggle { background:transparent; color:#d5e7f5; }
.sidebar:not(.collapsed) .sidebar-actions-toggle:hover,
.sidebar:not(.collapsed) .sidebar-actions-toggle:focus-visible,
.sidebar.collapsed.hover-expanded .sidebar-actions-toggle:hover,
.sidebar.collapsed.hover-expanded .sidebar-actions-toggle:focus-visible { background:rgba(255,255,255,.08); color:#fff; }