body{background:#211119;color:#fff0e8}.mix-header{max-width:1080px;margin:auto;padding:24px;display:flex;justify-content:space-between;align-items:center}.mix-header a{display:flex;gap:12px;align-items:center;text-decoration:none;font-size:12px;letter-spacing:.1em}.mix-header img{height:40px;width:auto}main{max-width:1080px;margin:auto;padding:20px 24px 70px}h1{font-size:clamp(36px,7vw,64px);line-height:1.1;margin:10px 0;letter-spacing:-.05em}h1 span{color:#e2bf83}.heading>p:last-child{color:#cdb6bd}.layout{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:30px}.stage{position:sticky;top:20px;align-self:start;height:490px;border:1px solid #d6b88e33;border-radius:24px;overflow:hidden;background:radial-gradient(ellipse at 50% 20%,#69433366,transparent 75%),#2b1822}.shelves{display:flex;justify-content:space-around;border-bottom:5px solid #805849;padding:48px 15px 0;color:#b9915966;font-size:70px;line-height:1}.shelves span:nth-child(even){color:#638b8266}.speech{position:absolute;top:24px;left:24px;right:24px;background:#24151ee8;padding:15px;border:1px solid #d6b88e44;border-radius:14px;font-size:13px;text-align:center}.bartender{position:absolute;height:310px;bottom:90px;left:50%;transform:translateX(-50%)}.counter{position:absolute;bottom:0;height:110px;background:linear-gradient(#845f4b 0 8px,#3f2730 8px);width:100%;border-top:1px solid #d6b88e}.counter-brand{position:absolute;bottom:22px;left:24px;font-size:10px;letter-spacing:.25em;color:#d6b88e}.shaker{position:absolute;right:40px;bottom:67px;width:76px;height:110px;background:#9dacae30;border:2px solid #d2d8d8;border-radius:10px 10px 20px 20px;overflow:hidden}.shaker:before{content:'';position:absolute;top:0;width:100%;height:14px;background:#c7cccc}.shaker span{position:absolute;bottom:5px;width:100%;text-align:center;font-size:9px;color:white;text-shadow:0 1px 3px black}#liquid{position:absolute;bottom:0;width:100%;height:0;background:#d5a149;transition:height .25s,background .25s}.controls{min-width:0}button,select,input{font:inherit}button,select{background:#36202b;border:1px solid #d6b88e55;border-radius:12px;color:#efd5ac;padding:11px 15px;min-height:44px}button:disabled{opacity:.4;cursor:default}.mode{display:flex;gap:8px}.mode button[aria-pressed=true],.primary{background:#e0bf87;color:#291620;border-color:#e0bf87}#brief{font-size:14px;min-height:45px;color:#e4cba6}.profile-label{display:flex;align-items:center;justify-content:space-between;gap:12px}.ingredients{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0}.ingredients button{padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px}.ingredients b{font-size:24px;font-weight:400;color:var(--bottle)}.recipe{padding:14px 18px;border:1px solid #d6b88e22;border-radius:14px;font-size:13px}.recipe ul{list-style:none;padding:0;margin:8px 0 0;color:#cfb7bb}.recipe li{display:flex;justify-content:space-between;align-items:center}.recipe button{min-height:32px;padding:0 10px;margin:3px;font-size:18px}.options{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:15px 0;font-size:13px}.options input{accent-color:#dfbf89}.options select{font-size:12px}.actions{display:flex;gap:8px;flex-wrap:wrap}.hint{font-size:11px;color:#bba5ad}.scores{margin-top:35px;border-top:1px solid #d6b88e33;padding-top:24px}.scores h2{font-size:23px}.scores label{display:block;margin-top:16px}.scores input{max-width:100%;background:#321f29;border:1px solid #d6b88e44;border-radius:8px;padding:10px;color:#fff}.scores p,.scores ol{font-size:13px;color:#cfb7bb}dialog{max-width:440px;width:calc(100% - 32px);box-sizing:border-box;background:#2d1923;color:#fff0e8;border:1px solid #d6b88e66;border-radius:24px;padding:28px}dialog::backdrop{background:#10070ddd}dialog h2{font-size:30px}.score{font-size:66px;color:#e0bf87}#breakdown{font-size:12px;color:#d5bbc5}.mixing{animation:mix .18s ease-in-out 8}.tasting .bartender{animation:taste 1s ease-in-out 2}@keyframes mix{50%{transform:translateX(-12px) rotate(-15deg)}}@keyframes taste{50%{transform:translateX(-50%) rotate(-7deg)}}@media(max-width:700px){.layout{grid-template-columns:1fr}.stage{position:relative;top:0;height:300px}.bartender{height:210px;bottom:65px}.counter{height:75px}.shaker{bottom:45px;right:25px;height:85px;width:60px}.counter-brand{bottom:15px}.speech{top:14px;font-size:12px;padding:10px}.shelves{padding-top:30px}.heading>p:last-child{font-size:13px}main{padding-inline:16px}.mix-header{padding:16px}.ingredients{grid-template-columns:repeat(3,1fr)}}@media(prefers-reduced-motion:reduce){.mixing,.tasting .bartender{animation:none}#liquid{transition:none}}
/* Scene-first bar: ingredients live on the shelves, never in side cards. */
.layout{display:flex;flex-direction:column;gap:18px}.stage{position:relative;top:auto;width:100%;height:560px;background:radial-gradient(ellipse at 25% 30%,#8c634039,transparent 65%),repeating-linear-gradient(90deg,#35212a 0 30px,#30202a 30px 60px)}
.backbar{position:absolute;top:90px;left:24px;width:64%;bottom:120px}.shelf-caption{margin:0 0 8px;font-size:9px;letter-spacing:.2em;color:#d9bc8a}.ingredients{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,150px);gap:12px 4px;margin:0;background:linear-gradient(to bottom,transparent 145px,#d1ac6d 145px,#72533c 153px,transparent 153px,transparent 307px,#d1ac6d 307px,#72533c 315px,transparent 315px)}
.ingredients button{border:0;border-radius:0;background:none;padding:4px 2px 10px;gap:0;justify-content:flex-end;min-width:0;position:relative;transition:transform .18s,filter .18s}.ingredients button svg{height:108px;width:54px;color:var(--bottle);filter:drop-shadow(3px 4px 3px #0006);transition:transform .18s}.ingredients button span{font-size:10px;line-height:1.2;color:#ffe9c4;text-shadow:0 1px 3px #000;margin-top:4px}.ingredients button:hover:enabled svg,.ingredients button:focus-visible svg{transform:translateY(-6px);filter:drop-shadow(0 0 7px #f1ca7b80)}.ingredients button:active:enabled svg{transform:rotate(-12deg) translateY(-7px)}.ingredients button:disabled{opacity:.5}.bartender{left:83%;height:340px;bottom:100px;pointer-events:none}.speech{left:auto;right:20px;top:20px;width:calc(100% - 40px);box-sizing:border-box;font-size:13px}.counter{height:110px;background:linear-gradient(#d0ac7f 0 6px,#8f6850 6px 15px,#39212b 15px);box-shadow:0 -10px 20px #130b1433}.shaker{right:22%;bottom:72px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;padding:22px;border:1px solid #d6b88e33;border-radius:20px;background:#2d1923}.mode,#brief,.profile-label{grid-column:1}.recipe{grid-column:2;grid-row:1/5}.options{grid-column:1;margin:0}.actions{grid-column:1/-1;border-top:1px solid #d6b88e22;padding-top:16px}.actions button{flex:1}.controls>.hint{grid-column:1/-1;margin:0}#brief{margin:0;min-height:0}.profile-label{font-size:13px}.profile-label select{max-width:70%;font-size:12px}
@media(max-width:700px){.stage{height:445px}.backbar{left:10px;top:90px;width:68%;bottom:80px}.ingredients{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,87px);gap:5px 2px;background:repeating-linear-gradient(to bottom,transparent 0 83px,#b58b54 83px,#674933 89px,transparent 89px 92px)}.ingredients button{padding:0 1px 7px}.ingredients button svg{height:62px;width:32px}.ingredients button span{font-size:9px;margin-top:2px}.shelf-caption{font-size:7px;letter-spacing:.08em}.bartender{height:210px;left:87%;bottom:75px}.speech{top:12px;right:12px;width:calc(100% - 24px);padding:10px}.counter{height:75px}.shaker{right:18%;height:74px;bottom:50px;width:51px}.controls{display:flex;flex-direction:column;padding:16px;gap:14px}.recipe{max-height:190px;overflow:auto}.actions button{flex:1 1 40%;font-size:13px}.scores{margin-top:24px}}
/* Expanded backbar and animated reach, pouring and service. */
.stage{height:650px}.backbar{width:70%;top:88px}.ingredients{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(4,99px);gap:8px 3px;background:repeating-linear-gradient(to bottom,transparent 0 95px,#b58b54 95px,#674933 101px,transparent 101px 107px)}.ingredients button svg{height:68px;width:38px}.ingredients button span{font-size:10px}.ingredients button{padding-bottom:7px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.ingredients .selected-bottle svg{filter:drop-shadow(0 0 8px #ffdf99);transform:translateY(-5px)}.action-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;opacity:0}.pour-count{position:absolute;bottom:113px;left:18px;color:#f4d6a6;font-size:12px;z-index:4;padding:6px 10px;background:#211119dd;border-radius:8px}.bartender{left:87%}.speech{z-index:4}.shaker{right:24%}
@media(max-width:700px){.stage{height:650px}.backbar{width:73%;left:6px;top:90px}.ingredients{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(5,89px);gap:5px 2px;background:repeating-linear-gradient(to bottom,transparent 0 85px,#b58b54 85px,#674933 91px,transparent 91px 94px)}.ingredients button svg{height:54px;width:29px}.ingredients button span{font-size:8px;line-height:1.15;min-height:19px}.bartender{height:205px;left:89%;bottom:75px}.shaker{right:22%;bottom:46px}.pour-count{bottom:80px;left:10px;font-size:10px}.shelf-caption{font-size:6.5px}}

/* Both sleeves belong to the character; the moving arm can reach the shelf. */
.bartender{overflow:visible;z-index:3}.action-overlay{z-index:3}
/* Illustrated theatre bar: warm brass, carved shelves and controls on the apron. */
.stage{height:710px;background:repeating-linear-gradient(90deg,#665031 0 22px,#715a35 23px 44px);border:5px solid #4b2026;border-radius:20px;box-shadow:inset 0 0 80px #130a10}
.stage:before{content:'';position:absolute;inset:0 0 auto;height:70px;background:radial-gradient(ellipse at 50% 0,#b94836,#631f2c 80%);border-bottom:6px double #e5b862;border-radius:0 0 48% 12%;box-shadow:0 8px 10px #1b0b1680}
.backbar{top:105px;bottom:210px;width:72%}.ingredients{background:repeating-linear-gradient(to bottom,transparent 0 95px,#e0b55d 95px,#722b30 99px,#421b24 106px,transparent 107px);gap:8px 3px}
.ingredients button svg{filter:drop-shadow(3px 4px 1px #1c0d1b);stroke:#2c1a24;stroke-width:2}.ingredients button span{font-weight:600;background:#271820dd;border-radius:4px;padding:2px 4px}
.bartender{height:330px;left:87%;bottom:168px;filter:drop-shadow(3px 4px 0 #22152166)}
.counter{height:180px;background:linear-gradient(170deg,#f7dfa1 0,#c89943 28%,#f4d990 30%,#aa7939 40%,#53242e 41%,#311924 100%);border-top:5px solid #eed49b;z-index:2}
.counter-brand{bottom:82px;left:20px}.shaker{right:30%;bottom:138px;background:linear-gradient(90deg,#6b7887,#dce6e5 45%,#8b9ca4 65%,#e3e5d8);z-index:2}
.shaker:before{display:none}.bar-tools{position:absolute;bottom:180px;left:14px;display:flex;gap:8px;z-index:4}.bar-tools button{width:72px;padding:4px;background:#63372a;border:2px solid #d9b467;border-radius:12px 12px 30px 30px;font-size:10px;color:#ffe8bc;box-shadow:0 5px 0 #331b21}.bar-tools button span{display:block;height:34px}.bar-tools svg{height:34px;width:44px}.bar-tools button[aria-pressed=true]{background:#b37e3c;outline:2px solid #ffe9ba}
.stage .actions{position:absolute;bottom:12px;left:12px;right:12px;z-index:5;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;border:0;padding:0}.stage .actions button{min-height:53px;padding:8px 3px;border:3px double #d7ad60;border-radius:9px;background:linear-gradient(#f4d18a,#b77e37);color:#321b26;font-size:14px;font-weight:700;box-shadow:0 4px 0 #160f18}.stage .actions button:active:enabled{transform:translateY(3px);box-shadow:none}.stage .actions button:disabled{opacity:.5}
.pour-count{bottom:255px}.speech{background:#ffe6bceF;color:#432333;border:3px double #a5763e;top:12px;padding:10px;z-index:5}
#serving-glass{position:absolute;width:52px;height:74px;right:16%;bottom:148px;border:3px solid #e7eee5;border-top:5px solid #f8ffe9;border-radius:4px 4px 15px 15px;background:linear-gradient(90deg,#ffffff44,#ffffff08 45%,#ffffff55);overflow:hidden;transform:perspective(200px) rotateX(-4deg)}
#served-liquid{position:absolute;bottom:0;left:0;right:0;height:0;background:#dba24c;transition:height .15s linear;opacity:.85}.stage.tasting .shaker{visibility:hidden}.tasting .bartender{animation:none}
@media(max-width:700px){.stage{height:770px}.backbar{top:100px;width:72%;bottom:245px}.ingredients{grid-template-rows:repeat(5,89px);background:repeating-linear-gradient(to bottom,transparent 0 85px,#e0b55d 85px,#722b30 89px,#421b24 94px)}.bartender{height:230px;bottom:184px;left:86%}.counter{height:185px}.bar-tools{bottom:188px;left:8px;gap:5px}.bar-tools button{width:53px;font-size:8px}.shaker{right:28%;bottom:153px;width:43px;height:74px}#serving-glass{right:10%;bottom:155px;width:39px;height:59px}.stage .actions{gap:4px;left:6px;right:6px}.stage .actions button{font-size:11px;min-height:48px}.pour-count{bottom:265px;font-size:10px}.counter-brand{font-size:8px;bottom:83px}.speech{font-size:11px}.ingredients button span{font-size:8px}}
/* Foreground counter and solid control panel. */
.counter{z-index:4}
.bar-tools{z-index:5}
.stage .actions{z-index:6;background:#28151f;border:1px solid #c89e59;border-radius:12px;padding:10px;box-shadow:0 -5px 16px #180c16aa}
.stage .actions button{background:#e8c17a;color:#24131b;border-color:#fff0c4;box-shadow:0 3px 0 #0f090d;text-shadow:none}
.stage .actions button:disabled{opacity:1;background:#665143;color:#d2c5b1;border-color:#8b7458;box-shadow:none}
#serving-glass{z-index:5;background:linear-gradient(90deg,#a6b8bc,#d9e4df 45%,#9caeb4)}
.action-overlay{z-index:5}
.stage .speech,.stage .pour-count{z-index:6}
/* Keep the last shelf and its labels above the foreground counter. */
.backbar{top:80px;bottom:205px}
.ingredients{grid-template-rows:repeat(4,91px);gap:6px 3px;background:repeating-linear-gradient(to bottom,transparent 0 87px,#e0b55d 87px,#722b30 91px,#421b24 96px,transparent 97px)}
@media(max-width:700px){
 .backbar{top:78px;bottom:245px}
 .ingredients{grid-template-rows:repeat(5,79px);gap:5px 2px;background:repeating-linear-gradient(to bottom,transparent 0 75px,#e0b55d 75px,#722b30 79px,#421b24 84px)}
 .ingredients button svg{height:49px}
}
/* Ingredients on the front-left of the counter, clear of the bottle rack. */
.bar-tools{bottom:104px;left:14px;z-index:5}
.counter-brand{left:auto;right:18px;bottom:88px}
@media(max-width:700px){.bar-tools{bottom:105px;left:10px}.counter-brand{left:auto;right:10px;bottom:86px}}
/* Pour hint above the counter; tin clear of the soda label. */
.pour-count{bottom:187px;left:12px}
.shaker{right:24%}
@media(max-width:700px){.pour-count{bottom:192px;left:10px}.shaker{right:22%}}
#volume{display:none}
#open-fridge{position:absolute;right:12px;top:115px;width:21%;height:240px;border:4px solid #3f2527;border-radius:28px 28px 14px 14px;background:linear-gradient(100deg,#8dbab0,#c0d8bf 45%,#77a79c);box-shadow:inset -8px 0 0 #34594b55,5px 6px 0 #21151b;z-index:1;color:#273c34;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:20px 6px;font-size:11px}#open-fridge span{font-weight:bold;letter-spacing:.1em;font-size:10px}#open-fridge i{position:absolute;left:10px;top:70px;width:8px;height:58px;border-radius:6px;background:linear-gradient(90deg,#8e9792,#f4edcd,#727c77)}#open-fridge b{background:#26473a;color:#fff0cf;padding:8px;border-radius:7px}
#fridge-dialog{max-width:680px;max-height:85vh;overflow:auto}#close-fridge{float:right}.fridge-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid #d6b88e33}.fridge-row strong{flex:1 1 160px;font-size:14px}.fridge-row button{padding:8px 10px}#fridge-dialog .fridge-content>p{font-size:12px}#fridge-message{color:#f4bf89}
@media(max-width:700px){#open-fridge{right:8px;top:135px;height:215px;width:23%;font-size:9px}#open-fridge span{font-size:8px}}
.shaker.mixing{animation:none}
/* Fridge behind the counter on the left; shelves above it stay clear. */
#open-fridge{left:14px;right:auto;top:auto;bottom:168px;height:260px;width:21%}
.backbar{width:70%;left:26%;top:80px;bottom:auto}
.ingredients{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,91px)}
@media(max-width:700px){
 #open-fridge{left:10px;right:auto;top:auto;bottom:184px;height:230px;width:23%}
 .backbar{left:6px;top:78px;width:94%;bottom:auto}
 .ingredients{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,79px)}
}
/* Full-width upper shelf; lower shelf only in the clear wall area. */
.backbar{left:10px;right:10px;top:80px;width:auto;bottom:auto}
.ingredients{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,91px);background:none;position:relative;isolation:isolate}
.ingredients:before,.ingredients:after{content:'';position:absolute;left:0;right:0;height:8px;background:linear-gradient(#e0b55d 0 3px,#722b30 3px 6px,#421b24 6px);z-index:-1;pointer-events:none}
.ingredients:before{top:87px}.ingredients:after{top:184px;left:16.666%;right:16.666%}
.ingredients button:nth-child(7){grid-column:2}.ingredients button:nth-child(8){grid-column:3}.ingredients button:nth-child(9){grid-column:4}.ingredients button:nth-child(10){grid-column:5}
@media(max-width:700px){
 .backbar{left:6px;right:6px;top:78px;width:auto}
 .ingredients{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,79px);gap:5px 2px}
 .ingredients:before{top:75px}.ingredients:after{top:159px}
}
/* Additional bottles continue down the unobstructed central wall. */
.ingredients{grid-template-rows:repeat(4,91px)}
.ingredients button:nth-child(n+7){grid-column:auto}
.ingredients button:nth-child(4n+7){grid-column:2}
.ingredients button:nth-child(4n+8){grid-column:3}
.ingredients button:nth-child(4n+9){grid-column:4}
.ingredients button:nth-child(4n+10){grid-column:5}
.ingredients:after{top:184px;box-shadow:0 97px 0 #80503a,0 194px 0 #80503a;left:25%;right:25%}
@media(max-width:700px){.ingredients{grid-template-rows:repeat(4,79px)}.ingredients:after{top:159px;box-shadow:0 84px 0 #80503a,0 168px 0 #80503a}}
/* Three balanced shelves with identical trim, rather than flat shadow copies. */
.ingredients{display:grid;grid-template-columns:repeat(60,minmax(0,1fr));grid-template-rows:repeat(3,91px);column-gap:0;row-gap:6px;background:none}
.ingredients button:nth-child(n){grid-column:span 10;grid-row:auto}
.ingredients button:nth-child(n+13){grid-column:span 6;grid-row:3}
.ingredients button:nth-child(13){grid-column:16 / span 6}
.ingredients:before{top:87px;left:0;right:0;height:8px;background:linear-gradient(#e0b55d 0 3px,#722b30 3px 6px,#421b24 6px);box-shadow:none}
.ingredients:after{top:184px;left:0;right:0;height:8px;background:linear-gradient(#e0b55d 0 3px,#722b30 3px 6px,#421b24 6px);box-shadow:none}
.backbar:after{content:'';position:absolute;left:25%;right:25%;top:301px;height:8px;background:linear-gradient(#e0b55d 0 3px,#722b30 3px 6px,#421b24 6px);pointer-events:none;z-index:0}
.ingredients{z-index:1}
@media(max-width:700px){.ingredients{grid-template-rows:repeat(3,79px);row-gap:5px}.ingredients:before{top:75px}.ingredients:after{top:159px}.backbar:after{top:263px}.ingredients button:nth-child(n+13) span{font-size:7px;padding-inline:1px}}
/* Explicit placement keeps the final five bottles centered; no grid backfilling. */
.ingredients button:nth-of-type(13){grid-column:16 / span 6;grid-row:3}
.ingredients button:nth-of-type(14){grid-column:22 / span 6;grid-row:3}
.ingredients button:nth-of-type(15){grid-column:28 / span 6;grid-row:3}
.ingredients button:nth-of-type(16){grid-column:34 / span 6;grid-row:3}
.ingredients button:nth-of-type(17){grid-column:40 / span 6;grid-row:3}
.backbar:after{display:none}
.lower-shelf{position:absolute;top:281px;left:24%;right:24%;height:8px;background:linear-gradient(#e0b55d 0 3px,#722b30 3px 6px,#421b24 6px);z-index:-1;pointer-events:none}
#open-fridge{width:24%;height:220px;bottom:168px}
@media(max-width:700px){.lower-shelf{top:243px}#open-fridge{width:26%;height:154px;bottom:184px;padding-block:12px}#open-fridge i{top:48px;height:45px}}
.ingredients button:nth-of-type(-n+12){grid-column:span 10;grid-row:auto}
/* Extend the bottom shelf across the back wall, behind the bartender. */
.lower-shelf{left:0;right:0}
/* Center the last five bottles with clear gaps between their labels. */
.ingredients button:nth-of-type(13){grid-column:7 / span 8}
.ingredients button:nth-of-type(14){grid-column:17 / span 8}
.ingredients button:nth-of-type(15){grid-column:27 / span 8}
.ingredients button:nth-of-type(16){grid-column:37 / span 8}
.ingredients button:nth-of-type(17){grid-column:47 / span 8}
/* Keep the two gripping arms in front of the counter while shaking. */
.stage.shaking-front .bartender{z-index:5}
/* Remove the speech banner visually, retaining status announcements for screen readers. */
.stage .speech{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;border:0!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap;top:0!important;left:0!important;right:auto!important}
.backbar{top:18px}
.stage{height:648px}
@media(max-width:700px){.backbar{top:16px}.stage{height:708px}}
/* Compact fridge layout with opaque surfaces. */
#fridge-dialog{position:fixed;box-sizing:border-box;width:min(620px,calc(100% - 32px));max-height:86dvh;padding:64px 24px 24px;border-radius:24px;overflow-y:auto}
#close-fridge{float:none;position:absolute;right:14px;top:12px;width:44px;height:44px;min-height:44px;padding:0;font-size:30px;line-height:1;border:0;background:#fff3df12;border-radius:50%;color:#f7dfb6}
#fridge-title{font-size:clamp(22px,5vw,32px);line-height:1.2;margin:0 0 12px;letter-spacing:-.03em}
#fridge-dialog .fridge-content>p{font-size:13px;line-height:1.5;margin:0 0 16px;color:#e3cfc5}
#fridge-products h3{font-size:19px;margin:20px 0 6px}
.fridge-row{gap:8px;padding:12px 0}.fridge-row strong{font-size:14px}.fridge-row button{min-height:44px;font-size:13px}
@media(max-width:700px){
 #fridge-dialog{width:calc(100% - 28px);padding:62px 18px 18px;max-height:84dvh}
 .fridge-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px 0}
 .fridge-row strong{grid-column:1/-1;font-size:14px;line-height:1.3}
 .fridge-row button{padding:8px 4px;min-height:44px;font-size:13px}
}


#close-fridge{background:#36202b}
/* Keep the counter signature clear of the controls. */
.counter-brand{bottom:110px}
@media(max-width:700px){.counter-brand{bottom:110px}}
[hidden],.profile-label[hidden]{display:none!important}
#open-finish{position:absolute;bottom:104px;left:260px;z-index:5;font-size:11px;background:#63372a;border:2px solid #d9b467;color:#ffe8bc;min-height:48px}
#finish-dialog{position:fixed;padding-top:55px}#close-finish{position:absolute;right:12px;top:8px;border:0;font-size:26px}#finish-choices{display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:700px){#open-finish{left:188px;bottom:105px;font-size:9px;padding:5px;min-height:44px}}
/* Product watermarks replace bullets in the vertical garnish list. */
#finish-choices{display:flex;flex-direction:column;gap:0;list-style:none;margin:8px 0 0;padding:0}
#finish-choices li{margin:0;padding:0;border-bottom:1px solid #d6b88e26}
#finish-choices li:last-child{border-bottom:0}
#finish-choices button{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px 4px;min-height:52px;border:0;border-radius:6px;background:transparent;font-size:15px;line-height:1.35}
#finish-choices button svg{width:28px;height:28px;flex:0 0 28px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:#c4a36b;opacity:.8}
#finish-choices button:hover{background:#d6b88e10}
#finish-choices button:focus-visible{outline:2px solid #d6b88e;outline-offset:2px}
#challenge-story{grid-column:1/-1;padding:20px;background:#30202a;border:1px solid #d6b88e55;border-radius:16px}#challenge-story h2{font-size:23px;margin:8px 0 12px}#story-text{font-size:15px;line-height:1.65;color:#eedfd5}#story-season{font-size:11px;color:#dfbf87;letter-spacing:.08em}#next-story{margin-top:8px;font-size:13px}

/* Keep the close control outside the scrolling product list. */
#fridge-dialog{overflow:hidden;padding:64px 0 0}
#fridge-dialog .fridge-content{box-sizing:border-box;max-height:calc(86dvh - 68px);overflow-y:auto;overscroll-behavior:contain;padding:0 24px 24px;scrollbar-gutter:stable}
#close-fridge{z-index:2;background:#36202b}
@media(max-width:700px){#fridge-dialog{padding:62px 0 0}#fridge-dialog .fridge-content{max-height:calc(84dvh - 66px);padding:0 18px 18px}}

/* Raise the fridge panel and use the available screen height. */
#fridge-dialog{--fridge-top:max(12px,env(safe-area-inset-top));inset:var(--fridge-top) 0 auto;margin:0 auto;max-height:calc(100dvh - var(--fridge-top) - max(12px,env(safe-area-inset-bottom)))}
#fridge-dialog .fridge-content{max-height:calc(100dvh - var(--fridge-top) - max(12px,env(safe-area-inset-bottom)) - 68px)}
@media(max-width:700px){#fridge-dialog .fridge-content{max-height:calc(100dvh - var(--fridge-top) - max(12px,env(safe-area-inset-bottom)) - 66px)}}

/* Keep the fridge label above the pouring instruction on the counter. */
#open-fridge b{position:absolute;left:8px;right:8px;bottom:76px;text-align:center;line-height:1.25}
@media(max-width:700px){#open-fridge b{left:5px;right:5px;bottom:62px;padding:7px 3px}}

#open-fridge b{left:50%;right:auto;transform:translateX(-50%);width:max-content;padding:5px 12px;border-radius:6px}
@media(max-width:700px){#open-fridge b{padding:4px 10px}}
#open-fridge b{background:#271820dd}

/* The category navigation and close control stay outside the scrolling list. */
#fridge-dialog[open]{display:flex;flex-direction:column}
#fridge-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0 18px 12px;flex-shrink:0;background:#2d1923;border-bottom:1px solid #d6b88e33}
#fridge-nav button{min-width:0;min-height:44px;padding:7px 5px;font-size:12px;line-height:1.2}
#fridge-nav button[aria-current=true]{background:#e0bf87;color:#291620;border-color:#e0bf87}
#fridge-dialog .fridge-content{min-height:0;flex:1 1 auto;max-height:none;padding-top:16px}
@media(max-width:700px){#fridge-nav{padding-inline:14px}#fridge-nav button{font-size:11px}}

#game-fullscreen{position:absolute;top:8px;right:8px;z-index:10;width:44px;height:44px;padding:10px;display:grid;place-items:center;background:#271820;border:1px solid #d6b88e88;color:#efd5ac;border-radius:10px}
#game-fullscreen:focus-visible{outline:3px solid #efd5ac;outline-offset:2px}
body.game-expanded{overflow:hidden}
body.game-expanded .layout{position:fixed;inset:0;z-index:100;margin:0;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));display:block;overflow:auto;background:#211119;box-sizing:border-box}
body.game-expanded .stage{position:relative;top:0;width:100%;max-width:900px;margin:0 auto;box-sizing:border-box;min-height:648px;height:calc(100dvh - 16px)}
body.game-expanded .controls{max-width:900px;margin:20px auto}
@media(max-width:700px){body.game-expanded .stage{min-height:708px}}
/* Compact fullscreen icon; preserve a generous touch target. */
#game-fullscreen{width:34px;height:34px;min-height:34px;padding:8px;border-radius:8px}
#game-fullscreen svg{width:17px;height:17px}
#game-fullscreen::after{content:'';position:absolute;inset:-5px}

/* Reserve a toolbar above the scene so fullscreen never overlaps a bottle. */
.stage::before{content:'';position:absolute;inset:0 0 auto;height:48px;background:#271820;border-bottom:1px solid #d6b88e33;z-index:8;pointer-events:none}
.stage{height:696px}
.backbar{top:66px}
body.game-expanded .stage{min-height:696px}
@media(max-width:700px){.stage{height:756px}.backbar{top:64px}body.game-expanded .stage{min-height:756px}}

/* Tablet/desktop: keep all three shelves above the stationary bartender and fridge. */
@media(min-width:701px){
 .stage{height:900px}
 body.game-expanded .stage{min-height:900px}
}

/* Six bottles on the bottom shelf, including coffee liqueur. */
.ingredients button:nth-of-type(13){grid-column:2 / span 8;grid-row:3}
.ingredients button:nth-of-type(14){grid-column:12 / span 8;grid-row:3}
.ingredients button:nth-of-type(15){grid-column:22 / span 8;grid-row:3}
.ingredients button:nth-of-type(16){grid-column:32 / span 8;grid-row:3}
.ingredients button:nth-of-type(17){grid-column:42 / span 8;grid-row:3}
.ingredients button:nth-of-type(18){grid-column:52 / span 8;grid-row:3}

/* Player and table challenge before the mode selector. */
.controls>.scores{margin:0 0 18px;padding:0 0 18px;border-top:0;border-bottom:1px solid #d6b88e33}

/* Help sits in the reserved toolbar, clear of the bottles. */
#game-help{position:absolute;top:8px;left:8px;z-index:10;width:34px;height:34px;min-height:34px;padding:0;border-radius:8px;background:#271820;border:1px solid #d6b88e88;color:#efd5ac;font-size:22px;font-weight:700;line-height:1}
#game-help::after{content:'';position:absolute;inset:-5px}
#game-help:focus-visible,#close-help:focus-visible{outline:3px solid #efd5ac;outline-offset:2px}
#help-dialog{width:min(600px,calc(100% - 28px));max-height:85vh;max-height:85dvh;padding:0;overflow:hidden}
#help-dialog[open]{display:flex;flex-direction:column}
.help-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid #d6b88e33;flex-shrink:0;background:#2d1923}
#help-title{font-size:24px;margin:0}
#close-help{flex-shrink:0;width:44px;height:44px;padding:0;font-size:28px}
.help-content{overflow-y:auto;overscroll-behavior:contain;padding:8px 20px 20px;min-height:0;font-size:14px;line-height:1.6}
.help-content ol{padding-left:22px}.help-content li{margin:14px 0}.help-content strong{color:#efd5ac}

#reward-dialog{max-width:560px}#close-reward{float:right}#reward-code{display:block;overflow-wrap:anywhere;color:#dfc69b;font-size:1.35rem;letter-spacing:.06em}#reward-recipe{padding-left:1.3em}