/* =====================================================================
   جولة 69: تجربة اللاعب الجديد — np.js و tut.js
   ===================================================================== */
/* ---- شريط الخطوة الحالية: فوق بالنص تحت المؤقت ---- */
.np-obj{ position:relative; z-index:7; display:flex; align-items:center; gap:8px;
  max-width:min(520px, calc(100vw - 380px)); min-width:0; padding:5px 14px 5px 10px; background:#07080cd9; border:1px solid #ffffff26; color:#ece9e1; font-weight:700; font-size:.86rem;
  pointer-events:none; white-space:nowrap; clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); text-shadow:0 1px 2px #000 }
.np-obj[hidden]{ display:none }
.np-obj b{ overflow:hidden; text-overflow:ellipsis; font-weight:700 }
.np-ob-ic{ flex:none; width:18px; height:18px; display:grid; place-items:center; color:#ffd166 } .np-ob-ic svg{ width:18px; height:18px }
.np-obj.pulse{ animation:npPulse .9s ease-out }
@keyframes npPulse{ 0%{ box-shadow:0 0 0 0 #ffd16699; border-color:#ffd166 } 100%{ box-shadow:0 0 0 14px #ffd16600; border-color:#ffffff26 } }
body.touch .np-obj{ font-size:.78rem; padding:4px 10px 4px 8px; max-width:calc(100vw - 360px) }
@media (max-width:700px){ body.touch .np-obj{ max-width:calc(100vw - 300px) } }
.hud-center{ min-width:0 }
/* ---- تنبيه تغيّر الخطوة: بالنص لثانيتين ---- */
.np-toast{ position:absolute; z-index:8; left:50%; top:22%; transform:translate(-50%,-50%) scale(.96); padding:8px 20px; font-size:1.35rem; font-weight:900; color:#fff;
  text-shadow:0 2px 10px #000, 0 0 18px #000; opacity:0; pointer-events:none; white-space:nowrap; letter-spacing:.2px }
.np-toast.on{ animation:npToast 2s ease forwards }
@keyframes npToast{ 0%{ opacity:0; transform:translate(-50%,-40%) scale(.94) } 12%{ opacity:1; transform:translate(-50%,-50%) scale(1) } 80%{ opacity:1 } 100%{ opacity:0; transform:translate(-50%,-56%) } }
body.touch .np-toast{ font-size:1.05rem; top:26% }
/* ---- سهم أقرب هدف (على طرف الشاشة) ---- */
.np-arrow{ position:absolute; left:0; top:0; z-index:5; width:44px; height:44px; color:#ffd166; pointer-events:none; filter:drop-shadow(0 0 6px #000) drop-shadow(0 0 10px #ffd16655); will-change:transform }
.np-arrow[hidden]{ display:none }
.np-arrow svg{ width:100%; height:100%; animation:npNudge 1s ease-in-out infinite }
@keyframes npNudge{ 50%{ transform:translateX(5px) } }
/* ---- الخريطة الصغيرة ---- */
.np-map{ position:absolute; z-index:5; right:calc(14px + var(--safe-r,0px)); top:calc(56px + var(--safe-t,0px)); width:170px; height:auto; max-height:120px; object-fit:contain;
  image-rendering:pixelated; border:1px solid #ffffff2a; background:#000a; opacity:.92; pointer-events:none }
.np-map[hidden], .np-map-btn[hidden], .np-map-full[hidden]{ display:none }
.np-map-btn{ position:absolute; z-index:6; right:calc(12px + var(--safe-r,0px)); top:calc(46px + var(--safe-t,0px)); width:38px; height:38px; display:grid; place-items:center; padding:0;
  background:#07080ccc; border:1px solid #ffffff2e; border-radius:10px; color:#e8e6df; pointer-events:auto; touch-action:none }
.np-map-btn svg{ width:20px; height:20px }
.np-map-full{ position:absolute; inset:0; z-index:30; display:flex; align-items:center; justify-content:center; background:#000c; pointer-events:auto }
.np-mf-box{ display:flex; flex-direction:column; align-items:center; gap:8px }
.np-mf-box canvas{ max-width:86vw; max-height:70vh; width:auto; height:70vh; aspect-ratio:auto; image-rendering:pixelated; border:1px solid #ffffff33 }
/* ---- «العب الآن» بالقائمة ---- */
.np-play{ display:flex; align-items:center; gap:14px; width:100%; margin:0 0 10px; padding:12px 18px; border:1px solid #ffffff2a; border-radius:4px; cursor:pointer; color:#fff; text-align:start;
  background:linear-gradient(90deg,#7a0d14,#3a0a0e 70%); box-shadow:0 0 0 1px #000 inset, 0 8px 24px #0008; clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px) }
.np-play[hidden]{ display:none }
.np-play:hover, .np-play:focus-visible{ filter:brightness(1.12) }
.np-pl-ic{ flex:none; width:44px; height:44px; display:grid; place-items:center; background:#0006; border:1px solid #ffffff33; border-radius:50% } .np-pl-ic svg{ width:22px; height:22px }
.np-pl-t{ display:flex; flex-direction:column; line-height:1.2 } .np-pl-t b{ font-size:1.25rem; font-weight:900 } .np-pl-t small{ opacity:.8; font-size:.78rem }
@media (max-height:460px){ .np-play{ padding:7px 14px; margin-bottom:6px } .np-pl-ic{ width:34px; height:34px } .np-pl-t b{ font-size:1.05rem } .np-pl-t small{ display:none } }
/* شاشة الانتظار */
body.np-qwait #lobbyCountdown b{ font-size:1.2em; color:#ffd166 }
body.np-qwait #lobbyRdyRow{ display:none }

/* ---- الدرس ---- */
/* جولة 86: لوحة الفصل — بطاقة مهمة: الكمبيوتر فوق يسار (ما تزاحم كلام المشرف ولا شريط الهدف) · الجوال جنب الزر نفسه */
.tut-box{ position:absolute; z-index:9; left:calc(14px + var(--safe-l,0px)); top:calc(14px + var(--safe-t,0px)); width:min(340px, 40vw); padding:10px 13px 11px; pointer-events:auto; direction:rtl;
  background:linear-gradient(180deg, #11131bf5, #0a0b10f2); border:1px solid #ffffff1c; border-inline-start:3px solid #e2342e; box-shadow:0 12px 30px #000c, inset 0 1px 0 #ffffff0d; color:#ece9e1;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px)) }
.tut-box::before{ content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 3px); }
.tut-box[hidden]{ display:none }
.tut-box.near{ transform:none }
.tut-box.in{ animation:tutIn .4s cubic-bezier(.2,.8,.2,1) }
@keyframes tutIn{ from{ opacity:0; translate:0 -8px; filter:brightness(2) } 60%{ filter:brightness(1.3) } to{ opacity:1; translate:0 0; filter:none } }
.tut-h{ display:flex; align-items:center; gap:7px; font-size:.7rem }
.tut-rec{ display:grid; place-items:center; width:12px; height:12px } .tut-rec i{ width:7px; height:7px; border-radius:50%; background:#ff3b30; box-shadow:0 0 8px #ff3b30; animation:mkeBlink 1.2s steps(2) infinite }
.tut-n{ font-weight:900; color:#ff8a80; letter-spacing:.3px; background:none; padding:0 }
.tut-dots{ display:flex; gap:3px; flex:1; direction:rtl } .tut-dots i{ width:12px; height:3px; background:#ffffff1f } .tut-dots i.ok{ background:#e2342e99 } .tut-dots i.now{ background:#ffd166; box-shadow:0 0 6px #ffd16699 }
.tut-skip{ font:inherit; font-size:.68rem; color:#bdb8ad; background:#ffffff08; border:1px solid #ffffff22; padding:2px 8px; cursor:pointer; touch-action:none }
.tut-skip:hover{ color:#fff; border-color:#e2342e }
.tut-t{ display:block; margin-top:6px; font-size:1.02rem; font-weight:900; color:#fff }
.tut-box p{ margin:3px 0 0; font-size:.84rem; line-height:1.6; color:#d9d5cb; unicode-bidi:plaintext }
.tut-box kbd, .tut-keys kbd{ display:inline-block; unicode-bidi:isolate; direction:ltr; min-width:1.5em; padding:0 .4em; margin:0 .15em; font:900 .76rem/1.5 ui-monospace,Consolas,monospace; text-align:center; color:#0b0c11; background:#ffd166; border-bottom:2px solid #a8842f; border-radius:3px; vertical-align:1px }
.tut-keys{ display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:8px; padding-top:7px; border-top:1px dashed #ffffff1c }
.tut-keys[hidden]{ display:none }
.tut-keys .tk{ display:inline-flex; align-items:center; gap:5px; font-size:.74rem; color:#bdb8ad } .tut-keys .tk em{ font-style:normal }
.tut-keys .tk-t{ display:inline-flex; align-items:center; gap:6px; font-size:.74rem; color:#ffd166; font-weight:800 }
.tk-ic{ flex:none; width:14px; height:14px; border-radius:50%; border:2px solid #ffd166; box-shadow:0 0 6px #ffd16688 }
body.touch .tut-box{ width:min(320px, 44vw); padding:8px 11px 9px } body.touch .tut-box p{ font-size:.76rem } body.touch .tut-t{ font-size:.9rem; margin-top:4px }
.tut-ptr{ position:absolute; z-index:8; width:0; height:0; pointer-events:none }
.tut-ptr[hidden]{ display:none }
.tut-ptr i{ position:absolute; left:calc(var(--d,90px) / -2); top:calc(var(--d,90px) / -2); width:var(--d,90px); height:var(--d,90px); border-radius:50%; border:3px solid #ffd166; box-shadow:0 0 18px #ffd16699; animation:tutRing 1.1s ease-out infinite }
@keyframes tutRing{ 0%{ transform:scale(.9); opacity:1 } 100%{ transform:scale(1.25); opacity:0 } }
.tut-end{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:#000b; padding:16px }
.tut-end-box{ width:min(420px, 100%); display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:22px 20px; background:#0b0c11; border:1px solid #ffffff22 }
.tut-end-box h3{ margin:0; font-size:1.3rem } .tut-end-box p{ margin:0; font-size:.88rem; line-height:1.6 }
.tut-end-box .btn{ width:100% }
.tut-end-ic{ width:54px; height:54px; display:grid; place-items:center; border-radius:50%; background:#ffd16622; color:#ffd166 } .tut-end-ic svg{ width:28px; height:28px }
.tut-cta{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 12px; padding:10px 14px; border:1px solid #ffd16644; background:#ffd1660d }
.tut-cta span{ display:flex; flex-direction:column } .tut-cta small{ font-size:.78rem }

/* ---- حذف الحساب ---- */
.acc-del-row[hidden]{ display:none }
.btn.danger{ color:#ff8a80; border-color:#ff5b5755 }
.acc-del{ display:flex; flex-direction:column; gap:10px }
.acc-del ul{ margin:0; padding-inline-start:18px; line-height:1.8; font-size:.88rem }
.acc-del .warn{ padding:10px 12px; border:1px solid #ff5b5755; background:#ff5b5712; font-size:.86rem; line-height:1.6 }
.acc-del input{ width:100% }

/* =====================================================================
   شاشة اللعب بالجوال (المفتاح hud): معلومات فوق · أزرار تحت · النص فاضي للعب
   ===================================================================== */
/* صف الفريق + المهام: أصغر، فوق يسار تحت العدادات */
body.np-hud.touch .dbd.pos-auto{ top:calc(48px + var(--safe-t,0px)); --k:calc(var(--dbd-k,1) * .56) }
@media (max-height:440px) and (orientation:landscape){ body.np-hud.touch .dbd.pos-auto{ --k:calc(var(--dbd-k,1) * .48) } }
body.np-hud.touch .dbd-team{ gap:8px }
body.np-hud.touch .dbd-sv{ width:56px }
body.np-hud.touch .dbd-nm{ max-width:56px; font-size:.7rem }
body.np-hud.touch .dbd-sep{ width:min(300px,50vw) }
/* شريط الفريق الكلاسيكي (لو المحرك اختار classic) يطلع فوق بعد بس */
body.np-hud.touch .hud-team{ top:calc(48px + var(--safe-t,0px)) }
/* ألوان أهدى: «فعل» رمادي غامق بحلقة حمرا خفيفة — الأحمر الصارخ للتنبيهات المهمة بس */
body.np-hud .act{ background:radial-gradient(circle at 50% 40%, #2a2c35, #15161c 72%); border:2px solid #ffffff38; box-shadow:0 0 0 3px #a3121c55, 0 6px 18px #0009; color:#f2efe8; text-shadow:0 1px 2px #000 }
body.np-hud .act:active{ background:radial-gradient(circle at 50% 40%, #3a2a2e, #1d1416 72%); box-shadow:0 0 0 3px #c0182488 }
body.np-hud .dbd-ab.ready .fg{ stroke:#e8e6df } body.np-hud .dbd-ab.ready{ filter:drop-shadow(0 0 6px #ffffff55) }
body.np-hud .hud-chip.role.awbad svg{ color:#d77a7a }
body.np-hud .joy{ background:#ffffff0f; border-color:#ffffff29 }
/* حجم الأزرار: صغير / عادي / كبير */
body.touch.btn-s .act{ width:72px; height:72px; font-size:.95rem }
body.touch.btn-l .act{ width:112px; height:112px; font-size:1.25rem }
body.touch.btn-s .joy{ width:100px; height:100px } body.touch.btn-s #joyKnob{ width:40px; height:40px; left:30px; top:30px }
body.touch.btn-l .joy{ width:150px; height:150px } body.touch.btn-l #joyKnob{ width:60px; height:60px; left:45px; top:45px }
body.touch.btn-l .toolbar{ bottom:calc(172px + var(--safe-b)) }   /* الشاشات الطويلة (آيباد): فوق «فعل» الكبير */
@media (orientation:landscape) and (max-height:520px){
  body.touch.btn-s .toolbar{ left:calc(114px + var(--safe-l)); bottom:calc(50px + var(--safe-b)) } body.touch.btn-s.joyleft .toolbar{ left:auto; right:calc(114px + var(--safe-r)) }
  body.touch.btn-l .toolbar{ left:calc(156px + var(--safe-l)); bottom:calc(62px + var(--safe-b)) } body.touch.btn-l.joyleft .toolbar{ left:auto; right:calc(156px + var(--safe-r)) }
  body.touch.btn-s .tool{ width:40px; height:40px } body.touch.btn-l .tool{ width:50px; height:50px }
  body.touch.btn-l .chat, body.touch.btn-l .status, body.touch.btn-l .prog{ bottom:calc(170px + var(--safe-b)) }
}


.acc-del{ max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); overflow:auto }
@media (max-height:460px){ .acc-del{ gap:6px; padding:12px 14px } .acc-del h3{ margin:0 } .acc-del ul{ line-height:1.5; font-size:.8rem } .acc-del .warn{ padding:6px 10px; font-size:.8rem } .acc-del input{ min-height:38px } }
/* المخطّط صفر: شريط المرحلة (إعادة/المراحل) ينزل تحت شريط الهدف */
body.np-obj-on .lv-bar{ top:calc(env(safe-area-inset-top) + 92px) }
body.np-obj-on.touch .lv-bar{ top:calc(env(safe-area-inset-top) + 82px) }

/* =====================================================================
   جولة 75: درس المخطّط السينمائي «أول ليلة دوام» + بطاقة «تعلّم بالتجربة»
   ===================================================================== */
.mtc{ position:fixed; inset:0; z-index:150; pointer-events:none; font-family:inherit }
.mtc[hidden]{ display:none }
.mtc-bar{ position:absolute; left:0; right:0; height:0; background:#000; transition:height .7s cubic-bezier(.2,.8,.2,1); z-index:2 }
.mtc-bar.t{ top:0; box-shadow:0 6px 18px #000c } .mtc-bar.b{ bottom:0; box-shadow:0 -6px 18px #000c }
.mtc.on .mtc-bar{ height:12vh }
.mtc-black{ position:absolute; inset:0; background:#000; opacity:0; transition:opacity .8s ease; z-index:1 }
.mtc.blk .mtc-black{ opacity:1 }
.mtc-lines{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:0 8vw; opacity:0; transition:opacity .5s }
.mtc-lines.on{ opacity:1 }
.mtc-lines p{ margin:0; color:#efe6d2; font-size:clamp(1.05rem, 3.2vw, 1.9rem); font-weight:800; text-align:center; text-shadow:0 0 18px #b7101a66; animation:mtcIn .5s ease both }
.mtc-lines p:first-child{ color:#ff6b63; font-size:clamp(.85rem, 2.2vw, 1.15rem); letter-spacing:1px; font-weight:700 }
@keyframes mtcIn{ from{ opacity:0; transform:translateY(6px); filter:blur(3px) } to{ opacity:1; transform:none; filter:none } }
.mtc-card{ position:absolute; z-index:4; top:calc(12vh + 16px); inset-inline-start:max(18px, 4vw); display:flex; flex-direction:column; gap:2px; padding:6px 16px 8px; border-inline-start:3px solid #e2342e;
  background:linear-gradient(90deg, #000c, #0000); opacity:0; transform:translateX(12px) }
html[dir=rtl] .mtc-card{ background:linear-gradient(270deg, #000c, #0000); transform:translateX(-12px) }
.mtc-card.on{ animation:mtcCard 3.2s ease forwards }
@keyframes mtcCard{ 0%{ opacity:0; transform:translateX(0) } 12%,78%{ opacity:1; transform:none } 100%{ opacity:0 } }
.mtc-card small{ color:#ff6b63; font-size:.72rem; font-weight:800; letter-spacing:1px }
.mtc-card b{ color:#fff; font-size:clamp(1.1rem, 2.6vw, 1.7rem); text-shadow:0 2px 10px #000 }
.mtc-sub{ position:absolute; z-index:4; left:50%; bottom:calc(12vh + 14px); transform:translate(-50%, 8px); width:min(760px, 88vw); display:flex; flex-direction:column; align-items:center; gap:4px; opacity:0; transition:opacity .3s, transform .3s; text-align:center }
.mtc-sub.on{ opacity:1; transform:translate(-50%, 0) }
.mtc-who{ display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:800; color:#ffcf7a; background:#000b; padding:2px 10px; border:1px solid #ffcf7a44 }
.mtc-who::before{ content:''; width:7px; height:7px; border-radius:50%; background:#ff3b30; box-shadow:0 0 8px #ff3b30; animation:mkeBlink 1s steps(2) infinite }
.mtc-who[hidden]{ display:none }
.mtc-txt{ font-size:clamp(.92rem, 2vw, 1.18rem); font-weight:700; line-height:1.7; color:#fff; background:#000a; padding:6px 14px; text-shadow:0 1px 4px #000 }
@keyframes mkeBlink{ 50%{ opacity:.25 } }
.mtc-skip{ position:absolute; z-index:5; bottom:calc(6vh - 14px); inset-inline-end:16px; pointer-events:auto; background:#ffffff10; border:1px solid #ffffff2e; color:#d9d5cb; font:inherit; font-size:.76rem; font-weight:700; padding:5px 12px; cursor:pointer; opacity:0; transition:opacity .4s .6s }
.mtc.on .mtc-skip{ opacity:.85 } .mtc-skip:hover{ opacity:1; border-color:#e2342e } .mtc-skip span{ letter-spacing:-2px; margin-inline-start:4px }
body.mtc-on #hud, body.mtc-on #touch, body.mtc-on #toolBar, body.mtc-on #quickChat, body.mtc-on .mtc-quick, body.mtc-on .lv-bar, body.mtc-on #lvTip, body.mtc-on #npObj, body.mtc-on .np-obj, body.mtc-on #npArrow, body.mtc-on #npMap, body.mtc-on #npMapBtn{ opacity:0 !important; pointer-events:none !important; transition:opacity .4s }
.mtc-outro{ position:fixed; inset:0; z-index:190; background:#000; display:flex; align-items:center; justify-content:center; animation:mtcFade .6s ease both }
.mtc-outro > div{ display:flex; flex-direction:column; gap:10px; align-items:center; padding:0 8vw }
.mtc-outro p{ margin:0; color:#efe6d2; font-size:clamp(1.05rem, 3vw, 1.8rem); font-weight:800; text-align:center; text-shadow:0 0 18px #b7101a55 }
.mtc-outro .mtc-skip{ opacity:.8; bottom:20px }
.mtc-outro.out{ animation:mtcFade .45s ease reverse both }
@keyframes mtcFade{ from{ opacity:0 } to{ opacity:1 } }
.tut-box.mk{ border-inline-start-color:#e2342e }
/* جولة 86: مشهد ظهور الأوباد — اسمه بالأحمر مع تشويش · ومشهد المطاردة — «اركض!» */
.mtc-boss{ position:absolute; z-index:4; inset-inline-end:max(22px, 6vw); top:50%; translate:0 -50%; display:flex; flex-direction:column; align-items:flex-end; gap:2px; text-align:end; opacity:0; pointer-events:none }
.mtc-boss.on{ animation:mtcBoss 2.3s ease both }
.mtc-boss small{ font:800 .7rem/1 ui-monospace,monospace; letter-spacing:3px; color:#ff8a80; padding:3px 8px; border:1px solid #e2342e88; background:#e2342e1f }
.mtc-boss b{ position:relative; font-size:clamp(2.2rem, 8vw, 4.6rem); font-weight:900; line-height:1.05; color:#f1e7d8; text-shadow:0 0 22px #b7101a, 0 0 2px #fff }
.mtc-boss b::before, .mtc-boss b::after{ content:attr(data-t); position:absolute; inset:0; opacity:.7; mix-blend-mode:screen }
.mtc-boss b::before{ color:#ff2a2a; translate:-3px 0; clip-path:inset(0 0 55% 0); animation:mtcGl 1.6s steps(6) infinite }
.mtc-boss b::after{ color:#3ad; translate:3px 0; clip-path:inset(55% 0 0 0); animation:mtcGl 1.3s steps(5) infinite reverse }
.mtc-boss em{ font-style:normal; font-size:clamp(.85rem, 2.2vw, 1.15rem); color:#d9d5cb; border-top:2px solid #e2342e; padding-top:5px; margin-top:3px }
.mtc-scan{ position:absolute; inset:-10px -16px; background:linear-gradient(180deg, transparent 0 45%, #ff3b3033 50%, transparent 55%); background-size:100% 220%; animation:mtcScan 1.1s linear infinite; pointer-events:none }
@keyframes mtcBoss{ 0%{ opacity:0; translate:30px -50%; filter:blur(4px) } 12%{ opacity:1; translate:0 -50%; filter:none } 16%{ opacity:.3 } 20%{ opacity:1 } 85%{ opacity:1 } 100%{ opacity:0; translate:-14px -50% } }
@keyframes mtcGl{ 0%{ translate:-3px 0 } 30%{ translate:2px -1px } 60%{ translate:-1px 1px } 100%{ translate:3px 0 } }
@keyframes mtcScan{ from{ background-position:0 120% } to{ background-position:0 -120% } }
.mtc-big{ position:absolute; z-index:4; inset:0; display:grid; place-items:center; font-size:clamp(3rem, 14vw, 8rem); font-weight:900; color:#ff3b30; text-shadow:0 0 30px #b7101a, 0 6px 0 #3a0508; opacity:0; pointer-events:none; letter-spacing:2px }
.mtc-big.on{ animation:mtcBig 1.05s cubic-bezier(.2,.9,.2,1) both }
.mtc-big.solo{ position:absolute; z-index:60 }
@keyframes mtcBig{ 0%{ opacity:0; scale:2.4; filter:blur(6px) } 18%{ opacity:1; scale:1; filter:none } 26%{ scale:1.06 } 34%{ scale:1 } 80%{ opacity:1 } 100%{ opacity:0; scale:.92 } }
@media (prefers-reduced-motion:reduce){ .mtc-boss.on, .mtc-big.on{ animation-duration:.01s; opacity:1 } .mtc-boss b::before, .mtc-boss b::after, .mtc-scan{ animation:none } }
@media (pointer:coarse) and (max-height:500px){ .mtc.on .mtc-bar{ height:9vh } .mtc-sub{ bottom:calc(9vh + 8px) } .mtc-card{ top:calc(9vh + 8px) } .mtc-txt{ padding:4px 10px } }

/* بطاقة «تعلّم بالتجربة» بصفحة «كيف تلعب» — ضيقة: المشهد خلفية والنص فوقه · عريضة (560+): المشهد جنب */
.tut-cta.tc{ position:relative; display:block; padding:0; margin:0 0 14px; border:1px solid #e2342e66; overflow:hidden; container-type:inline-size; background:#0a0b10; box-shadow:inset 0 0 0 1px #ffffff08, 0 10px 30px -14px #000 }
.tut-cta.tc::after{ content:''; position:absolute; inset-inline:0; top:0; height:2px; z-index:3; background:linear-gradient(90deg, transparent, #e2342e, #ffb36b, #e2342e, transparent); opacity:.85 }
.tc-in{ position:relative; display:flex; flex-direction:column; gap:7px; padding:12px; min-height:150px; justify-content:flex-end }
.tc-art{ position:absolute; inset:0; z-index:0; background:#000 }
.tc-art canvas{ display:block; width:100%; height:100%; object-fit:cover; image-rendering:pixelated }
.tc-art::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, #0a0b10 10%, #0a0b10b3 52%, #0a0b1014 100%) }
.tc-rec{ position:absolute; z-index:1; top:7px; inset-inline-start:8px; display:flex; align-items:center; gap:5px; font:700 .6rem/1 ui-monospace,monospace; color:#e8f0ea; letter-spacing:1px; direction:ltr }
.tc-rec i{ width:6px; height:6px; border-radius:50%; background:#ff3b30; animation:mkeBlink 1.2s steps(2) infinite }
.tc-t, .tc-go{ position:relative; z-index:1 }
.tc-t{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.tc-k{ display:inline-flex; align-items:center; gap:6px; color:#ff8a80; font-size:.7rem; font-weight:800; letter-spacing:.5px }
.tc-k i{ width:16px; height:2px; background:#e2342e }
.tc-t b{ font-size:1.25rem; line-height:1.3; color:#fff; text-shadow:0 2px 12px #000, 0 0 18px #b7101a66 }
.tc-t > span{ font-size:.8rem; color:#d6cfc1; line-height:1.55; text-shadow:0 1px 4px #000 }
.tc-chips{ display:none; flex-wrap:wrap; gap:4px; margin-top:3px }
.tc-chips em{ font-style:normal; font-size:.68rem; font-weight:700; color:#e9e3d6; padding:2px 8px; border:1px solid #ffffff1c; background:#ffffff08 }
.tc-go{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:10px 16px; font:inherit; font-weight:900; font-size:.98rem; color:#fff; cursor:pointer; border:1px solid #ff7a70;
  background:linear-gradient(180deg, #e2342e, #a6141a); box-shadow:inset 0 1px 0 #ffffff40, 0 0 24px -6px #ff3b30; overflow:hidden; white-space:nowrap }
.tc-go svg{ width:18px; height:18px; fill:currentColor }
.tc-go::after{ content:''; position:absolute; top:0; bottom:0; width:40%; inset-inline-start:-60%; background:linear-gradient(100deg, transparent, #ffffff45, transparent); animation:tcShine 3.4s ease-in-out infinite }
@keyframes tcShine{ 0%,60%{ inset-inline-start:-60% } 100%{ inset-inline-start:130% } }
.tc-go:hover{ filter:brightness(1.1); box-shadow:inset 0 1px 0 #ffffff40, 0 0 32px -4px #ff3b30 }
@container (min-width:560px){
  .tc-in{ display:grid; grid-template-columns:230px 1fr auto; align-items:center; gap:16px; min-height:0; background:radial-gradient(120% 140% at 0% 50%, #2a0c0f 0%, #0d0e14 55%, #0a0b10 100%) }
  .tc-art{ position:relative; inset:auto; aspect-ratio:16/9; border:1px solid #ffffff1f; box-shadow:0 8px 20px -8px #000 } .tc-art::after{ display:none }
  .tc-chips{ display:flex } .tc-go{ width:auto } .tc-t b{ font-size:1.35rem }
}
@media (prefers-reduced-motion: reduce){ .tc-go::after, .mtc-card.on{ animation:none } .mtc-card.on{ opacity:1 } }
/* جولة 76: سطر المشرف وقت اللعب (لما يمسكك الأوباد بالدرس) — ما يوقف العالم ولا يغطي الأزرار */
.mtc-quick{ position:absolute; z-index:30; left:50%; top:calc(64px + var(--safe-t, 0px)); transform:translate(-50%, -6px); width:min(620px, 80vw); display:flex; flex-direction:column; align-items:center; gap:4px; opacity:0; transition:opacity .3s, transform .3s; text-align:center; pointer-events:none }
.mtc-quick.on{ opacity:1; transform:translate(-50%, 0) }
.mtc-quick[hidden]{ display:none }
.mtc-quick .mtc-txt{ font-size:clamp(.82rem, 1.7vw, 1.02rem); border-inline-start:3px solid #ff3b30 }
@media (pointer:coarse) and (max-height:500px){ .mtc-quick{ top:calc(46px + var(--safe-t, 0px)); width:min(520px, 70vw) } .mtc-quick .mtc-txt{ padding:3px 10px; line-height:1.55 } }

/* جولة 85: فصل «بدون إيقاف» — البطاقة فوق صغيرة واللعب يكمل */
.mtc.soft .mtc-card{ top:calc(56px + var(--safe-t, 0px)); transform:scale(.85); transform-origin:top right }
@media (pointer:coarse) and (max-height:500px){ .mtc.soft .mtc-card{ top:calc(48px + var(--safe-t, 0px)) } }