/* /halloween.css — ธีมฮาโลวีนโทนส้ม เรียบง่าย เบาเครื่อง (ส้มฟักทอง ใยแมงมุม ค้างคาว แสงเทียน)
   ทุกกฎขึ้นต้นด้วย html.halloween จึงมีผลเฉพาะตอนเปิดธีมเท่านั้น — ถอดคลาสออกแล้วเว็บกลับเป็นปกติ
   ไม่แก้ niv.css: กฎที่ทับใช้ specificity สูงกว่า (html.halloween + selector เดิม)
   ปรับให้ลื่น: ไม่ใช้ background-attachment:fixed, ไม่มี filter/drop-shadow ที่เคลื่อนไหว, animate เฉพาะ transform/opacity */

/* ---------- ตัวแปรสี ---------- */
html.halloween{
  --hw-bg:#fff5ea;
  --hw-txt:#c2410c;
  --hw-txt-h:#ea580c;
  --hw-rgb:249 115 22;       /* ส้มหลักแบบ r g b */
  --hw-g1:#ea580c;
  --hw-g2:#f97316;
  --hw-g3:#f59e0b;
  --hw-b1:#c2410c;
  --hw-b2:#ea580c;
  --hw-b3:#f59e0b;
  --hw-line:rgb(249 115 22 / .25);
  --hw-web:#9a3412;
  --hw-gh:#431407;
  accent-color:#f97316;
  color-scheme:light;
}
html.halloween.dark{
  --hw-bg:#110a05;
  --hw-txt:#fdba74;
  --hw-txt-h:#fed7aa;
  --hw-rgb:251 146 60;
  --hw-g1:#ea580c;
  --hw-g2:#f97316;
  --hw-g3:#f59e0b;
  --hw-b1:#fdba74;
  --hw-b2:#fb923c;
  --hw-b3:#fbbf24;
  --hw-line:rgb(251 146 60 / .22);
  --hw-web:#fdba74;
  --hw-gh:#9a3412;
  color-scheme:dark;
}

/* ---------- พื้นหลัง: สีเรียบ + แสงอุ่นที่ขอบ (วาดบน layer fixed ของ JS ไม่ repaint ตอนเลื่อน) ---------- */
html.halloween body{background-color:var(--hw-bg)!important}
.hw-glow{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(800px 480px at 50% -10%,rgb(251 146 60 / .22),transparent 70%),
    radial-gradient(600px 400px at 100% 100%,rgb(234 88 12 / .16),transparent 70%)}
html.halloween.dark .hw-glow{
  background:
    radial-gradient(800px 480px at 50% -10%,rgb(234 88 12 / .22),transparent 70%),
    radial-gradient(600px 400px at 100% 100%,rgb(194 65 12 / .22),transparent 70%)}

/* ก้อนแสงเบลอของหน้า SSR: แค่เปลี่ยนเป็นส้ม ไม่ animate (เบลอ + animate = กระตุก) */
html.halloween body>.fixed.inset-0.pointer-events-none>div:first-child{background:rgb(234 88 12 / .28)!important}
html.halloween body>.fixed.inset-0.pointer-events-none>div:nth-child(2){background:rgb(245 158 11 / .2)!important}

html.halloween ::selection{background:rgb(249 115 22 / .45);color:#fff}
html.halloween{scrollbar-color:#c2410c transparent}

/* ---------- ปุ่ม/ไล่สี Tailwind ---------- */
html.halloween :is([class^="from-amber-"],[class*=" from-amber-"],[class^="from-orange-"],[class*=" from-orange-"]){
  --tw-gradient-from:var(--hw-g1) var(--tw-gradient-from-position)!important;
  --tw-gradient-to:rgb(234 88 12 / 0) var(--tw-gradient-to-position)!important;
  --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important;
}
html.halloween :is([class^="via-amber-"],[class*=" via-amber-"],[class^="via-orange-"],[class*=" via-orange-"]){
  --tw-gradient-stops:var(--tw-gradient-from),var(--hw-g2) var(--tw-gradient-via-position),var(--tw-gradient-to)!important;
}
html.halloween :is([class^="to-amber-"],[class*=" to-amber-"],[class^="to-orange-"],[class*=" to-orange-"],[class^="to-red-"],[class*=" to-red-"]){
  --tw-gradient-to:var(--hw-g3) var(--tw-gradient-to-position)!important;
}
html.halloween .nv-brand{background-image:linear-gradient(to right,var(--hw-b1),var(--hw-b2),var(--hw-b3))!important}

/* ตัวอักษร / เส้นขอบ / พื้นหลังโปร่ง / เงา / วงแหวนโฟกัส */
html.halloween :is([class^="text-amber-"],[class*=" text-amber-"],[class^="text-orange-"],[class*=" text-orange-"]){color:var(--hw-txt)!important}
html.halloween :is([class*="hover:text-amber-"],[class*="hover:text-orange-"]):hover{color:var(--hw-txt-h)!important}
html.halloween :is([class^="border-amber-"],[class*=" border-amber-"],[class^="border-orange-"],[class*=" border-orange-"]){border-color:rgb(249 115 22 / .4)!important}
html.halloween :is([class*="hover:border-amber-"],[class*="focus:border-amber-"]):is(:hover,:focus){border-color:rgb(251 146 60 / .85)!important}
html.halloween :is([class^="bg-amber-"],[class*=" bg-amber-"],[class^="bg-orange-"],[class*=" bg-orange-"]){background-color:rgb(var(--hw-rgb) / .14)!important}
html.halloween :is([class*="hover:bg-amber-"],[class*="hover:bg-orange-"]):hover{background-color:rgb(var(--hw-rgb) / .24)!important}
html.halloween :is([class^="shadow-amber-"],[class*=" shadow-amber-"],[class^="shadow-orange-"],[class*=" shadow-orange-"]){--tw-shadow-color:rgb(var(--hw-rgb) / .38)!important}
html.halloween :is([class*="ring-amber-"],[class*="ring-orange-"]){--tw-ring-color:rgb(251 146 60 / .5)!important}
html.halloween :is([class^="accent-amber-"],[class*=" accent-amber-"]){accent-color:#f97316!important}

/* ---------- แถบบน / แถบล่างมือถือ / เมนูข้าง ---------- */
html.halloween #main-header .sticky{border-bottom-color:var(--hw-line)!important}
html.halloween.dark #main-header .sticky{background-color:rgb(17 10 5 / .85)!important}
html.halloween:not(.dark) #main-header .sticky{background-color:rgb(255 247 237 / .88)!important}
html.halloween.dark #niv-tabbar{background:rgb(17 10 5 / .95);border-top-color:rgb(249 115 22 / .25)}
html.halloween #niv-tabbar .tb.on{color:#fb923c}
html.halloween #niv-drawer aside{background:linear-gradient(180deg,rgb(249 115 22 / .12),transparent 40%),rgba(255,255,255,.92)}
html.halloween.dark #niv-drawer aside{background:linear-gradient(180deg,rgb(249 115 22 / .16),transparent 40%),rgb(20 12 6 / .94)}
html.halloween .nv-link.is-active{background:rgb(var(--hw-rgb) / .14);color:#c2410c}
html.halloween.dark .nv-link.is-active{background:rgb(var(--hw-rgb) / .24);color:#fdba74}

/* ---------- ปุ่มติดตาม / แกลเลอรี / เครื่องเล่นวิดีโอ ---------- */
html.halloween .fb-link,html.halloween .vg-more-u{color:var(--hw-txt)}
html.halloween .fb-link:hover{background:rgb(var(--hw-rgb) / .16)}
html.halloween .fb-pill,html.halloween .fb-chip[aria-pressed=true]{background:linear-gradient(to right,var(--hw-g1),var(--hw-g3));box-shadow:0 6px 16px -6px rgb(var(--hw-rgb) / .6)}
html.halloween .fb-pill[aria-pressed=true]{background:transparent;box-shadow:none}
html.halloween .fb-chip{color:var(--hw-txt);border-color:rgb(var(--hw-rgb) / .45);background:rgb(var(--hw-rgb) / .1)}
html.halloween .fb-chip[aria-pressed=true]{color:#fff;border-color:transparent}
html.halloween .fb-plus{color:var(--hw-txt)}
html.halloween .fb-plus:hover{color:var(--hw-txt-h)}
html.halloween .vg-head .vg-dot{background:#fb923c;box-shadow:0 0 10px #f97316}
html.halloween .vg-more{color:#fed7aa;border-color:rgb(251 146 60 / .5);background:rgb(var(--hw-rgb) / .14)}
html.halloween .vg-more:hover{background:rgb(var(--hw-rgb) / .3)}
html.halloween .vg-eq s{background:#fdba74}
html.halloween .vg-strip{scrollbar-color:#ea580c66 transparent}
html.halloween .vg-t[aria-current="true"]{box-shadow:0 0 0 2px #f97316,0 6px 16px rgb(var(--hw-rgb) / .45)}
html.halloween .uv.bp:focus-visible,html.halloween .bp-mute:focus-visible{box-shadow:0 0 0 2px #f97316}
html.halloween .bp-fill{stroke:#fb923c}
html.halloween .bp-fast-tag svg{fill:#fb923c}
html.halloween #niv-lb button:hover{background:rgb(var(--hw-rgb) / .65)}

/* ---------- ตัวตกแต่ง (สร้างโดย /halloween.js) ---------- */
.hw-deco{display:none}
html.halloween .hw-deco{display:block}

/* ใยแมงมุมมุมบน: absolute ที่ต้นหน้า เลื่อนแล้วหายไปเอง */
.hw-web{position:absolute;top:0;z-index:31;width:clamp(72px,14vw,150px);height:auto;color:var(--hw-web);opacity:.5;pointer-events:none}
.hw-web-l{left:0}
.hw-web-r{right:0;transform:scaleX(-1)}
.hw-web path{fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round}

/* ผีลอย (ดัดแปลงจาก "Little Halloween" ของ khadkamhn): 2 ตัว ลอยผ่านจอพร้อมโยกตัว
   ทุก animation เปลี่ยนเป็น transform/opacity ทั้งหมด (ต้นฉบับขยับ left/top ซึ่งทำให้ layout ใหม่ทุกเฟรม) */
.hw-ghosts{position:fixed;inset:0;z-index:25;overflow:hidden;pointer-events:none;contain:strict}
.hw-ghost{position:absolute;left:0;top:var(--y,20%);width:30px;height:44px;opacity:0;
  --gf:#fff7ed;--ge:#fbbf24;
  will-change:transform,opacity;animation:hw-fly var(--d,24s) linear var(--t,0s) infinite}
.hw-ghost,.hw-ghost *,.hw-ghost :after,.hw-ghost :before{box-sizing:border-box}
.hw-gm{width:30px;height:44px;transform-origin:0 0;scale:var(--s,1.6);animation:hw-bob 3s ease-in-out infinite}
@keyframes hw-bob{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(8px,-4px,0)}}
.hw-g-head{position:relative;z-index:1;width:25px;height:25px;border-radius:50%;background:var(--hw-gh)}
.hw-g-skull{position:absolute;left:2px;bottom:2px;width:16px;height:16px;border-radius:50%;
  color:var(--gf);background:var(--gf);animation:hw-skull 3s infinite}
.hw-g-skull:before,.hw-g-skull:after,.hw-g-eye:before,.hw-g-body:before,.hw-g-body:after,.hw-g-legs:before{content:'';position:absolute}
.hw-g-skull:before{top:9px;left:50%;width:0;height:0;z-index:1;margin-left:-2px;border:2px solid transparent;border-bottom-color:var(--hw-gh)}
.hw-g-skull:after{top:14px;left:50%;width:1px;height:4px;margin-left:-1px;background:var(--gf);
  box-shadow:2px 0,-2px 0,4px 0,-4px 0,-3px -2px,-1px -2px,1px -2px,3px -2px}
.hw-g-eyes{position:relative;width:16px;height:16px;overflow:hidden;border-radius:50%}
.hw-g-eye{position:absolute;top:5px;width:5px;height:5px;border-radius:50%;background:var(--ge);
  border:1px solid var(--hw-gh);border-right-width:2px}
.hw-g-eye:before{top:-1px;left:-1px;width:5px;height:3px;background:var(--gf);border-radius:5px 5px 0 0;animation:hw-blink 3s infinite}
.hw-g-eye.l{left:1px}
.hw-g-eye.r{right:1px}
.hw-g-body{position:relative;top:-3px;width:24px;height:17px;background:var(--hw-gh);border-radius:10px 10px 2px 2px}
.hw-g-body:before,.hw-g-body:after{top:3px;width:4px;height:12px;background:var(--hw-gh)}
.hw-g-body:before{left:1px;border-radius:100% 0 0 2px;transform:rotate(10deg);animation:hw-hand-l 3s infinite}
.hw-g-body:after{right:1px;border-radius:0 100% 2px 0;transform:rotate(-10deg);animation:hw-hand-r 3s infinite}
.hw-g-legs{position:relative;top:-3px;left:50%;width:21px;height:10px;overflow:hidden;margin-left:-13px;border-bottom:1px solid rgba(0,0,0,.2)}
.hw-g-legs:before{top:0;left:-7px;width:60px;height:10px;
  background-image:linear-gradient(-495deg,var(--hw-gh) 4px,transparent 0),linear-gradient(-45deg,transparent 4px,var(--hw-gh) 0);
  background-size:4px 8px;background-repeat:repeat-x;animation:hw-legs 3s infinite}
@keyframes hw-skull{0%,100%{transform:translate(0,0)}25%{transform:translate(2px,1px)}75%{transform:translate(3px,-1px)}}
@keyframes hw-blink{0%,100%{transform:translateY(-4px)}50%{transform:translateY(0)}}
@keyframes hw-hand-l{0%,100%{transform:rotate(10deg) translateX(0)}50%{transform:rotate(10deg) translateX(-3px)}}
@keyframes hw-hand-r{0%,100%{transform:rotate(-10deg) translateX(0)}50%{transform:rotate(-10deg) translateX(3px)}}
@keyframes hw-legs{0%,100%{transform:translateX(0)}50%{transform:translateX(-18px)}}
@keyframes hw-fly{
  0%{transform:translate3d(-12vw,0,0);opacity:0}
  6%{opacity:.9}
  50%{transform:translate3d(52vw,5vh,0)}
  94%{opacity:.9}
  100%{transform:translate3d(112vw,-2vh,0);opacity:0}
}
.hw-ghost.rev{animation-name:hw-fly-rev}
@keyframes hw-fly-rev{
  0%{transform:translate3d(112vw,0,0) scaleX(-1);opacity:0}
  6%{opacity:.9}
  50%{transform:translate3d(48vw,5vh,0) scaleX(-1)}
  94%{opacity:.9}
  100%{transform:translate3d(-12vw,-3vh,0) scaleX(-1);opacity:0}
}

/* ฟักทองเหนือท้ายหน้า: ส้มสด หน้ากลวงเรืองแสงเทียน (กะพริบด้วย opacity อย่างเดียว) */
html.halloween .hw-pk{display:flex;justify-content:center;align-items:flex-end;gap:.9rem;margin:2rem 0 -1.5rem;pointer-events:none}
.hw-pk svg{display:block;height:auto;overflow:visible;transform-origin:50% 100%}
.hw-pk svg:nth-child(1){width:46px}
.hw-pk svg:nth-child(2){width:62px}
.hw-pk svg:nth-child(3){width:40px}
.hw-pk .body{fill:url(#hw-pk-g)}
.hw-pk .rib{fill:none;stroke:#9a3412;stroke-width:1.2;opacity:.75}
.hw-pk .stem{fill:#166534}
.hw-pk .face{fill:#fef3c7}
.hw-pk .lit{animation:hw-candle 3.2s ease-in-out infinite}
.hw-pk svg:nth-child(2) .lit{animation-delay:-1.1s}
.hw-pk svg:nth-child(3) .lit{animation-delay:-2s}
@keyframes hw-candle{0%,100%{opacity:1}20%{opacity:.7}35%{opacity:1}60%{opacity:.8}80%{opacity:.95}}
/* ลูกเล่น: ฟักทองโยกเบา ๆ ช้า ๆ */
.hw-pk svg{animation:hw-sway 6s ease-in-out infinite}
.hw-pk svg:nth-child(2){animation-delay:-2s}
.hw-pk svg:nth-child(3){animation-delay:-4s}
@keyframes hw-sway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}

/* ปุ่มเปิด/ปิดธีมในเมนูข้าง */
#hw-toggle .hw-state{margin-left:auto;font-size:.72rem;font-weight:600;padding:.1rem .55rem;border-radius:999px;border:1px solid rgba(148,163,184,.5);color:#64748b}
html.halloween #hw-toggle .hw-state{color:#c2410c;border-color:rgb(251 146 60 / .6);background:rgb(var(--hw-rgb) / .16)}
html.halloween.dark #hw-toggle .hw-state{color:#fed7aa}
#hw-toggle .hw-on{display:none}
html.halloween #hw-toggle .hw-on{display:inline}
html.halloween #hw-toggle .hw-off{display:none}

/* เคารพผู้ที่ลดการเคลื่อนไหว */
@media (prefers-reduced-motion:reduce){
  .hw-ghosts{display:none}
  .hw-pk .lit,.hw-pk svg{animation:none}
}