:root{
  --bg1:#1a0f2e;
  --bg2:#2d1854;
  --panel:#241640;
  --panel-light:#33215a;
  --gold:#f5c542;
  --red:#e63946;
  --green:#2a9d5c;
  --text:#f4f0ff;
  --text-dim:#b9aed9;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:radial-gradient(1200px 800px at 50% -10%, var(--bg2), var(--bg1) 70%);
  color:var(--text);
  min-height:100vh;
  -webkit-tap-highlight-color:transparent;
}
button{font-family:inherit;border:none;cursor:pointer;}
.hidden{display:none !important;}
ul{list-style:none;}

#app{min-height:100vh;}
.screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;}

/* ===================== HOME SCREEN ===================== */
.home-card{
  width:100%;max-width:480px;
  background:var(--panel);
  border-radius:24px;
  padding:32px 26px;
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.06);
  text-align:center;
}
.logo{font-size:30px;font-weight:800;margin-bottom:4px;}
.tagline{color:var(--gold);font-weight:600;margin-bottom:22px;font-size:14px;}

.mode-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px;
}
.mode-card{
  background:var(--panel-light);
  border-radius:14px;
  padding:14px 10px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  border:2px solid transparent;
  transition:.15s;
}
.mode-card.active{border-color:var(--gold);background:linear-gradient(180deg,#3a2568,#2b1a4e);}
.mode-icon{font-size:24px;}
.mode-name{font-weight:700;font-size:13px;}
.mode-desc{font-size:10px;color:var(--text-dim);text-align:center;}

.setup-group{margin-bottom:20px;text-align:left;}
.setup-group h3{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);margin-bottom:8px;text-align:center;}
.option-row{display:flex;gap:8px;}
.option-btn{
  flex:1;padding:10px 6px;background:var(--panel-light);color:var(--text);
  border-radius:10px;font-size:13px;font-weight:600;border:2px solid transparent;
}
.option-btn.active{border-color:var(--gold);color:var(--gold);}

.best-row{display:flex;gap:12px;margin-bottom:20px;}
.best-box{flex:1;background:var(--panel-light);border-radius:12px;padding:12px;}
.best-label{display:block;font-size:10px;letter-spacing:1px;color:var(--text-dim);margin-bottom:4px;}
.best-value{font-size:20px;font-weight:800;color:var(--gold);}

.primary-btn{
  width:100%;padding:15px;border-radius:14px;
  background:linear-gradient(90deg,#ff7b54,#ff5470);
  color:#fff;font-weight:700;font-size:16px;
  box-shadow:0 6px 16px rgba(255,84,112,.35);
  transition:.12s;
}
.primary-btn:active{transform:scale(.97);}
.secondary-btn{
  width:100%;padding:13px;border-radius:14px;margin-top:8px;
  background:var(--panel-light);color:var(--text);font-weight:600;
}
.link-btn{background:none;color:var(--text-dim);font-size:12px;text-decoration:underline;margin-top:14px;}

/* ===================== QUIZ SCREEN ===================== */
#quiz-screen{
  flex-direction:column;align-items:stretch;padding:0;min-height:100vh;
}
#quiz-hud{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 18px;background:rgba(0,0,0,.25);backdrop-filter:blur(6px);
  position:sticky;top:0;z-index:10;
}
.hud-left{display:flex;flex-direction:column;}
.hud-title{font-weight:800;font-size:14px;}
.hud-score{font-size:12px;color:var(--gold);font-weight:700;}
.hud-right{display:flex;align-items:center;gap:12px;}
.hud-streak{font-weight:800;color:#ff7b54;font-size:14px;}

.timer-ring-wrap{position:relative;width:44px;height:44px;}
.timer-ring{width:44px;height:44px;transform:rotate(-90deg);}
.timer-bg{fill:none;stroke:rgba(255,255,255,.15);stroke-width:5;}
.timer-fg{
  fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:163;stroke-dashoffset:0;transition:stroke-dashoffset .25s linear, stroke .25s;
}
.timer-text{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;
}
.icon-btn{
  width:36px;height:36px;border-radius:50%;background:var(--panel-light);color:var(--text);font-size:15px;
  display:flex;align-items:center;justify-content:center;
}

.progress-row{padding:8px 18px;}
#question-counter{font-size:11px;color:var(--text-dim);display:block;margin-bottom:6px;}
.progress-bar-track{width:100%;height:6px;border-radius:4px;background:var(--panel-light);overflow:hidden;}
.progress-bar-fill{height:100%;background:linear-gradient(90deg,#ff7b54,var(--gold));width:0%;transition:width .3s;}

#question-area{
  flex:1;max-width:720px;margin:0 auto;width:100%;
  padding:20px 18px 40px;
  display:flex;flex-direction:column;align-items:center;
}
.category-chip{
  background:var(--panel-light);color:var(--gold);
  padding:6px 16px;border-radius:20px;font-size:12px;font-weight:700;margin-bottom:14px;
}
#question-text{
  text-align:center;font-size:22px;font-weight:700;margin-bottom:20px;line-height:1.4;
}
#question-image-wrap{width:100%;max-width:340px;margin-bottom:20px;}
#question-image{
  width:100%;aspect-ratio:16/9;border-radius:16px;
  background:linear-gradient(135deg,#3a2568,#241640);
  display:flex;align-items:center;justify-content:center;
  font-size:44px;box-shadow:var(--shadow);
}

.answers-grid{
  width:100%;max-width:560px;
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
.answer-btn{
  background:var(--panel-light);color:var(--text);
  padding:16px 14px;border-radius:14px;
  font-size:14px;font-weight:600;text-align:left;
  border:2px solid transparent;
  display:flex;align-items:center;gap:8px;
  transition:.12s;
}
.answer-btn .opt-letter{
  width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0;
}
.answer-btn:active{transform:scale(.97);}
.answer-btn.correct{border-color:var(--green);background:rgba(42,157,92,.25);}
.answer-btn.incorrect{border-color:var(--red);background:rgba(230,57,70,.25);}
.answer-btn.disabled{pointer-events:none;opacity:.7;}
.answer-btn.dim{opacity:.4;}

.explanation-box{
  width:100%;max-width:560px;margin-top:16px;
  background:var(--panel-light);border-radius:14px;padding:14px 16px;
  font-size:13px;color:var(--text-dim);
}

#floating-score-layer{position:fixed;inset:0;pointer-events:none;z-index:50;}
.floating-text{
  position:absolute;font-weight:800;font-size:20px;color:var(--gold);
  text-shadow:0 2px 6px rgba(0,0,0,.5);
  animation:floatUp 1.1s ease-out forwards;
}

/* ===================== RESULTS SCREEN ===================== */
.results-card{max-width:420px;}
.results-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0;}
.result-box{background:var(--panel-light);border-radius:12px;padding:12px;}
.result-box span{display:block;font-size:11px;color:var(--text-dim);}
.result-box b{font-size:20px;color:var(--gold);}
.new-best-badge{
  background:linear-gradient(90deg,var(--gold),#ff9f1c);color:#3a2600;font-weight:800;
  padding:8px;border-radius:12px;margin-bottom:14px;
}
.grade-badge{
  width:70px;height:70px;margin:0 auto 18px;border-radius:50%;
  background:linear-gradient(135deg,#ff7b54,#ff5470);
  display:flex;align-items:center;justify-content:center;
  font-size:32px;font-weight:900;box-shadow:var(--shadow);
}

/* ===================== OVERLAYS ===================== */
.overlay{
  position:fixed;inset:0;background:rgba(5,8,22,.72);
  display:flex;align-items:center;justify-content:center;z-index:100;padding:16px;
}
.overlay-card{
  width:100%;max-width:340px;background:var(--panel);border-radius:20px;
  padding:26px;text-align:center;box-shadow:var(--shadow);
}
.overlay-card h2{margin-bottom:16px;}