*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

/* ===== GOLD FRAME ===== */
.gold-frame{
  padding:14px;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 0 25px gold;
  position:relative;
}
.gold-frame::before{
  content:"";
  position:absolute;
  inset:-50%;
  background:conic-gradient(gold,rgba(255,255,255,.6),gold);
  animation:spin 1.5s linear infinite;
}
@keyframes spin{
  100%{transform:rotate(360deg)}
}
.gold-frame img{
  position:relative;
  z-index:1;
  border-radius:16px;
  width:100%;
  display:block;
}

/* ===== STAT ===== */
.stat-wrap{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding:12px 14px;
}

.stat-box{
  background:#000;
  border:2px solid gold;
  border-radius:18px;
  text-align:center;
  padding:16px 8px;
  min-height:96px;
  box-shadow:0 0 18px gold;
}

.stat-box .icon{
  font-size:22px;
  animation:iconFloat 2.2s ease-in-out infinite;
}

@keyframes iconFloat{
  0%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-4px) scale(1.08)}
  100%{transform:translateY(0) scale(1)}
}

.stat-box .label{
  font-size:13px;
  color:#fff;
}

.stat-box .value{
  font-size:18px;
  font-weight:800;
  color:gold;
}

/* pulse */
.value.pulse{
  animation:numberPop .35s ease;
}
@keyframes numberPop{
  0%{transform:scale(.85);text-shadow:0 0 0 gold}
  60%{transform:scale(1.15);text-shadow:0 0 18px gold}
  100%{transform:scale(1);text-shadow:0 0 8px gold}
}

/* ===== SLIDER (คงเดิม) ===== */
.slider-wrap{
 width:94%;
 margin:20px auto;
 overflow:hidden;
 border:3px solid gold;
 border-radius:16px;
 box-shadow:0 0 18px gold;
}
.slider-track{
 display:flex;
 gap:1px;
 animation:scroll 6s linear infinite; /* 🔧 จาก 20s → 10s */
}
@keyframes scroll{
 from{transform:translateX(0)}
 to{transform:translateX(-50%)}
}
.slider-track img{
 width:120px;
 border-radius:12px;
 flex-shrink:0;
}

/* ===== DESKTOP ===== */
@media(min-width:768px){
 .page-wrap{max-width:640px}
 .slider-track img{width:160px}
}

/* ===== FOOTER IMAGE ===== */
.footer-frame{
  width:94%;
  max-width:480px;
  margin:12px auto;
  pointer-events:none;
}

.footer-frame img{
  width:100%;
  height:auto;
  display:block;
}

/* ===== DESKTOP ===== */
@media(min-width:768px){
  .page-wrap{max-width:640px;margin:auto;}
  .slider-track img{width:160px}
}
