@font-face{font-family:"ZC";src:url("../fonts/zcool.woff2") format("woff2");font-display:swap}
:root{
  --ink:#5C1E1C;--ink-soft:rgba(92,30,28,.72);--title:#7A1618;
  --cream:#FFF6EB;--cream-deep:#FFE9C8;--white:#FFFAF4;
  --gold:#F6C13A;--gold-mid:#F0A81A;--gold-deep:#C47A0A;--gold-shadow:#9A5A08;
  --pink:#E97B79;--pink-hi:#F19290;--line:rgba(92,30,28,.12);
  --good:#2E9B57;--warn:#F0A81A;--bad:#D9363E;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--pink);overscroll-behavior:none}
body{position:fixed;inset:0;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",sans-serif;color:var(--ink);
  -webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;
  background:radial-gradient(120% 80% at 50% 38%,#F29492 0%,#EC8483 45%,#E37170 100%)}
img{display:block;-webkit-user-drag:none;user-select:none;pointer-events:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}
a{color:inherit;text-decoration:none}
.zc{font-family:"ZC","STKaiti","KaiTi",serif;font-weight:400}
#share-thumb{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}

#app{position:absolute;left:0;top:0;width:390px;transform-origin:0 0;overflow:hidden}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s}
.screen.is-on{opacity:1;visibility:visible;transition:opacity .35s ease}

/* ===== buttons ===== */
.btn-gold{display:flex;align-items:center;justify-content:center;width:100%;height:58px;border-radius:18px;color:#6B3200;font-weight:800;font-size:22px;letter-spacing:.08em;
  background:linear-gradient(#FFE98A 0%,#F6C13A 40%,#E89A12 100%);border:2.5px solid var(--gold-deep);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(160,70,0,.25),0 5px 0 var(--gold-shadow),0 10px 18px rgba(120,40,20,.28);
  text-shadow:0 1px 0 rgba(255,255,255,.45);transition:transform .08s,box-shadow .08s}
.btn-gold:active,.btn-gold.down{transform:translateY(4px);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(160,70,0,.25),0 1px 0 var(--gold-shadow),0 4px 10px rgba(120,40,20,.25)}
.btn-gold.sm{height:50px;font-size:19px;border-radius:16px}
.btn-cream{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;padding:10px 16px;border-radius:18px;background:var(--white);border:2px solid #E8C48A;
  box-shadow:0 4px 0 #E2B56A,0 8px 16px rgba(120,40,20,.12);color:var(--title);font-weight:800;font-size:17px;letter-spacing:.02em;transition:transform .08s,box-shadow .08s}
.btn-cream:active{transform:translateY(3px);box-shadow:0 1px 0 #E2B56A,0 3px 8px rgba(120,40,20,.12)}
.link{display:block;width:100%;text-align:center;color:var(--ink-soft);font-size:14px;padding:10px 8px}
.link:active{opacity:.6}
.icon-btn{width:42px;height:42px;border-radius:14px;background:var(--cream);border:1.5px solid #E8C48A;box-shadow:0 3px 0 #E2B56A,0 6px 12px rgba(120,40,20,.12);display:flex;align-items:center;justify-content:center;color:var(--title)}
.icon-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #E2B56A}
.gear{display:inline-block;width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237A1618' d='M19.4 13a7.6 7.6 0 000-2l2.1-1.6a.5.5 0 00.1-.6l-2-3.5a.5.5 0 00-.6-.2l-2.5 1a7.3 7.3 0 00-1.7-1l-.4-2.6a.5.5 0 00-.5-.5h-4a.5.5 0 00-.5.4l-.4 2.7a7.3 7.3 0 00-1.7 1l-2.5-1a.5.5 0 00-.6.2l-2 3.5a.5.5 0 00.1.6L4.6 11a7.6 7.6 0 000 2l-2.1 1.6a.5.5 0 00-.1.6l2 3.5a.5.5 0 00.6.2l2.5-1a7.3 7.3 0 001.7 1l.4 2.6a.5.5 0 00.5.5h4a.5.5 0 00.5-.4l.4-2.7a7.3 7.3 0 001.7-1l2.5 1a.5.5 0 00.6-.2l2-3.5a.5.5 0 00-.1-.6zM12 15.5A3.5 3.5 0 1115.5 12 3.5 3.5 0 0112 15.5z'/%3E%3C/svg%3E") center/contain no-repeat}
.icon-btn .q{font-weight:900;font-size:20px}

/* ===== START ===== */
.scr-start,.scr-result{background:radial-gradient(120% 70% at 50% 50%,#EC8584 0%,#E97A79 55%,#E2706F 100%)}
.scr-start{padding:calc(env(safe-area-inset-top,0px) + 30px) 22px calc(env(safe-area-inset-bottom,0px) + 26px)}
.corner-btns{position:absolute;left:14px;right:14px;top:calc(env(safe-area-inset-top,0px) + 14px);display:flex;justify-content:space-between;z-index:2}
.hero-head{text-align:center;margin-top:14px}
.scr-start h1{font-size:56px;color:var(--title);letter-spacing:.14em;line-height:1.1;text-shadow:0 2px 0 rgba(255,255,255,.3),0 6px 18px rgba(122,22,24,.18);padding-left:.14em}
.sub{margin-top:6px;font-size:15px;color:var(--ink-soft);letter-spacing:.16em}
.hero-art{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;margin:4px -22px}
.hero-art img{width:100%;height:100%;object-fit:contain;-webkit-mask-image:radial-gradient(ellipse 60% 56% at 50% 52%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 60% 56% at 50% 52%,#000 72%,transparent 100%);animation:heroFloat 5s ease-in-out infinite}
@keyframes heroFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.012)}}
.best{text-align:center;font-size:14px;color:var(--ink-soft);margin-bottom:14px;letter-spacing:.04em}
.best strong{color:var(--title);font-weight:800;margin-left:6px;font-size:15px}
.best em{font-style:normal;margin-left:10px;opacity:.8;font-size:12px}
#btn-start{animation:pulseBtn 2.2s ease-in-out infinite}
@keyframes pulseBtn{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}

/* ===== PLAY ===== */
.scr-play{padding:calc(env(safe-area-inset-top,0px) + 12px) 12px calc(env(safe-area-inset-bottom,0px) + 10px)}
.topbar{display:flex;align-items:center;gap:7px;height:42px;flex:0 0 auto}
.pause{width:42px;height:42px;flex:0 0 42px;border-radius:13px;background:var(--cream);border:1.5px solid #E8C48A;box-shadow:0 3px 0 #E2B56A;display:flex;align-items:center;justify-content:center;gap:4px}
.pause i{width:5px;height:16px;border-radius:3px;background:var(--title)}
.pause:active{transform:translateY(2px);box-shadow:0 1px 0 #E2B56A}
.pill{height:38px;border-radius:19px;background:var(--cream);border:1.5px solid #E8C48A;box-shadow:0 3px 0 #E2B56A;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--ink-soft);padding:0 12px;white-space:nowrap}
.pill b{color:var(--title);font-size:18px;margin-left:5px;font-variant-numeric:tabular-nums;font-weight:900}
.pill.timer{flex:1.25}.pill.served{flex:1}
.pill.combo{flex:1;background:linear-gradient(#FFE98A,#F6C13A 45%,#EDA21A);border-color:var(--gold-deep);box-shadow:0 3px 0 var(--gold-shadow);color:#7A3E00;transition:transform .15s}
.pill.combo b{color:#6B2A00}
.pill.combo.zero{background:var(--cream);border-color:#E8C48A;box-shadow:0 3px 0 #E2B56A;color:var(--ink-soft)}
.pill.combo.pop{animation:pop .35s ease}
.pill.combo.hot{box-shadow:0 3px 0 var(--gold-shadow),0 0 16px 3px rgba(255,200,60,.7)}
.pill.timer.hurry{background:#FFE3DD;border-color:#E38A80;box-shadow:0 3px 0 #C9665C;animation:hurry .5s ease-in-out infinite alternate}
.pill.timer.hurry b{color:var(--bad)}
.pill.timer.plus{animation:pop .5s ease}
@keyframes hurry{to{transform:scale(1.05)}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}

/* tickets */
.tickets{position:relative;height:104px;flex:0 0 auto;margin-top:10px}
.ticket{position:absolute;top:0;width:84px;height:100px;border-radius:15px;background:var(--white);box-shadow:0 4px 0 rgba(160,70,60,.25),0 8px 16px rgba(120,40,20,.14);padding:7px 7px 0;
  transition:left .32s cubic-bezier(.3,1.3,.5,1),transform .2s,box-shadow .2s,opacity .25s;overflow:hidden;border:2px solid transparent}
.ticket.enter{animation:tIn .45s cubic-bezier(.2,1.4,.5,1)}
@keyframes tIn{0%{transform:translateY(-70px) rotate(-8deg) scale(.6);opacity:0}100%{transform:none;opacity:1}}
.ticket.active{border-color:#F0A81A;box-shadow:0 4px 0 #C47A0A,0 0 0 3px rgba(246,193,58,.35),0 10px 18px rgba(120,40,20,.2);transform:translateY(-2px)}
.ticket .t-top{display:flex;gap:4px;align-items:flex-start;height:40px}
.ticket .t-ico{width:40px;height:40px;flex:0 0 40px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#FFE1DF,#F6B1AE);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ticket .t-ico img{width:120%;height:120%;object-fit:contain}
.ticket .t-name{font-size:13px;font-weight:900;color:var(--title);line-height:1.2;margin-top:5px;white-space:nowrap;letter-spacing:-.02em}
.ticket .t-tags{position:absolute;right:4px;top:5px;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.ticket .tag{font-size:10px;font-weight:800;padding:0 4px;border-radius:6px;background:#FFE9C8;color:#8A4A00;line-height:15px;white-space:nowrap}
.ticket .tag.vip{background:linear-gradient(#3B2A1A,#1F150C);color:#FFD66B}
.ticket .tag.gold{background:linear-gradient(#FFE98A,#F0A81A);color:#6B2A00}
.ticket .tag.rush{background:var(--bad);color:#fff;animation:blink .5s steps(2) infinite}
.ticket .tag.spicy{background:#FFE0DA;color:#C0262E}
.ticket .tag.wait{background:#E4F6EA;color:#1F7A44}
@keyframes blink{50%{opacity:.55}}
.ticket .t-step{font-size:11px;font-weight:700;color:var(--ink-soft);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ticket .t-bar{position:absolute;left:0;right:0;bottom:0;height:6px;background:rgba(92,30,28,.08)}
.ticket .t-bar i{position:absolute;inset:0;transform-origin:0 50%;background:var(--good);border-radius:0 3px 3px 0}
.ticket.vip{background:linear-gradient(#FFF8E8,#FFEFD2)}
.ticket.golden{background:linear-gradient(160deg,#FFF6C8,#FFD970 60%,#F6B93A);box-shadow:0 4px 0 #B9780A,0 0 18px rgba(255,210,80,.8)}
.ticket.golden::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.75) 45%,transparent 60%);background-size:250% 100%;animation:shine 1.6s linear infinite}
@keyframes shine{from{background-position:150% 0}to{background-position:-100% 0}}
.ticket.urgent{animation:wobble .4s ease-in-out infinite}
.ticket.rushed{animation:ring .18s linear 6}
@keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-2.5deg)}75%{transform:rotate(2.5deg)}}
@keyframes ring{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px) rotate(-3deg)}75%{transform:translateX(4px) rotate(3deg)}}
.ticket.out-good{transition:transform .45s ease-in,opacity .45s;transform:translateY(-90px) scale(.7);opacity:0}
.ticket.out-bad{transition:transform .55s ease-in,opacity .55s;transform:translateY(60px) rotate(14deg);opacity:0}
.ticket .stamp{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-14deg);font-weight:900;font-size:20px;padding:2px 8px;border:3px solid;border-radius:8px;letter-spacing:.1em;animation:stamp .25s ease-out}
.ticket .stamp.good{color:var(--good);border-color:var(--good);background:rgba(255,255,255,.85)}
.ticket .stamp.bad{color:var(--bad);border-color:var(--bad);background:rgba(255,255,255,.85)}
@keyframes stamp{0%{transform:translate(-50%,-50%) rotate(-14deg) scale(2.4);opacity:0}100%{transform:translate(-50%,-50%) rotate(-14deg) scale(1);opacity:1}}

/* stage */
.stage{position:relative;flex:1 1 auto;min-height:250px;margin:4px -12px 0}
.counter{position:absolute;left:-20px;right:-20px;bottom:4%;height:38%;border-radius:50% 50% 0 0/22% 22% 0 0;
  background:radial-gradient(90% 120% at 50% 0%,rgba(255,236,228,.55),rgba(255,210,204,.18) 55%,transparent 80%)}
.recipe-strip{position:absolute;left:8px;right:8px;top:6px;display:flex;justify-content:center;gap:3px;flex-wrap:nowrap;z-index:3}
.recipe-strip .rs{display:flex;align-items:center;gap:3px;white-space:nowrap;flex:0 0 auto;background:rgba(255,250,244,.92);border-radius:14px;padding:4px 9px 4px 5px;font-size:13px;font-weight:800;color:var(--ink-soft);box-shadow:0 2px 6px rgba(120,40,20,.12);transition:transform .2s}
.recipe-strip .rs img{width:22px;height:22px;object-fit:contain}
.recipe-strip .rs.done{color:var(--good);background:#EAF8EF}
.recipe-strip .rs.done::after{content:"✓";margin-left:2px}
.recipe-strip .rs.now{color:#6B2A00;background:linear-gradient(#FFF1B8,#FFD45E);box-shadow:0 0 0 2px #F0A81A,0 4px 10px rgba(240,168,26,.4);transform:scale(1.06)}
.recipe-strip .arrow{align-self:center;color:rgba(255,255,255,.85);font-weight:900;font-size:13px}
.recipe-strip .hint{position:absolute;top:36px;left:0;right:0;text-align:center;font-size:12px;color:#fff;font-weight:700;text-shadow:0 1px 2px rgba(120,30,30,.5)}

.dish{position:absolute;left:22px;bottom:14%;width:200px;height:200px;z-index:2;transform:translateY(calc(-1 * var(--lift,0px))) scale(var(--ds,1));transform-origin:50% 100%}
.dish .d{position:absolute;left:50%;bottom:0;transform:translateX(-50%);transform-origin:50% 100%;will-change:transform}
.dish .d img{width:100%;height:auto}
.dish .shadow{position:absolute;left:50%;bottom:-6px;width:170px;height:26px;margin-left:-85px;border-radius:50%;background:radial-gradient(closest-side,rgba(120,30,30,.32),transparent);z-index:-1}
.dish.empty .shadow{opacity:.4}
.dish .ghost{opacity:.4;filter:grayscale(1) brightness(2.3) contrast(.45)}
.dish .clipfill{position:absolute;inset:0;clip-path:inset(var(--top,100%) 0 0 0);-webkit-clip-path:inset(var(--top,100%) 0 0 0)}
.dish .placeholder{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);width:160px;text-align:center;color:rgba(255,255,255,.92);font-weight:800;font-size:15px;text-shadow:0 1px 3px rgba(120,30,30,.45)}
.squash{animation:squash .38s cubic-bezier(.3,1.6,.5,1)}
@keyframes squash{0%{transform:translateX(-50%) scale(1.12,.84)}55%{transform:translateX(-50%) scale(.95,1.06)}100%{transform:translateX(-50%) scale(1)}}
.drop-in{animation:dropIn .42s cubic-bezier(.3,1.5,.5,1)}
@keyframes dropIn{0%{transform:translateX(-50%) translateY(-120px) scale(.8);opacity:0}60%{transform:translateX(-50%) translateY(6px) scale(1.06,.92);opacity:1}100%{transform:translateX(-50%) scale(1)}}
.shake{animation:shakeX .4s ease}
@keyframes shakeX{0%,100%{transform:translateX(-50%)}20%{transform:translateX(calc(-50% - 10px)) rotate(-3deg)}40%{transform:translateX(calc(-50% + 9px)) rotate(3deg)}60%{transform:translateX(calc(-50% - 6px))}80%{transform:translateX(calc(-50% + 4px))}}
.toss{animation:toss .32s ease-out}
@keyframes toss{0%{transform:translateX(-50%) rotate(0)}35%{transform:translateX(-50%) translateY(-18px) rotate(-12deg)}100%{transform:translateX(-50%) rotate(0)}}
.dish .pitcher{position:absolute;left:118px;top:-30px;width:118px;transform-origin:20% 80%;transform:rotate(-38deg) translateY(-10px);opacity:0;transition:opacity .15s,transform .2s;z-index:3}
.dish.pouring .pitcher{opacity:1;transform:rotate(-58deg)}
.dish .stream{position:absolute;left:96px;top:18px;width:9px;height:0;border-radius:5px;background:linear-gradient(90deg,#D9B48E,#F0D4B4 50%,#C99B70);opacity:0;z-index:2;transition:opacity .1s}
.dish.pouring .stream{opacity:1;height:var(--sh,140px)}
.dish .lid-fly{position:absolute;left:50%;top:-120px;width:150px;margin-left:-75px;z-index:3;animation:lidDown .3s cubic-bezier(.4,0,.7,1.4) forwards}
@keyframes lidDown{0%{transform:translateY(-60px) scale(1.2) rotate(-10deg);opacity:0}100%{transform:translateY(120px) scale(.72);opacity:1}}
.dish .spicy-glow{position:absolute;left:10%;right:10%;bottom:20%;height:50%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,40,20,.55),transparent);mix-blend-mode:multiply;opacity:0;transition:opacity .3s}
.dish .done-glow{position:absolute;inset:-20px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,240,180,.9),rgba(255,220,120,.3) 55%,transparent);opacity:0;z-index:-1;transition:opacity .3s}
.dish.complete .done-glow{opacity:1;animation:glow 1.2s ease-in-out infinite alternate}
@keyframes glow{to{transform:scale(1.08)}}
.dish.packing .d{transition:transform .32s cubic-bezier(.6,0,.8,.4),opacity .3s;transform:translateX(-50%) translateY(20px) scale(.2)!important;opacity:0}

.gauge{position:absolute;left:10px;bottom:calc(14% + 20px + var(--lift,0px));width:20px;height:150px;border-radius:12px;background:rgba(255,250,244,.85);box-shadow:inset 0 2px 4px rgba(92,30,28,.18),0 2px 6px rgba(120,40,20,.15);overflow:hidden;opacity:0;transform:scale(.8);transition:opacity .2s,transform .2s;z-index:4}
.gauge.on{opacity:1;transform:none}
.gauge-zone{position:absolute;left:0;right:0;bottom:78%;height:16%;background:rgba(46,155,87,.35);border-top:2px solid var(--good);border-bottom:2px solid var(--good)}
.gauge-fill{position:absolute;left:3px;right:3px;bottom:3px;height:calc(var(--f,0) * 94%);border-radius:8px;background:linear-gradient(#E9C9A3,#C8976A)}
.gauge span{position:absolute;left:0;right:0;bottom:-2px;font-size:0}
.gauge.over .gauge-fill{background:var(--bad)}

.tap-meter{position:absolute;left:calc(22px + 150px * var(--ds,1));bottom:calc(14% + 140px * var(--ds,1) + var(--lift,0px));width:56px;height:56px;z-index:4;opacity:0;transform:scale(.6);transition:opacity .2s,transform .2s cubic-bezier(.3,1.6,.5,1)}
.tap-meter.on{opacity:1;transform:none}
.tap-meter svg{width:100%;height:100%;transform:rotate(-90deg)}
.tm-bg{fill:rgba(255,250,244,.92);stroke:rgba(92,30,28,.12);stroke-width:4}
.tm-fg{fill:none;stroke:#F0A81A;stroke-width:4.5;stroke-linecap:round;stroke-dasharray:119.4;stroke-dashoffset:119.4;transition:stroke-dashoffset .12s}
.tap-meter b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;color:var(--title)}
.tap-meter.bump{animation:pop .2s}

.rider-wrap{position:absolute;right:2px;bottom:calc(14% - 4px);width:calc(178px * var(--ds,1));z-index:2;transition:transform .6s cubic-bezier(.5,0,.8,.4);will-change:transform}
.rider-wrap .rider-img{width:100%;height:auto}
.rider-shadow{position:absolute;left:12%;right:8%;bottom:-6px;height:20px;border-radius:50%;background:radial-gradient(closest-side,rgba(120,30,30,.3),transparent);z-index:-1}
.rider-wrap.away{transform:translateX(260px)}
.rider-wrap.leaving{transform:translateX(300px) scaleX(-1);transition:transform .65s cubic-bezier(.55,0,.9,.5)}
.rider-wrap.arrive{transition:transform .55s cubic-bezier(.2,.9,.3,1.15)}
.rider-wrap.catch{animation:catchBob .3s ease}
.rider-wrap.idle .rider-img{animation:idleBob 1.4s ease-in-out infinite}
@keyframes idleBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes catchBob{0%{transform:translateY(0)}40%{transform:translateY(6px) scale(1.03,.97)}100%{transform:translateY(0)}}
.rider-wrap .bubble{position:absolute;left:14px;top:-6px;background:var(--white);border-radius:12px;padding:4px 9px;font-size:12px;font-weight:800;color:var(--title);box-shadow:0 2px 6px rgba(120,40,20,.18);white-space:nowrap;animation:tIn .3s}

.bags{position:absolute;inset:0;z-index:5;pointer-events:none}
.bag{position:absolute;width:86px;height:118px;pointer-events:auto;touch-action:none;will-change:transform;z-index:5}
.bag img{width:100%;height:auto;filter:drop-shadow(0 8px 8px rgba(120,30,30,.28))}
.bag .bag-tag{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:var(--white);box-shadow:0 1px 4px rgba(0,0,0,.15);overflow:hidden;display:flex;align-items:center;justify-content:center}
.bag .bag-tag img{width:120%;filter:none}
.bag.idle{animation:bagWiggle 1.1s ease-in-out infinite}
@keyframes bagWiggle{0%,100%{rotate:0deg}50%{rotate:4deg}}
.bag.appear{animation:bagIn .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes bagIn{0%{scale:.3;opacity:0}100%{scale:1;opacity:1}}

.fx{position:absolute;inset:-200px 0 -200px;pointer-events:none;z-index:8;overflow:visible}
.p{position:absolute;left:0;top:0;will-change:transform,opacity;pointer-events:none}
.p.dot{width:10px;height:10px;border-radius:50%}
.p.img{width:30px}
.p.steam{width:30px;height:60px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.7),transparent);filter:blur(2px)}
.float{position:absolute;font-weight:900;white-space:nowrap;pointer-events:none;text-shadow:0 2px 0 rgba(120,30,30,.35),0 0 6px rgba(255,255,255,.4);will-change:transform,opacity}
.float.coin{color:#FFE26A;font-size:24px;-webkit-text-stroke:1px #9A5A08}
.float.good{color:#fff;font-size:20px}
.float.perfect{color:#FFF6B0;font-size:26px;-webkit-text-stroke:1.2px #B8650A;letter-spacing:.06em}
.float.bad{color:#fff;font-size:20px;background:var(--bad);border-radius:10px;padding:1px 10px;text-shadow:none}
.float.time{color:#fff;font-size:24px;background:linear-gradient(#56C27E,#2E9B57);padding:2px 12px;border-radius:14px;text-shadow:none}

.banner{position:absolute;left:0;right:0;top:19%;z-index:9;text-align:center;pointer-events:none;opacity:0}
.banner .b-in{display:inline-block;padding:10px 26px;border-radius:20px;font-weight:900;font-size:26px;letter-spacing:.06em;color:#6B2A00;background:linear-gradient(#FFF1B8,#F6C13A 55%,#EDA21A);border:2.5px solid var(--gold-deep);box-shadow:0 5px 0 var(--gold-shadow),0 12px 30px rgba(120,30,20,.35)}
.banner .b-in small{display:block;font-size:13px;font-weight:700;letter-spacing:0;color:#7A3E00;margin-top:2px}
.banner.red .b-in{background:linear-gradient(#FF8A80,#E3343C);border-color:#9E1218;color:#fff;box-shadow:0 5px 0 #7A0E12,0 12px 30px rgba(120,30,20,.35)}
.banner.red .b-in small{color:#FFE3E0}
.banner.blue .b-in{background:linear-gradient(#D6EEFF,#7EC0F0);border-color:#3A7FB5;color:#123A5C;box-shadow:0 5px 0 #2C6A99,0 12px 30px rgba(20,40,80,.3)}
.banner.blue .b-in small{color:#1E4A70}
.banner.show{animation:banner 1.6s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes banner{0%{opacity:0;transform:scale(.3)}14%{opacity:1;transform:scale(1.08)}22%{transform:scale(1)}82%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-30px) scale(.9)}}

.rain{position:absolute;inset:-60px -12px 0;z-index:7;pointer-events:none;opacity:0;transition:opacity .8s;
  background-image:linear-gradient(105deg,transparent 0 48%,rgba(255,255,255,.55) 49%,transparent 51%),linear-gradient(105deg,transparent 0 48%,rgba(255,255,255,.35) 49%,transparent 51%);
  background-size:38px 70px,23px 52px;animation:rain .45s linear infinite}
.rain.on{opacity:1}
@keyframes rain{to{background-position:-14px 70px,-10px 52px}}
.scr-play.raining{filter:saturate(.85)}

.frenzy{position:absolute;inset:0;z-index:28;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(closest-side,rgba(255,236,190,.35),rgba(92,30,28,.5))}
.frenzy.on{display:flex;animation:tIn .3s}
.frenzy-title{font-weight:900;font-size:24px;color:#fff;text-shadow:0 2px 0 #9E1218,0 0 12px rgba(158,18,24,.5);letter-spacing:.06em}
.frenzy-btn{position:relative;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#FFF8EC,#FFE2B8);border:4px solid #F0A81A;box-shadow:0 6px 0 #C47A0A,0 0 0 8px rgba(255,220,120,.35),0 14px 30px rgba(120,30,20,.3);display:flex;align-items:center;justify-content:center}
.frenzy-btn img{width:128px}
.frenzy-btn.hit{animation:hit .12s}
@keyframes hit{50%{transform:scale(.9)}}
.frenzy-btn b{position:absolute;right:-8px;top:-8px;min-width:44px;height:44px;border-radius:22px;background:var(--bad);color:#fff;font-size:20px;font-weight:900;display:flex;align-items:center;justify-content:center;border:3px solid #fff;padding:0 6px}
.frenzy-bar{width:180px;height:10px;border-radius:5px;background:rgba(255,255,255,.6);overflow:hidden}
.frenzy-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#F6C13A,#E3343C);transform-origin:0 50%}

/* tray */
.tray{flex:0 0 auto;display:flex;align-items:stretch;gap:8px;padding:10px 10px 12px;border-radius:24px;background:var(--white);box-shadow:0 -2px 0 rgba(255,255,255,.6) inset,0 6px 0 rgba(160,70,60,.22),0 12px 26px rgba(120,40,20,.2);position:relative;z-index:6}
.ings{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.ing{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding-top:2px;touch-action:none}
.ing .plate{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#FFE7E5,#F3B0AD 80%);box-shadow:inset 0 -3px 0 rgba(180,80,80,.18),0 3px 0 rgba(180,80,80,.25);display:flex;align-items:center;justify-content:center;transition:transform .1s;overflow:visible}
.ing .plate img{width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(120,30,30,.25))}
.ing span{font-size:13px;font-weight:800;color:var(--ink);white-space:nowrap}
.ing small{position:absolute;top:-2px;right:2px;font-size:10px;font-weight:900;background:var(--title);color:#fff;border-radius:8px;padding:0 5px;line-height:16px}
.ing.down .plate{transform:scale(.88)}
.ing.holding .plate{transform:scale(.92);box-shadow:0 0 0 4px rgba(246,193,58,.7),inset 0 -3px 0 rgba(180,80,80,.18)}
.ing.hint .plate{box-shadow:0 0 0 4px #F6C13A,0 0 18px 4px rgba(246,193,58,.7)}
.ing.wrong .plate{animation:wrongPlate .35s}
@keyframes wrongPlate{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.ing.swap{animation:swapIn .3s cubic-bezier(.3,1.5,.5,1)}
@keyframes swapIn{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
.pack-btn{flex:0 0 92px;border-radius:20px;font-weight:900;font-size:21px;letter-spacing:.1em;color:#8A6A40;background:linear-gradient(#FFF3D6,#F3D9A6);border:2.5px solid #E2C08A;box-shadow:0 4px 0 #D9B070;transition:transform .08s,box-shadow .08s,filter .2s;touch-action:none}
.pack-btn.ready{color:#6B3200;background:linear-gradient(#FFE98A 0%,#F6C13A 40%,#E89A12 100%);border-color:var(--gold-deep);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 5px 0 var(--gold-shadow),0 0 18px rgba(255,200,60,.65);animation:pulseBtn 1s ease-in-out infinite}
.pack-btn.down{transform:translateY(3px);box-shadow:0 1px 0 var(--gold-shadow)}
.pack-btn.wrong{animation:wrongPlate .35s}

.finger{position:absolute;left:0;top:0;width:56px;height:56px;z-index:30;pointer-events:none;opacity:0;transition:opacity .2s}
.finger.on{opacity:1}
.finger .hand{position:absolute;left:14px;top:16px;width:48px;height:48px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.finger .ring{position:absolute;left:4px;top:0;width:44px;height:44px;border-radius:50%;border:3px solid #fff;opacity:0}
.finger.tap .hand{animation:fTap 1s ease-in-out infinite}
.finger.tap .ring{animation:fRing 1s ease-out infinite}
.finger.hold .hand{animation:fHold 1.6s ease-in-out infinite}
.finger.hold .ring{animation:fRingHold 1.6s ease-in-out infinite}
.finger.swipe{transition:none}
.finger.swipe .hand{animation:fSwipe 1.3s ease-in-out infinite}
.finger-tip{position:absolute;left:50%;top:-30px;transform:translateX(-50%);white-space:nowrap;background:rgba(92,30,28,.85);color:#fff;font-size:13px;font-weight:800;padding:3px 10px;border-radius:10px}
.finger-tip:empty{display:none}
@keyframes fTap{0%,100%{transform:translate(0,0)}40%{transform:translate(-3px,-4px) scale(.92)}}
@keyframes fRing{0%,35%{opacity:0;transform:scale(.4)}45%{opacity:.9}100%{opacity:0;transform:scale(1.4)}}
@keyframes fHold{0%,100%{transform:scale(1)}20%,80%{transform:translate(-2px,-3px) scale(.9)}}
@keyframes fRingHold{0%,15%{opacity:0;transform:scale(.4)}25%,80%{opacity:.9;transform:scale(1.1)}100%{opacity:0;transform:scale(1.4)}}
@keyframes fSwipe{0%{transform:translate(0,0);opacity:0}10%{opacity:1}70%{transform:translate(var(--sx,140px),-30px);opacity:1}100%{transform:translate(var(--sx,140px),-30px);opacity:0}}

.vignette{position:absolute;inset:0;pointer-events:none;z-index:20;opacity:0;transition:opacity .4s;box-shadow:inset 0 0 60px 10px rgba(255,200,60,.0)}
.vignette.c5{opacity:1;box-shadow:inset 0 0 36px 2px rgba(255,200,70,.4)}
.vignette.c10{opacity:1;box-shadow:inset 0 0 44px 5px rgba(255,190,50,.5);animation:vig 0.9s ease-in-out infinite alternate}
.vignette.bad{opacity:1;box-shadow:inset 0 0 60px 12px rgba(217,54,62,.7);transition:none}
@keyframes vig{to{box-shadow:inset 0 0 56px 8px rgba(255,215,80,.65)}}

/* ===== RESULT ===== */
.scr-result{padding:calc(env(safe-area-inset-top,0px) + 22px) 22px calc(env(safe-area-inset-bottom,0px) + 14px)}
.home-link{position:absolute;left:12px;top:calc(env(safe-area-inset-top,0px) + 12px);font-size:14px;color:var(--ink-soft);padding:6px 8px;font-weight:700;z-index:2}
.result-head{text-align:center}
.eyebrow{font-size:16px;color:var(--ink-soft);letter-spacing:.24em}
.big{display:flex;align-items:flex-end;justify-content:center;gap:4px;line-height:1;margin-top:2px}
.big .num{font-size:96px;color:var(--title);line-height:.95;text-shadow:0 3px 0 rgba(255,255,255,.25)}
.big .unit{font-size:28px;font-weight:900;color:var(--title);margin-bottom:12px}
.stars{display:flex;justify-content:center;gap:8px;margin:6px 0 4px;height:34px}
.stars i{width:34px;height:34px;background:rgba(122,22,24,.18);clip-path:polygon(50% 0,61.8% 35.4%,100% 38.2%,69.1% 61.8%,79.4% 100%,50% 76.4%,20.6% 100%,30.9% 61.8%,0 38.2%,38.2% 35.4%);transform:scale(.9)}
.stars i.on{background:linear-gradient(#FFF1A0,#F6C13A 50%,#E08A0A);animation:starIn .45s cubic-bezier(.3,1.8,.5,1) both}
.stars i:nth-child(2){transform:translateY(-6px) scale(1.1)}
@keyframes starIn{0%{transform:scale(0) rotate(-90deg)}100%{transform:scale(1) rotate(0)}}
.stars i:nth-child(2).on{animation-name:starIn2}
@keyframes starIn2{0%{transform:translateY(-6px) scale(0) rotate(-90deg)}100%{transform:translateY(-6px) scale(1.1) rotate(0)}}
.meta{font-size:15px;color:var(--ink)}
.meta b,.meta2 b{font-weight:900;color:var(--title)}
.meta2{font-size:14px;color:var(--ink-soft);margin-top:2px}
.record{margin-top:5px;font-size:14px;font-weight:800;color:#9A5A08;min-height:20px}
.record .new{display:inline-block;margin-left:6px;padding:0 8px;border-radius:9px;background:linear-gradient(#FFE98A,#F0A81A);color:#6B2A00;animation:pop .6s ease 2}
.result-art{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;margin:0 -22px}
.result-art img{width:100%;max-height:100%;object-fit:contain;-webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%,#000 70%,transparent 100%);mask-image:radial-gradient(ellipse 62% 58% at 50% 50%,#000 70%,transparent 100%)}
.result-foot .tagline{text-align:center;font-size:16px;color:var(--ink);margin-bottom:12px;letter-spacing:.04em}
.result-foot .btn-cream{margin-top:14px}
.result-foot #btn-bonus{margin-top:4px}
.result-foot #btn-share{padding-top:2px}
.result-foot .link.gone{display:none}

/* ===== overlays ===== */
.overlay{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(92,30,28,.42);opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.overlay.on{opacity:1;visibility:visible;transition:opacity .25s}
.card{width:100%;max-width:340px;background:var(--cream);border-radius:26px;border:2px solid #E8C48A;box-shadow:0 6px 0 #E2B56A,0 20px 50px rgba(60,10,10,.35);padding:22px 20px 14px;transform:scale(.9);transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.overlay.on .card{transform:scale(1)}
.card h2{text-align:center;font-size:32px;color:var(--title);letter-spacing:.12em;margin-bottom:14px}
.tut-steps{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.tut-steps li{display:flex;align-items:center;gap:12px;background:var(--white);border-radius:16px;padding:8px 10px;box-shadow:0 2px 0 rgba(226,181,106,.6)}
.tut-steps img{width:54px;height:54px;object-fit:contain;flex:0 0 54px;background:radial-gradient(circle,#FFE1DF,#F6B1AE);border-radius:50%;padding:4px}
.tut-steps b{display:block;font-size:15px;color:var(--title)}
.tut-steps span{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:2px;line-height:1.35}
.menu .btn-cream{margin-top:14px}
.menu-row{display:flex;gap:8px;margin-top:16px;margin-bottom:6px}
.btn-mini{flex:1;height:44px;border-radius:14px;background:var(--white);border:1.5px solid #E8C48A;box-shadow:0 3px 0 #E2B56A;font-size:14px;font-weight:800;color:var(--title);display:flex;align-items:center;justify-content:center;gap:5px}
.btn-mini .gear{width:16px;height:16px}
.btn-mini:active{transform:translateY(2px);box-shadow:0 1px 0 #E2B56A}
.set-row{display:flex;align-items:center;justify-content:space-between;background:var(--white);border-radius:16px;padding:0 14px;height:56px;margin-bottom:10px;box-shadow:0 2px 0 rgba(226,181,106,.6)}
.set-row>span{font-size:17px;font-weight:800;color:var(--title)}
.set-row small{font-size:11px;font-weight:600;color:var(--ink-soft);margin-left:6px}
.toggle{position:relative;width:58px;height:32px;border-radius:16px;background:#E6D6C4;box-shadow:inset 0 2px 4px rgba(92,30,28,.2);transition:background .2s}
.toggle i{position:absolute;left:3px;top:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.25);transition:transform .22s cubic-bezier(.3,1.5,.5,1)}
.toggle[aria-checked="true"]{background:linear-gradient(#FFD45E,#F0A81A);box-shadow:inset 0 2px 3px rgba(150,70,0,.35)}
.toggle[aria-checked="true"] i{transform:translateX(26px)}
.set-row.vol{gap:12px}
.slider{position:relative;flex:1;height:40px;touch-action:none}
.slider-track{position:absolute;left:0;right:0;top:50%;height:10px;margin-top:-5px;border-radius:5px;background:#E6D6C4;box-shadow:inset 0 1px 3px rgba(92,30,28,.2);overflow:hidden}
.slider-track i{position:absolute;left:0;top:0;bottom:0;width:80%;background:linear-gradient(90deg,#FFD45E,#F0A81A)}
.slider-knob{position:absolute;top:50%;left:80%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:linear-gradient(#FFF7DE,#F6C13A);border:2px solid var(--gold-deep);box-shadow:0 2px 0 var(--gold-shadow),0 3px 6px rgba(0,0,0,.2)}
.set-row em{font-style:normal;font-weight:900;color:var(--title);width:30px;text-align:right;font-variant-numeric:tabular-nums}
.settings .btn-gold{margin-top:6px;margin-bottom:6px}
.bonus p{text-align:center;font-size:16px;color:var(--ink);margin-bottom:6px}
.bonus p b{color:var(--title);font-size:20px}
.bonus .bonus-sub{font-size:13px;color:var(--ink-soft);margin-bottom:16px}

.countdown{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;pointer-events:none;visibility:hidden}
.countdown.on{visibility:visible}
.countdown b{font-size:120px;font-weight:900;color:#FFF6EB;-webkit-text-stroke:3px #9E1218;text-shadow:0 8px 0 #9E1218,0 16px 30px rgba(80,10,10,.4)}
.countdown b.go{font-size:72px;letter-spacing:.08em}
.countdown b.tick{animation:cd .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes cd{0%{transform:scale(2.2);opacity:0}40%{transform:scale(1);opacity:1}100%{transform:scale(.9);opacity:.9}}
.rotate-tip{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:var(--pink);text-align:center}
.rotate-tip b{display:block;font-size:22px;color:var(--title)}
.rotate-tip span{display:block;margin-top:6px;color:var(--ink-soft)}
.toast{position:absolute;left:50%;bottom:110px;transform:translate(-50%,20px);z-index:90;background:rgba(60,20,18,.9);color:#fff;font-size:15px;font-weight:700;padding:10px 18px;border-radius:14px;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;max-width:320px;text-align:center;line-height:1.4}
.toast.on{opacity:1;transform:translate(-50%,0)}
#app.booting .screen{transition:none}
@media (prefers-reduced-motion:reduce){.hero-art img,#btn-start{animation:none}}

/* charcoal grill for 烤串 */
.dish .grill{position:absolute;left:50%;bottom:-4px;width:200px;height:54px;margin-left:-100px;border-radius:12px 12px 18px 18px;background:linear-gradient(#5A4038,#2E201C 60%,#1E1512);box-shadow:inset 0 3px 0 rgba(255,255,255,.18),0 8px 14px rgba(80,20,20,.35)}
.dish .grill .ember{position:absolute;left:10px;right:10px;top:6px;height:16px;border-radius:8px;background:radial-gradient(ellipse at 30% 50%,#FFB040,transparent 60%),radial-gradient(ellipse at 70% 50%,#FF6A2A,transparent 60%),#6A2A1A;animation:ember 1.2s ease-in-out infinite alternate}
.dish .grill .bars{position:absolute;left:6px;right:6px;top:0;height:10px;background:repeating-linear-gradient(90deg,#B8B0A8 0 3px,transparent 3px 14px);border-radius:3px;opacity:.9}
@keyframes ember{to{filter:brightness(1.35)}}
.dish .d.sk{bottom:26px}
.dish .grill-top{bottom:30px}