:root{
  --bg:#0b0c0d;
  --text:#fff9ec;
  --card-bg: rgba(214,168,0,0.06);
  --glass: rgba(255,255,255,0.04);
  --accent:#ffd54f; /* brighter golden-yellow */
  --accent-2:#ffcc33;
  --muted: #f0e8d0;
  --option-text:#0b0c0d;
}
*{box-sizing:border-box}
html,body{height:100%}
body,
body{
  margin:0; font-family:Poppins, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: linear-gradient(180deg,var(--bg) 0%, #111214 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.app-bg{min-height:100vh;display:flex;flex-direction:column;align-items:center}

/* Animated background (inspired by oathnet.org warm gradient vibe) */
.bg-animated{background-image:
    radial-gradient(800px 480px at 8% 18%, rgba(255,205,80,0.14), transparent 18%),
    radial-gradient(600px 360px at 92% 78%, rgba(255,150,30,0.12), transparent 14%),
    radial-gradient(420px 280px at 60% 30%, rgba(140,80,200,0.06), transparent 12%),
    linear-gradient(150deg,#05040a 0%, #0b0c0d 18%, #241233 55%, #0f1113 100%);
  background-size: 120% 120%, 100% 100%, 90% 90%, auto;
  animation: bgShift 18s ease-in-out infinite alternate, bgPulse 10s ease-in-out infinite;
}
@keyframes bgShift{
  0%{background-position:0% 0%,100% 100%,50% 50%,0 0}
  50%{background-position:6% 4%,92% 84%,60% 40%,0 0}
  100%{background-position:12% 8%,84% 70%,70% 28%,0 0}
}
@keyframes bgPulse{0%{filter:brightness(0.95) saturate(1)}50%{filter:brightness(1.06) saturate(1.06)}100%{filter:brightness(0.98) saturate(1)}}
.header{padding:36px 16px 0;text-align:center}
.header h1{margin:0;font-size:28px;letter-spacing:0.5px;color:var(--accent-2);text-shadow:0 2px 12px rgba(214,168,0,0.08)}
.subtitle{color:var(--muted);margin-top:6px}
.container{width:100%;max-width:760px;padding:32px}
.card{background:linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:14px;padding:28px;margin:18px 0;box-shadow:0 12px 40px rgba(214,168,0,0.08), 0 8px 30px rgba(0,0,0,0.6);backdrop-filter: blur(10px);
  border:1px solid rgba(255,204,51,0.10);transform:translateZ(0);position:relative;z-index:2}

/* Card entrance micro-animation */
.card{transition:transform 420ms cubic-bezier(.2,.9,.2,1), box-shadow 300ms}
.card:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(255,204,51,0.06)}
.hidden{display:none}

.btn{padding:10px 16px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--accent-2);cursor:pointer;font-weight:700}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:var(--option-text);border:none;box-shadow:0 8px 26px rgba(255,204,51,0.12)}
.btn.ghost{border:1px solid rgba(255,255,255,0.04);color:var(--muted)}
.controls{margin-top:18px;display:flex;gap:12px}

.progress-wrap{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.progress{flex:1;height:12px;background:rgba(255,255,255,0.03);border-radius:999px;margin-right:12px;overflow:hidden}
.progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--accent-2),var(--accent));transition:width 700ms cubic-bezier(.2,.8,.2,1);box-shadow:0 6px 18px rgba(255,204,51,0.12)}
.progress-bar:after{content:'';display:block;height:100%;width:18px;margin-left:-18px;background:linear-gradient(90deg, rgba(255,255,255,0.16), rgba(255,255,255,0));opacity:0.18}
.qcount{min-width:64px;text-align:right;color:var(--muted);font-weight:600}

.question-area h3{margin:0 0 18px 0;font-size:22px;color:#ffffff;font-weight:800;letter-spacing:0.2px}
.options{display:grid;grid-template-columns:1fr;gap:12px}
.option{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(214,168,0,0.02));padding:14px 16px;border-radius:12px;border:1px solid rgba(255,204,51,0.06);cursor:pointer;transition:transform 220ms cubic-bezier(.2,.9,.2,1), background 180ms ease, box-shadow 220ms;color:#ffffff;font-weight:700;display:flex;align-items:center;gap:12px}
.option:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 18px 40px rgba(255,204,51,0.08);background:linear-gradient(90deg, rgba(255,204,51,0.18), rgba(255,255,255,0.02));color:#111}

/* small badge with option index */
.option .badge{width:28px;height:28px;border-radius:8px;background:rgba(0,0,0,0.12);display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent-2);flex:0 0 28px}
.option:hover .badge{background:rgba(0,0,0,0.06);color:#111}
.option.disabled{pointer-events:none;opacity:0.95}

.option.correct{background:linear-gradient(90deg,#0aff8a22,#0aff8a33);border-color:rgba(0,255,138,0.18);animation:correctPulse 700ms ease;color:#ffffff;box-shadow:0 14px 40px rgba(0,255,138,0.06);transform:scale(1.02)}
.option.wrong{background:linear-gradient(90deg,#ff375f22,#ff375f33);border-color:rgba(255,55,95,0.18);animation:shake 700ms cubic-bezier(.36,.07,.19,.97);color:#ffffff;box-shadow:0 14px 40px rgba(255,55,95,0.06)}

/* subtle entrance for question area */
.question-area.enter{animation:slideFade .48s cubic-bezier(.2,.8,.2,1)}

/* Canvas for particles */
#bg-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;mix-blend-mode:screen}

.app-bg{position:relative;z-index:1}

@keyframes correctPulse{0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}}

.enter{animation:slideFade .48s cubic-bezier(.2,.8,.2,1)}
@keyframes slideFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.result-emoji{font-size:56px;text-align:center;margin-bottom:6px}
.result-message{margin-top:12px;color:var(--muted);min-height:54px;display:flex;align-items:center;justify-content:center}

.header h1{color:var(--accent-2);text-shadow:0 6px 26px rgba(255,204,51,0.12)}
.subtitle{color:var(--muted);opacity:0.95}

.footer{text-align:center;color:rgba(255,255,255,0.06);padding:24px 8px 48px}

/* Responsive */
@media (min-width:720px){.options{grid-template-columns:1fr 1fr}.container{padding:36px}}