/* Viewport shell: fixed controls, flexible stage, no document scrolling. */
html,body{height:100%;width:100%;overflow:hidden;overscroll-behavior:none}
.shell{box-sizing:border-box;max-width:none;width:100%;height:calc(100dvh / var(--ui-scale,1));zoom:var(--ui-scale,1);display:flex;flex-direction:column;padding:0 max(14px,env(safe-area-inset-right)) max(0px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));min-height:0}
header{width:100%;max-width:1056px;align-self:center;flex:0 0 54px;height:auto;padding-top:env(safe-area-inset-top)}
main{width:100%;flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,540px) 230px;gap:50px;justify-content:center;align-items:stretch;padding:16px 0 10px}
.game{height:100%;min-height:0;width:100%;max-width:540px;margin:0 auto;display:flex;flex-direction:column;padding:15px 22px 0}
.game-top{flex:none;padding-bottom:10px}.order{flex:0 0 104px;min-height:0;padding-top:8px;padding-bottom:20px}.stage{flex:1 1 0;height:auto!important;min-height:0;container-type:size;overflow:hidden}.stage canvas{position:absolute;inset:0;width:100%;height:100%}
.stage-target{top:clamp(5px,12cqh,42px);font-size:clamp(10px,4cqh,13px);gap:clamp(2px,2cqh,6px)}.stage-target b{font-size:clamp(22px,14cqh,42px)}.stage-target small{font-size:11px}.stage-target>span:last-child{font-size:clamp(10px,4cqh,14px)}
.recipe{flex:none;padding:10px 0}.controls{flex:none;padding-bottom:12px}.controls #hint{height:36px;min-height:0;line-height:18px;display:flex;align-items:center;justify-content:center;margin:6px 0;font-size:12px}.pour{min-height:51px}.game-footer{flex:none;margin:0 -22px;padding:10px 22px}.guide{align-self:center;max-height:100%;overflow:hidden}.shell>footer{flex:none;padding:10px 0;width:100%;max-width:1056px;align-self:center;font-size:11px}
dialog{overflow:hidden;max-height:94dvh}.finish-inner{padding:clamp(12px,3vh,28px)}.finish-star{font-size:clamp(20px,5vh,48px);margin:3px}.finish-inner h2{font-size:clamp(17px,3vh,25px)}.finish-inner>p{margin:6px 0;font-size:12px;line-height:1.5}.final-score{margin:8px}.final-score b{font-size:clamp(32px,7vh,56px)}.result-row{padding:clamp(3px,1vh,10px) 0;font-size:12px}.finish-inner .pour{min-height:44px}.text-button{padding:10px}
@media(max-width:880px){main{grid-template-columns:minmax(0,540px);gap:0}.guide{display:none}.shell>footer{justify-content:center}}
@media(max-width:540px){header{flex-basis:47px}.game{padding:13px 16px 0}.game-footer{margin:0 -16px;padding:9px 16px}.order{flex-basis:98px}.order h2{font-size:26px}.ingredient .name{font-size:12px}.ingredient small{font-size:10px}.ingredient .amount{font-size:19px}.game-top .eyebrow{font-size:11px}.game-footer{font-size:11px}.shell>footer{display:none}main{padding-top:13px;padding-bottom:8px}}
@media(max-height:720px){.shell>footer,.guide{display:none}main{grid-template-columns:minmax(0,540px);padding-top:12px;padding-bottom:6px}header{flex-basis:43px}.brand{font-size:21px}.brand-mark{font-size:29px}.game{padding-top:11px}.order{flex-basis:87px}.order h2{font-size:24px;margin:5px 0}.order .tiny{font-size:11px}.order-tag b{font-size:26px}.recipe{padding:7px 0}.ingredient small{margin-bottom:3px}.ingredient .amount{margin-top:3px;font-size:18px}.ingredient .name{font-size:12px}.game-top{padding-bottom:8px}.controls{padding-bottom:9px}.pour{min-height:47px}.game-footer{padding-top:7px;padding-bottom:7px}.order .feedback{top:2px;padding:6px 10px}.feedback-verdict{font-size:15px}.feedback-detail{font-size:12px}.feedback-detail b{font-size:15px}.cup-toast{margin-top:2px;padding-top:2px}.cup-toast .customer-comment{font-size:11px}}
/* Apply the same compact scaling to the top-layer results dialog. */
dialog{zoom:var(--ui-scale,1);max-height:calc(94dvh / var(--ui-scale,1))}
/* Scores share the existing top row instead of taking a bottom row. */
.game-top{gap:10px;flex-wrap:nowrap}.game-top #nightLabel{display:none}.game-top .dots{flex:none;gap:6px}.game-top .game-footer{display:flex;flex:1;justify-content:flex-end;gap:16px;white-space:nowrap;min-width:0;margin:0;padding:0;border:0;background:none;font-size:11px;line-height:20px}.game-top .game-footer b{font-size:17px;margin-left:4px}.game-top .game-footer small{font-size:10px}
@media(max-width:360px){.game-top{gap:8px}.game-top .dots{gap:4px}.game-top .dot{width:6px;height:6px}.game-top .game-footer{gap:9px;font-size:10px}.game-top .game-footer b{font-size:15px;margin-left:3px}.game-top .game-footer small{font-size:9px}}

.game::before,.game::after{content:none;display:none}

.stage-target .stage-note{position:static;display:block;margin-top:7px;text-align:right;line-height:1.5}.stage-target .stage-note>span:last-child{font:11px 'Noto Sans TC',sans-serif;letter-spacing:0;color:var(--muted)}
/* Give the glass more room while keeping the controls fixed. */
.order{flex-basis:94px}.controls #hint{height:32px;margin:4px 0}.controls{padding-bottom:9px}.recipe{padding:8px 0}
@media(max-width:540px){.order{flex-basis:88px}}
@media(max-height:720px){.order{flex-basis:80px}.controls #hint{height:30px}}
/* Reserve a true 56 CSS-pixel banner area, outside scaled gameplay. */
.shell{height:calc((100dvh - 56px) / var(--ui-scale,1))}.banner-slot{position:fixed;left:0;right:0;bottom:0;height:56px;box-sizing:border-box;background:#101713;border-top:1px solid #303b30;z-index:6}
.order{flex-basis:73px;padding-top:5px;padding-bottom:4px}.order h2{margin:4px 0;font-size:26px}.recipe{padding:8px 0}.ingredient .name{font-size:13px;white-space:nowrap}.ingredient .amount{margin-top:4px}.ingredient.active{box-shadow:inset 0 -2px #bba073}.ingredient.complete .name{color:var(--green)}.stage-target{top:clamp(4px,8cqh,24px)}
@media(max-width:540px){.order{flex-basis:66px}.order h2{font-size:25px}.ingredient .name{font-size:12px}.ingredient{padding-left:6px;padding-right:6px}}
@media(max-height:720px){.order{flex-basis:62px}.order h2{font-size:23px}.controls #hint{height:28px}.controls{padding-bottom:7px}}
/* Seamless reserved banner; no divider between gameplay and the ad. */
.banner-slot{border:0;background:var(--bg);display:flex;align-items:center;justify-content:center}.banner-content{width:320px;height:50px;max-width:100%;overflow:hidden;line-height:0}.banner-content iframe{display:block;border:0;max-width:100%}.game{border-bottom:0}
/* Bring the play frame closer to the brand header. */
main{padding-top:10px}
@media(max-width:540px){main{padding-top:7px}}
@media(max-height:720px){main{padding-top:6px}}

.game{border-bottom:1px solid #46503c}.ingredient.active{box-shadow:none}


.stage-target .stage-note{display:none}

/* Add two pixels above the frame and below the main control. */
main{padding-top:12px}.controls{padding-bottom:11px}
@media(max-width:540px){main{padding-top:9px}}
@media(max-height:720px){main{padding-top:8px}.controls{padding-bottom:9px}}

/* One portrait layout on phones and computers. Only height adapts. */
.shell{max-width:440px;margin:0 auto;padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
.shell>header{max-width:none;flex-basis:47px}.shell>main{display:flex;flex-direction:column;gap:0;padding-top:9px;padding-bottom:8px}.shell .guide,.shell>footer,.shell .open-sign{display:none}
.shell .game{max-width:none;padding:13px 16px 0}.shell .order{flex-basis:66px}.shell .order h2{font-size:25px}.shell .ingredient{padding-left:6px;padding-right:6px}.shell .ingredient .name{font-size:12px}.shell .ingredient .amount{font-size:19px}.shell .game-top{padding-bottom:10px}.shell .game-top .game-footer{margin:0;padding:0}.shell .controls{padding-bottom:11px}.shell .keycap{display:none}
.shell .brand{font-size:18px;letter-spacing:1px;gap:5px}.shell .brand-mark{font-size:24px}.shell .header-right{gap:5px}.shell .feedback-link{font-size:11px;padding:6px}.shell .journal-launch{font-size:11px;gap:4px;padding:6px}.shell #sound.icon{width:30px;min-width:30px;padding:5px}
@media(max-height:720px){.shell>header{flex-basis:43px}.shell>main{padding-top:8px;padding-bottom:6px}.shell .game{padding-top:11px}.shell .order{flex-basis:62px}.shell .order h2{font-size:23px}.shell .game-top{padding-bottom:8px}.shell .ingredient .amount{font-size:18px}.shell .controls{padding-bottom:9px}}

.welcome{width:min(370px,calc(100% - 32px));border-radius:12px;max-height:calc(90dvh / var(--ui-scale,1));overflow:auto;box-shadow:0 20px 80px #0007}.welcome-inner{padding:28px 25px}.welcome-label{font-size:11px;letter-spacing:2px;color:var(--gold)}.welcome h2{font-size:23px;line-height:1.5;letter-spacing:1px;margin:12px 0 20px}.welcome p{font-size:13px;line-height:1.9;color:var(--cream);margin:12px 0}.welcome .welcome-note{color:var(--muted);font-size:12px;margin:20px 0}.welcome .pour{min-height:45px;margin-top:8px;font-size:15px}

.welcome-inner{padding:25px}.welcome h2{margin-bottom:16px}.welcome p{margin:10px 0}.welcome-collection{margin:18px 0 12px;padding:13px 14px;background:#b69d6110;border:1px solid #b69d6138;border-radius:7px}.welcome-collection b{font-size:13px;font-weight:500;color:var(--gold)}.welcome-collection p{color:#f1d69c;font-size:13px;margin:7px 0}.welcome-collection span{font-size:12px;line-height:1.8;color:var(--muted)}.welcome .welcome-note{font-size:11px;margin:12px 0}
#welcomeTitle:focus{outline:none}

.welcome-ad{margin:16px auto 0;max-width:320px}.welcome-ad>span{display:block;text-align:center;color:var(--muted);font-size:9px;letter-spacing:1px;margin-bottom:4px}.welcome-ad-frame{width:100%;height:50px;overflow:hidden}.welcome-ad iframe{display:block;border:0;width:320px;height:50px;max-width:none;transform-origin:top left}
.welcome{scrollbar-width:thin;scrollbar-color:#68745c transparent}.welcome-inner{padding:20px 24px}.welcome h2{margin:10px 0 14px}.welcome p{line-height:1.7;margin:8px 0}.welcome-collection{margin:12px 0;padding:10px 12px}.welcome .welcome-note{margin:10px 0}.welcome-ad{margin-top:12px}

#welcomeConfirm:disabled{opacity:.55;cursor:wait;filter:none}