/* frontend/css/style.css */

/* ==========================================================================
                 0. Light Theme Palette (CSS Variables)
   ========================================================================== */

:root {
  /* --- 1. Paleta Principal (Steam) --- */

  /* Fundos */
  --theme-bg-body: #1b2838;   /* Fallback do body, fundo de review */
  --theme-bg-card: #192b39;   /* Card sólido (azul médio) */
  --theme-bg-hover: #2a475e;  /* Hover geral, input, botões secundários */

  /* Destaque (Accent) */
  --theme-accent: #66c0f4;         /* Azul claro Steam */
  --theme-accent-hover: #86aabe;   /* Hover mais claro (antes era #0056b3) */

  /* Texto */
  --theme-text-main: #c7d5e0;     /* Texto principal (cinza/azul claro) */
  --theme-text-on-accent: #171a21; /* Texto escuro para botões claros */
  --theme-text-muted: #8192a7;    /* Para placeholders e ícones */

  /* --- 2. Cores de Feedback --- */
  
  /* Adicionadas versões RGB para usar com 'rgba()' para fundos */
  --feedback-green: #28a745;
  --feedback-green-rgb: 40, 167, 69;
  --feedback-red: #dc3545;
  --feedback-red-text: #ff5263; /* Cor de texto de erro */
  --feedback-red-rgb: 220, 53, 69;

  /* --- 3. Cores de Componentes Específicos --- */

  /* Cores de Input */
  --input-bg: var(--theme-bg-hover);
  --input-border: var(--theme-bg-hover);
  --input-text: var(--theme-text-main);
  --input-focus-shadow: rgba(102, 192, 244, 0.25); /* Sombra do --theme-accent */

  /* Cores de Botão Desabilitado */
  --btn-disabled-bg: var(--theme-bg-hover);
  --btn-disabled-text: var(--theme-text-muted);
  
  /* Cores de Histórico */
  --history-correct-bg: rgba(var(--feedback-green-rgb), 0.1);
  --history-correct-border: var(--feedback-green);
  --history-correct-text: var(--feedback-green);
  
  --history-incorrect-bg: rgba(var(--feedback-red-rgb), 0.1);
  --history-incorrect-border: var(--feedback-red);
  --history-incorrect-text: var(--feedback-red);
  
  --history-skipped-bg: var(--theme-bg-hover);
  --history-skipped-border: var(--theme-text-muted);
  --history-skipped-text: var(--theme-text-muted);

  /* Cores de Review */
  --review-rec-bg: rgba(var(--feedback-green-rgb), 0.1);
  --review-rec-text: var(--feedback-green);
  --review-notrec-bg: rgba(var(--feedback-red-rgb), 0.1);
  --review-notrec-text: var(--feedback-red);
}

/* ==========================================================================
                        1. Global & Base Styles
   ========================================================================== */

/* * Reseta o 'box model' (modelo de caixa) para 'border-box'.
 * Isso faz com que 'padding' e 'border' sejam incluídos na largura (width) e altura (height) totais dos elementos,
 * o que facilita muito a criação de layouts.
 */
html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit; /* Faz todos os elementos herdarem o 'border-box' do html */
}

/*
 * Estilos base para o corpo da aplicação.
 * Define a fonte, o fundo (wallpaper) e a centralização do container principal do jogo.
 */
body {
  /* 1. Define a 'pilha de fontes' (font stack) padrão, priorizando fontes do sistema */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  
  /* 2. Define a cor do texto principal e a cor de fundo (fallback) caso a imagem falhe */
  color: var(--theme-text-main);
  background-color: var(--theme-bg-body);
  
  /* --- 3. Configuração do Wallpaper --- */
  background-image: url('../assets/wallpaper_steam_guess_v.webp'); 
  background-size: cover; /* Faz a imagem cobrir toda a tela */
  background-position: center center; /* Centraliza a imagem */
  /* Efeito "parallax": mantém o fundo fixo enquanto o conteúdo (.container) rola por cima. */
  background-attachment: fixed;
  
  /* --- 4. Centralização do Jogo --- */
  /* Garante que o body ocupe no mínimo 100% da altura da tela (viewport) */
  min-height: 100svh;
  /* Usa Flexbox para centralizar o .container principal */
  display: flex;
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center;     /* Centraliza verticalmente */
  
  /* 5. Remove a margem padrão do navegador */
  margin: 0;   
}


/* ==========================================================================
                       2. Layout & Utility Classes
   ========================================================================== */

/*
 * O .container é o "caixote" principal que envolve todo o jogo.
 * Ele centraliza o conteúdo (graças ao 'body' com flexbox) e define uma largura máxima (max-width) para que o layout
 * não se estique demais em monitores grandes (desktops).
 */
.container {
  width: 100%; /* Ocupa 100% da largura disponível */
  max-width: 600px; /* Limita a largura máxima a 600px */
  padding: 20px; /* Espaçamento interno para o conteúdo não colar nas bordas */
  text-align: center; /* Centraliza o texto de elementos filhos (como o <h1>) */
}

/*
 * O .card é o componente de UI mais reutilizado.
 * É o "painel" azulado que serve de fundo para as dicas, os controles, os modais e a tela de fim de jogo.
 */
.card {
  background-color: var(--theme-bg-card); /* Cor de fundo do painel */
  border: 1px solid var(--theme-bg-hover); /* Borda sutil */
  border-radius: 8px; /* Cantos arredondados */
  padding: 20px; /* Espaçamento interno do painel */
  margin-top: 20px; /* Espaço entre os cards (ex: Dicas e Controles) */
  text-align: left; /* Alinha o conteúdo dos cards à esquerda (padrão) */
  box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Sombra leve para profundidade */
}

/*
 * Classe utilitária crucial para o JavaScript.
 * Usada para esconder QUALQUER elemento visualmente.
 * O '!important' garante que esta regra sobreponha qualquer outra regra de 'display' (ex: 'display: flex').
 */
.hidden {
  display: none !important;
}

/*
 * Classe utilitária de acessibilidade (a11y).
 * Esconde um elemento visualmente, MAS o mantém acessível para leitores de tela (screen readers).
 * Útil para 'labels' de botões que só têm ícones, por exemplo.
 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px; /* Evita que ocupe espaço */
  overflow: hidden; /* Esconde o conteúdo */
  clip: rect(0, 0, 0, 0); /* Técnica antiga, mas robusta, para esconder */
  white-space: nowrap; /* Impede quebras de linha */
  border: 0;
}


/* ==========================================================================
                          3. Component: Header
   ========================================================================== */

/*
 * O container principal do cabeçalho.
 * Usa flexbox com 'flex-direction: column' para empilhar o título (h1) e o grupo de botões (.header-btn-group)
 * um em cima do outro, verticalmente.
 */
.header-container {
  display: flex;
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Centraliza horizontalmente */
  position: relative; /* (Não está sendo usado, mas é útil se precisar de 'absolute' em filhos) */
  width: 100%;
  flex-direction: column; /* Empilha os filhos verticalmente */
}

/*
 * Agrupa os botões de ícone do cabeçalho (Stats, Info, Idioma).
 * Usa flexbox ('row' por padrão) e 'gap' para espaçá-los horizontalmente de forma limpa.
 */
.header-btn-group {
  display: flex;
  gap: 10px; /* Espaço entre os botões */
  margin-top: 10px; /* Espaço abaixo do título (h1) */
}

/*
 * Estilo do título principal do jogo ("Steam Guess").
 * Apenas define a cor, pois o 'font-size' e 'text-align: center' são herdados do 'body' e '.container'.
 */
h1 {
  color: var(--theme-text-main);
}

/*
 * Estiliza a "tag" de dificuldade (ex: "Fácil", "Difícil") que aparece ao lado do título H1 durante o jogo.
 */
#difficulty-display {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--theme-text-on-accent); /* Texto escuro */
  background-color: var(--theme-accent); /* Fundo azul claro */
  padding: 4px 10px; /* Espaçamento interno (pequeno) */
  border-radius: 8px;
  margin-left: 10px; /* Espaço à esquerda (para separar do H1) */
  vertical-align: middle; /* Alinha a tag com o meio do texto do H1 */
  white-space: nowrap; /* Impede que o texto da tag quebre linha */
}

/* Estilo para o texto do modo (Daily/Endless) */
.mode-display {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase; /* Deixa em CAIXA ALTA */
  letter-spacing: 1px;       /* Espaçamento entre letras elegante */
  margin-top: 5px;
  margin-bottom: 10px;
  
  /* Cor padrão (Daily) */
  color: var(--theme-text-main);
  opacity: 0.8;
}

/* Estilo específico quando está no modo Endless */
.mode-display.endless-active {
  opacity: 1;
}


/* ==========================================================================
                             4. Component: Buttons
   ========================================================================== */

/*
 * O estilo base .btn (Botão Principal).
 * Define a aparência padrão (tamanho, preenchimento, cores, fonte) para a maioria dos botões (ex: "Adivinhar", botões de dificuldade).
 * A 'transition' suaviza a mudança de cor no hover.
 */
.btn {
  font-size: 1rem;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background-color: var(--theme-accent);
  color: var(--theme-text-on-accent);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

/* Efeito 'hover' para o botão principal, usando a variável de hover. */
.btn:hover {
  /* Usando variável de hover */
  background-color: var(--theme-accent-hover);
  color: var(--theme-text-on-accent);
}

/*
 * Modificador `.btn-secondary` (Botão Secundário).
 * Usado para ações menos importantes (ex: "Pular", "Jogar Novamente").
 * Ocupa 100% da largura e usa cores mais discretas (o fundo de 'hover').
 */
.btn-secondary {
  width: 100%;
  /* Usando variáveis (bg-hover é um bom padrão para secundário) */
  background-color: var(--theme-bg-hover);
  color: var(--theme-text-main);
  margin-top: 10px;
}

/* Efeito 'hover' para o botão secundário. */
.btn-secondary:hover {
  /* Usando variável */
  background-color: var(--theme-accent-hover);
  color: var(--theme-text-on-accent);
}

/*
 * Modificador `.btn-steam` (Botão "Outline").
 * Usado para o link "Ver na Steam" na tela de fim de jogo.
 * Começa transparente e com uma borda da cor de destaque.
 */
.btn-steam {
  background-color: transparent;
  color: var(--theme-accent);
  text-decoration: none; /* Remove sublinhado (caso seja um <a>) */
  display: inline-block;
  line-height: 1.5;
  border: 1px solid var(--theme-accent);
  transition: all 0.2s;
}

/* No 'hover', o fundo é preenchido com a cor de destaque. */
.btn-steam:hover {
  background-color: var(--theme-accent);
  color: var(--theme-text-on-accent);
}

/*
 * Modificador `.btn-icon` (Botão de Ícone).
 * Usado para os botões no cabeçalho (Stats, Info, Idioma) que só têm ícones.
 * Remove o fundo/borda e fica redondo ('border-radius: 50%').
 */
.btn-icon {
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  line-height: 1; /* Garante que o ícone fique centralizado */
  border-radius: 50%;
  /* Usando variável de texto silenciado */
  color: var(--theme-text-muted);
}

/* Adiciona um fundo sutil no 'hover' para feedback visual. */
.btn-icon:hover {
  background-color: var(--theme-bg-hover);
}

/*
 * Regra de Estado: [disabled] (Desabilitado).
 * Define a aparência para QUALQUER botão que tenha o atributo 'disabled'.
 * Agrupa .btn, .btn-secondary e .tab-btn (da Seção 6) para padronizar.
 * Usa '!important' para garantir que este estilo sobreponha os outros.
 * O 'cursor: not-allowed' indica ao usuário que o botão não é clicável.
 */
.btn[disabled],
.btn-secondary[disabled],
.tab-btn[disabled] {
  background-color: var(--btn-disabled-bg) !important;
  color: var(--btn-disabled-text) !important;
  border-color: var(--btn-disabled-bg) !important;
  cursor: not-allowed !important;
  opacity: 0.7 !important;
}


/* ==========================================================================
                        5. Screen: Difficulty Selection
   ========================================================================== */

/*
 * Classe utilitária para agrupar botões lado a lado.
 * Usada para os 3 botões de dificuldade (Fácil, Médio, Difícil).
 */
.btn-group {
  display: flex;
  gap: 10px; /* Espaço entre os botões */
  justify-content: center; /* Centraliza o grupo de botões */
  margin-top: 20px;
}

/* Agrupa estilos de fonte comuns para as mensagens de texto */
#come-back-msg,
#endless-prompt-msg {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--theme-text-main);
}

/* Mensagem "Volte amanhã..." quando o jogo diário é concluído */
#come-back-msg {
  margin-top: 30px;
  margin-bottom: 10px; /* Espaço antes do timer */
}

/* Mensagem "Ou jogue no modo..." que aparece abaixo do timer */
#endless-prompt-msg {
  margin-top: 20px;
  margin-bottom: 0;
}

/* Estiliza o contador regressivo (ex: "10:30:05") */
.countdown-timer {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--theme-accent); /* Cor de destaque */
  margin-top: 10px;
}

/* ==================================================== */
/* --- Estilos de Status para Botões de Dificuldade --- */

/*
 * 1. Preparação dos Botões de Status
 * Esta regra seleciona QUALQUER botão que tenha um status (em progresso, completo, ou modo infinito) e:
 * - Define 'position: relative' para permitir que o ícone (::after) seja posicionado absolutamente dentro dele.
 * - Adiciona 'padding-right' para criar espaço para o ícone.
 */
.btn.status-in-progress,
.btn.status-completed,
#difficulty-selection .btn-group.infinite-mode .btn {
  position: relative;
  padding-right: 35px; /* Espaço à direita para o ícone '▶', '✓' ou '∞' */
}

/*
 * 2. Posicionamento do Ícone (::after)
 * Define o posicionamento e o estilo base do pseudo-elemento '::after' para todos os botões de status. O 'content' real (o ícone)
 * é definido nas regras específicas abaixo.
 */
.btn.status-in-progress::after,
.btn.status-completed::after,
#difficulty-selection .btn-group.infinite-mode .btn::after {
  content: ''; /* O ícone é definido abaixo */
  position: absolute; /* Posiciona relativo ao '.btn' pai */
  right: 12px; /* Distância da borda direita */
  top: 50%; /* Centraliza verticalmente */
  transform: translateY(-50%); /* Ajuste fino da centralização vertical */
  font-weight: bold;
  font-size: 1.1rem;
}

/*
 * 3. Estado: Em Progresso (▶)
 * Estiliza o botão de dificuldade que está "em progresso".
 * Fica com fundo transparente e borda azul.
 */
.btn.status-in-progress {
  background-color: var(--theme-bg-card);
  color: var(--theme-accent);
  border: 2px solid var(--theme-accent);
}

.btn.status-in-progress::after {
  content: '▶'; /* Define o ícone de "play" */
  color: var(--theme-accent);
}

.btn.status-in-progress:hover {
  background-color: var(--theme-bg-hover);
}

/*
 * 4. Estado: Concluído (✓)
 * Estiliza o botão de dificuldade que foi "concluído".
 * Fica com fundo transparente e borda verde.
 */
.btn.status-completed {
  background-color: var(--theme-bg-card);
  color: var(--feedback-green);
  border: 2px solid var(--feedback-green);
}

.btn.status-completed::after {
  content: '✓'; /* Define o ícone de "check" */
  color: var(--feedback-green);
}

.btn.status-completed:hover {
  background-color: var(--theme-bg-hover);
}

/*
 * 5. Estado: Modo Infinito (∞)
 * Esta regra é específica para a tela #difficulty-selection.
 * Quando o modo infinito está ATIVO, força TODOS os botões de dificuldade a terem a aparência padrão (azul sólido).
 */
#difficulty-selection .btn-group.infinite-mode .btn {
  background-color: var(--theme-accent);
  color: var(--theme-text-on-accent);
  border: none; /* Remove a borda (caso estivesse .status-completed) */
}

#difficulty-selection .btn-group.infinite-mode .btn::after {
  content: '∞'; /* Define o ícone de "infinito" */
  color: var(--theme-text-on-accent);
  opacity: 0.7; /* Deixa o ícone um pouco mais sutil */
}

#difficulty-selection .btn-group.infinite-mode .btn:hover {
  background-color: var(--theme-accent-hover);
  color: var(--theme-text-on-accent);
}

/* ============================= */
/* --- Botão "Modo Infinito" --- */

/* Estilo do botão de toggle "Ativar Modo Infinito" */
#endless-mode-btn {
  width: 50%; /* Ocupa metade da largura do card */
  margin-top: 15px; /* Espaço abaixo das mensagens/timer */
}


/* ==========================================================================
                      6. Component: Hint Navigation Tabs
   ========================================================================== */

/*
 * O container que agrupa os botões-abas (tabs) das dicas.
 * Usa 'display: flex' e 'flex-wrap: wrap' para que as abas se alinhem horizontalmente e quebrem para a próxima linha
 * automaticamente se não couberem (útil em telas menores).
 */
#hint-tabs {
  display: flex;
  flex-wrap: wrap; /* Permite que os botões quebrem a linha */
  gap: 8px; /* Espaço entre cada botão-aba */
  justify-content: center; /* Centraliza o grupo de abas */
  margin-top: 20px; /* Espaço acima das abas (abaixo do card) */
}

/*
 * Estilo individual de cada botão-aba (ex: "Dica 1", "Dica 2").
 * São feitos para parecerem "pílulas" (border-radius: 20px).
 * Começam com uma cor de fundo discreta (a mesma do body).
 */
.tab-btn {
  font-size: 0.9rem; /* Fonte um pouco menor */
  font-weight: 500;
  padding: 8px 16px; /* Mais largo do que alto */
  border-radius: 20px; /* Cantos bem arredondados (pílula) */
  background-color: var(--theme-bg-body);
  color: var(--theme-text-main);
  border: 1px solid var(--theme-bg-body);
  cursor: pointer;
  transition: all 0.2s; /* Transição suave para cor, fundo e borda */
  white-space: nowrap; /* Impede que o texto "Dica 1" quebre linha */
}

/* Efeito 'hover' para as abas (mesmo quando não estão ativas) */
.tab-btn:hover {
  background-color: var(--theme-accent);
  color: var(--theme-text-on-accent);
  border-color: var(--theme-accent);
}

/*
 * Estilo da aba que está ATIVA (selecionada).
 * Fica com a cor de destaque (azul) e texto em negrito
 * para indicar qual dica está sendo exibida.
 */
.tab-btn.active {
  background-color: var(--theme-accent);
  color: var(--theme-text-on-accent);
  border-color: var(--theme-accent);
  font-weight: bold;
}


/* ==========================================================================
                       7. Component: Hint Display Area
   ========================================================================== */

/*
 * O container que "segura" o conteúdo da dica.
 * Define uma altura mínima (para não ficar muito pequeno) e uma altura máxima.
 * 'overflow-y: auto' é a chave: adiciona uma barra de rolagem vertical interna se o conteúdo da dica for muito grande.
 */
#hint-area {
  min-height: 150px; /* Garante um espaço mínimo */
  max-height: 420px; /* Limita a altura máxima */
  overflow-y: auto; /* Adiciona scroll vertical se necessário */
}

/*
 * Estilos gerais para o conteúdo injetado dentro da #hint-area.
 * Define o tamanho da fonte e o espaçamento entre linhas (line-height) para uma boa legibilidade.
 */
#hint-display {
  margin-top: 15px; /* Espaço abaixo das abas de navegação */
  font-size: 1.1rem;
  line-height: 1.6; /* Bom espaçamento entre linhas */
}

/* ========================================================================== */
/* ================= 7a. Main Info Hint (Genres, Dev, etc.) ================= */

/*
 * Estiliza os parágrafos <p> usados na dica de Informações Principais
 * (ex: "Gênero: Ação", "Produtora: Valve").
 */
#hint-display p {
  margin: 8px 0; /* Espaçamento vertical entre cada linha de informação */
}

/* ======================================================= */
/* ================= 7b. Screenshot Hint ================= */

/*
 * Estiliza a imagem <img> da dica de Screenshot.
 * Garante que a imagem seja responsiva (max-width: 100%) e tenha uma borda sutil para se destacar do fundo do card.
 */
#hint-display img {
  max-width: 100%; /* Garante que a imagem caiba no card */
  border-radius: 6px;
  border: 1px solid var(--theme-bg-hover);
}

/* ======================================================== */
/* ================= 7c. Achievement Hint ================= */

/*
 * Container principal da dica de Conquista.
 * Usa flexbox para alinhar o ícone da conquista (esquerda) e o bloco de texto (direita) lado a lado.
 */
.achievement-container {
  display: flex;
  align-items: flex-start; /* Alinha os itens no topo */
  gap: 15px; /* Espaço entre o ícone e o texto */
}

/* Estiliza o ícone da conquista (64x64px) */
.achievement-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0; /* Impede que o ícone encolha em telas pequenas */
  border-radius: 4px;
  background-color: var(--theme-bg-body); /* Cor de fundo (placeholder) */
  border: 1px solid var(--theme-bg-hover);
}

/* Container do texto (Nome, Descrição, Percentual) */
.achievement-text-content {
  flex-grow: 1; /* Faz o texto ocupar o espaço restante */
}

/* Nome da conquista (ex: "Sobrevivente") */
.achievement-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--theme-text-main);
  margin: 0;
}

/* Descrição da conquista */
.achievement-desc {
  font-size: 1rem;
  color: var(--theme-text-main);
  margin-top: 5px;
  margin-bottom: 8px;
}

/* Percentual global de jogadores que a possuem */
.achievement-percent {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--theme-accent); /* Cor de destaque */
}

/* =================================================== */
/* ================= 7d. Review Hint ================= */

/*
 * Container principal da dica de Review (Avaliação).
 * Parece um "card dentro de um card", com um fundo ligeiramente diferente (o mesmo do 'body').
 */
.review-container {
  border: 1px solid var(--theme-bg-hover);
  border-radius: 6px;
  background-color: var(--theme-bg-body);
}

/* Cabeçalho do review (ex: "Recomendado 👍") */
.review-header {
  padding: 10px 15px;
  font-size: 1.1rem;
  font-weight: bold;
  border-bottom: 1px solid var(--theme-bg-hover);
}

/* Modificador para review "Recomendado" (fundo/texto verde) */
.review-header.recommended {
  color: var(--review-rec-text);
  background-color: var(--review-rec-bg);
}

/* Modificador para review "Não Recomendado" (fundo/texto vermelho) */
.review-header.not-recommended {
  color: var(--review-notrec-text);
  background-color: var(--review-notrec-bg);
}

/* O corpo do texto da avaliação (em itálico) */
.review-body {
  padding: 15px;
  font-style: italic;
  color: var(--theme-text-main);
  /* 'white-space: pre-wrap' preserva as quebras de linha vindas da API, mas quebra o texto se for muito longo */
  white-space: pre-wrap;
}

/* Rodapé do review (ex: "Postado em: ...") */
.review-footer {
  display: flex;
  justify-content: space-between; /* Alinha itens à esquerda e direita */
  padding: 10px 15px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--theme-text-main);
  opacity: 0.7; /* Texto um pouco mais sutil */
  border-top: 1px solid var(--theme-bg-hover);
  background-color: var(--theme-bg-body);
}


/* ==========================================================================
                    8. Component: Controls & Guessing
   ========================================================================== */

/*
 * ID do card de "Controles".
 * 'text-align: center' é usado para centralizar elementos como o #feedback-message e o #guesses-remaining.
 */
#controls {
  text-align: center;
}

/* ================================================================== */
/* ================= 8a. Guess Input & Autocomplete ================= */

/*
 * Wrapper para o input e a lista de autocomplete.
 * 'position: relative' é essencial para "ancorar" a lista de resultados (#autocomplete-results), que
 * usa 'position: absolute'.
 */
.guess-wrapper {
  position: relative;
}

/*
 * Container que agrupa o campo de input (#guess-input) e o botão "Adivinhar" lado a lado.
 * Usa flexbox para o alinhamento e 'gap' para o espaçamento.
 */
.guess-container {
  display: flex;
  gap: 10px;
  margin-bottom: 15px; /* Espaço antes do histórico de palpites */
}

/*
 * O campo de texto principal para o palpite.
 * 'flex-grow: 1' faz com que ele se estique para ocupar todo o espaço disponível no .guess-container, ao lado do botão.
 * O visual é 100% controlado por variáveis do :root.
 */
#guess-input {
  flex-grow: 1; /* Faz o input ocupar o espaço restante */
  padding: 10px;
  font-size: 1rem;
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--input-text);
  border-radius: 6px;
}

/* Estiliza o texto de placeholder (ex: "Digite seu palpite...") */
#guess-input::placeholder {
  color: var(--theme-text-muted);
  opacity: 1; /* Garante que a cor do placeholder seja consistente */
}

/*
 * Estilo do input quando está focado (selecionado).
 * 'outline: none' remove o brilho padrão do navegador.
 * 'box-shadow' cria o "brilho" azul sutil (bom para acessibilidade).
 */
#guess-input:focus {
  outline: none;
  border-color: var(--theme-accent);
  box-shadow: 0 0 0 2px var(--input-focus-shadow);
}

/*
 * A lista suspensa (dropdown) de resultados do autocomplete.
 * 'position: absolute' "flutua" a lista abaixo do input.
 * 'top: 100%' posiciona a lista exatamente abaixo do .guess-wrapper.
 * 'z-index: 100' garante que a lista apareça SOBRE os outros elementos da página (como o histórico).
 * 'max-height' e 'overflow-y' adicionam uma barra de rolagem interna se houver muitos resultados.
 */
#autocomplete-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background-color: var(--theme-bg-card);
  border: 1px solid var(--theme-bg-hover);
  border-top: none; /* Remove a borda de cima (fica colado no input) */
  border-radius: 0 0 6px 6px; /* Arredonda só os cantos de baixo */
  z-index: 100;
  text-align: left;
  box-shadow: 0 3px 5px rgba(0,0,0,0.1);
}

/* Um item individual na lista de autocomplete */
.autocomplete-item {
  padding: 10px 15px;
  cursor: pointer;
}

/* Feedback visual ao passar o mouse sobre um item */
.autocomplete-item:hover {
  background-color: var(--theme-bg-hover);
}

/*
 * Item "ativo" (geralmente selecionado via JS,
 * ex: usando as setas do teclado).
 */
.autocomplete-item.active {
  background-color: var(--theme-accent);
  color: var(--theme-text-on-accent);
}

/* ===================================================== */
/* ================= 8b. Guess History ================= */

/*
 * Container para a lista de palpites anteriores.
 * Limita a altura e adiciona uma barra de rolagem se a lista de palpites ficar muito longa (ex: mais de 5 palpites).
 */
#guess-history-container {
  max-height: 150px;
  overflow-y: auto;
}

/* Estilo base para um item no histórico de palpites */
.history-item {
  padding: 8px 12px;
  border-radius: 4px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 5px; /* Espaço entre os itens */
  border: 1px solid transparent; /* Borda base */
}

/*
 * Remove a margem inferior do ÚLTIMO item da lista para evitar espaçamento duplo no fundo do container.
 */
.history-item:last-child {
  margin-bottom: 0;
}

/* Modificador para palpite INCORRETO (vermelho) */
.history-item.incorrect {
  background-color: var(--history-incorrect-bg);
  border-color: var(--history-incorrect-border);
  color: var(--history-incorrect-text);
}

/* Modificador para palpite CORRETO (verde) */
.history-item.correct {
  background-color: var(--history-correct-bg);
  border-color: var(--history-correct-border);
  color: var(--history-correct-text);
}

/* Modificador para palpite PULADO (cinza/sutil) */
.history-item.skipped {
  background-color: var(--history-skipped-bg);
  border-color: var(--history-skipped-border); 
  color: var(--history-skipped-text); 
}

/* =========================================================== */
/* ================= 8c. Feedback & Counters ================= */

/* A mensagem de feedback (ex: "Correto!", "Errado!") */
#feedback-message {
  font-size: 1.1rem;
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 0;
}

/* Colore a mensagem de feedback em verde */
.feedback-correct {
  color: var(--feedback-green);
}

/* Colore a mensagem de feedback em vermelho */
.feedback-incorrect {
  color: var(--feedback-red-text);
}

/*
 * O contador de "Palpites Restantes".
 * 'opacity: 0.8' o torna um pouco mais sutil que o texto principal.
 */
#guesses-remaining {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--theme-text-main);
  opacity: 0.8;
  margin-top: 15px;
}


/* ==========================================================================
                       9. Component: End Game Screen
   ========================================================================== */

/*
 * ID do card de "Fim de Jogo".
 * 'text-align: center' centraliza os elementos filhos, como a imagem do jogo, o <h4> e o grupo de botões.
 */
#end-game-actions {
  text-align: center;
}

/*
 * Estiliza a imagem "header" do jogo que aparece no card de fim de jogo.
 */
.game-header-image {
  width: 100%; /* Ocupa 100% da largura do card */
  max-width: 460px; /* Limita o tamanho (padrão da Steam) */
  /* 'margin: 0 auto 20px auto' faz:
    * 0 (top), auto (left/right, centralizando a imagem),
    * 20px (bottom, espaço antes do texto/botões) */
  margin: 0 auto 20px auto;
  border-radius: 6px;
  display: block; /* Remove espaço extra abaixo da imagem */
  border: 1px solid var(--theme-bg-hover);
}

/* Título <h4> (ex: "O jogo era...") no card de fim de jogo */
#end-game-actions h4 {
  margin-top: 20px;
  margin-bottom: 15px;
  color: var(--theme-text-main);
}

/*
 * Agrupa os botões no card de fim de jogo
 * (ex: "Jogar Novamente", "Ver na Steam", "Compartilhar").
 * Usa flexbox para alinhá-los horizontalmente.
 */
.end-game-btn-group {
  display: flex;
  gap: 10px; /* Espaço entre os botões */
  justify-content: center; /* Centraliza o grupo de botões */
  margin-top: 20px;
}

/*
 * Modificador para o card de fim de jogo em caso de VITÓRIA.
 * Adiciona uma borda verde ao card.
 */
.win-card {
  border-color: var(--feedback-green);
}

/*
 * Modificador para o card de fim dejJogo em caso de DERROTA.
 * Adiciona uma borda vermelha ao card.
 */
.loss-card {
  border-color: var(--feedback-red);
}


/* ==========================================================================
                          10. Component: Stats Modal
   ========================================================================== */

/*
 * O .modal-overlay é o fundo escuro semi-transparente que cobre a tela inteira quando um modal está aberto.
 * 'position: fixed' o fixa na tela, independentemente da rolagem.
 * 'z-index: 1000' o coloca acima de todo o resto do conteúdo.
 * Usa flexbox para centralizar o .modal-content.
 * 'align-items: flex-start' alinha o modal no TOPO (não no centro vertical), e 'overflow-y: auto' permite rolar a PÁGINA
 * inteira se o modal for muito alto (bom para celulares).
 */
.modal-overlay {
  position: fixed; /* Cobre a tela inteira */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* Fundo preto semi-transparente */
  display: flex;
  justify-content: center; /* Centraliza o modal horizontalmente */
  align-items: flex-start; /* Alinha o modal no topo da tela */
  overflow-y: auto; /* Permite rolar o overlay se o modal for maior que a tela */
  padding: 20px 0; /* Espaço no topo/fundo ao rolar */
  z-index: 1000; /* Garante que fique acima de tudo */
}

/*
 * O .modal-content é o "card" flutuante que contém o
 * conteúdo do modal (seja Stats, Info ou Idioma).
 * É uma extensão da classe .card (que é aplicada via HTML).
 * 'position: relative' é para "ancorar" o botão de fechar (.btn-close).
 * 'width: 90%' e 'max-width' o tornam responsivo.
 */
.modal-content {
  position: relative; /* Para posicionar o .btn-close */
  width: 90%; /* Responsivo em telas pequenas */
  max-width: 400px; /* Largura máxima */
  text-align: center; /* Centraliza o título (h2) do modal */
}

/*
 * O botão de fechar "X" dentro do modal.
 * 'position: absolute' o "flutua" para o canto superior direito
 * do .modal-content (que tem 'position: relative').
 */
.btn-close {
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 2rem;
  color: var(--theme-text-muted); /* Cor sutil */
}

/*
 * O layout em grade para as estatísticas (Jogos Jogados, Vitórias, etc.).
 * Usa CSS Grid para criar colunas responsivas.
 * 'repeat(auto-fit, minmax(100px, 1fr))' é a mágica:
 * - Tenta criar colunas de no mínimo 100px.
 * - '1fr' permite que elas cresçam para preencher o espaço.
 * - 'auto-fit' faz com que elas quebrem a linha automaticamente
 *   (ex: 3 colunas em desktop, 2 em tablet, 1 em celular).
 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 20px; /* Espaço entre cada item da grade */
  margin-top: 20px; /* Espaço abaixo do título do modal */
}

/*
 * Um item individual da grade de estatísticas.
 * É um "mini-card" com fundo 'bg-hover'.
 * Usa flexbox (column) para empilhar o número (.stat-number)
 * em cima do rótulo (.stat-label).
 */
.stat-item {
  display: flex;
  flex-direction: column; /* Empilha o número e o rótulo */
  background-color: var(--theme-bg-hover);
  padding: 10px;
  border-radius: 8px;
}

/* O número grande da estatística (ex: "10") */
.stat-number {
  font-size: 2rem;
  font-weight: bold;
  color: var(--theme-text-main);
}

/* O rótulo pequeno (ex: "Jogos Jogados") */
.stat-label {
  font-size: 0.9rem;
  color: var(--theme-text-main); 
  opacity: 0.8; /* Texto um pouco mais sutil */
}


/* ==========================================================================
                           11. Component: Info Modal 
                         (e Component: Language Modal)
   ========================================================================== */

/*
 * Container para o conteúdo de texto dentro do modal de "Info" (Como Jogar).
 * 'text-align: left' é importante aqui para SOBREPOR o 'text-align: center'
 * do .modal-content (o título H2 fica centralizado, mas o texto de instrução fica alinhado à esquerda).
 */
.info-content {
  margin-top: 15px; /* Espaço abaixo do título do modal */
  text-align: left; /* Alinha o texto de instrução à esquerda */
}

/* Subtítulos (ex: "Como Jogar") dentro do modal de info */
.info-content h3 {
  color: var(--theme-text-main);
  margin-top: 20px;
  margin-bottom: 10px;
}

/* Parágrafos <p> e itens de lista <li> do modal de info */
.info-content p,
.info-content li {
  font-size: 0.95rem; /* Fonte ligeiramente menor */
  line-height: 1.6; /* Boa legibilidade */
  color: var(--theme-text-main); 
  opacity: 0.9; /* Texto um pouco mais sutil */
}

/* Estiliza a lista <ul> (adiciona indentação padrão) */
.info-content ul {
  padding-left: 20px;
}

/* =================================================== */
/* --- Grupo de Botões de Idioma (Dentro do Modal) --- */

/*
 * Container para os botões de seleção de idioma.
 * 'flex-direction: column' é a chave aqui: empilha os botões verticalmente (um em cima do outro).
 */
.lang-btn-group {
  display: flex;
  flex-direction: column; /* Empilha os botões */
  gap: 10px; /* Espaço entre cada botão */
  margin-top: 20px; /* Espaço abaixo do título do modal */
}

/*
 * Estilo do botão de idioma individual (ex: "Português").
 * É estilizado para parecer um item de lista selecionável.
 * 'text-align: left' é usado para alinhar o nome do idioma à esquerda.
 */
.btn-lang {
  font-size: 1rem;
  padding: 12px 15px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  background-color: var(--theme-bg-hover); /* Cor base sutil */
  color: var(--theme-text-main);
  border: 1px solid var(--theme-bg-hover);
  transition: all 0.2s;
  text-align: left; /* Alinha o texto do idioma à esquerda */
}

/* Efeito 'hover' para o botão de idioma */
.btn-lang:hover {
  background-color: var(--theme-accent);
  color: var(--theme-text-on-accent);
  border-color: var(--theme-accent);
}

/*
 * Estilo do botão de idioma que está ATIVO (selecionado).
 * Usa a cor de destaque principal e negrito.
 */
.btn-lang.active {
  background-color: var(--theme-accent);
  color: var(--theme-text-on-accent);
  border-color: var(--theme-accent);
  font-weight: bold;
}


/* ==========================================================================
                          12. Component: Share Card
   ========================================================================== */

/*
 * A caixa de texto <textarea> (ou <div>) que mostra o
 * resultado a ser copiado (a grade de emojis 🟩🟥⬜).
 * 'font-family: monospace' é usado para que os emojis e espaços se alinhem perfeitamente, como código.
 * 'white-space: pre-wrap' é crucial para respeitar as quebras de linha (\n) que vêm do JavaScript.
 * 'word-wrap: break-word' quebra palavras longas (embora 'pre-wrap' geralmente cuide disso).
 */
.share-text-box {
  font-family: monospace; /* Garante alinhamento dos emojis */
  font-size: 1rem;
  background-color: var(--theme-bg-body); /* Fundo sutil */
  border: 1px solid var(--theme-bg-hover);
  border-radius: 6px;
  padding: 15px;
  width: 100%; /* Ocupa toda a largura do card */
  white-space: pre-wrap; /* Respeita as quebras de linha do JS */
  word-wrap: break-word; /* Quebra palavras/linhas longas */
  margin-bottom: 15px; /* Espaço antes do botão "Copiar" */
  text-align: left; /* Alinha o texto à esquerda */
}

/*
 * Seleciona o botão .btn (Botão "Copiar") que está DENTRO do #share-card.
 * 'width: 100%' faz o botão "Copiar" ocupar toda a largura do card.
 */
#share-card .btn {
  width: 100%;
}

/* ==========================================================================
                              Screen Shake
   ========================================================================== */

/*
 * 1. Define a animação "shake" (tremor).
 * @keyframes permite definir os "passos" de uma animação.
 * Esta animação move o elemento levemente para a esquerda (-1px) e direita (1px) de forma muito rápida, criando um efeito de tremor.
 * Começa e termina em 'translateX(0)' (posição normal).
 */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-1px); }
  50% { transform: translateX(1px); }
  75% { transform: translateX(-1px); }
}

/*
 * 2. Classe de Suporte (aplicada ao <body> via JS).
 * Quando a animação 'shake' é aplicada a um elemento grande (como o .container), o 'translateX' pode causar uma
 * barra de rolagem horizontal momentânea.
 * Esta classe, aplicada ao <body> *durante* a animação, esconde ('overflow-x: hidden') essa barra de rolagem.
 */
body.screen-shake {
  overflow-x: hidden;
}

/*
 * 3. Classe de Ativação (aplicada ao .container via JS).
 * Esta é a classe que o JavaScript adiciona ao .container (ou a qualquer elemento) para *iniciar* a animação.
 * Ela "liga" a animação @keyframes 'shake' definida acima, dizendo para executá-la em 0.3 segundos com um ritmo 'ease-in-out'.
 */
.screen-shake {
  animation: shake 0.3s ease-in-out;
}