/* Vitrine 3D — usada tanto pela pagina solta (vestiario.html) quanto pela
   pagina do site (vestiario.php). Todas as classes levam o prefixo `vest-`
   para nao colidir com o CSS do site. */

/* A navbar do site e `position: fixed`, entao a pagina precisa reservar o
   espaco dela no topo. Mesmo valor que .ranking-page / .rules-page /
   .download-page usam no style.css do site. Sem isso o badge "Aparencias"
   sobe por tras da barra. */
.vestiario-page{
  padding:120px 0 80px;
  min-height:100vh;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212,160,23,.06) 0%, transparent 50%),
    #0a0a0a;
}

.vest-app{
  --vest-painel:#151922;
  --vest-borda:#232936;
  --vest-texto:#e6e9f0;
  --vest-apagado:#8b93a6;
  --vest-realce:#c8a24a;
  --vest-fundo:#0d0f14;

  display:grid;
  grid-template-columns:290px 1fr;
  height:min(78vh, 820px);
  min-height:460px;
  border:1px solid var(--vest-borda);
  border-radius:10px;
  overflow:hidden;
  background:var(--vest-fundo);
  color:var(--vest-texto);
  font-family:"Raleway",-apple-system,"Segoe UI",Roboto,sans-serif;
}

.vest-app *{box-sizing:border-box}

.vest-lateral{
  background:var(--vest-painel);
  border-right:1px solid var(--vest-borda);
  display:flex; flex-direction:column; min-height:0;
}

.vest-abas{display:flex; gap:4px; padding:12px}
.vest-abas button{
  flex:1; padding:7px 0; font-size:12.5px; cursor:pointer;
  color:var(--vest-apagado); background:transparent;
  border:1px solid var(--vest-borda); border-radius:6px;
  font-family:inherit; transition:.12s;
}
.vest-abas button:hover{color:var(--vest-texto); border-color:#333c4e}
.vest-abas button[aria-selected="true"]{
  color:#12141a; background:var(--vest-realce);
  border-color:var(--vest-realce); font-weight:600;
}

.vest-busca{padding:0 12px 10px}
.vest-busca input{
  width:100%; padding:8px 10px; font-size:13px; color:var(--vest-texto);
  background:#0f131a; border:1px solid var(--vest-borda); border-radius:6px;
  font-family:inherit;
}
.vest-busca input:focus{outline:none; border-color:var(--vest-realce)}

.vest-lista{flex:1; overflow-y:auto; padding:0 8px 14px}
.vest-lista::-webkit-scrollbar{width:9px}
.vest-lista::-webkit-scrollbar-thumb{background:#2a3140; border-radius:5px}
.vest-item{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  width:100%; padding:8px 10px; margin-bottom:2px; text-align:left;
  font-size:13.5px; color:var(--vest-apagado); cursor:pointer;
  font-family:inherit; background:transparent; border:0; border-radius:6px;
  transition:.1s;
}
.vest-item:hover{background:#1c2230; color:var(--vest-texto)}
.vest-item[aria-current="true"]{
  background:#232a3a; color:var(--vest-realce); font-weight:600;
}
.vest-item span:last-child{font-size:11px; opacity:.55; flex-shrink:0}
.vest-vazio{padding:20px 14px; font-size:13px; color:var(--vest-apagado)}

.vest-palco{position:relative; min-width:0}
.vest-palco canvas{display:block; width:100%; height:100%; cursor:grab}
.vest-palco canvas:active{cursor:grabbing}

.vest-info{
  position:absolute; left:18px; bottom:16px; pointer-events:none;
  text-shadow:0 1px 6px rgba(0,0,0,.85);
}
.vest-info h2{
  font-size:18px; font-weight:600; margin:0;
  font-family:"Cinzel",serif; color:var(--vest-texto);
}
.vest-info p{font-size:12px; color:var(--vest-apagado); margin:2px 0 0}

.vest-estado{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:14px; color:var(--vest-apagado); pointer-events:none;
}
.vest-estado[hidden]{display:none}

.vest-controles{position:absolute; right:16px; top:14px; display:flex; gap:6px}
.vest-controles button{
  padding:6px 11px; font-size:12px; color:var(--vest-apagado); cursor:pointer;
  background:rgba(21,25,34,.85); border:1px solid var(--vest-borda);
  border-radius:6px; font-family:inherit;
}
.vest-controles button:hover{color:var(--vest-texto)}
.vest-controles button[aria-pressed="true"]{
  color:var(--vest-realce); border-color:var(--vest-realce);
}

.vest-dica{
  position:absolute; right:16px; bottom:16px; font-size:11.5px;
  color:var(--vest-apagado); opacity:.6; pointer-events:none;
}

@media (max-width:820px){
  .vest-app{grid-template-columns:1fr; grid-template-rows:40vh 1fr; height:86vh}
  .vest-lateral{border-right:0; border-bottom:1px solid var(--vest-borda)}
  .vest-dica{display:none}
}