/* Make It: Pizza — theme styles */
.scene.themed { background:linear-gradient(180deg,#FBEED9 0%, #F7E3C8 56%, #C9A97E 57%, #B8956A 100%); }
.prop.chefhat { width:clamp(70px,11vw,120px); aspect-ratio:140/120; top:3%; left:3%; opacity:.9; }
.oven-holder { position:absolute; right:2%; bottom:26%; width:clamp(120px,20vw,230px); aspect-ratio:260/240; z-index:3; }
.oven-holder svg { width:100%; height:100%; }
.counter { position:absolute; left:0; right:0; bottom:0; height:26%; background:linear-gradient(180deg,#C9A97E 0%, #B8956A 100%); border-top:6px solid #A5825C; z-index:2; }
.pizza-holder { position:absolute; left:50%; bottom:9%; transform:translateX(-50%); width:min(56vw,330px); aspect-ratio:1; z-index:5; transition:all .9s cubic-bezier(.5,.05,.4,1); }
.pizza-holder img, .pizza-holder > svg { width:100%; height:100%; object-fit:contain; }
.topping-layer { position:absolute; inset:0; z-index:2; pointer-events:none; }
.topping-piece { position:absolute; width:14%; aspect-ratio:1; transform:translate(-50%,-50%); }
.topping-piece svg { width:100%; height:100%; }
.topping-piece.drop { animation:top-drop .5s cubic-bezier(.34,1.56,.64,1) backwards; }
@keyframes top-drop { 0%{transform:translate(-50%,-220%) scale(1.4); opacity:0} 100%{transform:translate(-50%,-50%) scale(1); opacity:1} }
.pizza-holder.baking { left:auto; right:4%; bottom:30%; width:min(24vw,140px); transform:none; }
.pizza-holder.baked { animation:pizza-return .7s cubic-bezier(.34,1.56,.64,1); }
@keyframes pizza-return { 0%{transform:translateX(-50%) scale(.4); opacity:0} 100%{transform:translateX(-50%) scale(1); opacity:1} }
.build-scene.oven-glow .oven-holder { animation:oven-pulse 1s ease-in-out 2; }
@keyframes oven-pulse { 0%,100%{filter:none} 50%{filter:drop-shadow(0 0 26px rgba(245,165,74,.95)) brightness(1.15)} }
.build-hint { position:absolute; left:50%; transform:translateX(-50%); top:10px; z-index:9; max-width:min(340px,86vw); font-size:.95rem; }
.build-actions { position:absolute; left:50%; transform:translateX(-50%); bottom:max(16px, env(safe-area-inset-bottom)); z-index:10; display:flex; gap:12px; }
/* topping picker tiles */
.topping-list { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; }
@media (max-width:430px){ .topping-list { grid-template-columns:1fr 1fr; } }
.topping-tile { display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 8px; background:#fff; border:2px solid var(--border); border-radius:16px; min-height:44px; transition:transform .12s, border-color .15s; }
.topping-tile:active { transform:scale(.96); }
.topping-tile .t-art { width:54px; height:54px; display:block; }
.topping-tile .t-art svg { width:100%; height:100%; }
.topping-tile b { color:var(--navy); font-size:.9rem; }

.intro-cluster { position:absolute; left:4%; bottom:26%; z-index:4; display:flex; flex-direction:column; gap:16px; max-width:min(320px,60vw); }
.host-el { width:clamp(120px,22vw,200px); flex:none; aspect-ratio:1; animation:host-bob 2.6s ease-in-out infinite; }
@keyframes host-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
.host-el svg, .host-el img { width:100%; height:100%; border-radius:18px; }
.host-bubble { font-size:.98rem; }
.intro-panel { position:absolute; right:3%; bottom:4%; z-index:5; background:rgba(255,251,245,.92); border-radius:22px; box-shadow:var(--shadow); padding:20px 22px; text-align:center; width:min(360px, 60vw); }
.intro-panel h1 { font-size:clamp(1.5rem,4.6vw,2.2rem); }
.intro-panel .tagline { color:var(--body); font-size:.95rem; line-height:1.45; margin:8px 0 14px; }
.intro-panel .micro { margin-top:10px; font-size:.78rem; color:var(--muted); }
@media (max-width:620px) {
  .intro-cluster { left:4%; bottom:auto; top:10%; max-width:70vw; flex-direction:row; align-items:flex-end; }
  .host-el { order:-1; }
  .host-bubble { align-self:flex-start; }
  .intro-panel { left:50%; right:auto; transform:translateX(-50%); bottom:3%; width:min(420px, calc(100vw - 24px)); }
}