:root {
  --bg1: #6d28d9;
  --bg2: #db2777;
  --bg3: #2563eb;
  --card: rgba(255, 255, 255, 0.14);
  --card-solid: #ffffff;
  --ink: #1e1b4b;
  --white: #ffffff;
  --a: #ef4444; /* red    */
  --b: #3b82f6; /* blue   */
  --c: #f59e0b; /* amber  */
  --d: #10b981; /* green  */
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  --radius: 22px;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  color: var(--white);
  background: linear-gradient(130deg, var(--bg1), var(--bg2), var(--bg3));
  background-size: 260% 260%;
  animation: drift 18s ease infinite;
  overflow-x: hidden;
}

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

.wrap { max-width: 1200px; margin: 0 auto; padding: 24px; }

.brand {
  font-size: clamp(28px, 5vw, 64px);
  font-weight: 900;
  letter-spacing: 1px;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
}
.brand .spark { display: inline-block; animation: pop 2.2s ease-in-out infinite; }
@keyframes pop { 0%,100%{transform:scale(1) rotate(0)} 50%{transform:scale(1.25) rotate(-8deg)} }

.card {
  background: var(--card);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}

.btn {
  border: none;
  border-radius: 999px;
  padding: 16px 30px;
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
  color: var(--white);
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  box-shadow: 0 8px 0 rgba(0,0,0,0.18);
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:active { transform: translateY(4px); box-shadow: 0 4px 0 rgba(0,0,0,0.18); }
.btn.secondary { background: linear-gradient(135deg, #3b82f6, #6d28d9); }
.btn.ghost { background: rgba(255,255,255,0.2); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.choice {
  display: flex; align-items: center; gap: 16px;
  border: none; border-radius: 18px;
  padding: 26px; font-size: clamp(18px, 2.4vw, 32px); font-weight: 800;
  color: #fff; text-align: left; cursor: pointer;
  box-shadow: 0 10px 0 rgba(0,0,0,0.18);
  transition: transform .1s ease, filter .1s ease, opacity .2s ease;
}
.choice .badge {
  width: 46px; height: 46px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 12px; background: rgba(0,0,0,0.22); font-size: 26px;
}
.choice[data-i="0"] { background: var(--a); }
.choice[data-i="1"] { background: var(--b); }
.choice[data-i="2"] { background: var(--c); }
.choice[data-i="3"] { background: var(--d); }
.choice:active { transform: translateY(4px); }
.choice.dim { opacity: .35; filter: grayscale(0.4); }
.choice.correct { outline: 6px solid #fff; transform: scale(1.03); }

.timerbar { height: 18px; border-radius: 999px; background: rgba(0,0,0,0.25); overflow: hidden; }
.timerbar > i { display:block; height:100%; width:100%; background: linear-gradient(90deg,#10b981,#f59e0b,#ef4444); transition: width .25s linear; }

.pill { display:inline-block; padding:6px 16px; border-radius:999px; background:rgba(0,0,0,0.25); font-weight:800; }

.pop-in { animation: popIn .35s cubic-bezier(.18,.89,.32,1.28) both; }
@keyframes popIn { from { transform: scale(.7); opacity: 0 } to { transform: scale(1); opacity: 1 } }

.shake { animation: shake .4s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-10px)} 75%{transform:translateX(10px)} }