/* Menu lateral novo do Arena eSports (aprovado em preview-menu.html).
   Sobrescreve as regras antigas de .menu e do botao que estao no head.php.
   O abrir/fechar continua no jQuery do footer.php: ".headline-menu" -> ".menu.display". */

/* ---------- botao do cabecalho: hamburguer + "Menu" (vira X + "Fechar") ---------- */
.headline .headline-logo{ display:flex; align-items:center; height:52px; line-height:normal; padding-top:0; border-bottom:0; overflow:visible; }
.headline .headline-logo a{ float:none; display:flex; align-items:center; gap:6px; color:#fff; text-decoration:none; }
.headline .headline-logo .logo{ margin:0; }
.headline .headline-logo .headline-menu{
  float:none; display:flex; align-items:center; gap:8px; height:36px; margin:0 14px 0 0; padding:0 12px 0 10px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); border-radius:4px;
  color:#fff; cursor:pointer; font:700 12px Cairo, sans-serif; letter-spacing:.12em;
  text-transform:uppercase; line-height:1; transition:background-color .16s ease, border-color .16s ease;
}
.headline .headline-logo .headline-menu:hover{ background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.55); }
.headline .headline-logo .headline-menu:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.headline-menu .hamb{ position:relative; width:18px; height:12px; flex:0 0 auto; }
.headline-menu .hamb i{ position:absolute; left:0; width:18px; height:2px; border-radius:2px; background:#fff;
                        transition:transform .22s ease, opacity .16s ease, top .22s ease; }
.headline-menu .hamb i:nth-child(1){ top:0; } .headline-menu .hamb i:nth-child(2){ top:5px; } .headline-menu .hamb i:nth-child(3){ top:10px; }
.headline-menu.aberto .hamb i:nth-child(1){ top:5px; transform:rotate(45deg); }
.headline-menu.aberto .hamb i:nth-child(2){ opacity:0; }
.headline-menu.aberto .hamb i:nth-child(3){ top:5px; transform:rotate(-45deg); }
.headline-menu .rotulo-menu{ display:grid; justify-items:start; }
.headline-menu .rotulo-menu > span{ grid-area:1/1; }
.headline-menu .r-fechar, .headline-menu.aberto .r-abrir{ visibility:hidden; }
.headline-menu.aberto .r-fechar{ visibility:visible; }
@media (max-width:480px){
  .headline-menu .rotulo-menu{ display:none; }
  .headline .headline-logo .headline-menu{ padding:0 9px; margin-right:10px; }
}

/* ---------- painel ---------- */
.menu{ width:250px; background:#fff; position:fixed; left:0; top:52px; bottom:0; min-height:0; z-index:10;
       overflow-y:auto; overscroll-behavior:contain; visibility:hidden; opacity:0;
       transform:translateX(-100%); box-shadow:2px 0 14px rgba(18,80,99,.12); font-family:Cairo, sans-serif;
       scrollbar-width:thin; scrollbar-color:#cfdcdd transparent; }
.menu::-webkit-scrollbar{ width:6px; }
.menu::-webkit-scrollbar-thumb{ background:#cfdcdd; border-radius:3px; }
.menu.display{ visibility:visible; transform:translateX(0); opacity:1; transition:transform .5s, opacity .5s; }
.menu *{ box-sizing:border-box; }
.menu a{ text-decoration:none; }

/* titulo de grupo */
.menu .grupo{ display:flex; align-items:center; gap:8px; padding:16px 16px 6px; font-size:10.5px;
              font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#8a959a; }
.menu .grupo::after{ content:''; flex:1; height:1px; background:#e6eced; }

/* 1o nivel */
.menu .n1{ border-bottom:1px solid #f4f7f7; }
.menu .n1 > button, .menu .n1 > a.solo{
  width:100%; display:flex; align-items:center; gap:10px; padding:12px 16px; background:transparent;
  border:0; cursor:pointer; text-align:left; font:700 14px Cairo, sans-serif;
  color:#1b2226; position:relative; transition:background-color .16s ease, color .16s ease;
}
.menu .n1 > button::before, .menu .n1 > a.solo::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:#2ea086;
  transform:scaleY(0); transition:transform .18s ease;
}
.menu .n1 > button:hover, .menu .n1 > a.solo:hover{ background:#f5f8f8; color:#1d7071; }
.menu .n1 > button:hover::before, .menu .n1 > a.solo:hover::before, .menu .n1.aberto > button::before{ transform:scaleY(1); }
.menu .n1.aberto > button{ color:#125063; }
.menu .mais{ margin-left:auto; color:#c3ced1; font-size:17px; line-height:1; font-weight:400;
             transition:transform .22s ease, color .16s ease; }
.menu .n1.aberto > button .mais{ transform:rotate(45deg); color:#2ea086; }
.menu .seta{ margin-left:auto; color:#c3ced1; transition:transform .18s ease, color .16s ease; }
.menu .n1 > a.solo:hover .seta{ color:#2ea086; transform:translateX(3px); }

/* acordeao */
.menu .dentro{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .26s ease; }
.menu .aberto > .dentro{ grid-template-rows:1fr; }
.menu .dentro > .rolo{ overflow:hidden; }
.menu .n1 .dentro > .rolo{ background:#fbfdfd; border-top:1px solid #eef4f4; }

/* 2o nivel */
.menu .n2 > a, .menu .n2 > button{
  width:100%; display:flex; align-items:center; gap:9px; padding:10px 16px 10px 30px;
  background:transparent; border:0; cursor:pointer; text-align:left;
  font:700 12.5px Cairo, sans-serif; color:#46565c; position:relative;
  transition:color .16s ease, background-color .16s ease, padding-left .16s ease;
}
.menu .n2 > a::before, .menu .n2 > button::before{
  content:''; position:absolute; left:17px; top:50%; width:5px; height:5px; margin-top:-2.5px;
  border-radius:50%; background:#cfdcdd; transition:background-color .16s ease;
}
.menu .n2 > a:hover, .menu .n2 > button:hover{ color:#1d7071; background:#f2f8f7; padding-left:34px; }
.menu .n2 > a:hover::before, .menu .n2 > button:hover::before{ background:#2ea086; }
.menu .n2 .mais{ font-size:15px; }
.menu .n2.aberto > button{ color:#125063; }
.menu .n2.aberto > button::before{ background:#2ea086; }
.menu .n2.aberto > button .mais{ transform:rotate(45deg); color:#2ea086; }

/* 3o nivel (para os guias e tier lists, quando existirem) */
.menu .n3{ display:block; padding:8px 16px 8px 44px; font-size:12.5px; color:#5d6b71;
           position:relative; transition:color .16s ease, background-color .16s ease, padding-left .16s ease; }
.menu .n3::before{ content:''; position:absolute; left:31px; top:0; bottom:0; width:2px; background:#e4edee;
                   transition:background-color .16s ease; }
.menu .n3:hover{ color:#1d7071; background:#f2f8f7; padding-left:48px; }
.menu .n3:hover::before{ background:#2ea086; }

/* Games: faixa tingida com explicacao */
.menu .games > a.solo{ background:#f1f7f6; padding-top:13px; padding-bottom:13px; }
.menu .games > a.solo:hover{ background:#e8f3f0; }
.menu .games .txt{ display:flex; flex-direction:column; gap:1px; }
.menu .games .txt b{ color:#125063; font-size:14px; }
.menu .games .txt small{ font-weight:400; font-size:11.5px; color:#5d6b71; letter-spacing:.01em; }
.menu .games{ border-bottom:1px solid #e0edea; }

/* conta: so no celular/tablet (no computador os links ficam no cabecalho) */
.menu .menu-conta{ display:flex; flex-direction:column; gap:8px; padding:14px 16px 26px; border-top:1px solid #eef2f3; background:#fafcfc; }
.menu .menu-conta a{ display:block; text-align:center; padding:10px; border-radius:4px;
                     font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
                     transition:filter .16s ease, border-color .16s ease, color .16s ease; }
.menu .menu-conta .principal{ background:linear-gradient(90deg,#125063,#2ea086); color:#fff; }
.menu .menu-conta .principal:hover{ filter:brightness(1.1); }
.menu .menu-conta .secundario{ background:#fff; border:1px solid #dde4e6; color:#1d7071; }
.menu .menu-conta .secundario:hover{ border-color:#2ea086; color:#125063; }
@media (min-width:1011px){ .menu .menu-conta{ display:none; } }

@media (prefers-reduced-motion: reduce){ .menu, .menu *, .headline-menu *{ transition:none !important; } }