:root{
  --bg1:#4f46e5; --bg2:#f59e0b; --bg3:#ec4899; --bg4:#14b8a6;
  --text:#131316; --muted:#6b7280; --card:#fffdf8;
  --accent:#f97316; --accent2:#facc15; --good:#10b981; --bad:#ef4444;
  --ring:#e5e7eb;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Fredoka',sans-serif;color:var(--text);background:#fff}
.section{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;text-align:center;padding:20px;position:relative;overflow:hidden}
.splash{color:white;background:linear-gradient(120deg,var(--bg1),var(--bg2),var(--bg3),var(--bg4));background-size:300% 300%;animation:rotateGradient 15s ease infinite}
@keyframes rotateGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.splash-inner{max-width:680px}
.brand{font-size:clamp(36px,8vw,64px);font-weight:700;margin-bottom:10px}
.tag{font-size:clamp(16px,3.5vw,20px);margin-bottom:22px}
.btn{padding:14px 24px;border:none;border-radius:999px;font-weight:700;cursor:pointer;transition:transform .1s}
.btn.cta,.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent2));color:white;box-shadow:0 8px 24px rgba(0,0,0,.18);animation:pulseGlow 2s infinite}
.btn.big{font-size:1.2rem;padding:16px 28px}
.btn:active{transform:scale(.96)}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 18px rgba(250,204,21,.6);transform:scale(1)}50%{box-shadow:0 0 36px rgba(250,204,21,.9);transform:scale(1.04)}}
.hidden{display:none!important}

.card{background:var(--card);border-radius:16px;padding:18px;box-shadow:0 8px 28px rgba(0,0,0,.08);max-width:760px;width:100%}
.section-title{font-size:26px;margin-bottom:12px}
.lead{font-size:1rem;margin:6px 0 14px}

#questions{display:grid;gap:14px;max-width:760px;width:100%}
.qcard{background:white;border-radius:14px;padding:14px;border:1px solid #f1f5f9;box-shadow:0 6px 18px rgba(0,0,0,.05)}
.qtop{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.qtitle{font-size:18px;margin:0;text-align:left}
.timerWrap{position:relative;width:44px;height:44px}
.timerRing{width:44px;height:44px;border-radius:50%;background:conic-gradient(#10b981 0deg,#e5e7eb 0deg)}
.timerNum{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.answer{padding:14px;border-radius:12px;border:2px solid #e5e7eb;background:#fff7ed;font-weight:700;cursor:pointer}
.answer.selected{background:#ecfeff;border-color:#06b6d4;box-shadow:0 0 0 3px rgba(6,182,212,.25)}
.answer.locked{opacity:.55;pointer-events:none}
.finish{margin-top:14px}

.score{font-size:28px;font-weight:700;margin:10px 0}
.review-list{display:grid;gap:12px;margin-top:10px;text-align:left}
.review{background:#fff;border:1px solid #f1f5f9;border-left:6px solid #e5e7eb;padding:12px;border-radius:10px}
.review.good{border-left-color:var(--good)}
.review.bad{border-left-color:var(--bad)}

.leaders{margin-top:18px;text-align:left}
.leaders-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.hint{font-size:.9rem;color:var(--muted)}
.board{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.board li{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid #f1f5f9;border-radius:10px;padding:10px}
.place{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font-weight:700;color:#fff}
.gold{background:linear-gradient(135deg,#f59e0b,#facc15)}
.silver{background:linear-gradient(135deg,#9ca3af,#e5e7eb)}
.bronze{background:linear-gradient(135deg,#b45309,#f59e0b)}
.user{flex:1;margin-left:10px}
.pts{font-weight:700}

.badges{margin-top:16px;text-align:left}
.badge-row{display:flex;gap:8px;flex-wrap:wrap}
.badge{background:#fff;border:1px solid #f1f5f9;border-radius:999px;padding:8px 12px;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.05)}
.share-actions{display:flex;gap:12px;justify-content:center;margin-top:14px}
.btn.share,.btn.invite{background:#3b82f6;color:white}

.confetti{position:absolute;inset:0;pointer-events:none}