html {
    color: var(--text-dark);
}

body {
    background: linear-gradient(180deg, var(--bg-body-start) 0%, var(--light) 30%, var(--light) 100%);
    min-height: 100vh;
}

.breadcrumb {
    background-color: var(--white);
    border-radius: 0.5rem;
    padding: 0.6rem;
    font-size: 1.1rem;
    border: 1px solid var(--border-grey);
    box-shadow: 0 4px 2px -2px var(--shadow-grey);
}

.breadcrumb .breadcrumb-item:first-child {
    font-weight: 800;
    color: var(--nav-gradient-start);
    text-transform: capitalize;
}

a {
    color: unset;
    text-decoration: unset;
}

a:hover {
    color: var(--link-hover);
}



nav {
    background: linear-gradient(160deg, var(--nav-gradient-start) 0%, var(--nav-gradient-end) 100%) !important;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px var(--nav-shadow);
}

.navbar-brand-logo {
    height: 30px;
    width: 30px;
    object-fit: contain;
    margin-right: 0.5rem;
}

.nav-item a {
    color: var(--nav-link) !important;
    transition: color 0.2s, background-color 0.2s;
}

.nav-item:hover {
    background-color: var(--nav-hover-bg);
}

.nav-item:hover a {
    color: var(--white) !important;
}

.nav-item .active {
    background-color: var(--nav-active-bg);
}

.nav-item .sub-item-active {
    background-color: var(--nav-sub-active-bg);
}

.delay-to-play {
    position: absolute;
    top: -1.25rem;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2rem !important;
    padding: 0.3rem 0.5rem !important;
    background-color: var(--bg-delay);
    border: 1px solid var(--border-delay);
    visibility: hidden;
    color: var(--white);
    z-index: 100;
    white-space: nowrap;
    font-size: 0.75rem;
}

.delay-to-play:has(.bid-delay-alert-msg) {
    border-radius: 0.4rem !important;
    padding: 0.4rem 0.7rem !important;
    white-space: normal;
    max-width: 220px;
    text-align: left;
}

.position-title {
    padding: 0.4rem;
    border-radius: 0.3rem;
    background: linear-gradient(160deg, var(--nav-gradient-start) 0%, var(--nav-gradient-end) 100%);
    font-weight: 600;
    color: var(--light);
    box-shadow: 0 2px 8px var(--shadow-soft);
}

.deals-container {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.forfeit-board {
    opacity: 0.6;
}

.forfeit-badge {
    font-size: 0.8rem;
    font-weight: 400;
    font-style: italic;
    opacity: 0.9;
}

.collapse-box {
    margin-bottom: 0;
    border-radius: 0.25rem;
    padding-top: 0;
    padding-bottom: 0;

    .title {
        background: linear-gradient(160deg, var(--nav-gradient-start) 0%, var(--nav-gradient-end) 100%);
        border-radius: 0.25rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        font-weight: 600;
        color: var(--light);
        margin-left: 0px;
        margin-right: 0px;

        .counter {
            width: 55px;
            text-align: center;
        }
    }

    .title:hover {
        opacity: 0.8;
    }

    .board-title {
        background: linear-gradient(160deg, var(--nav-gradient-start) 0%, var(--nav-gradient-end) 100%);
        border-radius: 0.25rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        font-weight: 600;
        color: var(--light);
        margin-left: 0px;
        margin-right: 0px;
        box-shadow: 0 2px 8px var(--shadow-soft);

        .counter {
            width: 55px;
            text-align: center;
        }
    }

    .board-title:hover:not(:has(.btn-go-table:hover)) {
        opacity: 0.8;
    }

    .btn-go-table {
        color: var(--light);
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 0.25rem;
        padding: 0 6px;
        cursor: pointer;
        text-decoration: none;
    }

    .btn-go-table:hover {
        background: rgba(255, 255, 255, 0.3);
        border-color: rgba(255, 255, 255, 0.5);
    }

    .simple-title-row {
        border: 1px solid var(--border-ultra-light);
        padding: 0.3rem;
        border-radius: 0.3rem;
        background: var(--bg-title-grey);
        font-weight: 600;
        box-shadow: 0 4px 2px -2px var(--shadow-dark-grey);
        margin: 0;
    }

    .content {
        overflow: hidden;

        .tournament {
            cursor: pointer;
            border: 1px solid var(--border-box);
            padding: 0.3rem;
            border-radius: 0.3rem;
            background-color: var(--bg-tournament);
            box-shadow: 0 4px 2px -2px var(--shadow-grey);
            transition: opacity 0.3s ease-in-out;
            margin: 0;

            .folder {
                width: 50px;
            }
        }

        .tournament:last-of-type {
            border-bottom: none;
        }

        .tournament:hover {
            opacity: 0.7;
        }

        .simple-row {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
            padding-left: 10px;
        }


        .simple-row:hover {
            background: var(--light);
        }


        .content-title {
            background: var(--i1op);
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
            text-align: center;
            font-weight: 800
        }

        .distribution-card {
            border: 1px solid;
            border-radius: 5px;
            width: 30px;
            position: relative;
            font-weight: 500;

            .player {
                position: absolute;
                bottom: -25px;
                left: 9px;
                font-weight: 600;
            }
        }

        .trick:hover {
            background: var(--i2) !important;
            cursor: pointer;

            .delay-to-play {
                visibility: visible;
            }
        }

        .play-card-no-played:hover {
            opacity: 0.4;
            cursor: pointer;
        }

        .play-card-played {
            background-color: var(--bg-played);
        }

        .play-card-played:hover {
            cursor: not-allowed;
            background-color: var(--bg-played);
        }

        .box-play-card {
            margin-right: 1.6rem;
            position: relative;
            justify-content: center;
            align-items: center;
            width: 93px;
            height: 120px;
            margin-right: 0;

            .utf-card {
                width: 6rem;
                height: 6rem;
                font-size: 6rem;
                margin-top: -2rem;
            }

            .player {
                position: absolute;
                bottom: 0;
                left: 40px;
                font-weight: 600;
            }

        }

        .box-play-card:hover {
            background: var(--i2) !important;
            cursor: pointer;

            .delay-to-play {
                visibility: visible;
            }
        }

        .card-color-S {
            color: var(--card-black);
            border-color: var(--card-black);
        }

        .card-color-C {
            color: var(--card-grey);
            border-color: var(--card-grey);
        }

        .card-color-D {
            color: var(--card-red-light);
            border-color: var(--card-red-light);
        }

        .card-color-H {
            color: var(--card-red-dark);
            border-color: var(--card-red-dark);
        }

        .box-play-card:has(.card-winner) {
            background: var(--bg-winner-light);
            border-radius: 0.25rem;
            border: 1px solid var(--i1op);
        }
    }
}

.collapse-box:has(.content.show) {
    .title:hover {
        opacity: 1;
    }
}


.player-avatar {
    position: relative;
    flex-wrap: nowrap !important;

    .avatar-box {
        height: 55px;
        width: 55px;
        border-radius: 5rem;
        margin-left: 1rem;
        background: var(--dark);
        overflow: hidden;
        padding: 0;
        border: 2px solid var(--text-played);

        .avatar {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }
    }

    .nickname {
        font-weight: 600;
        min-width: 0;
    }

    .nickname-text {
        display: block;
        max-width: 130px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .nickname-argine-line {
        display: flex;
        max-width: 130px;
        white-space: nowrap;
    }

    .nickname-text-inner {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.referee-avatar {
    .avatar-no-minitoring {
        opacity: 0.2;
    }

    .avatar-box {
        height: 55px;
        width: 55px;
        border-radius: 5rem;
        margin-left: 1rem;
        background: var(--dark);
        overflow: hidden;
        padding: 0;
        border: 2px solid var(--text-played);

        .avatar {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }
    }
}

/* Smaller avatars in rotation table rows (players + referees) */
.rotation-table .player-avatar .avatar-box,
.rotation-table .referee-avatar .avatar-box {
    height: 38px;
    width: 38px;
}

/* Tables view: keep both players of a pair side by side on a single line.
   Long nicknames ellipsis-truncate (the existing tooltip shows the full name)
   instead of pushing the second player onto a new row. */
.table-pair-players {
    flex-wrap: nowrap !important;
    width: 100%;
}
.table-pair-players > .col {
    min-width: 0; /* allow each half to shrink below its content width */
}
.table-pair-players .player-avatar {
    min-width: 0;
    flex-wrap: nowrap !important;
}
.table-pair-players .player-avatar .avatar-box {
    flex-shrink: 0; /* avatar keeps its full size */
    margin-left: 0; /* drop the default 1rem so the avatar never touches the bloc border */
}
/* Breathing room inside the N/S & E/W blocs so a long nickname can't push the
   avatar flush against the frame. */
.table-pair-players {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    gap: 0.25rem;
}
.table-pair-players .player-avatar .nickname {
    min-width: 0;   /* col-auto would otherwise refuse to shrink */
    flex: 0 1 auto;
}
.table-pair-players .player-avatar .nickname-text,
.table-pair-players .player-avatar .nickname-argine-line {
    max-width: 100%; /* truncate to available space rather than a fixed 130px */
}
.table-pair-players .player-avatar .btn-exclude {
    flex-shrink: 0; /* keep the replace button fully clickable */
}
/* Bye side (no opponent): show the translated "Bye" label centered instead of two Argine */
.table-pair-bye {
    font-style: italic;
    align-items: center;
}

/* Reposition seat badge to match the 38px avatar (instead of the default 55px) */
.rotation-table .icon-seat {
    left: 24px;
    top: 24px;
}

.pair-position {
    padding-top: 1rem;
}


.trick-winner {
    background-color: var(--bg-winner-green);
}

.trick-loser {
    background-color: var(--bg-loser-red);
}

.collapse {
    overflow: hidden;
}

.reloaded-game-box-title {
    border: 1px solid var(--border-ultra-light);
    padding: 0.3rem;
    border-radius: 0.3rem;
    background: var(--bg-title-grey);
    font-weight: 600;
    box-shadow: 0 4px 2px -2px var(--shadow-dark-grey);
}

.game-bids-box, .game-distribution-box {
    border-right: 1px solid var(--border-separator);
}

.game-bids-box {
    padding: 5px;
    display: flex;
    flex-direction: column;
}

.game-bids-box-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    background: var(--bg-box);
    padding: 6px;
    border-radius: 0.3rem;
    box-shadow: 0px 3px 2px 0px var(--shadow-box-light);
}

.game-bids-box-content > div:last-child {
    margin-top: auto;
}

.play-reloaded-game-box {
    padding: 5px;
    display: flex;
    flex-direction: column;
}

.play-reloaded-game-box-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    background: var(--bg-box);
    padding: 6px;
    border-radius: 0.3rem;
    box-shadow: 0px 3px 2px 0px var(--shadow-box-light);
}

.play-reloaded-game-box-content > div,
.play-reloaded-game-box-content > div > div {
    display: flex;
    flex-direction: column;
    flex: 1;
}


.bids-table-container {
    .bids-table {
        table-layout: fixed;
        width: 100%;
        border-collapse: separate;
        border-spacing: 3px 4px;

        th {
            width: 25%;
            border-bottom: 1px solid var(--border-separator);
            padding-bottom: 10px;
        }

        td {
            border-right: 1px solid var(--border-separator);
            border-radius: 0;
        }

        td:last-of-type {
            border-right: none;
        }
    }
}

/* Contract-edit controls (contract / declarer / type / validate) in the deal game box.
   Flex with min-widths so each field stays readable and wraps to a new line instead of
   shrinking its text into an unreadable column. */
.contract-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}
/* The three selects share one consistent width so the row reads as a uniform set
   (previously 124 / 56 / 112px, which looked ragged and truncated the placeholders —
   the 56px declarer in particular). They grow to share available width and wrap
   together to a new line when the column is too narrow. The validate button keeps its
   intrinsic size. */
.contract-fields .cf-contract,
.contract-fields .cf-declarer,
.contract-fields .cf-type { flex: 1 1 0; min-width: 96px; max-width: 140px; }
.contract-fields .cf-validate  { flex: 0 0 auto; }

.select-contract-box {
    position: relative;

    select.form-control {
        height: 38px;
        font-size: 0.82rem;
        padding-left: 0.3rem;
        padding-right: 0.3rem;
        text-overflow: ellipsis;
    }

    .cross {
        position: absolute;
        top: -11px;
        right: -3px;
        color: var(--error-red);
        z-index: 100;
        cursor: pointer;
    }

    .cross:hover {
        opacity: 0.5;
    }
}

.bids-box {
    gap: 5px 0px;
    min-height: 200px;

    .bids-box-element {
        font-weight: 600;
        margin-right: 0.2rem;
        margin-left: 0.2rem;
        padding-right: 4px;
        padding-left: 3px;
        padding-top: 2px;
        padding-bottom: 2px;
        border-radius: 0.3rem;
        background: var(--light);
        position: relative;

        div {
            border-radius: 0.3rem;
            padding: 4px 2px;
            font-size: 0.85rem;
            white-space: nowrap;
            text-align: center;
        }

        .delay-to-play {
            left: 50px;

        }
    }

    .bids-box-element:hover {
        .delay-to-play {
            visibility: visible;
        }
    }
}

.bids-box .bids-box-element.form-group {
    overflow: visible;
    z-index: 5;
}

/* Director "play a bid" input: keep it within a single bid cell instead of stretching a
   wide "Select bid" box across the column (which made it unclear whose turn it is). The
   compact "+" placeholder, sized like a bid, opens the native option list on click; the
   full label stays available via the title tooltip. */
.bids-box .bids-box-element.form-group select.bid-input-select {
    min-width: 0;
    width: 2.6rem;
    max-width: 100%;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
    text-align-last: center;
    padding: 2px;
}

.bid-undo {
    cursor: pointer;
    color: var(--nav-gradient-start);
}

.bid-undo:hover {
    background: var(--nav-gradient-start) !important;
    color: var(--light);
}

.bid-alert-badge {
    position: absolute;
    top: 2px;
    right: 4px;
    background-color: #1a5fa8;
    color: #ffd700;
    font-size: 0.65rem;
    font-weight: bold;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    line-height: 1;
    z-index: 2;
    pointer-events: none;
}

.bid-delay-alert-msg {
    display: block;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    margin-top: 3px;
    padding-top: 3px;
    font-style: italic;
    max-width: 200px;
    white-space: normal;
    word-wrap: break-word;
}


.trick-box {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0.5rem;
    padding-top: 0;
    padding-bottom: 0.4rem;

    .trick-box-el {
        flex: 1 1 calc(20% - 4px);
        max-width: calc(20% - 4px);
        border-radius: 0.25rem;
        border: 1px solid var(--border-separator);
        min-height: 120px;

        .trick-index {
            border-bottom: 1px solid var(--shadow-softer);
            padding-bottom: 2px;
            margin-bottom: 2px;
            font-size: 0.85rem;
        }

        .distribution-card.trick {
            flex: 0 0 auto;
        }
    }
}

.current-player {
    background-color: var(--bg-current-player);
}


.collapse-title:hover {
    opacity: 0.8;
}

.chatroom-empty {
    opacity: 0.4;
    cursor: not-allowed;
}


.reloaded-chatroom-box {
    .chatroom {
        border-radius: 0.25rem;
        border: 1px solid var(--i1);

        .name {
            background: var(--bg-send-btn);
            border-bottom: 1px solid var(--i1);
            padding: 0.2rem 0.5rem;
            text-align: center;
        }

        .messages-wrapper {
            position: relative;
        }

        .new-message-badge {
            display: none;
            position: absolute;
            bottom: 4px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
            background: var(--nav-gradient-start);
            color: #fff;
            font-size: 0.7rem;
            padding: 2px 10px;
            border-radius: 12px;
            cursor: pointer;
            box-shadow: 0 1px 4px rgba(0,0,0,0.15);
            opacity: 0.9;
            transition: opacity 0.2s;
        }

        .new-message-badge:hover {
            opacity: 1;
        }

        .messages {
            background: var(--white);
            border-bottom: 1px solid var(--i1);
            height: 120px;
            overflow-y: scroll;

            .message {
                position: relative;

                .player {
                    font-weight: 600;
                    text-decoration: underline;
                }

                border-bottom: 1px solid var(--i1);

                .message-trash {
                    position: absolute;
                    right: 20px;
                    top: 5px;
                    opacity: 0.5;
                    cursor: pointer;
                }

                .message-trash:hover {
                    opacity: 1;
                }
            }

            .message:last-of-type {
                border-bottom: none;
            }

            .message:nth-child(odd) {
                background: var(--bg-message-odd);
            }
        }

        .input {
            .row {
                .form-group {
                    margin-bottom: 0rem;

                    .input-message {
                        border-radius: 0;
                        border-bottom-left-radius: 0.25rem;
                    }
                }

                .send-btn {
                    width: 50px;
                    text-align: center;
                    padding-top: 6px !important;
                    background: var(--bg-send-btn);
                    border-top-left-radius: 0;
                    cursor: pointer;
                    border-bottom-right-radius: 0.25rem;
                }
            }
        }
    }
}


/* Replace/exclude action shown as a small circular badge on the avatar,
   mirroring the seat-presence dot (bottom-right) on the bottom-left. */
.btn-exclude {
    position: absolute;
    left: 0;
    top: 33px;
    width: 23px;
    height: 23px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.72rem;
    line-height: 1;
    z-index: 6;
}

.no-register {
    opacity: 0.2;
    cursor: not-allowed;
}

.custom-tooltip {
    --bs-tooltip-bg: #3a3a3a;
    --bs-tooltip-color: var(--light);
}

.bid-N {
    background: var(--bid-trump) !important;
    color: var(--bid-trump-label);
    border-color: var(--bid-trump-label);
}

.bid-S {
    background: var(--bid-spade) !important;
    color: var(--bid-spade-label);
    border-color: var(--bid-spade-label);
}

.bid-H {
    background: var(--bid-heart) !important;
    color: var(--bid-heart-label);
    border-color: var(--bid-heart-label);
}

.bid-D {
    background: var(--bid-diamond) !important;
    color: var(--bid-diamond-label);
    border-color: var(--bid-diamond-label);
}

.bid-C {
    background: var(--bid-club) !important;
    color: var(--bid-club-label);
    border-color: var(--bid-club-label);
}

.bid-P {
    background: var(--bid-pass) !important;
    color: var(--white);
    border-color: var(--bid-pass-border);
}

.bid-X {
    background: var(--bid-db) !important;
    color: var(--white);
    border-color: var(--bid-heart-label);
}

.bid-Y {
    background: var(--bid-rdb) !important;
    color: var(--white);
    border-color: var(--bid-rdb-border);
}

.table-played {
    color: var(--text-played);
    font-weight: 600;
}

.table-waiting-play-action-5 {
    color: var(--text-warning);
    font-weight: 600;
}

.table-waiting-play-action {
    color: var(--text-danger);
    font-weight: 600;
}

/* Timer badge variants for last action elapsed time */
.timer-badge.table-played {
    background: var(--bg-light, #f0f0f0);
    color: var(--text-played, #149107);
}

.board-title .timer-badge.table-played {
    color: var(--text-dark, #333);
}

.timer-badge.table-waiting-play-action-5 {
    background: #e17a22;
    color: #f6f6f6;
}

.timer-badge.table-waiting-play-action {
    background: var(--bg-forbidden);
    color: #f2f2f2;
}

.forced {
    background-color: var(--bg-forced);
}

.btn-modal-confirm {
    background-color: var(--nav-gradient-start);
    color: var(--white);
}

.btn-modal-confirm:focus-visible, .btn-modal-confirm:hover {
    opacity: 0.8;
    background-color: var(--nav-gradient-start);
    color: var(--white);
}

.list-group-item.active {
    background-color: var(--nav-gradient-start);
    border-color: var(--nav-gradient-start);
    color: var(--white);
}

.game-footer {
    border-top: 1px solid var(--border-separator);
}

.game-footer-results {
    background: var(--bg-light, #f8f8f8);
}

.game-footer-label-first {
    min-width: 80px;
}

.game-footer-label-second {
    min-width: 46px;
}

.game-input-div {
    position: relative;

    .cross {
        position: absolute;
        top: -11px;
        right: -7px;
        color: var(--error-red);
        z-index: 100;
        cursor: pointer;
    }

    .cross:hover {
        opacity: 0.5;
    }
}

.input-div {
    position: relative;

    .cross {
        position: absolute;
        top: 0.5rem;
        right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
        transform: translate(50%, -50%);
        color: var(--error-red);
        z-index: 100;
        cursor: pointer;
    }

    .cross:hover {
        opacity: 0.5;
    }
}

.alert-table {
    cursor: pointer;
}


.alert-table:hover {
    opacity: 0.5
}

.event-filter-btn {
    padding: 0rem 0.3rem 0.2rem 0;
    line-height: 1;
    font-size: 1rem;
    color: var(--text-dark);
    opacity: 0.6;
}

.event-filter-btn:hover {
    opacity: 1;
}

.dropdown-menu-filter {
    min-width: 160px;
    padding: 0.3rem 0;
}

.dropdown-menu-filter .dropdown-item {
    cursor: pointer;
    padding: 0.3rem 0.8rem;
    font-size: 0.875rem;
}

.dropdown-menu-filter .dropdown-item:hover {
    background-color: var(--table-hover);
}

.events-box {
    border: 1px solid var(--table-border);
    border-radius: 0.25rem;
    overflow: visible;
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 0;

    .badge-player {
        background-color: var(--badge-player-bg);
    }

    .badge-director {
        background-color: var(--badge-director-bg);
    }

    .badge-referee {
        background-color: var(--badge-director-bg);
        color: var(--white);
    }

    .badge-system {
        background-color: var(--badge-system-bg);
        color: var(--white);
    }

    .table-custom-striped tbody tr:nth-of-type(even) {
        background-color: var(--table-stripe-odd);
    }

    .table-custom-striped tbody tr:hover {
        background-color: var(--table-hover) !important;
        transition: background-color 0.2s ease;
    }

    .table-custom-striped td {
        border-bottom: 1px solid var(--table-border-light);
        padding: 8px 4px;
    }

    .table-custom-striped tbody tr:last-child td {
        border-bottom: none;
    }

    .table-scroll-container {
        max-height: 390px;
        border-radius: 0.3rem;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        background-color: var(--white);
    }

    .table-log {
        margin-bottom: 0;
    }

    .table-log thead th {
        position: sticky;
        top: 0;
        background-color: var(--table-header-bg);
        z-index: 10;
        border-bottom: 2px solid var(--table-border);
    }

    .table-log tbody {
        vertical-align: top;
    }

    .table-log tbody tr:nth-of-type(odd) {
        background-color: var(--white);
    }

    .table-log tbody tr:nth-of-type(even) {
        background-color: var(--table-stripe-even);
    }

    .table-log tbody tr.event-call {
        background-color: var(--orange-base);
        color: var(--table-warning-text);
        font-weight: 600;
    }

    .table-log tbody tr.event-call td,
    .table-log tbody tr.event-call td.text-muted,
    .table-log tbody tr.event-call td.text-secondary,
    .table-log tbody tr.event-call td .text-muted,
    .table-log tbody tr.event-call td .text-secondary,
    .table-log tbody tr.event-call td .fw-bold {
        color: var(--table-warning-text) !important;
    }

}

.reloaded-game-box {
    border: 1px solid var(--border-separator);
    background: var(--bg-panel);
    padding: 5px;
    border-radius: 0.3rem;
    transition: opacity 0.3s ease-in-out;

    .reloaded-game-box-content {
        background: var(--bg-panel-content);
        border-radius: 0.3rem;
    }
}

.deal-reloaded-game-box {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.deal-reloaded-game-box > .game-distribution-box,
.deal-reloaded-game-box > .play-reloaded-game-box {
    display: flex;
    flex-direction: column;
}

.deal-reloaded-game-box > .game-distribution-box > .reloaded-game-box-title:last-child,
.deal-reloaded-game-box > .play-reloaded-game-box > .reloaded-game-box-title:last-child {
    flex: 1;
}

.bridge-container {
    background: var(--bg-box);
    border-radius: 0.2rem;
    display: flex;
    flex-direction: column;

    .pair-time-row {
        border-bottom: 1px solid var(--border-separator);
        padding-bottom: 0.4rem;
    }

    .pair-time-title {
        font-weight: 700;
        font-size: 0.8rem;
        color: var(--diagram-player-color);
        text-transform: uppercase;
    }

    .pair-time-badge {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        background: var(--bg-light, #f0f0f0);
        border-radius: 0.3rem;
        padding: 0.2rem 0.6rem;
        font-size: 0.8rem;
    }

    .pair-time-label {
        font-weight: 800;
        color: var(--diagram-player-color);
    }

    .pair-time-value {
        font-family: monospace;
        font-weight: 600;
    }

    .player-time {
        font-size: 0.85rem;
        font-family: monospace;
        color: var(--text-muted, #888);
        margin-top: 0.1rem;
    }

    .current-player-timer.table-played {
        color: var(--text-played);
    }

    .current-player-timer.table-waiting-play-action-5 {
        color: var(--text-warning);
    }

    .current-player-timer.table-waiting-play-action {
        color: var(--text-danger);
    }

    .current-player-timer.over-limit {
        color: #dc3545;
        font-weight: bold;
    }

    .diagram-player-box {
        .diagram-player {
            font-weight: 800;
            color: var(--diagram-player-color);
            padding-left: 0.8rem;
            padding-right: 0.8rem;
            padding-bottom: 0.2rem;
            padding-top: 0.2rem;
            border-radius: 0.2rem;
        }


        .card-list {
            border-top: 1px solid var(--border-separator);

            .hand-suit {
                width: 15px;
                text-align: center;
            }

            .hand-suit-card {
                text-align: center;
            }

            .card-number {
                display: flex;
                justify-content: center;
                width: 20px;
                border-radius: 0.2rem;
            }

            .card-number:hover {
                background-color: var(--bg-hover-light);
            }

            .card-playable {
                cursor: pointer;
            }

            .card-playable:hover {
                font-weight: 700;
            }

            .card-played {
                opacity: 0.3;
                cursor: not-allowed;
            }
        }
    }

    .card-values {
        font-weight: 600;
        font-size: 1.1rem;
        letter-spacing: 1px;
    }

    .bridge-compass {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 120px;
        height: 120px;

        .compass-grid {
            display: grid;
            grid-template-columns: repeat(3, 35px);
            grid-template-rows: repeat(3, 35px);
            gap: 2px;
        }

        .compass-seat {
            width: 35px;
            height: 35px;
            background-color: var(--compass-green);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: rotate(45deg);

            span {
                color: var(--white);
                font-weight: bold;
                font-size: 1.1rem;
                transform: rotate(-45deg);
                display: inline-block;
            }
        }

        .seat-n, .seat-s {
            background-color: var(--compass-green-dark);
            border: 2px solid var(--compass-green-light);
        }

        .seat-w, .seat-e {
            background-color: var(--compass-red);
            border: 2px solid var(--compass-red-light);
        }

        .grid-empty, .grid-center {
            visibility: hidden;
        }

        .seat-n {
            top: 8px;
        }

        .seat-s {
            bottom: 8px;
        }

        .seat-w {
            left: 8px;
        }

        .seat-e {
            right: 8px;
        }
    }
}

.rotation-table {
    border-radius: 0.3rem;
    background-color: var(--bg-tournament);
    box-shadow: 0 4px 2px -2px var(--shadow-grey);
    transition: opacity 0.3s ease-in-out;
    border: 1px solid var(--border-box);
}

.tournament-info-box {
    border-radius: 0.3rem;
    background-color: var(--bg-tournament);
    box-shadow: 0 4px 2px -2px var(--shadow-grey);
    transition: opacity 0.3s ease-in-out;
    border: 1px solid var(--border-box);
}

.tournament-info-box:hover {
    opacity: 0.9;
}

.pair-box {
    border-radius: 0.3rem;
    background-color: var(--bg-tournament);
    box-shadow: 0 4px 2px -2px var(--shadow-grey);
    transition: opacity 0.3s ease-in-out;
    border: 1px solid var(--border-box);
}

.pair-box:hover {
    opacity: 0.8;
}

.btn-unsubscribe-pair {
    z-index: 1;
    padding: 2px 6px;
    font-size: 2rem;
    line-height: 1.2;
    border: none;
    background: transparent;
    color: var(--error-red);
    opacity: 0.45;
    transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out, font-size 0.2s ease-in-out;
}


.btn-unsubscribe-box:hover {
    .btn-unsubscribe-pair {
        opacity: 1;
        color: var(--error-red);
        font-size: 2.1rem;
        background: transparent;
    }
}


.tournament-chatroom-box .reloaded-chatroom-box .chatroom .messages {
    height: 520px;
}

.rotation-content {
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0.3rem;
    /* No height transition here — Bootstrap's .collapsing handles the animation */
}

.rotation-content > .rotation-scroll {
    border: 1px solid var(--border-separator);
    background: var(--bg-panel);
    padding: 5px;
    border-radius: 0.3rem;
    overflow-x: auto;
    overflow-y: visible;
    transition: opacity 0.3s ease-in-out;
}

.rotation-content > .rotation-scroll:hover {
    opacity: 0.8;
}

.leaderboard-btn {
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 24px;
    border: 1px solid var(--leaderboard-btn-border);
    background: var(--leaderboard-btn-bg);
    cursor: pointer;
    transition: opacity 0.3s ease-in-out, background 0.3s ease-in-out, color 0.3s ease-in-out, font-weight 0.3s ease-in-out;

}

.leaderboard-btn:hover {
    opacity: 0.8;
    background: var(--leaderboard-btn-hover-bg);
    color: var(--leaderboard-btn-hover-text);
    font-weight: 500;
}

.pair-box div:last-child .leaderboard-btn {
    border-left: none;
    border-top-right-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;

}

.btn-disabled {
    cursor: not-allowed;
    pointer-events: all !important;
}



.icon-seat {
    position: absolute;
    width: 14px;
    height: 14px;
    padding: 0;
    box-sizing: content-box;
    border-radius: 50%;
    border: 0.5px solid var(--seat-icon-seat-border);
    background: linear-gradient(347deg, var(--seat-icon-seat-start) 0%, var(--seat-icon-seat-mid) 37%, var(--seat-icon-seat-end) 100%);
    left: 41px;
    top: 40px;
}

.icon-not-seat {
    background: linear-gradient(347deg, var(--seat-icon-not-seat-start) 0%, var(--seat-icon-not-seat-mid) 16%, var(--seat-icon-not-seat-end) 100%);
    border: 1px solid var(--seat-icon-not-seat-border);
}

.icon-inactive-seat {
    background: linear-gradient(347deg, var(--seat-icon-inactive-start) 0%, var(--seat-icon-inactive-mid) 37%, var(--seat-icon-inactive-end) 100%);
    border: 0.5px solid var(--seat-icon-inactive-border);
}

/* Presence badge on directors in the "monitored by" panel: the "present at the table" video
   icon, overlaid on the avatar's bottom-right corner. The badge is anchored to .avatar-with-badge,
   a wrapper sized exactly to the avatar (the avatar-box itself has overflow:hidden and would clip
   the badge). Anchoring to this fixed-size wrapper — rather than the variable-height .referee-avatar
   flex row — keeps the badge pinned to the avatar corner regardless of the nickname length. */
#bloc-table-directors .referee-avatar {
    max-width: 100%;
    min-width: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Fixed-size positioning context for the presence badge, wrapping just the avatar. */
.referee-avatar .avatar-with-badge {
    position: relative;
    display: inline-flex;
}

/* Align the director nickname spacing/typography in "monitored by" with the player avatars
   (the .nickname / .nickname-text rules are otherwise scoped to .player-avatar only). */
#bloc-table-directors .referee-avatar .nickname {
    font-weight: 600;
    min-width: 0; /* let a long director nickname shrink/ellipsis instead of overflowing */
}
/* Keep the director avatar off the "Monitored by" bloc border (drop the default 1rem
   left margin); the row padding above gives the rest of the breathing room. */
#bloc-table-directors .referee-avatar .avatar-box {
    margin-left: 0;
}
#bloc-table-directors .referee-avatar .nickname-text {
    display: block;
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.director-presence-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 23px;
    height: 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bs-success, #198754);
    color: var(--white, #fff);
    border: 1.5px solid var(--white, #fff);
    font-size: 0.62rem;
    z-index: 6;
}

.btn-orange {
    --bs-btn-color: var(--white);
    /* Orange de base */
    --bs-btn-bg: var(--orange-base);
    --bs-btn-border-color: var(--orange-base);

    /* État de survol (un peu plus sombre) */
    --bs-btn-hover-color: var(--white);
    --bs-btn-hover-bg: var(--orange-hover);
    --bs-btn-hover-border-color: var(--orange-hover-border);

    /* Focus (RGB pour le halo orange) */
    --bs-btn-focus-shadow-rgb: var(--bs-orange-rgb);

    /* État Actif / Pressé */
    --bs-btn-active-color: var(--white);
    --bs-btn-active-bg: var(--orange-active);
    --bs-btn-active-border-color: var(--orange-active-border);
    --bs-btn-active-shadow: inset 0 3px 5px var(--orange-shadow);

    /* État Désactivé */
    --bs-btn-disabled-color: var(--white);
    --bs-btn-disabled-bg: var(--orange-base);
    --bs-btn-disabled-border-color: var(--orange-base);
}

.btn-outline-orange {
    /* Teinte orangée (Orange-Red) */
    --bs-btn-color: var(--orange-base);
    --bs-btn-border-color: var(--orange-base);

    /* État de survol (Hover) */
    --bs-btn-hover-color: var(--white);
    --bs-btn-hover-bg: var(--orange-base);
    --bs-btn-hover-border-color: var(--orange-base);

    /* Focus et Ombre */
    --bs-btn-focus-shadow-rgb: var(--bs-orange-rgb);

    /* État Actif */
    --bs-btn-active-color: var(--white);
    --bs-btn-active-bg: var(--orange-hover); /* Un orange un peu plus sombre pour le clic */
    --bs-btn-active-border-color: var(--orange-hover);
    --bs-btn-active-shadow: inset 0 3px 5px var(--orange-shadow);

    /* État Désactivé (Disabled) */
    --bs-btn-disabled-color: var(--orange-base);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--orange-base);

    --bs-gradient: none;
}

.bg-orange {
    /* On définit la valeur RGB de l'orange (253, 126, 20) */
    --bs-danger-rgb: var(--bs-orange-rgb);
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important;
}

.bg-in-progress {
    background-color: #546e8a !important;
    color: #fff !important;
}

/* --- Game Settings buttons --- */
.btn-wine {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--wine-base);
    --bs-btn-border-color: var(--wine-base);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--wine-hover);
    --bs-btn-hover-border-color: var(--wine-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--wine-active);
    --bs-btn-active-border-color: var(--wine-active);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--wine-base);
    --bs-btn-disabled-border-color: var(--wine-base);
}

.btn-outline-wine {
    --bs-btn-color: var(--wine-base);
    --bs-btn-border-color: var(--wine-base);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--wine-base);
    --bs-btn-hover-border-color: var(--wine-base);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--wine-active);
    --bs-btn-active-border-color: var(--wine-active);
    --bs-btn-disabled-color: var(--wine-base);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--wine-base);
    --bs-gradient: none;
}

.btn-brown {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--i3);
    --bs-btn-border-color: var(--i3);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brown-hover);
    --bs-btn-hover-border-color: var(--brown-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brown-hover);
    --bs-btn-active-border-color: var(--brown-active);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--i3);
    --bs-btn-disabled-border-color: var(--i3);
}

.btn-outline-brown {
    --bs-btn-color: var(--i3);
    --bs-btn-border-color: var(--i3);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--i3);
    --bs-btn-hover-border-color: var(--i3);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brown-hover);
    --bs-btn-active-border-color: var(--brown-hover);
    --bs-btn-disabled-color: var(--i3);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--i3);
    --bs-gradient: none;
}

.btn-slate {
    --bs-btn-color: #fff;
    --bs-btn-bg: #546e8a;
    --bs-btn-border-color: #546e8a;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #475e77;
    --bs-btn-hover-border-color: #3f546b;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3f546b;
    --bs-btn-active-border-color: #384b60;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #546e8a;
    --bs-btn-disabled-border-color: #546e8a;
}

.btn-outline-slate {
    --bs-btn-color: #546e8a;
    --bs-btn-border-color: #546e8a;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #546e8a;
    --bs-btn-hover-border-color: #546e8a;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #475e77;
    --bs-btn-active-border-color: #3f546b;
    --bs-btn-disabled-color: #546e8a;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #546e8a;
    --bs-gradient: none;
}

.table-warning {
    cursor: pointer;
    color: var(--table-warning-text);
    background-color: var(--badge-director-bg);
    transition: opacity 0.3s ease-in-out;
}

.table-warning:hover {
    opacity: 0.8;
}

.no-call {
    background-color: var(--call-not-active);
}

/* --- Stacked action buttons (icon above text) --- */
.btn.btn-stacked {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    min-width: 70px;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    line-height: 1.2;
    border-radius: 4px;
    white-space: nowrap;
}
.btn.btn-stacked i {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}
.btn-group .btn-stacked {
    min-width: 60px;
    border-radius: 0 !important;
}
.btn-group > .btn-stacked:first-child,
.btn-group > span:first-child .btn-stacked {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}
.btn-group > .btn-stacked:last-child,
.btn-group > span:last-child .btn-stacked {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}
.btn-group > span + span .btn-stacked,
.btn-group > .btn-stacked + .btn-stacked {
    margin-left: -1px;
}

/* --- Utility classes replacing recurring inline styles --- */

/* Input / button standard height used in deal game controls */
.input-h-std {
    height: 38px;
}

/* Fixed-width column for rank / result in leaderboard and pair views */
.col-rank {
    width: 75px;
    flex: 0 0 75px;
}

/* Info label inside tournament-info-box: fixed-width label column */
.info-label {
    font-weight: 600;
}

.call-table-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.8rem;
    height: 2.8rem;
    padding: 0.3rem 0.5rem;
    margin-top: 0.4rem;
    border-radius: 0.3rem;
    background-color: var(--bg-danger);
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.call-table-badge:hover {
    background-color: #a71d2a;
    color: white;
}

.call-table-badge-more {
    background-color: #6c757d;
}

.call-table-badge-more:hover {
    background-color: #545b62;
}

/* Status panel: one row per active call with the player's message */
.call-table-row {
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.call-table-row:hover .call-table-message {
    text-decoration: underline;
}

.call-table-message {
    font-size: 0.85rem;
    color: var(--text-muted, #6c757d);
    min-width: 0;
}

.call-ack-badge-sm {
    background-color: var(--orange-base);
    color: var(--table-warning-text);
    font-size: 0.7rem;
}

/* ========== Status Block V4 — Dashboard style ========== */
.status-banner {
    padding: 0.5rem 1rem;
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    border-radius: 0.3rem;
    margin-bottom: 0.5rem;
    letter-spacing: 0.03em;
    color: #fff;
}

.status-stats-row {
    display: flex;
    background: white;
    border: 1px solid var(--border-box);
    border-radius: 0.4rem;
    padding: 0.4rem 0;
    margin-bottom: 0.5rem;
}

.status-stat-item {
    flex: 1 1 0;
    text-align: center;
    padding: 0.2rem 0.5rem;
    border-right: 1px solid var(--border-separator);
    min-width: 0;
}

.status-stat-item:last-child,
.status-stat-item.border-0 {
    border-right: none;
}

.status-stat-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.status-stat-value {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-dark);
    line-height: 1.2;
}

.status-alerts-section {
    padding: 0.5rem 0.7rem;
}

.status-alert-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0;
    font-size: 0.85rem;
}

.status-alert-item + .status-alert-item {
    border-top: 1px solid #eee;
}

/* Increase vertical gap between stacked blocs on smaller screens */
@media (max-width: 1199.98px) {
    .row-blocs-top {
        row-gap: 1rem !important;
    }
}

/* Chatroom disabled state: pointer-events off so cursor is consistent */
.chatroom-empty .chatroom .input {
    pointer-events: none;
}

/* Rotation alert icons sizes defined as classes instead of inline */
.call-icon-inactive {
    color: var(--shadow-grey);
    font-size: 2.5rem;
    opacity: 0.2;
}

.call-icon-active {
    color: var(--text-danger);
    font-size: 2.5rem;
}

/* Active call taken into account by the director (intermediate state before close) */
.call-icon-ack {
    color: var(--orange-base);
    font-size: 2.5rem;
}

/* Call function toggle button: muted look when the function is disabled */
.call-fn-off {
    background-color: var(--call-not-active);
    opacity: 0.8;
}

.call-fn-state {
    font-size: 0.65rem;
    opacity: 0.85;
}

/* Static "acknowledged" badge inside the active-call zone */
.call-ack-badge {
    background-color: var(--orange-base);
    color: var(--table-warning-text);
    cursor: default;
}

/* Banner showing the pending player call message on the table page */
.active-call-banner {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.3rem;
    border-left: 3px solid var(--text-danger);
    background-color: var(--call-not-active);
    font-size: 0.85rem;
}

.active-call-banner .fa-triangle-exclamation {
    color: var(--text-danger);
}

.active-call-message {
    font-style: italic;
    word-break: break-word;
}

/* Timer badge style — light bg, monospace, rounded */
.timer-badge {
    display: inline-block;
    background: var(--bg-light, #f0f0f0);
    border-radius: 0.3rem;
    padding: 0.15rem 0.6rem;
    font-weight: 700;
    font-family: monospace;
    font-style: normal;
    font-size: 0.95rem;
    color: var(--text-dark, #333);
}

/* Stopwatch icon in rotation header */
.rotation-timer-icon {
    width: 45px;
    padding-top: 5px;
    margin-right: 10px;
    margin-left: -12px;
}

/* Ranking deal table: always horizontally scrollable */
.ranking-deal-scroll {
    overflow-x: auto;
}

.tournament-events .table-scroll-container {
    max-height: 590px;
}

.bloc-box {
    border: 1px solid #bcbcbc80;
    border-radius: 0.5rem;
    overflow: hidden;
    background: white;
    padding: 0.4rem;
    /* margin: 0.5rem; */
    box-shadow: 2px 2px 8px var(--shadow-soft);
}

.bloc-title {
    padding: 0.4rem;
    border-radius: 0.3rem;
    background: linear-gradient(160deg, var(--nav-gradient-start) 0%, var(--nav-gradient-end) 100%);
    font-weight: 600;
    color: var(--light);
    box-shadow: 0 2px 8px var(--shadow-soft);
}

.bloc-content {
    border-radius: 0.3rem;
    background-color: var(--bg-tournament);
    box-shadow: 0 4px 2px -2px var(--shadow-grey);
    transition: opacity 0.3s ease-in-out;
    border: 1px solid var(--border-box);
}

.action-group-label {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--diagram-player-color);
    text-transform: uppercase;
}

.action-separator {
    margin: 0.5rem 0;
    border-color: var(--border-ultra-light, #ddd);
    opacity: 0.5;
}


/* --- Quick Win 4: Forced value visual indicator --- */
.forced {
    background-color: var(--bg-forced);
}

/* --- Quick Win 5: Scroll shadow hints for horizontal overflow --- */
.scroll-shadow-wrapper {
    position: relative;
}

.scroll-shadow-wrapper::before,
.scroll-shadow-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.3s;
}

.scroll-shadow-wrapper::before {
    left: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.08), transparent);
}

.scroll-shadow-wrapper::after {
    right: 0;
    background: linear-gradient(to left, rgba(0,0,0,0.08), transparent);
}

.scroll-shadow-wrapper.can-scroll-left::before {
    opacity: 1;
}

.scroll-shadow-wrapper.can-scroll-right::after {
    opacity: 1;
}

/* ========== Replace player modal ========== */
#playerSearchResults {
    min-height: 200px;
}

.player-search-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-grey, #ccc);
    flex-shrink: 0;
}

/* ========== Tournament Info: section accent + stats inline ========== */
.section-accent {
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--i1);
    letter-spacing: 0.05em;
    padding-bottom: 0.15rem;
    border-bottom: 2px solid var(--i1);
    display: inline-block;
}

.stats-inline {
    display: flex;
    background: var(--white);
    border: 1px solid var(--border-box);
    border-radius: 0.4rem;
    padding: 0.4rem 0;
    margin-bottom: 0.5rem;
    overflow-x: auto;
}

.stat-inline-item {
    flex: 1 1 0;
    text-align: center;
    padding: 0.2rem 0.5rem;
    border-right: 1px solid var(--border-separator);
    min-width: 0;
}

.stat-inline-item:last-child,
.stat-inline-item.border-0 {
    border-right: none;
}

.stat-inline-value {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-dark);
    line-height: 1.2;
}

.stat-inline-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* About block — left accent border */
.about-block {
    border-left: 3px solid var(--i1);
    padding-left: 0.5rem;
    margin-bottom: 0.5rem;
    font-style: italic;
    font-size: 0.82rem;
    color: #666;
}

/* Info line — organizer / directors */
.info-line {
    display: flex;
    align-items: center;
    font-size: 0.82rem;
    margin-bottom: 0.2rem;
}

.info-line i.info-icon {
    width: 18px;
    text-align: center;
    margin-right: 0.4rem;
    color: var(--text-muted);
}