/*
 * POKER TABLE LAYOUT
 *
 * The same three-column shape the Blackjack table uses: the leaderboard on
 * the left, the felt and its controls in the middle, and how-to-play plus the
 * table chat on the right. The felt itself is untouched -- the theme art, the
 * squishy mascots and the lucky charms hanging off the seats all still live
 * inside it and are deliberately not restyled here.
 */

#pokerScreen.poker-reference .poker-reference-layout {
    display: grid;
    grid-template-columns: minmax(210px, 268px) minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
    /* the foot clears the docked control bar on a phone; see syncPokerControlsInset */
    padding: 10px 14px calc(18px + var(--poker-controls-inset, 0px));
}

#pokerScreen.poker-reference .poker-reference-center {
    display: grid;
    min-width: 0;
    gap: 8px;
}

/* ---------- leaderboard ---------- */

#pokerScreen.poker-reference .poker-participants {
    position: sticky;
    top: 12px;
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
    padding: 13px 12px 15px;
    border: 1px solid rgba(228, 190, 72, .55);
    border-radius: 20px;
    background: rgba(2, 26, 17, .82);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .42);
}

#pokerScreen.poker-reference .poker-leaderboard-title {
    margin: 0;
    color: #ffe9a6;
    font-size: 15px;
    font-weight: 1000;
    letter-spacing: .1em;
    text-align: center;
}

#pokerScreen.poker-reference .poker-leaderboard-subtitle {
    margin: 0 0 4px;
    color: #b8cfc2;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-align: center;
}

#pokerScreen.poker-reference .poker-participant {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 4px 9px;
    padding: 8px 10px;
    border: 1px solid rgba(228, 190, 72, .34);
    border-radius: 14px;
    background: rgba(4, 40, 26, .78);
}

#pokerScreen.poker-reference .poker-participant.you {
    border-color: #ffe28b;
    background: rgba(11, 62, 39, .9);
}

#pokerScreen.poker-reference .poker-participant.current {
    border-color: #8fffc7;
    box-shadow: 0 0 0 1px rgba(143, 255, 199, .5), 0 0 18px rgba(60, 220, 150, .28);
}

#pokerScreen.poker-reference .poker-participant.folded { opacity: .5; }

#pokerScreen.poker-reference .poker-participant.winner {
    border-color: #54f58d;
    box-shadow: 0 0 20px rgba(60, 230, 140, .5);
}

#pokerScreen.poker-reference .poker-participant > .rank {
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    color: #12210c;
    background: linear-gradient(180deg, #f3c95b, #c79018);
    font-size: 10px;
    font-weight: 1000;
}

#pokerScreen.poker-reference .poker-participant > strong {
    min-width: 0;
    overflow: hidden;
    color: #f4fff8;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#pokerScreen.poker-reference .poker-participant > .row {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

#pokerScreen.poker-reference .poker-participant .action {
    color: #a9c6b7;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .07em;
}

#pokerScreen.poker-reference .poker-participant .jackpot {
    color: #ffe9a6;
    font-size: 11px;
    font-weight: 1000;
}

/* ---------- right rail ---------- */

#pokerScreen.poker-reference .poker-reference-rail {
    position: sticky;
    top: 12px;
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
}

#pokerScreen.poker-reference .pkr-side-panel {
    padding: 13px 14px 15px;
    border: 1px solid rgba(228, 190, 72, .55);
    border-radius: 20px;
    background: rgba(2, 26, 17, .82);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .42);
}

#pokerScreen.poker-reference .pkr-side-panel h3 {
    margin: 0 0 8px;
    color: #ffe9a6;
    font-size: 13px;
    font-weight: 1000;
    letter-spacing: .08em;
}

#pokerScreen.poker-reference .pkr-how-to p,
#pokerScreen.poker-reference .pkr-how-to li {
    color: #dceee4;
    font-size: 11px;
    line-height: 1.5;
}

#pokerScreen.poker-reference .pkr-how-to p { margin: 0 0 8px; }
#pokerScreen.poker-reference .pkr-how-to ul { margin: 0 0 8px; padding-left: 17px; }
#pokerScreen.poker-reference .pkr-how-to li { margin-bottom: 5px; }
#pokerScreen.poker-reference .pkr-how-to strong { color: #ffe9a6; }

#pokerScreen.poker-reference .pkr-how-to-order {
    margin: 0;
    padding-top: 8px;
    border-top: 1px solid rgba(228, 190, 72, .28);
    font-size: 10px;
}

/* ---------- controls ---------- */

/*
 * The words on these buttons come from the translation table, so the icon is
 * drawn here rather than baked into the label -- switching language must not
 * take the emoji with it.
 */
#pokerScreen.poker-reference .controls-row .action-button::before {
    margin-right: 6px;
    font-size: 1.05em;
    line-height: 1;
}

#pokerScreen.poker-reference #foldButton::before   { content: "\1F91A"; }
#pokerScreen.poker-reference #checkButton::before  { content: "\1F44C"; }
#pokerScreen.poker-reference #callButton::before   { content: "\1F4DE"; }
/* Bet and raise share one slot and one label, so they share one icon. */
#pokerScreen.poker-reference #betButton::before,
#pokerScreen.poker-reference #raiseButton::before  { content: "\1F4C8"; }
#pokerScreen.poker-reference #allInButton::before  { content: "\1F525"; }

#pokerScreen.poker-reference .poker-inline-bet {
    display: grid;
    gap: 7px;
    padding: 9px 11px 11px;
    border: 1px solid rgba(228, 190, 72, .44);
    border-radius: 18px;
    background: rgba(0, 24, 16, .72);
}

#pokerScreen.poker-reference .poker-chip-label {
    color: #cfe6d9;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .1em;
    text-align: center;
}

#pokerScreen.poker-reference #pokerChips {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    align-items: center;
    justify-items: center;
    width: min(100%, 644px) !important;
    margin-inline: auto !important;
    gap: 4px !important;
    padding: 6px 4px 8px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
}

#pokerScreen.poker-reference #pokerChips > .chip-option {
    width: min(100px, 100%) !important;
    min-width: 0 !important;
    max-width: 100px !important;
    height: auto !important;
    min-height: 52px !important;
    max-height: none !important;
    aspect-ratio: 1;
    margin: 0;
    scroll-snap-align: none;
}

/*
 * The wager strip is one row: the chip rail, then the amount with its two
 * tools stacked underneath it, sitting to the right of the last chip.
 */
#pokerScreen.poker-reference .poker-chip-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 210px);
    align-items: center;
    gap: 10px;
    min-width: 0;
}

#pokerScreen.poker-reference .poker-bet-tools {
    display: grid;
    gap: 5px;
    min-width: 0;
}

#pokerScreen.poker-reference .poker-bet-tools > input {
    width: 100%;
    min-height: 38px;
    padding: 8px 11px;
    border: 1px solid rgba(228, 190, 72, .5);
    border-radius: 12px;
    color: #f2fff7;
    background: rgba(0, 24, 16, .8);
    font: inherit;
    font-size: 13px;
    text-align: center;
}

#pokerScreen.poker-reference .poker-bet-tool-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}

#pokerScreen.poker-reference .poker-bet-tool-row > button {
    min-height: 34px;
    padding: 6px 8px;
    font-size: 10px;
}

/* ---------- narrower screens ---------- */

@media (max-width: 1180px) {
    #pokerScreen.poker-reference .poker-reference-layout {
        grid-template-columns: minmax(180px, 232px) minmax(0, 1fr);
    }
}

@media (max-width: 860px) {
    #pokerScreen.poker-reference .poker-reference-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
        padding: 6px 8px calc(14px + var(--poker-controls-inset, 0px));
    }
    #pokerScreen.poker-reference .poker-reference-rail { position: static; }
    /*
     * One player per row. Filling the width with 132px columns put two
     * players side by side and pushed the rest off the right edge, so reading
     * the table meant scrolling sideways through a list that is meant to be
     * read top to bottom. It scrolls down now, and only when it has to.
     */
    #pokerScreen.poker-reference .poker-participants {
        grid-template-columns: minmax(0, 1fr);
        max-height: 24vh;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 9px 8px 11px;
    }
    #pokerScreen.poker-reference #pokerChips > .chip-option {
        width: min(62px, 100%) !important;
        max-width: 62px !important;
        min-height: 46px !important;
    }
}

/* the how-to-play folds shut where there is no room to show it open */
#pokerScreen.poker-reference .pkr-how-to > summary {
    margin: 0;
    color: #ffe9a6;
    font-size: 13px;
    font-weight: 1000;
    letter-spacing: .08em;
    list-style: none;
    cursor: pointer;
}

#pokerScreen.poker-reference .pkr-how-to > summary::-webkit-details-marker { display: none; }
#pokerScreen.poker-reference .pkr-how-to[open] > summary { margin-bottom: 8px; }

#pokerScreen.poker-reference .pkr-how-to > summary::after {
    content: " \25BE";
    color: #b8cfc2;
}

#pokerScreen.poker-reference .pkr-how-to[open] > summary::after { content: " \25B4"; }

/*
 * With the control bar docked over the foot of the screen there is no right
 * hand side to put a rail on, so it sits above the felt where it can still be
 * reached. The leaderboard stays first.
 */
#pokerScreen.poker-reference .poker-reference-layout.controls-docked .poker-participants { order: 0; }
#pokerScreen.poker-reference .poker-reference-layout.controls-docked .poker-reference-rail { order: 1; }
#pokerScreen.poker-reference .poker-reference-layout.controls-docked .poker-reference-center { order: 2; }

/* your hole cards open one tap at a time */
#pokerScreen.poker-reference .poker-reveal-card {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
}

/*
 * The zone around these is pointer-events:none for the whole hand, so the
 * buttons have to opt back in explicitly. Inheriting it is exactly what
 * stopped a tap from ever reaching them.
 */
#pokerScreen.poker-reference .poker-reveal-card { pointer-events: auto; }
#pokerScreen.poker-reference .poker-reveal-card .card { pointer-events: none; }

#pokerScreen.poker-reference .poker-reveal-card.ready {
    animation: card-ready-pulse 1s ease-in-out infinite alternate;
}

#pokerScreen.poker-reference .poker-reveal-card:disabled { cursor: default; }

/*
 * On a phone the seats crowded the felt and pushed everything into a long
 * scroll, and they are not needed: the leaderboard says who is in and with
 * what, and the showdown popup opens every hand at the end. What is left on
 * the felt is the pot, the shared cards, and your own two.
 */
#pokerScreen.poker-reference .player-seat { display: none !important; }

@media (max-width: 860px) {
    /* the leaderboard drops below the table rather than pushing it down */
    #pokerScreen.poker-reference .poker-reference-layout.controls-docked .poker-reference-center { order: 1; }
    #pokerScreen.poker-reference .poker-reference-layout.controls-docked .poker-participants { order: 2; }

    /* the felt is the first thing on screen, so the brand bar goes */
    #pokerScreen.poker-reference .topbar .brand,
    #pokerScreen.poker-reference .table-info { display: none !important; }

    #pokerScreen.poker-reference .poker-reference-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    /* the wager strip stacks only once there is genuinely no room */
    #pokerScreen.poker-reference .poker-chip-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }
}

/*
 * The wallet top-up happens on its own now, so the box does not need a place
 * on the table. The controls stay in the DOM because the socket flow and the
 * state rendering both still drive them.
 */
#pokerScreen.poker-reference #topUpContainer,
#pokerScreen.poker-reference .bet-info {
    display: none !important;
}

/*
 * Except that it does need a place on the table, and this rule is why there
 * was no way to move wallet chips into play. The automatic top-up it defers
 * to only fires when a player is already out of chips; a player with chips in
 * front of them who simply wanted more had nothing to press, on any screen.
 *
 * The box has a home now -- the panel beside the cards, under the wallet it
 * draws from -- so it is allowed back whenever it is in there.
 */
#pokerScreen.poker-reference #pokerWalletPanel #topUpContainer.show {
    display: block !important;
}

/* =========================================================
   TABLE CHAT
   =========================================================

   On a wide screen the chat sits under the leaderboard in the left column.
   On a phone there is no column to put it in, so it becomes a sheet that the
   floating button opens, and the button glows when somebody has spoken.
   ========================================================= */

#pokerScreen.poker-reference .poker-reference-layout > .poker-participants {
    grid-column: 1;
    grid-row: 1;
}

#pokerScreen.poker-reference .poker-reference-layout > .poker-chat-panel {
    grid-column: 1;
    grid-row: 2;
}

#pokerScreen.poker-reference .poker-reference-layout > .poker-reference-center {
    grid-column: 2;
    grid-row: 1 / span 2;
}

#pokerScreen.poker-reference .poker-chat-panel {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    margin-top: 10px;
    padding: 12px 12px 14px;
    border: 1px solid rgba(228, 190, 72, .55);
    border-radius: 20px;
    background: rgba(2, 26, 17, .82);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .42);
}

#pokerScreen.poker-reference .poker-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

#pokerScreen.poker-reference .poker-chat-head h3 {
    margin: 0;
    color: #ffe9a6;
    font-size: 13px;
    font-weight: 1000;
    letter-spacing: .08em;
}

/* the close button belongs to the phone sheet; the column has nothing to shut */
#pokerScreen.poker-reference .poker-chat-close { display: none; }

#pokerScreen.poker-reference .poker-chat-log {
    display: grid;
    align-content: start;
    gap: 7px;
    min-height: 120px;
    max-height: 320px;
    padding-right: 4px;
    overflow-y: auto;
}

#pokerScreen.poker-reference .poker-chat-empty {
    margin: 0;
    color: #8fae9d;
    font-size: 11px;
}

#pokerScreen.poker-reference .poker-chat-line {
    display: grid;
    gap: 2px;
    padding: 7px 9px;
    border-radius: 12px;
    background: rgba(4, 40, 26, .7);
}

#pokerScreen.poker-reference .poker-chat-line.system {
    background: transparent;
    color: #9fc0ae;
    font-size: 10px;
    font-style: italic;
    text-align: center;
}

#pokerScreen.poker-reference .poker-chat-who {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* the name carries the speaker, so it is set large and heavy */
#pokerScreen.poker-reference .poker-chat-who strong {
    overflow: hidden;
    color: inherit;
    font-size: 16px;
    font-weight: 1000;
    letter-spacing: .01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}


#pokerScreen.poker-reference .poker-chat-text {
    color: #eafff3;
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

#pokerScreen.poker-reference .poker-chat-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
}

#pokerScreen.poker-reference .poker-chat-form input {
    min-width: 0;
    min-height: 38px;
    padding: 8px 11px;
    border: 1px solid rgba(228, 190, 72, .5);
    border-radius: 12px;
    color: #f2fff7;
    background: rgba(0, 24, 16, .8);
    font: inherit;
    font-size: 13px;
}

#pokerScreen.poker-reference .poker-chat-form button {
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid rgba(228, 190, 72, .6);
    border-radius: 12px;
    color: #12210c;
    background: linear-gradient(180deg, #f3c95b, #c79018);
    font: inherit;
    font-size: 12px;
    font-weight: 1000;
    cursor: pointer;
}


/* =========================================================
   FLOATING BUTTONS
   ========================================================= */

#pokerScreen.poker-reference .poker-fab {
    position: fixed;
    z-index: 260000;
    display: none;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid rgba(243, 201, 91, .75);
    border-radius: 50%;
    color: #12210c;
    background: linear-gradient(180deg, #f8dc69, #dcae18);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .55);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

#pokerScreen.poker-reference .poker-fab-fullscreen {
    top: calc(10px + env(safe-area-inset-top));
    right: 12px;
}

#pokerScreen.poker-reference .poker-fab-chat {
    right: 12px;
    bottom: calc(14px + var(--poker-controls-inset, 0px) + env(safe-area-inset-bottom));
}

#pokerScreen.poker-reference .poker-fab-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 13px;
    height: 13px;
    border: 2px solid #0a2318;
    border-radius: 50%;
    background: #ff4d6d;
}

#pokerScreen.poker-reference .poker-fab.has-unread {
    animation: poker-fab-unread .9s ease-in-out infinite alternate;
}

@keyframes poker-fab-unread {
    from { box-shadow: 0 8px 22px rgba(0, 0, 0, .55); }
    to   { box-shadow: 0 8px 22px rgba(0, 0, 0, .55), 0 0 26px rgba(255, 214, 90, 1); }
}


/* =========================================================
   YOUR TURN POP
   =========================================================

   One short bubble over your own cards, as wide as the words inside it. The
   long banner across the felt was saying the same thing twice as loudly.
   ========================================================= */

#pokerScreen.poker-reference .turn-banner-stage { display: none !important; }

#pokerScreen.poker-reference .poker-turn-pop {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: max-content;
    max-width: min(280px, 86vw);
    margin: 0 auto 4px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 233, 166, .8);
    border-radius: 999px;
    color: #12210c;
    background: linear-gradient(180deg, #ffeeb4, #f3c95b);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .5), 0 0 22px rgba(255, 214, 90, .55);
    font-size: 14px;
    font-weight: 1000;
    letter-spacing: .06em;
    white-space: nowrap;
    animation: poker-turn-pop-in .28s ease-out;
}

#pokerScreen.poker-reference .poker-turn-pop[hidden] { display: none; }

/* somebody else is deciding: the same bubble, quieter */
#pokerScreen.poker-reference .poker-turn-pop.is-thinking {
    color: #dff3e6;
    border-color: rgba(228, 190, 72, .5);
    background: rgba(3, 26, 17, .92);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}

#pokerScreen.poker-reference .poker-turn-pop__icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

@keyframes poker-turn-pop-in {
    from { opacity: 0; transform: translateY(6px) scale(.94); }
    to   { opacity: 1; transform: none; }
}

#pokerScreen.poker-reference #playerCardZone { position: relative; text-align: center; }


/* =========================================================
   OPEN YOUR CARDS
   ========================================================= */

#pokerScreen.poker-reference .poker-card-hint {
    position: absolute;
    z-index: 12;
    pointer-events: none;
    transform: translate(-50%, -100%);
    font-size: 34px;
    line-height: 1;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .7));
    animation: poker-hint-bob .9s ease-in-out infinite;
}

#pokerScreen.poker-reference .poker-card-hint[hidden] { display: none; }

@keyframes poker-hint-bob {
    0%, 100% { transform: translate(-50%, -100%); }
    50%      { transform: translate(-50%, calc(-100% - 10px)); }
}


/* =========================================================
   DESKTOP CONTROLS
   =========================================================

   There is a whole band of empty felt under the table on a wide screen, and
   the controls were sitting in the middle of it at phone size.
   ========================================================= */

@media (min-width: 861px) {
    #pokerScreen.poker-reference .controls {
        width: min(1180px, 100%);
        padding: 16px 20px 18px;
        border-radius: 20px;
    }

    #pokerScreen.poker-reference .controls-row { gap: 12px; }

    #pokerScreen.poker-reference .controls-row .action-button {
        min-height: 62px;
        border-radius: 14px;
        font-size: 17px;
        letter-spacing: .04em;
    }

    #pokerScreen.poker-reference .poker-inline-bet {
        gap: 10px;
        padding: 12px 16px 14px;
    }

    #pokerScreen.poker-reference #pokerChips {
        width: min(100%, 780px) !important;
        gap: 10px !important;
        padding: 8px 4px 10px !important;
    }

    #pokerScreen.poker-reference #pokerChips > .chip-option {
        width: min(122px, 100%) !important;
        max-width: 122px !important;
        min-height: 74px !important;
    }

    #pokerScreen.poker-reference .poker-chip-row {
        grid-template-columns: minmax(0, 1fr) minmax(190px, 250px);
        gap: 16px;
    }

    #pokerScreen.poker-reference .poker-bet-tools > input {
        min-height: 52px;
        font-size: 20px;
        font-weight: 900;
    }

    #pokerScreen.poker-reference .poker-bet-tool-row > button {
        min-height: 44px;
        font-size: 13px;
    }

    #pokerScreen.poker-reference .game-message { font-size: 14px; }
}


/* =========================================================
   THE PHONE
   ========================================================= */

@media (max-width: 860px) {
    #pokerScreen.poker-reference .poker-fab { display: grid; }

    /* the chat is a sheet over the table, not a column beside it */
    #pokerScreen.poker-reference .poker-reference-layout > .poker-chat-panel {
        position: fixed;
        z-index: 259000;
        right: 10px;
        bottom: calc(76px + var(--poker-controls-inset, 0px) + env(safe-area-inset-bottom));
        left: 10px;
        display: none;
        max-height: 56vh;
        margin: 0;
    }

    #pokerScreen.poker-reference .poker-chat-panel.is-open { display: grid; }

    #pokerScreen.poker-reference .poker-chat-close {
        display: grid;
        place-items: center;
        width: 30px;
        height: 30px;
        padding: 0;
        border: 1px solid rgba(228, 190, 72, .5);
        border-radius: 50%;
        color: #ffe9a6;
        background: rgba(0, 24, 16, .85);
        font-size: 14px;
        cursor: pointer;
    }

    #pokerScreen.poker-reference .poker-chat-log { max-height: 34vh; }

    /* one column, so the explicit desktop placement has to be undone */
    #pokerScreen.poker-reference .poker-reference-layout > .poker-participants,
    #pokerScreen.poker-reference .poker-reference-layout > .poker-reference-center {
        grid-column: auto;
        grid-row: auto;
    }

    #pokerScreen.poker-reference .poker-turn-pop {
        margin-bottom: 2px;
        padding: 5px 12px;
        font-size: 12px;
    }

    #pokerScreen.poker-reference .poker-turn-pop__icon { width: 19px; height: 19px; }
    #pokerScreen.poker-reference .poker-card-hint { font-size: 27px; }
}


/* =========================================================
   THE CHAT SITS UNDER THE LEADERBOARD
   =========================================================

   The felt spans both rows of the left column, and with both rows auto its
   height was shared between them -- so the first row grew to 380px for a
   leaderboard barely half that, and the chat was pushed a third of a screen
   down. The first row is sized to the leaderboard and the second takes what
   is left.
   ========================================================= */

#pokerScreen.poker-reference .poker-reference-layout {
    grid-template-rows: auto 1fr;
}

#pokerScreen.poker-reference .poker-reference-layout > .poker-chat-panel {
    align-self: start;
    margin-top: 12px;
}


/* =========================================================
   THE CHAT LINE
   ========================================================= */

/*
 * The charm in chat is the same charm that hangs off the leaderboard, so it
 * borrows that component's own two animations rather than an imitation of
 * them: lucky-charm-sway for the movement, lucky-charm-breathe for the glow.
 * Both keyframes live in lucky-charm-attachment.css, which this page loads.
 */
.chat-charm {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    object-fit: contain;
    transform-origin: 50% 0;
    animation:
        lucky-charm-sway 3.3s ease-in-out infinite,
        lucky-charm-breathe 2.6s ease-in-out infinite;
}

/* the message steps in under the name, with air between the two */
#pokerScreen.poker-reference .poker-chat-line {
    gap: 6px;
}

#pokerScreen.poker-reference .poker-chat-text {
    padding-left: 32px;
}

#pokerScreen.poker-reference .poker-chat-line.system .poker-chat-text {
    padding-left: 0;
}


/* the finger over your cards is gone; the ten-second opening stays */
#pokerScreen.poker-reference .poker-card-hint { display: none !important; }


/* =========================================================
   THE DESKTOP TABLE, IN THE BLACKJACK SHAPE
   =========================================================

   Three columns, the way the Blackjack table is laid out: the leaderboard on
   the left, the felt and its controls in the middle, and a full-height rail on
   the right -- carrying the live chat, where Blackjack carries how-to-play.
   The chat was stacked under the leaderboard before, which left the middle
   column carrying the whole height of the screen on its own.

   The felt holds its drawn 1080:510 at every size. Two earlier attempts at
   fitting this screen both distorted it: one let the height give while the
   width stayed, which stretched the rail art and the capybaras along with it;
   the other found that the height was already fixed at 510 regardless of
   width, so a narrow window squashed the oval the other way. The ratio is
   declared here, so the art is never drawn out of shape in either direction.

   Nothing below 861px is touched; the phone keeps its stacked layout.
   ========================================================= */

@media (min-width: 861px) {
    /*
     * !important because sitting down writes display:block onto this element's
     * own style attribute. body.poker-table-view is what keeps that safe --
     * standing up hides the screen the same way, and without the class in the
     * selector this override left the felt on screen under the lobby.
     */
    body.poker-table-view #pokerScreen.poker-reference {
        display: flex !important;
        flex-direction: column;
        height: 100dvh;
        overflow: hidden;
    }

    /* the body's own padding sat outside the 100dvh and was the last scroll */
    body.poker-table-view {
        padding-top: 0;
        padding-bottom: 0;
    }

    #pokerScreen.poker-reference .poker-reference-layout {
        grid-template-columns: minmax(200px, 252px) minmax(0, 1fr) minmax(230px, 300px);
        grid-template-rows: minmax(0, 1fr);
        flex: 1 1 auto;
        align-items: stretch;
        min-height: 0;
        padding-bottom: 10px;
    }

    #pokerScreen.poker-reference .poker-reference-layout > .poker-participants {
        grid-column: 1;
        grid-row: 1;
        min-height: 0;
        overflow-y: auto;
    }

    #pokerScreen.poker-reference .poker-reference-layout > .poker-reference-center {
        grid-column: 2;
        grid-row: 1;
        grid-template-rows: minmax(0, 1fr) auto auto;
        min-height: 0;
    }

    #pokerScreen.poker-reference .poker-reference-layout > .poker-chat-panel {
        grid-column: 3;
        grid-row: 1;
        align-self: stretch;
        min-height: 0;
        margin-top: 0;
    }

    #pokerScreen.poker-reference .table-wrapper {
        align-items: center;
        justify-content: center;
        min-height: 0;
    }

    /* the felt fills what is left of the middle column, in its drawn shape */
    #pokerScreen.poker-reference .poker-table {
        width: auto;
        height: 100%;
        max-width: min(1080px, 100%);
        max-height: 510px;
        aspect-ratio: 1080 / 510;
    }

    /*
     * The wallet strip lies down rather than standing up. Stacked -- readout,
     * heading, field over button, note -- it ran to 250px in a band that has
     * to be short for the felt to have any room, and rode up over the felt.
     * Side by side it is 94px and the whole thing fits. It is styled rather
     * than moved because the phone places its children by grid-area through
     * display:contents, which a move in the markup would break.
     */
    #pokerScreen.poker-reference #pokerWalletPanel {
        top: auto;
        right: 6px;
        bottom: 2px;
        left: auto;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        width: min(560px, 66%);
    }

    #pokerScreen.poker-reference #pokerWalletPanel .poker-wallet-readout { margin: 0; }
    #pokerScreen.poker-reference #pokerWalletPanel #topUpContainer.show { margin: 0 !important; padding: 7px 9px !important; }
    #pokerScreen.poker-reference #pokerWalletPanel .top-up-row {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
    }

    #pokerScreen.poker-reference #pokerChipsOnHand { top: auto; bottom: 2px; }
    #pokerScreen.poker-reference #playerCardZone { min-height: 150px !important; }
    #pokerScreen.poker-reference #squishyMascots { transform: scale(.8); transform-origin: center top; }
}

/* a shorter screen takes it out of the controls, never out of the felt */
@media (min-width: 861px) and (max-height: 880px) {
    #pokerScreen.poker-reference #pokerChips > .chip-option {
        width: min(74px, 100%) !important;
        max-width: 74px !important;
        min-height: 48px !important;
    }
    #pokerScreen.poker-reference .controls { padding: 8px 12px 10px; }
    #pokerScreen.poker-reference .controls-row .action-button { min-height: 46px; font-size: 14px; }
    #pokerScreen.poker-reference .poker-bet-tools > input { min-height: 40px; font-size: 16px; }
    #pokerScreen.poker-reference .poker-inline-bet { gap: 5px; padding: 7px 10px 8px; }
    #pokerScreen.poker-reference .your-hand .card { width: 64px; height: 90px; }
}


/* =========================================================
   THE DESKTOP TABLE
   =========================================================

   Two columns: the leaderboard, then the felt with everything that serves it.
   The chat used to hold a third column of its own; it is a button at the
   bottom left now, opening the same sheet the phone uses, and the felt has the
   width that column was taking.

   The felt holds its drawn 1080:510 at every size. Three earlier attempts did
   not. Letting the height give while the width stayed stretched the rail art
   and the capybaras along it. Declaring aspect-ratio with height:100% shrank
   the width to match and collapsed the table to a slot. Declaring it with
   width:100% and max-height let max-height clamp the height while the width
   stayed, which stretched it again -- 3.91 and 4.38 to one at laptop sizes.

   What works is sizing from the container's own height: the wrapper is a size
   container, and the felt is the narrower of the full width and the width that
   height allows. It can then never be taller than its box or wider than its
   column, and the ratio is never the thing that gives.
   ========================================================= */

@media (min-width: 861px) {
    /*
     * !important because sitting down writes display:block onto this element's
     * style attribute. body.poker-table-view keeps it safe: standing up hides
     * the screen the same way, and without the class this override left the
     * felt on screen under the lobby.
     */
    body.poker-table-view #pokerScreen.poker-reference {
        display: flex !important;
        flex-direction: column;
        height: 100dvh;
        overflow: hidden;
    }

    /* the body's own padding sat outside the 100dvh and was the last scroll */
    body.poker-table-view { padding-top: 0; padding-bottom: 0; }

    #pokerScreen.poker-reference .poker-reference-layout {
        grid-template-columns: minmax(200px, 252px) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        flex: 1 1 auto;
        align-items: stretch;
        min-height: 0;
        padding-top: 16px;
        padding-bottom: 10px;
    }

    #pokerScreen.poker-reference .poker-reference-layout > .poker-participants {
        grid-column: 1;
        grid-row: 1;
        min-height: 0;
        overflow-y: auto;
    }

    /*
     * minmax(0,1fr) on the column, or the felt's own max-width widens the
     * track past the container -- which is what made every width sum here
     * come out wrong, and let the controls run under the wallet.
     */
    #pokerScreen.poker-reference .poker-reference-layout > .poker-reference-center {
        grid-column: 2;
        grid-row: 1;
        position: relative;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto auto;
        min-height: 0;
    }

    /* the chat is a button and a sheet, as it is on a phone */
    #pokerScreen.poker-reference .poker-fab-chat {
        display: grid;
        right: auto;
        bottom: 18px;
        left: 18px;
    }

    #pokerScreen.poker-reference .poker-reference-layout > .poker-chat-panel {
        position: fixed;
        z-index: 259000;
        right: auto;
        bottom: 80px;
        left: 18px;
        display: none;
        width: min(360px, 32vw);
        max-height: 52vh;
        margin: 0;
    }

    #pokerScreen.poker-reference .poker-reference-layout > .poker-chat-panel.is-open { display: grid; }
    #pokerScreen.poker-reference .poker-chat-close { display: grid; }

    /* the largest 1080:510 box that fits, measured off the wrapper's height */
    #pokerScreen.poker-reference .table-wrapper {
        align-items: center;
        justify-content: center;
        min-height: 0;
        container-type: size;
    }

    #pokerScreen.poker-reference .poker-table {
        width: min(100%, calc(100cqh * 1080 / 510));
        height: auto;
        max-width: 1280px;
        max-height: none;
        margin: auto;
        aspect-ratio: 1080 / 510;
    }

    /* one squishy beside the hand, not one either side */
    #pokerScreen.poker-reference .clickable-mascot--left { display: none; }

    /*
     * Chips on hand and the wallet stand to the right of the buttons. They are
     * children of the card band, so the band gives up its positioning and they
     * anchor to the whole middle column instead; the controls keep a matching
     * margin so the two never meet. Restyled rather than moved in the markup,
     * because the phone places these by grid-area through display:contents.
     */
    #pokerScreen.poker-reference #playerCardZone {
        position: static;
        min-height: 150px !important;
    }

    #pokerScreen.poker-reference .controls {
        width: auto !important;
        max-width: none !important;
        justify-self: stretch;
        margin-left: 0 !important;
        margin-right: 344px !important;
    }

    #pokerScreen.poker-reference #pokerChipsOnHand {
        position: absolute;
        top: auto;
        right: 0;
        bottom: 104px;
        left: auto;
        width: 326px;
    }

    /* the wallet total is in the top bar and in the note under the field */
    #pokerScreen.poker-reference #pokerWalletPanel .poker-wallet-readout { display: none; }

    #pokerScreen.poker-reference #pokerWalletPanel {
        position: absolute;
        top: auto;
        right: 0;
        bottom: 0;
        left: auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 326px;
    }

    #pokerScreen.poker-reference #pokerWalletPanel #topUpContainer.show { margin: 0 !important; padding: 7px 9px !important; }
    #pokerScreen.poker-reference #pokerWalletPanel #topUpContainer .top-up-heading { display: block; margin-bottom: 5px; }
    #pokerScreen.poker-reference #pokerWalletPanel .top-up-row {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
    }
}

/* a shorter screen takes it out of the controls, never out of the felt */
@media (min-width: 861px) and (max-height: 880px) {
    #pokerScreen.poker-reference #pokerChips > .chip-option {
        width: min(74px, 100%) !important;
        max-width: 74px !important;
        min-height: 48px !important;
    }
    #pokerScreen.poker-reference .controls { padding: 8px 12px 10px; }
    #pokerScreen.poker-reference .controls-row .action-button { min-height: 46px; font-size: 14px; }
    #pokerScreen.poker-reference .poker-bet-tools > input { min-height: 40px; font-size: 16px; }
    #pokerScreen.poker-reference .poker-inline-bet { gap: 5px; padding: 7px 10px 8px; }
    #pokerScreen.poker-reference .your-hand .card { width: 64px; height: 90px; }
}


/* =========================================================
   THE DESKTOP TABLE
   =========================================================

   Built to the owner's mockup. Three columns: the leaderboard with the chat
   under it on the left, the felt in the middle, and chips-on-hand over add-
   chips on the right. The players sit around the felt rather than only in the
   leaderboard, and your own hand rides up onto the rail below your seat.

   The felt holds its drawn 1080:510 at every size, sized off the wrapper's own
   height so it can never exceed its box and the ratio is never what gives.
   Earlier attempts stretched it: letting the height give distorted the rail
   art, and aspect-ratio with max-height let the height clamp while the width
   stayed. Nothing below 861px is touched.
   ========================================================= */

@media (min-width: 861px) {
    /*
     * !important because sitting down writes display:block onto this element's
     * style attribute. body.poker-table-view keeps it safe -- standing up
     * hides the screen the same way, and without the class in the selector
     * this override left the felt on screen under the lobby.
     */
    body.poker-table-view #pokerScreen.poker-reference {
        display: flex !important;
        flex-direction: column;
        /* the screen carried a 1400px cap, which is what held the felt small */
        width: 100% !important;
        max-width: none !important;
        height: 100dvh;
        overflow: hidden;
    }

    /* the body's own padding sat outside the 100dvh and was the last scroll */
    body.poker-table-view { padding-top: 0; padding-bottom: 0; }

    #pokerScreen.poker-reference .poker-reference-layout {
        position: relative;
        grid-template-columns: minmax(190px, 272px) minmax(0, 1fr) minmax(210px, 278px);
        grid-template-rows: auto minmax(0, 1fr);
        flex: 1 1 auto;
        align-items: stretch;
        max-width: 1840px;
        min-height: 0;
        padding-top: 14px;
        padding-bottom: 12px;
    }

    #pokerScreen.poker-reference .poker-reference-layout > .poker-participants {
        grid-column: 1;
        grid-row: 1;
        min-height: 0;
    }

    /* the chat is a column again, filling what the leaderboard leaves */
    #pokerScreen.poker-reference .poker-reference-layout > .poker-chat-panel {
        position: static;
        grid-column: 1;
        grid-row: 2;
        display: grid;
        align-self: stretch;
        width: auto;
        max-height: none;
        min-height: 0;
        margin-top: 12px;
    }

    #pokerScreen.poker-reference .poker-fab-chat { display: none; }

    /*
     * static, so that chips-on-hand and the wallet -- which live inside the
     * card band -- anchor to the layout and land in the third column.
     */
    #pokerScreen.poker-reference .poker-reference-layout > .poker-reference-center {
        position: static;
        grid-column: 2;
        grid-row: 1 / span 2;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
        min-height: 0;
    }

    /* the largest 1080:510 box that fits, measured off the wrapper's height */
    #pokerScreen.poker-reference .table-wrapper {
        position: relative;
        align-items: center;
        justify-content: center;
        min-height: 0;
        container-type: size;
    }

    #pokerScreen.poker-reference .poker-table {
        width: min(100%, calc(100cqh * 1080 / 510));
        height: auto;
        max-width: 1280px;
        max-height: none;
        margin: auto;
        aspect-ratio: 1080 / 510;
    }

    /* the players sit at the table */
    #pokerScreen.poker-reference .player-seat { display: block !important; }

    /* your hand rides up onto the rail instead of sitting in its own band */
    #pokerScreen.poker-reference #playerCardZone {
        position: static;
        z-index: 6;
        min-height: 0 !important;
        margin-top: -92px !important;
    }

    #pokerScreen.poker-reference #squishyMascots { display: none !important; }

    /* chips on hand over add-chips, in the third column */
    #pokerScreen.poker-reference #pokerChipsOnHand {
        position: absolute;
        top: 22%;
        right: 0;
        bottom: auto;
        left: auto;
        width: min(278px, 18vw);
    }

    #pokerScreen.poker-reference #pokerWalletPanel {
        position: absolute;
        top: calc(22% + 100px);
        right: 0;
        bottom: auto;
        left: auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: min(278px, 18vw);
    }

    /* the wallet total is in the top bar and in the note under the field */
    #pokerScreen.poker-reference #pokerWalletPanel .poker-wallet-readout { display: none; }
    #pokerScreen.poker-reference #pokerWalletPanel #topUpContainer.show { margin: 0 !important; }

    #pokerScreen.poker-reference .controls {
        width: auto !important;
        max-width: none !important;
        margin: 8px 0 0 !important;
    }
}

/* a shorter screen takes it out of the controls, never out of the felt */
@media (min-width: 861px) and (max-height: 880px) {
    #pokerScreen.poker-reference #pokerChips > .chip-option {
        width: min(74px, 100%) !important;
        max-width: 74px !important;
        min-height: 48px !important;
    }
    #pokerScreen.poker-reference .controls { padding: 8px 12px 10px; }
    #pokerScreen.poker-reference .controls-row .action-button { min-height: 46px; font-size: 14px; }
    #pokerScreen.poker-reference .poker-bet-tools > input { min-height: 40px; font-size: 16px; }
    #pokerScreen.poker-reference .poker-inline-bet { gap: 5px; padding: 7px 10px 8px; }
    #pokerScreen.poker-reference .your-hand .card { width: 64px; height: 90px; }
}

/*
 * The seats go back down. Their positions are percentages written for the old
 * fixed 1080x510 felt; on a felt that now sizes itself they land in the middle
 * of the table rather than on the rail -- pills stacking on each other, over
 * the community cards and over the turn banner. Showing them needs the
 * positions rebuilt against the new geometry, not just the display switched.
 */
@media (min-width: 861px) {
    #pokerScreen.poker-reference .player-seat { display: none !important; }
    /* with no seats to sit under, the hand goes back below the felt */
    #pokerScreen.poker-reference #playerCardZone { margin-top: 0 !important; min-height: 150px !important; }
}


/* =========================================================
   THE DESKTOP TABLE STAGE
   =========================================================

   The felt is drawn from a 2160x1020 PNG that was being painted with
   background-size:100% 100%, so it took whatever shape its box happened to be
   -- the rail art stretched or squashed with every change to the layout. It is
   sized from the artwork's own ratio now and painted with contain, so it can
   only ever be scaled, never distorted.

   Everything on the felt -- pot, board, seats -- was already inside the table
   and already positioned in percentages, so it scales with the stage. The one
   exception was the local hand, which sat in a band below the table and so
   floated free of it; it shares the stage's grid cell now and rides up onto
   the lower rail, without being moved in the markup (the phone places it and
   its neighbours by grid-area through display:contents).
   ========================================================= */

@media (min-width: 861px) {
    /* three columns, sidebars capped so they cannot crush the middle */
    #pokerScreen.poker-reference .poker-reference-layout {
        grid-template-columns: clamp(260px, 19vw, 300px) minmax(0, 1fr) clamp(260px, 19vw, 300px);
        gap: clamp(12px, 1.2vw, 20px);
    }

    #pokerScreen.poker-reference .table-wrapper {
        grid-row: 1;
        grid-column: 1;
        container-type: size;
    }

    /* the largest box of the artwork's own ratio that the wrapper allows */
    #pokerScreen.poker-reference .poker-table {
        width: min(100%, calc(100cqh * 2160 / 1020));
        height: auto;
        max-width: 1050px;
        max-height: none;
        aspect-ratio: 2160 / 1020;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        border-radius: 0;
    }

    /* the pot clears the top rail; the board sits below it, both centred */
    #pokerScreen.poker-reference .table-center { top: 34%; width: 78%; }
    #pokerScreen.poker-reference .table-center .pot { margin-bottom: 2%; }

    /* seats measured against the table rather than a fixed 150px */
    #pokerScreen.poker-reference .player-seat {
        display: block !important;
        width: clamp(88px, 13.5%, 140px);
    }
    #pokerScreen.poker-reference .player-box { padding: 5px 7px; border-radius: 9px; }
    #pokerScreen.poker-reference .player-name { font-size: clamp(9px, 1.05cqw, 12px); }
    #pokerScreen.poker-reference .player-chips { font-size: clamp(9px, 1cqw, 12px); }
    #pokerScreen.poker-reference .player-status { font-size: clamp(7px, .8cqw, 9px); }

    /*
     * The hand shares the stage's cell and sits at its foot, so it reads as
     * part of the table. static, so that chips-on-hand and the wallet -- which
     * live inside this band -- still anchor to the layout and land in the
     * third column rather than in the middle of the felt.
     */
    #pokerScreen.poker-reference .poker-reference-center { grid-template-rows: minmax(0, 1fr) auto; }

    #pokerScreen.poker-reference #playerCardZone {
        position: static;
        z-index: 6;
        grid-row: 1;
        grid-column: 1;
        align-self: end;
        justify-self: center;
        width: auto;
        min-height: 0 !important;
        margin: 0 0 clamp(28px, 4.5cqh, 64px) !important;
        pointer-events: none;
    }

    #pokerScreen.poker-reference #playerCardZone .your-hand { margin: 0 !important; pointer-events: auto; }

    /* the action panel follows the table's width, directly beneath it */
    #pokerScreen.poker-reference .controls {
        grid-row: 2;
        width: min(100%, 1050px) !important;
        max-width: none !important;
        margin: 10px auto 0 !important;
    }

    #pokerScreen.poker-reference #pokerChips > .chip-option {
        width: clamp(52px, 4.4vw, 68px) !important;
        max-width: 68px !important;
        min-height: clamp(52px, 4.4vw, 68px) !important;
    }

    /* the wallet field gets a full row of its own, above a full-width button */
    #pokerScreen.poker-reference #pokerChipsOnHand,
    #pokerScreen.poker-reference #pokerWalletPanel {
        right: 0;
        width: clamp(260px, 19vw, 300px);
    }
    #pokerScreen.poker-reference #pokerWalletPanel .top-up-row { grid-template-columns: minmax(0, 1fr); gap: 7px; }
    #pokerScreen.poker-reference #pokerWalletPanel #topUpAmount { width: 100%; min-width: 0; }
    #pokerScreen.poker-reference #pokerWalletPanel #topUpButton { width: 100%; }
}


/* =========================================================
   THE PHONE TABLE, MEASURED AND TIDIED
   =========================================================

   Measured at 390x844 before this, top to bottom:

     topbar        5-59
     table        72-244
     mascots     102-252   over the felt, covering rail and board
     card band   252-444   192px reserved for a 62px hand
     leaderboard 453-518   the row that appeared under the cards
     controls    520-839
     chat button 778-830   sitting on the controls and the status line

   The mascots were absolutely positioned across the table's own area, so on a
   phone they covered the felt rather than flanking it. They stand down here;
   the felt is small enough already without decoration on top of it.

   The row appearing beneath the cards was the leaderboard, still in the flow
   between the hand and the controls. It belongs behind the menu on a phone,
   not between a player and their buttons.

   The card band was reserving 192px for a 62px hand because it is sized for
   the desktop wallet panel beside it. It sizes to its contents here.

   The action buttons go to three columns of 52px rather than two of 54, and
   the chat button moves to the top right, clear of the controls, the chips and
   the status line it was covering.
   ========================================================= */

@media (max-width: 860px) {
    #pokerScreen.poker-reference #squishyMascots { display: none !important; }

    #pokerScreen.poker-reference .poker-reference-layout > .poker-participants { display: none !important; }

    #pokerScreen.poker-reference #playerCardZone {
        min-height: 0 !important;
        margin: 6px 0 0 !important;
        padding: 0 !important;
    }

    #pokerScreen.poker-reference .your-hand { margin: 0 auto !important; }

    #pokerScreen.poker-reference #pokerChipsOnHand {
        position: static !important;
        margin: 8px auto 0 !important;
    }

    #pokerScreen.poker-reference .controls {
        margin-top: 8px !important;
        padding: 8px 10px 10px !important;
    }

    #pokerScreen.poker-reference .controls-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    #pokerScreen.poker-reference .controls-row .action-button {
        min-height: 52px !important;
        padding: 6px 4px !important;
        font-size: 14px !important;
    }

    /* out of the way of the controls it was covering */
    #pokerScreen.poker-reference .poker-fab-chat {
        top: calc(66px + env(safe-area-inset-top)) !important;
        right: 10px !important;
        bottom: auto !important;
        z-index: 200 !important;
        width: 48px !important;
        height: 48px !important;
    }
}

/*
 * The phone had a 200px hole in it. The wallet trio sat in the middle of the
 * screen repeating what TABLE MENU already offers, the status line was buried
 * under the chip rack at the very bottom of the dock, and the hole cards were
 * 44x62 -- too small to read the pips on, let alone the corner numbers.
 *
 * So: the wallet rows go back to the menu, the status line comes up to the top
 * of the dock where you look before you act, and the cards grow into the space
 * that frees up. They stay on the 5:7 card ratio and cap at 30vw so two of them
 * plus the gap never crowd the edges on a 360px phone.
 */
@media (max-width: 860px) {
    /* TABLE MENU already carries "WALLET CHIPS -> CHIPS ON HAND" */
    #pokerScreen.poker-reference #pokerChipsOnHand,
    #pokerScreen.poker-reference #pokerWalletPanel,
    #pokerScreen.poker-reference #topUpContainer {
        display: none !important;
    }

    #pokerScreen.poker-reference #playerCardZone { margin: 0 !important; }

    #pokerScreen.poker-reference .your-hand {
        margin: 6px auto 0 !important;
        gap: 14px !important;
    }

    #pokerScreen.poker-reference .your-hand .card-slot {
        width: min(118px, 30vw) !important;
        height: auto !important;
        aspect-ratio: 5 / 7 !important;
        font-size: clamp(26px, 9vw, 38px) !important;
    }

    /* the dock reads top-down: what is happening, then what you can do */
    #pokerScreen.poker-reference .controls {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    #pokerScreen.poker-reference .controls #gameMessage {
        order: -1 !important;
        margin: 0 0 2px !important;
    }
}

/*
 * THE SEATS COME BACK TO THE PHONE
 *
 * The leaderboard is hidden on a phone, which left no way to see who else is
 * at the table or what they are holding. The seats say it instead, sitting on
 * the rail where you would look for them anyway.
 *
 * They are names, not badges. Pills wide enough to hold a name and a stack do
 * not fit round a 364px felt -- they overlapped each other, ran off the right
 * edge, and grew a fourth line whenever someone was on a blind. Lit text takes
 * almost no room and cannot collide the way a box does: name, stack, nothing
 * else. A player wearing a Lucky Charm is lit gold instead of blue, which is
 * the only thing on the felt that gold means.
 */
@media (max-width: 860px) {
    #pokerScreen.poker-reference .player-seat {
        display: block !important;
        width: clamp(56px, 19%, 82px) !important;
        z-index: 7 !important;
    }

    /* no pill: the rail is the background */
    #pokerScreen.poker-reference .player-seat .player-box {
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        animation: none !important;
    }

    /*
     * Only the four things the felt has room for. Blind labels and the rest
     * are what turned a two-line seat into a four-line one that swallowed its
     * neighbour; the status strip under the table already names the blinds.
     */
    #pokerScreen.poker-reference .player-seat .player-box > *:not(.player-name):not(.player-chips):not(.player-status):not(.lucky-charm-attachment):not(.dealer-button) {
        display: none !important;
    }

    #pokerScreen.poker-reference .player-seat .player-name {
        color: #eaf4ff !important;
        font-weight: 900 !important;
        font-size: clamp(9px, 2.6vw, 11px) !important;
        line-height: 1.2 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-shadow: 0 0 6px rgba(120,190,255,.95), 0 0 15px rgba(70,145,255,.55), 0 1px 2px #000 !important;
    }

    #pokerScreen.poker-reference .player-seat .player-chips {
        color: #ffd772 !important;
        font-weight: 800 !important;
        font-size: clamp(9px, 2.5vw, 11px) !important;
        line-height: 1.2 !important;
        text-shadow: 0 0 5px rgba(0,0,0,.95), 0 1px 2px #000 !important;
    }

    /* a charm is the one thing that turns a name gold */
    #pokerScreen.poker-reference .player-seat .player-box.lucky-charm-host .player-name {
        color: #ffe9a8 !important;
        text-shadow: 0 0 7px rgba(255,205,90,.98), 0 0 17px rgba(255,170,35,.6), 0 1px 2px #000 !important;
    }

    /* the seat being waited on brightens and says so; it does not change hue */
    #pokerScreen.poker-reference .player-seat .player-box.is-turn .player-name {
        animation: pkrNamePulse 1.5s ease-in-out infinite;
    }

    #pokerScreen.poker-reference .player-seat .player-status { display: none !important; }

    #pokerScreen.poker-reference .player-seat .player-box.is-turn .player-status {
        display: block !important;
        color: #9fe0ff !important;
        font-size: clamp(6px, 1.9vw, 8px) !important;
        font-weight: 900 !important;
        letter-spacing: .06em;
        text-shadow: 0 0 6px rgba(120,190,255,.9), 0 1px 2px #000 !important;
    }

    /*
     * The percentages the seats were always drawn at, pulled in at the sides so
     * a name cannot run off a 364px felt, and with 3 and 6 moved out of the way
     * of the first and last community cards.
     */
    #pokerScreen.poker-reference .seat-0 { left: 50% !important; top:  8% !important; }
    #pokerScreen.poker-reference .seat-1 { left: 78% !important; top: 20% !important; }
    #pokerScreen.poker-reference .seat-2 { left: 90% !important; top: 50% !important; }
    #pokerScreen.poker-reference .seat-3 { left: 86% !important; top: 72% !important; }
    #pokerScreen.poker-reference .seat-4 { left: 62% !important; top: 92% !important; }
    #pokerScreen.poker-reference .seat-5 { left: 38% !important; top: 92% !important; }
    #pokerScreen.poker-reference .seat-6 { left: 14% !important; top: 72% !important; }
    #pokerScreen.poker-reference .seat-7 { left: 10% !important; top: 50% !important; }
    #pokerScreen.poker-reference .seat-8 { left: 22% !important; top: 20% !important; }

    /*
     * The chat bubble goes to the bottom right, where it was asked for. The
     * UNDO/CLEAR row keeps its right edge clear of it so the bubble is not
     * sitting on CLEAR -- both buttons still measure 140px wide.
     */
    #pokerScreen.poker-reference .poker-fab-chat {
        top: auto !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        right: 10px !important;
        width: 44px !important;
        height: 44px !important;
    }
    #pokerScreen.poker-reference .poker-bet-tool-row { padding-right: 50px !important; }
}

@keyframes pkrNamePulse {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.45); }
}

/*
 * The desktop table still seats people in pills, so there the waited-on seat
 * takes a ring rather than a brighter name.
 */
@media (min-width: 861px) {
    @keyframes pkrSeatPulse {
        0%, 100% { box-shadow: 0 0 0 2px rgba(242,209,107,.85), 0 0 10px 2px rgba(242,209,107,.42); }
        50%      { box-shadow: 0 0 0 2px rgba(242,209,107,1),   0 0 18px 5px rgba(242,209,107,.68); }
    }

    #pokerScreen.poker-reference .player-seat .player-box.is-turn {
        border-color: #f2d16b !important;
        box-shadow: 0 0 0 2px rgba(242,209,107,.9), 0 0 14px 3px rgba(242,209,107,.55) !important;
        animation: pkrSeatPulse 1.5s ease-in-out infinite;
    }

    #pokerScreen.poker-reference .player-seat .player-box.is-turn .player-name {
        color: #ffe9a8 !important;
        text-shadow: 0 0 8px rgba(242,209,107,.75) !important;
    }

    #pokerScreen.poker-reference .player-seat .player-box.is-turn .player-status {
        color: #f2d16b !important;
        font-weight: 900 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #pokerScreen.poker-reference .player-seat .player-box.is-turn,
    #pokerScreen.poker-reference .player-seat .player-box.is-turn .player-name { animation: none; }
}

/*
 * THE SEATS AS PANELS, IN GREEN
 *
 * Lit text on the rail solved the crowding but read as part of the felt. These
 * are cards instead: a near-black translucent panel, a thin emerald outline and
 * a soft green glow, with the name in white and the stack in gold.
 *
 * No blue anywhere. Blue was doing two jobs it should not have -- marking a
 * seat and marking the turn -- and it fought the felt.
 *
 * A Lucky Charm shows as a gold rim on the panel rather than a gold name, so it
 * does not collide with the gold the stack is already written in.
 *
 * On the turn the panel brightens and pulses and says TURN beneath. It does not
 * change colour, because colour here means charm, not turn.
 *
 * These sit on the rail rather than off the table: the felt is already 364px of
 * a 390px screen, so a panel placed outside it would be off the edge. They are
 * positioned clear of the community cards, which is the part that matters.
 */
@media (max-width: 860px) {
    #pokerScreen.poker-reference .player-seat .player-box {
        padding: 4px 7px !important;
        border: 1px solid rgba(74, 222, 148, .5) !important;
        border-radius: 10px !important;
        background: rgba(5, 17, 11, .84) !important;
        box-shadow:
            0 0 12px rgba(52, 205, 130, .34),
            0 2px 6px rgba(0, 0, 0, .55) !important;
        animation: none !important;
    }

    #pokerScreen.poker-reference .player-seat .player-name {
        color: #ffffff !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, .9) !important;
    }

    #pokerScreen.poker-reference .player-seat .player-chips {
        color: #ffd772 !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, .9) !important;
    }

    /* a charm rims the panel gold; the name stays white */
    #pokerScreen.poker-reference .player-seat .player-box.lucky-charm-host {
        border-color: rgba(242, 209, 107, .85) !important;
        box-shadow:
            0 0 14px rgba(233, 183, 62, .45),
            0 2px 6px rgba(0, 0, 0, .55) !important;
    }

    #pokerScreen.poker-reference .player-seat .player-box.lucky-charm-host .player-name {
        color: #ffffff !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, .9) !important;
    }

    /* the seat being waited on: brighter, not a different colour */
    #pokerScreen.poker-reference .player-seat .player-box.is-turn {
        border-color: rgba(110, 245, 175, .95) !important;
        box-shadow:
            0 0 18px rgba(80, 235, 150, .6),
            0 2px 6px rgba(0, 0, 0, .55) !important;
        animation: pkrSeatGlow 1.6s ease-in-out infinite !important;
    }

    #pokerScreen.poker-reference .player-seat .player-box.is-turn .player-name {
        animation: none !important;
    }

    #pokerScreen.poker-reference .player-seat .player-box.is-turn .player-status {
        color: #7cefb4 !important;
        text-shadow: 0 0 8px rgba(80, 235, 150, .7), 0 1px 2px #000 !important;
    }

    /* the thinking line, in the same green rather than blue */
    #pokerScreen.poker-reference .controls #gameMessage {
        color: #8fe9bd !important;
        text-shadow: 0 0 10px rgba(70, 220, 145, .4) !important;
    }
}

@keyframes pkrSeatGlow {
    0%, 100% { box-shadow: 0 0 14px rgba(80,235,150,.45), 0 2px 6px rgba(0,0,0,.55); }
    50%      { box-shadow: 0 0 22px rgba(110,245,175,.75), 0 2px 6px rgba(0,0,0,.55); }
}

@media (prefers-reduced-motion: reduce) {
    #pokerScreen.poker-reference .player-seat .player-box.is-turn { animation: none !important; }
}

/* Final phone layout guard: the wallet transfer is a Table Menu action on
   small screens.  Never let the desktop wallet panel re-enter the card grid
   merely because its retained form has the runtime `show` class. */
@media (max-width: 860px) {
    #pokerScreen.poker-reference #pokerWalletPanel,
    #pokerScreen.poker-reference #pokerWalletPanel:has(#topUpContainer.show),
    #pokerScreen.poker-reference #pokerWalletPanel #topUpContainer.show,
    #pokerScreen.poker-reference #pokerChipsOnHand {
        display: none !important;
    }

    #pokerScreen.poker-reference #playerCardZone {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #pokerScreen.poker-reference .controls,
    #pokerScreen.poker-reference .poker-inline-bet,
    #pokerScreen.poker-reference .poker-chip-row,
    #pokerScreen.poker-reference #pokerChips {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    #pokerScreen.poker-reference #pokerChips {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 3px !important;
        overflow: hidden !important;
    }

    #pokerScreen.poker-reference #pokerChips > .chip-option {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 58px !important;
    }

    /* The normal status sentence below the cards already names whose turn it
       is.  The second name pill above the cards only duplicated that text. */
    #pokerScreen.poker-reference .poker-turn-pop {
        display: none !important;
    }

    /* Occupied seats receive balanced rail coordinates from renderPlayers(). */
    #pokerScreen.poker-reference .player-seat {
        left: var(--mobile-seat-left, 50%) !important;
        top: var(--mobile-seat-top, 50%) !important;
        width: clamp(88px, 28vw, 112px) !important;
    }

    #pokerScreen.poker-reference .player-seat .player-box {
        width: 100%;
        min-width: 0;
        padding: 5px 7px !important;
    }

    #pokerScreen.poker-reference .player-seat .player-name {
        width: 100%;
        font-size: clamp(8px, 2.65vw, 11px) !important;
        letter-spacing: 0 !important;
    }

    /* Your table identity belongs at the lower rail, directly above your
       cards, instead of appearing again at the right-hand opponent seat. */
    #pokerScreen.poker-reference .player-seat.is-local-seat {
        z-index: 14 !important;
        width: clamp(126px, 42vw, 168px) !important;
    }

    #pokerScreen.poker-reference .player-seat.is-local-seat .player-name {
        font-size: clamp(10px, 3.15vw, 13px) !important;
    }
}

/* Mobile seats are labels around the table, not panels on top of it. */
@media (max-width: 860px) {
    #pokerScreen.poker-reference .poker-table {
        overflow: visible !important;
    }

    #pokerScreen.poker-reference .player-seat {
        width: clamp(76px, 24vw, 100px) !important;
        pointer-events: none;
    }

    #pokerScreen.poker-reference .player-seat .player-box,
    #pokerScreen.poker-reference .player-seat .player-box.is-turn,
    #pokerScreen.poker-reference .player-seat .player-box.lucky-charm-host {
        width: 100% !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        animation: none !important;
        min-height: 0 !important;
    }

    #pokerScreen.poker-reference .player-seat .player-name {
        overflow: visible !important;
        text-overflow: clip !important;
        color: #fff !important;
        font-size: clamp(9px, 2.8vw, 12px) !important;
        line-height: 1.12 !important;
        text-shadow:
            -1px -1px 0 #063b24,
             1px -1px 0 #063b24,
            -1px  1px 0 #063b24,
             1px  1px 0 #063b24,
             0 0 6px rgba(80, 235, 150, .95),
             0 0 13px rgba(80, 235, 150, .72) !important;
    }

    #pokerScreen.poker-reference .player-seat .player-chips {
        margin-top: 2px !important;
        font-size: clamp(8px, 2.45vw, 10px) !important;
        text-shadow: 0 0 4px #000, 0 0 8px rgba(242, 209, 107, .55) !important;
    }

    #pokerScreen.poker-reference .player-seat .player-status,
    #pokerScreen.poker-reference .player-seat .player-box.is-turn .player-status {
        display: none !important;
    }

    #pokerScreen.poker-reference .player-seat .player-box.is-turn .player-name {
        animation: pkrNamePulse 1.5s ease-in-out infinite !important;
    }

    #pokerScreen.poker-reference .player-seat .player-box.lucky-charm-host .player-name {
        color: #fff8dc !important;
        text-shadow:
            -1px -1px 0 #4a3200,
             1px -1px 0 #4a3200,
            -1px  1px 0 #4a3200,
             1px  1px 0 #4a3200,
             0 0 7px rgba(255, 217, 105, 1),
             0 0 15px rgba(255, 181, 42, .75) !important;
    }

    #pokerScreen.poker-reference .player-seat.is-local-seat {
        width: clamp(104px, 34vw, 138px) !important;
    }

    #pokerScreen.poker-reference .player-seat .lucky-charm-attachment {
        --lucky-charm-size: 30px !important;
        --lucky-charm-chain-length: 11px !important;
        --lucky-charm-top: -9px !important;
        --lucky-charm-right: -13px !important;
    }
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
    #pokerScreen.poker-reference .player-seat .player-box.is-turn .player-name {
        animation: none !important;
    }
}

/* Reference mobile composition: a smaller physical table surrounded by black
   breathing room, large shared cards on the felt, and a quieter local hand. */
@media (max-width: 860px) {
    #pokerScreen.poker-reference .table-wrapper {
        padding: 24px 0 12px !important;
        overflow: visible !important;
    }

    #pokerScreen.poker-reference .poker-table {
        width: 82% !important;
        max-width: 620px !important;
        margin: 0 auto !important;
        aspect-ratio: 1.55 / 1 !important;
        border: 0 !important;
        background-color: transparent !important;
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    #pokerScreen.poker-reference .table-inner {
        display: none !important;
    }

    #pokerScreen.poker-reference .table-center {
        top: 50% !important;
        width: 94% !important;
    }

    #pokerScreen.poker-reference .table-center .pot {
        margin: 0 0 2px !important;
        font-size: clamp(8px, 2.2vw, 11px) !important;
    }

    #pokerScreen.poker-reference .table-center .pot strong {
        font-size: clamp(17px, 5vw, 23px) !important;
    }

    #pokerScreen.poker-reference .community-cards {
        min-height: 0 !important;
        margin-top: 2px !important;
        gap: clamp(2px, .8vw, 5px) !important;
    }

    #pokerScreen.poker-reference .community-cards .card,
    #pokerScreen.poker-reference .community-cards .card-slot {
        width: clamp(36px, 8.2vw, 42px) !important;
        height: auto !important;
        aspect-ratio: 5 / 7 !important;
        border-radius: clamp(4px, 1.2vw, 7px) !important;
    }

    #pokerScreen.poker-reference .community-cards .card-rank {
        font-size: clamp(16px, 4.2vw, 22px) !important;
    }

    #pokerScreen.poker-reference .community-cards .card-suit {
        font-size: clamp(18px, 4.8vw, 25px) !important;
    }

    #pokerScreen.poker-reference .dealer-button {
        display: none !important;
    }

    #pokerScreen.poker-reference #playerCardZone {
        margin-top: 10px !important;
    }

    #pokerScreen.poker-reference .your-hand {
        gap: clamp(8px, 3vw, 16px) !important;
        min-height: 0 !important;
    }

    #pokerScreen.poker-reference .your-hand .card,
    #pokerScreen.poker-reference .your-hand .card-slot {
        width: clamp(58px, 13vw, 70px) !important;
        height: auto !important;
        aspect-ratio: 5 / 7 !important;
    }

    #pokerScreen.poker-reference .your-hand .card-rank {
        font-size: clamp(24px, 6vw, 32px) !important;
    }

    #pokerScreen.poker-reference .your-hand .card-suit {
        font-size: clamp(27px, 7vw, 36px) !important;
    }
}


/* 2026-09-06 desktop poker hierarchy and clearance */
@media (min-width: 861px) {
  #pokerScreen.poker-reference .poker-reference-center { position: relative !important; }
  #pokerScreen.poker-reference .table-center { top: 29% !important; width: 82% !important; }
  #pokerScreen.poker-reference .table-center .pot { margin-bottom: 1.5% !important; font-size: clamp(13px, 1vw, 17px) !important; transform: translateY(-6px); }
  #pokerScreen.poker-reference .table-center .pot strong { font-size: clamp(34px, 2.7vw, 48px) !important; line-height: 1 !important; }
  #pokerScreen.poker-reference .community-cards { gap: clamp(8px, .8vw, 14px) !important; }
  #pokerScreen.poker-reference .community-cards .card,
  #pokerScreen.poker-reference .community-cards .card-slot { width: clamp(70px, 4.65vw, 84px) !important; height: auto !important; aspect-ratio: 5 / 7 !important; }
  #pokerScreen.poker-reference .community-cards .card-rank { font-size: clamp(28px, 2.1vw, 36px) !important; }
  #pokerScreen.poker-reference .community-cards .card-suit { font-size: clamp(31px, 2.35vw, 40px) !important; }
  #pokerScreen.poker-reference #playerCardZone { z-index: 12 !important; transform: none !important; margin: 0 0 clamp(174px, 11vw, 218px) !important; pointer-events: none !important; }
  #pokerScreen.poker-reference #playerCardZone .your-hand { gap: clamp(9px, .8vw, 14px) !important; margin: 0 !important; pointer-events: auto !important; }
  #pokerScreen.poker-reference #playerCardZone .your-hand .card,
  #pokerScreen.poker-reference #playerCardZone .your-hand .card-slot { width: clamp(72px, 4.75vw, 86px) !important; height: auto !important; aspect-ratio: 5 / 7 !important; }
  #pokerScreen.poker-reference #playerCardZone .your-hand .card-rank { font-size: clamp(29px, 2.2vw, 38px) !important; }
  #pokerScreen.poker-reference #playerCardZone .your-hand .card-suit { font-size: clamp(32px, 2.45vw, 42px) !important; }
  #pokerScreen.poker-reference #squishyMascots .clickable-mascot { width: clamp(118px, 8vw, 154px) !important; bottom: 4px !important; }
  #pokerScreen.poker-reference .controls { margin-top: 0 !important; transform: translateY(clamp(-78px, -4.5vw, -56px)); }
  #pokerScreen.poker-reference #pokerChips { gap: clamp(10px, 1vw, 18px) !important; }
  #pokerScreen.poker-reference #pokerChips > .chip-option { width: clamp(76px, 5.15vw, 92px) !important; max-width: 92px !important; min-height: clamp(76px, 5.15vw, 92px) !important; }
}