/* Storybook Chunky Nursery Styling */
:root {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

html {
  height: 100%;
  overflow: hidden;
}

/* The page is pinned to the REAL visible height. On iOS full screen 100vh is
   taller than what you can actually see, which used to push the fruit dock
   off the bottom edge. 100dvh + a JS-measured --app-height keeps it honest. */
body {
  font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  touch-action: none;
  height: 100vh;
  height: 100dvh;
  height: var(--app-height, 100dvh);
  overflow: hidden;
}

/* The play area is the only part allowed to shrink, so the header and the
   fruit dock are always on screen. */
body > main {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

/* Canvas fills the play area without ever growing it (no inline px sizes). */
#gameCanvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* HUD buttons */
.hud-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 42px;
  min-width: 42px;
  padding: 0 10px;
  border-radius: 9999px;
  border-width: 3px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.2s ease;
  outline: none;
  cursor: pointer;
}

/* Fruit Spawn Dock Buttons */
.fruit-btn {
  flex: 1 1 0;
  max-width: 104px;
  height: 74px;
  border-radius: 22px;
  border-width: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.12s ease;
  position: relative;
  overflow: hidden;
}

@media (min-width: 640px) {
  .fruit-btn {
    height: 84px;
  }
}

.fruit-btn:active {
  transform: translateY(4px) scale(0.96);
  box-shadow: none !important;
}

.fruit-btn-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.fruit-btn-icon {
  font-size: 2rem;
  line-height: 1;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
}

@media (min-width: 640px) {
  .fruit-btn-icon {
    font-size: 2.3rem;
  }
}

.fruit-btn-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-top: 2px;
  line-height: 1;
  text-transform: uppercase;
}

@media (min-width: 640px) {
  .fruit-btn-label {
    font-size: 13px;
  }
}

/* Short screens (landscape phones, small full-screen webviews): compress the
   dock and header so all five fruit buttons still fit above the fold. */
@media (max-height: 620px) {
  .fruit-btn {
    height: 60px;
    border-radius: 18px;
    border-width: 3px;
  }
  .fruit-btn-icon {
    font-size: 1.55rem;
  }
  .fruit-btn-label {
    font-size: 10px;
    margin-top: 1px;
  }
  .fruit-dock {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .hud-btn {
    height: 36px;
    min-width: 36px;
    padding: 0 8px;
  }
  header {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }
}

/* Gentle floating clouds background animation */
@keyframes floatSlow {
  0% { transform: translateX(0px); }
  50% { transform: translateX(18px); }
  100% { transform: translateX(0px); }
}

@keyframes floatReverse {
  0% { transform: translateX(0px); }
  50% { transform: translateX(-16px); }
  100% { transform: translateX(0px); }
}

.cloud-1 {
  animation: floatSlow 8s ease-in-out infinite;
}

.cloud-2 {
  animation: floatReverse 10s ease-in-out infinite;
}

/* Prevent image ghosting/selection */
img, svg, canvas {
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------------------------------------------------------
   CALM MODE — quieter, slower, floaty
   --------------------------------------------------------- */

.calm-toggle {
  background-color: #CBE0FF;
  border-color: #7FA9E2;
  color: #21456F;
  box-shadow: 0 3px 0 #6B93C9;
}

body.calm-mode .calm-toggle {
  background-color: #6F9BE0;
  border-color: #4B76B8;
  color: #FFFFFF;
  box-shadow: 0 3px 0 #3A5C93;
}

.calm-wash {
  z-index: 5;
  opacity: 0;
  transition: opacity 700ms ease;
  background: linear-gradient(
    to bottom,
    rgba(222, 236, 255, 0.62),
    rgba(233, 228, 255, 0.58),
    rgba(255, 244, 236, 0.66)
  );
}

body.calm-mode .calm-wash {
  opacity: 1;
}

body.calm-mode {
  background-color: #F4F7FC;
}

body.calm-mode header {
  background-color: rgba(240, 246, 254, 0.94);
  border-bottom-color: #D9E6F6;
}

body.calm-mode footer {
  background-color: #EEF4FC;
  border-top-color: #D9E6F6;
}

body.calm-mode .animate-bounce {
  animation: none;
}

body.calm-mode .cloud-1,
body.calm-mode .cloud-2 {
  animation-duration: 20s;
}

@media (prefers-reduced-motion: reduce) {
  .cloud-1,
  .cloud-2,
  .animate-bounce {
    animation: none !important;
  }
  .calm-wash {
    transition: none;
  }
}