/*
 * Tema da partida — tabuleiro e HUD no estilo do design novo (fase 3, 30/out/2026).
 * Carregado POR ÚLTIMO em game.html (depois de hud.css) e game-mobile.html (depois de mobile-hud.css).
 * Só aparência: nenhuma regra, nenhum dado. Tudo sob `html.gg-tema` (a classe vem no próprio HTML;
 * ?tema=antigo a tira, para comparar — tema-partida.js).
 *
 * Como funciona:
 *   - Os dois motores pintam o HUD com as variáveis --hud-* / --ph-* (hud.css, mobile-hud.css):
 *     redefinidas aqui, valem para computador e celular de uma vez.
 *   - Mapa: oceano turquesa, terra de pergaminho, fronteiras brancas e relevo. As cores dos países
 *     continuam as dos jogadores (RegrasSala.CORES), postas pelo motor.
 *   - Bolha de exércitos branca com borda na cor do dono; soldadinho tingido (tema-partida.js).
 *   - No desktop o preenchimento dos países é estilo inline (game.js updateMapSVG): não mexemos nele.
 */

html.gg-tema {
    --hud-bg: #0A1D44;
    --hud-bg-2: #12306B;
    --hud-panel: rgba(13, 37, 86, 0.92);
    --hud-panel-solid: #12306B;
    --hud-raise: rgba(43, 91, 199, 0.35);
    --hud-sunk: rgba(5, 16, 40, 0.55);
    --hud-line: rgba(255, 255, 255, 0.12);
    --hud-line-strong: rgba(255, 255, 255, 0.24);
    --hud-text: var(--gg-texto);
    --hud-muted: var(--gg-texto-suave);
    --hud-amber: var(--gg-ouro);
    --hud-blue: var(--gg-azul);
    --hud-red: var(--gg-vermelho);
    --hud-green: var(--gg-verde);
    --hud-sky: #4FC3F7;
    --hud-head: var(--gg-fonte-titulo);
    --hud-body: var(--gg-fonte-texto);
    --hud-mono: var(--gg-fonte-texto);
    --hud-r-sm: 10px;
    --hud-r: 14px;
    --hud-r-lg: 20px;
    --hud-shadow: 0 10px 28px rgba(4, 12, 32, 0.5);
    --font: var(--gg-fonte-texto);
    --gg-oceano: radial-gradient(ellipse at 50% 38%, #4FD3EF 0%, #22A9DE 55%, #1782C4 100%);
}

/* ======================= TABULEIRO (os dois motores) ======================= */
html.gg-tema #game-screen { font-variant-numeric: tabular-nums; }
html.gg-tema #game-screen .map-viewport,
html.gg-tema #game-screen .map-container,
html.gg-tema #game-screen #map-container {
    background: var(--gg-oceano);
}
/* ondinhas desenhadas no mar */
html.gg-tema #map-canvas {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='60'%3E%3Cpath d='M8 20 q6 -6 12 0 t12 0' fill='none' stroke='%23ffffff' stroke-opacity='.28' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M52 46 q6 -6 12 0 t12 0' fill='none' stroke='%23ffffff' stroke-opacity='.2' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* grade tática e oceano do SVG saem: o mar é o fundo do contêiner */
html.gg-tema #map-canvas rect[fill="url(#tactical-grid)"],
html.gg-tema #map-canvas rect[fill="url(#oceanGrad)"] { display: none; }

/* terra: pergaminho SEM contorno — a camada de baixo tem um traço por país, e ele aparecia através
   da cor da região (um território junta vários países; a borda que vale é a do território) */
html.gg-tema #map-canvas .land-base {
    fill: #F1E4BF;
    stroke: #F1E4BF; /* mesma cor do fundo: fecha as frestas de anti-serrilhado entre países vizinhos */
    stroke-width: 1.2px;
    stroke-linejoin: round;
}
/* relevo de peça de tabuleiro: sombra única na camada inteira (barato até no Mundo 168) */
html.gg-tema #map-canvas .territory-blocs-layer,
html.gg-tema #map-canvas .bloc-layer { filter: drop-shadow(0 2.5px 0 rgba(10, 29, 68, 0.45)); }
html.gg-tema #map-canvas .territory-borders {
    stroke: rgba(255, 255, 255, 0.92);
    stroke-width: 1.6px;
}
/* celular: contorno dos países no CSS (o desktop põe inline) */
html.gg-tema #map-canvas .bloc-layer .territory-bloc { stroke: rgba(255, 255, 255, 0.9); stroke-width: 1.3; }
html.gg-tema #map-canvas .bloc-layer .territory-bloc.selected { stroke: #fff; stroke-width: 3; }
html.gg-tema #map-canvas .bloc-layer .territory-bloc.target-candidate { stroke: var(--gg-ouro); stroke-width: 2.6; }
html.gg-tema #map-canvas .bloc-layer .territory-bloc { fill-opacity: 0.82; }

html.gg-tema #map-canvas .map-mode-badge { fill: rgba(255, 255, 255, 0.8); font-family: var(--gg-fonte-titulo); font-weight: 400; letter-spacing: 0.06em; }

/* rótulos de continente e nomes: tinta escura sobre o pergaminho */
html.gg-tema #map-canvas .continent-label { font-family: var(--gg-fonte-titulo); letter-spacing: 0.04em; }
html.gg-tema #map-canvas .terr-name-label {
    font-family: var(--gg-fonte-texto);
    font-weight: 800;
    fill: var(--gg-tinta);
    stroke: rgba(255, 255, 255, 0.85);
    stroke-width: 2.5px;
    paint-order: stroke fill;
}

/* bolha de exércitos: branca, borda na cor do dono (desktop: atributo do motor; celular: tema-partida.js) */
html.gg-tema #map-canvas .army-badge-circle {
    fill: #fff;
    stroke-width: 2.6px;
    filter: drop-shadow(0 1.5px 0 rgba(10, 29, 68, 0.5));
}
html.gg-tema #map-canvas .army-badge-text {
    fill: var(--gg-tinta);
    stroke: none;
    font-family: var(--gg-fonte-titulo);
    font-weight: 400;
}
html.gg-tema #map-canvas .army-badge-glow { fill-opacity: 0.22; }
/* desktop Clássico/Rápido: o motor desenha a bolha com raio 6 (≈4 px na tela); o estilo brinquedo pede
   peça legível. Geometria por CSS (SVG2: r/cx/cy); o Mundo 168 fica com o tamanho do motor (denso). */
html.gg-tema #map-canvas:not(.map-mode-mundo) .army-badge-group .army-badge-circle { r: 9.5px; stroke-width: 2px; }
html.gg-tema #map-canvas:not(.map-mode-mundo) .army-badge-group .badge-hit-area { r: 13px; }
html.gg-tema #map-canvas:not(.map-mode-mundo) .army-badge-group .army-badge-text { font-size: 10px; }
html.gg-tema #map-canvas:not(.map-mode-mundo) .army-badge-group .capital-badge-ring { r: 12.5px; stroke-width: 1.6px; }
html.gg-tema #map-canvas:not(.map-mode-mundo) .army-badge-group .native-ideology-indicator { cx: 7.5px; cy: 6.5px; r: 3px; }
html.gg-tema #map-canvas:not(.map-mode-mundo) .army-badge-group .native-ideology-letter { display: none; }
html.gg-tema #map-canvas.map-mode-mundo .army-badge-circle { stroke-width: 1px; }
html.gg-tema #map-canvas .capital-badge-ring { stroke: var(--gg-ouro); stroke-width: 2.4px; }
/* soldadinho (criado por tema-partida.js) */
html.gg-tema #map-canvas .gg-soldado { pointer-events: none; }
html:not(.gg-tema) #map-canvas .gg-soldado { display: none; }

/* seta de ataque e flash de conquista no tom da marca */
html.gg-tema #map-canvas .attack-arrow-fx line,
html.gg-tema #map-canvas .attack-arrow-fx path { filter: drop-shadow(0 0 4px rgba(255, 201, 60, 0.9)); }

/* ======================= HUD — DESKTOP ======================= */
html.gg-tema #game-screen { background: var(--gg-marinho-escuro); }
html.gg-tema #game-screen .game-dashboard {
    background: linear-gradient(180deg, #1B3F86, #12306B);
    border-bottom: 0;
    box-shadow: 0 4px 0 rgba(5, 16, 40, 0.6);
}
/* barras de rolagem finas e no tom do painel (a padrão do navegador saía branca e grossa na lateral) */
html.gg-tema #game-screen,
html.gg-tema #game-screen * { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.28) transparent; }
html.gg-tema #game-screen .glass-panel,
html.gg-tema #game-screen .sidebar-left,
html.gg-tema #game-screen .sidebar-right {
    background: var(--hud-panel) !important; /* style.css põe .glass-panel com !important */
    border-color: var(--hud-line) !important;
    backdrop-filter: none;
}
html.gg-tema #game-screen .panel-section h3,
html.gg-tema #game-screen .action-card h3,
html.gg-tema #game-screen .hud-subtitle {
    font-family: var(--gg-fonte-titulo);
    font-weight: 400;
    letter-spacing: 0.03em;
    text-transform: none;
    color: var(--gg-ouro);
}
html.gg-tema #game-screen .active-badge { border-radius: 999px; }
html.gg-tema #active-player-name,
html.gg-tema #game-screen .pcard-name { font-family: var(--gg-fonte-titulo); font-weight: 400; letter-spacing: 0.02em; }

/* etapas da vez: pílulas gordinhas com sola */
html.gg-tema #game-screen .phase-step { font-size: 0.86rem; font-weight: 400; padding: 6px 16px; }
html.gg-tema #game-screen .phase-step.active { box-shadow: 0 3px 0 rgba(5, 16, 40, 0.55); }
html.gg-tema #phase-fortify.active { color: #fff; }

/* botões: o "degrau" dos componentes (gg-botao) aplicado aos botões do motor */
html.gg-tema #game-screen .btn,
html.gg-tema #game-screen .btn-primary,
html.gg-tema #game-screen .btn-secondary,
html.gg-tema .modal .btn-primary,
html.gg-tema .modal .btn-secondary,
html.gg-tema .ux-dialog .btn-primary,
html.gg-tema .ux-dialog .btn-secondary,
html.gg-tema #dice-overlay .btn {
    font-family: var(--gg-fonte-titulo);
    font-weight: 400;
    letter-spacing: 0.02em;
    border-radius: 12px;
    transition: transform var(--gg-transicao), box-shadow var(--gg-transicao);
}
html.gg-tema #game-screen .btn-primary,
html.gg-tema .modal .btn-primary,
html.gg-tema .ux-dialog .btn-primary,
html.gg-tema #btn-finish-turn {
    background: var(--gg-verde);
    border-color: var(--gg-verde);
    color: #fff;
    box-shadow: 0 4px 0 var(--gg-verde-escuro), inset 0 2px 0 rgba(255, 255, 255, 0.3);
}
html.gg-tema #game-screen .btn-primary:hover:not(:disabled),
html.gg-tema .modal .btn-primary:hover:not(:disabled),
html.gg-tema .ux-dialog .btn-primary:hover:not(:disabled),
html.gg-tema #btn-finish-turn:hover:not(:disabled) { background: #3AD158; border-color: #3AD158; color: #fff; }
html.gg-tema #game-screen .btn-primary:active:not(:disabled),
html.gg-tema #btn-finish-turn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--gg-verde-escuro); }
html.gg-tema #game-screen .btn-secondary,
html.gg-tema .modal .btn-secondary,
html.gg-tema .ux-dialog .btn-secondary {
    background: var(--gg-creme);
    border-color: var(--gg-creme);
    color: var(--gg-tinta);
    box-shadow: 0 4px 0 var(--gg-creme-escuro);
}
html.gg-tema #game-screen .btn-end-attack {
    background: var(--gg-vermelho);
    border-color: var(--gg-vermelho);
    color: #fff;
    box-shadow: 0 4px 0 var(--gg-vermelho-escuro);
}
html.gg-tema #game-screen .btn-end-attack:hover:not(:disabled) { background: #F04A57; border-color: #F04A57; }
html.gg-tema #game-screen .btn-hud {
    background: rgba(255, 255, 255, 0.1);
    border: 0;
    border-radius: 999px;
    color: var(--gg-texto);
    font-family: var(--gg-fonte-texto);
    font-weight: 800;
}
html.gg-tema #game-screen .btn-hud:hover:not(:disabled) { background: rgba(255, 255, 255, 0.2); }
html.gg-tema #game-screen .dash-right .btn-danger { border-radius: 999px; }

/* cartões e painéis de ação */
html.gg-tema #game-screen .action-card,
html.gg-tema #game-screen .combatant-card,
html.gg-tema #game-screen .maneuver-node { border-radius: var(--hud-r); }
html.gg-tema #game-screen .pcard { border-radius: var(--hud-r); }
html.gg-tema #game-screen .log-entry { font-family: var(--gg-fonte-texto); }

/* modais */
/* (era .ux-dialog, que é o FUNDO da janela: pintava a tela inteira de azul e escondia o mapa) */
html.gg-tema .modal .modal-content,
html.gg-tema .ux-dialog-card {
    background: #12306B;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 6px 0 rgba(5, 16, 40, 0.7), var(--hud-shadow);
    color: var(--gg-texto);
}
html.gg-tema .modal .modal-content h2,
html.gg-tema .modal .modal-content h3,
html.gg-tema .ux-dialog h3 { font-family: var(--gg-fonte-titulo); font-weight: 400; color: var(--gg-ouro); letter-spacing: 0.02em; }

/* ficha do território ao passar o mouse (desktop: estilo inline no game.html e textos claros
   inline no game.js): fundo azul-marinho, largura contida, letra legível */
html.gg-tema #map-tooltip {
    background: rgba(10, 29, 68, 0.97) !important;
    color: #fff !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left-width: 5px !important;
    border-radius: 14px !important;
    padding: 12px 16px !important;
    width: max-content !important;
    max-width: 300px !important;
    white-space: normal !important;
    line-height: 1.45 !important;
    box-shadow: 0 5px 0 rgba(5, 16, 40, 0.6), 0 10px 24px rgba(4, 12, 32, 0.45) !important;
    backdrop-filter: none !important;
    font-family: var(--gg-fonte-texto) !important;
}
html.gg-tema #map-tooltip * { font-family: inherit !important; }
html.gg-tema #map-tooltip > div { font-size: 0.86rem !important; margin-bottom: 3px !important; color: #D6E2FF !important; }
html.gg-tema #map-tooltip > div:first-child { font-family: var(--gg-fonte-titulo) !important; font-size: 1.1rem !important; font-weight: 400 !important; }

/* ======================= DADOS ======================= */
html.gg-tema .dice-overlay .dice-container {
    background: rgba(18, 48, 107, 0.96) !important; /* match-ux deixa o painel translúcido no modo compacto */
    border: 0;
    border-radius: 24px;
    box-shadow: 0 8px 0 rgba(5, 16, 40, 0.7), var(--hud-shadow);
}
/* 3 + 3 dados de 46px não cabiam nos 340px do style.css: os do defensor saíam pela direita da tela */
@media (min-width: 761px) {
    html.gg-tema .dice-overlay .dice-container { width: 400px; max-width: calc(100vw - 50px); }
    html.gg-tema .dice-overlay .dice-group { gap: 8px; }
}
html.gg-tema .dice-overlay .battle-header,
html.gg-tema .dice-overlay .battle-header * { font-family: var(--gg-fonte-titulo); font-weight: 400; }
html.gg-tema .dice-overlay .die,
html.gg-tema #ux-dice .die,
html.gg-tema .ux-dice .die {
    font-family: var(--gg-fonte-titulo);
    font-weight: 400;
    border-radius: 22%;
    border: 0;
}
html.gg-tema .dice-group.attacker .die,
html.gg-tema .ux-dice .attacker .die {
    background: var(--gg-vermelho);
    color: #fff;
    box-shadow: 0 5px 0 var(--gg-vermelho-escuro), inset 0 3px 0 rgba(255, 255, 255, 0.25);
}
html.gg-tema .dice-group.defender .die,
html.gg-tema .ux-dice .defender .die {
    background: #fff;
    color: var(--gg-tinta);
    box-shadow: 0 5px 0 #C8CDD9, inset 0 3px 0 rgba(255, 255, 255, 0.6);
}
html.gg-tema #dice-result-log { font-family: var(--gg-fonte-texto); font-weight: 800; }

/* resumo "Último combate" (match-ux / mobile-ux): dadinhos brancos, vencedor em verde, perdedor apagado */
html.gg-tema .last-combat {
    background: rgba(13, 37, 86, 0.94);
    border: 0;
    border-radius: 16px;
    box-shadow: 0 4px 0 rgba(5, 16, 40, 0.6);
}
/* no desktop a barra do mapa (zoom, modo, Nomes) ocupa a largura toda: o resumo desce para não cobri-la */
@media (min-width: 761px) { html.gg-tema #game-screen .map-viewport > .last-combat { top: 58px; } }
html.gg-tema .dice-overlay .battle-header { gap: 0.4em; flex-wrap: wrap; justify-content: center; }
/* cartões Ataque × Defesa: a linha do país vinha com o nome em inglês do mapa-base ("United States of
   America"), sem tradução; o nome do território já está no título do cartão */
html.gg-tema .hud-side-details > div:has(> .val-country) { display: none; }
html.gg-tema .hud-side-details .val-owner { overflow-wrap: anywhere; }
html.gg-tema .last-combat .lc-title { font-family: var(--gg-fonte-titulo); letter-spacing: 0.06em; color: var(--gg-ouro); }
html.gg-tema .last-combat .lc-who,
html.gg-tema .last-combat .lc-summary,
html.gg-tema .last-combat .lc-loss { font-family: var(--gg-fonte-titulo); font-weight: 400; }
html.gg-tema .last-combat .lc-die {
    background: #fff;
    color: var(--gg-tinta);
    border: 0;
    border-radius: 6px;
    font-family: var(--gg-fonte-titulo);
    font-weight: 400;
    box-shadow: 0 2px 0 #C8CDD9;
}
html.gg-tema .last-combat .lc-die.win { background: var(--gg-verde); color: #fff; box-shadow: 0 2px 0 var(--gg-verde-escuro); }
html.gg-tema .last-combat .lc-die.lose { background: rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.75); box-shadow: none; }
html.gg-tema .last-combat .lc-loss.hit { color: #FF7A85; }

/* ======================= HUD — CELULAR ======================= */
html.gg-tema #game-screen #hud-bottom-bar {
    background: linear-gradient(0deg, #0A1D44, #12306B);
    border-top: 0;
    box-shadow: 0 -4px 0 rgba(5, 16, 40, 0.5);
}
html.gg-tema #game-screen .hud-btn { border-radius: 999px; }
html.gg-tema #game-screen .btn-action {
    font-family: var(--gg-fonte-titulo);
    font-weight: 400;
    border-radius: 14px;
    box-shadow: 0 4px 0 rgba(5, 16, 40, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.3);
}
html.gg-tema #game-screen .btn-pass {
    font-family: var(--gg-fonte-titulo);
    font-weight: 400;
    border-radius: 14px;
    background: var(--gg-creme);
    color: var(--gg-tinta);
    box-shadow: 0 4px 0 var(--gg-creme-escuro);
}
html.gg-tema #game-screen .hud-player-chip { border-radius: 999px; }
html.gg-tema #game-screen .phase-dot { font-family: var(--gg-fonte-titulo); font-weight: 400; }

@media (prefers-reduced-motion: reduce) {
    html.gg-tema #game-screen .btn-primary:active:not(:disabled) { transform: none; }
}

/* ======================= ACABAMENTO (31/out/2026) ======================= */
/* cartas de território: cartão creme com sola, escolhida em ouro */
html.gg-tema #cards-panel { border-radius: var(--hud-r-lg); }
html.gg-tema #cards-panel .panel-header h4 { font-family: var(--gg-fonte-titulo); font-weight: 400; color: var(--gg-ouro); letter-spacing: 0.02em; }
html.gg-tema #game-screen .card-item,
html.gg-tema #discard-modal .card-item {
    background: var(--gg-creme);
    color: var(--gg-tinta);
    border: 0;
    border-radius: 14px;
    box-shadow: 0 4px 0 var(--gg-creme-escuro);
    transition: transform var(--gg-transicao), box-shadow var(--gg-transicao);
}
html.gg-tema #game-screen .card-item:hover,
html.gg-tema #discard-modal .card-item:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--gg-creme-escuro); }
html.gg-tema #game-screen .card-item.selected,
html.gg-tema #discard-modal .card-item.selected { background: #FFE9A8; outline: 3px solid var(--gg-ouro); box-shadow: 0 4px 0 var(--gg-ouro-escuro); }
html.gg-tema #game-screen .card-item .symbol,
html.gg-tema #discard-modal .card-item .symbol { text-shadow: none; filter: none; background: #fff; border-radius: 50%; box-shadow: inset 0 -3px 0 rgba(10, 29, 68, 0.12); }
html.gg-tema #game-screen .card-item .cname,
html.gg-tema #discard-modal .card-item .cname { font-family: var(--gg-fonte-titulo); font-weight: 400; color: var(--gg-marinho); letter-spacing: 0.01em; }
html.gg-tema #game-screen .card-item .ctype,
html.gg-tema #discard-modal .card-item .ctype { color: #5A6385; font-weight: 800; }
html.gg-tema .card-figures-rule { border-radius: var(--hud-r); }
html.gg-tema .card-figures-rule .cfr-title { font-family: var(--gg-fonte-titulo); font-weight: 400; color: var(--gg-ouro); }

/* seletor de tropas: número grande, botões gordinhos */
html.gg-tema .troop-picker { border: 0; border-radius: 20px; box-shadow: 0 6px 0 rgba(5, 16, 40, 0.7), var(--hud-shadow); }
html.gg-tema .troop-picker .tp-title { font-family: var(--gg-fonte-titulo); font-weight: 400; font-size: 1.1rem; }
html.gg-tema .troop-picker .tp-value { font-family: var(--gg-fonte-titulo); font-weight: 400; }
html.gg-tema .troop-picker .tp-btn {
    font-family: var(--gg-fonte-titulo);
    font-weight: 400;
    border: 0;
    border-radius: 14px;
    background: var(--gg-creme);
    color: var(--gg-tinta);
    box-shadow: 0 4px 0 var(--gg-creme-escuro);
}
html.gg-tema .troop-picker .tp-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gg-creme-escuro); }
html.gg-tema .troop-picker .tp-extra { background: var(--gg-ouro); color: var(--gg-tinta); box-shadow: 0 4px 0 var(--gg-ouro-escuro); }

/* relatório de guerra: letras e cantos do design novo (as cores já vêm das --hud-*) */
html.gg-tema #war-report .wr-panel { border-radius: 22px; border: 0; box-shadow: 0 8px 0 rgba(5, 16, 40, 0.7), var(--hud-shadow); }
html.gg-tema #war-report .wr-title { font-family: var(--gg-fonte-titulo); text-transform: none; letter-spacing: 0.02em; text-shadow: none; }
html.gg-tema #war-report .wr-kicker { font-family: var(--gg-fonte-titulo); letter-spacing: 0.06em; color: var(--gg-ouro); }

/* fim de partida e relatório final (relatorio-fim.css usa cores fixas) */
html.gg-tema #game-over-modal .modal-content { text-align: center; }
html.gg-tema #game-over-title,
html.gg-tema #go-title { font-family: var(--gg-fonte-titulo); font-weight: 400; letter-spacing: 0.03em; text-shadow: 0 3px 0 rgba(5, 16, 40, 0.6); animation: none; }
html.gg-tema #game-over-stats .rf-bloco { background: rgba(5, 16, 40, 0.45); border: 0; border-radius: 16px; }
html.gg-tema #game-over-stats .rf-eu { background: rgba(43, 91, 199, 0.35); box-shadow: inset 0 0 0 2px var(--gg-ouro); }
html.gg-tema .rf-tit { font-family: var(--gg-fonte-titulo); font-weight: 400; letter-spacing: 0.05em; color: var(--gg-ouro); text-transform: none; font-size: 1rem; }
html.gg-tema .rf-cartao { background: var(--gg-creme); border-radius: 12px; box-shadow: 0 3px 0 var(--gg-creme-escuro); }
html.gg-tema .rf-cartao span { color: #5A6385; font-weight: 700; }
html.gg-tema .rf-cartao b { font-family: var(--gg-fonte-titulo); font-weight: 400; color: var(--gg-marinho); font-size: 1.25rem; }
/* o General no fim da partida (tema-partida.js) */
html.gg-tema .gg-fim { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin: -4px 0 8px; }
html.gg-tema .gg-fim img { height: 170px; width: auto; filter: drop-shadow(0 8px 12px rgba(4, 12, 32, 0.5)); }
html.gg-tema .gg-fim .gg-balao { margin-bottom: 70px; text-align: left; font-size: 0.95rem; }
html.gg-tema .gg-fim .gg-balao::after { left: -0.6em; bottom: 1.2em; border: 0.7em solid transparent; border-right-color: #fff; border-left: 0; }
@media (max-height: 520px) {
    html.gg-tema .gg-fim img { height: 110px; }
    html.gg-tema .gg-fim .gg-balao { margin-bottom: 40px; font-size: 0.82rem; padding: 0.6em 0.8em; }
}
html.gg-tema #game-over-modal .modal-content,
html.gg-tema #gameover-modal .modal-content { background: #12306B !important; border: 0 !important; border-radius: 22px !important; box-shadow: 0 8px 0 rgba(5, 16, 40, 0.7), var(--hud-shadow) !important; }

/* Fase 4 (31/out/2026): com retrato de personagem, o emblema da facção e a bolinha saem (o anel do
   retrato já tem a cor das peças; a facção aparece escrita) — sobra espaço para o nome */
html.gg-tema .pcard-top .avx-slot.av-on ~ .faccao-bandeira,
html.gg-tema .pcard-top .avx-slot.av-on ~ .pcard-dot,
html.gg-tema #active-player-avatar .avx-slot.av-on ~ .faccao-bandeira { display: none; }
html.gg-tema .pcard-top .avx-slot { --av-t: 30px !important; width: 30px; height: 30px; }

/* Celular (31/out/2026): retrato no lugar da bolinha e do emblema (tema-partida.js retratosNoCelular) */
html.gg-tema .hud-player-chip.gg-com-retrato .chip-dot,
html.gg-tema .hud-player-chip.gg-com-retrato .faccao-bandeira { display: none; }
html.gg-tema .hud-player-chip .avx-slot { width: 18px; height: 18px; margin-right: 2px; }
html.gg-tema #hud-player-avatar.gg-com-retrato { background: transparent !important; overflow: visible; }
html.gg-tema #hud-player-avatar .avx-slot { width: 26px; height: 26px; }

/* Editor de cor e facção (js/editor-faccao.js, sala de espera e partida — "Preparar para a batalha",
   31/out/2026): azul com sola, Lilita One, seleção em ouro; as cores viram bolinhas grandes */
html.gg-tema .fe-overlay { background: rgba(5, 16, 40, 0.82); backdrop-filter: none; }
html.gg-tema .fe-box { background: #12306B; border: 0; border-radius: 22px; box-shadow: 0 8px 0 rgba(5, 16, 40, 0.7), 0 20px 40px rgba(4, 12, 32, 0.5); color: var(--gg-texto); }
html.gg-tema .fe-head h2,
html.gg-tema .fe-sec h3,
html.gg-tema .fe-tab strong,
html.gg-tema .fe-base strong,
html.gg-tema .fe-perk strong,
html.gg-tema .fe-name { font-family: var(--gg-fonte-titulo); font-weight: 400; letter-spacing: 0.02em; text-transform: none; text-shadow: none; }
html.gg-tema .fe-head h2 { font-size: 1.5rem; color: #fff; }
html.gg-tema .fe-sec h3 { font-size: 1.05rem; color: var(--gg-ouro); }
html.gg-tema .fe-step { background: var(--gg-ouro); color: var(--gg-tinta); font-family: var(--gg-fonte-titulo); }
html.gg-tema .fe-tab strong,
html.gg-tema .fe-base strong,
html.gg-tema .fe-perk strong { font-size: 1rem; }
html.gg-tema .fe-tab,
html.gg-tema .fe-base,
html.gg-tema .fe-perk { border: 0; border-radius: 14px; background: rgba(5, 16, 40, 0.45); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1); }
html.gg-tema .fe-tab.sel,
html.gg-tema .fe-base.sel,
html.gg-tema .fe-perk.sel { background: rgba(255, 201, 60, 0.16); box-shadow: inset 0 0 0 3px var(--gg-ouro); }
html.gg-tema .fe-base small,
html.gg-tema .fe-tab small,
html.gg-tema .fe-perk small,
html.gg-tema .fe-note { color: #D6E2FF; }
html.gg-tema .fe-btn { font-family: var(--gg-fonte-titulo); font-weight: 400; border: 0; border-radius: 14px; background: rgba(255, 255, 255, 0.14); color: #fff; box-shadow: 0 4px 0 rgba(5, 16, 40, 0.55); }
html.gg-tema .fe-btn:hover { background: rgba(255, 255, 255, 0.22); }
html.gg-tema .fe-btn.primary { background: var(--gg-verde); color: #fff; text-transform: none; letter-spacing: 0.02em; font-size: 1rem; box-shadow: 0 4px 0 var(--gg-verde-escuro), inset 0 2px 0 rgba(255, 255, 255, 0.3); }
html.gg-tema .fe-row select,
html.gg-tema .fe-row input { background: #fff; color: var(--gg-tinta); border: 0; border-radius: 12px; font-weight: 700; }
html.gg-tema .fe-color { width: 44px; height: 44px; border: 3px solid rgba(255, 255, 255, 0.25); box-shadow: 0 3px 0 rgba(5, 16, 40, 0.5); }
html.gg-tema .fe-color.sel { border-color: #fff; box-shadow: 0 0 0 4px var(--gg-ouro), 0 3px 0 rgba(5, 16, 40, 0.5); }
html.gg-tema .fe-color-auto { height: 44px; border-radius: 22px; font-family: var(--gg-fonte-titulo); }
html.gg-tema .fe-sum { background: rgba(5, 16, 40, 0.45); border-radius: 14px; }

/* ======================= REVISÃO TELA A TELA (31/out/2026) ======================= */
/* aviso do topo ("Ataque: toque num território…") passava por cima do título da dica aberta */
html.gg-tema body:has(.ux-dialog:not([hidden])) #hud-notices { visibility: hidden; }
/* no celular (só ele tem #rotate-prompt) as janelas .modal abrem/fecham pelo atributo hidden: registro,
   cartas, dicas — o aviso cobria o título e o botão de fechar */
html.gg-tema body:has(#rotate-prompt):has(.modal:not([hidden])) #hud-notices { visibility: hidden; }
/* total de tropas da distribuição: azul sobre marinho quase não aparecia */
html.gg-tema #game-screen div.draft-income-total { color: var(--gg-ouro); }
/* Blitz no celular: o mobile-hud.css (#game-screen .tp-extra) vencia o botão amarelo do desktop */
html.gg-tema #game-screen .tp-extra { background: var(--gg-ouro); color: var(--gg-tinta); border: 0; box-shadow: 0 4px 0 var(--gg-ouro-escuro); font-family: var(--gg-fonte-titulo); }
html.gg-tema #game-screen .tp-extra:active { background: var(--gg-ouro-escuro); }
/* cartas no celular: as classes são .card-territory / .card-type (no desktop, .cname / .ctype); o nome
   saía branco (--hud-text) sobre o creme da carta */
html.gg-tema #game-screen .card-item .card-territory { font-family: var(--gg-fonte-titulo); font-weight: 400; color: var(--gg-marinho); }
html.gg-tema #game-screen .card-item .card-type { color: #5A6385; font-weight: 800; }
/* desktop: com uma janela aberta (.modal.active ou dica), os avisos descem para o rodapé em vez de
   cobrir o título (ex.: "VITÓRIA GLOBAL" coberto por "Não foi possível registrar…") */
html.gg-tema body:not(:has(#rotate-prompt)):has(.modal.active) #hud-notices { top: auto; bottom: 20px; }
/* fim de partida no desktop: 480px apertavam a classificação final (tabela com rolagem lateral) */
@media (min-width: 761px) {
    html.gg-tema #game-over-modal .modal-content { width: min(640px, 94vw); max-width: min(640px, 94vw); }
}

/* Chat da partida (desktop, #floating-chat-window): os fundos são estilo inline no game.html
   (rgba(5,10,25)…, borda roxa), por isso o !important; marinho do tema, campo branco como no portal */
html.gg-tema #floating-chat-window { background: var(--hud-panel-solid) !important; border: 0 !important; border-radius: 18px; overflow: hidden; box-shadow: 0 6px 0 rgba(5, 16, 40, 0.7), var(--hud-shadow) !important; }
html.gg-tema #floating-chat-window .floating-header { background: linear-gradient(180deg, #1B3F86, #12306B) !important; border-bottom: 0 !important; }
html.gg-tema #floating-chat-window .floating-header span { font-family: var(--gg-fonte-titulo) !important; color: var(--gg-ouro) !important; text-shadow: none !important; }
html.gg-tema #floating-chat-window .chat-messages-container { background: rgba(5, 16, 40, 0.45) !important; }
html.gg-tema #floating-chat-window .chat-quick-row,
html.gg-tema #floating-chat-window .chat-input-row,
html.gg-tema #floating-chat-window .emoji-tray { background: rgba(13, 37, 86, 0.98) !important; border-color: var(--hud-line) !important; }
html.gg-tema #floating-chat-window .chat-players-col { background: rgba(5, 16, 40, 0.3) !important; border-color: var(--hud-line) !important; }
html.gg-tema #floating-chat-window #game-chat-input { background: #fff !important; color: var(--gg-tinta) !important; border: 0 !important; border-radius: 12px !important; font-weight: 700; }
html.gg-tema #floating-chat-window #game-chat-input::placeholder { color: #7A829E; }
html.gg-tema #floating-chat-window #btn-send-game-chat { background: var(--gg-verde) !important; color: #fff !important; box-shadow: 0 4px 0 var(--gg-verde-escuro, #1E8A33) !important; }
/* lista "Alvos vizinhos" (desktop): os itens têm estilo inline quase preto no game.js; o marcado ganha .on */
html.gg-tema #attack-targets-list .attack-target-item { background: rgba(5, 16, 40, 0.45) !important; border-top-color: var(--hud-line) !important; border-right-color: var(--hud-line) !important; border-bottom-color: var(--hud-line) !important; }
html.gg-tema #attack-targets-list .attack-target-item:hover { background: rgba(43, 91, 199, 0.35) !important; }
html.gg-tema #attack-targets-list .attack-target-item.on { background: rgba(230, 57, 70, 0.28) !important; border-color: var(--gg-vermelho) !important; }