/* style.css - Fichier de style principal pour Chicken Road */
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

/* Début du style personnalisé */

      .ri::before { font-family: "remixicon"; content: "\f3c2"; }

      body {
          font-family: 'Montserrat', sans-serif;
          background-color: #0F0F1A;
          color: #FFFFFF;
      }

      .gold-gradient {
          background: linear-gradient(135deg, #FFD700 0%, #B8860B 100%);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
      }

      .gold-border {
          border: 2px solid;
          border-image: linear-gradient(135deg, #FFD700 0%, #B8860B 100%) 1;
      }

      .gold-button {
          background: linear-gradient(135deg, #FFD700 0%, #B8860B 100%);
          transition: all 0.3s ease;
      }

      .gold-button:hover {
          filter: brightness(1.2);
          transform: translateY(-2px);
          box-shadow: 0 10px 20px rgba(184, 134, 11, 0.3);
      }

      .card-hover {
          transition: all 0.3s ease;
      }

      .card-hover:hover {
          transform: translateY(-10px);
          box-shadow: 0 15px 30px rgba(255, 215, 0, 0.2);
      }

      .coin {
          animation: spin 8s linear infinite;
      }

      @keyframes spin {
          0% { transform: rotateY(0deg); }
          100% { transform: rotateY(360deg); }
      }

      .multiplier {
          animation: pulse 2s infinite alternate;
      }

      @keyframes pulse {
          0% { transform: scale(1); }
          100% { transform: scale(1.1); }
      }

      .shine {
          position: relative;
          overflow: hidden;
      }

      .shine::after {
          content: '';
          position: absolute;
          top: -50%;
          left: -50%;
          width: 200%;
          height: 200%;
          background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
          transform: rotate(30deg);
          animation: shine 6s infinite;
      }

      @keyframes shine {
          0% { transform: translateX(-100%) rotate(30deg); }
          20%, 100% { transform: translateX(100%) rotate(30deg); }
      }

      .custom-checkbox {
          display: none;
      }

      .checkbox-label {
          position: relative;
          padding-left: 30px;
          cursor: pointer;
      }

      .checkbox-label::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 20px;
          height: 20px;
          border: 2px solid #B8860B;
          border-radius: 4px;
          background-color: transparent;
          transition: all 0.3s ease;
      }

      .custom-checkbox:checked + .checkbox-label::before {
          background-color: #FFD700;
          border-color: #FFD700;
      }

      .custom-checkbox:checked + .checkbox-label::after {
          content: '\2713';
          position: absolute;
          left: 5px;
          top: -2px;
          color: #0F0F1A;
          font-size: 14px;
          font-weight: bold;
      }

      .custom-switch {
          position: relative;
          display: inline-block;
          width: 50px;
          height: 24px;
      }

      .custom-switch input {
          opacity: 0;
          width: 0;
          height: 0;
      }

      .switch-slider {
          position: absolute;
          cursor: pointer;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: #2b2b3a;
          transition: .4s;
          border-radius: 24px;
      }

      .switch-slider:before {
          position: absolute;
          content: "";
          height: 18px;
          width: 18px;
          left: 3px;
          bottom: 3px;
          background-color: white;
          transition: .4s;
          border-radius: 50%;
      }

      input:checked + .switch-slider {
          background: linear-gradient(135deg, #FFD700 0%, #B8860B 100%);
      }

      input:checked + .switch-slider:before {
          transform: translateX(26px);
      }

      .range-slider {
          -webkit-appearance: none;
          width: 100%;
          height: 8px;
          border-radius: 5px;
          background: #2b2b3a;
          outline: none;
      }

      .range-slider::-webkit-slider-thumb {
          -webkit-appearance: none;
          appearance: none;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: linear-gradient(135deg, #FFD700 0%, #B8860B 100%);
          cursor: pointer;
      }

      .range-slider::-moz-range-thumb {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: linear-gradient(135deg, #FFD700 0%, #B8860B 100%);
          cursor: pointer;
          border: none;
      }

      input[type="number"]::-webkit-inner-spin-button,
      input[type="number"]::-webkit-outer-spin-button {
          -webkit-appearance: none;
          margin: 0;
      }

      .hero-section {
          position: relative;
          overflow: hidden;
      }

      .hero-section::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(to right, rgba(15, 15, 26, 0.9) 0%, rgba(15, 15, 26, 0.7) 50%, rgba(15, 15, 26, 0.4) 100%);
          z-index: 1;
      }

      .hero-content {
          position: relative;
          z-index: 2;
      }

    
    }

    

/* Helper: apply gold gradient on hover to normal text */
.gold-gradient-hover:hover {
  background: linear-gradient(135deg, #FFD700 0%, #B8860B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}