*{box-sizing:border-box}body{margin:0;background:#fff5e5;color:#674a42;font-family:'Trebuchet MS',Arial,sans-serif}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #db786e;outline-offset:3px}main{height:100dvh;min-height:420px;max-width:1500px;margin:auto;padding:0 25px;display:flex;flex-direction:column}header{height:82px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.brand{display:flex;gap:13px;align-items:center;font-family:Georgia,serif;font-size:26px;font-weight:bold;letter-spacing:-1px}.brand>span{font-size:37px;color:#dc8278}.brand small{display:block;font:8px 'Trebuchet MS',sans-serif;letter-spacing:2.3px;margin-top:6px;color:#b38d7c}.controls{display:flex;gap:7px}.controls button{background:#fffaf1;border:1px solid #decfba;border-radius:20px;padding:8px 12px;color:#96766c;font-size:10px}.controls button[aria-pressed=false]{opacity:.5}.shop{flex:1;min-height:0;display:flex;justify-content:center;background:#f7dfcf;border:1px solid #ead3c2;border-radius:18px;overflow:hidden;position:relative}.shop>aside{flex:1;min-width:0;background:repeating-linear-gradient(90deg,#f8e8d8 0px,#f8e8d8 30px,#f5e2d0 30px,#f5e2d0 60px);display:flex;align-items:center;justify-content:center}.shop>aside.right{background:repeating-linear-gradient(90deg,#dfebe2 0px,#dfebe2 30px,#e6efe5 30px,#e6efe5 60px)}.menu,.recipe{padding:28px 20px;max-width:250px}.menu>small,.recipe>small{font-size:9px;letter-spacing:2px;color:#a17e69}h2{font:normal clamp(22px,2.7vw,35px)/1.1 Georgia,serif;letter-spacing:-1px}.flavor{display:flex;align-items:center;gap:12px;font-size:11px;margin:20px 0}.flavor i{width:22px;height:22px;border-radius:50%;box-shadow:inset -3px -4px #00000009}.vanilla{background:#fff4ca}.chocolate{background:#9b6956}.strawberry{background:#ed9fa2}hr{border:0;border-top:1px dashed #c6a88d;margin:25px 0}.menu p,.recipe p{font-size:12px;line-height:1.9;color:#a17c6d}.flower{font-size:48px;color:#d9907b}.recipe{text-align:center}.sundae{font-size:70px}.recipe>span{font-size:7px;letter-spacing:1px;color:#8a9e84}#stage{height:100%;aspect-ratio:9/10;max-width:100%;flex-shrink:0;position:relative;isolation:isolate;touch-action:none;background:#fff7e6}canvas{display:block;width:100%;height:100%;touch-action:none}.hud{position:absolute;top:8%;left:5%;right:5%;display:flex;justify-content:space-between;pointer-events:none}.hud>span{background:#fffaf0e8;border:1px solid #f0dfc9;border-radius:10px;padding:9px 12px}.hud small{display:block;font-size:7px;letter-spacing:1.3px;color:#b39377}.hud b{display:block;font-size:13px;margin-top:4px;color:#876251}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#fff0df9e;backdrop-filter:blur(4px);padding:18px;z-index:4;overflow:auto}.card{background:#fffbf2f5;border:1px solid #fff;border-radius:22px;text-align:center;padding:25px 27px;box-shadow:0 15px 55px #b1856122;max-width:420px;width:100%}.eyebrow{font-size:8px;letter-spacing:1.7px;color:#b48d76}.mascot{font-size:55px;margin:14px 0 0}h1{font:normal 42px/1.04 Georgia,serif;letter-spacing:-1.5px;margin:13px 0 17px}.card p{font-size:12px;line-height:1.7;color:#9a7b6e}.mini-guide{display:flex;justify-content:center;gap:45px;font-size:24px;color:#d48273;margin:20px 0}.mini-guide b{display:block;font-size:10px;color:#9a7565;margin-top:5px}.card .fine{font-size:9px;line-height:1.8}.primary{display:block;width:100%;background:#cf8276;color:#fff;border:0;padding:14px 18px;border-radius:10px;font-size:12px;font-weight:bold;margin-top:19px}.primary:hover{background:#bd7167}.primary:disabled{opacity:.5}.secondary{border:0;background:none;color:#ac8373;font-size:10px;margin-top:20px;text-decoration:underline;text-underline-offset:4px}.hidden{display:none!important}#toast{position:absolute;left:50%;bottom:24%;transform:translateX(-50%);background:#fffdf0f0;border:1px solid #ecd9b7;box-shadow:0 5px 15px #8a614519;border-radius:14px;padding:9px 15px;font-size:11px;text-align:center;max-width:85%;width:max-content;opacity:0;pointer-events:none;transition:opacity .2s}#toast.show{opacity:1}footer{height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:28px;font-size:9px;color:#ab9181}footer b{font-size:8px;letter-spacing:1px;color:#8b6c5d}footer small{font-size:8px}@media(max-width:750px){main{padding:0 8px;min-height:420px}header{height:67px}.brand{font-size:21px;gap:7px}.brand>span{font-size:27px}.brand small{font-size:6px;letter-spacing:1.4px}.controls{gap:4px}.controls button{font-size:8px;padding:7px}.shop>aside{display:none}.shop{background:#f7e7d8;align-items:center}#stage{width:100%;height:auto;max-height:100%;aspect-ratio:9/10;max-width:calc((100dvh - 115px)*.9)}footer{height:48px;gap:12px;flex-wrap:wrap;align-content:center;font-size:8px}footer small{width:100%;text-align:center;font-size:7px}.hud b{font-size:10px}.hud small{font-size:6px}.hud>span{padding:6px 8px}.card{padding:17px 20px;max-width:330px}.mascot{font-size:33px;margin:8px 0 0}h1{font-size:30px;margin:8px 0 10px}.eyebrow{font-size:6px}.card p{font-size:10px;margin:8px 0}.mini-guide{margin:10px 0;font-size:19px;gap:35px}.mini-guide b{font-size:8px}.card .fine{font-size:8px;line-height:1.5}.primary{margin-top:13px;padding:11px;font-size:10px}#toast{font-size:9px;padding:7px 11px}}@media(max-height:550px) and (orientation:landscape){header{height:45px}footer{height:30px}.overlay{align-items:flex-start;padding:12px}.card{padding:13px}.mascot{display:none}h1{font-size:25px;margin:9px}.card p{font-size:9px}.eyebrow{font-size:6px}.mini-guide{margin:8px;font-size:15px}.mini-guide b{font-size:8px}.card .fine{font-size:7px}.primary{padding:9px;margin-top:10px}.hud b{font-size:9px}.hud small{font-size:5px}}

.score-pop{animation:score-pop .55s ease-out}@keyframes score-pop{35%{transform:scale(1.25);color:#c17839}100%{transform:scale(1)}}@media(prefers-reduced-motion:reduce){.score-pop{animation:none}}

.modes{display:flex;gap:9px;margin-top:14px}.modes button{flex:1;border:1px solid #ddc6b0;background:#fff8ed;color:#9c7562;border-radius:9px;padding:9px;font-size:12px}.modes button.selected{border-color:#c78272;background:#f5dfd3;color:#855847;font-weight:bold}.modes small{display:block;font-size:8px;margin-top:4px;font-weight:normal}#quit{display:block;margin:15px auto 0}@media(max-width:750px){.modes{margin-top:9px}.modes button{font-size:10px;padding:7px}.modes small{font-size:7px}#welcome .mascot{display:none}#welcome .mini-guide{margin:7px 0}}@media(max-height:550px) and (orientation:landscape){.modes button{padding:6px;font-size:9px}.modes small{font-size:6px}}

.drop-controls{display:flex;justify-content:center;gap:12px;padding:9px 0;flex-shrink:0}.drop-controls button{min-height:46px;min-width:145px;border:1px solid #c98a78;border-radius:12px;background:#cf8276;color:white;font-weight:bold;font-size:13px;padding:9px 16px}.drop-controls button:first-child{background:#fff8ec;color:#9c6657}.drop-controls button:disabled{opacity:.45;cursor:default}@media(max-width:750px){#stage{max-width:calc((100dvh - 180px)*.9)}.drop-controls{gap:9px}.drop-controls button{min-width:0;flex:1;max-width:220px;font-size:12px}}

/* Reserve the action row so the board never shifts when Flip All appears. */
.drop-controls{height:64px;align-items:center}#flip-all{width:min(100%,420px);max-width:420px;min-height:46px;background:#cf8276;color:#fff}#flip-all[hidden]{display:none}

.drop-controls{display:block;padding:9px 0}#flip-all{display:block;max-width:none;min-width:0;box-sizing:border-box;margin-right:0}#flip-all[hidden]{display:none}

#flip-all.unsafe{background:#b54e4e;border-color:#913d3d}

.mistakes{position:absolute;top:16%;left:5%;display:flex;flex-direction:column;gap:4px;pointer-events:none}.mistakes span{background:#fff9eef0;color:#a35f55;border:1px solid #e2c2b4;border-radius:8px;padding:5px 8px;font-size:10px;font-weight:bold}@media(max-width:750px){.mistakes span{font-size:8px;padding:3px 6px}}

/* Homepage links keep the game’s existing typography and colors. */
.home-link{color:inherit;text-decoration:none;pointer-events:auto;touch-action:manipulation}
.home-link:hover{text-decoration:underline}
.home-link:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* Responsive play area — 2026-09-08 */
/* Fit the fixed-ratio boards to their actual remaining space. */
.arena,.garden,.shop{container-type:size}
#app,body>main{min-height:320px;padding-bottom:env(safe-area-inset-bottom);padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
@supports(width:1cqh){
  .arena #stage,.garden #stage,.shop #stage{width:min(100cqw,calc(100cqh * var(--board-ratio)));height:auto;max-width:100%;max-height:100%;aspect-ratio:var(--board-ratio);align-self:center}
}
footer.cg-game-footer{display:flex;flex-direction:row;flex-wrap:nowrap;height:auto;min-height:48px;gap:8px;padding:2px 0;flex:0 0 auto;justify-content:space-between}
.cg-footer-copy{display:flex;align-items:center;justify-content:center;gap:4px 16px;flex:1;min-width:0;flex-wrap:wrap;text-align:center}
.cg-share-button.cg-share-compact{margin:0!important;padding:6px 12px!important;min-width:64px;min-height:44px;flex:0 0 auto}
@media(max-width:750px){.cg-footer-copy{gap:3px 10px}.cg-footer-copy small{width:100%}}
@media(max-height:550px) and (orientation:landscape){
  #app,body>main{min-height:280px}
  body>main>header{height:44px}
  body>main>header .brand small{display:none}
  .cg-footer-copy{font-size:9px}
}

#stage{--board-ratio:9/10}

.drop-controls{height:48px;padding:1px 0}