.num { font-family: var(--font-en); font-variant-numeric: tabular-nums; }
.q-top { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; }
.q-player { font-weight: 800; color: var(--text-dim); }
.q-count { margin-inline-start: auto; color: var(--text-mute); font-weight: 700; }
.timer { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-bottom: 1.4rem; }
.timer i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--primary-deep), var(--primary-light)); border-radius: 99px; transform-origin: right; }
html[dir='ltr'] .timer i { transform-origin: left; }
.timer.is-low i { background: linear-gradient(90deg, #b91c1c, var(--danger)); }
.q-box { position: relative; text-align: center; padding: clamp(1.6rem, 5vw, 2.6rem) 1.2rem; border-radius: calc(var(--radius) + 6px); background: radial-gradient(ellipse at 50% 0%, rgb(var(--primary-rgb) / .12), transparent 70%), var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); margin-bottom: 1.2rem; animation: screen-in .45s var(--ease); }
.q-box h2 { margin: .6rem 0 0; font-size: clamp(1.3rem, 3.8vw, 1.9rem); line-height: 1.6; text-wrap: balance; }
.q-sec { width: 60px; height: 60px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; font-weight: 900; color: var(--primary-ink); border: 3px solid var(--line); }
.answers { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 560px) { .answers { grid-template-columns: 1fr; } }
.ans { display: flex; align-items: center; gap: .8rem; min-height: 64px; padding: .7rem 1rem; border-radius: 16px; background: var(--surface); border: 2px solid var(--line-soft); font-weight: 800; font-size: 1.05rem; text-align: start; transition: transform .25s var(--ease), border-color .25s, background .25s; animation: screen-in .4s var(--ease) backwards; }
.ans:nth-child(2) { animation-delay: 60ms; } .ans:nth-child(3) { animation-delay: 120ms; } .ans:nth-child(4) { animation-delay: 180ms; }
.ans:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--primary); }
.ans i { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-3); font-style: normal; font-weight: 900; flex: none; color: var(--primary-ink); }
.ans:disabled { cursor: default; }
.ans.is-right { border-color: var(--ok); background: rgb(34 197 94 / .14); }
.ans.is-right i { background: var(--ok); color: #04210f; }
.ans.is-wrong { border-color: var(--danger); background: rgb(239 68 68 / .12); animation: shake .4s; }
.ans.is-wrong i { background: var(--danger); color: #fff; }
.ans.is-dim { opacity: .45; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.q-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; }
.q-score { display: flex; align-items: baseline; gap: .5rem; color: var(--text-dim); font-weight: 700; }
.q-score b { font-size: 1.8rem; color: var(--primary-ink); }
.q-score em { font-style: normal; color: #f97316; font-weight: 900; }
.pop-pts { position: fixed; z-index: 30; font-weight: 900; font-size: 1.6rem; color: var(--ok); font-family: var(--font-en); pointer-events: none; animation: popup 1s var(--ease) forwards; }
@keyframes popup { to { transform: translateY(-50px); opacity: 0; } }

.answers.is-bot .ans { pointer-events: none; }