/* =====================================================================
   جولة 56 — بطاقات وسط القائمة: المطاردة · اصنع مرحلتك · القطار (+ لوحة المطاردة)
   ===================================================================== */
.menu-home { display: flex; flex-direction: column; gap: 12px; min-width: 0 }
.m3 { display: flex; flex-direction: column; gap: 12px }
.menu-home > .brand-links { margin-top: 0 }

.m3c { --tint: #b7101a; --ink: #fff; position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 104px; padding: 14px 20px;
  font: inherit; color: var(--ink); text-align: start; cursor: pointer; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tint) 34%, #0b0c11), #08090d 70%);
  border: 1px solid color-mix(in srgb, var(--tint) 45%, #ffffff1a);
  box-shadow: 0 10px 26px #0009, inset 0 1px 0 #ffffff12;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease }
.m3c.m3-make { --tint: #1e8fb8 }
.m3c.m3-train { --tint: #c98a1e; --ink: #ffe7b0 }
.m3c:hover, .m3c:focus-visible { transform: translateY(-3px); box-shadow: 0 18px 38px #000b, 0 0 0 1px color-mix(in srgb, var(--tint) 70%, transparent), 0 0 30px -6px var(--tint); outline: none }
.m3c:active { transform: translateY(-1px) scale(.995) }
/* الأنميشن خلف النص — يخفت ناحية النص عشان يبقى مقروء */
.m3c > .m3-cv, .m3c > .tr-mini { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; z-index: -2; opacity: .95; pointer-events: none }
.m3c > .m3-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to left, color-mix(in srgb, var(--tint) 30%, #07080cf2) 0%, #07080cd9 34%, #07080c66 62%, #07080c14 100%) }
.m3c::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; z-index: 1; pointer-events: none; opacity: .9;
  background: repeating-linear-gradient(-45deg, var(--tint) 0 8px, #0a0b0f 8px 16px) }
.m3c::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 40%, #ffffff10 50%, transparent 60%) -200% 0 / 250% 100% no-repeat }
.m3c:hover::after { animation: m3Shine .9s ease }
@keyframes m3Shine { to { background-position: 200% 0 } }
.m3-rv { position: absolute; width: 7px; height: 7px; border-radius: 50%; z-index: 2; background: radial-gradient(circle at 35% 35%, #b4bac6, #2a2d36 70%); box-shadow: 0 1px 0 #000, 0 0 0 1px #00000066 }
/* جولة 58: المسامير بالزوايا نفسها وبمسافة متساوية (الزاويتين المقصوصتين — فوق يسار وتحت يمين — تبعد على القطر) */
.m3-rv.a { top: 11px; right: 11px } .m3-rv.b { top: 15px; left: 15px } .m3-rv.c { bottom: 15px; right: 15px } .m3-rv.d { bottom: 11px; left: 11px }

.m3-ic { position: relative; z-index: 2; width: 54px; height: 54px; flex: none; display: grid; place-items: center; color: var(--ink);
  background: #07080ccc; border: 1px solid color-mix(in srgb, var(--tint) 75%, #fff2);
  box-shadow: inset 0 0 14px #000a, 0 0 18px -4px var(--tint);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px) }
.m3c.m3-train > .m3-ic { background: #07080ccc !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid #ffd16699 !important; margin: 0 !important; padding: 0 !important }
.m3-ic svg, .m3-ic img { width: 28px; height: 28px; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tint) 80%, transparent)) }
.m3-ic img { object-fit: contain; image-rendering: pixelated }
.m3c:hover .m3-ic svg { animation: m3Bob .5s ease }
@keyframes m3Bob { 40% { transform: translateY(-3px) } }
.m3-txt { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 }
.m3-t { font-size: 1.32rem; font-weight: 900; letter-spacing: .2px; line-height: 1.2; text-shadow: 0 2px 6px #000, 0 0 16px color-mix(in srgb, var(--tint) 50%, transparent) }
#btn_train .m3-t { color: #ffe7b0 }
.m3-s { font-size: .84rem; opacity: .78; line-height: 1.5; text-shadow: 0 1px 3px #000; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
.m3-badge { position: absolute; top: 9px; left: 40px; z-index: 3; padding: 2px 9px; font-size: .7rem; font-weight: 900; color: #fff; background: var(--tint); box-shadow: 0 0 12px var(--tint); clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%) }
.m3-go { position: relative; z-index: 2; width: 36px; height: 36px; flex: none; display: grid; place-items: center; color: #fff; background: color-mix(in srgb, var(--tint) 80%, #000); border: 1px solid #ffffff33;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); transition: transform .18s }
.m3-go svg { width: 18px; height: 18px }
.m3c:hover .m3-go { transform: translateX(-4px) }
/* مقفل / ينتظر الصلاحية */
.m3c.st-lock, .m3c.st-wait { cursor: not-allowed }
.m3c.st-lock > .m3-cv, .m3c.st-lock > .tr-mini { filter: grayscale(.85) brightness(.55) }
.m3c.st-lock .m3-ic, .m3c.st-lock .m3-txt { opacity: .62 }
.m3c.st-lock:hover, .m3c.st-wait:hover { transform: none; box-shadow: 0 10px 26px #0009 }
.m3-lock { position: relative; z-index: 2; flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: .8rem; font-weight: 900; color: #ffd166;
  background: #0a0b10e6; border: 1px solid #ffd16655; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px) }
.m3-lock svg { width: 15px; height: 15px }
.m3c.st-wait .m3-go { opacity: .4 }
.screen.active .m3 > .m3c { animation: m3In .42s cubic-bezier(.2, .9, .3, 1.1) both }
.m3 > .m3c:nth-child(2) { animation-delay: .06s } .m3 > .m3c:nth-child(3) { animation-delay: .12s }
@keyframes m3In { from { opacity: 0; transform: translateX(-14px) } to { opacity: 1; transform: none } }

/* ---------- لوحة «المطاردة» ---------- */
.chase-ov { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 18px; background: radial-gradient(ellipse at 50% 40%, #000000a8, #000000eb);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .18s ease }
.chase-ov[hidden] { display: none }
.chase-ov.on { opacity: 1 }
.chase-box { position: relative; width: min(820px, 100%); max-height: calc(100dvh - 36px); overflow: auto; overscroll-behavior: contain; padding: 16px 18px 14px;
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  transform: translateY(14px) scale(.97); transition: transform .22s cubic-bezier(.2, .9, .3, 1.15) }
.chase-ov.on .chase-box { transform: none }
.chase-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px dashed #ffffff1c }
.chase-ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; color: #fff; background: #0a0b10; border: 1px solid #b7101a;
  box-shadow: 0 0 16px #b7101a66, inset 0 0 10px #000a; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px) }
.chase-ic svg { width: 24px; height: 24px }
.chase-tt { flex: 1; min-width: 0 } .chase-tt h3 { margin: 0; font-size: 1.3rem; font-weight: 900 } .chase-tt p { margin: 2px 0 0; font-size: .85rem; opacity: .7 }
.chase-box .menu-play { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; grid-template-rows: auto auto; grid-auto-rows: auto }
.chase-box .menu-play > .pcard { min-height: 120px }
.chase-box .menu-play > .join-row { grid-column: 1 / -1; margin: 0 }
.chase-box .err { min-height: 0; margin: 8px 0 0 } .chase-box .err:empty { display: none }
.chase-ov.on .menu-play > * { animation: m3In .32s ease both }
.chase-ov.on .menu-play > *:nth-child(2) { animation-delay: .04s } .chase-ov.on .menu-play > *:nth-child(3) { animation-delay: .08s } .chase-ov.on .menu-play > *:nth-child(4) { animation-delay: .12s } .chase-ov.on .menu-play > *:nth-child(5) { animation-delay: .16s }
@media (max-width: 560px) and (orientation: portrait) { .chase-box .menu-play { grid-template-columns: 1fr } }
@media (prefers-reduced-motion: reduce) { .m3c, .chase-box, .chase-ov { transition: none } .screen.active .m3 > .m3c, .chase-ov.on .menu-play > * { animation: none } }

/* ===== جولة 57 ===== */
/* القطار: الرسمة بالجهة المقابلة للنص (يسار)، كاملة الوضوح — كان الظل والنص الأصفر يغطّونها */
.m3c.m3-train > .tr-mini { inset: 0 auto 0 0 !important; width: 66% !important; height: 100% !important; object-fit: cover; object-position: right center; opacity: 1 !important; filter: brightness(1.25) saturate(1.1) }
.m3c.m3-train > .m3-shade { background: linear-gradient(to left, color-mix(in srgb, var(--tint) 26%, #07080cf5) 0%, #07080cd0 30%, #07080c40 46%, transparent 58%) }
.m3c.m3-train .m3-t { text-shadow: 0 2px 6px #000, 0 0 10px #000 }
.m3c.m3-make > .m3-shade { background: linear-gradient(to left, color-mix(in srgb, var(--tint) 26%, #07080cf2) 0%, #07080cd0 32%, #07080c33 50%, transparent 62%) }
/* تعذّر التحقق من الصلاحية — يعيد المحاولة لحاله، وضغطة تعيدها فورًا */
.m3c.st-fail { cursor: pointer }
.m3-lock.fail { color: #8ecbff; border-color: #8ecbff55 }
.m3c.st-wait .m3-end::after { content: ''; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #ffffff33; border-top-color: #fff; animation: m3Spin .8s linear infinite; display: block }
.m3c.st-wait .m3-go { display: none }
@keyframes m3Spin { to { transform: rotate(360deg) } }
.m3-end { position: relative; z-index: 2; flex: none; display: grid; place-items: center }

/* ===== جولة 58: البطاقة المقفلة («قريبًا») — سودا بنفس لونها، بدون أنميشن البطاقة، نص واحد + انتظار متحرك ===== */
.m3c.st-lock { cursor: default; background: radial-gradient(ellipse at 50% 135%, color-mix(in srgb, var(--tint) 26%, transparent), transparent 62%), #040507;
  border-color: color-mix(in srgb, var(--tint) 55%, #ffffff12) }
.m3c.st-lock > .m3-cv, .m3c.st-lock > .tr-mini, .m3c.st-lock > .m3-shade, .m3c.st-lock .m3-ic, .m3c.st-lock .m3-txt, .m3c.st-lock .m3-badge { display: none !important }
.m3c.st-lock .m3-end { position: static }
.m3c.st-lock:hover { transform: none; box-shadow: 0 10px 26px #0009, 0 0 22px -8px var(--tint) }
.m3-soon { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; overflow: hidden; pointer-events: none }
.m3-soon-grid { position: absolute; inset: 0; opacity: .35;
  background: linear-gradient(color-mix(in srgb, var(--tint) 16%, transparent) 1px, transparent 1px) 0 0 / 100% 6px,
              linear-gradient(90deg, #ffffff06 1px, transparent 1px) 0 0 / 24px 100%;
  -webkit-mask: radial-gradient(ellipse at center, #000 30%, transparent 75%); mask: radial-gradient(ellipse at center, #000 30%, transparent 75%) }
.m3-soon-beam { position: absolute; top: 0; bottom: 0; width: 28%; left: -30%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tint) 22%, transparent) 45%, color-mix(in srgb, var(--tint) 34%, #fff0) 50%, color-mix(in srgb, var(--tint) 22%, transparent) 55%, transparent);
  animation: m3Beam 4.6s cubic-bezier(.45, 0, .55, 1) infinite }
@keyframes m3Beam { 0% { left: -30% } 55%, 100% { left: 102% } }
.m3-soon-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px }
.m3-soon-lk { width: 26px; height: 26px; display: grid; place-items: center; color: color-mix(in srgb, var(--tint) 60%, #fff); opacity: .8; animation: m3Lk 4.6s ease-in-out infinite }
.m3-soon-lk svg { width: 18px; height: 18px }
@keyframes m3Lk { 0%, 40%, 100% { transform: none } 46% { transform: rotate(-12deg) } 52% { transform: rotate(10deg) } 58% { transform: rotate(-5deg) } 63% { transform: none } }
.m3-soon-t { font-size: 1.55rem; font-weight: 900; line-height: 1.1; color: color-mix(in srgb, var(--tint) 35%, #fff);
  text-shadow: 0 0 18px color-mix(in srgb, var(--tint) 80%, transparent), 0 0 3px color-mix(in srgb, var(--tint) 90%, transparent), 0 2px 0 #000;
  animation: m3Neon 6s steps(1) infinite }
@keyframes m3Neon { 0%, 100% { opacity: 1 } 71% { opacity: .35 } 72% { opacity: 1 } 74% { opacity: .5 } 75% { opacity: 1 } }
.m3-soon-dots { display: flex; gap: 5px }
.m3-soon-dots i { width: 6px; height: 6px; background: var(--tint); box-shadow: 0 0 8px var(--tint); opacity: .18; animation: m3Dot 1.5s steps(1) infinite }
.m3-soon-dots i:nth-child(2) { animation-delay: .15s } .m3-soon-dots i:nth-child(3) { animation-delay: .3s } .m3-soon-dots i:nth-child(4) { animation-delay: .45s } .m3-soon-dots i:nth-child(5) { animation-delay: .6s }
@keyframes m3Dot { 0% { opacity: 1 } 30%, 100% { opacity: .18 } }
@media (orientation: landscape) and (max-height: 500px) { .m3-soon-t { font-size: 1.2rem } .m3-soon-lk { display: none } .m3-soon-in { gap: 5px } }
@media (prefers-reduced-motion: reduce) { .m3-soon-beam, .m3-soon-lk, .m3-soon-t, .m3-soon-dots i { animation: none } .m3-soon-dots i { opacity: .6 } }