body {
    overflow: hidden;
}
#host::before {
    content: "";
    position: fixed;
    width: 300%;
    height: 300%;
    top: -100%;
    left: -100%;
    z-index: 0;
    opacity: .04;
    background: url("../../asset/repeatingBg.png") 0 0 repeat;
    transform: rotate(-30deg);
    /* animation: bgmove 10s linear infinite forwards; */
}
#tutorialHighlight {
    position: absolute;
    outline: 100vw solid rgba(0,0,0,.75);
    /* left: 50%;
    top: 50%;
    width: 50vw;
    height: 50vh; */
    background-color: transparent;
    opacity: 0;
    user-select: none;
    pointer-events: none;
    z-index: 9;
    /* transition: opacity 500ms; */
    transition-duration: 500ms;
}
#tutorialHighlight[show] {
    opacity: 1;
}
#tutorialBox {
    position: absolute;
    display: none;
    flex-direction: column;
    gap:5px;
    background-color: var(--background);
    z-index: 10;
    color:var(--text);
    border-radius: 5px;
}
#tutorialBox[show] {
    display: flex;
}
#host_preperation {
    position: absolute;
    left: 0;
    top: 0;
    --other: hsl(from var(--background) h s calc(l + 5));
    background-image: linear-gradient(var(--other), var(--background));
    background-size: contain;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    overflow:hidden;
    z-index: 2;

    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 4rem;
    gap:1rem;
}
#host_preperation > * {
    flex:1;
}
#host_preperation[hide] {
    animation: fadeOut 1s ease-in-out forwards;
}
.hostPresettings{
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    gap:10px;
}
#gamemodeBanner{
    /* width: 512px;
    height: 288px; */
    aspect-ratio: 16/9;
    background-color: black;
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    --mask: linear-gradient(to bottom, 
      rgba(0,0,0, 1) 0,   rgba(0,0,0, 1) 40%, 
      rgba(0,0,0, 0) 95%, rgba(0,0,0, 0) 0
    ) 100% 50% / 100% 100% repeat-x;
    -webkit-mask: var(--mask); 
    mask: var(--mask);
    margin-bottom: -1rem;
}
#gamemodeBanner > img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1;
}
.quickies {
    padding: 1rem;
    display: flex;
    gap:1rem;
}
.quickies > * {
    flex:1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:5px;
    padding: 1.25rem .5rem;
    text-align: center;
}
.quickies > * > i {
    font-size: 3rem;
}
.quickies > * > div i {
    font-size: 1rem !important;
}
@media only screen and (max-width: 1450px) {
    .quickies > * {
        font-size: .75rem;
    }
}
#playerReportDialog > .quickies > * {
    flex:1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:space-evenly;
    padding: 1.5rem .5rem;
    *:not(h1) {
        font-size: 1rem;
    }
    h1 {
        font-size: 2rem;
    }
    i {
        font-size: 3rem;
    }
}
.gamemodeDetails{
    display: flex;
    justify-content: space-between;
}
.gamemodeDetails .extras {
    display: flex;
    gap:.5rem;
    align-items: center;
    * {
        display: none;
        --glow-size:10px;
    }
    *[show] {
        display: unset;
    }
}
#gamemodeBanner:after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  pointer-events: none;
  width: 100%;
  height: 4em;
}
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
#host_preperation section {
    height: 90vh;
}
#host_preperation h1:not(#gamemodename) {
    font-size: 2.25rem;
}
#host_preperation h2 {
    font-size: 1.5rem;
}
#host_preperation h3 {
    font-size: 1.15rem;
}
#host_preperation input.input {
    text-align: left;
}
#gamemodename {
    font-size: 3rem;
}
.settingsContainer {
    text-align: left;
}
.settingsContainer h1 {
    padding: .5rem 0;
}
#sectex {
    display: none;
}
.setting[example] {
    display: none;
}
#settings {
    display: flex;
    flex-direction: column;
    gap:5px;
}
.sectioncontent {
    display: flex;
    flex-direction: column;
    gap:5px;
    padding: .25rem;
}
.everyoneWarning {
    color:black;
    margin-bottom: 5px;
}
.everyoneWarning[hide] {
    display: none;
}
#host_preperation .hostPresettings .container:not(.bkplusbanner) {
    background-color: transparent;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--container));
}
#host_preperation .hostPresettings #testingSection .container {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(255, 48, 48, 0.1)) !important;
}
@keyframes leave {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translateY(-50px);
    }
}
@keyframes enter {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

#codeAnimation {
    position: absolute;
    z-index: 3;
    --other: hsl(from var(--background) h s calc(l + 5));
    --other2: hsl(from var(--background) h s calc(l + 15));
    background-image: linear-gradient(var(--other), var(--other2));
    padding: 10px;
    border-radius: 10px;
    display: none;
    font-size: 2.25rem;
    transform: translate(-50%, -50%);
    width: 75vw;
    align-items: center;
    justify-content: center;
    border: 1px solid black;
    color: var(--text);

    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
#codeAnimation[enter] {
    display: flex;
    animation: codePreviewEnter 750ms ease-in-out forwards;
}
#codeAnimation[leave] {
    display: flex;
    animation: codePreviewLeave 2s ease-in-out forwards;
}
@keyframes codePreviewLeave {
    from {
        opacity: 1;
        rotate: -.5deg;
        left: 50%;
        top: 50%;
    }
    to {
        left: 50%;
        rotate: 0deg;
        top: 0;
        opacity: 0;
    }
    100% {
        display:none;
    }
}
@keyframes codePreviewEnter {
    from {
        rotate: 10deg;
        left:0;
        top: 0;
        scale: .5;
        opacity: .35;
    }
    to {
        opacity: 1;
        rotate: -.5deg;
        left: 50%;
        top: 50%;
        scale: 1;
    }
    
}
.codepreview {
    background-color: var(--container);
    padding: 15px 20px;
    border-radius: 5px;
    font-size: 2.75rem;
    margin: 10px;
}
#host {
    width: 100vw;
    /* height: max(100vh, 100%); */
    min-height: 100vh;
    height: fit-content;
    position: absolute;
    left: 0;
    top:0;
    --other: hsl(from var(--background) h s calc(l + 5));
    background-image: linear-gradient(var(--other), var(--background));
    color: var(--text);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
#top {
    position: absolute;
    left:50%;
    transform: translateX(-50%);
    top:5rem;
    width: 80vw;

    display: flex;
    align-items: center;
    flex-direction: column;
    gap:1rem;
}
#topcontent {
    padding: 2rem;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap:5px;
    background-color: var(--background);
}
.step {
    display: flex;
    gap:1rem;
    align-items: center;
    position: relative;
    align-self: center;
}
.step[first] {
    margin-top: 1rem;
    margin-bottom: .25rem;
}
.stepCircle {
    --size: 5rem;
    border-radius: 50%;
    width: var(--size);
    height: var(--size);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--size) - 3rem);
    background-color: var(--container);
}
.seperator{
    width: 5px;
    align-self: center;
    min-height: 3rem;
    background-color: var(--container);
    border-radius: 5px;
}
.stepcontent {
    display: flex;
    /* align-items: stretch; */
    align-items: center;
    font-size: 1.5rem;
    gap:5px;
}
.or {
    /* height: 100%; */
    margin: 0 1rem;
    display: flex;
    flex-direction: column;
    gap:5px;
    opacity: .5;
    align-items: center;
    align-self: stretch;
}
.orLine {
    flex:1;
    width: 3px;
    border-radius: 5px;
    background-color: rgba(255,255,255,.5);
}
#players {
    flex:1;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
}
.codeActions {
    display: flex;
    flex-direction: column;
    gap:5px;
    align-items: center;
}
.codeActions > div {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap:5px;
    justify-content: space-evenly;
}
#players {
    display:flex;
    gap:5px;
    flex:1;
    width: 100%;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-self: flex-start;
}
.player {
    display: flex;
    gap:5px;
    align-items: center;
    font-size: 1.5rem;
    padding: 1rem;
}
.playerbadges{
    display: flex;
    gap:5px;
}
#plrex {
    display: none;
}

.topbeginning{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.hostActions {
    display: flex;
    gap:5px;
    align-items: center;
}
#version {
    opacity: .5;
}
.playerCount {
    padding: 1.25rem 2rem;
    background-color: var(--background);
    font-size: 1.75rem;
    border-radius: 50rem;
}
#noplayers {
    opacity: .5;
    font-size: 1.25rem;
}
.actions > * {
    flex:1;
}
.autostartContainer{
    display: flex;
    gap:.75rem;
    align-items: center;
    font-size: 1.25rem;
}
#testingSection {
    display: none;
}
#testingSection[show] {
    display: unset;
}
.quickGameInfo {
    display: flex;
    gap:10px;
    align-items: center;
}
#debugModeIndicator {
    display: none;
    align-items: center;
    justify-content: center;
    padding: .75rem;
    /* aspect-ratio: 1/1; */
    width: 3rem;
    height: 3rem;
    background-color: rgba(255,0,0,.2);
    font-size: 1.75rem;
    border-radius: 50rem;
}
#debugModeIndicator[show] {
    display: flex;
}
.shareOptions {
    display: flex;
    flex-direction: column;
    gap:5px;
    padding: 1rem 0;
}
.shareOptions > * {
    cursor: pointer;
    transition-duration: 250ms;
    font-size: 1.25rem;
    /* padding: 1rem; */
}
.shareOptions > *:hover {
    background-color: rgba(var(--container-rgb), .1);
}
.player {
    position: relative;
}
.player > .playerActions {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap:5px;
    transition-duration: 250ms;
    background-color: var(--background);
    border-radius: 5px;
}
.player > .playerActions > * {
    font-size: 1.5rem;
    width: 3rem;
    height: 3rem;
}
.player > .playerActions > a > * {
    width: 100%;
    height: 100%;
    font-size: 1.5rem;
}
.player:hover > .playerActions {
    opacity: 1;
}
#addTestPlayer {
    display: none;
}
#addTestPlayer[show] {
    display: initial;
}
#autostart {
    display: none;
    gap:1rem;
    align-items: center;
    background-color: var(--background);
    font-size: 1.75rem;

    i.fa-clock {
        font-size: 2.5rem;
    }
}
#autostart[show] {
    display: flex;
}

#playerReport {
    display: none;
    position: absolute;
    left:0;
    top:0;
    width: 100vw;
    height: 100vh;

    #playerReport_username {
        font-size: .5rem;
    }
}
#playerReport {
    display: none;
}

#playerReportDialog {
    max-width: 90vw;
    width: 1190px;
    max-height: 80vh;
    overflow-y: auto;

    #playerReport__allCorrect {
        display: none;
    }
    #playerReport__allCorrect[show] {
        display: block;
    }
    #playerReport__understanding {
        font-style: italic;
        opacity: .5;
    }
    #playerReport__understanding[data] {
        font-style: normal;
        opacity: 1;
    }
    #playerReport__userDetails {
        text-decoration: none;
    }
    #playerReport__userDetails[disabled] {
        opacity: .5;
    }
    #playerReport__userDetails:not([disabled]):hover {
        cursor: pointer;
        /* transform: translateY(3px); */
        scale:0.95;
    }
    #playerReport__understanding {
        display: flex;
        gap:5px;
        align-items: center;
        justify-content: center;
    }
    .aiSummaryJoke {
        background-color: transparent;
        margin: 1rem 0;
        background-image: linear-gradient(
            135deg,
            rgba(var(--accent-rgb), .1),
            rgba(177, 94, 255, 0.1)
        );
    }
}
.questionResult {
    display: flex;
    gap: 5px;
    margin: 1rem;

    .kitImage {
        height: 100%;
        aspect-ratio: 1/1;
        flex: 0.25;
        min-height: 250px;
    }
    .questionDetails {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    .wrong,
    .right {
        font-size: 1.5rem;
        display: flex;
        gap: 1rem;
        align-items: center;
        flex: 1;
        i {
            font-size: 3rem;
        }
        .subtitle {
            display: flex;
            margin-bottom: 5px;
        }
    }
    .wrong {
        background-color: rgba(255, 0, 0, 0.1);
    }
    .right {
        background-color: rgba(0, 255, 0, 0.1);
    }
}
#questionResultEx {
    display: none;
}
#tsparticles canvas {
    pointer-events: none !important;
    user-select: none !important;
}
#hostingFeedback {
    width: 720px;
    max-width: 80%;
}


/************************************************************************  GAME  ************************************************************************/

#game {
    position: absolute;
    left:0;
    top:0;
    width: 100vw;
    height: 100vh;
    background-color: var(--background);
    z-index: 99;
}
#game:not([show]) {
    display: none;
}
#gamecontent {
    width: 100%;
    height: 100%;
    color: var(--text);
    /* padding: .5rem; */
    display: flex;
    flex-direction: column;
    /* gap:5px; */
}
#game .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--container);
    padding: .5rem;
}
@keyframes countdownSpin {
    0% {
        rotate: 0deg;
    }
    35% {
        rotate: 0deg;
    }
    50% {
        rotate: 45deg;
    }
    85% {
        rotate: 45deg;
    }
    100% {
        rotate: 90deg;
    }
}

#gamecontent #countdownScreen {
    z-index: 9;
    position: fixed;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    background-color: var(--background);
    display: none;
    align-items: center;
    justify-content: center;
}
#gamecontent #loadingScreen {
    z-index: 9;
    position: fixed;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    background-color: var(--background);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 8rem;
}
#gamecontent #loadingScreen[show] {
    display: flex;
}
#gamecontent #countdownScreen[show] {
    display: flex;
}
#gamecontent #countdownScreen[show] > .countdownBackground {
    /* position: absolute;
    left: 50%;
    top: 50%; */
    transform-origin: 50% 50%;
    width: 10rem;
    height: 10rem;
    background-color: rgba(var(--container-rgb), .1);
    border-radius: 5px;
    animation: countdownSpin 2s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes countdownPulse {
    0% {
        font-size: 5rem;
    }
    50% {
        font-size: 7.5rem;
    }
    100% {
        font-size: 5rem;
    }
}
#gamecontent #countdownScreen[show] > #countdownText {
    position: absolute;
    left:50%;
    top:50%;
    font-size: 5rem;
    transform: translate(-50%, -50%);
    animation: countdownPulse 1s infinite cubic-bezier(.67,-0.01,.34,.99);

}
#game * {
    box-sizing: border-box;
}
#gamecontent #questionPreview {
    transition-duration: 1s;
    position: absolute;
    left: 50%;
    top:50%;
    opacity: 0;
    font-size: 3.5rem;
    z-index: 9;
    /* background-color: var(--background); */
    padding: 2rem;
    width: 50vw;
    text-align: center;
    border-radius: 1rem;
    transform: translate(-50%, -30%);
    /* user-select: none; */
    pointer-events: none;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:5px;
}
#gamecontent #questionPreview[show] {
    transform: translate(-50%, -50%);
    opacity: 1;
    scale: 1;
}
#gamecontent .questionContainer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.25rem;
    flex: 1;
    transition-duration: 500ms;
}
#gamecontent .questionContainer::before {
    content: "";
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    background-image: url("../../asset/games/classic/classic_background.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    z-index: -1;
    opacity: 0.2;
}
#gamecontent #questionText {
    text-shadow: 0 0 16px #000000;
}
#gamecontent .imageView {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 9;
    pointer-events: none;
    opacity: 0;
    transition: opacity 500ms;

    #closeImageView, #closeReviewImage {
        position: absolute;
        right: 25px;
        top: 15px;
        font-size: 3rem;
        width: 5rem;
        height: 5rem;
        border: none;
    }
    #maximizedPicture, #reviewImage {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        max-width: 80%;
    }
}
#gamecontent .imageView[show] {
    opacity: 1;
    pointer-events: auto;
}
#gamecontent .questionContainer[inactive] {
    display: none;
}
#gamecontent .questionContainer .question {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 2;
}
#gamecontent .questionDetails {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
}
#gamecontent .questionActions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        width: 4rem;
        height: 4rem;
    }
}
#gamecontent #questionText {
    font-size: 6rem;
}
#gamecontent .questionContainer .questionTextContainer {
    background-color: var(--container);
    padding: 1rem;
    border-radius: 0.5rem;
    font-size: 2rem;
    flex: 0;
    text-align: center;
}
#gamecontent .questionContainer .answers {
    display: flex;
    flex: 1;
    gap: 0.5rem;

    .first {
        background-color: rgba(82, 157, 255, .75);
    }
    .sec {
        background-color: rgba(99, 255, 146, .75);

    }
    .third {
        background-color: rgba(222, 59, 255, .75);

    }
    .four {
        background-color: rgba(255, 54, 175, .75);
    }
}
#gamecontent .questionContainer .answers > * {
    flex: 1;
    background-color: var(--container);
    padding: 1rem;
    border-radius: 0.5rem;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    word-wrap: break-word;
    word-break: break-all;
    color:black;
    /* max-width: 50vw; */
}
#gamecontent .questionContainer > * {
    flex: 1;
}
#gamecontent .questionContainer .side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    scale: 1.25;
}
#gamecontent #questionTimer {
    position: relative;
    padding: 2rem;
    border-radius: 50%;
    /* aspect-ratio: 1/1; */

    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 3rem;
}
@keyframes fading {
    0% {
        opacity: 0.25;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0.25;
    }
}
#gamecontent #questionTimer::before {
    content: "\e29e";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) scale(2);
    opacity: 0.25;
    animation: fading 2s infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
#gamecontent .timerAndPlayers {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#gamecontent .imageContainer {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex: 1;
    gap: 1rem;
}
#gamecontent .totalAnsweredContainer {
    font-size: 1.75rem;
    text-align: center;
}
.kitImage {
    /* width: 512px;
    height: 288px; */
    aspect-ratio: 1/1;
    background-color: black;
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    height: 35vh;
    position: relative;
    cursor: pointer;

    .zoomIndicator {
        i {
            filter: drop-shadow(0px 0px 8px #000000);
        }

        position: absolute;
        bottom: 0.5rem;
        right: 1rem;
        font-size: 1.5rem;
        transition-duration: 500ms;
    }
}
.kitImage::after {
    -webkit-box-shadow: inset 0px 0px 24px 8px rgba(0, 0, 0, 0.75);
    box-shadow: inset 0px 0px 24px 8px rgba(0, 0, 0, 0.75);
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    opacity: 0;
    transition-duration: 500ms;
}
.kitImage:hover::after {
    opacity: 1;
}
.kitImage:hover {
    .zoomIndicator {
        font-size: 2rem;
    }
}
.kitImage[hide] {
    display: none;
}
.kitImage > img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1;
}
#gamecontent .peopleActions {
    display: flex;
    flex-direction: column;
    gap:.25rem;
}
#gamecontent .leaderboardContainer {
    display: flex;
    /* width: 100%;
    height: 100%; */
    flex:1;
    align-items: center;
    justify-content: center;
}
#gamecontent .leaderboardContainer[inactive] {
    display: none;
}
#gamecontent .leaderboardContainer .leaderboardCenter {
    flex:1;
    max-width: 60vw;
    position: relative;
}
#gamecontent .title {
    font-size: 3rem;
    text-align: center;
}
#gamecontent #leaderboardplayers {
    display: flex;
    gap:5px;
    flex-direction: column;
    margin: 1rem .25rem;
    max-height: 50vh;
    overflow-y: auto;
}
#gamecontent .leaderboardContainer .extraActions {
    display: flex;
    justify-content: space-around;
    opacity: .5;
    margin-top: .5rem;
    * {
        color: var(--text);
        text-decoration: none;
    }
    *:hover {
        text-decoration: underline;
    }
}
#gamecontent #leaderboardplayerex {
    display: none;
}
#gamecontent #leaderboardplayers .leaderboardplayer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    transition: order 1s ease-in-out forwards;

    .leaderboardplayerinfo {
        display: flex;
        align-items: center;
        gap:5px;
        p:not(.subtitle) {
            font-size: 1.75rem;   
        }
        p.subtitle {
            font-size: .8rem;
        }
    }
    .leaderboardplayerscore {
        display: flex;
        gap:5px;
        align-items: center;
        .leaderboardplayercurrentscore {
            font-size: 1.75rem;
        }
        .leaderboardplayercurrentadditionscore {
            opacity: .5;
        }
    }
}
#gamecontent .correctAnswerReveal {
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--background-rgb), .75);
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap:5px;
    opacity: 0;
    pointer-events: none;
    transition-duration: 500ms;


    .correctAnswer {
        font-size: 3rem;
        padding: 2rem 10rem;
        background-color: var(--container);
        border-radius: 1rem;
        scale: 0;
        transition-duration: 1s;
    }
    .correctAnswer[show] {
        scale:1;
    }
}
#gamecontent .correctAnswerReveal[show] {
    opacity: 1;
    pointer-events: unset;
}
#correctAnswerEx {
    display: none;
}
#gamecontent #peopleWhoAnswered {
    text-align: center;
}
#gamecontent #reviewAnswerPersonEx {
    display: none;
}
#gamecontent #reviewAnswerPeople {
    display: flex;
    flex-direction: column;
    gap:5px;
}
#gamecontent #reviewAnswerPeople > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.25rem;
    gap:10px;
}
#gamecontent #reviewAnswerPeople > div > div[info] {
    display: flex;
    align-items: center;
    gap:5px;
}
#gamecontent .questionChartContainer {
    width:60vw;
    height: 50vh;
}
#gamecontent #reviewAnswerPeople >div> div[score] {
    opacity: .5;
}
#gamecontent .questionAccuracyContainer {
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:5px;
}
#gamecontent .questionAccuracyTxt {
    font-size: 3rem;
    font-weight: bold;
}
.waitingPlr {
    display: flex;
    gap:5px;
    align-items: center;
}
#waitingPlrEx {
    display: none;
}
#peopleWhoHaventAnswered {
    display: flex;
    flex-direction: column;
    gap:5px;
    font-size: 1.25rem;
}
@keyframes placingEnter {
    from {
        top: 100%;
        opacity: 0;
    }
    to {
        top: 0;
        opacity: 1;
    }
}
@keyframes placingEnter {
    from {
        top: 100%;
        opacity: 0;
    }
    to {
        top: 0;
        opacity: 1;
    }
}
.standingsContainer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: var(--height);
    display: flex;
    padding: 1rem 3rem;
    gap: 1rem;
    align-items: flex-end;
    color: var(--text);
    -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
}
#kitName {
    text-align: center;
    font-size: 5rem;
    padding: 1rem 0;
}
.standingsContainer > * {
    flex: 0 1 33%;
    position: relative;
    top: 100%;
    opacity: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 5px;

    h1 {
        font-size: 3rem;
    }

    .placingProfile {
        position: relative;
        left: 50%;
        width: 75%;
        aspect-ratio: 1/1;
        transform: translateX(-50%);
        top: -3rem;
        margin-bottom: -3rem;
    }

    .placingNumber {
        --clr: grey;
        position: absolute;
        left: 0;
        top: 0;
        transform: translate(-50%, -50%);
        font-size: 2.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        p {
            z-index: 2;
        }
        i {
            position: absolute;
            font-size: 4.75rem;
            color: var(--clr);
        }
        filter: drop-shadow(5px 10px 10px #000000);
    }
}
.standingsContainer > *[show] {
    animation: placingEnter 1s forwards;
}
.standingsContainer > *[removed] {
    filter: grayscale();
}

.standingsContainer > .placefirst {
    order: 2;
    height: 95%;
    .placingNumber {
        --clr: yellow;
        p {
            color: black;
        }
    }
}
.standingsContainer > .placesecond {
    order: 1;
    height: 75%;

    .placingProfile {
        width: 55%;
    }
    .placingNumber {
        --clr: silver;
        p {
            color: black;
        }
    }
}
.standingsContainer > .placethird {
    order: 3;
    height: 50%;

    .placingProfile {
        width: 35%;
    }
    .placingNumber {
        --clr: brown;
    }
}
.spotlight {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9;
    background-image: radial-gradient(
        circle,
        transparent 160px,
        rgba(0, 0, 0, 0) 200px
    );
    opacity: 0;
    transition: opacity 500ms;
}

.scrollDownContainer {
    position: absolute;
    left: 0;
    bottom:0;
    width: 100vw;
    display: flex;
    padding: 1rem;
    font-size: 3rem;
    align-items: center;
    pointer-events: none;
    opacity: 0;
    justify-content: center;
    z-index: 9;
    transition: opacity 1s;
}

.scrollDownContainer[show] {
    opacity: 1;
}

.standingParentContainer {
    display: none;
}
.standingParentContainer[show] {
    display: block;
    position: relative;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}
.standingParentContainer[noscroll] {
    overflow: hidden !important;
}
.standingsParent {
    --height: 85vh;
    height: var(--height);
    pointer-events: none;
    position: relative;
}
.classDetails {
    padding: 2rem;
}
#questionReviewText {
    display: flex;
    gap:5px;
    justify-content: space-between;
    align-items: center;
}
#gamecontent #classAccuracyEndGame {
    --correct: 50%;
    --incorrect: calc(100% - var(--correct));
    width: calc(100% - 3rem);
    height: 75px;
    display: flex;
    position: relative;
    margin: 2rem 3rem;

    .correct {
        width: var(--correct);
        transition-duration: 500ms;
        height: 100%;
        background-color: green;
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
    }
    .incorrect {
        height: 100%;
        transition-duration: 500ms;

        width: var(--incorrect);
        background-color: red;
        border-top-right-radius: 50px;
        border-bottom-right-radius: 50px;
    }
    .circle {
        position: absolute;
        left: calc(var(--correct));
        transition-duration: 500ms;

        height: 110%;
        aspect-ratio: 1/1;
        transform: translate(-50%, -5%);
        background: var(--background);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        font-weight: bold;

        -webkit-box-shadow: 6px 0px 10px 0px rgba(0, 0, 0, 0.5),
            -6px 0px 10px 0px rgba(0, 0, 0, 0.5);
        box-shadow: 11px 0px 6px 0px rgba(0, 0, 0, 0.5),
            -6px 0px 10px 0px rgba(0, 0, 0, 0.5);
    }
}
#gamecontent #endGamePlayers {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
#gamecontent .endGamePlayer {
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    gap: 0.25rem;
    box-sizing: border-box;
    .playerAccuracyBar {
        --correct: 50%;
        --incorrect: calc(100% - var(--correct));
        --border-radius: 5px;
        flex: 1;
        height: 25px;
        display: flex;
        position: relative;
        align-items: center;
        margin: 0 2rem;
        .correct {
            width: var(--correct);
            height: 100%;
            background-color: green;
            border-radius: var(--border-radius);
        }
        .incorrect {
            width: var(--incorrect);
            height: 100%;
            background-color: red;
            border-radius: var(--border-radius);
        }
        .circle {
            position: absolute;
            left: calc(var(--correct));
            transition-duration: 500ms;

            height: 50px;
            width: 50px;
            font-size: 0.75rem !important;
            aspect-ratio: 1/1;
            transform: translateX(-50%);
            background: var(--background);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: bold;

            -webkit-box-shadow: 6px 0px 10px 0px rgba(0, 0, 0, 0.5),
                 -6px 0px 10px 0px rgba(0, 0, 0, 0.5);
            box-shadow: 11px 0px 6px 0px rgba(0, 0, 0, 0.5),
                 -6px 0px 10px 0px rgba(0, 0, 0, 0.5);
        }
    }
}
#endGamePlrEx {
    display: none !important;
}
#correctAnswers {
    display: flex;
    flex-direction: column;
    gap:5px;
}