:root {
  --bg: #f3ead8;
  --papel: #fbf6ea;
  --tinta: #2b2118;
  --tinta-2: #6b5a48;
  --ouro: #a8832f;
  --ouro-claro: #e9d9b0;
  --borda: #dccbaa;
  --perigo: #a4412c;
  --ok: #4f7a3a;
  --agua: #7fa7b8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1d1915; --papel: #27221c; --tinta: #efe5d2; --tinta-2: #b3a48d;
    --ouro: #d4ae5c; --ouro-claro: #3d3323; --borda: #3e3529; --perigo: #e07a62; --ok: #8fbf72;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1d1915; --papel: #27221c; --tinta: #efe5d2; --tinta-2: #b3a48d;
  --ouro: #d4ae5c; --ouro-claro: #3d3323; --borda: #3e3529; --perigo: #e07a62; --ok: #8fbf72;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--tinta);
  font: 14px/1.45 Montserrat, system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
#app { max-width: 720px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; }
h1, h2, h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; margin: 0; }
h2 { font-size: 24px; margin: 18px 0 8px; }
h3 { font-size: 19px; }
button { font: inherit; color: inherit; cursor: pointer; }
.sub { color: var(--tinta-2); font-size: 12px; }

/* Topo */
#topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--bg); padding-block: 12px 8px; border-bottom: 1px solid var(--borda); }
#topo, #tela { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); }
.titulo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.titulo h1 { font-size: 26px; color: var(--ouro); }
.moedas { display: flex; gap: 12px; font-size: 13px; font-weight: 600; }
.recursos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.rec { background: var(--papel); border: 1px solid var(--borda); border-radius: 8px; padding: 5px 7px; min-width: 0; }
.rec .v { font-weight: 600; font-size: 13px; white-space: nowrap; }
.rec .barra { height: 3px; background: var(--borda); border-radius: 2px; margin: 4px 0 2px; overflow: hidden; }
.rec .barra i { display: block; height: 100%; background: var(--ouro); }
.rec .barra i.cheio { background: var(--perigo); }
.rec .p { font-size: 11px; color: var(--tinta-2); white-space: nowrap; }
.titulo .nome { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.titulo .nome h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha-obra { margin-top: 8px; }
.chip-obra { display: inline-flex; gap: 4px; align-items: center; border: 1px solid var(--ouro); background: var(--ouro-claro); color: var(--tinta); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chip-obra.livre { border-color: var(--borda); background: transparent; color: var(--tinta-2); font-weight: 500; }

/* Cidade */
.cena-wrap { margin-top: 12px; border-radius: 14px; overflow: hidden; border: 1px solid var(--borda); }
.cena { display: block; width: 100%; height: auto; }
.alvo { cursor: pointer; }
.alvo:hover > *, .alvo:focus-visible > * { filter: brightness(1.06); }
.alvo:focus-visible { outline: none; }
.obra-marca rect { fill: #2b2118; opacity: .85; }
.obra-marca text { fill: #fbf6ea; font: 600 12px Montserrat, sans-serif; text-anchor: middle; }
.rotulo-cena { fill: #4a3826; font: 700 14px Montserrat, sans-serif; text-anchor: middle; paint-order: stroke; stroke: rgba(251,246,234,.8); stroke-width: 3px; }
.dica { color: var(--tinta-2); font-size: 12px; text-align: center; margin: 10px 0 0; }

/* Painel de baixo */
#painel { position: fixed; inset: 0; z-index: 20; }
#painel .fundo { position: absolute; inset: 0; background: rgba(20,14,8,.35); }
.folha { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 560px; max-height: 80vh; overflow: auto;
  background: var(--papel); border-radius: 18px 18px 0 0; border: 1px solid var(--borda); border-bottom: 0;
  padding: 20px max(18px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
  box-shadow: 0 -8px 30px rgba(0,0,0,.18); animation: sobe .2s ease-out; }
@keyframes sobe { from { transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) { .folha, .toast { animation: none; } }
.folha .fechar { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--tinta-2); }
.folha-corpo { display: flex; flex-direction: column; gap: 10px; }
.folha-corpo h3 { font-size: 24px; padding-right: 28px; }
.folha-corpo p { margin: 0; }
.folha-corpo .nivel { font-family: Montserrat, sans-serif; font-size: 13px; font-weight: 600; color: var(--ouro); }
.efeitos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.efeito { border: 1px solid var(--borda); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.efeito span { font-size: 11px; color: var(--tinta-2); text-transform: uppercase; letter-spacing: .06em; }
.efeito strong { font-size: 13px; }
.efeito.prox { border-color: var(--ouro); background: var(--ouro-claro); }
.btn.largo { width: 100%; padding: 12px; font-size: 14px; }
.opcoes { display: flex; flex-direction: column; gap: 8px; }
.opcao { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; }
.opcao > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.opcao.bloqueada { opacity: .6; }
.selo { font-size: 11px; font-weight: 600; color: var(--tinta-2); border: 1px solid var(--borda); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }

/* Tela */
#tela { flex: 1; padding-block: 4px 96px; }
.caixa { background: var(--papel); border: 1px solid var(--borda); border-radius: 10px; padding: 12px; }
.fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.fila.vazia { color: var(--tinta-2); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.card { background: var(--papel); border: 1px solid var(--borda); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.card .cab { display: flex; justify-content: space-between; align-items: baseline; }
.card .nivel { font-size: 12px; font-weight: 600; color: var(--ouro); }
.custos { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; }
.custos .falta { color: var(--perigo); font-weight: 600; }
.btn { border: 1px solid var(--ouro); background: var(--ouro); color: #fff; border-radius: 8px; padding: 8px 12px; font-weight: 600; font-size: 13px; }
.btn.sec { background: transparent; color: var(--ouro); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.peq { padding: 5px 9px; font-size: 12px; }
.aviso { font-size: 12px; color: var(--perigo); }

/* Mapa */
.cab-mapa { display: flex; justify-content: space-between; align-items: center; }
.zoom { display: flex; gap: 6px; }
.zoom .btn { width: 34px; font-size: 16px; }
.mapa-wrap { overflow: auto; max-height: 70vh; border: 1px solid var(--borda); border-radius: 14px; background: #6f9fb7; }
.mapa-svg { display: block; height: auto; max-width: none; }
.regiao { fill: transparent; cursor: pointer; }
.regiao.sel { fill: rgba(255, 248, 225, .22); stroke: #fbf6ea; stroke-width: 1.5; stroke-dasharray: 4 3; }
.rotulo-regiao { fill: #5a4228; font: 700 italic 11px "Cormorant Garamond", Georgia, serif; text-anchor: middle; letter-spacing: .12em; text-transform: uppercase; pointer-events: none; opacity: .75; }
.rotulo-agua { fill: #e8f2f5; font: italic 600 14px "Cormorant Garamond", Georgia, serif; letter-spacing: .25em; pointer-events: none; opacity: .9; }
.rotulo-agua.peq { font-size: 8px; letter-spacing: .15em; fill: #3f7a90; }
.rotulo-estrada { fill: #7a5530; font: italic 600 7px "Cormorant Garamond", Georgia, serif; letter-spacing: .1em; }
.rosa text { fill: #6b4a2c; font: 700 7px Montserrat, sans-serif; }
.estrada-borda { fill: none; stroke: #8a6a44; stroke-width: 3.4; stroke-linecap: round; opacity: .55; }
.estrada { fill: none; stroke: #f4e7c6; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 2.5 2.5; }
.estrada.famosa { stroke: #fff4d6; stroke-width: 2.2; }
.rota-brilho { fill: none; stroke: #ffd36b; stroke-width: 7; opacity: .8; }
.rota { fill: none; stroke: #a8832f; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 5 3; animation: marcha 1s linear infinite; }
@keyframes marcha { to { stroke-dashoffset: -8; } }
.cidade-mapa { cursor: pointer; }
.cidade-mapa circle.toque { fill: transparent; stroke: none; }
.medalha { fill: #6b4a2c; stroke: #fbf6ea; stroke-width: 1.6; }
.medalha.rei { fill: #a8832f; stroke-width: 2; }
.medalha.minha { fill: #b5533c; }
.cidade-mapa text { fill: #2b2118; font: 600 7.5px Montserrat, sans-serif; paint-order: stroke; stroke: rgba(251,246,234,.92); stroke-width: 2.6px; pointer-events: none; }
.cidade-mapa.rei text { font-weight: 700; font-size: 9px; }
.cidade-mapa.minha text { font-size: 9px; font-weight: 700; fill: #8a3a26; }
.cidade-mapa.sel .medalha { stroke: #ffd36b; stroke-width: 2.6; }
.pulso { fill: none; stroke: #b5533c; stroke-width: 2; animation: pulso 2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulso { from { transform: scale(1); opacity: .7; } to { transform: scale(2.2); opacity: 0; } }
.caravana-mapa text { font-size: 8px; }
.barco { animation: balanca 3s ease-in-out infinite; }
@keyframes balanca { 50% { transform: translateY(1.5px); } }
.ondas { animation: ondas 6s ease-in-out infinite; }
@keyframes ondas { 50% { transform: translateX(3px); } }

/* Animações da cidade */
.bandeira { animation: tremula 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: left center; }
@keyframes tremula { 50% { transform: skewY(-6deg) scaleX(.9); } }
.fumaca circle { fill: #f3ece0; opacity: 0; animation: fumaca 4s ease-out infinite; transform-box: fill-box; }
.fumaca circle + circle { animation-delay: 2s; }
@keyframes fumaca { 0% { opacity: .7; transform: translateY(0) scale(.6); } 100% { opacity: 0; transform: translateY(-26px) scale(1.6); } }
.trigo { animation: vento 3s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom; }
@keyframes vento { 50% { transform: skewX(-4deg); } }
.selo-nivel { cursor: pointer; }
.selo-nivel circle { fill: #a8832f; stroke: #fff6dc; stroke-width: 2; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.35)); }
.selo-nivel text { fill: #fff; font: 700 14px Montserrat, sans-serif; text-anchor: middle; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .bandeira, .fumaca circle, .trigo, .pulso, .barco, .ondas, .rota { animation: none; }
  .gente { display: none; }
}
.info-tile { margin-top: 10px; }

/* Mercado */
.ofertas { display: flex; flex-direction: column; gap: 8px; }
.oferta { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.troca { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.troca label { font-size: 12px; color: var(--tinta-2); display: flex; flex-direction: column; gap: 4px; }
select, input { font: inherit; color: var(--tinta); background: var(--bg); border: 1px solid var(--borda); border-radius: 8px; padding: 7px 8px; width: 100%; }
.linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Início */
.inicio { padding-top: 12px; }
.povos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 10px; }
.povo { text-align: left; background: var(--papel); border: 1px solid var(--borda); border-radius: 10px; padding: 14px; }
.povo.sel { border: 2px solid var(--ouro); padding: 13px; }
.povo .lema { font-size: 12px; font-weight: 600; color: var(--ouro); text-transform: uppercase; letter-spacing: .06em; }

/* Abas */
#abas { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; background: var(--papel); border-top: 1px solid var(--borda); padding-bottom: env(safe-area-inset-bottom); z-index: 6; }
#abas button { flex: 1; max-width: 180px; border: 0; background: none; padding: 8px 0 10px; font-size: 11px; color: var(--tinta-2); display: flex; flex-direction: column; align-items: center; gap: 2px; }
#abas button span { font-size: 19px; }
#abas button.ativa { color: var(--ouro); font-weight: 600; }
#app.sem-abas #abas { display: none; }

#toasts { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 10; width: min(92vw, 420px); }
.toast { background: var(--tinta); color: var(--bg); padding: 10px 14px; border-radius: 10px; font-size: 13px; box-shadow: 0 4px 14px rgba(0,0,0,.2); animation: entra .25s ease-out; }
@keyframes entra { from { opacity: 0; transform: translateY(-6px); } }

/* Telas 3D */
.vista3d { position: relative; margin-top: 12px; height: min(68vh, 620px); min-height: 380px; border-radius: 16px; overflow: hidden; border: 1px solid var(--borda); background: #cfe3ea; touch-action: none; user-select: none; -webkit-user-select: none; }
.vista3d canvas { display: block; cursor: grab; }
.vista3d canvas:active { cursor: grabbing; }
.camada3d { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rot3d { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform; }
.rot3d.selo { pointer-events: auto; cursor: pointer; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; display: grid; place-items: center;
  background: #a8832f; color: #fff; font: 700 13px Montserrat, sans-serif; border: 2px solid #fff6dc; box-shadow: 0 2px 5px rgba(0,0,0,.3); }
.rot3d.mais { pointer-events: auto; cursor: pointer; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(251,246,234,.75); color: #a8832f; font: 700 16px/1 Montserrat, sans-serif; border: 1.5px solid rgba(168,131,47,.8); }
.rot3d.obra { background: rgba(43,33,24,.88); color: #fbf6ea; font: 600 12px Montserrat, sans-serif; padding: 4px 10px; border-radius: 12px; font-variant-numeric: tabular-nums; }
.rot3d.fumaca { width: 14px; height: 14px; border-radius: 50%; background: #f3ece0; filter: blur(1px); }
.rot3d.lugar { pointer-events: auto; cursor: pointer; font: 700 11px Montserrat, sans-serif; color: #2b2118; background: rgba(251,246,234,.88); padding: 2px 7px; border-radius: 8px; border: 1px solid rgba(107,74,44,.35); }
.rot3d.lugar.rei { background: #a8832f; color: #fff; border-color: #fff6dc; font-size: 12px; }
.rot3d.minha { pointer-events: auto; cursor: pointer; font: 700 12px Montserrat, sans-serif; color: #fff; background: #b5533c; padding: 3px 9px; border-radius: 9px; border: 2px solid #fff6dc; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.rot3d.jogador { pointer-events: auto; cursor: pointer; font: 600 10px Montserrat, sans-serif; color: #2b2118; background: rgba(255,255,255,.75); padding: 1px 6px; border-radius: 7px; display: flex; align-items: center; gap: 4px; }
.rot3d.jogador i { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }
.rot3d.regiao { pointer-events: auto; cursor: pointer; font: 700 italic 17px "Cormorant Garamond", Georgia, serif; color: #4a3826; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 0 6px rgba(251,246,234,.95), 0 0 2px rgba(251,246,234,.95); }
.rot3d.caravana { font-size: 18px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.dominio { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--borda); border-radius: 10px; padding: 10px; font-size: 12px; }
.barra-dom { display: grid; grid-template-columns: 1fr 90px 28px; align-items: center; gap: 8px; }
.barra-dom i { height: 6px; border-radius: 3px; background: var(--ouro); display: block; }
.barra-dom b { text-align: right; font-variant-numeric: tabular-nums; }
.cor-alianca { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }

/* Herói */
.heroi-topo { display: grid; grid-template-columns: 170px 1fr; gap: 14px; align-items: center; margin-top: 12px; }
.heroi-topo.criar { grid-template-columns: 1fr; }
.vista-avatar { height: 210px; border-radius: 16px; overflow: hidden; border: 1px solid var(--borda); touch-action: pan-y;
  background: radial-gradient(circle at 50% 35%, #f4e2b8 0%, #d9b97f 55%, #a8834f 100%); }
.vista-avatar.grande { height: 280px; }
.vista-avatar canvas { display: block; cursor: grab; }
.heroi-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.heroi-info h2 { margin: 0; font-size: 30px; line-height: 1.05; overflow-wrap: anywhere; }
.titulo-heroi { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ouro); }
.barra-h { display: grid; grid-template-columns: 74px 1fr auto; gap: 8px; align-items: center; font-size: 11px; color: var(--tinta-2); }
.barra-h > div { height: 7px; border-radius: 4px; background: var(--borda); overflow: hidden; }
.barra-h i { display: block; height: 100%; background: var(--ouro); }
.barra-h.vida i { background: #b5533c; }
.barra-h b { color: var(--tinta); font-variant-numeric: tabular-nums; }
.status-heroi { font-size: 12px; font-weight: 600; color: var(--tinta); background: var(--ouro-claro); border-radius: 8px; padding: 5px 9px; width: fit-content; font-variant-numeric: tabular-nums; }
.seg { display: flex; gap: 4px; overflow-x: auto; margin: 16px 0 12px; padding-bottom: 2px; scrollbar-width: none; }
.seg button { flex: none; border: 1px solid var(--borda); background: var(--papel); border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.seg button.ativo { background: var(--ouro); border-color: var(--ouro); color: #fff; }
#tela .caixa + .caixa { margin-top: 10px; }
.caixa.alerta { border-color: #b5533c; background: rgba(181,83,60,.08); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.pontos { font-size: 12px; font-weight: 700; color: var(--ouro); }
.atributo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.atributo:last-of-type { border-bottom: 0; }
.contador { display: flex; align-items: center; gap: 8px; }
.contador button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--ouro); background: transparent; color: var(--ouro); font-size: 17px; font-weight: 700; line-height: 1; }
.contador button:disabled { opacity: .3; }
.contador b { min-width: 22px; text-align: center; font-size: 16px; font-variant-numeric: tabular-nums; }
.chip { border: 1px solid var(--borda); background: var(--papel); border-radius: 999px; padding: 6px 11px; font-size: 12px; font-weight: 600; color: var(--tinta-2); }
.chip.ativo { border-color: var(--ouro); background: var(--ouro-claro); color: var(--tinta); }
.aventuras { display: flex; flex-direction: column; gap: 10px; }
.aventura { display: flex; flex-direction: column; gap: 6px; }
.aventura p { margin: 0; }
.selo-dif { font-size: 11px; font-weight: 700; color: var(--ok); border: 1px solid currentColor; border-radius: 999px; padding: 2px 8px; }
.aventura.dificil .selo-dif { color: #b5533c; }
.sub-titulo { font-family: Montserrat, sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); margin: 18px 0 8px; }
.relatorio { border-left: 3px solid var(--ok); padding: 6px 10px; margin-bottom: 6px; background: var(--papel); border-radius: 0 8px 8px 0; }
.relatorio.ruim { border-left-color: #b5533c; }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.slot { border: 1px dashed var(--borda); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 4px; min-height: 92px; min-width: 0; }
.slot strong { font-size: 13px; overflow-wrap: anywhere; }
.slot.cheio { border-style: solid; border-color: var(--rar); background: var(--papel); box-shadow: inset 3px 0 0 var(--rar); }
.slot .btn { margin-top: auto; align-self: flex-start; }
.item { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--borda); border-left: 4px solid var(--rar); border-radius: 10px; padding: 10px 12px; background: var(--papel); margin-bottom: 8px; }
.item > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.item .rar { font-size: 11px; font-weight: 700; color: var(--rar); }
.acoes-item, .lance { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; flex: none; }
.lance b { font-size: 15px; }
.aparencia { display: flex; flex-direction: column; gap: 14px; }
.rotulo-ap { display: block; font-size: 12px; font-weight: 600; color: var(--tinta-2); margin-bottom: 6px; }
.aparencia .linha { gap: 6px; }
.cores { display: flex; gap: 8px; margin-top: 8px; }
.cor { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--papel); box-shadow: 0 0 0 1px var(--borda); }
.cor.ativo { box-shadow: 0 0 0 2px var(--ouro); }
.rot3d.heroi-rot { pointer-events: auto; cursor: pointer; font: 700 11px Montserrat, sans-serif; color: #fff; background: rgba(168,131,47,.95); padding: 2px 8px; border-radius: 8px; border: 1.5px solid #fff6dc; }
.rot3d.caravana.heroi-rot { font-size: 11px; }
@media (max-width: 420px) {
  .heroi-topo { grid-template-columns: 130px 1fr; gap: 10px; }
  .vista-avatar { height: 170px; }
  .heroi-info h2 { font-size: 24px; }
  .slots { grid-template-columns: repeat(2, 1fr); }
}

.vista-wrap { position: relative; }
.btn-niveis { position: absolute; top: 22px; right: 10px; border: 1px solid rgba(168,131,47,.6); background: rgba(251,246,234,.88); color: var(--tinta); border-radius: 999px; padding: 6px 12px; font: 600 12px Montserrat, sans-serif; backdrop-filter: blur(4px); }
.btn-niveis.ativo { background: var(--ouro); color: #fff; border-color: var(--ouro); }
.rot3d.selo { min-width: 0; padding: 0 9px; font-size: 11px; }

/* Exército */
.painel-numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 2px; }
.painel-numeros > div { background: var(--papel); border: 1px solid var(--borda); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.painel-numeros span { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-2); }
.painel-numeros b { font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.painel-numeros small { font-size: 10px; color: var(--tinta-2); font-weight: 600; }
.neg { color: var(--perigo) !important; }
.unidade { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: var(--papel); border: 1px solid var(--borda); border-radius: 10px; margin-bottom: 8px; }
.caixa .unidade { border: 0; padding: 0; margin: 0 0 6px; background: none; }
.u-ico { font-size: 24px; width: 34px; text-align: center; flex: none; }
.u-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.u-stats { display: flex; gap: 10px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.u-qtd { text-align: right; flex: none; } .u-qtd b { font-size: 20px; display: block; }
.caixa.treino { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.treino-acoes input { width: 80px; flex: none; }
.fila-treino { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--borda); font-size: 13px; }
.fila-treino:last-child { border-bottom: 0; }
.caixa.alvo { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.caixa.mov { margin-bottom: 8px; } .caixa.mov.perigo { border-color: var(--perigo); }
.escolha { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--borda); font-size: 13px; }
.escolha input[type=number] { width: 90px; flex: none; }
.escolha input[type=checkbox] { width: 22px; height: 22px; flex: none; accent-color: var(--ouro); }
.engrenagem { border: 0; background: none; font-size: 17px; padding: 0 0 0 4px; line-height: 1; }
.rot3d.acamp { pointer-events: auto; cursor: pointer; font: 700 10px Montserrat, sans-serif; color: #fff; background: rgba(143,47,42,.92); padding: 2px 7px; border-radius: 7px; }
@media (max-width: 420px) { .painel-numeros b { font-size: 14px; } }

/* Templo */
#abas button { font-size: 10px; }
.vista-templo { height: min(46vh, 380px); min-height: 260px; border-radius: 16px; overflow: hidden; border: 1px solid var(--borda); margin-bottom: 10px; touch-action: pan-y;
  background: linear-gradient(180deg, #cfe2ea 0%, #efe2c4 70%, #e6d3a6 100%); }
.vista-templo canvas { display: block; cursor: grab; }
.estagios { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 10px; }
.estagio { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 9.5px; line-height: 1.2; color: var(--tinta-2); }
.estagio b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--borda); background: var(--papel); font-size: 12px; }
.estagio.feito b { background: var(--ouro); border-color: var(--ouro); color: #fff; }
.estagio.atual b { border-color: var(--ouro); color: var(--ouro); box-shadow: 0 0 0 3px var(--ouro-claro); }
.estagio.atual { color: var(--tinta); font-weight: 600; }
.materiais { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.materiais > div { background: var(--papel); border: 1px solid var(--borda); border-radius: 10px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
.materiais span { font-size: 18px; } .materiais b { font-size: 16px; font-variant-numeric: tabular-nums; }
.materiais small { font-size: 10px; color: var(--tinta-2); text-align: center; }
.caixa.encomenda { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.caixa.fim { border-color: var(--ouro); background: var(--ouro-claro); display: flex; flex-direction: column; gap: 6px; }
.caixa.ofir { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.caixa.ofir p { margin: 0; }
.rank { display: grid; grid-template-columns: 22px 10px 1fr 70px 56px; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--borda); font-size: 13px; }
.rank > i { width: 10px; height: 10px; border-radius: 3px; }
.rank b { color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.rank strong { text-align: right; font-variant-numeric: tabular-nums; }
.rank-barra { height: 6px; background: var(--borda); border-radius: 3px; overflow: hidden; }
.rank-barra i { display: block; height: 100%; }

/* Aliança */
.emblema { width: 42px; height: 48px; flex: none; background: var(--cor); clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); display: grid; place-items: center; padding-bottom: 8px; }
.emblema span { color: #fff; font: 700 11px Montserrat, sans-serif; letter-spacing: .06em; }
.emblema.grande { width: 64px; height: 74px; } .emblema.grande span { font-size: 15px; }
.al-topo { display: flex; gap: 14px; align-items: center; margin-top: 14px; }
.al-topo h2 { margin: 0 0 2px; }
.caixa.al-lista { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.al-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.caixa.fundar { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.mural { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; padding: 4px 2px 8px; }
.msg { align-self: flex-start; max-width: 84%; background: var(--papel); border: 1px solid var(--borda); border-radius: 12px 12px 12px 4px; padding: 7px 10px; font-size: 13px; }
.msg.minha { align-self: flex-end; background: var(--ouro-claro); border-color: var(--ouro); border-radius: 12px 12px 4px 12px; }
.msg .de { font-size: 11px; font-weight: 700; color: var(--tinta-2); margin-bottom: 2px; }
.enviar-msg { flex-wrap: nowrap; margin-top: 8px; } .enviar-msg input { flex: 1; }
.membro { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--borda); }
.membro.eu { background: var(--ouro-claro); margin: 0 -8px; padding: 9px 8px; border-radius: 8px; }
.caixa.ajuda { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } .caixa.ajuda p { margin: 0; }
.caixa.pedido, .caixa.tratado { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.rank.minha { background: var(--ouro-claro); border-radius: 8px; padding-left: 6px; padding-right: 6px; font-weight: 700; }

/* Servidor */
.login { max-width: 520px; margin: 0 auto; }
.login-marca { text-align: center; margin: 18px 0 6px; } .login-marca h2 { font-size: 44px; color: var(--ouro); margin: 0; }
.login-caixa { display: flex; flex-direction: column; gap: 10px; }
.msg-sistema { align-self: center; font-size: 11px; color: var(--tinta-2); font-style: italic; }
.ponto-on { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--borda); vertical-align: 1px; }
.ponto-on.on { background: #4f9a4a; box-shadow: 0 0 0 3px rgba(79,154,74,.2); }

/* Tarefas */
.guia { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: var(--papel); border: 1px solid var(--borda); }
.guia.pronta { border-color: var(--ouro); background: var(--ouro-claro); animation: brilho 2s ease-in-out infinite; }
@keyframes brilho { 50% { box-shadow: 0 0 0 4px rgba(201,162,39,.18); } }
.guia-ico { font-size: 26px; flex: none; }
.guia-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.guia-txt strong { font-size: 14px; line-height: 1.25; }
.guia-cap { font-size: 10px; font-weight: 700; color: var(--ouro); text-transform: uppercase; letter-spacing: .08em; }
.guia-prog { display: flex; align-items: center; gap: 8px; }
.tp-barra { flex: 1; height: 6px; border-radius: 3px; background: var(--borda); overflow: hidden; max-width: 220px; }
.tp-barra i { display: block; height: 100%; background: var(--ouro); }
.tp-num { font-size: 11px; font-weight: 700; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.tp-premio { font-size: 12px; font-weight: 600; color: var(--tinta); }
.capitulo { border: 1px solid var(--borda); border-radius: 12px; margin-bottom: 8px; background: var(--papel); overflow: hidden; }
.capitulo summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px; cursor: pointer; }
.capitulo summary::-webkit-details-marker { display: none; }
.cap-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--ouro); color: var(--ouro); font-weight: 700; font-size: 12px; flex: none; }
.capitulo.completo .cap-num { background: var(--ouro); color: #fff; }
.cap-tit { flex: 1; font-family: "Cormorant Garamond", Georgia, serif; font-size: 19px; font-weight: 700; }
.cap-cont { font-size: 12px; font-weight: 700; color: var(--tinta-2); }
.capitulo > .tarefa, .capitulo > p { margin: 0 12px 10px; }
.cap-bonus { font-weight: 600; }
.tarefa { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; border: 1px solid var(--borda); margin-bottom: 8px; background: var(--bg); }
.tarefa.pronta { border-color: var(--ouro); background: var(--ouro-claro); }
.tarefa.feita { opacity: .55; }
.tarefa-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#btn-tarefas { position: fixed; right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(78px + env(safe-area-inset-bottom, 0px)); z-index: 15;
  width: 52px; height: 52px; border-radius: 50%; border: 2px solid #fff6dc; background: var(--ouro); font-size: 24px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
#btn-tarefas.chamando { animation: chamar 1.6s ease-in-out infinite; }
@keyframes chamar { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1) rotate(-6deg); } }
.contador-tf { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; border-radius: 10px; background: #b5533c; color: #fff; font: 700 11px/20px Montserrat, sans-serif; padding: 0 5px; border: 2px solid #fff6dc; }
.festa { position: fixed; inset: 0; z-index: 30; pointer-events: none; display: grid; place-items: center; }
.festa-caixa { background: var(--papel); border: 2px solid var(--ouro); border-radius: 16px; padding: 16px 22px; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: 0 10px 40px rgba(0,0,0,.25); animation: festa 1.8s ease-out forwards; text-align: center; max-width: 86vw; }
.festa-ico { font-size: 34px; }
.festa i { position: absolute; left: 50%; top: 50%; width: 9px; height: 13px; border-radius: 2px; animation: confete 1.4s ease-out forwards; }
@keyframes festa { 0% { transform: scale(.6); opacity: 0; } 15% { transform: scale(1.05); opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(-30px); opacity: 0; } }
@keyframes confete { to { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .guia.pronta, #btn-tarefas.chamando, .festa-caixa, .festa i { animation: none; } }

.rot3d.oasis { pointer-events: auto; cursor: pointer; font: 700 10px Montserrat, sans-serif; color: #24493a; background: rgba(233,243,226,.92); padding: 2px 7px; border-radius: 7px; border: 1px solid rgba(47,107,74,.35); }
.rot3d.oasis.meu { background: #c9a227; color: #fff; border-color: #fff6dc; }
.selo.ok { color: var(--ok); border-color: var(--ok); }
.ok-txt { color: var(--ok); font-weight: 600; }

/* Cidades */
.trocar-cidade { border: 0; background: none; padding: 0; display: flex; align-items: baseline; gap: 6px; text-align: left; color: inherit; cursor: pointer; flex-wrap: wrap; }
.trocar-cidade .seta { color: var(--ouro); font-size: 14px; }
.caixa.cidade-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.caixa.cidade-item.atual { border-color: var(--ouro); background: var(--ouro-claro); }
.cidade-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.selo.perigo { color: var(--perigo); border-color: var(--perigo); }
.chip-obra.perigo { border-color: var(--perigo); background: rgba(164,65,44,.1); color: var(--perigo); margin-left: 6px; }
.caixa.expansao { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.caixa.expansao p { margin: 0; }
.passos { margin: 0; padding-left: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.rot3d.minha.outra { background: #8a5a3a; font-size: 10px; }

/* Fila de obras e notificações */
.linha-obra { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.linha-obra .chip-obra { flex: none; }
.obra-linha { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--borda); border-radius: 10px; margin-bottom: 8px; background: var(--bg); }
.obra-linha.vazia { border-style: dashed; justify-content: center; }
.obra-linha.compra { border-color: var(--ouro); background: var(--ouro-claro); }
.sino { position: relative; }
.contador-sino { position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; border-radius: 8px; background: #b5533c; color: #fff; font: 700 9px/16px Montserrat, sans-serif; padding: 0 4px; text-align: center; }
.notifs { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.notif { display: flex; gap: 10px; align-items: flex-start; text-align: left; border: 1px solid var(--borda); background: var(--bg); border-radius: 10px; padding: 9px 10px; font-size: 13px; }
.notif.nova { border-color: var(--ouro); background: var(--ouro-claro); }
.notif-ico { font-size: 18px; flex: none; }
.notif-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-cfg { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }