:root{--hz:#e0a526;--rust:#c4532d}
html{scroll-behavior:smooth;scrollbar-gutter:stable;overflow-y:scroll}
/* Scrollbars follow the same dark metal and yellow palette as the controls. */
@media (forced-colors:none){
  *{scrollbar-width:thin;scrollbar-color:#b58a32 #25272b}
  @supports selector(::-webkit-scrollbar){
    *{scrollbar-width:auto;scrollbar-color:auto}
    ::-webkit-scrollbar{width:12px;height:12px}
    ::-webkit-scrollbar-track{background:#25272b}
    ::-webkit-scrollbar-thumb{background:#b58a32;border:3px solid #25272b;border-radius:2px;min-height:40px}
    ::-webkit-scrollbar-thumb:hover{background:#e0a526}
    ::-webkit-scrollbar-thumb:active{background:#f1bc48}
    ::-webkit-scrollbar-corner{background:#25272b}
    ::-webkit-scrollbar-button{display:none;width:0;height:0}
  }
}
/* Clip decorative overflow without creating a scroll container for sticky elements. */
html,body{overflow-x:clip}
main{min-width:0;width:100%;overflow-wrap:anywhere}
main :where(.grid,.flex)>*{min-width:0}
.input{min-width:0}
.marquee-viewport{overflow:hidden;padding-block:1rem;margin-block:-1rem}
.hero-symbol{width:min(18rem,100%);max-width:100%;aspect-ratio:1;overflow:hidden}
@media (min-width:640px){.hero-symbol{width:24rem}}
@media (max-width:639px){.hero-title.stencil{font-size:clamp(1.5rem,8.5vw,3rem)}}
body{background:#121519}
/* Avoid a full-screen SVG noise/blend layer beneath the animated canvas. */
body::before{display:none}
#spores{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;contain:strict;transform:translateZ(0)}
main,footer,header{position:relative;z-index:1}
::selection{background:var(--hz);color:#1f2124}

/* ป้ายเทปเตือน */
.tape{height:14px;background:repeating-linear-gradient(-45deg,#e0a526 0 14px,#25272b 14px 28px)}
.tape-thin{height:6px;background-size:auto}
.tape-move{background-size:40px 100%;animation:tapeMove 1.2s linear infinite}
@keyframes tapeMove{to{background-position:40px 0}}
.marquee{overflow:hidden;background:#25272b;border-block:2px solid #1b1c1f;transform:rotate(-1.2deg);margin-inline:-2rem}
.marquee-track{display:flex;width:max-content;gap:3rem;padding:.7rem 0;animation:marq 28s linear infinite;color:#b4b8bf;font-weight:600;white-space:nowrap}
.marquee-track i{color:var(--hz);font-style:normal}
@keyframes marq{to{transform:translateX(-50%)}}

/* หัวข้อ + glitch */
.stencil{font-weight:700;line-height:1.05;text-shadow:3px 3px 0 #1c1d20}
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;opacity:0}
.glitch::before{color:var(--hz);clip-path:inset(0 0 58% 0);animation:gl1 4s infinite steps(1)}
.glitch::after{color:var(--rust);clip-path:inset(58% 0 0 0);animation:gl2 3.3s infinite steps(1)}
@keyframes gl1{0%,90%,100%{opacity:0}91%{opacity:1;transform:translate(-4px,1px)}94%{opacity:1;transform:translate(3px,-1px)}96%{opacity:0}}
@keyframes gl2{0%,84%,100%{opacity:0}85%{opacity:1;transform:translate(4px,0)}88%{opacity:1;transform:translate(-3px,1px)}90%{opacity:0}}

/* การ์ด / ปุ่ม */
.chamfer{clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.panel{background:#383c41;border:2px solid #4a4f56;position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),6px 6px 0 #25272b}
.panel::after{content:"";position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:#25272b;box-shadow:inset 1px 1px 0 #6a6f78}
.panel-light{background:#d3d5d9;color:#25272b;border-color:#b4b8bf}
.lift{transition:transform .2s,box-shadow .2s}
.lift:hover{transform:translate(-3px,-3px) rotate(-.4deg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),10px 10px 0 #25272b}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--hz);color:#1f2124;font-weight:600;padding:.8rem 1.7rem;border:0;cursor:pointer;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);transition:transform .15s,filter .2s}
.btn::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:rgba(255,255,255,.45);transform:skewX(-20deg);transition:left .5s}
.btn:hover::before{left:130%}.btn:hover{filter:brightness(1.08);transform:translateY(-2px)}.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:wait}
.btn-ghost{background:#4a4f56;color:#e8e9ec}
.input{width:100%;background:#2a2c30;border:2px solid #4a4f56;padding:.75rem .95rem;color:#e8e9ec;outline:none;transition:border-color .2s,box-shadow .2s}
.input::placeholder{color:#6a6f78}
.input:focus{border-color:var(--hz);box-shadow:4px 4px 0 rgba(224,165,38,.25)}
:focus-visible{outline:2px solid var(--hz);outline-offset:3px}

/* ตัวเลือกแพ็กเกจ / ช่องทางชำระ */
.opt{display:block;cursor:pointer}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt-body{position:relative;height:100%;padding:1rem;background:#32353a;border:2px dashed #5a5f67;transition:transform .2s,border-color .2s,background .2s}
.opt:hover .opt-body{transform:translateY(-3px);border-color:#8d929b}
.opt input:focus-visible + .opt-body{outline:2px solid var(--hz);outline-offset:3px}
.opt input:checked + .opt-body{border:2px solid var(--hz);background:#3f4349;transform:translateY(-3px) rotate(-.6deg)}
.opt input:checked + .opt-body::after{content:"เลือกแล้ว";position:absolute;top:-10px;right:-8px;background:var(--rust);color:#fff;font-size:.72rem;font-weight:600;padding:.1rem .55rem;transform:rotate(6deg);animation:stamp .25s cubic-bezier(.3,2,.5,1)}
@keyframes stamp{from{transform:rotate(6deg) scale(2);opacity:0}}

/* ขอบกระดาษฉีก */
.torn{clip-path:polygon(0 12px,6% 0,13% 10px,21% 2px,30% 12px,39% 3px,48% 11px,57% 1px,66% 10px,75% 2px,84% 12px,92% 3px,100% 10px,100% calc(100% - 10px),92% 100%,83% calc(100% - 9px),74% 100%,64% calc(100% - 11px),55% 100%,46% calc(100% - 8px),36% 100%,27% calc(100% - 10px),17% 100%,8% calc(100% - 9px),0 100%)}

/* ลูกเล่นหน้าแรก */
.spin-a{animation:spin 40s linear infinite}.spin-b{animation:spin 26s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.float{animation:flt 5s ease-in-out infinite}
@keyframes flt{50%{transform:translateY(-12px)}}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s,transform .6s}
.reveal.in{opacity:1;transform:none}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.pulse-dot{animation:pd 1.4s infinite}
@keyframes pd{50%{opacity:.3}}

.swal2-popup{font-family:'Kanit',sans-serif!important;border:2px solid #4a4f56!important;border-radius:0!important;box-shadow:8px 8px 0 #25272b!important}
.swal2-confirm,.swal2-cancel{border-radius:0!important}
.swal2-timer-progress-bar{display:none!important}
/* ป้องกันการกระตุก/ขยับของหน้าจอและรักษา Navbar ให้เสถียรเมื่อ SweetAlert2 เปิดใช้งาน */
html,
html.swal2-shown {
  overflow-y: scroll !important;
  scrollbar-gutter: stable !important;
  height: 100% !important;
}
html body.swal2-shown,
html.swal2-shown body,
html body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
  overflow-y: visible !important;
  padding-right: 0px !important;
  margin-right: 0px !important;
  height: auto !important;
  min-height: 100% !important;
}
.site-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 1200 !important;
}
.swal2-container {
  z-index: 1060;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}#spores{display:none}
}