/* =====================================================================
   «المخطّط صفر» (جولة 50) — صانع المراحل. نفس نظام اللعبة: لوحات بزوايا مقصوصة،
   الأحمر للأفعال، بيكسل حاد في الكانفس، وCairo للنصوص.
   ===================================================================== */
#scr-maker { align-items:flex-start }
#scr-maker .mki { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
#scr-maker .mk-beta { font-size:.7rem; font-weight:700; color:#ffd166; border:1px solid #ffd16655; padding:1px 8px; margin-inline-start:8px; vertical-align:middle }

/* ---------- مراحلي ---------- */
#mkList { width:100%; max-width:1080px; margin:0 auto; display:flex; flex-direction:column; gap:14px }
.mk-head { display:flex; align-items:center; gap:12px; padding:12px 14px }
.mk-head h2 { display:flex; align-items:center; gap:8px; font-size:1.3rem; flex:1; min-width:0 }
.mk-head h2 svg { width:22px; height:22px; color:var(--accent) }
.mk-note { display:flex; align-items:center; gap:10px; padding:12px 14px; color:#ffd166 }
.mk-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px }
.mk-new, .mk-card { padding:14px; display:flex; flex-direction:column; gap:8px; min-width:0 }
.mk-new b { display:flex; align-items:center; gap:6px; font-size:1.05rem }
.mk-sizes { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:auto }
.mk-sizes .btn { flex-direction:column; gap:0; padding:10px 4px }
.mk-sizes small { opacity:.6; font-size:.7rem; letter-spacing:1px }
.mk-name { font-size:1.05rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.mk-meta { display:flex; flex-wrap:wrap; gap:6px; font-size:.78rem; opacity:.75 }
.mk-meta span { border:1px solid var(--line); padding:1px 8px }
.mk-acts { display:flex; gap:6px; margin-top:auto } .mk-acts .btn { flex:1 }
.mk-empty { padding:24px; text-align:center; grid-column:1/-1 }

/* ---------- المحرر ---------- */
#scr-maker.mk-ed { padding:0 }
#mkEd { position:absolute; inset:0; display:grid; grid-template-rows:auto 1fr auto; margin:0; background:#05060a }
#mkEd .panel { clip-path:none; box-shadow:none; max-width:none }
body.mk-ed-on #ptb, body.mk-ed-on #wip, body:has(#scr-maker.active) #ptb, body:has(#scr-maker.active) #wip, body.lv-on #ptb, body.lv-on #wip { display:none !important }   /* جولة 52أ.7: المخطّط كله (القائمة والمحرر واللعب) بدون شارة «نسخة تجريبية» — فيه شارة «تجريبي» خاصة فيه */   /* شريط «نسخة تجريبية» والتذييل يغطون أدوات المحرر */
.mk-top { display:flex; align-items:center; gap:10px; padding:8px 10px; flex-wrap:wrap; border-width:0 0 1px 0; width:100%; margin:0 }
.mk-top select, .mk-pal select { background:#0b0d12; color:var(--text); border:1px solid #ffffff22; padding:5px 8px; border-radius:var(--radius); font-weight:700; max-width:160px }
.mk-namebar, .mk-goal { display:flex; align-items:center; gap:6px }
.mk-goal label { display:flex; align-items:center; gap:4px } .mk-goal svg { opacity:.7 }
.mk-code { color:#ffd166; border:1px solid #ffd16644; padding:3px 10px; font-size:.85rem }
.mk-save { min-width:110px } .mk-save.dirty { color:#ffd166; opacity:1 }
.mk-tb { display:flex; gap:6px; margin-inline-start:auto }
.mk-tb .btn { padding:6px 10px } .mk-tb .btn.on { border-color:#ffd16688; color:#ffd166 }
.mk-body { display:grid; grid-template-columns:240px 1fr; min-height:0 }
.mk-pal { overflow:auto; padding:10px; border-width:0 0 0 1px; display:flex; flex-direction:column; gap:12px }
.mk-grp h4 { margin:0 0 6px; font-size:.78rem; opacity:.6; font-weight:700 }
.mk-items { display:grid; grid-template-columns:repeat(2,1fr); gap:5px }
.mk-it { position:relative; display:flex; align-items:center; gap:6px; background:#0b0d12; border:1px solid #ffffff14; color:var(--text); padding:4px; cursor:pointer; text-align:start; font-size:.78rem; font-weight:600; min-width:0 }
.mk-it span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.mk-it canvas { width:28px; height:28px; image-rendering:pixelated; flex:none }
.mk-it .mki { width:28px; height:20px; flex:none }
.mk-it i { position:absolute; top:1px; inset-inline-end:3px; font-style:normal; font-size:.62rem; opacity:.45 }
.mk-it:hover { border-color:#ffffff33; background:#12141c }
.mk-it.on { border-color:var(--accent); background:var(--ma25t); box-shadow:inset 0 0 0 1px var(--accent) }
#mkAwBox select { width:100%; max-width:none; margin-bottom:6px }
.mk-stage { position:relative; min-width:0; min-height:0; overflow:hidden; cursor:crosshair; touch-action:none }
.mk-stage canvas { display:block; image-rendering:pixelated }
.mk-hint { position:absolute; bottom:8px; inset-inline-start:10px; font-size:.78rem; opacity:.7; pointer-events:none; background:#000a; padding:2px 10px }
.mk-warn { display:flex; flex-wrap:wrap; gap:8px; padding:8px 12px; border-top:1px solid var(--line); background:#0b0d12; min-height:40px; align-items:center }
.mk-warn span { display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:700 }
.mk-warn .w { color:#ffd166 } .mk-warn .w.b { color:#ff6b6b } .mk-warn .ok { color:var(--accent2) }
.mk-warn svg { width:15px; height:15px }

/* ---------- داخل شاشة اللعب ---------- */
.lv-bar { position:absolute; top:calc(env(safe-area-inset-top) + 58px); left:50%; transform:translateX(-50%); z-index:30; display:flex; gap:6px }   /* تحت المؤقت: بعيد عن أزرار الجوال */
.lv-bar .btn { background:#0b0d12cc; padding:6px 10px }
.lv-bar .mki, .lv-end .mki { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.lv-end { position:absolute; inset:0; margin:auto; z-index:40; width:min(360px,calc(100% - 32px)); height:max-content; padding:22px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center }
.lv-end h2 { font-size:2rem; letter-spacing:1px } .lv-end.win h2 { color:var(--accent2) } .lv-end.lose h2 { color:#ff6b6b }
.lv-veil { position:absolute; top:calc(env(safe-area-inset-top) + 58px); left:50%; transform:translateX(-50%); z-index:45; display:flex; align-items:center; gap:10px; padding:10px 14px; max-width:calc(100% - 32px); flex-wrap:wrap; justify-content:center; text-align:center; border-color:#ffd16655 }   /* جولة 52أ.3: انقطع الاتصال وهو في مرحلة */
.lv-veil b { color:#ffd166 } .lv-veil span { opacity:.85; font-size:.9rem }
.lv-t { display:flex; align-items:center; gap:6px; font-size:1.2rem }
.lv-acts { display:flex; gap:8px; width:100% } .lv-acts .btn { flex:1 }

@media (max-width:899px) {
  .mk-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) }
  .mk-head { flex-wrap:wrap }
  .mk-head h2 { font-size:1.1rem }
}

/* جولة 51: داخل المرحلة لعب فردي — بلا شات ولا بلاغ لاعبين */
body.lv-on #btnChatMenu, body.lv-on #btnReportMenu, body.lv-on #quickChat { display:none !important }
.lv-acts small { opacity:.6; font-size:.7rem; margin-inline-start:4px }
body.lv-on #hudScrap { display:none !important }   /* المرحلة ما فيها خردة */

/* جولة 52أ: الثيمات */
.mk-themes { display:flex; flex-wrap:wrap; gap:6px }
.mk-themes .btn.on { border-color:var(--accent); color:#fff; box-shadow:inset 0 0 0 1px var(--accent) }
.mk-theme { display:flex; align-items:center; gap:4px } .mk-theme .mki { opacity:.7 }
.mk-q { width:100%; background:#0b0d12; color:var(--text); border:1px solid #ffffff22; padding:6px 10px; font:inherit; font-size:.85rem; border-radius:var(--radius) }
.mk-grp h4 small { font-weight:400 }
.credits-h { margin:18px 0 6px; font-size:1rem }
.credits-p { font-size:.85rem; opacity:.85; margin:4px 0 } .credits-p a { color:var(--accent2) }

/* =====================================================================
   جولة 52أ.4 — «استكشف» و«مراحلي» وأدوات المحرر
   ===================================================================== */
#mkList { max-width:1200px }
.mk-seg { display:inline-flex; background:#0b0d12; border:1px solid #ffffff1a; padding:3px; gap:3px; margin-inline-start:auto }
.mk-seg button { display:inline-flex; align-items:center; gap:6px; background:none; border:0; color:var(--text); opacity:.7; padding:7px 14px; font:inherit; font-weight:800; cursor:pointer }
.mk-seg button .mki { width:16px; height:16px }
.mk-seg button i { font-style:normal; font-size:.7rem; background:#ffffff14; padding:0 7px; border-radius:99px }
.mk-seg button.on { opacity:1; background:var(--ma25t); box-shadow:inset 0 0 0 1px var(--accent) }
.mk-notice { display:flex; align-items:center; gap:10px; padding:12px 14px; border-color:#ffd16655; color:#ffd166 }
.mk-notice span { flex:1; color:var(--text) } .mk-notice .mki { flex:none }

/* شريط التبويبات والبحث */
.mkx-bar { display:flex; gap:10px; align-items:center; padding:8px 10px; flex-wrap:wrap }
.mkx-tabs { display:flex; gap:4px; flex-wrap:wrap; flex:1 }
.mkx-tabs button { display:inline-flex; align-items:center; gap:5px; background:#0b0d12; border:1px solid #ffffff14; color:var(--text); opacity:.75; padding:6px 11px; font:inherit; font-size:.82rem; font-weight:800; cursor:pointer }
.mkx-tabs button .mki { width:15px; height:15px }
.mkx-tabs button:hover { opacity:1; border-color:#ffffff33 }
.mkx-tabs button.on { opacity:1; color:#fff; border-color:var(--accent); background:var(--ma25t) }
.mkx-search { display:flex; align-items:center; gap:6px; background:#0b0d12; border:1px solid #ffffff22; padding:0 10px; min-width:min(320px,100%); flex:0 1 320px }
.mkx-search input { background:none; border:0; color:var(--text); font:inherit; font-size:.85rem; padding:8px 0; width:100%; outline:none }
.mkx-search .mki { width:16px; height:16px; opacity:.6; flex:none }

/* البطل: مرحلة الأسبوع */
.mkx-hero { position:relative; padding:0; overflow:hidden; min-height:220px; display:block }
.mkx-hero-cv { display:block; width:100%; height:auto; aspect-ratio:8/3; object-fit:cover; image-rendering:auto; background:#05060a }
.mkx-hero-in { position:absolute; inset:auto 0 0 0; padding:18px 20px; display:flex; flex-direction:column; gap:6px; background:linear-gradient(0deg,#05060aee 30%,#05060a00) }
.mkx-kick { display:inline-flex; align-items:center; gap:6px; color:#ffd166; font-weight:900; font-size:.82rem; letter-spacing:.5px }
.mkx-kick .mki { width:16px; height:16px }
.mkx-hero h3 { margin:0; font-size:1.7rem; line-height:1.2; text-shadow:0 2px 12px #000 }
.mkx-by { font-size:.8rem; opacity:.75 }
.mkx-hero-a { display:flex; gap:8px; align-items:center; margin-top:4px; flex-wrap:wrap }

/* الكروت */
.mkx-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px }
.mkx-card { padding:0; display:flex; flex-direction:column; overflow:hidden; min-width:0; transition:transform .15s ease, box-shadow .15s ease; position:relative }
.mkx-card:hover { transform:translateY(-2px); box-shadow:0 10px 30px #0008 }
.mkx-thumb { position:relative; aspect-ratio:16/9; background:linear-gradient(135deg,#0b0d12,#14161f); overflow:hidden }
.mkx-thumb canvas, .mk-thumb canvas { width:100%; height:100%; display:block; opacity:0; transition:opacity .3s ease }
.mkx-thumb canvas.ok, .mk-thumb canvas.ok, .mkx-hero-cv.ok { opacity:1 }
.mkx-diff { position:absolute; top:8px; inset-inline-start:8px; font-size:.72rem; font-weight:900; padding:2px 9px; background:#000b; border:1px solid #ffffff33 }
.mkx-diff.d-easy { color:#7bd389; border-color:#7bd38966 } .mkx-diff.d-mid { color:#ffd166; border-color:#ffd16666 } .mkx-diff.d-hard { color:#ff6b6b; border-color:#ff6b6b66 } .mkx-diff.d-new { color:#8ecbff; border-color:#8ecbff66 }
.mkx-flags { position:absolute; top:8px; inset-inline-end:8px; display:flex; gap:4px }
.mkx-flags i { display:inline-flex; align-items:center; gap:4px; font-style:normal; font-size:.7rem; font-weight:900; padding:2px 8px; background:#000b; border:1px solid #ffffff33 }
.mkx-flags i .mki { width:12px; height:12px } .mkx-flags .f-off { color:#8ecbff } .mkx-flags .f-pin { color:#ffd166 }
.mkx-body { padding:10px 12px 4px; display:flex; flex-direction:column; gap:5px; min-width:0 }
.mkx-name { font-size:1.02rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.mkx-stats { display:flex; gap:10px; flex-wrap:wrap; font-size:.78rem; font-weight:800; opacity:.85; font-variant-numeric:tabular-nums }
.mkx-stats span { display:inline-flex; align-items:center; gap:4px } .mkx-stats .mki { width:14px; height:14px; opacity:.7 }
.mkx-stats.big { font-size:.92rem; gap:14px } .mkx-stats.big .mki { width:16px; height:16px }
.mkx-play { margin:6px 12px 12px; align-self:stretch }
.mk-meta [data-copy] { cursor:pointer } .mk-meta [data-copy]:hover { border-color:#ffd16688; color:#ffd166 }
.mkx-more { display:flex; justify-content:center; padding:6px 0 18px }
.mkx-card.sk .mkx-thumb, .mkx-card.sk b, .mkx-card.sk span { background:linear-gradient(90deg,#ffffff08,#ffffff14,#ffffff08); background-size:200% 100%; animation:mkSk 1.2s infinite linear; color:transparent }
@keyframes mkSk { to { background-position:-200% 0 } }

/* «مراحلي» */
.mk-counts { display:flex; gap:14px; flex-wrap:wrap; padding:0 4px }
.mk-sec { display:flex; align-items:center; gap:8px; margin:10px 4px 0; font-size:1rem } .mk-sec .mki { opacity:.7 }
.mk-card { padding:0 0 12px; overflow:hidden }
.mk-card > :not(.mk-thumb) { margin-inline:12px }
.mk-thumb { position:relative; aspect-ratio:32/15; background:linear-gradient(135deg,#0b0d12,#14161f); margin-bottom:4px }
.mk-sts { position:absolute; bottom:6px; inset-inline-start:6px; display:flex; gap:4px; flex-wrap:wrap }
.mk-st { display:inline-flex; align-items:center; gap:4px; font-size:.7rem; font-weight:900; padding:2px 8px; background:#000c; border:1px solid #ffffff33 }
.mk-st .mki { width:12px; height:12px }
.mk-st.pub { color:#7bd389; border-color:#7bd38966 } .mk-st.draft { opacity:.85 } .mk-st.pend { color:#ffd166; border-color:#ffd16666 } .mk-st.ok { color:#7bd389; border-color:#7bd38966 }
.mk-st.trash { color:#ff8a80; border-color:#ff8a8066 } .mk-st.hid { color:#ffd166; border-color:#ffd16666 }
.mk-card.is-trash .mk-thumb { filter:grayscale(.8) brightness(.7) }
.mk-why { display:flex; gap:6px; align-items:flex-start; font-size:.78rem; color:#ff8a80 } .mk-why .mki { width:14px; height:14px; flex:none; margin-top:2px }
.mk-acts { flex-wrap:wrap } .mk-acts .btn.danger { flex:0 0 auto }
.mk-acts .btn .mki, .mk-card .btn .mki { width:15px; height:15px }

/* النوافذ */
.mk-modal { position:fixed; inset:0; z-index:200; background:#000b; display:flex; align-items:center; justify-content:center; padding:16px }
.mk-dlg { width:min(460px,100%); max-height:90vh; overflow:auto; padding:20px; display:flex; flex-direction:column; gap:12px }
.mk-dlg h3 { margin:0; display:flex; align-items:center; gap:8px; font-size:1.2rem } .mk-dlg h3 .mki { color:var(--accent2) }
.mk-dlg p { margin:0; line-height:1.7 }
.mk-pubname { font-weight:900; font-size:1.05rem }
.mk-free { display:flex; align-items:center; gap:8px; color:#7bd389; font-weight:800 } .mk-free .mki { width:18px; height:18px }
.mk-pays, .mk-reps { display:grid; grid-template-columns:1fr 1fr; gap:8px }
.mk-pay { display:flex; flex-direction:column; gap:2px; padding:12px; border:1px solid #ffffff22; background:#0b0d12; cursor:pointer; position:relative }
.mk-pay input { position:absolute; opacity:0 } .mk-pay small { opacity:.65 }
.mk-pay:has(input:checked) { border-color:var(--accent); background:var(--ma25t); box-shadow:inset 0 0 0 1px var(--accent) }
.mk-pay.poor { opacity:.45; cursor:not-allowed }
.mk-rules { margin:0; padding-inline-start:18px; font-size:.85rem; opacity:.85; line-height:1.8 }
.mk-bad { color:#ff6b6b; font-weight:800 }
.mk-dlg-a { display:flex; gap:8px; justify-content:flex-end; margin-top:4px }
.mk-dlg .mki { width:16px; height:16px }

/* نهاية المرحلة: التقييم */
.lv-name { font-weight:800 } .lv-name small { opacity:.6; font-weight:600 }
.lv-ver { display:flex; align-items:center; gap:6px; color:#7bd389; font-weight:800; font-size:.9rem }
.lv-vote { display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:center; width:100% }
.lv-vote > span { width:100%; font-size:.85rem; opacity:.75 }
.lv-vote .btn.on { border-color:var(--accent2); color:var(--accent2); box-shadow:inset 0 0 0 1px var(--accent2) }
.lv-vote .btn b { font-weight:800 }

/* المحرر: شريط الأدوات والخريطة المصغّرة والفرشاة العشوائية */
.mk-rail { position:absolute; top:10px; inset-inline-start:10px; display:flex; flex-direction:column; gap:3px; background:#0b0d12e6; border:1px solid #ffffff1a; padding:4px; z-index:3 }
.mk-rail button { position:relative; width:36px; height:36px; display:grid; place-items:center; background:none; border:1px solid transparent; color:var(--text); opacity:.75; cursor:pointer }
.mk-rail button .mki { width:20px; height:20px }
.mk-rail button b { position:absolute; bottom:1px; inset-inline-end:2px; font-size:.6rem; color:#8ecbff }
.mk-rail button:hover { opacity:1; background:#ffffff0d }
.mk-rail button.on { opacity:1; color:#ffd166; border-color:#ffd16677; background:#ffd16614 }
.mk-rail .sep { display:block; height:1px; background:#ffffff1a; margin:3px 2px }
.mk-bsz { position:static !important; font-size:.95rem !important; color:var(--text) !important; font-weight:900 }
.mk-mini { position:absolute; bottom:10px; inset-inline-end:10px; z-index:3; border:1px solid #ffffff2a; background:#000; padding:2px; cursor:pointer; box-shadow:0 6px 18px #000a }
.mk-mini canvas { display:block; width:168px; height:auto; image-rendering:auto }
.mk-palh { position:sticky; top:-10px; z-index:2; background:var(--panel); margin:-10px -10px 0; padding:10px; display:flex; flex-direction:column; gap:6px; border-bottom:1px solid #ffffff10 }
.mk-qw { display:flex; align-items:center; gap:6px; background:#0b0d12; border:1px solid #ffffff22; padding:0 8px } .mk-qw .mki { width:15px; height:15px; opacity:.6 }
.mk-qw .mk-q { border:0; background:none; padding:6px 0 }
.mk-thf { display:flex; gap:4px; flex-wrap:wrap }
.mk-thf button { background:#0b0d12; border:1px solid #ffffff1a; color:var(--text); opacity:.75; font:inherit; font-size:.74rem; font-weight:800; padding:3px 9px; cursor:pointer }
.mk-thf button.on { opacity:1; border-color:var(--accent); background:var(--ma25t) }
.mk-scp { border:1px solid #ffd16644; background:#ffd1660a; padding:10px; display:flex; flex-direction:column; gap:7px }
.mk-scp h4 { margin:0; display:flex; align-items:center; gap:6px; font-size:.85rem; color:#ffd166 } .mk-scp h4 .mki { width:16px; height:16px }
.mk-scp p { margin:0 }
.mk-scset, .mk-scpre { display:flex; gap:4px; flex-wrap:wrap }
.mk-scset .mk-chip { background:#0b0d12; border:1px solid #ffd16655; color:#ffd166; font:inherit; font-size:.72rem; font-weight:800; padding:2px 8px; cursor:pointer }
.mk-rng { display:grid; grid-template-columns:56px 1fr 40px; gap:6px; align-items:center; font-size:.78rem; font-weight:700 }
.mk-rng input { width:100%; accent-color:#ffd166 } .mk-rng b { text-align:end; font-variant-numeric:tabular-nums }
.mk-patinfo { margin:4px 0 6px; line-height:1.6 }
.mk-edst { display:inline-flex; gap:4px }
.mk-tb .btn.primary2 { border-color:var(--accent2); color:var(--accent2); box-shadow:inset 0 0 0 1px var(--accent2) }
.mk-it.on { position:relative }

@media (max-width:899px) {
  .mkx-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px }
  .mkx-hero-cv { aspect-ratio:16/9 }
  .mkx-hero-in { position:static; background:none; padding:12px }
  .mkx-hero h3 { font-size:1.25rem }
  .mk-seg { margin-inline-start:0; width:100% } .mk-seg button { flex:1; justify-content:center }
  .mkx-search { flex:1 1 100% }
  .mkx-stats { gap:8px; font-size:.72rem }
  .mk-pays, .mk-reps { grid-template-columns:1fr }
}
@media (max-width:420px) { .mkx-grid { grid-template-columns:1fr 1fr } .mkx-body { padding:8px 8px 2px } .mkx-play { margin:6px 8px 10px } .mkx-stats span:nth-child(2) { display:none } }
#mkList .mk-head, #mkList .mk-notice, #mkList .mk-note, #mkHub > .panel, #mkxHero > .panel { max-width:none; width:100%; margin-inline:0 }
.mkx-search input { border:0 !important; background:none !important; box-shadow:none !important; padding:8px 0 !important; min-width:0 }
@media (max-width:899px) {
  .mkx-tabs { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:-2px; padding-bottom:2px } .mkx-tabs::-webkit-scrollbar { display:none }
  .mkx-tabs button { flex:none; white-space:nowrap }
}

/* =====================================================================
   جولة 52أ.5 — الخلفية وتأثيراتها، الرأس (رتبتي + التنبيهات)، مرحلة اليوم والمميزة، الكروت بالأغلفة والأرقام القياسية،
   «مرحلة جديدة» والقوالب ووضع التعلم، تفاصيل المرحلة وصفحة الصانع، الاسم والغلاف، القطع المقفلة، خريطة الموت،
   لوحات التلميح، شاشة النهاية السينمائية، مرحلة اليوم بالقائمة، وطلب لفّ الجوال.
   ===================================================================== */
.mki { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none }
#scr-maker { isolation:isolate }
.mk-bgfx { position:fixed !important; inset:0; z-index:-1 }
#scr-maker.mk-ed .mk-bgfx { display:none }
#mkList { position:relative; z-index:1 }
#mkList .mk-head, #mkList .mk-notice, #mkList .mk-note, #mkHub > .panel, #mkxTop .panel { max-width:none; width:100%; margin-inline:0 }
/* الرأس */
.mk-hr { display:flex; gap:8px; align-items:center }
.mk-me { background:none; border:0; padding:0; cursor:pointer; display:flex }
.mks-rank { --rc:#9aa3b5; display:inline-flex; align-items:center; gap:5px; padding:4px 11px 4px 10px; font-size:.8rem; font-weight:800; color:var(--rc); border:1px solid color-mix(in srgb,var(--rc) 45%,transparent); background:color-mix(in srgb,var(--rc) 12%,transparent); clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%); white-space:nowrap }
.mks-rank .mki { width:13px; height:13px }
.mk-bell { position:relative; width:38px; height:38px; display:grid; place-items:center; background:#0b0c11aa; border:1px solid var(--line); color:var(--text); cursor:pointer }
.mk-bell .mki { width:19px; height:19px } .mk-bell.on { border-color:#ffd16677; color:#ffd166; animation:mkBell 2.6s ease-in-out infinite }
.mk-bell i { position:absolute; top:-6px; inset-inline-end:-6px; min-width:18px; height:18px; border-radius:9px; background:var(--accent); color:#fff; font-style:normal; font-size:.66rem; font-weight:800; display:grid; place-items:center; padding:0 4px; box-shadow:0 0 10px #b7101a }
@keyframes mkBell { 0%,90%,100% { transform:none } 92% { transform:rotate(12deg) } 95% { transform:rotate(-10deg) } 98% { transform:rotate(6deg) } }
.mks-notes { position:absolute; top:calc(100% + 8px); inset-inline-end:10px; z-index:30; width:min(360px,calc(100vw - 32px)); max-height:60vh; overflow:auto; padding:10px; display:flex; flex-direction:column; gap:6px }
.mks-note { display:flex; flex-wrap:wrap; gap:4px 6px; align-items:baseline; text-align:start; background:#ffffff06; border:1px solid var(--line); color:var(--text); padding:9px 11px; cursor:pointer; font:inherit; font-size:.86rem }
.mks-note.new { border-color:#ffd16655; background:#ffd1660c } .mks-note small { flex-basis:100%; opacity:.5; font-size:.72rem } .mks-note:disabled { opacity:.5; cursor:default }
.mk-head { position:relative }
/* مرحلة اليوم + المميزة */
.mkx-top { display:grid; grid-template-columns:1fr; gap:12px } .mkx-top.two { grid-template-columns:minmax(0,2fr) minmax(240px,1fr) }
.mkx-daily { position:relative; overflow:hidden; padding:0; min-height:220px; cursor:pointer; display:flex }
.mkx-daily canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; image-rendering:pixelated; opacity:0; transition:opacity .4s } .mkx-daily canvas.ok { opacity:1 }
.mkx-daily::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 20%,#05060ae6 85%) }
.mkx-daily-in { position:relative; z-index:1; margin-top:auto; padding:14px; display:flex; flex-direction:column; gap:5px; align-items:flex-start }
.mkx-daily-in h3 { margin:0; font-size:1.15rem } .mkx-kick.sun { color:#ffd166 }
.mkx-hero, .mkx-card { cursor:pointer }
.mkx-desc { margin:0; font-size:.85rem; opacity:.8; max-width:52ch; line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.mkx-mk { background:none; border:0; padding:0; color:inherit; font:inherit; font-weight:800; cursor:pointer; text-decoration:underline dotted #ffffff55; text-underline-offset:3px } .mkx-mk:hover { color:var(--accent2) }
.mkx-rec { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; color:#ffd166; margin-top:4px } .mkx-rec b { font-size:.82rem } .mkx-rec span { opacity:.75; color:var(--text) } .mkx-rec .mki { width:14px; height:14px }
.mkx-flags .f-tut { color:#8ecbff; border-color:#8ecbff55 }
.mkx-rxs { position:absolute; bottom:6px; inset-inline-start:6px; display:flex; gap:4px } .mkx-rxs i { font-style:normal; font-size:.72rem; background:#000c; border:1px solid #ffffff1a; padding:1px 6px }
/* مراحلي: رتبتي + «مرحلة جديدة» */
.mk-mehead { --rc:#9aa3b5; display:flex; align-items:center; gap:14px; padding:12px 14px; flex-wrap:wrap; border-inline-start:3px solid var(--rc) }
.mk-mer { flex:1 1 320px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; background:none; border:0; color:var(--text); cursor:pointer; text-align:start; padding:0; min-width:0 }
.mk-mep { display:flex; flex-direction:column; gap:4px; width:100%; max-width:520px } .mk-mep i { display:block; height:5px; background:#ffffff12; position:relative; overflow:hidden }
.mk-mep i::after { content:''; position:absolute; inset-block:0; inset-inline-start:0; width:var(--p); background:linear-gradient(90deg,var(--rc),#fff8); box-shadow:0 0 10px var(--rc) } .mk-mep small { font-size:.74rem; opacity:.7 }
.mk-counts { display:flex; gap:14px; flex-wrap:wrap; font-size:.8rem; opacity:.85 } .mk-counts span { display:inline-flex; align-items:center; gap:5px } .mk-counts b { font-variant-numeric:tabular-nums }
.mk-newc { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:250px; padding:20px 16px; text-align:center; cursor:pointer; color:var(--text); font:inherit;
  background:radial-gradient(ellipse at 50% 30%,#b7101a2e,transparent 65%),linear-gradient(180deg,#141722,#0c0e14); border:1px dashed #b7101a88;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut)); transition:transform .15s, border-color .15s }
.mk-newc:hover { transform:translateY(-2px); border-color:#ff3b47 } .mk-newc b { font-size:1.25rem } .mk-newc small { opacity:.65; font-size:.8rem; max-width:24ch; line-height:1.6 }
.mk-newi { width:64px; height:64px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(180deg,#e01b29,#8f0c14); box-shadow:0 0 0 6px #b7101a22,0 0 30px #b7101a88; animation:mkNewP 2.4s ease-in-out infinite }
.mk-newi .mki { width:30px; height:30px; color:#fff; stroke-width:2.4 }
@keyframes mkNewP { 50% { box-shadow:0 0 0 11px #b7101a11,0 0 40px #b7101aaa } }
.mk-newl { margin-top:6px; display:inline-flex; align-items:center; gap:6px; font-size:.8rem; color:#8ecbff; border:1px solid #8ecbff44; padding:4px 12px; background:#8ecbff0d } .mk-newl:hover { background:#8ecbff22 }
.mk-thumb { position:relative }
.mk-thb { position:absolute; bottom:6px; inset-inline-end:6px; width:32px; height:32px; display:grid; place-items:center; background:#000b; border:1px solid #ffffff22; color:#fff; cursor:pointer; opacity:.8 } .mk-thb:hover { opacity:1; border-color:var(--accent2) }
.mk-desc { font-size:.78rem; opacity:.65; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:-4px }
/* النوافذ: تفاصيل، صانع، جديدة، تعلّم، اسم وغلاف */
.mk-modal .mk-dlg { position:relative }
.mks-x { position:absolute; top:10px; inset-inline-end:10px; z-index:3; width:32px; height:32px; display:grid; place-items:center; background:#000a; border:1px solid #ffffff22; color:#fff; cursor:pointer; font-size:.9rem }
.mks-x:hover { border-color:var(--accent); background:#b7101a }
.mk-dlg.mks-detail { width:min(720px,100%); padding:0; gap:0 }
.mks-cover { position:relative; aspect-ratio:960/400; background:#000; overflow:hidden } .mks-cover canvas { width:100%; height:100%; display:block; image-rendering:pixelated }
.mks-cover::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,var(--panel,#12141c) 100%) }
.mks-flags { position:absolute; top:12px; inset-inline-start:12px; z-index:2; display:flex; gap:6px } .mks-flags .mkx-diff { position:static }
.mks-f { display:inline-flex; align-items:center; gap:4px; font-size:.75rem; font-weight:800; padding:2px 9px; background:#000a; border:1px solid #8ecbff66; color:#8ecbff } .mks-f.off { color:#ffd166; border-color:#ffd16666 }
.mks-dt { padding:4px 20px 20px; margin-top:-30px; position:relative; z-index:2; display:flex; flex-direction:column; gap:10px }
.mks-dt h3 { font-size:1.6rem; margin:0; text-shadow:0 2px 12px #000 }
.mks-maker { align-self:flex-start; display:inline-flex; align-items:center; gap:8px; background:#ffffff08; border:1px solid var(--line); color:var(--text); padding:6px 10px; cursor:pointer; font:inherit; font-size:.88rem }
.mks-maker:hover { border-color:var(--accent2) } .mks-maker i { font-style:normal; font-size:.78rem; font-weight:800; padding:2px 10px; background:var(--accent); color:#fff } .mks-maker i.on { background:transparent; border:1px solid var(--accent2); color:var(--accent2) }
.mks-desc { margin:0; line-height:1.8; opacity:.85 }
.mks-rx { display:flex; gap:8px; flex-wrap:wrap }
.mks-rxb { display:inline-flex; align-items:center; gap:6px; padding:7px 13px; background:#ffffff07; border:1px solid var(--line); color:var(--text); cursor:pointer; font:inherit; font-size:.86rem; transition:transform .12s }
.mks-rxb .e { font-size:1.25rem; line-height:1; filter:grayscale(.6) } .mks-rxb i { font-style:normal; font-variant-numeric:tabular-nums; opacity:.6; font-size:.78rem }
.mks-rxb:hover:not(:disabled) { transform:translateY(-2px); border-color:#ffffff33 } .mks-rxb.on { border-color:#ffd166; background:#ffd16614 } .mks-rxb.on .e { filter:none } .mks-rxb.on i { opacity:1; color:#ffd166 }
.mks-rxb:disabled { opacity:.45; cursor:not-allowed } .mks-rxb.pop .e { animation:mkPop .45s cubic-bezier(.3,1.8,.5,1) }
@keyframes mkPop { 0% { transform:scale(.6) } 60% { transform:scale(1.45) } 100% { transform:scale(1) } }
.mks-times { border:1px solid var(--line); background:#0008; padding:10px 12px }
.mks-th { display:flex; align-items:center; gap:6px; font-weight:800; font-size:.9rem; margin-bottom:6px } .mks-th small { margin-inline-start:auto; font-weight:600 }
.mks-tl { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px }
.mks-tl li { display:grid; grid-template-columns:28px 1fr auto; gap:8px; align-items:center; padding:5px 8px; background:#ffffff05; font-size:.86rem }
.mks-tl .r { font-weight:900; text-align:center; opacity:.6 } .mks-tl .t { font-variant-numeric:tabular-nums; opacity:.9 } .mks-tl li b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.mks-tl li.gold { background:linear-gradient(90deg,#ffd16626,transparent) } .mks-tl li.gold .r { color:#ffd166; opacity:1 } .mks-tl li.silver .r { color:#d6dbe6; opacity:1 } .mks-tl li.bronze .r { color:#e2a06b; opacity:1 }
.mks-tl li.me { outline:1px solid var(--accent2) } .mks-mine { margin-top:6px; font-size:.84rem; opacity:.85 }
.mks-acts { display:flex; gap:8px; flex-wrap:wrap } .mks-acts .btn.primary { flex:1 1 180px }
.mk-dlg.mks-maker-dlg { width:min(760px,100%); gap:14px }
.mks-prof { --rc:#9aa3b5; display:flex; gap:14px; align-items:center; padding-inline-end:40px; flex-wrap:wrap }
.mks-av { width:64px; height:64px; display:grid; place-items:center; font-size:1.8rem; font-weight:900; background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--rc) 55%,#000),#0b0c11); border:2px solid var(--rc); box-shadow:0 0 20px color-mix(in srgb,var(--rc) 40%,transparent); clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px) }
.mks-pi { flex:1; min-width:180px; display:flex; flex-direction:column; gap:6px } .mks-pi h3 { margin:0; font-size:1.35rem } .mks-pr { display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.mks-badges { display:flex; gap:5px; flex-wrap:wrap } .mks-badge { display:inline-flex; align-items:center; gap:4px; font-size:.72rem; font-weight:700; padding:2px 8px; border:1px solid #ffd16644; color:#ffd166; background:#ffd1660a } .mks-badge .mki { width:12px; height:12px }
.mks-nums { display:grid; grid-template-columns:repeat(6,1fr); gap:6px }
.mks-nums div { display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 4px; background:#ffffff06; border:1px solid var(--line) } .mks-nums b { font-size:1.2rem; font-variant-numeric:tabular-nums } .mks-nums small { font-size:.7rem; opacity:.6 } .mks-nums .mki { opacity:.55 }
.mks-next { border:1px solid var(--line); padding:10px 12px; display:flex; flex-direction:column; gap:6px } .mks-next.top { flex-direction:row; align-items:center; gap:8px; color:#ffd166 }
.mks-pg { display:grid; grid-template-columns:70px 1fr 90px; gap:8px; align-items:center; font-size:.78rem } .mks-pg i { height:6px; background:#ffffff12; position:relative } .mks-pg i::after { content:''; position:absolute; inset-block:0; inset-inline-start:0; width:var(--p); background:linear-gradient(90deg,#ffd166,#c9822a) } .mks-pg b { font-variant-numeric:tabular-nums; text-align:end; opacity:.8 }
.mks-h { margin:4px 0 0; display:flex; align-items:center; gap:6px; font-size:1rem }
.mks-lvs { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px }
.mks-lv { display:flex; flex-direction:column; gap:4px; text-align:start; background:#ffffff05; border:1px solid var(--line); color:var(--text); padding:0 0 8px; cursor:pointer; font:inherit; overflow:hidden }
.mks-lv canvas { width:100%; aspect-ratio:240/126; image-rendering:pixelated; background:#000 } .mks-lv b, .mks-lv span { padding:0 8px; font-size:.84rem } .mks-lv span { display:flex; align-items:center; gap:4px; opacity:.65; font-size:.74rem } .mks-lv:hover { border-color:var(--accent2) }
.mk-dlg.mkn-dlg { width:min(860px,100%); gap:14px }
.mkn-h { font-size:1.35rem !important }
.mkn-sec h4, .mk-h4 { margin:0 0 8px; font-size:.88rem; display:flex; align-items:center; gap:6px } .mkn-sec h4 small { font-weight:600 }
.mkn-starts { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px }
.mkn-st { display:flex; flex-direction:column; gap:3px; text-align:start; padding:0 0 9px; background:#ffffff05; border:1px solid var(--line); color:var(--text); cursor:pointer; font:inherit; overflow:hidden; transition:transform .12s }
.mkn-st canvas { width:100%; aspect-ratio:168/96; image-rendering:pixelated; background:#05060a } .mkn-st b { padding:0 9px; font-size:.92rem } .mkn-st small { padding:0 9px; font-size:.72rem; opacity:.6; line-height:1.5 }
.mkn-st:hover { transform:translateY(-2px) } .mkn-st.on { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent),0 0 22px #b7101a55 }
.mkn-row { display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start }
.mkn-sizes { display:flex; gap:8px } .mkn-sz { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:3px; min-width:96px; height:116px; padding:8px; background:#ffffff05; border:1px solid var(--line); color:var(--text); cursor:pointer; font:inherit }
.mkn-sz i { display:block; border:1.5px solid #ffffff55; background:repeating-linear-gradient(0deg,#ffffff08 0 3px,transparent 3px 6px); margin-bottom:auto; margin-top:4px } .mkn-sz small { opacity:.55; font-size:.7rem }
.mkn-sz.on { border-color:var(--accent) } .mkn-sz.on i { border-color:#ff3b47; background:#b7101a33 } [data-szw].dis { opacity:.4; pointer-events:none }
.mkn-ths { display:flex; gap:8px; flex-wrap:wrap } .mkn-th { display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; background:#ffffff05; border:1px solid var(--line); color:var(--text); cursor:pointer; font:inherit }
.mkn-th canvas { width:32px; height:32px; image-rendering:pixelated } .mkn-th.on { border-color:var(--accent) }
.mkn-a { align-items:center } .mkn-sp { flex:1 }
@media (max-width:760px) { .mkn-row { grid-template-columns:1fr } .mks-nums { grid-template-columns:repeat(3,1fr) } }
.mk-dlg.mkl-dlg { width:min(560px,100%) }
.mkl-list { display:flex; flex-direction:column; gap:6px }
.mkl-it { display:grid; grid-template-columns:36px 1fr; grid-template-rows:auto auto; gap:0 10px; align-items:center; text-align:start; padding:10px 12px; background:#ffffff05; border:1px solid var(--line); color:var(--text); cursor:pointer; font:inherit }
.mkl-it .n { grid-row:1/3; width:32px; height:32px; display:grid; place-items:center; font-weight:900; border:1px solid #8ecbff55; color:#8ecbff } .mkl-it small { opacity:.6; font-size:.76rem }
.mkl-it.done .n { background:var(--accent2); border-color:var(--accent2); color:#000 } .mkl-it:hover { border-color:#8ecbff88 }
.mkl-all { display:flex; align-items:center; gap:8px; color:#ffd166 }
.mk-learn { position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:6; width:min(560px,calc(100% - 140px)); padding:12px 14px; background:#0d1018ee; border:1px solid #8ecbff55; box-shadow:0 12px 40px #000c; backdrop-filter:blur(6px) }
.mk-learn.bump { animation:mkBump .5s ease-out } @keyframes mkBump { 30% { box-shadow:0 0 0 3px #4db38f,0 12px 40px #000c } }
.mkl-h { display:flex; align-items:center; gap:8px; margin-bottom:8px } .mkl-k { display:inline-flex; align-items:center; gap:6px; font-weight:800; color:#8ecbff; font-size:.88rem; flex:1 }
.mkl-x { background:none; border:0; color:var(--text); opacity:.6; cursor:pointer; font-size:1rem } .mkl-x:hover { opacity:1 }
.mkl-steps { display:flex; flex-direction:column; gap:4px }
.mkl-s { display:flex; gap:8px; align-items:flex-start; font-size:.86rem; opacity:.45; line-height:1.55 } .mkl-s i { flex:none; width:20px; height:20px; display:grid; place-items:center; font-style:normal; font-size:.72rem; font-weight:900; border:1px solid #ffffff33 }
.mkl-s.cur { opacity:1 } .mkl-s.cur i { border-color:#ffd166; color:#ffd166; box-shadow:0 0 10px #ffd16655 } .mkl-s.ok { opacity:.75 } .mkl-s.ok i { background:var(--accent2); border-color:var(--accent2); color:#000 } .mkl-s.ok span { text-decoration:line-through; text-decoration-color:#ffffff44 }
.mkl-done { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); color:#ffd166 } .mkl-done b { flex:1 }
.mk-learnt { display:inline-flex; align-items:center; gap:6px; color:#8ecbff; font-weight:800 }
.mk-dlg.mk-meta-dlg { width:min(640px,100%) }
.mk-fld { display:flex; flex-direction:column; gap:5px } .mk-fld > span { font-size:.86rem; font-weight:700; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap } .mk-fld input, .mk-fld textarea { width:100%; font:inherit; resize:vertical }
.mk-rule { display:flex; align-items:flex-start; gap:8px; font-size:.82rem; padding:8px 10px; border:1px solid #ff6b6b44; background:#ff6b6b0c; color:#ffb3b3 } .mk-rule .mki { flex:none; margin-top:2px }
.mk-covs { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px }
.mk-cov { display:flex; flex-direction:column; gap:4px; padding:0 0 6px; background:#ffffff05; border:1px solid var(--line); color:var(--text); cursor:pointer; font:inherit; overflow:hidden; text-align:start }
.mk-cov canvas, .mk-cov img { width:100%; aspect-ratio:200/105; object-fit:cover; image-rendering:pixelated; background:#000; display:block } .mk-cov img { image-rendering:auto } .mk-cov b { padding:0 8px; font-size:.78rem }
.mk-cov.on { border-color:var(--accent2); box-shadow:0 0 0 1px var(--accent2) }
.mk-off { display:inline-flex; align-items:center; gap:4px; color:#ffd166; font-weight:800 }
/* المحرر: الاسم، القطع المقفلة، خريطة الموت */
.mk-title { width:min(240px,26vw); padding:6px 10px !important; font:inherit; font-weight:800; background:#0b0c11 !important; border:1px solid var(--line) !important } .mk-title:focus { border-color:var(--accent2) !important } .mk-title.bad { border-color:#ff6b6b !important; box-shadow:0 0 0 2px #ff6b6b44 }
.mk-it.locked { position:relative; opacity:.55 } .mk-it.locked canvas { filter:grayscale(1) brightness(.6) }
.mk-lk { position:absolute; top:3px; inset-inline-start:3px; width:18px; height:18px; display:grid; place-items:center; background:#000c; border:1px solid #ffd16688; color:#ffd166 } .mk-lk .mki { width:11px; height:11px }
.mk-rail button.hot { color:#ff6b6b; box-shadow:inset 0 0 0 1px #ff6b6b }
.mk-heatlg { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); z-index:5; display:flex; align-items:center; gap:6px; padding:6px 12px; background:#0d1018ee; border:1px solid #ff6b6b66; font-size:.82rem; color:#ffb3b3 }
/* جولة 59: خريطة الموت المتقدمة (مشترك التصريح الأحمر) */
.mk-heatlg.adv { flex-direction:column; align-items:stretch; gap:6px; width:min(420px,calc(100% - 24px)); max-height:min(60%,320px); overflow:auto }
.mkh-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap } .mkh-row .mki { width:14px; height:14px }
.mkh-seg { display:inline-flex; border:1px solid #ff6b6b55 } .mkh-seg button { background:none; border:0; color:#ffb3b3; padding:3px 8px; font:inherit; font-size:.76rem; cursor:pointer } .mkh-seg button.on { background:#b7101a; color:#fff }
.mkh-x { margin-inline-start:auto; background:#1a1d27; border:1px solid #ff6b6b55; color:#ffb3b3; padding:3px 7px; cursor:pointer }
.mkh-st { font-size:.74rem; color:#e6c9c9; gap:10px } .mkh-st .muted { color:#9a8f8f }
.mkh-bars { align-items:flex-end; gap:4px; height:58px; flex-wrap:nowrap }
.mkh-bars i { flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; font-style:normal; position:relative }
.mkh-bars i::before { content:''; width:100%; height:var(--h); min-height:2px; background:linear-gradient(180deg,#ff6b6b,#7d0911); order:2 }
.mkh-bars b { font-size:.66rem; order:1 } .mkh-bars small { font-size:.58rem; color:#9a8f8f; order:3; white-space:nowrap }
/* جولة 59: «صانع داعم» */
.sm-chip { display:inline-flex; align-items:center; margin-inline-start:6px; padding:0 6px; font-size:.64rem; font-weight:900; color:#fff; background:linear-gradient(180deg,#d4202c,#7d0911); white-space:nowrap; vertical-align:middle }
/* اللعب: لوحة التلميح، لقطة الغلاف */
.lv-tip { position:absolute; top:104px; left:50%; transform:translateX(-50%); z-index:35; display:flex; align-items:center; gap:10px; max-width:min(560px,calc(100% - 32px)); padding:12px 16px; background:linear-gradient(180deg,#2a2112f2,#17120af2); border:1px solid #ffd16699; color:#fbe7b5; font-size:1rem; line-height:1.6; box-shadow:0 0 30px #ffd16633,0 14px 40px #000c; animation:lvTipIn .3s cubic-bezier(.3,1.4,.5,1) }
.lv-tip.out { animation:lvTipOut .22s ease-in forwards } .lv-tip-i { flex:none; width:30px; height:30px; display:grid; place-items:center; background:#ffd166; color:#1b1408 } .lv-tip-i .mki { width:18px; height:18px; stroke-width:2.2 }
@keyframes lvTipIn { from { opacity:0; transform:translate(-50%,-10px) scale(.95) } } @keyframes lvTipOut { to { opacity:0; transform:translate(-50%,-6px) } }
.lv-flash { position:absolute; inset:0; z-index:60; background:#fff; pointer-events:none; animation:lvFlash .7s ease-out forwards } @keyframes lvFlash { 0% { opacity:.85 } 100% { opacity:0 } }
/* =====================================================================
   شاشة النهاية السينمائية (بنفس روح واجهة القطار)
   ===================================================================== */
.lv-end2 { position:absolute; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; padding:16px; overflow:hidden; background:radial-gradient(ellipse at 50% 40%,#0008,#000e 75%); animation:leIn .35s ease-out }
.lv-end2[hidden] { display:none }
@keyframes leIn { from { opacity:0 } }
.lv-end2 .le-fx { position:absolute; inset:0; z-index:0; pointer-events:none } .lv-end2 .le-fx.mkfx { background:transparent }
.le-rays { position:absolute; left:50%; top:42%; width:160vmax; height:160vmax; transform:translate(-50%,-50%); z-index:0; pointer-events:none; opacity:.35;
  background:repeating-conic-gradient(from 0deg,#ffd16622 0deg 6deg,transparent 6deg 18deg); -webkit-mask:radial-gradient(circle,#000 0,transparent 55%); mask:radial-gradient(circle,#000 0,transparent 55%); animation:leSpin 40s linear infinite }
.lv-end2.lose .le-rays { background:repeating-conic-gradient(from 0deg,#ff2a3a1a 0deg 4deg,transparent 4deg 22deg); opacity:.5 }
@keyframes leSpin { to { transform:translate(-50%,-50%) rotate(360deg) } }
.le-glow { position:absolute; left:50%; top:36%; width:70vmin; height:40vmin; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(ellipse,#ffb43b55,transparent 70%); filter:blur(20px); z-index:0; pointer-events:none; animation:leGlow 3s ease-in-out infinite }
.lv-end2.lose .le-glow { background:radial-gradient(ellipse,#c8141f66,transparent 70%) } @keyframes leGlow { 50% { opacity:.6; transform:translate(-50%,-50%) scale(1.08) } }
.le-card { position:relative; z-index:2; width:min(480px,100%); max-height:100%; overflow:auto; display:flex; flex-direction:column; align-items:center; gap:12px; padding:24px 22px 20px; text-align:center;
  background:linear-gradient(180deg,#151821f2,#0c0e14f5); border:1px solid #ffd16644; box-shadow:0 0 0 1px #000,0 30px 80px #000,inset 0 1px 0 #ffffff12;
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px); animation:leCard .55s cubic-bezier(.2,1.2,.4,1) both }
.lv-end2.lose .le-card { border-color:#ff3b4755 }
@keyframes leCard { from { opacity:0; transform:translateY(26px) scale(.94) } }
.le-card > * { animation:leUp .5s ease-out both } .le-card > *:nth-child(2) { animation-delay:.05s } .le-card > *:nth-child(3) { animation-delay:.35s } .le-card > *:nth-child(4) { animation-delay:.5s } .le-card > *:nth-child(5) { animation-delay:.62s } .le-card > *:nth-child(6) { animation-delay:.74s } .le-card > *:nth-child(7) { animation-delay:.86s }
@keyframes leUp { from { opacity:0; transform:translateY(10px) } }
.le-kick { display:inline-flex; align-items:center; gap:6px; font-size:.82rem; opacity:.75; max-width:100% } .le-kick span { font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .le-kick small { opacity:.7; white-space:nowrap }
.le-title { position:relative; margin:0; font-size:clamp(3rem,10vw,5rem); font-weight:900; line-height:1.05; letter-spacing:2px; animation:leTitle .9s cubic-bezier(.2,1.1,.3,1) both !important }
.le-title span { background:linear-gradient(180deg,#fff6d6 0%,#ffd166 45%,#c9822a 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 18px #ffb43b88) drop-shadow(0 4px 0 #5a3410) }
.le-title::after { content:''; position:absolute; inset:0; background:linear-gradient(105deg,transparent 35%,#ffffffcc 50%,transparent 65%); background-size:250% 100%; -webkit-mask:linear-gradient(#000,#000); mix-blend-mode:overlay; animation:leShine 2.8s ease-in-out 1s infinite; pointer-events:none; opacity:.0 }
@keyframes leTitle { 0% { opacity:0; transform:scale(1.5); filter:blur(14px); letter-spacing:24px } 60% { opacity:1; filter:blur(0) } 100% { transform:none; letter-spacing:2px } }
@keyframes leShine { 0% { background-position:150% 0; opacity:.9 } 60%,100% { background-position:-50% 0; opacity:.9 } }
.lv-end2.lose .le-title span { background:linear-gradient(180deg,#ffd3d3 0%,#ff4a55 50%,#7a0a12 100%); -webkit-background-clip:text; background-clip:text; filter:drop-shadow(0 0 18px #ff2a3a99) drop-shadow(0 4px 0 #2a0306) }
.lv-end2.lose .le-title { animation:leTitle .9s cubic-bezier(.2,1.1,.3,1) both, leGlitch 3.2s steps(1) 1.2s infinite !important }
@keyframes leGlitch { 0%,90%,100% { transform:none; text-shadow:none } 91% { transform:translate(3px,-1px) skewX(-6deg) } 93% { transform:translate(-3px,1px) } 95% { transform:translate(1px,0) skewX(4deg) } }
.le-time { display:flex; flex-direction:column; align-items:center; gap:0 } .le-time small { font-size:.78rem; opacity:.6; letter-spacing:1px }
.le-time b { font-size:2.2rem; font-weight:900; font-variant-numeric:tabular-nums; direction:ltr; letter-spacing:1px; color:#fff; text-shadow:0 0 18px #ffffff44 } .le-time b.done { animation:leTick .35s ease-out }
@keyframes leTick { 50% { transform:scale(1.12); color:#ffd166 } }
.le-rec { display:flex; flex-direction:column; align-items:center; gap:4px; min-height:4px }
.le-ribbon { display:inline-flex; align-items:center; gap:7px; padding:6px 16px; font-weight:900; font-size:.95rem; color:#e9e6df; background:#ffffff0c; border:1px solid #ffffff22; clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%) }
.le-ribbon.gold { color:#1b1408; background:linear-gradient(90deg,#c9822a,#ffd166,#fff1b8,#ffd166,#c9822a); background-size:200% 100%; border:0; animation:leGold 2.4s linear infinite, mkPop .6s cubic-bezier(.3,1.8,.5,1) .9s both; box-shadow:0 0 24px #ffd16688 }
.le-ribbon.pop { animation:leGold 2.4s linear infinite, mkPop .6s cubic-bezier(.3,1.8,.5,1) both }
@keyframes leGold { to { background-position:-200% 0 } }
.le-sub { font-size:.8rem; opacity:.7 } .le-sub b { color:#ffd166 }
.le-ver { display:inline-flex; align-items:center; gap:6px; color:var(--accent2); font-weight:800; font-size:.9rem } .le-tip { display:inline-flex; align-items:center; gap:6px; color:#ffb3b3; font-size:.85rem }
.le-react { display:flex; flex-direction:column; align-items:center; gap:8px; width:100% } .le-react .mks-rx { justify-content:center }
.le-vote { display:flex; gap:6px; justify-content:center; flex-wrap:wrap } .le-vote .btn.on { border-color:var(--accent2); color:var(--accent2) }
.le-acts { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; width:100% } .le-acts .btn.primary { flex:1 1 160px } .le-acts .btn.gold { color:#1b1408; background:linear-gradient(180deg,#ffe08a,#d9a032); border-color:#ffd166 }
@media (max-height:520px) { .le-card { gap:7px; padding:14px 16px } .le-title { font-size:2.6rem } .le-time b { font-size:1.6rem } }
.le-card > * { flex-shrink:0 }   /* جولة 72: بالجوال بالعرض البطاقة أطول من الشاشة — كانت الصفوف تنضغط فوق بعض (الرقم القياسي فوق التقييم). الحين تنسحب */
/* مرحلة اليوم بالقائمة الرئيسية */
.mk-daily { position:relative; display:flex; align-items:center; gap:12px; width:100%; max-width:520px; margin:0 auto 10px; padding:0; overflow:hidden; text-align:start; cursor:pointer; color:var(--text); font:inherit;
  background:linear-gradient(90deg,#1b1408f0,#0d0f16f0); border:1px solid #ffd16655; clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); box-shadow:0 0 24px #ffd1661a; transition:transform .15s }
.mk-daily:hover { transform:translateY(-2px); border-color:#ffd166 }
.mk-daily canvas { width:120px; height:64px; flex:none; image-rendering:pixelated; background:#000; -webkit-mask:linear-gradient(90deg,#000 60%,transparent); mask:linear-gradient(90deg,#000 60%,transparent) }
html[dir=rtl] .mk-daily canvas { -webkit-mask:linear-gradient(270deg,#000 60%,transparent); mask:linear-gradient(270deg,#000 60%,transparent) }
.mkd-in { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; padding:8px 0 } .mkd-in b { font-size:.98rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .mkd-in small { font-size:.72rem; opacity:.65; display:inline-flex; align-items:center; gap:4px }
.mkd-k { display:inline-flex; align-items:center; gap:5px; color:#ffd166; font-size:.74rem; font-weight:800; letter-spacing:.5px }
.mkd-go { flex:none; display:inline-flex; align-items:center; gap:5px; margin-inline-end:12px; padding:6px 12px; font-weight:800; font-size:.82rem; color:#1b1408; background:linear-gradient(180deg,#ffe08a,#d9a032) }
/* الجوال بالعرض بس */
.mk-rotate { display:none }
body.mk-portrait .mk-rotate { position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:24px; text-align:center; background:radial-gradient(ellipse at 50% 30%,#2a0408,#05060a 70%) }
.mk-rotate b { font-size:1.3rem } .mk-rotate span { opacity:.7; font-size:.9rem; max-width:30ch; line-height:1.7 }
.mk-rot-i { width:74px; height:74px; display:grid; place-items:center; border:2px solid #ffffff33; animation:mkRot 2.2s ease-in-out infinite } .mk-rot-i .mki { width:40px; height:40px }
@keyframes mkRot { 0%,20% { transform:rotate(90deg) } 55%,100% { transform:rotate(0deg) } }
@media (max-width:760px) { .mkx-top.two { grid-template-columns:1fr } }
/* الجوال بالعرض: شاشة قصيرة — نضغط المسافات */
@media (max-height:500px) and (orientation:landscape) {
  #mkList { gap:8px } .mk-head { padding:6px 10px } .mk-head h2 { font-size:1.05rem } .mkx-hero { min-height:0 } .mkx-hero-cv { max-height:46vh }
  .mk-newc { min-height:180px } .mk-mehead { padding:8px 10px } .lv-tip { top:56px; font-size:.9rem }
}
/* التبويبات بسطر واحد يتمرر (عشر تبويبات) */
.mkx-bar { flex-wrap:nowrap } .mkx-tabs { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; min-width:0; -webkit-mask:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent); mask:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent); padding-inline:6px }
.mkx-tabs::-webkit-scrollbar { display:none } .mkx-tabs button { flex:none; white-space:nowrap }
@media (max-width:900px) { .mkx-bar { flex-wrap:wrap } .mkx-bar .mkx-search { flex:1 1 100% } }
/* لمعة العنوان داخل الحروف نفسها (بدل طبقة فوقها) */
.le-title::after { display:none }
.le-title span { background-image:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.9) 50%,transparent 58%),linear-gradient(180deg,#fff6d6 0%,#ffd166 45%,#c9822a 100%); background-size:260% 100%,100% 100%; background-position:160% 0,0 0; background-repeat:no-repeat; animation:leShine2 3.2s ease-in-out 1.1s infinite }
.lv-end2.lose .le-title span { background-image:linear-gradient(105deg,transparent 42%,rgba(255,220,220,.75) 50%,transparent 58%),linear-gradient(180deg,#ffd3d3 0%,#ff4a55 50%,#7a0a12 100%) }
@keyframes leShine2 { 0% { background-position:160% 0,0 0 } 55%,100% { background-position:-60% 0,0 0 } }
.le-time { margin-top:6px }
/* الجوال بالعرض (شاشة قصيرة): الرأس بسطر واحد عشان المراحل تبان */
@media (max-height:500px) and (orientation:landscape) {
  #mkList .mk-head { flex-wrap:nowrap; gap:8px; padding:6px 8px }
  #mkList .mk-head h2 { flex:0 1 auto; font-size:1rem; white-space:nowrap } #mkList .mk-head .mk-beta { display:none }
  #mkList .mk-head #mkBack span { display:none } #mkList .mk-head .mk-seg { width:auto; margin-inline-start:auto; flex:0 1 auto } #mkList .mk-head .mk-seg button { padding:6px 10px; flex:none }
  #mkList .mk-hr { flex:none } #mkList .mk-hr .mks-rank { padding:3px 8px; font-size:.72rem } #mkList .mk-bell { width:34px; height:34px }
  .mkx-bar { padding:6px 8px } .mkx-top.two { grid-template-columns:minmax(0,1.6fr) minmax(200px,1fr) } .mkx-daily { min-height:170px }
  .mk-note { padding:8px 10px; font-size:.82rem }
}
/* جولة 52أ.6: شكل الباب (فوق اللوحة لما تختار باب) */
.mk-doorbox { border: 1px solid #ffd16655; border-radius: 8px; padding: 6px; background: #ffd16608; }
.mk-doors .mk-it canvas { image-rendering: pixelated; }
body:has(#scr-maker.active), body.lv-on { --wipbar: 0px }   /* جولة 52أ.7: ما فيه شريط تحت داخل المخطّط */

/* =====================================================================
   جولة 52أ.7: شكل البروفايل في المخطّط (أيقونة + إطار + بانر + لقب) و«متابعاتي»
   ===================================================================== */
.mkav { --s:28px; position:relative; flex:0 0 auto; width:var(--s); height:var(--s); display:inline-grid; place-items:center; vertical-align:middle;
  background:radial-gradient(circle at 35% 30%,#2a2d38,#0c0d12); border:1px solid #ffffff1f; overflow:hidden }
.mkav.xs { --s:22px } .mkav.sm { --s:30px } .mkav.md { --s:46px } .mkav.xl { --s:88px; border-width:2px; border-color:var(--rc,#ffffff33); box-shadow:0 0 22px color-mix(in srgb,var(--rc,#fff) 35%,transparent) }
.mkav > .mkav-i { width:100%; height:100%; object-fit:cover; display:block }
.mkav > .mkav-c { height:86%; width:auto; image-rendering:pixelated }
.mkav > .mkav-t { font-weight:900; font-size:calc(var(--s) * .5); line-height:1; color:#fff }
.mkav.fr { background:none; border:0; overflow:visible; box-shadow:none }
.mkav.fr > .mkav-i, .mkav.fr > .mkav-c, .mkav.fr > .mkav-t { transform:scale(.74) }
.mkav > .mkav-f { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; z-index:2 }
.mkx-mk { display:inline-flex; align-items:center; gap:5px; vertical-align:middle }
.mk-me { align-items:center; gap:6px }
.mks-maker .mks-title, .mks-pi .mks-title { display:block; font-size:.78rem; line-height:1.3 }
.mks-maker > span { display:flex; flex-direction:column; align-items:flex-start }
.mks-tl li { grid-template-columns:28px auto 1fr auto }
/* صفحة الصانع: بانر فوق والأيقونة الكبيرة نازلة عليه */
.mks-hero { --rc:#9aa3b5; position:relative; height:132px; margin:-20px -20px 0; flex:0 0 auto; overflow:hidden; background:linear-gradient(120deg,color-mix(in srgb,var(--rc) 35%,#0b0c11),#0b0c11 70%) }
.mks-hero .mks-bn { width:100%; height:100%; object-fit:cover; display:block }
.mks-hero .mks-bn0 { position:absolute; inset:0; background:repeating-linear-gradient(135deg,#ffffff06 0 12px,transparent 12px 24px) }
.mks-hero .mks-shade { position:absolute; inset:0; background:linear-gradient(to bottom,transparent 40%,var(--panel,#12141b)) }
.mk-dlg.mks-maker-dlg .mks-prof { position:relative; margin-top:-52px; z-index:1; align-items:flex-end; padding:0 4px; isolation:isolate }
.mks-prof.pbg-host { padding:10px 12px; margin-top:-40px }
.mks-prof .mkav.xl { flex:0 0 auto }
.mks-lvl { display:inline-flex; align-items:center; gap:4px; font-size:.78rem; font-weight:800; padding:1px 8px; border:1px solid #ffffff22; background:#ffffff08 } .mks-lvl .mki { width:13px; height:13px }
.mks-pr { display:flex; align-items:center; gap:8px; flex-wrap:wrap }
/* «متابعاتي» */
.mk-seg button i.new { background:var(--accent); color:#fff; font-weight:900; animation:mkfPulse 1.6s ease-in-out infinite }
@keyframes mkfPulse { 50% { box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 30%,transparent) } }
.mkf-strip { padding:12px 14px; margin-bottom:12px; display:flex; flex-direction:column; gap:10px; min-width:0 }
.mkf-strip.sk { height:150px; opacity:.4 }
.mkf-h { display:flex; align-items:center; gap:8px } .mkf-h .mki { width:18px; height:18px; color:var(--accent2) }
.mkf-list { display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x proximity; overscroll-behavior-x:contain }
.mkf-mk { flex:0 0 148px; scroll-snap-align:start; display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 8px 10px; background:#ffffff06; border:1px solid var(--line); color:var(--text); font:inherit; cursor:pointer; text-align:center; min-width:0; position:relative }
.mkf-mk:hover { border-color:var(--accent2); background:#ffffff0c }
.mkf-mk.fresh { border-color:color-mix(in srgb,var(--accent) 70%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent) }
.mkf-mk > b { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.9rem }
.mkf-mk small { font-size:.72rem; opacity:.7 } .mkf-mk .mks-rank { font-size:.7rem }
.mkf-new { font-style:normal; color:#fff; background:var(--accent); padding:1px 8px; font-weight:800; opacity:1 }
.mkf-fol { font-size:.76rem; font-weight:800; padding:3px 12px; background:var(--accent); color:#fff; margin-top:2px }
.mkf-empty { display:flex; flex-direction:column; align-items:center; gap:6px; padding:26px 16px; text-align:center; margin-bottom:12px }
.mkf-empty .mki { width:34px; height:34px; color:var(--accent2) }
.mkf-strip.sug { margin-top:12px }
@media (max-height:500px) and (orientation:landscape) { .mkf-mk { flex-basis:128px; padding:8px 6px } .mkf-strip { padding:8px 10px } .mks-hero { height:96px } .mkav.xl { --s:70px } }
/* جولة 52أ.7: خيارات أداة الغرفة */
.mk-roombox { display:flex; flex-direction:column; gap:7px; padding:10px 10px 12px; background:#ffffff05; border:1px solid color-mix(in srgb,var(--accent2) 30%,transparent) }
.mk-roombox h4 { display:flex; align-items:center; gap:6px; flex-wrap:wrap } .mk-roombox h4 .mki { width:16px; height:16px; color:var(--accent2) }
.mkr-row { display:grid; grid-template-columns:72px 1fr; align-items:center; gap:8px; font-size:.8rem }
.mkr-row > span { opacity:.75; font-weight:700 }
.mkr-seg { display:flex; flex-wrap:wrap; gap:3px }
.mkr-seg button { flex:1 1 auto; min-width:0; padding:4px 7px; background:#0b0d12; border:1px solid #ffffff1a; color:var(--text); font:inherit; font-size:.76rem; font-weight:700; cursor:pointer; opacity:.75 }
.mkr-seg button.on { opacity:1; background:var(--ma25t,#b7101a40); border-color:var(--accent) }
.mkr-row select { width:100%; background:#0b0d12; color:var(--text); border:1px solid #ffffff22; padding:5px 6px; font:inherit; font-size:.8rem }
.mkr-chk { display:flex; align-items:center; gap:6px; font-size:.8rem; cursor:pointer }
.mkr-note { font-size:.72rem; opacity:.6; line-height:1.5 }
/* جولة 52أ.7: وضع التعلم — شريط التقدّم، «ورّني»، والإضاءة على المكان المطلوب، وشارة «متخرّج» */
.mkl-bar { height:6px; background:#ffffff10; position:relative; overflow:hidden; margin:2px 0 6px } .mkl-bar.sm { height:4px; margin:0 0 8px }
.mkl-bar i { position:absolute; inset-block:0; inset-inline-start:0; width:var(--p); background:linear-gradient(90deg,#8ecbff,#ffd166); box-shadow:0 0 10px #8ecbff88; transition:width .4s ease }
.mkl-acts { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px } .mkl-acts small { font-size:.72rem }
.mkl-grad { display:flex; align-items:center; gap:10px; margin-top:4px; padding:10px 12px; border:1px dashed #ffd16655; color:#ffd166cc; font-size:.84rem }
.mk-dlg .mkl-grad .mki { width:26px; height:26px; flex:none } .mkl-grad.on { border-style:solid; background:linear-gradient(90deg,#ffd16622,transparent); color:#ffd166 }
.mkl-gradw { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:10px 6px } .mk-dlg .mkl-gradw .mki { width:64px; height:64px; color:#ffd166; filter:drop-shadow(0 0 14px #ffd16688); animation:mkGrad 1.6s ease-in-out infinite }
.mkl-gradw h3 { font-size:1.8rem; color:#ffd166; margin:0 } @keyframes mkGrad { 50% { transform:translateY(-4px) scale(1.05) } }
.mk-spot { position:fixed; left:0; top:0; z-index:60; pointer-events:none; border:2px solid #ffd166; box-shadow:0 0 0 3px #ffd16633,0 0 22px #ffd16688; animation:mkSpot 1.1s ease-in-out infinite; will-change:transform }   /* جولة 52أ.8: يتبع العنصر كل فريم (بدون تأخير) */
.mk-spot.big { border-style:dashed; box-shadow:0 0 0 2px #ffd16622; animation:none }
.mk-spot b { position:absolute; top:-26px; inset-inline-start:-2px; background:#ffd166; color:#111; font-size:.74rem; font-weight:900; padding:2px 9px; white-space:nowrap }
.mk-spot.big b { top:6px; inset-inline-start:6px }
@keyframes mkSpot { 50% { box-shadow:0 0 0 7px #ffd16622,0 0 30px #ffd166aa } }
.mks-badge .mki { width:14px; height:14px }
/* جولة 52أ.8: حذف نهائي من السلة */
.mk-acts .btn.danger:not(.ghost) { background:linear-gradient(180deg,#5a070c,#2a0306); border-color:#c8141f88; color:#ffd5d5 }
.mk-acts .btn.danger:not(.ghost):hover { border-color:#ff4d57; color:#fff }
.mk-trnote { font-size:.72rem; padding:6px 0 }
/* =====================================================================
   جولة 52أ.8: الشريط العلوي بروح واجهة القطار — لوح معدني، شريط تحذير أحمر/أسود، ومسامير بالزوايا
   ===================================================================== */
#mkList .mk-head, #mkHub .mkx-bar { background:linear-gradient(180deg,#191c25 0%,#0d0f15 100%); border:1px solid #ffffff1c; box-shadow:0 12px 34px #000b, inset 0 1px 0 #ffffff12, inset 0 -1px 0 #00000080 }
#mkList .mk-head { padding:16px 26px 12px }
#mkList .mk-head::before { inset:0 0 auto; height:5px; background:repeating-linear-gradient(-45deg,#c8141f 0 9px,#0a0b0f 9px 18px); opacity:.95; box-shadow:0 1px 0 #00000099 }
#mkList .mk-head::after, #mkHub .mkx-bar::after { content:''; position:absolute; inset:0; width:auto; height:auto; opacity:1; pointer-events:none;
  background:radial-gradient(circle at 10px 15px,#8a8f9b 1.4px,#3a3d46 2.2px,#00000066 2.9px,transparent 3.4px),radial-gradient(circle at calc(100% - 10px) 15px,#8a8f9b 1.4px,#3a3d46 2.2px,#00000066 2.9px,transparent 3.4px),
    radial-gradient(circle at 10px calc(100% - 10px),#8a8f9b 1.4px,#3a3d46 2.2px,#00000066 2.9px,transparent 3.4px),radial-gradient(circle at calc(100% - 10px) calc(100% - 10px),#8a8f9b 1.4px,#3a3d46 2.2px,#00000066 2.9px,transparent 3.4px) }
#mkList .mk-head > *:not(.mks-notes) { position:relative; z-index:1 }
#mkList .mk-head h2 svg { filter:drop-shadow(0 0 6px #c8141f88) }
#mkList .mk-head .mk-beta { color:#ffd166; border-color:#ffd16677; background:#2a210b; letter-spacing:.3px }
#mkList .mk-head .mk-seg { background:#08090d; border-color:#ffffff1f; box-shadow:inset 0 2px 6px #000c }
#mkList .mk-head .mk-seg button.on { background:linear-gradient(180deg,#5a0c12,#2a0508); box-shadow:inset 0 0 0 1px #c8141f, 0 0 14px #c8141f55; color:#fff }
#mkHub .mkx-bar { position:relative; padding:10px 24px; overflow:hidden }
#mkHub .mkx-bar::before { content:''; position:absolute; inset:auto 0 0; height:3px; pointer-events:none; background:repeating-linear-gradient(-45deg,#c8141f 0 7px,#0a0b0f 7px 14px); opacity:.8 }
#mkHub .mkx-bar > * { position:relative; z-index:1 }
/* شريط التبويبات: ما فيه قص ولا شي يغطي التبويب — على الكمبيوتر تلتف، والبحث بمكانه أو بسطر لحاله */
@media (min-width:901px) {
  .mkx-bar { flex-wrap:wrap } .mkx-tabs { flex:1 1 560px; flex-wrap:wrap; overflow:visible; -webkit-mask:none; mask:none; padding-inline:0 }
  .mkx-bar .mkx-search { flex:0 1 300px; margin-inline-start:auto }
}
@media (max-height:500px) and (orientation:landscape) { #mkList .mk-head { padding:12px 20px 8px } #mkHub .mkx-bar { padding:8px 18px } }
/* =====================================================================
   جولة 52أ.8: البروفايل الموحّد — صفحة الصانع = شاشة البروفايل نفسها
   ===================================================================== */
#scr-profile.pf-ro .pf-btns, #scr-profile.pf-ro .pf-av-edit, #scr-profile.pf-ro .pf-row, #scr-profile.pf-ro .pf-bgbox, #scr-profile.pf-ro .xp-mini, #scr-profile.pf-ro #pfXpText { display:none !important }
#scr-profile.pf-ro .pf-av, #scr-profile.pf-ro .pf-banner { cursor:default }
.pf-extra:empty { display:none }
.pf-extra { margin-bottom:16px }
.mkp-card { --rc:#9aa3b5; display:flex; flex-direction:column; gap:10px; border-inline-start:3px solid var(--rc) }
.mkp-h { display:flex; align-items:center; gap:10px; flex-wrap:wrap } .mkp-k { display:inline-flex; align-items:center; gap:6px; font-size:1rem }
.mkp-k .mki { width:18px; height:18px; color:var(--accent) } .mkp-sp { flex:1 }
.mkp-mini { display:grid; grid-template-columns:repeat(6,1fr); gap:6px }
.mkp-mini span { display:flex; flex-direction:column; align-items:center; gap:1px; padding:6px 4px; background:#ffffff06; border:1px solid var(--line); font-size:.72rem; opacity:.85 }
.mkp-mini span b { font-size:1rem; opacity:1 }
@media (max-width:640px) { .mkp-mini { grid-template-columns:repeat(3,1fr) } }
/* أيقونات الصنّاع أوضح (كانت صغيرة) */
.mkav.xs { --s:28px } .mkav.sm { --s:36px } .mkav.md { --s:52px }
.mk-me .mkav { --s:32px }

/* ===== جولة 52أ.9: تصدير/استيراد المرحلة كملف ===== */
.mk-mehead .mk-impb { margin-inline-start:auto; flex:0 0 auto }
.mk-acts .btn[data-exp] { flex:0 0 auto }
.mk-imp-dlg { max-width:460px }
.mk-imp-dlg .mk-impn { margin:8px 0 0; padding-inline-start:18px; color:#ffd166; font-size:.85rem; line-height:1.6 }
@media (max-width:900px) { .mk-mehead .mk-impb { margin-inline-start:0 } }
/* جولة 53: أكثر من أوباد — قائمة + خيارات كل واحد */
.mk-awl { display:grid; grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:6px; margin-bottom:8px }
.mk-awe { display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px 3px 4px; background:#ffffff06; border:1px solid var(--line); color:var(--text); cursor:pointer; font:inherit; min-width:0 }
.mk-awe canvas { width:26px; height:30px; image-rendering:pixelated }
.mk-awe span { font-size:.68rem; line-height:1.25; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100% }
.mk-awe.on { border-color:#ff5b57; box-shadow:0 0 0 1px #ff5b5788 inset; background:#ff5b5714 }
.mk-awe.add { border-style:dashed; color:var(--muted); justify-content:center } .mk-awe.add .mki { width:18px; height:18px; margin:6px 0 4px }
.mk-awe.add.on { color:#ff9a8f }
.mk-awo { display:grid; grid-template-columns:84px 1fr 18px; align-items:center; gap:6px; font-size:.74rem; margin:3px 0 }
.mk-awo input[type=range] { width:100%; min-width:0; accent-color:#ff5b57 } .mk-awo b { text-align:center; font-variant-numeric:tabular-nums }
.mk-awt { grid-template-columns:84px 1fr } #mkAwBox .mk-awt select { margin:0 }
.mk-awrule { margin:2px 0 6px; font-size:.72rem; line-height:1.6; opacity:.85 }
.mk-awweak { display:flex; gap:7px; align-items:flex-start; font-size:.72rem; line-height:1.55; margin:6px 0; padding:6px 7px; background:#ffd16610; border:1px solid #ffd16633; cursor:pointer }
.mk-awweak input { margin-top:3px; accent-color:#ffd166; flex:none } .mk-awweak small { opacity:.7 }
.mk-awbtns { display:flex; flex-wrap:wrap; gap:6px } .mk-awbtns .mki { width:14px; height:14px; margin-inline-end:3px }
.mk-awdel { color:#ff8a80 !important }
/* جولة 53: أقسام اللوحة (بناء · عناصر · أوباد · منطق · أجواء) */
.mk-tabs { display:grid; grid-template-columns:repeat(5,1fr); gap:3px; margin:0 0 8px }
.mk-tabs button { display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px 2px 4px; background:#ffffff06; border:1px solid var(--line); color:var(--muted); font:inherit; font-size:.66rem; cursor:pointer; position:relative; min-width:0 }
.mk-tabs button .mki { width:16px; height:16px } .mk-tabs button span { white-space:nowrap }
.mk-tabs button.on { color:var(--text); border-color:var(--accent2,#ff5b57); background:#ff5b5714 }
.mk-tabs button i { position:absolute; top:2px; inset-inline-end:3px; font-style:normal; font-size:.58rem; background:#ff5b57; color:#fff; border-radius:7px; padding:0 4px; line-height:13px }
.mk-wide { width:100%; justify-content:center; margin:2px 0 6px }
.mk-lhelp { margin:4px 0 8px; padding-inline-start:18px; font-size:.72rem; line-height:1.7; opacity:.85 } .mk-lhelp b { color:#8fd3ff }
.mk-llist { display:flex; flex-direction:column; gap:4px; max-height:220px; overflow:auto; margin-bottom:8px }
.mk-lrow { display:flex; gap:4px; align-items:stretch; border:1px solid var(--line); border-inline-start:3px solid #5ec8ff; background:#ffffff05 } .mk-lrow.key { border-inline-start-color:#ffd166 }
.mk-lgo { flex:1; text-align:start; background:none; border:0; color:var(--text); font:inherit; font-size:.72rem; padding:5px 7px; cursor:pointer; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.mk-lrow .mk-ib { background:none; border:0; color:#ff8a80; cursor:pointer; padding:0 8px; font:inherit }
.mk-lideas { display:flex; flex-wrap:wrap; gap:4px; font-size:.68rem; align-items:center } .mk-lideas b { width:100%; opacity:.7 } .mk-lideas span { padding:3px 7px; background:#5ec8ff12; border:1px solid #5ec8ff33 }
.mk-envo { grid-template-columns:70px 1fr 64px } .mk-envo b { font-size:.66rem; font-weight:600; opacity:.85 }
.mk-tints { display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin:6px 0; font-size:.72rem } .mk-tints > span { width:100%; opacity:.75 }
.mk-tints button { display:flex; align-items:center; gap:4px; padding:3px 7px; background:#ffffff06; border:1px solid var(--line); color:var(--text); font:inherit; font-size:.68rem; cursor:pointer }
.mk-tints button i { width:10px; height:10px; background:var(--tc); border:1px solid #ffffff33 } .mk-tints button.on { border-color:#ffd166; background:#ffd16612 }
/* جولة 53: اللعب الجماعي بكود */
.mk-joinb { display:flex; align-items:center; gap:6px; padding:6px 10px; background:#ffffff08; border:1px solid var(--line); color:var(--text); font:inherit; font-size:.78rem; cursor:pointer; white-space:nowrap }
.mk-joinb .mki { width:16px; height:16px } .mk-joinb:hover { border-color:#5ec8ff; color:#bfe8ff }
.mk-joinc { width:100%; font-size:1.6rem; letter-spacing:.35em; text-align:center; padding:10px; margin:6px 0 4px; text-transform:uppercase }
.mk-room-dlg { max-width:460px }
.mk-room-t { font-weight:700; margin:-4px 0 8px; opacity:.85 }
.mk-room-code { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px dashed #5ec8ff66; background:#5ec8ff0d; margin-bottom:6px }
.mk-room-code span { opacity:.7; font-size:.8rem } .mk-room-code b { font-size:1.55rem; letter-spacing:.22em; flex:1; text-align:center; color:#bfe8ff }
.mk-room-ms { display:grid; grid-template-columns:repeat(var(--cols,4),1fr); gap:6px; margin:10px 0 6px }
.mk-room-ms.many { gap:4px } .mk-room-ms.many .mk-room-m { padding:4px 2px } .mk-room-ms.many .mk-room-m canvas { width:20px; height:24px } .mk-room-ms.many .mk-room-m b { font-size:11px }
.mk-room-m { display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px; border:1px solid var(--line); background:#ffffff05; min-width:0 }
.mk-room-m canvas { width:28px; height:34px; image-rendering:pixelated } .mk-room-m b { font-size:.74rem; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .mk-room-m small { font-size:.62rem; opacity:.65 }
.mk-room-m.host { border-color:#ffd16677 } .mk-room-m.host small { color:#ffd166; opacity:1 }
.mk-room-m.empty { border-style:dashed; opacity:.5; justify-content:center } .mk-room-m.empty i { font-style:normal; font-size:1.3rem; line-height:1.2 }
.mk-room-note { display:flex; gap:6px; align-items:flex-start; font-size:.7rem; opacity:.75; margin:4px 0 0 } .mk-room-note .mki { width:13px; height:13px; flex:none; margin-top:2px }
.mk-coop-b { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:8px 0 12px }
.mk-coop-b span { display:flex; flex-direction:column; align-items:center; padding:6px 10px; border:1px solid var(--line); background:#ffffff06; font-size:.72rem; opacity:.85 } .mk-coop-b span b { font-size:.8rem }
.mk-coop-b span.ok { border-color:#7bd38977; color:#bff0c9 }
#mkRoomDlg { display:flex; flex-direction:column; gap:8px } #mkRoomDlg h3 { margin:0 } #mkRoomDlg .mk-room-ms, #mkRoomDlg .mk-room-code, #mkRoomDlg .mk-wide { margin:0 }
@media (max-height:440px) {
  .mk-room-dlg { padding:10px 14px; max-height:94vh } #mkRoomDlg { gap:5px } #mkRoomDlg h3 { font-size:.95rem } .mk-room-t { font-size:.8rem; margin:0 }
  .mk-room-code { padding:3px 8px } .mk-room-code b { font-size:1.1rem } .mk-room-code .btn { padding:3px 8px }
  .mk-room-m { flex-direction:row; justify-content:center; gap:4px; padding:3px 2px } .mk-room-m canvas { width:16px; height:20px } .mk-room-m small, .mk-room-note { display:none } .mk-room-m.empty i { font-size:.9rem }
  #mkRoomDlg > p.muted { margin:0; font-size:.7rem } #mkRoomDlg .mk-dlg-a { margin-top:2px } #mkRoomDlg .mk-wide { padding:4px 8px }
}

/* =====================================================================
   جولة 56: السلاسة — أقل طبقات رسم (كانت 38 طبقة «ضبابية خلفية» + طبقة لكل صورة مصغّرة)
   الخلفيات صارت شبه معتمة بنفس الشكل تقريبًا، بدون backdrop-filter اللي يعيد رسم اللي تحته كل فريم.
   ===================================================================== */
#scr-maker .panel, #mkHub .panel, .mk-modal .panel, #scr-maker .mkx-card, #scr-maker .mk-card { -webkit-backdrop-filter: none !important; backdrop-filter: none !important }
#scr-maker .mkx-card.panel, #scr-maker .mk-card.panel { background: #0f1118f2 }
#mkHub .mkx-bar.panel, #mkList .mk-head { background-color: #11131af5 }
.mkx-grid { transition: opacity .16s ease }
.mkx-grid.mkx-wait { opacity: .5; pointer-events: none }
.mkx-grid.mkx-in > * { animation: mkxIn .28s ease both }
.mkx-grid.mkx-in > *:nth-child(2) { animation-delay: .02s } .mkx-grid.mkx-in > *:nth-child(3) { animation-delay: .04s } .mkx-grid.mkx-in > *:nth-child(4) { animation-delay: .06s }
.mkx-grid.mkx-in > *:nth-child(n+5) { animation-delay: .08s }
@keyframes mkxIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .mkx-grid.mkx-in > * { animation: none } }
/* جولة 57: شريط «مرحلة اليوم» ينزل بنعومة (كان يدفّ البطاقات تحته فجأة = تقطيع أول ما تفتح) */
.mk-daily { animation: mkdIn .45s cubic-bezier(.2, .8, .3, 1) both; overflow: hidden }
@keyframes mkdIn { from { opacity: 0; max-height: 0; margin-top: 0; margin-bottom: 0 } to { opacity: 1; max-height: 140px } }
@media (prefers-reduced-motion: reduce) { .mk-daily { animation: none } }
/* جولة 57: الجوالات الضيقة بالعرض — رأس المخطّط كان يطلع برّا الشاشة 13px */
@media (max-height:500px) and (orientation:landscape) and (max-width:760px) {
  #mkList .mk-head h2 { display:none }
  #mkList .mk-head .mk-seg { margin-inline-start:0; flex:1 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none }
  #mkList .mk-head .mk-seg::-webkit-scrollbar { display:none }
  #mkList .mk-head .mk-seg button { padding:6px 8px; font-size:.78rem }
}

/* جولة 64: شخصيتك بالمخطّط + الأوباد المقفل + رسالة الجوال */
.mk-chb { display:flex; align-items:center; gap:6px; padding:3px 10px 3px 6px; background:#ffffff08; border:1px solid var(--line); color:var(--text); font:inherit; font-size:.78rem; cursor:pointer; white-space:nowrap; max-width:180px }
.mk-chb canvas { width:16px; height:24px; image-rendering:pixelated; flex:none }
.mk-chb span { overflow:hidden; text-overflow:ellipsis } .mk-chb:hover { border-color:#5ec8ff; color:#bfe8ff }
.mk-ch-dlg { max-width:560px }
.mk-chars { display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px; margin:10px 0 4px; max-height:min(52vh,420px); overflow:auto; padding:2px }
.mk-ch { display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 6px 8px; background:#ffffff06; border:1px solid var(--line); color:var(--text); font:inherit; cursor:pointer; border-radius:10px }
.mk-ch canvas { width:40px; height:60px; image-rendering:pixelated }
.mk-ch b { font-size:.8rem; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.mk-ch small { display:inline-flex; align-items:center; gap:4px; font-size:.68rem; opacity:.7 } .mk-ch small .mki { width:12px; height:12px }
.mk-ch:hover { border-color:#5ec8ff } .mk-ch.on { border-color:#5ec8ff; background:#5ec8ff14; box-shadow:inset 0 0 18px #5ec8ff22 } .mk-ch.on small { color:#9fe2ff; opacity:1 }
.mk-ch.lk canvas { filter:grayscale(1) brightness(.55) } .mk-ch.lk small { color:#ffd166; opacity:.9 }
.mk-awlock { display:flex; gap:6px; align-items:flex-start; margin:4px 0 2px; font-size:.7rem; line-height:1.6; color:#ffd166cc } .mk-awlock .mki { width:13px; height:13px; flex:none; margin-top:2px }
.mk-newc.mob { opacity:.85 } .mk-newc.mob .mk-newi { filter:grayscale(.4) }
.btn.mob { opacity:.75 }
.mk-mob-dlg { max-width:440px; text-align:center } .mk-mob-dlg h3 { justify-content:center }

/* جولة 72: شريحة الخبرة والخردة بشاشة نهاية المرحلة */
.lv-xp { position: absolute; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translate(-50%, -8px); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 16px; border-radius: 12px; background: #151923ee; border: 1px solid #ffd16655; color: #f1ece4; box-shadow: 0 8px 24px #0009; pointer-events: none; opacity: 0; max-width: calc(100% - 32px); text-align: center; }
.lv-xp.on { opacity: 1; transform: translate(-50%, 0); transition: opacity .35s ease, transform .35s ease; }
.lv-xp.kick { position: static; transform: none; display: inline-flex; flex-direction: row; padding: 2px 10px; margin-inline-start: 4px; border-radius: 99px; font-size: .78rem; opacity: 1; box-shadow: none; z-index: auto; max-width: none; white-space: nowrap; }   /* جولة 72: مختصرة بسطر عنوان بطاقة النهاية (الجوال بالعرض) */
.lv-xp.kick .lv-xp-v { font-size: .82rem; font-weight: 700; }
.le-kick:has(.lv-xp.kick) { opacity: 1; } .le-kick:has(.lv-xp.kick) > span, .le-kick:has(.lv-xp.kick) > small { opacity: .75; }
.lv-xp .lv-xp-v { font-size: 1.05rem; font-weight: 800; }
.lv-xp .lv-xp-v b { color: #ffd166; font-variant-numeric: tabular-nums; }
.lv-xp small { font-size: .78rem; opacity: .75; }

/* =====================================================================
   جولة 75 — المحرر الفخم (كمبيوتر): غرفة تحكم المنشأة
   لوحات معتمة بطبقات، خط أحمر يتوهج، أزرار مثل لوحة أجهزة، ومسرح بشبكة خافتة
   ===================================================================== */
#mkEd { --mk-gold:#e8c27a; --mk-red:#ff4b45; --mk-plate:linear-gradient(180deg,#151821 0%,#0c0e14 100%); --mk-edge:#ffffff17; --mk-edge2:#ffffff26;
  background:radial-gradient(120% 90% at 50% 40%,#0b0d14 0%,#04050a 70%) }
#mkEd ::-webkit-scrollbar { width:8px; height:8px } #mkEd ::-webkit-scrollbar-track { background:transparent }
#mkEd ::-webkit-scrollbar-thumb { background:#ffffff1c; border:2px solid transparent; background-clip:padding-box } #mkEd ::-webkit-scrollbar-thumb:hover { background:#ffffff33; background-clip:padding-box }
/* الشريط العلوي */
#mkEd .mk-top { position:relative; flex-wrap:nowrap; gap:8px; padding:9px 14px 10px; background:linear-gradient(180deg,#141720 0%,#0b0d13 100%); border:0; box-shadow:0 1px 0 #000, 0 10px 30px -18px #000 }
#mkEd .mk-top::after { content:''; position:absolute; inset:auto 0 -1px 0; height:2px; background:linear-gradient(90deg,transparent,#ff4b45 18%,#ffb36b 50%,#ff4b45 82%,transparent); opacity:.75; box-shadow:0 0 14px #ff4b4588 }
#mkEd .mk-top::before { content:''; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,#ffffff03 0 1px,transparent 1px 3px) }
#mkEd .mk-top > * { position:relative }
#mkEd .mk-namebar { flex:1 1 220px; min-width:150px; max-width:340px }
#mkEd .mk-title { width:100%; background:#07080c; border:1px solid var(--mk-edge2); color:#f6efe2; font:inherit; font-weight:900; font-size:1rem; padding:6px 12px; box-shadow:inset 0 2px 6px #000c; outline:none; transition:border-color .2s, box-shadow .2s }
#mkEd .mk-title:focus { border-color:#e8c27a99; box-shadow:inset 0 2px 6px #000c, 0 0 0 3px #e8c27a1c }
#mkEd .mk-top select { background:#07080c; border-color:var(--mk-edge2); box-shadow:inset 0 2px 5px #000b; padding:6px 9px; font-size:.82rem }
#mkEd .mk-goal { gap:5px; padding:3px 6px; border:1px solid var(--mk-edge); background:#ffffff05 }
#mkEd .mk-goal svg, #mkEd .mk-theme .mki { color:var(--mk-gold); opacity:.9 }
#mkEd .mk-code { font-family:ui-monospace,Consolas,monospace; letter-spacing:2px; color:#ffcf7a; background:#0a0805; border-color:#ffb34766; text-shadow:0 0 8px #ffb34788; box-shadow:inset 0 0 10px #ffb3471a }
#mkEd .mk-edst:empty { display:none }
#mkEd .mk-save { display:inline-flex; align-items:center; gap:6px; min-width:96px; font-weight:700 }
#mkEd .mk-save::before { content:''; width:7px; height:7px; border-radius:50%; background:#5fd38a; box-shadow:0 0 8px #5fd38a; flex:none }
#mkEd .mk-save.dirty::before { background:#ffc04d; box-shadow:0 0 8px #ffc04d; animation:mkeBlink 1s steps(2) infinite }
#mkEd .mk-tb { gap:5px; padding-inline-start:10px; border-inline-start:1px solid var(--mk-edge) }
#mkEd .mk-tb .btn { height:36px; padding:0 11px; background:linear-gradient(180deg,#1b1f2a,#11141b); border:1px solid var(--mk-edge2); box-shadow:inset 0 1px 0 #ffffff12, 0 2px 0 #000; transition:transform .12s, border-color .2s, box-shadow .2s }
#mkEd .mk-tb .btn:hover { border-color:#e8c27a88; box-shadow:inset 0 1px 0 #ffffff18, 0 2px 0 #000, 0 0 16px -6px #e8c27a }
#mkEd .mk-tb .btn:active { transform:translateY(1px) }
#mkEd #mkPubE { color:#ffd892; border-color:#e8c27a66 }
#mkEd #mkTry { position:relative; overflow:hidden; background:linear-gradient(180deg,#e2342e,#a6141a); border-color:#ff7a70; color:#fff; padding:0 16px; font-weight:900; box-shadow:inset 0 1px 0 #ffffff40, 0 2px 0 #4a0508, 0 0 22px -6px #ff3b30 }
#mkEd #mkTry::after { content:''; position:absolute; top:0; bottom:0; width:40%; inset-inline-start:-60%; background:linear-gradient(100deg,transparent,#ffffff40,transparent); animation:mkShine 3.6s ease-in-out infinite }
@keyframes mkShine { 0%,62% { inset-inline-start:-60% } 100% { inset-inline-start:130% } }
/* الجسم واللوحة الجانبية */
@media (min-width:1280px) { #mkEd .mk-body { grid-template-columns:300px 1fr } }
#mkEd .mk-pal { background:linear-gradient(180deg,#10131a 0%,#0a0b10 100%); border:0; border-inline-end:1px solid #000; box-shadow:inset -1px 0 0 #ffffff0d, 8px 0 24px -16px #000 inset; padding:12px 12px 16px; gap:14px }
#mkEd .mk-tabs { gap:0; padding:3px; background:#06070b; border:1px solid var(--mk-edge); box-shadow:inset 0 2px 8px #000c; position:sticky; top:-12px; z-index:4; margin:-2px 0 4px }
#mkEd .mk-tabs button { border:0; background:none; padding:7px 2px 6px; font-size:.68rem; font-weight:800; color:#8d93a3; transition:color .2s, background .2s }
#mkEd .mk-tabs button .mki { width:18px; height:18px; transition:transform .2s }
#mkEd .mk-tabs button:hover { color:#e9e3d6 } #mkEd .mk-tabs button:hover .mki { transform:translateY(-1px) }
#mkEd .mk-tabs button.on { color:#fff; background:linear-gradient(180deg,#2a1214,#1a0b0d); box-shadow:inset 0 0 0 1px #ff4b4566, inset 0 -2px 0 #ff4b45, 0 0 18px -8px #ff4b45 }
#mkEd .mk-tabs button.on .mki { color:#ff8a80; filter:drop-shadow(0 0 4px #ff4b4588) }
#mkEd .mk-grp h4 { display:flex; align-items:center; gap:8px; font-size:.72rem; letter-spacing:.3px; color:#c9c2b3; opacity:1; text-transform:none }
#mkEd .mk-grp h4::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,#ffffff1f,transparent); min-width:12px }
html[dir=rtl] #mkEd .mk-grp h4::after { background:linear-gradient(270deg,#ffffff1f,transparent) }
#mkEd .mk-items { gap:6px }
#mkEd .mk-it { background:linear-gradient(180deg,#141720,#0d0f15); border:1px solid #ffffff12; padding:5px 6px; box-shadow:inset 0 1px 0 #ffffff0a; transition:transform .12s, border-color .15s, box-shadow .15s }
#mkEd .mk-it canvas { width:30px; height:30px; background:#06070a; outline:1px solid #ffffff0f }
#mkEd .mk-it:hover { transform:translateY(-1px); border-color:#e8c27a66; box-shadow:inset 0 1px 0 #ffffff12, 0 6px 14px -8px #000, 0 0 0 1px #e8c27a22 }
#mkEd .mk-it.on { border-color:#ff4b45; background:linear-gradient(180deg,#2a1315,#170b0d); box-shadow:inset 0 0 0 1px #ff4b4588, 0 0 16px -6px #ff4b45 }
#mkEd .mk-q { background:#06070b; border-color:var(--mk-edge2); box-shadow:inset 0 2px 6px #000c; padding:8px 12px }
/* المسرح */
#mkEd .mk-stage { background:#030407; background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px); background-size:32px 32px }
#mkEd .mk-stage::after { content:''; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 80px #000c; z-index:2 }
#mkEd .mk-rail { top:12px; inset-inline-start:12px; gap:2px; padding:5px; background:linear-gradient(180deg,#151821f2,#0b0d12f2); border:1px solid var(--mk-edge2); box-shadow:0 12px 30px -10px #000, inset 0 1px 0 #ffffff12; border-radius:10px }
#mkEd .mk-rail button { width:38px; height:36px; border-radius:7px; transition:background .15s, color .15s, box-shadow .15s }
#mkEd .mk-rail button:hover { background:#ffffff10 }
#mkEd .mk-rail button.on { color:#ffd892; background:linear-gradient(180deg,#3a2a12,#22180a); border-color:#e8c27a88; box-shadow:0 0 14px -4px #e8c27a, inset 0 1px 0 #ffffff1a }
#mkEd .mk-rail .sep { margin:4px 6px; background:linear-gradient(90deg,transparent,#ffffff26,transparent) }
#mkEd .mk-rail button[title]:hover::after { content:attr(title); position:absolute; inset-inline-start:calc(100% + 10px); top:50%; transform:translateY(-50%); white-space:nowrap; max-width:320px; overflow:hidden; text-overflow:ellipsis; background:#05060a; border:1px solid #e8c27a55; color:#f3e9d2; font-size:.72rem; font-weight:700; padding:4px 10px; pointer-events:none; box-shadow:0 8px 18px #000a; z-index:9 }
#mkEd .mk-mini { bottom:12px; inset-inline-end:12px; padding:4px; background:#05060a; border:1px solid var(--mk-edge2); border-radius:8px; box-shadow:0 14px 30px -10px #000, 0 0 0 1px #000 }
#mkEd .mk-mini::before { content:'الخريطة'; position:absolute; top:-9px; inset-inline-start:10px; font-size:.6rem; font-weight:800; padding:0 6px; background:#05060a; color:#e8c27a; border:1px solid #e8c27a44 }
#mkEd .mk-mini canvas { border-radius:4px }
#mkEd .mk-hint { bottom:12px; inset-inline-start:66px; background:#05060ad9; border:1px solid var(--mk-edge); padding:3px 12px; opacity:.85; border-radius:6px }
#mkEd .mk-warn { background:linear-gradient(180deg,#0c0e14,#08090d); border-top:1px solid #000; box-shadow:inset 0 1px 0 #ffffff0d; min-height:38px; padding:6px 14px }

/* استوديو الأجواء */
.mk-envbox { display:flex; flex-direction:column; gap:8px }
.mk-ehead { display:flex; align-items:baseline; justify-content:space-between; gap:8px }
.mk-ehead h4 { display:flex; align-items:center; gap:6px; margin:0; font-size:.86rem !important; color:#f3e9d2 !important }
.mk-ehead h4::after { display:none }
.mk-ehead small { font-size:.64rem; opacity:.6; white-space:nowrap }
.mk-eprev { position:relative; border:1px solid #ffffff22; background:#000; box-shadow:0 14px 30px -14px #000; overflow:hidden; border-radius:6px }
.mk-eprev::after { content:''; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px #ffffff12, inset 0 0 26px #000b; border-radius:inherit }
.mk-eprev canvas { display:block; width:100%; height:auto; aspect-ratio:16/9; image-rendering:pixelated }
.mk-eprev.big { width:min(960px,86vw) } .mk-envbig-dlg { width:auto !important; max-width:none !important }
.mk-ebar { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:-3px }
.mk-elive { display:flex; align-items:center; gap:6px; font-size:.64rem; font-weight:800; color:#ffcfca; letter-spacing:.2px }
.mk-elive i { width:6px; height:6px; border-radius:50%; background:#ff3b30; box-shadow:0 0 6px #ff3b30; animation:mkeBlink 1.2s steps(2) infinite }
@keyframes mkeBlink { 50% { opacity:.2 } }
.mk-ebig { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px; background:#ffffff08; border:1px solid #ffffff22; color:#e9e3d6; font:inherit; font-size:.66rem; font-weight:800; cursor:pointer; border-radius:5px }
.mk-ebig:hover { border-color:#e8c27a; color:#ffd892 } .mk-ebig .mki { width:13px; height:13px }
.mk-epre > span { display:flex; align-items:center; gap:5px; font-size:.7rem; font-weight:800; color:#c9c2b3; margin-bottom:5px } .mk-epre > span .mki { width:14px; height:14px; color:#e8c27a }
.mk-epre > div { display:flex; flex-wrap:wrap; gap:4px }
.mk-epre button { padding:4px 9px; font:inherit; font-size:.68rem; font-weight:700; color:#e9e3d6; background:linear-gradient(180deg,#191c26,#10131a); border:1px solid #ffffff1a; cursor:pointer; border-radius:99px; transition:border-color .15s, color .15s, box-shadow .15s }
.mk-epre button:hover { border-color:#e8c27a99; color:#ffd892; box-shadow:0 0 12px -5px #e8c27a }
.mk-ecard { border:1px solid #ffffff12; background:linear-gradient(180deg,#12151d,#0b0d12); border-radius:8px; transition:border-color .2s, box-shadow .2s }
.mk-ecard.on { border-color:#ffffff22; box-shadow:inset 0 1px 0 #ffffff0d }
.mk-ecard header { display:flex; align-items:center; gap:9px; padding:7px 9px }
.mk-eic { width:30px; height:30px; display:grid; place-items:center; background:#ffffff08; border:1px solid #ffffff14; flex:none; border-radius:7px; color:#8d93a3; transition:all .2s }
.mk-eic .mki { width:17px; height:17px }
.mk-ecard.on .mk-eic { color:#ffd892; border-color:#e8c27a66; background:radial-gradient(circle at 50% 30%,#e8c27a2a,#e8c27a08); box-shadow:0 0 14px -5px #e8c27a }
.mk-ecard header > div { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.35 }
.mk-ecard header b { font-size:.8rem; color:#f3e9d2 } .mk-ecard header small { font-size:.63rem; opacity:.55; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mk-ebody { display:flex; flex-direction:column; gap:5px; padding:7px 9px 9px; border-top:1px dashed #ffffff12 }
.mk-ebody .mk-awo { margin:0 } .mk-envo { grid-template-columns:52px 1fr 68px }
.mk-sw { position:relative; width:36px; height:20px; flex:none; cursor:pointer }
.mk-sw input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer }
.mk-sw i { position:absolute; inset:0; background:#06070a; border:1px solid #ffffff26; border-radius:99px; transition:background .2s, border-color .2s; box-shadow:inset 0 2px 4px #000 }
.mk-sw i::after { content:''; position:absolute; top:2px; inset-inline-start:2px; width:14px; height:14px; border-radius:50%; background:#6b7180; transition:inset-inline-start .2s, background .2s, box-shadow .2s }
.mk-sw input:checked + i { background:#3a0d10; border-color:#ff4b45 } .mk-sw input:checked + i::after { inset-inline-start:18px; background:#ff6b63; box-shadow:0 0 8px #ff4b45 }
.mk-sw input:focus-visible + i { outline:2px solid #e8c27a; outline-offset:2px }
.mk-eseg { display:flex; background:#05060a; border:1px solid #ffffff14; padding:2px; gap:2px; border-radius:6px }
.mk-eseg button { flex:1; padding:4px 2px; background:none; border:0; color:#9aa0ae; font:inherit; font-size:.7rem; font-weight:800; cursor:pointer; border-radius:4px; min-width:0 }
.mk-eseg button:hover { color:#fff; background:#ffffff0a }
.mk-eseg button.on { color:#fff; background:linear-gradient(180deg,#3a1215,#250b0d); box-shadow:inset 0 0 0 1px #ff4b4588 }
.mk-ewind { display:grid; grid-template-columns:52px 1fr; align-items:center; gap:6px; font-size:.74rem }
.mk-ewind .mk-eseg button { font-family:system-ui,sans-serif; font-size:.85rem; padding:2px }
.mk-echk { display:flex; align-items:center; gap:7px; font-size:.72rem; cursor:pointer; padding:2px 0 }
.mk-echk input { accent-color:#ff4b45; margin:0 }
.mk-eamb { flex-direction:row; align-items:center } .mk-eamb select { flex:1; min-width:0; max-width:none !important }
.mk-envbox .mk-tints { margin:0 } .mk-envbox .mk-tints > span { display:none }
.mk-envbox .mk-tints button { border-radius:99px; padding:3px 8px }
.mk-envbox input[type=range] { -webkit-appearance:none; appearance:none; height:18px; background:transparent; cursor:pointer }
.mk-envbox input[type=range]::-webkit-slider-runnable-track { height:4px; background:linear-gradient(90deg,#2a2f3b,#3a3f4d); border-radius:99px; box-shadow:inset 0 1px 2px #000 }
.mk-envbox input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; margin-top:-5px; border-radius:50%; background:radial-gradient(circle at 40% 35%,#ffd0cc,#ff4b45 60%,#a3141a); border:1px solid #000; box-shadow:0 0 8px #ff4b4599 }
.mk-envbox input[type=range]::-moz-range-track { height:4px; background:#2a2f3b; border-radius:99px } .mk-envbox input[type=range]::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:#ff4b45; border:1px solid #000 }

/* أوراق التلميح */
.mk-hint-dlg { max-width:520px }
.mk-papers { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:4px }
.mk-papers button { display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px 5px; background:#ffffff06; border:1px solid var(--line); color:var(--text); font:inherit; cursor:pointer; border-radius:8px; transition:border-color .15s, background .15s }
.mk-papers canvas { width:40px; height:52px; image-rendering:pixelated }
.mk-papers small { font-size:.62rem; opacity:.75; white-space:nowrap }
.mk-papers button:hover { border-color:#e8c27a77 } .mk-papers button.on { border-color:#e8c27a; background:#e8c27a14; box-shadow:0 0 14px -6px #e8c27a } .mk-papers button.on small { color:#ffd892; opacity:1 }

/* جولة 84: الجوال — «مرحلة جديدة» تقول إن الصنع للجوال قريب (اللعب متاح) */
.mk-newc.mob { opacity: .78; border-style: dashed; }
.mk-newc.mob .mk-newi { filter: grayscale(1); }
.mk-soon { padding: 3px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: #ffffff10; border: 1px solid #ffffff2a; color: #ffd166; }