:root{
  --bg-a:#f7f9fb;
  --bg-b:#eef5f8;
  --text:#1f2a33;
  --muted:#6b7a88;
  --accent:#00aacc;
  --card:#ffffff;
  --border:rgba(0,0,0,0.06);
  --success:#18a957;
  --error:#d64545;
  --shadow:0 10px 25px rgba(0,0,0,0.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", sans-serif;
  color:var(--text);
  background:radial-gradient(1200px 800px at 80% -10%, rgba(0,170,204,0.10), transparent 60%),
             linear-gradient(160deg, var(--bg-a), var(--bg-b));
  background-size:140% 140%, 100% 100%;
  background-repeat:no-repeat;
  animation:bgMove 18s ease-in-out infinite alternate;
  display:grid; place-items:center;
}

@keyframes bgMove{
  0%{ background-position: 85% -15%, 0% 0%; }
  100%{ background-position: 15% 115%, 100% 100%; }
}

.app{width:min(880px, 92vw); padding:32px 16px;}
.app__header{ text-align:center; margin-bottom:20px;}
.app__header h1{margin:0 0 6px; font-weight:700; letter-spacing:.2px}
.app__header p{margin:0; color:var(--muted)}
.app__header.hidden{ display:none; }

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:24px;
  box-shadow:var(--shadow);
  transform-origin: 50% 60%;
}
.hidden{display:none}
.active{display:block}

/* Start screen centering */
#screen-start{ text-align:center; padding:40px 24px }
#screen-start h2{ font-size:32px; margin:0 0 10px }
#screen-start p{ font-size:16px; color:var(--muted); margin:0 0 18px }

.quiz-top{display:flex; gap:12px; align-items:center; margin-bottom:14px}
.progress{flex:1; height:8px; background:#e9eef2; border-radius:999px; overflow:hidden}
#progress-bar{display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--accent), #4dd0e1); border-radius:999px; transition:width .35s ease}
.meta{font-size:14px; color:var(--muted)}

.question-wrap{margin:10px 0 8px}
.question{margin:0 0 16px; font-size:22px; line-height:1.35}
.options{display:grid; gap:10px}
.option{
  width:100%; text-align:left; padding:14px 16px; border-radius:14px; border:1px solid var(--border); background:#fbfdff;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.option:hover{transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,0.07)}
.option:disabled{opacity:.9; cursor:not-allowed}
.option.correct{border-color: rgba(24,169,87,.35); background: #f1fbf6}
.option.incorrect{border-color: rgba(214,69,69,.35); background: #fff5f5}

.feedback{min-height:24px; margin:10px 0; font-weight:600}
.feedback.ok{color:var(--success)}
.feedback.no{color:var(--error)}

.actions{display:flex; justify-content:flex-end; margin-top:8px}
.btn{appearance:none; border:0; border-radius:14px; padding:12px 16px; font-weight:600; cursor:pointer}
.btn-lg{ padding:16px 22px; font-size:18px }
.btn-primary{background:linear-gradient(135deg, var(--accent), #2fb3cc); color:#fff; box-shadow:0 10px 20px rgba(0,170,204,.25)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 14px 28px rgba(0,170,204,.30)}
.btn-secondary{background:#eef5f8; color:#0f2a33; border:1px solid var(--border)}
.btn-secondary:hover{background:#e6f1f5}
.btn[disabled]{opacity:.55}

.fade-in{animation:fadeIn .45s ease both}
.fade-out{animation:fadeOut .35s ease both}
@keyframes fadeIn{from{opacity:0; transform: translateY(6px)} to{opacity:1; transform:none}}
@keyframes fadeOut{from{opacity:1} to{opacity:0; transform: translateY(6px)}}

.score{font-size:42px; margin:10px 0 6px}
.message{color:var(--muted); margin:0}

/* Mini title inside quiz */
.mini-title{ font-size:14px; color:var(--muted); margin-bottom:8px }

/* Bottom fixed progress */
.bottom-progress{ position:fixed; left:0; right:0; bottom:0; height:10px; background:#e9eef2; z-index:10 }
.bottom-progress span{ display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--accent), #4dd0e1); transition: width .35s ease }