/* Real viewport layout; the projected work surface keeps its 4:3 proportions. */
html,body{min-width:280px;overscroll-behavior:none}
body{display:block}
#frame{width:100%;height:100dvh;max-width:none;max-height:none}
button,.mini-button,.text-button,.brass-button{min-height:48px;font-size:1rem;line-height:1.25;white-space:normal}
.eyebrow,.small-label{font-size:.75rem;letter-spacing:1.5px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#masthead{top:max(20px,env(safe-area-inset-top));left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right));gap:16px}
#masthead .icon-button{flex-shrink:0}
#museum-ui{position:absolute;inset:0;pointer-events:none}
#museum-ui button,#joystick{pointer-events:auto}
.museum-caption{left:max(24px,env(safe-area-inset-left));top:22%}
.museum-navigation{position:absolute;left:max(28px,env(safe-area-inset-left));right:max(28px,env(safe-area-inset-right));bottom:calc(66px + env(safe-area-inset-bottom));display:grid;grid-template-columns:112px minmax(0,1fr) 112px;align-items:end;gap:24px;pointer-events:none}
.movement{grid-column:1;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
#joystick{position:relative;inset:auto;width:112px;height:112px;flex-shrink:0}
#stick{width:48px;height:48px;left:31px;top:31px}
#move-label{position:static;inset:auto;width:auto;font-size:.75rem;letter-spacing:1px}
#museum-actions{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
#interact,#approach{position:static;inset:auto;transform:none;max-width:100%;white-space:normal}
#interact{min-width:180px}
#look-label{right:max(28px,env(safe-area-inset-right));bottom:calc(168px + env(safe-area-inset-bottom));font-size:.75rem;letter-spacing:1px}
#museum-footer{left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));bottom:env(safe-area-inset-bottom);min-height:56px;font-size:.875rem;gap:12px}
#view-plate{right:max(24px,env(safe-area-inset-right));top:94px;max-width:210px;font-size:.875rem}
body.left-handed .movement{grid-column:3}
body.left-handed #joystick,body.left-handed #move-label{left:auto;right:auto}
body.left-handed #look-label{left:max(28px,env(safe-area-inset-left));right:auto}

#game-ui{display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);grid-template-areas:'header' 'surface' 'dock';padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);gap:0;overflow:hidden}
#game-header{grid-area:header;position:relative;padding:10px clamp(12px,3vw,36px) 8px;background:linear-gradient(#181a24f5,#30251dde);z-index:2;min-width:0;max-height:34dvh;overflow:auto;touch-action:pan-y}
.stage-heading{display:flex;align-items:center;gap:16px;min-height:48px;min-width:0}
#stage-strip{position:static;inset:auto;display:flex;flex:1;min-width:0;justify-content:center;gap:clamp(8px,1.2vw,20px);font-size:.875rem;letter-spacing:0}
#stage-strip span{white-space:nowrap;line-height:1.25}
#table-settings{position:static;inset:auto;width:48px;height:48px;flex:0 0 48px;margin:0;font-size:1.2rem}
#instruction{position:static;inset:auto;margin:2px auto 0;max-width:820px;min-height:0;font-size:1rem;line-height:1.4;text-align:center;overflow-wrap:anywhere}
#production-surface{grid-area:surface;position:relative;min-width:0;min-height:0;overflow:hidden;background:radial-gradient(ellipse,#34261c,#16131a);pointer-events:auto;touch-action:none}
#board{position:absolute;inset:auto;display:block;width:1024px;height:768px;max-width:none;max-height:none;transform:none;touch-action:none}
#game-ui.controls-hidden #game-header,#game-ui.controls-hidden #production-dock{visibility:hidden;pointer-events:none}
#game-ui.finishing #game-header,#game-ui.finishing #production-dock{visibility:hidden;pointer-events:none}
#game-ui.controls-hidden #production-surface{background:transparent}
#game-ui.controls-hidden #board{visibility:hidden}
#production-dock{grid-area:dock;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 14px;padding:10px clamp(12px,3vw,36px);background:#211b18f5;border-top:1px solid #d8b87930;min-width:0;max-height:42dvh;overflow:auto;touch-action:pan-y;pointer-events:auto}
#preparation-controls{display:flex;align-items:center;gap:12px;flex:1 1 420px;max-width:720px;min-width:0}
#dose-control{position:static;inset:auto;width:auto;min-width:0;flex:1 1 190px;height:auto;min-height:48px;font-size:1rem;gap:10px}
#dose{height:48px;min-width:50px;width:100%;flex:1}
#dose-value{min-width:32px}
#accessible-controls{position:static;inset:auto;display:flex;flex:1 1 230px;gap:8px;align-items:center;min-width:0;font-size:1rem}
#ingredient-access-label{flex:1;min-width:0}
#ingredient-access{width:100%;max-width:100%;min-height:48px;font-size:1rem;border-radius:3px;padding:8px}
#add-access{flex-shrink:0}
#heat-controls{display:flex;flex-direction:column;align-items:stretch;gap:9px;flex:1 1 440px;min-width:0;max-width:750px}
.thermal-instruments{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;padding:10px 14px;background:linear-gradient(110deg,#402b20,#2b241e);border:1px solid #bd935d45;border-radius:6px;min-width:0}
.heat-instrument,.stir-instrument{display:grid;grid-template-columns:1fr;gap:3px;min-width:0}
.instrument-label{font-size:.65rem;letter-spacing:1.5px;color:#c4ac86;white-space:nowrap}
#heat-reading,#stir-reading{font-size:1.125rem;font-family:Georgia,serif;line-height:1.3;text-align:left;font-variant-numeric:tabular-nums;color:#f8e6c1;white-space:nowrap}
#stir-reading[data-rhythm=fast]{color:#f1aa88}#stir-reading[data-rhythm=good]{color:#e6dea0}
#batch-reading{font-size:.75rem;line-height:1.4;color:#ccba9d;white-space:nowrap}
#heat-track{height:5px;background:linear-gradient(90deg,#546e88,#bb9762 60%,#b75a3c);position:relative;margin:6px 0 3px;border-radius:3px}
#heat-target{position:absolute;top:-3px;height:11px;border:1px solid #fff0bf;box-shadow:0 0 0 1px #201a17;border-radius:2px}
#heat-needle{position:absolute;top:-4px;width:3px;height:13px;background:#fff9e7;transform:translateX(-1px);transition:left .2s linear;border-radius:2px}
.bellows-tools{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:8px;min-width:0}
.bellows-tools button{min-width:0;font-size:.875rem;padding:9px 8px;line-height:1.25}
#latch-bellows[aria-pressed=true]{background:#c49c5e;color:#261c15;border-color:#ecd2a2}
#bellows,#microphone,#recipe-button,#focus-board,#next-stage{position:static;inset:auto;transform:none;width:auto;height:auto;min-width:0;max-width:none;min-height:48px;font-size:1rem;padding:10px 14px}
#bellows{touch-action:none;flex:1 1 180px;background:#79523180;border-color:#c89b65}
#bellows.active{background:#b87535;color:#fff2d9}
#microphone{flex:1 1 150px}
.tool-actions{display:flex;gap:8px;flex:0 1 auto;min-width:0}
.tool-actions button{flex:1 1 auto}
#next-stage{flex:0 1 auto;white-space:normal;max-width:280px}
#focus-board[aria-pressed=true]{background:#b8955d44;border-color:#e0b979}
#toast{top:auto;bottom:calc(210px + env(safe-area-inset-bottom));font-size:1rem;line-height:1.4;max-width:min(90%,520px);width:max-content}
body.table #toast{top:calc(100px + env(safe-area-inset-top));bottom:auto}

dialog{position:fixed;max-width:calc(100vw - 28px - env(safe-area-inset-left) - env(safe-area-inset-right));max-height:calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));width:720px;overscroll-behavior:contain}
#dialog-body{padding:36px clamp(20px,5vw,40px);overflow-wrap:anywhere}
#dialog-title{padding-right:22px;font-size:clamp(1.5rem,4vw,2rem)}
.dialog-close{position:absolute;top:4px;right:4px;width:48px;height:48px;background:#e9decae8;z-index:2}
.dialog-actions{gap:10px}
.dialog-actions button{flex:1 1 160px}
dialog .history-card p,dialog .dialog-intro{font-size:1rem}
.source,.image-credit,.data-note,.help-key{font-size:.875rem!important;line-height:1.6}
.history-card img{float:none;display:block;width:100%;max-height:none;aspect-ratio:3/2;object-fit:cover;margin:0 0 16px;background:#30241b}
.history-card h3{font-size:1.375rem}
.history-card{padding:16px}
.name-input{font-size:1.125rem}
.memory-formats button{font-size:1rem;flex:1 1 200px}
.memory-image{max-height:none}
.score-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.score-row{font-size:.9375rem}
.skill-line{font-size:.875rem;grid-template-columns:minmax(95px,1.4fr) minmax(30px,1fr) 44px}
.serving-heading{top:max(24px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right))}
.serving-heading h2{font-size:clamp(1.5rem,4vw,2.5rem);margin:8px 0;overflow-wrap:anywhere}
.serving-heading p:not(.eyebrow){font-size:1rem}
.serving-actions{bottom:calc(20px + env(safe-area-inset-bottom));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));gap:10px;flex-wrap:wrap}
.serving-actions button{font-size:1rem;min-height:48px}
.plate-rotate{bottom:calc(82px + env(safe-area-inset-bottom));font-size:.875rem;margin:0 16px}
body.large #instruction{font-size:1.25rem}
body.large #stage-strip{font-size:1rem}
body.large #production-dock button,body.large #production-dock label{font-size:1.125rem}

@media(max-width:1100px){
 #stage-strip{justify-content:flex-start;font-size:1rem}
 #stage-strip span{display:none}
 #stage-strip span.current{display:block;border:0;padding:0;color:#ffe0a4}
 #stage-strip .stage-count{display:inline;color:#baac96;margin-left:12px;font-size:.875rem}
}
@media(min-width:1101px){#stage-strip .stage-count{display:none}}
@media(max-width:760px){
 #masthead{top:max(16px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));gap:12px}
 h1{font-size:1.375rem}.brand-mark{width:32px;height:32px;font-size:24px;flex:0 0 32px}
 .museum-caption{display:none}
 .museum-navigation{grid-template-columns:96px minmax(0,1fr);gap:20px;left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));bottom:calc(64px + env(safe-area-inset-bottom))}
 #joystick{width:96px;height:96px}#stick{width:44px;height:44px;left:25px;top:25px}
 #museum-actions{align-items:stretch}
 #interact{min-width:0}
 #look-label{bottom:calc(210px + env(safe-area-inset-bottom));right:max(18px,env(safe-area-inset-right));font-size:.75rem;letter-spacing:0}
 #museum-footer>span{display:none}#museum-footer{justify-content:flex-end}
 body.left-handed .museum-navigation{grid-template-columns:minmax(0,1fr) 96px}
 body.left-handed .movement{grid-column:2}body.left-handed #museum-actions{grid-column:1}
 #view-plate{top:88px;right:max(16px,env(safe-area-inset-right));font-size:.875rem}
 #game-header{padding:6px 12px 10px}
 #instruction{text-align:left;font-size:1rem;min-height:2.8em}
 #production-dock{padding:10px 12px;gap:8px;max-height:44dvh}
 #preparation-controls{flex:1 1 100%;flex-wrap:wrap;gap:4px}
 #dose-control{flex-basis:100%}
 #accessible-controls{flex-basis:100%}
 .tool-actions{flex:1 1 100%;gap:8px}
 #next-stage{flex:1 1 100%;max-width:none}
 #heat-controls{flex-wrap:wrap;gap:8px;flex-basis:100%}
 #bellows{flex:1 1 45%}#microphone{flex:1 1 38%}
 #heat-reading{flex:1 1 100%;text-align:left}
 #production-dock button{font-size:.9375rem;padding:10px 8px}
 #production-dock .tool-actions{flex:1 1 calc(50% - 8px)}
 #next-stage{flex:1 1 calc(50% - 8px)}
 #recipe-button,#focus-board{font-size:.875rem;padding:8px}
 .thermal-instruments{gap:12px;padding:8px 12px}
 #production-dock .bellows-tools button{font-size:.8125rem;padding:8px 5px;min-height:48px}
 body.table #toast{top:calc(112px + env(safe-area-inset-top));max-width:94%;font-size:.9375rem}
 .serving-actions #make-memory{flex:1 1 100%}
 .serving-actions .mini-button{flex:1 1 40%}
 .plate-rotate{bottom:calc(142px + env(safe-area-inset-bottom))}
 .score-grid{grid-template-columns:minmax(0,1fr)}
}
/* A short landscape phone gets a side tray instead of overlapping the scene. */
@media(min-width:600px) and (max-height:560px) and (orientation:landscape){
 #game-ui{grid-template-columns:minmax(0,1fr) clamp(232px,31vw,310px);grid-template-rows:auto minmax(0,1fr);grid-template-areas:'header dock' 'surface dock'}
 #game-header{padding:4px 12px 8px;max-height:40dvh}
 #instruction{font-size:.9375rem;text-align:left}
 #production-dock{flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;padding:12px;gap:10px;max-height:none;overflow-y:auto;border-top:0;border-left:1px solid #d8b87930}
 #preparation-controls,#heat-controls{flex:0 0 auto;max-width:none;flex-direction:column;align-items:stretch;gap:8px}
 #dose-control,#accessible-controls{flex:0 0 auto}
 #accessible-controls{flex-wrap:wrap}#add-access{flex:1 1 100%}
 #heat-controls{flex-wrap:nowrap}
 .thermal-instruments{grid-template-columns:1fr;gap:10px}
 .bellows-tools{grid-template-columns:1fr 1fr}
 .bellows-tools #bellows{grid-column:1/-1}
 #bellows,#microphone,#heat-reading,.tool-actions,#next-stage{flex:0 0 auto;max-width:none}
 .tool-actions{display:flex;flex-wrap:wrap}.tool-actions button{flex:1 1 100%}
 #heat-reading{text-align:left}
 #masthead{top:max(8px,env(safe-area-inset-top))}.museum-caption,#look-label{display:none}
 .museum-navigation{grid-template-columns:96px minmax(0,1fr) 96px;bottom:calc(52px + env(safe-area-inset-bottom));max-width:700px;margin:auto}
 #museum-actions{grid-column:2;align-items:center}#interact,#approach{min-width:170px}
 #joystick{width:88px;height:88px}#stick{left:21px;top:21px;width:44px;height:44px}
 body.left-handed .museum-navigation{grid-template-columns:96px minmax(0,1fr) 96px}
 body.left-handed .movement{grid-column:3}body.left-handed #museum-actions{grid-column:2}
 #view-plate{top:64px}.serving-heading{top:max(10px,env(safe-area-inset-top));text-align:left;right:50%}
 .serving-heading h2{font-size:1.5rem}.serving-actions{left:auto;width:230px;top:50%;bottom:auto;transform:translateY(-25%)}
 .serving-actions button{width:100%;flex:0 0 auto!important}
 .plate-rotate{bottom:16px;right:250px;font-size:.875rem}
 body.table #toast{left:12px;transform:none;max-width:calc(69vw - 24px)}
}
@media(max-width:760px) and (max-height:700px) and (orientation:portrait){
 #game-header{padding-top:2px;padding-bottom:6px}
 #instruction{font-size:.875rem;line-height:1.35;min-height:2.7em}
 #production-dock{gap:6px;padding:6px 10px}
 #heat-controls{gap:6px}
 .thermal-instruments{padding:6px 10px}
 #heat-reading,#stir-reading{font-size:1rem}
}
@media(max-width:360px){
 #masthead .eyebrow{letter-spacing:.4px}.brand-mark{display:none}
 .museum-navigation{grid-template-columns:88px minmax(0,1fr);gap:12px}
 #joystick{width:88px;height:88px}#stick{left:21px;top:21px}
 #dialog-body{padding:30px 16px}.history-card{padding:12px}
 #production-dock .tool-actions,#next-stage{flex-basis:100%}
}