*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:100%}
body{margin:0;min-height:100%;background:linear-gradient(#fff8ed,#ffe7df) fixed;color:#674943;font-family:system-ui,-apple-system,"PingFang TC","Noto Sans TC",sans-serif}
button{font:inherit;cursor:pointer;border:0;border-radius:999px;padding:12px 18px;background:#fff;color:#764f48;box-shadow:0 3px 10px #a56d4e33;touch-action:manipulation;transition:transform .12s ease}
button:not(.knob):not(.egg):not(.hot):active{transform:scale(.96)}
button:focus-visible{outline:3px solid #a05570}
[hidden]{display:none!important}

.app{max-width:760px;margin:auto;padding:12px max(14px,env(safe-area-inset-right)) 40px max(14px,env(safe-area-inset-left));text-align:center}
header{display:flex;justify-content:space-between;align-items:center}
header a{color:#79504c;text-decoration:none}
header button{padding:8px 12px}
h1{font-size:clamp(1.7rem,6vw,2.5rem);margin:12px 0 4px;color:#a65f59}
#hint{margin:0 0 14px}

/* ---------- 首頁 ---------- */
.home{position:relative;line-height:0;border-radius:22px;overflow:hidden;box-shadow:0 12px 28px #a8786040}
.home img{width:100%;height:auto;-webkit-user-drag:none;user-select:none}
.hot{position:absolute;top:20%;height:68%;width:31%;background:transparent;box-shadow:none;border-radius:15%;padding:0;transition:background .15s}
.hot:active{background:#ffffff40}
.breakfast{left:2%}.lunch{left:34%}.dinner{left:66%}
.choices{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:14px 0}
.choices button{min-height:48px;padding:12px 20px}

/* ---------- 扭蛋機畫面：鎖在一屏內，不能捲動 ---------- */
body[data-view=play]{overflow:hidden}
body[data-view=play] h1,body[data-view=play] #hint{display:none}
body[data-view=play] .app{height:100vh;height:100svh;display:flex;flex-direction:column;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 14px)}
#play{flex:1;min-height:0;flex-direction:column;align-items:center;justify-content:center;gap:8px}
body[data-view=play] #play{display:flex}
.back{padding:8px 14px}
#instruction{margin:0;min-height:1.4em;font-size:.95rem}

/* 機器寬度同時受「螢幕寬」與「剩餘高度」限制；用 svh 讓網址列收合時版面不會跳動 */
.machine{--w:min(92vw,400px,calc((100vh - 200px)*.5628));--w:min(92vw,400px,calc((100svh - 200px)*.5628));
  position:relative;width:var(--w);aspect-ratio:941/1672;margin:0 auto;line-height:0;opacity:0;
  transform-origin:50% 100%;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.machine.in{opacity:1}
.machine.entering{animation:enter .55s cubic-bezier(.2,.9,.3,1.15)}
.machine.shaking{animation:shake .9s linear}
.machine img{display:block;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}

/* 把手 */
.knob{position:absolute;left:36%;top:62%;width:28%;aspect-ratio:1;padding:0;border-radius:50%;touch-action:none;
  background:radial-gradient(circle at 35% 25%,#fff0e2,#e8c4b3 65%,#b99487);border:4px solid #d6b6a5;
  box-shadow:inset 0 3px 6px #fff8,0 2px 4px #80564b77;
  transition:transform .55s cubic-bezier(.3,1.3,.5,1)}
.knob.dragging{transition:none;animation:none!important}
.knob span{display:block;width:74%;height:25%;border-radius:8px;background:linear-gradient(#fff8f0,#cfb2a6);box-shadow:0 3px 4px #785d56a0;transform:rotate(-18deg);margin:auto}
#play[data-phase=ready] .knob{animation:nudge 2.6s ease-in-out 1.2s infinite}

/* 扭蛋（出口的膠囊，上下兩半各用同一張透明圖遮罩） */
.egg{position:absolute;left:35%;top:79.5%;width:30%;aspect-ratio:1;padding:0;border:0;border-radius:50%;
  background:none;box-shadow:none;overflow:visible;touch-action:pan-y;transform:translateY(16%);
  animation:eggdrop .9s cubic-bezier(.3,.7,.4,1),bob 1.6s ease-in-out .9s infinite}
.egg::before,.egg::after{content:'';position:absolute;inset:0;background:url('assets/star-capsule.webp') center/contain no-repeat;transition:transform .55s cubic-bezier(.2,.7,.3,1),opacity .55s ease-out}
.egg::before{clip-path:inset(0 0 48% 0)}
.egg::after{clip-path:inset(52% 0 0 0)}
.egg.wobble{animation:wobble .42s ease-in-out}
.egg.opening{animation:none}
.egg.opening::before{transform:translate(-50%,-45%) rotate(-26deg);opacity:0}
.egg.opening::after{transform:translate(50%,35%) rotate(24deg);opacity:0}

.flash{position:absolute;left:50%;top:86%;width:150%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#fff 0%,#fff6c8 28%,#ffe08a00 68%);animation:flash .65s ease-out forwards}

.primary{background:#e9858a;color:#fff;font-weight:700}

/* ---------- 結果卡 ---------- */
.result{position:fixed;inset:0;background:#473432a8;display:grid;place-items:center;padding:18px;z-index:5;animation:fade .3s ease-out}
.result-card{max-width:420px;width:100%;max-height:calc(100vh - 36px);max-height:calc(100svh - 36px);overflow:auto;background:#fffaf1;border:3px solid #f4cab8;border-radius:26px;padding:24px;box-shadow:0 20px 60px #55372e55;animation:pop .5s cubic-bezier(.2,1.2,.35,1)}
.result-card h2{font-size:1.7rem;margin:10px 0}
.result-card p{line-height:1.5}
#fortune{margin:4px 0 0;font-size:1.05rem;font-weight:700;color:#c07a3f;letter-spacing:.15em}
#joke{margin:0;color:#7a625a}
.result-card small{display:block;margin-top:16px;font-size:.8rem;line-height:1.4;color:#7a625a}
.stars{color:#e9b95f;font-size:1.7rem;animation:twinkle 1.8s ease-in-out infinite}
.food-icon{font-size:3.4rem;line-height:1.3;animation:bump .7s .15s cubic-bezier(.3,1.4,.5,1) both}
.actions{display:grid;gap:10px;margin-top:18px}
.actions button{padding:13px 18px}
.actions .big{font-size:1.1rem;padding:15px 18px}
.linkbtn{background:none;box-shadow:none;color:#876f67;text-decoration:underline;padding:6px;font-size:.9rem}
#accepted{margin:12px 0 0;font-weight:700}
.result[data-fortune="0"] .result-card,.result[data-fortune="1"] .result-card{box-shadow:0 0 50px #ffd87c,0 20px 60px #55372e55}
.result[data-fortune="2"] .result-card{box-shadow:0 0 45px #ffb8d1,0 20px 60px #55372e55}
.result[data-fortune="3"] .result-card{box-shadow:0 0 45px #bdddf8,0 20px 60px #55372e55}
.result[data-fortune="4"] .stars::after,.result[data-fortune="5"] .stars::after{content:' ☁️'}
.result[data-fortune="5"] .stars::after{content:' ☁️ ⚡'}

/* ---------- 彩帶 ---------- */
#fx{position:fixed;inset:0;pointer-events:none;z-index:30;overflow:hidden}
#fx i{position:absolute;left:0;top:0;display:block;will-change:transform,opacity}

/* ---------- 動畫 ---------- */
@keyframes enter{from{opacity:0;transform:translateY(26px) scale(.93)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(26px) scale(.8)}to{opacity:1;transform:none}}
@keyframes bump{0%{transform:scale(0) rotate(-24deg)}60%{transform:scale(1.3) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
@keyframes twinkle{50%{opacity:.55;transform:scale(1.1)}}
@keyframes nudge{0%,70%,100%{transform:rotate(0)}80%{transform:rotate(16deg)}90%{transform:rotate(-6deg)}}
@keyframes shake{
  0%,100%{transform:none}
  8%{transform:translateX(-5px) rotate(-2.2deg)}
  18%{transform:translateX(5px) rotate(2.2deg)}
  28%{transform:translateX(-5px) rotate(-1.9deg) scaleY(.99)}
  38%{transform:translateX(4px) rotate(1.9deg)}
  50%{transform:translateX(-4px) rotate(-1.4deg) scaleY(.99)}
  62%{transform:translateX(3px) rotate(1.2deg)}
  76%{transform:translateX(-2px) rotate(-.7deg)}
  88%{transform:translateX(1px) rotate(.3deg)}}
@keyframes eggdrop{
  0%{transform:translateY(-35%) scale(.3);opacity:0}
  22%{transform:translateY(-12%) scale(.6);opacity:1}
  58%{transform:translateY(42%) scale(1.15)}
  74%{transform:translateY(8%) scale(.96)}
  88%{transform:translateY(22%) scale(1.04)}
  100%{transform:translateY(16%) scale(1)}}
@keyframes bob{
  0%,100%{transform:translateY(16%) scale(1);filter:drop-shadow(0 0 5px #ffe7a066)}
  50%{transform:translateY(10%) scale(1.06);filter:drop-shadow(0 0 16px #ffd36ad0)}}
@keyframes wobble{
  0%,100%{transform:translateY(16%) rotate(0) scale(1.05)}
  20%{transform:translateY(16%) rotate(-16deg) scale(1.1)}
  45%{transform:translateY(16%) rotate(14deg) scale(1.12)}
  70%{transform:translateY(16%) rotate(-9deg) scale(1.1)}}
@keyframes flash{from{opacity:.95;transform:scale(.2)}to{opacity:0;transform:scale(1.3)}}

@media(max-width:390px){.app{padding-top:8px}.choices button{padding:10px 14px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}