@font-face {
    font-family: "Montserrat-Bold";
    src: url("../fonts/Montserrat/Montserrat-Bold.ttf") format("truetype");
}

html,
body {
    background: linear-gradient(
        20deg,
        #1b223a 0 20%,
        #e84038 20% 40%,
        #f39200 40% 60%,
        #ffd300 60% 80%,
        #1b223a 80% 100%
    );
}

.bubble {
    padding: 20px;
    background-color: white;
    border-radius: 24px;
    box-shadow: 0 0 0px 0px #fbead6;
}

.bubble-header {
    padding: 20px;
    background-color: white;
    border-radius: 24px;
    box-shadow: 0 0 0px 0px #fbead6;
}

.bubble-footer {
    background-color: white;
    display: flex;
    border-radius: 24px;
    box-shadow: 0 0 0px 0px #fbead6;
    align-items: center;
    justify-content: center;
    padding: 15px;
    margin: 0;
}

.bubble-sponsor {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.footer-broadcast {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px;
    z-index: 100;
    margin-bottom: 20px;
}

.sponsor-logo-broadcast {
    height: 100px;
    width: 100px;
    object-fit: contain;
}

.bold {
    font-family: "Montserrat-Bold";
}

.player {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 3.2em; /* This ensures minimum height for 2 lines */
    justify-content: center;
    overflow: hidden;
}

/* Add this if you want empty lines to take up space */
.player div {
    min-height: 1.4em; /* Height for single line */
}

/* For single player teams */
.player.single-player .bold {
    line-height: 1.4em;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
}

/* For two player teams */
.player.two-players .bold {
    line-height: 1.4em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flex {
    display: flex;
    align-items: center;
}

.flex-left {
    flex: 1;
    text-align: left;
    justify-content: center;
    min-height: 4em;
    padding-right: 5px;
}

.flex-right {
    flex: initial;
    text-align: right;
    justify-content: center;
}

.center {
    align-items: center;
}

.left-content.bubble-header {
    display: flex;
    align-items: top; /* Vertically align items (logo and text) */
    height: 120px; /* Example height matching QR code */
}

.left-content.bubble-header.screen-size-overlay {
    display: flex;
    align-items: top; /* Vertically align items (logo and text) */
    max-height: 14vh; /* Allow height to adjust based on content */
}

.left-content.bubble-header.screen-size-overlay .left-margin h1.club,
.left-content.bubble-header.screen-size-overlay .left-margin h1.event {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal; /* Allow text to wrap */
}

.logo {
    height: 100%; /* Make the logo's height match the parent's height */
    width: auto; /* Maintain the logo's aspect ratio */
}

#header {
    padding: 30px;
}

@media screen and (max-height: 720px) {
    .logo {
        object-fit: contain;
        max-width: 60px;
    }

    .sponsor-logo-broadcast {
        object-fit: contain;
        height: 80px;
        width: 80px; /* Example height matching QR code */
    }
}

@media screen and (min-height: 1080px) {
    .sponsor-logo-broadcast {
        object-fit: contain;
        height: 120px;
        width: 120px; /* Example height matching QR code */
    }

    #header {
        margin-bottom: 40px;
    }
    .footer-broadcast {
        margin-bottom: 40px;
    }
}

@media screen and (min-height: 2160px) {
    .sponsor-logo-broadcast {
        object-fit: contain;
        height: 200px;
        width: 200px; /* Example height matching QR code */
    }

    #header {
        margin-bottom: 80px;
    }
    .footer-broadcast {
        margin-bottom: 80px;
    }
}
