:root {
  --bg:#f3f4f6;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e6e9ef;
  --hover:#fbfdff;
  --selected:#f8fafc;
  --btn-bg:#EDEAE5;
  --btn-bg-hover:#E4E1DB;
}


body.dark {
  --bg:#0f1115;
  --card:#1a1d23;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --border:#2d323c;
  --hover:#1f242c;
  --selected:#262c35;
  --btn-bg:#2a2e35;
  --btn-bg-hover:#343941;
}
:root{
  --bg:#f3f4f6;
  --card:#ffffff;
  --success:#16a34a;
  --danger:#ef4444;
  --muted:#6b7280;
  --black:#000000;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Zalando Sans Expanded",sans-serif;
 background:var(--bg);
  color:var(--text);

  padding-top:150px;
}


.fixed-top-bar{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background:var(--card);
  padding:18px 0;
  box-shadow:0 4px 14px rgba(0,0,0,0.08);
  z-index:999;
}

.fixed-top-inner{
  max-width:820px;
  margin:0 auto;
  padding:0 22px;
}

.quiz-container{
  max-width:820px;
  margin:0 auto;
  background:var(--card);
  padding:22px;
  border-radius:10px;
  box-shadow:0 6px 24px rgba(15,23,42,0.06);
}

h1{font-size:20px;margin:0 0 14px 0}

.progress-wrap{margin-bottom:18px}
.progress-info{
  display:flex;
  justify-content:space-between;
  font-size:13px;
  color:var(--muted);
  margin-bottom:8px;
}
.progress-bar{
  width:100%;
  height:12px;
  background:var(--border);

  border-radius:999px;
  overflow:hidden;
}
#progress-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--black),#5c1010);
  transition:width .45s cubic-bezier(.25,.8,.25,1);
}


@keyframes fadeInUp {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}

@keyframes optionSelect {
  0% { transform:scale(1); }
  50% { transform:scale(1.03); }
  100% { transform:scale(1); }
}

@keyframes correctPulse {
  0% { box-shadow:0 0 0 rgba(22,163,74,0); }
  50% { box-shadow:0 0 12px rgba(22,163,74,0.35); }
  100% { box-shadow:0 0 0 rgba(22,163,74,0); }
}

@keyframes wrongPulse {
  0% { box-shadow:0 0 0 rgba(239,68,68,0); }
  50% { box-shadow:0 0 12px rgba(239,68,68,0.35); }
  100% { box-shadow:0 0 0 rgba(239,68,68,0); }
}

@keyframes shake {
  0% { transform:translateX(0); }
  25% { transform:translateX(-3px); }
  50% { transform:translateX(3px); }
  75% { transform:translateX(-2px); }
  100% { transform:translateX(0); }
}

.question{
  padding:12px;
  border-radius:8px;
  border:1px solid #eef2ff;
  margin-bottom:12px;
  animation:fadeInUp .35s ease both;
}

.question-text{
  font-weight:600;
  margin-bottom:8px;
}

.options{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.option-label{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px;
  border-radius:6px;
  cursor:pointer;
  transition:background .12s ease, border-color .12s ease;
  border:1px solid transparent;
}

.option-label:hover { background:var(--hover) }

.option-label.selected{
  background:var(--selected);
  border-color:var(--border);

  animation:optionSelect .18s ease;
}

.option-correct{
  background:rgba(22,163,74,0.08);
  border-color:rgba(22,163,74,0.18);
  animation:correctPulse .45s ease;
}

.option-wrong{
  background:rgba(239,68,68,0.06);
  border-color:rgba(239,68,68,0.12);
  animation:wrongPulse .45s ease, shake .25s ease;
}

.option-correct .option-text::after{
  content:" ✓";
  color:var(--success);
  font-weight:700;
  margin-left:6px;
}

.option-wrong .option-text::after{
  content:" ✕";
  color:var(--danger);
  font-weight:700;
  margin-left:6px;
}

.quiz-buttons{
  display:flex;
  margin-top:25px;
}

.btn{
  padding:14px 28px;
  font-size:15px;
  font-weight:700;
  border-radius:12px;
  border:none;
  cursor:pointer;
  transition:all .25s ease;
  letter-spacing:.3px;
  background:var(--btn-bg);
  color:var(--text);

  text-shadow:0 1px 2px rgba(0,0,0,0.25);
  box-shadow:0 4px 12px rgba(0,0,0,0.10);
}

.btn:hover{
  background:#E4E1DB;
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,0.15);
}

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


.result{
  margin-top:14px;
  font-weight:700;
color:var(--text);
  opacity:0;
  transition:opacity .4s ease;
}


.image-block{
  margin:12px 0;
  text-align:center;
}

.image-block img{
  max-width:100%;
  border-radius:8px;
  margin-top:6px;
  opacity:0;
  transform:scale(0.97);
  animation:fadeImg .45s ease forwards;
}

@keyframes fadeImg {
  to {
    opacity:1;
    transform:scale(1);
  }
}

.image-source{
  font-size:12px;
  color:#6b7280;
  margin-bottom:6px;
  line-height:1.3;
}

.confetti{
  position:fixed;
  top:-10px;
  width:10px;
  height:16px;
  opacity:.95;
  border-radius:2px;
  animation:fall 1.8s linear forwards;
  pointer-events:none;
}

@keyframes fall{
  0%{transform:translateY(0) rotate(0deg);}
  100%{transform:translateY(110vh) rotate(360deg);}
}


.win-flash{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(255,215,0,0.35);
  animation:winFlash .6s ease forwards;
  pointer-events:none;
}

@keyframes winFlash{
  0%{opacity:0;}
  30%{opacity:1;}
  100%{opacity:0;}
}


.fail-particle{
  position:fixed;
  top:-10px;
  width:12px;
  height:12px;
  background:#ff0000;
  opacity:.95;
  border-radius:3px;
  animation:failFall 1.4s linear forwards;
  pointer-events:none;
}

@keyframes failFall{
  0%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(55vh) rotate(180deg);}
  100%{transform:translateY(110vh) rotate(360deg);}
}


.lose-flash{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(255,0,0,0.25);
  animation:loseFlash .5s ease forwards;
  pointer-events:none;
}

@keyframes loseFlash{
  0%{opacity:0;}
  40%{opacity:1;}
  100%{opacity:0;}
}


.shake-screen{
  animation:screenShake .5s ease;
}

@keyframes screenShake{
  0%{transform:translate(0,0);}
  20%{transform:translate(-10px,5px);}
  40%{transform:translate(10px,-5px);}
  60%{transform:translate(-10px,5px);}
  80%{transform:translate(10px,-5px);}
  100%{transform:translate(0,0);}
}

        #themeToggle {
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 2000;
}