#ld-app { max-width: 900px; margin: 0 auto; color: var(--dt-text); font-family: inherit; }
#ld-app [hidden] { display: none !important; }
#ld-room { text-align: center; }

/* ---------- صفحه‌ی ورودی ---------- */
#ld-lobby { padding: 48px 28px 36px; text-align: center; }
#ld-lobby h3 { margin: 0 0 10px; font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
#ld-lobby p { margin: 0 auto 26px; max-width: 460px; color: var(--dt-text-soft); }

/* ---------- فرم ورود با کد ---------- */
.ld-join { display: flex; gap: 10px; justify-content: center; align-items: stretch; max-width: 460px; margin: 0 auto; }
.ld-join input {
	flex: 1;
	min-width: 0;
	padding: 12px 18px;
	font: inherit;
	font-size: 16px;
	color: var(--dt-text);
	text-align: center;
	unicode-bidi: plaintext;
	background: var(--field);
	border: 1px solid var(--glass-border);
	border-radius: 999px;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .14);
	outline: none;
	transition: box-shadow .2s, border-color .2s;
}
.ld-join input:focus { border-color: var(--accent); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .14), 0 0 0 3px rgba(10, 132, 255, .25); }
.ld-join input::placeholder { color: var(--dt-text-soft); }
.ld-msg { min-height: 24px; margin-top: 10px; font-size: 14px; color: #ff3b30; }
#ld-lobby p.ld-hint { margin: 6px auto 0; font-size: 13px; }

/* ---------- نوار ابزار ---------- */
.ld-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	margin-bottom: 14px;
}
.ld-lbl { display: flex; align-items: center; gap: 10px; font-size: 14px; }

/* ---------- دکمه‌ها ---------- */
.ld-btn {
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	font-size: 14px;
	color: var(--dt-text);
	padding: 9px 17px;
	border-radius: 999px;
	border: 1px solid var(--glass-border);
	background: linear-gradient(180deg, var(--btn-top), var(--btn-bot));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 8px rgba(0, 0, 0, .1);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform .35s var(--spring), box-shadow .2s, filter .2s;
}
.ld-btn:hover { transform: translateY(-1px) scale(1.04); filter: brightness(1.08); }
.ld-btn:active { transform: scale(.95); }
.ld-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ld-btn.ld-active,
.ld-btn.ld-primary {
	color: #fff;
	border-color: rgba(255, 255, 255, .45);
	background: linear-gradient(180deg, var(--accent), var(--accent-2));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 6px 18px rgba(10, 132, 255, .42);
}
.ld-btn.ld-primary { padding: 13px 30px; font-size: 16px; font-weight: 600; }

/* ---------- انتخاب رنگ (دایره‌ای) ---------- */
.ld-bar input[type=color] {
	-webkit-appearance: none;
	appearance: none;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .85);
	background: none;
	cursor: pointer;
	box-shadow: 0 3px 12px rgba(0, 0, 0, .22);
	transition: transform .35s var(--spring);
}
.ld-bar input[type=color]:hover { transform: scale(1.1); }
.ld-bar input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.ld-bar input[type=color]::-webkit-color-swatch { border: none; border-radius: 50%; }
.ld-bar input[type=color]::-moz-color-swatch { border: none; border-radius: 50%; }

/* ---------- اسلایدر ---------- */
.ld-lbl input[type=range] {
	-webkit-appearance: none;
	appearance: none;
	width: 120px;
	height: 6px;
	border-radius: 99px;
	background: rgba(255, 255, 255, .6);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
	outline: none;
}
.ld-lbl input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	border: .5px solid rgba(0, 0, 0, .08);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
	cursor: pointer;
}
.ld-lbl input[type=range]::-moz-range-thumb {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	border: .5px solid rgba(0, 0, 0, .08);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
	cursor: pointer;
}

/* ---------- ردیف لینک ---------- */
.ld-link {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 8px 14px;
	margin-bottom: 14px;
	font-size: 14px;
	border-radius: 22px;
}
.ld-link input {
	flex: 1;
	min-width: 0;
	padding: 8px 14px;
	color: var(--dt-text);
	background: var(--field);
	border: 1px solid var(--glass-border);
	border-radius: 14px;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12);
	unicode-bidi: plaintext;
	text-align: start;
	font: inherit;
	font-size: 14px;
}

/* ---------- قاب بوم ---------- */
.ld-frame { padding: 8px; }
.ld-wrap { width: 100%; overflow: hidden; border-radius: 20px; background: #0a0620; }
#ld-canvas { display: block; background: #0a0620; touch-action: none; cursor: crosshair; }

/* ---------- وضعیت اتصال ---------- */
.ld-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 6px 16px;
	font-size: 13px;
	color: var(--dt-text);
	background: linear-gradient(180deg, var(--btn-top), var(--btn-bot));
	border: 1px solid var(--glass-border);
	border-radius: 999px;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}
.ld-status:empty { display: none; }
.ld-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #34c759; box-shadow: 0 0 8px #34c759; }
.ld-status.ld-off::before { background: #ff3b30; box-shadow: 0 0 8px #ff3b30; }

@media (max-width: 520px) {
	#ld-lobby { padding: 36px 18px; }
	.ld-bar { gap: 8px; padding: 10px; }
	.ld-lbl input[type=range] { width: 90px; }
}

/* ---------- عکس صفحه‌ی ورود ---------- */
.ld-hero {
	position: relative;
	max-width: 520px;
	margin: 0 auto 24px;
	overflow: hidden;
	border-radius: 26px;
	background: linear-gradient(135deg, #fecdd3, #e9d5ff);
	box-shadow: 0 14px 40px rgba(190, 24, 93, .28), 0 0 0 1px rgba(255, 255, 255, .55);
}
.ld-hero-img,
.ld-hero-svg {
	display: block;
	width: 100%;
	height: clamp(190px, 40vw, 300px);
	object-fit: cover;
	border-radius: 0;
}
.ld-hero-cap {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 34px 18px 14px;
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .5));
}
.ld-heart {
	position: absolute;
	bottom: 6%;
	left: var(--x);
	font-size: var(--s);
	line-height: 1;
	color: #fb7185;
	text-shadow: 0 2px 8px rgba(190, 24, 93, .45);
	opacity: 0;
	pointer-events: none;
	animation: ld-float 6.5s ease-in infinite;
	animation-delay: var(--d);
}
@keyframes ld-float {
	0%   { transform: translateY(0) scale(.6) rotate(-8deg); opacity: 0; }
	18%  { opacity: .95; }
	100% { transform: translateY(-230px) scale(1.15) rotate(14deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .ld-heart { animation: none; display: none; } }
.ld-name-row { margin-bottom: 10px; }

/* ---------- چت ---------- */
.ld-chat { margin-top: 18px; padding: 12px; text-align: start; }
.ld-chat-title { margin: 0 6px 8px; font-size: 14px; font-weight: 700; }
.ld-msgs {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 240px;
	overflow-y: auto;
	padding: 10px 8px;
	border-radius: 18px;
	background: var(--field);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12);
	overscroll-behavior: contain;
}
.ld-msgs:empty::before {
	content: "هنوز پیامی نیست؛ اولین پیام را بفرستید 💌";
	margin: auto;
	font-size: 13px;
	color: var(--dt-text-soft);
}
.ld-m { display: flex; max-width: 84%; }
.ld-me { align-self: flex-start; }
.ld-them { align-self: flex-end; }
.ld-bub {
	padding: 7px 14px 5px;
	font-size: 14px;
	line-height: 1.7;
	border-radius: 18px;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.ld-me .ld-bub {
	color: #fff;
	background: linear-gradient(180deg, #fb7185, #e11d48);
	box-shadow: 0 4px 14px rgba(225, 29, 72, .3);
	border-end-start-radius: 6px;
}
.ld-them .ld-bub {
	color: var(--dt-text);
	background: linear-gradient(180deg, var(--btn-top), var(--btn-bot));
	border: 1px solid var(--glass-border);
	border-end-end-radius: 6px;
}
.ld-mn { display: block; font-size: 11.5px; font-weight: 700; opacity: .75; }
.ld-mt { display: block; white-space: pre-wrap; unicode-bidi: plaintext; text-align: start; }
.ld-mtime { display: block; margin-top: 1px; font-size: 10.5px; opacity: .7; text-align: end; }
.ld-chat-in { display: flex; gap: 8px; margin-top: 10px; align-items: stretch; }
.ld-chat-in input {
	flex: 1;
	min-width: 0;
	padding: 10px 16px;
	font: inherit;
	font-size: 15px;
	color: var(--dt-text);
	unicode-bidi: plaintext;
	background: var(--field);
	border: 1px solid var(--glass-border);
	border-radius: 999px;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .14);
	outline: none;
}
.ld-chat-in input:focus { border-color: var(--accent); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .14), 0 0 0 3px rgba(10, 132, 255, .25); }
.ld-chat-in input::placeholder { color: var(--dt-text-soft); }
.ld-chat-in .ld-btn.ld-primary { padding: 9px 22px; font-size: 15px; }

@media (max-width: 520px) {
	.ld-msgs { height: 200px; }
	.ld-m { max-width: 92%; }
}

/* ---------- ابزار عکس ---------- */
.ld-bgtools { display: contents; }
#ld-canvas.ld-moving { cursor: grab; }
#ld-canvas.ld-moving:active { cursor: grabbing; }

/* ---------- بوم نئونی ---------- */
.ld-frame { background: #0b0720; border: 1px solid rgba(255, 43, 214, .55); }
.ld-wrap {
	position: relative;
	box-shadow:
		0 0 0 2px rgba(255, 43, 214, .95),
		0 0 14px rgba(255, 43, 214, .75),
		0 0 38px rgba(34, 211, 238, .45),
		inset 0 0 26px rgba(167, 139, 250, .35);
	animation: ld-neon 4.5s ease-in-out infinite alternate;
}
@keyframes ld-neon {
	0% {
		box-shadow: 0 0 0 2px rgba(255, 43, 214, .95), 0 0 14px rgba(255, 43, 214, .75),
			0 0 38px rgba(34, 211, 238, .35), inset 0 0 26px rgba(167, 139, 250, .3);
	}
	100% {
		box-shadow: 0 0 0 2px rgba(34, 211, 238, .95), 0 0 16px rgba(34, 211, 238, .8),
			0 0 44px rgba(255, 43, 214, .5), inset 0 0 30px rgba(34, 211, 238, .3);
	}
}
@media (prefers-reduced-motion: reduce) { .ld-wrap { animation: none; } }

.ld-select {
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	font-size: 14px;
	color: var(--dt-text);
	padding: 8px 34px 8px 16px;
	border-radius: 999px;
	border: 1px solid var(--glass-border);
	background: linear-gradient(180deg, var(--btn-top), var(--btn-bot));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 8px rgba(0, 0, 0, .1);
	cursor: pointer;
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%),
		linear-gradient(180deg, var(--btn-top), var(--btn-bot));
	background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%, 0 0;
	background-size: 5px 5px, 5px 5px, 100% 100%;
	background-repeat: no-repeat;
	outline: none;
}
html[dir=rtl] .ld-select, #ld-app .ld-select { background-position: 16px 52%, 11px 52%, 0 0; padding: 8px 16px 8px 34px; }
.ld-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ld-select option { color: #111; }

.ld-swatches { display: inline-flex; gap: 6px; align-items: center; }
.ld-sw {
	-webkit-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	padding: 0;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .85);
	background: var(--c);
	box-shadow: 0 0 8px var(--c), 0 0 2px rgba(0, 0, 0, .4);
	cursor: pointer;
	transition: transform .25s var(--spring);
}
.ld-sw:hover { transform: scale(1.18); }
.ld-sw:active { transform: scale(.9); }

/* ---------- بازی جرأت یا حقیقت ---------- */
.ld-game { margin-top: 18px; padding: 4px 14px; text-align: start; }
.ld-game > summary {
	list-style: none;
	cursor: pointer;
	padding: 12px 4px;
	font-size: 16px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: space-between;
	-webkit-tap-highlight-color: transparent;
}
.ld-game > summary::-webkit-details-marker { display: none; }
.ld-game > summary::after { content: "▾"; font-size: 14px; opacity: .6; transition: transform .3s var(--spring); }
.ld-game[open] > summary::after { transform: rotate(180deg); }
.ld-game-body { padding: 4px 0 14px; text-align: center; }
.ld-game-cat { justify-content: center; margin-bottom: 14px; }
.ld-game-btns { display: flex; gap: 12px; justify-content: center; margin-bottom: 16px; }
.ld-gbtn { flex: 1; max-width: 190px; padding: 14px 10px; font-size: 17px; font-weight: 700; color: #fff; border: 1px solid rgba(255, 255, 255, .5); }
.ld-gbtn:disabled { opacity: .6; pointer-events: none; }
.ld-gtruth { background: linear-gradient(180deg, #22d3ee, #0891b2); box-shadow: 0 0 18px rgba(34, 211, 238, .55), inset 0 1px 0 rgba(255, 255, 255, .5); }
.ld-gdare { background: linear-gradient(180deg, #ff5ca8, #e11d48); box-shadow: 0 0 18px rgba(255, 43, 214, .55), inset 0 1px 0 rgba(255, 255, 255, .5); }
.ld-gcard {
	min-height: 150px;
	padding: 22px 18px 16px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	border-radius: 22px;
	color: #fff;
	background: linear-gradient(145deg, #0a0620, #1a0b38);
	border: 1.5px solid rgba(255, 255, 255, .25);
}
.ld-gempty { color: rgba(255, 255, 255, .75); font-size: 15px; }
.ld-gt { border-color: #22d3ee; box-shadow: 0 0 22px rgba(34, 211, 238, .55), inset 0 0 26px rgba(34, 211, 238, .18); }
.ld-gd { border-color: #ff2bd6; box-shadow: 0 0 22px rgba(255, 43, 214, .55), inset 0 0 26px rgba(255, 43, 214, .18); }
.ld-gbadge { font-size: 13px; font-weight: 700; letter-spacing: .02em; opacity: .9; }
.ld-gt .ld-gbadge { color: #67e8f9; }
.ld-gd .ld-gbadge { color: #ff8ad8; }
.ld-gq { font-size: 21px; line-height: 1.9; font-weight: 600; text-shadow: 0 0 12px rgba(255, 255, 255, .25); unicode-bidi: plaintext; }
.ld-gturn { font-size: 14px; opacity: .85; }
.ld-gpop { animation: ld-pop .55s var(--spring); }
@keyframes ld-pop {
	0% { transform: scale(.9) rotate(-1.5deg); opacity: 0; }
	100% { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .ld-gpop { animation: none; } }
@media (max-width: 520px) {
	.ld-gq { font-size: 18px; }
	.ld-gbtn { font-size: 16px; }
}