/* Estilos gerais do corpo, fontes e cores base */
html, body {
    width: 100%; /* Garante cobertura total da largura */
    height: 100%; /* Garante cobertura total da altura */
    margin: 0; /* Remove margens padrão do navegador */
    padding: 0; /* Remove preenchimento padrão do navegador */
}

body {
    font-family: 'Open Sans', sans-serif; /* Define a fonte principal */
    background-color: #f0f2f5; /* Cor de fundo suave */
    display: flex; /* Usa flexbox para centralizar o conteúdo */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    min-height: 100vh; /* Garante que o corpo ocupe pelo menos 100% da altura da viewport */
    color: #333; /* Cor de texto principal */
    overflow-x: hidden; /* Crucial para prevenir a barra de rolagem horizontal */
    font-size: 1em; /* Tamanho base da fonte para o corpo */
}

h1, h2, h3 {
    font-family: 'Fredoka One', cursive; /* Fonte especial para títulos */
    color: #4CAF50; /* Cor verde para títulos */
    margin-bottom: 20px; /* Margem inferior para separar títulos */
}

/* --- Regra 'hidden' essencial --- */
.hidden {
    display: none !important; /* Crucial para mostrar/ocultar elementos dinamicamente, sobrepõe outras regras de display */
}

/* --- Estilo dos Modais --- */
.modal {
    display: flex; /* Usa flexbox para centralizar o conteúdo do modal */
    justify-content: center; /* Centraliza horizontalmente o conteúdo do modal */
    align-items: center; /* Centraliza verticalmente o conteúdo do modal */
    position: fixed; /* Posição fixa para cobrir a tela */
    z-index: 1001; /* Alto z-index para aparecer acima de outro conteúdo */
    left: 0; /* Alinha à esquerda */
    top: 0; /* Alinha ao topo */
    width: 100%; /* Ocupa 100% da largura da tela */
    height: 100%; /* Ocupa 100% da altura da tela */
    background-color: rgba(0, 0, 0, 0.7); /* Fundo semi-transparente escuro */
    overflow: auto; /* Permite rolagem se o conteúdo for muito grande */
}

.modal-content {
    background-color: #fff; /* Fundo branco para o conteúdo do modal */
    margin: auto; /* Centraliza o bloco do conteúdo do modal */
    padding: 30px; /* Preenchimento interno do conteúdo do modal */
    border-radius: 15px; /* Cantos arredondados */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Sombra para profundidade */
    max-width: 600px; /* Largura máxima para o conteúdo do modal */
    width: 90%; /* Ocupa 90% da largura disponível, adaptável */
    text-align: left; /* Alinha todo o conteúdo de texto à esquerda por padrão */
    position: relative; /* Necessário para posicionamento absoluto de elementos internos, se houver */
}

.modal-content h2 {
    color: #FFC107; /* Cor dourada para títulos dentro do modal */
    margin-bottom: 15px; /* Margem inferior para o título do modal */
    text-align: center; /* Centraliza os títulos h2 */
}

.modal-content p {
    line-height: 1.6; /* Espaçamento entre linhas para melhor legibilidade */
    margin-bottom: 20px; /* Margem inferior para parágrafos */
    font-size: 0.95em; /* Tamanho da fonte ligeiramente menor para parágrafos */
}

/* Justifica o texto para parágrafos dentro do modal de créditos */
#creditsModal .modal-content p {
    text-align: justify; /* Alinha o texto de forma justificada */
}

/* Regra específica para o parágrafo de aviso, se quiser que ele seja justificado e outros em creditsModal não */
#disclaimerParagraph {
    text-align: justify; /* Justifica o texto do parágrafo de aviso */
}

/* NOVA CLASSE: Para centralizar grupos de botões dentro dos modais */
.modal-button-group {
    display: flex; /* Usa flexbox para organizar os botões */
    justify-content: center; /* Centraliza os botões horizontalmente */
    gap: 15px; /* Espaçamento entre os botões */
    margin-top: 20px; /* Espaço acima do grupo de botões */
    flex-wrap: wrap; /* Permite que os botões quebrem para a próxima linha em telas menores */
}

.modal-content ul {
    list-style: none; /* Remove marcadores de lista padrão */
    padding: 0; /* Remove preenchimento padrão da lista */
    margin-bottom: 20px; /* Margem inferior para a lista */
}

.modal-content ul li {
    background-color: #e8f5e9; /* Cor de fundo para itens da lista */
    margin: 8px 0; /* Margem vertical para itens da lista */
    padding: 10px; /* Preenchimento interno para itens da lista */
    border-radius: 8px; /* Cantos arredondados para itens da lista */
}

/* Estilo específico para o conteúdo do modal de notificação */
.notification-content h2 {
    color: #E91E63; /* Cor vermelha/rosa para o título da notificação */
}

/* --- Estilo do Modal de Splash Screen do Vencedor --- */
#winnerSplashScreenModal .modal-content {
    background-color: #4CAF50; /* Fundo verde para o conteúdo do vencedor */
    color: white; /* Texto branco para o conteúdo do vencedor */
    padding: 15px; /* Preenchimento reduzido para top/bottom */
    border-radius: 20px; /* Cantos mais arredondados */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Sombra mais proeminente */
    max-width: 600px; /* Largura máxima padronizada */
    width: 90%; /* Ocupa 90% da largura disponível */
    display: flex; /* Usa flexbox para alinhamento interno do conteúdo */
    flex-direction: column; /* Organiza os itens em coluna */
    align-items: center; /* Alinha os itens ao centro horizontalmente */
    justify-content: center; /* Centraliza os itens verticalmente */
    gap: 10px; /* Espaçamento entre os itens */
    max-height: 90vh; /* Garante que a caixa de conteúdo não exceda 90% da altura da viewport */
    overflow-y: auto; /* Adiciona barra de rolagem se o conteúdo for muito alto */
    text-align: center; /* Mantém o conteúdo deste modal centralizado */
}

/* Quando o modal está ativo, torna-o visível */
#winnerSplashScreenModal:not(.hidden) {
    opacity: 1; /* Define a opacidade total */
}

#winnerSplashScreenModal h2 {
    color: #FFC107; /* Cor dourada para o nome do vencedor */
    font-size: 3em; /* Tamanho de fonte muito grande para o nome do vencedor */
    margin-bottom: 0; /* Sem margem inferior */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3); /* Sombra para o texto */
}

.winner-trophy-img {
    max-width: 150px; /* Tamanho ajustado para o troféu para permitir espaço para a pontuação */
    height: auto; /* Mantém a proporção da imagem */
    animation: bounceIn 1s ease-out forwards; /* Adiciona uma animação de "bounce-in" */
    margin-bottom: 5px; /* Espaço reduzido abaixo do troféu */
}

/* Definição da animação bounceIn */
@keyframes bounceIn {
    0% { transform: scale(0.3); opacity: 0; } /* Começa pequeno e invisível */
    50% { transform: scale(1.1); opacity: 1; } /* Aumenta um pouco mais do que o tamanho final */
    70% { transform: scale(0.9); } /* Diminui ligeiramente */
    100% { transform: scale(1); } /* Tamanho final */
}

.winner-game-summary {
    width: 90%; /* Ocupa mais largura para melhor legibilidade */
    background-color: #e0e0e0; /* Fundo cinza ligeiramente mais escuro para a seção de resumo */
    padding: 15px; /* Preenchimento interno */
    border-radius: 8px; /* Cantos arredondados */
    margin-top: 5px; /* Espaço reduzido acima do resumo */
    margin-bottom: 5px; /* Espaço reduzido abaixo do resumo */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* Sombra interna suave */
}

.winner-game-summary h3 {
    color: #333; /* Cor de texto mais escura para "Resumo do Jogo:" */
    font-size: 1.5em; /* Tamanho da fonte */
    margin-bottom: 10px; /* Margem inferior */
    text-shadow: none; /* Remove qualquer sombra de texto verde anterior */
    background-color: transparent; /* Garante que não haja fundo verde */
}

/* Novo contêiner para a tabela de resumo do jogo na tela do vencedor */
.game-summary-table-container {
    width: 100%; /* Ocupa a largura total */
    overflow-x: auto; /* Adiciona rolagem horizontal se a tabela for muito larga */
    display: block; /* Alterado de 'table' para melhor comportamento de overflow-x */
    margin-left: auto; /* Centraliza o contêiner */
    margin-right: auto; /* Centraliza o contêiner */
}

/* Aplica estilos de tabela de classificação à tabela de resumo do jogo do vencedor */
#gameSummaryTable {
    width: 100%; /* Ocupa 100% da largura do seu pai */
    border-collapse: collapse; /* Colapsa as bordas da tabela */
    font-size: 0.95em; /* Tamanho da fonte */
    margin-left: auto; /* Centraliza a tabela */
    margin-right: auto; /* Centraliza a tabela */
    box-sizing: border-box; /* Inclui padding e border na largura/altura total */
}

#gameSummaryTable th,
#gameSummaryTable td {
    border: 1px solid #ccc; /* Borda ligeiramente mais clara para a tabela interna */
    padding: 5px; /* Preenchimento reduzido para mais compactação vertical e horizontal */
    text-align: left; /* Alinhamento de texto padrão, sobrescrito para cabeçalhos e dados numéricos */
    color: #333; /* Garante texto escuro */
    box-sizing: border-box; /* Inclui padding e border na largura/altura total */
}

#gameSummaryTable th {
    background-color: #66BB6A; /* Verde ligeiramente mais claro para o cabeçalho da tabela de resumo */
    color: white; /* Texto branco */
    font-weight: bold; /* Texto em negrito */
    text-transform: uppercase; /* Texto em maiúsculas */
    letter-spacing: 0.5px; /* Espaçamento entre letras */
    text-align: center; /* TODOS OS CABEÇALHOS AGORA SÃO CENTRALIZADOS */
}

/* Não é mais necessário centralizar nth-child para cabeçalhos */

#gameSummaryTable tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* Fundo zebrado mais claro para o resumo */
}

#gameSummaryTable tbody tr:hover {
    background-color: #e0ffe0; /* Efeito de hover verde claro */
}

/* Alinha à direita as colunas de dados numéricos para melhor legibilidade na tabela de resumo do jogo.
    APENAS se aplica aos elementos td agora, permitindo que th seja centralizado. */
#gameSummaryTable td:nth-child(2), /* Dados corretos */
#gameSummaryTable td:nth-child(3), /* Dados errados */
#gameSummaryTable td:nth-child(4) { /* Dados de precisão */
    text-align: right; /* Alinha o texto à direita */
}

/* Garante que a coluna do nome do jogador também tenha um preenchimento consistente e compacto */
#gameSummaryTable td:first-child {
    padding: 5px; /* Preenchimento para a primeira célula (nome) */
}

.winner-buttons {
    display: flex; /* Usa flexbox para organizar os botões */
    justify-content: center; /* Centraliza os botões */
    gap: 15px; /* Espaçamento entre os botões */
    margin-top: 10px; /* Controla a margem para os botões abaixo do resumo */
}

/* --- Botões --- */
.btn {
    display: inline-block; /* Exibe como um bloco inline */
    padding: 12px 25px; /* Preenchimento interno */
    border: none; /* Sem borda */
    border-radius: 8px; /* Cantos arredondados */
    font-family: 'Fredoka One', cursive; /* Fonte especial para botões */
    font-size: 1em; /* Tamanho da fonte */
    cursor: pointer; /* Cursor de ponteiro ao passar o mouse */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transição suave para hover */
    text-transform: uppercase; /* Texto em maiúsculas */
    letter-spacing: 0.5px; /* Espaçamento entre letras */
    margin: 5px; /* Margem para o botão geral, mas o novo .modal-button-group usará gap */
}

.primary-btn {
    background-color: #4CAF50; /* Cor de fundo verde */
    color: white; /* Cor do texto branco */
}

.primary-btn:hover {
    background-color: #388E3C; /* Cor de fundo verde mais escura ao passar o mouse */
    transform: translateY(-2px); /* Efeito de "levantar" ao passar o mouse */
}

.secondary-btn {
    background-color: #FFC107; /* Cor de fundo dourada */
    color: #333; /* Cor do texto escura */
}

.secondary-btn:hover {
    background-color: #FFA000; /* Cor de fundo dourada mais escura ao passar o mouse */
    transform: translateY(-2px); /* Efeito de "levantar" ao passar o mouse */
}

.btn:disabled {
    background-color: #ccc; /* Cor de fundo cinza quando desativado */
    cursor: not-allowed; /* Cursor de "não permitido" */
    transform: none; /* Remove o efeito de "levantar" quando desativado */
}

/* --- Contêiner do Jogo e Caixa de Configuração --- */
.game-container {
    background-color: #ffffff; /* Fundo branco */
    border-radius: 15px; /* Cantos arredondados */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra para profundidade */
    padding: 20px; /* Preenchimento interno */
    width: 90%; /* Ocupa 90% da largura disponível */
    max-width: 930px; /* Largura máxima */
    margin: 20px auto; /* Margem vertical e centralização horizontal */
    text-align: center; /* Conteúdo interno centralizado (h1, input, etc.) */
    position: relative; /* Necessário para posicionamento absoluto de elementos internos */
    overflow: hidden; /* Oculta conteúdo que ultrapassa as bordas */
    box-sizing: border-box; /* Inclui padding e border na largura/altura total */
}

.game-box {
    padding: 20px; /* Preenchimento para as caixas de jogo */
}

/* --- Seção de Entrada de Jogador (Adicionar Jogador) --- */
.player-input-section {
    margin: 20px 0; /* Margem vertical */
    display: flex; /* Usa flexbox para organizar elementos */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Alinha verticalmente */
    gap: 10px; /* Espaçamento entre os itens */
    flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha */
}

#newPlayerName {
    padding: 10px 15px; /* Preenchimento interno */
    border: 2px solid #ccc; /* Borda cinza */
    border-radius: 8px; /* Cantos arredondados */
    font-size: 1em; /* Tamanho da fonte */
    width: 250px; /* Largura fixa */
    max-width: 80%; /* Largura máxima, adaptável */
}

.warning-text {
    color: #E91E63; /* Cor vermelha/rosa para texto de aviso */
    font-weight: bold; /* Texto em negrito */
    margin-top: 10px; /* Margem superior */
}

.player-list {
    margin: 20px 0; /* Margem vertical */
    border: 1px solid #eee; /* Borda leve */
    border-radius: 8px; /* Cantos arredondados */
    padding: 10px; /* Preenchimento interno */
    min-height: 50px; /* Altura mínima */
    display: flex; /* Usa flexbox para organizar itens */
    flex-wrap: wrap; /* Permite que os itens quebrem */
    gap: 10px; /* Espaçamento entre os itens */
    justify-content: center; /* Centraliza os itens horizontalmente */
}

.player-item {
    background-color: #f1f8e9; /* Fundo verde claro */
    border: 1px solid #c8e6c9; /* Borda verde clara */
    padding: 8px 15px; /* Preenchimento interno */
    border-radius: 20px; /* Cantos muito arredondados (formato de pílula) */
    display: flex; /* Usa flexbox para alinhar conteúdo */
    align-items: center; /* Alinha itens verticalmente ao centro */
    gap: 10px; /* Espaçamento entre nome e botão */
    font-weight: bold; /* Texto em negrito */
    color: #2E7D32; /* Cor de texto verde escura */
}

.remove-player-btn {
    background-color: #E91E63; /* Cor de fundo vermelha/rosa */
    color: white; /* Texto branco */
    border: none; /* Sem borda */
    border-radius: 50%; /* Torna o botão redondo */
    width: 25px; /* Largura do botão */
    height: 25px; /* Altura do botão (para ser redondo) */
    font-size: 0.8em; /* Tamanho da fonte menor */
    cursor: pointer; /* Cursor de ponteiro */
    transition: background-color 0.2s ease; /* Transição suave para hover */
    flex-shrink: 0; /* Previne que o botão encolha */
    padding: 0; /* Sem preenchimento interno */
}

.remove-player-btn:hover {
    background-color: #C2185B; /* Cor de fundo mais escura ao passar o mouse */
}

/* --- Layout da Área do Jogo --- */
.game-area {
    display: flex; /* Usa flexbox */
    flex-direction: column; /* Empilha o conteúdo (tabuleiro + painel direito) */
    align-items: center; /* Centraliza os itens horizontalmente */
    gap: 15px; /* Espaçamento entre os itens */
    padding: 15px; /* Preenchimento interno */
    background-color: #f9f9f9; /* Fundo cinza muito claro */
    border-radius: 10px; /* Cantos arredondados */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra interna suave */
    width: 100%; /* Ocupa a largura total */
    box-sizing: border-box; /* Inclui padding e border na largura/altura total */
}

/* Novo invólucro para o tabuleiro e o painel lateral combinado */
.board-and-right-panel-wrapper { /* Renomeado de board-and-sidebar-wrapper */
    display: flex; /* Usa flexbox */
    flex-direction: row; /* Tabuleiro à esquerda, painel direito à direita */
    gap: 20px; /* Espaço entre o tabuleiro e o painel direito */
    justify-content: center; /* Centraliza o tabuleiro e o painel direito horizontalmente */
    align-items: flex-start; /* Alinha os elementos ao topo */
    width: 100%; /* Ocupa a largura total */
    flex-wrap: wrap; /* Permite quebrar em telas menores */
    box-sizing: border-box; /* Inclui padding e border na largura/altura total */
}

/* Novo contêiner para os elementos do lado direito (jogador atual/dado + barra lateral) */
.right-panel {
    display: flex; /* Usa flexbox */
    flex-direction: column; /* Empilha as informações do jogador atual/dado acima da barra lateral */
    gap: 15px; /* Espaço entre a área do jogador atual/dado e a barra lateral */
    flex-shrink: 0; /* Previne que o painel encolha */
    width: 250px; /* Largura fixa para o painel direito */
    max-width: 100%; /* Permite que encolha se necessário */
    box-sizing: border-box; /* Inclui padding e border na largura/altura total */
}

/* NOVO invólucro para informações do jogador atual e dado, substituindo o papel principal do antigo game-header */
.current-player-dice-wrapper {
    background-color: #e0f2f1; /* Fundo azul claro */
    border-radius: 10px; /* Cantos arredondados */
    padding: 10px; /* Preenchimento interno */
    display: flex; /* Usa flexbox */
    flex-direction: column; /* Empilha informações acima das ações dentro deste invólucro */
    gap: 10px; /* Espaçamento entre os itens */
    justify-content: center; /* Centraliza o conteúdo verticalmente */
    align-items: center; /* Centraliza o conteúdo horizontalmente */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra suave */
    width: 100%; /* Ocupa a largura total do seu pai (.right-panel) */
    box-sizing: border-box; /* Inclui padding e border na largura/altura total */
}

.current-player-info {
    text-align: center; /* Centraliza o texto dentro deste bloco */
    display: flex; /* Usa flexbox */
    flex-direction: column; /* Organiza os itens em coluna */
    align-items: center; /* Centraliza os itens (h2, player-identity, position) */
    flex-grow: 1; /* Permite que cresça */
    min-width: unset; /* Remove restrição de largura mínima anterior */
}

.current-player-info h2 {
    margin-top: 0; /* Sem margem superior */
    margin-bottom: 5px; /* Pequena margem inferior */
    font-size: 1.2em; /* Tamanho da fonte */
    color: #00796B; /* Cor de texto verde-azulado escuro */
}

.player-identity {
    display: flex; /* Usa flexbox */
    align-items: center; /* Alinha os itens verticalmente */
    gap: 10px; /* Espaçamento entre o token e o nome */
    justify-content: center; /* Centraliza o token e o nome */
}

.current-player-token {
    width: 35px; /* Largura do token */
    height: 35px; /* Altura do token */
    border-radius: 50%; /* Torna o token redondo */
    border: 2px solid white; /* Borda branca */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra suave */
    flex-shrink: 0; /* Previne que o token encolha */
}

/* Cores dos tokens dos jogadores */
.red-token { background-color: #D32F2F; } /* Token vermelho */
.pink-token { background-color: #F8BBD0; } /* Token rosa */
.green-token { background-color: #8BC34A; } /* Token verde */
.yellow-token { background-color: #FFEB3B; } /* Token amarelo */
.blue-token { background-color: #2196F3; } /* Token azul */
.black-token { background-color: #212121; } /* Token preto */

.current-player-info span {
    font-size: 1.1em; /* Tamanho da fonte */
    font-weight: bold; /* Texto em negrito */
    color: #444; /* Cor de texto cinza escuro */
}

.game-actions {
    display: flex; /* Usa flexbox */
    align-items: center; /* Alinha os itens verticalmente */
    gap: 15px; /* Espaçamento entre os itens */
    flex-shrink: 0; /* Previne que as ações encolham */
    justify-content: center; /* Centraliza o dado e o botão */
    width: 100%; /* Ocupa a largura total do seu pai */
}

.dice-image {
    width: 60px; /* Largura da imagem do dado */
    height: 60px; /* Altura da imagem do dado */
    border: 3px solid #00796B; /* Borda verde-azulado escuro */
    border-radius: 10px; /* Cantos arredondados */
    background-color: white; /* Fundo branco */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra suave */
}

/* Estilo do tabuleiro do jogo */
.game-board {
    position: relative; /* Posição relativa para posicionamento absoluto dos tokens */
    width: 550px; /* Tamanho base */
    aspect-ratio: 1 / 1; /* Mantém a proporção de 1:1 (quadrado) */
    max-width: 100%; /* Largura máxima de 100% (adaptável) */
    margin: 0; /* Sem margem */
    flex-shrink: 0; /* Previne que o tabuleiro encolha */
    box-sizing: border-box; /* Inclui padding e border na largura/altura total */
}

.board-image {
    width: 100%; /* Ocupa a largura total do seu pai */
    height: 100%; /* Ocupa a altura total do seu pai */
    display: block; /* Exibe como um bloco */
    border-radius: 10px; /* Cantos arredondados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

.player-token {
    position: absolute; /* Posição absoluta para posicionamento preciso no tabuleiro */
    width: 35px; /* Largura do token */
    height: 35px; /* Altura do token */
    border-radius: 50%; /* Torna o token redondo */
    border: 2px solid white; /* Borda branca */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Sombra suave */
    transform: translate(-50%, -50%); /* Centraliza o token exatamente no ponto de coordenadas */
    transition: left 0.5s ease-in-out, top 0.5s ease-in-out; /* Transição suave para movimento */
    z-index: 10; /* Z-index para que os tokens apareçam acima do tabuleiro */
}

/* Barra lateral para status/pontuação do jogador */
.sidebar {
    background-color: #e3f2fd; /* Fundo azul claro */
    border-radius: 10px; /* Cantos arredondados */
    padding: 10px; /* Preenchimento interno */
    width: 100%; /* Ocupa a largura total do seu pai (.right-panel) */
    flex-shrink: 0; /* Previne que a barra lateral encolha */
    max-height: 700px; /* Altura máxima (permite rolagem se muitos jogadores) */
    overflow-y: auto; /* Adiciona barra de rolagem vertical se o conteúdo for muito alto */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra suave */
    box-sizing: border-box; /* Inclui padding e border na largura/altura total */
}

.sidebar h3 {
    color: #00796B; /* Cor de texto verde-azulado escuro */
    margin-top: 0; /* Sem margem superior */
    margin-bottom: 10px; /* Margem inferior */
}

#playersStatusList {
    list-style: none; /* Remove marcadores de lista padrão */
    padding: 0; /* Remove preenchimento padrão */
    margin: 0; /* Remove margem padrão */
}

#playersStatusList li {
    display: flex; /* Usa flexbox */
    align-items: center; /* Alinha os itens verticalmente */
    background-color: #e1f5fe; /* Fundo azul muito claro */
    border: 1px solid #bbdefb; /* Borda azul clara */
    padding: 8px 12px; /* Preenchimento interno */
    margin-bottom: 8px; /* Margem inferior */
    border-radius: 8px; /* Cantos arredondados */
    font-weight: bold; /* Texto em negrito */
    color: #333; /* Cor de texto escura */
    gap: 10px; /* Espaçamento entre os itens */
    flex-wrap: wrap; /* Permite que os itens quebrem */
}

/* Nova classe para tokens na lista de status da barra lateral */
.player-token-sidebar {
    width: 25px; /* Largura do token */
    height: 25px; /* Altura do token */
    border-radius: 50%; /* Torna o token redondo */
    border: 2px solid white; /* Borda branca */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Sombra suave */
    flex-shrink: 0; /* Previne que o token encolha */
}

/* Destaque para o jogador atual na barra lateral */
#playersStatusList li.current-player-highlight {
    background-color: #fff9c4; /* Fundo amarelo muito claro */
    border-color: #ffeb3b; /* Borda amarela */
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.5); /* Sombra de destaque */
}

/* --- Ajustes Responsivos para Telas Menores (ex: tablets e telemóveis) --- */
@media (max-width: 930px) {
    .game-area {
        gap: 10px; /* Reduz o espaçamento */
        padding: 10px; /* Reduz o preenchimento */
    }

    .board-and-right-panel-wrapper { /* Este invólucro será empilhado verticalmente */
        flex-direction: column; /* Empilha os itens em coluna */
        align-items: center; /* Centraliza horizontalmente */
        gap: 10px; /* Reduz o espaçamento */
    }

    .right-panel { /* O painel direito ocupará a largura total e ainda empilhará seu conteúdo */
        width: 100%; /* Ocupa a largura total */
        gap: 10px; /* Ajusta o espaçamento quando empilhado */
    }

    .current-player-dice-wrapper {
        padding: 8px; /* Preenchimento ligeiramente menor */
        gap: 8px; /* Ajusta o espaçamento interno */
    }

    .sidebar {
        max-height: 250px; /* Limita a altura quando empilhado */
        padding: 8px; /* Preenchimento */
    }

    .game-board {
        width: 100%; /* O tabuleiro ocupa a largura total quando empilhado */
    }

    .player-token {
        width: 25px; /* Tokens menores em telas menores */
        height: 25px; /* Tokens menores em telas menores */
    }

    #winnerSplashScreenModal .modal-content {
        padding: 15px; /* Ajusta o preenchimento para telas menores também */
        font-size: 0.8em; /* Tamanho da fonte menor */
    }

    #winnerSplashScreenModal h2 {
        font-size: 2em; /* Tamanho da fonte menor para o título do vencedor */
    }
}

/* --- Ajustes Responsivos para Telas Muito Pequenas (ex: telemóveis pequenos) --- */
@media (max-width: 500px) {
    .game-container {
        padding: 10px; /* Reduz o preenchimento */
        margin: 10px auto; /* Reduz a margem */
    }

    .game-area {
        padding: 8px; /* Reduz o preenchimento */
        gap: 8px; /* Reduz o espaçamento */
    }

    .current-player-dice-wrapper {
        padding: 5px; /* Reduz o preenchimento */
        gap: 5px; /* Reduz o espaçamento */
    }

    .sidebar {
        padding: 5px; /* Reduz o preenchimento */
    }

    /* Ajuste de fonte para parágrafos em telas muito pequenas */
    .modal-content p {
        font-size: 0.85em; /* Tamanho da fonte ainda menor para ecrãs muito pequenos */
    }
}

/* --- Detalhes Específicos do Modal de Perguntas --- */
/* Estilos para Imagens dentro das Perguntas */
.question-image {
    max-width: 80%; /* Garante que a imagem não transborde o modal de perguntas */
    height: auto;  /* Mantém a proporção da imagem */
    display: block; /* Faz com que a imagem ocupe a sua própria linha, separando-a do texto */
    margin: 15px auto; /* Adiciona 15px de espaço acima e abaixo, e centraliza a imagem horizontalmente */
    border-radius: 8px; /* Opcional: Dá à imagem cantos ligeiramente arredondados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Opcional: Adiciona uma sombra subtil para um visual mais agradável */
}

/* Opcional: Se houver imagens menores que queira que se destaquem menos */
/* .question-image.small {
    max-width: 50%;
} */

.options-container {
    display: flex; /* Usa flexbox */
    flex-direction: column; /* Organiza as opções em coluna */
    gap: 10px; /* Espaçamento entre as opções */
    margin-bottom: 20px; /* Margem inferior */
    text-align: left; /* Alinha o texto à esquerda */
}

.option-label {
    display: flex; /* Usa flexbox para alinhar conteúdo */
    align-items: center; /* Alinha itens verticalmente */
    padding: 12px; /* Preenchimento interno */
    background-color: #f0f4c3; /* Fundo amarelo muito claro */
    border-radius: 8px; /* Cantos arredondados */
    cursor: pointer; /* Cursor de ponteiro */
    transition: background-color 0.2s ease; /* Transição suave para hover */
}

.option-label:hover {
    background-color: #e6ee9c; /* Cor de fundo mais clara ao passar o mouse */
}

.option-label input[type="radio"] {
    margin-right: 10px; /* Margem à direita do botão de rádio */
    transform: scale(1.2); /* Aumenta ligeiramente o tamanho do botão de rádio */
}

.option-text {
    flex-grow: 1; /* Permite que o texto da opção cresça para preencher o espaço */
}

.remark {
    font-weight: bold; /* Texto em negrito */
    margin-top: 15px; /* Margem superior */
    padding: 10px; /* Preenchimento interno */
    border-radius: 8px; /* Cantos arredondados */
}

.remark.correct {
    background-color: #e8f5e9; /* Fundo verde muito claro para resposta correta */
    color: #2E7D32; /* Cor de texto verde escuro */
    text-align: justify; /* Justifica o texto */
}

.remark.incorrect {
    background-color: #ffebee; /* Fundo rosa muito claro para resposta incorreta */
    color: #C62828; /* Cor de texto vermelha escura */
    text-align: justify; /* Justifica o texto */
}

/* --- Estilo da Tabela de Classificação (Classificação Geral) --- */
.ranking-table-container {
    width: 90%; /* Ajustado para corresponder ao .winner-game-summary */
    background-color: #e0e0e0; /* Adicionado para corresponder ao .winner-game-summary */
    padding: 15px; /* Ajustado para corresponder ao .winner-game-summary */
    border-radius: 8px; /* Adicionado para corresponder ao .winner-game-summary */
    margin-top: 5px; /* Ajustado para corresponder ao .winner-game-summary */
    margin-bottom: 5px; /* Ajustado para corresponder ao .winner-game-summary */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* Adicionado para corresponder ao .winner-game-summary */

    max-width: 600px; /* Largura máxima */
    overflow-x: auto; /* Adiciona rolagem horizontal se a tabela for muito larga */
    margin-left: auto; /* Centraliza o contêiner */
    margin-right: auto; /* Centraliza o contêiner */
    display: block; /* Exibe como um bloco */
    box-sizing: border-box; /* Inclui padding e border na largura/altura total */
}

.ranking-table {
    width: 100%; /* Ocupa 100% da largura do seu pai (.ranking-table-container) */
    border-collapse: collapse; /* Colapsa as bordas da tabela */
    margin-top: 0; /* Alterado de 15px para 0 para corresponder ao #gameSummaryTable */
    font-size: 0.95em; /* Mantido igual ao #gameSummaryTable */
    margin-left: auto; /* Centraliza a tabela */
    margin-right: auto; /* Centraliza a tabela */
    box-sizing: border-box; /* Inclui padding e border na largura/altura total */
}

.ranking-table th,
.ranking-table td {
    border: 1px solid #ccc; /* Borda */
    padding: 5px; /* Preenchimento */
    text-align: left; /* Alinhamento de texto padrão */
    color: #333; /* Garante texto escuro */
    box-sizing: border-box; /* Inclui padding e border na largura/altura total */
}

/* Centraliza os cabeçalhos da tabela na tabela de classificação geral */
.ranking-table th {
    background-color: #66BB6A; /* Cor de fundo verde */
    color: white; /* Texto branco */
    font-weight: bold; /* Texto em negrito */
    text-transform: uppercase; /* Texto em maiúsculas */
    font-size: 0.85em; /* Reduzido o tamanho da fonte */
    letter-spacing: 0.1px; /* Reduzido o espaçamento entre letras */
    text-align: center; /* Centraliza o texto */
}

.ranking-table tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* Fundo zebrado */
}

.ranking-table tbody tr:hover {
    background-color: #e0ffe0; /* Efeito de hover verde claro */
    cursor: default; /* Cursor padrão */
}

/* Centraliza o texto na coluna Posição para a tabela de classificação geral */
.ranking-table th:first-child {
    text-align: center; /* Mantém o cabeçalho da posição centralizado */
}
.ranking-table td:first-child {
    text-align: center; /* Mantém o alinhamento centralizado para a coluna de posição */
}

/* Alinha à direita as colunas numéricas para melhor legibilidade na tabela de classificação geral.
    Removido 'th' deste seletor para permitir que todos os 'th' sejam centralizados. */
.ranking-table td:nth-child(3), /* Corretas */
.ranking-table td:nth-child(4), /* Erradas */
.ranking-table td:nth-child(5) { /* Precisão */
    text-align: right; /* Alinha o texto à direita */
}

.ranking-buttons {
    display: flex; /* Usa flexbox */
    justify-content: center; /* Centraliza os botões */
    gap: 15px; /* Espaçamento entre os botões */
    margin-top: 20px; /* Margem superior */
}

/* Ajusta o preenchimento geral do conteúdo do modal, se necessário, para ajustar a tabela */
.modal-content {
    padding: 20px 30px; /* Preenchimento interno */
}

/* --- Logótipos de Canto --- */
.corner-logo {
    position: fixed; /* Posição fixa na tela */
    height: 75px; /* Altura do logótipo */
    width: auto; /* Largura automática para manter a proporção */
    z-index: 1000; /* Z-index para que o logótipo apareça acima da maioria dos elementos */
    padding: 5px; /* Preenchimento ao redor do logótipo */
}

.top-left-logo {
    top: 0; /* Alinha ao topo */
    left: 0; /* Alinha à esquerda */
}

.top-right-logo {
    top: 0; /* Alinha ao topo */
    right: 0; /* Alinha à direita */
}

@media (max-width: 768px) {
    .corner-logo {
        height: 45px; /* Reduz a altura para telas de tablet */
        padding: 5px; /* Mantém o preenchimento */
    }
}

@media (max-width: 480px) {
    .corner-logo {
        height: 35px; /* Reduz ainda mais a altura para telas de telemóvel */
        padding: 3px; /* Reduz o preenchimento */
    }
}

/* Estilo responsivo para a faixa de logótipos na tela de splash */
.logo-stripe {
    width: 100%; /* Ocupa a largura total */
    max-width: 600px; /* Largura máxima */
    height: auto; /* Altura automática */
    display: block; /* Exibe como um bloco */
    margin: 20px auto 0; /* Margem superior e centralização horizontal */
}

@media (max-width: 600px) {
    .logo-stripe {
        max-width: 90%; /* Reduz a largura máxima para telas menores */
    }
}

/* --- Estilo do Logótipo Principal da Aplicação na Tela de Splash --- */
.app-main-logo {
    display: block; /* Garante que a imagem seja um bloco para centralização e margem */
    max-width: 80px; /* Largura máxima para o logótipo (reduzido para caber no texto) */
    height: auto; /* Mantém a proporção da imagem */
    margin: 0 auto 15px auto; /* Centraliza horizontalmente e adiciona margem inferior */
    animation: fadeInScale 1s ease-out forwards; /* Adiciona uma animação suave */
}

/* Animação para o logótipo principal da aplicação */
@keyframes fadeInScale {
    0% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

/* --- Ajuste específico para o padding do modal de ranking --- */
#rankingModal .modal-content {
    padding: 15px; /* Ajusta o padding para corresponder ao modal do vencedor */
}