:root{
  --deep:#012E40;
  --dark:#024959;
  --mid:#026773;
  --teal:#3CA6A6;
  --cream:#F2E3D5;
  --cyan:#00E5FF;
  --feedback:#0a3442;
}
*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  background:var(--deep);
  color:var(--cream);
  font-family:Montserrat,Arial,sans-serif;
}
button{font:inherit}
.screen{
  display:none;
  min-height:100vh;
  padding:32px;
  align-items:center;
  justify-content:center;
  text-align:center;
  flex-direction:column;
}
.screen.active{display:flex;animation:screenIn .48s ease}
.brand{
  font-family:Audiowide,sans-serif;
  font-size:clamp(28px,5vw,54px);
  color:var(--cyan);
  letter-spacing:.04em;
}
.brand span{
  font-family:"Lucida Handwriting","Segoe Script",cursive;
  font-style:italic;
  font-size:.7em;
  letter-spacing:0;
  margin-left:.08em;
}
.eyebrow{
  color:var(--teal);
  font-weight:800;
  letter-spacing:.18em;
}
.screen h1{
  max-width:900px;
  font-size:clamp(30px,5vw,64px);
  line-height:1.05;
  margin:12px 0;
}
.screen p{font-size:18px}
.primary{
  border:0;
  border-radius:10px;
  padding:16px 28px;
  background:var(--cyan);
  color:var(--deep);
  font-weight:800;
  cursor:pointer;
  margin-top:22px;
  transition:transform .2s ease,box-shadow .2s ease;
}
.primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px #00e5ff33}

.game-header{
  width:min(100%,1000px);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:28px;
  font-weight:800;
}
.timer{
  font-size:42px;
  color:var(--cyan);
  min-width:70px;
}
.question-card{
  width:min(100%,1000px);
  background:var(--dark);
  border:1px solid var(--mid);
  border-radius:18px;
  padding:34px;
  box-shadow:0 16px 45px #0005;
  overflow:hidden;
  position:relative;
}
.question-card p{
  font-size:clamp(24px,3.5vw,42px);
  font-weight:800;
  line-height:1.15;
  margin:0 0 28px;
}
.answers{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.answer{
  border:1px solid var(--teal);
  background:var(--mid);
  color:var(--cream);
  border-radius:10px;
  padding:18px;
  text-align:left;
  cursor:pointer;
  font-weight:700;
  opacity:0;
  transform:translateY(18px);
  transition:filter .2s ease,transform .2s ease,border-color .2s ease;
}
.answers.reveal .answer{animation:answerIn .38s ease forwards}
.answers.reveal .answer:nth-child(1){animation-delay:.1s}
.answers.reveal .answer:nth-child(2){animation-delay:.18s}
.answers.reveal .answer:nth-child(3){animation-delay:.26s}
.answers.reveal .answer:nth-child(4){animation-delay:.34s}
.answer:hover{
  border-color:var(--cyan);
  filter:brightness(1.08);
  transform:translateY(-3px);
}
.answer.correct{background:#1d7a68;animation:correctPop .42s ease}
.answer.wrong{background:#8b3f4a;animation:wrongShake .38s ease}
.answer:disabled{cursor:default}

.feedback{
  width:min(100%,1000px);
  margin:16px 0 4px;
  padding:18px 22px;
  border:1px solid var(--teal);
  border-radius:14px;
  text-align:left;
  background:var(--feedback);
  animation:feedbackIn .4s ease;
  box-shadow:0 10px 28px #0003;
}
.feedback.correct{border-color:#3ca67d}
.feedback.wrong{border-color:#c36a78}
.feedback.timeout{border-color:#b99b61}

.feedback-badge{
  display:inline-block;
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  color:var(--deep);
  background:var(--cyan);
  border-radius:999px;
  padding:6px 9px;
  margin-bottom:7px;
}
.feedback.correct .feedback-badge{background:#74d7ad}
.feedback.wrong .feedback-badge{background:#e38a98}
.feedback.timeout .feedback-badge{background:#e2c783}

.feedback-title{
  font-weight:800;
  font-size:18px;
  margin-bottom:5px;
}
.feedback-text{
  font-size:15px!important;
  line-height:1.55;
  margin:0;
  color:#e9e2da;
}

.next-hint{
  font-size:11px;
  letter-spacing:.2em;
  font-weight:800;
  color:var(--teal);
  min-height:16px;
  margin-top:10px;
}
.hidden{display:none!important}

.transition-fx{
  position:fixed;
  inset:0;
  background:var(--cyan);
  z-index:90;
  pointer-events:none;
  transform:translateX(-105%);
  opacity:0;
}
.transition-fx.play{animation:tvWipe .62s ease}

.question-card.enter{animation:cardIn .58s ease}
.timer.counting{animation:timerPulse 1s ease-in-out infinite}
.timer.danger{
  color:var(--cream);
  animation:timerDanger .48s ease-in-out infinite;
}

.countdown-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  background:radial-gradient(circle,#026773 0,#012E40 55%,#001c28 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
}
.countdown-label{
  font-size:18px;
  letter-spacing:.35em;
  font-weight:800;
  color:var(--teal);
}
#countdownNumber{
  font-family:Audiowide,sans-serif;
  font-size:clamp(110px,24vw,280px);
  line-height:.95;
  color:var(--cyan);
  text-shadow:0 0 35px #00e5ff77;
  animation:countPop .75s ease;
}
#countdownNumber.go{font-size:clamp(70px,14vw,170px)}
.countdown-sub{
  font-family:Audiowide,sans-serif;
  font-size:13px;
  letter-spacing:.18em;
}
.result-score{
  font-family:Audiowide,sans-serif;
  font-size:clamp(70px,13vw,150px);
  color:var(--cyan);
  text-shadow:0 0 30px #00e5ff55;
  animation:scoreIn .7s ease;
}

@keyframes screenIn{
  from{opacity:0;transform:scale(1.025)}
  to{opacity:1;transform:none}
}
@keyframes tvWipe{
  0%{transform:translateX(-105%);opacity:1}
  45%{transform:translateX(0);opacity:1}
  100%{transform:translateX(105%);opacity:0}
}
@keyframes cardIn{
  from{opacity:0;transform:translateY(28px) scale(.97)}
  to{opacity:1;transform:none}
}
@keyframes answerIn{to{opacity:1;transform:none}}
@keyframes correctPop{
  40%{transform:scale(1.035)}
  100%{transform:scale(1)}
}
@keyframes wrongShake{
  20%,60%{transform:translateX(-6px)}
  40%,80%{transform:translateX(6px)}
  100%{transform:none}
}
@keyframes feedbackIn{
  from{opacity:0;transform:translateY(12px) scale(.98)}
  to{opacity:1;transform:none}
}
@keyframes timerPulse{50%{transform:scale(1.06)}}
@keyframes timerDanger{50%{transform:scale(1.14)}}
@keyframes countPop{
  0%{opacity:0;transform:scale(1.45)}
  35%{opacity:1;transform:scale(.92)}
  70%{transform:scale(1.05)}
  100%{transform:scale(1)}
}
@keyframes scoreIn{
  from{opacity:0;transform:scale(.5)}
  to{opacity:1;transform:scale(1)}
}

@media(max-width:650px){
  .screen{padding:20px}
  .game-header{font-size:12px}
  .timer{font-size:34px}
  .question-card{padding:22px}
  .answers{grid-template-columns:1fr}
  .feedback{padding:16px}
}