:root {
    --color-plv: rgb(0,227,60);
    --color-bg-left: rgb(0,0,30);
    --color-bg-right: rgb(0, 0, 30);

    --color-home-team: rgba(0, 83, 145, 1);
    --color-visitor-team: rgba(215, 51, 138, 1);
}

.border {
    border: 1px solid #dee2e6;
}

.bg-home-team {
    background-color: var(--color-home-team);
}

.border-home-team {
    border-color: var(--color-home-team) !important;
}

.bg-visitor-team {
    background-color: var(--color-visitor-team);
}

.border-visitor-team {
    border-color: var(--color-visitor-team) !important;
}

.border-warning {
    border-color: var(--warning) !important;
}

html, body {
    height: 100% !important;
    overflow: hidden;
    background-color: black;
    /*font-family: 'Tiresias Infofont', sans-serif;*/
    /*font-family: 'Hemi Head', sans-serif;*/
    font-family: "Barlow", sans-serif;
    font-weight: 300;
}

.wrapper, .page {
    height: 100%;
}

#page-main, #page-playing-match {
    /*background-image: url('https://img.lovepik.com/background/20211022/large/lovepik-black-texture-background-image_500861599.jpg');
    background-color: rgba(0,0,0,0.6);
    background-blend-mode: darken;
    background-size: cover;
    */
}

.reversed  {
}


#score-story {
    overflow-x: hidden;
    height:100%;
}

.team-name {
    text-transform: uppercase;
}

.img-fluid {
    max-height:100%;
}

.sponsor img {
    height: 100%;
    width: auto;
}


/*
.btf-text::first-letter {
    margin-left: -0.14em;
}
*/

.background-filter {
    filter: grayscale(100%) hue-rotate(0deg) invert(0%) opacity(100%) saturate(100%) sepia(0%) brightness(50%) invert(100%);
    mix-blend-mode: hard-light;
}


.home-team-image,.visitor-team-image{
    border-radius: 50%;
    background: rgba(255,255,255,1);
}

.home-team-image {
    border: 15px solid var(--color-home-team);
}

.visitor-team-image {
    border: 15px solid var(--color-visitor-team);
}

#page-playing-match.reversed .header-container,
#page-playing-match.reversed .score-container,
#page-playing-match.reversed .team-name-container,
#page-playing-match.reversed .team-score-container,
#page-playing-match.reversed .team-invasion-container,
#page-playing-match.reversed .team-invasion-box
{
    flex-direction: row-reverse !important;
}

#page-playing-match.reversed .bg-diagonale
{
    background:
        /* riempimento rosso/blu */
            linear-gradient(
                    99deg,
                    var(--color-visitor-team) 0% 50%,
                    var(--color-home-team) 50% 100%
            );
}

#page-playing-match.left-side-only .left-side {
    width: 100% !important;
}

#page-playing-match.left-side-only .right-side {
    width: 25% !important;
    display: none;
}


.bg-diagonale{
    background:
    /* riempimento rosso/blu */
        linear-gradient(
                99deg,
                var(--color-home-team) 0% 50%,
                var(--color-visitor-team) 50% 100%
        );
}

.split-bg{
    --angle: 8deg;
    --over: 50%;
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.split-bg.reverse{ flex-direction: row-reverse; }

.pane{
    flex: 1 1 50%;
    position: relative;
    height: 100%;
}

.pane--left{  background: var(--color-bg-left); }
.pane--right{ background: var(--color-bg-right); }

/* base comune agli overlay */
.pane::before,
.pane::after{
    content:"";
    position:absolute;
    top: 0%;
    bottom: 0%;
    width: var(--over);
    transform: skewX(calc(var(--angle) * -1));
    pointer-events: none;
}

/* DEFAULT row */
.split-bg:not(.reverse) .pane--left::after{
    right: calc(var(--over) * -1);
    background: var(--color-bg-right);
    transform-origin: right center;
}

.split-bg:not(.reverse) .pane--right::before{
    left: calc(var(--over) * -1);
    background: var(--color-bg-left);
    transform-origin: left center;
}

/* REVERSE row-reverse */
.split-bg.reverse .pane--left::before{
    left: calc(var(--over) * -1);
    background: var(--color-bg-right);
    transform-origin: left center;
}

.split-bg.reverse .pane--right::after{
    right: calc(var(--over) * -1);
    background: var(--color-bg-left);
    transform-origin: right center;
}


/*--------------------------------------------*/
#top-scorers {
    overflow: hidden;
}

#top-scorers .bar{
    width: 100%;
    aspect-ratio: 1301 / 303; /* opzionale: mantiene proporzioni simili all’immagine */
}

#top-scorers .bar.bar-home{
    /* Strati: bordo + linea diagonale + riempimento */
    background:
        /* riempimento rosso/blu */
            linear-gradient(
                    112deg,
                    var(--color-home-team) 0% 65%,
                    #ffffff 50% 100%
            );
}

#top-scorers .bar.bar-visitor{
    /* Strati: bordo + linea diagonale + riempimento */
    background:
        /* riempimento rosso/blu */
            linear-gradient(
                    112deg,
                    var(--color-visitor-team) 0% 65%,
                    #ffffff 50% 100%
            );
}

#top-scorers .player {
    position: relative;
}

#top-scorers .player .image {
    position: absolute;
    left: 0px;
    top: 5%;
    z-index: 1;
    overflow: hidden;
    background-size: 150%;
    background-repeat: no-repeat;
    background-position: 50%;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 75%), calc(100% - 65%) 100%, 0 100%);
}

/*--------------------------------------------*/

/*--------------------------------------------*/
#player-hit {
    position: absolute;
    z-index: 10;
    top: 0%;
}

#player-hit.show {
}

#player-hit .backdrop {
    position: absolute;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); /* Safari */

    top: 0%;
    animation: fadeOut 0.2s ease-in-out forwards;
}

#player-hit.show .backdrop {
    animation: fadeIn 0.2s ease-in-out forwards;
}

#player-hit.show .home-team-hit, #player-hit.show .visitor-team-hit {
    animation: vaSu 0.4s ease-in-out forwards;
}

/* --- KEYFRAMES --- */

@keyframes fadeIn {
    0% { opacity: 0 }
    100% { opacity: 1 }
}

@keyframes fadeOut {
    0% { opacity: 1 }
    100% { opacity: 0 }
}

@keyframes vaSu {
    from { top: 100%; }
    to   { top: 0%;  }
}

@keyframes vaGiu {
    from { top: 0%;  }
    to   { top: 100%; }
}

#player-hit .point {
    position:absolute;
    z-index:12;
    top: 17%;
    justify-content: flex-end;
}

#player-hit .home-team-hit, #player-hit .visitor-team-hit {
    z-index: 11;
    position: relative;
    /* Stato finale di riposo */
    top: 100%;

    /* Animazione di RITORNO (si attiva quando togli .show) */
    animation: vaGiu 0.4s ease-in-out forwards;
}

#player-hit .home-team-hit .player-number,
#page-playing-match.reversed #player-hit .visitor-team-hit .player-number {
    position: absolute;
    bottom: 15%;
    left: 0;
    right: auto;
    padding-right: 2%;
}

#player-hit .visitor-team-hit .player-number,
#page-playing-match.reversed #player-hit .home-team-hit .player-number {
    position: absolute;
    bottom: 15%;
    left: auto;
    right: 2%;
}

#player-hit .visitor-team-hit,
#page-playing-match.reversed #player-hit .home-team-hit{
    display: flex;
    justify-content: flex-end;
    padding-right: 2%;
}

#player-hit .home-team-hit,
#page-playing-match.reversed #player-hit .visitor-team-hit {
    display: flex;
    justify-content: flex-start;
    padding-left: 2%;
}

#player-hit .home-team-hit .polygon, #player-hit .visitor-team-hit .polygon {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}

#player-hit .home-team-hit .polygon,
#page-playing-match.reversed #player-hit .visitor-team-hit .polygon {
    clip-path: polygon(
            7% 20%,
            47% 20%,
            40% 95%,
            0% 95%
    );
    width: 100%;
}

#player-hit .home-team-hit .polygon {
    background: var(--color-home-team);
}

#player-hit .visitor-team-hit .polygon,
#page-playing-match.reversed #player-hit .home-team-hit .polygon {
    clip-path: polygon(
            60% 20%,
            100% 20%,
            93% 95%,
            53% 95%);
    margin-right: 0;
    width: 100%;
}

#player-hit .visitor-team-hit .polygon {
    background: var(--color-visitor-team);
}

#player-hit .home-team-hit .player-name, #player-hit .visitor-team-hit .player-name {
    writing-mode: sideways-lr;
    text-orientation: mixed;
    position:absolute;
    bottom:8%;
    z-index: 12;
}

#player-hit .home-team-hit .player-name,
#page-playing-match.reversed #player-hit .visitor-team-hit .player-name {
    left: 30%;
    right: auto;
}

#player-hit .visitor-team-hit .player-name,
#page-playing-match.reversed #player-hit .home-team-hit .player-name {
    left: 55%;
    right: auto;
}

#player-hit .player-image {
    position: absolute;
    bottom: 0;
    z-index: 12;
    height: 60%;
    width: auto;
}

#player-hit .home-team-hit .point,
#page-playing-match.reversed #player-hit .visitor-team-hit .point {
    padding-right: 3.5rem;
}

#player-hit .visitor-team-hit .point,
#page-playing-match.reversed #player-hit .home-team-hit .point {
    padding-right: 4rem;
}

#player-hit .home-team-hit .player-image,
#page-playing-match.reversed #player-hit .visitor-team-hit .player-image {
    left: -12%;
    right: auto;
}

#player-hit .visitor-team-hit .player-image,
#page-playing-match.reversed #player-hit .home-team-hit .player-image {
    right: -12%;
    left:auto;
}

#player-hit .penalty-point {
    display: none;
}

#player-hit .penalty {
    border: 15px solid white;
    -webkit-border-radius: 10%;
    -moz-border-radius: 10%;
    border-radius: 10%;
    height: 100%;
}

#player-hit .penalty.penalty-yellow-card {
    background: var(--warning);
}

#player-hit .penalty.penalty-red-card {
    background: var(--danger);
}

#player-hit .home-team-hit .team-name-container, #player-hit .visitor-team-hit .team-name-container {
    position: absolute;
    top: 83%;
    z-index: 13;
    display: none;
}

#player-hit .home-team-hit .team-name-container,
#page-playing-match.reversed #player-hit .visitor-team-hit .team-name-container {
    padding-left: 5%;
    padding-right: 10%;
}

#player-hit .visitor-team-hit .team-name-container,
#page-playing-match.reversed #player-hit .home-team-hit .team-name-container {
    padding-left: 4%;
    padding-right: 11%;
}

#player-hit .home-team-hit .team-image-container,
#page-playing-match.reversed #player-hit .visitor-team-hit .team-image-container {
    position: absolute;
    left: 2%;
    right: auto;
    top: 25%;
    width: 51%;
    height: 29%;
}

#player-hit .visitor-team-hit .team-image-container,
#page-playing-match.reversed #player-hit .home-team-hit .team-image-container {
    position: absolute;
    left: auto;
    right: 0;
    top: 25%;
    width: 48%;
    height: 29%;
}
/*--------------------------------------------*/