/* Cookie Craze — game-specific */
.craze-wrap {
  flex:1; display:flex; gap:18px; width:100%; max-width:760px; margin:0 auto;
  align-items:stretch; min-height:0;
}
@media (max-width:640px) { .craze-wrap { flex-direction:column; align-items:center; overflow-y:auto; } }

.cookie-stage {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  min-width:0;
}
.count { font-family:'Astalamet','Realtime',sans-serif; font-weight:800; font-size:46px; color:var(--stroke); line-height:1; text-align:center; }
.count-sub { font-weight:700; color:var(--muted); margin-bottom:10px; }
.cookie-btn {
  font-size:120px; line-height:1; background:none; border:none; cursor:pointer;
  filter:drop-shadow(0 8px 0 rgba(28,24,20,0.35));
  transition:transform 80ms ease; user-select:none; -webkit-tap-highlight-color:transparent;
}
.cookie-btn:active { transform:scale(0.9); }
.per-click { font-weight:700; color:var(--muted); margin-top:8px; }

.shop {
  width:300px; max-width:100%; display:flex; flex-direction:column; gap:10px;
  overflow-y:auto; padding:4px; min-height:0;
}
@media (max-width:640px) { .shop { width:100%; overflow:visible; } }

.shop-item {
  display:flex; align-items:center; gap:12px; text-align:left;
  background:var(--card); border:4px solid var(--stroke); border-radius:16px;
  box-shadow:0 4px 0 var(--stroke); padding:10px 12px; cursor:pointer;
  font-family:inherit; transition:transform 80ms ease, box-shadow 80ms ease;
}
.shop-item:active { transform:translateY(4px); box-shadow:0 0 0 var(--stroke); }
.shop-item.locked { opacity:0.45; cursor:not-allowed; }
.shop-item .emoji { font-size:30px; flex:none; width:40px; text-align:center; }
.shop-item .info { flex:1; min-width:0; }
.shop-item .name { font-weight:800; color:var(--stroke); font-size:15px; }
.shop-item .sub { font-weight:700; color:var(--muted); font-size:12px; }
.shop-item .cost { font-weight:800; color:#C77D2E; font-size:13px; }
.shop-item .owned { flex:none; font-family:'Astalamet','Realtime',sans-serif; font-weight:800; font-size:22px; color:var(--stroke); min-width:30px; text-align:right; }

.float {
  position:fixed; pointer-events:none; font-weight:800; font-size:22px; color:#C77D2E;
  text-shadow:0 2px 0 #fff; z-index:60; animation:floatUp 0.8s ease-out forwards;
}
@keyframes floatUp { 0%{ opacity:1; transform:translateY(0) scale(1); } 100%{ opacity:0; transform:translateY(-60px) scale(1.3); } }