/* ============================================================
   نافذة المباراة المنبثقة — الخطوة 2
   ملفّ مستقلّ تمامًا: لا قاعدة واحدة هنا تمسّ تنسيقًا قائمًا.
   كلّ الأصناف تبدأ بـ dlhmm- إلا قفل التمرير على <html>.
   ============================================================ */

/* قفل تمرير الصفحة خلف النافذة.
   والحشو يُضبط من الجافاسكربت بعرض شريط التمرير نفسه، فلا تقفز
   الصفحة جانبًا لحظة الفتح على الحاسب. */
html.dlhmm-lock {
	overflow: hidden;
}

/* ————— الغلاف: ملء الشاشة، عمودان: شريط ثابت ثمّ محتوى يُمرَّر ————— */
.dlhmm {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	background: #0E1016;
	background-image: radial-gradient(1100px 480px at 50% -12%, rgba(244, 183, 64, .06), transparent 62%);
}

.dlhmm[hidden] {
	display: none !important;
}

/* ————— الشريط العلوي ————— */
.dlhmm-bar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 56px;
	padding: 0 8px;
	background: rgb(21 26 32 / 98%);
	border-bottom: 1px solid #262E3A;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

.dlhmm-back {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: #8B95A1;
	cursor: pointer;
	padding: 0;
	line-height: 0;
	border-radius: 8px;
	font-family: inherit;
	transition: background .15s, color .15s;
}

@media (hover: hover) and (pointer: fine) {
	.dlhmm-back:hover {
		background: rgba(244, 183, 64, .08);
		color: #F4B740;
	}
}

/* اتّجاه الشيفرون من اتّجاه الصفحة لا من الكود — كما في هيدر الجدول */
[dir="rtl"] .dlhmm-back svg {
	transform: scaleX(-1);
}

.dlhmm-title {
	flex: 1 1 auto;
	min-width: 0;
	color: #C7CBD6;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-inline-end: 6px;
}

/* ————— منطقة التمرير ————— */
.dlhmm-scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* المحتوى نفسه يُلَفّ بـ hp-wrap و hp-main، فيرث تنسيق الصفحة كما هو */

/* ————— حالة التحميل ————— */
.dlhmm-load {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 80px 20px;
}

.dlhmm-spin {
	width: 34px;
	height: 34px;
	border: 3px solid rgba(244, 183, 64, .18);
	border-top-color: #F4B740;
	border-radius: 50%;
	animation: dlhmm-rot .8s linear infinite;
}

@keyframes dlhmm-rot {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dlhmm-spin {
		animation-duration: 2.4s;
	}
}

/* ————— حالة الخطأ ————— */
.dlhmm-err {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 70px 20px;
	color: #8B95A1;
	font-size: 15px;
	text-align: center;
}

.dlhmm-retry {
	background: rgba(244, 183, 64, .12);
	border: 1px solid rgba(244, 183, 64, .35);
	color: #F4B740;
	padding: 8px 22px;
	border-radius: 8px;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
	.dlhmm-retry:hover {
		background: rgba(244, 183, 64, .2);
	}
}

/* ————— نقاط الكسر: الشريط يتبع ارتفاع هيدر الجدول ————— */
@media (max-width: 768px) {
	.dlhmm-bar {
		min-height: 54px;
	}

	.dlhmm-title {
		font-size: 14.5px;
	}
}

@media (max-width: 600px) {
	.dlhmm-bar {
		min-height: 51px;
	}

	.dlhmm-title {
		font-size: 14px;
	}
}

@media (max-width: 360px) {
	.dlhmm-bar {
		min-height: 49px;
	}

	.dlhmm-back {
		width: 40px;
		height: 40px;
	}

	.dlhmm-title {
		font-size: 13.5px;
	}
}

/* ============================================================
   الوضع الفاتح — الصنف dlh-light على <html>
   ============================================================ */
.dlh-light .dlhmm {
	background: #F3F5F8;
	background-image: none;
}

.dlh-light .dlhmm-bar {
	background: #FFFFFF;
	border-bottom-color: #CED4DA;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.dlh-light .dlhmm-back {
	color: #4A4F5C;
}

@media (hover: hover) and (pointer: fine) {
	.dlh-light .dlhmm-back:hover {
		background: rgba(34, 34, 34, .06);
		color: #222;
	}
}

.dlh-light .dlhmm-title {
	color: #2C2E32;
}

.dlh-light .dlhmm-spin {
	border-color: rgba(34, 34, 34, .15);
	border-top-color: #222;
}

.dlh-light .dlhmm-err {
	color: #5A5F6B;
}

.dlh-light .dlhmm-retry {
	background: rgba(34, 34, 34, .06);
	border-color: #CED4DA;
	color: #222;
}