:root {
  --meadow-top: 34%;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: system-ui, -apple-system, sans-serif;
}

/* Probe safe area padding (iOS notches) */
#safe {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  padding-top: env(safe-area-inset-top, 0);
  padding-right: env(safe-area-inset-right, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
  pointer-events: none;
  visibility: hidden;
}

#fx {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 100;
  pointer-events: none;
}

#game {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  touch-action: none;
  background: #8ae8ff; /* Sky color */
  overflow: hidden;
}

/* Background elements */
#bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
}

.sun {
  position: absolute;
  top: 8%; left: 15%;
  width: 80px; height: 80px;
  background: #ffd84d;
  border-radius: 50%;
  opacity: 0.9;
}

.cloud {
  position: absolute;
  fill: #fff;
  opacity: 0.8;
}
.c1 { top: 12%; left: 40%; width: 140px; }
.c2 { top: 8%; left: 75%; width: 180px; transform: scaleX(-1); }
.c3 { top: 18%; left: 10%; width: 100px; }

.hills {
  position: absolute;
  top: calc(var(--meadow-top) - 10vh);
  left: -10%;
  width: 120%;
  height: 30vh;
}
.hills svg { width: 100%; height: 100%; fill: #65d95b; }

.meadow {
  position: absolute;
  top: var(--meadow-top);
  left: 0; width: 100%; bottom: 0;
  background: #73e66a;
}

.deco {
  position: absolute;
  transform: translate(-50%, -100%);
}
.deco svg { width: 100%; height: 100%; }

/* Characters */
#elf, #fairy {
  position: absolute;
  pointer-events: none;
  z-index: 50;
  transform-origin: bottom center;
}
.elf-inner { width: 100%; height: 100%; transform-origin: bottom center; }
#elf svg { width: 100%; height: 100%; }
#fairy svg { width: 100%; height: 100%; }
#fairy { opacity: 0; }
#fairy.flying { opacity: 1; }

/* Play field */
#field {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 10;
}

.spot {
  position: absolute;
  /* position set by inline styles (left, top, width, height) */
  touch-action: none;
}

.blob, .item {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  transform-origin: center bottom;
}

.blob .wobble {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  transform-origin: center bottom;
  animation: wobble 3s ease-in-out infinite alternate;
}
@keyframes wobble {
  0% { transform: scale(1, 1) skewX(0deg); }
  25% { transform: scale(1.02, 0.98) skewX(-2deg); }
  50% { transform: scale(0.98, 1.02) skewX(1deg); }
  75% { transform: scale(1.01, 0.99) skewX(2deg); }
  100% { transform: scale(0.99, 1.01) skewX(-1deg); }
}
.blob svg { width: 100%; height: 100%; }

.glow {
  position: absolute;
  top: 10%; left: 10%; width: 80%; height: 80%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
  opacity: 0;
  transform-origin: center;
}

.item {
  opacity: 0;
  transform: scale(0.01);
}
.item-bob {
  width: 100%; height: 100%;
  transform-origin: center bottom;
}
.item-bob.bobbing {
  animation: bob 3s ease-in-out infinite alternate;
}
@keyframes bob {
  0% { transform: translateY(0); }
  100% { transform: translateY(-8%); }
}
.item svg { width: 100%; height: 100%; }

/* UI Screens */
#start-screen {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
}
#btn-play {
  background: none; border: none; padding: 0;
  width: 160px; height: 160px;
  border-radius: 50%;
  box-shadow: 0 0 40px 10px rgba(255,216,77,0.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 30px 5px rgba(255,216,77,0.5); }
  50% { transform: scale(1.1); box-shadow: 0 0 60px 20px rgba(255,216,77,0.8); }
  100% { transform: scale(1); box-shadow: 0 0 30px 5px rgba(255,216,77,0.5); }
}

/* Parent Corner */
#btn-gear {
  position: absolute;
  top: env(safe-area-inset-top, 10px);
  right: env(safe-area-inset-right, 10px);
  width: 50px; height: 50px;
  background: none; border: none; padding: 0;
  z-index: 250;
  opacity: 0.1;
  transition: opacity 0.3s;
}
#btn-gear:active {
  opacity: 0.5;
}

#settings-panel {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}
#settings-panel.hidden {
  display: none;
}
.panel-inner {
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  width: 90%; max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  color: #333;
}
.panel-inner h2 { margin: 0 0 10px 0; text-align: center; }
.panel-inner label {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: bold;
}
.panel-inner select, .panel-inner input[type=range] {
  width: 60%;
  padding: 8px;
}
#voice-info {
  font-size: 0.8em; color: #666; margin: 0; text-align: center;
}
.panel-buttons {
  display: flex; gap: 10px; margin-top: 10px;
}
.panel-buttons button {
  flex: 1; padding: 15px; border-radius: 10px; border: none;
  font-size: 1.1em; font-weight: bold; cursor: pointer;
}
#btn-reset { background: #ff7aa2; color: white; }
#btn-close-settings { background: #8ae8ff; color: #333; }