* { box-sizing: border-box; }

:root {
  --ink: #3e3040;
  --pink: #ff7aa8;
  --pink-dark: #e85b91;
  --cream: #fffaf2;
  --green: #80b978;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 18px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 10%, #fff3ca 0 12%, transparent 35%),
    radial-gradient(circle at 90% 80%, #dff6e2 0 14%, transparent 35%),
    linear-gradient(135deg, #ffe4ef, #e8f8e8);
}

.game-shell { width: min(100%, 980px); }

.hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.logo {
  width: 54px; height: 54px; display: grid; place-items: center;
  border-radius: 17px; background: white; box-shadow: 0 8px 25px #9b66802a;
  font-size: 28px;
}
h1 { margin: 0; font-size: clamp(22px, 4vw, 34px); letter-spacing: -.03em; }
.brand p { margin: 3px 0 0; opacity: .65; font-size: 14px; }

.stats { display: flex; gap: 9px; }
.stats > div {
  min-width: 88px; padding: 8px 12px; border-radius: 15px;
  background: #ffffffc9; backdrop-filter: blur(8px);
  box-shadow: 0 7px 20px #80596a14; text-align: center;
}
.stats span { display: block; font-size: 11px; opacity: .6; }
.stats strong { font-size: 17px; }

.game {
  position: relative;
  height: min(70vh, 680px);
  min-height: 470px;
  overflow: hidden;
  border: 5px solid #ffffffaa;
  border-radius: 30px;
  background: linear-gradient(#aee6ff 0%, #dff8ff 57%, #d7f1c7 57%, #9fd18d 100%);
  box-shadow: 0 25px 60px #5b3b4a26, inset 0 1px white;
  touch-action: none;
  user-select: none;
}

.sky-glow {
  position: absolute; width: 280px; height: 280px; border-radius: 50%;
  top: 40px; right: 10%; background: #fff5a6aa; filter: blur(4px);
}

.cloud {
  position: absolute; height: 35px; width: 120px; border-radius: 50px;
  background: #ffffffaa; filter: blur(.3px);
}
.cloud::before, .cloud::after {
  content: ""; position: absolute; border-radius: 50%; background: inherit;
}
.cloud::before { width: 54px; height: 54px; left: 18px; bottom: 5px; }
.cloud::after { width: 45px; height: 45px; right: 20px; bottom: 4px; }
.cloud-a { left: 8%; top: 14%; transform: scale(.8); }
.cloud-b { right: 8%; top: 25%; transform: scale(.6); opacity: .7; }

.hill {
  position: absolute; left: -10%; width: 120%; border-radius: 50% 50% 0 0;
  bottom: -15%; height: 33%; background: #a9d894;
}
.hill-back { bottom: -20%; background: #bfe4a5; }
.hill-front { bottom: -25%; height: 28%; background: #91c77d; }

#flowers { position: absolute; inset: 0; }

.flower {
  position: absolute;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  font-size: 37px;
  filter: drop-shadow(0 5px 3px #5d506025);
  will-change: transform;
  z-index: 4;
}

.basket {
  position: absolute;
  z-index: 8;
  bottom: 20px;
  left: 50%;
  width: 118px;
  height: 76px;
  transform: translateX(-50%);
  cursor: grab;
}
.basket:active { cursor: grabbing; }
.basket-handle {
  position: absolute; width: 82px; height: 54px; left: 18px; top: -26px;
  border: 8px solid #9a5b35; border-bottom: 0; border-radius: 50px 50px 0 0;
  opacity: .9;
}
.basket-body {
  position: absolute; inset: 10px 0 0;
  display: flex; align-items: center; justify-content: center; gap: 1px;
  padding-top: 8px;
  border-radius: 12px 12px 28px 28px;
  background:
    repeating-linear-gradient(90deg, #b87542 0 9px, #a96639 9px 15px);
  border: 4px solid #8e512f;
  box-shadow: 0 10px 15px #5a44252e, inset 0 6px #d18b50;
}
.basket-flower { font-size: 22px; transform: translateY(-8px); }

.overlay {
  position: absolute; inset: 0; z-index: 20;
  display: grid; place-items: center;
  background: #33504744; backdrop-filter: blur(3px);
}
.overlay.hidden { display: none; }
.card {
  width: min(90%, 420px); padding: 34px 30px; text-align: center;
  border-radius: 28px; background: #fffdf9f2;
  box-shadow: 0 25px 60px #48313e3a;
}
.big-icon { font-size: 58px; margin-bottom: 5px; }
.card h2 { margin: 0 0 10px; font-size: 28px; }
.card p { line-height: 1.55; margin: 0 auto 20px; opacity: .75; }
.card button {
  border: 0; border-radius: 15px; padding: 13px 26px;
  background: linear-gradient(135deg, var(--pink), var(--pink-dark));
  color: white; font-size: 16px; font-weight: 800; cursor: pointer;
  box-shadow: 0 9px 20px #e85b9140; transition: transform .15s, box-shadow .15s;
}
.card button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px #e85b9150; }
.card small { display: block; margin-top: 14px; opacity: .55; }

.hint { text-align: center; margin: 11px 0 0; opacity: .55; font-size: 13px; }

.pop {
  position: absolute; z-index: 12; pointer-events: none;
  font-weight: 900; color: #e85b91; font-size: 22px;
  animation: pop .65s ease forwards;
}
@keyframes pop {
  0% { opacity: 0; transform: translateY(0) scale(.7); }
  25% { opacity: 1; transform: translateY(-8px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-45px) scale(.9); }
}

@media (max-width: 650px) {
  body { padding: 9px; }
  .hud { align-items: flex-start; flex-direction: column; }
  .stats { width: 100%; }
  .stats > div { flex: 1; min-width: 0; }
  .game { min-height: 500px; height: 72vh; border-radius: 23px; }
}