/* Site de apresentação: estética do cliente do LoL (hextech): azul-abismo, molduras douradas, títulos esculpidos */
:root {
  --abismo: #010a13;
  --hextech: #0a1428;
  --painel: #091428cc;
  --ouro: #c8aa6e;
  --ouro-claro: #f0e6d2;
  --ouro-escuro: #785a28;
  --ciano: #0ac8b9;
  --noxus: #a01d1d;
  --texto: #a09b8c;
  --texto-forte: #f0e6d2;
  --titulo: 'Marcellus', 'Trajan Pro', Georgia, serif;
  --corpo: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  --largura: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; overflow-x: clip; }
body {
  margin: 0; color: var(--texto); font: 400 17px/1.6 var(--corpo); background: var(--abismo);
  background-image: radial-gradient(ellipse at 50% -10%, #0e2a44 0%, transparent 60%), radial-gradient(circle at 10% 60%, #06223355 0%, transparent 40%);
}
img { max-width: 100%; display: block; }
a { color: var(--ouro-claro); }
h1, h2, h3 { font-family: var(--titulo); font-weight: 400; color: var(--ouro-claro); line-height: 1.15; margin: 0; }
h2 { font-size: clamp(28px, 3.4vw, 40px); }
h3 { font-size: 21px; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--ciano); outline-offset: 3px; }
.pular { position: absolute; left: -999px; top: 8px; background: var(--hextech); padding: 8px 12px; z-index: 20; }
.pular:focus { left: 8px; }

/* ---------- botões no estilo do cliente ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 30px;
  font: 400 17px var(--titulo); letter-spacing: 0.06em; text-decoration: none; cursor: pointer;
  border: 2px solid var(--ouro); transition: box-shadow 0.2s, color 0.2s, background 0.2s;
}
.botao-ouro { color: var(--hextech); background: linear-gradient(180deg, #e6c886 0%, #c89b3c 45%, #785a28 100%); box-shadow: inset 0 0 0 1px #f0e6d266; }
.botao-ouro:hover { box-shadow: 0 0 18px #c89b3c88, inset 0 0 0 1px #fff8; }
.botao-contorno { color: var(--ouro-claro); background: #0a1428aa; }
.botao-contorno:hover { color: #fff; border-color: var(--ciano); box-shadow: 0 0 16px #0ac8b955; }

/* ---------- topo ---------- */
.topo { position: sticky; top: 0; z-index: 10; padding: 10px 16px 0; background: linear-gradient(#010a13f2, #010a1300); }
.topo-moldura {
  position: relative; max-width: var(--largura); margin: 0 auto; height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px;
  background: linear-gradient(#0a1428f0, #06101ef0); border: 1px solid var(--ouro-escuro); box-shadow: inset 0 0 0 1px #0ac8b91a;
}
.topo-moldura::before, .topo-moldura::after { content: ''; position: absolute; top: 50%; width: 9px; height: 9px; background: var(--ciano); transform: translateY(-50%) rotate(45deg); box-shadow: 0 0 8px var(--ciano); }
.topo-moldura::before { left: -5px; } .topo-moldura::after { right: -5px; }
.topo-links { display: flex; gap: 26px; }
.topo-links a { font: 15px var(--titulo); color: var(--ouro); text-decoration: none; letter-spacing: 0.05em; }
.topo-links a:hover { color: var(--ouro-claro); }
.topo-emblema { position: absolute; left: 50%; top: -4px; transform: translateX(-50%); width: 78px; height: 78px; filter: drop-shadow(0 4px 10px #000a); }
.topo-acoes .botao { min-height: 38px; padding: 0 22px; font-size: 15px; }

/* ---------- destaque: título + o jogo rodando ao vivo ---------- */
.heroi {
  position: relative; max-width: var(--largura); margin: 0 auto; padding: 72px 16px 64px;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: center;
}
.heroi-fundo {
  /* ocupa exatamente a largura da tela, mesmo com o conteúdo centralizado */
  position: absolute; inset: -110px calc(50% - 50vw) 0; z-index: -1;
  background: linear-gradient(90deg, var(--abismo) 22%, #010a1399 48%, #010a13cc 100%), linear-gradient(0deg, var(--abismo) 2%, transparent 40%),
    url('../assets/img/skins/15.jpg') center 25% / cover no-repeat;
}
.heroi-categoria { font: 16px var(--titulo); color: var(--ciano); letter-spacing: 0.08em; margin-bottom: 14px; }
.heroi h1 {
  font-size: clamp(52px, 7vw, 92px); letter-spacing: 0.02em; line-height: 0.95;
  background: linear-gradient(180deg, #f0e6d2 20%, #c8aa6e 60%, #785a28); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #000);
}
.heroi-sub { margin: 22px 0 32px; max-width: 34em; font-size: 19px; color: #cdbe9a; }
.heroi-botoes { display: flex; flex-wrap: wrap; gap: 14px; }
.heroi-nota { margin: 16px 0 0; font-size: 15px; color: #8f8a7c; }

.janela-jogo {
  position: relative; margin: 0; background: #000; border: 2px solid var(--ouro);
  box-shadow: 0 0 0 4px var(--abismo), 0 0 0 5px var(--ouro-escuro), 0 30px 80px #000c, 0 0 60px #0ac8b922;
}
.janela-jogo::before, .janela-jogo::after { content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid var(--ouro-claro); transform: rotate(45deg); background: var(--hextech); z-index: 2; }
.janela-jogo::before { top: -9px; left: calc(50% - 7px); } .janela-jogo::after { bottom: -9px; left: calc(50% - 7px); }
.janela-jogo-barra, .janela-jogo-rodape { display: flex; justify-content: space-between; gap: 12px; padding: 7px 14px; font-size: 14px; background: linear-gradient(#0a1428, #050d18); color: var(--ouro); }
.janela-jogo-barra span:last-child { color: #ff6a5a; display: inline-flex; align-items: center; gap: 6px; }
.janela-jogo-barra span:last-child::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #ff3a2a; box-shadow: 0 0 6px #ff3a2a; }
.janela-jogo-rodape b { color: var(--ouro-claro); font-weight: 600; }
#demo { display: block; width: 100%; aspect-ratio: 15 / 11; image-rendering: pixelated; }

/* ---------- números ---------- */
.numeros {
  max-width: var(--largura); margin: 0 auto 24px; padding: 0 16px;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.numero { padding: 22px 18px; text-align: center; border-block: 1px solid var(--ouro-escuro); background: #0a142866; }
.numero + .numero { border-left: 1px solid #785a2866; }
.numero b { display: block; font: 30px var(--titulo); color: var(--ouro-claro); }
.numero span { font-size: 15px; }

/* ---------- seções ---------- */
.secao { max-width: var(--largura); margin: 0 auto; padding: 88px 16px 0; }
.secao > h2 { text-align: center; }
.secao-lead { max-width: 40em; margin: 14px auto 0; text-align: center; }

.dividida { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
.dividida-texto h2 { text-align: left; }
.dividida-texto p { margin-top: 18px; max-width: 32em; }
.selos { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 22px 0 0; }
.selos li { padding: 5px 14px; font-size: 15px; color: var(--ouro-claro); border: 1px solid var(--ouro-escuro); background: #0a1428; }
.navegador { margin: 0; border: 1px solid var(--ouro-escuro); background: #050d18; box-shadow: 0 24px 60px #000b; }
.navegador-barra { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #0a1428; border-bottom: 1px solid #785a2866; font-size: 13px; }
.navegador-barra i { width: 9px; height: 9px; border-radius: 50%; background: #3a4a5a; }
.navegador-barra span { margin-left: 10px; padding: 1px 12px; background: #010a13; color: var(--texto); }

/* recursos: o mapa ocupa a coluna da esquerda inteira */
.recursos { margin-top: 44px; display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: auto auto; gap: 18px; }
.recurso { padding: 24px; background: linear-gradient(160deg, #0d1e36, #08121f); border: 1px solid #785a2899; }
.recurso h3 { margin: 16px 0 10px; }
.recurso p { font-size: 16px; }
.recurso-mapa { grid-row: span 2; }
.recurso-mapa img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 40%; border: 1px solid var(--ouro-escuro); image-rendering: pixelated; }

/* bestiário: sprites animados sobre um pedaço de chão */
.bestiario { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.fera { margin: 0; display: grid; justify-items: center; gap: 10px; padding: 18px 12px 16px; text-align: center;
  background: radial-gradient(ellipse 60% 22% at 50% 62%, rgba(0, 0, 0, 0.45), transparent 70%), linear-gradient(180deg, #0d1e36, #08121f);
  border: 1px solid #785a2866; transition: border-color 0.2s, transform 0.2s; }
.fera:hover { border-color: var(--ouro); transform: translateY(-3px); }
.fera canvas { width: 96px; height: 96px; image-rendering: pixelated; filter: drop-shadow(0 4px 3px #000a); }
.fera figcaption b { display: block; font: 17px var(--titulo); color: var(--ouro-claro); line-height: 1.2; }
.fera figcaption span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; color: var(--texto); }
.fera.chefe { grid-column: span 2; border-color: #c8aa6e99; background: radial-gradient(ellipse 50% 25% at 50% 64%, rgba(160, 40, 20, 0.35), transparent 70%), linear-gradient(180deg, #2a1410, #0d0a12); }
.fera.chefe canvas { width: 128px; height: 128px; }
.fera.chefe figcaption span { color: #e0a080; }
@media (prefers-reduced-motion: reduce) { .fera { transition: none; } .fera:hover { transform: none; } }

/* dois jeitos de caçar: Summoner's Rift (automático) e Runeterra (no controle) */
.modos { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.modo { display: grid; grid-template-rows: auto 1fr; background: linear-gradient(160deg, #0d1e36, #08121f); border: 1px solid #785a2899; }
.modo > canvas, .modo > img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 1px solid var(--ouro-escuro); image-rendering: pixelated; background: #000; }
#mini-mapa { aspect-ratio: 4 / 3; object-fit: cover; }
.modo-texto { padding: 22px 24px 26px; }
.modo-tag { margin: 0 0 6px; font: 14px var(--titulo); color: var(--ciano); letter-spacing: 0.08em; }
.modo-texto p:not(.modo-tag) { margin: 10px 0 0; font-size: 16px; }
.modo-texto ul { margin: 14px 0 0; padding-left: 18px; font-size: 15px; }
.modo-texto li { margin-top: 4px; }
.recurso:nth-child(4) { grid-column: 2 / span 2; }
.recurso-icones { display: flex; gap: 8px; }
.recurso-icones img { width: 52px; height: 52px; border: 2px solid var(--ouro-escuro); background: #000; }

/* campeão */
.campeao { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: stretch; padding-top: 88px; }
.campeao-arte {
  position: relative; min-height: 420px; border: 1px solid var(--ouro-escuro);
  background: linear-gradient(0deg, #010a13 0%, transparent 45%), var(--splash, url('../assets/img/skins/0.jpg')) 30% 20% / cover no-repeat;
}
.campeao-escolha { display: flex; gap: 8px; margin-top: 18px; }
.campeao-escolha button {
  font: inherit; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto); cursor: pointer;
  padding: 8px 16px; min-height: 40px; background: #0a1628; border: 1px solid #785a2888;
}
.campeao-escolha button:hover { color: var(--ouro-claro); }
.campeao-escolha button[aria-selected="true"] { color: var(--ouro-claro); border-color: var(--ouro); box-shadow: inset 0 -3px 0 var(--ciano); }
.campeao-escolha button:focus-visible { outline: 2px solid var(--ciano); outline-offset: 2px; }
.campeao-nome { font-size: 20px; color: var(--ouro-claro); }
.campeao-nome small { display: block; font-size: 13px; color: var(--texto); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 4px; }
#campeao-sprite { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: 160px; height: 160px; image-rendering: pixelated; filter: drop-shadow(0 6px 6px #000); }
.campeao-texto { padding: 40px; background: linear-gradient(160deg, #0d1e36, #08121f); border: 1px solid var(--ouro-escuro); border-left: none; }
.campeao-texto > p { margin-top: 16px; }
.campeao-habilidades { display: flex; gap: 10px; margin-top: 24px; }
.campeao-habilidades figure { margin: 0; width: 64px; text-align: center; }
.campeao-habilidades img { width: 56px; height: 56px; margin: 0 auto 6px; border: 2px solid var(--ouro-escuro); }
.campeao-habilidades figcaption { font-size: 12px; line-height: 1.25; color: var(--texto); }
.campeao-skins { margin-top: 26px; padding-top: 18px; border-top: 1px solid #785a2866; font-size: 16px; }

/* sistemas em abas */
.sistemas { margin-top: 40px; display: grid; grid-template-columns: 260px minmax(0, 1fr); border: 1px solid var(--ouro-escuro); background: #08121f; }
.sistemas-abas { display: flex; flex-direction: column; border-right: 1px solid #785a2866; }
.sistemas-abas button {
  padding: 16px 20px; text-align: left; font: 17px var(--titulo); color: var(--texto); background: none; border: 0; border-bottom: 1px solid #785a2833; cursor: pointer;
}
.sistemas-abas button:hover { color: var(--ouro-claro); }
.sistemas-abas button[aria-selected="true"] { color: var(--ouro-claro); background: linear-gradient(90deg, #0ac8b91f, transparent); box-shadow: inset 3px 0 0 var(--ciano); }
.sistemas-painel { padding: 36px; display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 32px; align-items: center; min-height: 300px; }
.sistemas-painel h3 { font-size: 26px; }
.sistemas-painel p { margin-top: 14px; max-width: 34em; }
.sistemas-painel ul { margin: 16px 0 0; padding-left: 18px; }
.sistemas-painel li { margin-top: 6px; }
.sistemas-visual { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sistemas-visual img { width: 100%; aspect-ratio: 1; border: 2px solid var(--ouro-escuro); background: #000; image-rendering: auto; }
.sistemas-visual img.pixel { image-rendering: pixelated; }

/* ranking */
.ranking-lista { max-width: 720px; margin: 36px auto 0; padding: 0; list-style: none; counter-reset: pos; border: 1px solid var(--ouro-escuro); }
.ranking-lista li { counter-increment: pos; display: grid; grid-template-columns: 52px 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid #785a2833; background: #08121f; }
.ranking-lista li::before { content: counter(pos) 'º'; font: 20px var(--titulo); color: var(--texto); }
.ranking-lista li:nth-child(1)::before { color: #f0d080; } .ranking-lista li:nth-child(2)::before { color: #d8dce4; } .ranking-lista li:nth-child(3)::before { color: #d89050; }
.ranking-lista li:nth-child(1) { background: linear-gradient(90deg, #3a2e1288, #08121f); }
.ranking-lista img { width: 36px; height: 36px; image-rendering: pixelated; }
.ranking-nome { color: var(--ouro-claro); font-weight: 500; }
.ranking-nome small { display: block; color: var(--texto); font-weight: 400; font-size: 13px; }
.ranking-nivel { font: 18px var(--titulo); color: var(--ouro-claro); }
.ranking-nivel small { font: 13px var(--corpo); color: var(--texto); }
.ranking-lista li.ranking-vazio { display: block; text-align: center; padding: 22px; }
.ranking-lista li.ranking-vazio::before { content: none; }

/* dúvidas */
.duvidas { max-width: 800px; }
.duvidas h2 { margin-bottom: 30px; }
.duvidas details { border-bottom: 1px solid #785a2866; }
.duvidas summary { padding: 18px 4px; font: 19px var(--titulo); color: var(--ouro-claro); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.duvidas summary::-webkit-details-marker { display: none; }
.duvidas summary::after { content: '+'; color: var(--ouro); font-family: var(--corpo); }
.duvidas details[open] summary::after { content: '−'; }
.duvidas details p { padding: 0 4px 20px; max-width: 40em; }

/* chamada final */
.chamada { position: relative; margin: 100px auto 0; padding: 110px 16px; text-align: center; overflow: hidden; }
.chamada-fundo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--abismo), #010a13cc 50%, var(--abismo)), url('../assets/img/skins/3.jpg') center 25% / cover no-repeat; }
.chamada p { margin: 16px auto 30px; max-width: 32em; color: #cdbe9a; }

/* rodapé */
.rodape { border-top: 1px solid var(--ouro-escuro); background: #000810; padding: 48px 16px 28px; }
.rodape-colunas { max-width: var(--largura); margin: 0 auto; display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.rodape-colunas > div { max-width: 320px; }
.rodape-logo { width: 56px; margin-bottom: 12px; }
.rodape nav { display: grid; gap: 6px; }
.rodape h3 { font-size: 17px; margin-bottom: 4px; }
.rodape nav a { color: var(--texto); text-decoration: none; }
.rodape nav a:hover { color: var(--ouro-claro); }
.rodape-legal { max-width: var(--largura); margin: 36px auto 0; padding-top: 20px; border-top: 1px solid #785a2844; font-size: 13px; display: grid; gap: 6px; }

/* ---------- telas menores ---------- */
@media (max-width: 980px) {
  .heroi, .dividida, .campeao { grid-template-columns: 1fr; }
  .heroi { padding-top: 48px; gap: 36px; }
  .heroi-fundo { background-position: 70% 20%; }
  .recursos { grid-template-columns: 1fr 1fr; }
  .modos { grid-template-columns: 1fr; }
  .fera.chefe { grid-column: span 1; }
  .recurso-mapa { grid-row: auto; grid-column: span 2; }
  .recurso:nth-child(4) { grid-column: auto; }
  .campeao-texto { border-left: 1px solid var(--ouro-escuro); border-top: none; }
  .sistemas { grid-template-columns: 1fr; }
  .sistemas-abas { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid #785a2866; }
  .sistemas-abas button { white-space: nowrap; border-bottom: none; }
  .sistemas-abas button[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--ciano); }
  .sistemas-painel { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .topo-links { display: none; }
  .topo-emblema { left: 22px; transform: none; width: 60px; height: 60px; }
  .numeros { grid-template-columns: 1fr 1fr; }
  .numero:nth-child(3) { border-left: none; }
  .recursos { grid-template-columns: 1fr; }
  .recurso-mapa { grid-column: auto; }
  .campeao-texto { padding: 26px; }
  .campeao-habilidades { flex-wrap: wrap; }
  .sistemas-painel { padding: 24px; }
  .ranking-lista li { grid-template-columns: 40px 36px minmax(0, 1fr) auto; padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .botao { transition: none; }
}