/* festival-home.css — สร้างอัตโนมัติจาก festival.css สำหรับฝัง "ลูกเล่นเทศกาล" ในส่วนหัวของหน้า home
   (ตัดกฎที่เป็นเลย์เอาต์ของ landing ออก · .hero → #festival · จำกัดผล reduced-effects ไว้ในฉาก) — อย่าแก้มือ ให้แก้ที่ festival.css แล้วสร้างใหม่ */
#festival,.festival-dock,.festival-modal,.lucky-scene-overlay,.festival-announcement{--gold:#f3c061;--gold-bright:#ffe8b0;--gold-deep:#b07d1e;--ink:#0a0714;--head:'Chakra Petch','Kanit',sans-serif;--body:'Bai Jamjuree','Kanit',sans-serif;--serif:'Cinzel',serif}
#festival .content{transition:opacity .8s,filter .8s,transform .8s}
#festival.ritual-playing .content{opacity:.15;filter:blur(3px);transform:translateY(-12px);pointer-events:none}
.festival-controls{position:absolute;top:25px;right:28px;z-index:7;display:flex;gap:8px}
.festival-controls button{border:1px solid #f3c06150;border-radius:30px;background:#100e23b8;color:#ffe6b0;padding:9px 14px;font:500 12px var(--body);cursor:pointer;backdrop-filter:blur(12px)}
.moon-meter{position:absolute;top:26px;left:30px;z-index:6;display:flex;align-items:center;gap:12px;text-align:left;color:#ffe6ac;font:600 13px var(--head);text-shadow:0 2px 10px #000}
.moon-orbit{display:grid;place-items:center;width:45px;height:45px;border:1px solid #f3c06170;border-radius:50%;font-size:30px;box-shadow:0 0 25px #f3c06120}
.moon-meter small{display:block;font:11px var(--body);color:#d6cbb3;margin:3px 0}
.moon-meter progress{width:155px;height:4px;display:block;accent-color:#f3c061;border:0;border-radius:4px;overflow:hidden}
.moon-meter progress::-webkit-progress-bar{background:#ffffff20}
.moon-meter progress::-webkit-progress-value{background:linear-gradient(90deg,#bc7d25,#fff0ac)}
#river-objects{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.river-item{position:absolute;left:0;top:0;border:0;background:none;color:#fff1c8;pointer-events:auto;cursor:pointer;will-change:transform;filter:drop-shadow(0 0 8px #f5ae3960)}
.river-item img{display:block;width:100%;height:auto}
.river-item .river-label{position:absolute;top:100%;left:50%;transform:translateX(-50%);white-space:nowrap;font:11px var(--head);text-shadow:0 2px 4px #000;background:#160e24b8;padding:2px 8px;border-radius:20px;max-width:140px;overflow:hidden;text-overflow:ellipsis}
.river-item:focus-visible{outline:2px solid #ffe6a7;outline-offset:5px}
.river-item.reflection:after{content:'';position:absolute;left:10%;right:10%;top:90%;height:40%;background:var(--reflection) center top/contain no-repeat;transform:scaleY(-1);opacity:.16;filter:blur(2px);mask-image:linear-gradient(transparent,#000)}
.festival-dock{position:fixed;z-index:12;bottom:20px;left:50%;width:min(820px,calc(100% - 32px));transform:translate(-50%,130%);opacity:0;visibility:hidden;transition:.4s;background:linear-gradient(150deg,#1d152af2,#0e0c1df5);border:1px solid #f3c06160;border-radius:22px;padding:16px 20px;box-shadow:0 15px 90px #000a;backdrop-filter:blur(22px)}
.festival-dock.open{transform:translate(-50%,0);opacity:1;visibility:visible}
.dock-heading{display:flex;justify-content:space-between;align-items:center;margin:0 4px 12px;color:#b79a6a;font:9px var(--serif);letter-spacing:2px}
.dock-heading b{font:500 14px var(--head);letter-spacing:0;color:#ffebbd;display:block;margin-top:3px}
.dock-heading button,.modal-close{background:none;border:0;color:#d5c4a7;font-size:26px;cursor:pointer}
.activity-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.activity{display:flex;flex-direction:column;align-items:center;border:1px solid #f3c06120;background:#ffffff03;border-radius:13px;color:#ffe6b0;cursor:pointer;padding:9px 3px 12px;transition:.2s;font-family:var(--head)}
.activity:hover{background:#f3c06112;border-color:#f3c06180;transform:translateY(-4px)}
.activity img{width:65px;height:62px;object-fit:contain;filter:drop-shadow(0 3px 9px #f3c06130);margin-bottom:5px}
.activity b{font-size:12px}
.activity small{font:10px var(--body);color:#b8adc5;margin-top:3px}
.festival-modal{position:fixed;inset:0;margin:auto;width:min(580px,calc(100% - 28px));max-height:90svh;overflow-y:auto;background:radial-gradient(ellipse at top,#35223e,#100f20 70%);color:#f5ebd9;border:1px solid #e2b35470;border-radius:24px;padding:34px;box-shadow:0 20px 100px #000b;font-family:var(--body);text-align:center}
.festival-modal::backdrop{background:#050413b8;backdrop-filter:blur(8px)}
.modal-close{position:absolute;right:17px;top:10px}
.modal-eyebrow{font:9px var(--serif);letter-spacing:2px;color:#c7a16c;margin:4px 0 13px}
.festival-modal h2{font:700 29px var(--head);color:#ffe5a7;margin-bottom:8px}
.festival-modal p{font-size:14px;line-height:1.7;color:#c7bfd0}
.krathong-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:22px 0}
.krathong-choice{border:1px solid #f3c06125;border-radius:12px;padding:8px 4px;color:#cfc5d7;background:#ffffff04;font:12px var(--head);cursor:pointer}
.krathong-choice img{width:100%;height:67px;object-fit:contain;display:block;margin-bottom:5px}
.krathong-choice[aria-pressed=true]{border-color:#f3c061;background:#f3c06115;box-shadow:0 0 16px #f3c06116;color:#ffe6ac}
#personal-fields{text-align:left;margin-top:20px}
#personal-fields label{display:block;font-size:12px;color:#d8c3a2;margin:12px 0 6px}
#personal-fields input,#personal-fields textarea{display:block;width:100%;border:1px solid #e0b56335;background:#05051265;border-radius:10px;padding:11px 13px;color:#fff1d1;font:14px var(--body);margin-top:6px;resize:vertical}
#personal-fields input:focus,#personal-fields textarea:focus{outline:1px solid #f3c061}
.public-note{font-size:11px;color:#a79cb4}
.festival-submit{width:100%;padding:13px;margin-top:18px;border:1px solid #ffdfa0;border-radius:12px;background:linear-gradient(110deg,#ffe5ae,#dcaa4b);color:#36220b;cursor:pointer;font:700 16px var(--head)}
.festival-submit:disabled{opacity:.55;cursor:wait}
.modal-footer{margin-top:20px;color:#8f809b;font-size:10px;letter-spacing:.5px}
.ritual-art{height:140px;margin:15px auto 0;display:none;position:relative}
.ritual-art img{height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 0 20px #edb34c60)}
.ritual-art.shaking img{animation:shake .14s infinite alternate}
@keyframes shake{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
.ritual-result{white-space:pre-line;color:#ffe4a4;font:600 17px/1.8 var(--head);margin-top:12px}
.ritual-result .lucky-digits{font:700 66px var(--serif);letter-spacing:12px;display:block;text-shadow:0 0 24px #e7a63890;animation:reveal .8s both}
@keyframes reveal{from{opacity:0;transform:translateY(25px) scale(.8);filter:blur(12px)}to{opacity:1;transform:none;filter:none}}
.form-error{color:#ffb5a4!important;min-height:1em;font-size:12px!important;margin-top:8px}
.festival-announcement{position:fixed;top:15%;left:50%;transform:translate(-50%,-15px);z-index:30;max-width:90vw;pointer-events:none;border:1px solid #f3c06180;border-radius:16px;padding:16px 26px;background:#140e24e8;box-shadow:0 0 50px #f3c06120;color:#ffe6ab;text-align:center;font:600 16px var(--head);opacity:0;transition:.4s}
.festival-announcement.show{opacity:1;transform:translate(-50%,0)}
#festival.moon-awake:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;background:radial-gradient(circle at 69% 12%,#ffdb8640,transparent 50%);animation:reveal 2s both}
.wish-card{max-width:430px}
.wish-card p{margin:20px 0;white-space:pre-wrap;overflow-wrap:anywhere}
.reduced-effects #festival *{scroll-behavior:auto!important}
.reduced-effects .river-item{will-change:auto}
.reduced-effects .ritual-art img{animation:none}
@media(max-width:800px){.moon-meter{left:18px;top:20px}
.festival-controls{right:16px;top:20px}
.festival-controls button{padding:8px 10px}
.festival-controls span{display:none}
.activity b{font-size:11px}
.activity small{display:none}}
@media(max-width:640px){.moon-meter{font-size:11px}
.moon-meter small{font-size:9px}
.moon-meter progress{width:125px}
.moon-orbit{width:32px;height:32px;font-size:24px}
.festival-dock{bottom:10px;padding:12px}
.activity-grid{grid-template-columns:repeat(3,1fr)}
.activity{padding:6px}
.activity img{height:43px;width:48px}
.festival-modal{padding:30px 20px 22px}
.festival-modal h2{font-size:25px}
#festival .content{z-index:4}
.ritual-result .lucky-digits{font-size:49px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.activity img,.ritual-art img{mix-blend-mode:screen}
.activity{background-color:#211a2d}
#river-objects{z-index:5}
.river-item.reflection:before{content:'';position:absolute;width:50%;height:14%;left:25%;top:78%;border:1px solid #ffe5a74d;border-radius:50%;box-shadow:0 0 10px #f3c06120;animation:water-ripple 3s ease-out infinite;pointer-events:none}
@keyframes water-ripple{from{transform:scale(.5);opacity:.65}to{transform:scale(2);opacity:0}}
.ritual-art.shaking:after{content:'';position:absolute;inset:-20px;background:url('smoke.png') center/contain no-repeat;opacity:.4;mix-blend-mode:screen;animation:smoke-rise 1.8s ease-out infinite;pointer-events:none}
@keyframes smoke-rise{from{transform:translateY(25px) scale(.7);opacity:0}50%{opacity:.5}to{transform:translateY(-25px) scale(1.3);opacity:0}}
.reduced-effects .river-item:before,.reduced-effects .ritual-art:after{animation:none}
.activity img[src$="halo.png"],.activity img[src$="moonglow.png"],.activity img[src$="sparklegold.png"],.ritual-art img[src$="halo.png"],.ritual-art img[src$="moonglow.png"],.ritual-art img[src$="sparklegold.png"]{mask-image:radial-gradient(circle,#000 30%,transparent 72%)}
.living-water{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.river-item.reflection{filter:none;transform-origin:50% 96%}
.river-item.reflection:before,.river-item.reflection:after{display:none}
.river-item.reflection img{clip-path:inset(0 0 4% 0)}
.river-item .river-label{top:99%;font-size:10px;background:#160e2480}
#river-objects{z-index:3}
.river-item:not(button){pointer-events:none}
@font-face{font-family:Chonburi;src:url('fonts/Chonburi-Regular.ttf') format('truetype');font-display:swap}
.festival-modal{overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#8c6942 #141020;overflow-wrap:anywhere}
.festival-modal form,.festival-modal label{min-width:0;max-width:100%}
.ritual-art{overflow:hidden;contain:paint;isolation:isolate;max-width:100%;border-radius:18px}
body:has(.festival-modal[open]){overflow:hidden}
.lucky-stage{position:relative;width:min(100%,46svh);aspect-ratio:1.2;margin:8px auto 0;overflow:hidden;contain:paint;isolation:isolate;border-radius:20px;background:radial-gradient(ellipse at 50% 55%,#bd77251c,transparent 67%)}
.lucky-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.lucky-stage .lucky-source{z-index:1}
.lucky-stage .lucky-gold{z-index:2}
.lucky-stage[data-renderer=canvas] .lucky-gold{visibility:hidden}
.lucky-stage[data-phase=landed]{animation:ritual-impact .38s ease-out}
@keyframes ritual-impact{0%,100%{transform:translate(0)}20%{transform:translate(3px,-2px)}50%{transform:translate(-2px,1px)}75%{transform:translate(1px,0)}}
.lucky-stage[data-phase=landed]:after{content:'';position:absolute;inset:0;z-index:3;background:radial-gradient(ellipse,#ffe5ad55,transparent 65%);animation:landing-flash .4s both;pointer-events:none}
@keyframes landing-flash{to{opacity:0}}
.lucky-stage[hidden]{display:none}
.festival-modal.lucky-modal .ritual-art{display:none!important}
.festival-modal.lucky-modal .ritual-result{font-size:13px;margin-top:3px}
.festival-modal.lucky-modal .lucky-digits{display:none}
.festival-modal.lucky-modal .modal-footer{margin-top:13px}
.lucky-result-summary{font:600 14px/1.7 var(--head);color:#ffe6a7;letter-spacing:1px}
.lucky-modal .festival-submit{margin-top:10px}
@media(max-width:640px){.festival-modal{max-height:92svh;padding:28px 18px 20px}
.festival-modal.lucky-modal h2{font-size:22px}
.festival-modal.lucky-modal #activity-description{font-size:12px}
.lucky-stage{width:min(100%,44svh)}}
.reduced-effects .lucky-stage{animation:none!important}
.lucky-stage[data-phase=smoke] .lucky-gold{visibility:hidden}
.festival-volume{display:flex;align-items:center;gap:6px;color:#dfc99f;font:11px var(--body);background:#100e23b8;border:1px solid #f3c06150;border-radius:30px;padding:6px 10px}
.festival-volume input{width:65px;accent-color:#edc575;cursor:pointer}
@media(max-width:640px){.festival-volume{font-size:0;gap:0;padding:6px}
.festival-volume input{width:40px}}
@media(max-height:740px){.festival-modal.lucky-modal{padding:22px 24px 18px}
.lucky-modal .modal-eyebrow{font-size:8px;margin:0 0 8px}
.lucky-modal h2{font-size:24px;margin-bottom:5px}
.lucky-modal #activity-description{font-size:12px;line-height:1.5}
.lucky-stage{width:min(100%,39svh)}
.lucky-modal .modal-footer{margin-top:8px;font-size:9px}
.lucky-modal .form-error{margin-top:0;min-height:0}}
.lucky-scene-overlay{position:fixed;inset:0;z-index:15;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;overflow:hidden;padding:42px 15px 24px;pointer-events:none;background:radial-gradient(ellipse at center,#150d2260 0%,#100c201c 50%,transparent 78%)}
.lucky-scene-overlay[hidden]{display:none}
.lucky-scene-heading{text-align:center;color:#ffe9b6;text-shadow:0 3px 18px #000}
.lucky-scene-heading>span{font:10px var(--serif);letter-spacing:4px;color:#e4ba72}
.lucky-scene-heading h2{font:700 clamp(23px,3vw,38px) var(--head);margin-top:8px}
.lucky-scene-overlay .lucky-stage{width:min(94vw,75svh,1000px);max-height:none;flex:none;margin:0;background:none;border-radius:0}
.lucky-scene-overlay .lucky-stage canvas{mask-image:radial-gradient(ellipse,#000 38%,transparent 76%)}
.lucky-scene-result{min-height:56px;text-align:center;font:600 clamp(15px,2vw,21px)/1.7 var(--head);color:#ffe5a7;text-shadow:0 2px 10px #000;max-width:90vw;overflow-wrap:anywhere}
.lucky-scene-result small{display:block;font:12px/1.8 var(--body);color:#e2ccb0}
.lucky-scene-skip{position:absolute;top:24px;right:25px;pointer-events:auto;border:1px solid #e5bc7366;border-radius:30px;padding:10px 18px;background:#171022b8;color:#ffe7bd;cursor:pointer;font:13px var(--head)}
#festival.lucky-scene .content{opacity:.06;filter:blur(3px);pointer-events:none}
@media(max-width:640px){.lucky-scene-overlay{padding-top:68px}
.lucky-scene-overlay .lucky-stage{width:100vw}
.lucky-scene-skip{top:18px;right:16px;padding:8px 13px}
.lucky-scene-heading>span{font-size:8px;letter-spacing:3px}
.lucky-scene-result small{font-size:10px}}
@media(max-height:550px) and (min-width:641px){.lucky-scene-overlay{padding:15px}
.lucky-scene-overlay .lucky-stage{width:65svh}
.lucky-scene-heading h2{font-size:22px}
.lucky-scene-heading>span{font-size:8px}
.lucky-scene-result{font-size:14px;min-height:35px}}
body:has(.lucky-scene-overlay:not([hidden])){overflow:hidden}
.lucky-scene-skip{top:auto;bottom:24px}
@media(max-width:640px){.lucky-scene-skip{top:auto;bottom:18px}}
/* ---- ปรับให้เข้ากับส่วนหัวของหน้า home ---- */
#festival .hero-bg{position:absolute;inset:0;z-index:0;background-position:center;background-size:cover;background-repeat:no-repeat;transform:scale(1.04)}
#festival .living-water{z-index:1}
#festival .hero-overlay{z-index:2}
#festival #fx{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
#festival #river-objects{z-index:5}
#festival .hero-char-wrapper{z-index:4}
#festival .moon-meter{top:calc(var(--nav-height,72px) + 18px);z-index:20}
#festival .festival-controls{top:calc(var(--nav-height,72px) + 18px);z-index:20}
#festival .river-item .river-label{font-family:var(--body)}
.festival-dock,.festival-modal,.festival-announcement,.lucky-scene-overlay{font-family:var(--body);color:#eef0f7}
.festival-dock{z-index:1200}.festival-announcement{z-index:1300}.lucky-scene-overlay{z-index:1250}
.hero-fest-btn{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 26px;border-radius:999px;cursor:pointer;font:600 17px 'Kanit',sans-serif;color:#ffe8b0;background:rgba(16,12,30,.6);border:1.5px solid #f3c061;box-shadow:0 0 24px rgba(243,192,97,.28),inset 0 1px 0 rgba(255,255,255,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .16s,box-shadow .16s}
.hero-fest-btn:hover{transform:translateY(-2px);box-shadow:0 0 36px rgba(243,192,97,.5),inset 0 1px 0 rgba(255,255,255,.25)}
.hero-fest-btn small{display:block;font:400 11.5px 'Kanit',sans-serif;color:#d9c79f;line-height:1.1}
.hero-fest-btn span{display:block;text-align:left;line-height:1.15}
.hero-fest-count{margin-top:12px;font:400 13px 'Kanit',sans-serif;color:#e9dcc0;text-shadow:0 2px 8px #000}
.hero-fest-count b{color:#ffe8b0}
@media(max-width:768px){#festival .moon-meter,#festival .festival-controls{top:calc(var(--nav-height,64px) + 10px)}.hero-fest-btn{height:50px;padding:0 18px;font-size:15px}}
/* กระทง/โคมของผู้เล่นกดอ่านคำอธิษฐานได้ แม้ลอยอยู่หลังกล่องเนื้อหากลางจอ */
#festival .hero-content{pointer-events:none}#festival .hero-content>*{pointer-events:auto}
#festival .scroll-indicator{z-index:11}