@import url('');
:root{--ink:#594044;--muted:#937779;--cream:#fff9ed;--pink:#f7b4b5;--peach:#ffd6ba;--rose:#cf6378;--brown:#9b6258;--grid:6;--cell:62px;--arrow:31px}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{font-family:Trebuchet MS,Verdana,sans-serif;color:var(--ink);background:radial-gradient(ellipse at 22% 15%,#fff8db 0,transparent 37%),radial-gradient(ellipse at 90% 74%,#f8c7d1 0,transparent 47%),linear-gradient(145deg,#fce1cf,#ffe9dd 48%,#f8d4cf);overflow-x:hidden}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #8057a0;outline-offset:3px}.sprinkles{position:fixed;inset:0;pointer-events:none;opacity:.2;background-image:radial-gradient(#f5a4a5 1.3px,transparent 1.3px),radial-gradient(#dca65e 1px,transparent 1px);background-size:43px 43px,67px 67px;background-position:7px 11px,28px 40px}.app{position:relative;max-width:1320px;margin:auto;padding:22px 24px 15px}.masthead{display:flex;align-items:center;gap:18px;padding:7px 10px 25px}.brandmark{height:75px;width:75px;border:5px solid white;border-radius:24px;background:#ffccb5;box-shadow:0 7px 0 #eaa6a1,0 13px 20px #bc868039;display:grid;place-items:center;transform:rotate(-7deg)}.brand-cookie{width:47px;height:47px;border-radius:50%;background:#d89856;border:4px solid #b97b49;position:relative;box-shadow:inset 4px 5px #edbc7c}.brand-cookie i{position:absolute;width:7px;height:7px;background:#704743;border-radius:50%}.brand-cookie i:nth-child(1){left:9px;top:9px}.brand-cookie i:nth-child(2){right:9px;top:15px}.brand-cookie i:nth-child(3){left:17px;bottom:7px}.brand-cookie i:nth-child(4){left:7px;bottom:17px}.eyebrow,.flourish{font-weight:900;font-size:11px;letter-spacing:2.5px;color:#ad6d7a;margin:0 0 4px}.masthead h1{font-family:Georgia,serif;font-size:clamp(30px,4vw,49px);letter-spacing:-1.8px;line-height:1;margin:0;color:#794c5c;text-shadow:0 3px #fff8ed}.masthead h1 em{color:#dd7889;font-style:italic}.tagline{color:#946c71;font-size:12px;margin:7px 0 0}.header-actions{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}.softbtn{border:2px solid #eac4b9;color:#966472;background:#fff9f1;padding:10px 14px;border-radius:13px;font-size:12px;font-weight:bold;box-shadow:0 3px #e6b4a9}.softbtn:hover{background:#fff0e7;transform:translateY(-1px)}.layout{display:grid;grid-template-columns:minmax(205px,1fr) minmax(450px,1.8fr) minmax(200px,1fr);gap:20px;align-items:start}.panel{background:#fffaf1ee;border:4px solid #fff;border-radius:24px;box-shadow:0 9px 0 #efb8ab,0 14px 30px #bc797a30;padding:23px 20px;min-height:480px}.flourish{padding-bottom:12px;border-bottom:2px dashed #f0c6be}.level-number{display:flex;justify-content:space-between;align-items:center;padding:22px 0 14px}.level-number span{font-size:14px;font-weight:900;color:#b0747f}.level-number strong{font-family:Georgia,serif;font-size:63px;line-height:.9;color:#d77d90}.progress-title{display:flex;justify-content:space-between;gap:7px;font-size:12px;color:#a07478;font-weight:bold}.progress-title strong{color:#b96776}.meter{height:12px;margin-top:11px;background:#f5ddd5;border-radius:15px;overflow:hidden;border:2px solid #f0c9bd}.meter>div{height:100%;width:0;background:linear-gradient(90deg,#f5ac84,#e97f8f);border-radius:15px;transition:width .3s}.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:24px 0}.stat{background:#fff0e9;padding:13px 8px;text-align:center;border-radius:16px;border:2px solid #f6d8cb}.stat span{display:block;color:#9c7a7d;font-size:11px}.stat b{font-size:24px;color:#ac6478}.tip-card{background:#f8e9da;border-radius:16px;padding:14px;display:flex;align-items:center;gap:10px;border:2px dashed #efc2b0}.tip-card p{font-size:12px;line-height:1.55;color:#986f72;margin:0}.tinycookie{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 25% 30%,#75554f 3px,transparent 4px),radial-gradient(circle at 70% 70%,#75554f 3px,transparent 4px),#da9c69;border:3px solid #bb784f}.side-actions{margin-top:20px;display:flex;gap:9px;flex-wrap:wrap}.side-actions button{flex:1;min-width:90px}.board-area{min-width:0;text-align:center}.board-banner{min-height:43px;display:flex;gap:12px;align-items:center;justify-content:center;color:#a45d78;font-size:14px;font-weight:900;background:#fff5ebd9;border:3px solid #fff;border-radius:17px;margin-bottom:18px;box-shadow:0 5px #ebc5b9;padding:9px}.banner-dot{width:7px;height:7px;background:#eaa2ad;border-radius:50%}.board-shell{display:flex;justify-content:center}.board-frame{--board-size:calc(var(--cell)*6);position:relative;background:repeating-linear-gradient(45deg,#f9d8a9,#f9d8a9 11px,#f4ca96 11px,#f4ca96 22px);padding:13px;border:7px solid #fff6df;border-radius:21px;box-shadow:0 9px 0 #cf9d80,0 15px 24px #ae706d44;width:max-content;margin:32px}.board{width:var(--board-size);height:var(--board-size);display:grid;grid-template-columns:repeat(6,var(--cell));grid-template-rows:repeat(6,var(--cell));gap:0;background:#f7e6ce;border:5px solid #d69c7e;box-sizing:content-box;border-radius:11px;overflow:hidden}.slot{display:flex;justify-content:center;align-items:center;position:relative;background:#ffedd8;border:1px solid #efcfaf}.slot:nth-child(odd){background:#ffe7d0}.slot.match{background:#fff9b4;animation:blink .22s linear infinite}.cookie{width:85%;height:85%;position:relative;border-radius:50%;flex-shrink:0;box-shadow:inset -5px -7px #00000014,inset 4px 5px #ffffff70,0 3px 1px #9f6e6140;transition:transform .14s;display:grid;place-items:center}.cookie:before,.cookie:after,.cookie span:before,.cookie span:after{content:'';position:absolute;border-radius:50%}.c0{background:#ce945f;border:4px solid #ae754d}.c0:before{width:17%;height:17%;background:#784b42;top:20%;left:27%;box-shadow:15px 18px #784b42,24px -1px #784b42,1px 24px #784b42}.c0:after{width:8%;height:8%;background:#80554a;left:56%;top:45%}.c1{background:#eeb4b7;border:4px solid #de8f9f}.c1:before{width:64%;height:64%;left:18%;top:18%;border:4px dashed #fff9ed;background:#f9d9d9}.c1:after{width:25%;height:25%;left:39%;top:37%;background:#e98da1}.c2{background:#e7ae5e;border:4px solid #cb8953;border-radius:30%}.c2:before{width:60%;height:60%;left:20%;top:20%;background:#fff0ca;border-radius:30%;box-shadow:inset 0 0 0 4px #d5a46d}.c2:after{width:15%;height:15%;left:43%;top:43%;background:#bf794d}.c3{background:#a789b7;border:4px solid #8f6da4}.c3:before{inset:16%;border:3px solid #e7d7f4;background:#c6b0d0}.c3:after{width:19%;height:19%;background:#f7e5ff;top:21%;left:25%;box-shadow:14px 19px #f7e5ff,21px -1px #f7e5ff}.c4{background:#bcce91;border:4px solid #96ab74}.c4:before{inset:16%;background:#dceaba;border-radius:48%}.c4:after{width:8%;height:45%;left:45%;top:27%;border-radius:3px;background:#85a078;transform:rotate(45deg);box-shadow:7px 0 #85a078}.slot:hover .cookie{transform:scale(1.055)}.arrowbar{position:absolute;display:grid;gap:0;z-index:2}.top-arrows,.bottom-arrows{grid-template-columns:repeat(6,var(--cell));left:calc(20px + 5px);width:var(--board-size)}.top-arrows{top:-33px}.bottom-arrows{bottom:-33px}.left-arrows,.right-arrows{grid-template-rows:repeat(6,var(--cell));top:calc(20px + 5px)}.left-arrows{left:-33px}.right-arrows{right:-33px}.arrowbar button{justify-self:center;align-self:center;background:#fff7ee;border:2px solid #e6b6a4;border-radius:10px;color:#b46a78;font-weight:900;font-size:17px;width:29px;height:29px;line-height:21px;padding:0;box-shadow:0 3px #dba99a;transition:transform .1s,background .1s}.arrowbar button:hover:not(:disabled){transform:scale(1.14);background:#ffe0db}.arrowbar button:disabled{opacity:.5;cursor:not-allowed}.board-foot{font-size:12px;color:#986e72;display:flex;justify-content:space-between;gap:10px;max-width:450px;margin:7px auto}.combo{font-weight:900;color:#d27d8d}.rightpanel h2{font-family:Georgia,serif;color:#9f5c72;font-size:26px;margin:21px 0 12px}.rightpanel h3{font-family:Georgia,serif;color:#9f5c72;font-size:18px;margin:12px 0 4px}.rightpanel p{color:#9c7978;font-size:13px;line-height:1.6}.cookie-examples{display:flex;gap:4px;margin:16px 0}.cookie-examples .cookie{width:42px;height:42px}.divider{border-top:2px dashed #f0c6be;margin:20px 0}.best{display:flex;flex-direction:column;gap:6px}.best span{font-size:12px;color:#a67e83}.best strong{font-family:Georgia,serif;font-size:33px;color:#c46f85}.rightpanel .mini{font-size:11px}.footer{text-align:center;color:#b78488;font-size:10px;letter-spacing:2.5px;margin:32px 0}.overlay{position:fixed;inset:0;z-index:20;background:#5038479c;display:grid;place-items:center;padding:20px;backdrop-filter:blur(3px)}.overlay[hidden]{display:none}.modal{position:relative;width:min(520px,100%);max-height:90vh;overflow-y:auto;border:6px solid #fff5e8;border-radius:28px;background:#fffaf1;padding:35px;box-shadow:0 13px 0 #d99b96,0 25px 55px #0003}.modal h2{font-family:Georgia,serif;font-size:32px;color:#ae6879;margin:10px 0 20px}.modal p,.modal li{font-size:14px;color:#805f64;line-height:1.65}.modal ul{padding-left:23px}.modal-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:20px}.primary{border:0;background:linear-gradient(#e68f99,#cb657c);color:#fff;border-radius:13px;padding:13px 19px;font-size:14px;font-weight:900;box-shadow:0 4px #9a4c64}.primary:hover{filter:brightness(1.08)}.close{position:absolute;right:12px;top:10px;border:0;background:none;color:#a66f7b;font-size:27px}.level-picker{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.level-picker button{padding:13px 5px;border-radius:12px;border:2px solid #e7c2b5;background:#fff0e0;color:#a46e71;font-weight:900;font-size:17px}.level-picker button:disabled{opacity:.35;cursor:not-allowed}.level-picker button.current{background:#f5b7bc;border-color:#da8892}.modal .muted{color:#ae8b8a;font-size:12px}.results{background:#fff1e4;border:2px dashed #edc4ae;border-radius:16px;padding:15px;line-height:1.9}.results strong{color:#b76475}.stars{font-size:29px;letter-spacing:9px;color:#e6a76a}@keyframes blink{50%{background:#ffebaa;filter:brightness(1.25)}}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.23)}100%{transform:scale(0);opacity:0}}.slot.pop .cookie{animation:pop .32s ease-in forwards}@media(max-width:1150px){.layout{grid-template-columns:minmax(190px,1fr) minmax(450px,1.7fr)}.rightpanel{display:none}}@media(max-width:800px){:root{--cell:min(10.4vw,56px)}.app{padding:13px}.masthead{gap:12px;flex-wrap:wrap}.brandmark{height:54px;width:54px;border-radius:15px}.brand-cookie{transform:scale(.8)}.masthead h1{font-size:33px}.header-actions{width:100%;margin:7px 0 0}.layout{grid-template-columns:1fr;gap:20px}.sidepanel{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 17px;padding:16px}.sidepanel .flourish{grid-column:span 2}.level-number{padding:10px 0}.level-number strong{font-size:42px}.progress-title,.meter{grid-column:2}.meter{margin-top:-11px}.statgrid{grid-column:span 2;margin:4px 0}.tip-card{grid-column:span 2}.side-actions{grid-column:span 2;margin-top:4px}.board-frame{margin:34px}.board-banner{margin-bottom:9px}.board-foot{justify-content:center;flex-wrap:wrap}.footer{margin-top:22px}}@media(max-width:420px){:root{--cell:9.9vw}.board-frame{margin:32px}.board{border-width:3px}.top-arrows,.bottom-arrows{left:23px}.left-arrows,.right-arrows{top:23px}.panel{border-radius:17px}.stat b{font-size:22px}.board-banner{font-size:12px}.modal{padding:23px}.cookie-examples .cookie{width:30px;height:30px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Phase 2: feedback, accessibility, and input polish */
.boost-actions{display:flex;gap:9px;margin-top:17px}.boost-actions button{flex:1;min-width:0}.boost-actions button:disabled{opacity:.42;cursor:not-allowed;filter:grayscale(.3)}.slot.selected{outline:3px solid #cb6994;outline-offset:-4px;z-index:1}.board{touch-action:none}.slot.slide-row .cookie{animation:slide-row .19s cubic-bezier(.15,.68,.23,1.03) both}.slot.slide-col .cookie{animation:slide-col .19s cubic-bezier(.15,.68,.23,1.03) both}.slot.refilled .cookie{animation:reappear .19s cubic-bezier(.2,1.4,.6,1) both}.arrowbar button.hint{background:#fff2a0;border-color:#e3a755;color:#805f22;animation:hint-pulse .55s ease-in-out infinite alternate;box-shadow:0 0 0 4px #fff0a888}.move-info{font-size:10px;color:#b28787}.board-foot{max-width:540px;align-items:center;flex-wrap:wrap}.combo{font-size:12px;white-space:nowrap}.board-banner{transition:background-color .2s}
@keyframes slide-row{from{transform:translateX(calc(var(--shift)*var(--cell)*.85));opacity:.65}to{transform:translateX(0);opacity:1}}
@keyframes slide-col{from{transform:translateY(calc(var(--shift)*var(--cell)*.85));opacity:.65}to{transform:translateY(0);opacity:1}}
@keyframes reappear{from{transform:scale(.15) rotate(-25deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
@keyframes hint-pulse{from{transform:scale(1)}to{transform:scale(1.23)}}
@media(max-width:800px){.boost-actions{grid-column:span 2;margin-top:4px}.board-foot{font-size:11px}.move-info{display:none}}

/* Phase 3: special orders and obstacles */
.level-name{font-family:Georgia,serif;color:#ba6e86;font-size:17px;font-weight:bold;margin:13px 0 -7px}.special-order{background:linear-gradient(120deg,#fce8c9,#fff2e2);padding:12px;border-radius:14px;border:2px dashed #e8b98c;margin-top:13px}.special-order[hidden]{display:none}.special-order>span{display:block;font-size:11px;font-weight:bold;color:#9b6878}.order-line{display:flex;gap:11px;align-items:center;margin-top:8px}.order-line strong{font-size:18px;color:#b56c80}.mini-order{width:29px;height:29px}.special-order.fulfilled{background:#ecf6df;border-color:#9abf84}.chocolate-block{width:80%;height:80%;border:4px solid #70413c;border-radius:13px;background:linear-gradient(130deg,#a46450,#6c3d36);box-shadow:inset 5px 5px #cd9172,inset -4px -5px #4c2a2c,0 3px #815448;position:relative}.chocolate-block:after{content:'';position:absolute;inset:23%;border:3px solid #a87361;border-radius:6px}.coating{position:absolute;pointer-events:none;inset:6%;border-radius:50%;z-index:2}.coating.ice{border:4px solid #84dced;background:linear-gradient(135deg,#daffff9c,#80d9fa69);box-shadow:inset 0 0 0 2px #fff8,0 0 5px #c6ffff}.coating.ice:after{content:'✦';position:absolute;top:-7px;right:1px;color:#fff;font-size:18px;text-shadow:0 0 5px #3fb7ca}.coating.ribbon{border:4px solid #cc6694;background:linear-gradient(90deg,transparent 37%,#e77ca3 38%,#e77ca3 60%,transparent 61%),linear-gradient(transparent 38%,#e77ca3 39%,#e77ca3 58%,transparent 59%);box-shadow:0 0 0 2px #ffe1edbb}.coating.ribbon:after{content:'◆';position:absolute;left:38%;top:34%;font-size:14px;color:#fff1f6;text-shadow:0 1px #944260}.legend{display:grid;gap:8px;color:#9c7978;font-size:12px;margin:10px 0}.level-picker{grid-template-columns:repeat(5,1fr)}.slot.chocolate-slot{background:#f4d6bc}.rightpanel{min-height:500px}@media(max-width:800px){.level-name{grid-column:span 2}.special-order{grid-column:span 2;margin-top:0}}

/* PHASE 4 — original SVG food art, bakery scenic background, clearer effects */
body{background:#fff1e8 url("assets/bakery-background.svg") center top / cover fixed no-repeat}
.ambient-glow{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,#fff9edab,transparent 24%,transparent 80%,#fff2e4a0);z-index:0}
.sprinkles{opacity:.15;animation:sprinkle-float 18s linear infinite}
@keyframes sprinkle-float{to{background-position:50px 11px,75px 40px}}
.masthead{border-radius:25px;background:#fffaf0d9;border:3px solid #fff;box-shadow:0 6px 0 #e5b8b0;backdrop-filter:blur(5px);margin-bottom:20px;padding:13px 17px}
.brandmark{background:linear-gradient(135deg,#ffeccc,#ffc6c4)}
.brand-cookie{background:#d89a69 url('assets/cookie-chip.svg') center / contain no-repeat;border:0;border-radius:0;box-shadow:none;width:54px;height:54px}
.brand-cookie i{display:none}
.panel{background:#fffaf2f5;box-shadow:0 9px 0 #dca99b,0 18px 34px #905c6540;backdrop-filter:blur(6px)}
.board-area{position:relative}
.board-banner{background:linear-gradient(105deg,#fff9ee,#ffe9e2,#fff9ee);border-radius:20px;box-shadow:0 5px 0 #efc2b5}
.board-shell{position:relative;background:linear-gradient(140deg,#fdd4c3ef,#fff4daee);border:7px solid #fff9ed;border-radius:34px;padding:12px 0 20px;box-shadow:0 11px 0 #c98d83,0 16px 30px #8c536433}
.bake-sign{display:inline-block;margin:4px auto 12px;padding:7px 15px;border-radius:30px;background:#fff9e9;color:#ad6980;font-size:10px;font-weight:900;letter-spacing:1.4px;box-shadow:0 3px #eab5a4}
.bake-sign span{color:#d8a65c;margin:0 5px}
.board-frame{background:linear-gradient(160deg,#f6dfc4,#eac6aa);box-shadow:inset 0 0 0 5px #fff9ec,0 8px #ba8976}
.board{background:#f4d9b6;border-color:#e6ac8e;box-shadow:inset 0 4px 9px #8c60422e}
.slot,.slot:nth-child(odd){background:linear-gradient(145deg,#fff4dd,#ffe8ce)}
.slot:nth-child(6n+2),.slot:nth-child(6n+4),.slot:nth-child(6n+6){background:linear-gradient(145deg,#fff0da,#fce1c8)}
.cookie,.cookie:before,.cookie:after,.cookie span:before,.cookie span:after{box-shadow:none!important}
.cookie{width:93%;height:93%;border:0;background:transparent center / contain no-repeat;filter:drop-shadow(0 2px 1px #ae715b66);border-radius:0;box-shadow:none!important;transition:filter .15s, transform .15s}
.cookie:before,.cookie:after,.cookie span:before,.cookie span:after{display:none!important}
.c0{background-image:url('assets/cookie-chip.svg')}
.c1{background-image:url('assets/cookie-strawberry.svg')}
.c2{background-image:url('assets/cookie-shortbread.svg')}
.c3{background-image:url('assets/cookie-berry.svg')}
.c4{background-image:url('assets/cookie-pistachio.svg')}
.cookie-examples .cookie{width:46px;height:46px}
.mini-order{width:36px;height:36px}
.slot:hover .cookie{transform:rotate(-5deg) scale(1.09);filter:drop-shadow(0 4px 2px #9d604b77)}
.slot.selected{outline:3px dashed #b65e85;outline-offset:-5px;background:#fff4bc}
.slot.selected .cookie{animation:selected-bob 1.25s ease-in-out infinite alternate}
@keyframes selected-bob{to{transform:translateY(-3px) rotate(3deg)}}
.slot.match{background:#fff1a7;box-shadow:inset 0 0 14px #ffe46a}
.slot.pop .cookie{animation:cookie-burst .36s ease-in forwards}
@keyframes cookie-burst{0%{transform:scale(1);opacity:1}35%{transform:scale(1.28) rotate(12deg);filter:brightness(1.2) drop-shadow(0 0 9px #ffe98c)}100%{transform:scale(.08) rotate(-26deg);opacity:0}}
.slot.pop:after{content:'✦';position:absolute;color:#f6a96c;z-index:4;font-size:24px;pointer-events:none;animation:twinkle .4s ease-out forwards}
@keyframes twinkle{0%{transform:scale(.3);opacity:0}30%{transform:scale(1.2);opacity:1}100%{transform:scale(1.8) rotate(45deg);opacity:0}}
.chocolate-block{background:linear-gradient(135deg,#b9785c,#75443e);border-radius:9px;transform:rotate(-4deg);box-shadow:inset 5px 5px #e1aa7f,inset -3px -4px #492620,0 4px 2px #976b5650}
.chocolate-block:before{content:'';position:absolute;inset:12%;border:2px solid #d29a74;border-radius:7px;box-shadow:inset 0 0 0 4px #7b453e}
.chocolate-block:after{inset:36%;background:#eab38b;border:0;border-radius:50%;opacity:.48}
.coating.ice{border-width:3px;border-radius:24%;background:linear-gradient(145deg,#ffffffae 1%,#a6edfc7a 55%,#5ebee679);box-shadow:inset 0 0 0 2px #fff9,0 0 8px #c7efff}
.coating.ribbon{background:linear-gradient(90deg,transparent 38%,#eb6e9e 39%,#f8acc1 60%,transparent 61%),linear-gradient(transparent 39%,#eb6e9e 40%,#f8acc1 61%,transparent 62%);border-color:#e17b9b}
.arrowbar button{background:linear-gradient(#fffef5,#fce3d9);box-shadow:0 3px #d69d90;border-color:#fff9ed;color:#a85f7e}
.arrowbar button:hover:not(:disabled){background:#fff5c6;filter:brightness(1.025)}
.tip-card{background:linear-gradient(120deg,#fff2d5,#fce1d9)}
.tinycookie{background: url('assets/cookie-chip.svg') center / contain no-repeat;border:0;width:41px;height:41px}
.modal{background:#fffaf1 url('assets/bakery-background.svg') center bottom / 100% auto no-repeat;box-shadow:0 11px 0 #d69e91,0 30px 65px #4b283b55}
.modal:before{content:'';position:absolute;inset:0;background:#fffaf1eb;border-radius:inherit;pointer-events:none}
.modal>*{position:relative}
.legend span{display:block;padding:8px;background:#fff0e3;border-radius:8px;border-left:4px solid #e8a29f}
@media(max-width:800px){body{background-size:auto 100%;background-attachment:scroll}.masthead{padding:12px}.board-shell{padding:9px 0 14px}.bake-sign{font-size:8px;letter-spacing:.5px;padding:6px}}
@media(prefers-reduced-motion:reduce){.sprinkles{animation:none}.slot.selected .cookie{animation:none}}

/* Phase 5: rewards and modes */
.mode-banner{background:#fff0d5;border:2px solid #f3d5b3;border-radius:15px;padding:9px 12px;margin:12px 0 7px;display:flex;gap:3px;flex-direction:column;color:#965a73}
.mode-banner strong{font-family:Georgia,serif;font-size:17px}.mode-banner span{font-size:11px}
.reward-actions{display:flex;gap:8px;margin:12px 0}.reward-actions button{flex:1;min-width:0;font-size:12px}
.clock-stat{display:flex;justify-content:space-between;align-items:center;background:#ffedc6;color:#98644e;border-radius:12px;padding:10px;font-weight:700;margin-top:9px}.clock-stat[hidden]{display:none}.clock-stat strong{font-size:22px}
.reward-summary{background:#fff0de;border-radius:12px;padding:11px;display:grid;gap:8px;margin:14px 0}.reward-summary>div{display:flex;justify-content:space-between;font-size:12px;gap:5px}.reward-summary strong{color:#b45f83}
.mode-list{display:grid;gap:10px;margin:16px 0}.mode-list>div{border:1px solid #ebc3ae;background:#fff5e9;padding:12px;border-radius:12px}.mode-list p{margin:4px 0 0}
.badge-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:14px 0}.badge-item{border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:5px;background:#fff4e5;border:1px solid #e8c8ab;font-size:12px}.badge-item strong{color:#a66076}.badge-item span{line-height:1.4}.locked-badge{opacity:.57;filter:grayscale(.4)}.earned{background:#fff0c7;border:2px solid #f1ba62}
.reward-panel{display:grid;grid-template-columns:1fr 2fr;gap:13px;align-items:center;margin:16px 0}.reward-panel strong{font-size:21px;color:#ba7085}.reward-panel span{font-size:12px}
.level-picker button{position:relative;min-height:49px}.level-picker button small{display:block;color:#e0a342;font-size:10px;letter-spacing:-2px;white-space:nowrap}
@media(max-width:800px){.mode-banner{grid-column:span 2}.reward-actions{grid-column:span 2}.clock-stat{grid-column:span 2}}
@media(max-width:480px){.badge-grid{grid-template-columns:1fr}.header-actions{display:flex;flex-wrap:wrap;gap:5px}.header-actions button{font-size:11px}}

/* Release 1.0 — comfortable touch targets and low-motion mode */
.arrowbar button{min-width:31px;min-height:31px;touch-action:manipulation}
.board{touch-action:none}.board-shell{max-width:100%}
@media (max-width:560px){.header-actions{justify-content:center}.header-actions .softbtn{padding:9px 10px;min-height:42px}.arrowbar button{min-width:30px;min-height:30px}.panel{min-height:unset}.side-actions button,.boost-actions button,.reward-actions button{min-height:43px}.board-banner{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}


/* Cookie Slide Art Edition — custom cohesive illustrated clipart */
body {background-color:#fce4d5;background-image:linear-gradient(180deg,#fff6e8e8,#fde0d9dc),url('assets/bakery-background.svg');background-size:cover,cover;background-position:center center;background-attachment:fixed}
.brandmark{width:91px;height:91px;flex-shrink:0;background:linear-gradient(#fff8e8,#ffe1cf);border-radius:26px;transform:rotate(-4deg)}
.brandmark img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 2px #b17a7038)}
.masthead h1{font-size:clamp(38px,4.5vw,56px);text-shadow:2px 4px 0 #fff8ee}
.panel{border-color:#fffdf2;background:#fffaf2f2;box-shadow:0 8px 0 #dca493,0 18px 30px #915d5940}
.board-frame{border:9px solid #fff0d9;box-shadow:0 5px 0 #b77f60,0 15px 0 #d29b78,0 23px 35px #975b595e;border-radius:25px}
.board-banner{background:linear-gradient(90deg,#ffecce,#fff7e9,#ffecce);border-color:#fffdf3;color:#965b64}
.cookie{filter:drop-shadow(0 3px 2px #8a573b6b)}
.cookie-examples .cookie{width:49px;height:49px}
.slot{background:linear-gradient(145deg,#fff9e9,#ffe9d6)}
.slot:nth-child(odd){background:linear-gradient(145deg,#fff6e2,#f8dfc7)}
.chef-card{display:flex;align-items:center;gap:9px;padding:8px;margin:8px -5px;background:#fff0dc;border:2px dashed #e9b5a7;border-radius:16px;font-size:12px;font-weight:900;color:#9e6074}
.chef-card img{width:68px;height:68px;object-fit:contain;flex-shrink:0}
.chef-card small{display:block;margin-top:5px;font-size:10px;color:#aa827a;font-weight:normal}
.legend{display:grid;gap:7px}
.legend span{display:flex;align-items:center;gap:8px;padding:6px 8px!important;font-size:10px;font-weight:700}
.legend img{width:34px;height:34px;flex-shrink:0;object-fit:contain}
.chocolate-block{background:url('assets/chocolate-block.svg') center/contain no-repeat!important;border:0!important;border-radius:0!important;box-shadow:none!important;transform:none!important}
.chocolate-block:before,.chocolate-block:after{display:none!important}
.coating.ice{background: url('assets/ice.svg') center/100% 100% no-repeat!important;box-shadow:none!important;border:0!important;opacity:.95}
.coating.ribbon{background:url('assets/ribbon.svg') center/100% 100% no-repeat!important;border:0!important}
.cookie-examples{gap:2px;justify-content:space-between}
.softbtn{transition:transform .15s,background .15s;white-space:normal}
@media(max-width:560px){body{background-attachment:scroll}.brandmark{width:64px;height:64px}.chef-card img{width:50px;height:50px}}
/* Mobile art-edition cleanup */
@media(max-width:600px){.bake-sign{display:none!important}.board-shell{padding:0!important}.board-frame{margin:34px auto!important}.board-banner{margin-top:8px}.board-foot{padding:0 10px}}

/* Clean layout: the decorative side banner was removed. */
.board-shell{display:flex;justify-content:center;align-items:center;}
.badge-totals{margin-top:18px;text-align:center;font-weight:700;}


/* Custom, locally bundled clipart artwork. The four new bakery backgrounds are intentionally NOT included. */
.cookie{background-size:contain!important;background-position:center!important;background-repeat:no-repeat!important;background-color:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;filter:drop-shadow(0 3px 2px #9b5c4c4a)}
.cookie::before,.cookie::after,.cookie span::before,.cookie span::after{content:none!important;display:none!important}
.c0{background-image:url('assets/clipart/cookie-chip.webp')!important}
.c1{background-image:url('assets/clipart/cookie-strawberry.webp')!important}
.c2{background-image:url('assets/clipart/cookie-butter.webp')!important}
.c3{background-image:url('assets/clipart/cookie-blueberry.webp')!important}
.c4{background-image:url('assets/clipart/cookie-pistachio.webp')!important}
.cookie span{display:none!important}
.cookie-examples .cookie{width:52px;height:52px;min-width:0;filter:drop-shadow(0 2px 2px #a0734855)}
.brandmark img{width:108%;height:108%;object-fit:contain}
.brandmark{background:#ffebd8;border-color:#fff9ed}
.tip-cookie{width:43px;height:43px;object-fit:contain;flex-shrink:0}
.chocolate-block{width:90%;height:90%;background:url('assets/clipart/chocolate-solid.webp') center/contain no-repeat!important;border:0!important;box-shadow:none!important}
.coating{inset:5%;}
.coating.ice{border:0!important;border-radius:10px;background:linear-gradient(140deg,#f1ffff9c,#a8edff58 45%,#64c4ff5c)!important;box-shadow:inset 0 0 0 3px #8adfff,0 0 6px #74cfff!important;opacity:1}
.coating.ice::after{content:'';background:url('assets/clipart/fx-ice.webp') center/contain no-repeat;inset:0;position:absolute;opacity:.7}
.coating.ice.illustrated-ice{inset:0;background:url('assets/clipart/ice-intact.webp') center/contain no-repeat!important;box-shadow:none!important}
.coating.ice.illustrated-ice::after{display:none}
.coating.ribbon{background:linear-gradient(90deg,transparent 39%,#f889b7 40%,#f889b7 59%,transparent 60%),linear-gradient(transparent 39%,#f889b7 40%,#f889b7 59%,transparent 60%)!important;border:0!important;box-shadow:none!important;border-radius:50%}
.coating.ribbon::after{content:'◆';top:26%;left:38%;color:#fff5fa;font-size:17px;position:absolute}
.coating.ribbon.illustrated-ribbon{inset:0;border-radius:0;box-shadow:none!important}
.coating.ribbon.illustrated-ribbon.flavor-0{background:url('assets/clipart/ribbon-pink.webp') center/contain no-repeat!important}
.coating.ribbon.illustrated-ribbon.flavor-1{background:url('assets/clipart/ribbon-purple.webp') center/contain no-repeat!important}
.coating.ribbon.illustrated-ribbon.flavor-4{background:url('assets/clipart/ribbon-gold.webp') center/contain no-repeat!important}
.coating.ribbon.illustrated-ribbon::after{display:none}
.arrowbar button{font-size:0;color:transparent!important;background-position:center!important;background-size:contain!important;background-repeat:no-repeat!important;background-color:transparent!important;border:0!important;border-radius:50%!important;box-shadow:none!important;width:var(--arrow);height:var(--arrow);filter:drop-shadow(0 2px 2px #975a6455)}
#topArrows button{background-image:url('assets/clipart/arrow-up.webp')!important}
#bottomArrows button{background-image:url('assets/clipart/arrow-down.webp')!important}
#leftArrows button{background-image:url('assets/clipart/arrow-left.webp')!important}
#rightArrows button{background-image:url('assets/clipart/arrow-right.webp')!important}
.arrowbar button:hover:not(:disabled){transform:scale(1.22)!important;background-color:transparent!important;filter:drop-shadow(0 0 6px #fca466)}
.arrowbar button.hint{outline:3px solid #ffe057;outline-offset:1px;animation:artPulse .6s ease-in-out infinite alternate}
@keyframes artPulse{from{transform:scale(1)}to{transform:scale(1.18)}}
.board-frame{background:transparent!important;border:0!important;}
.board{background:#f5d7a9;border:4px solid #d29254;}
.slot{background:linear-gradient(135deg,#fff7e4db,#ffeac9b8)!important;border:1px solid #dca877!important}
.slot.selected{box-shadow:inset 0 0 0 3px #f0aebc}
.board-banner{border-color:#fff6e6;background:linear-gradient(120deg,#fff3db,#ffe2ee,#fff3db)}
.panel{box-shadow:0 7px 0 #d5a188,0 15px 26px #a5725c2e}
.chef-card img{width:76px;height:76px;object-fit:contain}
.legend img{width:37px;height:37px;object-fit:contain}
.bakery-decor{display:flex;gap:7px;justify-content:space-evenly;margin:20px 0 12px;padding:8px;border-radius:16px;background:#fff3e5}
.bakery-decor img{width:30%;max-height:82px;object-fit:contain;filter:drop-shadow(0 3px 3px #a46c5544)}
.badge-grid{gap:11px}
.badge-item{align-items:center;text-align:center;justify-content:start;background:#fffaec;border-color:#f1c9aa}
.badge-art{width:72px;height:76px;object-fit:contain;}
.locked-badge .badge-art{filter:grayscale(1);opacity:.55}
.stat-art{width:31px;height:31px;object-fit:contain;vertical-align:middle}
.art-stars{display:flex;gap:6px;justify-content:center;align-items:center;margin:10px 0}
.art-stars img{width:56px;height:56px;object-fit:contain}
.result-mascot{float:right;width:98px;height:98px;object-fit:contain;margin:-5px 4px 5px 12px}
@media(max-width:560px){.bakery-decor img{max-height:65px}.art-stars img{width:45px;height:45px}}
/* Keep directions and board captions visually separated from the illustrated tray. */
.board-foot{margin-top:17px;position:relative;z-index:1;flex-wrap:wrap;justify-content:center}
@media(max-width:560px){.board-foot{margin-top:22px;font-size:10px}.arrowbar button{width:34px;height:34px}}


/* Final clean clipart pass */
.bakery-decor{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end;margin:20px 0 12px;padding:10px;border-radius:16px;background:#fff3e5}
.bakery-decor img{width:100%;max-width:88px;height:78px;object-fit:contain;justify-self:center;background:#fff9f1;border:1px solid #f0d8c5;border-radius:12px;padding:6px;filter:drop-shadow(0 3px 3px #a46c5544)}
.badge-item{align-items:center;text-align:center;justify-content:flex-start;background:#fffaec;border-color:#f1c9aa;padding-top:14px}
.badge-art{width:78px;height:78px;object-fit:contain;display:block;margin:0 auto 8px;}
.legend img{background:#fff8ef;border-radius:10px;padding:3px}
.footer{letter-spacing:2px;font-size:10px}

/* Release 1.6: original standalone art only in sidebar and achievement/rewards shelf. */
.bakery-decor{display:flex;gap:12px;justify-content:center;align-items:center;margin:20px 0 14px;padding:10px;background:#fff4e8;border-radius:15px}
.bakery-decor img{display:block;box-sizing:border-box;flex:1 1 0;min-width:0;width:31%;height:78px;object-fit:contain;object-position:center;border:0;background:transparent;padding:3px;filter:drop-shadow(0 3px 2px #7e504633)}
.badge-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.badge-item{min-width:0;display:flex;align-items:center;justify-content:flex-start;flex-direction:column;gap:7px;padding:13px 9px 15px;overflow:hidden}
.badge-art{display:block;box-sizing:border-box;width:80px!important;height:80px!important;max-width:100%;object-fit:contain!important;object-position:center!important;margin:0 auto 4px!important;padding:5px;background:#fff9eb;border-radius:50%;box-shadow:inset 0 0 0 1px #f3d8b4}
.badge-item strong,.badge-item span{max-width:100%;overflow-wrap:break-word;text-align:center}
.locked-badge .badge-art{filter:grayscale(1);opacity:.6}
.reward-panel .stat-art{object-fit:contain;object-position:center}
@media(max-width:520px){.badge-grid{gap:8px}.badge-item{padding:10px 6px}.badge-art{width:66px!important;height:66px!important}.bakery-decor img{height:66px}}

/* Release 1.7: functional grid without decorative board illustration */
.board-frame{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:13px!important}
.board{background:#f5d7a9;border:4px solid #d29254;border-radius:12px;box-shadow:0 5px 14px rgba(120,78,54,.13)}