:root{
  --bg-light  : #f8e6ad;
  --bg-gold   : #e7bc46;
  --bg-deep   : #cf9a26;
  --card-1    : #f0cf63;
  --card-2    : #d49d27;
  --frame     : #fbeaae;
  --frame-edge: #a9760f;
  --green-1   : #46c46f;
  --green-2   : #1f8b43;
  --gold-1    : #ffe9a8;
  --gold-2    : #e6a92b;
  --ink       : #5a3d00;
  --cream     : #fff7da;
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  font-family:'Kanit', sans-serif;
  min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:26px 16px;
  position:relative; overflow:hidden;
  background:
    radial-gradient(70% 45% at 50% 0%,  rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    radial-gradient(60% 50% at 85% 90%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    linear-gradient(160deg, var(--bg-light) 0%, var(--bg-gold) 38%, var(--bg-deep) 78%, #bf8a1c 100%);
}

/* ===== พื้นหลังเอฟเฟกต์ ===== */
.fx{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bokeh{ position:absolute; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.45) 38%, rgba(255,255,255,0) 70%);
  animation:drift var(--d,14s) ease-in-out infinite; opacity:.0; }
@keyframes drift{
  0%   { opacity:0; transform:translateY(20px) scale(.85); }
  40%  { opacity:var(--o,.7); }
  60%  { opacity:var(--o,.7); }
  100% { opacity:0; transform:translateY(-40px) scale(1.1); }
}
.spark{ position:absolute;
  background:radial-gradient(circle at 50% 50%, #fff 0%, #ffe9a8 45%, #e6a92b 100%);
  clip-path:polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  filter:drop-shadow(0 0 6px rgba(255,236,170,.9));
  opacity:0; animation:twinkle var(--d,3.4s) ease-in-out infinite; transform-origin:center;
}
@keyframes twinkle{
  0%,100%{ opacity:0; transform:scale(.3) rotate(0deg); }
  50%    { opacity:1; transform:scale(1) rotate(45deg); }
}

/* ===== การ์ดหลัก (เนื้อหา) ===== */
.card{
  position:relative; z-index:1;
  width:100%; max-width:420px;
  padding:30px 24px 26px;
  text-align:center;
  border-radius:30px;
  background:linear-gradient(160deg, var(--card-1) 0%, #e3b948 45%, var(--card-2) 100%);
  border:3px solid var(--frame);
  box-shadow:
    0 0 0 2px var(--frame-edge),
    0 26px 60px rgba(120,80,0,.45),
    inset 0 2px 10px rgba(255,255,255,.45),
    inset 0 -12px 30px rgba(150,100,0,.25);
  animation:cardIn .8s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes cardIn{ from{ opacity:0; transform:translateY(26px) scale(.97);} to{ opacity:1; transform:none; } }
.card::before{
  content:""; position:absolute; top:0; left:-60%; width:55%; height:100%;
  background:linear-gradient(110deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-18deg); border-radius:30px;
  animation:cardSheen 6s ease-in-out 1.2s infinite;
}
@keyframes cardSheen{ 0%{ left:-60%; } 18%,100%{ left:160%; } }

.logo-zone{ position:relative; width:min(82%,310px); margin:2px auto 8px; }
.halo{
  position:absolute; left:50%; top:48%; transform:translate(-50%,-50%);
  width:88%; height:78%; border-radius:50%; z-index:0;
  background:radial-gradient(circle, rgba(255,244,200,.85) 0%, rgba(255,221,120,.35) 45%, rgba(255,210,90,0) 72%);
  filter:blur(6px); animation:halo 3.4s ease-in-out infinite;
}
@keyframes halo{ 0%,100%{ opacity:.45; transform:translate(-50%,-50%) scale(.92);} 50%{ opacity:.95; transform:translate(-50%,-50%) scale(1.06);} }
.logo{
  position:relative; z-index:1;
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 8px 16px rgba(120,70,0,.45));
  animation:floaty 4s ease-in-out infinite, logoIn 1s ease both;
}
.logo-zone .spark{ z-index:2; }
.logo-zone .s1{ width:22px;height:22px; top:-6px;  left:-2px;  --d:3.0s; animation-delay:.2s; }
.logo-zone .s2{ width:16px;height:16px; top:8px;   right:-4px; left:auto; --d:3.6s; animation-delay:1.1s; }
.logo-zone .s3{ width:26px;height:26px; bottom:14px; right:6px; left:auto; --d:3.3s; animation-delay:.6s; }
.logo-zone .s4{ width:15px;height:15px; bottom:24px; left:2px; --d:3.8s; animation-delay:1.6s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
@keyframes logoIn{ from{ opacity:0; transform:scale(.8) translateY(-10px);} to{ opacity:1; } }

.promo{
  display:inline-block; margin:4px 0 6px;
  padding:7px 16px; border-radius:999px;
  font-size:14px; font-weight:700; color:#7a1414; text-decoration:none;
  background:linear-gradient(180deg, #fff3cf, #ffd45a);
  box-shadow:0 4px 12px rgba(150,90,0,.35), inset 0 1px 0 #fffbe9;
  border:1px solid #fff3cf;
  animation:pulseBadge 2.2s ease-in-out infinite;
}
@keyframes pulseBadge{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.05);} }
.line-id{ font-size:15px; font-weight:600; color:var(--ink); margin:8px 0 18px; }
.line-id b{ color:#7a1414; }

.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:15px 18px; margin-bottom:13px;
  border:none; border-radius:16px; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:16.5px;
  text-decoration:none; position:relative; overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
  animation:btnIn .6s ease both;
}
.btn:nth-of-type(1){ animation-delay:.15s; }
.btn:nth-of-type(2){ animation-delay:.28s; }
.btn:nth-of-type(3){ animation-delay:.41s; }
@keyframes btnIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }
.btn:active{ transform:scale(.98); }
.btn-green{
  color:#fff;
  background:linear-gradient(180deg, var(--green-1) 0%, #2faa55 45%, var(--green-2) 100%);
  box-shadow:0 8px 20px rgba(20,90,40,.4), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-gold{
  color:#5a2e00;
  background:linear-gradient(180deg, var(--gold-1) 0%, #f3cb5b 45%, var(--gold-2) 100%);
  border:1px solid #fff3cf;
  box-shadow:0 8px 20px rgba(180,120,0,.4), inset 0 1px 0 #fff6d6;
}
.btn:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.btn::after{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(110deg, transparent, rgba(255,255,255,.6), transparent);
  transform:skewX(-20deg); animation:btnShine 4.5s ease-in-out infinite;
}
.btn:hover::after{ animation:none; left:130%; transition:left .6s ease; }
@keyframes btnShine{ 0%{ left:-120%; } 22%,100%{ left:150%; } }

.footer{ margin-top:16px; font-size:11px; color:rgba(70,45,0,.7); }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; } }