*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:Arial, Helvetica, sans-serif;
  background:#f7f7f7;
  color:#222;
  padding-bottom:88px;
  overflow-x:hidden;
}

a{
  -webkit-tap-highlight-color:transparent;
}

.site{
  overflow:hidden;
}

/* =========================
   HERO
========================= */

.hero{
  position:relative;
  min-height:auto;
  overflow:hidden;
  padding:12px 16px 38px;
  text-align:center;
  background:
    radial-gradient(circle at 50% 16%,rgba(255,230,90,.58),transparent 26%),
    radial-gradient(circle at 16% 38%,rgba(255,255,255,.18),transparent 22%),
    radial-gradient(circle at 86% 42%,rgba(255,215,0,.22),transparent 24%),
    linear-gradient(180deg,#d8001b 0%,#950016 60%,#f7f7f7 100%);
}

.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(circle at 50% 70%,rgba(0,0,0,.25),transparent 34%),
    linear-gradient(120deg,transparent 38%,rgba(255,255,255,.10) 48%,transparent 58%);
  animation:bgPulse 5s ease-in-out infinite;
  pointer-events:none;
}

.hero::before{
  content:"";
  position:absolute;
  inset:-20%;
  z-index:1;
  background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.13) 50%,transparent 60%);
  animation:heroLight 7s linear infinite;
  pointer-events:none;
}

.logo{
  position:relative;
  z-index:20;
  width:180px;
  max-width:60vw;
  display:block;
  margin:8px auto -8px;
  cursor:pointer;
  filter:
    drop-shadow(0 8px 22px rgba(0,0,0,.35))
    drop-shadow(0 0 18px rgba(255,215,0,.35));
  transition:.25s;
}

.logo:hover{
  transform:scale(1.03);
}

/* =========================
   HERO GAME STAGE
========================= */

.orbit-wrap{
  position:relative;
  z-index:4;
  height:400px;
  max-width:430px;
  margin:-8px auto -10px;
  touch-action:none;
  user-select:none;
}

.orbit{
  position:absolute;
  inset:0;
  z-index:8;
}

.orbit-ring{
  position:absolute;
  left:50%;
  top:50%;
  width:430px;
  height:250px;
  transform:translate(-50%,-50%);
  border:2px solid rgba(255,215,0,.54);
  border-radius:50%;
  z-index:2;
  pointer-events:none;
  box-shadow:
    0 0 24px rgba(255,215,0,.45),
    inset 0 0 34px rgba(255,180,0,.22);
}

.orbit-ring::before,
.orbit-ring::after{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#fff4a8;
  box-shadow:
    0 0 12px rgba(255,255,255,.9),
    0 0 22px rgba(255,215,0,.8);
  top:50%;
  transform:translateY(-50%);
  animation:sparkDot 2.8s ease-in-out infinite;
}

.orbit-ring::before{
  left:24px;
}

.orbit-ring::after{
  right:24px;
  animation-delay:1.4s;
}

.dada,
.dada-b{
  position:absolute;
  left:50%;
  bottom:48px;
  transform:translateX(-50%);
  max-height:365px;
  max-width:82%;
  z-index:10;
  filter:
    drop-shadow(0 18px 28px rgba(0,0,0,.38))
    drop-shadow(0 0 26px rgba(255,215,0,.18));
  cursor:pointer;
}

.dada{
  animation:
    dadaFloat 4s ease-in-out infinite,
    dadaFadeA 10s linear infinite;
}

.dada-b{
  animation:
    dadaFloat 4s ease-in-out infinite,
    dadaFadeB 10s linear infinite;
}

/* =========================
   GAME CARDS
========================= */

.orbit-game{
  position:absolute;
  left:0;
  top:0;
  width:72px;
  height:72px;
  border-radius:18px;
  background:transparent;
  border:none;
  box-shadow:
    0 12px 26px rgba(0,0,0,.38),
    0 0 22px rgba(255,215,0,.36);
  transform:translate(-50%,-50%) scale(.85);
  opacity:0;
  text-decoration:none;
  cursor:pointer;
  overflow:hidden;
  will-change:transform,opacity,filter;
  backface-visibility:hidden;
  transform-style:preserve-3d;
  transition:
    opacity .22s ease,
    filter .18s ease,
    box-shadow .18s ease;
}

.orbit-game.show{
  opacity:1;
}

.orbit-game img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:18px;
  pointer-events:none;
}

.game-name{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  padding:6px 7px 13px;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.86) 0%,
      rgba(0,0,0,.48) 58%,
      transparent 100%
    );
  color:#fff;
  font-size:10px;
  font-weight:900;
  line-height:1.1;
  text-align:center;
  text-shadow:
    0 2px 7px rgba(0,0,0,.95),
    0 0 10px rgba(255,215,0,.45);
  opacity:0;
  transform:translateY(-6px) scale(.96);
  transition:
    opacity .25s ease,
    transform .25s ease;
  pointer-events:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  z-index:3;
}

.orbit-game.front .game-name{
  opacity:1;
  transform:translateY(0) scale(1);
}

.orbit-game::before{
  content:"";
  position:absolute;
  inset:-35%;
  background:linear-gradient(120deg,transparent 36%,rgba(255,255,255,.9) 50%,transparent 64%);
  transform:translateX(-140%) rotate(18deg);
  opacity:0;
  pointer-events:none;
}

.orbit-game.front{
  filter:brightness(1.12) saturate(1.18);
  box-shadow:
    0 16px 34px rgba(0,0,0,.46),
    0 0 34px rgba(255,215,0,.62);
  animation:frontPulse 1.05s ease-in-out infinite;
}

.orbit-game.front::before{
  opacity:1;
  animation:cardShine .9s ease-out;
}

.orbit-game.sparkle::after{
  content:"✨";
  position:absolute;
  right:-4px;
  top:-12px;
  font-size:18px;
  animation:sparkPop .75s ease-out forwards;
  pointer-events:none;
}


/* =========================
   HERO COPY
========================= */

.hero-copy{
  position:relative;
  z-index:16;
  margin-top:0;
}

.tag{
  display:inline-block;
  padding:6px 13px;
  border-radius:999px;
  background:rgba(255,255,255,.95);
  color:#c40018;
  font-weight:900;
  font-size:13px;
  letter-spacing:.5px;
  box-shadow:0 8px 22px rgba(0,0,0,.15);
}

.hero-copy h1{
  margin-top:8px;
  font-size:32px;
  line-height:1.15;
  color:#fff;
  font-weight:900;
  text-shadow:0 4px 14px rgba(0,0,0,.38);
}

.hero-copy p{
  margin-top:8px;
  color:#fff;
  font-size:15px;
  line-height:1.5;
  text-shadow:0 2px 8px rgba(0,0,0,.25);
}

/* =========================
   PROOF
========================= */

.proof{
  position:relative;
  z-index:16;
  margin:12px auto 10px;
  display:grid;
  gap:8px;
  max-width:335px;
}

.proof div{
  background:rgba(255,255,255,.95);
  border:1px solid rgba(255,215,0,.38);
  border-radius:999px;
  padding:8px 12px;
  font-size:13px;
  font-weight:800;
  color:#222;
  box-shadow:0 8px 22px rgba(0,0,0,.14);
}

/* =========================
   BUTTONS
========================= */

.hero-actions{
  position:relative;
  z-index:17;
  max-width:335px;
  margin:0 auto;
  display:grid;
  gap:10px;
}

.btn{
  text-decoration:none;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  font-weight:900;
  transition:.18s ease;
}

.btn:active,
.btn.tap{
  transform:scale(.97);
}

.btn-register{
  position:relative;
  overflow:hidden;
  flex-direction:column;
  min-height:66px;
  color:#221400;
  background:linear-gradient(135deg,#fff8b8 0%,#ffd700 42%,#ffb300 100%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:
    0 14px 34px rgba(255,215,0,.38),
    0 8px 18px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.72);
  animation:goldGlow 2.3s ease-in-out infinite;
}

.btn-register::after{
  content:"";
  position:absolute;
  top:-45%;
  left:-70%;
  width:44%;
  height:190%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  transform:rotate(25deg);
  animation:shine 3s infinite;
}

.btn-register strong{
  font-size:22px;
  line-height:1;
}

.btn-register small{
  font-size:12px;
  margin-top:5px;
  color:#4a3000;
}

/* =========================
   SECTIONS
========================= */

.section{
  padding:26px 16px;
}

.section h2{
  text-align:center;
  font-size:24px;
  margin-bottom:16px;
  font-weight:900;
  color:#222;
}

.promo{
  margin-top:0;
}

/* =========================
   SLIDER
========================= */

.slider{
  display:flex;
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:4px 0 10px;
}

.slider::-webkit-scrollbar{
  display:none;
}

.slider a{
  min-width:82%;
  scroll-snap-align:center;
  text-decoration:none;
}

.slider img{
  width:100%;
  border-radius:22px;
  display:block;
  box-shadow:0 12px 30px rgba(0,0,0,.14);
}

/* =========================
   FAQ
========================= */

.faq{
  padding-bottom:112px;
}

.faq details{
  background:#fff;
  border:1px solid #eee;
  border-radius:16px;
  padding:16px;
  margin-bottom:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.faq summary{
  font-weight:900;
  cursor:pointer;
  list-style:none;
  position:relative;
  padding-right:28px;
}

.faq summary::-webkit-details-marker{
  display:none;
}

.faq summary::after{
  content:"+";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  color:#c40018;
  font-size:24px;
  line-height:1;
}

.faq details[open] summary::after{
  content:"−";
}

.faq p{
  margin-top:10px;
  line-height:1.65;
  color:#555;
  font-size:15px;
}

/* =========================
   BOTTOM BAR
========================= */

.bottom-bar{
  position:fixed;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:100%;
  max-width:430px;
  z-index:999;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:10px 14px 12px;
  background:rgba(255,255,255,.96);
  border-radius:22px 22px 0 0;
  box-shadow:0 -8px 26px rgba(0,0,0,.22);
}

.bottom-bar a{
  height:54px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight:900;
  font-size:16px;
}

.bottom-bar .line{
  color:#fff;
  background:linear-gradient(180deg,#16e329,#00a814);
  box-shadow:0 6px 16px rgba(0,180,25,.38);
}

.bottom-bar .register{
  color:#5b2500;
  background:linear-gradient(180deg,#fff36b,#ffbf00);
  box-shadow:0 6px 18px rgba(255,190,0,.45);
  position:relative;
  overflow:hidden;
}

.bottom-bar .register::after{
  content:"";
  position:absolute;
  top:0;
  left:-80%;
  width:55%;
  height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.75),transparent);
  transform:skewX(-18deg);
  animation:shineMove 2.4s infinite;
}

/* =========================
   ANIMATIONS
========================= */

@keyframes bgPulse{
  0%,100%{opacity:.84;}
  50%{opacity:1;}
}

@keyframes heroLight{
  0%{transform:translateX(-40%);}
  100%{transform:translateX(40%);}
}

@keyframes dadaFloat{
  0%,100%{
    transform:translateX(-50%) translateY(0);
  }
  50%{
    transform:translateX(-50%) translateY(-5px);
  }
}

@keyframes dadaFadeA{
  0%,45%{opacity:1;}
  50%,95%{opacity:0;}
  100%{opacity:1;}
}

@keyframes dadaFadeB{
  0%,45%{opacity:0;}
  50%,95%{opacity:1;}
  100%{opacity:0;}
}

@keyframes frontPulse{
  0%,100%{filter:brightness(1.10) saturate(1.16);}
  50%{filter:brightness(1.24) saturate(1.24);}
}

@keyframes cardShine{
  0%{transform:translateX(-140%) rotate(18deg);}
  100%{transform:translateX(140%) rotate(18deg);}
}

@keyframes sparkPop{
  0%{
    opacity:0;
    transform:scale(.4) rotate(0deg);
  }
  35%{
    opacity:1;
    transform:scale(1.15) rotate(12deg);
  }
  100%{
    opacity:0;
    transform:scale(.7) translateY(-8px) rotate(24deg);
  }
}

@keyframes sparkDot{
  0%,100%{
    opacity:.35;
    transform:translateY(-50%) scale(.8);
  }
  50%{
    opacity:1;
    transform:translateY(-50%) scale(1.22);
  }
}

@keyframes goldGlow{
  0%,100%{
    box-shadow:
      0 14px 34px rgba(255,215,0,.34),
      0 8px 18px rgba(0,0,0,.14);
  }
  50%{
    box-shadow:
      0 18px 48px rgba(255,215,0,.66),
      0 10px 22px rgba(0,0,0,.18);
  }
}

@keyframes shine{
  0%{left:-70%;}
  42%{left:135%;}
  100%{left:135%;}
}

@keyframes shineMove{
  0%{left:-80%;}
  45%,100%{left:130%;}
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:380px){
  .hero{
    padding-top:10px;
  }

  .logo{
    width:155px;
    max-width:58vw;
  }

  .orbit-wrap{
    height:402px;
  }

  .orbit-ring{
    width:370px;
    height:222px;
  }

  .dada,
  .dada-b{
    max-height:360px;
    max-width:80%;
    bottom:10px;
  }

  .orbit-game{
    width:66px;
    height:66px;
    border-radius:17px;
    background:transparent;
    border:none;
  }

  .game-name{
    font-size:9px;
    padding:5px 6px 11px;
  }

  .orbit-game img{
    border-radius:17px;
  }
  .hero-copy h1{
    font-size:29px;
  }

  .proof div{
    font-size:12px;
  }
}

@media (max-width:340px){
  .logo{
    width:142px;
  }

  .orbit-wrap{
    height:378px;
  }

  .orbit-ring{
    width:330px;
    height:210px;
  }

  .dada,
  .dada-b{
    max-height:332px;
  }

  .orbit-game{
    width:60px;
    height:60px;
  }

  .game-name{
    font-size:8px;
    padding:4px 5px 10px;
  }

  .hero-copy h1{
    font-size:27px;
  }
}

@media (min-width:520px){
  .site{
    max-width:480px;
    margin:0 auto;
    background:#f7f7f7;
    box-shadow:0 0 40px rgba(0,0,0,.12);
  }

  .bottom-bar{
    max-width:480px;
  }
}


/* =========================
   V6.2 PREMIUM LOGO + MASCOT
   code-only update: ใช้รูปใน images/ เดิมของคุณ
========================= */

.logo-wrap{
  position:relative;
  z-index:20;
  width:180px;
  max-width:60vw;
  display:block;
  margin:8px auto -8px;
  cursor:pointer;
  animation:logoLuxuryFloat 5.2s ease-in-out infinite;
  filter:
    drop-shadow(0 9px 24px rgba(0,0,0,.36))
    drop-shadow(0 0 16px rgba(255,215,0,.34));
}

.logo-wrap .logo{
  width:100%;
  max-width:100%;
  display:block;
  margin:0;
  filter:none;
  transition:transform .22s ease;
}

.logo-wrap:active .logo,
.logo-wrap.tap .logo{
  transform:scale(.97);
}

.logo-wrap::before{
  content:"";
  position:absolute;
  inset:-10px -14px;
  z-index:-1;
  border-radius:999px;
  background:radial-gradient(circle,rgba(255,218,70,.38),transparent 66%);
  opacity:.72;
  animation:logoGoldBreath 3.8s ease-in-out infinite;
  pointer-events:none;
}

.logo-wrap::after{
  content:"";
  position:absolute;
  top:-35%;
  left:-85%;
  width:42%;
  height:170%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.90),rgba(255,224,85,.58),transparent);
  transform:skewX(-20deg);
  animation:logoShineSweep 8.8s ease-in-out infinite;
  pointer-events:none;
}

.logo:hover{
  transform:none;
}

.mascot{
  opacity:0;
  transition:opacity .55s ease, filter .55s ease;
  animation:dadaFloat 4.2s ease-in-out infinite;
  will-change:opacity, transform, filter;
}

.mascot.active{
  opacity:1;
}

.mascot.is-blinking{
  filter:
    drop-shadow(0 18px 28px rgba(0,0,0,.38))
    drop-shadow(0 0 34px rgba(255,215,0,.24))
    brightness(1.05);
}

.mascot-shine{
  position:absolute;
  left:50%;
  bottom:10px;
  width:82%;
  max-width:330px;
  height:390px;
  z-index:14;
  transform:translateX(-50%);
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  border-radius:44% 44% 32% 32%;
}

.mascot-shine::before{
  content:"";
  position:absolute;
  top:-18%;
  left:-70%;
  width:38%;
  height:140%;
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.82),rgba(255,215,0,.52),transparent);
  transform:skewX(-18deg);
}

.mascot-shine.play{
  opacity:1;
}

.mascot-shine.play::before{
  animation:mascotGoldenSweep .72s ease-out forwards;
}

@keyframes logoLuxuryFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-3px);}
}

@keyframes logoGoldBreath{
  0%,100%{opacity:.42; transform:scale(.98);}
  50%{opacity:.85; transform:scale(1.04);}
}

@keyframes logoShineSweep{
  0%,70%{left:-85%; opacity:0;}
  73%{opacity:1;}
  80%{left:145%; opacity:0;}
  100%{left:145%; opacity:0;}
}

@keyframes mascotGoldenSweep{
  0%{transform:translateX(-125%) skewX(-18deg); opacity:0;}
  18%{opacity:1;}
  100%{transform:translateX(420%) skewX(-18deg); opacity:0;}
}

@media (max-width:380px){
  .logo-wrap{
    width:155px;
    max-width:58vw;
  }

  .mascot-shine{
    height:360px;
  }
}

@media (max-width:340px){
  .logo-wrap{
    width:142px;
  }

  .mascot-shine{
    height:332px;
  }
}


/* =========================
   V6.2.1 LOGO FINAL: float only, no shine/glow
========================= */
.logo-wrap{
  animation:logoFloatOnly 5.8s ease-in-out infinite;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.32));
  overflow:visible;
}
.logo-wrap::before,
.logo-wrap::after{
  content:none !important;
  display:none !important;
  animation:none !important;
}
.logo-wrap .logo,
.logo{
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.32));
}
.logo:hover{
  transform:none;
}
@keyframes logoFloatOnly{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-3px);}
}

/* =========================
   V6.2.2 SMOOTH FIX
   - mascot starts from dada-close
   - no stuck blink state
   - orbit animation smoother
========================= */
.orbit{
  will-change:opacity;
  transition:opacity .18s ease;
}
.orbit.is-swapping{
  opacity:.36;
}
.orbit-game{
  contain:layout paint style;
  transition:
    opacity .16s linear,
    filter .16s linear,
    box-shadow .16s linear;
}
.orbit-game.front{
  animation:none !important;
}
.orbit-game.front::before{
  animation:cardShine .7s ease-out;
}
.game-name{
  transition:
    opacity .16s linear,
    transform .16s linear;
}
.mascot{
  opacity:0 !important;
  transition:opacity .48s ease !important;
  animation:dadaFloat 5.2s ease-in-out infinite !important;
}
.mascot.active{
  opacity:1 !important;
}
.mascot.is-blinking{
  opacity:1 !important;
}
.dada-b{
  opacity:0;
}

/* =========================
   DAFA88 V6.3 ULTIMATE FINAL
   Smooth mascot + logo float only
========================= */
.logo-wrap{
  animation:logoFloatOnly 5.8s ease-in-out infinite !important;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.32)) !important;
  overflow:visible !important;
}
.logo-wrap::before,
.logo-wrap::after{
  content:none !important;
  display:none !important;
  animation:none !important;
}
.logo-wrap .logo,
.logo{
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.32)) !important;
}
.logo:hover{
  transform:none !important;
}

.mascot{
  opacity:0 !important;
  transition:
    opacity .42s ease,
    filter .22s ease,
    transform .22s ease !important;
  animation:dadaFloat 5.4s ease-in-out infinite !important;
  will-change:opacity, transform;
  backface-visibility:hidden;
}
.mascot.active{
  opacity:1 !important;
}
.mascot.is-blinking,
.mascot.is-smiling{
  opacity:1 !important;
}
.mascot.is-smiling{
  transform:translateX(-50%) scale(1.006) !important;
}
.dada-b{
  opacity:0 !important;
}

.orbit-game{
  transition:
    opacity .14s linear,
    filter .14s linear,
    box-shadow .14s linear !important;
}
.orbit-game.front{
  animation:none !important;
}
.orbit.is-swapping{
  opacity:.42 !important;
  transition:opacity .18s ease !important;
}

/* =========================
   DAFA88 V6.3.2 Interactive Mascot
   Tap = blink, hold = keep eyes closed
========================= */
.mascot-interactive{
  pointer-events:auto;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-drag:none;
  -webkit-tap-highlight-color:transparent;
}
.mascot-interactive.is-pressed{
  animation:none !important;
  transform:translateX(-50%) scale(.985) !important;
  filter:
    drop-shadow(0 12px 22px rgba(0,0,0,.35))
    drop-shadow(0 0 18px rgba(255,215,0,.16)) !important;
}
.mascot-interactive.is-blinking{
  opacity:1 !important;
}


/* =========================
   DAFA88 V6.3.3 Press Morph Mascot
   แตะ = วิ้ง / กดค้าง = ค่อย ๆ เปลี่ยน hero -> close / ปล่อย = ยิ้มแล้วกลับ
========================= */
.mascot-base,
.mascot-morph{
  transition:
    opacity .22s ease,
    transform .18s cubic-bezier(.2,.9,.25,1.2),
    filter .18s ease !important;
  will-change:opacity, transform, filter;
}

.mascot-base.active{
  opacity:1 !important;
}

.mascot-morph{
  opacity:0 !important;
  pointer-events:none !important;
}

.mascot-morph.layer-on{
  opacity:1 !important;
}

.mascot-base.is-pressed{
  transform:translateX(-50%) scale(.992) !important;
  filter:
    drop-shadow(0 13px 23px rgba(0,0,0,.36))
    drop-shadow(0 0 16px rgba(255,215,0,.12)) !important;
}

.mascot-morph.is-pressed{
  transform:translateX(-50%) scale(1.012) !important;
  filter:
    drop-shadow(0 16px 27px rgba(0,0,0,.40))
    drop-shadow(0 0 20px rgba(255,215,0,.16)) !important;
}

.mascot-base.is-blinking{
  transform:translateX(-50%) scale(.996) !important;
}

.mascot-base.is-smiling{
  opacity:1 !important;
  transform:translateX(-50%) scale(1.008) !important;
  filter:
    drop-shadow(0 18px 28px rgba(0,0,0,.38))
    drop-shadow(0 0 22px rgba(255,215,0,.18)) !important;
}

.mascot-morph.is-releasing{
  opacity:0 !important;
  transition:opacity .22s ease, transform .22s ease !important;
}

@media (prefers-reduced-motion: reduce){
  .mascot-base,
  .mascot-morph{
    transition:none !important;
  }
}

/* =========================
   DAFA88 V6.3.4 Clean Mascot Fix
   - ปิด layer ซ้อน
   - ให้แสดงภาพหลักชั้นเดียว เพื่อไม่เกิดภาพเก่าค้าง
========================= */
#mascotA.mascot-clean{
  opacity:1 !important;
  display:block !important;
  pointer-events:auto !important;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-drag:none;
  -webkit-tap-highlight-color:transparent;
  animation:dadaFloat 5.2s ease-in-out infinite !important;
  transition:
    opacity .11s ease,
    transform .14s cubic-bezier(.2,.9,.25,1.2),
    filter .14s ease !important;
  will-change:opacity, transform, filter;
}

#mascotB,
#mascotB.dada,
#mascotB.dada-b,
#mascotB.mascot,
#mascotB.mascot-morph{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  animation:none !important;
}

#mascotA.mascot-clean.is-fading{
  opacity:.54 !important;
}

#mascotA.mascot-clean.is-pressed{
  animation:none !important;
  transform:translateX(-50%) scale(.985) !important;
  filter:
    drop-shadow(0 12px 22px rgba(0,0,0,.36))
    drop-shadow(0 0 16px rgba(255,215,0,.14)) !important;
}

#mascotA.mascot-clean.is-blinking{
  animation:none !important;
  transform:translateX(-50%) scale(.994) !important;
}

#mascotA.mascot-clean.is-smiling{
  transform:translateX(-50%) scale(1.006) !important;
}

/* =========================
   DAFA88 V7 Preview Overrides
   Clean Mascot Engine + Logo Float Only
========================= */
.logo-wrap{
  animation:logoFloatOnly 5.8s ease-in-out infinite !important;
}

.logo-wrap::before,
.logo-wrap::after{
  display:none !important;
  content:none !important;
}

.logo-wrap .logo,
.logo{
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.35)) !important;
}

.logo:hover{
  transform:none !important;
}

#mascotB,
#mascotB.dada,
#mascotB.dada-b,
#mascotB.mascot,
#mascotB.mascot-morph{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  animation:none !important;
}

#mascotA.mascot-v7{
  opacity:1 !important;
  display:block !important;
  pointer-events:auto !important;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-drag:none;
  -webkit-tap-highlight-color:transparent;
  animation:dadaFloat 5.4s ease-in-out infinite !important;
  transition:
    opacity .13s ease,
    transform .16s cubic-bezier(.2,.9,.25,1.18),
    filter .16s ease !important;
  will-change:opacity, transform, filter;
}

#mascotA.mascot-v7.is-pressed{
  animation:none !important;
  transform:translateX(-50%) scale(.982) !important;
  filter:
    drop-shadow(0 12px 22px rgba(0,0,0,.36))
    drop-shadow(0 0 14px rgba(255,215,0,.16)) !important;
}

#mascotA.mascot-v7.is-blinking{
  filter:
    drop-shadow(0 18px 28px rgba(0,0,0,.38))
    drop-shadow(0 0 18px rgba(255,215,0,.20)) !important;
}

#mascotA.mascot-v7.is-smiling{
  transform:translateX(-50%) scale(1.006) !important;
  filter:
    drop-shadow(0 18px 28px rgba(0,0,0,.38))
    drop-shadow(0 0 22px rgba(255,215,0,.22)) !important;
}

#mascotA.mascot-v7.is-switching{
  opacity:.62 !important;
  transform:translateX(-50%) scale(.992) !important;
}

@media (prefers-reduced-motion: reduce){
  .logo-wrap,
  #mascotA.mascot-v7{
    animation:none !important;
    transition:none !important;
  }
}


.orbit-game::after{content:"";position:absolute;inset:-10px;pointer-events:none;}
.orbit-game:hover,.orbit-game:active{transform:translate(-50%,-50%) scale(1.08);filter:brightness(1.08);}

/* Image lock: กันลาก/คัดลอก/กดค้างเซฟรูป แต่ยังเลื่อนหน้าและกดลิงก์ได้ */
img,
.logo,
.dada,
.mascot,
.slider img,
.orbit-game img{
  -webkit-user-drag:none !important;
  user-select:none !important;
  -webkit-user-select:none !important;
  -moz-user-select:none !important;
  -ms-user-select:none !important;
  -webkit-touch-callout:none !important;
}

/* รูปโปรโมชั่นให้คลิกผ่านไปที่ <a> ได้ ไม่โดนรูปบัง */
.slider a img{
  pointer-events:none;
}

/* รูปในไอคอนเกมให้คลิกผ่านไปที่ลิงก์เกม */
.orbit-game img,
.orbit-game .game-name{
  pointer-events:none;
}

/* =========================
   DAFA88 HERO V8.1: เกมเล็กตอนหมุน / ใหญ่เฉพาะตัวที่หยุดโชว์ชื่อ
   - รูปคนยังกดได้ ไม่โดน hitbox เกมกินพื้นที่
   - เกมทั่วไปเล็กลง ไม่บังตัวละคร
   - เฉพาะ .front ขยายพื้นที่กด + โชว์ชื่อเกม
========================= */
.orbit{
  z-index:60 !important;
  pointer-events:none !important;
}

.orbit-game{
  width:86px !important;
  height:86px !important;
  border-radius:21px !important;
  z-index:80;
  overflow:visible !important;
  pointer-events:auto !important;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
}

.orbit-game img{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:72px !important;
  height:72px !important;
  transform:translate(-50%,-50%) !important;
  border-radius:17px !important;
  box-shadow:0 10px 22px rgba(0,0,0,.34);
  transition:width .22s ease,height .22s ease,border-radius .22s ease,box-shadow .22s ease;
}

/* hitbox ปกติเล็กลง จะได้ไม่บังตัวละคร */
.orbit-game::after{
  content:"" !important;
  position:absolute !important;
  inset:-4px !important;
  pointer-events:auto !important;
  z-index:5 !important;
  background:rgba(255,255,255,0) !important;
}

/* ใหญ่เฉพาะตอนหยุด/โชว์ชื่อเกม */
.orbit-game.front{
  width:108px !important;
  height:108px !important;
  border-radius:25px !important;
}

.orbit-game.front img{
  width:90px !important;
  height:90px !important;
  border-radius:21px !important;
  box-shadow:0 14px 30px rgba(0,0,0,.42);
}

.orbit-game.front::after{
  inset:-10px !important;
}

.orbit-game .game-name{
  left:7px !important;
  top:7px !important;
  width:72px !important;
  border-radius:15px 15px 0 0;
  pointer-events:none !important;
  transition:left .22s ease,top .22s ease,width .22s ease,opacity .25s ease,transform .25s ease;
}

.orbit-game.front .game-name{
  left:9px !important;
  top:9px !important;
  width:90px !important;
}

.dada,
.mascot,
.mascot-interactive,
#mascotA{
  pointer-events:auto !important;
  cursor:pointer !important;
  touch-action:manipulation !important;
}

.dada-b,
#mascotB,
.mascot-shine{
  pointer-events:none !important;
}

/* HERO V8.1 mobile balance */
@media (max-width:380px){
  .orbit-game{width:80px !important;height:80px !important;border-radius:19px !important;}
  .orbit-game img{width:66px !important;height:66px !important;border-radius:16px !important;}
  .orbit-game::after{inset:-3px !important;}
  .orbit-game.front{width:98px !important;height:98px !important;border-radius:23px !important;}
  .orbit-game.front img{width:82px !important;height:82px !important;border-radius:19px !important;}
  .orbit-game .game-name{left:7px !important;top:7px !important;width:66px !important;}
  .orbit-game.front .game-name{left:8px !important;top:8px !important;width:82px !important;}
}
@media (max-width:340px){
  .orbit-game{width:74px !important;height:74px !important;}
  .orbit-game img{width:60px !important;height:60px !important;}
  .orbit-game.front{width:90px !important;height:90px !important;}
  .orbit-game.front img{width:74px !important;height:74px !important;}
  .orbit-game .game-name{width:60px !important;}
  .orbit-game.front .game-name{width:74px !important;}
}


/* =========================
   V8.2 FINAL CLEANUP
   - no white icon frame
   - smaller normal games
   - active/front game is bigger only while showing name
   - mascot remains clickable
========================= */
.orbit{
  z-index:12;
  pointer-events:none;
}
.orbit-game{
  width:72px !important;
  height:72px !important;
  border-radius:18px !important;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  pointer-events:auto;
  box-shadow:
    0 12px 26px rgba(0,0,0,.38),
    0 0 22px rgba(255,215,0,.36) !important;
}
.orbit-game img{
  border-radius:18px !important;
}
.orbit-game.front{
  box-shadow:
    0 16px 34px rgba(0,0,0,.46),
    0 0 34px rgba(255,215,0,.62) !important;
}
.dada,
.dada-b,
.mascot{
  z-index:10;
  pointer-events:auto;
}
@media (max-width:380px){
  .orbit-game{
    width:66px !important;
    height:66px !important;
    border-radius:17px !important;
  }
  .orbit-game img{
    border-radius:17px !important;
  }
}
@media (max-width:340px){
  .orbit-game{
    width:60px !important;
    height:60px !important;
  }
}

/* =========================
   DAFA88 HERO FINAL STABLE
   - รูปคนกดเพื่อกระพริบตาเท่านั้น ไม่เป็นลิงก์
   - เกมกดสมัคร / ลากเพื่อสไลด์
   - ไม่มีกรอบขาวหลังเกม
   - เกมเล็กตอนหมุน ใหญ่เฉพาะตอนขึ้นหน้าและโชว์ชื่อ
========================= */
.orbit-wrap{
  touch-action:none;
}

.orbit{
  z-index:60 !important;
  pointer-events:none !important;
}

.mascot,
.dada{
  z-index:30 !important;
  pointer-events:auto !important;
  -webkit-tap-highlight-color:transparent;
}

.orbit-game{
  width:82px !important;
  height:82px !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  overflow:visible !important;
  pointer-events:auto !important;
  touch-action:none !important;
  -webkit-tap-highlight-color:transparent;
}

.orbit-game img{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:72px !important;
  height:72px !important;
  transform:translate(-50%,-50%) !important;
  border-radius:17px !important;
  box-shadow:0 10px 22px rgba(0,0,0,.34), 0 0 18px rgba(255,215,0,.20) !important;
  pointer-events:none !important;
  transition:width .22s ease,height .22s ease,border-radius .22s ease,box-shadow .22s ease,filter .18s ease;
}

.orbit-game::before{
  display:none !important;
}

.orbit-game::after{
  content:"" !important;
  position:absolute !important;
  inset:2px !important;
  border-radius:22px !important;
  background:transparent !important;
  pointer-events:auto !important;
  z-index:4 !important;
}

.orbit-game.front{
  width:108px !important;
  height:108px !important;
}

.orbit-game.front img{
  width:90px !important;
  height:90px !important;
  border-radius:21px !important;
  box-shadow:0 14px 30px rgba(0,0,0,.42), 0 0 24px rgba(255,215,0,.28) !important;
}

.orbit-game.front::after{
  inset:-7px !important;
}

.orbit-game:hover img,
.orbit-game:active img{
  filter:brightness(1.08);
}

.orbit-game:hover,
.orbit-game:active{
  filter:none !important;
}

.orbit-game .game-name{
  pointer-events:none !important;
  left:5px !important;
  top:5px !important;
  width:72px !important;
  border-radius:15px 15px 0 0 !important;
}

.orbit-game.front .game-name{
  left:9px !important;
  top:9px !important;
  width:90px !important;
}

/* =========================
   DAFA88 V9.1 SHOW-OFF FINAL PLUS
   เน้นโชว์ / ลื่น / คลิกไม่พัง
========================= */
.orbit-wrap{
  isolation:isolate;
}

.orbit-game{
  width:72px !important;
  height:72px !important;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:
    0 12px 26px rgba(0,0,0,.42),
    0 0 18px rgba(255,215,0,.26) !important;
}

.orbit-game.front{
  width:78px !important;
  height:78px !important;
  filter:brightness(1.13) saturate(1.2) !important;
  box-shadow:
    0 18px 34px rgba(0,0,0,.48),
    0 0 26px rgba(255,215,0,.62),
    0 0 52px rgba(255,70,70,.22) !important;
}

.orbit-game.front::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:26px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,215,0,.24), transparent 62%);
  pointer-events:none;
  z-index:-1;
  animation:activeGoldAura 1.6s ease-in-out infinite;
}

.game-name{
  font-size:9.5px !important;
  padding-top:5px !important;
}

.btn-register{
  position:relative;
  overflow:hidden;
}

.btn-register::after{
  content:"";
  position:absolute;
  inset:-45% -80%;
  background:linear-gradient(120deg, transparent 42%, rgba(255,255,255,.72) 50%, transparent 58%);
  transform:translateX(-70%) rotate(12deg);
  animation:ctaSweep 4.8s ease-in-out infinite;
  pointer-events:none;
}

.hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 28% 26%, rgba(255,215,0,.18) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 34%, rgba(255,255,255,.16) 0 1px, transparent 2px),
    radial-gradient(circle at 58% 72%, rgba(255,215,0,.16) 0 1px, transparent 2px);
  background-size:110px 110px, 150px 150px, 190px 190px;
  opacity:.48;
  animation:heroSparkDrift 12s linear infinite;
  pointer-events:none;
}

@keyframes activeGoldAura{
  0%,100%{opacity:.55; transform:scale(.96);}
  50%{opacity:.98; transform:scale(1.08);}
}

@keyframes ctaSweep{
  0%,58%{transform:translateX(-70%) rotate(12deg); opacity:0;}
  66%{opacity:.85;}
  78%,100%{transform:translateX(70%) rotate(12deg); opacity:0;}
}

@keyframes heroSparkDrift{
  from{background-position:0 0, 0 0, 0 0;}
  to{background-position:110px -110px, -150px 150px, 190px 190px;}
}

@media (max-width:480px){
  .orbit-game{
    width:68px !important;
    height:68px !important;
  }
  .orbit-game.front{
    width:74px !important;
    height:74px !important;
  }
}

/* =========================
   DAFA88 V9.2 ICON EDGE FIX
   แก้ active game ซูมจนขอบรูปโดนครอป
   - ขยายเฉพาะกล่องไอคอน
   - รูปด้านในแสดงเต็ม 100% ไม่ครอปขอบ
========================= */
.orbit-game{
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.orbit-game img,
.orbit-game.front img{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  transform:translate(-50%,-50%) !important;
  object-fit:contain !important;
  object-position:center !important;
  border-radius:18px !important;
  box-shadow:0 12px 26px rgba(0,0,0,.42), 0 0 18px rgba(255,215,0,.26) !important;
}

.orbit-game.front{
  width:82px !important;
  height:82px !important;
  filter:brightness(1.08) saturate(1.1) !important;
}

.orbit-game.front img{
  border-radius:20px !important;
  box-shadow:0 16px 32px rgba(0,0,0,.48), 0 0 26px rgba(255,215,0,.55) !important;
}

.orbit-game::after{
  inset:-7px !important;
  pointer-events:auto !important;
  background:transparent !important;
}

.orbit-game.front::after{
  inset:-10px !important;
  pointer-events:none !important;
}

.orbit-game .game-name,
.orbit-game.front .game-name{
  left:0 !important;
  top:0 !important;
  width:100% !important;
  border-radius:18px 18px 0 0 !important;
}

@media (max-width:480px){
  .orbit-game{
    width:68px !important;
    height:68px !important;
  }
  .orbit-game.front{
    width:78px !important;
    height:78px !important;
  }
}