/* Quiz roulette: playful, big touch targets, no form-filling feel. */
.qr{max-width:1100px;margin:0 auto}
.qr-scene{display:none}
.qr-scene.is-active{display:block;animation:qr-in .45s cubic-bezier(.22,1,.36,1)}
@keyframes qr-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.qr-step{display:flex;align-items:center;gap:.7rem;font-size:1.25rem;margin:1.6rem 0 1rem}
.qr-step span{width:2rem;height:2rem;border-radius:50%;background:#141414;color:#fff;display:grid;place-items:center;font-size:.95rem}
.qr-levels{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.qr-level{border:0;background:#fff;box-shadow:inset 0 0 0 1px #0000001f;border-radius:999px;padding:.6rem 1.3rem;font-size:1rem;font-weight:600;cursor:pointer;transition:background .15s,color .15s,transform .15s}
.qr-level.is-on{background:#141414;color:#fff;box-shadow:none}
.qr-level:active{transform:scale(.96)}
.qr-banks{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.8rem}
.qr-bank{border:0;background:#fff;border-radius:1.2rem;box-shadow:0 1px 2px #0000000a,0 10px 26px #00000010,0 0 0 1px #0000000d;padding:1.1rem;display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;cursor:pointer;text-align:left;transition:transform .25s cubic-bezier(.34,1.4,.64,1),box-shadow .2s;animation:qr-pop .45s cubic-bezier(.34,1.4,.64,1) both;animation-delay:calc(var(--i) * 30ms)}
@keyframes qr-pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.qr-bank:hover{transform:translateY(-3px)}
.qr-bank.is-on{box-shadow:0 0 0 3px #141414,0 14px 30px #0000001f;transform:translateY(-3px)}
.qr-bank-mark{width:2.6rem;height:2.6rem;border-radius:50%;background:#141414;color:#fff;display:grid;place-items:center;font-weight:700;font-size:1.1rem}
.qr-bank b{font-size:1.05rem}.qr-bank small{color:#6b6c6e}
.qr-settings{margin-top:1rem;background:#fff;border-radius:1.6rem;box-shadow:0 1px 2px #0000000a,0 14px 40px #00000012;padding:1.4rem 1.6rem 1.8rem;animation:qr-in .45s cubic-bezier(.22,1,.36,1)}
.qr-count{display:flex;align-items:center;justify-content:center;gap:1.4rem}
.qr-round{width:4.2rem;height:4.2rem;border-radius:50%;border:0;background:#f1f1ef;font-size:2rem;cursor:pointer;transition:transform .15s,background .15s}
.qr-round:hover{background:#e6e6e3}.qr-round:active{transform:scale(.9)}
.qr-big{font-size:clamp(4rem,10vw,6.5rem);font-weight:800;letter-spacing:-.04em;min-width:2.2ch;text-align:center;line-height:1;font-variant-numeric:tabular-nums;transition:transform .2s cubic-bezier(.34,1.4,.64,1)}
.qr-big.bump{transform:scale(1.12)}
#qr-range{width:100%;max-width:520px;display:block;margin:1rem auto 0;accent-color:#141414}
.qr-quick{display:flex;gap:.4rem;justify-content:center;margin-top:.8rem;flex-wrap:wrap}
.qr-quick button,.qr-per button{border:0;background:#f1f1ef;border-radius:999px;padding:.5rem 1rem;font-weight:600;cursor:pointer}
.qr-per{display:flex;gap:.5rem}
.qr-per button.is-on{background:#141414;color:#fff}
.qr-absent{margin-top:1.4rem}.qr-absent summary{cursor:pointer;font-weight:600}
.qr-bubbles{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:.4rem;margin-top:.8rem}
.qr-bubbles button{aspect-ratio:1;border-radius:50%;border:0;background:#141414;color:#fff;font-weight:700;cursor:pointer;transition:background .15s,transform .15s}
.qr-bubbles button.absent{background:#e3e3e0;color:#9a9a98;text-decoration:line-through}
.qr-go{display:block;margin:1.8rem auto 0;border:0;background:#141414;color:#fff;font-size:1.35rem;font-weight:800;padding:1rem 2.6rem;border-radius:999px;cursor:pointer;box-shadow:0 10px 24px #00000033;transition:transform .2s cubic-bezier(.34,1.4,.64,1)}
.qr-go:hover{transform:translateY(-2px) scale(1.02)}.qr-go:active{transform:scale(.96)}
.qr-go[disabled]{opacity:.4;pointer-events:none}
.qr-bar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:1rem 0;font-weight:700}
.qr-bank-name{color:#6b6c6e;font-weight:500}
.qr-bar-actions{margin-left:auto;display:flex;gap:.4rem;flex-wrap:wrap}
.qr-stage{background:#fff;border-radius:1.8rem;box-shadow:0 1px 2px #0000000a,0 18px 50px #00000014;padding:1.6rem;min-height:520px;display:flex;flex-direction:column;align-items:center;gap:1.2rem}
.qr-stage:fullscreen{border-radius:0;justify-content:center;padding:3rem}
.qr-reel{display:flex;flex-direction:column;align-items:center;background:#141414;color:#fff;border-radius:1.4rem;padding:.8rem 2.4rem 1rem;min-width:220px}
.qr-reel-label{font-size:.85rem;letter-spacing:.2em;opacity:.7}
.qr-reel-num{font-size:clamp(4rem,11vw,7rem);font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.qr-reel.landed{animation:qr-land .5s cubic-bezier(.34,1.6,.64,1)}
@keyframes qr-land{0%{transform:scale(1)}40%{transform:scale(1.15)}100%{transform:scale(1)}}
.qr-cards{width:100%;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.qr-card{perspective:1600px;min-height:220px;cursor:pointer}
.qr-card-inner{position:relative;width:100%;height:100%;min-height:220px;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.7,.2,1)}
.qr-card.flipped .qr-card-inner{transform:rotateY(180deg)}
.qr-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:1.3rem;padding:1.4rem 1.6rem;display:flex;flex-direction:column;gap:.7rem;box-shadow:0 0 0 2px #141414}
.qr-front{background:#fffdf3}
.qr-back{background:#141414;color:#fff;transform:rotateY(180deg)}
.qr-face small{font-size:.8rem;letter-spacing:.15em;opacity:.65}
.qr-q{font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:700;line-height:1.45}
.qr-a{font-size:clamp(1.4rem,2.8vw,2rem);font-weight:800;line-height:1.4}
.qr-e{font-size:1rem;opacity:.8;line-height:1.6}
.qr-hint{margin-top:auto;font-size:.82rem;color:#6b6c6e}
.qr-back .qr-hint{color:#bbb}
.qr-card.enter{animation:qr-card-in .55s cubic-bezier(.34,1.4,.64,1) both}
@keyframes qr-card-in{from{opacity:0;transform:translateY(30px) rotate(-2deg) scale(.95)}to{opacity:1;transform:none}}
.qr-controls{margin-top:auto}
.qr-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.6rem}
.qr-board button{border:0;background:#fff;border-radius:1rem;box-shadow:0 0 0 1px #0000001a;padding:.8rem .6rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.25rem;transition:transform .15s}
.qr-board button:hover{transform:translateY(-2px)}
.qr-board button.done{background:#141414;color:#fff}
.qr-board b{font-size:1.6rem}.qr-board small{font-size:.75rem;opacity:.7}
.qr-dialog{border:0;border-radius:1.4rem;padding:1.2rem;max-width:720px;width:calc(100% - 2rem)}
.qr-dialog::backdrop{background:#0008}
.qr-dialog .qr-cards{margin-bottom:1rem}
@media (prefers-reduced-motion:reduce){.qr-card-inner{transition:none}.qr-scene.is-active,.qr-bank,.qr-card.enter{animation:none}}