/*
 * Tema do portal — Sala de Guerra no estilo do design novo (fase 5, 31/out/2026).
 * Salas, configurador, sala de espera, Painel do comandante, ranking, saguão, correio e chat
 * (public/comando/*). Carregado por game.html; o comando.css é injetado DEPOIS pelo comando.js,
 * por isso tudo aqui vai sob `html.gg-tema` (mais específico que :root / .cw-*), sem !important.
 * Só aparência. Paleta e letras: tokens.css.
 */

html.gg-tema {
    --cw-bg: #0A1D44;
    --cw-bg-2: #12306B;
    --cw-panel: rgba(18, 48, 107, 0.92);
    --cw-panel-solid: #12306B;
    --cw-line: rgba(255, 255, 255, 0.12);
    --cw-line-strong: rgba(255, 255, 255, 0.24);
    --cw-amber: var(--gg-ouro);
    --cw-blue: var(--gg-azul);
    --cw-red: var(--gg-vermelho);
    --cw-green: var(--gg-verde);
    --cw-silver: var(--gg-texto-suave);
    --cw-text: var(--gg-texto);
    --cw-muted: var(--gg-texto-suave);
    --cw-mono: var(--gg-fonte-texto);
    --cw-head: var(--gg-fonte-titulo);
    --cw-body: var(--gg-fonte-texto);
    --cw-radius: 16px;
}

/* fundo: céu azul-marinho com o mar de ondinhas (sem a grade tática e as curvas de nível) */
html.gg-tema #comando-root {
    background-color: var(--gg-marinho-escuro);
    background-image:
        radial-gradient(ellipse at 75% -10%, rgba(79, 211, 239, 0.22), transparent 55%),
        radial-gradient(ellipse at 10% 110%, rgba(255, 201, 60, 0.12), transparent 50%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Cpath d='M10 26 q8 -8 16 0 t16 0' fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M70 62 q8 -8 16 0 t16 0' fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: auto, auto, 120px 80px;
}
html.gg-tema #comando-root::before { display: none; }

/* títulos em Lilita One */
html.gg-tema #comando-root h1,
html.gg-tema #comando-root h2,
html.gg-tema #comando-root h3,
html.gg-tema #comando-root h4 {
    font-family: var(--gg-fonte-titulo);
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
}

/* painéis: azul com "sola" em vez de vidro com borda */
html.gg-tema #comando-root .cw-panel {
    border: 0;
    border-radius: 20px;
    backdrop-filter: none;
    box-shadow: 0 6px 0 rgba(5, 16, 40, 0.6), 0 14px 30px rgba(4, 12, 32, 0.35);
}
html.gg-tema #comando-root .cw-panel-head { border-bottom-color: rgba(255, 255, 255, 0.1); }

/* botões: gordinhos, com degrau; primário = verde do JOGAR */
html.gg-tema #comando-root .cw-btn {
    font-family: var(--gg-fonte-titulo);
    font-weight: 400;
    letter-spacing: 0.02em;
    border: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--gg-texto);
    box-shadow: 0 4px 0 rgba(5, 16, 40, 0.55);
}
html.gg-tema #comando-root .cw-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.2); }
html.gg-tema #comando-root .cw-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 rgba(5, 16, 40, 0.55); }
html.gg-tema #comando-root .cw-btn.primary { background: 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 #comando-root .cw-btn.primary:hover:not(:disabled) { background: #3AD158; }
html.gg-tema #comando-root .cw-btn.primary:active:not(:disabled) { box-shadow: 0 1px 0 var(--gg-verde-escuro); }
html.gg-tema #comando-root .cw-btn.blue { background: var(--gg-azul); color: #fff; box-shadow: 0 4px 0 #183C80; }
html.gg-tema #comando-root .cw-btn.ouro { background: var(--gg-ouro); color: var(--gg-tinta); box-shadow: 0 4px 0 var(--gg-ouro-escuro); }
html.gg-tema #comando-root .cw-btn.ouro:hover:not(:disabled) { background: #FFD45C; color: var(--gg-tinta); }
html.gg-tema #comando-root .cw-btn.danger { background: var(--gg-vermelho); color: #fff; box-shadow: 0 4px 0 var(--gg-vermelho-escuro); }
html.gg-tema #comando-root .cw-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* campos de formulário: brancos e redondos (input sem type = texto: o Assunto do Correio saía escuro) */
html.gg-tema #comando-root input:not([type]),
html.gg-tema #comando-root input[type="text"],
html.gg-tema #comando-root input[type="password"],
html.gg-tema #comando-root input[type="date"],
html.gg-tema #comando-root input[type="tel"],
html.gg-tema #comando-root input[type="url"],
html.gg-tema #comando-root input[type="search"],
html.gg-tema #comando-root input[type="email"],
html.gg-tema #comando-root input[type="number"],
html.gg-tema #comando-root select,
html.gg-tema #comando-root textarea {
    background: #fff;
    color: var(--gg-tinta);
    border: 0;
    border-radius: 12px;
    font-family: var(--gg-fonte-texto);
    font-weight: 700;
}
html.gg-tema #comando-root input::placeholder,
html.gg-tema #comando-root textarea::placeholder { color: #7A829E; }

/* modais do portal e do QG de conta */
html.gg-tema .cw-modal,
html.gg-tema #comando-root [role="dialog"] { border-radius: 20px; }

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

/* Sala de espera = "Preparar para a batalha" (31/out/2026): assento como cartão com retrato grande,
   faixa na cor das peças e facção escrita (sala-guerra.js retratoSlot) */
html.gg-tema #comando-root .cw-slot {
    border: 0;
    border-radius: 18px;
    background: rgba(5, 16, 40, 0.45);
    box-shadow: inset 0 0 0 2px var(--slot, rgba(255, 255, 255, 0.15));
}
html.gg-tema #comando-root .cw-slot::before { display: none; }
html.gg-tema #comando-root .cw-slot.me { background: rgba(43, 91, 199, 0.4); box-shadow: inset 0 0 0 3px var(--gg-ouro); }
html.gg-tema #comando-root .cw-slot.empty { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18); }
html.gg-tema #comando-root .cw-slot-top { padding-left: 0; gap: 10px; }
html.gg-tema #comando-root .cw-slot-top .avx-slot { width: 40px; height: 40px; }
html.gg-tema #comando-root .cw-slot-top .avx-slot.av-on ~ .cw-slot-name { font-size: 1.05rem; }
html.gg-tema #comando-root .cw-slot-color { width: 12px; height: 28px; border-radius: 6px; box-shadow: none; }
html.gg-tema #comando-root .cw-slot-name { font-family: var(--gg-fonte-titulo); font-weight: 400; letter-spacing: 0.02em; }
html.gg-tema #comando-root .cw-slot-fac,
html.gg-tema #comando-root .cw-slot-meta { padding-left: 0; }
html.gg-tema #comando-root .cw-slot-fac b { color: var(--gg-ouro); font-weight: 800; }

/* sala de espera: personagem no lugar do emblema da facção (sala-guerra.js cartaoSlot) */
html.gg-tema .cw-slot > .cw-slot-retrato { grid-column: 1; grid-row: 1 / span 4; margin-top: 2px; line-height: 0; }
html.gg-tema .cw-slot > .cw-slot-retrato .avx-slot { --av-t: 52px; }
html.gg-tema .cw-slot > .cw-slot-retrato .av-retrato,
html.gg-tema .cw-slot > .cw-slot-retrato .av-face > * { border-radius: 50%; box-shadow: 0 0 0 3px var(--slot), 0 4px 0 rgba(5, 16, 40, 0.5); }

/* cabeçalho: azul do tema, não o preto do console */
html.gg-tema #comando-root .cw-top { background: rgba(10, 29, 68, 0.92); border-bottom: 0; box-shadow: 0 4px 0 rgba(5, 16, 40, 0.45); }

/* mapas desenhados em canvas (teatro-vivo.js: prévia do configurador e cartões de modelo) */
html.gg-tema { --cw-mar: #1B4A9E; --cw-fronteira: rgba(10, 29, 68, 0.75); }

/* marca no cabeçalho numa linha só; em telas médias o subtítulo sai para caber o passo a passo */
html.gg-tema #comando-root .cw-brand { white-space: nowrap; flex: none; }
@media (max-width: 1180px) { html.gg-tema #comando-root .cw-brand small { display: none; } }
/* assento: em cartão estreito, o selo de estado desce para baixo do nome em vez de cortá-lo */
html.gg-tema .cw-slot-top { flex-wrap: wrap; row-gap: 4px; }
html.gg-tema .cw-slot-top .cw-slot-name { min-width: 6em; flex: 1 1 6em; }
/* barra fixa "Sair da sala / Iniciar contagem" fica por cima dos retratos ao rolar */
html.gg-tema #comando-root .cw-launchbar { z-index: 5; }

/* Radar de salas do Saguão (teatro-vivo em modo-salas): mapa no estilo do tabuleiro — mar azul,
   terra de pergaminho, pinos com borda branca (antes: continentes quase pretos sobre marinho) */
html.gg-tema #comando-root .cw-salas-radar-mapa {
    background: radial-gradient(ellipse at 50% 40%, #4FD3EF 0%, #22A9DE 55%, #1782C4 100%);
    border-radius: 14px;
    overflow: hidden;
}
html.gg-tema #comando-root .cw-teatro.modo-salas .t-base { fill: #F1E4BF; stroke: rgba(10, 29, 68, 0.18); }
html.gg-tema #comando-root .cw-teatro.modo-salas .t-bloco { fill: #F1E4BF; fill-opacity: 1; stroke: rgba(10, 29, 68, 0.3); } /* modo salas é neutro: cor fixa #24365a no JS */
html.gg-tema #comando-root .cw-teatro.modo-salas .t-front { stroke: rgba(255, 255, 255, 0.85); }
html.gg-tema #comando-root .cw-teatro.modo-salas .t-pino .nucleo { stroke: #fff; stroke-width: 1.6; }
/* barras de rolagem finas e no tom do painel (a padrão saía branca e grossa ao lado do radar) */
html.gg-tema #comando-root,
html.gg-tema #comando-root * { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.28) transparent; }
/* trilha de etapas no topo: com o selo do Saguão/Correio ela quebrava em duas linhas até ~1300px;
   abaixo disso as etapas que não são a atual mostram só o número */
html.gg-tema #comando-root .cw-crumbs { flex-wrap: nowrap; white-space: nowrap; }
@media (max-width: 1320px) {
    html.gg-tema #comando-root .cw-crumbs span:not(.on) { font-size: 0; gap: 0; padding-inline: 3px; }
    html.gg-tema #comando-root .cw-crumbs span:not(.on) i { font-size: 0.6rem; }
}