:root {
  --bg: #f7f9ff;
  --card: #ffffff;
  --text: #1f2330;
  --muted: #6b7280;
  --primary: #6d28d9; /* purple */
  --primary-600: #5b21b6;
  --success: #10b981;
  --danger: #ef4444;
  --border: #e5e7eb;
  --shadow: 0 10px 30px rgba(17, 24, 39, 0.1);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Baloo 2', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans,
    Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1400px 700px at 10% -20%, #ffd2ec, transparent),
    radial-gradient(1400px 700px at 90% -20%, #d3e9ff, transparent),
    radial-gradient(1400px 700px at 50% 120%, #ffe7cc, transparent),
    radial-gradient(1400px 700px at -10% 60%, #e6ffe9, transparent), var(--bg);
  color: var(--text);
}

.app-header, .app-footer {
  text-align: center;
  padding: 16px 12px;
}

.subtitle {
  color: var(--muted);
  margin-top: -8px;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 16px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow);
}

.row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.row.inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

label { font-weight: 600; }

select, input[type="number"] {
  width: 100%;
  background: #ffffff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}

.hint { color: var(--muted); }

.actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 8px;
}

.actions.space-between {
  justify-content: space-between;
}

.btn {
  background: #ffffff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
  box-shadow: var(--shadow);
}
.btn svg { margin-right: 6px; }

.btn.primary {
  background: linear-gradient(180deg, var(--primary), var(--primary-600));
  color: #fff;
  border-color: transparent;
}

/* colorful action buttons on results */
.color-review { background: linear-gradient(135deg, #22d3ee, #3b82f6); color: #fff; border-color: transparent; }
.color-review:hover { filter: brightness(1.05); }
.color-restart { background: linear-gradient(135deg, #f472b6, #ec4899); color: #fff; border-color: transparent; }
.color-restart:hover { filter: brightness(1.05); }
.color-home { background: linear-gradient(135deg, #10b981, #22c55e); color: #fff; border-color: transparent; }
.color-home:hover { filter: brightness(1.05); }

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.view { display: none; }
.view.active { display: block; }
.view.fullscreen .card { min-height: 70vh; }

/* consistent vertical spacing between setup screens */
.view + .view { margin-top: 24px; }

/* extra spacing for play screen */
#view-play .card { margin-top: 24px; }

/* Big play button */
.btn.big { font-size: 22px; padding: 18px 28px; border-radius: 18px; }
.btn.primary.big { animation: pulse 1.6s ease-in-out infinite; background-size: 200% 200%; transition: background-position 400ms ease; }
.btn.primary.big:hover { background-position: 100% 0; }

@keyframes pulse {
  0% { transform: translateY(0) scale(1); box-shadow: 0 12px 30px rgba(93, 63, 211, 0.25); }
  50% { transform: translateY(-2px) scale(1.03); box-shadow: 0 16px 40px rgba(93, 63, 211, 0.35); }
  100% { transform: translateY(0) scale(1); box-shadow: 0 12px 30px rgba(93, 63, 211, 0.25); }
}

/* Candy-like animated background */
.bg-candy { position: fixed; inset: 0; overflow: hidden; z-index: -1; }
.bubble { position: absolute; width: 120px; height: 120px; border-radius: 50%; filter: blur(2px); opacity: 0.35; animation: float 12s ease-in-out infinite; }
.b1 { background: #ffd3e2; top: 10%; left: -40px; animation-delay: 0s; }
.b2 { background: #d3f8ff; top: 30%; right: -40px; animation-delay: 2s; }
.b3 { background: #e4ffd3; bottom: 20%; left: 15%; animation-delay: 4s; }
.b4 { background: #f9e2ff; bottom: 5%; right: 20%; animation-delay: 6s; }
.blob { position: absolute; width: 300px; height: 300px; border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%; filter: blur(20px); opacity: 0.25; animation: blob 18s ease-in-out infinite; }
.bl1 { background: linear-gradient(135deg, #a78bfa, #f472b6); top: -80px; right: -60px; }
.bl2 { background: linear-gradient(135deg, #34d399, #60a5fa); bottom: -100px; left: -80px; }
.star { position: absolute; font-size: 20px; color: #f59e0b; opacity: 0.5; animation: twinkle 3s ease-in-out infinite; }
.s1 { top: 20%; left: 10%; }
.s2 { top: 60%; right: 15%; animation-delay: 1s; }
.s3 { bottom: 15%; left: 45%; animation-delay: 2s; }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px) scale(1.02); } }
@keyframes blob { 0%, 100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(20px, -10px) rotate(10deg); } }
@keyframes twinkle { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.2); } }

/* Quiz */
.quiz-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.progressbar { height: 10px; background: rgba(0,0,0,0.06); border-radius: 999px; overflow: hidden; margin-bottom: 12px; width: 100%; max-width: 520px; margin-left: auto; margin-right: auto; }
.progressbar-fill { height: 100%; background: linear-gradient(90deg, #f472b6, #8b5cf6, #22d3ee, #f59e0b); background-size: 200% 200%; animation: gradient-move 3s ease infinite; }
@keyframes gradient-move { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

.timer {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
  box-shadow: var(--shadow);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
}
.timer.hidden { visibility: hidden; }

.timer-svg { position: absolute; }
.timer-bg { fill: none; stroke: #e5e7eb; stroke-width: 6; }
.timer-fg { fill: none; stroke: url(#grad); stroke: #8b5cf6; stroke-linecap: round; stroke-width: 6; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 0.25s linear; }
.timer-text { position: relative; font-weight: 800; }

.question-text {
  font-size: 20px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #111827, #6d28d9);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-align: center;
}

.options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.option {
  text-align: left;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, #ffffff, #fff7ed);
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
  box-shadow: var(--shadow);
}
.option:hover { transform: translateY(-2px); }

.option.correct { border-color: #22c55e; background: #ecfdf5; }
.option.incorrect { border-color: #ef4444; background: #fef2f2; }

.option.correct.flash { animation: correctPulse 600ms ease; }
.option.incorrect.flash { animation: incorrectShake 450ms ease; }
@keyframes correctPulse { 0% { transform: scale(1); } 50% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes incorrectShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.feedback { min-height: 22px; color: var(--muted); margin-top: 8px; }

/* Results */
.metric-label { color: var(--muted); font-size: 14px; }
.metric-value { font-size: 18px; font-weight: 700; }

.score-wrap { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center; }
.score-badge { display: grid; place-items: center; background: linear-gradient(135deg, #a78bfa, #f472b6, #22d3ee); color: #fff; border-radius: 18px; padding: 18px; box-shadow: var(--shadow); }
.score-value { font-size: 28px; font-weight: 900; }
.score-label { opacity: 0.9; font-weight: 700; letter-spacing: 0.3px; }
.score-stats { display: grid; gap: 12px; max-width: 860px; margin: 0 auto; }
.stat-row { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.bar { height: 12px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, #10b981, #22c55e); width: 0%; transition: width 400ms ease; }

.result-quote { text-align: center; margin: 16px auto; font-weight: 800; background: #ffffff; border: 2px solid #e5e7eb; border-radius: 14px; padding: 12px 16px; box-shadow: var(--shadow); max-width: 620px; animation: pop 300ms ease; }
.result-quote.attention { border-color: #f59e0b; }
/* tiered quote styles */
.result-quote.try { background: linear-gradient(135deg, #fff7ed, #fffbeb); border-color: #f59e0b; color: #92400e; }
.result-quote.good { background: linear-gradient(135deg, #ecfeff, #e0f2fe); border-color: #38bdf8; color: #075985; }
.result-quote.great { background: linear-gradient(135deg, #ecfdf5, #d1fae5); border-color: #10b981; color: #065f46; }
.result-quote.perfect { background: linear-gradient(135deg, #fce7f3, #ede9fe); border-color: #a78bfa; color: #6d28d9; }
@keyframes pop { 0% { transform: scale(0.95); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.confetti-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; }

/* Review */
.review-list { display: grid; gap: 10px; }
.review-item { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: #ffffff; box-shadow: var(--shadow); }
.chip-grid { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 520px; margin: 0 auto; }
.chip {
  display: flex; align-items: center; justify-content: center;
  padding: 12px; border-radius: 999px; color: #fff; font-weight: 700; cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
  box-shadow: var(--shadow);
}
.chip:hover { transform: translateY(-2px); filter: brightness(1.05); }
.chip.selected { outline: 3px solid rgba(0,0,0,0.1); }

/* playful multi-colored chips */
.chip.sports { background: linear-gradient(135deg, #f59e0b, #ef4444, #f59e0b); background-size: 200% 200%; transition: background-position 400ms ease; }
.chip.history { background: linear-gradient(135deg, #6b7280, #111827, #6b7280); background-size: 200% 200%; transition: background-position 400ms ease; }
.chip.geography { background: linear-gradient(135deg, #10b981, #3b82f6, #10b981); background-size: 200% 200%; transition: background-position 400ms ease; }
.chip.geopolitics { background: linear-gradient(135deg, #ef4444, #8b5cf6, #ef4444); background-size: 200% 200%; transition: background-position 400ms ease; }
.chip.sciencetech { background: linear-gradient(135deg, #06b6d4, #0ea5e9, #06b6d4); background-size: 200% 200%; transition: background-position 400ms ease; }
.chip.literatureentertainment { background: linear-gradient(135deg, #ec4899, #f43f5e, #ec4899); background-size: 200% 200%; transition: background-position 400ms ease; }
.chip.sports:hover, .chip.history:hover, .chip.geography:hover, .chip.geopolitics:hover, .chip.sciencetech:hover, .chip.literatureentertainment:hover { background-position: 100% 0; }

.chip.diff-beginner { background: linear-gradient(135deg, #34d399, #10b981, #34d399); background-size: 200% 200%; transition: background-position 400ms ease; }
.chip.diff-intermediate { background: linear-gradient(135deg, #60a5fa, #2563eb, #60a5fa); background-size: 200% 200%; transition: background-position 400ms ease; }
.chip.diff-advanced { background: linear-gradient(135deg, #c084fc, #a855f7, #c084fc); background-size: 200% 200%; transition: background-position 400ms ease; }
.chip.diff-beginner:hover, .chip.diff-intermediate:hover, .chip.diff-advanced:hover { background-position: 100% 0; }
.review-q { font-weight: 600; margin-bottom: 6px; }
.review-a { color: var(--muted); }

@media (min-width: 700px) {
  .options { grid-template-columns: 1fr 1fr; }
}

/* Theme switch for quiz */
.theme-quiz body, body.theme-quiz {
  background: radial-gradient(1400px 700px at 10% -20%, #ffe0f4, transparent),
    radial-gradient(1400px 700px at 90% -20%, #e0eeff, transparent),
    radial-gradient(1400px 700px at 50% 120%, #ffe5cf, transparent),
    radial-gradient(1400px 700px at -10% 60%, #e2ffe8, transparent), var(--bg);
}


/* Play screen title */
.play-title {
  text-align: center;
  font-size: 28px;
  margin: 4px 0 16px;
  background: linear-gradient(90deg, #f472b6, #8b5cf6, #22d3ee, #f59e0b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
  letter-spacing: 0.5px;
  animation: title-bounce 1.2s ease-in-out infinite;
}

@keyframes title-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Get Ready screen */
.center-card { display: flex; align-items: center; justify-content: center; min-height: 50vh; }
.ready-wrap { text-align: center; }
.ready-title { font-size: 26px; font-weight: 800; margin-bottom: 8px; background: linear-gradient(90deg, #f472b6, #8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ready-count { font-size: 44px; font-weight: 900; }