:root {
  --ink: #0F0B26;
  --panel: #1A1440;
  --panel-hi: #251C5C;
  --line: #3A2F82;
  --violet: #8B5CF6;
  --amber: #FFA53A;
  --ice: #7CB8FF;
  --text: #F1ECFF;
  --dim: #A9A0D8;
  --good: #3DDC97;
  --bad: #FF6B8B;
  --display: "Rajdhani", "Arial Narrow", system-ui, sans-serif;
  --body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--ink); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--text);
  font: 400 17px/1.55 var(--body);
  background:
    radial-gradient(90% 46% at 50% -8%, rgba(139, 92, 246, .38), transparent 70%),
    var(--ink);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}

#app {
  max-width: 560px;
  margin: 0 auto;
  padding: 28px 20px 64px;
}

.screen[hidden], [hidden] { display: none !important; }

h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: .01em;
  outline: none;
}
h1 { font-size: clamp(40px, 11.5vw, 58px); line-height: 1; }
h2 { font-size: clamp(27px, 6.8vw, 35px); line-height: 1.12; }

.lede { margin: 14px 0 26px; color: var(--dim); max-width: 46ch; }

/* ---------- start screen ---------- */
.hero-cards {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 4px auto 26px;
  aspect-ratio: 1 / .86;
}
.hc {
  position: absolute;
  top: 0;
  width: 44%;
  height: auto;
  border-radius: 10px;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55));
  transform: rotate(var(--r, 0deg)) translateY(var(--y, 0));
  animation: fan .8s cubic-bezier(.2, .8, .2, 1) both;
}
.hc-0 { left: 3%;  --r: -9deg; --y: 16px; }
.hc-1 { left: 28%; --r: 0deg;  --y: -4px; z-index: 2; }
.hc-2 { right: 3%; --r: 9deg;  --y: 16px; }
.hc-only { left: 28%; }

@keyframes fan {
  from { transform: rotate(0deg) translateY(28px); opacity: 0; }
}

.field-label { display: block; margin-bottom: 8px; font-size: 14px; color: var(--dim); }

input[type="text"] {
  width: 100%;
  margin-bottom: 18px;
  padding: 14px 16px;
  font: 500 17px var(--body);
  color: var(--text);
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 8px;
}
input[type="text"]::placeholder { color: #7E74B8; }
input[type="text"]:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-color: var(--amber); }

/* ---------- buttons ---------- */
.btn {
  min-height: 52px;
  padding: 13px 28px;
  border: 0;
  font: 700 21px/1 var(--display);
  letter-spacing: .03em;
  color: var(--text);
  cursor: pointer;
}
.btn.primary {
  background: var(--amber);
  color: #24130A;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px),
                     calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}
.btn.primary:hover { background: #FFB95E; }
.btn.ghost {
  background: transparent;
  border: 1.5px solid var(--violet);
  border-radius: 6px;
}
.btn.ghost:hover { background: rgba(139, 92, 246, .18); }
.btn.link {
  min-height: 44px;
  padding: 10px 6px;
  background: none;
  color: var(--dim);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: 18px;
}
.btn.link:hover { color: var(--text); }
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; clip-path: none; }

#startBtn, #nextBtn { width: 100%; }

/* ---------- quiz ---------- */
.progress { display: grid; gap: 5px; margin-bottom: 14px; }
.seg { height: 6px; border-radius: 2px; background: var(--line); }
.seg.done { background: var(--amber); }
.seg.now { background: var(--violet); }

.meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--dim);
}

.options { margin-top: 22px; }
.opt {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  margin-bottom: 10px;
  padding: 14px 16px;
  text-align: left;
  font: 500 16.5px/1.4 var(--body);
  color: var(--text);
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.opt:hover:not(:disabled) { border-color: var(--violet); background: var(--panel-hi); }
.opt:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.opt:disabled { cursor: default; color: var(--text); }
.letter {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: -1px;
  font: 700 17px/1 var(--display);
  color: var(--ice);
  background: var(--panel-hi);
  border-radius: 4px;
}
.opt.correct { border-color: var(--good); background: rgba(61, 220, 151, .12); }
.opt.correct .letter { background: var(--good); color: #06221A; }
.opt.wrong { border-color: var(--bad); background: rgba(255, 107, 139, .12); }
.opt.wrong .letter { background: var(--bad); color: #2A0712; }
.opt.faded { opacity: .55; }

.feedback {
  margin-top: 18px;
  padding: 16px 18px 18px;
  background: var(--panel);
  border-left: 4px solid var(--good);
  border-radius: 4px 8px 8px 4px;
}
.feedback.is-wrong { border-left-color: var(--bad); }
.verdict { margin: 0 0 6px; font: 700 23px/1.1 var(--display); color: var(--good); }
.feedback.is-wrong .verdict { color: var(--bad); }
.explain { margin: 0 0 16px; font-size: 16px; }

/* ---------- result ---------- */
#cardCanvas {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin: 4px auto 24px;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(255, 165, 58, .25), 0 22px 60px rgba(139, 92, 246, .35);
}
#screen-result { text-align: center; }
#screen-result .lede { margin: 6px auto 24px; }
.scoreline { margin: 6px 0 0; font: 700 24px/1 var(--display); color: var(--amber); }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  max-width: calc(100% - 40px);
  padding: 12px 18px;
  font-size: 15px;
  color: var(--text);
  background: var(--panel-hi);
  border: 1px solid var(--line);
  border-radius: 8px;
  transform: translate(-50%, 16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 520px) {
  #startBtn, #nextBtn { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}