:root{--gold:#ffca37;--deep:#761218;--red:#e9091b;--cream:#fff4c8;--ink:#55100e}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:"Kanit",sans-serif;color:var(--ink)}
body{background:#f7d985}
.game{isolation:isolate;position:relative;min-height:100svh;overflow:hidden;background:radial-gradient(ellipse at 50% 37%,#fff4bd 0,#ffe7a0 44%,#f6cf72 100%);display:flex;flex-direction:column;align-items:center;padding:0 18px 18px}
.game:before,.game:after{content:"";position:absolute;z-index:-1;top:-120px;width:390px;height:220px;border:4px solid #951019;border-radius:50%;opacity:.92}
.game:before{left:-180px;transform:rotate(19deg)}.game:after{right:-180px;transform:rotate(-19deg)}
.festoon{position:absolute;z-index:-1;top:0;left:0;width:100%;height:1px;border-top:2px solid #9f101b}
.topline{width:min(100%,520px);height:42px;display:flex;justify-content:center;align-items:center;gap:14px;color:#9f1620;font-weight:600;font-size:14px;letter-spacing:.02em}
.seal{display:grid;place-items:center;width:29px;height:29px;border:1px solid #d32921;color:#c82020;border-radius:50%;font-size:13px;transform:rotate(-10deg)}
.lantern{position:absolute;z-index:-1;top:54px;width:64px;height:88px;border-radius:25px 25px 19px 19px;background:linear-gradient(90deg,#c90019 0%,#ff2030 48%,#c90019 100%);box-shadow:inset 0 0 0 2px #ae0814,0 5px 14px #ae3d1926;display:grid;place-items:center;color:#ffcc34;font-size:25px}
.lantern:before{content:"";position:absolute;width:2px;height:38px;bottom:100%;background:#a31419}.lantern:after{content:"";position:absolute;top:100%;width:2px;height:28px;background:#b00d17}
.lantern-a{left:max(5vw,20px);transform:scale(.8)}.lantern-b{right:max(7vw,25px);top:74px;transform:scale(.95)}.lantern-c{left:25%;top:16px;transform:scale(.6);opacity:.7}
.spark{position:absolute;color:#ffb800;text-shadow:0 0 12px #fff8d4;font-style:normal;animation:twinkle 2.2s ease-in-out infinite alternate}.s1{left:8%;top:42%;font-size:27px}.s2{right:9%;top:38%;font-size:36px;animation-delay:.5s}.s3{left:13%;bottom:22%;font-size:20px;animation-delay:.9s}.s4{right:15%;bottom:18%;font-size:24px;animation-delay:1.4s}
.scene{width:min(100%,520px);min-height:calc(100svh - 72px);display:flex;flex-direction:column;align-items:center;position:relative;padding:15px 0 22px}
.intro{text-align:center;position:relative;z-index:2}.eyebrow{font-size:11px;letter-spacing:.22em;color:#b63024;font-weight:600}.intro h1,.result-heading h1{font-size:clamp(27px,7vw,38px);line-height:1.14;margin:2px 0;color:#7d1516;font-weight:800;text-shadow:0 2px 0 #fff5ca}.sub{font-size:14px;color:#8a4b25;margin:4px 0}
.sticks{position:relative;width:min(70vw,310px);height:clamp(245px,39svh,350px);margin-top:8px;z-index:1;transform-origin:50% 92%;transition:transform .15s}
.stick{position:absolute;bottom:9%;left:50%;width:clamp(16px,5vw,23px);height:82%;border:2px solid #761218;border-radius:8px 8px 4px 4px;background:linear-gradient(to bottom,#96151d 0 42%,#deb477 42% 100%);box-shadow:inset 3px 0 #ffffff12,3px 4px 0 #6d101315;transform-origin:50% 96%}
.stick:before{content:"";position:absolute;top:-1px;left:-2px;right:-2px;height:18%;background:#a41620;clip-path:polygon(0 100%,0 38%,18% 20%,22% 0,78% 0,82% 20%,100% 38%,100% 100%)}
.st1{transform:translateX(-126px) rotate(-14deg);height:66%}.st2{transform:translateX(-104px) rotate(-9deg);height:79%}.st3{transform:translateX(-80px) rotate(-6deg);height:90%}.st4{transform:translateX(-57px) rotate(-4deg);height:77%}.st5{transform:translateX(-35px) rotate(-2deg);height:95%}.st6{transform:translateX(-12px) rotate(0deg);height:100%}.st7{transform:translateX(12px) rotate(2deg);height:91%}.st8{transform:translateX(35px) rotate(4deg);height:83%}.st9{transform:translateX(58px) rotate(6deg);height:94%}.st10{transform:translateX(81px) rotate(8deg);height:76%}.st11{transform:translateX(103px) rotate(12deg);height:86%}.st12{transform:translateX(126px) rotate(15deg);height:65%}
.cup{position:relative;margin-top:-35px;width:min(83vw,390px);height:clamp(155px,21svh,206px);border-radius:24px 24px 48px 48px;background:linear-gradient(90deg,#8b1119,#a20f17 48%,#841018);box-shadow:inset 0 10px 0 #ed1022, inset 0 18px 0 #771016,0 20px 24px #79201725;z-index:2;transition:transform .1s}
.cup-rim{position:absolute;top:-15px;left:-1%;width:102%;height:32px;border:11px solid #f10c23;border-bottom-color:#a50c18;background:#6d1115;border-radius:50%}
.cup-emblem{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);color:#ffc82f;font-size:48px;text-shadow:0 2px 0 #7e1613}
.cup:after{content:"";position:absolute;inset:25px 12% 8px;border-radius:0 0 40% 40%;background:linear-gradient(90deg,#ffffff09,transparent 55%,#25000418);pointer-events:none}
.mascot{position:absolute;object-fit:contain;z-index:4;filter:drop-shadow(0 7px 6px #7a291b24);pointer-events:none}
.mascot-home{width:155px;height:auto;left:-22px;bottom:95px}
.home-copy{width:100%;position:relative;z-index:5;margin-top:-10px;text-align:center}
.tiny-label{display:block;color:#ffeec0;font-size:12px;font-weight:500;margin-bottom:7px;text-shadow:0 1px 4px #530b0e}
.draw-btn{width:min(100%,430px);min-height:72px;border:3px solid #53150b;border-radius:22px;background:linear-gradient(110deg,#ff641f,#ff491d);box-shadow:0 6px 0 #a62013,0 10px 18px #8d260b24;color:#fff;font:800 clamp(25px,7vw,36px) "Kanit",sans-serif;letter-spacing:.03em;display:flex;align-items:center;justify-content:center;gap:18px;cursor:pointer;transition:transform .12s,box-shadow .12s}
.draw-btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 #a62013,0 14px 20px #8d260b2b}.draw-btn:active{transform:translateY(5px);box-shadow:0 1px 0 #a62013}.draw-btn:disabled{opacity:.7;cursor:wait}.btn-icon{font-size:20px;color:#ffe08a}
.availability{font-size:12px;color:#7b301b;margin:12px 0 0}
footer{font-size:11px;color:#8d341e;opacity:.8}footer span{padding:0 7px;color:#e04425}
.result-scene{padding-top:14px;justify-content:flex-start;min-height:calc(100svh - 72px)}
.result-heading{text-align:center;position:relative;z-index:2}.result-heading h1{font-size:clamp(24px,6.8vw,36px);margin:1px 0 0}
.revealed-stick{width:92px;height:clamp(335px,44svh,420px);position:relative;margin:9px auto -26px;transform:rotate(12deg);border:7px solid #781218;border-radius:16px 16px 8px 8px;background:linear-gradient(to bottom,#a5121e 0 42%,#e0b97f 42%);box-shadow:inset 8px 0 #ffffff10,10px 10px 0 #6e101515;z-index:1;animation:rise .75s cubic-bezier(.16,1,.3,1) both}
.revealed-stick:before{content:"";position:absolute;left:-7px;right:-7px;top:-4px;height:68px;background:#a5121e;clip-path:polygon(0 100%,0 35%,19% 17%,24% 0,76% 0,81% 17%,100% 35%,100% 100%);border-radius:12px}
.revealed-stick b{position:absolute;top:12px;left:0;right:0;text-align:center;color:white;font:800 29px "Kanit",sans-serif;z-index:2}
.mascot-result{width:152px;right:-7px;bottom:178px;z-index:3}
.fortune-card{z-index:4;position:relative;width:min(100%,520px);min-height:144px;padding:15px 23px 16px;background:linear-gradient(130deg,#fa001a,#e60017 70%,#c80a17);border:5px solid #ffe18c;outline:2px solid #881414;border-radius:21px;box-shadow:0 8px 20px #7c171b2b;text-align:center;color:#fff;margin-top:auto;display:flex;flex-direction:column;align-items:center;justify-content:center}
.fortune-card:before,.fortune-card:after{content:"❀";position:absolute;color:#ffdc7c;font-size:27px;top:50%;transform:translateY(-50%)}.fortune-card:before{left:11px}.fortune-card:after{right:11px}
.card-ornament{font-size:13px;color:#ffd775;line-height:1}.number-label{font-weight:600;font-size:clamp(20px,5.5vw,29px);line-height:1.3}.number-label strong{font-weight:800}.fortune-card p{font-size:clamp(18px,5vw,25px);line-height:1.34;font-weight:600;margin:3px 13px 0}
.share-hint{margin:14px 0 11px;text-align:center;background:#ffc629;color:#53170c;border:2px solid #7b1716;border-radius:999px;padding:9px 13px;width:min(100%,480px);font-weight:600;font-size:14px}
.again-btn{border:0;background:transparent;color:#7c2018;font:600 14px "Kanit",sans-serif;padding:8px 15px;cursor:pointer}.again-btn span{display:inline-block;transform:rotate(45deg);margin-left:4px}
.hidden{display:none!important}
.warp{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;background:radial-gradient(circle,#fff5cc 0%,#ffd959b8 27%,#fa3229df 68%,#6b080de8 100%);opacity:0}
.warp.active{display:flex;animation:warp .9s ease-in-out forwards}.warp-ring{position:absolute;width:18vmin;height:18vmin;border:8px solid #ffec9d;border-radius:50%;box-shadow:0 0 35px #fff1a8;animation:expand .9s cubic-bezier(.2,.7,.2,1) forwards}.warp-ring.two{animation-delay:.14s;border-color:#ff6540}.warp span{font-size:70px;animation:spin .8s linear infinite}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:30;white-space:nowrap;background:#631016;color:#fff4cb;padding:11px 18px;border-radius:14px;box-shadow:0 5px 20px #34050955;font-size:14px}
.shaking .sticks{animation:shake .1s linear infinite alternate}.shaking .cup{animation:cupshake .11s linear infinite alternate}.shaking .stick{animation:stickshake .14s ease-in-out infinite alternate}.shaking .st2,.shaking .st10{animation-delay:.03s}.shaking .st3,.shaking .st9{animation-delay:.07s}.shaking .mascot-home{animation:bounce .35s ease-in-out infinite alternate}
@keyframes shake{from{transform:rotate(-3deg) translateX(-5px)}to{transform:rotate(4deg) translateX(5px)}}@keyframes cupshake{from{transform:rotate(-2deg) translateX(-3px)}to{transform:rotate(2deg) translateX(3px)}}@keyframes stickshake{from{margin-left:-3px}to{margin-left:3px}}@keyframes bounce{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-9px) rotate(2deg)}}@keyframes twinkle{from{opacity:.5;transform:scale(.8)}to{opacity:1;transform:scale(1.15)}}@keyframes warp{0%{opacity:0}25%,70%{opacity:1}100%{opacity:0;visibility:hidden}}@keyframes expand{to{width:170vmax;height:170vmax;border-width:0;opacity:.2}}@keyframes spin{to{transform:rotate(360deg) scale(1.15)}}@keyframes rise{from{transform:translateY(42px) rotate(7deg);opacity:0}to{transform:translateY(0) rotate(12deg);opacity:1}}
@media(min-width:700px){.scene{min-height:calc(100svh - 58px);padding-top:20px}.intro{margin-top:8px}.sticks{height:min(41svh,380px);width:350px}.cup{width:420px;height:min(22svh,215px)}.mascot-home{width:180px;left:-10px}.result-scene{padding-top:18px}.revealed-stick{height:min(46svh,440px);width:100px}.mascot-result{width:176px;right:-3px;bottom:188px}.lantern{top:65px}.result-heading h1{font-size:38px}}
@media(max-height:710px){.topline{height:34px}.scene{min-height:calc(100svh - 55px);padding-top:5px}.intro h1{font-size:27px}.sticks{height:31svh;min-height:185px}.cup{height:17svh;min-height:120px;margin-top:-28px}.mascot-home{width:125px;bottom:73px}.draw-btn{min-height:60px}.result-scene{padding-top:5px}.revealed-stick{height:35svh;min-height:240px;margin-top:0}.fortune-card{min-height:125px;padding:10px 20px}.share-hint{margin:8px 0}.mascot-result{width:130px;bottom:162px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* Mobile-app layout polish: safe-area spacing, calmer hierarchy, clearer art. */
html{min-height:100%;background:#f7d985}
body{min-height:100dvh;overscroll-behavior:none}
.game{
  min-height:100dvh;
  padding:env(safe-area-inset-top) max(18px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  background:
    radial-gradient(ellipse at 50% 42%,#fff7d4 0,#ffedb0 48%,#f4cf79 100%);
}
.game:before,.game:after{z-index:0;border-color:#a4141c26;opacity:.75}
.festoon{z-index:0;opacity:.55}
.lantern,.spark{z-index:0;pointer-events:none}
.lantern{opacity:.42;transform:scale(.72)}
.lantern-a{left:2px;top:92px}
.lantern-b{right:0;top:105px}
.lantern-c{left:auto;right:23%;top:14px;opacity:.27}
.spark{opacity:.65}
.topline{
  position:relative;z-index:2;flex:none;
  width:min(100%,440px);height:42px;gap:12px;
  font-size:13px;color:#8b1719;
}
.seal{width:28px;height:28px;font-size:12px;background:#fff4cc80}
.scene{
  z-index:1;width:min(100%,440px);
  min-height:calc(100dvh - 78px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  padding:12px 0 10px;
}
.intro{margin-top:7px}
.eyebrow{font-size:10px;letter-spacing:.2em}
.intro h1{font-size:clamp(30px,8vw,37px);margin:4px 0 2px;letter-spacing:-.02em}
.sub{font-size:14px;margin:2px 0;color:#88502d}
.sticks{width:min(78vw,340px);height:clamp(220px,37dvh,330px);margin-top:5px}
.cup{
  width:min(86vw,400px);height:clamp(145px,19dvh,178px);
  margin-top:-30px;border-radius:24px 24px 42px 42px;
  box-shadow:inset 0 9px 0 #f30d24,inset 0 17px 0 #771016,0 16px 25px #79201720;
}
.cup-emblem{font-size:44px}
.mascot-home{width:220px;height:auto;left:-20px;bottom:clamp(75px,10dvh,94px)}
.home-copy{margin-top:-4px}
.tiny-label{font-size:12px;margin-bottom:8px}
.draw-btn{
  width:min(100%,420px);min-height:68px;border-radius:20px;
  font-size:clamp(25px,7vw,32px);gap:15px;touch-action:manipulation;
}
.availability{
  display:table;width:max-content;max-width:100%;margin:9px auto 0;
  padding:4px 13px;border-radius:99px;background:#fff7dc99;
  color:#77402a;font-size:12px;
}
footer{position:relative;z-index:2;flex:none;padding:2px 0 1px;font-size:10px}

.result-scene{
  display:grid;
  grid-template-rows:auto minmax(220px,1fr) auto auto auto;
  align-content:stretch;justify-content:initial;gap:9px;
  padding:13px 0 8px;
  min-height:calc(100dvh - 78px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
.result-heading{align-self:start}
.result-heading .eyebrow{font-size:10px}
.result-heading h1{font-size:clamp(27px,7.5vw,35px);line-height:1.2;margin:4px 0 0}
.revealed-stick{
  width:84px;height:clamp(245px,39dvh,345px);
  margin:0 auto;align-self:center;border-width:6px;
  border-radius:14px 14px 8px 8px;
  box-shadow:inset 7px 0 #ffffff10,8px 9px 0 #6e101512;
}
.revealed-stick:before{left:-6px;right:-6px;height:58px}
.revealed-stick b{top:10px;font-size:27px}
.mascot-result{
  width:220px;height:auto;right:-14px;bottom:clamp(215px,27dvh,248px);z-index:3;
}
.fortune-card{
  width:min(100%,440px);min-height:142px;justify-self:center;
  margin:0;padding:16px 28px 17px;border-width:4px;border-radius:22px;
  background:linear-gradient(140deg,#f10c25 0%,#e5001b 70%,#ca0c1b 100%);
  box-shadow:0 7px 18px #7c171b20;
}
.fortune-card:before,.fortune-card:after{font-size:23px}
.fortune-card:before{left:9px}.fortune-card:after{right:9px}
.card-ornament{font-size:12px}
.number-label{font-size:clamp(21px,6vw,26px);line-height:1.3}
.fortune-card p{
  max-width:100%;font-size:clamp(18px,5.1vw,22px);
  line-height:1.42;font-weight:600;margin:5px 4px 0;
}
.share-hint{
  width:min(100%,420px);min-height:43px;display:grid;place-items:center;
  margin:0 auto;padding:8px 13px;border-radius:15px;
  font-size:13px;line-height:1.35;
}
.again-btn{
  min-height:42px;justify-self:center;padding:8px 22px;border-radius:99px;
  background:#fff5d6a8;border:1px solid #9a542e55;
  font-size:14px;touch-action:manipulation;
}
.draw-btn:focus-visible,.again-btn:focus-visible{outline:3px solid #721319;outline-offset:4px}
.cup-logo{
  position:absolute;z-index:1;left:50%;top:50%;
  width:78px;height:78px;object-fit:contain;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 2px 2px #550c1670);
}

@media(min-width:700px){
  body{display:grid;place-items:center;background:#4b2118}
  .game{
    width:min(100%,480px);min-height:min(100dvh,960px);
    border-inline:1px solid #fff5;box-shadow:0 0 50px #2b090933;
  }
  .scene,.result-scene{
    min-height:calc(min(100dvh,960px) - 78px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .sticks{height:clamp(250px,36dvh,345px)}
  .cup{height:clamp(155px,19dvh,180px)}
}
@media(max-height:700px){
  .scene,.result-scene{min-height:calc(100dvh - 70px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
  .intro{margin-top:0}
  .sticks{height:clamp(190px,31dvh,260px)}
  .cup{height:clamp(125px,16dvh,150px)}
  .result-scene{grid-template-rows:auto minmax(180px,1fr) auto auto auto;gap:6px}
  .revealed-stick{height:clamp(200px,32dvh,265px)}
  .fortune-card{min-height:122px;padding:12px 25px}
  .mascot-result{width:180px;bottom:clamp(190px,27dvh,215px)}
}

/* Match the supplied fortune-bowl artwork: tall vessel, packed upright sticks,
   and mascot in front of the CTA instead of being buried behind its copy. */
.sticks{width:min(76vw,320px);height:clamp(210px,31dvh,280px)}
.st1{transform:translateX(-105px) rotate(-9deg)}
.st2{transform:translateX(-86px) rotate(-7deg)}
.st3{transform:translateX(-67px) rotate(-5deg)}
.st4{transform:translateX(-48px) rotate(-4deg)}
.st5{transform:translateX(-29px) rotate(-2deg)}
.st6{transform:translateX(-10px) rotate(-1deg)}
.st7{transform:translateX(10px) rotate(1deg)}
.st8{transform:translateX(29px) rotate(2deg)}
.st9{transform:translateX(48px) rotate(4deg)}
.st10{transform:translateX(67px) rotate(5deg)}
.st11{transform:translateX(86px) rotate(7deg)}
.st12{transform:translateX(105px) rotate(9deg)}
.cup{
  width:min(58vw,280px);height:clamp(238px,34dvh,292px);
  margin-top:-26px;border-radius:24px 24px 52px 52px;
}
.cup-rim{height:30px;top:-13px;border-width:9px}
.cup-logo{width:72px;height:72px}
.home-copy{z-index:5;margin-top:-2px}
.tiny-label{
  position:relative;z-index:7;width:max-content;max-width:100%;
  margin:0 auto 8px;padding:4px 12px;border-radius:99px;
  color:#74201b;background:#fff3c8d9;text-shadow:none;
}
.mascot-home{
  width:250px;left:-40px;bottom:clamp(64px,8dvh,78px);z-index:6;
}
.draw-btn{position:relative;z-index:5;padding-left:44px}
.revealed-stick{
  width:64px;height:clamp(270px,44dvh,380px);
  border-width:5px;border-radius:12px 12px 7px 7px;
}
.revealed-stick:before{left:-5px;right:-5px;height:52px}
.revealed-stick b{font-size:25px;top:9px}
.mascot-result{
  width:220px;right:-22px;bottom:clamp(225px,28dvh,255px);
}
@media(min-width:700px){
  .sticks{height:clamp(225px,31dvh,280px)}
  .cup{width:280px;height:clamp(250px,34dvh,300px)}
  .mascot-home{left:-22px}
}
@media(max-height:700px){
  .sticks{height:clamp(190px,29dvh,235px)}
  .cup{height:clamp(205px,31dvh,240px)}
  .mascot-home{width:205px;bottom:58px}
  .revealed-stick{height:clamp(220px,37dvh,270px)}
  .mascot-result{width:175px;bottom:205px}
}

/* The supplied transparent cutouts replace the approximate CSS drawings. */
.game{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}
#homeScene{
  justify-content:space-between;
  gap:8px;
}
.intro{width:100%;flex:none;margin-top:5px}
.intro h1{font-size:clamp(28px,7.2vw,36px);line-height:1.18}
.sub{font-size:clamp(13px,3.7vw,15px);line-height:1.45}
.home-art-stage{
  width:min(100%,390px);height:clamp(365px,56dvh,485px);
  position:relative;flex:none;display:flex;align-items:center;justify-content:center;
  overflow:visible;
}
.fortune-bundle{
  display:block;height:100%;width:auto;max-width:100%;
  object-fit:contain;object-position:center;user-select:none;-webkit-user-drag:none;
  filter:drop-shadow(0 10px 12px #81201514);
}
.mascot-home{
  width:250px;height:auto;left:-43px;bottom:-3px;z-index:3;
  filter:drop-shadow(0 5px 5px #57200f24);
}
.home-copy{width:100%;flex:none;margin:0;z-index:5}
.tiny-label{
  display:table;position:static;width:max-content;max-width:100%;
  margin:0 auto 8px;padding:4px 13px;border:1px solid #9d302b2b;
  border-radius:99px;background:#fff7d9;color:#743018;text-shadow:none;
  font-size:12px;line-height:1.4;
}
.draw-btn{
  width:min(100%,420px);min-height:66px;padding:8px 12px;
  border:2px solid #711610;border-radius:19px;
  box-shadow:0 4px 0 #9e2417,0 8px 18px #7c25171c;
  font-size:clamp(24px,6.5vw,31px);line-height:1.2;
}
.draw-btn:hover{box-shadow:0 6px 0 #9e2417,0 12px 18px #7c25171c}
.draw-btn:active{box-shadow:0 1px 0 #9e2417}
.availability{margin:8px auto 0;font-size:12px;line-height:1.4}

.result-scene{
  display:grid;grid-template-rows:auto minmax(285px,1fr) auto auto auto;
  align-content:stretch;justify-content:initial;gap:8px;
  padding:12px 0 8px;
}
.result-heading{width:100%;align-self:start}
.result-heading .eyebrow{font-size:10px;line-height:1.4}
.result-heading h1{
  font-size:clamp(26px,7vw,34px);line-height:1.18;
  margin:4px 0 0;letter-spacing:-.02em;
}
.result-art-stage{
  width:100%;min-height:285px;position:relative;align-self:stretch;
  display:flex;align-items:center;justify-content:center;
}
.stick-display{
  position:relative;height:min(100%,390px);max-height:390px;
  aspect-ratio:435/1162;flex:none;z-index:1;
  animation:rise .7s cubic-bezier(.16,1,.3,1) both;
}
.fortune-stick{display:block;width:100%;height:100%;object-fit:contain}
.stick-display b{
  position:absolute;left:78%;top:5%;z-index:2;
  transform:translateX(-50%) rotate(12deg);
  color:#fff;font:800 clamp(20px,6vw,27px)/1 "Kanit",sans-serif;
  text-shadow:0 1px 2px #6a0d16;
}
.mascot-result{
  width:240px;height:auto;right:-35px;bottom:-3px;z-index:3;
  filter:drop-shadow(0 5px 5px #57200f24);
}
.fortune-card{
  width:100%;min-height:144px;justify-self:center;margin:0;
  padding:15px 30px 16px;border:3px solid #ffdc77;
  outline:2px solid #831219;border-radius:21px;
  box-shadow:0 7px 17px #79151b1a;
}
.fortune-card:before,.fortune-card:after{font-size:21px}
.fortune-card:before{left:8px}.fortune-card:after{right:8px}
.card-ornament{font-size:12px;line-height:1.25}
.number-label{
  font-size:clamp(20px,5.6vw,25px);line-height:1.32;
  margin:2px 0 1px;
}
.fortune-card p{
  width:100%;max-width:100%;margin:4px 0 1px;
  padding:0 2px;font-size:clamp(17px,4.8vw,22px);
  line-height:1.5;font-weight:600;overflow-wrap:anywhere;
  text-wrap:pretty;
}
.share-hint{
  width:100%;min-height:44px;display:grid;place-items:center;
  margin:0 auto;padding:8px 13px;border-radius:14px;
  font-size:clamp(12px,3.6vw,14px);line-height:1.4;
}
.again-btn{
  justify-self:center;width:max-content;min-width:150px;min-height:44px;
  padding:8px 20px;font-size:14px;
}
.shaking .home-art-stage{animation:shake .1s linear infinite alternate}
.shaking .mascot-home{animation:bounce .35s ease-in-out infinite alternate}
@media(min-width:700px){
  .home-art-stage{height:clamp(380px,56dvh,500px)}
  .mascot-home{left:-20px;width:260px}
  .result-art-stage{min-height:310px}
  .stick-display{height:min(100%,410px);max-height:410px}
  .mascot-result{right:-24px;width:260px}
}
@media(max-height:700px){
  #homeScene{gap:4px}
  .home-art-stage{height:clamp(300px,51dvh,360px)}
  .intro{margin-top:0}
  .draw-btn{min-height:58px}
  .result-scene{grid-template-rows:auto minmax(245px,1fr) auto auto auto;gap:6px}
  .result-art-stage{min-height:245px}
  .stick-display{height:min(100%,300px);max-height:300px}
  .fortune-card{min-height:130px;padding:12px 26px}
  .fortune-card p{font-size:clamp(16px,4.5vw,20px)}
  .share-hint{min-height:40px}
}