:root{font-family:system-ui,sans-serif;color-scheme:dark;background:#211c29;color:#f7e8ce}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:radial-gradient(ellipse at top,#60434e,transparent 70%)}main{max-width:1000px;margin:auto;padding:24px}a{color:#f7ce80}h1{font-size:clamp(2.4rem,6vw,4rem);margin:10px 0;letter-spacing:-.06em}h1 em{color:#f4c776;font-style:normal}.eyebrow{font-size:.72rem;letter-spacing:.14em;color:#d9b39f}section{background:#2c2530;border:2px solid #92715d;border-radius:23px;overflow:hidden}nav{padding:10px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}nav div,.actions{display:flex;gap:6px;flex-wrap:wrap}button{font:inherit;background:#594251;color:#ffe7c4;padding:10px 12px;border:1px solid #b38b67;border-radius:10px;cursor:pointer;touch-action:manipulation}button:hover,button:focus-visible{outline:2px solid #f4c776;outline-offset:2px}button:disabled{opacity:.5;cursor:default}button[aria-pressed=true]{background:#e0b66b;color:#2a2030}.stage{position:relative}canvas{width:100%;display:block;aspect-ratio:15/7}#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#201925f0;padding:16px;overflow:auto}.panel{text-align:center;max-width:650px;width:100%}.panel h2{margin:4px}.panel p{line-height:1.45}.actions{justify-content:center;margin-top:10px}#shifts{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}#link{width:100%;padding:9px;margin-top:8px;background:#191623;color:#ffe4b5;border:1px solid #9b7755}.hud{padding:12px;background:#211d28;color:#f4c776}.workstations{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px}.station{padding:12px;border-bottom:3px solid #c393ba;background:#39303e;border-radius:14px}.station h2{margin:0 0 8px;font-size:1rem}.station p{min-height:40px;font-size:.85rem}.station button{padding:8px;font-size:.8rem;margin:2px}.service{display:grid;grid-template-columns:1fr 1.5fr;gap:16px;padding:0 12px}.service h2{font-size:1rem}.service small{display:block;color:#c6b2a7;font-size:.7rem;margin-top:5px;font-weight:400}#counter,#seats{display:flex;gap:7px;flex-wrap:wrap}#seats button{flex:1;font-size:.8rem;min-width:100px}#arrival,#notice,#story{padding:0 14px;font-size:.85rem;line-height:1.5}#notice{min-height:26px;color:#f7cf86}#story,footer{color:#c9b5ae}footer{font-size:.8rem;padding-top:16px;line-height:1.5}@media(max-width:650px){main{padding:10px}nav button{font-size:.72rem;padding:7px}.stage{min-height:300px}canvas{height:300px;object-fit:contain;background:#493646}.panel p{font-size:.74rem;margin:6px 0}.panel h2{font-size:1.2rem}#shifts button{font-size:.75rem;padding:7px}.workstations{gap:5px;padding:7px}.station{padding:7px}.station h2{font-size:.8rem}.station p{font-size:.72rem}.station button{font-size:.7rem;padding:7px 5px}.service{grid-template-columns:1fr}.hud{font-size:.8rem}}

/* Keep customers and their controls together on ordinary desktop screens. */
button{min-height:44px}
@media(min-width:900px){
 #console{display:grid;grid-template-columns:1fr 1fr;scroll-margin-top:8px}
 #console>nav,#console>.hud,#console>.service,#arrival,#notice,#story{grid-column:1/-1}
 #console>nav{grid-row:1;padding:8px}
 #console>.hud{grid-row:2;padding:8px 12px}
 #console>.stage{grid-column:1;grid-row:3;min-height:300px;display:flex;align-items:center;background:#493646}
 #console canvas{height:auto;aspect-ratio:15/7}
 #console>.workstations{grid-column:2;grid-row:3;padding:8px;gap:6px;align-content:center}
 #console .station{padding:8px}
 #console .station h2{font-size:.9rem}
 #console .station p{margin:8px 0}
 #console .station button{display:block;width:100%;margin:4px 0;padding:6px;font-size:.75rem}
 #arrival{grid-row:4;margin:6px 0}
 #console>.service{grid-row:5;gap:12px;padding:0 12px}
 #console .service h2{margin:4px 0 6px}
 #console .service small{display:inline;margin-left:8px}
 #notice{grid-row:6;margin:6px 0;min-height:22px}
 #story{grid-row:7;margin:6px 0 10px}
}

.challenge-choice{display:block;margin:12px 0;font-weight:700}.challenge-choice select{font:inherit;padding:10px;max-width:100%;color:#292334;background:#fff0d4;border:2px solid #b59067;border-radius:8px}.challenge-note{font-size:.9rem;line-height:1.5;max-width:58ch;margin:10px auto}

/* Keep variant controls in the scrollable menu, never beside or above its viewport. */
#overlay{align-items:flex-start}.panel{margin:auto;min-width:0}
@media(max-width:650px){.stage:has(#overlay:not([hidden])){min-height:440px}}