/* ===================================================
   DAFA88 CLEAN STYLE
   คลีนจากหลายเวอร์ชันให้เหลือชุดใช้งานจริง
   - Hero + Orbit V16
   - Logo top-left
   - Mobile performance
   - Bottom CTA login bounce
=================================================== */

*{
  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;
}

img,
.logo,
.dada,
.mascot,
.slider img,
.orbit-game img{
  -webkit-user-drag:none;
  user-select:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  -webkit-touch-callout:none;
}

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

.hero{
  position:relative;
  min-height:auto;
  overflow:hidden;
  padding:72px 16px 28px;
  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%);
  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;
}

.hero::after{
  content:"";
  position:absolute;
  left:50%;
  top:55%;
  width:210px;
  height:210px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(255,215,0,.20) 0%,
      rgba(255,180,0,.08) 35%,
      transparent 72%);
  pointer-events:none;
  z-index:2;
}

.hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
  radial-gradient(circle, rgba(255,215,0,.55) 0 1px, transparent 2.5px),
  radial-gradient(circle, rgba(255,245,200,.55) 0 1.5px, transparent 3px),
  radial-gradient(circle, rgba(255,255,255,.35) 0 1px, transparent 2px);
  background-size:
    120px 120px,
    170px 170px,
    220px 220px;
  opacity:.55;
  animation:goldDustFloat 13s linear infinite;
  pointer-events:none;
}

/* =========================
   LOGO TOP LEFT
========================= */

.logo-wrap{
  position:absolute;
  top:14px;
  left:14px;
  z-index:80;
  width:132px;
  max-width:42vw;
  display:block;
  margin:0;
  cursor:pointer;
  overflow:visible;
  animation:logoFloatOnly 5.8s ease-in-out infinite;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.32));
}

.logo-wrap .logo,
.logo{
  width:100%;
  max-width:100%;
  display:block;
  margin:0;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.32));
}

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

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

.logo:hover{
  transform:none;
}

/* =========================
   HERO ORBIT STAGE
========================= */

.orbit-wrap{
  position:relative;
  z-index:4;
  height:356px;
  max-width:430px;
  margin:-10px auto -10px;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:contain;
  isolation:isolate;
  transform:translateZ(0);
}

.orbit{
  position:absolute;
  inset:0;
  z-index:60;
  pointer-events:none;
  transition:opacity .18s ease;
  transform:translateZ(0);
}

.orbit.is-swapping{
  opacity:.42;
}

.orbit-ring{
  position:absolute;
  left:50%;
  top:50%;
  width:390px;
  height:230px;
  transform:translate(-50%,-50%);
  border:2px solid rgba(255,215,0,.42);
  border-radius:50%;
  z-index:2;
  opacity:.62;
  pointer-events:none;
  box-shadow:
    0 0 12px rgba(255,215,0,.28),
    inset 0 0 14px rgba(255,180,0,.12);
}

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

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

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

/* =========================
   MASCOT
========================= */

.dada,
.dada-b,
.mascot{
  position:absolute;
  left:50%;
  bottom:48px;
  max-height:365px;
  max-width:82%;
  z-index:30;
  cursor:pointer;
  pointer-events:auto;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.38));
  transform:translateX(-50%);
  animation:dadaFloat 5.4s ease-in-out infinite;
  transition:opacity .16s ease, transform .16s ease, filter .16s ease;
  will-change:opacity, transform;
  backface-visibility:hidden;
}

.mascot{
  opacity:0;
}

.mascot.active,
.mascot.is-blinking,
.mascot.is-smiling{
  opacity:1;
}

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

.mascot.is-smiling{
  transform:translateX(-50%) scale(1.006);
}

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

.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;
}

/* =========================
   ORBIT GAMES
========================= */

.orbit-game{
  position:absolute;
  left:0;
  top:0;
  width:66px;
  height:66px;
  border-radius:17px;
  background:transparent;
  border:0;
  outline:0;
  text-decoration:none;
  cursor:pointer;
  overflow:visible;
  opacity:0;
  z-index:80;
  pointer-events:auto;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
  contain:layout paint style;
  will-change:transform, opacity;
  transform:translateZ(0);
  transition:opacity .16s ease, filter .16s ease;
  backface-visibility:hidden;
}

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

.orbit-game img,
.orbit-game.front img{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
  transform:translate(-50%,-50%);
  border-radius:17px;
  pointer-events:none;
  box-shadow:
    0 7px 14px rgba(0,0,0,.26),
    0 0 7px rgba(255,215,0,.12);
  transition:filter .16s ease, box-shadow .16s ease;
}

.orbit-game.front{
  width:76px;
  height:76px;
  filter:brightness(1.06) saturate(1.06);
}

.orbit-game.front img{
  border-radius:19px;
  box-shadow:
    0 9px 17px rgba(0,0,0,.30),
    0 0 8px rgba(255,215,0,.16);
}

.orbit-game::before,
.orbit-game.front::before,
.orbit-game.sparkle::after{
  display:none;
  animation:none;
}

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

.orbit-game.front::after{
  inset:-7px;
  pointer-events:none;
}

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

.game-name,
.orbit-game .game-name,
.orbit-game.front .game-name,
.orbit-game:not(.front) .game-name{
  opacity:0;
  visibility:hidden;
  transform:none;
  background:transparent;
  text-shadow:none;
  pointer-events:none;
}

/* =========================
   ACTIVE GAME LABEL
========================= */

.hero-active-game{
  position:relative;
  z-index:18;
  width:min(330px, calc(100% - 32px));
  margin:-8px auto 12px;
  padding:8px 14px 9px;
  border:1px solid rgba(255,215,0,.34);
  border-radius:999px;
  background:rgba(20,10,6,.34);
  color:#fff;
  text-align:center;
  box-shadow:0 6px 16px rgba(0,0,0,.13);
  transition:opacity .18s ease, transform .18s ease;
  transform:translateZ(0);
  will-change:opacity, transform;
}

.hero-active-game.is-changing{
  opacity:.62;
  transform:translate3d(0,1px,0);
}

.hero-active-title{
  font-size:14px;
  font-weight:900;
  line-height:1.15;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:0 1px 4px rgba(0,0,0,.42);
}

.hero-active-meta{
  margin-top:2px;
  font-size:11px;
  font-weight:800;
  color:rgba(255,230,140,.86);
}

/* =========================
   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);
}

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

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

.btn{
  min-height:54px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight:900;
  transition:transform .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 10px 24px rgba(255,195,0,.28),
    0 5px 12px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.62);
}

.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 6.8s ease-in-out infinite;
  pointer-events:none;
  opacity:.75;
}

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

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

/* =========================
   SECTIONS / PROOF / SLIDER / FAQ
========================= */

.section{
  padding:26px 16px;
}

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

.promo{
  margin-top:0;
}

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

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

.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 a img{
  pointer-events:none;
}

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

.faq{
  padding-bottom:112px;
}

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

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

.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;
  color:#555;
  font-size:15px;
  line-height:1.65;
}

.slider img,
.faq details,
.proof div{
  content-visibility:auto;
  contain-intrinsic-size:1px 240px;
}

/* =========================
   BOTTOM BAR + CTA LOGIN
========================= */

.bottom-bar{
  position:fixed;
  left:50%;
  bottom:0;
  z-index:999;
  width:100%;
  max-width:430px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:10px 14px 12px;
  transform:translateX(-50%);
  border-radius:22px 22px 0 0;
  background:rgba(255,255,255,.96);
  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{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:linear-gradient(180deg,#ff4b4b 0%,#e0001b 45%,#b30016 100%);
  animation:loginBounce 1.45s ease-in-out infinite;
  box-shadow:
    0 8px 24px rgba(220,0,30,.45),
    0 0 18px rgba(255,70,70,.30);
}

.bottom-bar .register::before{
  content:"";
  position:absolute;
  inset:-5px;
  border:2px solid rgba(255,255,255,.65);
  border-radius:20px;
  opacity:0;
  animation:loginRing 1.45s ease-in-out infinite;
  pointer-events:none;
}

.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 .9s linear infinite;
  pointer-events:none;
}

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

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

@keyframes goldDustFloat{
  from{
    background-position: 0 0, 0 0, 0 0;
  }
  to{
    background-position: 15px 220px, -10px 260px, 8px 300px;
  }
}

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

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

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

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

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

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

@keyframes loginBounce{
  0%,100%{transform:translateY(0) scale(1);}
  18%{transform:translateY(-5px) scale(1.05);}
  32%{transform:translateY(0) scale(.98);}
  46%{transform:translateY(-3px) scale(1.03);}
  60%{transform:translateY(0) scale(1);}
}

@keyframes loginRing{
  0%{
    opacity:0;
    transform:scale(.9);
  }
  30%{
    opacity:.9;
  }
  100%{
    opacity:0;
    transform:scale(1.18);
  }
}

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

@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;
  }
}

@media (max-width:640px){
  html{
    scroll-behavior:auto;
  }

  .hero{
    padding-bottom:28px;
  }

  .hero-bg,
  .hero::before{
    animation:none;
    opacity:.72;
  }

  .orbit-wrap{
    height:350px;
    margin-bottom:-10px;
  }

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

  .orbit-game{
    width:62px;
    height:62px;
    border-radius:16px;
  }

  .orbit-game img,
  .orbit-game.front img{
    border-radius:16px;
    box-shadow:0 7px 14px rgba(0,0,0,.28);
  }

  .orbit-game.front{
    width:72px;
    height:72px;
  }

  .orbit-game.front img{
    border-radius:18px;
    box-shadow:
      0 8px 16px rgba(0,0,0,.32),
      0 0 8px rgba(255,215,0,.20);
  }

  .dada,
  .dada-b,
  .mascot,
  .logo,
  .logo-wrap .logo{
    filter:drop-shadow(0 7px 14px rgba(0,0,0,.24));
  }

  .hero-active-game{
    margin-top:-10px;
    padding:7px 12px 8px;
    background:rgba(20,10,6,.28);
    box-shadow:0 4px 10px rgba(0,0,0,.10);
  }

  .hero-active-title{
    font-size:13px;
  }

  .hero-active-meta{
    font-size:10.5px;
  }

  .slider img,
  .faq details,
  .proof div,
  .bottom-bar{
    box-shadow:0 6px 14px rgba(0,0,0,.10);
  }
}

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

  .logo-wrap{
    top:12px;
    left:12px;
    width:116px;
    max-width:40vw;
  }

  .orbit-wrap{
    height:336px;
  }

  .orbit-ring{
    width:338px;
    height:204px;
  }

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

  .orbit-game.front{
    width:68px;
    height:68px;
  }

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

  .hero-active-game{
    width:min(310px, calc(100% - 28px));
  }

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

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

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

  .logo-wrap{
    width:106px;
  }

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

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

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

@media (prefers-reduced-motion:reduce){
  .hero-bg,
  .hero::before,
  .dada,
  .dada-b,
  .mascot,
  .logo-wrap,
  .orbit-ring::before,
  .orbit-ring::after,
  .btn-register::after,
  .bottom-bar .register,
  .bottom-bar .register::before,
  .bottom-bar .register::after{
    animation:none;
  }

  .hero-active-game,
  .orbit-game,
  .orbit-game img,
  .btn,
  .mascot,
  .dada,
  .logo-wrap{
    transition:none;
  }
}