:root {
    /* Mobile */
    --initialViewportHeightPx: '';
    --virtualKeyboardHeight: 0px;

    /* Visual themes */
    /* https://hackernoon.com/cool-css-variable-tricks-to-try-uyu35e9 */
    --ON: initial;
    --OFF: ;
    /* Default to light mode, but if a different default for a specific game is desired, this can be overridden */
    --light: var(--ON);
    --dark: var(--OFF);
}
[data-bs-theme="dark"] {
    --light: var(--OFF);
    --dark: var(--ON);
}

:root {
    --wamg-body-fg: var(--light, black) var(--dark, #F0F0F0);
    --wamg-login-name-logged-in-fg: var(--light, green) var(--dark, #3fa93f);
}
/*
 * This whole scheme should be improved relatively soon.
 * As it stands, we can't put a "displayIf<Condition>" class on the same element that is display: flex (or class d-flex) because
 * of the display property conflict.
 * So theoretically it should be body:not(.displayIf<Condition>) .displayIf<Condition>, [etc.] { display: none !important; } and then
 * no subsequent "display: revert" section, to make it simpler and also allow display: flex on the same element
 *
 * Also, I think I'd like to move towards using data- attributes instead of classes, which allows us to set values instead of adding/removing
 * explicitly-named classes.
 */
.visibleToHost, .visibleToNonHostPlayer, .visibleToPublicHostView, body.streamerMode .displayNoneIfStreamerMode, .displayIfStreamerMode, .visibleIfStreamerMode, .visibleForGameMode1, .visibleForGameMode2, .visibleForGameMode3, .visibleToStagingOnly, .visibleIfLoggedIn, .visibleIfNotLoggedIn, .visibleIfPlayer, body.audience .displayNoneIfAudience, .visibleIfAudience,
.displayIfPlayer, .displayIfAudience, .displayIfSkipTutorials, .displayIfNotSkipTutorials,
.displayIfAudienceExists, .displayIfNoAudienceExists, .displayIfRoundLimitOptionIsDefault,
.displayIfTwitchLoginRequired, .displayIfNotTwitchLoginRequired,
/* gameState */
.displayIfGameState-lobby, .displayIfGameState-started, .displayIfGameState-over,
/* gameSubState */
.displayIfTutorial1, .displayIfTutorial2, .displayIfRoundIntermission, .displayIfRoundPrepare, .displayIfRoundPrepareSubmit, .displayIfTurnStarted, .displayIfTurnStartedSubmit, .displayIfTurnResults, .displayIfPostTurn, .displayIfTurnEndedPrematurely, .displayIfTurnEndedPrematurelySkipped, .displayIfTurnEndedPrematurelyCurrentPlayerLeft,
.displayIfRound1, .displayIfRound2Plus,
.displayIfRecentlySubmitted, body.recentlySubmitted .displayNoneIfRecentlySubmitted,
.displayIfGuessWasCorrect, .displayIfGuessWasIncorrect, .displayIfGuessWasNotMade,
.displayIfStartingNextTurn, .displayIfStartingNextRound, .displayIfGameIsEnding,
.displayIfPlayersChoosePromptSetPref, .displayIfNotPlayersChoosePromptSetPref,
.displayIfAltPlaybackRate,
.visibleToB, .visibleIfModOfficialWhatsamusic, .visibleIfAccessCwPileup, .visibleIfAccessRedactionary, .visibleIfNotAccessRedactionary, .visibleIfAccessSillyRoomCodes, .visibleIfNotSubscribed, .visibleIfSubscribed, .visibleIfSubscribedAtTier1, .visibleIfSubscribedAtTier2, .visibleIfSubscribedAtTier3 {
    display: none;
}
body.host .visibleToHost, body.nonHostPlayer .visibleToNonHostPlayer, body.publicHostView .visibleToPublicHostView, body.streamerMode .displayIfStreamerMode,  body.streamerMode .visibleIfStreamerMode, body.gameMode1 .visibleForGameMode1, body.gameMode2 .visibleForGameMode2, body.gameMode3 .visibleForGameMode3, body.staging .visibleToStagingOnly, body.loggedIn .visibleIfLoggedIn, body:not(.loggedIn) .visibleIfNotLoggedIn, body.player .visibleIfPlayer, body.audience .visibleIfAudience,
body.player .displayIfPlayer, body.audience .displayIfAudience,
body.skipTutorials .displayIfSkipTutorials, body:not(.skipTutorials) .displayIfNotSkipTutorials,
body.audienceExists .displayIfAudienceExists, body:not(.audienceExists) .displayIfNoAudienceExists, body.roundLimitOptionIsDefault .displayIfRoundLimitOptionIsDefault,
body.twitchLoginRequired .displayIfTwitchLoginRequired, body:not(.twitchLoginRequired) .displayIfNotTwitchLoginRequired,
/* gameState */
body.gameState-lobby .displayIfGameState-lobby, body.gameState-started .displayIfGameState-started, body.gameState-over .displayIfGameState-over,
/* gameSubState */
body.gameSubState-tutorial1 .displayIfTutorial1, body.gameSubState-tutorial2 .displayIfTutorial2, body.gameSubState-roundIntermission .displayIfRoundIntermission, body.gameSubState-roundPrepare .displayIfRoundPrepare, body.gameSubState-roundPrepareSubmit .displayIfRoundPrepareSubmit, body.gameSubState-turnStarted .displayIfTurnStarted, body.gameSubState-turnStartedSubmit .displayIfTurnStartedSubmit, body.gameSubState-turnResults .displayIfTurnResults, body.gameSubState-postTurn .displayIfPostTurn, body.gameSubState-turnEndedPrematurelySkipped .displayIfTurnEndedPrematurely, body.gameSubState-turnEndedPrematurelyCurrentPlayerLeft .displayIfTurnEndedPrematurely, body.gameSubState-turnEndedPrematurelySkipped .displayIfTurnEndedPrematurelySkipped, body.gameSubState-turnEndedPrematurelyCurrentPlayerLeft .displayIfTurnEndedPrematurelyCurrentPlayerLeft,
body.round-1 .displayIfRound1, body.round-2plus .displayIfRound2Plus,
body.recentlySubmitted .displayIfRecentlySubmitted,
body.guessWasCorrect .displayIfGuessWasCorrect, body.guessWasIncorrect .displayIfGuessWasIncorrect, body.guessWasNotMade .displayIfGuessWasNotMade,
body.startingNextTurn .displayIfStartingNextTurn, body.startingNextRound .displayIfStartingNextRound, body.gameIsEnding .displayIfGameIsEnding,
body.playersChoosePromptSetPref .displayIfPlayersChoosePromptSetPref, body:not(.playersChoosePromptSetPref) .displayIfNotPlayersChoosePromptSetPref,
[data-altPlaybackRate] .displayIfAltPlaybackRate,
body.bernie .visibleToB, body.mod .visibleToMod, body.modOfficialWhatsamusic .visibleIfModOfficialWhatsamusic, body.accessCwPileup .visibleIfAccessCwPileup, body.accessRedactionary .visibleIfAccessRedactionary, body:not(.accessRedactionary) .visibleIfNotAccessRedactionary, body.accessSillyRoomCodes .visibleIfAccessSillyRoomCodes, body.notSubscribed .visibleIfNotSubscribed, body.subscribed .visibleIfSubscribed, body.subscribedAtTier1 .visibleIfSubscribedAtTier1, body.subscribedAtTier2 .visibleIfSubscribedAtTier2, body.subscribedAtTier3 .visibleIfSubscribedAtTier3 {
    display: revert;
}
@media (max-width: 650px) {
    .displayNoneForMaxWidth650 {
        display: none !important;
    }
    .visibilityHiddenForMaxWidth650 {
        visibility: hidden !important;
    }
}
@media (min-width: 650px) {
    .displayNoneForMinWidth650 {
        display: none !important;
    }
    .visibilityHiddenForMinWidth650 {
        visibility: hidden !important;
    }
}
@media (min-width: 650px) {
    /* Redundant now that bootstrap added this in 5.3.x.  To be phased out */
    .rounded-4 {
        border-radius: 1rem !important;
    }
    .rounded-top-4 {
        border-top-left-radius: 1rem !important;
        border-top-right-radius: 1rem !important;
    }
    .rounded-bottom-4 {
        border-bottom-left-radius: 1rem !important;
        border-bottom-right-radius: 1rem !important;
    }
    .rounded-start-4 {
        border-top-left-radius: 1rem !important;
        border-bottom-left-radius: 1rem !important;
    }
    .rounded-end-4 {
        border-top-right-radius: 1rem !important;
        border-bottom-right-radius: 1rem !important;
    }
}
@media (max-width: 650px) {
    /* Cancel bootstrap's rounded-4* (added in 5.3.x after I created it) for phone screens */
    .rounded-4 { border-radius: revert !important; }
    .rounded-top-4 { border-top-left-radius: revert !important; border-top-right-radius: revert !important; }
    .rounded-bottom-4 { border-bottom-left-radius: revert !important; border-bottom-right-radius: revert !important; }
    .rounded-start-4 { border-top-left-radius: revert !important; border-bottom-left-radius: revert !important; }
    .rounded-end-4 { border-top-right-radius: revert !important; border-bottom-right-radius: revert !important; }
}
.rounded-4-always {
    border-radius: 1rem !important;
}
.rounded-top-4-always {
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
}
.rounded-bottom-4-always {
    border-bottom-left-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
}
.rounded-left-4-always {
    border-top-left-radius: 1rem !important;
    border-bottom-left-radius: 1rem !important;
}
.rounded-right-4-always {
    border-top-right-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
}
.rounded-start-4-always {
    border-top-left-radius: 1rem !important;
    border-bottom-left-radius: 1rem !important;
}
.rounded-end-4-always {
    border-top-right-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
}
.rounded-top-left-4-always {
    border-top-left-radius: 1rem !important;
}
.rounded-top-right-4-always {
    border-top-right-radius: 1rem !important;
}
.rounded-bottom-left-4-always {
    border-bottom-left-radius: 1rem !important;
}
.rounded-bottom-right-4-always {
    border-bottom-right-radius: 1rem !important;
}

.fitContentCenter {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.cursor-default { cursor: default; }
.cursor-pointer { cursor: pointer; }

textarea::placeholder { color: #999; }

.fs-7 {
    font-size: .8rem !important;    /* bootstrap only goes as small as fs-6 */
}

.ui-tooltip.ui-widget.ui-widget-content { border: 1px solid black; }
.ui-tooltip.ui-widget-shadow { -webkit-box-shadow: 3px 3px 5px #666666; box-shadow: 3px 3px 5px #666666; }
.ui-slider .ui-slider-handle:focus {
    outline: none;
}
.growOnHover, .growMoreOnHover {
    transition: transform .1s ease-in-out;
}
.growOnHover:hover {
    transform: scale(1.075);
}
.growMoreOnHover:hover {
    transform: scale(1.15);
}

/* These just add a dark mode to all standard bootstrap colors (weirdly they didn't do it already, at least as of 5.3 */

[data-bs-theme="dark"] {
    --bs-warning-rgb: 215, 160, 0;
}
[data-bs-theme="dark"] .btn-secondary {
    --bs-btn-color: black;
    --bs-btn-hover-color: black;
}
[data-bs-theme="dark"] .btn-warning {
    --bs-btn-bg: #C29100;
    --bs-btn-border-color: #C29100;
    --bs-btn-hover-bg: #dfa700;
    --bs-btn-hover-border-color: #dfa700;
}
[data-bs-theme="dark"] .btn-success {
    --bs-btn-color: black;
    --bs-btn-bg: #0FA35E;
    --bs-btn-border-color: #0FA35E;
    --bs-btn-hover-color: black;
    --bs-btn-hover-bg: #10b86a;
    --bs-btn-hover-border-color: #10b86a;
    --bs-btn-active-color: black;
}
[data-bs-theme="dark"] .btn-danger {
    --bs-btn-color: #c2c2c2;
    --bs-btn-bg: #7a222c;
    --bs-btn-border-color: #7a222c;
    --bs-btn-hover-color: #c2c2c2;
    --bs-btn-hover-bg: #a42e3a;
    --bs-btn-hover-border-color: #a42e3a;
    --bs-btn-active-color: #c2c2c2;
    --bs-btn-active-bg: #a42e3a;
    --bs-btn-active-border-color: #a42e3a;
    --bs-btn-disabled-color: #c2c2c2;
}
[data-bs-theme="dark"] .btn-info {
    --bs-btn-bg: #0ba7c6;
    --bs-btn-border-color: #0ba7c6;
    --bs-btn-hover-bg: #0abadd;
    --bs-btn-hover-border-color: #0abadd;
}

.form-switch { padding: revert; }   /* cancel bootstrap's weird default padding-left on switch checkboxes */

.modal .modal-content {
    border: 0;
}
.modal { --bs-modal-color: var(--wamg-body-fg); }
.modal.modalWamgPlain .modal-header {
    color: var(--light, #333) var(--dark, #aaa);
}
.modal td input.form-check-input {
    margin-top: 0;
    vertical-align: middle;
}

#modalLogin {
    .divButtonLoginTwitch, .divButtonLoginGoogle {
        line-height: 3rem;
        height: 3rem;
        padding: 2px 1rem 0 0;
        outline: 1px solid #747775;
        margin-bottom: 1rem;
        cursor: pointer;
    }
    @media (min-width: 650px) {
        .divButtonLoginTwitch, .divButtonLoginGoogle { width: 26rem; }
        .divLoginGoogleExplanation { width: 80%; }
    }
    @media (max-width: 650px) {
        .divButtonLoginTwitch, .divButtonLoginGoogle, .divLoginGoogleExplanation { width: 100%; }
    }
}

img.imgGoogleIcon {
    width: 16px;
    margin-top: -2px;
    margin-right: -2px;
    /* https://isotropic.co/tool/hex-color-to-css-filter/ #CFF5E1 */
    filter: invert(99%) sepia(85%) saturate(366%) hue-rotate(65deg) brightness(103%) contrast(92%);
}

body.loggedIn input[name="name"] {
    color: var(--wamg-login-name-logged-in-fg);
}

.iconPlayerAFK {
    color: darkred;
    padding-right: 2rem;
    margin-top: -9px;
}
li.playerAFK .iconPlayerAFK {
    visibility: visible;
}
li:not(.playerAFK) .iconPlayerAFK {
    visibility: hidden;
}
@keyframes clockBounce {
    0% { transform: translate(-50%, -50%) scale(1.20, .75); }
    20% { transform: translate(-50%, -60%) scale(1.07, .93) rotate(-15deg); }
    50% { transform: translate(-50%, -70%) scale(1, 1) rotate(0deg); }
    80% { transform: translate(-50%, -60%) scale(1.07, .93) rotate(15deg); }
    100% { transform: translate(-50%, -50%) scale(1.20, .75); }
}

@media (min-width: 650px) {
    .divMainContainer {
        width: 80%;
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }
}

.divTopSiteBar {
    padding: .75rem 0 .5rem 0;
    font-size: .9rem;
    display: flex;
}
.divTopSiteBar a {
    color: #ccc;
    text-decoration: none;
}
.divTopSiteBar a:hover {
    color: #bbb;
}

.divVolume {
    display: flex; align-items: center;
    .spanVolumeIcon { font-size: 22px; line-height: 22px; margin-right: 7px; cursor: pointer; }
    .divVolumeSlider { display: flex; width: 100%; background-color: var(--wamg-volume-bar-empty-bg); cursor: pointer; }
    .ui-slider-handle { width: 22px; height: 22px; line-height: 22px; border-radius: 9000px; cursor: pointer; }
    .divVolumeFilled { background-color: var(--wamg-volume-bar-filled-bg); border-radius: 99px; height: 100%; }
}

#iframeHomePageBlog {
    width: 100%;
}
@media (max-width: 430px) {
    #iframeHomePageBlog {
        height: 66rem;
    }
}
@media (min-width: 431px) {
    #iframeHomePageBlog {
        height: 82rem;
    }
}
@media (min-width: 600px) {
    #iframeHomePageBlog {
        height: 27rem;
    }
}


@media (min-width: 650px) {
    .divFooter, .divFooterSupportUs { width: 600px; }
}
@media (max-width: 650px) {
    .divFooterSupportUs { margin-left: 1rem; margin-right: 1rem; }
}
.divFooter, .divFooterSupportUs, .divFooterExtra {
    color: #ccc;
    margin-left: auto; margin-right: auto;
}
.divFooter {
    margin-top: 9rem;
    display: flex;
}
.divFooterCredit {
    flex: 1 1 0;
    padding: 0 1rem; 
}
.divFooterCreditAvatar {
    line-height: 4rem;
    text-align: center;
}
.imgFooterCreditAvatar {
    width: 3rem;
    border-radius: 9000px;
}
.divFooterSupportUs {
    margin-top: 2rem;
}
.divFooterSupportUs a {
    color: white;
}
@media (min-width: 650px) {
    .divFooterCredit { display: flex; }
    .divFooterCreditAvatar { width: 30%; }
}
@media (max-width: 650px) {
    .divFooterCredit { text-align: center; }
}

.ulAccountTabs .nav-item {
    background-color: #133;
    cursor: pointer;
}
.ulAccountTabs .nav-item.active {
    background-color: #355;
}
.ulAccountTabs .nav-item:not(:first-child) {
    margin-left: .3rem;
}
.ulAccountTabs .nav-item a.nav-link {
    color: #f8f9fa;    /* bootstrap's text-light */
}
.divCouponValueApplied {
    color: greenyellow;
    font-style: italic;
    font-size: 1.2rem;
}
.divCouponValueApplied .total {
    border-top: 1px solid greenyellow;
}

.divCustomPrompts.disabled, .divCustomPrompts.disabled textarea {
    color: #999;
}
.divCustomPrompts .divCustomPromptsGameStartedCantChange {
    display: none;
}
.divCustomPrompts.disabled .divCustomPromptsGameStartedCantChange {
    display: revert;
}

.faqMembership {
    .divTableOfContents li a { color: #f8f9fa; text-decoration: none; }
    .divTableOfContents li a:hover { color: #bcbcbc; }
    .q { margin-bottom: 2rem; }
    .q .qText { color: #87c9e1; font-size: 1.6rem; font-weight: bold; margin-bottom: 1rem; }
}

.animFloating { animation: floating 1.5s infinite; }

@keyframes floating {
    0% { transform: translateY(0); transition: ease; }
    50% { transform: translateY(.5rem); transition: ease; }
    100% { transform: translateY(0); transition: ease; }
}

@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}
@keyframes blinkingCursor {
    from { border-right-color: #aaa; }
    to { border-right-color: transparent; }
}