/* MusicBattles V2.8 — polish général pré-lancement.
   Intent: petites améliorations transversales, sans modifier la logique métier. */

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid color-mix(in srgb,var(--mb-accent-2,#70ffad) 74%,white);
  outline-offset:3px;
}

:where(button,a,input,select,textarea){
  -webkit-tap-highlight-color:transparent;
}

/* Navigation commune de l'espace membre. */
.mb-account-nav-shell{
  position:relative;
  z-index:18;
  width:min(1180px,92vw);
  margin:14px auto 0;
}
.mb-account-nav{
  display:flex;
  gap:8px;
  align-items:center;
  padding:7px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
  border:1px solid var(--mb-border,rgba(255,255,255,.13));
  border-radius:17px;
  background:color-mix(in srgb,var(--mb-surface,#10231a) 88%,transparent);
  box-shadow:0 10px 30px rgba(0,0,0,.14);
  backdrop-filter:blur(14px);
}
.mb-account-nav::-webkit-scrollbar{display:none}
.mb-account-nav a{
  flex:0 0 auto;
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:9px 13px;
  border:1px solid transparent;
  border-radius:12px;
  color:var(--mb-muted,rgba(255,255,255,.68));
  text-decoration:none;
  font-size:12px;
  font-weight:850;
  line-height:1;
  white-space:nowrap;
}
.mb-account-nav a:hover{
  color:var(--mb-text,#fff);
  background:var(--mb-surface-soft,rgba(255,255,255,.07));
  border-color:var(--mb-border,rgba(255,255,255,.13));
}
.mb-account-nav a[aria-current="page"]{
  color:var(--mb-primary-text,#06130b);
  background:linear-gradient(135deg,var(--mb-accent,#1db954),var(--mb-accent-2,#70ffad));
  border-color:transparent;
  box-shadow:0 8px 24px color-mix(in srgb,var(--mb-accent,#1db954) 22%,transparent);
}
.mb-account-nav .mb-account-nav-home{
  color:var(--mb-text,#fff);
  border-color:var(--mb-border,rgba(255,255,255,.13));
  background:var(--mb-surface-soft,rgba(255,255,255,.06));
}

/* Petites sécurités responsive pour toutes les pages publiques qui chargent le thème. */
@media(max-width:720px){
  html{scroll-padding-top:92px}
  .mb-account-nav-shell{width:min(100% - 18px,1180px);margin-top:10px}
  .mb-account-nav{padding:6px;border-radius:15px}
  .mb-account-nav a{min-height:44px;padding:10px 12px}
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px}
  .site-header-actions{max-width:100%;overflow:hidden}
  .site-header-actions .pills{max-width:100%}
}

@media(max-width:430px){
  .mb-account-nav-shell{width:min(100% - 12px,1180px)}
  .mb-account-nav a{font-size:11px}
}

/* États vides : donnent une présence visuelle même avant d'avoir beaucoup de contenu. */
:where(.empty,.empty-card,.emptyState,.empty-state){
  position:relative;
  overflow:hidden;
}
:where(.empty,.empty-card,.emptyState,.empty-state)::after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-70px;
  bottom:-95px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--mb-accent,#1db954) 18%,transparent),transparent 68%);
  pointer-events:none;
}