/* ==========================================================================
   The Fourbee — ธีมฮาโลวีน 2026
   ทุกกฎอยู่ภายใต้ html.hw จึงเปิด/ปิดได้ด้วยปุ่มดวงจันทร์มุมซ้ายล่าง
   อยากเอาธีมออกถาวร: ลบ 2 บรรทัด (halloween.css, halloween.js) ใน index.html
   ========================================================================== */

/* ---------- ปุ่มเปิด/ปิดธีม (แสดงเสมอ) ---------- */
.hw-toggle{position:fixed;left:14px;bottom:14px;z-index:900;width:38px;height:38px;padding:0;border-radius:50%;
  border:1px solid #3B2819;background:#1B120D;color:#F2B84B;display:grid;place-items:center;cursor:pointer;opacity:.9}
.hw-toggle svg{width:18px;height:18px}
.hw-toggle[aria-pressed="false"]{color:#8C7C68;background:#EFE9DD;border-color:#CFC6B5}
.hw-toggle:focus-visible{outline:2px solid #F2B84B;outline-offset:2px}
html:not(.hw) .hw-fx,html:not(.hw) .hw-fog,html:not(.hw) .hw-tag{display:none}

/* ---------- สี ---------- */
html.hw.hw:root{
  color-scheme:dark;
  --bg:#0E0907;--card:#1B120D;--ink:#F0E4CC;--mute:#AE9A80;--line:#3B2819;
  --acc:#E4731F;--acc2:#F5A25A;--sun:#F2B84B;--soft:#2B1B11;--hero:#0B0705;--on:#190D05;
  scrollbar-color:#3B2819 #0E0907;
}
html.hw ::selection{background:rgba(228,115,31,.5);color:#fff}
html.hw body{
  background:
    radial-gradient(1100px 480px at 50% -160px,rgba(228,115,31,.17),transparent 70%),
    radial-gradient(800px 560px at 100% 100%,rgba(90,55,30,.32),transparent 70%),
    var(--bg);
  background-attachment:fixed;
}
html.hw .wrap{position:relative;z-index:1}
/* ขอบมืดรอบจอ + เกรนฟิล์ม */
html.hw body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%,transparent 55%,rgba(0,0,0,.6) 100%)}
html.hw body::after{content:"";position:fixed;inset:0;z-index:5;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27200%27 height=%27200%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.8%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 1  0 0 0 0 .92  0 0 0 0 .8  0 0 0 .9 0%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E")}

/* ---------- ตัวอักษร ---------- */
html.hw h1,html.hw .logo,html.hw .hr .mark .f{font-family:'Grenze Gotisch','Prompt','Noto Sans Thai',serif}
html.hw .logo{font-size:27px;font-weight:700;letter-spacing:.3px}
html.hw .logo svg{width:30px;height:30px;filter:drop-shadow(0 0 6px rgba(228,115,31,.6));animation:hw-candle 3.6s infinite}
html.hw .hl h1{font-size:72px;font-weight:800;line-height:.98;letter-spacing:.5px;color:var(--ink);
  text-shadow:0 0 26px rgba(228,115,31,.38);animation:hw-flick 8s infinite}
html.hw .hl h2{color:var(--acc2);font-weight:500}
html.hw .hl p{color:var(--mute)}
html.hw a:hover{text-shadow:0 0 10px rgba(228,115,31,.35)}
html.hw .auth .scr .f{font-family:'Grenze Gotisch','Prompt',serif;font-size:25px;font-weight:700}
html.hw input[type=checkbox]{accent-color:var(--acc)}

/* ---------- กรอบการ์ด: ขอบคู่แบบโปสเตอร์เก่า ---------- */
html.hw .hero,html.hw .bar,html.hw .card,html.hw .scr,html.hw dialog{
  border-radius:12px;border-color:var(--line);
  box-shadow:inset 0 0 0 5px var(--card),inset 0 0 0 6px rgba(240,228,204,.07),0 26px 50px -30px rgba(0,0,0,.95);
}
html.hw .pc,html.hw .reqcard,html.hw .nt,html.hw .faq details,html.hw .steps>div,html.hw .mynote{border-radius:8px}
html.hw .nt.un{background:var(--soft)}
html.hw .badge{background:var(--sun);color:#1B120D}
html.hw .feat i{background:var(--soft);color:var(--sun)}
html.hw .tg span{color:var(--acc2)}

/* ---------- ปุ่มและช่องกรอก ---------- */
html.hw .btn{border-radius:8px;background:var(--acc);color:var(--on);font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 8px 18px -10px rgba(228,115,31,.9);
  transition:filter .18s,transform .18s,box-shadow .18s}
html.hw .btn:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 22px -8px rgba(228,115,31,.95)}
html.hw .btn.o{background:transparent;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
html.hw .btn.o:hover{border-color:var(--acc);box-shadow:none}
html.hw .btn.t{background:none;color:var(--ink);box-shadow:none}
html.hw .btn.danger{background:#B3402E;color:#fff}
html.hw .btn.o.tg[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--on)}
html.hw .btn:disabled{filter:grayscale(.4);transform:none}
html.hw .in,html.hw input.in,html.hw textarea.in,html.hw select.in{background:#120B07;border-color:var(--line);border-radius:8px}
html.hw .in:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(228,115,31,.2)}
html.hw .chip{background:#120B07;border-radius:6px}
html.hw .chip:hover{border-color:var(--acc);color:var(--acc2)}
html.hw #ptabs button.on{background:var(--acc);border-color:var(--acc);color:var(--on)}
html.hw #toast{background:#EBDDB8;color:#2A1A0F;border-radius:3px;box-shadow:0 14px 30px -10px rgba(0,0,0,.9)}
html.hw .err{color:#E8806A}
html.hw .err.ok{color:#9FCB6A}

/* ---------- หน้าแรก: ท้องฟ้ายามค่ำ ---------- */
html.hw .hero{overflow:hidden}
html.hw .hr{background:linear-gradient(#0B0705 0%,#190E08 52%,#2E1809 100%)}
html.hw .hr svg circle[fill="#F4B740"]{fill:#EFE2BE}
html.hw .hr svg path[fill="#17555C"]{fill:#25160D}
html.hw .hr svg path[fill="#0A2A2F"]{fill:#080504}
html.hw .hr .mark,html.hw .hr .mark svg{color:var(--ink)}
html.hw .hr .mark svg{filter:drop-shadow(0 0 10px rgba(228,115,31,.55));animation:hw-candle 4.2s infinite}
html.hw .hr .mark .f{font-size:40px;font-weight:800;text-shadow:0 2px 0 rgba(0,0,0,.5)}
html.hw .hr .mark small{display:block;opacity:.8;max-width:230px;margin:6px auto 0;text-shadow:0 1px 4px rgba(0,0,0,.9)}
html.hw .hr .mark .f{white-space:nowrap}
@media(min-width:961px){html.hw .hr .mark{left:37%}}
/* โน้ตกระดาษแปะเทป */
html.hw .hr .q{background:#EBDDB8;color:#2A1A0F;border-radius:2px;transform:rotate(-1.8deg);
  box-shadow:0 12px 26px -8px rgba(0,0,0,.85);font-family:'Prompt','Noto Sans Thai',sans-serif}
html.hw .hr .q::before{content:"";position:absolute;top:-9px;left:50%;width:48px;height:17px;
  transform:translateX(-50%) rotate(2.5deg);background:rgba(206,160,98,.72)}
/* ใยแมงมุมมุมขวาบน + แมงมุมห้อยลงมา */
html.hw .hr::before{content:"";position:absolute;top:0;right:0;width:150px;height:150px;z-index:2;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 120 120%27 fill=%27none%27 stroke=%27%23F0E4CC%27 stroke-width=%27.8%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M120 0L115.9 117.9M120 0L79.6 110.9M120 0L47.4 93.0M120 0L22.2 66.0M120 0L6.6 32.5M120 0L2.1 4.1M119.2 24.0Q116.2 19.5 111.8 22.6Q110.3 17.4 105.2 18.9Q105.4 13.6 100.1 13.4Q102.0 8.4 96.9 6.6Q100.2 3.1 96.0 0.8M118.4 46.0Q112.7 37.5 104.3 43.2Q101.5 33.4 91.7 36.2Q92.1 26.0 81.9 25.7Q85.4 16.1 75.8 12.7Q82.1 6.0 74.0 1.6M117.6 70.0Q108.9 57.0 96.1 65.8Q91.8 50.8 76.9 55.2Q77.5 39.6 62.0 39.1Q67.4 24.5 52.7 19.3Q62.4 9.1 50.0 2.4M116.6 95.9Q104.8 78.2 87.2 90.2Q81.4 69.7 60.9 75.6Q61.7 54.3 40.4 53.7Q47.8 33.7 27.7 26.5Q40.9 12.5 24.1 3.4%27/%3E%3C/svg%3E") no-repeat top right/contain;opacity:.5}
html.hw .hr::after{content:"";position:absolute;top:-134px;left:15%;width:20px;height:140px;z-index:2;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 140%27%3E%3Cpath d=%27M10 0V100%27 stroke=%27%23F0E4CC%27 stroke-opacity=%27.55%27 stroke-width=%27.7%27 fill=%27none%27/%3E%3Cg stroke=%27%23C9B79A%27 stroke-width=%27.9%27 fill=%27none%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M8.2 101.0Q3 94.0 1 106.0M11.8 101.0Q17 94.0 19 106.0M8.2 104.1Q3 97.1 1 109.1M11.8 104.1Q17 97.1 19 109.1M8.2 107.2Q3 100.2 1 112.2M11.8 107.2Q17 100.2 19 112.2M8.2 110.3Q3 103.3 1 115.3M11.8 110.3Q17 103.3 19 115.3%27/%3E%3C/g%3E%3Cellipse cx=%2710%27 cy=%27109%27 rx=%275.2%27 ry=%276.8%27 fill=%27%232B1A10%27 stroke=%27%23C9B79A%27 stroke-width=%27.8%27/%3E%3Ccircle cx=%2710%27 cy=%27100.8%27 r=%273.3%27 fill=%27%232B1A10%27 stroke=%27%23C9B79A%27 stroke-width=%27.8%27/%3E%3Ccircle cx=%278.8%27 cy=%27100%27 r=%27.7%27 fill=%27%23E4731F%27/%3E%3Ccircle cx=%2711.2%27 cy=%27100%27 r=%27.7%27 fill=%27%23E4731F%27/%3E%3Cpath d=%27M8 108.5q2 3 4 0%27 stroke=%27%23E4731F%27 stroke-width=%27.8%27 fill=%27none%27/%3E%3C/svg%3E") no-repeat center/contain;transform-origin:50% 0;animation:hw-spider 13s ease-in-out infinite}
/* ป้ายวันที่ */
html.hw .hw-tag{display:inline-flex;align-self:flex-start;align-items:center;gap:9px;
  font:600 11px/1 'Noto Sans Thai',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--sun);
  border:1px solid rgba(242,184,75,.55);padding:8px 13px;outline:1px solid rgba(242,184,75,.22);outline-offset:3px}
html.hw .hw-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px 2px rgba(228,115,31,.8);animation:hw-candle 2.8s infinite}
html.hw .hw-win{fill:#F2B84B;animation:hw-win 6s infinite}

/* ใยแมงมุมที่การ์ดเข้าสู่ระบบ/สมัคร */
html.hw .auth .scr{overflow:hidden}
html.hw .auth .scr::before{content:"";position:absolute;top:0;left:0;width:118px;height:118px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 120 120%27 fill=%27none%27 stroke=%27%23F0E4CC%27 stroke-width=%27.8%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M120 0L115.9 117.9M120 0L79.6 110.9M120 0L47.4 93.0M120 0L22.2 66.0M120 0L6.6 32.5M120 0L2.1 4.1M119.2 24.0Q116.2 19.5 111.8 22.6Q110.3 17.4 105.2 18.9Q105.4 13.6 100.1 13.4Q102.0 8.4 96.9 6.6Q100.2 3.1 96.0 0.8M118.4 46.0Q112.7 37.5 104.3 43.2Q101.5 33.4 91.7 36.2Q92.1 26.0 81.9 25.7Q85.4 16.1 75.8 12.7Q82.1 6.0 74.0 1.6M117.6 70.0Q108.9 57.0 96.1 65.8Q91.8 50.8 76.9 55.2Q77.5 39.6 62.0 39.1Q67.4 24.5 52.7 19.3Q62.4 9.1 50.0 2.4M116.6 95.9Q104.8 78.2 87.2 90.2Q81.4 69.7 60.9 75.6Q61.7 54.3 40.4 53.7Q47.8 33.7 27.7 26.5Q40.9 12.5 24.1 3.4%27/%3E%3C/svg%3E") no-repeat top right/contain;transform:scaleX(-1);opacity:.4}

/* ---------- แผนที่ / เรดาร์ ---------- */
html.hw .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) grayscale(.55) sepia(.5) brightness(.8) contrast(.92)}
html.hw .leaflet-container{background:var(--soft)}
html.hw .leaflet-bar a{background:var(--card);color:var(--ink);border-bottom-color:var(--line)}
html.hw .leaflet-bar a:hover{background:var(--soft)}
html.hw .leaflet-control-attribution{background:rgba(14,9,7,.72);color:var(--mute)}
html.hw .leaflet-control-attribution a{color:var(--acc2)}
html.hw .leaflet-popup-content-wrapper,html.hw .leaflet-popup-tip{background:var(--card);color:var(--ink)}
html.hw .radar{box-shadow:inset 0 0 0 1px rgba(242,184,75,.55),0 0 0 1px rgba(0,0,0,.35)}
html.hw .radar::before,html.hw .radar::after{box-shadow:inset 0 0 0 1px rgba(242,184,75,.3)}
html.hw .sweep{background:conic-gradient(from 0deg,rgba(228,115,31,0) 0deg,rgba(228,115,31,0) 250deg,rgba(228,115,31,.26) 356deg,rgba(255,196,110,.6) 360deg)}
html.hw .me-dot{border-color:#2A1A10}

/* ---------- เอฟเฟกต์ลอยบนหน้าจอ (สร้างโดย halloween.js) ---------- */
.hw-fog{position:fixed;left:0;right:0;bottom:0;height:44vh;z-index:0;pointer-events:none;overflow:hidden}
.hw-fog i{position:absolute;bottom:-14vh;left:-30vw;width:160vw;height:36vh;
  background:radial-gradient(closest-side,rgba(165,125,85,.17),transparent);animation:hw-drift 75s ease-in-out infinite alternate}
.hw-fog i:nth-child(2){bottom:-18vh;opacity:.7;animation-duration:110s;animation-direction:alternate-reverse}
.hw-fx{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.hw-ember{position:absolute;bottom:-12px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:#F5A25A;
  box-shadow:0 0 8px 1px rgba(228,115,31,.8);opacity:0;animation:hw-rise var(--d) linear var(--dl) infinite}
.hw-lantern{position:absolute;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;opacity:0;
  background:radial-gradient(closest-side,rgba(255,168,70,.14),rgba(255,140,40,.045) 55%,transparent);
  transition:opacity .4s;will-change:transform}
.hw-lantern.on{opacity:1}
.hw-bat{position:absolute;left:0;top:var(--y);width:var(--w);animation:hw-fly var(--d) linear forwards;will-change:transform}
.hw-bat.r{animation-name:hw-fly-r}
.hw-bat i{display:block;animation:hw-bob 1.9s ease-in-out infinite}
.hw-bat.r svg{transform:scaleX(-1)}
.hw-bat svg{display:block;fill:#3D2C1D;filter:drop-shadow(0 0 3px rgba(228,115,31,.5))}
.wing{transform-origin:30px 15px;animation:hw-flap .22s ease-in-out infinite alternate}
.hw-obat{fill:#080504}

/* ---------- keyframes ---------- */
@keyframes hw-candle{0%,100%{opacity:1}8%{opacity:.8}14%{opacity:1}31%{opacity:.9}37%{opacity:.74}43%{opacity:1}70%{opacity:.93}}
@keyframes hw-flick{0%,18%,22%,62%,64%,100%{opacity:1}20%{opacity:.5}63%{opacity:.7}}
@keyframes hw-win{0%,100%{opacity:1}38%{opacity:.3}44%{opacity:1}72%{opacity:.65}}
@keyframes hw-spider{0%,10%{transform:translateY(0) rotate(0)}30%{transform:translateY(96px) rotate(3deg)}40%{transform:translateY(90px) rotate(-3deg)}62%{transform:translateY(96px) rotate(2deg)}82%,100%{transform:translateY(0) rotate(0)}}
@keyframes hw-drift{from{transform:translateX(-12vw)}to{transform:translateX(12vw)}}
@keyframes hw-rise{0%{transform:translate3d(0,0,0) scale(1);opacity:0}8%{opacity:.95}60%{opacity:.5}100%{transform:translate3d(var(--dr),-105vh,0) scale(.4);opacity:0}}
@keyframes hw-fly{from{transform:translateX(-140px)}to{transform:translateX(calc(100vw + 140px))}}
@keyframes hw-fly-r{from{transform:translateX(calc(100vw + 140px))}to{transform:translateX(-140px)}}
@keyframes hw-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-28px)}}
@keyframes hw-flap{from{transform:scaleY(1)}to{transform:scaleY(.28)}}

@media(max-width:960px){
  html.hw .hl h1{font-size:54px}
  html.hw .hr{min-height:390px}
  html.hw .hr .mark{top:24px}
  html.hw .hr .mark svg{width:74px;height:74px}
  html.hw .hr .mark .f{font-size:34px}
}
@media(max-width:720px){
  html.hw .hl h1{font-size:clamp(38px,12vw,52px)}
  html.hw .logo{font-size:22px}
  html.hw .logo svg{width:26px;height:26px}
  html.hw .hr::after{left:9%}
  html.hw .hr .mark{left:34%}
  html.hw .hr .mark small{max-width:150px}
  html.hw .bar nav .btn{padding:8px 13px;font-size:13px}
  html.hw .bar nav .btn.t{padding:8px 6px}
  .hw-toggle{bottom:12px;left:10px}
}
@media(prefers-reduced-motion:reduce){
  html.hw *,html.hw *::before,html.hw *::after{animation:none!important}
  .hw-fog,.hw-fx{display:none}
}