/* O portão: entrar e criar treinador.
   ---------------------------------------------------------------------------
   A abertura de um jogo de Pokémon do DS: New Haven em escala inteira ao fundo,
   o nome numa placa de madeira e o formulário na caixa de mensagem branca de
   borda dourada. As cores da caixa são as da `caixa-branco.png` do acervo,
   medidas pixel a pixel; placa e botões são os PNGs da engine via
   `border-image`, então o portão fala a mesma língua do mapa. As URLs das
   imagens vêm em variáveis do `portao.ts`, que sabe o prefixo do acervo. */

.tela-portao, .tela-portao *, .tela-portao *::before, .tela-portao *::after {
    box-sizing: border-box;
}

.tela-portao {
    --dp-tinta:   #4d4545;   /* contorno da caixa */
    --dp-ouro:    #ffdf6d;
    --dp-laranja: #efa63c;
    --dp-faixa:   #65656d;
    --dp-texto:   #484850;
    --dp-sombra:  #d0d0c8;   /* a sombra de 1 pixel do texto do DS */
    --dp-fraco:   #6a6a72;
    --dp-erro:    #b8281f;
    --madeira:    #4a2c12;
    --px: 2px;               /* um pixel da arte, na escala da tela */
}

body.tela-portao {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px 16px 0;
    background: #7cb35a;
    color: var(--dp-texto);
}

/* ------------------------------------------------------------- o cenário */

/* New Haven (1600×1600) no dobro, parada: escala inteira, senão o pixel art
   borra. O centro da tela cai na praça entre as casas. */
.cenario {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: var(--mapa) no-repeat;
    background-size: 3200px 3200px;
    background-position: calc(50vw - 1620px) calc(50vh - 1440px);
    image-rendering: pixelated;
}

.passeio { position: absolute; inset: 0; }

/* Cada bicho é um quadro do charset 4×4 de 32px do acervo: a linha 2 anda para
   a direita. Uma animação atravessa a tela, a outra troca o pé. */
.passeio i {
    position: absolute;
    left: -80px;
    top: var(--topo);
    width: 64px;
    height: 64px;
    background-image: var(--folha);
    background-repeat: no-repeat;
    background-size: 256px 256px;
    background-position: 0 -128px;
    image-rendering: pixelated;
    animation:
        portao-atravessa var(--tempo) linear var(--atraso) infinite,
        portao-passada .55s steps(1) infinite;
}

@keyframes portao-atravessa {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(100vw + 160px)); }
}

@keyframes portao-passada {
    0%   { background-position:    0   -128px; }
    25%  { background-position: -64px  -128px; }
    50%  { background-position: -128px -128px; }
    75%  { background-position: -192px -128px; }
}

/* ------------------------------------------------------------- a placa */

.placa {
    position: relative;
    z-index: 1;
    padding: 10px 44px 14px;
    border: 24px solid transparent;
    border-image: var(--placa) 8 fill / 24px round;
    image-rendering: pixelated;
    filter: drop-shadow(0 6px 0 #00000038);
}

/* ------------------------------------------------- a caixa de mensagem */

.portao {
    position: relative;
    z-index: 1;
    width: min(820px, 100%);
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 26px 30px 24px;
    background: #fff;
    border: calc(var(--px) * 2) solid var(--dp-tinta);
    border-radius: calc(var(--px) * 3);
    /* De fora para dentro, como no PNG: ouro, a linha laranja de baixo e a
       faixa cinza. A sombra dura embaixo é a do DS, não um blur de site. */
    box-shadow:
        inset 0 0 0 var(--px) var(--dp-ouro),
        inset 0 calc(var(--px) * -2) 0 0 var(--dp-laranja),
        inset 0 0 0 calc(var(--px) * 6) var(--dp-faixa),
        0 calc(var(--px) * 3) 0 #00000040;
}

.portao:has(.mesa) { width: min(1160px, 100%); }

/* `.tela-portao` na frente para vencer o Nunito que o `ui.css` põe em todo input do portão. */
.portao,
.tela-portao .portao input,
.tela-portao .portao button,
.portao .botao-dp {
    font-family: 'Pokemon DP', 'Nunito', sans-serif;
    font-weight: 600;
}

/* O DP é pixel art de 16px: só múltiplos dele ficam nítidos. */
.fala {
    margin: 0;
    font-size: 32px;
    line-height: 1.1;
    color: var(--dp-texto);
    text-shadow: var(--px) var(--px) 0 var(--dp-sombra);
}

/* A setinha que pisca no fim da fala. A fonte não tem ▼, então é borda. */
.fala::after {
    content: '';
    display: inline-block;
    margin-left: 10px;
    border: 7px solid transparent;
    border-top: 9px solid #e0503c;
    border-bottom: 0;
    vertical-align: middle;
    animation: portao-pisca 1s steps(1) infinite;
}

@keyframes portao-pisca { 50% { opacity: 0; } }

/* ------------------------------------------------------------ os campos */

.form-portao {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 16px;
}

.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.campo-portao { display: flex; flex-direction: column; gap: 4px; }

.campo-portao span {
    font-size: 16px;
    color: var(--dp-fraco);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* `.portao` na frente para vencer o `lib.css`, que pinta de vermelho todo input focado. */
.portao .campo-portao input {
    width: 100%;
    height: 52px;
    padding: 0 12px;
    background: #f4f4ee;
    border: var(--px) solid var(--dp-tinta);
    border-radius: var(--px);
    box-shadow: inset var(--px) var(--px) 0 var(--dp-sombra);
    color: #202028;
    font-size: 32px;
}

.portao .campo-portao input:focus,
.portao .campo-portao input:focus-visible {
    background: #fff;
    border-color: var(--dp-laranja);
    box-shadow: 0 0 0 3px var(--dp-ouro), inset var(--px) var(--px) 0 var(--dp-sombra);
    outline: none;
}

/* ------------------------------------------------------------- os botões */

/* O corpo é a caixa colorida do acervo: a faixa escura da direita guarda o ▶. */
.portao .botao-dp {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 30px 0 8px;
    border: solid transparent;
    border-width: 12px 44px 12px 12px;
    border-image: var(--botao-azul) 6 22 6 6 fill / 12px 44px 12px 12px stretch;
    image-rendering: pixelated;
    background: none;
    color: #fff;
    font-size: 32px;
    line-height: 1;
    text-decoration: none;
    text-shadow: var(--px) var(--px) 0 #00000059;
    white-space: nowrap;
    cursor: pointer;
}

.portao .botao-dp::after {
    content: '▶';
    position: absolute;
    right: -32px;
    font-size: 16px;
}

.portao .botao-dp-verde { border-image-source: var(--botao-verde); }
.portao .botao-dp-cinza { border-image-source: var(--botao-cinza); }

.portao .botao-dp:hover { filter: brightness(1.08); }
.portao .botao-dp:active { transform: translateY(var(--px)); }
.portao .botao-dp:focus-visible { outline: 3px solid #1e1e24; outline-offset: 3px; }

/* --------------------------------------------------- o caminho alternativo */

.portao .atalho-portao {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin: 0;
    padding-top: 14px;
    border-top: var(--px) dashed #c8c8c0;
    font-size: 16px;
    color: var(--dp-fraco);
}

.portao .atalho-portao .botao-dp { height: 44px; font-size: 16px; border-width: 10px 40px 10px 10px;
                                   border-image-width: 10px 40px 10px 10px; padding-right: 26px; }

.erro-portao {
    margin: 0;
    padding: 8px 12px;
    border: var(--px) solid var(--dp-erro);
    background: #fff0ec;
    color: var(--dp-erro);
    font-family: 'Pokemon DP', 'Nunito', sans-serif;
    font-weight: 600;
    font-size: 16px;
}

/* ======================================================== o cadastro */

.mesa {
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: 24px;
    align-items: start;
}

.coluna-form { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* O cartão de treinador que se preenche enquanto o jogador digita: azul do
   `caixa-azul.png`, com as listras diagonais do cartão do DS. */
.cartao-treinador {
    padding: 10px 12px 12px;
    background: repeating-linear-gradient(135deg, #5f7bbd 0 8px, #5873b6 8px 16px);
    border: var(--px) solid #33406e;
    border-radius: 8px;
    box-shadow: inset 0 0 0 var(--px) #93a8dc, 0 var(--px) 0 #00000030;
    color: #fff;
}

.cartao-titulo {
    margin: 0 0 8px;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-shadow: var(--px) var(--px) 0 #33406e;
}

.cartao-treinador dl {
    display: grid;
    grid-template-columns: auto 1fr;
    margin: 0 0 10px;
    background: #f8f8f0;
    border: var(--px) solid #33406e;
    border-radius: 4px;
}

.cartao-treinador dt, .cartao-treinador dd {
    margin: 0;
    padding: 4px 8px;
    border-bottom: var(--px) solid #d6dcea;
    font-size: 16px;
}

.cartao-treinador dt { color: #5a6aa8; text-transform: uppercase; }
.cartao-treinador dd { color: #202028; text-align: right; overflow-wrap: anywhere; }
.cartao-treinador dt:nth-last-of-type(1), .cartao-treinador dd:last-of-type { border-bottom: 0; }

.cartao-retrato {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 4px 0 6px;
    background: #f8f8f0;
    border: var(--px) solid #33406e;
    border-radius: 4px;
}

.cartao-retrato img { width: 192px; height: 192px; margin: -24px 0 -28px; image-rendering: pixelated; }
.cartao-retrato figcaption { font-size: 16px; color: #202028; }

/* ------------------------------------------------ as mesas dos iniciais */

.iniciais {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.iniciais legend {
    padding: 0 0 6px;
    font-size: 16px;
    color: var(--dp-fraco);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Cada região é a mesa do laboratório com as três pokébolas de lá. */
.mesa-regiao {
    display: grid;
    grid-template-columns: repeat(3, 78px);
    gap: 2px;
    padding: 4px 4px 6px;
    background: #efe0b8;
    border: var(--px) solid #b08850;
    border-radius: 4px;
    box-shadow: inset 0 calc(var(--px) * -2) 0 #dcc795;
}

.nome-regiao { grid-column: 1 / -1; font-size: 16px; color: #6a4a2a; }

.inicial {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 2px;
    border: var(--px) solid transparent;
    border-radius: 4px;
    cursor: pointer;
}

.inicial input { position: absolute; opacity: 0; pointer-events: none; }

/* O sprite de frente é 96×96 com o bicho no meio: mostra só o miolo em 1×. */
.inicial img { width: 64px; height: 56px; object-fit: none; image-rendering: pixelated; }

.inicial span {
    max-width: 100%;
    font-size: 16px;
    line-height: 1;
    color: var(--dp-texto);
    white-space: nowrap;
    overflow: hidden;
}

.inicial:hover { background: #fff8e0; }

/* O escolhido: moldura de cursor e o pulinho do menu de equipe do DS. */
.inicial:has(input:checked) { background: #fff; border-color: #e0503c; }
.inicial:has(input:checked) img { animation: portao-pulo .5s steps(1) infinite; }
.inicial:has(input:focus-visible) { outline: 3px solid #1e1e24; outline-offset: 1px; }

@keyframes portao-pulo { 50% { transform: translateY(calc(var(--px) * -2)); } }

.coluna-form .botao-dp { align-self: flex-end; }

/* ----------------------------------------------------------- o rodapé */

.rodape-portao {
    position: relative;
    z-index: 1;
    width: 100vw;
    margin: 0 -16px;
    padding: 8px 16px;
    background: #1b1c1ed9;
    color: #d8dce0;
    text-align: center;
    font-size: 12px;
}

.rodape-portao p { margin: 0; }
.rodape-portao .numeros b { color: #fff; }
.rodape-portao .aviso { margin-top: 2px; font-size: 11px; color: #a9b0b8; }

/* Entre o celular e a tela cheia, duas mesas por linha cabem sem espremer os nomes. */
@media (max-width: 1180px) {
    .iniciais { grid-template-columns: repeat(2, auto); justify-content: start; }
}

/* Sem largura para o cartão ao lado, ele deita em cima do formulário:
   retrato à direita, dados à esquerda. */
@media (max-width: 1000px) {
    .mesa { grid-template-columns: 1fr; }
    .cartao-treinador { display: grid; grid-template-columns: 1fr 112px; gap: 0 10px; }
    .cartao-titulo { grid-column: 1 / -1; }
    .cartao-treinador dl { margin: 0; }
    .cartao-retrato { justify-content: center; }
    .cartao-retrato img { width: 96px; height: 96px; margin: -12px 0 -14px; }
}

/* Quem pediu menos movimento não recebe desfile nem piscada. */
@media (prefers-reduced-motion: reduce) {
    .passeio { display: none; }
    .fala::after, .inicial:has(input:checked) img { animation: none; }
}

/* ============================================================ o celular */

@media (max-width: 760px) {
    body.tela-portao { gap: 12px; padding-top: 16px; }

    .placa { padding: 4px 22px 8px; border-width: 16px; border-image-width: 16px; }

    .portao { padding: 18px 16px 16px; --px: 1.5px; }

    .fala { font-size: 24px; }

    .form-portao, .campos { grid-template-columns: 1fr; }

    .portao .botao-dp { width: 100%; }

    .portao .atalho-portao { justify-content: space-between; }
    .portao .atalho-portao .botao-dp { width: auto; }

    /* Uma mesa por linha, nome da região de lado. */
    .iniciais { grid-template-columns: 1fr; }
    .mesa-regiao { grid-template-columns: 56px repeat(3, 1fr); align-items: center; }
    .nome-regiao { grid-column: auto; }

    /* Sem `sticky`: grudado no pé da tela ele cobria as fileiras de iniciais e o
       toque num pokémon caía no envio do formulário. */
    .coluna-form .botao-dp { align-self: stretch; }
}

/* Convite do Discord na tela de entrada: pílula na cor da marca, acima do rodapé. */
.discord-portao {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 14px auto 10px;
    padding: 10px 20px;
    border-radius: 999px;
    background: #5865f2;
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 4px 16px #5865f288;
    transition: transform .12s ease, background .12s ease;
}

.discord-portao:hover { background: #6d78f5; transform: translateY(-2px); }
.discord-portao:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.discord-portao .icone { flex: none; }