/* Play Arena — visual próprio: grafite, ouro e carmesim */
:root {
  --fundo: #0e1118;
  --fundo-2: #131824;
  --cartao: #181e2c;
  --cartao-2: #1e2536;
  --linha: #2a3347;
  --texto: #e9ecf3;
  --mudo: #9aa4b8;
  --ouro: #f2b740;
  --ouro-2: #ffd36b;
  --carmesim: #e5484d;
  --verde: #3dd68c;
  --azul: #5aa9ff;
  --roxo: #b58cff;
  --raio: 14px;
  --sombra: 0 10px 30px rgba(0, 0, 0, .35);
  --larg: 1180px;
  --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fonte-titulo: 'Cinzel', Georgia, serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--texto); font: 15px/1.55 var(--fonte);
  background-image: radial-gradient(1200px 600px at 80% -10%, rgba(229, 72, 77, .12), transparent 60%),
                    radial-gradient(900px 500px at -10% 10%, rgba(242, 183, 64, .08), transparent 60%);
  background-attachment: fixed;
  padding-bottom: 76px;
}
a { color: var(--ouro-2); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-family: var(--fonte-titulo); font-weight: 800; font-size: clamp(1.7rem, 4vw, 2.5rem); letter-spacing: .02em; }
p { margin: 0 0 .8em; }
.mudo { color: var(--mudo); }
.pequeno { font-size: .85rem; }
.centro { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
hr { border: 0; border-top: 1px solid var(--linha); margin: 12px 0; }

/* ---------- topo */
.topo { position: sticky; top: 0; z-index: 30; background: rgba(14, 17, 24, .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); }
.topo-in { max-width: var(--larg); margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 18px; }
.marca { display: flex; align-items: center; gap: 10px; color: var(--texto); font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase; }
.marca:hover { text-decoration: none; }
.nav-pc { display: flex; gap: 2px; flex: 1; }
.nav-pc a { color: var(--mudo); padding: 8px 10px; border-radius: 8px; font-weight: 500; }
.nav-pc a:hover, .nav-pc a.ativo { color: var(--texto); background: var(--cartao); text-decoration: none; }
.nav-pc a.ativo { box-shadow: inset 0 -2px 0 var(--ouro); }
.topo-acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.idiomas { display: flex; gap: 2px; background: var(--cartao); border-radius: 8px; padding: 2px; }
.idiomas a { color: var(--mudo); font-size: .78rem; font-weight: 700; padding: 4px 7px; border-radius: 6px; }
.idiomas a.ativo { background: var(--cartao-2); color: var(--texto); }
.idiomas a:hover { text-decoration: none; color: var(--texto); }

/* ---------- botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 10px; padding: 11px 18px; font: 600 .95rem var(--fonte); cursor: pointer; text-decoration: none !important; transition: transform .08s, filter .15s, background .15s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-ouro { background: linear-gradient(180deg, var(--ouro-2), var(--ouro)); color: #2a1a00; box-shadow: 0 6px 18px rgba(242, 183, 64, .25); }
.btn-ouro:hover { filter: brightness(1.06); }
.btn-fantasma { background: var(--cartao); color: var(--texto); border-color: var(--linha); }
.btn-fantasma:hover { background: var(--cartao-2); }
.btn-p { padding: 7px 12px; font-size: .88rem; border-radius: 8px; }
.btn-largo { width: 100%; }
button.link { background: none; border: 0; color: var(--texto); font: inherit; padding: 10px 0; cursor: pointer; text-align: left; }

/* ---------- estrutura */
main { max-width: var(--larg); margin: 0 auto; padding: 0 16px; }
.secao { margin: 28px 0; }
.secao-titulo { font-family: var(--fonte-titulo); font-size: 1.25rem; letter-spacing: .03em; }
.cabecalho { padding: 34px 0 6px; }
.cabecalho > p { color: var(--mudo); max-width: 720px; }
.cabecalho-erro { text-align: center; padding: 70px 0; }
.voltar { display: inline-block; color: var(--mudo); margin-bottom: 10px; font-size: .9rem; }
.duas-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.cartao { background: linear-gradient(180deg, var(--cartao), var(--fundo-2)); border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px; box-shadow: var(--sombra); min-width: 0; }
.cartao-titulo { font-size: 1.05rem; font-weight: 700; margin-bottom: 12px; }
.sub-titulo { font-size: .95rem; margin: 18px 0 10px; color: var(--mudo); }
.vazio { background: var(--cartao); border: 1px dashed var(--linha); border-radius: var(--raio); padding: 28px; text-align: center; color: var(--mudo); }
.link-seta { display: inline-block; margin-top: 12px; font-weight: 600; }

/* ---------- etiquetas */
.etiqueta { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--cartao-2); color: var(--mudo); border: 1px solid var(--linha); white-space: nowrap; vertical-align: middle; }
.et-entregue { color: var(--verde); border-color: rgba(61, 214, 140, .35); background: rgba(61, 214, 140, .08); }
.et-desenvolvimento { color: var(--ouro-2); border-color: rgba(242, 183, 64, .35); background: rgba(242, 183, 64, .08); }
.et-confirmado { color: var(--azul); border-color: rgba(90, 169, 255, .35); background: rgba(90, 169, 255, .08); }
.et-planejado { color: var(--roxo); border-color: rgba(181, 140, 255, .35); background: rgba(181, 140, 255, .08); }
.et-erro, .et-mvp { color: #ff8a8e; border-color: rgba(229, 72, 77, .4); background: rgba(229, 72, 77, .1); }
.et-chefe { color: var(--ouro-2); border-color: rgba(242, 183, 64, .35); background: rgba(242, 183, 64, .08); }
.et-ouro { color: var(--ouro-2); }

/* ---------- herói da home */
.heroi { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: 26px; align-items: center; padding: 48px 0 20px; }
.heroi h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); background: linear-gradient(180deg, #fff, #ffd9a0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.heroi-txt { font-size: 1.08rem; color: #c9d0de; max-width: 560px; }
.heroi-botoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.selo { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ouro); margin-bottom: 10px; }
.heroi-sprites { position: absolute; inset: 0; pointer-events: none; opacity: .14; z-index: -1; }
.heroi-sprites img { position: absolute; image-rendering: pixelated; transform: scale(1.6); animation: flutua 6s ease-in-out infinite; }
.heroi-sprites img:nth-child(1) { left: 2%; top: 12%; }
.heroi-sprites img:nth-child(2) { left: 30%; top: 2%; animation-delay: -1s; }
.heroi-sprites img:nth-child(3) { left: 46%; top: 72%; animation-delay: -2s; }
.heroi-sprites img:nth-child(4) { left: 12%; top: 78%; animation-delay: -3s; }
.heroi-sprites img:nth-child(5) { left: 58%; top: 18%; animation-delay: -4s; }
.heroi-sprites img:nth-child(6) { left: 88%; top: 6%; animation-delay: -2.5s; }
.heroi-sprites img:nth-child(7) { left: 92%; top: 70%; animation-delay: -1.5s; }
.heroi-sprites img:nth-child(8) { left: 72%; top: 86%; animation-delay: -3.5s; }
@keyframes flutua { 50% { translate: 0 -10px; } }
@media (prefers-reduced-motion: reduce) { .heroi-sprites img { animation: none; } }
.heroi-lado { display: grid; gap: 14px; }

/* ---------- status */
.status-card { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px; box-shadow: var(--sombra); }
.status-linha { display: flex; align-items: center; gap: 10px; }
.ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--carmesim); box-shadow: 0 0 0 4px rgba(229, 72, 77, .15); }
.no-ar .ponto { background: var(--verde); box-shadow: 0 0 0 4px rgba(61, 214, 140, .18); animation: pulsa 2s infinite; }
@keyframes pulsa { 50% { box-shadow: 0 0 0 7px rgba(61, 214, 140, .05); } }
.status-num { display: flex; align-items: baseline; gap: 10px; margin: 10px 0; }
.status-num span { font: 800 2.4rem var(--fonte-titulo); color: var(--ouro-2); }
.status-servs { display: flex; gap: 6px; flex-wrap: wrap; }
.status-servs span { font-size: .75rem; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--cartao-2); }
.status-servs .ok { color: var(--verde); }
.status-servs .nao { color: #ff8a8e; }
.aviso-p { color: var(--ouro-2); font-size: .88rem; margin-top: 10px; }
.ponto-on { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); vertical-align: middle; }
.txt-on { color: var(--verde); }
.info-servidor { margin: 0; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 6px 18px; }
.info-servidor div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linha); }
.info-servidor div:last-child { border-bottom: 0; }
.info-servidor dt { color: var(--mudo); }
.info-servidor dd { margin: 0; font-weight: 600; text-align: right; }

/* ---------- atalhos e cards */
.grade-atalhos, .grade-db { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.atalho, .cartao-db { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: var(--raio); background: linear-gradient(180deg, var(--cartao), var(--fundo-2)); border: 1px solid var(--linha); color: var(--texto); transition: transform .15s, border-color .15s; }
.atalho:hover, .cartao-db:hover { transform: translateY(-3px); border-color: var(--ouro); text-decoration: none; }
.atalho img, .cartao-db img { height: 48px; width: auto; object-fit: contain; align-self: flex-start; image-rendering: pixelated; margin-bottom: 6px; }
.atalho span, .cartao-db span { color: var(--mudo); font-size: .9rem; }
.cartao-db em { margin-top: auto; padding-top: 8px; font-style: normal; color: var(--ouro-2); font-weight: 700; }
.grade-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.cartao-cla { color: var(--texto); display: flex; flex-direction: column; gap: 10px; }
.cartao-cla:hover { border-color: var(--ouro); text-decoration: none; }
.cla-topo { display: flex; align-items: center; gap: 12px; }
.cla-topo > div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cla-topo strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emblema { border-radius: 6px; image-rendering: pixelated; background: var(--cartao-2); }
.emblema-g { width: 64px; height: 64px; }
.vazio-emb { width: 40px; height: 40px; display: inline-block; border: 1px dashed var(--linha); }
.cla-aviso { color: #c9d0de; font-size: .9rem; margin: 0; }
.cla-rodape { display: flex; gap: 12px; flex-wrap: wrap; font-size: .85rem; }
.mini-dl { margin: 12px 0 0; display: grid; gap: 6px; }
.mini-dl div { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; }
.mini-dl dt { color: var(--mudo); }
.mini-dl dd { margin: 0; }

/* ---------- listas */
.lista-top { list-style: none; margin: 0; padding: 0; }
.lista-top li { display: grid; grid-template-columns: 32px 1fr auto auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--linha); }
.lista-top .nivel { font-weight: 700; color: var(--ouro-2); }
.pos { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--cartao-2); font-weight: 800; font-size: .85rem; }
.pos-1 { background: linear-gradient(180deg, #ffe08a, #e0a325); color: #3a2600; }
.pos-2 { background: linear-gradient(180deg, #eef1f6, #a9b2c2); color: #222; }
.pos-3 { background: linear-gradient(180deg, #f2b98a, #b46b34); color: #2a1300; }
.lista-roadmap-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lista-roadmap-mini li { display: flex; gap: 10px; align-items: center; }
.lista-simples { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.lista-numerada { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 8px; }
.lista-botoes { display: grid; gap: 10px; }

/* ---------- tabelas */
.tabela-rolagem { overflow-x: auto; border-radius: var(--raio); }
.tabela { width: 100%; border-collapse: collapse; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.tabela th, .tabela td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mudo); background: var(--fundo-2); }
.tabela tbody tr:hover { background: rgba(255, 255, 255, .02); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela .num { text-align: right; white-space: nowrap; }
.tabela-compacta { background: transparent; border: 0; box-shadow: none; }
.tabela-compacta td { padding: 7px 4px; }
.com-icone { display: flex; align-items: center; gap: 8px; }
.com-icone img { flex: none; image-rendering: pixelated; }
.com-emblema { display: flex; align-items: center; gap: 8px; }
.mini-mob { width: 32px; height: 32px; object-fit: contain; }
.preco { color: var(--ouro-2); font-weight: 700; }

/* ---------- filtros e abas */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
input, select, textarea { background: var(--fundo-2); color: var(--texto); border: 1px solid var(--linha); border-radius: 8px; padding: 9px 11px; font: inherit; min-width: 0; }
input:focus, select:focus { outline: 2px solid rgba(242, 183, 64, .5); border-color: var(--ouro); }
.filtros input[type=search] { flex: 1 1 220px; }
.abas { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px; padding: 4px; margin-top: 8px; }
.abas a { color: var(--mudo); padding: 7px 14px; border-radius: 7px; font-weight: 600; }
.abas a.ativo { background: var(--cartao-2); color: var(--texto); box-shadow: inset 0 -2px 0 var(--ouro); }
.abas a:hover { text-decoration: none; color: var(--texto); }
.opcao { display: inline-flex; align-items: center; gap: 6px; color: var(--mudo); font-size: .9rem; }
.contadores { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.paginacao { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 20px 0; }

/* ---------- database */
.grade-mobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.mob-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px 10px; border-radius: var(--raio); background: var(--cartao); border: 1px solid var(--linha); color: var(--texto); }
.mob-card:hover { border-color: var(--ouro); text-decoration: none; transform: translateY(-2px); }
.mob-img { height: 96px; display: grid; place-items: center; }
.mob-img img { max-height: 96px; max-width: 140px; image-rendering: pixelated; }
.mob-card .mudo { font-size: .8rem; }
.mob-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.mob-tags span { font-size: .72rem; padding: 2px 7px; border-radius: 999px; background: var(--cartao-2); color: var(--mudo); }
.mob-tags.grande { justify-content: flex-start; margin-top: 8px; }
.mob-tags.grande span { font-size: .82rem; padding: 4px 10px; }
.ficha-topo { display: flex; align-items: center; gap: 20px; }
.ficha-img { width: 140px; height: 140px; flex: none; display: grid; place-items: center; background: radial-gradient(circle, var(--cartao-2), transparent 70%); border-radius: 50%; }
.ficha-img img { max-width: 130px; max-height: 130px; image-rendering: pixelated; transform: scale(1.3); }
.ficha-img-item img { transform: scale(2.4); }
.stats { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.stats div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linha); }
.stats dt { color: var(--mudo); }
.stats dd { margin: 0; font-weight: 600; text-align: right; }
.atributos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.atributos div { text-align: center; background: var(--cartao-2); border-radius: 8px; padding: 6px 0; }
.atributos span { display: block; font-size: .7rem; color: var(--mudo); font-weight: 700; }
.grade-elementos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.el-celula { background: var(--cartao-2); border-radius: 8px; padding: 8px 4px; text-align: center; }
.el-celula span { display: block; font-size: .75rem; color: var(--mudo); }
.el-forte { color: var(--verde); }
.el-fraco { color: #ff8a8e; }
.el-nulo { color: var(--mudo); opacity: .6; }
.tabela-elementos th, .tabela-elementos td { text-align: center; padding: 8px 6px; font-size: .88rem; }
.tabela-elementos tbody th { text-align: left; color: var(--mudo); font-weight: 600; background: var(--fundo-2); }
.desc-item p { margin: 0 0 4px; }
.cor { color: var(--c); }
.detalhes { margin-top: 14px; }
.detalhes summary { cursor: pointer; color: var(--mudo); }
.detalhes pre { white-space: pre-wrap; background: var(--fundo); border: 1px solid var(--linha); border-radius: 8px; padding: 10px; font-size: .82rem; overflow-x: auto; }
.grade-mapas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.mapa-card { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: var(--raio); background: var(--cartao); border: 1px solid var(--linha); color: var(--texto); }
.mapa-card:hover { border-color: var(--ouro); text-decoration: none; }
.mapa-img { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--fundo-2); display: grid; place-items: center; margin-bottom: 6px; }
.mapa-img img { width: 100%; height: 100%; object-fit: cover; }
.mapa-card .mudo { font-size: .8rem; }
.mapa-mobs { display: flex; gap: 4px; margin-top: 4px; }
.mapa-mobs img { width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; }
.col-mapa { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mapa-grande img { width: 100%; border-radius: 10px; display: block; }
.calc-campos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.calc-campos label { display: grid; gap: 6px; color: var(--mudo); font-size: .88rem; }
.calc-resultado { font-size: 1.2rem; margin-top: 16px; }
.calc-resultado strong { color: var(--ouro-2); font: 800 1.6rem var(--fonte-titulo); }

/* ---------- passos (jogar) e roadmap */
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.passo { position: relative; background: linear-gradient(180deg, var(--cartao), var(--fundo-2)); border: 1px solid var(--linha); border-radius: var(--raio); padding: 22px; }
.passo-n { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(180deg, var(--ouro-2), var(--ouro)); color: #2a1a00; font-weight: 800; margin-bottom: 12px; }
.passo h2 { font-size: 1.1rem; }
.passo p { color: var(--mudo); }
.trilha { list-style: none; margin: 0; padding: 0; position: relative; }
.trilha::before { content: ''; position: absolute; left: 17px; top: 10px; bottom: 10px; width: 2px; background: var(--linha); }
.marco { display: flex; gap: 16px; margin-bottom: 16px; position: relative; }
.marco-n { flex: none; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cartao-2); border: 2px solid var(--linha); font-weight: 800; font-size: .85rem; }
.marco-entregue .marco-n { border-color: var(--verde); color: var(--verde); }
.marco-desenvolvimento .marco-n { border-color: var(--ouro); color: var(--ouro-2); }
.marco-corpo { flex: 1; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; }
.marco-topo { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.marco-corpo p:last-child { margin: 0; }

/* ---------- formulários */
.form-pagina { display: grid; place-items: center; padding: 40px 0; }
.form { width: 100%; max-width: 460px; display: grid; gap: 14px; }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: .9rem; }
.form label small { font-weight: 400; }
.form h1 { font-size: 1.6rem; margin: 0; }
.opcoes { border: 0; padding: 0; margin: 0; display: flex; gap: 16px; flex-wrap: wrap; }
.opcoes legend { font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.opcao-termos { align-items: flex-start; }
.opcao-termos input { margin-top: 4px; }
.alerta { border-radius: 10px; padding: 12px 14px; margin: 0; }
ul.alerta { padding-left: 30px; }
.alerta-erro { background: rgba(229, 72, 77, .12); border: 1px solid rgba(229, 72, 77, .4); color: #ffc2c4; }
.alerta-ok { background: rgba(61, 214, 140, .1); border: 1px solid rgba(61, 214, 140, .35); color: #b8f3d4; }

/* ---------- rodapé */
.rodape { border-top: 1px solid var(--linha); margin-top: 60px; background: var(--fundo-2); }
.rodape-in { max-width: var(--larg); margin: 0 auto; padding: 30px 16px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 24px; }
.rodape-col { display: grid; gap: 6px; align-content: start; }
.rodape-col a { color: var(--mudo); }
.rodape-legal { max-width: var(--larg); margin: 0 auto; padding: 0 16px 24px; color: var(--mudo); font-size: .8rem; }

/* ---------- menu do celular */
.nav-cel { display: none; }
.gaveta[hidden] { display: none; }
.gaveta { position: fixed; inset: 0; z-index: 60; }
.gaveta-fundo { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.gaveta-painel { position: absolute; right: 0; top: 0; bottom: 0; width: min(320px, 86vw); background: var(--fundo-2); border-left: 1px solid var(--linha); padding: 54px 20px 20px; display: flex; flex-direction: column; overflow-y: auto; }
.gaveta-painel a { color: var(--texto); padding: 10px 0; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, .04); }
.gaveta-painel a.sub { padding-left: 14px; color: var(--mudo); font-weight: 500; }
.gaveta-painel .idiomas { margin-top: 14px; align-self: flex-start; }
.gaveta-fechar { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: var(--texto); font-size: 2rem; cursor: pointer; line-height: 1; }

@media (max-width: 1020px) {
  .nav-pc { display: none; }
  .grade-atalhos, .grade-db { grid-template-columns: repeat(2, 1fr); }
  .rodape-in { grid-template-columns: 1fr 1fr; }
  .calc-campos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  body { padding-bottom: 84px; }
  .so-pc { display: none; }
  .heroi, .duas-col, .passos, .col-mapa { grid-template-columns: minmax(0, 1fr); }
  .heroi { padding-top: 28px; }
  .stats { grid-template-columns: 1fr; }
  .atributos { grid-template-columns: repeat(3, 1fr); }
  .ficha-topo { flex-direction: column; align-items: flex-start; }
  .ficha-img { width: 110px; height: 110px; }
  .grade-mobs { grid-template-columns: repeat(2, 1fr); }
  .lista-top li { grid-template-columns: 30px 1fr auto; }
  .lista-top li .mudo { display: none; }
  .tabela th, .tabela td { padding: 8px; font-size: .88rem; }
  .nav-cel { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(19, 24, 36, .96); backdrop-filter: blur(10px); border-top: 1px solid var(--linha); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .nav-cel-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; color: var(--mudo); font: 600 .66rem var(--fonte); text-transform: uppercase; letter-spacing: .04em; padding: 4px 0; cursor: pointer; }
  .nav-cel-btn:hover { text-decoration: none; color: var(--texto); }
  .nav-cel-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .nav-cel-jogar img { width: 42px; height: 42px; margin-top: -20px; filter: drop-shadow(0 4px 10px rgba(229, 72, 77, .45)); }
  .nav-cel-jogar { color: var(--ouro-2); }
  .rodape-in { grid-template-columns: 1fr; }
}