#keliMegaQuiz{
  --red:#c91424;
  --darkred:#720711;
  --yellow:#ffc928;
  --black:#111318;
  --green:#159447;
  --light:#f5f5f7;
  font-family:"Noto Sans Malayalam","Nirmala UI",Arial,sans-serif;
  max-width:860px;
  margin:20px auto;
  color:#17181d;
}

#keliMegaQuiz *{box-sizing:border-box}

.kq-card{
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 15px 50px rgba(0,0,0,.14);
}

/* HOME */

.kq-header{
  background:linear-gradient(135deg,#730711 0%,#c91424 55%,#ed9c18 100%);
  color:#fff;
  padding:32px 26px;
  position:relative;
  overflow:hidden;
}

.kq-header:after{
  content:"";
  position:absolute;
  width:300px;
  height:300px;
  border-radius:50%;
  right:-130px;
  top:-140px;
  background:rgba(255,255,255,.08);
}

.kq-logo{
  font-size:42px;
  line-height:1;
  margin-bottom:10px;
  position:relative;
  z-index:2;
}

.kq-brand-logos{
  display:flex;
  align-items:center;
  gap:12px;
  height:62px;
  margin:0 0 10px;
  position:relative;
  z-index:2;
}

.kq-brand-logo{
  display:block;
  height:58px;
  width:auto;
  object-fit:contain;
}

.kq-brand-logo-keli{max-width:132px}
.kq-brand-logo-kcw{max-width:66px}

.kq-title{
  font-size:clamp(30px,6vw,50px);
  line-height:1.05;
  font-weight:950;
  margin:0 0 10px;
  position:relative;
  z-index:2;
}

#keliMegaQuiz .kq-header .kq-title{color:#fff!important}

.kq-subtitle{
  margin:0;
  max-width:700px;
  font-size:14px;
  line-height:1.8;
  opacity:.95;
  position:relative;
  z-index:2;
}

.kq-body{
  padding:26px;
}

.kq-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:18px 0;
}

.kq-tag{
  background:#fff3bd;
  border:1px solid #efd36a;
  border-radius:50px;
  padding:7px 12px;
  font-size:12px;
  font-weight:850;
}

.kq-tag.red{
  background:#ffe4e8;
  border-color:#ffc1c8;
  color:#980b16;
}

.kq-round-preview{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:7px;
  margin:20px 0;
}

.kq-round-preview div{
  background:#eeeeF2;
  border-radius:12px;
  padding:11px 4px;
  text-align:center;
  font-size:11px;
  font-weight:900;
}

.kq-round-preview div:first-child{
  background:var(--red);
  color:#fff;
}

.kq-btn{
  width:100%;
  min-height:54px;
  border:0;
  border-radius:15px;
  background:var(--red);
  color:#fff;
  font-family:inherit;
  font-size:17px;
  font-weight:900;
  cursor:pointer;
  transition:.2s;
}

.kq-btn:hover{
  background:var(--darkred);
  transform:translateY(-2px);
}

.kq-note{
  margin-top:15px;
  padding:12px;
  background:#fff9df;
  border-left:4px solid var(--yellow);
  border-radius:8px;
  font-size:12px;
  line-height:1.7;
}

.kq-sound{
  display:flex;
  justify-content:flex-end;
  margin-bottom:12px;
}

.kq-mute{
  border:0;
  background:#17181d;
  color:#fff;
  border-radius:12px;
  padding:8px 12px;
  font-family:inherit;
  font-weight:800;
  cursor:pointer;
}

/* GAME */

.kq-game-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.kq-round-label{
  font-size:16px;
  font-weight:950;
}

.kq-timer{
  min-width:70px;
  padding:9px 12px;
  background:#111318;
  color:#fff;
  text-align:center;
  border-radius:12px;
  font-size:20px;
  font-weight:950;
}

.kq-timer.danger{
  background:#c91424;
  animation:kqPulse .5s infinite alternate;
}

@keyframes kqPulse{
  from{transform:scale(1)}
  to{transform:scale(1.1)}
}

.kq-rounds{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
  margin:17px 0 12px;
}

.kq-round-small{
  background:#eeeeF2;
  color:#777;
  border-radius:9px;
  padding:8px 2px;
  text-align:center;
  font-size:10px;
  font-weight:900;
}

.kq-round-small.active{
  background:var(--red);
  color:#fff;
}

.kq-round-small.done{
  background:#dff5e7;
  color:#13733a;
}

.kq-progress{
  height:9px;
  background:#ececf0;
  border-radius:20px;
  overflow:hidden;
  margin-bottom:20px;
}

.kq-progress-bar{
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--red),var(--yellow));
  transition:.25s;
}

.kq-question-number{
  color:var(--red);
  font-size:12px;
  font-weight:950;
}

.kq-question{
  font-size:clamp(20px,4.5vw,29px);
  line-height:1.5;
  font-weight:950;
  margin:8px 0 20px;
}

.kq-options{
  display:grid;
  gap:11px;
}

.kq-option{
  width:100%;
  min-height:58px;
  border:2px solid #e1e1e6;
  background:#fff;
  border-radius:15px;
  padding:12px 14px;
  text-align:left;
  font-family:inherit;
  font-size:15.5px;
  font-weight:750;
  line-height:1.5;
  cursor:pointer;
  transition:.18s;
}

/* Keep answer text readable when a WordPress theme applies global button styles. */
#keliMegaQuiz .kq-option,
#keliMegaQuiz .kq-option:disabled{
  color:#17181d!important;
  -webkit-text-fill-color:#17181d!important;
  font-size:15.5px!important;
  opacity:1!important;
}

#keliMegaQuiz .kq-option .kq-answer-text{
  color:#17181d!important;
  -webkit-text-fill-color:#17181d!important;
  font:inherit!important;
}

.kq-option:hover{
  border-color:var(--red);
  background:#fff7f8;
}

.kq-option:disabled{
  cursor:default;
}

.kq-letter{
  display:inline-flex;
  width:32px;
  height:32px;
  border-radius:9px;
  background:#eeeeF2;
  align-items:center;
  justify-content:center;
  margin-right:8px;
  font-weight:950;
}

.kq-option.correct{
  background:#e7f8ed;
  border-color:var(--green);
}

.kq-option.correct .kq-letter{
  background:var(--green);
  color:#fff;
}

.kq-option.wrong{
  background:#fff0f1;
  border-color:var(--red);
}

.kq-option.wrong .kq-letter{
  background:var(--red);
  color:#fff;
}

.kq-feedback{
  margin-top:15px;
  padding:14px;
  background:#f4f4f6;
  border-radius:13px;
  font-size:14px;
  line-height:1.6;
}

.kq-card.correctAnim{
  animation:kqCorrect .55s ease;
}

.kq-card.wrongAnim{
  animation:kqWrong .45s ease;
}

@keyframes kqCorrect{
  0%{transform:scale(1)}
  40%{transform:scale(1.025)}
  70%{transform:scale(.99)}
  100%{transform:scale(1)}
}

@keyframes kqWrong{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-8px)}
  40%{transform:translateX(8px)}
  60%{transform:translateX(-5px)}
  80%{transform:translateX(5px)}
}

/* ROUND INTRO */

.kq-intro{
  min-height:580px;
  position:relative;
  overflow:hidden;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
  background:
    radial-gradient(circle at 50% 30%,#df2637 0%,#a20815 42%,#4a0308 100%);
}

.kq-intro:before{
  content:"";
  position:absolute;
  width:370px;
  height:370px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 0 0 35px rgba(255,255,255,.025),
    0 0 0 70px rgba(255,255,255,.02),
    0 0 0 105px rgba(255,255,255,.015);
  animation:kqIntroPulse 3s infinite ease-in-out;
}

@keyframes kqIntroPulse{
  0%,100%{transform:scale(.9);opacity:.45}
  50%{transform:scale(1.08);opacity:1}
}

.kq-intro-content{
  position:relative;
  z-index:5;
}

.kq-intro-top{
  font-size:11px;
  letter-spacing:5px;
  font-weight:900;
  opacity:.72;
  margin-bottom:24px;
}

.kq-round-number{
  font-size:17px;
  letter-spacing:6px;
  font-weight:950;
  color:var(--yellow);
}

.kq-big-round-title{
  font-size:clamp(60px,15vw,115px);
  line-height:.95;
  font-weight:950;
  margin:10px 0 20px;
  color:#fff;
  text-shadow:
    0 5px 0 #710610,
    0 10px 25px rgba(0,0,0,.35);
  animation:kqTitleIn .8s cubic-bezier(.2,.8,.2,1);
}

@keyframes kqTitleIn{
  from{
    opacity:0;
    transform:scale(.55);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

.kq-round-subtitle{
  max-width:600px;
  margin:auto;
  font-size:15px;
  line-height:1.8;
  opacity:.9;
}

.kq-yellow-line{
  width:90px;
  height:4px;
  background:var(--yellow);
  border-radius:20px;
  margin:25px auto;
}

.kq-count{
  font-size:90px;
  line-height:1;
  font-weight:950;
  color:var(--yellow);
  text-shadow:
    0 4px 0 #704500,
    0 10px 30px rgba(0,0,0,.4);
  animation:kqCount .9s infinite;
}

@keyframes kqCount{
  0%{transform:scale(.75);opacity:.45}
  50%{transform:scale(1.15);opacity:1}
  100%{transform:scale(.75);opacity:.45}
}

.kq-go{
  font-size:82px;
  line-height:1;
  font-weight:950;
  color:var(--yellow);
  text-shadow:
    0 4px 0 #704500,
    0 10px 30px rgba(0,0,0,.4);
  animation:kqGo .65s ease-out;
}

@keyframes kqGo{
  0%{
    transform:scale(.3);
    opacity:0;
  }
  60%{
    transform:scale(1.25);
    opacity:1;
  }
  100%{
    transform:scale(1);
  }
}

.kq-intro-info{
  margin-top:20px;
  font-size:12px;
  opacity:.65;
}

.kq-decoration{
  position:absolute;
  color:var(--yellow);
  font-size:27px;
  opacity:.6;
  z-index:2;
  animation:kqFloat 4s infinite ease-in-out;
}

.kq-d1{left:10%;top:17%}
.kq-d2{right:11%;top:25%;animation-delay:.7s}
.kq-d3{left:15%;bottom:17%;animation-delay:1.2s}
.kq-d4{right:15%;bottom:20%;animation-delay:1.8s}

@keyframes kqFloat{
  0%,100%{
    transform:translateY(0) rotate(0);
    opacity:.3;
  }
  50%{
    transform:translateY(-25px) rotate(180deg);
    opacity:.95;
  }
}

/* ROUND BREAK */

.kq-break{
  min-height:580px;
  position:relative;
  overflow:hidden;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
  background:
    radial-gradient(circle at 50% 20%,#e22a39 0%,#980812 43%,#490308 100%);
}

.kq-break-content{
  position:relative;
  z-index:5;
}

.kq-break-trophy{
  font-size:72px;
  animation:kqTrophy 1.1s infinite alternate;
}

@keyframes kqTrophy{
  from{
    transform:translateY(0) rotate(-5deg) scale(1);
  }
  to{
    transform:translateY(-10px) rotate(5deg) scale(1.08);
  }
}

.kq-break-small{
  font-size:12px;
  letter-spacing:4px;
  font-weight:900;
  opacity:.7;
  margin-top:10px;
}

.kq-break-title{
  font-size:clamp(36px,8vw,68px);
  font-weight:950;
  margin:8px 0 18px;
}

.kq-break-score{
  font-size:84px;
  line-height:1;
  font-weight:950;
  color:var(--yellow);
  text-shadow:
    0 4px 0 #704500,
    0 10px 25px rgba(0,0,0,.4);
}

.kq-break-score span{
  font-size:25px;
  color:#fff;
}

.kq-break-label{
  font-size:13px;
  opacity:.75;
}

.kq-total{
  max-width:290px;
  margin:22px auto;
  padding:14px 20px;
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.2);
  border-radius:15px;
  font-size:13px;
}

.kq-total strong{
  display:block;
  color:var(--yellow);
  font-size:27px;
  margin-top:3px;
}

.kq-next-label{
  font-size:13px;
  opacity:.75;
}

.kq-next-label strong{
  display:block;
  color:#fff;
  font-size:24px;
  margin-top:4px;
}

.kq-break-count{
  font-size:58px;
  line-height:1;
  font-weight:950;
  color:var(--yellow);
  margin:15px 0;
}

.kq-confetti{
  position:absolute;
  color:var(--yellow);
  font-size:28px;
  animation:kqFloat 3s infinite ease-in-out;
}

/* FINAL */

.kq-final{
  text-align:center;
}

.kq-final-icon{
  font-size:75px;
}

.kq-final-score{
  font-size:72px;
  line-height:1;
  font-weight:950;
  color:var(--red);
  margin:14px 0 6px;
}

.kq-percentage{
  font-size:21px;
  font-weight:900;
}

.kq-grade{
  font-size:18px;
  font-weight:900;
  margin:18px 0;
}

.kq-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:20px 0;
}

.kq-stat{
  background:#fafafa;
  border:1px solid #e8e8ec;
  border-radius:14px;
  padding:13px 5px;
}

.kq-stat strong{
  display:block;
  font-size:25px;
}

.kq-stat span{
  font-size:12px;
  color:#777;
}

.kq-results{
  background:#fafafa;
  border-radius:15px;
  padding:15px;
  text-align:left;
  margin-bottom:18px;
}

.kq-results div{
  display:flex;
  justify-content:space-between;
  padding:9px 0;
  border-bottom:1px solid #e8e8ec;
  font-size:14px;
  font-weight:750;
}

.kq-results div:last-child{
  border-bottom:0;
}

#keliMegaQuiz .kq-player-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:20px 0 14px;
}

#keliMegaQuiz .kq-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
  font-weight:850;
}

#keliMegaQuiz .kq-field:first-child{
  grid-column:1 / -1;
}

#keliMegaQuiz .kq-field input,
#keliMegaQuiz .kq-field select{
  width:100%;
  min-height:48px;
  border:2px solid #e1e1e6;
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
  color:#17181d;
  font:inherit;
}

#keliMegaQuiz .kq-form-error{
  grid-column:1 / -1;
  color:#b10d1b;
  font-size:13px;
  font-weight:800;
}

#keliLeaderboard{
  max-width:860px;
  margin:16px auto 30px;
  color:#17181d;
  font-family:"Noto Sans Malayalam","Nirmala UI",Arial,sans-serif;
}

#keliLeaderboard .kq-board-card{
  overflow:hidden;
  background:#fff;
  border-radius:20px;
  box-shadow:0 12px 38px rgba(0,0,0,.10);
}

#keliLeaderboard .kq-board-title{
  margin:0;
  padding:17px 20px;
  background:linear-gradient(135deg,#730711 0%,#c91424 65%,#ed9c18 100%);
  color:#fff;
  font-size:20px;
  font-weight:950;
}

#keliMegaQuiz .kq-option .kq-letter{
  color:#17181d!important;
  -webkit-text-fill-color:#17181d!important;
}

#keliLeaderboard .kq-board-scroll{overflow-x:auto}
#keliLeaderboard table{width:100%;border-collapse:collapse;min-width:620px}
#keliLeaderboard th,#keliLeaderboard td{padding:11px 13px;text-align:left;border-bottom:1px solid #ececf0;font-size:13px}
#keliLeaderboard th{background:#fff3bd;font-weight:900}
#keliLeaderboard tbody tr:last-child td{border-bottom:0}
#keliLeaderboard .kq-board-empty{padding:18px 20px;color:#666;font-size:14px}

@media(max-width:550px){

  #keliMegaQuiz{
    margin:8px auto;
  }

  .kq-header{
    padding:23px 18px;
  }

  .kq-brand-logos{height:54px;gap:9px}
  .kq-brand-logo{height:50px}
  .kq-brand-logo-keli{max-width:114px}
  .kq-brand-logo-kcw{max-width:58px}

  .kq-body{
    padding:17px;
  }

  .kq-round-preview{
    gap:4px;
  }

  .kq-round-preview div{
    font-size:9px;
    padding:8px 2px;
  }

  .kq-question{
    font-size:20px;
  }

  .kq-option{
    font-size:14.5px;
  }

  .kq-intro,
  .kq-break{
    min-height:510px;
  }

  .kq-big-round-title{
    font-size:66px;
  }

  .kq-round-subtitle{
    font-size:13px;
  }

  .kq-stats{
    gap:5px;
  }

  #keliMegaQuiz .kq-player-form{
    grid-template-columns:1fr;
  }

  #keliMegaQuiz .kq-field:first-child{
    grid-column:auto;
  }

}