/*
 * Genial General — componentes base (fase 1, 30/out/2026). Requer tokens.css antes.
 * Prefixo gg- em tudo para conviver com o CSS antigo durante a migração tela a tela.
 * Catálogo vivo: /gg/guia.html.
 */

.gg {
    font-family: var(--gg-fonte-texto);
    color: var(--gg-texto);
    background: var(--gg-marinho-escuro);
    line-height: 1.5;
}
.gg *, .gg *::before, .gg *::after { box-sizing: border-box; }
[hidden].gg-chip, [hidden].gg-botao, [hidden].gg-painel, [hidden].gg-cartao, [hidden].gg-balao { display: none !important; }

/* ---------- Letras ---------- */
.gg-titulo { font-family: var(--gg-fonte-titulo); font-weight: 400; line-height: 1.05; margin: 0; text-wrap: balance; }
.gg-titulo--tela { font-size: var(--gg-tam-5); color: #fff; text-shadow: 0 0.08em 0 var(--gg-marinho-escuro); }
.gg-numero { font-family: var(--gg-fonte-titulo); font-variant-numeric: tabular-nums; line-height: 1; }
.gg-suave { color: var(--gg-texto-suave); }

/* Logo em texto (nítido em qualquer tamanho; a arte da IA não escreve bem) */
.gg-logo { font-family: var(--gg-fonte-titulo); font-size: var(--gg-tam-7); line-height: 0.9; text-align: center; margin: 0; }
.gg-logo span { display: block; -webkit-text-stroke: var(--gg-contorno-logo) #fff; paint-order: stroke fill; text-shadow: 0 0.09em 0 var(--gg-marinho-escuro); }
.gg-logo .gg-logo__1 { color: var(--gg-ouro); }
.gg-logo .gg-logo__2 { color: var(--gg-vermelho); }

/* ---------- Botões ---------- */
.gg-botao {
    --cor: var(--gg-verde); --sola-cor: var(--gg-verde-escuro); --tinta: #fff;
    font-family: var(--gg-fonte-titulo); font-size: 1.25rem; letter-spacing: 0.02em; line-height: 1;
    color: var(--tinta); background: var(--cor);
    border: 0; border-radius: var(--gg-raio); padding: 0.6em 1.3em;
    box-shadow: var(--gg-sola) var(--sola-cor), var(--gg-brilho);
    display: inline-grid; place-items: center; text-align: center; text-decoration: none;
    cursor: pointer; user-select: none;
    transition: transform var(--gg-transicao), box-shadow var(--gg-transicao), filter var(--gg-transicao);
}
.gg-botao:hover { filter: brightness(1.06); }
.gg-botao:active { transform: translateY(0.2em); box-shadow: 0 0.08em 0 var(--sola-cor), var(--gg-brilho); }
.gg-botao:focus-visible { outline: 0.2em solid #fff; outline-offset: 0.2em; }
.gg-botao:disabled, .gg-botao[aria-disabled="true"] { filter: grayscale(0.8) brightness(0.8); cursor: not-allowed; transform: none; }
.gg-botao--ouro { --cor: var(--gg-ouro); --sola-cor: var(--gg-ouro-escuro); --tinta: var(--gg-tinta); }
.gg-botao--vermelho { --cor: var(--gg-vermelho); --sola-cor: var(--gg-vermelho-escuro); }
.gg-botao--azul { --cor: var(--gg-azul); --sola-cor: var(--gg-painel); }
.gg-botao--creme { --cor: var(--gg-creme); --sola-cor: var(--gg-creme-escuro); --tinta: var(--gg-tinta); }
.gg-botao--grande { font-size: 2.25rem; border-radius: 1.1rem; }
.gg-botao--pequeno { font-size: 1rem; padding: 0.5em 1em; }
.gg-botao--redondo { border-radius: 50%; width: 5.5em; height: 5.5em; padding: 0; font-size: 1.1rem; }

/* ---------- Superfícies ---------- */
.gg-painel { background: rgba(10, 29, 68, 0.88); border: 0.15rem solid rgba(255, 255, 255, 0.12); border-radius: var(--gg-raio-g); padding: var(--gg-espaco); box-shadow: var(--gg-sombra); }
.gg-cartao { background: var(--gg-creme); color: var(--gg-tinta); border-radius: var(--gg-raio); padding: var(--gg-espaco); box-shadow: var(--gg-sola) var(--gg-creme-escuro); }
.gg-cartao--escolhido { outline: 0.25rem solid var(--gg-ouro); background: #FFE9A8; }

/* Chip: contador de moedas, status, nome + facção */
.gg-chip { display: inline-flex; align-items: center; gap: 0.4em; background: rgba(10, 29, 68, 0.85); color: var(--gg-texto); border-radius: var(--gg-raio-pilula); padding: 0.3em 0.9em; font-weight: 900; white-space: nowrap; }
.gg-chip img { width: 1.6em; height: 1.6em; object-fit: contain; }
.gg-chip--alerta { background: var(--gg-vermelho); color: #fff; }

/* Etiqueta de facção: só texto ao lado do nome (personagem ≠ facção) */
.gg-faccao { color: var(--gg-ouro); font-weight: 900; }

/* Balão de fala do General */
.gg-balao { position: relative; background: #fff; color: var(--gg-tinta); border-radius: var(--gg-raio-g); padding: 0.9em 1.2em; font-weight: 800; box-shadow: 0 0.3em 0 rgba(0, 0, 0, 0.18); max-width: 22rem; }
.gg-balao::after { content: ""; position: absolute; left: 1.4em; bottom: -0.7em; border: 0.75em solid transparent; border-top-color: #fff; border-bottom: 0; }
.gg-balao__titulo { display: block; font-family: var(--gg-fonte-titulo); font-weight: 400; color: var(--gg-marinho); font-size: 1.2em; }

/* ---------- Retrato (busto do personagem) ---------- */
/* A borda é a cor das PEÇAS da partida (--cor-pecas), não a farda. */
.gg-retrato { --tam: 3.5rem; --cor-pecas: var(--gg-creme); width: var(--tam); height: var(--tam); border-radius: 50%; object-fit: cover; border: calc(var(--tam) * 0.06 + 1px) solid var(--cor-pecas); background: var(--gg-creme); display: block; flex: none; }
.gg-retrato--g { --tam: 8rem; }
.gg-retrato--p { --tam: 2.25rem; }
.gg-retrato--vez { outline: 0.22rem solid var(--gg-ouro); outline-offset: 0.12rem; }

/* ---------- Barra de progresso (patente, missões) ---------- */
.gg-progresso { height: 0.75rem; background: rgba(255, 255, 255, 0.15); border-radius: var(--gg-raio-pilula); overflow: hidden; }
.gg-progresso > i { display: block; height: 100%; width: var(--valor, 0%); background: var(--gg-ouro); border-radius: inherit; }
.gg-cartao .gg-progresso { background: #E5DCC3; }

/* ---------- Peça do tabuleiro (soldadinho tingido na cor do jogador) ---------- */
.gg-peca { --cor: var(--gg-jogador-1); display: inline-grid; justify-items: center; }
.gg-peca__boneco { width: 2.1rem; height: 2.9rem; background: var(--cor); -webkit-mask: url("arte/soldado.webp") center / contain no-repeat; mask: url("arte/soldado.webp") center / contain no-repeat; filter: drop-shadow(0 0.15rem 0 rgba(0, 0, 0, 0.25)); }
.gg-peca__numero { margin-top: -0.5rem; min-width: 1.9rem; height: 1.9rem; padding: 0 0.35rem; border-radius: var(--gg-raio-pilula); background: #fff; color: var(--gg-tinta); font-family: var(--gg-fonte-titulo); display: grid; place-items: center; border: 0.17rem solid var(--cor); font-variant-numeric: tabular-nums; }

/* ---------- Dado ---------- */
.gg-dado { --tam: 3.5rem; width: var(--tam); height: var(--tam); border-radius: 22%; background: #fff; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 12%; box-shadow: 0 0.25rem 0 #C8CDD9; }
.gg-dado--ataque { background: var(--gg-vermelho); box-shadow: 0 0.25rem 0 var(--gg-vermelho-escuro); }
.gg-dado i { width: 70%; aspect-ratio: 1; border-radius: 50%; background: var(--gg-tinta); place-self: center; visibility: hidden; }
.gg-dado--ataque i { background: #fff; }
/* faces: cada valor acende as casas certas da grade 3×3 */
.gg-dado[data-v="1"] i:nth-child(5),
.gg-dado[data-v="2"] i:is(:nth-child(1), :nth-child(9)),
.gg-dado[data-v="3"] i:is(:nth-child(1), :nth-child(5), :nth-child(9)),
.gg-dado[data-v="4"] i:is(:nth-child(1), :nth-child(3), :nth-child(7), :nth-child(9)),
.gg-dado[data-v="5"] i:is(:nth-child(1), :nth-child(3), :nth-child(5), :nth-child(7), :nth-child(9)),
.gg-dado[data-v="6"] i:is(:nth-child(1), :nth-child(3), :nth-child(4), :nth-child(6), :nth-child(7), :nth-child(9)) { visibility: visible; }

@media (prefers-reduced-motion: no-preference) {
    .gg-pulsa { animation: gg-pulsa 1.6s ease-in-out infinite; }
    @keyframes gg-pulsa { 50% { transform: scale(1.04); } }
}