/* ═══════════════════════════════════════════
   GameHub — skins.css
   أربعة أشكال قابلة للتبديل من لوحة التحكم:
   neon · sunny · ember · cobalt
   كل شكل يعيد تعريف متغيرات :root ويعدّل بعض التفاصيل البنيوية.
   ═══════════════════════════════════════════ */

/* ─────────────────────────────────────────
   ١) SUNNY — فاتح ومرح (أسلوب Poki)
   ───────────────────────────────────────── */
body.skin-sunny {
	--bg: #f4f5fb;
	--bg-2: #ffffff;
	--purple: #7b3ff2;
	--cyan: #ff5c8a;
	--text: #16162a;
	--text-dim: #6b6b85;
	--glass: #ffffff;
	--glass-border: #e4e4f2;
	--radius: 20px;
	--grad: linear-gradient(90deg, #7b3ff2, #ff5c8a);
	--shadow-neon: 0 6px 20px rgba(123, 63, 242, .18);
}
body.skin-sunny .site-glow { display: none; }
body.skin-sunny .site-header { background: rgba(255, 255, 255, .92); border-bottom-color: #e8e8f4; }
body.skin-sunny .header-search input { background: #f1f1f9; color: #16162a; }
body.skin-sunny .header-search input::placeholder { color: #9a9ab5; }
body.skin-sunny .game-card { box-shadow: 0 3px 12px rgba(20, 20, 50, .07); }
body.skin-sunny .game-card:hover { box-shadow: 0 12px 28px rgba(123, 63, 242, .22); border-color: #d6c6ff; }
body.skin-sunny .game-card-thumb { background: #eeeef7; }
body.skin-sunny .game-card-badge { background: rgba(255, 255, 255, .92); color: #7b3ff2; border-color: #e4e4f2; }
body.skin-sunny .cat-chip { background: #fff; color: #55556e; box-shadow: 0 2px 6px rgba(20, 20, 50, .06); }
body.skin-sunny .cat-chip.is-active { color: #fff; }
body.skin-sunny .lang-dialog { background: #fff; border-color: #e0e0f0; }
body.skin-sunny .lang-item:hover { background: #f4f4fc; }
body.skin-sunny .lang-item.is-active { background: #f0e9ff; color: #4d19b8; }
body.skin-sunny .site-footer { background: #ffffff; border-top-color: #e8e8f4; }
body.skin-sunny .player-zone { box-shadow: 0 10px 34px rgba(20, 20, 50, .16); }
body.skin-sunny .player-toolbar { background: #f7f7fd; border-top-color: #e8e8f4; }
body.skin-sunny .tool-btn { background: #fff; box-shadow: 0 2px 5px rgba(20, 20, 50, .07); }
body.skin-sunny .glass-panel { box-shadow: 0 3px 14px rgba(20, 20, 50, .06); }
body.skin-sunny .form-row input, body.skin-sunny .form-row textarea { background: #f7f7fd; color: #16162a; }
body.skin-sunny .girls-section { background: linear-gradient(135deg, #fff1f7, #f6f0ff); border-color: #ffd3e6; }
body.skin-sunny .girls-type { background: #fff; }

/* ─────────────────────────────────────────
   ٢) EMBER — رمادي وبرتقالي (أسلوب Kongregate)
   ───────────────────────────────────────── */
body.skin-ember {
	--bg: #1b1b1f;
	--bg-2: #232329;
	--purple: #ff6a1f;
	--cyan: #ffb27a;
	--text: #ececef;
	--text-dim: #9d9da8;
	--glass: rgba(255, 255, 255, .045);
	--glass-border: rgba(255, 255, 255, .09);
	--radius: 6px;
	--grad: linear-gradient(90deg, #ff6a1f, #ff9d4d);
	--shadow-neon: 0 0 0 1px rgba(255, 106, 31, .35);
}
body.skin-ember .site-glow { display: none; }
body.skin-ember .site-header { background: #17171b; border-bottom: 2px solid #ff6a1f; }
body.skin-ember .header-search input { border-radius: 4px; background: #101013; }
body.skin-ember .cat-chip { border-radius: 4px; background: #26262c; }
body.skin-ember .games-grid { grid-template-columns: repeat(6, 1fr); gap: 10px; }
body.skin-ember .game-card { border-radius: 6px; background: #232329; backdrop-filter: none; }
body.skin-ember .game-card:hover { transform: none; border-color: #ff6a1f; box-shadow: 0 0 0 2px rgba(255, 106, 31, .5); }
body.skin-ember .game-card-body { padding: 9px 10px 11px; }
body.skin-ember .game-card-body h3 { font-size: 13.5px; }
body.skin-ember .game-card-badge { border-radius: 3px; color: #ffb27a; }
body.skin-ember .btn, body.skin-ember .tool-btn, body.skin-ember .lang-btn { border-radius: 4px; }
body.skin-ember .lang-dialog { border-radius: 6px; border-color: rgba(255, 106, 31, .5); background: #232329; }
body.skin-ember .lang-item { border-radius: 4px; }
body.skin-ember .lang-item.is-active { background: rgba(255, 106, 31, .18); border-color: #ff6a1f; }
body.skin-ember .glass-panel, body.skin-ember .girls-section { border-radius: 6px; backdrop-filter: none; }
body.skin-ember .player-zone { border-radius: 6px; }
body.skin-ember .girls-section { border-color: rgba(255, 106, 31, .3); background: rgba(255, 255, 255, .04); }
body.skin-ember .girls-type { border-radius: 5px; }
@media (max-width: 1024px) { body.skin-ember .games-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px)  { body.skin-ember .games-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px)  { body.skin-ember .games-grid { grid-template-columns: repeat(2, 1fr); } }

/* ─────────────────────────────────────────
   ٣) COBALT — أزرق بحري (أسلوب CrazyGames)
   ───────────────────────────────────────── */
body.skin-cobalt {
	--bg: #0d1424;
	--bg-2: #131d33;
	--purple: #2f7bff;
	--cyan: #41d6c3;
	--text: #e8eefc;
	--text-dim: #8b9ec4;
	--glass: rgba(255, 255, 255, .055);
	--glass-border: rgba(120, 160, 230, .18);
	--radius: 12px;
	--grad: linear-gradient(90deg, #2f7bff, #41d6c3);
	--shadow-neon: 0 8px 24px rgba(47, 123, 255, .3);
}
body.skin-cobalt .site-glow {
	background:
		radial-gradient(620px 420px at 82% -8%, rgba(47, 123, 255, .22), transparent 62%),
		radial-gradient(700px 500px at 8% 108%, rgba(65, 214, 195, .12), transparent 62%);
}
body.skin-cobalt .site-header { background: rgba(13, 20, 36, .9); }
body.skin-cobalt .header-search input { background: rgba(255, 255, 255, .07); border-radius: 10px; }
body.skin-cobalt .cat-chip { border-radius: 9px; }
body.skin-cobalt .game-card { background: #131d33; border-color: rgba(120, 160, 230, .16); }
body.skin-cobalt .game-card:hover { transform: translateY(-4px); border-color: #2f7bff; box-shadow: 0 12px 26px rgba(47, 123, 255, .32); }
body.skin-cobalt .game-card-badge { color: #41d6c3; }
body.skin-cobalt .site-footer { background: #0a1020; }
body.skin-cobalt .lang-dialog { background: linear-gradient(160deg, #17233d, #0e1526); border-color: rgba(47, 123, 255, .45); }
body.skin-cobalt .girls-section { border-color: rgba(65, 214, 195, .25); }

/* ─────────────────────────────────────────
   مناطق الإعلانات
   ───────────────────────────────────────── */
.ad-zone {
	margin: 18px 0;
	text-align: center;
	border-radius: var(--radius);
	border: 1px dashed var(--glass-border);
	padding: 10px;
	overflow: hidden;
}
.ad-zone .ad-label {
	display: block;
	font-size: 9.5px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--text-dim);
	margin-bottom: 6px;
	opacity: .65;
}
.ad-zone .ad-body { min-height: 50px; display: flex; align-items: center; justify-content: center; }
.ad-header { margin-top: 14px; }
.ad-sidebar { margin: 0; position: sticky; top: 140px; }
.ad-grid_inline { grid-column: 1 / -1; margin: 4px 0; }
.ad-zone :is(ins, iframe, img) { max-width: 100%; }

/* ─────────────────────────────────────────
   أزرار السوشيال ميديا العائمة
   ───────────────────────────────────────── */
.social-dock {
	position: fixed;
	bottom: 18px;
	z-index: 90;
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 9px;
}
.social-end   { inset-inline-end: 18px; }
.social-start { inset-inline-start: 18px; }

.social-toggle {
	width: 46px; height: 46px;
	border-radius: 50%;
	border: 1px solid var(--glass-border);
	background: var(--grad);
	color: #fff;
	font-size: 22px; line-height: 1;
	display: grid; place-items: center;
	box-shadow: var(--shadow-neon);
	transition: transform .25s;
}
.social-dock.open .social-toggle { transform: rotate(45deg); }

.social-list {
	display: flex;
	flex-direction: column;
	gap: 9px;
	opacity: 0;
	pointer-events: none;
	transform: translateY(10px) scale(.85);
	transition: all .25s cubic-bezier(.34, 1.4, .5, 1);
}
.social-dock.open .social-list { opacity: 1; pointer-events: auto; transform: none; }

.social-link {
	width: 40px; height: 40px;
	border-radius: 50%;
	display: grid; place-items: center;
	background: var(--glass);
	border: 1px solid var(--glass-border);
	color: var(--text);
	backdrop-filter: blur(10px);
	transition: all .18s;
}
.social-link:hover {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
	transform: scale(1.12);
}

@media (max-width: 768px) {
	.social-dock { bottom: 14px; }
	.social-end { inset-inline-end: 12px; }
	.social-start { inset-inline-start: 12px; }
	.social-toggle { width: 42px; height: 42px; font-size: 20px; }
	.social-link { width: 37px; height: 37px; }
}

/* ─────────────────────────────────────────
   أزرار المشغّل الجديدة: الصوت وإغلاق اللعبة
   ───────────────────────────────────────── */
.tool-btn.is-muted { color: #f87171; border-color: rgba(248, 113, 113, .5); }
.tool-btn-danger:hover { border-color: #f87171; box-shadow: 0 0 12px rgba(248, 113, 113, .3); }

.player-closed {
	position: absolute; inset: 0;
	display: none;
	place-items: center;
	background: rgba(6, 6, 14, .93);
	text-align: center;
	padding: 24px;
	z-index: 6;
}
.player-shell.closed .player-closed { display: grid; }
.player-closed h3 { font-size: 18px; margin-bottom: 6px; }
.player-closed p { color: var(--text-dim); font-size: 13.5px; margin-bottom: 16px; }