/* Hands-on town jobs and tablet interaction corrections from the kids' recording. */
.task-board.board-sort{min-height:420px}
.task-board .drag-piece{width:clamp(72px,17%,150px);max-width:24%;min-height:70px;box-shadow:0 4px 0 #d9dccd}
.task-board .piece-label{font-size:14px;line-height:1.2;overflow-wrap:anywhere}
.task-board .answer-tile{width:21%;max-width:24%}
.task-board .answer-tile .piece-label{font-size:clamp(16px,2.5vw,25px)}
.task-board.board-math .math-prompt{font-size:clamp(21px,2.6vw,30px);top:23%;width:91%;line-height:1.35}
.question-hint{min-height:44px;padding:8px 14px;border-radius:14px;background:#f5e9c9;font-weight:700}
.board-arrange{background:repeating-linear-gradient(45deg,#f0ece0,#f0ece0 20px,#f5f1e7 20px,#f5f1e7 40px)}
.assembly-scene{left:50%;top:37%;font-size:160px;opacity:.18;pointer-events:none}
.board-arrange .drop-zone{background:#fffdf7d9;border-width:2px}
.board-arrange .drag-piece{width:20%;max-width:21%}
.surface-illustration{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(90px,17vw,175px);opacity:.5;pointer-events:none}
.surface-bed{background:#e6f0f2;border-color:#a8bbc0}.surface-truck{background:#e8c7c1;border-color:#b5776a}.surface-pony,.surface-puppy{background:#ddc8a3;border-color:#ad8e63}.surface-counter{background:#e5e6dc;border-color:#b5baa4}.surface-salon{background:repeating-linear-gradient(90deg,#d4b086 0 50px,#dec099 50px 100px);border-color:#aa8360}
.board-cutlery .drop-zone{border-width:2px;background:#fffdf7c9}.cutlery-mat::before{width:32%;max-width:160px}
.school-task div{min-width:0}.school-task p{font-size:12px;font-weight:400;color:var(--muted);line-height:1.3;margin-top:3px}.school-extras{font:20px var(--serif);margin:24px 0 12px}.work-done{opacity:.65}.work-done .reward{color:#41654b;background:#e3ecdf}
.place-heading{display:flex;align-items:center;gap:10px;margin-bottom:8px}.place-heading>span{font-size:32px}.place-heading .panel-title{margin:0}
.level-strip{flex-wrap:wrap}#level-dots{display:flex;gap:3px;max-width:100%;flex-wrap:wrap}.level-dot{width:7px;height:7px}
.meal-bag .bag-grid{max-height:330px;overflow-y:auto;overscroll-behavior:contain;padding:4px;grid-template-columns:repeat(3,minmax(0,1fr))}.meal-bag .bag-item{min-height:78px}.meal-bag .bag-item strong{font-size:13px}
.meal-options{max-height:300px;overflow-y:auto;padding:4px;overscroll-behavior:contain}
@media(max-width:600px){.task-board .piece-label{font-size:12px}.task-board .drag-piece{width:25%;min-width:60px;padding:6px 3px}.task-board.board-sort{min-height:420px}.board-arrange .drag-piece{min-width:0;width:21%}.school-task small{font-size:12px}.meal-bag .bag-grid{max-height:300px}}
/* Integration: the fixed map must fit its card, not scroll behind its labels. */
#map-toggle[hidden]{display:none}
.room-card.show-map>.objective,.room-card.show-map>.level-strip{display:none}
@media (min-width:760px) and (orientation:landscape),(min-width:1040px){
 body.has-town:not(.at-meal)>.topbar,body.has-town:not(.at-meal)>main{width:100%;max-width:1380px}
 body.has-town:not(.at-meal)>main{padding-top:10px}
 body.has-town:not(.at-meal) .welcome{margin-bottom:10px;min-height:54px}
 body.has-town:not(.at-meal) .welcome .eyebrow,body.has-town:not(.at-meal) .welcome p,body.has-town:not(.at-meal) .bottom-row .tip{display:none}
 body.has-town:not(.at-meal) .welcome h1{font-size:26px}
 body.has-town:not(.at-meal) .room-header{height:44px;min-height:44px}
 body.has-town:not(.at-meal) .room-card.show-map{overflow:hidden;display:flex;flex-direction:column}
 body.has-town:not(.at-meal) .room-card.show-map #town-view{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;padding:12px}
 body.has-town:not(.at-meal) .town-header{align-self:stretch;margin-bottom:10px;max-width:none}
 body.has-town:not(.at-meal) .town-header .eyebrow{display:none}
 body.has-town:not(.at-meal) .town-header h2{font-size:24px}
 body.has-town:not(.at-meal) .town-header p{font-size:12px;margin-top:4px}
 body.has-town:not(.at-meal) .town-map{width:min(100%,max(280px,calc((100dvh - 370px) * 1.538)));flex:none}
 body.has-town:not(.at-meal) .town-location{font-size:11px;padding:4px 10px;margin-top:9px}
 body.has-town:not(.at-meal) .bottom-row{justify-content:flex-end;margin:6px 0 0;min-height:36px}
 body.has-town:not(.at-meal) footer{padding:6px 0 8px}
}
/* Mealtimes give the dining scene its own panel, with both controls alongside. */
.meal-control-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:stretch}
.meal-sidebar{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0}
#meal-scene-slot .room{height:100%;min-height:340px}
.meal-controls .meal-main{gap:8px}
.meal-controls .meal-bag{gap:8px;padding:12px}
.meal-controls .meal-bag>.panel-description{font-size:12px;margin:0}
.meal-controls .meal-main>.panel-title{font-size:20px;margin:0}
.meal-controls .attention{padding:9px 12px;margin:0}
.meal-controls .attention p{font-size:12px}
.meal-controls .meal-main>.quiet-note{font-size:11px;margin:0}
.meal-controls .meal-food-preview{padding:7px 10px}
.meal-controls .meal-food-preview small{display:none}
.meal-controls .feet-button{min-height:52px}
.meal-controls #skip-meal{min-height:36px;padding:5px;font-size:12px}
.meal-controls .use-options{gap:6px}
.meal-controls .use-option{min-height:62px;padding:7px 9px}
.meal-controls .use-option strong{font-size:13px;line-height:1.25}
.meal-controls .use-option small{display:none}
.meal-controls .use-option b{margin-top:4px;font-size:12px}
.meal-controls #last-trick{font-size:12px;min-height:0;margin:0;line-height:1.3}
.meal-controls .bag-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.meal-controls .bag-item{min-height:68px;padding:5px 3px}
.meal-controls .bag-item>span:first-child{font-size:23px}
.meal-controls .bag-item strong{font-size:11px}
.meal-controls .bag-item small{font-size:11px}
@media (min-width:760px) and (orientation:landscape),(min-width:1040px){
 body.at-meal{height:100dvh;overflow:hidden;display:flex;flex-direction:column}
 body.at-meal>.topbar{height:64px;flex:none;width:100%;max-width:1380px}
 body.at-meal>main{width:100%;max-width:1380px;flex:1;min-height:0;padding-top:12px;padding-bottom:0;display:flex;flex-direction:column}
 body.at-meal .meal-controls{flex:1;min-height:0;padding:12px;box-shadow:none}
 body.at-meal .meal-control-grid{height:100%;gap:14px}
 body.at-meal #meal-scene-slot{min-height:0}
 body.at-meal #meal-scene-slot .room{height:100%;min-height:0}
 body.at-meal .meal-sidebar{height:100%;overflow:hidden;gap:8px}
 body.at-meal .meal-main{flex:none}
 body.at-meal .meal-bag{flex:1;min-height:0;overflow:hidden}
 body.at-meal .meal-bag h2{font-size:18px;margin:0}
 body.at-meal .meal-bag>.panel-description{display:none}
 body.at-meal .bag-grid{flex:1;min-height:72px;max-height:none;align-content:start}
 body.at-meal .use-options,body.at-meal #last-trick{flex:none}
 body.at-meal .meal-options{max-height:210px;margin:0;gap:6px}
 body.at-meal .food-option{min-height:74px;padding:6px;font-size:12px}
 body.at-meal .food-option span{font-size:26px}
 body.at-meal .bottom-row{margin:4px 0;min-height:30px;justify-content:flex-end}
 body.at-meal .bottom-row .tip{display:none}
 body.at-meal footer{padding:4px 0 8px;flex:none}
}
@media (max-width:1039px) and (orientation:portrait){
 body.at-meal .meal-control-grid{grid-template-columns:1fr;gap:14px}
 body.at-meal #meal-scene-slot .room{height:32dvh;min-height:250px}
 body.at-meal .meal-sidebar{display:grid;grid-template-columns:1fr 1fr;align-items:start}
 body.at-meal .meal-bag .bag-grid{max-height:210px;grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:640px){
 body.at-meal .meal-sidebar{display:flex}
 body.at-meal .meal-main{position:sticky;top:0;z-index:2;background:#fffdf7;padding-bottom:6px}
 body.at-meal .meal-bag .bag-grid{max-height:160px}
}
/* Reserve control space so changing Granny's message never shifts the feet. */
.meal-controls .attention{height:76px;flex:none}
.meal-controls .challenge-meter{margin:4px 0}
.meal-controls .feet-button{padding:12px}
@media (min-width:641px) and (orientation:portrait){
 body.at-meal{height:100dvh;overflow:hidden;display:flex;flex-direction:column}
 body.at-meal>.topbar{height:64px;flex:none;width:100%}
 body.at-meal>main{width:100%;flex:1;min-height:0;padding-top:12px;padding-bottom:0;display:flex;flex-direction:column}
 body.at-meal .meal-controls{flex:1;min-height:0;padding:12px;box-shadow:none}
 body.at-meal .meal-control-grid{height:100%;grid-template-rows:minmax(300px,.8fr) minmax(0,1fr)}
 body.at-meal #meal-scene-slot .room{height:100%;min-height:0}
 body.at-meal .meal-sidebar{height:100%;min-height:0}
 body.at-meal .meal-bag{height:100%;min-height:0;overflow:hidden}
 body.at-meal .meal-bag h2{font-size:18px;margin:0}
 body.at-meal .meal-bag>.panel-description{display:none}
 body.at-meal .meal-bag .bag-grid{flex:1;min-height:72px;max-height:none;align-content:start}
 body.at-meal .meal-bag .use-options,body.at-meal #last-trick{flex:none}
 body.at-meal .bottom-row{margin:4px 0;min-height:30px;justify-content:flex-end}
 body.at-meal .bottom-row .tip{display:none}
 body.at-meal footer{padding:4px 0 8px;flex:none}
 body.at-meal .meal-options{max-height:190px;gap:6px;margin:0}
 body.at-meal .food-option{min-height:62px;font-size:11px;padding:5px}
 body.at-meal .food-option span{font-size:23px}
}
.meal-controls.is-eating .meal-main>.panel-title{display:none}
.meal-controls .feet-button{margin-top:0}
.meal-controls.is-eating .meal-food-preview .food-art{font-size:26px}
.meal-controls.is-eating .meal-food-preview{min-height:38px;padding:5px 10px}
@media (min-width:760px) and (orientation:landscape),(min-width:1040px){
 .meal-controls .use-options:has(>button:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:760px) and (orientation:landscape) and (max-height:740px){
 body.at-meal .meal-main>.quiet-note,body.at-meal .meal-bag>.panel-title{display:none}
 body.at-meal .meal-main,body.at-meal .meal-bag{gap:6px}
 body.at-meal .meal-controls .attention{height:68px}
 body.at-meal .meal-bag{padding:8px}
}