:root {
    --wamg-volume-bar-empty-bg: var(--bs-body-bg);
    --wamg-volume-bar-filled-bg: #6d85aa;
    --re-color-main: #2f3b4d;
    --re-color-main-2: #3C4D67;
    --re-color-main-2-hover: #50678a;
    --re-color-main-bright: #B1BFD5;
    --re-color-main-dark: #1f2938;
    --re-color-main-encoder: #2297DE;
    --re-color-main-decoder: #8DD096;
    --re-color-main-saboteur: #E0321F;
}
.displayIfDescriber, .displayIfGuesser, .displayIfRedactor, body.guesser .displayNoneIfGuesser, .visibleIfAudience, .displayIfUserHasNotChosenPrompt, .displayIfUserHasChosenPrompt, .displayIfTurnStartedAndRedactor, .displayIfPassedOnEncodingThisRound, .displayIfNotPassedOnEncodingThisRound {
    display: none;
}
body.describer .displayIfDescriber, body.guesser .displayIfGuesser, body.redactor .displayIfRedactor, body.audience .visibleIfAudience, body.userHasNotChosenPrompt .displayIfUserHasNotChosenPrompt, body.userHasChosenPrompt .displayIfUserHasChosenPrompt, body.gameSubState-turnStarted.redactor .displayIfTurnStartedAndRedactor, body.passedOnEncodingThisRound .displayIfPassedOnEncodingThisRound, body:not(.passedOnEncodingThisRound) .displayIfNotPassedOnEncodingThisRound {
    display: revert;
}

@media (max-width: 2600px) {
    /* Playwire normally (successfully) doesn't invoke the right rail ad if the browser is too narrow to keep it from overlapping
       content, but if the browser starts out wide enough for the ad to show, and then the user resizes it narrower, the ad will get
       in the way.  Attempts at destroying the unit (which is preferable) have failed or been inconsistent, so at least hide it. */
    #pw-oop-right_rail { display: none; }
}

html {
    font-size: 80%;
}
body {
    background-color: #364356;
}
.divDarkenScreenUnderBomb {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 18; background-color: black;
}
.bodyContainer {
    color: #ddd;
    font-family: "Source Code Pro", monospace;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}
a {
    color: var(--re-color-main-bright);
}
a:hover {
    color: #70b08f;
}
.altRowBkgdColor {
    background-color: blue;
}
.table {
    color: white;
    --bs-table-bg: var(--re-color-main-2);
}
.btn {
    border-radius: 0;
}
.btn.disabled {
    color: #aaa;
    /* background-color: var(--re-color-main-dark); */
}
.select2-dropdown ul li { color: #333; }
.form-select {
    background-color: var(--re-color-main);
}
.modal.marginForNarrowViewports {
    /* Puts a margin on left & right sides for narrow viewports */
    margin-left: 1rem;
    margin-right: 1rem;
    width: calc(100% - 2rem);
}
.modal { --bs-modal-border-radius: 0; }
.modal-content {
    background-color: revert;
}
.modal-header {
    color: white;
    background-color: var(--re-color-main);
    clip-path: polygon(3px 2px, calc(100% - 3px) 0%, 100% 100%, 0% 100%);
    padding: 1.2rem 2rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom: revert;
}
.modal-body {
    background-color: var(--re-color-main-2);
    padding: 1rem 10%;
}
.modal-footer {
    background-color: var(--re-color-main-2);
    border-top: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
#modalSettingsHost, #modalSettingsPlayer, #modalEditPlayer {
    .modal-body { padding-left: 4rem; padding-right: 4rem; }
    @media (max-width: 650px) {
        .modal-body { padding-left: 2rem; padding-right: 2rem; }
    }
    @media (min-width: 576px) {
        .modal-dialog { max-width: 550px; }
    }
}
#modalSettingsHost td, #modalSettingsPlayer td, #modalEditPlayer td {
    padding-top: .2rem; padding-bottom: .2rem;
    height: 3.6rem; line-height: 1.5rem;
}

.noBorders td {
    border-style: none;   /* get rid of the default borders on bootstrap table td's */
}
input.form-check-input {
    cursor: pointer;
}

.colorEncoder { color: var(--re-color-main-encoder); }
.colorDecoder { color: var(--re-color-main-decoder); }
.colorSaboteur { color: var(--re-color-main-saboteur); }

input[name="name"]:disabled {
    /* Don't dim the username input field when disabled */
    background-color: white;
}
input[name="joinRoomCode"] {
    text-transform: uppercase;
}

.divTutorial {
    .divGlideContainer {
        background-color: var(--re-color-main-dark);
        color: white;
        .glide__slides { padding-bottom: 1rem; }
    }
    .divWaitingForHost {
        padding-bottom: 2rem;
    }
}
@media (min-width: 650px) {
    .columnLeft, .divLobby {
        /* At least for now, I've artificially squashed the height of the header to bring the bomb, and only the bomb, up.
           Most other content in the main column should be pushed down */
        margin-top: 3.5rem;
    }
    .divTutorial {
        padding: 2rem 3rem 3rem 3rem;
        font-size: calc(1.275rem + .3vw);   /* fs-4 */
        .divGlideContainer {
            padding: 3rem;
            clip-path: polygon(0% 0%, 99% 0%, 100% 100%, 0% 99%);
        }
        .divWaitingForHost { font-size: calc(1.3rem + .6vw);  /* h3 */ }
    }
}
@media (max-width: 650px) {
    .divTutorial {
        font-size: 4vw;
        .divGlideContainer {
            padding: 2rem;
        }
        .divWaitingForHost { font-size: 3.5vw; }
    }
}

.divSplashOptionsContainer {
    position: relative;
    background-color: white;
    color: #333;
    background-color: var(--re-color-main-bright);
    height: 64rem;
}
@media (min-width: 650px) {
    .divSplashOptionsContainer { width: 600px; margin-left: auto; margin-right: auto; margin-bottom: 8rem; }
}
@media (min-width: 1100px) {

    /* WIDER BROWSERS */

    /* padding on the left & right sides */
    .bodyContainer { padding: 0 5rem; }
}

/* Narrow browsers: 1 player card per row */

@media (max-width: 600px) {
    .divTeamScore .divSection1 { display: none; }
}

@media (max-width: 850px) {
    /* No player list if too narrow */
    .columnLeft { display: none; }
}

.outline {
    outline: 2px solid black;
}
.divTopButtons {
    display: flex;
    width: 360px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: white;
    height: 3rem;
    line-height: 3rem;
}
.divHowToPlayButton, .divWhatsNewButton {
    flex-grow: 1;
    background-color: black;
    cursor: pointer;
}
.divHowToPlayButton {
    border-radius: 0 0 0 20px;
}
.divWhatsNewButton {
    border-radius: 0 0 20px 0;
}
.divLogin {
    margin-top: 4rem;
    padding: 4rem 0 2rem 0;
    background-color: var(--re-color-main);
}
input[name="name"] {
    width: 100%; text-align: center; font-size: 2rem; background-color: white; color: black;
    clip-path: polygon(0% 0%, 100% 0%, 99.5% 100%, 1% 99%);
}
.divJoinStartTabs {
    display: flex;
    text-align: center;
}
@media (max-width: 600px) {
    .divJoinStartTabs { font-size: 1.6rem; }
}
@media (min-width: 600px) {
    .divJoinStartTabs { font-size: 2rem; }
}
.tabJoinRoom, .tabStartRoom {
    flex-grow: 1;
    padding: 1rem 0;
    margin-top: 5px;   /* to offset the bottom border */
    color: var(--re-color-main-2);
    cursor: pointer;
}
.tabJoinRoom.selected, .tabStartRoom.selected {
    color: var(--re-color-main-2);
    border-bottom: 5px solid var(--re-color-main-2);
}
.tabJoinRoom:hover, .tabStartRoom:hover {
    color: var(--re-color-main-2-hover);
}
.divJoinRoom {
    height: 40rem;
}
.divJoinRoom, .divStartRoom {
    padding: 2rem 0 2rem 0;
    color: #333;
}
.divStartRoomAble {
    margin-top: 1rem;
}
.divSplashStagingWarning {
    background-color: darkred;
    color: white;
    padding: 2rem;
    text-align: center;
    font-size: 1.4rem;
    font-weight: bold;
}
.divSplashPrinterContainer {
    position: absolute;
    left: 50%; transform: translateX(-50%);
    bottom: 0;
}
@media (min-width: 600px) {
    .divSplashPrinterContainer { width: 700px; }
}
@media (max-width: 600px) {
    .divSplashPrinterContainer { width: 100%; }
}
.divAbout {
    background-color: var(--re-color-main-2);
    background-image: url('https://d1n054gwwwonzz.cloudfront.net/img/bg-wood-port.svg');
    background-size: cover;
    color: #3F5E2D;
    padding: 3rem 4rem;
}
.divLoggedOut, .divLoggedIn {
    width: fit-content;
    font-size: 1.3rem;
    margin: .5rem auto 0 auto;
}
.divLoggedOut a, .divLoggedIn a {
    margin-left: 6px;
    color: #CFF5E1;
}
input[name="joinRoomCode"] {
    width: 100%;
    text-align: center;
    font-size: 2rem;
    border: 0;
    color: var(--re-color-main);
    font-weight: bold;
    background-color: white;
    clip-path: polygon(.5% 0%, 100% 0%, 99.5% 100%, 0% 99%);
}
.buttonJoinRoom, .buttonStartNewRoom {
    margin-top: 1rem;
    width: 100%;
    height: 5rem;
    background-color: var(--re-color-main);
    color: white;
    font-size: 2rem;
}
.buttonJoinRoom:hover, .buttonStartNewRoom:hover {
    color: white;
    background-color: var(--re-color-main-2-hover);
}
.buttonJoinRoom.disabled, .buttonStartNewRoom.disabled { background-color: var(--re-color-main-dark); }

.divStartRoomBox {
    background-color: #eee; width: 80%; margin: 1rem auto; padding: 1rem 2rem; font-size: 1.2rem;
    clip-path: polygon(1% 0%, 100% 0%, 99.5% 100%, 0% 99%);
}
@media (min-width: 650px) {
    .divStartRoomBox .innerWrapper { width: 70%; margin: auto; }
}
.divStartRoomOptionRow {
    display: flex; align-items: center; line-height: 4.2rem;
}
.divStartRoomOptionRow div.form-check { padding-left: 2.5em; margin-top: -.3em; }
.divStartRoomOptionRow .form-check-input { width: 3em; height: 1.5em; }
.divStartRoomOptionSeparator { height: 1px; background-color: #ccc; }

.divHeader {
    display: flex;
    position: relative;
    z-index: 1;
    .divSettingsButtonWrapper {
        position: relative; z-index: 50;
        .divSettingsButton { display: flex; align-items: center; height: 100%; }
    }
    @media (min-width: 650px) {
        .imgGameLogo { width: 300px; }
    }
    @media (max-width: 650px) {
        .imgGameLogo { width: 60vw; }
        .divSettingsButtonWrapper { margin-right: .5rem; }
    }
}
@media (min-width: 650px) {
    .divHeader {
        /* Set an artificially short height so as not to push main column content down too far */
        height: 3.5rem;
        margin-bottom: 1.5rem;
    }
}


#gameView {
    padding: 0px 20px 2rem 20px;
    max-width: 1300px;
}
@media (max-width: 650px) {
    #gameView {
        padding: 0;
    }
}
.imgSettingsButton {
    width: 30px;
    /* https://codepen.io/sosuke/pen/Pjoqqp */
    filter: invert(99%) saturate(2573%) hue-rotate(321deg) brightness(87%) contrast(112%);
}
.divInfoRoomCode {
    margin-right: 2rem;
    text-align: center;
    font-size: 1.3rem;
    cursor: pointer;
}
.divInfoRoomCode .divHeader {
    background-color: var(--re-color-main);
    padding: .6rem;
    color: white;
    font-weight: bold;
    text-shadow: -1px 1px black;
    border-bottom: 2px solid black;
}
.divInfoRoomCode .divClickToCopyUrl {
    margin: 1rem 1rem;
}

.presenter {
    outline: 2px solid red;
}
.currentPlayer {
    background-color: #D0DFD7 !important;
}
.censored {
    visibility: hidden;
}
#divPlayerListByTurnOrder {
    max-height: 97vh;
    color: white;
}
.divPlayerListNumPlayers {
    background-color: #495D7C;
    clip-path: polygon(0% 0%, 99% 5%, 100% 96%, 0% 100%);
}
.olPlayerList {
    background-color: var(--re-color-main);
    padding-top: .5rem;
    padding-bottom: 5rem;
    margin-bottom: 1rem;
    padding-left: 0;
}
.liPlayerOnTeamList {
    color: white;
}
.liPlayerOnTeamList.audience {
    background-color: var(--re-color-main-dark);
}
body.host .liPlayerOnTeamList { cursor: pointer; }
body.host .liPlayerOnTeamList:hover { background-color: var(--re-color-main-2); }

html:not([data-reachedPlayerCountDisplayThreshold="yes"]) {
    .liPlayerOnTeamList { padding: 1rem 1rem; }
    .imgAvatarSize1 { width: 4rem; }
    .liPlayerOnTeamList .divPlayerContent { text-align: center; }
    .divPlayerScore {
        position: absolute;
        margin-left: 11px;
        text-align: center;
        background-color: white;
        color: black;
    }
    .divPlayerScore .icon { display: none; }
    .iconPlayerChoseSong { font-size: 1.25rem; top: 30%; }
}
html[data-reachedPlayerCountDisplayThreshold="yes"] {
    .liPlayerOnTeamList {
        padding: .65rem 1rem;
        border-bottom: 1px solid var(--re-color-main-2-hover);
    }
    .imgAvatarSize1 { width: 2.5rem; }
    .liPlayerOnTeamList .innerWrapper { display: flex; align-items: center; }
    .liPlayerOnTeamList .divPlayerContent {
        text-align: left;
        min-width: 0;   /* constrains width to container */
        margin-left: .65rem;
    }
    .divPlayerScore {
        display: flex; align-items: center;
        text-align: left;
    }
    .divPlayerScore .content { margin-left: 4px; margin-top: -1px; }
    .iconPlayerChoseSong { font-size: 1.10rem; top: 42%; }
}

.divPlayerScore {
    left: 50%;
    top: 8px;
    width: 2rem;
    --bs-gutter-x: 0;
    border-radius: .5rem;
}
.divPlayerScore .icon { opacity: .75; }
.liPlayerOnTeamList.playerInactive { color: #999; }
.iconPlayerChoseSong {
    position: absolute;
    right: 24px;
    color: var(--re-color-main-decoder);
}


.divPlayerList {
    overflow-y: auto;
    overflow-x: hidden;
}

.divPlayerListAvatar {
    text-align: center;
}
.imgAvatarSize1, .imgAvatarSize2 {
    border-radius: 9000px;
}
.imgAvatarSize2 {
    width: 5rem;
}
.divHeaderPlayer {
    z-index: 5;
}
.divHeaderPlayerAvatar {
    top: -33px;
    padding: 0 1rem;
}
.divHeaderPlayerName {
    background-color: black;
    font-size: .8rem;
    font-weight: bold;
    margin-top: -10px;
    padding: 3px 1rem;
}
.divPlayerName, .divHeaderPlayerName {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-transform: uppercase;
}
.divHeaderPlayerAvatar, .divHeaderPlayerName {
    color: white;
    text-align: center;
    width: 13rem;
}
#modalSplashNewTurn .modal-body {
    font-size: 2rem;
    min-height: 20rem;
    background-color: var(--re-color-main-dark);
    border: 4px solid var(--re-color-main-bright);
}
#modalSettingsHost .modal-body,
#modalSettingsPlayer .modal-body {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 1% 99%);
}
body.gameMode2 #modalSettingsHost .modal-header,
body.gameMode2 #modalSettingsPlayer .modal-header {
    background-color: var(--re-color-main-alt);
}
body.gameMode2 #modalSettingsHost .modal-content,
body.gameMode2 #modalSettingsPlayer .modal-content {
    outline: 6px solid var(--re-color-main-alt);
}

.divClockDigital.running {
    color: red;
}
.divClockDigital.idle, .divClockDigital.paused {
    color: darkgrey;
}
body.guessWasCorrect .divClockDigital {
    color: var(--re-color-main-decoder);
}
.divClock {
    height: .5rem;
    width: 22rem;
    margin: 1rem auto 0 auto;
    display: flex;
}
.divClockFilled {
    height: 100%;
    overflow: visible !important;   /* to counteract jquery .animate's forcing of overflow: hidden */
}
.divClockFilled.plentyOfTimeLeft {
    background-color: white;
}
body.gameMode2 .divClockFilled.plentyOfTimeLeft {
    background-color: var(--re-color-main-alt);
}
.divClockFilled.timeRunningOut {
    background-color: red;
}
.divClock.running .divClockIcon {
    background-image: url('https://d1n054gwwwonzz.cloudfront.net/img/icon_clock_running.svg');
    background-size: 2rem;
    width: 2rem;
    height: 2rem;
}
.divClock.paused .divClockIcon {
    background-image: url('https://d1n054gwwwonzz.cloudfront.net/img/icon_clock_paused.svg');
    background-size: 1.8rem;
    width: 1.8rem;
    height: 1.8rem;
}
.divClockIconBkgd { border-radius: 9000px; }

.divClock.running .divClockIconBkgd {
    background-color: var(--re-color-main-decoder);
    height: 1.4rem; width: 1.4rem;
}
.divClock.paused .divClockIconBkgd {
    background-color: var(--re-color-main-saboteur);
    height: 1.6rem; width: 1.6rem;
}
.divClock.running .divClockIconBkgd, .divClock.running .divClockIcon { animation: clockBounce .5s infinite; }


.tooltipBH {
    color: black;
    line-height: 1.8rem;
    font-size: 1.2rem;
    z-index: 10;
}
.tooltipPauseClock {
    background-color: #ccc;
    padding: .3rem 3rem 1rem 3rem;
}
.tooltipSettingsMenu {
    background-color: #ccc;
    padding: .5rem;
    margin-right: 2.5rem;
    min-width: 13rem;
}
.tooltipStreamerMode {
    background-color: #ccc;
    padding: .3rem;
    margin-top: -2rem;
    margin-left: 1rem;
}
.card-body {
    padding: .5rem;   /* overwrites default boostrap .card-body */
}

.divMainColumnWrapper {
    position: relative;
}
@media (min-width: 650px) {
    .divMainColumnWrapper { background-color: var(--re-color-main); padding-bottom: 1rem; }
}

.divStatusHeader {
    height: 4rem;
    background-color: var(--re-color-main);
    border-bottom: 3px solid black;
}
body.gameMode2 .divStatusHeader {
    background-color: var(--re-color-main-alt);
}
.divBlackStatusBox {
    margin: 2rem auto 0 auto;
    background-color: black;
    color: white;
    width: 80%;
    padding: 2rem;
    clip-path: polygon(0% 0%, 100% 0%, 99% 100%, 1% 97%);
}
.divGuesserStatus {
    background-color: var(--re-color-main-dark);
    color: white;
    width: 30rem;
    padding: 1rem 3rem;
    clip-path: polygon(0% 0%, 100% 3%, 98% 100%, 3% 100%);
}
@media (min-width: 650px) {
    .divGuesserStatus { margin: .5rem auto 3rem auto; }
}
@media (max-width: 650px) {
    .divGuesserStatus { margin: 3rem auto 3rem auto; }
}

body.gameMode2 .divStatus {
    background-color: var(--re-color-main-2-alt);
    background-image: revert;
}
.divGameName {
    color: white;
    padding-left: 1rem;
    text-shadow: -2px 2px black;
}
.divTeamScore {
    margin-left: 1rem;
    display: flex;
    width: fit-content;
}
body.host .divTeamScore { cursor: pointer; }
body.host .divTeamScore:hover { transform: scale(1.075); transition: transform .1s ease-in-out; }
.divTeamScore .divSection1 {
    background-color: #C2C0D4;
    color: black;
    padding: .4rem 1rem;
    clip-path: polygon(2% 0%, 100% 0%, 100% 100%, 0% 97%);
}
.divTeamScore .divSection2 {
    background-color: #495D7C;
    color: white;
    padding: .4rem 1rem;
    clip-path: polygon(0% 0%, 96% 0%, 100% 100%, 0% 100%);
}
.divHelpClueGiving {
    background-color: #eee;
    border: 7px solid #BAB9B5;
    color: #363;
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    padding: 1rem 5rem;
}

.divLobby .divYouWillBePlayingAs {
    background-color: #EBF0F7;
    color: black;
    padding: 2rem;
    text-align: center;
    clip-path: polygon(0% 0%, 100% 0%, 99% 100%, 1% 98%);
}
.divLobby {
    color: white;
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    padding-top: 2rem;
    padding-bottom: 3rem;
}
@media (min-width: 650px) {
    .divLobby { padding-left: 5rem; padding-right: 5rem; }
}
@media (max-width: 650px) {
    .divLobby { padding-left: 1rem; padding-right: 1rem; }
}

.buttonStartGame {
    width: 210px;
    margin-top: 2rem;
    font-size: 2rem;
    clip-path: polygon(0% 0%, 100% 0%, 99% 100%, 1% 98%);
}

.divRoundIntermission {
    clip-path: polygon(0% 2%, 100% 0%, 99% 98%, 1% 100%);
    padding: 4rem;
}
.divTutorial {
    background-color: var(--re-color-main-2);
    .glide__arrow { top: revert; transform: revert; margin-top: 1rem; }
    .glide__bullets { bottom: -3rem; }
}
.divRoundIntermission {
    margin: 3.5rem 1rem 0 1rem;
    background-color: var(--re-color-main-bright);
    color: black;
}

.divInputClue, .divUserChoosingPrompt {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.divInputClueHeader {
    background-color: var(--re-color-main-bright);
    color: black;
    margin: 0 auto 1rem auto;
    padding: 1rem;
    text-align: center;
    z-index: 3;
    clip-path: polygon(0% 2%, 100% 0%, 100% 100%, 0% 97%);
}
.divInputClue .hwt-container { width: 100%; background-color: var(--re-color-main-dark); }
.divInputClue textarea, .divInputClue .hwt-highlights {
    width: 100%;
    font-size: calc(1.275rem + .3vw);  /* fs-4 */
    padding: 1rem;
    border: 2px solid #121821;
}
.divInputClue textarea::placeholder { color: var(--re-color-main-encoder); }
.divInputClue .hwt-highlights .tooCloseToTheAnswer { background-color: darkred; color: white; text-decoration: line-through; }
.divInputClue .buttonSubmitClue {
    color: black;
    background-color: var(--re-color-main-encoder);
    clip-path: polygon(1% 0%, 100% 0%, 99.5% 100%, 0% 99%);
}
.divInputClue ul li { margin-bottom: 1rem; }

@media (min-width: 650px) {
    .divInputClue {
        padding-left: 3rem; padding-right: 3rem;
    }
    .divInputClueHeader {
        width: 65%;
        min-width: 30rem;
    }
}
@media (max-width: 650px) {
    .divInputClue {
        padding-left: .5rem; padding-right: .5rem;
    }
    .divInputClueHeader {
        width: 100%;
    }
}

.theWord, .theWordUnderShadow {
    width: 60%;
    min-width: 20rem;
    margin: auto;
}
.theWord {
    background-color: #223;
    color: white;
    padding: .5rem 0;
    clip-path: polygon(1% 0%, 99% 0%, 100% 100%, 0% 100%);
}
.theWordUnderShadow {
    height: .75rem;
    background-color: black;
    clip-path: polygon(0% 0%, 100% 0%, 98% 100%, 2% 100%);
}

@media (max-width: 650px) {
    .divTurnStarted { padding-left: .5rem; padding-right: .5rem; }
}

.divTurnStartedHeader {
    margin: auto;
    background-color: var(--re-color-main-bright);
    color: black;
    padding-top: 1rem;
    text-align: center;
}
@media (min-width: 650px) {
    .divTurnStartedHeader { margin-top: 3.5rem; width: 65%; min-width: 30rem; }
}
@media (max-width: 650px) {
    .divTurnStartedHeader { margin-top: 6rem; width: 100%; }
}


.divGameOver {
    background-color: var(--re-color-main);
    color: white;
    font-size: 1.4rem;
    margin-top: 3.5rem;
    margin-bottom: 1.5rem;
}
@media (min-width: 650px) {
    .divGameOver { padding: 2rem 5rem 3rem 5rem; }
}
@media (max-width: 650px) {
    .divGameOver { padding: 2rem 1rem 3rem 1rem; }
}

body.gameMode2 .divGameOver {
    background-color: #373a55;
    border: 7px solid #d5ada4;
}
.divFinalTop3 {
    background-color: #444;
    margin-bottom: 2rem;
    width: 40rem;
    max-width: 80%;
    clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 100%, 0px calc(100% - 2px));
}

.divPresenterList {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 10px;
}

.divInputAnswer {
    margin-bottom: 2em;
}
.divLinkClueGuide {
    font-size: 1.2rem;
    text-decoration: underline;
    margin-top: .3rem;
    cursor: pointer;
}
.divAFKLeaveButtons {
    margin-top: 1em;
}
.divWhatIsThisInMenu, .divLinkClueGuideInMenu {
    text-decoration: underline;
    cursor: pointer;
}
.divAnswerSubmitted {
    color: white;
    margin-bottom: 1em;
}

.divRoleStatus {
    position: relative; margin-left: auto; margin-right: auto;
}
@media (min-width: 650px) {
    .divRoleStatus, .divPassedOnEncodingThisRound { width: 75%; }
}
@media (max-width: 650px) {
    .divRoleStatus, .divPassedOnEncodingThisRound { width: 90%; }
}
.divRoleIcon {
    position: relative;
    width: 60px; height: 60px;
    box-shadow: 0 2px black; border-radius: 9000px; z-index: 2;
}
.divRoleIcon.encoder { background-color: var(--re-color-main-encoder); }
.divRoleIcon.decoder { background-color: var(--re-color-main-decoder); }
.divRoleIcon.saboteur { background-color: var(--re-color-main-saboteur); }

.divRoleIcon img {
    width: 40px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}


.animate__roleIconMoveLeft { animation-name: roleIconMoveLeft; animation-timing-function: ease-in; --animate-duration: 1s; }
.animate__roleIconMoveRight { animation-name: roleIconMoveRight; animation-timing-function: ease-in; --animate-duration: 1s; }

@keyframes roleIconMoveLeft {
    0% { left: 42%; transform: rotate(0deg); }
    50% { left: 44%; transform: rotate(0deg); animation-timing-function: ease-out; }
    51% { transform: rotate(25deg); }
    90% { left: -2%; transform: rotate(25deg); animation-timing-function: ease-in; }
    91% { transform: rotate(-5deg); }
    100% { left: 0; }
}
@keyframes roleIconMoveRight {
    0% { right: 42%; transform: rotate(0deg); }
    50% { right: 44%; transform: rotate(0deg); animation-timing-function: ease-out; }
    51% { transform: rotate(-25deg); }
    90% { right: -2%; transform: rotate(-25deg); animation-timing-function: ease-in; }
    91% { transform: rotate(5deg); }
    100% { right: 0; }
}

@media (min-width: 40rem) {
    /* Split redactor word inputs into (hard-coded at) 2 columns */
    .divInputTabooWords .divInputs {
        display: grid;
        grid-auto-flow: column;
        column-gap: 5px;
    }
    /* All items should be in column 1... */
    .divEnterRedactorWord { grid-column: 1; }
    /* ... except for all items after the one with the column-break class */
    .divEnterRedactorWord.column-break ~ .divEnterRedactorWord { grid-column: 2; }
}
@media (max-width: 40rem) {
    .divInputTabooWords .divInputs {
        width: 100%;
        max-width: 22rem;
    }
    .divEnterRedactorWord {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
}
.divEnterRedactorWord {
    display: flex;
    margin-bottom: 4px;
    align-items: center;
}
.divEnterRedactorWordNum {
    color: var(--re-color-main-bright);
    width: 2rem;
    margin-right: .5rem;
    text-align: right;
}
.divEnterRedactorWordInput {
    flex-grow: 1;
}
.divEnterRedactorWord input {
    background-color: #182230;
    border: 2px solid #111;
    width: 100%;
}
.divEnterRedactorWord.prohibited input {
    border: 2px solid var(--re-color-main-saboteur);
    color: #999;
    text-decoration: line-through;
}
.divEnterRedactorWord.limited input {
    border: 2px solid #bfbf1d;
}
.divEnterRedactorWord.overLimitedLimit input {
    text-decoration: line-through;
    color: #999;
}
.divEnterRedactorWord .divIconRedactorWord {
    width: 2rem;
}

.animRedactingMessage {
    width: 0;
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid #aaa0;
    animation: typewriter 1s steps(30) 1s 1 normal both, blinkingCursor .5s infinite;
}

.divBombContainer {
    position: sticky;
    top: 30px;
    margin: 45px auto 0px auto;
    z-index: 19;
}
body.gameSubState-postTurn .divBombContainer {
    /* un-sticky the bomb during postTurn */
    position: relative;
}

.divBomb .divHeaderPlayer {
    position: absolute; left: 50%; transform: translateX(-50%);
}
@media (min-width: 650px) {
    .divBomb .divHeaderPlayer { top: -18px; }
}
@media (max-width: 650px) {
    .divBomb .divHeaderPlayer {
        top: calc((20vw * (237 / 500)) - 66px);
        margin-left: -2.2vw;
    }
}

.divBombMain {
    position: relative;
    display: flex;
}
@media (min-width: 650px) {
    .divBombMain { margin-top: -48px; margin-left: 24px; height: 237px;}
}
@media (max-width: 650px) {
    .divBombMain { height: calc((155vw * (237 / 500)) - 132px); }
}


.divBombMainBackground {
    position: absolute;
    width: 100%;
    background: url(https://d1n054gwwwonzz.cloudfront.net/img/redactionary/redactionary_bomb.svg) no-repeat center top;
}
@media (min-width: 650px) {
    .divBombMainBackground { height: 237px; background-size: 500px 237px; }
}
@media (max-width: 650px) {
    .divBombMainBackground {
        height: calc(100vw / (500 / 237));
        background-size: 100%;
    }
}
.divClockDigital {
    width: fit-content;
    margin-left: -9px;
    position: absolute;
    top: 68px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}
@media (min-width: 650px) {
    .divClockDigital {
        top: 68px;
        font-size: 3rem;
    }
}
@media (max-width: 650px) {
    .divClockDigital {
        top: calc((50vw * (237 / 500)) - 51px);
        font-size: calc((16vw * (237 / 500)));
    }
}

.divBombBoxStatus {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}
@media (min-width: 650px) {
    .divBombBoxStatus { bottom: 30px; }
}
@media (max-width: 650px) {
    .divBombBoxStatus { top: calc((15vw * (500 / 237)) + -2px); }
}

.divBombStatusNonGuesser {
    background-color: var(--re-color-main-dark);
    color: white;
    height: 7rem;
    min-width: 26rem;
    white-space: nowrap;
    text-align: center;
    padding: 1rem 2rem;
    clip-path: polygon(0% 0%, 100% 0%, 97% 100%, 3% 100%);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
}
@media (min-width: 650px) {
    .divBombStatusNonGuesser {
        bottom: -8px;
        margin-left: -8px;  /* offset because bomb graphic isn't centered (yet?) */
    }
}
@media (max-width: 650px) {
    .divBombStatusNonGuesser { top: calc((62vw * (237/ 500)) + 5px); }
}

.divBombExplosion {
    position: absolute;
    z-index: 20;
}
@media (min-width: 650px) {
    .divBombExplosion {
        top: -150px;
        left: 50%;
        transform: translateX(-50%);
    }
}
@media (max-width: 650px) {
    .divBombExplosion {
        top: -145px;
        width: 100%;
        img { width: 100%; }
    }
}
.divBombSmoke {
    position: absolute;
    z-index: 19;
    opacity: .4;
}
@media (min-width: 650px) {
    .divBombSmoke {
        top: -300px;
        left: 50%;
        transform: translateX(-50%);
    }
}
@media (max-width: 650px) {
    .divBombSmoke {
        width: 100%;
        top: -245px;
        img { width: 100%; }
    }
}

.divBombStatusGuessWasCorrect {
    position: relative;
    margin: auto;
}
@media (min-width: 650px) {
    .divBombStatusGuessWasCorrect { width: 60%; min-width: 27rem; }
}
@media (max-width: 650px) {
    .divBombStatusGuessWasCorrect { width: 90%; margin-top: calc(17rem - (22vw * (500 / 237))); }
}

.divGuessWasIncorrectOrNotMade {
    position: relative;
    margin-top: .5rem;
    .divGuessWasIncorrectOrNotMadeInner {
        position: relative;
        margin: -2rem auto 0 auto;
    }
}
@media (min-width: 650px) {
    .divGuessWasIncorrectOrNotMadeInner {
        width: 65%;
        min-width: 37rem;
    }
}
@media (max-width: 650px) {
    .divGuessWasIncorrectOrNotMadeInner {
        width: 100%;
    }
}


.divDescriptionRevealed {
    position: relative;
    margin-top: 3rem;
}
@media (max-width: 650px) {
    body.gameSubState-turnResults {
        .divDescriptionRevealed { margin-top: 6.5rem; }
        &.guesser .divDescriptionRevealed { margin-top: 3rem; }
    }
}
.divDescriptionDescriberName {
    position: absolute; top: 0; left: 10px; transform: translateY(-50%);
    z-index: 5;
    display: flex;
}
.divDescriptionDescriberName .content {
    background-color: var(--re-color-main-bright);
    height: 2rem;
    line-height: 2rem;
    position: absolute; left: 34px; top: 8px;
    font-size: 1rem;
    text-transform: uppercase;
    padding: 0 1rem;
    clip-path: polygon(0% 0%, 100% 3%, 98% 100%, 3% 100%);
}
body.host .divDescriptionDescriberName .content { cursor: pointer; }
body.host .divDescriptionDescriberName .content:hover { background-color: var(--re-color-main-dark); color: var(--re-color-main-bright); }
.divDescriptionRevealed .divContent  {
    display: flex;
    width: 96%;
    margin: auto;
    flex-wrap: wrap;
    line-height: 2rem;
    background-color: #EBF0F7;
    padding: 4rem 2rem 2rem 2rem;
    position: relative;
    z-index: 4;
    clip-path: polygon(0% 0%, 100% 0%, calc(100% - 5px) 100%, 5px calc(100% - 4px));
}
.divDescriptionPrinter {
    position: absolute;
    width: 103%;
    margin-left: -1.5%;
    bottom: -99px;
    z-index: 1;
    .upper {
        background-color: #66768E; height: 6rem; width: 100%; clip-path: polygon(2% 0%, 97.8% 0%, 100% 100%, 0% 100%);
        .slot {
            background-color: black; height: 1rem; width: 95%; position: absolute; top: 38px; left: 50%; transform: translateX(-50%); clip-path: polygon(.5% 0%, 99.5% 0%, 100% 100%, 0% 100%);
        }
    }
    .lower {
        background-color: #4A576C; height: 5.5rem; width: 100%; clip-path: polygon(0% 0%, 100% 0%, 99% 100%, 1% 100%);
        .statusLight {
            background-color: var(--re-color-main-decoder); width: 3rem; height: .75rem; position: absolute; top: 89px; right: 32px; clip-path: polygon(0% 2%, 100% 0%, 99% 100%, 2% 96%);
        }
    }
}
.divDescriptionSegment {
    display: flex;
    position: relative;
    margin-left: .05rem; margin-right: .05rem;
    margin-bottom: 3rem;
    display: none;

    &.redactedThenRevealed .theContent {
        color: blue;
        outline: 2px solid black;
        padding-left: .7rem;
        padding-right: .7rem;
        margin-left: .25rem;
        margin-right: .25rem;
    }
    &.redacted, &.notInDictionary { margin-left: .2rem; margin-right: .2rem; }

    .divRedactors {
        font-size: .9rem; white-space: nowrap;
        &.above { top: -7px !important; }
        &.below { bottom: -35px !important; }
    }
}
/* Further reduce space between lines */
@media (min-width: 650px) {
    .divDescriptionSegment { margin-top: -.25rem; }
}
@media (max-width: 650px) {
    .divDescriptionSegment { margin-top: -.6rem; }
}

.divDescriptionSegment.redactedThenRevealed {
    position: relative;
}
.divDescriptionSegment.redacted .theContent, .divDescriptionSegment.notInDictionary .theContent {
    outline: 2px solid black;
    background-color: black;
    color: black;
    min-width: 6rem;
    clip-path: polygon(2% 0%, 100% 0%, 98% 100%, 0% 100%);
}
/* If the browser user redacted a word, reveal it to them (unless they have streamerMode on) */
body:not(.streamerMode) .divDescriptionSegment.redacted.redactedByBrowserUser .theContent {
    outline: 2px solid blue;
    background-color: revert;
    padding: 0 1rem;
    color: blue;
    clip-path: revert;
}

.divSaboteurIconOverRedactedWord {
    position: absolute;
    top: -12px;
    left: 50%; transform: translateX(-50%);
    width: 50px; height: 50px;
    background-color: var(--re-color-main-saboteur);
    box-shadow: 0 2px black;
    border-radius: 9000px;
    z-index: 2;
}
.divSaboteurIconOverRedactedWord img {
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 30px;
}

.divRedactors {
    text-transform: uppercase;
}
.divDescriptionSegment.redactedThenRevealed .divRedactors.above {
    top: -10px !important;
}
.divDescriptionSegment.redactedThenRevealed .divRedactors.below {
    bottom: -37px !important;
}
.divDescriptionSegment.notInDictionaryAndRevealed {
    color: blue;
}

input[name="answer"] {
    width: 20rem;
}

.invalidAnswer .divPlayerCardAnswer {
    color: #ccc;
}

.divAllRedactorWords {
    margin-top: 7rem;  /* makes room below absolutely-positioned printer */
    background-color: var(--re-color-main);
    padding: 5rem 3rem;
}
@media (max-width: 650px) {
    .divAllRedactorWords { padding: 3rem 1rem; }
}
.divRedactorWords {
    width: 100%;
    height: fit-content;
    color: black;
    font-size: 1.1rem;
    border-radius: .3rem;
    margin-bottom: 2.5rem;
    position: relative;
}
.divRedactorWordsHeader {
    display: flex;
    align-items: center;
    position: absolute;
    top: -20px;
    line-height: 1.5rem;
}
.divRedactorWordsLabel {
    background-color: var(--re-color-main-bright);
    color: black;
    text-align: left;
    padding: 4px 15px;
    min-width: 5rem;
    text-transform: uppercase;
    clip-path: polygon(2px 0%, 100% 0%, calc(100% - 2px) 100%, 0% 100%);
}
body.host .divRedactorWordsLabel { cursor: pointer; }
body.host .divRedactorWordsLabel:hover { color: var(--re-color-main-bright); background-color: var(--re-color-main-dark); }
.divRedactorWordsPoints {
    color: var(--re-color-main-bright);
    background-color: black;
    margin-left: -2px;
    padding: 4px 8px;
    font-style: italic;
    clip-path: polygon(2px 0%, 100% 0%, calc(100% - 1px) 100%, 0% 100%);
}
.divRedactorWordsPoints.noPoints { display: none; }

.divRedactorWordsWords {
    display: flex;
    flex-wrap: wrap;
    margin-left: 7px;
    padding: 14px 10px 10px 10px;
    background-color: #495D7C;
}
.divRedactorWordsWord {
    color: var(--re-color-main-bright);
    margin: 2px;
    display: flex;
    position: relative;
    cursor: default;
}
.divRedactorWordsWord .contentContainer {
    padding: 3px 8px;
}
.divRedactorWordsWord .contentContainer .content.mousedOver { color: #FFC008; }
.divRedactorWordsWord.succeededInRedacting .contentContainer {
    background-color: black;
    color: white;
    padding: 3px 15px;
    clip-path: polygon(3% 0%, 100% 2%, 96% 98%, 0% 100%);
}
.divRedactorWordsWords .divBonus {
    position: absolute;
    top: 0;
    transform: translateY(-50%) rotate(-3deg);
    background-color: #FFC008;
    color: black;
    font-size: .9rem;
    line-height: .9rem;
    font-weight: bold;
    padding: 1px 2px;
}
.greyedOut {
    background-color: grey !important;
    color: #ccc !important;
}
/* COMMENT OUT: quick multiple score change events were making this slow animation queue up weirdly
.scoreChangeHighlight {
    background-color: lightgreen;
}
*/