/* Brasão, mapa do mundo e chat. */

/* ---------- Brasão ---------- */
.brasao { display: block; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45)); }
.linha__brasao { display: grid; place-items: center; width: 42px; flex: none; }
.linha__descricao { margin: 2px 0; font-size: 0.8rem; color: var(--cor-texto-fraco); font-style: italic; overflow-wrap: anywhere; }

.reino-topo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--espaco-5); align-items: center; }
.reino-topo__brasao { display: grid; place-items: center; padding: var(--espaco-3); border-radius: var(--raio-grande); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--cor-ouro) 22%, transparent), transparent 70%); }
.reino-topo__nome { margin: 0 0 var(--espaco-2); font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); line-height: 1; overflow-wrap: anywhere; }
.reino-topo__descricao { margin: var(--espaco-3) 0; color: var(--cor-texto-fraco); font-style: italic; overflow-wrap: anywhere; }
.reino-topo__botoes { display: flex; flex-wrap: wrap; gap: var(--espaco-2); }
@media (max-width: 560px) { .reino-topo { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .reino-topo .fichas, .reino-topo__botoes { justify-content: center; } }

.editor-de-brasao { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: var(--espaco-4); align-items: start; }
.editor-de-brasao__previa { position: sticky; top: 0; display: grid; place-items: center; padding: var(--espaco-4) var(--espaco-2); border-radius: var(--raio-grande); background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--cor-ouro) 22%, transparent), var(--cor-campo) 75%); border: 1px solid var(--cor-borda-forte); }
.editor-de-brasao__campos .campo { margin-bottom: var(--espaco-2); }
.editor-de-brasao .ficha span { min-height: 32px; padding: 3px 12px; font-size: 0.8rem; }
@media (max-width: 560px) { .editor-de-brasao { grid-template-columns: minmax(0, 1fr); } .editor-de-brasao__previa { position: static; } }
.cores { display: flex; flex-wrap: wrap; gap: 8px; }
.cor { position: relative; }
.cor input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; min-height: 0; cursor: pointer; }
.cor span { display: block; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--cor-borda-forte); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25); transition: transform var(--transicao); }
.amostra--carmim { background: #b3263a; } .amostra--azul { background: #2f5fb3; } .amostra--verde { background: #2f8a4f; } .amostra--ouro { background: #e0b04a; }
.amostra--prata { background: #d9dde8; } .amostra--negro { background: #1f1b2c; } .amostra--roxo { background: #7a3fb0; } .amostra--laranja { background: #e0702a; }
.cor input:checked + span { border-color: var(--cor-texto); transform: scale(1.18); box-shadow: 0 0 0 3px var(--cor-destaque), inset 0 0 0 2px rgba(0, 0, 0, 0.25); }
.cor input:focus-visible + span { outline: 2px solid var(--cor-destaque-forte); outline-offset: 3px; }

/* ---------- Mapa ---------- */
.mapa-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-2) var(--espaco-3); margin-bottom: var(--espaco-3); }
.mapa-barra[hidden] { display: none; }
.mapa-barra .nota { flex: 1 1 200px; margin: 0; }
.mapa { position: relative; width: 100%; height: clamp(280px, 64dvh, 560px); border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-grande); overflow: hidden; background: var(--mapa-fundo); touch-action: none; box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.25); }
/* a névoa nas bordas: o mundo se desfaz nos cantos do mapa */
.mapa::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 52%, color-mix(in srgb, var(--mapa-fundo) 70%, transparent) 100%); }
.mapa__svg { display: block; width: 100%; height: 100%; cursor: grab; user-select: none; -webkit-user-select: none; }
.mapa__svg:active { cursor: grabbing; }
.mapa__grade line { stroke: var(--mapa-linha); stroke-width: 1; }
.mapa__coordenada { fill: var(--mapa-nome); font: 600 11px var(--fonte-mono); opacity: 0.45; pointer-events: none; }
.mapa__dominio { opacity: 0.32; }
.mapa__alcance { fill: color-mix(in srgb, var(--mapa-alcance) 6%, transparent); stroke: var(--mapa-alcance); stroke-width: 2.5; stroke-dasharray: 10 9; opacity: 0.9; pointer-events: none; }
.mapa__estrada { stroke: var(--mapa-alcance); stroke-width: 2; stroke-dasharray: 3 8; stroke-linecap: round; opacity: 0.55; pointer-events: none; }
.mapa__reino { cursor: pointer; outline: none; }
.mapa__sombra { fill: rgba(0, 0, 0, 0.4); filter: blur(1px); }
.mapa__anel { fill: color-mix(in srgb, var(--mapa-fundo) 55%, transparent); stroke: rgba(255, 255, 255, 0.5); stroke-width: 2; transition: stroke var(--transicao), fill var(--transicao); }
.mapa__reino:hover .mapa__anel, .mapa__reino:focus-visible .mapa__anel { stroke: var(--cor-ouro); }
.mapa__reino--ao-alcance .mapa__anel { stroke: var(--mapa-alcance); stroke-width: 3; }
.mapa__reino--meu .mapa__anel { stroke: var(--cor-destaque-claro); stroke-width: 4; fill: color-mix(in srgb, var(--cor-destaque) 30%, transparent); filter: drop-shadow(0 0 10px var(--cor-destaque)); }
.mapa__reino--escolhido .mapa__anel { stroke: #fff; stroke-width: 4.5; }
.mapa__reino--marchando .mapa__anel { stroke: var(--cor-ouro); stroke-dasharray: 7 5; animation: marchar-anel 1.6s linear infinite; }
@keyframes marchar-anel { to { stroke-dashoffset: -24; } }
.mapa__nome { fill: var(--mapa-nome); font: 700 17px var(--fonte-titulo); letter-spacing: 0.02em; paint-order: stroke; stroke: color-mix(in srgb, var(--mapa-fundo) 88%, transparent); stroke-width: 5px; stroke-linejoin: round; pointer-events: none; }
.mapa__situacao, .mapa__hora { fill: var(--cor-ouro); font: 600 12px var(--fonte-texto); paint-order: stroke; stroke: color-mix(in srgb, var(--mapa-fundo) 90%, transparent); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.mapa__marca { font-size: 17px; pointer-events: none; }
.mapa--longe .mapa__reino:not(.mapa__reino--meu, .mapa__reino--escolhido) .mapa__nome, .mapa--longe .mapa__situacao { display: none; }
/* a marcha: o caminho que todos veem, a casa de saída, as etapas e o fantasma do reino na chegada */
.mapa__trilha { stroke: var(--cor-ouro); stroke-width: 3; stroke-dasharray: 12 9; stroke-linecap: round; opacity: 0.85; pointer-events: none; animation: marchar-trilha 1.4s linear infinite; }
.mapa__trilha--minha { stroke: var(--cor-destaque-claro); stroke-width: 4; }
@keyframes marchar-trilha { to { stroke-dashoffset: -21; } }
.mapa__saida { fill: none; stroke: var(--cor-ouro); stroke-width: 3; opacity: 0.8; pointer-events: none; }
.mapa__etapa { fill: var(--cor-ouro); opacity: 0.9; pointer-events: none; }
.mapa__chegada { opacity: 0.8; pointer-events: none; }
.mapa__anel-fantasma { fill: none; stroke: var(--cor-ouro); stroke-width: 2.5; stroke-dasharray: 4 6; }
/* escolher o destino: o raio de uma ordem, as casas que valem e a casa tocada */
.mapa__raio-de-marcha { fill: color-mix(in srgb, #5fe08a 5%, transparent); stroke: #5fe08a; stroke-width: 2.5; stroke-dasharray: 4 8; pointer-events: none; }
.mapa__casa-livre { fill: color-mix(in srgb, #5fe08a 24%, transparent); stroke: color-mix(in srgb, #5fe08a 70%, transparent); stroke-width: 1.2; pointer-events: none; }
.mapa--marcando .mapa__svg { cursor: crosshair; }
.mapa__previa { stroke: #fff; stroke-width: 3; stroke-dasharray: 3 8; stroke-linecap: round; opacity: 0.8; pointer-events: none; }
.mapa__destino { fill: color-mix(in srgb, var(--cor-destaque-claro) 30%, transparent); stroke: var(--cor-destaque-claro); stroke-width: 4; pointer-events: none; }
.mapa__destino--invalido { fill: color-mix(in srgb, var(--cor-perigo) 30%, transparent); stroke: var(--cor-perigo); }
.mapa__bussola { position: absolute; left: 10px; bottom: 10px; pointer-events: none; opacity: 0.9; }
.bussola__fundo { fill: color-mix(in srgb, var(--cor-menu) 85%, transparent); stroke: var(--cor-borda-forte); stroke-width: 1.5; }
.bussola__agulha { fill: var(--cor-texto-fraco); opacity: 0.7; }
.bussola__norte { fill: var(--cor-destaque); }
.bussola__letra { fill: var(--cor-texto); font: 700 10px var(--fonte-texto); }
.mapa-marcha h3 { margin: 0 0 var(--espaco-2); }
.mapa-marcha__destino { font-weight: 600; font-variant-numeric: tabular-nums; }
.mapa-reino__marcha { margin: 0 0 var(--espaco-2); color: var(--cor-ouro); font-weight: 600; }
.mapa__controles { position: absolute; right: 10px; top: 10px; display: grid; gap: 6px; }
.mapa__controles button { width: 38px; height: 38px; min-height: 0; padding: 0; border-radius: 50%; font-size: 1.1rem; background: var(--cor-menu); backdrop-filter: var(--vidro); -webkit-backdrop-filter: var(--vidro); }
.mapa-detalhes { margin-top: var(--espaco-3); }
.mapa-reino { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--espaco-4); align-items: start; }
.mapa-reino h3 { margin: 0 0 var(--espaco-2); font-size: 1.5rem; overflow-wrap: anywhere; }
.mapa-reino__descricao { margin: var(--espaco-2) 0; color: var(--cor-texto-fraco); font-style: italic; overflow-wrap: anywhere; }
.mapa-reino__numeros { display: flex; flex-wrap: wrap; gap: var(--espaco-2) var(--espaco-4); margin-bottom: var(--espaco-2); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.mapa-reino__alcance { margin: 0 0 var(--espaco-3); font-weight: 600; color: var(--cor-ouro); }
.mapa-reino__alcance--fora { color: var(--cor-perigo); }
@media (max-width: 520px) { .mapa-reino { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .mapa-reino .fichas, .mapa-reino__numeros { justify-content: center; } }

/* ---------- Chat ---------- */
.redondo--chat { padding: 0; cursor: pointer; min-height: 0; }
.redondo--chat .insignia { position: absolute; top: -5px; right: -5px; }
@media (max-width: 760px) { .topo__direita { gap: 6px; } .redondo { width: 36px; height: 36px; } }
dialog.folha--chat { width: min(620px, 100%); height: min(86dvh, 720px); }
@media (max-width: 760px) { dialog.folha--chat { height: 92dvh; } }
.folha--chat .folha__corpo { display: flex; flex-direction: column; min-height: 0; flex: 1; padding-top: var(--espaco-3); }
.chat { display: flex; flex-direction: column; gap: var(--espaco-3); min-height: 0; flex: 1; }
.chat__abas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--cor-fundo-elevado); border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-pilula); overflow: hidden; }
.chat__abas button { position: relative; min-height: 38px; border: 0; border-radius: 0; background: transparent; font-size: 0.82rem; color: var(--cor-texto-fraco); padding: 6px 4px; }
.chat__abas button[aria-selected='true'] { background: var(--gradiente); color: var(--cor-texto-inverso); font-weight: 600; }
.chat__abas .insignia { position: absolute; top: 3px; right: 8px; }
.chat__cabecalho { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-2); }
.chat__cabecalho[hidden] { display: none; }
.chat__cabecalho button { min-height: 32px; padding: 4px 10px; font-size: 0.8rem; }
.chat__mensagens { flex: 1; min-height: 160px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--espaco-2); padding: var(--espaco-2) 2px; scroll-behavior: smooth; }
.chat__mensagens .lista { width: 100%; }
.linha__botao { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 40px; border: 0; background: transparent; padding: 4px 0; text-align: left; }
.mensagem { align-self: flex-start; max-width: 84%; padding: 8px 12px 6px; border: 1px solid var(--cor-borda); border-radius: 16px 16px 16px 4px; background: color-mix(in srgb, var(--cor-texto) 8%, transparent); }
.mensagem--minha { align-self: flex-end; border-radius: 16px 16px 4px 16px; border-color: transparent; background: color-mix(in srgb, var(--cor-destaque) 30%, transparent); }
.mensagem__autor { display: inline; min-height: 0; padding: 0; border: 0; background: transparent; font-size: 0.78rem; font-weight: 700; color: var(--cor-destaque-claro); text-align: left; }
.mensagem__autor i { font-style: normal; font-weight: 500; color: var(--cor-ouro); }
.mensagem__autor small { color: var(--cor-texto-apagado); font-weight: 400; }
.mensagem__autor:hover { text-decoration: underline; transform: none; }
.mensagem__texto { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.mensagem__quando { display: block; margin-top: 2px; text-align: right; font-size: 0.66rem; color: var(--cor-texto-apagado); }
.chat__compor { display: flex; gap: var(--espaco-2); }
.chat__compor[hidden] { display: none; }
.chat__compor input { flex: 1; min-width: 0; }