:root {
  --pink: #ffd3e4;
  --pink-deep: #ff9ec7;
  --yellow: #ffd93d;
  --yellow-deep: #f7b733;
  --honey: #f2a007;
  --sky: #bfe6ff;
  --grass: #a8de8e;
  --grass-deep: #7cc95f;
  --cream: #fffaf0;
  --ink: #6b4226;
  --purple: #c9a6ff;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* ---------- Header that fades to just the hamburger on scroll ---------- */
.site-header {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 4px rgba(107, 66, 38, 0.08);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.site-header .nav-chrome {
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.site-header.is-scrolled {
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

.site-header.is-scrolled .nav-chrome {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#menu-toggle {
  filter: drop-shadow(0 1px 3px rgba(107, 66, 38, 0.35));
}

body {
  font-family: 'Quicksand', 'Trebuchet MS', sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, #cfeaff 0%, #e4d9ff 35%, #ffd3e4 100%);
  overflow-x: hidden;
}

h1, h2, h3, .font-title {
  font-family: 'Baloo 2', 'Quicksand', sans-serif;
}

.text-outline {
  -webkit-text-stroke: 2px #ffffff;
  paint-order: stroke fill;
}

/* ---------- Background scenes ---------- */
.scene {
  position: relative;
  overflow: hidden;
}

.scene-sky {
  background: linear-gradient(180deg, #ffc4de 0%, #ffd9ec 35%, #fff1e0 100%);
}

.cloud {
  position: absolute;
  opacity: 0.9;
  animation: drift linear infinite;
}

@keyframes drift {
  from { transform: translateX(-10%); }
  to { transform: translateX(110%); }
}

.floaty {
  animation: bob 4s ease-in-out infinite;
}

.floaty-slow {
  animation: bob 6s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(3deg); }
}

.spin-slow {
  animation: spin 14s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.bee-fly {
  animation: flyacross 18s linear infinite;
}

@keyframes flyacross {
  0% { transform: translate(-10vw, 0) rotate(-6deg); }
  50% { transform: translate(50vw, -40px) rotate(4deg); }
  100% { transform: translate(110vw, 0) rotate(-6deg); }
}

.honey-drip {
  position: absolute;
  top: -10px;
  width: 100%;
  left: 0;
  line-height: 0;
  z-index: 5;
}

/* ---------- Cards ---------- */
.bubble-card {
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 10px 0 rgba(255, 158, 199, 0.35), 0 16px 30px rgba(107, 66, 38, 0.12);
  border: 3px solid #fff;
}

.bubble-card-yellow {
  background: linear-gradient(180deg, #fff9e6, #fff1c4);
  border-radius: 28px;
  box-shadow: 0 10px 0 rgba(247, 183, 51, 0.35), 0 16px 30px rgba(107, 66, 38, 0.12);
}

.btn-bee {
  background: linear-gradient(180deg, var(--yellow), var(--yellow-deep));
  color: #6b4226;
  font-family: 'Baloo 2', sans-serif;
  border-radius: 999px;
  box-shadow: 0 6px 0 var(--honey);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn-bee:active {
  transform: translateY(6px);
  box-shadow: 0 0 0 var(--honey);
}

.btn-pink {
  background: linear-gradient(180deg, #ffb3d1, var(--pink-deep));
  color: #7a2e4d;
  font-family: 'Baloo 2', sans-serif;
  border-radius: 999px;
  box-shadow: 0 6px 0 #e8699e;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn-pink:active {
  transform: translateY(6px);
  box-shadow: 0 0 0 #e8699e;
}

.photo-frame {
  border: 10px solid #fff;
  border-radius: 24px;
  box-shadow: 0 14px 0 rgba(255, 158, 199, 0.35), 0 20px 36px rgba(107, 66, 38, 0.15);
  transform: rotate(-2deg);
  background: #fff;
}

.badge-circle {
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid #fff;
  box-shadow: 0 8px 20px rgba(107, 66, 38, 0.2);
  background: #fff;
}

/* ---------- Section divider waves ---------- */
.wave-divider {
  display: block;
  width: 100%;
  line-height: 0;
}

/* ---------- Game ---------- */
#gameCanvas {
  touch-action: none;
  border-radius: 24px;
  background: linear-gradient(180deg, #bfe6ff 0%, #d7f0ff 60%, #eaffe0 100%);
  box-shadow: inset 0 0 0 6px #fff, 0 10px 0 rgba(124, 201, 95, 0.4);
  width: 100%;
  height: auto;
  display: block;
}

.leader-row:nth-child(1) { background: linear-gradient(90deg, #fff3c4, #ffe28a); }
.leader-row:nth-child(2) { background: linear-gradient(90deg, #f1f1f1, #e2e2e2); }
.leader-row:nth-child(3) { background: linear-gradient(90deg, #ffe3c7, #ffd0a1); }

/* ---------- Fixed bottom garden bar ---------- */
/* Mobile: kept small so it never eats into a phone screen's limited height. */
#fixed-footer-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  pointer-events: none;
  line-height: 0;
  height: 115px;
  overflow: hidden;
}

#fixed-footer-bar > img:first-child {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

@media (min-width: 640px) {
  #fixed-footer-bar { height: 140px; }
}

/* Desktop: plenty of room, show the full tiled garden art at a bounded height. */
@media (min-width: 1024px) {
  #fixed-footer-bar {
    height: 160px;
    background-image: url('/img/footer-garden.png');
    background-repeat: repeat-x;
    background-position: center bottom;
    background-size: auto 100%;
  }
  #fixed-footer-bar > img:first-child {
    display: none;
  }
}

.bar-bee {
  position: absolute;
  left: -10%;
  filter: drop-shadow(0 2px 3px rgba(107, 66, 38, 0.3));
  animation-name: barBeeFly;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes barBeeFly {
  0% { transform: translate(0, 0) rotate(-6deg); }
  25% { transform: translate(35vw, -10px) rotate(4deg); }
  50% { transform: translate(65vw, 6px) rotate(-4deg); }
  75% { transform: translate(90vw, -8px) rotate(4deg); }
  100% { transform: translate(120vw, 0) rotate(-6deg); }
}


/* ---------- Wishes wall ---------- */
.wish-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 0 rgba(169, 222, 142, 0.5);
}

/* ---------- Scrollbar niceties ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: var(--pink-deep); border-radius: 10px; }