@font-face {
    font-family: "Roboto Plain Zero";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("https://fonts.gstatic.com/s/roboto/v51/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbWmT.ttf") format("truetype");
    unicode-range: U+0030;
}

:root {
    --font-body: "Roboto Plain Zero", "Roboto Mono", "SFMono-Regular", Consolas, monospace;
    --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
    --font-numbers: "Courier Prime", "Roboto Mono", "SFMono-Regular", Consolas, monospace;
    --color-bg: #0A0A08;
    --color-surface: #151512;
    --color-surface-raised: #1E1D18;
    --color-surface-hover: #27251E;
    --color-text: #F7F3E8;
    --color-text-secondary: #CEC7B7;
    --color-text-muted: #A29B8D;
    --color-yellow: #FFFF00;
    --color-yellow-soft: #FFFF00;
    --color-yellow-strong: #FFFF00;
    --color-yellow-ink: #19160B;
    --color-money: #FDE992;
    --color-money-soft: #FFF6D2;
    --color-action: #FDE992;
    --color-action-hover: #FFF1B8;
    --color-action-ink: #221C08;
    --color-positive: #39FF14;
    --color-positive-bg: #12271D;
    --color-negative: #FE1C15;
    --color-negative-bg: #30171B;
    --color-lavender: #FDE992;
    --color-lavender-strong: #D8BC65;
    --color-lavender-bg: #2B2717;
    --color-warning: #F0BB70;
    --color-warning-bg: #2B2214;
    --color-border-muted: #39372F;
    --color-border-strong: #5C573D;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    font-synthesis: none;
    background-color: #050505;
    color: var(--color-text);
    line-height: 1.65;
}

.navbar {
    background-color: #1A1A1A;
    border-bottom: 3px solid #FFFF00; box-shadow: 0 4px 12px rgba(15, 32, 64, 0.12);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Keeps the wordmark off the first nav link once the account controls
       share this row. */
    gap: 2.5rem;
}

.nav-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #FFFF00; letter-spacing: -0.02em;
}

.nav-links {
    display: flex;
    gap: 1.5rem;
}

.nav-links a {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: all 0.2s;
}

.nav-links a:hover {
    color: var(--color-yellow-soft); font-weight: 500;
    background-color: #2B2818;
}

.nav-links a.active {
    color: #FFFF00;
    background-color: #050505;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.page-header h2 {
    font-size: 1.875rem;
    font-weight: 700;
    color: #FFFF00;
}

.card {
    background-color: #1A1A1A;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1.5px solid #FFFF00;
    box-shadow: 0 2px 8px rgba(15, 32, 64, 0.08);
}

.card h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: #FFFF00;
}

.card h4 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
    color: var(--color-yellow-soft);
}

.btn {
    display: inline-block;
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.btn-large {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    width: 100%;
}

.player-selector {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.player-btn {
    padding: 0.75rem 0.5rem;
    border: 2px solid #D6C99A;
    background-color: #050505;
    color: #FFFF00; font-weight: 500;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
}

.player-btn:hover {
    border-color: #FFFF00;
    background-color: #050505;
    transform: translateY(-1px);
}

.player-btn.selected {
    border-color: #FFFF00;
    background-color: #FFFF00;
    color: #050505;
}

.quick-amounts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.amount-btn {
    padding: 0.625rem;
    border: 1.5px solid #B3945A; background-color: #1A1A1A;
    background-color: #050505;
    color: #94A3B8;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
}

.amount-btn:hover {
    border-color: #FFFF00; font-weight: 800; letter-spacing: -0.02em;
    color: #FFFF00;
    background-color: #050505;
}

.btn-primary {
    background-color: #FFFF00;
    color: #050505;
}

.btn-primary:hover {
    background-color: #FFFF00;
}

.btn-secondary {
    background-color: #353229;
    color: var(--color-yellow-soft); font-weight: 600;
    border: 1px solid var(--color-border-muted);
}

.btn-secondary:hover {
    background-color: #494437;
}

.sessions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.session-card {
    transition: transform 0.2s, border-color 0.2s;
}

.session-card:hover {
    transform: translateY(-2px);
    border-color: #FFFF00; font-weight: 800; letter-spacing: -0.02em;
}

.session-card.session-completed {
    border-color: #FFFF00;
    background-color: #050505;
}

.session-card.session-completed:hover {
    border-color: #FFFF00;
}

.session-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.session-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    background-color: #050505;
    color: #FFFF00; font-weight: 800; letter-spacing: -0.02em;
    border: 1px solid #FFFF00;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.session-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.session-date {
    font-size: 1.25rem;
    font-weight: 700;
    color: #FFFF00;
    margin-bottom: 0.5rem;
}

.session-description {
    color: #94A3B8;
    margin-bottom: 1rem;
}

.session-stats {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
}

.stat {
    display: flex;
    flex-direction: column;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: #FFFF00; font-weight: 500;
}

.session-warning {
    background-color: #451a03;
    color: #fbbf24;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    margin-top: 0.75rem;
}

.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--color-text-muted);
}

.empty-state p {
    margin-bottom: 1.5rem;
    font-size: 1.125rem;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 0.625rem;
    border-radius: 8px;
    border: 1.5px solid #B3945A; background-color: #1A1A1A;
    background-color: #050505;
    color: #FFFF00; font-weight: 500;
    font-size: 0.875rem;
}

/* Remove number input spinners */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #FFFF00; font-weight: 800; letter-spacing: -0.02em;
    box-shadow: 0 0 0 3px rgba(255, 255, 0, 0.18);
}

.form-group input::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}

.form-actions {
    margin-top: 1.5rem;
}

.session-overview, .ledger-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.overview-card {
    background-color: #1A1A1A;
    border: 1.5px solid #FFFF00;
    box-shadow: 0 2px 8px rgba(15, 32, 64, 0.08);
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
}

.overview-card.warning {
    border-color: #f59e0b;
    background-color: #451a03;
}

.overview-label {
    display: block;
    font-size: 0.875rem;
    color: #94A3B8;
    margin-bottom: 0.5rem;
}

.overview-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #FFFF00;
}

.overview-value.positive {
    color: #FFFF00; font-weight: 800; letter-spacing: -0.02em;
}

.overview-value.negative {
    color: var(--color-lavender);
}

.session-desc {
    color: #94A3B8;
    margin-bottom: 1.5rem;
    font-style: italic;
}

.transaction-list {
    max-height: 300px;
    padding: 1.05rem 0.35rem 0.7rem 0.9rem;
    overflow-x: hidden;
    overflow-y: auto;
}

.transaction-history-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.75rem;
    color: var(--color-text);
    font-size: 1rem;
    list-style: none;
}

.transaction-history-title::-webkit-details-marker {
    display: none;
}

.transaction-history-caret {
    display: none;
    margin-left: auto;
    color: var(--color-action);
    font-size: 1.1rem;
    font-weight: 900;
    transition: transform 0.16s ease;
}

@media (min-width: 601px) {
    .transaction-history-disclosure > .transaction-list {
        display: block !important;
    }

    .transaction-history-disclosure > .transaction-history-title {
        cursor: default;
        pointer-events: none;
    }
}

.transaction-history-icon {
    display: inline-flex;
    width: auto;
    height: auto;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1;
}

.transaction-history-icon-buyin {
    font-size: 1.4rem;
}

.transaction-history-icon-cashout {
    font-size: 1.4rem;
}

/* History rows sit directly on the section instead of dark player tiles. */
.transaction-list .transaction-item,
.session-completed-page .transaction-list .transaction-item {
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.transaction-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 0.55rem 1rem 0.2rem;
    border-bottom: 1px solid rgba(255, 255, 0, 0.22);
}

.transaction-item:last-child {
    border-bottom: none;
}

.transaction-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.transaction-player {
    font-weight: 500;
    color: #FFFF00;
}

.transaction-time {
    font-size: 0.75rem;
    color: #94A3B8;
    font-family: var(--font-body);
    background-color: #050505;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    border: 1.5px solid #FFFF00;
    box-shadow: 0 2px 8px rgba(15, 32, 64, 0.08);
    display: inline-block;
    margin-top: 0.25rem;
}

.transaction-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.transaction-value-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.28rem;
}

.transaction-value-stack .amount-display,
.transaction-value-stack .amount-edit {
    justify-content: flex-end;
}

.transaction-value-stack .transaction-time {
    margin-top: 0;
}

.transaction-amount {
    font-weight: 600;
    font-family: var(--font-numbers);
}

.delete-form {
    display: flex;
    align-items: center;
    margin: 0;
}

.delete-btn {
    background: none;
    border: 1.5px solid #B3945A; background-color: #1A1A1A;
    color: #94A3B8;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    transition: all 0.2s;
    line-height: 1;
}

.delete-btn:hover {
    background-color: var(--color-lavender-bg);
    border-color: var(--color-lavender-strong);
    color: var(--color-lavender);
}

.buyin-amount {
    color: #FFFF00; font-weight: 800; letter-spacing: -0.02em;
}

.cashout-amount {
    color: #FFFF00; font-weight: 800; letter-spacing: -0.02em;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 0.875rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 0, 0.22);
}

.data-table th {
    background-color: #050505;
    font-weight: 600;
    color: #94A3B8;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.data-table tr:hover {
    background-color: #050505;
}

.positive {
    color: #FFFF00 !important;
}

.negative {
    color: var(--color-lavender) !important;
}

.settlement-note {
    color: #94A3B8;
    margin-bottom: 1rem;
}

.settlement-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.settlement-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: #050505;
    border-radius: 8px;
    border: 1.5px solid #FFFF00;
    box-shadow: 0 2px 8px rgba(15, 32, 64, 0.08);
}

.settlement-flow {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.settlement-from {
    font-weight: 600;
    color: var(--color-lavender);
}

.settlement-arrow {
    color: var(--color-text-muted);
}

.settlement-to {
    font-weight: 600;
    color: #FFFF00; font-weight: 800; letter-spacing: -0.02em;
}

.settlement-amount {
    font-size: 1.125rem;
    font-weight: 700;
    color: #fbbf24;
    font-family: var(--font-numbers);
}

.settlement-summary {
    margin-top: 1rem;
    text-align: center;
    color: #94A3B8;
    font-style: italic;
}

.settlement-summary-box {
    margin-top: 1rem;
    padding: 1rem;
    background-color: #050505;
    border-radius: 8px;
    text-align: center;
    color: #FFFF00; font-weight: 800; letter-spacing: -0.02em;
    font-size: 1.125rem;
}

.player-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.player-item {
    padding: 0.75rem;
    background-color: #050505;
    border-radius: 8px;
    border: 1.5px solid #FFFF00;
    box-shadow: 0 2px 8px rgba(15, 32, 64, 0.08);
}

.player-name {
    font-weight: 500;
}

.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-winner {
    background-color: #050505;
    color: #FFFF00; font-weight: 800; letter-spacing: -0.02em;
}

.badge-owes {
    background-color: var(--color-lavender-bg);
    color: var(--color-lavender);
    border: 1px solid rgba(253, 233, 146, 0.55);
}

.badge-settled {
    background-color: #2C2A24;
    color: var(--color-text-secondary);
}

.info-card {
    background-color: #050505;
    border-color: var(--color-border-muted);
}

.info-card h3 {
    color: var(--color-yellow-soft);
}

.info-card p {
    color: var(--color-text-secondary);
    margin-bottom: 0.75rem;
}

.info-card p:last-child {
    margin-bottom: 0;
}

/* Session Players Management */
.session-players-management {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.current-players h4,
.add-players h4 {
    font-size: 0.875rem;
    color: #94A3B8;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.player-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.player-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: #1A1A1A;
    border: 1.5px solid #FFFF00;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #FFFF00; font-weight: 500;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 0, 0.14);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.player-chip.is-removing {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.82);
}

.remove-player-form {
    display: flex;
    align-items: center;
}

.remove-player-form.is-submitting .remove-btn {
    cursor: wait;
    opacity: 0.35;
    pointer-events: none;
}

.remove-btn {
    background-color: #343129;
    border: none;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    line-height: 1;
    opacity: 0.7;
}

.remove-btn:hover {
    background-color: #D6C99A;
    color: #FFFF00;
    opacity: 1;
    transform: scale(1.05);
}

.session-players-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.session-players-header h3 {
    margin: 0;
    font-size: 1.25rem;
}

.add-player-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.player-select {
    flex: 1;
    max-width: 250px;
    padding: 0.5rem 0.75rem;
    border: 1.5px solid #B3945A; background-color: #1A1A1A;
    background-color: #050505;
    color: #FFFF00; font-weight: 500;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
}

.player-select:focus {
    outline: none;
    border-color: #FFFF00; font-weight: 800; letter-spacing: -0.02em;
    box-shadow: 0 0 0 3px rgba(255, 255, 0, 0.18);
}

.btn-add {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(2px);
}

.modal-content {
    position: relative;
    background-color: #1A1A1A;
    border: 1.5px solid #FFFF00;
    box-shadow: 0 2px 8px rgba(15, 32, 64, 0.08);
    border-radius: 12px;
    padding: 0;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    animation: modalSlideIn 0.2s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 0, 0.22);
}

.modal-header h3 {
    margin: 0;
    font-size: 1.125rem;
    color: #FFFF00;
}

.modal-body {
    padding: 1.5rem;
}

.modal-body p {
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 0, 0.22);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.btn-danger {
    background-color: #725AA4;
    color: #ffffff;
}

.btn-danger:hover {
    background-color: #8A70BD;
}

.btn-success {
    background-color: #FFFF00;
    color: #050505;
}

.btn-success:hover {
    background-color: #FFFF00;
}

.btn-warning {
    background-color: #f59e0b;
    color: #ffffff;
}

.btn-warning:hover {
    background-color: #d97706;
}

/* Session Completion */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.completed-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background-color: #050505;
    color: #FFFF00; font-weight: 800; letter-spacing: -0.02em;
    border: 1px solid #FFFF00;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.875rem;
}

.completed-notice {
    background-color: #451a03;
    border: 1px solid #f59e0b;
    color: #fbbf24;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}

.inline-form {
    display: inline;
    margin: 0;
}

/* Flash Messages */
.flash-messages {
    margin-bottom: 1.5rem;
}

.flash {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    animation: slideDown 0.3s ease-out;
}

.flash-warning {
    background-color: #451a03;
    border: 1px solid #f59e0b;
    color: #fbbf24;
}

.flash-error {
    background-color: var(--color-lavender-bg);
    border: 1px solid var(--color-lavender-strong);
    color: var(--color-lavender);
}

.flash-success {
    background-color: #050505;
    border: 1px solid #FFFF00;
    color: var(--color-yellow-soft);
}

.flash-message {
    flex: 1;
    font-weight: 500;
}

.flash-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0;
    margin-left: 1rem;
    opacity: 0.7;
    line-height: 1;
}

.flash-close:hover {
    opacity: 1;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Balance Validation */
.balance-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-left: 1rem;
}

.balance-status.balanced {
    background-color: #050505;
    color: #FFFF00; font-weight: 800; letter-spacing: -0.02em;
    border: 1px solid #FFFF00;
}

.balance-status.unbalanced {
    background-color: #451a03;
    color: #fbbf24;
    border: 1px solid #f59e0b;
}

.validation-details {
    background-color: #1A1A1A;
    border: 1.5px solid #FFFF00;
    box-shadow: 0 2px 8px rgba(15, 32, 64, 0.08);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

.validation-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 0, 0.22);
}

.validation-row:last-child {
    border-bottom: none;
    font-weight: 600;
    font-size: 1.125rem;
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    border-top: 2px solid #D6C99A;
}

.validation-label {
    color: #94A3B8;
}

.validation-value {
    font-family: var(--font-numbers);
    font-weight: 600;
}

.validation-value.positive {
    color: #FFFF00; font-weight: 800; letter-spacing: -0.02em;
}

.validation-value.negative {
    color: #FFFF00;
}

.validation-value.warning {
    color: #fbbf24;
}

.validation-details.validation-error {
    border: 2px solid var(--color-lavender-strong);
    background-color: var(--color-lavender-bg);
}

.validation-details.validation-leftover {
    border: 2px solid var(--color-lavender-strong);
    background-color: var(--color-lavender-bg);
}

.validation-details h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.125rem;
}

.validation-details.validation-error h4 {
    color: var(--color-lavender);
}

.validation-details.validation-leftover h4 {
    color: var(--color-lavender);
}

.validation-total {
    background-color: #050505;
    margin: 0 -1rem;
    padding: 0.75rem 1rem !important;
    border-radius: 6px;
    margin-top: 0.5rem;
}

.validation-value.error {
    color: var(--color-lavender) !important;
    font-size: 1.25rem;
}

.validation-value.leftover {
    color: var(--color-lavender) !important;
    font-size: 1.25rem;
}

.validation-help {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 0, 0.22);
    font-size: 0.875rem;
}

.validation-help p {
    margin: 0.5rem 0;
    color: var(--color-text-secondary);
}

.validation-help ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
    color: #94A3B8;
}

.validation-help li {
    margin: 0.25rem 0;
}

.validation-help strong {
    color: #FFFF00; font-weight: 500;
}

.validation-section {
    margin: 1.5rem 0;
    text-align: center;
}

#validate-btn {
    margin-bottom: 1rem;
}

.validation-details.validation-balanced {
    border: 2px solid #FFFF00;
    background-color: #050505;
}

.validation-details.validation-balanced h4 {
    color: var(--color-yellow-soft);
}

/* Toast Notifications */
.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background-color: #1A1A1A;
    border: 1.5px solid #FFFF00;
    box-shadow: 0 2px 8px rgba(15, 32, 64, 0.08);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    z-index: 2000;
    animation: toastSlideIn 0.3s ease-out;
    max-width: 400px;
}

.toast-success {
    border-left: 4px solid #FFFF00;
}

.toast-error {
    border-left: 4px solid var(--color-lavender-strong);
}

.toast-info {
    border-left: 4px solid #FFFF00;
}

.toast-content {
    flex: 1;
    color: #FFFF00; font-weight: 500;
    font-size: 0.875rem;
}

.toast-undo {
    background: none;
    border: 1px solid #FFFF00;
    color: #FFFF00; font-weight: 800; letter-spacing: -0.02em;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.toast-undo:hover {
    background-color: #FFFF00; color: #1A1A1A;
    color: #050505;
}

.toast-close {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.toast-close:hover {
    color: #FFFF00; font-weight: 500;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* Audit Log */
.audit-note {
    color: #94A3B8;
    font-style: italic;
    margin-bottom: 1rem;
}

.audit-details code {
    font-size: 0.75rem;
    color: #94A3B8;
    background-color: #050505;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
}

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

.badge-restored {
    background-color: #050505;
    color: #FFFF00; font-weight: 800; letter-spacing: -0.02em;
}

/* Player Stats Page */
.stats-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background-color: #1A1A1A;
    border: 1.5px solid #FFFF00;
    box-shadow: 0 2px 8px rgba(15, 32, 64, 0.08);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}

.stat-card.positive {
    border-color: #FFFF00;
    background-color: #050505;
}

.stat-card.negative {
    border-color: var(--color-lavender-strong);
    background-color: var(--color-lavender-bg);
}

.stat-label {
    display: block;
    font-size: 0.875rem;
    color: #94A3B8;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: #FFFF00;
}

.stat-sublabel {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

.finance-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.finance-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background-color: #050505;
    border-radius: 8px;
    border: 1.5px solid #FFFF00;
    box-shadow: 0 2px 8px rgba(15, 32, 64, 0.08);
}

.finance-item.highlight {
    border-color: #FFFF00;
    background-color: #050505;
}

.finance-label {
    font-weight: 500;
    color: var(--color-text-secondary);
}

.finance-value {
    font-weight: 600;
    font-family: var(--font-numbers);
    font-size: 1.125rem;
}

.extreme-session {
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    border: 1px solid;
}

.extreme-session.best {
    background-color: #050505;
    border-color: #FFFF00; font-weight: 800; letter-spacing: -0.02em;
}

.extreme-session.worst {
    background-color: var(--color-lavender-bg);
    border-color: var(--color-lavender-strong);
}

.extreme-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94A3B8;
    margin-bottom: 0.5rem;
}

.extreme-date {
    font-weight: 600;
    color: #FFFF00;
    margin-bottom: 0.5rem;
}

.extreme-amount {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-numbers);
    margin-bottom: 0.5rem;
}

.extreme-details {
    font-size: 0.875rem;
    color: #94A3B8;
}

.chart-container {
    position: relative;
    width: 100%;
    overflow-x: auto;
}

.chart-container canvas {
    display: block;
    width: 100%;
}

.player-pl-chart-empty {
    padding-block: 1rem;
}

.player-pl-chart-empty h3 {
    margin-bottom: 0.3rem;
}

.player-pl-empty-message {
    margin: 0;
    padding: 0.75rem 0 0.25rem;
    text-align: center;
}

.player-detail-page .player-session-history-header h3,
.player-detail-page .player-pl-chart-card > h3 {
    color: #FFFFFF !important;
    font-size: 1.25rem;
    font-weight: 700;
}

.player-link, .player-stats-link {
    color: #FFFF00; font-weight: 500;
    text-decoration: none;
    font-weight: 500;
}

.player-link:hover, .player-stats-link:hover {
    color: #FFFF00; font-weight: 800; letter-spacing: -0.02em;
    text-decoration: underline;
}

.btn-small {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    border-radius: 6px;
}

/* Transaction Editing */
.amount-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.edit-btn {
    background: none;
    border: 1.5px solid #B3945A; background-color: #1A1A1A;
    color: #94A3B8;
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0.25rem 0.375rem;
    border-radius: 4px;
    transition: all 0.2s;
    line-height: 1;
}

.edit-btn:hover {
    background-color: #1A1A1A;
    border-color: #FFFF00;
    color: #FFFF00;
}

.amount-edit {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.edit-amount-input {
    width: 100px;
    padding: 0.375rem 0.5rem;
    border: 1px solid #FFFF00;
    background-color: #050505;
    color: #FFFF00; font-weight: 500;
    border-radius: 6px;
    font-size: 0.875rem;
    font-family: var(--font-numbers);
}

.edit-amount-input:focus {
    outline: none;
    border-color: #FFFF00; font-weight: 800; letter-spacing: -0.02em;
    box-shadow: 0 0 0 3px rgba(255, 255, 0, 0.18);
}

.btn-save {
    background-color: #FFFF00; color: #1A1A1A;
    color: #050505;
    border: none;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-save:hover {
    background-color: #FFFF00;
}

.btn-cancel {
    background-color: #353229;
    color: var(--color-yellow-soft); font-weight: 600;
    border: 1px solid var(--color-border-muted);
    border: none;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel:hover {
    background-color: #494437;
}

/* Session Summary */
.session-ledger {
    border: 2px solid #FFFF00;
    background-color: #050505;
}

.session-ledger h3 {
    color: #FFFF00; font-weight: 800; letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
}

.session-ledger h4 {
    color: #FFFF00; font-weight: 500;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.ledger-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: #1A1A1A;
    border-radius: 8px;
    border: 1.5px solid #FFFF00;
    box-shadow: 0 2px 8px rgba(15, 32, 64, 0.08);
}

.ledger-stat {
    text-align: center;
}

.ledger-stat-label {
    display: block;
    font-size: 0.75rem;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.ledger-stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #FFFF00;
    font-family: var(--font-numbers);
}

.ledger-stat.warning .ledger-stat-value {
    color: #fbbf24;
}

.settlement-complete {
    text-align: center;
    padding: 2rem;
    background-color: #050505;
    border-radius: 8px;
    border: 1px solid #FFFF00;
    margin-top: 1rem;
}

.success-text {
    color: #FFFF00; font-weight: 800; letter-spacing: -0.02em;
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.player-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background-color: #050505;
    border-radius: 8px;
    border: 1.5px solid #FFFF00;
    box-shadow: 0 2px 8px rgba(15, 32, 64, 0.08);
}

.empty-text {
    color: var(--color-text-muted);
    text-align: center;
    padding: 2rem;
    font-style: italic;
}

.mt-3 {
    margin-top: 1.5rem;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid var(--color-yellow);
    outline-offset: 3px;
}

@media (max-width: 768px) {
    /* Four stacked rows ate a quarter of a phone screen on every page, so the
       wordmark shares a row with the club and the account controls. */
    .nav-container {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 0.5rem 0.6rem;
        padding: 0.15rem 0.85rem;
    }

    .nav-title {
        font-size: 1.05rem;
        grid-column: 1;
        grid-row: 1;
    }

    /* On a phone, which club you are in matters more than the product name,
       and the logo mark still carries the brand. */
    .nav-title .brand-name {
        display: none;
    }

    .nav-current-club {
        grid-column: 2;
        grid-row: 1;
        justify-self: start;
        /* Must be able to shrink, or the chip overruns the account controls
           beside it instead of truncating. */
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .nav-account {
        grid-column: 3;
        grid-row: 1;
        gap: 0.4rem;
        margin-left: 0;
        padding-left: 0;
    }

    .nav-links {
        grid-column: 1 / -1;
        grid-row: 2;
    }
    
    .nav-links {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.25rem 0.5rem;
    }
    
    .nav-links a {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
    
    .container {
        padding: 1rem;
    }
    
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .page-header h2 {
        font-size: 1.5rem;
    }
    
    .grid-2 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .sessions-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .session-stats {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .settlement-item {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    
    .session-overview, .ledger-overview, .stats-overview {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .overview-card, .stat-card {
        padding: 1rem;
    }
    
    .overview-value, .stat-value {
        font-size: 1.5rem;
    }
    
    .player-selector {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 0.375rem;
    }
    
    .player-btn {
        padding: 0.625rem 0.375rem;
        font-size: 0.75rem;
    }
    
    .quick-amounts {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.375rem;
    }
    
    .amount-btn {
        padding: 0.5rem;
        font-size: 0.75rem;
    }
    
    .card {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .data-table {
        font-size: 0.875rem;
    }
    
    .data-table th,
    .data-table td {
        padding: 0.625rem 0.5rem;
    }
    
    /* Make tables scrollable on mobile */
    .card {
        overflow-x: auto;
    }
    
    .data-table {
        min-width: 500px;
    }
    
    .btn-large {
        padding: 1rem;
        font-size: 1.125rem;
    }
    
    .modal-content {
        width: 95%;
        margin: 1rem;
    }
    
    .session-players-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .add-player-form {
        width: 100%;
    }
    
    .player-select {
        max-width: none;
        flex: 1;
    }
}

/* Warm dark theme ------------------------------------------------------- */

html {
    color-scheme: dark;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 50% -10rem, rgba(255, 255, 0, 0.09), transparent 34rem),
        var(--color-bg);
    color: var(--color-text);
    font-feature-settings: "kern" 1, "tnum" 1, "zero" 0;
}

::selection {
    background: var(--color-yellow);
    color: var(--color-yellow-ink);
}

.navbar {
    background: rgba(16, 16, 13, 0.94);
    border-bottom: 1px solid var(--color-border-strong);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(14px);
}

.nav-title {
    color: var(--color-yellow-soft);
}

.nav-links a {
    color: var(--color-text-secondary);
    border: 1px solid transparent;
}

.nav-links a:hover {
    color: var(--color-yellow-soft);
    background: var(--color-surface-raised);
    border-color: var(--color-border-muted);
}

.nav-links a.active {
    color: var(--color-yellow-ink);
    background: var(--color-yellow);
    border-color: var(--color-yellow);
}

.page-header {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border-muted);
}

.page-header h2,
.session-date {
    color: var(--color-yellow-soft);
}

.card,
.overview-card,
.stat-card,
.validation-details,
.toast,
.modal-content,
.ledger-summary {
    background: var(--color-surface);
    border-color: var(--color-border-muted);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.card,
.overview-card,
.stat-card,
.validation-details,
.toast,
.modal-content,
.ledger-summary,
.settlement-item,
.player-item,
.finance-item,
.player-chip {
    border-width: 1px;
}

.card h3,
.modal-header h3,
.stat-value,
.overview-value,
.ledger-stat-value,
.transaction-player,
.extreme-date {
    color: var(--color-text);
}

.card h4,
.session-ledger h3,
.session-ledger h4 {
    color: var(--color-yellow-soft);
}

.session-card {
    position: relative;
    overflow: hidden;
    border-color: var(--color-border-muted);
}

.session-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--color-yellow);
    opacity: 0.8;
}

.session-card:hover {
    background: var(--color-surface-raised);
    border-color: var(--color-border-strong);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
    font-weight: inherit;
    letter-spacing: normal;
}

.session-card.session-completed {
    background: var(--color-surface);
    border-color: var(--color-border-strong);
}

.session-description,
.session-desc,
.overview-label,
.stat-label,
.ledger-stat-label,
.transaction-time,
.settlement-note,
.settlement-summary,
.audit-note,
.extreme-label,
.extreme-details,
.current-players h4,
.add-players h4,
.validation-label {
    color: var(--color-text-secondary);
}

.validation-help ul {
    color: var(--color-text-secondary);
}

.stat-sublabel,
.empty-state,
.empty-text,
.settlement-arrow,
.toast-close {
    color: var(--color-text-muted);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: background-color 0.18s ease, border-color 0.18s ease,
                color 0.18s ease, transform 0.18s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary,
.btn-success,
.btn-save {
    color: var(--color-yellow-ink);
    background: var(--color-yellow);
    box-shadow: 0 5px 16px rgba(255, 255, 0, 0.13);
}

.btn-primary:hover,
.btn-success:hover,
.btn-save:hover {
    background: var(--color-yellow-strong);
}

.btn-secondary,
.btn-cancel {
    color: var(--color-text);
    background: var(--color-surface-raised);
    border-color: var(--color-border-strong);
}

.btn-secondary:hover,
.btn-cancel:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-yellow);
}

.btn-danger {
    color: var(--color-yellow-ink);
    background: var(--color-lavender);
}

.btn-danger:hover {
    background: #E1D4FF;
}

.btn-warning {
    color: var(--color-yellow-ink);
    background: var(--color-warning);
}

.btn-warning:hover {
    background: #F7C983;
}

.player-btn,
.amount-btn,
.edit-btn,
.delete-btn {
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    border-color: var(--color-border-muted);
}

.player-btn:hover,
.amount-btn:hover,
.edit-btn:hover {
    color: var(--color-yellow-soft);
    background: var(--color-surface-hover);
    border-color: var(--color-yellow);
    letter-spacing: normal;
}

.amount-btn:hover {
    font-weight: 600;
}

.player-btn.selected {
    color: var(--color-yellow-ink);
    background: var(--color-yellow);
    border-color: var(--color-yellow);
    box-shadow: 0 0 0 3px rgba(255, 255, 0, 0.13);
}

.delete-btn:hover {
    color: var(--color-lavender);
    background: var(--color-lavender-bg);
    border-color: var(--color-lavender-strong);
}

.form-group label,
.finance-label,
.modal-body p,
.validation-help p {
    color: var(--color-text-secondary);
}

.form-group input,
.form-group select,
.player-select,
.edit-amount-input {
    color: var(--color-text);
    background: #10100E;
    border-color: var(--color-border-strong);
}

.form-group input::placeholder {
    color: var(--color-text-muted);
}

.form-group input:focus,
.form-group select:focus,
.player-select:focus,
.edit-amount-input:focus {
    border-color: var(--color-yellow);
    box-shadow: 0 0 0 3px rgba(255, 255, 0, 0.15);
    letter-spacing: normal;
}

.form-group input:focus,
.form-group select:focus,
.player-select:focus {
    font-weight: 500;
}

.overview-card {
    background: linear-gradient(145deg, var(--color-surface-raised), var(--color-surface));
}

.overview-card.warning,
.session-warning,
.completed-notice,
.flash-warning,
.balance-status.unbalanced {
    color: #F7D79B;
    background: var(--color-warning-bg);
    border-color: #7F6333;
}

.ledger-stat.warning .ledger-stat-value,
.validation-value.warning,
.settlement-amount {
    color: var(--color-warning);
}

.transaction-item,
.data-table th,
.data-table td,
.validation-row,
.modal-header,
.modal-footer,
.validation-help {
    border-color: var(--color-border-muted);
}

.transaction-time,
.audit-details code {
    color: var(--color-text-secondary);
    background: #10100E;
    border-color: var(--color-border-muted);
}

.data-table th {
    color: var(--color-yellow-soft);
    background: var(--color-surface-raised);
}

.data-table tr:hover {
    background: rgba(255, 255, 0, 0.035);
}

.data-table td,
.transaction-amount,
.finance-value,
.overview-value,
.ledger-stat-value,
.settlement-amount {
    font-variant-numeric: tabular-nums;
}

.positive,
.overview-value.positive,
.validation-value.positive {
    color: var(--color-positive) !important;
}

.negative,
.overview-value.negative,
.validation-value.negative,
.validation-value.error,
.validation-value.leftover {
    color: var(--color-negative) !important;
}

.settlement-item,
.player-item,
.finance-item,
.player-chip {
    background: var(--color-surface-raised);
    border-color: var(--color-border-muted);
    box-shadow: none;
}

.settlement-item:hover,
.player-item:hover,
.finance-item:hover {
    border-color: var(--color-border-strong);
}

.settlement-from {
    color: var(--color-text);
}

.buyin-amount,
.cashout-amount,
.success-text {
    color: var(--color-yellow);
}

.settlement-to {
    color: var(--color-text);
    font-weight: 600;
    letter-spacing: normal;
}

.session-ledger {
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
}

.info-card {
    background: rgba(255, 255, 0, 0.035);
    border-color: var(--color-border-strong);
}

.info-card h3 {
    color: var(--color-yellow-soft);
}

.info-card p {
    color: var(--color-text-secondary);
}

.badge-winner,
.completed-badge,
.session-badge,
.balance-status.balanced,
.badge-restored {
    color: var(--color-yellow-soft);
    background: #1C1B12;
    border-color: var(--color-border-strong);
}

.badge-owes,
.badge-deleted {
    color: var(--color-lavender);
    background: var(--color-lavender-bg);
    border-color: var(--color-lavender-strong);
}

.badge-settled {
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
}

.flash-error,
.validation-details.validation-error,
.stat-card.negative,
.extreme-session.worst {
    color: var(--color-lavender);
    background: var(--color-lavender-bg);
    border-color: var(--color-lavender-strong);
}

.extreme-session.best {
    border-color: var(--color-border-strong);
    font-weight: inherit;
    letter-spacing: normal;
}

.validation-details.validation-leftover {
    color: #F7D79B;
    background: var(--color-warning-bg);
    border-color: #7F6333;
}

.validation-details.validation-leftover h4 {
    color: var(--color-warning);
}

.flash-success,
.validation-details.validation-balanced,
.settlement-complete {
    color: var(--color-yellow-soft);
    background: #17170F;
    border-color: var(--color-border-strong);
}

.toast-error {
    border-left-color: var(--color-lavender-strong);
}

.toast-success {
    border-left-color: var(--color-yellow);
}

.modal-overlay {
    background: rgba(0, 0, 0, 0.78);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline-color: var(--color-yellow-strong);
}

* {
    scrollbar-color: var(--color-border-strong) var(--color-bg);
}

/* Money amounts share the butter-yellow action accent without replacing P/L colors. */
.money-amount,
.overview-value:not(.positive):not(.negative),
.ledger-stat-value,
.transaction-amount,
.settlement-amount,
.finance-value,
.amount-btn,
input[name="amount"],
input[name="small_blind"],
input[name="big_blind"],
input[name="base_buyin"] {
    color: var(--color-money);
    font-weight: 600;
}

.amount-btn:hover {
    color: var(--color-money-soft);
}

.overview-card.warning .overview-value,
.ledger-stat.warning .ledger-stat-value {
    color: var(--color-negative);
}

.difference-value.balanced {
    color: var(--color-positive) !important;
}

.difference-value.zero {
    color: #FFFFFF !important;
}

.difference-value.unbalanced {
    color: var(--color-negative) !important;
}

.stat-card.positive,
.extreme-session.best {
    background: var(--color-positive-bg);
    border-color: #398E65;
}

.stat-card.negative,
.extreme-session.worst {
    background: var(--color-negative-bg);
    border-color: #A94752;
}

.stat-card.positive .stat-value {
    color: var(--color-positive);
}

.stat-card.negative .stat-value {
    color: var(--color-negative);
}

/* Session stakes and buy-in configuration */
.form-section-title {
    margin: 1.75rem 0 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border-muted);
}

.form-section-title h3 {
    margin-bottom: 0.25rem;
}

.form-section-title p,
.field-hint,
.game-setup-header p,
.label-note {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.form-grid {
    display: grid;
    gap: 1rem;
}

.form-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.field-hint {
    margin-top: -0.35rem;
}

.welcome-field-hint {
    margin-top: 0.35rem;
    font-size: 0.7rem;
    white-space: nowrap;
}

.password-field-hint {
    margin-top: 0.3rem;
}

@media (max-width: 420px) {
    /* The account card shrinks to fit narrow phones before this line does,
       so let it wrap there instead of overflowing the card. */
    .welcome-field-hint {
        white-space: normal;
    }
}

.game-setup-card {
    padding: 1.25rem;
}

.game-setup-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.game-setup-header h3,
.game-setup-header p {
    margin-bottom: 0;
}

.game-setup-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.game-setting {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.85rem 1rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border-muted);
    border-radius: 10px;
}

.game-setting-label {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.game-setting-value {
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Completed sessions keep their key setup details compact beside the title. */
.session-heading {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.55rem;
}

.session-heading h2 {
    margin: 0;
}

.session-compact-setup {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.session-compact-setting {
    display: inline-flex;
    align-items: baseline;
    gap: 0.42rem;
    padding: 0.34rem 0.62rem;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(253, 233, 146, 0.42);
    border-radius: 999px;
}

.session-compact-label {
    color: var(--color-text-muted);
    font-size: 0.63rem;
    font-weight: 650;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.session-compact-value {
    color: #FFFFFF;
    font-size: 0.88rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.game-settings-editor {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border-muted);
}

.game-settings-editor summary {
    width: fit-content;
    color: var(--color-yellow-soft);
    font-weight: 600;
    cursor: pointer;
}

.game-settings-editor[open] summary {
    margin-bottom: 1rem;
}

.game-settings-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 0.75rem;
    align-items: end;
}

.game-settings-form .form-group {
    margin-bottom: 0;
}

.session-game-info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.game-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    color: var(--color-text-muted);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border-muted);
    border-radius: 999px;
    font-size: 0.75rem;
}

.quick-amounts .amount-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}

.quick-value {
    color: var(--color-money);
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    .form-grid-3,
    .game-settings-form {
        grid-template-columns: 1fr;
    }

    .game-setup-summary {
        grid-template-columns: 1fr;
    }

    .game-settings-form .btn {
        width: 100%;
    }
}

/* Player card icons ---------------------------------------------------- */
.player-card-icon {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 42px;
    padding: 0;
    flex: 0 0 auto;
    overflow: hidden;
    color: #161511;
    background: linear-gradient(145deg, #FFFDF7 0%, #F4EFDF 100%);
    border: 1px solid #D8D1BE;
    border-radius: 4px;
    box-shadow:
        0 3px 9px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.72);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1;
    vertical-align: middle;
}

.player-card-corner {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 0.72;
}

.player-card-corner-top {
    top: 3px;
    left: 3px;
}

.player-card-corner-bottom {
    right: 3px;
    bottom: 3px;
    transform: rotate(180deg);
}

.player-card-rank {
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: -0.08em;
}

.player-card-corner-suit {
    margin-top: 1px;
    font-size: 0.5rem;
}

.player-card-center-suit {
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1rem;
    transform: translate(-50%, -50%);
}

.player-card-icon.card-suit-red {
    color: #C9364A;
}

.player-card-icon.card-suit-black {
    color: #171713;
}

.player-card-icon.card-suit-spades {
    color: #171713;
    border-color: #77776F;
}

.player-card-icon.card-suit-clubs {
    color: #171713;
    border-color: #77776F;
}

.player-card-icon.card-suit-hearts {
    color: #D92E49;
    border-color: #F06A7F;
}

.player-card-icon.card-suit-diamonds {
    color: #D92E49;
    border-color: #F06A7F;
}

/* Put the red/black deck ink on the markings themselves so nested text
   styles cannot wash out a player's card. */
.player-card-icon.card-suit-spades .player-card-rank,
.player-card-icon.card-suit-spades .player-card-corner-suit,
.player-card-icon.card-suit-spades .player-card-center-suit {
    color: #171713 !important;
}

.player-card-icon.card-suit-hearts .player-card-rank,
.player-card-icon.card-suit-hearts .player-card-corner-suit,
.player-card-icon.card-suit-hearts .player-card-center-suit {
    color: #D92E49 !important;
}

.player-card-icon.card-suit-diamonds .player-card-rank,
.player-card-icon.card-suit-diamonds .player-card-corner-suit,
.player-card-icon.card-suit-diamonds .player-card-center-suit {
    color: #D92E49 !important;
}

.player-card-icon.card-suit-clubs .player-card-rank,
.player-card-icon.card-suit-clubs .player-card-corner-suit,
.player-card-icon.card-suit-clubs .player-card-center-suit {
    color: #171713 !important;
}

/* Player cards share customizable limb and shoe colors. */
.card-character-arm,
.card-character-leg {
    display: none;
    position: absolute;
    pointer-events: none;
}

.player-card-icon.has-card-character {
    overflow: visible;
}

.player-card-icon.has-card-character .card-character-arm,
.player-card-icon.has-card-character .card-character-leg {
    display: block;
    z-index: 0;
    background: var(--card-limb-color, var(--color-action));
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.62);
}

.card-character-arm {
    top: 52%;
    width: 34%;
    height: 3px;
}

.card-character-arm-left {
    left: -28%;
    transform: rotate(-20deg);
    transform-origin: right center;
}

.card-character-arm-right {
    right: -28%;
    transform: rotate(20deg);
    transform-origin: left center;
}

.card-character-leg {
    bottom: -18%;
    width: 3px;
    height: 23%;
}

.card-character-leg-left {
    left: 30%;
    transform: rotate(8deg);
}

.card-character-leg-right {
    right: 30%;
    transform: rotate(-8deg);
}

.card-character-leg i {
    position: absolute;
    bottom: -4px;
    width: 11px;
    height: 6px;
    background: var(--card-shoe-color, #96613B);
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 8px 8px 4px 4px;
    box-shadow: 0 0 7px var(--card-shoe-color, #96613B);
}

.card-character-leg-left i {
    right: 0;
    transform: rotate(-7deg);
}

.card-character-leg-right i {
    left: 0;
    transform: rotate(7deg);
}

.player-card-medium .card-character-arm {
    height: 4px;
}

.player-card-medium .card-character-leg {
    width: 4px;
}

.player-card-medium .card-character-leg i {
    width: 14px;
    height: 7px;
}

.player-card-profile .card-character-arm {
    height: 5px;
}

.player-card-profile .card-character-leg {
    width: 5px;
}

.player-card-profile .card-character-leg i {
    bottom: -6px;
    width: 20px;
    height: 10px;
}

.card-character-headgear {
    display: none;
    position: absolute;
    z-index: 6;
    left: 50%;
    color: initial;
    line-height: 1;
    pointer-events: none;
    transform: translateX(-50%);
}

.card-hat-sunglasses .card-character-headgear,
.card-hat-top-hat .card-character-headgear,
.card-hat-cap .card-character-headgear,
.card-hat-crown .card-character-headgear,
.card-hat-graduation-cap .card-character-headgear,
.card-hat-bow .card-character-headgear,
.card-hat-flower .card-character-headgear,
.card-hat-matcha-latte .card-character-headgear,
.card-hat-butterfly .card-character-headgear,
.card-hat-cherries .card-character-headgear,
.card-hat-sparkles .card-character-headgear,
.card-hat-mushroom .card-character-headgear,
.card-hat-sunflower .card-character-headgear,
.card-hat-magic-wand .card-character-headgear {
    display: block;
}

.card-hat-sunglasses .card-character-headgear {
    top: 25%;
    font-size: 1rem;
}

.card-hat-top-hat .card-character-headgear,
.card-hat-cap .card-character-headgear,
.card-hat-crown .card-character-headgear,
.card-hat-graduation-cap .card-character-headgear {
    top: -0.95rem;
    font-size: 1.15rem;
}

.card-hat-bow .card-character-headgear,
.card-hat-flower .card-character-headgear,
.card-hat-butterfly .card-character-headgear,
.card-hat-cherries .card-character-headgear,
.card-hat-sparkles .card-character-headgear,
.card-hat-sunflower .card-character-headgear,
.card-hat-magic-wand .card-character-headgear {
    top: -0.72rem;
    left: 72%;
    font-size: 1rem;
    transform: translateX(-50%) rotate(8deg);
}

.card-hat-matcha-latte .card-character-headgear,
.card-hat-mushroom .card-character-headgear {
    top: -0.86rem;
    left: 57%;
    font-size: 1.05rem;
    transform: translateX(-50%) rotate(-4deg);
}

.player-card-medium.card-hat-sunglasses .card-character-headgear {
    font-size: 1.5rem;
}

.player-card-medium.card-hat-top-hat .card-character-headgear,
.player-card-medium.card-hat-cap .card-character-headgear,
.player-card-medium.card-hat-crown .card-character-headgear,
.player-card-medium.card-hat-graduation-cap .card-character-headgear {
    top: -1.35rem;
    font-size: 1.65rem;
}

.player-card-medium.card-hat-bow .card-character-headgear,
.player-card-medium.card-hat-flower .card-character-headgear,
.player-card-medium.card-hat-butterfly .card-character-headgear,
.player-card-medium.card-hat-cherries .card-character-headgear,
.player-card-medium.card-hat-sparkles .card-character-headgear,
.player-card-medium.card-hat-sunflower .card-character-headgear,
.player-card-medium.card-hat-magic-wand .card-character-headgear {
    top: -1.05rem;
    left: 72%;
    font-size: 1.45rem;
}

.player-card-medium.card-hat-matcha-latte .card-character-headgear,
.player-card-medium.card-hat-mushroom .card-character-headgear {
    top: -1.22rem;
    left: 57%;
    font-size: 1.5rem;
}

.player-card-profile.card-hat-sunglasses .card-character-headgear {
    top: 23%;
    font-size: 2.55rem;
}

.player-card-profile.card-hat-top-hat .card-character-headgear,
.player-card-profile.card-hat-cap .card-character-headgear,
.player-card-profile.card-hat-crown .card-character-headgear,
.player-card-profile.card-hat-graduation-cap .card-character-headgear {
    top: -2.35rem;
    font-size: 2.9rem;
}

.player-card-profile.card-hat-bow .card-character-headgear,
.player-card-profile.card-hat-flower .card-character-headgear,
.player-card-profile.card-hat-butterfly .card-character-headgear,
.player-card-profile.card-hat-cherries .card-character-headgear,
.player-card-profile.card-hat-sparkles .card-character-headgear,
.player-card-profile.card-hat-sunflower .card-character-headgear,
.player-card-profile.card-hat-magic-wand .card-character-headgear {
    top: -1.75rem;
    left: 72%;
    font-size: 2.35rem;
}

.player-card-profile.card-hat-matcha-latte .card-character-headgear,
.player-card-profile.card-hat-mushroom .card-character-headgear {
    top: -2rem;
    left: 57%;
    font-size: 2.45rem;
}


.player-card-icon.player-card-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    background: var(--color-surface-hover);
    border: 1px dashed var(--color-border-strong);
    box-shadow: none;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
}

.player-card-icon.player-card-large {
    width: 60px;
    height: 84px;
    border-radius: 7px;
}

.player-card-large .player-card-rank {
    font-size: 1rem;
}

.player-card-large .player-card-corner-suit {
    font-size: 0.82rem;
}

.player-card-large .player-card-center-suit {
    font-size: 2.25rem;
}

.player-card-icon.player-card-profile {
    width: 104px;
    height: 146px;
    border-radius: 12px;
    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.38),
        inset 0 0 0 1px rgba(255, 255, 255, 0.78);
}

.player-card-profile .player-card-rank {
    font-size: 1.35rem;
}

.player-card-profile .player-card-corner-suit {
    font-size: 1rem;
}

.player-card-profile .player-card-center-suit {
    font-size: 3.35rem;
}

.player-title,
.player-name-with-card,
.transaction-player {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.player-title {
    gap: 1rem;
}

.player-title h2 {
    margin: 0;
}

.player-list-identity {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.player-roster-section {
    overflow: visible;
}

.add-player-card {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
}

.add-player-copy {
    max-width: 460px;
}

.add-player-copy h3 {
    margin-bottom: 0.25rem;
}

.add-player-copy p {
    color: var(--color-text-secondary);
}

.add-player-inline-form {
    display: flex;
    align-items: end;
    gap: 0.75rem;
    width: min(100%, 430px);
}

.add-player-inline-form .form-group {
    flex: 1;
    margin-bottom: 0;
}

.player-roster-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.player-roster-header h3 {
    margin-bottom: 0;
}

.player-roster-header > span {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.player-roster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    align-items: center;
    justify-items: center;
    gap: 1.75rem 1rem;
    min-height: 240px;
    padding: 2.5rem 2rem;
    background:
        radial-gradient(ellipse at center, rgba(255, 255, 0, 0.055), transparent 68%),
        #10100E;
    border: 1px solid var(--color-border-muted);
    border-radius: 44px;
}

.player-roster-card {
    --roster-offset: 0px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-width: 105px;
    min-height: 108px;
    animation: playerRosterFloat 4.6s ease-in-out infinite;
}

.player-roster-card:nth-child(6n + 1) { --roster-offset: -12px; animation-delay: -0.4s; }
.player-roster-card:nth-child(6n + 2) { --roster-offset: 13px; animation-delay: -1.6s; }
.player-roster-card:nth-child(6n + 3) { --roster-offset: -3px; animation-delay: -2.7s; }
.player-roster-card:nth-child(6n + 4) { --roster-offset: 17px; animation-delay: -0.9s; }
.player-roster-card:nth-child(6n + 5) { --roster-offset: -9px; animation-delay: -2.1s; }
.player-roster-card:nth-child(6n + 6) { --roster-offset: 7px; animation-delay: -3.4s; }

@keyframes playerRosterFloat {
    0%, 100% {
        transform: translateY(calc(var(--roster-offset) - 2px));
    }
    50% {
        transform: translateY(calc(var(--roster-offset) + 3px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .player-roster-card {
        animation: none;
        transform: translateY(var(--roster-offset));
    }
}

.player-card-icon.player-card-medium {
    width: 44px;
    height: 62px;
    border-radius: 6px;
}

.player-card-medium .player-card-rank {
    font-size: 0.78rem;
}

.player-card-medium .player-card-corner-suit {
    font-size: 0.66rem;
}

.player-card-medium .player-card-center-suit {
    font-size: 1.55rem;
}

.player-roster-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 120px;
    color: var(--color-text);
    text-align: center;
    text-decoration: none;
}

.player-roster-profile-link {
    gap: 0.55rem;
    padding: 0.45rem 0.65rem;
    border-radius: 14px;
    transition: background 0.16s ease, transform 0.16s ease;
}

.player-roster-profile-link:hover {
    background: rgba(253, 233, 146, 0.08);
    transform: translateY(-2px);
}

.player-roster-profile-link:hover .player-card-icon {
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.42), 0 0 0 2px var(--color-action);
    transform: rotate(-2deg);
}

.player-roster-card .player-card-icon.card-suit-spades {
    color: #171713;
    background: #FFFFFF;
    border-color: #77776F;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.34);
}

.player-roster-card .player-card-icon.card-suit-hearts {
    color: #D92E49;
    background: #FFFFFF;
    border-color: #F06A7F;
    box-shadow: 0 5px 16px rgba(217, 46, 73, 0.32);
}

.player-roster-card .player-card-icon.card-suit-diamonds {
    color: #D92E49;
    background: #FFFFFF;
    border-color: #F06A7F;
    box-shadow: 0 5px 16px rgba(217, 46, 73, 0.32);
}

.player-roster-card .player-card-icon.card-suit-clubs {
    color: #171713;
    background: #FFFFFF;
    border-color: #77776F;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.34);
}

.player-roster-link strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-roster-link > span {
    color: var(--color-yellow);
    font-size: 0.7rem;
}

.player-roster-link:hover strong {
    color: var(--color-yellow);
}

.stats-button {
    color: var(--color-yellow);
    background: var(--color-surface-raised);
    border-color: var(--color-border-muted);
}

.stats-button:hover {
    color: var(--color-yellow-ink);
    background: var(--color-yellow);
    border-color: var(--color-yellow);
}

/* Player names stay neutral so card and financial colors remain meaningful. */
.player-name,
.player-link,
.player-stats-link,
.player-roster-link strong,
.player-name-with-card > strong,
.player-btn > span:last-child,
.player-chip > span:not(.player-card-icon),
.transaction-player,
.settlement-from,
.settlement-to,
.player-title h2 {
    color: var(--color-text);
}

.player-link:hover,
.player-stats-link:hover,
.player-roster-link:hover strong {
    color: #FFFFFF;
}

.session-ledger .ledger-stat-value {
    font-family: inherit;
}

.session-ledger .ledger-neutral-amount {
    color: #FFFFFF;
    font-weight: inherit;
}

.player-balances-section {
    margin: 1.5rem 0 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--color-border-muted);
}

.player-balances-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.player-balances-header .player-balances-title {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0;
}

.player-balances-count {
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 550;
    letter-spacing: 0.02em;
    text-transform: none;
}

.ledger-player-cell {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.ledger-player-remove-form {
    flex: 0 0 auto;
    margin: 0;
}

.player-balance-row {
    transition: opacity 0.2s ease;
}

.player-balance-row.is-removing {
    opacity: 0;
}

.transaction-amount {
    font-family: inherit;
}

.settlement-amount {
    font-family: inherit;
}

.player-roster-card .player-delete-form {
    position: absolute;
    top: 0;
    right: 0;
}

.player-card-quick-edit {
    position: relative;
    flex: 0 0 auto;
}

.player-card-quick-edit summary {
    display: block;
    list-style: none;
    line-height: 0;
    cursor: pointer;
    border-radius: 7px;
}

.player-card-quick-edit summary::-webkit-details-marker {
    display: none;
}

.player-card-quick-edit summary:hover .player-card-icon,
.player-card-quick-edit[open] summary .player-card-icon {
    transform: translateY(-2px) rotate(-2deg);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.42), 0 0 0 2px var(--color-yellow);
}

.player-card-popover {
    position: absolute;
    top: calc(100% + 0.7rem);
    left: 50%;
    z-index: 30;
    width: 300px;
    padding: 1rem;
    color: var(--color-text);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border-strong);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.48);
    transform: translateX(-50%);
}

.player-card-popover::before {
    content: '';
    position: absolute;
    top: -6px;
    left: calc(50% - 5px);
    width: 10px;
    height: 10px;
    background: var(--color-surface-raised);
    border-top: 1px solid var(--color-border-strong);
    border-left: 1px solid var(--color-border-strong);
    transform: rotate(45deg);
}

.player-card-popover > strong {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--color-yellow);
}

.player-card-quick-form .btn {
    width: 100%;
    margin-top: 0.75rem;
}

.player-card-settings-card {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
}

.player-card-help {
    color: var(--color-text-secondary);
}

.player-card-form,
.card-picker-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr)) auto;
    gap: 0.75rem;
    align-items: end;
}

.card-picker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.player-card-form .form-group,
.card-picker-grid .form-group {
    margin-bottom: 0;
}

.player-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.available-players-section {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border-muted);
}

.add-players-disclosure {
    position: relative;
    z-index: 25;
}

.add-players-disclosure > summary {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0.4rem 0.75rem;
    color: var(--color-yellow-ink);
    background: var(--color-yellow);
    border: 1px solid var(--color-yellow);
    border-radius: 9px;
    font-size: 0.78rem;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.add-players-disclosure > summary::-webkit-details-marker {
    display: none;
}

.add-players-disclosure > summary:hover,
.add-players-disclosure[open] > summary {
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(255, 255, 0, 0.16);
}

.add-players-popover {
    position: absolute;
    top: calc(100% + 0.65rem);
    right: 0;
    z-index: 40;
    width: min(430px, 86vw);
    padding: 1rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border-strong);
    border-radius: 13px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.52);
}

.add-players-popover::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 18px;
    width: 10px;
    height: 10px;
    background: var(--color-surface-raised);
    border-top: 1px solid var(--color-border-strong);
    border-left: 1px solid var(--color-border-strong);
    transform: rotate(45deg);
}

.available-players-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.available-players-header h4 {
    margin: 0;
}

.available-players-header span {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.available-player-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 0.65rem;
    max-height: 330px;
    overflow-y: auto;
    padding: 0.15rem;
}

.available-player-option {
    position: relative;
    min-width: 0;
}

.available-player-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.available-player-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 105px;
    padding: 0.7rem 0.45rem;
    color: var(--color-text);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border-muted);
    border-radius: 11px;
    cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease,
                transform 0.16s ease, box-shadow 0.16s ease;
}

.available-player-content:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-border-strong);
    transform: translateY(-2px);
}

.available-player-option input:focus-visible + .available-player-content {
    outline: 3px solid var(--color-yellow);
    outline-offset: 3px;
}

.available-player-option input:checked + .available-player-content {
    color: #FFFFFF;
    background: rgba(255, 255, 0, 0.09);
    border-color: var(--color-yellow);
    box-shadow: 0 0 0 2px rgba(255, 255, 0, 0.13);
    transform: translateY(-2px);
}

.available-player-option input:checked + .available-player-content::after {
    content: '✓';
    position: absolute;
    top: 6px;
    right: 8px;
    color: var(--color-yellow);
    font-size: 0.8rem;
    font-weight: 800;
}

.available-player-name {
    max-width: 100%;
    overflow: hidden;
    color: #FFFFFF;
    font-size: 0.78rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.add-selected-players {
    width: 100%;
    margin-top: 0.85rem;
}

.add-selected-players:disabled {
    color: var(--color-text-muted);
    background: var(--color-surface-hover);
    border-color: var(--color-border-muted);
    cursor: not-allowed;
    opacity: 0.7;
    transform: none;
}

.settlement-flow {
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .add-player-card,
    .add-player-inline-form {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .player-card-settings-card {
        align-items: stretch;
        flex-direction: column;
    }

    .player-card-form {
        grid-template-columns: 1fr 1fr;
    }

    .player-card-form .btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    .available-player-grid {
        grid-template-columns: repeat(3, minmax(80px, 1fr));
    }

    .add-players-popover {
        position: fixed;
        top: 50%;
        right: auto;
        left: 50%;
        width: min(92vw, 430px);
        max-height: 82vh;
        overflow-y: auto;
        transform: translate(-50%, -50%);
    }

    .add-players-popover::before {
        display: none;
    }

    .player-card-popover {
        position: fixed;
        top: 50%;
        left: 50%;
        width: min(90vw, 340px);
        transform: translate(-50%, -50%);
    }

    .player-roster-grid {
        grid-template-columns: repeat(2, minmax(100px, 1fr));
        gap: 1.25rem 0.75rem;
        padding: 2rem 1rem;
        border-radius: 28px;
    }

    .player-roster-card:nth-child(n) {
        --roster-offset: 0px;
    }

    .player-card-popover::before {
        display: none;
    }
}

/* Keep most text neutral and reserve vivid color for interactive controls. */
.nav-title,
.page-header h2,
.session-date,
.session-ledger h3,
.info-card h3,
.player-card-popover > strong {
    color: var(--color-text);
}

.nav-links a:hover,
.card h4,
.session-ledger h4,
.data-table th,
.player-roster-link > span,
.toast-content,
.validation-help strong,
.settlement-summary-box {
    color: var(--color-text-secondary);
}

.completed-badge,
.session-badge {
    color: var(--color-text-secondary);
}

.badge-winner,
.balance-status.balanced,
.badge-restored,
.flash-success,
.validation-details.validation-balanced,
.validation-details.validation-balanced h4,
.settlement-complete,
.success-text {
    color: var(--color-positive);
}

/* Use one butter-yellow shade across actions and accent text. */
.nav-links a.active,
.btn-primary,
.btn-success,
.btn-save,
.player-btn.selected,
.stats-button:hover,
.toast-undo:hover {
    color: var(--color-action-ink);
    background: var(--color-action);
    border-color: var(--color-action);
}

.btn-primary,
.btn-success,
.btn-save {
    box-shadow: 0 5px 16px rgba(253, 233, 146, 0.24);
}

.btn-primary:hover,
.btn-success:hover,
.btn-save:hover {
    background: var(--color-action-hover);
}

.stats-button,
.toast-undo,
.remove-btn:hover {
    color: var(--color-action);
    border-color: var(--color-action);
}

.btn-secondary:hover,
.btn-cancel:hover,
.player-btn:hover,
.amount-btn:hover,
.edit-btn:hover {
    border-color: var(--color-action);
}

.player-btn:hover,
.edit-btn:hover {
    color: var(--color-action-hover);
}

.player-btn.selected {
    box-shadow: 0 0 0 3px rgba(253, 233, 146, 0.22);
}

.form-group input:focus,
.form-group select:focus,
.player-select:focus,
.edit-amount-input:focus {
    border-color: var(--color-action);
    box-shadow: 0 0 0 3px rgba(253, 233, 146, 0.22);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline-color: var(--color-action-hover);
}

.toast-success {
    border-left-color: var(--color-positive);
}

.available-player-option input:focus-visible + .available-player-content {
    outline-color: var(--color-action);
}

.available-player-option input:checked + .available-player-content {
    background: rgba(253, 233, 146, 0.13);
    border-color: var(--color-action);
    box-shadow: 0 0 0 2px rgba(253, 233, 146, 0.22);
}

.available-player-option input:checked + .available-player-content::after {
    color: var(--color-action);
}

.add-players-disclosure > summary {
    color: var(--color-action-ink);
    background: var(--color-action);
    border-color: var(--color-action);
}

.add-players-disclosure > summary:hover,
.add-players-disclosure[open] > summary {
    background: var(--color-action-hover);
    box-shadow: 0 5px 16px rgba(253, 233, 146, 0.24);
}

.game-settings-editor summary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #FFFFFF;
    list-style: none;
}

.game-settings-editor summary:hover {
    color: #FFFFFF;
}

.game-settings-editor input[name="small_blind"],
.game-settings-editor input[name="big_blind"],
.game-settings-editor input[name="base_buyin"],
.game-settings-editor input[name="small_blind"]:focus,
.game-settings-editor input[name="big_blind"]:focus,
.game-settings-editor input[name="base_buyin"]:focus {
    color: #FFFFFF;
    font-weight: 400;
}

.game-settings-editor summary::-webkit-details-marker {
    display: none;
}

.game-settings-editor summary::before {
    content: '▸';
    color: var(--color-action);
    transition: transform 0.16s ease;
}

.game-settings-editor[open] summary::before {
    transform: rotate(90deg);
}

.player-selector.needs-selection {
    border-radius: 10px;
    outline: 2px solid var(--color-negative);
    outline-offset: 4px;
    animation: selectionPrompt 0.28s ease-in-out 2 alternate;
}

@keyframes selectionPrompt {
    from { transform: translateX(0); }
    to { transform: translateX(4px); }
}

/* Subtle poker-table texture behind the opaque content surfaces. */
body {
    position: relative;
    background-color: #050505;
    background-image:
        radial-gradient(circle at 50% -8rem, rgba(253, 233, 146, 0.12), transparent 34rem),
        linear-gradient(#080807, #030303);
    background-position: center top, center;
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 36rem, 100% 100%;
}

body::before {
    content: '';
    position: fixed;
    z-index: 0;
    inset: 0;
    background-image:
        linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.42)),
        url("/images/dogs_playing_poker.webp"),
        radial-gradient(ellipse at center, #242126 0%, #050506 72%);
    background-position: center, center 44%, center;
    background-repeat: no-repeat;
    background-size: cover, cover, cover;
    filter: grayscale(1) brightness(0.46) contrast(1.1);
    opacity: 0.74;
    pointer-events: none;
}

@media (max-width: 700px) {
    body::before {
        background-position: center, center, center;
        background-size: cover, contain, cover;
    }
}

/* Recent-first, searchable player roster. */
.player-roster-header {
    align-items: center;
}

.player-roster-heading-tools {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.8rem;
}

.player-roster-search {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 0.38rem;
    padding: 0.36rem 0.58rem;
    color: var(--color-text-muted);
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--color-border-muted);
    border-radius: 9px;
}

.player-roster-search:focus-within {
    color: var(--color-action);
    border-color: color-mix(in srgb, var(--color-action) 62%, transparent);
    box-shadow: 0 0 0 3px rgba(253, 233, 146, 0.08);
}

.player-roster-search > span {
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1;
}

.player-roster-search input {
    width: 132px;
    padding: 0;
    color: #FFFFFF;
    background: transparent;
    border: 0;
    outline: 0;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 400;
}

.player-roster-search input::placeholder {
    color: var(--color-text-muted);
}

.player-roster-card[hidden],
.player-roster-no-results[hidden],
.roster-see-all[hidden] {
    display: none !important;
}

.player-roster-no-results {
    margin: 1rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    text-align: center;
}

.player-roster-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.9rem;
}

.roster-see-all {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.2rem 0;
    color: var(--color-action);
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 700;
}

.roster-see-all:hover {
    color: var(--color-action-hover);
    background: transparent;
}

.player-roster-footer:has(.roster-see-all[hidden]) {
    display: none;
}

.roster-see-all-arrow {
    display: inline-block;
    font-size: 0.9rem;
    transition: transform 0.18s ease;
    transform: translateY(-1px);
}

.roster-see-all.expanded .roster-see-all-arrow {
    transform: rotate(180deg) translateY(1px);
}

@media (max-width: 700px) {
    .player-roster-header {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .player-roster-heading-tools {
        width: 100%;
    }

    .player-roster-search {
        flex: 1;
    }

    .player-roster-search input {
        width: 100%;
    }

    .player-roster-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 600px) {
    .player-roster-card:nth-child(n + 5):not([data-roster-visible="true"]) {
        display: none;
    }
}

body > main {
    position: relative;
    z-index: 1;
}

/* Compact poker-chip wordmark. */
.nav-title {
    margin: 0;
    line-height: 1;
}

.brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.58rem;
    color: var(--color-text);
    text-decoration: none;
}

.brand-mark {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--color-action);
    background: rgba(253, 233, 146, 0.06);
    border: 1px solid rgba(253, 233, 146, 0.62);
    border-radius: 9px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.25rem;
    line-height: 1;
    transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.brand-mark::before {
    display: none;
}

.brand-name {
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    white-space: nowrap;
}

.brand-name strong {
    color: var(--color-action);
    font-weight: 700;
}

.brand-logo:hover .brand-mark {
    color: var(--color-money-soft);
    background: rgba(253, 233, 146, 0.12);
    border-color: var(--color-action);
}

/* Inline ledger tool for resolving an unmatched pot. */
.balance-helper {
    margin: 1.1rem 0 1.35rem;
    padding: 0;
    background: linear-gradient(145deg, rgba(30, 23, 37, 0.92), rgba(12, 10, 14, 0.96));
    border: 1px solid rgba(253, 233, 146, 0.36);
    border-radius: 12px;
    overflow: hidden;
}

.balance-helper-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    list-style: none;
    cursor: pointer;
    transition: background 0.18s ease;
}

.balance-helper-toggle::-webkit-details-marker {
    display: none;
}

.balance-helper-toggle:hover,
.balance-helper[open] > .balance-helper-toggle {
    background: rgba(253, 233, 146, 0.07);
}

.balance-helper-toggle > div {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.balance-helper-toggle > div > strong {
    color: #FFFFFF;
    font-size: 0.9rem;
}

.balance-helper-toggle > div > span {
    color: var(--color-text-muted);
    font-size: 0.74rem;
}

.balance-helper-summary-meta {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.6rem;
}

.balance-helper-difference {
    color: var(--color-negative);
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.balance-helper-caret {
    color: var(--color-action);
    font-size: 1.15rem;
    line-height: 1;
    transition: transform 0.18s ease;
}

.balance-helper[open] .balance-helper-caret {
    transform: rotate(180deg);
}

.balance-helper-content {
    padding: 1rem;
    border-top: 1px solid rgba(253, 233, 146, 0.22);
}

.balance-helper-explanation {
    margin-bottom: 0.9rem;
    color: var(--color-text-secondary);
    font-size: 0.86rem;
}

.balance-helper-explanation strong {
    color: var(--color-negative);
}

.balance-helper-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.balance-helper-options form {
    margin: 0;
}

.balance-split-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.18rem;
    width: 100%;
    min-height: 94px;
    padding: 0.78rem;
    color: #FFFFFF;
    background: rgba(253, 233, 146, 0.045);
    border: 1px solid rgba(253, 233, 146, 0.45);
    border-radius: 10px;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.balance-split-option:hover:not(:disabled) {
    background: rgba(253, 233, 146, 0.12);
    border-color: var(--color-action);
    transform: translateY(-1px);
}

.balance-split-option strong {
    color: var(--color-action);
    font-size: 0.88rem;
}

.balance-split-option span {
    color: var(--color-text-secondary);
    font-size: 0.76rem;
}

.balance-split-option small {
    margin-top: auto;
    color: var(--color-text-muted);
    font-size: 0.68rem;
}

.balance-split-option:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

.balance-helper-note {
    margin-top: 0.72rem;
    color: var(--color-text-muted);
    font-size: 0.72rem;
}

.balance-adjustment-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0 1.35rem;
    padding: 0.8rem 0.9rem;
    background: rgba(57, 255, 20, 0.055);
    border: 1px solid rgba(57, 255, 20, 0.3);
    border-radius: 10px;
}

.balance-adjustment-applied > div {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
}

.balance-adjustment-applied strong {
    color: var(--color-positive);
    font-size: 0.84rem;
}

.balance-adjustment-applied span {
    color: var(--color-text-secondary);
    font-size: 0.76rem;
}

.balance-adjustment-applied form {
    flex: 0 0 auto;
    margin: 0;
}

.balance-undo-button {
    color: var(--color-action);
    background: transparent;
    border: 1px solid var(--color-action);
}

.balance-undo-button:hover {
    color: var(--color-money-soft);
    background: rgba(253, 233, 146, 0.1);
}

/* Make settlements read as explicit payment directions. */
.settlement-instructions {
    margin-top: 1.5rem;
    padding: 1rem 0 0.15rem 1.05rem;
    background: linear-gradient(90deg, rgba(253, 233, 146, 0.075), transparent 62%);
    border: 0;
    border-left: 3px solid var(--color-action);
    border-radius: 0 10px 10px 0;
}

.settlement-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
    margin-bottom: 0.35rem;
}

.session-ledger .settlement-header h4 {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    color: #FFFFFF;
    text-transform: none;
    letter-spacing: normal;
}

.session-ledger .settlement-header h4::before {
    content: '✦';
    color: var(--color-action);
    font-size: 0.78rem;
    text-shadow: 0 0 9px rgba(253, 233, 146, 0.55);
}

.settlement-instructions .settlement-list {
    gap: 0;
}

.settlement-instructions .settlement-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    padding: 1rem 0.65rem 1rem 0.2rem;
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 0;
    box-shadow: none;
}

.settlement-instructions .settlement-item:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.11);
}

.settlement-party {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    min-width: 0;
}

.settlement-recipient {
    align-items: flex-end;
    text-align: right;
}

.settlement-recipient .player-name-with-card {
    flex-direction: row-reverse;
}

.settlement-party-label,
.settlement-action-label {
    color: var(--color-text-muted);
    font-size: 0.64rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.settlement-party .player-name-with-card {
    color: #FFFFFF;
}

.settlement-action {
    display: grid;
    position: static;
    z-index: 4;
    justify-items: center;
    gap: 0.12rem;
    min-width: 150px;
    padding: 0.15rem 0.45rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.settlement-action-copy {
    position: relative;
    z-index: 4;
    display: inline-flex;
    align-items: baseline;
    gap: 0.42rem;
}

.settlement-action .settlement-amount {
    color: var(--color-action);
    font-family: inherit;
    font-size: 1.08rem;
    font-weight: 800;
}

.settlement-money-route {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 18px;
    bottom: 0;
    left: 18px;
    display: block;
    width: auto;
    height: auto;
    overflow: hidden;
    pointer-events: none;
}

.settlement-flying-money {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 3px;
    display: inline-block;
    opacity: 0;
}

.settlement-flying-money-glyph {
    display: block;
    font-size: 1.45rem;
    line-height: 1;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.42));
}

.settlement-item.is-flying .settlement-flying-money {
    animation: settlementMoneyFlight 8s linear 1 both;
}

.settlement-item.is-flying .settlement-flying-money-glyph {
    animation: settlementMoneyFlutter 1.6s ease-in-out infinite alternate;
}

.settlement-party {
    position: relative;
    z-index: 4;
}

.settlement-recipient .player-card-icon {
    transform-origin: center bottom;
}

.settlement-item.is-flying .settlement-recipient .player-card-icon {
    animation: settlementRecipientDance 8s ease-in-out 1 both;
}

@keyframes settlementMoneyFlight {
    0% {
        opacity: 0;
        left: 48%;
        top: 48%;
    }
    12% {
        opacity: 0;
        left: 50%;
        top: 48%;
    }
    18% {
        opacity: 1;
        left: 54%;
        top: 44%;
    }
    34% {
        left: 65%;
        top: 10%;
    }
    52% {
        left: 77%;
        top: 58%;
    }
    68% {
        left: 88%;
        top: 16%;
    }
    82% {
        opacity: 1;
        left: calc(100% - 34px);
        top: 42%;
    }
    88%, 100% {
        opacity: 0;
        left: calc(100% - 34px);
        top: 42%;
    }
}

@keyframes settlementMoneyFlightDown {
    0% {
        opacity: 0;
        top: 46%;
    }
    12% {
        opacity: 0;
        top: 50%;
    }
    18% {
        opacity: 1;
        top: 54%;
    }
    38% {
        top: 63%;
    }
    58% {
        top: 76%;
    }
    72% {
        top: 86%;
    }
    82% {
        opacity: 1;
        top: calc(100% - 29px);
    }
    88%, 100% {
        opacity: 0;
        top: calc(100% - 29px);
    }
}

@keyframes settlementMoneyFlutter {
    from {
        transform: translateY(5px) rotate(-7deg) scale(0.96);
    }
    to {
        transform: translateY(-5px) rotate(7deg) scale(1.04);
    }
}

@keyframes settlementMoneyFlutterSideways {
    from {
        transform: translateX(-5px) rotate(-7deg) scale(0.96);
    }
    to {
        transform: translateX(5px) rotate(7deg) scale(1.04);
    }
}

@keyframes settlementRecipientDance {
    0%, 80%, 96%, 100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
    83% {
        transform: translateY(-6px) rotate(-8deg) scale(1.04);
    }
    86% {
        transform: translateY(-1px) rotate(8deg) scale(1);
    }
    89% {
        transform: translateY(-7px) rotate(-6deg) scale(1.05);
    }
    92% {
        transform: translateY(-1px) rotate(6deg) scale(1);
    }
    94% {
        transform: translateY(-4px) rotate(-3deg) scale(1.03);
    }
}

@media (prefers-reduced-motion: reduce) {
    .settlement-flying-money,
    .settlement-flying-money-glyph,
    .settlement-recipient .player-card-icon {
        display: none;
        animation: none;
    }

    .settlement-recipient .player-card-icon {
        display: inline-block;
    }
}

@media (max-width: 700px) {
    .balance-helper-options {
        grid-template-columns: 1fr;
    }

    .balance-split-option {
        min-height: 0;
    }

    .balance-adjustment-applied,
    .settlement-header {
        align-items: stretch;
        flex-direction: column;
    }

    .balance-adjustment-applied .btn {
        width: 100%;
    }

    .settlement-instructions .settlement-item {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .settlement-recipient {
        align-items: flex-start;
        text-align: left;
    }

    .settlement-recipient .player-name-with-card {
        flex-direction: row;
    }

    .settlement-action {
        position: static;
        justify-items: start;
        min-width: 0;
        min-height: 0;
        padding-left: 0;
    }

    .settlement-money-route {
        top: 1rem;
        right: auto;
        bottom: 1rem;
        left: 0.8rem;
        width: 34px;
        height: auto;
        margin: 0;
        transform: none;
    }

    .settlement-instructions .settlement-item.is-flying .settlement-flying-money {
        top: 2px;
        left: 5px;
        animation-name: settlementMoneyFlightDown;
    }

    .settlement-item.is-flying .settlement-flying-money-glyph {
        animation-name: settlementMoneyFlutterSideways;
    }
}

/* Session state treatment: full contrast in both states, distinct atmosphere. */
.session-completed-page {
    background-color: #060506;
    background-image:
        radial-gradient(circle at 50% -8rem, rgba(253, 233, 146, 0.08), transparent 36rem),
        linear-gradient(#0B090C, #040304);
}

.session-completed-page::before {
    filter: grayscale(1) brightness(0.4) contrast(1.1);
    opacity: 0.66;
}

.session-completed-page .page-header {
    padding: 1rem 1.15rem;
    background: linear-gradient(135deg, #19151C, #100E12);
    border: 1px solid #4D4352;
    border-left: 4px solid var(--color-action);
    border-radius: 13px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
}

.balance-status.balanced,
.session-completed-page .completed-badge {
    color: var(--color-positive);
    background: #1C1B12;
    border: 1px solid var(--color-positive);
    border-radius: 9999px;
    box-shadow: none;
    letter-spacing: normal;
    justify-content: center;
    width: 128px;
    height: 38px;
    padding: 0 1rem;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

.btn-outline-action {
    color: var(--color-action);
    background: transparent;
    border: 1px solid var(--color-action);
    box-shadow: none;
}

.btn-outline-action:hover {
    color: var(--color-money-soft);
    background: rgba(253, 233, 146, 0.09);
    border-color: var(--color-action-hover);
}

.btn-outline-action:disabled,
.btn-outline-action:disabled:hover {
    color: rgba(253, 233, 146, 0.42);
    background: transparent;
    border-color: rgba(253, 233, 146, 0.34);
    cursor: not-allowed;
}

.btn-outline-danger {
    color: var(--color-negative);
    background: transparent;
    border: 1px solid var(--color-negative);
    box-shadow: none;
}

.btn-outline-danger:hover {
    color: var(--color-negative);
    background: rgba(254, 28, 21, 0.1);
    border-color: var(--color-negative);
}

.btn-outline-danger:disabled,
.btn-outline-danger:disabled:hover {
    color: rgba(254, 28, 21, 0.48);
    background: transparent;
    border-color: rgba(254, 28, 21, 0.42);
    cursor: not-allowed;
}

.completed-notice {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: #F0E8F7;
    background: linear-gradient(135deg, #1B171E, #110F13);
    border: 1px solid #514657;
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
}

.completed-notice-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: #160D1D;
    background: var(--color-action);
    border-radius: 50%;
    font-weight: 900;
}

.completed-notice-copy {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.completed-notice-copy strong {
    color: #FFFFFF;
    font-size: 0.95rem;
}

.completed-notice-copy span {
    color: #CDBDD8;
    font-size: 0.82rem;
}

.session-completed-page .card,
.session-completed-page .ledger-summary {
    background: linear-gradient(145deg, #171419, #100E11);
    border-color: #403943;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

.session-completed-page .game-setting,
.session-completed-page .transaction-item,
.session-completed-page .settlement-item,
.session-completed-page .player-chip,
.session-completed-page .data-table th {
    background: #1B171E;
    border-color: #443B48;
}

.session-completed-page .data-table td,
.session-completed-page .ledger-players {
    border-color: #373139;
}

/* Per-session audit side drawer. */
.audit-panel-open {
    overflow: hidden;
}

body.audit-panel-open > main {
    z-index: 1200;
}

.audit-drawer-toggle {
    position: fixed;
    z-index: 1040;
    top: 50%;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    width: 58px;
    padding: 0.8rem 0.45rem;
    color: var(--color-action-ink);
    background: var(--color-action);
    border: 1px solid var(--color-action-hover);
    border-right: 0;
    border-radius: 12px 0 0 12px;
    box-shadow: -5px 8px 22px rgba(0, 0, 0, 0.38);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background 0.18s ease, transform 0.18s ease;
}

.audit-drawer-toggle:hover {
    background: var(--color-action-hover);
    transform: translateY(-50%) translateX(-3px);
}

.audit-toggle-icon {
    font-size: 1.2rem;
    line-height: 1;
}

.audit-toggle-count {
    min-width: 1.45rem;
    padding: 0.1rem 0.32rem;
    color: #FFFFFF;
    background: rgba(22, 10, 32, 0.72);
    border-radius: 999px;
    font-size: 0.68rem;
}

.audit-drawer-backdrop {
    position: fixed;
    z-index: 1050;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.audit-panel-open .audit-drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
}

.session-audit-panel {
    position: fixed;
    z-index: 1060;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    width: min(440px, calc(100vw - 24px));
    height: 100vh;
    height: 100dvh;
    color: var(--color-text);
    background: #100E12;
    border-left: 1px solid #4B4050;
    box-shadow: -18px 0 50px rgba(0, 0, 0, 0.5);
    visibility: hidden;
    transform: translateX(104%);
    transition: transform 0.24s ease, visibility 0.24s;
}

.session-audit-panel.is-open {
    visibility: visible;
    transform: translateX(0);
}

.session-audit-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
    background: #17131A;
    border-bottom: 1px solid #403743;
}

.session-audit-header h3 {
    color: #FFFFFF;
    margin-bottom: 0.2rem;
}

.session-audit-header p {
    color: var(--color-text-muted);
    font-size: 0.88rem;
}

.audit-drawer-close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid #514657;
    border-radius: 50%;
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
}

.audit-drawer-close:hover {
    color: #FFFFFF;
    background: rgba(253, 233, 146, 0.1);
    border-color: var(--color-action);
}

.audit-close-mobile {
    display: none;
}

.audit-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.1rem 1.35rem 1.5rem;
}

.audit-event-count {
    display: inline-flex;
    padding: 0.28rem 0.7rem;
    margin-bottom: 1rem;
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--color-border-muted);
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.audit-timeline {
    position: relative;
    display: grid;
    gap: 0.75rem;
    padding-left: 1.4rem;
}

.audit-timeline::before {
    content: '';
    position: absolute;
    top: 0.65rem;
    bottom: 0.65rem;
    left: 0.35rem;
    width: 1px;
    background: #45414B;
}

.audit-event {
    position: relative;
    padding: 0.9rem 1rem;
    background: rgba(5, 5, 5, 0.72);
    border: 1px solid var(--color-border-muted);
    border-radius: 10px;
}

.audit-event-marker {
    position: absolute;
    top: 1.15rem;
    left: -1.38rem;
    width: 0.72rem;
    height: 0.72rem;
    background: #8E8796;
    border: 2px solid #101012;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #5C5663;
}

.audit-event-add .audit-event-marker,
.audit-event-restore .audit-event-marker {
    background: var(--color-positive);
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.45);
}

.audit-event-edit .audit-event-marker {
    background: var(--color-action);
    box-shadow: 0 0 10px rgba(253, 233, 146, 0.4);
}

.audit-event-delete .audit-event-marker {
    background: var(--color-negative);
    box-shadow: 0 0 10px rgba(254, 28, 21, 0.4);
}

.audit-event-state .audit-event-marker {
    background: #FFFFFF;
    box-shadow: 0 0 9px rgba(255, 255, 255, 0.28);
}

.audit-event-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.audit-event-heading strong {
    color: #FFFFFF;
    font-size: 0.94rem;
}

.audit-event-heading .transaction-time {
    flex: 0 0 auto;
    margin-top: 0;
    color: var(--color-text-muted);
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.audit-event-player {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.55rem;
    color: #FFFFFF;
    font-size: 0.88rem;
    font-weight: 650;
}

.audit-event-player .player-card-icon {
    flex: 0 0 auto;
}

.audit-event-content > p {
    margin-top: 0.45rem;
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: 0.82rem;
}

.session-completed-page .audit-event {
    background: #1B171E;
    border-color: #443B48;
}

.session-completed-page .session-audit-panel {
    background: #100E11;
    border-color: #443B48;
}

.session-completed-page .audit-timeline::before {
    background: #4E4452;
}

@media (max-width: 600px) {
    .audit-drawer-toggle {
        top: auto;
        right: 1rem;
        bottom: 1rem;
        flex-direction: row;
        width: auto;
        padding: 0.65rem 0.85rem;
        border-right: 1px solid var(--color-action-hover);
        border-radius: 999px;
        transform: none;
    }

    .audit-drawer-toggle:hover {
        transform: translateY(-2px);
    }

    .session-audit-panel {
        width: 100vw;
    }

    .session-audit-header {
        align-items: flex-start;
        padding: max(0.9rem, env(safe-area-inset-top)) 1rem 0.9rem;
    }

    .audit-drawer-close {
        width: auto;
        min-width: 44px;
        height: 44px;
        padding: 0.48rem 0.72rem;
        border-radius: 999px;
        font-family: var(--font-body);
        font-size: 0.72rem;
    }

    .audit-close-desktop {
        display: none;
    }

    .audit-close-mobile {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        white-space: nowrap;
    }

    .audit-event-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.4rem;
    }

    .audit-event-heading .transaction-time {
        order: -1;
    }
}

/* Keep money typography consistent across the Players screens. */
.player-total-amount,
.extreme-amount {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
}

.lifetime-pl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.lifetime-pl-header h3 {
    margin: 0;
}

.lifetime-chart-legend {
    display: flex;
    gap: 0.85rem;
    color: #FFFFFF;
    font-size: 0.72rem;
}

.lifetime-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.legend-swatch {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 3px;
}

.legend-profit {
    background: var(--color-positive);
}

.legend-loss {
    background: var(--color-negative);
}

.lifetime-chart-container {
    width: 100%;
    margin-bottom: 1.25rem;
    padding: 0.45rem;
    overflow-x: auto;
    background: rgba(255, 255, 255, 0.018);
    border: 1px solid var(--color-border-muted);
    border-radius: 10px;
}

.lifetime-chart-container canvas {
    display: block;
    width: 100%;
}

.player-total-amount {
    color: var(--color-text);
}

.player-detail-page .page-header h2,
.player-detail-page .card h3,
.player-detail-page .player-card-help,
.player-detail-page .form-group label,
.player-detail-page .stat-label,
.player-detail-page .stat-value,
.player-detail-page .stat-sublabel,
.player-detail-page .data-table th,
.player-detail-page .data-table td,
.player-detail-page .data-table a,
.player-detail-page .money-amount,
.player-detail-page .positive,
.player-detail-page .negative,
.player-detail-page .empty-text {
    color: #FFFFFF !important;
}

.player-detail-page .session-history-pl.positive {
    color: var(--color-positive) !important;
}

.player-detail-page .session-history-pl.negative {
    color: var(--color-negative) !important;
}

.player-detail-page .session-history-pl.zero {
    color: #FFFFFF !important;
}

.player-detail-page .data-table .session-history-date {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.22rem;
    color: var(--color-action) !important;
}

.session-date-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.28rem;
}

.same-day-session-label {
    display: inline-flex;
    align-items: center;
    padding: 0.16rem 0.46rem;
    color: var(--color-action);
    background: rgba(253, 233, 146, 0.1);
    border: 1px solid rgba(253, 233, 146, 0.3);
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
}

.player-detail-page .same-day-session-label {
    color: #AAA7A0;
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.14);
}

.player-detail-page .stats-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.player-detail-page .stats-overview .stat-value {
    color: var(--color-action) !important;
}

.player-detail-page .stats-overview .stat-card.positive .stat-value {
    color: var(--color-positive) !important;
}

.player-detail-page .stats-overview .stat-card.negative .stat-value {
    color: var(--color-negative) !important;
}

.player-detail-page .stats-overview .stat-card.zero .stat-value {
    color: #FFFFFF !important;
}

/* Swipeable card carousel used in both player editing surfaces. */
.card-slider-picker {
    display: block;
    width: min(380px, 100%);
}

.card-picker-face {
    position: relative;
    overflow: hidden;
    width: 100%;
    background: linear-gradient(155deg, rgba(35, 32, 38, 0.96), rgba(13, 12, 15, 0.97));
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 28px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 20px 46px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(20px) saturate(1.15);
    -webkit-backdrop-filter: blur(20px) saturate(1.15);
}

.card-picker-zone {
    padding: 0.95rem 1rem;
}

.card-picker-rank-zone {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.card-picker-suit-zone {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.card-slider-preview {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1.05rem;
    min-height: 158px;
    padding: 1.15rem;
}

.card-slider-preview .player-card-icon {
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(255, 255, 255, 0.08);
}

.card-slider-preview .player-card-large {
    width: 88px;
    height: 123px;
    border-radius: 11px;
}

.card-carousel-controls {
    display: grid;
    gap: 0.9rem;
    min-width: 0;
}

.card-option-carousel {
    min-width: 0;
}

.card-carousel-label {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.38rem;
}

.card-carousel-label > span {
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
}

.card-carousel-label output {
    display: none;
}

.card-carousel-shell {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 0.42rem;
    min-width: 0;
}

.card-carousel-track {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0.28rem;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.028));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.card-carousel-track::-webkit-scrollbar {
    display: none;
}

.card-carousel-option {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 0.55rem;
    color: rgba(255, 255, 255, 0.68);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    box-shadow: none;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1;
    opacity: 1;
    cursor: default;
    transform: none;
    transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

.card-carousel-option:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.07);
    opacity: 0.9;
}

.card-carousel-option.selected {
    display: inline-flex;
    color: #FFFFFF;
    background: linear-gradient(180deg, rgba(253, 233, 146, 0.24), rgba(253, 233, 146, 0.14));
    border-color: rgba(253, 233, 146, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 4px 14px rgba(173, 145, 53, 0.22);
    opacity: 1;
    transform: none;
}

.card-carousel-option:focus-visible,
.card-carousel-arrow:focus-visible {
    outline: 2px solid var(--color-action-hover);
    outline-offset: 2px;
}

.card-suit-carousel .card-carousel-option {
    flex-basis: 88px;
    gap: 0.32rem;
    font-size: 0.72rem;
}

.card-carousel-suit-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #FFFFFF;
    border-radius: 6px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1rem;
}

.card-carousel-option[data-card-value="spades"] .card-carousel-suit-symbol {
    color: #171713;
}

.card-carousel-option[data-card-value="hearts"] .card-carousel-suit-symbol {
    color: #D92E49;
}

.card-carousel-option[data-card-value="diamonds"] .card-carousel-suit-symbol {
    color: #D92E49;
}

.card-carousel-option[data-card-value="clubs"] .card-carousel-suit-symbol {
    color: #171713;
}

.card-carousel-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.card-carousel-arrow:hover {
    color: #FFFFFF;
    background: rgba(253, 233, 146, 0.16);
    border-color: rgba(253, 233, 146, 0.55);
    transform: scale(1.04);
}

.player-card-form {
    display: flex;
    justify-content: center;
    width: min(380px, 100%);
}

.player-card-form .card-slider-picker {
    flex: 1 1 auto;
}

.player-card-quick-form .card-slider-picker {
    width: 100%;
}

.player-card-popover {
    width: min(400px, calc(100vw - 2rem));
}

.player-profile-section {
    position: relative;
    z-index: 50;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem;
    padding: 1.75rem 2rem;
    overflow: visible;
}

.player-profile-avatar {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    line-height: 0;
}

.player-profile-copy {
    min-width: 0;
}

.player-profile-eyebrow {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--color-action);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.player-profile-copy h2 {
    margin: 0 0 0.32rem;
    overflow: hidden;
    color: #FFFFFF;
    font-size: clamp(1.55rem, 3vw, 2.25rem);
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-icon-editor {
    position: relative;
}

.profile-icon-editor > summary {
    display: inline-flex;
    min-height: 22px;
    padding: 0.15rem 0.42rem;
    list-style: none;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

.profile-icon-editor > summary::-webkit-details-marker {
    display: none;
}

.profile-icon-editor[open] > summary {
    color: var(--color-action-ink);
    background: var(--color-action);
}

.profile-icon-editor-popover {
    position: absolute;
    z-index: 40;
    top: calc(100% + 0.75rem);
    right: auto;
    left: 0;
    width: min(420px, calc(100vw - 2rem));
    padding: 1rem;
    background: rgba(12, 11, 14, 0.96);
    border: 1px solid rgba(253, 233, 146, 0.32);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.profile-icon-editor-header {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.8rem;
}

.profile-icon-editor-header strong {
    color: #FFFFFF;
    font-size: 0.92rem;
}

.profile-icon-editor-header span {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.72rem;
}

@media (max-width: 700px) {
    .player-profile-section {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 1rem;
        padding: 1.35rem;
    }

    .profile-icon-editor-popover {
        position: fixed;
        top: 50%;
        right: auto;
        left: 50%;
        max-height: 88vh;
        overflow-y: auto;
        transform: translate(-50%, -50%);
    }
}

.player-profile-section .player-card-help {
    margin: 0;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.76rem;
    text-align: center;
}

/* Compact roster actions and full-color player identities. */
.player-roster-section {
    position: relative;
    z-index: 40;
    overflow: visible;
}

.player-roster-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.player-roster-actions > span {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.roster-add-player {
    position: relative;
}

.roster-add-player > summary {
    min-height: 32px;
    padding: 0.32rem 0.68rem;
    list-style: none;
    white-space: nowrap;
}

.roster-add-player > summary::-webkit-details-marker {
    display: none;
}

.roster-add-player-popover {
    position: absolute;
    z-index: 60;
    top: calc(100% + 0.65rem);
    right: 0;
    width: min(290px, calc(100vw - 2rem));
    padding: 1rem;
    background: rgba(11, 10, 13, 0.97);
    border: 1px solid rgba(253, 233, 146, 0.32);
    border-radius: 16px;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5);
}

.roster-add-player-popover > strong,
.roster-add-player-popover > span {
    display: block;
}

.roster-add-player-popover > strong {
    color: #FFFFFF;
    font-size: 0.9rem;
}

.roster-add-player-popover > span {
    margin: 0.18rem 0 0.8rem;
    color: var(--color-text-muted);
    font-size: 0.7rem;
}

.roster-add-player-form .form-group {
    margin-bottom: 0.65rem;
}

.roster-add-player-form .btn {
    width: 100%;
}

.player-roster-card,
.player-roster-profile-link,
.player-card-icon {
    filter: none !important;
    opacity: 1 !important;
}

/* Centered player identity with earned badges flanking it. */
.player-profile-section {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr);
    align-items: center;
    gap: clamp(0.7rem, 3vw, 2rem);
    text-align: center;
}

.player-profile-copy {
    text-align: center;
}

.player-profile-identity {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.player-profile-badges {
    display: grid;
    grid-template-columns: minmax(170px, 205px);
    gap: 0.55rem;
}

.player-profile-badges-right {
    justify-self: end;
}

.player-achievement-badge {
    --award-color: #FDE992;
    position: relative;
    display: flex;
    width: min(205px, 100%);
    min-height: 48px;
    align-items: center;
    gap: 0.55rem;
    padding: 0.48rem 1rem;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--award-color) 30%, #111014),
        rgba(13, 12, 16, 0.96) 72%
    );
    border-top: 1px solid var(--award-color);
    border-bottom: 1px solid var(--award-color);
    clip-path: polygon(8px 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 8px 100%, 0 50%);
    box-shadow: 0 0 15px color-mix(in srgb, var(--award-color) 24%, transparent);
    text-align: left;
}

.player-achievement-emblem {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--award-color);
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid color-mix(in srgb, var(--award-color) 70%, #FFFFFF);
    border-radius: 7px;
    box-shadow: inset 0 0 8px color-mix(in srgb, var(--award-color) 18%, transparent);
    font-size: 0.95rem;
    font-weight: 900;
}

.player-achievement-emblem::before,
.player-achievement-emblem::after {
    display: none;
}

.player-achievement-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.08rem;
}

.player-achievement-copy strong {
    color: #FFFFFF;
    font-size: 0.7rem;
    line-height: 1.18;
}

.player-achievement-copy small {
    color: var(--award-color);
    font-size: 0.62rem;
    font-weight: 800;
}

/* One colored timeline per player. */
.lifetime-pl-header {
    align-items: stretch;
    flex-direction: column;
}

.lifetime-chart-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.5rem;
    width: 100%;
}

.lifetime-chart-player {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.15rem;
    color: #FFFFFF;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: default;
    text-decoration: none;
}

.lifetime-chart-player .player-card-icon {
    width: 24px;
    height: 34px;
}

.legend-line {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 26px;
    height: 3px;
    background: var(--series-color);
    border-radius: 999px;
    box-shadow: 0 0 7px var(--series-color);
}

.legend-line::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    background: var(--series-color);
    border: 1px solid #FFFFFF;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.legend-player-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.08rem;
}

.legend-player-copy strong {
    max-width: 100%;
    overflow: hidden;
    color: #FFFFFF;
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.legend-player-copy small {
    color: var(--series-color);
    font-size: 0.66rem;
    font-weight: 750;
}

/* Let the poker artwork show subtly through the main section surfaces. */
.card,
.overview-card,
.stat-card,
.ledger-summary,
.session-ledger {
    background: rgba(6, 6, 8, 0.41);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 10px 28px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(3px) saturate(0.86);
    -webkit-backdrop-filter: blur(3px) saturate(0.86);
}

.session-card:hover,
.session-card.session-completed {
    background: rgba(8, 7, 10, 0.41);
}

.session-card {
    background: rgba(6, 6, 8, 0.24);
}

.stat-card.positive,
.stat-card.negative {
    background: rgba(6, 6, 8, 0.41);
}

.player-roster-grid,
.game-setting,
.transaction-item,
.player-chip {
    background: rgba(6, 6, 8, 0.21);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.session-completed-page .card,
.session-completed-page .ledger-summary {
    background: rgba(12, 9, 14, 0.45);
    border-color: rgba(253, 233, 146, 0.2);
}

.session-completed-page .game-setting,
.session-completed-page .transaction-item,
.session-completed-page .settlement-item,
.session-completed-page .player-chip,
.session-completed-page .data-table th {
    background: rgba(12, 9, 14, 0.27);
}

/* Keep completed payment flows integrated with the surrounding ledger. */
.session-completed-page .settlement-instructions {
    background: linear-gradient(90deg, rgba(253, 233, 146, 0.095), transparent 68%);
    border: 0;
    border-left: 3px solid var(--color-action);
    box-shadow: none;
}

.session-completed-page .settlement-instructions .settlement-item {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

.session-completed-page .settlement-action {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.session-completed-page .settlement-action-label {
    color: var(--color-text-muted);
}

.session-completed-page .settlement-action .settlement-amount {
    font-family: inherit;
    color: var(--color-action);
}

/* Compact, live awards for each session. */
.game-awards {
    margin-top: 1.4rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.game-awards-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.session-ledger .game-awards-header h4 {
    margin: 0;
}

.game-awards-header p {
    margin: 0.2rem 0 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.78rem;
}

.game-awards-header > span {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.54);
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.game-awards-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
}

.game-award {
    --award-color: #FDE992;
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 0.85rem;
    background: rgba(8, 7, 10, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 15px;
}

.game-award::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    background: var(--award-color);
    box-shadow: 0 0 12px var(--award-color);
}

.game-award-highest-cashout {
    --award-color: #FF7DE3;
}

.game-award-top-winner {
    --award-color: var(--color-positive);
}

.game-award-most-buyins {
    --award-color: #FFB86B;
}

.game-award-topline {
    display: flex;
    align-items: center;
    gap: 0.58rem;
}

.game-award-emblem {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: var(--award-color);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--award-color);
    border-radius: 50%;
    font-size: 1.15rem;
    font-weight: 850;
    line-height: 1;
}

.game-award-heading {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.05rem;
}

.game-award-heading strong {
    overflow: hidden;
    color: #FFFFFF;
    font-size: 0.76rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-award-heading small {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.62rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-award-value {
    display: block;
    margin: 0.72rem 0 0.55rem;
    color: var(--award-color);
    font-family: var(--font-numbers);
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1;
}

.game-award-winners {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.game-award-player {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.5rem 0.3rem 0.34rem;
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    font-size: 0.7rem;
    font-weight: 700;
    text-decoration: none;
}

.game-award-player:hover {
    color: #FFFFFF;
    border-color: var(--award-color);
}

.game-award-player .player-card-icon {
    width: 28px;
    height: 39px;
    border-radius: 4px;
}

.game-award-player .player-card-corner {
    transform: scale(0.86);
    transform-origin: top left;
}

.game-award-player .player-card-corner-bottom {
    transform: rotate(180deg) scale(0.86);
    transform-origin: center;
}

.game-award-player .player-card-center-suit {
    font-size: 0.9rem;
}

.game-award-tie {
    display: block;
    margin-top: 0.42rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .game-awards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .game-awards-grid {
        grid-template-columns: 1fr;
    }

    .game-awards-header {
        align-items: flex-start;
    }
}

/* One-click completion result: settlement instructions appear immediately. */
.completion-settlement-modal {
    z-index: 2000;
}

body.completion-modal-open {
    overflow: hidden;
}

body.completion-modal-open > main {
    z-index: 1600;
}

.completion-settlement-content {
    width: min(620px, calc(100vw - 2rem));
    max-width: 620px;
    overflow: hidden;
    background: linear-gradient(150deg, rgba(30, 29, 24, 0.98), rgba(10, 10, 9, 0.99));
    border: 1px solid color-mix(in srgb, var(--color-action) 58%, transparent);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.68), 0 0 30px rgba(253, 233, 146, 0.08);
}

.completion-settlement-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.7rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--color-border-muted);
}

.completion-settlement-heading {
    min-width: 0;
}

.completion-settlement-header h3 {
    display: flex;
    margin: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    color: #FFFFFF;
    font-size: 1.05rem;
}

.completion-title-check {
    color: var(--color-positive);
    font-size: 1.05em;
    font-weight: 900;
}

.completion-settlement-heading p {
    margin: 0.16rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    line-height: 1.35;
}

.completion-settlement-close {
    position: relative;
    z-index: 2;
    display: inline-flex;
    width: 30px;
    height: 30px;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
}

.completion-settlement-close:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.08);
}

.completion-settlement-body {
    display: grid;
    gap: 0.7rem;
    max-height: min(58vh, 430px);
    padding: 1rem 1.15rem;
    overflow-y: auto;
}

.completion-settlement-title {
    margin: 0 0 0.15rem;
    color: #FFFFFF;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
}

.completion-settlement-note {
    margin: -0.05rem 0 0.25rem;
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: 0.76rem;
    line-height: 1.45;
}

.completion-payment {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.8rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.completion-payment-party {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-direction: row;
    gap: 0.5rem;
    color: #FFFFFF;
    text-align: left;
}

.completion-payment-party strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.completion-payment-recipient {
    justify-content: flex-end;
}

.completion-payment-recipient .completion-payment-player-copy {
    align-items: flex-end;
    text-align: right;
}

.completion-payment-transfer {
    display: flex;
    align-self: stretch;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.02rem;
    color: var(--color-text-muted);
    font-size: 0.62rem;
    line-height: 1.15;
    text-transform: uppercase;
}

.completion-payment-transfer strong {
    color: var(--color-action);
    font-family: var(--font-numbers);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0;
    transform: translateY(2px);
}

.completion-payment-transfer > span:last-child {
    color: #FFFFFF;
    font-size: 1.05rem;
}

.completion-no-payments {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 90px;
    color: #FFFFFF;
}

.completion-no-payments > span {
    color: var(--color-positive);
    font-weight: 900;
}

.completion-confirmation-only {
    display: flex;
    min-height: 90px;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    color: #FFFFFF;
    text-align: center;
}

.completion-confirmation-only > span {
    color: var(--color-positive);
    font-weight: 900;
}

.completion-settlement-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0.85rem 1.15rem 1rem;
    border-top: 1px solid var(--color-border-muted);
}

@media (max-width: 560px) {
    .completion-settlement-modal {
        padding: max(0.5rem, env(safe-area-inset-top)) 0.5rem
                 max(0.5rem, env(safe-area-inset-bottom));
    }

    .completion-settlement-content {
        width: 100%;
        max-height: calc(100dvh - 1rem);
        margin: 0;
    }

    .completion-settlement-close {
        width: 44px;
        height: 44px;
        margin: -0.45rem -0.45rem -0.45rem 0;
        font-size: 1.6rem;
    }

    .completion-payment {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 0.4rem;
        padding: 0.65rem 0.5rem;
    }

    .completion-payment-party {
        flex-direction: row;
        gap: 0.25rem;
        text-align: left;
    }

    .completion-payment-recipient {
        justify-content: flex-end;
    }
}

@media (max-width: 600px) {
    .player-roster-header {
        align-items: center;
    }

    .player-roster-actions > span {
        display: none;
    }

    .roster-add-player-popover {
        position: fixed;
        top: 50%;
        right: auto;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

@media (max-width: 520px) {
    .lifetime-pl-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.45rem;
    }

    .player-card-form {
        width: 100%;
    }

    .card-slider-picker {
        width: 100%;
    }

    .card-slider-preview {
        gap: 0.85rem;
        padding-inline: 0.9rem;
    }

    .card-profile-copy > strong {
        max-width: 150px;
        font-size: 1.15rem;
    }

    .player-card-icon.player-card-profile {
        width: 82px;
        height: 115px;
    }

    .card-carousel-shell {
        display: grid;
    }

    .card-carousel-arrow {
        display: inline-flex;
    }

    .player-detail-page .stats-overview {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 521px) and (max-width: 800px) {
    .player-detail-page .stats-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Permanent arrow-only controls: rank above the card, suit below it. */
.player-profile-card-form,
.player-profile-card-form .card-slider-picker {
    width: auto;
}

.profile-card-picker .card-picker-face {
    position: relative;
    display: grid;
    grid-template-rows: 40px auto 40px;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 270px;
    min-height: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.profile-card-picker .card-slider-preview {
    min-height: 0;
    padding: 4px 0;
}

.profile-card-picker .card-picker-zone {
    position: static;
    z-index: 3;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    align-items: center;
    width: 100%;
    padding: 0;
    border: 0;
    pointer-events: none;
}

.profile-card-picker .card-picker-rank-zone {
    top: auto;
}

.profile-card-picker .card-picker-suit-zone {
    bottom: auto;
}

.profile-card-picker .card-carousel-track {
    display: none;
}

.profile-card-picker .card-carousel-label {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    justify-content: center;
    margin: 0;
    pointer-events: none;
}

.profile-card-picker .card-carousel-label > span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.1em;
}

.profile-card-picker .card-carousel-shell {
    display: contents;
}

.profile-card-picker .card-carousel-shell .card-carousel-arrow:first-child {
    grid-column: 1;
    grid-row: 1;
}

.profile-card-picker .card-carousel-shell .card-carousel-arrow:last-child {
    grid-column: 3;
    grid-row: 1;
}

.profile-card-picker .card-carousel-arrow {
    display: inline-flex;
    width: 40px;
    height: 40px;
    color: var(--color-action);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 1.45rem;
    font-weight: 950;
    pointer-events: auto;
}

.card-color-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.85rem;
}

.card-color-control {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
}

.card-color-control input[type="color"] {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(253, 233, 146, 0.1);
    cursor: pointer;
}

.card-color-control input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.card-color-control input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 50%;
}

.card-color-control input[type="color"]::-moz-color-swatch {
    border: 0;
    border-radius: 50%;
}

.card-color-control input[type="color"]:focus-visible {
    outline: 3px solid var(--color-action);
    outline-offset: 3px;
}

.profile-card-picker .card-carousel-arrow:hover {
    color: var(--color-action-hover);
    background: transparent;
    border-color: transparent;
    transform: scale(1.16);
}

.player-profile-card-form {
    margin: 0 0 16px;
}

@media (max-width: 600px) {
    .player-profile-card-form {
        margin-bottom: 12px;
    }
}

/* Completed-session awards sit directly beside each player's name. */
.ledger-player-name {
    flex-wrap: wrap;
}

.player-inline-awards {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    margin-left: 0.18rem;
}

.player-inline-award {
    --award-color: #FDE992;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 23px;
    padding: 0.16rem 0.62rem;
    color: var(--award-color);
    background: color-mix(in srgb, var(--award-color) 16%, #111014);
    border-top: 1px solid var(--award-color);
    border-bottom: 1px solid var(--award-color);
    clip-path: polygon(5px 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 5px 100%, 0 50%);
    box-shadow: 0 0 8px color-mix(in srgb, var(--award-color) 20%, transparent);
    font-size: 0.62rem;
    font-weight: 900;
    line-height: 1;
}

.player-inline-award::before,
.player-inline-award::after {
    display: none;
}

.player-inline-award-symbol {
    font-size: 0.86rem;
}

.player-inline-award-label {
    color: #FFFFFF;
    font-size: 0.56rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Session state now reads from the In Progress / Complete badge alone; the
   tile itself keeps its plain default border and accent stripe either way. */
.session-card.session-completed,
.session-card.session-completed:hover {
    border-color: var(--color-border-muted);
}

.session-card.session-completed::before {
    display: none;
}

.session-card.session-completed .session-badge {
    color: var(--color-positive);
}

.session-completed-page .completed-badge {
    color: #071204;
    background: var(--color-positive);
    border-color: var(--color-positive);
    box-shadow: 0 0 14px rgba(57, 255, 20, 0.28);
    font-family: var(--font-display);
}

@media (max-width: 600px) {
    .player-profile-section {
        grid-template-columns: 1fr;
        gap: 0.8rem;
        padding-inline: 0.7rem;
    }

    .player-profile-badge-spacer {
        display: none;
    }

    .player-profile-badges-right {
        grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
        justify-self: stretch;
        width: 100%;
        max-width: 360px;
        margin-inline: auto;
    }

    .player-profile-card-form,
    .player-profile-card-form .card-slider-picker {
        width: auto;
    }

    .profile-card-picker .card-picker-face {
        width: 220px;
        min-height: 0;
        gap: 0.8rem;
    }

    .profile-card-picker .card-picker-rank-zone {
        top: auto;
    }

    .profile-card-picker .card-picker-suit-zone {
        bottom: auto;
    }

    .profile-card-picker .card-carousel-arrow {
        width: 34px;
        height: 34px;
    }

    .player-achievement-badge {
        width: 100%;
        min-height: 44px;
        gap: 0.45rem;
        padding: 0.4rem 0.8rem;
        text-align: left;
    }

    .player-achievement-emblem {
        width: 27px;
        height: 27px;
        font-size: 0.86rem;
    }

    .player-achievement-copy strong {
        font-size: 0.58rem;
    }

    .player-achievement-copy small {
        font-size: 0.54rem;
    }
}

/* Keep the audit trigger with the other session actions; the drawer still
   enters from the right edge. */
.header-actions .btn-outline-action,
.header-actions .audit-drawer-toggle {
    position: static;
    z-index: auto;
    flex-direction: row;
    width: auto;
    min-height: 38px;
    padding: 0.52rem 0.78rem;
    color: var(--color-action);
    background: transparent;
    border: 1px solid var(--color-action);
    border-radius: 9px;
    box-shadow: none;
    font-size: 0.78rem;
    transform: none;
}

.header-actions .btn-outline-action:hover,
.header-actions .audit-drawer-toggle:hover {
    color: var(--color-action-ink);
    background: var(--color-action);
    transform: translateY(-1px);
}

.header-actions .audit-toggle-icon {
    font-size: 1rem;
}

.header-actions .audit-toggle-count {
    min-width: 1.3rem;
    color: #FFFFFF;
    background: rgba(253, 233, 146, 0.22);
}

/* Recoverable session deletion. */
.session-danger-zone {
    margin-top: 1rem;
    background: rgba(8, 7, 10, 0.42);
    border: 1px solid rgba(254, 28, 21, 0.24);
    border-radius: 14px;
}

.session-danger-zone > summary {
    padding: 0.75rem 0.9rem;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.76rem;
    font-weight: 750;
    cursor: pointer;
}

.session-danger-content {
    display: grid;
    gap: 0;
    padding: 0 0.9rem 0.9rem;
}

.session-option-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0;
}

.session-option-row > div {
    min-width: 0;
}

.session-option-row > form {
    display: flex;
    justify-content: flex-end;
    margin: 0;
}

.session-option-row + .session-option-row {
    border-top: 1px solid var(--color-border-muted);
}

.session-option-action {
    position: static;
    z-index: auto;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 0.4rem;
    width: auto;
    min-width: 148px;
    margin-left: auto;
    padding: 0.5rem 0.75rem;
    border-right: 1px solid var(--color-border-muted);
    border-radius: 8px;
    transform: none;
}

.session-option-action:hover {
    transform: translateY(-1px);
}

.session-option-row .btn {
    min-width: 148px;
}

.session-danger-content strong {
    color: #FFFFFF;
    font-size: 0.86rem;
}

.session-danger-content p {
    max-width: 660px;
    margin: 0.18rem 0 0;
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.72rem;
    line-height: 1.4;
}

.game-settings-field-help {
    margin: 0.45rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.45;
}

.game-awards-intro {
    margin: -0.25rem 0 0.75rem;
    color: var(--color-action);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 400;
}

.deleted-sessions-recovery {
    margin-top: 1.5rem;
    background: rgba(7, 7, 9, 0.5);
    border: 1px solid rgba(254, 28, 21, 0.24);
    border-radius: 16px;
}

.deleted-sessions-recovery > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.deleted-session-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.55rem;
    height: 1.55rem;
    color: #FFFFFF;
    background: rgba(254, 28, 21, 0.22);
    border: 1px solid rgba(254, 28, 21, 0.55);
    border-radius: 999px;
}

.deleted-sessions-content {
    padding: 0 1rem 1rem;
}

.deleted-sessions-heading strong,
.deleted-session-copy > strong {
    color: #FFFFFF;
}

.deleted-sessions-heading p {
    margin: 0.15rem 0 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.74rem;
}

.deleted-session-list {
    display: grid;
    gap: 0.55rem;
}

.deleted-session-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.8rem;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 11px;
}

.deleted-session-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.12rem;
}

.deleted-session-copy > span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.76rem;
}

.deleted-session-copy small {
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.66rem;
}

.deleted-session-copy .transaction-time {
    display: inline;
}

@media (max-width: 600px) {
    .deleted-session-item {
        align-items: stretch;
        flex-direction: column;
    }

    .deleted-session-item .btn {
        width: 100%;
    }

    .session-option-row {
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }

    .session-option-row .btn {
        width: 100%;
        min-width: 0;
        padding-inline: 0.65rem;
    }
}

/* Archived sessions remain viewable and reversible without affecting stats. */
.archive-page-intro {
    margin: 0.25rem 0 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.82rem;
}

.archived-session-list {
    display: grid;
    gap: 0.8rem;
}

.archived-session-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-color: rgba(253, 233, 146, 0.3);
}

.archived-session-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.2rem;
}

.archived-session-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.archived-session-title > strong {
    color: #FFFFFF;
}

.archived-session-title > span {
    padding: 0.16rem 0.42rem;
    color: var(--color-action);
    border: 1px solid var(--color-action);
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.archived-session-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.8rem;
}

.archived-session-copy small,
.archived-session-copy time {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.68rem;
}

@media (max-width: 600px) {
    .archived-session-item {
        align-items: stretch;
        flex-direction: column;
    }

    .archived-session-item .btn {
        width: 100%;
    }
}

/* Give every award ribbon its own neon identity. */
.game-award-highest-buyin {
    --award-color: #00F5FF;
}

.game-award-highest-cashout {
    --award-color: #FF7DE3;
}

.game-award-top-winner {
    --award-color: #39FF14;
}

.game-award-most-buyins {
    --award-color: #D68CFF;
}

/* Keep the player picker above the transaction panels that follow the ledger. */
.session-ledger,
.buyin-entry-card {
    position: relative;
    z-index: 20;
    overflow: visible;
}

.session-ledger.has-open-player-picker,
.session-ledger:has(.add-players-disclosure[open]),
.buyin-entry-card.has-open-player-picker,
.buyin-entry-card:has(.add-players-disclosure[open]) {
    z-index: 220;
}

.add-players-disclosure[open] {
    z-index: 230;
}

.add-players-disclosure[open] .add-players-popover {
    z-index: 240;
}

/* Multi-player buy-ins apply one amount to every selected card. */
.buyin-selector-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.form-group .buyin-selector-header > label {
    margin: 0;
}

.buyin-select-all {
    padding: 0.2rem 0;
    color: var(--color-action);
    background: transparent;
    border: 0;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
}

.buyin-select-all:hover {
    color: var(--color-action-hover);
}

.form-group .multi-player-btn {
    position: relative;
    display: inline-flex;
    min-height: 58px;
    margin: 0;
}

.form-group .multi-player-btn input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Transaction player selection uses an outline without filling the card. */
#buyin-player-selector .player-btn.selected,
#cashout-player-selector .player-btn.selected {
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    border-color: var(--color-action);
    box-shadow: none;
}

.multi-player-btn.selected::after {
    content: none;
}

.multi-player-btn:has(input:focus-visible) {
    outline: 3px solid var(--color-action-hover);
    outline-offset: 2px;
}

.buyin-selection-summary {
    min-height: 1.15rem;
    margin: 0.42rem 0 0;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.72rem;
}

.completion-balance-note {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: -1rem 0 1.5rem;
    padding: 0.75rem 0.9rem;
    color: #FFFFFF;
    background: rgba(254, 28, 21, 0.1);
    border: 1px solid rgba(254, 28, 21, 0.72);
    border-radius: 10px;
    box-shadow: 0 0 16px rgba(254, 28, 21, 0.12);
}

.completion-balance-note[hidden] {
    display: none;
}

.completion-balance-note > span {
    display: inline-flex;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: var(--color-negative);
    border-radius: 50%;
    font-weight: 950;
}

.completion-balance-note strong {
    font-size: 0.82rem;
}

.completion-balance-note.is-visible {
    animation: completionBalancePrompt 0.22s ease-out;
}

.ledger-difference-line {
    position: relative;
    display: block;
    width: 100%;
    min-height: 1.8rem;
    align-items: center;
}

.ledger-difference-line .ledger-stat-value {
    display: block;
    text-align: center;
}

.ledger-balanced-label {
    position: absolute;
    top: 50%;
    left: calc(50% + 2.8rem);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
    color: var(--color-positive);
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transform: translateY(-50%);
}

.ledger-balanced-label > span {
    font-size: 0.78rem;
    font-weight: 950;
}

@keyframes completionBalancePrompt {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Player profile: identity left, card podium center, controls right. */
.player-profile-section {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) 270px minmax(235px, 245px);
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: 2rem;
    text-align: left;
}

.player-profile-details {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    align-self: start;
    padding: 0.25rem 0 3rem;
}

.player-profile-details .player-profile-copy {
    text-align: left;
}

.player-profile-details .player-profile-copy h2 {
    margin: 0;
    color: #FFFFFF;
    font-size: clamp(2.15rem, 4vw, 3.6rem);
    line-height: 1;
    letter-spacing: -0.045em;
}

.player-profile-badges-left {
    grid-template-columns: minmax(170px, 220px);
    justify-content: start;
    margin-top: 1.15rem;
}

.player-profile-delete-area {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    align-items: center;
    align-self: end;
    justify-self: start;
    margin: 0;
}

.player-profile-delete-area form {
    margin: 0;
}

.player-profile-delete-area .btn {
    padding: 0.36rem 0.68rem;
    font-size: 0.68rem;
}

.player-delete-unavailable {
    max-width: 210px;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.68rem;
    line-height: 1.4;
}

.player-profile-card-form {
    display: block;
    grid-column: 2 / 4;
    grid-row: 1;
    width: 100%;
    margin: 0;
}

.player-profile-card-form .profile-card-picker {
    display: grid;
    grid-template-columns: 270px minmax(235px, 245px);
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    width: 100%;
}

.profile-card-picker .card-picker-face {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    width: 270px;
    min-height: 238px;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.profile-card-picker .card-slider-preview {
    position: relative;
    display: block;
    width: 230px;
    height: 238px;
    min-height: 238px;
    padding: 0;
}

.profile-card-picker .profile-card-main {
    position: absolute;
    z-index: 3;
    top: 18px;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    animation: profileCardIdle 3.4s ease-in-out infinite;
}

.profile-card-picker .profile-card-main > .player-card-icon {
    display: block;
}

.profile-card-picker .card-slider-preview::before,
.profile-card-picker .card-slider-preview::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.profile-card-picker .card-slider-preview::before {
    z-index: 2;
    bottom: 20px;
    width: 154px;
    height: 28px;
    background: linear-gradient(180deg, #302B20, #17140D);
    border: 1px solid var(--color-action);
    clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.42);
}

.profile-card-picker .card-slider-preview::after {
    z-index: 1;
    bottom: 3px;
    width: 198px;
    height: 22px;
    background: linear-gradient(180deg, #242016, #0F0D09);
    border: 1px solid color-mix(in srgb, var(--color-action) 65%, #000000);
    border-radius: 3px 3px 8px 8px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.48);
}

.profile-card-picker .card-customization-panel {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    width: min(100%, 245px);
    flex-direction: column;
    justify-self: start;
    gap: 0.85rem;
    padding-left: 1.35rem;
    border-left: 1px solid color-mix(in srgb, var(--color-action) 36%, transparent);
    line-height: 1.25;
}

.card-customization-title {
    color: #FFFFFF;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.profile-card-picker .card-customization-panel .card-picker-zone {
    position: static;
    display: grid;
    grid-template-columns: minmax(72px, 1fr) auto;
    align-items: center;
    width: 100%;
    margin: 0;
}

.profile-card-picker .card-customization-panel .card-picker-suit-zone {
    margin-top: 0;
}

.card-profile-sparkle {
    position: absolute;
    z-index: 5;
    color: var(--color-action);
    line-height: 1;
    pointer-events: none;
    text-shadow: 0 0 9px color-mix(in srgb, var(--color-action) 80%, transparent);
    animation: cardSparkle 2.2s ease-in-out infinite alternate;
}

.card-profile-sparkle-one {
    top: 21px;
    right: 27px;
    font-size: 1.35rem;
}

.card-profile-sparkle-two {
    top: 78px;
    left: 25px;
    color: #FFFFFF;
    font-size: 0.9rem;
    animation-delay: -0.7s;
}

.card-profile-sparkle-three {
    top: 136px;
    right: 18px;
    font-size: 0.82rem;
    animation-delay: -1.35s;
}

@keyframes cardSparkle {
    from { opacity: 0.48; transform: scale(0.82) rotate(-7deg); }
    to { opacity: 1; transform: scale(1.14) rotate(7deg); }
}

@keyframes profileCardIdle {
    0%, 100% {
        transform: translateX(-50%) translateY(0) rotate(-2deg);
    }
    50% {
        transform: translateX(-50%) translateY(-4px) rotate(0deg);
    }
}

.profile-card-picker .profile-card-main.is-dancing {
    animation: profileCardDance 1.8s cubic-bezier(0.36, 0, 0.28, 1) 1;
}

.profile-card-main.is-dancing ~ .card-profile-sparkle {
    animation-duration: 0.42s;
}

@keyframes profileCardDance {
    0%, 100% {
        transform: translateX(-50%) translateY(0) rotate(-2deg) scale(1);
    }
    14% {
        transform: translateX(-50%) translateY(-8px) rotate(-10deg) scale(1.03);
    }
    28% {
        transform: translateX(-50%) translateY(-2px) rotate(9deg) scale(1);
    }
    42% {
        transform: translateX(-50%) translateY(-9px) rotate(-8deg) scale(1.04);
    }
    56% {
        transform: translateX(-50%) translateY(-1px) rotate(8deg) scale(0.99);
    }
    72% {
        transform: translateX(-50%) translateY(-6px) rotate(-5deg) scale(1.03);
    }
    86% {
        transform: translateX(-50%) translateY(-2px) rotate(4deg) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .card-profile-sparkle,
    .profile-card-picker .profile-card-main {
        animation: none;
    }
}

.profile-card-picker .card-customization-panel .card-carousel-label {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    justify-content: flex-start;
}

.profile-card-picker .card-customization-panel .card-carousel-shell {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    gap: 0.65rem;
}

.profile-card-picker .card-customization-panel .card-carousel-arrow,
.profile-card-picker .card-customization-panel .card-carousel-arrow:hover,
.profile-card-picker .card-customization-panel .card-carousel-arrow:active {
    width: 28px;
    height: 32px;
    padding: 0 !important;
    color: var(--color-action);
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    appearance: none;
    -webkit-appearance: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.profile-card-picker .card-customization-panel .card-carousel-arrow:hover {
    color: var(--color-action-hover);
    text-shadow: 0 0 10px color-mix(in srgb, var(--color-action) 72%, transparent);
    transform: scale(1.18);
}

.profile-card-picker .card-customization-panel .card-carousel-arrow:focus-visible {
    outline: 0;
    color: var(--color-action-hover);
    text-shadow: 0 0 0 2px #050505, 0 0 8px var(--color-action);
}

.card-color-palette {
    min-width: 0;
    margin: 0.15rem 0 0;
    padding: 0;
    border: 0;
}

.card-color-palette legend {
    margin-bottom: 0.42rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.66rem;
    font-weight: 400;
}

.card-color-swatches {
    display: grid;
    grid-template-columns: repeat(8, 22px);
    gap: 0.42rem;
}

.card-color-swatch {
    width: 22px;
    height: 22px;
    padding: 0;
    background: var(--swatch-color);
    border: 2px solid rgba(255, 255, 255, 0.42);
    border-radius: 50%;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.38);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.card-color-swatch:hover {
    transform: scale(1.14);
    border-color: #FFFFFF;
}

.card-color-swatch.selected {
    border-color: #FFFFFF;
    box-shadow: 0 0 0 3px var(--color-action), 0 3px 9px rgba(0, 0, 0, 0.42);
    transform: scale(1.08);
}

.card-color-swatch:focus-visible {
    outline: 2px solid var(--color-action-hover);
    outline-offset: 3px;
}

.available-player-content {
    gap: 1.15rem;
    min-height: 120px;
    padding-bottom: 0.9rem;
}

@media (max-width: 900px) {
    .player-profile-section {
        grid-template-columns: 1fr;
        gap: 1.35rem;
    }

    .player-profile-details,
    .player-profile-card-form {
        grid-column: 1;
    }

    .player-profile-details {
        grid-row: 1;
        padding-bottom: 0;
    }

    .player-profile-card-form {
        grid-row: 2;
    }

    .player-profile-delete-area {
        grid-column: 1;
        grid-row: 3;
        justify-self: start;
    }

    .player-profile-card-form .profile-card-picker {
        grid-template-columns: 270px minmax(235px, 300px);
        justify-content: center;
    }

    .profile-card-picker .card-picker-face {
        grid-column: 1;
        grid-row: 1;
        justify-self: center;
    }

    .profile-card-picker .card-customization-panel {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        width: min(100%, 300px);
    }

    .player-profile-badges-left {
        grid-template-columns: repeat(auto-fit, minmax(145px, 205px));
    }
}

@media (max-width: 650px) {
    .player-profile-card-form .profile-card-picker {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .profile-card-picker .card-picker-face,
    .profile-card-picker .card-customization-panel {
        grid-column: 1;
    }

    .profile-card-picker .card-customization-panel {
        grid-row: 2;
        width: min(100%, 300px);
        padding: 1rem 0 0;
        border-top: 1px solid color-mix(in srgb, var(--color-action) 36%, transparent);
        border-left: 0;
    }
}

/* Friendly type system: light body copy, structured headings, consistent money. */
h1,
h2,
h3,
h4,
h5,
h6,
.btn,
.nav-links,
summary {
    font-family: var(--font-display);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
}

.btn,
.nav-links,
summary,
label,
.form-group label,
.stat-label,
.game-setting-label,
.session-compact-label,
.player-profile-eyebrow,
.transaction-history-title {
    font-family: var(--font-display);
    font-weight: 700;
}

.money-value,
.money-amount,
.transaction-amount,
.settlement-amount,
.finance-value,
.extreme-amount,
.edit-amount-input,
.ledger-stat-value,
.overview-value,
.stat-value,
.session-history-pl,
.game-award-value,
.player-total-amount,
.ledger-neutral-amount,
.difference-value,
.balance-helper-difference,
.quick-value,
.completion-payment-transfer strong,
input[name="amount"],
input[name="small_blind"],
input[name="big_blind"],
input[name="base_buyin"] {
    font-family: var(--font-numbers) !important;
}

.session-heading .session-desc {
    margin: 0;
    color: var(--color-text-muted);
    font-style: normal;
    line-height: 1.35;
}

.session-ledger .ledger-stat-label,
.session-ledger .data-table th,
.settlement-instructions .settlement-party-label,
.settlement-instructions .settlement-action-label,
.completion-payment-transfer > span:first-child {
    font-family: var(--font-body) !important;
    font-weight: 400;
}

.money-amount,
.transaction-amount,
.settlement-amount,
.validation-value,
.finance-value,
.extreme-amount,
.edit-amount-input,
.ledger-stat-value,
.overview-value,
.stat-value,
.session-history-pl,
.game-award-value {
    font-family: var(--font-numbers);
    font-variant-numeric: tabular-nums;
}

.session-ledger .ledger-stat-label,
.session-ledger .data-table th {
    font-family: var(--font-display);
    font-weight: 700;
}

.player-name,
.player-link,
.player-stats-link,
.player-roster-link > strong,
.player-name-with-card > strong,
.player-btn > span:last-child,
.player-chip > span:not(.player-card-icon),
.transaction-player,
.available-player-name,
.settlement-player-copy > strong,
.completion-payment-player-copy > strong,
.audit-event-player > span:last-child,
.card-profile-copy > strong,
.game-award-player {
    font-family: var(--font-display);
    font-weight: 700;
}

/* A playful club character keeps the wordmark compact and legible. */
.brand-mark {
    width: 44px;
    height: 36px;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    transition: transform 0.18s ease, filter 0.18s ease;
    transform-origin: 50% 88%;
    animation: brand-mark-sway 3.4s ease-in-out infinite;
}

@keyframes brand-mark-sway {
    0%, 100% {
        transform: rotate(-4deg);
    }
    50% {
        transform: rotate(4deg);
    }
}

.brand-mark img {
    display: block;
    width: 44px;
    height: 36px;
}

.brand-name {
    font-family: var(--font-display);
    font-size: 1.06rem;
    font-weight: 600;
    letter-spacing: 0.005em;
}

.brand-name strong {
    font-weight: 700;
    letter-spacing: 0.025em;
}

.brand-logo:hover .brand-mark {
    background: transparent;
    border-color: transparent;
    filter: brightness(1.1);
    transform: translateY(-1px) rotate(-2deg);
}

/* The displayed profile name becomes the editor in place. */
.player-name-inline-form {
    margin: 0;
}

.player-profile-name-line {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 0.35rem;
    min-width: 0;
}

.player-profile-name-line h2 {
    min-width: 0;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
}

.player-profile-name-line input {
    min-width: 0;
    flex: 1;
    width: 100%;
    padding: 0 0.18rem 0.14rem;
    color: #FFFFFF;
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--color-action);
    border-radius: 0;
    font-family: var(--font-display);
    font-size: clamp(2.15rem, 4vw, 3.6rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1;
}

.player-profile-name-line input:focus {
    box-shadow: none;
    outline: none;
}

.player-profile-name-line [hidden],
.player-name-edit-actions[hidden] {
    display: none;
}

.player-name-edit-trigger {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    justify-content: center;
    margin-top: 0;
    margin-left: 0;
    padding: 0;
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 700;
}

.player-name-edit-trigger:hover {
    color: #FFFFFF;
    border-bottom-color: transparent;
}

.player-name-edit-trigger > span,
.player-venmo-edit-trigger > span,
.club-name-edit-trigger > span {
    display: inline-block;
    transform: scaleX(-1);
}

.player-name-edit-actions {
    display: flex;
    gap: 0.45rem;
    margin-top: 0.7rem;
}

.player-venmo-form {
    width: min(250px, 100%);
    margin-top: 0.85rem;
}

.player-venmo-line {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 21px;
}

.player-venmo-display {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-action);
    font-size: 0.76rem;
    font-weight: 500;
}

.player-venmo-display.empty {
    color: var(--color-text-muted);
    font-weight: 300;
}

.player-venmo-edit-field {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    min-width: 0;
    flex: 1;
    padding-bottom: 0.18rem;
    border-bottom: 2px solid var(--color-action);
}

.player-venmo-edit-field[hidden],
.player-venmo-edit-actions[hidden],
.player-venmo-edit-trigger[hidden],
.player-venmo-display[hidden] {
    display: none;
}

.player-venmo-edit-field > span {
    color: var(--color-action);
    font-weight: 700;
}

.player-venmo-edit-field input {
    min-width: 0;
    flex: 1;
    padding: 0;
    color: #FFFFFF;
    background: transparent;
    border: 0;
    font-family: var(--font-body);
    font-size: 0.76rem;
    font-weight: 400;
    outline: none;
}

.player-venmo-edit-field input::placeholder {
    color: var(--color-text-muted);
}

.player-venmo-edit-trigger {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    justify-content: center;
    margin-left: 0;
    padding: 0;
    color: var(--color-text-muted);
    background: transparent;
    border: 0;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
}

.player-venmo-edit-trigger:hover {
    color: #FFFFFF;
    border-bottom-color: transparent;
}

.player-venmo-edit-actions {
    display: flex;
    gap: 0.45rem;
    margin-top: 0.7rem;
}

.settlement-player-copy,
.completion-payment-player-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.15;
}

.completion-payment-player-copy {
    align-items: flex-start;
    text-align: left;
}

.settlement-player-copy strong,
.completion-payment-player-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settlement-venmo,
.completion-payment-player-copy small {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    margin-top: 0.16rem;
    color: var(--color-action);
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.venmo-mark {
    display: inline-flex;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: #008CFF;
    border-radius: 4px;
    line-height: 1;
}

.venmo-mark svg {
    display: block;
    width: 11px;
    height: 11px;
    fill: currentColor;
}

.settlement-recipient .settlement-player-copy {
    align-items: flex-end;
    text-align: right;
}

@media (max-width: 520px) {
    .player-profile-name-line input {
        width: 100%;
    }
}

/* Time-range toggle for the Players leaderboard. */
.lifetime-pl-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-direction: row;
    gap: 1rem;
}

.leaderboard-heading-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.12rem;
}

.leaderboard-heading-copy > span {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 300;
}

.leaderboard-filter-form {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.55rem;
    margin-left: auto;
}

.leaderboard-filter-form > label {
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 400;
    white-space: nowrap;
}

.leaderboard-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.leaderboard-select-wrap select {
    min-width: 148px;
    padding: 0.5rem 2rem 0.5rem 0.78rem;
    color: #FFFFFF;
    background: linear-gradient(145deg, rgba(35, 34, 28, 0.96), rgba(14, 14, 12, 0.98));
    border: 1px solid color-mix(in srgb, var(--color-action) 48%, var(--color-border-muted));
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 5px 14px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 400;
}

.leaderboard-select-wrap select:hover {
    border-color: var(--color-action);
}

.leaderboard-select-wrap select:focus-visible {
    border-color: var(--color-action-hover);
    box-shadow: 0 0 0 3px rgba(253, 233, 146, 0.13);
    outline: none;
}

.leaderboard-select-wrap > span {
    position: absolute;
    right: 0.7rem;
    color: var(--color-action);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
    transform: translateY(-2px);
}

@media (max-width: 700px) {
    .lifetime-pl-header {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .leaderboard-filter-form {
        margin-left: auto;
    }

    .leaderboard-filter-form > label {
        display: none;
    }
}

/* Clear hierarchy for completed-session navigation and actions. */
.session-title-row {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.2rem;
}

.session-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.7rem;
}

.session-back-link {
    color: var(--color-text-muted);
    border-bottom: 1px solid transparent;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.16s ease, border-color 0.16s ease;
}

.session-back-link:hover {
    color: var(--color-action);
    border-bottom-color: currentColor;
}

.session-back-label-mobile {
    display: none;
}

.header-actions .completed-settlement-action {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    padding: 0.52rem 0.88rem;
    color: var(--color-action-ink);
    background: var(--color-action);
    border: 1px solid var(--color-action);
    border-radius: 9px;
    box-shadow: 0 5px 16px rgba(253, 233, 146, 0.2);
    font-size: 0.78rem;
}

.header-actions .completed-settlement-action:hover {
    color: var(--color-action-ink);
    background: var(--color-action-hover);
    border-color: var(--color-action-hover);
    box-shadow: 0 7px 20px rgba(253, 233, 146, 0.27);
    transform: translateY(-1px);
}

.header-actions .btn-header-ghost,
.header-actions .audit-drawer-toggle.btn-header-ghost {
    position: static;
    z-index: auto;
    display: inline-flex;
    width: auto;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 0.38rem;
    padding: 0.5rem 0.62rem;
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid transparent;
    border-radius: 8px;
    box-shadow: none;
    font-size: 0.75rem;
    transform: none;
}

.header-actions .btn-header-ghost:hover,
.header-actions .audit-drawer-toggle.btn-header-ghost:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.075);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.header-action-icon,
.header-actions .btn-header-ghost .audit-toggle-icon {
    color: var(--color-action);
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1;
}

/* Player balances become compact stacked rows on phones instead of forcing
   the session card wider than the viewport. */
@media (max-width: 600px) {
    .session-ledger,
    .session-ledger .player-balances-section {
        min-width: 0;
    }

    .session-ledger .player-balances-section .data-table {
        display: block;
        width: 100%;
        min-width: 0;
        table-layout: fixed;
    }

    .session-ledger .player-balances-section .data-table thead {
        display: none;
    }

    .session-ledger .player-balances-section .data-table tbody {
        display: block;
        width: 100%;
    }

    .session-ledger .player-balance-row {
        display: grid;
        width: 100%;
        min-width: 0;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        /* Keep card hats above and feet below the row dividers. */
        padding: 1.15rem 0 1rem;
        border-bottom: 1px solid var(--color-border-muted);
    }

    .session-ledger .player-balance-row:last-child {
        border-bottom: 0;
    }

    .session-ledger .player-balance-row > td {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 0.14rem;
        padding: 0.2rem 0.28rem;
        border: 0;
        font-size: 0.875rem;
        white-space: nowrap;
    }

    .session-ledger .player-balance-row > td:first-child {
        grid-column: 1 / -1;
        padding: 0 0.28rem 0.58rem;
        white-space: normal;
    }

    .session-ledger .player-balance-row > td:not(:first-child)::before {
        content: attr(data-label);
        color: var(--color-text-muted);
        font-family: var(--font-body);
        font-size: 0.7rem;
        font-weight: 400;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

    .session-ledger .ledger-player-cell {
        width: 100%;
        min-width: 0;
    }

    .session-ledger .ledger-player-name {
        display: grid;
        flex: 1 1 auto;
        min-width: 0;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.3rem 0.45rem;
    }

    .session-ledger .ledger-player-name > strong {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .session-ledger .player-inline-awards {
        display: flex;
        grid-column: 3;
        grid-row: 1;
        flex-direction: column;
        align-items: flex-end;
        justify-self: end;
        gap: 0.22rem;
        margin-left: 0;
    }

    .session-ledger .player-inline-award {
        min-height: 21px;
        padding: 0.12rem 0.62rem;
        white-space: nowrap;
    }

    .session-ledger .player-balances-header {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 0.6rem;
    }

    .session-ledger .add-players-disclosure {
        margin-left: auto;
    }

    .game-setup-card {
        padding: 0.65rem 0.75rem;
    }

    .game-setup-header {
        margin-bottom: 0.45rem;
    }

    .game-setup-header h3 {
        font-size: 1rem;
        line-height: 1.2;
    }

    .game-setup-header p {
        display: none;
    }

    .game-setup-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
    }

    .game-setup-card .game-setting {
        gap: 0.08rem;
        min-width: 0;
        padding: 0.4rem 0.5rem;
        border-radius: 8px;
    }

    .game-setup-card .game-setting-label {
        font-size: 0.56rem;
        letter-spacing: 0.04em;
    }

    .game-setup-card .game-setting-value {
        overflow: hidden;
        font-size: 0.8rem;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .game-setup-card .game-settings-editor {
        margin-top: 0.45rem;
        padding-top: 0.4rem;
    }

    .game-setup-card .game-settings-editor summary {
        font-size: 0.7rem;
        line-height: 1.2;
    }

    .game-setup-card .game-settings-editor[open] summary {
        margin-bottom: 0.65rem;
    }

    .session-ledger {
        padding: 0.7rem 0.75rem;
    }

    .session-ledger > h3 {
        margin-bottom: 0.5rem;
        font-size: 1.25rem;
        line-height: 1.2;
    }

    .session-ledger .ledger-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.3rem;
        margin-bottom: 0.65rem;
        padding: 0.45rem 0.35rem;
        border-radius: 7px;
    }

    .session-ledger .ledger-stat {
        min-width: 0;
    }

    .session-ledger .ledger-stat-label {
        margin-bottom: 0.12rem;
        font-size: 0.7rem;
        letter-spacing: 0.02em;
        white-space: nowrap;
    }

    .session-ledger .ledger-stat-value {
        overflow: hidden;
        font-size: clamp(1.05rem, 4.8vw, 1.22rem);
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .session-ledger .ledger-difference-line {
        display: block;
    }

    .session-ledger .ledger-balanced-label {
        gap: 0;
        font-size: 0;
    }

    .session-ledger .ledger-balanced-label > span {
        font-size: 0.78rem;
    }

    .session-live-page .session-ledger .difference-value.zero {
        color: var(--color-positive) !important;
    }

    .session-ledger .player-balances-section {
        margin-top: 0.7rem;
        padding-top: 0.6rem;
    }

    .session-ledger .player-balances-header {
        margin-bottom: 0.35rem;
    }

    .session-ledger .player-balances-title {
        font-size: 1.05rem;
    }

    .session-ledger .player-balances-count {
        font-size: 0.72rem;
    }
}

/* Keep editable game details attached to the session heading instead of in
   a separate setup card. */
.session-heading {
    flex: 1 1 520px;
}

.session-meta-row {
    width: 100%;
}

.session-settings-trigger {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--color-text-muted);
    background: transparent;
    border: 0;
    border-radius: 7px;
    font-size: 0.68rem;
    line-height: 1;
    cursor: pointer;
    margin-left: -0.35rem;
}

.session-settings-trigger:hover {
    color: var(--color-action);
    background: rgba(253, 233, 146, 0.08);
    border-color: var(--color-action);
}

.settings-edit-pencil,
.edit-pencil {
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    transform: scaleX(-1) rotate(-8deg);
}

.settings-edit-pencil {
    font-size: 1.08rem;
}

.edit-btn .edit-pencil {
    font-size: 1rem;
}

body.session-settings-modal-open {
    overflow: hidden;
}

body.session-settings-modal-open > main {
    z-index: 1600;
}

.session-settings-modal {
    z-index: 2000;
}

.session-settings-modal-content {
    width: min(600px, calc(100vw - 2rem));
    max-width: 600px;
}

.session-settings-modal-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(105px, 1fr));
    gap: 0.7rem;
    padding: 1rem 1.15rem 1.15rem;
}

.session-settings-modal-form .form-group {
    margin: 0;
}

.session-settings-modal-form .btn {
    grid-column: 1 / -1;
}

@media (max-width: 768px) {
    .session-page .session-heading {
        flex: 0 0 auto;
        width: 100%;
    }

    .session-page .page-header {
        gap: 0.6rem;
    }

    .session-page .session-title-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.28rem;
    }

    .session-page .session-title-row h2 {
        order: 2;
    }

    .session-page .session-back-link {
        display: inline-flex;
        order: 1;
        justify-self: start;
        align-items: center;
        gap: 0.28rem;
        font-size: 0.76rem;
    }

    .session-back-label-desktop {
        display: none;
    }

    .session-back-label-mobile {
        display: inline;
    }

    .session-page .session-meta-row {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr);
        align-items: center;
        gap: 0.38rem 0.22rem;
    }

    .session-page .session-desc {
        grid-column: 1 / -1;
    }

    .session-page .session-compact-setup {
        grid-column: 1;
    }

    .session-page .session-settings-trigger {
        grid-column: 2;
        margin-left: 0;
    }

    .session-live-page .header-actions {
        display: flex;
        width: auto;
        align-items: flex-end;
        flex-direction: column;
        justify-content: flex-end;
        gap: 0.45rem;
    }

    .session-live-page .page-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        column-gap: 0.65rem;
    }

    .session-live-page .session-heading {
        width: auto;
        min-width: 0;
    }

    .session-live-page .header-actions {
        align-self: end;
    }

    .session-live-page .header-actions .balance-status {
        flex: 0 0 100%;
    }

    .session-live-page .header-actions .inline-form {
        display: inline-flex;
        min-width: 0;
        order: 2;
    }

    .session-live-page .header-actions .inline-form .btn {
        width: auto;
    }

    .session-live-page .header-actions .audit-drawer-toggle {
        order: 1;
    }

    .session-settings-modal-form {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .session-settings-modal-form .btn {
        width: 100%;
    }
}

.lifetime-pl-section {
    transition: opacity 0.16s ease;
}

.lifetime-pl-section.is-loading {
    opacity: 0.58;
    pointer-events: none;
}

/* Keep the entire leaderboard visible on phones without horizontal swiping. */
@media (max-width: 600px) {
    .lifetime-pl-section {
        overflow-x: hidden;
        padding: 0.75rem;
    }

    .lifetime-pl-section .leaderboard-table {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .lifetime-pl-section .leaderboard-table thead {
        display: none;
    }

    .lifetime-pl-section .leaderboard-table tbody {
        display: block;
        width: 100%;
    }

    .lifetime-pl-section .leaderboard-row {
        display: grid;
        width: 100%;
        min-width: 0;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding: 0.65rem 0;
        border-bottom: 1px solid var(--color-border-muted);
    }

    .lifetime-pl-section .leaderboard-row:last-child {
        border-bottom: 0;
    }

    .lifetime-pl-section .leaderboard-row > td {
        display: flex;
        min-width: 0;
        align-items: center;
        flex-direction: column;
        gap: 0.1rem;
        padding: 0.18rem 0.12rem;
        border: 0;
        font-size: clamp(0.62rem, 2.8vw, 0.76rem);
        text-align: center;
        white-space: nowrap;
    }

    .lifetime-pl-section .leaderboard-row > td:first-child {
        grid-column: 1 / -1;
        align-items: flex-start;
        padding: 0 0.15rem 0.45rem;
        text-align: left;
    }

    .lifetime-pl-section .leaderboard-row > td:not(:first-child)::before {
        content: attr(data-label);
        color: var(--color-text-muted);
        font-family: var(--font-body);
        font-size: 0.5rem;
        font-weight: 400;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    .lifetime-pl-section .player-stats-link {
        width: 100%;
        min-width: 0;
    }

    .lifetime-pl-section .player-stats-link > strong {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .transaction-history-title {
        min-height: 44px;
        margin-bottom: 0;
        padding: 0.45rem 0.15rem;
        cursor: pointer;
    }

    .transaction-history-caret {
        display: inline-flex;
    }

    .transaction-history-disclosure[open] .transaction-history-caret {
        transform: rotate(180deg);
    }

    .transaction-history-disclosure[open] > .transaction-history-title {
        margin-bottom: 0.2rem;
    }
}

/* Touch browsers can retain :hover after a tap; an unselected player should
   immediately return to its neutral appearance. */
@media (hover: none), (pointer: coarse) {
    #buyin-player-selector .player-btn:not(.selected):hover,
    #cashout-player-selector .player-btn:not(.selected):hover {
        color: var(--color-text-secondary);
        background: var(--color-surface-raised);
        border-color: var(--color-border-muted);
        box-shadow: none;
        transform: none;
    }
}

.player-detail-page .stats-overview .stat-label {
    font-weight: 400;
}

/* Session date search sits directly beneath the primary page action. */
.sessions-page-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.55rem;
}

.sessions-page-header {
    margin-bottom: 0.75rem;
}

.sessions-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.15rem;
    padding-top: 0.9rem;
}

/* The way through to archived sessions, now that it has left the top nav. */
/* Sizing and colour come from .btn; this only spaces the icon. */
.sessions-archive-link {
    gap: 0.45rem;
    text-decoration: none;
}

.empty-state-aside {
    margin-top: 1rem;
}

.session-catalog-group {
    margin-bottom: 1.5rem;
}

.session-catalog-group[hidden] {
    display: none;
}

.session-catalog-group > h3 {
    margin: 0 0 0.75rem;
    color: #FFFFFF;
    font-family: var(--font-display);
    font-size: 1rem;
}

.session-date-search {
    display: inline-flex;
    width: 175px;
    min-width: 0;
    align-items: center;
    gap: 0.38rem;
    padding: 0.36rem 0.58rem;
    color: var(--color-text-muted);
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--color-border-muted);
    border-radius: 9px;
    font-family: var(--font-body);
    font-weight: 400;
}

.session-date-search:focus-within {
    color: var(--color-action);
    border-color: var(--color-action);
}

.session-date-search input {
    width: 100%;
    min-width: 0;
    padding: 0;
    color: #FFFFFF;
    background: transparent;
    border: 0;
    box-shadow: none;
    outline: 0;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 400;
}

.session-card[hidden],
.session-search-no-results[hidden] {
    display: none !important;
}

.session-search-no-results {
    margin: 1rem 0;
    color: var(--color-text-muted);
    text-align: center;
}

@media (max-width: 768px) {
    .sessions-page-header {
        width: 100%;
    }

    .sessions-page-actions {
        width: 100%;
        align-items: flex-end;
    }

    .sessions-list-toolbar {
        justify-content: flex-end;
    }
}

/* Mobile leaderboard remains one horizontal row per player. */
.leaderboard-table-scroll {
    width: 100%;
}

@media (max-width: 600px) {
    .lifetime-pl-section {
        overflow-x: visible;
    }

    .leaderboard-table-scroll {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .lifetime-pl-section .leaderboard-table {
        display: table;
        width: 100%;
        min-width: 540px;
    }

    .lifetime-pl-section .leaderboard-table thead {
        display: table-header-group;
    }

    .lifetime-pl-section .leaderboard-table tbody {
        display: table-row-group;
        width: auto;
    }

    .lifetime-pl-section .leaderboard-row {
        display: table-row;
        width: auto;
        padding: 0;
    }

    .lifetime-pl-section .leaderboard-row > td,
    .lifetime-pl-section .leaderboard-row > td:first-child {
        display: table-cell;
        width: auto;
        padding: 0.7rem 0.35rem;
        border-bottom: 1px solid var(--color-border-muted);
        font-size: 0.76rem;
        text-align: left;
        white-space: nowrap;
    }

    .lifetime-pl-section .leaderboard-row > td:first-child {
        min-width: 105px;
        padding-right: 0.18rem;
    }

    .lifetime-pl-section .leaderboard-row > td:nth-child(2) {
        padding-left: 0.18rem;
    }

    .lifetime-pl-section .leaderboard-table th {
        padding: 0.62rem 0.35rem;
    }

    .lifetime-pl-section .leaderboard-table th:first-child {
        padding-right: 0.18rem;
    }

    .lifetime-pl-section .leaderboard-table th:nth-child(2) {
        padding-left: 0.18rem;
    }

    .lifetime-pl-section .leaderboard-row > td:not(:first-child)::before {
        display: none;
        content: none;
    }

    .lifetime-pl-section .player-stats-link {
        width: max-content;
    }
}

/* Let the full individual P/L timeline scroll instead of clipping on phones. */
.chart-scroll-content {
    width: 100%;
}

@media (max-width: 600px) {
    .player-detail-page .chart-container {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .player-detail-page .chart-scroll-content {
        min-width: 620px;
    }
}

/* Searchable, expandable session history on player profiles. */
.player-session-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.player-session-history-header h3 {
    margin: 0;
}

.session-history-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.session-history-club-filter select {
    min-width: 0;
    padding: 0.36rem 1.7rem 0.36rem 0.58rem;
    color: var(--color-text-muted);
    background: rgba(0, 0, 0, 0.28)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238C8A82' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        no-repeat right 0.6rem center;
    background-size: 0.65rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 9px;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 400;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.session-history-club-filter select:focus {
    color: var(--color-action);
    border-color: var(--color-action);
    outline: 0;
}

.session-history-search {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 0.38rem;
    padding: 0.36rem 0.58rem;
    color: var(--color-text-muted);
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--color-border-muted);
    border-radius: 9px;
    font-family: var(--font-body);
    font-weight: 400;
}

.session-history-search:focus-within {
    color: var(--color-action);
    border-color: var(--color-action);
}

.session-history-search input {
    width: 125px;
    min-width: 0;
    padding: 0;
    color: #FFFFFF;
    background: transparent;
    border: 0;
    box-shadow: none;
    outline: 0;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 400;
}

.session-history-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.8rem;
}

.session-history-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0;
    color: var(--color-action);
    background: transparent;
    border: 0;
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
}

.session-history-toggle:hover {
    color: var(--color-action-hover);
}

.session-history-toggle-arrow {
    display: inline-block;
    font-size: 0.9rem;
    transition: transform 0.18s ease;
}

.session-history-toggle.expanded .session-history-toggle-arrow {
    transform: rotate(180deg);
}

@media (max-width: 600px) {
    .player-session-history-header {
        align-items: stretch;
        flex-direction: column;
        gap: 0.55rem;
    }

    .session-history-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .session-history-club-filter select,
    .session-history-search,
    .session-history-search input {
        width: 100%;
    }

    .my-clubs-header {
        align-items: stretch;
        flex-direction: column;
        gap: 0.55rem;
    }

    .club-search {
        margin-left: 0;
        width: 100%;
    }

    .club-search input {
        width: 100%;
    }
}

/* Navigation stays bold and structured even though body copy is monospaced. */
.nav-links a,
.nav-links a:hover,
.nav-links a.active {
    font-family: var(--font-display);
    font-weight: 700;
}

/* Add a complete player profile from the roster in one compact flow. */
.player-roster-section:has(.roster-add-player[open]) {
    z-index: 120;
}

.roster-add-player-popover {
    width: min(460px, calc(100vw - 2rem));
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.roster-add-player-popover-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.roster-add-player-popover-header strong,
.roster-add-player-popover-header span {
    display: block;
}

.roster-add-player-popover-header strong {
    color: #FFFFFF;
    font-family: var(--font-display);
    font-size: 1rem;
}

.roster-add-player-popover-header span {
    margin-top: 0.12rem;
    color: var(--color-text-muted);
    font-size: 0.7rem;
}

.roster-add-player-close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid var(--color-border-muted);
    border-radius: 50%;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

.roster-add-player-close:hover {
    color: #FFFFFF;
    border-color: var(--color-action);
}

.roster-add-player-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.new-player-venmo-field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    overflow: hidden;
    color: var(--color-action);
    background: #050505;
    border: 1.5px solid #B3945A;
    border-radius: 8px;
}

.new-player-venmo-field > span {
    padding-left: 0.65rem;
}

.form-group .new-player-venmo-field input {
    min-width: 0;
    border: 0;
    border-radius: 0;
}

.new-player-venmo-field:focus-within {
    border-color: var(--color-action);
    box-shadow: 0 0 0 3px rgba(253, 233, 146, 0.12);
}

.roster-add-player-form .card-slider-picker {
    width: 100%;
    margin: 0.15rem 0 0.85rem;
}

.roster-add-player-form .card-picker-face {
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 18px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.roster-add-player-form .card-slider-preview {
    min-height: 132px;
    padding: 1.35rem 0.8rem 1rem;
}

.roster-add-player-form .card-slider-preview .player-card-large {
    --roster-offset: 0px;
    width: 60px;
    height: 84px;
    border-radius: 7px;
    animation: playerRosterFloat 4.6s ease-in-out infinite;
}

.roster-add-player-form .card-customization-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}

.roster-add-player-form .card-customization-title,
.roster-add-player-form .card-picker-headgear-zone {
    grid-column: 1 / -1;
}

.roster-add-player-form .card-customization-title {
    padding: 0.8rem 1rem 0.2rem;
    font-family: var(--font-display) !important;
    font-weight: 700;
}

.roster-add-player-form .card-picker-zone {
    padding: 0.7rem 0.75rem;
    border: 0;
}

.roster-add-player-form .card-color-palette {
    padding: 0.7rem 0.75rem 0.9rem;
    border: 0;
}

.roster-add-player-form .card-color-swatches {
    grid-template-columns: repeat(8, minmax(18px, 22px));
    gap: 0.32rem;
}

.roster-add-player-form label,
.roster-add-player-form input,
.roster-add-player-form .card-carousel-label,
.roster-add-player-form .card-carousel-label > span,
.roster-add-player-form .card-carousel-label output,
.roster-add-player-form .card-carousel-option,
.roster-add-player-form .card-color-palette legend {
    font-family: var(--font-body);
    font-weight: 400;
}

.roster-add-player-form .card-carousel-label > span {
    text-transform: none;
}

.roster-add-player-form .roster-add-player-fields label {
    font-size: 0.68rem;
}

.roster-add-player-form .roster-add-player-fields input {
    font-size: 0.76rem;
}

/* Roboto Mono is always used at its regular weight, including all figures. */
.money-value,
.money-amount,
.transaction-amount,
.settlement-amount,
.validation-value,
.finance-value,
.extreme-amount,
.edit-amount-input,
.ledger-stat-value,
.overview-value,
.stat-value,
.session-history-pl,
.game-award-value,
.player-total-amount,
.ledger-neutral-amount,
.difference-value,
.balance-helper-difference,
.quick-value,
.completion-payment-transfer strong,
input[name="amount"],
input[name="small_blind"],
input[name="big_blind"],
input[name="base_buyin"] {
    font-weight: 400 !important;
    font-feature-settings: "tnum" 1, "zero" 0 !important;
}

.transaction-time,
.audit-timestamp,
time[data-timestamp],
.player-roster-search > span,
.player-roster-search input,
.audit-event-content > p,
.audit-drawer-close,
.completion-settlement-note,
.completion-payment-player-copy small,
.player-venmo-edit-field input,
.leaderboard-filter-form > label,
.leaderboard-select-wrap select,
.session-back-link,
.session-participants-count {
    font-weight: 400;
}

.transaction-time,
.audit-timestamp,
time[data-timestamp] {
    font-family: var(--font-numbers) !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "zero" 0 !important;
}

@media (max-width: 600px) {
    .roster-add-player-popover {
        width: calc(100vw - 1rem);
        max-height: calc(100dvh - 1rem);
    }

    .roster-add-player-fields {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .roster-add-player-form .card-slider-preview {
        min-height: 125px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .roster-add-player-form .card-slider-preview .player-card-large {
        animation: none;
    }
}

/* Mobile roster header: title first, then search and add controls together. */
@media (max-width: 600px) {
    .player-roster-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.65rem 0.55rem;
    }

    .player-roster-heading-tools {
        display: contents;
    }

    .player-roster-heading-tools h3 {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .player-roster-search {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        min-height: 36px;
    }

    .player-roster-actions {
        grid-column: 2;
        grid-row: 2;
        width: auto;
        justify-content: flex-end;
    }

    .roster-add-player > summary {
        min-height: 36px;
    }

    body.roster-player-modal-open {
        overflow: hidden;
    }

    .roster-add-player-popover {
        position: fixed;
        top: var(--roster-modal-top, calc(7rem + env(safe-area-inset-top)));
        right: auto;
        bottom: max(0.2rem, env(safe-area-inset-bottom));
        left: 50%;
        display: flex;
        width: calc(100vw - 0.4rem);
        max-height: none;
        flex-direction: column;
        overflow: hidden;
        border-radius: 14px;
        transform: translateX(-50%);
    }

    .roster-add-player-popover-header {
        flex: 0 0 auto;
    }

    .roster-add-player-form {
        flex: 1 1 auto;
        min-height: 0;
        padding: 0 0.15rem 0.15rem;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
    }

    .roster-add-player-form > .btn[type="submit"] {
        position: sticky;
        z-index: 5;
        bottom: 0;
        margin-top: 0.35rem;
        box-shadow: 0 -10px 24px rgba(11, 10, 13, 0.82);
    }

    .roster-add-player-form .card-customization-panel {
        grid-template-columns: 1fr;
    }

    .roster-add-player-form .card-customization-title,
    .roster-add-player-form .card-picker-zone,
    .roster-add-player-form .card-color-palette {
        grid-column: 1;
    }

    .roster-add-player-form .card-color-palette {
        padding-block: 0.75rem;
        text-align: center;
    }

    .roster-add-player-form .card-color-palette-shoes {
        margin-top: 0.35rem;
    }

    .roster-add-player-form .card-color-swatches {
        grid-template-columns: repeat(8, 22px);
        justify-content: center;
        gap: 0.5rem;
    }
}

.buyin-entry-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.buyin-entry-header > h3 {
    margin: 0;
}

.available-player-search {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
    padding: 0.48rem 0.65rem;
    color: var(--color-text-muted);
    background: rgba(0, 0, 0, 0.24);
    border: 1px solid var(--color-border-muted);
    border-radius: 9px;
}

.available-player-search input {
    width: 100%;
    min-width: 0;
    padding: 0;
    color: #FFFFFF;
    background: transparent;
    border: 0;
    box-shadow: none;
    font-family: var(--font-body);
    font-weight: 400;
}

.available-player-search input:focus {
    box-shadow: none;
    outline: none;
}

.available-player-no-results {
    margin: 0.6rem 0;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    text-align: center;
}

.buyin-player-entry {
    position: relative;
    display: flex;
    align-self: stretch;
    min-width: 0;
}

.buyin-player-entry .multi-player-btn {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: unset;
}

/* Buy-in and cash-out use the same player tile border geometry. */
#buyin-player-selector .player-btn,
#cashout-player-selector .player-btn {
    width: 100%;
    border-width: 2px;
    border-radius: 8px;
}

#buyin-player-selector .player-btn:not(.selected):hover,
#cashout-player-selector .player-btn:not(.selected):hover {
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    border-color: var(--color-border-muted);
    box-shadow: none;
    transform: none;
}

#buyin-player-selector .player-btn.selected,
#buyin-player-selector .player-btn.selected:hover,
#cashout-player-selector .player-btn.selected,
#cashout-player-selector .player-btn.selected:hover {
    border-color: var(--color-action);
}

.player-roster-link > strong,
.available-player-name,
#buyin-player-selector .player-btn > span:last-child,
#cashout-player-selector .player-btn > span:last-child {
    -webkit-user-select: none;
    user-select: none;
}

.buyin-player-remove-button {
    position: absolute;
    z-index: 3;
    top: -0.28rem;
    right: -0.28rem;
    margin: 0;
}

.buyin-player-remove-button.remove-btn {
    width: 22px;
    height: 22px;
    color: var(--color-text-secondary);
    background: #171713;
    border: 1px solid var(--color-border-muted);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.35);
    opacity: 1;
}

.buyin-player-remove-button.remove-btn:hover {
    color: #FFFFFF;
    background: var(--color-negative);
    border-color: var(--color-negative);
}

.buyin-player-entry.is-removing {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.9);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Choose the session participants before recording any transactions. */
.session-participants-card {
    padding: 0.9rem 1rem;
}

.session-participants-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.session-participants-header h3 {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.05rem;
}

.session-participants-count {
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 400;
}

.session-participant-list {
    gap: 0.45rem;
}

.session-participant {
    gap: 0.42rem;
    padding: 0.38rem 0.5rem;
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--color-border-muted);
    box-shadow: none;
}

.session-participant > span:not(.player-card-icon) {
    font-family: var(--font-display);
    font-weight: 700;
}

.session-participants-empty {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

@media (max-width: 600px) {
    .session-participants-card {
        padding: 0.68rem 0.75rem;
    }

    .session-participants-header {
        margin-bottom: 0.5rem;
    }

    .session-participant {
        padding: 0.32rem 0.45rem;
        font-size: 0.78rem;
    }
}

/* Section statistics and table headings use readable display-face title casing. */
.session-ledger .ledger-stat-label,
.session-ledger .player-balances-section .data-table th,
.lifetime-pl-section .leaderboard-table th,
.player-detail-page .data-table th,
.player-detail-page .stats-overview .stat-label,
.profile-page .my-results-overview .stat-label,
.session-ledger .player-balance-row > td:not(:first-child)::before,
.lifetime-pl-section .leaderboard-row > td:not(:first-child)::before {
    font-family: var(--font-display) !important;
    text-transform: none;
}

.session-ledger .ledger-stat-label,
.session-ledger .player-balances-section .data-table th,
.lifetime-pl-section .leaderboard-table th,
.player-detail-page .data-table th,
.session-ledger .player-balance-row > td:not(:first-child)::before,
.lifetime-pl-section .leaderboard-row > td:not(:first-child)::before {
    font-weight: 700;
}

/* Preserve the lighter treatment requested for player-stat labels. */
.player-detail-page .stats-overview .stat-label {
    font-weight: 400;
}

/* The audit-drawer-toggle base rule styles a fixed floating tab (legacy
   layout). Inside Session Options it's an inline btn-outline-action button
   instead, so re-assert the outline look here rather than the filled one. */
.session-option-action.audit-drawer-toggle {
    background: transparent;
    color: var(--color-action);
    border: 1px solid var(--color-action);
}

.session-option-action.audit-drawer-toggle:hover {
    background: rgba(253, 233, 146, 0.09);
    color: var(--color-money-soft);
    border-color: var(--color-action-hover);
}

/* --- Accounts, clubs, and profile claims -------------------------------- */

.nav-account {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
    padding-left: 0.9rem;
}

.nav-club-switch {
    color: var(--color-text-secondary);
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: none;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--color-border-muted);
    border-radius: 8px;
    white-space: nowrap;
    transition: color 0.16s ease, border-color 0.16s ease;
}

.nav-club-switch:hover {
    color: var(--color-action);
    border-color: var(--color-action);
}

.nav-signout {
    color: var(--color-text-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.3rem 0.2rem;
    transition: color 0.16s ease;
}

.nav-signout:hover {
    color: var(--color-action);
}

/* Sign-in, sign-up, and first-run setup share one narrow card. */
.account-card {
    max-width: 420px;
    margin: 2.5rem auto;
    padding: 1.75rem;
    background: var(--color-surface);
    border: 1.5px solid var(--color-action);
    border-radius: 14px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}

.account-header {
    margin-bottom: 1.35rem;
    text-align: center;
}

.account-header h2 {
    color: var(--color-action);
    font-size: 1.5rem;
    margin-bottom: 0.4rem;
}

.account-header p {
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    line-height: 1.5;
}

.welcome-page .account-card {
    max-width: 500px;
}

.welcome-subtitle {
    font-size: 0.78rem;
    text-wrap: balance;
}

.account-alt,
.account-note {
    margin-top: 1.2rem;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    text-align: center;
}

.account-alt a {
    color: var(--color-action);
}

/* Each club is drawn as a little clubhouse: a pitched roof above a plain
   rectangular body, so names and figures stay on flat ground and readable. */
/* Five card-width slots across the row: up to three real clubs that scroll
   in their own viewport, plus the Join/Start tiles pinned after them and
   never part of that scroll. A fixed card width (not a percentage of a
   dynamic flex parent) is what makes all five slots line up exactly —
   percentage math here is what kept silently producing the wrong size in
   earlier passes at this carousel. */
/* Five equal slots — three real clubs that scroll, plus Join/Start pinned
   after them — sized by flex-grow ratio (3 shares vs. 1 share each) rather
   than a percentage or viewport-unit guess at the row's real width. That
   ratio holds exactly regardless of how wide the row actually ends up,
   which a %/vw-based width kept getting wrong inside this padded card. The
   arrows move below, out of this row entirely, so they stop competing with
   the cards for its width. */
/* A 5-column grid — exact equal shares, unlike nested flex-grow ratios
   which kept coming out a hair uneven. Three real clubs (one item spanning
   3 columns, scrolling internally) plus Join and Start pinned at one
   column each. The arrow nav is a second row spanning only those same
   first 3 columns, centered under the clubs alone. */
.my-clubs-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.my-clubs-header h3 {
    margin: 0;
}

.club-search {
    margin-left: auto;
}

.club-list-carousel {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.1rem 1.1rem;
    margin-top: 1.1rem;
}

.club-list {
    grid-column: span 3;
    min-width: 0;
    display: flex;
    gap: 1.1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.club-list::-webkit-scrollbar {
    display: none;
}

.club-list .club-list-entry {
    /* --club-visible-slots is set inline per render: however many club
       columns actually exist (up to 3), so 1-2 clubs fill the row exactly
       as evenly as 3 do, instead of leaving unused reserved-for-3 space. */
    flex: 0 0 calc((100% - (var(--club-visible-slots, 3) - 1) * 1.1rem) / var(--club-visible-slots, 3));
    min-width: 0;
    scroll-snap-align: start;
    perspective: 900px;
}

/* Join a club / Start a club: exactly one grid column each, outside the
   scrolling viewport, so they never move when the clubs page. */
.club-list-pinned {
    grid-column: span 1;
    min-width: 0;
    perspective: 900px;
}

.club-carousel-nav {
    grid-column: span 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.club-carousel-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: 50%;
    cursor: pointer;
    transition: color 0.16s ease, border-color 0.16s ease;
}

.club-carousel-arrow:hover {
    color: var(--color-action);
    border-color: var(--color-action);
}

.clubcard {
    /* .player-card-icon's base size is a fixed small px box; both need
       overriding or the aspect-ratio below has no effect. */
    width: 100%;
    height: auto;
    max-width: 280px;
    aspect-ratio: 5 / 7;
    position: relative;
    display: block;
    margin: 0 auto;
    text-decoration: none;
    color: inherit;
    border-radius: 20px;
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.35, 1);
}

.clubcard:hover {
    transform: translateY(-2px);
}

.clubcard.is-flipping {
    transform: rotateY(180deg);
}

.clubcard-face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.clubcard-face-front {
    transition: border-color 0.16s ease;
}

.clubcard:hover .clubcard-face-front {
    border-color: var(--color-action);
}

/* The back: a red card back, briefly shown mid-flip on the way to the club. */
/* A real card-back lattice: two crossed diagonal grids of fine lines make
   the diamond weave, framed by an inset border like a printed card's edge. */
/* A repeating cluster of five dots — a small center bloom with four petals
   — tiled across the card back, closer to a real deck's printed pattern
   than a plain crosshatch. */
.clubcard-face-back,
.clubcard-add-inner {
    align-items: center;
    background:
        radial-gradient(circle at 50% 50%, rgba(244, 239, 223, 0.24) 0 3.4px, transparent 3.6px),
        radial-gradient(circle at 50% 18%, rgba(244, 239, 223, 0.17) 0 2.2px, transparent 2.4px),
        radial-gradient(circle at 50% 82%, rgba(244, 239, 223, 0.17) 0 2.2px, transparent 2.4px),
        radial-gradient(circle at 18% 50%, rgba(244, 239, 223, 0.17) 0 2.2px, transparent 2.4px),
        radial-gradient(circle at 82% 50%, rgba(244, 239, 223, 0.17) 0 2.2px, transparent 2.4px),
        linear-gradient(155deg, #8E1A1F 0%, #6E1216 100%);
    background-size: 26px 26px, 26px 26px, 26px 26px, 26px 26px, 26px 26px, 100% 100%;
    border: 2px solid #F4EFDF;
    box-shadow: inset 0 0 0 4px #6E1216, inset 0 0 0 5px rgba(244, 239, 223, 0.55);
}

.clubcard-face-back {
    transform: rotateY(180deg);
}

/* The last tile in My Clubs: a static card back doubling as the button that
   opens Start/Join. Same red pattern as a flipped card's reverse. */
/* Reset the browser's own button chrome so this tile is sized by nothing
   but the shared .clubcard rule, exactly like every real club card. */
.clubcard-add {
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease;
}

.clubcard-add:hover {
    transform: translateY(-2px);
}

.clubcard-add-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    width: 100%;
    height: 100%;
    padding: 1.2rem 0.9rem;
    color: #F4EFDF;
    border-radius: inherit;
    transition: border-color 0.16s ease;
}

.clubcard-add:hover .clubcard-add-inner {
    border-color: var(--color-action);
}

.clubcard-add-label {
    max-width: 10rem;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
}

.clubcard-add-subtext {
    max-width: 10.5rem;
    color: #FFFFFF;
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 400;
    text-align: center;
    line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
    .clubcard {
        transition: none;
    }
}

/* Big, unmistakable — the suit is the club's identity here. */
.player-card-icon.player-card-club .player-card-corner-suit {
    font-size: 2rem;
}

.player-card-icon.player-card-club .player-card-corner-top {
    top: 0.7rem;
    left: 0.75rem;
}

.player-card-icon.player-card-club .player-card-corner-bottom {
    right: 0.75rem;
    bottom: 0.7rem;
}

.player-card-icon.player-card-club .player-card-center-suit {
    font-size: 6.2rem;
    opacity: 0.2;
}

/* The readable content, laid over the card face's open middle, top to
   bottom: badges, then identity, then the code/result footer pinned low. */
.clubcard-plate {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 84%;
    height: 100%;
    /* Bottom padding matches the top: the footer needs to clear the bottom
       corner suit mark the same way the badges clear the top one. */
    padding: 2.1rem 0.3rem 2.1rem;
    text-align: center;
}

.clubcard-identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    margin: auto 0;
}

.clubcard-plate .club-card-name {
    font-size: 1.5rem;
    line-height: 1.15;
}

.clubcard-plate .club-card-meta {
    max-width: 14rem;
}

.clubcard-plate .club-card-name,
.clubcard-plate .club-card-meta,
.clubcard-plate .club-card-result-net {
    color: #171713;
}

.clubcard-plate .clubhouse-badges,
.clubcard-plate .clubhouse-code,
.clubcard-plate .clubhouse-result {
    justify-content: center;
}

.clubcard-plate .clubhouse-code-label,
.clubcard-plate .club-card-result-label {
    color: #6B6858;
    font-family: var(--font-body);
}

.clubcard-plate .clubhouse-code-value {
    color: #171713;
    font-family: var(--font-display);
    font-weight: 700;
}

.clubcard-plate .club-card-badge {
    color: #221C08;
    background: var(--color-action);
    border-color: var(--color-action);
}

.clubcard-plate .club-card-result-net.positive {
    color: #175E28 !important;
}

.clubcard-plate .club-card-result-net.negative {
    color: #C23B2E !important;
}

/* Code and standing sit in their own strip at the card's foot, set off by a
   hairline the way a real card's bottom edge separates from its face. */
.clubcard-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    margin-bottom: 0.5rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(23, 23, 19, 0.14);
}

.clubcard-footer-divider {
    width: 1px;
    height: 1.4rem;
    background: rgba(23, 23, 19, 0.14);
}

.clubcard-footer .clubhouse-code,
.clubcard-footer .clubhouse-result {
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    margin-top: 0;
    padding-top: 0;
}

/* A club you are waiting to be let into is drawn unfinished. It never flips
   (there's nowhere to go yet), so it skips the face-front/face-back split
   and needs its own centering restored instead of .clubcard's plain block. */
.clubcard-waiting {
    display: flex;
    align-items: stretch;
    justify-content: center;
    cursor: default;
}

.clubcard-waiting.player-card-icon {
    filter: grayscale(0.85);
    opacity: 0.75;
}

.clubhouse-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    min-height: 1.15rem;
}

.clubhouse-result {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.6rem;
}

.club-card-name {
    color: #FFFFFF;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.club-card-meta {
    color: var(--color-text-muted);
    font-size: 0.7rem;
    line-height: 1.35;
}

/* The invite code, right on the club's own card in My Clubs. */
.clubhouse-code {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    margin-top: 0.1rem;
}

.clubhouse-code-label {
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: 0.6rem;
    letter-spacing: 0.06em;
}

.clubhouse-code-value {
    color: var(--color-action);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.1em;
}

.club-card-badge {
    padding: 0.16rem 0.45rem;
    color: var(--color-action);
    border: 1px solid var(--color-action);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 0.58rem;
    font-weight: 700;
    white-space: nowrap;
}

.club-card-badge-alert {
    color: var(--color-action-ink);
    background: var(--color-action);
}


.club-card-result-label {
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: 0.62rem;
    white-space: nowrap;
}

.club-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    align-items: start;
}

.club-actions .card h3 {
    color: var(--color-action);
    margin-bottom: 0.3rem;
}


.join-code {
    display: inline-block;
    padding: 0.45rem 0.85rem;
    color: var(--color-action);
    background: #100F0C;
    border: 1px solid var(--color-action);
    border-radius: 9px;
    font-family: var(--font-numbers);
    font-size: 1.15rem;
    letter-spacing: 0.18em;
}

.member-list {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.9rem;
}

.member-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin: 0;
    padding: 0.7rem 0.85rem;
    background: #1A1A16;
    border: 1px solid var(--color-border-muted);
    border-radius: 10px;
}

.member-identity {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    flex: 1 1 180px;
}

.member-identity > strong {
    color: #FFFFFF;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.member-playing-as {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
}

.member-profile-form {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0;
}

.member-profile-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.member-profile-label {
    color: var(--color-text-muted);
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 700;
}

.member-profile-select {
    padding: 0.4rem 0.6rem;
    color: #FFFFFF;
    background: #100F0C;
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    cursor: pointer;
}

.member-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
}

@media (max-width: 600px) {
    .nav-account {
        margin-left: 0;
        padding-left: 0;
    }

    .member-row {
        align-items: stretch;
        flex-direction: column;
        gap: 0.6rem;
    }

    .member-profile-controls,
    .member-profile-form {
        width: 100%;
    }

    .member-profile-select {
        flex: 1 1 100%;
        width: 100%;
    }

    .member-row-actions .btn {
        flex: 1;
    }
}

/* A player linked to a login gets a small mark, so it is clear who can sign
   in as themselves and who is only a profile someone else records for. */
.linked-account-mark {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 0.35rem;
    vertical-align: middle;
    background: var(--color-positive);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--color-positive);
    text-indent: -999em;
    overflow: hidden;
}

.linked-account-note {
    color: var(--color-text-muted);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.member-role-form {
    display: inline-flex;
    flex: 0 0 auto;
    margin: 0;
}

.member-role-form .btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Which club you are in, sitting with the wordmark because the nav links
   underneath it are all scoped to that club. */
.nav-current-club {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.28rem 0.7rem;
    background: rgba(253, 233, 146, 0.07);
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.16s ease, background 0.16s ease;
}

.nav-current-club:hover {
    background: rgba(253, 233, 146, 0.12);
    border-color: var(--color-action);
}

.nav-current-club-name {
    color: var(--color-action);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    max-width: 15ch;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .nav-current-club {
        padding: 0.22rem 0.5rem;
    }

    .nav-current-club-name {
        max-width: 100%;
        min-width: 0;
    }
}

.club-rename-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.6rem 0 0;
    flex-wrap: wrap;
}

.club-rename-form input {
    flex: 1 1 220px;
    min-width: 0;
    padding: 0.5rem 0.7rem;
    color: #FFFFFF;
    background: #100F0C;
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
}

.club-rename-form input:focus {
    outline: none;
    border-color: var(--color-action);
}

/* Who was at the table, shown on each session card. */
.session-lineup {
    display: flex;
    flex-wrap: wrap;
    /* The card characters' hats and limbs overhang their pill, so rows need
       more room between them than the chips themselves suggest. */
    gap: 0.55rem 0.35rem;
    margin-top: 0.9rem;
}

.session-lineup-player {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.5rem 0.28rem 0.32rem;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--color-border-muted);
    border-radius: 999px;
    max-width: 100%;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.16s ease, background 0.16s ease;
}

.session-lineup-player:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--color-action);
}

.session-lineup-player:hover .session-lineup-name {
    color: var(--color-action);
}

.session-lineup-name {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-lineup-net {
    font-size: 0.7rem;
    white-space: nowrap;
}

.session-lineup-net.positive {
    color: var(--color-positive);
}

.session-lineup-net.negative {
    color: var(--color-negative);
}

@media (max-width: 600px) {
    /* Stacked, the toolbar's two controls should each own the full width
       rather than drifting to one side. */
    .sessions-list-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .sessions-list-toolbar .session-date-search {
        width: 100%;
    }
}

/* Six figures across two rows of three, same rhythm as a player's own page. */
.my-results-overview {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 600px) {
    .my-results-overview {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Your standing in a club, on its card in the profile list. */

.club-card-result-net {
    font-size: 0.92rem;
}


.club-card-result-label {
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: 0.62rem;
    white-space: nowrap;
}

/* Who made the change. Entries from before accounts existed have no actor
   and simply omit this line. */
.audit-event-actor {
    margin-top: 0.25rem;
    color: var(--color-text-muted);
    font-size: 0.7rem;
}

/* Changing who plays as a profile is rare, so it stays folded away. */
.member-relink {
    flex: 0 0 auto;
}

.member-relink > summary {
    color: var(--color-text-muted);
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 700;
    list-style: none;
    padding: 0.2rem 0.4rem;
}

.member-relink > summary::-webkit-details-marker {
    display: none;
}

.member-relink > summary:hover {
    color: var(--color-action);
}

.member-relink[open] {
    flex: 1 1 100%;
    margin-top: 0.4rem;
}

@media (max-width: 600px) {
    /* The overall ledger table has four columns and nowhere to put them on a
       phone, so each player becomes a block with their net alongside. */
    .ledger-balance-table thead {
        display: none;
    }

    .ledger-balance-table,
    .ledger-balance-table tbody,
    .ledger-balance-row {
        display: block;
        width: 100%;
        /* Beats the generic 500px minimum on .data-table that keeps wide
           tables scrollable; stacked rows need no minimum. */
        min-width: 0;
    }

    .ledger-balance-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 1.05rem 0 0.95rem;
        border-bottom: 1px solid var(--color-border-muted);
    }

    .ledger-balance-row:last-child {
        border-bottom: 0;
    }

    .ledger-balance-row > td {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 0.14rem;
        padding: 0.2rem 0.28rem;
        border: 0;
        white-space: nowrap;
    }

    .ledger-balance-row > td:first-child {
        grid-column: 1 / -1;
        padding: 0 0.28rem 0.55rem;
        white-space: normal;
    }

    .ledger-balance-row > td:not(:first-child)::before {
        content: attr(data-label);
        color: var(--color-text-muted);
        font-family: var(--font-display);
        font-size: 0.66rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }
}

@media (max-width: 600px) {
    /* Session header controls sat on uneven rows; one row of equal buttons
       reads better than two ragged ones. */
    .session-completed-page .header-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        width: 100%;
    }

    .session-completed-page .header-actions .completed-badge,
    .session-completed-page .header-actions .completed-settlement-action,
    .session-completed-page .header-actions .inline-form,
    .session-completed-page .header-actions .inline-form .btn {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        white-space: nowrap;
    }
}

/* The Complete badge and the way through to its settlement, stacked together
   at the top of a finished card. Outside the card's own link, since a link
   cannot nest inside another. */
.session-card-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    flex: 0 0 auto;
}

.session-card-settlement {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    color: var(--color-action);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.16s ease, background 0.16s ease;
}

.session-card-settlement:hover {
    background: rgba(253, 233, 146, 0.09);
    border-color: var(--color-action);
}


/* Name and Venmo reuse the player inline-edit styles; they only need their
   own compact two-column layout, since they are not in a profile header. */
.account-detail-rows {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.7rem;
}

.account-detail-row {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    align-items: center;
    gap: 0.6rem;
    margin: 0;
}

.account-detail-label {
    color: var(--color-text-muted);
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.account-detail-row .player-venmo-edit-actions {
    grid-column: 2;
}

@media (max-width: 600px) {
    .account-detail-row {
        grid-template-columns: 3.8rem minmax(0, 1fr);
        gap: 0.45rem;
    }
}


/* Getting into another club is a real action on this page, not a footnote,
   and for someone with no clubs it is the only thing to do. */
/* Each of these now wraps exactly one .card, so the outer zone's own frame
   just doubled up against the card's border — drop it, keep the card's. */
.club-actions-zone {
    background: none;
    border: 0;
    border-radius: 0;
}

.club-actions-zone > summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-action);
    font-family: var(--font-display);
    font-size: 0.86rem;
    font-weight: 700;
}

.club-actions-zone > summary::before {
    content: '+';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    color: var(--color-action-ink);
    background: var(--color-action);
    border-radius: 50%;
    font-size: 0.9rem;
    line-height: 1;
}

.club-actions-zone[open] > summary::before {
    content: '−';
}

.club-actions-zone:hover > summary {
    color: var(--color-money-soft);
}

/* Set once and rarely revisited, so it reads quieter than the clubs above. */
.account-details {
    margin-top: 1.25rem;
}

/* --- Club home: the sessions catalogue, now a card under the roster ------ */

.session-catalog-section {
    margin-top: 1.25rem;
}

.session-catalog-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.session-catalog-header > h3 {
    margin: 0;
}

.session-catalog-count {
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

/* The toolbar sits inside a card now, so it no longer needs the page-level
   top padding that separated it from the header. */
.session-catalog-section .sessions-list-toolbar {
    padding-top: 0.75rem;
}

.session-date-range {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.session-date-range-field {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.3rem 0.55rem;
    color: var(--color-text-muted);
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--color-border-muted);
    border-radius: 9px;
    font-family: var(--font-body);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.session-date-range-field:focus-within {
    color: var(--color-action);
    border-color: var(--color-action);
}

.session-date-range-field input {
    padding: 0;
    color: #FFFFFF;
    background: transparent;
    border: 0;
    box-shadow: none;
    outline: 0;
    font-family: var(--font-body);
    font-size: 0.72rem;
    text-transform: none;
    letter-spacing: normal;
    color-scheme: dark;
}

.session-filter-clear {
    padding: 0.3rem 0.6rem;
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid var(--color-border-muted);
    border-radius: 9px;
    font-family: var(--font-body);
    font-size: 0.7rem;
    cursor: pointer;
}

.session-filter-clear:hover {
    color: var(--color-action);
    border-color: var(--color-action);
}

.session-filter-clear[hidden] {
    display: none;
}

.session-catalog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.9rem;
}

/* Archiving a session is routine, not a call to action, so this reads as a
   quiet aside rather than a button competing with See all sessions. */
.sessions-archive-link-subtle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: 0.72rem;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.16s ease, border-color 0.16s ease;
}

.sessions-archive-link-subtle:hover {
    color: var(--color-action);
    border-bottom-color: currentColor;
}

/* The last group carries the toggle underneath it; drop its trailing gap. */
.session-catalog > .session-catalog-group:last-child {
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .session-date-range {
        width: 100%;
    }

    .session-date-range-field {
        flex: 1 1 8rem;
        justify-content: space-between;
    }
}

/* --- Club home header: name on the left, invite code on the right -------- */

.club-home-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.club-home-identity {
    min-width: 0;
}

.club-home-name {
    margin: 0;
}

.club-name-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.club-name-edit-trigger {
    padding: 0.15rem 0.35rem;
    color: var(--color-text-muted);
    background: transparent;
    border: 0;
    border-radius: 6px;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
}

.club-name-edit-trigger:hover {
    color: var(--color-action);
}

.club-name-edit-trigger[hidden],
.club-name-edit-field[hidden],
.club-name-edit-actions[hidden],
.club-home-name[hidden] {
    display: none;
}

.club-name-edit-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* The fixed "Club" sits inside the field so the name always reads as one. */
.club-name-field {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.55rem;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--color-border-muted);
    border-radius: 9px;
}

.club-name-field:focus-within {
    border-color: var(--color-action);
}

.club-name-prefix {
    color: var(--color-text-muted);
    font-family: var(--font-display);
    font-weight: 600;
    white-space: nowrap;
}

.club-name-field input {
    flex: 1 1 8rem;
    min-width: 0;
    padding: 0;
    color: #FFFFFF;
    background: transparent;
    border: 0;
    box-shadow: none;
    outline: 0;
    font-family: var(--font-display);
    font-size: 0.95rem;
}

.club-home-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.club-invite-code {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    padding: 0.5rem 0.9rem;
    background: rgba(0, 0, 0, 0.28);
    border: 1px dashed var(--color-border-muted);
    border-radius: 10px;
}

.club-invite-code-label {
    color: var(--color-text-muted);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.club-invite-code-value {
    color: var(--color-action);
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.1;
}

.club-invite-code-hint {
    max-width: 16rem;
    color: var(--color-text-muted);
    font-size: 0.66rem;
    text-align: right;
}

@media (max-width: 600px) {
    .club-invite-code {
        align-items: center;
        width: 100%;
    }

    .club-invite-code-hint {
        max-width: none;
        text-align: center;
    }
}

/* An owner's badge replaces the "View profile" hint on their roster card. */
.roster-owner-badge {
    align-self: center;
}

.roster-members-zone {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--color-border-muted);
}

.roster-members-zone > summary {
    color: var(--color-text-muted);
    font-family: var(--font-display);
    font-size: 0.8rem;
    cursor: pointer;
}

.roster-members-zone > summary:hover {
    color: var(--color-action);
}

/* Join requests sit under the club they belong to, on the profile page. */
.club-list-entry {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.club-list-entry[hidden] {
    display: none;
}

.club-pin-form {
    position: absolute;
    /* .club-list scrolls on the x-axis, which per spec makes the browser
       clip the y-axis too — anything poking past the card's own top edge
       gets cut off. Stay inside the card's box instead. */
    top: 0.3rem;
    right: 0.3rem;
    z-index: 2;
}

/* A literal pushpin stuck through the card's corner, not a badge — bigger,
   angled, faded when the club isn't pinned so it reads as an invitation
   rather than clutter, full color and lifted with a shadow once it is. */
.club-pin-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    background: transparent;
    border: 0;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transform: rotate(-20deg);
    transform-origin: 65% 35%;
    filter: grayscale(1) opacity(0.55) drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.4));
    transition: transform 0.16s ease, filter 0.16s ease;
}

.club-list-entry:hover .club-pin-button,
.club-pin-button:focus-visible {
    transform: rotate(-12deg) scale(1.08);
    filter: grayscale(0.5) opacity(0.85) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.45));
}

.club-pin-button.is-pinned {
    transform: rotate(-20deg) scale(1.12);
    filter: grayscale(0) opacity(1) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5));
}

.club-pin-button.is-pinned:hover {
    transform: rotate(-12deg) scale(1.18);
}

.clubhouse-requests {
    padding: 0.7rem 0.85rem;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--color-border-muted);
    border-radius: 12px;
}

.clubhouse-requests > summary {
    color: var(--color-action);
    font-family: var(--font-display);
    font-size: 0.8rem;
    cursor: pointer;
}

@media (max-width: 600px) {
    .club-home-header {
        align-items: stretch;
        flex-direction: column;
    }

    .club-home-actions {
        justify-content: space-between;
    }
}

/* A live game says so on its card, the way a finished one does. */
.session-badge-live {
    color: var(--color-negative);
    border-color: var(--color-negative);
}

/* A recording-style pulse on the dot, not the whole badge. */
.live-dot {
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    background: var(--color-negative);
    border-radius: 50%;
    animation: live-dot-pulse 1.4s ease-in-out infinite;
}

@keyframes live-dot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
    .live-dot {
        animation: none;
    }
}

.home-greeting-header {
    display: block;
}

.home-greeting > h2 {
    margin: 0;
}

.home-greeting-line {
    margin: 0.2rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

.home-greeting-line.is-typing::after,
.club-home-tagline.is-typing::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 0.9em;
    margin-left: 2px;
    background: currentColor;
    vertical-align: -0.1em;
    animation: home-greeting-cursor 0.85s steps(1) infinite;
}

@keyframes home-greeting-cursor {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.my-stats-title,
.player-stats-title {
    margin: 0 0 0.9rem;
}

/* A line of the club's own under its name. */
.club-home-tagline {
    margin: 0.25rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

/* The heading and its count travel together; the New Session button sits
   opposite them, with the games it starts. */
.session-catalog-heading {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.session-catalog-heading > h3 {
    margin: 0;
}

/* Creating a player from inside a game, when someone turns up unannounced. */
.session-new-player {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--color-border-muted);
}

.session-new-player > summary {
    color: var(--color-action);
    font-family: var(--font-display);
    font-size: 0.78rem;
    cursor: pointer;
}

.session-new-player > summary:hover {
    text-decoration: underline;
}

.session-new-player-form {
    margin-top: 0.75rem;
}

/* The club chip is the nav link to the club now, so it shows when you are on it. */
.nav-current-club.active {
    background: rgba(253, 233, 146, 0.14);
    border-color: var(--color-action);
}

/* The nav no longer names the club, so each club page carries its own way
   back out to the account's home. */
.club-home-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.6rem;
}

/* Another member's character, shown but not editable. Occupies the same
   place the customization panel does for its owner. */
.player-profile-card-view {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0;
}

/* A CSS-only tooltip for a disabled control, more visible than the native
   title attribute's slow, tiny browser tooltip. */
.tooltip-hint {
    position: relative;
    display: inline-block;
}

.tooltip-hint::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: max-content;
    max-width: 16rem;
    padding: 0.5rem 0.7rem;
    color: var(--color-text);
    background: #0C0B0E;
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.68rem;
    line-height: 1.35;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
    transition: opacity 0.14s ease, transform 0.14s ease;
    z-index: 5;
}

.tooltip-hint:hover::after,
.tooltip-hint:focus-within::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 600px) {
    .tooltip-hint::after {
        left: auto;
        right: 0;
        transform: translateY(4px);
    }

    .tooltip-hint:hover::after,
    .tooltip-hint:focus-within::after {
        transform: translateY(0);
    }
}

/* --- Choosing a club's shape at creation ---------------------------------- */

.club-suit-picker-label {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
}

.club-suit-picker {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

/* Two classes beats the global ".form-group label { display: block }" rule,
   which otherwise wins on specificity and silently drops back to block,
   leaving the suit symbol sitting at its default inline position. */
.club-suit-picker .club-suit-option {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.6rem 0.3rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1.5px solid var(--color-border-muted);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease;
}

.club-suit-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.club-suit-option-symbol {
    font-size: 1.5rem;
    line-height: 1;
    font-family: Georgia, 'Times New Roman', serif;
}

.club-suit-option-name {
    color: var(--color-text-muted);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.club-suit-option-spades .club-suit-option-symbol,
.club-suit-option-clubs .club-suit-option-symbol {
    color: #E8E4D6;
}

.club-suit-option-hearts .club-suit-option-symbol,
.club-suit-option-diamonds .club-suit-option-symbol {
    color: #D92E49;
}

.club-suit-option:has(input:checked) {
    background: rgba(253, 233, 146, 0.08);
    border-color: var(--color-action);
}

.club-suit-option:has(input:focus-visible) {
    outline: 2px solid var(--color-action);
    outline-offset: 2px;
}

/* The date link in My Recent Sessions' table needs the same layout as a
   player's own Session History; that rule is scoped to the other page. */
.profile-page .data-table .session-history-date {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.22rem;
    color: var(--color-action) !important;
}

/* Same label treatment as a player's own Player Stats: both already use the
   display face, but that page lightens the weight — this didn't. */
.profile-page .my-results-overview .stat-label {
    font-weight: 400;
}

/* My Stats gets the exact same figure coloring as a player's own Player
   Stats: butter yellow by default, green/red/white only for the P/L card. */
.profile-page .my-results-overview .stat-value {
    color: var(--color-action) !important;
}

.profile-page .my-results-overview .stat-card.positive .stat-value {
    color: var(--color-positive) !important;
}

.profile-page .my-results-overview .stat-card.negative .stat-value {
    color: var(--color-negative) !important;
}

.profile-page .my-results-overview .stat-card.zero .stat-value {
    color: #FFFFFF !important;
}

.nav-club-switch.active {
    color: var(--color-action);
    border-color: var(--color-action);
    background: rgba(253, 233, 146, 0.08);
}

.nav-club-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* How many join requests are waiting on this account's clubs. */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.3rem;
    color: var(--color-action-ink);
    background: var(--color-action);
    border-radius: 999px;
    font-family: var(--font-numbers);
    font-size: 0.62rem;
    font-weight: 700;
}

/* One group of requests per owned club, on the Settings page. */
.settings-club-requests {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.settings-club-request-group {
    padding-top: 1rem;
    border-top: 1px solid var(--color-border-muted);
}

.settings-club-request-group:first-child {
    padding-top: 0;
    border-top: 0;
}

.settings-club-request-club {
    margin: 0 0 0.2rem;
    color: var(--color-action);
    font-family: var(--font-display);
    font-size: 0.85rem;
}

/* Owner-only switch: who is allowed to record buy-ins and cash-outs. */
.transaction-permission-form {
    margin: 0.6rem 0 1rem;
}

.transaction-permission-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text);
    font-size: 0.78rem;
    cursor: pointer;
}

/* The real checkbox stays for semantics/keyboard use, just invisible; the
   switch beside it is what's actually seen. */
.transaction-permission-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 2.1rem;
    height: 1.2rem;
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    transition: background 0.16s ease, border-color 0.16s ease;
}

.toggle-switch::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 0.94rem;
    height: 0.94rem;
    background: var(--color-text-muted);
    border-radius: 50%;
    transition: transform 0.16s ease, background 0.16s ease;
}

.transaction-permission-toggle input:checked ~ .toggle-switch {
    background: rgba(253, 233, 146, 0.16);
    border-color: var(--color-action);
}

.transaction-permission-toggle input:checked ~ .toggle-switch::after {
    background: var(--color-action);
    transform: translateX(0.9rem);
}

.transaction-permission-toggle input:focus-visible ~ .toggle-switch {
    outline: 2px solid var(--color-action);
    outline-offset: 2px;
}

/* My Recent Sessions reads the column names as written, not shouted. */
.profile-page .player-session-history th {
    text-transform: none;
    letter-spacing: normal;
}

/* Club and Date read at body size while the money columns sit in the
   smaller-looking numbers font, so side by side they looked mismatched even
   at the same declared size. Bring them down to match. */
.profile-page .player-session-history td:nth-child(1),
.profile-page .player-session-history td:nth-child(2) {
    font-size: 0.85rem;
}