/* ============================================================
   Magic Garden Medical Kiosk — Core Styles
   Font: Nunito (rounded, friendly, child-appropriate)
   Design: Full-screen cartoon garden with layered parallax feel
   ============================================================ */

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

:root {
  --sky-top:    #87CEEB;
  --sky-bot:    #C8EEFF;
  --hill-green: #6CC24A;
  --dark-green: #3E8C2A;
  --ground-top: #8ED44B;
  --ground-bot: #5BAB2E;
  --sun-color:  #FFD700;
  --cloud-color:#FFFFFF;
  --text-dark:  #2D4A1E;
  --text-light: #FFFDE7;
  --attract-bg: rgba(255,255,255,0.92);
  --btn-green:  #4CAF50;
  --btn-hover:  #388E3C;
  --shadow:     0 8px 32px rgba(0,0,0,0.18);
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Nunito', 'Comic Sans MS', cursive, sans-serif;
  background: var(--sky-top);
  user-select: none;
}

/* Hidden webcam */
#kiosk-video {
  position: fixed;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
  top: 0; left: 0;
}

/* ── Root container ─────────────────────────────────────── */
#kiosk-root {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Starts on top — JS drops it to -1 when transitioning to HUB */
  z-index: 99000;
}

/* ═══════════════════════════════════════════════════════════
   SKY
   ═══════════════════════════════════════════════════════════ */
.sky {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 62%;
  background: linear-gradient(180deg, #5BB8F5 0%, #A8DCFA 55%, #C8EEFF 100%);
  overflow: hidden;
}

/* Sun */
.sun {
  position: absolute;
  top: 6%; right: 9%;
  width: 110px; height: 110px;
  background: radial-gradient(circle, #FFE566 55%, #FFD700 100%);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(255,220,50,0.18), 0 0 0 36px rgba(255,220,50,0.09);
  animation: sunPulse 4s ease-in-out infinite;
}
@keyframes sunPulse {
  0%,100% { box-shadow: 0 0 0 18px rgba(255,220,50,0.18), 0 0 0 36px rgba(255,220,50,0.09); }
  50%      { box-shadow: 0 0 0 26px rgba(255,220,50,0.24), 0 0 0 52px rgba(255,220,50,0.12); }
}

/* Clouds */
.cloud {
  position: absolute;
  background: #fff;
  border-radius: 50px;
  opacity: 0.9;
}
.cloud::before, .cloud::after {
  content: '';
  position: absolute;
  background: #fff;
  border-radius: 50%;
}
.cloud-1 { width: 160px; height: 50px; top: 12%; left: -200px;
  animation: cloudDrift 28s linear infinite; }
.cloud-1::before { width: 70px; height: 70px; top: -30px; left: 20px; }
.cloud-1::after  { width: 50px; height: 50px; top: -20px; left: 70px; }

.cloud-2 { width: 220px; height: 65px; top: 28%; left: -280px;
  animation: cloudDrift 40s linear infinite 8s; }
.cloud-2::before { width: 90px; height: 90px; top: -40px; left: 30px; }
.cloud-2::after  { width: 70px; height: 70px; top: -28px; left: 100px; }

.cloud-3 { width: 130px; height: 42px; top: 8%; left: -180px;
  animation: cloudDrift 34s linear infinite 16s; }
.cloud-3::before { width: 55px; height: 55px; top: -24px; left: 18px; }
.cloud-3::after  { width: 42px; height: 42px; top: -16px; left: 58px; }

@keyframes cloudDrift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(100vw + 300px)); }
}

/* Birds */
.bird {
  position: absolute;
  font-size: 28px;
  animation: birdFly linear infinite;
  opacity: 0.85;
}
.bird-1 { top: 15%; left: -60px; animation-duration: 22s; animation-delay: 3s; }
.bird-2 { top: 34%; left: -60px; animation-duration: 30s; animation-delay: 12s; font-size: 22px; }
@keyframes birdFly {
  0%   { transform: translateX(0) translateY(0); }
  25%  { transform: translateX(25vw) translateY(-20px); }
  50%  { transform: translateX(50vw) translateY(5px); }
  75%  { transform: translateX(75vw) translateY(-15px); }
  100% { transform: translateX(110vw) translateY(0); }
}

/* ═══════════════════════════════════════════════════════════
   HILLS
   ═══════════════════════════════════════════════════════════ */
.hills {
  position: absolute;
  bottom: 24%;
  left: 0; right: 0;
  height: 200px;
  pointer-events: none;
}

.hill {
  position: absolute;
  bottom: 0;
  border-radius: 50% 50% 0 0;
}
.hill-left {
  width: 55%; height: 180px;
  left: -12%;
  background: linear-gradient(180deg, #7DCE50 0%, #5AA836 100%);
}
.hill-right {
  width: 50%; height: 150px;
  right: -8%;
  background: linear-gradient(180deg, #6EC745 0%, #4D9A2D 100%);
}
.hill-center {
  width: 44%; height: 200px;
  left: 28%;
  background: linear-gradient(180deg, #85D455 0%, #5EB338 100%);
}

/* ═══════════════════════════════════════════════════════════
   GROUND
   ═══════════════════════════════════════════════════════════ */
.ground {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  height: 26%;
  background: linear-gradient(180deg, #8FD44D 0%, #5EAB2F 60%, #4A8A24 100%);
  border-top: 6px solid #6EC240;
  overflow: visible;
}

/* Flowers row */
.flowers-row {
  position: absolute;
  top: -48px;
  left: 0; right: 0;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 0 40px;
}
.flower {
  font-size: clamp(28px, 3.5vw, 52px);
  display: inline-block;
  animation: sway 2.5s ease-in-out infinite;
  transform-origin: bottom center;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.2));
}
.f1  { animation-delay: 0.0s; }
.f2  { animation-delay: 0.3s; }
.f3  { animation-delay: 0.6s; }
.f4  { animation-delay: 0.2s; }
.f5  { animation-delay: 0.8s; }
.f6  { animation-delay: 1.1s; }
.f7  { animation-delay: 0.4s; }
.f8  { animation-delay: 0.7s; }
.f9  { animation-delay: 1.0s; }
.f10 { animation-delay: 0.1s; }
.f11 { animation-delay: 0.5s; }
.f12 { animation-delay: 0.9s; }

@keyframes sway {
  0%,100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}

/* Mushrooms */
.mushroom {
  position: absolute;
  font-size: clamp(30px, 4vw, 56px);
  bottom: 55%;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.25));
  animation: bobble 3s ease-in-out infinite;
}
.m1 { left: 6%; animation-delay: 0.5s; }
.m2 { right: 8%; animation-delay: 1.4s; }

/* Trees */
.tree {
  position: absolute;
  font-size: clamp(60px, 9vw, 130px);
  bottom: 55%;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.25));
  animation: treeSway 4s ease-in-out infinite;
  transform-origin: bottom center;
}
.t1 { left: 1%;  animation-delay: 0.0s; font-size: clamp(70px, 10vw, 140px); }
.t2 { right: 2%; animation-delay: 1.2s; }
.t3 { left: 14%; animation-delay: 0.7s; font-size: clamp(55px, 8vw, 115px); }

@keyframes treeSway {
  0%,100% { transform: rotate(-1.5deg); }
  50%      { transform: rotate(1.5deg); }
}

/* Butterflies */
.butterfly {
  position: absolute;
  font-size: clamp(24px, 3vw, 44px);
  animation: butterflyFloat linear infinite;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.15));
}
.b1 { bottom: 85%; left: 22%; animation-duration: 12s; animation-delay: 0s; }
.b2 { bottom: 75%; left: 55%; animation-duration: 16s; animation-delay: 4s; }
.b3 { bottom: 90%; left: 72%; animation-duration: 10s; animation-delay: 8s; }

@keyframes butterflyFloat {
  0%   { transform: translate(0,   0)   scaleX(1); }
  20%  { transform: translate(40px,-25px) scaleX(1); }
  40%  { transform: translate(80px, 10px) scaleX(-1); }
  60%  { transform: translate(40px,-15px) scaleX(-1); }
  80%  { transform: translate(-20px, 5px) scaleX(1); }
  100% { transform: translate(0,   0)   scaleX(1); }
}

/* Snail */
.snail {
  position: absolute;
  font-size: clamp(24px, 3vw, 42px);
  bottom: 4px;
  left: -60px;
  animation: snailCrawl 45s linear infinite;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
}
@keyframes snailCrawl {
  0%   { left: -60px; }
  100% { left: calc(100% + 60px); }
}

@keyframes bobble {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ═══════════════════════════════════════════════════════════
   STATE PANELS (layered over garden)
   ═══════════════════════════════════════════════════════════ */
.state-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.state-panel.active {
  opacity: 1;
  pointer-events: auto;
}

/* ── IDLE PANEL ─────────────────────────────────────────── */
.idle-panel {
  justify-content: space-between;
  padding: 5vh 0 4vh;
  gap: 0;
}

.idle-title-box {
  background: rgba(255, 255, 240, 0.75);
  border: 4px solid rgba(255, 255, 255, 0.9);
  border-radius: 32px;
  padding: 28px 60px 24px;
  text-align: center;
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.15), inset 0 0 0 2px rgba(255,255,255,0.6);
  animation: titleFloat 3s ease-in-out infinite;
}
@keyframes titleFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.idle-title {
  font-size: clamp(32px, 5vw, 72px);
  font-weight: 900;
  color: var(--text-dark);
  text-shadow: 2px 4px 0 rgba(255,255,255,0.8);
  letter-spacing: -1px;
  line-height: 1.1;
}

.idle-subtitle {
  font-size: clamp(14px, 2vw, 28px);
  color: #4A7C29;
  font-weight: 700;
  margin-top: 8px;
  letter-spacing: 1px;
}

/* ── Primary tap-to-enter button on IDLE screen ─────────── */
.idle-enter-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #66BB6A 0%, #388E3C 100%);
  color: #fff;
  border: none;
  border-radius: 60px;
  padding: clamp(16px, 2.4vh, 24px) clamp(40px, 6vw, 72px);
  font-family: 'Nunito', cursive, sans-serif;
  font-size: clamp(20px, 3vw, 42px);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 0 #2E7D32, 0 14px 32px rgba(0,0,0,0.28);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
  /* Pulsing attention animation */
  animation: idleBtnPulse 2.2s ease-in-out infinite;
}
.idle-enter-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, transparent 60%);
  border-radius: inherit;
  pointer-events: none;
}
.idle-enter-btn:hover  {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 12px 0 #2E7D32, 0 20px 36px rgba(0,0,0,0.3);
  animation: none;
}
.idle-enter-btn:active {
  transform: translateY(5px) scale(0.98);
  box-shadow: 0 3px 0 #2E7D32, 0 6px 14px rgba(0,0,0,0.2);
  animation: none;
}
@keyframes idleBtnPulse {
  0%,100% { transform: scale(1);    box-shadow: 0 8px 0 #2E7D32, 0 14px 32px rgba(0,0,0,0.28); }
  50%      { transform: scale(1.04); box-shadow: 0 10px 0 #2E7D32, 0 18px 40px rgba(76,175,80,0.45); }
}

/* ── Camera hint below the button ───────────────────────── */
.idle-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.72);
  border-radius: 50px;
  padding: 10px 28px;
  font-size: clamp(13px, 1.6vw, 22px);
  font-weight: 700;
  color: #3A6B20;
  box-shadow: 0 3px 12px rgba(0,0,0,0.1);
  opacity: 0.85;
}

.pulse-dot {
  width: 13px; height: 13px;
  background: #4CAF50;
  border-radius: 50%;
  animation: dotPulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
  transition: background 0.4s;
}
@keyframes dotPulse {
  0%,100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.7); opacity: 0.5; }
}

/* ── ATTRACT PANEL ──────────────────────────────────────── */
.attract-panel {
  background: rgba(100, 200, 80, 0.15);
  backdrop-filter: blur(2px);
}

.attract-bubble {
  background: var(--attract-bg);
  border-radius: 40px;
  padding: 52px 72px 44px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.22), 0 0 0 6px rgba(255,255,255,0.7);
  animation: bubblePop 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
  position: relative;
  z-index: 2;
  max-width: 680px;
  width: 90%;
}

@keyframes bubblePop {
  0%   { transform: scale(0.6) translateY(30px); opacity: 0; }
  100% { transform: scale(1)   translateY(0);    opacity: 1; }
}

.bubble-emoji {
  font-size: clamp(48px, 7vw, 100px);
  line-height: 1;
  margin-bottom: 8px;
  animation: waveHand 1.2s ease-in-out infinite;
  transform-origin: 70% 80%;
}
@keyframes waveHand {
  0%,100% { transform: rotate(0deg); }
  25%      { transform: rotate(-20deg); }
  75%      { transform: rotate(20deg); }
}

.attract-greeting {
  font-size: clamp(40px, 6.5vw, 96px);
  font-weight: 900;
  color: #2E7D32;
  line-height: 1;
  margin-bottom: 12px;
  text-shadow: 3px 5px 0 rgba(0,0,0,0.08);
}

.attract-sub {
  font-size: clamp(18px, 2.6vw, 36px);
  font-weight: 700;
  color: #5D4037;
  margin-bottom: 36px;
  line-height: 1.3;
}

/* Start Button */
.start-button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #66BB6A 0%, #388E3C 100%);
  color: #fff;
  border: none;
  border-radius: 60px;
  padding: 20px 54px;
  font-family: 'Nunito', cursive, sans-serif;
  font-size: clamp(18px, 2.4vw, 34px);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 0 #2E7D32, 0 12px 24px rgba(0,0,0,0.25);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
}
.start-button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, transparent 60%);
  border-radius: inherit;
}
.start-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 11px 0 #2E7D32, 0 16px 28px rgba(0,0,0,0.28);
}
.start-button:active {
  transform: translateY(5px);
  box-shadow: 0 3px 0 #2E7D32, 0 6px 14px rgba(0,0,0,0.2);
}

.btn-icon {
  font-size: 1.2em;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2));
}

/* Floating leaves around attract panel */
.floating-leaves {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.leaf {
  position: absolute;
  font-size: clamp(24px, 3vw, 48px);
  animation: leafDrift linear infinite;
  opacity: 0.7;
}
.l1 { top: 8%;  left: 6%;  animation-duration: 8s;  animation-delay: 0s;  }
.l2 { top: 15%; right: 7%; animation-duration: 11s; animation-delay: 2s;  }
.l3 { bottom: 20%; left: 4%;  animation-duration: 9s;  animation-delay: 4s;  }
.l4 { bottom: 12%; right: 5%; animation-duration: 12s; animation-delay: 1s;  }
.l5 { top: 40%; left: 2%;  animation-duration: 10s; animation-delay: 6s;  }

@keyframes leafDrift {
  0%   { transform: translate(0, 0)    rotate(0deg)   scale(1); }
  25%  { transform: translate(20px,-15px) rotate(45deg)  scale(1.05); }
  50%  { transform: translate(-10px, 20px) rotate(90deg)  scale(0.95); }
  75%  { transform: translate(15px, -5px) rotate(135deg) scale(1.02); }
  100% { transform: translate(0, 0)    rotate(180deg)  scale(1); }
}

/* ═══════════════════════════════════════════════════════════
   STATUS BAR (dev info, can be hidden in production)
   ═══════════════════════════════════════════════════════════ */
.status-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.55);
  color: #A5D6A7;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  padding: 6px 18px;
  display: flex;
  gap: 28px;
  z-index: 9999;
  backdrop-filter: blur(4px);
  border-top: 1px solid rgba(76,175,80,0.3);
}
.status-bar span { opacity: 0.9; }

/* ═══════════════════════════════════════════════════════════
   CAMERA PERMISSION OVERLAY
   ═══════════════════════════════════════════════════════════ */
#cam-permission-overlay {
  position: fixed;
  inset: 0;
  background: rgba(40, 100, 30, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  backdrop-filter: blur(8px);
  gap: 24px;
  transition: opacity 0.5s ease;
}
#cam-permission-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}
.perm-icon  { font-size: 96px; animation: bobble 2s infinite; }
.perm-title {
  font-size: clamp(24px, 3.5vw, 52px);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 3px 10px rgba(0,0,0,0.3);
}
.perm-desc {
  font-size: clamp(14px, 2vw, 26px);
  color: rgba(255,255,255,0.85);
  font-weight: 700;
  text-align: center;
  max-width: 600px;
  line-height: 1.5;
}
.perm-btn {
  background: linear-gradient(135deg, #FDD835 0%, #F9A825 100%);
  color: #4E342E;
  border: none;
  border-radius: 60px;
  padding: 18px 52px;
  font-family: 'Nunito', cursive;
  font-size: clamp(16px, 2.2vw, 30px);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 0 #E65100, 0 12px 24px rgba(0,0,0,0.3);
  transition: transform 0.12s, box-shadow 0.12s;
}
.perm-btn:hover  { transform: translateY(-3px); box-shadow: 0 11px 0 #E65100, 0 16px 28px rgba(0,0,0,0.3); }
.perm-btn:active { transform: translateY(4px);  box-shadow: 0 4px 0  #E65100, 0  6px 14px rgba(0,0,0,0.2); }

/* ═══════════════════════════════════════════════════════════
   FACE INDICATOR (subtle face-detected glow in corners)
   ═══════════════════════════════════════════════════════════ */
#face-glow {
  position: fixed;
  inset: 0;
  border: 6px solid transparent;
  border-radius: 4px;
  pointer-events: none;
  z-index: 9000;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
#face-glow.detected {
  border-color: rgba(76,175,80,0.5);
  box-shadow: inset 0 0 60px rgba(76,175,80,0.15);
}

/* ═══════════════════════════════════════════════════════════
   COUNTDOWN RING (3s before attract triggers)
   ═══════════════════════════════════════════════════════════ */
#countdown-ring {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 80px; height: 80px;
  z-index: 9001;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
#countdown-ring.visible { opacity: 1; }

.ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg   { fill: none; stroke: rgba(255,255,255,0.25); stroke-width: 8; }
.ring-fill {
  fill: none;
  stroke: #4CAF50;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset 0.1s linear;
}
.ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}