#quiz-view{display:none;min-height:0;flex-direction:column;gap:clamp(6px,calc(9px * var(--scene-scale,1)),9px);padding:clamp(8px,calc(15px * var(--scene-scale,1)),15px) clamp(13px,calc(20px * var(--scene-scale,1)),20px);overflow:hidden}
#quiz-view.active{display:flex}
.quiz-heading{flex:none;min-height:30px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.quiz-heading h1{font-size:clamp(22px,calc(26px * var(--scene-scale,1)),26px);font-weight:760;letter-spacing:-.75px;line-height:1.15;color:#75435f;margin:0}
.quiz-count{font-size:12px;line-height:20px;font-weight:700;font-variant-numeric:tabular-nums;color:#a16b8c;white-space:nowrap}
.quiz-intro{flex:none;min-height:20px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.quiz-question{font-size:15px;line-height:20px;letter-spacing:-.25px;font-weight:650;color:#94627e;margin:0}
.quiz-feedback{font-size:12px;line-height:20px;font-weight:700;color:#679d80}
.quiz-progress{flex:none;height:4px;overflow:hidden;background:#dfbdd14d;border-radius:5px}
.quiz-progress>span{display:block;width:var(--quiz-progress,0%);height:100%;background:linear-gradient(90deg,#e965a4,#cd5eac);border-radius:inherit;transition:width .25s ease}
.quiz-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(7px,calc(11px * var(--scene-scale,1)),11px);flex:1;min-height:0;animation:quiz-appear .2s ease-out both}
.quiz-card{position:relative;display:flex;flex-direction:column;min-width:44px;min-height:44px;padding:6px 6px 5px;gap:4px;border:2px solid #f9eff6;border-radius:17px;overflow:hidden;background:#fbf8fa;color:#745168;box-shadow:0 3px 12px #9c66810a;text-align:left;-webkit-tap-highlight-color:transparent;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;touch-action:manipulation}
.quiz-card:not(:disabled):active{border-color:#e48db8;background:#fff6fb}
.quiz-card:focus-visible{outline:2px solid #bc518c;outline-offset:1px}
.quiz-photo-wrap{display:flex;align-items:center;justify-content:center;flex:1;min-height:0;overflow:hidden;border-radius:10px;background:#ededed}
.quiz-photo{display:block;width:100%;height:100%;max-height:100%;min-height:0;object-fit:contain;user-select:none;-webkit-user-drag:none;pointer-events:none}
.quiz-name{display:-webkit-box;flex:none;min-height:24px;max-height:24px;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:10px;line-height:12px;font-weight:550;letter-spacing:-.05px;color:#8c7584}
.quiz-price{flex:none;height:20px;line-height:20px;color:#6b4b60;font-size:15px;font-weight:750;letter-spacing:-.4px;opacity:0;transform:translateY(3px);transition:opacity .2s ease,transform .2s ease;font-variant-numeric:tabular-nums}
.is-answered .quiz-price{opacity:1;transform:none}
.quiz-card.is-correct{border-color:#82ba9b;box-shadow:0 0 0 1px #82ba9b26,0 4px 13px #4d936e0a;background:#f6fcf8}
.quiz-card.is-correct .quiz-price{color:#4b916b}
.quiz-card.is-correct:after{content:'✓';position:absolute;right:10px;top:10px;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;font-size:13px;font-weight:800;line-height:1;background:#78af90;color:#fff;box-shadow:0 2px 7px #437e5d15}
.quiz-card.is-wrong{border-color:#d79caf}
.quiz-footer{flex:none;height:max(44px,calc(52px * var(--scene-scale,1)));display:flex;align-items:center;justify-content:center}
.quiz-footer .spin-button{width:100%;height:100%;min-height:44px;font-size:15px;max-width:320px}
.quiz-snapshot{flex:none;font-size:9px;line-height:12px;text-align:center;color:#b38b9f;margin:0}
.quiz-result{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,calc(28px * var(--scene-scale,1)),28px);flex:1;min-height:0;text-align:center;animation:quiz-appear .25s ease-out both}
.quiz-result h1{margin:0;color:#9a4b78;font-size:24px;letter-spacing:-.7px;font-weight:740}
.quiz-final-score{font-size:clamp(52px,calc(72px * var(--scene-scale,1)),72px);font-variant-numeric:tabular-nums;font-weight:780;letter-spacing:-2px;color:#974b78;line-height:1.1}
.quiz-earned{display:flex;align-items:center;gap:11px;color:#b34b82;font-size:22px;letter-spacing:-.4px}
.quiz-earned img{display:block;width:56px;height:56px;object-fit:contain}
.quiz-result>.spin-button{margin-top:6px;max-width:280px;min-height:44px}
.quiz-status{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;color:#9a6283;font-size:14px}
.quiz-status h1{font-size:24px;font-weight:740;letter-spacing:-.7px;margin:0;color:#75435f}
.quiz-status p{margin:0}.quiz-status .spin-button{max-width:260px;min-height:44px}
.paused .quiz-options,.paused .quiz-result{animation-play-state:paused}
@keyframes quiz-appear{from{opacity:.25;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-height:620px){#quiz-view{gap:6px;padding-top:8px;padding-bottom:7px}.quiz-heading{min-height:27px}.quiz-heading h1{font-size:22px}.quiz-card{border-radius:13px;padding:4px;gap:3px}.quiz-photo-wrap{border-radius:8px}.quiz-name{font-size:9px;line-height:11px;min-height:22px;max-height:22px}.quiz-price{height:18px;line-height:18px;font-size:13px}.quiz-footer{height:44px}.quiz-result{gap:20px}}
@media(prefers-reduced-motion:reduce){.quiz-options,.quiz-result{animation:none!important}.quiz-card,.quiz-price,.quiz-progress>span{transition:none!important}}