/* =====================================================================
   جولة 56 — إطار موحّد لكل النوافذ المنبثقة (بروح واجهة القطار والمخطّط صفر):
   لوح معدني · شريط تحذير أحمر/أسود فوق · أربع مسامير بالزوايا · عنوان واضح · زر إغلاق معدني.
   كله «خلفيات» على النافذة نفسها (مو ::before/::after) فما يتعارض مع أي نافذة،
   ويثبت مكانه لو النافذة فيها تمرير. أي نافذة جديدة بالكلاسات المعتادة تاخذه تلقائيًا:
     .modal > .panel / .dlg   ·   .mk-modal > .mk-dlg   ·   .fz-frame
   ===================================================================== */
:root {
  --fz-haz: #c8141f;
  --fz-rv: radial-gradient(circle, #9aa0ad 0 1.3px, #3a3d46 1.9px 2.5px, #00000088 2.9px, transparent 3.4px);
  --fz-metal: linear-gradient(180deg, #1e222c 0%, #14171f 46%, #0c0e13 100%);
}
.modal > .panel, .modal > .dlg, .mk-modal > .mk-dlg, .fz-frame {
  --fz-top: 5px;
  background:
    var(--fz-rv) 6px calc(var(--fz-top) + 6px) / 12px 12px no-repeat,
    var(--fz-rv) calc(100% - 6px) calc(var(--fz-top) + 6px) / 12px 12px no-repeat,
    var(--fz-rv) 6px calc(100% - 6px) / 12px 12px no-repeat,
    var(--fz-rv) calc(100% - 6px) calc(100% - 6px) / 12px 12px no-repeat,
    repeating-linear-gradient(-45deg, var(--fz-haz) 0 9px, #0a0b0f 9px 18px) 0 0 / 100% var(--fz-top) no-repeat,
    linear-gradient(180deg, #ffffff0a, transparent 120px) 0 var(--fz-top) / 100% 120px no-repeat,
    var(--fz-metal) !important;
  background-attachment: scroll !important;
  border: 1px solid #ffffff1f !important;
  box-shadow: 0 26px 70px #000d, 0 0 0 1px #000a, inset 0 1px 0 #ffffff14, inset 0 -1px 0 #00000080 !important;
  padding-top: calc(var(--fz-top) + 16px);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* الزخارف القديمة (خط اللون والتلميع) تتعارض مع الإطار — نطفيها بالنوافذ بس */
.modal > .panel::after, .modal > .panel::before, .mk-modal > .mk-dlg.panel::after, .mk-modal > .mk-dlg.panel::before { display: none }

/* الخلفية: عتمة متدرّجة + ضبابية خفيفة، وظهور ناعم */
.modal, .mk-modal { background: radial-gradient(ellipse at 50% 40%, #000000a6, #000000e6) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px) }
@keyframes fzPop { from { opacity: 0; transform: translateY(8px) scale(.975) } to { opacity: 1; transform: none } }
@keyframes fzFade { from { opacity: 0 } to { opacity: 1 } }
.modal:not(.hidden), .mk-modal { animation: fzFade .16s ease both }
.modal:not(.hidden) > .panel, .modal:not(.hidden) > .dlg, .mk-modal > .mk-dlg { animation: fzPop .2s cubic-bezier(.2, .9, .3, 1.15) both }

/* العنوان: أيقونة بمربع مقصوص، وخط فاصل متقطّع */
.modal .dlg-h, .modal .fz-h { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px dashed #ffffff1c }
.modal .dlg-h h3 { margin: 0; font-size: 1.12rem; letter-spacing: .2px; font-weight: 900 }
.modal .dlg-h h3 > svg:first-child { width: 30px; height: 30px; padding: 6px; flex: none; color: var(--accent2); background: #0a0b10; border: 1px solid color-mix(in srgb, var(--accent2) 70%, transparent);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); box-shadow: inset 0 0 10px #0008 }
.modal > .panel > h3:first-child, .modal > .dlg > h3:first-child, .mk-modal .mk-dlg > h3:first-child { padding-bottom: 10px; border-bottom: 1px dashed #ffffff1c; font-weight: 900 }

/* زر الإغلاق: مربع معدني، يحمر بالمرور */
.modal .dlg-close, .chase-box .dlg-close, .mk-modal .mks-x {
  width: 34px; height: 34px; display: grid; place-items: center; flex: none; margin-inline-start: auto; cursor: pointer; color: #e8e6df;
  background: linear-gradient(180deg, #262a35, #12141a); border: 1px solid #ffffff26; box-shadow: inset 0 1px 0 #ffffff14, 0 2px 6px #0008;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); transition: background .15s, border-color .15s, transform .1s }
.modal .dlg-close:hover, .chase-box .dlg-close:hover, .mk-modal .mks-x:hover { background: linear-gradient(180deg, #b7101a, #5a070c); border-color: #ff3b4788 }
.modal .dlg-close:active, .chase-box .dlg-close:active { transform: translateY(1px) }
.modal .dlg-close svg, .chase-box .dlg-close svg { width: 16px; height: 16px }

/* أزرار أسفل النافذة: مسافة ثابتة */
.modal .row2, .mk-modal .mk-dlg-a { gap: 10px }

/* حوار التأكيد العام (fzd): نفس الشريط والمسامير بالضبط */
.fzd { padding-top: 22px }
.fzd::before { height: 5px; background: repeating-linear-gradient(-45deg, var(--fz-haz) 0 9px, #0a0b0f 9px 18px) }
.fzd-rv { width: 6px; height: 6px }
.fzd-rv.a, .fzd-rv.b { top: 13px }

/* الجوال بالعرض: نوافذ أقصر مع تمرير داخلي، وما تلمس الحواف */
@media (orientation: landscape) and (max-height: 500px) {
  .modal, .mk-modal, .fzd-back { padding: 8px 12px }
  .modal > .panel, .modal > .dlg, .mk-modal > .mk-dlg { max-height: calc(100dvh - 16px) !important; overflow: auto; overscroll-behavior: contain }
  .modal .dlg-h { padding-bottom: 7px }
}
@media (prefers-reduced-motion: reduce) { .modal, .mk-modal, .modal > .panel, .modal > .dlg, .mk-modal > .mk-dlg { animation: none !important } }

/* =====================================================================
   جولة 58 — نفس الإطار على كل الصفحات واللوحات، بلا استثناء:
   الإعدادات · البروفايل · كيف تلعب · عن اللعبة · التذكير · المتجر · الباتل باس · الأكواد · الغرف · الغرفة ·
   نهاية المباراة · التخصيص · الدخول · قصة الشخصية · قطعة القطار · نهاية الحصار · كلام الملجأ.
   الشريط هنا «حد علوي» (border-image) مو خلفية — عشان لو الصفحة تتمرّر ما يغطيه المحتوى.
   ===================================================================== */
.screen > .panel.page, .panel.login-box, .tri-box, .lore-dlg .lore-box, .td-endbox, .vn-box {
  --fz-ro: 6px;
  background:
    var(--fz-rv) var(--fz-ro) var(--fz-ro) / 12px 12px no-repeat,
    var(--fz-rv) calc(100% - var(--fz-ro)) var(--fz-ro) / 12px 12px no-repeat,
    var(--fz-rv) var(--fz-ro) calc(100% - var(--fz-ro)) / 12px 12px no-repeat,
    var(--fz-rv) calc(100% - var(--fz-ro)) calc(100% - var(--fz-ro)) / 12px 12px no-repeat,
    linear-gradient(180deg, #ffffff0a, transparent 120px) 0 0 / 100% 120px no-repeat,
    var(--fz-metal) !important;
  background-attachment: scroll !important;
  border-style: solid !important; border-width: 5px 0 0 !important; border-radius: 0 !important;
  border-image: repeating-linear-gradient(-45deg, var(--fz-haz) 0 9px, #0a0b0f 9px 18px) 5 0 0 0 / 5px 0 0 0 !important;
  box-shadow: inset 1px 0 0 #ffffff1f, inset -1px 0 0 #ffffff1f, inset 0 -1px 0 #ffffff1f, 0 26px 70px #000d, 0 0 0 1px #000a;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.td-end.win .td-endbox { box-shadow: inset 0 -2px 0 var(--tdh), 0 0 50px #9be15d33 } .td-end.lose .td-endbox { box-shadow: inset 0 -2px 0 var(--tdr), 0 0 50px #ff5b5733 }
/* الزخارف القديمة (خط اللون بأعلى اللوحة) تتعارض مع الشريط */
.screen > .panel.page::after, .panel.login-box::after, .lore-dlg .lore-box::before, .vn-box::before { display: none }
/* النوافذ الصغيرة (قطعة القطار ووحدة الحصار): شريط أنحف ومسامير أصغر */
.tr-pop, .td-pop {
  border-top: 3px solid transparent !important;
  border-image: repeating-linear-gradient(-45deg, var(--fz-haz) 0 6px, #0a0b0f 6px 12px) 3 0 0 0 / 3px 0 0 0 !important;
  box-shadow: inset 1px 0 0 #ffd16644, inset -1px 0 0 #ffd16644, inset 0 -1px 0 #ffd16644, 0 12px 30px #000c !important;
}
@media (orientation: landscape) and (max-height: 500px) {
  .screen > .panel.page, .panel.login-box { --fz-ro: 3px }
  /* رأس الصفحة الثابت يحمل المسامير الفوقية معه وقت التمرير */
  .page > .page-h { background:
      var(--fz-rv) 3px 3px / 12px 12px no-repeat, var(--fz-rv) calc(100% - 3px) 3px / 12px 12px no-repeat,
      linear-gradient(180deg, #1c2029 0%, #1b1f28f2 80%, #1b1f2800 100%) !important }
}