/* ========== Neon Theme (drop-in) ========== */

/* CSS Variables for easy theme tweaks */
:root{
  --bg-1: #05060a;              /* page background */
  --bg-2: #0b0f1a;              /* cards/panels */
  --glass: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.08);

  --ink: #e8eefc;               /* primary text */
  --muted: #97a1b4;             /* secondary text */

  --neon: #30e7ff;              /* primary neon (cyan) */
  --neon-2: #ff45c6;            /* magenta accent */
  --neon-3: #a8ff60;            /* lime accent */

  --ok: #38e37d;
  --bad: #ff5f6d;

  --radius: 20px;
  --shadow-neon: 0 0 8px var(--neon), 0 0 16px color-mix(in oklab, var(--neon) 60%, transparent);
  --shadow-ok:   0 0 8px var(--ok),   0 0 16px color-mix(in oklab, var(--ok) 60%, transparent);
  --shadow-bad:  0 0 8px var(--bad),  0 0 16px color-mix(in oklab, var(--bad) 60%, transparent);
}

/* Reset & Base */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 10% -10%, #0e1630 0%, transparent 60%),
    radial-gradient(1000px 600px at 110% 10%, #1a0b2b 0%, transparent 60%),
    var(--bg-1);
  overflow-x: hidden;
}

/* App Container */
.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Glass helper */
.glass {
  background: linear-gradient(180deg, var(--glass) 0%, rgba(255,255,255,0.03) 100%);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
}

/* Header */
.quiz-header {
  position: sticky; top: 0; z-index: 100;
  padding: 1.25rem 2rem;
  text-align: center;
  box-shadow: 0 2px 30px rgba(0,0,0,0.25);
  border-bottom: 1px solid var(--glass-border);
  background:
    linear-gradient(180deg, rgba(5,7,12,0.6), rgba(5,7,12,0.35));
  backdrop-filter: blur(10px);
}
.header-content h1 {
  font-size: 2.2rem; font-weight: 800; letter-spacing: 0.2px;
  display: flex; gap: 0.7rem; align-items: center; justify-content: center;
  color: var(--ink);
  text-shadow: 0 1px 0 #000;
}
.header-content h1 i { color: var(--neon); filter: drop-shadow(0 0 8px var(--neon)); }
.header-content p { margin-top: .35rem; color: var(--muted); font-weight: 500; }

/* Progress Bar */
.progress-container {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 2rem;
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
}
.progress-bar {
  flex: 1; height: 10px; position: relative; border-radius: 999px;
  background: rgba(255,255,255,0.08); overflow: hidden;
}
.progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--neon), #6be1ff);
  box-shadow: var(--shadow-neon);
  transition: width 420ms cubic-bezier(.22,1,.36,1);
}
.progress-text { color: var(--muted); font-weight: 700; font-size: .95rem; }

/* Timer */
.timer-container {
  display: flex; justify-content: center;
  border-bottom: 1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding: .75rem 2rem;
}
.timer {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--ink); font-weight: 700;
  padding: .55rem 1rem; border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.timer.warning {
  color: #d69e2e;
  border-color: #f6e05e;
  background: #fef5e7;
  box-shadow: 0 0 4px #f6e05e; /* softer glow */
  animation: pulse 1.5s infinite; /* slower, less distracting */
}

.timer.danger {
  color: #e53e3e;
  border-color: #fc8181;
  background: #fed7d7;
  box-shadow: 0 0 5px #fc8181; /* softer glow */
  animation: pulse 1.2s infinite;
}

/* Main Card */
.quiz-container {
  max-width: 880px;
  margin: 2rem auto;
  padding: 2rem;
  border-radius: var(--radius);
  box-shadow: 0 25px 60px rgba(0,0,0,0.35);
  position: relative; overflow: visible;
  background: linear-gradient(180deg, rgba(10,12,18,0.7), rgba(10,12,18,0.55));
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
}
.quiz-container::before{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
.quiz-container::after{
  /* top glow strip */
  content:''; position:absolute; left:12px; right:12px; top:-2px; height:3px; border-radius:999px;
  background: linear-gradient(90deg, var(--neon), var(--neon-2));
  filter: blur(1.2px) drop-shadow(0 0 6px var(--neon));
}

/* Question */
.question-text {
  font-size: 1.5rem;
  font-weight: 600;
  color: #f5f5f5; /* was #2d3748 */
  margin-bottom: 2rem;
  line-height: 1.4;
  text-align: center;
  flex-shrink: 0;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
}

.question-category {
  display:inline-block; margin-bottom: .8rem; font-size:.8rem; font-weight:700;
  color:#001319; background: color-mix(in oklab, var(--neon) 25%, transparent);
  border:1px solid color-mix(in oklab, var(--neon) 60%, transparent);
  padding:.3rem .7rem; border-radius:999px;
  box-shadow: 0 0 10px color-mix(in oklab, var(--neon) 40%, transparent);
}
.question-main { color: var(--ink); }

/* Image */
.quiz-container img {
  width: 100%; max-width: 520px; height: 320px; object-fit: cover;
  border-radius: 16px; margin: 1.25rem auto; display:block;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 18px rgba(48,231,255,0.15);
  transition: transform .25s ease, box-shadow .25s ease;
}
.quiz-container img:hover { transform: translateY(-2px); box-shadow: 0 22px 60px rgba(0,0,0,0.55), 0 0 22px rgba(48,231,255,0.25); }

/* Answers */
.answers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0.9rem;
  margin: 1.25rem 0 1.5rem 0;
}
.answer-button{
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  color: var(--ink);
  border: 1px solid var(--glass-border);
  padding: 1rem 1.25rem;
  border-radius: 14px;
  font-size: 1rem; font-weight: 600;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  text-align: center; min-height: 60px;
}
.answer-button:hover{
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--neon) 35%, var(--glass-border));
  box-shadow: 0 10px 26px rgba(0,0,0,0.35), 0 0 10px rgba(48,231,255,0.25);
}
.answer-button:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--neon) 35%, transparent), var(--shadow-neon);
  border-color: var(--neon);
}
.answer-button.correct{
  background: linear-gradient(180deg, rgba(56,227,125,0.18), rgba(56,227,125,0.12));
  border-color: color-mix(in oklab, var(--ok) 60%, var(--glass-border));
  box-shadow: var(--shadow-ok);
}
.answer-button.incorrect{
  background: linear-gradient(180deg, rgba(255,95,109,0.15), rgba(255,95,109,0.09));
  border-color: color-mix(in oklab, var(--bad) 60%, var(--glass-border));
  box-shadow: var(--shadow-bad);
}
.answer-icon { margin-left:.5rem; font-size:1.1rem; }
.correct-icon { color: var(--ok); filter: drop-shadow(0 0 6px var(--ok)); }
.incorrect-icon { color: var(--bad); filter: drop-shadow(0 0 6px var(--bad)); }

/* Controls */
#controls{
  display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top: .5rem;
}

/* Hint */
#hint-area{ display:flex; flex-direction:column; align-items:flex-start; gap:.7rem; }
.hint-btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.7rem 1.1rem; border-radius:999px;
  background: linear-gradient(90deg, var(--neon-2) 0%, #ff7de0 100%);
  color:#0d0010; border:none; font-weight:700; cursor:pointer;
  box-shadow: 0 6px 22px rgba(255, 69, 198, 0.45), 0 0 10px rgba(255, 69, 198, 0.35);
  transition: transform .12s ease, filter .12s ease;
}
.hint-btn:hover{ transform: translateY(-2px); filter: brightness(1.05); }
.hint-btn:focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(255,69,198,.45), 0 0 12px rgba(255,69,198,.55); }

#hint{
  color: var(--muted); font-style: italic; font-size: .95rem; line-height:1.5;
  padding: 1rem 1.1rem; border-left: 4px solid var(--neon-2);
  background: rgba(255,255,255,0.03);
  border-radius: 12px; border: 1px solid var(--glass-border);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18), 0 0 10px rgba(255,69,198,0.15);
  animation: slideIn .25s ease;
  margin: .8rem 0 0 0; align-self:flex-start; width:fit-content; max-width: 100%;
}
#hint-logo{
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover; cursor: pointer;
  background: #1a1120; padding: 4px; border:1px solid var(--glass-border);
  box-shadow: 0 8px 22px rgba(0,0,0,0.35), 0 0 10px rgba(255,69,198,0.25);
  transition: transform .12s ease, box-shadow .12s ease;
}
#hint-logo:hover { transform: scale(1.06) rotate(3deg); }

/* Next Button */
.next-btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.8rem 1.35rem; border-radius:999px; border:none; font-weight:800;
  background: linear-gradient(90deg, #00f5ff 0%, #69fff8 100%);
  color:#001216; cursor:pointer;
  box-shadow: 0 6px 22px rgba(0, 245, 255, 0.35), var(--shadow-neon);
  transition: transform .12s ease, filter .12s ease;
}
.next-btn:hover{ transform: translateY(-2px); filter: brightness(1.05); }
.next-btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

/* Score HUD */
.score-display { position: fixed; top: 1.5rem; right: 1.5rem; z-index: 1000; }
.score-circle{
  width: 84px; height: 84px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  color:#001216; font-size: 1.6rem; font-weight: 900;
  background: radial-gradient(120px 120px at 50% 45%, var(--neon) 0%, #7df1ff 60%, #002e36 62%);
  box-shadow: 0 14px 35px rgba(0,0,0,0.45), var(--shadow-neon);
  text-shadow: 0 0 4px rgba(255,255,255,0.65);
  border: 1px solid color-mix(in oklab, var(--neon) 60%, transparent);
  animation: scorePulse 2.4s infinite ease-in-out;
}

/* Welcome & Results overlay */
.welcome-screen, .results-screen {
  position: fixed; inset: 0; z-index: 2000;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(800px 500px at 20% 10%, rgba(0,246,255,0.08), transparent 60%),
    radial-gradient(900px 600px at 80% 0%, rgba(255,69,198,0.08), transparent 60%),
    linear-gradient(135deg, #0a0e1a 0%, #090a12 100%);
  animation: fadeIn .4s ease;
}
.welcome-content, .results-content {
  width: clamp(280px, 90vw, 640px);
  border-radius: var(--radius);
  padding: 2.4rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.035));
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  box-shadow: 0 25px 60px rgba(0,0,0,0.45), 0 0 20px rgba(48,231,255,0.15);
}
.welcome-icon, .results-icon {
  font-size: 3.4rem; margin-bottom: 1rem; color: var(--neon);
  filter: drop-shadow(0 0 8px var(--neon)); animation: trophyBounce 1s ease;
}
.welcome-content h2, .results-header h2{ color: var(--ink); font-weight: 800; }
.welcome-content p { color: var(--muted); }

/* Welcome Heading (neon orange glow) */
.welcome-content h2 {
  color: #ffb347; /* neon orange/yellow */
  text-shadow:
    0 0 6px rgba(255, 179, 71, 0.8),
    0 0 12px rgba(255, 140, 0, 0.6),
    0 0 20px rgba(255, 179, 71, 0.6);
}

.quiz-stats{
  display:grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
  margin: 1.2rem 0 1.6rem;
}
.stat{
  padding: .9rem; border-radius: 14px; border:1px solid var(--glass-border);
  background: rgba(255,255,255,0.04);
  color: var(--muted); font-weight: 600;
}
.stat i{ color: var(--neon); filter: drop-shadow(0 0 6px var(--neon)); }

.start-btn, .restart-btn, .review-btn{
  display:inline-flex; align-items:center; gap:.6rem; border:none; cursor:pointer;
  padding: .9rem 1.5rem; border-radius: 999px; font-weight: 800; transition: transform .12s ease;
}
.start-btn, .restart-btn{
  background: linear-gradient(90deg, var(--neon) 0%, #7df1ff 100%);
  color:#001216; box-shadow: var(--shadow-neon);
}
/* Neon Review button (cyan → amber, like Try Again / Next) */
.review-btn {
  background: linear-gradient(90deg, var(--neon) 0%, #7df1ff 40%, var(--sun) 100%);
  color: #031016;
  box-shadow:
    0 6px 22px rgba(0, 245, 255, 0.25),
    0 0 14px color-mix(in oklab, var(--sun) 60%, transparent);
  font-weight: 800;
  border: none;
  border-radius: 999px;
  padding: .9rem 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}

.review-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}
.start-btn:hover, .restart-btn:hover, .review-btn:hover{ transform: translateY(-2px); }

.results-content .final-score{
  font-size: 3rem; font-weight: 900; color: var(--neon);
  text-shadow: 0 0 10px color-mix(in oklab, var(--neon) 60%, transparent);
}
.score-label{ color: var(--muted); }
.score-percentage{ color: var(--ink); font-weight: 800; }

.performance-details{
  display:grid; gap:.9rem; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); margin: 1.2rem 0 1.6rem;
}
.detail-item{
  display:flex; align-items:center; gap:.6rem; padding:.9rem; border-radius:14px;
  border:1px solid var(--glass-border); background: rgba(255,255,255,0.04); color: var(--muted);
}
.detail-item i.fa-check-circle{ color: var(--ok); filter: drop-shadow(0 0 6px var(--ok)); }
.detail-item i.fa-times-circle{ color: var(--bad); filter: drop-shadow(0 0 6px var(--bad)); }
.detail-item i.fa-stopwatch{ color: var(--neon); filter: drop-shadow(0 0 6px var(--neon)); }

.feedback-message{
  color: var(--ink);
  padding: 1.1rem; border-radius: 14px; border:1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
  border-left: 4px solid var(--neon);
}

/* Review modal (injected by JS) — kept from your logic, re-skinned */
.review-modal {
  position: fixed; inset:0; background: rgba(0,0,0,0.9);
  display:flex; align-items:center; justify-content:center; z-index:3000; padding:1rem;
}
.review-content{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.035));
  border:1px solid var(--glass-border);
  border-radius: var(--radius); width: 100%; max-width: 840px; max-height: 80vh; overflow-y: auto;
  box-shadow: 0 25px 60px rgba(0,0,0,0.5), 0 0 20px rgba(48,231,255,0.15);
}
.review-header{
  display:flex; justify-content:space-between; align-items:center; position:sticky; top:0;
  padding:1.2rem 1.6rem; border-bottom:1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(5,7,12,0.7), rgba(5,7,12,0.5));
  border-radius: var(--radius) var(--radius) 0 0;
  color: var(--ink);
}
.review-answers{ padding: 1.6rem; }
.review-item{
  margin-bottom:1rem; padding:1rem; border-radius:14px; border-left:4px solid;
  border:1px solid var(--glass-border); color: var(--ink);
  background: rgba(255,255,255,0.03);
}
.review-item.correct{ border-left-color: var(--ok); box-shadow: var(--shadow-ok); }
.review-item.incorrect{ border-left-color: var(--bad); box-shadow: var(--shadow-bad); }
.review-question{ font-weight:800; margin-bottom:.6rem; }
.review-details{
  display:grid; gap:.6rem; grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  color: var(--muted);
}
.review-explanation{ background: rgba(255,255,255,0.04); border-radius:10px; padding:.8rem; }

/* === Cyan × Amber Neon Add-On (paste at end of style.css) === */
:root{
  /* keep the cyan you liked */
  --neon:   #30e7ff;   /* cyan */
  /* add warm neon tones */
  --sun:    #ffc83d;   /* amber */
  --sun-2:  #ff7a00;   /* orange */
  --shadow-sun: 0 0 8px var(--sun), 0 0 16px color-mix(in oklab, var(--sun) 60%, transparent);
}

/* Progress bar: cyan → amber blend */
.progress-fill{
  background: linear-gradient(90deg, var(--neon) 0%, #7df1ff 35%, var(--sun) 100%);
  box-shadow:
    0 0 8px color-mix(in oklab, var(--neon) 70%, transparent),
    0 0 12px color-mix(in oklab, var(--sun) 55%, transparent);
}

/* Primary CTA (Next, Start, Restart): cyan → amber */
.next-btn,
.start-btn,
.restart-btn{
  background: linear-gradient(90deg, var(--neon) 0%, #7df1ff 30%, var(--sun) 100%);
  color: #031016;
  box-shadow:
    0 6px 22px rgba(0, 245, 255, 0.25),
    0 0 14px color-mix(in oklab, var(--sun) 60%, transparent);
}
.next-btn:hover,
.start-btn:hover,
.restart-btn:hover{
  filter: brightness(1.06);
  transform: translateY(-2px);
}

/* Secondary CTA (Hint): orange glow */
.hint-btn{
  background: linear-gradient(90deg, var(--sun-2) 0%, var(--sun) 100%);
  color: #1a0c00;
  box-shadow:
    0 6px 22px rgba(255, 122, 0, .35),
    0 0 12px color-mix(in oklab, var(--sun) 60%, transparent);
}
.hint-btn:focus-visible{
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--sun) 45%, transparent),
    0 0 12px color-mix(in oklab, var(--sun) 60%, transparent);
}

/* Category pill: subtle dual-tone */
.question-category{
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--neon) 18%, transparent) 0%,
    color-mix(in oklab, var(--sun) 18%, transparent) 100%);
  border-color: color-mix(in oklab, var(--neon) 40%, var(--sun) 40%);
  box-shadow:
    0 0 10px color-mix(in oklab, var(--neon) 35%, transparent),
    0 0 10px color-mix(in oklab, var(--sun) 30%, transparent);
}

/* Score ring: radial cyan core → amber rim */
.score-circle {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.25); /* softer shadow */
  animation: scorePulse 3s infinite; /* slower pulse */
}

.answer-button:hover{
  border-color: color-mix(in oklab, var(--neon) 28%, var(--sun) 28%);
  box-shadow:
    0 10px 26px rgba(0,0,0,.35),
    0 0 10px color-mix(in oklab, var(--neon) 28%, transparent),
    0 0 10px color-mix(in oklab, var(--sun) 24%, transparent);
}
.answer-button:focus-visible{
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--neon) 35%, transparent),
    0 0 0 6px color-mix(in oklab, var(--sun) 28%, transparent),
    0 0 14px color-mix(in oklab, var(--neon) 40%, transparent),
    0 0 14px color-mix(in oklab, var(--sun) 35%, transparent);
  border-color: color-mix(in oklab, var(--neon) 40%, var(--sun) 40%);
}

/* Info/feedback blocks: cyan edge + amber inner glow for readability */
.feedback-message{
  border-left-color: var(--neon);
  box-shadow:
    0 10px 26px rgba(0,0,0,.35),
    0 0 10px color-mix(in oklab, var(--neon) 35%, transparent),
    0 0 8px color-mix(in oklab, var(--sun) 30%, transparent);
}

/* Results detail icons: keep success/error, accent stopwatch in dual-tone */
.detail-item i.fa-stopwatch{
  color: var(--neon);
  filter: drop-shadow(0 0 6px var(--neon)) drop-shadow(0 0 6px var(--sun));
}

/* Thin top strip on main card: dual gradient instead of cyan+magenta */
.quiz-container::after{
  background: linear-gradient(90deg, var(--neon), var(--sun));
  filter: blur(1.2px) drop-shadow(0 0 6px var(--neon)) drop-shadow(0 0 6px var(--sun));
}

/* Improve question visibility in neon theme */
.question-text,
.question-main {
  color: #fffdf2; /* off-white for better contrast */
  text-shadow:
    0 0 6px #30e7ff,
    0 0 12px #ffb347,
    0 0 20px rgba(0, 245, 255, 0.6);
}

/* Category pill stays vivid but with lighter text */
.question-category {
  color: #fff;
  background: linear-gradient(90deg, #30e7ff, #ffb347);
  border: none;
  box-shadow:
    0 0 8px rgba(0, 245, 255, 0.6),
    0 0 8px rgba(255, 179, 71, 0.5);
}

/* ===== Improve results denominator + soften question text ===== */

/* Results Final Score number */
.final-score {
  font-size: 3rem;
  font-weight: 700;
  color: #ffb347; /* neon orange/yellow */
  text-shadow: 0 0 10px rgba(255, 179, 71, 0.7);
  margin-bottom: 0.5rem;
}

/* The “/ 6” label */
.score-label {
  font-size: 1.5rem;
  color: #ffda79; /* bright yellow */
  text-shadow: 0 0 8px rgba(255, 218, 121, 0.6);
}

/* Soften the QUESTION text to an off-white with minimal glow */
.question-text,
.question-main{
  color: #f2f5ff;            /* light grey-white for readability */
  text-shadow: 0 1px 0 rgba(0,0,0,.35);  /* remove heavy neon halo */
}

/* If you still want a hint of warmth on the question category chip */
.question-category{ color:#001319; }

/* Percentage below the score */
.score-percentage {
  font-size: 1.5rem;
  font-weight: 700;
  color: #30e7ff; /* cyan neon like trophy */
  text-shadow: 0 0 10px rgba(48, 231, 255, 0.8);
}

/* --- Force numerator to match the total (amber) --- */
/* In your markup, the number is inside #final-score within .final-score */
.results-content .final-score,
.results-content .final-score #final-score {
  color: var(--sun) !important;  /* amber/yellow neon */
  text-shadow:
    0 0 8px color-mix(in oklab, var(--sun) 65%, transparent),
    0 0 14px color-mix(in oklab, var(--sun) 45%, transparent);
}

/* Keep the denominator the same warm tone */
.results-content .score-label {
  color: var(--sun) !important;
  text-shadow:
    0 0 8px color-mix(in oklab, var(--sun) 60%, transparent);
}

/* Percentage: cyan to match the trophy */
.results-content .score-percentage {
  color: var(--neon) !important;
  text-shadow:
    0 0 10px color-mix(in oklab, var(--neon) 60%, transparent);
}

/* ===== Results colors (clean, unified) ===== */

/* 1) Numerator & denominator = warm neon (amber) */
.results-content .final-score,
.results-content .final-score #final-score,
.results-content .final-score .score-label,
.results-content .final-score #score-label,
.results-content .final-score #total-questions {
  color: var(--sun) !important;
  text-shadow:
    0 0 6px color-mix(in oklab, var(--sun) 65%, transparent),
    0 0 12px color-mix(in oklab, var(--sun) 45%, transparent);
  /* extra punch for neon glow */
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--sun) 55%, transparent));
}

/* 2) Percentage = cyan to match the trophy */
.results-content .score-percentage {
  color: var(--neon) !important;
  text-shadow:
    0 0 8px color-mix(in oklab, var(--neon) 60%, transparent),
    0 0 14px color-mix(in oklab, var(--neon) 45%, transparent);
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--neon) 55%, transparent));
}

/* 3) Question text = soft white (no heavy halo) */
.question-text,
.question-main {
  color: #f2f5ff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

.results-content {
  align-items: center;
}

.results-content .restart-btn,
.results-content .review-btn {
  margin-top: 2rem;   /* push them below feedback box */
}

.results-content .restart-btn + .review-btn {
  margin-left: 1rem;  /* add horizontal space between buttons */
}

/* === Custom Cursor + Trail === */
:root {
  --cursor-color: #ff3b30;       /* red */
  --cursor-size: 22px;           /* ring diameter */
  --cursor-border: 2px;          /* ring thickness */
  --cursor-trail-count: 14;      /* visual only; JS controls actual count */
}

/* Only apply custom cursor on desktop devices */
@media (hover: hover) and (pointer: fine) {
  /* Hide the system cursor everywhere in the app */
  .app-container,
  .app-container * {
    cursor: none !important;
  }

  /* Keep the text caret for fields so typing feels normal */
  .app-container input,
  .app-container textarea {
    cursor: text !important;
  }

  .cursor-dot {
    position: fixed;
    left: 0; top: 0;
    width: 16px;
    height: 16px;
    border: 2px solid #ff3b30;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    opacity: 0.4;
    filter: drop-shadow(0 0 2px rgba(255,59,48,.45));
  }
}

/* click feedback (optional) */
.cursor-ring.is-down {
  transform: translate(-50%, -50%) scale(0.85);
  opacity: .95;
}

/* --- click feedback ring --- */
.click-pulse {
  position: fixed;
  width: var(--cursor-size);
  height: var(--cursor-size);
  border: var(--cursor-border) solid var(--cursor-color);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0.9;
  filter: drop-shadow(0 0 3px rgba(255,59,48,.55));
  animation: cursorPulse 380ms ease-out forwards; /* tweak duration here */
}

@keyframes cursorPulse {
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(1.7); opacity: 0; }
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html, body { cursor: auto; }
  .cursor-ring, .cursor-dot { display: none !important; }
}

/* Animations */
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes scorePulse { 0%,100%{ transform:scale(1)} 50%{ transform:scale(1.06)} }
@keyframes trophyBounce { 0%{ transform:scale(0) rotate(-180deg)} 50%{ transform:scale(1.15)} 100%{ transform:scale(1)} }
@keyframes slideIn { from{opacity:0; transform: translateY(-8px)} to{opacity:1; transform:none} }

/* Responsive tweaks */
@media (max-width: 768px){
  .header-content h1{ font-size: 1.9rem; }
  .quiz-container{ margin: 1.2rem; padding: 1.4rem; }
  .answers{ grid-template-columns: 1fr; gap: .7rem; }
  #controls{ flex-direction: column; align-items: stretch; }
  .score-display{ top: 1rem; right: 1rem; }
  .score-circle{ width: 70px; height: 70px; font-size: 1.3rem; }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce){
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}