/*
Theme Name: Draw Together (نقاشی با هم)
Description: قالب نقاشی زنده‌ی مشترک با ظاهر شیشه‌ای (Liquid Glass) الهام‌گرفته از iOS 26.
Version: 1.5.0
Requires at least: 5.6
Requires PHP: 7.2
Text Domain: draw-together
*/

/* ---------- توکن‌های طراحی (روشن / تیره خودکار) ---------- */
:root {
	--dt-text: #0f172a;
	--dt-text-soft: rgba(15, 23, 42, .62);
	--glass: rgba(255, 255, 255, .26);
	--glass-strong: rgba(255, 255, 255, .44);
	--glass-solid: rgba(255, 255, 255, .86);
	--glass-border: rgba(255, 255, 255, .6);
	--glass-shadow: 0 10px 40px rgba(30, 41, 99, .18);
	--btn-top: rgba(255, 255, 255, .55);
	--btn-bot: rgba(255, 255, 255, .2);
	--field: rgba(255, 255, 255, .38);
	--accent: #0a84ff;
	--accent-2: #5e5ce6;
	--bg-base: #eef2ff;
	--bg1: #a5b4fc;
	--bg2: #f9a8d4;
	--bg3: #7dd3fc;
	--radius-lg: 28px;
	--spring: cubic-bezier(.34, 1.56, .64, 1);
}
@media (prefers-color-scheme: dark) {
	:root {
		--dt-text: #f1f5f9;
		--dt-text-soft: rgba(241, 245, 249, .66);
		--glass: rgba(28, 30, 48, .36);
		--glass-strong: rgba(60, 64, 96, .46);
		--glass-solid: rgba(28, 30, 48, .92);
		--glass-border: rgba(255, 255, 255, .2);
		--glass-shadow: 0 10px 40px rgba(0, 0, 0, .5);
		--btn-top: rgba(255, 255, 255, .2);
		--btn-bot: rgba(255, 255, 255, .06);
		--field: rgba(255, 255, 255, .08);
		--bg-base: #0b0d1a;
		--bg1: #4338ca;
		--bg2: #9d174d;
		--bg3: #0e7490;
	}
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	min-height: 100vh;
	direction: rtl;
	color: var(--dt-text);
	background: var(--bg-base);
	font-family: -apple-system, BlinkMacSystemFont, "SF Arabic", "Vazirmatn", Tahoma, "Segoe UI", Arial, sans-serif;
	line-height: 1.8;
	overflow-x: hidden;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; border-radius: 16px; }

/* ---------- پس‌زمینه‌ی متحرک (حباب‌های رنگی پشت شیشه) ---------- */
.dt-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.dt-bg i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .8; will-change: transform; }
.dt-bg i:nth-child(1) { width: 56vmax; height: 56vmax; background: var(--bg1); top: -18vmax; right: -12vmax; animation: dt-f1 24s ease-in-out infinite alternate; }
.dt-bg i:nth-child(2) { width: 48vmax; height: 48vmax; background: var(--bg2); bottom: -16vmax; left: -10vmax; animation: dt-f2 28s ease-in-out infinite alternate; }
.dt-bg i:nth-child(3) { width: 38vmax; height: 38vmax; background: var(--bg3); top: 30%; left: 30%; animation: dt-f3 32s ease-in-out infinite alternate; }
@keyframes dt-f1 { to { transform: translate(-14vmax, 12vmax) scale(1.12); } }
@keyframes dt-f2 { to { transform: translate(14vmax, -10vmax) scale(1.08); } }
@keyframes dt-f3 { to { transform: translate(-10vmax, -8vmax) scale(.9); } }
@media (prefers-reduced-motion: reduce) { .dt-bg i { animation: none; } }

/* ---------- سطح شیشه‌ای مشترک (Liquid Glass) ---------- */
.dt-header .dt-wrap,
.dt-post,
.ld-bar,
.ld-link,
.ld-frame,
.ld-chat,
.ld-game,
#ld-lobby {
	position: relative;
	background: linear-gradient(135deg, var(--glass-strong), var(--glass));
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	backdrop-filter: blur(24px) saturate(180%);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-lg);
	box-shadow:
		var(--glass-shadow),
		inset 0 1px 0 rgba(255, 255, 255, .65),
		inset 0 -1px 0 rgba(255, 255, 255, .1),
		inset 0 0 24px rgba(255, 255, 255, .07);
}
/* درخشش سطح شیشه (Specular highlight) */
.dt-header .dt-wrap::before,
.dt-post::before,
.ld-bar::before,
.ld-link::before,
.ld-frame::before,
.ld-chat::before,
.ld-game::before,
#ld-lobby::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .38) 0%, rgba(255, 255, 255, 0) 42%),
		radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, .28), transparent 55%);
	mix-blend-mode: soft-light;
}
.dt-header .dt-wrap > *,
.dt-post > *,
.ld-bar > *,
.ld-link > *,
.ld-frame > *,
.ld-chat > *,
.ld-game > *,
#ld-lobby > * { position: relative; z-index: 1; }

/* شکست نور روی سطوح کوچک (فقط کروم‌محور؛ بقیه‌ی مرورگرها حالت عادی را می‌بینند) */
@supports (not (-webkit-hyphens: none)) and (not (-moz-appearance: none)) {
	.dt-header .dt-wrap,
	.ld-bar {
		backdrop-filter: url(#dt-glass) blur(22px) saturate(180%);
	}
}
/* اگر مرورگر blur را پشتیبانی نکند، پس‌زمینه‌ی مات‌تر */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.dt-header .dt-wrap, .dt-post, .ld-bar, .ld-link, .ld-frame, .ld-chat, .ld-game, #ld-lobby { background: var(--glass-solid); }
}

/* ---------- هدر شناور ---------- */
.dt-header { position: sticky; top: 12px; z-index: 50; padding: 0 12px; margin-top: 12px; }
.dt-header .dt-wrap {
	max-width: 900px;
	margin: 0 auto;
	padding: 10px 22px;
	border-radius: 999px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.dt-title { color: var(--dt-text); font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.dt-title:hover { text-decoration: none; }
.dt-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.dt-nav a {
	display: block;
	color: var(--dt-text);
	font-size: 14px;
	padding: 6px 14px;
	border-radius: 999px;
	transition: background .2s, transform .3s var(--spring);
}
.dt-nav a:hover { background: var(--btn-top); text-decoration: none; transform: scale(1.05); }

/* ---------- محتوا ---------- */
.dt-main { padding: 28px 16px 40px; }
main.dt-wrap { max-width: 900px; margin: 0 auto; }
.dt-h { font-size: 24px; margin: 0 0 12px; letter-spacing: -.01em; }
.dt-h a { color: var(--dt-text); }
.dt-post { padding: 20px 26px; margin-bottom: 18px; }

.dt-footer { text-align: center; font-size: 13px; color: var(--dt-text-soft); padding: 8px 16px 32px; }