/* Importa fontes */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;800&family=Inter:wght@400;600;700&display=swap');

/* Define a fonte principal (Inter) e a fonte de exibição (Cinzel) */
body {
    font-family: 'Inter', sans-serif;
}

.font-cinzel {
    font-family: 'Cinzel', serif;
}

/* --- NOVAS TEXTURAS E FUNDOS --- */

/* Fundo de madeira escura e rica para o body */
.bg-tomb-wood {
    background-color: #382a1a;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%),
                      linear-gradient(225deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%),
                      linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%),
                      linear-gradient(315deg, rgba(255, 255, 255, 0.05) 25%, #382a1a 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
    background-repeat: repeat;
}

/* Textura de papiro/linho claro para os painéis laterais */
.side-panel {
    background-color: #f7f3e8;
    color: #4a3b29;
    border: 4px solid #c0a870;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1), 
                inset 0 0 15px rgba(0,0,0,0.1);
}

/* --- NOVOS ESTILOS DE BOTÕES (PREMIUM) --- */

/* Removido @apply das classes de botão para compatibilidade com CDN */
.btn-primary {
    width: 100%;
    padding: 1rem; /* p-4 */
    border-radius: 0.5rem; /* rounded-lg */
    font-weight: 700; /* font-bold */
    font-size: 1.25rem; /* text-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    transition: all 0.3s;
    transform: scale(1);
    font-family: 'Cinzel', serif;
    background: linear-gradient(145deg, #f0c975, #d4a94f);
    color: #4a3b29;
    border: 2px solid #f5e5c0;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3), 
                inset 0 -2px 2px rgba(0,0,0,0.2), 
                inset 0 2px 2px rgba(255,255,255,0.5);
}
.btn-primary:hover {
    transform: scale(1.05); /* scale-105 */
    background: linear-gradient(145deg, #f5d48f, #e0b660);
}

.btn-secondary {
    width: 100%;
    padding: 0.75rem; /* p-3 */
    border-radius: 0.5rem; /* rounded-lg */
    font-weight: 700; /* font-bold */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    transition: all 0.3s;
    font-family: 'Cinzel', serif;
    background: linear-gradient(145deg, #a0a0a0, #707070);
    color: #ffffff;
    border: 2px solid #c0c0c0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3), 
                inset 0 -1px 1px rgba(0,0,0,0.2), 
                inset 0 1px 1px rgba(255,255,255,0.5);
}
.btn-secondary:hover {
    background: linear-gradient(145deg, #b0b0b0, #808080);
}

/* Ajustes para botões de poder (roxo, verde, etc.) */
.btn-secondary.bg-purple-600 {
    background: linear-gradient(145deg, #9f7aea, #805ad5);
    border-color: #c4b5fd;
}
.btn-secondary.bg-purple-600:hover { background: linear-gradient(145deg, #b794f4, #9f7aea); }

.btn-secondary.bg-yellow-600 {
    background: linear-gradient(145deg, #ecc94b, #d69e2e);
    border-color: #f6e05e;
    color: #4a3b29;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
}
.btn-secondary.bg-yellow-600:hover { background: linear-gradient(145deg, #f6e05e, #ecc94b); }

.btn-secondary.bg-green-600 {
    background: linear-gradient(145deg, #68d391, #48bb78);
    border-color: #9ae6b4;
}
.btn-secondary.bg-green-600:hover { background: linear-gradient(145deg, #81e6a9, #68d391); }

/* --- NOVOS ESTILOS DO TABULEIRO --- */

/* Trilha central da Tumba */
.tomb-track {
    width: 6rem; /* w-24 */
    height: 100%; 
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem; /* p-2 */
    background: linear-gradient(to bottom, #f0e6c8, #e0d6b8);
    border-left: 10px solid #8b4513; /* Mogno/Madeira Vermelha */
    border-right: 10px solid #8b4513;
    border-top: 10px solid #a0522d; /* Siennna */
    border-bottom: 10px solid #a0522d;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.5);
}

/* --- ATUALIZAÇÃO: Números na Trilha da Tumba --- */
.tomb-number-track {
    position: absolute;
    top: 100px; /* Abaixo da máscara */
    bottom: 70px; /* Acima do cartucho */
    display: flex;
    flex-direction: column;
    justify-content: space-around; /* Espaça os 5 números */
}
.tomb-number-track.left-0 {
    left: 12px; /* Dentro da borda esquerda */
    align-items: flex-start;
}
.tomb-number-track.right-0 {
    right: 12px; /* Dentro da borda direita */
    align-items: flex-end;
}
.tomb-number {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.1rem; /* 18px */
    color: #4a3b29;
    opacity: 0.7;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
}


/* SVG para a Máscara (topo da tumba) */
.tomb-mask-svg {
    max-width: 200%;
    width: 200px;
    height: auto;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}

/* SVG para o Cartucho (base da tumba) */
.tomb-cartouche-svg {
    width: 70px;
    height: auto;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* Câmaras (Fileiras) - simula couro/madeira vermelha */
/* ATUALIZAÇÃO: Este é agora o CARD INDIVIDUAL */
.chamber-slot {
    padding: 0.5rem; /* p-2 -> Removido, o flex center cuida disso */
    display: flex; /* Adicionado */
    align-items: center; /* Adicionado */
    justify-content: center; /* Adicionado */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    position: relative;
    background: linear-gradient(145deg, #a85a38, #8c4a2e); /* Tom de couro/mogno */
    border: 2px solid #d4a94f; /* Borda dourada */
    border-radius: 0.5rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3), 
                inset 0 2px 4px rgba(0,0,0,0.2);
}

/* --- ATUALIZAÇÃO: REMOVIDA MÁSCARA DE CAVEIRA --- */

/* Slot VAZIO da câmara - Sombra */
/* Este agora é o CONTEÚDO do .chamber-slot */
.chamber-empty-slot {
    /* w-10 h-10 */
    background-color: rgba(0, 0, 0, 0.2); /* Sombra escura */
    border: 1px solid rgba(0,0,0,0.3);
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.4);
    border-radius: 9999px; /* Arredonda */
    display: flex; /* Adicionado */
    align-items: center; /* Adicionado */
    justify-content: center; /* Adicionado */
}

/* Peça da Múmia (ocupada) - Agora é o ícone SVG */
.mummy-piece {
    /* w-8 h-8 */
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
    /* A cor é definida inline */
}


/* --- ESTILOS DE UI RESTANTES (Ajustes) --- */

#game-log-container {
    background-color: #f7f3e8; /* Agora é .side-panel */
    border: none; /* Agora é .side-panel */
}
#game-log li {
    border-bottom: 1px solid rgba(180, 150, 90, 0.3); /* border-yellow-700 border-opacity-30 */
    padding: 0.5rem; /* p-2 */
    font-size: 0.875rem; /* text-sm */
}

[writing-mode="vertical-rl"] {
    writing-mode: vertical-rl;
}

/* Animação do dado (OK) */
@keyframes dice-land-kf {
    from { transform: translateY(-20px) scale(0.8); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
.dice-landed {
    animation: dice-land-kf 0.3s ease-out;
}

/* --- ESTILOS DO MODAL DE DADOS 3D (Ajustes) --- */

.diceWrap {
    position: relative; 
    width: 100px; 
    height: 100px; 
    /* Sombra do dado (OK) */
}
.diceWrap::before {
    position: absolute;
    content: "";
    width: 70%;
    height: 10%;
    top: 110%; 
    left: 15%;
    background: rgba(0, 0, 0, 0.4); /* Sombra mais escura no modal */
    border-radius: 100%;
    filter: blur(10px);
    transition: 0.5s;
}

/* Dado 3D (OK) */
.dice {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 0; 
    left: 0; 
    transform-style: preserve-3d;
    transform: rotate3d(0.5, 0.8, 0.2, 120deg); 
    transition: 0.5s cubic-bezier(0.42, 1.57, 0.62, 0.86);
}
.dice.rolling {
    animation: rotatePerFace 3s cubic-bezier(0.42, 1.57, 0.62, 0.86) infinite;
}
.dice.throw {
    animation: rotateDice 0.7s ease-in reverse, throwDice 1s linear;
}

/* Faces do Dado (Ajuste de Cor para marfim/osso) */
.dice .diceFace {
    box-sizing: border-box;
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #fdf6e4; /* Cor de marfim */
    border: 2px solid #ffffff;
    border-radius: 20px;
    transform-style: preserve-3d;
    transition: 0.5s;
}
.dice .diceFace::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #fffbf0; /* Marfim mais claro */
    border-radius: 20px;
    transform: translateZ(-1px);
}
/* Pontos (Pips) */
.dice .diceFace::after {
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -10px;
    background-color: #4a3b29; /* Marrom escuro */
    border-radius: 100%;
    transform: translateZ(1px);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5); /* Profundidade nos pontos */
}

/* Face 1 (Frente) - Vermelho Cornalina */
.dice .front { transform: translateZ(50px); }
.dice .front::after {
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    background-color: #b9403d; /* Vermelho Cornalina */
}

/* Face 2 (Cima) */
.dice .up { transform: rotateX(90deg) translateZ(50px); }
.dice .up::after {
    margin: -30px 0 0 -30px;
    box-shadow: 40px 40px #4a3b29;
}

/* Face 3 (Esquerda) */
.dice .left { transform: rotateY(-90deg) translateZ(50px); }
.dice .left::after {
    margin: -40px 0 0 -40px;
    box-shadow: 30px 30px #4a3b29, 60px 60px #4a3b29;
}

/* Face 4 (Direita) - Azul Lapis Lazuli */
.dice .right { transform: rotateY(90deg) translateZ(50px); }
.dice .right::after {
    margin: -30px 0 0 -30px;
    background-color: #304a8b; /* Azul Lapis Lazuli */
    box-shadow: 40px 0px #304a8b, 0px 40px #304a8b, 40px 40px #304a8b;
}

/* Face 5 (Baixo) */
.dice .bottom { transform: rotateX(-90deg) translateZ(50px); }
.dice .bottom::after {
    margin: -36px 0 0 -36px;
    box-shadow: 26px 26px #4a3b29, 52px 52px #4a3b29, 52px 0px #4a3b29, 0px 52px #4a3b29;
}

/* Face 6 (Trás) */
.dice .back { transform: rotateX(180deg) translateZ(50px); }
.dice .back::after {
    margin: -40px 0 0 -30px;
    box-shadow: 40px 0px #4a3b29, 0px 30px #4a3b29, 40px 30px #4a3b29, 0px 60px #4a3b29, 40px 60px #4a3b29;
}

/* Keyframes (OK) */
@keyframes rotateDice {
    30% { transform: rotate3d(1, 1, 1, 0deg); }
    100% { transform: rotate3d(1, 1, 1, 720deg); }
}
@keyframes rotatePerFace {
    16% { transform: rotate3d(-0.1, 0.6, -0.4, 180deg); } /* Face 2 */
    32% { transform: rotate3d(-0.85, -0.42, 0.73, 180deg); } /* Face 3 */
    48% { transform: rotate3d(-0.8, 0.3, -0.75, 180deg); } /* Face 4 */
    64% { transform: rotate3d(0.3, 0.45, 0.9, 180deg); } /* Face 5 */
    80% { transform: rotate3d(-0.16, 0.6, 0.18, 180deg); } /* Face 6 */
    100% { transform: rotate3d(-0.1, 0.3, -1, 180deg); } /* Face 1 */
}
@keyframes throwDice {
    20% { margin-top: -100px; }
    40% { margin-top: 0px; }
    60% { margin-top: -30px; }
    80% { margin-top: 0px; }
    85% { margin-top: -10px; }
    90% { margin-top: 0px; }
    95% { margin-top: -3px; }
    100% { margin-top: 0px; }
}
@keyframes throwDiceShadow {
    20% { transform: scale(1.2); top: 130%; } 
    40% { transform: scale(1); top: 110%; } 
    60% { transform: scale(1.1); top: 120%; } 
    80% { transform: scale(1); top: 110%; }
    100% { transform: scale(1); top: 110%; }
}