/* =========================================================
   PLACAR GERAL - JOGOS SALESIANOS
========================================================= */


/* =========================================================
   FONTE
========================================================= */

@font-face {
    font-family: 'Jogos';
    src: url('fonts/Croacia.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* =========================================================
   BASE
========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;
}

body {
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    background: #f4f4f4;

    font-family: Arial, sans-serif;
}


/* =========================================================
   HEADER
========================================================= */

header {
    width: 100%;

    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;

    flex: 0 0 82px;

    position: relative;
    overflow: hidden;

    background-image:
        var(--imagem-header, url('https://jogossalesianos.liceu.com.br/assets/images/hfaixa.png'))
        !important;

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    z-index: 1000;
}


/* =========================================================
   CONTAINER HEADER
========================================================= */

header .logo-container {
    width: 100%;
    height: 82px;

    position: relative;

    display: flex;
    align-items: center;

    padding: 0 16px;

    margin: 0;
}


/* =========================================================
   LOGO
========================================================= */

header .logo-container > img,
.logo-container img {
    width: auto !important;
    height: 68px !important;

    max-width: 62px !important;
    max-height: 68px !important;

    min-width: 0 !important;
    min-height: 0 !important;

    display: block;

    object-fit: contain !important;

    flex: 0 0 auto;

    margin: 0 !important;
    padding: 0 !important;

    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;

    filter:
        grayscale(100%)
        brightness(0)
        drop-shadow(
            1px
            1px
            1px
            rgba(255,255,255,.7)
        )
        !important;
}


/* =========================================================
   TÍTULO HEADER
========================================================= */

header .logo-container > h1 {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    margin: 0;

    color: #ffffff;

    font-family: 'Jogos', Arial, sans-serif;

    font-size: clamp(
        27px,
        2.5vw,
        40px
    );

    line-height: 1;

    white-space: nowrap;

    text-align: center;

    text-shadow:
        0 2px 3px rgba(0,0,0,.70),
        0 4px 12px rgba(0,0,0,.20);

    z-index: 2;
}


/* =========================================================
   MENU HEADER
========================================================= */

header nav {
    height: 100%;

    margin-left: auto;

    position: relative;

    display: flex;
    align-items: center;

    z-index: 5;
}

header nav ul {
    display: flex;
    align-items: center;

    gap: 10px;

    margin: 0;
    padding: 0;

    list-style: none;
}

header nav ul li {
    margin: 0;
    padding: 0;
}

header nav ul li a {
    min-height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 18px;

    background:
        var(--cor-menu, #002e50);

    border-radius: 6px;

    color: #ffffff;

    font-family: 'Jogos', Arial, sans-serif;

    font-size: 14px;

    text-decoration: none;

    white-space: nowrap;

    box-shadow:
        0 3px 8px
        rgba(0,0,0,.10);

    transition:
        background .2s ease,
        transform .2s ease;
}

header nav ul li a:hover {
    background:
        var(--cor-menu-hover, #004b7d);

    transform: translateY(-1px);
}


/* =========================================================
   MAIN
========================================================= */

main {
    flex: 1 1 auto;

    width: 100% !important;

    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff;

    overflow: hidden;
}


/* =========================================================
   PÁGINA DO PLACAR
========================================================= */

.placar-page {
    width: 100%;
    height: 100%;

    max-width: none;

    margin: 0 auto;

    padding:
        9px
        2.4%
        10px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    font-family: Arial, sans-serif;
}


/* =========================================================
   BARRA SUPERIOR
========================================================= */

.placar-heading {
    flex: 0 0 auto;

    min-height: 42px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin:
        0
        0
        8px;
}


/* =========================================================
   STATUS
========================================================= */

.placar-status {
    margin: 0;

    padding: 7px 12px;

    background: #f8fafc;

    border:
        1px solid
        #e4e7ec;

    border-radius: 7px;

    color: #667085;

    font-family: Arial, sans-serif;

    font-size: 11px;

    text-align: left;
}


/* =========================================================
   CONTROLES
========================================================= */

.placar-controls {
    flex-shrink: 0;
}


/* =========================================================
   BOTÃO
========================================================= */

.placar-button {
    width: auto !important;

    min-width: 175px;

    margin: 0 !important;

    padding:
        8px
        17px
        !important;

    background:
        var(--cor-menu, #002e50)
        !important;

    border: 0;

    border-radius: 7px;

    color: #ffffff;

    font-family: Arial, sans-serif;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 4px 12px
        rgba(0,46,80,.18);

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.placar-button:hover {
    background:
        var(--cor-menu-hover, #004b7d)
        !important;

    transform: translateY(-1px);

    box-shadow:
        0 7px 18px
        rgba(0,46,80,.22);
}

.placar-button:disabled {
    opacity: .65;
    cursor: wait;
    transform: none;
}


/* =========================================================
   GRID
========================================================= */

.placar-grid {
    flex: 1 1 auto;

    min-height: 0;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap:
        clamp(
            12px,
            1.3vw,
            20px
        );

    align-items: center;

    overflow: hidden;

    transition:
        opacity .3s ease,
        transform .3s ease;
}

.placar-grid.placar-reorganizando {
    opacity: .30;
    transform: scale(.99);
}


/* =========================================================
   CARD
========================================================= */

.placar-card {
    --cor-time: #6c757d;
    --cor-texto-time: #ffffff;

    width: 100%;

    height:
        min(
            100%,
            540px
        );

    min-height: 410px;
    max-height: 540px;

    position: relative;

    overflow: hidden;

    display: flex;

    background:
        var(--cor-time);

    border-radius: 18px;

    box-shadow:
        0 10px 25px
        rgba(16,24,40,.18);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.placar-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 15px 32px
        rgba(16,24,40,.23);
}


/* =========================================================
   FUNDO DO CARD
========================================================= */

.placar-card-background {
    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            circle at 15% 18%,
            rgba(255,255,255,.25),
            transparent 32%
        ),

        radial-gradient(
            circle at 95% 90%,
            rgba(0,0,0,.14),
            transparent 35%
        ),

        linear-gradient(
            145deg,
            rgba(255,255,255,.08),
            rgba(0,0,0,.08)
        );

    pointer-events: none;
}


/* =========================================================
   POSIÇÃO
========================================================= */

.placar-position {
    position: absolute;

    top: 13px;
    right: 13px;

    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        rgba(255,255,255,.95);

    border-radius: 50%;

    color: #101828;

    font-family:
        'Jogos',
        Arial,
        sans-serif;

    font-size: 25px;

    box-shadow:
        0 4px 12px
        rgba(0,0,0,.14);

    z-index: 5;
}


/* =========================================================
   PRIMEIRO LUGAR
========================================================= */

.placar-card.placar-classificado:first-child
.placar-position {
    background:
        linear-gradient(
            135deg,
            #ffe990,
            #f6c344
        );

    box-shadow:
        0 4px 14px
        rgba(184,134,11,.28);
}


/* =========================================================
   CONTEÚDO
========================================================= */

.placar-card-content {
    width: 100%;
    height: 100%;

    position: relative;

    z-index: 2;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding:
        28px
        12px
        24px;

    color:
        var(--cor-texto-time);

    text-align: center;
}


/* =========================================================
   EQUIPE
========================================================= */

.placar-team-label {
    margin-bottom: 10px;

    font-family:
        Arial,
        sans-serif;

    font-size:
        clamp(
            28px,
            2.6vw,
            38px
        );

    font-weight: 900;

    line-height: 1;

    letter-spacing: 2px;

    text-transform: uppercase;

    opacity: .90;
}


/* =========================================================
   NOME DO TIME
========================================================= */

.placar-team-name {
    width: 100%;

    margin:
        0
        0
        35px;

    color:
        var(--cor-texto-time);

    font-family:
        'Jogos',
        Arial,
        sans-serif;

    font-size:
        clamp(
            48px,
            5vw,
            70px
        );

    line-height: .95;

    text-transform: uppercase;

    overflow-wrap: anywhere;

    text-shadow:
        0 4px 8px
        rgba(0,0,0,.30);
}


/* =========================================================
   PONTUAÇÃO
========================================================= */

.placar-pontos {
    min-height: 120px;

    display: flex;

    align-items: center;
    justify-content: center;

    opacity: 0;

    transform:
        translateY(10px)
        scale(.94);

    color:
        var(--cor-texto-time);

    font-family:
        'Jogos',
        Arial,
        sans-serif;

    font-size:
        clamp(
            95px,
            9vw,
            145px
        );

    line-height: .85;

    white-space: nowrap;

    text-shadow:
        0 5px 13px
        rgba(0,0,0,.27);

    transition:
        opacity .7s ease,
        transform .7s ease;

    transform-origin: center;

    will-change:
        transform,
        filter,
        text-shadow;
}


/* =========================================================
   ANTES DE MOSTRAR
========================================================= */

.placar-pontos.placar-aguardando {
    opacity: .38;

    transform: none;

    font-size:
        clamp(
            70px,
            6vw,
            100px
        );
}


/* =========================================================
   VISÍVEL
========================================================= */

.placar-pontos.pontuacao-visivel {
    opacity: 1;
}


/* =========================================================
   PONTUAÇÃO FINAL
   ANIMA SEM PARAR
========================================================= */

.placar-pontos.pontuacao-final,
.placar-pontos.pontuacao-visivel.pontuacao-final {
    opacity: 1 !important;

    animation-name:
        pontosPulseInfinito
        !important;

    animation-duration:
        1.35s
        !important;

    animation-timing-function:
        ease-in-out
        !important;

    animation-delay:
        0s
        !important;

    animation-iteration-count:
        infinite
        !important;

    animation-direction:
        alternate
        !important;

    animation-fill-mode:
        both
        !important;

    animation-play-state:
        running
        !important;
}


/* =========================================================
   ANIMAÇÃO INFINITA
========================================================= */

@keyframes pontosPulseInfinito {

    0% {
        transform:
            translateY(0)
            scale(1);

        filter:
            brightness(1);

        text-shadow:
            0 5px 13px
            rgba(0,0,0,.27);
    }


    50% {
        transform:
            translateY(-4px)
            scale(1.065);

        filter:
            brightness(1.12);

        text-shadow:
            0 9px 20px
            rgba(0,0,0,.40);
    }


    100% {
        transform:
            translateY(0)
            scale(1);

        filter:
            brightness(1);

        text-shadow:
            0 5px 13px
            rgba(0,0,0,.27);
    }

}


/* =========================================================
   PRIMEIRO LUGAR
   MAIS DESTACADO
========================================================= */

.placar-card.placar-classificado:first-child
.placar-pontos.pontuacao-final {
    animation-name:
        primeiroLugarPulse
        !important;

    animation-duration:
        1.05s
        !important;

    animation-iteration-count:
        infinite
        !important;

    animation-timing-function:
        ease-in-out
        !important;

    animation-direction:
        alternate
        !important;

    animation-play-state:
        running
        !important;
}


@keyframes primeiroLugarPulse {

    0% {
        transform:
            translateY(0)
            scale(1);

        filter:
            brightness(1);

        text-shadow:
            0 5px 13px
            rgba(0,0,0,.27);
    }


    50% {
        transform:
            translateY(-5px)
            scale(1.085);

        filter:
            brightness(1.20);

        text-shadow:
            0 10px 24px
            rgba(0,0,0,.42);
    }


    100% {
        transform:
            translateY(0)
            scale(1);

        filter:
            brightness(1);

        text-shadow:
            0 5px 13px
            rgba(0,0,0,.27);
    }

}


/* =========================================================
   TEXTO "PONTOS"
========================================================= */

.placar-pontos-label {
    margin-top: 15px;

    font-family:
        Arial,
        sans-serif;

    font-size:
        clamp(
            19px,
            1.8vw,
            26px
        );

    font-weight: 900;

    line-height: 1;

    letter-spacing: 2px;

    text-transform: uppercase;

    opacity: .90;
}


/* =========================================================
   FOOTER
========================================================= */

footer {
    flex: 0 0 auto;

    width: 100%;

    margin: 0 !important;

    padding:
        5px
        0
        !important;

    position: relative;

    background-image:
        var(--imagem-footer, url('https://jogossalesianos.liceu.com.br/assets/images/hfaixa.png'))
        !important;

    background-size:
        cover !important;

    background-position:
        center !important;

    background-repeat:
        no-repeat !important;
}


footer p {
    margin: 0;

    color: white;

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;

    text-align: center;

    filter:
        none !important;
}


/* =========================================================
   NOTEBOOK / ATÉ 800PX
========================================================= */

@media (max-height: 800px) {

    header {
        height: 76px !important;
        min-height: 76px !important;
        max-height: 76px !important;

        flex-basis: 76px;
    }


    header .logo-container {
        height: 76px;
    }


    header .logo-container > img,
    .logo-container img {
        height: 62px !important;

        max-width: 57px !important;
        max-height: 62px !important;
    }


    header .logo-container > h1 {
        font-size: 30px;
    }


    .placar-page {
        padding:
            7px
            2.4%
            8px;
    }


    .placar-heading {
        min-height: 38px;

        margin-bottom: 6px;
    }


    .placar-status {
        padding:
            5px
            10px;

        font-size: 10px;
    }


    .placar-button {
        padding:
            7px
            15px
            !important;

        font-size: 11px;
    }


    .placar-card {
        height:
            min(
                100%,
                470px
            );

        min-height: 390px;
        max-height: 470px;
    }


    .placar-position {
        width: 50px;
        height: 50px;

        font-size: 25px;
    }


    .placar-team-label {
        font-size:
            clamp(
                25px,
                2.4vw,
                34px
            );
    }


    .placar-team-name {
        margin-bottom: 28px;

        font-size:
            clamp(
                45px,
                4.7vw,
                64px
            );
    }


    .placar-pontos {
        min-height: 105px;

        font-size:
            clamp(
                88px,
                8.2vw,
                125px
            );
    }


    .placar-pontos.placar-aguardando {
        font-size:
            clamp(
                65px,
                5.8vw,
                90px
            );
    }


    .placar-pontos-label {
        margin-top: 12px;

        font-size:
            clamp(
                18px,
                1.6vw,
                23px
            );
    }

}


/* =========================================================
   TELAS ATÉ 700PX DE ALTURA
========================================================= */

@media (max-height: 700px) {

    header {
        height: 68px !important;
        min-height: 68px !important;
        max-height: 68px !important;

        flex-basis: 68px;
    }


    header .logo-container {
        height: 68px;
    }


    header .logo-container > img,
    .logo-container img {
        height: 54px !important;

        max-width: 50px !important;
        max-height: 54px !important;
    }


    header .logo-container > h1 {
        font-size: 25px;
    }


    header nav ul li a {
        min-height: 30px;

        padding:
            0
            13px;

        font-size: 11px;
    }


    .placar-card {
        min-height: 345px;
        max-height: 410px;
    }


    .placar-team-label {
        font-size: 23px;
    }


    .placar-team-name {
        margin-bottom: 22px;

        font-size: 42px;
    }


    .placar-pontos {
        min-height: 85px;

        font-size: 82px;
    }


    .placar-pontos.placar-aguardando {
        font-size: 62px;
    }


    .placar-pontos-label {
        font-size: 17px;
    }

}


/* =========================================================
   TABLETS
========================================================= */

@media (max-width: 900px) {

    html,
    body {
        height: auto;

        overflow-y: auto;
    }


    body {
        min-height: 100vh;
    }


    header {
        height: auto !important;

        min-height: 70px !important;
        max-height: none !important;
    }


    header .logo-container {
        min-height: 70px;

        height: auto;
    }


    main {
        overflow: visible;
    }


    .placar-page {
        height: auto;
    }


    .placar-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        overflow: visible;
    }


    .placar-card {
        height: 380px;

        min-height: 380px;

        max-height: none;
    }


    .placar-team-label {
        font-size: 25px;
    }


    .placar-team-name {
        font-size: 48px;
    }


    .placar-pontos {
        font-size: 95px;
    }


    .placar-pontos-label {
        font-size: 18px;
    }

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 550px) {

    .placar-page {
        padding:
            14px
            10px
            30px;
    }


    header .logo-container > img,
    .logo-container img {
        height: 50px !important;

        max-width: 46px !important;
        max-height: 50px !important;
    }


    header .logo-container > h1 {
        font-size: 20px;
    }


    header nav ul {
        gap: 5px;
    }


    header nav ul li a {
        padding:
            0
            8px;

        font-size: 10px;
    }


    .placar-heading {
        flex-direction: column;

        align-items: stretch;
    }


    .placar-status {
        text-align: center;
    }


    .placar-button {
        width: 100% !important;
    }


    .placar-grid {
        grid-template-columns: 1fr;
    }


    .placar-card {
        height: 320px;

        min-height: 320px;
    }


    .placar-team-label {
        font-size: 23px;
    }


    .placar-team-name {
        font-size: 44px;
    }


    .placar-pontos {
        font-size: 88px;
    }


    .placar-pontos-label {
        font-size: 17px;
    }

}


/* =========================================================
   GARANTIA FINAL DA ANIMAÇÃO

   Este bloco fica propositalmente no FINAL do CSS
   para nenhuma regra anterior interromper a animação.
========================================================= */

.placar-pontos.pontuacao-final {
    animation:
        pontosPulseInfinito
        1.35s
        ease-in-out
        0s
        infinite
        alternate
        both
        !important;

    animation-play-state:
        running
        !important;
}


.placar-card.placar-classificado:first-child
.placar-pontos.pontuacao-final {
    animation:
        primeiroLugarPulse
        1.05s
        ease-in-out
        0s
        infinite
        alternate
        both
        !important;

    animation-play-state:
        running
        !important;
}

/* =========================================================
   SELETOR DE EDIÇÃO DO PLACAR
========================================================= */

.placar-edicao-bar {
    width: 100%;
    max-width: 1120px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin:
        0 auto
        18px;

    padding:
        12px
        16px;

    background:
        rgba(255, 255, 255, .96);

    border:
        1px solid
        rgba(0, 46, 80, .12);

    border-radius:
        12px;

    box-shadow:
        0 4px 16px
        rgba(16, 24, 40, .07);
}


/* INFORMAÇÕES */

.placar-edicao-info {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.placar-edicao-info span {
    color:
        #98a2b3;

    font-family:
        Arial,
        sans-serif;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .8px;

    text-transform:
        uppercase;
}


.placar-edicao-info strong {
    color:
        #002e50;

    font-family:
        'Jogos',
        Arial,
        sans-serif;

    font-size:
        17px;
}


/* SELECT */

.placar-edicao-select {
    display: flex;
    align-items: center;

    gap:
        9px;
}


.placar-edicao-select label {
    margin:
        0;

    color:
        #667085;

    font-family:
        Arial,
        sans-serif;

    font-size:
        10px;

    font-weight:
        700;

    text-transform:
        uppercase;
}


.placar-edicao-select select {
    width:
        110px;

    height:
        38px;

    margin:
        0 !important;

    padding:
        7px
        10px;

    background:
        #ffffff;

    border:
        1px solid
        #d0d5dd;

    border-radius:
        7px;

    color:
        #002e50;

    font-family:
        Arial,
        sans-serif;

    font-size:
        13px;

    font-weight:
        800;

    cursor:
        pointer;
}


.placar-edicao-select select:focus {
    outline:
        none;

    border-color:
        #002e50;

    box-shadow:
        0 0 0 3px
        rgba(0, 46, 80, .10);
}


/* =========================================================
   RESPONSIVO
========================================================= */

@media (max-width: 650px) {

    .placar-edicao-bar {
        flex-direction:
            column;

        align-items:
            stretch;
    }


    .placar-edicao-select {
        justify-content:
            space-between;
    }


    .placar-edicao-select select {
        width:
            120px;
    }

}

/* =========================================================
   PLACAR PÚBLICO - COMPLEMENTOS
========================================================= */

.placar-publico-atualizacao {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.placar-publico-atualizacao::before {
    content: '';
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #12b76a;
    box-shadow: 0 0 0 4px rgba(18,183,106,.12);
    animation: placarStatusOnline 1.6s ease-in-out infinite alternate;
}

@keyframes placarStatusOnline {
    from {
        opacity: .55;
        transform: scale(.88);
    }

    to {
        opacity: 1;
        transform: scale(1.12);
    }
}

.placar-card {
    animation: placarCardEntrada .65s cubic-bezier(.2,.75,.25,1) both;
}

.placar-card:nth-child(2) { animation-delay: .08s; }
.placar-card:nth-child(3) { animation-delay: .16s; }
.placar-card:nth-child(4) { animation-delay: .24s; }

@keyframes placarCardEntrada {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}