*{box-sizing:border-box}body{margin:0;background:var(--ah-canvas);color:var(--ah-ink);font-family:var(--ah-font)}main{display:grid}.kitchen{text-align:center;min-width:0}.heading{text-align:center}.pantry{background:var(--ah-surface);border:1px solid var(--ah-divider);}
[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.collapse-icon{display:none}#fullscreen[aria-pressed=true] .expand-icon{display:none}#fullscreen[aria-pressed=true] .collapse-icon{display:block}
.first-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.first-heading h2{margin:0!important}.build-mode-controls{display:flex;gap:6px;align-items:center}.build-toggle{width:128px}
.supplies-menu-column{min-width:0}.supplies-menu-column>.heading{margin-bottom:12px}.pizza-menu-body{display:grid;grid-template-columns:1fr}.is-create .pizza-menu-body{grid-template-columns:44px minmax(0,1fr);gap:8px}
.dots{display:flex;gap:4px}.dots i{width:5px;height:5px;background:var(--ah-divider);border-radius:50%}.dots i.filled{background:var(--ah-selected-border)}
.builder-actions{display:flex;gap:8px;margin-top:8px}.builder-actions button{flex:1;min-width:0}.builder-actions img{width:22px;height:22px}
.play-only{display:none}.is-create .play-only{display:inline}.is-create .learn-only,.is-create .dots,.is-create .ingredient-name{display:none}
#piece-picker-wrap{margin-bottom:8px}#free-tools{width:44px;align-self:center}.free-toolbar{display:flex;flex-direction:column;gap:6px}
.board{position:relative;isolation:isolate;border-radius:24px;background:var(--ah-secondary);border:1px solid var(--ah-border)}#pieces,.ingredient-layer{position:absolute;inset:0;pointer-events:none}.piece{position:absolute;aspect-ratio:1;transform:translate(-50%,-50%) rotate(var(--rotation)) scale(var(--scale))}.piece>svg{width:100%;height:100%}
.free-layer{position:absolute;inset:0;container-type:size;pointer-events:none}.free-piece{position:absolute;width:max(44px,calc(var(--food-size)*1cqw));height:max(44px,calc(var(--food-size)*1cqw));padding:0;border:0;background:transparent;transform:translate(-50%,-50%);pointer-events:auto;touch-action:none;cursor:grab}.free-art{position:absolute;left:50%;top:50%;width:calc(var(--food-size)*1cqw);aspect-ratio:1;transform:translate(-50%,-50%) rotate(var(--angle)) scaleX(var(--flip));pointer-events:none}.free-art>svg{width:100%;height:100%}.free-piece.selected .free-art{outline:2px dashed var(--ah-focus);border-radius:8px}.free-piece:focus-visible{outline:3px solid var(--ah-focus)}.is-create #supplies-scene{touch-action:none}
@media(max-width:739px),(max-height:599px){.is-create .pizza-menu-body{grid-template-columns:1fr}#free-tools{width:100%;margin:8px auto}.free-toolbar{flex-direction:row;flex-wrap:wrap;justify-content:center}.free-toolbar .ah-button{flex:0 0 44px}}

.class-supplies #builder{--learn-card-rows:3;--play-card-rows:3}
#topping-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.topping-button{font:inherit;font-size:14px;display:flex;align-items:center;justify-content:center;flex-direction:column;min-width:0;padding:4px;gap:3px;position:relative}
.ingredient-art{display:block;flex-shrink:0;width:36px;height:36px}.ingredient-art>svg{width:100%;height:100%}
.is-create .topping-button::after{display:none}
select{min-width:0;width:100%;min-height:44px;padding:6px;border:1px solid var(--ah-border);border-radius:12px;background:var(--ah-surface);color:var(--ah-ink);font:inherit;font-size:14px}
.color-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px;align-items:center;margin-top:8px}
#case-art{position:absolute;inset:0;pointer-events:none}#case-art>svg{width:100%;height:100%}
#supplies-photo{display:block;max-width:100%;max-height:65vh;object-fit:contain;margin:auto}
#source-sentence{color:var(--ah-muted)}

.color-swatches{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,44px);gap:4px;justify-content:center}
.color-swatch{min-width:44px;min-height:44px;padding:5px;position:relative;display:grid;place-items:center}
.color-swatch span{display:block;width:28px;height:28px;border-radius:50%;border:1px solid var(--ah-border)}

/* Scene selection uses native buttons, sized to visible artwork. */
.case-select{position:absolute;left:12%;top:7%;width:76%;height:58%;padding:0;border:0;border-radius:10px;background:transparent;cursor:pointer;z-index:0}
#pieces{z-index:1}.free-layer{z-index:2}
.learn-color-hit{position:absolute;left:50%;top:50%;min-width:44px;min-height:44px;transform:translate(-50%,-50%);padding:0;border:0;border-radius:4px;background:transparent;pointer-events:auto;cursor:pointer}
.learn-color-hit[aria-pressed=true],.case-select[aria-pressed=true]{outline:2px dashed var(--ah-focus);outline-offset:2px}
.learn-color-hit:focus-visible,.case-select:focus-visible{outline:3px solid var(--ah-focus)}
.color-row{grid-template-columns:72px minmax(0,1fr);gap:8px;container-type:inline-size}
.color-heading{grid-column:1/-1}
.color-preview{width:72px;height:72px;border:1px dashed var(--ah-border);border-radius:12px;display:grid;place-items:center;padding:6px}
.color-preview>svg{width:100%;height:100%}
.color-swatches{grid-column:2;justify-content:start}

/* Keep five full-sized swatches per row when the menu narrows. */
@container (max-width:315px){
 .color-preview{grid-column:1/-1}
 .color-swatches{grid-column:1/-1}
}