/* =====================================================================
   MAPA DO MUNDO E CARTÃO PÓS-CHEFE (opção B do fluxo de mapas, 28/09)
   ---------------------------------------------------------------------
   A lista de áreas (select) continua existindo para o jogo e o Editor, mas
   quem viaja é o Mapa do Mundo. Nenhuma regra mora aqui: o que cada região
   mostra vem de estadoDaRegiao() no game.js.
   ===================================================================== */
.battle-area-selector select.area-select-da-lista{display:none!important}
.mundo-button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-width:0;height:38px;padding:4px 12px;border:1px solid #6a5226;border-radius:9px;background:linear-gradient(180deg,#2b2213,#171209);color:#f3d58a;font-size:calc(12px * var(--text-scale, 1));font-weight:900;letter-spacing:.6px;cursor:var(--cur-mao,pointer)}
.mundo-button:hover{border-color:#b98d3a;background:linear-gradient(180deg,#3a2d16,#1d160b)}
.mundo-button-icone,.mundo-titulo-icone{display:inline-grid;place-items:center;width:24px;height:24px;font-size:calc(18px * var(--text-scale, 1))}
.mundo-button-icone img,.mundo-titulo-icone img,.pos-chefe-card [data-icone] img,.mundo-selo img{width:100%;height:100%;image-rendering:pixelated;object-fit:contain}

/* ---- o mapa ---- */
.mundo-card{width:min(1180px,100%);max-height:92vh;display:flex;flex-direction:column;padding:18px 20px;background:radial-gradient(circle at 50% 0,#2a2215 0,#141109 55%,#0d0b07 100%);border-color:#5a4520}
.mundo-card h2{display:flex;align-items:center;gap:8px;color:#f3d58a;letter-spacing:1px}
/* Celular estreito com letra grande: o título fica em UMA linha (antes quebrava "MAPA DO / MUNDO", foto do autor 06/10). */
@media (max-width:480px){#mundoModal .modal-title-row h2#mundoTitulo{white-space:nowrap;font-size:min(calc(22px * var(--text-scale, 1)),5vw)!important}.mundo-card h2 .mundo-titulo-icone{flex:none}.mundo-card .modal-title-row>div{min-width:0}}
.mundo-titulo-icone{width:30px;height:30px}
#mundoResumo{color:#c7b58c}
/* 04/11 (autor: "fica um pouco lagada, talvez por conta da arena rodando no fundo?"): com o Mapa aberto o jogo de trás
   (arena, barras, botões) seguia sendo montado e pintado a cada quadro. Escondido (visibility, o layout fica igual), rolar o
   Mapa foi de ~15 para ~45 quadros/s com a CPU 4x mais lenta. A horda segue lutando e pagando (o caminho da janela aberta). */
html.col-com-mundo #gameShell{visibility:hidden}   /* classe mantida por src/ui/estado-da-pagina.js (nada de :has no <html>) */
.mundo-regioes{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;padding:2px 4px 8px}
.mundo-grupo{grid-column:1/-1;margin:8px 0 0;color:#e9c46a;font-size:calc(11px * var(--text-scale, 1));font-weight:900;letter-spacing:1.2px;border-bottom:1px solid #4a3a1c;padding-bottom:4px}
/* REINOS (27/10): o título do grupo leva o Eco e as setas para trocar de Eco. */
.mundo-grupo-reinos{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;color:#d9c2ff;border-bottom-color:#4b3a6e}
.mundo-eco{display:inline-flex;align-items:center;gap:6px;letter-spacing:.6px}
.mundo-eco b{color:#f1e6ff;white-space:nowrap}
.mundo-eco-seta{min-width:30px;min-height:30px;border:1px solid #6b55a0;border-radius:6px;background:#211a33;color:#e8dcff;font-size:calc(12px * var(--text-scale, 1));cursor:var(--cur-mao,pointer)}
.mundo-eco-seta:disabled{opacity:.35;cursor:var(--cur-seta,default)}
.mundo-regiao{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:112px;padding:0;border:1px solid #3b3222;border-radius:10px;overflow:hidden;background:#12100b;color:#f2ead6;text-align:left;cursor:var(--cur-mao,pointer)}
.mundo-regiao img.mundo-cena{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.95)}
.mundo-regiao::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.82) 100%);pointer-events:none}
.mundo-regiao .mundo-texto{position:relative;z-index:1;display:grid;gap:2px;padding:7px 9px}
.mundo-regiao b{font-size:calc(12px * var(--text-scale, 1));font-weight:900;text-shadow:0 1px 2px #000}
.mundo-regiao small{color:#d8ccb0;font-size:calc(10px * var(--text-scale, 1));text-shadow:0 1px 2px #000}
.mundo-regiao .mundo-selo{position:absolute;z-index:1;top:6px;right:6px;display:flex;align-items:center;gap:4px;padding:2px 7px;border-radius:999px;background:rgba(10,8,4,.82);border:1px solid #5a4520;color:#f3d58a;font-size:calc(9px * var(--text-scale, 1));font-weight:900;letter-spacing:.4px}
.mundo-regiao .mundo-selo i{display:inline-grid;width:14px;height:14px;place-items:center;font-style:normal}
/* JOGANDO NO MAPA (17/10, SQL 1875): etiqueta verde "N jogando" embaixo do nome do mapa (src/online/mapa-jogadores-online.js). */
.mundo-regiao .mundo-gente{justify-self:start;display:inline-flex;align-items:center;gap:4px;margin-top:2px;padding:2px 7px 2px 5px;border-radius:999px;background:rgba(10,8,4,.82);border:1px solid #2f6a3a;color:#bff0b0;font-size:calc(9px * var(--text-scale, 1));font-weight:900;letter-spacing:.3px;line-height:1.2;white-space:nowrap;max-width:100%}
.mundo-regiao .mundo-gente::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:#5be36a;box-shadow:0 0 6px #5be36a}
.mundo-regiao .mundo-gente svg{flex:none;width:11px;height:11px;fill:#bff0b0}
/* MAPA FÁCIL DEMAIS (17/10 noite, opção G): "Rende 59% (fácil para você)" no cartão do mapa do modo. */
.mundo-regiao small.mundo-rende{color:#ffcf7a;font-weight:800}
.mundo-regiao:hover:not(:disabled){border-color:#c9a14a;transform:translateY(-1px)}
.mundo-regiao.aqui{border:2px solid #f0c96d;box-shadow:0 0 0 2px rgba(240,201,109,.25),0 0 18px rgba(240,201,109,.25)}
.mundo-regiao.aqui .mundo-selo{background:#f0c96d;color:#1b1406;border-color:#f0c96d}
.mundo-regiao.vencida .mundo-selo{color:#b9e27a;border-color:#4d6a2a}
.mundo-regiao.fechada,.mundo-regiao.requisito{cursor:not-allowed}
.mundo-regiao.fechada img.mundo-cena{filter:grayscale(1) brightness(.35)}
.mundo-regiao.requisito img.mundo-cena{filter:grayscale(.7) brightness(.5)}
.mundo-regiao.fechada .mundo-selo,.mundo-regiao.requisito .mundo-selo{color:#aab0bd;border-color:#3a4050}
.mundo-regiao.recuperando .mundo-selo{color:#8ce0ff;border-color:#397a91}
.mundo-voltar{align-self:center;margin-top:12px;padding:10px 26px;border:1px solid #6a5226;border-radius:9px;background:#221a0d;color:#f3d58a;font-weight:900;letter-spacing:.8px}

/* ---- o cartão pós-chefe ---- */
.pos-chefe-card{position:absolute;z-index:90;left:50%;bottom:16%;transform:translateX(-50%);width:min(340px,92%);padding:12px 14px 10px;border:1px solid #b98d3a;border-radius:14px;background:linear-gradient(180deg,rgba(38,29,13,.96),rgba(16,12,6,.96));box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.6) inset;color:#f2ead6}
.pos-chefe-card.hidden{display:none}
.pos-chefe-topo{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pos-chefe-icone{display:grid;place-items:center;width:40px;height:40px;font-size:calc(26px * var(--text-scale, 1))}
.pos-chefe-topo strong{display:block;color:#f3d58a;font-size:calc(14px * var(--text-scale, 1));letter-spacing:.6px}
.pos-chefe-topo small{color:#c7b58c;font-size:calc(11px * var(--text-scale, 1))}
.pos-chefe-opcoes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.pos-chefe-opcoes button{display:grid;justify-items:center;gap:2px;padding:8px 6px;border:1px solid #4a3a1c;border-radius:10px;background:#1a140a;color:#f2ead6;cursor:var(--cur-mao,pointer)}
.pos-chefe-opcoes button [data-icone]{display:grid;place-items:center;width:34px;height:34px;font-size:calc(22px * var(--text-scale, 1))}
.pos-chefe-opcoes button b{font-size:calc(12px * var(--text-scale, 1))}
.pos-chefe-opcoes button small{color:#bfae88;font-size:calc(9.5px * var(--text-scale, 1));text-align:center;line-height:1.25}
.pos-chefe-opcoes button.escolhida{border-color:#f0c96d;background:#34270f;box-shadow:0 0 0 1px #f0c96d inset}
.pos-chefe-opcoes button:disabled{opacity:.45;cursor:not-allowed}
.pos-chefe-barra{height:4px;margin-top:10px;border-radius:4px;background:#2b2213;overflow:hidden}
.pos-chefe-barra i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#f0c96d,#b98d3a);transform-origin:left center}

@media (max-width:700px){
  .mundo-regioes{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .mundo-regiao{min-height:96px}
  .pos-chefe-card{bottom:10%}
}
.mundo-regiao.aqui.recuperando .mundo-selo{background:#12394a;color:#8ce0ff;border-color:#397a91}

/* =====================================================================
   ESTANDARTE — o painel da área (28/09, escolha do autor: opção B).
   Fica só nome, etapas, XP/Gold por hora e os botões MUNDO e ETAPA ANTERIOR.
   ===================================================================== */
#monsterCard>.battle-zone-head.estandarte{overflow:hidden;width:min(46%,340px)!important;border:1px solid #b98d3a!important;border-radius:14px!important;
  background:linear-gradient(180deg,rgba(24,18,9,.94),rgba(12,9,5,.94))!important;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 10px 30px rgba(0,0,0,.55)!important}
.estandarte>*{position:relative;z-index:1}
.estandarte>.area-estandarte-fundo{position:absolute;z-index:0;inset:0;pointer-events:none;background-repeat:no-repeat}
.estandarte .rail-toggle-icon,.estandarte .rail-toggle-chevron{display:none!important}
.estandarte .rail-collapse-toggle{cursor:var(--cur-seta,default);padding:12px 14px 4px!important}
.estandarte .rail-toggle-copy small{color:#e9c46a!important;letter-spacing:1.6px!important;font-size:calc(10px * var(--text-scale,1))}
.estandarte .rail-toggle-copy strong{color:#f3d58a;font-size:calc(22px * var(--text-scale,1))!important;text-shadow:0 2px 6px #000}
.estandarte .rail-toggle-copy em{color:#c7b58c;font-style:normal}
.estandarte .arena-route-line{padding:2px 14px 10px}
.estandarte .arena-route-line .area-progress{display:none}
.dica-fixar-etapa{margin:-6px 14px 8px;color:#c7b58c;font-size:calc(10.5px * var(--text-scale,1));font-weight:700;letter-spacing:.3px;text-shadow:0 1px 3px #000}
.dica-fixar-etapa[hidden]{display:none!important}
/* o corpo nunca fecha: os dois botões são o painel */
#monsterCard>.battle-zone-head.estandarte.collapsed .collapsible-panel-body,
#monsterCard>.battle-zone-head.estandarte .collapsible-panel-body{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:8px;padding:0 14px 12px!important;max-height:none;overflow:visible}
.estandarte .battle-area-selector,.estandarte .stage-route-controls{display:contents!important}
.estandarte .battle-area-selector>span,.estandarte #favoriteAreaButton,.estandarte .area-requirement-box,.estandarte .area-farm-row,.estandarte #stageFarmModeLabel{display:none!important}
.estandarte .mundo-button,.estandarte #stageBackButton,.estandarte #stageResumeButton{width:auto;height:34px;margin:0;padding:0 8px;border:1px solid #6a5226;border-radius:9px;background:linear-gradient(180deg,#2b2213,#171209);color:#f3d58a;font:900 calc(11px * var(--text-scale,1)) var(--font-display,Georgia,serif);letter-spacing:.6px;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.estandarte #stageBackButton:disabled{opacity:.45}
.estandarte #stageResumeButton{grid-column:1/-1}
/* 04/10 (autor: "em 130% o MUNDO invade o VOLTAR A AVANÇAR"). As colunas eram 1fr (mínimo = o texto
   inteiro numa linha): com letra maior o VOLTAR A AVANÇAR passava por cima do MUNDO. Agora nenhuma
   coluna cresce além da sua parte, e o texto que não cabe quebra em duas linhas dentro do botão. */
.estandarte .mundo-button,.estandarte #stageResumeButton{min-width:0;min-height:34px;height:auto!important;white-space:normal;text-align:center;line-height:1.1;overflow-wrap:anywhere}
.estandarte #stageResumeButton[hidden]{display:none!important}
/* No celular o Estandarte tem ~180px: MUNDO e ETAPA ANTERIOR não cabem lado a
   lado e um passava por cima do outro (29/09). Um embaixo do outro. */
@media (max-width:699px){
  #monsterCard>.battle-zone-head.estandarte .collapsible-panel-body{grid-template-columns:minmax(0,1fr)!important}
  #monsterCard>.battle-zone-head.estandarte .battle-area-selector{display:contents!important}
  .estandarte .mundo-button,.estandarte #stageBackButton{width:100%;min-width:0!important;justify-content:center}
}
/* ETAPAS EM NÚMEROS NO PC (30/09, opção B do autor). As barrinhas viram quadrados
   numerados (como a gaveta do celular); tocar num número fixa o farm ali e tocar de
   novo solta. ETAPA ANTERIOR sai (os números fazem o mesmo), e VOLTAR A AVANÇAR fica
   ao lado de MUNDO quando há etapa fixada. A frase de estado (#etapaAviso) diz onde
   o farm está e quando ele volta sozinho. O celular (≤ 640 px) não muda aqui: a
   gaveta dele mora em styles/responsivo.css, seção 32. */
.etapa-aviso{margin:-4px 14px 8px;color:#d9c9a3;font-size:calc(11px * var(--text-scale,1));font-weight:700;line-height:1.35;text-shadow:0 1px 3px #000}
.etapa-aviso[hidden]{display:none!important}
@media (min-width:641px){
  .estandarte .arena-route-line{display:block}
  .estandarte .arena-route-crown{display:none!important}
  .estandarte #stageTrack{display:grid!important;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px!important;counter-reset:etapa}
  .estandarte #stageTrack .stage-dot{counter-increment:etapa;flex:none!important;width:auto!important;min-width:0!important;height:26px!important;border-radius:6px!important;
    border:1px solid #4a3a1c!important;background:#16110a!important;box-shadow:none!important;color:#6f6450;display:grid;place-items:center;
    font:800 calc(12px * var(--text-scale,1))/1 "Times New Roman",Times,"Noto Serif",serif;font-variant-numeric:lining-nums tabular-nums;transform:none!important;filter:none}
  /* 04/10 (autor: "os números e o ícone do boss não estão no centro da caixa"). A Georgia do
     Windows desenha 3, 4, 5, 7 e 9 descendo abaixo da linha (algarismos "antigos") e 1, 2 e 0
     baixinhos: cada número caía numa altura diferente. Aqui vai uma serifa de algarismos
     alinhados, e o número/coroa vira um bloco de altura exata, centrado pela grade. */
  .estandarte #stageTrack .stage-dot::before{content:counter(etapa);display:block;line-height:1}
  .estandarte #stageTrack .stage-dot.boss::before{content:"👑";font-size:13px;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
  /* 25/10: com a arte do chefe do mapa, o botão 10 mostra o rosto dele (a coroa fica de reserva). */
  .estandarte #stageTrack .stage-dot.boss.com-arte-chefe{overflow:hidden;padding:0!important}
  .estandarte #stageTrack .stage-dot.boss.com-arte-chefe::before{content:"";width:100%;height:100%;background:var(--arte-chefe) center 22%/150% no-repeat}
  .estandarte #stageTrack .stage-dot.done{background:#3a2c14!important;border-color:#8a6a2e!important;color:#f0dcaa}
  .estandarte #stageTrack .stage-dot.current{background:#c89b3c!important;border-color:#f3d58a!important;color:#1a140b}
  .estandarte #stageTrack .stage-dot.boss{border-color:#8b3a3e!important}
  .estandarte #stageTrack .stage-dot.stage-dot-fixada{outline:2px solid #7fd4ff;outline-offset:1px}
  .estandarte #stageTrack .stage-dot-clicavel:hover{filter:brightness(1.25)}
  /* Etapa alvo (10/10): contorno dourado tracejado na etapa à frente que o jogador marcou. */
  .estandarte #stageTrack .stage-dot.stage-dot-alvo{outline:2px dashed #ffd56a;outline-offset:1px;color:#ffd56a;background:#3b2a0c!important}
  .estandarte #stageBackButton{display:none!important}
  .estandarte #stageResumeButton{grid-column:2;background:var(--botao-ouro-fundo)!important;color:var(--botao-ouro-texto)!important;border-color:var(--botao-ouro-borda)!important}
  #monsterCard>.battle-zone-head.estandarte.col-sem-retomar:not(#stageResumeButton) .battle-area-selector{grid-column:1/-1}
  #monsterCard>.battle-zone-head.estandarte .battle-area-selector .mundo-button{flex:1 1 auto}
}
/* fundo: a arte do chefe da área, apagada à direita (escolha do autor, 28/09) */
.estandarte>.area-estandarte-fundo{background-size:auto 165%;background-position:108% 22%;opacity:.5;
  -webkit-mask-image:linear-gradient(90deg,transparent 35%,#000 85%);mask-image:linear-gradient(90deg,transparent 35%,#000 85%)}
.estandarte-icone{display:inline-grid;place-items:center;width:22px;height:22px}
.estandarte-icone img,.estandarte .mundo-button-icone img{width:100%;height:100%;image-rendering:pixelated;object-fit:contain}
.estandarte .rail-collapse-toggle{display:flex!important;width:100%!important;text-align:left}
.estandarte .rail-toggle-copy{flex:1 1 auto!important;min-width:0!important;max-width:none!important;display:grid!important;gap:2px}
.estandarte .rail-toggle-copy small,.estandarte .rail-toggle-copy em{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* o quadro do inimigo sem alvo repetia o Estandarte: some (sem mexer no layout) */
#arenaEnemyPanel.ocioso{visibility:hidden}

/* =====================================================================
   MELHORES ITENS POR ÁREA (03/10). Cada região ganha um botão DROPS (a arte
   da arma que a área dá para a classe) e a lista abre POR CIMA do mapa, dentro
   da mesma janela: nada novo se sobrepõe ao resto do jogo no celular.
   ===================================================================== */
.mundo-card{position:relative}
.mundo-caixa{position:relative;display:grid;min-width:0}
.mundo-caixa>.mundo-regiao{min-width:0}
.mundo-regiao .mundo-texto{padding-right:52px}
.mundo-regiao .mundo-texto b{overflow-wrap:anywhere}
/* nome comprido (3 linhas a 130%) não sobe por baixo do selo */
.mundo-caixa>.mundo-regiao{padding-top:calc(24px * var(--text-scale, 1))}
.mundo-drops-botao{position:absolute;z-index:2;right:6px;bottom:6px;display:grid;justify-items:center;gap:1px;width:44px;padding:3px 2px 2px;border:1px solid #8a6a2e;border-radius:8px;background:rgba(14,10,5,.88);color:#f3d58a;cursor:var(--cur-mao,pointer);box-shadow:0 2px 6px rgba(0,0,0,.6)}
.mundo-drops-botao:hover{border-color:#f0c96d;background:rgba(40,30,12,.95)}
.mundo-drops-botao .mundo-drops-arte,.mundo-drops-botao .item-art-fallback{width:26px;height:26px;object-fit:contain;font-size:18px;line-height:26px}
.mundo-drops-botao small{font-size:calc(8px * var(--text-scale, 1));font-weight:900;letter-spacing:.3px;line-height:1;max-width:40px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.mundo-drops{position:absolute;z-index:5;inset:0;overflow:auto;padding:16px 18px;border-radius:inherit;background:radial-gradient(circle at 50% 0,#2a2215 0,#141109 60%,#0d0b07 100%);color:#f2ead6}
.mundo-drops.hidden{display:none}
.mundo-drops-topo{position:relative;display:flex;align-items:center;gap:12px;min-height:76px;padding:10px 12px;border:1px solid #5a4520;border-radius:12px;overflow:hidden;background:#12100b}
.mundo-drops-cena{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45}
.mundo-drops-topo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.85) 20%,rgba(0,0,0,.35));pointer-events:none}
.mundo-drops-titulo{position:relative;z-index:1;flex:1 1 auto;min-width:0;display:grid;gap:2px}
.mundo-drops-titulo small{color:#e9c46a;font-size:calc(10px * var(--text-scale, 1));font-weight:900;letter-spacing:1.4px}
.mundo-drops-titulo b{color:#f3d58a;font-size:calc(17px * var(--text-scale, 1));overflow-wrap:anywhere;text-shadow:0 2px 4px #000}
.mundo-drops-titulo span{color:#c7b58c;font-size:calc(11px * var(--text-scale, 1));font-weight:700}
.mundo-drops-fechar{position:relative;z-index:1;flex:0 0 auto;max-width:42%;padding:8px 12px;border:1px solid #6a5226;border-radius:9px;background:#221a0d;color:#f3d58a;font-weight:900;font-size:calc(11px * var(--text-scale, 1));letter-spacing:.6px;cursor:var(--cur-mao,pointer);white-space:normal;line-height:1.2}
.mundo-drops-raridade{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.mundo-drops-raridade>span{display:grid;gap:2px;padding:7px 10px;border:1px solid #3b3222;border-radius:9px;background:#15110a;min-width:0}
.mundo-drops-raridade small{color:#bfae88;font-size:calc(10px * var(--text-scale, 1));font-weight:800;letter-spacing:.6px}
.mundo-drops-raridade b{font-size:calc(13px * var(--text-scale, 1));overflow-wrap:anywhere}
.mundo-drops-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:8px;margin:0;padding:0;list-style:none}
.mundo-drops-linha{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid #3b3222;border-radius:10px;background:#15110a;min-width:0}
.mundo-drops-peca,.mundo-drops-chefe{display:flex;align-items:center;gap:9px;min-width:0}
.mundo-drops-peca{flex:1 1 auto}
.mundo-drops-peca>span,.mundo-drops-chefe>span{display:grid;gap:1px;min-width:0}
.mundo-drops-peca small,.mundo-drops-chefe small{color:#bfae88;font-size:calc(10px * var(--text-scale, 1));font-weight:800;letter-spacing:.4px}
.mundo-drops-peca b{font-size:calc(13px * var(--text-scale, 1));color:#f2ead6;overflow-wrap:anywhere}
.mundo-drops-chefe{flex:0 1 46%;justify-content:flex-end;text-align:right;padding-left:8px;border-left:1px solid #3b3222}
.mundo-drops-chefe b{font-size:calc(11px * var(--text-scale, 1));color:#e8b4b8;overflow-wrap:anywhere}
.mundo-drops-arte-grande,.mundo-drops-peca .item-art-fallback{flex:0 0 auto;width:46px;height:46px;object-fit:contain;font-size:28px;line-height:46px;text-align:center}
.mundo-drops-arte-chefe,.mundo-drops-chefe .item-art-fallback{flex:0 0 auto;order:2;width:32px;height:32px;object-fit:contain;font-size:20px;line-height:32px;text-align:center}
.mundo-drops-acima{color:#9be27a;font-style:normal;font-size:calc(10px * var(--text-scale, 1));font-weight:900}
.mundo-drops-nota{margin:10px 2px 0;color:#bfae88;font-size:calc(11px * var(--text-scale, 1));line-height:1.4}
@media (max-width:700px){
  .mundo-drops{padding:10px}
  .mundo-drops-lista{grid-template-columns:minmax(0,1fr)}
  .mundo-drops-topo{flex-wrap:wrap}
  .mundo-drops-fechar{max-width:none;width:100%}
  .mundo-drops-arte-grande,.mundo-drops-peca .item-art-fallback{width:38px;height:38px}
  /* no celular o botão vira uma faixa embaixo do cartão: não rouba largura do nome nem encosta no selo */
  .mundo-caixa{grid-template-rows:1fr auto}
  .mundo-caixa>.mundo-regiao{border-bottom-left-radius:0;border-bottom-right-radius:0}
  .mundo-regiao .mundo-texto{padding-right:9px}
  .mundo-drops-botao{position:static;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:28px;padding:2px 6px;border-top:0;border-radius:0 0 10px 10px;box-shadow:none}
  .mundo-drops-botao .mundo-drops-arte,.mundo-drops-botao .item-art-fallback{width:22px;height:22px;line-height:22px;font-size:15px}
  .mundo-drops-botao small{max-width:none;font-size:calc(10px * var(--text-scale, 1))}
  .mundo-drops-linha{flex-wrap:wrap}
  .mundo-drops-chefe{flex:1 1 100%;justify-content:flex-start;text-align:left;padding:6px 0 0;border-left:0;border-top:1px solid #3b3222}
  .mundo-drops-arte-chefe,.mundo-drops-chefe .item-art-fallback{order:0;margin-left:7px}
}
/* MODOS HARD E HARDCORE (05/10): abas no topo do Mapa e a borda do cartão na cor do contorno dos monstros. */
/* MODOS (05/10, opção B do autor): 3 cartões no topo do Mapa (Normal / Hard / Hardcore) e o quadro do modo */
.mundo-cartoes{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-bottom:6px}
/* Os cartões ficam parados acima da lista que rola (06/10). */
.mundo-topo{flex:none;padding:0 4px}
.mundo-topo:empty{display:none}
.mundo-cartao{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:7px 4px;border:2px solid #4a3a1c;border-radius:10px;background:#17130c;color:#d8ccb0;cursor:var(--cur-mao,pointer);font:inherit}
/* Placa (opção A do autor, 06/10): só o título do modo, dourado/laranja/vermelho, com traços dos lados. */
.mundo-cartao{padding:10px 6px 8px;background:linear-gradient(180deg,#221a0e,#130f08)}
.mundo-cartao b.mundo-cartao-titulo{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;max-width:100%;font-family:'Cinzel','Trajan Pro',Georgia,serif;font-weight:700;font-size:min(calc(18px * var(--text-scale, 1)),2.9vw);letter-spacing:2px;white-space:nowrap;color:#f0c96d;background:linear-gradient(180deg,#fff3c8,#e0b25a 60%,#a8772c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.mundo-cartao b.mundo-cartao-titulo::before,.mundo-cartao b.mundo-cartao-titulo::after{content:"";flex:1;max-width:42px;height:2px;background:linear-gradient(90deg,transparent,#c9a24f)}
.mundo-cartao b.mundo-cartao-titulo::after{background:linear-gradient(270deg,transparent,#c9a24f)}
.mundo-cartao.mundo-aba-hard b.mundo-cartao-titulo{color:#ff9a2e;background-image:linear-gradient(180deg,#ffe2b8,#ff9a2e 60%,#b85a10)}
.mundo-cartao.mundo-aba-hard b.mundo-cartao-titulo::before{background:linear-gradient(90deg,transparent,#ff9a2e)}
.mundo-cartao.mundo-aba-hard b.mundo-cartao-titulo::after{background:linear-gradient(270deg,transparent,#ff9a2e)}
.mundo-cartao.mundo-aba-hardcore b.mundo-cartao-titulo{color:#ff3c4a;background-image:linear-gradient(180deg,#ffc4c4,#ff3c4a 60%,#9a1020)}
.mundo-cartao.mundo-aba-hardcore b.mundo-cartao-titulo::before{background:linear-gradient(90deg,transparent,#ff3c4a)}
.mundo-cartao.mundo-aba-hardcore b.mundo-cartao-titulo::after{background:linear-gradient(270deg,transparent,#ff3c4a)}
@media (max-width:620px){.mundo-cartao b.mundo-cartao-titulo{letter-spacing:.5px}.mundo-cartao b.mundo-cartao-titulo::before,.mundo-cartao b.mundo-cartao-titulo::after{display:none}}
.mundo-cartao small{max-width:100%;font-size:min(calc(10px * var(--text-scale, 1)),2.75vw);line-height:1.3;color:#a99c80;text-align:center;overflow-wrap:anywhere}
.mundo-cartao.ativa{border-color:#f0c96d;background:#241c0e}
.mundo-cartao.mundo-aba-hard.ativa{border-color:rgb(255,150,40)}
.mundo-cartao.mundo-aba-hardcore.ativa{border-color:rgb(235,40,60)}
.mundo-cartao.trancado{opacity:.5;cursor:var(--cur-mao,pointer)}
.mundo-cartao.trancado.ativa{opacity:.85}
/* Cadeado desenhado (o mesmo das Builds das skills, .skb-cad): nada de emoji no lugar de arte. */
.mundo-cad{position:relative;display:inline-block;flex:none;width:10px;height:8px;margin:6px 5px 0 1px;border-radius:2px;background:#d9b45a;vertical-align:-1px}
.mundo-cad::before{content:"";position:absolute;left:1.5px;top:-6px;width:4px;height:6px;border:1.5px solid #d9b45a;border-bottom:0;border-radius:4px 4px 0 0}
.mundo-cartao small .mundo-cad{margin-top:4px;transform:scale(.85)}
.mundo-falta-titulo{display:flex;align-items:flex-start;font-weight:700;letter-spacing:.5px}
.mundo-falta-lista{margin:0 0 4px;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px;max-width:100%}
.mundo-falta-lista li{position:relative;padding-left:16px;overflow-wrap:anywhere}
.mundo-falta-lista li::before,.mundo-falta-lista li::after{content:"";position:absolute}
.mundo-falta-lista li.ok::before{left:3px;top:.3em;width:4px;height:8px;border:solid #8fd18a;border-width:0 2px 2px 0;transform:rotate(45deg)}
.mundo-falta-lista li.falta::before,.mundo-falta-lista li.falta::after{left:1px;top:.65em;width:10px;height:2px;border-radius:1px;background:#ff8a70;transform:rotate(45deg)}
.mundo-falta-lista li.falta::after{transform:rotate(-45deg)}
.mundo-falta-lista li.ok{color:#8fd18a}
.mundo-falta-lista li.falta{color:#ffb4a0}
.mundo-itens{grid-column:1/-1;display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:0;padding:9px 11px;border:1px solid #4a3a1c;border-radius:9px;background:#15110a;color:#d8ccb0;font-size:calc(12px * var(--text-scale, 1));line-height:1.45}
.mundo-itens-hard{border-color:rgba(255,150,40,.6)}
.mundo-itens-hardcore{border-color:rgba(235,40,60,.7)}
.mundo-itens p{margin:0}
.mundo-itens p:first-of-type{color:#f3e6c4}
.mundo-itens p+p{color:#b9ab8c}
.mundo-itens .mundo-itens-selo{margin-left:0}
/* 28/10: o resto do texto do Hard/Hardcore recolhe (game.js maisDoQuadro) */
.mundo-itens-mais{display:flex;flex-direction:column;gap:4px;width:100%}
.mundo-itens-mais>summary{cursor:var(--cur-mao,pointer);color:#e9c46a;font-weight:700;list-style:none;padding:2px 0}
.mundo-itens-mais>summary::-webkit-details-marker{display:none}
.mundo-itens-mais>summary::before{content:"▸ "}
.mundo-itens-mais[open]>summary::before{content:"▾ "}
.mundo-itens-mais p{color:#b9ab8c}
.item-grau.item-grau-normal{background:#3a3222;color:#d8ccb0}
.mundo-regiao.modo-hard{border-color:rgba(255,150,40,.75)}
.mundo-regiao.modo-hardcore{border-color:rgba(235,40,60,.8)}
.mundo-regiao.modo-hard.aqui,.mundo-regiao.modo-hardcore.aqui{border-color:#f0c96d}

/* Prévia (27/10): grupo ainda fechado = 1 cartão largo com as cenas lado a lado. */
.mundo-previa{grid-column:1/-1}
.mundo-previa-cartao{position:relative;display:block;width:100%;min-height:118px;cursor:var(--cur-seta,default);opacity:1;filter:none}
.mundo-previa-cenas{position:absolute;inset:0;display:flex;overflow:hidden;border-radius:inherit}
.mundo-regiao .mundo-previa-cenas img.mundo-cena{position:static;flex:1;min-width:0;height:100%;object-fit:cover;filter:grayscale(.45) brightness(.62)}
.mundo-previa-cartao .mundo-texto b{font-size:calc(15px * var(--text-scale, 1))}

/* FAIXAS DE 10 MAPAS (04/11, opção C do autor). A fileira fica no topo parado (#mundoTopo), colada nos cartões do modo;
   a lista mostra só a faixa escolhida, em 2 linhas de 5 no PC, e cabe sem rolar. */
.mundo-faixas{display:flex;gap:6px;padding:0 0 8px}
.mundo-faixa{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 8px;border:1px solid #4a3a1c;border-radius:999px;background:#17130c;color:#d8ccb0;font:inherit;font-weight:900;font-size:calc(12px * var(--text-scale, 1));white-space:nowrap;cursor:var(--cur-mao,pointer)}
.mundo-faixa b{font-weight:900}
.mundo-faixa:hover{border-color:#8a6a2e}
.mundo-faixa.ativa{border-color:#f0c96d;background:#2a2112;color:#f3d58a}
.mundo-faixa.trancada{opacity:.55}
.mundo-faixa .mundo-cad{margin:0 2px 0 0}
.mundo-faixa:focus-visible{outline:2px solid #f0c96d;outline-offset:2px}
.mundo-faixa-marcas{display:inline-flex;gap:4px}
.mundo-faixa-marcas:empty{display:none}
.mundo-faixa-marcas i{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:999px;border:1px solid rgba(255,196,92,.55);color:#ffcf6e;font-style:normal;font-weight:800;font-size:calc(10px * var(--text-scale, 1));line-height:1.3}
.mundo-faixa-marcas i.mundo-faixa-aqui{background:#f0c96d;border-color:#f0c96d;color:#1b1406}
.mundo-faixa-marcas i.mundo-faixa-gente{border-color:#2f6a3a;color:#bff0b0}
.mundo-faixa-marcas i svg{width:10px;height:10px;fill:currentColor}
.mundo-faixa-marcas i img{width:12px;height:12px;object-fit:contain}
.mundo-regioes .fora-da-faixa{display:none!important}
.mundo-regioes.com-faixas{align-content:start;grid-auto-rows:min-content}
@media (min-width:761px){
  .mundo-regioes.com-faixas{grid-template-columns:repeat(5,minmax(0,1fr))}
  .mundo-regioes.com-faixas .mundo-caixa>.mundo-regiao{min-height:clamp(104px,calc((100dvh - 440px) / 2),160px)}
  .mundo-regioes.com-faixas .mundo-regiao .mundo-texto b{font-size:calc(13.5px * var(--text-scale, 1))}
}
@media (max-width:760px){
  .mundo-faixas{overflow-x:auto;scrollbar-width:none;padding-bottom:6px}
  .mundo-faixas::-webkit-scrollbar{display:none}
  .mundo-faixa{flex:0 0 auto}
}
/* O botão ITENS na cor do grau do modo; a janela ITENS leva o quadro do grau (antes no meio da lista) */
.mundo-drops-botao.mundo-drops-hard{border-color:rgba(255,150,40,.8)}
.mundo-drops-botao.mundo-drops-hardcore{border-color:rgba(235,40,60,.85)}
.mundo-drops .mundo-itens{margin:10px 0 0}
.mundo-drops-peca .mundo-drops-grau{justify-self:start;margin:2px 0 0;font-size:calc(9px * var(--text-scale, 1))}
/* Celular deitado / tela baixa: o topo parado (cartões do modo + faixas) encolhe para sobrar lugar para os mapas */
@media (max-height:500px){
  .mundo-card{padding:10px 14px}
  .mundo-cartoes{padding-bottom:4px}
  .mundo-cartao{padding:4px 6px}
  .mundo-cartao small{display:none}
  .mundo-faixa{padding:3px 8px}
  .mundo-faixas{padding-bottom:4px}
  .mundo-regioes.com-faixas .mundo-caixa>.mundo-regiao{min-height:96px}
}
.mundo-regioes.com-faixas{padding-bottom:2px}

/* =====================================================================
   PAINEL DO MAPA (04/11, opção A do autor: "eu olho a primeira vez e fico tonto, confuso demais").
   O cartão fica só com a arte, o nome e ícones; tudo escrito vai para o painel do lado (#mundoPainel, game.js
   painelDoMundoHtml). No celular o painel sobe por baixo quando você toca num mapa.
   ===================================================================== */
.mundo-corpo{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) clamp(260px,24vw,320px);gap:12px}
.mundo-corpo>.mundo-regioes{min-height:0}
.mundo-painel{align-self:stretch;align-content:start;max-height:100%;overflow:auto;position:relative;display:grid;gap:7px;padding:10px 12px;border:1px solid #6a5226;border-radius:12px;background:#16110a;color:#efe4cf}
.mundo-painel:empty{display:none}
.mundo-painel-arte{height:clamp(56px,calc(100dvh - 690px),110px);margin:-12px -12px 0;border-radius:12px 12px 0 0;overflow:hidden;background:#0d0b07}
.mundo-painel-arte img{width:100%;height:100%;object-fit:cover;display:block}
.mundo-painel-topo{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mundo-painel-topo b{color:#f3d58a;font-size:calc(15px * var(--text-scale, 1));font-weight:900;overflow-wrap:anywhere}
.mundo-painel-est{flex:none;display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;border:1px solid #6a5226;color:#e9dcc0;font-size:calc(10px * var(--text-scale, 1));font-weight:900;white-space:nowrap}
.mundo-painel-est.aqui{background:#f0c96d;border-color:#f0c96d;color:#1b1406}
.mundo-painel-est.ok{color:#b9e27a;border-color:#4d6a2a}
.mundo-painel-est.tr{color:#bdb3a0;border-color:#4a4434}
.mundo-painel-est .mundo-cad{margin:5px 2px 0 0}
.mundo-painel-linhas{display:grid}
.mundo-painel-linha{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-top:1px solid #3a2f1c;font-size:calc(12px * var(--text-scale, 1))}
.mundo-painel-linha span{color:#a8977a;flex:none}
.mundo-painel-linha b{color:#efe4cf;text-align:right;font-weight:800;overflow-wrap:anywhere}
.mundo-painel-linha.ruim b{color:#f0a05a}
.mundo-painel-linha.gente b{color:#8fdc98}
.mundo-painel-linha.pk b{color:#ff6b5b}
.mundo-painel-botoes{display:flex;gap:8px;position:sticky;bottom:-10px;margin-bottom:-2px;padding:6px 0 2px;background:#16110a}
.mundo-painel-bt{flex:1;min-height:36px;padding:4px 8px;border-radius:9px;border:1px solid #b98d3a;background:linear-gradient(180deg,#5a4319,#2c210c);color:#ffe7a8;font:inherit;font-weight:900;font-size:calc(11px * var(--text-scale, 1));letter-spacing:.5px;cursor:var(--cur-mao,pointer)}
.mundo-painel-bt.sec{background:#1d160b;border-color:#6a5226;color:#e6d3a7}
.mundo-painel-bt:disabled{opacity:.6;cursor:var(--cur-seta,default)}
.mundo-painel-fechar{display:none}
/* cartão limpo: nome e ícones; o resto está no painel */
.mundo-corpo .mundo-caixa>.mundo-drops-botao{display:none}
.mundo-corpo .mundo-regiao .mundo-texto{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:7px 8px;padding-right:8px}
.mundo-corpo .mundo-regiao .mundo-texto>b{order:0;flex:1 1 100%}
.mundo-corpo .mundo-regiao .mundo-texto>small{order:1;display:none}
.mundo-corpo .mundo-regiao .mundo-texto>small.mundo-gente,.mundo-corpo .mundo-regiao .mundo-texto>small.mundo-pk,.mundo-corpo .mundo-regiao .mundo-texto>small.mundo-rende{display:inline-flex}
.mundo-corpo .mundo-regiao .mundo-texto>small.mundo-gente{order:1}.mundo-corpo .mundo-regiao .mundo-texto>small.mundo-pk{order:2}.mundo-corpo .mundo-regiao .mundo-texto>.tr-mundo-dono{order:3;margin:0}
.mundo-corpo .mundo-regiao .tr-mundo-nome,.mundo-corpo .mundo-regiao .tr-mundo-imune{display:none}
.mundo-corpo .mundo-regiao .tr-mundo-sel{padding:1px 3px}
.mundo-corpo .mundo-regiao .tr-mundo-sel.tr-mundo-forte-selo{padding:1px 6px;font-size:calc(9px * var(--text-scale, 1))}
.mundo-corpo .mundo-regiao .mundo-gente::before{display:none}
.mundo-corpo .mundo-regiao .mundo-gente em,.mundo-corpo .mundo-regiao .mundo-pk em{display:none}
.mundo-regiao .mundo-gente em,.mundo-regiao .mundo-pk em{font-style:normal}
.mundo-regiao .mundo-pk{display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border-radius:999px;background:#3a0e0a;border:1px solid #7a2a22;color:#ff8a7a;font-size:calc(9px * var(--text-scale, 1));font-weight:900;line-height:1.2;white-space:nowrap}
.mundo-regiao .mundo-pk svg{width:11px;height:11px;fill:currentColor}
.mundo-corpo .mundo-regiao small.mundo-rende{padding:2px 6px;border-radius:999px;background:rgba(10,8,4,.82);border:1px solid #6e4a22;color:#f0a05a;font-size:calc(9px * var(--text-scale, 1));line-height:1.2}
/* selo só para "Você está aqui" e o cadeado (Livre/Vencida/Retoma estão no painel) */
.mundo-corpo .mundo-regiao.livre .mundo-selo,.mundo-corpo .mundo-regiao.vencida .mundo-selo{display:none}
.mundo-corpo .mundo-regiao[aria-disabled="true"]{cursor:var(--cur-seta,default)}
.mundo-corpo .mundo-regiao[aria-disabled="true"] img.mundo-cena{filter:grayscale(1) brightness(.5)}
.mundo-corpo .mundo-regiao[aria-disabled="true"] b{color:#9a8e78}
.mundo-corpo .mundo-regiao.sel{border-color:#f3d58a;box-shadow:0 0 0 2px #f3d58a}
.mundo-corpo .mundo-regiao.aqui{box-shadow:0 0 0 2px rgba(240,201,109,.35)}
.mundo-corpo .mundo-regiao.aqui.sel{box-shadow:0 0 0 2px #f3d58a}
@media (min-width:761px){
  .mundo-corpo .mundo-regioes.com-faixas{grid-template-columns:repeat(var(--mundo-cols,5),minmax(0,1fr))}
  .mundo-corpo .mundo-regioes.com-faixas .mundo-caixa>.mundo-regiao{min-height:clamp(96px,calc((100dvh - 390px) / 2),190px)}
}
@media (max-width:760px){
  .mundo-corpo{grid-template-columns:minmax(0,1fr)}
  .mundo-painel{display:none;position:fixed;z-index:30;left:8px;right:8px;bottom:8px;max-height:70dvh;box-shadow:0 -8px 24px rgba(0,0,0,.8)}
  .mundo-painel-aberto .mundo-painel{display:grid}
  .mundo-painel-arte{display:none}
  .mundo-painel-fechar{display:grid;place-items:center;position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:8px;border:1px solid #6a5226;background:#221a0d;color:#f3d58a;font-weight:900;cursor:var(--cur-mao,pointer)}
  .mundo-painel-topo{padding-right:36px}
  .mundo-corpo .mundo-caixa{grid-template-rows:1fr}
  .mundo-corpo .mundo-caixa>.mundo-regiao{border-radius:10px}
}
/* 05/11: a coluna do painel só existe no PC; no celular em pé baixo (ex.: 407x687) ela espremia os mapas numa tira estreita */
@media (min-width:761px) and (max-height:720px){.mundo-corpo{grid-template-columns:minmax(0,1fr) clamp(260px,28vw,380px)}}
@media (max-height:720px){.mundo-painel-arte{display:none}.mundo-painel-linha{padding:2px 0;font-size:calc(11px * var(--text-scale, 1))}.mundo-painel{gap:5px;padding:8px 10px}.mundo-painel-bt{min-height:28px}.mundo-painel-topo b{font-size:calc(13.5px * var(--text-scale, 1))}.mundo-painel .tr-painel{gap:8px}.mundo-painel .tr-painel>svg{width:24px;height:24px}.mundo-painel-linhas{grid-template-columns:1fr 1fr;column-gap:12px}.mundo-painel-linha{flex-direction:column;gap:0}.mundo-painel-linha b{text-align:left}.mundo-painel .tr-painel{padding:6px 8px}.mundo-painel .tr-painel small{line-height:1.25;font-size:calc(10.5px * var(--text-scale, 1))}}
