@font-face {
    font-family: contestFont;
    src: url('/font/CarterOne-Regular.ttf');
}

.mainSectionWebglOverride {
    border: none;
    box-shadow: none;
}

#imgContestLogo {
    width: 200px;
    margin-top: 10px;
}

.responsiveMenu {
    background-color: rgba(0,0,0,0);
    padding: 20px;
}

.menuGroupItems button {
    white-space: normal;
}

.menuGroupItems .row:last-child {
    margin-bottom: 20px;
}

.menuGroupItems button img {
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    height: 40px;
}

@media (max-aspect-ratio: 8.4/10) { /* (orientation: portrait) */
    .responsiveMenu {
        width: 100%;
    }

    .menuGroupItems button {
        font-size: 12pt;
    }

    #divQRCodeImageGroupMatch {
        display: none;
    }

    #divGroupMatchPlayers {
        width: 100%;
    }

    #btnGroupMatchShowQR {
        display: revert;
        width:95%
    }
}

@media (min-aspect-ratio: 8.4/10) { /* (orientation: landscape) */
    .responsiveMenu {
        width: 70%;
    }

    .menuGroupItems button {
        font-size: 13pt;
    }

    #divQRCodeImageGroupMatch {
        display: revert;
        width:40%;
    }

    #divGroupMatchPlayers{
        width:55%;
    }

    #btnGroupMatchShowQR {
        display: none;
    }
}

.responsiveMenu svg {
    margin-right: 5px;
    width: 30px;
    height: 30px;
}

.menuGroup {
    border: solid rgba(0,0,0, 0.1) 2px;
    margin-bottom: 15px;
    width: 100%;
}

#mainMenu {
    fill: white;
}

#mainMenu button {
    margin-top: 5px;
    margin-bottom: 5px;
}

.trapeziumTitle {
    color: rgb(50,50,50);
    display: flex;
    gap: 5px;
    margin-bottom: 5px;
}

.trapeziumItem {
    width: 50%;
    flex: 1;
    text-align: center;
    font-size: 10pt;
    padding: 5px;
}

.trapeziumBg {
    background-color: rgba(0,0,0,0.1);
}

.trapeziumBgDark {
    background-color: rgba(0,0,0,0.15);
}

.trapeziumItem > * {
    display: none;
}

.trapeziumItemLeft {
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
    /*background: linear-gradient(to top, rgba(200, 200, 200,0.5), rgba(255, 255, 255,0.75));*/
}

.trapeziumItemRight {
    clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);
    /*background-color: rgba(0, 0, 0, 0.25);*/
    /*background: linear-gradient(to top, rgb(200, 200, 200), rgba(255, 255, 255));*/
    font-weight: bold;
    cursor: pointer;
}

#txtMenuTurnedOn {
    font-weight: bold;
    color: green;
    display: none;
}

#txtMenuTurnedOn, #txtMenuTurnedOff {
    text-transform: lowercase;
}

.menuGroupTitle {
    background-color: rgba(0,0,0,0.1);
    color: rgb(50,50,50);
    width: 100%;
    text-align: center;
    font-weight: bold;
    padding-top: 5px;
    padding-bottom: 5px;
    /* text-shadow: 1.5px 1.5px 0 rgba(0,0,0,0.4), -1px 1px 0 rgba(0,0,0,0.4), -1px -1px 0 rgba(0,0,0,0.4), 1px -1px 0 rgba(0,0,0,0.4); */
}

.menuGroupItems {
    display: flex;
    gap: 10px;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 11pt;
}

#imgWebQuizBackground {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: -1;
}


#divWebQuizBackground {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /*background-size: cover;*/
    background-size: auto 100%; /* scale image height to div height */
    background-position: bottom right;
    background-repeat: no-repeat;
    z-index: -1;
    /* background-position: right; */ /* start aligned right */
    background-position: 0% 50%;
    animation: divWebQuizBackgroundAnimation 3s linear forwards; /* run once, keep end state */
}

@keyframes divWebQuizBackgroundAnimation {
    /*
    from {
        background-position: right;
    }

    to {
        background-position: left;
    }
    */
    from {
        background-position: 0 50%; /* left */
    }

    to {
        background-position: 100% 50%; 
    }
    
}

#webglCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity:0;
}

#webglTempImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    display:none;
}

.scrolling-background {
    position: absolute;
    width: 2000px;
    height: 2000px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotate(45deg);
    z-index: -1;
    background-image: url('/img/gifs/stripes3.gif');
    background-repeat: repeat;
}

@keyframes animatedAttentionKeyFrames {
    0% {
        background-color: rgb(255, 102, 0);
    }

    50% {
        background-color: rgb(204, 81, 0);
    }

    100% {
        background-color: rgb(255, 102, 0);
    }
}

.spinner {
    animation: spin 1s linear infinite
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

.anim-slide-in-down {
    animation: animSlideDown 2s linear forwards;
}


@keyframes animSlideDown {
    from {
        transform: translate(-50%, -90%);
    }

    to {
        transform: translate(-50%, -75%);
    }
}

.anim-slide-in-up {
    animation: animSlideTop 1.6s linear forwards;
}

@keyframes animSlideTop {
    from {
        transform: translate(-50%, -10%);
    }

    to {
        transform: translate(-50%, -25%);
    }
}

.intro-text {
    color: white;
    text-shadow: 0 0 2px black, 0 0 2px black;
    perspective: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#txtPPPlayer1 {
    transform: rotateY(45deg) translate(10%,-30%) scale(0.85);
    display: inline-block;
    white-space: nowrap;
}

#txtPPPlayer2 {
    transform: rotateY(-45deg) translate(-10%,30%) scale(0.85);
    display: inline-block;
    white-space: nowrap;
}

.animated-attention {
    color: white;
    background: none;
    animation: animatedAttentionKeyFrames 2s infinite;
}

.anim-slide-left {
    animation: animSlideLeft 0.2s linear forwards;
}

@keyframes animSlideLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(-100vw);
        opacity: 0;
    }
}

.anim-slide-right {
    animation: animSlideRight 0.2s linear forwards;
}

@keyframes animSlideRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100vw);
        opacity: 0;
    }
}

.anim-perspective-slide-right {
    animation: animPerspectiveSlideRight 0.2s linear forwards;
}

.anim-perspective-slide-right-remove {
    animation: animPerspectiveSlideRight 0.2s linear forwards;
    animation-direction: reverse;
}

@keyframes animPerspectiveSlideRight {
    from {
        transform: rotateY(45deg) translate(200%,-50%) scale(0.85);
    }

    to {
        transform: rotateY(45deg) translate(10%,-50%) scale(0.85);
    }
}

.anim-perspective-slide-left {
    animation: animPerspectiveSlideLeft 0.2s linear forwards;
}

.anim-perspective-slide-left-remove {
    animation: animPerspectiveSlideLeft 0.2s linear forwards;
    animation-direction: reverse;
}

@keyframes animPerspectiveSlideLeft {
    from {
        transform: rotateY(-45deg) translate(-200%,30%) scale(0.85);
    }

    to {
        transform: rotateY(-45deg) translate(-10%,30%) scale(0.85);
    }
}

.anim-player1-exit {
    animation: animPlayer1Exit 0.9s linear forwards;
}

@keyframes animPlayer1Exit {
    from {
        transform: translate(0px, 0px) rotateZ(0) scale(1);
    }

    to {
        transform: translate(0px, -100px) rotateZ(1080deg) scale(2);
    }
}

.anim-player2-exit {
    animation: animPlayer2Exit 0.9s linear forwards;
}

@keyframes animPlayer2Exit {
    from {
        transform: translate(0px, 0px) rotateZ(0) scale(1);
    }

    to {
        transform: translate(0px, 100px) rotateZ(1080deg) scale(2);
    }
}

/**/
.anim-groupmatch-introfx-top-exit {
    animation: anim-groupmatch-introfx-top-exit 0.9s linear forwards;
}

@keyframes anim-groupmatch-introfx-top-exit {
    from {
        transform: translate(0px, 0px) scale(1);
    }

    to {
        transform: translate(0px, -100px) scale(2);
    }
}

.anim-groupmatch-introfx-bottom-exit {
    animation: anim-groupmatch-introfx-bottom-exit 0.9s linear forwards;
}

@keyframes anim-groupmatch-introfx-bottom-exit {
    from {
        transform: translate(0px, 0px) scale(1);
    }

    to {
        transform: translate(0px, 100px) scale(2);
    }
}

.divPPPlayerBackgroudFinalIntro {
    width: 100%;
    height: 50%; /* exactly half of #outer */
    background-image: url('/img/stage_background_blur.jpg');
    background-size: auto 100%; /* scale image height to div height */
    background-repeat: no-repeat;
    background-position: bottom;
}

#divPPPlayer1BackgroudFinalIntro {
    background-position: right; /* start aligned right */
    animation: player1BackgroudFinalIntro 30s linear forwards; /* run once, keep end state */
}

@keyframes player1BackgroudFinalIntro {
    from {
        background-position: right;
    }

    to {
        background-position: left;
    }
}

#divPPPlayer2BackgroudFinalIntro {
    background-position: left;
    animation: player2BackgroudFinalIntro 30s linear forwards; /* run once, keep end state */
}

@keyframes player2BackgroudFinalIntro {
    from {
        background-position: left;
    }

    to {
        background-position: right;
    }
}

#divPPFinalIntroVS {
    position: absolute;
    width: 100%;
    height: 10%;
    /*background-color: rgba(0,0,0, 0.5);*/
    top: 50%;
    left: 0;
    transform: translate(0px, -50%);
}

.vs-logo {
    position: absolute;
    height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.vs-logo-back {
    z-index: 1;
    filter: drop-shadow(0px 0px 10px rgba(0,0,0, 1));
}

.vs-logo-front {
    z-index: 2;
}

.vs-front-overlay {
    z-index: 3;
    object-fit: cover; /* make sure the video fills the box */
    mix-blend-mode: lighten;
    pointer-events: none;
    /* — apply the PNG’s alpha as a mask — */
    mask: url('/img/vs/vs-front.webp') no-repeat center/contain;
    mask-mode: alpha;
    mask-composite: intersect;
    /* WebKit needs its own syntax: */
    -webkit-mask: url('/img/vs/vs-front.webp') no-repeat center/contain;
    -webkit-mask-composite: source-in;
}

#divFinalIntroOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px); /* Blur the background */
    opacity: 0.3;
    z-index: 2; /* On top of content */
}

#txtPPPlayer1Stats {
    transform: rotateY(-50deg) translate(20%, 0%);
    display: inline-block;
    white-space: nowrap;
    text-align: center;
}

#txtPPPlayer2Stats {
    transform: rotateY(50deg) translate(-20%, 00%);
    display: inline-block;
    white-space: nowrap;
    text-align: center;
}

.section {
    background-position-y: top !important;
}

.frontButton {
    text-align: left;
    display: block;
    overflow: visible; /* Allows content to expand the height */
}

.frontButton-inner {
    align-items: center; /* Vertically center the icon and text */
    width: 100%; /* Take full width of the button */
}

.frontButtonContent {
    flex-grow: 1; /* Allow text to take remaining space */
    padding-left: 10px; /* Space between icon and text */
    white-space: normal; /* Allow text to wrap */
    word-wrap: break-word; /* Break long words if needed */
}

.frontButtonText {
    /* margin-left: 45px; */
    margin-right: 10px;
    white-space: normal;
    word-wrap: break-word;
    display: block;
    font-size: 11pt;
}

.alternativeIcon {
    width: 30px;
    height: 30px;
    background-color: rgba(0,0,0,0.5);
    flex-shrink: 0; /* Prevent icon from shrinking */
    float: left;
    margin-right: 10px;
}

@media (max-aspect-ratio: 8.4/10) { /* (orientation: portrait) */
    #divAlternatives {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (min-aspect-ratio: 8.4/10) { /* (orientation: landscape) */
    #divAlternatives {
        grid-template-columns: repeat(2, 1fr);
    }
}

.btnAlternative {
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: white;
}

.btnAlternativeReveal {
    animation: alternativeReveal 0.25s linear forwards;
}

@keyframes alternativeReveal {
    from {
        transform: rotateX(90deg);
        background: rgba(0, 0, 0, 0);
    }

    to {
        transform: rotateX(0deg);
        background: rgba(0, 0, 0, 0.5);
    }
}

.btnAlternativeHide {
    animation: btnAlternativeHide 0.5s linear forwards;
}

@keyframes btnAlternativeHide {
    from {
        background: rgba(0, 0, 0, 0.5);
    }

    to {
        background: rgba(0, 0, 0, 0);
    }
}

.textAlternativeHide {
    animation: textAlternativeHide 0.5s linear forwards;
}

@keyframes textAlternativeHide {
    from {
        color: rgba(255, 255, 255, 1);
    }

    to {
        color: rgba(255, 255, 255, 0.15);
    }
}

#divQuestionContainer {
    color: white;
    margin-top: 10px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 5px;
}

#question {
    font-size: 15pt;
    font-weight: bold;
    /*margin-top: 10px;*/
    margin-left: 0px;
    margin-right: 0px;
    /*background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.25);*/
}



.timer-bar-wrapper {
    position: relative;
    width: 100%;
    height: 10px;
    background: #001f33; /* dark background to make neon pop */
    /*overflow: hidden;*/
    margin-bottom: 5px;
}

.timer-bar {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    transform-origin: left;
}

.timer-bar-animation {
    animation: timerBarAnimation 10s linear forwards;
}

@keyframes timerBarAnimation {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

#divTimerBar {
    background: #0ff; /* neon-light-blue */
    box-shadow: 0px 0px 4px 2px #0ff;
}

#divSecondTimerBar {
    /*opacity: 0.1;*/
    transition: opacity 0.25s ease; /* quick fade */
    background: #f90;
    box-shadow: 0 0 4px 2px #f90;
}

.head-head-row {
    display: flex;
    width: 100%;
    color: white;
    font-size:13pt;
}

.head-head-row > .head-left {
    flex: 1;
    /* Additional styling for the first child */
    text-align: left;
    padding-right: 5px;
}

.head-head-row > .head-right {
    flex: 1;
    /* Additional styling for the second child */
    text-align: right;
    padding-left: 5px;
}

.score {
    color: white;
    font-size: 0.9rem;
}

.score > img {
    width: 16px;
    height: 16px;
}

.players-row {
    display: flex;
    width: 100%;
}

/* Center timer column */
.center-col {
    flex-direction: column;
    font-family: sans-serif;
}

.center-col .label {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.center-col .countdown {
    font-size: 2rem;
    font-weight: bold;
}

.regular-timer {
    color: #0ff;
    text-shadow: 0 0 12px #0ff;
}

.alert-timer {
    color: #f90;
    text-shadow: 0 0 12px #f90;
    animation: alert-timer-animation 0.5s infinite ease-in-out;
}

@keyframes alert-timer-animation {
    0%, 100% {
        color: #f90;
        text-shadow: 0 0 12px #f90;
    }

    50% {
        color: #fff;
        text-shadow: 0 0 12px #fff;
    }
}


/* farewell-fx */
:root {
    --spot-dist: 207px; /* radius from center */
}

.farewell-fx {
    position: absolute;
    width: 400px;
    height: 400px;
    margin: 40px auto;
    /*background: url('/img/stageCenter.webp') no-repeat center/contain;*/
    animation: farewell-fx-animation 3s linear;
    z-index: -1;
    left: 50%;
    top: 50%;
    z-index:1;
}

@keyframes farewell-fx-animation {
    from {
        transform: translate(-50%, -50%) scale(0.125,0.125)
    }

    to {
        transform: translate(-50%, -50%) scale(1.5,1.5)
    }
}

.farewell-logo {
    position: absolute;
    width: 80%;
    height: 80%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) scale(100%,100%);
    filter: drop-shadow(0px 0px 20px rgba(255,255,255, 0.5));
    pointer-events: none;
    /*mix-blend-mode: hard-light;*/
}

.farewell-spotlight-group {
    position: absolute;
    transform: rotate(0deg);
    left: 50%;
    top: 50%;
}


.farewell-spotlight {
    /* compute each spotlight’s angle */
    --angle: calc(var(--i) * 1turn / 11);
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0px 0px 40px 20px rgba(255,255,255, 1);
    animation: spotlight-animation 1.5s cubic-bezier(0.01, 0.06, 0.2, 1);
    background: rgba(255,255,255, 1);
    /* rotate around center, push outward by --spot-dist, then center the div */
    transform: rotate(var(--angle)) translateY(calc(-1 * var(--spot-dist)))
}

@keyframes spotlight-animation {
    from {
        box-shadow: 0px 0px 40px 120px rgba(255,255,255, 1);
    }

    to {
        box-shadow: 0px 0px 40px 0px rgba(255,255,255, 1);
    }
}

.farewell-spotlight::before {
    content: '';
    position: absolute;
    width: 256px;
    height: 256px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: url('/img/flare.webp') no-repeat center/contain;
    pointer-events: none;
    mix-blend-mode: hard-light;
    transform: translate(-50%, -50%) rotate(calc(-1 * var(--angle))); /* counter-rotation */
}

/* assign each of the 11 divs an index i = 0…10 */
.farewell-spotlight:nth-child( 1) {
    --i: 0;
}

.farewell-spotlight:nth-child( 2) {
    --i: 1;
}

.farewell-spotlight:nth-child( 3) {
    --i: 2;
}

.farewell-spotlight:nth-child( 4) {
    --i: 3;
}

.farewell-spotlight:nth-child( 5) {
    --i: 4;
}

.farewell-spotlight:nth-child( 6) {
    --i: 5;
}

.farewell-spotlight:nth-child( 7) {
    --i: 6;
}

.farewell-spotlight:nth-child( 8) {
    --i: 7;
}

.farewell-spotlight:nth-child( 9) {
    --i: 8;
}

.farewell-spotlight:nth-child(10) {
    --i: 9;
}

.farewell-spotlight:nth-child(11) {
    --i: 10;
}

.matchReport {
    color: white;
    font-weight: bold;
    font-family: contestFont;
    text-align:center;
    height: 100%;
    
}

.hard-shadow {
    text-shadow: black 1px 0px 0px, black -1px 0px 0px, black 0px 1px 0px, black 0px -1px 0px, black 1px 1px 0px, black -1px -1px 0px, black 1px -1px 0px, black -1px 1px 0px, black -3px 2px 0px, black 1px -1px 0px, black -1px 1px 0px
}

.medium-shadow {
    text-shadow: #333333 1px 0px 0px, #333333 -1px 0px 0px, #333333 0px 1px 0px, #333333 0px -1px 0px, #333333 1px 1px 0px, #333333 -1px -1px 0px, #333333 1px -1px 0px, #333333 -1px 1px 0px, #333333 -3px 2px 0px, #333333 1px -1px 0px, #333333 -1px 1px 0px
}

.btn-match-option {
    flex: 0 0 auto; /* do not grow/shrink */
    
    padding: 5px; /* remove default button padding */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 4px; /* use 0 if you want strictly square corners */
}

.btn-match-option img {
    width: 25px;
    height: 25px;
    display: block;
}


#btnMatchVolume {
    background-color: rgba(0, 0, 255, 0.5);
}

#btnQuit {
    background-color: rgba(255, 0, 0, 0.5);
}

.contestDialog {
    background-color: white;
    max-width: 512px;
    width: 90%;
}

.groupMatchtDialogIcon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-right: 20px;
}

#divScoreboard {
    display: none;
}

#divScoreboardItems {
    max-height: 50vh;
    overflow: auto;
}

.scoreboard-picture {
    width: 80px;
    height: 80px;
    padding-right:10px;
}

.scoreboard-picture {
    width: 80px;
    height: 80px;
    padding-right: 10px;
}

#tblScoreboardItems td {
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid lightgray
}

#tblScoreboardTimeLeft {
    margin: 5px;
    font-size: 9pt;
    text-align: center;
    width: 90%;
    border-spacing: 20px 0px;
    border-collapse: separate;
}

    #tblScoreboardTimeLeft td {
        width: 33%;
        background-color: rgba(0,0,0,0.6);
    }

#tblScoreboardTimeLeft tr:nth-child(1) td {
    padding-top: 10px;
}

#tblScoreboardTimeLeft tr:nth-child(2) td {
    padding-bottom: 10px;
}

#tblPlayoffReport {
    color: white;
    font-weight: normal;
    font-size: 16pt;
}

.groupmatch-invite-link-display {
    color:blue;
    font-weight:bold;
}

#txtGroupMatchCode {
    font-size: 40pt;
    text-align: center;
}

#divWaitingGroupMatchPlayerUI {
    font-size:large;
}

#divWaitingGroupMatchPlayerUI_icon {
    width: 256px;
    height: 256px;
}


/* Group Match: */
#gm-divChartContainer {
    position: relative; /* needed for layout calculations */
    width: 100%;
}

/* Each row is normal flow (not absolute). We'll animate vertical movement with transforms. */
.gm-race-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    box-sizing: border-box;
    height: 56px; /* fixed height simplifies layout and calculations */
    will-change: transform, opacity;
    background: transparent;
}

.gm-bar {
    max-width: 200px;
}

/* bar area grows/shrinks horizontally */
.gm-bar-wrap {
    flex: 1 1 auto;
    min-width: 120px;
    max-width: 400px; /* <- adjust this value */
    position: relative;
    height: 40px;
    background: rgba(255,255,255,0.25);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* the colored bar that changes width */
.gm-bar-inner {
    height: 100%;
    min-width: 100px;
    width: 0%;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* score sits to the right */
    padding-right: 10px;
    box-sizing: border-box;
    border-radius: 8px;
    color: #111;
    font-weight: 700;
    -webkit-font-smoothing: antialiased;
}

/* picture slot next to the bar */
.gm-pic-slot {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    overflow: hidden;
    background: #ddd;
}

/* name sits to the right of picture */
.gm-player-name {
    min-width: 120px;
    flex: 0 0 auto;
    font-weight: 600;
    color:white;
}

/* small delta badge on the rightmost area (optional) */
.gm-round-badge {
    width: 56px;
    flex: 0 0 56px;
    text-align: right;
    font-weight: 600;
    color: white;
}

/* position badge (white, 50% opacity) sits on top-left of the bar */
.gm-position-badge {
    position: absolute;
    left: 8px; /* pad from the left edge of the bar */
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.5); /* white with 50% opacity */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    pointer-events: none; /* allow clicks to pass through */
    box-sizing: border-box;
    z-index: 5; /* on top of the bar */
}

/* the number inside the badge */
.gm-position-number {
    font-weight: 700;
    color: #000; /* black number */
    font-size: 16px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.gm-row-highlight {
    border: solid yellow 4px;
}


/**** START ENTER JOIN CODE ****/

/* Ensure the container allows absolutely-positioned children */
#divGuestCharacters {
    position: relative; /* needed so the video can be positioned relative to this element */
    overflow: hidden; /* hide any overflow from the video */
    min-height: 320px; /* example min height — change as needed */
    display: flex;
    align-items: center; /* center menu vertically */
}

/* background character: full area, behind everything, scales to cover */
.bgGuestCharacter {
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    width: 100%;
    height: 100%;
    object-fit: cover; /* keeps aspect, fills container (cropping allowed) */
    z-index: 0; /* behind everything */
    pointer-events: none; /* let clicks through to UI elements */
    display: block;
}

/* The guest-menu that takes 33% of the available width of #divGuestCharacters */
.guest-menu {
    width: 33%; /* <-- requested width */
    max-width: 700px; /* optional cap so it doesn't get enormous on huge screens */
    min-width: 110px; /* optional floor so buttons don't collapse too small */
    margin-left: 2rem; /* move it away from left edge (adjust as you like) */
    z-index: 2; /* sits above the video */
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* two columns */
    gap: 0.75rem; /* spacing between squares */
    align-items: center;
}

/* square buttons:
             aspect-ratio keeps them 1:1 (square). If browser doesn't support aspect-ratio,
             they will still have a min-height to remain usable. */
.guest-menu-btn {
    width: 100%; /* fill grid cell width */
    aspect-ratio: 1 / 1; /* makes each cell a square */
    display: inline-grid;
    place-items: center;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    background: rgba(255,255,255, 1);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    padding: 0; /* allowed because content is centered */
}

    .guest-menu-btn:active {
        transform: translateY(1px);
    }

    .guest-menu-btn:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 18px rgba(0,0,0,0.25);
    }

    .guest-menu-btn svg {
        max-width: 85%; /* keep some padding inside the square */
        max-height: 85%;
        object-fit: contain;
        pointer-events: none; /* don’t block button clicks */
    }

/* Responsive: on small screens, make the guest-menu a bit narrower (or full width if you prefer) */
@media (max-width: 520px) {
    .guest-menu {
        width: 45%;
        margin-left: 1rem;
        gap: 0.5rem;
    }

    #divGuestCharacters {
        min-height: 260px;
    }
}
/**** END ENTER JOIN CODE ****/

#divGMReportLeaderboardContainer {
    overflow: auto;
    max-height: 40%;
}

.unlocked-imgs-result {
    width: 100%;
    font-weight: normal;
    font-size:larger;
    text-align:center;
}

.unlocked-imgs-result h5 {
    display:inline;
    font-size: 1.15rem;
}

.unlocked-imgs-result table {
    display:inline-block;
    font-size:smaller;
    margin-left:5px;
}

.unlocked-imgs-result div {
    margin-top:5px;
}

.unlocked-imgs-result img {
    margin: 2px;
    border: solid white 3px;
    filter: drop-shadow(-4px 4px 5px rgba(0,0,0, 0.25));
    height:64px;
    width: 64px;
    object-fit: cover;
}

.unlocked-verse-text-preview {
    height:125px;
}

#btnUnlockHelp {
    font-size: small;
    margin-left: 5px;
    padding: 5px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.post-game-song {
    width: 100%;
    font-weight: normal;
    font-size: larger;
    text-align: center;
}

.post-game-song svg {
    width: 80px;
    height: 80px;
}

.music-player {
    display:none;
    color: white;
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.music-player-playing-now {
    color: white;
    font-size: small;
    font-weight: normal;
    z-index: 3;
    position: relative;
}

.music-title {
    color: white;
    font-weight: normal;
    z-index: 3;
    position: relative;
}

.cover-wrapper {
    position: relative;
    width: 80px; /* cover size */
    height: 80px;
}

/* Front image (album cover) */
.song-cover {
    position: relative;
    z-index: 2;
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
}

/* CD behind, half-visible on the right */
.song-cover-cd {
    position: absolute;
    top: 7px;
    left: 50%; /* push half out */
    width: 80px;
    height: 80px;
    z-index: 0;
    animation: spinCD 12s linear infinite;
}

@keyframes spinCD {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.music-player .btn-volume {
    width: 25px;
    height: 25px;
    display: inline-block;
}

.music-player .btn-volume img {
    width: 15px;
    height: 15px;
}

.music-player-now {
    display: flex;
    align-items: center; /* vertical alignment */
    gap: 8px; /* space between span and button */
}