/* Landing Page Redesign - Floating UI & Quick Record */

/* =========================================
   Layout & Map
   ========================================= */
.map-centric-layout {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #121218;
    display: flex;
    flex-direction: column;
}

.full-screen-map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#map {
    width: 100%;
    height: 100%;
    /* Darken map slightly if needed via CSS filters */
    /* filter: brightness(0.8) contrast(1.2); */
}

/* =========================================
   Floating Header (Filters & Search)
   ========================================= */
.floating-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    /* Above Map */
    padding: var(--space-2, 8px) var(--space-4, 21px);
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0));
    pointer-events: none;
    /* Let clicks pass through empty space */
}

/* Filter Pills */
.filter-pills-scroll-container {
    overflow-x: auto;
    padding-bottom: 5px;
    pointer-events: auto;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.filter-pills-scroll-container::-webkit-scrollbar {
    display: none;
}

.filter-pills {
    display: flex;
    gap: var(--space-2, 8px);
    white-space: nowrap;
}

/* Secondary Filter Row (toggle filters) */
.filter-pills-secondary {
    margin-top: var(--space-2, 8px);
}

.filter-pills-secondary .filter-pill {
    font-size: var(--text-sm, 0.875rem);
    padding: var(--space-1, 5px) var(--space-2, 8px);
    background: rgba(28, 28, 30, 0.6);
    border: 1px dashed rgba(255, 255, 255, 0.15);
}

.filter-pills-secondary .filter-pill.active {
    background: rgba(var(--bs-primary-rgb), 0.2);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    border-style: solid;
}

.filter-pill {
    background: rgba(40, 40, 50, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-pill:hover,
.filter-pill.active {
    background: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.3);
}

.filter-pill i {
    font-size: 1rem;
}

/* Floating Search */
.floating-search {
    pointer-events: auto;
    max-width: 400px;
    width: 100%;
    align-self: center;
}

.search-input-wrapper.glass-effect {
    background: rgba(40, 40, 50, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 25px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.search-input-wrapper.glass-effect:focus-within {
    background: rgba(40, 40, 50, 0.9);
    border-color: var(--bs-primary);
    transform: scale(1.01);
}

.search-icon {
    color: #aaa;
    margin-right: 10px;
}

#location-search-input {
    background: transparent;
    border: none;
    color: white;
    width: 100%;
    font-size: 1rem;
    outline: none;
}

/* =========================================
   Floating Action Buttons (Bottom)
   ========================================= */
.bottom-floating-actions {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 20px;
    width: max-content;
}

/* Common FAB Styles */
.fab-primary,
.fab-secondary,
.fab-mini {
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}

/* Central "Quick Record" Button */
.fab-primary {
    background: var(--bs-primary);
    color: white;
    height: 60px;
    padding: 0 24px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1rem;
    gap: 10px;
}

.fab-primary i {
    font-size: 1.2rem;
}

.fab-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 30px rgba(var(--bs-primary-rgb), 0.4);
}

/* Subtle pulse animation instead of aggressive glow */
.pulse-effect {
    animation: pulse-subtle 3s infinite;
}

@keyframes pulse-subtle {

    0%,
    100% {
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    }

    50% {
        box-shadow: 0 5px 25px rgba(var(--bs-primary-rgb), 0.3);
    }
}

/* Side Buttons (QR, Refresh) */
.fab-secondary {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(30, 30, 40, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1.2rem;
}

.fab-secondary:hover {
    background: white;
    color: var(--bs-primary);
    transform: scale(1.05);
}

/* Map specific floating actions */
.map-floating-actions {
    position: absolute;
    bottom: 120px;
    /* Above bottom controls */
    right: 20px;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fab-mini {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(30, 30, 40, 0.9);
    color: white;
    font-size: 1rem;
}

/* =========================================
   Quick Record Modal
   ========================================= */
.fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.fullscreen-overlay.hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.quick-record-container.glass-panel {
    width: 90%;
    max-width: 450px;
    max-height: 90vh;
    background: linear-gradient(165deg, #1a1b2e 0%, #14152a 40%, #111225 100%);
    border-radius: 28px;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.6),
        0 8px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    animation: slideUp 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Success View Mode (Compact) */
.quick-record-container.success-view .qr-header {
    display: none !important;
}

.quick-record-container.success-view {
    min-height: 520px;
    height: auto;
    max-height: 95vh;
    padding-bottom: 30px;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

@keyframes slideUp {
    from {
        transform: translateY(40px) scale(0.96);
        opacity: 0;
        filter: blur(4px);
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
        filter: blur(0);
    }
}

/* Animated gradient border - top accent */
.quick-record-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #34C759, #5AC8FA, #FFD700, #FF6B6B, #34C759);
    background-size: 200% 100%;
    animation: borderShimmer 4s linear infinite;
}

@keyframes borderShimmer {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

/* Header */
.qr-header {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.03), transparent);
    position: relative;
}

.qr-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.3px;
}

.qr-title i {
    background: linear-gradient(135deg, #FFD700, #FF8C00);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 6px rgba(255, 200, 0, 0.4));
}

.xp-badge {
    background: linear-gradient(135deg, #FFD700, #FFA000);
    color: #000;
    font-weight: 800;
    font-size: 0.75rem;
    padding: 5px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(255, 193, 7, 0.35);
    letter-spacing: 0.5px;
    animation: xpPulse 2s ease-in-out infinite;
}

@keyframes xpPulse {

    0%,
    100% {
        box-shadow: 0 2px 10px rgba(255, 193, 7, 0.35);
    }

    50% {
        box-shadow: 0 2px 20px rgba(255, 193, 7, 0.6);
    }
}

.close-qr-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-qr-btn:hover {
    background: rgba(255, 59, 48, 0.15);
    border-color: rgba(255, 59, 48, 0.3);
    color: #FF3B30;
    transform: rotate(90deg);
}

/* Content Scroll */
.qr-scroll-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.qr-section {
    margin-bottom: 25px;
}

.qr-label {
    display: block;
    color: #8899A6;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    font-weight: 600;
}

/* Sport Grid — Premium Cards */
.sport-grid-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 5px;
}

.sport-option {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 18px;
    padding: 18px 10px 14px;
    text-align: center;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.sport-option::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.08), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
}

.sport-option:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
}

.sport-option:hover::before {
    opacity: 1;
}

.sport-option:active {
    transform: translateY(-1px) scale(0.98);
}

/* Unified selector for icons AND emojis */
.sport-option i,
.sport-option .sport-emoji {
    font-size: 2.4rem;
    display: block;
    margin-bottom: 10px;
    color: #e0e0e0;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

.sport-option:hover i,
.sport-option:hover .sport-emoji {
    transform: scale(1.2) rotate(-5deg);
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.25));
}

.sport-option span:not(.sport-emoji) {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 600;
    transition: color 0.3s;
    display: block;
    letter-spacing: 0.3px;
}

.sport-option.selected {
    background: linear-gradient(135deg, rgba(var(--sport-accent-rgb, 52, 199, 89), 0.15), rgba(var(--sport-accent-rgb, 52, 199, 89), 0.05));
    border-color: rgba(var(--sport-accent-rgb, 52, 199, 89), 0.6);
    box-shadow:
        0 0 0 1px rgba(var(--sport-accent-rgb, 52, 199, 89), 0.4),
        0 8px 25px rgba(var(--sport-accent-rgb, 52, 199, 89), 0.2),
        inset 0 1px 0 rgba(var(--sport-accent-rgb, 52, 199, 89), 0.15);
}

.sport-option.selected i,
.sport-option.selected .sport-emoji {
    color: white;
    transform: scale(1.15);
    filter: drop-shadow(0 0 18px rgba(var(--sport-accent-rgb, 52, 199, 89), 0.5));
}

.sport-option.selected span:not(.sport-emoji) {
    color: #fff;
    font-weight: 700;
}

/* Scoreboard — Premium */
.scoreboard-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 22px;
    padding: 18px 24px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.3);
}

.team-score-block {
    text-align: center;
    flex: 1;
}

.team-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 6px;
    display: block;
    text-transform: uppercase;
}

.score-display {
    font-size: 3.5rem;
    font-weight: 700;
    color: white;
    margin: 5px 0 15px 0;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.08);
    line-height: 1;
}

.score-controls {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.score-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.score-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.score-btn:active {
    transform: scale(0.95);
}

.score-btn.plus {
    background: rgba(52, 199, 89, 0.2);
    border-color: #34C759;
    color: #34C759;
}

.score-btn.plus:hover {
    background: #34C759;
    color: white;
    box-shadow: 0 0 15px rgba(52, 199, 89, 0.4);
}

.score-divider {
    font-size: 2.5rem;
    color: rgba(255, 255, 255, 0.2);
    margin: 0 15px;
    margin-bottom: 40px;
    /* Align with numbers */
}

.match-result-badge {
    text-align: center;
    margin-top: 15px;
    padding: 8px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
}

.match-result-badge.defeat {
    background: rgba(255, 59, 48, 0.2);
    color: var(--apple-red, #FF3B30);
}

.match-result-badge.victory {
    background: rgba(46, 204, 113, 0.2);
    color: #2ECC71;
}

/* Location Card */
.detected-location-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 15px;
    margin-top: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.loc-name {
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.loc-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.loc-tag {
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    color: #aaa;
}

/* Ambiance */
.ambiance-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ambiance-tag {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ccc;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.ambiance-tag:hover,
.ambiance-tag.selected {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
    color: #fff;
    transform: scale(1.05);
}

/* Footer Main Action — Premium */
.qr-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.15), transparent);
}

.btn-main-action {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #34C759, #28A745);
    color: white;
    border: none;
    border-radius: 16px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 20px rgba(52, 199, 89, 0.35);
    position: relative;
    overflow: hidden;
}

.btn-main-action::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent 60%);
    pointer-events: none;
}

.btn-main-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(52, 199, 89, 0.45);
    filter: brightness(1.05);
}

.btn-main-action:active {
    transform: translateY(0) scale(0.98);
}

.btn-main-action:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    filter: saturate(0.5);
}

/* =============================================
   WIZARD PROGRESS BAR — PREMIUM
   ============================================= */
.wizard-progress-bar {
    padding: 12px 24px 14px;
    background: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    margin-bottom: 8px;
}

#wizard-step-label {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    letter-spacing: 0.3px;
}

#wizard-step-percent {
    color: var(--sport-accent, #34C759);
    font-weight: 800;
    font-size: 0.85rem;
}

.progress-track {
    height: 5px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--sport-accent, #34C759), rgba(var(--sport-accent-rgb, 52, 199, 89), 0.6));
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), background 0.6s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 12px var(--sport-glow, rgba(52, 199, 89, 0.4));
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: translateX(-100%);
    animation: shimmer 2.5s ease-in-out infinite;
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* Sport Emoji */
.sport-emoji {
    font-size: 1.8rem;
    display: block;
    margin-bottom: 6px;
}

.sport-option.selected .sport-emoji {
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(0, 210, 190, 0.5));
}

/* =============================================
   WIZARD ACCORDION STYLES — PREMIUM
   ============================================= */
.wizard-step {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 20px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

/* CRITICAL FIX: Ensure content is hidden by default */
.wizard-step-content {
    display: none;
    padding: 0 15px 15px 15px;
}

.wizard-step.active .wizard-step-content {
    display: block;
    animation: stepFadeIn 0.35s ease;
}

@keyframes stepFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wizard-step.active {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(var(--sport-accent-rgb, 52, 199, 89), 0.35);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(var(--sport-accent-rgb, 52, 199, 89), 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.wizard-step.completed {
    background: rgba(var(--sport-accent-rgb, 52, 199, 89), 0.04);
    border-color: rgba(var(--sport-accent-rgb, 52, 199, 89), 0.15);
}

.wizard-step.completed .wizard-step-header {
    background: transparent;
}

.wizard-step.locked {
    opacity: 0.4;
    pointer-events: none;
    filter: saturate(0.3);
}

/* =============================================
   PLAYER SLOTS (2v2 Format)
   ============================================= */
#player-slots-container {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 12px 0;
    flex-wrap: wrap;
}

.player-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: all 0.25s ease;
    min-width: 80px;
}

.player-slot:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.player-slot.active {
    border-color: var(--sport-accent, #34C759);
    background: rgba(52, 199, 89, 0.08);
    box-shadow: 0 0 15px rgba(52, 199, 89, 0.15);
}

.player-slot.has-player {
    border-color: rgba(52, 199, 89, 0.4);
    background: rgba(52, 199, 89, 0.06);
}

.slot-avatar-wrapper {
    position: relative;
    width: 56px;
    height: 56px;
}

.slot-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.player-slot.has-player .slot-avatar {
    border-color: rgba(52, 199, 89, 0.5);
}

.slot-remove,
.slot-add {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    cursor: pointer;
}

.slot-remove {
    background: #FF3B30;
    color: white;
    border: 2px solid #1a1b2e;
}

.slot-add {
    background: var(--sport-accent, #34C759);
    color: white;
    border: 2px solid #1a1b2e;
}

.slot-name {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    text-align: center;
    max-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-slot.has-player .slot-name {
    color: rgba(255, 255, 255, 0.9);
}

/* NUCLEAR FIX FOR MODAL VISIBILITY IN LANDING CSS */
#quick-record-modal.hidden,
.fullscreen-overlay.hidden {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -9999 !important;
}

.wizard-step.locked .wizard-step-header {
    cursor: not-allowed;
}

.wizard-step-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 16px;
    cursor: pointer;
    gap: 12px;
    transition: background 0.25s;
    background: transparent;
    border: none;
    text-align: left;
}

.wizard-step:not(.locked) .wizard-step-header:hover {
    background: rgba(255, 255, 255, 0.04);
}

.step-indicator {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 700;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.wizard-step.active .step-indicator {
    background: linear-gradient(135deg, rgba(var(--sport-accent-rgb, 52, 199, 89), 0.3), rgba(var(--sport-accent-rgb, 52, 199, 89), 0.15));
    border-color: rgba(var(--sport-accent-rgb, 52, 199, 89), 0.4);
    color: var(--sport-accent, #34C759);
    box-shadow: 0 0 15px rgba(var(--sport-accent-rgb, 52, 199, 89), 0.2);
}

.step-indicator .step-check {
    display: none;
    color: #34C759;
}

.wizard-step.completed .step-indicator {
    background: linear-gradient(135deg, rgba(52, 199, 89, 0.25), rgba(52, 199, 89, 0.1));
    border-color: rgba(52, 199, 89, 0.3);
}

.wizard-step.completed .step-indicator .step-number {
    display: none;
}

.wizard-step.completed .step-indicator .step-check {
    display: block;
}

.step-title-area {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* =============================================
   SUCCESS SCREEN (Redesigned)
   ============================================= */
.invite-success-screen {
    position: relative;
    /* Changed from absolute to prevent collapse */
    width: 100%;
    z-index: 100;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px 20px;
    animation: fadeIn 0.4s ease;
}

@media (max-width: 480px) {
    .invite-success-screen {
        padding: 10px;
        /* Reduced padding on mobile */
        justify-content: flex-start;
        /* Start from top on mobile to avoid cut-off */
        padding-top: 30px;
    }
}

.qr-success-content {
    width: 100%;
    max-width: 380px;
    /* Enlarged from 320px */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.qr-success-icon-wrapper {
    margin-bottom: 15px;
    /* Compact */
}

.qr-success-icon-wrapper i {
    font-size: 3.5rem;
    /* Slightly smaller icon */
    color: #34C759;
    filter: drop-shadow(0 0 20px rgba(52, 199, 89, 0.4));
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    80% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

.qr-success-title {
    font-size: 1.5rem;
    /* Smaller title */
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #fff 0%, #ddd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.qr-success-desc {
    color: #8899A6;
    margin-bottom: 20px;
    line-height: 1.4;
    font-size: 0.95rem;
}

.highlight-text {
    color: #fff;
    font-weight: 600;
}

/* Match Summary Card */
.qr-match-summary {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 20px;
    width: 100%;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.02);
}

.summary-sport-icon {
    font-size: 2.5rem;
    margin-bottom: -5px;
}

.summary-score {
    font-size: 3rem;
    font-weight: 900;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 2px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.summary-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 12px;
}

.summary-detail-item {
    font-size: 0.9rem;
    color: #8899A6;
    display: flex;
    align-items: center;
    gap: 8px;
}

.summary-detail-item i {
    font-size: 0.8rem;
    color: #34C759;
    width: 14px;
    text-align: center;
}

.summary-detail-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

/* Link Box */
.qr-link-box {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 15px;
    /* Compact */
    width: 100%;
    /* Ensure full width */
}

.qr-link-box input {
    flex: 1;
    background: transparent;
    border: none;
    color: #FFFFFF;
    font-weight: 700;
    font-family: monospace;
    font-size: 0.95rem;
    padding: 10px 12px;
    outline: none;
    width: 100%;
    min-width: 0;
    /* Prevent flex overflow */
}

.qr-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.qr-icon-btn:hover {
    background: #34C759;
    color: #000;
}

.qr-icon-btn.success {
    background: #34C759;
    color: #000;
}

/* Share Actions */
.qr-share-actions {
    margin-bottom: 15px;
    /* Compact */
    width: 100%;
}

.qr-share-btn.whatsapp {
    width: 100%;
    padding: 12px;
    /* Compact padding */
    border-radius: 12px;
    background: #25D366;
    color: white;
    font-weight: 600;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform 0.2s;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.qr-share-btn.whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
}

.qr-share-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    width: 100%;
}

.qr-share-btn {
    flex: 1;
    padding: 12px;
    border-radius: 12px;
    color: white;
    font-weight: 600;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.2s;
}

.qr-share-btn.sms {
    background: linear-gradient(135deg, #007AFF, #0055CC);
    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
}

.qr-share-btn.sms:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 122, 255, 0.5);
}

/* XP Bonus & Footer */
.qr-xp-bonus {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 193, 7, 0.1);
    color: #FFC107;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(255, 193, 7, 0.3);
    margin-bottom: 20px;
}

.qr-close-text-btn {
    background: transparent;
    border: none;
    color: #888;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.2s;
    padding: 10px;
    /* Touch target */
}

.qr-close-text-btn:hover {
    color: #fff;
}

.step-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.step-summary {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wizard-step.completed .step-summary {
    color: #34C759;
}

.step-chevron {
    color: rgba(255, 255, 255, 0.25);
    transition: all 0.3s ease;
    flex-shrink: 0;
    font-size: 0.8rem;
}

.wizard-step.active .step-chevron {
    transform: rotate(180deg);
    color: #34C759;
}

.wizard-step-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.3s ease,
        opacity 0.3s ease;
    padding: 0 16px;
    opacity: 0;
}

.wizard-step.active .wizard-step-content {
    max-height: 2500px;
    padding: 0 16px 16px 16px;
    opacity: 1;
    overflow: visible;
}

/* Navigation Buttons — Premium */
.wizard-next-btn {
    width: 100%;
    padding: 14px;
    margin-top: 15px;
    background: linear-gradient(135deg, #34C759, #28A745);
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 15px rgba(52, 199, 89, 0.3);
    position: relative;
    overflow: hidden;
}

.wizard-next-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent 60%);
    pointer-events: none;
}

.wizard-next-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(52, 199, 89, 0.4);
    filter: brightness(1.05);
}

.wizard-next-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
}

.wizard-next-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    filter: saturate(0.5);
}

/* Wizard Navigation Buttons Container */
.wizard-nav-buttons {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.wizard-nav-buttons .wizard-next-btn {
    flex: 2;
    margin-top: 0;
}

.wizard-back-btn {
    flex: 1;
    padding: 14px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}

.wizard-back-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

/* FINAL CTA PULSE ANIMATION */
@keyframes ctaPulseGlow {
    0% {
        box-shadow: 0 4px 15px rgba(52, 199, 89, 0.4);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 8px 30px rgba(52, 199, 89, 0.7);
        transform: scale(1.02);
    }

    100% {
        box-shadow: 0 4px 15px rgba(52, 199, 89, 0.4);
        transform: scale(1);
    }
}

.btn-main-action {
    background: linear-gradient(135deg, #34C759, #28A745);
    color: white;
    border: none;
    border-radius: 14px;
    padding: 18px 20px;
    font-size: 1.1rem;
    font-weight: 800;
    width: 100%;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-main-action:disabled {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.3);
    cursor: not-allowed;
    box-shadow: none;
}

.btn-main-action:not(:disabled) {
    animation: ctaPulseGlow 2s infinite ease-in-out;
}

.btn-main-action:not(:disabled):hover {
    filter: brightness(1.1);
    transform: translateY(-2px) scale(1.03);
}

/* Location Smart Selector */
.smart-location-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.smart-loc-btn {
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
    /* More subtle */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.smart-loc-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
}

.smart-loc-btn.detected {
    background: linear-gradient(135deg, rgba(0, 210, 190, 0.1), rgba(0, 210, 190, 0.05));
    border-color: var(--secondary-color, #00D2BE);
}

.smart-loc-icon {
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    flex-shrink: 0;
}

.smart-loc-btn.detected .smart-loc-icon {
    background: var(--bs-primary);
    color: #000;
}

.smart-loc-info {
    flex: 1;
}

.smart-loc-title {
    display: block;
    font-weight: 700;
    color: white;
    font-size: 1rem;
    margin-bottom: 2px;
}

.smart-loc-subtitle {
    display: block;
    font-size: 0.8rem;
    color: #aaa;
}

.smart-loc-arrow {
    color: #666;
}

/* Nearby Scroll */
.nearby-venues-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 5px;
    margin-top: 5px;
    scrollbar-width: none;
}

.nearby-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 8px 14px;
    white-space: nowrap;
    color: #ccc;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.nearby-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.nearby-pill i {
    font-size: 0.8rem;
    color: #888;
}

/* Mobile Tweaks for Modal */
@media (max-width: 480px) {
    .qr-header {
        padding: 15px;
    }

    .qr-scroll-content {
        padding: 15px;
    }

    .score-display {
        font-size: 2.8rem;
    }
}

/* Location Picker Overlay */
.location-picker-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #181926;
    z-index: 100;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-radius: 24px;
}

.location-picker-overlay.hidden {
    display: none;
}

.location-picker-header {
    display: flex;
    align-items: center;
    gap: 15px;
}

.location-picker-header h3 {
    margin: 0;
    color: #fff;
    font-size: 1.1rem;
}

.location-picker-hint {
    color: #8899A6;
    font-size: 0.85rem;
    margin: 0;
    text-align: center;
}

.location-picker-actions {
    margin-top: auto;
}

/* P3: Skeleton Loading Animation */
.skeleton {
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 255, 255, 0.05) 100%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
    border-radius: 8px;
}

@keyframes skeletonShimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.skeleton-map {
    width: 100%;
    height: 250px;
    border-radius: 12px;
}

.skeleton-autocomplete-item {
    height: 45px;
    margin-bottom: 8px;
}

.skeleton-text {
    height: 14px;
    width: 60%;
}

.skeleton-text.short {
    width: 40%;
}

/* Score change animation */
.score-display.changed {
    animation: scorePulse 0.2s ease;
}

@keyframes scorePulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
        color: #00d2be;
    }

    100% {
        transform: scale(1);
    }
}

/* Location Picker Markers */
.picker-marker-emoji {
    font-size: 24px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    cursor: pointer;
    transition: transform 0.2s;
}

.picker-marker-emoji:hover {
    transform: scale(1.2);
}

.picker-facility-tooltip {
    background: rgba(24, 25, 38, 0.95) !important;
    border: 1px solid rgba(0, 210, 190, 0.5) !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-size: 0.8rem !important;
    padding: 6px 10px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.picker-facility-tooltip::before {
    border-top-color: rgba(0, 210, 190, 0.5) !important;
}

/* Picker Loading Indicator */
.picker-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(24, 25, 38, 0.9);
    padding: 15px 25px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 0.9rem;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.picker-loading i {
    color: #00D2BE;
    font-size: 1.2rem;
}

.picker-loading.hidden {
    display: none;
}

/* Picker Search Wrapper */
.picker-search-wrapper {
    position: relative;
}

.picker-autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(24, 25, 38, 0.98);
    border: 1px solid rgba(0, 210, 190, 0.3);
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 9999;
    /* Ensure it's above Leaflet map (z-400+) */
    display: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.picker-autocomplete-item {
    padding: 12px 15px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.picker-autocomplete-item:hover {
    background: rgba(0, 210, 190, 0.15);
}

.picker-autocomplete-item i {
    margin-right: 8px;
    color: #00D2BE;
}

.picker-autocomplete-item.no-result {
    color: #888;
    cursor: default;
}

.picker-autocomplete-item.no-result:hover {
    background: transparent;
}

/* Marker Resets */
.facility-picker-marker,
.custom-picker-marker,
.selected-facility-marker {
    background: transparent !important;
    border: none !important;
}

/* =========================================
   Redesigned Match Timeline
   ========================================= */
.match-timeline {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 500px;
    overflow-y: auto;
    padding-right: 5px;
    /* Space for scrollbar */
}

.match-timeline-item {
    display: flex;
    gap: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: all 0.2s ease;
    align-items: stretch;
}

.match-timeline-item:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(4px);
}

/* Result Colors (Left Border) */
.match-timeline-item.victory {
    border-left: 4px solid #2ecc71;
}

.match-timeline-item.defeat {
    border-left: 4px solid #e74c3c;
}

.match-timeline-item.draw {
    border-left: 4px solid #f1c40f;
}

.timeline-sport-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    width: 40px;
    flex-shrink: 0;
}

.timeline-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.timeline-score {
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
}

.timeline-result {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
}

.timeline-result.victory {
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.1);
}

.timeline-result.defeat {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
}

.timeline-result.draw {
    color: #f1c40f;
    background: rgba(241, 196, 15, 0.1);
}

.timeline-meta {
    display: flex;
    gap: 15px;
    font-size: 0.85rem;
    color: #8899A6;
}

.timeline-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.timeline-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}

/* Validation Badges */
.validation-badge {
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.validation-badge.verified {
    background: rgba(0, 210, 190, 0.15);
    color: #00D2BE;
    border: 1px solid rgba(0, 210, 190, 0.3);
}

.validation-badge.pending {
    background: rgba(255, 193, 7, 0.15);
    color: #FFC107;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

/* Share Button Small */
.share-btn-small {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ccc;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.share-btn-small:hover {
    background: #fff;
    color: #000;
}

/* =========================================
   Badges Grid
   ========================================= */
.badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
    padding: 10px 0;
}

.badge-item,
.badge-locked {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.2s;
    text-align: center;
}

.badge-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.2);
}

.badge-item i {
    color: #FFD700;
    /* Gold */
    font-size: 1.8rem;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.3));
}

.badge-item span {
    font-size: 0.7rem;
    color: #ccc;
    line-height: 1.2;
}

/* Locked Badge */
.badge-locked {
    opacity: 0.5;
    border-style: dashed;
}

.badge-locked i {
    color: #555;
    font-size: 1.5rem;
    filter: none;
}

/* =========================================
   Mobile UX Critical Fixes (Migrated from index.html)
   ========================================= */

/* Touch-Action - Prevent scroll conflicts */
.draggable,
.rating-slider,
.custom-range,
[draggable="true"] {
    touch-action: pan-x;
}

.scrollable-list,
.modal-body-custom,
.team-list {
    touch-action: pan-y;
}

/* Minimum Touch Target Size (44x44px) */
button,
.btn,
[role="button"],
.nav-link,
.dropdown-item {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.btn-sm {
    min-height: 36px;
    min-width: 36px;
}

/* Prevent iOS Zoom on Input Focus */
input,
select,
textarea {
    font-size: 16px !important;
}

/* Safe Area Insets (iPhone X+ notch) */

.header,
#sidebar,
.bottom-nav,
.toast-container {
    padding-bottom: env(safe-area-inset-bottom);
}

.modal .card {
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

/* Disable Double-Tap Zoom */
button,
.btn,
a {
    touch-action: manipulation;
}

/* FIX: Header overlaps filter pills */
.floating-header {
    top: 60px !important;
    /* Push down below main navbar */
}

/* FIX: Bottom Sheet covers FABs */
.bottom-floating-actions {
    z-index: 2200 !important;
    /* Above bottom sheet (2000) */
    bottom: 40px !important;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Hide FABs when bottom sheet is open so users can tap sheet buttons */
.map-bottom-sheet.active~.bottom-floating-actions,
.map-bottom-sheet.active+.bottom-floating-actions {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Alternative: Move FABs up when sheet is active */
#map-wrapper:has(.map-bottom-sheet.active) .bottom-floating-actions {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Mobile improvements */
@media (max-width: 768px) {

    .player-item,
    .booking-item,
    .facility-card {
        padding: 16px;
        min-height: 60px;
    }

    .btn+.btn {
        margin-top: 10px;
    }

    .modal .btn {
        width: 100%;
    }

    .form-group,
    .form-control {
        margin-bottom: 16px;
    }
}

/* 1. Fix Bottom Sheet Handle Visibility */
.sheet-handle {
    width: 60px !important;
    height: 6px !important;
    background-color: #e0e0e0 !important;
    /* Brighter grey */
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    margin: 0 auto !important;
}

.sheet-handle-bar {
    padding: 12px 0 !important;
    margin-bottom: 0 !important;
    background: rgba(36, 36, 53, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.map-bottom-sheet {
    padding-top: 0 !important;
    z-index: 2000 !important;
    background: rgba(36, 36, 53, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    /* Ensure on top of everything */
}

.map-bottom-sheet.active {
    min-height: 250px !important;
    /* Ensure it pops up enough */
    padding-bottom: 40px !important;
}

/* 2. Fix Mobile Filters Visibility - Collapsible */
@media (max-width: 768px) {

    /* Hide the filters by default, only show search */
    .mobile-floating-controls .filter-group:not(:first-child) {
        display: none !important;
        /* Hidden by default */
    }

    /* Show filters when a specific class is added (toggled by JS) */
    .mobile-floating-controls.filters-open .filter-group:not(:first-child) {
        display: block !important;
        background: rgba(36, 36, 53, 0.9) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border-radius: 12px;
        padding: 10px;
        margin-top: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.1);
        animation: fadeIn 0.3s ease;
    }

    /* Add a toggle button style */
    #mobile-filter-toggle-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: var(--primary-color, #059669);
        color: white;
        border: none;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
        position: fixed;
        top: 80px;
        /* Below search bar */
        right: 5%;
        z-index: 1100;
        cursor: pointer;
        font-size: 1.2rem;
        animation: pulse-btn 2s infinite;
    }

    @keyframes pulse-btn {

        0%,
        100% {
            box-shadow: 0 4px 15px rgba(var(--bs-primary-rgb), 0.3);
        }

        50% {
            box-shadow: 0 4px 20px rgba(5, 150, 105, 0.4);
        }
    }

    /* Ensure text is visible in filters */
    .mobile-floating-controls .filter-label {
        display: block !important;
        color: #fff !important;
        margin-bottom: 5px;
    }

    .mobile-floating-controls {
        max-height: 70vh;
        overflow-y: auto;
        padding-bottom: 20px !important;
    }

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

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* 3. Fix Pagination Visibility & Position */
    .map-overlay-controls {
        top: auto !important;
        bottom: 60px !important;
        /* Increased to avoid cutoff */
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 90% !important;
        justify-content: center !important;
        background-color: var(--card-bg, #242435) !important;
        /* Dark bg for contrast */
        color: white !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
        z-index: 1000 !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
        /* Respect safe area */
    }

    .map-overlay-controls .pagination-info {
        color: white !important;
        font-size: 0.8rem !important;
    }

    .map-overlay-controls .pagination-helper-text {
        display: none !important;
        /* Hide helper text on mobile */
    }

    /* Adjust bottom sheet to not cover pagination when active */
    .map-bottom-sheet.active {
        z-index: 2100 !important;
        /* Above pagination */
    }

    /* 4. Fix Dropdown Overlap - Make it flow normally on mobile */
    .multiselect-content {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        margin-top: 10px !important;
        box-shadow: none !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    /* 5. Remove unwanted checkboxes from filter titles */
    .filter-label::before,
    .filter-label::after {
        display: none !important;
        content: none !important;
    }

    .filter-label {
        padding-left: 0 !important;
    }

    /* 6. Fix Autocomplete Z-Index - Ensure it floats above other filters */
    .filter-group:first-of-type {
        position: relative !important;
        z-index: 100 !important;
    }

    .autocomplete-results {
        z-index: 1000 !important;
        background: rgba(36, 36, 53, 0.98) !important;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* 7. Improve Radius Slider Layout */
    .radius-option {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .radius-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .radius-option .range-slider-container {
        max-width: 100% !important;
        width: 100% !important;
    }

    .range-slider {
        height: 6px !important;
        /* Thicker track */
        background: rgba(255, 255, 255, 0.2) !important;
        /* More visible track */
    }
}

/* =============================================
   Modern DateTime Picker for Quick Record
   ============================================= */
.datetime-picker-modern {
    margin-bottom: 20px;
}

.datetime-display {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.datetime-display:hover {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(0, 210, 190, 0.3);
}

.datetime-display:focus-within {
    border-color: #00D2BE;
    box-shadow: 0 0 0 3px rgba(0, 210, 190, 0.15);
}

.datetime-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--bs-primary), #00A896);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.datetime-icon i {
    font-size: 1.3rem;
    color: #fff;
}

.datetime-value-area {
    flex: 1;
    min-width: 0;
}

.datetime-input-modern {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    cursor: pointer !important;
    outline: none !important;
}

.datetime-input-modern::placeholder {
    color: #8899A6;
    font-weight: 400;
}

.datetime-hint {
    font-size: 0.75rem;
    color: #8899A6;
    margin-top: 2px;
    transition: opacity 0.2s;
}

.datetime-display.has-value .datetime-hint {
    display: none;
}

.datetime-chevron {
    color: #8899A6;
    transition: transform 0.2s;
}

.datetime-display:hover .datetime-chevron {
    color: #00D2BE;
}

/* Quick Date Chips */
.quick-date-chips {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.date-chip {
    flex: 1;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #aaa;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.date-chip:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: translateY(-1px);
}

.date-chip.active {
    background: linear-gradient(135deg, rgba(0, 210, 190, 0.2), rgba(0, 210, 190, 0.1));
    border-color: #00D2BE;
    color: #00D2BE;
    font-weight: 600;
}

/* Flatpickr Overrides for Quick Record */
.flatpickr-calendar.quick-record-picker {
    background: #1a1a2e !important;
    border: 1px solid rgba(0, 210, 190, 0.3) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    font-family: 'Inter', sans-serif !important;
    padding: 10px !important;
}

.flatpickr-calendar.quick-record-picker .flatpickr-months {
    padding: 10px 5px !important;
}

.flatpickr-calendar.quick-record-picker .flatpickr-month {
    background: transparent !important;
    color: #fff !important;
}

.flatpickr-calendar.quick-record-picker .flatpickr-current-month {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
}

.flatpickr-calendar.quick-record-picker .flatpickr-prev-month,
.flatpickr-calendar.quick-record-picker .flatpickr-next-month {
    fill: #00D2BE !important;
}

.flatpickr-calendar.quick-record-picker .flatpickr-prev-month:hover,
.flatpickr-calendar.quick-record-picker .flatpickr-next-month:hover {
    background: rgba(0, 210, 190, 0.1) !important;
    border-radius: 50% !important;
}

.flatpickr-calendar.quick-record-picker .flatpickr-weekday {
    color: #8899A6 !important;
    font-weight: 500 !important;
}

.flatpickr-calendar.quick-record-picker .flatpickr-day {
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
}

.flatpickr-calendar.quick-record-picker .flatpickr-day:hover {
    background: rgba(0, 210, 190, 0.15) !important;
    border-color: transparent !important;
}

.flatpickr-calendar.quick-record-picker .flatpickr-day.selected {
    background: linear-gradient(135deg, var(--bs-primary), #00A896) !important;
    border-color: transparent !important;
    color: #000 !important;
    font-weight: 700 !important;
}

.flatpickr-calendar.quick-record-picker .flatpickr-day.today {
    border-color: #00D2BE !important;
}

.flatpickr-calendar.quick-record-picker .flatpickr-day.prevMonthDay,
.flatpickr-calendar.quick-record-picker .flatpickr-day.nextMonthDay {
    color: #555 !important;
}

.flatpickr-calendar.quick-record-picker .flatpickr-time {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin-top: 10px !important;
    padding-top: 15px !important;
}

.flatpickr-calendar.quick-record-picker .flatpickr-time input {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
}

.flatpickr-calendar.quick-record-picker .flatpickr-time .flatpickr-time-separator,
.flatpickr-calendar.quick-record-picker .flatpickr-time .flatpickr-am-pm {
    color: #fff !important;
    font-weight: 600 !important;
}

.flatpickr-calendar.quick-record-picker .flatpickr-am-pm:hover {
    background: rgba(0, 210, 190, 0.15) !important;
}

/* =============================================
   OPPONENT AUTOCOMPLETE RESULTS (A11y Enhanced)
   ============================================= */
.opponent-result-item {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    background: rgba(24, 25, 38, 0.95);
    transition: background 0.15s ease;
}

.opponent-result-item:hover,
.opponent-result-item:focus {
    background: rgba(5, 150, 105, 0.2);
    outline: none;
}

.opponent-result-item:focus {
    box-shadow: inset 0 0 0 2px var(--bs-primary);
}

.opponent-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 8px;
    object-fit: cover;
}

#opponent-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(24, 25, 38, 0.98);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
}

/* Screen reader only announcer */
#sr-announcer {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Invite Option Styles */
.opponent-result-item.invite-option {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 4px;
    background: rgba(46, 204, 113, 0.1);
}

.opponent-result-item.invite-option:hover,
.opponent-result-item.invite-option:focus {
    background: rgba(46, 204, 113, 0.2);
    box-shadow: inset 0 0 0 2px #2ECC71;
}

.invite-icon {
    background: rgba(46, 204, 113, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2ECC71;
    font-size: 0.8rem;
}

/* =============================================
   WIZARD TOAST NOTIFICATIONS
   ============================================= */
.wizard-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    z-index: 11000;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.wizard-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.wizard-toast.success {
    background: linear-gradient(135deg, #2ECC71, #27AE60);
    color: white;
}

.wizard-toast.error {
    background: linear-gradient(135deg, #E74C3C, #C0392B);
    color: white;
}

/* =============================================
   INLINE STYLE REPLACEMENTS
   ============================================= */
.opponent-search-wrapper {
    position: relative;
}

.wizard-nav-buttons--spaced {
    margin-top: 20px;
}

.custom-date-wrapper,
.custom-time-wrapper {
    margin-top: 10px;
}

.guest-name-wrapper {
    margin-top: 10px;
}

.qr-label--spaced {
    margin-top: 15px;
}

.qr-label--extra-spaced {
    margin-top: 20px;
}

#location-picker-map {
    height: 250px;
    width: 100%;
    border-radius: 12px;
    margin-top: 10px;
    position: relative;
}

/* =============================================
   UTILITY CLASSES
   ============================================= */
.full-width {
    width: 100%;
}

.hidden {
    display: none !important;
}

/* =========================================
   ULTRA-PREMIUM V2 - Mesh Gradients & Depth
   ========================================= */
.mesh-gradient {
    position: absolute;
    width: 600px;
    height: 600px;
    filter: blur(100px);
    opacity: 0.15;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
}

.mesh-1 {
    background: radial-gradient(circle, var(--primary-brand) 0%, transparent 70%);
    top: -100px;
    left: -100px;
    animation: drift 20s infinite alternate;
}

.mesh-2 {
    background: radial-gradient(circle, #007AFF 0%, transparent 70%);
    bottom: -100px;
    right: -100px;
    animation: drift 25s infinite alternate-reverse;
}

.mesh-3 {
    background: radial-gradient(circle, #5856D6 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.05;
}

@keyframes drift {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(100px, 50px) scale(1.1);
    }
}

/* =========================================
   ULTRA-PREMIUM V2 - Reveal Animations
   ========================================= */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   ULTRA-PREMIUM V2 - Glassmorphism Enhancements
   ========================================= */
.feature-card {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.feature-card:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--primary-brand) !important;
    box-shadow: 0 20px 40px rgba(var(--bs-primary-rgb), 0.15) !important;
    transform: translateY(-8px) scale(1.02) !important;
}

.feature-icon {
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.2), rgba(var(--bs-primary-rgb), 0.05)) !important;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.2);
    box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.1);
}

.hero-stats strong {
    font-size: 1.5rem;
    color: #fff;
    display: block;
}

/* =============================================
   WIZARD DUEL MODE BUTTONS (Added Fix)
   ============================================= */
.duel-result-container {
    margin-top: 20px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.duel-buttons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.duel-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    width: 100%;
    position: relative;
    overflow: hidden;
}

.duel-btn:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.15);
}

.duel-btn:active {
    transform: scale(0.96);
}

.duel-btn .emoji {
    font-size: 1.8rem;
    margin-bottom: 2px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.duel-btn span:not(.emoji) {
    font-size: 0.8rem;
    font-weight: 600;
}

/* Selected States — Vivid */
.duel-btn.win.selected,
.duel-btn.win:hover {
    background: rgba(52, 199, 89, 0.12);
    border-color: rgba(52, 199, 89, 0.5);
    color: #34C759;
    box-shadow: 0 0 20px rgba(52, 199, 89, 0.15), inset 0 0 15px rgba(52, 199, 89, 0.05);
}

.duel-btn.win.selected .emoji {
    transform: scale(1.2);
    filter: drop-shadow(0 0 8px rgba(52, 199, 89, 0.4));
}

.duel-btn.draw.selected,
.duel-btn.draw:hover {
    background: rgba(255, 193, 7, 0.12);
    border-color: rgba(255, 193, 7, 0.5);
    color: #FFC107;
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.15), inset 0 0 15px rgba(255, 193, 7, 0.05);
}

.duel-btn.draw.selected .emoji {
    transform: scale(1.2);
    filter: drop-shadow(0 0 8px rgba(255, 193, 7, 0.4));
}

.duel-btn.loss.selected,
.duel-btn.loss:hover {
    background: rgba(255, 59, 48, 0.12);
    border-color: rgba(255, 59, 48, 0.5);
    color: #FF3B30;
    box-shadow: 0 0 20px rgba(255, 59, 48, 0.15), inset 0 0 15px rgba(255, 59, 48, 0.05);
}

.duel-btn.loss.selected .emoji {
    transform: scale(1.2);
    filter: drop-shadow(0 0 8px rgba(255, 59, 48, 0.4));
}


/* =============================================
   WIZARD SMART CHIPS — PREMIUM
   ============================================= */
.smart-chips-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.smart-chip {
    flex: 1;
    min-width: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.smart-chip:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.15);
}

.smart-chip:active {
    transform: scale(0.97);
}

.smart-chip .chip-icon {
    font-size: 1.3rem;
    margin-bottom: 2px;
}

.smart-chip span {
    font-size: 0.8rem;
    font-weight: 600;
}

/* Selected State */
.smart-chip.selected {
    background: linear-gradient(135deg, rgba(90, 200, 250, 0.12), rgba(90, 200, 250, 0.05));
    border-color: rgba(90, 200, 250, 0.45);
    color: #5AC8FA;
    box-shadow: 0 0 18px rgba(90, 200, 250, 0.12), inset 0 0 10px rgba(90, 200, 250, 0.04);
}

/* Custom inputs wrapper adjustments */
.custom-date-wrapper,

/* =============================================
   SUCCESS SCREEN ALIGNMENT FIX (Final)
   ============================================= */
/* Force parent scroll content to have no padding in success mode */
.quick-record-container.success-view .qr-scroll-content {
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.invite-success-screen {
    width: 100%;
    max-width: 100%;
    padding: 20px;
    margin: 0 auto;
    /* Ensure centering */
    box-sizing: border-box;
}

.qr-success-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.qr-success-desc {
    margin: 20px 0 10px 0 !important;
    text-align: center;
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.5;
}

.qr-match-summary {
    width: 90%;
    /* Reduce from 100% to ensure margin */
    max-width: 360px;
    /* Slightly reduced */
    margin: 0 auto;
    box-sizing: border-box;
    /* Ensure padding doesn't add to width */
    overflow: hidden;
    /* Cut off any internal overflow */
}

/* Hybrid Wizard - Engines & Score UX */
.binary-engine-ui {
    padding: 10px 0;
}

.duel-buttons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 15px;
}

.duel-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px 5px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.duel-btn .emoji {
    font-size: 1.5rem;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.duel-btn span:not(.emoji) {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
}

.duel-btn:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-2px);
}

.duel-btn.selected {
    border-color: rgba(52, 199, 89, 0.5);
    background: rgba(52, 199, 89, 0.1);
    box-shadow: 0 0 18px rgba(52, 199, 89, 0.15);
}

.duel-btn.selected .emoji {
    transform: scale(1.15);
}

.duel-btn.selected span:not(.emoji) {
    color: #fff;
}

.btn-detailed-toggle {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #8899A6 !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.btn-detailed-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-detailed-toggle i {
    color: var(--bs-primary);
    font-size: 1rem;
}

/* Sets/Detailed Engine */
.detailed-engine-ui {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.engine-label {
    font-size: 0.75rem;
    color: #8899A6;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    text-align: center;
}

.combat-methods-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.method-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px;
    border-radius: 12px;
    color: #8899A6;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.method-btn.selected {
    background: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
}

/* Sets Engine Specifics */
.set-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.set-number {
    min-width: 60px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #8899A6;
}

.set-input {
    width: 60px !important;
    text-align: center;
    padding: 10px 5px !important;
}

.set-sep {
    color: rgba(255, 255, 255, 0.2);
    font-weight: 600;
}

.set-remove-btn {
    background: none;
    border: none;
    color: var(--apple-red, #ff3b30);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.set-remove-btn:hover {
    transform: scale(1.1);
}

.set-remove-placeholder {
    width: 34px;
}

.full-width {
    width: 100%;
}