:root{--cream:#fff6dc;--paper:#fffaf0;--green:#164d3b;--green2:#0d3b2d;--gold:#f5b52e;--orange:#ed6a36;--ink:#17372e;--pink:#f5a09a}
*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:var(--cream);color:var(--ink);font-family:"IBM Plex Sans Thai",sans-serif;background-image:radial-gradient(circle at 12% 12%,rgba(245,181,46,.18) 0 5%,transparent 5.3%),radial-gradient(circle at 90% 84%,rgba(237,106,54,.12) 0 8%,transparent 8.3%)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.14;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E")}
.shell{max-width:1040px;margin:auto;padding:18px 24px 38px}.brand{display:flex;align-items:center;gap:10px;color:var(--green);font-family:Mitr,sans-serif}.brand-logo{display:block;width:104px;height:58px;object-fit:contain;object-position:center}.daily{font-size:.68rem;letter-spacing:.22em;font-weight:700;border-left:1.5px solid rgba(22,77,59,.28);padding-left:10px}
.experience{min-height:calc(100dvh - 80px);display:grid;grid-template-columns:1fr minmax(290px,390px);grid-template-areas:"intro machine" "controls machine";align-items:center;column-gap:64px}.intro{grid-area:intro;align-self:end;position:relative}.intro-logo{position:absolute;width:210px;height:230px;object-fit:contain;right:-34px;top:-70px;opacity:.055;transform:rotate(-7deg);pointer-events:none}.eyebrow{display:inline-block;border:1.5px solid var(--green);border-radius:99px;padding:7px 14px;margin:0 0 15px;font-weight:600;font-size:.9rem;position:relative}.intro h1{font-family:Mitr,sans-serif;font-weight:500;line-height:.98;font-size:clamp(3.2rem,7vw,5.6rem);margin:0;letter-spacing:-.05em;position:relative}.intro h1 span{color:var(--orange)}.lead{font-size:1.08rem;line-height:1.65;margin:18px 0 0;position:relative}
.machine-wrap{grid-area:machine;position:relative;justify-self:center}.machine{width:min(78vw,350px);filter:drop-shadow(12px 16px 0 rgba(22,77,59,.13));transform:rotate(1deg)}.machine-top{height:322px;background:var(--paper);border:7px solid var(--green);border-radius:72px 72px 24px 24px;position:relative;overflow:hidden;padding:34px 25px;text-align:center}.machine-top:before{content:"";position:absolute;inset:112px 20px 18px;border:4px solid var(--green);border-radius:50% 50% 20px 20px;background:#ffe6a7}.mini-label{font-size:.7rem;font-weight:700;letter-spacing:.2em;color:var(--orange)}.machine-top strong{position:relative;z-index:2;display:block;font-family:Mitr,sans-serif;font-size:1.55rem;line-height:1.1;color:var(--green)}
.capsules{position:absolute;inset:160px 28px 20px}.capsules i{position:absolute;width:68px;height:52px;border:4px solid var(--green);border-radius:50%;background:linear-gradient(90deg,var(--orange) 50%,var(--paper) 50%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.4)}.capsules i:after{content:"";position:absolute;left:30px;top:0;bottom:0;border-left:4px solid var(--green)}.capsules .c1{left:7px;top:50px;transform:rotate(22deg)}.capsules .c2{left:72px;top:75px;transform:rotate(-13deg);background:linear-gradient(90deg,var(--gold) 50%,var(--paper) 50%)}.capsules .c3{right:2px;top:48px;transform:rotate(25deg);background:linear-gradient(90deg,var(--pink) 50%,var(--paper) 50%)}.capsules .c4{left:38px;top:5px;transform:rotate(-22deg);background:linear-gradient(90deg,var(--pink) 50%,var(--paper) 50%)}.capsules .c5{right:40px;top:2px;transform:rotate(10deg)}.capsules .c6{left:112px;top:34px;transform:rotate(42deg);background:linear-gradient(90deg,var(--gold) 50%,var(--paper) 50%)}
.machine-bottom{height:180px;margin:-7px 19px 0;background:var(--orange);border:7px solid var(--green);border-radius:18px 18px 38px 38px;position:relative}.coin{position:absolute;left:24px;top:48px;width:52px;height:52px;border:4px solid var(--green);background:var(--gold);border-radius:50%;display:grid;place-content:center;text-align:center;font-weight:700;line-height:.9}.knob{position:absolute;left:50%;top:37px;translate:-50%;width:83px;height:83px;border-radius:50%;background:var(--paper);border:6px solid var(--green);cursor:pointer;box-shadow:0 5px 0 var(--green)}.knob span{position:absolute;width:20px;height:59px;border:4px solid var(--green);background:var(--gold);border-radius:9px;inset:6px 0 0;margin:auto}.machine.spinning .knob{animation:turn .85s ease-in-out}.machine.spinning .capsules i{animation:jiggle .18s infinite alternate}.chute{position:absolute;right:20px;bottom:20px;width:75px;height:54px;border:5px solid var(--green);background:var(--paper);border-radius:8px 8px 20px 20px}.chute span{display:block;width:38px;height:14px;border-radius:50%;background:var(--green);margin:17px auto}.spark{position:absolute;font-size:1.5rem;color:var(--gold)}.s1{left:-24px;top:40px}.s2{right:-27px;top:155px;color:var(--orange)}.s3{left:-15px;bottom:75px;font-size:.8rem;color:var(--pink)}
.controls{grid-area:controls;align-self:start;margin-top:30px;max-width:430px}.controls label{display:block;font-weight:600;margin-bottom:9px}.input-row{display:flex;gap:9px}.input-row input{min-width:0;flex:1;border:2px solid var(--green);background:var(--paper);border-radius:14px;padding:13px 15px;font:inherit;color:var(--ink);outline:none}.input-row input:focus{box-shadow:0 0 0 4px rgba(245,181,46,.38)}button{font:600 1rem "IBM Plex Sans Thai",sans-serif}.input-row button,#shareButton{border:2px solid var(--green);background:var(--green);color:white;border-radius:14px;padding:12px 20px;cursor:pointer;box-shadow:0 4px 0 var(--gold)}button:disabled{opacity:.62;cursor:wait}.hint{font-size:.82rem;opacity:.72;margin:10px 2px}
dialog{border:0;padding:0;background:transparent;max-width:none}dialog::backdrop{background:rgba(13,59,45,.72);backdrop-filter:blur(5px)}.result-card{position:relative;width:min(90vw,430px);background:var(--paper);border:5px solid var(--green);border-radius:30px;padding:32px 28px 27px;text-align:center;box-shadow:12px 14px 0 var(--gold)}.close{position:absolute;right:14px;top:9px;border:0;background:none;color:var(--green);font-size:2rem;cursor:pointer}.result-label{font-weight:600;color:var(--orange);margin:0}.capsule-icon{width:90px;height:66px;border:5px solid var(--green);border-radius:50%;margin:25px auto 20px;background:linear-gradient(90deg,var(--gold) 50%,var(--paper) 50%);position:relative;animation:pop .55s cubic-bezier(.2,.9,.3,1.3)}.capsule-icon i{position:absolute;left:40px;top:0;bottom:0;border-left:5px solid var(--green)}.result-card h2{font-family:Mitr,sans-serif;font-size:clamp(1.6rem,6vw,2.25rem);font-weight:500;line-height:1.35;margin:0;color:var(--green)}.from{color:var(--orange);font-weight:600}.result-actions{display:grid;gap:9px;margin-top:24px}.result-actions button{min-height:48px;cursor:pointer}.secondary{border:2px solid var(--green);background:transparent;color:var(--green);border-radius:14px}.secondary:disabled{opacity:.45;cursor:not-allowed}
@keyframes turn{50%{transform:rotate(190deg)}100%{transform:rotate(360deg)}}@keyframes jiggle{to{translate:0 -5px;rotate:5deg}}@keyframes pop{from{opacity:0;transform:translateY(-30px) scale(.6)}to{opacity:1;transform:none}}
@media(max-width:760px){
  html{background:var(--cream);-webkit-text-size-adjust:100%}
  body{min-width:320px;min-height:100svh;overflow-x:hidden}
  .shell{width:100%;padding:calc(14px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
  .brand{justify-content:center;min-height:30px}.brand-mark{font-size:1.15rem}
  .experience{min-height:auto;display:flex;flex-direction:column;text-align:center}
  .intro{order:1;width:100%;margin-top:14px}.eyebrow{padding:6px 12px;margin:0 0 9px;font-size:.82rem}.intro h1{font-size:clamp(2.6rem,13vw,3.35rem);line-height:1}.lead{font-size:1rem;line-height:1.5;margin:11px 0 0}
  .controls{order:2;width:100%;max-width:430px;margin:18px 0 0}.controls label{text-align:left;font-size:1rem;margin-bottom:7px}.input-row{flex-direction:column;gap:10px}.input-row input{width:100%;min-height:52px;padding:13px 15px;font-size:16px;border-radius:13px}.input-row button{width:100%;min-height:52px;padding:12px 16px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.hint{text-align:center;font-size:.8rem;margin:9px 0 0}
  .machine-wrap{order:3;margin:24px 0 15px}.machine{width:min(78vw,300px);filter:drop-shadow(8px 11px 0 rgba(22,77,59,.13))}.machine-top{height:268px;border-width:6px;border-radius:60px 60px 21px 21px;padding:28px 20px}.machine-top:before{inset:96px 16px 14px;border-width:4px}.machine-top strong{font-size:1.35rem}.capsules{inset:132px 20px 14px;transform:scale(.84)}.machine-bottom{height:145px;margin:-6px 16px 0;border-width:6px}.coin{left:18px;top:33px}.knob{top:22px;width:80px;height:80px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.chute{right:15px;bottom:17px}.spark{display:none}
  dialog{width:100%;max-height:100dvh;margin:auto;padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));overflow:auto}.result-card{width:min(100%,430px);margin:auto;padding:30px 20px 22px;border-width:4px;border-radius:24px;box-shadow:7px 9px 0 var(--gold)}.close{width:44px;height:44px;right:5px;top:3px}.result-card h2{font-size:clamp(1.45rem,6.5vw,2rem)}.result-actions button{min-height:50px;touch-action:manipulation}
}
@media(max-width:370px){.intro h1{font-size:2.55rem}.machine{width:min(76vw,270px)}.machine-top{height:242px}.machine-top:before{inset:90px 14px 12px}.capsules{inset:119px 13px 12px;transform:scale(.75)}.machine-bottom{height:132px}.coin{top:27px;transform:scale(.9)}.knob{top:16px;transform:scale(.88)}.chute{bottom:13px;transform:scale(.9)}}
@media(max-height:700px) and (max-width:760px){.intro{margin-top:8px}.lead{display:none}.controls{margin-top:12px}.machine-wrap{margin-top:18px}.machine{width:min(68vw,260px)}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* Gacha reveal sequence */
.drop-capsule{position:absolute;z-index:5;right:28px;bottom:22px;width:48px;height:36px;border:4px solid var(--green);border-radius:50%;background:linear-gradient(90deg,var(--gold) 50%,var(--paper) 50%);opacity:0;pointer-events:none}.drop-capsule i{position:absolute;left:20px;top:0;bottom:0;border-left:4px solid var(--green)}
.machine.dispensing .drop-capsule{animation:capsule-drop .9s cubic-bezier(.25,.75,.35,1) both}.machine.dispensing .chute{animation:chute-bump .28s ease-in-out 2}
.result-card{overflow:hidden}.capsule-icon{position:relative;display:block;width:106px;height:76px;margin:26px auto 17px;padding:0;border:0;background:transparent;cursor:pointer;filter:drop-shadow(0 8px 0 rgba(22,77,59,.12));touch-action:manipulation;-webkit-tap-highlight-color:transparent}.capsule-icon::before,.capsule-icon::after{content:"";position:absolute;top:0;width:53px;height:76px;border:5px solid var(--green);transition:transform .62s cubic-bezier(.2,.8,.2,1),opacity .3s}.capsule-icon::before{left:0;background:var(--gold);border-right-width:2px;border-radius:999px 0 0 999px;transform-origin:right center}.capsule-icon::after{right:0;background:var(--paper);border-left-width:2px;border-radius:0 999px 999px 0;transform-origin:left center}.capsule-icon i{position:absolute;z-index:2;left:50%;top:4px;bottom:4px;border-left:4px solid var(--green);translate:-2px 0;transition:opacity .15s}.is-sealed .capsule-icon{animation:capsule-ready 1.45s ease-in-out infinite}.is-opening .capsule-icon::before{transform:translate(-25px,-8px) rotate(-20deg)}.is-opening .capsule-icon::after{transform:translate(25px,-8px) rotate(20deg)}.is-opening .capsule-icon i{opacity:0}.is-opening::before{content:"✦";position:absolute;z-index:0;left:50%;top:102px;color:var(--gold);font-size:4rem;translate:-50% 0;animation:flash-open .68s ease-out both}.sealed-hint{margin:0;color:var(--green);font-weight:600}.result-reveal{display:none}.is-opened .capsule-icon,.is-opened .sealed-hint{display:none}.is-opened .result-reveal{display:block;animation:message-reveal .55s cubic-bezier(.2,.8,.2,1) both}.reveal-label{margin:16px 0 14px;color:var(--orange);font-weight:600;font-size:.9rem}.is-opened .result-label{opacity:.65;font-size:.9rem}
@keyframes capsule-drop{0%{opacity:0;transform:translateY(-6px) rotate(-15deg) scale(.72)}18%{opacity:1}62%{opacity:1;transform:translateY(72px) rotate(135deg) scale(1)}78%{opacity:1;transform:translateY(62px) rotate(180deg) scale(1)}100%{opacity:0;transform:translateY(90px) rotate(210deg) scale(.94)}}
@keyframes chute-bump{50%{transform:translateY(4px)}}
@keyframes capsule-ready{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2deg)}}
@keyframes flash-open{0%{opacity:0;transform:scale(.25) rotate(0)}55%{opacity:1}100%{opacity:0;transform:scale(1.8) rotate(35deg)}}
@keyframes message-reveal{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:760px){.drop-capsule{right:21px;bottom:16px}.capsule-icon{width:100px;height:72px;margin-top:22px}.capsule-icon::before,.capsule-icon::after{width:50px;height:72px}.is-opening::before{top:92px}.sealed-hint{font-size:.95rem;line-height:1.45;padding:0 12px}.reveal-label{margin-top:12px}}

/* Reference-paced capsule delivery */
.machine.spinning .knob{animation-duration:1.4s;animation-timing-function:cubic-bezier(.3,.7,.25,1)}
.machine.spinning .capsules i{animation-duration:.23s}
.chute{padding:0;overflow:hidden;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.chute:disabled,.knob:disabled{opacity:1}.chute:disabled{cursor:default}
.chute>.slot{position:relative;z-index:2;display:block;width:38px;height:14px;border-radius:50%;background:var(--green);margin:17px auto}
.chute:enabled{cursor:pointer;box-shadow:0 0 0 5px rgba(245,181,46,.45);animation:slot-ready 1.1s ease-in-out infinite}
.drop-capsule,.chute>.drop-capsule{position:absolute;z-index:1;left:9px;right:auto;top:-45px;bottom:auto;width:48px;height:36px;margin:0;border:4px solid var(--green);border-radius:50%;background:linear-gradient(90deg,var(--pink) 50%,var(--paper) 50%);opacity:0;pointer-events:none}
.machine.dispensing .drop-capsule{animation:capsule-deliver 1.35s cubic-bezier(.2,.7,.25,1) both}
.machine.dispensing .chute{animation:chute-bump .38s ease-in-out 2}
.machine.capsule-waiting .drop-capsule{opacity:1;transform:translateY(56px) rotate(4deg)}
.machine.collecting .drop-capsule{animation:capsule-collect .55s ease-in both}
.capsule-icon::before,.capsule-icon::after{transition-duration:1.05s;transition-timing-function:cubic-bezier(.18,.75,.2,1)}
.is-cracking .capsule-icon{animation:crack-wiggle .46s ease-in-out both}
.is-opening .capsule-icon::before{transform:translate(-31px,-13px) rotate(-24deg)}
.is-opening .capsule-icon::after{transform:translate(31px,-13px) rotate(24deg)}
.is-opening::before{animation-duration:1.15s}
.is-opened .result-reveal{animation-duration:.78s}
@keyframes capsule-deliver{0%{opacity:0;transform:translateY(0) rotate(-18deg) scale(.84)}12%{opacity:1}63%{opacity:1;transform:translateY(62px) rotate(8deg) scale(1)}77%{opacity:1;transform:translateY(51px) rotate(-5deg) scale(1)}89%{opacity:1;transform:translateY(58px) rotate(5deg) scale(1)}100%{opacity:1;transform:translateY(56px) rotate(4deg) scale(1)}}
@keyframes capsule-collect{0%{opacity:1;transform:translateY(56px) rotate(4deg) scale(1)}100%{opacity:0;transform:translateY(32px) rotate(-8deg) scale(.65)}}
@keyframes slot-ready{50%{box-shadow:0 0 0 9px rgba(245,181,46,.18)}}
@keyframes crack-wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-5deg)}40%{transform:rotate(5deg)}60%{transform:rotate(-3deg)}80%{transform:rotate(3deg)}}
@media(max-width:760px){.chute>.drop-capsule{left:9px;right:auto;top:-45px;bottom:auto}}

/* Balanced classic machine */
.machine{filter:drop-shadow(0 14px 0 rgba(22,77,59,.13));transform:rotate(.2deg);transform-origin:center bottom}
.machine-top{padding-top:31px}.machine-top:before{inset:124px 20px 18px}.machine-top strong{width:max-content;max-width:180px;margin:6px auto 0;font-size:1.3rem;line-height:1.18;text-wrap:balance}.capsules{inset:168px 28px 20px}
@media(max-width:760px){
  .brand-logo{width:96px;height:54px}.intro-logo{width:170px;height:185px;right:-5px;top:-38px;opacity:.045}
  .machine-wrap{width:100%;display:grid;place-items:center;margin:26px 0 16px}
  .machine{width:min(74vw,286px);filter:drop-shadow(0 10px 0 rgba(22,77,59,.13));transform:none}
  .machine-top{height:276px;padding:25px 20px;border-radius:58px 58px 21px 21px}
  .machine-top:before{inset:112px 16px 14px}
  .machine-top strong{max-width:150px;margin-top:5px;font-size:1.12rem;line-height:1.2}
  .capsules{inset:145px 20px 14px;transform:scale(.8);transform-origin:center top}
  .machine-bottom{height:145px;margin:-6px 14px 0}
  .coin{left:16px;top:35px;width:50px;height:50px}
  .knob{top:24px;width:76px;height:76px}.knob span{height:53px}
  .chute{right:16px;bottom:18px;width:58px;height:50px;border-width:4px}
  .chute>.slot{width:30px;height:12px;margin:15px auto}
  .drop-capsule,.chute>.drop-capsule{left:3px}
}
@media(max-width:370px){
  .machine{width:min(74vw,266px)}.machine-top{height:258px;border-radius:52px 52px 19px 19px}.machine-top:before{inset:106px 14px 12px}.machine-top strong{font-size:1.03rem}.capsules{inset:136px 13px 12px;transform:scale(.72)}.machine-bottom{height:134px;margin-inline:13px}.coin{top:30px;transform:scale(.9)}.knob{top:19px;transform:scale(.9)}.chute{bottom:15px;transform:scale(.92)}
}