/* فاز هشتم: قهرمان اختصاصی، آموزش شنیداری و جشن قابل‌دسترس */
.hero-art--noma{isolation:isolate;display:grid;place-items:center;overflow:visible}
.hero-noma{display:block;width:min(100%,490px);max-height:450px;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 16px 24px rgba(75,58,127,.13));animation:noma-sway 5s ease-in-out infinite}
.hero-noma-caption{position:absolute;bottom:0;inset-inline-start:10%;z-index:2;background:#fff;border:2px solid #ccbbff;border-radius:24px;padding:9px 18px;color:#4e3a8c;font-weight:800;box-shadow:0 6px 20px #6c53bf1b}
.voice-tools{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:9px;margin:14px 0;padding:10px 14px;border-radius:22px;background:#f0fffc;border:2px solid #cbebe7;color:#245c66}
.voice-tools--center{justify-content:center;margin-inline:auto;max-width:490px}
.voice-badge{width:40px;height:40px;flex:0 0 40px;animation:noma-sway 4s ease-in-out infinite}
.voice-tools-label{font-weight:800;font-size:.95rem}
.voice-button{appearance:none;border:2px solid #2c9c9f;border-radius:14px;background:#147b87;color:#fff;font:inherit;font-weight:800;cursor:pointer;padding:9px 13px;min-height:43px;transition:transform .18s,box-shadow .18s}
.voice-button:hover:not(:disabled),.voice-button:focus-visible{transform:translateY(-2px);box-shadow:0 4px 15px #147b8740}
.voice-button:focus-visible{outline:3px solid #fead56;outline-offset:3px}
.voice-button--outline{background:#fff;color:#176977}
.voice-button:disabled{opacity:.55;cursor:not-allowed}
.voice-muted{font-size:.85rem;color:#645770}
.audio-volume{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.audio-volume input{flex:1;min-width:145px;accent-color:#774ce2;cursor:pointer}
.audio-volume output{min-width:48px;direction:ltr;text-align:center;font-weight:800}
.audio-preview{margin-top:12px}
.audio-settings-note{font-size:.84rem;line-height:1.9;color:#5e6071}
.guide-hero{display:flex;align-items:center;gap:18px;margin:16px 0 25px;background:#fff9e8;border:2px solid #f1deb9;border-radius:24px;padding:12px 20px}
.guide-hero img{width:80px;min-width:80px;height:80px;object-fit:contain}
.guide-hero strong{display:block;color:#56388e;font-size:1.1rem}
.guide-hero p{margin:0;color:#52616a}
.game-feedback{position:relative;overflow:hidden}
.game-feedback .feedback-emoji{display:inline-block;animation:noma-pop .56s cubic-bezier(.18,1.4,.44,1)}
.feedback-correct::before,.exam-result:has(.exam-mascot)::before{content:'✦  ✦  ✳';position:absolute;inset-inline-start:4%;top:14px;color:#ecad55;font-size:2rem;opacity:.8;pointer-events:none;animation:star-rise 2.2s ease-in-out infinite alternate}
.celebration-sticker{display:inline-flex;gap:8px;align-items:center;justify-content:center;margin:6px auto 15px;border:2px solid #d8cafa;background:#f5efff;border-radius:999px;padding:9px 15px;font-weight:800;color:#583a93}
.celebration-sticker img{width:42px;height:42px}
@keyframes noma-sway{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes noma-pop{from{opacity:.5;transform:scale(.78) rotate(-10deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes star-rise{from{transform:translateY(7px);opacity:.5}to{transform:translateY(-12px);opacity:1}}
@media(max-width:680px){.hero-noma{max-height:290px}.hero-noma-caption{bottom:-4px;inset-inline-start:5%;font-size:.8rem}.voice-tools{gap:7px;padding:9px}.voice-tools-label{width:calc(100% - 54px)}.voice-button{flex:1;font-size:.86rem}.guide-hero img{width:65px;min-width:65px;height:65px}}
@media(prefers-reduced-motion:reduce){.hero-noma,.voice-badge,.feedback-emoji,.feedback-correct::before,.exam-result::before{animation:none!important;transition:none!important;transform:none!important}}
html.reduced-motion .hero-noma,html.reduced-motion .voice-badge,html.reduced-motion .feedback-emoji,html.reduced-motion .feedback-correct::before,html.reduced-motion .exam-result::before{animation:none!important;transition:none!important;transform:none!important}
/* به جای آشکارسازی جواب، فقط اجزای دیداری خودِ سؤال یکی‌یکی ظاهر می‌شوند. */
.pattern-figure .pattern-dot{animation:pattern-bloom .45s ease both}
.pattern-figure:nth-child(2) .pattern-dot{animation-delay:.28s}
.pattern-figure:nth-child(3) .pattern-dot{animation-delay:.54s}
.machine-flow .machine-node{animation:machine-glow .7s ease both}
.machine-flow .machine-node:nth-child(3){animation-delay:.25s}
.machine-flow .machine-node:nth-child(5){animation-delay:.5s}
.million-table .million-focus{animation:place-highlight 2.8s ease-in-out infinite alternate}
@keyframes pattern-bloom{from{opacity:.2;transform:scale(.35)}to{opacity:1;transform:scale(1)}}
@keyframes machine-glow{from{opacity:.4;filter:brightness(1.18)}to{opacity:1;filter:none}}
@keyframes place-highlight{from{box-shadow:inset 0 0 0 0 #f5bb42}to{box-shadow:inset 0 0 0 4px #f5bb42}}
@media(prefers-reduced-motion:reduce){.pattern-dot,.machine-node,.million-focus{animation:none!important}}
html.reduced-motion .pattern-dot,html.reduced-motion .machine-node,html.reduced-motion .million-focus{animation:none!important}