/* Identidade visual do jogo (poster de 2004 + tela de login in-game):
   fundo damasco verde-petroleo, prata-azulada metalica do logo,
   vermelho profundo das barras da UI, oliva dos campos de texto. */

:root {
    --fundo-escuro: #060a14;
    --painel-borda: #1d2f4a;
    --prata: #aec7d8;
    --prata-escura: #6f8ea3;
    --oliva: #262b1e;
    --oliva-borda: #4a5138;
    --texto: #d5dee6;
    --texto-suave: #8b9bad;
    --erro: #d98080;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: Georgia, 'Times New Roman', serif;
    color: var(--texto);
    /* selo runico + arte de personagem da tela de loading do jogo */
    background: var(--fundo-escuro) url('/img/fundo.jpg') center top / cover fixed no-repeat;
}

.topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .7rem 2rem;
    background: linear-gradient(#0a1120F2, #060a14D9);
    border-bottom: 1px solid var(--painel-borda);
}

.marca { display: flex; align-items: center; text-decoration: none; }

/* wordmark de duas linhas: precisa de mais altura que uma marca linear */
.marca img { height: 56px; display: block; }

.topo nav { display: flex; gap: 1.4rem; align-items: center; }

.topo nav a {
    color: var(--prata);
    text-decoration: none;
    letter-spacing: .08em;
    font-size: .95rem;
}

.topo nav a:hover { color: #fff; }

.topo nav a.destaque { color: #e8c86a; }

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

button.link {
    background: none;
    border: none;
    padding: 0;
    color: var(--prata);
    font: inherit;
    letter-spacing: .08em;
    font-size: .95rem;
    cursor: pointer;
}

main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2.5rem 1rem; }

/* ------------------------------------------------------------ home */
.hero { display: flex; align-items: center; gap: 3rem; max-width: 62rem; flex-wrap: wrap; justify-content: center; }

.hero-texto { text-align: center; max-width: 30rem; }

.hero-logo { width: 100%; max-width: 560px; height: auto; }

.tagline {
    color: var(--texto-suave);
    letter-spacing: .22em;
    font-size: .85rem;
    margin: .6rem 0 2rem;
}

.acoes { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* botao no estilo dos botoes largos da tela de login do jogo:
   placa escura com fio de prata */
.botao {
    display: inline-block;
    background: linear-gradient(#3c4952, #232c33 60%, #191f24);
    color: #dbe4ea;
    border: 1px solid #8ea7bb;
    outline: 1px solid #000d;
    padding: .65rem 1.6rem;
    font: inherit;
    font-size: .95rem;
    letter-spacing: .12em;
    text-decoration: none;
    cursor: pointer;
    text-shadow: 0 1px 2px #000d;
}

.botao:hover { background: linear-gradient(#4c5b66, #2c3841 60%, #20272c); border-color: #c3d6e4; }

/* ------------------------------------------------------------ cartoes
   A JANELA DO JOGO, de verdade: a moldura inteira (barra de titulo com o
   ornamento de prata, laterais e rodape com florões) vem do atlas
   interface_data.pack (if_main1.dds) aplicada como border-image 9-slice,
   entao estica em qualquer tamanho sem deformar os cantos. O corpo e a
   textura oliva com arabesco que o jogo usa dentro das janelas. */
.cartao {
    position: relative;
    width: 100%;
    max-width: 26rem;
    padding: 0;

    /* Slices MEDIDOS pixel a pixel na janela do atlas (nao chutados):
       barra de titulo 27px, rodape 14px, laterais 2px -- a janela do jogo
       nao tem moldura lateral grossa, so um fio. Chutar 8/42 esticava 25px
       de corpo escuro e criava aquela barra morta em baixo.
       'fill' usa o proprio centro da imagem como fundo: preto alpha 243,
       que ja e a transparencia com que o jogo desenha suas janelas. */
    border-style: solid;
    border-width: 27px 2px 14px 2px;
    border-image: url('/img/janela.png') 27 2 14 2 fill stretch;
    box-shadow: 0 12px 34px #000b;
}

.cartao.largo { max-width: 34rem; }

/* o conteudo respira dentro da moldura */
.cartao > * { margin-left: 1.6rem; margin-right: 1.6rem; }

.cartao > h2 + * { margin-top: 1.1rem; }

.cartao > *:last-child { margin-bottom: 1.2rem; }

/* o titulo mora DENTRO da barra de titulo (que e a borda de cima).
   Margem negativa no fluxo, nao position:absolute -- previsivel. */
.cartao h2 {
    margin: -24px 1.1rem 0;
    height: 22px;
    line-height: 22px;
    letter-spacing: .16em;
    font-weight: normal;
    font-size: 1rem;
    color: #e6ecf1;
    text-shadow: 0 1px 3px #000e;
}

/* dentro da janela oliva o texto e claro com sombra, como no jogo */
.cartao { color: #f4f2e6; text-shadow: 0 1px 2px #0009; }

.cartao h3 {
    margin: 1.5rem 1.6rem .5rem;
    letter-spacing: .1em;
    font-weight: normal;
    color: #fffdf2;
    border-bottom: 1px solid #00000038;
    padding-bottom: .3rem;
}

form { display: flex; flex-direction: column; }

label { margin: .8rem 0 .25rem; letter-spacing: .06em; font-size: .95rem; color: #fffdf2; }

/* campos oliva escuros, como os da tela de login in-game */
input {
    background: #2b3023;
    border: 1px solid #10130c;
    box-shadow: inset 0 1px 3px #0009;
    color: #eef0e2;
    padding: .55rem .7rem;
    font: inherit;
    text-shadow: none;
}

input:focus { outline: 1px solid #c9cfae; border-color: #c9cfae; }

.dica { color: #efeadb; opacity: .78; font-size: .8rem; margin-top: .2rem; }

.erro { color: #ffd2d2; font-size: .88rem; margin-top: .3rem; text-shadow: 0 1px 2px #000c; }

form .botao { margin-top: 1.4rem; align-self: flex-start; }

.nota { color: #efeadb; opacity: .85; font-size: .9rem; }

.nota a { color: #fff8de; }

.info { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.2rem; margin: 1.1rem 1.6rem 0; }

.info dt { opacity: .8; }

.info dd { margin: 0; }

.tabela { width: calc(100% - 3.2rem); border-collapse: collapse; }

.tabela th, .tabela td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid #00000030; }

.tabela th { opacity: .8; font-weight: normal; letter-spacing: .08em; }

footer {
    text-align: center;
    padding: 1.1rem;
    color: #5b6b80;
    font-size: .8rem;
    background: #060a14D9;
    border-top: 1px solid #14203a;
}