/* ลอยกระทงออนไลน์ — ฉากใหม่ (templates/scene.php) วาดด้วย CSS / SVG / canvas ทั้งหมด ไม่ใช้รูปพื้นหลัง
 * คงไว้: โลโก้สาขา (img/logo.webp) และหน้าตากระทง (.krathong-img)
 * --hz-f = ตำแหน่งเส้นขอบฟ้า (สัดส่วนความสูงจอ) · loykrathong.js อ่านค่านี้เพื่อให้กระทงลอยเฉพาะในแม่น้ำ
 * ฟอร์มประกอบกระทงอยู่ใน krathong-builder.css */

:root {
    --hz-f: 0.56;
    --hz: calc(var(--hz-f) * 100dvh);
    --gold: #ffd27a;
    --gold-deep: #f0a73a;
    --ink: #0b1330;
    --font: 'Noto Sans Thai Looped', 'Prompt', system-ui, sans-serif;
}

/* จอแนวตั้ง: ฟ้าน้อยลง แม่น้ำกว้างขึ้น ให้กระทงมีที่ลอย */
@media (max-aspect-ratio: 4/5) { :root { --hz-f: 0.42; } }
@media (max-aspect-ratio: 9/16) { :root { --hz-f: 0.4; } }
/* จอเตี้ย (มือถือแนวนอน) */
@media (max-height: 480px) and (min-aspect-ratio: 4/3) { :root { --hz-f: 0.46; } }

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--ink);
}

body.lk-scene {
    position: fixed;
    inset: 0;
    height: 100dvh;
    font-family: var(--font);
    color: #fff;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

img { user-select: none; -webkit-user-drag: none; }

.lk-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

[hidden] { display: none !important; }

/* ───────────── ท้องฟ้า ───────────── */
.lk-sky {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 40% at 72% calc(var(--hz) - 4vh), rgba(255, 170, 110, 0.32), transparent 70%),
        radial-gradient(ellipse 120% 60% at 50% 0%, #1b1f5c 0%, transparent 60%),
        /* ทุกจุดเปลี่ยนสีอิงเส้นขอบฟ้า (--hz) ลำดับถูกเสมอทุกสัดส่วนจอ
           (เดิมใช้ 32% คงที่ จอแนวตั้งที่ขอบฟ้าต่ำทำให้ลำดับสลับ เกิดแถบสีตัดขาด) */
        linear-gradient(180deg, #070b24 0%, #121a4d calc(var(--hz) * 0.55), #2b2366 calc(var(--hz) * 0.8), #6b3a6e calc(var(--hz) - 4px), #0d2546 var(--hz), #061428 100%);
}

.lk-fx {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* ───────────── พระจันทร์ ───────────── */
.lk-moon {
    --size: clamp(70px, 11vmin, 150px);
    position: absolute;
    left: 72%;
    top: calc(var(--hz) * 0.22);
    width: var(--size);
    height: var(--size);
    margin-left: calc(var(--size) / -2);
    z-index: 2;
    pointer-events: none;
}

.lk-moon::before {
    content: '';
    position: absolute;
    inset: -120%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 236, 190, 0.38) 0%, rgba(255, 220, 160, 0.12) 35%, transparent 65%);
    animation: lk-halo 7s ease-in-out infinite;
}

.lk-moon-disc {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 38%, rgba(214, 190, 150, 0.55) 0 8%, transparent 9%),
        radial-gradient(circle at 62% 30%, rgba(214, 190, 150, 0.45) 0 6%, transparent 7%),
        radial-gradient(circle at 58% 64%, rgba(214, 190, 150, 0.5) 0 11%, transparent 12%),
        radial-gradient(circle at 28% 70%, rgba(214, 190, 150, 0.35) 0 5%, transparent 6%),
        radial-gradient(circle at 40% 35%, #fffaf0 0%, #ffeccc 55%, #f5d29a 100%);
    box-shadow: 0 0 40px 10px rgba(255, 228, 170, 0.55), 0 0 120px 40px rgba(255, 210, 140, 0.18);
}

@keyframes lk-halo {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.08); opacity: 1; }
}

/* ───────────── โคมลอย ───────────── */
.lk-lanterns {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: var(--hz);
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

.lk-lantern {
    position: absolute;
    bottom: -40px;
    width: calc(16px * var(--s, 1));
    height: calc(21px * var(--s, 1));
    border-radius: 42% 42% 30% 30% / 38% 38% 22% 22%;
    background: radial-gradient(ellipse at 50% 80%, #fff3c4 0%, #ffbf5e 40%, #e8742c 100%);
    box-shadow: 0 0 calc(14px * var(--s, 1)) calc(4px * var(--s, 1)) rgba(255, 170, 80, 0.5);
    opacity: 0;
    will-change: transform, opacity;
    /* ลอยขึ้นด้วย Web Animations ใน scene-fx.js (ค่า px จริง ให้ Safari ใช้ GPU) */
}

.lk-lantern::after {
    content: '';
    position: absolute;
    left: 30%;
    right: 30%;
    bottom: -12%;
    height: 14%;
    border-radius: 50%;
    background: #fff6d0;
    filter: blur(1px);
}

/* ───────────── เงาวัด / ริมฝั่ง ───────────── */
.lk-skyline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100dvh - var(--hz) - 1px);
    pointer-events: none;
}

.lk-skyline svg { display: block; width: 100%; height: 100%; }

.lk-skyline-far {
    height: clamp(130px, 19vw, 300px);
    z-index: 4;
}

.lk-far { fill: #2c2a63; opacity: 0.92; }
.lk-far-lights circle { fill: #ffd98a; animation: lk-twinkle 3.2s ease-in-out infinite; }
.lk-far-lights circle:nth-child(2n) { animation-delay: 1.4s; }
.lk-far-lights circle:nth-child(3n) { animation-delay: 2.3s; }

.lk-skyline-near {
    height: clamp(90px, 13vw, 210px);
    z-index: 5;
}

.lk-near { fill: #0c1232; }
.lk-near-lights circle { fill: #ffcf6b; filter: drop-shadow(0 0 4px #ffb84a); animation: lk-twinkle 2.6s ease-in-out infinite; }
.lk-near-lights circle:nth-child(2n) { animation-delay: 0.9s; }
.lk-near-lights circle:nth-child(3n) { animation-delay: 1.7s; }

@keyframes lk-twinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* ───────────── แม่น้ำ ───────────── */
.lk-river {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--hz);
    bottom: 0;
    z-index: 6;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 190, 140, 0.18) 0%, transparent 18%),
        linear-gradient(180deg, #16305a 0%, #0d2244 35%, #071530 100%);
}

/* แสงจันทร์สะท้อนเป็นริ้วระยิบ ใต้พระจันทร์ */
.lk-reflect {
    position: absolute;
    left: 72%;
    top: 0;
    width: clamp(90px, 16vmin, 220px);
    height: 85%;
    transform: translateX(-50%);
    background: repeating-linear-gradient(180deg, rgba(255, 232, 180, 0.75) 0 3px, transparent 3px 11px);
    -webkit-mask-image: radial-gradient(ellipse 50% 100% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 80%);
    mask-image: radial-gradient(ellipse 50% 100% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 80%);
    filter: blur(0.6px);
    animation: lk-shimmer 3.2s ease-in-out infinite;
}

@keyframes lk-shimmer {
    0%, 100% { opacity: 0.85; transform: translateX(-50%) scaleX(1); }
    50% { opacity: 0.55; transform: translateX(-50%) scaleX(1.12); }
}

.lk-waves {
    position: absolute;
    left: 0;
    width: calc(100% + 600px);
    background-repeat: repeat-x;
    background-size: 600px 100%;
    will-change: transform;
    animation: lk-wave linear infinite;
}

/* คลื่นเติมสี 5 ชั้น ใกล้ขอบฟ้าบางและช้า ด้านหน้าหนาและเร็ว สลับทิศให้ดูมีมิติ (เหมือนแม่น้ำหน้าแรก) */
.lk-waves-1 {
    top: 0;
    height: 26px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 26' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%238fc2ee' stop-opacity='0.3'/%3E%3Cstop offset='1' stop-color='%231c3c6e' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 8 Q75.0 3 150 8 T300 8 T450 8 T600 8 V26 H0Z' fill='url(%23g)'/%3E%3Cpath d='M0 8 Q75.0 3 150 8 T300 8 T450 8 T600 8' fill='none' stroke='%23cfe6ff' stroke-opacity='0.55' stroke-width='1.4'/%3E%3C/svg%3E");
    animation-duration: 34s;
}

.lk-waves-2 {
    top: 9%;
    height: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 44' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%236fa8de' stop-opacity='0.26'/%3E%3Cstop offset='1' stop-color='%23173563' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 14 Q75.0 6 150 14 T300 14 T450 14 T600 14 V44 H0Z' fill='url(%23g)'/%3E%3Cpath d='M0 14 Q75.0 6 150 14 T300 14 T450 14 T600 14' fill='none' stroke='%23bfdcf7' stroke-opacity='0.45' stroke-width='1.8'/%3E%3C/svg%3E");
    animation-duration: 26s;
    animation-direction: reverse;
}

.lk-waves-3 {
    top: 24%;
    height: 70px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 70' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%235b97d4' stop-opacity='0.24'/%3E%3Cstop offset='1' stop-color='%23122d58' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 20 Q75.0 8 150 20 T300 20 T450 20 T600 20 V70 H0Z' fill='url(%23g)'/%3E%3Cpath d='M0 20 Q75.0 8 150 20 T300 20 T450 20 T600 20' fill='none' stroke='%23b3d4f4' stroke-opacity='0.4' stroke-width='2.2'/%3E%3C/svg%3E");
    animation-duration: 19s;
}

.lk-waves-4 {
    top: 45%;
    height: 100px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%234a86c6' stop-opacity='0.22'/%3E%3Cstop offset='1' stop-color='%230d2549' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 28 Q75.0 12 150 28 T300 28 T450 28 T600 28 V100 H0Z' fill='url(%23g)'/%3E%3Cpath d='M0 28 Q75.0 12 150 28 T300 28 T450 28 T600 28' fill='none' stroke='%23a9cdef' stroke-opacity='0.34' stroke-width='2.6'/%3E%3C/svg%3E");
    animation-duration: 14s;
    animation-direction: reverse;
}

.lk-waves-5 {
    top: 70%;
    height: 140px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 140' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233d77b8' stop-opacity='0.24'/%3E%3Cstop offset='1' stop-color='%23081a38' stop-opacity='0.1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 36 Q75.0 16 150 36 T300 36 T450 36 T600 36 V140 H0Z' fill='url(%23g)'/%3E%3Cpath d='M0 36 Q75.0 16 150 36 T300 36 T450 36 T600 36' fill='none' stroke='%239fc6ea' stroke-opacity='0.3' stroke-width='3'/%3E%3C/svg%3E");
    animation-duration: 10s;
}

/* ประกายระยิบบนผิวน้ำ จางลงเมื่อใกล้ขอบฟ้า */
.lk-glints {
    position: absolute;
    inset: 4% 0 0 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%);
}

.lk-glints::before,
.lk-glints::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse 6px 1.5px at 30% 40%, rgba(255, 244, 214, 0.85), transparent 100%),
        radial-gradient(ellipse 9px 2px at 72% 70%, rgba(214, 236, 255, 0.7), transparent 100%),
        radial-gradient(ellipse 5px 1.2px at 52% 15%, rgba(255, 255, 255, 0.75), transparent 100%);
    background-size: 170px 70px, 230px 95px, 130px 55px;
    animation: lk-glint-a 4.5s ease-in-out infinite;
}

.lk-glints::after {
    background-size: 210px 85px, 150px 60px, 260px 110px;
    background-position: 60px 30px, 20px 10px, 90px 50px;
    animation: lk-glint-b 6s ease-in-out infinite;
}

@keyframes lk-glint-a {
    0%, 100% { opacity: 0.15; transform: translateX(0); }
    50% { opacity: 0.85; transform: translateX(18px); }
}

@keyframes lk-glint-b {
    0%, 100% { opacity: 0.8; transform: translateX(0); }
    50% { opacity: 0.12; transform: translateX(-14px); }
}

@keyframes lk-wave {
    from { transform: translateX(0); }
    to { transform: translateX(-600px); }
}

/* หมอกบางด้านหน้า (ทับฐานกระทงเล็กน้อยให้ดูลอยอยู่ในน้ำ) */
.lk-mist {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 12dvh;
    z-index: 12;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(6, 18, 40, 0.75), transparent);
}

/* ───────────── กระทง (หน้าตาเดิม) ───────────── */
#krathong-container {
    position: absolute;
    inset: 0;
    z-index: 10;
    overflow: hidden;
    pointer-events: none;
}

.krathong {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    left: 0;
    animation: float-krathong 35s linear forwards;
    will-change: transform;
    /* ปรับขนาดหน้าต่างแล้วเลื่อนกลับลงแม่น้ำแบบนุ่มๆ (loykrathong.js relayoutScene) */
    transition: bottom 0.5s ease;
}

.krathong-img {
    width: 120px;
    height: 120px;
    filter: drop-shadow(0 0 20px rgba(255, 215, 100, 0.6));
    animation: bob 2s ease-in-out infinite;
}

div.krathong-img { width: 160px; height: 110px; }

/* แสงเทียนสะท้อนบนผิวน้ำใต้กระทง */
/* --kh = ความสูงภาพกระทงในแต่ละขนาดจอ ใช้วางแสงเทียนสะท้อนและวงคลื่นใต้ฐาน */
.krathong { --kh: 110px; }

.krathong::before {
    content: '';
    position: absolute;
    top: calc(var(--kh) - 26px);
    left: 50%;
    width: 150px;
    height: 34px;
    margin-left: -75px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 200, 100, 0.4), transparent 70%);
    animation: lk-glow 2s ease-in-out infinite;
    z-index: -1;
}

/* วงคลื่นกระจายออกจากฐานกระทง (เหมือนหน้าแรก) */
.krathong::after {
    content: '';
    position: absolute;
    top: calc(var(--kh) - 14px);
    left: 50%;
    width: calc(var(--kh) * 1.15);
    height: calc(var(--kh) * 0.16);
    margin-left: calc(var(--kh) * -0.575);
    border-radius: 50%;
    border: 2px solid rgba(170, 215, 245, 0.6);
    box-shadow: 0 0 12px rgba(255, 210, 120, 0.3);
    animation: lk-ripple 2.6s ease-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes lk-ripple {
    0% { transform: scale(0.55); opacity: 0.9; }
    100% { transform: scale(1.4); opacity: 0; }
}

@keyframes lk-glow {
    0%, 100% { opacity: 0.7; transform: scaleX(1); }
    50% { opacity: 1; transform: scaleX(1.12); }
}

.krathong-message {
    width: 176px;
    margin-top: 6px;
    padding: 10px 14px;
    border-radius: 14px;
    /* ไม่ใช้ backdrop-filter: กล่องนี้เคลื่อนที่ตลอด Safari iOS ต้องเบลอพื้นหลังใหม่ทุกเฟรมจนกระตุก จึงใช้พื้นทึบขึ้นแทน */
    background: rgba(10, 18, 46, 0.84);
    border: 1px solid rgba(255, 210, 122, 0.55);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35), inset 0 0 18px rgba(255, 200, 110, 0.08);
    color: #fff7e6;
    font-size: 13.5px;
    line-height: 1.5;
    text-align: center;
    word-wrap: break-word;
}

.krathong-sender {
    margin-bottom: 4px;
    color: var(--gold);
    font-size: 13px;
    font-weight: 700;
    font-style: italic;
}

.krathong.mine .krathong-message {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(255, 211, 107, 0.45), 0 0 26px rgba(255, 200, 80, 0.55);
}

.krathong.mine .krathong-img { filter: drop-shadow(0 0 28px rgba(255, 215, 100, 0.95)); }

.krathong.lk-out { opacity: 0; transition: opacity 0.6s ease; }

/* ใช้ transform อย่างเดียว (ไม่แอนิเมต left) ให้ GPU ทำงานแทน main thread · Safari iOS กระตุกเมื่อแอนิเมต left
   ระยะทาง -260px → 100vw + 60px แบบเส้นตรง (loykrathong.js startMidway คำนวณตามค่านี้) */
@keyframes float-krathong {
    0% { transform: translate(-260px, 0) rotate(-4deg); }
    25% { transform: translate(calc(25vw - 180px), -12px) rotate(2deg); }
    50% { transform: translate(calc(50vw - 100px), 0) rotate(-2deg); }
    75% { transform: translate(calc(75vw - 20px), -8px) rotate(3deg); }
    100% { transform: translate(calc(100vw + 60px), 0) rotate(-4deg); }
}

@keyframes bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ───────────── UI ด้านบน ───────────── */
.lk-top {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: max(18px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));
    pointer-events: none;
}

.lk-brand { pointer-events: auto; }
.lk-brand a { display: block; }

.lk-logo {
    display: block;
    width: clamp(120px, 14vw, 210px);
    height: auto;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 18px rgba(255, 255, 255, 0.18));
}

.lk-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    background: rgba(12, 18, 50, 0.55);
    border: 1px solid rgba(255, 210, 122, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: clamp(14px, 1.4vw, 20px);
    white-space: nowrap;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.lk-count b {
    color: var(--gold);
    font-size: 1.25em;
    font-variant-numeric: tabular-nums;
}

.lk-count-icon { font-size: 1.15em; }

/* ───────────── ปุ่มลอยกระทง ───────────── */
.lk-cta {
    position: absolute;
    right: max(24px, env(safe-area-inset-right));
    bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px));
    z-index: 100;
}

.lk-cta-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffe39a 0%, #ffbe4d 45%, #f08a2b 100%);
    color: #3b1d00;
    font: inherit;
    font-size: 19px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(240, 138, 43, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lk-cta-btn::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    border: 2px solid rgba(255, 210, 122, 0.65);
    animation: lk-ring 2.4s ease-out infinite;
}

.lk-cta-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 36px rgba(240, 138, 43, 0.6); }
.lk-cta-btn:active { transform: scale(0.97); }
.lk-cta-btn:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.lk-cta-icon { font-size: 24px; line-height: 1; }

@keyframes lk-ring {
    0% { transform: scale(0.96); opacity: 0.9; }
    100% { transform: scale(1.18); opacity: 0; }
}

.lk-closed {
    position: absolute;
    right: max(20px, env(safe-area-inset-right));
    bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px));
    z-index: 100;
    max-width: min(340px, calc(100vw - 40px));
    padding: 12px 18px;
    border-radius: 16px;
    background: rgba(12, 18, 50, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

/* ───────────── กล่องส่ง (ใช้ฟอร์มใน krathong-builder.css) ───────────── */
.modal,
.success-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(3, 6, 20, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.success-modal { z-index: 2100; }
.modal.active, .success-modal.active { display: flex; }

.modal-content {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 24px 22px 20px;
    border-radius: 22px;
    background: #fff;
    color: #1f2937;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
    animation: lk-pop 0.28s ease-out;
    touch-action: pan-y;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

@keyframes lk-pop {
    from { transform: translateY(24px) scale(0.98); opacity: 0; }
    to { transform: none; opacity: 1; }
}

.close-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    color: #6b7280;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.close-btn:hover { background: rgba(0, 0, 0, 0.1); color: #111827; }

.success-modal-content {
    width: 100%;
    max-width: 380px;
    padding: 38px 26px;
    border-radius: 22px;
    background: linear-gradient(160deg, #1b2360, #0e1538);
    border: 1px solid rgba(255, 210, 122, 0.4);
    text-align: center;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 60px rgba(255, 190, 80, 0.2);
    animation: lk-pop 0.3s ease-out;
}

.success-icon { font-size: 46px; margin-bottom: 8px; }
.success-modal h2 { margin: 0 0 8px; font-size: 24px; color: var(--gold); }
.success-modal p { margin: 0; color: #dfe4ff; font-size: 16px; line-height: 1.6; }

/* จอใหญ่ในงาน: ไม่มีปุ่มส่ง ซ่อนเคอร์เซอร์ */
body.lk-screen { cursor: none; }

/* ───────────── แท็บเล็ต ───────────── */
@media (max-width: 1100px) {
    .krathong-img { width: 100px; height: 100px; }
    div.krathong-img { width: 136px; height: 94px; }
    .krathong { --kh: 94px; }
}

/* ───────────── มือถือ / จอแนวตั้ง ───────────── */
@media (max-width: 640px), (max-aspect-ratio: 4/5) {
    .lk-top {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding-top: max(14px, env(safe-area-inset-top));
    }

    .lk-logo { width: clamp(100px, 30vw, 160px); }
    .lk-count { font-size: 13px; padding: 7px 12px; gap: 6px; }
    /* มือถือ: ส่วนหัวกินที่กลางด้านบน พระจันทร์ไปอยู่มุมขวาบนข้างโลโก้ ไม่จมชิดยอดวัด */
    .lk-moon { left: 85%; top: calc(max(14px, env(safe-area-inset-top)) + 8px); --size: clamp(46px, 13vw, 84px); }
    .lk-reflect { left: 85%; }

    .lk-cta {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px));
    }

    .lk-cta-btn { min-width: min(78vw, 320px); padding: 14px 24px; font-size: 18px; }

    .lk-closed {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: calc(100vw - 32px);
    }

    .krathong { animation-duration: 28s; }
    .krathong-img { width: 84px; height: 84px; }
    div.krathong-img { width: 116px; height: 80px; }
    .krathong { --kh: 80px; }
    .krathong::before { width: 110px; margin-left: -55px; }
    .krathong-message { width: 142px; padding: 7px 10px; font-size: 12px; border-radius: 12px; }
    .krathong-sender { font-size: 11.5px; margin-bottom: 2px; }

    /* ฟอร์มเปิดเป็นแผ่นเลื่อนขึ้นจากด้านล่าง กดง่ายด้วยนิ้วโป้ง */
    .modal { align-items: flex-end; padding: 0; }
    .modal-content {
        max-width: none;
        max-height: 92dvh;
        border-radius: 22px 22px 0 0;
        padding: 20px 16px max(18px, env(safe-area-inset-bottom));
        animation: lk-sheet 0.3s ease-out;
    }
}

@keyframes lk-sheet {
    from { transform: translateY(100%); }
    to { transform: none; }
}

/* จอเล็กมาก */
@media (max-width: 360px) {
    .krathong { --kh: 70px; }
    .krathong-message { width: 124px; font-size: 11.5px; }
    div.krathong-img { width: 100px; height: 70px; }
    .krathong-img { width: 72px; height: 72px; }
    .lk-cta-btn { font-size: 17px; }
}

/* มือถือแนวนอน (จอเตี้ย) */
@media (max-height: 480px) and (min-aspect-ratio: 4/3) {
    .lk-top { flex-direction: row; padding-top: 10px; }
    .lk-logo { width: 110px; }
    .lk-cta { left: auto; right: 16px; transform: none; bottom: 12px; }
    .lk-cta-btn { min-width: 0; padding: 10px 20px; font-size: 16px; }
    .krathong { --kh: 66px; }
    .krathong-img { width: 70px; height: 70px; }
    div.krathong-img { width: 96px; height: 66px; }
    .krathong-message { width: 130px; font-size: 11px; padding: 5px 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .lk-moon::before, .lk-reflect, .lk-waves, .lk-lantern, .lk-cta-btn::before,
    .lk-far-lights circle, .lk-near-lights circle, .krathong::before, .krathong::after, .krathong-img,
    .lk-glints::before, .lk-glints::after {
        animation: none;
    }
    .lk-lanterns { display: none; }
}

/* ───────────── ดูกระทงทั้งหมด ───────────── */
.lk-top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    pointer-events: auto;
}

.lk-wall-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 210, 122, 0.55);
    background: rgba(255, 210, 122, 0.14);
    color: #fff3d6;
    font: inherit;
    font-size: clamp(14px, 1.3vw, 18px);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    transition: background 0.2s, transform 0.2s;
}

.lk-wall-btn:hover { background: rgba(255, 210, 122, 0.26); transform: translateY(-1px); }
.lk-wall-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.lk-wall {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(7, 11, 36, 0.94), rgba(6, 20, 40, 0.97));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.lk-wall-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 14px max(20px, env(safe-area-inset-left));
    border-bottom: 1px solid rgba(255, 210, 122, 0.2);
}

.lk-wall-head h2 {
    margin: 0;
    font-size: clamp(18px, 2vw, 26px);
    color: var(--gold);
}

.lk-wall-close {
    width: 44px;
    height: 44px;
    flex: none;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.lk-wall-close:hover { background: rgba(255, 255, 255, 0.2); }
.lk-wall-close:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.lk-wall-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    touch-action: pan-y;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* ไทม์ไลน์: [เวลา] [เส้น + จุด] [การ์ด รูปกระทง + ข้อความ] */
.lk-tl {
    --tl-time: 92px;
    --tl-rail: 28px;
    position: relative;
    max-width: 760px;
    margin: 0 auto;
}

/* เส้นแนวตั้งตลอดไทม์ไลน์ */
.lk-tl::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--tl-time) + var(--tl-rail) / 2 - 1px);
    width: 2px;
    background: linear-gradient(180deg, rgba(255, 210, 122, 0.55), rgba(255, 210, 122, 0.12));
}

.lk-tl-day {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 10px 0 10px calc(var(--tl-time) + var(--tl-rail) + 4px);
    pointer-events: none;
}

/* กลุ่มของแต่ละวัน: หัววัน sticky ติดด้านบนเฉพาะในกลุ่มตัวเอง (scene-fx.js dayGroup) */
.lk-tl-group { position: relative; }

.lk-tl-day span {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    /* พื้นทึบ (สีเดียวกับทองโปร่ง 16% บนพื้นกรมท่า) การ์ดที่เลื่อนลอดใต้จึงไม่ทะลุมาทับตัวอักษร */
    background: #302d33;
    border: 1px solid rgba(255, 210, 122, 0.4);
    box-shadow: 0 4px 12px rgba(4, 8, 24, 0.55);
    pointer-events: auto;
    color: var(--gold);
    font-size: 14px;
    font-weight: 700;
}

.lk-tl-item {
    position: relative;
    display: grid;
    grid-template-columns: var(--tl-time) var(--tl-rail) 1fr;
    align-items: center;
    padding: 6px 0;
}

.lk-tl-time {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 8px;
    color: #f1f3ff;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
    text-align: right;
    white-space: nowrap;
}

.lk-tl-time small {
    color: #9aa5d6;
    font-size: 11.5px;
    font-weight: 400;
}

.lk-tl-dot {
    justify-self: center;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 4px rgba(255, 210, 122, 0.18), 0 0 12px rgba(255, 200, 100, 0.7);
}

.lk-tl-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 8px 14px 8px 8px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 210, 122, 0.18);
}

.lk-tl-art {
    flex: none;
    width: 96px;
    height: 68px;
    border-radius: 10px;
    padding: 4px 2px 2px;
    background:
        radial-gradient(ellipse 60% 30% at 50% 92%, rgba(255, 200, 100, 0.28), transparent 70%),
        linear-gradient(180deg, #121a4d 0%, #1a3354 60%, #1f4a6e 100%);
}

.lk-tl-art .lka,
.lk-tl-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.lk-tl-text { min-width: 0; line-height: 1.55; }

.lk-tl-name {
    color: var(--gold);
    font-size: 13.5px;
    font-weight: 700;
    font-style: italic;
}

.lk-tl-msg {
    color: #f1f3ff;
    font-size: 15px;
    word-break: break-word;
}

.lk-wall-status {
    /* สูงคงที่ ข้อความกำลังโหลดขึ้น / หายไม่ทำให้ความยาวหน้ากระโดด */
    min-height: 1.6em;
    padding: 22px 0 6px;
    text-align: center;
    color: #aab3dd;
    font-size: 14px;
}

.lk-wall-more {
    display: flex;
    justify-content: center;
    padding: 4px 0 8px;
}

/* ปุ่มโหลดเพิ่มเติมท้ายไทม์ไลน์ (ไม่โหลดเองเมื่อเลื่อนถึงท้าย) */
.lk-wall-more-btn {
    min-width: 180px;
    padding: 10px 22px;
    border-radius: 999px;
    border: 1px solid rgba(255, 210, 122, 0.55);
    background: rgba(255, 210, 122, 0.14);
    color: #fff3d6;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

.lk-wall-more-btn:hover { background: rgba(255, 210, 122, 0.26); }
.lk-wall-more-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.lk-wall-more-btn:disabled { opacity: 0.6; cursor: default; }

@media (max-width: 640px), (max-aspect-ratio: 4/5) {
    .lk-top-actions { justify-content: center; gap: 8px; }
    .lk-wall-btn { padding: 7px 12px; font-size: 13px; }
    .lk-tl { --tl-time: 68px; --tl-rail: 20px; }
    .lk-tl-time { font-size: 13px; padding-right: 2px; }
    .lk-tl-time small { font-size: 10.5px; }
    .lk-tl-day { padding-left: calc(var(--tl-time) + var(--tl-rail)); }
    .lk-tl-day span { font-size: 12.5px; padding: 4px 11px; }
    .lk-tl-card { gap: 9px; padding: 6px 10px 6px 6px; }
    .lk-tl-art { width: 72px; height: 52px; }
    .lk-tl-name { font-size: 12.5px; }
    .lk-tl-msg { font-size: 13.5px; }
}

@media (max-width: 340px) {
    .lk-tl { --tl-time: 62px; --tl-rail: 16px; }
    .lk-tl-time { font-size: 12px; }
    .lk-tl-time small { font-size: 10px; }
    .lk-tl-art { width: 60px; height: 44px; }
}

/* จอแคบ (≤ 430px): ให้ยอดกระทงกับปุ่มดูคำอธิษฐานทั้งหมดอยู่แถวเดียวกัน */
@media (max-width: 430px) {
    .lk-top-actions { gap: 6px; }
    .lk-count { font-size: 12px; padding: 6px 10px; gap: 4px; }
    .lk-wall-btn { font-size: 12px; padding: 6px 10px; }
}

/* ───────────── โคมลอยที่ผู้ชมปล่อย (loykrathong.js floatLantern) ─────────────
   เริ่มที่ขอบแม่น้ำด้านบน (เส้นขอบฟ้า) ลอยขึ้นจนพ้นจอ เล็กลงและจางหายเหมือนลอยไกลออกไป
   ชั้นอยู่เหนือทุกอย่าง (1400) ยกเว้นหน้าต่างดูคำอธิษฐานทั้งหมด (1500) และกล่องส่ง (2000) */
.lk-flyzone {
    position: absolute;
    inset: 0;
    z-index: 1400;
    pointer-events: none;
    overflow: hidden;
}

.lk-fly {
    --art-h: 118px;
    position: absolute;
    /* ขอบล่าง (กล่องข้อความ) อยู่ที่ขอบแม่น้ำด้านบนพอดี ทั้งโคมและข้อความจึงเริ่มเหนือน้ำ */
    bottom: calc(100dvh - var(--hz) + 4px);
    width: 176px;
    margin-left: -88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: 0;
    /* แอนิเมชันลอยขึ้นสั่งด้วย Web Animations ใน loykrathong.js (floatLantern) ด้วยค่า px จริง
       keyframe ที่ใช้ var() Safari ไม่ส่งให้ GPU จึงกระตุก · --fly-d = ระยะเวลา · --fly-end = ขนาดตอนจบ */
    --fly-d: 26s;
    --fly-end: 0.58;
    will-change: transform, opacity;
}

.lk-fly-art {
    width: calc(var(--art-h) * 0.76);
    height: var(--art-h);
    /* แสงคงที่ (การแอนิเมต filter ทำให้วาดใหม่ทุกเฟรม) */
    filter: drop-shadow(0 0 20px rgba(255, 180, 80, 0.8));
}

.lk-fly .krathong-message { margin-top: 0; }

.lk-fly.mine .krathong-message {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(255, 211, 107, 0.45), 0 0 26px rgba(255, 200, 80, 0.55);
}

.lk-fly.mine .lk-fly-art { filter: drop-shadow(0 0 30px rgba(255, 190, 80, 1)); }

@media (max-width: 640px), (max-aspect-ratio: 4/5) {
    .lk-fly { --art-h: 88px; width: 142px; margin-left: -71px; --fly-d: 22s; }
}

/* ───────────── กดที่กระทง / โคมเพื่อแชร์ลง Story (ยกเว้นจอใหญ่ในงาน) ───────────── */
.lk-can-share .krathong,
.lk-can-share .lk-fly {
    pointer-events: auto;
    cursor: pointer;
}

.lk-can-share .krathong:hover .krathong-message,
.lk-can-share .lk-fly:hover .krathong-message {
    border-color: var(--gold);
}

.lk-can-share .krathong:hover .krathong-message::after,
.lk-can-share .lk-fly:hover .krathong-message::after {
    content: '📲 กดเพื่อแชร์';
    display: block;
    margin-top: 4px;
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
}

.lk-tl-text { flex: 1; }

.lk-tl-share {
    flex: none;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 210, 122, 0.4);
    background: rgba(255, 210, 122, 0.1);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.lk-tl-share:hover { background: rgba(255, 210, 122, 0.24); }
.lk-tl-share:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }