:root {
    --accent-primary: #ffd700;
    --accent-primary-rgb: 255, 215, 0;
    --accent-secondary: #b8860b;
    --accent-contrast: #3a2a00;
    --accent-tint: #2a2208;
}

html {
  font-size: 14px;
}

main {
    height: calc(100vh - 56px - 40px);
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    overflow: hidden;
    margin: 0;
    padding: 0;
    background-image: var(--venue-background-image, url("/img/background.jpg"));
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

/* An empty field shows its prefill hint left-aligned and faint, so it reads as a hint and not as a value. */
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: rgba(160, 160, 160, 0.45);
  text-align: start;
}

.form-control::placeholder {
  color: rgba(160, 160, 160, 0.45);
  text-align: start;
  opacity: 1;
}

.full-screen-row {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    height: calc(100vh - 45px);
    width: 100vw;
}

.column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    min-height: 0; /* critical */
}

    .column.left, .column.right {
        font-size: 2rem; /* large for screens */
    }

    .column.middle {
        font-size: 6rem; /* super large for countdown timer */
    }

    .column.right {
        overflow: hidden;
    }

    .column.left, .column.right {
        display: flex;
        flex-direction: column;
        justify-content: center; /* vertical centering of HUD if desired */
        align-items: center;
        padding: 20px;
        height: 100%; /* take full height of the column */
        box-sizing: border-box;
    }

/*Below is for the countdown timer*/
#countdown {
    width: 100%;
    display: flex;
    justify-content: center;
}

.countdownHolder {
    margin: 0;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 1.6em; /* keeps your 1.6em */
    line-height: 1; /* remove extra space below digits */
    text-align: center;
    letter-spacing: -3px;
}

@media all and (min-width: 960px) {
    .countdownHolder {
        font-size: 100px;
    }
}

@media all and (max-width: 959px) and (min-width: 600px) {
    .countdownHolder {
        font-size: 80px;
    }
}

@media all and (max-width: 599px) and (min-width: 320px) {
    .countdownHolder {
        font-size: 40px;
    }
}

/* MM:SS always reads straight across: never wrap, and scale down so all four digits fit the middle
   column (half the viewport, less padding). The digits and divider span about 8.4em plus ~26px. */
.countdownHolder {
    white-space: nowrap;
    font-size: min(100px, calc((50vw - 70px) / 8.4));
}

    .countdownHolder > span {
        flex-shrink: 0;
    }

.position {
    display: inline-block;
    height: 1.6em;
    overflow: hidden;
    position: relative;
    width: 1.05em;
}

.digit {
    position: absolute;
    display: block;
    line-height: 1.6em;
    width: 1em;
    background-color: #444;
    border-radius: 0.2em;
    text-align: center;
    color: #fff;
    letter-spacing: -1px;
}

    .digit.static {
        box-shadow: 1px 1px 1px rgba(4, 4, 4, 0.35);
        background-image: linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
        background-image: -o-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
        background-image: -moz-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
        background-image: -webkit-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
        background-image: -ms-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
        background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.5, #3A3A3A), color-stop(0.5, #444444) );
    }

/**
 * You can use these classes to hide parts
 * of the countdown that you don't need.
 */

.countDays {
    display: none !important;
}

.countDiv0 {
    display: none !important;
}

.countHours {
    display: none !important;
}

.countDiv1 {
    display: none !important;
}

.countMinutes {
    font-size: 2em;
}

.countDiv2 {
    font-size: 2.25em;
    margin-right: 10px;
}

.countSeconds {
    font-size: 2em;
}

.reset-btn {
    position: absolute;
    bottom: 16px;
    right: 16px;
}

.pausedText {
    font-size: 2em;
    color: white;
    animation: slowPulse;
}

.countDiv {
    display: inline-block;
    width: 16px;
    height: 1em;
    position: relative;
}

    .countDiv:before,
    .countDiv:after {
        position: absolute;
        width: 5px;
        height: 5px;
        background-color: #444;
        border-radius: 50%;
        left: 50%;
        margin-left: -3px;
        top: 0.5em;
        box-shadow: 1px 1px 1px rgba(4, 4, 4, 0.5);
        content: '';
    }

    .countDiv:after {
        top: 0.9em;
    }

/* Container takes 30% of screen */
.blind-schedule {
    height: 100vh;
    background-color: #111;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    border-right: 2px solid #333;
}

/* Header */
.schedule-header {
    padding: 16px;
    text-align: center;
    border-bottom: 2px solid #333;
    background-color: #1a1a1a;
}

    .schedule-header h2 {
        margin: 0;
        font-size: 1.4rem;
        letter-spacing: 1px;
    }

/* Scrollable list */
.schedule-list {
    overflow-y: auto;
    flex: 1;
}

/* Row layout */
.schedule-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #222;
    align-items: center;
    transition: background-color 0.3s ease;
}

    /* Level rows */
    .schedule-row.level {
        background-color: #141414;
    }

    /* Break rows */
    .schedule-row.break {
        background-color: #1f1f1f;
        font-style: italic;
        color: #f0c040;
    }

/* Level number column */
.level-number {
    font-weight: bold;
    width: 40%;
}

/* Blind amount column */
.level-blinds {
    text-align: right;
    width: 60%;
}

/* Hover effect */
.schedule-row.level:hover {
    background-color: #1e1e1e;
}

/* Vue will toggle this */
.schedule-row.active {
    background-color: #006400;
    color: #ffffff;
    font-weight: bold;
}

.current-round {
    background-color: #1e88e5;
    color: white;
    animation: slowPulse 2.2s ease-in-out infinite;
}

@keyframes slowPulse {
    0% {
        box-shadow: 0 0 0px rgba(30, 136, 229, 0.6);
    }

    50% {
        box-shadow: 0 0 20px rgba(30, 136, 229, 0.9);
    }

    100% {
        box-shadow: 0 0 0px rgba(30, 136, 229, 0.6);
    }
}

/* ===== HUD Container ===== */

.blind-hud {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(145deg, #111 0%, #1c1c1c 100%);
    border-radius: 14px;
    padding: 0; /* important */
    overflow: hidden; /* prevent spill */
}

.blind-hud-header {
    flex: 0 0 auto; /*fixed height */
    padding: 16px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 18px;
    color: var(--accent-primary);
    background: #111;
    border-bottom: 1px solid #333;
}

.blind-hud-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -ms-overflow-style: none;
    padding: 10px 16px 16px 16px;
    scrollbar-width: none;
}

    .blind-hud-body::-webkit-scrollbar {
        display: none;
    }

.blind-row {
    padding: 10px 12px;
    margin-bottom: 6px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.blind-level {
    color: #bbb;
    display: flex;
    justify-content: center; /* horizontal center */
    align-items: center; /* vertical center */
    text-align: center; /* center inline text */
    width: 100%;
}

.blind-round-number {
    font-weight: bold;
    opacity: 0.7;
}

.blind-values {
    font-size: 18px;
    font-weight: 600;
}

/* ===== Break Styling ===== */

.blind-break {
    background: rgba(255,255,255,0.05);
    font-style: italic;
    color: #bbb;
}

.blind-break-text {
    text-align: center;
}

/* ===== CURRENT ROUND PULSE ===== */

.blind-current {
    background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary));
    font-weight: bold;
    animation: pulseGlow 2s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(var(--accent-primary-rgb),0.7);
}
    .blind-current .blind-level {
        color: var(--accent-contrast) !important;
        text-align: center;
    }
    .blind-current .blind-break-text {
        color: var(--accent-contrast) !important;
        text-align: center;
    }

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 10px rgba(var(--accent-primary-rgb),0.6);
    }

    50% {
        box-shadow: 0 0 30px rgba(var(--accent-primary-rgb),1);
    }

    100% {
        box-shadow: 0 0 10px rgba(var(--accent-primary-rgb),0.6);
    }
}

.payout-hud-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* start at top */
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

.payout-hud {
    width: 100%;
    height: 100%;
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(145deg, #111 0%, #1c1c1c 100%);
    border-radius: 14px;
    box-shadow: inset 0 0 20px rgba(255,255,255,0.05), 0 10px 30px rgba(0,0,0,0.6);
    overflow: hidden;
}

/* Header fixed */
.payout-hud-header {
    flex: 0 0 60px;
    padding: 16px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 18px;
    color: var(--accent-primary);
    background: #111;
    border-bottom: 1px solid #333;
    text-shadow: 0 0 8px rgba(var(--accent-primary-rgb),0.6);
}

/* Body fixed */
.payout-hud-body {
    flex: 0 0 calc(100% - 60px - 300px); /* HUD height minus header/footer */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding: 16px;
    color: #bbb;
    font-weight: 600;
    overflow: hidden;
}

.places-section {
    flex: 1 1 auto; /* takes remaining space */
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertical center */
    align-items: center; /* horizontal center */
    text-align: center;
}

.controls {
    position: relative; /* create new stacking context */
    z-index: 20; /* above paused overlay */
}

/* Footer fixed 300px */
.payout-hud-footer {
    flex: 0 0 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    border-top: 1px solid #333;
    background: rgba(255,255,255,0.02);
    overflow: hidden;
}

.qr-code {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 12px;
}

.column.middle {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* remove space-between */
    align-items: center;
    padding: 20px;
    height: 100%;
    box-sizing: border-box;
}

.middle-top {
    position: relative;
    flex: 0 0 auto; /* only as tall as content */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    margin-bottom: 20px; /* optional spacing between top content and logo */
}

    /* Centering wrapper for controls */
    .middle-top .controls,
    .middle-top > div[v-else] {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;  handles multiple buttons nicely 
    }

.middle-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* prevents push-off */
    flex: 1 1 auto;
    min-height: 0; /* important for flex layouts */
}

.middle-logo {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 14px; /* slightly rounded */
}

.message {
    color: var(--accent-primary); /* bright gold */
    text-align: center;
    font-weight: bold;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8), /* darker drop shadow */
    0 0 20px rgba(var(--accent-primary-rgb), 0.8); /* bright gold glow */
    display: inline-block; /* shrink background to text width */
    animation: messagePulse 2s ease-in-out infinite;
}
@keyframes messagePulse {
    0% {
        text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8), 0 0 20px rgba(var(--accent-primary-rgb), 0.8);
    }

    50% {
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8), 0 0 35px rgba(var(--accent-primary-rgb), 1);
    }

    100% {
        text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8), 0 0 20px rgba(var(--accent-primary-rgb), 0.8);
    }
}

/* Buy-In Rules Section */
.buyin-section .text-primary {
    color: var(--accent-primary) !important; /* Gold for emphasis */
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 1em;
    margin-bottom: 0.5em;
    font-size: 1.2rem; /* Slightly smaller than main text */
}

/* Add subtle shadow for poker-style pop */
.buyin-section .text-primary {
    text-shadow: 0 0 2px rgba(0,0,0,0.5);
}

/* Adjust text-danger for consistency */
.buyin-section .text-danger {
    color: #e03131; /* Match suit-red */
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.6rem;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    text-shadow: 0 0 2px rgba(0,0,0,0.5);
}

/* Button triangle container */
.button-triangle {
    display: flex;
    flex-direction: column;
    align-items: center; /* center horizontally */
    gap: 1rem; /* spacing between rows */
    margin-top: 1.5rem;
}

/* Each row of buttons */
.button-row {
    display: flex;
    justify-content: center; /* center the row */
    gap: 1rem; /* space between buttons */
}

    /* Optional: make reset slightly smaller than top row */
    .button-row.bottom-row .btn {
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
        justify-content: center;
        margin-top: 15px;
    }

/* --------- Poker Chip Button Base --------- */
button.btn {
    font-family: 'Arial Black', Arial, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    border: none;
    border-radius: 50px; /* rounded like a chip */
    padding: 12px 24px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    letter-spacing: 1px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.5), inset 0 -2px 0 rgba(255,255,255,0.2);
    transition: all 0.2s ease;
    min-width: 100px;
}

/* --------- Chip Colors --------- */
/* Green chip (primary action) */
button.btn-primary {
    background: linear-gradient(145deg, #1e4d2b, #27a844);
    color: #fff;
    border: 3px solid #2c6b3a;
}

/* Red chip (danger action) */
button.btn-danger {
    background: #800000; /* darker red */
    color: var(--accent-primary); /* gold text */
    border: 2px solid #500000;
    font-size: 0.85rem; /* slightly smaller than normal buttons */
    padding: 5px 14px;
}

/* --------- Hover Effect --------- */
button.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(0,0,0,0.6), inset 0 -2px 0 rgba(255,255,255,0.25);
}

button.btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.4), inset 0 -2px 0 rgba(255,255,255,0.15);
}

button.btn:focus {
    outline: none;
    transform: translateY(0);
    box-shadow: 0 4px 6px rgba(0,0,0,0.5), inset 0 -2px 0 rgba(255,255,255,0.2);
}

/* --------- Inner Highlight (like light on chip) --------- */
button.btn::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.35), transparent 60%);
    transform: rotate(-25deg);
    pointer-events: none;
}

/* --------- Small +/- Buttons --------- */
button.btn-sm {
    padding: 8px 16px;
    font-size: 1rem;
    border-radius: 40px;
    min-width: 50px;
}

/* --------- Buy-ins Counter Styling --------- */
.buyin-section span {
    font-weight: bold;
    font-size: 1.5rem;
    margin: 0 15px;
    color: var(--accent-primary);
    text-shadow: 1px 1px 2px black;
}

/* --------- Optional Text Shadow for All Buttons --------- */
button.btn-primary, button.btn-danger {
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

/* --------- Disabled / Inactive Effect --------- */
button.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

/* Overlay container */
.paused-overlay {
    position: absolute; /* sits on top */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6); /* dark transparent layer */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10; /* above all content */
    pointer-events: none; /* allows button clicks below if needed */
}

    /* PAUSED text */
    .paused-overlay span {
        font-size: 5rem;
        color: #ff2121; /* bright red */
        text-transform: uppercase;
        font-weight: 900;
        letter-spacing: 0.2em;
        text-shadow: 0 0 20px #ff2121, 0 0 40px #ff2121, 0 0 60px #ff2121;
        animation: pulseRed 1s infinite alternate;
    }

/* Pulse animation */
@keyframes pulseRed {
    from {
        transform: scale(1);
        opacity: 0.8;
    }

    to {
        transform: scale(1.1);
        opacity: 1;
    }
}

.ticker-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 45px;
    overflow: hidden;
    background: #111;
    color: white;
    display: flex;
    align-items: center;
    font-weight: 600;
    letter-spacing: 1px;
    border-top: 2px solid #333;
}

.ticker {
    display: inline-block;
    white-space: nowrap;
    animation: ticker-scroll 40s linear infinite;
}

.ticker-item {
    display: flex;
    align-items: center;
    font-size: 1.5em;
}

.ticker-track {
    display: flex;
    width: max-content;
    animation: ticker-scroll linear infinite;
    position: relative;
    z-index: 3;
}

.ticker-content {
    display: flex;
    white-space: nowrap;
    position: relative;
    z-index: 3;
}

.ticker-text {
    text-transform: uppercase;
    padding: 0 40px 0 40px;
    color: var(--accent-primary);
    letter-spacing: 1px;
    font-weight: 600;
}

.ticker-sep {
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: .85;
    font-size: 1.5em;
}

.suit-0, .suit-2 {
    color: white;
}

.suit-1, .suit-3 {
    color: #e03131;
}

@keyframes ticker-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.ticker-wrapper::before,
.ticker-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width: 80px;
    height: 100%;
    z-index: 2;
}

.ticker-wrapper::before {
    left: 0;
    background: linear-gradient(to right, #111, transparent);
}

.ticker-wrapper::after {
    right: 0;
    background: linear-gradient(to left, #111, transparent);
}

/* ===== Timer: scale to any landscape screen =====
   The rules above are sized for a big TV. These cap every fixed height and font at that TV size and
   shrink them with the viewport height (vh), so a laptop or tablet in landscape still fits the whole
   payout column, the countdown and the blind schedule without clipping. */
.column.left, .column.right, .column.middle {
    padding: clamp(6px, 1.8vh, 20px);
}

.column.left, .column.right {
    font-size: clamp(0.9rem, 3vh, 2rem);
}

.payout-hud-header, .blind-hud-header {
    flex: 0 0 auto;
    padding: clamp(6px, 1.5vh, 16px);
    font-size: clamp(12px, 1.7vh, 18px);
}

.payout-hud-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: clamp(6px, 1.5vh, 16px);
}

    .payout-hud-body .mb-5 {
        margin-bottom: clamp(0.25rem, 2vh, 3rem) !important;
    }

.places-section .message {
    font-size: clamp(1rem, 3.6vh, 2.5rem);
    margin-bottom: clamp(0.1rem, 0.8vh, 0.5rem);
}

.buyin-section .text-primary {
    font-size: clamp(0.7rem, 1.6vh, 1.2rem);
    margin-top: clamp(0.2rem, 1vh, 1em);
    margin-bottom: clamp(0.1rem, 0.5vh, 0.5em);
}

.buyin-section .text-danger {
    font-size: clamp(0.8rem, 2.2vh, 1.6rem);
    margin-top: clamp(0.1rem, 0.6vh, 0.5em);
    margin-bottom: clamp(0.1rem, 0.6vh, 0.5em);
}

.payout-hud-footer {
    flex: 0 0 clamp(110px, 28vh, 300px);
    padding: clamp(6px, 1.5vh, 16px);
}

/* The countdown is about 3.2em tall, so 9vh keeps it under a third of the screen height. */
.countdownHolder {
    font-size: min(100px, calc((50vw - 70px) / 8.4), 9vh);
}

.middle-top h1.message {
    font-size: clamp(1.1rem, 4vh, 2.5rem);
}

.middle-top h2.message {
    font-size: clamp(0.9rem, 3vh, 2rem);
}

.middle-top {
    margin-bottom: clamp(6px, 1.8vh, 20px);
}

.blind-row {
    padding: clamp(3px, 0.9vh, 10px) 12px;
    margin-bottom: clamp(2px, 0.55vh, 6px);
}

.paused-overlay span {
    font-size: clamp(2rem, 8vh, 5rem);
}

.buyin-section span {
    font-size: clamp(0.9rem, 2.8vh, 1.5rem);
    white-space: nowrap;
}

    .buyin-section span.mx-5 {
        margin-left: clamp(0.25rem, 1.5vw, 3rem) !important;
        margin-right: clamp(0.25rem, 1.5vw, 3rem) !important;
    }

/* The ticker shrinks with the screen too, and the grid above it gives up exactly that much height. */
.full-screen-row {
    height: calc(100vh - clamp(28px, 5.5vh, 45px));
}

.ticker-wrapper {
    height: clamp(28px, 5.5vh, 45px);
}

.ticker-item {
    font-size: clamp(0.9em, 2.4vh, 1.5em);
}

/* The QR code on the timer is also a link to sign in; it fills the footer as the image did. */
.qr-link {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    max-width: 100%;
}

/* Player-facing pages (sign-in, account, venue) read on a narrow dark panel over the background image. */
.dark-panel {
    width: 100%;
    max-width: none; /* full width on a phone; capped to a phone-width column on bigger screens (below) */
    height: 100vh;
    margin: 0 auto;
    overflow-y: auto;
    background-color: rgba(17, 17, 17, 0.94);
    color: #e6e6e6;
    padding: 1.25rem 1rem;
    box-sizing: border-box;
    color-scheme: dark; /* native pickers (date/time) render dark too */
}

    .dark-panel h1 {
        font-size: 1.75rem;
    }

    /* Plain links only: a link styled as a button keeps its button colors. */
    .dark-panel a:not(.btn) {
        color: #6cb2ff;
    }

    .dark-panel hr {
        border-color: #444;
    }

    .dark-panel .text-muted {
        color: #a8a8a8 !important;
    }

    /* Stock Identity pages (e.g. the Logout page's button) use text-dark, which vanishes on the dark panel. */
    .dark-panel .text-dark {
        color: #e6e6e6 !important;
    }

    .dark-panel .form-control,
    .dark-panel .form-select {
        font-size: 16px; /* 16px or larger stops iOS zooming the page when a field is focused */
        background-color: #222;
        border-color: #555;
        color: #f0f0f0;
    }

    /* Bootstrap's light-arrow select icon from its own dark theme. */
    .dark-panel .form-select {
        --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }

        .dark-panel .form-control:focus,
        .dark-panel .form-select:focus {
            background-color: #262626;
            color: #fff;
        }

    .dark-panel .form-floating > label {
        color: #a8a8a8;
    }

    /* A card per item (a game, a reservation) instead of a table, so it reads on a phone. */
    .dark-panel .panel-card {
        background-color: #1d1d1d;
        border: 1px solid #333;
        border-radius: 8px;
        padding: 0.75rem 1rem;
        margin-bottom: 0.75rem;
    }

    /* A game in progress pulses with the timer's current-round gold glow (pulseGlow). */
    .dark-panel .panel-card.game-ongoing {
        border-color: var(--accent-primary);
        background-color: var(--accent-tint);
        animation: pulseGlow 2s ease-in-out infinite;
    }

    .dark-panel .game-ongoing-label {
        color: var(--accent-primary);
        font-weight: 600;
    }

    .dark-panel .panel-card-title {
        font-weight: 600;
        font-size: 1.05rem;
    }

    .dark-panel .panel-card-meta {
        color: #a8a8a8;
        font-size: 0.95rem;
        margin-bottom: 0.5rem;
    }

    .dark-panel .panel-card-links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem 1.25rem;
        margin-top: 0.5rem;
    }

    .dark-panel .panel-footer {
        margin-top: 1.5rem;
        padding-top: 1rem;
        border-top: 1px solid #333;
    }

        .dark-panel .panel-footer .btn-link {
            color: #6cb2ff;
            padding: 0;
            text-decoration: none;
        }

/* Game control page: the operator's phone remote. Dark, single column, big tap targets. */
[v-cloak] {
    display: none;
}

.control-page {
    width: 100%;
    max-width: none;
    height: 100vh;
    margin: 0 auto;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 1rem;
    background-color: rgba(17, 17, 17, 0.94);
    color: #e6e6e6;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    text-align: center;
}

    .control-page a {
        color: #6cb2ff;
    }

.control-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
}

.control-connection {
    font-size: 0.85rem;
    padding: 2px 10px;
    border-radius: 999px;
}

    .control-connection.is-live {
        background-color: #1e5b2e;
        color: #b9f0c6;
    }

    .control-connection.is-offline {
        background-color: #6b1f1f;
        color: #f5c2c2;
    }

.control-state {
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

    .control-state.is-running { color: #7ee08f; }
    .control-state.is-paused { color: #ffc857; }
    .control-state.is-idle { color: #a8a8a8; }
    .control-state.is-cancelled { color: #ff6b6b; }

.control-clock {
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.control-round {
    font-size: 1.25rem;
}

.control-note {
    font-size: 0.95rem;
    color: #a8a8a8;
}

.control-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

    .control-buttons .btn {
        width: 100%;
        padding-top: 0.9rem;
        padding-bottom: 0.9rem;
    }

.control-label {
    font-size: 0.95rem;
    color: #a8a8a8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.control-stepper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin: 0.5rem 0;
}

    .control-stepper .btn {
        width: 64px;
        height: 64px;
        font-size: 1.75rem;
        line-height: 1;
    }

.control-count {
    font-size: 2.5rem;
    font-weight: 700;
    min-width: 3ch;
    font-variant-numeric: tabular-nums;
}

.control-feedback {
    min-height: 1.5em;
    font-size: 0.95rem;
}

.control-timer {
    margin-top: auto; /* keeps the timer button at the foot of the page */
    padding-bottom: 0.5rem;
}

/* Reset is destructive and rare: a quiet text link in the header, not a button that competes for a tap. */
/* Text-link buttons opt out of the site-wide poker-chip button.btn styling. */
.control-page button.control-reset-link,
.dark-panel button.btn-link {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    min-width: 0;
    padding: 0;
    font-family: inherit;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: none;
    transform: none;
}

    .control-page button.control-reset-link::before,
    .dark-panel button.btn-link::before {
        content: none;
    }

.control-page button.control-reset-link {
    color: #d9828a;
    font-size: 0.9rem;
}

/* Admin pages (_AdminLayout): the page's panel scrolls above a bottom nav bar that holds the admin tools. */
.app-shell {
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh; /* excludes a phone browser's toolbars, so the bar is never hidden behind them */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.app-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

    /* Panel pages (signed in, plus Login / Register and the other account pages) center their title, and a
       subtitle line directly under it (e.g. a game's date). */
    .app-content h1,
    .app-content h1 + p.text-muted,
    .dark-panel h1,
    .dark-panel h1 + p.text-muted {
        text-align: center;
    }

    .app-content > .dark-panel,
    .app-content > .control-page {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
    }

.app-bottom-nav {
    flex: 0 0 auto;
    display: flex;
    background-color: #111;
    border-top: 1px solid #333;
    padding-bottom: env(safe-area-inset-bottom);
}

    .app-bottom-nav > a,
    .app-bottom-nav > form {
        flex: 1 1 0;
    }

    .app-bottom-nav a,
    .app-bottom-nav button {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.2rem;
        padding: 0.55rem 0.25rem;
        background: none;
        border: none;
        color: #a8a8a8;
        font-size: 0.75rem;
        text-decoration: none;
    }

        .app-bottom-nav a i,
        .app-bottom-nav button i {
            font-size: 1.25rem;
        }

        .app-bottom-nav a:hover,
        .app-bottom-nav button:hover {
            color: #e6e6e6;
        }

        .app-bottom-nav a.active {
            color: #6cb2ff;
        }

/* Game form blind schedule: one compact line per round, edited in a dialog (blind-schedule.js). */
.blind-list {
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.blind-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.25rem 0.45rem 0.85rem;
    background-color: #1d1d1d;
}

    .blind-row + .blind-row {
        border-top: 1px solid #2c2c2c;
    }

.blind-row-text {
    flex: 1 1 auto;
    min-width: 0;
}

.blind-row-value {
    font-weight: 600;
}

.blind-row-note {
    color: #a8a8a8;
    font-size: 0.85rem;
}

.blind-row-edit {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: #a8a8a8;
    font-size: 1.1rem;
    padding: 0.35rem 0.75rem;
}

    .blind-row-edit:hover {
        color: #6cb2ff;
    }

.blind-dialog {
    width: min(380px, calc(100vw - 2rem));
    background-color: #1a1a1a;
    color: #e6e6e6;
    border: 1px solid #444;
    border-radius: 10px;
    padding: 1.25rem 1rem;
    color-scheme: dark;
}

    .blind-dialog::backdrop {
        background-color: rgba(0, 0, 0, 0.6);
    }

    .blind-dialog .form-control {
        font-size: 16px; /* stops iOS zooming when a field is focused */
        background-color: #222;
        border-color: #555;
        color: #f0f0f0;
    }

/* Control page blind schedule (admins and players): the current round pulses like the timer's. */
.control-schedule {
    text-align: left;
}

    .control-schedule .control-label {
        text-align: center;
        margin-bottom: 0.5rem;
    }

.blind-row.blind-row-current {
    background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary));
    color: var(--accent-contrast);
    animation: pulseGlow 2s ease-in-out infinite;
}

    .blind-row.blind-row-current .blind-row-note {
        color: var(--accent-contrast);
    }

/* The Control page's schedule is a short window the page scrolls itself (control.js centerCurrentRound);
   overflow is hidden so it can't be scrolled by hand, and the edges fade out. */
/* The frame carries the border: the window's edge fade would otherwise fade its own border too. */
.control-blind-frame {
    border: 1px solid #555;
    border-radius: 8px;
    background-color: #181818;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.04);
    padding: 0.25rem 0;
    overflow: hidden;
}

    .control-blind-frame .blind-list {
        border: none;
        border-radius: 0;
        margin-bottom: 0;
    }

.control-blind-window {
    position: relative; /* rows' offsetTop is measured from here */
    max-height: 15rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
}

.venue-logo {
    display: block;
    max-width: 100%;
    max-height: 8rem;
    margin: 0 auto 1rem;
    object-fit: contain;
}

/* Bigger screens keep the narrow phone-width column; a phone uses its whole width. */
@media (min-width: 768px) {
    .dark-panel,
    .control-page,
    .app-shell {
        max-width: 420px;
    }
}

/* A game card's actions are full buttons in a grid, not small text links. */
.dark-panel .panel-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

    .dark-panel .panel-card-actions form {
        display: contents;
    }

    .dark-panel .panel-card-actions .btn {
        width: 100%;
        min-height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
    }

    .dark-panel .panel-card-actions .panel-card-primary {
        grid-column: 1 / -1;
    }

/* Settings sections on the Edit Venue page read as separate blocks. */
.dark-panel .venue-section {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #333;
}

    .dark-panel .venue-section > h5 {
        margin-bottom: 1rem;
    }

/* Phone: roomier fields and buttons, like a mobile app. */
@media (max-width: 767px) {
    .dark-panel {
        padding: 1.5rem 1.25rem;
    }

    .dark-panel .form-control,
    .dark-panel .form-select {
        font-size: 18px;
        min-height: 3.5rem;
    }

    .dark-panel .form-floating > .form-control,
    .dark-panel .form-floating > .form-select {
        height: 4rem;
        min-height: 4rem;
    }

    .dark-panel .form-floating > label {
        font-size: 1rem;
    }

    .dark-panel .form-label,
    .dark-panel label {
        font-size: 1rem;
    }

    .dark-panel textarea.form-control {
        min-height: 6rem;
    }

    .dark-panel .btn:not(.btn-link):not(.btn-sm) {
        min-height: 3.25rem;
        font-size: 1.1rem;
    }

    .dark-panel .btn-sm {
        min-height: 2.75rem;
        font-size: 1rem;
    }

    .dark-panel .btn-lg {
        min-height: 3.75rem;
        font-size: 1.2rem;
    }

    .dark-panel .form-check-input {
        width: 1.5rem;
        height: 1.5rem;
    }

    .app-bottom-nav a,
    .app-bottom-nav button {
        padding: 0.7rem 0.25rem;
        font-size: 0.8rem;
    }
}

/* Room between a label and its field, between stacked fields, and between a checkbox and its text. */
.dark-panel .form-label,
.dark-panel .mb-3 > label:not(.form-check-label),
.dark-panel .col-6 > label,
.dark-panel .col-12 > label {
    display: block;
    margin-bottom: 0.45rem;
}

.dark-panel .row.g-3 {
    row-gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.dark-panel .form-check {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 2.75rem;
    padding-left: 0;
    margin-bottom: 0.5rem;
}

    .dark-panel .form-check .form-check-input {
        position: static;
        flex: 0 0 auto;
        width: 1.5rem;
        height: 1.5rem;
        margin: 0;
    }

    .dark-panel .form-check .form-check-label {
        margin: 0;
    }

.dark-panel [id^="last"] {
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
}

/* A game in play: the label pulses in the accent color, always in capitals. */
.dark-panel .status-underway {
    color: var(--accent-primary);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    animation: underwayPulse 1.6s ease-in-out infinite;
}

@keyframes underwayPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* Every paid place on the phone view, one row each. */
.control-payouts {
    max-width: 16rem;
    margin: 0.5rem auto 0;
}

.control-payout {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
    border-bottom: 1px solid #333;
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
}

/* Check-in: the prompt shown first, and the "you're here" mark on a game and on the host's reservation list. */
.dark-panel .check-in-card {
    border-color: #2e9b57;
    background-color: #12261a;
}

.dark-panel .checked-in-label {
    color: #7ee08f;
    font-weight: 600;
}

.dark-panel .at-venue-badge {
    color: #7ee08f;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Own spacing and pill styling, so they hold on any Bootstrap version the page loads. */
.dark-panel .count-badge {
    display: inline-block;
    min-width: 1.6rem;
    margin-left: 0.9rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background-color: #0d6efd;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.dark-panel .yes-no-row {
    display: flex;
    gap: 0.75rem;
}

.dark-panel .at-venue-badge {
    margin-top: 0.15rem;
}

/* A list card with its action on the right, so the card stays one line tall. */
.dark-panel .panel-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

    .dark-panel .panel-card-row .panel-card-text {
        min-width: 0;
        flex: 1 1 auto;
    }

    .dark-panel .panel-card-row .panel-card-meta {
        margin-bottom: 0;
        overflow-wrap: anywhere;
    }

.dark-panel a.edit-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    padding: 0 1rem;
    border: 1px solid #555;
    border-radius: 999px;
    background-color: #262626;
    color: #e6e6e6;
    font-weight: 600;
    text-decoration: none;
}

    .dark-panel a.edit-pill:hover {
        border-color: var(--accent-primary);
        color: var(--accent-primary);
    }

/* Counting down to a game that is hours away: show the hours group too, and scale the digits to fit six of them. */
.countdownHolder.show-hours .countHours,
.countdownHolder.show-hours .countDiv1 {
    display: inline-block !important;
}

.countdownHolder.show-hours .countHours {
    font-size: 2em;
}

.countdownHolder.show-hours .countDiv1 {
    font-size: 2.25em;
    margin-right: 10px;
}

.countdownHolder.show-hours {
    font-size: min(100px, calc((50vw - 70px) / 12.6));
}

/* A clear way back to the page a screen belongs to, at the top-left of the panel. */
.dark-panel a.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    margin-bottom: 0.5rem;
    padding: 0 1rem 0 0.75rem;
    border: 1px solid #555;
    border-radius: 999px;
    background-color: #262626;
    color: #e6e6e6;
    font-weight: 600;
    text-decoration: none;
}

/* ===== Timer, counting down to the next game ===== */

/* A day or more away: days show too, and the digits shrink to fit eight of them. */
.countdownHolder.show-days .countDays,
.countdownHolder.show-days .countDiv0 {
    display: inline-block !important;
}

.countdownHolder.show-days .countDays {
    font-size: 2em;
}

.countdownHolder.show-days .countDiv0 {
    font-size: 2.25em;
    margin-right: 10px;
}

.countdownHolder.show-days {
    font-size: min(100px, calc((50vw - 70px) / 16.8), 9vh);
}

.countdownHolder.show-hours:not(.show-days) {
    font-size: min(100px, calc((50vw - 70px) / 12.6), 9vh);
}

/* Reserved seats stand in for the buy-ins while the game has not started. */
.seats-reserved {
    color: var(--accent-primary);
    font-weight: 700;
    font-size: clamp(1rem, 3vh, 2.2rem);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.6);
}

/* The title under the QR code: Reserve Seat, then Check In from two hours before the start. */
.payout-hud-footer {
    flex-direction: column;
    gap: clamp(2px, 0.8vh, 8px);
}

.payout-hud-footer .qr-link {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

.qr-caption {
    flex: 0 0 auto;
    color: var(--accent-primary);
    font-weight: 700;
    font-size: clamp(0.9rem, 2.4vh, 1.6rem);
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.6);
}

/* ===== Countdown labels (Days, Hours, Minutes, Seconds) =====
   Each group is its digits over a small pulsing label. The groups sit on one top line, and the dots between them are dropped to the digits'
   own height, as they were when everything shared a text baseline. */
.countdownHolder {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.countDays,
.countHours,
.countMinutes,
.countSeconds {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.countdownHolder.show-days .countDays,
.countdownHolder.show-days .countDiv0,
.countdownHolder.show-hours .countHours,
.countdownHolder.show-hours .countDiv1 {
    display: inline-flex !important;
}

.countdownHolder .countDiv {
    margin-top: 0.422em; /* the digits are 3.2em tall and the dots 2.25em, so their bottoms line up */
}

.countDigits {
    display: flex; /* no line box under the digits, so the label sits right against them */
}

.countLabel {
    display: none;
    margin-top: 0.35em;
    font-size: 0.13em;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-primary);
    animation: countLabelPulse 2s ease-in-out infinite;
}

.countdownHolder.show-labels .countLabel {
    display: block;
}

@keyframes countLabelPulse {
    0%, 100% {
        opacity: 0.55;
        text-shadow: 0 0 4px rgba(var(--accent-primary-rgb), 0.4);
    }

    50% {
        opacity: 1;
        text-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.95);
    }
}

/* ===== The QR code: as big as the left column allows, so it scans from across the room ===== */
.payout-hud-footer {
    flex: 0 0 auto;
    width: 100%;
    padding: clamp(2px, 0.6vh, 8px);
    border-top: 0;
    border-bottom: 1px solid #333;
}

.payout-hud-footer .qr-link {
    flex: 0 0 auto;
    width: min(100%, 38vh);
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: 100%;
    max-height: none;
}

.payout-hud-footer .qr-code {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    border-radius: 6px;
}

/* Something to look at while counting down with no seat line: a short poker clip below the QR code in the left column. */
.idle-gif {
    display: block;
    width: 100%;
    max-height: 26vh;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.6);
}

/* The clip sits at the bottom of its section and of the left column: the section takes the free height and the clip drops to its end. */
.buyin-section:has(.idle-gif) {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.payout-hud-body:has(.idle-gif) .places-section {
    flex: 0 0 auto;
}

/* Same width as the QR code above it (see .payout-hud-footer .qr-link), centered in the column. */
.buyin-section .idle-gif {
    width: min(100%, 38vh);
    align-self: center;
}

.mobile-only {
    display: none;
}

/* ===== Timer on a phone =====
   Up to 767px wide the three columns stack into one column that scrolls inside the grid (the page itself does not scroll):
   the banner, the status and clock, the payouts, then the blind schedule. Before the start only the countdown shows. */
@media (max-width: 767px) {
    .full-screen-row {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        padding: 12px 0;
        box-sizing: border-box;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .column.left, .column.right {
        flex: 0 0 auto;
        height: auto;
        padding: 0;
        font-size: 1rem;
    }

    .column.middle {
        display: contents;
    }

    .middle-bottom {
        order: 0;
        flex: 0 0 auto;
        max-height: 96px;
    }

    .middle-top {
        order: 1;
        flex: 0 0 auto;
        min-height: 9rem;
        margin-bottom: 0;
        padding: 12px 0;
        border-radius: 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    .column.left {
        order: 3;
    }

    .column.right {
        order: 4;
    }

    .middle-top h1.message {
        font-size: 1.25rem;
    }

    .middle-top h2.message {
        font-size: 1.05rem;
    }

    /* The colons are 8px wide with no margin, and each size below is the screen width less 12px of slack and the colons' own width,
       divided by the digit groups' width in em (8.4 for MM:SS, 12.6 with hours, 16.8 with days), so the clock fills the box without leaving it. */
    .countdownHolder .countDiv,
    .countdownHolder.show-hours .countDiv1,
    .countdownHolder.show-days .countDiv0 {
        width: 8px;
        margin-right: 0;
    }

    .countdownHolder {
        font-size: calc((100vw - 20px) / 8.4);
    }

    .countdownHolder.show-hours:not(.show-days) {
        font-size: calc((100vw - 28px) / 12.6);
    }

    .countdownHolder.show-days {
        font-size: calc((100vw - 36px) / 16.8);
    }

    .payout-hud-wrapper, .payout-hud, .blind-hud {
        height: auto;
    }

    .payout-hud-body {
        flex: 0 0 auto;
        overflow: visible;
    }

    .payout-hud-footer {
        display: none;
    }

    .places-section .message {
        font-size: 1.25rem;
    }

    .buyin-section span {
        font-size: 1.1rem;
    }

    .blind-hud-body {
        max-height: 40vh;
    }

    .mobile-only {
        display: block;
    }

    .reserve-cta {
        order: 5;
        display: block;
        flex: 0 0 auto;
        align-self: center;
        margin: 4px auto 12px;
        padding: 14px 20px;
        width: 100%;
        max-width: 340px;
        box-sizing: border-box;
        border-radius: 12px;
        text-align: center;
        font-size: 1.2rem;
        font-weight: 800;
        letter-spacing: 1px;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--accent-contrast);
        background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary));
        position: relative;
        z-index: 20;
    }

    .mobile-seats {
        flex: 0 0 auto;
        order: 2;
        text-align: center;
        padding: 12px;
        border-radius: 14px;
        background: linear-gradient(145deg, #111 0%, #1c1c1c 100%);
    }

    .mobile-seat-payout {
        color: #bbb;
        font-weight: 600;
        font-size: 1.1rem;
    }

    .full-screen-row.pre-game .column.right,
    .full-screen-row.pre-game .column.left {
        display: none;
    }
}