/* =====================================================================================
 * avatar.css — Avatar do comandante (comando/avatar-ui.js + js/avatar.js), 27/out/2026.
 * Carregado pelo game.html (Sala de Guerra e partida).
 * ===================================================================================== */

/* Elemento vestido: o retrato cobre as iniciais; ponto de online e escudo ficam por cima */
.av-on { color: transparent !important; text-shadow: none !important; }
.av-on > .av-face { position: absolute; inset: 0; z-index: 1; border-radius: 50%; overflow: hidden; display: block; }
.av-on > :not(.av-face) { z-index: 2; }
.av-face > svg, .av-face .av-retrato { width: 100% !important; height: 100% !important; display: block; }
/* Retrato pintado: fundo (código) · retrato (webp transparente) · moldura (código) */
.av-retrato { position: relative; display: block; border-radius: 50%; overflow: hidden; }
.av-retrato > img, .av-retrato > .av-r-camada { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.av-retrato > img { object-fit: cover; }
.av-esc { position: absolute; right: -14%; bottom: -16%; line-height: 0; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)); }
.av-esc svg { display: block; }

/* Lugares sem iniciais hoje (partida): só aparecem quando há avatar */
[data-av-so]:not(.av-on) { display: none !important; }
.avx-slot { position: relative; display: inline-block; flex: none; width: var(--av-t, 26px); height: var(--av-t, 26px); vertical-align: middle; }

/* Avatar montado direto (Painel, editor) */
.avx { position: relative; display: inline-block; flex: none; width: var(--av-t, 40px); height: var(--av-t, 40px); }
.avx > .av-face { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }

/* Partida: painel Jogadores, chip do topo e chat — o avatar toma o lugar da bolinha */
.pcard-top .avx-slot.av-on + .pcard-dot { display: none; }
.pcard-top .avx-slot { margin-right: 2px; }
#active-player-indicator .player-color-dot:has(+ .av-chip-slot .av-on) { display: none; }
.av-chip-slot { display: inline-flex; }
.chat-msg-entry .sender .avx-slot { margin-right: 6px; vertical-align: -6px; }

/* Sala de Guerra: cadeira humana com avatar troca a bolinha de cor pelo retrato */
.cw-slot-top .avx-slot.av-on { margin-right: 2px; }
.cw-slot-top .cw-slot-color:has(+ .avx-slot.av-on) { display: none; }
.cw-correio-item .l1 .avx-slot { margin-right: 2px; }

/* Painel do comandante */
.cw-pc-avatar { position: relative; display: grid; justify-items: center; gap: 8px; }
.cw-pc-avatar .avx .av-esc { right: -6%; bottom: -8%; }
.cw-pc-avatar .cw-btn { white-space: nowrap; }

/* Pódio do Hall da Fama: com avatar, o hexágono das iniciais dá lugar ao retrato redondo no anel da patente */
.cw-podio-avatar.av-on { clip-path: none; background: none; }
.cw-podio-avatar.av-on > .av-face, .cw-podio-avatar.av-on > .av-esc { width: auto; height: auto; clip-path: none; background: none; display: block; }
.cw-podio-avatar.av-on > span:not(.av-face):not(.av-esc) { visibility: hidden; }
.cw-podio-avatar.av-on > .av-face { box-shadow: 0 0 0 3px var(--pat, #94a3b8), 0 0 18px -4px var(--pat, #94a3b8); }

/* Ponto de online (aliados ::after, saguão .sg-dot): com escudo embaixo, sobe para o canto de cima */
.cw-soc-av.av-on::after { z-index: 3; }
.cw-soc-av.av-on:has(> .av-esc)::after, .sg-av.av-on:has(> .av-esc) > .sg-dot { top: -2px; bottom: auto; right: -2px; z-index: 3; }

/* ------------------------------------------------------------------ editor */
.av-editor { position: fixed; inset: 0; z-index: 9000; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: rgba(4, 7, 12, 0.78); backdrop-filter: blur(6px); }
.av-ed-caixa { width: min(980px, 100%); max-height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #0e1520; border: 1px solid #253247; border-radius: 16px; box-shadow: 0 30px 80px -30px #000; color: #dfe6f1; overflow: hidden; }
.av-ed-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #1d2838; }
.av-ed-kicker { font: 700 0.7rem var(--cw-mono, ui-monospace, monospace); letter-spacing: 0.2em; text-transform: uppercase; color: var(--cw-amber, #ffb020); }
.av-ed-cab h2 { margin: 2px 0 0; font: 700 1.3rem var(--cw-display, "Orbitron", sans-serif); }
.av-ed-x { background: none; border: 1px solid #2a3850; color: #cbd5e1; border-radius: 8px; width: 34px; height: 34px; font-size: 1.3rem; cursor: pointer; }
.av-ed-corpo { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 0; }
.av-ed-prev { display: grid; justify-items: center; align-content: start; gap: 12px; padding: 22px 16px; border-right: 1px solid #1d2838; text-align: center; }
.av-ed-prev p { margin: 0; font-size: 0.9rem; }
.av-ed-prev small, .av-ed-nota { color: #8c9ab0; font-size: 0.78rem; }
.av-ed-qg { color: var(--cw-amber, #ffb020); }
.av-ed-camadas { overflow-y: auto; padding: 14px 18px 18px; display: grid; gap: 14px; align-content: start; }
.av-ed-camada { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.av-ed-camada legend { font: 700 0.72rem var(--cw-mono, ui-monospace, monospace); letter-spacing: 0.16em; text-transform: uppercase; color: #8c9ab0; padding: 0; margin-bottom: 8px; }
.av-ed-ops { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.av-op { display: grid; justify-items: center; gap: 4px; padding: 8px 4px 6px; background: #0b111a; border: 1px solid #1f2b3d; border-radius: 10px; color: #cbd5e1; font: 600 0.72rem var(--cw-sans, system-ui, sans-serif); cursor: pointer; }
.av-op:hover { border-color: #3a4d6b; }
.av-op:focus-visible { outline: 2px solid var(--cw-amber, #ffb020); outline-offset: 2px; }
.av-op[aria-pressed="true"] { border-color: var(--cw-amber, #ffb020); background: #19140a; color: #fff; }
.av-op span { line-height: 1.2; text-align: center; }
.av-ed-rod { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid #1d2838; }
.av-ed-msg { flex: 1; min-width: 120px; color: #fca5a5; font-size: 0.82rem; }
@media (max-width: 680px) {
    .av-ed-corpo { grid-template-columns: 1fr; }
    .av-ed-prev { border-right: 0; border-bottom: 1px solid #1d2838; grid-template-columns: auto 1fr; justify-items: start; text-align: left; padding: 14px; }
    .av-ed-prev .avx { --av-t: 96px !important; }
    .av-ed-prev .av-ed-nota { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ crônica (Avatar.narrativa, 28/out/2026) */
.av-cronica { display: grid; gap: 8px; text-align: left; font: 400 0.84rem/1.55 var(--cw-sans, system-ui, sans-serif); color: #c4cedd; }
.av-cronica p { margin: 0; }
.av-cronica-tit { font: 700 0.68rem var(--cw-mono, ui-monospace, monospace); letter-spacing: 0.16em; text-transform: uppercase; color: var(--av-cor, #ffb020); }
.av-cronica-fim { color: #f3f6fb; font-weight: 600; padding-left: 10px; border-left: 2px solid var(--av-cor, #ffb020); }
.av-ed-prev { overflow-y: auto; }
.av-ed-prev .av-cronica { width: 100%; }

/* Janela de fim de partida: retrato do vencedor + crônica no tempo da conquista */
.go-cronica { display: flex; gap: 16px; align-items: flex-start; margin: 14px 0 4px; padding: 14px 16px; border-radius: 12px; background: rgba(6, 10, 18, 0.55); border: 1px solid rgba(148, 163, 184, 0.18); text-align: left; }
.go-cronica-av { flex: none; padding-top: 4px; }
.go-cronica-av .avx .av-esc { right: -8%; bottom: -10%; }
.av-cronica-vitoria { font-size: 0.9rem; }
.av-cronica-vitoria .av-cronica-fim { font-size: 0.95rem; }
@media (max-width: 560px) { .go-cronica { flex-direction: column; align-items: center; } }

/* Personagem do elenco (31/out/2026): busto pronto (/gg/arte/elenco) com anel na cor das peças (--av-cor) */
.av-retrato.av-pers { background: #FFF6E0; }
.av-retrato.av-pers::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    box-shadow: inset 0 0 0 2px var(--av-cor, #FFC93C), inset 0 0 0 3.5px rgba(255, 255, 255, 0.55); }