</html>
/* NOVO: Ajuste para melhor controle */
* {
box-sizing: border-box; /* Garante que padding e border não aumentem a largura total */
}
/* No topo do seu arquivo inventario.css */
:root {
/* ... variáveis ... */
--cor-fundo-principal: #34495e;
--cor-slot-vazio: #2c3e50;
--cor-borda-destaque: #f39c12;
}
.inventario-container {
width: 500px;
margin: 50px auto;
background-color: var(--cor-fundo-principal);
padding: 20px;
border-radius: 10px;
}
.item-principal {
height: 100px;
border: 3px solid var(--cor-borda-destaque);
background-color: #2c3e50;
margin-bottom: 15px;
text-align: center;
line-height: 100px;
color: white;
}
.slots-grid {
display: grid;
/* Correção: Usa 1fr para que o Grid decida a altura das duas linhas */
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 10px;
padding-top: 10px; /* Reduzi o padding para ficar mais compacto */
height: 180px; /* Adiciona uma altura para o Grid funcionar melhor com '1fr' */
}
.slot {
/* Não precisa mais de height fixo se o grid-template-rows usar '1fr' */
background-color: var(--cor-slot-vazio);
border: 2px solid var(--cor-fundo-principal);
border-radius: 5px;
text-align: center;
/* line-height 80px para o texto ficar no meio */
line-height: 80px;
color: white;
font-size: 12px;
transition: all 0.2s ease-out;
}
.item-raro {
--cor-slot-vazio: #8e44ad; /* Roxo Lendário */
border: 3px solid gold;
box-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
}
.slot:hover {
/* Efeito de Seleção (Brilho + Transformação) */
/* 1. Faz o slot "pular" levemente */
transform: translateY(-2px) scale(1.03);
/* 2. Adiciona um brilho sutil para indicar o foco/seleção */
box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.4);
/* 3. Mudar a borda para a cor de destaque (Laranja GS) */
border: 2px solid var(--cor-borda-destaque);
/* IMPORTANTE: Use o cursor pointer para simular que é clicável */
cursor: pointer;
}
/* ITEM RARO: Sobrescrevendo o tema */
/* Adicione esta regra */
.item-principal:hover {
/* Simula uma borda mais grossa e um brilho levemente diferente */
border: 3px solid white;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
cursor: pointer;
transform: scale(1.01); /* Pula menos que os slots menores */
}