body {
    background-color: #000;
}

html,
body {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

#wrapper {
    overflow: hidden;
}

#loading {
    display: table;
    margin: auto;
    position: absolute;
    text-align: center;
    height: 100%;
    width: 100%;
    opacity: 0.9;
    background-color: #000;
    background-size: cover;
    z-index: 999;
}

#loadingText {
    display: table-cell;
    vertical-align: middle;
    color: #fff;
    font-size: 4vh;
    font-weight: bold;
}

#wrapper {
    height: 100vh;
    width: 100vw;
}

#gameBoardDiv {
    position: relative;
}

#gameBoard {
    object-fit: contain;
    object-position: 50% 0%;
    width: 100%;
    height: 100vh;
    z-index: 1;
}

.gameBoardLogo {
    position: absolute;
    right: 2.0%;
    bottom: 2.6%;
    width: clamp(120px, 10vw, 220px);
    height: auto;
    z-index: 3;
    opacity: 0.92;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7));
    pointer-events: none;
}

.gameBoardCopyright {
    position: absolute;
    left: 1.2%;
    bottom: 2.8%;
    z-index: 3;
    color: rgba(255, 255, 255, 0.72);
    font-size: clamp(18px, 1vw, 18px);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.75);
    pointer-events: none;
}

#date {
    position: absolute;
    top: 69.0%;
    left: 84.0%;
    z-index: 2;
    font-size: 58px;
    font-weight: bold;
    color: #f8b21b;
    -webkit-text-stroke: 1px #ffd978;
    text-shadow: 0 1px 0 #fff1b8, 0 2px 0 #d99500, 2px 4px 6px rgba(0, 0, 0, 0.45);
    transform: rotate(7deg);
    transform-origin: center center;
}

#nationalNews {
    position: absolute;
    height: auto !important;
    top: 16.5%;
    left: 19.4%;
    z-index: 2;
    -webkit-transition: transform 0.2s ease;
    -moz-transition: transform 0.2s ease;
    -o-transition: transform 0.2s ease;
    transition: transform 0.2s ease;
    transform-origin: center center;
}

    #nationalNews:hover {
        transform: scale(1.22);
        z-index: 3;
    }

#worldNews {
    position: absolute;
    height: auto !important;
    top: 17.4%;
    left: 29.2%;
    z-index: 2;
    -webkit-transition: transform 0.2s ease;
    -moz-transition: transform 0.2s ease;
    -o-transition: transform 0.2s ease;
    transition: transform 0.2s ease;
    transform-origin: center center;
}

    #worldNews:hover {
        transform: scale(1.22);
        z-index: 3;
    }

#peoplePlacesThings {
    position: absolute;
    height: auto !important;
    top: 19.7%;
    left: 39.5%;
    z-index: 2;
    -webkit-transition: transform 0.2s ease;
    -moz-transition: transform 0.2s ease;
    -o-transition: transform 0.2s ease;
    transition: transform 0.2s ease;
    transform-origin: center center;
}

    #peoplePlacesThings:hover {
        transform: scale(1.5);
        z-index: 3;
    }

#familySociety {
    position: absolute;
    height: auto !important;
    top: 18.4%;
    left: 46.4%;
    z-index: 2;
    -webkit-transition: transform 0.2s ease;
    -moz-transition: transform 0.2s ease;
    -o-transition: transform 0.2s ease;
    transition: transform 0.2s ease;
    transform-origin: center center;
}

    #familySociety:hover {
        transform: scale(1.22);
        z-index: 3;
    }

#artsEntertainment {
    position: absolute;
    height: auto !important;
    top: 18.2%;
    left: 55.5%;
    z-index: 2;
    -webkit-transition: transform 0.2s ease;
    -moz-transition: transform 0.2s ease;
    -o-transition: transform 0.2s ease;
    transition: transform 0.2s ease;
    transform-origin: center center;
}

    #artsEntertainment:hover {
        transform: scale(1.22);
        z-index: 3;
    }

#sportsNews {
    position: absolute;
    height: auto !important;
    top: 17.5%;
    left: 64.1%;
    z-index: 2;
    -webkit-transition: transform 0.2s ease;
    -moz-transition: transform 0.2s ease;
    -o-transition: transform 0.2s ease;
    transition: transform 0.2s ease;
    transform-origin: center center;
}

    #sportsNews:hover {
        transform: scale(1.22);
        z-index: 3;
    }

#offTheWallNewz {
    position: absolute;
    height: auto !important;
    top: 16.6%;
    left: 72.0%;
    z-index: 2;
    -webkit-transition: transform 0.2s ease;
    -moz-transition: transform 0.2s ease;
    -o-transition: transform 0.2s ease;
    transition: transform 0.2s ease;
    transform-origin: center center;
}

    #offTheWallNewz:hover {
        transform: scale(1.22);
        z-index: 3;
    }

#nationalNews10, #nationalNews10Hover, #nationalNews10Complete {
    position: absolute;
    height: auto !important;
    top: 28.3%;
    left: 19.5%;
    z-index: 2;
}

.nationalNews10Card .img-back {
    display: none;
}

.nationalNews10Card:hover .img-back {
    display: inline;
    cursor: pointer;
}

#nationalNews20, #nationalNews20Hover, #nationalNews20Complete {
    position: absolute;
    height: auto !important;
    top: 38.3%;
    left: 19.5%;
    z-index: 2;
}

.nationalNews20Card .img-back {
    display: none;
}

.nationalNews20Card:hover .img-back {
    display: inline;
    cursor: pointer;
}

#nationalNews40, #nationalNews40Hover, #nationalNews40Complete {
    position: absolute;
    height: auto !important;
    top: 48.0%;
    left: 19.5%;
    z-index: 2;
}

.nationalNews40Card .img-back {
    display: none;
}

.nationalNews40Card:hover .img-back {
    display: inline;
    cursor: pointer;
}

#nationalNews80, #nationalNews80Hover, #nationalNews80Complete {
    position: absolute;
    height: auto !important;
    top: 57.5%;
    left: 19.5%;
    z-index: 2;
}

.nationalNews80Card .img-back {
    display: none;
}

.nationalNews80Card:hover .img-back {
    display: inline;
    cursor: pointer;
}

#nationalNewsBonus, #nationalNewsBonusHover, #nationalNewsBonusComplete {
    position: absolute;
    height: auto !important;
    top: 67.0%;
    left: 19.5%;
    z-index: 2;
}

.nationalNewsBonusCard .img-back {
    display: none;
}

.nationalNewsBonusCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#worldNews10, #worldNews10Hover, #worldNews10Complete {
    position: absolute;
    height: auto !important;
    top: 28.3%;
    left: 28.2%;
    z-index: 2;
}

.worldNews10Card .img-back {
    display: none;
}

.worldNews10Card:hover .img-back {
    display: inline;
    cursor: pointer;
}

#worldNews20, #worldNews20Hover, #worldNews20Complete {
    position: absolute;
    height: auto !important;
    top: 38.3%;
    left: 28.2%;
    z-index: 2;
}

.worldNews20Card .img-back {
    display: none;
}

.worldNews20Card:hover .img-back {
    display: inline;
    cursor: pointer;
}

#worldNews40, #worldNews40Hover, #worldNews40Complete {
    position: absolute;
    height: auto !important;
    top: 48.0%;
    left: 28.2%;
    z-index: 2;
}

.worldNews40Card .img-back {
    display: none;
}

.worldNews40Card:hover .img-back {
    display: inline;
    cursor: pointer;
}

#worldNews80, #worldNews80Hover, #worldNews80Complete {
    position: absolute;
    height: auto !important;
    top: 57.5%;
    left: 28.2%;
    z-index: 2;
}

.worldNews80Card .img-back {
    display: none;
}

.worldNews80Card:hover .img-back {
    display: inline;
    cursor: pointer;
}

#worldNewsBonus, #worldNewsBonusHover, #worldNewsBonusComplete {
    position: absolute;
    height: auto !important;
    top: 67.0%;
    left: 28.2%;
    z-index: 2;
}

.worldNewsBonusCard .img-back {
    display: none;
}

.worldNewsBonusCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#peoplePlacesThings10, #peoplePlacesThings10Hover, #peoplePlacesThings10Complete {
    position: absolute;
    height: auto !important;
    top: 28.3%;
    left: 36.9%;
    z-index: 2;
}

.peoplePlacesThings10Card .img-back {
    display: none;
}

.peoplePlacesThings10Card:hover .img-back {
    display: inline;
    cursor: pointer;
}

#peoplePlacesThings20, #peoplePlacesThings20Hover, #peoplePlacesThings20Complete {
    position: absolute;
    height: auto !important;
    top: 38.3%;
    left: 36.9%;
    z-index: 2;
}

.peoplePlacesThings20Card .img-back {
    display: none;
}

.peoplePlacesThings20Card:hover .img-back {
    display: inline;
    cursor: pointer;
}

#peoplePlacesThings40, #peoplePlacesThings40Hover, #peoplePlacesThings40Complete {
    position: absolute;
    height: auto !important;
    top: 48.0%;
    left: 36.9%;
    z-index: 2;
}

.peoplePlacesThings40Card .img-back {
    display: none;
}

.peoplePlacesThings40Card:hover .img-back {
    display: inline;
    cursor: pointer;
}

#peoplePlacesThings80, #peoplePlacesThings80Hover, #peoplePlacesThings80Complete {
    position: absolute;
    height: auto !important;
    top: 57.5%;
    left: 36.9%;
    z-index: 2;
}

.peoplePlacesThings80Card .img-back {
    display: none;
}

.peoplePlacesThings80Card:hover .img-back {
    display: inline;
    cursor: pointer;
}

#peoplePlacesThingsBonus, #peoplePlacesThingsBonusHover, #peoplePlacesThingsBonusComplete {
    position: absolute;
    height: auto !important;
    top: 67.0%;
    left: 36.9%;
    z-index: 2;
}

.peoplePlacesThingsBonusCard .img-back {
    display: none;
}

.peoplePlacesThingsBonusCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#familySociety10, #familySociety10Hover, #familySociety10Complete {
    position: absolute;
    height: auto !important;
    top: 28.3%;
    left: 45.6%;
    z-index: 2;
}

.familySociety10Card .img-back {
    display: none;
}

.familySociety10Card:hover .img-back {
    display: inline;
    cursor: pointer;
}

#familySociety20, #familySociety20Hover, #familySociety20Complete {
    position: absolute;
    height: auto !important;
    top: 38.3%;
    left: 45.6%;
    z-index: 2;
}

.familySociety20Card .img-back {
    display: none;
}

.familySociety20Card:hover .img-back {
    display: inline;
    cursor: pointer;
}

#familySociety40, #familySociety40Hover, #familySociety40Complete {
    position: absolute;
    height: auto !important;
    top: 48.0%;
    left: 45.6%;
    z-index: 2;
}

.familySociety40Card .img-back {
    display: none;
}

.familySociety40Card:hover .img-back {
    display: inline;
    cursor: pointer;
}

#familySociety80, #familySociety80Hover, #familySociety80Complete {
    position: absolute;
    height: auto !important;
    top: 57.5%;
    left: 45.6%;
    z-index: 2;
}

.familySociety80Card .img-back {
    display: none;
}

.familySociety80Card:hover .img-back {
    display: inline;
    cursor: pointer;
}

#familySocietyBonus, #familySocietyBonusHover, #familySocietyBonusComplete {
    position: absolute;
    height: auto !important;
    top: 67.0%;
    left: 45.6%;
    z-index: 2;
}

.familySocietyBonusCard .img-back {
    display: none;
}

.familySocietyBonusCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#artsEntertainment10, #artsEntertainment10Hover, #artsEntertainment10Complete {
    position: absolute;
    height: auto !important;
    top: 28.3%;
    left: 54.3%;
    z-index: 2;
}

.artsEntertainment10Card .img-back {
    display: none;
}

.artsEntertainment10Card:hover .img-back {
    display: inline;
    cursor: pointer;
}

#artsEntertainment20, #artsEntertainment20Hover, #artsEntertainment20Complete {
    position: absolute;
    height: auto !important;
    top: 38.3%;
    left: 54.3%;
    z-index: 2;
}

.artsEntertainment20Card .img-back {
    display: none;
}

.artsEntertainment20Card:hover .img-back {
    display: inline;
    cursor: pointer;
}

#artsEntertainment40, #artsEntertainment40Hover, #artsEntertainment40Complete {
    position: absolute;
    height: auto !important;
    top: 48.0%;
    left: 54.3%;
    z-index: 2;
}

.artsEntertainment40Card .img-back {
    display: none;
}

.artsEntertainment40Card:hover .img-back {
    display: inline;
    cursor: pointer;
}

#artsEntertainment80, #artsEntertainment80Hover, #artsEntertainment80Complete {
    position: absolute;
    height: auto !important;
    top: 57.5%;
    left: 54.3%;
    z-index: 2;
}

.artsEntertainment80Card .img-back {
    display: none;
}

.artsEntertainment80Card:hover .img-back {
    display: inline;
    cursor: pointer;
}

#artsEntertainmentBonus, #artsEntertainmentBonusHover, #artsEntertainmentBonusComplete {
    position: absolute;
    height: auto !important;
    top: 67.0%;
    left: 54.3%;
    z-index: 2;
}

.artsEntertainmentBonusCard .img-back {
    display: none;
}

.artsEntertainmentBonusCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#sportsNews10, #sportsNews10Hover, #sportsNews10Complete {
    position: absolute;
    height: auto !important;
    top: 28.3%;
    left: 63.0%;
    z-index: 2;
}

.sportsNews10Card .img-back {
    display: none;
}

.sportsNews10Card:hover .img-back {
    display: inline;
    cursor: pointer;
}

#sportsNews20, #sportsNews20Hover, #sportsNews20Complete {
    position: absolute;
    height: auto !important;
    top: 38.3%;
    left: 63.0%;
    z-index: 2;
}

.sportsNews20Card .img-back {
    display: none;
}

.sportsNews20Card:hover .img-back {
    display: inline;
    cursor: pointer;
}

#sportsNews40, #sportsNews40Hover, #sportsNews40Complete {
    position: absolute;
    height: auto !important;
    top: 48.0%;
    left: 63.0%;
    z-index: 2;
}

.sportsNews40Card .img-back {
    display: none;
}

.sportsNews40Card:hover .img-back {
    display: inline;
    cursor: pointer;
}

#sportsNews80, #sportsNews80Hover, #sportsNews80Complete {
    position: absolute;
    height: auto !important;
    top: 57.5%;
    left: 63.0%;
    z-index: 2;
}

.sportsNews80Card .img-back {
    display: none;
}

.sportsNews80Card:hover .img-back {
    display: inline;
    cursor: pointer;
}

#sportsNewsBonus, #sportsNewsBonusHover, #sportsNewsBonusComplete {
    position: absolute;
    height: auto !important;
    top: 67.0%;
    left: 63.0%;
    z-index: 2;
}

.sportsNewsBonusCard .img-back {
    display: none;
}

.sportsNewsBonusCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#offTheWallNewz10, #offTheWallNewz10Hover, #offTheWallNewz10Complete {
    position: absolute;
    height: auto !important;
    top: 28.3%;
    left: 71.7%;
    z-index: 2;
}

.offTheWallNewz10Card .img-back {
    display: none;
}

.offTheWallNewz10Card:hover .img-back {
    display: inline;
    cursor: pointer;
}

#offTheWallNewz20, #offTheWallNewz20Hover, #offTheWallNewz20Complete {
    position: absolute;
    height: auto !important;
    top: 38.3%;
    left: 71.7%;
    z-index: 2;
}

.offTheWallNewz20Card .img-back {
    display: none;
}

.offTheWallNewz20Card:hover .img-back {
    display: inline;
    cursor: pointer;
}

#offTheWallNewz40, #offTheWallNewz40Hover, #offTheWallNewz40Complete {
    position: absolute;
    height: auto !important;
    top: 48.0%;
    left: 71.7%;
    z-index: 2;
}

.offTheWallNewz40Card .img-back {
    display: none;
}

.offTheWallNewz40Card:hover .img-back {
    display: inline;
    cursor: pointer;
}

#offTheWallNewz80, #offTheWallNewz80Hover, #offTheWallNewz80Complete {
    position: absolute;
    height: auto !important;
    top: 57.5%;
    left: 71.7%;
    z-index: 2;
}

.offTheWallNewz80Card .img-back {
    display: none;
}

.offTheWallNewz80Card:hover .img-back {
    display: inline;
    cursor: pointer;
}

#offTheWallNewzBonus, #offTheWallNewzBonusHover, #offTheWallNewzBonusComplete {
    position: absolute;
    height: auto !important;
    top: 67.0%;
    left: 71.7%;
    z-index: 2;
}

.offTheWallNewzBonusCard .img-back {
    display: none;
}

.offTheWallNewzBonusCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

.backgroundPopup {
    display: none;
    position: absolute;
    height: auto !important;
    top: 0%;
    left: 0%;
    z-index: 4;
}

.backgroundPopup.game-board-exit--warp-away {
    animation: questionPageExitWarpAway 980ms cubic-bezier(0.55, 0.02, 0.86, 0.22) both;
}

.backgroundPopup.game-board-exit--trapdoor-drop {
    animation: questionPageExitTrapdoorDrop 920ms cubic-bezier(0.55, 0.04, 0.86, 0.2) both;
}

.backgroundPopup.game-board-exit--side-kick {
    animation: questionPageExitSideKick 880ms cubic-bezier(0.48, 0.02, 0.82, 0.24) both;
}

.backgroundPopup.game-board-exit--pinwheel-blast {
    animation: questionPageExitPinwheelBlast 1080ms cubic-bezier(0.52, 0.03, 0.84, 0.22) both;
}

.backgroundPopup.game-board-exit--rocket-up {
    animation: questionPageExitRocketUp 860ms cubic-bezier(0.5, 0.02, 0.84, 0.18) both;
}

.backgroundPopup.game-board-exit--snap-back {
    animation: questionPageExitSnapBack 760ms cubic-bezier(0.6, 0.01, 0.86, 0.18) both;
}

.backgroundPopup.game-board-exit--spiral-sink {
    animation: questionPageExitSpiralSink 1020ms cubic-bezier(0.52, 0.04, 0.84, 0.22) both;
}

.backgroundPopup.game-board-exit--screen-punch {
    animation: questionPageExitScreenPunch 900ms cubic-bezier(0.58, 0.02, 0.84, 0.18) both;
}

.backgroundPopup.game-board-exit--whip-right {
    animation: questionPageExitWhipRight 820ms cubic-bezier(0.58, 0.02, 0.88, 0.2) both;
}

.backgroundPopup.game-board-exit--black-hole {
    animation: questionPageExitBlackHole 1140ms cubic-bezier(0.56, 0.03, 0.84, 0.2) both;
}

#questionPage {
    transform-origin: 50% 55%;
    will-change: transform, opacity, filter;
}

#questionPage.question-page-reveal--lift, .backgroundPopup.question-page-reveal--lift {
    animation: questionPageRevealLift 1200ms  cubic-bezier(0.18, 0.8, 0.22, 1) both;
}

#questionPage.question-page-reveal--tilt-pop, .backgroundPopup.question-page-reveal--tilt-pop {
    animation: questionPageRevealTiltPop 1280ms cubic-bezier(0.16, 0.84, 0.24, 1) both;
}

#questionPage.question-page-reveal--flip-in, .backgroundPopup.question-page-reveal--flip-in {
    animation: questionPageRevealFlipIn 1360ms cubic-bezier(0.2, 0.85, 0.24, 1) both;
}

#questionPage.question-page-reveal--fly-tilt, .backgroundPopup.question-page-reveal--fly-tilt {
    animation: questionPageRevealFlyTilt 1480ms cubic-bezier(0.16, 0.84, 0.24, 1) both;
}

#questionPage.question-page-reveal--rocket-blast, .backgroundPopup.question-page-reveal--rocket-blast {
    animation: questionPageRevealRocketBlast 1380ms cubic-bezier(0.1, 0.86, 0.22, 1) both;
}

#questionPage.question-page-reveal--barrel-roll, .backgroundPopup.question-page-reveal--barrel-roll {
    animation: questionPageRevealBarrelRoll 1500ms cubic-bezier(0.14, 0.82, 0.22, 1) both;
}

#questionPage.question-page-reveal--slam-zoom, .backgroundPopup.question-page-reveal--slam-zoom {
    animation: questionPageRevealSlamZoom 1180ms cubic-bezier(0.08, 0.78, 0.22, 1) both;
}

#questionPage.question-page-reveal--side-swoop, .backgroundPopup.question-page-reveal--side-swoop {
    animation: questionPageRevealSideSwoop 1320ms cubic-bezier(0.12, 0.84, 0.2, 1) both;
}

#questionPage.question-page-reveal--bounce-spin, .backgroundPopup.question-page-reveal--bounce-spin {
    animation: questionPageRevealBounceSpin 1420ms cubic-bezier(0.16, 0.82, 0.2, 1) both;
}

#questionPage.question-page-reveal--hyperspace, .backgroundPopup.question-page-reveal--hyperspace {
    animation: questionPageRevealHyperspace 1520ms cubic-bezier(0.1, 0.88, 0.22, 1) both;
}

#questionPage.question-page-exit--warp-away {
    animation: questionPageExitWarpAway 980ms cubic-bezier(0.55, 0.02, 0.86, 0.22) both;
}

#questionPage.question-page-exit--trapdoor-drop {
    animation: questionPageExitTrapdoorDrop 920ms cubic-bezier(0.55, 0.04, 0.86, 0.2) both;
}

#questionPage.question-page-exit--side-kick {
    animation: questionPageExitSideKick 880ms cubic-bezier(0.48, 0.02, 0.82, 0.24) both;
}

#questionPage.question-page-exit--pinwheel-blast {
    animation: questionPageExitPinwheelBlast 1080ms cubic-bezier(0.52, 0.03, 0.84, 0.22) both;
}

#questionPage.question-page-exit--rocket-up {
    animation: questionPageExitRocketUp 860ms cubic-bezier(0.5, 0.02, 0.84, 0.18) both;
}

#questionPage.question-page-exit--snap-back {
    animation: questionPageExitSnapBack 760ms cubic-bezier(0.6, 0.01, 0.86, 0.18) both;
}

#questionPage.question-page-exit--spiral-sink {
    animation: questionPageExitSpiralSink 1020ms cubic-bezier(0.52, 0.04, 0.84, 0.22) both;
}

#questionPage.question-page-exit--screen-punch {
    animation: questionPageExitScreenPunch 900ms cubic-bezier(0.58, 0.02, 0.84, 0.18) both;
}

#questionPage.question-page-exit--whip-right {
    animation: questionPageExitWhipRight 820ms cubic-bezier(0.58, 0.02, 0.88, 0.2) both;
}

#questionPage.question-page-exit--black-hole {
    animation: questionPageExitBlackHole 1140ms cubic-bezier(0.56, 0.03, 0.84, 0.2) both;
}

@keyframes questionPageRevealLift {
    0% {
        opacity: 0;
        transform: perspective(1800px) scale(0.62) translateY(110px);
        filter: blur(14px);
    }

    55% {
        opacity: 1;
        transform: perspective(1800px) scale(1.06) translateY(-12px);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
}

@keyframes questionPageRevealTiltPop {
    0% {
        opacity: 0;
        transform: perspective(1800px) rotateX(18deg) rotateY(-16deg) scale(0.58) translateY(92px);
        filter: blur(14px);
    }

    60% {
        opacity: 1;
        transform: perspective(1800px) rotateX(-5deg) rotateY(4deg) scale(1.05) translateY(-10px);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: perspective(1600px) rotateX(0deg) rotateY(0deg) scale(1) translateY(0);
        filter: blur(0);
    }
}

@keyframes questionPageRevealFlipIn {
    0% {
        opacity: 0;
        transform: perspective(1900px) rotateY(-32deg) rotateZ(-5deg) scale(0.55) translateX(-120px);
        filter: blur(14px);
    }

    55% {
        opacity: 1;
        transform: perspective(1900px) rotateY(7deg) rotateZ(1deg) scale(1.04) translateX(10px);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: perspective(1700px) rotateY(0deg) scale(1) translateX(0);
        filter: blur(0);
    }
}

@keyframes questionPageRevealFlyTilt {
    0% {
        opacity: 0;
        transform: perspective(2100px) rotateX(22deg) rotateY(-24deg) scale(0.32) translateY(170px) translateX(-80px);
        filter: blur(18px);
    }

    62% {
        opacity: 1;
        transform: perspective(2100px) rotateX(-6deg) rotateY(8deg) scale(1.06) translateY(-14px) translateX(12px);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: perspective(1900px) rotateX(0deg) rotateY(0deg) scale(1) translateY(0) translateX(0);
        filter: blur(0);
    }
}

@keyframes questionPageRevealRocketBlast {
    0% {
        opacity: 0;
        transform: perspective(2200px) rotateX(22deg) rotateY(-12deg) scale(0.28) translateY(180px);
        filter: blur(18px);
    }

    58% {
        opacity: 1;
        transform: perspective(2200px) rotateX(-6deg) rotateY(3deg) scale(1.06) translateY(-14px);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: perspective(2200px) rotateX(0deg) rotateY(0deg) scale(1) translateY(0);
        filter: blur(0);
    }
}

@keyframes questionPageRevealBarrelRoll {
    0% {
        opacity: 0;
        transform: perspective(2000px) rotateZ(-26deg) rotateY(-28deg) scale(0.5) translateX(-120px) translateY(60px);
        filter: blur(14px);
    }

    65% {
        opacity: 1;
        transform: perspective(2000px) rotateZ(6deg) rotateY(8deg) scale(1.03) translateX(10px) translateY(-6px);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: perspective(2000px) rotateZ(0deg) rotateY(0deg) scale(1) translateX(0) translateY(0);
        filter: blur(0);
    }
}

@keyframes questionPageRevealSlamZoom {
    0% {
        opacity: 0;
        transform: perspective(1800px) scale(0.18) translateY(-160px);
        filter: blur(20px);
    }

    48% {
        opacity: 1;
        transform: perspective(1800px) scale(1.12) translateY(12px);
        filter: blur(0);
    }

    72% {
        transform: perspective(1800px) scale(0.97) translateY(-5px);
    }

    100% {
        opacity: 1;
        transform: perspective(1800px) scale(1) translateY(0);
        filter: blur(0);
    }
}

@keyframes questionPageRevealSideSwoop {
    0% {
        opacity: 0;
        transform: perspective(2100px) rotateY(24deg) rotateZ(-8deg) scale(0.62) translateX(220px);
        filter: blur(14px);
    }

    60% {
        opacity: 1;
        transform: perspective(2100px) rotateY(-5deg) rotateZ(2deg) scale(1.03) translateX(-10px);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: perspective(2100px) rotateY(0deg) rotateZ(0deg) scale(1) translateX(0);
        filter: blur(0);
    }
}

@keyframes questionPageRevealBounceSpin {
    0% {
        opacity: 0;
        transform: perspective(1900px) rotateZ(18deg) scale(0.4) translateY(120px);
        filter: blur(16px);
    }

    52% {
        opacity: 1;
        transform: perspective(1900px) rotateZ(-10deg) scale(1.08) translateY(-16px);
        filter: blur(0);
    }

    74% {
        transform: perspective(1900px) rotateZ(4deg) scale(0.98) translateY(6px);
    }

    100% {
        opacity: 1;
        transform: perspective(1900px) rotateZ(0deg) scale(1) translateY(0);
        filter: blur(0);
    }
}

@keyframes questionPageRevealHyperspace {
    0% {
        opacity: 0;
        transform: perspective(2400px) rotateX(28deg) rotateY(-24deg) scale(0.12) translateZ(-900px);
        filter: blur(22px);
    }

    62% {
        opacity: 1;
        transform: perspective(2400px) rotateX(-5deg) rotateY(7deg) scale(1.05) translateZ(0);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: perspective(2400px) rotateX(0deg) rotateY(0deg) scale(1) translateZ(0);
        filter: blur(0);
    }
}

@keyframes questionPageExitWarpAway {
    0% {
        opacity: 1;
        transform: perspective(2200px) scale(1) rotateX(0deg) rotateY(0deg);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: perspective(2200px) scale(0.16) rotateX(-26deg) rotateY(24deg) translateZ(-900px);
        filter: blur(18px);
    }
}

@keyframes questionPageExitTrapdoorDrop {
    0% {
        opacity: 1;
        transform: perspective(2000px) rotateX(0deg) translateY(0);
        transform-origin: 50% 0%;
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: perspective(2000px) rotateX(84deg) translateY(240px) scale(0.72);
        transform-origin: 50% 0%;
        filter: blur(10px);
    }
}

@keyframes questionPageExitSideKick {
    0% {
        opacity: 1;
        transform: perspective(2000px) translateX(0) rotateY(0deg) rotateZ(0deg) scale(1);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: perspective(2000px) translateX(-420px) rotateY(30deg) rotateZ(-12deg) scale(0.78);
        filter: blur(12px);
    }
}

@keyframes questionPageExitPinwheelBlast {
    0% {
        opacity: 1;
        transform: perspective(2100px) rotateZ(0deg) scale(1);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: perspective(2100px) rotateZ(52deg) rotateY(-18deg) scale(0.26) translateX(180px) translateY(-150px);
        filter: blur(18px);
    }
}

@keyframes questionPageExitRocketUp {
    0% {
        opacity: 1;
        transform: perspective(2200px) translateY(0) scale(1);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: perspective(2200px) translateY(-320px) scale(0.58) rotateX(-18deg);
        filter: blur(14px);
    }
}

@keyframes questionPageExitSnapBack {
    0% {
        opacity: 1;
        transform: perspective(1900px) scale(1);
        filter: blur(0);
    }

    30% {
        opacity: 1;
        transform: perspective(1900px) scale(1.08);
    }

    100% {
        opacity: 0;
        transform: perspective(1900px) scale(0.18) translateZ(-700px);
        filter: blur(20px);
    }
}

@keyframes questionPageExitSpiralSink {
    0% {
        opacity: 1;
        transform: perspective(2100px) rotateZ(0deg) rotateY(0deg) scale(1);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: perspective(2100px) rotateZ(-44deg) rotateY(22deg) scale(0.3) translateY(220px);
        filter: blur(18px);
    }
}

@keyframes questionPageExitScreenPunch {
    0% {
        opacity: 1;
        transform: perspective(2300px) scale(1) rotateX(0deg);
        filter: blur(0);
    }

    35% {
        opacity: 1;
        transform: perspective(2300px) scale(1.12) rotateX(4deg);
    }

    100% {
        opacity: 0;
        transform: perspective(2300px) scale(2.1) rotateX(10deg);
        filter: blur(24px);
    }
}

@keyframes questionPageExitWhipRight {
    0% {
        opacity: 1;
        transform: perspective(2100px) translateX(0) rotateY(0deg) scale(1);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: perspective(2100px) translateX(460px) rotateY(-28deg) rotateZ(10deg) scale(0.7);
        filter: blur(12px);
    }
}

@keyframes questionPageExitBlackHole {
    0% {
        opacity: 1;
        transform: perspective(2400px) rotateZ(0deg) scale(1);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: perspective(2400px) rotateZ(72deg) rotateX(22deg) scale(0.08) translateZ(-1000px);
        filter: blur(22px);
    }
}

#questionOverlay {
    width: 100%;
    position: absolute;
    padding: 6%;
    height: auto !important;
    top: 0%;
    left: 0%;
    z-index: 4;
}

#questionPageTitle {
    text-align: center;
    font-size: 64px;
    font-weight: bold;
    padding-bottom: 1.5%;
    line-height: 130%;
    color: #f8b21b;
    -webkit-text-stroke: 1px #ffd978;
    text-shadow:
        0 1px 0 #fff1b8,
        0 2px 0 #d99500,
        2px 4px 6px rgba(0, 0, 0, 0.45);
    z-index: 5;
}

#questionPageQuestion {
    text-align: center;
    font-size: 52px;
    font-weight: bold;
    padding-bottom: 1.5%;
    padding-left: 5%;
    padding-right: 5%;
    line-height: 130%;
    color: #ffe87c;
    -webkit-text-stroke: 1px #f3a300;
    text-shadow: 0 1px 0 #fff4b8, 0 2px 0 rgba(201, 117, 0, 0.9), 0 4px 10px rgba(0, 0, 0, 0.38);
    z-index: 5;
}

#questionPageAnswerA, #questionPageAnswerB, #questionPageAnswerC, #questionPageAnswerD, #questionPageAnswerE, #questionPageAnswerF {
    padding-left: 5%;
    font-size: 34px;
    font-weight: bold;
    line-height: 130%;
    color: #ffe87c;
    -webkit-text-stroke: 1px #f3a300;
    text-shadow: 0 1px 0 #fff4b8, 0 2px 0 rgba(201, 117, 0, 0.9), 0 4px 10px rgba(0, 0, 0, 0.38);
    z-index: 5;
}

#answerChoices {
    display: none;
}

#answerButtons {
    display: none;
}

.answerButtonACard .img-back {
    display: none;
}

.answerButtonACard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#answerButtonA, #answerButtonAHover {
    position: absolute;
    height: auto !important;
    top: 80%;
    left: 20%;
    z-index: 4;
}

.answerButtonBCard .img-back {
    display: none;
}

.answerButtonBCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#answerButtonB, #answerButtonBHover {
    position: absolute;
    height: auto !important;
    top: 80%;
    left: 30%;
    z-index: 4;
}

.answerButtonCCard .img-back {
    display: none;
}

.answerButtonCCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#answerButtonC, #answerButtonCHover {
    position: absolute;
    height: auto !important;
    top: 80%;
    left: 40%;
    z-index: 4;
}

.answerButtonDCard .img-back {
    display: none;
}

.answerButtonDCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#answerButtonD, #answerButtonDHover {
    position: absolute;
    height: auto !important;
    top: 80%;
    left: 50%;
    z-index: 4;
}

.answerButtonECard .img-back {
    display: none;
}

.answerButtonECard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#answerButtonE, #answerButtonEHover {
    position: absolute;
    height: auto !important;
    top: 80%;
    left: 60%;
    z-index: 4;
}

.answerButtonFCard .img-back {
    display: none;
}

.answerButtonFCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#answerButtonF, #answerButtonFHover {
    position: absolute;
    height: auto !important;
    top: 80%;
    left: 70%;
    z-index: 4;
}

.answerButtonACard.answer-choice-tried,
.answerButtonBCard.answer-choice-tried,
.answerButtonCCard.answer-choice-tried,
.answerButtonDCard.answer-choice-tried,
.answerButtonECard.answer-choice-tried,
.answerButtonFCard.answer-choice-tried {
    cursor: not-allowed;
}

.answerButtonACard.answer-choice-tried .img-back,
.answerButtonBCard.answer-choice-tried .img-back,
.answerButtonCCard.answer-choice-tried .img-back,
.answerButtonDCard.answer-choice-tried .img-back,
.answerButtonECard.answer-choice-tried .img-back,
.answerButtonFCard.answer-choice-tried .img-back {
    display: none !important;
}

.answerButtonACard.answer-choice-tried img,
.answerButtonBCard.answer-choice-tried img,
.answerButtonCCard.answer-choice-tried img,
.answerButtonDCard.answer-choice-tried img,
.answerButtonECard.answer-choice-tried img,
.answerButtonFCard.answer-choice-tried img {
    filter: grayscale(0.85) brightness(0.62);
    opacity: 0.72;
}

.answer-choice-disabled-overlay {
    position: absolute;
    top: calc(var(--answer-button-top, 80%) + var(--answer-overlay-y, 7px));
    left: calc(var(--answer-button-left, 20%) + var(--answer-overlay-x, 15.5px));
    width: calc(var(--answer-overlay-base-width, 175px) * var(--answer-overlay-scale, 1.00));
    height: calc(var(--answer-overlay-base-height, 119px) * var(--answer-overlay-scale, 1.00));
    z-index: 7;
    border-radius: 12px;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(10, 8, 24, 0.48), rgba(0, 0, 0, 0.18));
}

.answer-choice-disabled-overlay::after {
    content: "";
    position: absolute;
    left: -5%;
    right: -7%;
    top: 46%;
    height: 8px;
    transform: rotate(-32deg);
    border-radius: 999px;
    background: linear-gradient(90deg, #ffef7a, #ff3b30 45%, #ffef7a);
    box-shadow: 0 0 10px rgba(255, 67, 45, 0.95), 0 2px 5px rgba(0, 0, 0, 0.55);
}

.answerButtonACard {
    --answer-button-left: 20%;
}

.answerButtonBCard {
    --answer-button-left: 30%;
}

.answerButtonCCard {
    --answer-button-left: 40%;
}

.answerButtonDCard {
    --answer-button-left: 50%;
}

.answerButtonECard {
    --answer-button-left: 60%;
}

.answerButtonFCard {
    --answer-button-left: 70%;
}

.choicesMonkeyCard .img-back {
    display: none;
}

.choicesMonkeyCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#choicesMonkey, #choicesMonkeyHover {
    position: absolute;
    height: auto !important;
    transform: scale(0.5);
    transform-origin: bottom right;
    top: -10%;
    left: 46.5%;
    z-index: 3;
}

.choicesBeaverCard .img-back {
    display: none;
}

.choicesBeaverCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#choicesBeaver, #choicesBeaverHover {
    position: absolute;
    height: auto !important;
    transform: scale(0.5);
    transform-origin: bottom right;
    top: -17%;
    left: 45.5%;
    z-index: 3;
}

.choicesPenguinCard .img-back {
    display: none;
}

.choicesPenguinCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#choicesPenguin, #choicesPenguinHover {
    position: absolute;
    height: auto !important;
    transform: scale(0.5);
    transform-origin: bottom right;
    top: -3%;
    left: 53.5%;
    z-index: 3;
}

.choicesOwlCard .img-back {
    display: none;
}

.choicesOwlCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#choicesOwl, #choicesOwlHover {
    position: absolute;
    height: auto !important;
    transform: scale(0.5);
    transform-origin: bottom right;
    top: -17%;
    left: 45.5%;
    z-index: 3;
}

.choicesAxolotlCard .img-back {
    display: none;
}

.choicesAxolotlCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#choicesAxolotl, #choicesAxolotlHover {
    position: absolute;
    height: auto !important;
    transform: scale(0.5);
    transform-origin: bottom right;
    top: -2%;
    left: 49.5%;
    z-index: 3;
}

.choicesDuckCard .img-back {
    display: none;
}

.choicesDuckCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#choicesDuck, #choicesDuckHover {
    position: absolute;
    height: auto !important;
    transform: scale(0.5);
    transform-origin: bottom right;
    top: -8%;
    left: 53.5%;
    z-index: 3;
}

.choicesElephantCard .img-back {
    display: none;
}

.choicesElephantCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#choicesElephant, #choicesElephantHover {
    position: absolute;
    height: auto !important;
    transform: scale(0.5);
    transform-origin: bottom right;
    top: -5%;
    left: 43.5%;
    z-index: 3;
}

.choicesFlyingSquirrelCard .img-back {
    display: none;
}

.choicesFlyingSquirrelCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#choicesFlyingSquirrel, #choicesFlyingSquirrelHover {
    position: absolute;
    height: auto !important;
    transform: scale(0.5);
    transform-origin: bottom right;
    top: -4%;
    left: 53.5%;
    z-index: 3;
}

.choicesGeckoCard .img-back {
    display: none;
}

.choicesGeckoCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#choicesGecko, #choicesGeckoHover {
    position: absolute;
    height: auto !important;
    transform: scale(0.5);
    transform-origin: bottom right;
    top: -4%;
    left: 53.5%;
    z-index: 3;
}

.choicesGoatCard .img-back {
    display: none;
}

.choicesGoatCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#choicesGoat, #choicesGoatHover {
    position: absolute;
    height: auto !important;
    transform: scale(0.5);
    transform-origin: bottom right;
    top: -4%;
    left: 53.5%;
    z-index: 3;
}

.choicesMouseCard .img-back {
    display: none;
}

.choicesMouseCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#choicesMouse, #choicesMouseHover {
    position: absolute;
    height: auto !important;
    transform: scale(0.5);
    transform-origin: bottom right;
    top: -24%;
    left: 38.5%;
    z-index: 3;
}

.choicesRedPandaCard .img-back {
    display: none;
}

.choicesRedPandaCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#choicesRedPanda, #choicesRedPandaHover {
    position: absolute;
    height: auto !important;
    transform: scale(0.5);
    transform-origin: bottom right;
    top: -24%;
    left: 49.5%;
    z-index: 3;
}

.choicesSkunkCard .img-back {
    display: none;
}

.choicesSkunkCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#choicesSkunk, #choicesSkunkHover {
    position: absolute;
    height: auto !important;
    transform: scale(0.5);
    transform-origin: bottom right;
    top: -2%;
    left: 51.5%;
    z-index: 3;
}

.choicesSquirrelCard .img-back {
    display: none;
}

.choicesSquirrelCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#choicesSquirrel, #choicesSquirrelHover {
    position: absolute;
    height: auto !important;
    transform: scale(0.5);
    transform-origin: bottom right;
    top: -4%;
    left: 48.5%;
    z-index: 3;
}

.choicesTigerCard .img-back {
    display: none;
}

.choicesTigerCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#choicesTiger, #choicesTigerHover {
    position: absolute;
    height: auto !important;
    transform: scale(0.5);
    transform-origin: bottom right;
    top: -14%;
    left: 49.5%;
    z-index: 3;
}

#greatJob {
    position: absolute;
    height: auto !important;
    transform: scale(0.85);
    transform-origin: top center;
    top: 20%;
    left: 21%;
    z-index: 4;
}

#niceTry {
    position: absolute;
    height: auto !important;
    transform: scale(0.85);
    transform-origin: top center;
    top: 20%;
    left: 21%;
    z-index: 4;
}

.greatJobBackToGameBoardCard .img-back {
    display: none;
}

.greatJobBackToGameBoardCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#greatJobBackToGameBoard, #greatJobBackToGameBoardHover {
    position: absolute;
    height: auto !important;
    top: 83%;
    left: 30%;
    z-index: 4;
}

#greatJobOverlay {
    width: 100%;
    position: absolute;
    padding: 6%;
    height: auto !important;
    top: 0%;
    left: 0%;
    z-index: 4;
}

#greatJobTitle {
    text-align: center;
    font-size: 64px;
    font-weight: bold;
    padding-bottom: 1.5%;
    line-height: 130%;
    color: #f8b21b;
    -webkit-text-stroke: 1px #ffd978;
    text-shadow: 0 1px 0 #fff1b8, 0 2px 0 #d99500, 2px 4px 6px rgba(0, 0, 0, 0.45);
    z-index: 4;
}

.niceTryBackToQuestionCard .img-back {
    display: none;
}

.niceTryBackToQuestionCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#niceTryBackToGameBoard, #niceTryBackToGameBoardHover {
    position: absolute;
    height: auto !important;
    top: 10%;
    left: 30%;
    z-index: 4;
}

.niceTryBackToGameBoardCard .img-back {
    display: none;
}

.niceTryBackToGameBoardCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#niceTryBackToQuestion, #niceTryBackToQuestionHover {
    position: absolute;
    height: auto !important;
    top: 82.5%;
    left: 30%;
    z-index: 4;
}

.answerCorrectCard .img-back {
    display: none;
}

.answerCorrectCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#answerCorrect, #answerCorrectHover {
    position: absolute;
    height: auto !important;
    top: 80%;
    left: 10%;
    z-index: 4;
}

.answerIncorrectCard .img-back {
    display: none;
}

.answerIncorrectCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#answerIncorrect, #answerIncorrectHover {
    position: absolute;
    height: auto !important;
    top: 80%;
    left: 38%;
    z-index: 4;
}

.rulesCard .img-back {
    display: none;
}

.rulesCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#rules, #rulesHover {
    position: absolute;
    height: auto !important;
    top: 13.5%;
    left: 85.6%;
    z-index: 4;
}

#rulesOverlay {
    width: 100%;
    position: absolute;
    padding: 6%;
    height: auto !important;
    top: 0%;
    left: 0%;
    z-index: 4;
}

#rulesLanguage {
    text-align: left;
    font-size: 29px;
    font-weight: bold;
    padding-bottom: 1.5%;
    padding-left: 5%;
    padding-right: 5%;
    line-height: 130%;
    color: #ffffff;
    z-index: 4;
}

#rulesLanguageTitle {
    text-align: center;
    font-size: 48px;
    font-weight: bold;
    padding-bottom: 3.5%;
    line-height: 130%;
    color: #ffffff;
    z-index: 4;
}

.gameRulesLink {
    display: inline-block;
    padding: 0.55em 1.15em;
    border: 2px solid #ffd978;
    border-radius: 999px;
    background: linear-gradient(180deg, #f8b21b, #d98600);
    color: #092359;
    text-decoration: none;
    text-shadow: none;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.gameRulesLink:hover,
.gameRulesLink:focus {
    color: #061845;
    transform: translateY(-1px);
}

.closeRulesCard .img-back {
    display: none;
}

.closeRulesCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#closeRules, #closeRulesHover {
    position: absolute;
    height: auto !important;
    top: 80%;
    left: 39%;
    z-index: 4;
}

.optionsCard .img-back {
    display: none;
}

.optionsCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#options, #optionsHover {
    position: absolute;
    height: auto !important;
    top: 11.5%;
    left: 4.6%;
    z-index: 4;
}

.quickSettingsPanel {
    position: absolute;
    top: 22.6%;
    left: 4.55%;
    width: 11.2%;
    padding: 0.8rem 0.45rem 0.7rem;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 224, 148, 0.16), rgba(28, 17, 64, 0.32));
    border: 1px solid rgba(255, 216, 124, 0.45);
    box-shadow: 0 0 18px rgba(255, 173, 78, 0.18), inset 0 0 16px rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(4px);
    z-index: 4;
}

.quickSettingsBlock + .quickSettingsBlock {
    margin-top: 0.72rem;
}

.quickSettingsLabel {
    margin-bottom: 0.3rem;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff0b0;
    text-shadow: 0 1px 0 rgba(111, 52, 0, 0.95), 0 0 10px rgba(255, 199, 94, 0.35);
}

.quickSettingsToggle,
.quickSettingsChoice {
    display: block;
    width: 90%;
    margin: 0 auto;
    border: 1px solid rgba(255, 214, 112, 0.55);
    background: linear-gradient(180deg, rgba(25, 69, 196, 0.92), rgba(20, 36, 122, 0.96));
    color: #dfe9ff;
    font-weight: 800;
    border-radius: 12px;
    box-shadow: 0 0 14px rgba(70, 134, 255, 0.25), inset 0 0 8px rgba(255, 255, 255, 0.08);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

.quickSettingsToggle {
    min-height: 3.5vh;
    font-size: 17px;
}

.quickSettingsToggle:hover,
.quickSettingsChoice:hover {
    transform: translateY(-2px) scale(1.01);
    border-color: rgba(255, 229, 148, 0.85);
    box-shadow: 0 0 18px rgba(95, 162, 255, 0.32), 0 0 12px rgba(255, 182, 63, 0.22);
}

.quickSettingsToggle.is-active,
.quickSettingsChoice.is-active {
    background: linear-gradient(180deg, rgba(255, 186, 65, 0.98), rgba(221, 112, 10, 0.98));
    color: #1b204f;
    border-color: rgba(255, 238, 180, 0.95);
    box-shadow: 0 0 20px rgba(255, 187, 74, 0.42), inset 0 0 12px rgba(255, 255, 255, 0.18);
}

.quickSettingsToggleText {
    display: inline-block;
    transform: translateY(1px);
}

.quickSettingsChoices {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}

.quickSettingsChoice {
    min-height: 3vh;
    padding: 0.18rem 0.3rem;
    font-size: 13px;
    letter-spacing: 0.02em;
}

.quickSettingsFullscreenTip {
    margin-top: 0.72rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(255, 216, 124, 0.36);
    text-align: center;
    color: #f8fbff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.55;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.75);
}

.quickSettingsFullscreenTip .quickSettingsLabel {
    margin-bottom: 0.3rem;
    font-size: 14px;
}

.quickSettingsFullscreenTip kbd {
    display: inline-block;
    min-width: 0;
    padding: 0.08em 0.4em;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.92);
    color: #10205a;
    font-size: 14px;
    font-weight: 900;
    text-align: center;
    text-shadow: none;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.quickSettingsShortcutAlt {
    margin-top: 0.1rem;
    color: rgba(248, 251, 255, 0.9);
}

#optionsOverlay {
    width: 100%;
    position: absolute;
    padding: 6%;
    height: auto !important;
    top: 0%;
    left: 0%;
    z-index: 4;
}

#optionsLanguage {
    text-align: left;
    font-size: 32px;
    font-weight: bold;
    padding-bottom: 1.5%;
    padding-left:5%;
    padding-right:5%;
    line-height: 130%;
    color: #ffffff;
    z-index: 4;
}

#optionsLanguageTitle {
    text-align: center;
    font-size: 50px;
    font-weight: bold;
    padding-bottom: 3.5%;
    line-height: 130%;
    color: #ffffff;
    z-index: 4;
}

.fullscreenTip {
    display: inline-block;
    margin-top: 1.2%;
    padding: 1% 1.4%;
    border: 1px solid rgba(255, 232, 124, 0.45);
    border-radius: 12px;
    background: rgba(6, 20, 68, 0.45);
    color: #ffe87c;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.fullscreenTip kbd {
    display: inline-block;
    min-width: 1.8em;
    padding: 0.1em 0.35em;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.92);
    color: #0b1d4d;
    font-weight: 800;
    text-align: center;
    text-shadow: none;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

.closeOptionsCard .img-back {
    display: none;
}

.closeOptionsCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#closeOptions, #closeOptionsHover {
    position: absolute;
    height: auto !important;
    top: 80%;
    left: 39%;
    z-index: 4;
}

.discussionQuestionsCard .img-back {
    display: none;
}

.discussionQuestionsCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#discussionQuestions, #discussionQuestionsHover {
    position: absolute;
    height: auto !important;
    top: 67.5%;
    left: 4.4%;
    z-index: 4;
}

.resetBoardCard .img-back {
    display: none;
}

.resetBoardCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#resetBoard, #resetBoardHover {
    position: absolute;
    height: auto !important;
    top: 77%;
    left: 42.2%;
    z-index: 4;
}

#discussionQuestionsOverlay {
    width: 100%;
    position: absolute;
    padding: 6%;
    height: auto !important;
    top: 0%;
    left: 0%;
    z-index: 4;
}

#resetBoardOverlay {
    width: 100%;
    position: absolute;
    padding: 6%;
    height: auto !important;
    top: 0%;
    left: 0%;
    z-index: 4;
}

#resetBoardLanguageTitle {
    text-align: center;
    font-size: 48px;
    font-weight: bold;
    padding-bottom: 3.5%;
    line-height: 130%;
    color: #ffffff;
    z-index: 4;
}

#resetBoardLanguage {
    text-align: center;
    font-size: 34px;
    font-weight: bold;
    padding-left: 12%;
    padding-right: 12%;
    line-height: 135%;
    color: #ffffff;
    z-index: 4;
}

.resetBoardConfirmCard .img-back,
.resetBoardCancelCard .img-back {
    display: none;
}

.resetBoardConfirmCard:hover .img-back,
.resetBoardCancelCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#resetBoardConfirm, #resetBoardConfirmHover {
    position: absolute;
    height: auto !important;
    transform: scale(1.8);
    transform-origin: bottom right;
    top: 80%;
    left: 27%;
    z-index: 4;
}

#resetBoardCancel, #resetBoardCancelHover {
    position: absolute;
    height: auto !important;
    top: 74.5%;
    left: 65%;
    z-index: 4;
}

#discussionQuestionsLanguage {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    padding-bottom: 4.5%;
    padding-left: 5%;
    padding-right: 5%;
    line-height: 130%;
    color: #ffffff;
    z-index: 4;
}

#discussionQuestionsLanguageTitle {
    text-align: center;
    font-size: 46px;
    font-weight: bold;
    padding-bottom: 1.5%;
    line-height: 130%;
    color: #ffffff;
    z-index: 4;
}

.closeDiscussionQuestionsCard .img-back {
    display: none;
}

.closeDiscussionQuestionsCard:hover .img-back {
    display: inline;
    cursor: pointer;
}

#closeDiscussionQuestions, #closeDiscussionQuestionsHover {
    position: absolute;
    height: auto !important;
    top: 80%;
    left: 39%;
    z-index: 4;
}



/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

    /* Hide default HTML checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

.switch-field {
    display: flex;
    margin-bottom: 36px;
    overflow: hidden;
}

    .switch-field input {
        position: absolute !important;
        clip: rect(0, 0, 0, 0);
        height: 1px;
        width: 1px;
        border: 0;
        overflow: hidden;
    }

    .switch-field label {
        background-color: #e4e4e4;
        color: rgba(0, 0, 0, 0.6);
        font-size: 26px;
        line-height: 1;
        text-align: center;
        padding: 8px 16px;
        margin-right: -1px;
        border: 1px solid rgba(0, 0, 0, 0.2);
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
        transition: all 0.1s ease-in-out;
    }

        .switch-field label:hover {
            cursor: pointer;
        }

    .switch-field input:checked + label {
        background-color: #2196F3;
        box-shadow: none;
    }

    .switch-field label:first-of-type {
        border-radius: 4px 0 0 4px;
    }

    .switch-field label:last-of-type {
        border-radius: 0 4px 4px 0;
    }