:root{
    --bg-main: #1a0f14;        /* vinho escuro profundo */
    --bg-panel: #24141b;       /* vermelho queimado escuro */
    --bg-header: #3a1f29;      /* vermelho escuro elegante */
    --bg-hover: #4a2633;       /* vermelho médio hover */
    --gold: #ffcc33;           /* dourado vivo */
    --gold-dark: #ff9900;      /* dourado intenso */
    --text-main: #f5e6e8;      /* branco levemente rosado */
    --text-muted: #c9a9ad;     /* rosa acinzentado */
    --danger: #ff3b3b;         /* vermelho forte */
    --success: #4ade80;        /* verde claro vibrante */
    cursor: url(imagem-cursor.png), auto;
}

body{
background-color: #141c29;
    display: flex;
    flex-direction: column;
    padding-top: 2em;
   
    

}

button{
     cursor: url(imagem-cursor.png), auto;
}

table{
   
    border-collapse:collapse ;
    color:var(--text-main);
  
}

#btn-comprar2{
    display: none;
}
.th{
    display: none;
}
 
.listacategorias{
 position: fixed;
}
.lista-items{
  margin-left: 5.2em;
  margin-top: 0.2em;
}

.titulo{
    padding-top: 0.5em;
    position: relative;
  background-color:var(--bg-main);
  height: 20em;
    width: min-content;
      overflow-y: auto;
     
}
#tfoot{
    position: fixed;
    top: 50%;
}
.titulo h1{
    font-size: 1.5em;
       margin: 0;
    text-align: center;
    background-color: var(--bg-header);
     color:var(--text-main);
    z-index: 1;
    position: fixed;
  top: 0.5em;
    width: 22.45em;


}
.loja-container{
    display: flex;
   padding: 0.5em;
   padding-left: 0.2em;
   width: 33em;


   
    
}
.ouro{
    position: fixed;
    top: 21.5em;
    left: 0.6em;
    background-color: #222;
    font-weight: bold;
    color:var(--gold);
}
#categorias{
    position: fixed;
  
    top: 2.5em;
padding-left: 0.5em;

}



.filtros-div{
    display: flex;
    flex-direction: column;
   
       justify-content: space-between;
}
.categoria-container{
    display: flex;
    flex-direction: column;
  
}

#filtros{
    display: flex;
    flex-direction: column;
   gap: 0.2em;
   position: fixed;
 
  
}
#filtros button{
  padding: 0.3em;
    
}

#categorias{
    display: flex;
   
}
#thead th:nth-of-type(1){
text-align: left;
}
#thead th:nth-of-type(3){
    text-align: right;
    position: fixed;
    left: 27em;
     top: 2.2em;
     padding-top: 0.2em;
     padding-right: 4.5em;
    background-color: var(--bg-panel);
}
#thead th:nth-of-type(4){
    text-align: right;
    position: fixed;
    left: 31em;
     top: 2.2em;
     padding-top: 0.2em;
     padding-right: 0.65em;
      
    background-color: var(--bg-panel);
}
#thead th:nth-of-type(2){
    text-align: right;
    position: fixed;
    left: 22em;
     top: 2.2em;
   padding-top: 0.2em;
       padding-right: 2em;
    background-color: var(--bg-panel);
}
#thead th:nth-of-type(1){
    text-align: right;
    position: fixed;
    top: 2.3em;
    left: 5.9em;
    padding-top: 0.1em;
    padding-right: 14em;
    background-color:  var(--bg-panel);
}
#thead th:nth-of-type(2){
text-align: left;
}
#thead th{
  font-size: 1em;

}

    

table td:nth-of-type(1){
    width:20em;
    white-space: nowrap;      
    overflow: hidden;         
    text-overflow: ellipsis; 

   
  

}
table td:nth-of-type(3){
    z-index: 5;
 padding-left: 3em;
 text-align: right;
 
}
table td:nth-of-type(4){
      padding: 0;
 padding-left: 2em;


 text-align: right;
}



#lista tr.selecionado {
  outline: 1px solid yellow;
   
    color:red;
    transition: 0.2s;
}
#btn-comprar{
    position: fixed;
    padding: 0.5em;
    top: 25em;
    left: 35.6em;
    border: 1px solid transparent;
}
#btn-comprar:hover{
    border: 1px solid red;
   
}
#btn-comprar:active{
    color: red;
}
/* Barra inteira */
.titulo::-webkit-scrollbar{
    width: 10px;
}

/* Fundo do scroll */
.titulo::-webkit-scrollbar-track{
    background: var(--bg-panel);
    border-radius: 10px;
}

/* Parte que se move */
.titulo::-webkit-scrollbar-thumb{
    background: var(--bg-header);
    border-radius: 10px;
    border: 2px solid var(--bg-panel);
}

/* Hover no scroll */
.titulo::-webkit-scrollbar-thumb:hover{
    background: var(--gold-dark);
}
button{
    margin: 0;
    margin-bottom: 1px;
    color: var(--text-muted);
    background-color: var(--bg-hover);
    border: 1px solid transparent;
}
button:hover{
    border: 1px solid red;
}
/* Item Épico */
#lista tr.epico{
    box-shadow: 0 0 6px rgba(180, 0, 255, 0.6);
    border-left: 3px solid #a855f7;
    transition: 0.2s;
}

/* Glow mais forte ao passar mouse */
#lista tr.epico:hover{
    box-shadow: 0 0 12px rgba(180, 0, 255, 0.9);
}

/* Glow máximo quando selecionado */
#lista tr.epico.selecionado{
    box-shadow: 0 0 18px rgba(180, 0, 255, 1);
    background: linear-gradient(
        90deg,
        rgba(168,85,247,0.15),
        transparent
    );
}
/* LENDÁRIO 💎 */
#lista tr.lendario{
    border-left: 3px solid #00e5ff;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.7);
    transition: 0.2s;
}

/* Hover lendário */
#lista tr.lendario:hover{
    box-shadow: 0 0 16px rgba(0, 229, 255, 1);
}

/* Selecionado lendário */
#lista tr.lendario.selecionado{
    box-shadow: 0 0 25px rgba(0, 229, 255, 1);
    background: linear-gradient(
        90deg,
        rgba(0,229,255,0.15),
        transparent
    );
}

@media  screen and (max-width:950px){
    .titulo h1{
    font-size: 1.5em;
       margin: 0;
    text-align: center;
    background-color: var(--bg-header);
     color:var(--text-main);
    z-index: 1;
    position: fixed;
  top: 0.5em;
    width: 15.8em;


}
.titulo{
    padding-top: 0.5em;
    position: relative;
  background-color:var(--bg-main);
  height: 20em;
    width: min-content;
      overflow-y: auto;
     
}
.loja-container{
    display: flex;
   padding: 0.5em;
   padding-left: 0.2em;
   width: 22.9em;


   
    
}
#table{
  
    padding: 0;
}
table tr{

padding: 0;
}
table td{
    padding: 0;
    font-size: 0.8em;
}
table th{
 
}

button{
font-size: 0.8em;
}
#btn-comprar{
    display: none;
}
#btn-comprar2{
   display: flex;
    position: fixed;
    padding: 0.5em;
    top: 26em;
    left: 24.7em;
    border: 1px solid transparent;
}
#thead{
  display: none;
}
button:hover{
    border: 1px solid red;
}
#btn-comprar2:hover{
    border: 1px solid red;
   
}
#btn-comprar2:active{
    color: red;
}
.th{
    display: flex;
    position: relative;
   
}

.th th{
    position: fixed;
    font-size: 0.7em;

}
.th th:nth-of-type(1){
    top: 3.4em;
    background-color: var(--bg-panel);
    padding-right: 10em;
   
}
.th th:nth-of-type(2){
    top: 3.4em;
    left: 21em;
    background-color: var(--bg-panel);
     padding-right: 2em;
}
.th th:nth-of-type(3){
    top: 3.4em;
    left: 26.5em;
    background-color: var(--bg-panel);
    padding-right: 3em;
}
.th th:nth-of-type(4){
    top: 3.4em;
    left: 30.7em;
  
    background-color: var(--bg-panel);
}

table td:nth-of-type(3){
    z-index: 5;

padding-right: 0;
 text-align: right;
 
}
table td:nth-of-type(1){
 font-size: 0.6em;
}
table td:nth-of-type(2){
    z-index: 5;
padding-left: 2em;
 text-align: right;
 
}
table td:nth-of-type(4){
    z-index: 5;
font-size: 0.7em;
 text-align: right;
 
}

}