/* شعارات الفوز v2 (٢٠٢٦/١٠/٠٥) — js/medals.js. فوق كلّ شيء ولا تمسك الماوس.
   الشعار يدخل بصدمة (من كبير لمكانه) مع موجتين وشرار، ولوحةُ الاسم المائلة تنزلق
   من جنبه ويمرّ عليها لمعان؛ ثمّ ينزل الشعار صغيراً إلى الصفّ تحت. */
.md-layer{position:fixed;inset:0;z-index:9600;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:8vh;direction:rtl;transition:opacity .5s}
.md-layer.bye{opacity:0}
.md-layer::before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse 75% 50% at 50% 85%,rgba(4,6,20,.88),rgba(4,6,20,.35) 60%,transparent 80%);opacity:0;transition:opacity .4s}
.md-layer.on::before{opacity:1}
.md-stage{position:relative;height:200px;display:grid;place-items:center}
.md{position:relative;display:flex;align-items:center;gap:6px}
.md.out .md-art{visibility:hidden}
.md.out .md-plate{animation:mdOut .3s ease-in both}
@keyframes mdOut{to{opacity:0;transform:translateX(40px)}}

/* ── الشعار ── */
.md-art{position:relative;width:170px;height:170px;flex:0 0 auto;display:grid;place-items:center;animation:mdSlam .5s cubic-bezier(.2,1.6,.35,1) .1s both}
@keyframes mdSlam{0%{opacity:0;transform:scale(3.4) rotate(-14deg);filter:blur(10px)}55%{opacity:1;filter:blur(0)}75%{transform:scale(.9) rotate(2deg)}100%{transform:none}}
.md-badge{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 10px 22px rgba(0,0,0,.65))}
.md-rays{transform-origin:100px 100px;animation:mdRays 6s linear infinite}
@keyframes mdRays{to{transform:rotate(360deg)}}
.md-glint{animation:mdGlint 1.6s ease-in-out .55s infinite}
@keyframes mdGlint{0%{transform:translateX(0) rotate(20deg)}60%,100%{transform:translateX(330px) rotate(20deg)}}
.md-ic{position:relative;font-size:52px;line-height:1;font-family:var(--emoji,inherit);filter:drop-shadow(0 3px 6px rgba(0,0,0,.6));animation:mdIc .6s cubic-bezier(.2,1.8,.4,1) .35s both}
@keyframes mdIc{from{opacity:0;transform:scale(.2) rotate(-40deg)}}
/* موجةُ الصدمة */
.md-wave{position:absolute;inset:18%;border-radius:50%;border:4px solid var(--mdc,#ffe08a);opacity:0;animation:mdWave .7s ease-out .3s both}
.md-wave.w2{animation-delay:.42s;border-width:2px}
@keyframes mdWave{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(2.4)}}
/* الشرار */
.md-sp{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:2px;background:var(--c);box-shadow:0 0 8px var(--c);opacity:0;
  animation:mdSp .75s cubic-bezier(.1,.7,.3,1) calc(.3s + var(--dl)) both}
@keyframes mdSp{0%{opacity:1;transform:rotate(var(--an)) translateY(0) scale(1)}100%{opacity:0;transform:rotate(var(--an)) translateY(calc(-1 * var(--d))) scale(.3)}}

/* ── لوحة الاسم ── */
.md-plate{position:relative;overflow:hidden;min-width:280px;padding:14px 46px 14px 34px;margin-inline-start:-26px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  background:linear-gradient(90deg,rgba(8,10,28,.25),rgba(8,10,28,.94) 22%,rgba(8,10,28,.94));
  clip-path:polygon(0 0,100% 0,calc(100% - 22px) 100%,0 100%);
  border-top:3px solid var(--mdc,#ffe08a);
  animation:mdPlate .45s cubic-bezier(.2,1,.3,1) .38s both}
@keyframes mdPlate{from{opacity:0;transform:translateX(60px);clip-path:polygon(0 0,0 0,0 100%,0 100%)}}
.md-rank{font-weight:900;font-size:13px;letter-spacing:2px;color:var(--mdc,#ffe08a);opacity:.9}
.md-plate b{font-weight:900;font-size:clamp(34px,5.2vh,54px);line-height:1.05;color:#fff;text-shadow:0 0 18px var(--mdg,rgba(255,200,80,.5)),0 3px 10px rgba(0,0,0,.7)}
.md-plate small{font-weight:900;font-size:clamp(15px,2.1vh,20px);color:#cfd6ff}
.md-sweep{position:absolute;top:0;bottom:0;width:80px;left:-120px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:mdSweep 1.1s ease-in-out .7s both}
@keyframes mdSweep{to{left:120%}}

/* ألوان الرتب */
.md.t-b{--mdc:#f0b27a;--mdg:rgba(240,150,80,.55)}
.md.t-s{--mdc:#dfe7ff;--mdg:rgba(200,215,255,.6)}
.md.t-g{--mdc:#ffd24a;--mdg:rgba(255,200,60,.65)}
.md.t-l{--mdc:#c79bff;--mdg:rgba(170,100,255,.8)}
.md.t-n{--mdc:#c8ff4a;--mdg:rgba(170,255,60,.9)}
.md.t-l .md-art{width:190px;height:190px}
.md.t-l .md-plate b{background:linear-gradient(90deg,#fff,#e2c6ff,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── النيوك: الشاشة تخضرّ، خطوط خطر، ثمّ انفجار ورجّة ── */
.md.t-n .md-art{width:230px;height:230px;animation-duration:.7s;animation-delay:.95s}
.md.t-n .md-ic{font-size:76px;animation-delay:1.2s}
.md.t-n .md-wave,.md.t-n .md-sp{animation-delay:1.05s}
.md.t-n .md-wave.w2{animation-delay:1.2s}
.md.t-n .md-plate{animation-delay:1.25s}
.md.t-n .md-plate b{font-size:clamp(46px,7.5vh,80px);letter-spacing:2px}
.md.t-n .md-sweep{animation-delay:1.6s}
.md-haz{transform-origin:100px 100px;animation:mdRays 4s linear infinite reverse}
.md-layer.nuke::after{content:"";position:fixed;inset:0;
  background:repeating-linear-gradient(-45deg,rgba(200,255,74,.0) 0 38px,rgba(200,255,74,.10) 38px 76px),radial-gradient(circle at 50% 75%,rgba(190,255,90,.25),rgba(10,30,0,.55) 75%);
  animation:mdAlarm .5s ease-in-out 2 alternate both}
@keyframes mdAlarm{from{opacity:.2}to{opacity:1}}
.md-layer.boom::after{animation:mdBoom 1.6s ease-out both;background:radial-gradient(circle at 50% 75%,rgba(235,255,170,.95),rgba(160,255,60,.55) 30%,rgba(10,40,0,0) 70%)}
@keyframes mdBoom{0%{opacity:0}8%{opacity:1}100%{opacity:0}}
.md-layer.boom .md-stage{animation:mdShake .6s linear both}
@keyframes mdShake{0%,100%{transform:none}10%{transform:translate(-10px,6px)}20%{transform:translate(9px,-8px)}30%{transform:translate(-8px,-4px)}40%{transform:translate(7px,7px)}55%{transform:translate(-5px,3px)}70%{transform:translate(4px,-3px)}85%{transform:translate(-2px,2px)}}

/* ── بطاقةُ ملفّ الفائز: الشعارات تطير إلى «خزانة الشعارات» فيها ── */
.md-card{position:relative;width:min(560px,92vw);margin-top:6px;border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,rgba(18,20,48,.97),rgba(8,9,26,.97));box-shadow:0 18px 50px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.12);
  animation:mdCard .55s cubic-bezier(.2,1.2,.3,1) .2s both}
@keyframes mdCard{from{opacity:0;transform:translateY(80px) scale(.94)}}
.md-cover{position:relative;height:62px;background:linear-gradient(120deg,#5b3fd6,#2b6fff 45%,#ff7a45);overflow:hidden}
.md-cover i{position:absolute;inset:0;background:radial-gradient(2px 2px at 12% 30%,#fff,transparent),radial-gradient(1.5px 1.5px at 35% 70%,#fff,transparent),radial-gradient(2px 2px at 62% 25%,#fff,transparent),radial-gradient(1.5px 1.5px at 85% 60%,#fff,transparent),linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  background-size:auto,auto,auto,auto,40% 100%;background-repeat:no-repeat;animation:mdCov 2.4s linear infinite}
@keyframes mdCov{from{background-position:0 0,0 0,0 0,0 0,-60% 0}to{background-position:0 0,0 0,0 0,0 0,160% 0}}
.md-who{display:flex;align-items:flex-end;gap:14px;padding:0 20px;margin-top:-38px;position:relative}
.md-avw{width:84px;height:84px;flex:0 0 auto;border-radius:50%;padding:4px;background:linear-gradient(135deg,#ffd24a,#ff7a45);box-shadow:0 6px 18px rgba(0,0,0,.5)}
.md-avw > *{width:100% !important;height:100% !important;border-radius:50%;overflow:hidden;font-size:34px}
.md-avw img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.md-av0{display:grid !important;place-items:center;background:#2a2f63;color:#fff;font-weight:900}
.md-nm{display:flex;flex-direction:column;padding-bottom:4px;min-width:0}
.md-nm small{font-weight:800;font-size:12px;color:#9fb0ff;letter-spacing:.5px}
.md-nm b{font-weight:900;font-size:clamp(22px,3.4vh,30px);color:#fff;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-nm em{font-style:normal;font-weight:800;font-size:13px;color:#c9d2ff;text-align:right}
.md-cab{margin:12px 16px 0;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.md-cab-h{display:flex;justify-content:space-between;align-items:center;font-weight:900;font-size:15px;color:#fff;margin-bottom:8px}
.md-cnt{font-style:normal;font-weight:900;color:#2a1600;background:var(--star,#ffc94a);padding:1px 10px;border-radius:999px}
.md-cnt.pop{animation:mdPop .4s cubic-bezier(.2,1.8,.4,1)}
@keyframes mdPop{50%{transform:scale(1.5)}}
.md-slots{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.md-slot{position:relative;width:60px;height:60px;border-radius:50%;border:2px dashed rgba(255,255,255,.22);display:grid;place-items:center}
.md-slot.on{border:0;animation:mdSlot .45s cubic-bezier(.2,1.8,.4,1)}
.md-slot.on::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--mdc,#ffd24a);opacity:0;animation:mdWave .6s ease-out both}
.md-slot.t-b{--mdc:#f0b27a}.md-slot.t-s{--mdc:#dfe7ff}.md-slot.t-g{--mdc:#ffd24a}.md-slot.t-l{--mdc:#c79bff}.md-slot.t-n{--mdc:#c8ff4a}
@keyframes mdSlot{from{transform:scale(1.6)}}
.md-slot .md-badge{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}
.md-slot .md-rays,.md-fly .md-rays{display:none}
.md-slot .md-ic{position:relative;font-size:22px;animation:none}
.md-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 18px 14px;font-weight:800;font-size:13px;color:#9fb0ff}
.md-ok{opacity:0;transform:scale(.6);font-weight:900;font-size:15px;color:#7dffb0;transition:opacity .3s,transform .4s cubic-bezier(.2,1.8,.4,1)}
.md-layer.done .md-ok{opacity:1;transform:none}
.md-layer.done .md-card{box-shadow:0 18px 50px rgba(0,0,0,.6),inset 0 0 0 2px rgba(125,255,176,.55),0 0 34px rgba(125,255,176,.25)}
/* الشعار وهو يطير للبطاقة */
.md-fly{position:fixed;z-index:9700;pointer-events:none;display:grid;place-items:center;transition:transform .6s cubic-bezier(.5,0,.3,1);will-change:transform}
.md-fly .md-badge{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.md-fly .md-ic{position:relative;font-size:52px;animation:none}
.md-stage{height:190px}

/* زرّ المعاينة المحلّيّة (?medals) */
.md-demo{position:fixed;z-index:9700;top:50%;left:50%;transform:translate(-50%,-50%);padding:16px 30px;border-radius:16px;border:0;cursor:pointer;
  font:900 22px 'Tajawal',sans-serif;color:#2a1600;background:var(--star,#ffc94a);box-shadow:0 10px 30px rgba(0,0,0,.5)}

@media (prefers-reduced-motion:reduce){.md-rays,.md-glint,.md-haz{animation:none}.md-layer.boom .md-stage{animation:none}}
@media (max-width:700px){.md-art{width:120px;height:120px}.md.t-n .md-art{width:160px;height:160px}.md-plate{min-width:0;padding:10px 30px 10px 22px}}