/* Café Español demo. Everything is sized in container units of #stage (1cqw = 1% of its width). */
#stage{container-type:inline-size;--ok:#4F8A5B;--ok-soft:#E3F0E2;--gold:#F2C14E;--wood:#8A5A3E}
#stage *{box-sizing:border-box}
.scene{position:absolute;inset:0}
.scene-svg{display:block;width:100%;height:100%}

/* Upgrades appear with the café level */
.up{opacity:0;transform:scale(.6);transform-box:fill-box;transform-origin:50% 0;transition:opacity .6s,transform .7s cubic-bezier(.3,1.6,.5,1)}
.lv2 .up-lights,.lv3 .up-plants,.lv4 .up-cat{opacity:1;transform:none}
.up-cat{transform-origin:50% 100%}
.lv4-only{opacity:0;transition:opacity .8s}.lv4 .lv4-only{opacity:1}
.bulb{animation:twinkle 1.6s ease-in-out infinite}.bulb.b1{animation-delay:-.55s}.bulb.b2{animation-delay:-1.1s}
@keyframes twinkle{50%{opacity:.55}}
.steam path{animation:steam 2.4s ease-in-out infinite}.steam path+path{animation-delay:-1.2s}
@keyframes steam{0%{opacity:0;transform:translateY(4px)}40%{opacity:1}100%{opacity:0;transform:translateY(-6px)}}
.zz{animation:zz 2.6s ease-in-out infinite}@keyframes zz{50%{opacity:.2;transform:translate(3px,-3px)}}
.glow{animation:glow 4s ease-in-out infinite}@keyframes glow{50%{opacity:.75}}

/* Customers */
.cust .ex{display:none}
.cust[data-mood=neutral] .ex-neutral,.cust[data-mood=happy] .ex-happy,.cust[data-mood=sad] .ex-sad{display:inline}
.eyes{animation:blink 4.2s infinite;transform-box:fill-box;transform-origin:center}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.bob{animation:breathe 2.8s ease-in-out infinite}
@keyframes breathe{50%{transform:translateY(1.5px)}}
.walking .bob{animation:walkbob .3s ease-in-out infinite}
@keyframes walkbob{50%{transform:translateY(-5px)}}
.cust.hop{animation:hop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes hop{40%{transform:translateY(-9px)}}

/* HUD */
.hud{position:absolute;left:0;right:0;top:0;height:9.6%;display:flex;align-items:center;gap:2.2cqw;padding:0 2.6cqw;background:color-mix(in srgb,var(--panel) 90%,transparent);border-bottom:1.5px solid var(--line);font:600 max(11px,3.1cqw)/1 Inter,system-ui,sans-serif;color:var(--ink);z-index:5}
.lvl{display:flex;flex-direction:column;gap:1cqw;flex:1;min-width:0}
.lvl-name{font:700 max(12px,3.5cqw)/1 var(--display);white-space:nowrap}
.lvl-name small{font:600 max(10px,2.6cqw) Inter,system-ui,sans-serif;color:var(--mid);margin-left:1cqw}
.lvl-bar{display:block;height:max(6px,1.7cqw);border-radius:9px;background:rgba(59,42,32,.1);overflow:hidden}
.lvl-bar i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,#E9A15A,var(--accent));transition:width .6s cubic-bezier(.3,1.3,.5,1)}
.pill{display:flex;align-items:center;gap:1.2cqw;padding:1.2cqw 2.2cqw;border-radius:99px;background:#fff;border:1.5px solid var(--line);white-space:nowrap}
.pill svg{width:max(13px,3.6cqw);height:max(13px,3.6cqw);color:var(--mid)}
.coin-ico{width:max(13px,3.6cqw);height:max(13px,3.6cqw);border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFE39A,var(--gold) 60%,#D9A23A);box-shadow:inset 0 0 0 1.5px #B9862C}
.tips.bump{animation:bump .4s}
@keyframes bump{40%{transform:scale(1.18)}}
.voice{border:1.5px solid var(--line);background:#fff;color:var(--mid);border-radius:99px;padding:1cqw 2cqw;display:flex;align-items:center;gap:1cqw;font:600 max(11px,2.9cqw) Inter,system-ui,sans-serif;cursor:pointer;min-height:32px}
.voice svg{width:max(14px,3.8cqw);height:max(14px,3.8cqw)}
.voice[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}

/* Speech bubble */
.bubble{position:absolute;left:50%;bottom:68.6%;width:80%;transform:translateX(-50%);background:#fff;border:2px solid var(--ink);border-radius:5cqw;padding:2.6cqw 3.4cqw 2.4cqw;box-shadow:0 1.2cqw 0 rgba(59,42,32,.12);z-index:3;transition:opacity .2s,transform .25s cubic-bezier(.3,1.5,.5,1)}
.bubble::after{content:"";position:absolute;left:50%;bottom:-2.6cqw;width:4.4cqw;height:4.4cqw;background:#fff;border:2px solid var(--ink);border-top:0;border-left:0;transform:translateX(-50%) rotate(45deg)}
.bubble.off{opacity:0;transform:translateX(-50%) scale(.85) translateY(3cqw);pointer-events:none}
.say-row{display:flex;align-items:center;gap:2cqw}
.say{margin:0;flex:1;font:600 max(16px,5.3cqw)/1.15 var(--display);color:var(--ink);letter-spacing:-.01em}
.say b{color:var(--accent)}
.en{margin:.8cqw 0 0;font:italic 500 max(12px,3.3cqw)/1.25 Inter,system-ui,sans-serif;color:var(--mid)}
.en:empty{display:none}
.speak{flex:none;width:max(36px,9cqw);height:max(36px,9cqw);border-radius:50%;border:2px solid var(--ink);background:var(--bg);color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.speak svg{width:55%;height:55%}
.speak:active{transform:scale(.92)}
.speak[hidden]{display:none}
.again{display:inline-block;margin-bottom:1.2cqw;font:700 max(10px,2.7cqw)/1 Inter,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:#5D7FA8;border-radius:99px;padding:.9cqw 2cqw}
.again[hidden]{display:none}
.patience{height:max(5px,1.4cqw);margin-top:2cqw;border-radius:9px;background:rgba(59,42,32,.1);overflow:hidden}
.patience i{display:block;height:100%;width:100%;background:var(--ok);border-radius:9px;transform-origin:left;transition:background-color .4s}
.patience.mid i{background:#E0A43A}.patience.low i{background:var(--accent)}
.patience[hidden]{display:none}

/* Lesson ribbon on the counter front */
.ribbon{position:absolute;left:4%;right:4%;top:58.4%;height:9.6%;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 3cqw;background:var(--panel);border:2px solid var(--ink);border-radius:3cqw;box-shadow:0 1cqw 0 rgba(59,42,32,.18);font:500 max(12px,3.4cqw)/1.2 Inter,system-ui,sans-serif;color:var(--ink);z-index:2;transition:opacity .25s,transform .3s cubic-bezier(.3,1.5,.5,1)}
.ribbon.off{opacity:0;transform:translateY(2cqw) scale(.95)}
.ribbon b{font:700 max(13px,3.8cqw) var(--display);color:var(--accent)}
.ribbon .ok{color:var(--ok);font-weight:700;white-space:nowrap}
.ribbon .back{display:inline-block;color:#fff;background:#5D7FA8;border-radius:99px;padding:.5cqw 1.8cqw;font-weight:700;font-size:.9em;white-space:nowrap}

/* Serving tray */
.tray{position:absolute;left:0;right:0;bottom:0;height:30.4%;padding:2.4cqw 2.4cqw 2.8cqw;background:linear-gradient(#E7D2B6,#EBD9C2 30%);border-top:2px solid var(--ink);display:grid;grid-template-columns:repeat(4,1fr);gap:2cqw;z-index:2}
.tray.replies{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.opt{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6cqw;padding:1.4cqw 1cqw;border-radius:3.4cqw;border:2px solid rgba(59,42,32,.22);background:#FFFCF6;box-shadow:0 1.1cqw 0 rgba(59,42,32,.16);cursor:pointer;color:var(--ink);font:inherit;transition:transform .15s,box-shadow .15s,border-color .2s,background-color .2s,opacity .3s;-webkit-tap-highlight-color:transparent;min-width:0}
.opt:not(:disabled):hover{transform:translateY(-.6cqw);border-color:var(--accent)}
.opt:not(:disabled):active,.opt.press{transform:translateY(.8cqw);box-shadow:0 .3cqw 0 rgba(59,42,32,.16)}
.opt:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.opt:disabled{cursor:default}
.opt svg{width:100%;max-width:21cqw;flex:1;min-height:0}
.opt .lab{min-height:2.3em;display:flex;align-items:center;font:600 max(11px,2.9cqw)/1.12 var(--display);text-align:center;color:var(--ink);opacity:0;transform:translateY(1cqw);transition:opacity .3s,transform .3s}
.opt .lab::before{content:"";}
.revealed .opt .lab{opacity:1;transform:none}
.opt .q{position:absolute;bottom:1.8cqw;left:0;right:0;text-align:center;font:700 max(11px,2.8cqw) Inter,system-ui,sans-serif;color:rgba(59,42,32,.28);letter-spacing:.3em;transition:opacity .2s}
.revealed .opt .q{opacity:0}
.replies .opt{flex-direction:column;padding:1.6cqw 2.4cqw;gap:.4cqw}
.replies .opt .rt{font:600 max(14px,4.3cqw)/1.1 var(--display)}
.replies .opt .lab{min-height:0;font:italic 500 max(11px,2.8cqw)/1.1 Inter,system-ui,sans-serif;color:var(--mid);transform:none;opacity:0}
.revealed .opt.dim{opacity:.45}
.opt.right{border-color:var(--ok);background:var(--ok-soft);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 35%,transparent),0 1.1cqw 0 rgba(59,42,32,.16)}
.opt.wrong{border-color:var(--accent);background:#F9E1D9;animation:shake .4s}
.opt.right::after,.opt.wrong::after{position:absolute;top:-2cqw;right:-1.4cqw;width:max(20px,6cqw);height:max(20px,6cqw);border-radius:50%;display:grid;place-items:center;color:#fff;font:700 max(12px,3.4cqw)/1 Inter,system-ui,sans-serif;border:2px solid #fff}
.opt.right::after{content:"✓";background:var(--ok)}
.opt.wrong::after{content:"✗";background:var(--accent)}
.opt.glow{animation:glowpulse 1s ease-in-out 2}
@keyframes glowpulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--ok) 45%,transparent)}}
@keyframes shake{20%,60%{transform:translateX(-1.4cqw)}40%,80%{transform:translateX(1.4cqw)}}

/* Tips, level-up, pointer */
.coin{position:absolute;width:max(18px,5.4cqw);height:max(18px,5.4cqw);margin:calc(max(18px,5.4cqw)/-2) 0 0 calc(max(18px,5.4cqw)/-2);border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFE9A8,var(--gold) 55%,#D9A23A);box-shadow:inset 0 0 0 2px #B9862C,0 2px 0 rgba(0,0,0,.15);display:grid;place-items:center;font:800 max(10px,3cqw)/1 Inter,system-ui,sans-serif;color:#8C5E12;z-index:7;pointer-events:none}
.tip-pop{position:absolute;transform:translate(-50%,-50%);font:700 max(16px,5.4cqw)/1 var(--display);color:#9A6A12;text-shadow:0 2px 0 #fff,0 -2px 0 #fff,2px 0 0 #fff,-2px 0 0 #fff;z-index:7;pointer-events:none;white-space:nowrap}
.tip-pop small{display:block;font:700 max(10px,2.8cqw) Inter,system-ui,sans-serif;text-align:center;color:var(--ok);margin-top:.6cqw}
.banner{position:absolute;left:50%;top:22%;transform:translate(-50%,-50%) scale(.6);opacity:0;z-index:8;pointer-events:none;text-align:center;background:var(--accent);color:#fff;border:2.5px solid var(--ink);border-radius:5cqw;padding:3cqw 6cqw;box-shadow:0 1.6cqw 0 rgba(59,42,32,.2);transition:opacity .25s,transform .45s cubic-bezier(.3,1.6,.5,1);white-space:nowrap}
.banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.banner h3{margin:0;font:700 max(24px,8.6cqw)/1 var(--display)}
.banner p{margin:1.2cqw 0 0;font:600 max(12px,3.4cqw)/1.2 Inter,system-ui,sans-serif;opacity:.95}
.spark{position:absolute;width:2.4cqw;height:2.4cqw;margin:-1.2cqw;border-radius:50%;background:var(--gold);z-index:7;pointer-events:none}
.pointer{position:absolute;left:0;top:0;width:max(34px,11cqw);z-index:9;pointer-events:none;opacity:0;transition:left .7s cubic-bezier(.45,0,.2,1),top .7s cubic-bezier(.45,0,.2,1),opacity .3s;filter:drop-shadow(0 3px 2px rgba(0,0,0,.25))}
.pointer svg{display:block;width:100%;transform:translate(-49%,-3%);transition:transform .12s}
.pointer.tap svg{transform:translate(-49%,2%) scale(.84)}
.ripple{position:absolute;width:16cqw;height:16cqw;margin:-8cqw;border-radius:50%;border:3px solid var(--accent);z-index:8;pointer-events:none}

/* Intro + results */
.sheet{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:5cqw;background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(2px)}
.sheet .card{width:100%;background:var(--panel);border:2px solid var(--ink);border-radius:5cqw;padding:6cqw 6cqw 5.4cqw;box-shadow:0 2cqw 0 rgba(59,42,32,.15);text-align:center}
.kicker{margin:0 0 1.6cqw;font:700 max(11px,2.9cqw)/1 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.sheet h2{margin:0 0 2.4cqw;font:700 max(26px,8.6cqw)/1 var(--display);letter-spacing:-.02em}
.sheet p.lead{margin:0 0 4cqw;color:var(--mid);font-size:max(14px,3.8cqw);line-height:1.4}
.voice-opt{display:flex;align-items:center;justify-content:center;gap:2cqw;margin:0 0 4.4cqw;font:600 max(13px,3.5cqw) Inter,system-ui,sans-serif;color:var(--ink);cursor:pointer}
.voice-opt input{width:max(18px,5cqw);height:max(18px,5cqw);accent-color:var(--accent)}
.sheet .btn{width:100%}
.mini-orders{display:flex;justify-content:center;gap:2cqw;margin:0 0 4cqw}
.mini-orders span{font:600 max(12px,3.3cqw) var(--display);background:#fff;border:1.5px solid var(--line);border-radius:99px;padding:1.2cqw 2.6cqw}

.results{position:absolute;inset:0;z-index:10;background:var(--panel);display:flex;flex-direction:column;padding:4cqw 5cqw 0;gap:2.2cqw;overflow:hidden}
.res-head{display:flex;align-items:center;gap:3.4cqw}
.snap{flex:none;width:30cqw;margin:0 0 0 .6cqw;background:#fff;padding:1.3cqw 1.3cqw 0;border:1.5px solid var(--line);box-shadow:0 1cqw 2.4cqw rgba(59,42,32,.16);transform:rotate(-3deg)}
.snap svg{display:block;width:100%;height:auto;aspect-ratio:4/3}
.snap figcaption{font:700 max(11px,3.2cqw)/1 var(--display);text-align:center;padding:1.4cqw 0 1.6cqw;color:var(--ink)}
.res-side{flex:1;min-width:0}
.res-side h3{margin:0;font:700 max(18px,6cqw)/1 var(--display)}
.res-side p{margin:.8cqw 0 1.8cqw;color:var(--mid);font-size:max(12px,3.2cqw);line-height:1.25}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4cqw}
.stats div{background:#fff;border:1.5px solid var(--line);border-radius:2.6cqw;padding:1.6cqw .6cqw 1.4cqw;text-align:center;min-width:0}
.stats b{display:block;font:700 max(13px,4.4cqw)/1 var(--display);color:var(--ink);white-space:nowrap}
.stats span{display:block;margin-top:.7cqw;font:600 max(9px,2.4cqw)/1.1 Inter,system-ui,sans-serif;color:var(--mid)}
.learned-t{margin:.6cqw 0 0;font:700 max(10px,2.7cqw)/1 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--mid)}
.learned{display:grid;grid-template-columns:1fr 1fr;gap:1.4cqw 2.4cqw;margin:0;padding:0;list-style:none}
.learned li{display:flex;align-items:flex-start;gap:1.4cqw;min-width:0;font-size:max(10.5px,2.8cqw);line-height:1.15}
.learned li i{flex:none;width:max(13px,3.6cqw);height:max(13px,3.6cqw);margin-top:.2em;color:var(--ok)}
.learned li i svg{display:block;width:100%;height:100%}
.learned li.back i{color:#5D7FA8}.learned li.missed i{color:var(--accent)}
.learned li div{min-width:0}
.learned li b{display:block;font:600 max(12px,3.3cqw)/1.1 var(--display);color:var(--ink)}
.learned li span{color:var(--mid)}
.learned li em{display:block;margin-top:.3em;font:600 max(9.5px,2.4cqw)/1.1 Inter,system-ui,sans-serif;font-style:normal;color:#5D7FA8}.learned li.missed em{color:var(--accent)}
/* The CTA (from showCta) becomes the bottom of the results card */
.ended #cta{top:auto;background:linear-gradient(transparent,var(--panel) 14%);flex-flow:row wrap;align-content:flex-end;gap:2.6cqw;padding:7cqw 5cqw 5cqw;z-index:11}
.ended #cta h2{flex-basis:100%;font-size:max(22px,7.4cqw)}
.ended #cta p{flex-basis:100%;font-size:max(13px,3.5cqw);line-height:1.35;margin-bottom:1.4cqw}
.ended #cta .btn{font-size:max(15px,4.2cqw);padding:2.8cqw 4.4cqw}

@media (prefers-reduced-motion:reduce){.pointer{transition:none}}