@font-face{font-family:Pixel;src:url(./assets/pixel.ttf?v=27802e9e) format('truetype');font-display:block}
:root{color-scheme:dark;--cream:#ffe8b6;--gold:#efbf69;--ink:#26171a;--panel:#301c20f2;--line:#9e633d}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#130f16;color:var(--cream);font-family:Pixel,monospace}body{display:grid;place-items:center}button{font:inherit;cursor:pointer;color:var(--cream);border:2px solid var(--line);background:#45282b;box-shadow:0 3px 0 #170d13;padding:13px 18px;text-transform:uppercase;line-height:1.25;touch-action:manipulation}button:hover,button:focus-visible{background:#704333;border-color:var(--gold);outline:2px solid #ffe7a3;outline-offset:3px}button:active{transform:translateY(2px);box-shadow:none}button.primary{background:#edbd71;color:#321d23;border-color:#fff0be;box-shadow:0 4px 0 #915331}button.primary:hover{background:#ffda95}button:disabled{opacity:.4;cursor:default}button.small{padding:9px 12px;font-size:12px}button.ghost{border-color:transparent;box-shadow:none;background:transparent}button.ghost:hover{background:#57322d}h1,h2,p{margin:0}h1{font-size:61px;line-height:1.18;color:#ffe1a0;text-shadow:4px 4px #9f5035,7px 7px #170e17;letter-spacing:-2px}h2{font-size:28px;line-height:1.3;color:#ffda91}p{font-size:12px;line-height:1.9}#stage{position:relative;width:min(100vw,calc(100dvh * 2752 / 1536));aspect-ratio:2752/1536;isolation:isolate;container-type:inline-size;overflow:hidden}canvas#scene{width:100%;height:100%;display:block;touch-action:none}#ui{position:absolute;inset:0;pointer-events:none}#ui button,#ui .panel,#ui .modal{pointer-events:auto}.top{position:absolute;left:2.2%;right:2.2%;top:3%;display:flex;align-items:center;gap:13px;z-index:4}.brand{color:#ffe3a0;font-size:18px;text-shadow:2px 3px #301018;margin-right:auto}.stats{display:flex;gap:1px;background:#9e633d;border:2px solid #9e633d;box-shadow:0 4px 0 #1e1017}.stat{background:#2b2023e8;padding:10px 19px;min-width:103px;display:flex;flex-direction:column;gap:6px}.stat small{font-size:8px;color:#cfaa86}.stat strong{font-weight:normal;font-size:16px}.stat.clock{min-width:158px}.stat.clock strong{color:#ffdb88}.iconButton{width:45px;height:45px;padding:8px;font:24px monospace;background:#2d1e25eb}.panel{background:var(--panel);border:2px solid var(--line);outline:4px solid #281820c9;box-shadow:inset 0 0 0 5px #3f2727,0 14px 55px #100b1466;padding:34px}.menu{position:absolute;left:50%;top:48%;width:480px;max-width:90%;transform:translate(-50%,-50%);text-align:center}.eyebrow{font-size:9px;letter-spacing:3px;color:#deb485;margin-bottom:20px}.menu .subtitle{color:#d9b79c;margin:24px 0 27px}.menu .primary{width:100%;font-size:16px;padding:18px}.menu .links{display:flex;justify-content:center;gap:16px;margin-top:16px}.menu .links button{font-size:10px}.flourish{color:#b68b4f;font-size:12px;letter-spacing:9px;margin:17px 0}.best{font-size:9px;color:#c4a28b;margin-top:25px}.menuFoot{position:absolute;bottom:3.3%;width:100%;text-align:center;color:#f6d6a7;font-size:10px;text-shadow:2px 2px #25151a}.bottom{position:absolute;bottom:2.8%;left:2.3%;right:2.3%;display:flex;align-items:end;gap:20px;z-index:3}.hint{background:#291b23ed;border:2px solid #8b5739;padding:14px 19px;max-width:650px;box-shadow:0 4px #1b1219}.hint .step{color:#e9b965;font-size:8px;letter-spacing:1px;margin-bottom:8px}.hint .message{font-size:12px;line-height:1.6}.tray{margin-left:auto;background:#291b23ed;border:2px solid #8b5739;padding:10px 14px;display:flex;align-items:center;gap:11px;font-size:10px;min-height:67px}.tray canvas{width:35px;height:43px;image-rendering:pixelated}.tray small{display:block;color:#bda187;font-size:8px;margin-bottom:8px}.station{position:absolute;transform:translate(-50%,-50%);padding:7px 9px;display:flex;align-items:center;gap:5px;background:#312024ed;box-shadow:0 3px #170c15;font-size:9px;white-space:nowrap;transition:background .15s}.station canvas{width:24px;height:29px;image-rendering:pixelated}.station.active{border-color:#ffe0a0;background:#765032}.station .key{font-size:8px;color:#b99471;margin-left:3px}.station:hover{transform:translate(-50%,-50%)}#stations{position:absolute;inset:0;z-index:2;pointer-events:none}#guestTargets{position:absolute;inset:0;z-index:1;pointer-events:none}#guestTargets button{pointer-events:auto}.guestTarget{position:absolute;background:transparent;border:0;box-shadow:none;padding:0;transform:translate(-50%,-50%);width:7.4%;height:26%;border-radius:40%;color:transparent}.guestTarget:hover{background:#ffd4760a;border:1px dashed #ffe1aa77;transform:translate(-50%,-50%)}.guestTarget:active{transform:translate(-50%,-50%)}.guestTarget:focus-visible{background:#ffd47612;outline:2px dashed #ffe4b4}.modalShade{position:absolute;inset:0;background:#1b14216e;z-index:6;display:grid;place-items:center}.modal{max-width:92%;width:550px}.modal h2{text-align:center;margin:4px 0 22px}.modal .intro{text-align:center;color:#d6b499;margin-bottom:24px}.tutorialRow{display:flex;align-items:center;gap:20px;margin:18px 0;padding-bottom:15px;border-bottom:1px solid #684631}.tutorialRow span{width:50px;color:#ffdc92;font-size:27px;text-align:center}.tutorialRow p{font-size:11px}.tutorialRow strong{color:#f6cd8a;font-weight:normal;display:block;margin-bottom:4px}.keys{font-size:9px;color:#bda38f;text-align:center;margin:18px 0;line-height:2}.modal .full{width:100%;margin-top:12px}.scoreGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:28px 0}.scoreGrid div{padding:15px;background:#42292b;border:1px solid #805436}.scoreGrid small{font-size:9px;color:#d4ae8b;display:block;margin-bottom:13px}.scoreGrid strong{font-size:25px;color:#ffdc95;font-weight:normal}.stars{text-align:center;font-size:32px;letter-spacing:12px;color:#ffc75e;margin:20px 0}.rank{text-align:center;font-size:13px;color:#f7d299}.buttonRow{display:flex;gap:12px}.buttonRow button{flex:1;font-size:11px}.toast{position:absolute;left:50%;top:15%;transform:translateX(-50%);max-width:75%;background:#2e2025f2;border:2px solid #bd8b50;padding:15px 22px;text-align:center;font-size:11px;line-height:1.6;z-index:5;animation:toastIn .18s steps(4)}@keyframes toastIn{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}#pourPanel{width:575px;position:relative;transform-origin:var(--origin,50% 70%);animation:pourIn .28s ease-out}@keyframes pourIn{from{transform:scale(.14);opacity:.5}to{transform:scale(1);opacity:1}}.pourTop{display:flex;align-items:start;justify-content:space-between}.pourTop h2{text-align:left;font-size:22px;margin:0}.pourTop small{font-size:8px;color:#d0ae90;display:block;margin-top:10px}#pourCanvas{width:100%;aspect-ratio:500/350;display:block;touch-action:none}#pourStatus{text-align:center;font-size:11px;min-height:36px;line-height:1.6;color:#ffdb94}.pourHelp{text-align:center;font-size:9px;line-height:1.8;color:#bfa18a;margin:9px 0 14px}#pourHold{width:100%;user-select:none;-webkit-user-select:none;touch-action:none}#pourActions{display:flex;gap:12px;margin-top:10px}#pourActions button{flex:1;font-size:10px}.hidden{display:none!important}.credits{font-family:monospace;font-size:14px;line-height:1.7;color:#d9bca2}.credits p{font:inherit;margin:12px 0}.loading{position:absolute;inset:0;display:grid;place-items:center;background:#251b20;z-index:20;font-size:14px}.visuallyHidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.station{font-size:12px}.station canvas{width:27px;height:32px}.hint .message{font-size:15px}.hint .step{font-size:10px}.stat small{font-size:10px}.stat strong{font-size:19px}.tray{font-size:12px}.tray small{font-size:10px}.menu .subtitle{font-size:15px}.menu .links button{font-size:12px}.best{font-size:11px}.eyebrow{font-size:11px}.tutorialRow p{font-size:14px}.keys{font-size:11px}.toast{font-size:14px}
@media(max-width:1100px){.top{gap:7px}.brand{font-size:12px}.stat{padding:7px 11px;min-width:75px}.stat small{font-size:7px}.stat strong{font-size:14px}.stat.clock{min-width:120px}.iconButton{height:36px;width:36px;font-size:20px}.menu{transform:translate(-50%,-50%) scale(.85)}.modal{transform:scale(.85)}.station{font-size:9px;padding:4px 6px}.station canvas{width:20px;height:23px}.station .key{display:none}.hint{padding:10px 13px}.hint .message{font-size:11px}.tray{font-size:9px;min-height:48px}.tray small{font-size:7px}.bottom{gap:10px}.menuFoot{font-size:8px}}
@container(max-width:720px){.top{top:2%;left:2%;right:2%;gap:4px}.brand{display:none}.stats{margin-right:auto}.stat{padding:5px 7px;min-width:55px;gap:4px}.stat small{font-size:5px}.stat strong{font-size:8px}.stat.clock{min-width:81px}.iconButton{width:29px;height:29px;font-size:16px}.menu{transform:translate(-50%,-50%) scale(.58);width:470px;max-width:none}.modal{transform:scale(.58);max-width:none;width:510px}.station{font-size:5px;padding:3px 4px;gap:2px;border-width:1px}.station canvas{width:15px;height:17px}.hint{padding:6px 9px;border-width:1px;max-width:65%}.hint .step{font-size:5px;margin-bottom:4px}.hint .message{font-size:6px}.tray{padding:5px 7px;min-height:35px;font-size:6px;border-width:1px}.tray small{font-size:5px;margin-bottom:4px}.tray canvas{width:19px;height:25px}.tray button{font-size:6px;padding:5px}.menuFoot{font-size:5px}.toast{font-size:7px;padding:7px 10px}.bottom{bottom:2%;left:2%;right:2%}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.station{padding:6px;background:#302023dc;border-color:#b98a4f}.station canvas{width:30px;height:36px}.station span{display:none}.station:hover span:not(.key),.station:focus-visible span:not(.key){display:block;position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);background:#302023f5;border:1px solid #b98a4f;padding:9px 12px;font-size:12px}.station.active{box-shadow:0 0 15px #ffce7977;border-color:#ffe3a3}
@container(max-width:1100px){.station{padding:3px}.station canvas{width:23px;height:28px}}
@container(max-width:720px){.station{padding:2px}.station canvas{width:16px;height:20px}.station:hover span:not(.key){font-size:8px;padding:5px}.guestTarget{outline-offset:0}}

#proximity{position:absolute;bottom:12.7%;left:50%;transform:translateX(-50%);padding:9px 14px;background:#281d24ed;border:1px solid #b28c53;color:#ffe0a0;font-size:12px;white-space:nowrap;pointer-events:none;z-index:3}
.station{opacity:.4;transition:opacity .15s}.station.active{opacity:.76}.station.nearby,.station:hover{opacity:1}.station.nearby span:not(.key){display:block;position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);background:#302023f5;border:1px solid #b98a4f;padding:7px;font-size:11px}
#brewDock{position:absolute;bottom:2.7%;left:2.3%;width:520px;max-width:66%;padding:14px 18px;border:2px solid #b4854a;background:#2c1d24f0;z-index:5;pointer-events:auto;box-shadow:0 4px #160e17}.brewHeading{display:flex;align-items:center;justify-content:space-between;font-size:16px;color:#ffdc9a}.brewHeading strong{font-weight:normal}.brewHeading button{padding:0 7px}.brewButtons{display:flex;gap:9px;margin-top:11px}.brewButtons button{font-size:10px;padding:10px;flex:1}#brewDock #pourHold{width:auto}.brewMeter{position:relative;height:19px;background:#624c3e;border:2px solid #ab8450;margin:9px 0}.brewZone{position:absolute;top:0;height:100%;background:#e9bb67}.brewZone:after{content:'';position:absolute;inset:0;border-left:2px solid #ffeabb;border-right:2px solid #ffeabb}#brewFill{position:absolute;left:0;top:4px;height:7px;width:0;background:#e8a533}#brewNeedle{position:absolute;height:25px;width:3px;top:-5px;left:0;background:#fff3d4;box-shadow:0 0 4px #fff0b5}#brewDock #pourStatus{font-size:11px;text-align:left;min-height:18px;margin:5px 0 0}
@container(max-width:1100px){#proximity{font-size:9px;bottom:13%;padding:7px 10px}#brewDock{width:405px;padding:9px 12px}.brewHeading{font-size:12px}.brewButtons button{font-size:8px;padding:7px}#brewDock #pourStatus{font-size:9px}.brewMeter{height:15px;margin:6px 0}}
@container(max-width:720px){#proximity{font-size:6px;padding:5px 8px;bottom:14%}#brewDock{width:280px;padding:6px 9px}.brewHeading{font-size:9px}.brewButtons{gap:5px;margin-top:7px}.brewButtons button{font-size:6px;padding:6px}#brewDock #pourStatus{font-size:6px;min-height:10px}.brewMeter{height:11px;margin:5px 0}#brewFill{top:2px;height:4px}#brewNeedle{height:17px;top:-5px}.station.nearby span:not(.key){font-size:7px;padding:5px}}
.christmasTitle{position:absolute;top:4%;left:0;width:100%;text-align:center;filter:drop-shadow(0 6px 0 #241722)}
.christmasTitle h1{font-size:7.1cqw;line-height:1.5;letter-spacing:-.28cqw;white-space:nowrap;text-shadow:.28cqw .28cqw #4c2330,.5cqw .5cqw #231520}
.titleDe{color:#d9e3cb}.titleTwee{color:#b6d6a5}.titleSpieghels{color:#f2b0a0}
.titleSprig{font-size:3cqw;letter-spacing:3cqw;color:#ffde89;animation:glimmer 3s steps(4) infinite alternate}
.titleBaubles{display:flex;justify-content:space-evenly;margin:0 5%;border-top:.4cqw solid #345643;transform:rotate(-1deg)}
.titleBaubles i{display:block;width:1.7cqw;height:2cqw;background:#c97164;border:.25cqw solid #f6c49b;box-shadow:.25cqw .25cqw #592a35;margin-top:.6cqw}.titleBaubles i:nth-child(even){background:#dcb567;margin-top:1.7cqw}
.openBar{position:absolute;left:50%;top:68%;transform:translateX(-50%);font-size:2.3cqw;padding:1.3cqw 2.2cqw;background:#395c4b;border:.25cqw solid #e1d5a8;color:#ffe6b8;box-shadow:.35cqw .35cqw #1a2828}
.openBar:hover{background:#597952}.openBar:active{transform:translate(-50%,2px)}
@keyframes glimmer{to{opacity:.68;filter:brightness(1.3)}}
.top{top:2%;gap:.7cqw}.brand{font-size:1.3cqw;text-shadow:3px 3px #26161c}.stat{min-width:7cqw;padding:.6cqw 1cqw;gap:.5cqw}.stat small{font-size:.85cqw}.stat strong{font-size:1.5cqw}.stat.clock{min-width:10cqw}.iconButton{width:3.2cqw;height:3.2cqw;padding:.3cqw;font-size:2.3cqw}
.station,.station.active{opacity:1;border:3px solid #f1c982;background:#493333ed;padding:.3cqw;box-shadow:0 0 0 3px #2b1d28,0 0 17px #ffd5817a;gap:.35cqw}.station canvas{width:2.5cqw;height:3cqw}.station .stationKey{font-size:1.2cqw;color:#fff0be}.station .drinkLabel{display:none}.station.station:hover{background:#805835;box-shadow:0 0 0 3px #2b1d28,0 0 27px #ffe19fc0;border-color:#fff2bf}.station.nearby .drinkLabel,.station:hover .drinkLabel{display:block;position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);background:#302023f5;border:2px solid #edc786;padding:.6cqw;font-size:1.05cqw;color:#ffe3a9}
.bottom{bottom:2%;left:2%;right:2%}.hint{padding:.6cqw .9cqw;max-width:46%}.hint .step{font-size:.95cqw;margin-bottom:.5cqw}.hint .message{font-size:1.15cqw;line-height:1.5}.tray{font-size:1.15cqw;min-height:4.1cqw;padding:.6cqw .8cqw;gap:.8cqw}.tray small{font-size:.8cqw;margin-bottom:.5cqw}.tray canvas{width:2.8cqw;height:3.3cqw}.tray button{font-size:1.3cqw;padding:.4cqw}
#proximity{bottom:10%;font-size:1.15cqw;padding:.65cqw .9cqw;border:2px solid #ba945d;background:#2d2028ed}
#brewDock{left:2%;bottom:2%;width:35%;padding:1cqw;border:3px solid #edc485;background:#302028f0}#brewDock>strong{font-weight:normal;font-size:1.5cqw}#brewDock #pourStatus{display:block;font-size:1.1cqw;margin:.65cqw 0}.brewMeter{height:1.6cqw;margin:.7cqw 0 0}#brewFill{top:.35cqw;height:.6cqw}#brewNeedle{height:2.2cqw;top:-.4cqw;width:.25cqw}
.terraceButton{position:absolute;z-index:3;transform:translate(-50%,-50%);font-size:1.25cqw;padding:.85cqw 1cqw;border:3px solid #e1bc7f;background:#354559ed;white-space:nowrap}.terraceButton.waiting{background:#763f38;animation:glimmer 1.7s steps(3) infinite alternate}.terraceButton:active{transform:translate(-50%,-50%)}
#speechLayer{position:absolute;inset:0;z-index:6;pointer-events:none}.faceSpeech{position:absolute;transform:translate(-50%,-100%);width:21cqw;min-height:4cqw;background:#ffe2ae;border:.25cqw solid #4b2d35;box-shadow:.25cqw .25cqw #251b26;padding:.8cqw;color:#492c31;font-size:1.22cqw;line-height:1.55}.faceSpeech:after{content:'';position:absolute;bottom:-1cqw;left:48%;width:1cqw;height:1cqw;background:#ffe2ae;border-right:.25cqw solid #4b2d35;border-bottom:.25cqw solid #4b2d35;clip-path:polygon(0 0,100% 0,100% 100%)}.faceSpeech strong{font-size:.95cqw;color:#8d513c;display:block;margin-bottom:.4cqw;font-weight:normal}.speechAnswers{display:grid;gap:.4cqw}.speechAnswers:has(button){margin-top:.7cqw}.speechAnswers button{font-size:1.05cqw;padding:.65cqw;text-align:left;background:#6c423e;line-height:1.6;border:2px solid #9a684d}.speechAnswers button:hover{background:#365846}
.modal{transform:none;width:44cqw;padding:2cqw}.modal h2{font-size:2.2cqw;margin-bottom:1.5cqw}.modal button{font-size:1.3cqw;padding:.9cqw}.modal .full{margin-top:.8cqw}.controlsNL p{font-size:1.35cqw;line-height:2}.scoreGrid{gap:.8cqw;margin:1.5cqw 0}.scoreGrid div{padding:.8cqw}.scoreGrid small{font-size:.9cqw}.scoreGrid strong{font-size:2cqw}.rank,.best{font-size:1.1cqw}.stars{font-size:2.4cqw;margin:1.2cqw 0}

.station.nearby span.drinkLabel,.station:hover span.drinkLabel{font-size:1.05cqw;padding:.6cqw;border:2px solid #edc786}

.faceSpeech strong{font-size:1.5cqw;color:#533039;text-shadow:1px 0 currentColor;letter-spacing:.04cqw;margin-bottom:.6cqw}.speechAnswers button{position:relative;padding-left:1.8cqw;border:3px solid #987052}.speechAnswers button.selected{background:#325c50;border-color:#fff5c6;box-shadow:0 0 0 2px #30242c}.speechAnswers button.selected:before{content:'>';position:absolute;left:.5cqw;color:#ffe6a5}.speechAnswers button:hover{background:#325c50}
.station{opacity:.65;box-shadow:0 0 0 2px #2b1d28}.station.nearby{opacity:1}.station.active:not(.nearby){opacity:.8}.stationKey{min-width:1cqw}.guestTarget.chosen,.guestTarget.chosen:hover{border:0;background:transparent;box-shadow:none}.guestTarget:hover:not(.chosen){border:2px dashed #ffe3a288;background:transparent}
#proximity{font-size:1.2cqw;text-shadow:1px 0 currentColor;max-width:72%;white-space:normal;text-align:center}.exitSign{position:absolute;left:2.3%;top:65%;z-index:4;background:#345950;color:#ffe8b3;border:3px solid #b7ceb0;font-size:1.35cqw;padding:.75cqw 1cqw;box-shadow:3px 4px #242832}.exitSign b{background:#ffe1a2;color:#2c3e39;padding:.2cqw .4cqw;margin-left:.4cqw}.exitSign.chosen{}.exitSign[hidden]{display:none}
#orderNote{position:absolute;left:2.2%;top:11%;z-index:3;width:19cqw;padding:1.1cqw 1cqw .9cqw;background:repeating-linear-gradient(#f2dcaf 0,#f2dcaf 1.95cqw,#c9ad8544 2cqw);color:#4f322e;box-shadow:.3cqw .4cqw #1d172b60;transform:rotate(-2deg);border-top:.5cqw solid #eee0c3;clip-path:polygon(0 0,100% 0,100% 98%,93% 100%,87% 98%,80% 100%,73% 98%,66% 100%,59% 98%,52% 100%,45% 98%,38% 100%,31% 98%,24% 100%,17% 98%,10% 100%,0 98%)}#orderNote>strong{font-size:1.25cqw;display:block;margin-bottom:.7cqw;letter-spacing:.12cqw;text-shadow:1px 0 currentColor;border-bottom:2px dashed #ad8463;padding-bottom:.6cqw}#orderNote p{font-size:1cqw;line-height:1.6}#orderNote ul{list-style:none;padding:0;margin:0}#orderNote li{font-size:1.05cqw;margin:.55cqw 0 .7cqw;line-height:1.5}#orderNote li b{display:block;font-size:1.1cqw;text-shadow:.6px 0 currentColor}#orderNote em{float:right;font-style:normal;font-size:.73cqw;color:#865b46;line-height:2}#orderNote .ready span{color:#35634b}#orderNote li span{display:block}
.tray{display:block;min-width:10cqw;max-width:34cqw}.trayHeading{font-size:.95cqw;color:#d1b083;margin-bottom:.4cqw;display:flex;justify-content:space-between;gap:1.3cqw}.trayHeading b{color:#fff0c9;font-size:1.3cqw}.trayStock{display:flex;gap:.85cqw;align-items:center;min-height:2.7cqw}.trayItem{display:flex;align-items:center;gap:.2cqw}.trayItem canvas{width:2.2cqw;height:2.65cqw}.trayItem b{font-size:1.15cqw}
.titleSprig,.titleBaubles{visibility:hidden}.christmasTitle{top:4%}.christmasTitle h1{color:#e4f2e6;text-shadow:.28cqw -.18cqw #f0faff,.35cqw .35cqw #436170,.55cqw .55cqw #231520}.openBar{background:#365b5d;border-color:#e6f1df}

#orderNote{width:18cqw;padding:.8cqw .9cqw .6cqw}#orderNote li{margin:.25cqw 0 .4cqw;line-height:1.25;font-size:1cqw}#orderNote li b{font-size:1.05cqw}#orderNote>strong{margin-bottom:.45cqw;padding-bottom:.4cqw}

.station .stationKey{font-size:.84cqw}.station.nearby{}.exitSign{font-size:1.15cqw}.exitSign b{font-size:1cqw}.controlsNL p{font-size:1.13cqw}.christmasTitle h1{text-shadow:.25cqw -.15cqw #f4fcff,.35cqw .35cqw #4c6d77,.55cqw .55cqw #231520}

#stations{z-index:7}#speechLayer{z-index:5}.modalShade{z-index:12}

#orderNote .orderDrink{display:flex;align-items:center;gap:.4cqw}#orderNote .orderDrink canvas{width:2.6cqw;height:3.15cqw;image-rendering:pixelated}
.bottom .hint{margin-left:14cqw;max-width:43cqw}


/* Top edge: orders on the left; only outcomes, time and controls on the right. */
.top,.bottom,#orderNote,#proximity,#brewDock,.station .stationKey,.station .drinkLabel{display:none!important}
#flowHUD{position:fixed;z-index:25;top:max(8px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));display:flex;align-items:flex-start;gap:14px;pointer-events:none;height:56px}
#flowHUD[hidden]{display:none}.compactStats{display:flex;gap:9px;align-items:center;flex:0 0 auto;color:#fff1c9;filter:drop-shadow(1px 2px 1px #231621);font-size:17px;font-weight:bold;height:44px}
.compactStats button{width:38px;height:42px;font:26px monospace;padding:3px;border:0;background:transparent;box-shadow:none;pointer-events:auto;text-shadow:1px 2px #211724}.compactStats button[hidden]{display:none}.compactStats button:hover{background:#ffe3a322}.outcome{display:flex;gap:6px;align-items:center}.outcome canvas{width:25px;height:25px;image-rendering:pixelated}.outcome b{min-width:18px}#countdown{min-width:43px;text-align:center}#countdown.urgent{color:#ffba91;animation:timerPulse 1s steps(2) infinite}
#ticketFlow{display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;pointer-events:auto;touch-action:pan-x;padding:2px 2px 8px;min-height:54px}#ticketFlow::-webkit-scrollbar{display:none}
.orderTicket{position:relative;flex:0 0 83px;display:grid;grid-template-columns:26px 1fr;align-items:center;gap:4px;height:43px;padding:4px;border:2px solid #e5c48e;background:#30232bc9;box-shadow:0 3px #1a172766;color:#fff1cd}.orderTicket canvas{width:23px;height:28px;image-rendering:pixelated}.orderTicket b{font-size:10px;line-height:1.4;text-transform:uppercase;text-shadow:1px 1px #251522}.ticketPlace{position:absolute;right:1px;bottom:0;font:12px monospace}.ticketResult{position:absolute;inset:0;display:grid;place-items:center;font:32px monospace;color:#fff}.orderTicket.ready{border-color:#ffe8a7;box-shadow:0 0 8px #ffdb8466}.orderTicket.incoming{animation:ticketIn .35s steps(5) both}.orderTicket.done{background:#527d53;animation:ticketOut .85s ease-in both}.orderTicket.missed{background:#8d5353;animation:ticketOut .85s ease-in both}.done>canvas,.done>b,.missed>canvas,.missed>b{opacity:.2}
@keyframes ticketIn{from{transform:translateY(-45px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes ticketOut{0%,55%{transform:scale(1);opacity:1}100%{transform:translateY(-35px) scale(.8);opacity:0}}@keyframes timerPulse{50%{opacity:.5}}
#ui .station{width:clamp(30px,4cqw,52px);height:clamp(34px,4.8cqw,59px);min-width:0;min-height:0;padding:3px;background:#36252be8;border:2px solid #eac58acc;box-shadow:none;opacity:.95}#ui .station canvas{width:85%;height:100%;image-rendering:pixelated}#ui .station.nearby{opacity:1}
#ui .roomExitSign{position:absolute;z-index:3;pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:.6cqw;min-width:0;min-height:0;padding:0;font-size:clamp(11px,1.9cqw,30px);color:#fff2c3;background:#345950d9;border:2px solid #b7ceb0;box-shadow:none;white-space:nowrap}#ui .roomExitSign.chosen{}#ui .roomEntrySign b{display:none}#ui .roomExitSign.overPlayer{opacity:.4}#ui .roomExitSign.roomMark{font-weight:bold;color:#fff6d0;text-shadow:0 0 6px #000a}#ui .exitSign.bandExit.roomEntrySign{width:auto;min-width:0;white-space:nowrap;padding:.5cqw 1cqw}
#ui .terraceButton.roomSign{left:var(--sx)!important;top:var(--sy)!important;right:auto;width:15cqw;min-height:5.3cqw;font-size:clamp(14px,2.6cqw,40px);padding:0 1cqw;background:#345950d9;border:2px solid #b7ceb0;text-align:center}#ui .terraceButton.roomSign.outsideSign{width:8.5cqw;min-width:86px;min-height:3.3cqw;font-size:clamp(12px,1.75cqw,26px)}#ui .terraceButton.roomSign.chosen{}
#ui .terraceButton{left:auto!important;right:5%;top:19%!important;font-size:15px;min-height:34px;padding:5px 8px;border:1px solid #ffe9af88;background:#28374488;box-shadow:none}#ui .exitSign{left:1%;top:57%;font-size:26px;min-height:36px;padding:1px 9px;background:#3f695477;border:1px solid #ffe9af88;box-shadow:none}#ui .exitSign b{display:none}
#ui .faceSpeech{width:clamp(230px,31cqw,410px);font-size:14px;line-height:1.55;padding:12px}#ui .speechAnswers button{font-size:12px;min-height:44px}
#ui:has(.speechAnswers button) #stations{visibility:hidden}body:has(#pauseOverlay) #flowHUD,body:has(#overlay) #flowHUD{visibility:hidden}
/* Touch controls float over the artwork, never reserving a separate bottom strip. */
html.touchMode{--dock:0px}.touchMode body{padding:0;position:relative;isolation:isolate;background:#201823}.touchMode body:before{content:'';position:fixed;inset:-12px;z-index:-1;background-image:var(--room-backdrop);background-position:center;background-size:cover;filter:blur(8px) brightness(.55);pointer-events:none}
.touchMode #stage{width:min(100vw,calc(100dvh * 2752 / 1536));flex:none;max-width:none}.touchMode #rotateTip{display:none!important}


.touchMode #stage .modal{z-index:40}.touchMode #flowHUD{gap:8px}.touchMode .compactStats{font-size:14px;gap:5px}.touchMode .compactStats button{width:32px}.touchMode .outcome{gap:3px}.touchMode .orderTicket{flex-basis:76px}.touchMode #ui:has(.speechAnswers button) .faceSpeech{position:fixed;left:50%!important;top:50%!important;width:min(430px,70vw);max-height:65dvh;overflow:auto;transform:translate(-50%,-50%);z-index:15}
@media(max-width:580px) and (orientation:portrait){#flowHUD{flex-wrap:wrap;gap:0;height:auto}.compactStats{order:-1;margin-left:auto;height:40px}#ticketFlow{flex-basis:100%}.touchMode #stage{width:100vw}.touchMode #ui:has(.speechAnswers button) .faceSpeech{width:86vw}}
@media(prefers-reduced-motion:reduce){.orderTicket.incoming,.orderTicket.done,.orderTicket.missed,#countdown.urgent{animation:none}}



html:not(.touchMode) #flowHUD{width:min(calc(100vw - 20px),calc(100dvh * 2752 / 1536 - 20px));left:50%;right:auto;transform:translateX(-50%);top:max(8px,calc((100dvh - 100vw * 1536 / 2752) / 2 + 8px))}
#siteIntro{position:fixed;inset:0;z-index:60;background:#09080c;display:grid;place-items:center;overflow:hidden;transition:opacity .9s ease,visibility .9s ease}
#siteIntro video{width:100%;height:100%;object-fit:cover;image-rendering:auto}
#siteIntro .introShade{position:absolute;inset:0;background:linear-gradient(#00000022,#130d16aa 82%,#130d16)}
#siteIntro .introSkip{position:absolute;z-index:2;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:92vw;padding:14px 20px;border:2px solid #ffe4aa;background:#281c26e8;color:#ffe9bb;font:clamp(12px,2vw,18px) Pixel,monospace;box-shadow:0 4px #100b16}
#siteIntro .introSkip{padding:8px 12px}#siteIntro .introSkip span{display:block;margin-top:10px;font:clamp(10px,1.5vw,13px) Pixel,monospace;text-transform:none;line-height:1.6}
.introDone #siteIntro{opacity:0;visibility:hidden;pointer-events:none}
html:not(.introDone) .openBar,html:not(.introDone) .characterSelect{opacity:0;pointer-events:none}
.introDone .openBar{transition:opacity .8s ease;opacity:1;pointer-events:auto;transform:translateX(-50%);z-index:4}
.introDone .characterSelect{transition:opacity .8s ease;opacity:1;pointer-events:auto;transform:translateX(-50%);z-index:4}
.characterSelect{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;z-index:3;align-items:center;justify-content:center}
.castRow{display:flex;flex-wrap:wrap;max-width:min(94vw,760px);gap:10px 8px;align-items:flex-end;justify-content:center}
.characterSelect button{min-width:116px;padding:6px 6px 5px;border:2px solid #caa06a;background:#2e202bc9;color:#ffe8b3;font:12px Pixel,monospace;text-transform:uppercase;box-shadow:0 4px #1c1420;transition:transform .15s ease,box-shadow .15s ease}
.characterSelect button.chosen{background:#7b5934;border-color:#fff0b9;box-shadow:0 0 20px #ffd47a99;transform:translateY(-7px)}
.characterSelect .charAvatar{display:block;width:102px;height:126px;margin:0 auto 3px;image-rendering:pixelated}
.castHint{margin:0;font:10px Pixel,monospace;color:#ffe8b3aa;letter-spacing:2px}
.longTalkSpeech{z-index:18}.longTalkSpeech .speechAnswers{display:grid;gap:6px}
@media(max-width:700px){.characterSelect{bottom:8%;gap:3px}.castRow{gap:6px}.characterSelect button{min-width:80px;font-size:10px;padding:5px 4px}.characterSelect .charAvatar{width:70px;height:87px}.castHint{font-size:8px;letter-spacing:1px}}




#ui .exitSign.twoChoice,#ui .exitSign.bandExit{font-size:clamp(12px,1.75cqw,26px);padding:.7cqw 1cqw;width:18cqw;min-width:122px;min-height:34px;background:#345950eb;border:2px solid #b7ceb0;text-align:left}
#ui .exitSign.bandExit{top:57%}
#ui .exitSign.twoChoice{top:calc(57% + clamp(42px,4.4cqw,66px))}



#rotateTip{display:none}button{-webkit-tap-highlight-color:transparent}#stage{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html.touchMode{--dock:0px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
.touchMode body{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;height:100dvh;padding:var(--safe-top) env(safe-area-inset-right,0px) var(--safe-bottom) env(safe-area-inset-left,0px);overscroll-behavior:none}
.touchMode #stage{flex:0 0 auto;width:min(100%,calc((100dvh - var(--dock) - var(--safe-top) - var(--safe-bottom))*2752/1536))}


.touchMode .station{padding:4px;border-width:2px;min-width:34px;min-height:38px}.touchMode .station canvas{width:22px;height:27px}.touchMode .station .stationKey{display:none}.touchMode .station span.drinkLabel{font-size:11px;line-height:1.4;padding:5px}.touchMode .station:hover:not(.nearby) span.drinkLabel{display:none}
.touchMode .top{gap:4px;top:2%}.touchMode .brand{display:none}.touchMode .stat{padding:4px 7px;min-width:48px;gap:3px}.touchMode .stat small{font-size:8px}.touchMode .stat strong{font-size:12px}.touchMode .stat.clock{min-width:86px}.touchMode .iconButton{width:40px;height:40px;min-width:40px;font-size:22px;padding:4px}
.touchMode #orderNote{width:23cqw;max-height:54%;overflow-y:auto;pointer-events:auto;touch-action:pan-y;top:17%;padding:6px}.touchMode #orderNote>strong{font-size:11px}.touchMode #orderNote li b{font-size:10px}.touchMode #orderNote em{font-size:8px}.touchMode #orderNote p{font-size:10px}.touchMode #orderNote .orderDrink canvas{width:22px;height:27px}.touchMode #orderNote li{display:grid;grid-template-columns:1fr 26px;align-items:center;gap:2px;margin:4px 0}.touchMode #orderNote em{float:none;display:block}
.touchMode #proximity,.touchMode .bottom .hint{display:none}.touchMode .bottom{bottom:1.5%;left:1%;right:1%}.touchMode .tray{max-width:49%;padding:5px 7px;min-height:0}.touchMode .trayHeading{font-size:10px}.touchMode .trayHeading b,.touchMode .trayItem b{font-size:12px}.touchMode .trayItem canvas{width:20px;height:24px}.touchMode .trayStock{gap:6px}.touchMode .trayStock>span{font-size:10px}.touchMode .terraceButton,.touchMode .exitSign{font-size:11px;min-height:36px;padding:6px;border-width:2px}.touchMode .exitSign b{display:none}
.touchMode .faceSpeech{width:clamp(210px,36cqw,360px);padding:8px;font-size:12px;line-height:1.5}.touchMode .faceSpeech strong{font-size:13px}.touchMode .speechAnswers button{font-size:12px;line-height:1.4;min-height:42px;padding:7px 7px 7px 19px}.touchMode .speechAnswers button.selected:before{left:5px}.touchMode #speechLayer:has(.speechAnswers button) .faceSpeech:has(.speechAnswers button){left:50%!important;top:52%!important;transform:translate(-50%,-50%);max-height:92%;overflow:auto;pointer-events:auto;touch-action:pan-y;z-index:10}
.touchMode #brewDock{width:54%;max-width:none;left:24%;bottom:2%;padding:7px 9px}.touchMode #brewDock strong,.touchMode #pourStatus{font-size:12px}.touchMode .brewMeter{height:17px}.touchMode .openBar{font-size:clamp(14px,2.2cqw,22px);min-height:48px;min-width:180px;padding:12px}.touchMode .modal{width:min(92%,500px);max-height:96%;overflow:auto;padding:14px;transform:none}.touchMode .modal h2{font-size:19px;margin:0 0 8px}.touchMode .modal button{font-size:12px;min-height:40px;padding:8px}.touchMode .controlsNL p{font-size:11px;line-height:1.7}.touchMode .scoreGrid small,.touchMode .best,.touchMode .rank{font-size:10px}.touchMode .scoreGrid strong{font-size:19px}
@media(orientation:portrait){.touchMode #rotateTip{display:block;color:#f0cd92;font:12px/1.6 Pixel,monospace;text-align:center;padding:12px 15px;max-width:95%}.touchMode #stage{width:100%}.touchMode .faceSpeech{font-size:11px}.touchMode .top{top:0}.touchMode .stat{padding:3px 4px;min-width:42px}.touchMode .stat.clock{min-width:74px}.touchMode .iconButton{width:34px;min-width:34px;height:36px}.touchMode #orderNote{top:21%}.touchMode .station{min-width:28px;min-height:32px;padding:2px}.touchMode .station canvas{width:18px;height:23px}}


/* Top edge: orders on the left; only outcomes, time and controls on the right. */
.top,.bottom,#orderNote,#proximity,#brewDock,.station .stationKey,.station .drinkLabel{display:none!important}
#flowHUD{position:fixed;z-index:25;top:max(8px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));display:flex;align-items:flex-start;gap:14px;pointer-events:none;height:56px}
#flowHUD[hidden]{display:none}.compactStats{display:flex;gap:9px;align-items:center;flex:0 0 auto;color:#fff1c9;filter:drop-shadow(1px 2px 1px #231621);font-size:17px;font-weight:bold;height:44px}
.compactStats button{width:38px;height:42px;font:26px monospace;padding:3px;border:0;background:transparent;box-shadow:none;pointer-events:auto;text-shadow:1px 2px #211724}.compactStats button[hidden]{display:none}.compactStats button:hover{background:#ffe3a322}.outcome{display:flex;gap:6px;align-items:center}.outcome canvas{width:25px;height:25px;image-rendering:pixelated}.outcome b{min-width:18px}#countdown{min-width:43px;text-align:center}#countdown.urgent{color:#ffba91;animation:timerPulse 1s steps(2) infinite}
#ticketFlow{display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;pointer-events:auto;touch-action:pan-x;padding:2px 2px 8px;min-height:54px}#ticketFlow::-webkit-scrollbar{display:none}
.orderTicket{position:relative;flex:0 0 83px;display:grid;grid-template-columns:26px 1fr;align-items:center;gap:4px;height:43px;padding:4px;border:2px solid #e5c48e;background:#30232bc9;box-shadow:0 3px #1a172766;color:#fff1cd}.orderTicket canvas{width:23px;height:28px;image-rendering:pixelated}.orderTicket b{font-size:10px;line-height:1.4;text-transform:uppercase;text-shadow:1px 1px #251522}.ticketPlace{position:absolute;right:1px;bottom:0;font:12px monospace}.ticketResult{position:absolute;inset:0;display:grid;place-items:center;font:32px monospace;color:#fff}.orderTicket.ready{border-color:#ffe8a7;box-shadow:0 0 8px #ffdb8466}.orderTicket.incoming{animation:ticketIn .35s steps(5) both}.orderTicket.done{background:#527d53;animation:ticketOut .85s ease-in both}.orderTicket.missed{background:#8d5353;animation:ticketOut .85s ease-in both}.done>canvas,.done>b,.missed>canvas,.missed>b{opacity:.2}
@keyframes ticketIn{from{transform:translateY(-45px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes ticketOut{0%,55%{transform:scale(1);opacity:1}100%{transform:translateY(-35px) scale(.8);opacity:0}}@keyframes timerPulse{50%{opacity:.5}}
#ui .station{width:clamp(30px,4cqw,52px);height:clamp(34px,4.8cqw,59px);min-width:0;min-height:0;padding:3px;background:#36252be8;border:2px solid #eac58acc;box-shadow:none;opacity:.95}#ui .station canvas{width:85%;height:100%;image-rendering:pixelated}#ui .station.nearby{opacity:1}
#ui .roomExitSign{position:absolute;z-index:3;pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:.6cqw;min-width:0;min-height:0;padding:0;font-size:clamp(11px,1.9cqw,30px);color:#fff2c3;background:#345950d9;border:2px solid #b7ceb0;box-shadow:none;white-space:nowrap}#ui .roomExitSign.chosen{}#ui .roomEntrySign b{display:none}#ui .roomExitSign.overPlayer{opacity:.4}#ui .roomExitSign.roomMark{font-weight:bold;color:#fff6d0;text-shadow:0 0 6px #000a}#ui .exitSign.bandExit.roomEntrySign{width:auto;min-width:0;white-space:nowrap;padding:.5cqw 1cqw}
#ui .terraceButton.roomSign{left:var(--sx)!important;top:var(--sy)!important;right:auto;width:15cqw;min-height:5.3cqw;font-size:clamp(14px,2.6cqw,40px);padding:0 1cqw;background:#345950d9;border:2px solid #b7ceb0;text-align:center}#ui .terraceButton.roomSign.outsideSign{width:8.5cqw;min-width:86px;min-height:3.3cqw;font-size:clamp(12px,1.75cqw,26px)}#ui .terraceButton.roomSign.chosen{}
#ui .terraceButton{left:auto!important;right:5%;top:19%!important;font-size:15px;min-height:34px;padding:5px 8px;border:1px solid #ffe9af88;background:#28374488;box-shadow:none}#ui .exitSign{left:1%;top:57%;font-size:26px;min-height:36px;padding:1px 9px;background:#3f695477;border:1px solid #ffe9af88;box-shadow:none}#ui .exitSign b{display:none}
#ui .faceSpeech{width:clamp(230px,31cqw,410px);font-size:14px;line-height:1.55;padding:12px}#ui .speechAnswers button{font-size:12px;min-height:44px}
#ui:has(.speechAnswers button) #stations{visibility:hidden}body:has(#pauseOverlay) #flowHUD,body:has(#overlay) #flowHUD{visibility:hidden}
/* Touch controls float over the artwork, never reserving a separate bottom strip. */
html.touchMode{--dock:0px}.touchMode body{padding:0;position:relative;isolation:isolate;background:#201823}.touchMode body:before{content:'';position:fixed;inset:-12px;z-index:-1;background-image:var(--room-backdrop);background-position:center;background-size:cover;filter:blur(8px) brightness(.55);pointer-events:none}
.touchMode #stage{width:min(100vw,calc(100dvh * 2752 / 1536));flex:none;max-width:none}.touchMode #rotateTip{display:none!important}


.touchMode #stage .modal{z-index:40}.touchMode #flowHUD{gap:8px}.touchMode .compactStats{font-size:14px;gap:5px}.touchMode .compactStats button{width:32px}.touchMode .outcome{gap:3px}.touchMode .orderTicket{flex-basis:76px}.touchMode #ui:has(.speechAnswers button) .faceSpeech{position:fixed;left:50%!important;top:50%!important;width:min(430px,70vw);max-height:65dvh;overflow:auto;transform:translate(-50%,-50%);z-index:15}
@media(max-width:580px) and (orientation:portrait){#flowHUD{flex-wrap:wrap;gap:0;height:auto}.compactStats{order:-1;margin-left:auto;height:40px}#ticketFlow{flex-basis:100%}.touchMode #stage{width:100vw}.touchMode #ui:has(.speechAnswers button) .faceSpeech{width:86vw}}
@media(prefers-reduced-motion:reduce){.orderTicket.incoming,.orderTicket.done,.orderTicket.missed,#countdown.urgent{animation:none}}



html:not(.touchMode) #flowHUD{width:min(calc(100vw - 20px),calc(100dvh * 2752 / 1536 - 20px));left:50%;right:auto;transform:translateX(-50%);top:max(8px,calc((100dvh - 100vw * 1536 / 2752) / 2 + 8px))}
#siteIntro{position:fixed;inset:0;z-index:60;background:#09080c;display:grid;place-items:center;overflow:hidden;transition:opacity .9s ease,visibility .9s ease}
#siteIntro video{width:100%;height:100%;object-fit:cover;image-rendering:auto}
#siteIntro .introShade{position:absolute;inset:0;background:linear-gradient(#00000022,#130d16aa 82%,#130d16)}
#siteIntro .introSkip{position:absolute;z-index:2;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:92vw;padding:14px 20px;border:2px solid #ffe4aa;background:#281c26e8;color:#ffe9bb;font:clamp(12px,2vw,18px) Pixel,monospace;box-shadow:0 4px #100b16}
#siteIntro .introSkip{padding:8px 12px}#siteIntro .introSkip span{display:block;margin-top:10px;font:clamp(10px,1.5vw,13px) Pixel,monospace;text-transform:none;line-height:1.6}
.introDone #siteIntro{opacity:0;visibility:hidden;pointer-events:none}
html:not(.introDone) .openBar,html:not(.introDone) .characterSelect{opacity:0;pointer-events:none}
.introDone .openBar{transition:opacity .8s ease;opacity:1;pointer-events:auto;transform:translateX(-50%);z-index:4}
.introDone .characterSelect{transition:opacity .8s ease;opacity:1;pointer-events:auto;transform:translateX(-50%);z-index:4}
.characterSelect{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;z-index:3;align-items:center;justify-content:center}
.castRow{display:flex;flex-wrap:wrap;max-width:min(94vw,760px);gap:10px 8px;align-items:flex-end;justify-content:center}
.characterSelect button{min-width:116px;padding:6px 6px 5px;border:2px solid #caa06a;background:#2e202bc9;color:#ffe8b3;font:12px Pixel,monospace;text-transform:uppercase;box-shadow:0 4px #1c1420;transition:transform .15s ease,box-shadow .15s ease}
.characterSelect button.chosen{background:#7b5934;border-color:#fff0b9;box-shadow:0 0 20px #ffd47a99;transform:translateY(-7px)}
.characterSelect .charAvatar{display:block;width:102px;height:126px;margin:0 auto 3px;image-rendering:pixelated}
.castHint{margin:0;font:10px Pixel,monospace;color:#ffe8b3aa;letter-spacing:2px}
.longTalkSpeech{z-index:18}.longTalkSpeech .speechAnswers{display:grid;gap:6px}
@media(max-width:700px){.characterSelect{bottom:8%;gap:3px}.castRow{gap:6px}.characterSelect button{min-width:80px;font-size:10px;padding:5px 4px}.characterSelect .charAvatar{width:70px;height:87px}.castHint{font-size:8px;letter-spacing:1px}}




#ui .exitSign.twoChoice,#ui .exitSign.bandExit{font-size:clamp(12px,1.75cqw,26px);padding:.7cqw 1cqw;width:18cqw;min-width:122px;min-height:34px;background:#345950eb;border:2px solid #b7ceb0;text-align:left}
#ui .exitSign.bandExit{top:57%}
#ui .exitSign.twoChoice{top:calc(57% + clamp(42px,4.4cqw,66px))}
/* Table-cleaning screen (mode 'clean'): the game's own DOM and HUD hide, only #cleanUi shows. */
html.cleaning #ui>*:not(#cleanUi),html.cleaning #flowHUD{display:none!important}#cleanUi{position:absolute;inset:0;pointer-events:none;z-index:12}#cleanUi .cleanTitle{position:absolute;top:2%;left:50%;transform:translateX(-50%);color:#fff1c9;font-size:clamp(14px,2.2vw,24px);letter-spacing:2px;text-shadow:2px 2px #231621;white-space:nowrap}#cleanUi .cleanHelp{position:absolute;bottom:2%;left:50%;transform:translateX(-50%);width:70%;text-align:center;color:#fff1c9;font-size:clamp(10px,1.2vw,14px);text-shadow:1px 1px #231621}#cleanUi .cleanClose{position:absolute;right:1.5%;bottom:2%;pointer-events:auto;font-size:clamp(10px,1.2vw,14px);padding:6px 10px}
#ui .roomExitSign[hidden]{display:none}#ui .roomExitSign.kegsDone{z-index:4;font-weight:bold;color:#fff6d0;background:#4d8a63f0;border-color:#fff0b9;box-shadow:0 0 12px #ffe9af88;animation:kegsPulse .8s ease-in-out infinite alternate}@keyframes kegsPulse{from{transform:scale(1)}to{transform:scale(1.07)}}
/* Review fixes (version i, 2026-10-07) */
/* 1, 10: the bar's three ways out sit in one row at the bottom left, under Sam's stool instead of over him (KELDER: signPos in ROOM_DATA) */
#ui #bandExit,#ui #leftExit.twoChoice{top:auto;bottom:3%;width:16cqw;min-width:0}
#ui #bandExit{left:1%}
#ui #leftExit.twoChoice{left:calc(3% + 32cqw)}
/* 12: the drink buttons get their own row above the guests' bubbles */
#ui .station{top:15%!important}
/* 15: PC players see what SPATIE does */
#proximity{display:none!important}
html.cleaning #proximity{display:none!important}
/* 16: last call: the ways out stop working, so they hide and a banner says why */
html.closing #ui .exitSign,html.closing #ui .roomExitSign,html.closing #ui .terraceButton,html.closing #ui .roomEntrySign{display:none!important}
#lastCallBanner{position:absolute;top:16%;left:50%;transform:translateX(-50%);z-index:6;padding:.8cqw 1.6cqw;background:#2d2028ed;border:2px solid #ba945d;color:#ffe0a0;font-size:clamp(12px,1.8cqw,28px);white-space:nowrap;pointer-events:none}
/* 17: the smileys row on the end panel */
.scoreGrid .wide{grid-column:1/-1}
/* 18: the key line on the cleaning screen is for PC only */
.touchMode #cleanUi .cleanKeys{display:none}
/* 8, 9, 19: room exit signs always name the place; a long name wraps instead of shrinking */
#ui .roomExitSign:not(.roomMark):not(.kegsDone){white-space:normal;line-height:1.2;text-align:center;padding:.3cqw .8cqw;font-size:clamp(11px,1.9cqw,30px)}
@media (orientation:landscape){.touchMode #ui .exitSign,.touchMode #ui .terraceButton.roomSign{min-height:44px}.touchMode #ui .station{width:44px;height:48px}}
/* 13: phone held upright: show the turn tip and keep the signs small */
@media (orientation:portrait){.touchMode #rotateTip{display:block!important}.touchMode #ui .exitSign,.touchMode #ui .roomExitSign,.touchMode #ui .terraceButton.roomSign{min-width:0!important;min-height:0!important;font-size:8px!important;padding:1px 3px!important}}

/* answer buttons in a speech bubble are clickable with the mouse too (David 2026-10-08) */
#speechLayer .speechAnswers button{pointer-events:auto;cursor:pointer}
#speechLayer .faceSpeech:has(.speechAnswers button){left:50%!important;top:14%!important;transform:translateX(-50%)!important;max-height:92%;overflow:auto;pointer-events:auto;z-index:10}

/* drink buttons a bit bigger (David 2026-10-08) */
#ui .station{width:clamp(52px,5.4cqw,70px)!important;height:clamp(58px,6.3cqw,80px)!important}
/* podium: the KELDER sign as big as the BAR sign next to it */
#ui #roomEntry-kelder.bandExit[style*="left: 69%"]{font-size:2.6cqw!important;height:5.25cqw!important;min-height:0!important;padding:0 1cqw!important;display:flex;align-items:center;justify-content:center}

/* round J: the heart on the terras, at the archway David marked */
#kissSign.kissSign{left:37.1%;top:67%;transform:translate(-50%,-50%);padding:.9cqw 1.5cqw;font-size:4.4cqw;line-height:1;color:#ff9aad;background:#2b1b24e0;border-color:#b5566f;min-width:0;width:auto}
#kissSign.kissSign:hover{background:#4a2634}

body.kissView #ui>*,body.kissView #flowHUD{opacity:0!important;pointer-events:none!important}

/* round J: the sanitaire checklist */
.toiletList{width:600px;max-width:92%}
.toiletList h2{margin-bottom:22px}
.toiletList .checkRow{display:flex;align-items:center;gap:18px;width:100%;margin:10px 0;text-align:left;font-size:12px;background:#42292b;border-color:#805436}
.toiletList .checkRow canvas{width:40px;height:40px;image-rendering:pixelated;flex:0 0 auto}
.toiletList .checkRow.done{background:#2f4a33;border-color:#8fd08f;color:#dff3d9}

/* round J: the one off LAATSTE RONDE title at a minute to go */
#lastRoundFlash{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);z-index:7;pointer-events:none;white-space:nowrap;
 font-size:clamp(28px,4.6cqw,61px);line-height:1.18;color:#ffe1a0;text-shadow:4px 4px #9f5035,7px 7px #170e17;letter-spacing:-2px;
 animation:lastRound 2.6s steps(12) forwards}
@keyframes lastRound{0%{opacity:0;transform:translate(-50%,-50%) scale(.82)}14%{opacity:1;transform:translate(-50%,-50%) scale(1)}72%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.04)}}

/* round J: the end screen has two numbers and one wide row */
.scoreGrid.endJ .wide{grid-column:1/-1}

/* ===== V3-3 character-select: big 3D title, hero showcase + roster grid (David M5b) ===== */
.christmasTitle{top:0.6%}
.christmasTitle h1{font-size:7.9cqw;line-height:1.15;letter-spacing:-.12cqw;white-space:nowrap;
 text-shadow:.1cqw .1cqw #3a2230,.2cqw .2cqw #3a2230,.3cqw .3cqw #311b28,.4cqw .4cqw #2a1822,.5cqw .5cqw #2a1822,.62cqw .62cqw #1a1018,.74cqw .74cqw #120a12}
.christmasTitle{z-index:5}
.christmasTitle .titleDe{color:#eff7e4}
.christmasTitle .titleTwee{color:#9cec83}
.christmasTitle .titleSpieghels{color:#ff9e85}
.christmasTitle h1{filter:drop-shadow(0 .25cqw .7cqw #000d) drop-shadow(0 0 1.1cqw #ffdca033)}
.introDone .characterSelect{transform:none}
.characterSelect{position:absolute;inset:0;transform:none;display:block;z-index:3}
.menuScrim{position:absolute;inset:0;background:radial-gradient(135% 105% at 50% 44%,#0b08126a,#0a07108f);z-index:0}
.castStage{position:absolute;left:2.5%;right:2.5%;top:22%;bottom:5.5%;display:flex;align-items:stretch;gap:1.6cqw;z-index:2}
.castHero{flex:0 0 32%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0;min-height:0}
.heroAvatar{flex:1 1 auto;min-height:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 .4cqw .8cqw #000b)}
.heroName{flex:0 0 auto;font:6.2cqw Pixel,monospace;color:#ffdf9e;letter-spacing:.06cqw;margin-top:.2cqw;line-height:1;
 text-shadow:.1cqw .1cqw #3a2230,.2cqw .2cqw #3a2230,.3cqw .3cqw #2a1822,.4cqw .4cqw #2a1822,.52cqw .52cqw #140c14}
.castGrid{flex:1;min-width:0;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:.2cqw .8cqw;
 background:#120d16c7;border:.2cqw solid #b98c4f;border-radius:1.2cqw;padding:1cqw 1.2cqw .6cqw;box-shadow:inset 0 0 3cqw #0008,0 .6cqw 2cqw #0007;overflow:hidden}
.characterSelect .castCard{background:none;border:0;box-shadow:none;outline:0;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;cursor:pointer;min-width:0;min-height:0;overflow:hidden}
.characterSelect .castCard:hover,.characterSelect .castCard:focus,.characterSelect .castCard:focus-visible{background:none;outline:0;box-shadow:none}
.characterSelect .castCard .charAvatar{flex:1 1 auto;min-height:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;filter:brightness(.72) saturate(.9)}
.characterSelect .castCard b{flex:0 0 auto;font:1.85cqw Pixel,monospace;font-weight:normal;color:#9c8468;letter-spacing:.03cqw;margin-top:.15cqw;line-height:1;
 text-shadow:.06cqw .06cqw #241620,.12cqw .12cqw #241620,.18cqw .18cqw #140c14}
.characterSelect .castCard.chosen{background:none;border:0;box-shadow:none;transform:none}
.characterSelect .castCard.chosen .charAvatar{filter:brightness(1.2) contrast(1.03)}
.characterSelect .castCard.chosen b{color:#ffdf9e;font-size:2.1cqw;border-bottom:.28cqw solid #ffdf9e;padding-bottom:.1cqw;
 text-shadow:.08cqw .08cqw #3a2230,.16cqw .16cqw #2a1822,.24cqw .24cqw #140c14}
.characterSelect .castCard:focus-visible .charAvatar{filter:brightness(1) contrast(1.05)}
.castHint{display:none}

/* NL / ENG language toggle — menu top-right corner */
#langToggle{position:absolute;top:2.2cqw;right:2.4cqw;z-index:6;display:flex;align-items:center;gap:.4cqw;
 font:1.6cqw Pixel,monospace;background:#2e202bcc;border:.2cqw solid #caa06a;border-radius:.3cqw;
 padding:.5cqw .9cqw;box-shadow:0 .3cqw 0 #1c1420;user-select:none}
#langToggle span{color:#9c8468}
#langToggle button{background:none;border:0;padding:.1cqw .35cqw;margin:0;cursor:pointer;
 font:inherit;color:#9c8468;letter-spacing:.05cqw;text-transform:uppercase;line-height:1;min-width:0;min-height:0;box-shadow:none}
#langToggle button:hover{color:#ffe8b3}
#langToggle button.on{color:#ffdf9e;border-bottom:.22cqw solid #ffdf9e}
#langToggle button:focus-visible{outline:.2cqw solid #ffd47a99;outline-offset:.2cqw}
@media(max-width:700px){#langToggle{font-size:12px;top:10px;right:12px;padding:5px 8px;gap:4px;border-width:1px}
 #langToggle button.on{border-bottom-width:2px}}