/* Astrâmbar — estilo da Fase 1. Só cores e medidas nos tokens abaixo: o designer troca aqui sem mexer nas telas.
   Tema escuro é o padrão; o claro vem de [data-tema="claro"] (botão no topo, lembrado no navegador). */
:root,
[data-tema="escuro"] {
  --fundo: #0b0d14;
  --superficie: #151a28;
  --superficie-2: #1d2436;
  --borda: #2b3349;
  --texto: #e8eaf0;
  --texto-suave: #a6aec0;
  --ambar: #ffb547;           /* destaque principal */
  --ambar-texto: #1b1205;     /* texto sobre o âmbar */
  --link: #ffc56e;
  --minerio: #a9bdd4;
  --coralina: #ff8a7a;
  --energia: #8fd6ff;
  --alerta: #ff9e8c;
  --info-fundo: #1d2a3d;
  --erro-fundo: #3a1c1f;
  --aviso-fundo: #3a2e15;
  --foco: #ffd08a;
  --ok: #6fd58b;
  --lateral: 13.5rem;         /* largura do menu lateral aberto */
  --lateral-recolhida: 4rem;
  --sombra: 0 10px 30px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
[data-tema="claro"] {
  --fundo: #f5f3ee;
  --superficie: #ffffff;
  --superficie-2: #f0ece3;
  --borda: #d9d2c3;
  --texto: #1c2130;
  --texto-suave: #4f5668;
  --ambar: #8a5100;
  --ambar-texto: #ffffff;
  --link: #8a4b00;
  --minerio: #3d5670;
  --coralina: #a3362a;
  --energia: #1d5f86;
  --alerta: #a3362a;
  --info-fundo: #e6eef8;
  --erro-fundo: #fbe6e3;
  --aviso-fundo: #fbf0d9;
  --foco: #8a5100;
  --sombra: 0 10px 30px rgba(40, 30, 10, .18);
  --ok: #1d7a3a;
  color-scheme: light;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--link); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
h1, h2 { line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.1rem; }

.pular { position: absolute; left: -999px; }
.pular:focus { left: 1rem; top: .5rem; background: var(--superficie); padding: .5rem; z-index: 10; }
.faixa-teste { background: var(--ambar); color: var(--ambar-texto); text-align: center; font-weight: 600; padding: .35rem 1rem; }

.botao-link, .botao-tema { background: none; border: 1px solid transparent; color: var(--link); font: inherit;
  cursor: pointer; padding: .4rem .5rem; min-height: 44px; }
.botao-tema { border-color: var(--borda); border-radius: 8px; min-width: 44px; color: var(--texto); }

.rodape { text-align: center; color: var(--texto-suave); font-size: .9rem; padding: 2rem 1rem; }

.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 1.1rem; margin-bottom: 1rem; }
.formulario { max-width: 460px; margin-left: auto; margin-right: auto; }
.formulario.largo { max-width: 640px; }
.texto { max-width: 720px; margin: 0 auto; }
.selo { color: var(--ambar); font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .25rem; }
.nota { color: var(--texto-suave); font-size: .95rem; }
.destaque { font-size: 1.1rem; color: var(--texto-suave); }

.capa { text-align: center; padding: 3rem 0 1rem; }
.capa h1 { font-size: 2rem; }
.acoes { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin: 1.5rem 0; }

.botao { display: inline-block; background: var(--ambar); color: var(--ambar-texto); border: 0; border-radius: 10px;
  padding: .75rem 1.25rem; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; min-height: 44px; }
.botao-secundario { background: transparent; color: var(--texto); border: 1px solid var(--borda); }

.campo { margin-bottom: 1rem; }
.campo label { display: block; font-weight: 600; margin-bottom: .3rem; }
.campo input[type="text"], .campo input[type="email"], .campo input[type="password"] {
  width: 100%; padding: .7rem .8rem; font: inherit; color: var(--texto); background: var(--superficie-2);
  border: 1px solid var(--borda); border-radius: 10px; min-height: 44px; }
.campo-marcar { display: grid; grid-template-columns: 1.6rem 1fr; column-gap: .6rem; align-items: start; }
.campo-marcar input { grid-column: 1; grid-row: 1; width: 1.3rem; height: 1.3rem; margin: .15rem 0 0; }
.campo-marcar label { grid-column: 2; grid-row: 1; font-weight: 400; margin: 0; cursor: pointer; }
.campo-marcar .errorlist { grid-column: 1 / -1; grid-row: 2; }
.helptext, .campo .helptext { display: block; color: var(--texto-suave); font-size: .9rem; margin-top: .25rem; }
.errorlist, .erro { color: var(--alerta); margin: .3rem 0 0; padding: 0; list-style: none; font-size: .95rem; }
.mel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.privacidade { background: var(--superficie-2); border-radius: 10px; padding: .75rem; font-size: .92rem; margin-bottom: 1rem; }
.privacidade p { margin: 0; }

.avisos { margin-bottom: 1rem; }
.aviso { border-radius: 10px; padding: .75rem 1rem; margin: 0 0 1rem; border: 1px solid var(--borda); }
.aviso-error { background: var(--erro-fundo); }
.aviso-warning { background: var(--aviso-fundo); }
.aviso-info, .aviso-success { background: var(--info-fundo); }

.racas { border: 0; padding: 0; margin: 0 0 1rem; }
.racas legend { font-weight: 600; margin-bottom: .5rem; }
.raca { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; align-items: start; padding: .8rem;
  border: 1px solid var(--borda); border-radius: 12px; margin-bottom: .6rem; cursor: pointer; background: var(--superficie-2); }
.raca input { grid-row: span 2; width: 1.3rem; height: 1.3rem; margin-top: .2rem; }
.raca-nome { font-weight: 700; }
.raca-texto { color: var(--texto-suave); font-size: .95rem; }
.raca:has(input:checked) { border-color: var(--ambar); }

.cabecalho-planeta { margin: .5rem 0 1rem; }
.recursos { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
.recurso h2 { font-size: 1rem; color: var(--texto-suave); }
.quantidade { font-size: 1.8rem; font-weight: 700; margin: 0; font-variant-numeric: tabular-nums; }
.detalhe { margin: .2rem 0 0; color: var(--texto-suave); font-size: .95rem; }
.recurso-comum { border-top: 4px solid var(--minerio); }
.recurso-raro { border-top: 4px solid var(--coralina); }
.recurso-combustivel { border-top: 4px solid var(--ambar); }
.recurso-energia { border-top: 4px solid var(--energia); }
.alerta { color: var(--alerta); }
.fila { margin: 0; padding-left: 1.3rem; }
.fila li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .25rem .75rem;
  padding: .55rem 0; border-bottom: 1px solid var(--borda); }
.fila form { margin: 0; }
.selo-mini { color: var(--ambar); font-size: .85rem; font-weight: 600; }
.construcoes { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
.construcao-topo { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.custo { margin: .6rem 0; font-size: .95rem; font-variant-numeric: tabular-nums; }
.desconto { color: var(--ambar); font-weight: 600; }
.motivo { font-weight: 600; }
.construcao .botao { width: 100%; }
.abas { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 1rem; }
.abas a { padding: .45rem .8rem; border: 1px solid var(--borda); border-radius: 999px; text-decoration: none;
  color: var(--texto); min-height: 36px; }
.abas a[aria-current="page"] { background: var(--ambar); color: var(--ambar-texto); border-color: var(--ambar); }
.rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabela th, .tabela td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela th { color: var(--texto-suave); font-weight: 600; white-space: nowrap; }
.tabela-chave { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 0; }
.tabela-chave dt { color: var(--texto-suave); }
.tabela-chave dd { margin: 0; }
.linha-nome { display: grid; grid-template-columns: 1fr; gap: .4rem; padding: .7rem 0; border-bottom: 1px solid var(--borda); }
.linha-nome input { width: 100%; padding: .5rem .6rem; font: inherit; color: var(--texto); background: var(--superficie-2);
  border: 1px solid var(--borda); border-radius: 8px; min-height: 40px; }
.sub { font-size: 1rem; margin: 1rem 0 .3rem; }
details.cartao summary { cursor: pointer; }
@media (min-width: 720px) { .linha-nome { grid-template-columns: 10rem 1fr 1.4fr auto; align-items: end; } }
.lista-construcoes { list-style: none; margin: 0; padding: 0; }
.lista-construcoes li { display: flex; justify-content: space-between; padding: .55rem 0; border-bottom: 1px solid var(--borda); }
.nivel { color: var(--texto-suave); font-variant-numeric: tabular-nums; }

@media (min-width: 720px) {
  .recursos { grid-template-columns: repeat(2, 1fr); }
  .construcoes { grid-template-columns: repeat(2, 1fr); }
  h1 { font-size: 1.9rem; }
}
@media (min-width: 960px) {
  .recursos { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
.lote { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.lote label { display: flex; flex-direction: column; font-weight: 600; gap: .25rem; }
.lote input { width: 7rem; padding: .6rem .7rem; font: inherit; color: var(--texto); background: var(--superficie-2);
  border: 1px solid var(--borda); border-radius: 10px; min-height: 44px; }
.lote .botao { flex: 1; }
.marcos { list-style: none; margin: 0; padding: 0; }
.marcos li { display: grid; grid-template-columns: 6rem 1fr; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--borda); }
.marcos li.feito strong { color: var(--ambar); }
.marcos li.feito span::after { content: " ✓"; color: var(--ambar); }
.linha-atual td { background: var(--superficie-2); font-weight: 600; }

/* Minhas relíquias */
.reliquias { list-style: none; margin: 0; padding: 0; }
.reliquias li { padding: .7rem 0; border-bottom: 1px solid var(--borda); }
.reliquias li:last-child { border-bottom: 0; }
.reliquias li p { margin: 0 0 .25rem; }

/* ---------------------------------------------------------------- estrutura (v0.10): topo, menu lateral e conteúdo */
.topo { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap;
  padding: .5rem 1rem; border-bottom: 1px solid var(--borda); background: var(--superficie); }
.marca { color: var(--ambar); font-weight: 700; font-size: 1.25rem; text-decoration: none; letter-spacing: .02em; }
.botao-menu { background: none; border: 1px solid var(--borda); border-radius: 8px; color: var(--texto); font: inherit;
  font-size: 1.2rem; min-width: 44px; min-height: 44px; cursor: pointer; }
.menu-conta { display: flex; align-items: center; gap: .7rem; margin-left: auto; }
.menu-conta form { margin: 0; }
.quem { display: flex; align-items: center; gap: .45rem; color: var(--texto); text-decoration: none; min-height: 44px; }
.quem:hover .quem-nome { text-decoration: underline; }
.avatar { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; font-weight: 700;
  color: #1b1205; background: var(--ambar); flex: none; }
.avatar-grande { width: 4.5rem; height: 4.5rem; font-size: 2rem; }
.avatar-ambar { background: #ffb547; } .avatar-coral { background: #ff8a7a; } .avatar-ceu { background: #8fd6ff; }
.avatar-musgo { background: #9ed69a; } .avatar-lavanda { background: #c4b0ff; } .avatar-prata { background: #c9d2de; }

.barra-recursos { order: 5; flex: 1 1 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .35rem; }
.barra-recursos .br { grid-column: span 3; }
.barra-recursos .bf { grid-column: span 3; border-top-color: var(--texto-suave); }
.bf-item { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-mais { color: var(--ambar); font-weight: 700; }
.barra-recursos .bf-obras { border-top-color: #e6c27a; } .barra-recursos .bf-pesquisas { border-top-color: var(--energia); }
.barra-recursos .bf-estaleiro { border-top-color: var(--coralina); }
.barra-recursos .bf-frotas { border-top-color: var(--link); }
.barra-recursos .bf-livre { border-top-color: var(--ambar); }
.bf-livre .bf-item { color: var(--ambar); }
.br { background: var(--superficie-2); border-radius: 10px; padding: .3rem .5rem .35rem; border-top: 3px solid var(--borda);
  display: grid; line-height: 1.2; min-width: 0; color: var(--texto); text-decoration: none; }
.br:hover { outline: 1px solid var(--borda); }
.br-ocupado { display: block; height: 3px; margin-top: .25rem; border-radius: 2px; background: var(--borda); overflow: hidden; }
.br-ocupado span { display: block; height: 100%; }
.br-comum .br-ocupado span { background: var(--minerio); } .br-raro .br-ocupado span { background: var(--coralina); }
.br-combustivel .br-ocupado span { background: var(--ambar); } .br-cheio .br-ocupado span { background: var(--alerta); }
.br-teto { display: none; }
.secao { margin: 1.5rem 0 .2rem; }
.andamento { list-style: none; margin: .4rem 0 0; padding: 0; }
.andamento li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; padding: .55rem 0;
  border-bottom: 1px solid var(--borda); }
.andamento li:last-child { border-bottom: 0; }
.andamento .nivel:last-child { margin-left: auto; }
.br-nome { font-size: .72rem; line-height: 1.5; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-valor { font-size: 1rem; font-variant-numeric: tabular-nums; }
.br-taxa { font-size: .72rem; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-comum { border-top-color: var(--minerio); } .br-raro { border-top-color: var(--coralina); }
.br-combustivel { border-top-color: var(--ambar); } .br-energia { border-top-color: var(--energia); }
.br-cheio .br-taxa, .br-falta .br-taxa { color: var(--alerta); font-weight: 700; }
.br-falta { background: var(--erro-fundo); }

.corpo { display: flex; align-items: flex-start; }
.conteudo { flex: 1; min-width: 0; max-width: 1000px; margin: 0 auto; padding: 1rem; }
.lateral { position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: 16rem; transform: translateX(-105%);
  transition: transform .2s ease; background: var(--superficie); border-right: 1px solid var(--borda);
  padding: 1rem .6rem; display: flex; flex-direction: column; gap: .2rem; overflow-y: auto; box-shadow: var(--sombra); }
.lateral.aberta { transform: none; }
.lateral-fundo { position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .5); }
.lateral a { display: flex; align-items: center; gap: .75rem; padding: .65rem .7rem; border-radius: 10px;
  color: var(--texto); text-decoration: none; min-height: 44px; white-space: nowrap; }
.lateral a:hover { background: var(--superficie-2); }
.lateral a[aria-current="page"] { background: var(--ambar); color: var(--ambar-texto); font-weight: 600; }
.lateral svg { width: 1.4rem; height: 1.4rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.lateral-opcoes { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--borda); display: none; }
.lateral-opcoes .botao-link { display: flex; align-items: center; gap: .6rem; width: 100%; color: var(--texto-suave); font-size: .9rem; }
.lateral-opcoes .seta { width: 1.4rem; text-align: center; }

@media (min-width: 960px) {
  .botao-menu, .lateral-fundo { display: none; }
  .barra-recursos { order: 0; flex: 1 1 auto; grid-template-columns: repeat(8, minmax(0, 1fr)); margin: 0 1rem; }
  .barra-recursos .br, .barra-recursos .bf { grid-column: auto; }
  .br-valor { font-size: 1.05rem; }
  .br-teto { display: inline; }
  .lateral { position: sticky; top: var(--altura-topo, 4rem); height: calc(100vh - var(--altura-topo, 4rem)); z-index: 20;
    transform: none; box-shadow: none; width: var(--lateral); flex: none; transition: width .15s ease; }
  .lateral-opcoes { display: block; }
  [data-lateral-solta="sim"] .lateral { position: static; height: auto; min-height: 60vh; }
  [data-lateral="recolhida"] .lateral { width: var(--lateral-recolhida); }
  [data-lateral="recolhida"] .lateral a span, [data-lateral="recolhida"] .lateral-opcoes .rotulo { display: none; }
  [data-lateral="recolhida"] .lateral a { justify-content: center; padding: .65rem 0; }
  [data-lateral="recolhida"] .lateral-opcoes .seta { transform: scaleX(-1); }
}
@media (max-width: 520px) { .quem-nome { display: none; } .menu-conta { gap: .3rem; } }

/* ---------------------------------------------------------------- novidades e próximos passos */
.avisos-topo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.avisos-topo h2 { margin: 0; }
.avisos-topo form { margin: 0; }
.dicas-lista { list-style: none; margin: .4rem 0 0; padding: 0; }
.dica:last-child { border-bottom: 0; }
.aviso-rotulo { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .1rem .5rem;
  border-radius: 999px; background: var(--superficie-2); color: var(--ambar); white-space: nowrap; }

.dica { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .3rem 1rem;
  padding: .6rem 0 .6rem .8rem; border-bottom: 1px solid var(--borda); border-left: 3px solid var(--borda); }
.dica-urgente { border-left-color: var(--alerta); }
.dica-atencao { border-left-color: var(--ambar); }
.dica-acao { font-weight: 600; white-space: nowrap; }

/* ---------------------------------------------------------------- perfil */
.perfil-topo { display: flex; align-items: center; gap: 1rem; }
.cores { display: flex; flex-wrap: wrap; gap: .6rem; border: 0; padding: 0; margin: 0 0 1rem; }
.cores legend { font-weight: 600; margin-bottom: .4rem; }
.cores label { cursor: pointer; }
.cores input { position: absolute; opacity: 0; }
.cores input:checked + .avatar { outline: 3px solid var(--texto); outline-offset: 2px; }
.cores input:focus-visible + .avatar { outline: 3px solid var(--foco); outline-offset: 2px; }

/* ---------------------------------------------------------------- marca final (v0.12) */
.marca { display: flex; align-items: center; }
.logo { height: 2.2rem; width: auto; display: block; }
.logo-claro, [data-tema="claro"] .logo-escuro { display: none; }
[data-tema="claro"] .logo-claro { display: block; }
.lateral img { width: 1.6rem; height: 1.6rem; flex: none; object-fit: contain; }
.lateral a[aria-current="page"] img { filter: drop-shadow(0 0 2px rgba(0, 0, 0, .5)); }
.br-nome img { width: .95rem; height: .95rem; vertical-align: -.15rem; margin-right: .25rem; }
.cena { display: block; width: 100%; height: auto; aspect-ratio: 16 / 5; object-fit: cover; border-radius: 14px;
  margin: .5rem 0 1rem; border: 1px solid var(--borda); }
.capa-arte { background: linear-gradient(rgba(11, 13, 20, .55), rgba(11, 13, 20, .85)),
  url("../img/cenas/arte-chave-9x16.webp") center / cover no-repeat; border-radius: 18px; padding: 3rem 1rem 2rem;
  color: #e8eaf0; min-height: 70vh; display: flex; flex-direction: column; justify-content: flex-end; }
.capa-arte .destaque, .capa-arte .nota { color: #d6dae4; }
@media (min-width: 720px) {
  .capa-arte { background-image: linear-gradient(90deg, rgba(11, 13, 20, .9), rgba(11, 13, 20, .2)),
    url("../img/cenas/arte-chave-16x9.webp"); text-align: left; align-items: flex-start; min-height: 60vh; padding: 3rem; }
  .capa-arte .acoes { justify-content: flex-start; }
}
@media (max-width: 520px) { .logo { height: 1.8rem; } }

/* ---------------------------------------------------------------- diário de bordo (v0.13) */
.diario { padding-bottom: .4rem; }
.diario-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .3rem; }
.diario-topo h2 { margin: 0; }
.diario-sub { margin: .15rem 0 0; color: var(--texto-suave); font-size: .85rem; }
.diario-topo form { margin: 0; }
.botao-suave { background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borda); border-radius: 999px;
  padding: .35rem .85rem; font: inherit; font-size: .85rem; cursor: pointer; min-height: 36px; white-space: nowrap; }
.botao-suave:hover { border-color: var(--ambar); color: var(--ambar); }
.diario-lista { list-style: none; margin: 0; padding: 0; position: relative; }
.diario-item { display: grid; grid-template-columns: 2.4rem 1fr; gap: .8rem; padding: .55rem 0; position: relative; }
.diario-item + .diario-item::before { content: ""; position: absolute; left: 1.2rem; top: -.55rem; height: .9rem;
  border-left: 1px dashed var(--borda); }
.diario-icone { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--superficie-2); border: 1px solid var(--borda); }
.diario-icone img { width: 1.6rem; height: 1.6rem; object-fit: contain; }
.diario-icone svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: var(--ambar); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.diario-obra .diario-icone { border-color: rgba(255, 181, 71, .45); }
.diario-pesquisa .diario-icone { border-color: rgba(143, 214, 255, .45); }
.diario-naves .diario-icone, .diario-expedicao .diario-icone { border-color: rgba(255, 138, 122, .45); }
.diario-texto { margin: 0; }
.diario-meta { margin: .1rem 0 0; color: var(--texto-suave); font-size: .8rem; font-variant-numeric: tabular-nums; }
.diario-rotulo { color: var(--ambar); font-weight: 600; letter-spacing: .02em; }
.diario-pesquisa .diario-rotulo { color: var(--energia); }
.diario-naves .diario-rotulo, .diario-expedicao .diario-rotulo { color: var(--coralina); }
.diario-mais summary { cursor: pointer; color: var(--link); padding: .4rem 0 .4rem 3.2rem; font-size: .9rem; }

/* ---------------------------------------------------------------- raças, planeta natal e construções (v0.14) */
.raca { grid-template-columns: auto auto 1fr; }
.raca input { grid-row: span 2; }
.raca-retrato { grid-row: span 2; width: 4.5rem; height: 6rem; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--borda); }
.raca-nome { display: flex; align-items: center; gap: .4rem; }
.raca-brasao { width: 1.6rem; height: 1.6rem; object-fit: contain; }
.raca-texto { grid-column: 3; }
.cena-planeta { aspect-ratio: 3 / 1; }
.construcao-topo h2 { display: flex; align-items: center; gap: .55rem; }
.construcao-icone { width: 2.6rem; height: 2.6rem; object-fit: contain; flex: none; }
@media (max-width: 520px) { .raca-retrato { width: 3.6rem; height: 4.8rem; } }

/* ---------------------------------------------------------------- lote P2 (v0.15): avatares e fundo de acesso */
.avatar-img { object-fit: cover; padding: 0; background: var(--superficie-2); border: 2px solid var(--ambar); }
.avatares label { display: block; }
.avatares .avatar-img { width: 4rem; height: 4rem; border-radius: 50%; border-color: var(--borda); }
.avatares input:checked + .avatar-img { border-color: var(--ambar); outline: 3px solid var(--ambar); outline-offset: 2px; }
.tela-acesso { background: var(--fundo) url("../img/cenas/entrar-9x16.webp") center top / cover fixed no-repeat; }
.tela-acesso .cartao { background: color-mix(in srgb, var(--superficie) 88%, transparent); backdrop-filter: blur(6px); }
@media (min-width: 720px) { .tela-acesso { background-image: url("../img/cenas/entrar-16x9.webp"); } }
.tela-acesso .rodape { color: #d6dae4; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.tela-acesso .rodape a { color: #ffc56e; }
.avatares input:focus-visible + .avatar-img { outline: 3px solid var(--foco); outline-offset: 2px; }

/* ---------------------------------------------------------------- v0.16: menu da conta, monitoramento, topo separado */
.menu-usuario { position: relative; }
.menu-usuario summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .55rem; padding: .25rem .4rem;
  border-radius: 12px; min-height: 44px; }
.menu-usuario summary::-webkit-details-marker { display: none; }
.menu-usuario summary:hover, .menu-usuario[open] summary { background: var(--superficie-2); }
.quem-texto { display: grid; line-height: 1.15; }
.quem-nome { font-weight: 600; }
.quem-sub { font-size: .75rem; color: var(--texto-suave); }
.seta-menu { color: var(--texto-suave); font-size: .8rem; }
.menu-usuario-lista { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 50; min-width: 15rem;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: .4rem; box-shadow: var(--sombra); }
.menu-usuario-lista a, .menu-usuario-lista button { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .6rem .7rem;
  border-radius: 10px; color: var(--texto); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer;
  min-height: 44px; text-align: left; }
.menu-usuario-lista a:hover, .menu-usuario-lista button:hover { background: var(--superficie-2); }
.menu-usuario-lista form { margin: .3rem 0 0; padding-top: .3rem; border-top: 1px solid var(--borda); }
.menu-usuario-lista svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round;
  stroke-linejoin: round; flex: none; color: var(--texto-suave); }
.contador { margin-left: auto; background: var(--ambar); color: var(--ambar-texto); border-radius: 999px; font-size: .75rem;
  font-weight: 700; padding: .05rem .5rem; }
@media (max-width: 520px) { .quem-texto, .seta-menu { display: none; } }

.lateral-admin { margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--borda); display: grid; gap: .2rem; }
.lateral-admin + .lateral-opcoes { margin-top: 0; }
.lateral-grupo { margin: .5rem .7rem .1rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--texto-suave); font-weight: 700; }
.lateral-admin a:not(:first-child) { padding-left: 1.1rem; }
@media (min-width: 960px) {
  [data-lateral="recolhida"] .lateral-grupo span { display: none; }
  [data-lateral="recolhida"] .lateral-grupo { border-top: 1px dashed var(--borda); margin: .4rem .5rem; }
  [data-lateral="recolhida"] .lateral-admin a:not(:first-child) { padding-left: 0; }
}

.escolha-tema { display: flex; gap: .6rem; }
.escolha-tema [aria-pressed="true"] { border-color: var(--ambar); color: var(--ambar); font-weight: 700; }
.diario-lido { opacity: .72; }
.novo { color: var(--ambar); }
.saude { margin: 0 0 .8rem; font-size: 1.05rem; }
.saude-ok strong { color: var(--ok); } .saude-alerta strong { color: var(--alerta); }
.manual h2 { margin-top: 1.2rem; } .manual h2:first-child { margin-top: 0; }
.manual li { margin-bottom: .3rem; }

/* topo: recursos (o que você tem) separados das filas (o que está sendo feito) */
.barra-recursos .bf { background: transparent; border: 1px dashed var(--borda); border-top: 3px solid var(--borda); }
@media (max-width: 959px) { .barra-recursos .bf-primeiro { margin-top: 0; } .barra-recursos { row-gap: .5rem; } }
@media (min-width: 960px) {
  .barra-recursos .bf-primeiro { margin-left: .9rem; position: relative; }
  .barra-recursos .bf-primeiro::before { content: ""; position: absolute; left: -.85rem; top: 15%; bottom: 15%;
    border-left: 1px solid var(--borda); }
}
.barra-recursos .bf.bf-obras { border-top-color: #e6c27a; } .barra-recursos .bf.bf-pesquisas { border-top-color: var(--energia); }
.barra-recursos .bf.bf-estaleiro { border-top-color: var(--coralina); } .barra-recursos .bf.bf-livre { border-top-color: var(--ambar); }

/* ---------------------------------------------------------------- v0.17: sino no topo, ícones do admin, Servidor Âmbar */
.botao-sino { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 1px solid var(--borda); border-radius: 12px; color: var(--texto); text-decoration: none; }
.botao-sino:hover { background: var(--superficie-2); }
@media (min-width: 960px) { .barra-recursos { flex: 1 1 36rem; min-width: 0; } }
@media (min-width: 960px) and (max-width: 1439px) { .menu-conta .quem-sub { display: none; } }
.botao-sino:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.botao-sino svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round;
  stroke-linejoin: round; }
.botao-sino.com-avisos svg { color: var(--ambar); }
.sino-contador { position: absolute; top: -.35rem; right: -.35rem; min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem;
  display: grid; place-items: center; border-radius: 999px; background: var(--ambar); color: var(--ambar-texto);
  font-size: .72rem; font-weight: 800; line-height: 1; border: 2px solid var(--superficie); }

/* ícones duotone do menu do administrador: traço na cor do texto e um detalhe em âmbar */
.lateral svg.icone-duo .duo { stroke: var(--ambar); }
.lateral svg.icone-duo .duo-fill { fill: color-mix(in srgb, var(--ambar) 30%, transparent); }
.lateral a[aria-current="page"] svg.icone-duo .duo { stroke: currentColor; }
.lateral a[aria-current="page"] svg.icone-duo .duo-fill { fill: color-mix(in srgb, currentColor 22%, transparent); }

/* Servidor Âmbar */
.cabecalho-monitor { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 1rem; }
.cabecalho-monitor > div { flex: 1 1 28rem; }
.cabecalho-monitor .saude { margin: 0; padding: .4rem .8rem; border: 1px solid var(--borda); border-radius: 999px;
  background: var(--superficie); }
.abas-monitor a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; }
.selo-aba { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; border-radius: 999px;
  font-size: .72rem; font-weight: 800; background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borda); }
.selo-aba-erro { background: var(--erro-fundo); color: var(--alerta); border-color: var(--alerta); }
.selo-aba-aviso { background: var(--aviso-fundo); color: var(--link); border-color: var(--link); }
.abas a[aria-current="page"] .selo-aba { background: var(--ambar-texto); color: var(--ambar); border-color: transparent; }

.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.kpi { display: flex; gap: .75rem; align-items: flex-start; background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 14px; padding: .9rem 1rem; min-width: 0; }
.kpi > div { display: grid; gap: .1rem; min-width: 0; }
.kpi span:not(.kpi-ic) { color: var(--texto-suave); font-size: .85rem; }
.kpi b { font-size: 1.45rem; line-height: 1.2; }
.kpi b small { font-size: .85rem; color: var(--texto-suave); font-weight: 500; }
.kpi small { color: var(--texto-suave); font-size: .8rem; overflow-wrap: anywhere; }
.kpi-ic { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none; border-radius: 12px;
  background: var(--superficie-2); color: var(--ambar); }
.kpi-ic svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round;
  stroke-linejoin: round; }
.kpi-ic.ok { color: var(--ok); }
.kpi-ic.erro { color: var(--alerta); background: var(--erro-fundo); }
.txt-erro { color: var(--alerta); }

.cartao-titulo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .6rem; }
.cartao-titulo h2 { margin: 0; }
.periodos { display: inline-flex; border: 1px solid var(--borda); border-radius: 999px; overflow: hidden; }
.periodos a { padding: .35rem .8rem; min-height: 36px; display: inline-grid; place-items: center; text-decoration: none;
  color: var(--texto); font-size: .9rem; font-weight: 600; }
.periodos a + a { border-left: 1px solid var(--borda); }
.periodos a[aria-current="true"] { background: var(--ambar); color: var(--ambar-texto); }
.grafico-servidor { display: block; width: 100%; height: 13rem; background: var(--superficie-2); border-radius: 10px; }
.grafico-servidor polyline { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.grafico-servidor .g-grade { stroke: var(--borda); stroke-width: 1; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.grafico-servidor .g-ms { stroke: var(--ambar); stroke-width: 2.2; }
.grafico-servidor .g-carga { stroke: var(--energia); opacity: .8; }
.grafico-servidor .g-falha { fill: var(--alerta); opacity: .35; }
.grafico-servidor .g-ssh { fill: var(--energia); opacity: .75; }
.grafico-servidor .g-sip { fill: var(--coralina); opacity: .75; }
.grafico-servidor .g-ban { stroke: var(--alerta); }
.grafico-servidor .g-fw { stroke: var(--texto-suave); stroke-dasharray: 6 5; }
.rotulos-grafico { display: flex; justify-content: space-between; gap: .5rem; color: var(--texto-suave); font-size: .8rem; margin-top: .3rem; }
.legenda-grafico { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .85rem; color: var(--texto-suave); margin: .6rem 0 0; }
.legenda-grafico span { display: inline-flex; align-items: center; gap: .4rem; }
.legenda-grafico i { display: inline-block; width: 1rem; height: .3rem; border-radius: 2px; }
.legenda-grafico .l-ms { background: var(--ambar); } .legenda-grafico .l-carga, .legenda-grafico .l-ssh { background: var(--energia); }
.legenda-grafico .l-falha { background: var(--alerta); } .legenda-grafico .l-sip { background: var(--coralina); }
.legenda-grafico .l-fw { background: var(--texto-suave); }
.vazio-monitor { padding: 1.5rem; text-align: center; background: var(--superficie-2); border-radius: 10px; }

.grade-monitor { display: grid; gap: 0 1rem; }
@media (min-width: 1440px) { .grade-monitor { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.tabela .num { text-align: right; white-space: nowrap; }
.tabela code, .tabela-chave code { font-size: .85rem; }
.tabela td:first-child code { white-space: nowrap; }
.etiquetas { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .5rem 0 1rem; }
.etiqueta { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borda); white-space: nowrap; }
.etiqueta.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.etiqueta.erro { color: var(--alerta); background: var(--erro-fundo); border-color: color-mix(in srgb, var(--alerta) 45%, transparent); }
.etiqueta.aviso { color: var(--link); background: var(--aviso-fundo); border-color: color-mix(in srgb, var(--link) 45%, transparent); }
.alerta-monitor { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem 1rem; border-radius: 12px; margin-bottom: 1rem;
  border: 1px solid var(--borda); }
.alerta-monitor p { margin: 0; }
.alerta-monitor-erro { background: var(--erro-fundo); border-color: color-mix(in srgb, var(--alerta) 50%, transparent); }
.alerta-monitor-aviso { background: var(--aviso-fundo); border-color: color-mix(in srgb, var(--link) 45%, transparent); }
.alerta-icone { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; flex: none; border-radius: 50%; font-weight: 800;
  background: var(--ambar); color: var(--ambar-texto); }
.alerta-monitor-erro .alerta-icone { background: var(--alerta); color: var(--superficie); }
pre.comando, .exemplo-log pre { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 10px; padding: .7rem .9rem;
  overflow-x: auto; font-size: .85rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.exemplo-log summary { cursor: pointer; color: var(--link); font-size: .85rem; margin-top: .3rem; }
.exemplo-log pre { max-height: 22rem; overflow-y: auto; }
.quebra { overflow-wrap: anywhere; }
.lista-monitor li { margin-bottom: .35rem; }
@media (max-width: 520px) {
  .kpis { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .kpi { flex-direction: column; gap: .4rem; padding: .7rem; }
  .kpi b { font-size: 1.2rem; }
  .grafico-servidor { height: 10rem; }
}
.grade-monitor .tabela-chave { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); }
.grade-monitor .tabela-chave dd { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .grade-monitor .tabela-chave { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: .4rem .7rem; } }
@media (max-width: 520px) { .rotulos-horas span:nth-child(even) { display: none; } }

/* ---------------------------------------------------------------- janela da evolução (v0.17) */
.janela { width: min(56rem, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); padding: 0; border: 1px solid var(--borda);
  border-radius: 18px; background: var(--fundo); color: var(--texto); box-shadow: var(--sombra); }
.janela::backdrop { background: rgba(5, 7, 12, .7); backdrop-filter: blur(3px); }
.janela-topo { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; padding: 1rem 1.1rem .6rem; background: var(--fundo); border-bottom: 1px solid var(--borda); }
.janela-topo h2 { margin: 0; font-size: 1.35rem; }
.janela-topo .nota { margin: .3rem 0 0; }
.janela-corpo { padding: 1rem 1.1rem .2rem; }
.janela-fechar { background: var(--superficie-2); border: 1px solid var(--borda); color: var(--texto); border-radius: 50%;
  width: 2.4rem; height: 2.4rem; font-size: 1.4rem; line-height: 1; cursor: pointer; flex: none; }
.janela-fechar:hover { border-color: var(--ambar); color: var(--ambar); }
.bf .br-nome img { width: .95rem; height: .95rem; vertical-align: -.15rem; margin-right: .25rem; }

/* ---------------------------------------------------------------- lote P3 (v0.18): raridade e estados vazios */
:root, [data-tema="escuro"] { --raridade-comum: #b87333; --raridade-rara: #4fb3c8; --raridade-epica: #9b7bff; --raridade-lendaria: #ffb547; }
[data-tema="claro"] { --raridade-comum: #8a4f1c; --raridade-rara: #1f7f93; --raridade-epica: #6a4bd6; --raridade-lendaria: #a86200; }
.reliquias .reliquia { display: grid; grid-template-columns: 6rem 1fr; gap: .9rem; align-items: center; }
.reliquia-img { width: 6rem; height: 6rem; border-radius: 12px; object-fit: cover; border: 3px solid var(--borda); }
.raridade-comum .reliquia-img { border-color: var(--raridade-comum); }
.raridade-rara .reliquia-img { border-color: var(--raridade-rara); }
.raridade-epica .reliquia-img { border-color: var(--raridade-epica); }
.raridade-lendaria .reliquia-img { border-color: var(--raridade-lendaria); box-shadow: 0 0 14px color-mix(in srgb, var(--raridade-lendaria) 55%, transparent); }
.raridade-nome { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .78rem; }
.raridade-comum .raridade-nome { color: var(--raridade-comum); } .raridade-rara .raridade-nome { color: var(--raridade-rara); }
.raridade-epica .raridade-nome { color: var(--raridade-epica); } .raridade-lendaria .raridade-nome { color: var(--raridade-lendaria); }
.vazio { display: grid; justify-items: center; text-align: center; gap: .3rem; padding: .5rem 0; }
.vazio img { width: 10rem; height: 10rem; object-fit: contain; opacity: .9; }
.vazio .nota { max-width: 32rem; margin: 0; }
@media (max-width: 520px) { .reliquias .reliquia { grid-template-columns: 4.5rem 1fr; } .reliquia-img { width: 4.5rem; height: 4.5rem; } .vazio img { width: 8rem; height: 8rem; } }

/* ---------------------------------------------------------------- mapa (v0.19): endereço do planeta */
.endereco { display: flex; align-items: center; gap: .4rem; margin: .1rem 0 .5rem; color: var(--texto-suave); }
.endereco svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--ambar); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.endereco strong { color: var(--texto); }

/* ---------------------------------------------------------------- IA e Custos (v0.21) */
.campo select, .campo textarea, .campo input[type="number"] {
  width: 100%; padding: .7rem .8rem; font: inherit; color: var(--texto); background: var(--superficie-2);
  border: 1px solid var(--borda); border-radius: 10px; min-height: 44px; }
.campo textarea { min-height: 6rem; resize: vertical; }
.campo-preco { width: 7rem; padding: .45rem .6rem; font: inherit; color: var(--texto); background: var(--superficie-2);
  border: 1px solid var(--borda); border-radius: 8px; }
.ia-conversa { display: grid; gap: .5rem; margin-bottom: 1rem; }
.ia-pergunta { margin: 0; color: var(--texto-suave); }
.ia-resposta { background: var(--superficie-2); border-left: 3px solid var(--ambar); border-radius: 10px; padding: .75rem .9rem; }
.acoes form { display: inline; }
.cartao .acoes { justify-content: flex-start; margin: .8rem 0; }

/* ---------------------------------------------------------------- mapa (v0.22) */
.mapa-trilha { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: .2rem 0 .4rem; color: var(--texto-suave); }
.mapa-trilha a[aria-current="page"], .mapa-trilha span[aria-current="page"] { color: var(--texto); font-weight: 600; text-decoration: none; }
.mapa-cartao { padding: .6rem; }
.mapa-janela { background: radial-gradient(ellipse at center, var(--superficie-2) 0%, var(--fundo) 85%); border-radius: 12px; overflow: hidden; }
.mapa-svg { display: block; width: 100%; height: auto; max-height: 72vh; }
.mapa-svg .setor polygon { fill: var(--superficie); stroke: var(--borda); stroke-width: 1; }
.mapa-svg .regiao-1 polygon { fill: color-mix(in srgb, var(--superficie) 90%, var(--texto)); }
.mapa-svg .regiao-2 polygon { fill: color-mix(in srgb, var(--superficie) 95%, var(--fundo)); }
.mapa-svg .setor-selado polygon, .mapa-svg .setor-amago polygon { fill: url(#hachura-selado); }
.mapa-svg .setor-fora polygon { fill: transparent; stroke: color-mix(in srgb, var(--borda) 45%, transparent); }
.mapa-svg .setor-centro polygon { stroke: var(--ambar); stroke-width: 2.5; }
.mapa-svg a.setor:hover polygon, .mapa-svg a.setor:focus polygon { fill: color-mix(in srgb, var(--ambar) 30%, var(--superficie)); }
.mapa-svg a.setor:focus { outline: none; }
.mapa-svg a.setor:focus-visible polygon { stroke: var(--link); stroke-width: 3; }
.mapa-svg .borda-regiao { stroke: var(--ambar); stroke-width: 2.2; stroke-linecap: round; opacity: .75; pointer-events: none; }
.mapa-svg .nome-regiao { font-size: 13px; font-weight: 700; text-anchor: middle; fill: var(--texto); paint-order: stroke;
  stroke: var(--fundo); stroke-width: 3px; letter-spacing: .04em; pointer-events: none; }
.icone-voce { fill: var(--ambar); }
.icone-planeta { fill: var(--texto); }
.icone-selado { fill: var(--ambar); stroke: var(--ambar); }
.mapa-andar { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: .8rem 0 .4rem; }
.mapa-andar .botao { min-height: 44px; }
.mapa-legenda { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; justify-content: center; color: var(--texto-suave); font-size: .9rem; margin: .4rem 0; }
.mapa-legenda span { display: inline-flex; align-items: center; gap: .35rem; }
.mapa-legenda svg { width: 1.1rem; height: 1.1rem; }
.leg-borda { display: inline-block; width: 1.2rem; height: 0; border-top: 3px solid var(--ambar); opacity: .75; }
.leg { display: inline-block; width: .95rem; height: .95rem; border-radius: 3px; border: 1px solid var(--borda); }
.leg-povoada { background: color-mix(in srgb, var(--ambar) 60%, var(--superficie)); }
.leg-aberta { background: var(--superficie); }
.leg-selado { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ambar) 30%, var(--superficie)) 0 3px, var(--superficie) 3px 6px); }
.leg-amago { background: var(--ambar); }
.mapa-rastro .regiao polygon { fill: var(--superficie); stroke: var(--borda); stroke-width: 1.5; }
.mapa-rastro .regiao-povoada polygon { fill: color-mix(in srgb, var(--ambar) 60%, var(--superficie)); }
.mapa-rastro .regiao-selado polygon { fill: url(#hachura-selado); stroke-dasharray: 4 3; }
.mapa-rastro .regiao-amago polygon { fill: var(--ambar); }
.mapa-rastro .regiao-eu polygon { stroke: var(--link); stroke-width: 3; }
.mapa-rastro a.regiao:hover polygon, .mapa-rastro a.regiao:focus-visible polygon { stroke: var(--link); stroke-width: 3; }
.mapa-rastro .nome-regiao-rastro { font-size: 8.5px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; fill: var(--texto);
  paint-order: stroke; stroke: var(--superficie); stroke-width: 2.5px; pointer-events: none; }
.mapa-rastro .regiao-amago .nome-regiao-rastro { fill: var(--ambar-texto); stroke: var(--ambar); }
.faixa { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .85rem; border: 1px solid var(--borda); white-space: nowrap; }
.faixa-bem-maior, .faixa-maior { border-color: var(--alerta); color: var(--alerta); }
.faixa-parecido { border-color: var(--ok); color: var(--ok); }
.lista-planetas { padding-left: 1.1rem; }
.lista-planetas li { margin: .35rem 0; }
@media (prefers-reduced-motion: reduce) { .mapa-svg * { transition: none !important; } }
#hachura-selado .fundo-hachura { fill: color-mix(in srgb, var(--ambar) 16%, var(--superficie)); }
#hachura-selado .linha-hachura { stroke: color-mix(in srgb, var(--ambar) 45%, var(--superficie)); stroke-width: 2; }
.mapa-cartao h2 { margin-top: 1rem; }
.cartao > .tabela-chave + h2 { margin-top: 1.2rem; }
@media (max-width: 700px) {
  .mapa-janela { overflow: auto; -webkit-overflow-scrolling: touch; }
  .mapa-janela .mapa-svg { width: 600px; max-width: none; max-height: none; } /* setor com ~44 px, para o dedo */
  .mapa-janela .mapa-rastro { width: 640px; }
}
.mapa-svg .nome-meu-planeta { font-size: 11px; font-weight: 700; text-anchor: middle; fill: var(--ambar); paint-order: stroke;
  stroke: var(--fundo); stroke-width: 3.5px; pointer-events: none; }

/* ---------------------------------------------------------------- filas e cartões mais limpos (v0.23) */
.fila { list-style: none; padding: 0; counter-reset: fila; }
.fila .fila-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(9rem, auto) 5.5rem; align-items: center;
  gap: .3rem 1rem; padding: .65rem 0 .65rem 2.1rem; position: relative; border-bottom: 1px solid var(--borda); counter-increment: fila; }
.fila .fila-item::before { content: counter(fila); position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 700;
  color: var(--texto-suave); border: 1px solid var(--borda); }
.fila .fila-ativa::before { background: var(--ambar); color: var(--ambar-texto); border-color: var(--ambar); }
.fila .fila-item:last-child { border-bottom: 0; }
.fila-nome { min-width: 0; }
.fila-tempo { display: grid; justify-items: end; text-align: right; font-variant-numeric: tabular-nums; }
.fila-tempo .contagem { font-weight: 600; }
.fila-tempo small { color: var(--texto-suave); font-size: .85rem; }
.fila-acao { justify-self: end; }
.selo-espera { color: var(--texto-suave); font-weight: 500; }
@media (max-width: 560px) {
  .fila .fila-item { grid-template-columns: minmax(0, 1fr) auto; }
  .fila-nome { grid-column: 1 / -1; }
  .fila-tempo { justify-items: start; text-align: left; }
}
.construcao { display: flex; flex-direction: column; }
.construcao > form, .construcao > .motivo { margin-top: auto; }
.construcao > .custo-chips { margin-bottom: 1rem; }
.construcao-topo { align-items: center; flex-wrap: wrap; }
.construcao > .selo-mini { margin: .1rem 0 0; }
.selo-nivel { display: inline-block; padding: .15rem .6rem; border-radius: 999px; border: 1px solid var(--borda);
  color: var(--texto-suave); font-size: .85rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.custo-titulo { margin: .8rem 0 .35rem; font-size: .85rem; color: var(--texto-suave); font-weight: 600; }
.custo-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: 999px;
  background: var(--superficie-2); border: 1px solid var(--borda); font-size: .9rem; font-variant-numeric: tabular-nums; }
.chip img { width: 18px; height: 18px; }
.chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.chip-nome { color: var(--texto-suave); font-size: .82rem; }
.chip-desconto { background: var(--ambar); color: var(--ambar-texto); border-color: var(--ambar); font-weight: 700; cursor: help; }
.recursos-expedicao { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)) !important; }
@media (max-width: 560px) { .recursos-expedicao { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* ---------------------------------------------------------------- mapa com JS (v0.24) */
.mapa-area { display: grid; gap: 1rem; align-items: start; }
.mapa-com-js .mapa-svg { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.mapa-com-js .mapa-svg:active { cursor: grabbing; }
.mapa-janela { position: relative; }
.mapa-com-js .mapa-janela { overflow: hidden; }
@media (max-width: 700px) { .mapa-com-js .mapa-janela .mapa-svg { width: 100%; max-height: 70vh; } }
.mapa-zoom { position: absolute; right: .6rem; top: .6rem; display: grid; gap: .35rem; z-index: 2; }
.mapa-zoom button { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--borda); background: var(--superficie);
  color: var(--texto); font-family: inherit; font-size: 1.5rem; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.mapa-zoom button:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.mapa-filtros { display: flex; gap: .4rem; overflow-x: auto; padding: .1rem .1rem .6rem; scrollbar-width: none; }
.filtro { flex: none; min-height: 44px; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--borda);
  background: transparent; color: var(--texto); font: inherit; cursor: pointer; }
.filtro[aria-pressed="true"] { background: var(--ambar); color: var(--ambar-texto); border-color: var(--ambar); font-weight: 600; }
.filtro-jogadores .mapa-svg a.setor:not(.tem-perto):not(.setor-meu) { opacity: .28; }
.filtro-jogadores .mapa-svg .tem-perto polygon { stroke: var(--ambar); stroke-width: 2; }
.filtro-alcance .mapa-svg .zona-perto polygon { fill: color-mix(in srgb, var(--ok) 30%, var(--superficie)); }
.filtro-alcance .mapa-svg .zona-meio polygon { fill: color-mix(in srgb, var(--ambar) 26%, var(--superficie)); }
.filtro-alcance .mapa-svg .zona-longe polygon { fill: color-mix(in srgb, var(--alerta) 22%, var(--superficie)); }
.mapa-aneis { display: flex; flex-wrap: wrap; gap: .4rem 1rem; justify-content: center; font-size: .9rem; margin: .5rem 0 0; }
.anel { display: inline-flex; align-items: center; gap: .35rem; }
.anel i { width: .95rem; height: .95rem; border-radius: 3px; display: inline-block; border: 1px solid var(--borda); }
.anel-perto i { background: color-mix(in srgb, var(--ok) 30%, var(--superficie)); }
.anel-meio i { background: color-mix(in srgb, var(--ambar) 26%, var(--superficie)); }
.anel-longe i { background: color-mix(in srgb, var(--alerta) 22%, var(--superficie)); }
.mapa-svg .setor-escolhido polygon { stroke: var(--link); stroke-width: 3; }
.mapa-painel { position: relative; }
.mapa-painel .mapa-ficha { margin: 0; }
.mapa-painel-fechar { position: absolute; right: .5rem; top: .5rem; width: 44px; height: 44px; border: 0; border-radius: 12px;
  background: transparent; color: var(--texto); font-size: 1.6rem; cursor: pointer; z-index: 1; }
.ficha-titulo small { display: block; font-size: .9rem; font-weight: 500; color: var(--texto-suave); margin-top: .15rem; }
@media (min-width: 1000px) {
  .mapa-area:has(.mapa-painel:not([hidden])) { grid-template-columns: minmax(0, 1fr) 360px; }
  .mapa-painel { position: sticky; top: calc(var(--altura-topo, 90px) + 1rem); }
}
@media (max-width: 999px) {
  .mapa-painel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-height: 55vh; overflow: auto;
    border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.4); animation: ficha-sobe .2s ease-out; }
  .mapa-painel .mapa-ficha { border-radius: 18px 18px 0 0; padding-bottom: 1.5rem; }
  .mapa-painel.sem-movimento { animation: none; }
}
@keyframes ficha-sobe { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .mapa-painel { animation: none; } }
@media (hover: none), (max-width: 700px) { .so-computador { display: none !important; } }

/* ---------------------------------------------------------------- sinais e pontos do setor (v0.25) */
.icone-sinal { fill: var(--link); stroke: var(--link); }
.filtro-explorar .mapa-svg a.setor:not(.tem-sinal):not(.setor-meu) { opacity: .28; }
.filtro-explorar .mapa-svg .tem-sinal polygon { stroke: var(--link); stroke-width: 2.2; }
.sinal-marca { color: var(--link); font-weight: 700; }
.setor-pontos { display: block; width: 160px; height: 160px; margin: .3rem auto; }
.setor-pontos .ponto circle { stroke: var(--borda); stroke-width: 1.5; }
.ponto-vazio circle, .ponto-leg.ponto-vazio { fill: var(--superficie-2); }
.ponto-planeta circle, .ponto-leg.ponto-planeta { fill: var(--texto); }
.ponto-voce circle, .ponto-leg.ponto-voce { fill: var(--ambar); }
.ponto-sinal circle, .ponto-leg.ponto-sinal { fill: var(--link); }
.ponto-leg { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; border: 1px solid var(--borda); }

.mapa-area > * { min-width: 0; }
.botao:disabled, .botao[disabled] { opacity: .5; cursor: not-allowed; filter: saturate(.4); }
.setor-pontos .ponto-vazio circle { fill: transparent; stroke: var(--texto-suave); stroke-dasharray: 2 2; }
.ponto-leg.ponto-voce { background: var(--ambar); } .ponto-leg.ponto-planeta { background: var(--texto); }
.ponto-leg.ponto-sinal { background: var(--link); } .ponto-leg.ponto-vazio { background: transparent; border-style: dashed; }