/* Visual preto e ouro, seguindo as referências do jogo */
:root {
  --fundo: #0c0a08;
  --painel: #15110d;
  --painel-2: #1d1812;
  --ouro: #c8a35a;
  --ouro-claro: #e6c98c;
  --texto: #e9dfcb;
  --apagado: #a8997d;
  --linha: rgba(200, 163, 90, 0.25);
  --vida: #b33a2e;
  --mana: #2f5fa8;
  --escudo: #8f9aa8;
  --bom: #8fb07a;
  --ruim: #d0694f;
  --titulo: "Cinzel", "Times New Roman", serif;
  --corpo: "Spectral", Georgia, serif;
  /* Moldura (painéis arredondados com borda dupla, como os cartões da batalha e o diálogo) */
  --moldura-fundo: linear-gradient(160deg, #2c2318, #15110d 62%);
  --moldura-escura: #0a0705;
  --moldura-borda-suave: #7a6440;
  --moldura-luz: rgba(230, 201, 140, 0.16);
  --moldura-raio: 6px;
  --moldura-sombra: 0 0 0 2px var(--moldura-escura), inset 0 0 0 2px var(--moldura-luz), 0 8px 18px rgba(0, 0, 0, 0.45);
  --destaque: #ffd98a;
  color-scheme: dark;
}
* { box-sizing: border-box; }
/* Celular: toques rápidos não dão zoom (sem o "toque duplo para ampliar"); o zoom com dois dedos continua */
html { touch-action: manipulation; }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--corpo); font-size: 16px; line-height: 1.5; padding: 0 16px 48px; }
h1, h2 { font-family: var(--titulo); color: var(--ouro-claro); letter-spacing: 0.05em; }
h2 { font-size: 1rem; margin: 0 0 12px; text-transform: uppercase; color: var(--ouro); }
[hidden] { display: none !important; }

.topo { text-align: center; padding: 24px 0 8px; }
.topo h1 { margin: 0; font-size: clamp(1.6rem, 4vw, 2.4rem); }
.topo p { margin: 4px 0 0; color: var(--apagado); }

.painel { background: var(--painel); border: 1px solid var(--linha); padding: 16px; max-width: 1100px; margin: 16px auto; min-width: 0; }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
label { display: flex; flex-direction: column; gap: 4px; font-family: var(--titulo); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ouro); }
/* 16px: abaixo disso o iPhone dá zoom sozinho ao tocar no campo */
select, input { font: inherit; font-family: var(--corpo); font-size: 1rem; text-transform: none; letter-spacing: 0; background-color: var(--painel-2); color: var(--texto); border: 1px solid var(--linha); border-radius: 0; padding: 8px; min-width: 0; max-width: 100%; }
label { min-width: 0; }
/* A seta própria deixa o select igual em todo navegador (no iPhone ele vinha arredondado e cinza) */
select { -webkit-appearance: none; appearance: none; padding-right: 30px; text-overflow: ellipsis; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c8a35a' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.dica { color: var(--apagado); font-style: italic; min-height: 1.5em; }

button { font-family: var(--titulo); letter-spacing: 0.05em; cursor: pointer; border: 1px solid var(--ouro); padding: 10px 16px; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: 2px; }
.botao-principal { background: var(--ouro); color: #1a130a; font-weight: 700; }
.botao-principal:hover { background: var(--ouro-claro); }
.botao-secundario { background: transparent; color: var(--ouro-claro); }

/* Arena */
.arena { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; max-width: 1100px; margin: 16px auto 0; }
.versus { align-self: center; font-family: var(--titulo); color: var(--ouro); font-size: 1.4rem; }
.cartao { background: var(--painel); border: 1px solid var(--linha); padding: 16px; min-width: 0; }
.cartao h3 { font-family: var(--titulo); margin: 0; color: var(--ouro-claro); font-size: 1.15rem; }
.cartao .sub { color: var(--apagado); font-size: 0.9rem; margin: 2px 0 10px; }
.cartao .poder-lorde { margin: 6px 0; padding: 5px 8px; border: 1px solid currentColor; font-size: 0.78rem; line-height: 1.4; }
.poder-lorde.natural { color: #edb09a; background: rgba(117, 39, 29, 0.2); }
.poder-lorde.enfraquecido { color: #a6d3b0; background: rgba(37, 84, 51, 0.2); }
.barra { position: relative; height: 20px; background: #2a231b; border: 1px solid var(--linha); margin: 6px 0; }
.barra > span { position: absolute; inset: 0; transform-origin: left center; transition: transform 0.35s ease; }
.barra .vida { background: var(--vida); }
.barra .mana { background: var(--mana); }
.barra .escudo { background: var(--escudo); opacity: 0.7; }
.barra em { position: relative; display: block; white-space: nowrap; font-style: normal; font-size: 0.8rem; padding-left: 8px; line-height: 18px; font-variant-numeric: tabular-nums; }
.efeitos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; min-height: 24px; }
.efeito { font-size: 0.75rem; border: 1px solid var(--linha); padding: 2px 8px; }
.efeito.negativo { color: var(--ruim); border-color: var(--ruim); }
.efeito.positivo { color: var(--bom); border-color: var(--bom); }
@media (prefers-reduced-motion: reduce) { .barra > span { transition: none; } }

/* Batalha com vários: cada lado empilha os cartões; tocar escolhe o alvo (monstro) ou o aliado */
.lado-batalha { display: grid; gap: 8px; align-content: start; min-width: 0; }
.lado-batalha .cartao[role="button"] { cursor: pointer; }
.lado-batalha .cartao[role="button"]:hover { border-color: var(--ouro); }
.lado-batalha .cartao[role="button"]:focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: 2px; }
.lado-batalha .cartao.selecionado { border-color: var(--ouro-claro); box-shadow: 0 0 0 1px var(--ouro-claro); }
.lado-batalha .cartao.caido { opacity: 0.45; }
.lado-batalha .cartao h3 small { font-family: var(--corpo); color: var(--ruim); font-size: 0.8rem; margin-left: 6px; }
.acoes .alvo-escolhido, .acoes .espera { width: 100%; text-align: center; margin: 0 0 4px; grid-column: 1 / -1; min-height: 0; }
.acoes .espera { color: var(--ouro-claro); font-style: normal; }
.menu-pocoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; grid-column: 1 / -1; padding: 10px; border: 1px solid var(--ouro); background: var(--painel); }
.menu-pocoes .menu-titulo { width: 100%; margin: 0; text-align: center; font-family: var(--titulo); color: var(--ouro); }
.menu-pocoes .voltar { border-color: var(--linha); color: var(--apagado); }
.menu-pocoes button { flex: 1 1 150px; }

/* Ações */
.acoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 1100px; margin: 16px auto; }
.acoes button { background: var(--painel-2); color: var(--texto); border-color: var(--linha); display: flex; flex-direction: column; align-items: center; min-width: 120px; }
.acoes button:hover:not(:disabled) { border-color: var(--ouro); color: var(--ouro-claro); }
.acoes button small { font-family: var(--corpo); color: var(--apagado); font-size: 0.75rem; letter-spacing: 0; }
.acoes button:disabled { opacity: 0.4; cursor: not-allowed; }
.acoes .separador { width: 100%; height: 0; }

.resultado { text-align: center; max-width: 1100px; margin: 16px auto; padding: 16px; border: 1px solid var(--ouro); background: var(--painel); display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; align-items: center; }
.resultado p { width: 100%; margin: 0; font-family: var(--titulo); font-size: 1.3rem; color: var(--ouro-claro); }

.colunas { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; max-width: 1100px; margin: 0 auto; }
.colunas .painel { margin: 0; }
.log { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; font-size: 0.92rem; }
.log li { padding: 3px 0; border-bottom: 1px solid rgba(200, 163, 90, 0.08); }
.log .turno { color: var(--ouro); font-family: var(--titulo); font-size: 0.8rem; padding-top: 10px; }
.log .jogador { color: var(--texto); }
.log .monstro { color: #e0b4a8; }
.log .efeito { color: var(--apagado); font-style: italic; border: 0; padding: 3px 0; font-size: 0.92rem; }
.log .cura, .log .buff { color: var(--bom); }
.log .vitoria { color: var(--ouro-claro); font-weight: 600; }
.log .derrota { color: var(--ruim); font-weight: 600; }

/* Layout da batalha: HUD de JRPG sobre uma arena central */
body:has(#tela-batalha:not([hidden])) > .topo { display: none; }
#tela-batalha:not([hidden]) { max-width: 1180px; margin: 0 auto; }
#tela-batalha .arena {
  position: relative; min-height: 610px; max-width: none; margin: 10px 0 0; padding: 22px 24px 24px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(420px, auto) auto; gap: 24px; align-items: start;
  overflow: hidden; background-color: #263b38;
  background-image:
    linear-gradient(180deg, rgba(9, 15, 20, .28) 0 37%, rgba(23, 19, 13, .16) 38% 52%, rgba(20, 13, 8, .38) 53% 100%),
    var(--fundo-batalha, linear-gradient(180deg, #2a5b56 0 37%, #65814a 38% 52%, #b28950 53% 100%));
  background-size: cover;
  background-position: center;
  border: 2px solid #172b36; box-shadow: inset 0 0 0 5px rgba(10, 24, 32, .35), 0 12px 35px rgba(0,0,0,.35);
}
#tela-batalha .arena::after { content: ''; position: absolute; inset: 32% 0 0; pointer-events: none; opacity: .22; background: repeating-linear-gradient(165deg, transparent 0 34px, rgba(79,55,31,.35) 35px 38px, transparent 39px 75px); }
#tela-batalha .versus { display: none; }
#tela-batalha .lado-batalha { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: start; align-self: stretch; gap: 6px; min-width: 0; }
/* O artigo continua sendo o alvo clicável; só o HUD ocupa os cantos da arena. */
#tela-batalha .lado-batalha .cartao { position: static; width: clamp(184px, 35%, 210px); padding: 0; min-height: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
#tela-batalha .cartao-hud { padding: 7px 8px; background: linear-gradient(145deg, rgba(36,28,19,.97), rgba(21,17,13,.93)); border: 2px solid var(--ouro); border-radius: 4px; box-shadow: 0 3px 0 var(--moldura-escura), 0 5px 12px rgba(0,0,0,.35); }
#tela-batalha .cartao[role="button"]:hover .cartao-hud, #tela-batalha .cartao.selecionado .cartao-hud { border-color: var(--ouro-claro); box-shadow: 0 0 0 1px var(--ouro-claro), 0 5px 12px rgba(0,0,0,.35); }
#tela-batalha .cartao[role="button"]:focus-visible { outline: 0; }
#tela-batalha .cartao[role="button"]:focus-visible .cartao-hud { outline: 2px solid var(--ouro-claro); outline-offset: 2px; }
#tela-batalha .lado-batalha .cartao-monstro { margin-left: auto; }
#tela-batalha .cartao-cabecalho { display: flex; align-items: center; gap: 6px; }
#tela-batalha .cartao-cabecalho > div { min-width: 0; flex: 1; }
#tela-batalha .cartao-monstro .cartao-cabecalho { flex-direction: row-reverse; text-align: right; }
#tela-batalha .cartao-cabecalho img { width: 34px; height: 34px; flex: none; object-fit: contain; image-rendering: pixelated; border: 1px solid var(--moldura-borda-suave); background: rgba(0,0,0,.3); }
#tela-batalha .cartao h3 { color: #f6ecd6; font-size: .8rem; line-height: 1.2; text-shadow: 1px 1px var(--moldura-escura); }
#tela-batalha .cartao h3 small { font-size: .6rem; }
#tela-batalha .cartao .sub { margin: 2px 0 0; color: #c9b994; font-size: .66rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tela-batalha .cartao .combatente { position: absolute; left: var(--combat-x); top: auto; bottom: var(--combat-y); width: var(--combat-tamanho); height: var(--combat-tamanho); display: flex; align-items: flex-end; justify-content: center; transform: translateX(-50%); filter: drop-shadow(0 12px 5px rgba(0,0,0,.42)); }
#tela-batalha .cartao-monstro .combatente { left: auto; right: var(--combat-x); transform: translateX(50%); }
#tela-batalha .cartao .combatente img { width: var(--combat-tamanho); height: var(--combat-tamanho); object-fit: contain; image-rendering: pixelated; transform: scale(1.55); transform-origin: bottom center; }
#tela-batalha .cartao .combatente:empty { display: none; }
/* Jogador: a moldura do tamanho de 1 quadro; a folha (8 fileiras) fica dentro, 8x mais alta, subida 2 fileiras */
#tela-batalha .cartao .sprite-quadro { position: relative; display: block; flex: none; overflow: hidden; }
#tela-batalha .cartao-cabecalho .sprite-quadro { width: 34px; height: 34px; border: 1px solid var(--moldura-borda-suave); background: rgba(0,0,0,.3); }
#tela-batalha .cartao .combatente .sprite-quadro { width: var(--combat-tamanho); height: var(--combat-tamanho); transform: scale(1.55); transform-origin: bottom center; }
#tela-batalha .cartao .sprite-quadro > img.retrato-jogador { position: absolute; left: 0; top: -200%; width: auto; height: 800%; max-width: none; border: 0; background: none; object-fit: fill; transform: none; image-rendering: pixelated; }
/* O retrato do cabeçalho usa a fileira frontal e recorta a parte superior do quadro: só o rosto fica visível. */
#tela-batalha .cartao-cabecalho .sprite-rosto > canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
#tela-batalha .cartao-hud .barra.hp-monstro { height: 15px; }
#tela-batalha .cartao-hud .barra.hp-monstro em { line-height: 13px; }
@media (max-width: 760px) {
  #tela-batalha .cartao-cabecalho .sprite-quadro { width: 26px; height: 26px; }
}
#tela-batalha .barra { height: 14px; margin: 4px 0 0; border-color: var(--moldura-borda-suave); background: var(--moldura-escura); border-radius: 6px; overflow: hidden; }
#tela-batalha .barra > span { border-radius: 9px; }
#tela-batalha .barra .vida { background: linear-gradient(180deg, #f04d5c, #b21837); }
#tela-batalha .barra .mana { background: linear-gradient(180deg, #3cd4ff, #1686ce); }
#tela-batalha .barra em { line-height: 12px; font-size: .64rem; text-align: center; padding: 0; text-shadow: 1px 1px #000; }
#tela-batalha .efeitos { min-height: 0; gap: 3px; margin-top: 4px; }
#tela-batalha .efeitos:empty { display: none; }
#tela-batalha .cartao-hud .efeito:not(.efeito-debuff) { padding: 1px 4px; font-size: .6rem; }
#tela-batalha .cartao-hud .poder-lorde { margin: 5px 0 0; padding: 3px 4px; font-size: .61rem; line-height: 1.25; text-align: center; }
#tela-batalha .cartao-hud .efeito-debuff { width: 26px; height: 30px; }
#tela-batalha .cartao-hud .debuff-arte, #tela-batalha .cartao-hud .efeito-debuff .skill-icone { width: 22px; height: 22px; }
#tela-batalha .acoes { position: relative; z-index: 4; max-width: none; grid-column: 1 / -1; margin: 0; padding: 16px; display: grid; grid-template-columns: repeat(8, minmax(80px, 1fr)); gap: 10px; background: rgba(21,17,13,.97); border: 3px solid var(--ouro); border-radius: 4px; box-shadow: 0 5px 0 var(--moldura-escura), 0 12px 26px rgba(0,0,0,.45); }
#tela-batalha .acoes button { min-width: 0; min-height: 106px; padding: 8px 4px; border: 2px solid var(--moldura-borda-suave); border-radius: 4px; background: linear-gradient(145deg, #2a2117, #17120d); color: var(--texto); text-shadow: 1px 1px var(--moldura-escura); }
#tela-batalha .acoes button:hover:not(:disabled), #tela-batalha .acoes .acao-ataque { border-color: var(--destaque); box-shadow: inset 0 0 0 2px rgba(255,217,138,.25); }
#tela-batalha .acao-icone { display: block; height: 48px; font-size: 2.2rem; line-height: 48px; filter: drop-shadow(0 2px 2px #000); }
#tela-batalha .acao-icone > .item-icone { width: 48px; height: 48px; margin: auto; }
#tela-batalha .acoes button strong { display: block; font-family: var(--titulo); font-size: .82rem; }
#tela-batalha .acoes button small { display: block; margin-top: 3px; color: #c9b994; font-size: .68rem; }
#tela-batalha .acoes .alvo-escolhido, #tela-batalha .acoes .espera, #tela-batalha .acoes .menu-pocoes { grid-column: 1 / -1; }
#tela-batalha .acoes:empty { display: none; }
/* Números flutuantes: sobem de quem foi atingido e somem (client/batalha-ui.js → soltarNumeros) */
#tela-batalha .camada-numeros { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
#tela-batalha .numero-flutuante { position: absolute; transform: translate(-50%, 0); display: flex; flex-direction: column; align-items: center; line-height: 1; white-space: nowrap; font-family: var(--titulo); color: #fff; text-shadow: 2px 0 var(--moldura-escura), -2px 0 var(--moldura-escura), 0 2px var(--moldura-escura), 0 -2px var(--moldura-escura), 2px 2px var(--moldura-escura), -2px -2px var(--moldura-escura), 2px -2px var(--moldura-escura), -2px 2px var(--moldura-escura); animation: numero-sobe 1.25s cubic-bezier(.2,.7,.3,1) forwards; }
#tela-batalha .numero-flutuante strong { font-size: 2rem; letter-spacing: .02em; }
#tela-batalha .numero-flutuante small { margin-bottom: 2px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
#tela-batalha .numero-flutuante.critico { color: #ffd23f; }
#tela-batalha .numero-flutuante.critico strong { font-size: 2.6rem; }
#tela-batalha .numero-flutuante.veneno { color: #8be04e; }
#tela-batalha .numero-flutuante.queimadura { color: #ff9a3c; }
#tela-batalha .numero-flutuante.sangramento { color: #ff5a6a; }
#tela-batalha .numero-flutuante.maldicao { color: #c79bff; }
#tela-batalha .numero-flutuante.cura { color: #6dea94; }
#tela-batalha .numero-flutuante.mana { color: #5cc8ff; }
#tela-batalha .numero-flutuante.neutro { color: #d8cdb4; }
#tela-batalha .numero-flutuante.neutro strong { font-size: 1.4rem; }
/* debuff que pegou: etiqueta em vez de número */
#tela-batalha .numero-flutuante.debuff strong { font-size: 1rem; padding: 3px 9px; border: 2px solid currentColor; border-radius: 4px; background: rgba(36,28,19,.85); text-shadow: none; }
#tela-batalha .numero-flutuante.debuff.controle { color: #ffe08a; }
@keyframes numero-sobe {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); }
  12% { opacity: 1; transform: translate(-50%, -6px) scale(1.18); }
  24% { transform: translate(-50%, -12px) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -64px) scale(1); }
}
#tela-batalha .combatente.atingido { animation: atingido .32s ease-out; }
@keyframes atingido {
  0%, 100% { translate: 0 0; filter: drop-shadow(0 12px 5px rgba(0,0,0,.42)); }
  20% { translate: -7px 0; filter: drop-shadow(0 12px 5px rgba(0,0,0,.42)) brightness(2.2) saturate(.3); }
  45% { translate: 6px 0; }
  70% { translate: -3px 0; }
}
@media (prefers-reduced-motion: reduce) {
  #tela-batalha .numero-flutuante { animation: numero-some 1.25s linear forwards; }
  #tela-batalha .combatente.atingido { animation: none; }
}
@keyframes numero-some { 0%, 70% { opacity: 1; transform: translate(-50%, -12px); } 100% { opacity: 0; transform: translate(-50%, -12px); } }
@media (max-width: 760px) {
  #tela-batalha .numero-flutuante strong { font-size: 1.5rem; }
  #tela-batalha .numero-flutuante.critico strong { font-size: 1.9rem; }
}
/* Fim da batalha: popup no meio da tela, no estilo dos cartões, com o resto escurecido */
#tela-batalha .resultado:not([hidden]) { position: fixed; z-index: 50; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; padding: 22px 24px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; background: linear-gradient(145deg, rgba(36,28,19,.99), rgba(21,17,13,.97)); border: 3px solid var(--ouro); border-radius: 4px; box-shadow: 0 5px 0 var(--moldura-escura), 0 14px 30px rgba(0,0,0,.55), 0 0 0 100vmax rgba(6,4,2,.62); animation: resultado-entra .22s ease-out; }
@keyframes resultado-entra { from { opacity: 0; transform: translate(-50%, -46%); } }
#tela-batalha .resultado p { font-size: 2rem; letter-spacing: .04em; color: #f5dc8a; text-shadow: 2px 2px var(--moldura-escura); }
#tela-batalha .resultado[data-fim="derrota"] { border-color: #d0606a; }
#tela-batalha .resultado[data-fim="derrota"] p { color: #ff8a8a; }
#tela-batalha .resultado[data-fim="fuga"] p { color: #c9b994; }
#tela-batalha .resultado-resumo { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 4px; }
#tela-batalha .resultado-resumo li { display: flex; gap: 8px; align-items: baseline; padding: 6px 10px; border: 2px solid var(--moldura-borda-suave); border-radius: 4px; background: rgba(230,194,90,.07); color: #f0e6c8; text-align: left; }
#tela-batalha .resultado[data-fim="derrota"] .resultado-resumo li { background: rgba(240,77,92,.08); color: #f3c9c4; }
#tela-batalha .resultado button { margin-top: 4px; }
/* Registro do combate no estilo dos cartões: ícone e borda colorida por quem agiu */
#tela-batalha > .painel { margin: 14px 0 0; padding: 14px 18px; background: linear-gradient(145deg, rgba(36,28,19,.97), rgba(21,17,13,.92)); border: 3px solid var(--ouro); border-radius: 4px; box-shadow: 0 5px 0 var(--moldura-escura), 0 10px 22px rgba(0,0,0,.42); }
#tela-batalha > .painel h2 { margin: 0 0 8px; color: #f6ecd6; font-size: 1.05rem; text-shadow: 2px 2px var(--moldura-escura); }
#tela-batalha .log { max-height: 300px; }
#tela-batalha .log li { display: flex; gap: 8px; align-items: baseline; margin: 2px 0; padding: 5px 8px; border: 0; border-radius: 3px; background: rgba(200,163,90,.05); color: var(--texto); font-style: normal; }
#tela-batalha .log .log-icone { flex: none; width: 1.2em; text-align: center; color: var(--ouro); }
/* quem agiu: a cor vai no ícone e no texto (sem faixa lateral) */
#tela-batalha .log .jogador .log-icone { color: var(--destaque); }
#tela-batalha .log .monstro { color: #f3c9c4; }
#tela-batalha .log .monstro .log-icone { color: #f04d5c; }
#tela-batalha .log .efeito { color: #c3b4e2; font-style: italic; }
#tela-batalha .log .efeito .log-icone { color: #b07ae0; }
#tela-batalha .log .cura, #tela-batalha .log .buff { color: #a6e6bd; }
#tela-batalha .log .cura .log-icone, #tela-batalha .log .buff .log-icone { color: #4cd07a; }
#tela-batalha .log .vitoria { color: #f5dc8a; background: rgba(230,194,90,.08); }
#tela-batalha .log .vitoria .log-icone { color: #e6c25a; }
#tela-batalha .log .derrota { color: #ff9a9a; background: rgba(240,77,92,.08); }
#tela-batalha .log .derrota .log-icone { color: #f04d5c; }
#tela-batalha .log .turno { justify-content: center; margin-top: 10px; padding: 6px 0 2px; border-top: 1px solid rgba(200,163,90,.28); border-radius: 0; background: none; color: var(--ouro); font-family: var(--titulo); font-size: .78rem; letter-spacing: .06em; }
#tela-batalha .log .turno:first-child { margin-top: 0; border-top: 0; }
#tela-batalha .log .dano, #tela-batalha .resultado-resumo .dano { color: #fff; }
#tela-batalha .log .critico { color: #ffcf4a; font-weight: 700; }
@media (max-width: 760px) {
  #tela-batalha .arena { min-height: 560px; padding: 12px 8px 16px; grid-template-rows: minmax(380px, auto) auto; gap: 8px; }
  #tela-batalha .lado-batalha .cartao { width: min(150px, 100%); padding: 0; }
  #tela-batalha .cartao-hud { padding: 5px; }
  #tela-batalha .cartao-cabecalho img { width: 26px; height: 26px; }
  #tela-batalha .cartao h3 { font-size: .7rem; }
  #tela-batalha .cartao .sub { font-size: .6rem; }
  #tela-batalha .cartao .combatente { --combat-tamanho: 105px; }
  #tela-batalha .lado-batalha.varios .combatente { --combat-tamanho: 82px; }
  #tela-batalha .arena[data-batalha-unidades="3"], #tela-batalha .arena[data-batalha-unidades="4"] { grid-template-rows: minmax(550px, auto) auto; }
  #tela-batalha .acoes { grid-template-columns: repeat(4, 1fr); margin: 0; padding: 8px; gap: 6px; }
  #tela-batalha .acoes button { min-height: 84px; }
  #tela-batalha .acao-icone { height: 34px; font-size: 1.6rem; line-height: 34px; }
}

table.numeros { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
table.numeros td { padding: 3px 0; border-bottom: 1px solid rgba(200, 163, 90, 0.08); }
table.numeros td:last-child { text-align: right; color: var(--ouro-claro); }

@media (max-width: 760px) {
  .arena { grid-template-columns: 1fr; }
  .versus { text-align: center; }
  .colunas { grid-template-columns: 1fr; }
}

/* ================= JOGO: mapa, HUD, diálogo ================= */
:root { --exp: #c8a35a; }
.topo a, .botao-link { color: var(--ouro-claro); }
.botao-link { background: none; border: 0; padding: 0; font-family: var(--corpo); text-decoration: underline; cursor: pointer; }
.rodape { text-align: center; margin: 8px 0 0; }

#tela-mapa { max-width: 1120px; margin: 0 auto; }
/* Painéis laterais: só no desktop largo (o personagem à esquerda, as quests à direita) */
.lateral { display: none; }
@media (min-width: 1280px) {
  #tela-mapa:not([hidden]) { max-width: 1480px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; justify-content: center; }
  #lateral-personagem { display: none; } /* o personagem fica no HUD dentro do mapa e em Atributos */
  .lateral { display: block; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; margin-top: 12px; }
  .lateral h2 { margin-top: 0; }
}
tr.apagada td { color: var(--apagado); }
.destaque-treino { color: var(--ouro-claro); font-style: normal; }
.hud { display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; }
.hud-esquerda { min-width: 0; flex: 1 1 260px; }
.hud-esquerda strong { font-family: var(--titulo); color: var(--ouro-claro); margin-right: 8px; }
.hud-esquerda span { color: var(--apagado); font-size: 0.9rem; }
.hud-barras { max-width: 320px; }
.hud-direita { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.barra.fina { height: 14px; }
.barra.fina em { line-height: 12px; font-size: 0.72rem; }
.barra .exp { background: var(--exp); opacity: 0.8; }

/* Marca da Hubris: a cor muda com a faixa de risco (GDD 02-Regras §8.6) */
.marca { font-family: var(--titulo); font-size: 0.75rem; letter-spacing: 0.08em; padding: 4px 10px; border: 1px solid; }
.marca-cinza { color: #9a9488; border-color: #6b665d; }
.marca-amarelo { color: #e0c34a; border-color: #b39a2c; }
.marca-laranja { color: #e08a3c; border-color: #b0652a; animation: pulsa 2s ease-in-out infinite; }
.marca-vermelho { color: #d0493a; border-color: #a0362b; animation: pulsa 1s ease-in-out infinite; }
.marca-maximo { color: #ff4d3a; border-color: #ff4d3a; animation: pulsa 0.6s ease-in-out infinite; }
@keyframes pulsa { 50% { opacity: 0.55; } }

.tela-jogo { position: relative; border: 2px solid var(--ouro); background: #000; aspect-ratio: 3 / 2; max-width: 100%; }
#canvas-mapa { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.tela-jogo.piscando { animation: piscar 0.6s steps(2, end); }
@keyframes piscar { 0%, 100% { filter: none; } 25%, 75% { filter: invert(1) brightness(1.6); } }

.nome-mapa { position: absolute; bottom: 12px; left: 12px; z-index: 3; background: rgba(12, 10, 8, 0.85); border: 1px solid var(--ouro); padding: 6px 14px; font-family: var(--titulo); color: var(--ouro-claro); letter-spacing: 0.06em; }
/* Letreiro do lugar (cidades): aparece no topo, no meio, quando o jogador chega na frente de um prédio ou numa saída */
.local-atual { position: absolute; top: 10px; left: 50%; z-index: 1; display: flex; align-items: center; gap: 10px; max-width: min(70%, 460px); padding: 7px 16px 7px 10px; background: linear-gradient(#2a2117, #17120d); border: 2px solid var(--ouro); box-shadow: 0 0 0 2px #0c0a08, 0 4px 14px rgba(0, 0, 0, 0.6); pointer-events: none; opacity: 0; transform: translate(-50%, -8px); transition: opacity 0.2s ease-out, transform 0.2s ease-out; }
.local-atual.visivel { opacity: 1; transform: translate(-50%, 0); }
.local-atual .local-icone { width: 36px; height: 36px; flex: none; image-rendering: pixelated; }
.local-atual .local-seta { flex: none; color: var(--ouro-claro); font-size: 1.4rem; line-height: 1; }
.local-atual div { min-width: 0; }
.local-atual strong { display: block; font-family: var(--titulo); color: var(--ouro-claro); letter-spacing: 0.04em; font-size: 1rem; }
.local-atual small { display: block; color: var(--texto); font-size: 0.85rem; line-height: 1.3; }
@media (prefers-reduced-motion: reduce) { .local-atual { transition: opacity 0.2s; transform: translate(-50%, 0); } }
@media (max-width: 560px) { .local-atual { max-width: 62%; top: 6px; padding: 5px 10px 5px 6px; gap: 6px; } .local-atual .local-icone { width: 24px; height: 24px; } .local-atual strong { font-size: 0.85rem; } .local-atual small { font-size: 0.75rem; } }
/* Diálogo com NPC: retrato à esquerda, aba com o nome em cima da caixa, ▼ para continuar, Sim/Não na oferta de quest */
.dialogo { --dlg-fundo: #15110d; --dlg-borda: var(--ouro); --dlg-escura: var(--moldura-escura);
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 5; display: flex; align-items: flex-end; gap: 8px; cursor: pointer; } /* acima do minimapa e da barra de mineração */
.dialogo-retrato, .dialogo-caixa { background: linear-gradient(160deg, #2c2318, var(--dlg-fundo) 60%); border: 3px solid var(--dlg-borda); border-radius: 6px; box-shadow: 0 0 0 2px var(--dlg-escura), inset 0 0 0 2px rgba(200,163,90,.18), 0 8px 18px rgba(0,0,0,.45); }
.dialogo-retrato { flex: none; width: 92px; height: 92px; padding: 4px; }
.dialogo-retrato canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; background: radial-gradient(circle at 50% 35%, #3a2e1f, #120e0a 75%); border-radius: 3px; }
.dialogo-caixa { position: relative; flex: 1; min-width: 0; min-height: 92px; margin-top: 18px; padding: 18px 18px 12px; color: var(--texto); }
.dialogo-nome { position: absolute; left: 12px; top: -17px; padding: 4px 16px; font-family: var(--titulo); font-size: .92rem; letter-spacing: .04em; color: #f6ecd6;
  background: linear-gradient(180deg, #3a2c1a, #1d1610); border: 3px solid var(--dlg-borda); border-radius: 5px; text-shadow: 1px 1px var(--moldura-escura); }
.dialogo-nome[hidden] { display: none; }
.dialogo-caixa > p { margin: 4px 0; line-height: 1.45; text-shadow: 1px 1px var(--moldura-escura); }
.dialogo-seta { position: absolute; right: 12px; bottom: 6px; color: #c9b994; font-size: .8rem; animation: dialogo-seta 1s ease-in-out infinite; }
.dialogo.com-opcoes .dialogo-seta { display: none; }
@keyframes dialogo-seta { 50% { transform: translateY(3px); opacity: .55; } }
.dialogo-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(200,163,90,.3); cursor: default; }
.dialogo-opcoes[hidden] { display: none; }
.dialogo-pergunta { grid-column: 1 / -1; margin: 0; color: #c9b994; font-size: .9rem; }
.dialogo-opcoes button { position: relative; min-height: 40px; padding: 6px 14px 6px 30px; text-align: left; font-family: var(--corpo); font-size: 1rem; color: var(--texto);
  background: linear-gradient(180deg, #2a2117, #17120d); border: 2px solid var(--moldura-borda-suave); border-radius: 6px; cursor: pointer; }
.dialogo-opcoes button.ativo, .dialogo-opcoes button:hover, .dialogo-opcoes button:focus-visible { border-color: var(--destaque); box-shadow: 0 0 0 1px var(--destaque), 0 0 12px rgba(255,217,138,.35); color: #fff; outline: none; }
.dialogo-opcoes button.ativo::before { content: '▶'; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #fff2cc; font-size: .8rem; }
@media (prefers-reduced-motion: reduce) { .dialogo-seta { animation: none; } }

.controles { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.controles .dica { flex: 1 1 300px; margin: 8px 0; }
/* Toque: direcional à esquerda e o botão de falar à direita, como num portátil */
.toque { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; }
.dpad { display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(3, 52px); gap: 4px; }
.dpad button, .botao-falar { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.dpad button { padding: 0; background: var(--painel-2); color: var(--ouro-claro); border-color: var(--linha); font-size: 1.1rem; }
.dpad button:active { background: #2a2219; border-color: var(--ouro); }
.dpad [data-dir="cima"] { grid-column: 2; grid-row: 1; }
.dpad [data-dir="esquerda"] { grid-column: 1; grid-row: 2; }
.dpad [data-dir="direita"] { grid-column: 3; grid-row: 2; }
.dpad [data-dir="baixo"] { grid-column: 2; grid-row: 3; }
.botao-falar { width: 80px; height: 80px; margin-right: 8px; padding: 0; border-radius: 50%; border: 2px solid var(--ouro-claro); background: var(--ouro); color: #1a130a; font-weight: 700; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25); }
.botao-falar:active { background: var(--ouro-claro); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); }
.so-toque { display: none; }
@media (hover: none), (pointer: coarse) { .so-teclado { display: none; } .so-toque { display: block; } }
@media (hover: hover) and (pointer: fine) { .toque { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .marca-laranja, .marca-vermelho, .marca-maximo, .tela-jogo.piscando { animation: none; }
}

/* ================= Atributos ================= */
.colunas-atributos { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; margin-top: 12px; }
.colunas-atributos > div { min-width: 0; }
.pontos-restantes { font-family: var(--titulo); color: var(--ouro); margin: 0 0 8px; }
.pontos-restantes strong { color: var(--ouro-claro); font-size: 1.2rem; }
.lista-atributos { display: flex; flex-direction: column; gap: 6px; }
.linha-atributo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(200, 163, 90, 0.1); }
.atributo-info { min-width: 0; }
.atributo-info strong { font-family: var(--titulo); color: var(--ouro-claro); }
.atributo-info span { color: var(--apagado); font-size: 0.9rem; }
.atributo-info .estrelas { color: var(--ouro); margin-left: 6px; letter-spacing: 1px; }
.atributo-info small { display: block; color: var(--apagado); font-size: 0.8rem; }
.atributo-controle { display: flex; align-items: center; gap: 8px; flex: none; }
.atributo-controle button { width: 34px; height: 34px; padding: 0; background: var(--painel-2); color: var(--ouro-claro); border-color: var(--linha); font-size: 1.1rem; }
.atributo-controle button:disabled { opacity: 0.35; cursor: not-allowed; }
.atributo-controle output { min-width: 2.5ch; text-align: center; font-variant-numeric: tabular-nums; font-size: 1.1rem; }
.botao-secundario.destaque { background: var(--ouro); color: #1a130a; }
.erro { color: var(--ruim); font-style: normal; }
@media (max-width: 760px) { .colunas-atributos { grid-template-columns: 1fr; } }

/* ================= Personagem e inventário ================= */
:root { --raro: #5b8fe0; --lendario: #e0913a; }
#tela-inventario { max-width: 1400px; margin: 0 auto; }
.inv-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; }
.inv-topo h2 { margin: 0; }
.inv-topo small { font-family: var(--corpo); color: var(--apagado); letter-spacing: 0; }
.inv-layout { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(250px, 1.1fr) minmax(300px, 1.5fr) minmax(240px, 1.1fr); gap: 12px; align-items: start; }
.inv-painel { background: var(--painel); border: 1px solid var(--linha); outline: 1px solid rgba(200, 163, 90, 0.08); outline-offset: 3px; padding: 14px; min-width: 0; }
.inv-painel h3 { font-family: var(--titulo); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ouro); margin: 14px 0 4px; }
.inv-painel h3 small { font-family: var(--corpo); text-transform: none; letter-spacing: 0; color: var(--ouro-claro); }

.inv-retrato { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.inv-retrato strong { display: block; font-family: var(--titulo); color: var(--ouro-claro); font-size: 1.15rem; }
.inv-retrato span { display: block; color: var(--apagado); font-size: 0.9rem; }
.inv-boneco { width: 64px; height: 64px; image-rendering: pixelated; border: 1px solid var(--ouro); border-radius: 50%; background: radial-gradient(circle, #2a2219, #0c0a08); flex: none; }

.inv-equip { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.inv-equip-coluna { display: flex; flex-direction: column; gap: 8px; }
.inv-silhueta { width: 100%; max-width: 180px; justify-self: center; aspect-ratio: 1; image-rendering: pixelated; opacity: 0.9; background: radial-gradient(circle at 50% 60%, #241d15, transparent 70%); }

.inv-celula { position: relative; width: 56px; height: 56px; padding: 6px; background: #100d0a; border: 1px solid var(--linha); display: grid; place-items: center; color: var(--apagado); }
.item-icone { display: block; background-repeat: no-repeat; image-rendering: pixelated; pointer-events: none; }
.oficina-receita { display: flex; gap: 10px; align-items: center; }
.oficina-receita > span:last-child { min-width: 0; }
.oficina-receita-icone { display: block; width: 32px; height: 32px; flex: 0 0 32px; }
.oficina-receita-icone svg { width: 100%; height: 100%; }
.inv-celula svg, .inv-celula .item-icone { width: 100%; height: 100%; }
button.inv-celula:not(:disabled):hover, .inv-celula.marcada { border-color: var(--ouro-claro); box-shadow: 0 0 0 1px var(--ouro-claro), 0 0 10px rgba(230, 201, 140, 0.25); }
.inv-celula.vazia { cursor: default; }
button.inv-celula.vazia[data-origem="equipado"] { cursor: pointer; }
.inv-celula.raridade-raro { border-color: var(--raro); }
.inv-celula.raridade-lendario { border-color: var(--lendario); box-shadow: inset 0 0 10px rgba(224, 145, 58, 0.25); }
.inv-celula.bloqueada svg, .inv-celula.bloqueada .item-icone { opacity: 0.45; }
.inv-celula.bloqueada::after { content: ""; position: absolute; inset: 0; background: rgba(176, 58, 46, 0.12); }
.inv-rotulo { font-family: var(--titulo); font-size: 0.6rem; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(168, 153, 125, 0.6); }
.inv-qtd, .inv-encanto { position: absolute; font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--texto); text-shadow: 0 1px 2px #000; }
.inv-qtd { right: 4px; bottom: 1px; }
.inv-encanto { left: 4px; top: 1px; color: var(--ouro-claro); }
.inv-celula.grande { width: 72px; height: 72px; flex: none; }

.inv-abas { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.inv-abas button { padding: 6px 10px; font-size: 0.75rem; background: var(--painel-2); color: var(--apagado); border-color: var(--linha); }
.inv-abas button.ativa { color: var(--ouro-claro); border-color: var(--ouro); }
.inv-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.inv-grade .inv-celula { width: auto; height: auto; aspect-ratio: 1; }
.inv-contador { text-align: right; color: var(--apagado); font-size: 0.85rem; margin: 10px 0 0; }
.inv-contador strong { color: var(--ouro-claro); font-variant-numeric: tabular-nums; }

.inv-vazio { text-align: center; padding: 40px 0; }
.inv-detalhe-topo { display: flex; gap: 12px; align-items: center; }
.inv-detalhe-topo strong { display: block; font-family: var(--titulo); font-size: 1.1rem; color: var(--ouro-claro); }
.inv-detalhe-topo span, .inv-detalhe-topo small { display: block; }
.inv-detalhe-topo small { color: var(--apagado); }
.texto-raro { color: var(--raro) !important; }
.texto-lendario { color: var(--lendario) !important; }
.inv-principal { font-size: 1.05rem; margin: 14px 0 6px; padding-top: 10px; border-top: 1px solid var(--linha); }
.inv-principal strong { font-family: var(--titulo); color: var(--ouro-claro); font-size: 1.3rem; margin-left: 6px; }
.inv-bonus { list-style: none; padding: 0; margin: 0 0 8px; }
.inv-bonus li::before { content: "◆ "; color: var(--ouro); font-size: 0.7rem; }
.inv-conjunto { font-size: 0.9rem; color: var(--bom); }
.inv-requisito { color: var(--apagado); font-size: 0.9rem; border-top: 1px solid var(--linha); padding-top: 8px; }
.inv-compara { font-size: 0.9rem; }
.inv-compara.melhor { color: var(--bom); }
.inv-compara.pior { color: var(--ruim); }
.inv-acoes { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.inv-acao { background: transparent; color: var(--ouro-claro); text-align: left; }
.inv-acao:hover:not(:disabled) { background: rgba(200, 163, 90, 0.12); }
.inv-acao:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 1150px) { .inv-layout { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .inv-layout { grid-template-columns: 1fr; }
  .inv-celula { width: 48px; height: 48px; }
}

/* ================= Loja (por cima do mapa; client/loja-ui.js) =================
   Herói e ouro em cima; abas e lista à esquerda; o item à direita; a fala do mercador embaixo.
   Mesma moldura do resto do jogo (tokens --moldura-* no :root). */
.loja-sobreposta { position: absolute; inset: 0; z-index: 6; display: grid; padding: 12px; overflow: hidden; background: radial-gradient(ellipse at center, rgba(10, 7, 5, 0.15), rgba(10, 7, 5, 0.6)); }
.loja-tela { width: 100%; height: 100%; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "heroi ouro" "esquerda detalhe" "fala fala"; gap: 10px 14px; align-items: start; }
.loja-moldura { background: var(--moldura-fundo); border: 3px solid var(--ouro); border-radius: var(--moldura-raio); box-shadow: var(--moldura-sombra); }
.loja-heroi { grid-area: heroi; justify-self: start; display: flex; gap: 12px; align-items: center; padding: 8px 14px 8px 8px; min-width: min(340px, 100%); }
.loja-retrato { position: relative; flex: none; width: 64px; height: 64px; overflow: hidden; border: 2px solid var(--moldura-borda-suave); border-radius: 4px; background: radial-gradient(circle at 50% 35%, #3a2e1f, #120e0a 75%); }
/* a folha do personagem (8 fileiras): o quadro de frente, 2x mais perto, centrado no boneco */
.loja-retrato img { position: absolute; left: -50%; top: -50%; height: 1600%; width: auto; max-width: none; image-rendering: pixelated; }
.loja-heroi-dados { flex: 1; min-width: 160px; }
.loja-heroi-dados strong { font-family: var(--titulo); color: var(--ouro-claro); }
.loja-heroi-dados small { margin-left: 6px; color: var(--apagado); font-family: var(--corpo); }
.loja-heroi .barra { margin: 4px 0 0; }
.loja-ouro { grid-area: ouro; justify-self: end; display: flex; align-items: center; gap: 12px; padding: 10px 18px; min-width: 220px; font-family: var(--titulo); color: var(--ouro-claro); font-size: 1.15rem; }
.loja-ouro strong { margin-left: auto; font-variant-numeric: tabular-nums; color: #fff4d6; }
.moeda { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -0.15em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1b8, #f0c34a 40%, #b8862a 75%); box-shadow: inset 0 0 0 1.5px #7a5410, 0 1px 0 rgba(0, 0, 0, 0.5); }
.loja-esquerda { grid-area: esquerda; min-width: 0; }
.loja-titulo { display: inline-block; margin: 0 0 -3px 10px; padding: 6px 26px 6px 16px; position: relative; z-index: 1; font-size: 1.15rem; color: #fff4d6; text-transform: none; letter-spacing: 0.04em; background: linear-gradient(180deg, #3a2c1a, #1d1610); border: 3px solid var(--ouro); border-bottom: 0; border-radius: var(--moldura-raio) var(--moldura-raio) 0 0; }
.loja-janela { padding: 10px; }
.loja-abas { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--linha); }
.loja-abas button { flex: 1 1 70px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; min-height: 58px; font-size: 0.78rem; color: var(--texto); background: linear-gradient(180deg, #2a2117, #17120d); border: 2px solid var(--moldura-borda-suave); }
.loja-abas button.ativa { border-color: var(--destaque); color: #fff4d6; box-shadow: 0 0 0 1px var(--destaque), 0 0 12px rgba(255, 217, 138, 0.3); }
.loja-abas button:hover { border-color: var(--ouro); }
.loja-aba-icone { font-size: 1.3rem; line-height: 1.2; filter: drop-shadow(0 1px 1px #000); }
.loja-filtro { flex-direction: row; align-items: center; gap: 8px; margin: 8px 2px 0; font-family: var(--corpo); text-transform: none; letter-spacing: 0; color: var(--apagado); font-size: 0.88rem; }
.loja-contador { margin: 8px 2px 0; color: var(--apagado); font-size: 0.85rem; }
.loja-lista { flex: 1; min-height: 0; overflow-y: auto; margin-top: 8px; padding-right: 4px; scrollbar-color: var(--moldura-borda-suave) transparent; }
.loja-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.loja-linha { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 10px 5px 6px; text-align: left; font-family: var(--corpo); letter-spacing: 0; color: var(--texto); background: rgba(200, 163, 90, 0.04); border: 2px solid transparent; }
.loja-linha:hover { border-color: var(--moldura-borda-suave); }
.loja-linha.marcada { border-color: var(--destaque); background: rgba(255, 217, 138, 0.08); box-shadow: 0 0 0 1px var(--destaque), 0 0 12px rgba(255, 217, 138, 0.25); }
.loja-linha.bloqueada { opacity: 0.68; } /* ainda não dá para usar (nível ou classe): continua legível */
.loja-icone { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 4px; background: #120e0a; border: 1px solid rgba(200, 163, 90, 0.3); }
.loja-icone svg, .loja-icone .item-icone { width: 26px; height: 26px; }
.loja-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loja-nome small { color: var(--apagado); font-size: 0.78rem; }
.loja-nome.texto-comum { color: var(--texto); } /* na lista, só raro e lendário ganham cor */
.loja-preco { display: flex; align-items: center; gap: 6px; font-family: var(--titulo); color: #fff4d6; font-variant-numeric: tabular-nums; }
.loja-detalhe { grid-area: detalhe; padding: 12px 14px; min-width: 0; max-height: 100%; overflow-y: auto; }
.loja-esquerda { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.loja-janela { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.loja-acoes { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linha); }
.loja-compra { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 8px 0; }
.loja-valor { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 14px; border: 2px solid var(--moldura-borda-suave); border-radius: var(--moldura-raio); background: #120e0a; }
.loja-valor strong { font-family: var(--titulo); color: #fff4d6; font-size: 1.2rem; }
.loja-quantidade { display: flex; align-items: center; gap: 8px; }
.loja-quantidade button { width: 40px; height: 36px; padding: 0; background: linear-gradient(180deg, #2a2117, #17120d); color: var(--ouro-claro); border: 2px solid var(--moldura-borda-suave); }
.loja-quantidade button:disabled { opacity: 0.35; cursor: not-allowed; }
.loja-quantidade output { min-width: 3ch; text-align: center; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.loja-botao { width: 100%; margin-top: 6px; padding: 12px 16px; font-size: 1.05rem; }
.loja-botao:disabled { filter: grayscale(0.8) brightness(0.7); cursor: not-allowed; }
.loja-botao.perigo { background: linear-gradient(180deg, #e88a6a, var(--ruim) 55%, #9a3a26); }
.inv-acao.perigo { border-color: var(--ruim); color: var(--ruim); }
.loja-fala { grid-area: fala; padding: 12px 18px; min-height: 64px; }
.loja-fala-nome { display: block; font-family: var(--titulo); color: var(--ouro); font-size: 0.85rem; letter-spacing: 0.05em; }
.loja-fala p { margin: 2px 0 0; font-size: 1.05rem; }
.loja-fala p.erro { color: var(--ruim); }
@media (max-width: 760px) {
  .loja-sobreposta { position: fixed; z-index: 40; padding: 8px; overflow-y: auto; }
  .loja-tela { height: auto; grid-template-rows: none; }
  .loja-esquerda, .loja-janela { height: auto; }
  .loja-tela { grid-template-columns: 1fr; grid-template-areas: "ouro" "esquerda" "detalhe" "fala"; gap: 10px; }
  .loja-heroi { display: none; }
  .loja-ouro { justify-self: stretch; }
  .loja-lista, .loja-detalhe { max-height: none; }
  .loja-abas button { flex-basis: 30%; }
}

/* ================= Materiais e trocas ================= */
.inv-descricao { color: var(--apagado); font-size: 0.9rem; }
.inv-atributos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.inv-atributos .inv-acao { text-align: center; padding: 8px 4px; }
.inv-atributos small { display: block; font-family: var(--corpo); color: var(--apagado); letter-spacing: 0; }
#tela-trocas { max-width: 1000px; margin: 0 auto; }
.trocas-layout { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.2fr); gap: 12px; align-items: start; }
.troca { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--linha); }
.troca strong { font-family: var(--titulo); color: var(--ouro-claro); }
.troca small { display: block; color: var(--apagado); }
.troca .inv-acao { text-align: center; }
.troca-barra { grid-column: 1 / -1; height: 6px; background: #2a231b; }
.troca-barra span { display: block; height: 100%; background: var(--ouro); }
@media (max-width: 640px) { .trocas-layout { grid-template-columns: 1fr; } }

/* ================= Quests ================= */
.quest { border-top: 1px solid var(--linha); padding: 10px 0; }
.quest h3 { font-family: var(--titulo); color: var(--ouro-claro); font-size: 1rem; margin: 0; }
.quest h3 small { font-family: var(--corpo); color: var(--apagado); font-size: 0.8rem; margin-left: 6px; }
.quest .dica { margin: 4px 0; }
.quest ul { list-style: none; padding: 0; margin: 6px 0; }
.quest li { padding: 2px 0; }
.quest li.feito { color: var(--bom); }
.quest li strong { font-variant-numeric: tabular-nums; color: var(--ouro-claro); }
.quest-recompensa { font-size: 0.9rem; color: var(--apagado); margin: 4px 0 0; }
.quest.pronta { background: rgba(200, 163, 90, 0.08); padding: 10px; }
.quest-acoes { margin-top: 6px; }
.quest-acoes .botao-link { color: var(--apagado); font-size: 0.85rem; }
.quest-acoes .inv-acao { display: inline-block; width: auto; padding: 6px 12px; }
.quest.pronta .quest-recompensa strong { color: var(--ouro-claro); }

/* A história acompanha o diário sem disputar a atenção com as tarefas. */
.quest-historia { margin: 8px 0 12px; padding: 12px; border: 1px solid rgba(121, 200, 255, 0.3); border-left: 3px solid #789cb9; border-radius: 4px; background: linear-gradient(150deg, rgba(54, 83, 106, 0.2), rgba(14, 21, 28, 0.45)); overflow-wrap: anywhere; }
.quest-historia h3 { margin: 0 0 6px; font: 0.95rem var(--titulo); color: #a8c7df; }
.quest-historia p { margin: 5px 0; }
.quest-historia-rotulo { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; font-size: 0.76rem; color: #9cbcd4; }
.quest-historia-rotulo span { font-variant-numeric: tabular-nums; color: var(--apagado); }
.quest-historia-etapa { color: #c0d2df; font-size: 0.85rem; }
.quest-historia-objetivo { font-size: 0.95rem; line-height: 1.4; }
.quest-historia-destino, .quest-historia-gancho { font-size: 0.85rem; color: var(--apagado); }
.quest-historia-destino strong { color: #b8cedf; font-weight: 600; }
.quest-historia .dica { font-size: 0.78rem; }
.quest-historia-contagem { display: block; margin-top: 3px; font: 0.76rem var(--corpo); color: #9cbcd4; letter-spacing: 0; text-transform: none; }
.quests-grupo { margin: 14px 0 4px; font: 0.78rem var(--titulo); color: var(--apagado); }
.quest-principal h3 { color: #a8c7df; }
.quest-principal.pronta { background: rgba(83, 121, 148, 0.12); }
@media (max-width: 760px) { .quest-historia { padding: 10px; } }

/* ================= Serviços (banco, templo) ================= */
.servico-sobreposta { position: absolute; inset: 0; z-index: 6; display: grid; padding: 12px; overflow: hidden; background: radial-gradient(ellipse at center, rgba(10, 7, 5, 0.15), rgba(10, 7, 5, 0.6)); }
.servico-tela { width: min(760px, 100%); height: 100%; min-height: 0; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.servico-moldura { background: var(--moldura-fundo); border: 3px solid var(--ouro); border-radius: var(--moldura-raio); box-shadow: var(--moldura-sombra); }
.servico-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; flex: none; }
.servico-cabecalho h2 { margin: 0; color: #fff4d6; font-size: 1.2rem; }
.servico-kicker { display: block; color: var(--ouro); font: 0.68rem var(--titulo); letter-spacing: .12em; }
.servico-painel { min-height: 0; overflow-y: auto; padding: 14px 16px; width: 100%; }
.servico-npc { font-family: var(--titulo); color: var(--ouro); letter-spacing: 0.06em; margin-top: 0; }
.servico-quantia { max-width: 220px; margin: 12px 0; }
/* Caixa de seleção (destinos do Teleportador) */
.servico-escolha { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin: 12px 0; }
.servico-escolha label { display: grid; gap: 4px; flex: 1 1 220px; }
.servico-escolha select { font: inherit; padding: 8px; border-radius: 6px; border: 1px solid rgba(232, 200, 120, 0.35); background: #1b1610; color: inherit; min-height: 40px; }
.servico-seletor { display: grid; gap: 5px; margin: 12px 0 8px; color: var(--apagado); }
.servico-seletor select { font: inherit; padding: 9px 10px; border-radius: 5px; border: 2px solid var(--moldura-borda-suave); background: #1b1610; color: var(--texto); min-height: 42px; }
.servico-item-detalhe { padding: 12px 0; border-top: 1px solid var(--linha); }
.servico-item-detalhe strong { font-family: var(--titulo); color: var(--ouro-claro); }
.servico-mini-inventario-wrap { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--linha); }
.servico-mini-inventario-wrap h3 { margin: 8px 0 4px; font: .85rem var(--titulo); color: var(--ouro); }
.servico-mini-inventario { display: flex; flex-wrap: wrap; gap: 6px; }
.servico-mini-inventario .inv-celula { width: 52px; height: 52px; }
/* Oficina: seleção à esquerda, ação sempre visível à direita; inventário paginado. */
#tela-servico.servico-oficina { position: fixed; inset: 0; z-index: 40; padding: 16px; overflow: hidden; background: rgba(7, 5, 3, .75); }
#tela-servico.servico-oficina .servico-tela { width: min(1180px, 100%); height: 100%; min-height: 0; gap: 10px; }
#tela-servico.servico-oficina .servico-cabecalho { position: static; }
#tela-servico.servico-oficina .servico-painel { flex: 1; min-height: 0; overflow: hidden; padding: 14px 18px; margin: 0; }
#tela-servico.servico-oficina #servico-conteudo { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 10px; }
.servico-oficina .oficina-intro { display: flex; align-items: start; gap: 18px; flex: none; font-size: .84rem; }
.servico-oficina .oficina-intro > div { min-width: 0; }
.servico-oficina .oficina-intro p { margin: 0 0 2px; }
.servico-oficina .servico-npc { flex: none; font-size: .86rem; margin: 0; }
.servico-oficina .oficina-abas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; flex: none; }
.servico-oficina .oficina-abas button, .servico-oficina .oficina-detalhe-abas button { padding: 8px 10px; background: #1b1610; color: var(--apagado); border-color: var(--moldura-borda-suave); font-size: .74rem; }
.servico-oficina .oficina-abas button.ativa, .servico-oficina .oficina-detalhe-abas button.ativa { color: var(--ouro-claro); border-color: var(--ouro-claro); background: #352918; }
.servico-oficina .oficina-corpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(260px, .9fr) minmax(0, 1.1fr); gap: 18px; }
.servico-oficina .oficina-selecao, .servico-oficina .oficina-detalhe { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 12px; border: 1px solid var(--moldura-borda-suave); background: rgba(9, 7, 4, .25); border-radius: 4px; }
.servico-oficina .oficina-corpo h3 { flex: none; margin: 0 0 10px; font: .8rem var(--titulo); color: var(--ouro); }
.servico-oficina .oficina-filtros { display: flex; gap: 6px; margin-bottom: 10px; }
.servico-oficina .oficina-filtros > * { width: 50%; flex: 1; padding: 7px 9px; font-size: .8rem; }
.servico-oficina .oficina-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 76px; gap: 8px; align-content: start; flex: 1; min-height: 0; }
.servico-oficina .oficina-grade .inv-celula { width: 100%; height: 76px; padding: 5px 10px 17px; }
.servico-oficina .oficina-local { position: absolute; bottom: 1px; left: 0; right: 0; color: var(--apagado); text-transform: uppercase; font: .52rem var(--corpo); letter-spacing: .04em; }
.servico-oficina .oficina-receitas { display: grid; align-content: start; gap: 6px; flex: 1; min-height: 0; }
.servico-oficina .oficina-receita { display: flex; align-items: center; gap: 10px; text-align: left; min-width: 0; padding: 8px 10px; background: #1b1610; color: var(--texto); border-color: var(--linha); }
.servico-oficina .oficina-receita strong { display: block; font: .78rem var(--titulo); color: var(--ouro-claro); }
.servico-oficina .oficina-receita small { display: block; font: .74rem var(--corpo); letter-spacing: 0; color: var(--apagado); }
.servico-oficina .oficina-receita.marcada { border-color: var(--ouro-claro); background: #352918; }
.servico-oficina .oficina-paginacao { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; flex: none; }
.servico-oficina .oficina-paginacao button { padding: 2px 12px; background: transparent; color: var(--ouro); font-size: 1.2rem; }
.servico-oficina .oficina-paginacao button:disabled { opacity: .35; cursor: default; }
.servico-oficina .oficina-paginacao span { font-size: .72rem; color: var(--apagado); text-align: center; }
.servico-oficina .oficina-instrucao { flex: none; margin: 8px 0 0; color: var(--apagado); font-size: .74rem; }
.servico-oficina .oficina-detalhe-abas { display: flex; gap: 6px; margin: 0 0 10px; flex: none; }
.servico-oficina .oficina-resumo { min-height: 0; flex: 1; }
.servico-oficina .oficina-item-topo { display: flex; gap: 12px; align-items: center; }
.servico-oficina .oficina-item-topo > div:last-child { min-width: 0; }
.servico-oficina .oficina-item-topo strong { display: block; font: .98rem var(--titulo); color: var(--ouro-claro); }
.servico-oficina .oficina-item-topo small { display: block; color: var(--apagado); font-size: .76rem; }
.servico-oficina .oficina-texto-operacao { margin: 12px 0 0; font-size: .85rem; line-height: 1.45; }
.servico-oficina .oficina-execucao { flex: none; display: grid; gap: 9px; padding-top: 10px; border-top: 1px solid var(--linha); }
.servico-oficina .oficina-execucao .servico-item-botoes { gap: 7px; }
.servico-oficina .oficina-execucao .inv-acao { white-space: normal; padding: 10px 12px; font-size: .78rem; text-align: center; }
.servico-oficina .oficina-execucao .servico-estado { max-width: none; text-align: left; font-size: .78rem; }
.servico-oficina .oficina-opcao { font-size: .65rem; letter-spacing: .05em; }
.servico-oficina .oficina-opcao select { font-size: .8rem; padding: 8px; }
.servico-oficina .oficina-chances { display: grid; gap: 7px; }
.servico-oficina .oficina-chance > span { display: flex; justify-content: space-between; font-size: .74rem; color: var(--apagado); }
.servico-oficina .oficina-chance strong { color: var(--ouro-claro); }
.servico-oficina .oficina-chance > div { height: 6px; background: #17110a; border: 1px solid var(--linha); margin-top: 3px; overflow: hidden; }
.servico-oficina .oficina-chance i { display: block; height: 100%; background: linear-gradient(90deg, #957038, #e5bf69); }
.servico-oficina .oficina-vazio { display: grid; align-content: center; justify-items: center; flex: 1; text-align: center; color: var(--apagado); }
.servico-oficina .oficina-vazio > span { font-size: 3rem; color: var(--ouro); }
.servico-oficina .oficina-vazio p { margin: 8px 0; font-family: var(--titulo); color: var(--ouro-claro); }
.servico-oficina .oficina-vazio small { font-size: .78rem; max-width: 260px; }
.servico-oficina .oficina-rodape { flex: none; min-height: 24px; }
.servico-oficina .oficina-mensagem { margin: 0; font-size: .82rem; line-height: 1.4; }
.servico-oficina .oficina-inspecao { font-size: .77rem; line-height: 1.35; }
.servico-oficina .oficina-inspecao .inv-detalhe-topo { gap: 10px; }
.servico-oficina .oficina-inspecao .inv-detalhe-topo strong { font-size: .92rem; }
.servico-oficina .oficina-inspecao .inv-detalhe-topo small { font-size: .72rem; }
.servico-oficina .oficina-inspecao .inv-principal { font-size: .83rem; margin: 6px 0; padding-top: 6px; }
.servico-oficina .oficina-inspecao .inv-principal strong { font-size: 1rem; }
.servico-oficina .oficina-inspecao p, .servico-oficina .oficina-inspecao ul { margin: 6px 0; }
.servico-oficina .oficina-inspecao .inv-celula.grande { width: 58px; height: 58px; }
@media (min-width: 761px) and (max-height: 740px) {
  #tela-servico.servico-oficina { padding: 10px; }
  #tela-servico.servico-oficina .servico-painel { padding: 10px 14px; }
  #tela-servico.servico-oficina #servico-conteudo { gap: 8px; }
  .servico-oficina .oficina-corpo { gap: 12px; }
  .servico-oficina .oficina-selecao, .servico-oficina .oficina-detalhe { padding: 10px; }
  .servico-oficina .oficina-grade { grid-auto-rows: 64px; gap: 6px; }
  .servico-oficina .oficina-grade .inv-celula { height: 64px; }
  .servico-oficina .oficina-item-topo .inv-celula.grande { width: 60px; height: 60px; }
  .servico-oficina .oficina-inspecao .inv-descricao, .servico-oficina .oficina-inspecao .inv-conjunto { font-size: .71rem; }
}
@media (max-width: 760px), (max-height: 500px) {
  #tela-servico.servico-oficina { padding: 8px; }
  #tela-servico.servico-oficina .servico-painel { overflow-y: auto; padding: 10px; }
  #tela-servico.servico-oficina #servico-conteudo { height: auto; }
  .servico-oficina .oficina-intro { display: block; }
  .servico-oficina .oficina-intro .servico-npc { margin-bottom: 4px; }
  .servico-oficina .oficina-abas { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .servico-oficina .oficina-corpo { display: flex; flex-direction: column; gap: 10px; }
  .servico-oficina .oficina-filtros { flex-wrap: wrap; }
  .servico-oficina .oficina-filtros > * { font-size: 16px; }
  .servico-oficina .oficina-grade { grid-auto-rows: 68px; flex: none; }
  .servico-oficina .oficina-grade .inv-celula { height: 68px; }
  .servico-oficina .oficina-receitas { flex: none; }
  .servico-oficina .oficina-detalhe { scroll-margin-top: 10px; }
  .servico-oficina .oficina-resumo { flex: none; }
  .servico-oficina .oficina-execucao { margin-top: 12px; }
  .servico-oficina .oficina-vazio { min-height: 150px; }
  .servico-oficina .oficina-opcao select { font-size: 16px; }
}
.servico-botoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin-top: 12px; }
.servico-botoes .inv-acao { text-align: center; }

/* ================= Escolha de recompensa ================= */
#tela-escolha { max-width: 1100px; margin: 0 auto; }
.escolha-opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.escolha-opcao { display: flex; flex-direction: column; }
.escolha-opcao .botao-principal { margin-top: auto; }
.escolha-opcao.outra-classe { opacity: 0.75; }

/* Lista do Treinador (e outros serviços com cartões) */
.servico-itens { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.servico-item { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--linha); }
.servico-item strong { font-family: var(--titulo); color: var(--ouro-claro); display: block; }
.servico-item small { color: var(--apagado); display: block; }
.servico-item p { margin: 4px 0 0; font-size: 0.92rem; }
.servico-estado { color: var(--apagado); font-size: 0.85rem; text-align: right; max-width: 180px; }
.servico-item-botoes { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.servico-item.desligado strong { color: var(--apagado); }
.inv-acao.secundario { background: transparent; color: var(--apagado); }
@media (max-width: 640px) { .servico-item { grid-template-columns: 1fr; } .servico-estado { text-align: left; } }
@media (max-width: 760px) { .servico-sobreposta { position: fixed; z-index: 40; padding: 8px; overflow-y: auto; } .servico-tela { height: auto; min-height: 100%; } .servico-cabecalho { position: sticky; top: 0; z-index: 2; } }

/* Tela de criação: cartão da arma inicial (e do escudo que vem junto) */
.cartao-arma h3 { margin: 12px 0 6px; font-family: var(--titulo); color: var(--ouro-claro); font-size: 1rem; }
.cartao-item { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 8px 0; border-top: 1px solid var(--linha); }
.cartao-item strong { color: var(--ouro-claro); }
.cartao-item small { display: block; color: var(--apagado); }
.cartao-item ul { margin: 6px 0 0; padding-left: 18px; }
.cartao-item li { margin: 2px 0; }
.cartao-item li small { display: inline; }

/* Minimapa: canto de cima, à direita do mapa */
.minimapa { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; }
.minimapa[hidden], .minimapa-abrir[hidden] { display: none; }
.minimapa canvas { display: block; width: 132px; height: 132px; border: 1px solid var(--ouro); background: #0c0a08; image-rendering: auto; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
.minimapa[data-tamanho="grande"] canvas { width: 264px; height: 264px; }
.minimapa-barra { display: flex; gap: 3px; pointer-events: auto; }
.minimapa-barra button, .minimapa-destino, .minimapa-abrir { background: rgba(12, 10, 8, 0.85); color: var(--ouro-claro); border: 1px solid var(--ouro); font: inherit; font-size: 0.75rem; min-height: 24px; }
.minimapa-barra button { width: 24px; padding: 0; cursor: pointer; display: grid; place-items: center; }
/* "Marcar caminho" em cima do minimapa, da mesma largura dele */
.minimapa-destino { width: 132px; padding: 0 2px; pointer-events: auto; cursor: pointer; }
.minimapa[data-tamanho="grande"] .minimapa-destino { width: 264px; }
.minimapa-info { max-width: 264px; background: rgba(12, 10, 8, 0.85); color: var(--ouro-claro); padding: 2px 6px; font-size: 0.72rem; text-align: right; }
.minimapa-info:empty { display: none; }

/* Mineração: ponto na cor do minério e a cor de cada qualidade de lingote */
.ponto-minerio { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border: 1px solid #1a140e; vertical-align: middle; }
.lingotes .lingote-perfeito { color: #7fc8ff; }
.lingotes .lingote-transcendente { color: #ffb84a; font-weight: 600; }
/* Login e personagens da conta */
.tela-login { max-width: 420px; margin: 24px auto; }
.tela-login form { display: grid; gap: 12px; }
.tela-login label { display: grid; gap: 4px; }
.tela-login form .dica { margin: 0; }
.tela-login form .dica:empty { min-height: 0; }
.login-abas { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--linha); margin-bottom: 8px; }
.login-abas button { background: none; border: none; border-bottom: 2px solid transparent; color: var(--apagado); font: inherit; font-family: var(--titulo); padding: 10px; cursor: pointer; }
.login-abas button.ativa { color: var(--ouro-claro); border-bottom-color: var(--ouro); }
.regras-senha { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 0.9rem; color: var(--apagado); }
.regras-senha li::before { content: '✗ '; color: #c86a5a; }
.regras-senha li.ok { color: #9fd8a8; }
.regras-senha li.ok::before { content: '✓ '; color: #9fd8a8; }
.lista-personagens { display: grid; gap: 8px; margin: 12px 0 16px; }
.cartao-personagem { display: grid; gap: 2px; text-align: left; padding: 12px 14px; background: #100d0a; border: 1px solid var(--linha); color: inherit; font: inherit; cursor: pointer; }
.cartao-personagem:hover, .cartao-personagem:focus-visible { border-color: var(--ouro); }
.cartao-personagem strong { font-family: var(--titulo); color: var(--ouro-claro); }
.cartao-personagem small { color: var(--apagado); }

/* Barra de mineração, em cima do mapa */
.barra-mineracao { position: absolute; left: 50%; bottom: 12px; width: min(320px, 80%); transform: translateX(-50%); z-index: 3; margin: 0; background: rgba(12, 10, 8, 0.9); }
.barra-mineracao[hidden] { display: none; }
.barra-mineracao > span { transition: none; }

/* Atributo com bônus dos itens: outra cor (total no painel, "+N = total" na distribuição) */
.com-bonus, .bonus-atributo { color: #7fe0a0; }
.com-bonus small { color: #7fe0a0; opacity: 0.85; }
.bonus-atributo { margin-left: 8px; font-size: 0.85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Encantador: grade de itens à esquerda, "bigorna" (quadrado onde o item é solto) à direita */
.bigorna { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; margin: 12px 0; }
.bigorna-pecas h3 { margin: 6px 0; font-family: var(--titulo); color: var(--ouro-claro); font-size: 0.95rem; }
.bigorna-grade { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
.bigorna-grade .inv-celula { cursor: grab; }
.bigorna-despertado { position: absolute; top: 2px; left: 4px; color: #ffb84a; font-size: 0.7rem; }
.bigorna-alvo { min-height: 220px; border: 2px dashed var(--linha); padding: 12px; background: #100d0a; transition: border-color 0.15s ease, background 0.15s ease; }
.bigorna-alvo.com-item { border-style: solid; border-color: var(--ouro); }
.bigorna-alvo.arrastando { border-color: var(--ouro-claro); background: #1a140e; }
.bigorna-vazio { display: grid; place-items: center; min-height: 190px; margin: 0; text-align: center; color: var(--apagado); }
.bigorna-texto { margin: 8px 0; }
@media (max-width: 640px) { .bigorna { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .bigorna-alvo { transition: none; } }

/* Mapa da área inteira: janela por cima do jogo */
/* dentro da moldura do mapa (no celular, a tela inteira: ver a regra de max-width: 760px das janelas) */
.mapa-area { position: absolute; inset: 0; z-index: 7; background: rgba(6, 5, 4, 0.78); display: grid; place-items: center; padding: 12px; }
.mapa-area[hidden] { display: none; }
.mapa-area-caixa { background: var(--painel); border: 2px solid var(--ouro); padding: 10px; max-width: 100%; max-height: 100%; overflow: hidden; display: grid; gap: 8px; justify-items: center; }
.mapa-area-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; }
.mapa-area-topo h2 { margin: 0; }
.mapa-area-topo .botao-secundario { padding: 6px 12px; }
#mapa-area-canvas { display: block; max-width: 100%; image-rendering: auto; border: 1px solid var(--linha); }
.mapa-area-legenda { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; font-size: 0.85rem; color: var(--apagado); }
.mapa-area-legenda > span { display: inline-flex; align-items: center; gap: 4px; }
.mapa-area-legenda .leg-entrega { background: #80ed99; }
.mapa-area-legenda .leg-historia { background: #79c8ff; }
.mapa-area-legenda .leg-boss { color: #fff; font-size: 1.1rem; }
.mapa-area-legenda .leg-lorde { color: #ff6262; font-size: 1.1rem; }
.leg { display: inline-block; flex: none; width: 10px; height: 10px; border: 1px solid #1a140e; }
.leg.voce { background: #7fd0ff; border-radius: 50%; } .leg.outros { background: #f2ece0; border-radius: 50%; }
.leg.trilha { background: #ff5ec8; } .leg.leg-quest { background: #ffd24a; border-radius: 50%; }
.leg.pedra { background: #e8d27a; } .leg.portal { background: #c070ff; transform: rotate(45deg); }

/* Troca entre jogadores: janela no meio da tela, por cima do jogo */
.comercio { position: fixed; inset: 0; z-index: 30; background: rgba(6, 5, 4, 0.72); display: grid; place-items: center; padding: 16px; }
.comercio[hidden] { display: none; }
.comercio-caixa { background: var(--painel); border: 2px solid var(--ouro); padding: 16px; width: min(640px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.comercio-caixa h2 { margin: 0 0 8px; }
.comercio-caixa h3 { font-family: var(--titulo); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ouro); margin: 14px 0 4px; }
.comercio-lados { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.comercio-lado { border: 1px solid var(--linha); padding: 8px 10px; background: #100d0a; min-width: 0; }
.comercio-lado h3 { margin-top: 0; }
.comercio-ouro { margin: 0 0 4px; color: var(--ouro-claro); font-variant-numeric: tabular-nums; }
.comercio-lista { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; }
.comercio-form { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.comercio-form input { width: 8em; }
.comercio-grade { margin-bottom: 6px; }
.comercio-acumulaveis { list-style: none; margin: 0; padding: 0; }
.comercio-acumulaveis li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--linha); }
.comercio-botoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
@media (max-width: 520px) { .comercio-lados { grid-template-columns: 1fr; } }

/* Chat da área (embaixo do mapa): mensagens + campo; PM em outra cor */
.chat { margin-top: 10px; border: 1px solid var(--linha); background: var(--painel); }
.chat-lista { list-style: none; margin: 0; padding: 6px 10px; height: 7.5em; overflow-y: auto; font-size: 0.9rem; line-height: 1.45; }
.chat-lista:empty::before { content: 'Ninguém falou nada por aqui ainda.'; color: var(--apagado); font-style: italic; }
.chat-lista time { color: var(--apagado); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.chat-lista strong { color: var(--ouro-claro); font-weight: 600; }
.chat-lista .pm, .chat-lista .pm strong { color: #c9a0ff; }
.chat-lista .aviso { color: var(--apagado); font-style: italic; }
.chat-lista .aviso.erro { color: var(--ruim); }
.chat-form { display: flex; gap: 6px; padding: 6px; border-top: 1px solid var(--linha); }
.chat-form input { flex: 1 1 auto; }
.chat-form button { padding: 8px 14px; }

/* Amigos e party */
#painel-social h3 { font-family: var(--titulo); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ouro); margin: 16px 0 6px; }
.social-linha { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; padding: 8px 0; border-top: 1px solid var(--linha); }
.social-linha.destaque { background: rgba(200, 163, 90, 0.08); padding-inline: 8px; }
.social-linha small { color: var(--apagado); }
.social-botoes { display: flex; flex-wrap: wrap; gap: 6px; }
.social-botoes .inv-acao { padding: 6px 12px; width: auto; }
.social-adicionar { display: flex; gap: 6px; margin-bottom: 6px; }
.social-adicionar input { flex: 1 1 auto; }
.social-adicionar .inv-acao { width: auto; }
.online { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.online.sim { background: var(--bom); }
.online.nao { background: #5a5246; }

/* Encantar, despertar, melhorar picareta: barra de 2 s que termina em sucesso (verde) ou falha (vermelho) */
.barra-sorte { margin: 10px 0; }
.barra-sorte-trilho { height: 16px; background: #2a231b; border: 1px solid var(--linha); border-radius: 999px; overflow: hidden; }
.barra-sorte-trilho span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #b8863a, #f5d27d); border-radius: inherit; transform: scaleX(0); transform-origin: left center; transition: transform linear; }
.barra-sorte-trilho span.cheia { transform: scaleX(1); }
.barra-sorte p { margin: 6px 0 0; font-family: var(--titulo); color: var(--ouro-claro); }
.barra-sorte.deu-certo span { background: var(--bom); }
.barra-sorte.deu-certo p { color: var(--bom); }
.barra-sorte.falhou span { background: var(--ruim); }
.barra-sorte.falhou p { color: var(--ruim); }
.ocupado { pointer-events: none; }

/* Despertar: a cor sobe com o nível do bônus */
.inv-despertar { margin: 6px 0; color: #9fd8a8; }
.inv-despertar.despertar-medio { color: #7fc8ff; }
.inv-despertar.despertar-alto { color: #ffb84a; font-weight: 600; }
.minimapa-abrir { position: absolute; top: 8px; right: 8px; z-index: 2; padding: 0 8px; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.minimapa-destino { padding-right: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c8a35a' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; background-size: 9px 6px; }
.dialogo { max-height: calc(100% - 16px); overflow-y: auto; }

/* ================= Celular ================= */
@media (max-width: 640px) {
  body { padding: 0 12px 32px; }
  .topo { padding: 10px 0 0; }
  .topo h1 { font-size: 1.35rem; }
  .topo p { font-size: 0.85rem; }
  .painel { padding: 14px 12px; margin: 10px auto; }
  h2 { margin-bottom: 10px; }

  /* Criação: um campo por linha, cartão da arma mais enxuto */
  .campos { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cartao-item { gap: 10px; }
  .cartao-item .inv-celula.grande { width: 56px; height: 56px; }
  .cartao-item ul { padding-left: 16px; }
  .atributo-controle button { width: 40px; height: 40px; }
  #form-criacao > .botao-principal, .tela-login .botao-principal, #botao-novo-personagem { width: 100%; padding: 14px 16px; }

  /* Mapa: HUD numa grade só, mapa de ponta a ponta */
  .hud { padding: 8px 0; gap: 8px; }
  .hud-esquerda { flex-basis: 100%; }
  .hud-barras { max-width: none; }
  /* 6 colunas: ouro e Marca dividem a 1ª linha; os 5 botões ficam em 2 linhas (3 + 2) */
  .hud-direita { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .hud-direita .botao-secundario { grid-column: span 2; }
  #hud-ouro { grid-column: span 3; }
  #hud-marca { grid-column: span 3; justify-self: end; }
  #botao-escolha { grid-column: 1 / -1; }
  .hud-direita .botao-secundario { min-width: 0; padding: 10px 2px; font-size: 0.66rem; letter-spacing: 0.02em; }
  .tela-jogo { margin: 0 -12px; max-width: none; border-width: 2px 0; }
  .nome-mapa { top: 6px; left: 6px; padding: 3px 8px; font-size: 0.8rem; }
  .dialogo { left: 4px; right: 4px; bottom: 4px; gap: 4px; font-size: 0.92rem; }
  .dialogo-retrato { width: 60px; height: 60px; padding: 3px; }
  .dialogo-caixa { min-height: 60px; padding: 14px 10px 8px; }
  .dialogo-caixa > p { margin: 2px 0; }
  .dialogo-opcoes button { min-height: 34px; }
  .controles .dica { flex-basis: 100%; margin: 6px 0 2px; font-size: 0.85rem; min-height: 0; }

  /* Minimapa menor para não tapar o mapa. O select fica em 16px e encolhe por escala:
     assim o iPhone não dá zoom ao tocar nele */
  .minimapa { top: 4px; right: 4px; gap: 3px; }
  .minimapa canvas { width: 84px; height: 84px; }
  .minimapa[data-tamanho="grande"] canvas { width: 168px; height: 168px; }
  .minimapa-destino { width: 112px; height: 30px; font-size: 16px; transform: scale(0.75); transform-origin: right top; margin-bottom: -10px; }
  .minimapa[data-tamanho="grande"] .minimapa-destino { width: 224px; }
  .minimapa-barra button { width: 28px; min-height: 28px; }
  .minimapa-abrir { top: 4px; right: 4px; min-height: 28px; }

  /* Inventário, loja, trocas e serviços: "Voltar ao mapa" sempre à mão no topo */
  .inv-topo { position: sticky; top: 0; z-index: 5; background: var(--fundo); padding: 8px 0; margin: 0 -12px; padding-inline: 12px; border-bottom: 1px solid var(--linha); }
  .inv-topo { flex-wrap: nowrap; }
  .inv-topo h2 { font-size: 0.8rem; min-width: 0; line-height: 1.3; }
  .inv-topo .botao-secundario { flex: none; padding: 8px 12px; }
  .inv-topo .botao-secundario small { display: none; }
  .inv-layout, .trocas-layout { margin-top: 10px; }
  /* O personagem (atributos e status) vai para o fim; equipamento e bolsa vêm primeiro */
  .inv-layout > :first-child { order: 9; }
  #inv-detalhes, #loja-detalhes, #trocas-detalhes, .bigorna-alvo { scroll-margin-top: 72px; }
  .inv-painel { padding: 12px; outline: 0; }
  .inv-grade { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 5px; }
  .inv-equip { gap: 6px; }

  /* Batalha: você e o monstro lado a lado, o registro logo embaixo e os botões em duas colunas */
  #tela-batalha:not([hidden]) { display: flex; flex-direction: column; }
  #tela-batalha > .arena { order: 1; }
  #tela-batalha > .colunas { display: contents; }
  #tela-batalha > .painel, #tela-batalha > .colunas > .painel:first-child { order: 2; }
  #tela-batalha > .colunas > .painel:last-child { order: 5; } /* arena: "Seus números" depois dos botões */
  #tela-batalha > .resultado { order: 3; }
  #tela-batalha > .acoes { order: 4; }
  .arena { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 10px; }
  .versus { display: none; }
  .cartao { padding: 10px; }
  .cartao h3 { font-size: 0.95rem; }
  .cartao .sub { font-size: 0.8rem; margin-bottom: 6px; }
  .barra { overflow: hidden; }
  .barra em { font-size: 0.72rem; padding-left: 6px; }
  .efeitos { min-height: 0; }
  #tela-batalha .painel { margin: 8px 0 0; padding: 8px 10px; }
  #tela-batalha .painel h2 { font-size: 0.8rem; margin-bottom: 4px; }
  #tela-batalha .log { max-height: 132px; font-size: 0.85rem; }
  .colunas { gap: 8px; }
  .acoes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin: 10px 0; }
  .acoes button { min-width: 0; padding: 10px 6px; }
  .acoes .separador { display: none; }
  .resultado { margin: 10px 0 0; padding: 12px; }
  .resultado p { font-size: 1.1rem; }
}
/* Celular deitado: o mapa cabe inteiro na altura da tela */
@media (orientation: landscape) and (max-height: 500px) {
  .tela-jogo { height: calc(100vh - 16px); width: auto; margin: 0 auto; }
}

/* ================= Moldura em todo o jogo =================
   O acabamento dos cartões da batalha e do diálogo (cantos arredondados, borda dupla dourada sobre
   contorno escuro, fundo em degradê) nas cores da identidade: preto e ouro. Os tokens ficam no :root. */
.painel, .cartao, .inv-painel, .comercio-caixa, .mapa-area-caixa, .chat, .menu-pocoes, .resultado {
  background: var(--moldura-fundo); border: 2px solid var(--moldura-borda-suave); border-radius: var(--moldura-raio); box-shadow: var(--moldura-sombra); outline: 0;
}
.comercio-caixa, .mapa-area-caixa, .resultado { border: 3px solid var(--ouro); }
.inv-celula, .cartao-personagem, .comercio-lado { border-radius: 4px; border-color: rgba(200, 163, 90, 0.35); background: #120e0a; }
.cartao-personagem:hover, .inv-celula:hover { border-color: var(--ouro); }
button { border-radius: var(--moldura-raio); transition: box-shadow 0.15s ease, border-color 0.15s ease, filter 0.15s ease; }
.botao-principal { background: linear-gradient(180deg, #ecd39b, var(--ouro) 55%, #a8853f); color: #1a130a; border: 2px solid var(--moldura-escura); box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.65), 0 0 0 1px var(--ouro); }
.botao-principal:hover { background: linear-gradient(180deg, #f5e2b5, var(--ouro-claro) 55%, #b8954c); box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.75), 0 0 0 1px var(--destaque), 0 0 12px rgba(255, 217, 138, 0.35); }
.botao-secundario { background: var(--moldura-fundo); color: var(--ouro-claro); border: 2px solid var(--moldura-borda-suave); }
.botao-secundario:hover, .acoes button:hover:not(:disabled) { border-color: var(--destaque); box-shadow: 0 0 0 1px var(--destaque), 0 0 12px rgba(255, 217, 138, 0.3); }
select, input { border-radius: 4px; border-color: var(--moldura-borda-suave); background-color: #120e0a; }
.barra, .barra-sorte-trilho { border-radius: 9px; overflow: hidden; border-color: var(--moldura-borda-suave); background: #120e0a; }
.barra > span { border-radius: 9px; }
.efeito, .marca { border-radius: 4px; }
.tela-jogo { border: 3px solid var(--ouro); border-radius: var(--moldura-raio); box-shadow: var(--moldura-sombra); overflow: hidden; }
.nome-mapa, .local-atual { border-width: 2px; border-radius: var(--moldura-raio); box-shadow: 0 0 0 2px var(--moldura-escura), 0 4px 14px rgba(0, 0, 0, 0.6); }
.minimapa canvas { border: 0; border-radius: 50%; box-shadow: none; background: #0c0a08; }
.minimapa-barra button, .minimapa-destino, .minimapa-abrir { border-radius: 4px; }

/* ================= HUD dentro do mapa e minimapa com bússola ================= */
.hud-mapa { position: absolute; top: 10px; left: 10px; z-index: 3; display: flex; gap: 10px; align-items: center; width: min(320px, 46%); padding: 6px 12px 6px 6px; pointer-events: none;
  background: var(--moldura-fundo); border: 2px solid var(--ouro); border-radius: var(--moldura-raio); box-shadow: var(--moldura-sombra); opacity: 0.96; }
.hud-retrato { position: relative; flex: none; width: 56px; height: 56px; overflow: hidden; border: 2px solid var(--moldura-borda-suave); border-radius: 4px; background: radial-gradient(circle at 50% 35%, #3a2e1f, #120e0a 75%); }
/* a folha do personagem (8 fileiras): o quadro de frente, 2x mais perto, centrado no boneco */
.hud-retrato img { position: absolute; left: -50%; top: -50%; height: 1600%; width: auto; max-width: none; image-rendering: pixelated; }
.hud-mapa-dados { flex: 1; min-width: 0; }
.hud-mapa-dados strong { font-family: var(--titulo); color: #fff4d6; font-size: 0.95rem; margin-right: 6px; }
.hud-mapa-dados span { color: var(--apagado); font-size: 0.75rem; white-space: nowrap; }
.hud-mapa .barra { height: 14px; margin: 3px 0 0; }
.hud-mapa .barra em { line-height: 12px; font-size: 0.68rem; text-shadow: 1px 1px #000; }
.hud-mapa .barra.fina { height: 8px; }
.hud-mapa .barra.fina em { display: none; }
.minimapa { top: 10px; right: 10px; }
.minimapa-anel { position: relative; padding: 7px; border-radius: 50%; pointer-events: auto;
  background: radial-gradient(circle, transparent 62%, rgba(0, 0, 0, 0.35) 64%), linear-gradient(160deg, #ecd39b, var(--ouro) 45%, #7a5a26);
  box-shadow: 0 0 0 2px var(--moldura-escura), 0 4px 14px rgba(0, 0, 0, 0.6), inset 0 0 0 2px rgba(10, 7, 5, 0.6); }
.minimapa-anel canvas { box-shadow: inset 0 0 0 2px var(--moldura-escura); }
.minimapa-anel span { position: absolute; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-family: var(--titulo); font-size: 0.7rem; font-weight: 700; color: #1a130a; background: #f5e2b5; box-shadow: 0 0 0 2px var(--moldura-escura); }
.minimapa-anel .bussola-n { top: -6px; left: 50%; transform: translateX(-50%); color: #fff; background: #b33a2e; }
.minimapa-anel .bussola-s { bottom: -6px; left: 50%; transform: translateX(-50%); }
.minimapa-anel .bussola-l { right: -6px; top: 50%; transform: translateY(-50%); }
.minimapa-anel .bussola-o { left: -6px; top: 50%; transform: translateY(-50%); }
.minimapa .minimapa-destino { margin-bottom: 6px; }
.minimapa-barra { margin-top: 6px; }
@media (max-width: 760px) {
  .hud-mapa { top: 4px; left: 4px; width: min(168px, 46%); padding: 3px 6px 3px 3px; gap: 5px; }
  .hud-mapa-dados strong { font-size: 0.72rem; }
  .local-atual { top: auto; bottom: 6px; } /* em cima é o HUD e o minimapa */
  .hud-retrato { width: 36px; height: 36px; }
  .hud-mapa-dados span, .hud-mapa .barra.fina { display: none; }
  .hud-mapa .barra { height: 11px; }
  .hud-mapa .barra em { line-height: 9px; font-size: 0.6rem; }
  .minimapa { top: 4px; right: 4px; }
  .minimapa-anel { padding: 5px; }
  .minimapa-anel span { width: 14px; height: 14px; font-size: 0.55rem; }
}
/* com a loja aberta, o letreiro do lugar e o nome do mapa não aparecem no meio dela */
.tela-jogo:has(.loja-sobreposta:not([hidden])) :is(.local-atual, .nome-mapa) { display: none; }

/* ================= Janelas dentro do mapa (Atributos, Amigos, Quests, Bestiário) =================
   Uma por lado: Atributos e Amigos à esquerda, Quests e Bestiário à direita, logo abaixo do HUD.
   Não são modais: dá para andar com elas abertas. No celular sobem de baixo, uma de cada vez. */
.janela { position: absolute; top: 92px; z-index: 4; width: min(400px, 46%); max-height: calc(100% - 104px); display: flex; flex-direction: column;
  background: var(--moldura-fundo); border: 3px solid var(--ouro); border-radius: var(--moldura-raio); box-shadow: var(--moldura-sombra); animation: janela-entra 0.16s ease-out; }
.janela[hidden] { display: none; }
.janela-esquerda { left: 10px; }
.janela-direita { right: 10px; }
.janela-topo { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-bottom: 2px solid var(--moldura-borda-suave);
  background: linear-gradient(180deg, #3a2c1a, #1d1610); border-radius: var(--moldura-raio) var(--moldura-raio) 0 0; }
.janela-topo h2 { flex: 1; min-width: 0; margin: 0; font-size: 1rem; color: #fff4d6; letter-spacing: 0.05em; text-transform: none; }
.janela-topo kbd { padding: 1px 7px; font-family: var(--titulo); font-size: 0.72rem; color: var(--ouro-claro); background: #120e0a; border: 1px solid var(--moldura-borda-suave); border-radius: 4px; }
.janela-fechar { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; font-size: 0.95rem; line-height: 1; color: var(--ouro-claro); background: #120e0a; border: 2px solid var(--moldura-borda-suave); }
.janela-fechar:hover { border-color: var(--destaque); box-shadow: 0 0 0 1px var(--destaque); }
.janela-corpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 14px 14px; scrollbar-color: var(--moldura-borda-suave) transparent; }
.janela-corpo > :first-child, .janela-corpo > :first-child > :first-child { margin-top: 0; }
.bestiario-album { margin-top: 12px; border: 1px solid var(--moldura-borda-suave); border-radius: 4px; background: var(--painel); }
.bestiario-album summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 10px; cursor: pointer; color: var(--ouro-claro); }
.bestiario-album summary::before { content: '▸'; }
.bestiario-album[open] summary::before { content: '▾'; }
.bestiario-album summary strong { flex: 1; min-width: 0; font-family: var(--titulo); font-size: 0.82rem; }
.bestiario-album summary span { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.bestiario-album summary:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
.bestiario-album-corpo { padding: 0 10px 10px; }
.bestiario-album-progresso { display: flex; align-items: center; gap: 10px; color: var(--ouro-claro); }
.bestiario-album-progresso progress { width: 100%; min-width: 0; height: 7px; accent-color: var(--ouro); }
.bestiario-album-progresso small { flex-shrink: 0; }
.bestiario-fichas { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.bestiario-fichas li { padding: 9px; border: 1px solid var(--linha); border-radius: 3px; background: var(--painel-2); }
.bestiario-fichas strong { display: block; color: var(--texto); }
.bestiario-ficha-tipo { font-size: 0.76rem; color: var(--ouro-claro); }
.bestiario-fichas p { margin: 5px 0 0; font-size: 0.8rem; color: var(--apagado); }
.bestiario-fichas .bestiario-desconhecido { display: flex; align-items: center; gap: 10px; color: var(--apagado); font-size: 0.8rem; border-style: dashed; }
.bestiario-interrogacao { width: 26px; flex-shrink: 0; text-align: center; color: var(--moldura-borda-suave); font-family: var(--titulo); font-size: 1.5rem; }
.janela .colunas-atributos { grid-template-columns: 1fr; gap: 14px; margin-top: 0; }
.janela .atributo-controle button { width: 30px; height: 30px; }
.hud-direita .botao-secundario[aria-expanded="true"] { border-color: var(--destaque); color: #fff4d6; box-shadow: 0 0 0 1px var(--destaque); }
@keyframes janela-entra { from { opacity: 0; transform: translateY(-6px); } }
@keyframes janela-sobe { from { opacity: 0; transform: translateY(28px); } }
@media (prefers-reduced-motion: reduce) { .janela { animation: none; } }
@media (max-width: 760px) {
  .janela { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 62vh; z-index: 35;
    border-width: 3px 0 0; border-radius: var(--moldura-raio) var(--moldura-raio) 0 0; animation-name: janela-sobe; }
  .mapa-area { position: fixed; z-index: 40; padding: 8px; }
}
/* A moldura do mapa sempre cabe na altura da tela: ver "Mapa mais largo" no fim (12:7). Toque: */
@media (min-width: 761px) and (min-height: 501px) {
  .tela-jogo { width: min(100%, calc((100vh - 200px) * 12 / 7)); width: min(100%, calc((100dvh - 200px) * 12 / 7)); min-width: min(100%, 520px); margin-inline: auto; }
}

/* ================= Inventário no meio do mapa (client/inventario-ui.js) =================
   Por cima do mapa, como a loja: você e o equipamento · a bolsa · o item escolhido. Cada coluna rola
   sozinha. No celular vira tela cheia, uma coluna embaixo da outra. */
.inventario-sobreposto { position: absolute; inset: 0; z-index: 6; display: grid; padding: 12px; background: radial-gradient(ellipse at center, rgba(10, 7, 5, 0.25), rgba(10, 7, 5, 0.7)); }
.inventario-sobreposto[hidden] { display: none; }
#tela-inventario { max-width: none; margin: 0; }
.inv-janela { min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--moldura-fundo); border: 3px solid var(--ouro); border-radius: var(--moldura-raio); box-shadow: var(--moldura-sombra); animation: janela-entra 0.16s ease-out; }
.inventario-sobreposto .inv-layout { flex: 1; min-height: 0; margin: 0; padding: 10px; gap: 10px; align-items: stretch;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr) minmax(0, 1fr); }
.inventario-sobreposto .inv-painel { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px; outline: 0; scrollbar-color: var(--moldura-borda-suave) transparent; }
.inventario-sobreposto .inv-painel > h3:first-of-type { margin-top: 12px; }
.inventario-sobreposto .inv-celula { width: 50px; height: 50px; padding: 5px; border-radius: 4px; }
.inventario-sobreposto .inv-grade .inv-celula { width: auto; height: auto; }
.inventario-sobreposto .inv-equip-coluna { gap: 6px; }
.inventario-sobreposto .inv-boneco { width: 56px; height: 56px; }
.inv-status summary { cursor: pointer; margin: 10px 0 4px; font-family: var(--titulo); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ouro); }
.inv-status summary small { font-family: var(--corpo); text-transform: none; letter-spacing: 0; color: var(--ouro-claro); }
.inv-status summary:hover { color: var(--ouro-claro); }
.tela-jogo:has(.inventario-sobreposto:not([hidden])) :is(.local-atual, .nome-mapa) { display: none; }
@media (prefers-reduced-motion: reduce) { .inv-janela { animation: none; } }
@media (max-width: 760px) {
  .inventario-sobreposto { position: fixed; z-index: 40; padding: 0; background: var(--fundo); }
  .inv-janela { border-width: 0; border-radius: 0; }
  .inventario-sobreposto .inv-layout { grid-template-columns: 1fr; align-items: start; overflow-y: auto; }
  .inventario-sobreposto .inv-layout > :first-child { order: 0; }
  .inventario-sobreposto .inv-painel { overflow: visible; }
}

/* ================= Criação de personagem (client/criacao-ui.js) =================
   Classe · personagem (com raça, arma e nome) · atributos e status, entre o título e o rodapé.
   Mesma moldura dourada do jogo. */
.criacao { max-width: 1240px; margin: 0 auto; padding: 4px 0 16px; }
.criacao-tela { display: grid; gap: 14px; align-items: start;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(300px, 360px);
  grid-template-areas: "topo topo topo" "esquerda centro direita" "rodape rodape rodape"; }
.criacao-moldura { background: var(--moldura-fundo); border: 3px solid var(--ouro); border-radius: var(--moldura-raio); box-shadow: var(--moldura-sombra); }
.criacao-topo { grid-area: topo; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 12px 20px; }
.criacao-topo-icone { font-size: 1.8rem; line-height: 1; color: var(--ouro); filter: drop-shadow(0 2px 0 #000); }
.criacao-topo h2 { position: relative; margin: 0; padding-right: 18px; font-size: 1.45rem; color: #fff4d6; letter-spacing: 0.04em; text-transform: none; }
/* separador curto entre o título e o texto, como no modelo */
.criacao-topo h2::after { content: ""; position: absolute; right: 0; top: 15%; bottom: 15%; width: 2px; background: linear-gradient(transparent, var(--moldura-borda-suave), transparent); }
.criacao-topo p { margin: 0; max-width: 70ch; font-size: 0.92rem; color: var(--texto); }
.criacao-esquerda { grid-area: esquerda; padding: 12px; }
.criacao-centro { grid-area: centro; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.criacao-direita { grid-area: direita; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.criacao-bloco { padding: 12px 14px; }
.criacao-titulo { display: block; margin: 0 0 8px; font-family: var(--titulo); font-size: 1rem; letter-spacing: 0.05em; color: #fff4d6; text-transform: none; }
.criacao-titulo::before { content: "◆ "; color: var(--ouro); font-size: 0.7em; vertical-align: 0.15em; }

/* Classes, em 2 colunas, separadas pelos 4 grupos */
.criacao-classes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.criacao-grupo { grid-column: 1 / -1; margin: 6px 0 0; font-family: var(--titulo); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--apagado); }
.criacao-grupo:first-child { margin-top: 0; }
.criacao-classe { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 7px 7px; text-align: left; font-family: var(--titulo); font-size: 0.82rem; letter-spacing: 0.02em; text-transform: none;
  color: var(--ouro-claro); background: linear-gradient(180deg, #2a2117, #17120d); border: 2px solid var(--moldura-borda-suave); }
.criacao-classe:hover { border-color: var(--ouro); }
.criacao-classe.marcada { color: #fff4d6; background: linear-gradient(180deg, #4a3820, #241a10); border-color: var(--destaque); box-shadow: 0 0 0 1px var(--destaque), 0 0 12px rgba(255, 217, 138, 0.3); }
.criacao-icone { flex: none; width: 1.4em; text-align: center; font-size: 1.05rem; filter: drop-shadow(0 1px 1px #000); }
.criacao-info-classe { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linha); }
.criacao-info-classe h3 { margin: 0; font-family: var(--titulo); font-size: 1.15rem; color: var(--ouro-claro); }
.criacao-papel { margin: 2px 0 8px; font-size: 0.85rem; color: var(--ouro); }
.criacao-info-classe p:not(.criacao-papel) { margin: 0 0 8px; font-size: 0.92rem; line-height: 1.45; }
.criacao-como strong { color: var(--ouro-claro); }
.criacao-evolucoes { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linha); overflow-wrap: anywhere; }
.criacao-evolucoes h4 { margin: 0 0 8px; font-family: var(--titulo); font-size: 0.85rem; color: var(--ouro); }
.criacao-evolucoes strong { display: block; color: var(--ouro-claro); font-size: 0.9rem; }
.criacao-evolucoes span { display: block; color: var(--apagado); font-size: 0.85rem; }

/* Palco: o personagem grande, girando nas setas */
.criacao-palco { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 290px; padding: 10px 12px; overflow: hidden;
  background: radial-gradient(ellipse 34% 9% at 50% 80%, rgba(255, 217, 138, 0.22), transparent 70%), radial-gradient(circle at 50% 38%, #3a2c1a 0%, #17120d 58%, #0c0a08 100%); }
.criacao-palco::after { content: ""; position: absolute; left: 50%; bottom: 14%; width: min(300px, 60%); aspect-ratio: 4 / 1; transform: translateX(-50%); pointer-events: none;
  border: 2px solid rgba(200, 163, 90, 0.35); border-radius: 50%; box-shadow: inset 0 0 0 6px rgba(200, 163, 90, 0.08), 0 0 24px rgba(255, 217, 138, 0.12); }
.criacao-palco canvas { position: relative; z-index: 1; justify-self: center; width: min(280px, 100%); height: auto; aspect-ratio: 1; image-rendering: pixelated; }
.criacao-girar { position: relative; z-index: 1; width: 40px; height: 56px; padding: 0; font-size: 1rem; color: var(--ouro-claro); background: rgba(12, 10, 8, 0.65); border: 2px solid var(--moldura-borda-suave); }
.criacao-girar:hover { border-color: var(--destaque); box-shadow: 0 0 0 1px var(--destaque); }

/* Raças: o mesmo personagem nas 5 raças */
.criacao-racas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.criacao-raca { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 4px 2px 6px; font-size: 0.78rem; letter-spacing: 0; text-transform: none; color: var(--texto); background: #120e0a; border: 2px solid var(--moldura-borda-suave); }
.criacao-raca canvas { width: 100%; max-width: 76px; height: auto; aspect-ratio: 1; image-rendering: pixelated; }
.criacao-raca span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.criacao-raca:hover { border-color: var(--ouro); }
.criacao-raca.marcada { color: #fff4d6; border-color: var(--destaque); box-shadow: 0 0 0 1px var(--destaque), 0 0 12px rgba(255, 217, 138, 0.3); }
.criacao-info-raca { margin: 10px 0 0; font-size: 0.9rem; }
.criacao-info-raca strong { color: var(--ouro-claro); }
.criacao-info-raca small { color: var(--apagado); font-size: 0.85rem; }

/* Arma inicial: setas, o nome e o que ela dá */
.criacao-seletor { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; gap: 8px; text-align: center; }
.criacao-seletor button { height: 36px; padding: 0; font-size: 1.3rem; line-height: 1; color: var(--ouro-claro); background: #120e0a; border: 2px solid var(--moldura-borda-suave); }
.criacao-seletor button:hover:not(:disabled) { border-color: var(--destaque); }
.criacao-seletor button:disabled { opacity: 0.3; cursor: default; }
.criacao-seletor strong { display: block; font-family: var(--titulo); color: var(--ouro-claro); }
.criacao-seletor small { font-size: 0.8rem; color: var(--apagado); }
.criacao-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 10px; }
.criacao-item .inv-celula { width: 48px; height: 48px; padding: 5px; border-radius: 4px; }
.criacao-item strong { color: var(--ouro-claro); }
.criacao-item ul { margin: 0; padding-left: 16px; font-size: 0.88rem; }
.criacao-item li small { color: var(--apagado); }
.criacao-arma .dica { margin: 8px 0 0; font-size: 0.82rem; }
.criacao-nome input { width: 100%; padding: 10px 12px; font-size: 1rem; }
.criacao-direita .dica { margin: 0 0 8px; font-size: 0.82rem; }
.criacao-direita .linha-atributo { padding: 4px 0; }
.criacao-direita .atributo-info small { font-size: 0.75rem; }
.criacao-direita .atributo-controle button { width: 30px; height: 30px; }
.criacao-status summary { cursor: pointer; margin: 0; }
.criacao-status[open] summary { margin-bottom: 8px; }
.criacao-status table { font-size: 0.9rem; }

.criacao-rodape { grid-area: rodape; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; }
.criacao-rodape .erro { flex: 1; margin: 0; text-align: center; }
.criacao-rodape .botao-secundario { padding: 10px 20px; }
.criacao-rodape .botao-principal { width: auto; padding: 12px 28px; font-size: 1.05rem; }

@media (max-width: 1100px) {
  .criacao-tela { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "topo topo" "centro esquerda" "direita direita" "rodape rodape"; }
  .criacao-direita { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
@media (max-width: 760px) {
  .criacao-tela { grid-template-columns: minmax(0, 1fr); grid-template-areas: "topo" "classe" "centro" "esquerda" "direita" "rodape"; gap: 10px; }
  .criacao-topo { grid-template-columns: auto minmax(0, 1fr); padding: 10px 12px; }
  .criacao-topo h2 { padding: 0; font-size: 1.15rem; }
  .criacao-topo h2::after { display: none; }
  .criacao-topo p { grid-column: 1 / -1; font-size: 0.85rem; }
  .criacao-direita { display: flex; }
  .criacao-palco { min-height: 220px; }
  .criacao-palco canvas { width: min(200px, 100%); }
  .criacao-racas { gap: 4px; }
  .criacao-rodape { position: sticky; bottom: 0; z-index: 5; flex-wrap: wrap; }
  .criacao-rodape .erro { order: -1; flex-basis: 100%; }
  .criacao-rodape { gap: 8px; padding: 8px 10px; }
  .criacao-rodape .botao-secundario { padding: 10px 12px; }
  .criacao-rodape .botao-principal { flex: 1; padding: 10px 12px; font-size: 0.9rem; white-space: nowrap; }
  .criacao-raca { font-size: 0.66rem; }
}
.criacao-rodape .erro:empty { display: none; }

/* ================= Mapa mais largo: sem o menu de cima nem as quests do lado =================
   No computador tudo abre pelos atalhos (I, C, Q, F, B) e o HUD avisa dos pontos livres e das quests
   prontas; no toque os botões continuam (não há teclado). A vista é 24x14 quadrados (12:7, jogo.js). */
#tela-mapa { max-width: 1680px; }
@media (min-width: 1280px) {
  #tela-mapa:not([hidden]) { display: block; }
  .lateral { display: none; }
}
@media (hover: hover) and (pointer: fine) {
  .hud { display: none; }
}
@media (min-width: 761px) {
  .tela-jogo { aspect-ratio: 12 / 7; }
}
@media (min-width: 761px) and (min-height: 501px) and (hover: hover) and (pointer: fine) {
  /* sem o menu, só o título fica em cima: 136px = título e link da wiki (110), espaços e bordas */
  .tela-jogo { width: min(100%, calc((100vh - 136px) * 12 / 7)); width: min(100%, calc((100dvh - 136px) * 12 / 7)); }
}

/* Ouro (e a Marca da Hubris) embaixo da EXP, no HUD do mapa */
.hud-ouro-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 5px; }
.hud-mapa-dados .hud-ouro { display: inline-flex; align-items: center; gap: 5px; font-family: var(--titulo); font-size: 0.85rem; color: #fff4d6; font-variant-numeric: tabular-nums; }
.hud-mapa-dados .marca { padding: 0 6px; font-size: 0.66rem; line-height: 1.5; }
.hud-avisos { display: contents; }
.hud-mapa-dados .hud-aviso { display: inline-flex; align-items: center; gap: 4px; font-size: 0.68rem; color: var(--destaque); }
.hud-aviso kbd { padding: 0 4px; font-family: var(--titulo); font-size: 0.62rem; color: var(--ouro-claro); background: #120e0a; border: 1px solid var(--moldura-borda-suave); border-radius: 3px; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 760px) {
  /* no celular o HUD esconde os textos menores, mas o ouro fica */
  .hud-mapa-dados .hud-ouro { display: inline-flex; font-size: 0.72rem; }
  .hud-mapa-dados .hud-ouro .moeda { display: inline-block; }
  .hud-ouro-linha { margin-top: 3px; }
}
@media (hover: none), (pointer: coarse) {
  .hud-avisos { display: none; } /* no toque os botões de cima já ficam em destaque */
}

/* Recompensa para escolher: dentro do mapa, em cima e no meio (o menu de cima não aparece no computador) */
.botao-escolha-mapa { position: absolute; top: 10px; left: 50%; z-index: 3; transform: translateX(-50%); padding: 8px 18px; box-shadow: 0 0 0 2px var(--moldura-escura), 0 4px 14px rgba(0, 0, 0, 0.6); }
.botao-escolha-mapa[hidden] { display: none; }
@media (max-width: 760px) { .botao-escolha-mapa { top: auto; bottom: 6px; padding: 6px 12px; font-size: 0.75rem; } }

/* ================= Aviso de versão alfa (tela de login) ================= */
.aviso-alfa { margin: 0 0 16px; padding: 10px 14px 12px; text-align: center; background: rgba(200, 163, 90, 0.08); border: 1px solid var(--moldura-borda-suave); border-radius: var(--moldura-raio); }
.aviso-alfa-selo { display: inline-block; padding: 3px 12px; font-family: var(--titulo); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #1a130a;
  background: linear-gradient(180deg, #ecd39b, var(--ouro) 55%, #a8853f); border: 1px solid var(--moldura-escura); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.6); }
.aviso-alfa p { margin: 8px 0 0; font-size: 0.88rem; line-height: 1.45; color: var(--texto); }

/* ================= Rodapé do site (direitos) ================= */
.rodape-site { margin: 24px 0 8px; padding: 14px 16px 6px; border-top: 1px solid var(--linha); text-align: center; }
.rodape-site p { margin: 0; font-size: 0.82rem; color: var(--apagado); }

/* ================= Setas em pixel art (símbolo #seta-pixel no index.html) =================
   Uma seta só, apontando para a direita; as outras direções giram aqui. */
.seta { display: block; width: 24px; height: 24px; flex: none; overflow: visible; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.55)); pointer-events: none; }
.seta-esquerda { transform: scaleX(-1); }
.seta-cima { transform: rotate(-90deg); }
.seta-baixo { transform: rotate(90deg); }

/* Girar o personagem na criação */
.criacao-girar { display: grid; place-items: center; background: linear-gradient(180deg, #2a2117, #17120d); }
.criacao-girar .seta { width: 22px; height: 22px; }
.criacao-girar:active .seta { transform: translateX(2px); }
.criacao-girar:active .seta-esquerda { transform: scaleX(-1) translateX(2px); }

/* Controle de andar no celular: botões da moldura dourada */
.dpad button { display: grid; place-items: center; background: linear-gradient(180deg, #2a2117, #17120d); border: 2px solid var(--moldura-borda-suave); border-radius: var(--moldura-raio); box-shadow: 0 3px 0 var(--moldura-escura); }
.dpad button:active { background: linear-gradient(180deg, #3a2c1a, #1d1610); border-color: var(--destaque); box-shadow: 0 1px 0 var(--moldura-escura), 0 0 10px rgba(255, 217, 138, 0.35); transform: translateY(2px); }
.dpad .seta { width: 30px; height: 30px; }

/* "Continuar" do diálogo */
.dialogo-seta .seta { width: 12px; height: 12px; }

/* Classe na caixa de seleção: só no celular, acima do personagem */
.criacao-classe-celular { grid-area: classe; display: none; }
.criacao-classe-celular select { width: 100%; min-height: 44px; padding: 8px 40px 8px 12px; font-family: var(--titulo); font-size: 16px; color: #fff4d6;
  background: #120e0a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 3H11V5H10V6H9V7H8V8H7V9H5V8H4V7H3V6H2V5H1Z' fill='%23e6c98c' stroke='%231a130a' stroke-width='1' paint-order='stroke' shape-rendering='crispEdges'/%3E%3C/svg%3E") no-repeat right 12px center / 16px 16px;
  border: 2px solid var(--moldura-borda-suave); border-radius: var(--moldura-raio); -webkit-appearance: none; appearance: none; }
.criacao-classe-celular select:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
@media (max-width: 760px) {
  .criacao-classe-celular { display: block; }
  .criacao-classe-celular .criacao-titulo { margin-bottom: 6px; }
  /* a lista de botões dá lugar à caixa; a descrição da classe continua embaixo */
  #criacao-classe-titulo, #criacao-classes { display: none; }
  .criacao-info-classe { margin-top: 0; padding-top: 0; border-top: 0; }
}

/* Exploração no celular: mapa maior, menu em uma faixa e chat recolhível. */
.chat-resumo { padding: 10px 12px; cursor: pointer; color: var(--ouro-claro); font-family: var(--titulo); font-size: 0.8rem; min-height: 44px; }
.chat-resumo span { float: right; font-family: var(--corpo); font-size: 0.78rem; color: var(--apagado); }
@media (min-width: 761px) and (min-height: 501px) {
  .chat-resumo { display: none; }
}
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
  body:has(#tela-mapa:not([hidden])) { padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  body:has(#tela-mapa:not([hidden])) > .topo { display: none; }
  body:has(#tela-mapa:not([hidden])) .rodape-site { display: none; }
  #tela-mapa .hud { display: flex; padding: 0 0 8px; }
  #tela-mapa .hud-direita { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; width: 100%; }
  #tela-mapa .hud-direita .botao-secundario { grid-column: auto; min-height: 44px; padding: 8px 1px; font-size: clamp(0.52rem, 2vw, 0.7rem); letter-spacing: 0; }
  #tela-mapa .tela-jogo { margin: 0; width: 100%; height: auto; aspect-ratio: 1; border: 2px solid var(--ouro); border-radius: 6px; }
  #tela-mapa .hud-mapa { width: min(156px, 44%); gap: 4px; padding: 4px; }
  #tela-mapa .hud-retrato { width: 28px; height: 36px; }
  #tela-mapa .hud-mapa-dados strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.68rem; }
  #tela-mapa .minimapa canvas { width: 72px; height: 72px; }
  #tela-mapa .minimapa[data-tamanho="grande"] canvas { width: 144px; height: 144px; }
  #tela-mapa .minimapa-barra { display: grid; grid-template-columns: repeat(2, 44px); gap: 3px; margin-top: 3px; }
  #tela-mapa .minimapa-barra button { width: 44px; height: 44px; min-height: 44px; }
  #tela-mapa .minimapa-destino { width: 96px; height: 44px; transform: none; font-size: 16px; margin: 0; padding: 4px 18px 4px 4px; }
  #tela-mapa .minimapa[data-tamanho="grande"] .minimapa-destino { width: 166px; }
  #tela-mapa .minimapa-abrir { min-height: 44px; }
  #tela-mapa .controles { gap: 0; padding: 8px 4px 0; }
  #tela-mapa .controles .so-toque { order: 2; flex-basis: 100%; font-size: 0.72rem; margin: 8px 0 0; text-align: center; }
  #tela-mapa .toque { display: flex; gap: 8px; }
  #tela-mapa .dpad { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); gap: 3px; }
  #tela-mapa .dpad .seta { width: 24px; height: 24px; }
  #tela-mapa .botao-falar { width: 72px; height: 72px; margin-right: 4px; }
  #tela-mapa .chat { margin-top: 8px; }
  #tela-mapa .chat-lista { height: 5em; }
  #tela-mapa .chat-form input { font-size: 16px; width: 0; }
  #tela-mapa .chat-form button { min-height: 44px; padding: 8px; }
  #tela-mapa .rodape { margin: 10px 0 0; font-size: 0.75rem; }
}
@media (orientation: landscape) and (max-height: 500px) {
  #tela-mapa .mapa-centro { position: relative; padding-inline: 144px 84px; }
  #tela-mapa .tela-jogo { width: min(100%, calc((100dvh - 64px) * 12 / 7)); aspect-ratio: 12 / 7; margin: 0 auto; }
  #tela-mapa .controles { padding: 0; }
  #tela-mapa .toque { display: contents; }
  #tela-mapa .dpad { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
  #tela-mapa .botao-falar { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
  #tela-mapa .controles .dica { display: none; }
  #tela-mapa .hud-direita .botao-secundario { font-size: 0.55rem; }
  #tela-mapa .chat, #tela-mapa .rodape { margin-inline: -144px -84px; }
}

/* Lojas e atendimentos no celular: fluxo único, fundos opacos e rolagem própria. */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
  body:has(:is(#tela-loja, #tela-servico):not([hidden])) { overflow: hidden; }
  .loja-sobreposta, .servico-sobreposta {
    position: fixed; inset: 0; z-index: 40; display: block;
    background: var(--fundo); overflow: auto; overscroll-behavior: contain;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }
  .loja-tela { display: flex; flex-direction: column; height: auto; min-height: 0; gap: 10px; align-items: stretch; }
  .loja-heroi { display: none; }
  .loja-ouro { min-width: 0; width: 100%; padding: 8px 12px; font-size: 1rem; flex: none; }
  .loja-esquerda, .loja-janela { height: auto; min-height: 0; flex: none; }
  .loja-titulo { margin-left: 0; font-size: 1rem; padding: 8px 12px; }
  .loja-janela { padding: 8px; }
  .loja-abas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .loja-abas button { min-width: 0; min-height: 48px; padding: 6px 2px; font-size: 0.7rem; }
  .loja-aba-icone { font-size: 1rem; }
  .loja-lista { flex: none; height: auto; max-height: min(32dvh, 260px); min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .loja-linha { min-height: 48px; gap: 6px; padding: 5px; }
  .loja-detalhe { flex: none; width: 100%; max-height: none; overflow: visible; padding: 12px; scroll-margin-top: 10px; }
  .loja-acoes { position: static; background: var(--moldura-fundo); }
  .loja-compra { gap: 8px; }
  .loja-quantidade { flex-wrap: wrap; }
  .loja-quantidade button { min-height: 44px; }
  .loja-botao { min-height: 48px; font-size: 1rem; }
  .loja-fala { flex: none; min-height: 0; padding: 10px 12px; }
  .servico-sobreposta { display: flex; flex-direction: column; overflow: hidden; }
  .servico-tela { height: 100%; min-height: 0; width: 100%; flex: 1; gap: 8px; }
  .servico-cabecalho { position: static; flex: none; padding: 8px; gap: 8px; background: var(--moldura-fundo); }
  .servico-cabecalho > div { min-width: 0; }
  .servico-cabecalho h2 { font-size: clamp(0.8rem, 4vw, 1.1rem); overflow-wrap: anywhere; }
  #fechar-servico { min-height: 44px; padding: 8px; font-size: 0.68rem; flex: none; }
  #fechar-servico small { display: none; }
  .servico-painel { flex: 1; min-height: 0; margin: 0; padding: 12px; overflow-y: auto; overscroll-behavior: contain; }
  .servico-npc { font-size: 0.9rem; }
  #servico-conteudo > p { margin: 8px 0; font-size: 0.9rem; }
  .servico-escolha { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .servico-escolha label { min-width: 0; }
  .servico-escolha select, .servico-seletor select { width: 100%; min-height: 44px; font-size: 16px; }
  .servico-item { grid-template-columns: minmax(0, 1fr); }
  .servico-item-botoes { gap: 8px; }
  .servico-item-botoes button, .servico-botoes button, .servico-escolha button { min-height: 48px; width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .servico-estado { max-width: none; text-align: left; display: block; padding: 8px; border: 1px solid var(--moldura-borda-suave); border-radius: 4px; }
  .servico-item-detalhe { scroll-margin-top: 10px; }
  .servico-botoes { grid-template-columns: minmax(0, 1fr); }
}