/* Live Game Scorecard, Stroke Calculator, New Game, Games History, Scorecard Matrix & Practice Mode */

/* ========================================================================== */
/* Hole Ribbon & Active Hole Banner (Shared for Live Game & Practice Hub)     */
/* ========================================================================== */
.hole-ribbon-container {
    overflow-x: auto;
    white-space: nowrap;
    padding: 8px 4px 14px 4px;
    margin-bottom: 20px;
    display: flex;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
}

.hole-tile {
    flex: 0 0 auto;
    width: 58px;
    height: 64px;
    border-radius: var(--radius-md);
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.15s ease;
    user-select: none;
}

.hole-tile:hover { background: rgba(255, 255, 255, 0.08);transform: translateY(-2px);color: #fff; }

.hole-tile .tile-num { font-size: 1.25rem;font-weight: 900;line-height: 1; }

.hole-tile .tile-sub {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 4px;
}

.hole-tile.tile-active {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.3), rgba(14, 165, 233, 0.4));
    border: 2px solid var(--accent-blue);
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.4);
    transform: scale(1.05);
}

.hole-tile.tile-active .tile-sub { color: #38bdf8;font-weight: 800; }

.hole-banner {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.9));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.banner-left { display: flex;align-items: center;gap: 12px; }

.banner-hole-badge {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--accent-blue), #0284c7);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 900;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
    flex-shrink: 0;
}

.banner-title { font-size: 1.25rem;font-weight: 800; }

.banner-par { font-size: 0.85rem;color: var(--text-secondary);font-weight: 600; }

/* Leaderboard Tabs & Mini Tabs (Spotlight) */
.leaderboard-tabs {
    display: flex;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    flex-wrap: wrap;
}

.leaderboard-tabs .tab-btn {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-secondary);
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.leaderboard-tabs .tab-btn:hover { color: #fff;background: rgba(255, 255, 255, 0.05); }

.leaderboard-tabs .tab-btn.active {
    background: linear-gradient(135deg, var(--accent-blue), #2563eb);
    color: #fff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}

/* Dashboard Mini-Tabs */
.dash-tabs-container {
    display: inline-flex;
    align-items: center;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.dash-tabs-container::-webkit-scrollbar { display: none; }

.dash-tab-btn {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-secondary);
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.76rem;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.dash-tab-btn:hover { color: #fff;background: rgba(255, 255, 255, 0.06); }

.dash-tab-btn.active {
    background: linear-gradient(135deg, var(--accent-blue), #2563eb) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}

/* Unified, Strict Table Row Heights Across All Leaderboard Modes */
table.data-table th {
    height: 38px;
    padding: 8px 10px;
    vertical-align: middle;
    box-sizing: border-box;
}

table.data-table td {
    height: 44px;
    padding: 6px 10px;
    vertical-align: middle;
    box-sizing: border-box;
}

table.data-table .player-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
}

table.data-table .badge {
    padding: 3px 8px;
    font-size: 0.75rem;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

/* ==========================================
   Toast Notifications
   ========================================== */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast-msg {
    background: rgba(15, 23, 42, 0.95);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 4px solid #38bdf8;
    backdrop-filter: blur(12px);
    padding: 12px 18px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    pointer-events: auto;
    animation: slideInRight 0.25s ease-out;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast-msg.toast-success { border-left-color: #10b981; }

.toast-msg.toast-error { border-left-color: #ef4444; }

.toast-msg.is-hiding { opacity: 0;transform: translateX(20px); }

/* ==========================================
   Navigation, Footer & Mobile PWA Install
   ========================================== */
.mobile-quick-btn--live {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #fff !important;
    border-color: rgba(251, 191, 36, 0.5) !important;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.4) !important;
}

.mobile-quick-btn--live .material-symbols-outlined { color: #fff !important; }

.mobile-drawer-brand { display: flex;align-items: center;gap: 8px; }

.mobile-drawer-brand-icon { font-size: 1.4rem; }

.mobile-drawer-brand-title { font-size: 1.15rem;letter-spacing: 0.5px;color: #fff; }

.nav-icon-blue { color: #38bdf8; }

.nav-icon-indigo { color: #818cf8; }

.nav-icon-gold { color: var(--accent-gold); }

.nav-icon-purple { color: #a855f7; }

.nav-icon-pink { color: #ec4899; }

.nav-icon-green { color: var(--accent-green); }

.nav-icon-cyan { color: var(--accent-cyan); }

.nav-icon-slate { color: #94a3b8; }

.pwa-drawer-install-btn {
    display: none;
    width: 100%;
    background: rgba(14, 165, 233, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.35);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    margin-top: 8px;
}

.pwa-drawer-install-btn.is-visible { display: flex; }

.mobile-drawer-footer { margin-top: auto;padding-top: 20px; }

.btn-drawer-cta {
    width: 100%;
    padding: 14px;
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
}

.btn-drawer-cta--live { background: linear-gradient(135deg, #f59e0b, #d97706);box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4); }

.site-footer {
    margin-top: 60px;
    padding: 24px 0 40px;
    border-top: 1px solid var(--border-color);
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.site-footer-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.site-footer-link {
    color: var(--text-secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.site-footer-link .material-symbols-outlined { font-size: 1rem; }

.site-footer-build { opacity: 0.75;margin-left: 4px; }

.fab-btn--live { background: linear-gradient(135deg, #f59e0b, #d97706);box-shadow: 0 4px 16px rgba(245, 158, 11, 0.5); }

.pwa-install-banner.is-visible { display: flex; }

.pwa-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(8px);
    z-index: 9800;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.pwa-modal-overlay.is-visible { display: flex; }

.pwa-modal-card {
    max-width: 390px;
    width: 100%;
    padding: 24px 20px;
    border: 1px solid rgba(56, 189, 248, 0.4);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75);
    text-align: left;
}

.pwa-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.pwa-modal-brand { display: flex;align-items: center;gap: 10px; }

.pwa-modal-logo { width: 38px;height: 38px;border-radius: 9px; }

.pwa-modal-title { font-weight: 900;font-size: 1.08rem;color: #fff; }

.pwa-modal-badge { font-size: 0.75rem;color: #38bdf8;font-weight: 700; }

.pwa-modal-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
}

.pwa-modal-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.45;
    margin-bottom: 16px;
}

.pwa-native-install-btn {
    display: none;
    width: 100%;
    justify-content: center;
    padding: 12px;
    font-weight: 800;
    font-size: 0.95rem;
    margin-bottom: 14px;
}

.pwa-native-install-btn.is-visible { display: flex; }

.pwa-modal-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.pwa-modal-step {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px 12px;
    border-radius: 10px;
}

.pwa-modal-step .material-symbols-outlined { font-size: 1.4rem; }

.pwa-modal-step-text { font-size: 0.84rem;color: #f8fafc; }

.pwa-modal-confirm-btn {
    width: 100%;
    justify-content: center;
    padding: 10px;
    font-weight: 800;
}

/* ==========================================
   Web Push Notification Modal & Nav Controls
   ========================================== */
.push-nav-btn, .push-mobile-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.push-drawer-btn {
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.push-nav-btn.is-active .material-symbols-outlined, .push-mobile-btn.is-active .material-symbols-outlined, #pushNavIcon.is-active, #pushMobileHeaderIcon.is-active, #pushDrawerIcon.is-active { color: var(--accent-green); }

.push-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(8px);
    z-index: 9850;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.push-modal-overlay.is-visible { display: flex; }

.push-modal-card {
    max-width: 440px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 22px 20px;
    border: 1px solid rgba(56, 189, 248, 0.4);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.78);
    text-align: left;
    margin-bottom: 0;
}

.push-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.push-modal-brand { display: flex;align-items: center;gap: 12px; }

.push-modal-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(56, 189, 248, 0.14);
    border: 1px solid rgba(56, 189, 248, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-blue);
    flex-shrink: 0;
}

.push-modal-title { font-weight: 900;font-size: 1.12rem;color: #fff; }

.push-status-badge {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-top: 2px;
}

.push-status-badge.is-active { color: var(--accent-green); }

.push-status-badge.is-warning { color: var(--accent-gold); }

.push-ios-hint {
    display: none;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fde68a;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.82rem;
    line-height: 1.4;
    margin-bottom: 14px;
}

.push-ios-hint.is-visible { display: block; }

.push-section { margin-bottom: 16px; }

.push-section-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
}

.push-section-title { font-weight: 800;font-size: 0.92rem;color: #fff; }

.push-section-sub { font-size: 0.78rem;color: var(--text-secondary);line-height: 1.35; }

.push-players-grid { display: flex;flex-wrap: wrap;gap: 8px; }

.push-player-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

.push-player-pill:hover { border-color: rgba(56, 189, 248, 0.45);color: #fff; }

.push-player-pill.is-selected {
    background: rgba(16, 185, 129, 0.16);
    border-color: rgba(16, 185, 129, 0.65);
    color: #fff;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.2);
}

.push-player-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.push-player-check { font-size: 1.1rem;color: var(--text-muted); }

.push-player-pill.is-selected .push-player-check { color: var(--accent-green); }

.push-no-player-hint {
    display: none;
    margin-top: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    padding: 7px 10px;
}

.push-no-player-hint.is-visible { display: block; }

.push-categories-list { display: flex;flex-direction: column;gap: 8px; }

.push-category-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 13px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: all 0.18s ease;
}

.push-category-card.is-enabled { background: rgba(30, 41, 59, 0.9);border-color: rgba(56, 189, 248, 0.45); }

.push-category-info { min-width: 0; }

.push-category-title { font-weight: 800;font-size: 0.88rem;color: #fff; }

.push-category-desc {
    font-size: 0.76rem;
    color: var(--text-secondary);
    line-height: 1.35;
    margin-top: 2px;
}

.push-category-toggle-icon { font-size: 2rem;color: var(--text-muted);flex-shrink: 0; }

.push-category-card.is-enabled .push-category-toggle-icon { color: var(--accent-green); }

.push-device-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.push-device-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
}

.push-device-input { max-width: 210px;padding: 7px 10px;font-size: 0.84rem; }

.push-feedback-banner {
    display: none;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.push-feedback-banner.is-visible { display: block; }

.push-feedback-banner.is-success { background: rgba(16, 185, 129, 0.16);border: 1px solid rgba(16, 185, 129, 0.45);color: #6ee7b7; }

.push-feedback-banner.is-warning { background: rgba(245, 158, 11, 0.16);border: 1px solid rgba(245, 158, 11, 0.45);color: #fde68a; }

.push-feedback-banner.is-info { background: rgba(56, 189, 248, 0.16);border: 1px solid rgba(56, 189, 248, 0.45);color: #bae6fd; }

.push-modal-actions { display: flex;flex-direction: column;gap: 10px; }

.push-action-btn-main {
    display: none;
    width: 100%;
    justify-content: center;
    padding: 12px;
    font-weight: 800;
    font-size: 0.94rem;
}

.push-action-btn-main.is-visible { display: flex; }

.push-active-actions-row { display: none;gap: 10px; }

.push-active-actions-row.is-visible { display: flex; }

.push-action-btn-sub, .push-action-btn-danger {
    flex: 1;
    justify-content: center;
    padding: 10px 12px;
    font-weight: 700;
    font-size: 0.86rem;
}

.push-action-btn-danger { border-color: rgba(239, 68, 68, 0.45);color: #fca5a5; }

.push-modal-close-btn {
    width: 100%;
    justify-content: center;
    padding: 10px;
    font-weight: 800;
}

.push-empty-hint { font-size: 0.82rem;color: var(--text-muted);padding: 8px 0; }

/* ==========================================
   Admin Dashboard Semantic Helpers
   ========================================== */
.admin-page-subtitle { color: var(--text-secondary);font-size: 0.95rem;margin-top: 4px; }

.admin-kpi-grid, .admin-cards-grid { margin-bottom: 24px; }

.kpi-icon--blue { color: var(--accent-blue); }

.kpi-icon--gold { color: #fbbf24; }

.kpi-icon--green { color: var(--accent-green); }

.kpi-icon--purple { color: var(--accent-purple); }

.admin-cache-card {
    margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.9));
    border-color: rgba(59, 130, 246, 0.3);
}

.admin-cache-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.admin-cache-left { display: flex;align-items: center;gap: 16px; }

.admin-cache-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(59, 130, 246, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.admin-cache-title-row { display: flex;align-items: center;gap: 10px; }

.admin-cache-title { font-size: 1.15rem;font-weight: 800;margin-bottom: 0; }

.admin-cache-desc { color: var(--text-secondary);font-size: 0.82rem;margin-top: 4px; }

.admin-cache-metrics { display: flex;align-items: center;gap: 20px; }

.admin-cache-metric { text-align: right; }

.admin-cache-metric-val { font-size: 1.25rem;font-weight: 900;color: #fff; }

.admin-cache-metric-val--blue { color: var(--accent-blue); }

.admin-cache-metric-lbl { font-size: 0.7rem;color: var(--text-muted);text-transform: uppercase; }

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

.admin-btn-sm {
    font-size: 0.8rem;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.admin-btn-xs {
    padding: 4px 10px;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.admin-card-title {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-card-desc { color: var(--text-secondary);font-size: 0.85rem;margin-bottom: 16px; }

.admin-card-sub { color: var(--text-secondary);font-size: 0.85rem;margin-top: 2px; }

.admin-input-row { display: flex;gap: 8px; }

.admin-mono-input { font-weight: 700;font-family: monospace;font-size: 0.85rem; }

.admin-mono-input--green { color: var(--accent-green); }

.admin-btn-nowrap { flex-shrink: 0; }

.admin-form-spaced { margin-top: 16px; }

.admin-btn-danger-outline { font-size: 0.8rem;border-color: var(--accent-red);color: #fca5a5; }

.settings-options-stack { display: flex;flex-direction: column;gap: 8px; }

.admin-checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.38;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.admin-checkbox-label:hover { border-color: rgba(148, 163, 184, 0.35);color: var(--text-primary); }

.admin-checkbox-label:has(.admin-checkbox:checked) { background: rgba(16, 185, 129, 0.08);border-color: rgba(16, 185, 129, 0.38);color: var(--text-primary); }

.rbac-inline-form .admin-checkbox-label { padding: 7px 12px; }

.admin-checkbox-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.admin-checkbox-title { font-size: 0.9rem;font-weight: 700;color: var(--text-primary); }

.admin-checkbox-sub { font-size: 0.78rem;font-weight: 500;color: var(--text-muted); }

.admin-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    flex-shrink: 0;
    margin: 0;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.8);
    border: 1.5px solid rgba(148, 163, 184, 0.4);
    cursor: pointer;
    position: relative;
    outline: none;
    transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.admin-checkbox:hover { border-color: rgba(148, 163, 184, 0.7); }

.admin-checkbox:focus, .admin-checkbox:focus-visible { outline: none;box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22); }

.admin-checkbox:checked { background: var(--accent-green);border-color: var(--accent-green); }

.admin-checkbox:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #06281e;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

.admin-btn-block { width: 100%;padding: 12px; }

.admin-export-stack { display: flex;flex-direction: column;gap: 10px; }

.admin-btn-export {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.admin-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.admin-push-dev-name { font-weight: 800;color: #fff;font-size: 0.9rem; }

.admin-push-dev-sub { font-size: 0.75rem;color: var(--text-muted); }

.admin-push-pills { display: flex;flex-wrap: wrap;gap: 6px; }

.admin-push-actions { display: flex;align-items: center;gap: 6px; }

.admin-text-muted { color: var(--text-muted);font-size: 0.85rem; }

.admin-mono-cell { font-weight: 700;font-family: monospace;font-size: 0.85rem; }

.admin-empty-cell { text-align: center;padding: 24px;color: var(--text-muted); }

/* ============================================================================
   TRAINING VS. OFFICIAL ROUND MODE, CONCURRENT GAMES LOCK,
   COMBINABLE GAMES FILTER, SEASON BEST-X MATRIX & SPURBUCH
   ============================================================================ */
.badge-training-mode {
    background: rgba(56, 189, 248, 0.16);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.45);
    font-weight: 800;
    font-size: 0.72rem;
    padding: 2px 8px;
}

.badge-official-mode {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.45);
    font-weight: 800;
    font-size: 0.72rem;
    padding: 2px 8px;
}

.badge-solo-mode {
    background: rgba(168, 85, 247, 0.16);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.4);
    font-weight: 800;
    font-size: 0.7rem;
    padding: 2px 7px;
}

/* Active Concurrent Games List (Dashboard & New Game) */
.open-games-active-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
}

.open-game-active-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.88rem;
}

.open-game-active-players { color: var(--text-secondary);font-size: 0.82rem; }

/* New Game: Mode Selector & Busy Player Lock */
.new-game-mode-section { margin-bottom: 20px; }

.game-mode-selector-grid { display: grid;grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));gap: 12px; }

.game-mode-option-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    padding: 14px 16px;
    background: rgba(15, 23, 42, 0.65);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    width: 100%;
    transition: all 0.2s ease;
}

.game-mode-option-card:hover { border-color: rgba(56, 189, 248, 0.45);background: rgba(30, 41, 59, 0.75); }

.game-mode-option-card.active {
    border-color: var(--accent-blue);
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(15, 23, 42, 0.88));
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.22);
}

.game-mode-option-card--training.active {
    border-color: var(--accent-cyan);
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(15, 23, 42, 0.88));
    box-shadow: 0 0 18px rgba(6, 182, 212, 0.25);
}

.game-mode-option-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.game-mode-option-title-wrap { display: inline-flex;align-items: center;gap: 8px; }

.game-mode-option-icon { font-size: 1.15rem;line-height: 1; }

.game-mode-option-title { font-weight: 800;font-size: 0.98rem;color: #fff; }

.game-mode-option-indicator {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 12px;
    background: rgba(56, 189, 248, 0.2);
    border: 1px solid rgba(56, 189, 248, 0.5);
    color: #38bdf8;
    opacity: 0;
    transform: scale(0.92);
    transition: all 0.18s ease;
    white-space: nowrap;
}

.game-mode-option-card.active .game-mode-option-indicator { opacity: 1;transform: scale(1); }

.game-mode-option-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.42;
    text-align: left;
    width: 100%;
}

.season-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.season-setting-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1.35;
}

.player-quick-btn.is-busy-in-game {
    opacity: 0.52;
    cursor: not-allowed;
    border-style: dashed;
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(15, 23, 42, 0.4);
}

/* Combinable Games Filter & Summary KPI Bar (/games) */
.games-list-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.games-filter-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
    padding: 14px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.games-filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.games-filter-label {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 0;
}

.games-filter-bar .games-filter-select {
    width: 100%;
    min-width: 0;
    font-size: 0.84rem;
    font-weight: 700;
    padding: 8px 30px 8px 11px;
    background-color: rgba(15, 23, 42, 0.85);
    border-color: rgba(255, 255, 255, 0.12);
    border-radius: 8px;
}

.game-detail-breadcrumb-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.game-detail-back-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
}

/* ============================================================================
   PRACTICE MODE & SPURBUCH ENHANCEMENTS (/practice)
   ============================================================================ */
.practice-page-header { flex-wrap: wrap;gap: 16px;margin-bottom: 20px; }

.practice-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.practice-page-title { margin-bottom: 0; }

.practice-subtitle { color: var(--text-secondary);font-size: 0.9rem;margin-top: 4px; }

.practice-context-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

.practice-context-select {
    flex: 1;
    min-width: 130px;
    font-weight: 700;
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(255, 255, 255, 0.15);
}

.practice-round-btn, .practice-analyse-btn { font-size: 0.85rem;padding: 8px 12px;white-space: nowrap; }

.practice-blueprint-card { margin-bottom: 16px;background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.9)); }

.practice-blueprint-card.is-collapsed { padding-top: 12px;padding-bottom: 12px; }

.practice-blueprint-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.practice-blueprint-card.is-collapsed .practice-blueprint-header { margin-bottom: 0; }

.practice-blueprint-card.is-collapsed .practice-blueprint-body { display: none; }

.practice-blueprint-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 0.76rem;
    font-weight: 800;
    border-radius: 8px;
}

.practice-blueprint-toggle-icon { font-size: 1.05rem;line-height: 1; }

.practice-spurbuch-inline-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
    margin-bottom: 10px;
    padding: 6px 10px;
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 8px;
    font-size: 0.78rem;
    color: #e2e8f0;
}

.practice-blueprint-card.is-collapsed .practice-spurbuch-inline-bar { margin-bottom: 0; }

.practice-spurbuch-inline-chip { color: #fde68a; }

.practice-spurbuch-inline-note { color: #a5f3fc; }

.practice-blueprint-title-wrap { display: flex;align-items: center;gap: 12px; }

.practice-blueprint-badges {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.badge-max3-limit {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.4);
    font-size: 0.75rem;
    font-weight: 800;
}

.practice-svg-stage {
    background: rgba(11, 15, 25, 0.95);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 14px;
}

.practice-svg-inner {
    width: 100%;
    max-width: 380px;
    max-height: 150px;
    display: flex;
    justify-content: center;
}

.practice-caddie-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.practice-pro-tip { width: 100%;color: #cbd5e1; }

/* Personal Spurbuch Card */
.spurbuch-card { margin-bottom: 16px;border-left: 4px solid var(--accent-cyan);padding: 14px 16px; }

.spurbuch-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.spurbuch-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 0.95rem;
    color: #fff;
}

.spurbuch-icon { color: var(--accent-cyan);font-size: 1.15rem; }

.spurbuch-save-status {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--accent-green);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.spurbuch-save-status.is-visible { opacity: 1; }

.spurbuch-grid { display: grid;grid-template-columns: 1fr 1fr;gap: 10px; }

.spurbuch-field { margin-bottom: 0; }

.spurbuch-label { font-size: 0.74rem; }

.spurbuch-input { font-size: 0.84rem;padding: 8px 10px; }

.spurbuch-actions { margin-top: 10px;display: flex;justify-content: flex-end; }

.spurbuch-save-btn { font-size: 0.8rem;padding: 6px 12px; }

/* Practice Quickpad */
.practice-quickpad-card { margin-bottom: 16px;border: 2px solid rgba(245, 158, 11, 0.4);background: rgba(15, 23, 42, 0.9); }

.practice-quickpad-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.practice-quickpad-title-row { display: flex;align-items: center;gap: 8px; }

.practice-quickpad-title {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.practice-save-status {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-green);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.practice-save-status.is-visible { opacity: 1; }

.practice-quickpad-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 0;
}

.practice-stroke-btn {
    background: rgba(30, 41, 59, 0.8);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 800;
    border: 1px solid var(--border-color);
    padding: 14px 0;
    border-radius: var(--radius-md);
    width: 100%;
}

.practice-stroke-btn--ace {
    background: linear-gradient(135deg, #fbbf24, #d97706);
    color: #000;
    font-size: 1.5rem;
    font-weight: 900;
    box-shadow: 0 4px 14px rgba(251, 191, 36, 0.3);
    border: none;
}

.practice-stroke-btn--fail {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
    font-size: 1.25rem;
    font-weight: 900;
    padding: 12px 0;
    border: 1px solid rgba(239, 68, 68, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.practice-fail-sub {
    font-size: 0.65rem;
    color: #fca5a5;
    font-weight: 700;
    opacity: 0.9;
}

.practice-penalty-btn {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 10px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    width: 100%;
    transition: all 0.2s ease;
}

.practice-penalty-btn--span4 {
    grid-column: span 4;
    margin-top: 4px;
    flex-direction: row;
    gap: 8px;
    padding: 12px;
}

.practice-penalty-btn.is-active { border-color: #ef4444;background: rgba(239, 68, 68, 0.2); }

.practice-penalty-label { font-size: 0.72rem;color: var(--text-muted); }

.practice-penalty-indicator { color: var(--text-muted);font-size: 0.85rem;font-weight: 800; }

.practice-penalty-btn.is-active .practice-penalty-indicator { color: #ef4444; }

.practice-meta-inputs-grid { display: grid;grid-template-columns: 1fr 1fr;gap: 10px; }

.practice-meta-inputs-top { margin-bottom: 12px; }

.practice-meta-field { margin-bottom: 0; }

.practice-meta-label { font-size: 0.75rem; }

.practice-meta-input { font-size: 0.85rem;padding: 8px; }

.ball-quick-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.ball-quick-chips--top { margin-top: -2px;margin-bottom: 14px; }

.ball-quick-chips-label { font-size: 0.72rem;font-weight: 700;color: var(--text-muted); }

.ball-quick-chip {
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 14px;
    padding: 3px 10px;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}

.ball-quick-chip:hover, .ball-quick-chip.is-fav { color: #fff;border-color: var(--accent-cyan);background: rgba(56, 189, 248, 0.16); }

.practice-kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

.practice-kpi-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 16px;
    gap: 4px;
}

.practice-kpi-top { display: flex;justify-content: space-between;width: 100%; }

.practice-kpi-sub { font-size: 0.75rem;color: var(--text-muted); }

.practice-coldstart-card { margin-bottom: 16px;padding: 14px 16px; }

.practice-coldstart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.practice-coldstart-title { font-size: 0.85rem;font-weight: 800;color: #fff; }

.practice-coldstart-grid { display: grid;grid-template-columns: 1fr 1fr;gap: 10px; }

.practice-coldstart-box {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
}

.practice-coldstart-label { font-size: 0.7rem;color: var(--text-muted);font-weight: 700; }

.practice-coldstart-val {
    font-size: 0.95rem;
    font-weight: 900;
    color: #fff;
    margin-top: 2px;
}

.practice-coldstart-rate { font-size: 0.75rem;font-weight: 700;color: var(--accent-gold); }

.practice-attempts-card { padding: 16px; }

.practice-attempts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.practice-attempts-title {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.practice-attempts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 360px;
    overflow-y: auto;
}

.practice-attempt-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.practice-attempt-left { display: flex;align-items: center;gap: 10px; }

.practice-attempt-badge {
    font-size: 1.1rem;
    font-weight: 900;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.practice-attempt-badge.is-ace { background: linear-gradient(135deg, #fbbf24, #d97706);color: #000; }

.practice-attempt-badge.is-fail { background: rgba(239, 68, 68, 0.2);color: #fca5a5;border: 1px solid rgba(239, 68, 68, 0.4); }

.practice-attempt-badge.is-par { background: rgba(34, 197, 94, 0.2);color: var(--accent-green); }

.practice-attempt-badge.is-over { background: rgba(255, 255, 255, 0.05);color: #fff; }

.practice-attempt-main { font-weight: 700;font-size: 0.85rem;color: #fff; }

.practice-attempt-meta { font-size: 0.72rem;color: var(--text-muted); }

.practice-attempt-del-btn {
    padding: 4px 8px;
    font-size: 0.75rem;
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.3);
}

.practice-empty-placeholder {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.text-white { color: #fff; }

.text-accent-green { color: var(--accent-green); }

.text-accent-gold { color: #fbbf24; }

.text-accent-cyan { color: #38bdf8; }

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

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

.font-bold { font-weight: 800; }

/* --- Shared Conventional Scorecard Matrix & Leaderboard Strip (game_detail & visitor_game) --- */
.scorecard-detail-card { margin-bottom: 16px; }

.scorecard-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
}

.scorecard-detail-title { font-size: 1.15rem;font-weight: 800;margin: 0; }

.scorecard-mode-pill-badge {
    font-size: 0.78rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 12px;
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.4);
    color: #fbbf24;
}

.scorecard-podium-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.scorecard-podium-chip {
    background: rgba(15, 23, 42, 0.6);
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.scorecard-podium-chip-left {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.scorecard-podium-rank { font-weight: 800;color: var(--accent-blue); }

.scorecard-podium-rank.is-rank-1 { color: #fbbf24; }

.scorecard-podium-rank.is-rank-2 { color: #cbd5e1; }

.scorecard-podium-rank.is-rank-3 { color: #b45309; }

.scorecard-podium-name {
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scorecard-podium-chip-right {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-shrink: 0;
}

.scorecard-podium-score { font-weight: 800;color: #fff;font-variant-numeric: tabular-nums; }

.scorecard-podium-score.is-under-par { color: var(--accent-green); }

.scorecard-podium-score.is-over-par { color: var(--accent-red); }

.scorecard-podium-diff { font-size: 0.72rem;font-weight: 700;color: var(--text-muted); }

.scorecard-podium-diff.is-under-par { color: var(--accent-green); }

.scorecard-podium-diff.is-over-par { color: var(--accent-red); }

table.data-table.scorecard-matrix-table { text-align: center; }

table.data-table.scorecard-matrix-table th:not(.scorecard-hole-cell), table.data-table.scorecard-matrix-table td:not(.scorecard-hole-cell) { text-align: center; }

table.data-table.scorecard-matrix-table th.scorecard-hole-cell, table.data-table.scorecard-matrix-table td.scorecard-hole-cell { text-align: left;min-width: 90px; }

.scorecard-player-th .player-chip { justify-content: center; }

.scorecard-hole-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    transition: color 0.15s ease;
}

.hole-num-text {
    color: #fff;
    font-weight: 800;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.scorecard-hole-link:hover .hole-num-text { color: var(--accent-blue); }

.hole-name-sub {
    color: var(--accent-cyan);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    margin-top: 1px;
}

.scorecard-par-th { min-width: 38px; }

.scorecard-par-td { color: var(--text-muted);font-size: 0.85rem; }

.scorecard-player-th { min-width: 60px; }

.scorecard-player-th .order-sub {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
}

.scorecard-score-td { padding: 4px 2px; }

.score-pen-tag { font-size: 0.7rem;color: #f87171; }

.scorecard-empty-dash { color: var(--text-muted); }

.highlighted-hole-row { background: rgba(56, 189, 248, 0.08); }

.score-total-gross-row { background: rgba(255, 255, 255, 0.04);font-weight: 800;border-top: 2px solid var(--border-color); }

.scorecard-foot-total-lbl { font-weight: 900;color: var(--accent-gold); }

.scorecard-foot-par-val { color: var(--accent-gold);font-size: 0.85rem; }

.scorecard-foot-total-td {
    font-size: 1.05rem;
    font-weight: 900;
    color: #fff;
    font-variant-numeric: tabular-nums;
    padding: 4px 2px;
}

.scorecard-foot-total-td.is-under-par { color: var(--accent-green); }

.scorecard-foot-total-td.is-over-par { color: var(--accent-red); }

.scorecard-foot-diff { font-size: 0.7rem;font-weight: 700;color: var(--text-muted); }

.scorecard-foot-diff.is-under-par { color: var(--accent-green); }

.scorecard-foot-diff.is-over-par { color: var(--accent-red); }

.score-aces-row { background: rgba(255, 255, 255, 0.02);font-size: 0.8rem; }

.scorecard-foot-aces-lbl { color: var(--text-muted);font-size: 0.75rem; }

.scorecard-foot-aces-par { color: var(--text-muted); }

.scorecard-foot-aces-val {
    color: #fbbf24;
    font-weight: 800;
    white-space: nowrap;
    padding: 3px 2px;
}

@media (max-width: 768px) {
.scorecard-hole-cell { min-width: 60px;max-width: 78px;padding: 4px 6px; }

.hole-num-text { font-size: 0.82rem; }

.hole-name-sub { font-size: 0.64rem;max-width: 65px; }

.scorecard-par-th, .scorecard-par-td { min-width: 26px;padding: 4px 2px;font-size: 0.8rem; }

.scorecard-player-th { min-width: 40px;padding: 4px 2px; }

.scorecard-player-th .player-chip {
        padding: 2px 4px;
        font-size: 0.75rem;
        gap: 3px;
        min-width: 0;
    }

.scorecard-player-th .player-chip .avatar-dot { width: 6px;height: 6px; }

.scorecard-player-th .order-sub { font-size: 0.6rem; }

}

/* ============================================================================
   GAMES OVERVIEW: CLICKABLE SCORE MODE SWITCH, KPI CARDS & COMPACT ICONS
   ============================================================================ */
.games-score-mode-switch {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3px;
    border-radius: 999px;
}

.games-score-mode-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 800;
    padding: 4px 11px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.games-score-mode-btn:hover { color: #fff;background: rgba(255, 255, 255, 0.05); }

.games-score-mode-btn.active[data-mode="gross"] { background: rgba(251, 191, 36, 0.16);border-color: rgba(251, 191, 36, 0.45);color: #fbbf24; }

.games-score-mode-btn.active[data-mode="net"] { background: rgba(56, 189, 248, 0.18);border-color: rgba(56, 189, 248, 0.48);color: #38bdf8; }

.games-score-mode-btn.active[data-mode="both"] { background: rgba(255, 255, 255, 0.12);border-color: rgba(255, 255, 255, 0.28);color: #fff; }

.games-kpi-grid { margin-bottom: 18px; }

.games-course-inline-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.games-mode-icons-inline { display: inline-flex;align-items: center;gap: 4px; }

.badge-mode-icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 22px;
    padding: 0;
    font-size: 0.78rem;
    line-height: 1;
    border-radius: 6px;
}

/* Score Mode Visibility & Compactness on /games */
#games-overview-card[data-score-mode="gross"] .games-players-wrap { grid-template-columns: repeat(auto-fill, 138px); }

#games-overview-card[data-score-mode="net"] .games-players-wrap { grid-template-columns: repeat(auto-fill, 138px); }

#games-overview-card[data-score-mode="both"] .games-players-wrap { grid-template-columns: repeat(auto-fill, 164px); }

/* Default Gross Mode: Show only Gross score & Gross crown */
#games-overview-card[data-score-mode="gross"] .game-chip-sep, #games-overview-card[data-score-mode="gross"] .game-chip-net, #games-overview-card[data-score-mode="gross"] .game-chip-crown--net { display: none; }

#games-overview-card[data-score-mode="gross"] .game-history-player-chip.is-net-only-winner:not(.is-watched-chip) { background: rgba(15, 23, 42, 0.55);border-color: rgba(255, 255, 255, 0.07); }

/* Net Mode: Show only Net score & Net crown */
#games-overview-card[data-score-mode="net"] .game-chip-gross, #games-overview-card[data-score-mode="net"] .game-chip-sep, #games-overview-card[data-score-mode="net"] .game-chip-crown--gross { display: none; }

#games-overview-card[data-score-mode="net"] .game-chip-net { font-weight: 800;font-size: 0.78rem;color: #f8fafc; }

#games-overview-card[data-score-mode="net"] .game-chip-net.is-net-best { color: #38bdf8; }

#games-overview-card[data-score-mode="net"] .game-history-player-chip.is-gross-winner:not(.is-net-winner):not(.is-watched-chip) { background: rgba(15, 23, 42, 0.55);border-color: rgba(255, 255, 255, 0.07); }

#games-overview-card[data-score-mode="net"] .game-history-player-chip.is-net-winner:not(.is-watched-chip) { background: rgba(56, 189, 248, 0.08);border-color: rgba(56, 189, 248, 0.36); }

/* Both Mode: Hide duplicate Net crown if player is already Gross winner */
#games-overview-card[data-score-mode="both"] .game-chip-crown--net.is-also-gross-winner { display: none; }