.shop { max-width:720px; margin:0 auto; }
.window { display:flex; align-items:center; gap:14px; background:#fff; border:4px solid var(--c3); border-radius:24px; padding:10px 14px; text-align:left; }
.customer { font-size:4.2rem; line-height:1; flex:none; }
.customer.happy { animation:cheer .6s 3; }
.story { font-size:clamp(1.15rem,4.4vw,1.6rem); font-weight:bold; }

.plate { margin:14px 0 8px; background:radial-gradient(#fff,#f3e3c3); border:5px solid #d9b77a; border-radius:36px; padding:10px 12px; }
.plate.pop { animation:platepop .25s; }
@keyframes platepop { 50% { transform:scale(1.03); } }
.row { display:flex; align-items:center; gap:8px; min-height:74px; }
.rowlab { flex:none; width:74px; font-size:.85rem; font-weight:bold; color:var(--c4); text-align:center; }
.stuff { display:flex; flex-wrap:wrap; gap:4px; flex:1; justify-content:flex-start; min-height:60px; align-items:center; }
.cookie, .box { cursor:pointer; user-select:none; -webkit-user-select:none; touch-action:manipulation; line-height:1; animation:bounce-in .25s; }
.cookie { font-size:2.3rem; }
.box { position:relative; font-size:3rem; }
.box b { position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); font-size:1.1rem; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.7); }
.plate.eat .cookie:hover { transform:scale(1.15); }
@keyframes bounce-in { from { transform:scale(.3); opacity:0; } to { transform:scale(1); opacity:1; } }

.action { min-height:78px; display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:6px; }
.oven { font:inherit; font-size:1.5rem; font-weight:bold; padding:14px 26px; border-radius:20px; border:0; color:#fff; cursor:pointer;
  background:linear-gradient(#ff8a65,#e64a19); box-shadow:0 5px 0 #a8321a; touch-action:manipulation; }
.oven:active { transform:translateY(3px); box-shadow:0 2px 0 #a8321a; }
.oven[hidden] { display:none; }
.dots { font-size:1.8rem; letter-spacing:4px; min-height:1.2em; }
.ask[hidden] { display:none; }
.story-intro { font-size:1.15rem; }