:root{
  --paper:#F2EBDD; --paper-2:#E9DFCB; --paper-3:#FBF7EE;
  --ink:#1F2A3A; --navy:#1E3A5F; --brick:#B3352B; --gold:#D9A441;
  --brown:#5A3A24; --coffee:#3B2314; --green:#4F7A4A; --muted:#7A6A55;
  --serif:"Noto Serif TC","Songti TC","PingFang TC",serif;
  --sans:"Noto Sans TC",-apple-system,"PingFang TC","Helvetica Neue",sans-serif;
  --shadow:0 6px 18px rgba(59,35,20,.18);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);color:var(--ink);background:#C9B99A;
  background-image:
    radial-gradient(circle at 20% 10%,rgba(255,255,255,.35),transparent 40%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.22 0 0 0 0 0.12 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-font-smoothing:antialiased;
}
.app{max-width:430px;margin:0 auto;min-height:100dvh;background:var(--paper);position:relative;overflow:hidden;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.3 0 0 0 0 0.18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow:0 0 40px rgba(0,0,0,.25);
}
.screen{display:none;padding:20px 16px calc(28px + env(safe-area-inset-bottom));min-height:100dvh;flex-direction:column;gap:14px;animation:fadein .35s ease}
.screen.is-active{display:flex}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.hero{text-align:center;padding-top:8px}
.hero--compact{padding-top:0}
.bean-mark{font-size:22px;margin-bottom:2px}
.title{font-family:var(--serif);font-weight:900;font-size:30px;white-space:nowrap;line-height:1.2;margin:0;color:var(--navy);letter-spacing:.02em;
  display:inline-block;padding:8px 18px;background:var(--paper-3);box-shadow:var(--shadow);
  clip-path:polygon(0 6%,3% 0,97% 2%,100% 8%,99% 94%,96% 100%,4% 98%,0 92%)}
.title em{font-style:normal;color:var(--brick)}
.title--sm{font-size:24px}
.title::before,.title::after{content:"›";color:var(--gold);font-weight:900;margin:0 8px;display:inline-block}
.title::before{transform:scaleX(-1)}
.subtitle{margin:10px 0 0;color:var(--brown);font-size:14px;font-weight:500}
.hint{margin:0;text-align:center;color:var(--muted);font-size:13px}
.fineprint{margin:0;text-align:center;color:var(--muted);font-size:12px}

.card{background:var(--paper-3);border-radius:12px;padding:16px;box-shadow:var(--shadow);
  border:1px dashed rgba(90,58,36,.35)}

/* 護照 */
.passport{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--navy);padding:10px;border-radius:14px;box-shadow:var(--shadow);min-height:300px}
.passport__page{background:var(--paper-3);border-radius:8px;padding:10px 8px;display:flex;flex-direction:column;gap:8px;position:relative}
.passport__page--left{background-image:repeating-linear-gradient(0deg,transparent 0 30px,rgba(30,58,95,.08) 30px 31px)}
.slot{display:flex;flex-direction:column;align-items:center;gap:2px}
.slot img{width:100%;max-width:140px;height:auto;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}
.slot small{font-family:var(--serif);font-weight:700;color:var(--navy);font-size:12px;background:var(--paper);padding:1px 8px;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.slot--empty{opacity:.35;min-height:70px;border:1px dashed var(--muted);border-radius:8px;justify-content:center;font-size:12px;color:var(--muted)}
.stamp-box{margin:auto 0;aspect-ratio:1/1;border:2px dashed rgba(90,58,36,.5);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:rgba(90,58,36,.45);position:relative;overflow:hidden}
.stamp-box__cup{width:44%;height:auto}
.stamp-box__date{font-family:var(--serif);font-weight:700;font-size:14px}
.stamp-box.is-stamped{color:var(--brick);border-color:var(--brick);border-style:solid;transform:rotate(-6deg)}
.stamp-box.is-stamped::after{content:"";position:absolute;inset:8px;border:2px solid var(--brick);border-radius:50%;opacity:.7}
.tag{align-self:center;font-family:var(--serif);font-weight:700;font-size:13px;color:var(--navy);background:var(--paper);padding:4px 10px;box-shadow:0 1px 3px rgba(0,0,0,.15)}

/* 連續 */
.streak{text-align:center}
.streak__beans{display:flex;justify-content:center;gap:6px;margin-bottom:8px}
.streak__beans i{width:26px;height:26px;border-radius:50%;background:var(--paper-2);border:1px solid rgba(90,58,36,.3);display:grid;place-items:center;font-style:normal;font-size:14px;opacity:.35}
.streak__beans i.on{opacity:1;background:var(--gold);border-color:var(--brown)}
.streak__beans--stamps i{border-radius:4px;width:30px;height:34px}
.streak__beans--stamps i.on{background:var(--paper-3);color:var(--brick);border:2px solid var(--brick)}
.streak__line{margin:0;font-family:var(--serif);font-weight:700;font-size:17px;color:var(--navy)}
.streak__line b{color:var(--brick);font-size:1.25em}
.streak__sub{margin:4px 0 0;font-size:13px;color:var(--brown)}
.streak__sub::before,.streak__sub::after{content:"";display:inline-block;width:28px;height:1px;background:var(--brown);vertical-align:middle;margin:0 8px;opacity:.5}

/* 按鈕 */
.btn{appearance:none;border:0;font-family:var(--sans);font-weight:700;cursor:pointer;border-radius:10px;padding:14px 18px;font-size:16px;transition:transform .08s ease,opacity .2s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn--primary{background:var(--navy);color:var(--paper-3);box-shadow:var(--shadow),inset 0 0 0 2px rgba(217,164,65,.6);font-family:var(--serif);font-weight:900;letter-spacing:.06em}
.btn--big{font-size:22px;padding:16px 20px;width:100%}
#btn-coupon{font-size:19px;letter-spacing:.02em}
.btn--primary b{color:var(--gold);font-size:1.25em}
.btn .chev{color:var(--gold);margin-left:4px}
.btn--secondary{background:var(--paper-3);color:var(--navy);box-shadow:var(--shadow);flex:1;font-size:14px;padding:12px 10px;border:1px dashed rgba(90,58,36,.35)}
.btn--ghost{background:transparent;color:var(--brown);font-weight:500;align-self:center;font-size:14px}
.btn--hold{width:100%;font-size:22px;background:var(--brick);color:#fff;padding:22px;box-shadow:var(--shadow);font-family:var(--serif);font-weight:900;user-select:none;-webkit-user-select:none;touch-action:none}
.btn--hold.is-down{background:#8E2A22;transform:scale(.97)}
.row{display:flex;gap:10px}
.sticky-bar{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom));margin-top:auto;padding-top:8px}

/* 風味磁磚 */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{position:relative;border:0;padding:0;background:transparent;cursor:pointer;transition:transform .2s,filter .2s;-webkit-tap-highlight-color:transparent}
.tile img{width:100%;height:auto;display:block;filter:drop-shadow(0 4px 6px rgba(0,0,0,.18))}
.tiles.has-pick .tile:not(.is-on){filter:grayscale(.85) opacity(.65);transform:scale(.96)}
.tile.is-on{transform:scale(1.04) translateY(-2px)}
.tile .check{position:absolute;top:4px;right:6px;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;display:none;place-items:center;font-size:16px;box-shadow:0 2px 4px rgba(0,0,0,.3)}
.tile.is-on .check{display:grid}
.divider{display:flex;align-items:center;gap:8px;color:var(--brown);font-size:12px;opacity:.7}
.divider::before,.divider::after{content:"";flex:1;border-top:1px dashed var(--brown)}

/* 豆子卡 */
.beans{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 10px;margin:0 -2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.beans::-webkit-scrollbar{display:none}
.beans:empty{display:none}
.bean{flex:0 0 86%;scroll-snap-align:center;display:grid;grid-template-columns:42% 1fr;gap:10px;background:var(--paper-3);border-radius:12px;padding:10px;box-shadow:var(--shadow);border:2px solid transparent;cursor:pointer;text-align:left;font-family:var(--sans);transition:border-color .2s}
.bean.is-on{border-color:var(--gold);box-shadow:var(--shadow),0 0 0 3px rgba(217,164,65,.35)}
.bean img{width:100%;height:auto;border-radius:8px}
.bean__name{font-family:var(--serif);font-weight:900;font-size:17px;word-break:keep-all;color:var(--navy);margin:0}
.bean__origin{font-size:12px;color:var(--brown);margin:2px 0 6px}
.bean__note{font-size:13px;color:var(--ink);margin:0 0 6px;border-top:1px dashed rgba(90,58,36,.35);padding-top:6px}
.bean__price{font-family:var(--serif);font-weight:900;color:var(--brick);font-size:20px;margin:0}

/* 車票 */
.tickets{display:flex;flex-direction:column;gap:12px}
.ticket{display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:12px;background:var(--paper-3);padding:14px;border-radius:10px;box-shadow:var(--shadow);border:0;cursor:pointer;text-align:left;font-family:var(--sans);position:relative;
  -webkit-mask:radial-gradient(circle at 0 50%,transparent 9px,#000 10px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 9px,#000 10px) right/51% 100% no-repeat}
.ticket::after{content:"";position:absolute;left:84px;top:10px;bottom:10px;border-left:2px dashed rgba(90,58,36,.35)}
.ticket svg{width:64px;height:64px}
.ticket__name{font-family:var(--serif);font-weight:900;font-size:20px;color:var(--navy);margin:0}
.ticket__desc{font-size:13px;color:var(--brown);margin:4px 0 0}
.ticket__go{color:var(--gold);font-size:28px;font-weight:900}
.ticket:active{transform:scale(.98)}

/* 手沖 */
.screen--brew{gap:10px}
.pour{display:grid;grid-template-columns:1fr 56px;gap:8px;align-items:center}
.pour__pad{position:relative;aspect-ratio:1/1;max-width:320px;width:100%;margin:0 auto;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair}
.pour__filter{width:100%;height:100%;display:block;filter:drop-shadow(0 8px 10px rgba(0,0,0,.2))}
.pour__hint{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);background:var(--paper-3);color:var(--navy);font-family:var(--serif);font-weight:700;font-size:14px;padding:4px 12px;box-shadow:var(--shadow);white-space:nowrap;transition:opacity .2s}
.pour__hint.is-warn{color:var(--brick)}
.kettle{position:absolute;width:110px;height:110px;left:68%;top:22%;transform:translate(-30%,-55%);pointer-events:none;opacity:.9;transition:opacity .2s}
.kettle svg{width:100%;height:100%;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.kettle__stream{position:absolute;left:calc(112/120*100% - 4px);top:calc(52/120*100%);width:5px;height:0;background:linear-gradient(#BFE0F5,#8FC3E6);border-radius:3px;transition:height .15s}
.kettle.is-pouring .kettle__stream{height:40px}
.gauge-v{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--paper-3);padding:8px 4px;border-radius:8px;box-shadow:var(--shadow);font-size:12px;color:var(--navy);font-family:var(--serif);font-weight:700}
.gauge-v__tube{width:14px;height:120px;border:2px solid var(--muted);border-radius:8px;background:#fff;position:relative;overflow:hidden}
.gauge-v__fill{position:absolute;left:0;right:0;bottom:0;height:100%;transform-origin:bottom;background:linear-gradient(#5FA8D3,#2F6F9F);transition:transform .2s}
.server{max-width:260px;width:80%;margin:-6px auto 0}
.server svg{width:100%;height:auto;display:block}
.stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.stages li{background:var(--paper-3);border:1px dashed rgba(90,58,36,.35);border-radius:6px;padding:8px 2px;text-align:center;font-family:var(--serif);font-weight:700;font-size:14px;color:var(--muted);position:relative}
.stages li.is-now{background:var(--gold);color:var(--navy);border-style:solid;border-color:var(--brown)}
.stages li.is-done{color:var(--navy);background:var(--paper-2)}
.stages li.is-done::after{content:"✓";position:absolute;top:-6px;right:-4px;background:var(--green);color:#fff;border-radius:50%;width:16px;height:16px;font-size:10px;display:grid;place-items:center}

/* 冷萃 */
.cold{display:flex;flex-direction:column;align-items:center;gap:14px}
.jar{width:170px;position:relative}
.jar svg{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.jar-lid{transform:translateY(-70px);opacity:0;transition:transform .5s cubic-bezier(.2,.9,.3,1.3),opacity .3s}
.jar.is-closed .jar-lid{transform:none;opacity:1}
.jar.is-shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-6px) rotate(-2deg)}75%{transform:translateX(6px) rotate(2deg)}}
.jar__msg{text-align:center;font-family:var(--serif);font-weight:700;color:var(--navy);font-size:15px;margin-top:6px;min-height:22px}
.jar__msg.is-warn{color:var(--brick)}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.chip{border:0;background:var(--paper-3);box-shadow:var(--shadow);padding:12px 16px;border-radius:40px;font-family:var(--serif);font-weight:700;font-size:16px;color:var(--navy);cursor:pointer;display:flex;align-items:center;gap:6px;transition:transform .3s,opacity .3s;-webkit-tap-highlight-color:transparent}
.chip.is-used{opacity:0;transform:translateY(-60px) scale(.6);pointer-events:none}
.chip.is-no{animation:shake .4s}
.clock[hidden]{display:none}
.clock{display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--serif);font-weight:700;color:var(--navy)}
.clock svg{width:72px;height:72px}
#clock-hand{transform-origin:40px 40px;animation:spin 2s linear}
@keyframes spin{to{transform:rotate(720deg)}}

/* 義式 */
.esp{display:flex;flex-direction:column;align-items:center;gap:12px}
.esp__machine{width:70%;max-width:260px;height:auto}
.gauge-h{width:80%;max-width:260px;background:var(--paper-3);border-radius:10px;padding:8px;box-shadow:var(--shadow)}
.gauge-h svg{width:100%;height:auto;display:block}
#needle{transition:transform .08s linear}

/* 結果 */
.cup-hero{position:relative;margin:0 -16px}
.cup-hero img{width:100%;height:auto;display:block}
.stamp-anim{position:absolute;right:14%;top:8%;width:28%;opacity:0;transform:translateY(-80px) rotate(-14deg) scale(1.3)}
.stamp-anim img{width:100%;height:auto;filter:drop-shadow(0 10px 10px rgba(0,0,0,.3))}
.stamp-anim.go{animation:stampdown 1.1s cubic-bezier(.3,1.4,.4,1) forwards}
@keyframes stampdown{0%{opacity:0;transform:translateY(-80px) rotate(-14deg) scale(1.3)}45%{opacity:1;transform:translateY(0) rotate(-6deg) scale(1)}60%{transform:translateY(4px) rotate(-6deg) scale(.96)}100%{opacity:0;transform:translateY(-120px) rotate(-10deg) scale(1)}}
.result__head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.result__flavor{font-family:var(--serif);font-weight:900;font-size:30px;margin:0;color:var(--brick);line-height:1.1}
.result__flavor span{color:var(--navy)}
.result__meta{margin:6px 0 0;color:var(--brown);font-size:14px;font-weight:500}
.seal{flex:0 0 auto;width:76px;height:76px;border-radius:50%;background:var(--gold);color:var(--brick);display:grid;place-items:center;font-family:var(--serif);font-weight:900;font-size:22px;box-shadow:inset 0 0 0 3px var(--paper-3),0 0 0 2px var(--gold);transform:rotate(-8deg);animation:pop .5s .9s both cubic-bezier(.3,1.6,.5,1)}
.seal--good{background:var(--paper-2);color:var(--navy);box-shadow:inset 0 0 0 3px var(--paper-3),0 0 0 2px var(--brown)}
.seal--rushed{background:var(--paper-2);color:var(--brown);box-shadow:inset 0 0 0 3px var(--paper-3),0 0 0 2px var(--muted);font-size:18px}
@keyframes pop{from{opacity:0;transform:rotate(-30deg) scale(1.8)}to{opacity:1;transform:rotate(-8deg) scale(1)}}
.result__comment{margin:12px 0;padding:10px 0;border-top:1px dashed rgba(90,58,36,.35);border-bottom:1px dashed rgba(90,58,36,.35);font-size:15px;color:var(--ink);font-weight:500;text-align:center}
.result__comment::before{content:"☕ ";}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--navy);color:var(--paper-3);padding:12px 18px;border-radius:10px;font-size:14px;font-weight:500;opacity:0;pointer-events:none;transition:.25s;max-width:92vw;text-align:center;box-shadow:var(--shadow);z-index:9}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}
@media (min-width:480px){body{padding:24px 0}.app{border-radius:28px;min-height:calc(100dvh - 48px)}.screen{min-height:calc(100dvh - 48px)}}