:root {
  --sky: #aee6ff;
  --sky-bottom: #ffe9c7;
  --stone-light: #d9c7a8;
  --stone-dark: #8a6f4e;
  --wall: #5b4630;
  --floor-a: #f3e6c9;
  --floor-b: #ecdab5;
  --gem-pink: #ff8fc7;
  --gem-purple: #b98cff;
  --gem-teal: #6fe3d1;
  --gem-gold: #ffd166;
  --gem-green: #4caf7d;
  --gem-red: #ff6b6b;
  --grass: #7dd68c;
  --text-dark: #4a3826;

  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 10px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --tap-min: 64px;

  --shadow-sm: 0 3px 0 rgba(0,0,0,.12);
  --shadow-md: 0 6px 0 rgba(0,0,0,.12);
  --shadow-lg: 0 10px 0 rgba(0,0,0,.15);

  color-scheme: light;
  font-size: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  height: 100%;
  font-family: "Baloo 2", "Comic Sans MS", "Segoe UI Rounded", system-ui, sans-serif;
  color: var(--text-dark);
  overflow-x: hidden;
  background: linear-gradient(180deg, var(--sky) 0%, var(--sky-bottom) 100%);
  overscroll-behavior-y: contain;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

#app {
  min-height: 100dvh;
  transition: opacity 180ms ease;
}
#app.fading { opacity: 0; }

/* ---------- Background sky decoration ---------- */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.sun {
  position: absolute; top: 40px; right: 60px; width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff9d6, #ffd76b 60%, #ffbf3f 100%);
  box-shadow: 0 0 60px 20px rgba(255, 210, 100, .55);
}
.cloud { position: absolute; background: #fff; border-radius: 50px; opacity: .9; animation: drift 60s linear infinite; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.c1 { width: 120px; height: 40px; top: 12%; left: -20%; }
.c1::before { width: 60px; height: 60px; top: -30px; left: 15px; }
.c1::after { width: 50px; height: 50px; top: -20px; left: 60px; }
.c2 { width: 90px; height: 32px; top: 28%; left: -30%; animation-duration: 80s; animation-delay: -20s; }
.c2::before { width: 46px; height: 46px; top: -22px; left: 10px; }
.c2::after { width: 40px; height: 40px; top: -16px; left: 45px; }
.c3 { width: 140px; height: 44px; top: 6%; left: -40%; animation-duration: 100s; animation-delay: -50s; }
.c3::before { width: 70px; height: 70px; top: -34px; left: 20px; }
.c3::after { width: 55px; height: 55px; top: -22px; left: 75px; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(160vw); } }

button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  font-family: inherit;
}

.screen {
  display: flex;
  min-height: 100dvh;
  flex-direction: column;
  align-items: center;
  padding: var(--space-4) var(--space-3) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
}

.title {
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  text-align: center;
  margin: 10px 0 6px;
  color: #7a4a2b;
  text-shadow: 2px 2px 0 #fff, 4px 4px 0 rgba(0,0,0,.08);
}
.title span {
  display: block;
  font-size: 0.45em;
  color: #a9784a;
  font-weight: 600;
  margin-top: 4px;
  text-shadow: none;
}
.subtitle {
  text-align: center;
  max-width: 560px;
  color: #6b5439;
  margin-bottom: var(--space-4);
  line-height: 1.5;
}

/* Apply to any element a game renders its play surface in — disables text
   selection/callout and touch-scroll gestures so taps/drags/swipes never
   fight the browser's own gesture handling. */
.game-surface {
  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none;
}

/* Store-listing screenshot tool only (?caption=...) — see main.js. */
.screenshot-caption {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 28px 24px 40px;
  background: linear-gradient(0deg, rgba(74,46,0,.88), rgba(74,46,0,0));
  color: #fff;
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
  z-index: 500;
  pointer-events: none;
}

/* Manual override (Settings toggle) — same effect as the media query below,
   for a parent who wants reduced motion regardless of OS-level setting. */
.force-reduced-motion *,
.force-reduced-motion *::before,
.force-reduced-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}