/* Esparta Brasil — sidebar structure + official brand 234 */
:root{
  --brand234-logo:url("https://sslebhesjnrpgjkvyxbh.supabase.co/storage/v1/object/public/community-media/b09fbff5-afc6-49ee-8573-a90172bd8f69/avatar/1787230139018-esparta.jpg");
}

/* Logo oficial no topo e boot */
.brandmark.official-logo{
  padding:0!important;
  overflow:hidden!important;
  background:#080d13!important;
  border-color:rgba(235,190,61,.42)!important;
  box-shadow:0 0 0 4px rgba(233,185,47,.035),0 10px 30px rgba(0,0,0,.24)!important;
}
.brandmark.official-logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.brandmark.small.official-logo{
  width:52px!important;
  height:52px!important;
  min-width:52px!important;
  border-radius:15px!important;
}
.boot .brandmark.official-logo{
  width:70px!important;
  height:70px!important;
  border-radius:20px!important;
}

/* Usa a arte do Esparta nas marcas d'agua do cenário */
.sidebar:after{
  background:
    var(--brand234-logo) 111% 53%/238px 238px no-repeat,
    radial-gradient(circle at 79% 50%,rgba(233,185,47,.17),rgba(233,185,47,.035) 31%,transparent 67%),
    radial-gradient(circle at 16% 80%,rgba(40,95,150,.14),transparent 55%)!important;
  background-blend-mode:luminosity,normal,normal;
  opacity:.16!important;
}
.workspace:after{
  background:
    var(--brand234-logo) center/58% 58% no-repeat,
    radial-gradient(circle,rgba(233,185,47,.075),rgba(30,70,112,.032) 42%,transparent 70%)!important;
  background-blend-mode:luminosity,normal;
  opacity:.045!important;
}

/* Corrige o corte do perfil e deixa somente o menu rolar */
.usercard{
  height:auto!important;
  min-height:132px!important;
  max-height:none!important;
  overflow:visible!important;
  flex:none!important;
}
.usercard .chips{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  padding-bottom:2px!important;
}
.usercard .userrow{min-width:0}
.usercard .userrow>div:last-child{min-width:0}
.usercard .username,.usercard .gamer{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(min-width:1051px){
  .app{
    grid-template-columns:300px minmax(0,1fr)!important;
  }
  .sidebar{
    width:300px!important;
    height:100vh!important;
    height:100dvh!important;
    display:grid!important;
    grid-template-rows:auto auto minmax(0,1fr) auto!important;
    align-content:stretch!important;
    gap:10px!important;
    padding:13px 14px 12px!important;
    overflow:hidden!important;
  }
  .brand{
    margin:0!important;
    padding:7px 8px 14px!important;
    min-height:70px!important;
  }
  .brand>span{
    font-size:15px!important;
    letter-spacing:.18em!important;
  }
  .usercard{
    margin:0!important;
    min-height:136px!important;
  }
  .nav{
    min-height:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    padding:4px 4px 12px 0!important;
    scrollbar-width:thin;
    scrollbar-color:rgba(233,185,47,.20) transparent;
    mask-image:linear-gradient(to bottom,transparent 0,#000 12px,#000 calc(100% - 14px),transparent 100%);
  }
  .nav::-webkit-scrollbar{width:5px}
  .nav::-webkit-scrollbar-track{background:transparent}
  .nav::-webkit-scrollbar-thumb{background:rgba(233,185,47,.18);border-radius:999px}
  .nav button{
    width:100%!important;
    flex:none!important;
  }
  .logout{
    margin:0!important;
    min-height:42px!important;
    flex:none!important;
  }
  .workspace:before{left:300px!important}
}

@media(max-width:1050px){
  .brandmark.small.official-logo{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    border-radius:13px!important;
  }
  .usercard{min-height:0!important}
}

@media(prefers-reduced-motion:reduce){
  .brandmark.official-logo:after{animation:none!important}
}