@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:#07120e;
  --bg2:#0c1c16;
  --ink:#fbf6e8;
  --muted:#d9c79a;
  --gold:#e8c36a;
  --gold2:#f6e2a2;
  --ruby:#c81e3a;
  --emerald:#1f6b4a;
  --deep:#04110c;
  --card:rgba(6,22,18,.78);
  --stroke:rgba(232,195,106,.32);
  --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:#fffdf8;
  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,#f3d78a 0%,#e0b24a 42%,#c81e3a 100%);
  box-shadow:0 0 0 1px rgba(255,236,180,.28),0 8px 28px rgba(200,30,58,.38);
  animation:breathe 2.4s ease-in-out infinite;
}
.btn:hover,.btn:focus-visible{
  filter:brightness(1.06);
  outline:2px solid #f6e2a2;
  outline-offset:3px;
}
.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,.5) 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 1px rgba(255,236,180,.28),0 8px 28px rgba(200,30,58,.32)}
  50%{transform:scale(1.035);box-shadow:0 0 0 1px rgba(255,236,180,.5),0 10px 36px rgba(200,30,58,.5)}
}
@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}


/* ===================== v4 stage system ===================== */
.stage{position:relative;overflow:hidden;background:#06130e;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.stage{overflow:hidden}
.hero-art .mark{position:absolute}
.hero-art::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,17,12,.25),rgba(4,17,12,0) 30%,rgba(4,17,12,0) 70%,rgba(4,17,12,.55))}

/* light rays + glow */
.rays{position:absolute;inset:-10% -10% 20% -10%;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background:repeating-conic-gradient(from 188deg at 62% -6%,rgba(255,224,140,0) 0deg 5deg,rgba(255,224,140,.16) 6.5deg 8deg,rgba(255,224,140,0) 9.5deg 14deg);
  -webkit-mask-image:radial-gradient(ellipse 70% 85% at 62% 0%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 85% at 62% 0%,#000 20%,transparent 75%);
  animation:raybreath 6s ease-in-out infinite}
@keyframes raybreath{0%,100%{opacity:.42}50%{opacity:.78}}
.fx-glow{filter:drop-shadow(0 0 22px rgba(255,214,120,.35));opacity:.9;z-index:2}

/* flying characters: gentle float (no change to shape) */
.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.1%)}}

/* soft floor shadows under characters (ellipse, no image) */
.floorshadow{position:absolute;z-index:2;aspect-ratio:14/1;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.55),rgba(0,0,0,0) 70%);filter:blur(2px)}

/* ---------- slot machine with decorative reels ---------- */
.machine{position:relative;container-type:inline-size;line-height:0}
.machine .m-img{display:block;width:100%;height:auto}
.machine .reels{position:absolute;inset:0;pointer-events:none}
.reel{position:absolute;top:37.8%;height:30.4%;overflow:hidden;border-radius:2.2cqw;
  background:linear-gradient(90deg,#050d0a,#0b1a14 50%,#050d0a);
  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:18.7%;width:17.4%}
.reel.r2{left:41.2%;width:17.6%}
.reel.r3{left:64%;width:17.3%}
.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)}
.reel::selection{background: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}
.machine .sym.seven{color:#f4d36a;font-size:11cqw;text-shadow:0 0 1.6cqw rgba(244,211,106,.75)}
.machine .sym.bar{color:#f6e2a2;font-size:4.2cqw;letter-spacing:.08em}
.sym.gem::before{content:"";width:38%;aspect-ratio:1;background:linear-gradient(135deg,#7ef0c0,#1f6b4a 55%,#0a2a1c);transform:rotate(45deg);border-radius:3px;box-shadow:0 0 10px rgba(80,220,160,.55)}
.sym.coin::before{content:"";width:42%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,#e0b24a 45%,#8a6a1a);box-shadow:0 0 8px rgba(224,178,74,.55)}
.sym.cherry::before{content:"";width:22%;aspect-ratio:1;border-radius:50%;background:#c81e3a;box-shadow:10px 2px 0 #c81e3a,4px -8px 0 -5px #3a7a28}
.sym.bell::before{content:"";width:32%;height:28%;background:#f0c55a;border-radius:10px 10px 3px 3px;box-shadow:0 10px 0 -5px #e8c36a}
.bulbglow{position:absolute;left:12%;right:12%;top:3%;height:14%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 70%,rgba(255,226,140,.55),rgba(255,226,140,0) 70%);
  mix-blend-mode:screen;animation:bulbpulse 1.6s ease-in-out infinite}
@keyframes bulbpulse{0%,100%{opacity:.35}50%{opacity:1}}

/* ---------- falling coins (decorative; not a result) ---------- */
.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%,#f0c04a 40%,#a87a1c 75%,#7a5510);
  box-shadow:inset 0 0 0 .14em #ffe9a0,inset 0 0 0 .26em #b8841f,0 0 10px rgba(255,214,120,.5);
  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}
}
.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:#fff7d0;
  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,226,140,.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,#5b0f1d,#8a1a2c 45%,#4a0c18);border-block:2px solid #e8c36a;
  box-shadow:0 0 28px rgba(200,30,58,.35),inset 0 0 22px rgba(0,0,0,.45)}
.sign .bulbs{position:absolute;left:0;right:0;height:10px;background:
  radial-gradient(circle,#fff6c4 0 28%,#f6c34a 30% 46%,rgba(246,195,74,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:#f4d36a;text-shadow:0 0 12px rgba(244,211,106,.8)}
.sign .sym.bar{color:#f6e2a2;font-size:.46em;letter-spacing:.05em}
.sign .star{width:100%;height:100%;background:#fff1b8;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,226,140,.9))}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* bulb frame around the gift stage (灯牌框) */
.bframe{position:absolute;inset:6px;z-index:6;pointer-events:none;border:2px solid rgba(232,195,106,.75);border-radius:14px;box-shadow:0 0 18px rgba(255,214,120,.3) inset}
.bframe .bulbs{position:absolute;background:radial-gradient(circle,#fff6c4 0 26%,#f6c34a 30% 46%,rgba(246,195,74,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-copy{padding:1.15rem 1.25rem 1.6rem;max-width:40rem}
.hero-copy h1{font-size:clamp(1.7rem,7.2vw,2.35rem);margin:0 0 .45rem;text-shadow:0 6px 28px rgba(4,17,12,.7)}
.hero-copy h1 .amt{color:#f6e2a2;text-shadow:0 0 18px rgba(232,195,106,.45);white-space:nowrap}
.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(4,17,12,.55)}
@media (min-width:900px){
  .hero-copy{position:absolute;left:5%;top:46%;transform:translateY(-50%);width:40%;max-width:none;padding:0;z-index:2}
  .hero-copy h1{font-size:clamp(2.1rem,3.2vw,3.25rem);text-shadow:0 8px 32px rgba(4,17,12,.75)}
  .sub{font-size:1.15rem}
  .mark{top:22px;left:24px;width:44px;height:44px}
  .hero-art::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(4,17,12,.88),rgba(4,17,12,.55) 28%,rgba(4,17,12,0) 48%)}
}
.hero{position:relative}
.hero-art .mark{z-index:7}

/* ---------- gifts ---------- */
.gifts{display:grid;gap:0;background:linear-gradient(180deg,#0c1c16,var(--bg2))}
.gifts-copy{padding:1.5rem 1.25rem 2rem}
.gifts-copy h2{font-size:clamp(1.45rem,5vw,2rem)}
.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:#06130e url(hero-wide-bg.jpg) 28% 70%/230% auto no-repeat;background-image:image-set(url(hero-wide-bg.webp) type("image/webp"),url(hero-wide-bg.jpg) type("image/jpeg"))}
.g-ribbons{left:14%;top:-4%;width:76%}
.g-mA{left:3%;top:24%;width:30%}
.g-mB{left:30%;top:10%;width:38%}
.g-hippo{left:60%;top:42%;width:36%}
.g-chest{left:3%;top:68%;width:26%;z-index:4}
.g-gems{left:33%;top:70%;width:19%;z-index:4}
.g-mA .machine,.g-mB .machine{filter:drop-shadow(0 14px 18px rgba(0,0,0,.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}
.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:16px;padding:1.05rem 1.1rem 1.15rem}
.step .num{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;background:linear-gradient(180deg,#f3d78a,#c81e3a);color:#fffdf8;font-family:"Kanit",sans-serif;font-weight:700;margin-bottom:.4rem}
.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:16px;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}
.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:#06130e url(hero-wide-bg.jpg) 40% 45%/260% auto no-repeat;background-image:image-set(url(hero-wide-bg.webp) type("image/webp"),url(hero-wide-bg.jpg) type("image/jpeg"))}
.cstage::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(180deg,rgba(4,17,12,0) 35%,rgba(4,17,12,.88))}
@media (min-width:900px){.cstage::after{background:radial-gradient(ellipse 30% 34% at 50% 80%,rgba(4,17,12,.9),rgba(4,17,12,0) 72%),linear-gradient(180deg,rgba(4,17,12,0) 45%,rgba(4,17,12,.8))}}
.c-ribbons{left:10%;top:-6%;width:80%;opacity:.7}
.c-mA{left:4%;top:18%;width:36%}
.c-mB{left:60%;top:18%;width:36%}
.c-mA .machine,.c-mB .machine{filter:drop-shadow(0 14px 18px rgba(0,0,0,.55))}
.close-copy{padding:1.6rem 1.25rem 2rem}
.close-copy h2{font-size:clamp(1.6rem,6vw,2.4rem);text-shadow:0 4px 28px rgba(4,17,12,.9),0 0 24px rgba(4,17,12,.7)}
.close-copy p{margin:0 auto 1.15rem;color:#f6e2a2;max-width:34rem;font-size:1.05rem;line-height:1.55;text-shadow:0 2px 18px rgba(4,17,12,.95)}
@media (min-width:900px){
  .cstage{aspect-ratio:2160/860}
  .c-mA{left:12%;top:8%;width:20%}
  .c-mB{left:68%;top:8%;width:20%}
  .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:#04110c}
.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(4,17,12,0),rgba(4,17,12,.92) 28%,rgba(4,17,12,.96));pointer-events:none}
  .dock .btn{width:100%;pointer-events:auto;min-height:3.4rem}
}

/* ---------- reduced motion: everything stops ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .rain{display:none}
  .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 .sp,html.force-motion .fly,html.force-motion .track{animation-play-state:running !important}
html.force-motion .rise{opacity:1}

/* ---- generated layout: tall (mobile) ---- */
.hero-art{aspect-ratio:1170/1560}
.hero-art .p-dragon{left:34.188%;top:2.564%;width:30.513%}
.hero-art .p-sage{left:5.983%;top:50.000%;width:38.462%}
.hero-art .p-cab{left:41.026%;top:51.538%;width:35.214%}
.hero-art .p-trex{left:66.667%;top:7.051%;width:32.051%}
.hero-art .p-duo{left:3.419%;top:27.564%;width:30.855%}
.hero-art .p-solo{left:76.923%;top:35.897%;width:19.060%}
.hero-art .p-chest{left:72.650%;top:69.872%;width:26.496%}
.hero-art .p-gems{left:42.735%;top:89.744%;width:14.359%}
.hero-art .p-ribbons{left:12.821%;top:24.359%;width:70.000%}
.hero-art .sh-sage{left:4.060%;top:86.442%;width:38.462%}
.hero-art .sh-cab{left:37.692%;top:86.353%;width:40.171%}
@media (min-width:900px){
.hero-art{aspect-ratio:2160/1350}
.hero-art .p-dragon{left:43.287%;top:1.481%;width:16.528%}
.hero-art .p-sage{left:41.898%;top:40.370%;width:20.833%}
.hero-art .p-cab{left:61.019%;top:37.778%;width:21.204%}
.hero-art .p-trex{left:82.407%;top:51.852%;width:17.361%}
.hero-art .p-duo{left:81.944%;top:20.000%;width:16.713%}
.hero-art .p-solo{left:69.444%;top:8.148%;width:10.324%}
.hero-art .p-chest{left:25.926%;top:74.815%;width:15.926%}
.hero-art .p-gems{left:58.333%;top:77.037%;width:14.167%}
.hero-art .p-ribbons{left:53.704%;top:1.481%;width:37.917%}
.hero-art .sh-sage{left:40.625%;top:82.800%;width:21.296%}
.hero-art .sh-cab{left:59.583%;top:82.489%;width:24.074%}
.hero-art .sh-trex{left:83.449%;top:79.770%;width:15.278%}
}