:root{--red:#e60012;--red2:#ff3b3b;--blue:#1d6fe8;--blue2:#0a3f8a;--sky:#e8f2ff;--ink:#12233f}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#eef4fb;font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;color:var(--ink);overscroll-behavior:none}
#app{position:relative;width:100%;max-width:480px;height:100vh;height:100dvh;margin:0 auto;background:#fff;overflow:hidden;box-shadow:0 0 40px #0002}
.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;background:#fff;overflow:hidden}
.screen.active{display:flex}
.overlay{background:#fff;z-index:20}
.btn{border:0;border-radius:999px;font:inherit;font-weight:800;letter-spacing:.08em;font-size:20px;padding:16px 44px;color:#fff;cursor:pointer;box-shadow:0 6px 0 #8a0009,0 10px 18px #0003;transition:transform .08s}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #8a0009,0 4px 8px #0003}
.btn-red{background:linear-gradient(#ff5a5a,var(--red))}
.link{background:none;border:0;color:var(--blue);font:inherit;font-weight:700;margin-top:22px;text-decoration:underline;cursor:pointer;font-size:16px}
.error{color:var(--red);min-height:22px;font-weight:700;margin:8px 0;text-align:center;font-size:15px}
.top-btn{position:absolute;top:calc(12px + env(safe-area-inset-top));z-index:50;border:2px solid var(--blue);background:#fff;color:var(--blue);font:inherit;font-weight:800;border-radius:999px;height:42px;min-width:42px;padding:0 16px;cursor:pointer;box-shadow:0 3px 0 #1d6fe855}
.top-left{left:12px;padding:0;width:42px;display:flex;align-items:center;justify-content:center}
.top-right{right:12px}
#toast{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);background:#12233fe6;color:#fff;padding:10px 18px;border-radius:12px;opacity:0;pointer-events:none;transition:opacity .3s;z-index:90;max-width:90%;text-align:center}
#toast.show{opacity:1}

/* landing */
#s-landing{background:radial-gradient(circle at 50% 0,#d8e9ff,#fff 60%);justify-content:center}
.landing-inner{width:100%;padding:24px 28px;text-align:center;display:flex;flex-direction:column;align-items:center}
.brand{font-weight:900;font-size:34px;letter-spacing:.06em;color:var(--blue2)}
.brand span{color:var(--red)}
.sub{font-weight:800;letter-spacing:.3em;font-size:13px;color:var(--blue);margin-bottom:14px}
.landing-cap{height:110px;margin:6px 0;display:flex;gap:6px;align-items:center;justify-content:center}
#title{font-size:18px;margin:8px 0 20px;line-height:1.3}
#enter-form{width:100%;display:flex;flex-direction:column;align-items:center}
#enter-form label{font-weight:800;letter-spacing:.14em;color:var(--blue2);font-size:13px;margin-bottom:6px}
#order{width:100%;font:inherit;font-size:22px;font-weight:700;text-align:center;text-transform:uppercase;padding:14px;border:3px solid var(--blue);border-radius:14px;outline:none;color:var(--ink);background:#fff}
#order:focus{box-shadow:0 0 0 4px #1d6fe833}
.hint{font-size:13px;color:#5b6b85;margin-top:18px}

/* capsule component */
.cap{position:relative;width:var(--s,100px);height:var(--s,100px);flex:none}
.cap i{position:absolute;inset:0;border-radius:50%;display:block}
.cap .t{clip-path:inset(0 0 50% 0);background:radial-gradient(circle at 32% 24%,#fff 0,#fff8 9%,transparent 30%),radial-gradient(circle at 70% 90%,#0004,transparent 55%),var(--c)}
.cap .b{clip-path:inset(50% 0 0 0);background:radial-gradient(circle at 32% 70%,#fff9 0,transparent 25%),radial-gradient(circle at 70% 95%,#0003,transparent 60%),var(--c2,#f3f7ff)}
.cap::after{content:"";position:absolute;left:2%;right:2%;top:calc(50% - 2px);height:4px;background:#0002;border-radius:2px}
.cap.split::after{display:none}
.cap.split .t{transition:transform .7s cubic-bezier(.3,.7,.2,1),opacity .7s .2s}
.cap.split .b{transition:transform .7s cubic-bezier(.3,.7,.2,1),opacity .7s .2s}
.cap.split.go .t{transform:translateY(-140%);opacity:0}
.cap.split.go .b{transform:translateY(140%);opacity:0}

/* machine */
#s-machine{background:linear-gradient(#fff,#e8f2ff)}
.machine-wrap{margin-top:max(56px,7vh);width:min(78vw,52vh,340px);flex:none}
#machine{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 14px #0003)}
#dial{transform-box:fill-box;transform-origin:center}
#dial.rot{animation:dialspin 1.3s cubic-bezier(.5,0,.3,1) forwards}
@keyframes dialspin{to{transform:rotate(900deg)}}
#machine.shake{animation:shake .12s linear 8}
@keyframes shake{25%{transform:translateX(-4px) rotate(-.8deg)}75%{transform:translateX(4px) rotate(.8deg)}}
.machine-info{margin-top:10px;font-weight:800;color:var(--blue2);letter-spacing:.04em;text-align:center;min-height:24px}
.spin-btn{position:absolute;bottom:calc(26px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;border:0;border-radius:999px;background:linear-gradient(#ff5a5a,var(--red));color:#fff;font:inherit;font-weight:900;font-size:34px;letter-spacing:.12em;padding:14px 56px 14px 44px;box-shadow:0 8px 0 #8a0009,0 14px 24px #0004;cursor:pointer;animation:pulse 1.6s ease-in-out infinite}
.spin-btn:active{transform:translateX(-50%) translateY(5px);box-shadow:0 3px 0 #8a0009}
.spin-btn:disabled{opacity:.6;animation:none}
@keyframes pulse{50%{box-shadow:0 8px 0 #8a0009,0 0 0 10px #e6001222,0 14px 24px #0004}}

/* fx */
#s-fx{background:#fff;perspective:700px;z-index:30}
#fx-burst,#fx-fall{position:absolute;inset:0;pointer-events:none}
#fx-burst{perspective:700px;transform-style:preserve-3d}
#fx-burst .cap{position:absolute;left:50%;top:50%;margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);will-change:transform,opacity}
#fx-star{position:absolute;left:50%;top:50%;width:260vmax;height:260vmax;margin:-130vmax 0 0 -130vmax;border-radius:50%;opacity:0;background:repeating-conic-gradient(from 0deg,#fff 0 6deg,#ffe97a 6deg 12deg,#fff 12deg 18deg,#ffb86b 18deg 24deg);-webkit-mask:radial-gradient(circle,#000 0,#000 8%,transparent 55%);mask:radial-gradient(circle,#000 0,#000 8%,transparent 55%);pointer-events:none}
#fx-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
#fx-fall{background:linear-gradient(#cfe5ff,#fff);opacity:0}
#fx-fall .cap{position:absolute;top:-140px}
.btn-skip{position:absolute;right:16px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:60;display:none;border:2px solid var(--blue);background:#fff;color:var(--blue);font:inherit;font-weight:800;border-radius:999px;padding:10px 26px;font-size:18px}

/* grid */
#s-grid{background:linear-gradient(#fff,#e8f2ff);padding-top:max(60px,8vh)}
.badge{background:var(--blue);color:#fff;font-weight:900;font-size:26px;border-radius:999px;padding:8px 26px;letter-spacing:.08em;box-shadow:0 4px 0 var(--blue2)}
.prompt{margin:14px 0 6px;font-weight:800;color:var(--red);font-size:22px;animation:blink 1.2s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
.grid{flex:1;width:100%;overflow-y:auto;display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-content:center;padding:14px 18px 90px}
.slot{width:var(--s);height:var(--s);display:flex;align-items:center;justify-content:center;cursor:pointer;animation:bob 2.2s ease-in-out infinite;animation-delay:var(--d,0s)}
.slot.done{cursor:default;animation:none}
@keyframes bob{50%{transform:translateY(-7px) rotate(3deg)}}
.slot .thumb{width:100%;height:100%;border-radius:50%;background:#fff;border:4px solid var(--blue);box-shadow:0 4px 10px #0003;overflow:hidden;display:flex;align-items:center;justify-content:center;animation:pop .4s}
.slot .thumb img{width:88%;height:88%;object-fit:contain}
@keyframes pop{from{transform:scale(.3)}70%{transform:scale(1.12)}}
#to-results{position:absolute;bottom:calc(26px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);white-space:nowrap}
#to-results:active{transform:translateX(-50%) translateY(4px)}

/* reveal */
#rv-sun{position:absolute;left:50%;top:46%;width:240vmax;height:240vmax;margin:-120vmax 0 0 -120vmax;opacity:0;background:repeating-conic-gradient(#ffd23f 0 7.5deg,#fff6c9 7.5deg 15deg);animation:spinsun 14s linear infinite;transition:opacity .4s}
#rv-sun.on{opacity:1}
#rv-sun.blue{background:repeating-conic-gradient(#3c8cff 0 7.5deg,#cfe5ff 7.5deg 15deg)}
@keyframes spinsun{to{transform:rotate(360deg)}}
#rv-stage{position:absolute;left:50%;top:46%;width:300px;height:300px;margin:-150px 0 0 -150px;display:flex;align-items:center;justify-content:center}
#rv-cap{position:absolute;inset:30px;display:flex;align-items:center;justify-content:center;cursor:pointer}
#rv-cap .cap{width:100%;height:100%;--s:100%}
#rv-cap.enlarge .cap{animation:wob 1.1s ease-in-out infinite}
@keyframes wob{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(6deg) scale(1.06)}}
#rv-cap.enter{animation:enter .55s cubic-bezier(.3,1.5,.5,1)}
@keyframes enter{from{transform:scale(.2) translateY(160px);opacity:0}}
#rv-prize{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0}
#rv-prize img{max-width:100%;max-height:100%;object-fit:contain;filter:brightness(0);transition:filter .7s;transform:scale(.2)}
#rv-prize.show{opacity:1}
#rv-prize.show img{transform:scale(1.25);transition:transform .6s cubic-bezier(.3,1.4,.5,1),filter .7s}
#rv-prize.lit img{filter:brightness(1) drop-shadow(0 6px 10px #0005)}
#rv-text{position:absolute;left:0;right:0;top:calc(46% + 190px);text-align:center;font-weight:900;font-size:34px;letter-spacing:.14em;color:var(--red);text-shadow:0 3px 0 #fff,0 0 12px #fff;padding:0 10px}
#rv-text.open{animation:blink 1s ease-in-out infinite}
#rv-text small{display:block;font-size:15px;letter-spacing:.1em;color:var(--blue2);margin-top:10px;font-weight:700}
#rv-white{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
#rv-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#rv-confetti b{position:absolute;top:-20px;width:10px;height:16px;border-radius:2px}

/* results */
#s-results{background:linear-gradient(#fff,#e8f2ff);overflow-y:auto}
.res-inner{width:100%;padding:56px 24px 40px;display:flex;flex-direction:column;align-items:center;min-height:100%}
.res-title{font-weight:900;letter-spacing:.3em;color:var(--blue);font-size:15px}
.res-total{font-weight:900;font-size:30px;margin:6px 0 18px;color:var(--blue2)}
.res-list{width:100%;display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.res-row{display:flex;align-items:center;gap:14px;background:#fff;border:3px solid var(--blue);border-radius:16px;padding:8px 14px;box-shadow:0 4px 0 #1d6fe833}
.res-row img{width:64px;height:64px;object-fit:contain}
.res-row .nm{flex:1;font-weight:800;font-size:18px}
.res-row .ct{font-weight:900;font-size:24px;color:var(--red)}
.res-note{color:#5b6b85;font-size:14px;margin-bottom:16px;text-align:center}

/* product picker */
#s-products{background:linear-gradient(#fff,#e8f2ff);overflow-y:auto}
.pick-inner{width:100%;padding:56px 22px 40px;display:flex;flex-direction:column;align-items:center;min-height:100%}
.pick-sub{font-weight:800;color:var(--ink);margin:2px 0 14px;font-size:17px}
.pick-list{width:100%;display:flex;flex-direction:column;gap:14px}
.pick-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#fff;border:3px solid var(--blue);border-radius:18px;padding:10px;box-shadow:0 5px 0 #1d6fe844;font:inherit;color:var(--ink);cursor:pointer}
.pick-card:active{transform:translateY(3px);box-shadow:0 2px 0 #1d6fe844}
.pick-card img{width:84px;height:84px;object-fit:cover;border-radius:12px;flex:none;background:#eef4fb}
.pick-card .nm{font-weight:800;font-size:16px;line-height:1.25}
.pick-card .left{display:inline-block;margin-top:6px;font-weight:900;color:#fff;background:var(--red);border-radius:999px;padding:3px 12px;font-size:14px}
.pick-card .left.zero{background:#8a98b0}
.res-prod{width:100%;margin-bottom:10px}
.res-prod h3{margin:6px 2px 8px;font-size:16px;color:var(--blue2);line-height:1.25}
.res-prod .btn{display:block;margin:12px auto 4px;font-size:18px;padding:12px 36px}
.machine-prod{margin-top:8px;font-weight:900;color:var(--ink);text-align:center;padding:0 24px;font-size:15px;line-height:1.25}
.link.slim{margin-top:6px;font-size:14px}
#s-machine .link.slim{position:absolute;bottom:calc(112px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);white-space:nowrap;margin:0}