/* com_myloykrathong — ลอยกระทงออนไลน์ */
.loy {
	--loy-gold: #f5c45a;
	--loy-gold2: #ffe7a3;
	--loy-ink: #0b1030;
	--loy-panel: #121a44;
	--loy-panel2: #1a2358;
	--loy-text: #eef0ff;
	--loy-muted: #b8bde6;
	font-family: var(--loy-font, var(--my-font, inherit));   /* ฟอนต์ที่เลือกในหลังบ้าน หรือฟอนต์ของธีม */
	color: var(--my-ink, #1f2937);
	margin-bottom: 1.5rem;
}

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

/* ---------- เวที ---------- */
.loy__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	min-height: 440px;
	max-height: 86vh;
	border-radius: var(--my-radius, 14px);
	overflow: hidden;
	background: #050a1f;
	box-shadow: 0 18px 50px -20px rgba(5, 10, 40, .65);
	isolation: isolate;
}

/* ภาพฉากหลังที่ใส่เอง: กรอบฉากใช้สัดส่วนเดียวกับภาพ (fit พอดี ไม่ตัดภาพ) */
.loy__stage.has-photo { aspect-ratio: var(--loy-ratio, 16 / 9); min-height: 400px; }

/* เต็มจอ: ขยายเต็มหน้าต่างเบราว์เซอร์ด้วย CSS (ไม่มีข้อความ "กด Esc เพื่อออก" ของเบราว์เซอร์) */
html.loy-full { overflow: hidden; }

.loy.is-full {
	position: fixed;
	inset: 0;
	z-index: 1150;
	margin: 0;
	background: #050a1f;
}

.loy.is-full .loy__stage { width: 100vw; height: 100vh; height: 100dvh; min-height: 0; max-height: none; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.loy.is-full .loy__list,
.loy.is-full .loy__featured { display: none; }

.loy__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; }

/* HUD: แถวบน (ชื่องาน | สถิติ) + แถวล่าง (ซ้าย | กลาง | ขวา) — ปุ่มไปอยู่ช่องที่ตั้งในหลังบ้าน */
.loy__hud {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: clamp(.8rem, 2.2vw, 1.6rem) clamp(.8rem, 2.2vw, 1.6rem) 1.7rem;
	pointer-events: none;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0, 0, 20, .7);
}

.loy__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.loy__left { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; min-width: 0; }
.loy__bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: .6rem; }
.loy__slot--bl { justify-self: start; }
.loy__slot--bc { justify-self: center; }
.loy__slot--br { justify-self: end; }

.loy__kicker { display: flex; align-items: center; gap: .5rem; font-size: .85rem; letter-spacing: .04em; color: var(--loy-gold2); opacity: .95; }
.loy__logo { width: 2.4rem; height: 2.4rem; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 20, .6)); }

.loy__title h1 {
	margin: .1rem 0 .2rem;
	font-family: var(--loy-font-title, inherit);
	font-size: calc(clamp(1.5rem, 3.6vw, 2.6rem) * var(--loy-title-scale, 1));   /* ขนาดชื่องาน (ตั้งในหลังบ้าน) */
	font-weight: 700;
	line-height: 1.15;
	background: linear-gradient(180deg, #fff6d2, var(--loy-gold));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 2px 10px rgba(255, 190, 80, .35));
}

.loy__year { font-weight: 600; }
.loy__title p { margin: 0; max-width: 34rem; font-size: clamp(.85rem, 1.5vw, 1rem); color: #e4e6ff; }

.loy__stats { display: flex; gap: .6rem; }

.loy__stat {
	min-width: 5.5rem;
	padding: .5rem .8rem;
	border-radius: 14px;
	text-align: center;
	background: rgba(10, 14, 45, .45);
	border: 1px solid rgba(245, 196, 90, .35);
	backdrop-filter: blur(6px);
}

.loy__stat b { display: block; font-size: 1.35rem; color: var(--loy-gold2); font-variant-numeric: tabular-nums; }
.loy__stat span { font-size: .78rem; color: #dfe2ff; }

/* แถวบน: ชื่องานได้ที่ก่อน · สถิติ + ปุ่ม ชิดขวา (ส่วนท้องฟ้า กระทงลอยอยู่ใต้ขอบน้ำ จึงไม่ถูกบัง) */
.loy__left { flex: 1 1 auto; }
.loy__side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .7rem; }

.loy__actions {
	position: relative;
	display: flex;
	align-items: center;
	gap: .5rem;
	pointer-events: auto;
	text-shadow: none;
	zoom: var(--loy-btn-scale, 1);   /* ขนาดปุ่ม (ตั้งในหลังบ้าน) */
}

/* ปุ่มแนวเดียวกับจำนวนกระทง: [ปุ่ม] [สถิติ] ในแถวเดียว */
.loy__side--inline { flex-direction: row; align-items: center; gap: .8rem; }

/* ปุ่มบนสุด: ป้าย "แตะเพื่อเปิดเสียง" ไปทางซ้ายของกลุ่ม (ด้านล่างเป็นกล่องสถิติ) */
.loy__hud--tt .loy__soundhint { top: 50%; right: calc(100% + .5rem); transform: translateY(-50%); }

/* แถวเดียวแนวนอน (ปุ่มส่งลิงก์เหลือไอคอน ให้พอดีหนึ่งแถว) */
.loy__actions--row { flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; }
.loy__actions--row .loy__invite { width: 2.8rem; padding: 0; justify-content: center; }
.loy__actions--row .loy__invite-text { display: none; }
.loy__hud--tl .loy__actions--row,
.loy__hud--bl .loy__actions--row { justify-content: flex-start; }
.loy__hud--bc .loy__actions--row { justify-content: center; }

/* ซ้อน 2 ชั้น: ปุ่มลอยกระทงอยู่บน */
.loy__actions--stack { flex-direction: column; align-items: flex-end; }
.loy__hud--tl .loy__actions--stack,
.loy__hud--bl .loy__actions--stack { align-items: flex-start; }
.loy__hud--bc .loy__actions--stack { align-items: center; }

.loy__tools { display: flex; align-items: center; gap: .45rem; }

/* ป้าย "แตะเพื่อเปิดเสียง": อยู่นอกกลุ่มปุ่ม (มุมบน = ใต้กลุ่ม · มุมล่าง = เหนือกลุ่ม) ไม่ทับปุ่มใด */
.loy__soundhint {
	display: none;
	position: absolute;
	top: calc(100% + .5rem);
	right: 0;
	padding: .3rem .75rem;
	border-radius: 999px;
	white-space: nowrap;
	font-size: .8rem;
	font-weight: 600;
	color: #3b2405;
	background: var(--loy-gold2);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
	pointer-events: none;
}

.loy.is-soundhint .loy__soundhint { display: block; }
.loy__hud--tl .loy__soundhint,
.loy__hud--bl .loy__soundhint { right: auto; left: 0; }
.loy__hud--bc .loy__soundhint { right: auto; left: 50%; transform: translateX(-50%); }
.loy__bottom .loy__soundhint { top: auto; bottom: calc(100% + .5rem); }
.loy__sound.is-hint::after { display: none; }

.loy__cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .9rem 1.9rem;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-size: clamp(1.05rem, 2vw, 1.3rem);
	font-weight: 700;
	color: #3b2405;
	background: linear-gradient(180deg, #fff1bd, var(--loy-gold) 55%, #d99a26);
	box-shadow: 0 10px 30px -8px rgba(255, 180, 60, .8), inset 0 1px 0 rgba(255, 255, 255, .7);
	cursor: pointer;
	white-space: nowrap;
	transition: transform .18s ease, filter .18s ease;
}

.loy__cta:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.05); }

.loy__cta-glow {
	position: absolute;
	inset: -6px;
	border-radius: inherit;
	border: 2px solid rgba(255, 220, 140, .7);
	animation: loy-pulse 2.2s ease-out infinite;
	pointer-events: none;
}

@keyframes loy-pulse {
	0% { opacity: .9; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.25); }
}

.loy__icon {
	width: 2.8rem;
	height: 2.8rem;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .3);
	background: rgba(10, 14, 45, .5);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(6px);
}

.loy__icon:hover { background: rgba(30, 40, 100, .7); }
.loy__icon.is-on { color: #3b2405; background: linear-gradient(180deg, #fff1bd, var(--loy-gold)); border-color: rgba(255, 240, 200, .8); }

/* เบราว์เซอร์ยังไม่ให้เล่นเสียง: ปุ่มลำโพงกระพริบ + ป้าย "แตะเพื่อเปิดเสียง" */
.loy__sound { position: relative; }

.loy__sound.is-hint {
	color: #3b2405;
	background: linear-gradient(180deg, #fff1bd, var(--loy-gold));
	animation: loy-ring 1.6s ease-out infinite;
}

.loy__sound.is-hint::after {
	content: attr(data-hint);
	position: absolute;
	left: 50%;
	top: calc(100% + .55rem);
	transform: translateX(-50%);
	padding: .3rem .7rem;
	border-radius: 999px;
	white-space: nowrap;
	font-size: .8rem;
	font-weight: 600;
	color: #3b2405;
	background: var(--loy-gold2);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
	pointer-events: none;
}

@keyframes loy-ring {
	0% { box-shadow: 0 0 0 0 rgba(255, 215, 120, .75); }
	100% { box-shadow: 0 0 0 14px rgba(255, 215, 120, 0); }
}

/* ตัวเล่น YouTube สำหรับเพลงประกอบ (เล่นเฉพาะเสียง มองไม่เห็น) */
.loy-yt { position: fixed; left: 0; bottom: 0; width: 200px; height: 200px; opacity: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.loy-yt iframe { width: 200px; height: 200px; border: 0; }

/* ปุ่มส่งลิงก์ให้เพื่อน (บนฉาก): ไล่สีชมพู-ม่วง ไอคอนแชร์ + วงแสงกระเพื่อม */
.loy__invite {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	height: 2.8rem;
	padding: 0 1.15rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .55);
	background: linear-gradient(135deg, #ff7ab6 0%, #c55cff 52%, #6d6bff 100%);
	color: #fff;
	font: inherit;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	text-shadow: 0 1px 2px rgba(60, 10, 80, .35);
	box-shadow: 0 8px 22px -8px rgba(197, 92, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .45);
	transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.loy__invite i { font-size: 1.05em; filter: drop-shadow(0 1px 2px rgba(60, 10, 80, .35)); }
.loy__invite:hover { transform: translateY(-2px) scale(1.04); filter: brightness(1.08); box-shadow: 0 12px 26px -8px rgba(197, 92, 255, 1), inset 0 1px 0 rgba(255, 255, 255, .5); }
.loy__invite:active { transform: translateY(0) scale(.97); }
.loy__invite:focus-visible { outline: 3px solid #ffd1ec; outline-offset: 2px; }

.loy__invite-ring {
	position: absolute;
	inset: -4px;
	border-radius: inherit;
	border: 2px solid rgba(232, 150, 255, .75);
	animation: loy-invite-ring 2.6s ease-out infinite;
	pointer-events: none;
}

@keyframes loy-invite-ring {
	0% { opacity: .85; transform: scale(1); }
	70%, 100% { opacity: 0; transform: scale(1.28); }
}

.loy__closed {
	padding: .7rem 1.2rem;
	border-radius: 14px;
	color: #fff;
	background: rgba(10, 14, 45, .6);
	text-align: center;
}

.loy__hint {
	position: absolute;
	right: .9rem;
	bottom: .6rem;
	margin: 0;
	font-size: .75rem;
	color: rgba(230, 232, 255, .7);
	pointer-events: none;
}

.loy__tip {
	position: absolute;
	z-index: 3;
	max-width: min(320px, 80%);
	padding: .7rem .9rem;
	border-radius: 14px;
	color: var(--loy-text);
	background: rgba(12, 16, 50, .88);
	border: 1px solid rgba(245, 196, 90, .5);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
	backdrop-filter: blur(8px);
	font-size: .92rem;
	line-height: 1.5;
}

.loy__tip b { display: block; color: var(--loy-gold2); font-size: 1.02rem; }
.loy__tip span { display: block; margin-top: .15rem; }
.loy__tip em { display: block; font-style: normal; color: var(--loy-gold); margin-top: .2rem; }
.loy__tip small { display: block; margin-top: .25rem; color: var(--loy-muted); }

/* ---------- หน้าแชร์ ---------- */
.loy__featured {
	display: grid;
	grid-template-columns: minmax(0, 280px) 1fr;
	gap: 1.2rem;
	align-items: center;
	margin-top: 1rem;
	padding: 1rem;
	border-radius: var(--my-radius, 14px);
	background: linear-gradient(135deg, var(--loy-panel), var(--loy-panel2));
	color: var(--loy-text);
}

.loy__featured img { width: 100%; border-radius: 12px; display: block; }
.loy__featured h2 { margin: 0 0 .4rem; font-size: 1.3rem; color: var(--loy-gold2); }
.loy__featured blockquote { margin: 0 0 .5rem; font-size: 1.05rem; line-height: 1.6; }

/* ---------- ปุ่มทั่วไป ---------- */
.loy__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	padding: .65rem 1.2rem;
	border-radius: 999px;
	border: 0;
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: transform .15s ease, filter .15s ease, background-color .15s ease;
}

.loy__btn:hover { transform: translateY(-1px); text-decoration: none; }
.loy__btn:disabled { opacity: .7; cursor: wait; }
.loy__btn--gold { color: #3b2405; background: linear-gradient(180deg, #fff1bd, var(--loy-gold) 60%, #dca02d); box-shadow: 0 6px 18px -8px rgba(255, 180, 60, .9); }
.loy__btn--ghost { color: var(--loy-text); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); }
.loy__btn--ghost:hover { background: rgba(255, 255, 255, .15); color: #fff; }

/* ---------- หน้าต่าง ---------- */
html.loy-lock { overflow: hidden; }

.loy__modal {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
	background: rgba(3, 6, 22, .62);
	backdrop-filter: blur(6px);
	animation: loy-fade .2s ease;
}

@keyframes loy-fade { from { opacity: 0; } to { opacity: 1; } }

.loy__sheet {
	position: relative;
	width: min(720px, 100%);
	max-height: calc(100vh - 2rem);
	max-height: calc(100dvh - 2rem);   /* ความสูงที่มองเห็นจริงบนมือถือ (ไม่รวมแถบเบราว์เซอร์) */
	overflow: auto;
	overscroll-behavior: contain;
	padding: 1.4rem 1.4rem 1.2rem;
	border-radius: 22px;
	color: var(--loy-text);
	background: radial-gradient(120% 80% at 50% 0%, #26306f 0%, var(--loy-panel) 55%, #0c1236 100%);
	border: 1px solid rgba(245, 196, 90, .35);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
	animation: loy-up .25s ease;
}

@keyframes loy-up { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }

.loy__sheet--result { width: min(960px, 100%); }

.loy__sheet h2 { margin: 0 0 .8rem; font-size: 1.35rem; color: var(--loy-gold2); }

.loy__x {
	/* ติดมุมขวาบนของหน้าต่างเสมอ แม้เลื่อนเนื้อหา */
	position: sticky;
	top: 0;
	z-index: 3;
	float: right;
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	margin: -.4rem -.4rem .3rem .6rem;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .25);
	color: #fff;
	background: rgba(20, 26, 70, .9);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
	cursor: pointer;
}

.loy__x:hover { background: rgba(45, 55, 120, .95); }
.loy__sheet > h2 ~ * { clear: right; }

.loy__steps { display: flex; gap: .4rem; margin: 0 0 1rem; padding: 0; list-style: none; counter-reset: s; }

.loy__steps li {
	flex: 1;
	padding: .4rem .5rem;
	border-radius: 10px;
	font-size: .82rem;
	text-align: center;
	color: var(--loy-muted);
	background: rgba(255, 255, 255, .06);
	counter-increment: s;
}

.loy__steps li::before { content: counter(s) '. '; }
.loy__steps li.is-on { color: #3b2405; background: linear-gradient(180deg, #fff1bd, var(--loy-gold)); font-weight: 600; }

.loy__step { display: none; border: 0; margin: 0; padding: 0; min-width: 0; }
.loy__step.is-on { display: block; animation: loy-up .2s ease; }
.loy__step legend { margin-bottom: .7rem; font-size: 1.05rem; font-weight: 600; color: #fff; }

.loy__choices { display: grid; gap: .8rem; }
.loy__choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.loy__choices--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.loy__choice {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .4rem;
	padding: .6rem;
	border-radius: 16px;
	background: rgba(255, 255, 255, .05);
	border: 2px solid rgba(255, 255, 255, .1);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

.loy__choice:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .09); }
.loy__choice input { position: absolute; opacity: 0; pointer-events: none; }
.loy__choice:has(input:checked) { border-color: var(--loy-gold); background: rgba(245, 196, 90, .12); box-shadow: 0 0 0 4px rgba(245, 196, 90, .15); }
.loy__choice:has(input:focus-visible) { outline: 3px solid var(--loy-gold2); outline-offset: 2px; }

.loy__art { display: block; width: 100%; }
.loy__art svg, .loy__art img { display: block; width: 100%; height: auto; max-height: 260px; }
.loy__art canvas { display: block; width: 100%; height: auto; border-radius: 12px; }
.loy__choice-label { font-weight: 600; }

/* ตัวละคร 22 แบบ แบ่งกลุ่ม */
.loy__group { margin: .4rem 0 .5rem; font-size: .95rem; font-weight: 600; color: var(--loy-gold2); }
.loy__group:not(:first-of-type) { margin-top: 1rem; }
.loy__choices--chars { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: .55rem; }
.loy__choice--char { padding: .4rem .3rem .45rem; gap: .25rem; border-radius: 14px; }
.loy__choice--char .loy__art { height: 118px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.loy__choice--char .loy__art img { width: auto; height: 118px; max-width: 100%; max-height: none; object-fit: contain; }
.loy__choice--char .loy__choice-label { font-size: .82rem; text-align: center; line-height: 1.25; }

/* ชื่อจริง + ชื่อเล่น */
.loy__row2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: .7rem; }

.loy__field { display: block; margin-bottom: .9rem; }
.loy__field > span { display: block; margin-bottom: .3rem; font-weight: 600; }
.loy__field b { color: #ff9d9d; }
.loy__field small { font-weight: 400; color: var(--loy-muted); float: right; }

.loy__field input,
.loy__field textarea {
	width: 100%;
	padding: .65rem .8rem;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, .22);
	background: rgba(5, 8, 30, .5);
	color: #fff;
	font: inherit;
	font-size: 1rem;
}

.loy__field input:focus,
.loy__field textarea:focus { outline: none; border-color: var(--loy-gold); box-shadow: 0 0 0 3px rgba(245, 196, 90, .25); }
.loy__field input::placeholder,
.loy__field textarea::placeholder { color: rgba(200, 205, 240, .5); }

.loy__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }

.loy__chip {
	padding: .4rem .85rem;
	border-radius: 999px;
	border: 1px solid rgba(245, 196, 90, .5);
	background: transparent;
	color: var(--loy-gold2);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.loy__chip.is-on,
.loy__chip:hover { background: var(--loy-gold); color: #3b2405; }

.loy__money { display: flex; align-items: center; gap: .5rem; max-width: 240px; }
.loy__money span { white-space: nowrap; }
.loy__muted { color: var(--loy-muted); font-size: .85rem; }
.loy .loy__muted { display: block; }

/* หมายเหตุเงินสมมุติ */
.loy__note {
	display: flex;
	gap: .5rem;
	align-items: flex-start;
	margin: .6rem 0 0;
	padding: .6rem .8rem;
	border-radius: 12px;
	border: 1px solid rgba(245, 196, 90, .45);
	background: rgba(245, 196, 90, .1);
	color: #fde9b8;
	font-size: .86rem;
	line-height: 1.55;
}

.loy__note i { margin-top: .2rem; color: var(--loy-gold); }

.loy__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; }

.loy__error { margin: .3rem 0 .6rem; padding: .55rem .8rem; border-radius: 10px; background: rgba(239, 68, 68, .18); color: #ffd1d1; }

.loy__nav { display: flex; justify-content: space-between; gap: .6rem; margin-top: 1rem; }
.loy__nav [data-loy-next],
.loy__nav [data-loy-submit] { margin-left: auto; }

/* ---------- ผลลัพธ์ ---------- */
.loy__result { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }

/* ภาพแชร์ 4:5 ย่อให้พอดีจอเสมอ (ไม่ต้องเลื่อนดู) */
.loy__preview {
	position: relative;
	justify-self: center;
	width: min(100%, calc((100vh - 9rem) * .8));
	width: min(100%, calc((100dvh - 9rem) * .8));
	aspect-ratio: 4 / 5;
	border-radius: 16px;
	overflow: hidden;
	background: #0a1030;
	border: 1px solid rgba(245, 196, 90, .4);
}

.loy__preview img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* แผงส่งลิงก์ให้เพื่อน */
.loy__modal--top { z-index: 1210; }
.loy__sheet--link { width: min(520px, 100%); }
.loy__sheet--link h2 i { margin-right: .3rem; }
.loy__linkrow { display: flex; gap: .5rem; margin: .7rem 0 1rem; }

.loy__linkrow input {
	flex: 1;
	min-width: 0;
	padding: .6rem .8rem;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, .22);
	background: rgba(5, 8, 30, .5);
	color: #fff;
	font: inherit;
	font-size: .9rem;
}

.loy__linkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .6rem; }

.loy__lk {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
	padding: .75rem .4rem;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, .12);
	background: rgba(255, 255, 255, .06);
	color: #fff;
	font: inherit;
	font-size: .85rem;
	text-decoration: none;
	cursor: pointer;
	transition: transform .15s ease, background-color .15s ease;
}

.loy__lk:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .12); color: #fff; text-decoration: none; }
.loy__lk i { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; font-size: 1.2rem; color: #fff; }
.loy__lk--line i { background: #06c755; }
.loy__lk--fb i { background: #1877f2; }
.loy__lk--msg i { background: linear-gradient(135deg, #0695ff, #a334fa 60%, #ff6968); }
.loy__lk--x i { background: #000; }
.loy__lk--mail i { background: #ea580c; }
.loy__lk--more i { background: #475569; }

.loy__making {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--loy-gold2);
	animation: loy-blink 1.2s ease-in-out infinite;
}

@keyframes loy-blink { 50% { opacity: .45; } }

.loy__share { display: grid; gap: .9rem; }
.loy__share-btns { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.loy__soc {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	border: 0;
	color: #fff;
	font-size: 1.1rem;
	text-decoration: none;
	cursor: pointer;
	transition: transform .15s ease, filter .15s ease;
}

.loy__soc:hover { transform: translateY(-2px); filter: brightness(1.1); color: #fff; }
.loy__soc--fb { background: #1877f2; }
.loy__soc--line { background: #06c755; }
.loy__soc--x { background: #000; }
.loy__soc--copy { background: #475569; }

.loy__pp { padding: .9rem; border-radius: 16px; background: #fff; color: #102a43; text-align: center; }
.loy__pp h3 { margin: 0 0 .4rem; font-size: 1rem; color: #0b3c74; }
.loy__qr { width: min(230px, 100%); margin: 0 auto; }
.loy__qr svg { width: 100%; height: auto; display: block; }
.loy__pp p { margin: .4rem 0 0; font-size: .9rem; }

/* ---------- รายชื่อล่าสุด ---------- */
.loy__list { margin-top: 1.2rem; }
.loy__list h2 { font-size: 1.15rem; margin: 0 0 .7rem; color: var(--my-primary, #1b5fa8); }
.loy__list ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; }

.loy__list ul { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.loy__list li {
	display: flex;
	gap: .75rem;
	align-items: flex-start;
	padding: .65rem .8rem;
	border-radius: 12px;
	background: var(--my-card, #fff);
	border: 1px solid var(--my-line, #e5e7eb);
	box-shadow: var(--my-shadow, 0 2px 14px rgba(16, 40, 80, .08));
}

.loy__list li.is-new { animation: loy-up .4s ease; border-color: var(--loy-gold); }

/* ภาพตัวละคร + กระทงที่เลือก */
.loy__li-art {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: flex-end;
	width: 92px;
	height: 76px;
	padding: 0 4px 4px;
	border-radius: 12px;
	overflow: hidden;
	background: linear-gradient(180deg, #0e1b3d, #0a2a3a);
}

.loy .loy__li-art span { margin: 0; }
.loy__li-char { display: block; width: 38px; height: 68px; }
.loy__li-char img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.loy__li-k { display: block; width: 50px; margin-left: -2px; }
.loy__li-k canvas { display: block; width: 100%; height: auto; }
.loy__li-text { display: block; min-width: 0; flex: 1; }
.loy__list b { display: block; color: var(--my-ink, #1f2937); }
.loy__list b i { font-style: normal; font-weight: 600; color: var(--my-primary, #1b5fa8); }
.loy__li-text > span { display: block; font-size: .9rem; color: var(--my-muted, #6b7280); margin-top: .15rem; overflow-wrap: anywhere; }
.loy__li-text > em { display: inline-block; margin-top: .3rem; padding: .05rem .55rem; border-radius: 999px; font-style: normal; font-size: .8rem; font-weight: 600; color: #7a4a06; background: #fdf0c8; }
.loy__list small { display: block; font-size: .75rem; color: var(--my-muted, #6b7280); margin-top: .25rem; }

.loy__toast {
	position: fixed;
	left: 50%;
	bottom: 1.5rem;
	z-index: 1250;
	transform: translateX(-50%);
	padding: .65rem 1.1rem;
	border-radius: 999px;
	color: #fff;
	background: rgba(12, 16, 50, .92);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

/* ---------- มือถือ ---------- */
@media (max-width: 767.98px) {
	.loy__stage { aspect-ratio: 4 / 5; min-height: 480px; }
	.loy__stage.has-photo { aspect-ratio: 1 / 1; min-height: 380px; }
	.loy__title p { display: none; }
	.loy__top { flex-direction: column; gap: .6rem; }
	.loy__left { width: 100%; }
	.loy__side { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; gap: .45rem; }
	.loy__hud--tl .loy__left { flex-direction: column; }
	.loy__logo { width: 2rem; height: 2rem; }
	.loy__stats { gap: .35rem; }
	.loy__stat { min-width: 3.4rem; padding: .25rem .45rem; border-radius: 10px; }
	.loy__stat b { font-size: .92rem; }
	.loy__stat span { white-space: nowrap; font-size: .7rem; }
	.loy__actions--row { flex-wrap: nowrap; gap: .3rem; }
	.loy__soundhint { font-size: .7rem; padding: .18rem .55rem; }
	.loy__hint { left: 0; right: 0; text-align: center; bottom: .3rem; }
	.loy__actions { gap: .4rem; }
	.loy__tools { gap: .35rem; }
	.loy__icon, .loy__invite, .loy__actions--row .loy__invite { width: 2.15rem; height: 2.15rem; font-size: .85rem; }
	.loy__cta { padding: .45rem .8rem; font-size: .88rem; gap: .35rem; }
	.loy__cta-glow { inset: -4px; }
	.loy__invite { width: 2.15rem; padding: 0; justify-content: center; }
	.loy__invite-text { display: none; }
	.loy__row2 { grid-template-columns: 1fr; gap: 0; }
	.loy__choices--chars { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
	.loy__choice--char .loy__art { height: 98px; }
	.loy__choice--char .loy__art img { height: 98px; }
	/* หน้าผลลัพธ์บนมือถือ: ภาพเล็กลง ปุ่มเล็กลง เห็นครบทุกปุ่ม */
	.loy__preview { width: min(100%, calc((100dvh - 20rem) * .8)); min-width: 9rem; }
	.loy__sheet--result h2 { font-size: 1.08rem; line-height: 1.35; margin-bottom: .6rem; }
	.loy__result { gap: .7rem; }
	.loy__share { gap: .55rem; }
	.loy__share > .loy__muted { margin: 0; font-size: .8rem; }
	.loy__share-btns { gap: .35rem; }
	.loy__share .loy__btn { padding: .42rem .8rem; font-size: .86rem; gap: .35rem; }
	.loy__soc { width: 2.25rem; height: 2.25rem; font-size: .92rem; }
	.loy__qr { width: min(170px, 100%); }
	.loy__pp { padding: .7rem; }
	.loy__x { width: 2.1rem; height: 2.1rem; }
	.loy__list ul { grid-template-columns: 1fr; }
	.loy__choices--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.loy__result { grid-template-columns: 1fr; }
	.loy__featured { grid-template-columns: 1fr; }
	.loy__sheet { padding: 1.1rem 1rem 1rem; border-radius: 18px; }
	.loy__modal { padding: max(.5rem, env(safe-area-inset-top)) .5rem max(.5rem, env(safe-area-inset-bottom)); align-items: flex-end; }
	.loy__sheet { max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); }
}

@media (prefers-reduced-motion: reduce) {
	.loy__cta-glow, .loy__making, .loy__sound.is-hint, .loy__invite-ring { animation: none; }
	.loy__step.is-on, .loy__sheet, .loy__modal, .loy__list li.is-new { animation: none; }
}

/* ฟอนต์ที่เลือก: ให้ทุกส่วนในกล่องใช้ฟอนต์เดียวกัน (กันธีมกำหนดฟอนต์ให้ปุ่ม/ช่องกรอก/หัวข้อ) */
.loy button, .loy input, .loy textarea, .loy h2, .loy h3 { font-family: inherit; }

/* ---------- ตัวละคร "ใบหน้าของฉัน" ---------- */
.loy__art--face { display: grid; place-items: center; font-size: 2rem; color: var(--loy-gold2); border: 2px dashed rgba(245, 196, 90, .55); border-radius: 12px; background: rgba(245, 196, 90, .06); }
.loy__choice--char .loy__art--face { height: 118px; }
.loy__art--face img { height: 100%; width: auto; }

.loy__faceedit {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 1rem;
	align-items: center;
	margin: .3rem 0 1rem;
	padding: .9rem;
	border-radius: 16px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(245, 196, 90, .35);
}

.loy__facecrop {
	position: relative;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid var(--loy-gold);
	background: #20264f;
	box-shadow: 0 0 0 5px rgba(245, 196, 90, .15), 0 10px 24px rgba(0, 0, 0, .35);
	touch-action: none;
	cursor: grab;
}

.loy__facecrop:active { cursor: grabbing; }
.loy__facecrop canvas { display: block; width: 100%; height: 100%; }
.loy__faceempty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3.4rem; color: rgba(255, 255, 255, .3); pointer-events: none; }
.loy__facectl { display: grid; gap: .55rem; min-width: 0; }
.loy__facectl .loy__btn { justify-self: start; }
.loy__facerow { display: flex; align-items: center; gap: .6rem; }
.loy__facerow > span { min-width: 4.5rem; font-weight: 600; }
.loy__facerow input[type="range"] { flex: 1; accent-color: var(--loy-gold); }

.loy__facerow select {
	flex: 1;
	min-width: 0;
	padding: .45rem .6rem;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, .22);
	background: rgba(5, 8, 30, .6);
	color: #fff;
	font: inherit;
}

.loy__facectl .loy__note { margin: 0; }
.loy__facepreview { width: 100px; }
.loy__facepreview img { display: block; width: 100%; height: auto; }

/* รายชื่อ: รูปใบหน้าจริงเป็นวงกลม */
.loy__li-char--face { display: grid; place-items: center; }
.loy__li-char--face img { width: 34px; height: 34px; object-fit: cover; border-radius: 50%; border: 2px solid var(--loy-gold); }

@media (max-width: 767.98px) {
	.loy__faceedit { grid-template-columns: auto minmax(0, 1fr); gap: .7rem; padding: .7rem; }
	.loy__facecrop { width: 118px; height: 118px; }
	.loy__facepreview { display: none; }
	.loy__facerow > span { min-width: 3.6rem; }
}

/* รูปใบหน้าในกล่องข้อความของกระทง (แตะเพื่อขยาย) */
.loy__tip-face { display: block; margin: 0 auto .45rem; padding: 0; border: 0; background: none; cursor: zoom-in; }
.loy__tip-face img { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 50%; border: 3px solid var(--loy-gold); box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }

/* ดูรูปใบหน้าขยายเต็มจอ */
.loy__zoom {
	position: fixed;
	inset: 0;
	z-index: 1220;
	display: grid;
	place-items: center;
	background: rgba(3, 6, 22, .86);
	backdrop-filter: blur(6px);
	cursor: zoom-out;
	animation: loy-fade .2s ease;
}

.loy__zoom img { width: min(82vw, 72vh, 440px); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 6px solid var(--loy-gold); box-shadow: 0 0 0 10px rgba(245, 196, 90, .18), 0 24px 60px rgba(0, 0, 0, .55); }
.loy__zoom-x { position: absolute; top: max(1rem, env(safe-area-inset-top)); right: 1rem; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .14); }