/* FONT */

@font-face {
    font-family: 'Gotham';
    src: url('/fonts/Gotham-Bold.otf') format('opentype'); /* Déclare le format comme OpenType */
    font-weight: bold;
    font-style: normal;
}


/* BUZZER UI */

#buzzerMount {
    background-color: #252525;
    width: 22rem;
    height: 22rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    border-radius: 15rem;
    box-shadow: inset 0 2px #585858, 1px 1px #000, 2px 2px 5px #000;
}

#base {
    background-color: #151515;
    width: 18rem;
    height: 18rem;
    margin-left: auto;
    margin-right: auto;
    top: 2rem;
    position: relative;
    border-radius: 13rem;
    box-shadow: 1px 1px #5d5d5d;
}



#buzzerButton {
    width: 17rem;
    height: 17rem;
    margin: 0;
    padding: 0;
    border: 0;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    cursor: pointer;
    top: -0.5rem;
    position: relative;
    background-image: linear-gradient(to top, #ff2d55 0%, red 57%);
    border-radius: 15rem;
    box-shadow: inset 0 2px #a8a8a8, 0 2px #2a2a2a, 0 3px #2a2a2a, 0 4px #2a2a2a, 0 5px #2a2a2a, 0 6px #2a2a2a, 0 7px #2a2a2a, 0 8px #2a2a2a,
        0 9px #2a2a2a, 0 10px #2a2a2a, 10px 20px 10px #000;
    transition: all 0.2s;
}

#buzzerButton:active {
    top: 0.5rem;
    box-shadow: inset 0 2px #a8a8a8;
}

#buzzerButton[data-disabled="true"] {
    transition: none;
    pointer-events: none;
    background-image: linear-gradient(to top, #a0a0a0 0%, gray 57%);
}

#buzzerButton.first {
    background-image: linear-gradient(to top, rgb(255, 222, 35) 0%, gold 57%);
}


/* #buzzerButton {
    width: 80vw;
    max-width: 300px;
    height: 80vw;
    max-height: 300px;
    border-radius: 50%;
    background-color: #e60000;
    border: none;
    position: relative;
    display: inline-block;
    overflow: hidden;
    text-indent: -9999px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.1s ease;
}

#buzzerButton:active {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

 */

.toast {
    max-width: 9999px !important;
}

.responsive-font {
    font-size: clamp(24px, 5vw, 40px);
}


/* ########## */
/* Player view */
/* ########## */

#player {
    /* background-image: url("/img/bg.png"); */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/img/bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100svh;
    font-family: 'Gotham', sans-serif;
    font-weight: bold;
}

#player #fullPageContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100vw;
}

#player #logo {
    width: 100%;
    height: auto;
    object-fit: contain;
}

#player #countdownContainer {
    height: 30svh;
    font-family: monospace;
    display: flex;
    justify-content: center;
    align-items: last baseline;
    padding: 15px;
}

#player .seconds {
    font-size: calc(1.625rem + 4.5vw); /* Responsive font ; Bootstrap display-1 */
}

#player .centiseconds {
    font-size: calc(1.475rem + 2.7vw); /* Responsive font ; Bootstrap display-4 */
}

#player #questionContainer {
    width: 100%;
    height: 50svh;
    padding: 0 3rem; /* Responsive padding ; Bootstrap px-5 */
}

#player #questionContainer #question {
    height: 75%;
    font-size: clamp(20px, 4vw, 40px);
    font-weight: bold;
    border: white 2px solid;
    border-radius: 2rem; /* Responsive border-radius ; Bootstrap rounded-5 */
    padding: 1rem; /* Responsive padding ; Bootstrap p-3 */
    padding: 1.5rem; /* Responsive padding ; Bootstrap p-4 */
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#player #questionContainer #question-category {
    height: 25%;
    padding: 1rem; /* Responsive padding ; Bootstrap p-3 */
    display: flex;
    align-items: top;
    justify-content: center;
    font-size: calc(1.3rem + 0.6vw) !important; /* Responsive font ; Bootstrap fs-3 */
    font-weight: bold;
    color: #ffc107; /* Bootstrap yellow/warning */
}

#player #scoreContainer {
    height: 20svh;
    padding: 1rem; /* Responsive padding ; Bootstrap p-3 */
}

#player #scoreContainer .teamArea {
    flex: 0 0 auto;
    width: 50%; /* Responsive width ; Bootstrap col-6 */
    font-weight: bold !important;
    display: flex;
    justify-content: center;
    align-items: last baseline;
}

#player #scoreContainer .teamName {
    font-size: calc(1.3rem + 0.6vw) !important; /* Responsive font ; Bootstrap fs-3 */
    margin: 0 1.5rem; /* Responsive padding ; Bootstrap px-4 */
}

#player #scoreContainer .teamScore {
    font-size: calc(1.375rem + 1.5vw) !important; /* Responsive font ; Bootstrap fs-1 */
    font-size: calc(1.475rem + 2.7vw) !important; /* Responsive font ; Bootstrap display-4 */
    color: #ffc107; /* Bootstrap yellow/warning */
}

#player #scoreContainer #teamB .teamName {
    order: 1;
}

#player #scoreContainer #teamB .teamScore {
    order: 0;
}

#player #pseudoInput {
    max-width: 400px;
}

/* ########## */
/* Real view */
/* ########## */

#realCountdown {
    font-family: monospace;
    font-size: calc(1.3rem + 0.6vw) !important; /* Responsive font ; Bootstrap fs-3 */
}

/* ########## */
/* Set view */
/* ########## */

#player.set #questionContainer #question {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#player.set .displayCategory {
    font-size: calc(1.3rem + 0.6vw) !important;     /* Responsive font ; Bootstrap fs-3 */
    font-size: calc(1.275rem + .3vw)!important;     /* Responsive font ; Bootstrap fs-4 */
}