/* Dawn of Metin2 — tema "noite virando amanhecer" */
:root {
  --noite: #0a0e1f;
  --noite-2: #121833;
  --cartao: #161d3a;
  --cartao-borda: #263063;
  --texto: #e8e6f2;
  --mudo: #9a9cc0;
  --aurora: #ff8a3d;
  --aurora-2: #ffc46b;
  --rosa: #e8577a;
  --gm: #8b6cff;
  --ok: #3ddc97;
  --ruim: #ff5d6c;
  --shinsoo: #e0484f;
  --chunjo: #e6b740;
  --jinno: #4a8fe7;
  --raio: 14px;
  --sombra: 0 10px 30px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font: 16px/1.6 Inter, system-ui, sans-serif;
  color: var(--texto);
  background: var(--noite);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--aurora-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: Cinzel, serif; letter-spacing: .02em; line-height: 1.2; }
h1 { font-size: 2rem; margin: .2em 0 .6em; }
h2 { font-size: 1.3rem; margin: 1.2em 0 .6em; color: var(--aurora-2); }
h3 { font-size: 1.05rem; margin: .8em 0 .4em; }
code { background: #0003; padding: .1em .35em; border-radius: 5px; }
.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
.conteudo { flex: 1; padding: 28px 0 56px; }
.mudo { color: var(--mudo); }
.pequeno { font-size: .85rem; }
.centro { text-align: center; }
.inline { display: inline; }
.ok { color: var(--ok); }
.ruim { color: var(--ruim); }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 10;
  background: rgba(10, 14, 31, .85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #ffffff10;
}
.topo-in { display: flex; align-items: center; gap: 24px; height: 64px; }
.marca { display: flex; align-items: center; gap: 10px; color: var(--texto); font-family: Cinzel, serif; font-weight: 800; font-size: 1.15rem; }
.marca:hover { text-decoration: none; }
.marca em { font-style: normal; color: var(--aurora); font-size: .8em; }
.menu { display: flex; gap: 4px; }
.menu a { color: var(--mudo); padding: 8px 12px; border-radius: 8px; font-weight: 500; }
.menu a:hover, .menu a.ativo { color: var(--texto); background: #ffffff0d; text-decoration: none; }
.conta-area { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 600 .95rem Inter, sans-serif;
  padding: 9px 16px; border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; color: var(--texto); background: none;
  transition: transform .1s, filter .15s, background .15s;
}
.btn:hover { text-decoration: none; filter: brightness(1.1); }
.btn:active { transform: translateY(1px); }
.btn-pri { background: linear-gradient(135deg, var(--aurora), var(--rosa)); color: #fff; box-shadow: 0 6px 18px #ff8a3d40; }
.btn-sec { border-color: var(--cartao-borda); background: #ffffff08; }
.btn-gm { background: var(--gm); color: #fff; }
.btn-link { color: var(--mudo); padding-inline: 8px; }
.btn-link:hover { color: var(--texto); }
.btn-grande { padding: 13px 24px; font-size: 1.05rem; }
.perigo { color: var(--ruim); }
.perigo-btn { background: var(--ruim); color: #fff; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: 70px 0 60px; border-bottom: 1px solid #ffffff10; }
.ceu {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, #070a18 0%, #151a45 40%, #4b2a63 68%, #b5485a 86%, #ff8a3d 100%);
}
.estrelas {
  position: absolute; inset: 0 0 40% 0; opacity: .7;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 20%, #fff, transparent),
    radial-gradient(1px 1px at 30% 8%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 48% 30%, #fff, transparent),
    radial-gradient(1px 1px at 66% 12%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 80% 26%, #fff, transparent),
    radial-gradient(1px 1px at 92% 6%, #fff, transparent),
    radial-gradient(1px 1px at 22% 40%, #fff, transparent),
    radial-gradient(1px 1px at 74% 44%, #fff, transparent);
  animation: brilho 6s ease-in-out infinite alternate;
}
.sol {
  position: absolute; left: 50%; bottom: -170px; width: 380px; height: 380px; translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe2a0 0%, #ffb35c 35%, #ff6a3d 60%, transparent 72%);
  filter: blur(2px);
  animation: nascer 4s ease-out both;
}
@keyframes nascer { from { bottom: -320px; opacity: .3; } to { bottom: -170px; opacity: 1; } }
@keyframes brilho { from { opacity: .45; } to { opacity: .85; } }
.hero-in { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.sobre { text-transform: uppercase; letter-spacing: .3em; font-size: .8rem; color: var(--aurora-2); margin: 0; }
.hero h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); margin: .1em 0 .1em; text-shadow: 0 4px 30px #000a; }
.hero h1 em { font-style: normal; font-size: .55em; color: var(--aurora-2); vertical-align: middle; }
.lema { font-size: 1.3rem; color: #ffdcb8; margin: 0 0 28px; }
.hero-acoes { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- status ao vivo ---------- */
.status {
  background: rgba(14, 18, 42, .78); border: 1px solid #ffffff1c; border-radius: 18px;
  padding: 22px 24px; box-shadow: var(--sombra); backdrop-filter: blur(6px);
}
.status-linha { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.pulso { width: 11px; height: 11px; border-radius: 50%; background: var(--mudo); }
.pulso.on { background: var(--ok); box-shadow: 0 0 0 0 #3ddc9780; animation: pulsar 2s infinite; }
.pulso.off { background: var(--ruim); }
@keyframes pulsar { 70% { box-shadow: 0 0 0 10px #3ddc9700; } 100% { box-shadow: 0 0 0 0 #3ddc9700; } }
.status-num { margin: 10px 0 14px; }
.status-num strong { display: block; font: 800 3.4rem/1 Cinzel, serif; color: #fff; }
.status-num span { color: var(--mudo); }
.reinos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.reino { border-radius: 10px; padding: 8px 10px; background: #ffffff08; border-left: 3px solid; }
.reino span { display: block; font-size: .8rem; color: var(--mudo); }
.reino b { font-size: 1.2rem; }
.reino.shinsoo { border-color: var(--shinsoo); }
.reino.chunjo { border-color: var(--chunjo); }
.reino.jinno { border-color: var(--jinno); }

/* ---------- cartões, grades ---------- */
.cartao {
  background: var(--cartao); border: 1px solid var(--cartao-borda); border-radius: var(--raio);
  padding: 20px 22px; margin-bottom: 18px; box-shadow: var(--sombra);
}
.cartao > h2:first-child, .cartao > h1:first-child { margin-top: 0; }
.estreito { max-width: 480px; margin-inline: auto; }
.leitura { max-width: 780px; margin-inline: auto; }
.vazio { color: var(--mudo); text-align: center; }
.grade-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
.grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.titulo-acao { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.link-mais { display: inline-block; margin-top: 10px; font-weight: 600; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat { background: var(--cartao); border: 1px solid var(--cartao-borda); border-radius: 12px; padding: 12px 16px; }
.stat span { display: block; font-size: .8rem; color: var(--mudo); text-transform: uppercase; letter-spacing: .06em; }
.stat b { font-size: 1.15rem; }

.noticia h3 { margin-top: 0; font-size: 1.25rem; }
.noticia h3 a { color: var(--texto); }
.md p { margin: .5em 0; }
.md img { max-width: 100%; }

.rank-linha { display: grid; grid-template-columns: 28px 1fr auto auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid #ffffff0d; }
.rank-pos { font: 800 1rem Cinzel, serif; color: var(--aurora-2); }
.rank-nome { font-weight: 600; }
.rank-nivel { font-weight: 700; }

/* ---------- tabelas ---------- */
.tabela-wrap { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mudo); font-weight: 600; }
.tabela th, .tabela td { padding: 10px 10px; border-bottom: 1px solid #ffffff0f; }
.tabela tbody tr:hover { background: #ffffff05; }
.compacta td { padding: 6px 8px; font-size: .9rem; }

.tag { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: #ffffff14; }
.tag.shinsoo { background: #e0484f33; color: #ff8d92; }
.tag.chunjo { background: #e6b74033; color: #ffd775; }
.tag.jinno { background: #4a8fe733; color: #8dbcff; }
.st-ok { background: #3ddc9726; color: var(--ok); }
.st-erro, .st-BLOCK { background: #ff5d6c26; color: var(--ruim); }
.st-pendente { background: #ffc46b26; color: var(--aurora-2); }

/* ---------- formulários ---------- */
.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: .92rem; }
.form small { font-weight: 400; color: var(--mudo); }
.form input, .form textarea, .busca input {
  font: 1rem Inter, sans-serif; color: var(--texto);
  background: #0b1029; border: 1px solid var(--cartao-borda); border-radius: 10px; padding: 11px 13px;
  width: 100%;
}
.form textarea { resize: vertical; font-family: ui-monospace, monospace; font-size: .92rem; }
.form input:focus, .form textarea:focus, .busca input:focus { outline: 2px solid var(--aurora); outline-offset: 1px; border-color: transparent; }
.check { display: flex !important; grid-template-columns: none; align-items: center; gap: 10px; font-weight: 500 !important; }
.check input { width: auto; }
.acoes { display: flex; gap: 10px; }
.busca { display: flex; gap: 10px; margin-bottom: 18px; }

.aviso { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-weight: 500; }
.aviso-ok { background: #3ddc971f; border: 1px solid #3ddc9755; }
.aviso-erro { background: #ff5d6c1f; border: 1px solid #ff5d6c55; }
.aviso-info { background: #4a8fe71f; border: 1px solid #4a8fe755; }

/* ---------- GM ---------- */
.gm-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 8px; margin-bottom: 8px; border-radius: 12px; background: #8b6cff1a; border: 1px solid #8b6cff40; }
.gm-nav a { color: var(--mudo); padding: 6px 12px; border-radius: 8px; font-weight: 600; }
.gm-nav a.ativo, .gm-nav a:hover { background: #8b6cff33; color: #fff; text-decoration: none; }
.gm-selo { background: var(--gm); color: #fff; font-size: .75rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; margin-right: 8px; letter-spacing: .05em; }

/* ---------- rodapé ---------- */
.rodape { border-top: 1px solid #ffffff10; padding: 24px 0; font-size: .9rem; background: #070a18; }
.rodape p { margin: .2em 0; }

/* ---------- celular ---------- */
@media (max-width: 860px) {
  .hero-in, .grade-2, .grade-3 { grid-template-columns: 1fr; }
  .topo-in { flex-wrap: wrap; height: auto; padding: 10px 0; gap: 10px; }
  .menu { order: 3; width: 100%; }
  .hero { padding: 40px 0; }
  .status-num strong { font-size: 2.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- wiki ---------- */
.wiki-topo .busca { max-width: 720px; }
.icone { width: 32px; height: auto; image-rendering: pixelated; vertical-align: middle; flex-shrink: 0; }
.icone.mini { width: 24px; }
.icone.grande { width: 48px; }
.icone-vazio { display: inline-block; height: 32px; border-radius: 6px; background: #ffffff10; }
.icone-vazio.mini, .icone-mob.mini { height: 24px; }
.icone-mob { display: inline-block; width: 24px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--rosa), #5a1f35); }
.item-link { display: inline-flex; align-items: center; gap: 8px; color: var(--texto); }
.item-link:hover span { color: var(--aurora-2); }
.lista-grade { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 18px; }
.lista-grade li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid #ffffff0a; }
.lista-simples { margin: 0; padding-left: 18px; }
.lista-simples li { margin: 4px 0; }
.cat-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.cat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 12px; background: var(--cartao); border: 1px solid var(--cartao-borda); color: var(--texto); transition: border-color .15s, transform .1s; }
.cat:hover { border-color: var(--aurora); text-decoration: none; transform: translateY(-1px); }
.col-icone { width: 44px; }
.item-cabeca, .mob-cabeca { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.item-cabeca h1, .mob-cabeca h1 { margin: 0; }
.refino-item { display: flex; align-items: center; gap: 10px; }
.refino tr.atual { background: #ff8a3d14; }
.mats { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 4px; }
.mat b { color: var(--aurora-2); }
.yang { color: #ffd775; }
.mob-cabeca { align-items: flex-start; }
.mob-cabeca .stats { margin: 10px 0 0; }
.mob-foto img, .mob-sem-foto { width: 200px; height: 200px; border-radius: 16px; object-fit: cover; border: 1px solid var(--cartao-borda); background: #0b1029; }
.mob-sem-foto { display: grid; place-items: center; color: var(--mudo); font-size: .85rem; background: radial-gradient(circle at 50% 40%, #2a2f5c, #0b1029); }
.gm-caixa { border-color: #8b6cff60; }
.form-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
@media (max-width: 860px) { .mob-cabeca { flex-direction: column; } }

/* ---------- marca DOM2 (artes em D:\mt2\marca) ---------- */
.emblema { display: block; width: min(440px, 100%); height: auto; margin: -20px 0 4px -18px; filter: drop-shadow(0 10px 40px #ff6a3d55); }
.marca img { filter: drop-shadow(0 2px 8px #ff6a3d66); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero .lema { margin-top: 0; }
@media (max-width: 860px) { .emblema { margin: 0 auto 4px; } .hero-texto { text-align: center; } .hero-acoes { justify-content: center; } }

/* =============================================================================
   PÁGINA DE DOWNLOAD (views/download.njk) — DOM2, 13/10/2026
   Mesmas cores/fontes do site (variáveis em :root). Classes com prefixo dl-.
   ============================================================================= */
.dl-hero { padding: 64px 0 56px; }
.dl-hero-in { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.dl-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
.dl-hero .lema { font-size: 1.15rem; max-width: 34ch; }

/* botão principal: grande, com ícone e brilho suave ao passar o mouse */
.dl-acao { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.dl-botao { display: inline-flex; align-items: center; gap: 10px; font-size: 1.15rem; padding: 16px 30px;
  box-shadow: 0 10px 30px #ff6a3d55; transition: box-shadow .2s, transform .1s, filter .2s; }
.dl-botao:hover { box-shadow: 0 14px 40px #ff6a3d88; }
.dl-icone { flex: none; }
.dl-detalhes { list-style: none; margin: 0; padding: 0; color: #ffe2c4; font-size: .9rem; }
.dl-detalhes li { line-height: 1.5; }
.dl-detalhes li + li { color: var(--mudo); }
.dl-conta { margin: 18px 0 0; color: #ffdcb8; }
.dl-aviso-so { margin: 16px 0 0; padding: 10px 14px; border-radius: 10px; max-width: 46ch;
  background: #e8577a22; border: 1px solid #e8577a66; }

/* foco visível em tudo que é clicável (teclado) */
.dl-botao:focus-visible, .dl-copiar:focus-visible, .dl-faq summary:focus-visible {
  outline: 3px solid var(--aurora-2); outline-offset: 3px; }

/* passos 1-2-3 */
.dl-secao { margin-top: 8px; }
.dl-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: none; }
.dl-passo { position: relative; background: var(--cartao); border: 1px solid var(--cartao-borda); border-radius: var(--raio);
  padding: 22px 22px 18px 22px; box-shadow: var(--sombra); }
.dl-passo h3 { margin: 6px 0 6px; font-size: 1.05rem; }
.dl-passo p { margin: 0; color: var(--mudo); font-size: .95rem; }
.dl-num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  font: 800 1.15rem/1 Cinzel, serif; color: #fff; background: linear-gradient(135deg, var(--aurora), var(--rosa));
  box-shadow: 0 6px 18px #ff6a3d55; }

/* requisitos + segurança */
.dl-grade { margin-top: 26px; align-items: start; grid-template-columns: 1.15fr 1fr; }
.dl-req th[scope="row"] { color: var(--mudo); font-weight: 600; white-space: nowrap; }
.dl-lista-ok { list-style: none; margin: 0 0 12px; padding: 0; }
.dl-lista-ok li { position: relative; padding-left: 26px; margin: 8px 0; }
.dl-lista-ok li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--ok); font-weight: 800; }
.dl-hash { display: flex; gap: 8px; align-items: stretch; }
.dl-hash code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: .78rem; padding: 8px 10px;
  background: #0b1029; border: 1px solid var(--cartao-borda); border-radius: 8px; }
.dl-copiar { flex: none; }
.dl-copiar.ok { border-color: var(--ok); color: var(--ok); }

/* perguntas frequentes: <details> nativo (funciona sem JavaScript) */
.dl-faq { display: grid; gap: 10px; }
.dl-faq details { background: var(--cartao); border: 1px solid var(--cartao-borda); border-radius: 12px; padding: 0 18px; }
.dl-faq details[open] { border-color: #ff8a3d66; }
.dl-faq summary { cursor: pointer; list-style: none; padding: 14px 28px 14px 0; font-weight: 600; position: relative; }
.dl-faq summary::-webkit-details-marker { display: none; }
.dl-faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; translate: 0 -50%;
  font-size: 1.3rem; color: var(--aurora-2); transition: rotate .2s; }
.dl-faq details[open] summary::after { rotate: 45deg; }
.dl-faq details p { margin: 0 0 14px; color: var(--mudo); }

/* chamada final */
.dl-final { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
  background: linear-gradient(135deg, #2a1d4d, #4b2a63 55%, #7a3550); border-color: #ff8a3d55; }
.dl-final h2 { margin: 0 0 4px; color: #fff; }
.dl-final p { margin: 0; }
.dl-final-acoes { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .dl-hero-in, .dl-passos, .dl-grade { grid-template-columns: 1fr; }
  .dl-hero-texto { text-align: center; }
  .dl-hero .lema { margin-inline: auto; }
  .dl-acao { justify-content: center; }
  .dl-detalhes { text-align: center; }
  .dl-aviso-so { margin-inline: auto; }
  .dl-final { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .dl-botao, .dl-faq summary::after { transition: none; }
}

/* Itens de grid podem encolher (o padrão "min-width: auto" faz a coluna 1fr
   crescer até o tamanho da tabela/código e a página vazar no celular). */
.dl-hero-in > *, .dl-passos > *, .dl-grade > *, .hero-in > *, .grade-2 > *, .grade-3 > * { min-width: 0; }
@media (max-width: 480px) {
  .dl-hash { flex-direction: column; }
  .dl-req th, .dl-req td { padding: 8px 6px; font-size: .88rem; }
  .dl-req th[scope="row"] { white-space: normal; }
  .dl-botao { width: 100%; justify-content: center; }
}