:root {
  --fundo: #14160f; --painel: #1e2117; --painel2: #272b1d; --linha: #3a4029;
  --texto: #e9e5d2; --mudo: #a3a187; --destaque: #d9a441; --bom: #8fbf5a; --ruim: #e0694a;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { background: var(--fundo); }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; padding-bottom: 76px; }
main { max-width: 760px; margin: 0 auto; padding: 12px 12px 0; }
h2 { font: 700 14px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--destaque); margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
h2 small { color: var(--mudo); font-weight: 400; text-transform: none; letter-spacing: 0; }
h3 { font: 600 12px var(--mono); color: var(--mudo); text-transform: uppercase; letter-spacing: .05em; margin: 14px 0 6px; }
small { color: var(--mudo); font-weight: 400; }
.pos { color: var(--bom); } .neg { color: var(--ruim); }
.nota { color: var(--mudo); font-size: 13px; margin: 0 0 10px; }

#topo { position: sticky; top: 0; z-index: 500; background: #0f110bf2; border-bottom: 1px solid var(--linha); backdrop-filter: blur(6px); }
.topo { max-width: 760px; margin: 0 auto; padding: 8px 12px; }
.titulo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.titulo strong { font: 700 13px var(--mono); letter-spacing: .12em; color: var(--destaque); white-space: nowrap; }
.titulo span { font-size: 12px; color: var(--mudo); text-align: right; }
.chips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.chip { background: var(--painel); border: 1px solid var(--linha); border-radius: 8px; padding: 4px 6px; display: grid; grid-template-columns: auto 1fr; column-gap: 4px; align-items: center; min-width: 0; }
.chip.falta { border-color: var(--ruim); }
.chip-i { grid-row: span 2; font-size: 16px; }
.chip-v { font: 600 13px var(--mono); white-space: nowrap; overflow: hidden; }
.chip-v small { font-size: 10px; }
.chip-t { font: 11px var(--mono); color: var(--mudo); white-space: nowrap; }
@media (max-width: 560px) { .chips { grid-template-columns: repeat(3, 1fr); } }

.painel { background: var(--painel); border: 1px solid var(--linha); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.linha { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--linha); }
.linha-i { font-size: 22px; width: 30px; text-align: center; flex: none; }
.linha-c { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.linha-c span { color: var(--mudo); font-size: 12.5px; }

.btn { font: 600 13px var(--mono); color: #1a1608; background: var(--destaque); border: 0; border-radius: 8px; padding: 9px 12px; cursor: pointer; white-space: nowrap; min-height: 38px; }
.btn small { color: inherit; opacity: .75; }
.btn:hover:not(:disabled) { filter: brightness(1.1); }
.btn:disabled { background: var(--painel2); color: var(--mudo); cursor: not-allowed; }
.btn.sec { background: transparent; color: var(--texto); border: 1px solid var(--linha); }
.btn.sec:disabled { color: #6b6a5a; }
.btn.perigo { background: transparent; color: var(--ruim); border: 1px solid var(--ruim); }
.btn.grande { padding: 12px 18px; font-size: 14px; flex: 1; }
.link { background: none; border: 0; color: var(--destaque); font: inherit; font-size: 12.5px; cursor: pointer; padding: 0; text-decoration: underline; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.tag { font: 600 11px var(--mono); padding: 2px 7px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.tag.bom { color: var(--bom); } .tag.medio { color: var(--destaque); } .tag.ruim { color: var(--ruim); } .tag.base { color: var(--texto); }

.diario { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.diario li { padding: 5px 0; border-top: 1px solid var(--linha); color: var(--mudo); }
.diario li.bom { color: var(--texto); } .diario li.ruim { color: var(--ruim); }
.diario time { font: 11px var(--mono); color: var(--mudo); margin-right: 4px; }

#mapa { height: 300px; border: 1px solid var(--linha); border-radius: 12px; margin-bottom: 12px; overflow: hidden; background: #10130c; }
#mapa[hidden] { display: none; }
.radar { width: 100%; height: 100%; display: block; }
.radar-grade line { stroke: #2b3320; stroke-width: 1; }
.radar-grade text { fill: #5c6447; font: 9px var(--mono); }
.radar-ponto { cursor: pointer; }
.radar-nome { fill: #14160f; font: 700 11px var(--mono); pointer-events: none; }
.radar-base { fill: none; stroke: #fff; stroke-width: 1.5; stroke-dasharray: 3 3; }

.cidades { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 12px; }
.cidade { background: var(--painel); border: 1px solid var(--linha); border-radius: 12px; padding: 12px; }
.cidade.trancada { opacity: .6; }
.cidade header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
.abunds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 10px; margin-bottom: 10px; }
.abund { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.abund i { flex: 1; height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--bom) var(--v), var(--painel2) var(--v)); }
.barra { height: 7px; background: var(--painel2); border-radius: 4px; overflow: hidden; margin: 6px 0; }
.barra i { display: block; height: 100%; background: var(--destaque); transition: width 1s linear; }

.exp { border-top: 1px solid var(--linha); padding: 9px 0; }
.exp-t { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.exp-t span { color: var(--mudo); }
.opcs { display: flex; flex-wrap: wrap; gap: 6px; }
.opc { font: 13px system-ui, sans-serif; color: var(--texto); background: var(--painel2); border: 1px solid var(--linha); border-radius: 8px; padding: 8px 10px; cursor: pointer; min-height: 38px; }
.opc.sel { border-color: var(--destaque); background: #3a3115; }
.opc:disabled { opacity: .45; cursor: not-allowed; }
.prev { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-top: 14px; }
.prev div { background: var(--painel2); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; }
.prev strong { font: 600 14px var(--mono); }

.merc { border-top: 1px solid var(--linha); padding: 10px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.merc-n { display: flex; flex-direction: column; min-width: 180px; }
.merc-n span { color: var(--mudo); font-size: 12.5px; }
.merc-b { display: flex; gap: 6px; flex-wrap: wrap; }
.merc-b .btn { display: flex; flex-direction: column; align-items: center; padding: 5px 10px; line-height: 1.2; }

.album { display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 8px; }
.figurinha { background: var(--painel2); border: 1px dashed var(--linha); border-radius: 10px; padding: 10px 6px; text-align: center; display: flex; flex-direction: column; opacity: .6; }
.figurinha.tem { opacity: 1; border: 1px solid var(--destaque); }
.figurinha span { font-size: 24px; }
.caixa { width: 100%; margin-top: 12px; background: var(--fundo); color: var(--texto); border: 1px solid var(--linha); border-radius: 8px; padding: 8px; font: 11px var(--mono); }

#nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 600; display: flex; justify-content: center; background: #0f110bfa; border-top: 1px solid var(--linha); padding-bottom: env(safe-area-inset-bottom); }
.nav { flex: 1; max-width: 127px; background: none; border: 0; color: var(--mudo); font: 11px system-ui, sans-serif; padding: 8px 2px 9px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.nav span { font-size: 20px; position: relative; }
.nav i { position: absolute; top: -4px; right: -12px; background: var(--destaque); color: #1a1608; font: 700 10px var(--mono); border-radius: 999px; padding: 1px 5px; }
.nav.ativa { color: var(--destaque); }

.aviso { position: fixed; left: 50%; bottom: 86px; transform: translateX(-50%); z-index: 700; background: var(--texto); color: #14160f; font-weight: 600; font-size: 13.5px; padding: 9px 14px; border-radius: 10px; max-width: calc(100vw - 32px); box-shadow: 0 4px 18px #000a; }
.modal { position: fixed; inset: 0; z-index: 800; background: #000b; display: grid; place-items: center; padding: 16px; }
.modal-c { background: var(--painel); border: 1px solid var(--destaque); border-radius: 14px; padding: 18px; width: min(420px, 100%); display: flex; flex-direction: column; }
.ganhos { list-style: none; padding: 0; margin: 0 0 14px; }
.ganhos li { padding: 5px 0; border-top: 1px solid var(--linha); display: flex; justify-content: space-between; }

.objetivo { border-color: var(--destaque); }
.objetivo p { margin: 0; }

.cena { display: block; width: 100%; aspect-ratio: 480 / 270; image-rendering: pixelated; border: 1px solid var(--linha); border-radius: 12px; margin-bottom: 12px; background: #1d1a2b; }
.cena[hidden] { display: none; }
.criacao { width: min(460px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.criacao-topo { display: flex; gap: 14px; align-items: center; }
.retrato { width: 108px; height: 180px; image-rendering: pixelated; background: var(--painel2); border: 1px solid var(--linha); border-radius: 10px; flex: none; }
.criacao-campos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.criacao-campos label { font: 600 12px var(--mono); color: var(--mudo); text-transform: uppercase; }
.campo { width: 100%; background: var(--fundo); color: var(--texto); border: 1px solid var(--linha); border-radius: 8px; padding: 10px; font: 16px system-ui, sans-serif; }
.campo:focus { outline: 2px solid var(--destaque); }
.amostras { display: flex; flex-wrap: wrap; gap: 8px; }
.amostra { width: 36px; height: 36px; border-radius: 8px; border: 2px solid var(--linha); cursor: pointer; }
.amostra.sel { border-color: #fff; box-shadow: 0 0 0 2px var(--destaque); }

.avatar { width: 36px; height: 60px; image-rendering: pixelated; flex: none; margin: -6px 0; }