/* --- Base Styles --- */
h5,
h2 {
    margin: 0;
}

/* Specific margin for h5 elements that are not the first child */
h5:not(:first-child) {
    margin: 15px 0;
}

td {
    text-align: left !important;
}

/* Styling for the first column in a table */
td:first-child {
    color: var(--pico-primary);
}

/* --- Match Preview Section --- */

/* Layout for the match preview section */
.match-preview {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

/* Styling for team logos in match preview */
.match-preview img {
    width: 200px;
    border-radius: 50%;
}

/* Styling for the "VS" text */

#vs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#vs p {
    font-size: 4em;
    font-weight: bold;
    /* position:absolute; */
    color:var(--pico-primary);
}

@media screen and (max-width:800px) {
    .match-preview {
        gap: 1rem;
    }
    #vs p {
        font-size:3em;
    }
    .match-preview img  {
        width:150px;
    }
}

@media screen and (max-width:495px) {
    #vs p {
        font-size:1.8em;
    }
    .match-preview img  {
        width:125px;
    }
}

@media screen and (max-width:400px) {
    #vs p {
        font-size:1.6em;
    }
    .match-preview img  {
        width:105px;
    }
}


@media screen and (max-width:360px) {
    #vs p {
    }
    .match-preview img  {
        width:80px;
    }
}

/* --- Layout and Structure --- */

/* Styles for the article within the #sets section */
#sets article {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Container for individual game displays */
.game-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Wrapper for rounds within a set */
.rounds-wrapper {
    display: flex;
    flex-direction: column;
}

/* Styles for an individual round */
.round {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

/* Styles for the sets section */
.sets {
    display: flex;
    flex-direction: column;
}

/* --- Player and Image Styles --- */

/* Base styles for player containers */
.player-a,
.player-b {
    position: relative;
    overflow: hidden; /* Ensures any overflow is hidden */
}

/* Image styling within player containers */
.player-a img,
.player-b img {
    width: 100%;
    display: block;
    /* Removes bottom space */
    object-fit: cover;
    /* Ensures the image covers the whole area */
    height: 70px;
}

/* Grayscale effect for non-winners */
.gray {
    filter: grayscale(0.8);
}

/* --- Overlay Styles --- */

/* General overlay for player images */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    /* Dark overlay */
    z-index: 1;
    /* Place overlay above the image */
    box-shadow: inset 0 0 8px rgba(18, 18, 18, 0.334);
}

/* Winner border for left player */
.winner-left {
    background-color: rgba(0, 0, 0, 0.4);
    border: 10px solid;
    border-image-slice: 1;
    border-width: 1px;
    border-image-source: linear-gradient(to right, var(--pico-primary) 60%, #15b851);
}

/* Winner border for right player */
.winner-right {
    background-color: rgba(0, 0, 0, 0.4);
    border: 10px solid;
    border-image-slice: 1;
    border-width: 1px;
    border-image-source: linear-gradient(to left, var(--pico-primary) 60%, #15b851);
}

/* Loser border for left player */
.loser-left {
    background-color: rgba(0, 0, 0, 0.7);
    border: 10px solid;
    border-image-slice: 1;
    border-width: 1px;
    border-image-source: linear-gradient(to right, var(--pico-primary) 60%, #d53a3a);
}

/* Loser border for right player */
.loser-right {
    background-color: rgba(0, 0, 0, 0.8);
    border: 10px solid;
    border-image-slice: 1;
    border-width: 1px;
    border-image-source: linear-gradient(to left, var(--pico-primary) 60%, #d53a3a);
}

/* --- Text Overlay Styles --- */

/* Positioning and basic styling for text over image */
.text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: center;
    color: rgb(220, 219, 219);
    z-index: 2;
    padding-inline: 10px;
    text-shadow: 1px 1px 1px black;
    white-space: nowrap;
    font-size: 1.2em;
}

/* Allow spans within text overlay to grow */
.text-overlay span {
    flex: 1;
}

/* Align first span to the left */
.text-overlay span:first-child {
    text-align: left;
}

/* Align last span to the right */
.text-overlay span:last-child {
    text-align: right;
}

/* Make each player name take a new line */
.player-name {
    display: block;
}

/* Styling for win text */
.win {
    color: rgba(14, 230, 132, 0.903);
    font-size: 1.5em;
    text-shadow: none;
}

/* Styling for loss text */
.loss {
    color: rgba(254, 25, 9, 0.8);
    font-size: 1.8em;
    text-shadow: none;
}

.player-a:hover .tooltip, .player-b:hover .tooltip {
    opacity:1;
    user-select: none;
}

/* Tooltip code */
.tooltip {
    position: absolute;
    z-index:10;
    width:100%;
    height:100%;
    top:0;
    display:flex;
    justify-content: center;
    align-items: center;
    transition:0.3s ease;
    opacity:0;
}

.tooltip-text {
    margin: 0;
    background-color: rgba(0, 0, 0, 0.85);
    box-shadow:1px 1px 5px rgb(28, 28, 28);
    padding:4px 8px;
    border-radius:10px;
}