@font-face{font-family:DongLiSong;src:url('./assets/DongLiSong.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Spring;src:url('./assets/body.otf') format('opentype');font-display:swap}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#141c18;color:#294c43;font-family:Spring,'Microsoft YaHei',sans-serif}
body{display:grid;place-items:center;height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#game{position:relative;aspect-ratio:9/16;max-height:100%;max-width:100%;width:min(100vw,56.25dvh);touch-action:none;user-select:none;-webkit-user-select:none}
canvas{display:block;width:100%;height:100%;touch-action:none}
#ui{position:absolute;left:0;top:0;width:720px;height:1280px;transform-origin:top left;pointer-events:none}
button{font:25px Spring,'Microsoft YaHei',sans-serif;color:#faf3df;background:#294c43;border:1px solid #b18a49;border-radius:12px;cursor:pointer;touch-action:manipulation;pointer-events:auto}
button:hover{background:#42695a}button:active{background:#19382f}button:focus-visible{outline:3px solid #faf3df;outline-offset:3px}button:disabled{opacity:.6;cursor:wait}
#mute{position:absolute;left:607px;top:38px;width:77px;height:38px;font-size:17px}
#modal{position:absolute;left:36px;top:385px;width:648px;min-height:340px;padding:28px 30px 30px;background:rgba(250,242,222,.97);border:1px solid #b18a49;border-radius:28px;box-shadow:0 12px 38px rgba(41,76,67,.18);pointer-events:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
#modal[hidden]{display:none}.modal-brand{margin:0;font-size:28px;line-height:38px;letter-spacing:2px;color:#665232}h1{margin:0;font-size:52px;font-weight:700;line-height:68px}
#modal[data-state="lost"] h1{color:#9a4634}
#description{margin:0;font-size:24px;line-height:36px;white-space:pre-line}
#start{width:520px;min-height:86px;margin-top:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

#modal[data-state="ready"]{top:365px;padding:32px 28px;gap:22px;border:2px solid #b18a49;background:#faf2de}
#modal[data-state="ready"] h1{font-size:44px}
#modal[data-state="ready"] #description{font-size:23px;line-height:38px}
#tutorial{display:none;width:100%;border-radius:20px;padding:20px;background:#e9e4cf;border:1px solid #d2c5a1}
#modal[data-state="ready"] #tutorial{display:block}
.demo-order{font-size:23px;font-weight:bold;color:#294c43}
.demo-track{height:220px;position:relative;display:flex;align-items:center;justify-content:center;gap:14px}
.demo-dish{position:absolute;left:20px;top:92px;width:100px;height:85px;background:url('assets/food.webp') 0 0 / 300% 200% no-repeat;z-index:2;animation:serve 3.5s infinite}
.demo-arrow{position:absolute;left:145px;top:105px;font-size:35px;letter-spacing:3px;color:#a88443}
.demo-pot{position:absolute;right:-10px;top:0;width:220px;height:218px;z-index:1}
.demo-pot canvas{display:block;width:220px;height:220px;margin:0 auto}
.demo-pot small{display:block;position:absolute;bottom:-3px;width:100%;font:21px Spring,sans-serif;color:#294c43;text-align:center}
.demo-steps{display:flex;justify-content:space-between;font-size:21px;color:#294c43}
@keyframes serve{0%,18%{transform:translateX(0);opacity:1}65%,80%{transform:translateX(325px);opacity:1}88%,100%{transform:translateX(325px);opacity:0}}
@media(prefers-reduced-motion:reduce){.demo-dish,.demo-hand{animation:none}}

h1,#start,.modal-brand{font-family:DongLiSong,Spring,serif;font-weight:400}
h1{letter-spacing:2px}
#start{font-size:36px;letter-spacing:2px}

#result-art{display:none;width:520px;height:280px;flex-shrink:0}
#modal[data-state="won"],#modal[data-state="lost"]{top:330px;min-height:670px;padding:30px 30px 34px;gap:18px;background:#faf2de}
#modal[data-state="won"] #result-art,#modal[data-state="lost"] #result-art{display:block}
#modal[data-state="won"] #start,#modal[data-state="lost"] #start{margin-top:10px}

#coupon{width:520px;min-height:86px;background:#b7782d;border-color:#d6aa62;color:#fff7e5;font:34px DongLiSong,Spring,serif;letter-spacing:2px}
#coupon:hover{background:#986025}
#coupon[hidden],#coupon-message[hidden]{display:none}
#coupon-message{margin:0;font-size:22px;line-height:30px;color:#78623f}
#modal[data-state="won"]{top:290px}
#modal[data-state="won"] #start{min-height:66px;margin-top:0;background:transparent;color:#294c43;border-color:#a9ad91;font-size:30px}
#modal[data-state="won"] #start:hover{background:#eae3cd}