/* ✨ Smooth background fade */
   .bg-quiz {
     background-size: cover;
     background-position: center;
     transition: background-image 1s ease-in-out, opacity 0.8s ease-in-out;
   }

   .hover-card {
     cursor: pointer;
     max-width: 350px;
   }

   /* 🎬 Text fade animation */
   .fade-text {
     opacity: 0;
     transform: translateY(10px);
     transition: opacity 0.6s ease, transform 0.6s ease;
   }

   .fade-text.show {
     opacity: 1;
     transform: translateY(0);
   }

   /* for mobile */
   .quiz-mobile {
     width: 100%;
     height: 70vh;
     overflow: hidden;
   }

   .quiz-slide {
     position: relative;
     height: 70vh;
     background-size: cover;
     background-position: left;
     background-repeat: no-repeat;
     transition: background-image 1s ease-in-out;
   }

   .quiz-slide::before {
     content: "";
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, 0.45);
     /* cinematic overlay */
   }

   .quiz-content {
     position: absolute;
     top: 70%;
     left: 8%;
     transform: translateY(-50%);
     max-width: 80%;
     text-align: left;
     /* changed */
     z-index: 2;
   }

   .quiz-content h3 {
     font-size: 1.4rem;
     letter-spacing: 1px;
     color: #fff;
   }

   .quiz-content p {
     font-size: 0.95rem;
     line-height: 1.6;
     color: #fff;
   }

   /* Slick styling */
   .quiz-mobile-slider .slick-dots {
     bottom: 25px;
     text-align: center;
   }

   .quiz-mobile-slider .slick-dots li button:before {
     color: #000;
     opacity: 0.9;
     font-size: 22px;
   }

   .quiz-mobile-slider .slick-dots li.slick-active button:before {
     color: #fff;
     opacity: 1;
   }

   .quiz-mobile-slider .slick-prev,
   .quiz-mobile-slider .slick-next {
     display: none !important;
   }

   .quiz-wrapper {
     background: #fff;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
     padding: 16px;
     /* margin: 16px; */

   }

   .difficulty-bar {
     width: 100%;
     /* max-width: 600px; */
     margin: 15px auto;
     text-align: center;
   }

   .bar {
     display: flex;
     justify-content: space-between;
     gap: 6px;
     margin-bottom: 8px;
   }

   .segment {
     flex: 1;
     height: 5px;
     border-radius: 4px;
     background: #ddd;
     overflow: hidden;
     position: relative;
   }

   .segment .fill {
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 0%;
     transition: width 0.4s ease;
     border-radius: 4px;
   }

   /*  for the quizes progress bar */
   .segment.easy .fill {
     background: #2cb8e2;
     /* black for easy */
   }

   .segment.moderate .fill {
     background: #f8ca34;
     /* blue for moderate */
   }

   .segment.hard .fill {
     background: #ff6432;
     /* orange for hard */
   }

   .labels {
     display: flex;
     justify-content: space-between;
     font-weight: 600;
   }

   .labels span {
     font-size: 14px;
   }

   .game-area {
     position: relative;
     display: inline-block;
     cursor: pointer;
   }

   /* Emoji = invisible target, not clickable */
   .emoji {
     position: absolute;
     pointer-events: none;
   }

   .game-area.fade-in {
  animation: quizFadeIn 0.15s ease-out forwards;
}

   @keyframes quizFadeIn {
     from {
       opacity: 0;
       transform: scale(0.98);
     }
 
     to {
       opacity: 1;
       transform: scale(1);
     }
   }

   .quiz-image {
     width: 100%;
     display: block;
   }


   /* Circles */
   .click-marker {
     position: absolute;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     border: 4px solid;
     transform: translate(-50%, -50%);
     pointer-events: none;
     display: none;
   }

   .click-marker.wrong {
     border-color: red;
   }

   .click-marker.correct {
     border-color: #2ecc71;
     /* green */
   }

   .next-btn:disabled,
   .next-btn.disabled {
     opacity: 0.5;
     cursor: not-allowed;
     background: #F7F0DA !important;
     color: #000 !important;
     border-color: unset !important;
   }


   .feedback {
     font-weight: bold;
     margin-top: 10px;
     height: 20px;
   }

   button {
     /* margin-top: 15px; */
     padding: 10px 20px;
     border: 2px solid #000;
     background: #f8f8f8;
     cursor: pointer;
     transition: background 0.3s;
   }



   .score {
     margin-top: 10px;
     font-size: 16px;
     color: #333;
   }

   /* Popup overlay and bounce animation */
   .popup-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.5);
     backdrop-filter: blur(3px);
     display: none;
     justify-content: center;
     align-items: center;
     z-index: 9999;
   }

   .popup {
     background: #fff;
     padding: 2rem;
     border-radius: 12px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
     text-align: center;
     animation: bounceIn 0.6s ease;
     max-width: 650px;
   }

   .popup h2 {
     color: #000;
     margin-bottom: 0.5rem;
   }

   .popup p {
     color: #444;
     font-size: 15px;
   }

   .popup button {
     margin-top: 15px;
     border: none;
     background: #ff6432;
     color: #fff;
     padding: 8px 16px;
     border-radius: 6px;
     cursor: pointer;
     font-weight: 500;
     transition: transform 0.2s;
   }

   .popup button:hover {
     transform: scale(1.05);
   }

   /* Bounce Animation */
   @keyframes bounceIn {
     0% {
       transform: scale(0.6);
       opacity: 0;
     }

     60% {
       transform: scale(1.2);
       opacity: 1;
     }

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

   /* scene */
   .scene-wrapper {
     background: #fff;
     padding: 20px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
     text-align: center;
   }

   .scene-main-image {
     width: 100%;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   }

   /* ===== OPTIONS ROW (LAYOUT UNCHANGED) ===== */
   .scene-options {
     display: flex;
     justify-content: space-between;
     gap: 20px;
     overflow: visible;
     margin-top: 20px;
   }

   /* each card wrapper */
   .scene-option-card {
     width: 32%;
     position: relative;
     cursor: pointer;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
   }

   /* poster image */
   .scene-option-card .scene-option {
     width: 80%;
     border-radius: 12px;
     display: block;
   }

   /* hover – only on active (not disabled/selected) */
   .scene-option-card:hover:not(.disabled):not(.selected-correct):not(.selected-wrong) .scene-option {
     transform: scale(1.05);
     box-shadow:
       2px 2px 0px #ff5722,
       4px 4px 0px #ff5722,
       6px 6px 0px #ff5722;
   }

   /* popup (unchanged) */
   .scene-popup-overlay {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.65);
     justify-content: center;
     align-items: center;
     z-index: 9999;
   }

   .scene-popup {
     background: #fff;
     padding: 2rem;
     border-radius: 20px;
     text-align: center;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
     transform: scale(0.9);
     animation: bounce-in 0.5s ease forwards;
   }

   .scene-popup h2 {
     margin-bottom: 10px;
     color: #000;
   }

   .scene-popup button {
     margin-top: 15px;
     padding: 10px 20px;
     border: none;
     background: #ff6432;
     color: #fff;
     border-radius: 10px;
     cursor: pointer;
     transition: 0.3s;
   }

   .scene-popup button:hover {
     background: #ff6432;
   }

   /* Bounce animation */
   @keyframes bounce-in {
     0% {
       transform: scale(0.7);
       opacity: 0;
     }

     60% {
       transform: scale(1.05);
       opacity: 1;
     }

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

   .bounce-in {
     animation: bounce-in 0.6s ease;
   }

   /* ===== ACTIVE & DISABLED STATES ===== */

   .scene-next-btn:disabled,
   .scene-next-btn.disabled {
     opacity: 0.5;
     cursor: not-allowed;
     background: #F7F0DA !important;
     color: #000 !important;
     border-color: unset !important;
   }

   /* generic disabled look */
   .scene-option-card.disabled {
     opacity: 0.35;
     filter: grayscale(1);
     pointer-events: none;
   }

   /* correct selection */
   .scene-option-card.selected-correct {
     opacity: 1;
     filter: none;
   }

   /* wrong selection */
   .scene-option-card.selected-wrong {
     opacity: 1;
     filter: none;
   }

   /* status icon IMG (correct.svg / wrong.svg) */
   .scene-status-icon {
     position: absolute;
     top: -15px;
     left: 50%;
     transform: translateX(-50%);
     width: 36px;
     height: 36px;
     display: none;
     pointer-events: none;
   }

   /* keep hover disabled after selection */
   .scene-option-card.disabled:hover,
   .scene-option-card.selected-correct:hover,
   .scene-option-card.selected-wrong:hover {
     transform: none;
     box-shadow: none;
   }

   /* hide the score preview */
   .scene-score-label {
     display: none;
   }








   /* Sweet Quiz */
   /* Hide live score under the Next button */
   .sweet-score-label {
     display: none;
   }

   /* Next button initially hidden/disabled */
   .sweet-next-btn {
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s ease;
     background: #F7F0DA !important;
     color: #000 !important;
     border-color: unset !important;
   }

   /* After the user selects an answer */
   .sweet-next-btn.is-active {
     opacity: 1;
     pointer-events: auto;
   }

   .sweet-quiz-container {
     background: #fff;
     padding: 20px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
     text-align: center;
   }

   .sweet-main-image {
     width: 100%;
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
   }

   .sweet-options {
     display: flex;
     gap: 16px;
     /* margin-bottom: 20px;
     margin-top: 20px; */
     align-items: center;
     justify-content: center;
   }

   .sweet-choice {
     display: flex;
  align-items: center;
  width: 100%;
  gap: 15px;
  border: 2px solid #000;
  border-radius: 70px;
  background: #fff0;
  padding: 10px 20px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.1s ease;
   }

   .sweet-choice:hover {
     transform: scale(1.04);
     box-shadow:
       2px 2px 0px #ff5722,
       4px 4px 0px #ff5722,
       6px 6px 0px #ff5722;
   }

   .sweet-choice-img {
      border-radius: 60px;
      object-fit: cover;
      box-shadow: 2px 0 0 #F8CA33,4px 0 0 #F8CA33,6px 0 0 #F8CA33;
      max-width: 100px;
   }

   .sweet-popup-overlay {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.6);
     justify-content: center;
     align-items: center;
     z-index: 999;
   }

   .sweet-popup {
     background: #fff;
     padding: 2rem;
     border-radius: 20px;
     text-align: center;
     animation: bounce-in 0.6s ease forwards;
   }

   @keyframes bounce-in {
     0% {
       transform: scale(0.7);
       opacity: 0;
     }

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

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

   @media (max-width:548px) {
    .sweet-option-headings {
      line-height: 1.3;
      font-size: 1rem;
    }
     .sweet-choice-img {
       
       max-width: 80px;
        height: auto;
        border-radius: 60px;
        object-fit: cover;
        box-shadow: 2px 0 0 #F8CA33, 4px 0 0 #F8CA33, 6px 0 0 #F8CA33;
     }
   }

   .sweet-choice {
     position: relative;
   }

   /* Disable hover effect when button is disabled */
   .sweet-choice:disabled,
   .sweet-choice[disabled] {
     transform: none;
     box-shadow: none;
     cursor: default;
   }

   /* Small circle on the right for tick / cross */
   .sweet-status-icon {
     margin-left: auto;
     width: 42px;
     height: 42px;
     border-radius: 50%;
     font-size: 22px;
     font-weight: 700;
     display: none;
     /* hidden by default */
     align-items: center;
     justify-content: center;
   }

   /* Correct / highlighted option */
   .sweet-choice.is-correct {
     background: #fff6de;
     /* light cream highlight */
     color: #000;

   }

   /* Keep WRONG icon fully visible even when the card dims */
   .sweet-status-icon.wrong-icon {
     opacity: 1 !important;
     filter: none !important;
   }

   /* Prevent parent opacity from affecting icon */
   .sweet-choice.is-dim .wrong-icon {
     opacity: 1 !important;
   }


   /* Dimmed options (still disabled) */
   /* .sweet-choice.is-dim {
  opacity: 0.3;
} */



   /* Card border can go lighter, but keep full opacity */
   .sweet-choice.is-dim {
     border-color: #d3ccc0;
   }

   /* Dim the thumbnail image */
   .sweet-choice.is-dim .sweet-choice-img {
     opacity: 0.7;
   }

   /* Dim the label text */
   .sweet-choice.is-dim h3 span {
     opacity: 0.3;
   }

   /* WRONG icon should always stay bright */
   .sweet-status-icon.wrong-icon {
     opacity: 1;
     filter: none;
   }





   /* score */
   .bg-score-yellow {
     background-color: #fdf5dc;
     position: relative;
     min-height: 100vh;
   }

   .cloud-404 {
     top: 30%;
     left: 0;
     opacity: 0.8;
   }

   .score-box {
     background: #f7f0da;
     border: 2px solid #000;
     border-radius: 12px;
     max-width: 860px;
   }

   .rank-text {
     font-size: 1.5rem;
   }

   .stars img {
     padding: 0 25px;
     max-width: 140px;
   }

   @media (max-width: 650px) {
    .quiz-slide{background-position: center;}
    .game-cursor{display:none;}
     .stars img {
       padding: 0 15px;
     }

     .stars img {
       max-width: 140px;
     }
   }

   @media (max-width: 524px) {
     .stars img {
       max-width: 90px;
     }
   }

.selected-wrong .scene-option {opacity: 0.35;}
.sweet-option-headings{font-size: 0.9rem}
.hover-card.active {transform: translateY(-6px);box-shadow: 8px 8px 0px #ff5722;}
.quiz-cards{background: #F7F0DA;}
.main-quiz-section .hover-card-img img{max-height: unset !important;}
.game-area {
  cursor: none;
}
.game-cursor {
  position: absolute;width: 36px;height: 36px;border: 2px solid #eeeeee;border-radius: 50%;pointer-events: none;transform: translate(-50%, -50%);opacity: 0;transition: opacity 0.15s ease;will-change: transform;
}
@media (max-width: 480px) {.sweet-option-headings {font-size: .7rem !important;}}
@media (max-width: 576px) {.sweet-status-icon{width: 25px !important;}}
.scene-quiz-container {min-height: 800px;}.scene-main-image {aspect-ratio: 16 / 9;object-fit: cover;}.scene-wrapper {max-height: 440px;}
 .scene-options {min-height: 180px;} .sweet-quiz-container { max-height: 440px;}.sweet-options {min-height: 100px;}
 #scene_anchor, #emoji_anchor, #sweet_anchor{scroll-margin-top: 60px;}