.story-puzzle{box-sizing:border-box;width:min(710px,calc(100vw - 24px));max-height:calc(100svh - 24px);overflow:auto;padding:22px;color:#252525;background:#c6c6c6;border:4px solid #171717;box-shadow:inset 4px 4px #f5f5f5,inset -4px -4px #555,0 8px #0008;font-family:var(--pixel-font,monospace);image-rendering:pixelated}.story-puzzle *{box-sizing:border-box}.story-puzzle h2,.story-puzzle p,.story-puzzle figure{margin:0}.story-puzzle-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}.story-puzzle-header h2{font:inherit;font-size:22px;line-height:1.35;text-shadow:2px 2px #fff;outline:none}.story-puzzle-header p{font-size:11px;margin-top:7px;line-height:1.6;color:#454545}.story-puzzle-instruction{font-size:12px;line-height:1.8;margin-bottom:17px!important;max-width:640px}.sp-button,.sp-square{font:inherit;color:white;text-shadow:2px 2px #363636;background:#777;border:3px solid #202020;box-shadow:inset 2px 2px #b8b8b8,inset -2px -2px #464646,0 2px #333;border-radius:0;cursor:pointer;touch-action:manipulation}.sp-button{font-size:11px;line-height:1.5;min-height:43px;padding:8px 15px}.sp-square{width:39px;height:39px;font-size:26px;line-height:1;flex-shrink:0}.sp-button:hover:not(:disabled),.sp-square:hover{background:#8993a8}.story-puzzle button:focus-visible{outline:3px solid #fff0a2;outline-offset:3px}.story-puzzle button:disabled{cursor:default}.sp-button:disabled{opacity:.45}.story-puzzle-board{padding:18px 13px;background:#999;border:3px solid;border-color:#555 #eee #eee #555;min-width:0}.story-puzzle .puzzle-status{font-size:11px;line-height:1.8;min-height:65px;margin:0;padding:16px 2px 8px;color:#303030}.story-puzzle-footer{display:flex;justify-content:space-between;gap:12px;border-top:2px solid #aaa;padding-top:14px}.story-puzzle-tools{display:flex;gap:10px}.sp-done{background:#477344;box-shadow:inset 2px 2px #84a77a,inset -2px -2px #2b4527;margin-left:auto}.story-solved .puzzle-status{color:#244d22}.story-solved .story-puzzle-tools{display:none}.story-hint{outline:4px solid #ffed87!important;outline-offset:1px!important;z-index:1}
.sp-floor-layout{display:flex;align-items:center;justify-content:center;gap:28px}.sp-floor-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;width:278px;max-width:73%;min-width:0}.sp-floor-tile{font:inherit;aspect-ratio:1;min-width:0;padding:0;display:grid;place-items:center;border:3px solid;border-color:#979797 #292929 #292929 #979797;background:#41464c;color:#181b20;box-shadow:inset 0 0 0 2px #51565c;font-size:24px;cursor:pointer;touch-action:manipulation}.sp-floor-tile.lit{background:#d998d4;color:#ffecfb;border-color:#ffe1fc #6a406d #6a406d #ffe1fc;box-shadow:inset 0 0 0 3px #bd76b9}.sp-floor-goal{width:72px;flex-shrink:0}.sp-goal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;background:#555;border:2px solid #303030}.sp-goal-grid span{aspect-ratio:1;background:#41464c;border:1px solid #777}.sp-goal-grid .lit{background:#e7a2df;border-color:#ffe1fc}.sp-floor-goal figcaption{font-size:9px;line-height:1.6;text-align:center;margin-top:9px}
.sp-order-slip{background:#eee7cc;border:2px solid #78694d;padding:10px 15px;display:flex;justify-content:space-between;gap:10px;font-size:10px;line-height:1.7;color:#42392c;box-shadow:3px 3px #514b3c40;margin-bottom:18px}.sp-order-slip strong{font-weight:400;text-align:right}.sp-grill-scene{display:flex;align-items:center;justify-content:center;gap:22px}.sp-raw-tray{width:115px;flex-shrink:0;display:flex;align-items:center;flex-direction:column;gap:10px}.sp-raw-tray .sp-button{width:100%;padding:6px}.sp-raw-tray svg{display:block;width:67px;height:50px;margin:auto}.sp-raw-tray span{display:block;font-size:9px;line-height:1.6;text-align:center}.sp-grill-wrap{width:min(100%,300px);min-width:0}.sp-grill{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;background:repeating-linear-gradient(0deg,#393535 0 6px,#17191a 6px 10px);border:8px solid;border-color:#676b6e #282a2c #191b1d #555b60;padding:17px 12px;box-shadow:0 5px #242424,inset 0 -6px #823a21}.sp-grill-piece{min-width:0;padding:6px 2px 9px;border:2px solid #aaaaaa40;background:#20202065;color:#eee;font:inherit;cursor:pointer;touch-action:manipulation;position:relative}.sp-grill-piece svg{display:block;width:100%;height:auto}.sp-grill-piece>span:not(.sp-empty-grill){display:block;font-size:8px;line-height:1.5;min-height:25px}.sp-grill-piece:disabled{opacity:.6}.sp-grill-piece.selected{border-color:#9ee277;box-shadow:inset 0 0 0 2px #4c8331}.sp-empty-grill{display:grid;place-items:center;aspect-ratio:4/3;color:#aaa;font:24px monospace}.sp-heat{width:100%;margin-top:11px;background:#965132;box-shadow:inset 2px 2px #d49360,inset -2px -2px #65351f}.sp-grill-help{font:11px/1.8 ui-monospace,monospace;text-align:center;margin:15px auto!important;max-width:430px}.sp-serving{display:flex;justify-content:center;gap:20px}.sp-serving-button{display:flex;align-items:center;gap:7px;background:#b3aca0;border:3px solid;border-color:#e5dfd2 #59534a #59534a #e5dfd2;padding:5px 10px;color:#252525;font:inherit;font-size:9px;line-height:1.8;cursor:pointer;touch-action:manipulation;min-width:0;flex:1;max-width:230px}.sp-serving-button svg{display:block;width:74px;flex-shrink:0}.sp-serving-button b{display:block;font-weight:400}.sp-serving-button:disabled{opacity:.55}
.sp-windshield{width:min(100%,365px);margin:auto;background:#283846;border:9px solid;border-color:#67717b #282c33 #20252a #53616b;padding:11px 13px 23px;position:relative;box-shadow:0 8px #24272c}.sp-glass-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;background:#405461}.sp-glass-tile{aspect-ratio:1;position:relative;min-width:0;padding:0;background:#758b8f;border:1px solid #53696d;cursor:pointer;touch-action:manipulation;color:#fce9a1;font:18px var(--pixel-font,monospace)}.sp-glass-tile:disabled{opacity:1}.sp-glass-tile.available{border:2px solid #f2d486}.sp-glass-tile.clean{background:#a5cddd;border-color:#7aacc1}.sp-glass-tile.current{box-shadow:inset 0 0 0 3px #e9f2ed}.sp-mud{position:absolute;left:19%;top:25%;width:61%;height:49%;background:#675238;box-shadow:5px -5px #675238,-4px 5px #675238,3px 8px #7c6547}.sp-mud:after{content:'';position:absolute;left:28%;top:22%;width:31%;height:34%;background:#957b56}.sp-glass-tile.clean .sp-mud{display:none}.sp-glass-marker{position:relative;z-index:1;text-shadow:2px 2px #34342b}.sp-wipers{position:absolute;bottom:8px;left:15%;width:29%;height:4px;background:#171b20;transform:rotate(-14deg);box-shadow:115px 27px #171b20}.sp-car-dashboard{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:365px;margin:17px auto 0;font-size:10px;line-height:1.6}
@media(max-width:600px){.story-puzzle{padding:17px 14px;width:calc(100vw - 18px);max-height:calc(100svh - 18px)}.story-puzzle-header h2{font-size:18px}.story-puzzle-header p{font-size:9px}.story-puzzle-instruction{font-size:10px;line-height:1.8}.story-puzzle-board{padding:14px 9px}.story-puzzle .puzzle-status{font-size:10px;min-height:65px}.sp-button{font-size:10px;padding:8px 12px}.sp-floor-layout{gap:16px}.sp-floor-grid{gap:5px}.sp-floor-goal{width:58px}.sp-floor-goal figcaption{font-size:8px}.sp-order-slip{padding:8px;font-size:8px;flex-direction:column;gap:3px;margin-bottom:14px}.sp-order-slip strong{text-align:left}.sp-grill-scene{gap:12px}.sp-raw-tray{width:85px}.sp-raw-tray svg{width:52px;height:39px}.sp-raw-tray span{font-size:8px}.sp-grill{gap:7px;border-width:6px;padding:10px 5px}.sp-grill-piece>span:not(.sp-empty-grill){font-size:7px;line-height:1.8;min-height:25px}.sp-heat{font-size:8px;padding:7px 3px;min-height:36px}.sp-grill-help{font-size:10px;line-height:1.7}.sp-serving{gap:9px}.sp-serving-button{padding:5px;font-size:8px;flex-direction:column;gap:0;line-height:1.6}.sp-serving-button svg{width:61px}.sp-windshield{padding:8px 8px 19px;border-width:7px}.sp-glass-grid{gap:3px}.sp-glass-tile{font-size:15px}.sp-mud{box-shadow:3px -3px #675238,-2px 3px #675238,2px 4px #7c6547}.sp-car-dashboard{font-size:9px}.sp-wipers{left:13%;width:28%;box-shadow:90px 23px #171b20}}
@media(max-width:360px){.story-puzzle{padding:14px 11px}.story-puzzle-header{gap:10px}.story-puzzle-header h2{font-size:16px}.sp-square{width:34px;height:34px;font-size:23px}.story-puzzle-instruction{font-size:9px}.story-puzzle-board{padding:11px 7px}.sp-floor-layout{gap:12px}.sp-floor-goal{width:50px}.sp-raw-tray{width:72px}.sp-raw-tray .sp-button{font-size:8px}.sp-grill-scene{gap:8px}.sp-grill-piece>span:not(.sp-empty-grill){font-size:6px}.sp-raw-tray span{font-size:7px}.sp-order-slip{font-size:7px}.sp-wipers{box-shadow:75px 19px #171b20}}
@media(prefers-reduced-motion:reduce){.story-puzzle *{transition:none;animation:none}}

/* Short, forgiving puzzles keep the story moving. */
.story-puzzle{display:flex;flex-direction:column;overflow:hidden}.story-puzzle-header,.story-puzzle-instruction,.story-puzzle-footer{flex-shrink:0}.story-puzzle-board{overflow:auto;min-height:0;flex:0 1 auto}.story-puzzle .puzzle-status{flex-shrink:0;min-height:48px}.story-puzzle-footer{align-items:center;gap:8px;flex-wrap:wrap;background:#c6c6c6}.story-puzzle-tools{gap:8px}.sp-skip{background:#636975;box-shadow:inset 2px 2px #a1a8b3,inset -2px -2px #373d47;margin-left:auto}.story-solved .sp-skip{display:none}.sp-note-sequence{display:flex;justify-content:center;gap:22px;margin:0 0 22px;font-size:19px;color:#353535}.sp-note-sequence span{border-bottom:3px solid #777;padding:3px 12px}.sp-note-pads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;max-width:380px;margin:auto}.sp-note-pad{font-size:32px;min-height:70px}.sp-note-pad.played{background:#87af77;color:#263d21;border-color:#b4d7a7 #426039 #426039 #b4d7a7}.sp-easy-glass{grid-template-columns:repeat(3,minmax(0,1fr))}.sp-easy-glass .sp-glass-tile{min-height:58px}
@media(max-width:600px){.story-puzzle-footer{gap:7px;padding-top:10px}.story-puzzle-footer .sp-button{font-size:9px;padding:7px 9px;min-height:40px}.story-puzzle .puzzle-status{padding-top:10px;min-height:44px}.sp-note-sequence{font-size:15px;gap:12px;margin-bottom:17px}.sp-note-pads{gap:10px}.sp-note-pad{font-size:25px;min-height:58px}}

/* A short sample-cart shift, drawn in the same block style as the world. */
.sp-sample-scene{max-width:540px;margin:auto}.sp-sample-queue{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:end;margin-bottom:12px}.sp-sample-customer{min-width:0;background:#87969e;border:3px solid;border-color:#c9d3d6 #4a5963 #394752 #b1bfc5;padding:7px 7px 9px;color:#17252d;font:10px/1.5 var(--pixel-font,monospace);cursor:pointer;touch-action:manipulation}.sp-sample-customer svg{display:block;width:100%;max-height:146px;image-rendering:pixelated}.sp-sample-customer span{display:block;min-height:30px;padding-top:5px}.sp-sample-customer.served{background:#a6bda3;border-color:#d6e2cd #658260 #566b50 #c0d1b7;color:#2e4a2b;opacity:1}.sp-sample-customer:hover:not(:disabled){background:#9eabb5}.sp-sample-cart{position:relative;margin:0 10px 24px;border:4px solid #46535d;background:#d2d8d8;box-shadow:3px 4px #4c555c}.sp-sample-tray{display:flex;justify-content:center;gap:10px;padding:4px 16px;border-bottom:4px solid #747f86;background:#eef1e9;min-height:65px}.sp-sample-cup{width:58px;display:block}.sp-sample-cup svg{width:100%;height:auto;display:block}.sp-sample-cup.empty{opacity:.23}.sp-sample-cart-front{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#37688f;color:#f3f7e9;border-top:3px solid #799eb8;min-height:55px;padding:10px 15px;font-size:12px;line-height:1.6;text-shadow:2px 2px #23465e}.sp-cart-wheel{position:absolute;bottom:-14px;background:#242b32;width:18px;height:14px;box-shadow:inset 3px 0 #48515a}.sp-cart-wheel.left{left:15px}.sp-cart-wheel.right{right:15px}.sp-sample-prep{display:block;margin:auto;min-width:180px}.sp-sample-prep:disabled{opacity:.5}
@media(max-width:600px){.sp-sample-queue{gap:8px;margin-bottom:9px}.sp-sample-customer{padding:5px 2px;font-size:8px}.sp-sample-customer svg{max-height:105px}.sp-sample-customer span{min-height:27px;line-height:1.5}.sp-sample-cart{margin:0 4px 22px}.sp-sample-tray{min-height:51px;padding:2px 8px;gap:7px}.sp-sample-cup{width:45px}.sp-sample-cart-front{font-size:9px;padding:8px 10px;min-height:45px}.sp-sample-prep{min-width:160px;font-size:10px}}
@media(max-height:650px){.sp-sample-customer svg{max-height:90px}.sp-sample-customer span{min-height:20px}.sp-sample-tray{min-height:42px}.sp-sample-cup{width:37px}.sp-sample-cart-front{min-height:39px}.sp-sample-cart{margin-bottom:18px}.sp-sample-prep{min-height:38px}}

/* A visible pattern and a small route add a little challenge without a timer. */
.sp-note-pads{grid-template-columns:repeat(4,minmax(0,1fr));max-width:430px;gap:12px}.sp-note-sequence{gap:12px}.sp-note-sequence span{padding:3px 9px}.sp-note-sequence .note-done{color:#355a2e;border-color:#74a461}.sp-note-sequence .note-current{border-color:#f4d68b;background:#a9a38d}.sp-route-glass{grid-template-columns:repeat(3,minmax(0,1fr))}.sp-route-glass .sp-glass-tile{min-height:55px}.sp-note-pad{background:#54617a;color:#f8e6bf}.sp-note-pad.lit{background:#d998d4;color:#ffecfb}
@media(max-width:600px){.sp-note-pads{gap:7px}.sp-note-pad{font-size:24px;min-height:52px}.sp-note-sequence{gap:6px;font-size:15px}.sp-note-sequence span{padding:3px 7px}.sp-route-glass .sp-glass-tile{min-height:46px}}