/* Base — estrutura da página, componentes reutilizados por vários jogos
   (cabeçalho, telas, cartões de jogo, botões, salas, placar, perfil-trigger,
   login do Discord, rodapé). Estilos específicos de cada jogo ficam nos
   arquivos css/<jogo>.css. */

:root {
  color: #f4f6ff;
  background: #0a0e1a;
  font-family: Arial, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #152238, #0a0e1a 55%); }
button { font: inherit; }
.aplicacao { width: min(760px, 94%); margin: 0 auto; padding: 42px 0 28px; }
.cabecalho, .cabecalho-jogo, .informacoes-jogo, .acoes { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.marca { margin: 0 0 10px; color: #5b9dff; font-size: 12px; font-weight: bold; letter-spacing: 2px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(30px, 6vw, 48px); }
h2 { margin-bottom: 8px; font-size: 22px; }
.subtitulo, .titulo-tela p { margin-bottom: 0; color: #aeb2c7; }
.status, .etiqueta { border: 1px solid #2d4470; border-radius: 999px; padding: 8px 12px; color: #9dc2ff; font-size: 12px; white-space: nowrap; }
.status { cursor: pointer; }
.status:hover { border-color: #3b82f6; color: #f4f6ff; }
.status.conectado { border-color: #3d9d6b; color: #85e0ae; }
.perfil-trigger { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid transparent; border-radius: 999px; background: transparent; cursor: pointer; }
.perfil-trigger:hover { border-color: #3b82f6; background: #16233d; }
.tela { display: none; margin-top: 34px; padding: 26px; border: 1px solid #20293f; border-radius: 20px; background: rgba(25, 28, 43, .94); box-shadow: 0 20px 60px rgba(0, 0, 0, .28); }
.tela.ativa { display: block; }
.titulo-tela { margin-bottom: 24px; }
.cartao-jogo, .botao-dificuldade { width: 100%; display: flex; align-items: center; gap: 16px; border: 1px solid #26314f; border-radius: 14px; padding: 18px; color: #f4f6ff; background: #111a2e; text-align: left; cursor: pointer; }
.cartao-jogo:hover, .botao-dificuldade:hover { border-color: #3b82f6; background: #16233d; }
.icone-jogo { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 12px; color: #f4f6ff; background: #1c2c4a; font-weight: bold; }
.cartao-jogo strong, .botao-dificuldade strong { display: block; margin-bottom: 6px; font-size: 18px; }
.cartao-jogo small, .botao-dificuldade small { display: block; color: #aeb2c7; }
.seta { margin-left: auto; color: #5b9dff; font-size: 24px; }
.voltar { margin-bottom: 22px; border: 0; padding: 0; color: #7db4ff; background: transparent; cursor: pointer; }
.dificuldades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.botao-dificuldade { display: block; min-height: 112px; }
.cabecalho-jogo { margin-bottom: 14px; }
.informacoes-jogo { justify-content: flex-end; }
.cronometro { min-width: 64px; color: #ffffff; font-variant-numeric: tabular-nums; font-weight: bold; text-align: right; }
.mensagem { min-height: 24px; margin: 18px 0 14px; color: #9dc2ff; font-weight: bold; text-align: center; }
.mensagem.erro { color: #ff9a9a; }
.mensagem.sucesso { color: #85e0ae; }
.acoes { justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.botao { border: 1px solid #29385c; border-radius: 10px; padding: 11px 14px; color: #f4f6ff; background: #141c30; cursor: pointer; }
.botao:hover { border-color: #3b82f6; }
.botao.principal { border-color: #2f6fe0; background: #2563eb; }
.historico { margin-top: 30px; border-top: 1px solid #20293f; padding-top: 22px; }
.historico h2 { font-size: 18px; }
.registro, .vazio { margin: 8px 0; padding: 10px 12px; border-radius: 8px; color: #c9ccda; background: #111a2e; font-size: 14px; }
.registro { display: flex; justify-content: space-between; gap: 12px; }
.jogo-conteudo { display: flex; gap: 24px; align-items: flex-start; }
.jogo-grade-area { flex: 1; min-width: 0; }
.painel-recordes { width: 270px; flex-shrink: 0; border: 1px solid #20293f; border-radius: 14px; padding: 16px; background: #111a2e; }
.painel-recordes h2 { font-size: 16px; margin-bottom: 12px; color: #9dc2ff; }
/* flex-wrap: quando a coluna fica estreita, o valor (vitórias/tempo) desce pra
   segunda linha em vez de espremer o nick até virar reticências. */
.registro-recorde { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 9px 10px; margin-bottom: 6px; border-radius: 8px; background: #141c30; font-size: 14px; }
.recorde-posicao { font-size: 18px; flex-shrink: 0; }
.recorde-info { flex: 1 1 96px; min-width: 0; display: flex; flex-direction: column; }
.recorde-info strong { color: #f4f6ff; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recorde-info small { color: #aeb2c7; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recorde-tempo { margin-left: auto; color: #85e0ae; font-weight: bold; font-variant-numeric: tabular-nums; white-space: nowrap; }
.recorde-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #1c2c4a; border: 1px solid #2d4470; }
.recorde-avatar.placeholder { display: grid; place-items: center; color: #9dc2ff; font-weight: bold; font-size: 13px; }

/* Escolha de modo (Velha, Campo Minado, Termo) */
.modo-selecao { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.botao-modo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 120px; border: 1px solid #26314f; border-radius: 14px; padding: 18px; color: #f4f6ff; background: #111a2e; cursor: pointer; text-align: center; }
.botao-modo:hover { border-color: #3b82f6; background: #16233d; }
.botao-modo .icone { font-size: 32px; }
.botao-modo strong { font-size: 16px; }
.botao-modo small { color: #aeb2c7; font-size: 12px; }

/* Salas (criar/entrar) — reaproveitado por sudoku, velha, campo, termo, tela */
.sala-container { display: flex; flex-direction: column; gap: 14px; }
.sala-input { display: flex; gap: 10px; }
.sala-input input { flex: 1; padding: 10px 14px; border: 1px solid #26314f; border-radius: 10px; background: #0d1424; color: #f4f6ff; font-size: 14px; }
.sala-input input::placeholder { color: #555; }
.sala-input input:focus { outline: 2px solid #9dc2ff; outline-offset: -2px; }

.espectadores-bar { margin-top: 12px; padding: 8px 12px; border-radius: 8px; background: #111a2e; font-size: 13px; color: #aeb2c7; text-align: center; }

.sala-lista { margin-top: 16px; }
.sala-item { display: flex; align-items: center; justify-content: space-between; padding: 12px; margin-bottom: 8px; border: 1px solid #26314f; border-radius: 10px; background: #111a2e; cursor: pointer; }
.sala-item:hover { border-color: #3b82f6; background: #16233d; }
.sala-item-info { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.sala-item-info > span { display: flex; flex-direction: column; min-width: 0; }
.sala-item-info strong { display: block; font-size: 14px; }
.sala-item-info small { color: #aeb2c7; font-size: 12px; }
.sala-item-jogadores { font-size: 12px; color: #9dc2ff; white-space: nowrap; }
.sala-item-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #1c2c4a; border: 2px solid #2d4470; flex-shrink: 0; }
.sala-item-avatar-inicial { display: grid; place-items: center; font-weight: bold; font-size: 14px; color: #9dc2ff; width: 32px; height: 32px; border-radius: 50%; background: #1c2c4a; border: 2px solid #2d4470; flex-shrink: 0; box-sizing: border-box; }
.sala-item-avatar-box { position: relative; display: inline-flex; flex-shrink: 0; }
.etiqueta-publica { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: #1e3d2a; color: #85e0ae; font-size: 10px; font-weight: normal; vertical-align: middle; }

.popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6); display: none; place-items: center; z-index: 100; }
.popup-overlay.ativo { display: grid; }
.popup { padding: 24px; border: 1px solid #26314f; border-radius: 16px; background: #111a2e; text-align: center; max-width: 340px; width: 90%; }
.popup h3 { margin: 0 0 12px; font-size: 18px; color: #9dc2ff; }
.popup p { margin: 0 0 18px; color: #c9ccda; font-size: 14px; }
.popup-botoes { display: flex; gap: 10px; justify-content: center; }

.sala-codigo-display { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; padding: 10px 14px; border: 1px solid #26314f; border-radius: 10px; background: #111a2e; }
.sala-codigo-label { color: #aeb2c7; font-size: 13px; }
.sala-codigo-valor { color: #9dc2ff; font-size: 18px; font-weight: bold; letter-spacing: 2px; font-family: monospace; }
.botao-copiar { padding: 5px 12px; border: 1px solid #2d4470; border-radius: 8px; background: transparent; color: #7db4ff; font-size: 12px; cursor: pointer; }
.botao-copiar:hover { background: #16233d; border-color: #3b82f6; }
.botao-copiar.copiado { border-color: #3d9d6b; color: #85e0ae; }

.ranking-panel { margin-top: 16px; border: 1px solid #20293f; border-radius: 14px; padding: 16px; background: #111a2e; }
.ranking-panel h2 { font-size: 16px; margin-bottom: 10px; color: #9dc2ff; }

/* Placar universal estilo times: foto em cima, gols ao lado — sudoku/velha/campo/ludo */
.placar-times { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 auto 14px; padding: 12px 14px; border: 1px solid #20293f; border-radius: 14px; background: #111a2e; max-width: 420px; }
.placar-lado { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 72px; }
.placar-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #1c2c4a; border: 2px solid #2d4470; display: grid; place-items: center; font-weight: bold; font-size: 18px; color: #9dc2ff; overflow: hidden; position: relative; }
.placar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.placar-avatar.tem-decoracao { overflow: visible; }
.placar-avatar .avatar-decoracao-img { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: contain; pointer-events: none; }
.placar-nick { font-size: 12px; color: #aeb2c7; max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.placar-gol { font-size: 28px; font-weight: bold; color: #9dc2ff; font-variant-numeric: tabular-nums; line-height: 1; }
.placar-x { color: #aeb2c7; font-size: 20px; font-weight: bold; }

/* Login Discord (cabeçalho fixo) */
.cabecalho-acoes { position: fixed; top: 10px; right: 14px; z-index: 70; display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; max-width: calc(100vw - 20px); padding: 6px 10px; background: rgba(14, 16, 30, 0.93); border: 1px solid #1c2c4a; border-radius: 999px; backdrop-filter: blur(6px); }
.botao-login { padding: 8px 14px; font-size: 13px; white-space: nowrap; }
#auth-usuario { display: flex; align-items: center; gap: 8px; padding: 0; border: none; background: transparent; }
#auth-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #1c2c4a; border: 2px solid #2d4470; }

/* Moldura pra sobrepor a decoração de perfil equipada em cima do avatar
   (cabeçalho, placares de sala etc) — mesma ideia em toda parte do site. */
.avatar-decorado { position: relative; display: inline-flex; width: 28px; height: 28px; flex-shrink: 0; }
.avatar-decoracao-img { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: contain; pointer-events: none; }
[data-perfil] { cursor: pointer; }
#termo-oponente-status { align-items: center; justify-content: center; gap: 8px; }
#auth-nome { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: #9dc2ff; }
@media (max-width: 640px) { #status-discord { display: none; } }

footer { margin-top: 24px; color: #777d98; font-size: 13px; text-align: center; }
footer a { color: #7db4ff; text-decoration: none; }
footer a:hover { color: #9dc2ff; }

@media (max-width: 560px) {
  .cabecalho, .cabecalho-jogo { align-items: flex-start; flex-direction: column; }
  .informacoes-jogo { width: 100%; justify-content: space-between; }
  .dificuldades, .modo-selecao { grid-template-columns: 1fr; }
  .tela { padding: 18px; }
  .jogo-conteudo { flex-direction: column; }
  .painel-recordes { width: 100%; }
}

/* Ajustes para a janela menor do Discord (parte genérica; cada jogo tem a
   sua própria fatia deste media query no seu css). */
@media (max-height: 800px) {
  .aplicacao { padding-top: 20px; }
  h1 { font-size: clamp(28px, 5vw, 38px); }
  .subtitulo { font-size: 14px; }
  .tela { margin-top: 18px; padding: 16px; }
  .jogo-conteudo { gap: 16px; }
  .painel-recordes { padding: 12px; width: 230px; }
}