/* base.css — variáveis, temas, reset, body, tipografia e utilitários globais. */ /* Reset */ * { box-sizing: border-box; margin: 0; padding: 0; } /* Variáveis de tema. :root traz o padrão (tela inicial). O JS adiciona a classe tema-* ao e os blocos abaixo sobrescrevem só o necessário, então tudo que usa var(--accent), var(--bg) etc. muda junto. */ :root { --bg: #0E0F13; /* fundo quase-preto (modo escuro padrão) */ --txt: #F4F6F8; /* texto branco */ --txt-soft: #99A0AA; /* texto secundário (cinza) */ --accent: #2BD46A; /* verde-campo — cor de ação padrão */ /* Tokens da tela inicial (modo escuro) */ --surface: #181B21; /* cards e superfícies */ --linha: rgba(255, 255, 255, 0.09); /* divisórias e bordas */ --btn-txt: #0B0C0F; /* texto escuro sobre o verde */ --accent-sombra: #178A41; /* verde escuro p/ sombra do botão */ --titulo-sombra: #464C56; /* cinza p/ sombra da manchete (leitura melhor que o verde) */ } /* Tema Libertadores: preto e dourado */ body.tema-libertadores { --bg: #0E0C0A; --txt: #F3E9CE; --txt-soft: rgba(243, 233, 206, 0.55); --accent: #D9B25A; /* dourado */ } /* Tema Champions League: azul-escuro e prata */ body.tema-champions { --bg: #0A1A3F; --txt: #EAF0FA; --txt-soft: rgba(234, 240, 250, 0.55); --accent: #DCE6F4; /* prata */ } /* Tema Brasileirão: usa a MESMA paleta da tela inicial (fundo quase-preto + verde-campo) */ body.tema-brasileirao { --bg: #0E0F13; --txt: #F4F6F8; --txt-soft: #99A0AA; --accent: #2BD46A; /* verde-campo (igual à home) */ } body { font-family: 'Archivo', sans-serif; background-color: var(--bg); color: var(--txt); min-height: 100vh; transition: background-color 0.4s ease, color 0.4s ease; } /* Utilitários */ /* Oculta o elemento. O !important garante prioridade sobre o display:flex de .tela, que vem depois no arquivo. */ .escondida { display: none !important; } /* Desliga a transição na carga inicial, para as fichas surgirem já no lugar em vez de "viajarem" a partir do canto 0,0. */ .sem-transicao { transition: none !important; } /* Estrutura base de cada tela (a tela inicial sobrescreve parte disto). */ .tela { width: 100%; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 20px; } /* Conteúdo central — usado pela tela provisória do jogo. */ .conteudo-central { width: 100%; max-width: 520px; text-align: center; }