.game{max-width:840px;margin:0 auto}.bakery-page.is-game .game{min-height:calc(100dvh - 66px)}.topbar{align-items:center;gap:14px;max-width:880px;margin:0 auto;padding:14px 16px 4px;display:flex}.topbar .progress{background:var(--parchment);box-shadow:var(--shadow-soft);border-radius:999px;flex:1;justify-content:center;align-items:center;gap:16px;padding:8px 18px;display:flex}.level-pill{font-family:var(--font-display);color:#fff;background:var(--tens-mint);box-shadow:0 3px 0 var(--tens-mint-deep);border-radius:999px;padding:6px 16px;font-weight:700}.goal-dots{gap:7px;display:flex}.goal-dots .dot{background:var(--cream-deep);width:15px;height:15px;transition:transform .2s var(--ease-bounce);border-radius:50%;box-shadow:inset 0 0 0 2px #7a563840}.goal-dots .dot.done{background:var(--leaf);transform:scale(1.12);box-shadow:0 2px #3f9b73}.stars{font-family:var(--font-display);color:var(--cocoa);align-items:center;gap:6px;font-size:1.3rem;font-weight:700;display:flex}.mute{width:48px;height:48px;min-height:48px;padding:0;font-size:1.25rem}@media (width<=620px){.topbar .progress{gap:10px;padding:8px 12px}}.sizerow{gap:0;width:100%;max-width:880px;margin:0 auto}.sizerow-label{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sizebtns{background:var(--parchment);box-shadow:var(--shadow-soft);border-radius:999px;flex-wrap:wrap;flex:1;justify-content:center;gap:6px;padding:6px;display:flex}.sizebtn{flex:1 1 0;min-width:max-content}.pip-row{align-items:center;gap:14px;margin:0;display:flex}.pip-row .pip{width:92px;height:92px}.pip-bubble.pip-bubble{align-items:center;min-height:60px;font-size:1.3rem;display:flex}.pip-bubble.good{background:#eafaf2}.pip-bubble.oops{background:#fff0ec}.ticket{margin:0 auto}.ticket-label{margin-bottom:6px}.equation{font-family:var(--font-display);flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;font-size:2.4rem;font-weight:700;line-height:1;display:flex}.equation .op{color:var(--cocoa-soft);margin:0 4px}.bnum{border-radius:12px;justify-content:center;align-items:center;min-width:1.4em;padding:2px 6px;display:inline-flex}.bnum.d-ones{background:#e3a13c29}.bnum.d-tens{background:#4fbf962e}.bnum.qm-box,.bnum.count-box{color:var(--frosting-deep);box-shadow:inset 0 0 0 3px var(--frosting);background:#fff;min-width:1.6em}.bnum.count-box{color:var(--ones-gold-deep);box-shadow:inset 0 0 0 3px var(--ones-gold)}.streak{font-family:var(--font-display);color:var(--cocoa-soft);background:var(--parchment);width:max-content;box-shadow:var(--shadow-soft);transition:transform .2s var(--ease-bounce);border-radius:999px;justify-content:center;align-items:center;gap:8px;margin:0 auto;padding:6px 18px;font-size:1.25rem;font-weight:700;display:flex}.streak .streak-num{color:var(--frosting-deep);font-size:1.6rem}.streak.hot{box-shadow:0 0 0 3px var(--ones-gold), var(--shadow-soft);transform:scale(1.06)}.streak.hot .streak-flame{animation:.8s ease-in-out infinite flame-flicker}@keyframes flame-flicker{0%,to{transform:scale(1)rotate(-3deg)}50%{transform:scale(1.2)rotate(3deg)}}#mat.mat{flex-direction:column;flex:1 1 0;justify-content:center;align-items:center;gap:14px;padding:12px 16px;display:flex}.frames{flex-wrap:wrap;justify-content:center;align-items:center;gap:22px;display:flex}.tenframe{background:linear-gradient(180deg, #65cda6, var(--tens-mint) 35%, var(--tens-mint-deep));border-radius:20px;grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(5,1fr);gap:8px;padding:12px;display:grid;box-shadow:inset 0 2px #fff6,0 6px 12px #2f9c7666}.tf-cell{--cell:min(58px, 7vh);width:var(--cell);height:var(--cell);min-width:var(--cell);min-height:var(--cell);transition:transform .12s var(--ease-bounce), background .15s ease;background:#ffffff47;border-radius:14px;justify-content:center;align-items:center;display:flex;position:relative;box-shadow:inset 0 0 0 2px #ffffff73}.tf-cell.addable{cursor:pointer;background:#ffffff6b;animation:1.8s ease-in-out infinite slot-breathe;box-shadow:inset 0 0 0 3px #ffffffb3}.tf-cell.addable:after{content:"+";font-family:var(--font-display);color:#ffffffd9;font-size:1.8rem;font-weight:700;line-height:1}@keyframes slot-breathe{0%,to{box-shadow:inset 0 0 0 3px #ffffff8c}50%{box-shadow:inset 0 0 0 3px #fffffff2}}.tf-cell.addable:hover{background:#fff9;transform:translateY(-3px)scale(1.04)}.tf-cell.addable:active{transform:translateY(1px)scale(.97)}.tf-cell.addable:focus-visible{outline:4px solid var(--frosting);outline-offset:3px}.tf-cell.filled{background:#ffffff2e}.tf-cell.filled:after{content:none}.tf-cell .cookie{width:calc(var(--cell) * .69);height:calc(var(--cell) * .69);animation:cookie-pop .32s var(--ease-bounce) both}.tf-cell .cookie.just-added{animation:cookie-drop .4s var(--ease-bounce) both}@keyframes cookie-pop{0%{transform:scale(0)rotate(-20deg)}to{transform:scale(1)rotate(0)}}@keyframes cookie-drop{0%{opacity:0;transform:translateY(-46px)scale(.5)}60%{transform:translateY(4px)scale(1.06)}to{opacity:1;transform:translateY(0)scale(1)}}.legend{font-family:var(--font-display);flex-wrap:wrap;justify-content:center;gap:10px;font-size:1.05rem;font-weight:700;display:flex}.leg{box-shadow:var(--shadow-soft);border-radius:999px;padding:5px 14px}.leg--have{color:var(--ones-gold-deep);background:#e3a13c2e}.leg--add{color:#1f6b4e;background:#7fd1ae47}.leg--need{color:var(--cherry);background:#e8523f1f}@media (width<=540px){.equation{font-size:1.9rem}.tf-cell{--cell:min(46px, 7vh);border-radius:12px}.frames{gap:16px}}@media (height>=1000px){.tf-cell{--cell:min(78px, 7.4vh)}.frames{gap:28px}}.actionbar{flex-direction:column;align-items:center;gap:14px;margin:0;display:flex}.choices{flex-wrap:wrap;justify-content:center;gap:16px;display:flex}.choice{font-family:var(--font-display);color:var(--cocoa);border-radius:var(--r-md);min-width:130px;min-height:64px;box-shadow:var(--shadow-soft);cursor:pointer;transition:transform .12s var(--ease-bounce);background:#fff;border:none;padding:18px 30px;font-size:2rem;font-weight:700}.choice:hover{transform:translateY(-4px)rotate(-1deg)}.choice:active{transform:translateY(2px)}.choice.wrong{color:var(--cherry);background:#fff0ec;animation:.5s wobble}@keyframes wobble{0%,to{transform:translate(0)}20%{transform:translate(-9px)rotate(-3deg)}40%{transform:translate(9px)rotate(3deg)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}.choice.right{background:var(--leaf);color:#1f6b4e;animation:cookie-pop .4s var(--ease-bounce)}.choice[disabled]{opacity:.5}@media (height<=860px){.tf-cell{--cell:min(58px, 6.2vh)}.equation{font-size:1.9rem}.ticket{padding:8px 18px}.ticket-label{margin-bottom:2px;font-size:.76rem}.legend{font-size:.92rem}.leg{padding:3px 12px}.streak{padding:4px 14px;font-size:1.05rem}.streak .streak-num{font-size:1.3rem}.mat{gap:10px;padding:6px 16px}.frames{gap:16px}.sizerow-label{font-size:.74rem}.sizebtn{min-height:44px}.choice{min-height:56px;padding:12px 26px;font-size:1.7rem}.pip-bubble.pip-bubble{min-height:0;padding:8px 14px;font-size:1.08rem}#pad .keys{gap:6px}#pad .key{min-height:clamp(42px,6vh,60px);font-size:1.5rem}:is(.game:has(#choices:not([hidden])) .tf-cell,.game:has(#pad:not([hidden])) .tf-cell){--cell:min(54px, 5.4vh)}}