* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


:root {

    --fundo: #070912;

    --card: #101522;

    --card2: #151b2b;

    --borda: #252d43;

    --texto: #f4f6ff;

    --texto-fraco: #7e879f;

    --azul: #6575ff;

    --azul-claro: #8290ff;

    --vermelho: #ff5d7a;

    --verde: #45d49a;

    --amarelo: #ffc857;

}


body {

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% -10%,
            #22295a 0%,
            #0b0e19 40%,
            #070912 75%
        );

    color: var(--texto);

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

}


button,
input {

    font: inherit;

}


button {

    cursor: pointer;

}


.app {

    width: 100%;

    max-width: 850px;

    min-height: 100vh;

    margin: auto;

    padding:
        25px
        20px
        40px;

}


/* ================================================= */
/* TOPO */
/* ================================================= */

.topo {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 60px;

}


.logo {

    display: flex;

    align-items: center;

    gap: 10px;

}


.logo-icon {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--azul),
            #414dcb
        );

    font-size: 22px;

    font-weight: 900;

}


.logo strong {

    display: block;

    font-size: 15px;

    letter-spacing: 2px;

}


.logo span {

    display: block;

    margin-top: 2px;

    color: var(--texto-fraco);

    font-size: 8px;

    letter-spacing: 3px;

}


.status-online {

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 7px 11px;

    border: 1px solid #253c36;

    border-radius: 20px;

    color: #79e4b8;

    background: #0c1716;

    font-size: 11px;

}


.status-online span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--verde);

    box-shadow:
        0 0 10px var(--verde);

}


/* ================================================= */
/* TELAS */
/* ================================================= */

.tela {

    display: none;

}


.tela.ativa {

    display: block;

}


.escondido {

    display: none !important;

}


/* ================================================= */
/* HERO */
/* ================================================= */

.hero {

    max-width: 600px;

    margin: auto;

    text-align: center;

}


.badge {

    display: inline-block;

    padding: 7px 12px;

    border: 1px solid #343c67;

    border-radius: 20px;

    color: var(--azul-claro);

    background: #11162b;

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 1px;

}


.hero h1 {

    margin-top: 20px;

    font-size: clamp(
        40px,
        7vw,
        68px
    );

    line-height: .95;

    letter-spacing: -3px;

}


.hero h1 span {

    color: var(--azul);

}


.hero p {

    max-width: 430px;

    margin: 20px auto 35px;

    color: var(--texto-fraco);

    font-size: 14px;

    line-height: 1.7;

}


/* ================================================= */
/* CARDS */
/* ================================================= */

.card {

    margin-bottom: 18px;

    padding: 20px;

    background:
        rgba(16, 21, 34, .9);

    border: 1px solid var(--borda);

    border-radius: 18px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.18);

}


.card-titulo {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 18px;

}


.card-titulo > span {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    background: #1c2340;

}


.card h2 {

    font-size: 15px;

}


.card-titulo p {

    margin-top: 3px;

    color: var(--texto-fraco);

    font-size: 10px;

}


/* ================================================= */
/* PERFIL */
/* ================================================= */

.perfil-conteudo {

    display: flex;

    align-items: center;

    gap: 20px;

}


.avatar-area {

    position: relative;

    width: 85px;

    height: 85px;

    flex-shrink: 0;

}


.avatar,
.avatar-placeholder {

    width: 85px;

    height: 85px;

    border-radius: 50%;

}


.avatar {

    display: none;

    object-fit: cover;

    border: 3px solid var(--azul);

}


.avatar-placeholder {

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #293158,
            #171c31
        );

    border: 2px solid #394263;

    font-size: 32px;

}


.avatar-botao {

    position: absolute;

    right: -3px;

    bottom: -2px;

    width: 29px;

    height: 29px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 3px solid var(--card);

    border-radius: 50%;

    background: var(--azul);

    font-size: 11px;

    cursor: pointer;

}


.nome-area {

    flex: 1;

}


.nome-area label {

    display: block;

    margin-bottom: 7px;

    color: var(--texto-fraco);

    font-size: 9px;

    font-weight: bold;

    letter-spacing: 1px;

}


.nome-area input {

    width: 100%;

    padding: 12px;

    outline: none;

    border: 1px solid var(--borda);

    border-radius: 9px;

    background: #090d17;

    color: white;

}


.nome-area input:focus {

    border-color: var(--azul);

}


.botao-secundario {

    margin-top: 7px;

    padding: 7px 11px;

    border: 1px solid var(--borda);

    border-radius: 8px;

    background: #171d2e;

    color: #aeb6d1;

    font-size: 10px;

}


/* ================================================= */
/* AÇÕES */
/* ================================================= */

.acoes {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;

}


.botao-principal,
.botao-outline {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 16px;

    border-radius: 14px;

    text-align: left;

    transition: .2s;

}


.botao-principal {

    border: 1px solid #6876ff;

    background:
        linear-gradient(
            135deg,
            #626fff,
            #4a55d6
        );

    color: white;

}


.botao-outline {

    border: 1px solid var(--borda);

    background: var(--card);

    color: white;

}


.botao-principal:hover,
.botao-outline:hover {

    transform: translateY(-2px);

}


.botao-principal > span,
.botao-outline > span {

    font-size: 20px;

}


.botao-principal strong,
.botao-outline strong {

    display: block;

    font-size: 13px;

}


.botao-principal small,
.botao-outline small {

    display: block;

    margin-top: 3px;

    color: rgba(255,255,255,.65);

    font-size: 9px;

}


/* ================================================= */
/* ENTRAR NA SALA */
/* ================================================= */

.entrar-card {

    margin-top: 15px;

}


.entrar-card h2 {

    margin-bottom: 5px;

}


.entrar-card p {

    color: var(--texto-fraco);

    font-size: 11px;

}


.codigo-input {

    display: flex;

    gap: 8px;

    margin-top: 15px;

}


.codigo-input input {

    flex: 1;

    min-width: 0;

    padding: 12px;

    border: 1px solid var(--borda);

    border-radius: 9px;

    outline: none;

    background: #090d17;

    color: white;

    text-transform: uppercase;

    text-align: center;

    letter-spacing: 3px;

    font-weight: bold;

}


.codigo-input button {

    padding: 0 20px;

    border: none;

    border-radius: 9px;

    background: var(--azul);

    color: white;

    font-weight: bold;

}


.mensagem {

    margin-top: 10px !important;

    color: var(--vermelho) !important;

}


/* ================================================= */
/* ESTATÍSTICAS */
/* ================================================= */

.estatisticas {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;

    margin-top: 25px;

}


.estatisticas div {

    padding: 15px;

    border: 1px solid var(--borda);

    border-radius: 13px;

    background: rgba(16,21,34,.7);

    text-align: center;

}


.estatisticas strong {

    display: block;

    font-size: 22px;

}


.estatisticas span {

    display: block;

    margin-top: 4px;

    color: var(--texto-fraco);

    font-size: 9px;

}


/* ================================================= */
/* SALA */
/* ================================================= */

.sala-topo {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 25px;

}


.voltar {

    padding: 8px 12px;

    border: 1px solid var(--borda);

    border-radius: 9px;

    background: #111624;

    color: #aab2cc;

    font-size: 11px;

}


.codigo-sala {

    text-align: right;

}


.codigo-sala span {

    display: block;

    color: var(--texto-fraco);

    font-size: 8px;

    letter-spacing: 1px;

}


.codigo-sala strong {

    display: block;

    margin: 3px 0;

    color: var(--azul-claro);

    font-size: 20px;

    letter-spacing: 4px;

}


.codigo-sala button {

    border: none;

    background: transparent;

    color: #7883a5;

    font-size: 9px;

}


/* ================================================= */
/* JOGADORES */
/* ================================================= */

.jogadores-online {

    display: grid;

    grid-template-columns:
        1fr 60px 1fr;

    align-items: center;

    gap: 10px;

    margin-bottom: 25px;

}


.player-card {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px;

    border: 1px solid var(--borda);

    border-radius: 14px;

    background: var(--card);

}


.player-card.ativo {

    border-color: #3c4aa0;

}


.player-avatar {

    position: relative;

    width: 42px;

    height: 42px;

    flex-shrink: 0;

}


.player-avatar img,
.player-avatar span {

    width: 42px;

    height: 42px;

    border-radius: 50%;

}


.player-avatar img {

    display: none;

    object-fit: cover;

}


.player-avatar span {

    display: flex;

    align-items: center;

    justify-content: center;

    background: #202945;

    color: var(--azul-claro);

    font-weight: bold;

}


.player-card small {

    display: block;

    color: var(--texto-fraco);

    font-size: 7px;

}


.player-card strong {

    display: block;

    margin-top: 4px;

    font-size: 11px;

}


.versus {

    text-align: center;

    color: #555e79;

    font-size: 11px;

    font-weight: bold;

}


/* ================================================= */
/* AGUARDANDO */
/* ================================================= */

.aguardando {

    padding: 35px 15px;

    border: 1px solid var(--borda);

    border-radius: 18px;

    background: var(--card);

    text-align: center;

}


.spinner {

    width: 35px;

    height: 35px;

    margin: 0 auto 15px;

    border: 3px solid #29304a;

    border-top-color: var(--azul);

    border-radius: 50%;

    animation:
        girar 1s linear infinite;

}


@keyframes girar {

    to {
        transform: rotate(360deg);
    }

}


.aguardando h2 {

    font-size: 16px;

}


.aguardando p {

    margin-top: 7px;

    color: var(--texto-fraco);

    font-size: 11px;

}


/* ================================================= */
/* JOGO */
/* ================================================= */

.status-jogo {

    margin-bottom: 18px;

    text-align: center;

    color: var(--azul-claro);

    font-size: 13px;

    font-weight: bold;

}


.tabuleiro {

    width: min(
        90vw,
        430px
    );

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;

}


.casa {

    aspect-ratio: 1;

    border: 1px solid var(--borda);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #141a2a,
            #0e1320
        );

    color: white;

    font-size: clamp(
        45px,
        12vw,
        75px
    );

    font-weight: 900;

    transition: .2s;

}


.casa:hover:not(:disabled) {

    transform: translateY(-3px);

    border-color: #4b5785;

    background: #192035;

}


.casa:disabled {

    cursor: default;

}


.casa.x {

    color: var(--azul);

    text-shadow:
        0 0 20px
        rgba(101,117,255,.5);

}


.casa.o {

    color: var(--vermelho);

    text-shadow:
        0 0 20px
        rgba(255,93,122,.5);

}


.casa.vencedora {

    animation:
        pulsar .6s infinite alternate;

    border-color: var(--verde);

}


@keyframes pulsar {

    to {
        transform: scale(1.04);
    }

}


/* ================================================= */
/* RESULTADO */
/* ================================================= */

.resultado-area {

    display: flex;

    justify-content: center;

    gap: 35px;

    margin-top: 20px;

}


.resultado-area div {

    text-align: center;

}


.resultado-area span {

    display: block;

    color: var(--texto-fraco);

    font-size: 10px;

}


.resultado-area strong {

    display: block;

    margin-top: 3px;

    font-size: 20px;

}


/* ================================================= */
/* HISTÓRICO */
/* ================================================= */

.historico-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 25px;

}


.historico-header h1 {

    font-size: 25px;

}


#listaHistorico {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.partida {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 14px;

    border: 1px solid var(--borda);

    border-radius: 12px;

    background: var(--card);

}


.partida strong {

    font-size: 12px;

}


.partida small {

    color: var(--texto-fraco);

    font-size: 9px;

}


.sem-historico {

    padding: 35px;

    border: 1px solid var(--borda);

    border-radius: 15px;

    color: var(--texto-fraco);

    text-align: center;

    font-size: 12px;

}


/* ================================================= */
/* RODAPÉ */
/* ================================================= */

footer {

    margin-top: 50px;

    text-align: center;

}


footer span {

    display: block;

    color: #555e79;

    font-size: 9px;

    letter-spacing: 2px;

}


footer small {

    display: block;

    margin-top: 5px;

    color: #373e54;

    font-size: 8px;

}


/* ================================================= */
/* MOBILE */
/* ================================================= */

@media (max-width: 600px) {

    .app {

        padding:
            18px
            14px
            30px;

    }


    .topo {

        margin-bottom: 40px;

    }


    .hero h1 {

        letter-spacing: -2px;

    }


    .perfil-conteudo {

        align-items: flex-start;

    }


    .avatar-area,
    .avatar,
    .avatar-placeholder {

        width: 70px;

        height: 70px;

    }


    .avatar-placeholder {

        font-size: 25px;

    }


    .acoes {

        grid-template-columns: 1fr;

    }


    .jogadores-online {

        grid-template-columns:
            1fr 35px 1fr;

        gap: 5px;

    }


    .player-card {

        flex-direction: column;

        text-align: center;

        padding: 10px 4px;

    }


    .player-card strong {

        max-width: 80px;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;

    }


    .sala-topo {

        align-items: flex-start;

    }

}