/* ============ منصة الألعاب التعليمية - تصميم جذاب للأطفال ============ */

.kgp-wrapper {
	direction: rtl;
	font-family: 'Tahoma', 'Segoe UI', sans-serif;
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px;
}

/* ------- شريط التصنيفات ------- */
.kgp-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-bottom: 25px;
}

.kgp-filter-btn {
	background: #fff;
	border: 3px solid #ffd166;
	color: #444;
	padding: 8px 18px;
	border-radius: 50px;
	font-weight: bold;
	cursor: pointer;
	font-size: 15px;
	transition: all .2s ease;
}

.kgp-filter-btn:hover {
	transform: translateY(-2px) scale(1.05);
	background: #ffe8a3;
}

.kgp-filter-btn.active {
	background: linear-gradient(135deg, #ff9a3c, #ff6b6b);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 4px 10px rgba(255,107,107,.4);
}

/* ------- شبكة الألعاب ------- */
.kgp-games-grid, .kgp-rewards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 22px;
}

.kgp-game-card, .kgp-reward-card {
	background: #fff;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(0,0,0,.08);
	transition: transform .25s ease, box-shadow .25s ease;
	border: 4px solid transparent;
	position: relative;
	animation: kgp-pop-in .4s ease;
}

@keyframes kgp-pop-in {
	from { opacity: 0; transform: scale(.85); }
	to   { opacity: 1; transform: scale(1); }
}

.kgp-game-card:hover, .kgp-reward-card:hover {
	transform: translateY(-8px) rotate(-1deg);
	box-shadow: 0 14px 28px rgba(0,0,0,.15);
	border-color: #ffd166;
}

.kgp-card-thumb {
	position: relative;
	height: 150px;
	background: linear-gradient(135deg, #a8e6cf, #dcedc1);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.kgp-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kgp-thumb-placeholder {
	font-size: 60px;
}

.kgp-points-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: #fff;
	padding: 4px 10px;
	border-radius: 50px;
	font-weight: bold;
	font-size: 13px;
	box-shadow: 0 3px 8px rgba(0,0,0,.15);
	color: #ff9a00;
}

.kgp-card-body {
	padding: 16px;
	text-align: center;
}

.kgp-card-title {
	margin: 0 0 8px;
	font-size: 18px;
	color: #2d2d2d;
}

.kgp-card-desc {
	font-size: 13px;
	color: #777;
	margin-bottom: 12px;
	min-height: 32px;
}

.kgp-play-btn, .kgp-redeem-btn {
	background: linear-gradient(135deg, #56ccf2, #2f80ed);
	color: #fff;
	border: none;
	padding: 10px 22px;
	border-radius: 50px;
	font-weight: bold;
	font-size: 14px;
	cursor: pointer;
	transition: transform .2s ease;
	width: 100%;
}

.kgp-redeem-btn {
	background: linear-gradient(135deg, #ff9a3c, #ff6b6b);
}

.kgp-play-btn:hover, .kgp-redeem-btn:hover {
	transform: scale(1.04);
}

.kgp-redeem-btn:disabled {
	background: #ccc;
	cursor: not-allowed;
	transform: none;
}

.kgp-reward-cost {
	font-weight: bold;
	color: #ff6b6b;
	margin-bottom: 10px;
}

.kgp-empty {
	grid-column: 1 / -1;
	text-align: center;
	color: #999;
	font-size: 16px;
	padding: 30px;
}

/* ------- صندوق النقط ------- */
.kgp-points-box {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: linear-gradient(135deg, #fff6d5, #ffe8a3);
	border: 3px solid #ffd166;
	padding: 10px 20px;
	border-radius: 50px;
	font-weight: bold;
	font-size: 17px;
	direction: rtl;
}

.kgp-points-icon { font-size: 22px; animation: kgp-spin 3s linear infinite; }

@keyframes kgp-spin {
	0%, 90%, 100% { transform: rotate(0deg); }
	95% { transform: rotate(20deg); }
}

.kgp-points-value {
	color: #ff6b6b;
	font-size: 20px;
	transition: transform .2s ease;
}

.kgp-points-value.kgp-bump {
	animation: kgp-bump .4s ease;
}

@keyframes kgp-bump {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.4); color: #2ecc71; }
	100% { transform: scale(1); }
}

.kgp-points-box.kgp-guest {
	color: #777;
	font-size: 14px;
}

/* ------- نافذة تشغيل اللعبة (Modal) ------- */
.kgp-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.6);
	z-index: 99999;
	align-items: center;
	justify-content: center;
}

.kgp-modal-overlay.kgp-open {
	display: flex;
}

.kgp-modal-box {
	background: #fff;
	width: min(95vw, 900px);
	height: min(85vh, 650px);
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 20px 50px rgba(0,0,0,.3);
	animation: kgp-pop-in .3s ease;
}

.kgp-modal-header {
	background: linear-gradient(135deg, #ff9a3c, #ff6b6b);
	color: #fff;
	padding: 12px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	direction: rtl;
}

.kgp-modal-title {
	font-weight: bold;
	font-size: 18px;
}

.kgp-modal-close {
	background: rgba(255,255,255,.25);
	border: none;
	color: #fff;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 16px;
}

.kgp-modal-close:hover { background: rgba(255,255,255,.45); }

.kgp-modal-body {
	flex: 1;
	background: #f4f4f4;
}

.kgp-modal-footer {
	background: #fff;
	padding: 12px;
	text-align: center;
	border-top: 2px solid #f0f0f0;
}

/* ------- حالة العدّاد التلقائي (بدل زرار/نموذج إدخال يدوي) ------- */
.kgp-auto-status {
	margin: 0;
	text-align: center;
	font-weight: bold;
	font-size: 14px;
	color: #555;
}

.kgp-game-iframe {
	width: 100%;
	height: 100%;
	border: none;
}

/* ------- تنبيه صغير عند كسب نقط ------- */
.kgp-toast {
	position: fixed;
	bottom: 25px;
	left: 50%;
	transform: translateX(-50%) translateY(30px);
	background: linear-gradient(135deg, #56ccf2, #2f80ed);
	color: #fff;
	padding: 14px 26px;
	border-radius: 50px;
	font-weight: bold;
	box-shadow: 0 10px 25px rgba(0,0,0,.2);
	z-index: 999999;
	opacity: 0;
	transition: all .35s ease;
	direction: rtl;
}

.kgp-toast.kgp-show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ------- إشعار احتفالي بعد كسب النقط ------- */
.kgp-celebration {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(.7);
	background: linear-gradient(135deg, #fff6d5, #ffe8a3);
	border: 4px solid #ffd166;
	border-radius: 24px;
	padding: 24px 40px;
	text-align: center;
	box-shadow: 0 20px 45px rgba(0,0,0,.3);
	z-index: 999999;
	opacity: 0;
	transition: all .35s cubic-bezier(.3,1.6,.4,1);
	direction: rtl;
	pointer-events: none;
}

.kgp-celebration.kgp-show {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.kgp-celebration-emoji {
	font-size: 46px;
	margin-bottom: 8px;
	animation: kgp-spin 1.5s ease-in-out infinite;
}

.kgp-celebration-text {
	font-size: 22px;
	font-weight: bold;
	color: #ff6b6b;
	margin-bottom: 6px;
}

.kgp-celebration-text span {
	font-size: 30px;
	color: #2ecc71;
}

.kgp-celebration-sub {
	font-size: 15px;
	color: #777;
	font-weight: bold;
}

.kgp-mini-confetti {
	position: fixed;
	top: -20px;
	font-size: 22px;
	animation: kgp-confetti-fall linear forwards;
	z-index: 999998;
	pointer-events: none;
}

@keyframes kgp-confetti-fall {
	to { transform: translateY(110vh) rotate(360deg); opacity: .3; }
}

@media (max-width: 600px) {
	.kgp-games-grid, .kgp-rewards-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 14px;
	}
	.kgp-card-title { font-size: 15px; }
}

/* ------- مشغل اللعبة لما تتفتح من رابطها الخاص مباشرة (خارج شبكة الألعاب) ------- */
.kgp-single-game-wrapper {
	direction: rtl;
	font-family: 'Tahoma', 'Segoe UI', sans-serif;
	max-width: 900px;
	margin: 0 auto 25px;
}

.kgp-single-game-body {
	height: 70vh;
	min-height: 420px;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
}

.kgp-single-game-wrapper .kgp-modal-footer {
	border-radius: 0 0 16px 16px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .08);
}

.kgp-single-game-wrapper .kgp-points-box.kgp-guest {
	margin-bottom: 12px;
}