@font-face{font-family:"Kanit";src:url("kanit-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Kanit";src:url("kanit-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans Thai";src:url("noto-sans-thai-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans Thai";src:url("noto-sans-thai-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --bg:#1c0517;
  --bg2:#2c0a24;
  --royal:#5a0e43;
  --ink:#ffffff;
  --muted:#f1d7ea;
  --aqua:#ff4fa3;
  --pink:#ff2d87;
  --sun:#ffcf3d;
  --sun2:#ffe49a;
  --deep:#12030f;
  --card:rgba(255,226,140,.07);
  --stroke:rgba(255,207,61,.42);
  --safe-dock:calc(4.75rem + env(safe-area-inset-bottom,0px));
}
*{box-sizing:border-box}
html{color-scheme:dark;background:var(--bg)}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden}
body{
  font-family:"Noto Sans Thai","Kanit",system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  word-break:keep-all;
  overflow-wrap:normal;
  line-break:strict;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
.skip{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:12px;top:12px;width:auto;height:auto;padding:.5rem 1rem;background:#fff;color:#000;z-index:80;border-radius:8px}

h1,h2,h3,p,li,dt,dd{overflow:visible}
h1,h2{
  font-family:"Kanit","Noto Sans Thai",sans-serif;
  font-weight:700;
  letter-spacing:0;
  line-height:1.45;
  padding-top:.18em;
  margin:0 0 .55em;
  text-wrap:balance;
}
.lock{white-space:nowrap}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  min-height:3.35rem;
  padding:.8rem 1.55rem .8rem;
  padding-top:.9rem;
  border:0;
  border-radius:999px;
  color:#3a0626;
  font-family:"Kanit","Noto Sans Thai",sans-serif;
  font-weight:700;
  font-size:1.125rem;
  line-height:1.5;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:linear-gradient(100deg,#fff2a6 0%,#ffd23a 45%,#ff9f1c 100%);
  box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(255,45,135,.9),0 10px 30px rgba(255,190,40,.5);
  animation:breathe 2.4s ease-in-out infinite;
}
.btn:hover,.btn:focus-visible{filter:brightness(1.05);outline:3px solid #fff;outline-offset:4px}
.btn .ic{width:1.25rem;height:1.25rem;flex:0 0 auto}
.btn::after{
  content:"";position:absolute;inset:-20%;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.75) 50%,transparent 58%);
  transform:translateX(-120%);animation:sweep 2.8s ease-in-out infinite;pointer-events:none;z-index:1;
}
.btn > *{position:relative;z-index:2}

@keyframes breathe{
  0%,100%{transform:scale(1);box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(255,45,135,.9),0 10px 30px rgba(255,190,40,.42)}
  50%{transform:scale(1.04);box-shadow:0 0 0 2px #fff,0 0 0 6px rgba(255,45,135,1),0 12px 42px rgba(255,200,50,.68)}
}
@keyframes sweep{0%,55%{transform:translateX(-120%)}80%,100%{transform:translateX(120%)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes reelspin{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.rise{animation:rise .7s ease both}
.d1{animation-delay:.08s}
.d2{animation-delay:.18s}
.d3{animation-delay:.3s}
/* ===================== stage system ===================== */
.stage{position:relative;overflow:hidden;background:#2b0620;isolation:isolate}
.stage .bg,.stage .bg img{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage .bg img{object-fit:cover}
.layer{position:absolute;z-index:3;line-height:0}
.layer picture,.layer img{display:block;width:100%;height:auto}
.hero-art .mark{position:absolute}

/* spotlight beams + fireworks (decorative) */
.beams{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.beam{position:absolute;top:-6%;width:34%;height:100%;transform-origin:50% 0;mix-blend-mode:screen;
  background:linear-gradient(180deg,rgba(255,214,110,.5),rgba(255,120,190,.12) 70%,transparent);
  clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);opacity:.5;animation:beamswing 8s ease-in-out infinite alternate}
.beam.b1{left:12%;--a:-9deg;--b:9deg}
.beam.b2{left:54%;--a:10deg;--b:-8deg;animation-delay:-3s;background:linear-gradient(180deg,rgba(255,110,190,.5),rgba(255,214,110,.1) 70%,transparent)}
@keyframes beamswing{from{transform:rotate(var(--a))}to{transform:rotate(var(--b))}}
.fws{position:absolute;inset:0;z-index:2;pointer-events:none}
.fw{position:absolute;width:var(--sz);aspect-ratio:1;transform:translate(-50%,-50%) scale(0);opacity:0;animation:burst var(--d) ease-out var(--dl) infinite}
.fw::before,.fw::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(var(--c) 0 2.2deg,transparent 2.2deg 11.25deg);
  -webkit-mask-image:radial-gradient(circle,transparent 24%,#000 27%,#000 62%,transparent 70%);mask-image:radial-gradient(circle,transparent 24%,#000 27%,#000 62%,transparent 70%);
  filter:drop-shadow(0 0 5px var(--c))}
.fw::after{inset:14%;transform:rotate(5.6deg);opacity:.85}
@keyframes burst{0%{transform:translate(-50%,-50%) scale(.1);opacity:0}12%{opacity:1}70%{opacity:.8}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* floating */
.fly{animation:bob 5.2s ease-in-out infinite}
.fly.f2{animation-duration:6.4s;animation-delay:-1.6s}
.fly.f3{animation-duration:4.6s;animation-delay:-.8s}
.fly.f4{animation-duration:5.8s;animation-delay:-2.6s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2%)}}
.floorshadow{position:absolute;z-index:2;aspect-ratio:12/1;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(10,0,10,.55),rgba(10,0,10,0) 70%);filter:blur(2px)}
/* ---------- slot machine with decorative reels ---------- */
.machine{position:relative;container-type:inline-size;line-height:0}
.machine .reels{position:absolute;inset:0;pointer-events:none}
.reel{position:absolute;top:33.4%;height:31.6%;overflow:hidden;border-radius:2.4cqw;
  background:linear-gradient(90deg,#10020c,#3a0a2a 50%,#10020c);
  box-shadow:inset 0 .6cqw 1.4cqw rgba(0,0,0,.7),inset 0 -.6cqw 1.4cqw rgba(0,0,0,.6)}
.reel.r1{left:20.2%;width:17.7%}
.reel.r2{left:41%;width:17.8%}
.reel.r3{left:62%;width:17.8%}
.reel::before,.reel::after{content:"";position:absolute;left:0;right:0;height:22%;z-index:2;pointer-events:none}
.reel::before{top:0;background:linear-gradient(180deg,rgba(0,0,0,.72),transparent)}
.reel::after{bottom:0;background:linear-gradient(0deg,rgba(0,0,0,.72),transparent)}
.machine .strip{display:flex;flex-direction:column;height:400%;animation:reelspin 18s linear infinite}
.machine .s2{animation-duration:23.5s;animation-delay:-7.4s}
.machine .s3{animation-duration:29s;animation-delay:-13.2s}
.machine .sym{flex:0 0 calc(100% / 12);height:calc(100% / 12);display:flex;align-items:center;justify-content:center;font-family:"Kanit",sans-serif;font-weight:700;line-height:1}
.sym.seven{color:#ffd23a;font-size:11cqw;text-shadow:0 0 1.6cqw rgba(255,45,135,.9),0 .5cqw 0 #d1126a}
.sym.bar{color:#fff;font-size:4.2cqw;letter-spacing:.08em;text-shadow:0 0 1.2cqw rgba(255,79,163,.95)}
.sym.gem::before{content:"";width:38%;aspect-ratio:1;background:linear-gradient(135deg,#ffd0e6,#ff2d87 55%,#8f0a4d);transform:rotate(45deg);border-radius:3px;box-shadow:0 0 10px rgba(255,45,135,.8)}
.sym.coin::before{content:"";width:42%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,#ffd62e 45%,#b97a00);box-shadow:0 0 8px rgba(255,214,46,.7)}
.bulbglow{position:absolute;left:14%;right:14%;top:5%;height:12%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 60%,rgba(255,240,140,.6),rgba(255,240,140,0) 70%);
  mix-blend-mode:screen;animation:bulbpulse 1.6s ease-in-out infinite}
@keyframes bulbpulse{0%,100%{opacity:.3}50%{opacity:1}}

.sym.chip::before{content:"";width:46%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#5a1a6e 0 38%,#b43aff 40% 50%,#5a1a6e 52%);box-shadow:inset 0 0 0 .6cqw #fff,0 0 8px rgba(190,70,255,.7)}
.sym.star::before{content:"";width:46%;aspect-ratio:1;background:#ffe27a;clip-path:polygon(50% 0,61% 38%,100% 38%,68% 60%,80% 100%,50% 75%,20% 100%,32% 60%,0 38%,39% 38%);filter:drop-shadow(0 0 4px rgba(255,210,80,.9))}

/* ---------- falling coins / gems ---------- */
.rain{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.cn{position:absolute;top:-8%;width:calc(var(--s) * clamp(14px,1.7vw,28px));aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff6c8 0 18%,#ffd23a 40%,#c98a00 75%,#8a5a00);
  box-shadow:inset 0 0 0 .14em #fff0a0,inset 0 0 0 .26em #d9a000,0 0 10px rgba(255,210,60,.6);
  animation:coinfall var(--d) linear var(--dl) infinite}
@keyframes coinfall{
  0%{transform:translate(0,0) scaleX(1);opacity:0}
  6%{opacity:1}
  25%{transform:translate(calc(var(--dx) * .25),30vh) scaleX(.15)}
  50%{transform:translate(calc(var(--dx) * .5),62vh) scaleX(1)}
  75%{transform:translate(calc(var(--dx) * .75),94vh) scaleX(.2)}
  100%{transform:translate(var(--dx),125vh) scaleX(1);opacity:1}
}
.gm{position:absolute;top:-8%;width:calc(var(--s) * clamp(12px,1.4vw,22px));aspect-ratio:1;transform-origin:center;
  background:linear-gradient(135deg,#ffd0e6,#ff2d87 55%,#8f0a4d);border-radius:3px;box-shadow:0 0 9px rgba(255,45,135,.8);
  animation:gemfall var(--d) linear var(--dl) infinite}
.gm:nth-of-type(even){background:linear-gradient(135deg,#f1d4ff,#b43aff 55%,#4e1190);box-shadow:0 0 9px rgba(180,70,255,.8)}
@keyframes gemfall{
  0%{transform:translate(0,0) rotate(45deg);opacity:0}
  8%{opacity:1}
  100%{transform:translate(var(--dx),115vh) rotate(405deg);opacity:1}
}
.stage .rain{height:100%}
/* sparkles */
.sparks{position:absolute;inset:0;z-index:5;pointer-events:none}
.sp{position:absolute;width:calc(var(--s) * clamp(14px,1.6vw,26px));aspect-ratio:1;background:#fff3c0;
  clip-path:polygon(50% 0,59% 41%,100% 50%,59% 59%,50% 100%,41% 59%,0 50%,41% 41%);
  filter:drop-shadow(0 0 6px rgba(255,215,90,.95));animation:twinkle 2.8s ease-in-out var(--dl) infinite}
@keyframes twinkle{0%,100%{transform:scale(.2) rotate(0);opacity:0}45%{transform:scale(1) rotate(45deg);opacity:1}70%{transform:scale(.5) rotate(70deg);opacity:.5}}
/* ---------- marquee sign ---------- */
.sign{position:relative;height:clamp(52px,5.6vw,82px);overflow:hidden;
  background:linear-gradient(180deg,#3d0a30,#6b1250 48%,#34082a);border-block:3px solid #ffcf3d;
  box-shadow:0 0 28px rgba(255,190,50,.45),inset 0 0 22px rgba(0,0,0,.45)}
.sign .bulbs{position:absolute;left:0;right:0;height:10px;background:
  radial-gradient(circle,#fffbd0 0 28%,#ffcf3d 30% 46%,rgba(255,207,61,0) 52%) 0 0/26px 10px repeat-x}
.sign .b-top{top:3px;animation:chase 1s steps(1) infinite}
.sign .b-bot{bottom:3px;animation:chase 1s steps(1) infinite reverse}
@keyframes chase{0%{background-position:0 0;opacity:1}50%{background-position:13px 0;opacity:.55}100%{background-position:26px 0;opacity:1}}
.sign .track{position:absolute;left:0;top:0;bottom:0;margin:0;padding:0;list-style:none;display:flex;align-items:center;gap:clamp(34px,5vw,80px);
  width:max-content;padding-inline:clamp(17px,2.5vw,40px);animation:ticker 40s linear infinite}
.sign li{display:flex;align-items:center;justify-content:center;width:clamp(28px,3.6vw,52px);height:clamp(28px,3.6vw,52px);font-size:clamp(22px,2.9vw,40px)}
.sign .sym{flex:none;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:"Kanit",sans-serif;font-weight:700;line-height:1}
.sign .sym.seven{color:#ffe27a;font-size:1em;text-shadow:0 0 12px rgba(255,200,60,.8),0 2px 0 #8f0a4d}
.sign .sym.bar{color:#fff;font-size:.46em;letter-spacing:.05em;text-shadow:0 0 10px rgba(255,79,163,.95),0 1px 0 #8f0a4d}
.sign .sym.chip::before,.sign .sym.star::before{width:80%}
.sign .star{width:100%;height:100%;background:#ffe27a;clip-path:polygon(50% 0,61% 38%,100% 38%,68% 60%,80% 100%,50% 75%,20% 100%,32% 60%,0 38%,39% 38%);filter:drop-shadow(0 0 8px rgba(255,210,80,.9))}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bframe{position:absolute;inset:6px;z-index:6;pointer-events:none;border:2px solid rgba(255,207,61,.85);border-radius:14px;box-shadow:0 0 18px rgba(255,190,50,.3) inset}
.bframe .bulbs{position:absolute;background:radial-gradient(circle,#fffbd0 0 26%,#ffcf3d 30% 46%,rgba(255,207,61,0) 52%)}
.bframe .h{left:8px;right:8px;height:10px;background-size:22px 10px;background-repeat:repeat-x;animation:chase 1.1s steps(1) infinite}
.bframe .v{top:8px;bottom:8px;width:10px;background-size:10px 22px;background-repeat:repeat-y;animation:chase 1.1s steps(1) infinite reverse}
.bframe .t{top:3px}.bframe .b{bottom:3px}.bframe .l{left:3px}.bframe .r{right:3px}

/* ---------- hero text zone ---------- */
.hero{position:relative}
.hero-art .mark{z-index:7}
.hero-art::before{content:"";position:absolute;left:0;right:0;bottom:0;height:20%;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(28,5,23,0),rgba(28,5,23,.92))}
.hero-copy{padding:1.1rem 1.25rem 1.6rem;max-width:40rem;background:linear-gradient(180deg,#1c0517,#2c0a24)}
.hero-copy h1{font-size:clamp(1.7rem,7.2vw,2.35rem);margin:0 0 .45rem;text-shadow:0 3px 0 #5a0e43,0 6px 22px rgba(20,0,16,.7)}
.hero-copy h1 .amt{color:var(--sun);text-shadow:0 3px 0 #b3105f,0 0 24px rgba(255,200,60,.6);white-space:nowrap}
.hero-copy h1 .kick{display:inline-block;margin-bottom:.15em;padding:.06em .8em .02em;border-radius:999px;font-size:.5em;line-height:1.7;font-weight:700;color:#fff;
  background:linear-gradient(90deg,#d1126a,#ff2d87);box-shadow:0 0 0 2px rgba(255,214,90,.9),0 4px 14px rgba(255,45,135,.45);text-shadow:none}
.sub{margin:0 0 1.15rem;color:var(--muted);font-size:1.05rem;line-height:1.55;padding-top:.1em;text-shadow:0 2px 12px rgba(20,0,16,.7)}
.hero-copy .btn{margin-top:.2rem}
@media (min-width:900px){
  .hero-copy{position:absolute;left:4.5%;top:46%;transform:translateY(-50%);width:30%;max-width:none;padding:0;z-index:6;background:none}
  .hero-copy h1{font-size:clamp(1.9rem,2.9vw,3.1rem);text-shadow:0 3px 0 #5a0e43,0 8px 30px rgba(20,0,16,.85)}
  .sub{font-size:1.1rem;color:#f9e6f3}
  .mark{top:22px;left:24px;width:44px;height:44px}
  .hero-art::before{height:12%;background:linear-gradient(180deg,rgba(28,5,23,0),rgba(28,5,23,.55))}
  .hero-art::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(24,3,20,.7),rgba(24,3,20,.38) 26%,rgba(24,3,20,0) 44%)}
}

/* ---------- gifts ---------- */
.gifts{display:grid;gap:0;background:linear-gradient(180deg,var(--bg2),#3a0a2e)}
.gifts-copy{padding:1.5rem 1.25rem 2rem}
.gifts-copy h2{font-size:clamp(1.45rem,5vw,2rem);text-shadow:0 2px 0 #5a0e43}
.gifts-copy p{margin:0 0 1.15rem;color:var(--muted);font-size:1.05rem;line-height:1.55;padding-top:.1em}
.gstage{aspect-ratio:4/3.1}
.gbg{position:absolute;inset:0;z-index:0;background:#2b0620 url(stage-wide-bg.jpg) 62% 70%/230% auto no-repeat;background-image:image-set(url(stage-wide-bg.webp) type("image/webp"),url(stage-wide-bg.jpg) type("image/jpeg"))}
.g-mA{left:3%;top:30%;width:25%}
.g-mB{left:24%;top:13%;width:33%}
.g-hippo{left:62%;top:36%;width:36%}
.g-cave{left:52%;top:62%;width:15%;z-index:4}
.g-coins{left:20%;top:70%;width:36%;z-index:4}
.g-mA .machine,.g-mB .machine{filter:drop-shadow(0 12px 14px rgba(10,0,10,.55))}
@media (min-width:900px){
  .gifts{grid-template-columns:.85fr 1.15fr;align-items:center}
  .gifts-copy{padding:2.5rem 2rem 2.5rem 8%}
  .gifts-art{order:1}
}

/* ---------- steps / faq ---------- */
.steps{padding:2.2rem 1.25rem 1.5rem;background:var(--bg)}
.steps h2,.faq h2{text-align:center;font-size:clamp(1.45rem,5vw,2rem);margin-bottom:1.2rem;text-shadow:0 2px 0 #5a0e43}
.step-list{list-style:none;margin:0 auto;padding:0;display:grid;gap:1rem;max-width:980px}
.step{background:var(--card);border:1px solid var(--stroke);border-radius:18px;padding:1.05rem 1.1rem 1.15rem;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.step .num{display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;border-radius:50%;background:linear-gradient(180deg,#fff2a6,#ffbf2a);color:#3a0626;font-family:"Kanit",sans-serif;font-weight:700;margin-bottom:.4rem;box-shadow:0 0 0 2px #ff2d87}
.step h3{font-family:"Kanit","Noto Sans Thai",sans-serif;font-weight:700;font-size:1.12rem;margin:0 0 .25rem;padding-top:.12em;line-height:1.5}
.step p{margin:0;color:var(--muted);font-size:1rem;line-height:1.55;padding-top:.08em}
@media (min-width:900px){.step-list{grid-template-columns:repeat(3,1fr);gap:1.15rem;padding:0 2rem}}
.faq{padding:1.2rem 1.25rem 2rem;background:var(--bg2)}
.qa{max-width:720px;margin:0 auto 1rem;background:var(--card);border:1px solid var(--stroke);border-radius:18px;padding:1rem 1.15rem 1.1rem}
.qa h3{font-family:"Kanit","Noto Sans Thai",sans-serif;font-weight:700;font-size:1.08rem;margin:0 0 .3rem;padding-top:.12em;line-height:1.5;color:var(--sun2)}
.qa p{margin:0;color:var(--muted);font-size:1rem;line-height:1.55;padding-top:.08em}

/* ---------- close ---------- */
.close{position:relative;background:var(--deep);text-align:center}
.cstage{aspect-ratio:1170/760}
.cbg{position:absolute;inset:0;z-index:0;background:#2b0620 url(stage-wide-bg.jpg) 30% 70%/cover no-repeat;background-image:image-set(url(stage-wide-bg.webp) type("image/webp"),url(stage-wide-bg.jpg) type("image/jpeg"))}
.cstage::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(180deg,rgba(18,3,15,0) 45%,rgba(18,3,15,.92))}
@media (min-width:900px){.cstage::after{background:radial-gradient(ellipse 30% 40% at 50% 82%,rgba(18,3,15,.88),rgba(18,3,15,0) 72%),linear-gradient(180deg,rgba(18,3,15,0) 55%,rgba(18,3,15,.75))}}
.c-athena{left:3%;top:22%;width:36%}
.c-mA{left:25%;top:14%;width:27%}
.c-god{left:50%;top:24%;width:20%}
.c-fisher{left:61%;top:36%;width:22%;z-index:4}
.c-astro{left:79%;top:40%;width:18%;z-index:4}
.c-coins{left:38%;top:76%;width:30%;z-index:4}
.c-mA .machine{filter:drop-shadow(0 12px 14px rgba(10,0,10,.55))}
.close-copy{padding:1.6rem 1.25rem 2rem}
.close-copy h2{font-size:clamp(1.6rem,6vw,2.4rem);text-shadow:0 3px 0 #5a0e43,0 4px 24px rgba(20,0,16,.9)}
.close-copy p{margin:0 auto 1.15rem;color:#f9e6f3;max-width:34rem;font-size:1.05rem;line-height:1.55;text-shadow:0 2px 14px rgba(20,0,16,.95)}
@media (min-width:900px){
  .cstage{aspect-ratio:2160/860}
  .c-athena{left:3%;top:28%;width:19%}
  .c-mA{left:22%;top:16%;width:13%}
  .c-god{left:62%;top:26%;width:10%}
  .c-fisher{left:72%;top:36%;width:12.5%}
  .c-astro{left:85%;top:42%;width:10%}
  .c-coins{left:68%;top:78%;width:16%}
  .close-copy{position:absolute;left:0;right:0;bottom:6%;padding:0 2rem;z-index:5}
}

.foot{padding:1.4rem 1.25rem calc(1.4rem + var(--safe-dock));text-align:center;color:var(--muted);font-size:.92rem;line-height:1.55;background:var(--deep)}
.foot p{margin:0 0 .4rem;padding-top:.12em}
@media (min-width:900px){.foot{padding:1.8rem 2rem 2rem}}

.dock{display:none}
@media (max-width:899px){
  .hero-copy{padding-bottom:calc(1.15rem + var(--safe-dock))}
  html{scroll-padding-bottom:var(--safe-dock)}
  .dock{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(28,5,23,0),rgba(28,5,23,.9) 28%,rgba(28,5,23,.97));pointer-events:none}
  .dock .btn{width:100%;pointer-events:auto;min-height:3.4rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .rain,.fws{display:none}
  .beam{opacity:.4}
  .sp{opacity:.85;transform:scale(.7)}
  .rise{opacity:1}
  .machine .s1{transform:translateY(-8%)}
  .machine .s2{transform:translateY(-28%)}
  .machine .s3{transform:translateY(-46%)}
  .sign .track{transform:none}
}
html.force-motion .btn,html.force-motion .btn::after,html.force-motion .rise,html.force-motion .strip,html.force-motion .cn,html.force-motion .gm,html.force-motion .fw,html.force-motion .beam,html.force-motion .sp,html.force-motion .fly,html.force-motion .track,html.force-motion .bulbs,html.force-motion .bulbglow{animation-play-state:running !important}
html.force-motion .rise{opacity:1}

/* ---- layout: tall (mobile) ---- */
.hero-art{aspect-ratio:3/4}
.hero-art .p-dragon{left:62%;top:13%;width:33%}
.hero-art .p-god{left:2%;top:30%;width:28%}
.hero-art .p-athena{left:26%;top:33%;width:46%}
.hero-art .p-astro{left:1.5%;top:60%;width:22%;z-index:5}
.hero-art .p-fisher{left:21%;top:55%;width:31%;z-index:5}
.hero-art .p-trex{left:56%;top:60%;width:36%;z-index:5}
.hero-art .p-coins-l{left:12%;top:82%;width:44%;z-index:4}
.hero-art .p-coins-r{left:52%;top:80%;width:44%;z-index:6}
.hero-art .sh1{left:2%;top:67%;width:70%}
.hero-art .sh2{left:50%;top:86%;width:46%}
@media (min-width:900px){
.hero-art{aspect-ratio:16/9}
.hero-art .p-dragon{left:79%;top:5%;width:19%}
.hero-art .p-god{left:33.5%;top:13%;width:20%}
.hero-art .p-athena{left:47%;top:22%;width:31%}
.hero-art .p-astro{left:32%;top:54%;width:12.5%}
.hero-art .p-fisher{left:47%;top:48%;width:17%}
.hero-art .p-trex{left:68%;top:56%;width:19%}
.hero-art .p-coins-l{left:36%;top:76%;width:22%}
.hero-art .p-coins-r{left:64%;top:77%;width:22%;z-index:6}
.hero-art .sh1{left:34%;top:78%;width:40%}
.hero-art .sh2{left:60%;top:91%;width:30%}
}