:root{--text-scale:1;--ink:#214a44;--deep:#154e47;--cream:#fff9ec;--muted:#66847b;--coral:#d96661;--gold:#e7b665;--line:#d6deca;--mint:#90bdaa}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:#e9ecdf;font-family:Trebuchet MS,Avenir,Arial,sans-serif;font-size:calc(15px * var(--text-scale));background-image:radial-gradient(#53776914 1px,transparent 1px);background-size:8px 8px}
button{font:inherit;cursor:pointer;color:inherit}
button:disabled{cursor:not-allowed;opacity:.48}
button:focus-visible{outline:4px solid #e4a83b;outline-offset:4px}
button{touch-action:manipulation}
.app{max-width:1440px;margin:auto;padding:22px 32px 0}
.topbar{display:flex;gap:26px;align-items:center;padding:0 6px 20px}
.brand{border:0;padding:0;display:flex;align-items:center;background:none;text-align:left;gap:12px;white-space:nowrap;font:bold calc(34px * var(--text-scale)) Georgia,serif;line-height:.85;letter-spacing:-1.8px}
.brand em{font-weight:400}
.brand small{display:block;font:calc(8px * var(--text-scale)) Trebuchet MS,sans-serif;letter-spacing:2px;margin-top:11px}
.brand-star{font-size:calc(49px * var(--text-scale));color:var(--coral);font-weight:normal;line-height:1}
.shift-info{border-left:1px solid #becbbc;padding-left:24px;display:flex;flex-direction:column;gap:6px;min-width:175px}
.eyebrow{font-size:calc(9px * var(--text-scale));font-weight:800;letter-spacing:1.8px}
.shift-info strong{font:calc(22px * var(--text-scale)) Georgia,serif}
.hud{display:flex;margin-left:auto;gap:28px}
.stat{min-width:124px;display:flex;flex-direction:column;gap:5px}
.stat strong{font-size:calc(26px * var(--text-scale));line-height:1;font-variant-numeric:tabular-nums}
.stat .muted{font-size:calc(15px * var(--text-scale));font-weight:normal;color:var(--muted)}
.goal-track{height:4px;background:#ccd5c6;border-radius:8px;overflow:hidden;margin-top:3px}
.goal-track i{height:100%;display:block;width:0;background:var(--coral);transition:width .3s}
.clock{min-width:93px}
.clock strong{font-family:Georgia,serif;font-weight:normal}
.header-actions{display:flex;gap:7px}
.icon-button{position:relative;width:35px;height:35px;border:1px solid #bdcbbc;border-radius:50%;background:transparent;font-size:calc(19px * var(--text-scale))}
.icon-button:hover{background:#f9f4e3}
.sound-slash{position:absolute;height:20px;width:1.5px;transform:rotate(40deg);background:var(--ink);left:16px;top:6px}
.sound-on .sound-slash{display:none}
main{border:1px solid #a3b8a9;border-radius:18px;overflow:hidden;box-shadow:0 15px 30px #214a4412;background:var(--cream)}
.stage{position:relative;aspect-ratio:1200/740;background:#f0e7cd;overflow:hidden}
.stage canvas{width:100%;height:100%;display:block}
.bottom-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 23px;border-top:1px solid #c5c9ae;background:#fff9ec;min-height:66px}
.tip{display:flex;align-items:center;gap:12px;font-size:calc(13px * var(--text-scale));max-width:57%}
.tip-star{font-size:calc(26px * var(--text-scale));color:var(--coral)}
.tray{display:flex;align-items:center;gap:7px}
.tray>span{font-size:calc(9px * var(--text-scale));letter-spacing:1.5px;margin-right:4px}
.tray i{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;font-size:calc(11px * var(--text-scale));font-style:normal;border:1px dashed #9bb2a5;border-radius:50%;color:#94a89b}
.tray i.filled{background:#f6d58c;border:2px solid white;box-shadow:0 0 0 1px #cfac64;color:var(--ink);font-weight:bold}
.served{font-size:calc(11px * var(--text-scale));white-space:nowrap;color:#748a7b}
.served strong{font-size:calc(19px * var(--text-scale));color:var(--ink);margin-right:5px}
.page-note{display:flex;justify-content:space-between;font-size:calc(8px * var(--text-scale));letter-spacing:1.5px;padding:14px 7px;color:#809183}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:30px;background:#1a423047;backdrop-filter:blur(3px);z-index:5}
.overlay:empty{display:none}
.welcome{position:relative;width:min(700px,94%);text-align:center;background:#fff8e9;border-radius:12px;padding:44px 54px 34px;box-shadow:0 15px 70px #24463f33;border:1px solid #fff8;overflow:hidden}
.welcome:before,.welcome:after{content:'✦';position:absolute;top:102px;font-size:calc(30px * var(--text-scale));color:#dcb464}
.welcome:before{left:37px}
.welcome:after{right:37px}
.ribbon{display:inline-block;background:#e4ead9;padding:8px 20px;border-radius:3px;font-size:calc(9px * var(--text-scale));letter-spacing:2px;text-transform:uppercase}
.welcome h1{font:calc(72px * var(--text-scale))/.9 Georgia,serif;letter-spacing:-4px;color:var(--deep);margin:22px 0 12px}
.welcome h1 em{font-weight:normal;color:var(--coral)}
.welcome .tagline{font:italic calc(24px * var(--text-scale)) Georgia,serif;color:#8c6552;margin:15px 0 24px}
.welcome p{font-size:calc(13px * var(--text-scale));line-height:1.65;color:#758173;margin:0 auto 22px;max-width:390px}
.button-row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.primary,.secondary{padding:13px 22px;border-radius:7px;font-size:calc(12px * var(--text-scale));font-weight:bold;border:1px solid var(--deep);min-height:43px}
.primary{background:var(--deep);color:#fff7df;box-shadow:0 3px 0 #10382f}
.primary:hover{background:#236557}
.secondary{background:transparent}
.secondary:hover{background:#e9ecdd}
.text-button{border:0;background:transparent;font-size:calc(11px * var(--text-scale));padding:13px 7px;text-decoration:underline;text-underline-offset:4px;color:#7a8a77}
.welcome-footer{margin-top:26px;padding-top:17px;border-top:1px solid #e1deca;font-size:calc(9px * var(--text-scale));letter-spacing:1.1px;color:#84917d}
.modal{max-height:94%;overflow:auto;width:610px;background:#fff9ec;border-radius:14px;padding:31px 37px;box-shadow:0 15px 60px #173f3b44}
.modal h2{font:calc(38px * var(--text-scale)) Georgia,serif;letter-spacing:-1.2px;margin:9px 0 12px}
.modal p{font-size:calc(13px * var(--text-scale));line-height:1.6;color:#778571}
.modal .center{text-align:center}
.level-grid{display:grid;grid-template-columns:1fr;gap:8px;margin:22px 0}
.level-card{display:flex;align-items:center;gap:17px;padding:12px 15px;border:1px solid #d2d9c4;border-radius:8px;background:#f5f4e6;text-align:left}
.level-card:hover:not(:disabled){background:#e4ecda}
.level-card .number{font:calc(25px * var(--text-scale)) Georgia,serif;color:#72886d;width:24px}
.level-card strong{font-size:calc(14px * var(--text-scale));display:block}
.level-card small{font-size:calc(10px * var(--text-scale));color:#80907b;display:block;margin-top:4px}
.level-card .stars{margin-left:auto;color:#c79a3b;font-size:calc(15px * var(--text-scale));white-space:nowrap}
.instructions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:21px 0}
.instruction{padding:13px;background:#edf0e0;border-radius:8px}
.instruction b{display:block;font-size:calc(12px * var(--text-scale));margin-bottom:7px}
.instruction span{font-size:calc(11px * var(--text-scale));line-height:1.6;color:#7a8873}
.modal .key-hints{font-size:calc(10px * var(--text-scale));text-align:center}
.toast{position:absolute;left:50%;bottom:5.8%;transform:translate(-50%,10px);padding:10px 20px;background:#173e37ed;color:#fff8e5;border-radius:30px;font-size:calc(12px * var(--text-scale));box-shadow:0 4px 16px #22473320;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;max-width:80%;text-align:center;z-index:4}
.toast.show{opacity:1;transform:translate(-50%,0)}
.hotspot{position:absolute;border:2px solid transparent;background:transparent;border-radius:28px;padding:0}
.hotspot:hover{background:#fff7df1c;border-color:#fff6}
.hotspot.selected{border-color:#f4bd54;background:#f3c86319;box-shadow:0 0 0 3px #f4bd5433}
.hotspot:focus-visible{outline-offset:-2px}
.table-label{position:absolute;bottom:0;left:50%;transform:translateX(-50%);background:#fffbed;border:1px solid #c6cfb5;border-radius:20px;font-size:calc(9px * var(--text-scale));white-space:nowrap;padding:5px 11px;color:#64745e;box-shadow:0 2px 2px #5767460a}
.hotspot.actionable .table-label{background:#20564a;color:#fff8de;border-color:#20564a}
.hotspot.queued .table-label:before{content:'● ';color:#eab662}
.queue-label{position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:calc(9px * var(--text-scale));letter-spacing:.5px;background:#fffbeddf;padding:4px 10px;border-radius:20px;white-space:nowrap}
.kitchen-label{position:absolute;bottom:0;left:50%;transform:translateX(-50%);padding:7px 14px;border-radius:20px;background:#fff9e3;border:1px solid #c5b687;font-size:calc(10px * var(--text-scale));white-space:nowrap}
.hotspot.ready .kitchen-label{background:#efc566;color:#214a44;border-color:#a88740;animation:pulse 1.5s infinite}
.tutorial{position:absolute;left:2.2%;top:4%;max-width:250px;width:28%;background:#fff9e9f5;padding:17px 20px;border-radius:10px;box-shadow:0 4px 20px #304c3420;border:1px solid #e2d8b9;z-index:3}
.tutorial .eyebrow{color:#b38d4d;font-size:calc(8px * var(--text-scale))}
.tutorial strong{display:block;font:calc(22px * var(--text-scale)) Georgia,serif;margin:8px 0}
.tutorial p{font-size:calc(11px * var(--text-scale));line-height:1.6;margin:0;color:#77856c}
.tutorial .text-button{font-size:calc(9px * var(--text-scale));padding-bottom:0}
.hidden{display:none!important}
.big-stars{color:#dcb261;font-size:calc(43px * var(--text-scale));letter-spacing:6px;margin:16px 0}
.result-totals{display:flex;justify-content:center;gap:30px;padding:14px;border-top:1px solid #e0e2ce;border-bottom:1px solid #e0e2ce;margin:20px 0}
.result-totals strong{font:calc(27px * var(--text-scale)) Georgia,serif;display:block}
.result-totals span{font-size:calc(9px * var(--text-scale));color:#859078;letter-spacing:.8px}
.upgrade-list{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0}
.upgrade-card{background:#edf0df;border:1px solid #cdd6be;border-radius:8px;padding:15px;text-align:left}
.upgrade-card strong{display:block;font-size:calc(12px * var(--text-scale));margin:7px 0}
.upgrade-card small{display:block;font-size:calc(10px * var(--text-scale));color:#849071;line-height:1.5}
.upgrade-card b{display:block;margin-top:10px;font-size:calc(11px * var(--text-scale))}
.upgrade-icon{font-size:calc(23px * var(--text-scale));color:#ba8658}
.notice{padding:9px 12px;font-size:calc(11px * var(--text-scale));background:#f5dfb6;border-radius:5px;margin:15px 0}
.modal .dedication{font:italic calc(23px * var(--text-scale)) Georgia,serif;color:#a36d55}
.gift-star{font-size:calc(55px * var(--text-scale));color:#d09a6c}
.menu-actions{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.balance{font-size:calc(11px * var(--text-scale));color:#8b946f}
.balance strong{font-size:calc(17px * var(--text-scale));color:var(--deep)}
@keyframes pulse{50%{box-shadow:0 0 0 4px #efc56644}
}
@media(max-width:1100px){.app{padding:15px 18px 0}
.topbar{gap:16px}
.brand{font-size:calc(28px * var(--text-scale))}
.brand-star{font-size:calc(39px * var(--text-scale))}
.brand small{font-size:calc(6px * var(--text-scale))}
.shift-info{padding-left:15px;min-width:135px}
.shift-info strong{font-size:calc(18px * var(--text-scale))}
.hud{gap:17px}
.stat{min-width:112px}
.clock{min-width:85px}
.header-actions{gap:4px}
.icon-button{width:30px;height:30px}
.sound-slash{left:14px;top:4px}
}
@media(max-width:800px){.app{padding:12px 9px 0}
.topbar{flex-wrap:wrap;padding:0 5px 12px;gap:13px}
.brand{font-size:calc(25px * var(--text-scale))}
.brand small{font-size:calc(6px * var(--text-scale))}
.brand-star{font-size:calc(34px * var(--text-scale))}
.shift-info{display:none}
.hud{gap:16px}
.stat{min-width:97px}
.stat strong{font-size:calc(21px * var(--text-scale))}
.stat .muted{font-size:calc(12px * var(--text-scale))}
.clock{min-width:75px}
.header-actions{gap:4px}
.eyebrow{font-size:calc(7px * var(--text-scale))}
.welcome{padding:23px 25px 20px}
.welcome h1{font-size:calc(49px * var(--text-scale));margin-top:15px}
.welcome .tagline{font-size:calc(20px * var(--text-scale));margin:12px 0}
.welcome p{font-size:calc(11px * var(--text-scale));margin-bottom:14px}
.welcome-footer{margin-top:14px;padding-top:11px;font-size:calc(7px * var(--text-scale))}
.ribbon{font-size:calc(7px * var(--text-scale));padding:5px 13px}
.primary,.secondary{font-size:calc(10px * var(--text-scale));padding:9px 14px;min-height:35px}
.bottom-bar{padding:11px 14px;gap:10px;min-height:53px}
.tip{font-size:calc(10px * var(--text-scale));max-width:58%;gap:7px}
.tip-star{font-size:calc(20px * var(--text-scale))}
.tray>span{display:none}
.tray i{width:23px;height:23px;font-size:calc(9px * var(--text-scale))}
.served{font-size:calc(9px * var(--text-scale))}
.served strong{font-size:calc(15px * var(--text-scale))}
.table-label,.queue-label{font-size:calc(7px * var(--text-scale));padding:3px 6px}
.kitchen-label{font-size:calc(7px * var(--text-scale));padding:5px 9px}
.tutorial{padding:11px 13px;max-width:200px}
.tutorial strong{font-size:calc(16px * var(--text-scale))}
.tutorial p{font-size:calc(9px * var(--text-scale))}
.tutorial .text-button{font-size:calc(7px * var(--text-scale));padding:6px 0 0}
.tutorial .eyebrow{font-size:calc(6px * var(--text-scale))}
.modal{padding:18px 24px;max-height:98%;width:510px}
.modal h2{font-size:calc(27px * var(--text-scale));margin:6px 0}
.modal p{font-size:calc(11px * var(--text-scale))}
.level-grid{gap:5px;margin:12px 0}
.level-card{padding:7px 10px;gap:10px}
.level-card strong{font-size:calc(11px * var(--text-scale))}
.level-card small{font-size:calc(8px * var(--text-scale))}
.level-card .number{font-size:calc(19px * var(--text-scale))}
.level-card .stars{font-size:calc(11px * var(--text-scale))}
.overlay{padding:13px}
.big-stars{font-size:calc(27px * var(--text-scale));margin:8px}
.result-totals{padding:8px;margin:10px 0}
.result-totals strong{font-size:calc(22px * var(--text-scale))}
.upgrade-list{margin:10px 0}
.upgrade-card{padding:8px}
.upgrade-card strong{font-size:calc(11px * var(--text-scale))}
.upgrade-card small{font-size:calc(9px * var(--text-scale))}
.instructions{gap:8px;margin:12px 0}
.instruction{padding:9px}
.instruction b{font-size:calc(10px * var(--text-scale))}
.instruction span{font-size:calc(9px * var(--text-scale))}
}
@media(max-width:560px){.app{min-width:380px}
.brand small{display:none}
.brand-star{display:none}
.brand{font-size:calc(23px * var(--text-scale))}
.header-actions{margin-left:auto}
.stat{min-width:83px}
.clock{min-width:66px}
.hud{gap:10px}
.topbar{gap:9px}
.icon-button{width:27px;height:27px;font-size:calc(15px * var(--text-scale))}
.sound-slash{height:16px;top:4px;left:12px}
.stage{min-height:360px;aspect-ratio:1200/900}
.stage canvas{object-fit:fill}
.served{display:none}
.tip{max-width:75%}
.welcome{padding:17px 19px}
.welcome h1{font-size:calc(43px * var(--text-scale))}
.welcome p{font-size:calc(10px * var(--text-scale))}
.welcome .tagline{font-size:calc(17px * var(--text-scale))}
.welcome:before,.welcome:after{display:none}
.welcome-footer{font-size:calc(6px * var(--text-scale))}
.tutorial{width:30%;padding:9px}
.tutorial strong{font-size:calc(13px * var(--text-scale))}
.tutorial p{font-size:calc(8px * var(--text-scale))}
.tutorial .eyebrow{display:none}
.table-label{font-size:calc(6px * var(--text-scale))}
.queue-label{font-size:calc(6px * var(--text-scale))}
.kitchen-label{font-size:calc(6px * var(--text-scale))}
.page-note{font-size:calc(6px * var(--text-scale))}
.modal h2{font-size:calc(25px * var(--text-scale))}
.modal p{font-size:calc(10px * var(--text-scale))}
.instructions{grid-template-columns:1fr 1fr}
.key-hints{display:none}
.upgrade-icon{font-size:calc(17px * var(--text-scale))}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
}

/* Keep the whole game board visible on laptop-height windows. */
/* Input labels stay above the world Canvas, below tutorial/dialog overlays. */
.stage canvas{position:relative;z-index:0}
#hotspots{position:absolute;inset:0;z-index:1;pointer-events:none}
#hotspots>.hotspot{pointer-events:auto}

@media(min-width:801px){.app{max-width:min(1440px,calc((100vh - 216px) * 1.6216 + 64px))}
}

@media(min-width:801px) and (max-height:760px){.shift-info{display:none}
.topbar{gap:14px}
.brand{font-size:calc(26px * var(--text-scale))}
.brand-star{font-size:calc(36px * var(--text-scale))}
.brand small{font-size:calc(6px * var(--text-scale))}
.hud{gap:15px}
.stat{min-width:103px}
.clock{min-width:77px}
.app{max-width:min(1200px,calc((100vh - 196px) * 1.6216 + 64px))}
}

.queue-label{left:50%;top:auto;bottom:0}

/* Small laptop windows retain access to every welcome action. */
.welcome{max-height:100%;overflow:auto}

@media(max-height:760px) and (min-width:801px){.welcome{padding:22px 35px}
.welcome h1{font-size:calc(53px * var(--text-scale));margin-top:15px}
.welcome .tagline{font-size:calc(20px * var(--text-scale));margin:12px 0}
.welcome p{font-size:calc(11px * var(--text-scale));margin-bottom:15px}
.welcome-footer{margin-top:16px;padding-top:12px}
}

/* Approved illustrated diner direction: lacquered wood, golden buttons,
   saturated seats, dark outlines and a compact blue score counter. */
:root{--ink:#392414;--deep:#1d3b73;--cream:#fff0bd;--muted:#af8452;--coral:#d72c24;--gold:#ffd248;--line:#a5662c;--mint:#31913e}

body{background:#43281a;background-image:repeating-linear-gradient(0deg,#2b1b1320 0,#2b1b1320 2px,transparent 2px,transparent 42px);color:var(--ink);font-family:Trebuchet MS,Arial,sans-serif}

.app{padding-top:12px}
.topbar{padding:10px 15px;margin-bottom:9px;border:3px solid #32190e;border-radius:12px;background:linear-gradient(#e7b574,#a55c29);box-shadow:inset 0 2px #fff2a3,0 2px 0 #bd793e;gap:18px}
.brand{font:bold italic calc(29px * var(--text-scale)) Trebuchet MS,Arial,sans-serif;line-height:.8;letter-spacing:-1.8px;color:#c71e1c;text-shadow:1px 1px #fff1a0,-1px -1px #fff1a0,2px 2px #46210e}
.brand em{font-weight:900;color:#fff6d4}
.brand small{font-size:calc(7px * var(--text-scale));letter-spacing:1px;color:#44240e;text-shadow:none;font-weight:bold}
.brand-star{color:#ffc938;font-size:calc(40px * var(--text-scale));text-shadow:1px 2px #592707}
.shift-info{border-left:2px solid #8b4b24;padding-left:16px;min-width:150px;color:#3c210f}
.shift-info strong{font:bold calc(17px * var(--text-scale)) Trebuchet MS,Arial,sans-serif;text-shadow:0 1px #ffd796}
.eyebrow{font-size:calc(8px * var(--text-scale));letter-spacing:1.2px}
.hud{gap:10px}
.stat{background:linear-gradient(#255597,#10174a);border:3px solid #513017;box-shadow:inset 0 0 0 2px #f1cc63,0 2px #8c4c22;border-radius:9px;padding:7px 12px;color:#fff5c7;min-width:142px;gap:4px}
.stat .eyebrow{color:#d6e4ee}
.stat strong{font-style:italic;font-size:calc(24px * var(--text-scale));text-shadow:1px 2px #060d28}
.stat .muted{font-size:calc(13px * var(--text-scale));color:#e2c56c}
.clock{min-width:98px}
.clock strong{font:bold italic calc(24px * var(--text-scale)) Trebuchet MS,Arial,sans-serif}
.goal-track{height:5px;background:#081138;border:1px solid #0c0d29;margin-top:0}
.goal-track i{background:linear-gradient(#abf65c,#3aa728)}
.header-actions{gap:6px}
.icon-button{background:linear-gradient(#ffe16c,#e9961f);border:2px solid #753214;box-shadow:inset 0 1px #fff4b9,0 2px #793016;color:#4e1f10;font-weight:900}
.icon-button:hover{background:#ffe06e}
.sound-slash{background:#622819}

main{border:4px solid #542811;border-radius:12px;box-shadow:0 0 0 2px #efbf62,0 10px 30px #140d0966}
.bottom-bar{background:linear-gradient(#ffdfa0,#d39d54);border-top:3px solid #77401e;padding:11px 17px;min-height:58px}
.tip{font-weight:bold;color:#4b2814;font-size:calc(12px * var(--text-scale))}
.tip-star{color:#cd2720;text-shadow:0 1px #ffe8a7}
.tray>span{font-weight:900;color:#69401a}
.tray i{background:#f8e6bc;border:2px solid #7f542e;color:#b19b6f}
.tray i.filled{background:#fff197;border:2px solid #572810;box-shadow:0 1px 0 #fffbdc;color:#7b2316}
.served{color:#704723;font-weight:bold}
.served strong{color:#c2301e}
.page-note{color:#d2b58b;font-size:calc(7px * var(--text-scale));padding-top:10px}

.overlay{background:#20110b61;backdrop-filter:blur(1px)}
.welcome,.modal{background:linear-gradient(145deg,#fff0c5,#efc985);border:4px solid #6e3118;box-shadow:inset 0 0 0 2px #ffe696,0 8px 0 #402116,0 18px 55px #140c0966;color:#482310}
.welcome{border-radius:17px}
.welcome h1{font:bold italic calc(65px * var(--text-scale))/.92 Trebuchet MS,Arial,sans-serif;letter-spacing:-4px;color:#cb261f;text-shadow:2px 2px #ffefb8,3px 4px #753817;margin:20px 0 15px}
.welcome h1 em{font-style:normal;font-weight:900;color:#272c25;text-shadow:1px 1px #fff1bc;letter-spacing:-2px}
.welcome .tagline{font:bold italic calc(21px * var(--text-scale)) Georgia,serif;color:#773e1d}
.welcome p,.modal p{color:#784923}
.ribbon{background:linear-gradient(#e8372b,#a5161c);color:#fff3c0;border:2px solid #641b14;box-shadow:inset 0 1px #fa7b48;font-weight:900;border-radius:5px}
.welcome:before,.welcome:after{color:#d69b1d;text-shadow:1px 2px #7b3c11}
.welcome-footer{border-color:#c48b46;color:#8c5527;font-weight:900}
.modal h2{font:bold italic calc(31px * var(--text-scale)) Trebuchet MS,Arial,sans-serif;color:#842a19;text-shadow:0 1px #ffefbd}
.primary,.secondary{border:3px solid #6b2816;border-radius:20px;font-weight:900;font-size:calc(12px * var(--text-scale));box-shadow:inset 0 2px #fff2ae,0 3px #a54321;color:#572011;background:linear-gradient(#ffe679,#f3b02a);padding:11px 22px}
.primary:hover{background:linear-gradient(#ffeb9a,#ffc936)}
.secondary{background:linear-gradient(#4c86b9,#25447f);color:#fff1b5;border-color:#20254e;box-shadow:inset 0 1px #9acbe1,0 3px #202947}
.secondary:hover{background:#4c74a8}
.text-button{color:#824b27;font-weight:bold}
.level-card{background:linear-gradient(#fff0c3,#e3b977);border:2px solid #a96930;box-shadow:inset 0 1px #fff7d0}
.level-card:hover:not(:disabled){background:#ffdf82}
.level-card strong{color:#73321b}
.level-card small{color:#8d5d31}
.level-card .number{font:bold italic calc(24px * var(--text-scale)) Trebuchet MS,Arial,sans-serif;color:#ba522b}
.level-card .stars{color:#d1920b;text-shadow:0 1px #fff0a0}
.upgrade-card{background:linear-gradient(#fff0c8,#e5bd79);border:2px solid #b47938;box-shadow:inset 0 1px #ffefb3}
.upgrade-card strong{color:#753317}
.upgrade-card small{color:#96683a}
.upgrade-icon{color:#b72c1f}
.upgrade-card b{color:#326443}
.instruction{background:#edd49c;border:1px solid #c39350}
.instruction span{color:#8b5829}
.balance{color:#85502b}
.balance strong{color:#217537}
.result-totals{border-color:#c48c43}
.result-totals strong{font:bold italic calc(28px * var(--text-scale)) Trebuchet MS,Arial,sans-serif;color:#af2d1d}
.result-totals span{color:#9a6330}
.big-stars{color:#ffc52a;text-shadow:1px 2px #73401b}
.modal .dedication{color:#9c3524}

.hotspot{border-radius:15px}
.hotspot:hover{border-color:#fff49b99;background:#ffe17a16}
.hotspot.selected{border:3px solid #fff076;background:#ffea4517;box-shadow:0 0 10px #ffcb3a66}
.table-label,.queue-label{font-size:calc(9px * var(--text-scale));font-weight:900;color:#672b14;background:linear-gradient(#fff4bd,#f2c665);border:2px solid #653218;box-shadow:0 2px #e6a247;border-radius:12px}
.table-label{padding:4px 9px}
.hotspot.actionable .table-label{color:#fff6c8;background:linear-gradient(#d53b24,#a81819);border-color:#64231a}
.hotspot.queued .table-label:before{color:#ffee3d}
.queue-label{font-size:calc(8px * var(--text-scale));padding:3px 7px}
.kitchen-label{background:linear-gradient(#fff0ab,#e8b044);border:2px solid #613519;color:#623211;font-weight:900;padding:6px 15px}
.hotspot.ready .kitchen-label{background:linear-gradient(#ffef69,#ffbc22);border-color:#a34512;color:#6b220e}
.toast{background:linear-gradient(#224985,#11245c);border:2px solid #f8cd67;color:#fff5ba;border-radius:12px;font-weight:bold;font-size:calc(12px * var(--text-scale));box-shadow:0 3px #66351e}
.tutorial{background:linear-gradient(#224579,#152f5b);border:3px solid #ddb554;box-shadow:0 4px #693e22;color:#fff0bd}
.tutorial .eyebrow{color:#fbe36f}
.tutorial strong{font:bold italic calc(20px * var(--text-scale)) Trebuchet MS,Arial,sans-serif;color:#fff2be}
.tutorial p{color:#dbe7e5}
.tutorial .text-button{color:#ffc36b}
.notice{background:#ffdfa1;border:1px solid #b87329;color:#78321e}

@media(min-width:801px){.app{max-width:min(1440px,calc((100vh - 202px) * 1.6216 + 64px))}
}

@media(max-width:1100px){.topbar{gap:10px;padding:8px 10px}
.brand{font-size:calc(25px * var(--text-scale))}
.shift-info{min-width:110px;padding-left:12px}
.shift-info strong{font-size:calc(14px * var(--text-scale))}
.stat{min-width:128px;padding:6px 10px}
.clock{min-width:87px}
.brand-star{font-size:calc(32px * var(--text-scale))}
.header-actions{gap:4px}
}

@media(min-width:801px) and (max-height:760px){.shift-info{display:none}
.app{max-width:min(1200px,calc((100vh - 190px) * 1.6216 + 64px))}
.welcome h1{font-size:calc(50px * var(--text-scale))}
.welcome .tagline{font-size:calc(18px * var(--text-scale))}
.stat{min-width:125px}
.clock{min-width:87px}
}

@media(max-width:800px){.topbar{padding:6px 8px}
.brand{font-size:calc(22px * var(--text-scale))}
.stat{min-width:99px;padding:4px 7px;border-width:2px}
.clock{min-width:72px}
.stat strong,.clock strong{font-size:calc(19px * var(--text-scale))}
.stat .eyebrow{font-size:calc(6px * var(--text-scale))}
.stat .muted{font-size:calc(11px * var(--text-scale))}
.hud{gap:5px}
.welcome h1{font-size:calc(46px * var(--text-scale))}
.welcome .tagline{font-size:calc(17px * var(--text-scale))}
.primary,.secondary{font-size:calc(10px * var(--text-scale));padding:8px 13px;border-width:2px}
.bottom-bar{padding:8px 10px;min-height:50px}
.tip{font-size:calc(9px * var(--text-scale))}
.table-label,.queue-label{font-size:calc(7px * var(--text-scale));padding:3px 6px;border-width:1px}
.kitchen-label{font-size:calc(7px * var(--text-scale));border-width:1px}
.tutorial strong{font-size:calc(15px * var(--text-scale))}
.modal h2{font-size:calc(25px * var(--text-scale))}
.toast{font-size:calc(10px * var(--text-scale))}
.brand-star{display:none}
.header-actions .icon-button{width:27px;height:27px}
.page-note{font-size:calc(6px * var(--text-scale))}
}

/* Reserve the taller illustrated HUD/footer at both laptop padding breakpoints. */
@media(min-width:1101px){.app{max-width:min(1440px,calc((100vh - 245px) * 1.6216 + 64px))}
}

@media(min-width:801px) and (max-width:1100px){.app{max-width:min(1100px,calc((100vh - 245px) * 1.6216 + 36px))}
}

/* Text preferences affect DOM text only. The Canvas and hit-target geometry
   keep the same 1200 × 740 world; layout makes room instead of zooming it. */
.app {
  --text-scale: 1.3;
  --chrome-height: 245px;
  max-width: 1440px;
  min-width: 0;
  font-size: calc(15px * var(--text-scale));
}
.app[data-text-size="100"] { --text-scale: 1; }
.app[data-text-size="115"] { --text-scale: 1.15; }
.app[data-text-size="130"] { --text-scale: 1.3; }

/* A full-width header avoids pinching the HUD when the board is height-limited.
   The board height budget stays independent of text size; taller UI can scroll
   the outer page rather than undoing the user’s larger-text choice. */
.topbar {
  flex-wrap: wrap;
  gap: 12px 18px;
}
.topbar > * { min-width: 0; }
.brand { flex-shrink: 0; }
.shift-info { display: flex; flex: 1 1 130px; }
.hud {
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
}
.stat { min-width: 142px; }
.stat strong {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 3px;
  line-height: 1.1;
}
.stat .muted { white-space: nowrap; }
.clock { min-width: 98px; }
.header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  margin-left: auto;
}
.text-size-control {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-size: calc(10px * var(--text-scale));
  font-weight: 900;
  line-height: 1.2;
  color: #4e2914;
  margin-right: 3px;
}
.text-size-control select {
  max-width: 100%;
  min-height: 34px;
  border: 2px solid #753214;
  border-radius: 8px;
  padding: 5px 7px;
  background: linear-gradient(#ffe990, #efb744);
  color: #4e1f10;
  box-shadow: inset 0 1px #fff4b9, 0 2px #793016;
  font: bold calc(12px * var(--text-scale))/1.25 Trebuchet MS, Arial, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}
.text-size-control select:focus-visible {
  outline: 4px solid #fff7cb;
  outline-offset: 3px;
}
.header-actions .icon-button {
  flex: 0 0 auto;
  width: calc(35px * var(--text-scale));
  height: calc(35px * var(--text-scale));
  line-height: 1;
}
.sound-slash {
  left: 50%;
  top: 50%;
  height: 65%;
  transform: translate(-50%, -50%) rotate(40deg);
}

.stage { min-height: 0; aspect-ratio: 1200 / 740; }
.bottom-bar { flex-wrap: wrap; gap: 10px 16px; }
.tip { flex: 1 1 230px; min-width: 0; max-width: none; line-height: 1.45; }
.tip-star { flex-shrink: 0; }
.tray { flex-wrap: wrap; }
.tray i {
  width: calc(28px * var(--text-scale));
  height: calc(28px * var(--text-scale));
}
.served { margin-left: auto; }
.page-note { flex-wrap: wrap; gap: 7px 18px; line-height: 1.5; }
.page-note > span { overflow-wrap: anywhere; }

/* Both cards scroll within the board; no action falls under a clipped edge. */
.overlay { min-height: 0; padding: clamp(12px, 2vw, 30px); }
.welcome, .modal {
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  overflow-wrap: anywhere;
}
.welcome h1 { line-height: 1.05; }
.welcome p { max-width: 34em; }
.modal h2 { line-height: 1.15; }
.button-row, .menu-actions, .result-totals { flex-wrap: wrap; }
.menu-actions { gap: 10px 18px; }
.button-row > button { max-width: 100%; }
.primary, .secondary, .text-button { line-height: 1.35; }
.level-card { min-width: 0; flex-wrap: wrap; gap: 10px 14px; }
.level-card > span { min-width: 0; }
.level-card .number { flex: 0 0 auto; width: auto; min-width: 1em; }
.level-card .stars { flex-shrink: 0; }
.instructions, .upgrade-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.instruction, .upgrade-card { min-width: 0; }

/* Labels can wrap inside their own target width. Their paint never adds a
   hit area outside that target, which would steal a neighboring table click. */
.table-label, .queue-label, .kitchen-label {
  width: max-content;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
  text-align: center;
  pointer-events: none;
}
.tutorial {
  width: 30%;
  max-width: 320px;
  max-height: 31%;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 10px 12px;
}
.tutorial strong { line-height: 1.2; }
.tutorial .text-button { max-width: 100%; padding-left: 0; padding-right: 0; }
.toast { max-width: 88%; overflow-wrap: anywhere; line-height: 1.35; }

@media (min-width: 801px) {
  main, .page-note {
    width: min(100%, calc((100vh - var(--chrome-height)) * 1.6216 + 8px));
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 801px) and (max-width: 1100px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand hud" "shift actions";
    gap: 10px 16px;
  }
  .brand { grid-area: brand; }
  .shift-info { grid-area: shift; border-left: 0; padding-left: 0; }
  .hud { grid-area: hud; justify-content: flex-end; }
  .header-actions { grid-area: actions; }
}
@media (max-width: 800px) {
  .topbar { gap: 10px; }
  .shift-info { display: none; }
  .header-actions { flex: 1 1 auto; }
  .welcome, .modal { padding: 18px 20px; }
  .welcome:before, .welcome:after { display: none; }
  .tutorial { padding: 7px 9px; }
  .served { display: block; }
}
@media (max-width: 560px) {
  .hud { margin-left: 0; }
  .header-actions { justify-content: flex-start; margin-left: 0; }
  .text-size-control { flex-direction: row; align-items: center; gap: 8px; }
  .instructions, .upgrade-list { grid-template-columns: minmax(0, 1fr); }
  .tutorial { width: 34%; }
  .tip { max-width: none; }
}

/* Explicit service stations and accepted-stop feedback. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.tickets{font-size:calc(10px * var(--text-scale));font-weight:bold;color:#69401a}
.tray i{gap:2px;min-width:calc(33px * var(--text-scale));width:auto;padding:0 4px}
.tray i>span{font-size:.9em}
.tray i.dishes{background:#d8d0b3;color:#514832;border-color:#6c6248}
.hotspot.queued .table-label:before{content:none}
.accepted-badge{position:absolute;right:3%;top:8%;display:flex;align-items:center;justify-content:center;width:calc(24px * var(--text-scale));height:calc(24px * var(--text-scale));max-width:none;aspect-ratio:1;border:2px solid #fff6c2;border-radius:50%;background:#257338;color:#fffbe2;font:bold calc(16px * var(--text-scale))/1 Trebuchet MS,Arial,sans-serif;box-shadow:0 2px 3px #241b1466;pointer-events:none;z-index:2}
.move-check.accepted-badge{transform:translate(-50%,-50%);right:auto;max-width:none;width:calc(22px * var(--text-scale));height:calc(22px * var(--text-scale));font-size:calc(14px * var(--text-scale))}
.party-hotspot{touch-action:none;cursor:grab;border-radius:16px}
.party-hotspot:active{cursor:grabbing}
.party-hotspot.drag-source{opacity:.5;border-style:dashed;border-color:#fff4c0}
.station-label{position:absolute;bottom:0;left:50%;transform:translateX(-50%);padding:4px 5px;background:#ffedb3;border:2px solid #754322;border-radius:10px;font-size:calc(8px * var(--text-scale));font-weight:bold;line-height:1.15;max-width:100%;pointer-events:none;text-align:center;white-space:normal}
.station-hotspot.actionable .station-label{background:#25564b;color:#fff9d5;border-color:#f7d48a}
.station-hotspot,.food-hotspot{border-radius:13px}
.food-hotspot.ready{border:2px solid #ffe28677;background:#fff8be0a}
.food-hotspot:hover,.food-hotspot:focus-visible{border-color:#ffe993;background:#ffe68b2e}
.food-hotspot .accepted-badge{top:-2%;right:-2%}
#hotspots.dragging .table-hotspot{transition:background .08s,border-color .08s}
#hotspots .drop-valid{border:3px dashed #e8ffc0;background:#6bb54d25;box-shadow:inset 0 0 0 2px #2a71384d}
#hotspots .drop-over{border:4px solid #f6ffd7;background:#74d45644;box-shadow:0 0 0 3px #327e35aa}
#hotspots .drop-invalid{border:3px solid #ed755b;background:#e23e2b22}
@media(max-width:800px){.accepted-badge{width:calc(18px * var(--text-scale));height:calc(18px * var(--text-scale));font-size:calc(12px * var(--text-scale))}.station-label{font-size:calc(6px * var(--text-scale));padding:3px;border-width:1px}.tickets{font-size:calc(8px * var(--text-scale))}}

/* Browser delivery: the world always keeps its original proportions. */
[hidden]{display:none!important}
.app{padding-bottom:env(safe-area-inset-bottom,0px);--chrome-height:250px}
main{position:relative}
.board-scroll{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-color:#a76732 #edc680;scrollbar-width:thin}
.board-scroll:focus-visible{outline:3px solid #ffe779;outline-offset:-3px}
.stage{--board-scale:1;width:100%;min-width:640px;min-height:0;aspect-ratio:1200/740}
.stage canvas{object-fit:contain}
.asset-status{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 14px;background:#fff0c5;color:#6b351c;font-size:calc(12px * var(--text-scale));line-height:1.4;text-align:center;border-bottom:2px solid #a86b35}
.asset-status .text-button{flex-shrink:0;min-height:44px}
.browser-status{margin:8px auto 0;max-width:900px;padding:9px 14px;border-radius:8px;background:#fff0c5;color:#663216;font-size:calc(12px * var(--text-scale));line-height:1.4}
.browser-status:empty{display:none}
.mobile-hint{display:none}
/* Proportional labels keep a 10px readability floor. At the narrowest
   640px board the label starts below y+30, including border rounding; hearts end at y+27.6. */
.table-label{bottom:calc(0px - var(--hit-border,2px));white-space:nowrap;font-size:max(10px,calc(12px * var(--text-scale) * var(--board-scale)));line-height:1.15;padding:calc(2px * var(--board-scale)) calc(7px * var(--board-scale));border-width:calc(1px * var(--board-scale));border-radius:calc(12px * var(--board-scale));box-shadow:0 calc(2px * var(--board-scale)) #e6a247}
.app.is-fullscreen{width:100%;max-width:none;height:100%;overflow:auto;background:radial-gradient(ellipse at top,#704628,#2d2016);padding-top:max(12px,env(safe-area-inset-top,0px));padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
@media(min-width:801px){
  main,.page-note{width:min(100%,calc(max(230px,100vh - var(--chrome-height)) * 1.6216 + 8px));min-width:min(100%,648px)}
  @supports(height:100svh){main,.page-note{width:min(100%,calc(max(230px,100svh - var(--chrome-height)) * 1.6216 + 8px))}}
  .topbar{display:flex;flex-wrap:nowrap;gap:12px;padding:8px 12px;min-height:88px}
  .brand{flex-shrink:0}
  .shift-info{flex:1 1 90px}
  .header-actions{flex-wrap:nowrap;flex-shrink:0}
  .hud{flex-wrap:nowrap;flex-shrink:0}
  .page-note{min-height:35px}
  .tutorial{top:4%;max-width:250px}
}
@media(min-width:801px) and (max-width:1300px){.brand-star{display:none}}
@media(min-width:801px) and (max-width:1100px){.shift-info,.served{display:none}.stat{min-width:132px}.clock{min-width:90px}}
@media(min-width:801px) and (max-width:900px){
  .app{--chrome-height:320px}
  .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand hud" "actions actions";gap:8px 12px}
  .brand{grid-area:brand}.hud{grid-area:hud}.header-actions{grid-area:actions;justify-content:flex-end}
}
@media(max-width:800px){
  .app{padding:10px max(8px,env(safe-area-inset-left,0px)) env(safe-area-inset-bottom,0px);min-width:0}
  .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand hud" "actions actions";gap:10px 7px}
  .brand{grid-area:brand;font-size:calc(22px * var(--text-scale));letter-spacing:-1.4px}
  .brand small{display:none}
  .hud{grid-area:hud;flex-wrap:nowrap;gap:5px;margin-left:0}
  .stat{min-width:100px;padding:5px 7px}.clock{min-width:76px}
  .stat strong,.clock strong{font-size:calc(18px * var(--text-scale))}
  .stat .muted{font-size:calc(10px * var(--text-scale))}
  .header-actions{grid-area:actions;justify-content:flex-end;margin-left:0;gap:7px}
  .header-actions .icon-button{width:44px;height:44px;font-size:22px}
  .text-size-control{margin-right:auto;gap:3px;flex-direction:column;align-items:flex-start}
  .text-size-control select{min-height:44px;font-size:calc(11px * var(--text-scale));padding:5px}
  .mobile-hint{display:block;margin:0;padding:10px 12px;background:#f6d58e;font-size:calc(10px * var(--text-scale));line-height:1.5;color:#60321e}
  .stage{min-width:720px;aspect-ratio:1200/740}
  .tutorial{position:relative;top:auto;left:auto;width:auto;max-width:none;margin:0;border-radius:0;padding:12px 16px}
  .tutorial .eyebrow{display:block}.tutorial strong{font-size:calc(16px * var(--text-scale));margin:5px 0}
  .tutorial p{font-size:calc(11px * var(--text-scale));line-height:1.5}.tutorial .text-button{font-size:calc(10px * var(--text-scale));padding:10px 0 2px}
  .overlay{position:fixed;inset:0;z-index:10;padding:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));background:#20110bbd;overflow:auto}
  .welcome,.modal{max-height:100%;max-height:calc(100svh - 32px);padding:23px 20px;width:min(610px,100%)}
  .welcome h1{font-size:calc(46px * var(--text-scale));letter-spacing:-3px}
  .welcome p,.modal p{font-size:calc(12px * var(--text-scale))}
  .primary,.secondary,.text-button,.level-card,.upgrade-card{min-height:44px}
  .primary,.secondary{font-size:calc(11px * var(--text-scale))}
  .level-card strong{font-size:calc(12px * var(--text-scale))}.level-card small{font-size:calc(10px * var(--text-scale))}
  .instruction b,.instruction span,.upgrade-card small{font-size:calc(11px * var(--text-scale))}
  .bottom-bar{padding:11px 13px;gap:10px 14px}.tip{flex-basis:100%;font-size:calc(11px * var(--text-scale))}
  .tickets{font-size:calc(10px * var(--text-scale))}.served{display:none}.tray{margin-left:auto}
  .page-note{font-size:calc(8px * var(--text-scale));letter-spacing:.7px;padding:12px 3px}
  .station-label{font-size:calc(7px * var(--text-scale))}
}
@media(max-width:380px){
  .topbar{grid-template-columns:1fr;grid-template-areas:"brand" "hud" "actions"}
  .brand{justify-self:center}.hud{justify-content:center}.header-actions{justify-content:center;gap:5px}.text-size-control{margin-right:0}
}

@media(max-width:800px){
  .asset-status{position:fixed;z-index:11;top:12px;left:12px;right:12px;border:2px solid #a86b35;border-radius:8px}
  .app[data-art-state="loading"] .overlay,.app[data-art-state="error"] .overlay{padding-top:128px}
  .browser-status:not(:empty){position:fixed;z-index:11;bottom:12px;left:12px;right:12px;pointer-events:none}
}

/* Offset the actual hotspot border so label bottoms stay at world y+60. */
.table-hotspot{--hit-border:2px}
#hotspots .drop-valid,#hotspots .drop-invalid{--hit-border:3px}
#hotspots .drop-over{--hit-border:4px}

/* Party dragging is an app gesture, never native text/image dragging. */
.party-hotspot{user-select:none;-webkit-user-select:none;-webkit-user-drag:none}

/* Drag-only furniture outlines match seating geometry; service tags return on release. */
#hotspots.dragging .table-label{visibility:hidden}

.backup-json{display:block;width:100%;min-height:130px;max-height:32vh;resize:vertical;font:14px/1.4 monospace;padding:10px;color:#254843;background:#fffdf5;border:2px solid #b89766;border-radius:8px}.page-note #backup-button{font-size:calc(10px * var(--text-scale));padding:3px 8px;min-height:30px;letter-spacing:0}

.step-away{font-size:calc(11px * var(--text-scale));font-weight:bold;border:2px solid #aa7244;border-radius:10px;padding:7px 12px;background:#fff3cd;color:#57371f;min-height:40px;white-space:nowrap}.step-away:disabled{opacity:.5}

/* The whole counter remains a visit target beneath its numbered meal buttons. */
.counter-hotspot .station-label{left:auto;right:2px;transform:none;opacity:.86}