/* Astera Online: site oficial (prévia). Paleta da identidade: divulgacao/01 §1.6 */
:root {
  --noite-0: #080b18; --noite-1: #0d1226; --noite-2: #18203d; --noite-3: #243058;
  --ouro: #f2c14e; --ouro-claro: #fff1b8; --brasa: #e8643a; --pergaminho: #efe3c4;
  --pergaminho-2: #b9ad92; --verde: #5fae6a; --estrela: #7fe3ff; --violeta: #8a5cf0;
  --ceu-topo: #0d1226; --ceu-base: #243058; --brilho-ceu: .9;
  --borda: rgba(242, 193, 78, .28);
  --f-titulo: "Cinzel", "Times New Roman", serif;
  --f-texto: "Alegreya Sans", system-ui, sans-serif;
  --f-pixel: "Pixelify Sans", monospace;
  --f-cronica: "Cormorant Garamond", Georgia, serif;
}
:root[data-hora="amanhecer"] { --ceu-topo: #2a2c5a; --ceu-base: #c9725a; --brilho-ceu: .35; }
:root[data-hora="dia"]       { --ceu-topo: #2b4f8c; --ceu-base: #6f9fcf; --brilho-ceu: 0; }
:root[data-hora="entardecer"]{ --ceu-topo: #1e1f4a; --ceu-base: #b8553e; --brilho-ceu: .45; }
:root[data-hora="noite"]     { --ceu-topo: #070a17; --ceu-base: #1a2348; --brilho-ceu: 1; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--noite-1); color: var(--pergaminho);
  font: 400 18px/1.55 var(--f-texto); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--ouro); text-decoration: none; }
a:hover { color: var(--ouro-claro); }
.pixel { image-rendering: pixelated; }
.envelope { width: min(1160px, 100% - 32px); margin-inline: auto; }

/* ---------- topo fixo ---------- */
.barra {
  position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .3s, box-shadow .3s;
}
.barra.solida { background: rgba(8, 11, 24, .92); box-shadow: 0 1px 0 var(--borda); backdrop-filter: blur(6px); }
.barra .envelope { display: flex; align-items: center; gap: 22px; height: 68px; }
.marca { display: flex; align-items: center; gap: 10px; font: 700 18px var(--f-titulo); color: var(--ouro-claro); letter-spacing: .06em; }
.marca img { width: 40px; height: 40px; }
.menu { display: flex; gap: 20px; margin-left: auto; font-size: 16px; }
.menu a { color: var(--pergaminho); opacity: .85; }
.menu a:hover { opacity: 1; color: var(--ouro-claro); }
.controles { display: flex; gap: 8px; }
.chip {
  border: 1px solid var(--borda); background: rgba(13, 18, 38, .6); color: var(--pergaminho);
  font: 500 14px var(--f-texto); padding: 6px 12px; border-radius: 999px; cursor: pointer;
}
.chip[aria-pressed="true"] { border-color: var(--ouro); color: var(--ouro-claro); }
.chip:hover { border-color: var(--ouro); }

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 6px;
  font: 700 17px var(--f-titulo); letter-spacing: .05em; cursor: pointer; border: 0; transition: transform .15s, box-shadow .15s;
}
.botao:hover { transform: translateY(-1px); }
.botao.principal {
  background: linear-gradient(180deg, #ffd978, var(--ouro) 55%, #c8902a); color: #2a1a06;
  box-shadow: 0 0 0 1px #6b4a12 inset, 0 6px 24px rgba(242, 193, 78, .35);
}
.botao.principal:hover { color: #2a1a06; box-shadow: 0 0 0 1px #6b4a12 inset, 0 8px 32px rgba(242, 193, 78, .55); }
.botao.secundario { background: rgba(13, 18, 38, .55); color: var(--ouro-claro); box-shadow: 0 0 0 1px var(--borda) inset; }
.botao.secundario:hover { box-shadow: 0 0 0 1px var(--ouro) inset; }

/* ---------- abertura ---------- */
.abertura {
  position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center; overflow: hidden;
  background: linear-gradient(180deg, var(--ceu-topo), var(--ceu-base) 85%);
  transition: background 2s;
}
.abertura .estrelas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--brilho-ceu); transition: opacity 2s; }
.abertura .cena-fundo {
  position: absolute; inset: auto 0 0 0; height: 30%; background: url(/arte/site-cena-alvorada-vila.webp) center 62% / cover;
  image-rendering: pixelated; opacity: .5; filter: saturate(.85) brightness(.65);
  mask-image: linear-gradient(180deg, transparent, #000 45%); -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%);
}
.abertura canvas.nevoa { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.abertura .conteudo { position: relative; z-index: 2; padding: 60px 16px 70px; }
.abertura .logo { width: min(330px, 70vw); margin: 0 auto; filter: drop-shadow(0 12px 40px rgba(0, 0, 0, .55)); }
.abertura .conteudo { text-shadow: 0 2px 12px rgba(4, 6, 16, .8); }
.slogan { font: 600 clamp(22px, 3.2vw, 32px) var(--f-titulo); color: var(--ouro-claro); margin: 6px 0 6px; letter-spacing: .03em; }
.subslogan { margin: 0 auto 28px; max-width: 560px; color: var(--pergaminho); opacity: .9; }
.acoes { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.selo-teste { margin-top: 18px; font: 500 14px var(--f-pixel); color: var(--estrela); letter-spacing: .04em; }
.rolar { position: absolute; z-index: 2; bottom: 18px; left: 50%; translate: -50% 0; font-size: 13px; opacity: .7; animation: flutua 2.4s ease-in-out infinite; }
@keyframes flutua { 50% { translate: -50% 6px; } }

/* ---------- seções ---------- */
section { padding: 110px 0; position: relative; }
.rotulo { font: 500 14px var(--f-pixel); color: var(--estrela); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 10px; }
h2 { font: 700 clamp(30px, 4vw, 46px)/1.15 var(--f-titulo); color: var(--ouro-claro); margin: 0 0 16px; }
h3 { font: 700 22px var(--f-titulo); color: var(--ouro-claro); margin: 0 0 8px; }
.lead { max-width: 680px; font-size: 20px; opacity: .92; margin: 0 0 40px; }
.divisor { height: 1px; background: linear-gradient(90deg, transparent, var(--borda), transparent); }
.exemplo { display: inline-block; font: 500 12px var(--f-pixel); color: var(--noite-1); background: var(--estrela); padding: 2px 8px; border-radius: 3px; vertical-align: middle; margin-left: 8px; letter-spacing: .04em; }

/* ---------- O Nevoeiro: mapa ---------- */
.mapa { background: radial-gradient(1200px 600px at 50% 0%, var(--noite-2), var(--noite-0)); }
.regioes { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; }
.regiao { margin: 0; position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px var(--borda), 0 20px 50px rgba(0, 0, 0, .45); min-height: 300px; background: var(--noite-0); }
.regiao.alta { grid-row: span 2; min-height: 620px; }
.regiao img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.regiao canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.regiao .legenda {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 22px 18px; z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(8, 11, 24, .92));
}
.regiao .legenda p { margin: 0; font-size: 16px; opacity: .9; }
.regiao .nivel { font: 500 13px var(--f-pixel); color: var(--ouro); }
.regiao .pct { position: absolute; z-index: 3; top: 14px; right: 14px; font: 500 13px var(--f-pixel); background: rgba(8, 11, 24, .75); padding: 4px 10px; border-radius: 4px; color: var(--estrela); }
.trancados { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 20px; }
.trancado {
  position: relative; padding: 18px 14px; border-radius: 8px; text-align: center; overflow: hidden; min-height: 120px;
  background: radial-gradient(circle at 30% 20%, rgba(180, 200, 230, .18), transparent 60%), radial-gradient(circle at 80% 90%, rgba(180, 200, 230, .12), transparent 60%), var(--noite-2);
  box-shadow: 0 0 0 1px rgba(239, 227, 196, .12);
}
.trancado strong { display: block; font: 700 17px var(--f-titulo); color: var(--pergaminho); opacity: .75; }
.trancado span { font-size: 14px; opacity: .6; }
.trancado .cadeado { font-size: 22px; opacity: .55; margin-bottom: 6px; }

/* ---------- Crônica ---------- */
.cronica { background: linear-gradient(180deg, var(--noite-0), #10142b 40%, var(--noite-0)); text-align: center; }
.inscricoes { list-style: none; padding: 0; margin: 40px auto 0; max-width: 760px; display: grid; gap: 26px; counter-reset: ins; }
.inscricoes li {
  font: 500 clamp(22px, 2.6vw, 29px)/1.4 var(--f-cronica); color: var(--pergaminho); opacity: .12; filter: blur(3px);
  transition: opacity 1.1s, filter 1.1s, color 1.1s; position: relative; padding-top: 30px;
}
.inscricoes li::before { counter-increment: ins; content: counter(ins, upper-roman); position: absolute; top: 0; left: 50%; translate: -50% 0; font: 600 13px var(--f-titulo); color: var(--ouro); letter-spacing: .2em; }
.inscricoes li.lida { opacity: 1; filter: none; }
.inscricoes b { color: var(--ouro-claro); font-weight: 700; }
.inscricoes .seren { color: var(--estrela); text-shadow: 0 0 18px rgba(127, 227, 255, .6); }

/* ---------- Como se joga ---------- */
.pilares { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pilar { padding: 28px 26px; border-radius: 10px; background: linear-gradient(180deg, var(--noite-2), rgba(24, 32, 61, .4)); box-shadow: 0 0 0 1px var(--borda); }
.pilar .icone { font-size: 30px; margin-bottom: 10px; }
.pilar p { margin: 0; font-size: 17px; opacity: .9; }
.pilar.hardcore { box-shadow: 0 0 0 1px rgba(232, 100, 58, .5); }
.pilar.hardcore h3 { color: #ffb08f; }

/* ---------- Vocações ---------- */
.vocacoes { background: radial-gradient(900px 500px at 50% 100%, rgba(95, 174, 106, .12), transparent), var(--noite-1); }
.cartas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.carta {
  text-align: center; padding: 22px 18px 24px; border-radius: 10px; background: var(--noite-2); box-shadow: 0 0 0 1px var(--borda);
  transition: transform .2s, box-shadow .2s;
}
.carta:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--ouro), 0 12px 30px rgba(0, 0, 0, .4); }
.palco { height: 200px; display: grid; place-items: center; background: radial-gradient(circle at 50% 70%, rgba(242, 193, 78, .12), transparent 60%); border-radius: 8px; margin-bottom: 14px; }
.sprite { width: 192px; height: 192px; background-size: 1152px 768px; image-rendering: pixelated; animation: andar .9s steps(6) infinite; }
@keyframes andar { from { background-position-x: 0; } to { background-position-x: -1152px; } }
.carta .papel { font: 500 13px var(--f-pixel); color: var(--estrela); margin-bottom: 6px; display: block; }
.carta p { margin: 0; font-size: 16px; opacity: .9; }

/* ---------- Mundo vivo ---------- */
.vivo { background: linear-gradient(180deg, var(--noite-1), var(--noite-0)); }
.painel { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 18px; }
.caixa { border-radius: 10px; background: var(--noite-2); box-shadow: 0 0 0 1px var(--borda); padding: 22px; }
.caixa h3 { font-size: 18px; display: flex; align-items: center; gap: 8px; }
.online { font: 700 54px/1 var(--f-titulo); color: var(--verde); margin: 6px 0 4px; }
.online small { font: 500 16px var(--f-texto); color: var(--pergaminho); opacity: .75; }
.pulso { width: 10px; height: 10px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 0 rgba(95, 174, 106, .7); animation: pulso 2s infinite; }
@keyframes pulso { 70% { box-shadow: 0 0 0 10px rgba(95, 174, 106, 0); } 100% { box-shadow: 0 0 0 0 rgba(95, 174, 106, 0); } }
.do-dia { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.mini { width: 96px; height: 96px; flex: none; background-size: 576px 384px; image-rendering: pixelated; animation: andar-mini .9s steps(6) infinite; }
@keyframes andar-mini { from { background-position-x: 0; } to { background-position-x: -576px; } }
.do-dia strong { display: block; color: var(--ouro-claro); font-family: var(--f-titulo); }
.do-dia span { font-size: 15px; opacity: .85; }
.lapides { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.lapides li { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 6px; background: rgba(8, 11, 24, .45); font-size: 15px; }
.lapides li .cruz { font-size: 20px; opacity: .8; }
.lapides li b { color: var(--ouro-claro); }
.lapides li .mob { color: #ffb08f; }
.lapides li time { font: 500 12px var(--f-pixel); opacity: .6; }
.ranking { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tabela { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabela th { text-align: left; font: 500 12px var(--f-pixel); color: var(--estrela); letter-spacing: .06em; padding: 0 8px 8px; }
.tabela td { padding: 9px 8px; border-top: 1px solid rgba(239, 227, 196, .08); }
.tabela td:first-child { font: 700 15px var(--f-titulo); color: var(--ouro); width: 34px; }
.tabela a { color: var(--pergaminho); }
.tabela a:hover { color: var(--ouro-claro); }

/* ---------- Herói (chamada) ---------- */
.chamada-heroi { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.cartao-heroi {
  border-radius: 12px; padding: 24px; background: linear-gradient(160deg, var(--noite-3), var(--noite-1)); box-shadow: 0 0 0 1px var(--ouro), 0 30px 60px rgba(0, 0, 0, .5);
  display: grid; grid-template-columns: 140px 1fr; gap: 18px; align-items: center; transform: rotate(-1.2deg);
}
.cartao-heroi .sprite { width: 140px; height: 140px; background-size: 840px 560px; animation: andar-140 .9s steps(6) infinite; }
@keyframes andar-140 { from { background-position-x: 0; } to { background-position-x: -840px; } }
.cartao-heroi .nome { font: 700 26px var(--f-titulo); color: var(--ouro-claro); }
.cartao-heroi .dados { font: 500 14px var(--f-pixel); color: var(--estrela); }
.barras { display: flex; gap: 16px; margin-top: 10px; font-size: 14px; opacity: .9; flex-wrap: wrap; }

/* ---------- Astera+ ---------- */
.justo { background: radial-gradient(800px 400px at 0% 50%, rgba(138, 92, 240, .12), transparent), var(--noite-0); }
.justo .grade { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.lista-nunca, .lista-sim { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.lista-nunca li, .lista-sim li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 8px; background: var(--noite-2); font-size: 17px; }
.lista-nunca li::before { content: "✕"; color: var(--brasa); font-weight: 700; }
.lista-sim li::before { content: "✓"; color: var(--verde); font-weight: 700; }

/* ---------- Notícias ---------- */
.noticias .grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.noticia { border-radius: 10px; background: var(--noite-2); box-shadow: 0 0 0 1px var(--borda); padding: 22px; display: flex; flex-direction: column; }
.noticia time { font: 500 13px var(--f-pixel); color: var(--estrela); }
.noticia h3 { font-size: 20px; margin-top: 8px; }
.noticia p { font-size: 16px; opacity: .88; margin: 0 0 14px; flex: 1; }
.noticia.discord { background: linear-gradient(160deg, #2b2f6b, var(--noite-2)); }

/* ---------- Plataformas ---------- */
.plataformas .grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.plataforma { text-align: center; padding: 30px 20px; border-radius: 10px; background: var(--noite-2); box-shadow: 0 0 0 1px var(--borda); }
.plataforma .icone { font-size: 38px; }
.plataforma .estado { display: inline-block; margin-top: 10px; font: 500 13px var(--f-pixel); padding: 4px 10px; border-radius: 4px; }
.estado.agora { background: rgba(95, 174, 106, .2); color: #9fe0a8; }
.estado.breve { background: rgba(239, 227, 196, .1); color: var(--pergaminho-2); }

/* ---------- convite final ---------- */
.convite { text-align: center; background: linear-gradient(180deg, var(--noite-0), var(--ceu-topo)); padding: 120px 0; }
.convite .dragao { width: 120px; margin: 0 auto 16px; filter: drop-shadow(0 0 30px rgba(127, 227, 255, .35)); }

/* ---------- rodapé ---------- */
footer { background: var(--noite-0); border-top: 1px solid var(--borda); padding: 40px 0; font-size: 15px; }
footer .envelope { display: flex; gap: 24px; justify-content: space-between; flex-wrap: wrap; align-items: center; }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
footer small { opacity: .65; }

/* ---------- revelar ao rolar ---------- */
.surge { opacity: 0; translate: 0 24px; transition: opacity .8s, translate .8s; }
.surge.visivel { opacity: 1; translate: 0 0; }

/* ---------- celular ---------- */
@media (max-width: 900px) {
  .menu { display: none; }
  .regioes, .pilares, .painel, .ranking, .chamada-heroi, .justo .grade, .noticias .grade, .plataformas .grade { grid-template-columns: 1fr; }
  .regiao.alta { min-height: 420px; grid-row: auto; }
  .cartas { grid-template-columns: 1fr 1fr; }
  .trancados { grid-template-columns: 1fr 1fr; }
  .sprite { width: 128px; height: 128px; background-size: 768px 512px; animation-name: andar-128; }
  .palco { height: 150px; }
  section { padding: 80px 0; }
  .cartao-heroi { grid-template-columns: 100px 1fr; transform: none; }
  .cartao-heroi .sprite { width: 100px; height: 100px; background-size: 600px 400px; animation-name: andar-100; }
}
@keyframes andar-128 { from { background-position-x: 0; } to { background-position-x: -768px; } }
@keyframes andar-100 { from { background-position-x: 0; } to { background-position-x: -600px; } }
@media (prefers-reduced-motion: reduce) {
  .sprite, .mini, .rolar, .pulso { animation: none; }
  .surge { opacity: 1; translate: none; }
  .inscricoes li { opacity: 1; filter: none; }
}

/* ---------- rodada 2 ---------- */
.icone-jogo { width: 48px; height: 48px; }
.pilar .icone { height: 56px; display: flex; align-items: center; }
.party { position: absolute; z-index: 1; left: 0; right: 0; bottom: 1%; height: 120px; pointer-events: none; }
.andante {
  position: absolute; bottom: 0; width: 120px; height: 120px; background-size: 720px 480px; background-position-y: -240px;
  image-rendering: pixelated; opacity: .92; filter: drop-shadow(0 4px 0 rgba(0,0,0,.35));
  animation: andar-120 .8s steps(6) infinite, atravessar 26s linear infinite; animation-delay: 0s, var(--d);
}
@keyframes andar-120 { from { background-position-x: 0; } to { background-position-x: -720px; } }
@keyframes atravessar { from { left: -140px; } to { left: 100%; } }
.andante:nth-child(2) { margin-left: -100px; bottom: 6px; }
.andante:nth-child(3) { margin-left: -200px; }
.andante:nth-child(4) { margin-left: -300px; bottom: 6px; }
.party .andante { animation-delay: 0s, -11s; }

.seren-estrela {
  width: 14px; height: 14px; margin: 0 auto -6px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 calc(20px + 60px * var(--luz, 0)) calc(4px + 26px * var(--luz, 0)) rgba(127, 227, 255, calc(.35 + .5 * var(--luz, 0))),
              0 0 calc(80px + 200px * var(--luz, 0)) calc(10px + 60px * var(--luz, 0)) rgba(138, 92, 240, calc(.15 + .25 * var(--luz, 0)));
  transition: box-shadow 1.2s; position: relative;
}
.seren-estrela::before, .seren-estrela::after { content: ""; position: absolute; left: 50%; top: 50%; background: linear-gradient(90deg, transparent, #dff8ff, transparent); translate: -50% -50%; }
.seren-estrela::before { width: calc(60px + 80px * var(--luz, 0)); height: 2px; }
.seren-estrela::after { width: 2px; height: calc(60px + 80px * var(--luz, 0)); background: linear-gradient(180deg, transparent, #dff8ff, transparent); }
.cronica { padding-top: 140px; }
.cronica .envelope > h2 { margin-bottom: 70px; }

.primeiro-dia { background: radial-gradient(900px 500px at 80% 0%, rgba(242, 193, 78, .07), transparent), var(--noite-1); }
.trilha { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; position: relative; }
.trilha::before { content: ""; position: absolute; top: 36px; left: 8%; right: 8%; border-top: 2px dashed var(--borda); }
.trilha li { position: relative; text-align: center; padding: 0 6px; }
.trilha .marco { width: 72px; height: 72px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%; background: var(--noite-2); box-shadow: 0 0 0 2px var(--ouro), 0 0 24px rgba(242, 193, 78, .25); position: relative; }
.trilha b { display: block; font: 700 18px var(--f-titulo); color: var(--ouro-claro); margin-bottom: 4px; }
.trilha p { margin: 0; font-size: 15px; opacity: .88; }

.bestiario { background: linear-gradient(180deg, var(--noite-1), #0a1120); overflow: hidden; padding-bottom: 120px; }
.faixa { display: flex; gap: 16px; width: max-content; animation: deslizar 60s linear infinite; padding: 6px 0; }
.faixa:hover { animation-play-state: paused; }
@keyframes deslizar { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.fera { width: 200px; flex: none; text-align: center; padding: 16px 12px 16px; border-radius: 10px; background: var(--noite-2); box-shadow: 0 0 0 1px var(--borda); }
.fera.chefe { box-shadow: 0 0 0 1px var(--brasa), 0 0 30px rgba(232, 100, 58, .18); }
.fera .mini { width: 144px; height: 144px; margin: 0 auto; background-size: 864px 576px; animation-name: andar-144; }
@keyframes andar-144 { from { background-position-x: 0; } to { background-position-x: -864px; } }
.fera b { display: block; font: 700 18px var(--f-titulo); color: var(--ouro-claro); }
.fera .onde { font: 500 12px var(--f-pixel); color: var(--estrela); }
.fera.chefe .onde { color: #ffb08f; }
.fera .loot { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.fera .loot img { width: 40px; height: 40px; background: rgba(8, 11, 24, .5); border-radius: 6px; padding: 2px; }
@media (max-width: 900px) {
  .trilha { grid-template-columns: 1fr; gap: 22px; text-align: left; }
  .trilha::before { top: 0; bottom: 0; left: 35px; right: auto; border-top: 0; border-left: 2px dashed var(--borda); }
  .trilha li { display: grid; grid-template-columns: 72px 1fr; column-gap: 16px; text-align: left; }
  .trilha .marco { grid-row: span 2; margin: 0; }
  .party { height: 80px; } .andante { width: 80px; height: 80px; background-size: 480px 320px; background-position-y: -160px; animation-name: andar-80, atravessar; }
  .andante:nth-child(2) { margin-left: -66px; } .andante:nth-child(3) { margin-left: -132px; } .andante:nth-child(4) { margin-left: -198px; }
}
@keyframes andar-80 { from { background-position-x: 0; } to { background-position-x: -480px; } }
@media (prefers-reduced-motion: reduce) { .faixa, .andante { animation: none; } }

/* ---------- conta e Jogar no topo ---------- */
.controles { align-items: center; }
.botao-topo { padding: 8px 18px; font-size: 15px; border-radius: 999px; }
.chip-conta { display: inline-flex; align-items: center; gap: 8px; }
.conta-avatar { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ouro); color: #2a1a06; font: 700 12px var(--f-titulo); }
.conta-nome { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta-fundo { position: fixed; inset: 0; z-index: 100; background: rgba(4, 6, 16, .72); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 16px; }
.conta-fundo[hidden], .conta-menu[hidden] { display: none; }
.conta-caixa { position: relative; width: min(420px, 100%); background: linear-gradient(180deg, var(--noite-2), var(--noite-1)); border-radius: 14px; padding: 30px 28px 24px; box-shadow: 0 0 0 1px var(--ouro), 0 30px 80px rgba(0, 0, 0, .6); text-align: center; }
.conta-dragao { width: 64px; margin: -64px auto 6px; filter: drop-shadow(0 0 18px rgba(127, 227, 255, .4)); }
.conta-caixa h3 { font-size: 22px; }
.conta-fechar { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: var(--pergaminho); font-size: 18px; cursor: pointer; opacity: .7; }
.conta-abas { display: grid; grid-template-columns: 1fr 1fr; margin: 14px 0 18px; border-bottom: 1px solid var(--borda); }
.conta-abas button { background: none; border: 0; color: var(--pergaminho); font: 600 16px var(--f-titulo); padding: 10px; cursor: pointer; opacity: .6; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.conta-abas button[aria-selected="true"] { opacity: 1; color: var(--ouro-claro); border-color: var(--ouro); }
#conta-form { display: grid; gap: 14px; text-align: left; }
#conta-form label { display: grid; gap: 6px; font-size: 15px; }
#conta-form label[hidden] { display: none; }
#conta-form input { font: 400 17px var(--f-texto); padding: 11px 13px; border-radius: 8px; border: 1px solid var(--borda); background: rgba(4, 6, 16, .6); color: var(--pergaminho); }
#conta-form input:focus { outline: 2px solid var(--ouro); outline-offset: 1px; }
.conta-enviar { justify-content: center; }
.conta-enviar:disabled { opacity: .6; cursor: wait; }
.conta-erro { margin: 0; min-height: 20px; color: #ffb08f; font-size: 15px; }
.conta-nota { margin: 0; font-size: 14px; opacity: .7; text-align: center; }
.conta-menu { position: fixed; z-index: 90; top: 74px; right: max(16px, calc((100vw - 1160px) / 2)); width: 290px; padding: 18px; border-radius: 12px; background: var(--noite-2); box-shadow: 0 0 0 1px var(--ouro), 0 20px 50px rgba(0, 0, 0, .55); display: grid; gap: 12px; }
.conta-quem small { display: block; opacity: .7; font-size: 13px; }
.conta-quem b { color: var(--ouro-claro); word-break: break-all; }
.conta-herois { display: grid; gap: 8px; }
.conta-heroi { padding: 10px 12px; border-radius: 8px; background: rgba(4, 6, 16, .5); display: grid; }
.conta-heroi b { font-family: var(--f-titulo); color: var(--pergaminho); }
.conta-heroi span { font: 500 12px var(--f-pixel); color: var(--estrela); }
.conta-vazia { margin: 0; font-size: 14px; opacity: .8; }
.conta-sair { background: none; border: 0; color: var(--pergaminho); opacity: .7; cursor: pointer; font: 500 14px var(--f-texto); }
.conta-sair:hover { opacity: 1; color: var(--ouro-claro); }
@media (max-width: 900px) {
  #botao-som { display: none; }
  .controles { gap: 6px; } .chip { padding: 6px 10px; } .botao-topo { padding: 7px 12px; font-size: 14px; }
  .conta-nome { display: none; }
  .conta-menu { top: 70px; right: 16px; left: 16px; width: auto; }
}