/* =====================================================================================================
   Tema "ferro forjado e latão hextech": cliente de OT com acabamento de Noxus/Piltover.
   Painéis de ferro com chanfro (luz em cima, sombra embaixo), bordas e títulos em latão, fonte pixel
   nos títulos, botões e números; o texto corrido continua em Verdana pequena, como no Tibia.
   A peça de destaque é a moldura de latão rebitada da tela do jogo; o resto fica sóbrio.
   Carregado depois de estilo.css: só redefine cores e acabamento, a estrutura continua lá.
   ===================================================================================================== */
:root {
  --fundo: #0c1018;
  --painel: #1b1e25;
  --painel-2: #12151b;
  --luz: #3a3f4a;
  --sombra: #05070b;
  --texto: #e6dcc6;
  --fraco: #8f8778;
  --latao: #c9a050;
  --latao-claro: #f0d48a;
  --latao-escuro: #5e4520;
  --sangue: #b3261e;
  --arcano: #3fc8e8;
  --pixel: "Jersey 15", Verdana, sans-serif;
}
html, body { color: var(--texto); }
body {
  background-color: var(--fundo);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(201, 160, 80, 0.07), transparent 55%),
    radial-gradient(ellipse at 50% 120%, rgba(179, 38, 30, 0.1), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.012) 0 2px, transparent 2px 6px);
}

/* painéis de ferro: chanfro duplo e um fio de latão escuro em volta */
.painel {
  background: linear-gradient(#20242c, var(--painel) 40px);
  border: 1px solid var(--latao-escuro);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.07), inset -1px -1px 0 rgba(0, 0, 0, 0.6), 0 2px 0 #000, 0 3px 10px rgba(0, 0, 0, 0.45);
}
.painel > header {
  font: 400 18px/20px var(--pixel); letter-spacing: 0.4px; color: var(--latao-claro);
  background: linear-gradient(#2a2e37, #191c22); border-bottom: 1px solid var(--latao-escuro);
  box-shadow: inset 0 1px 0 rgba(240, 212, 138, 0.12); text-shadow: 0 1px 0 #000;
}
.painel > header small { font: 400 10px/1.2 Verdana, Tahoma, sans-serif; color: var(--fraco); text-shadow: none; letter-spacing: 0; }
.aba-conteudo > header + .corpo + header { border-top: 1px solid var(--latao-escuro); }

/* a tela do jogo fica com uma borda simples e escura */
#moldura { border: 1px solid #000; box-shadow: 0 0 0 1px #262a33; }
#hud { font: bold 12px/1.3 Verdana, Tahoma, sans-serif; }
#controle-som button { background: rgba(12, 16, 24, 0.8); border: 1px solid var(--latao-escuro); color: var(--latao-claro); }
#controle-som button:hover { background: rgba(40, 34, 22, 0.95); }

/* botões: placa de ferro com fio de latão em cima; afundam ao clicar */
.botao {
  font: 400 16px/1.05 var(--pixel); color: var(--texto); letter-spacing: 0.4px;
  background: linear-gradient(#2e333d, #1d2027); border: 1px solid; border-color: #555b66 #07090d #07090d #555b66;
  box-shadow: inset 0 1px 0 rgba(240, 212, 138, 0.18), 0 1px 0 #000; text-shadow: 0 1px 0 #000;
}
.botao:hover:not(:disabled) { color: #fff; background: linear-gradient(#3a3424, #26221a); border-color: var(--latao) #07090d #07090d var(--latao); }
.botao:active:not(:disabled) { background: linear-gradient(#16181d, #23262d); border-color: #07090d #555b66 #555b66 #07090d; box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.6); }
.botao:disabled { color: #545a64; background: #191b20; box-shadow: none; }
.botao:focus-visible, .abas button:focus-visible, .slot:focus-visible { outline: 2px solid var(--arcano); outline-offset: 1px; }
.botao-vip, .botao-sair { font: bold 10px/1.3 Verdana, Tahoma, sans-serif; }

/* a coluna da direita vai até o fim da tela: a aba aberta ocupa o espaço que sobra */
#direita > .aba-conteudo:not([hidden]) { flex: 1 1 auto; }

/* abas da direita: fichas de ferro; a ativa ganha o latão */
.abas { gap: 3px; }
.abas button {
  font: bold 10px/1 Verdana, Tahoma, sans-serif !important; letter-spacing: -0.2px !important; padding: 6px 1px 5px !important; color: var(--fraco);
  background: linear-gradient(#22262e, #171a20); border: 1px solid var(--latao-escuro); border-bottom: none;
}
.abas button:hover { color: var(--texto); }
.abas button.ativa { color: var(--latao-claro); background: linear-gradient(#3a3020, #20242c); box-shadow: inset 0 2px 0 var(--latao); }

/* números ficam em Verdana negrito (a fonte pixel em tamanho pequeno confunde 3 com 9); só o nível ganha destaque */

.rotulo { font: 400 16px/1.1 var(--pixel); letter-spacing: 0.4px; text-transform: none; color: var(--latao-claro); }

/* barras de vida, mana e XP em gomos, como medidores antigos */
.barra { height: 14px; background: #06080c; border: 1px solid #000; box-shadow: 0 0 0 1px var(--latao-escuro); }
.barra i::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(0, 0, 0, 0.28) 7px 8px); }
.barra.vida i { background: linear-gradient(#ff5a4a, var(--sangue) 55%, #5a0c08); }
.barra.mana i { background: linear-gradient(#7ae4ff, #1f8fc0 55%, #0c3a5a); }
.barra.xp i { background: linear-gradient(#f0d48a, #b0862e 55%, #4a3410); }
.barra span { font: bold 10px/12px Verdana, Tahoma, sans-serif; }

/* espaços de item: poços escuros afundados; a raridade aparece na borda e num brilho leve */
.slot { background: radial-gradient(circle at 50% 40%, #1a1e26, #0b0d12); border-width: 1px; box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.8), 0 0 0 1px #000; }
.slot.basico { border-color: #6a6e78; }
.slot.epico { border-color: #a46ae0; box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.8), 0 0 0 1px #000, 0 0 6px rgba(164, 106, 224, 0.35); }
.slot.lendario { border-color: var(--latao); box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.8), 0 0 0 1px #000, 0 0 8px rgba(240, 212, 138, 0.45); }
.slot.espolio-slot { border-color: #4a4e58; }

.icone { border: 1px solid; border-color: #07090d #4a505c #4a505c #07090d; box-shadow: 0 0 0 1px #000; }
.hab.na-barra .icone { border-color: var(--latao-claro) var(--latao-escuro) var(--latao-escuro) var(--latao-claro); box-shadow: 0 0 0 1px #000, 0 0 6px rgba(240, 212, 138, 0.35); }

/* console de mensagens */
#console .aba { font: 400 16px/1.3 var(--pixel); letter-spacing: 0.4px; background: #171a20; border-color: var(--latao-escuro); }
#console .aba.ativa { color: var(--latao-claro); background: #232831; }
#console .canal { background: linear-gradient(#0f1217, #12151b); }
#chat-form { background: #1b1e25; border-top: 1px solid var(--latao-escuro); }
#chat-texto { background: #0b0d12; border-color: #2a2f38; }

/* janelas (mapa, NPC, mercado): mesma placa de ferro, título em latão maior */
.janela { background: rgba(4, 6, 10, 0.72); }
.janela > .painel { box-shadow: 0 0 0 1px #000, 0 0 0 4px #20242c, 0 0 0 5px var(--latao-escuro), 0 16px 48px rgba(0, 0, 0, 0.8); }
.janela > .painel > header { font-size: 21px; line-height: 26px; }

/* barras de rolagem em latão */
aside, .janela > .painel, #console .canal, #mapa-info, .troca-lista { scrollbar-color: var(--latao-escuro) #0b0d12; }

@media (prefers-reduced-motion: reduce) {
  .marcador.atual .mk-ico::after { animation: none; }
}

/* ficha do personagem: ouro em destaque, ataque e defesa em blocos (ícone, nome discreto, número grande),
   e recarga, abates e mortes numa linha de rodapé */
.ficha { margin-top: 6px; display: grid; gap: 5px; }
.ficha .ic { width: 12px; height: 12px; flex: none; fill: currentColor; }
.ficha-ouro { display: flex; align-items: baseline; gap: 6px; padding: 4px 7px; color: var(--latao); background: linear-gradient(90deg, rgba(201, 160, 80, 0.14), transparent); border-left: 2px solid var(--latao); }
.ficha-ouro .ic { align-self: center; }
.ficha-ouro b { font: bold 15px/1 Verdana, Tahoma, sans-serif; }
.ficha-ouro span { color: var(--fraco); font-size: 10px; }
.ficha-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.st { position: relative; display: grid; grid-template-columns: 12px 1fr; align-items: center; column-gap: 4px; padding: 4px 5px 5px; background: #12151b; border: 1px solid #262a33; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.st span { font-size: 9.5px; color: var(--fraco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st { grid-template-columns: 12px 1fr; padding: 4px 6px 5px; }
.st b { grid-column: 1 / -1; margin-top: 3px; font: bold 15px/1 Verdana, Tahoma, sans-serif; color: #fff; }
.st small { position: absolute; right: 6px; bottom: 6px; font: bold 10px/1 Verdana, Tahoma, sans-serif; color: #ffb070; }
.st span { font-size: 10px; }
.st.ataque { color: #ff7a5a; border-top-color: #5a2a22; }
.st.defesa { color: #7ac8ff; border-top-color: #22405a; }
.ficha-rodape { display: flex; justify-content: space-between; gap: 6px; padding: 3px 2px 0; border-top: 1px solid #262a33; color: var(--fraco); font-size: 10px; }
.ficha-rodape span { display: inline-flex; align-items: center; gap: 3px; }
.ficha-rodape b { color: var(--texto); font-weight: bold; }
.ficha-rodape .ic { width: 10px; height: 10px; fill: #6a6458; }

/* caixas de diálogo do jogo (no lugar do alert e do confirm do navegador) */
.dialogo-fundo { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4, 6, 10, 0.68); }
.dialogo { width: min(380px, 100%); box-shadow: 0 0 0 1px #000, 0 0 0 4px #20242c, 0 0 0 5px var(--latao-escuro), 0 16px 48px rgba(0, 0, 0, 0.85); animation: dialogo-entra 0.14s ease-out; }
.dialogo > header { font-size: 21px; line-height: 26px; padding: 4px 10px; }
.dialogo .corpo { padding: 12px 12px 10px; }
.dialogo-texto { margin: 0 0 14px; font-size: 12px; line-height: 1.5; color: var(--texto); white-space: pre-line; }
.dialogo-botoes { display: flex; justify-content: flex-end; gap: 6px; }
.dialogo-botoes .botao { width: auto; min-width: 96px; margin: 0; padding: 6px 14px; }
.dialogo-ok { color: #1e1404; background: linear-gradient(var(--latao-claro), var(--latao)); border-color: #fff0c0 var(--latao-escuro) var(--latao-escuro) #fff0c0; text-shadow: none; }
.dialogo-ok:hover:not(:disabled) { color: #1e1404; background: linear-gradient(#fff0b0, var(--latao-claro)); }
.dialogo.perigo > header { color: #ff9a80; }
.dialogo.perigo .dialogo-ok { color: #fff; background: linear-gradient(#d0402e, var(--sangue)); border-color: #ff8a70 #4a0c08 #4a0c08 #ff8a70; text-shadow: 0 1px 0 #000; }
.dialogo.perigo .dialogo-ok:hover:not(:disabled) { color: #fff; background: linear-gradient(#e85440, #c4302a); }
@keyframes dialogo-entra { from { transform: translateY(6px) scale(0.98); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dialogo { animation: none; } }

/* nível: brasão de latão com o número grande, e a barra de XP ao lado com quanto falta */
.nivel-bloco { display: flex; align-items: stretch; gap: 7px; margin: 2px 0 5px; }
.nivel-emblema { flex: none; width: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: radial-gradient(circle at 50% 30%, #3a2c14, #1a140a 75%); border: 1px solid; border-color: var(--latao-claro) var(--latao-escuro) var(--latao-escuro) var(--latao-claro);
  box-shadow: 0 0 0 1px #000, inset 0 0 8px rgba(0, 0, 0, 0.7), 0 0 10px rgba(240, 212, 138, 0.18); clip-path: polygon(50% 0, 100% 18%, 100% 78%, 50% 100%, 0 78%, 0 18%); padding: 4px 0 6px; }
.nivel-emblema small { font: bold 8px/1 Verdana, Tahoma, sans-serif; color: #b8a070; text-transform: lowercase; }
.nivel-emblema b { font: bold 22px/1 Verdana, Tahoma, sans-serif; color: var(--latao-claro); text-shadow: 0 1px 0 #000, 0 0 8px rgba(240, 212, 138, 0.45); }
.nivel-xp { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.nivel-xp-topo { display: flex; justify-content: space-between; font-size: 10px; color: var(--fraco); }
.nivel-xp-topo b { color: var(--latao-claro); }
.nivel-xp .barra { margin: 3px 0 0; }

/* telas grandes: o cliente ocupa a largura toda e as colunas laterais crescem junto */
@media (min-width: 1001px) {
  #cliente { max-width: none; grid-template-columns: clamp(240px, 15vw, 330px) minmax(0, 1fr) clamp(264px, 17vw, 360px); }
}
#moldura { align-self: center; }

/* preços e saldos em diamantes: sempre em Verdana negrito, legível (a fonte pixel some em tamanho pequeno) */
#diamantes { margin-left: auto; font: bold 12px/1 Verdana, Tahoma, sans-serif; color: #8ae8ff; text-shadow: 0 1px 0 #000; }
.produto .botao { min-width: 62px; padding: 4px 8px; font: bold 11px/1 Verdana, Tahoma, sans-serif; letter-spacing: 0; color: #8ae8ff; }
.produto .botao:disabled { color: #4f6670; }
.oferta .preco, .oferta .botao, .skin .preco { font-family: Verdana, Tahoma, sans-serif; letter-spacing: 0; }

/* espólios no mapa: a imagem no chip do monstro e no bloco "Só para venda" */
.esp-chip img { width: 14px; height: 14px; image-rendering: pixelated; }
.mi-rar.venda .drop-itens img { background: #0b0d12; }
.mi-rar.venda .mi-rar-topo span { font-weight: normal; font-size: 10px; }

/* barra de combate: 4 habilidades, maiores, cada uma com a sua tecla */
#barra { grid-template-columns: repeat(4, 48px); gap: 6px; justify-content: start; }
#barra .tecla-hab { font-size: 11px; line-height: 13px; padding: 0 3px; }

/* mapa: a janela tem tamanho fixo (o painel de informações rola por dentro), para nada se mexer ao passar o mouse */
@media (min-width: 901px) {
  .mapa-corpo { flex-wrap: nowrap; }
  #mapa-info { flex: none; width: 290px; height: calc(min(560px, 100vw - 60px) + 26px); max-height: none; scrollbar-gutter: stable; }
}
.janela > .painel { scrollbar-gutter: stable; }


/* botão de PK (caveira) no canto da tela de Runeterra; ligado, pulsa em vermelho */
#bt-pk { position: absolute; left: 6px; bottom: 6px; z-index: 3; display: flex; align-items: center; gap: 4px; height: 26px; padding: 0 7px 0 5px;
  font: 400 15px/1 var(--pixel); letter-spacing: 0.5px; color: #c8c0b0; cursor: pointer;
  background: rgba(12, 16, 24, 0.82); border: 1px solid var(--latao-escuro); }
#bt-pk[hidden] { display: none; }
#bt-pk svg { width: 16px; height: 16px; fill: #8a8478; }
#bt-pk:hover { color: #fff; border-color: var(--latao); }
#bt-pk.ligado { color: #ffd0c8; background: rgba(90, 10, 8, 0.88); border-color: #ff5a40; animation: pk-pulso 1.2s ease-in-out infinite; }
#bt-pk.ligado svg { fill: #fff0e8; filter: drop-shadow(0 0 3px #ff3020); }
@keyframes pk-pulso { 50% { box-shadow: 0 0 10px 2px rgba(255, 60, 40, 0.7); } }
@media (prefers-reduced-motion: reduce) { #bt-pk.ligado { animation: none; } }
/* tecla de cada poção (1 a 5) */
.pocao { position: relative; }
.tecla-pocao { position: absolute; left: 2px; top: 1px; font: bold 9px/1 Verdana, Tahoma, sans-serif; color: #fff; text-shadow: 1px 1px 0 #000, -1px 0 0 #000; pointer-events: none; }

/* botão de alcance das habilidades, ao lado da caveira (só em Runeterra) */
#bt-alcance { position: absolute; left: 60px; bottom: 6px; z-index: 3; display: flex; align-items: center; gap: 4px; height: 26px; padding: 0 7px 0 5px;
  font: 400 15px/1 var(--pixel); letter-spacing: 0.5px; color: #c8c0b0; cursor: pointer;
  background: rgba(12, 16, 24, 0.82); border: 1px solid var(--latao-escuro); }
#bt-alcance[hidden] { display: none; }
#bt-alcance svg { width: 16px; height: 16px; fill: #8a8478; }
#bt-alcance:hover { color: #fff; border-color: var(--latao); }
#bt-alcance.ligado { color: #d8f4ff; background: rgba(10, 50, 80, 0.88); border-color: #5ac8ff; }
#bt-alcance.ligado svg { fill: #bfeaff; filter: drop-shadow(0 0 3px #30a8ff); }

/* Runeterra: botão de entrada no painel Local */
.botao-runeterra { width: 100%; margin: 6px 0 2px; padding: 7px 8px; font: 400 18px/1 var(--pixel); letter-spacing: 0.5px; color: #ffe2a8;
  background: linear-gradient(#5a3a14, #3a2408); border-color: #c98a3a; }
.botao-runeterra:hover:not(:disabled) { color: #fff; border-color: #ffc060; }
.botao-runeterra:disabled { color: #9a8a70; background: #2a2218; border-color: #5a4a30; }

/* mapa: abas Summoner's Rift / Runeterra e o mapa-múndi */
.mapa-abas { display: flex; gap: 4px; }
.aba-mapa { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 5px 9px; cursor: pointer;
  font: 400 17px/1 var(--pixel); color: #a8a090; background: #12151c; border: 1px solid #2a2e38; border-bottom-color: transparent; }
.aba-mapa small { font: 10px/1.2 Verdana, Tahoma, sans-serif; color: #7a7468; }
.aba-mapa[aria-selected="true"] { color: #ffe2a8; background: #1e2230; border-color: var(--latao-escuro); }
.aba-mapa[aria-selected="true"] small { color: #c8b890; }
#mundo-area { width: min(560px, calc(100vw - 60px)); aspect-ratio: 4 / 3; border: 2px solid; border-color: var(--sombra) var(--luz) var(--luz) var(--sombra); background: #000; }
#mundo-area[hidden], #mapa-area[hidden], .legenda[hidden] { display: none; }
#mapa-mundo { width: 100%; height: 100%; display: block; image-rendering: pixelated; cursor: crosshair; }
.mi-cidades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.mi-cidade { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 5px 6px; border-left: 3px solid var(--cor); }
.mi-cidade b { color: var(--cor); font: 400 16px/1 var(--pixel); }
.mi-cidade small { font-size: 10px; color: #a8a090; }
.mi-cidade:disabled { opacity: 0.55; }
@media (min-width: 901px) {
  #mapa-info { height: calc(min(560px, 100vw - 60px) + 66px); }
}

/* mapa: o que rende caçar em cada lugar */
.mi-stats.rende b { font: bold 15px/1.1 Verdana, Tahoma, sans-serif; }
.mi-stats.rende b.ouro { color: #ffd84a; }
.mi-rende { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; gap: 4px; font-size: 11.5px; line-height: 1.35; color: #d8d0c0; }
.mi-rende li { padding-left: 14px; position: relative; }
.mi-rende li::before { content: ''; position: absolute; left: 3px; top: 6px; width: 5px; height: 5px; background: var(--latao); transform: rotate(45deg); }
.mi-rende li.ruim { color: #ff9a8a; }
.mi-rende li.ruim::before { background: #e04040; }
.mi-rende b.lend { color: #ffc040; font-weight: normal; }

/* conversa com NPC: retrato grande, falas em balões legíveis e respostas em botões */
#janela-npc .painel { width: min(500px, calc(100vw - 24px)); }
.npc-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.npc-topo img { width: 64px; height: 64px; image-rendering: pixelated; background: radial-gradient(circle at 50% 60%, #2a3040, #12151b 70%); border: 1px solid var(--latao-escuro); }
.npc-topo b { display: block; font: 400 24px/1 var(--pixel); color: var(--latao-claro); letter-spacing: 0.5px; }
.npc-topo small { color: var(--fraco); font-size: 12px; }
#npc-conversa { height: 190px; padding: 8px; display: flex; flex-direction: column; gap: 6px; background: #0e1117; }
#npc-conversa p { margin: 0; max-width: 88%; padding: 6px 10px; font: 13px/1.45 Verdana, Tahoma, sans-serif; border-radius: 3px; }
#npc-conversa .ele { align-self: flex-start; color: #2a2018; background: #f1e8d2; border-left: 3px solid var(--latao); }
#npc-conversa .ele b { color: #8a4a10; }
#npc-conversa .eu { align-self: flex-end; color: #dfe8f4; background: #23324a; font-size: 12px; }
#npc-palavras { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
#npc-palavras button.opcao { font: 13px/1 Verdana, Tahoma, sans-serif; text-decoration: none; color: var(--texto); background: #20242e; border: 1px solid #3a4050; padding: 7px 12px; cursor: pointer; }
#npc-palavras button.opcao:hover { border-color: var(--latao); color: #fff; }
#npc-palavras button.principal { color: #ffe9b0; background: #3a2c12; border-color: var(--latao-escuro); }
#npc-palavras button.sair { margin-left: auto; color: var(--fraco); }

/* forja do Ornn: arrastar o item até a bigorna */
.forja-bancada { display: flex; gap: 12px; align-items: stretch; padding: 10px; background: #0e1117; border: 1px solid var(--luz); }
.forja-slot { position: relative; flex: none; width: 76px; height: 76px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 70%, rgba(255,140,40,0.25), transparent 70%), #1a1410; border: 2px dashed #6a4a24; }
.forja-slot::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 6px; background: #4a4e58; box-shadow: 0 -2px 0 #8a8e98; }
.forja-slot.cheia { border-style: solid; border-color: var(--latao); }
.forja-slot.esperando { border-color: #ffb040; }
.forja-slot.sobre { background-color: #3a2410; box-shadow: 0 0 12px rgba(255,160,60,0.6) inset; }
.forja-slot .forja-pegar img { width: 48px; height: 48px; }
.forja-tirar { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; padding: 0; font: bold 13px/1 Verdana, sans-serif; color: #fff; background: #5a1a14; border: 1px solid #a03a2a; cursor: pointer; z-index: 1; }
.forja-vazia { align-self: center; color: var(--texto); font-size: 13px; }
.forja-vazia small { display: block; color: var(--fraco); margin-top: 3px; }
.forja-det { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.forja-det > b { font-size: 14px; }
.forja-passo { display: flex; align-items: baseline; gap: 6px; font: bold 15px Verdana, sans-serif; }
.forja-passo i { font-style: normal; color: var(--fraco); }
.forja-passo .alvo { color: #7ae07a; }
.forja-passo em { font: normal 11px Verdana, sans-serif; color: var(--fraco); }
.forja-det dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; }
.forja-det dt { color: var(--fraco); }
.forja-det dd { margin: 0; color: var(--texto); }
.forja-det dd.chance { color: #7ae07a; font-weight: bold; }
.forja-det dd.risco { color: #ff9a8a; }
.forja-det .botoes.vezes { flex-direction: row; gap: 4px; }
.forja-det .botoes.vezes .botao { width: auto; flex: 1; font-size: 12px; padding: 5px 4px; }
.forja-det .botao.principal { color: #ffe9b0; border-color: var(--latao); }
.forja-max { color: var(--latao-claro); }
.forja-ouro { margin: 6px 0; }
.forja-grupo small { display: block; color: var(--fraco); margin: 6px 0 3px; }
.forja-itens { display: flex; flex-wrap: wrap; gap: 4px; }
.forja-pegar { position: relative; display: inline-block; cursor: grab; line-height: 0; }
.forja-pegar img { width: 36px; height: 36px; image-rendering: pixelated; background: var(--painel-2); border: 1px solid var(--sombra); }
.forja-pegar:hover img { border-color: var(--latao); }
.forja-pegar.na-bigorna { opacity: 0.3; cursor: default; }
.forja-pegar .ref { position: absolute; right: 1px; bottom: 1px; line-height: 1; }
/* mapa: voltar para a visão geral de Runeterra */
.mi-voltar { margin: 0 0 6px; padding: 3px 8px; font: 12px Verdana, sans-serif; color: var(--latao-claro); background: none; border: 1px solid var(--latao-escuro); cursor: pointer; }

#npc-retrato { width: 64px; height: 64px; }

/* bancada de montagem do Ornn */
.montar-bancada { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: #0e1117; border: 1px solid var(--luz); }
.montar-alvo { display: flex; align-items: center; gap: 8px; }
.montar-alvo img { width: 40px; height: 40px; }
.montar-alvo b { font-size: 14px; }
.montar-slots { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.montar-slots .mais { color: var(--fraco); font-weight: bold; }
.montar-slot { position: relative; width: 62px; min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: #1a1410; border: 2px dashed #6a4a24; padding: 3px; text-align: center; }
.montar-slot .fantasma { width: 32px; height: 32px; opacity: 0.3; filter: grayscale(1); image-rendering: pixelated; }
.montar-slot small { font-size: 9px; line-height: 1.1; color: var(--fraco); }
.montar-slot.cheio { border-style: solid; border-color: var(--latao); }
.montar-slot.sobre, .montar-bancada.sobre .montar-slot:not(.cheio) { background-color: #3a2410; border-color: #ffb040; }
.montar-slot .forja-pegar img { width: 40px; height: 40px; }
.montar-info { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; font-size: 12px; }
.montar-info dt { color: var(--fraco); }
.montar-info dd { margin: 0; }
.montar-info dd.chance { color: #7ae07a; font-weight: bold; }
.montar-bancada .botoes.vezes { flex-direction: row; gap: 4px; }
.montar-bancada .botoes.vezes .botao { width: auto; flex: 1; font-size: 12px; padding: 5px 4px; }
.montar-bancada .botao.principal, .troca-linha .botao.principal { color: #ffe9b0; border-color: var(--latao); }
.forja-pegar.nao-serve { opacity: 0.25; cursor: default; }

/* criar conta: passo do código enviado por email */
#entrada-codigo { display: grid; gap: 8px; padding: 10px; background: #0e1117; border: 1px solid var(--latao-escuro); }
#entrada-codigo[hidden] { display: none; }
#entrada-codigo h3 { margin: 0; font: 400 22px/1 var(--pixel); color: var(--latao-claro); }
#entrada-codigo p { margin: 0; font-size: 12px; line-height: 1.45; }
#entrada-codigo b { color: #fff; word-break: break-all; }
#entrada-form #entrada-codigo-campo { font: bold 28px/1 Verdana, Tahoma, sans-serif; letter-spacing: 10px; text-align: center; padding: 10px 6px; color: #ffd84a; background: #0a0c10; border: 1px solid var(--luz); }
.entrada-codigo-acoes .link { font: inherit; color: var(--latao-claro); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.entrada-codigo-acoes .link:disabled { color: var(--fraco); text-decoration: none; cursor: default; }

/* ---------- tela de entrada: o mundo de Runeterra no fundo, campos maiores e os passos da criação ---------- */
#tela-entrada { background: #05070b; overflow: hidden; }
#tela-entrada::before { content: ''; position: absolute; inset: -40px; background: var(--fundo-entrada) center / cover no-repeat; filter: blur(14px) brightness(0.32); }
#tela-entrada::after { content: ''; position: absolute; inset: 0; image-rendering: pixelated; background: radial-gradient(ellipse at 50% 50%, rgba(5, 8, 14, 0.15), rgba(3, 5, 9, 0.75) 85%), linear-gradient(rgba(3, 5, 9, 0.42), rgba(3, 5, 9, 0.42)), var(--fundo-entrada) center / contain no-repeat; }
#tela-entrada > .painel { position: relative; z-index: 1; box-shadow: 0 0 0 1px #000, 0 0 0 4px #20242c, 0 0 0 5px var(--latao-escuro), 0 24px 70px rgba(0, 0, 0, 0.85), 0 0 80px rgba(201, 160, 80, 0.12); }
#tela-entrada .painel { width: 420px; max-width: calc(100vw - 24px); }
#tela-entrada.criando .painel { width: 640px; }
#tela-entrada .painel > header { font-size: 22px; }
#tela-entrada .logo-mini { width: 22px; height: 22px; }
.entrada-capa { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 12px 6px; text-align: center; }
.entrada-capa img { width: 84px; height: 84px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.7)); }
.entrada-capa p { margin: 0; font: 400 19px/1.1 var(--pixel); color: var(--latao-claro); letter-spacing: 0.3px; }
#tela-entrada.criando .entrada-capa { display: none; }
#entrada-form { gap: 10px; }
#entrada-form label { gap: 4px; font-size: 12px; color: #b8b0a0; }
#entrada-form input { font: 14px Verdana, Tahoma, sans-serif; padding: 9px 10px; background: #0a0c10; color: #fff; border: 1px solid #3a3f4a; border-radius: 2px; }
#entrada-form input:focus { outline: none; border-color: var(--latao); box-shadow: 0 0 0 2px rgba(201, 160, 80, 0.25); }
#entrada-form input::placeholder { color: #5f5a52; }
#entrada-email-campo small { font-size: 11px; color: var(--fraco); }
#entrada-dica { font-size: 11px; }
#entrada-erro:not(:empty) { padding: 7px 10px; font-size: 12px; color: #ffb4a8; background: rgba(160, 30, 20, 0.18); border: 1px solid rgba(220, 70, 50, 0.5); }
#entrada-aviso { padding: 7px 10px; font-size: 12px; color: #c8e8ff; background: rgba(40, 90, 140, 0.2); border: 1px solid rgba(90, 160, 220, 0.45); }
#entrada-enviar { padding: 10px; font: 400 19px/1 var(--pixel); letter-spacing: 0.5px; color: #ffe2a8; background: linear-gradient(#5a3a14, #3a2408); border-color: #c98a3a; }
#entrada-enviar:hover:not(:disabled) { color: #fff; border-color: #ffc060; }
#entrada-enviar:disabled { opacity: 0.6; }
.entrada-passos { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.entrada-passos[hidden] { display: none; }
.entrada-passos li { flex: 1; display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 12px; color: var(--fraco); background: #0e1117; border: 1px solid #2a2e38; }
.entrada-passos li span { display: grid; place-items: center; width: 20px; height: 20px; font: bold 11px Verdana, sans-serif; color: var(--fraco); border: 1px solid #3a3f4a; border-radius: 50%; }
.entrada-passos li[aria-current] { color: var(--texto); border-color: var(--latao-escuro); background: #1a1610; }
.entrada-passos li[aria-current] span { color: #1a1206; background: var(--latao); border-color: var(--latao); }
.carta-campeao b { font-size: 13px; }
#campeao-detalhe { padding: 8px 10px; font-size: 12px; line-height: 1.45; }
#entrada-abas button { font-size: 13px; padding: 7px 6px; }

/* jogadores online, ao lado do nome do personagem */
#st-online { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font: 11px/1 Verdana, Tahoma, sans-serif; color: #9ad89a; white-space: nowrap; }
#st-online[hidden] { display: none; }
#st-online i { width: 7px; height: 7px; border-radius: 50%; background: #3cd23c; box-shadow: 0 0 5px #3cd23c; }
#st-online b { color: #d8f4d8; }
#st-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* captcha da Cloudflare na tela de entrada */
#entrada-captcha { min-height: 65px; }
#entrada-captcha[hidden] { display: none; }