/* A continuous kitchen counter, with preparation and serving kept distinct. */
html.game-document:has(body:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar)),
body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) { background:#f3e8d2; color:#35574c; }
body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell .top-bar h1,
body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell #gamesButton,
body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #rocketParents { color:#35574c; }
body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell .top-controls { width:auto; }
body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell #previousGameButton { display:none; }
body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell .playboard { background:#ead4af; grid-template-rows:minmax(0,1fr) 84px auto 76px; grid-template-areas:'scene' 'dock' 'action' 'agency'; }
body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell .scene-art { background:#f3e8d2; }
body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell .mission { text-align:center; color:#35574c; }
body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell .mission strong { color:#35574c; font-size:16px; font-weight:650; }
body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell #missionHint { color:#4d685b; margin-top:4px; font:400 12px/1.35 system-ui,sans-serif; }
body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) :is(.snack-world,.cookie-world)::after { content:''; position:absolute; inset:0; background:linear-gradient(#f3e8d2 0%,#f3e8d288 16%,transparent 35%,transparent 80%,#ead4af); }
body.game-first.snack-exemplar .snack-dispenser { height:78%; width:94%; bottom:3%; }
body.game-first.cookie-exemplar .cookie-table,
body.game-first.juice-exemplar .juice-table { height:83%; width:100%; bottom:0; }
body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell .phrase-bubble { top:70px; padding:7px 14px; font-size:16px; pointer-events:none; }
body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell #phraseGrid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell #phraseGrid .phrase-button { background:#fff7e6; border-color:#a57e4640; color:#35574c; box-shadow:0 3px 0 #a57e4633; }
body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell #phraseGrid .phrase-icon { position:relative; }
body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell #phraseGrid .is-last-used { outline-color:#477c70; }
body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell #actionRow { grid-area:action; height:62px; padding:0 18px 8px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell #actionRow button { height:54px; min-height:54px; padding:6px 12px; background:#386f62; color:#fff9e8; font-size:14px; border:0; box-shadow:0 3px 0 #244e4530; }
body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell #actionRow:has(#actionButton:not([hidden])) { grid-template-columns:1fr; }
body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell #actionRow :is(.replay-picture,.next-picture) { width:36px; height:36px; flex:0 0 36px; }
body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell #regulationRow { background:#f3e8d2; border-color:#a57e4630; }
body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell #regulationRow .regulation-button { color:#35574c; }
body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell #regulationRow :is(.is-last-used,[aria-pressed='true']) { background:#d4e2d4; border-color:#6c9885; }
body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell #regulationRow .regulation-button:active { background:#d4e2d4; }
body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) .help-target { outline-color:#387f70!important; }
body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) button:focus-visible { outline-color:#387f70; }
.food-help-example { position:absolute; z-index:6; top:68px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:16px; padding:7px 18px; border:1px solid #7da391; border-radius:18px; background:#fff9e9; color:#35574c; pointer-events:none; box-shadow:0 4px 16px #35574c18; }
.food-help-example[hidden] { display:none; }
.food-help-example span { display:grid; justify-items:center; font:600 12px system-ui,sans-serif; }
.food-help-example svg { width:54px; height:44px; }
.food-help-example i { font:600 24px system-ui,sans-serif; }
body.game-first.cookie-exemplar.mission-active #gameShell .stage { display:grid; grid-template-rows:60px auto minmax(170px,1fr); }
body.game-first.cookie-exemplar.mission-active #gameShell .mission { position:static; padding:7px 12px; }
body.game-first.cookie-exemplar.mission-active #gameShell .scene-art { min-height:170px; }
body.game-first.cookie-exemplar.mission-active .optional-mission-progress { background:#e3e6cd; color:#35574c; border:0; border-radius:0; padding:4px 12px; }
body.game-first.cookie-exemplar.mission-active .optional-mission-step { min-height:44px; padding-block:2px; }
body.game-first.cookie-exemplar.mission-active #optionalMissionContinue { min-height:48px; }
body.game-first.cookie-exemplar.mission-active .food-help-example,
body.game-first.cookie-exemplar.mission-active #gameShell .phrase-bubble { top:6px; }
@media(max-width:360px) {
 body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell .playboard { grid-template-rows:minmax(0,1fr) 76px auto 66px; }
 body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell #actionRow { height:54px; padding-inline:12px; }
 body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell #actionRow button { height:46px; min-height:46px; }
}
@media(orientation:landscape) and (max-height:550px) {
 body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell .playboard { grid-template-rows:minmax(0,1fr) auto 70px; grid-template-areas:'scene dock' 'scene action' 'scene agency'; }
 body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell #phraseGrid { grid-template-columns:1fr; gap:6px; padding:6px 12px; }
 body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell #phraseGrid:has(>button:nth-child(3)) { grid-template-columns:1fr; }
 body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell #phraseGrid .phrase-button,
 body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell #phraseGrid:has(>button:nth-child(3)) .phrase-button { flex-direction:row; min-height:44px; height:48px; font-size:13px; gap:6px; }
 body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell #phraseGrid .phrase-icon { height:34px; width:40px; flex:0 0 40px; }
 body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell #actionRow { height:54px; padding:0 12px 6px; }
 body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell #actionRow button { min-height:44px; height:48px; font-size:12px; }
 body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell .mission { top:0; }
 body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell .phrase-bubble { top:56px; font-size:14px; }
 .food-help-example { top:54px; padding:4px 14px; }
 .food-help-example svg { height:30px; }
 body.game-first.cookie-exemplar.mission-active #gameShell .stage { grid-template-rows:48px auto minmax(170px,1fr); }
 body.game-first.cookie-exemplar.mission-active #gameShell .playboard { min-height:270px; }
}
body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell .playboard:has(#phraseGrid[hidden]) { grid-template-rows:minmax(0,1fr) 0 auto 76px; }
@media(max-width:360px) {
 body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell .playboard:has(#phraseGrid[hidden]) { grid-template-rows:minmax(0,1fr) 0 auto 66px; }
}
@media(orientation:landscape) and (max-height:550px) {
 body.game-first:is(.snack-exemplar,.cookie-exemplar,.juice-exemplar) #gameShell .playboard:has(#phraseGrid[hidden]) { grid-template-rows:minmax(0,1fr) auto 70px; }
}