.table-preview {
    /* some of these are potentially unnecessary, just copying over for now */
    --table-wh-ratio: 1.8463;
    --table-wh-ratio-90: 1.675;
    --table-wh-ratio-85: 1.600;
    --table-wh-ratio-80: 1.520;
    --scale-table-size: 0.3;

    /* just have these below vars so it's easier to copy over code from regular game */
    --ui-scale: 1;
    --canvas-scale: 1;

    --player-table-ui-scale: 1.5;
    --player-hand-cards-scale: 0.4;
    --player1-hand-cards-scale: 0.45;

    --player-info-bg: var(--clr-black);
    --player-info-border-clr: #ffffff;
    --player-info-text-clr: #ffffff;

    padding: 20px;
    background: var(--clr-green-2);

    overflow: hidden;
}


#playTable {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;

    width: calc(1000px * var(--canvas-scale));
    height: calc(1000px / var(--table-wh-ratio) * var(--canvas-scale));
}
#playTable::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url('../images/poker_table.webp') no-repeat center center;
    background-size: 100% 100%;
}
#playTable.portrait {
    --table-wh-ratio: var(--table-wh-ratio-80);

    width: calc(1000px / var(--table-wh-ratio) * var(--canvas-scale) * var(--scale-table-size));
    height: calc(1000px * var(--canvas-scale) * var(--scale-table-size));
}
#playTable.portrait::before {
    background: url('../images/table_size_80_vertical.webp') no-repeat center center;
    background-size: 100% 100%;
}
/*
[data-scale-table-size="1"].portrait #playTable {
    bottom: calc(130px * var(--ui-scale));
    height: calc(900px * var(--canvas-scale) * var(--scale-table-size));
}*/

#playTable .player {
    z-index: 1;
}
#playTable .player {
    --player-ui-scale: calc(var(--canvas-scale) * var(--player-table-ui-scale));

    position: absolute;
    padding: calc(20px * var(--player-ui-scale));
    min-width: clamp(calc(100px * var(--player-ui-scale)), 30px, 30px);
    width: max-content;

    z-index: 5; /* allows to place bg chips origin for animations behind player info*/
}
#playTable.portrait .player {
    /* increase player boxes relative to table on portrait */
    --player-ui-scale: calc(var(--canvas-scale) * var(--player-table-ui-scale) * var(--scale-table-size));
    --player-hand-cards-scale: calc(0.40 * var(--scale-table-size));
    --player1-hand-cards-scale: calc(0.45 * var(--scale-table-size));
} /* TODO ideally move these elsewhere for more control on specific sizes*/
#playTable.portrait {
    --table-community-cards-gap: calc(12px * var(--canvas-scale) * var(--scale-table-size));
    --table-community-cards-scale: calc(0.45 * var(--scale-table-size));
}
/*#playTable .player.folded,*/
/*#playTable .player.bankrupted,*/
#playTable .player.away,
    /*#playTable .player.waiting_to_play,*/
#playTable .player.exiting {
    filter: brightness(30%);
}

#playTable .player .left-side {
    /*flex: 1 1 100px;*/
}
#playTable .player .info {
    padding: calc(13px * var(--player-ui-scale));
    /*padding-left: calc(60px * var(--player-ui-scale));*/
    padding-left: calc(15px * var(--player-ui-scale));

    min-width: 16ch;
    min-height: calc(28px * var(--player-ui-scale));

    background: var(--player-info-bg);

    font-size: calc(24px * var(--player-ui-scale));
    line-height: calc(24px * var(--player-ui-scale));
    text-align: center;
    color: var(--player-info-text-clr);

    border: clamp(1px, calc(1.5px * var(--player-ui-scale)), 1.5px) solid var(--player-info-border-clr);
    border-radius: calc(15px * var(--player-ui-scale));
}
.portrait #playTable .player .info {
    /* make border a bit bigger on mobile, as it tends to look better?*/
    border: clamp(1px, calc(1.5px * var(--player-ui-scale)), 1.5px)solid var(--player-info-border-clr);
}
#playTable .player.has-membership .info {
    --player-info-border-clr: var(--clr-gold);
}
#playTable .player .info:not(.expand-to-parent) {
    max-width: 16ch;
}
#game_content #playTable .player .info::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: calc(20px * var(--player-ui-scale));
    right: calc(20px * var(--player-ui-scale));
    bottom: calc(20px * var(--player-ui-scale));
    left: calc(20px * var(--player-ui-scale));
    border-radius: calc(31px * var(--player-ui-scale));
    transition: box-shadow 250ms ease-in-out;
}
#playTable .player .info .name {
    min-width: 11ch; /* seems like 11ch should be fine? */
    max-width: 11ch; /* seems like 11ch should be fine? */
    font-size: calc(22px * var(--player-ui-scale));
    line-height: calc(24px * var(--player-ui-scale));
    overflow: hidden;
    margin-bottom: calc(5px * var(--player-ui-scale));
    /*max-width: calc(100% - 28px * var(--player-ui-scale));*/
    margin-left: calc(42px * var(--player-ui-scale));
    text-align: left;
}
#playTable .player .info .name a {
    font-weight: inherit;
}
#playTable .player.exiting .name,
#playTable .player.lower-line-height .name/*,
#playTable .player.waiting_to_play .name*/ {
    line-height: 1.05;
}
#playTable .player[data-seat-location-id="6"] .info .name,
#playTable .player[data-seat-location-id="7"] .info .name,
#playTable .player[data-seat-location-id="8"] .info .name,
#playTable .player[data-seat-location-id="9"] .info .name {
    margin-left: calc(17px * var(--player-ui-scale));
    margin-right: calc(0px * var(--player-ui-scale));
    padding-right: calc(0px * var(--player-ui-scale));
    text-align: right;
}
#playTable .player .info .name a:hover {
    text-decoration: underline;
}
#playTable .player .info .name > span {
    font-size: .7em;
    font-style: italic;
}
#playTable .player .info .stack {
    font-size: calc(22px * var(--player-ui-scale));
    position: relative;
    font-weight: 600;
    width: max-content;
    margin: 0 auto;
    text-align: left;
    margin-left: calc(42px * var(--player-ui-scale));
}
#playTable .player[data-seat-location-id="6"] .info .stack,
#playTable .player[data-seat-location-id="7"] .info .stack,
#playTable .player[data-seat-location-id="8"] .info .stack,
#playTable .player[data-seat-location-id="9"] .info .stack {
    margin-left: auto;
    margin-right: calc(40px * var(--player-ui-scale));
    padding-right: calc(5px * var(--player-ui-scale));
    text-align: right;
}
#playTable .player .info .profile-avatar {
    --avatar-size: calc(88px * var(--player-ui-scale));

    position: absolute;
    top: 0;
    left: calc(-18px * var(--player-ui-scale));
    bottom: 0;
    margin: auto 0;

    border-radius: 50%;
    /*border: clamp(1px, calc(1.5px * var(--player-ui-scale)), 1.5px) solid var(--player-info-border-clr);*/
    cursor: pointer;
}
#playTable .player .info .profile-avatar:after {
    content: '';
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    border-radius: 50%;
    border: clamp(1px, calc(1.5px * var(--player-ui-scale)), 1.5px) solid var(--player-info-border-clr);
}
#playTable .player[data-seat-location-id="6"] .info .profile-avatar,
#playTable .player[data-seat-location-id="7"] .info .profile-avatar,
#playTable .player[data-seat-location-id="8"] .info .profile-avatar,
#playTable .player[data-seat-location-id="9"] .info .profile-avatar {
    right: calc(-18px * var(--player-ui-scale));
    left: auto;
}
#playTable .player .player-icons {
    --action-note-y-offset: 8px;
    position: absolute;
    font-size: 3em;

    top: initial;
    bottom: calc(100% - calc(var(--action-note-y-offset) * var(--player-ui-scale)));
    left: calc(40px * var(--player-ui-scale));

    margin: 0 auto;

    transform: translateX(calc(0.6 * var(--player1-hand-cards-scale) * var(--card-width-default) - 0%));
}
#playTable .player .player-icons .fa-seat-airline {
    font-size: calc(21px * var(--player-ui-scale));
    vertical-align: top;
    margin-right: calc(0px * var(--player-ui-scale));
}
#playTable .player.force-in-front-all .player-icons:not(.force-in-front-all) {
    /* as player DOM is forced in front, we have to unbrighten any of their cards that are not part of winningCardsIds */
    filter: brightness(30%);
}
#playTable .player .player-icons {
      transform: none;

      top: calc(33px * var(--player-ui-scale));
      right: calc(33px * var(--player-ui-scale));
      left: auto;
      bottom: auto;
      margin: 0;
}

#playTable .player[data-seat-location-id="6"] .player-icons,
#playTable .player[data-seat-location-id="7"] .player-icons,
#playTable .player[data-seat-location-id="8"] .player-icons,
#playTable .player[data-seat-location-id="9"] .player-icons {
    left: calc(33px * var(--player-ui-scale));
    right: unset;
}
/*#playTable .player.folded,*/
/*#playTable .player.bankrupted,*/
#playTable .player.away,
#playTable .player.exiting {
    filter: brightness(30%);
}
/* START EMPTY SEAT SPECIFICS */
#playTable .player .seat-info .info {
    /*padding-left: calc(10px * var(--player-ui-scale))*/
}
#playTable .player .seat-info .info.expand-to-parent {
    padding: 0;
    /*transition: background-color ease-in-out 250ms;*/

    /*opacity: 0.6;*/
    background: rgba(0,0,0,0.3);
    border: clamp(1px, calc(1.5px * var(--player-ui-scale)), 1.5px) solid rgba(255,255,255,0.3);

    pointer-events: none; /* we just want to disable it as it's not clickable */
    min-width: 18ch;
}
#playTable .player .seat-info .info.expand-to-parent:hover {
    background: #272727;
}
#playTable .player .info .join-seat {
    font-weight: 600;
    min-height: 1.4em;
    font-size: 1em;
    border: none;}
#playTable .player .info .join-seat:hover {
    transform: scale(1);
}
#playTable .player .seat-info .info.expand-to-parent .join-seat {
    background: none;
    color: white;

    padding: 0;
    width: calc(219px * var(--player-ui-scale));
    height: calc(79px * var(--player-ui-scale));
    line-height: calc(79px * var(--player-ui-scale));
}
#playTable .player.is-empty-seat .seat-info .info.expand-to-parent {
    min-width: 18.5ch;
}

/* END EMPTY SEAT SPECIFICS */
#playTable .player .seat-info .info.is-seat-request {
    width: calc(219px * var(--player-ui-scale));
    height: calc(79px * var(--player-ui-scale));
    justify-content: flex-start;
}

#playTable .player {
    transform: translate(-50%, -50%);
}
/* Player Seat positions Landscape */
#playTable .player.pos-type-s2 {
    left: -1%;
    top: 50%;
}
#playTable .player.pos-type-s3 {
    left: 98%;
    top: 50%;
}
#playTable .player[data-seat-location-id="0"] {
    left: 50%;
    top: 97%;
}
#playTable .player.is-this-player {
    z-index: 6; /* otherwise seatloc 1 display over its cards)*/
}
#playTable .player[data-seat-location-id="1"] {
    left: 16%;
    top: 95%;
}
#playTable .player[data-seat-location-id="2"] {
    left: 1%;
    top: 62%;
}
#playTable .player[data-seat-location-id="3"] {
    left: 1%;
    top: 36%;
}
#playTable .player[data-seat-location-id="4"] {
    left: 16%;
    top: 3%;
}
#playTable .player[data-seat-location-id="5"] {
    left: 50%;
    top: 1%;
}
#playTable .player[data-seat-location-id="6"] {
    left: 84%;
    top: 3%;
}
#playTable .player[data-seat-location-id="7"] {
    left: 99%;
    top: 36%;
}
#playTable .player[data-seat-location-id="8"] {
    left: 99%;
    top: 62%;
}
#playTable .player[data-seat-location-id="9"] {
    left: 84%;
    top: 95%;
}
/* Player Seat Positions Portrait */
#playTable.portrait .player[data-seat-location-id="0"] {
    left: 50%;
    top: 97%;
}
#playTable.portrait .player[data-seat-location-id="5"].is-empty-seat {
    left: 46%;
}
#playTable.portrait .player[data-seat-location-id="1"] {
    left: 13%;
    top: 82%;
}
#playTable.portrait .player[data-seat-location-id="2"] {
    left: 13%;
    top: 66%;
}
#playTable.portrait .player[data-seat-location-id="3"] {
    left: 13%;
    top: 35%;
}
#playTable.portrait .player[data-seat-location-id="4"] {
    left: 13%;
    top: 19%;
}
#playTable.portrait .player[data-seat-location-id="5"] {
    left: 50%;
    top: 2%;
}
#playTable.portrait .player[data-seat-location-id="6"] {
    left: 87%;
    top: 19%;
}
#playTable.portrait .player[data-seat-location-id="7"] {
    left: 87%;
    top: 35%;
}
#playTable.portrait .player[data-seat-location-id="8"] {
    left: 87%;
    top: 66%;
}
#playTable.portrait .player[data-seat-location-id="9"] {
    left: 87%;
    top: 82%;
}

/* Some additional corrections */
#playTable.portrait .player[data-seat-location-id="1"].is-empty-seat,
#playTable.portrait .player[data-seat-location-id="2"].is-empty-seat,
#playTable.portrait .player[data-seat-location-id="3"].is-empty-seat,
#playTable.portrait .player[data-seat-location-id="4"].is-empty-seat {
    left: 9%;
}
#playTable.portrait .player[data-seat-location-id="6"].is-empty-seat,
#playTable.portrait .player[data-seat-location-id="7"].is-empty-seat,
#playTable.portrait .player[data-seat-location-id="8"].is-empty-seat,
#playTable.portrait .player[data-seat-location-id="9"].is-empty-seat {
    left: 91%;
}