.narrow { max-width: 620px; }
.start { display: grid; gap: 14px; }
.opt { display: grid; gap: 6px; }
.lbl { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.best { margin: 0; color: var(--muted); font-size: 0.9rem; min-height: 1.2em; }
.go { justify-self: start; padding: 12px 28px; font-size: 1.1rem; }

.bar { height: 8px; margin: 0 0 12px; border-radius: 99px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #35a86d, #f2c230, #e5484d); background-size: 300% 100%; transform-origin: left; transition: transform 0.2s linear; }
.bar.off { visibility: hidden; }

.qbox { display: grid; gap: 12px; }
.topic { justify-self: start; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #1b120c; background: var(--gold); }
#qtext { margin: 0; font-size: clamp(1.2rem, 4.2vw, 1.6rem); line-height: 1.3; }
.answers { display: grid; gap: 10px; }
.ans {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  text-align: left;
  font: 700 1.05rem "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: 0 3px 0 var(--line);
  border-radius: 12px;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.1s, border-color 0.15s, background 0.15s;
}
.ans:hover:not(:disabled) { border-color: var(--gold); transform: translateX(3px); }
.ans .k { flex: none; width: 1.9em; height: 1.9em; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); font-size: 0.85rem; }
.ans.right { border-color: var(--green); background: color-mix(in srgb, var(--green) 18%, var(--surface)); animation: pop 0.35s; }
.ans.wrong { border-color: var(--red); background: color-mix(in srgb, var(--red) 16%, var(--surface)); animation: shake 0.35s; }
.ans:disabled { cursor: default; }
.ans:disabled:not(.right):not(.wrong) { opacity: 0.55; }
@keyframes pop { 40% { transform: scale(1.03); } }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.why { margin: 0; min-height: 1.4em; color: var(--muted); }
.big { font-size: 3.2rem; }