body{
  margin:0;
  padding:20px;
  font-family:Arial, sans-serif;

  background: linear-gradient(
    180deg,
    #e0c3fc,
    #f5f7fa
  );
}



/* Animated Floating Gradient Title */
.animated-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;

  max-width:95%;
  margin:15px auto 25px;

  animation: floatTitle 3s ease-in-out infinite;
}

  /* PINK GRADIENT */
  background: linear-gradient(
    270deg,
    #ff4d8d,
    #ff77a9,
    #ff9ecf,
    #ff4d8d
  );
  background-size:600% 600%;
  -webkit-background-clip:text;
  color:transparent;

  /* ANIMATIONS */
  animation:
    pinkGradient 6s ease infinite,
    floatTitle 3s ease-in-out infinite;
}

@keyframes pinkGradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

@keyframes floatTitle{
  0%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
  100%{transform:translateY(0)}
}

@keyframes hornFloat{
  0%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
  100%{transform:translateY(0)}
}


.container{
  position: relative;   /* 🔴 THIS IS THE FIX */
  max-width:520px;
  margin:auto;
  padding:22px;
  border-radius:18px;

  background: linear-gradient(
    135deg,
    #ff9a3c,
    #ffb347,
    #ffd194
  );

  box-shadow: 0 10px 25px rgba(255, 154, 60, 0.35);
}

  /* ORANGE GRADIENT CARD */
  background: linear-gradient(
    135deg,
    #ff9a3c,
    #ffb347,
    #ffd194
  );

  box-shadow: 0 10px 25px rgba(255, 154, 60, 0.35);
}

body.dark .container{
background:#2a2a45;
}

.progress{
text-align:center;
font-weight:bold;
margin-bottom:10px;
}

.section{display:none;}
.section.active{display:block;}

label{
display:block;
margin-top:14px;
font-weight:600;
}

label span{
color:red;
}

input, select{
width:100%;
padding:12px;
margin-top:6px;
margin-bottom:8px;
border:none;
border-radius:10px;
background:#faf5ff;
box-sizing:border-box;
}

body.dark input,
body.dark select{
background:#444;
color:white;
}

button{
width:100%;
padding:10px;
margin-top:15px;
border:none;
border-radius:8px;
font-size:16px;
background:#6a00ff;
color:white;
cursor:pointer;
}

#timerBox{
background:#fff3cd;
color:#856404;
padding:10px;
border-radius:10px;
font-weight:bold;
text-align:center;
margin-bottom:10px;
}

#qImg{
width:100%;
border-radius:10px;
margin:10px 0;
}

#options button{
background:#fff;
color:#000;
margin-top:8px;
}

#options button.locked{
background:#ccc;
pointer-events:none;
}

.btn-row{
display:flex;
gap:10px;
}

#darkToggle{
position:fixed;
top:10px;
right:10px;
border:none;
padding:10px;
border-radius:50%;
cursor:pointer;
}
.title-text{
  font-size:26px;          /* slim width */
  font-weight:700;
  text-align:center;

  background: linear-gradient(
    270deg,
    #ff4d8d,
    #ff77a9,
    #ff9ecf,
    #ff4d8d
  );
  background-size:600% 600%;
  -webkit-background-clip:text;
  color:transparent;

  animation: pinkGradient 6s ease infinite;
}
.hornbill-img{
  width:34px;      /* image size control */
  height:auto;
  animation: hornFloat 2.5s ease-in-out infinite;
}

.hornbill-img.left{
  transform: rotate(-5deg);
}

.hornbill-img.right{
  transform: rotate(5deg);
}
/* ===== Hornbill Hover Animation ===== */
.hornbill-img{
  width:34px;
  height:auto;
  transition:
    transform 0.4s ease,
    filter 0.4s ease;
  cursor:pointer;
}

/* Hover effect */
.hornbill-img:hover{
  transform: scale(1.25) rotate(8deg) translateY(-4px);
  filter: drop-shadow(0 6px 14px rgba(255, 77, 141, 0.6));
}

/* Right side hornbill opposite tilt */
.hornbill-img.right:hover{
  transform: scale(1.25) rotate(-8deg) translateY(-4px);
}
/* ===== QUIZ OPTIONS VISIBLE FIX ===== */
#options{  
  margin-top:15px;  
  display:block;  
}  
  
#options button{  
  display:block;  
  width:100%;  
  margin-bottom:10px;  
  padding:12px;  
  border:none;  
  border-radius:10px;  
  background:#ffffff;  
  color:#000;  
  font-size:16px;  
  cursor:pointer;  
}
.img-box {
  position: relative;
  width: 100%;
}

.img-box img {
  width: 100%;
  border-radius: 12px;
}

#photoCredit {
  position: absolute;
  bottom: 8px;
  right: 10px;   /* right corner */
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
}
.img-box{
  position: relative;
  width: 100%;
  margin: 10px 0;
}

.img-box img{
  width: 100%;
  border-radius: 14px;
  display: block;
}



/* 🌈🌈 RAINBOW PHOTO CREDIT 🌈🌈 */

.photo-credit {
  position: absolute;
  bottom: 12px;
  right: 12px;

  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;

  /* 🌈 Rainbow Text */
  background: linear-gradient(
    90deg,
    red,
    orange,
    yellow,
    green,
    cyan,
    blue,
    violet,
    red
  );
  background-size: 300% 300%;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  border: 2px solid rgba(255,255,255,0.7);
  border-radius: 20px;

  backdrop-filter: blur(6px);
  background-color: rgba(0,0,0,0.45);

  animation: rainbowText 4s linear infinite,
             glowPulse 2s ease-in-out infinite;

  box-shadow: 0 0 10px rgba(255,255,255,0.5);
}

/* 🌈 Text animation */
@keyframes rainbowText {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* ✨ Glow pulse */
@keyframes glowPulse {
  0% {
    box-shadow: 0 0 8px rgba(255,255,255,0.4);
  }
  100% {
    box-shadow: 0 0 18px rgba(255,255,255,0.9);
  }
}
/* 🌈 FORCE RAINBOW PHOTO CREDIT (ID BASED) 🌈 */
#photoCredit{
  position: absolute;
  bottom: 12px;
  right: 12px;

  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;

  background: linear-gradient(
    90deg,
    red,
    orange,
    yellow,
    lime,
    cyan,
    blue,
    violet,
    red
  );
  background-size: 400% 400%;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  border: 2px solid rgba(255,255,255,0.7);
  border-radius: 20px;

  backdrop-filter: blur(8px);
  background-color: rgba(0,0,0,0.55);

  animation: rainbowText 3s linear infinite,
             glowPulse 1.8s ease-in-out infinite;

  box-shadow: 0 0 14px rgba(255,255,255,0.9);
}
/* 📷 CAMERA ICON FIX */
#photoCredit .cam{
  -webkit-text-fill-color: white;
  color: white;
  font-size: 14px;
  margin-right: 6px;
  text-shadow: 0 0 6px rgba(255,255,255,0.9);
}

/* 🌈 Rainbow text only for name */
#photoCredit .credit-text{
  background: linear-gradient(
    90deg,
    red,
    orange,
    yellow,
    lime,
    cyan,
    blue,
    violet,
    red
  );
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: rainbowText 3s linear infinite;
}
/* ▶️ START QUIZ BUTTON – INSIDE ORANGE CARD */
#startQuizBtn{
  position: absolute;
  top: 12px;
  right: 12px;

  width: auto;
  padding: 8px 14px;

  font-size: 13px;
  font-weight: 700;

  background: linear-gradient(135deg, #ff0066, #ff8c00);
  color: #fff;

  border-radius: 18px;
  border: none;

  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  z-index: 5;
}
#skippedCount{
  font-size:14px;
  font-weight:600;
  color:#5a2d00;
  margin-bottom:8px;
}

/* 🌈 RAINBOW SKIPPED BADGE */
.skipped-badge{
  position: absolute;
  top: 14px;
  left: 14px;

  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1.2px;

  padding: 6px 14px;
  border-radius: 18px;

  /* 🌈 Rainbow background */
  background: linear-gradient(
    270deg,
    red,
    orange,
    yellow,
    lime,
    cyan,
    blue,
    violet,
    red
  );
  background-size: 600% 600%;

  color: white;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);

  animation:
    rainbowMove 4s linear infinite,
    badgePulse 1.5s ease-in-out infinite;

  box-shadow: 0 0 18px rgba(255,255,255,0.9);
  z-index: 6;
}

/* 🌈 Rainbow move */
@keyframes rainbowMove {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* ✨ Pulse glow */
@keyframes badgePulse {
  from {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(255,255,255,0.6);
  }
  to {
    transform: scale(1.1);
    box-shadow: 0 0 22px rgba(255,255,255,1);
  }
}
.card-footer{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 8px;
  border-top: 1px dashed rgba(0,0,0,0.25);
  font-size: 13px;
}

/* LEFT SIDE */
.footer-left{
  font-weight: 700;
  background: linear-gradient(90deg,#ff512f,#dd2476);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* RIGHT SIDE */
.footer-right{
  font-weight: 600;
  background: linear-gradient(90deg,#1d2671,#c33764);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#skippedList{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:10px 0;
}

.skipped-item{
  padding:6px 12px;
  border-radius:20px;
  cursor:pointer;
  font-size:13px;
  font-weight:bold;
  color:white;
  background:linear-gradient(135deg,#ff2d8a,#ff77c8);
  box-shadow:0 0 12px rgba(255,45,138,0.9);
}
.pledge-text{
  background: rgba(255,255,255,0.4);
  padding: 15px;
  border-radius: 12px;
  font-size: 16px;
  line-height: 1.6;
}

.pledge-check{
  font-size: 15px;
}

#submitBtn:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}
.pledge-agree{
  display: inline-flex;     /* ⭐ inline = text सोबत */
  align-items: center;
  gap: 8px;                 /* checkbox & text gap */
  margin-top: 10px;
  font-size: 15px;
}

.pledge-agree input{
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.pledge-agree label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
}
.footer {
  text-align: center;
  font-size: 14px;
  margin-top: 12px;
  font-weight: 500;
  color: #c97b7b; /* 🔴 EXACT BNHS text color */
}

.footer a {
  color: #c97b7b; /* email पण same color */
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}
/* ONLY color change – no font, no layout change */
.footer,
.footer a,
.footer span {
  color: #4a148c !important;  /* Dark Purple */
}