:root{
  --bg:#3d69cf;
  --glow:#2b4570;

  --text:#e5e7eb;
  --muted: rgba(229,231,235,.80);

  --pillBg: rgba(255,255,255,.10);
  --pillBorder: rgba(255,255,255,.14);

  --timerFill: rgba(59,130,246,.95);

  --correctBg: rgba(22,163,74,.22);
  --correctBorder: rgba(22,163,74,.70);

  --wrongBg: rgba(239,68,68,.20);
  --wrongBorder: rgba(239,68,68,.70);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  min-height:100vh;
  padding:18px;
  color:var(--text);
  background: radial-gradient(1200px 600px at 50% 20%, var(--glow) 0%, var(--bg) 55%);
  display:flex;
  justify-content:center;
  align-items:center;
  overflow-x:hidden;
}


#confetti{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
}

/* ===== Opening ===== */
.opening{
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(1200px 600px at 50% 20%, var(--glow) 0%, var(--bg) 55%);
  z-index: 9998;
  overflow: visible;
}

.title{
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align:center;
  line-height:0;
  margin-top:-6vh;
}

.word{
  display:block;
  font-family: 'Bangers', sans-serif;
  font-size: clamp(3.5rem, 30vw, 30rem);
  line-height:0;
  color: #ffe600;
  text-shadow:
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000,
     5px  5px 0 #c70000,
     8px  8px 10px rgba(0,0,0,0.5);
  opacity: 0;
  animation: punchOut 700ms cubic-bezier(.2,.9,.2,1) forwards;
  margin:0;
  padding:0;
}
.w1{ animation-delay: 400ms; }
.w2{ animation-delay: 1200ms; }
.w3{ animation-delay: 2000ms; }

/* ✅ Play Screen (after opening) */
.playScreen{
  position: fixed;
  inset: 0;
  z-index: 9997; /* below opening, above app */
  display: none;
  justify-content: center;
  align-items: center;
  background: radial-gradient(1200px 600px at 50% 20%, var(--glow) 0%, var(--bg) 55%);
}

.playInner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 18px;
  margin-top: -6vh; /* match your upward shift */
}

.playTop{
  font-family: 'Bangers', sans-serif;
  font-size: clamp(3rem, 10vw, 7rem);
  color: #ffe600;
  text-shadow:
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000,
     5px  5px 0 #c70000,
     8px  8px 10px rgba(0,0,0,0.5);
  line-height: 1;
}

.playBtn{
  padding: 14px 34px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: .06em;
  color: white;
  background: #22c55e;
  box-shadow: 0 14px 44px rgba(0,0,0,.26);
}
.playBtn:hover{ filter: brightness(1.06); }

/* ===== Splash Screens (ROUND + TOPIC) ===== */
#roundNumber{ display:none; }
#section{ display:none; }

/* ===== App Layout ===== */
#app{ display:none; width:100%; }

.wrap{
  width:100%;
  max-width: 760px;
  margin: 0 auto;

  min-height: calc(100vh - 36px);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  gap: clamp(14px, 2.4vw, 18px);

  padding-top: clamp(10px, 6vh, 70px);
  padding-bottom: clamp(26px, 6vh, 70px);
  overflow: visible;
}

/* Timer pill */
.timerPill{
  width: min(680px, 92vw);
  height: clamp(14px, 2.6vw, 18px);
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid var(--pillBorder);
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.20);
}
.timerPill .fill{
  height:100%;
  width:100%;
  transform-origin:left center;
  transform: scaleX(1);
  background: var(--timerFill);
}
.timerLabel{
  margin-top: -6px;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--muted);
  font-size: clamp(.9rem, 2.3vw, 1.1rem);
  text-align:center;
}

/* Question pill */
.questionPill{
  width: min(820px, 96vw);
  padding: clamp(20px, 4.4vw, 34px) clamp(20px, 4.8vw, 36px);
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid var(--pillBorder);
  box-shadow: 0 14px 44px rgba(0,0,0,.26);

  text-align:center;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1.10;
  font-size: clamp(1.8rem, 5.7vw, 3.45rem);
}

/* Answer pills */
.choices{
  width: min(760px, 94vw);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: clamp(12px, 2.2vw, 16px);
}
button.choice{
  width:100%;
  padding: clamp(16px, 3.6vw, 22px) clamp(18px, 4.2vw, 28px);
  border-radius: 999px;
  text-align:center;

  background: rgba(255,255,255,.09);
  border: 1px solid var(--pillBorder);
  color: var(--text);

  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .02em;
  font-size: clamp(1.15rem, 3.6vw, 2.35rem);

  cursor:pointer;
  transition: background .15s ease, border-color .15s ease, filter .15s ease;
  will-change: transform;
}
button.choice:hover{
  background: rgba(255,255,255,.12);
  filter: brightness(1.04);
}
button.choice[disabled]{ cursor:default; opacity:.92 }

button.choice.correct{
  background: var(--correctBg);
  border-color: var(--correctBorder);
}
button.choice.wrong{
  background: var(--wrongBg);
  border-color: var(--wrongBorder);
}

/* End screen */
.footer{
  display:none;
  width: min(760px, 94vw);
  justify-content:center;
  align-items:center;
  flex-direction:column;
  gap: 12px;
}
#feedback{
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 800;
  color: var(--muted);
  font-size: clamp(1rem, 2.6vw, 1.2rem);
  min-height: 22px;
  text-align:center;
}
.btnrow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
#restartBtn,#shareBtn{
  padding:12px 18px;
  border:none;
  border-radius:999px;
  font-size:14px;
  cursor:pointer;
  color:white;
  display:none;
  white-space:nowrap;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 800;
}
#restartBtn{ background:#64748b; }
#shareBtn{ background:#22c55e; }
#restartBtn:hover,#shareBtn:hover{ filter:brightness(1.06); }

#results{
  display:none;
  width: min(760px, 94vw);
  text-align:center;
  white-space:pre-wrap;
  color: var(--muted);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1rem, 2.6vw, 1.2rem);
}

/* ===== Animations ===== */
@keyframes punchOut {
  0%   {opacity:0; transform:scale(0.2)}
  30%  {opacity:1; transform:scale(1.5)}
  50%  {transform:scale(1)}
  80%  {opacity:1}
  100% {opacity:0; transform:scale(0.8)}
}