* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --sky-top: #bfe7ff;
  --sky-bottom: #eaf9ff;
  --ink: #2c2530;
  --cream: #fffaf1;
  --accent: #ff8fa3;
  --accent-dark: #e96b83;
  --leaf: #6bc98a;
  --leaf-dark: #4aa76c;
  --panel-radius: 24px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-size: clamp(18px, 2.5vw, 26px);
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: "Trebuchet MS", "Kanit", "Noto Sans Thai", sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom));
}

#app {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
}

#webcam {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}

#webcam.visible { opacity: 1; }
#webcam.dimmed { opacity: .35; }

#hand-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: none;
}

#screens {
  position: relative;
  width: 100%;
  height: 100%;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(1.5rem + var(--safe-top)) 1.5rem calc(1.5rem + var(--safe-bottom));
}

.screen[hidden] { display: none; }

.scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-top) 0%, #d9f4d0 55%, #bfe6ae 100%);
}

/* AR mode: when hand tracking is live, the camera feed becomes the background of every screen
   and the forest pieces float on top — the scene keeps only a faint tint for readability. */
body.ar-mode .scene {
  background: linear-gradient(180deg, rgba(191,231,255,.18) 0%, rgba(217,244,208,.18) 55%, rgba(191,230,174,.22) 100%);
}
body.ar-mode #webcam { opacity: 1; }

.scene-piece {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.08));
}

@keyframes cloud-drift {
  0% { transform: translateX(0); }
  50% { transform: translateX(4vw); }
  100% { transform: translateX(0); }
}

.cloud-float {
  animation: cloud-drift 14s ease-in-out infinite;
}
.cloud-float:nth-child(even) {
  animation-duration: 22s;
  animation-direction: reverse;
}