:root {
    --header-outer-height: calc(115px * var(--canvas-scale));
    --footer-outer-height: calc(100px * var(--canvas-scale));

    --content-holder-padding: 0px;

    --layount-content-margin-w: calc(125px * var(--canvas-scale));
    --layount-content-padding-w: 0px;
    --layount-content-padding-h: 0px;

    --end-popup-next-game-start-delay: 4000ms;
    --chat-icon-scale: 1;
}
.content-holder {
    display: flex;
    align-items: stretch;

    /* Make uncommented lines default if we want to add footer line back*/
    position: relative;
    width: calc(100% - calc(2 * var(--content-holder-padding) * var(--ui-scale)));
    /*height: calc(100% - calc(50px * var(--ui-scale)));*/
    height: calc(100% - calc(2 * var(--content-holder-padding) * var(--ui-scale)));

    overflow: hidden;
    margin: 0 auto;

    /*padding: 10px 10px 40px 10px;
    padding-bottom: calc(40px * var(--ui-scale));*/
    /*padding: 10px 10px 10px 10px;
    padding-bottom: calc(10px * var(--ui-scale));*/
}

.game-content-holder {
    position: relative;
    flex: 1 1 0;
    height: 100%;
}
.chat-content-holder {
    display: flex;
    position: relative;
    flex: 0 0 calc((250px - 40px) * var(--ui-scale));
    background: #000000;
    padding: calc(20px * var(--ui-scale));
    padding-bottom: calc(5px * var(--ui-scale));
    width: calc((250px - 40px) * var(--ui-scale)); /* needed to prevent chat width from growing based on content /*/
    z-index: 6; /* to go over players if it overlaps*/
    z-index: 10; /* to show up over game end popup and be usable */
}
.portrait .chat-content-holder {
    display: none;
    flex: 0 0 0;
}
.portrait .chat-content-holder.is-overlayed {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: auto;
    z-index: 20;
    background: rgba(0,0,0, 1);
}

#layoutHeader {
    /*max-width: calc(1000px * var(--ui-scale));*/
    margin: 0 auto;
}

#layoutContent {
    position: relative;
    display: flex; /* required for poker game to cneter table nicely and scale it*/
    flex-direction: column;
    justify-content: center;

    /*height: calc(100% - calc(40px * var(--canvas-scale)));*/
    height: calc(100% - calc(2 * var(--layount-content-padding-h) * var(--ui-scale)) - var(--header-outer-height) - var(--footer-outer-height));
    /*overflow: hidden;*/
    padding: calc(var(--layount-content-padding-h) * var(--ui-scale)) calc(var(--layount-content-padding-w) * var(--ui-scale)); /* 2x padding on the sides, leaving room for cards scaling/positioning outside of the table)*/

    max-width: clamp(calc(400px * var(--canvas-scale)), calc(1200px * var(--canvas-scale)), calc(100vw - 2 * var(--layount-content-margin-w)));
    margin: 0 auto;
}

.portrait #layoutContent {
    --layount-content-margin-w: calc(50px * var(--canvas-scale));
}

#layoutFooter {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    /* temporary styling below, without the footer buttons */
    background: var(--clr-green4);
    padding: calc(20px * var(--ui-scale));

    border-top: 3px solid #ffffff;
    z-index: 6; /* ensures in weird situations actions appear over player cards */
}
.raise-bar-open #layoutFooter {
    /*padding: calc(10px * var(--ui-scale)) calc(20px * var(--ui-scale));*/
    /*padding-top: calc(10px * var(--ui-scale));*/
}

#layoutFooter .status-line,
#layoutFooter .actions,
#layoutFooter .room-actions {
    max-width: calc(800px * var(--ui-scale));
    margin: 0 auto;
    justify-content: space-between;
    min-height: calc(64px * var(--ui-scale));
}
#game_content[data-player-in-waitlist] #layoutFooter .room-actions {
    max-width: 96vw;
}
.portrait #layoutFooter .status-line,
.portrait #layoutFooter .actions,
.portrait #layoutFooter .room-actions {
    min-height: calc(73px * var(--ui-scale));
}
#layoutFooter .room-actions {
    display: none;
    text-align: right;
}
.end-game-popup-open #layoutFooter {
    display: none;
}
#layoutFooter .room-actions .actions-note {
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.3;
}
#layoutFooter .room-actions .actions-note.make-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
}
#layoutFooter.show-room-actions .actions {
    display: none;
}
#layoutFooter.show-room-actions .room-actions {
    display: block;

    display: flex;
    justify-content: center;
    align-items: center;
}
#layoutFooter .room-actions .actions-note .cross-promo {
    margin-top: 1em;
}
#layoutFooter .checkboxes-holder {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*gap: calc(32px * var(--ui-scale));*/
    width: 100%;
}
#layoutFooter .checkboxes-holder .checkbox-flex-wrapper {
    flex: 0 1 auto;

    display: flex;

    /* unfortunately can't just do "1/3" of width size, as the action buttons are of slightly different sizes,
    and in different screen widths, so have to make it manually and very specific.
    On TOP of that, also have to bold the font to make it size the same way
    */
    min-width: 11ch;
    font-weight: bold;
    /*padding: 0 calc(20px * var(--ui-scale)); */
    /* add padding to width, so that it cna be aligned properly to l/c/r */
    /*min-width: calc(11ch + 2 * calc(20px * var(--ui-scale)));
    padding: 0;*/

    /* define variables, which I can easily adjust on responsive sizes, to keep things more modular */
    --margin-right: calc(15px * var(--ui-scale));
    --font-size: calc(25px * var(--ui-scale));
    --side-padding: calc(20px * var(--ui-scale));

    margin-right: var(--margin-right);
    font-size: var(--font-size);
}
#layoutFooter .checkboxes-holder .checkbox-flex-wrapper:nth-child(1) {
    padding-left: calc(2 * var(--side-padding));
    justify-content: flex-end;
}
#layoutFooter .checkboxes-holder .checkbox-flex-wrapper:nth-child(2) {
    --side-padding: calc(30px * var(--ui-scale));
    padding: 0 calc(1 * var(--side-padding));
    min-width: 10ch;
    justify-content: center;
    /*padding: 0 calc(30px * var(--ui-scale));*/
    /*min-width: calc(11ch + 2 * calc(30px * var(--ui-scale)));*/
    /* add padding to width, so that it cna be aligned properly to l/c/r */
}
#layoutFooter .checkboxes-holder .checkbox-flex-wrapper:last-child {
    padding-right: calc(2 * var(--side-padding));
    justify-content: flex-start;
    margin-right: 0;
    /* need to overwrite a few things, as if there's just 2 buttons, the 2nd one should act like the last */
    padding-left: 0;
    min-width: 11ch;
}
#layoutFooter .checkboxes-holder .checkbox-flex-wrapper .checkbox-with-label {
    /* need to overwrite it specifically, so that I can give the wrapper a font.size the same as the buttons have, so that ch based width will work the same */
    font-size: calc(1.27 * 14px * var(--ui-scale));
}

#top_row {
    height: calc(170px * var(--canvas-scale));

    margin-bottom: calc(30px * var(--canvas-scale));
}
.status-line > div {
    font-size: calc(15px * var(--ui-scale));
    flex: 0 1 auto;
    min-width: calc(110px * var(--ui-scale));
}
.status-line > div span {
    font-weight: bold;
}

.status-line .debug-note {
    min-width: 37ch;
}
.status-line .game-version {
    min-width: auto;
    padding-right: calc(10px * var(--ui-scale));
}

.commands {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.commands > * {
    margin-bottom: calc(5px * var(--ui-scale));
}


/* TODO pretify this chat icon css*/
.game-content-holder .expand-chat {
    display: none !important;
    position: absolute;
    bottom: 10rem;
    right: 0rem;
    font-size: 5rem;
    cursor: pointer;
    width: auto !important;
    height: auto !important;

    z-index: 9;
    /*padding: 1.3rem;*/
    padding: calc(10px * var(--ui-scale) * var(--chat-icon-scale)) calc(10px * var(--ui-scale) * var(--chat-icon-scale));
    background: #000000;

    border-top-left-radius: calc(10px * var(--ui-scale) * var(--chat-icon-scale));
    border-bottom-left-radius: calc(10px * var(--ui-scale) * var(--chat-icon-scale));

    /* centeral position variant if we want to put it at center with PP home icon
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: max-content !important;*/
}
.is-dark-lobby-background .game-content-holder .expand-chat {
    /*background: var(--clr-green3);*/
    background: #ffffff;
    color: #000000;
}
.is-dark-lobby-background .game-content-holder .expand-chat .chat-icon, .chat-content-holder .expand-chat .chat-icon {
    background: #000000;
    color: #000000;
    border-color: #000000;
}
.is-dark-lobby-background .game-content-holder .expand-chat .chat-icon::before,
.is-dark-lobby-background .chat-content-holder .expand-chat .chat-icon::before {
    border-color: #000000 transparent transparent transparent;
}
.is-dark-lobby-background .game-content-holder .expand-chat .icon-text,
.is-dark-lobby-background .chat-content-holder .expand-chat .icon-text {
    color: #000000;
}
.portrait #game_content.chat-is-overlayed .game-content-holder .expand-chat {
    z-index: 21;
}
.raise-bar-open .game-content-holder .expand-chat {
    bottom: 18rem;
}
.raise-bar-open.portrait .game-content-holder .expand-chat {
    /*bottom: 18rem;*/
    /* have to account for raise bar vertical */
    bottom: calc(18rem + calc(420px * var(--ui-scale)));

    /* undo centering by default */
    /*margin: 0;
    top: auto;*/
}
[data-scale-table-size="1.15"].portrait.raise-bar-open .game-content-holder .expand-chat {
    /*bottom: 14rem;  */
    /* have to account for raise bar vertical */
    bottom: calc(18rem + calc(420px * var(--ui-scale)));
}
[data-scale-table-size="1.2"].portrait.raise-bar-open .game-content-holder .expand-chat {
    /*bottom: 14rem;*/
    /* have to account for raise bar vertical */
    bottom: calc(18rem + calc(420px * var(--ui-scale)));
}
[data-scale-table-size="1.3"].portrait.raise-bar-open .game-content-holder .expand-chat {
    /*bottom: 15rem;*/
    /* have to account for raise bar vertical */
    bottom: calc(16rem + calc(420px * var(--ui-scale)));
}
.game-content-holder .expand-chat .collapse {
    display: none;
}
.game-content-holder .expand-chat:hover {
    filter: brightness(120%);
}
.portrait .game-content-holder .expand-chat {
    display: block !important;
    --chat-icon-scale: 1.4;
}
.portrait .game-content-holder .expand-chat[data-action-type="collapse_chat"] {
    --chat-icon-scale: 1;
    position: absolute;
    left: 0;
    bottom: calc(240px * var(--ui-scale));
    right: auto;

    padding: calc(35px * var(--ui-scale) * var(--chat-icon-scale)) calc(15px * var(--ui-scale) * var(--chat-icon-scale));
    height: max-content;
    background: white;

    color: #000;
    border-radius: 0;
    border-top-right-radius: calc(15px * var(--ui-scale) * var(--chat-icon-scale));
    border-bottom-right-radius: calc(15px * var(--ui-scale) * var(--chat-icon-scale));
    font-size: calc(4.5em * var(--chat-icon-scale));
    font-weight: 900;
}
.portrait .game-content-holder .expand-chat[data-action-type="collapse_chat"] .chat-icon,
.portrait .game-content-holder .expand-chat[data-action-type="collapse_chat"] .icon-text {
    display: none !important;
}
.portrait .game-content-holder .expand-chat[data-action-type="collapse_chat"] .collapse {
    display: block !important;
}
.portrait .game-content-holder .expand-chat .player-action-required {
    display: none;
}
.portrait #game_content.this-player-turn .game-content-holder .expand-chat[data-action-type="collapse_chat"] .player-action-required {
    display: flex;
    position: absolute;
    bottom: calc(100% + calc(15px * var(--ui-scale)));
    right: calc(0px * var(--ui-scale));
    left: calc(0px * var(--ui-scale));
    margin: 0 auto;

    height: 1.44em;
    width: 1.44em;
    justify-content: center;
    align-items: center;

    border-radius: 50%;
    background: rgba(249, 10, 15, 1);

    color: white;
    line-height: 1em;
    font-size: 0.4em;
    font-weight: 600;

    animation: animateActionBG 1.8s ease-in-out infinite;
    transform: translateZ(0);
}
@keyframes animateActionBG {
    0% { background: rgba(249, 10, 15, 1); }
    50% { background: rgba(249, 10, 15, 0.5); }
    100% { background: rgba(249, 10, 15, 1); }
}
.game-content-holder .expand-chat .icon-text,
.chat-content-holder .expand-chat .icon-text {
    text-align: center;
    font-size: calc(14px * var(--ui-scale) * var(--chat-icon-scale));
    color: white;
    font-family: var(--font-fam-btn);
    font-weight: bold;
    padding-top: calc(2px * var(--ui-scale) * var(--chat-icon-scale));
}
.game-content-holder .expand-chat .chat-icon,
.chat-content-holder .expand-chat .chat-icon {
    position: relative;
    background: white;
    border: calc(1px * var(--ui-scale) * var(--chat-icon-scale)) white solid;
    width: calc(25px * var(--ui-scale) * var(--chat-icon-scale));
    height: calc(25px * var(--ui-scale) * var(--chat-icon-scale));

    border-radius: calc(25px * var(--ui-scale) * var(--chat-icon-scale));

    font-size: calc(18px * var(--ui-scale) * var(--chat-icon-scale));
    line-height: calc(40px * var(--ui-scale) * var(--chat-icon-scale));
    text-align: center;
    color: white;
    font-family: var(--font-fam-reg);
    font-weight: 600;

    margin: 0 auto;
    margin-bottom: calc(5px * var(--ui-scale) * var(--chat-icon-scale));
    margin-top: calc(3px * var(--ui-scale) * var(--chat-icon-scale));
}
.is-dark-lobby-background .game-content-holder .expand-chat .chat-icon,
.is-dark-lobby-background .chat-content-holder .expand-chat .chat-icon {
    background: #000000;
    color: #ffffff;
    border-color: #000000;
}
.game-content-holder .expand-chat .chat-icon:before,
.chat-content-holder .expand-chat .chat-icon:before {
    content: '';
    display: block;
    position: absolute;
    right: calc(-3px * var(--ui-scale) * var(--chat-icon-scale));
    bottom: calc(-3px * var(--ui-scale) * var(--chat-icon-scale));
    z-index: -1;

    width: 0;
    height: 0;
    border-style: solid;
    border-width: calc(10px * var(--ui-scale) * var(--chat-icon-scale)) calc(5px * var(--ui-scale) * var(--chat-icon-scale)) 0 calc(5px * var(--ui-scale) * var(--chat-icon-scale));
    border-color: #ffffff transparent transparent transparent;
    border-radius: 0 0 calc(2.5px * var(--ui-scale) * var(--chat-icon-scale)) calc(2.5px * var(--ui-scale) * var(--chat-icon-scale));
    transform: rotate(-45deg);
}
.is-dark-lobby-background .game-content-holder .expand-chat .chat-icon:before,
.is-dark-lobby-background .chat-content-holder .expand-chat .chat-icon:before {
    border-color: #000000 transparent transparent transparent;
}
.game-content-holder .expand-chat .chat-icon:not([data-unread-messages="0"]),
.chat-content-holder .expand-chat .chat-icon:not([data-unread-messages="0"]) {
    background: var(--clr-red);
}
.game-content-holder .expand-chat .chat-icon:not([data-unread-messages="0"]):after,
.chat-content-holder .expand-chat .chat-icon:not([data-unread-messages="0"]):after {
    content: attr(data-unread-messages);
    font-size: 0.7em;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: max-content;
    height: max-content;
    font-weight: bold;
}