/* ============================================
           Timer Notification Styles
           Compte à rebours 10→1 : anneau PNG + chiffre (carte transparente).
           ============================================ */

        .timer-notification {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10000;
            background: rgba(10, 10, 10, 0.95);
            border: 4px solid #ffa500;
            border-radius: 20px;
            padding: 3rem 4rem;
            box-shadow:
                0 0 40px rgba(255, 165, 0, 0.8),
                0 0 80px rgba(255, 165, 0, 0.4);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.5s ease;
        }

        .timer-notification.show {
            opacity: 1;
        }

        /* Ancienne carte « pleine » : pulsation (hors compte épique transparent) */
        .timer-notification.show:not(.epic-countdown-active):not(.epic-countdown-final) {
            animation: pulse-notification 1s ease-in-out infinite;
        }

        @keyframes pulse-notification {
            0%, 100% {
                transform: translate(-50%, -50%) scale(1);
            }
            50% {
                transform: translate(-50%, -50%) scale(1.05);
            }
        }

        .timer-notification.critical {
            border-color: #ff0000;
            box-shadow:
                0 0 40px rgba(255, 0, 0, 0.8),
                0 0 80px rgba(255, 0, 0, 0.4);
        }

        /* Compte 10→1 uniquement : pas de carte (ring + chiffre sur le mur) */
        .timer-notification.epic-countdown-active:not(.epic-countdown-final) {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            border-radius: 0;
            padding: 0;
        }

        .timer-notification-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.5rem;
        }

        .timer-notification.epic-countdown-active:not(.epic-countdown-final) .timer-notification-content {
            gap: 0;
        }

        /* Compte épique 10→1 : chiffre au centre géométrique écran (~×3 taille, sans nudge anneau PNG) */
        .timer-notification.epic-countdown-active:not(.epic-countdown-final) .timer-countdown-shell {
            --timer-digit-nudge-x: 0;
            --timer-digit-nudge-y: 0;
        }
        .timer-notification.epic-countdown-active:not(.epic-countdown-final) .timer-countdown-number {
            font-size: clamp(16.5rem, 60vmin, 30rem);
        }

        .timer-countdown-shell {
            position: relative;
            /* Ajustement optique centre du chiffre vs PNG (trou de l’anneau) */
            --timer-digit-nudge-x: 0.55rem;
            --timer-digit-nudge-y: -0.5rem;
            /* ~+50 % vs précédent (78vmin/900px) : ring bien visible en projection */
            width: min(117vmin, 1350px);
            height: min(117vmin, 1350px);
            max-width: min(98vw, 1350px);
            max-height: min(117vmin, 1350px);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .timer-countdown-number {
            position: relative;
            z-index: 2;
            /* Taille par défaut (anneau PNG) ; compte épique surclasse avec ~×3 */
            font-size: clamp(5.5rem, 20vmin, 10rem);
            font-weight: 800;
            /* Même pile que body (style.css) */
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            font-variant-numeric: tabular-nums;
            color: #ffffff;
            line-height: 1;
            letter-spacing: 0.06em;
            text-shadow:
                0 0 8px rgba(255, 255, 255, 1),
                0 0 24px rgba(255, 255, 255, 0.95),
                0 0 48px rgba(255, 200, 100, 0.9),
                0 0 80px rgba(255, 140, 40, 0.75),
                0 0 120px rgba(255, 90, 0, 0.45),
                0 4px 32px rgba(0, 0, 0, 0.9);
            filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 40px rgba(255, 160, 60, 0.5));
            transform: translate(var(--timer-digit-nudge-x, 0.55rem), var(--timer-digit-nudge-y, -0.5rem));
        }

        /* Une animation par tick (classe posée par wall.js) : pop-in → hold → shrink + fade */
        .timer-countdown-number.countdown-digit-tick {
            animation: countdown-digit-tick 0.88s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
            will-change: transform, opacity, filter;
        }

        @keyframes countdown-digit-tick {
            0% {
                opacity: 0;
                transform: translate(var(--timer-digit-nudge-x, 0.55rem), var(--timer-digit-nudge-y, -0.5rem)) scale(0.68);
                text-shadow:
                    0 0 8px rgba(255, 255, 255, 1),
                    0 0 24px rgba(255, 255, 255, 0.95),
                    0 0 48px rgba(255, 200, 100, 0.9),
                    0 0 80px rgba(255, 140, 40, 0.75),
                    0 0 120px rgba(255, 90, 0, 0.45),
                    0 4px 32px rgba(0, 0, 0, 0.9);
                filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 40px rgba(255, 160, 60, 0.5));
            }
            /* Pic : plus grand + glow maximal */
            11% {
                opacity: 1;
                transform: translate(var(--timer-digit-nudge-x, 0.55rem), var(--timer-digit-nudge-y, -0.5rem)) scale(1.24);
                text-shadow:
                    0 0 16px rgba(255, 255, 255, 1),
                    0 0 40px rgba(255, 255, 255, 1),
                    0 0 80px rgba(255, 230, 160, 1),
                    0 0 130px rgba(255, 140, 40, 1),
                    0 0 200px rgba(255, 80, 0, 0.85),
                    0 0 280px rgba(255, 40, 0, 0.45),
                    0 4px 36px rgba(0, 0, 0, 0.92);
                filter: drop-shadow(0 0 36px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 72px rgba(255, 200, 120, 0.95)) drop-shadow(0 0 120px rgba(255, 120, 0, 0.75));
            }
            19% {
                opacity: 1;
                transform: translate(var(--timer-digit-nudge-x, 0.55rem), var(--timer-digit-nudge-y, -0.5rem)) scale(1);
                text-shadow:
                    0 0 8px rgba(255, 255, 255, 1),
                    0 0 24px rgba(255, 255, 255, 0.95),
                    0 0 48px rgba(255, 200, 100, 0.9),
                    0 0 80px rgba(255, 140, 40, 0.75),
                    0 0 120px rgba(255, 90, 0, 0.45),
                    0 4px 32px rgba(0, 0, 0, 0.9);
                filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 40px rgba(255, 160, 60, 0.5));
            }
            /* micro hold lisible */
            52% {
                opacity: 1;
                transform: translate(var(--timer-digit-nudge-x, 0.55rem), var(--timer-digit-nudge-y, -0.5rem)) scale(1);
                text-shadow:
                    0 0 8px rgba(255, 255, 255, 1),
                    0 0 24px rgba(255, 255, 255, 0.95),
                    0 0 48px rgba(255, 200, 100, 0.9),
                    0 0 80px rgba(255, 140, 40, 0.75),
                    0 0 120px rgba(255, 90, 0, 0.45),
                    0 4px 32px rgba(0, 0, 0, 0.9);
                filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 40px rgba(255, 160, 60, 0.5));
            }
            100% {
                opacity: 0;
                transform: translate(var(--timer-digit-nudge-x, 0.55rem), var(--timer-digit-nudge-y, -0.5rem)) scale(0.88);
                text-shadow:
                    0 0 8px rgba(255, 255, 255, 1),
                    0 0 24px rgba(255, 255, 255, 0.95),
                    0 0 48px rgba(255, 200, 100, 0.9),
                    0 0 80px rgba(255, 140, 40, 0.75),
                    0 0 120px rgba(255, 90, 0, 0.45),
                    0 4px 32px rgba(0, 0, 0, 0.9);
                filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 40px rgba(255, 160, 60, 0.5));
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .timer-countdown-number.countdown-digit-tick {
                animation: none;
                opacity: 1;
                transform: translate(var(--timer-digit-nudge-x, 0.55rem), var(--timer-digit-nudge-y, -0.5rem));
            }
        }

        .timer-icon {
            font-size: 6rem;
            text-align: center;
            animation: wall-icon-bounce 1s ease-in-out infinite;
        }

        @keyframes wall-icon-bounce {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }

        .timer-message {
            font-size: 3rem;
            font-weight: 900;
            text-align: center;
            color: #ffffff;
            text-transform: uppercase;
            letter-spacing: 2px;
            text-shadow:
                0 0 20px rgba(255, 255, 255, 0.5),
                0 0 40px rgba(255, 165, 0, 0.3);
        }

        .timer-notification.epic-countdown-active:not(.epic-countdown-final) .timer-icon {
            display: none;
        }

        .timer-notification.epic-countdown-active:not(.epic-countdown-final) .timer-message {
            display: none;
        }

        /* Responsive timer notification */
        @media (max-width: 768px) {
            .timer-notification:not(.epic-countdown-active):not(.epic-countdown-final) {
                padding: 2rem 3rem;
                border-width: 3px;
            }

            .timer-countdown-shell {
                width: min(95vmin, 1080px);
                height: min(95vmin, 1080px);
                max-width: min(98vw, 1080px);
                max-height: min(95vmin, 1080px);
            }

            .timer-countdown-number {
                font-size: clamp(5rem, 18vmin, 8.5rem);
            }

            .timer-notification.epic-countdown-active:not(.epic-countdown-final) .timer-countdown-number {
                font-size: clamp(15rem, 54vmin, 25.5rem);
            }

            .timer-icon {
                font-size: 4rem;
            }

            .timer-message {
                font-size: 2rem;
            }
        }

        @media (max-width: 480px) {
            .timer-notification:not(.epic-countdown-active):not(.epic-countdown-final) {
                padding: 1.5rem 2rem;
                border-width: 2px;
            }

            .timer-countdown-shell {
                width: min(92vmin, 840px);
                height: min(92vmin, 840px);
                max-width: min(98vw, 840px);
                max-height: min(92vmin, 840px);
            }

            .timer-countdown-number {
                font-size: clamp(4rem, 16vmin, 7rem);
            }

            .timer-notification.epic-countdown-active:not(.epic-countdown-final) .timer-countdown-number {
                font-size: clamp(12rem, 48vmin, 21rem);
            }

            .timer-icon {
                font-size: 3rem;
            }

            .timer-message {
                font-size: 1.5rem;
            }
        }