body.landing-cursor {
        cursor: none;
      }
      .custom-cursor-follower {
          position: fixed;
          top: 0;
          left: 0;
          width: 32px;
          height: 32px;
          border: 2px solid #60a5fa; /* light blue */
          border-radius: 50%;
          transform: translate(-50%, -50%);
          pointer-events: none;
          z-index: 99999;
          transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
      }
      .dark .custom-cursor-follower {
          border-color: #3b82f6; /* darker blue */
      }
      .custom-cursor-follower.grow {
          width: 50px;
          height: 50px;
          background-color: rgba(96, 165, 250, 0.2);
      }
      
      body.landing-cursor .custom-cursor-follower {
          width: 40px;
          height: 40px;
          background-color: transparent;
          border: 3px solid #3b82f6; /* blue-500 */
          box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.3), 
                      0 0 0 12px rgba(59, 130, 246, 0.15);
      }
      .dark body.landing-cursor .custom-cursor-follower {
          border-color: #60a5fa; /* light blue for better contrast */
          box-shadow: 0 0 0 6px rgba(96, 165, 250, 0.3), 
                      0 0 0 12px rgba(96, 165, 250, 0.15);
      }
      body.landing-cursor .custom-cursor-follower.grow {
          width: 60px;
          height: 60px;
          background-color: rgba(59, 130, 246, 0.1);
          border-width: 2px;
          box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
      }
      
      @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }
      .animate-spin {
        animation: spin 1s linear infinite;
      }

      /* Police chiffres agenda — tabular-nums + sans-serif douce et pro (alignement vertical parfait) */
      .font-num {
        font-family: 'Inter', 'Segoe UI', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
        font-feature-settings: "tnum" 1, "cv01" 1, "cv02" 1, "cv11" 1;
        font-variant-numeric: tabular-nums lining-nums;
        letter-spacing: 0.01em;
        font-weight: 500;
      }
      .font-num-lg {
        font-family: 'Inter', 'Segoe UI', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
        font-feature-settings: "tnum" 1, "cv01" 1, "cv02" 1, "cv11" 1, "ss01" 1;
        font-variant-numeric: tabular-nums lining-nums;
        letter-spacing: -0.01em;
        font-weight: 600;
      }
      
      /* Animations for filtering */
      @keyframes filter-fade-out {
        from { opacity: 1; transform: scale(1); }
        to { opacity: 0; transform: scale(0.95); }
      }
      @keyframes filter-fade-in {
        from { opacity: 0; transform: scale(0.95); }
        to { opacity: 1; transform: scale(1); }
      }
      .filter-item-out {
        animation: filter-fade-out 0.3s ease-out forwards;
      }
      .filter-item-in {
        animation: filter-fade-in 0.3s ease-out forwards;
      }

      /* Styles for View Transitions API */
      @view-transition {
        navigation: auto;
      }
      
      ::view-transition-group(article-transition) {
        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      }
      
      ::view-transition-old(article-transition),
      ::view-transition-new(article-transition) {
        animation-duration: 0.35s;
        height: 100%;
      }

      /* Styles for drag and drop */
      .dragging-active {
        opacity: 0.5;
        background: #e0f2fe !important; /* light blue */
        transform: rotate(3deg) scale(1.05);
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        border: 1px dashed #0ea5e9;
        cursor: grabbing;
      }
      .dark .dragging-active {
          background: #0c4a6e !important;
          border-color: #38bdf8;
      }

      .drop-indicator {
        height: 0px;
        margin: 0;
        width: 100%;
        background-color: #3b82f6;
        transition: height 0.1s ease-out, margin 0.1s ease-out, opacity 0.1s ease-out;
        position: relative;
        opacity: 0;
      }
      .drop-indicator.visible {
        height: 2px;
        margin: 8px 0;
        opacity: 1;
      }
      .drop-indicator.visible::before {
        content: '';
        position: absolute;
        top: 50%;
        left: -4px;
        transform: translateY(-50%);
        width: 10px;
        height: 10px;
        background-color: #3b82f6;
        border-radius: 50%;
      }

      /* General fade-in-up animation */
      @keyframes fade-in-up {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .animate-fade-in-up {
        animation: fade-in-up 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
      }

      /* Scroll-triggered animations */
      .scroll-anim {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
      }
      .scroll-anim.is-visible {
        opacity: 1;
        transform: translateY(0);
      }

      /* Aurora background animation */
      @keyframes aurora {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
      }

      /* XP Gain Animation */
      @keyframes float-up-fade {
        0% {
          opacity: 0;
          transform: translateY(0) scale(0.8);
        }
        10% {
          opacity: 1;
          transform: translateY(-10px) scale(1);
        }
        90% {
          opacity: 1;
          transform: translateY(-100px) scale(1);
        }
        100% {
          opacity: 0;
          transform: translateY(-120px) scale(0.8);
        }
      }

      /* Confetti Animation */
      @keyframes confetti-fall {
        0% {
          transform: translateY(-20px) rotate(0deg);
          opacity: 1;
        }
        100% {
          transform: translateY(100vh) rotate(720deg);
          opacity: 0;
        }
      }

      /* Avatar Frame Animations */
      @keyframes pulse-gold {
        0%, 100% {
          filter: brightness(1) drop-shadow(0 0 8px rgba(234, 179, 8, 0.6));
        }
        50% {
          filter: brightness(1.2) drop-shadow(0 0 16px rgba(234, 179, 8, 0.9));
        }
      }

      @keyframes pulse-platinum {
        0%, 100% {
          filter: brightness(1) drop-shadow(0 0 8px rgba(148, 163, 184, 0.6));
        }
        50% {
          filter: brightness(1.15) drop-shadow(0 0 14px rgba(148, 163, 184, 0.8));
        }
      }

      @keyframes pulse-diamond {
        0%, 100% {
          filter: brightness(1) drop-shadow(0 0 10px rgba(96, 165, 250, 0.6));
        }
        50% {
          filter: brightness(1.25) drop-shadow(0 0 18px rgba(96, 165, 250, 1));
        }
      }

      @keyframes rainbow-rotate {
        0% {
          filter: hue-rotate(0deg) brightness(1.1);
        }
        100% {
          filter: hue-rotate(360deg) brightness(1.1);
        }
      }

      @keyframes pulse-elite {
        0%, 100% {
          filter: brightness(1) drop-shadow(0 0 12px rgba(239, 68, 68, 0.7));
        }
        50% {
          filter: brightness(1.3) drop-shadow(0 0 20px rgba(239, 68, 68, 1));
        }
      }

      @keyframes legendary-glow {
        0% {
          filter: brightness(1.1) drop-shadow(0 0 15px rgba(168, 85, 247, 0.8)) drop-shadow(0 0 25px rgba(234, 179, 8, 0.5));
        }
        50% {
          filter: brightness(1.4) drop-shadow(0 0 25px rgba(168, 85, 247, 1)) drop-shadow(0 0 35px rgba(234, 179, 8, 0.8));
        }
        100% {
          filter: brightness(1.1) drop-shadow(0 0 15px rgba(168, 85, 247, 0.8)) drop-shadow(0 0 25px rgba(234, 179, 8, 0.5));
        }
      }

      .pulse-gold {
        animation: pulse-gold 2s ease-in-out infinite;
      }

      .pulse-platinum {
        animation: pulse-platinum 2.5s ease-in-out infinite;
      }

      .pulse-diamond {
        animation: pulse-diamond 2s ease-in-out infinite;
      }

      .rainbow-rotate {
        animation: rainbow-rotate 4s linear infinite;
      }

      .pulse-elite {
        animation: pulse-elite 1.5s ease-in-out infinite;
      }

      .legendary-glow {
        animation: legendary-glow 2s ease-in-out infinite;
      }

      /* NEW FRAME ANIMATIONS */
      @keyframes pulse-emerald {
        0%, 100% {
          filter: brightness(1) drop-shadow(0 0 10px rgba(16, 185, 129, 0.6));
        }
        50% {
          filter: brightness(1.2) drop-shadow(0 0 18px rgba(16, 185, 129, 0.9));
        }
      }

      @keyframes pulse-solar {
        0%, 100% {
          filter: brightness(1.1) drop-shadow(0 0 12px rgba(251, 191, 36, 0.7));
        }
        50% {
          filter: brightness(1.35) drop-shadow(0 0 22px rgba(251, 146, 60, 1));
        }
      }

      @keyframes pulse-flame {
        0%, 100% {
          filter: brightness(1.1) drop-shadow(0 0 10px rgba(249, 115, 22, 0.7));
        }
        33% {
          filter: brightness(1.25) drop-shadow(0 0 18px rgba(239, 68, 68, 0.9));
        }
        66% {
          filter: brightness(1.15) drop-shadow(0 0 14px rgba(220, 38, 38, 0.8));
        }
      }

      @keyframes nebula-glow {
        0% {
          filter: brightness(1.1) drop-shadow(0 0 12px rgba(139, 92, 246, 0.7)) drop-shadow(0 0 20px rgba(59, 130, 246, 0.4));
        }
        33% {
          filter: brightness(1.25) drop-shadow(0 0 18px rgba(236, 72, 153, 0.8)) drop-shadow(0 0 28px rgba(139, 92, 246, 0.5));
        }
        66% {
          filter: brightness(1.2) drop-shadow(0 0 15px rgba(59, 130, 246, 0.8)) drop-shadow(0 0 24px rgba(236, 72, 153, 0.4));
        }
        100% {
          filter: brightness(1.1) drop-shadow(0 0 12px rgba(139, 92, 246, 0.7)) drop-shadow(0 0 20px rgba(59, 130, 246, 0.4));
        }
      }

      @keyframes crystal-shimmer {
        0%, 100% {
          filter: brightness(1.1) drop-shadow(0 0 10px rgba(224, 231, 255, 0.8)) drop-shadow(0 0 20px rgba(199, 210, 254, 0.4));
        }
        50% {
          filter: brightness(1.4) drop-shadow(0 0 18px rgba(165, 180, 252, 1)) drop-shadow(0 0 30px rgba(224, 231, 255, 0.7));
        }
      }

      @keyframes pulse-nature {
        0%, 100% {
          filter: brightness(1) drop-shadow(0 0 10px rgba(34, 197, 94, 0.6));
        }
        50% {
          filter: brightness(1.2) drop-shadow(0 0 18px rgba(74, 222, 128, 0.9));
        }
      }

      .pulse-emerald {
        animation: pulse-emerald 2.2s ease-in-out infinite;
      }

      .pulse-solar {
        animation: pulse-solar 1.8s ease-in-out infinite;
      }

      .pulse-flame {
        animation: pulse-flame 1.2s ease-in-out infinite;
      }

      .nebula-glow {
        animation: nebula-glow 3s ease-in-out infinite;
      }

      .crystal-shimmer {
        animation: crystal-shimmer 2.5s ease-in-out infinite;
      }

      .pulse-nature {
        animation: pulse-nature 2.3s ease-in-out infinite;
      }

      /* Enhanced scroll animations for new landing page */
      .scroll-anim-fade {
        opacity: 0;
        transition: opacity 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000);
      }
      .scroll-anim-fade.is-visible {
        opacity: 1;
      }

      .scroll-anim-up {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000), transform 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000);
      }
      .scroll-anim-up.is-visible {
        opacity: 1;
        transform: translateY(0);
      }
      
      /* Glowing border for bento grid */
      .glow-border {
        position: relative;
      }
      .glow-border::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 1.5rem; /* match parent's border-radius */
        padding: 2px; /* border thickness */
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.5), rgba(168, 85, 247, 0.5));
        -webkit-mask: 
          linear-gradient(#fff 0 0) content-box, 
          linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        pointer-events: none;
      }
      .glow-border:hover::before {
        opacity: 1;
      }

      /* Hero mock-up animation */
      @keyframes float {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-15px); }
        100% { transform: translateY(0px); }
      }
      .animate-float {
        animation: float 6s ease-in-out infinite;
      }

      /* Animated text gradient */
      @keyframes text-gradient {
          to {
              background-position: 200% center;
          }
      }
      .animate-text-gradient {
          background-size: 200% auto;
          background-clip: text;
          -webkit-background-clip: text;
          color: transparent;
          animation: text-gradient 5s linear infinite;
      }

      /* New scroll-animated timeline styles */
      .scroll-anim-path {
          /* stroke-dasharray and stroke-dashoffset are controlled by JS */
      }
      .step-scroll-item {
          opacity: 0;
          /* opacity and transform are controlled by JS for smooth scroll-based animation */
          transition: opacity 0.3s ease-out, transform 0.3s ease-out;
      }

      /* New cursor glow effect */
      .cursor-glow-effect {
        position: relative;
        overflow: hidden;
      }
      .cursor-glow-effect::before {
        content: "";
        position: absolute;
        left: var(--mouse-x, 50%);
        top: var(--mouse-y, 50%);
        width: 400px; /* size of the glow */
        height: 400px;
        background: radial-gradient(circle at center, rgba(147, 197, 253, 0.2) 0, transparent 50%); /* light blue glow */
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        pointer-events: none;
      }
      .dark .cursor-glow-effect::before {
          background: radial-gradient(circle at center, rgba(96, 165, 250, 0.15) 0, transparent 60%);
      }
      .cursor-glow-effect:hover::before {
        opacity: 1;
      }

      /* 3D Tilt container */
      .tilt-container {
        perspective: 1000px;
      }
      .tilt-element {
        transform-style: preserve-3d;
        transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
      }

      /* Feature Carousel */
      @keyframes icon-bounce {
        0%, 100% { transform: scale(1.2) translateY(0); }
        50% { transform: scale(1.2) translateY(-8px); }
      }

      .feature-carousel-container {
          height: 350px;
          position: relative;
          perspective: 2000px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: grab;
      }
      .feature-carousel-container:active {
          cursor: grabbing;
      }
      .feature-carousel {
          width: 220px;
          height: 220px;
          position: relative;
          transform-style: preserve-3d;
      }
      .carousel-item {
          position: absolute;
          width: 220px;
          height: 220px;
          top: 0;
          left: 0;
          background: rgba(255, 255, 255, 0.6);
          backdrop-filter: blur(12px);
          border-radius: 2rem;
          border: 1px solid rgba(255, 255, 255, 0.3);
          box-shadow: 0 10px 30px rgba(0,0,0,0.1);
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 1rem;
          padding: 1.5rem;
          transition: transform 0.5s ease, box-shadow 0.5s ease;
          user-select: none;
          --glow-color: rgba(59, 130, 246, 0.5); 
      }
      .dark .carousel-item {
          background: rgba(45, 55, 72, 0.6); /* slate-800 with opacity */
          border: 1px solid rgba(71, 85, 105, 0.5); /* slate-700 with opacity */
      }
      .carousel-item:hover {
          transform: var(--transform-hover) scale(1.15) translateZ(40px);
          box-shadow: 0 0 15px var(--glow-color), 0 0 30px var(--glow-color), 0 25px 50px rgba(0,0,0,0.25);
          z-index: 10;
      }
      .carousel-item-title {
          font-weight: bold;
          font-size: 1.125rem;
          text-align: center;
          color: #1e293b; /* slate-800 */
          opacity: 1;
          transition: transform 0.3s ease, color 0.3s ease;
          transform: translateY(0px);
          text-shadow: 0 1px 2px rgba(255,255,255,0.5);
      }
      .dark .carousel-item-title {
          color: #f1f5f9; /* slate-100 */
          text-shadow: 0 1px 2px rgba(0,0,0,0.5);
      }
      .carousel-item .carousel-icon {
        transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        height: 4rem;
        width: 4rem;
      }
      .carousel-item:hover .carousel-icon {
          animation: icon-bounce 0.6s ease-in-out;
      }
       .carousel-item:hover .carousel-item-title {
          transform: translateY(5px);
          color: var(--icon-color);
      }
      
      .carousel-tooltip {
          position: absolute;
          bottom: calc(100% + 10px);
          left: 50%;
          transform: translateX(-50%) translateY(10px) scale(0.95);
          background: #fff;
          color: #334152;
          padding: 0.75rem 1rem;
          border-radius: 0.75rem;
          font-size: 0.875rem;
          line-height: 1.4;
          width: 220px;
          text-align: center;
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.3s ease, transform 0.3s ease;
          box-shadow: 0 10px 20px rgba(0,0,0,0.15);
          z-index: 20;
          border: 1px solid rgba(0,0,0,0.05);
      }
      .dark .carousel-tooltip {
          background: #374151; /* gray-700 */
          color: #f3f4f6; /* gray-100 */
          border-color: rgba(255,255,255,0.1);
      }
      .carousel-tooltip::after {
          content: '';
          position: absolute;
          top: 100%;
          left: 50%;
          transform: translateX(-50%);
          border-width: 6px;
          border-style: solid;
          border-color: #fff transparent transparent transparent;
      }
      .dark .carousel-tooltip::after {
          border-color: #374151 transparent transparent transparent;
      }
      .carousel-item:hover .carousel-tooltip {
          opacity: 1;
          transform: translateX(-50%) translateY(0) scale(1);
      }


      /* Spotlight effect */
      #spotlight-effect {
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(147, 197, 253, 0.15), transparent 30%);
      }
      .dark #spotlight-effect {
        background-image: radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(59, 130, 246, 0.1), transparent 40%);
      }

      /* Guided Tour Styles */
      @keyframes tour-popover-in {
        from { opacity: 0; transform: translateY(10px) scale(0.95); }
        to { opacity: 1; transform: translateY(0) scale(1); }
      }
      .guided-tour-highlight {
        position: fixed;
        border-radius: 0.75rem;
        box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
        z-index: 9990;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
      }
      .guided-tour-popover {
        position: fixed;
        z-index: 9991;
        animation: tour-popover-in 0.3s ease-out forwards;
      }

      /* Vocal Bilan 3D Sphere & Flame Animations */
      @keyframes float-3d {
        0% { transform: translateY(0px) translateZ(0px); }
        50% { transform: translateY(-15px) translateZ(10px); }
        100% { transform: translateY(0px) translateZ(0px); }
      }
      .animate-float-3d {
        animation: float-3d 6s infinite ease-in-out;
      }

      .listening-flame-wave::before,
      .listening-flame-wave::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        pointer-events: none;
      }
      
      .listening-flame-wave::before {
        box-shadow: inset 0 0 40px 10px #f97316, 0 0 50px 15px rgba(249, 115, 22, 0.6);
        animation: flame-pulse-1 2s infinite ease-in-out;
      }
      .listening-flame-wave::after {
        box-shadow: inset 0 0 20px 5px #f59e0b;
        animation: flame-pulse-2 2s infinite ease-in-out;
        animation-delay: -1s; /* offset animation */
      }

      @keyframes flame-pulse-1 {
        0%, 100% { transform: scale(1); opacity: 0.8; }
        50% { transform: scale(1.1); opacity: 0.5; }
      }
      @keyframes flame-pulse-2 {
        0%, 100% { transform: scale(1); opacity: 0.5; border-radius: 45% 55% 60% 40% / 50% 50% 50% 50%; }
        50% { transform: scale(1.05); opacity: 0.2; border-radius: 60% 40% 50% 50% / 45% 55% 45% 55%; }
      }
      
      /* Bilan Builder Redesign */
      .builder-editor-panel {
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
        transform: translateX(100%);
        box-shadow: none;
      }
      .builder-editor-panel.open {
        transform: translateX(0);
        box-shadow: -15px 0 40px rgba(0,0,0,0.15);
      }
      .dark .builder-editor-panel.open {
        box-shadow: -15px 0 40px rgba(0,0,0,0.4);
      }
      .builder-section-header-input:focus {
        background-color: #f3f4f6;
        box-shadow: 0 0 0 2px #3b82f6;
      }
      .dark .builder-section-header-input:focus {
        background-color: #374151;
        box-shadow: 0 0 0 2px #3b82f6;
      }
      .builder-block:hover .builder-block-actions {
        opacity: 1;
      }
      .drag-over-section {
        border-color: #3b82f6;
        box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
      }

      /* Shimmer animation for daily missions card */
      @keyframes shimmer {
        0% { background-position: -100% 0; }
        100% { background-position: 100% 0; }
      }
      .animate-shimmer::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(
          110deg,
          transparent 20%,
          rgba(255, 255, 255, 0.2) 40%,
          rgba(255, 255, 255, 0.2) 60%,
          transparent 80%
        );
        background-size: 200% 100%;
        animation: shimmer 3s linear infinite;
      }

      .dark .animate-shimmer::after {
        background: linear-gradient(
          110deg,
          transparent 20%,
          rgba(255, 255, 255, 0.05) 40%,
          rgba(255, 255, 255, 0.05) 60%,
          transparent 80%
        );
        background-size: 200% 100%;
        animation: shimmer 3s linear infinite;
      }

      /* Card pulse animation */
      @keyframes card-pulse {
        0%, 100% { transform: scale(1); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
        50% { transform: scale(1.02); box-shadow: 0 20px 25px -5px rgba(99, 102, 241, 0.2), 0 10px 10px -5px rgba(99, 102, 241, 0.1); }
      }
      .animate-card-pulse {
        animation: card-pulse 4s ease-in-out infinite;
      }
      .dark .animate-card-pulse {
         animation-name: card-pulse-dark;
      }
       @keyframes card-pulse-dark {
        0%, 100% { transform: scale(1); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
        50% { transform: scale(1.02); box-shadow: 0 20px 25px -5px rgba(129, 140, 248, 0.25), 0 10px 10px -5px rgba(129, 140, 248, 0.15); }
      }
      
      /* Gamification Animations */
      @keyframes confetti-fall {
        0% { transform: translateY(-20px) rotateZ(0deg) rotateY(0deg); opacity: 1; }
        100% { transform: translateY(150px) rotateZ(360deg) rotateY(180deg); opacity: 0; }
      }
      .confetti-container {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        pointer-events: none; overflow: hidden; z-index: 10;
      }
      .confetti-piece {
        position: absolute;
        width: 8px; height: 16px; top: -20px; opacity: 0;
        animation: confetti-fall 2s ease-out forwards;
      }

      @keyframes firework-burst {
        0% { transform: scale(0.2); opacity: 1; }
        100% { transform: scale(1.5); opacity: 0; }
      }
      .fireworks-container {
        position: absolute; inset: 0; overflow: hidden; z-index: 1;
      }
      .firework {
        position: absolute;
        width: 8px; height: 8px;
        border-radius: 50%; opacity: 0;
        animation: firework-burst 1.2s ease-out forwards;
      }
      
      /* New League Map Styles */
      .league-map-modal {
        background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
      }

      .league-map-path {
          stroke-dasharray: 1000;
          stroke-dashoffset: 1000;
          animation: draw-path 3s ease-out forwards;
          filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
      }

      @keyframes draw-path {
          to {
              stroke-dashoffset: 0;
          }
      }

      .league-node {
          transition: transform 0.3s ease, filter 0.3s ease;
      }

      .league-node.locked {
          filter: grayscale(100%) brightness(0.7);
      }

      .league-node.current {
          animation: pulse-current-league 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
      }

      @keyframes pulse-current-league {
          0%, 100% { transform: scale(1); filter: drop-shadow(0 0 15px #fde047); }
          50% { transform: scale(1.15); filter: drop-shadow(0 0 25px #fde047); }
      }

      .league-node:not(.locked):hover {
          transform: scale(1.2);
          filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
      }

      .star {
          position: absolute;
          width: 2px;
          height: 2px;
          background: white;
          border-radius: 50%;
          animation: twinkle 5s infinite;
          box-shadow: 0 0 2px white;
      }

      @keyframes twinkle {
          0% { opacity: 0; transform: scale(0.5); }
          50% { opacity: 0.8; transform: scale(1); }
          100% { opacity: 0; transform: scale(0.5); }
      }
      
      .progress-card {
        background: rgba(255,255,255,0.05);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 1rem;
        padding: 1rem;
      }
      .progress-chart .bar {
        transform-origin: bottom;
        animation: grow-bar 0.8s ease-out forwards;
      }
      @keyframes grow-bar {
        from { transform: scaleY(0); }
        to { transform: scaleY(1); }
      }
      @keyframes grow-bar-x {
        from { transform: scaleX(0); }
        to { transform: scaleX(1); }
      }
      .animate-grow-bar-x {
        transform-origin: left;
        animation: grow-bar-x 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
      }
      .streak-day {
        border: 2px solid #4a5568;
      }
      .streak-day.completed {
        background: linear-gradient(135deg, #f97316, #fb923c);
        border-color: #fb923c;
        box-shadow: 0 0 10px #f97316;
      }
      .streak-day.today:not(.completed) {
        border-color: #fde047;
      }


      /* ToDoList slide in animation */
      @keyframes slide-in-from-right {
        from {
          opacity: 0;
          transform: translateX(100px);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }

      /* ───── Jarvis mascotte — animations CSS appliquées aux SVG ───── */
      @keyframes jarvis-wave {
        0%, 100% { transform: rotate(0deg); }
        25% { transform: rotate(8deg) translateY(-2px); }
        50% { transform: rotate(-4deg); }
        75% { transform: rotate(6deg) translateY(-1px); }
      }
      @keyframes jarvis-flex {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.06) translateY(-3px); }
      }
      @keyframes jarvis-spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }
      @keyframes jarvis-think {
        0%, 100% { transform: rotate(-3deg) translateY(0); }
        50% { transform: rotate(3deg) translateY(-2px); }
      }
      @keyframes jarvis-announce {
        0%, 100% { transform: translateX(0); }
        15% { transform: translateX(-2px) rotate(-1deg); }
        30% { transform: translateX(2px) rotate(1deg); }
        45% { transform: translateX(-1px); }
        60% { transform: translateX(1px); }
      }
      @keyframes jarvis-shield {
        0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(99,102,241,0)); }
        50% { transform: scale(1.04); filter: drop-shadow(0 0 12px rgba(99,102,241,0.55)); }
      }
      @keyframes jarvis-celebrate {
        0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
        25% { transform: translateY(-10px) rotate(-5deg) scale(1.08); }
        50% { transform: translateY(-2px) rotate(3deg) scale(0.97); }
        75% { transform: translateY(-8px) rotate(-3deg) scale(1.05); }
      }
      @keyframes jarvis-summary {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-4px); }
      }
      @keyframes jarvis-warning {
        0%, 100% { transform: translateX(0) rotate(0); }
        20% { transform: translateX(-3px) rotate(-2deg); }
        40% { transform: translateX(3px) rotate(2deg); }
        60% { transform: translateX(-2px) rotate(-1deg); }
        80% { transform: translateX(2px) rotate(1deg); }
      }
      .jarvis-wave { animation: jarvis-wave 1.6s ease-in-out infinite; transform-origin: 50% 80%; }
      .jarvis-flex { animation: jarvis-flex 1.4s ease-in-out infinite; transform-origin: 50% 90%; }
      .jarvis-spin { animation: jarvis-spin 6s linear infinite; transform-origin: 50% 50%; }
      .jarvis-think { animation: jarvis-think 2.4s ease-in-out infinite; transform-origin: 50% 80%; }
      .jarvis-announce { animation: jarvis-announce 1.2s ease-in-out infinite; transform-origin: 50% 50%; }
      .jarvis-shield { animation: jarvis-shield 2s ease-in-out infinite; transform-origin: 50% 50%; }
      .jarvis-celebrate { animation: jarvis-celebrate 0.9s ease-in-out infinite; transform-origin: 50% 90%; }
      .jarvis-summary { animation: jarvis-summary 2s ease-in-out infinite; transform-origin: 50% 50%; }
      .jarvis-warning { animation: jarvis-warning 0.8s ease-in-out infinite; transform-origin: 50% 50%; }
      @media (prefers-reduced-motion: reduce) {
        .jarvis-wave, .jarvis-flex, .jarvis-spin, .jarvis-think,
        .jarvis-announce, .jarvis-shield, .jarvis-celebrate,
        .jarvis-summary, .jarvis-warning {
          animation: none !important;
        }
      }

      /* Floating ToDo bubble animation */
       @keyframes pulse-slow {
        50% {
          transform: scale(1.05);
          box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.2), 0 0 0 16px rgba(59, 130, 246, 0.1);
        }
      }
      .animate-pulse-slow {
        animation: pulse-slow 3s infinite ease-in-out;
      }

      /* Pop-in animation for Add Patient modal */
      @keyframes pop-in {
        from {
          transform: scale(0.9) translateY(20px);
          opacity: 0;
        }
        to {
          transform: scale(1) translateY(0);
          opacity: 1;
        }
      }
      .animate-pop-in {
        animation: pop-in 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
      }
      
      /* Animated Gold Frame */
      @keyframes rotate-gradient {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
      }
      @keyframes gold-glow {
        0%, 100% { box-shadow: 0 0 12px 3px rgba(252, 211, 77, 0.5), 0 0 20px 6px rgba(234, 179, 8, 0.3); }
        50% { box-shadow: 0 0 20px 6px rgba(252, 211, 77, 0.7), 0 0 35px 10px rgba(234, 179, 8, 0.4); }
      }
      .animated-gold-frame {
        padding: 3px;
        background: linear-gradient(120deg, #fde047, #f59e0b, #d97706, #fde047);
        background-size: 200% 200%;
        animation: rotate-gradient 5s ease infinite, gold-glow 3s ease-in-out infinite;
      }

      /* Animated Sparkles for frame */
      .sparkle-wrapper {
        position: absolute;
        top: -5px; right: -5px;
        width: 20px; height: 20px;
        pointer-events: none;
      }
      .sparkle-particle {
        position: absolute;
        width: 3px;
        height: 3px;
        background: #fde047;
        border-radius: 50%;
        box-shadow: 0 0 5px #fff, 0 0 8px #fde047, 0 0 12px #f59e0b;
        animation: sparkle-anim 1.5s infinite;
        opacity: 0;
      }
      @keyframes sparkle-anim {
        0% { transform: scale(0.5); opacity: 0; }
        50% { transform: scale(1.2); opacity: 1; }
        100% { transform: scale(0.5) translate(20px, -20px); opacity: 0; }
      }
      .sparkle-particle:nth-child(1) { animation-delay: 0s; }
      .sparkle-particle:nth-child(2) { animation-delay: 0.3s; transform: translate(5px, 10px) scale(0.8); }
      .sparkle-particle:nth-child(3) { animation-delay: 0.9s; transform: translate(-5px, 5px) scale(0.6); }

      /* PortalHeader title badge */
      .title-badge {
        display: inline-block;
        padding: 0.125rem 0.5rem;
        background-color: rgba(167, 139, 250, 0.1);
        color: #8b5cf6;
        border: 1px solid rgba(167, 139, 250, 0.2);
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 700;
        line-height: 1.2;
      }
      .dark .title-badge {
        background-color: rgba(139, 92, 246, 0.2);
        color: #c4b5fd;
        border-color: rgba(139, 92, 246, 0.4);
      }

      /* ProfileModal customization tab */
      .customization-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
        background-color: #f3f4f6;
        border-radius: 0.75rem;
      }
      .dark .customization-item {
        background-color: rgba(55, 65, 81, 0.5);
      }
      .customization-item button {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        font-weight: 600;
        border-radius: 0.5rem;
        transition: all 0.2s;
      }
      .customization-item button.equip {
        background-color: #3b82f6;
        color: white;
      }
      .customization-item button.equip:hover {
        background-color: #2563eb;
      }
      .customization-item button.unequip {
        background-color: #e5e7eb;
        color: #374151;
      }
      .dark .customization-item button.unequip {
        background-color: #4b5563;
        color: #d1d5db;
      }
      .customization-item button.unequip:hover {
        background-color: #d1d5db;
      }
      .dark .customization-item button.unequip:hover {
        background-color: #374151;
      }

      /* Platinum avatar frame */
      .animated-platinum-frame {
        padding: 3px;
        background: linear-gradient(120deg, #e2e8f0, #94a3b8, #64748b, #e2e8f0);
        background-size: 200% 200%;
        animation: rotate-gradient 8s ease infinite;
      }

      /* New Profile Page Styles */
      .profile-page-grid {
        display: grid;
        grid-template-columns: 288px 1fr;
        gap: 2rem;
      }
      .profile-tab-button {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          width: 100%;
          padding: 0.75rem 1rem;
          font-size: 0.875rem;
          font-weight: 600;
          border-radius: 0.5rem;
          transition: all 0.2s;
          position: relative;
      }
      .profile-section {
          padding: 2rem;
          background-color: #ffffff;
          border-radius: 1rem;
          border: 1px solid #e5e7eb;
      }
      .dark .profile-section {
          background-color: rgba(30, 41, 59, 0.5);
          border-color: #374151;
      }
      .form-input {
          width: 100%;
          background-color: #f9fafb;
          border: 1px solid #d1d5db;
          border-radius: 0.5rem;
          padding: 0.625rem 1rem;
          font-size: 0.875rem;
          color: #111827;
          transition: all 0.2s;
      }
      .dark .form-input {
          background-color: #374151;
          border-color: #4b5563;
          color: #f3f4f6;
      }
      .form-input:focus {
          outline: none;
          box-shadow: 0 0 0 2px #3b82f6;
          border-color: #3b82f6;
      }
      .form-toggle {
          position: relative;
          display: inline-flex;
          height: 1.75rem;
          width: 3.25rem;
          flex-shrink: 0;
          cursor: pointer;
          border-radius: 9999px;
          border: 2px solid transparent;
          transition: background-color 0.2s ease-in-out;
      }
      .form-toggle-knob {
          pointer-events: none;
          display: inline-block;
          height: 1.25rem;
          width: 1.25rem;
          transform: translate(0, 0);
          border-radius: 9999px;
          background-color: white;
          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
          transition: transform 0.2s ease-in-out;
      }
      .form-toggle:focus-visible {
          outline: 2px solid #3b82f6;
          outline-offset: 2px;
      }

      .profile-avatar-upload-overlay {
        position: absolute;
        inset: 0;
        background-color: rgba(0,0,0,0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
        cursor: pointer;
        border-radius: 9999px;
      }
      .profile-avatar-container:hover .profile-avatar-upload-overlay {
        opacity: 1;
      }

      .signature-canvas {
        background-color: #f9fafb;
        border: 2px dashed #d1d5db;
        border-radius: 0.75rem;
        cursor: crosshair;
        touch-action: none;
      }
      .dark .signature-canvas {
        background-color: #374151;
        border-color: #4b5563;
      }
      
      /* New Preferences & Notifications Styles */
      .preference-card {
        padding: 1.5rem;
        background-color: #f9fafb;
        border-radius: 1rem;
        border: 1px solid #e5e7eb;
      }
      .dark .preference-card {
        background-color: rgba(55, 65, 81, 0.3);
        border-color: #374151;
      }
      .preference-toggle-group {
        display: inline-flex;
        background-color: #e5e7eb;
        border-radius: 0.75rem;
        padding: 0.25rem;
      }
      .dark .preference-toggle-group {
        background-color: rgba(30, 41, 59, 1);
      }
      .preference-toggle-button {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        font-weight: 600;
        border-radius: 0.625rem;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }
      .preference-toggle-button.active {
        background-color: #ffffff;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        color: #1e293b;
      }
      .dark .preference-toggle-button.active {
        background-color: #4b5563;
        color: #f3f4f6;
      }
      
      .notification-setting-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 0;
        border-bottom: 1px solid #e5e7eb;
      }
      .dark .notification-setting-row {
        border-color: #374151;
      }
      .notification-setting-row:last-child {
        border-bottom: none;
      }

      /* Address Autocomplete */
      .address-suggestions {
        position: absolute;
        background-color: white;
        border: 1px solid #d1d5db;
        border-radius: 0.5rem;
        width: 100%;
        margin-top: 0.25rem;
        z-index: 10;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        max-height: 15rem;
        overflow-y: auto;
      }
      .dark .address-suggestions {
        background-color: #374151;
        border-color: #4b5563;
      }
      .address-suggestion-item {
        padding: 0.75rem 1rem;
        cursor: pointer;
        font-size: 0.875rem;
        border-bottom: 1px solid #e5e7eb;
      }
      .dark .address-suggestion-item {
        border-bottom-color: #4b5563;
      }
      .address-suggestion-item:last-child {
        border-bottom: none;
      }
      .address-suggestion-item:hover {
        background-color: #f3f4f6;
      }
      .dark .address-suggestion-item:hover {
        background-color: #4b5563;
      }
      .map-placeholder {
        width: 100%;
        height: 150px;
        background-color: #e5e7eb;
        border-radius: 0.75rem;
        margin-top: 1rem;
        object-fit: cover;
        border: 1px solid #d1d5db;
      }
      .dark .map-placeholder {
        background-color: #374151;
        border-color: #4b5563;
      }

      /* Complete Profile Prompt */
      .profile-prompt-overlay {
        position: fixed;
        inset: 0;
        background-color: rgba(0,0,0,0.6);
        backdrop-filter: blur(4px);
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
      }
      .dark .profile-prompt-overlay {
        background-color: rgba(0,0,0,0.8);
      }
      .profile-prompt-card {
        background-color: white;
        border-radius: 1rem;
        padding: 2rem;
        max-width: 500px;
        text-align: center;
        box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
      }
      .dark .profile-prompt-card {
        background-color: #1f2937; /* gray-800 */
        border: 1px solid #374151; /* gray-700 */
      }

      /* Registration Page Steps */
      @keyframes slide-out-left { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-50px); opacity: 0; } }
      @keyframes slide-in-right { from { transform: translateX(50px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
      .form-step {
          display: none;
          animation-duration: 0.5s;
          animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
          animation-fill-mode: forwards;
      }
      .form-step.active { display: block; animation-name: slide-in-right; }
      .form-step.exiting { animation-name: slide-out-left; }

      .plan-card {
          transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
      }
      .plan-card.selected {
          transform: translateY(-5px) scale(1.02);
          box-shadow: 0 0 0 3px #3b82f6, 0 10px 20px rgba(59, 130, 246, 0.2);
          border-color: #3b82f6;
      }
      .plan-card-popular-badge {
        position: absolute;
        top: 0;
        right: 1.5rem;
        transform: translateY(-50%);
        background: linear-gradient(45deg, #f97316, #fb923c);
        color: white;
        padding: 0.25rem 0.75rem;
        font-size: 0.75rem;
        font-weight: 700;
        border-radius: 9999px;
        box-shadow: 0 4px 10px rgba(249, 115, 22, 0.3);
      }
      .input-error {
        border-color: #ef4444; /* red-500 */
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
      }
      .error-text {
        color: #dc2626; /* red-600 */
        font-size: 0.75rem; /* text-xs */
        margin-top: 0.25rem; /* mt-1 */
      }
      
      /* Payment Page Styles */
      .payment-input {
          padding-left: 2.5rem; /* for icon */
          background-color: #f9fafb;
          border: 1px solid #d1d5db;
          border-radius: 0.5rem;
          padding: 0.75rem 1rem 0.75rem 2.5rem;
      }
      .dark .payment-input {
          background-color: #374151;
          border-color: #4b5563;
          color: #f3f4f6;
      }
      .payment-input:focus {
          outline: none;
          box-shadow: 0 0 0 2px #3b82f6;
          border-color: #3b82f6;
      }
      
      @keyframes checkmark-draw {
        to { stroke-dashoffset: 0; }
      }
      .checkmark-circle {
        stroke-dasharray: 166;
        stroke-dashoffset: 166;
        animation: checkmark-draw 0.6s cubic-bezier(0.65, 0, 0.45, 1) 0.2s forwards;
      }
      .checkmark-check {
        stroke-dasharray: 48;
        stroke-dashoffset: 48;
        animation: checkmark-draw 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
      }

      /* Patient Portal Exercise Session styles */
      .aurora-bg {
          background: #0D1117;
          position: relative;
          overflow: hidden;
      }
      .aurora-bg::before {
          content: '';
          position: absolute;
          top: 0; left: 0; right: 0; bottom: 0;
          background: radial-gradient(circle at 30% 30%, rgba(13, 91, 153, 0.3) 0%, transparent 40%),
                      radial-gradient(circle at 70% 80%, rgba(190, 24, 93, 0.2) 0%, transparent 40%);
          background-size: 200% 200%;
          animation: aurora 20s linear infinite;
          will-change: transform;
          pointer-events: none; /* Allow clicks to pass through the aurora effect */
      }

      .duo-button {
          border-radius: 1.25rem;
          border: none;
          position: relative;
          transform-style: preserve-3d;
          transition: transform 0.15s ease;
          border-bottom: 6px solid var(--shadow-color);
      }
      .duo-button:disabled {
          opacity: 0.6;
          cursor: not-allowed;
          border-bottom-width: 2px;
      }
      .duo-button:not(:disabled):active {
          transform: translateY(4px);
          border-bottom-width: 2px;
      }
      .duo-button-finish {
          border-radius: 1.25rem;
          border: none;
          position: relative;
          transform-style: preserve-3d;
          transition: all 0.15s ease;
          background-color: #22c55e; /* green-500 */
          border-bottom: 6px solid #15803d; /* green-700 */
      }
      .duo-button-finish:not(:disabled):active {
          transform: translateY(4px);
          border-bottom-width: 2px;
      }

      .stat-card {
          background: rgba(255, 255, 255, 0.05);
          backdrop-filter: blur(8px);
          border: 1px solid rgba(255, 255, 255, 0.1);
      }

      .xp-bar-container { transition: all 0.5s; }
      .xp-bar-fill { transition: width 0.5s ease-out; }

      @keyframes particle-burst {
          0% { transform: translate(var(--x), var(--y)) scale(1); opacity: 1; }
          100% { transform: translate(calc(var(--x) * 1.5), calc(var(--y) * 1.5)) scale(0); opacity: 0; }
      }
      .particle {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          animation: particle-burst 0.7s ease-out forwards;
      }

      @keyframes exercise-image-swap {
          0%, 45% { background-image: var(--img-1); }
          50%, 95% { background-image: var(--img-2); }
          100% { background-image: var(--img-1); }
      }
      .exercise-image-animate {
          animation: exercise-image-swap 6s infinite ease-in-out;
      }

      .session-progress-bar div { transition: width 0.5s ease-out; }
      .series-dot { transition: all 0.3s ease-in-out; }

      .feedback-option-button {
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);
      }
      .feedback-option-button:hover:not(.scale-110) {
          background: rgba(255, 255, 255, 0.2);
          border-color: rgba(255, 255, 255, 0.3);
      }

      .pain-slider-express::-webkit-slider-thumb {
          -webkit-appearance: none; appearance: none;
          width: 24px; height: 24px;
          background: var(--thumb-color);
          border: 3px solid white;
          border-radius: 50%;
          cursor: pointer;
          margin-top: -8px; /* (thumb height - track height) / 2 */
          box-shadow: 0 1px 3px rgba(0,0,0,0.2);
      }
      .pain-slider-express::-moz-range-thumb {
          width: 18px; height: 18px;
          background: var(--thumb-color);
          border: 3px solid white;
          border-radius: 50%;
          cursor: pointer;
          box-shadow: 0 1px 3px rgba(0,0,0,0.2);
      }
      
      @keyframes rest-glow {
          0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.3), 0 0 40px rgba(59, 130, 246, 0.2); }
          50% { box-shadow: 0 0 30px rgba(59, 130, 246, 0.5), 0 0 60px rgba(59, 130, 246, 0.4); }
      }
      .animate-rest-screen-glow {
          animation: rest-glow 3s infinite ease-in-out;
      }

      @keyframes check-pop {
          0% { transform: scale(0.5); opacity: 0; }
          60% { transform: scale(1.1); opacity: 1; }
          100% { transform: scale(1); }
      }
      .animate-check-pop {
          animation: check-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
      }

      /* Boutique Modal New styles */
      .boutique-modal-new {
        background: radial-gradient(ellipse at top, #1e293b, #0f172a);
        border: 1px solid #334152;
      }
      .boutique-xp-display {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #facc15;
      }
      .boutique-card-new {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 1.5rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }
      .boutique-card-new:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
      }
      .boutique-card-new.locked {
        opacity: 0.5;
        filter: grayscale(80%);
      }
      .item-visual {
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-top-left-radius: 1.5rem;
        border-top-right-radius: 1.5rem;
        background-color: rgba(0,0,0,0.2);
        position: relative;
        overflow: hidden;
      }
      .item-icon {
        width: 4rem; height: 4rem;
        filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
      }
      .item-tag {
        font-size: 0.75rem;
        font-weight: 600;
        padding: 0.125rem 0.5rem;
        border-radius: 9999px;
        color: white;
      }
      .item-tag.frame { background-color: rgba(59, 130, 246, 0.7); }
      .item-tag.title { background-color: rgba(168, 85, 247, 0.7); }
      .owned-badge {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.625rem 0;
        border-radius: 0.75rem;
        background: rgba(34, 197, 94, 0.2);
        color: #4ade80;
        font-weight: bold;
        border: 1px solid rgba(34, 197, 94, 0.3);
      }
      .purchase-button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.625rem 0;
        border-radius: 0.75rem;
        font-weight: bold;
        transition: all 0.2s;
        border: 1px solid transparent;
      }
      .purchase-button.can-afford {
        background: #facc15;
        color: #422006;
        border-color: #fde047;
      }
       .purchase-button.can-afford:hover {
        background: #fde047;
        box-shadow: 0 0 15px rgba(250, 204, 21, 0.4);
      }
      .purchase-button.cannot-afford {
        background: #4b5563;
        color: #9ca3af;
        cursor: not-allowed;
      }
       .rarity-bg-rare::before {
        content: ''; position: absolute; inset: 0;
        background: radial-gradient(circle, rgba(250, 204, 21, 0.2) 0%, transparent 70%);
      }
       .rarity-bg-epic::before {
        content: ''; position: absolute; inset: 0;
        background: radial-gradient(circle, rgba(168, 85, 247, 0.2) 0%, transparent 70%);
      }

      /* League of Legends Inspired Emblems */
      .league-emblem {
        position: relative;
        width: var(--size);
        height: var(--size);
        filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
        transform-style: preserve-3d; /* For layering */
      }
      .emblem-banner {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, #0a3a40, #146e7a);
        clip-path: polygon(10% 25%, 50% 10%, 90% 25%, 90% 90%, 50% 100%, 10% 90%);
        transform: scaleY(1.1) translateY(-2%);
      }
      .emblem-back {
        position: absolute;
        inset: 0;
        background: var(--c-bg);
        clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
      }
      .emblem-wings, .emblem-wings::before, .emblem-wings::after {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--c-wings);
        z-index: -1;
      }
      .emblem-crest {
        position: absolute;
        inset: 12%;
        background: var(--c-crest);
        clip-path: polygon(50% 0%, 85% 20%, 85% 70%, 50% 90%, 15% 70%, 15% 20%);
      }
      .emblem-crest::before { /* highlight */
        content: '';
        position: absolute;
        inset: 5%;
        background: radial-gradient(ellipse at 50% 20%, var(--c-highlight) 0%, transparent 60%);
      }
      .emblem-gem {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 25%;
        height: 25%;
        transform: translate(-50%, -50%) rotate(45deg);
        background: radial-gradient(circle at 70% 30%, #fff, var(--c-gem) 70%);
        border: calc(var(--size) * 0.02) solid var(--c-gem-border);
        box-shadow: 0 0 calc(var(--size) * 0.1) var(--c-gem), inset 0 0 calc(var(--size) * 0.05) rgba(255,255,255,0.5);
      }
      
      /* Base Wings (for Bronze) */
      .rank-Bronze .emblem-wings {
         clip-path: polygon(50% 20%, 30% 35%, 15% 35%, 25% 50%, 15% 65%, 30% 65%, 50% 80%, 70% 65%, 85% 65%, 75% 50%, 85% 35%, 70% 35%);
         transform: scale(1.1);
      }
      .rank-Bronze { --c-bg: #4a2a12; --c-wings: #8c582c; --c-crest: linear-gradient(135deg, #e69a5f, #6b401f); --c-highlight: #f0c9a6; --c-gem: #d9a477; --c-gem-border: #6b401f; }
      .rank-Bronze .emblem-banner { display: none; }
      
      /* Silver */
      .rank-Argent .emblem-wings {
        clip-path: polygon(50% 15%, 20% 40%, 0% 35%, 20% 55%, 0% 65%, 20% 60%, 50% 85%, 80% 60%, 100% 65%, 80% 55%, 100% 35%, 80% 40%);
        transform: scale(1.15);
      }
      .rank-Argent { --c-bg: #5a636c; --c-wings: #a8b2bd; --c-crest: linear-gradient(135deg, #f0f0f0, #909090); --c-highlight: #fff; --c-gem: #d1d5db; --c-gem-border: #707070; }

      /* Gold */
      .rank-Or .emblem-wings {
        clip-path: polygon(50% 10%, 15% 45%, 0 35%, 20% 60%, 0 70%, 20% 65%, 50% 90%, 80% 65%, 100% 70%, 80% 60%, 100% 35%, 85% 45%);
        transform: scale(1.25);
      }
      .rank-Or .emblem-wings::before {
        clip-path: polygon(50% 20%, 35% 40%, 25% 35%, 35% 55%, 25% 60%, 35% 60%, 50% 75%, 65% 60%, 75% 60%, 65% 55%, 75% 35%, 65% 40%);
        transform: scale(0.8) translateY(10%);
        opacity: 0.7;
      }
      .rank-Or { --c-bg: #7a5f00; --c-wings: #c79c00; --c-crest: linear-gradient(135deg, #fff2a8, #e6a700); --c-highlight: #ffffd1; --c-gem: #facc15; --c-gem-border: #b38000; }

      /* Platinum */
      .rank-Platine .emblem-wings {
        clip-path: polygon(50% 5%, 10% 50%, 0 40%, 25% 70%, 0 80%, 25% 75%, 50% 95%, 75% 75%, 100% 80%, 75% 70%, 100% 40%, 90% 50%);
        transform: scale(1.3);
      }
      .rank-Platine .emblem-wings::before {
        clip-path: polygon(50% 15%, 25% 50%, 10% 45%, 30% 65%, 10% 70%, 30% 70%, 50% 85%, 70% 70%, 90% 70%, 70% 65%, 90% 45%, 75% 50%);
        transform: scale(0.9) translateY(5%);
        opacity: 0.6;
      }
      .rank-Platine { --c-bg: #2a6f6f; --c-wings: #4aaaa5; --c-crest: linear-gradient(135deg, #e7f5ff, #a8cde0); --c-highlight: #fff; --c-gem: #5eead4; --c-gem-border: #8aa7b8; }

      /* Diamond */
      .rank-Diamant .emblem-wings {
        clip-path: polygon(50% 0, 10% 55%, 0 45%, 30% 80%, 0 90%, 30% 85%, 50% 100%, 70% 85%, 100% 90%, 70% 80%, 100% 45%, 90% 55%);
        transform: scale(1.35);
      }
      .rank-Diamant .emblem-wings::before {
        clip-path: polygon(50% 10%, 20% 55%, 10% 50%, 35% 75%, 10% 80%, 35% 80%, 50% 90%, 65% 80%, 90% 80%, 65% 75%, 90% 50%, 80% 55%);
        transform: scale(0.8) translateY(8%);
        opacity: 0.7;
        background: var(--c-crest);
      }
      .rank-Diamant { --c-bg: #3a579a; --c-wings: #5e83d8; --c-crest: linear-gradient(135deg, #d1ffff, #70d1ff); --c-highlight: #fff; --c-gem: #7dd3fc; --c-gem-border: #4baed9; }
      .rank-Diamant .emblem-crest {
        clip-path: polygon(50% 0, 90% 20%, 90% 65%, 50% 95%, 10% 65%, 10% 20%);
      }
      
      /* Master */
      .rank-Maître .emblem-wings {
         clip-path: polygon(50% 0, 0 35%, 15% 45%, 15% 80%, 50% 100%, 85% 80%, 85% 45%, 100% 35%);
         transform: scale(1.4) translateY(-3%);
      }
      .rank-Maître .emblem-wings::before {
        clip-path: polygon(50% 10%, 20% 40%, 20% 70%, 50% 85%, 80% 70%, 80% 40%);
        transform: scale(0.9);
        opacity: 0.5;
        background: var(--c-crest);
      }
      .rank-Maître .emblem-back {
        clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0 70%, 0 30%);
      }
      .rank-Maître { --c-bg: #4c2a7e; --c-wings: #9d5fe3; --c-crest: linear-gradient(135deg, #e5b0ff, #8a2be2); --c-highlight: #f5d6ff; --c-gem: #c084fc; --c-gem-border: #681f99; }

      /* Challenger */
       .rank-Challenger .emblem-wings {
         clip-path: polygon(50% 0, 0 35%, 15% 45%, 15% 80%, 50% 100%, 85% 80%, 85% 45%, 100% 35%);
         transform: scale(1.45) translateY(-5%);
         background: linear-gradient(135deg, #fff2a8, #c79c00);
       }
      .rank-Challenger .emblem-wings::before {
        clip-path: polygon(50% 10%, 20% 40%, 20% 70%, 50% 85%, 80% 70%, 80% 40%);
        transform: scale(1.1);
        opacity: 0.8;
        background: var(--c-wings);
      }
      .rank-Challenger .emblem-gem {
        width: 30%; height: 30%; border-radius: 50%; transform: translate(-50%, -50%);
        background: radial-gradient(circle at 70% 30%, #fff, var(--c-gem) 60%);
        animation: pulse-current-league 2s infinite;
      }
      .rank-Challenger .emblem-back {
        clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0 70%, 0 30%);
      }
      .rank-Challenger { --c-bg: #4a2a12; --c-wings: #d4af37; --c-crest: linear-gradient(135deg, #fff, #ffe275); --c-highlight: #fff; --c-gem: #a1dfff; --c-gem-border: #52a8d9; }