/* P041 Hotcoal Kitchen - phone build (m.html). Same images, same pieces, same bake; tap to add. */
.builder{display:grid;gap:.9rem;padding:8.2rem var(--gutter) 2rem}
.b-copy{display:contents}
.b-copy .tag{order:1}.b-copy .title{order:2;margin:.1rem 0 0;font-size:clamp(2.5rem,11vw,3.4rem)}.b-copy .lead{order:6;font-size:1.02rem;margin-top:.4rem}
.b-stage{order:4;display:grid;justify-items:center}
.board{width:min(100%,46svh)}
.fire-meter{margin-top:.6rem}
.help{order:7;margin:0;font-size:var(--fs-xs)}
.tray{order:5;grid-auto-flow:column;grid-auto-columns:minmax(11.5rem,62%);overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gutter) * -1);padding:.2rem var(--gutter) .6rem;scrollbar-width:none}
.tray::-webkit-scrollbar{display:none}
.tray li{scroll-snap-align:start}
.dish{flex-direction:row;align-items:center;gap:.6rem;padding:.5rem .7rem .5rem .5rem}
.dish-bowl{width:62px;height:62px}
.dish-n{top:1rem;right:1rem;transform:none}
.ticket{order:8}
.oven .facts{grid-template-columns:1fr}
.m-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem var(--gutter) max(.7rem,env(safe-area-inset-bottom));background:color-mix(in oklab,var(--paper) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.m-bar .mono{font-size:var(--fs-sm);letter-spacing:var(--track-mono)}
.m-bar b{font-size:1.15rem;font-variant-numeric:tabular-nums}
body{padding-bottom:5.5rem}
@media (max-height:780px){.builder{padding-top:7.7rem;gap:.7rem}.b-copy .title{font-size:2.35rem}.board{width:min(100%,40svh)}}

/* ---------- builder: shared ---------- */
.builder{position:relative}
.title{font:800 clamp(2.9rem,1.2rem + 4.6vw,6.4rem)/.9 var(--f-display);letter-spacing:var(--track-display);margin:.5rem 0 1rem}
.title .serif{font-weight:400;letter-spacing:-.02em}
.help{font-size:var(--fs-sm);color:var(--ink-3);margin:1.4rem 0 .9rem;max-width:34ch}
.tray{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.dish{position:relative;display:flex;align-items:center;gap:.9rem;width:100%;min-height:var(--tap);padding:.5rem .9rem .5rem .5rem;border-radius:var(--radius);border:1px solid var(--line);background:color-mix(in oklab,var(--paper) 70%,#fff);box-shadow:var(--spec);text-align:left;transition:transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast),background-color var(--dur-fast);touch-action:manipulation}
.dish:active{transform:scale(.97)}
.dish.is-full{opacity:.55}
.dish-bowl{position:relative;flex:none;width:76px;height:76px;border-radius:50%;background:var(--paper-2);border:1px solid var(--line);box-shadow:inset 0 3px 8px color-mix(in oklab,var(--c2) 18%,transparent),var(--spec);overflow:hidden}
.dish-bowl img{position:absolute;width:52%;height:auto;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(40,30,20,.3));transition:transform var(--dur) var(--ease-out)}
.dish-bowl img:nth-child(1){left:12%;top:16%;transform:rotate(-14deg)}
.dish-bowl img:nth-child(2){left:40%;top:30%;transform:rotate(22deg)}
.dish-bowl img:nth-child(3){left:20%;top:44%;transform:rotate(80deg)}
.dish[data-ing=basil] .dish-bowl img{width:44%}
.dish-t{display:grid;gap:.1rem;line-height:1.2}
.dish-t b{font-weight:600}
.dish-t .mono{font-size:var(--fs-xs);color:var(--ink-3);letter-spacing:var(--track-mono)}
.dish-n{position:absolute;right:.7rem;top:.55rem;font-size:var(--fs-xs);color:var(--c3);letter-spacing:var(--track-mono)}
.board{position:relative;aspect-ratio:1;border-radius:50%;filter:drop-shadow(0 22px 26px color-mix(in oklab,var(--c2) 26%,transparent)) drop-shadow(0 3px 4px color-mix(in oklab,var(--c2) 22%,transparent))}
.board-wood{position:absolute;inset:0;width:100%;height:100%;user-select:none}
.pie{position:absolute;inset:7.5%;border-radius:50%}
.pie-base{position:absolute;inset:0;width:100%;height:100%;user-select:none}
.pie-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.steam{position:absolute;left:-12%;top:-34%;width:124%;height:124%;pointer-events:none;z-index:2}
.drop-ring{position:absolute;inset:6%;border-radius:50%;border:2px dashed color-mix(in oklab,var(--c1) 80%,transparent);opacity:0;transition:opacity var(--dur-fast),transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast);pointer-events:none}
.is-dragging .drop-ring{opacity:.85}
.board.is-over .drop-ring{border-style:solid;border-color:var(--c1);transform:scale(1.02)}
/* firing: the canvas crossfades every piece to its own baked photo (app.js); the board glows */
.board.is-firing::after{box-shadow:0 0 90px 24px color-mix(in oklab,var(--c3) 38%,transparent)}
.fire-meter{min-height:1.4em;margin-top:1.1rem;text-align:center;font-size:var(--fs-sm);letter-spacing:var(--track-mono);color:var(--ink-2)}
.ticket{border:1px solid var(--line);border-radius:var(--radius);background:color-mix(in oklab,var(--paper) 72%,#fff);box-shadow:var(--spec);padding:1.25rem 1.25rem 1.4rem;display:grid;gap:.9rem;align-self:center}
.ticket-head .mono{font-size:var(--fs-xs);letter-spacing:var(--track-mono);color:var(--ink-3);text-transform:uppercase}
.t-title{font:700 var(--fs-h3)/1 var(--f-display);letter-spacing:var(--track-h);margin-top:.3rem}
.t-lines{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.t-line{display:grid;grid-template-columns:1fr auto auto;gap:.6rem;align-items:center;min-height:46px;border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.t-base{grid-template-columns:1fr auto}
.t-line i{font-style:normal;color:var(--ink-3)}
.t-line.is-new{animation:t-in .5s var(--ease-out)}
@keyframes t-in{from{background:color-mix(in oklab,var(--c3) 12%,transparent)}}
.t-rm{display:grid;place-items:center;width:44px;height:44px;margin-right:-.6rem;border-radius:50%;color:var(--ink-2)}
.t-rm svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}
.t-total{display:flex;justify-content:space-between;align-items:baseline;font-weight:600}
.t-total b{font-size:1.6rem;font-variant-numeric:tabular-nums}
.t-fire[aria-disabled=true],#mb-fire[aria-disabled=true]{opacity:.5;cursor:not-allowed}
.t-why{font-size:var(--fs-xs);color:var(--ink-3);min-height:1.2em}
.t-done{display:grid;gap:.6rem}
.t-done[hidden]{display:none}
.t-done .mono{font-size:var(--fs-sm);color:var(--c3)}
.oven .facts{list-style:none;padding:0;margin:clamp(2rem,5vw,4rem) 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap);border-top:1px solid var(--line)}
.oven .facts li{padding-top:1.4rem;display:grid;gap:.6rem;align-content:start}
.oven .num{font:800 clamp(2.4rem,1.6rem + 2.6vw,4.4rem)/1 var(--f-display);letter-spacing:var(--track-display);color:var(--c3)}
.oven .facts p{color:var(--ink-2);max-width:34ch}
.od-sum{margin-top:1rem;font-weight:600}
.ghost{position:fixed;left:0;top:0;width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;pointer-events:none;z-index:80;opacity:0;transition:opacity .15s}
.ghost.is-on{opacity:1}
.ghost img{position:absolute;width:52%;filter:drop-shadow(0 10px 10px rgba(40,30,20,.35))}
.ghost img:nth-child(1){left:8%;top:12%;transform:rotate(-14deg)}.ghost img:nth-child(2){left:42%;top:26%;transform:rotate(22deg)}.ghost img:nth-child(3){left:20%;top:46%;transform:rotate(80deg)}
.is-dragging,.is-dragging *{cursor:grabbing!important}
.m-bar[hidden]{display:none}
@media (prefers-reduced-motion: reduce){.board::after,.dish,.dish-bowl img{transition:none!important}.t-line.is-new{animation:none}}

.photo-cred{padding-block:0 3rem}.photo-cred p{font-size:var(--fs-xs);line-height:1.6;color:var(--ink-3);max-width:90ch;letter-spacing:.02em}

.t-fire[hidden]{display:none}

/* v3: a warm marble slab instead of the wood board; the styled props (slicer, chili flakes, fresh basil) arrive after the oven */
.board{border-radius:clamp(14px,2.2vw,26px)}
.board-wood{border-radius:inherit;object-fit:cover}
.board-props{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none;opacity:0;transform:scale(1.03);transition:opacity .9s var(--ease-out,ease) .5s,transform 1.1s var(--ease-out,ease) .5s}
.board.is-fired .board-props{opacity:1;transform:none}
.board.is-fired .pie-base{visibility:hidden}
@media (prefers-reduced-motion: reduce){.board-props{transition:none;transform:none}}