/* =====================================================================
   جولة 63: المكافآت — اليومية (مسار أيام حي) والأسبوعية (صندوق المنشأة المجهول)
   ===================================================================== */
.rw-dlg.rwx { --rx: #ff3b4a; --rxg: #ffd166; --rxok: #7ee0bd; width: min(900px, 96vw); max-width: min(900px, 96vw); position: relative; overflow: hidden auto }
.rw-dlg.rwx > #dailyHint, .rw-dlg.rwx > #dailyGrid, .rw-dlg.rwx > #dailyClaim { display: none !important }
.rwx-host { position: relative }
.rwx-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; font-size: .78rem; font-weight: 700; border-radius: 99px; background: #ffffff0a; border: 1px solid #ffffff1a; color: #e9e4dc; white-space: nowrap }
.rwx-chip svg { width: 14px; height: 14px } .rwx-chip b { color: #fff }
.rwx-chip.fl svg { color: #ff8a3d } .rwx-chip.live { background: #4db38f1f; border-color: #4db38f66; color: var(--rxok) }
.rwx-chip.done { background: #c9a24d1f; border-color: #c9a24d55; color: #e9c76a } .rwx-chip.wait { opacity: .8 } .rwx-chip.soft { opacity: .6; background: none }
.rwx-empty { display: grid; justify-items: center; gap: 6px; padding: 40px 10px; text-align: center; color: #cfc8bd } .rwx-empty svg { width: 40px; height: 40px; opacity: .5 }

/* الزر الكبير */
.rwx-btn { width: 100%; margin-top: 12px; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #ffffff1f; border-radius: 12px;
  background: #ffffff0d; color: #d9d3c9; font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer; position: relative; overflow: hidden }
.rwx-btn svg { width: 20px; height: 20px } .rwx-btn b { font-variant-numeric: tabular-nums; color: #fff; letter-spacing: .5px }
.rwx-btn:disabled { cursor: default }
.rwx-btn.go { color: #fff; border-color: transparent; background: linear-gradient(180deg, #e8263a, #9b0f1d); box-shadow: 0 0 0 1px #ff6b7466 inset, 0 8px 26px #e8263a55; animation: rwxBtn 2.2s ease-in-out infinite }
.rwx-btn.go::after { content: ''; position: absolute; top: 0; bottom: 0; width: 30%; left: -40%; background: linear-gradient(100deg, transparent, #ffffff55, transparent); transform: skewX(-20deg); animation: rwxShine 2.8s ease-in-out infinite }
.rwx-btn.go:hover { filter: brightness(1.1) } .rwx-btn.go:active { transform: scale(.985) }
.rwx-btn.busy { animation: none; filter: saturate(.7) brightness(.9) }
@keyframes rwxBtn { 50% { box-shadow: 0 0 0 1px #ff6b74aa inset, 0 10px 34px #e8263a88 } }
@keyframes rwxShine { 0%, 55% { left: -40% } 100% { left: 130% } }

/* ---------------- اليومية ---------------- */
.rwx-top { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px }
.rwx-track { position: relative; display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 16px 6px 12px; scrollbar-width: thin; scroll-snap-type: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch }
.rwx-line { position: absolute; inset-inline: 30px; top: 50%; height: 3px; background: #ffffff12; border-radius: 3px; pointer-events: none }
.rwx-line i { position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--p) * 100%); background: linear-gradient(to left, var(--rx), #ffb3ba); box-shadow: 0 0 8px var(--rx); border-radius: 3px }
.rwx-d { --c: #ffffff1c; position: relative; z-index: 1; flex: 0 0 auto; width: 118px; min-height: 150px; padding: 26px 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  border-radius: 14px; border: 1px solid var(--c); background: linear-gradient(180deg, #1c1e25, #121318); scroll-snap-align: center;
  animation: rwxIn .4s ease both; animation-delay: calc(var(--i) * 40ms); transition: transform .2s, opacity .2s, border-color .2s }
.rwx-d .rwx-n { position: absolute; top: 6px; inset-inline-start: 50%; transform: translateX(50%); font-size: .7rem; font-weight: 800; color: #a59f96; white-space: nowrap }
.rwx-d .rwx-art { display: grid; place-items: center; width: 64px; height: 64px }
.rwx-d .rwx-art .rw-art { transform: scale(.82) }
.rwx-d .rwx-nm { font-size: .8rem; line-height: 1.3; color: #ece6dc; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
.rwx-once { position: absolute; bottom: -8px; font-style: normal; font-size: .62rem; font-weight: 800; padding: 2px 7px; border-radius: 99px; background: #3a2a0b; color: #ffd166; border: 1px solid #ffd16655 }
.rwx-d.got { border-color: #4db38f55; background: linear-gradient(180deg, #161a1a, #101213) } .rwx-d.got .rwx-art, .rwx-d.got .rwx-nm, .rwx-d.got .rwx-n { opacity: .5 } .rwx-d.got .rwx-art { filter: grayscale(.6) }
.rwx-stamp { position: absolute; top: 34px; inset-inline-end: 8px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #1f3e37; border: 2px solid var(--rxok); color: var(--rxok); transform: rotate(-12deg) }
.rwx-stamp svg { width: 16px; height: 16px }
.rwx-d.cur { --c: var(--rx); width: 132px; min-height: 166px; background: radial-gradient(120% 80% at 50% 30%, #3a0a12, #16070a 70%); box-shadow: 0 0 0 1px #ff3b4a66, 0 10px 30px #e8263a44; transform: translateY(-4px); opacity: 1 }
.rwx-d.cur .rwx-art { animation: rwxBob 1.8s ease-in-out infinite } .rwx-d.cur .rwx-art .rw-art { transform: scale(.95) }
.rwx-d.cur .rwx-n, .rwx-d.nxt .rwx-n { top: 15px }
.rwx-now { position: absolute; top: -10px; padding: 3px 10px; border-radius: 99px; font-size: .7rem; font-weight: 900; color: #fff; background: var(--rx); box-shadow: 0 0 12px var(--rx) }
.rwx-now.soon { background: #2a2c34; box-shadow: none; color: #cfc8bd }
.rwx-d.nxt { --c: #ffffff40; opacity: .9 }
.rwx-ring { position: absolute; inset: -4px; border-radius: 16px; border: 2px solid var(--rx); opacity: 0; animation: rwxRing 1.8s ease-out infinite; pointer-events: none }
.rwx-d.charge { animation: rwxCharge .35s ease-in-out infinite }
.rwx-d.pop { animation: rwxPop .5s ease both } .rwx-d.pop::after { content: ''; position: absolute; inset: -2px; border-radius: 16px; background: #fff; animation: rwxFlashO .5s ease forwards }
@keyframes rwxIn { from { opacity: 0; transform: translateY(10px) } }
@keyframes rwxBob { 50% { transform: translateY(-5px) } }
@keyframes rwxRing { 0% { opacity: .9; transform: scale(1) } 100% { opacity: 0; transform: scale(1.12) } }
@keyframes rwxCharge { 25% { transform: translate(-2px, -4px) rotate(-2deg) } 75% { transform: translate(2px, -4px) rotate(2deg) } }
@keyframes rwxPop { 40% { transform: scale(1.18) translateY(-6px) } 100% { transform: scale(1) translateY(-4px) } }
@keyframes rwxFlashO { from { opacity: .8 } to { opacity: 0 } }

/* ---------------- الأسبوعية: الصندوق ---------------- */
.rwx-wk { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 14px; align-items: center }
.rwx-stage { position: relative; height: clamp(210px, 46vh, 300px); border-radius: 16px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(70% 60% at 50% 70%, #2b0b10 0%, #0d0e12 70%), #0b0c0f; border: 1px solid #ffffff14; box-shadow: inset 0 0 40px #000 }
.rwx-stage::before { content: ''; position: absolute; inset: auto 0 0; height: 32%; background: repeating-linear-gradient(90deg, #ffffff06 0 2px, transparent 2px 26px), linear-gradient(#0000, #00000080); border-top: 1px solid #ffffff10 }
.rwx-fog { position: absolute; inset: auto -20% 8% -20%; height: 40%; background: radial-gradient(50% 50% at 50% 50%, #ff3b4a22, transparent 70%); filter: blur(10px); animation: rwxFog 6s ease-in-out infinite alternate }
@keyframes rwxFog { to { transform: translateX(8%) scale(1.1) } }
.rwx-beam { position: absolute; left: 50%; bottom: 34%; width: 380px; height: 380px; margin-left: -190px; transform-origin: 50% 100%; opacity: 0; pointer-events: none;
  background: conic-gradient(from 180deg at 50% 100%, transparent 0deg, #ffe7b066 10deg, transparent 22deg, transparent 40deg, #ffe7b04d 50deg, transparent 62deg, transparent 300deg, #ffe7b04d 310deg, transparent 322deg, transparent 338deg, #ffe7b066 350deg, transparent 360deg); filter: blur(2px) }
.rwx-spot { position: absolute; top: -10%; left: 50%; width: 70%; height: 95%; transform: translateX(-50%); pointer-events: none; opacity: .9;
  background: linear-gradient(180deg, #ffe9c41f, #ffe9c40a 60%, transparent); clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); animation: rwxSpot 5s ease-in-out infinite }
@keyframes rwxSpot { 0%, 100% { opacity: .9 } 47% { opacity: .9 } 50% { opacity: .35 } 53% { opacity: .85 } 56% { opacity: .5 } 60% { opacity: .9 } }
.rwx-ped { position: absolute; left: 50%; bottom: 13%; width: clamp(190px, 26vw, 260px); height: 34px; transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, #1a1c22 70%, transparent 72%), radial-gradient(closest-side, #ff3b4a55, transparent); z-index: 1 }
.rwx-wk.ready .rwx-ped { background: radial-gradient(closest-side, #1a1c22 66%, transparent 68%), radial-gradient(closest-side, #ff3b4a99, transparent); animation: rwxAura 2s ease-in-out infinite }
.rwx-stage > .rwx-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 5 }

.rwx-crate { --w: clamp(150px, 20vw, 200px); position: relative; width: var(--w); height: calc(var(--w) * .86); margin-top: 18%; z-index: 2; animation: rwxIdle 3.4s ease-in-out infinite }
.rwx-aura { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(closest-side, #ff3b4a40, transparent); opacity: 0; transition: opacity .4s }
.rwx-wk.ready .rwx-aura { opacity: 1; animation: rwxAura 2s ease-in-out infinite }
.rwx-body { position: absolute; inset: 22% 0 0; border-radius: 6px; overflow: hidden;
  background: linear-gradient(180deg, #4b4f58 0%, #30333b 40%, #1f2127 100%); box-shadow: inset 0 0 0 2px #0008, inset 0 2px 0 #ffffff22, 0 10px 18px #000a }
.rwx-plate { position: absolute; inset: 10% 8%; border: 2px solid #ffffff14; border-radius: 4px; background:
  radial-gradient(circle at 6px 6px, #8a8f9a 2px, transparent 3px) 0 0/ 100% 100% no-repeat,
  radial-gradient(circle at calc(100% - 6px) 6px, #8a8f9a 2px, transparent 3px), radial-gradient(circle at 6px calc(100% - 6px), #8a8f9a 2px, transparent 3px), radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), #8a8f9a 2px, transparent 3px) }
.rwx-band { position: absolute; inset-inline: 0; bottom: 12%; height: 13%; background: repeating-linear-gradient(-45deg, #e8263a 0 9px, #161616 9px 18px); opacity: .9; box-shadow: 0 0 0 1px #000 }
.rwx-q { position: absolute; inset: 0 0 18%; display: grid; place-items: center; font-size: calc(var(--w) * .34); font-weight: 900; color: #ff4d5a; text-shadow: 0 0 10px #ff3b4a, 0 0 24px #ff1f3a; animation: rwxQ 2.6s ease-in-out infinite }
.rwx-sten { position: absolute; top: 6%; inset-inline: 0; text-align: center; font: 700 calc(var(--w) * .062)/1 ui-monospace, monospace; letter-spacing: 1px; color: #ffffff66 }
.rwx-lock { position: absolute; left: 50%; top: -1px; width: 26px; height: 22px; margin-left: -13px; border-radius: 4px; background: linear-gradient(#5e636d, #2a2d34); box-shadow: 0 0 0 1px #000a, inset 0 1px 0 #ffffff33; z-index: 3; transition: transform .6s cubic-bezier(.5, -0.3, .7, 1), opacity .6s }
.rwx-shackle { position: absolute; left: 4px; right: 4px; top: -11px; height: 14px; border: 3px solid #9aa0aa; border-bottom: 0; border-radius: 10px 10px 0 0; transition: transform .35s }
.rwx-led { position: absolute; left: 50%; top: 7px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #ff2a3a; box-shadow: 0 0 8px #ff2a3a; animation: rwxLed 1.1s steps(2) infinite }
.rwx-lid { position: absolute; inset: 0 -4% 74%; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #5a5f69, #2c2f36); box-shadow: inset 0 0 0 2px #0008, inset 0 2px 0 #ffffff2a, 0 4px 8px #0008; z-index: 2; transform-origin: 20% 100%; transition: transform .7s cubic-bezier(.2, .9, .3, 1.3), opacity .7s }
.rwx-lid-hz { position: absolute; inset: 30% 10%; background: repeating-linear-gradient(-45deg, #ffd166 0 6px, #1a1a1a 6px 12px); opacity: .55; border-radius: 2px }
.rwx-lid-rv { position: absolute; inset: 4px; border-radius: 4px; background: radial-gradient(circle at 5px 50%, #8a8f9a 2px, transparent 3px), radial-gradient(circle at calc(100% - 5px) 50%, #8a8f9a 2px, transparent 3px) }
.rwx-shadow { position: absolute; left: 6%; right: 6%; bottom: -14px; height: 16px; border-radius: 50%; background: radial-gradient(closest-side, #000c, transparent); z-index: -1 }
.rwx-wk.wait .rwx-crate { animation: none; filter: saturate(.55) brightness(.75) } .rwx-wk.wait .rwx-q { color: #8a8f9a; text-shadow: none; animation: none }
.rwx-wk.wait .rwx-led { background: #5a1218; box-shadow: none; animation: none }
.rwx-wk.done .rwx-crate { filter: grayscale(1) brightness(.6); animation: none }
.rwx-wk.ready .rwx-crate { animation: rwxIdle 3.4s ease-in-out infinite, rwxRattle 3.4s ease-in-out infinite }
@keyframes rwxIdle { 50% { transform: translateY(-6px) } }
@keyframes rwxRattle { 0%, 82%, 100% { rotate: 0deg } 85% { rotate: -3deg } 88% { rotate: 3deg } 91% { rotate: -2deg } 94% { rotate: 1deg } }
@keyframes rwxAura { 50% { transform: scale(1.12); opacity: .7 } }
@keyframes rwxQ { 50% { text-shadow: 0 0 16px #ff3b4a, 0 0 36px #ff1f3a } }
@keyframes rwxLed { 50% { opacity: .3 } }

/* تسلسل الفتح */
.rwx-wk.s1 .rwx-crate { animation: rwxShake .12s linear infinite !important }
.rwx-wk.s1 .rwx-aura { opacity: 1; animation: rwxAura .5s ease-in-out infinite }
.rwx-wk.s2 .rwx-led { background: #4dff7a; box-shadow: 0 0 12px #4dff7a; animation: none }
.rwx-wk.s2 .rwx-shackle { transform: translateY(-7px) }
.rwx-wk.s2 .rwx-lock { transform: translateY(160px) rotate(40deg); opacity: 0; transition-delay: .3s }
.rwx-wk.s3 .rwx-crate { animation: none !important }
.rwx-wk.s3 .rwx-lid { transform: translate(-20%, -140%) rotate(-38deg); opacity: 0 }
.rwx-wk.s3 .rwx-beam { opacity: 1; animation: rwxBeam 4s linear infinite }
.rwx-wk.s3 .rwx-stage > .rwx-flash { animation: rwxFlashW .6s ease forwards }
@keyframes rwxFlashW { 0% { opacity: .55 } 100% { opacity: 0 } }
.rwx-wk.s3 .rwx-q { opacity: 0; transition: opacity .2s }
.rwx-wk.fail .rwx-crate { animation: rwxShake .08s linear 4 !important } .rwx-wk.fail .rwx-led { background: #ff2a3a }
@keyframes rwxShake { 25% { transform: translate(-3px, -1px) rotate(-1.5deg) } 75% { transform: translate(3px, 1px) rotate(1.5deg) } }
@keyframes rwxBeam { to { transform: rotate(360deg) } }

/* الكرت يطلع من الصندوق ويقلب */
.rwx-pop { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 4 }
.rwx-flip { position: relative; width: 108px; height: 132px; perspective: 600px; opacity: 0; transform: translateY(70px) scale(.4) }
.rwx-face { position: absolute; inset: 0; border-radius: 12px; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .7s cubic-bezier(.3, 1.4, .5, 1) }
.rwx-face.back { background: linear-gradient(160deg, #9b0f1d, #3a0710); border: 2px solid #ff6b74; box-shadow: 0 0 24px #ff3b4a } .rwx-face.back b { font-size: 3rem; color: #fff; text-shadow: 0 0 14px #fff }
.rwx-face.front { background: radial-gradient(circle at 50% 35%, #2f3138, #121318); border: 2px solid var(--rxg); box-shadow: 0 0 30px #ffd16688; transform: rotateY(180deg) }
.rwx-wk.s4 .rwx-flip { animation: rwxRise .7s cubic-bezier(.2, 1.2, .4, 1) forwards }
.rwx-wk.s4 .rwx-face.back { transform: rotateY(-180deg); transition-delay: .65s } .rwx-wk.s4 .rwx-face.front { transform: rotateY(0); transition-delay: .65s }
@keyframes rwxRise { to { opacity: 1; transform: translateY(-34px) scale(1) } }

/* الجانب */
.rwx-side { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0 }
.rwx-kick { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 800; color: #ff8a91; letter-spacing: .4px }
.rwx-kick svg { width: 15px; height: 15px }
.rwx-side h4 { margin: 0; font-size: 1.35rem; color: #fff; line-height: 1.2 }
.rwx-sub { margin: 0; color: #b9b2a7; font-size: .88rem; line-height: 1.5 }
.rwx-btn.big { min-height: 56px; font-size: 1.08rem; margin-top: 4px }
.rwx-cdw small { display: block; color: #a59f96; font-size: .75rem; margin-bottom: 4px }
.rwx-cd { display: flex; gap: 6px } .rwx-cd span { display: grid; justify-items: center; min-width: 52px; padding: 7px 6px; border-radius: 10px; background: #0b0c0f; border: 1px solid #ffffff1a; box-shadow: inset 0 0 12px #000 }
.rwx-cd b { font: 800 1.35rem/1 ui-monospace, monospace; color: #ff6b74; text-shadow: 0 0 10px #ff3b4a88; font-variant-numeric: tabular-nums } .rwx-cd i { font-style: normal; font-size: .62rem; color: #8a847b; margin-top: 3px }
.rwx-last { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 10px; background: #ffffff08; border: 1px solid #ffffff12; width: 100% }
.rwx-last small { display: block; color: #a59f96; font-size: .7rem } .rwx-last b { font-size: .88rem }
.rwx-art.sm { width: 40px; height: 40px; display: grid; place-items: center; overflow: hidden } .rwx-art.sm .rw-art { transform: scale(.55) }
.rwx-hist { display: flex; gap: 5px; flex-wrap: wrap }
.rwx-slot { position: relative; width: 40px; height: 44px; display: grid; place-items: center; border-radius: 8px; background: #121318; border: 1px solid #ffffff14; overflow: hidden }
.rwx-slot b { color: #6d6860; font-size: 1rem } .rwx-slot small { position: absolute; bottom: 1px; inset-inline-end: 3px; font-size: .55rem; color: #8a847b }
.rwx-slot .rw-art { transform: scale(.42) } .rwx-slot.got { border-color: #4db38f55 }
.rwx-slot.cur { border-color: var(--rx); box-shadow: 0 0 10px #ff3b4a66 } .rwx-slot.cur b { color: #ff6b74; animation: rwxQ 1.6s ease-in-out infinite }
.rwx-slot.lock b { color: #a59f96 }

/* ---------------- شاشة الكشف ---------------- */
.rwx-rev { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; align-content: center; gap: 14px; padding: 14px;
  background: radial-gradient(60% 60% at 50% 45%, #3a0a12f2, #07080af7); opacity: 0; transition: opacity .25s }
.rwx-rev.in { opacity: 1 } .rwx-rev.out { opacity: 0 }
.rwx-rev .rwx-rays { position: absolute; left: 50%; top: 45%; width: 620px; height: 620px; margin: -310px 0 0 -310px; pointer-events: none; opacity: .7;
  background: repeating-conic-gradient(from 0deg, #ffd16622 0deg 8deg, transparent 8deg 24deg); -webkit-mask: radial-gradient(closest-side, #000 20%, transparent); mask: radial-gradient(closest-side, #000 20%, transparent); animation: rwxBeam 14s linear infinite }
.rwx-rev .rwx-flash { position: absolute; inset: 0; background: #fff; pointer-events: none; animation: rwxFlashO .5s ease forwards }
.rwx-card { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; transform: scale(.6); opacity: 0; transition: transform .55s cubic-bezier(.2, 1.4, .4, 1), opacity .3s }
.rwx-rev.in .rwx-card { transform: scale(1); opacity: 1 }
.rwx-card .rwx-k { font-size: .78rem; font-weight: 800; color: #ffb3ba; letter-spacing: .5px }
.rwx-big { width: 150px; height: 150px; display: grid; place-items: center; border-radius: 22px; background: radial-gradient(circle at 50% 35%, #34363e, #121318); border: 2px solid var(--rxg); box-shadow: 0 0 40px #ffd16666, inset 0 0 20px #000; animation: rwxBob 2.2s ease-in-out infinite }
.rwx-big .rw-art { transform: scale(1.25) }
.rwx-card .rwx-nm { font-size: 1.4rem; color: #fff; text-shadow: 0 0 14px #ff3b4a } .rwx-card small { color: #b9b2a7 }
.rwx-ok { position: relative; min-width: 160px; min-height: 46px; border: 0; border-radius: 12px; font: inherit; font-weight: 800; color: #fff; background: linear-gradient(180deg, #e8263a, #9b0f1d); cursor: pointer; box-shadow: 0 8px 24px #e8263a55 }
.rwx-ok:hover { filter: brightness(1.1) }

/* الشرار */
.rwx-p { position: absolute; z-index: 30; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 1px; background: #ffd166; box-shadow: 0 0 8px #ffb347; pointer-events: none; animation: rwxPart .95s cubic-bezier(.2, .7, .3, 1) forwards }
.rwx-p.b { background: #ff3b4a; box-shadow: 0 0 8px #ff3b4a } .rwx-p.weekly { width: 7px; height: 7px }
@keyframes rwxPart { from { transform: translate(0, 0) rotate(0) scale(1); opacity: 1 } to { transform: translate(var(--dx), calc(var(--dy) + 60px)) rotate(var(--r)) scale(.3); opacity: 0 } }

/* الجوال بالعرض والشاشات القصيرة */
@media (max-height: 520px) {
  .rw-dlg.rwx { max-height: 96vh; padding: 10px 14px }
  .rw-dlg.rwx .dlg-h { margin-bottom: 0 } .rw-dlg.rwx .rw-tabs { margin-bottom: 6px }
  .rwx-top { margin-bottom: 4px } .rwx-track { padding: 12px 4px 8px }
  .rwx-d { width: 100px; min-height: 128px; padding-top: 22px } .rwx-d.cur { width: 112px; min-height: 140px } .rwx-d .rwx-art { width: 54px; height: 54px }
  .rwx-btn { min-height: 42px; margin-top: 6px }
  .rwx-stage { height: min(62vh, 230px) } .rwx-side h4 { font-size: 1.1rem } .rwx-sub { font-size: .8rem } .rwx-cd span { min-width: 44px; padding: 5px } .rwx-cd b { font-size: 1.1rem }
  .rwx-big { width: 110px; height: 110px } .rwx-card .rwx-nm { font-size: 1.15rem }
  .rwx-hist { display: none }
}
@media (max-width: 600px) and (min-height: 521px) { .rwx-wk { grid-template-columns: 1fr } .rwx-stage { height: 220px } }
@media (prefers-reduced-motion: reduce) {
  .rwx-crate, .rwx-q, .rwx-led, .rwx-aura, .rwx-fog, .rwx-btn.go, .rwx-btn.go::after, .rwx-d.cur .rwx-art, .rwx-ring, .rwx-big, .rwx-rev .rwx-rays { animation: none !important }
}

/* جولة 63.1: مشهد الصندوق (crate.js) — Canvas يمر على شيدر اللعبة */
.rwx-stage.cv { background: #050506 }
.rwx-stage.cv::before { display: none }
.rwx-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1 }
.rwx-stage.cv .rwx-pop { z-index: 4 }
.rwx-stage.cv .rwx-flip { filter: drop-shadow(0 0 18px #ffd16688) }
@media (max-height: 520px) { .rwx-flip { width: 78px; height: 96px } .rwx-face.back b { font-size: 2rem } @keyframes rwxRise { to { opacity: 1; transform: translateY(-18px) scale(1) } } }

/* جولة 64: العملة بنص الكرت (الأيقونة والرقم مجموعة وحدة بالوسط بدل أيقونة فوق ورقم تحت) */
.rw-art.rw-cur { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px }
.rw-art.rw-cur svg { flex:none } .rw-art.rw-cur b { line-height:1 }
.rwx-face.front .rw-art, .rwx-big .rw-art { width:100%; height:100% }

/* جولة 64.1: الجوال — الرقم تحت الأيقونة كان ينقص (الاسم تحته يكفي)، والختم صار بالزاوية بدل ما يغطي الأيقونة */
.rwx-d .rwx-art .rw-cur b, .rwx-slot .rw-cur b, .rwx-art.sm .rw-cur b { display:none }
.rwx-d .rwx-art { overflow:visible }
.rwx-stamp { top:6px; inset-inline-end:6px; width:22px; height:22px; border-width:1.5px; transform:none } .rwx-stamp svg { width:13px; height:13px }
/* الخط يمشي بين الأيام بس (ما يطلع برا آخر كرت) */
.rwx-line { inset-inline:auto; left:var(--l, 30px); right:var(--r, 30px) }
/* نسخة الطوارئ (لو الشكل الجديد ما اشتغل على جهاز) */
.rwx-safe { display:flex; flex-direction:column; gap:10px }
.rwx-safe-l { display:flex; gap:8px; overflow-x:auto; padding:4px 2px 8px }
.rwx-safe-i { flex:0 0 auto; min-width:96px; display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 8px; border-radius:12px; border:1px solid #ffffff1c; background:#16181e; text-align:center }
.rwx-safe-i small { font-size:.7rem; color:#a59f96; font-weight:800 } .rwx-safe-i b { font-size:.85rem; color:#ece6dc }
.rwx-safe-i.got { opacity:.55; border-color:#4db38f55 } .rwx-safe-i.cur { border-color:var(--rx); box-shadow:0 0 0 1px #ff3b4a66, 0 6px 18px #e8263a33 }
.rwx-err { opacity:.45; font-size:.62rem; text-align:center; word-break:break-all }
/* الجوالات القصيرة جدًا بالعرض (360–400): كل شي يبان بدون تمرير، وزر الاستلام تحت ظاهر */
@media (max-height: 400px) {
  .rw-dlg.rwx { padding: 8px 12px } .rw-dlg.rwx .dlg-h h3 { font-size: 1rem } .rw-dlg.rwx .rw-tabs button { padding: 6px 10px }
  .rwx-top { margin-bottom: 2px } .rwx-top .rwx-chip { padding: 3px 9px; font-size: .72rem } .rwx-top .rwx-chip.soft { display: none }
  .rwx-track { padding: 10px 4px 6px } .rwx-d { min-height: 106px; width: 92px; padding: 20px 6px 8px; gap: 3px } .rwx-d.cur { min-height: 116px; width: 102px }
  .rwx-d .rwx-art { width: 44px; height: 44px } .rwx-d .rwx-nm { font-size: .74rem }
  .rwx-btn { min-height: 38px; margin-top: 4px; font-size: .92rem }
  .rwx-stage { height: min(58vh, 200px) }
}
.rwx-d.cur .rwx-n, .rwx-d.nxt .rwx-n { top: 13px } @media (max-height: 400px) { .rwx-d.cur { padding-top: 26px } }

/* ---------- جولة 84: المسار يتحرك بسلاسة — snap باللمس بس، وأسهم للكمبيوتر ---------- */
@media (pointer: coarse) { .rwx-track { scroll-snap-type: x proximity } }
.rwx-tw { position: relative }
.rwx-track.drag { cursor: grabbing; user-select: none }
.rwx-track.drag .rwx-d { pointer-events: none }
.rwx-nav { position: absolute; z-index: 3; top: 50%; width: 38px; height: 38px; margin-top: -19px; display: grid; place-items: center; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid #ffffff2a; background: #15171ddd; color: #ece6dc; box-shadow: 0 6px 16px #0009; transition: opacity .2s, background .15s, border-color .15s }
.rwx-nav svg { width: 18px; height: 18px }
.rwx-nav:hover, .rwx-nav:focus-visible { background: #22252ef0; border-color: var(--rx, #e8263a); outline: none }
.rwx-nav.nx { left: -6px } .rwx-nav.pv { right: -6px }
.rwx-nav:disabled, .rwx-fit .rwx-nav { opacity: 0; pointer-events: none }
@media (pointer: coarse) { .rwx-nav { display: none } }
