/* =====================================================================
   جولة 57 — شاشة البداية (Splash): صورة الموسم + عنوان + شريط تقدّم + نصائح — كلها من المحرك
   ===================================================================== */
.boot.spl { --spl-c: #c8141f; --spl-dim: .45; z-index: 300; display: block; background: #050608; overflow: hidden; color: #e8e6df; transition: opacity .42s ease, visibility 0s linear .42s;
  container-type: size; container-name: spl }   /* جولة 58: الأحجام نسبةً للشاشة نفسها (cq) — عشان معاينة المحرك تطابق اللعبة */
.boot.spl.spl-cover:not(.spl-out) { transition: opacity .2s ease }
.boot.spl.spl-out { opacity: 0; visibility: hidden; pointer-events: none }
.boot.spl.gone { display: none }
body.booted .boot.spl:not(.spl-out) { opacity: 1; pointer-events: auto }
.spl-bg { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--spl-c) 24%, #0a0b10), #050608 70%) }
.spl-img { position: absolute; inset: -3%; background: center / cover no-repeat; opacity: 0; transition: opacity .7s ease }
.spl-img.on { opacity: 1 }
.spl-img::after { content: ''; position: absolute; inset: 0; background: rgba(5, 6, 8, var(--spl-dim)) }
.boot.spl[data-fx="zoom"] .spl-img { animation: splZoom 18s ease-in-out infinite alternate }
@keyframes splZoom { from { transform: scale(1) translate(0, 0) } to { transform: scale(1.09) translate(-1.5%, -1%) } }
.spl-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 35%, #000000d0 100%), linear-gradient(transparent 55%, #050608f0 100%) }
.spl-haz { position: absolute; inset: 0 0 auto; height: 6px; background: repeating-linear-gradient(-45deg, var(--spl-c) 0 10px, #0a0b0f 10px 20px); opacity: .95 }
/* المؤثرات */
.spl-fx { position: absolute; inset: 0; pointer-events: none; display: none }
.boot.spl[data-fx="embers"] .spl-fx, .boot.spl[data-fx="scan"] .spl-fx, .boot.spl[data-fx="flicker"] .spl-fx { display: block }
.boot.spl[data-fx="embers"] .spl-fx i { position: absolute; bottom: -10px; width: 4px; height: 4px; background: #ffb066; box-shadow: 0 0 8px #ff7a2a; border-radius: 50%; animation: splEmber 6s linear infinite; opacity: 0 }
.boot.spl[data-fx="embers"] .spl-fx i:nth-child(1) { left: 12% } .boot.spl[data-fx="embers"] .spl-fx i:nth-child(2) { left: 26%; animation-delay: 1.2s } .boot.spl[data-fx="embers"] .spl-fx i:nth-child(3) { left: 41%; animation-delay: 2.6s }
.boot.spl[data-fx="embers"] .spl-fx i:nth-child(4) { left: 55%; animation-delay: .6s } .boot.spl[data-fx="embers"] .spl-fx i:nth-child(5) { left: 68%; animation-delay: 3.4s } .boot.spl[data-fx="embers"] .spl-fx i:nth-child(6) { left: 79%; animation-delay: 1.9s }
.boot.spl[data-fx="embers"] .spl-fx i:nth-child(7) { left: 88%; animation-delay: 4.2s } .boot.spl[data-fx="embers"] .spl-fx i:nth-child(8) { left: 34%; animation-delay: 5s }
@keyframes splEmber { 0% { transform: translate(0, 0); opacity: 0 } 10% { opacity: 1 } 100% { transform: translate(30px, -110vh); transform: translate(30px, -110cqh); opacity: 0 } }
.boot.spl[data-fx="scan"] .spl-fx { background: repeating-linear-gradient(0deg, #ffffff07 0 1px, transparent 1px 3px) }
.boot.spl[data-fx="scan"] .spl-fx::after { content: ''; position: absolute; inset-inline: 0; height: 18%; background: linear-gradient(transparent, #ffffff10, transparent); animation: splScan 4s linear infinite }
@keyframes splScan { from { top: -20% } to { top: 110% } }
.boot.spl[data-fx="flicker"] .spl-fx { background: #000; animation: splFlick 5s steps(1) infinite }
@keyframes splFlick { 0%, 100% { opacity: 0 } 41% { opacity: .55 } 42% { opacity: 0 } 44% { opacity: .35 } 45% { opacity: 0 } 77% { opacity: .2 } 78% { opacity: 0 } }

/* المحتوى */
.spl-in { position: absolute; inset-inline: 0; bottom: max(9vh, calc(24px + env(safe-area-inset-bottom))); bottom: max(9cqh, calc(24px + env(safe-area-inset-bottom))); margin: 0 auto; width: min(560px, calc(100% - 40px)); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; animation: splIn .6s ease both }
@keyframes splIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
.spl-logo { max-width: min(300px, 60vw); max-height: 26vh; max-width: min(300px, 60cqw); max-height: 26cqh; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 6px 22px #000c) drop-shadow(0 0 18px color-mix(in srgb, var(--spl-c) 40%, transparent)) }
.spl-t { margin: 0; font-size: clamp(1.5rem, 4.2vw, 2.4rem); font-size: clamp(1.5rem, 4.2cqw, 2.4rem); font-weight: 900; letter-spacing: .3px; color: #fff; text-shadow: 0 3px 14px #000, 0 0 26px color-mix(in srgb, var(--spl-c) 55%, transparent) }
.spl-logo:not([hidden]) + .spl-t { font-size: clamp(1.05rem, 2.6vw, 1.35rem); font-size: clamp(1.05rem, 2.6cqw, 1.35rem); opacity: .9 }
.spl-s { margin: -4px 0 4px; font-size: .9rem; opacity: .75; text-shadow: 0 2px 6px #000 }
.spl-bar { position: relative; width: 100%; height: 14px; margin-top: 6px; background: #0a0b10d9; border: 1px solid #ffffff22; box-shadow: inset 0 2px 6px #000c, 0 0 0 1px #000a;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%) }
.spl-fill { position: absolute; inset: 2px; transform-origin: right center; transform: scaleX(0); background: linear-gradient(90deg, color-mix(in srgb, var(--spl-c) 70%, #000), var(--spl-c) 60%, color-mix(in srgb, var(--spl-c) 60%, #fff)); box-shadow: 0 0 14px var(--spl-c) }
html[dir="ltr"] .spl-fill { transform-origin: left center }
.spl-blk { position: absolute; inset: 2px 3px; display: none; gap: 2px }
.spl-blk i { flex: 1; background: #ffffff0d; transition: background .12s, box-shadow .12s }
.spl-blk i.on { background: var(--spl-c); box-shadow: 0 0 8px var(--spl-c) }
.boot.spl[data-bar="blocks"] .spl-blk { display: flex } .boot.spl[data-bar="blocks"] .spl-fill { display: none }
.boot.spl[data-bar="line"] .spl-bar { height: 5px; clip-path: none; border: 0; background: #ffffff14 } .boot.spl[data-bar="line"] .spl-fill { inset: 0 }
.boot.spl[data-bar="blood"] .spl-bar { height: 12px; overflow: visible; clip-path: none; border-radius: 3px }
.boot.spl[data-bar="blood"] .spl-fill { background: linear-gradient(180deg, #ff2a36, #7a0610); border-radius: 2px }
.boot.spl[data-bar="blood"] .spl-fill::after { content: ''; position: absolute; left: 0; bottom: -7px; width: 6px; height: 9px; background: #a30a14; border-radius: 0 0 50% 50%; animation: splDrip 1.6s ease-in infinite }
@keyframes splDrip { 0% { transform: translateY(-6px) scaleY(.4); opacity: 1 } 80% { transform: translateY(6px) scaleY(1.2); opacity: 1 } 100% { transform: translateY(12px); opacity: 0 } }
.boot.spl[data-bar="scan"] .spl-fill { background: repeating-linear-gradient(-45deg, var(--spl-c) 0 10px, #0a0b0f 10px 20px); background-size: 28px 28px; animation: splStripes .8s linear infinite }
@keyframes splStripes { to { background-position: 28px 0 } }
.spl-row { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .82rem }
.spl-lbl { opacity: .8 } .spl-pct { font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--spl-c) 50%, #fff); font-family: ui-monospace, Menlo, Consolas, monospace }
.spl-tip { min-height: 2.6em; margin: 0; font-size: .86rem; line-height: 1.6; opacity: 0; color: #d9d4cc; max-width: 46ch; text-align: start; display: flex; align-items: center }
.spl-tip.in { animation: splTip 3.2s ease both }
@keyframes splTip { 0% { opacity: 0; transform: translateY(4px) } 12%, 85% { opacity: .85; transform: none } 100% { opacity: 0 } }

/* بدون شاشة بداية (مطفية من المحرك): دائرة تحميل بسيطة بس */
.boot.spl.spl-off .spl-bg .spl-img, .boot.spl.spl-off .spl-fx, .boot.spl.spl-off .spl-logo, .boot.spl.spl-off .spl-s, .boot.spl.spl-off .spl-tip, .boot.spl.spl-off .spl-haz { display: none }
.boot.spl.spl-off .spl-tiprow { justify-content: center }
.boot.spl.spl-off .spl-in { top: 50%; bottom: auto; transform: translateY(-50%); width: min(320px, 80%) }
/* الجوال بالعرض: كل شي أصغر عشان يتسع */
@container spl (orientation: landscape) and (max-height: 500px) {
  .spl-in { bottom: max(14px, calc(10px + env(safe-area-inset-bottom))); gap: 6px; width: min(480px, calc(100% - 40px)) }
  .spl-logo { max-height: 30cqh } .spl-t { font-size: 1.35rem } .spl-s { font-size: .78rem } .spl-bar { height: 11px } .spl-row { font-size: .72rem } .spl-tip { font-size: .76rem; min-height: 2.4em }
  .spl-spin { width: 30px; height: 30px } .spl-ic { width: 14px; height: 14px }
}
@media (prefers-reduced-motion: reduce) { .boot.spl * { animation: none !important } }

/* ===== جولة 58: صف النصائح — مربع يدور بلا توقف وبوسطه أيقونة (من المحرك) ===== */
.spl-tiprow { width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 4px; min-height: 40px }
.spl-spin { position: relative; flex: none; width: 36px; height: 36px; display: grid; place-items: center; color: var(--spl-c) }
.spl-sq { position: absolute; inset: 0; pointer-events: none }
/* المربع الخارجي: أربع زوايا (مثل علامة تصويب) تدور */
.spl-sq.a { --l: 9px; --w: 2px;
  background:
    linear-gradient(var(--spl-c), var(--spl-c)) 0 0 / var(--l) var(--w) no-repeat, linear-gradient(var(--spl-c), var(--spl-c)) 0 0 / var(--w) var(--l) no-repeat,
    linear-gradient(var(--spl-c), var(--spl-c)) 100% 0 / var(--l) var(--w) no-repeat, linear-gradient(var(--spl-c), var(--spl-c)) 100% 0 / var(--w) var(--l) no-repeat,
    linear-gradient(var(--spl-c), var(--spl-c)) 0 100% / var(--l) var(--w) no-repeat, linear-gradient(var(--spl-c), var(--spl-c)) 0 100% / var(--w) var(--l) no-repeat,
    linear-gradient(var(--spl-c), var(--spl-c)) 100% 100% / var(--l) var(--w) no-repeat, linear-gradient(var(--spl-c), var(--spl-c)) 100% 100% / var(--w) var(--l) no-repeat;
  filter: drop-shadow(0 0 4px var(--spl-c)); animation: splSpinA 2.4s cubic-bezier(.6, 0, .4, 1) infinite }
/* المربع الداخلي: معيّن رفيع يدور بالعكس */
.spl-sq.b { inset: 7px; border: 1px solid color-mix(in srgb, var(--spl-c) 55%, transparent); background: color-mix(in srgb, var(--spl-c) 10%, #000a); transform: rotate(45deg); animation: splSpinB 3.6s linear infinite }
@keyframes splSpinA { 0% { transform: rotate(0) scale(1) } 50% { transform: rotate(180deg) scale(.86) } 100% { transform: rotate(360deg) scale(1) } }
@keyframes splSpinB { from { transform: rotate(45deg) } to { transform: rotate(-315deg) } }
.spl-ic { position: relative; width: 16px; height: 16px; display: grid; place-items: center; color: color-mix(in srgb, var(--spl-c) 45%, #fff); filter: drop-shadow(0 0 5px var(--spl-c)); animation: splIcP 1.2s ease-in-out infinite }
.spl-ic svg, .spl-ic img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated }
@keyframes splIcP { 0%, 100% { opacity: .75; transform: scale(.94) } 50% { opacity: 1; transform: scale(1.06) } }
.boot.spl.spl-nospin .spl-spin { display: none }
.boot.spl.spl-notip .spl-tip { display: none }
.boot.spl.spl-notip.spl-nospin .spl-tiprow { display: none }