/* A little pastry bench, with the bakery still in view. */
.prep-content{padding:18px;overflow-x:hidden}
.prep-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:19px 0 3px}
.prep-heading h2{font:32px/1.15 Georgia,serif;margin:5px 0 0;color:#624334}
.prep-heading .eyebrow{font-size:10px;letter-spacing:.8px}
.prep-heading .icon-btn{color:#917354;background:#f0e3c9;flex:none}
.prep-intro{font-size:14px;line-height:1.5;color:var(--muted);margin:7px 0 16px}
.prep-production{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:2px 0 14px;border-bottom:1px solid var(--line)}
.prep-production>div{display:flex;align-items:center;gap:8px;min-width:0}
.prep-production>div>.icon{flex:none;color:#9e7752;width:25px;height:25px}
.prep-production>div>div{flex:1;min-width:0}
.prep-production span{display:flex;align-items:baseline;justify-content:space-between;gap:5px;margin-bottom:6px;font-size:13px}
.prep-production small{font-size:11px;color:#886e55;text-align:right;font-variant-numeric:tabular-nums}
.prep-production .bar{height:5px;background:#e7d9be}
.prep-production .bar i{background:#9eb397}
.prep-order{background:#f7ebd3;border:1px solid #dbc29b;border-radius:16px;padding:13px 14px;box-shadow:0 2px 0 #e5d0ad66;margin-bottom:15px}
.prep-order-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}
.prep-order-heading h3{font:21px/1.2 Georgia,serif;margin:3px 0 0}
.prep-order-heading .eyebrow{font-size:10px;letter-spacing:.6px}
.prep-reward{font-weight:800;font-size:17px;color:#89602c;white-space:nowrap;background:#f7d98d;padding:6px 9px;border-radius:10px}
.prep-order-bottom{display:flex;align-items:center;gap:10px;margin-top:8px}
.prep-requirements{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.prep-requirement{display:flex;align-items:center;gap:6px;min-width:0}
.prep-requirement>.prep-art{width:45px;height:45px;flex:none}
.prep-requirement>div{min-width:0}
.prep-requirement span:not(.prep-art){display:block;font-size:12px;color:#866950}
.prep-requirement strong{font-size:15px;font-variant-numeric:tabular-nums}
.prep-requirement strong.ready{color:#4e7c57}
.prep-serve{display:flex;align-items:center;justify-content:center;gap:6px;flex:none;min-height:44px;border-radius:11px;background:#52775c;color:#fff8e9;font-weight:700;font-size:14px;padding:10px 15px;box-shadow:0 2px 0 #38543f}
.prep-serve .icon{width:17px;height:17px}
.prep-serve:disabled{background:#e0d2b8;color:#826e55;box-shadow:0 2px 0 #c9b99a}
.prep-board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;background:#e7cda7;padding:9px;border:1px solid #d7b183;border-radius:18px;box-shadow:inset 0 1px 4px #97643920,0 3px 0 #cda87555;user-select:none;-webkit-user-select:none}
.prep-cell{position:relative;display:block;min-width:0;aspect-ratio:1;background:linear-gradient(145deg,#fffaf0,#f5e8d0);border:1px solid #dfcba9;border-radius:12px;padding:5px;box-shadow:0 2px 3px #88603312;isolation:isolate;touch-action:none;-webkit-tap-highlight-color:transparent}
.prep-cell.is-empty{background:#eedcbd;box-shadow:inset 0 1px 4px #98754412;border-color:#dbbf95}
.prep-cell.is-selected{outline:3px solid #ae5b68;outline-offset:-2px;background:#ffefd4}
.prep-cell.is-match{outline:2px solid #d4a14e;outline-offset:-1px;box-shadow:0 0 10px #ffcf74}
.prep-cell.is-drop-target{outline:3px solid #628e73;outline-offset:-2px;background:#e0ead6}
.prep-cell.is-dragging>.prep-art{opacity:.25}
.prep-art{display:block;width:100%;aspect-ratio:1;background-image:url('./assets/prep-treats.png');background-repeat:no-repeat;mix-blend-mode:multiply;filter:brightness(1.02);pointer-events:none}
.prep-tier{position:absolute;bottom:3px;right:4px;display:grid;place-items:center;min-width:14px;height:14px;border-radius:50%;font-size:9px;font-weight:800;line-height:1;color:#8c6b48;background:#fff7e9dd;pointer-events:none}
.prep-basket{background:linear-gradient(145deg,#ffecb5,#f0ce89);border-color:#cda458;touch-action:manipulation}
.prep-plus{position:absolute;right:3px;bottom:3px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#628068;border:2px solid #fff3cf;color:white;font:bold 18px/1 Arial;pointer-events:none;box-shadow:0 1px 3px #72582c55}
.prep-basket.is-refilling{filter:saturate(.5)}
.prep-selection{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:75px;padding:13px 2px}
.prep-selection>div{min-width:0}
.prep-selection strong{display:block;font-size:14px}
.prep-selection span{display:block;font-size:12px;line-height:1.45;color:#8c735c;margin-top:4px}
.prep-sell{flex:none;min-height:44px;font-size:12px;color:#895248;background:#f1e2cc;border:1px solid #dfc6a6;border-radius:10px;padding:8px 10px}
.prep-sell[hidden]{display:none}
.prep-pantry{background:#f6ecd9;border-radius:14px;padding:12px;border:1px solid #e8d7b8}
.prep-source{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.prep-source button{display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px;padding:3px 7px;border-radius:9px;border:1px solid #e4d2b1;background:#fff8e9;color:#876b53;font-size:13px;font-weight:600;isolation:isolate}
.prep-source button[aria-pressed=true]{border-color:#99485a;box-shadow:0 0 0 1px #99485a;color:#7f3547;background:#f5e4d7}
.prep-source .prep-art{width:32px;height:32px;flex:none}
.prep-refill{display:flex;align-items:center;justify-content:space-between;gap:5px;margin:11px 0;font-size:12px;color:#7e664e}
.prep-refill>span{display:flex;align-items:center;gap:5px}
.prep-refill .icon{width:17px;height:17px}
.prep-refill small{font-size:11px;font-variant-numeric:tabular-nums}
.prep-generate{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;font-size:14px}
.prep-generate .icon{width:17px;height:17px}
.prep-generate>span{font-size:12px;font-weight:400}
.prep-footer{display:flex;justify-content:space-between;align-items:center;gap:9px;margin-top:10px;flex-wrap:wrap}
.prep-footer .text-button{display:flex;align-items:center;gap:5px;min-height:44px;font-size:12px;padding:0}
.prep-footer .icon{width:17px;height:17px}
.prep-footer>span{font-size:11px;color:#967858}
.prep-note{font-size:12px;line-height:1.5;color:#8a735d;margin:5px 0 0}
.prep-drag-ghost{position:fixed;width:80px;height:80px;padding:7px;transform:translate(-50%,-60%);border-radius:14px;background:#fff2d8;border:2px solid #d4ab67;box-shadow:0 9px 24px #72462b50;pointer-events:none;z-index:50;isolation:isolate}
.prep-collection{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:15px 0 22px}
.prep-collection>div{background:#f5e7cb;border:1px solid #e5cfa7;border-radius:12px;padding:8px;text-align:center;isolation:isolate}
.prep-collection strong{display:block;font-size:12px;line-height:1.4;margin-top:5px}
.prep-collection small{display:block;font-size:10px;color:#917655;margin-top:4px}
.prep-unknown{display:grid;place-items:center;aspect-ratio:1;color:#b29a77}
.prep-unknown .icon{width:30px;height:30px}
.prep-collection .undiscovered{background:#f0e7d5;color:#9b8770}
.prep-locked p{line-height:1.7;color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[data-prep]:focus-visible{outline:3px solid #438477;outline-offset:3px}
@media(min-width:900px){.bottom-nav{padding-left:15%;padding-right:15%}}
@media(max-width:760px){.prep-mode .scene-wrap{aspect-ratio:1254/650}.prep-mode .scene-caption{display:none}.prep-content{padding:14px 16px 24px}.prep-heading{margin-top:14px}.prep-heading h2{font-size:30px}.prep-production{padding-bottom:11px}.prep-board{gap:6px;padding:8px}.prep-order{margin-bottom:13px}.prep-cell{border-radius:10px;padding:4px}}
@media(max-width:360px){.prep-content{padding-left:12px;padding-right:12px}.prep-board{gap:4px;padding:6px}.prep-order{padding:11px}.prep-order-heading h3{font-size:19px}.prep-reward{font-size:15px}.prep-selection{gap:5px}.prep-sell{padding:7px}.prep-production{gap:12px}.prep-production span{font-size:12px}.prep-production small{font-size:10px}.prep-plus{width:19px;height:19px}}
@media(forced-colors:active){.prep-cell{border:1px solid ButtonText}.prep-cell.is-selected,.prep-cell.is-match{outline:3px solid Highlight}}