/* ===============================================
   ROBOT SOCCER KIT - MODERN VIBRANT SPORTS UI
   Style: Vibrant & Sportif
   VERSION CORRIGÉE - Tous les bugs résolus
   =============================================== */

/* ============ ROOT VARIABLES - COLOR SYSTEM ============ */
:root {
    /* Green Team - Electric Gradient */
    --green-primary: #00ff88;
    --green-secondary: #00aa55;
    --green-dark: #00662e;
    --green-glow: rgba(0, 255, 136, 0.4);
    --green-bg: rgba(0, 255, 136, 0.12);
    --green-border: rgba(0, 255, 136, 0.5);

    /* Blue Team - Cyan Vibrant Gradient */
    --blue-primary: #00d4ff;
    --blue-secondary: #0088ff;
    --blue-dark: #0055aa;
    --blue-glow: rgba(0, 212, 255, 0.4);
    --blue-bg: rgba(0, 136, 255, 0.12);
    --blue-border: rgba(0, 136, 255, 0.5);

    /* Accent Colors - Energetic */
    --orange-neon: #ff6b35;
    --orange-glow: rgba(255, 107, 53, 0.5);
    --purple-accent: #a855f7;
    --yellow-electric: #ffd500;
    --red-danger: #ff3547;

    /* Neutrals */
    --grey-bg: rgba(180, 180, 180, 0.15);
    --grey-light: #e5e7eb;
    --grey-medium: #9ca3af;
    --grey-dark: #374151;

    /* Backgrounds */
    --bg-dark: #1a1a2e;
    --bg-darker: #0f0f1e;
    --bg-card: #ffffff;
    --bg-overlay: rgba(0, 0, 0, 0.85);

    /* Spacing System (8px base) */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 48px;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
    --shadow-glow: 0 0 20px;

    /* Layout - Calculé dynamiquement */
    --navbar-height: 76px;
}

/* ============ BASE STYLES & TYPOGRAPHY ============ */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    position: relative;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #1f2937;
    overflow-x: hidden;
}

/* Typography Hierarchy */
h1, h2, h3, h4, h5, h6 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: var(--space-xs);
}

h1 { font-size: 2.5rem; font-weight: 800; }
h2 { font-size: 2rem; font-weight: 700; }
h3 { font-size: 1.75rem; font-weight: 700; }
h4 { font-size: 1.5rem; font-weight: 600; }
h5 { font-size: 1.25rem; font-weight: 600; }
h6 { font-size: 1rem; font-weight: 600; }

/* Monospace for technical data */
code, .fps, .detection {
    font-family: 'Courier New', Courier, monospace;
    font-weight: 500;
}

/* ============ LOADING SCREEN ============ */
.waiting-screen {
    position: fixed;
    z-index: 9999;
    background: linear-gradient(135deg, var(--bg-darker) 0%, var(--bg-dark) 100%);
    width: 100%;
    height: 100%;
    display: inherit;
}

.loader-text {
    position: fixed;
    text-align: center;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    top: 80%;
    font-size: 3rem;
    font-weight: 700;
    font-family: Arial, Helvetica, sans-serif;
    background: linear-gradient(90deg, var(--green-primary), var(--blue-primary), var(--orange-neon));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent; /* Fallback for non-webkit browsers */
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* FIX BUG #1: Animation spin corrigée - suppression du content impossible */
.loader-robot {
    position: fixed;
    z-index: 10000;
    left: calc(50% - 240px);
    top: calc(40% - 240px);
    width: 470px;
    height: 470px;
    animation: spin 5s linear infinite;
    animation-play-state: running;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
        filter: drop-shadow(0 0 40px var(--blue-glow)) hue-rotate(0deg);
    }
    25% {
        filter: drop-shadow(0 0 40px var(--green-glow)) hue-rotate(90deg);
    }
    50% {
        filter: drop-shadow(0 0 40px var(--blue-glow)) hue-rotate(180deg);
    }
    75% {
        filter: drop-shadow(0 0 40px var(--green-glow)) hue-rotate(270deg);
    }
    100% {
        transform: rotate(360deg);
        filter: drop-shadow(0 0 40px var(--blue-glow)) hue-rotate(360deg);
    }
}

/* ============ NAVBAR - Gradient ============ */
.navbar {
    background: linear-gradient(135deg, rgba(26, 26, 46, 1) 0%, rgba(15, 15, 30, 1) 100%) !important;
    border-bottom: 2px solid rgba(0, 255, 136, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    padding: var(--space-xs) var(--space-sm);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar-brand {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    color: #fff !important;
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.navbar-brand:hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 0 12px var(--orange-glow));
}

.navbar-brand img {
    filter: drop-shadow(0 0 8px var(--orange-glow));
    transition: all var(--transition-normal);
    animation: ballPulse 2s ease-in-out infinite;
    will-change: transform;
}

/* Performance: Pause animation when not visible */
.navbar-brand img:not(:hover) {
    animation-play-state: running;
}

@keyframes ballPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.navbar-brand:hover img {
    transform: rotate(360deg) scale(1.1);
}

/* FPS Counter */
.style_fps {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.3), rgba(168, 85, 247, 0.3));
    border: 2px solid rgba(255, 107, 53, 0.4);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    margin-left: 0;
    font-size: 0.875rem;
    text-align: center;
    min-width: 3.5em;
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.3);
    transition: all 0.2s ease;
}

.style_fps:hover {
    box-shadow: 0 0 30px rgba(255, 107, 53, 0.5);
}

.fps {
    color: var(--orange-neon);
    font-weight: 600;
    text-shadow: 0 0 10px var(--orange-glow);
}

/* Blinking Badge */
.blinking {
    animation: blinkerEnhanced 1.5s ease-in-out infinite;
}

@keyframes blinkerEnhanced {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.4;
        transform: scale(0.95);
    }
}

.no-backend {
    position: relative;
}

/* ============ NAV TABS - Modern Active States ============ */
.nav-item {
    background: transparent;
    margin-right: var(--space-xs);
    transition: all var(--transition-normal);
    border-radius: var(--radius-md);
}

.nav-link {
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    padding: 8px 16px;
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 600;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    overflow: hidden;
}

.nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--green-primary), var(--blue-primary));
    transform: translateX(-50%);
    transition: width var(--transition-normal);
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff !important;
    transform: translateY(-2px);
}

.nav-link:hover::before {
    width: 80%;
}

.nav-link.active {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(0, 136, 255, 0.15));
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(0, 255, 136, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.nav-link.active::before {
    width: 100%;
}

/* ============ BUTTONS - Vibrant with Glow Effects ============ */
/* FIX BUG #8 & #9: Border et text-transform plus sélectifs */
.btn {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    border-radius: var(--radius-sm);
    padding: 8px 16px;
    transition: all var(--transition-normal);
    position: relative;
    letter-spacing: 0.3px;
    font-size: 1rem;
    /* CORRECTION VOILE BLANC - Désactiver le box-shadow Bootstrap inset blanc */
    --bs-btn-box-shadow: none !important;
    --bs-btn-active-box-shadow: none !important;
    --bs-btn-focus-box-shadow: none !important;
    box-shadow: none;
}

.btn::before,
.btn::after {
    display: none !important;
}

/* Focus sans voile blanc */
.btn:focus,
.btn:focus-visible {
    box-shadow: none !important;
    outline: 3px solid var(--blue-primary);
    outline-offset: 2px;
}

/* Text-transform uppercase seulement pour certains boutons */
.btn-primary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-secondary {
    text-transform: uppercase;
}


/* Primary Button - Gradient */
.btn-primary {
    background: linear-gradient(135deg, rgba(0, 212, 255, 1), rgba(0, 136, 255, 1)) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 15px var(--blue-glow) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: linear-gradient(135deg, rgba(0, 136, 255, 1), rgba(0, 212, 255, 1)) !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px var(--blue-glow);
    color: white !important;
}

/* Success Button - Green Gradient */
.btn-success {
    background: linear-gradient(135deg, rgba(0, 255, 136, 1), rgba(0, 170, 85, 1)) !important;
    color: #000 !important;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 15px var(--green-glow) !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background: linear-gradient(135deg, rgba(0, 170, 85, 1), rgba(0, 255, 136, 1)) !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px var(--green-glow);
    color: #000 !important;
}

/* Danger Button - Pulsing Red */
.btn-danger {
    background: linear-gradient(135deg, rgba(255, 53, 71, 1), rgba(220, 20, 60, 1)) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 15px rgba(255, 53, 71, 0.4) !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background: linear-gradient(135deg, rgba(220, 20, 60, 1), rgba(255, 53, 71, 1)) !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 53, 71, 0.6);
    color: white !important;
}

/* Warning Button */
.btn-warning {
    background: linear-gradient(135deg, rgba(255, 213, 0, 1), rgba(255, 107, 53, 1)) !important;
    color: #000 !important;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 15px var(--orange-glow) !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background: linear-gradient(135deg, rgba(255, 107, 53, 1), rgba(255, 213, 0, 1)) !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px var(--orange-glow);
    color: #000 !important;
}

/* Secondary Button */
.btn-secondary {
    background: linear-gradient(135deg, rgba(55, 65, 81, 1), rgba(75, 85, 99, 1)) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 15px rgba(75, 85, 99, 0.3) !important;
    --bs-btn-hover-bg: rgba(75, 85, 99, 1) !important;
    --bs-btn-hover-border-color: rgba(75, 85, 99, 1) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background: linear-gradient(135deg, rgba(75, 85, 99, 1), rgba(55, 65, 81, 1)) !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(75, 85, 99, 0.5);
    color: white !important;
}

/* FIX BUG #8: Outline Buttons - Conserver les borders */
.btn-outline-light,
.btn-outline-dark,
.btn-outline-secondary,
.btn-outline-warning {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid currentColor;
    transition: all 0.2s ease;
    box-shadow: none;
    /* Neutraliser les variables Bootstrap hover pour outline buttons */
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.2) !important;
    --bs-btn-hover-color: currentColor !important;
    --bs-btn-hover-border-color: currentColor !important;
    --bs-btn-active-bg: rgba(255, 255, 255, 0.2) !important;
    --bs-btn-active-color: currentColor !important;
}

.btn-outline-light:hover,
.btn-outline-dark:hover,
.btn-outline-secondary:hover,
.btn-outline-warning:hover {
    background: rgba(255, 255, 255, 0.2);
    opacity: 0.9;
    box-shadow: none;
}

.btn-outline-light:focus,
.btn-outline-dark:focus,
.btn-outline-secondary:focus,
.btn-outline-warning:focus,
.btn-outline-light:active,
.btn-outline-dark:active,
.btn-outline-secondary:active,
.btn-outline-warning:active {
    background: transparent;
    box-shadow: none;
}

/* Button Sizes */
.btn-sm {
    padding: 6px 12px;
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
}

.btn-lg {
    padding: 16px 32px;
    font-size: 1.25rem;
    border-radius: var(--radius-lg);
}

/* Disabled State */
.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    filter: grayscale(60%);
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ============ EMERGENCY BUTTON - Glassmorphism Design ============ */
.emergency-button {
    position: fixed !important;
    right: 16px !important;
    bottom: 16px !important;
    z-index: 999999 !important;
    animation: emergencyPulse 1.5s ease-in-out infinite;
    will-change: transform !important;
}

/* Animation pulsation intense pour urgence */
@keyframes emergencyPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
}

/* Performance: Pause when page is not focused */
@media (prefers-reduced-motion: reduce) {
    .emergency-button {
        animation: none;
    }
}

/* Style du bouton emergency - Cohérent avec les autres boutons */
.emergency-button .btn,
.emergency-button .btn-danger {
    /* Gradient rouge intense - comme btn-danger mais plus intense */
    background: linear-gradient(135deg, rgba(255, 53, 71, 1), rgba(220, 20, 60, 1)) !important;

    /* Texte et typographie */
    color: white !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;

    /* Dimensions et espacement */
    padding: 12px 24px !important;
    border-radius: var(--radius-sm) !important;

    /* Bordure glassmorphism - comme les autres boutons */
    border: 1px solid rgba(255, 255, 255, 0.4) !important;

    /* Box-shadow rouge intense avec glow */
    box-shadow: 0 6px 20px rgba(255, 53, 71, 0.7),
                0 0 40px rgba(255, 53, 71, 0.4) !important;

    /* Interaction */
    cursor: pointer !important;
    transition: all var(--transition-normal) !important;
    position: relative !important;
    overflow: visible !important;

    /* Désactiver les box-shadow Bootstrap */
    --bs-btn-box-shadow: none !important;
    --bs-btn-active-box-shadow: none !important;
    --bs-btn-focus-box-shadow: none !important;
}

/* Effet hover - comme btn-danger mais plus intense */
.emergency-button .btn:hover,
.emergency-button .btn-danger:hover {
    background: linear-gradient(135deg, rgba(220, 20, 60, 1), rgba(255, 53, 71, 1)) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 30px rgba(255, 53, 71, 0.9),
                0 0 60px rgba(255, 53, 71, 0.6) !important;
    color: white !important;
}

/* Effet focus/active */
.emergency-button .btn:focus,
.emergency-button .btn:active,
.emergency-button .btn-danger:focus,
.emergency-button .btn-danger:active {
    background: linear-gradient(135deg, rgba(220, 20, 60, 1), rgba(255, 53, 71, 1)) !important;
    box-shadow: 0 8px 25px rgba(255, 53, 71, 0.9),
                0 0 50px rgba(255, 53, 71, 0.5) !important;
    outline: 3px solid rgba(255, 53, 71, 0.5) !important;
    outline-offset: 2px !important;
    color: white !important;
}

/* ============ SETTINGS BUTTON - Apple Style ============ */
/* FIX BUG #7: Position recalculée */
.settings-button {
    position: fixed !important;
    left: 19px;
    top: 90px;
    z-index: 100;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.settings-button:hover {
    transform: scale(1.15);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 1) !important;
}

.settings-button:active {
    transform: scale(0.9);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: all 0.08s ease-out;
}

/* Icon rotation animation */
.settings-button .bi {
    display: inline-block;
    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.settings-button:hover .bi {
    transform: rotate(360deg);
}

/* AMÉLIORATION: Focus visible pour accessibilité */
.settings-button:focus-visible {
    outline: 3px solid rgba(0, 136, 255, 0.6);
    outline-offset: 3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08),
                0 0 0 4px rgba(0, 136, 255, 0.2);
}

/* AMÉLIORATION: Effet wave au clic */
.settings-button {
    position: relative;
    overflow: visible;
}

.settings-button::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(0, 136, 255, 0.3) 0%, transparent 70%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.settings-button:active::after {
    opacity: 1;
    animation: clickWave 0.6s ease-out;
}

@keyframes clickWave {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* AMÉLIORATION: Dark Mode Support */
body.dark-mode .settings-button {
    background: rgba(30, 30, 50, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
                0 0 20px rgba(0, 212, 255, 0.15);
    color: #00d4ff;
}

body.dark-mode .settings-button:hover {
    background: rgba(35, 35, 55, 1) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5),
                0 0 30px rgba(0, 212, 255, 0.3);
    border-color: rgba(0, 212, 255, 0.5);
}

body.dark-mode .settings-button:focus-visible {
    outline-color: rgba(0, 212, 255, 0.8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
                0 0 0 4px rgba(0, 212, 255, 0.3);
}

/* AMÉLIORATION: Responsive Mobile */
@media (max-width: 768px) {
    .settings-button {
        left: 10px;
        top: 70px;
        padding: 12px;
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .settings-button {
        left: 8px;
        top: 65px;
        padding: 10px;
        font-size: 1rem;
    }
}

/* ============ CARDS - Modern Lift Effect ============ */
/* FIX BUG #3 & #14: Ajout de will-change pour performance */
.card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    margin-bottom: var(--space-sm);
    transition: all 0.2s ease;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

.card-header {
    background: linear-gradient(135deg, rgba(248, 249, 250, 1) 0%, rgba(233, 236, 239, 1) 100%);
    border-bottom: 2px solid rgba(0, 0, 0, 0.08);
    padding: var(--space-sm) var(--space-md);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: capitalize;
    color: var(--grey-dark);
}

.card-body {
    padding: var(--space-sm);
}

/* FIX BUG #5: Text-shadow corrigé pour meilleure lisibilité */
/* Team Cards - Green */
.bg-head-green {
    background: linear-gradient(135deg, var(--green-primary), var(--green-secondary)) !important;
    color: #fff !important;
    font-weight: 800;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2);
}

.bg-body-green {
    background: var(--green-bg) !important;
    border-left: 4px solid var(--green-primary);
}

.border-green {
    border: 2px solid var(--green-primary) !important;
    box-shadow: 0 0 20px var(--green-glow);
}

.text-green {
    color: var(--green-secondary) !important;
    font-weight: 700;
}

/* Team Cards - Blue */
.bg-head-blue {
    background: linear-gradient(135deg, var(--blue-primary), var(--blue-secondary)) !important;
    color: #fff !important;
    font-weight: 800;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2);
}

.bg-body-blue {
    background: var(--blue-bg) !important;
    border-left: 4px solid var(--blue-primary);
}

.border-blue {
    border: 2px solid var(--blue-primary) !important;
    box-shadow: 0 0 20px var(--blue-glow);
}

.text-blue {
    color: var(--blue-secondary) !important;
    font-weight: 700;
}

/* Neutral/Grey Cards */
.bg-body-grey {
    background: var(--grey-bg) !important;
}

.bg-body-red {
    background: rgba(250, 53, 69, 1) !important;
}

/* ============ FORMS & INPUTS ============ */
.form-control, .form-select {
    border: 2px solid #e5e7eb;
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 1rem;
    transition: all var(--transition-normal);
    background: white;
}

.form-control:focus, .form-select:focus {
    border-color: var(--blue-primary);
    box-shadow: 0 0 0 4px var(--blue-glow), 0 0 20px var(--blue-glow);
    outline: none;
    transform: translateY(-2px);
}

.form_green_border:focus {
    border-color: var(--green-primary) !important;
    box-shadow: 0 0 0 4px var(--green-glow), 0 0 20px var(--green-glow) !important;
}

/* Styles spécifiques pour les dropdowns de sélection de caméra */
.cameras, .resolutions {
    min-width: 200px;
    width: 100%;
    min-height: 44px;
    font-size: 1.05rem;
    cursor: pointer;
    font-weight: 500;
}

.cameras option, .resolutions option {
    padding: 10px 12px;
}

/* Améliorer le hover pour meilleure visibilité */
.cameras:hover:not(:disabled),
.resolutions:hover:not(:disabled) {
    border-color: var(--blue-primary);
    box-shadow: 0 0 8px var(--blue-glow);
}

/* Responsive: côte à côte sur grands écrans */
@media (min-width: 768px) {
    .cameras, .resolutions {
        width: 100%;
    }
}

/* ============ PROGRESS BARS - Animated ============ */
div.progress {
    margin: 0;
    height: 12px;
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.1);
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.progress-large {
    height: 20px;
}

.progress-bar {
    background: linear-gradient(90deg, var(--blue-primary), var(--blue-secondary));
    transition: width var(--transition-slow);
    box-shadow: 0 0 10px var(--blue-glow);
    position: relative;
    overflow: hidden;
}

.progress-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: progressShine 2s ease-in-out infinite;
}

/* Performance: Pause shine animation when progress is complete */
.progress-bar[style*="width: 100%"]::before {
    animation-play-state: paused;
}

@keyframes progressShine {
    0% { left: -100%; }
    100% { left: 200%; }
}

.progress-bar-striped.bg-success {
    background: linear-gradient(90deg, var(--green-primary), var(--green-secondary)) !important;
    box-shadow: 0 0 10px var(--green-glow);
}

/* ============ SCORE DISPLAY - Bold & Large ============ */
#GreenScore, #BlueScore {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    font-size: 3rem;
    line-height: 1;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    display: inline-block;
}

.TimerMinutes {
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    font-size: 2rem;
    line-height: 1;
    color: var(--grey-dark);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ============ GAME STATE ============ */
.GameState {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 1.25rem;
    color: var(--orange-neon);
    text-shadow: 0 0 10px var(--orange-glow);
}

/* ============ CAMERA AREA ============ */
.camera-area {
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: 0;
    margin: 0;
}

/* FIX BUG #12: Calculs recalculés avec nouvelle navbar height */
.camera-area-referee {
    width: 100%;
    height: calc(100vh - var(--navbar-height) - 281px);
    position: relative;
}

.camera-image {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-normal);
    padding: 0 !important;
    margin: 0 !important;
}

.camera-image:hover {
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
}

/* Réduire l'espacement autour de l'image de caméra */
.vision-show-running .row {
    margin: 0;
    display: flex;
    align-items: stretch;
}

.vision-show-running .col-md-6 {
    padding-left: 8px;
    padding-right: 8px;
    display: flex;
    flex-direction: column;
}

/* Menu paramètres caméra - même hauteur que l'image */
.vision-show-running .col-md-6 .card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.vision-show-running .col-md-6 .card .card-body {
    flex: 1;
    overflow-y: auto;
}

.vision-show-running .camera-area {
    height: 100%;
    display: flex;
    align-items: center;
}

.sim_vim {
    position: absolute;
    z-index: 0;
    opacity: 1;
}

/* ViewChange button z-index pour superposition correcte */
#ViewChange {
    position: relative;
    z-index: 1;
}

#back {
    object-fit: contain;
}

/* ============ REFEREE HISTORY / CHAT ============ */
/* FIX BUG #12: Calculs recalculés */
.tchat-dim {
    height: calc(100vh - var(--navbar-height) - 315px);
    background: rgba(248, 249, 250, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-md);
}

#RefereeHistory {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tchat-dim .card-header {
    padding: 8px 12px;
}

.tchat-dim .card-header h5 {
    font-size: 1rem;
    margin-bottom: 0;
}

.tchat-dim .card-body {
    padding: 8px !important;
}

#NoHistory {
    font-size: 0.9rem;
    margin: 8px 0;
}

/* Toast events in Referee History - smaller */
#RefereeHistory .toast {
    font-size: 0.85rem;
    margin-bottom: 6px;
}

#RefereeHistory .toast-header {
    padding: 6px 10px;
    font-size: 0.85rem;
}

#RefereeHistory .toast-header i {
    font-size: 0.8rem;
}

#RefereeHistory .toast-header small {
    font-size: 0.75rem;
}

#RefereeHistory .toast-body {
    padding: 8px 10px;
}

#RefereeHistory .toast-body .btn {
    padding: 4px 8px;
    font-size: 0.75rem;
}

/* Toast Positions */
.neutral-toast-position {
    margin-left: auto;
    margin-right: auto;
}

.blue-toast-position {
    margin-left: auto;
    margin-right: 0;
}

.green-toast-position {
    margin-left: 0;
    margin-right: auto;
}

/* ============ ROBOT PENALTY SECTION ============ */
.robot-penalty {
    padding: 9px;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.6);
    position: relative;
}

.robot-penalty:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.robot-penalty img {
    transition: transform var(--transition-normal);
    height: 38px !important;
    width: auto;
}

.robot-penalty:hover img {
    transform: rotate(5deg);
}

.robot-state h6 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    margin: 0;
    font-size: 0.88rem;
}

.robot-penalty .btn-sm {
    padding: 3px 7px;
    font-size: 0.78rem;
}

.robot-penalty .progress {
    height: 8px;
}

.robot-penalize-tab .card-body {
    padding: 9px !important;
}

.robot-penalty.mb-3 {
    margin-bottom: 9px !important;
}

.robot-penalty.mb-1 {
    margin-bottom: 4px !important;
}

.robot-penalty.mt-1 {
    margin-top: 4px !important;
}

.robot-penalize-tab .card-header {
    padding: 9px 13px;
    font-size: 0.98rem;
}

.robot-penalize-tab .card-header b {
    font-size: 0.98rem;
}

.vert-align {
    display: flex;
    align-items: center;
}

/* Score Zone Buttons */
.score-zone button {
    transition: all var(--transition-normal);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.score-zone button:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* ============ TABLES ============ */
.table {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

.table thead th {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 1rem;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-bottom: 3px solid var(--blue-primary);
}

.scheduler-game-row-selected,
.scheduler-game-row-selected tr {
    background-color: rgba(255, 200, 0, 0.25) !important;
    box-shadow: inset 0 0 0 2px var(--yellow-electric);
}

/* ============ MODAL ============ */
.modal-content {
    border-radius: var(--radius-lg);
    border: none;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.modal-header {
    background: linear-gradient(135deg, rgba(248, 249, 250, 1), rgba(233, 236, 239, 1));
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    padding: var(--space-sm) var(--space-md);
}

.modal-title {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--grey-dark);
}

.modal-body {
    padding: var(--space-md);
}

.modal-footer {
    border-top: 2px solid rgba(0, 0, 0, 0.06);
    padding: var(--space-sm) var(--space-md);
}

/* ============ OFFCANVAS (Settings Panel) ============ */
.offcanvas {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 249, 250, 0.9));
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.2);
}

.offcanvas-header {
    background: linear-gradient(135deg, rgba(55, 65, 81, 1), rgba(75, 85, 99, 1));
    color: white;
    padding: var(--space-sm) var(--space-md);
}

.offcanvas-title {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
}

.offcanvas-body {
    padding: var(--space-md);
}

/* ============ ALERTS ============ */
.alert {
    border-radius: var(--radius-md);
    border: none;
    padding: var(--space-sm) var(--space-md);
    font-weight: 600;
    font-size: 1rem;
}

.alert-warning {
    background: linear-gradient(135deg, rgba(255, 213, 0, 0.2), rgba(255, 107, 53, 0.2));
    border-left: 4px solid var(--orange-neon);
    box-shadow: 0 4px 16px rgba(255, 107, 53, 0.2);
}

/* ============ UTILITY CLASSES ============ */
.invisible {
    opacity: 0;
    pointer-events: none;
}

/* Vision States */
.vision-show-running {
    display: none;
}

.vision-running .vision-show-running {
    display: block;
    animation: fadeIn var(--transition-slow);
}

.vision-running .vision-hide-running {
    display: none;
}

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

.vision-has-no-error {
    display: none;
}

.vision-no-error .vision-has-no-error {
    display: inline;
    animation: successPop 0.5s ease;
}

.vision-no-error .vision-has-error {
    display: none;
}

@keyframes successPop {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

/* Robots Warning */
.robots-show-warning {
    display: none;
}

.robots-warning .robots-show-warning {
    display: inline;
    animation: warningBlink 1s ease-in-out infinite;
}

@keyframes warningBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.control-show-warning {
    display: none;
}

.control-warning .control-show-warning {
    display: inline;
    animation: warningBlink 1s ease-in-out infinite;
}

/* Detection Wrapper */
.detection-wrapper {
    min-height: 150px;
    background: rgba(248, 249, 250, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.detection {
    color: var(--green-secondary);
    font-size: 1rem;
    line-height: 1.8;
}

/* Camera Settings */
.camera-setting label {
    text-align: right;
    font-weight: 700;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--grey-dark);
}

/* ============ PAGE VISIBILITY ============ */
.page {
    animation: pageFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pageFadeIn {
    from {
        opacity: 0;
        /* transform évité - le bouton settings (position: fixed) est à l'intérieur */
    }
    to {
        opacity: 1;
    }
}

/* Animation alternative pour le contenu de la page */
.page > *:not(.settings-button) {
    animation: contentSlideUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

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

.competition-mode {
    display: none;
}

.scheduler-mode {
    display: none;
}

/* ============ BADGE ENHANCEMENTS ============ */
.badge {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--radius-full);
}

.text-bg-danger {
    background: linear-gradient(135deg, var(--red-danger), #dc143c) !important;
    box-shadow: 0 0 15px rgba(255, 53, 71, 0.5);
}

.text-bg-success {
    background: linear-gradient(135deg, var(--green-primary), var(--green-secondary)) !important;
    box-shadow: 0 0 15px var(--green-glow);
}

/* ============ RESPONSIVE ADJUSTMENTS ============ */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }

    .navbar-brand {
        font-size: 1.2rem;
    }

    #GreenScore, #BlueScore {
        font-size: 2.5rem;
    }

    .TimerMinutes {
        font-size: 2rem;
    }

    .card {
        margin-bottom: var(--space-sm);
    }

    /* Disable animations on mobile for performance */
    .card:hover {
        transform: none;
    }

    .btn:hover {
        transform: none;
    }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============ ICON ENHANCEMENTS ============ */
.bi {
    transition: transform var(--transition-fast);
}

.btn:hover .bi,
.btn:focus .bi {
    /* Scale removed for instant interactions */
}

/* ============ SCROLLBAR STYLING ============ */
/* FIX BUG #10: Ajout du support Firefox */

/* Pour Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--blue-primary) #f1f1f1;
}

/* Pour Chrome/Safari/Edge */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--blue-primary), var(--green-primary));
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, var(--green-primary), var(--blue-primary));
}

/* ============ TOOLTIP STYLING (if used) ============ */
.tooltip {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.875rem;
}

/* ============ ROUNDED BUTTONS ============ */
.rounded-circle {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all var(--transition-normal);
}

.rounded-circle:hover {
    transform: rotate(10deg);
}

/* ============ CALIBRATED INDICATOR ============ */
.calibrated {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
}

/* ============ FINISHING TOUCHES ============ */
::selection {
    background: var(--blue-glow);
    color: white;
}

/* Focus visible pour accessibility */
*:focus-visible {
    outline: 3px solid var(--blue-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ============ PERFORMANCE OPTIMIZATIONS ============ */
/* GPU Acceleration pour les éléments animés */
.btn,
.card,
.nav-link,
.navbar-brand img,
.camera-image {
    /* Hardware acceleration - Standard properties supported in Chrome 90+, Firefox 88+, Safari 14+ */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Pause expensive animations when tab is hidden */
@media (prefers-reduced-motion: no-preference) {
    html:not(:focus-within) .loader-robot,
    html:not(:focus-within) .emergency-button {
        animation-play-state: paused;
    }
}

/* ===============================================
   DARK MODE
   Ajouté pour accessibilité
   =============================================== */

/* ============================================
   DARK MODE - ENHANCED VERSION
   ============================================ */

/* Transition smooth pour le passage light/dark */
body,
.navbar,
.card,
.card-header,
.card-body,
.btn,
.form-control,
.form-select,
.modal-content,
.offcanvas,
.table,
.alert {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

body.dark-mode {
    /* Backgrounds - Dark avec meilleur contraste */
    --bg-dark: #0f0f1e;
    --bg-darker: #0a0a15;
    --bg-card: #1a1a2e;
    --bg-overlay: rgba(0, 0, 0, 0.95);

    /* Neutrals - Dark adjusted */
    --grey-bg: rgba(100, 100, 120, 0.3);
    --grey-light: #2d2d3a;
    --grey-medium: #8b92a0;
    --grey-dark: #f0f0f5;

    /* Override Bootstrap 5 CSS variables for dark mode */
    --bs-body-color: #e5e7eb;
    --bs-body-bg: #0a0a15;
    --bs-body-color-rgb: 229, 231, 235;
    --bs-body-bg-rgb: 10, 10, 21;

    --bs-emphasis-color: #f0f0f5;
    --bs-emphasis-color-rgb: 240, 240, 245;

    --bs-secondary-color: rgba(229, 231, 235, 0.75);
    --bs-secondary-color-rgb: 229, 231, 235;
    --bs-secondary-bg: rgba(30, 30, 50, 0.6);
    --bs-secondary-bg-rgb: 30, 30, 50;

    --bs-tertiary-color: rgba(229, 231, 235, 0.5);
    --bs-tertiary-color-rgb: 229, 231, 235;
    --bs-tertiary-bg: rgba(26, 26, 46, 0.5);
    --bs-tertiary-bg-rgb: 26, 26, 46;

    --bs-border-color: rgba(255, 255, 255, 0.15);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.075);

    --bs-link-color: #4fc3f7;
    --bs-link-hover-color: #81d4fa;

    background: var(--bg-darker) !important;
    background-color: var(--bg-darker) !important;
    color: #e5e7eb !important;
}

/* Force dark background on all pages */
body.dark-mode .page,
body.dark-mode .page-vision,
body.dark-mode .page-robots,
body.dark-mode .page-control,
body.dark-mode .page-referee,
body.dark-mode .page-competition,
body.dark-mode .page-scheduler {
    background: transparent !important;
    color: #e5e7eb !important;
}

/* Force dark on containers */
body.dark-mode .container,
body.dark-mode .container-fluid,
body.dark-mode .row,
body.dark-mode [class*="col-"] {
    background: transparent !important;
}

/* Teams container specifically for Control page */
body.dark-mode .teams,
body.dark-mode .robots,
body.dark-mode .referee {
    background: transparent !important;
}

/* Force all basic elements to have proper dark colors */
body.dark-mode div,
body.dark-mode span:not([class*="badge"]):not([class*="btn"]),
body.dark-mode p {
    color: inherit;
}

/* Ensure no white backgrounds leak through */
body.dark-mode div:not([class*="bg-"]):not([class*="card"]):not([class*="modal"]):not([class*="toast"]):not([class*="progress"]) {
    background-color: transparent;
}

/* Navbar - Dark Mode avec glow */
body.dark-mode .navbar {
    background: linear-gradient(135deg, rgba(15, 15, 25, 0.98) 0%, rgba(20, 20, 35, 0.98) 100%) !important;
    border-bottom: 2px solid rgba(0, 255, 136, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5),
                0 0 40px rgba(0, 255, 136, 0.1);
}

/* Navbar brand avec meilleur contraste */
body.dark-mode .navbar-brand {
    color: #fff !important;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

/* Navigation tabs */
body.dark-mode .nav-tab {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .nav-tab:hover {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .nav-link {
    color: #b0b8c8 !important;
}

body.dark-mode .nav-link:hover {
    color: #e5e7eb !important;
}

body.dark-mode .nav-link.active {
    background: rgba(0, 212, 255, 0.2) !important;
    color: #00d4ff !important;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
}

/* Cards - Dark Mode avec effet depth */
body.dark-mode .card {
    background: rgba(26, 26, 46, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e5e7eb;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.dark-mode .card:hover {
    background: rgba(30, 30, 50, 0.9);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5),
                0 0 30px rgba(0, 212, 255, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

body.dark-mode .card-header {
    background: linear-gradient(135deg, rgba(35, 35, 55, 0.95) 0%, rgba(25, 25, 45, 0.95) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    color: #f0f0f5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

body.dark-mode .card-body {
    color: #d1d5db;
}

/* Buttons - Dark Mode avec glow effects */
body.dark-mode .btn-primary {
    background: linear-gradient(135deg, rgba(0, 212, 255, 1), rgba(0, 136, 255, 1)) !important;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.4),
                0 0 20px rgba(0, 212, 255, 0.2);
}

body.dark-mode .btn-primary:hover {
    box-shadow: 0 6px 20px rgba(0, 212, 255, 0.6),
                0 0 30px rgba(0, 212, 255, 0.4);
    transform: translateY(-2px);
}

body.dark-mode .btn-success {
    background: linear-gradient(135deg, rgba(0, 255, 136, 1), rgba(0, 170, 85, 1)) !important;
    border: none;
    color: #0a0a15 !important;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(0, 255, 136, 0.4),
                0 0 20px rgba(0, 255, 136, 0.2);
}

body.dark-mode .btn-success:hover {
    box-shadow: 0 6px 20px rgba(0, 255, 136, 0.6),
                0 0 30px rgba(0, 255, 136, 0.4);
    transform: translateY(-2px);
    color: #0a0a15 !important;
}

body.dark-mode .btn-danger {
    background: linear-gradient(135deg, rgba(255, 53, 71, 1), rgba(200, 30, 50, 1)) !important;
    border: none;
    box-shadow: 0 4px 15px rgba(255, 53, 71, 0.4),
                0 0 20px rgba(255, 53, 71, 0.2);
}

body.dark-mode .btn-danger:hover {
    box-shadow: 0 6px 20px rgba(255, 53, 71, 0.6),
                0 0 30px rgba(255, 53, 71, 0.4);
    transform: translateY(-2px);
}

body.dark-mode .btn-warning {
    background: linear-gradient(135deg, rgba(255, 213, 0, 1), rgba(255, 170, 0, 1)) !important;
    color: #1a1a2e !important;
    font-weight: 700;
    border: none;
    box-shadow: 0 4px 15px rgba(255, 213, 0, 0.4),
                0 0 20px rgba(255, 213, 0, 0.2);
}

body.dark-mode .btn-warning:hover {
    box-shadow: 0 6px 20px rgba(255, 213, 0, 0.6),
                0 0 30px rgba(255, 213, 0, 0.4);
    transform: translateY(-2px);
}

body.dark-mode .btn-outline-dark,
body.dark-mode .btn-outline-light {
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #e5e7eb;
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .btn-outline-dark:hover,
body.dark-mode .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

body.dark-mode .btn-outline-warning {
    border: 2px solid rgba(255, 213, 0, 0.6) !important;
    color: #ffd54f !important;
    background: rgba(255, 213, 0, 0.05) !important;
}

body.dark-mode .btn-outline-warning:hover {
    background: rgba(255, 213, 0, 0.2) !important;
    border-color: rgba(255, 213, 0, 0.8) !important;
    color: #ffeb3b !important;
    box-shadow: 0 0 15px rgba(255, 213, 0, 0.3) !important;
}

body.dark-mode .btn-outline-secondary {
    border: 2px solid rgba(150, 150, 180, 0.5);
    color: #b0b0d0;
    background: rgba(150, 150, 180, 0.05);
}

body.dark-mode .btn-outline-secondary:hover {
    background: rgba(150, 150, 180, 0.2);
    border-color: rgba(150, 150, 180, 0.8);
    color: #d0d0e0;
    box-shadow: 0 0 15px rgba(150, 150, 180, 0.2);
}

body.dark-mode .btn-info {
    background: linear-gradient(135deg, rgba(0, 188, 212, 1), rgba(0, 150, 180, 1)) !important;
    border: none;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(0, 188, 212, 0.4);
}

body.dark-mode .btn-info:hover {
    box-shadow: 0 6px 20px rgba(0, 188, 212, 0.6);
    transform: translateY(-2px);
}

/* Team card backgrounds - Dark Mode */
body.dark-mode .bg-body-green {
    background: rgba(0, 255, 136, 0.08) !important;
    border-left-color: rgba(0, 255, 136, 0.6);
}

body.dark-mode .bg-body-blue {
    background: rgba(0, 136, 255, 0.08) !important;
    border-left-color: rgba(0, 136, 255, 0.6);
}

body.dark-mode .bg-body-grey {
    background: rgba(180, 180, 180, 0.08) !important;
}

body.dark-mode .bg-body-red {
    background: rgba(250, 53, 69, 0.15) !important;
}

/* Team text colors - Dark Mode */
body.dark-mode .text-success {
    color: #4ade80 !important;
}

body.dark-mode .text-light {
    color: #f0f0f5 !important;
}

/* Typography elements - Dark Mode */
body.dark-mode label {
    color: #d1d5db;
}

body.dark-mode small {
    color: #9ca3af;
}

body.dark-mode hr {
    border-color: rgba(255, 255, 255, 0.1);
    opacity: 0.3;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: #f0f0f5;
}

body.dark-mode strong,
body.dark-mode b {
    color: #f0f0f5;
}

body.dark-mode em,
body.dark-mode i:not([class*="bi-"]) {
    color: #d1d5db;
}

/* Select options - Dark Mode */
body.dark-mode select option {
    background: #1a1a2e;
    color: #e5e7eb;
}

/* FPS Counter - Dark Mode */
body.dark-mode .style_fps {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.3), rgba(168, 85, 247, 0.3));
    border: 2px solid rgba(255, 107, 53, 0.5);
    color: #ff9d6e;
    text-shadow: 0 0 8px rgba(255, 107, 53, 0.5);
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.3),
                inset 0 0 10px rgba(255, 107, 53, 0.1);
}

/* Tables - Dark Mode */
body.dark-mode .table {
    color: #e5e7eb;
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .table thead th {
    border-bottom-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03);
}

body.dark-mode .table-striped tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

/* Modals & Offcanvas - Dark Mode */
body.dark-mode .modal-content,
body.dark-mode .offcanvas {
    background: rgba(20, 20, 35, 1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e5e7eb;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8),
                0 0 40px rgba(0, 212, 255, 0.1);
}

body.dark-mode .modal-header,
body.dark-mode .offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    background: linear-gradient(135deg, rgba(30, 40, 55, 1), rgba(40, 50, 65, 1));
}

body.dark-mode .btn-close {
    filter: invert(1) brightness(1.5);
    opacity: 0.8;
}

body.dark-mode .btn-close:hover {
    opacity: 1;
}

/* Forms - Dark Mode */
body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: rgba(30, 30, 50, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #e5e7eb;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: rgba(30, 30, 50, 0.9);
    border-color: var(--blue-primary);
    color: #f0f0f5;
    box-shadow: 0 0 0 0.25rem rgba(0, 212, 255, 0.25),
                inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.dark-mode .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

body.dark-mode .form-check-input {
    background-color: rgba(30, 30, 50, 0.7);
    border-color: rgba(0, 212, 255, 0.6);
}

body.dark-mode .form-check-input:checked {
    background-color: var(--blue-primary);
    border-color: var(--blue-primary);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

body.dark-mode .form-check-label {
    color: #d1d5db;
}

body.dark-mode .form-switch .form-check-input:checked {
    background-color: var(--green-primary);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

/* Alerts - Dark Mode */
body.dark-mode .alert-warning {
    background-color: rgba(255, 193, 7, 0.15);
    border: 1px solid rgba(255, 193, 7, 0.4);
    color: #ffd54f;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.2);
}

body.dark-mode .alert-link {
    color: #ffeb3b;
    text-decoration: underline;
}

/* Links */
body.dark-mode a {
    color: #4fc3f7;
}

body.dark-mode a:hover {
    color: #81d4fa;
}

/* Badges */
body.dark-mode .badge {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .text-bg-danger {
    background-color: rgba(255, 53, 71, 0.9) !important;
    box-shadow: 0 0 15px rgba(255, 53, 71, 0.4);
}

/* Detection wrapper - Dark Mode */
body.dark-mode .detection-wrapper {
    background: rgba(26, 26, 46, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Robot penalty - Dark Mode */
body.dark-mode .robot-penalty {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Tchat - Dark Mode */
body.dark-mode #tchat {
    background: rgba(26, 26, 46, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Camera area - Background sombre */
body.dark-mode .camera-area-referee,
body.dark-mode .camera-area {
    background: #0a0a15 !important;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8);
}

/* Camera image - Pas de background blanc */
body.dark-mode .camera-image {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.2);
}

/* Canvas simulation */
body.dark-mode .sim_vim,
body.dark-mode canvas {
    background: transparent !important;
}

/* Back canvas */
body.dark-mode #back {
    background: #0a0a15 !important;
}

/* GameState - Force orange color in dark mode */
body.dark-mode .GameState {
    color: var(--orange-neon) !important;
    text-shadow: 0 0 10px var(--orange-glow) !important;
}

/* Emergency button */
body.dark-mode .emergency-button {
    filter: brightness(1.1);
}

/* Scrollbar - Dark Mode */
/* Firefox standard CSS */
body.dark-mode {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 100, 120, 0.6) rgba(10, 10, 15, 0.8);
}

/* Chrome/Safari/Edge - Webkit */
body.dark-mode ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: rgba(10, 10, 15, 0.8);
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: rgba(100, 100, 120, 0.6);
    border-radius: 6px;
    border: 2px solid rgba(10, 10, 15, 0.8);
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: rgba(120, 120, 140, 0.8);
}

/* Bootstrap utility classes - Dark Mode */
body.dark-mode .text-muted,
body.dark-mode .card-subtitle.text-muted,
body.dark-mode h6.text-muted,
body.dark-mode small.text-muted,
body.dark-mode span.text-muted {
    color: #9ca3af !important;
}

body.dark-mode .text-secondary {
    color: #a8b3cf !important;
}

body.dark-mode .text-dark {
    color: #e5e7eb !important;
}

body.dark-mode .bg-light {
    background-color: rgba(30, 30, 50, 0.6) !important;
}

body.dark-mode .bg-white {
    background-color: rgba(26, 26, 46, 0.8) !important;
}

/* Toast notifications - Dark Mode */
body.dark-mode .toast {
    background: rgba(26, 26, 46, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

body.dark-mode .toast-header {
    background: rgba(35, 35, 55, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    color: #f0f0f5;
}

body.dark-mode .toast-body {
    color: #d1d5db;
}

/* Progress bars - Dark Mode */
body.dark-mode .progress {
    background-color: rgba(30, 30, 50, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .progress-bar {
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

body.dark-mode .progress-bar.bg-success {
    background-color: var(--green-primary) !important;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.4);
}

/* Code blocks - Dark Mode */
body.dark-mode code {
    background: rgba(40, 40, 60, 0.8);
    color: #81d4fa;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(129, 212, 250, 0.2);
}

body.dark-mode pre {
    background: rgba(20, 20, 35, 0.9);
    color: #d1d5db;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode pre code {
    background: transparent;
    border: none;
    padding: 0;
}

/* ===============================================
   RESPONSIVE DESIGN - MULTI-RESOLUTION SUPPORT
   Compatible avec Chrome, Firefox, Edge
   =============================================== */

/* ============================================
   720p (HD) - 1280x720
   Écrans petits / Tablettes en paysage
   ============================================ */
@media only screen and (min-width: 1280px) and (max-width: 1365px),
       only screen and (min-height: 720px) and (max-height: 768px) {

    :root {
        --navbar-height: 70px;
    }

    body {
        font-size: 15px;
    }

    /* Navigation plus compacte */
    .navbar {
        padding: 0.4rem 1rem;
    }

    .navbar-brand {
        font-size: 1.3rem;
    }

    .nav-link {
        font-size: 0.95rem;
        padding: 0.4rem 0.8rem;
    }

    /* Cartes plus petites */
    .card {
        margin-bottom: 12px;
    }

    .card-header {
        padding: 10px 14px;
        font-size: 0.95rem;
    }

    .card-body {
        padding: 12px;
    }

    /* Scores */
    #GreenScore, #BlueScore {
        font-size: 3rem;
    }

    .TimerMinutes {
        font-size: 2.2rem;
    }

    /* Boutons */
    .btn {
        font-size: 0.9rem;
        padding: 8px 14px;
    }

    /* Robot penalty section */
    .robot-penalty img {
        height: 34px !important;
    }

    .robot-state h6 {
        font-size: 0.83rem;
    }

    /* Camera area */
    .camera-area,
    .camera-area-referee {
        max-height: 400px;
    }
}

/* ============================================
   1080p (Full HD) - 1920x1080
   Écrans standards modernes
   ============================================ */
@media only screen and (min-width: 1366px) and (max-width: 1920px),
       only screen and (min-height: 769px) and (max-height: 1080px) {

    :root {
        --navbar-height: 76px;
    }

    body {
        font-size: 16px;
    }

    /* Tailles par défaut optimisées pour 1080p */
    .card {
        margin-bottom: 16px;
    }

    /* Scores bien visibles */
    #GreenScore, #BlueScore {
        font-size: 3.5rem;
    }

    .TimerMinutes {
        font-size: 2.5rem;
    }

    /* Camera area optimisée */
    .camera-area,
    .camera-area-referee {
        max-height: 550px;
    }

    /* Referee History */
    .tchat-dim {
        height: calc(100vh - var(--navbar-height) - 445px);
    }
}

/* ============================================
   2K (QHD) - 2560x1440
   Écrans haute définition
   ============================================ */
@media only screen and (min-width: 1921px) and (max-width: 2560px),
       only screen and (min-height: 1081px) and (max-height: 1440px) {

    :root {
        --navbar-height: 80px;
    }

    body {
        font-size: 17px;
    }

    /* Augmentation proportionnelle */
    h1 { font-size: 2.8rem; }
    h2 { font-size: 2.3rem; }
    h3 { font-size: 2rem; }
    h4 { font-size: 1.7rem; }
    h5 { font-size: 1.4rem; }
    h6 { font-size: 1.1rem; }

    .navbar {
        padding: 0.7rem 2rem;
    }

    .navbar-brand {
        font-size: 1.8rem;
    }

    .nav-link {
        font-size: 1.1rem;
        padding: 0.6rem 1.2rem;
    }

    /* Cartes plus grandes */
    .card {
        margin-bottom: 20px;
    }

    .card-header {
        padding: 14px 18px;
        font-size: 1.1rem;
    }

    .card-body {
        padding: 18px;
    }

    /* Scores plus imposants */
    #GreenScore, #BlueScore {
        font-size: 4.5rem;
    }

    .TimerMinutes {
        font-size: 3.2rem;
    }

    /* Boutons plus grands */
    .btn {
        font-size: 1rem;
        padding: 10px 20px;
    }

    .btn-lg {
        font-size: 1.2rem;
        padding: 12px 24px;
    }

    /* Robot penalty section */
    .robot-penalty img {
        height: 44px !important;
    }

    .robot-state h6 {
        font-size: 1rem;
    }

    .robot-penalty .btn-sm {
        padding: 4px 10px;
        font-size: 0.86rem;
    }

    /* Camera area plus grande */
    .camera-area,
    .camera-area-referee {
        max-height: 700px;
    }

    /* Referee History plus grand */
    .tchat-dim {
        height: calc(100vh - var(--navbar-height) - 525px);
    }

    #RefereeHistory .toast {
        font-size: 0.95rem;
    }
}

/* ============================================
   4K (Ultra HD) - 3840x2160
   Écrans très haute définition
   ============================================ */
@media only screen and (min-width: 2561px),
       only screen and (min-height: 1441px) {

    :root {
        --navbar-height: 100px;
    }

    body {
        font-size: 20px;
    }

    /* Typographie augmentée */
    h1 { font-size: 3.5rem; }
    h2 { font-size: 3rem; }
    h3 { font-size: 2.5rem; }
    h4 { font-size: 2rem; }
    h5 { font-size: 1.7rem; }
    h6 { font-size: 1.4rem; }

    .navbar {
        padding: 1rem 3rem;
    }

    .navbar-brand {
        font-size: 2.5rem;
    }

    .nav-link {
        font-size: 1.4rem;
        padding: 0.8rem 1.6rem;
    }

    /* Cartes très grandes */
    .card {
        margin-bottom: 28px;
        border-radius: 20px;
    }

    .card-header {
        padding: 20px 28px;
        font-size: 1.5rem;
        border-radius: 20px 20px 0 0;
    }

    .card-body {
        padding: 28px;
    }

    /* Scores très imposants */
    #GreenScore, #BlueScore {
        font-size: 6rem;
    }

    .TimerMinutes {
        font-size: 4.5rem;
    }

    /* Boutons très grands */
    .btn {
        font-size: 1.3rem;
        padding: 14px 28px;
        border-radius: 12px;
    }

    .btn-lg {
        font-size: 1.6rem;
        padding: 18px 36px;
    }

    .btn-sm {
        font-size: 1.1rem;
        padding: 10px 18px;
    }

    /* Robot penalty section */
    .robot-penalty {
        padding: 16px;
        border-radius: 16px;
    }

    .robot-penalty img {
        height: 62px !important;
    }

    .robot-state h6 {
        font-size: 1.35rem;
    }

    .robot-penalty .btn-sm {
        padding: 8px 15px;
        font-size: 1.1rem;
    }

    .robot-penalty .progress {
        height: 14px;
    }

    /* Camera area très grande */
    .camera-area,
    .camera-area-referee {
        max-height: 1000px;
        border-radius: 20px;
    }

    /* Referee History */
    .tchat-dim {
        height: calc(100vh - var(--navbar-height) - 725px);
        border-radius: 16px;
    }

    #RefereeHistory .toast {
        font-size: 1.2rem;
        border-radius: 12px;
    }

    #RefereeHistory .toast-header {
        padding: 12px 18px;
    }

    #RefereeHistory .toast-body {
        padding: 14px 18px;
    }

    /* Forms plus grands */
    .form-control,
    .form-select {
        font-size: 1.2rem;
        padding: 12px 18px;
        border-radius: 12px;
    }

    /* Modal */
    .modal-content {
        border-radius: 20px;
    }

    .modal-header {
        padding: 24px 32px;
    }

    .modal-body {
        padding: 24px 32px;
    }
}

/* Vendor prefixes - Removed to prevent conflicts with existing backdrop-filter rules */

/* Scrollbar styling - Removed duplicate rules (already defined at lines 1330-1353 and 1952-1969) */

/* ============================================
   HIGH DPI / RETINA DISPLAYS
   ============================================ */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi),
       only screen and (min-resolution: 2dppx) {

    /* Images plus nettes sur écrans retina */
    img {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }

    /* Texte plus net */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
}

/* ============================================
   ORIENTATION SUPPORT
   ============================================ */
@media screen and (orientation: portrait) {
    /* Ajustements pour orientation portrait */
    .camera-area,
    .camera-area-referee {
        max-width: 100%;
        height: auto;
    }

    .robot-penalize-tab {
        flex-direction: column;
    }

    .robot-penalize-tab .col-6 {
        width: 100%;
        max-width: 100%;
    }
}

@media screen and (orientation: landscape) {
    /* Optimisations pour orientation paysage */
    .tchat-dim {
        min-height: 200px;
    }
}

/* ============================================
   TRANSLATION SYSTEM STYLES
   ============================================ */

/* Animation de transition pour le contenu traduit */
[data-i18n] {
    transition: opacity 0.3s ease-in-out;
}

/* Zone ARIA live pour annonces aux lecteurs d'écran */
#rsk-aria-live {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ============================================
   ANIMATIONS AVANCÉES - animations.js
   Animations professionnelles pour RSK
   ============================================ */

/* 1. RIPPLE EFFECT - Material Design */
.btn:not(.settings-button), button:not(.settings-button) {
    position: relative;
    overflow: hidden;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%);
    animation: rippleEffect 0.6s ease-out;
    pointer-events: none;
    z-index: 1;
}

@keyframes rippleEffect {
    from {
        width: 20px;
        height: 20px;
        opacity: 1;
    }
    to {
        width: 300px;
        height: 300px;
        opacity: 0;
    }
}

/* 2. SHAKE ANIMATION - Attention visuelle */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

.shake-animation {
    animation: shake 0.5s ease-in-out !important;
}

/* 3. CONFETTI - Notifications de score */
.confetti {
    position: fixed;
    top: -10px;
    width: 10px;
    height: 10px;
    z-index: 9999;
    border-radius: 2px;
    animation: confettiFall linear forwards;
    pointer-events: none;
}

@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* 4. TOAST SLIDE IN - Notifications */
@keyframes toastSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 5. CARD ENTRANCE - Animations d'entrée */
.card-entrance {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.card-entrance.card-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Override hover pour cartes visibles */
.card-visible:hover {
    transform: translateY(-8px) !important;
}

/* 6. FIELD DETECTION PULSE - Indicateur terrain */
@keyframes fieldPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(0, 255, 136, 0.6);
    }
}

.field-pulse {
    animation: fieldPulse 1s ease-in-out 2;
}

/* 7. BUTTON LOADING STATE - États de chargement */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: btnSpinner 0.6s linear infinite;
}

@keyframes btnSpinner {
    to { transform: rotate(360deg); }
}

/* 8. MODAL ANIMATIONS - Entrée/Sortie modales */
.modal.show .modal-dialog {
    animation: modalZoomIn 0.3s ease-out;
}

@keyframes modalZoomIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(-50px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 9. SKELETON LOADER - États de chargement */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-secondary) 25%,
        var(--bg-tertiary) 50%,
        var(--bg-secondary) 75%
    );
    background-size: 200% 100%;
    animation: skeletonLoading 1.5s ease-in-out infinite;
    border-radius: var(--border-radius);
}

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

/* 10. ROBOT STATUS INDICATOR - Pulse de connexion */
.robot-status-online::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--green-primary);
    animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

/* ============ REFEREE BUTTON ANIMATIONS ============ */

/* 11. BUTTON PULSE - Configuration buttons (Side, Standard, Dots) */
.side-place,
.strd-place,
.dots-place {
    transition: all 0.3s ease;
    will-change: box-shadow;
}

.side-place:hover:not(:disabled),
.strd-place:hover:not(:disabled),
.dots-place:hover:not(:disabled) {
    animation: buttonPulse 1.5s ease-in-out infinite;
}

@keyframes buttonPulse {
    0%, 100% {
        box-shadow: 0 0 0 rgba(0, 136, 255, 0);
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 136, 255, 0.5),
                    0 0 40px rgba(0, 136, 255, 0.3);
    }
}

/* 12. GREEN PULSE - Penalty button 5s */
.penalize {
    animation: greenPulse 2s ease-in-out infinite;
    will-change: box-shadow;
}

@keyframes greenPulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(0, 255, 136, 0.3),
                    0 0 20px rgba(0, 255, 136, 0.2);
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 255, 136, 0.6),
                    0 0 40px rgba(0, 255, 136, 0.4),
                    0 0 60px rgba(0, 255, 136, 0.2);
    }
}

/* 13. RED PULSE - Cancel penalty button */
.unpenalize {
    animation: redPulse 2s ease-in-out infinite;
    will-change: box-shadow;
}

@keyframes redPulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 53, 71, 0.3),
                    0 0 20px rgba(255, 53, 71, 0.2);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 53, 71, 0.6),
                    0 0 40px rgba(255, 53, 71, 0.4),
                    0 0 60px rgba(255, 53, 71, 0.2);
    }
}

/* ============ GLOBAL BUTTON ANIMATIONS ============ */

/* 14. BOUNCE GLOW - Success buttons (Green) */
.btn-success:hover:not(:disabled):not(.penalize) {
    animation: bounceGlow 0.6s ease-out;
}

@keyframes bounceGlow {
    0% {
        transform: translateY(0);
        box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
    }
    50% {
        transform: translateY(-5px);
        box-shadow: 0 0 30px rgba(0, 255, 136, 0.6),
                    0 0 50px rgba(0, 255, 136, 0.3);
    }
    100% {
        transform: translateY(0);
        box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
    }
}

/* 15. DANGER PULSE - Danger buttons (Red) continuous */
.btn-danger:not(.emergency-button .btn):not(.unpenalize) {
    animation: dangerPulse 2.5s ease-in-out infinite;
    will-change: box-shadow;
}

@keyframes dangerPulse {
    0%, 100% {
        box-shadow: 0 0 8px rgba(255, 53, 71, 0.2);
    }
    50% {
        box-shadow: 0 0 25px rgba(255, 53, 71, 0.5),
                    0 0 45px rgba(255, 53, 71, 0.3);
    }
}

/* 16. NAVIGATION GLOW - Nav tabs subtle glow */
.nav-link:hover {
    box-shadow: 0 0 15px rgba(0, 136, 255, 0.3);
    transition: box-shadow 0.3s ease;
}

.nav-link.active:hover {
    box-shadow: 0 0 20px rgba(0, 136, 255, 0.5);
}

/* 17. PRIMARY GLOW - Primary buttons (Blue) */
.btn-primary:hover:not(:disabled) {
    box-shadow: 0 4px 20px rgba(0, 136, 255, 0.4),
                0 0 30px rgba(0, 136, 255, 0.3);
    transition: box-shadow 0.3s ease;
}

/* 18. WARNING GLOW - Warning buttons (Orange/Yellow) */
.btn-warning:hover:not(:disabled),
.btn-outline-warning:hover:not(:disabled) {
    box-shadow: 0 4px 20px rgba(255, 213, 0, 0.4),
                0 0 30px rgba(255, 213, 0, 0.3) !important;
    transition: box-shadow 0.3s ease;
}

/* 19. SECONDARY GLOW - Secondary buttons (Grey) */
.btn-secondary:hover:not(:disabled):not(.strd-place) {
    box-shadow: 0 4px 20px rgba(108, 117, 125, 0.3),
                0 0 25px rgba(108, 117, 125, 0.2);
    transition: box-shadow 0.3s ease;
}

/* 20. CIRCULAR SCORE BUTTONS - Enhanced with team color glow */
.rounded-circle.bg-head-green:hover {
    box-shadow: 0 4px 16px rgba(0, 255, 136, 0.5),
                0 0 30px rgba(0, 255, 136, 0.3);
}

.rounded-circle.bg-head-blue:hover {
    box-shadow: 0 4px 16px rgba(0, 136, 255, 0.5),
                0 0 30px rgba(0, 136, 255, 0.3);
}

/* ACCESSIBILITY - Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .page,
    .page > *,
    .ripple,
    .shake-animation,
    .confetti,
    .card-entrance,
    .field-pulse,
    .btn-loading::after,
    .skeleton,
    .robot-status-online::before,
    .side-place,
    .strd-place,
    .dots-place,
    .penalize,
    .unpenalize,
    .btn-success,
    .btn-danger,
    .btn-primary,
    .btn-warning,
    .btn-secondary,
    .nav-link,
    .rounded-circle {
        animation: none !important;
        transition: none !important;
    }

    .card-entrance,
    .page > * {
        opacity: 1;
        transform: none;
    }
}