@import url('../_shared/arcade.css?v=20260607c');
:root{ --accent:#7c5cff; --accent2:#16e0ff; --gold:#ffd24a; }
.game-shell{ background:radial-gradient(circle at 50% 8%,#241452 0%,#100a2e 45%,#05030f 100%); }
.quiz{position:absolute;inset:0;z-index:16;display:flex;flex-direction:column;justify-content:center;gap:14px;
  padding:max(64px,calc(56px + var(--safe-top))) 16px max(16px,var(--safe-bottom));pointer-events:none}
.quiz.hidden{display:none}
.quiz>*{pointer-events:auto}
.q-top{display:flex;align-items:center;gap:10px}
.q-cat{font-size:.66rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#05030f;background:var(--accent2);padding:.25rem .7rem;border-radius:999px;white-space:nowrap}
.q-timerbar{flex:1;height:12px;border-radius:7px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);overflow:hidden}
#q-timerfill{display:block;height:100%;width:100%;background:linear-gradient(90deg,#3ce86a,#ffd24a,#ff5b5b);transition:width .12s linear}
.q-text{font-size:clamp(1.15rem,4.6vw,1.7rem);font-weight:800;line-height:1.3;text-align:center;
  background:rgba(10,8,30,.6);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:18px 16px;min-height:3em;display:flex;align-items:center;justify-content:center}
.q-answers{display:grid;gap:10px}
@media(min-width:520px){.q-answers{grid-template-columns:1fr 1fr}}
.ans{display:flex;align-items:center;gap:10px;text-align:left;min-height:56px;padding:.7rem 1rem;border-radius:14px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:var(--text);font-weight:700;font-size:.98rem;transition:transform .08s,background .15s,border-color .15s}
.ans .key{width:26px;height:26px;flex-shrink:0;border-radius:8px;background:rgba(255,255,255,.1);display:grid;place-items:center;font-size:.78rem;font-weight:900;color:var(--accent2)}
.ans:hover{background:rgba(255,255,255,.1)}
.ans:active{transform:scale(.98)}
.ans.correct{background:rgba(60,232,106,.25);border-color:#3ce86a;color:#fff}
.ans.wrong{background:rgba(255,59,92,.22);border-color:#ff3b5c}
.ans.dim{opacity:.32;pointer-events:none}
.ans:disabled{cursor:default}
.q-lifelines{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.ll{padding:.55rem .9rem;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);font-weight:800;font-size:.84rem}
.ll:hover{background:rgba(255,255,255,.12)}
.ll.used{opacity:.35;pointer-events:none}