/* الأرقام العربية (٠–٩) بخط Cairo: في الخط الكرتوني الـ٢ والـ٣ شبه بعض والأطفال بيلخبطوا بينهم */
@font-face{font-family:"DM Digits";font-weight:100 900;font-display:swap;src:url(vendor/fonts/Cairo-800-12.woff2) format("woff2");unicode-range:U+0660-0669}
/* ======================= صندوق المكافأة والمفاتيح ======================= */
.rw-layer{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px 18px calc(24px + env(safe-area-inset-bottom));background:radial-gradient(120% 80% at 50% 38%,rgba(40,60,120,.55),rgba(5,11,31,.92) 70%);backdrop-filter:blur(4px);opacity:0;transition:opacity .3s;font-family:"DM Digits","Baloo Bhaijaan 2","Cairo","IBM Plex Sans Arabic",sans-serif;color:#fff;text-align:center;overflow:hidden}
.rw-layer.in{opacity:1}.rw-layer.out{opacity:0}
.rw-rays{position:absolute;left:50%;top:40%;width:900px;height:900px;margin:-450px 0 0 -450px;background:repeating-conic-gradient(from 0deg,rgba(255,215,110,.16) 0 9deg,transparent 9deg 22deg);border-radius:50%;-webkit-mask:radial-gradient(circle,#000 18%,transparent 62%);mask:radial-gradient(circle,#000 18%,transparent 62%);opacity:.35;animation:rwSpin 18s linear infinite;pointer-events:none;transition:opacity .5s}
.rw-layer.opened .rw-rays{opacity:1;animation-duration:9s}
@keyframes rwSpin{to{transform:rotate(360deg)}}
.rw-stage{position:relative;width:min(300px,74vw);aspect-ratio:1;flex:none}
.rw-chest{position:absolute;inset:0;border:0;background:none;padding:0;cursor:pointer;transform:translateY(-120vh);-webkit-tap-highlight-color:transparent}
.rw-layer.in .rw-chest{animation:rwDrop .75s cubic-bezier(.3,1.3,.5,1) forwards,rwIdle 2.2s ease-in-out .9s infinite}
.rw-chest img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 26px rgba(0,0,0,.55));position:relative;z-index:1}
.rw-glow{position:absolute;left:50%;top:44%;width:70%;height:70%;transform:translate(-50%,-50%) scale(.3);border-radius:50%;background:radial-gradient(circle,rgba(255,236,160,.95),rgba(255,190,60,.35) 45%,transparent 70%);opacity:0;transition:opacity .4s,transform .6s;pointer-events:none}
.rw-space .rw-glow{background:radial-gradient(circle,rgba(200,250,255,.95),rgba(80,200,255,.35) 45%,transparent 70%)}
.rw-layer.opened .rw-glow{opacity:1;transform:translate(-50%,-62%) scale(1.25)}
.rw-chest.shake{animation:rwShake .5s ease-in-out!important;transform:none}
@keyframes rwDrop{0%{transform:translateY(-120vh) rotate(-8deg)}70%{transform:translateY(0) rotate(2deg)}85%{transform:translateY(-14px) scale(1.03,.97)}100%{transform:translateY(0)}}
@keyframes rwIdle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-1.5deg)}}
@keyframes rwShake{0%,100%{transform:rotate(0)}15%{transform:rotate(-7deg) scale(1.04)}30%{transform:rotate(6deg)}45%{transform:rotate(-5deg) scale(1.06)}60%{transform:rotate(4deg)}80%{transform:rotate(-2deg)}}
.rw-layer.opened .rw-chest{animation:none;transform:none}
.rw-sparks{position:absolute;left:50%;top:40%;width:0;height:0;pointer-events:none;z-index:2}
.rw-sparks i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#fff3b0;box-shadow:0 0 10px #ffd34d;opacity:0}
.rw-space .rw-sparks i{background:#d8fbff;box-shadow:0 0 10px #63e3ff}
.rw-layer.opened .rw-sparks i{animation:rwSpark var(--t) cubic-bezier(.2,.8,.3,1) forwards}
@keyframes rwSpark{0%{opacity:1;transform:rotate(var(--a)) translateX(0) scale(1)}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--d)) scale(.3)}}
.rw-key{position:absolute;left:50%;top:30%;width:52%;aspect-ratio:1;transform:translate(-50%,10%) scale(.2) rotate(-25deg);opacity:0;z-index:3;filter:drop-shadow(0 0 18px rgba(255,210,80,.9)) drop-shadow(0 10px 14px rgba(0,0,0,.5))}
.rw-key img{width:100%;height:100%;object-fit:contain}
.rw-key b{position:absolute;left:27.5%;top:28.5%;width:30%;height:30%;transform:translate(-50%,-50%);display:grid;place-items:center;font-weight:800;font-size:clamp(20px,7vw,30px);color:#7a4a00;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.rw-layer.keyup .rw-key{animation:rwKeyUp 1s cubic-bezier(.2,1.3,.4,1) forwards,rwKeyFloat 2.4s ease-in-out 1s infinite}
@keyframes rwKeyUp{0%{opacity:0;transform:translate(-50%,10%) scale(.2) rotate(-25deg)}60%{opacity:1;transform:translate(-50%,-78%) scale(1.12) rotate(8deg)}100%{opacity:1;transform:translate(-50%,-70%) scale(1) rotate(0)}}
@keyframes rwKeyFloat{0%,100%{transform:translate(-50%,-70%) rotate(0)}50%{transform:translate(-50%,-76%) rotate(4deg)}}
.rw-final .rw-key{width:64%;filter:drop-shadow(0 0 30px rgba(255,210,80,1)) drop-shadow(0 0 60px rgba(255,170,30,.8))}
.rw-tap{margin:4px 0 0;font-size:19px;font-weight:800;color:#ffe28a;text-shadow:0 2px 10px rgba(0,0,0,.6);animation:rwBlink 1.3s ease-in-out infinite;transition:opacity .3s}
.rw-layer.opened .rw-tap{opacity:0;height:0;margin:0;overflow:hidden}
@keyframes rwBlink{50%{opacity:.55}}
.rw-info{opacity:0;transform:translateY(16px);transition:opacity .45s,transform .45s;max-width:420px;pointer-events:none}
.rw-layer.done .rw-info{opacity:1;transform:none;pointer-events:auto}
.rw-info h2{margin:0;font-size:clamp(24px,7vw,30px);line-height:1.35;background:linear-gradient(180deg,#fff 15%,#ffe08a 60%,#f5b43a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 rgba(0,0,0,.45))}
.rw-info p{margin:6px 0 0;font-family:"Cairo","IBM Plex Sans Arabic",sans-serif;font-weight:600;font-size:15.5px;line-height:1.8;color:#e5edff}
.rw-actions{display:flex;flex-direction:column;gap:9px;margin-top:16px;width:min(340px,86vw);margin-inline:auto}
.rw-btn{border:0;border-radius:18px;padding:14px 18px;font:800 18px "DM Digits","Baloo Bhaijaan 2","Cairo",sans-serif;cursor:pointer}
.rw-main{background:linear-gradient(180deg,#ffe08a,#ffc442 48%,#f08c0a);color:#0f2142;box-shadow:0 14px 30px -10px rgba(255,170,40,.8),inset 0 -4px 0 rgba(120,60,0,.28),inset 0 2px 0 rgba(255,255,255,.55);animation:rwPulse 1.6s ease-in-out infinite}
@keyframes rwPulse{50%{transform:scale(1.03)}}
.rw-line{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.25);font-size:16px}
/* ميدالية المفاتيح */
.rw-ring{display:flex;flex-direction:column;align-items:center;gap:6px;margin:8px auto 2px;padding:8px 12px 10px;border-radius:18px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px);max-width:440px;width:calc(100% - 24px);box-shadow:0 8px 20px -12px rgba(0,0,0,.5)}
.rw-ring-t{font-family:"Cairo",sans-serif;font-weight:800;font-size:14px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.4)}.rw-ring-t b{color:#ffe08a}
.rw-slots{display:flex;gap:3px;flex-wrap:wrap;justify-content:center}
.rw-slot{position:relative;width:31px;height:31px;border-radius:50%;background:rgba(0,0,0,.18);display:grid;place-items:center;box-shadow:inset 0 2px 6px rgba(0,0,0,.35)}
.rw-slot img{width:26px;height:26px;object-fit:contain;filter:grayscale(1) brightness(.6) opacity(.35)}
.rw-slot b{position:absolute;bottom:-3px;inset-inline-end:-2px;min-width:17px;height:17px;padding:0 3px;border-radius:9px;font:800 11px "Cairo",sans-serif;display:grid;place-items:center;background:#5b6b8c;color:#fff}
.rw-slot.got{background:radial-gradient(circle,rgba(255,226,120,.55),rgba(255,180,40,.15) 70%)}
.rw-slot.got img{filter:drop-shadow(0 0 6px rgba(255,200,60,.9))}
.rw-slot.got b{background:linear-gradient(180deg,#ffe08a,#f59e0b);color:#0f2142}
.rw-ring.full{border-color:#ffd166;box-shadow:0 0 0 3px rgba(255,209,102,.25),0 0 24px -4px rgba(255,209,102,.7)}
.rw-ring-full{font-family:"Cairo",sans-serif;font-size:13px;font-weight:700;color:#ffe08a}
/* كسر القفل */
.rw-unlock{position:fixed;z-index:150;width:0;height:0;pointer-events:none}
.rw-u-lock{position:absolute;left:-30px;top:-34px;width:60px;height:60px;display:grid;place-items:center;font-size:46px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6));animation:rwLock 2s ease forwards}
.rw-u-key{position:absolute;left:-36px;top:-36px;width:72px;height:72px;filter:drop-shadow(0 0 12px rgba(255,210,80,.95));animation:rwUKey 2s cubic-bezier(.3,.8,.3,1) forwards}
.rw-u-burst{position:absolute;left:0;top:0}
.rw-u-burst i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#fff3b0;box-shadow:0 0 10px #ffd34d;opacity:0;animation:rwSpark var(--t) cubic-bezier(.2,.8,.3,1) 1.05s forwards}
@keyframes rwUKey{0%{opacity:0;transform:translate(-60px,-180px) rotate(-60deg) scale(1.4)}35%{opacity:1;transform:translate(10px,6px) rotate(0) scale(.9)}50%{transform:translate(10px,6px) rotate(90deg) scale(.9)}62%{opacity:1;transform:translate(10px,6px) rotate(90deg) scale(.9)}80%{opacity:0;transform:translate(10px,6px) rotate(90deg) scale(.4)}100%{opacity:0}}
@keyframes rwLock{0%,45%{opacity:1;transform:none}50%{transform:rotate(-12deg) scale(1.1)}55%{transform:rotate(10deg)}60%{opacity:1;transform:translateY(-10px) scale(1.2)}100%{opacity:0;transform:translate(30px,120px) rotate(70deg) scale(.8)}}
.rw-unlocking{animation:rwPop .6s cubic-bezier(.3,1.5,.5,1) 1.1s}
@keyframes rwPop{40%{transform:scale(1.15)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.rw-rays,.rw-main,.rw-tap{animation:none}}