/* 🎧 «گوش طلایی» — a dark stage with gold light; one screen per phase (home, lobby, play, reveal, end) */
.mq-body{--bg:#06070d;--fg:#11131f;--fg2:#181b2b;--line:rgba(255,255,255,.08);--text:#b9c0d4;--strong:#f6f3ea;--muted:#7a819a;--au:#FFD34D;--au2:#F29A1F;--ok:#3EE58A;--no:#FF5C7A;background:#06070d;color-scheme:dark}
.mq-body footer{display:none}
.mq{position:relative;min-height:100vh;min-height:100svh;padding:76px 16px 120px;font-family:Vazirmatn,system-ui,sans-serif;color:var(--text);isolation:isolate;overflow-x:hidden}
.mq *{box-sizing:border-box}
.mq-ssr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:where(.mq) button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mq a{color:inherit}
.mq-w{max-width:560px;margin:0 auto;position:relative}
/* the light behind everything: gold above, the song's colour after a reveal */
.mq-amb{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(70% 45% at 50% 0,rgba(255,196,60,.16),transparent 70%),radial-gradient(60% 40% at 85% 100%,color-mix(in srgb,var(--cc,#8B6CFF) 22%,transparent),transparent 70%);transition:background .8s}
.mq-amb::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(180deg,#000,transparent 70%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%)}
.mq-gold{background:linear-gradient(100deg,#fff6d5 0%,var(--au) 35%,var(--au2) 65%,#fff1b8 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:mqSheen 5s linear infinite}
@keyframes mqSheen{to{background-position:-200% 0}}

/* ---------- home */
.mq-hero{text-align:center;padding:6px 0 4px}
.mq-disc{--s:200px;position:relative;width:var(--s);height:var(--s);margin:0 auto 18px}
.mq-vin{position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,#121218 0 2px,#1b1b23 2px 3px),#111;box-shadow:0 0 0 2px rgba(255,211,77,.18),0 18px 60px rgba(0,0,0,.6),0 0 80px rgba(255,190,60,.18);animation:mqSpin 6s linear infinite}
.mq-vin::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent 0 12%,rgba(255,255,255,.13) 16%,transparent 22% 58%,rgba(255,255,255,.08) 62%,transparent 68%)}
.mq-vin::after{content:"";position:absolute;inset:33%;border-radius:50%;background:radial-gradient(circle,#06070d 0 7%,transparent 8%),linear-gradient(135deg,var(--au),var(--au2));box-shadow:inset 0 0 0 3px rgba(0,0,0,.25)}
.mq-stage .mq-vin::after{background:linear-gradient(135deg,var(--au),var(--au2))}
.mq-disc.cov .mq-vin::after{background:radial-gradient(circle,#06070d 0 7%,transparent 8%),var(--img) center/cover,linear-gradient(135deg,var(--au),var(--au2))}
@keyframes mqSpin{to{transform:rotate(1turn)}}
.mq-disc canvas{position:absolute;inset:-26%;width:152%;height:152%;pointer-events:none}
.mq-eq{display:flex;gap:4px;justify-content:center;align-items:flex-end;height:22px;margin:0 auto 10px}
.mq-eq i{width:4px;border-radius:3px;background:linear-gradient(var(--au),var(--au2));animation:mqEq 1s ease-in-out infinite alternate}
.mq-eq i:nth-child(2){animation-delay:-.3s}.mq-eq i:nth-child(3){animation-delay:-.6s}.mq-eq i:nth-child(4){animation-delay:-.15s}.mq-eq i:nth-child(5){animation-delay:-.45s}
@keyframes mqEq{from{height:4px}to{height:22px}}
.mq h1{font:400 44px/1.1 Lalezar,Vazirmatn,sans-serif;margin:0 0 6px;letter-spacing:0}
.mq-sub{color:var(--text);margin:0 0 6px;font-size:15px}
.mq-pool{display:inline-flex;gap:8px;align-items:center;font-size:12.5px;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--line);padding:4px 12px;border-radius:30px}
.mq-pool b{color:var(--au);font-weight:700}
.mq-acts{display:grid;gap:10px;margin:22px 0 14px}
.mq-act{position:relative;display:flex;align-items:center;gap:14px;text-align:right;padding:16px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));border:1px solid var(--line);overflow:hidden;transition:transform .2s,border-color .2s}
.mq-act:hover{border-color:rgba(255,211,77,.35)}
.mq-act:active{transform:scale(.98)}
.mq-act .ic{flex:none;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:24px;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 8px 24px color-mix(in srgb,var(--c2) 40%,transparent);color:#1a1205}
.mq-act b{display:block;color:var(--strong);font-size:17px;font-weight:800}
.mq-act small{display:block;color:var(--muted);font-size:13px;line-height:1.6}
.mq-act.main{border-color:rgba(255,211,77,.4);background:linear-gradient(135deg,rgba(255,211,77,.16),rgba(242,154,31,.06))}
.mq-act.main::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.12) 50%,transparent 70%);transform:translateX(100%);animation:mqShine 3.6s ease-in-out infinite}
@keyframes mqShine{0%,55%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
.mq-join{display:flex;gap:8px;margin-top:2px}
.mq-in{flex:1;min-width:0;height:48px;border-radius:14px;border:1px solid var(--line);background:rgba(0,0,0,.35);color:var(--strong);font:600 16px Vazirmatn,sans-serif;padding:0 14px;outline:none;transition:border-color .2s}
.mq-in:focus{border-color:rgba(255,211,77,.6)}
.mq-in.code{text-transform:uppercase;letter-spacing:.3em;text-align:center;direction:ltr;font-weight:800}
.mq-btn{height:48px;padding:0 20px;border-radius:14px;font-weight:800!important;background:rgba(255,255,255,.08);border:1px solid var(--line)!important;color:var(--strong)!important;white-space:nowrap;transition:transform .15s,filter .2s}
.mq-btn:active{transform:scale(.96)}
.mq-btn.au{background:linear-gradient(135deg,var(--au),var(--au2));color:#1d1404!important;border:0!important;box-shadow:0 10px 30px rgba(242,154,31,.3)}
.mq-btn[disabled]{opacity:.45;pointer-events:none}
.mq-btn.big{height:56px;font-size:17px;width:100%}
.mq-sec{margin-top:18px;padding:16px;border-radius:20px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.mq-sec h3{margin:0 0 10px;font-size:14px;color:var(--strong);font-weight:800}
.mq-set{display:grid;gap:10px}
.mq-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mq-row>span{min-width:62px;font-size:13px;color:var(--muted)}
.mq-chips{display:flex;gap:6px;flex-wrap:wrap}
.mq-chip{padding:6px 12px;border-radius:30px;font-size:13px;font-weight:700;background:rgba(255,255,255,.05);border:1px solid var(--line)!important;color:var(--text)!important}
.mq-chip.on{background:rgba(255,211,77,.15);border-color:rgba(255,211,77,.55)!important;color:var(--au)!important}
.mq-chip[disabled]{pointer-events:none}
.mq-note{font-size:13px;color:var(--muted);line-height:1.9;margin:10px 0 0}
.mq-note b{color:var(--strong)}
.mq-wait{text-align:center;padding:16px;border-radius:18px;border:1px dashed rgba(255,211,77,.35);color:var(--strong);margin:18px 0 0;font-size:14px;line-height:1.9}
.mq-own{font-size:12.5px;line-height:2;color:var(--muted)}
.mq-own b{color:var(--strong)}
.mq-how{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;text-align:center}
.mq-how div{padding:10px 6px;border-radius:14px;background:rgba(255,255,255,.03);font-size:12px;line-height:1.7}
.mq-how i{display:block;font-style:normal;font-size:20px}
.mq-credit{text-align:center;font-size:11.5px;color:var(--muted);margin-top:18px;opacity:.8}

/* ---------- lobby */
.mq-lob{text-align:center}
.mq-code{display:inline-flex;gap:6px;direction:ltr;margin:6px 0 4px}
.mq-code i{font-style:normal;width:46px;height:58px;display:grid;place-items:center;font:800 28px/1 Vazirmatn,sans-serif;color:var(--strong);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(255,211,77,.3);box-shadow:inset 0 -3px 0 rgba(255,211,77,.25)}
.mq-share{display:flex;gap:8px;justify-content:center;margin:12px 0 0}
.mq-ppl{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:6px}
.mq-p{position:relative;padding:12px 6px 10px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line);text-align:center;animation:mqPop .45s cubic-bezier(.3,1.5,.5,1) both}
.mq-p b{display:block;font-size:13px;color:var(--strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mq-p small{font-size:11px;color:var(--au)}
.mq-av{width:44px;height:44px;border-radius:50%;margin:0 auto 6px;display:grid;place-items:center;font-weight:800;font-size:18px;color:#fff;background:hsl(var(--h,205) 60% 45%) center/cover;font-style:normal;box-shadow:0 0 0 2px rgba(255,255,255,.08)}
@keyframes mqPop{from{transform:scale(.6);opacity:0}}
.mq-wt{color:var(--muted);font-size:13px;margin:14px 0 0}
.mq-wt i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--au);margin:0 2px;animation:mqDot 1.2s infinite}
.mq-wt i:nth-child(2){animation-delay:.2s}.mq-wt i:nth-child(3){animation-delay:.4s}
@keyframes mqDot{50%{opacity:.2;transform:translateY(-3px)}}

/* ---------- play */
.mq-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;font-size:13px}
.mq-top .rd{color:var(--muted)}
.mq-top .rd b{color:var(--strong);font-size:15px}
.mq-top .sc{display:flex;gap:8px;align-items:center}
.mq-top .sc small{color:var(--muted);font-size:12px}
.mq-top .sc b{color:var(--au);font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.mq-fire{display:none;align-items:center;gap:3px;padding:2px 10px;border-radius:20px;background:rgba(255,120,40,.15);color:#FF9A4D;font-weight:800;font-size:12.5px}
.mq-fire.on{display:inline-flex;animation:mqPop .4s cubic-bezier(.3,1.5,.5,1)}
.mq-prog{display:flex;gap:3px;margin-bottom:14px}
.mq-prog i{flex:1;height:4px;border-radius:3px;background:rgba(255,255,255,.08)}
.mq-prog i.ok{background:var(--ok)}.mq-prog i.no{background:var(--no);opacity:.7}.mq-prog i.now{background:var(--au);box-shadow:0 0 8px var(--au)}
.mq-stage{position:relative;display:grid;place-items:center;padding:20px 0 6px}
.mq-stage .mq-disc{--s:min(46vw,200px)}
.mq-ring{position:absolute;inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px);transform:rotate(-90deg);pointer-events:none}
.mq-ring circle{fill:none;stroke-width:4;stroke-linecap:round}
.mq-ring .bg{stroke:rgba(255,255,255,.07)}
.mq-ring .fg{stroke:url(#mqg);transition:stroke .3s}
.mq-ring.low .fg{stroke:var(--no)}
.mq-tm{position:absolute;inset:0;display:grid;place-items:center;font:800 26px Vazirmatn,sans-serif;color:#1d1404;font-variant-numeric:tabular-nums;pointer-events:none;z-index:1}
.mq-tm.low{color:#7a0618;animation:mqBeat .5s infinite alternate}
@keyframes mqBeat{to{transform:scale(1.15)}}
.mq-cd{position:absolute;inset:0;display:grid;place-items:center;z-index:2;font:400 92px/1 Lalezar,Vazirmatn,sans-serif;color:var(--au);text-shadow:0 0 40px rgba(255,190,60,.6);pointer-events:none}
.mq-cd span{animation:mqCd 1s ease-out both}
@keyframes mqCd{from{transform:scale(2);opacity:0}30%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.6)}}
.mq-kind{text-align:center;margin:26px 0 10px;font-size:13px;color:var(--muted);min-height:22px}
.mq-kind b{color:var(--strong)}
.mq-ask{position:relative}
.mq-ask .mq-in{height:54px;font-size:16px;padding-inline-start:44px}
.mq-ask>svg{position:absolute;top:17px;inset-inline-start:15px;width:20px;height:20px;color:var(--muted);pointer-events:none}
.mq-ask.shake{animation:mqShake .45s}
@keyframes mqShake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.mq-sug{position:absolute;inset-inline:0;bottom:calc(100% + 6px);z-index:5;background:#141726;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:5px;box-shadow:0 -14px 40px rgba(0,0,0,.55);display:none;max-height:min(46vh,320px);overflow-y:auto}
.mq-sug.on{display:block}
.mq-sug button{display:block;width:100%;text-align:right;padding:10px 12px;border-radius:11px;font-size:15px;color:var(--strong)!important;line-height:1.5}
.mq-sug button small{display:block;font-size:12px;color:var(--muted);direction:ltr;text-align:right}
.mq-sug button.on,.mq-sug button:hover{background:rgba(255,211,77,.12)}
.mq-sug mark{background:none;color:var(--au);font-weight:800}
.mq-under{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:13px;color:var(--muted)}
.mq-tries{display:flex;gap:5px;align-items:center}
.mq-tries i{width:10px;height:10px;border-radius:50%;background:var(--au);box-shadow:0 0 8px rgba(255,211,77,.6);transition:all .3s}
.mq-tries i.x{background:rgba(255,255,255,.12);box-shadow:none}
.mq-give{font-size:13px;color:var(--muted)!important;padding:6px 4px;text-decoration:underline;text-underline-offset:4px}
.mq-done{text-align:center;padding:16px;border-radius:18px;font-weight:800;font-size:16px;color:var(--strong)}
.mq-done.ok{background:rgba(62,229,138,.1);border:1px solid rgba(62,229,138,.35);color:var(--ok)}
.mq-done.no{background:rgba(255,92,122,.08);border:1px solid rgba(255,92,122,.3);color:#ff9fb1}
.mq-done small{display:block;font-weight:500;color:var(--muted);font-size:12.5px;margin-top:2px}
.mq-tap{position:absolute;inset:0;z-index:4;display:grid;place-items:center;background:rgba(6,7,13,.55);border-radius:50%}
.mq-tap button{width:74px;height:74px;border-radius:50%;background:linear-gradient(135deg,var(--au),var(--au2));color:#1d1404!important;font-size:26px;box-shadow:0 0 0 10px rgba(255,211,77,.15),0 10px 40px rgba(242,154,31,.5);animation:mqBeat2 1s infinite alternate}
@keyframes mqBeat2{to{box-shadow:0 0 0 18px rgba(255,211,77,.05),0 10px 40px rgba(242,154,31,.5)}}
.mq-pts{position:fixed;left:50%;top:38%;z-index:50;transform:translate(-50%,-50%);font:400 54px/1 Lalezar,Vazirmatn,sans-serif;color:var(--au);text-shadow:0 0 30px rgba(255,190,60,.7);pointer-events:none;animation:mqPts 1.3s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes mqPts{from{opacity:0;transform:translate(-50%,-30%) scale(.4)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}to{opacity:0;transform:translate(-50%,-120%) scale(1)}}
/* the room board */
.mq-board{margin-top:16px;display:grid;grid-template-columns:minmax(0,1fr);gap:5px}
.mq-br{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:13px;background:rgba(255,255,255,.035);border:1px solid transparent;transition:transform .4s,background .3s}
.mq-br.me{border-color:rgba(255,211,77,.3)}
.mq-br.ok{background:rgba(62,229,138,.09)}
.mq-br .mq-av{width:28px;height:28px;font-size:12px;margin:0;flex:none}
.mq-br b{flex:1;min-width:0;font-size:13.5px;color:var(--strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.mq-br em{font-style:normal;font-size:12px;width:18px;text-align:center}
.mq-br span{font-weight:800;color:var(--au);font-variant-numeric:tabular-nums;font-size:14px;min-width:42px;text-align:left}
.mq-br .n{width:18px;color:var(--muted);font-size:12px;text-align:center}

/* ---------- reveal */
.mq-rv{position:relative;border-radius:24px;overflow:hidden;background:#10121d;border:1px solid var(--line);animation:mqRv .6s cubic-bezier(.2,.9,.3,1.15) both}
@keyframes mqRv{from{transform:translateY(24px) scale(.95);opacity:0}}
.mq-rv .bn{position:absolute;inset:0;background:var(--img) center/cover;opacity:.35;mask-image:linear-gradient(180deg,#000 10%,transparent 75%);-webkit-mask-image:linear-gradient(180deg,#000 10%,transparent 75%)}
.mq-rv .in{position:relative;display:flex;gap:14px;padding:16px;align-items:flex-end}
.mq-rv .cv{flex:none;width:96px;aspect-ratio:2/3;border-radius:14px;background:var(--cc) center/cover;box-shadow:0 12px 30px rgba(0,0,0,.5);animation:mqFlip .7s .1s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes mqFlip{from{transform:perspective(500px) rotateY(80deg);opacity:0}}
.mq-rv .tx{min-width:0;flex:1}
.mq-rv .bd{display:inline-block;font-size:11px;font-weight:800;padding:2px 9px;border-radius:20px;background:rgba(255,211,77,.15);color:var(--au);margin-bottom:4px;direction:ltr}
.mq-rv h2{margin:0;font-size:20px;line-height:1.45;color:var(--strong);font-weight:800}
.mq-rv h2 a{text-decoration:none}
.mq-rv .ro{font-size:12.5px;color:var(--muted);direction:ltr;text-align:right;margin-top:1px}
.mq-rv .sg{margin-top:8px;font-size:13.5px;color:var(--text);line-height:1.6}
.mq-rv .sg b{color:var(--strong)}
.mq-rv .dz{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:12px;color:var(--muted);text-decoration:none;padding:4px 10px;border-radius:20px;background:rgba(255,255,255,.06)}
.mq-res{margin:14px 0 0;text-align:center;font-weight:800;font-size:17px}
.mq-res.ok{color:var(--ok)}.mq-res.no{color:#ff9fb1}
.mq-got{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:10px;font-size:12.5px}
.mq-got span{padding:3px 10px;border-radius:20px;background:rgba(62,229,138,.1);color:var(--ok)}
.mq-got span.me{background:rgba(255,211,77,.15);color:var(--au)}
.mq-nx{margin-top:14px;position:relative;overflow:hidden}
.mq-nx i{position:absolute;inset:auto 0 0 0;height:3px;background:rgba(0,0,0,.25);transform-origin:right;animation:mqBar linear forwards}
@keyframes mqBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ---------- end */
.mq-end{text-align:center}
.mq-medal{width:132px;height:132px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;font:400 46px/1 Lalezar,Vazirmatn,sans-serif;color:#1d1404;background:conic-gradient(from 200deg,var(--m1),var(--m2),var(--m1),var(--m2),var(--m1));box-shadow:0 0 0 6px rgba(255,255,255,.05),0 0 70px color-mix(in srgb,var(--m1) 45%,transparent);animation:mqPop .7s cubic-bezier(.3,1.5,.5,1) both}
.mq-medal.t1{--m1:#FFD34D;--m2:#F29A1F}.mq-medal.t2{--m1:#E8EDF5;--m2:#9AA6BC}.mq-medal.t3{--m1:#F0A86A;--m2:#B5652E}.mq-medal.t4{--m1:#3a3f55;--m2:#262a3b;color:var(--strong)}
.mq-end h2{margin:0;font:400 32px/1.3 Lalezar,Vazirmatn,sans-serif;color:var(--strong)}
.mq-end .big{font-size:15px;margin:4px 0 0}
.mq-end .big b{color:var(--au);font-size:20px}
.mq-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 4px}
.mq-stats div{padding:10px 4px;border-radius:14px;background:rgba(255,255,255,.04);font-size:11.5px;color:var(--muted)}
.mq-stats b{display:block;font-size:19px;color:var(--strong);font-weight:800}
.mq-podium{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin:18px 0 6px;min-height:200px}
.mq-pd{flex:1;max-width:120px;text-align:center;animation:mqUp .7s cubic-bezier(.2,.9,.3,1.2) both}
.mq-pd:nth-child(1){animation-delay:.5s}.mq-pd:nth-child(2){animation-delay:.1s}.mq-pd:nth-child(3){animation-delay:.9s}
@keyframes mqUp{from{transform:translateY(40px);opacity:0}}
.mq-pd .mq-av{width:52px;height:52px;font-size:20px}
.mq-pd b{display:block;font-size:13px;color:var(--strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mq-pd small{display:block;color:var(--au);font-weight:800;font-size:13px}
.mq-pd .st{margin-top:6px;border-radius:14px 14px 4px 4px;display:grid;place-items:start center;padding-top:8px;font:400 28px/1 Lalezar,Vazirmatn,sans-serif;color:#1d1404}
.mq-pd.p1 .st{height:110px;background:linear-gradient(180deg,#FFD34D,#c98417)}
.mq-pd.p2 .st{height:78px;background:linear-gradient(180deg,#E8EDF5,#8a95ab)}
.mq-pd.p3 .st{height:56px;background:linear-gradient(180deg,#F0A86A,#9c5424)}
.mq-pd.p1 .mq-av{box-shadow:0 0 0 3px var(--au),0 0 30px rgba(255,211,77,.6)}
.mq-crown{display:block;font-size:22px;line-height:1;margin-bottom:2px;animation:mqBob 1.6s ease-in-out infinite alternate}
@keyframes mqBob{to{transform:translateY(-4px) rotate(-6deg)}}
.mq-list{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin-top:16px;text-align:right}
.mq-li{display:flex;align-items:center;gap:10px;padding:7px;border-radius:14px;background:rgba(255,255,255,.035);text-decoration:none}
.mq-li i{flex:none;width:38px;height:54px;border-radius:8px;background:var(--cc,#222) center/cover}
.mq-li div{flex:1;min-width:0}
.mq-li b{display:block;font-size:13.5px;color:var(--strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mq-li small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mq-li em{font-style:normal;font-weight:800;font-size:13px;min-width:44px;text-align:center}
.mq-li em.ok{color:var(--ok)}.mq-li em.no{color:var(--no)}
.mq-ends{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.mq-ends .au{grid-column:1/-1}
.mq-cf{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.mq-cf i{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;animation:mqFall linear forwards}
@keyframes mqFall{to{transform:translate(var(--dx),110vh) rotate(var(--r))}}
.mq-err{text-align:center;padding:40px 10px;color:var(--strong)}
.mq-err p{color:var(--muted)}
.mq-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)!important;margin-bottom:10px;padding:4px 0}

/* lite: no glow, no spinning, no shine */
html.lite .mq-vin{box-shadow:0 0 0 2px rgba(255,211,77,.18)}
html.lite .mq-gold{animation:none}
html.lite .mq-act.main::after,html.lite .mq-amb::after{display:none}
html.lite .mq-medal{box-shadow:none}
html.lite .mq-tap button{animation:none}
@media (min-width:720px){.mq{padding-top:96px}.mq-acts{grid-template-columns:1fr 1fr}.mq-acts .main{grid-column:1/-1}.mq-stage .mq-disc{--s:220px}}
@media (prefers-reduced-motion:reduce){.mq-vin,.mq-eq i,.mq-gold,.mq-act.main::after{animation:none}}

/* ---------- feedback: wrong / right (v2) */
.mq-stage[data-p="load"] .mq-vin{animation-play-state:paused}
.mq-stage{animation:mqDrop .8s .3s cubic-bezier(.2,1.2,.35,1) both}
@keyframes mqDrop{from{transform:translateY(-34px) scale(1.18) rotate(-40deg);opacity:0}}
.mq-stage.no .mq-disc{animation:mqScratch .62s cubic-bezier(.3,0,.3,1)}
@keyframes mqScratch{0%{transform:rotate(0)}18%{transform:rotate(-26deg) scale(.97)}36%{transform:rotate(14deg)}54%{transform:rotate(-8deg)}72%{transform:rotate(4deg)}100%{transform:rotate(0)}}
.mq-stage.no .mq-vin{box-shadow:0 0 0 3px rgba(255,92,122,.75),0 0 60px rgba(255,60,90,.55)!important;transition:box-shadow .1s}
.mq-stage.no .mq-ring .fg{stroke:var(--no)}
.mq-stage.dead .mq-vin{animation-play-state:paused;filter:grayscale(.85) brightness(.7);transition:filter .6s}
.mq-x{position:absolute;inset:22%;z-index:3;pointer-events:none;animation:mqStamp .95s cubic-bezier(.2,1.4,.4,1) forwards}
.mq-x::before,.mq-x::after{content:"";position:absolute;left:50%;top:50%;width:112%;height:15%;border-radius:12px;background:linear-gradient(90deg,#ff3b5c,#ff7a8e);box-shadow:0 0 0 3px rgba(20,0,6,.55),0 10px 30px rgba(255,40,80,.6);transform:translate(-50%,-50%) rotate(45deg)}
.mq-x::after{transform:translate(-50%,-50%) rotate(-45deg)}
@keyframes mqStamp{0%{transform:scale(2.4) rotate(-20deg);opacity:0}22%{transform:scale(.9) rotate(4deg);opacity:1}34%{transform:scale(1.05)}70%{transform:scale(1);opacity:1}100%{transform:scale(.8);opacity:0}}
.mq-wrong{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px;min-height:0}
.mq-wrong s{font-size:12.5px;color:#ff9fb1;background:rgba(255,92,122,.1);border:1px solid rgba(255,92,122,.3);padding:3px 10px;border-radius:20px;text-decoration-thickness:2px;animation:mqWr .5s cubic-bezier(.2,1.5,.4,1) both;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes mqWr{from{transform:translateY(-12px) scale(.7);opacity:0}}
.mq-tries i.pop{animation:mqDotPop .7s ease-out both}
@keyframes mqDotPop{0%{background:var(--no);box-shadow:0 0 0 0 rgba(255,92,122,.8);transform:scale(1.6)}40%{box-shadow:0 0 0 9px rgba(255,92,122,0)}100%{transform:scale(1)}}
.mq-nope{color:#ff8fa3;font-size:15px;display:inline-block;animation:mqNope .45s cubic-bezier(.2,1.6,.4,1) both}
@keyframes mqNope{from{transform:scale(1.6);opacity:0}}
.mq-flash{position:fixed;inset:0;z-index:55;pointer-events:none;animation:mqFl .65s ease-out forwards}
.mq-flash.no{box-shadow:inset 0 0 0 3px rgba(255,70,100,.6),inset 0 0 120px rgba(255,40,80,.45)}
.mq-flash.ok{box-shadow:inset 0 0 0 3px rgba(255,211,77,.55),inset 0 0 120px rgba(255,190,60,.38)}
@keyframes mqFl{from{opacity:1}to{opacity:0}}
.mq-stage.ok .mq-vin{box-shadow:0 0 0 3px rgba(255,211,77,.8),0 0 80px rgba(255,190,60,.6)!important}
.mq-burst{position:absolute;inset:0;z-index:3;pointer-events:none}
.mq-burst u{position:absolute;inset:0;border-radius:50%;border:3px solid var(--au);animation:mqWave 1s ease-out forwards}
.mq-burst u.b{border-color:#fff3c4;animation-delay:.14s}
@keyframes mqWave{from{transform:scale(.9);opacity:1}to{transform:scale(1.7);opacity:0}}
.mq-burst em{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:radial-gradient(circle,#fff 0 30%,var(--au) 60%);transform:rotate(var(--a)) translateY(0);animation:mqSpark .9s cubic-bezier(.1,.8,.3,1) forwards}
@keyframes mqSpark{to{transform:rotate(var(--a)) translateY(calc(var(--s) / -2 - var(--d)));opacity:0}}

/* ---------- between songs: a gold iris with the song number */
.mq-wipe{position:fixed;inset:0;z-index:70;display:grid;place-items:center;pointer-events:none;background:radial-gradient(circle at 50% 45%,#2a1a04 0,#0b0904 55%,#06070d 100%);clip-path:circle(0% at 50% 45%);animation:mqIris 1.45s cubic-bezier(.7,0,.3,1) forwards}
@keyframes mqIris{0%{clip-path:circle(0% at 50% 45%)}30%{clip-path:circle(150% at 50% 45%);opacity:1}72%{clip-path:circle(150% at 50% 45%);opacity:1}100%{clip-path:circle(150% at 50% 45%);opacity:0}}
.mq-wipe::before{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 45%,rgba(255,211,77,.07) 0 6deg,transparent 6deg 18deg);animation:mqSpin 9s linear infinite}
.mq-wi{position:relative;text-align:center;animation:mqWin 1.45s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes mqWin{0%{transform:scale(.6);opacity:0}28%{transform:scale(1);opacity:1}70%{transform:scale(1.02);opacity:1}100%{transform:scale(1.25);opacity:0}}
.mq-wrec{display:block;width:120px;height:120px;margin:0 auto 14px;border-radius:50%;background:radial-gradient(circle,#06070d 0 6%,transparent 7%),radial-gradient(circle,var(--au) 0 30%,transparent 31%),repeating-radial-gradient(circle,#141419 0 2px,#202028 2px 3px);box-shadow:0 0 0 2px rgba(255,211,77,.35),0 0 60px rgba(255,190,60,.45);animation:mqRec 1.45s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes mqRec{from{transform:translateX(160px) rotate(0)}30%{transform:translateX(0) rotate(540deg)}to{transform:translateX(0) rotate(900deg)}}
.mq-wi b{display:block;font:400 54px/1.1 Lalezar,Vazirmatn,sans-serif;background:linear-gradient(100deg,#fff6d5,var(--au) 45%,var(--au2));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 24px rgba(255,180,50,.35))}
.mq-wi small{display:block;margin-top:4px;font:600 14px Vazirmatn,sans-serif;color:#c9b88a;letter-spacing:.02em}
.mq-wipe.end .mq-wrec{display:none}
.mq-wipe.lite{animation:mqLiteW 1s ease forwards;clip-path:none}
.mq-wipe.lite::before{display:none}
.mq-wipe.lite .mq-wrec{animation:none}
@keyframes mqLiteW{0%,70%{opacity:1}100%{opacity:0}}
html.lite .mq-stage{animation-duration:.4s}
@media (prefers-reduced-motion:reduce){.mq-stage,.mq-stage.no .mq-disc{animation:none}}