/* A Taipei shop fills the screen; replies and objects share that one view. */
:root{--ink:#2f4038;--jade:#159884;--coral:#ef685c;--gold:#ffc857;--mint:#e6dbc5;color:var(--ink);background:#efe8da}
body{min-height:580px}header{height:49px;flex-basis:49px;background:#fff5e6;border-bottom-color:#d8c6ac}
.brand-title,.intro-title,.bite-shell h2{font-family:"Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN",sans-serif;font-weight:700}
#toolbar{background:#f1e5d2;padding:7px 12px;border-bottom:1px solid #ddcbb4;z-index:8}
.segmented{background:#e5d8c1}.segmented button.selected,.music-strip button[aria-pressed=true]{background:#178c79}
.view-select select{background:#fff8eb;border-color:#cabc9f}.world-options summary,.music-strip button{background:#e5d8c1}.music-title{display:none}
#stage{min-height:350px;background:#f5c2a6;isolation:isolate}
#conversation{position:absolute;inset:auto 16px 15px;max-height:42%;background:#fff8ebed;border:1px solid #e3f2e4;border-radius:24px;box-shadow:0 9px 35px #164c4324;backdrop-filter:blur(10px);overflow:auto;z-index:5;pointer-events:auto}
.talk-inner{max-width:790px;padding:13px 19px;margin:auto}.talk-head{margin-bottom:7px}.talk-tools button{background:#e6d5bb;min-height:34px;padding:6px 11px}
.speaker{color:#356a60;font-size:10px}.intro-title{font-size:20px}.step-note{color:#4e7167;font-size:12px;margin-bottom:9px;line-height:1.6}
.level-pill{background:#e4d9bb;color:#267b67;margin-bottom:6px}.step-track{padding-bottom:6px}.step-track .current{background:#ef7667}.step-track .complete{background:#21a18a}
.primary{background:#ef7667;color:#fffef6;box-shadow:0 3px 0 #be5149;padding:11px 19px;min-height:44px}.secondary{background:#e8d8c0;padding:11px 16px;min-height:44px}
.actions{margin-top:9px;gap:7px}.audio-note,.level-note{display:none}.success-title{color:#128571;font-size:20px;margin:5px 0}.success-check{background:#e7dab8;color:#11886e;box-shadow:0 0 0 4px #f8ebd2}.success-detail{margin:6px 0;font-size:12px}
#stage[data-dialog=micro] #conversation,#stage[data-dialog=customer] #conversation,#stage[data-dialog=count-cups] #conversation,#stage[data-dialog=build-drink] #conversation,#stage[data-dialog=build-style] #conversation,#stage[data-dialog=build-where] #conversation,#stage[data-dialog=clerk-start] #conversation,#stage[data-dialog=clerk-thanks] #conversation,#stage[data-dialog=wait] #conversation{inset:13px auto auto 50%;transform:translateX(-50%);width:min(560px,calc(100% - 28px));max-height:25%;background:#fcfff6f2;border-radius:19px;box-shadow:0 5px 19px #24655520}
#stage[data-scene-choices="2"] #conversation .primary,#stage[data-dialog=count-cups] #conversation .primary,#stage[data-dialog=build-drink] #conversation .primary,#stage[data-dialog=build-where] #conversation .primary{display:none}
#stage[data-scene-choices="2"] #conversation .actions:empty{display:none}
#conversation .line{font-size:22px;line-height:1.3;margin:4px 0}#conversation .meaning{margin:4px 0;font-size:12px}#conversation .ears-prompt{margin:3px 0;padding:0;font-size:14px}.section-label{margin:5px 0;color:#247a67;font-size:13px}
#scene-choices{position:absolute;inset:0;pointer-events:none;z-index:4}
.scene-pick{position:absolute;display:block;width:calc(var(--object-size,150px) + 22px);height:calc(var(--object-size,150px) + 83px);padding:0;transform:translate(-50%,-45%);background:none;border:0;border-radius:28px;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}
.scene-pick:disabled{opacity:1;pointer-events:none}.scene-pick:active:not(:disabled){transform:translate(-50%,-45%) scale(.98)}
.scene-pick:focus-visible{outline:3px solid #ef685c;outline-offset:6px;background:#faffed18}
.scene-touch-ring{position:absolute;left:50%;top:39%;width:calc(var(--object-size,150px) + 12px);height:calc(var(--object-size,150px) + 12px);transform:translate(-50%,-50%);border:2px solid #fffdf2d9;border-radius:50%;background:radial-gradient(ellipse,#fff9df00 45%,#f5fcea22 70%,#fff0c633);box-shadow:0 0 0 5px #ffffff16,0 4px 17px #14574516;transition:border-color .2s,box-shadow .2s;pointer-events:none}
.scene-touch-ring i{position:absolute;right:5%;bottom:6%;width:25px;height:25px;border-radius:50%;background:#fffef7;border:2px solid #149b82;box-shadow:0 2px 6px #12665233}
.scene-touch-ring i:before{content:'+';display:grid;place-items:center;color:#149b82;font-size:20px;font-weight:600;line-height:21px}
.scene-pick:hover .scene-touch-ring,.scene-pick[aria-pressed=true] .scene-touch-ring{border-color:#ffcf5e;box-shadow:0 0 0 7px #ffc85733,0 0 35px #ffcd6866}
.scene-pick-caption{position:absolute;left:50%;top:78%;transform:translateX(-50%);display:grid;place-items:center;gap:1px;min-width:115px;max-width:200px;padding:6px 13px;background:#fafff5f0;border:1px solid #ddedde;border-radius:15px;box-shadow:0 3px 14px #224d4321;white-space:nowrap}
.scene-pick-caption strong{font-size:24px;letter-spacing:.02em;line-height:1.25;color:#176e61;font-weight:700}.scene-pick-caption small{font-size:11px;line-height:1.45;color:#416d5f}.scene-touch-label{font-size:9px;color:#63806b;line-height:1.6}
.person-pick{width:156px;height:116px}.person-pick .scene-touch-ring{width:67px;height:67px;top:22%;border-color:#ffe498;background:#ffcd5630;box-shadow:0 0 0 8px #ffd46116}.person-pick .scene-touch-ring i{right:0;bottom:0}.person-pick .scene-pick-caption{top:61%;border-color:#ffdaa0}
#stage[data-dialog=handoff] #conversation{max-width:390px;left:50%;transform:translateX(-50%)}
#overview{z-index:6;background:#fff0d5df}.success-scene{z-index:3}
#walkbar{position:absolute;bottom:12px;left:12px;right:12px;z-index:5;min-height:0;background:transparent;padding:0;pointer-events:none}#walkbar>*{pointer-events:auto}.walk-note{display:none}.pad button{background:#fff1d9e8;box-shadow:0 2px 9px #2260532b}.destinations button{background:#fff0dbe8;border-color:#cdb79a}
#notice{background:#156c60ef}button:focus-visible,a:focus-visible{outline-color:#ef685c}
@media(max-width:600px){
 body{min-height:580px}header{height:44px;flex-basis:44px}.languages button{padding:5px 9px}
 #toolbar{gap:5px;padding:5px 8px;justify-content:center}.view-select{font-size:0;gap:0}.view-select select{font-size:11px;max-width:148px;padding:8px;min-height:34px}.segmented button{min-height:32px;padding:6px 12px}.music-strip{width:auto}.music-strip button{min-height:32px;padding:6px 10px}.music-strip .music-next{display:none}.world-options summary{padding:8px 10px}
 #stage{min-height:350px}#conversation{inset:auto 9px 10px;max-height:36%;border-radius:20px}.talk-inner{padding:10px 12px}.talk-head{margin-bottom:5px}.intro-title{font-size:17px}.step-note{font-size:11px;line-height:1.55}.primary{font-size:12px;padding:10px 14px}.secondary{font-size:11px;padding:10px 13px}.success-title{font-size:17px}.success-check{width:32px;height:32px;font-size:20px}.success-detail{font-size:11px}.level-pill{font-size:10px}.actions{gap:6px}.talk-tools button{font-size:10px;min-height:31px;padding:6px 10px}
 #conversation .line{font-size:21px}#conversation .meaning{font-size:11px}.scene-pick-caption strong{font-size:23px}.scene-pick-caption{padding:5px 9px;min-width:102px}.scene-pick-caption small{font-size:10px}
 #overview{right:10px;top:auto;bottom:12px;width:37px;height:37px;font-size:20px}#stage:not([data-dialog=walking]) #overview{display:none}
 #stage[data-dialog=greeting-song] #conversation{max-height:44%;}.hello-wave{min-height:65px}.hello-hand{font-size:28px}.hello-wave strong{font-size:24px}
 #stage[data-dialog=micro] #conversation,#stage[data-dialog=customer] #conversation,#stage[data-dialog=count-cups] #conversation,#stage[data-dialog=build-drink] #conversation,#stage[data-dialog=build-style] #conversation,#stage[data-dialog=build-where] #conversation,#stage[data-dialog=clerk-start] #conversation,#stage[data-dialog=clerk-thanks] #conversation,#stage[data-dialog=wait] #conversation{top:10px;max-height:27%;}
}
@media(prefers-reduced-motion:reduce){.scene-touch-ring{transition:none}.scene-pick:active:not(:disabled){transform:translate(-50%,-45%)}}

/* Spoken words remain in the scene until the learner starts another round. */
#stage[data-dialog]:not([data-dialog=walking]):not([data-dialog=intro]):not([data-dialog=greeting-song]):not([data-dialog=done]) #conversation{inset:12px auto auto 50%;transform:translateX(-50%);width:min(620px,calc(100% - 24px));max-height:48%;border-radius:20px}
.exchange-recent{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;align-items:start}.exchange-recent:has(> :only-child){grid-template-columns:1fr}
.speech-bubble{min-width:0;padding:5px 11px 10px;border:1px solid #c8e4d5;border-radius:15px;background:#eff7eb;transition:box-shadow .18s,border-color .18s}
.speech-self{background:#fff0e3;border-color:#efd3bd}.speech-top{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:39px}.speech-top>span{font-size:11px;font-weight:650;color:#43685c;line-height:1.3}.speech-replay{display:flex;align-items:center;justify-content:center;gap:3px;flex-shrink:0;min-width:50px;min-height:44px;padding:4px;background:transparent;border-radius:11px;font-size:10px}.speech-replay:hover{background:#d5e9db}.speech-self .speech-replay:hover{background:#f8ddc6}.speech-replay>span:first-child{font-size:17px}.speech-replay:disabled{opacity:.5}
.speech-zh{font-size:21px;line-height:1.5;margin:0;overflow-wrap:anywhere}.speech-pinyin{font-size:12px;line-height:1.5;margin:3px 0 0;color:#80603e}.speech-meaning{font-size:12px;line-height:1.5;color:#4a695f;margin:3px 0 0}.speech-reveal{font-size:12px;min-height:44px;background:#dcebe0;padding:8px 12px;border-radius:12px;margin-top:2px}.speech-bubble.is-speaking{border-color:#d69e27;box-shadow:0 0 0 3px #f4cd7359}.take-your-time{font-size:11px;line-height:1.5;color:#547667;margin:9px 0}
.exchange-history{margin-top:7px;font-size:11px;color:#476c5e}.exchange-history>summary{cursor:pointer;min-height:32px;padding:8px 0}.exchange-earlier{display:grid;gap:7px;max-height:180px;overflow:auto;padding:4px 2px;overscroll-behavior:contain}.exchange-earlier .speech-bubble{padding-bottom:7px}.exchange-earlier .speech-zh{font-size:18px}
#stage[data-dialog=done] #conversation{max-height:61%}#stage[data-dialog=done] .step-track{display:none}#stage[data-dialog=done] .success-badge{display:none}#stage[data-dialog=done] .success-title{font-size:17px;margin-top:12px}#stage[data-dialog=done] .success-check{width:27px;height:27px;font-size:18px;box-shadow:none}#stage[data-dialog=done] .success-detail{display:none}
@media(max-width:600px){.exchange-recent{gap:7px}.speech-bubble{padding:3px 8px 9px;border-radius:13px}.speech-top>span{font-size:10px}.speech-replay{min-width:44px}.speech-replay>span:last-child{display:none}.speech-zh{font-size:20px}.speech-meaning{font-size:11px}.speech-pinyin{font-size:11px}#stage[data-dialog]:not([data-dialog=walking]):not([data-dialog=intro]):not([data-dialog=greeting-song]):not([data-dialog=done]) #conversation{max-height:47%;top:8px;width:calc(100% - 18px)}#stage[data-dialog=done] #conversation{max-height:61%}.take-your-time{font-size:10px}.exchange-earlier{max-height:150px}}
@media(prefers-reduced-motion:reduce){.speech-bubble{transition:none}}

#play-settings{position:relative;z-index:8;flex:none;background:#f1e5d2;border-bottom:1px solid #ddcbb4}#play-settings>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:8px 17px;cursor:pointer;list-style:none;font-size:12px;color:#376b5b}#play-settings>summary::-webkit-details-marker{display:none}#practice-label{font-weight:650}#settings-label{border-radius:15px;background:#e1cbb0;padding:6px 11px;font-size:11px}#settings-label:after{content:' ＋'}#play-settings[open] #settings-label:after{content:' −'}#play-settings #toolbar{border-bottom:0}
@media(max-width:600px){.speech-replay>span:first-child{display:none}.speech-replay>span:last-child{display:inline}.speech-replay{font-size:11px}.speech-meaning,.speech-pinyin{font-size:12px}#play-settings>summary{font-size:11px;padding:6px 13px}.speech-top>span{font-size:10px}}
/* Smoked-tea glass, warm rim light and legible speech within the town. */
#stage[data-dialog]:not([data-dialog=walking]):not([data-dialog=intro]):not([data-dialog=done]):not([data-dialog=greeting-song]) #conversation{inset:10px auto auto 50%;transform:translateX(-50%);width:min(560px,calc(100% - 18px));max-height:47%}
#stage[data-dialog] #conversation{color:#fff3de;background:linear-gradient(135deg,#354d40d4,#243b32cc);border:1px solid #efc28c80;box-shadow:0 16px 38px #332b354d,inset 0 1px 0 #ffe1ac73,inset 0 -1px 0 #0f28294d;-webkit-backdrop-filter:blur(5px) saturate(1.04);backdrop-filter:blur(5px) saturate(1.04)}
#stage[data-dialog] #conversation{background-color:transparent}
#conversation .speech-bubble{background:linear-gradient(145deg,#264a3cbc,#16372cba);border-color:#c4cda145;box-shadow:inset 0 1px 0 #e6d0a629,0 3px 8px #14251b24}
#conversation .speech-self{background:linear-gradient(145deg,#6b533bad,#493f2fba);border-color:#e9c08852}
.scene-pick-caption{background:linear-gradient(140deg,#345543df,#253e33d1);border-color:#e5c38a99;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 7px 20px #322a3440,inset 0 1px 0 #ffe0a83d}
.speech-meaning .study-meaning{display:block}.speech-meaning .study-meaning+.study-meaning{margin-top:2px}
#stage[data-study=both] .scene-pick-caption{white-space:normal;text-align:center;min-width:125px;max-width:175px}
#stage[data-study=both] .scene-pick-caption small{display:block;line-height:1.4}
#conversation[data-kind=intro],#conversation[data-kind=done],dialog[open]{animation:game-window-in .22s ease-out both}
dialog{color:#fff2dc;background:linear-gradient(135deg,#3c5140e8,#293e32e6);border:1px solid #eac18d99;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 22px 65px #302a365c,inset 0 1px 0 #ffe6b866}
dialog::backdrop{background:#392e343d;backdrop-filter:blur(2px)}
#music-practice{background:linear-gradient(135deg,#3c5140e8,#293e32e6)}.bite-shell{background:linear-gradient(135deg,#3e524529,#243a3140)}
.world-options[open]>div{background:#fff1dce8;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-color:#d9bb8c}
@keyframes game-window-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){#conversation[data-kind=intro],#conversation[data-kind=done],dialog[open]{animation:none}}
/* Explicit light text belongs to dark glass; pale controls retain dark ink. */
#conversation .speaker,#conversation .speech-top>span,#conversation .success-title{color:#ffe2ad}
#conversation .step-note,#conversation .meaning,#conversation .speech-meaning,#conversation .take-your-time,#conversation .exchange-history,#conversation .ears-prompt,#conversation .success-detail{color:#f1e3ce}
#conversation .pinyin,#conversation .speech-pinyin,#conversation .section-label{color:#ffe2ad}
#conversation .talk-tools button,#conversation .speech-reveal,#conversation .secondary,dialog .secondary{color:#f7e6c8;background:#274c3de6;box-shadow:inset 0 0 0 1px #b6bc9259}
#conversation .primary,dialog .primary{color:#2d362a;background:linear-gradient(#f0c38a,#dfa675);box-shadow:0 3px 0 #74583f,inset 0 1px 0 #ffe7bba6}
#conversation .level-pill{color:#f3d49c;background:#6655368f}
#conversation .speech-replay{color:#fff1d5}#conversation .speech-replay:hover{background:#75946d40}#conversation .speech-self .speech-replay:hover{background:#c7a66c3b}
#conversation .success-check{color:#fff0c6;background:#557850}
#conversation .choice,#conversation .ingredients button,#conversation .hello-wave,#conversation .order-summary span{color:#283f32}
.scene-pick-caption strong{color:#fff1c8}.scene-pick-caption small{color:#f1dfbc}.scene-touch-label{color:#f2dfbd}
.bite-header,.bite-shell h2,.bite-stamps{color:#fff1d4}.bite-kicker,.bite-feedback,.bite-foot,.bite-help,.bite-form-label,.bite-intro{color:#f1dfbd}
.bite-header button{color:#f8e7c7;background:#254838}.bite-modes{background:#183e2c85}.bite-modes button{color:#f5e2bc}.bite-modes button[aria-pressed=true]{background:#bc8950;color:#fff8e6}
.bite-stamps span{color:#e8dcb9;background:#486347;border-color:#bcc59b}.bite-stamps span.collected{color:#624723;background:#ffdf82}
.world-options select{background:#fff8e9;border-color:#c6b393;color:#304d3a}.world-options small{color:#635c45}.languages{background:#e8dbc5}.languages button.selected{background:#fffaee}
@media(prefers-reduced-transparency:reduce){#stage[data-dialog] #conversation,.scene-pick-caption,dialog,#music-practice,.bite-shell{background:#2a4336}.world-options[open]>div{background:#fff1dc}#conversation .speech-bubble{background:#214431}#conversation .speech-self{background:#564833}}