/* ================================================================================================
   DRO - site publico do Digimon Reboot Online (mesma base visual do digitalevolution.online)
   CSS unico, sem framework e sem CDN: a CSP do site so aceita conteudo da propria origem.
   Nao existe style inline em lugar nenhum - se precisar variar, e classe.

   DIRECAO: minimalista. Sem imagem, sem gradiente chamativo, sem sombra colorida, sem animacao
   de entrada. O que sustenta o visual e espacamento consistente, uma escala tipografica curta e
   uma unica cor de destaque usada com parcimonia. Regra de ouro: se um elemento nao comunica
   nada, ele sai.
   ================================================================================================ */

/* ---------------------------------------------------------------------------- tokens */
:root {
    --fundo:      #0b0d12;
    --superficie: #12151d;
    --superficie-2: #171b25;
    --borda:      #232936;
    --borda-forte:#323a4d;

    --texto:       #e9ecf2;
    --texto-medio: #9aa3b5;
    --texto-fraco: #6c7689;

    --destaque:    #f0a828;
    --ok:          #4cb782;
    --erro:        #e5484d;

    --raio: 8px;

    --fonte: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
             Inter, Roboto, "Helvetica Neue", Arial, sans-serif;

    --largura: 980px;
    --transicao: 140ms ease;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: var(--fonte);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a { color: var(--texto); text-decoration: none; }
a:hover { color: var(--destaque); }

img { max-width: 100%; display: block; }

:focus-visible {
    outline: 2px solid var(--destaque);
    outline-offset: 2px;
    border-radius: 3px;
}

.container {
    width: 100%;
    max-width: var(--largura);
    margin-inline: auto;
    padding-inline: 24px;
}

/* ---------------------------------------------------------------------------- tipografia */
h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 600; letter-spacing: -.015em; }

h1 { font-size: clamp(1.75rem, 4vw, 2.375rem); }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }

p { margin: 0; }

.subtitulo { color: var(--texto-medio); margin-top: 8px; }
.fraco     { color: var(--texto-fraco); font-size: .875rem; }

/* ---------------------------------------------------------------------------- topo */
.topo {
    border-bottom: 1px solid var(--borda);
    background: var(--fundo);
}

.topo-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 62px;
    flex-wrap: wrap;
    padding-block: 10px;
}

.marca {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}
.marca:hover { color: var(--texto); }
.marca-destaque { color: var(--destaque); }

.menu { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.menu-link {
    padding: 7px 12px;
    border-radius: var(--raio);
    color: var(--texto-medio);
    font-size: .9375rem;
    transition: color var(--transicao);
}
.menu-link:hover { color: var(--texto); }

.form-inline { display: inline; margin: 0; }

.link-botao {
    background: none;
    border: none;
    font: inherit;
    font-size: .9375rem;
    cursor: pointer;
    padding: 7px 12px;
    color: var(--texto-medio);
    transition: color var(--transicao);
}
.link-botao:hover { color: var(--texto); }

/* ---------------------------------------------------------------------------- botoes */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--raio);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.btn:hover { text-decoration: none; }

.btn-primario { background: var(--destaque); color: #161104; }
.btn-primario:hover { background: #ffb93c; color: #161104; }

.btn-secundario { background: transparent; color: var(--texto); border-color: var(--borda-forte); }
.btn-secundario:hover { border-color: var(--texto-fraco); color: var(--texto); }

.btn-grande { padding: 12px 24px; }
.btn-largo  { width: 100%; }

/* ---------------------------------------------------------------------------- hero */
/* O topo acompanha a ALTURA da tela, nao so a largura. Com respiro de valor fixo ele parava de
   crescer em monitor grande (2K+) e a pagina ficava com um vazio enorme antes do rodape, dando a
   impressao de que a secao seguinte era a principal. */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-bottom: 1px solid var(--borda);
    display: flex;
    align-items: center;
    min-height: clamp(340px, 52vh, 680px);
}

/* Arte do topo (Omegamon da tela de carregamento do jogo). A arte ja e escura - fundo preto, o
   Digimon a direita -, entao o texto da esquerda le bem sem apagar a arte: opacidade quase cheia. */
.hero-arte {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url("../img/hero.jpg");
    background-size: cover;
    background-position: right center;
    opacity: .92;
}

/* Veu so na esquerda (onde fica o texto) e nas bordas de cima/baixo, para a arte encostar no topo
   e na secao seguinte sem emenda. A direita, onde esta o Digimon, fica limpa. */
.hero-veu {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(11, 13, 18, .70) 0%, rgba(11, 13, 18, .30) 45%, transparent 70%),
        linear-gradient(180deg, rgba(11, 13, 18, .35) 0%, transparent 30%, transparent 70%, rgba(11, 13, 18, .70) 100%);
}

.hero-conteudo { width: 100%; padding-block: clamp(48px, 7vw, 80px); }

.hero h1 { font-size: clamp(2.375rem, 6.5vw, 3.5rem); font-weight: 600; }
.hero p  { color: var(--texto-medio); margin-top: 14px; font-size: 1.0625rem; }

.hero-acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 34px; }

/* ---------------------------------------------------------------------------- status */
.status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .8125rem;
    color: var(--texto-medio);
    margin-bottom: 20px;
}

.bolinha { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.bolinha-on  { background: var(--ok); }
.bolinha-off { background: var(--erro); }

/* ---------------------------------------------------------------------------- secoes */
.secao { padding-block: clamp(28px, 4vw, 40px); }
.secao + .secao { border-top: 1px solid var(--borda); }

.secao-topo { margin-bottom: 16px; }

.conteudo { flex: 1; }
.conteudo-interno { padding-block: clamp(40px, 6vw, 64px); }

/* ---------------------------------------------------------------------------- listas e cartoes */
/* Flex, nao grid: com grid, 3 cartoes em 2 colunas (tela media) deixavam uma celula VAZIA pintada
   com a cor da borda. No flex a ultima linha estica e ocupa a largura toda. */
.grade {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--borda);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    overflow: hidden;
}

/* Cartoes sem sombra e sem borda propria: a separacao vem do vao de 1px da grade. */
.cartao {
    background: var(--fundo);
    padding: 18px 20px;
}
.grade > .cartao { flex: 1 1 220px; }

.cartao h3 { margin-bottom: 6px; }
.cartao p  { color: var(--texto-medio); font-size: .9063rem; }

.cartao-numero {
    font-size: .75rem;
    font-weight: 600;
    color: var(--destaque);
    margin-bottom: 9px;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------- formularios */
.caixa-form {
    max-width: 400px;
    margin-inline: auto;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 28px;
}

.campo { margin-bottom: 16px; }

.campo label {
    display: block;
    font-size: .875rem;
    color: var(--texto-medio);
    margin-bottom: 6px;
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"] {
    width: 100%;
    padding: 11px 12px;
    background: var(--fundo);
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio);
    color: var(--texto);
    font-size: .9375rem;
    font-family: inherit;
    transition: border-color var(--transicao);
}
.campo input:focus { outline: none; border-color: var(--destaque); }

.campo-check label {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .9375rem;
    cursor: pointer;
    margin-bottom: 0;
}
.campo-check input { accent-color: var(--destaque); width: 15px; height: 15px; }

.dica { font-size: .8125rem; color: var(--texto-fraco); margin-top: 6px; }

/* Campo isca: humano nao ve, robo de cadastro preenche e a gente descarta. */
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.rodape-form {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--borda);
    text-align: center;
    font-size: .875rem;
    color: var(--texto-fraco);
}
.rodape-form a { color: var(--destaque); }

/* ---------------------------------------------------------------------------- avisos */
.aviso {
    border-radius: var(--raio);
    padding: 12px 14px;
    margin-bottom: 18px;
    font-size: .9063rem;
    border: 1px solid var(--borda-forte);
    background: var(--superficie-2);
    line-height: 1.5;
}
.aviso:empty { display: none; }
.aviso ul { margin: 5px 0 0; padding-left: 18px; }
.aviso-erro { border-left: 2px solid var(--erro); }
.aviso-ok   { border-left: 2px solid var(--ok); }
.aviso-info { border-left: 2px solid var(--texto-fraco); }

/* ---------------------------------------------------------------------------- tabelas */
.tabela-rolagem {
    overflow-x: auto;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}

table { width: 100%; border-collapse: collapse; font-size: .9063rem; }

thead th {
    color: var(--texto-fraco);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid var(--borda);
}

tbody td, tbody th {
    padding: 12px 14px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--borda);
    font-weight: 400;
}
tbody tr:last-child td, tbody tr:last-child th { border-bottom: none; }

.marca-ok   { color: var(--ok); }
.marca-erro { color: var(--erro); }

/* ---------------------------------------------------------------------------- painel */
.painel-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.abas {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--borda);
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.abas a {
    padding: 10px 14px;
    color: var(--texto-fraco);
    border-bottom: 1px solid transparent;
    font-size: .9375rem;
    margin-bottom: -1px;
    transition: color var(--transicao);
}
.abas a:hover  { color: var(--texto); }
.abas a.ativa  { color: var(--texto); border-bottom-color: var(--destaque); }

.info-lista { list-style: none; padding: 0; margin: 0; }
.info-lista li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--borda);
    font-size: .9375rem;
}
.info-lista li:last-child  { border-bottom: none; padding-bottom: 0; }
.info-lista li:first-child { padding-top: 0; }
.info-lista .rotulo { color: var(--texto-fraco); flex: none; }
.info-lista li > span:last-child { text-align: right; }

.etiqueta { font-size: .875rem; color: var(--destaque); }

/* ---------------------------------------------------------------------------- download */
.download-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 20px 22px;
    margin-bottom: 10px;
}
.download-item.principal { border-color: var(--borda-forte); }
.download-info h3 { margin-bottom: 3px; }
.download-info p  { color: var(--texto-medio); font-size: .9063rem; }

.passos { counter-reset: passo; list-style: none; padding: 0; margin: 0; }
.passos li {
    counter-increment: passo;
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 4px 12px;
    padding-block: 14px;
    border-bottom: 1px solid var(--borda);
}
.passos li:last-child { border-bottom: none; }
.passos li::before {
    content: counter(passo);
    color: var(--texto-fraco);
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
    grid-row: 1 / span 2;
    padding-top: 1px;
}
.passos p { color: var(--texto-medio); font-size: .9063rem; }

/* ---------------------------------------------------------------------------- rodape */
.rodape {
    border-top: 1px solid var(--borda);
    padding-block: 22px;
    margin-top: auto;
}
.rodape-linha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.rodape-links { display: flex; gap: 16px; flex-wrap: wrap; }
.rodape-links a { color: var(--texto-fraco); font-size: .875rem; }
.rodape-links a:hover { color: var(--texto); }
.rodape p { color: var(--texto-fraco); font-size: .8125rem; margin: 2px 0; }

/* ---------------------------------------------------------------------------- telas pequenas */
@media (max-width: 700px) {
    .container { padding-inline: 18px; }
    .topo-linha { justify-content: center; gap: 6px; }
    .menu { justify-content: center; }
    .menu-link, .link-botao { padding: 7px 9px; font-size: .875rem; }
    .hero-acoes .btn { width: 100%; }
    .info-lista li { flex-direction: column; gap: 1px; }
    .info-lista li > span:last-child { text-align: left; }
    .rodape-linha { flex-direction: column; text-align: center; }
    .download-item { flex-direction: column; align-items: stretch; }
    .download-item .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* Cabecalho centralizado das paginas de formulario (entrar, criar conta). */
.secao-topo-centro { text-align: center; }

/* ------------------------------------------------------------------------------------------------
   Validacao do ASP.NET.
   O tag helper SEMPRE desenha a caixa de erros e a esconde com style="display:none" embutido no
   HTML. Como a CSP do site proibe estilo embutido (de proposito), aquele esconderijo nao funciona
   e sobrava uma caixa vazia com o marcador de lista - um "ponto" solto acima do formulario.
   Escondemos pela classe que o proprio ASP.NET aplica quando NAO ha erro.
   ------------------------------------------------------------------------------------------------ */
.validation-summary-valid { display: none !important; }
.field-validation-valid   { display: none !important; }

/* Se sobrar alguma lista de erro vazia, ela nao pode virar marcador visivel. */
.aviso ul:empty { display: none; }
.aviso ul li:empty { display: none; }

/* ------------------------------------------------------------------------------------------------
   Tabelas de numero (ranking, tamers): alinhado a direita e com digitos de largura fixa, pra coluna
   ser comparavel de linha pra linha.
   ------------------------------------------------------------------------------------------------ */
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Respiro entre blocos de uma mesma pagina (download: links -> como instalar -> requisitos). */
.secao-espaco { margin-top: 40px; }

/* Cartao fora de .grade: a grade e que desenhava a borda (vao de 1px), entao sozinho ele precisa da propria. */
.cartao-solto {
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    max-width: 560px;
}

/* Discord no menu: contornado na cor da marca deles (blurple), pra ficar reconhecivel a distancia
   sem competir com o "Criar conta", que e a acao principal e por isso e o unico preenchido. */
.menu-discord {
    border: 1px solid #5865f2;
    border-radius: var(--raio);
    color: #99a3ff;
    transition: background var(--transicao), color var(--transicao);
}
.menu-discord:hover { background: #5865f2; color: #fff; }