/* Clear, Chinese-first play interface. */
:root{--muted:#b0b8a9}
.shell{max-width:1120px;padding:0 32px}
header{height:82px}.brand{font-size:25px}.brand-mark{font-size:38px}.open-sign{font-size:12px;letter-spacing:1px}.icon{font:12px 'Noto Sans TC',sans-serif;padding:10px 14px}
main{grid-template-columns:minmax(0,540px) 230px;gap:60px;justify-content:center;padding:32px 0}
.eyebrow,.tiny{font:12px 'Noto Sans TC',sans-serif;letter-spacing:1px}
.game{padding:21px 28px 0;min-width:0}.game-top{padding-bottom:14px}.game-top .eyebrow{font-size:12px;letter-spacing:1px}.dots{gap:8px}.dot{width:8px;height:8px}
.order{min-height:116px;padding:12px 0 4px}h2{font-size:29px;letter-spacing:2px}.order-tag span{font-size:12px}.order-tag b{font-size:30px}
.stage{height:355px;margin-top:0}.stage-target{top:48px;gap:6px;font-size:13px}.stage-target b{font-size:42px;white-space:nowrap}.stage-target small{font:12px 'Noto Sans TC',sans-serif}.stage-target>span:last-child{font-size:14px}.stage-note{bottom:10px}.stage-note>span:last-child{font:12px 'Noto Sans TC',sans-serif;letter-spacing:0}
.recipe{padding:13px 0}.ingredient{min-width:0;padding:0 12px;opacity:.65}.ingredient.active,.ingredient.complete{opacity:1}.ingredient.active .name{color:#ffe3af}.ingredient small{font:11px 'Noto Sans TC',sans-serif;letter-spacing:0;margin-bottom:5px}.ingredient .name{font-size:14px;line-height:1.5;white-space:normal}.ingredient .amount{font-size:21px}.ingredient .amount small{font:10px 'Noto Sans TC',sans-serif}
.controls{padding-bottom:18px}.controls #hint{font-size:13px;line-height:1.6;margin:12px 0;min-height:21px}.pour{font-size:16px;min-height:57px;letter-spacing:1px;gap:14px}.keycap{font:11px 'Noto Sans TC',sans-serif;padding:4px 6px}.game-footer{margin:0 -28px;padding:14px 28px;font-size:12px}.game-footer b{font-size:20px}.game-footer small{font-size:11px}
.guide h3{font-size:27px;margin-top:0}.guide h4{font-size:15px}.guide p{font-size:13px;line-height:1.9}.guide-item{gap:16px;margin:25px 0}.guide-item>b{font-size:20px}.best-card p{font-size:19px}.best-card .signature{font:12px 'Noto Sans TC',sans-serif;letter-spacing:0}
footer{font-size:12px;letter-spacing:0;padding:20px 0}.finish-inner>p{font-size:14px}.result-row{font-size:14px}.text-button{font-size:14px}#shareStatus{font-size:12px}
@media(max-width:880px){.shell{max-width:680px}main{display:block;padding:25px 0}.guide{display:none}.game{width:100%;max-width:540px;margin:auto}footer{justify-content:center}footer>span:last-child{display:none}}
@media(max-width:540px){.shell{padding:0 14px}header{height:67px}.brand{font-size:22px;letter-spacing:3px;gap:8px}.brand-mark{font-size:31px}.icon{padding:8px 10px}.open-sign{display:none}main{padding:19px 0}.game{padding:16px 18px 0}.game-top{padding-bottom:12px}.order{min-height:114px}h2,.order h2{font-size:27px}.order-tag{padding-left:14px}.order-tag span{font-size:11px}.stage{height:300px}.stage-target{top:43px;font-size:12px}.stage-target b{font-size:37px}.stage-target>span:last-child{font-size:13px}.stage-note>span:last-child{font-size:11px}.ingredient{padding:0 8px}.ingredient small{font-size:10px}.ingredient .name{font-size:13px}.ingredient .amount{font-size:20px}.recipe{padding:11px 0}.keycap{display:none}.pour{font-size:15px;min-height:54px}.controls{padding-bottom:15px}.controls #hint{font-size:12px;margin:10px 0}.game-footer{margin:0 -18px;padding:12px 18px;font-size:11px}.game-footer b{font-size:18px}footer{font-size:11px;padding:16px 0}}
@media(max-width:540px) and (max-height:800px){header{height:59px}main{padding:15px 0}.stage{height:270px}.order{min-height:108px}.game-top{padding-bottom:10px}.controls #hint{margin:8px 0}}
/* Cup details belong to the order, leaving the glass area free of labels. */
.order{padding-bottom:21px}.order .stage-note{position:absolute;right:0;left:auto;bottom:1px;text-align:right;line-height:1.4}.order .stage-note>span:last-child{font-size:11px;color:var(--muted)}.order .feedback:not(:empty)~.stage-note{visibility:hidden}
@media(min-width:541px){.order .stage-note>span:last-child{font-size:12px}}
.stage{height:339px}
@media(max-width:540px){.stage{height:284px}}
@media(max-width:540px) and (max-height:800px){.stage{height:254px}}
/* Compact brand bar. */
header{height:68px}.icon{padding:8px 12px}
@media(max-width:540px){header{height:55px}.icon{padding:6px 10px}}
@media(max-width:540px) and (max-height:800px){header{height:49px}}