* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin: 0; font-family: 'Comic Sans MS', 'Trebuchet MS', sans-serif; color: #4a2c12;
  background: linear-gradient(135deg, #ffd6e8, #ffe9a8, #c8f0ff); min-height: 100vh; user-select: none; touch-action: manipulation; }
main { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 960px; margin: 0 auto; padding: 16px; }
.bake, .store { background: rgba(255,255,255,.7); border-radius: 24px; padding: 16px; text-align: center; box-shadow: 0 6px 0 rgba(0,0,0,.1); }
h1 { margin: 0; color: #e0457b; } h2 { margin: 0 0 8px; color: #2a8fd0; }
.counter { font-size: 2rem; font-weight: bold; }
.rate { margin-bottom: 8px; }
#cookie { font-size: min(40vw, 220px); line-height: 1; background: none; border: 0; cursor: pointer; transition: transform .08s; }
#cookie:active { transform: scale(.88) rotate(-6deg); }
.reset { margin-top: 8px; background: #fff; border: 2px solid #e0457b; color: #e0457b; border-radius: 12px; padding: 6px 12px; }
#shop { display: flex; flex-direction: column; gap: 8px; }
.upgrade { display: flex; align-items: center; gap: 10px; padding: 10px; border: 0; border-radius: 16px; background: #fff7c2; font: inherit; color: inherit; text-align: left; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.15); }
.upgrade:disabled { opacity: .5; cursor: not-allowed; }
.upgrade:not(:disabled):active { transform: translateY(2px); }
.emoji { font-size: 2rem; } .info { flex: 1; display: flex; flex-direction: column; }
.own { font-size: 1.4rem; font-weight: bold; color: #e0457b; } .cost { min-width: 90px; text-align: right; }
.float { position: fixed; pointer-events: none; font-weight: bold; font-size: 1.5rem; color: #e0457b; animation: up .8s ease-out forwards; }
@keyframes up { to { transform: translateY(-60px); opacity: 0; } }
@media (max-width: 700px) { main { grid-template-columns: 1fr; padding: 8px; } }