/* Atlas do Bronson Origin no site (ADR 00/D9): mesa de cartógrafo — mapa-múndi à
   esquerda, abas e fichas à direita; no celular empilha. Mesmo desenho do atlas do
   gerador, com as cores e as fontes do tema (pergaminho, ouro, madeira). Tudo fica
   dentro de .atlas para não mexer no resto do site. */
.atlas {
	--bg: #efe2c0; --panel: #f8f0da; --panel2: #eadbb3; --line: #c8ad74; --fg: #2e1f10; --muted: #6a5434;
	--accent: #8a2a17; --ink: #0d1310; --slot: #e1cd9c;
	--quest: #9a6b00; --grupo: #b4500f; --boss: #a3221a; --addon: #0f6f78; --mon: #3d6b2f; --vip: #6b37b0; --livre: #1f7a42; --mina: #7a4f24;
	--mark: #c63d2f; --start: #1f8a45; --obj: #b81fad;
	--f-display: "Cinzel", "Trajan Pro", Georgia, serif;
	--f-body: "EB Garamond", Garamond, Georgia, serif;
	--f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
	--radius: 6px;
	color: var(--fg); font: 17px/1.5 var(--f-body);
	border-top: 1px solid var(--ouro-escuro, #8a6a2f);
}
.atlas * { box-sizing: border-box }
.atlas [hidden] { display: none !important }
.atlas button { font: inherit }
.atlas .app { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: calc(100vh - 54px); min-height: 560px; background: var(--bg) }
.atlas header.topo { grid-column: 1 / -1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px 18px 0;
	border-bottom: 1px solid var(--line); background: linear-gradient(to bottom, #f8f0da, #efe2c0) }
.atlas .marca { display: flex; flex-direction: column; min-width: 0; padding-bottom: 8px }
.atlas .marca h1 { font: 900 1.45rem/1.05 var(--f-display); margin: 0; letter-spacing: .04em; color: #3a2410 }
.atlas .marca h1 span { color: var(--accent) }
.atlas .marca p { margin: 3px 0 0; color: var(--muted); font-size: .92rem }
.atlas .busca { flex: 1 1 240px; min-width: 0; padding-bottom: 8px }
.atlas .busca input { width: 100%; font: inherit; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fbf6e8; color: var(--fg) }
.atlas input:focus-visible, .atlas button:focus-visible, .atlas select:focus-visible, .atlas summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.atlas nav.abas { flex: 1 1 100%; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none }
.atlas .aba { font: 700 .9rem/1 var(--f-display); letter-spacing: .05em; padding: 11px 14px 10px; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0;
	background: none; color: var(--muted); cursor: pointer; display: inline-flex; gap: 7px; align-items: center; white-space: nowrap }
.atlas .aba:hover { color: var(--fg) }
.atlas .aba .n { font: 500 .72rem var(--f-mono); color: var(--muted) }
.atlas .aba[aria-selected="true"] { background: var(--bg); color: var(--fg); border-color: var(--line); margin-bottom: -1px }
.atlas .aba i { width: 10px; height: 10px; border-radius: 50%; background: var(--c) }
/* mapa */
.atlas .mapa-col { position: relative; min-width: 0; min-height: 0; background: var(--ink); overflow: hidden; border-right: 1px solid var(--line) }
.atlas .mapa { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab }
.atlas .mapa.arrasta { cursor: grabbing }
.atlas .mundo { position: absolute; left: 0; top: 0; transform-origin: 0 0 }
.atlas .mundo img { display: block; max-width: none; image-rendering: pixelated; user-select: none; -webkit-user-drag: none }
.atlas .pin { position: absolute; width: 0; height: 0 }
.atlas .pin button { position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #0d1310;
	transform: translate(-50%, -50%) scale(var(--ps, 1)); cursor: pointer; padding: 0; background: var(--c) }
.atlas .pin.losango button { border-radius: 3px; transform: translate(-50%, -50%) rotate(45deg) scale(var(--ps, 1)) }
.atlas .pin.area button { width: var(--d, 14px); height: var(--d, 14px); background: #3fae4f; border-color: #0d1310; opacity: .9 }
.atlas .pin.sel button { box-shadow: 0 0 0 4px rgba(255, 245, 210, .95), 0 0 0 7px var(--c) }
.atlas .mapa-ui { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 2 }
.atlas .mapa-ui button { width: 36px; height: 36px; border-radius: 4px; border: 1px solid #8a6a2f; background: linear-gradient(to bottom, #3a2614, #23160b); color: #ecd08a; font: 700 18px/1 var(--f-body); cursor: pointer }
.atlas .mapa-aviso { position: absolute; left: 10px; bottom: 10px; z-index: 2; background: rgba(22, 14, 7, .9); color: #e9dcbc; border: 1px solid #8a6a2f; border-radius: 4px; padding: 7px 10px; font-size: .9rem; max-width: calc(100% - 20px) }
.atlas .dica { position: absolute; z-index: 3; pointer-events: none; background: #f2e6c8; color: #2e1f10; border: 1px solid #8a6a2f; font: 500 .9rem/1.2 var(--f-body); padding: 4px 8px; border-radius: 4px; white-space: nowrap; transform: translate(-50%, -140%) }
/* painel */
.atlas .painel { min-width: 0; min-height: 0; overflow-y: auto }
.atlas .lista { padding: 14px 18px 40px; display: grid; gap: 10px }
.atlas .filtros { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.atlas .chip { font: 500 .9rem/1 var(--f-body); padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel2); color: var(--fg); cursor: pointer }
.atlas .chip[aria-pressed="true"] { background: #3a2614; color: #ecd08a; border-color: #3a2614 }
.atlas .filtros select { font: inherit; font-size: .9rem; padding: 6px 8px; border-radius: 4px; border: 1px solid var(--line); background: #fbf6e8; color: var(--fg) }
.atlas .card { text-align: left; font: inherit; color: inherit; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; cursor: pointer;
	display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; align-items: start; border-left: 4px solid var(--c); box-shadow: 0 1px 2px rgba(58, 36, 16, .12) }
.atlas .card.sem-fig { grid-template-columns: minmax(0, 1fr) }
.atlas .card:hover { border-color: var(--c); background: #fbf5e3 }
.atlas .card .txt { display: grid; gap: 5px; min-width: 0 }
.atlas .card h3 { margin: 0; font: 700 1.05rem/1.25 var(--f-display); letter-spacing: .02em; text-wrap: balance; color: #3a2410 }
.atlas .card p { margin: 0; color: var(--muted); font-size: .95rem }
.atlas .fig { background: var(--slot); border-radius: 4px; display: grid; place-items: center; padding: 2px }
/* boss andando com o nome e a barra de vida em cima, como no jogo */
.atlas .vivo { gap: 1px; padding: 6px 4px 4px; min-width: 104px; background: #27341f }
.atlas .vivo .nj { font: 700 11px/1.15 Verdana, Tahoma, "DejaVu Sans", sans-serif; color: #00bc00; white-space: nowrap;
	text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000, 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000 }
.atlas .vivo .hp { display: block; width: 27px; height: 4px; background: #00bc00; border: 1px solid #000; box-sizing: border-box; margin-bottom: 2px }
.atlas .vivo .anda { display: block; width: 96px; background: url(img/andando.png) no-repeat; image-rendering: pixelated;
	animation: atlas-andar var(--d) steps(var(--n)) infinite }
.atlas .vivo .anda.parado { animation: atlas-respira 1.6s ease-in-out infinite }
@keyframes atlas-andar { from { background-position-x: 0 } to { background-position-x: calc(var(--n) * -96px) } }
@keyframes atlas-respira { 50% { transform: translateY(-2px) } }
.atlas .tags { display: flex; flex-wrap: wrap; gap: 6px }
.atlas .tag { font: 500 .82rem/1 var(--f-body); padding: 4px 8px; border-radius: 4px; background: var(--panel2); border: 1px solid var(--line); white-space: nowrap }
.atlas .tag.ir { font-family: var(--f-mono); font-size: .76rem }
.atlas .tag.vip { color: var(--vip); border-color: var(--vip); font-weight: 700 }
.atlas .tag.livre { color: var(--livre); border-color: var(--livre); font-weight: 700 }
.atlas .tag.cat { color: var(--c); border-color: var(--c); font-weight: 700 }
.atlas .tag.nivel { font-weight: 700; background: #3a2614; color: #ecd08a; border-color: #3a2614 }
.atlas .secao-t { font: 700 1rem/1.2 var(--f-display); margin: 14px 0 0; color: #5f4a30; letter-spacing: .05em; display: flex; gap: 8px; align-items: baseline;
	border-bottom: 1px solid var(--line); padding-bottom: 4px }
.atlas .secao-t span { font: 500 .75rem var(--f-mono) }
.atlas .icones { display: flex; flex-wrap: wrap; gap: 4px }
.atlas .ico, .atlas .cri { display: inline-block; background-repeat: no-repeat; image-rendering: pixelated; flex: none }
.atlas .ico { background-image: url(img/itens.png) }
.atlas .cri { background-image: url(img/criaturas.png) }
/* monstro andando (img/andando_m.png, células de 64px): o atlas.js põe .on só no que está na tela */
.atlas .anda-m { background-image: url(img/andando_m.png) }
.atlas .anda-m.mexe.on { animation: atlas-andar-m var(--d) steps(var(--n)) infinite }
@keyframes atlas-andar-m { from { background-position-x: var(--x0) } to { background-position-x: var(--x1) } }
.atlas .slot { background: var(--slot); border-radius: 4px; padding: 2px; display: inline-grid; place-items: center }
.atlas .vazio { color: var(--muted); padding: 24px 4px }
/* ficha */
.atlas .ficha { padding: 14px 18px 60px; display: grid; gap: 16px }
.atlas .voltar { justify-self: start; font: 500 .95rem var(--f-body); background: var(--panel); border: 1px solid var(--line); color: var(--fg); border-radius: 999px; padding: 6px 14px; cursor: pointer }
.atlas .cab { display: flex; gap: 14px; align-items: center; min-width: 0; flex-wrap: wrap }
.atlas .cab > div { min-width: 0 }
.atlas .ficha h2 { margin: 0; font: 900 1.7rem/1.15 var(--f-display); letter-spacing: .03em; text-wrap: balance; color: #3a2410 }
.atlas .ficha .sub { color: var(--muted); margin: 4px 0 0 }
.atlas .caixa { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 8px; min-width: 0 }
.atlas .caixa h4 { margin: 0; font: 700 .78rem/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.atlas .caixa ul { margin: 0; padding-left: 1.1em; display: grid; gap: 3px }
.atlas .premios { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px }
.atlas .premio { display: flex; gap: 8px; align-items: center; min-width: 0; font-size: .95rem }
.atlas .premio span { min-width: 0 }
.atlas .perna { display: grid; gap: 12px; min-width: 0 }
.atlas .perna > h3 { margin: 8px 0 0; font: 700 1.2rem/1.2 var(--f-display); text-wrap: balance; color: #3a2410 }
.atlas .perna > h3 small { display: block; font: 500 .78rem/1.3 var(--f-body); color: var(--muted); letter-spacing: .08em; text-transform: uppercase }
.atlas ol.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.atlas ol.passos li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; line-height: 1.45 }
.atlas .num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 500 .8rem/1 var(--f-mono); background: var(--mark); color: #fff; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line) }
.atlas .num.ir { background: var(--start) }
.atlas .num.leve { background: transparent; color: var(--muted); border: 1.5px dashed var(--muted); box-shadow: none }
.atlas .num.fim { background: var(--obj) }
.atlas figure { margin: 0; min-width: 0 }
.atlas figure svg { display: block; width: 100%; height: auto; border-radius: 4px; background: #000; cursor: zoom-in; border: 1px solid #8a6a2f }
.atlas figcaption { font-size: .88rem; color: var(--muted); margin-top: 4px }
.atlas .zooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px }
.atlas .perigo { display: flex; flex-wrap: wrap; gap: 6px }
.atlas .erro { color: var(--boss) }
.atlas .coord { font: 400 .8rem var(--f-mono); color: var(--muted) }
.atlas details.guia { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px }
.atlas details.guia summary { cursor: pointer; font: 700 .95rem var(--f-display); letter-spacing: .03em; color: #3a2410 }
.atlas details.guia dl { margin: 10px 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 12px }
.atlas details.guia dd { margin: 0 }
/* monstros */
.atlas .grade-m { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px }
.atlas .mcard { text-align: left; font: inherit; color: inherit; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; cursor: pointer;
	display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 4px 10px; align-items: center; box-shadow: 0 1px 2px rgba(58, 36, 16, .12) }
.atlas .mcard:hover { border-color: var(--mon); background: #fbf5e3 }
.atlas .mcard h3 { margin: 0; font: 700 .98rem/1.2 var(--f-display); color: #3a2410 }
.atlas .mcard .st { font: 500 .78rem/1.3 var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums }
.atlas .mcard .icones { grid-column: 1 / -1 }
.atlas table.loot { width: 100%; border-collapse: collapse; font-size: .95rem }
.atlas table.loot td { padding: 4px 6px; border-bottom: 1px solid var(--line); vertical-align: middle }
.atlas table.loot td.ch { font: 500 .82rem var(--f-mono); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums }
.atlas .tabela { overflow-x: auto }
/* tabela do refiner: linha = faixa de club, coluna = nível; a coluna do club fica parada ao rolar para o lado */
.atlas table.refiner th, .atlas table.refiner td { padding: 3px 6px; font: 500 .78rem var(--f-mono); text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--line) }
.atlas table.refiner th:first-child { position: sticky; left: 0; background: var(--panel); text-align: left; font-weight: 700 }
.atlas table.refiner tr.sub td, .atlas table.refiner tr.sub th { color: var(--muted) }
.atlas .areas { display: grid; gap: 6px }
.atlas .area { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; background: var(--panel2); border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px }
.atlas .area button { font: 500 .85rem var(--f-body); border: 1px solid var(--line); background: var(--panel); color: var(--fg); border-radius: 999px; padding: 5px 10px; cursor: pointer; white-space: nowrap }
.atlas .elem { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.atlas .guia-miner { display: grid; gap: 8px; margin-top: 8px }
.atlas .guia-miner h4 { margin: 8px 0 0; font: 700 1rem/1.2 var(--f-display); color: #3a2410 }
.atlas .guia-miner p, .atlas .guia-miner ul { margin: 0 }
.atlas .guia-miner th { text-align: left; font: 700 .8rem var(--f-body); padding: 4px 6px; border-bottom: 1px solid var(--line) }
.atlas .mdrop { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 10px; align-items: start; border-top: 1px solid var(--line); padding-top: 10px }
.atlas a { color: var(--accent) }
.atlas .lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(8, 6, 3, .94); display: grid; grid-template-rows: auto minmax(0, 1fr);
	padding: calc(env(safe-area-inset-top, 0px) + 10px) 10px calc(env(safe-area-inset-bottom, 0px) + 10px) }
.atlas .lightbox .barra { display: flex; justify-content: space-between; align-items: center; color: #e9dcbc; gap: 10px; padding-bottom: 8px; font-family: var(--f-display) }
.atlas .lightbox .barra button { background: linear-gradient(to bottom, #3a2614, #23160b); color: #ecd08a; border: 1px solid #8a6a2f; border-radius: 4px; padding: 6px 14px; cursor: pointer }
.atlas .lightbox .vista { overflow: auto; min-height: 0 }
.atlas .lightbox svg { display: block; max-width: none; height: auto }
@media (max-width: 860px) {
	.atlas .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 45vh auto; height: auto; min-height: 0 }
	.atlas .mapa-col { border-right: 0; border-bottom: 1px solid var(--line); min-height: 260px }
	.atlas .painel { overflow: visible }
	.atlas .ficha h2 { font-size: 1.4rem }
}
@media (prefers-reduced-motion: reduce) { .atlas * { transition: none !important; animation: none !important } }