/* =====================================================
   BeeTeam House — Design Tokens
===================================================== */
:root{
  --pink:#ff8fab;
  --pink-deep:#f4628c;
  --pink-soft:#ffd7e4;
  --yellow:#ffd15c;
  --yellow-soft:#fff0c2;
  --blue:#79c9ff;
  --blue-soft:#dff2ff;
  --lavender:#c9a6ff;
  --lavender-soft:#ece0ff;
  --cream:#fffdf7;
  --paper:#fffaf0;
  --ink:#4a3b3f;
  --ink-soft:#8a7880;
  --line: rgba(74,59,63,0.10);
  --glass-bg: rgba(255,255,255,0.44);
  --glass-bg-strong: rgba(255,255,255,0.64);
  --glass-border: rgba(255,255,255,0.8);
  --shadow-soft: 0 8px 30px rgba(244, 98, 140, 0.12);
  --shadow-pop: 0 20px 60px rgba(121, 201, 255, 0.24);
  --ease: cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Sarabun','Prompt',sans-serif;
  background:var(--cream);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
h1,h2,h3,h4,.display{font-family:'Prompt',sans-serif; font-weight:700; letter-spacing:-0.01em; margin:0;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
img{max-width:100%; display:block;}
::selection{background:var(--pink); color:#fff;}

/* =====================================================
   Aurora animated background
===================================================== */
.aurora-bg{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
.aurora-bg .base{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 45% at 15% 10%, rgba(255,143,171,0.20), transparent 62%),
    radial-gradient(ellipse 55% 45% at 88% 8%, rgba(121,201,255,0.20), transparent 60%),
    radial-gradient(ellipse 65% 55% at 50% 100%, rgba(255,209,92,0.22), transparent 65%),
    var(--cream);
}
.aurora-layer{
  position:absolute; inset:-25%;
  filter:blur(60px);
  mix-blend-mode:multiply;
  opacity:.75;
}
.aurora-1{
  background:radial-gradient(circle at 30% 30%, rgba(255,143,171,0.55), transparent 42%),
             radial-gradient(circle at 70% 65%, rgba(121,201,255,0.45), transparent 40%);
  animation:auroraDrift1 28s ease-in-out infinite alternate;
}
.aurora-2{
  background:radial-gradient(circle at 65% 25%, rgba(255,209,92,0.5), transparent 40%),
             radial-gradient(circle at 25% 75%, rgba(201,166,255,0.42), transparent 42%);
  animation:auroraDrift2 34s ease-in-out infinite alternate-reverse;
}
.aurora-3{
  background:radial-gradient(circle at 50% 50%, rgba(255,215,164,0.35), transparent 55%);
  animation:auroraDrift3 40s ease-in-out infinite alternate;
  opacity:.5;
}
@keyframes auroraDrift1{
  0%{ transform:translate(-4%,-3%) scale(1) rotate(0deg); }
  50%{ transform:translate(4%,5%) scale(1.12) rotate(8deg); }
  100%{ transform:translate(-2%,3%) scale(1.04) rotate(-4deg); }
}
@keyframes auroraDrift2{
  0%{ transform:translate(3%,-4%) scale(1.05) rotate(0deg); }
  50%{ transform:translate(-5%,3%) scale(1) rotate(-10deg); }
  100%{ transform:translate(2%,-2%) scale(1.1) rotate(6deg); }
}
@keyframes auroraDrift3{
  0%{ transform:translate(0,0) scale(1); }
  100%{ transform:translate(3%,-3%) scale(1.15); }
}
.aurora-shimmer{
  position:absolute; inset:0;
  opacity:.3;
  mix-blend-mode:overlay;
  background-image:
    repeating-linear-gradient(115deg, transparent 0 40px, rgba(255,255,255,0.5) 40px 42px, transparent 42px 90px);
  animation:shimmerShift 22s linear infinite;
}
@keyframes shimmerShift{
  0%{ background-position:0 0; }
  100%{ background-position:400px 700px; }
}
@media (prefers-reduced-motion: reduce){
  .aurora-layer, .aurora-shimmer{animation:none !important;}
}

/* =====================================================
   Pixel bee banner — sky, clouds, grass strip, flowers, bee.
   Fixed full-width strip pinned to the bottom of the
   viewport: z-index sits ABOVE the aurora background (0)
   but BELOW the site content (2), so it runs continuously
   behind everything on the page as you scroll.
===================================================== */
.pcs-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:1;
  width:100%; height:236px;
  overflow:hidden;
  background:linear-gradient(180deg,
    #f4fbff 0%, #dff2ff 22%, #bfe6fb 45%, #94d1f4 68%, #6ec0ee 100%);
  image-rendering:pixelated;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 12%, #000 32%);
  mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 12%, #000 32%);
}
.pcs-sky-glow{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 8%, rgba(255,255,255,0.65), transparent 70%);
}
.pcs-cloud{
  position:absolute; top:18px; z-index:2; opacity:.92;
  background:#ffffff; image-rendering:pixelated;
  filter:drop-shadow(2px 3px 0 rgba(120,160,200,.35));
}
.pcs-grass{
  position:absolute; left:0; right:0; bottom:0; height:34px;
  z-index:5;
  image-rendering:pixelated;
  background:
    radial-gradient(circle, rgba(24,74,40,.4) 1px, transparent 1.6px) 2px 6px/12px 12px,
    radial-gradient(circle, rgba(110,210,140,.45) 1px, transparent 1.6px) 7px 16px/16px 16px,
    radial-gradient(circle, rgba(24,74,40,.35) 1px, transparent 1.6px) 12px 26px/14px 14px,
    linear-gradient(180deg, #57c473 0%, #3fae5c 35%, #2f8b4a 70%, #24713b 100%);
}
.pcs-grass::before{
  content:""; position:absolute; left:0; right:0; top:-10px; height:12px;
  background-image: repeating-linear-gradient(90deg, #2f8b4a 0 4px, transparent 4px 9px);
  background-size:9px 12px;
  image-rendering:pixelated;
}
.pcs-grass::after{
  content:""; position:absolute; left:4px; right:0; top:-16px; height:9px;
  background-image: repeating-linear-gradient(90deg, #57c473 0 3px, transparent 3px 9px);
  background-size:9px 9px;
  image-rendering:pixelated;
}
.pcs-grass-glow{
  position:absolute; left:2px; right:0; bottom:34px; height:5px; z-index:5;
  background-image: repeating-linear-gradient(90deg, #8beea1 0 2px, transparent 2px 9px);
  background-size:9px 5px;
  image-rendering:pixelated;
  pointer-events:none;
}
.pcs-flower{
  position:absolute; bottom:30px; z-index:5;
  image-rendering:pixelated;
  pointer-events:none;
  filter:drop-shadow(1px 1px 0 rgba(20,40,20,.25));
}
.pcs-chicken-wrap{
  position:absolute; bottom:150px; left:50%; z-index:6; will-change:transform, left;
  animation:pcsBeeHover 1.6s ease-in-out infinite;
}
.pcs-chicken-shadow{
  position:absolute; bottom:-122px; left:50%; transform:translateX(-50%);
  width:22px; height:6px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(20,30,20,.16) 0%, rgba(20,30,20,0) 72%);
  z-index:5;
}
.pcs-chicken{
  position:absolute; left:0; top:0; background:transparent;
  width:100px; max-width:none; height:auto;
  image-rendering:pixelated;
  filter:drop-shadow(1px 2px 0 rgba(20,40,20,.2));
  animation:pcsBeeFlap .22s ease-in-out infinite;
}
@keyframes pcsBeeFlap{
  0%,100%{ transform:scaleY(1); }
  50%{ transform:scaleY(0.92); }
}
@media (max-width:720px){
  .pcs-chicken{ width:68px; max-width:none; }
}
@keyframes pcsBeeHover{
  0%,100%{ margin-top:0; }
  50%{ margin-top:-6px; }
}
@media (max-width:720px){
  .pcs-chicken-wrap{ bottom:108px; }
}
@media (max-width:720px){
  .pcs-banner{height:170px;}
}
@media (prefers-reduced-motion: reduce){
  .pcs-chicken{ animation:none !important; }
}
.pcs-tree-layer{
  position:fixed; left:0; right:0; bottom:0; z-index:1;
  height:236px;
  pointer-events:none;
  overflow:visible;
}
@media (max-width:720px){
  .pcs-tree-layer{ height:170px; }
}
.pcs-tree{
  position:absolute; left:0px; bottom:33px; z-index:1;
  width:230px; height:auto;
  image-rendering:pixelated;
  filter:drop-shadow(2px 3px 0 rgba(20,40,20,.25));
  pointer-events:none;
}
@media (max-width:720px){
  .pcs-tree{ width:150px; left:0px; }
}
.pcs-leaf{
  position:absolute; top:-10px; z-index:7;
  width:8px; height:8px;
  background:#6ec06e;
  image-rendering:pixelated;
  opacity:.9;
  pointer-events:none;
  animation-name:pcsLeafFall;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
.pcs-leaf.l2{background:#8fd66a; width:6px; height:6px;}
.pcs-leaf.l3{background:#4a9e4f; width:7px; height:7px;}
@keyframes pcsLeafFall{
  0%{ transform:translate(0,0) rotate(0deg); opacity:.95; }
  85%{ opacity:.85; }
  100%{ transform:translate(var(--drift,18px), 190px) rotate(300deg); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .pcs-leaf{ animation:none !important; display:none; }
}

.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}

/* =====================================================
   Glass utility
===================================================== */
.glass{
  background:var(--glass-bg);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border:1px solid var(--glass-border);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, var(--shadow-soft);
}
.glass-strong{
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border:1px solid var(--glass-border);
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, var(--shadow-pop);
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Prompt',sans-serif; font-weight:600; font-size:13px;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--pink-deep);
  background:var(--pink-soft);
  padding:6px 14px; border-radius:999px;
}

.btn{
  font-family:'Prompt'; font-weight:600; font-size:14px;
  border:none; border-radius:999px; padding:11px 22px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
}
.btn-primary{background:linear-gradient(135deg,var(--pink),var(--pink-deep)); color:#fff; box-shadow:0 8px 20px rgba(244,98,140,.35);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(244,98,140,.45);}
.btn-ghost{background:rgba(255,255,255,.55); color:var(--ink); border:1px solid var(--line);}
.btn-ghost:hover{background:#fff;}
.btn-block{width:100%;}
.btn-sm{padding:8px 16px; font-size:13px;}

/* =====================================================
   Site shell
===================================================== */
.site{position:relative; z-index:2; min-height:100vh; display:flex; flex-direction:column;}

/* =====================================================
   Header / nav pill
===================================================== */
.site-header{
  position:fixed; top:16px; left:0; right:0; z-index:60;
  display:flex; justify-content:center; padding:0 16px;
  opacity:0; transform:translateY(-16px);
  animation: dropIn 0.7s var(--ease) 0.1s forwards;
}
.nav-shell{
  width:100%; max-width:1180px;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:8px 10px 8px 16px;
  border-radius:999px;
}
.brand{display:flex; align-items:center; gap:10px; padding-right:6px; flex:0 0 auto;}
.brand img{width:36px; height:36px; object-fit:contain; filter:drop-shadow(0 2px 6px rgba(244,98,140,.25));}
.brand-text{display:flex; flex-direction:column; line-height:1.05;}
.brand-text b{font-family:'Prompt'; font-size:14.5px; font-weight:700;}
.brand-text span{font-size:10px; color:var(--ink-soft); letter-spacing:.06em;}

.nav-links{display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0;}
.nav-links li{opacity:0; transform:translateY(-10px); animation:dropIn .55s var(--ease) forwards;}
.nav-links li:nth-child(1){animation-delay:.28s;}
.nav-links li:nth-child(2){animation-delay:.35s;}
.nav-links li:nth-child(3){animation-delay:.42s;}
.nav-links li:nth-child(4){animation-delay:.49s;}
.nav-links a.nav-link{
  display:block; padding:9px 15px; border-radius:999px;
  font-size:14px; font-weight:500; color:var(--ink-soft);
  transition:background .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.nav-links a.nav-link:hover{background:rgba(255,255,255,.6); color:var(--pink-deep);}
.nav-links a.nav-link.active{
  color:#fff; font-weight:600;
  background:linear-gradient(135deg,var(--pink),var(--pink-deep));
  box-shadow:0 6px 16px rgba(244,98,140,.35);
}

/* special "inside news" link — extra spacing + distinct treatment */
.nav-special-gap{width:16px; flex:0 0 auto;}
.nav-special{
  opacity:0; transform:translateY(-10px); animation:dropIn .55s var(--ease) .58s forwards;
}
.nav-special a{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 16px; border-radius:999px; font-size:13.5px; font-weight:600;
  color:var(--ink);
  background:linear-gradient(135deg, var(--yellow-soft), var(--blue-soft));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 4px 14px rgba(255,209,92,.35);
  white-space:nowrap;
  position:relative;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.nav-special a:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(255,209,92,.45);}
.nav-special a::before{
  content:'';
  width:6px; height:6px; border-radius:50%;
  background:var(--pink-deep);
  box-shadow:0 0 0 4px rgba(244,98,140,.25);
}
.nav-special svg{width:11px; height:11px; opacity:.7;}

/* special "apply" galaxy button — deep-space gradient, twinkling stars, glow pulse */
.nav-galaxy-gap{width:10px; flex:0 0 auto;}
.nav-galaxy{
  opacity:0; transform:translateY(-10px); animation:dropIn .55s var(--ease) .62s forwards;
}
.nav-galaxy a{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 17px 9px 14px; border-radius:999px; font-size:13.5px; font-weight:600;
  color:#f2ebff;
  background:
    radial-gradient(circle at 18% 30%, rgba(255,255,255,.9) 0 1px, transparent 1.6px),
    radial-gradient(circle at 55% 70%, rgba(255,255,255,.8) 0 1px, transparent 1.6px),
    radial-gradient(circle at 80% 25%, rgba(255,255,255,.9) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 35% 85%, rgba(255,255,255,.7) 0 1px, transparent 1.6px),
    linear-gradient(135deg, #241a4a, #4a2a7a 45%, #6a2f8f 75%, #2a1a52);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  border:1px solid rgba(200,170,255,.5);
  box-shadow:0 4px 16px rgba(122,58,196,.45), 0 0 0 1px rgba(255,255,255,.05) inset;
  white-space:nowrap;
  position:relative;
  overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
  animation: galaxyPulse 3.2s ease-in-out infinite;
}
.nav-galaxy a:hover{transform:translateY(-2px); box-shadow:0 8px 26px rgba(122,58,196,.6);}
.nav-galaxy a .galaxy-icon{
  width:14px; height:14px; flex:0 0 auto; color:#ffd97a;
  filter:drop-shadow(0 0 3px rgba(255,217,122,.8));
}
@keyframes galaxyPulse{
  0%, 100%{ box-shadow:0 4px 16px rgba(122,58,196,.45), 0 0 0 1px rgba(255,255,255,.05) inset; }
  50%{ box-shadow:0 4px 22px rgba(168,100,255,.7), 0 0 0 1px rgba(255,255,255,.08) inset; }
}
@media (prefers-reduced-motion: reduce){
  .nav-galaxy a{animation:none;}
}

.nav-actions{display:flex; align-items:center; gap:8px; opacity:0; transform:translateY(-10px); animation:dropIn .55s var(--ease) .66s forwards;}
.nav-toggle{display:none; background:rgba(255,255,255,.6); border:1px solid var(--line); border-radius:999px; width:40px; height:40px; align-items:center; justify-content:center;}
.nav-toggle svg{width:18px; height:18px;}

@keyframes dropIn{ to{ opacity:1; transform:translateY(0); } }

.mobile-menu{
  position:fixed; top:76px; left:14px; right:14px; z-index:59; border-radius:24px; padding:16px;
  display:none; flex-direction:column; gap:4px;
}
.mobile-menu.open{display:flex;}
.mobile-menu a{padding:12px 14px; border-radius:14px; font-weight:500;}
.mobile-menu a:hover{background:rgba(255,255,255,.6);}
.mobile-menu .divider-mini{height:1px; background:var(--line); margin:6px 4px;}
.mobile-menu .special-mobile{font-weight:700; color:var(--pink-deep);}
.mobile-menu .galaxy-mobile{color:#7a3ac4;}
.mobile-menu .btn{margin-top:8px;}

/* =====================================================
   Page shell + capsule wrapper
===================================================== */
main{flex:1; position:relative; z-index:1; padding:118px 0 60px;}
.page{display:block; scroll-margin-top:104px; margin-bottom:34px;}
.page:last-of-type{margin-bottom:0;}
.section-divider{display:flex; align-items:center; justify-content:center; gap:10px; margin:0 auto 34px; max-width:1180px; padding:0 24px; opacity:.55;}
.section-divider span{width:5px; height:5px; border-radius:50%; background:var(--pink-deep);}
.section-divider::before, .section-divider::after{content:''; flex:1; height:1px; background:var(--line);}

.page-capsule{
  border-radius:40px;
  padding:56px 48px;
  position:relative;
  overflow:hidden;
}
.page-capsule-wide{padding-left:24px; padding-right:24px;}
.page-capsule::before{
  content:'';
  position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:
    radial-gradient(480px 260px at 8% -10%, rgba(255,209,92,.25), transparent 60%),
    radial-gradient(420px 260px at 105% 10%, rgba(121,201,255,.22), transparent 55%);
}

.section-head{max-width:640px; margin:0 auto 46px; text-align:center;}
.section-head h2{font-size:clamp(26px,3.6vw,36px); margin:14px 0 12px;}
.section-head p{color:var(--ink-soft); font-size:15px; line-height:1.7;}

/* reveal-on-scroll (base hidden state; GSAP ScrollTrigger drives the actual animation
   further down in the file, so no CSS transition/is-visible rules are needed here) */

@media (prefers-reduced-motion: reduce){
  .reveal, .stagger > *{opacity:1 !important; transform:none !important; transition:none !important;}
  .site-header, .nav-links li, .nav-actions, .nav-special, .hero-card, .page.active{animation:none !important; opacity:1 !important; transform:none !important;}
  html{scroll-behavior:auto;}
}

/* =====================================================
   Home page
===================================================== */
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center;}
.hero-copy .eyebrow{margin-bottom:18px;}
.hero-copy h1{font-size:clamp(32px,4.6vw,52px); line-height:1.1; margin-bottom:16px;}
.hero-copy h1 .accent{
  background:linear-gradient(120deg,var(--pink-deep),var(--pink) 45%, var(--yellow));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-copy p{font-size:16.5px; line-height:1.75; color:var(--ink-soft); max-width:500px; margin-bottom:28px;}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap;}
.hero-stats{display:flex; gap:26px; margin-top:36px;}
.hero-stats div b{font-family:'Prompt'; font-size:24px; display:block;}
.hero-stats div span{font-size:12px; color:var(--ink-soft);}

.hero-card{
  border-radius:28px; padding:24px; position:relative;
  opacity:0; transform:translateY(20px) scale(.97);
  animation:cardIn .8s var(--ease) .4s forwards;
}
@keyframes cardIn{ to{opacity:1; transform:translateY(0) scale(1);} }
.hero-card img{border-radius:18px; width:100%; object-fit:cover; aspect-ratio:1/1;}
.hive-tag{
  margin-top:-16px; margin-left:22px; margin-right:22px; position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 17px; border-radius:16px;
}
.hive-tag .l div:first-child{font-family:'Prompt'; font-weight:600; font-size:13.5px;}
.hive-tag .l div:last-child{font-size:11.5px; color:var(--ink-soft);}
.hive-dot{width:9px; height:9px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 5px var(--blue-soft);}

.apply-inline{
  margin-top:60px; border-radius:28px; padding:2px; position:relative;
  background: conic-gradient(from 0deg, #ff8fab, #ffd15c, #79c9ff, #c9a6ff, #ff8fab);
  animation: applyBorderSpin 8s linear infinite;
}
@keyframes applyBorderSpin{ to{ filter:hue-rotate(360deg); } }
.apply-inline-inner{
  border-radius:26px; padding:36px; display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap;
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 55% 60% at 12% 15%, rgba(122,58,196,.55), transparent 60%),
    radial-gradient(ellipse 50% 55% at 85% 80%, rgba(58,90,196,.5), transparent 60%),
    linear-gradient(135deg, #140c2e, #241a4a 45%, #2e1a52 75%, #150c30);
}
.apply-stars{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 20%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 22% 65%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 38% 30%, #ffe9b0, transparent),
    radial-gradient(1.2px 1.2px at 52% 80%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 68% 18%, #d6c2ff, transparent),
    radial-gradient(1.3px 1.3px at 78% 55%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 90% 35%, #ffe9b0, transparent),
    radial-gradient(1.2px 1.2px at 95% 75%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 15% 90%, #d6c2ff, transparent),
    radial-gradient(1.4px 1.4px at 60% 8%, #fff, transparent);
  opacity:.85;
  animation: starTwinkle 4.5s ease-in-out infinite alternate;
}
@keyframes starTwinkle{ 0%{ opacity:.5; } 50%{ opacity:1; } 100%{ opacity:.6; } }
@media (prefers-reduced-motion: reduce){
  .apply-inline{animation:none;}
  .apply-stars{animation:none; opacity:.75;}
}
.apply-left{display:flex; align-items:center; gap:18px; position:relative; z-index:2;}
.apply-right{display:flex; align-items:center; gap:14px; position:relative; z-index:2; margin-left:auto; flex-wrap:wrap; justify-content:flex-end;}
@media (max-width:520px){ .apply-right{margin-left:0; justify-content:center; width:100%;} }
.apply-logo{
  width:60px; height:60px; border-radius:16px; overflow:hidden; background:rgba(255,255,255,.95);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(255,255,255,.15), 0 0 24px rgba(168,100,255,.55);
  animation: logoGlow 3s ease-in-out infinite;
}
@keyframes logoGlow{
  0%, 100%{ box-shadow:0 0 0 1px rgba(255,255,255,.15), 0 0 16px rgba(168,100,255,.45); }
  50%{ box-shadow:0 0 0 1px rgba(255,255,255,.2), 0 0 30px rgba(168,100,255,.75); }
}
@media (prefers-reduced-motion: reduce){ .apply-logo{animation:none;} }
.apply-logo img{width:100%; height:100%; object-fit:contain;}
.apply-left h3{font-size:18px; margin-bottom:5px; color:#f5f0ff;}
.apply-left p{color:#b8a8dc; font-size:13px; margin:0;}
.apply-inline .btn-primary{
  position:relative; z-index:2;
  background:linear-gradient(135deg, #ff8fab, #a86aff 55%, #79c9ff);
  box-shadow:0 8px 22px rgba(168,100,255,.5);
}
.apply-inline .btn-primary:hover{box-shadow:0 12px 30px rgba(168,100,255,.65);}

.inline-countdown{
  position:relative; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 14px; border-radius:999px;
  background:#0b0b0f;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 6px 18px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
}
.inline-countdown-unit{display:flex; flex-direction:column; align-items:center; line-height:1; min-width:30px;}
.inline-countdown-unit b{
  display:inline-block;
  font-family:'Prompt'; font-weight:700; font-size:15px; color:#fff;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
  white-space:nowrap;
  transform:scale(1); transform-origin:center;
  transition:transform .18s var(--ease);
  will-change:transform;
}
.inline-countdown-unit b.tick{transform:scale(1.12);}
.inline-countdown-unit span{font-size:8.5px; color:rgba(255,255,255,.55); margin-top:3px; letter-spacing:.02em; white-space:nowrap;}
.inline-countdown-colon{color:rgba(255,255,255,.4); font-weight:700; font-size:14px; margin-bottom:9px;}
.inline-countdown.is-open{
  background:linear-gradient(135deg, #ff8fab, #a86aff 55%, #79c9ff);
  border-color:rgba(255,255,255,.3);
  padding:10px 16px;
}
.inline-countdown.is-open .inline-countdown-open-label{color:#fff; font-family:'Prompt'; font-weight:700; font-size:12.5px;}
@media (max-width:520px){
  .inline-countdown{padding:7px 9px; gap:3px; overflow:visible;}
  .inline-countdown-unit{min-width:24px;}
  .inline-countdown-unit b{font-size:12px;}
  .inline-countdown-unit b.tick{transform:scale(1.08);}
  .inline-countdown-unit span{font-size:7px;}
  .inline-countdown-colon{font-size:12px; margin-bottom:7px;}
}

/* =====================================================
   Portfolio (works) — 3D coverflow carousel
===================================================== */
.works-carousel-wrap{position:relative; display:flex; align-items:center; gap:14px; padding:10px 0;}
.works-carousel-stage{position:relative; flex:1; min-width:0; height:520px;}
.works-carousel{
  position:absolute; inset:0;
  perspective:1900px; perspective-origin:50% 50%;
}
.carousel-card{
  position:absolute; top:0; left:50%; width:700px; height:510px; margin-left:-350px;
  border-radius:26px; overflow:hidden; cursor:pointer;
  transition:transform .55s cubic-bezier(.22,1,.36,1), opacity .5s ease, filter .4s ease, box-shadow .4s ease;
  transform-style:preserve-3d;
  box-shadow:0 24px 55px rgba(74,59,63,.25);
  background:linear-gradient(135deg,var(--yellow-soft),var(--pink-soft));
}
.carousel-card.is-active{
  box-shadow:0 30px 70px rgba(244,98,140,.35), 0 0 0 1px rgba(255,255,255,.5) inset;
}

/* ---- floating particle fx over the coverflow ---- */
.works-particles{position:absolute; inset:0; z-index:15; pointer-events:none; overflow:visible;}
.works-particles .p{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff, var(--pink) 60%, transparent 72%);
  opacity:.85; filter:blur(.2px);
  animation:particleFloat linear infinite, particleTwinkle ease-in-out infinite;
}
.works-particles .p:nth-child(1){left:6%;  top:78%; width:7px;  height:7px;  animation-duration:9s, 2.6s; animation-delay:0s, 0s;}
.works-particles .p:nth-child(2){left:16%; top:88%; width:5px;  height:5px;  background:radial-gradient(circle at 30% 30%,#fff,var(--yellow) 60%,transparent 72%); animation-duration:11s, 3.1s; animation-delay:.8s, .3s;}
.works-particles .p:nth-child(3){left:28%; top:92%; width:9px;  height:9px;  animation-duration:8.5s, 2.2s; animation-delay:1.6s, .6s;}
.works-particles .p:nth-child(4){left:40%; top:85%; width:4px;  height:4px;  background:radial-gradient(circle at 30% 30%,#fff,var(--blue) 60%,transparent 72%); animation-duration:12s, 3.4s; animation-delay:.3s, .9s;}
.works-particles .p:nth-child(5){left:52%; top:90%; width:6px;  height:6px;  animation-duration:9.5s, 2.8s; animation-delay:2.2s, .2s;}
.works-particles .p:nth-child(6){left:63%; top:82%; width:8px;  height:8px;  background:radial-gradient(circle at 30% 30%,#fff,var(--lavender) 60%,transparent 72%); animation-duration:10.5s, 3s; animation-delay:.6s, .5s;}
.works-particles .p:nth-child(7){left:74%; top:93%; width:5px;  height:5px;  animation-duration:8.8s, 2.4s; animation-delay:1.9s, .1s;}
.works-particles .p:nth-child(8){left:85%; top:86%; width:7px;  height:7px;  background:radial-gradient(circle at 30% 30%,#fff,var(--yellow) 60%,transparent 72%); animation-duration:11.5s, 3.3s; animation-delay:.1s, .7s;}
.works-particles .p:nth-child(9){left:94%; top:79%; width:4px;  height:4px;  animation-duration:13s, 2.9s; animation-delay:1.2s, .4s;}
.works-particles .p:nth-child(10){left:20%; top:96%; width:3px; height:3px; background:radial-gradient(circle at 30% 30%,#fff,var(--blue) 60%,transparent 72%); animation-duration:10s, 2.5s; animation-delay:2.6s, .8s;}
.works-particles .p:nth-child(11){left:46%; top:97%; width:5px; height:5px; animation-duration:9.2s, 3.2s; animation-delay:.4s, .2s;}
.works-particles .p:nth-child(12){left:70%; top:97%; width:3px; height:3px; background:radial-gradient(circle at 30% 30%,#fff,var(--lavender) 60%,transparent 72%); animation-duration:12.5s, 2.7s; animation-delay:1.4s, .6s;}
@keyframes particleFloat{
  0%{ transform:translate(0,0); }
  50%{ transform:translate(6px,-140px); }
  100%{ transform:translate(-4px,-280px); opacity:0; }
}
@keyframes particleTwinkle{
  0%,100%{ opacity:.25; }
  50%{ opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .works-particles .p{animation:none !important; display:none;}
}
.carousel-card:not(.is-active){filter:brightness(.68) saturate(.8);}
.carousel-card.is-active{cursor:default;}
.carousel-card .thumb{position:absolute; inset:0;}
.carousel-card .thumb img, .carousel-card .thumb video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}
.carousel-card .thumb video{opacity:0; transition:opacity .4s ease;}
.carousel-card.video-active .thumb video{opacity:1;}
.carousel-card.video-active .thumb img{opacity:0;}
.carousel-card .card-info{
  position:absolute; left:0; right:0; bottom:0; padding:20px 18px;
  background:linear-gradient(to top, rgba(20,12,30,.88), rgba(20,12,30,.35) 65%, transparent);
  color:#fff; z-index:2;
}
.carousel-card .card-info .tag{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--yellow);}
.carousel-card .card-info h3{font-size:17px; margin:6px 0 4px; color:#fff;}
.carousel-card .card-info p{font-size:12px; color:rgba(255,255,255,.78); margin:0; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.carousel-watch-btn{
  position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center;
  background:rgba(15,10,25,.22); opacity:0; transition:opacity .3s ease; pointer-events:none;
}
/* โชว์ฉากมืด + ปุ่มตอนพรีวิวเล่น แต่ "เฉพาะตัวปุ่ม" เท่านั้นที่กดได้
   พื้นที่ว่างรอบๆ ปล่อยให้คลิกทะลุไปเปิดรายละเอียดโปรเจกต์ */
.carousel-card.video-active .carousel-watch-btn{opacity:1; pointer-events:none;}
.carousel-card.video-active .carousel-watch-btn span{pointer-events:auto; cursor:pointer;}
.carousel-watch-btn span{
  display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:999px;
  background:rgba(255,255,255,.94); color:var(--ink); font-family:'Prompt'; font-weight:700; font-size:13px;
  box-shadow:0 10px 26px rgba(0,0,0,.35); transition:transform .2s ease;
}
.carousel-watch-btn span:hover{transform:scale(1.06);}
.carousel-watch-btn svg{width:14px; height:14px; color:var(--pink-deep);}
/* ป้ายบอกใบ้ว่ากดที่การ์ดเพื่ออ่านรายละเอียดได้ */
.carousel-detail-hint{
  position:absolute; left:0; right:0; bottom:12px; z-index:4;
  text-align:center; opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.carousel-card.video-active .carousel-detail-hint{opacity:1;}
.carousel-detail-hint b{
  display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:999px;
  background:rgba(15,10,25,.55); color:#fff; font-family:'Prompt'; font-weight:600;
  font-size:11px; letter-spacing:.01em; backdrop-filter:blur(4px);
}

/* =====================================================
   หน้ารายละเอียดโปรเจกต์ — กางเต็มบนคอม, 2 คอลัมน์
===================================================== */
.modal.modal-detail{
  max-width:1100px; padding:0; overflow:hidden;
  max-height:min(88vh, 780px); display:flex; flex-direction:column;
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 34px 90px rgba(74,59,63,.26), inset 0 0 0 1px rgba(255,255,255,.35);
}
.modal.modal-detail .modal-close{
  top:14px; right:14px; z-index:12;
  background:rgba(255,255,255,.9); box-shadow:0 3px 12px rgba(74,59,63,.2);
  transition:transform .22s var(--ease), background .22s ease;
}
.modal.modal-detail .modal-close:hover{ transform:rotate(90deg); background:#fff; }

.detail-grid{ display:grid; grid-template-columns:1fr; overflow-y:auto; max-height:min(88vh, 780px); }
.detail-media{ position:relative; }
.detail-body{ padding:26px 28px 30px; min-width:0; }
.detail-body .eyebrow{ display:inline-block; }
.detail-logo{ display:none; margin-bottom:14px; }
.detail-logo.show{ display:block; }
.detail-logo img{
  max-width:100%; max-height:150px; width:auto; height:auto; display:block;
  filter:drop-shadow(0 6px 18px rgba(74,59,63,.22));
}

.overlay.open .modal-detail .detail-logo.show{ animation:dIn .5s var(--ease) .08s both; }

.dg-strip-label{
  flex:0 0 auto; font-family:'Prompt'; font-weight:700; font-size:12px; color:var(--ink-soft);
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.dg-strip-label::before{
  content:''; width:5px; height:5px; border-radius:50%; background:var(--pink-deep);
}
.detail-body h3{ margin:12px 0 0; font-size:26px; line-height:1.28; }

/* เส้นคั่นไล่สีตามธีมรัง แทนเส้นเทาธรรมดา */
.detail-rule{
  height:3px; width:64px; margin:14px 0 16px; border-radius:999px;
  background:var(--pink-deep);
  transform-origin:left center;
}
.overlay.open .modal-detail .detail-rule{ animation:ruleGrow .6s var(--ease) .16s both; }
@keyframes ruleGrow{ from{ transform:scaleX(0); opacity:0; } to{ transform:scaleX(1); opacity:1; } }

.btn-watch-full{ margin-top:20px; align-self:flex-start; }

@media (min-width:1000px){
  /* แกลเลอรีเป็นพระเอกฝั่งซ้าย · ฝั่งขวาเป็นข้อมูล + คลิปย่อ
     ทั้งสองคอลัมน์สูงเท่ากันและพอดีจอ ไม่ต้องเลื่อน */
  .detail-grid{ grid-template-columns:minmax(0,1.32fr) minmax(330px,1fr); align-items:stretch; }
  .detail-media{ padding:26px 0 26px 26px; display:flex; flex-direction:column; justify-content:center; }
  .detail-body{ padding:26px 30px 26px 26px; display:flex; flex-direction:column; overflow-y:auto; }
  .detail-body h3{ font-size:28px; }
  .detail-body .sub{ font-size:14px; max-width:46ch; }
}
@media (min-width:1400px){
  .modal.modal-detail{ max-width:1240px; }
  .detail-body h3{ font-size:32px; }
}

/* ทยอยโผล่ทีละชิ้นตอนเปิด */
.overlay.open .modal-detail .detail-media{ animation:dIn .5s var(--ease) .05s both; }
.overlay.open .modal-detail .eyebrow{ animation:dIn .5s var(--ease) .12s both; }
.overlay.open .modal-detail h3{ animation:dIn .5s var(--ease) .18s both; }
.overlay.open .modal-detail #detailDesc{ animation:dIn .5s var(--ease) .26s both; }
.overlay.open .modal-detail .btn-watch-full{ animation:dIn .5s var(--ease) .36s both; }
@keyframes dIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
html.perf-mode .overlay.open .modal-detail *{ animation:none !important; }

/* ---- แกลเลอรีรูป — สไลด์แบบเรียบ ไม่มี 3D ---- */
.detail-gallery{ margin-top:11px; display:none; }
.detail-gallery.show{ display:block; }
.detail-gallery-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.detail-gallery-head b{
  font-family:'Prompt'; font-weight:700; font-size:13.5px; color:var(--ink);
  display:inline-flex; align-items:center; gap:7px;
}
.detail-gallery-head b::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--pink-deep); box-shadow:0 0 0 3px rgba(244,98,140,.18);
}
.dg-head-right{ display:flex; align-items:center; gap:9px; }
.detail-gallery-count{ font-size:11.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums; letter-spacing:.03em; }
.dg-play{
  width:26px; height:26px; border-radius:50%; border:1px solid var(--line); cursor:pointer;
  background:rgba(255,255,255,.7); color:var(--ink-soft); padding:0;
  display:flex; align-items:center; justify-content:center;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.dg-play:hover{ color:var(--pink-deep); border-color:var(--pink); background:#fff; }
.dg-play svg{ width:11px; height:11px; }
.dg-play .dg-ic-play{ display:none; }
.dg-play[data-playing="0"] .dg-ic-pause{ display:none; }
.dg-play[data-playing="0"] .dg-ic-play{ display:block; }

.dg-stage{
  position:relative; border-radius:18px; overflow:hidden;
  background:rgba(74,59,63,.06); aspect-ratio:16/10;
  box-shadow:0 14px 38px rgba(74,59,63,.16);
}
.dg-track{ display:flex; height:100%; transition:transform .55s var(--ease); will-change:transform; }
.dg-slide{ flex:0 0 100%; height:100%; position:relative; overflow:hidden; }
.dg-slide img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.06); transition:transform 6s linear; }
.dg-slide.current img{ transform:scale(1); }
.dg-cap{
  position:absolute; left:0; right:0; bottom:0; padding:26px 15px 13px;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.66));
  color:#fff; font-size:12.5px; line-height:1.5;
}
.dg-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.92); box-shadow:0 5px 16px rgba(0,0,0,.24);
  display:flex; align-items:center; justify-content:center; color:var(--ink);
  opacity:0; transition:opacity .25s ease, background .2s ease, transform .2s var(--ease);
}
.dg-stage:hover .dg-arrow{ opacity:1; }
.dg-arrow:hover{ background:#fff; color:var(--pink-deep); }
.dg-prev:hover{ transform:translateY(-50%) translateX(-2px); }
.dg-next:hover{ transform:translateY(-50%) translateX(2px); }
.dg-arrow svg{ width:18px; height:18px; }
.dg-prev{ left:11px; } .dg-next{ right:11px; }

.dg-progress{ position:absolute; left:0; right:0; bottom:0; height:3px; z-index:4; background:rgba(255,255,255,.25); }
.dg-progress i{ display:block; height:100%; width:0; background:var(--pink-deep); }

.dg-strip-row{ display:flex; align-items:center; gap:10px; margin-top:11px; flex-wrap:wrap; }
.dg-thumbs{
  display:flex; gap:7px; overflow-x:auto; flex:1 1 auto; min-width:0;
  padding-bottom:3px; scrollbar-width:thin;
}
.dg-thumbs::-webkit-scrollbar{ height:4px; }
.dg-thumbs::-webkit-scrollbar-thumb{ background:rgba(74,59,63,.2); border-radius:99px; }
.dg-dot{
  flex:0 0 auto; width:60px; height:38px; border-radius:8px; padding:0; cursor:pointer;
  border:2px solid transparent; overflow:hidden; background:rgba(74,59,63,.08);
  opacity:.62; transition:opacity .2s ease, border-color .2s ease, transform .2s var(--ease);
}
.dg-dot img{ width:100%; height:100%; object-fit:cover; display:block; }
.dg-dot:hover{ opacity:1; transform:translateY(-2px); }
.dg-dot.active{ opacity:1; border-color:var(--pink-deep); }
.dg-dot .dg-thumb-vid{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:#241a2e; color:#fff;
}
.dg-dot .dg-thumb-vid svg{ width:14px; height:14px; }

@media (max-width:999px){
  .modal.modal-detail{ max-height:92vh; }
  .detail-grid{ max-height:92vh; }
  .detail-media{ padding:16px 16px 0; }
  .dg-stage{ border-radius:14px; }
  .detail-gallery{ padding:0; margin-top:10px; }
  .dg-strip-label{ flex:1 1 100%; margin-bottom:2px; }
  .dg-dot{ width:52px; height:34px; }
  .detail-logo img{ max-height:74px; }
  .detail-body{ padding:18px 18px 22px; }
  .detail-body h3{ font-size:21px; }
  .detail-body .sub{ font-size:13.5px; }
  .detail-rule{ margin:11px 0 13px; }
  .detail-clip{ padding-top:14px; }
  .btn-watch-full{ margin-top:16px; }
}
@media (max-width:520px){
  .detail-media{ padding:14px 14px 0; }
  .detail-body{ padding:16px 16px 20px; }
  .detail-body h3{ font-size:19.5px; }
  .detail-logo img{ max-height:64px; }
  .dg-arrow{ width:30px; height:30px; opacity:1; }
  .dg-prev{ left:7px; } .dg-next{ right:7px; }
  .dg-cap{ font-size:11.5px; padding:20px 12px 10px; }
  .dg-dot{ width:46px; height:30px; }
  .dg-strip-label{ font-size:11.5px; }
}
@media (prefers-reduced-motion:reduce){
  .overlay.open .modal-detail *{ animation:none !important; }
  .dg-slide img{ transition:none; transform:none; }
  .dg-track{ transition:none; }
}

/* ---- แผงจัดการแกลเลอรีรูป (แอดมิน) ---- */
.pf-gallery-admin{
  margin-top:14px; padding-top:14px; border-top:1px dashed rgba(74,59,63,.18);
}
.pf-gallery-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr));
  gap:8px; margin-top:10px;
}
.pf-gi{
  position:relative; aspect-ratio:1; border-radius:11px; overflow:hidden;
  background:rgba(74,59,63,.07); border:1px solid rgba(74,59,63,.12);
}
.pf-gi img{ width:100%; height:100%; object-fit:cover; display:block; }
.pf-gi button{
  position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%;
  border:none; cursor:pointer; background:rgba(220,38,38,.92); color:#fff;
  font-size:13px; line-height:1; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.28);
}
.pf-gi button:hover{ background:rgb(185,28,28); }
.pf-gi.uploading{ opacity:.5; }
.pf-gallery-empty{ font-size:12px; color:var(--ink-soft); padding:6px 0; }
@media (max-width:520px){
  .dg-arrow{ width:31px; height:31px; }
  .dg-prev{ left:7px; } .dg-next{ right:7px; }
  .dg-cap{ font-size:11.5px; }
}

.carousel-arrow{
  width:44px; height:44px; border-radius:50%; border:none; flex:0 0 auto; z-index:20;
  background:rgba(255,255,255,.85); box-shadow:0 6px 18px rgba(74,59,63,.18);
  display:flex; align-items:center; justify-content:center; color:var(--ink);
  transition:transform .2s ease, background .2s ease, opacity .2s ease;
}
.carousel-arrow:hover:not(:disabled){background:#fff; transform:scale(1.08);}
.carousel-arrow svg{width:19px; height:19px;}
.carousel-arrow:disabled{opacity:.25; cursor:default;}

.carousel-dots{display:flex; justify-content:center; gap:8px; margin-top:16px;}
.carousel-dot{width:8px; height:8px; border-radius:50%; border:none; background:var(--line); transition:all .25s ease; padding:0; cursor:pointer;}
.carousel-dot.active{width:24px; border-radius:5px; background:var(--pink);}

.empty-note{text-align:center; padding:36px 20px; color:var(--ink-soft); font-size:14px; border-radius:18px; border:1.5px dashed var(--line);}

.youtube-modal{max-width:780px;}
.youtube-frame-wrap{position:relative; width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden; background:#000;}
.youtube-frame-wrap iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

/* =====================================================
   Shop
===================================================== */
.shop-panel{border-radius:26px; padding:44px; text-align:center; position:relative; overflow:hidden;}
.shop-panel h3{font-size:22px; margin-bottom:10px;}
.shop-panel p{color:var(--ink-soft); max-width:460px; margin:0 auto 20px; line-height:1.7;}
.shop-badges{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:24px;}
.shop-badge{padding:8px 16px; border-radius:999px; background:#fff; font-size:12px; font-weight:600; border:1px solid var(--line);}

/* =====================================================
   News
===================================================== */
.featured-news{
  display:flex; gap:22px; align-items:center; border-radius:24px; padding:24px; margin-bottom:18px;
  background:linear-gradient(120deg, rgba(255,209,92,.28), rgba(121,201,255,.2));
}
.featured-news .date{
  flex:0 0 auto; width:70px; height:70px; border-radius:17px;
  background:linear-gradient(135deg,var(--pink),var(--pink-deep)); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:'Prompt'; line-height:1;
  overflow:hidden;
}
.featured-news .date.has-img{background:none;}
.featured-news .date b{font-size:22px;}
.featured-news .date span{font-size:10.5px; opacity:.85;}
.featured-news h3{font-size:19px; margin-bottom:6px;}
.featured-news p{font-size:13.5px; color:var(--ink-soft); line-height:1.7; margin:0;}
.news-list{display:flex; flex-direction:column; gap:14px;}
.news-item{
  display:flex; gap:16px; padding:17px; border-radius:18px; align-items:center; cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.news-item:hover{transform:translateX(4px);}
.news-item .date{
  flex:0 0 auto; width:60px; height:60px; border-radius:15px;
  background:linear-gradient(135deg,var(--blue),var(--lavender)); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:'Prompt'; line-height:1; overflow:hidden;
}
.news-item .date b{font-size:19px;}
.news-item .date span{font-size:10px; opacity:.85;}
.news-item .date.has-img{background:none;}
.news-item .date.has-img img, .featured-news .date.has-img img{width:100%; height:100%; object-fit:cover;}
.news-item .content h4{font-size:15.5px; margin-bottom:5px;}
.news-item .content p{font-size:13px; color:var(--ink-soft); margin:0; line-height:1.6;}
.featured-news{cursor:pointer;}

/* =====================================================
   Footer
===================================================== */
footer{padding:44px 0 34px; position:relative; z-index:2;}
.footer-shell{border-radius:32px; padding:34px 36px;}
.footer-top{display:flex; justify-content:space-between; align-items:flex-start; gap:36px; flex-wrap:wrap; padding-bottom:28px; border-bottom:1px solid var(--line);}
.footer-brand{display:flex; align-items:center; gap:12px;}
.footer-brand img{width:38px; height:38px;}
.footer-brand b{font-family:'Prompt'; font-size:15.5px;}
.footer-brand span{display:block; font-size:11.5px; color:var(--ink-soft);}
.social-row{display:flex; gap:10px;}
.social-btn{
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--line); transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.social-btn:hover{transform:translateY(-3px); background:var(--pink); color:#fff;}
.social-btn svg{width:18px; height:18px;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:22px; flex-wrap:wrap; gap:14px;}
.powered-capsule{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px;
  font-size:12px; font-weight:600; color:var(--ink);
}
.powered-capsule .dot{width:6px; height:6px; border-radius:50%; background:var(--pink);}
.footer-links{font-size:12.5px; color:var(--ink-soft);}

/* =====================================================
   Modal / overlay shared
===================================================== */
.overlay{
  position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:20px;
  background:rgba(74,59,63,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity:0; transition:opacity .25s ease;
}
.overlay.open{display:flex; opacity:1;}
.modal{
  width:100%; max-width:420px; border-radius:26px; padding:32px 30px 28px; position:relative;
  max-height:88vh; overflow-y:auto;
  transform:translateY(18px) scale(.97); opacity:0; transition:transform .3s var(--ease), opacity .3s ease;
}
.overlay.open .modal{transform:translateY(0) scale(1); opacity:1;}
.modal.modal-wide{max-width:640px;}
.modal-close{position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%; background:rgba(74,59,63,.06); border:none; display:flex; align-items:center; justify-content:center;}
.modal-close svg{width:16px; height:16px;}
.modal h3{font-size:22px; margin-bottom:4px;}
.modal .sub{font-size:13.5px; color:var(--ink-soft); margin-bottom:22px;}

/* ---- apply countdown (flip-clock) ---- */
.apply-lock-icon{
  width:64px; height:64px; border-radius:50%; margin:2px auto 14px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--pink-soft), var(--blue-soft)); box-shadow:0 8px 20px rgba(244,98,140,.22);
}
.apply-lock-icon svg{width:26px; height:26px; color:var(--pink-deep);}
.countdown-flip{display:flex; align-items:flex-start; justify-content:center; gap:8px; margin:22px 0 6px; flex-wrap:wrap;}
.countdown-unit{display:flex; flex-direction:column; align-items:center; gap:8px;}
.countdown-digit{
  min-width:56px; height:60px; padding:0 8px; border-radius:14px;
  background:linear-gradient(180deg,#fff, var(--pink-soft) 180%);
  box-shadow:0 8px 18px rgba(74,59,63,.16), inset 0 1px 0 rgba(255,255,255,.95);
  display:flex; align-items:center; justify-content:center;
  font-family:'Prompt'; font-weight:800; font-size:24px; color:var(--ink);
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
  white-space:nowrap;
  position:relative; overflow:visible; transform:scale(1); transform-origin:center;
  transition:transform .18s var(--ease); will-change:transform;
}
.countdown-digit::after{content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(74,59,63,.10);}
.countdown-digit.tick{transform:scale(1.06);}
.countdown-colon{font-family:'Prompt'; font-weight:800; font-size:22px; color:var(--pink-deep); align-self:center; padding-top:16px;}
.countdown-label{font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft);}
.apply-countdown-note{text-align:center; font-size:13px; color:var(--ink-soft); line-height:1.7; margin-top:14px;}
.apply-countdown-open .apply-countdown-note{color:var(--pink-deep); font-weight:700;}
@media (max-width:480px){
  .countdown-flip{gap:5px;}
  .countdown-digit{min-width:46px; height:50px; font-size:18px; padding:0 3px;}
  .countdown-digit.tick{transform:scale(1.04);}
  .countdown-colon{font-size:16px; padding-top:14px;}
}
@media (max-width:360px){
  .countdown-digit{min-width:40px; height:46px; font-size:16px; padding:0 2px;}
}

.federated-row{display:flex; flex-direction:column; gap:10px; margin-bottom:20px;}
.btn-federated{
  display:flex; align-items:center; justify-content:center; gap:10px;
  border:1px solid var(--line); background:#fff; border-radius:14px; padding:11px 16px;
  font-family:'Sarabun'; font-weight:600; font-size:14px; transition:background .2s ease, transform .2s ease;
}
.btn-federated:hover{background:#faf7f2; transform:translateY(-1px);}
.btn-federated svg{width:18px; height:18px;}

/* ── Discord Link Overlay ── */
.discord-link-icon{display:flex; justify-content:center; margin:8px 0 0;}
.discord-link-info{background:rgba(88,101,242,.06); border:1px solid rgba(88,101,242,.18); border-radius:14px; padding:14px 16px; margin-bottom:18px; display:flex; flex-direction:column; gap:10px;}
.discord-link-row{display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--ink-soft); line-height:1.4;}
.discord-link-row svg{color:#5865F2; flex-shrink:0; margin-top:1px;}
.discord-link-row strong{color:var(--ink); font-weight:700;}
.btn-discord{
  display:flex; align-items:center; justify-content:center;
  background:#5865F2; color:#fff; border:none; border-radius:14px;
  padding:13px 20px; font-family:'Sarabun'; font-weight:700; font-size:15px;
  transition:background .2s ease, transform .15s ease; cursor:pointer;
}
.btn-discord:hover:not(:disabled){background:#4752c4; transform:translateY(-1px);}
.btn-discord:disabled{opacity:.6; cursor:not-allowed;}

/* ปุ่ม Discord ใหญ่ */
.btn-discord-lg{ padding:16px 24px; font-size:17px; border-radius:16px; }

/* Merge view */
.discord-merge-header{ display:flex; align-items:flex-start; gap:14px; margin-bottom:16px; }
.discord-merge-header h3{ font-size:16px; color:var(--ink); }
.discord-merge-preview{
  background:rgba(88,101,242,.07); border:1px solid rgba(88,101,242,.2);
  border-radius:14px; padding:14px 16px; margin-bottom:14px;
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.dmp-col{ display:flex; flex-direction:column; gap:6px; }
.dmp-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); }
.dmp-name{ font-size:14px; font-weight:700; color:var(--ink); }
.dmp-stats{ display:flex; flex-direction:column; gap:4px; }
.dmp-stat{ font-size:13px; color:var(--ink-soft); }
.dmp-stat strong{ color:var(--ink); }
.dmp-arrow{ display:flex; align-items:center; justify-content:center; grid-column:1/-1; }
.discord-merge-note{
  display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-soft);
  background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.22);
  border-radius:10px; padding:10px 12px; margin-bottom:14px;
}
.discord-merge-note svg{ flex-shrink:0; color:#f59e0b; }

/* ===== รายการบัญชีที่เชื่อม (Google / Discord) ===== */
.linked-accounts{ display:flex; flex-direction:column; gap:8px; margin:14px 0 18px; }
.linked-acc-row{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:14px;
  border:1.5px solid var(--line); background:#fff;
  transition:border-color .2s ease, background .2s ease;
}
.linked-acc-row.is-linked{ border-color:rgba(74,222,128,.35); background:rgba(74,222,128,.05); }
.linked-acc-row.is-primary{ border-color:rgba(255,196,70,.5); background:rgba(255,196,70,.06); }
.linked-acc-row.is-unlinked{ cursor:pointer; }
.linked-acc-row.is-unlinked:hover{ border-color:rgba(88,101,242,.35); background:rgba(88,101,242,.04); }

.linked-acc-icon{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(74,59,63,.05);
}
.linked-acc-icon.la-discord{ background:rgba(88,101,242,.1); }

.linked-acc-info{ display:flex; flex-direction:column; min-width:0; flex:1; gap:1px; }
.linked-acc-name{ font-family:'Prompt'; font-weight:700; font-size:13.5px; color:var(--ink); }
.linked-acc-sub{ font-size:11.5px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.linked-acc-badge{ flex-shrink:0; display:flex; align-items:center; gap:5px; }

/* badge: เชื่อมแล้ว (ติ๊กเขียว) */
.la-badge-linked{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background:#22c55e; color:#fff;
}
.la-badge-linked svg{ width:13px; height:13px; }

/* badge: บัญชีหลัก (ดาวทอง) */
.la-badge-primary{
  display:inline-flex; align-items:center; gap:4px;
  font-size:10.5px; font-weight:700; color:#a16207;
  background:linear-gradient(135deg,#fde68a,#fbbf24);
  padding:3px 9px 3px 7px; border-radius:999px;
  box-shadow:0 2px 6px rgba(251,191,36,.35);
}
.la-badge-primary svg{ width:11px; height:11px; }

/* badge: ยังไม่เชื่อม */
.la-badge-connect{
  font-size:11px; font-weight:700; color:#5865F2;
  padding:5px 12px; border-radius:999px;
  border:1.5px dashed rgba(88,101,242,.4);
  white-space:nowrap;
}

.la-row-loading .linked-acc-sub{ display:inline-flex; align-items:center; gap:6px; }
.la-spinner{
  width:10px; height:10px; border-radius:50%; flex-shrink:0; display:inline-block;
  border:2px solid rgba(120,120,140,.25); border-top-color:var(--ink-soft);
  animation:dchipSpin .7s linear infinite;
}
@keyframes dchipSpin{ to{ transform:rotate(360deg); } }

.divider{display:flex; align-items:center; gap:12px; margin:6px 0 20px; color:var(--ink-soft); font-size:12.5px;}
.divider::before, .divider::after{content:''; flex:1; height:1px; background:var(--line);}

.field{margin-bottom:16px;}
.field label{display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--ink);}
.field input, .field textarea{
  width:100%; border:1.5px solid var(--line); border-radius:12px; padding:11px 14px; font-size:14.5px;
  font-family:'Sarabun'; background:rgba(255,255,255,.7); transition:border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--pink); box-shadow:0 0 0 4px var(--pink-soft);}
.field textarea{resize:vertical; min-height:80px;}
.pw-wrap{position:relative;}
.pw-wrap input{padding-right:44px;}
.pw-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border-radius:8px; background:transparent; border:none;
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft);
}
.pw-toggle:hover{background:rgba(74,59,63,.06);}
.pw-toggle svg{width:18px; height:18px;}
.form-note{font-size:12px; color:var(--ink-soft); margin-top:14px; text-align:center;}
.form-msg{font-size:13px; border-radius:10px; padding:9px 12px; margin-bottom:14px; display:none;}
.form-msg.show{display:block;}
.form-msg.error{background:#ffe4e9; color:#c23a58;}
.form-msg.success{background:#e1f6e6; color:#2c8a4b;}

.admin-tabs{display:flex; gap:6px; margin-bottom:20px; background:rgba(74,59,63,.06); padding:5px; border-radius:12px;}
.admin-tab{flex:1; text-align:center; padding:9px; border-radius:9px; font-size:13px; font-weight:600; background:transparent; border:none; color:var(--ink-soft);}
.admin-tab.active{background:#fff; color:var(--pink-deep); box-shadow:0 2px 8px rgba(0,0,0,.06);}
.admin-panel-section{display:none;}
.admin-panel-section.active{display:block;}
.admin-list{display:flex; flex-direction:column; gap:10px; margin-top:18px; max-height:280px; overflow-y:auto;}
.admin-list-item{display:flex; align-items:center; gap:12px; padding:10px; border-radius:12px; background:rgba(255,255,255,.6); border:1px solid var(--line); transition:border-color .2s ease, background .2s ease;}
.admin-list-item.is-editing{border-color:var(--pink); background:var(--pink-soft);}
.admin-list-item img{width:40px; height:40px; border-radius:8px; object-fit:cover; flex:0 0 auto;}
.admin-list-item .info{flex:1; min-width:0;}
.admin-list-item .info b{font-size:13px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.admin-list-item .info span{font-size:11.5px; color:var(--ink-soft);}
.admin-item-actions{display:flex; align-items:center; gap:3px; flex:0 0 auto;}
.admin-mini-btn{
  width:25px; height:25px; border-radius:50%; border:none; background:rgba(74,59,63,.06); color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; transition:background .2s ease, color .2s ease, opacity .2s ease;
}
.admin-mini-btn svg{width:12px; height:12px;}
.admin-mini-btn:hover:not(:disabled){background:var(--blue-soft); color:#2e7fb8;}
.admin-mini-btn:disabled{opacity:.3;}
.admin-mini-btn.admin-edit-btn:hover{background:var(--yellow-soft); color:#a3730a;}
.admin-mini-btn.admin-del{background:rgba(244,98,140,.1); color:var(--pink-deep);}
.admin-mini-btn.admin-del:hover{background:var(--pink); color:#fff;}
.file-drop{
  border:1.5px dashed var(--line); border-radius:14px; padding:18px; text-align:center; cursor:pointer;
  font-size:13px; color:var(--ink-soft); background:rgba(255,255,255,.5); position:relative;
}
.file-drop input{position:absolute; inset:0; opacity:0; cursor:pointer;}
.file-preview{width:56px; height:56px; border-radius:12px; object-fit:cover; margin:0 auto 8px;}
.admin-badge{position:fixed; bottom:96px; right:20px; z-index:55; display:none; align-items:center; gap:10px; padding:10px 16px; border-radius:999px;}
.admin-badge.show{display:flex;}
.admin-badge svg{width:16px; height:16px; color:var(--pink-deep);}

/* ---- chat widget (floating, seasonal icon, admin thread support) ---- */
.chat-fab{
  position:fixed; right:20px; bottom:20px; z-index:80;
  width:64px; height:64px; border-radius:50%; border:none; cursor:pointer; padding:0;
  background:linear-gradient(155deg, rgba(255,255,255,.75), rgba(255,255,255,.28) 40%, rgba(255,143,171,.22) 100%);
  backdrop-filter:blur(11px) saturate(150%); -webkit-backdrop-filter:blur(11px) saturate(150%);
  box-shadow:0 10px 28px rgba(74,59,63,.22), inset 0 1px 1px rgba(255,255,255,.9), inset 0 -6px 10px rgba(255,143,171,.18), 0 0 0 1px rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center; overflow:visible;
  transition:transform .2s ease;
}
.chat-fab::before{
  content:''; position:absolute; top:6px; left:9px; width:22px; height:12px; border-radius:50%;
  background:rgba(255,255,255,.85); filter:blur(3px); pointer-events:none;
}
.chat-fab:hover{transform:translateY(-2px) scale(1.03);}
.chat-fab img{width:66%; height:66%; object-fit:contain; display:block; filter:drop-shadow(0 3px 5px rgba(74,59,63,.28));}
.chat-fab .chat-fab-ring{
  position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--pink); opacity:.55;
  animation:chatPulse 2.4s ease-out infinite;
}
@keyframes chatPulse{0%{transform:scale(.92); opacity:.55;} 100%{transform:scale(1.28); opacity:0;}}
.chat-fab-dot{
  position:absolute; top:-2px; right:-2px; width:16px; height:16px; border-radius:50%;
  background:#4bd07a; box-shadow:0 0 0 3px #fff; display:none;
}
.chat-fab-dot.show{display:block;}
.chat-fab-dot span{
  position:absolute; inset:0; border-radius:50%; background:#4bd07a;
  animation:chatDotPing 1.8s ease-out infinite;
}
@keyframes chatDotPing{0%{transform:scale(1); opacity:.7;} 100%{transform:scale(2.1); opacity:0;}}

.chat-panel{
  position:fixed; right:20px; bottom:92px; z-index:81; width:340px; max-width:calc(100vw - 32px);
  height:460px; max-height:calc(100vh - 130px); border-radius:22px; overflow:hidden;
  display:flex; flex-direction:column; transform:translateY(16px) scale(.97); opacity:0; pointer-events:none;
  transition:transform .22s ease, opacity .22s ease;
  background:var(--glass-bg-strong); backdrop-filter:blur(13px); -webkit-backdrop-filter:blur(13px);
  border:1px solid var(--glass-border); box-shadow:0 20px 48px rgba(74,59,63,.22);
}
.chat-panel.open{transform:translateY(0) scale(1); opacity:1; pointer-events:auto;}
.chat-panel-head{
  display:flex; align-items:center; gap:10px; padding:14px 16px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--pink),var(--pink-deep)); color:#fff;
}
.chat-panel-head img{width:34px; height:34px; object-fit:contain; padding:5px; border-radius:50%; background:rgba(255,255,255,.35); box-shadow:0 0 0 2px rgba(255,255,255,.6); box-sizing:border-box;}
.chat-panel-head .title{flex:1; min-width:0;}
.chat-panel-head .title b{display:block; font-family:'Prompt'; font-size:14px; font-weight:700;}
.chat-panel-head .title span{display:block; font-size:11px; opacity:.85;}
.chat-panel-close{width:28px; height:28px; border-radius:50%; border:none; background:rgba(255,255,255,.25); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto;}
.chat-panel-close svg{width:14px; height:14px;}
.chat-thread-select{flex:0 0 auto; padding:8px 12px; border-bottom:1px solid var(--glass-border);}
.chat-thread-select select{
  width:100%; border:1.5px solid var(--line); border-radius:10px; padding:7px 10px; font-size:12.5px;
  font-family:'Sarabun'; background:#fff; color:var(--ink);
}
.chat-user-profile{
  display:flex; align-items:center; gap:10px; margin-top:8px; padding:8px 10px; border-radius:12px;
  background:rgba(255,255,255,.5); border:1px solid var(--line); cursor:pointer; transition:background .2s ease;
}
.chat-user-profile:hover{background:#fff;}
.chat-user-profile .cup-avatar{
  width:34px; height:34px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:'Prompt'; font-weight:700; font-size:13px; overflow:hidden;
}
.chat-user-profile .cup-avatar img{width:100%; height:100%; object-fit:cover;}
.chat-user-profile .cup-info{flex:1; min-width:0;}
.chat-user-profile .cup-info b{display:block; font-size:12.5px; font-family:'Prompt'; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.chat-user-profile .cup-info span{display:block; font-size:11px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.chat-notice{
  flex:0 0 auto; font-size:10.5px; color:var(--ink-soft); text-align:center; padding:5px 14px 8px;
  border-top:1px solid var(--glass-border);
}
.chat-panel-body{flex:1 1 auto; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:8px;}
.chat-empty{margin:auto; text-align:center; color:var(--ink-soft); font-size:12.5px; padding:0 10px;}
.chat-bubble{max-width:78%; padding:9px 13px; border-radius:16px; font-size:13px; line-height:1.55; word-wrap:break-word; white-space:pre-wrap;}
.chat-bubble.mine{align-self:flex-end; background:linear-gradient(135deg,var(--pink),var(--pink-deep)); color:#fff; border-bottom-right-radius:5px;}
.chat-bubble.theirs{align-self:flex-start; background:#fff; color:var(--ink); border:1px solid var(--line); border-bottom-left-radius:5px;}
.chat-bubble .t{display:block; font-size:9.5px; opacity:.7; margin-top:4px;}
.chat-panel-foot{flex:0 0 auto; display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--glass-border);}
.chat-panel-foot input{
  flex:1; min-width:0; border:1.5px solid var(--line); border-radius:999px; padding:9px 14px; font-size:13px;
  font-family:'Sarabun'; background:#fff;
}
.chat-panel-foot button{
  width:38px; height:38px; border-radius:50%; border:none; flex:0 0 auto; cursor:pointer;
  background:linear-gradient(135deg,var(--pink),var(--pink-deep)); color:#fff; display:flex; align-items:center; justify-content:center;
}
.chat-panel-foot button svg{width:16px; height:16px;}
.chat-panel-foot button:disabled{opacity:.5; cursor:not-allowed;}
.chat-locked{margin:auto; text-align:center; padding:0 16px;}
.chat-locked p{color:var(--ink-soft); font-size:12.5px; margin:8px 0 14px; line-height:1.6;}
@media (max-width:480px){
  .chat-panel{right:12px; bottom:84px; width:calc(100vw - 24px);}
  .chat-fab{right:14px; bottom:14px;}
}

/* ---- performance mode toggle ---- */
.perf-fab{
  position:fixed; left:20px; bottom:20px; z-index:80;
  display:flex; align-items:center; gap:8px; border:none; cursor:pointer;
  padding:11px 16px 11px 12px; border-radius:999px; font-family:'Prompt'; font-weight:600; font-size:12.5px; color:var(--ink);
  background:linear-gradient(155deg, rgba(255,255,255,.75), rgba(255,255,255,.28) 40%, rgba(147,197,253,.22) 100%);
  backdrop-filter:blur(11px) saturate(150%); -webkit-backdrop-filter:blur(11px) saturate(150%);
  box-shadow:0 10px 28px rgba(74,59,63,.18), inset 0 1px 1px rgba(255,255,255,.9), 0 0 0 1px rgba(255,255,255,.6);
  transition:transform .2s ease, background .25s ease;
}
.perf-fab:hover{transform:translateY(-2px) scale(1.02);}
.perf-fab .pf-icon{
  width:26px; height:26px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.55); box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);
}
.perf-fab .pf-icon svg{width:14px; height:14px; color:var(--pink-deep); transition:color .2s ease;}
.perf-fab.active{background:linear-gradient(155deg, rgba(255,255,255,.85), rgba(180,255,210,.35) 100%);}
.perf-fab.active .pf-icon svg{color:#22a35e;}
.perf-fab .pf-label b{display:block; font-size:12px;}
.perf-fab .pf-label span{display:block; font-size:9.5px; font-weight:500; color:var(--ink-soft); font-family:'Sarabun';}
@media (max-width:720px){
  .perf-fab{display:none;}
}
.perf-mobile-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.5); margin-top:2px;
}
.perf-mobile-row .pmr-label b{display:block; font-size:13px; font-family:'Prompt';}
.perf-mobile-row .pmr-label span{display:block; font-size:10.5px; color:var(--ink-soft); margin-top:1px;}
.perf-switch{
  position:relative; width:42px; height:24px; border-radius:999px; border:none; cursor:pointer; flex:0 0 auto;
  background:var(--line); transition:background .2s ease;
}
.perf-switch::after{
  content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .2s ease;
}
.perf-switch.active{background:#22a35e;}
.perf-switch.active::after{transform:translateX(18px);}

/* when performance mode is active: drop the expensive stuff */
html.perf-mode .aurora-bg,
html.perf-mode .works-particles,
html.perf-mode .apply-stars,
html.perf-mode .pcs-leaf,
html.perf-mode .pcs-cloud{display:none !important;}
html.perf-mode *{animation:none !important;}
/* the rule above freezes elements that use opacity:0 + animation-forwards for their
   entrance transition (nav bar, nav links, hero card, etc). Force their end-state
   back on so turning perf-mode on never hides the menu/controls. */
html.perf-mode .site-header,
html.perf-mode .nav-links li,
html.perf-mode .nav-special,
html.perf-mode .nav-galaxy,
html.perf-mode .nav-actions,
html.perf-mode .hero-card{
  opacity:1 !important; transform:none !important;
}
html.perf-mode .glass, html.perf-mode .glass-strong,
html.perf-mode .chat-fab, html.perf-mode .chat-panel, html.perf-mode .perf-fab,
html.perf-mode .admin-badge, html.perf-mode header, html.perf-mode .modal{
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}

/* ---- account / profile chip (initials avatar, no upload) ---- */
.profile-chip{
  display:flex; align-items:center; gap:8px; padding:5px 14px 5px 5px; border-radius:999px;
  background:rgba(255,255,255,.55); border:1px solid var(--line);
  transition:background .2s ease, transform .2s ease;
}
.profile-chip:hover{background:#fff; transform:translateY(-1px);}
.profile-chip .chip-name{font-size:13px; font-weight:600; max-width:96px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.profile-chip{ max-width:100%; }
@media (max-width:1080px){ .profile-chip .chip-name{ max-width:70px; } }

.mobile-profile-row{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.5);}
.mobile-profile-row .info b{font-size:13.5px; display:block;}
.mobile-profile-row .info span{font-size:11.5px; color:var(--ink-soft);}

.avatar-initials{
  border-radius:50%; display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  color:#fff; font-family:'Prompt'; font-weight:700; line-height:1; user-select:none; overflow:hidden;
  box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--pink-soft);
}
.avatar-initials img{width:100%; height:100%; object-fit:cover; border-radius:50%;}
.avatar-initials-lg{
  width:80px; height:80px; margin:0 auto 14px; font-size:32px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:'Prompt'; font-weight:700; box-shadow:0 6px 20px rgba(0,0,0,.12), 0 0 0 4px #fff;
  transition:background .25s ease; overflow:hidden;
}
.avatar-initials-lg img{width:100%; height:100%; object-fit:cover; border-radius:50%;}
.avatar-edit-wrap{
  position:relative; width:80px; height:80px; margin:0 auto 14px; display:block; cursor:pointer;
}
.avatar-edit-wrap .avatar-initials-lg{margin:0;}
.avatar-edit-badge{
  position:absolute; right:-2px; bottom:-2px; width:28px; height:28px; border-radius:50%;
  background:var(--pink-deep); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 10px rgba(244,98,140,.4), 0 0 0 3px #fff; transition:transform .2s ease;
}
.avatar-edit-badge svg{width:13px; height:13px;}
.avatar-edit-wrap:hover .avatar-edit-badge{transform:scale(1.1);}
.avatar-edit-wrap input{position:absolute; inset:0; opacity:0; cursor:pointer;}
.avatar-uploading .avatar-initials-lg{opacity:.55;}
.profile-header{ text-align:center; margin-bottom:22px; }
.profile-header-name{font-family:'Prompt'; font-weight:700; font-size:17px; margin-bottom:2px;}
.profile-header-email{font-size:12.5px; color:var(--ink-soft);}

.profile-meta-row{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:20px;}
.profile-meta-chip{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-soft);
  background:rgba(74,59,63,.05); border:1px solid var(--line); padding:6px 12px; border-radius:999px;
}

.field-static{
  width:100%; border:1.5px solid var(--line); border-radius:12px; padding:11px 14px; font-size:13.5px;
  font-family:'Sarabun'; background:rgba(74,59,63,.05); color:var(--ink-soft);
}

.detail-clip{ margin-top:auto; padding-top:18px; }
.detail-clip.is-empty{ display:none; }
.detail-clip-label{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:8px;
  font-family:'Prompt'; font-weight:700; font-size:12px; color:var(--ink-soft);
}
.detail-clip-label::before{
  content:''; width:5px; height:5px; border-radius:50%; background:var(--pink-deep);
}
.detail-clip-box{
  position:relative; border-radius:14px; overflow:hidden;
  background:#0f0a19; aspect-ratio:16/9;
  box-shadow:0 8px 22px rgba(74,59,63,.18);
}
.detail-clip-box img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---- toast notifications (stacked, icon-coded, auto-dismiss) ---- */
.toast-container{
  position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:300;
  display:flex; flex-direction:column; gap:10px; align-items:center;
  pointer-events:none; width:min(360px, calc(100vw - 32px));
}
.toast-item{
  pointer-events:auto; position:relative; overflow:hidden;
  display:flex; align-items:flex-start; gap:10px; width:100%;
  padding:13px 14px; border-radius:16px;
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border:1px solid var(--glass-border);
  box-shadow:0 12px 32px rgba(74,59,63,.16);
  opacity:0; transform:translateY(-14px) scale(.96);
  transition:opacity .28s var(--ease), transform .28s var(--ease);
}
.toast-item.show{opacity:1; transform:translateY(0) scale(1);}
.toast-item.hide{opacity:0; transform:translateY(-10px) scale(.97);}
.toast-icon{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.toast-icon svg{width:13px; height:13px;}
.toast-item.toast-success .toast-icon{background:#e1f6e6; color:#2c8a4b;}
.toast-item.toast-error .toast-icon{background:#ffe4e9; color:#c23a58;}
.toast-item.toast-info .toast-icon{background:var(--blue-soft); color:#2e7fb8;}
.toast-msg{flex:1; font-size:13.5px; font-weight:500; line-height:1.5; padding-top:1px;}
.toast-close{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%; border:none; background:transparent;
  color:var(--ink-soft); display:flex; align-items:center; justify-content:center; margin-top:1px;
  transition:background .2s ease;
}
.toast-close:hover{background:rgba(74,59,63,.08);}
.toast-close svg{width:12px; height:12px;}
.toast-bar{position:absolute; left:0; bottom:0; height:2.5px; width:100%; transform-origin:left; background:var(--pink); animation:toastShrink 3.2s linear forwards;}
.toast-item.toast-success .toast-bar{background:#2c8a4b;}
.toast-item.toast-error .toast-bar{background:#c23a58;}
.toast-item.toast-info .toast-bar{background:#2e7fb8;}
@keyframes toastShrink{ from{transform:scaleX(1);} to{transform:scaleX(0);} }
@media (prefers-reduced-motion: reduce){
  .toast-item{transition:opacity .15s linear, transform .15s linear;}
  .toast-bar{animation-duration:3.2s;}
}

/* =====================================================
   Responsive
===================================================== */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-card{order:-1; max-width:340px; margin:0 auto;}
  .works-carousel-stage{height:400px;}
  .carousel-card{width:380px; height:390px; margin-left:-190px;}
  .page-capsule{padding:44px 28px;}
}
@media (max-width:720px){
  .nav-links, .nav-special, .nav-special-gap, .nav-galaxy, .nav-galaxy-gap, .nav-actions .btn-ghost{display:none;}
  .nav-actions #authArea{display:none;} /* profile chip lives in the mobile menu instead, avoids header clutter */
  .nav-toggle{display:flex;}
  .nav-shell{padding:8px 8px 8px 14px;}
  .grid-cards{grid-template-columns:1fr;}
  main{padding-top:100px;}
  .page-capsule{padding:32px 20px; border-radius:28px;}
  .works-carousel-stage{height:360px;}
  .carousel-card{width:320px; height:340px; margin-left:-160px;}
  .carousel-arrow{width:36px; height:36px;}
  .carousel-arrow svg{width:16px; height:16px;}
  .apply-inline-inner{flex-direction:column; text-align:center;}
  .apply-left{flex-direction:column;}
  .footer-top{flex-direction:column;}
  .footer-shell{padding:26px 22px;}
  .hero-stats{gap:16px; row-gap:14px; flex-wrap:wrap;}

  /* prevent iOS Safari from auto-zooming the page when a form field gets focus */
  .field input, .field textarea, .pw-wrap input{font-size:16px;}

  /* roomier modals, less wasted edge padding on narrow phones */
  .overlay{padding:14px;}
  .modal{padding:26px 20px 22px; border-radius:22px;}
  .modal.modal-wide{max-width:100%;}

  /* bigger, easier-to-tap admin controls */
  .admin-mini-btn{width:31px; height:31px;}
  .admin-mini-btn svg{width:13.5px; height:13.5px;}
  .admin-list-item{padding:9px; gap:9px;}
  .admin-item-actions{gap:3px;}
  .admin-tabs{gap:4px;}
  .admin-tab{padding:9px 4px; font-size:12.5px;}

  .toast-container{top:12px; width:calc(100vw - 24px);}
  .social-btn{width:46px; height:46px;} /* comfortable tap size in the footer */
}

@media (max-width:400px){
  .brand-text span{display:none;}
  .hero-card{max-width:260px;}
  .avatar-initials-lg, .avatar-edit-wrap{width:72px; height:72px;}
  .btn-block{font-size:13.5px;}
  .works-carousel-stage{height:320px;}
  .carousel-card{width:260px; height:300px; margin-left:-130px;}
  .works-carousel-wrap{gap:6px;}
}
/* ===================================================
   Preloader (pink -> white fade, logo, progress bar)
=================================================== */
html.is-preloading, html.is-preloading body{overflow:hidden; height:100%;}
#preloader{position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center;}
#preloader .preloader-bg{position:absolute; inset:0;
  background:radial-gradient(120% 120% at 50% 15%, var(--pink) 0%, var(--pink-soft) 45%, var(--cream) 78%, #ffffff 100%);}
.preloader-content{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:20px; padding:0 20px;}
#preloaderLogo{width:132px; height:132px; object-fit:contain; opacity:0; transform:scale(.55);
  filter:drop-shadow(0 14px 34px rgba(244,98,140,.38)); will-change:transform;}
#preloaderBarTrack{width:550px; max-width:60vw; height:12px; border-radius:99px; background:rgba(255,255,255,.6);
  overflow:hidden; opacity:0; box-shadow:inset 0 1px 2px rgba(74,59,63,.08);}
#preloaderBarFill{width:0%; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--pink-deep), var(--yellow));}
#preloaderPercent{opacity:0; font-weight:800; font-size:14px; letter-spacing:.4px; color:var(--ink);}
@media (prefers-reduced-motion: reduce){
  #preloader{display:none !important;}
  html.is-preloading, html.is-preloading body{overflow:auto !important;}
}

/* ===================================================
   GSAP ScrollTrigger reveal targets
   (replaces the old CSS-transition reveal; JS now drives
   opacity/transform directly, so no base transition here)
=================================================== */
.reveal{opacity:0; transform:translateY(28px);}
.stagger > *{opacity:0; transform:translateY(24px);}
@media (prefers-reduced-motion: reduce){
  .reveal, .stagger > *{opacity:1 !important; transform:none !important;}
}
/* =====================================================
   👑 ROLE / RANK BADGES
===================================================== */
.rank{
  display:inline-flex !important;
  align-items:center; justify-content:center; gap:5px;
  flex:0 0 auto; align-self:center;
  width:auto !important; width:-moz-fit-content !important; width:fit-content !important;
  max-width:100%; box-sizing:border-box;
  padding:4px 10px 5px 8px; border-radius:999px;
  font-family:'Prompt',sans-serif; font-weight:700; font-size:11px;
  line-height:1.15;
  letter-spacing:.01em; white-space:nowrap; vertical-align:middle; text-align:center;
  border:1px solid transparent; position:relative; overflow:hidden;
}
/* ไอคอนต้องอยู่กึ่งกลางแนวตั้งเสมอ ไม่เอียงตามเส้น baseline ของภาษาไทย */
.rank svg{
  width:12px; height:12px; flex:0 0 auto;
  display:block; align-self:center; position:relative; top:-.5px;
}
.rank > span{ display:block; line-height:1.15; }

.rank.sm{ font-size:9.5px; padding:3px 8px 4px 6px; gap:4px; }
.rank.sm svg{ width:10px; height:10px; }
.rank.lg{ font-size:13px; padding:6px 14px 7px 11px; gap:6px; }
.rank.lg svg{ width:15px; height:15px; }

/* ---- กันทุกกรณีที่คอนเทนเนอร์เผลอทำให้ป้ายยืดเต็มความกว้าง ---- */
.role-user-row .ru-info b.name-rank,
.chat-user-profile .cup-info b.name-rank,
.mobile-profile-row .info b.name-rank,
.admin-list-item .info b.name-rank,
b.name-rank{
  display:flex !important; align-items:center; gap:7px;
  min-width:0; white-space:nowrap; overflow:hidden;
}
.role-user-row .ru-info b.name-rank > .rank,
.chat-user-profile .cup-info b.name-rank > .rank,
.mobile-profile-row .info b.name-rank > .rank,
b.name-rank > .rank{ flex:0 0 auto; align-self:center; }
b.name-rank > .nr-name{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* ป้ายในฟองแชท */
.chat-bubble .bmeta{ display:flex; align-items:center; gap:6px; margin-bottom:5px; }
.chat-bubble .bmeta .rank{ margin:0; }
/* ป้ายกลางหน้าโปรไฟล์ */
.profile-rank-row{ display:flex; justify-content:center; align-items:center; }
.profile-rank-row .rank{ flex:0 0 auto; margin:0 auto; }

/* ---- OWNER : gold, shimmering ---- */
.rank-owner{
  color:#3b2a00;
  background:linear-gradient(135deg,#fde68a,#fbbf24 45%,#f59e0b);
  border-color:rgba(255,255,255,.55);
  box-shadow:0 2px 10px rgba(251,191,36,.5), inset 0 1px 0 rgba(255,255,255,.7);
}
.rank-owner > *{ position:relative; z-index:1; }
.rank-owner::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.85) 48%, transparent 62%);
  transform:translateX(-120%);
  animation:rankShine 3.6s ease-in-out infinite;
}
@keyframes rankShine{ 0%,72%{transform:translateX(-120%);} 92%,100%{transform:translateX(160%);} }

/* ---- ADMIN : red / crimson ---- */
.rank-admin{
  color:#fff;
  background:linear-gradient(135deg,#f87171,#dc2626 55%,#991b1b);
  border-color:rgba(255,255,255,.3);
  box-shadow:0 2px 10px rgba(220,38,38,.45), inset 0 1px 0 rgba(255,255,255,.25);
}

/* ---- PR : cyan / sky ---- */
.rank-pr{
  color:#04212e;
  background:linear-gradient(135deg,#a5f3fc,#38bdf8 55%,#0ea5e9);
  border-color:rgba(255,255,255,.5);
  box-shadow:0 2px 10px rgba(56,189,248,.45), inset 0 1px 0 rgba(255,255,255,.6);
}

/* ---- CEO : emerald / teal ---- */
.rank-ceo{
  color:#05231a;
  background:linear-gradient(135deg,#6ee7b7,#10b981 55%,#047857);
  border-color:rgba(255,255,255,.5);
  box-shadow:0 2px 10px rgba(16,185,129,.45), inset 0 1px 0 rgba(255,255,255,.55);
}

/* ---- MEMBER : muted ---- */
.rank-user{
  color:var(--ink-soft);
  background:rgba(160,190,230,.14);
  border-color:rgba(160,190,230,.24);
}

/* name + badge inline pair */


/* rank line inside profile modal */
.profile-rank-row{
  display:flex; justify-content:center; margin:8px 0 2px;
}

/* chat bubble rank chip */

/* การ์ดโปรไฟล์เหนือแชท — กันชื่อ/ยศยืดยาวเกิน */
.cup-info{ min-width:0; overflow:hidden; }

.cup-info span{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }


.chat-bubble .bname{ font-size:11px; font-weight:700; opacity:.9; }

/* staff thread list rank */
.chat-thread-rank{ margin-left:6px; }

/* ---- Role manager (owner only) ---- */
.role-user-row{
  display:flex; align-items:center; gap:12px; padding:11px 12px;
  border:1px solid var(--line); border-radius:14px; margin-bottom:9px;
  background:rgba(125,211,252,.05);
}
.role-user-row .ru-info{ flex:1 1 auto; min-width:0; }
.role-user-row .ru-info b{ display:block; font-size:13.5px; }
.role-user-row .ru-info span{ display:block; font-size:11.5px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.role-pick{ display:flex; gap:6px; flex-wrap:wrap; }
.role-pick button{
  padding:6px 10px; border-radius:9px; font-size:11px; font-weight:700;
  border:1px solid var(--line); background:rgba(125,211,252,.07); color:var(--ink);
  transition:all .18s var(--ease);
}
.role-pick button:hover{ transform:translateY(-2px); background:rgba(125,211,252,.18); }
.role-pick button.on{ border-color:transparent; color:#fff; background:linear-gradient(135deg,#22c55e,#15803d); }
.role-empty{ text-align:center; padding:22px; color:var(--ink-soft); font-size:13px; }


/* =====================================================
   🎯 APPLY: open badge / closing countdown / results button
===================================================== */
/* "เปิดรับสมัครแล้ว" — ป้ายสถานะ */
.inline-countdown.is-open{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(135deg,#f4628c 0%,#ef5e93 45%,#ffd15c 100%);
  border-color:rgba(255,255,255,.4);
  padding:10px 16px;
  box-shadow:0 8px 22px rgba(244,98,140,.38), inset 0 1px 0 rgba(255,255,255,.42);
}
.inline-countdown.is-open::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(105deg, transparent 34%, rgba(255,255,255,.5) 50%, transparent 66%);
  transform:translateX(-140%);
  animation:btnShine 3.6s ease-in-out infinite;
}
@keyframes btnShine{ 0%,68%{transform:translateX(-140%);} 90%,100%{transform:translateX(170%);} }
.inline-countdown.is-open .inline-countdown-open-label{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:7px;
  color:#fff; font-family:'Prompt'; font-weight:700; font-size:12.5px;
  text-shadow:0 1px 2px rgba(0,0,0,.22);
}
.inline-countdown.is-open .oc-spark{
  display:inline-flex; flex:0 0 auto; animation:sparkPulse 1.8s ease-in-out infinite;
}
.inline-countdown.is-open .oc-spark svg{ width:13px; height:13px; display:block; }
@keyframes sparkPulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.55; transform:scale(.85); }
}
@media (prefers-reduced-motion: reduce){
  .inline-countdown.is-open::after, .inline-countdown.is-open .oc-spark{ animation:none; }
}


/* แถบนับถอยหลัง "ปิดรับสมัคร" — แยกจากระบบเดิม */
.apply-close-bar{
  display:none; align-items:center; gap:16px; flex-wrap:nowrap;
  width:100%; margin:0 0 18px; padding:14px 18px; border-radius:18px;
  background:linear-gradient(135deg, rgba(185,28,28,.92), rgba(220,38,38,.86) 55%, rgba(234,88,12,.85));
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 10px 30px rgba(185,28,28,.32), inset 0 1px 0 rgba(255,255,255,.28);
}
.apply-close-bar.show{ display:flex; }
.apply-close-bar .acb-ico{
  width:38px; height:38px; flex:0 0 auto; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3);
  color:#fff;
}
.apply-close-bar .acb-ico svg{
  width:21px; height:21px; display:block;
  animation:acbFlip 3.4s ease-in-out infinite;
  transform-origin:center;
}
@keyframes acbFlip{
  0%,42%   { transform:rotate(0deg); }
  50%,92%  { transform:rotate(180deg); }
  100%     { transform:rotate(360deg); }
}
.apply-close-bar .acb-text{ flex:1 1 auto; min-width:0; }
.apply-close-bar .acb-text b{
  display:block; font-family:'Prompt',sans-serif;
  font-size:15px; font-weight:700; color:#fff; line-height:1.35;
  text-shadow:0 1px 3px rgba(0,0,0,.35); letter-spacing:.01em;
}
.apply-close-bar .acb-text span{
  display:block; font-size:12.5px; color:rgba(255,255,255,.92);
  margin-top:3px; line-height:1.5; text-shadow:0 1px 2px rgba(0,0,0,.3);
}
.acb-timer{ display:flex; align-items:center; gap:6px; flex:0 0 auto; max-width:100%; min-width:0; }
.acb-unit{ display:flex; flex-direction:column; align-items:center; line-height:1.1; min-width:42px; }
.acb-unit b{
  font-family:'Prompt',sans-serif; font-size:19px; font-weight:800; color:#fff;
  background:rgba(0,0,0,.26); border:1px solid rgba(255,255,255,.26);
  border-radius:11px; padding:7px 9px 8px; min-width:42px; text-align:center;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
  letter-spacing:.02em; white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.4);
  transform:scale(1); transform-origin:center;
  transition:transform .18s var(--ease);
}
.acb-unit b.tick{ transform:scale(1.06); }
.acb-unit span{
  font-size:10px; color:rgba(255,255,255,.85); margin-top:5px;
  letter-spacing:.04em; font-weight:600;
}
.acb-colon{ color:rgba(255,255,255,.6); font-weight:800; font-size:17px; margin-bottom:16px; }
.apply-close-bar.is-closed{
  background:linear-gradient(135deg, rgba(51,65,85,.9), rgba(71,85,105,.85));
  border-color:rgba(255,255,255,.2);
  box-shadow:0 8px 22px rgba(15,23,42,.3);
}
.apply-close-bar.is-closed .acb-ico svg{ animation:none; }
.apply-close-bar{ overflow:hidden; }
@media (max-width:860px){
  .apply-close-bar{ flex-wrap:wrap; gap:12px; padding:13px 15px; }
  .apply-close-bar .acb-text{ flex:1 1 100%; order:1; }
  .apply-close-bar .acb-ico{ order:0; }
  .acb-timer{ flex:1 1 100%; order:2; justify-content:space-between; gap:4px; width:100%; }
  .acb-unit{ flex:1 1 0; min-width:0; }
  .acb-unit b{ width:100%; min-width:0; font-size:17px; padding:7px 4px 8px; }
  .acb-colon{ flex:0 0 auto; font-size:15px; }
}
@media (max-width:420px){
  .apply-close-bar{ padding:12px 11px; }
  .acb-timer{ gap:2px; }
  .acb-unit b{ font-size:15px; padding:6px 2px 7px; border-radius:9px; }
  .acb-unit span{ font-size:9px; letter-spacing:0; margin-top:4px; }
  .acb-colon{ font-size:12px; margin-bottom:14px; }
}
@media (max-width:340px){
  .acb-timer{ gap:1px; }
  .acb-unit b{ font-size:13px; padding:5px 1px 6px; }
  .acb-unit span{ font-size:8px; }
  .acb-colon{ display:none; }
}
.apply-close-bar.shake{ animation:acbShake .5s ease; }
@keyframes acbShake{
  0%,100%{transform:translateX(0);} 20%{transform:translateX(-7px);}
  40%{transform:translateX(6px);} 60%{transform:translateX(-4px);} 80%{transform:translateX(3px);}
}
/* ปุ่มสมัครตอนปิดรับ */
.js-apply-link.is-closed{
  filter:grayscale(.85) brightness(.92);
  cursor:not-allowed; opacity:.75;
}
.js-apply-link.is-closed:hover{ transform:none !important; }

/* ปุ่มประกาศผลสมัคร — พื้นขาว ตัดกับพื้นหลังชัด แต่ยังอยู่ในโทนเว็บ */
.btn-results{
  position:relative; overflow:hidden; isolation:isolate;
  border:none !important;
  background:#fff !important;
  color:var(--pink-deep) !important; font-weight:700 !important;
  box-shadow:0 8px 22px rgba(244,98,140,.22), inset 0 1px 0 rgba(255,255,255,.6) !important;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease) !important;
}
.btn-results:hover{
  transform:translateY(-3px);
  background:var(--pink-soft) !important;
  box-shadow:0 14px 30px rgba(244,98,140,.3), inset 0 1px 0 rgba(255,255,255,.6) !important;
}
.btn-results:active{ transform:translateY(-1px); }

/* Portfolio admin list: media badges (custom icons, no emoji) */
.media-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; margin-left:4px; vertical-align:-4px;
  color:var(--pink-deep);
}
.media-badge svg{ width:14px; height:14px; }
@media (prefers-reduced-motion: reduce){
  .pd-live-dot{ animation:none; }
}


/* =====================================================
   ☰ PROFILE MENU (dropdown)
===================================================== */
.profile-cluster{ display:flex; align-items:center; gap:8px; position:relative; }
.profile-cluster .profile-chip{ min-height:38px; }

.profile-menu-btn{
  width:38px; height:38px; flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  border-radius:12px; border:1px solid var(--line);
  background:rgba(255,255,255,.55);
  transition:background .2s ease, transform .2s ease, border-color .2s ease;
}
.profile-menu-btn:hover{ background:#fff; transform:translateY(-1px); border-color:var(--pink); }
.profile-menu-btn span{
  display:block; width:16px; height:2px; border-radius:2px;
  background:var(--ink); transition:transform .28s var(--ease), opacity .2s ease;
}
.profile-menu-btn.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.profile-menu-btn.open span:nth-child(2){ opacity:0; }
.profile-menu-btn.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.profile-dropdown{
  position:absolute; top:calc(100% + 10px); right:0; z-index:120;
  min-width:236px; padding:8px;
  border-radius:16px; border:1px solid var(--line);
  background:rgba(255,255,255,.97);
  box-shadow:0 18px 46px rgba(0,0,0,.16);
  backdrop-filter:blur(11px);
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.97);
  transition:opacity .2s ease, transform .22s var(--ease), visibility .2s;
}
.profile-dropdown.open{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.pd-head{
  padding:9px 12px 11px; margin-bottom:5px;
  border-bottom:1px solid var(--line);
}
.pd-head b{ display:block; font-size:13.5px; }
.pd-head span{ display:block; font-size:11px; color:var(--ink-soft); margin-top:2px; }
.pd-item{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:10px 12px; border-radius:11px;
  font-family:'Prompt',sans-serif; font-size:13.5px; font-weight:600;
  color:var(--ink); text-align:left; background:transparent;
  transition:background .18s ease, transform .18s ease;
}
.pd-item:hover{ background:rgba(244,98,140,.09); transform:translateX(3px); }
.pd-item .pd-ico{ font-size:16px; width:20px; text-align:center; flex:0 0 auto; }
.pd-item .pd-badge{
  margin-left:auto; font-size:9.5px; font-weight:800; letter-spacing:.04em;
  padding:3px 7px; border-radius:999px;
  background:linear-gradient(135deg,#f472b6,#ec4899); color:#fff;
}

/* ---- แถวจำนวนคนดูในเมนู ---- */
.pd-live{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:11px; margin-bottom:4px;
  background:linear-gradient(135deg, rgba(34,197,94,.10), rgba(16,185,129,.06));
  border:1px solid rgba(34,197,94,.22);
}
.pd-ico-live{ color:#16a34a; }
.pd-live-txt{
  flex:1 1 auto; font-family:'Prompt',sans-serif; font-size:12.5px; font-weight:600;
  color:var(--ink-soft); display:flex; align-items:center; gap:5px;
}
.pd-live-txt b{
  font-size:15px; font-weight:800; color:#15803d; font-variant-numeric:tabular-nums;
}
.pd-live-dot{
  width:8px; height:8px; border-radius:50%; background:#22c55e; flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(34,197,94,.6);
  animation:pdLivePulse 2s ease-out infinite;
}
@keyframes pdLivePulse{
  0%{ box-shadow:0 0 0 0 rgba(34,197,94,.55); }
  70%{ box-shadow:0 0 0 8px rgba(34,197,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
}
.pd-sep{ height:1px; background:var(--line); margin:5px 2px 6px; }

/* ไอคอน SVG ในเมนู */
.pd-item .pd-ico, .pd-live .pd-ico{
  width:20px; height:20px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
}
.pd-item .pd-ico svg, .pd-live .pd-ico svg{ width:18px; height:18px; display:block; }
.pd-item .pd-ico{ color:var(--pink-deep); }
.pd-item:hover .pd-ico{ color:var(--pink); }
@media (max-width:900px){ .profile-menu-btn{ display:none; } }

/* ---- changelog modal ---- */
.cl-version{
  display:flex; align-items:center; gap:10px; margin-bottom:6px;
}
.cl-version b{
  font-family:'Prompt',sans-serif; font-size:20px; font-weight:800;
}
.cl-version .cl-tag{
  font-size:10px; font-weight:800; letter-spacing:.05em; padding:4px 9px; border-radius:999px;
  background:linear-gradient(135deg,#34d399,#059669); color:#fff;
}
.cl-date{ font-size:12.5px; color:#6f5f66; margin-bottom:18px; }
.cl-group{ margin-bottom:20px; }
.cl-group h4{
  font-family:'Prompt',sans-serif; font-size:15px; font-weight:700;
  margin-bottom:10px; display:flex; align-items:center; gap:8px;
  color:var(--ink);
}
.cl-list{ list-style:none; padding:0; margin:0; }
.cl-list li{
  position:relative; padding:0 0 0 18px; margin-bottom:9px;
  font-size:14px; line-height:1.8; color:#5c4b52;
}
.cl-list li::before{
  content:""; position:absolute; left:3px; top:9px;
  width:5px; height:5px; border-radius:50%; background:var(--pink);
}
.cl-list li b{ color:var(--ink); font-weight:700; }
.cl-old{
  padding:14px 16px; border-radius:14px;
  background:rgba(160,160,190,.08); border:1px solid var(--line);
}
.cl-old h4{ font-size:12.5px; margin-bottom:7px; color:var(--ink-soft); }
.cl-old .cl-list li{ font-size:12px; margin-bottom:5px; }

/* =====================================================
   🔔 NOTIFICATIONS (OS push + in-app)
===================================================== */
.notif-btn{
  position:relative; width:38px; height:38px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px; border:1px solid var(--line);
  background:rgba(255,255,255,.55); color:var(--ink);
  transition:background .2s ease, transform .2s ease, border-color .2s ease;
}
.notif-btn:hover{ background:#fff; transform:translateY(-1px); border-color:var(--pink); }
.notif-btn svg{ width:19px; height:19px; display:block; }
.notif-btn.is-on{
  background:linear-gradient(135deg, var(--pink), var(--pink-deep));
  border-color:transparent; color:#fff;
  box-shadow:0 5px 16px rgba(244,98,140,.35);
}
.notif-btn.is-on svg{ animation:bellRing 3.4s ease-in-out infinite; transform-origin:top center; }
@keyframes bellRing{
  0%,88%,100%{ transform:rotate(0); }
  90%{ transform:rotate(13deg); } 92%{ transform:rotate(-11deg); }
  94%{ transform:rotate(8deg); }  96%{ transform:rotate(-6deg); }
}
.notif-btn .nb-dot{
  position:absolute; top:6px; right:7px;
  width:8px; height:8px; border-radius:50%;
  background:#ef4444; border:2px solid #fff;
  display:none;
}
.notif-btn.has-new .nb-dot{ display:block; }
@media (max-width:900px){ .notif-btn{ display:none; } }

/* ---- modal content ---- */
.notif-hero{
  display:flex; align-items:center; gap:14px;
  padding:16px; border-radius:16px; margin-bottom:18px;
  background:linear-gradient(135deg, rgba(244,98,140,.10), rgba(255,209,92,.10));
  border:1px solid var(--line);
}
.notif-hero .nh-ico{
  width:46px; height:46px; flex:0 0 auto; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--pink), var(--pink-deep)); color:#fff;
}
.notif-hero .nh-ico svg{ width:24px; height:24px; }
.notif-hero .nh-txt{ flex:1 1 auto; min-width:0; }
.notif-hero .nh-txt b{ display:block; font-size:14px; font-family:'Prompt'; }
.notif-hero .nh-txt span{ display:block; font-size:12px; color:var(--ink-soft); margin-top:3px; line-height:1.6; }

.notif-status{
  display:flex; align-items:center; gap:9px;
  padding:11px 14px; border-radius:12px; margin-bottom:16px;
  font-size:12.5px; font-weight:600;
}
.notif-status .ns-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.notif-status.st-on   { background:rgba(34,197,94,.12);  color:#15803d; }
.notif-status.st-on   .ns-dot{ background:#22c55e; box-shadow:0 0 8px #22c55e; }
.notif-status.st-off  { background:rgba(148,163,184,.14); color:var(--ink-soft); }
.notif-status.st-off  .ns-dot{ background:#94a3b8; }
.notif-status.st-deny { background:rgba(239,68,68,.11);  color:#b91c1c; }
.notif-status.st-deny .ns-dot{ background:#ef4444; }

.notif-topics{ margin-bottom:6px; }
.notif-topic{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:13px; margin-bottom:9px;
  border:1px solid var(--line); background:rgba(255,255,255,.5);
  transition:border-color .2s ease, background .2s ease;
}
.notif-topic:hover{ border-color:var(--pink); background:#fff; }
.notif-topic .nt-ico{ font-size:19px; width:24px; text-align:center; flex:0 0 auto; }
.notif-topic .nt-txt{ flex:1 1 auto; min-width:0; }
.notif-topic .nt-txt b{ display:block; font-size:13px; font-family:'Prompt'; font-weight:600; }
.notif-topic .nt-txt span{ display:block; font-size:11.5px; color:var(--ink-soft); margin-top:2px; }

/* toggle switch */
.nt-switch{
  position:relative; width:44px; height:25px; flex:0 0 auto;
  border-radius:999px; background:rgba(148,163,184,.35);
  border:none; transition:background .25s var(--ease);
  cursor:pointer;
}
.nt-switch::after{
  content:""; position:absolute; top:3px; left:3px;
  width:19px; height:19px; border-radius:50%; background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.22);
  transition:transform .25s var(--ease);
}
.nt-switch.on{ background:linear-gradient(135deg, var(--pink), var(--pink-deep)); }
.nt-switch.on::after{ transform:translateX(19px); }
.nt-switch:disabled{ opacity:.45; cursor:not-allowed; }

.notif-help{
  font-size:11.5px; color:var(--ink-soft); line-height:1.85;
  padding:13px 15px; border-radius:12px; margin-top:16px;
  background:rgba(148,163,184,.09); border:1px solid var(--line);
}
.notif-help b{ color:var(--ink); }


/* ---- ไอคอน SVG แทนอิโมจิ ---- */
.nt-ico{ width:24px; height:24px; display:flex; align-items:center; justify-content:center; color:var(--pink-deep); }
.nt-ico svg{ width:20px; height:20px; display:block; }
.cl-ico{ width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; color:var(--pink-deep); flex:0 0 auto; }
.cl-ico svg{ width:18px; height:18px; display:block; }
.rl-ico{ width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; vertical-align:-3px; color:var(--pink-deep); }
.rl-ico svg{ width:14px; height:14px; display:block; }
.mb-ico{ width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; vertical-align:-4px; margin-right:8px; }
.mb-ico svg{ width:16px; height:16px; display:block; }


.eyebrow .eb-ico-img{
  width:19px; height:19px; object-fit:contain; display:inline-block;
  vertical-align:-4px; margin-right:7px; image-rendering:pixelated;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.18));
}

/* =====================================================
   📊 OWNER DASHBOARD & AUDIT LOG
===================================================== */
.dash-tabs{ display:flex; gap:6px; margin-bottom:18px; background:rgba(74,59,63,.06); padding:5px; border-radius:12px; }
.dash-tab{ flex:1; text-align:center; padding:9px; border-radius:9px; font-size:13px; font-weight:600; background:transparent; border:none; color:var(--ink-soft); }
.dash-tab.active{ background:#fff; color:var(--pink-deep); box-shadow:0 2px 8px rgba(0,0,0,.06); }
.dash-panel{ display:none; }
.dash-panel.active{ display:block; }

.dash-stat-row{ display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.dash-stat{
  flex:1 1 130px; padding:14px 16px; border-radius:16px;
  background:rgba(125,211,252,.08); border:1px solid var(--line);
}
.dash-stat b{ display:block; font-family:'Prompt',sans-serif; font-size:24px; font-weight:800; color:var(--ink); }
.dash-stat span{ display:block; font-size:11.5px; color:var(--ink-soft); margin-top:3px; }

.dash-chart-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.dash-chart-head h4{ font-size:13.5px; font-weight:700; margin:0; }
.dash-chart-head span{ font-size:11px; color:var(--ink-soft); }

.dash-chart{ width:100%; height:160px; margin-bottom:22px; }
.dash-chart .bar{ transition:opacity .15s ease; cursor:default; }
.dash-chart .bar:hover{ opacity:.75; }
.dash-chart .axis-label{ font-size:9.5px; fill:var(--ink-soft); font-family:'Prompt',sans-serif; }
.dash-chart .val-label{ font-size:9.5px; fill:var(--ink); font-weight:700; font-family:'Prompt',sans-serif; }

.dash-empty{ text-align:center; padding:26px; color:var(--ink-soft); font-size:13px; }

/* ---- audit log list ---- */
.audit-filters{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.audit-filters button{
  padding:6px 12px; border-radius:9px; font-size:11.5px; font-weight:600;
  border:1px solid var(--line); background:rgba(125,211,252,.06); color:var(--ink);
}
.audit-filters button.on{ background:linear-gradient(135deg,var(--pink),var(--pink-deep)); border-color:transparent; color:#fff; }

.audit-list{ display:flex; flex-direction:column; gap:8px; max-height:420px; overflow-y:auto; }
.audit-row{
  display:flex; align-items:flex-start; gap:11px; padding:11px 13px;
  border-radius:13px; border:1px solid var(--line); background:rgba(255,255,255,.5);
}
.audit-row .ar-dot{ width:8px; height:8px; border-radius:50%; margin-top:5px; flex:0 0 auto; }
.audit-row.tp-add .ar-dot{ background:#22c55e; }
.audit-row.tp-edit .ar-dot{ background:#f59e0b; }
.audit-row.tp-del .ar-dot{ background:#ef4444; }
.audit-row.tp-role .ar-dot{ background:#8b5cf6; }
.audit-row.tp-other .ar-dot{ background:#94a3b8; }
.audit-row .ar-body{ flex:1 1 auto; min-width:0; }
.audit-row .ar-action{ font-size:13px; font-weight:600; color:var(--ink); line-height:1.5; }
.audit-row .ar-meta{ display:flex; align-items:center; gap:6px; margin-top:4px; flex-wrap:wrap; }
.audit-row .ar-meta .rank{ flex:0 0 auto; }
.audit-row .ar-time{ font-size:11px; color:var(--ink-soft); }
.audit-load-more{ margin-top:12px; }


/* =====================================================
   ⚙️ PERFORMANCE — ตัดงานที่ไม่จำเป็นออกจาก main thread
   (ไม่ตัดฟังก์ชันใด ๆ แค่ลดภาระตอนยังไม่ต้องเห็น)
===================================================== */
#news, #works, .footer-shell{
  content-visibility:auto;
  contain-intrinsic-size: 1px 900px;
}
/* หยุดแอนิเมชันตกแต่งที่ไม่จำเป็นเมื่อสลับแท็บ/ย่อหน้าต่าง เพื่อประหยัด CPU/แบต */
html.tab-hidden .chat-fab-ring,
html.tab-hidden .chat-fab-dot span,
html.tab-hidden .pd-live-dot,
html.tab-hidden .notif-btn.is-on svg,
html.tab-hidden .btn-results::after,
html.tab-hidden .apply-close-bar,
html.tab-hidden .rank-owner::after{
  animation-play-state:paused !important;
}
/* กัน layout thrash จากรูปที่ยังโหลดไม่เสร็จ */
.thumb img, .admin-list-item img{ aspect-ratio:1/1; }
/* =====================================================
   ภาพตัวอย่างแมพข้างปุ่มสมัคร — การ์ดซ้อนกันแบบไพ่ (3D deck)
   ต่างจาก coverflow หน้าผลงาน: ซ้อนลึกเข้าไป + เอียงสลับ + ดีดตอนสลับ
===================================================== */
.apply-peek{
  display:none; margin-top:22px; position:relative; z-index:2;
  padding:18px 18px 16px; border-radius:20px;
  background:#171022;                 /* ทึบสนิท กันสีพื้นหลังทะลุ */
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 12px 34px rgba(10,5,20,.45);
}
.apply-peek.show{ display:block; }
.apply-peek-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-bottom:11px; flex-wrap:wrap;
}
.apply-peek-head b{
  font-family:'Prompt'; font-weight:700; font-size:15px; color:#fff;
  display:inline-flex; align-items:center; gap:8px; letter-spacing:.01em;
}
.apply-peek-head b::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--yellow); box-shadow:0 0 0 3px rgba(255,209,92,.25);
}
.apply-peek-hint{ font-size:12.5px; color:rgba(255,255,255,.55); }

.apply-peek-stage{
  position:relative; height:230px; perspective:1250px;
  cursor:grab; touch-action:pan-y;
}
@media (min-width:1000px){ .apply-peek-stage{ height:270px; }
  .ap-card{ width:400px; margin-left:-200px; } }
.apply-peek-stage:active{ cursor:grabbing; }
.apply-peek-deck{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
}
.ap-card{
  position:absolute; top:0; left:50%; width:340px; height:100%;
  margin-left:-170px; border-radius:16px; overflow:hidden;
  background:#0d0916; border:2px solid rgba(255,255,255,.55);
  box-shadow:0 14px 34px rgba(8,4,16,.55);
  transform-origin:center bottom;
  transition:transform .5s var(--ease), opacity .5s ease, filter .5s ease;
  will-change:transform, opacity;
}
.ap-card img{
  width:100%; height:100%; object-fit:cover; display:block;
  content-visibility:auto; filter:brightness(.45);
  transition:filter .5s ease;
}
.ap-card.is-active img{ filter:brightness(1); }
.ap-card.is-active{ cursor:pointer; }
.ap-card.is-active:hover{ filter:brightness(1.06); }
.ap-card .ap-glow{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.35));
  opacity:0; transition:opacity .4s ease;
}
.ap-card.is-active .ap-glow{ opacity:.55; }

.apply-peek-cap{
  margin-top:13px; text-align:center; min-height:19px;
  font-size:13.5px; color:rgba(255,255,255,.95); line-height:1.6;
}

@media (max-width:640px){
  .apply-peek{ padding:14px 12px 12px; margin-top:18px; }
  .apply-peek-stage{ height:180px; }
  .ap-card{ width:250px; margin-left:-125px; }
  .apply-peek-head b{ font-size:14px; }
  .apply-peek-hint{ display:none; }
  .apply-peek-cap{ font-size:12.5px; }
}
html.perf-mode .ap-card{ transition:none; }
html.perf-mode .dg-slide img{ transition:none; transform:none; }
@media (prefers-reduced-motion:reduce){ .ap-card{ transition:none; } }

/* ---- แผงจัดการภาพตัวอย่างแมพ (แอดมิน) ---- */
.ap-admin-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr));
  gap:8px; margin-top:10px;
}

/* ---- ปุ่มสมัคร + ป้าย "หมดเขตแล้ว" ---- */
/* ป้าย "หมดเขตแล้ว" ลอยใต้ปุ่ม ไม่กินพื้นที่ ปุ่มจึงอยู่ระดับเดียวกับป้ายสถานะ */
.apply-btn-wrap{ position:relative; display:inline-flex; }
.apply-expired-note{
  display:none; position:absolute; top:calc(100% + 5px); left:0; right:0;
  text-align:center; white-space:nowrap;
  font-family:'Prompt'; font-weight:600; font-size:11px;
  color:rgba(255,255,255,.75); letter-spacing:.02em; pointer-events:none;
}
.apply-expired-note.show{ display:block; }

/* ---- ป้ายสถานะ "ปิดรับสมัครแล้ว" — โทนเทาเข้ม ดูปิดชัดเจน ---- */
.inline-countdown.is-open.is-closed-label{
  background:linear-gradient(135deg,#2a2730 0%,#343039 55%,#26232c 100%);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 6px 16px rgba(8,4,16,.4), inset 0 1px 0 rgba(255,255,255,.07);
}
.inline-countdown.is-open.is-closed-label::after{ display:none; }   /* ไม่ต้องมีแสงวิ่ง */
.inline-countdown.is-open.is-closed-label .inline-countdown-open-label{
  color:rgba(255,255,255,.72); font-weight:600;
}
.inline-countdown.is-open.is-closed-label .inline-countdown-open-label::before{ display:none; }
.oc-lock{ width:13px; height:13px; flex:0 0 auto; color:rgba(255,255,255,.6); }

/* =====================================================
   ข่าวสาร: ใช้หน้าต่างเดียวกับผลงาน แต่เป็นคอลัมน์เดียว
   (ข่าวไม่มีแกลเลอรี คอลัมน์ซ้ายจึงว่าง ต้องยุบทิ้ง)
===================================================== */
.modal.modal-detail.is-news{ max-width:620px; }
.modal.modal-detail.is-news .detail-media{ display:none; }
.modal.modal-detail.is-news .detail-grid{ grid-template-columns:1fr; }
.modal.modal-detail.is-news .detail-body{
  padding:30px 32px 30px; max-height:min(88vh,780px); overflow-y:auto;
}
.modal.modal-detail.is-news .detail-body .sub{ max-width:none; }
/* ภาพข่าวขึ้นก่อนหัวข้อ ให้เห็นภาพรวมทันที */
.modal.modal-detail.is-news .detail-clip{
  order:-1; margin-top:0; padding-top:0; margin-bottom:18px;
}
.modal.modal-detail.is-news .detail-clip-box{
  aspect-ratio:auto; height:200px; border-radius:16px;
}
@media (max-width:640px){ .modal.modal-detail.is-news .detail-clip-box{ height:160px; } }
@media (max-width:640px){
  .modal.modal-detail.is-news .detail-body{ padding:20px 18px 24px; }
}

/* ==========================================================
   สภาพอากาศตามพิกัดจริง — เอฟเฟกต์ทักทายตอนเข้าเว็บ 3 วินาที
   ========================================================== */
.wx-layer{
  position:fixed; inset:0; z-index:250; pointer-events:none;
  opacity:0; transition:opacity .9s ease;
}
.wx-layer.show{ opacity:1; }
.wx-layer canvas{ position:absolute; inset:0; width:100%; height:100%; }

/* ม่านสีบรรยากาศ */
.wx-tint{ position:absolute; inset:0; transition:opacity 1s ease; }
.wx-rain  .wx-tint{ background:linear-gradient(180deg, rgba(45,75,125,.34), rgba(30,55,100,.20)); }
.wx-storm .wx-tint{ background:linear-gradient(180deg, rgba(24,28,60,.48), rgba(16,20,48,.32)); }
.wx-sun   .wx-tint{ background:radial-gradient(ellipse 72% 54% at 70% 6%, rgba(255,206,96,.42), transparent 64%); }
.wx-cloud .wx-tint{ background:linear-gradient(180deg, rgba(140,152,175,.28), transparent 62%); }
.wx-wind  .wx-tint{ background:linear-gradient(100deg, rgba(165,208,238,.26), transparent 58%); }
.wx-fog   .wx-tint{ background:linear-gradient(180deg, rgba(222,226,234,.46), rgba(205,211,223,.30)); }
.wx-snow  .wx-tint{ background:linear-gradient(180deg, rgba(214,232,255,.34), transparent 66%); }

/* ฟ้าแลบตอนพายุ */
.wx-flash{
  position:absolute; inset:0; background:#fff; opacity:0;
}
.wx-storm .wx-flash{ animation:wxFlash 3s ease-out 1; }
@keyframes wxFlash{
  0%,58%,64%,72%,100%{ opacity:0; }
  60%{ opacity:.55; } 62%{ opacity:.18; }
  68%{ opacity:.42; }
}

/* ดวงอาทิตย์ตอนแดดออก */
.wx-sunball{
  position:absolute; right:8%; top:6%;
  width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle, #fff6d0 0%, #ffd97a 42%, rgba(255,200,90,.35) 65%, transparent 72%);
  filter:blur(2px); opacity:0;
}
.wx-sun .wx-sunball{ animation:wxSun 3s ease-out 1 both; }
@keyframes wxSun{
  0%{ opacity:0; transform:scale(.7) translateY(-20px); }
  30%,70%{ opacity:1; transform:scale(1) translateY(0); }
  100%{ opacity:0; transform:scale(1.08); }
}

/* ป้ายบอกสภาพอากาศ */
.wx-badge{
  position:fixed; left:50%; top:96px; transform:translate(-50%,-18px);
  z-index:270; pointer-events:none;
  display:flex; align-items:center; gap:11px;
  padding:11px 20px 11px 14px; border-radius:999px;
  background:var(--glass-bg-strong,rgba(255,255,255,.66));
  border:1px solid var(--glass-border,rgba(255,255,255,.8));
  backdrop-filter:blur(18px) saturate(1.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  box-shadow:0 14px 40px rgba(74,59,63,.18);
  opacity:0; transition:opacity .55s ease, transform .55s cubic-bezier(.2,1.4,.3,1);
  max-width:calc(100vw - 32px);
}
.wx-badge.show{ opacity:1; transform:translate(-50%,0); }
.wx-badge .wx-ico{
  width:34px; height:34px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:rgba(255,255,255,.5);
}
.wx-badge .wx-ico svg{ width:20px; height:20px; }
.wx-badge .wx-txt{ min-width:0; }
.wx-badge b{
  display:block; font-family:'Prompt',sans-serif; font-weight:700;
  font-size:13.5px; color:var(--ink,#4a3b3f); line-height:1.35;
}
.wx-badge span{
  display:block; font-size:11.5px; color:var(--ink-soft,#8a7880); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ไอคอนสภาพอากาศ: สีตามชนิด */
.wx-i-sun{ color:#f4a300; } .wx-i-rain{ color:#4a90d9; }
.wx-i-storm{ color:#6b5ce7; } .wx-i-cloud{ color:#8a94a6; }
.wx-i-wind{ color:#5bb3c9; }  .wx-i-fog{ color:#9aa3b0; }
.wx-i-snow{ color:#79c9ff; }

@media (max-width:560px){
  .wx-badge{ top:auto; bottom:86px; padding:9px 16px 9px 11px; }
  .wx-badge b{ font-size:12.5px; } .wx-badge span{ font-size:10.5px; }
  .wx-sunball{ width:90px; height:90px; }
}
/* โหมดประหยัด / ผู้ใช้ปิดการเคลื่อนไหว: เหลือแค่ป้าย ไม่มีอนุภาค */
html.perf-mode .wx-layer{ display:none; }
@media (prefers-reduced-motion:reduce){
  .wx-layer{ display:none; }
}

/* =====================================================================
   🎃 HALLOWEEN — ทั้งบล็อกนี้ทำงานเฉพาะตอน <html class="halloween">
   ก่อนถึงเวลา เว็บจะเป็นธีมปกติทุกประการ
===================================================================== */
html.halloween{
  --pink:#ff7a18;
  --pink-deep:#e8490c;
  --pink-soft:#3a1a05;
  --yellow:#c8ff2e;
  --yellow-soft:#1d2a06;
  --blue:#a271ff;
  --blue-soft:#1a0f33;
  --lavender:#6ee7b7;
  --lavender-soft:#07281c;
  --cream:#0b0710;
  --paper:#130d1c;
  --ink:#f0e6da;
  --ink-soft:#a396a8;
  --line: rgba(255,180,120,0.16);
  --glass-bg: rgba(28,18,40,0.55);
  --glass-bg-strong: rgba(20,13,30,0.78);
  --glass-border: rgba(255,150,60,0.22);
  --shadow-soft: 0 8px 30px rgba(0,0,0,0.5);
  --shadow-pop: 0 20px 60px rgba(162,113,255,0.28);
}

/* พื้นหลังเรืองแสงบนพื้นมืดแทนการทับสีขาว */
html.halloween .aurora-layer{ mix-blend-mode:screen; opacity:.5; filter:blur(68px); }
html.halloween .aurora-shimmer{ opacity:.14; }

/* ฟ้ากลางคืน */
html.halloween .pcs-banner{
  background:linear-gradient(180deg,
    #140a24 0%, #1b0f30 20%, #24143f 44%, #2d1a4a 68%, #3a2159 100%);
}
html.halloween .pcs-sky-glow{
  background:radial-gradient(ellipse 70% 60% at 50% 8%, rgba(255,150,60,0.20), transparent 70%);
}
html.halloween .pcs-cloud{
  background:rgba(120,90,160,.55);
  filter:drop-shadow(2px 3px 0 rgba(30,15,55,.5));
}
html.halloween .pcs-grass{
  background:
    radial-gradient(circle, rgba(90,50,15,.45) 1px, transparent 1.6px) 2px 6px/12px 12px,
    radial-gradient(circle, rgba(160,100,30,.4) 1px, transparent 1.6px) 7px 16px/16px 16px,
    radial-gradient(circle, rgba(70,35,10,.4) 1px, transparent 1.6px) 12px 26px/14px 14px,
    linear-gradient(180deg, #3b2450 0%, #2c1a3c 35%, #1e1129 70%, #140b1c 100%);
}
html.halloween .pcs-grass::before{ background-image:repeating-linear-gradient(90deg, #2c1a3c 0 4px, transparent 4px 9px); }
html.halloween .pcs-grass::after{ background-image:repeating-linear-gradient(90deg, #3b2450 0 3px, transparent 3px 9px); }
html.halloween .pcs-tree-leaf{ background:#4a2f6b; }

/* พื้นผิวสว่างที่ต้องกลับเป็นมืด */
html.halloween .nav-shell,
html.halloween .glass,
html.halloween .glass-strong,
html.halloween .modal{ color:var(--ink); }

/* ---------- ชั้นตกแต่งทั้งหมด: ซ่อนไว้จนกว่าจะถึงเวลา ---------- */
.hw-layer{ display:none; }
html.halloween .hw-layer{ display:block; }

.hw-vignette{
  position:fixed; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(ellipse 125% 95% at 50% 42%, transparent 38%, rgba(4,2,8,.62) 100%);
}
.hw-moon{
  position:fixed; top:66px; right:7%; width:96px; height:96px; z-index:2;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 36% 32%, #fff2d0, #ffc47a 46%, #e07a3a 100%);
  box-shadow:0 0 62px rgba(255,140,60,.5), 0 0 140px rgba(255,90,20,.3);
  animation:hwMoon 9s ease-in-out infinite;
}
.hw-moon::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at 62% 38%, rgba(150,70,30,.35) 9px, transparent 10px),
    radial-gradient(circle at 38% 62%, rgba(150,70,30,.28) 12px, transparent 13px),
    radial-gradient(circle at 70% 70%, rgba(150,70,30,.22) 7px, transparent 8px);
}
@keyframes hwMoon{0%,100%{opacity:.92; transform:scale(1);}50%{opacity:1; transform:scale(1.035);}}
@media (max-width:720px){.hw-moon{width:60px;height:60px;top:76px;right:6%;}}

.hw-web{ position:fixed; top:0; z-index:3; pointer-events:none; opacity:.30; }
.hw-web svg{ display:block; width:150px; height:150px; }
.hw-web.left{ left:0; }
.hw-web.right{ right:0; transform:scaleX(-1); }
@media (max-width:720px){ .hw-web svg{ width:96px; height:96px; } }

.hw-spider{
  position:fixed; top:0; left:22%; z-index:4; pointer-events:none;
  transform-origin:top center; animation:hwSpiderDrop 14s ease-in-out infinite;
}
.hw-spider .thread{ width:1px; height:90px; margin:0 auto; background:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.12)); }
.hw-spider svg{ display:block; width:26px; height:26px; margin-top:-2px; }
@keyframes hwSpiderDrop{
  0%,100%{ transform:translateY(-140px) rotate(0deg); }
  35%,65%{ transform:translateY(0) rotate(3deg); }
  50%{ transform:translateY(12px) rotate(-3deg); }
}
@media (max-width:720px){ .hw-spider{ display:none !important; } }

.hw-fog{
  position:fixed; left:0; right:0; bottom:0; height:190px; z-index:3; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 100% at 18% 100%, rgba(140,90,200,.24), transparent 70%),
    radial-gradient(ellipse 55% 100% at 52% 100%, rgba(100,60,160,.20), transparent 72%),
    radial-gradient(ellipse 62% 100% at 86% 100%, rgba(150,95,210,.22), transparent 70%);
  animation:hwFog 12s ease-in-out infinite;
}
@keyframes hwFog{0%,100%{opacity:.75; transform:translateX(0);}50%{opacity:1; transform:translateX(-18px);}}

.hw-bat{ position:fixed; z-index:4; pointer-events:none; color:#1a0d28; }
.hw-bat svg{ display:block; width:100%; height:auto; filter:drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.hw-bat .wing{ animation:hwFlap .38s ease-in-out infinite alternate; }
.hw-bat .wing-l{ transform-origin:70% 50%; }
.hw-bat .wing-r{ transform-origin:30% 50%; }
@keyframes hwFlap{ from{ transform:scaleY(1) } to{ transform:scaleY(.55) } }
.hw-bat-1{ width:56px; top:16vh; left:-9%; animation:hwBatFly1 26s linear infinite; }
.hw-bat-2{ width:40px; top:34vh; left:-9%; animation:hwBatFly2 34s linear infinite 4s; }
.hw-bat-3{ width:30px; top:9vh;  left:-9%; animation:hwBatFly1 42s linear infinite 9s; }
.hw-bat-4{ width:46px; top:52vh; left:-9%; animation:hwBatFly2 30s linear infinite 15s; }
@keyframes hwBatFly1{
  0%{ transform:translate(0,0) rotate(0); opacity:0; } 6%{ opacity:.95; }
  25%{ transform:translate(32vw,-7vh) rotate(-6deg); }
  50%{ transform:translate(62vw,5vh) rotate(5deg); }
  75%{ transform:translate(92vw,-4vh) rotate(-4deg); }
  94%{ opacity:.95; } 100%{ transform:translate(122vw,2vh); opacity:0; }
}
@keyframes hwBatFly2{
  0%{ transform:translate(0,0) rotate(0); opacity:0; } 8%{ opacity:.9; }
  30%{ transform:translate(36vw,6vh) rotate(6deg); }
  60%{ transform:translate(70vw,-6vh) rotate(-5deg); }
  92%{ opacity:.9; } 100%{ transform:translate(120vw,3vh); opacity:0; }
}
@media (max-width:720px){ .hw-bat-3, .hw-bat-4{ display:none !important; } }

/* ฟักทองหน้าโหด */
.hw-pumpkin{ position:fixed; z-index:3; pointer-events:none; }
.hw-pumpkin svg{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 0 22px rgba(255,90,10,.6)) drop-shadow(0 6px 14px rgba(0,0,0,.6));
}
.hw-pumpkin .glow{
  fill:#ffdf6b;
  filter:drop-shadow(0 0 6px #ff9a1f) drop-shadow(0 0 14px #ff5a0a);
  animation:hwCandle 1.7s ease-in-out infinite;
}
@keyframes hwCandle{
  0%,100%{ opacity:1;   filter:drop-shadow(0 0 6px #ff9a1f) drop-shadow(0 0 16px #ff5a0a); }
  18%    { opacity:.72; filter:drop-shadow(0 0 4px #ff8a12) drop-shadow(0 0 9px  #e04a05); }
  34%    { opacity:1;   filter:drop-shadow(0 0 8px #ffb347) drop-shadow(0 0 20px #ff6a12); }
  52%    { opacity:.6;  filter:drop-shadow(0 0 3px #ff7a10) drop-shadow(0 0 7px  #c93f04); }
  70%    { opacity:.95; filter:drop-shadow(0 0 7px #ffa62e) drop-shadow(0 0 17px #ff5f0d); }
}
.hw-p1{ width:74px; left:4%;  bottom:96px;  animation:hwFloat 7s ease-in-out infinite; }
.hw-p2{ width:54px; right:6%; bottom:128px; animation:hwFloat 9s ease-in-out infinite 1.4s; }
.hw-p3{ width:44px; left:28%; bottom:72px;  animation:hwFloat 8s ease-in-out infinite 2.6s; }
@keyframes hwFloat{ 0%,100%{ transform:translateY(0) rotate(-3deg) } 50%{ transform:translateY(-16px) rotate(3deg) } }
@media (max-width:720px){ .hw-p3{ display:none !important; } .hw-p1{width:54px;} .hw-p2{width:40px;} }

.hw-ghost{ position:fixed; z-index:3; pointer-events:none; opacity:.55; }
.hw-ghost svg{ display:block; width:100%; height:auto; filter:drop-shadow(0 0 18px rgba(200,180,255,.4)); }
.hw-g1{ width:52px; left:-8%; top:62vh; animation:hwGhostDrift 30s linear infinite; }
.hw-g2{ width:38px; left:-8%; top:42vh; animation:hwGhostDrift 38s linear infinite 12s; }
@keyframes hwGhostDrift{
  0%{ transform:translate(0,0); opacity:0; } 10%{ opacity:.55; }
  50%{ transform:translate(55vw,-9vh); } 90%{ opacity:.55; }
  100%{ transform:translate(118vw,4vh); opacity:0; }
}
@media (max-width:720px){ .hw-g2{ display:none !important; } }

.hw-embers{ position:fixed; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
.hw-ember{
  position:absolute; bottom:-10px; border-radius:50%;
  background:radial-gradient(circle, #ffb347, #ff6a00);
  box-shadow:0 0 8px rgba(255,140,30,.9);
  animation-name:hwEmberRise; animation-timing-function:linear; animation-iteration-count:infinite;
}
@keyframes hwEmberRise{
  0%{ transform:translate(0,0) scale(1); opacity:0; } 10%{ opacity:.9; }
  100%{ transform:translate(var(--dx,20px), -104vh) scale(.4); opacity:0; }
}

html.perf-mode .hw-bat, html.perf-mode .hw-ghost,
html.perf-mode .hw-embers, html.perf-mode .hw-spider{ display:none !important; }
html.tab-hidden .hw-bat, html.tab-hidden .hw-ghost, html.tab-hidden .hw-ember,
html.tab-hidden .hw-pumpkin, html.tab-hidden .hw-fog, html.tab-hidden .hw-moon,
html.tab-hidden .hw-spider, html.tab-hidden .hw-pumpkin .glow{ animation-play-state:paused !important; }
@media (prefers-reduced-motion: reduce){
  .hw-bat, .hw-ghost, .hw-ember, .hw-spider, .hw-fog, .hw-moon,
  .hw-pumpkin, .hw-pumpkin .glow, .hw-bat .wing{ animation:none !important; }
}

/* =====================================================================
   ⏳ HALLOWEEN COUNTDOWN — กรอบเล็กมุมจอ (ธีมปกติเท่านั้น)
===================================================================== */
.hwcd{
  position:fixed; left:18px; bottom:18px; z-index:55;
  display:none; align-items:center; gap:10px;
  padding:9px 14px 9px 11px; border-radius:14px;
  background:linear-gradient(140deg, rgba(38,20,58,.94), rgba(18,10,28,.96));
  border:1px solid rgba(255,150,60,.3);
  box-shadow:0 10px 26px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,180,110,.18);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  font-family:'Prompt',sans-serif; color:#ffe6c9;
  cursor:default; transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.hwcd.show{ display:flex; }
.hwcd:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(0,0,0,.5); }
html.halloween .hwcd{ display:none !important; }   /* ถึงเวลาแล้วก็ไม่ต้องนับ */

.hwcd-ico{ width:26px; height:26px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.hwcd-ico svg{ width:24px; height:24px; display:block; filter:drop-shadow(0 0 6px rgba(255,120,20,.7)); }
.hwcd-ico .glow{ fill:#ffdf6b; animation:hwCandle 1.9s ease-in-out infinite; }

.hwcd-body{ display:flex; flex-direction:column; line-height:1.15; }
.hwcd-label{
  font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,190,140,.8);
}
.hwcd-time{
  font-size:14.5px; font-weight:800; font-variant-numeric:tabular-nums;
  letter-spacing:.02em; margin-top:2px; color:#fff;
}
.hwcd-time b{ color:#ff9a3c; font-weight:800; }

.hwcd-close{
  width:20px; height:20px; flex:0 0 auto; border:none; background:transparent;
  color:rgba(255,220,190,.5); display:flex; align-items:center; justify-content:center;
  border-radius:6px; margin-left:2px; transition:color .2s, background .2s;
}
.hwcd-close:hover{ color:#fff; background:rgba(255,255,255,.12); }
.hwcd-close svg{ width:12px; height:12px; }

@media (max-width:720px){
  .hwcd{ left:10px; bottom:10px; padding:7px 11px 7px 9px; gap:8px; border-radius:12px; }
  .hwcd-ico{ width:22px; height:22px; } .hwcd-ico svg{ width:20px; height:20px; }
  .hwcd-time{ font-size:12.5px; } .hwcd-label{ font-size:8.5px; }
}

/* =====================================================================
   🔔 TRANSITION — ตอนเปลี่ยนธีม
===================================================================== */
.hw-transition{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  display:none; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 45%, rgba(255,110,20,.16), rgba(3,1,6,.96) 68%);
  opacity:0;
}
.hw-transition.run{ display:flex; animation:hwTransFade 6.2s ease forwards; }
@keyframes hwTransFade{
  0%{ opacity:0; } 8%{ opacity:1; } 82%{ opacity:1; } 100%{ opacity:0; }
}
.hwt-inner{ text-align:center; transform:scale(.9); animation:hwtPop 6.2s var(--ease) forwards; }
@keyframes hwtPop{
  0%{ transform:scale(.86); opacity:0; }
  12%{ transform:scale(1); opacity:1; }
  86%{ transform:scale(1); opacity:1; }
  100%{ transform:scale(1.06); opacity:0; }
}
.hwt-pumpkin{ width:130px; margin:0 auto 20px; }
.hwt-pumpkin svg{ width:100%; height:auto; filter:drop-shadow(0 0 34px rgba(255,90,10,.85)); }
.hwt-pumpkin .glow{ fill:#ffdf6b; animation:hwCandle 1.3s ease-in-out infinite; }
.hwt-title{
  font-family:'Prompt',sans-serif; font-size:30px; font-weight:800; color:#fff;
  text-shadow:0 0 26px rgba(255,120,20,.85); letter-spacing:.01em;
}
.hwt-sub{ margin-top:8px; font-size:14px; color:rgba(255,215,180,.85); }
.hwt-bell{
  display:flex; justify-content:center; gap:10px; margin-top:20px;
}
.hwt-bell span{
  width:9px; height:9px; border-radius:50%; background:rgba(255,160,60,.28);
  box-shadow:0 0 0 0 rgba(255,150,40,.6);
}
.hwt-bell span.ring{ animation:hwtBellPop 1s ease-out; background:#ffb347; }
@keyframes hwtBellPop{
  0%{ transform:scale(1); box-shadow:0 0 0 0 rgba(255,150,40,.7); }
  100%{ transform:scale(1.5); box-shadow:0 0 0 22px rgba(255,150,40,0); }
}
@media (max-width:720px){
  .hwt-pumpkin{ width:96px; } .hwt-title{ font-size:22px; } .hwt-sub{ font-size:12.5px; }
}

/* สั่นทั้งเว็บตอนระฆังดัง */
@keyframes hwQuake{
  0%,100%{ transform:translate3d(0,0,0) }
  10%{ transform:translate3d(-7px,3px,0) rotate(-.25deg) }
  20%{ transform:translate3d(6px,-4px,0) rotate(.25deg) }
  30%{ transform:translate3d(-5px,-2px,0) }
  40%{ transform:translate3d(5px,4px,0) rotate(-.18deg) }
  50%{ transform:translate3d(-4px,2px,0) }
  60%{ transform:translate3d(4px,-3px,0) rotate(.15deg) }
  70%{ transform:translate3d(-3px,1px,0) }
  80%{ transform:translate3d(2px,2px,0) }
  90%{ transform:translate3d(-1px,-1px,0) }
}
body.hw-quake{ animation:hwQuake .85s cubic-bezier(.36,.07,.19,.97); }
@media (prefers-reduced-motion: reduce){
  body.hw-quake{ animation:none; }
  .hw-transition.run, .hwt-inner{ animation-duration:2.4s; }
}



/* =====================================================================
   🍬 HALLOWEEN EVENT v3 — ตามดีไซน์ที่ออกแบบมา
===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;700&family=Kanit:wght@300;400;500;600;700&display=swap');

/* ---- ปุ่มบนหัวเว็บ ---- */
.nav-galaxy.evt-only, .special-mobile.evt-only{ display:none !important; }
html.halloween .nav-galaxy.evt-only{ display:flex !important; }
html.halloween .special-mobile.evt-only{ display:flex !important; align-items:center; gap:9px; }
html.halloween .nav-galaxy.evt-only a{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(135deg,#7a2d06 0%,#c2410c 45%,#ff8a1f 100%) !important;
  border:1px solid rgba(255,190,110,.5) !important;
  box-shadow:0 6px 20px rgba(232,73,12,.45), inset 0 1px 0 rgba(255,220,180,.35) !important;
  color:#fff7ea !important; font-weight:700 !important;
}
html.halloween .nav-galaxy.evt-only a::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, transparent 34%, rgba(255,230,180,.45) 50%, transparent 66%);
  transform:translateX(-140%); animation:evtShine 4.5s ease-in-out infinite;
}
@keyframes evtShine{ 0%,70%{transform:translateX(-140%);} 92%,100%{transform:translateX(170%);} }
.evt-nav-ico{ width:20px; height:20px; flex:0 0 auto; }
.evt-nav-ico img, .evt-nav-ico svg{ width:100%; height:auto; display:block; }
.evt-nav-candy{
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 9px 2px 6px; margin-left:8px; border-radius:999px;
  font-family:'Chakra Petch',sans-serif; font-size:12px; font-weight:700;
  font-variant-numeric:tabular-nums;
  background:rgba(0,0,0,.42); color:#ffd08a; border:1px solid rgba(255,190,120,.45);
}
.evt-nav-candy img{ width:15px; height:auto; }

/* ---- โมดัล: พื้นหลังจักรวาลม่วง-ส้ม ---- */
.evt-modal{
  max-width:940px !important; padding:0 !important;
  border-radius:26px !important; overflow:hidden;
  background:
    radial-gradient(1100px 620px at 18% -10%, #3a1465 0%, rgba(58,20,101,0) 62%),
    radial-gradient(900px 560px at 92% 6%, #4a1330 0%, rgba(74,19,48,0) 58%),
    radial-gradient(760px 700px at 60% 118%, #2a0f4d 0%, rgba(42,15,77,0) 60%),
    linear-gradient(175deg, #0d0620 0%, #0a0418 55%, #120724 100%) !important;
  border:1px solid rgba(190,150,255,.18) !important;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95) !important;
  color:#f2e9ff !important;
  font-family:'Kanit',system-ui,sans-serif !important;
  --glow:.75;
}
.evt-scroll{ max-height:86vh; overflow-y:auto; overscroll-behavior:contain; padding:clamp(18px,3vw,34px); position:relative; z-index:2; }

/* หมอก + ดาวพื้นหลัง */
.evt-fx{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; }
.evt-fog{ position:absolute; border-radius:50%; filter:blur(30px); }
.evt-fog.a{ left:-10%; top:18%; width:70%; height:46%;
  background:radial-gradient(closest-side, rgba(150,90,255,.20), rgba(150,90,255,0)); animation:fogmove 26s ease-in-out infinite; }
.evt-fog.b{ right:-14%; bottom:4%; width:66%; height:44%;
  background:radial-gradient(closest-side, rgba(255,120,40,.14), rgba(255,120,40,0)); animation:fogmove 34s ease-in-out infinite reverse; }
.evt-fog.c{ left:30%; top:60%; width:54%; height:40%;
  background:radial-gradient(closest-side, rgba(90,40,160,.24), rgba(90,40,160,0)); animation:fogmove 42s ease-in-out infinite; }
@keyframes fogmove{ 0%{transform:translateX(-5%) scale(1);} 50%{transform:translateX(5%) scale(1.09);} 100%{transform:translateX(-5%) scale(1);} }

.evt-star{
  position:absolute; background:#ffd08a;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  animation:twinkle 4.6s ease-in-out infinite;
}
@keyframes twinkle{ 0%,100%{opacity:0; transform:scale(.35) rotate(0);} 50%{opacity:.95; transform:scale(1) rotate(45deg);} }
@keyframes floaty{ 0%,100%{transform:translateY(0) rotate(-2.5deg);} 50%{transform:translateY(-5px) rotate(2.5deg);} }
@keyframes emberrise{ 0%{opacity:0; transform:translateY(12px) scale(.6);} 20%{opacity:.9;} 100%{opacity:0; transform:translateY(-46px) scale(1.1);} }
@keyframes flamelick{ 0%,100%{transform:scaleY(1) translateY(0); opacity:.9;} 50%{transform:scaleY(1.18) translateY(-1px); opacity:1;} }
@keyframes popNum{ 0%{transform:scale(1);} 40%{transform:scale(1.28);} 100%{transform:scale(1);} }
@keyframes auraPulse{ 0%,100%{opacity:.45; transform:scale(.94);} 50%{opacity:.85; transform:scale(1.06);} }
@keyframes batfly{
  0%{transform:translate(0,0) rotate(-4deg);} 25%{transform:translate(26px,-18px) rotate(5deg);}
  50%{transform:translate(52px,2px) rotate(-3deg);} 75%{transform:translate(26px,16px) rotate(4deg);}
  100%{transform:translate(0,0) rotate(-4deg);}
}

/* ---- การ์ดแผง ---- */
.evt-panelbox{
  position:relative; z-index:2;
  border-radius:24px; padding:clamp(16px,2.2vw,26px); margin-bottom:18px;
  background:linear-gradient(168deg, rgba(40,18,72,.78), rgba(14,6,28,.72) 100%);
  border:1px solid rgba(190,150,255,.16);
  -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.09);
}
.evt-hd{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.evt-hd h2{
  margin:0; font-family:'Chakra Petch',Kanit,sans-serif; font-weight:700;
  font-size:clamp(24px,3.2vw,40px); line-height:1; letter-spacing:.01em; color:#fff;
  text-shadow:0 0 26px rgba(255,138,31,.45), 0 0 60px rgba(168,85,247,.35);
}
.evt-hd p{ margin:8px 0 0; font-size:clamp(12.5px,1.1vw,15px); font-weight:300; color:rgba(226,212,255,.78); }
.evt-bat{ width:40px; flex:0 0 auto; align-self:flex-end; fill:#150a28; opacity:.85;
  filter:drop-shadow(0 0 12px rgba(168,85,247,.55)); animation:batfly 14s ease-in-out infinite; }
.evt-reset{
  display:flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px;
  background:rgba(168,85,247,.14); border:1px solid rgba(190,150,255,.24);
  font-size:12.5px; font-weight:500; color:rgba(232,220,255,.9);
}
.evt-reset i{ width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 10px #4ade80; }

/* ---- กริดวัน ---- */
.evt-days-range{
  font-family:'Chakra Petch',sans-serif; font-size:12.5px; font-weight:700;
  color:rgba(255,190,110,.9); letter-spacing:.04em; text-transform:uppercase;
  margin:-6px 0 14px; display:flex; align-items:center; gap:6px;
}
.evt-days-range::before{
  content:''; width:6px; height:6px; border-radius:50%; background:#ff8a1f;
  box-shadow:0 0 8px #ff8a1f;
}
.evt-daywrap{ display:flex; flex-wrap:wrap; gap:16px; }
.evt-grid{ flex:1 1 400px; min-width:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:12px; align-content:start; }
.evt-day{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.evt-day-cap{ display:flex; align-items:center; justify-content:center; gap:5px; height:18px; }
.evt-day-cap b{ font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:13px; letter-spacing:.1em; color:rgba(228,214,255,.8); }
.evt-day-cap .today-tag{ font-size:12px; font-weight:600; color:#ffb056; white-space:nowrap; }
.evt-day-cap svg{ width:13px; height:13px; fill:#ff8a1f; filter:drop-shadow(0 0 6px rgba(255,122,0,.9)); animation:flamelick 1.4s ease-in-out infinite; }

.evt-tile{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:13px 8px 11px; border-radius:18px;
  transition:transform .25s cubic-bezier(.2,.9,.3,1.4), box-shadow .25s;
}
.evt-tile img{ width:52px; height:auto; display:block; }
.evt-tile span{ font-size:12.5px; font-weight:500; }

/* วันนี้ */
.evt-tile.now{
  background:linear-gradient(168deg, rgba(255,138,31,.24), rgba(56,18,10,.6));
  border:1.5px solid #ff9b3d;
  box-shadow:0 0 24px rgba(255,122,0,calc(var(--glow,.75) * .75)), inset 0 0 26px rgba(255,122,0,.16);
}
.evt-tile.now:hover{ transform:translateY(-4px) scale(1.035); box-shadow:0 0 38px rgba(255,122,0,.9), inset 0 0 30px rgba(255,122,0,.24); }
.evt-tile.now img{ filter:drop-shadow(0 6px 14px rgba(255,122,0,.55)); animation:floaty 3.2s ease-in-out infinite; }
.evt-tile.now span{ color:#ffd6ab; }
.evt-tile .ember{ position:absolute; bottom:8px; border-radius:50%; background:#ffb056; animation:emberrise 2.6s linear infinite; }

/* รับแล้ว */
.evt-tile.done{
  background:linear-gradient(168deg, rgba(74,222,128,.14), rgba(10,30,20,.55));
  border:1.5px solid rgba(74,222,128,.42);
}
.evt-tile.done img{ opacity:.42; filter:grayscale(.35); }
.evt-tile.done span{ color:rgba(190,240,205,.85); }
.evt-tile.done::after{
  content:""; position:absolute; top:7px; right:7px; width:19px; height:19px; border-radius:50%;
  background:#22c55e; box-shadow:0 2px 9px rgba(34,197,94,.6);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size:12px; background-position:center; background-repeat:no-repeat;
}

/* ยังไม่ถึง */
.evt-tile.soon{
  background:linear-gradient(168deg, rgba(64,40,110,.38), rgba(16,8,32,.55));
  border:1.5px solid rgba(150,110,220,.2);
}
.evt-tile.soon img{ opacity:.34; filter:grayscale(.6); }
.evt-tile.soon span{ color:rgba(200,185,235,.55); }

/* วันพิเศษ 5 / 10 */
.evt-tile.milestone{ border-color:rgba(255,196,80,.55); background:linear-gradient(168deg, rgba(251,191,36,.2), rgba(60,32,6,.6)); }
.evt-tile.milestone span{ color:#ffe1a8; }
.evt-tile .mstar{
  position:absolute; top:-7px; left:50%; transform:translateX(-50%);
  font-family:'Chakra Petch',sans-serif; font-size:9px; font-weight:700; letter-spacing:.08em;
  padding:2px 8px; border-radius:999px; color:#3b2a00; white-space:nowrap;
  background:linear-gradient(135deg,#fde68a,#fbbf24); box-shadow:0 3px 10px rgba(251,191,36,.5);
}

/* ---- การ์ดความสำเร็จ ครบ 30 วัน ---- */
.evt-complete30-card{
  margin-top:22px; padding:26px 22px; border-radius:22px; text-align:center;
  background:linear-gradient(170deg, rgba(255,138,31,.16), rgba(20,8,38,.78));
  border:1px solid rgba(255,190,110,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 12px 30px rgba(255,138,31,.12);
}
.evt-complete30-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%; margin-bottom:12px;
  background:radial-gradient(closest-side, rgba(255,190,110,.28), rgba(255,138,31,.06));
  color:#ffb96e;
}
.evt-complete30-card h3{
  font-family:'Chakra Petch',sans-serif; font-size:18px; color:#fff; margin:0 0 10px;
}
.evt-complete30-desc{ font-size:13.5px; color:rgba(255,235,215,.85); line-height:1.6; margin:0 0 8px; max-width:440px; margin-left:auto; margin-right:auto; }
.evt-complete30-desc strong{ color:#ffb96e; }
.evt-complete30-note{ font-size:12px; color:rgba(220,205,255,.55); margin:0 0 18px; }

.evt-faq{
  max-width:440px; margin:0 auto; text-align:left; border-radius:12px;
  border:1px solid rgba(200,160,255,.2); background:rgba(20,8,38,.4); overflow:hidden;
}
.evt-faq summary{
  cursor:pointer; padding:12px 16px; font-size:13px; font-weight:600; color:rgba(255,235,215,.9);
  list-style:none; display:flex; align-items:center; justify-content:space-between;
}
.evt-faq summary::-webkit-details-marker{ display:none; }
.evt-faq summary::after{ content:'▾'; opacity:.6; transition:transform .2s ease; }
.evt-faq[open] summary::after{ transform:rotate(180deg); }
.evt-faq-body{ padding:0 16px 14px; font-size:12.5px; line-height:1.7; color:rgba(230,220,255,.75); }

/* ---- การ์ดรางวัลใหญ่ ---- */
.evt-prize{
  flex:0 1 268px; min-width:238px; position:relative;
  display:flex; flex-direction:column; align-items:center; gap:11px;
  padding:20px 16px; border-radius:22px;
  background:linear-gradient(170deg, rgba(168,85,247,.2), rgba(20,8,38,.72));
  border:1px solid rgba(200,160,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.evt-prize::before{
  content:""; position:absolute; width:180px; height:180px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,138,31,.35), rgba(255,138,31,0));
  animation:auraPulse 3.6s ease-in-out infinite; pointer-events:none;
}
.evt-prize > *{ position:relative; z-index:1; }
.evt-prize img{ width:132px; height:auto; filter:drop-shadow(0 10px 22px rgba(168,85,247,.5)); animation:floaty 4s ease-in-out infinite; }
.evt-prize b{ font-family:'Chakra Petch',sans-serif; font-size:15px; font-weight:700; color:#fff; text-align:center; }
.evt-prize em{ font-style:normal; font-size:12px; color:rgba(220,205,255,.7); }

.evt-claim{
  width:100%; padding:13px; border-radius:14px; border:none;
  font-family:'Chakra Petch',sans-serif; font-size:14.5px; font-weight:700; letter-spacing:.03em;
  color:#fff; cursor:pointer;
  background:linear-gradient(135deg,#ff8a1f,#c2410c);
  box-shadow:0 8px 24px rgba(232,73,12,.42);
  transition:transform .22s cubic-bezier(.2,.9,.3,1.4), filter .2s;
}
.evt-claim:hover:not(:disabled){ transform:translateY(-2px); filter:brightness(1.1); }
.evt-claim:active:not(:disabled){ transform:scale(.97); }
.evt-claim:disabled{ background:rgba(120,100,150,.3); color:rgba(210,195,240,.5); box-shadow:none; cursor:not-allowed; }
.evt-claim.got{ background:rgba(74,222,128,.2); color:#86efac; border:1px solid rgba(74,222,128,.4); box-shadow:none; cursor:default; }

/* ---- กระเป๋าแคนดี้ ---- */
.evt-wallet{
  display:flex; align-items:center; gap:11px; flex:0 0 auto;
  padding:9px 16px 9px 11px; border-radius:16px;
  background:rgba(0,0,0,.34); border:1px solid rgba(255,190,120,.34);
}
.evt-wallet img{ width:38px; height:auto; animation:floaty 3.6s ease-in-out infinite; }
.evt-wallet b{ font-family:'Chakra Petch',sans-serif; font-size:24px; font-weight:700; color:#ffb056; font-variant-numeric:tabular-nums; line-height:1; display:block; }
.evt-wallet b.pop{ animation:popNum .5s cubic-bezier(.2,.9,.3,1.4); }
.evt-wallet em{ font-style:normal; display:block; font-size:10.5px; color:rgba(220,205,255,.6); margin-top:3px; }

/* ---- ร้านค้า ---- */
.evt-shop-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
.evt-card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:20px 16px; border-radius:22px;
  background:linear-gradient(170deg, rgba(58,20,101,.55), rgba(14,6,28,.8));
  border:1px solid rgba(190,150,255,.2);
  transition:transform .25s cubic-bezier(.2,.9,.3,1.4), border-color .25s, box-shadow .25s;
}
.evt-card:hover{ transform:translateY(-4px); border-color:rgba(255,155,61,.5); box-shadow:0 22px 46px -22px rgba(0,0,0,.9); }
.evt-card-ico{ width:96px; height:96px; display:flex; align-items:center; justify-content:center; }
.evt-card-ico img, .evt-card-ico svg{ width:100%; height:auto; display:block; filter:drop-shadow(0 8px 18px rgba(168,85,247,.45)); }
.evt-card-name{ font-family:'Chakra Petch',sans-serif; font-size:15.5px; font-weight:700; color:#fff; text-align:center; line-height:1.4; }
.evt-card-price{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Chakra Petch',sans-serif; font-size:16px; font-weight:700; color:#ffb056;
  font-variant-numeric:tabular-nums;
}
.evt-card-price img{ width:24px; height:auto; }
.evt-card-note{ font-size:11.5px; color:rgba(215,200,250,.62); text-align:center; }
.evt-card .evt-claim{ margin-top:auto; }

/* ---- toast ---- */
.evt-toast{
  position:fixed; left:50%; bottom:30px; transform:translate(-50%,0); z-index:10001;
  display:none; align-items:center; gap:9px;
  padding:13px 20px; border-radius:999px;
  background:rgba(20,8,38,.95); border:1px solid rgba(255,155,61,.45);
  box-shadow:0 18px 40px rgba(0,0,0,.6);
  font-family:'Kanit',sans-serif; font-size:13.5px; font-weight:500; color:#ffe1c4;
}
.evt-toast.show{ display:flex; animation:toastIn .38s cubic-bezier(.2,.9,.3,1.4); }
@keyframes toastIn{ from{opacity:0; transform:translate(-50%,16px);} to{opacity:1; transform:translate(-50%,0);} }
.evt-toast i{ width:7px; height:7px; border-radius:50%; background:#ff8a1f; box-shadow:0 0 10px #ff8a1f; flex:0 0 auto; }

.evt-login-note{ text-align:center; padding:40px 24px; color:rgba(215,200,250,.7); font-size:14px; line-height:1.9; }
.evt-login-note b{ display:block; color:#fff; font-size:17px; margin-bottom:8px; font-family:'Chakra Petch',sans-serif; }

.evt-modal .modal-close{
  position:absolute; top:16px; right:16px; z-index:5;
  width:36px !important; height:36px !important; border-radius:50% !important;
  background:rgba(255,255,255,.1) !important; border:1px solid rgba(255,255,255,.16) !important;
  color:rgba(255,235,255,.75) !important;
}
.evt-modal .modal-close:hover{ background:rgba(255,255,255,.2) !important; }

@media (max-width:720px){
  .evt-scroll{ max-height:90vh; padding:16px 13px; }
  .evt-hd h2{ font-size:24px; }
  .evt-bat{ display:none; }
  .evt-grid{ grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:9px; }
  .evt-tile img{ width:42px; }
  .evt-prize{ flex:1 1 100%; }
  .evt-prize img{ width:104px; }
  .evt-card-ico{ width:78px; height:78px; }
}
@media (prefers-reduced-motion: reduce){
  .evt-fog, .evt-star, .evt-bat, .evt-tile img, .evt-prize img,
  .evt-prize::before, .evt-wallet img, .evt-day-cap svg, .evt-tile .ember{ animation:none !important; }
}

/* =====================================================================
   🔐 SECRET CODE — iOS 26 style (ตามธีมของเว็บ)
===================================================================== */
#secretOverlay{
  background:rgba(20,14,24,.42);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
}
html.halloween #secretOverlay{ background:rgba(6,3,12,.62); }

.secret-modal{
  max-width:390px; padding:30px 26px 26px !important;
  border-radius:30px !important;
  /* ธีมปกติ: กระจกสว่างโทนครีม-ชมพูตามเว็บ */
  background:
    linear-gradient(170deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.72) 40%, rgba(255,247,250,.66) 100%) !important;
  border:1px solid rgba(255,255,255,.9) !important;
  box-shadow:
    0 28px 70px rgba(120,80,95,.22),
    0 2px 10px rgba(120,80,95,.12),
    inset 0 1px 0 rgba(255,255,255,1) !important;
  animation:secretSpring .58s cubic-bezier(.32,1.28,.4,1) both;
  will-change:transform, opacity;
}
html.halloween .secret-modal{
  background:
    linear-gradient(170deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 34%, rgba(255,255,255,0) 60%),
    linear-gradient(150deg, rgba(42,26,60,.92), rgba(14,8,22,.96)) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:
    0 28px 70px rgba(0,0,0,.6), 0 2px 10px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.45) !important;
}
@keyframes secretSpring{
  0%  { transform:scale(.86) translateY(26px); opacity:0; }
  55% { transform:scale(1.015) translateY(-3px); opacity:1; }
  100%{ transform:scale(1) translateY(0); opacity:1; }
}

.secret-lock{
  width:76px; height:76px; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:linear-gradient(150deg, var(--pink-soft), rgba(255,255,255,.7));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1), 0 8px 26px rgba(244,98,140,.22);
  animation:secretLockIn .7s cubic-bezier(.32,1.3,.4,1) .06s both;
}
.secret-lock svg{ width:34px; height:34px; color:var(--pink-deep); }
html.halloween .secret-lock{
  background:linear-gradient(150deg, rgba(255,150,60,.3), rgba(162,113,255,.22));
  border-color:rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 8px 26px rgba(255,120,20,.28);
}
html.halloween .secret-lock svg{ color:#ffcf96; }

@keyframes secretLockIn{
  0%{ transform:scale(.4) rotate(-14deg); opacity:0; }
  60%{ transform:scale(1.08) rotate(3deg); opacity:1; }
  100%{ transform:scale(1) rotate(0); opacity:1; }
}
.secret-lock.shake{ animation:secretLockShake .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes secretLockShake{
  0%,100%{ transform:translateX(0); }
  18%{ transform:translateX(-9px) rotate(-5deg); }
  38%{ transform:translateX(8px) rotate(4deg); }
  58%{ transform:translateX(-5px) rotate(-3deg); }
  78%{ transform:translateX(3px) rotate(2deg); }
}
.secret-lock.ok{
  background:linear-gradient(150deg, rgba(52,211,153,.35), rgba(255,255,255,.7));
  box-shadow:inset 0 1px 0 rgba(255,255,255,1), 0 8px 30px rgba(16,185,129,.3);
  animation:secretLockPop .55s cubic-bezier(.32,1.3,.4,1);
}
.secret-lock.ok svg{ color:#059669; }
html.halloween .secret-lock.ok{
  background:linear-gradient(150deg, rgba(52,211,153,.4), rgba(16,185,129,.26));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 8px 30px rgba(16,185,129,.45);
}
html.halloween .secret-lock.ok svg{ color:#a7f3d0; }
@keyframes secretLockPop{
  0%{ transform:scale(1); } 45%{ transform:scale(1.18); } 100%{ transform:scale(1); }
}

.secret-title{
  text-align:center; font-family:'Prompt',sans-serif;
  font-size:22px; font-weight:800; color:var(--ink); letter-spacing:-.01em;
  animation:secretFadeUp .5s cubic-bezier(.32,1.2,.4,1) .12s both;
}
.secret-sub{
  text-align:center; font-size:13px; color:var(--ink-soft);
  margin-top:7px; line-height:1.6;
  animation:secretFadeUp .5s cubic-bezier(.32,1.2,.4,1) .18s both;
}
html.halloween .secret-title{ color:#fff; }
html.halloween .secret-sub{ color:rgba(255,235,215,.6); }
@keyframes secretFadeUp{
  from{ transform:translateY(12px); opacity:0; } to{ transform:translateY(0); opacity:1; }
}

.secret-field{
  position:relative; margin:22px 0 0;
  animation:secretFadeUp .5s cubic-bezier(.32,1.2,.4,1) .24s both;
}
#secretInput{
  width:100%; padding:17px 18px !important;
  border-radius:18px !important;
  border:1.5px solid rgba(74,59,63,.14) !important;
  background:rgba(255,255,255,.75) !important;
  color:var(--ink) !important;
  font-family:'Prompt',sans-serif !important;
  font-size:17px !important; font-weight:700 !important;
  text-align:center; letter-spacing:.18em;
  transition:border-color .28s cubic-bezier(.32,1.2,.4,1),
             box-shadow .28s cubic-bezier(.32,1.2,.4,1), background .28s;
  -webkit-appearance:none; appearance:none;
}
#secretInput::placeholder{ color:rgba(74,59,63,.3); letter-spacing:.3em; font-weight:500; }
#secretInput:focus{
  outline:none;
  border-color:var(--pink) !important;
  background:#fff !important;
  box-shadow:0 0 0 4px rgba(244,98,140,.14) !important;
}
html.halloween #secretInput{
  border-color:rgba(255,255,255,.14) !important;
  background:rgba(0,0,0,.35) !important;
  color:#fff !important;
}
html.halloween #secretInput::placeholder{ color:rgba(255,255,255,.22); }
html.halloween #secretInput:focus{
  border-color:rgba(255,150,60,.7) !important;
  background:rgba(0,0,0,.5) !important;
  box-shadow:0 0 0 4px rgba(255,122,24,.16) !important;
}

.secret-field.bad #secretInput{
  border-color:rgba(239,68,68,.75) !important;
  box-shadow:0 0 0 4px rgba(239,68,68,.14) !important;
  animation:secretNudge .45s cubic-bezier(.36,.07,.19,.97);
}
.secret-field.ok #secretInput{
  border-color:rgba(16,185,129,.75) !important;
  box-shadow:0 0 0 4px rgba(16,185,129,.14) !important;
}
@keyframes secretNudge{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-8px); } 40%{ transform:translateX(7px); }
  60%{ transform:translateX(-4px); } 80%{ transform:translateX(2px); }
}

#secretSubmit{
  width:100%; margin-top:14px; padding:16px !important;
  border-radius:18px !important; border:none !important;
  font-family:'Prompt',sans-serif !important; font-size:16px !important; font-weight:800 !important;
  color:#fff !important;
  background:linear-gradient(135deg, var(--pink), var(--pink-deep)) !important;
  box-shadow:0 8px 26px rgba(244,98,140,.32), inset 0 1px 0 rgba(255,255,255,.4) !important;
  transition:transform .2s cubic-bezier(.32,1.3,.4,1), filter .2s;
  animation:secretFadeUp .5s cubic-bezier(.32,1.2,.4,1) .3s both;
  will-change:transform; cursor:pointer;
}
html.halloween #secretSubmit{
  background:linear-gradient(135deg,#ff8c2b,#e8490c) !important;
  box-shadow:0 8px 26px rgba(232,73,12,.42), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
#secretSubmit:hover{ filter:brightness(1.08); }
#secretSubmit:active{ transform:scale(.96); }
#secretSubmit:disabled{ opacity:.6; pointer-events:none; }

.secret-msg{
  display:none; margin-top:14px; padding:13px 16px;
  border-radius:15px; font-size:13px; font-weight:600;
  text-align:center; line-height:1.6;
}
.secret-msg.show{ display:block; animation:secretFadeUp .35s cubic-bezier(.32,1.2,.4,1) both; }
.secret-msg.ok{ background:rgba(16,185,129,.12); color:#047857; border:1px solid rgba(16,185,129,.25); }
.secret-msg.bad{ background:rgba(239,68,68,.1); color:#b91c1c; border:1px solid rgba(239,68,68,.22); }
html.halloween .secret-msg.ok{ background:rgba(16,185,129,.16); color:#6ee7b7; border-color:rgba(52,211,153,.3); }
html.halloween .secret-msg.bad{ background:rgba(239,68,68,.14); color:#fca5a5; border-color:rgba(248,113,113,.3); }

.secret-hint{
  margin-top:18px; padding-top:16px;
  border-top:1px solid rgba(74,59,63,.1);
  font-size:11.5px; color:var(--ink-soft);
  text-align:center; line-height:1.85;
  animation:secretFadeUp .5s cubic-bezier(.32,1.2,.4,1) .36s both;
}
.secret-hint b{ color:var(--pink-deep); }
html.halloween .secret-hint{ border-top-color:rgba(255,255,255,.08); color:rgba(255,235,215,.42); }
html.halloween .secret-hint b{ color:rgba(255,207,150,.8); }

.secret-modal .modal-close{
  width:32px !important; height:32px !important;
  border-radius:50% !important;
  background:rgba(74,59,63,.07) !important;
  border:1px solid rgba(74,59,63,.1) !important;
  color:var(--ink-soft) !important;
  transition:background .2s, transform .2s cubic-bezier(.32,1.3,.4,1);
}
.secret-modal .modal-close:hover{ background:rgba(74,59,63,.13) !important; transform:scale(1.08); }
.secret-modal .modal-close:active{ transform:scale(.92); }
html.halloween .secret-modal .modal-close{
  background:rgba(255,255,255,.1) !important;
  border-color:rgba(255,255,255,.12) !important;
  color:rgba(255,255,255,.65) !important;
}
html.halloween .secret-modal .modal-close:hover{ background:rgba(255,255,255,.18) !important; }

#headerLogo{ transition:transform .2s cubic-bezier(.32,1.3,.4,1), filter .2s; will-change:transform; }
#headerLogo.secret-tap{ transform:scale(.86) rotate(-7deg); filter:drop-shadow(0 0 12px rgba(244,98,140,.8)); }
html.halloween #headerLogo.secret-tap{ filter:drop-shadow(0 0 12px rgba(255,140,40,.9)); }

@media (prefers-reduced-motion: reduce){
  .secret-modal, .secret-lock, .secret-title, .secret-sub,
  .secret-field, #secretSubmit, .secret-hint, .secret-msg.show{ animation:none !important; }
}
@media (max-width:480px){
  .secret-modal{ max-width:100%; padding:26px 20px 22px !important; border-radius:26px !important; }
  .secret-lock{ width:64px; height:64px; } .secret-lock svg{ width:29px; height:29px; }
  .secret-title{ font-size:19px; }
}

/* =====================================================================
   🛟 กันหน้าเปล่า — ถ้า GSAP ไม่ทำงาน ต้องเห็นเนื้อหาเสมอ
===================================================================== */
html.no-gsap .reveal,
html.no-gsap .stagger > *{ opacity:1 !important; transform:none !important; }
html.no-gsap .site-header,
html.no-gsap .nav-links li,
html.no-gsap .nav-actions,
html.no-gsap .nav-special,
html.no-gsap .nav-galaxy,
html.no-gsap .hero-card{ opacity:1 !important; transform:none !important; animation:none !important; }

/* =====================================================================
   🔑 SECRET CODE MANAGER (เจ้าของเท่านั้น)
===================================================================== */
.secret-admin-toggle{
  display:none; width:100%; margin-top:14px; padding:12px !important;
  border-radius:16px !important; border:1px dashed rgba(74,59,63,.22) !important;
  background:rgba(74,59,63,.04) !important;
  font-family:'Prompt',sans-serif !important; font-size:13px !important; font-weight:700 !important;
  color:var(--ink-soft) !important; cursor:pointer;
  transition:background .2s, border-color .2s, transform .18s cubic-bezier(.32,1.3,.4,1);
}
.secret-admin-toggle.show{ display:flex; align-items:center; justify-content:center; gap:8px; }
.secret-admin-toggle:hover{ background:rgba(244,98,140,.08) !important; border-color:var(--pink) !important; color:var(--pink-deep) !important; }
.secret-admin-toggle:active{ transform:scale(.97); }
.secret-admin-toggle svg{ width:15px; height:15px; }
html.halloween .secret-admin-toggle{
  border-color:rgba(255,255,255,.16) !important;
  background:rgba(255,255,255,.05) !important;
  color:rgba(255,235,215,.55) !important;
}
html.halloween .secret-admin-toggle:hover{
  background:rgba(255,122,24,.12) !important;
  border-color:rgba(255,150,60,.5) !important; color:#ffcf96 !important;
}

/* ---- แผงจัดการ ---- */
.secret-admin{
  display:none; margin-top:16px; padding-top:16px;
  border-top:1px solid rgba(74,59,63,.1);
  animation:secretFadeUp .4s cubic-bezier(.32,1.2,.4,1) both;
}
.secret-admin.open{ display:block; }
html.halloween .secret-admin{ border-top-color:rgba(255,255,255,.1); }

.sa-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px;
}
.sa-head b{ font-family:'Prompt'; font-size:13.5px; font-weight:800; color:var(--ink); }
html.halloween .sa-head b{ color:#fff3e2; }
.sa-head span{ font-size:11px; color:var(--ink-soft); }

/* ฟอร์มเพิ่มรหัส */
.sa-form{ display:flex; flex-direction:column; gap:9px; margin-bottom:14px; }
.sa-form input{
  width:100%; padding:13px 15px !important;
  border-radius:14px !important;
  border:1.5px solid rgba(74,59,63,.13) !important;
  background:rgba(255,255,255,.8) !important;
  color:var(--ink) !important;
  font-family:'Sarabun',sans-serif !important; font-size:13.5px !important;
  transition:border-color .22s, box-shadow .22s;
  -webkit-appearance:none; appearance:none;
}
.sa-form input::placeholder{ color:rgba(74,59,63,.34); }
.sa-form input:focus{
  outline:none; border-color:var(--pink) !important;
  box-shadow:0 0 0 3.5px rgba(244,98,140,.13) !important;
}
html.halloween .sa-form input{
  border-color:rgba(255,255,255,.14) !important;
  background:rgba(0,0,0,.3) !important; color:#fff !important;
}
html.halloween .sa-form input::placeholder{ color:rgba(255,255,255,.26); }
html.halloween .sa-form input:focus{
  border-color:rgba(255,150,60,.65) !important;
  box-shadow:0 0 0 3.5px rgba(255,122,24,.14) !important;
}
.sa-form input.sa-code{ font-family:'Prompt',sans-serif !important; font-weight:700 !important; letter-spacing:.06em; }

.sa-add{
  padding:13px !important; border-radius:14px !important; border:none !important;
  font-family:'Prompt',sans-serif !important; font-size:14px !important; font-weight:800 !important;
  color:#fff !important;
  background:linear-gradient(135deg,#22c55e,#15803d) !important;
  box-shadow:0 6px 18px rgba(34,197,94,.3) !important;
  transition:transform .18s cubic-bezier(.32,1.3,.4,1), filter .2s; cursor:pointer;
}
.sa-add:hover{ filter:brightness(1.1); }
.sa-add:active{ transform:scale(.97); }
.sa-add:disabled{ opacity:.55; pointer-events:none; }

/* รายการรหัส */
.sa-list{ display:flex; flex-direction:column; gap:8px; max-height:250px; overflow-y:auto; padding-right:2px; }
.sa-item{
  display:flex; align-items:center; gap:11px;
  padding:11px 13px; border-radius:14px;
  background:rgba(74,59,63,.045); border:1px solid rgba(74,59,63,.09);
  transition:border-color .2s, background .2s;
}
.sa-item:hover{ border-color:rgba(244,98,140,.35); background:rgba(244,98,140,.05); }
html.halloween .sa-item{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); }
html.halloween .sa-item:hover{ border-color:rgba(255,150,60,.4); background:rgba(255,122,24,.08); }
.sa-item.off{ opacity:.5; }

.sa-item-body{ flex:1 1 auto; min-width:0; }
.sa-item-code{
  font-family:'Prompt',sans-serif; font-size:13.5px; font-weight:800;
  color:var(--pink-deep); letter-spacing:.04em;
}
html.halloween .sa-item-code{ color:#ffb347; }
.sa-item-label{
  font-size:11.5px; color:var(--ink-soft); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sa-item-url{
  font-size:10.5px; color:var(--ink-soft); opacity:.65; margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sa-item-uses{
  flex:0 0 auto; font-size:10.5px; font-weight:700; color:var(--ink-soft);
  padding:4px 9px; border-radius:999px; background:rgba(74,59,63,.08);
}
html.halloween .sa-item-uses{ background:rgba(255,255,255,.1); color:rgba(255,235,215,.6); }

.sa-btn{
  flex:0 0 auto; width:30px; height:30px; border-radius:9px; border:none;
  display:flex; align-items:center; justify-content:center;
  background:rgba(74,59,63,.08); color:var(--ink-soft);
  transition:all .18s cubic-bezier(.32,1.3,.4,1); cursor:pointer;
}
.sa-btn:hover{ transform:scale(1.1); }
.sa-btn:active{ transform:scale(.9); }
.sa-btn svg{ width:14px; height:14px; }
.sa-btn.del:hover{ background:rgba(239,68,68,.16); color:#dc2626; }
.sa-btn.toggle:hover{ background:rgba(34,197,94,.16); color:#16a34a; }
html.halloween .sa-btn{ background:rgba(255,255,255,.1); color:rgba(255,235,215,.6); }

.sa-empty{ text-align:center; padding:20px; font-size:12.5px; color:var(--ink-soft); }
.sa-msg{
  display:none; margin-top:10px; padding:11px 14px; border-radius:13px;
  font-size:12.5px; font-weight:600; text-align:center;
}
.sa-msg.show{ display:block; }
.sa-msg.ok{ background:rgba(16,185,129,.12); color:#047857; }
.sa-msg.bad{ background:rgba(239,68,68,.1); color:#b91c1c; }
html.halloween .sa-msg.ok{ background:rgba(16,185,129,.16); color:#6ee7b7; }
html.halloween .sa-msg.bad{ background:rgba(239,68,68,.14); color:#fca5a5; }

.secret-modal.admin-open{ max-width:470px; }

/* =====================================================================
   ⚡ PERFORMANCE PASS — ลดภาระ CPU/GPU โดยไม่ตัดฟังก์ชัน
===================================================================== */

/* 1) แท็บซ่อนอยู่ = หยุดแอนิเมชันทุกตัวในเว็บ ประหยัดแบตและ CPU */
html.tab-hidden *,
html.tab-hidden *::before,
html.tab-hidden *::after{
  animation-play-state:paused !important;
}

/* 2) ส่วนที่ยังไม่เลื่อนมาถึง ไม่ต้องคำนวณ layout/paint */
#works, #news, .footer-shell{
  content-visibility:auto;
  contain-intrinsic-size:1px 900px;
}

/* 3) กันภาพกระตุกตอนโหลด (layout shift) */
.thumb img, .admin-list-item img, .carousel-card .thumb img{
  aspect-ratio:16/9; object-fit:cover;
}
.avatar-initials img, .profile-chip img{ aspect-ratio:1/1; }

/* 4) มือถือ: เอฟเฟกต์กระจกเบาลง (backdrop-filter แพงที่สุดบนมือถือ) */
@media (max-width:820px){
  .glass, .glass-strong, .nav-shell, .modal, .chat-panel, .profile-dropdown{
    -webkit-backdrop-filter:blur(7px) !important;
    backdrop-filter:blur(7px) !important;
  }
  /* เงาซ้อนหลายชั้นบนมือถือกินแรง ลดเหลือชั้นเดียว */
  .evt-card, .sa-item, .audit-row, .role-user-row{ box-shadow:none !important; }
}

/* 5) เครื่องที่แจ้งว่าอยากประหยัด/จอไม่ไหว → ปิดกระจกกับแอนิเมชันวนซ้ำ */
@media (prefers-reduced-transparency: reduce){
  .glass, .glass-strong, .nav-shell, .modal{
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
}

/* 6) โหมดประหยัดของเว็บ — ตัดของหนักทิ้งให้หมด แต่ระบบยังครบ */
html.perf-mode .aurora-bg,
html.perf-mode .pcs-banner,
html.perf-mode .hw-layer{ display:none !important; }
html.perf-mode *,
html.perf-mode *::before,
html.perf-mode *::after{
  animation:none !important;
  transition-duration:.01ms !important;
}
html.perf-mode .glass, html.perf-mode .glass-strong,
html.perf-mode .nav-shell, html.perf-mode .modal{
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  background:var(--paper) !important;
}

/* 7) เลื่อนลื่นขึ้นบนมือถือ */
.carousel-track, .chat-panel-body, .sa-list, .audit-list, .evt-shop{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

/* =====================================================================
   💰 HEADER PURSE — Key + แคนดี้ (โชว์เฉพาะธีม Halloween)
===================================================================== */
.evt-purse{ display:none; align-items:center; gap:7px; flex:0 0 auto; }
html.halloween .evt-purse{ display:flex; }

.evt-pill{
  display:inline-flex; align-items:center; gap:6px;
  height:34px; padding:0 12px 0 9px;
  border-radius:11px;
  background:#0b0714;
  font-family:'Chakra Petch','Prompt',sans-serif;
  font-weight:700; font-size:14px; line-height:1;
  font-variant-numeric:tabular-nums;
  transition:transform .2s cubic-bezier(.2,.9,.3,1.4), box-shadow .2s;
}
.evt-pill:hover{ transform:translateY(-2px); }
.evt-pill b{ font-weight:700; }
.evt-pill svg{ width:17px; height:17px; flex:0 0 auto; }
.evt-pill img{ width:21px; height:auto; flex:0 0 auto; display:block; }

/* Key — กรอบเหลือง พื้นดำ */
.evt-pill.key{
  border:1.5px solid #fbbf24;
  color:#fbbf24;
  box-shadow:0 0 12px rgba(251,191,36,.28), inset 0 1px 0 rgba(255,225,150,.12);
}
.evt-pill.key:hover{ box-shadow:0 0 20px rgba(251,191,36,.5), inset 0 1px 0 rgba(255,225,150,.18); }

/* แคนดี้ — กรอบส้ม พื้นดำ */
.evt-pill.candy{
  border:1.5px solid #ff8a1f;
  color:#ffb056;
  box-shadow:0 0 12px rgba(255,138,31,.28), inset 0 1px 0 rgba(255,200,150,.12);
}
.evt-pill.candy:hover{ box-shadow:0 0 20px rgba(255,138,31,.5), inset 0 1px 0 rgba(255,200,150,.18); }

/* เด้งตอนตัวเลขเปลี่ยน */
.evt-pill b.bump{ display:inline-block; animation:popNum .5s cubic-bezier(.2,.9,.3,1.4); }

@media (max-width:1080px){
  .evt-pill{ height:30px; padding:0 10px 0 7px; font-size:12.5px; gap:5px; }
  .evt-pill svg{ width:15px; height:15px; } .evt-pill img{ width:18px; }
}
@media (max-width:900px){
  .site-header .evt-purse{ display:none !important; }   /* จอแคบใช้ในเมนูมือถือแทน */
}
#mobileMenu .evt-purse{ justify-content:center; }
html.halloween #mobileMenu .evt-purse{ display:flex; }

/* ป้ายบอกว่า Key เอาไว้ทำอะไร */
.evt-keynote{
  display:flex; align-items:center; gap:10px;
  margin-top:12px; padding:10px 13px; border-radius:14px;
  background:rgba(251,191,36,.09);
  border:1px dashed rgba(251,191,36,.42);
  color:#fcd34d; font-size:11.5px; line-height:1.55; text-align:left;
}
.evt-keynote svg{ width:22px; height:22px; flex:0 0 auto; }
.evt-keynote b{ font-weight:700; color:#fde68a; }

/* กล่อง Key ตอนรับไปแล้ว */
.evt-keynote.got{
  background:rgba(74,222,128,.09);
  border-color:rgba(74,222,128,.45);
  color:#86efac;
}
.evt-keynote.got b{ color:#bbf7d0; }

/* =====================================================================
   🎁 การ์ดรางวัลสะสม — SECRET KEY (10 วัน) / รางวัล 30 วัน
===================================================================== */
.evt-milestones{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; margin-top:16px; }
.evt-ms-card{
  position:relative; display:flex; align-items:center; gap:12px;
  padding:14px; border-radius:18px; min-width:0;
  background:linear-gradient(168deg, rgba(40,18,72,.65), rgba(14,6,28,.7));
  border:1px solid rgba(190,150,255,.18);
  transition:border-color .25s ease, box-shadow .25s ease;
}
.evt-ms-ico{
  width:46px; height:46px; border-radius:14px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
}
.evt-ms-ico svg{ width:24px; height:24px; }
.ms-key .evt-ms-ico{ color:#fbbf24; background:rgba(251,191,36,.12); border:1px solid rgba(251,191,36,.35); }
.ms-30  .evt-ms-ico{ color:#ff9f45; background:rgba(255,138,31,.12); border:1px solid rgba(255,138,31,.35); }

.evt-ms-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.evt-ms-body b{ font-family:'Chakra Petch',sans-serif; font-size:14px; color:#fff; letter-spacing:.03em; }
.evt-ms-body em{ font-style:normal; font-size:11.5px; color:rgba(220,205,255,.65); line-height:1.4; }
.evt-ms-bar{ height:5px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; margin-top:5px; }
.evt-ms-bar i{ display:block; height:100%; width:0; border-radius:inherit; transition:width .6s cubic-bezier(.2,.8,.2,1); }
.ms-key .evt-ms-bar i{ background:linear-gradient(90deg,#fde68a,#fbbf24); }
.ms-30  .evt-ms-bar i{ background:linear-gradient(90deg,#ffb96e,#ff6a00); }

.evt-ms-btn{
  flex:0 0 auto; min-width:78px; height:36px; padding:0 14px; border-radius:12px; border:none;
  font-family:'Kanit',sans-serif; font-weight:600; font-size:13px; cursor:pointer;
  color:rgba(230,220,255,.6); background:rgba(255,255,255,.06);
  font-variant-numeric:tabular-nums; transition:transform .15s ease, box-shadow .2s ease;
}
.evt-ms-btn:disabled{ cursor:default; }
.evt-ms-btn:not(:disabled):hover{ transform:translateY(-2px); }

/* พร้อมรับ: เรืองแสง + ปุ่มเด่น */
.evt-ms-card.is-ready{ animation:msGlow 2.4s ease-in-out infinite; }
.ms-key.is-ready{ border-color:rgba(251,191,36,.6); }
.ms-30.is-ready{ border-color:rgba(255,138,31,.6); }
.ms-key.is-ready .evt-ms-btn{ color:#3b2a00; background:linear-gradient(135deg,#fde68a,#fbbf24); box-shadow:0 4px 14px rgba(251,191,36,.45); }
.ms-30.is-ready  .evt-ms-btn{ color:#fff; background:linear-gradient(135deg,#ff9f45,#e8590c); box-shadow:0 4px 14px rgba(255,106,0,.45); }
@keyframes msGlow{ 0%,100%{ box-shadow:0 0 0 rgba(255,170,60,0); } 50%{ box-shadow:0 0 22px rgba(255,170,60,.28); } }

/* รับแล้ว */
.evt-ms-card.is-done{ border-color:rgba(74,222,128,.35); }
.evt-ms-card.is-done .evt-ms-btn{ color:#4ade80; background:rgba(74,222,128,.1); }

@media (max-width:480px){
  .evt-milestones{ grid-template-columns:1fr; }
  .evt-ms-card{ padding:12px; gap:10px; }
  .evt-ms-ico{ width:40px; height:40px; }
  .evt-ms-btn{ min-width:70px; height:34px; font-size:12.5px; padding:0 10px; }
}
@media (prefers-reduced-motion: reduce){ .evt-ms-card.is-ready{ animation:none; } }

/* =====================================================================
   📱 แก้ปุ่ม Event Halloween ล้นกรอบ Island บนจอแคบ
   (กฎ html.halloween ... display:flex !important ไปทับการซ่อนบนมือถือ)
===================================================================== */
@media (max-width:900px){
  html.halloween .nav-galaxy.evt-only a{ padding-left:10px !important; padding-right:10px !important; gap:0 !important; }
  html.halloween .nav-galaxy.evt-only a > span:not(.evt-nav-ico){ display:none; }  /* เหลือแค่ไอคอนลูกอม */
}
@media (max-width:720px){
  html.halloween .nav-galaxy.evt-only{ display:none !important; }  /* มือถือ: ใช้ปุ่มในเมนูแทน */
}
html.halloween .mobile-menu .special-mobile.evt-only{
  justify-content:center; text-align:center; white-space:normal;
  color:#fff7ea !important; border-radius:14px;
  background:linear-gradient(135deg,#7a2d06 0%,#c2410c 45%,#ff8a1f 100%);
  box-shadow:0 6px 18px rgba(232,73,12,.35);
  max-width:100%; box-sizing:border-box;
}

/* =====================================================================
   🎨 HALLOWEEN CONTRAST PASS — แก้ตัวอักษรกลืนพื้น
   ธีม Halloween เปลี่ยนตัวอักษรเป็นสีอ่อน แต่หลายจุดยังใช้พื้นขาวตายตัว
   (เมนู 3 ขีด, ฟองแชท, ช่องพิมพ์, ปุ่ม ghost ฯลฯ) → เปลี่ยนเป็นพื้นมืดโปร่ง
===================================================================== */
html.halloween{ --hw-surface:rgba(255,255,255,.06); --hw-surface-hover:rgba(255,255,255,.12); --hw-accent:#ffb26b; }

/* ปุ่มทั่วไป / ปุ่มบนหัวเว็บ */
html.halloween .btn-ghost,
html.halloween .nav-toggle,
html.halloween .profile-chip,
html.halloween .profile-menu-btn,
html.halloween .notif-btn{ background:var(--hw-surface); color:var(--ink); border-color:var(--line); }
html.halloween .btn-ghost:hover,
html.halloween .profile-chip:hover,
html.halloween .profile-menu-btn:hover,
html.halloween .notif-btn:hover{ background:var(--hw-surface-hover); }
html.halloween .nav-toggle svg{ color:var(--ink); }
html.halloween .nav-links a.nav-link:hover{ background:var(--hw-surface-hover); color:var(--hw-accent); }

/* เมนู 3 ขีด (มือถือ) */
html.halloween .mobile-menu{ background:rgba(18,11,28,.94); }
html.halloween .mobile-menu a{ color:var(--ink); }
html.halloween .mobile-menu a:hover,
html.halloween .mobile-menu a.active{ background:rgba(255,138,31,.14); color:var(--hw-accent); }
html.halloween .mobile-menu .special-mobile:not(.evt-only){ color:var(--hw-accent); }
html.halloween .perf-mobile-row,
html.halloween .mobile-profile-row{ background:var(--hw-surface); color:var(--ink); }
html.halloween .perf-mobile-row .pmr-label b{ color:var(--ink); }

/* เมนูโปรไฟล์ดรอปดาวน์ */
html.halloween .profile-dropdown{ background:rgba(20,13,30,.97); color:var(--ink); border-color:var(--glass-border); }

/* แชท */
html.halloween .chat-bubble.theirs{ background:rgba(255,255,255,.09); color:var(--ink); border-color:rgba(255,180,120,.18); }
html.halloween .chat-bubble.mine{ color:#fff; }
html.halloween .chat-panel-foot input,
html.halloween .chat-thread-select select{ background:var(--hw-surface); color:var(--ink); border-color:var(--line); }
html.halloween .chat-panel-foot input::placeholder{ color:var(--ink-soft); }
html.halloween .chat-thread-select select option{ background:#1a1124; color:var(--ink); }
html.halloween .chat-user-profile{ background:var(--hw-surface); }
html.halloween .chat-user-profile:hover{ background:var(--hw-surface-hover); }
html.halloween .chat-user-profile .cup-info b{ color:var(--ink); }

/* ช่องกรอกข้อมูลทั้งเว็บ */
html.halloween .field input,
html.halloween .field textarea,
html.halloween .field select{ background:var(--hw-surface); color:var(--ink); }
html.halloween .field input::placeholder,
html.halloween .field textarea::placeholder{ color:var(--ink-soft); }

/* การ์ด/แถวพื้นขาวอื่นๆ */
html.halloween .social-btn,
html.halloween .btn-federated,
html.halloween .shop-badge,
html.halloween .notif-topic,
html.halloween .audit-row,
html.halloween .admin-list-item,
html.halloween .file-drop,
html.halloween .linked-acc-row{ background:var(--hw-surface); color:var(--ink); }
html.halloween .notif-topic:hover,
html.halloween .btn-federated:hover{ background:var(--hw-surface-hover); }
html.halloween .admin-tab.active,
html.halloween .dash-tab.active{ background:rgba(255,138,31,.16); color:var(--hw-accent); }
html.halloween .linked-acc-icon{ background:rgba(255,255,255,.08); }
html.halloween .linked-acc-row.is-linked{ background:rgba(74,222,128,.08); }
html.halloween .linked-acc-row.is-primary{ background:rgba(255,196,70,.09); }

/* =====================================================================
   ⚠️ STREAK POPUP
===================================================================== */
#streakPopup{ z-index:120; }
.sp-card{
  position:relative; width:min(420px, calc(100vw - 32px)); margin:auto;
  padding:34px 24px 22px; border-radius:26px; text-align:center;
  color:#f6ecdf; font-family:'Kanit','Prompt',system-ui,sans-serif;
  background:
    radial-gradient(420px 220px at 50% -10%, rgba(255,138,31,.30), transparent 70%),
    radial-gradient(360px 260px at 100% 110%, rgba(150,90,255,.22), transparent 70%),
    linear-gradient(170deg, #1d1029 0%, #120a1c 100%);
  border:1px solid rgba(255,170,90,.28);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,220,180,.12);
}
#streakPopup{ background:rgba(6,3,12,.62); }
#streakPopup.open .sp-card{ animation:spIn .42s cubic-bezier(.2,.9,.3,1.25) both; }
@keyframes spIn{ from{ transform:translateY(18px) scale(.94); opacity:0; } to{ transform:none; opacity:1; } }

.sp-new{
  position:absolute; top:14px; left:16px;
  font-family:'Chakra Petch',sans-serif; font-size:11px; font-weight:700; letter-spacing:.12em;
  padding:3px 10px; border-radius:999px; color:#2b1200;
  background:linear-gradient(135deg,#ffe08a,#ff9b3d); box-shadow:0 0 14px rgba(255,155,61,.55);
  animation:spPulse 1.8s ease-in-out infinite;
}
@keyframes spPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }

.sp-icon{ display:inline-flex; position:relative; margin-bottom:10px; }
.sp-icon::before{
  content:''; position:absolute; inset:-14px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,140,40,.45), rgba(255,140,40,0));
  animation:spGlow 2.4s ease-in-out infinite;
}
.sp-icon svg{ position:relative; filter:drop-shadow(0 6px 14px rgba(255,110,20,.55)); animation:spWobble 3s ease-in-out infinite; }
@keyframes spGlow{ 0%,100%{ opacity:.55; transform:scale(.92); } 50%{ opacity:1; transform:scale(1.08); } }
@keyframes spWobble{ 0%,86%,100%{ transform:rotate(0); } 89%{ transform:rotate(-7deg); } 92%{ transform:rotate(7deg); } 95%{ transform:rotate(-4deg); } }

.sp-card h3{ font-family:'Chakra Petch','Prompt',sans-serif; font-size:21px; font-weight:700; margin:0 0 8px; color:#fff; }
.sp-lead{ font-size:13.5px; line-height:1.65; color:rgba(246,236,223,.78); margin:0 auto 16px; max-width:340px; }
.sp-lead b{ color:#ffb26b; }

.sp-list{ display:flex; flex-direction:column; gap:8px; text-align:left; margin-bottom:18px; }
.sp-row{
  display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:14px;
  font-size:13px; line-height:1.5; color:rgba(246,236,223,.85);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07);
}
.sp-row b{ color:#fff; }
.sp-ri{ width:22px; height:22px; border-radius:7px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.sp-ri svg{ width:13px; height:13px; }
.sp-row.ok   .sp-ri{ background:rgba(74,222,128,.16);  color:#4ade80; }
.sp-row.bad  .sp-ri{ background:rgba(248,113,113,.16); color:#f87171; }
.sp-row.key  .sp-ri{ background:rgba(251,191,36,.16);  color:#fbbf24; }
.sp-row.star .sp-ri{ background:rgba(255,138,31,.16);  color:#ff9b3d; }
.sp-row.bad{ border-color:rgba(248,113,113,.22); }

.sp-actions{ display:flex; flex-direction:column; gap:8px; }
.sp-btn{
  height:46px; border-radius:14px; border:none; cursor:pointer;
  font-family:'Kanit',sans-serif; font-size:15px; font-weight:600;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.sp-btn.primary{ color:#fff; background:linear-gradient(135deg,#ff9b3d,#e8490c); box-shadow:0 8px 22px rgba(232,73,12,.42); }
.sp-btn.primary:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(232,73,12,.55); }
.sp-btn.ghost{ color:rgba(246,236,223,.75); background:rgba(255,255,255,.06); }
.sp-btn.ghost:hover{ background:rgba(255,255,255,.11); }

/* โหมดขาดความต่อเนื่อง: โทนแดง */
#streakPopup.is-broken .sp-card{
  border-color:rgba(248,113,113,.35);
  background:
    radial-gradient(420px 220px at 50% -10%, rgba(239,68,68,.28), transparent 70%),
    linear-gradient(170deg, #22101a 0%, #140a12 100%);
}
#streakPopup.is-broken .sp-icon::before{ background:radial-gradient(closest-side, rgba(239,68,68,.45), rgba(239,68,68,0)); }

@media (max-width:420px){
  .sp-card{ padding:30px 16px 18px; border-radius:22px; }
  .sp-card h3{ font-size:19px; }
  .sp-row{ font-size:12.5px; }
}
@media (prefers-reduced-motion: reduce){
  .sp-new, .sp-icon::before, .sp-icon svg, #streakPopup.open .sp-card{ animation:none; }
}

/* ชิปวันต่อเนื่องในหัวตาราง + คำเน้นในการ์ดรางวัล */
.evt-streak-chip{
  display:inline-flex; align-items:center; gap:4px; margin-left:6px;
  padding:2px 9px; border-radius:999px; font-size:11.5px; text-transform:none; letter-spacing:0;
  color:#ffd6ab; background:rgba(255,122,0,.16); border:1px solid rgba(255,155,61,.4);
}
.evt-streak-chip.cold{ color:rgba(220,205,255,.6); background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); }
.evt-days-range{ flex-wrap:wrap; }
.ms-hl{ color:#ffd08a; font-weight:700; }

/* =====================================================================
   👻 EVENT HALLOWEEN PHASE 2 — ประกาศขึ้นจอ + ตัวนับมุมจอ
===================================================================== */
html.halloween .hwcd.p2.show{ display:flex !important; }
.hwcd.p2{
  cursor:pointer;
  background:linear-gradient(140deg, rgba(52,26,92,.95), rgba(20,10,36,.97));
  border-color:rgba(190,150,255,.38);
  box-shadow:0 10px 26px rgba(0,0,0,.42), 0 0 0 1px rgba(255,150,60,.08), inset 0 1px 0 rgba(220,200,255,.2);
}
.hwcd.p2 .hwcd-label{ color:#cdb6ff; }
.hwcd.p2 .hwcd-time b{ color:#ffb35c; }
.hwcd.p2 .hwcd-ico svg{ filter:drop-shadow(0 0 6px rgba(190,150,255,.75)); animation:p2Float 3.2s ease-in-out infinite; }
.hwcd.p2 .p2-eye{ animation:p2Blink 4.6s infinite; transform-origin:center; transform-box:fill-box; }
@keyframes p2Float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } }
@keyframes p2Blink{ 0%,92%,100%{ transform:scaleY(1); } 95%{ transform:scaleY(.1); } }

#phase2Popup{ z-index:121; background:rgba(6,3,14,.68); }
.p2-card{
  position:relative; width:min(400px, calc(100vw - 24px)); max-height:calc(100vh - 24px);
  overflow-x:hidden; overflow-y:auto; scrollbar-width:none;
  margin:auto; border-radius:28px; text-align:center;
  color:#f3ecff; font-family:'Prompt',system-ui,sans-serif;
  background:
    radial-gradient(120% 60% at 50% 100%, rgba(140,90,255,.20), transparent 70%),
    #130a24;
  border:1px solid rgba(200,160,255,.28);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.75), 0 0 60px -18px rgba(150,100,255,.45);
}
.p2-card::-webkit-scrollbar{ display:none; }
#phase2Popup.open .p2-card{ animation:p2In .55s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes p2In{ from{ transform:translateY(22px) scale(.93); opacity:0; } to{ transform:none; opacity:1; } }
#phase2Popup.open .p2-card.ring{ animation:p2Ring .65s cubic-bezier(.36,.07,.19,.97); }
@keyframes p2Ring{
  20%{ transform:translateX(-5px) rotate(-.6deg); }
  40%{ transform:translateX(5px) rotate(.6deg); box-shadow:0 30px 80px -20px rgba(0,0,0,.75), 0 0 90px -6px rgba(255,140,40,.75); }
  60%{ transform:translateX(-3px); } 80%{ transform:translateX(2px); }
}

.p2-x{
  position:absolute; top:14px; right:14px; z-index:3;
  width:32px; height:32px; border-radius:50%; border:none;
  background:rgba(255,255,255,.08); color:#efe6ff;
  display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.p2-x:hover{ background:rgba(255,255,255,.16); }
.p2-x svg{ width:14px; height:14px; }

/* ---------- hero ---------- */
.p2-hero{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:30px 22px 22px;
  background:
    radial-gradient(90% 75% at 50% 105%, rgba(255,140,40,.42), transparent 70%),
    linear-gradient(180deg, #3a1a52 0%, rgba(36,19,62,0) 100%);
}
.p2-hero > *{ position:relative; }
.p2-moon{
  position:absolute !important; width:80px; height:80px; left:22px; top:-34px; border-radius:50%;
  background:radial-gradient(circle at 40% 40%, #fff3d2, #ffc773);
  box-shadow:0 0 40px 2px rgba(255,190,90,.55); opacity:.9;
}
.p2-bat{ position:absolute !important; fill:#120818; }
.p2-bat.b1{ width:34px; left:96px; top:44px; animation:p2Bat 4.5s ease-in-out infinite; }
.p2-bat.b2{ width:22px; left:118px; top:22px; animation:p2Bat 5.5s ease-in-out infinite reverse; }
@keyframes p2Bat{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-6px,-4px); } }
.p2-stars{
  position:absolute !important; inset:0; pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 9% 13%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 18% 33%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 30% 10%, #fff, transparent),
    radial-gradient(2px 2px at 13% 62%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 88% 62%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 58% 15%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 5% 46%, #fff, transparent),
    radial-gradient(2px 2px at 95% 41%, #fff, transparent);
  animation:p2Twinkle 3.6s ease-in-out infinite alternate;
}
@keyframes p2Twinkle{ from{ opacity:.45; } to{ opacity:1; } }
.p2-spark{ position:absolute !important; fill:#fff; opacity:.9; animation:p2Sparkle 2.8s ease-in-out infinite; }
.p2-spark.s1{ width:12px; right:62px; top:64px; }
.p2-spark.s2{ width:10px; right:38px; top:150px; animation-delay:-1.3s; }
@keyframes p2Sparkle{ 0%,100%{ transform:scale(1) rotate(0); opacity:.9; } 50%{ transform:scale(.55) rotate(45deg); opacity:.4; } }

.p2-badge{
  display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px;
  font-size:10.5px; font-weight:600; letter-spacing:.16em; color:#ffd2a1;
  background:rgba(255,140,40,.13); border:1px solid rgba(255,160,80,.35);
}
.p2-badge i{ width:6px; height:6px; border-radius:50%; background:#ff9a3c; box-shadow:0 0 8px #ff9a3c; }
.p2-title{ margin:0; display:flex; align-items:baseline; gap:10px; line-height:.9; }
.p2-word{ font-size:36px; font-weight:800; letter-spacing:.04em; color:#fff; text-shadow:0 0 22px rgba(170,120,255,.55); }
.p2-num{
  font-size:76px; font-weight:900;
  background:linear-gradient(180deg, #ffe08a 0%, #ff8a2b 45%, #e3459b 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 6px 18px rgba(255,120,40,.45));
  animation:p2Pulse 2.6s ease-in-out infinite;
}
@keyframes p2Pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
.p2-date{
  display:inline-flex; align-items:center; gap:7px; padding:6px 14px 6px 12px; border-radius:999px;
  font-size:12.5px; font-weight:500; color:#e6dcff;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
}
.p2-date svg{ width:14px; height:14px; color:#cdb6ff; }

/* ---------- body ---------- */
.p2-body{ display:flex; flex-direction:column; align-items:stretch; gap:16px; padding:4px 20px 18px; }
.p2-cd{ display:flex; align-items:center; justify-content:center; gap:4px; }
.p2-u{
  width:74px; height:72px; flex:0 1 74px; border-radius:16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border:1px solid rgba(200,165,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.p2-u b{ font-size:28px; font-weight:700; line-height:1.1; color:#fff; font-variant-numeric:tabular-nums; text-shadow:0 0 14px rgba(255,160,70,.4); }
.p2-u b.tick{ animation:p2Tick .45s ease-out; }
@keyframes p2Tick{ from{ transform:translateY(-6px); opacity:.25; } to{ transform:none; opacity:1; } }
.p2-u span{ font-size:10.5px; font-weight:500; color:rgba(215,198,255,.75); }
.p2-colon{ font-style:normal; font-size:22px; font-weight:700; color:#ffb35c; opacity:.6; animation:p2Blink 1s steps(2) infinite; }
@keyframes p2Blink{ 50%{ opacity:.15; } }

.p2-live{
  display:none; align-items:center; justify-content:center; gap:9px; padding:14px; border-radius:16px;
  font-size:14px; font-weight:600; color:#fff;
  background:linear-gradient(135deg, rgba(255,138,43,.22), rgba(150,95,255,.22));
  border:1px solid rgba(255,170,90,.35);
}
.p2-dot{ width:9px; height:9px; border-radius:50%; background:#4ade80; animation:p2Ping 1.6s infinite; }
@keyframes p2Ping{ 0%{ box-shadow:0 0 0 0 rgba(74,222,128,.55); } 100%{ box-shadow:0 0 0 10px rgba(74,222,128,0); } }
#phase2Popup.is-live .p2-u{ border-color:rgba(255,120,120,.32); }
#phase2Popup.is-live .p2-u b{ text-shadow:0 0 14px rgba(255,80,90,.5); }
#phase2Popup.is-live .p2-live{ display:flex; }

.p2-head{ display:flex; align-items:center; gap:10px; font-size:12.5px; font-weight:600; letter-spacing:.03em; color:#ffc690; }
.p2-head::before, .p2-head::after{ content:""; flex:1; height:1px; }
.p2-head::before{ background:linear-gradient(90deg, transparent, rgba(255,180,110,.5)); }
.p2-head::after{ background:linear-gradient(90deg, rgba(255,180,110,.5), transparent); }

.p2-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.p2-tile{
  display:flex; flex-direction:column; text-align:left; padding:8px 8px 12px; border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.09);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.2), border-color .3s, box-shadow .3s;
}
.p2-tile:hover{ transform:translateY(-3px); border-color:rgba(200,165,255,.35); box-shadow:0 14px 28px -14px rgba(150,100,255,.6); }
.p2-art{ position:relative; aspect-ratio:172/90; border-radius:14px; overflow:hidden; margin-bottom:10px; background:#2a1747; }
.p2-art img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.p2-tile:hover .p2-art img{ transform:scale(1.06); }
.p2-art em{
  position:absolute; left:8px; top:8px; padding:3px 8px; border-radius:999px;
  font-style:normal; font-size:9px; font-weight:800; letter-spacing:.12em; color:#1d0f2e;
  background:linear-gradient(90deg, #ffd27a, #ff8a2b); box-shadow:0 4px 10px rgba(255,115,25,.45);
}
.p2-tile b{ padding:0 4px; font-size:14px; font-weight:600; line-height:1.3; color:#fff; }
.p2-tile small{ padding:0 4px; margin-top:2px; font-size:11.5px; line-height:1.35; color:rgba(220,205,255,.7); }
#phase2Popup.open .p2-tile{ animation:p2Row .5s cubic-bezier(.2,.9,.3,1) both; }
#phase2Popup.open .p2-tile:nth-child(2){ animation-delay:.07s; }
#phase2Popup.open .p2-tile:nth-child(3){ animation-delay:.14s; }
#phase2Popup.open .p2-tile:nth-child(4){ animation-delay:.21s; }
@keyframes p2Row{ from{ transform:translateY(12px); opacity:0; } to{ transform:none; opacity:1; } }

.p2-cta{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:14px; border:none; border-radius:16px;
  font:600 15px 'Prompt',sans-serif; color:#fff; cursor:pointer;
  background:linear-gradient(90deg, #ffa040 0%, #ef5a12 55%, #b23ad8 100%);
  box-shadow:0 10px 26px -4px rgba(230,77,26,.45);
  transition:transform .2s, box-shadow .2s;
}
.p2-cta:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -4px rgba(230,77,26,.6); }
.p2-cta svg{ width:18px; height:18px; transition:transform .2s; }
.p2-cta:hover svg{ transform:translateX(3px); }
.p2-later{
  margin-top:-8px; padding:8px; border:none; background:none; cursor:pointer;
  font:500 13.5px 'Prompt',sans-serif; color:rgba(230,220,255,.65);
}
.p2-later:hover{ color:#fff; }

@media (max-width:420px){
  .p2-hero{ padding:26px 16px 18px; gap:8px; }
  .p2-word{ font-size:30px; } .p2-num{ font-size:62px; }
  .p2-moon{ width:66px; height:66px; left:14px; }
  .p2-bat.b1{ left:76px; } .p2-bat.b2{ left:96px; }
  .p2-body{ padding:2px 14px 14px; gap:14px; }
  .p2-u{ height:64px; border-radius:14px; } .p2-u b{ font-size:24px; } .p2-u span{ font-size:9.5px; }
  .p2-colon{ font-size:18px; }
  .p2-grid{ gap:10px; } .p2-tile{ border-radius:18px; padding:7px 7px 10px; }
  .p2-tile b{ font-size:13px; } .p2-tile small{ font-size:11px; }
}
@media (max-height:700px){
  .p2-hero{ padding-top:22px; padding-bottom:14px; }
  .p2-num{ font-size:56px; } .p2-word{ font-size:28px; }
  .p2-body{ gap:12px; }
}
@media (prefers-reduced-motion: reduce){
  .p2-stars, .p2-num, .p2-dot, .p2-bat, .p2-spark, .p2-colon,
  .hwcd.p2 .hwcd-ico svg, .hwcd.p2 .p2-eye,
  #phase2Popup.open .p2-card, #phase2Popup.open .p2-card.ring, #phase2Popup.open .p2-tile, .p2-u b.tick{ animation:none !important; }
}

/* =====================================================================
   🎃 PHASE 2 — การ์ดรางวัลในร้าน + กรอบ Halloween + ยศบนเว็บ
===================================================================== */
.evt-card.p2c{ align-items:stretch; text-align:left; gap:8px; padding:12px 12px 16px; }
.evt-card.p2c .evt-card-name{ text-align:left; padding:0 4px; }
.evt-card.p2c .evt-card-price{ align-self:flex-start; margin:0 4px; }
.p2c-art{ position:relative; aspect-ratio:172/90; border-radius:16px; overflow:hidden; background:#22123a; }
.p2c-art img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.evt-card.p2c:hover .p2c-art img{ transform:scale(1.05); }
.p2c-tag{
  position:absolute; left:10px; top:10px; padding:4px 10px; border-radius:999px;
  font:700 10px 'Prompt',sans-serif; letter-spacing:.1em; color:#1d0f2e;
  background:linear-gradient(90deg,#ffd27a,#ff8a2b); box-shadow:0 4px 12px rgba(255,115,25,.45);
}
.p2c-tag.soon{ color:#fff; letter-spacing:.02em; background:rgba(20,10,36,.82); border:1px solid rgba(200,165,255,.45); box-shadow:none; backdrop-filter:blur(6px); }
.p2c-sub{ padding:0 4px; font-size:12.5px; color:rgba(225,210,255,.75); }
.p2c-detail{ padding:0 4px; font-size:11.5px; line-height:1.55; color:rgba(215,200,250,.55); }
.evt-card.p2c.is-soon{ border-style:dashed; border-color:rgba(200,165,255,.35); }
.evt-claim.dl{ background:linear-gradient(90deg,#22c55e,#16a34a); box-shadow:0 8px 20px -6px rgba(34,197,94,.55); }
.evt-ghost-btn{
  margin-top:2px; padding:8px; border-radius:12px; border:1px dashed rgba(255,190,120,.45);
  background:rgba(255,140,40,.08); color:#ffd2a1; font:600 12px 'Prompt',sans-serif; cursor:pointer;
}
.evt-ghost-btn:hover{ background:rgba(255,140,40,.16); }
.evt-card.is-stuck{ border-color:rgba(251,191,36,.45); }
.evt-card.is-stuck .evt-card-note{ color:#fcd34d; }

/* กรอบ Halloween รอบรูปโปรไฟล์ */
html.has-frame-h26 #chipAvatar,
html.has-frame-h26 #mobileChipAvatar,
html.has-frame-h26 #profileAvatarPreview{
  box-shadow:0 0 0 2px #1a0c26, 0 0 0 4px #ff8a2b, 0 0 0 6px #b23ad8, 0 0 16px 4px rgba(255,138,43,.45);
  animation:h26Glow 2.8s ease-in-out infinite;
}
@keyframes h26Glow{ 50%{ box-shadow:0 0 0 2px #1a0c26, 0 0 0 4px #ffb35c, 0 0 0 6px #e3459b, 0 0 22px 6px rgba(178,58,216,.5); } }
html.has-frame-h26 #avatarEditWrap{ position:relative; }
html.has-frame-h26 #avatarEditWrap::after{
  content:"HALLOWEEN 2026"; position:absolute; left:50%; bottom:-14px; transform:translateX(-50%);
  white-space:nowrap; padding:3px 10px; border-radius:999px;
  font:800 9.5px 'Prompt',sans-serif; letter-spacing:.12em; color:#1d0f2e;
  background:linear-gradient(90deg,#ffd27a,#ff8a2b 55%,#e3459b); box-shadow:0 4px 12px rgba(255,115,25,.45);
}
@media (prefers-reduced-motion: reduce){ html.has-frame-h26 #chipAvatar, html.has-frame-h26 #mobileChipAvatar, html.has-frame-h26 #profileAvatarPreview{ animation:none; } }

/* =====================================================================
   🎡 DAILY SPIN — วงล้อนำโชค (ตามดีไซน์ Figma "Daily Spin Wheel")
===================================================================== */
.evt-panelbox.wh-box{
  display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
  background:
    radial-gradient(70% 45% at 50% 55%, rgba(255,138,43,.18), transparent 70%),
    linear-gradient(180deg, #2a1447 0%, #120a22 100%);
  border:1px solid rgba(200,160,255,.28);
}
.wh-head{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.wh-eyebrow{ font:600 11px 'Prompt',sans-serif; letter-spacing:.18em; color:#ffc690; }
.wh-title{ margin:0; font:700 24px 'Prompt',sans-serif; color:#fff; }
.wh-sub{ margin:0; font-size:12.5px; color:rgba(220,205,255,.75); }

.wh-stage{ position:relative; width:min(320px, 82vw); aspect-ratio:320/336; }
.wh-glow{ position:absolute; left:3%; right:3%; top:8%; bottom:-2%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,138,43,.45), transparent 65%); filter:blur(18px); }
.wh-rot{ position:absolute; left:0; right:0; top:4.76%; aspect-ratio:1; will-change:transform;
  transition:transform 4.6s cubic-bezier(.12,.9,.18,1); }
.wh-rot img{ width:100%; height:100%; display:block; filter:drop-shadow(0 18px 30px rgba(0,0,0,.55)); }
.wh-bulbs{ position:absolute; left:0; right:0; top:4.76%; aspect-ratio:1; pointer-events:none; }
.wh-bulbs i{ position:absolute; width:2.2%; height:2.2%; margin:-1.1% 0 0 -1.1%; border-radius:50%;
  background:#fff6d6; box-shadow:0 0 6px 1px rgba(255,220,140,.9); animation:whBlink 1.2s steps(2) infinite; }
.wh-bulbs i:nth-child(even){ background:#ffd27a; animation-delay:.6s; }
.wh-stage.spinning .wh-bulbs i{ animation-duration:.3s; }
@keyframes whBlink{ 50%{ opacity:.35; box-shadow:none; } }
.wh-ptr{ position:absolute; left:50%; top:0; width:13.75%; transform:translateX(-50%); z-index:3;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.5)); transform-origin:50% 30%; }
.wh-stage.spinning .wh-ptr{ animation:whTick .16s ease-in-out infinite alternate; }
@keyframes whTick{ from{ transform:translateX(-50%) rotate(-6deg); } to{ transform:translateX(-50%) rotate(4deg); } }
.wh-hub{ position:absolute; left:50%; top:52.38%; width:18.75%; aspect-ratio:1;
  transform:translate(-50%,-50%); z-index:2; border:none; border-radius:50%; cursor:pointer;
  font:800 15px 'Prompt',sans-serif; color:#3a1505; background:transparent; }
.wh-hub:disabled{ cursor:default; }

.wh-odds{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.wh-odds span{ display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:999px;
  font-size:11px; color:rgba(220,205,255,.7); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }
.wh-odds i{ width:7px; height:7px; border-radius:50%; }
.wh-odds b{ font-size:12px; color:#fff; }
.wh-btn{ width:min(336px,100%); padding:15px; border:none; border-radius:16px; cursor:pointer;
  font:700 16px 'Prompt',sans-serif; color:#fff;
  background:linear-gradient(90deg,#ffa040 0%,#ef5a12 55%,#b23ad8 100%);
  box-shadow:0 10px 26px -4px rgba(230,77,26,.45); transition:transform .2s, box-shadow .2s, filter .2s; }
.wh-btn:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 14px 30px -4px rgba(230,77,26,.6); }
.wh-btn:disabled{ cursor:default; filter:grayscale(.6) brightness(.8); box-shadow:none; }
.wh-note{ margin:-4px 0 0; font-size:11.5px; color:rgba(220,205,255,.55); }
.wh-win{ animation:whWin .7s cubic-bezier(.2,.9,.3,1.4); }
@keyframes whWin{ 0%{ transform:scale(.9); } 60%{ transform:scale(1.06); } 100%{ transform:none; } }
@media (prefers-reduced-motion: reduce){ .wh-rot{ transition-duration:.8s; } .wh-bulbs i, .wh-stage.spinning .wh-ptr{ animation:none; } }

/* =====================================================================
   👁 พรีวิวของรางวัล
===================================================================== */
#pvOverlay{ z-index:130; background:rgba(6,3,14,.72); }
.pv-card{
  position:relative; width:min(760px, calc(100vw - 24px)); max-height:calc(100vh - 24px); overflow-y:auto; scrollbar-width:none;
  margin:auto; padding:26px 20px 20px; border-radius:26px; text-align:center; color:#f3ecff; font-family:'Prompt',sans-serif;
  background:radial-gradient(90% 50% at 50% 0%, rgba(150,95,255,.22), transparent 70%), #130a24;
  border:1px solid rgba(200,160,255,.28); box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
}
.pv-card::-webkit-scrollbar{ display:none; }
#pvOverlay.open .pv-card{ animation:p2In .45s cubic-bezier(.2,.9,.3,1.2) both; }
#pvOverlay.is-grid .pv-card{ background:radial-gradient(90% 45% at 50% 0%, rgba(190,30,50,.28), transparent 70%), #100816; border-color:rgba(255,90,110,.25); }
.pv-eyebrow{ font-size:10.5px; font-weight:600; letter-spacing:.18em; color:#ffc690; }
#pvOverlay.is-grid .pv-eyebrow{ color:#ff8fa0; }
.pv-title{ margin:4px 0 2px; font-size:24px; font-weight:700; color:#fff; }
.pv-sub{ margin:0 0 16px; font-size:12.5px; color:rgba(220,205,255,.7); }

.pv-main{ position:relative; border-radius:18px; overflow:hidden; background:#000; aspect-ratio:854/480; }
.pv-main img{ width:100%; height:100%; object-fit:cover; display:block; }
.pv-main span{ position:absolute; left:12px; bottom:12px; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:600;
  color:#fff; background:rgba(10,6,20,.7); backdrop-filter:blur(6px); }
.pv-thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px; }
.pv-th{ padding:0; border:2px solid transparent; border-radius:12px; overflow:hidden; background:none; cursor:pointer; aspect-ratio:854/480; opacity:.6; transition:opacity .2s, border-color .2s; }
.pv-th img{ width:100%; height:100%; object-fit:cover; display:block; }
.pv-th.on, .pv-th:hover{ opacity:1; border-color:#ff9b3d; }

.pv-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(118px,1fr)); gap:10px; }
.pv-cell{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 6px 10px; border-radius:16px; cursor:pointer;
  border:1px solid rgba(255,255,255,.07);
  background:radial-gradient(circle at 50% 42%, rgba(200,40,60,.32), transparent 62%), rgba(255,255,255,.035);
  transition:transform .25s, border-color .25s; }
.pv-cell:hover{ transform:translateY(-3px); border-color:rgba(255,110,130,.45); }
.pv-cell img{ width:100%; aspect-ratio:1; object-fit:contain; filter:brightness(1.35) contrast(1.05) drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.pv-cell span{ font-size:11px; font-weight:600; color:#f3e6ea; line-height:1.3; }
.pv-zoom{ position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  border-radius:26px; cursor:zoom-out; background:radial-gradient(circle at 50% 45%, rgba(200,40,60,.4), rgba(10,4,12,.96) 65%); }
.pv-zoom[hidden]{ display:none; }
.pv-zoom img{ width:min(420px, 80%); aspect-ratio:1; object-fit:contain; filter:brightness(1.35) drop-shadow(0 14px 22px rgba(0,0,0,.7)); }
.pv-zoom b{ font-size:18px; color:#fff; }

.p2c-art.has-pv{ cursor:pointer; }
.p2c-pv{ position:absolute; right:10px; bottom:10px; display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:999px;
  font:600 11px 'Prompt',sans-serif; color:#fff; background:rgba(10,6,20,.72); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(6px);
  transition:background .2s; }
.p2c-pv svg{ width:14px; height:14px; }
.p2c-art.has-pv:hover .p2c-pv{ background:rgba(255,138,43,.85); }
@media (max-width:520px){ .pv-grid{ grid-template-columns:repeat(3,1fr); gap:8px; } .pv-cell span{ font-size:10px; } }
.wh-mute{ display:inline-flex; align-items:center; gap:6px; margin-top:-6px; padding:6px 12px; border-radius:999px; cursor:pointer;
  font:500 12px 'Prompt',sans-serif; color:rgba(230,220,255,.7); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); }
.wh-mute:hover{ color:#fff; background:rgba(255,255,255,.1); }
.wh-mute svg{ width:15px; height:15px; }
.wh-mute .off, .wh-mute.muted .on{ display:none; }
.wh-mute.muted .off{ display:block; }

/* =====================================================================
   ℹ️ Figura NightMare — ปุ่ม i + หน้า About & credits
===================================================================== */
.nm-i{
  display:inline-flex; align-items:center; justify-content:center; vertical-align:middle;
  width:18px; height:18px; margin-left:4px; padding:0; border-radius:50%; cursor:pointer;
  font:italic 700 11px Georgia,'Times New Roman',serif; line-height:1; color:#1d0f2e;
  background:linear-gradient(135deg,#ffd27a,#ff8a2b); border:none; box-shadow:0 0 0 3px rgba(255,138,43,.18);
  transition:transform .2s, box-shadow .2s;
}
.nm-i:hover{ transform:scale(1.12); box-shadow:0 0 0 5px rgba(255,138,43,.25); }
.nm-i.big{ width:24px; height:24px; font-size:14px; margin-left:6px; position:relative; top:-2px; }
.nm-i[hidden]{ display:none; }

.pv-cell small{ font-size:9.5px; line-height:1.25; color:rgba(255,190,200,.6); }
.pv-zoom{ overflow-y:auto; padding:20px; }
.pv-zoom img{ width:min(300px, 60%); }
.pv-zoom em{ font-style:normal; font-size:11px; color:rgba(255,220,225,.5); }
.pv-credit{ display:flex; flex-direction:column; gap:6px; width:min(440px, 100%); text-align:left; cursor:default; }
.pv-src{ padding:8px 12px; border-radius:12px; font-size:12.5px; color:#f3e6ea; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); }
.pv-src span{ display:block; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,160,175,.75); margin-bottom:2px; }
.pv-src a{ color:#ffd27a; font-weight:600; text-decoration:none; }
.pv-src a:hover{ text-decoration:underline; }
.pv-src i{ font-style:normal; color:rgba(240,225,230,.6); }

#nmInfo{ z-index:140; background:rgba(6,3,10,.74); }
.nmi-card{
  position:relative; width:min(560px, calc(100vw - 24px)); max-height:calc(100vh - 24px); overflow-y:auto; scrollbar-width:thin;
  margin:auto; padding:26px 22px 20px; border-radius:26px; text-align:left; color:#f3ecff; font-family:'Prompt',sans-serif;
  background:radial-gradient(90% 40% at 50% 0%, rgba(200,40,60,.26), transparent 70%), #110816;
  border:1px solid rgba(255,110,130,.25); box-shadow:0 30px 80px -20px rgba(0,0,0,.85);
}
#nmInfo.open .nmi-card{ animation:p2In .45s cubic-bezier(.2,.9,.3,1.2) both; }
.nmi-card .pv-eyebrow{ color:#ff8fa0; }
.nmi-title{ margin:4px 0 10px; font-size:24px; font-weight:700; color:#fff; }
.nmi-badges{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.nmi-badges span{ padding:4px 10px; border-radius:999px; font-size:11px; font-weight:600; color:#ffd2a1; background:rgba(255,140,40,.12); border:1px solid rgba(255,160,80,.3); }
.nmi-text p{ margin:0 0 10px; font-size:13.5px; line-height:1.7; color:rgba(240,228,245,.85); }
.nmi-text b{ color:#fff; }
.nmi-discord{
  display:flex; align-items:center; justify-content:center; gap:10px; margin:14px 0 18px; padding:13px; border-radius:14px;
  font-weight:600; font-size:14.5px; color:#fff; text-decoration:none; background:#5865f2; box-shadow:0 10px 24px -8px rgba(88,101,242,.7);
  transition:transform .2s, filter .2s;
}
.nmi-discord:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.nmi-discord svg{ width:22px; height:22px; }
.nmi-sub{ margin:0 0 8px; font-size:13px; font-weight:700; letter-spacing:.06em; color:#ffc690; text-transform:uppercase; }
.nmi-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.nmi-list li{ display:flex; flex-direction:column; gap:2px; padding:9px 12px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); font-size:12.5px; }
.nmi-list b{ color:#fff; font-size:13px; }
.nmi-list a{ color:#ffd27a; text-decoration:none; }
.nmi-list a:hover{ text-decoration:underline; }
.nmi-list span{ color:rgba(235,220,235,.65); }
.nmi-foot{ margin:14px 0 0; font-size:11px; color:rgba(235,220,235,.45); text-align:center; }

.p2-cd-label{ display:block; margin:-6px 0 -8px; font-size:11.5px; font-weight:600; letter-spacing:.04em; color:rgba(255,198,144,.85); text-align:center; }
#phase2Popup.is-live .p2-cd-label{ color:#ff9aa5; }
.hwcd.p2.is-ending{ border-color:rgba(255,110,120,.45); }
.hwcd.p2.is-ending .hwcd-label{ color:#ff9aa5; }

.pv-zoom{ background:radial-gradient(circle at 50% 30%, rgba(200,40,60,.38), transparent 60%), #100816; position:fixed; inset:auto; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(760px, calc(100vw - 24px)); max-height:calc(100vh - 24px); border-radius:26px; border:1px solid rgba(255,110,130,.25); z-index:135; }
.pv-src b{ font-size:12.5px; font-weight:600; }

/* =====================================================================
   🖼 Wallpaper Edition — พรีวิว + เลือกดาวน์โหลดรายภาพ
===================================================================== */
#pvOverlay.is-wall .pv-card{ width:min(880px, calc(100vw - 24px)); }
.pv-walls{ display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; }
.pv-wall{ display:flex; flex-direction:column; gap:6px; }
.pv-wimg{ padding:0; border:none; border-radius:14px; overflow:hidden; cursor:zoom-in; aspect-ratio:9/16; background:#1a0f2a;
  box-shadow:0 10px 22px -12px rgba(0,0,0,.8); transition:transform .25s; }
.pv-wimg img{ width:100%; height:100%; object-fit:cover; display:block; }
.pv-wimg:hover{ transform:translateY(-3px); }
.pv-wrow{ display:flex; align-items:center; justify-content:space-between; gap:6px; padding:0 2px; }
.pv-wrow span{ font-size:11.5px; font-weight:600; color:#e9dcff; text-align:left; }
.pv-dl{ width:30px; height:30px; flex:0 0 auto; border-radius:10px; border:none; cursor:pointer; color:#fff;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#22c55e,#16a34a); box-shadow:0 6px 14px -6px rgba(34,197,94,.7); transition:transform .2s; }
.pv-dl svg{ width:16px; height:16px; }
.pv-dl:hover{ transform:translateY(-2px); }
.pv-dl.busy{ opacity:.6; animation:pvBusy .9s linear infinite; }
@keyframes pvBusy{ 50%{ opacity:.25; } }
.pv-all{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; margin:0 0 14px; padding:12px;
  border:none; border-radius:14px; cursor:pointer; font:600 14px 'Prompt',sans-serif; color:#fff;
  background:linear-gradient(90deg,#22c55e,#16a34a); box-shadow:0 10px 22px -8px rgba(34,197,94,.6); }
.pv-all svg{ width:18px; height:18px; }
.pv-lock{ margin:0 0 14px; padding:10px 12px; border-radius:12px; font-size:12.5px; color:#ffd2a1;
  background:rgba(255,140,40,.1); border:1px dashed rgba(255,160,80,.4); }
.pv-zoom.wall{ background:rgba(10,6,20,.96); }
.pv-zoom.wall img{ width:auto; height:min(70vh, 640px); aspect-ratio:9/16; object-fit:cover; border-radius:16px; filter:none; }
@media (max-width:640px){ .pv-walls{ grid-template-columns:repeat(3, 1fr); gap:9px; } .pv-wrow span{ font-size:10.5px; } .pv-dl{ width:26px; height:26px; } }

/* =====================================================================
   ⚡ PERFORMANCE — มือถือ / Chrome Android
   วัดจริงแล้ว (Pixel 7 · CPU ช้าลง 4 เท่า): แอนิเมชันที่วิ่งค้าง + เบลอฉากหลัง
   คือตัวหลักที่ทำให้กระตุก
===================================================================== */
/* 1) มีหน้าต่างเปิดอยู่ → หยุดแอนิเมชันทั้งหมดของหน้าเว็บด้านหลัง (มองไม่เห็นอยู่แล้ว) */
html.ovl-open body > *:not(.overlay):not(#toastContainer):not(#evtToast):not(.hw-transition),
html.ovl-open body > *:not(.overlay):not(#toastContainer):not(#evtToast):not(.hw-transition) *,
html.ovl-open body > *:not(.overlay):not(#toastContainer):not(#evtToast):not(.hw-transition) *::before,
html.ovl-open body > *:not(.overlay):not(#toastContainer):not(#evtToast):not(.hw-transition) *::after{ animation-play-state:paused !important; }
html.ovl-open .hw-embers{ visibility:hidden; }

@media (hover:none) and (pointer:coarse){
  /* 2) เบลอฉากหลังกินแรงมากบน Chrome Android → ใช้พื้นทึบขึ้นแทน */
  *, *::before, *::after{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  .overlay{ background:rgba(8,4,16,.82) !important; }
  #phase2Popup, #pvOverlay, #nmInfo, #streakPopup{ background:rgba(6,3,12,.86) !important; }

  /* 3) แสงเรืองที่ต้องวาดใหม่ทุกเฟรม → คงแสงไว้แต่ไม่ต้องกะพริบ */
  .apply-inline, .apply-logo, .aurora-shimmer, .evt-ms-card.is-ready,
  .hw-pumpkin .glow, .hwcd-ico .glow, .hwt-pumpkin .glow, .nav-galaxy a,
  .p2-dot, .pd-live-dot, .wh-bulbs i,
  html.has-frame-h26 #chipAvatar, html.has-frame-h26 #mobileChipAvatar,
  html.has-frame-h26 #profileAvatarPreview{ animation:none !important; }
  .wh-stage.spinning .wh-bulbs i{ animation:whBlink .3s steps(2) infinite !important; }
}

/* =====================================================================
   🩹 Galaxy S25 / S25 Ultra (Chrome + Adreno GPU) — บางส่วนของหน้าต่างไม่ถูกวาด
   ลดชั้นเลเยอร์บนมือถือ: ให้ "พื้นหลังหน้าต่าง" เป็นตัวเลื่อนแทนการ์ดที่ขอบมน,
   ไม่มีแอนิเมชัน transform ค้างบนการ์ด และไม่มีเอฟเฟกต์ hover ที่สร้างเลเยอร์เพิ่ม
===================================================================== */
@media (hover:none), (pointer:coarse), (max-width:760px){
  #pvOverlay.open, #nmInfo.open, #phase2Popup.open{
    align-items:flex-start; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    padding:12px 0 24px;
  }
  #pvOverlay .pv-card, #nmInfo .nmi-card, #phase2Popup .p2-card{
    max-height:none !important; overflow:visible !important; margin:0 auto;
    animation:none !important; transform:none !important; box-shadow:none;
  }
  #pvOverlay.open .pv-card, #nmInfo.open .nmi-card, #phase2Popup.open .p2-card{ animation:none !important; }
  .pv-cell, .pv-wimg, .p2-tile, .pv-th, .pv-dl{ transition:none !important; transform:none !important; }
  #phase2Popup.open .p2-tile{ animation:none !important; }
  .pv-cell img, .pv-zoom img{ filter:none !important; }
  .pv-wimg{ box-shadow:none; }
  .pv-zoom, .pv-zoom.wall{ position:fixed; left:0; top:0; right:0; bottom:0; transform:none; width:auto; max-height:none; border-radius:0; border:none; z-index:200; }
}