/* =========================================================
   JAM 2026
   SISTEMA DE TV / PLACAR
========================================================= */


/* =========================================================
   VARIÁVEIS
========================================================= */

:root {

    --azul-escuro: #03194b;

    --azul: #0a397d;

    --azul-claro: #1674d1;

    --azul-brilhante: #279ddd;

    --amarelo: #f5c400;

    --verde: #20b866;

    --vermelho: #ef3340;

    --laranja: #f57b16;

    --roxo: #7441c7;

    --branco: #ffffff;

    --texto: #071a46;

    --cinza: #75839a;

    --linha: #e3e8ef;

}


/* =========================================================
   RESET
========================================================= */

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}


html,
body {

    width: 100%;

    height: 100%;

}


body {

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

    background:
        var(--azul-escuro);

    color:
        var(--texto);

    overflow: hidden;

}


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

.tv-container {

    width: 100%;

    height: 100vh;

    display: grid;

    grid-template-rows:

        13vh
        1fr
        7vh;

    background:

        radial-gradient(
            circle at 85% 0%,
            rgba(25,110,190,.25),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #02143b,
            #073673 60%,
            #03194b
        );

}


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

.topbar {

    display: grid;

    grid-template-columns:

        1.6fr
        1fr
        .8fr
        .65fr;

    gap: 1vw;

    align-items: center;

    padding:
        1vh
        2vw;

    color:
        white;

}


/* =========================================================
   MARCA
========================================================= */

.brand {

    display: flex;

    align-items: center;

    gap: 1vw;

}


.brand img {

    width: 120px;

    height: 75px;

    object-fit: contain;

}


.brand-text strong {

    display: block;

    font-size:
        clamp(
            12px,
            1.1vw,
            21px
        );

}


.brand-text span {

    display: block;

    margin-top: 4px;

    font-size:
        clamp(
            8px,
            .65vw,
            13px
        );

    letter-spacing:
        .2em;

    color:
        #b9c9e2;

}


/* =========================================================
   DATA / RELÓGIO
========================================================= */

.date-box,
.clock-box {

    display: flex;

    align-items: center;

    gap: .7vw;

    min-height: 5.5vh;

    padding:
        1vh
        1vw;

    border-radius: 7px;

    background:
        #0a397d;

}


.info-icon {

    font-size:
        clamp(
            20px,
            1.6vw,
            30px
        );

}


.date-box strong,
.clock-box strong {

    display: block;

    font-size:
        clamp(
            10px,
            .85vw,
            17px
        );

}


.date-box span,
.clock-box span {

    display: block;

    margin-top: 3px;

    font-size:
        clamp(
            6px,
            .5vw,
            10px
        );

    color:
        #b9c9e2;

}


/* =========================================================
   SLOGAN
========================================================= */

.motto {

    text-align: right;

    font-size:
        clamp(
            10px,
            .9vw,
            17px
        );

    font-weight: 800;

}


.motto span {

    display: block;

    color:
        #bdcce2;

    font-size:
        clamp(
            7px,
            .55vw,
            11px
        );

}


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

.content {

    display: grid;

    grid-template-columns:

        minmax(0, 2.1fr)
        minmax(340px, .85fr);

    gap: 1vw;

    padding:
        0 1vw 1vh;

    min-height: 0;

}


/* =========================================================
   PAINEL PRINCIPAL
========================================================= */

.main-panel {

    background:
        white;

    border-radius:
        11px;

    overflow:
        hidden;

    box-shadow:
        0 10px 35px rgba(0,0,0,.25);

    display: grid;

    grid-template-rows:

        auto
        auto
        auto
        1fr
        auto;

}


/* =========================================================
   MODALIDADE
========================================================= */

.sport-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding:
        1vh
        1vw;

}


.sport-title {

    display: flex;

    align-items: center;

    color:
        white;

    background:

        linear-gradient(
            110deg,
            #061d50,
            #123d80
        );

    border-radius:
        0 10px 10px 0;

    padding-right:
        1.5vw;

}


/* =========================================================
   ÍCONE DA MODALIDADE
========================================================= */

.sport-icon {

    width:
        4.5vw;

    height:
        4.5vw;

    min-width:
        55px;

    min-height:
        55px;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--azul-claro);

    font-size:
        clamp(
            24px,
            2vw,
            38px
        );

}


/* NOME */

.sport-title > strong {

    margin-left:
        .8vw;

    font-size:
        clamp(
            11px,
            1vw,
            20px
        );

}


/* LINHA */

.separator {

    height:
        22px;

    border-left:
        2px solid rgba(255,255,255,.5);

    margin:
        0 .8vw;

}


/* =========================================================
   STATUS AO VIVO
========================================================= */

.status-live {

    color:
        var(--vermelho);

    font-weight:
        900;

    font-size:
        clamp(
            8px,
            .7vw,
            14px
        );

    animation:
        piscarAoVivo 1s infinite;

}


/* ANIMAÇÃO */

@keyframes piscarAoVivo {

    0%,
    100% {

        opacity:
            1;

    }

    50% {

        opacity:
            .2;

    }

}


/* STATUS FINALIZADO */

.status-final {

    color:
        var(--verde);

    font-weight:
        900;

}


/* STATUS INTERVALO */

.status-intervalo {

    color:
        var(--amarelo);

    font-weight:
        900;

    animation:
        piscarIntervalo 1.3s infinite;

}


@keyframes piscarIntervalo {

    0%,
    100% {

        opacity:
            1;

    }

    50% {

        opacity:
            .45;

    }

}


/* STATUS AGENDADO */

.status-agendado {

    color:
        #a9bdd9;

    font-weight:
        900;

}


/* =========================================================
   RESULTADO DO DIA
========================================================= */

.resultado-info {

    color:
        var(--azul-claro);

    font-size:
        clamp(
            7px,
            .5vw,
            10px
        );

    font-weight:
        bold;

}


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

.match-title {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    padding:
        1.2vh
        2.2vw;

}


.section-label {

    color:
        var(--azul-claro);

    font-size:
        clamp(
            6px,
            .5vw,
            9px
        );

    font-weight:
        bold;

    letter-spacing:
        .1em;

}


.match-title h1 {

    margin:
        .5vh 0;

    color:
        var(--texto);

    font-size:
        clamp(
            22px,
            2.1vw,
            40px
        );

    white-space:
        nowrap;

}


.match-title h1 b {

    color:
        #279ddd;

    margin:
        0 .4vw;

}


.match-title p {

    color:
        var(--cinza);

    font-size:
        clamp(
            7px,
            .62vw,
            12px
        );

    font-weight:
        bold;

}


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

.status-box {

    padding-left:
        1.5vw;

    border-left:
        1px solid var(--linha);

    text-align:
        right;

}


.status-box span {

    display:
        block;

    color:
        var(--cinza);

    font-size:
        clamp(
            6px,
            .45vw,
            9px
        );

}


.status-box strong {

    display:
        block;

    margin-top:
        3px;

    font-size:
        clamp(
            16px,
            1.4vw,
            26px
        );

}


/* =========================================================
   CORES STATUS GRANDE
========================================================= */

.status-grande-live {

    color:
        var(--vermelho);

    animation:
        piscarAoVivo 1s infinite;

}


.status-grande-final {

    color:
        var(--verde);

}


.status-grande-intervalo {

    color:
        #d8a900;

}


.status-grande-agendado {

    color:
        #6e7f98;

}


/* =========================================================
   PLACAR
========================================================= */

.score-board {

    position:
        relative;

    margin:
        0 1vw;

    min-height:
        21vh;

    border-radius:
        10px;

    overflow:
        hidden;

    display:
        grid;

    grid-template-columns:

        1fr
        .7fr
        1fr;

    align-items:
        center;

    color:
        white;

    background:

        linear-gradient(
            145deg,
            #061c50,
            #0b3d83
        );

}


.periodo-selo {

    position:
        absolute;

    left:
        50%;

    bottom:
        3%;

    transform:
        translateX(-50%);

    display:
        flex;

    align-items:
        center;

    gap:
        .6vw;

    z-index:
        3;

}

.periodo-linha {

    width:
        1.6vw;

    height:
        2px;

    background:
        #f4c542;

    opacity:
        .8;

}

.periodo-texto {

    background:
        #0b1f45;

    border:
        1px solid rgba(244, 197, 66, .5);

    color:
        #f4c542;

    font-weight:
        800;

    letter-spacing:
        .08em;

    padding:
        .3vh 1vw;

    border-radius:
        999px;

    font-size:
        clamp(
            9px,
            .85vw,
            16px
        );

}


/* CÍRCULO DE FUNDO */

.score-board::before {

    content:
        "";

    position:
        absolute;

    width:
        25vw;

    height:
        25vw;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius:
        50%;

    left:
        50%;

    top:
        50%;

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

}


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

.team {

    position:
        relative;

    z-index:
        2;

    text-align:
        center;

}


.team-logo {

    width:
        clamp(
            55px,
            4.5vw,
            80px
        );

    height:
        clamp(
            55px,
            4.5vw,
            80px
        );

    margin:
        auto;

    border:
        4px solid white;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-weight:
        900;

    font-size:
        clamp(
            11px,
            1vw,
            17px
        );

}


.logo-blue {

    background:

        linear-gradient(
            145deg,
            #3aaae0,
            #1268bc
        );

}


.logo-green {

    background:

        linear-gradient(
            145deg,
            #78ae28,
            #207244
        );

}


.team h2 {

    margin:
        .7vh 0 .2vh;

    font-size:
        clamp(
            13px,
            1.15vw,
            22px
        );

}


.team span {

    color:
        #a6b9d7;

    font-size:
        clamp(
            6px,
            .48vw,
            9px
        );

    letter-spacing:
        .12em;

}


/* =========================================================
   PLACAR CENTRAL
========================================================= */

.score {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        1vw;

}

.data-hora-pilula {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5vw;
    width: fit-content;
    margin: .4vh auto .8vh;
    padding: .35vh 1.1vw;
    background: #fff;
    border: 1px solid #dbe4f3;
    border-radius: 999px;
    color: #0b1f45;
    font-weight: 800;
    font-size: clamp(10px, .85vw, 16px);
    letter-spacing: .03em;
    box-shadow: 0 2px 6px rgba(11,31,69,.12);
}

.separador-pilula {
    width: 1px;
    height: 1.4em;
    background: #dbe4f3;
    margin: 0 .2vw;
}


.score strong {

    font-size:
        clamp(
            52px,
            5vw,
            95px
        );

}


.score span {

    color:
        var(--amarelo);

    font-size:
        clamp(
            22px,
            2vw,
            36px
        );

}


/* =========================================================
   OCORRÊNCIAS
========================================================= */

.occurrences {

    display:
        grid;

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

    gap:
        .6vw;

    padding:
        1vh 1vw;

    align-content:
        center;

}


/* CARTÃO */

.occurrence {

    display:
        flex;

    align-items:
        center;

    gap:
        .6vw;

    min-width:
        0;

    padding:
        .7vh .7vw;

    border-radius:
        7px;

    background:
        #f4f6f9;

    border-left:
        4px solid var(--verde);

}


.occurrence.yellow {

    border-left-color:
        var(--amarelo);

}


.occurrence.red {

    border-left-color:
        var(--vermelho);

}


/* ÍCONE */

.occurrence-icon {

    width:
        24px;

    min-width:
        24px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

}


/* CARTÃO FÍSICO */

.card {

    display:
        block;

    width:
        13px;

    height:
        20px;

    border-radius:
        2px;

    background:
        #ffd000;

    box-shadow:
        0 2px 3px rgba(0,0,0,.25);

}


.card.red {

    background:
        #e93645;

}


/* TEXTO */

.occurrence strong {

    display:
        block;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    font-size:
        clamp(
            7px,
            .56vw,
            11px
        );

}


.occurrence small {

    display:
        block;

    margin-top:
        2px;

    color:
        #8995aa;

    font-size:
        clamp(
            6px,
            .46vw,
            9px
        );

}


/* =========================================================
   INFORMAÇÕES
========================================================= */

.game-info {

    display:
        grid;

    grid-template-columns:

        1.4fr
        1fr
        .8fr;

    gap:
        1vw;

    padding:
        1vh 2.2vw;

    background:
        #f0f3f7;

}


.game-info span {

    display:
        block;

    color:
        #8995aa;

    font-size:
        clamp(
            6px,
            .46vw,
            9px
        );

    font-weight:
        bold;

}


.game-info strong {

    display:
        block;

    margin-top:
        3px;

    font-size:
        clamp(
            7px,
            .58vw,
            11px
        );

}


#localJogo {
    font-size: clamp(13px, 1.15vw, 22px) !important;
    font-weight: 800;
    color: #0f172a;
}


/* =========================================================
   STATUS DO RODAPÉ
========================================================= */

.status-footer-live {

    color:
        var(--vermelho);

    animation:
        piscarAoVivo 1s infinite;

}


.status-footer-final {

    color:
        var(--verde);

}


.status-footer-intervalo {

    color:
        #d5a800;

}


.status-footer-agendado {

    color:
        #6f8098;

}


/* =========================================================
   COLUNA DIREITA
========================================================= */

.right-column {

    display:
        grid;

    grid-template-rows:

        1.02fr
        1fr;

    gap:
        1vw;

    min-height:
        0;

}


.side-panel {

    min-height:
        0;

    background:
        white;

    border-radius:
        10px;

    overflow:
        hidden;

    box-shadow:
        0 8px 30px rgba(0,0,0,.25);

}


/* =========================================================
   CABEÇALHO DOS CARDS
========================================================= */

.panel-header {

    height:
        6.2vh;

    display:
        flex;

    align-items:
        center;

    gap:
        .7vw;

    padding:
        0 1vw;

    color:
        white;

    background:

        linear-gradient(
            105deg,
            #06204f,
            #0b3979
        );

}


.panel-icon {

    width:
        2.5vw;

    height:
        2.5vw;

    min-width:
        34px;

    min-height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

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

    font-size:
        clamp(
            15px,
            1.2vw,
            23px
        );

}


.panel-header h3 {

    font-size:
        clamp(
            10px,
            .95vw,
            18px
        );

}


.panel-header > span {

    margin-left:
        auto;

    color:
        #a0b5d7;

    font-size:
        clamp(
            6px,
            .48vw,
            9px
        );

}


/* =========================================================
   PRÓXIMOS EVENTOS
========================================================= */

.upcoming {

    height:
        calc(100% - 6.2vh);

    display:
        flex;

    flex-direction:
        column;

}


.next-event {

    flex:
        1;

    display:
        grid;

    grid-template-columns:

        3.2vw
        1fr
        auto;

    align-items:
        center;

    gap:
        .7vw;

    padding:
        1vh .9vw;

    border-bottom:
        1px solid var(--linha);

}


.event-circle {

    width:
        3.2vw;

    height:
        3.2vw;

    min-width:
        42px;

    min-height:
        42px;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        clamp(
            17px,
            1.3vw,
            25px
        );

}


.purple {

    background:
        #7441c7;

}


.orange {

    background:
        #f57b16;

}


.green {

    background:
        #2db56b;

}


.next-event strong {

    display:
        block;

    font-size:
        clamp(
            8px,
            .7vw,
            14px
        );

}


.next-event span {

    display:
        block;

    margin-top:
        2px;

    font-size:
        clamp(
            6px,
            .54vw,
            10px
        );

}


.next-event small {

    display:
        block;

    margin-top:
        2px;

    color:
        #7d899d;

    font-size:
        clamp(
            5px,
            .45vw,
            9px
        );

}


.event-time {

    font-size:
        clamp(
            13px,
            1.1vw,
            22px
        );

    white-space:
        nowrap;

}


/* =========================================================
   MEDALHAS
========================================================= */

.medal-header,
.medal-row {

    display:
        grid;

    grid-template-columns:

        1.2vw
        1.8vw
        minmax(80px,1fr)
        1.6vw
        1.6vw
        1.6vw
        2.4vw;

    gap:
        .3vw;

    align-items:
        center;

}


.medal-header {

    height:
        4.5vh;

    padding:
        0 .8vw;

    color:
        #7e8ba2;

    font-size:
        clamp(
            5px,
            .44vw,
            9px
        );

    font-weight:
        bold;

}


.medal-header strong {

    text-align:
        center;

}


.medal-row {

    min-height:
        4.7vh;

    padding:
        0 .8vw;

    border-top:
        1px solid #edf0f4;

    font-size:
        clamp(
            7px,
            .57vw,
            11px
        );

}


.medal-position {

    text-align:
        center;

    font-weight:
        bold;

}


.medal-icon {

    text-align:
        center;

    font-size:
        clamp(
            14px,
            1vw,
            19px
        );

}


.medal-name {

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    font-weight:
        bold;

}


.medal-number {

    text-align:
        center;

}


.medal-total {

    text-align:
        center;

    font-weight:
        bold;

}


.medal-row.highlight {

    background:
        rgba(54,169,223,.10);

}


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

.footer {

    margin:
        0 1vw 1vh;

    display:
        grid;

    grid-template-columns:

        12%
        1fr
        17%;

    align-items:
        center;

    overflow:
        hidden;

    border-radius:
        8px;

    color:
        white;

    background:
        #0b3c7e;

}


.highlights {

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        .5vw;

    background:
        #1153a0;

    font-size:
        clamp(
            7px,
            .62vw,
            12px
        );

}


.news {

    padding:
        0 1.4vw;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        center;

}


.news-item {

    display:
        inline-block;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    max-width:
        100%;

    font-size:
        clamp(
            8px,
            .68vw,
            13px
        );

    font-weight:
        bold;

    opacity:
        1;

    transform:
        translateY(0);

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

}


.news-item.news-fade-out {

    opacity:
        0;

    transform:
        translateY(-8px);

}


.footer-brand {

    padding-right:
        1.2vw;

    text-align:
        right;

}


.footer-brand strong {

    display:
        block;

    font-size:
        clamp(
            9px,
            .8vw,
            15px
        );

}


.footer-brand span {

    display:
        block;

    color:
        #b7c9e4;

    font-size:
        clamp(
            6px,
            .46vw,
            10px
        );

    letter-spacing:
        .1em;

}


/* =========================================================
   FULLSCREEN
========================================================= */

.fullscreen-button {

    position:
        fixed;

    right:
        10px;

    bottom:
        10px;

    width:
        34px;

    height:
        34px;

    border:
        none;

    border-radius:
        6px;

    color:
        white;

    background:
        rgba(0,0,0,.35);

    opacity:
        .15;

    cursor:
        pointer;

    z-index:
        100;

}


.fullscreen-button:hover {

    opacity:
        1;

}


/* =========================================================
   ANIMAÇÃO DO PAINEL
========================================================= */

.fade {

    animation:
        fadeIn .5s ease;

}


@keyframes fadeIn {

    from {

        opacity:
            .2;

        transform:
            translateY(8px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


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

@media(max-width:950px) {

    body {

        overflow:
            auto;

    }


    .tv-container {

        height:
            auto;

        min-height:
            100vh;

        grid-template-rows:

            auto
            auto
            auto;

    }


    .topbar {

        grid-template-columns:
            1fr 1fr;

        padding:
            15px;

    }


    .motto {

        display:
            none;

    }


    .content {

        grid-template-columns:
            1fr;

    }


    .right-column {

        grid-template-rows:
            auto
            auto;

    }

}


@media(max-width:600px) {

    .topbar {

        grid-template-columns:
            1fr;

    }


    .date-box,
    .clock-box {

        display:
            none;

    }


    .content {

        padding:
            8px;

    }


    .match-title h1 {

        font-size:
            20px;

        white-space:
            normal;

    }


    .score-board {

        grid-template-columns:
            1fr;

        padding:
            20px;

        gap:
            15px;

    }


    .score {

        order:
            2;

    }


    .team:first-child {

        order:
            1;

    }


    .team:last-child {

        order:
            3;

    }


    .occurrences {

        grid-template-columns:
            1fr;

    }


    .game-info {

        grid-template-columns:
            1fr;

    }

}
/* Pop-up de show/atração — cobre a tela toda por ~15s, com fade suave */
.popup-show {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 18, 46, .92);
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease;
}
.popup-show.visivel {
    opacity: 1;
}
.popup-show img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 14px;
    box-shadow: 0 10px 60px rgba(0,0,0,.5);
}