/**
 * ธีมเทศกาล — ผิวหน้าเว็บตามเทศกาล
 *
 * ทุกกฎผูกกับ <html data-atw="…"> ที่ boot.js ตั้งไว้ ไม่มีธีม = ไม่มีกฎไหนทำงาน หน้าเว็บเหมือนเดิมทุกพิกเซล
 * สีมาจากตัวแปร --atw-* ที่ boot.js ใส่ตามธีม (themes.js) — แก้สีที่ themes.js ที่เดียว
 *
 * ชั้นของที่เปลี่ยน:
 *   1 รูป hero + ม่านสีเทศกาล     5 การ์ด (หิมะเกาะ/ใยแมงมุม/มุมทอง)
 *   2 หัวเว็บสีเทศกาล             6 แถบ CTA + ท้ายเว็บ
 *   3 ปุ่มหลักสีเทศกาล             7 ป้ายคำอวยพร + ของประดับปุ่มแชท
 *   4 ลายพื้นหลัง + ไอคอนหัวข้อ    8 ลูกเล่นเคลื่อนไหว (fx.js)
 */

/* ── ไอคอน/ลายของแต่ละธีม ── */
html[data-atw="xmas"]{--atw-icon:url(/theme/svg/icon-xmas.svg);--atw-pattern:url(/theme/svg/pattern-xmas.svg);--atw-hat:url(/theme/svg/hat-xmas.svg)}
html[data-atw="newyear"]{--atw-icon:url(/theme/svg/icon-newyear.svg);--atw-pattern:url(/theme/svg/pattern-newyear.svg);--atw-hat:url(/theme/svg/hat-newyear.svg)}
html[data-atw="cny"]{--atw-icon:url(/theme/svg/icon-cny.svg);--atw-pattern:url(/theme/svg/pattern-cny.svg);--atw-hat:url(/theme/svg/hat-cny.svg)}
html[data-atw="songkran"]{--atw-icon:url(/theme/svg/icon-songkran.svg);--atw-pattern:url(/theme/svg/pattern-songkran.svg);--atw-hat:url(/theme/svg/hat-songkran.svg)}
html[data-atw="loy"]{--atw-icon:url(/theme/svg/icon-loy.svg);--atw-pattern:url(/theme/svg/pattern-loy.svg);--atw-hat:url(/theme/svg/hat-loy.svg)}
html[data-atw="moon"]{--atw-icon:url(/theme/svg/icon-moon.svg);--atw-pattern:url(/theme/svg/pattern-moon.svg);--atw-hat:url(/theme/svg/hat-moon.svg)}
html[data-atw="halloween"]{--atw-icon:url(/theme/svg/icon-halloween.svg);--atw-pattern:url(/theme/svg/pattern-halloween.svg);--atw-hat:url(/theme/svg/hat-halloween.svg)}
html[data-atw="summer"]{--atw-icon:url(/theme/svg/icon-summer.svg);--atw-pattern:url(/theme/svg/pattern-summer.svg);--atw-hat:url(/theme/svg/hat-summer.svg)}
html[data-atw="rain"]{--atw-icon:url(/theme/svg/icon-rain.svg);--atw-pattern:url(/theme/svg/pattern-rain.svg);--atw-hat:url(/theme/svg/hat-rain.svg)}
html[data-atw="cool"]{--atw-icon:url(/theme/svg/icon-cool.svg);--atw-pattern:url(/theme/svg/pattern-cool.svg);--atw-hat:url(/theme/svg/hat-cool.svg)}
html[data-atw]{--atw-ease:cubic-bezier(.2,.7,.2,1)}

/* ═════ 1. hero ═════ */

html[data-atw] .hero-photo{background:var(--atw-hero) 70% 50%/cover no-repeat}
/* ซ่อนรูปเดิมแทนการลบ — React ยังถือ <img> ตัวนี้อยู่ ลบทิ้งแล้วหน้าเว็บพัง */
html[data-atw] .hero-photo img{opacity:0 !important}
html[data-atw] .hero::after{background:linear-gradient(90deg,var(--atw-c1),var(--atw-gold) 50%,var(--atw-c2));height:5px}

/* ม่านเข้ม: เทศกาลกลางคืน — ซ้ายเข้มพอให้ตัวหนังสือขาวอ่านชัด ขวาเปิดให้เห็นฉากเทศกาลในรูป */
html[data-atw-overlay="dark"] .hero{background:linear-gradient(160deg,rgb(var(--atw-deep)) 0%,#05070d 100%);border-bottom-color:transparent}
html[data-atw-overlay="dark"] .hero-scrim{background:
  linear-gradient(90deg,rgba(var(--atw-deep),.94) 0%,rgba(var(--atw-deep),.86) 34%,rgba(var(--atw-deep),.4) 62%,rgba(var(--atw-deep),.08) 100%),
  linear-gradient(180deg,rgba(var(--atw-deep),.45) 0%,rgba(var(--atw-deep),0) 26%,rgba(var(--atw-deep),0) 70%,rgba(var(--atw-deep),.75) 100%) !important}
html[data-atw-overlay="dark"] .hero::before{background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px)}
html[data-atw-overlay="dark"] .hero h1{color:#fff;text-shadow:0 2px 28px rgba(0,0,0,.35)}
html[data-atw-overlay="dark"] .hero .lead{color:rgba(255,255,255,.86)}
html[data-atw-overlay="dark"] .hero .btn-outline{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45);color:#fff;box-shadow:none;backdrop-filter:blur(6px)}
html[data-atw-overlay="dark"] .hero .btn-outline:hover{background:rgba(255,255,255,.18);border-color:#fff;color:#fff}

/* ม่านสว่าง: ฤดูกลางวัน — เปิดฝั่งขวาให้เห็นรูปมากกว่าเดิม */
html[data-atw-overlay="light"] .hero-scrim{background:
  linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.88) 36%,rgba(255,255,255,.42) 64%,rgba(255,255,255,.06) 100%),
  linear-gradient(180deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 70%,var(--surface-1) 100%) !important}
html[data-theme="dark"][data-atw-overlay="light"] .hero-scrim{background:
  linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.82) 36%,rgba(0,0,0,.35) 64%,rgba(0,0,0,.05) 100%),
  linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 70%,#000 100%) !important}

/* ป้ายคำอวยพรเหนือหัวเรื่อง */
.atw-greet{display:flex;align-items:center;gap:14px;margin:0 0 20px;max-width:640px}
.atw-greet-icon{width:56px;height:56px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 0 30px color-mix(in srgb,var(--atw-gold) 30%,transparent)}
.atw-greet-icon img{width:32px;height:32px;display:block}
.atw-greet-txt{display:flex;flex-direction:column;min-width:0}
.atw-script{display:block;line-height:1.12;color:var(--atw-gold);text-shadow:0 0 22px color-mix(in srgb,var(--atw-gold) 50%,transparent);white-space:nowrap}
.atw-f-latin{font-family:var(--font-fest-latin),cursive;font-weight:400;font-size:50px;line-height:1}
.atw-f-thai{font-family:var(--font-fest-thai),cursive;font-weight:700;font-size:38px}
.atw-f-fun{font-family:var(--font-fest-fun),sans-serif;font-weight:700;font-size:34px}
.atw-greet small{display:block;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.84);margin-top:4px}
.atw-greet small b{font-family:var(--font-mono);font-weight:600;color:#fff;letter-spacing:.02em}
html[data-atw-overlay="light"] .atw-script{color:color-mix(in srgb,var(--atw-c1) 70%,#000);text-shadow:0 1px 0 rgba(255,255,255,.6)}
html[data-atw-overlay="light"] .atw-greet small{color:var(--ink-600)}
html[data-atw-overlay="light"] .atw-greet small b{color:var(--navy-900)}
html[data-atw-overlay="light"] .atw-greet-icon{background:#fff;box-shadow:0 6px 18px rgba(10,21,36,.12)}
.atw-act{margin-left:4px;flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid color-mix(in srgb,var(--atw-gold) 60%,transparent);background:color-mix(in srgb,var(--atw-gold) 16%,transparent);color:#fff;font:600 14px var(--font-body);cursor:pointer;transition:transform .18s var(--atw-ease),background .18s}
.atw-act:hover{background:color-mix(in srgb,var(--atw-gold) 30%,transparent);transform:translateY(-1px)}
html[data-atw-overlay="light"] .atw-act{color:color-mix(in srgb,var(--atw-c1) 70%,#000);border-color:var(--atw-c1);background:#fff}
html:not([data-atw-still]) .atw-greet{animation:atw-rise .8s var(--atw-ease) both}
@keyframes atw-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:640px){.atw-f-latin{font-size:40px}.atw-f-thai{font-size:30px}.atw-f-fun{font-size:28px}.atw-greet-icon{width:46px;height:46px}.atw-script{white-space:normal}.atw-greet{flex-wrap:wrap}}

/* ═════ 2. หัวเว็บ ═════ */

html[data-atw-kind="fest"] .site-header{background:linear-gradient(180deg,color-mix(in srgb,var(--atw-header) 88%,#fff),var(--atw-header));border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 8px 28px rgba(0,0,0,.18)}
html[data-atw-kind="fest"] .site-header .logo{color:#fff}
html[data-atw-kind="fest"] .site-header .logo small{color:rgba(255,255,255,.86)}
html[data-atw-kind="fest"] .site-header .logo-img{filter:drop-shadow(0 2px 10px rgba(0,0,0,.45))}
@media (min-width:1151px){
  html[data-atw-kind="fest"] .nav a{color:#fff}
  html[data-atw-kind="fest"] .nav a:hover{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);box-shadow:none}
  html[data-atw-kind="fest"] .nav a.active{color:var(--atw-gold);background:rgba(0,0,0,.28);box-shadow:inset 0 -2px 0 var(--atw-gold)}
}
html[data-atw-kind="fest"] .site-header .hdr-right .langsw{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2)}
html[data-atw-kind="fest"] .site-header .hdr-right .langsw a{color:rgba(255,255,255,.92)}
html[data-atw-kind="fest"] .site-header .langsw a.on{background:var(--atw-gold);color:#1A1206}
html[data-atw-kind="fest"] .site-header .theme-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#fff}
html[data-atw-kind="fest"] .site-header .burger{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.26)}
html[data-atw-kind="fest"] .site-header .burger span{background:#fff;box-shadow:0 -6px 0 #fff,0 6px 0 #fff}
/* ปุ่มหลักบนหัวเว็บสีเทศกาล: ใช้สีทองทุกเทศกาล — สีหลักบางเทศกาลใกล้สีหัวเว็บจนปุ่มกลืนหาย (สงกรานต์ฟ้าบนฟ้า) */
html[data-atw-kind="fest"] .site-header .btn-primary{background:linear-gradient(180deg,color-mix(in srgb,var(--atw-gold) 75%,#fff),var(--atw-gold));color:#1A1206;box-shadow:0 4px 16px rgba(0,0,0,.25)}
html[data-atw-kind="fest"] .site-header .btn-primary:hover{background:var(--atw-gold);color:#1A1206}
/* ฤดู: หัวเว็บยังขาว แต่มีแถบสีฤดูด้านบน + สีเมนูเปลี่ยนตาม */
html[data-atw-kind="season"] .site-header{box-shadow:inset 0 4px 0 var(--atw-c1)}
/* สีเมนูบนพื้นขาว (หัวเว็บฤดู + เมนูมือถือที่เป็นแผ่นขาว) — ใช้สีหลักแบบเข้มขึ้น ให้ผ่านเกณฑ์อ่านง่ายทุกธีม */
html[data-atw-kind="season"] .nav a:hover{color:color-mix(in srgb,var(--atw-c1) 62%,#000);background:color-mix(in srgb,var(--atw-c1) 9%,transparent);border-color:color-mix(in srgb,var(--atw-c1) 30%,transparent);box-shadow:none}
html[data-atw-kind="season"] .nav a.active{color:color-mix(in srgb,var(--atw-c1) 62%,#000);background:color-mix(in srgb,var(--atw-c1) 9%,transparent)}
@media (max-width:1150px){
  html[data-atw-kind="fest"] .nav a:hover{color:var(--navy-900);background:color-mix(in srgb,var(--atw-c1) 10%,transparent);border-color:color-mix(in srgb,var(--atw-c1) 30%,transparent);box-shadow:none}
  html[data-atw-kind="fest"] .nav a.active{color:var(--navy-900);font-weight:600;background:color-mix(in srgb,var(--atw-c1) 12%,transparent);box-shadow:inset 3px 0 0 var(--atw-c1)}
}

/* ของห้อยใต้หัวเว็บ (ไฟ/โคม/พวงมาลัย) — เลื่อนหน้าลงแล้วจางหาย ไม่ห้อยบังตอนอ่าน */
.atw-hang{position:absolute;left:0;right:0;top:100%;height:0;pointer-events:none;z-index:6;transition:opacity .35s var(--atw-ease),transform .35s var(--atw-ease)}
html.atw-scrolled .atw-hang{opacity:0;transform:translateY(-12px)}
html.atw-scrolled .atw-hang *{pointer-events:none !important}

/* ═════ 3. ปุ่ม ═════ */

html[data-atw] .btn-primary{background:linear-gradient(180deg,var(--atw-btn-a),var(--atw-btn-b));color:var(--atw-on-c1);box-shadow:0 4px 16px color-mix(in srgb,var(--atw-c1) 42%,transparent),inset 0 1px 0 rgba(255,255,255,.28)}
html[data-atw] .btn-primary:hover{background:linear-gradient(180deg,var(--atw-btn-b),color-mix(in srgb,var(--atw-btn-b) 85%,#000));color:var(--atw-on-c1);box-shadow:0 8px 22px color-mix(in srgb,var(--atw-c1) 50%,transparent)}
html[data-atw] .process>div::before{background:linear-gradient(150deg,var(--atw-btn-a),var(--atw-btn-b));color:var(--atw-on-c1)}
html[data-atw] .chatfab-btn{position:relative;background:linear-gradient(150deg,var(--atw-btn-a),var(--atw-btn-b));color:var(--atw-on-c1);box-shadow:0 8px 26px color-mix(in srgb,var(--atw-c1) 48%,transparent)}
html[data-atw] .chatfab-btn:hover{box-shadow:0 12px 32px color-mix(in srgb,var(--atw-c1) 58%,transparent)}
html[data-atw] :is(.field input,.field select,.field textarea):focus{border-color:var(--atw-c1);box-shadow:0 0 0 3px color-mix(in srgb,var(--atw-c1) 18%,transparent)}

/* ของประดับบนปุ่มแชท (หมวกซานต้า ฯลฯ) — span ที่ decor.js เติม */
.atw-hat{position:absolute;pointer-events:none;background:var(--atw-hat) center/contain no-repeat;z-index:2}
html[data-atw="xmas"] .atw-hat{width:50px;height:41px;left:-16px;top:-26px;transform:rotate(-20deg)}
html[data-atw="newyear"] .atw-hat{width:34px;height:40px;left:-6px;top:-30px;transform:rotate(-16deg)}
html[data-atw="cny"] .atw-hat{width:26px;height:38px;left:-10px;top:-8px;transform-origin:50% 0}
html[data-atw="halloween"] .atw-hat{width:54px;height:41px;left:-14px;top:-27px;transform:rotate(-14deg)}
html[data-atw="songkran"] .atw-hat{width:40px;height:35px;left:-12px;top:-18px}
html[data-atw="loy"] .atw-hat{width:46px;height:33px;left:-10px;top:-24px;transform:rotate(-10deg)}
html[data-atw="moon"] .atw-hat{width:46px;height:37px;left:-4px;top:-30px;transform:rotate(-10deg)}
html[data-atw="summer"] .atw-hat{width:46px;height:19px;left:-10px;top:-12px;transform:rotate(-12deg)}
html[data-atw="rain"] .atw-hat{width:50px;height:43px;left:-8px;top:-34px;transform:rotate(-8deg)}
html[data-atw="cool"] .atw-hat{width:44px;height:35px;left:-10px;top:-24px;transform:rotate(-12deg)}
html:not([data-atw-still])[data-atw="cny"] .atw-hat{animation:atw-swing 2.8s ease-in-out infinite}

/* ═════ 4. พื้นหลัง + หัวข้อ ═════ */

html[data-atw] body{background-image:var(--atw-pattern);background-size:160px 160px}
html[data-theme="dark"][data-atw] body{background-blend-mode:soft-light}
/* หัวข้อ section ของเว็บมีแถบส้มเป็น ::before (absolute ชิดซ้าย) — แทนแถบนั้นด้วยไอคอนเทศกาล ไม่เพิ่มของใหม่ */
html[data-atw] .section-head :is(h1,h2){padding-left:1.45em}
html[data-atw] .section-head :is(h1,h2)::before{top:50%;bottom:auto;left:0;width:1.1em;height:1.1em;margin-top:-.55em;border-radius:0;background:var(--atw-icon) center/contain no-repeat}
html[data-atw] .band h2::before{content:"";display:inline-block;width:1.05em;height:1.05em;margin-right:.38em;vertical-align:-.14em;background:var(--atw-icon) center/contain no-repeat}

/* ═════ 5. การ์ด ═════ */

html[data-atw] .title-block::before{background:linear-gradient(90deg,var(--atw-c1),var(--atw-gold));height:5px}
html[data-atw] .line.mfg::before,html[data-atw] .line.auto::before{height:6px}
html[data-atw] :is(.pcard,.case):hover{box-shadow:0 14px 34px color-mix(in srgb,var(--atw-c1) 20%,transparent),0 0 0 1px color-mix(in srgb,var(--atw-c1) 35%,transparent)}
/* คริสต์มาส: หิมะเกาะขอบบนการ์ด */
html[data-atw="xmas"] :is(.pcard,.case,.line,.title-block,.card,.panel)::after{content:"";position:absolute;left:0;right:0;top:0;height:18px;background:url(/theme/svg/snowcap.svg) 0 0/120px 18px repeat-x;pointer-events:none;z-index:4;filter:drop-shadow(0 2px 2px rgba(80,110,140,.18))}
/* ฮาโลวีน: ใยแมงมุมมุมขวาบน */
html[data-atw="halloween"] :is(.pcard,.case,.line,.title-block)::after{content:"";position:absolute;top:0;right:0;width:64px;height:64px;background:url(/theme/svg/web-corner.svg) no-repeat;pointer-events:none;z-index:4}
/* ตรุษจีน/ไหว้พระจันทร์: มุมทองแบบกรอบลายจีน */
html:is([data-atw="cny"],[data-atw="moon"]) :is(.pcard,.case,.line,.title-block)::after{content:"";position:absolute;inset:6px;background:url(/theme/svg/gold-corner.svg) top left/30px no-repeat,url(/theme/svg/gold-corner-br.svg) bottom right/30px no-repeat;pointer-events:none;z-index:4;opacity:.9}
/* เทศกาลอื่น ๆ: แถบสีบนการ์ด */
html:is([data-atw="newyear"],[data-atw="loy"],[data-atw="songkran"],[data-atw="summer"],[data-atw="rain"],[data-atw="cool"]) :is(.pcard,.case)::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--atw-c1),var(--atw-gold));z-index:4}

/* ═════ 6. แถบ CTA + ท้ายเว็บ ═════ */

html[data-atw-kind="fest"] .band{background:rgb(var(--atw-deep))}
html[data-atw-kind="fest"] .band-scrim{background:linear-gradient(90deg,rgba(var(--atw-deep),.96) 0%,rgba(var(--atw-deep),.9) 42%,rgba(var(--atw-deep),.7) 72%,rgba(var(--atw-deep),.55) 100%) !important}
html[data-atw-kind="fest"] .band p{color:rgba(255,255,255,.84)}
html[data-atw] .band::after{background:linear-gradient(90deg,var(--atw-c1),var(--atw-gold) 55%,var(--atw-c2));height:5px}
html[data-atw] .footer{position:relative;border-top-color:transparent}
html[data-atw] .footer::before{content:"";position:absolute;left:0;right:0;top:-3px;height:6px;background:linear-gradient(90deg,var(--atw-c1),var(--atw-gold),var(--atw-c2))}
.atw-foot-greet{display:flex;align-items:center;gap:10px;margin:0 0 22px;padding:14px 18px;border-radius:12px;background:color-mix(in srgb,var(--atw-c1) 8%,var(--card));border:1px solid color-mix(in srgb,var(--atw-c1) 22%,transparent);color:var(--ink-700);font-size:14.5px}
.atw-foot-greet img{width:26px;height:26px;flex:none}
.atw-foot-greet b{color:var(--navy-900);font-family:var(--font-head);font-weight:600}

.atw-toast{position:fixed;left:50%;top:92px;z-index:90;transform:translate(-50%,-8px);opacity:0;padding:10px 18px;border-radius:999px;background:rgba(17,21,31,.92);color:#fff;font:600 14px var(--font-body);box-shadow:0 10px 30px rgba(0,0,0,.3);pointer-events:none;transition:opacity .22s,transform .22s}
.atw-toast.show{opacity:1;transform:translate(-50%,0)}

/* ═════ 8. ลูกเล่นเคลื่อนไหว — ชั้นวาด ═════ */

/* canvas เป็น replaced element: inset:0 อย่างเดียวไม่ยืด (ค้างที่ 300×150) ต้องบอกกว้าง/สูงเอง */
.atw-hero-fx{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none}
.atw-hero-dom{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.atw-hero-dom.atw-under{z-index:1}
.atw-hit{pointer-events:auto;cursor:pointer}
.atw-fixed-fx{position:fixed;inset:0;pointer-events:none;z-index:39}
/* มือถือ: รูป hero แยกไปอยู่บนสุด (สัดส่วน 16:10) ลูกเล่นต้องอยู่แค่ในรูป ไม่ไปทับตัวหนังสือข้างล่าง */
@media (max-width:900px){.atw-hero-fx,.atw-hero-dom{bottom:auto;height:62.5vw}}

/* ── ไฟคริสต์มาส ── */
/* หน้าอื่นนอกหน้าแรก: ไฟห้อยลงมา ~30px เคยทับ breadcrumb — ดันเนื้อหาส่วนบนลงให้พ้นไฟ */
html[data-atw="xmas"] body:not(:has(.hero)) .crumbs{padding-top:46px}
.atw-lights{position:absolute;left:0;right:0;top:0;height:56px}
.atw-lights svg{position:absolute;left:0;top:0;overflow:visible}
.atw-wire-hit{pointer-events:stroke;cursor:pointer}
.atw-bulb{position:absolute;width:13px;height:25px;margin-left:-6.5px;transform-origin:50% 0;transform:rotate(var(--r));border:0;padding:0;background:none;cursor:pointer;pointer-events:auto}
.atw-bulb i{position:absolute;display:block}
.atw-bulb .cap{left:3.5px;top:0;width:6px;height:7px;border-radius:2px 2px 1px 1px;background:linear-gradient(90deg,#10261A,#3E6F52 45%,#10261A)}
.atw-bulb .off,.atw-bulb .lit{left:0;top:6px;width:13px;height:19px;border-radius:50% 50% 50% 50% / 40% 40% 60% 60%}
.atw-bulb .off{background:radial-gradient(circle at 42% 30%,color-mix(in srgb,var(--c) 35%,#fff) 0,color-mix(in srgb,var(--c) 45%,#000) 75%)}
.atw-bulb .lit{background:radial-gradient(circle at 46% 36%,#fff 0 9%,color-mix(in srgb,var(--c) 40%,#fff) 26%,var(--c) 62%,color-mix(in srgb,var(--c) 78%,#000) 100%);box-shadow:0 0 4px 1px color-mix(in srgb,var(--c) 80%,#fff),0 0 14px 4px color-mix(in srgb,var(--c) 62%,transparent),0 0 38px 12px color-mix(in srgb,var(--c) 26%,transparent)}
.atw-bulb .lit::after{content:"";position:absolute;left:3px;top:3px;width:3px;height:6px;border-radius:50%;background:rgba(255,255,255,.88)}
/* ความสว่างแต่ละหลอดตั้งจาก fx.js ทุกเฟรม (จังหวะแบบกล่องควบคุมจริง) — ห้ามใส่ animation ที่ .lit จะทับค่าของ JS */
.atw-ctl{position:absolute;left:4px;top:-8px;width:34px;height:26px;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.atw-ctl:hover{transform:translateY(-1px)}
.atw-ctl:focus-visible{outline:2px solid #FFD66B;outline-offset:2px;border-radius:6px}
html:not([data-atw-still]) .atw-ctl .led{animation:atw-led 1.2s steps(1) infinite}
@keyframes atw-led{50%{opacity:.25}}
.atw-bulb.pop .lit{animation:atw-pop .45s ease-out}
@keyframes atw-pop{0%{transform:scale(1)}30%{transform:scale(1.35)}100%{transform:scale(1)}}

/* ── โคมแดง / พวงมาลัย / โคมกระดาษ (แกว่ง) ── */
.atw-swing{position:absolute;top:0;transform-origin:50% 0;pointer-events:auto;cursor:pointer}
html:not([data-atw-still]) .atw-swing{animation:atw-swing var(--t,3.2s) ease-in-out var(--d,0s) infinite}
.atw-swing.kick{animation:atw-kick 1.6s ease-out}
@keyframes atw-swing{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}}
@keyframes atw-kick{0%{transform:rotate(0)}15%{transform:rotate(18deg)}35%{transform:rotate(-13deg)}55%{transform:rotate(8deg)}75%{transform:rotate(-4deg)}100%{transform:rotate(0)}}
.atw-swing .glow{position:absolute;left:50%;top:60%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--g,#ff5a3c) 45%,transparent),transparent 68%);pointer-events:none}
html:not([data-atw-still]) .atw-swing .glow{animation:atw-flicker 2.6s ease-in-out infinite}
@keyframes atw-flicker{0%,100%{opacity:.9}45%{opacity:.6}70%{opacity:1}}

/* ── ซองแดง ── */
.atw-env{position:absolute;top:-70px;width:40px;height:54px;pointer-events:auto;cursor:pointer;will-change:transform}
.atw-env svg{width:100%;height:100%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.atw-env.open svg{animation:atw-open .5s ease-out forwards}
@keyframes atw-open{to{transform:scale(1.5) rotate(0);opacity:0}}
.atw-bless{position:absolute;z-index:5;transform:translate(-50%,-110%);padding:10px 16px;border-radius:14px;background:linear-gradient(180deg,#C8102E,#8B0A1A);color:#FFE9A8;font:600 15px "IBM Plex Sans Thai",sans-serif;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 0 0 1px rgba(242,193,78,.6);pointer-events:none;animation:atw-bless 2.6s ease-out forwards}
@keyframes atw-bless{0%{opacity:0;margin-top:10px}12%{opacity:1;margin-top:0}80%{opacity:1}100%{opacity:0;margin-top:-14px}}

/* ── ผีน้อย / ค้างคาว / แมงมุม ── */
.atw-ghost{position:absolute;width:74px;pointer-events:auto;cursor:pointer;filter:drop-shadow(0 0 18px rgba(220,200,255,.45));transition:left .7s cubic-bezier(.2,.8,.2,1),top .7s cubic-bezier(.2,.8,.2,1)}
html:not([data-atw-still]) .atw-ghost .g{animation:atw-float var(--t,4.6s) ease-in-out var(--d,0s) infinite}
@keyframes atw-float{0%,100%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(10px,-18px) rotate(3deg)}}
.atw-ghost.boo .g{animation:atw-boo .9s ease-in forwards !important}
@keyframes atw-boo{20%{transform:scale(1.25) rotate(-8deg)}100%{transform:translate(120px,-260px) scale(.4);opacity:0}}
.atw-ghost .eyes{transform-origin:center;animation:atw-blink 4.2s infinite}
@keyframes atw-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.atw-say{position:absolute;padding:6px 12px;border-radius:12px;background:#fff;color:#2A1050;font:700 16px var(--font-fest-fun),sans-serif;transform:translate(-50%,-100%);pointer-events:none;animation:atw-bless 1.4s ease-out forwards}
.atw-bat{position:absolute;width:44px;pointer-events:none}
.atw-bat .w{transform-origin:50% 40%;animation:atw-flap .22s ease-in-out infinite alternate}
@keyframes atw-flap{to{transform:scaleY(.35)}}
.atw-spider{position:absolute;top:0;width:30px;pointer-events:auto;cursor:pointer;will-change:transform}
.atw-spider svg{display:block}
.atw-spider .legs{transform-origin:20px 22px}
.atw-spider .thread{position:absolute;left:50%;bottom:100%;width:1px;height:600px;background:linear-gradient(transparent,rgba(255,255,255,.65))}


/* ── ลอยกระทง: แม่น้ำ + กระทง + โคมลอย ── */
.atw-river{position:absolute;left:0;right:0;bottom:0;height:92px;pointer-events:none}
.atw-river .wave{position:absolute;left:0;bottom:0;width:200%;height:100%;background-repeat:repeat-x}
html:not([data-atw-still]) .atw-river .w1{animation:atw-slide 18s linear infinite}
html:not([data-atw-still]) .atw-river .w2{animation:atw-slide 11s linear infinite reverse}
@keyframes atw-slide{to{transform:translateX(-50%)}}
.atw-kt{position:absolute;bottom:18px;width:70px;pointer-events:auto;cursor:pointer;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
.atw-kt .flame{transform-origin:50% 100%}
html:not([data-atw-still]) .atw-kt .flame{animation:atw-flame .5s ease-in-out infinite alternate}
@keyframes atw-flame{to{transform:scaleY(1.18) scaleX(.9)}}
.atw-kt .halo{position:absolute;left:50%;top:-6px;width:70px;height:70px;margin-left:-35px;border-radius:50%;background:radial-gradient(circle,rgba(255,190,90,.55),transparent 65%);pointer-events:none}
.atw-sky{position:absolute;width:28px;height:36px;pointer-events:none;will-change:transform}
.atw-sky::before{content:"";position:absolute;inset:0;border-radius:42% 42% 30% 30% / 55% 55% 30% 30%;background:radial-gradient(circle at 50% 75%,#FFF1C2 0,#FFB347 35%,#E36C1E 75%,rgba(160,60,10,.9) 100%);box-shadow:0 0 18px 6px rgba(255,160,60,.45),0 0 60px 20px rgba(255,140,40,.18)}

/* ── ไหว้พระจันทร์: พระจันทร์ + โคมกระดาษ + กระต่าย ── */
.atw-moon{position:absolute;right:7%;top:9%;width:150px;height:150px;border-radius:50%;pointer-events:auto;cursor:pointer;background:radial-gradient(circle at 38% 34%,#FFF8DC 0,#FBE3A1 38%,#EFC66B 70%,#D9A441 100%);box-shadow:0 0 50px 18px rgba(255,214,120,.45),0 0 140px 60px rgba(255,200,90,.18)}
.atw-moon::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 62% 60%,rgba(190,140,60,.28) 0 10%,transparent 11%),radial-gradient(circle at 36% 64%,rgba(190,140,60,.2) 0 7%,transparent 8%),radial-gradient(circle at 58% 30%,rgba(190,140,60,.18) 0 6%,transparent 7%)}
html:not([data-atw-still]) .atw-moon{animation:atw-moonglow 5s ease-in-out infinite}
@keyframes atw-moonglow{50%{box-shadow:0 0 70px 26px rgba(255,214,120,.55),0 0 170px 70px rgba(255,200,90,.22)}}
.atw-rabbit{position:absolute;width:56px;pointer-events:none;filter:drop-shadow(0 0 10px rgba(255,255,255,.6))}

/* ── สงกรานต์/หน้าร้อน: ปืนฉีดน้ำ ── */
/* วางต่ำมุมขวาล่าง (แถบว่างใต้ตารางข้อมูล) · จุดหมุนที่ด้ามจับ ตรงกับที่ fx.js คำนวณปากกระบอก */
.atw-gun{position:absolute;right:28px;bottom:10px;width:150px;pointer-events:auto;cursor:pointer;transform-origin:84% 72%;transition:transform .22s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}
@media (max-width:900px){.atw-gun{width:104px;right:12px;bottom:8px}}
.atw-gun.fire{animation:atw-recoil .22s ease-out}
@keyframes atw-recoil{30%{translate:10px 0}}
html:not([data-atw-still]) .atw-gun{animation:atw-peek 3.4s ease-in-out infinite}
@keyframes atw-peek{0%,100%{translate:0 0}50%{translate:0 -4px}}

/* ── หน้าร้อน: แสงแดด ── */
.atw-sun{position:absolute;right:-180px;top:-220px;width:620px;height:620px;border-radius:50%;pointer-events:none;background:repeating-conic-gradient(from 0deg,rgba(255,214,90,.2) 0 6deg,rgba(255,214,90,0) 6deg 18deg);mask-image:radial-gradient(circle,#000 0,#000 30%,transparent 70%);-webkit-mask-image:radial-gradient(circle,#000 0,#000 30%,transparent 70%)}
html:not([data-atw-still]) .atw-sun{animation:atw-spin 60s linear infinite}
.atw-sun::after{content:"";position:absolute;left:50%;top:50%;width:200px;height:200px;margin:-100px;border-radius:50%;background:radial-gradient(circle,rgba(255,240,180,.85),rgba(255,200,80,.35) 40%,transparent 70%)}
@keyframes atw-spin{to{transform:rotate(360deg)}}

/* ── หน้าหนาว: หมอก ── */
.atw-mist{position:absolute;width:70%;height:50%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,255,255,.34),rgba(255,255,255,0) 65%);filter:blur(10px);pointer-events:none;will-change:transform}
html:not([data-atw-still]) .atw-mist{animation:atw-drift var(--t,40s) linear var(--d,0s) infinite}
@keyframes atw-drift{0%{transform:translateX(-30%)}50%{transform:translateX(30%)}100%{transform:translateX(-30%)}}

@media (prefers-reduced-motion:reduce){html:not([data-atw-motion-forced]) .atw-greet{animation:none}}

/* ── หน้าร้อน: ต้นมะพร้าว · นกนางนวล · ลูกบอลชายหาด ── */
.atw-palm{position:absolute;bottom:0;aspect-ratio:220/420;pointer-events:none;transform-origin:60% 100%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
html:not([data-atw-still]) .atw-palm{animation:atw-palm-trunk 7s ease-in-out var(--d,0s) infinite}
.atw-palm .crown{transform-box:view-box;transform-origin:92px 92px}
html:not([data-atw-still]) .atw-palm .crown{animation:atw-palm-crown 4.6s ease-in-out var(--d,0s) infinite}
@keyframes atw-palm-trunk{0%,100%{transform:rotate(-.8deg)}50%{transform:rotate(1deg)}}
@keyframes atw-palm-crown{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg)}}
.atw-gull{position:absolute;left:0;top:0;width:38px;pointer-events:none;will-change:transform}
html:not([data-atw-still]) .atw-gull .w{transform-box:fill-box;transform-origin:50% 60%;animation:atw-flap .32s ease-in-out infinite alternate}
.atw-ball{position:absolute;left:0;top:0;width:46px;pointer-events:auto;cursor:pointer;will-change:transform;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25))}
@media (max-width:900px){.atw-palm{max-height:100%}}

/* ── โหมดมืดของเว็บ (ปุ่ม สว่าง/มืด) × ธีมฤดู: สีหลักแบบเข้มที่ใช้บนพื้นขาวจะจมหายบนพื้นดำ — กลับเป็นแบบสว่าง ── */
html[data-theme="dark"][data-atw-kind="season"] .nav a:hover,
html[data-theme="dark"][data-atw-kind="season"] .nav a.active{color:color-mix(in srgb,var(--atw-c1) 55%,#fff)}
html[data-theme="dark"][data-atw-overlay="light"] .atw-script{color:color-mix(in srgb,var(--atw-c1) 55%,#fff);text-shadow:none}
html[data-theme="dark"][data-atw-overlay="light"] .atw-act{color:color-mix(in srgb,var(--atw-c1) 55%,#fff);background:transparent}
html[data-theme="dark"][data-atw-overlay="light"] .atw-greet-icon{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}