/* Fredoka for headings and Nunito for text, both under the SIL Open Font
   License (fonts/*-OFL.txt). Kept here rather than loaded from Google Fonts,
   so the page doesn't wait on another site. */
@font-face {
  font-family: Fredoka;
  font-weight: 600;
  font-display: swap;
  src: url(./fonts/fredoka-600.woff2) format('woff2');
}

@font-face {
  font-family: Fredoka;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/fredoka-700.woff2) format('woff2');
}

@font-face {
  font-family: Nunito;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/nunito-700.woff2) format('woff2');
}

:root {
  --bg: #f3f8e8; /* pale leaf */
  --fg: #2e4a1f; /* deep stem green */
  --muted: #5f7a4c;
  --chip: #ffffff;
  --edge: rgba(46, 74, 31, 0.14);
  --accent: #e8962e; /* sunny orange, like his head */
  --field-1: #b8de86; /* grass in the light */
  --field-2: #8fc566; /* grass in the shade */
  --blade: rgba(60, 110, 40, 0.28);
  --display: Fredoka, 'Trebuchet MS', system-ui, sans-serif;
  --body: Nunito, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141d0f;
    --fg: #e3f0d3;
    --muted: #9db58a;
    --chip: #223018;
    --edge: rgba(227, 240, 211, 0.16);
    --accent: #f2a948;
    --field-1: #4a6d33;
    --field-2: #36542a;
    --blade: rgba(170, 220, 130, 0.18);
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  padding: 20px max(16px, env(safe-area-inset-right, 0px)) 28px max(16px, env(safe-area-inset-left, 0px));
}

main {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 7vw, 2.8rem);
  margin: 0;
  line-height: 1;
}

.garden {
  position: relative;
  width: 100%;
  /* A drag on the grass steers him: don't scroll or zoom the page, select
     text, or pop up the long-press menu instead. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

#field {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 28px;
  background: var(--field-1);
  box-shadow: 0 0 0 1px var(--edge), 0 14px 30px rgba(46, 74, 31, 0.18);
  cursor: grab;
}

#field:active {
  cursor: grabbing;
}

#field:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

/* On a phone, a square field fits better. */
@media (max-width: 520px) {
  #field {
    aspect-ratio: 1;
    border-radius: 22px;
  }
}

/* A phone turned sideways: the screen is wide but short, so fit the garden
   to the screen's height instead of its width, and hide the title and the
   directions to make room, leaving just the garden and the level line. */
@media (orientation: landscape) and (max-height: 520px) {
  body:not(.home) {
    padding-block: max(6px, env(safe-area-inset-top, 0px)) max(6px, env(safe-area-inset-bottom, 0px));
  }

  body:not(.home) main {
    gap: 6px;
  }

  body:not(.home) h1,
  body:not(.home) .hint {
    display: none;
  }

  .garden {
    width: auto;
  }

  #field {
    width: auto;
    height: calc(100vh - 48px);
    height: calc(100dvh - 48px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-width: 100%;
    border-radius: 18px;
  }

  .circle-count {
    font-size: 1rem;
  }
}

/* The level and how long she is, under the garden, like PetriPals'
   "Level 1 · 1 / 4 cells". */
.circle-count {
  margin: 0;
  font-weight: 700;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

button {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--fg);
  background: var(--chip);
  border: 2px solid var(--accent);
  border-radius: 999px;
  padding: 6px 16px;
  cursor: pointer;
}

button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* The pop-up at the end of a level, win or lose, over the middle of the
   field. */
.banner {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: min(320px, 85%);
  padding: 1.25rem 1.5rem 1.5rem;
  transform: translate(-50%, -50%);
  background: var(--chip);
  border: 2px solid var(--edge);
  border-radius: 20px;
  box-shadow: 0 16px 36px rgba(46, 74, 31, 0.25);
  animation: pop-in 0.35s ease-out;
}

.banner[hidden] {
  display: none;
}

.banner h2 {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.1;
}

.banner p {
  margin: 0;
  color: var(--muted);
}

.banner-buttons {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.banner-buttons #play-again {
  background: var(--accent);
  color: #2b1a05;
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.85);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .banner {
    animation: none;
  }
}

/* Arrow-key directions on a computer, touch directions on a phone or tablet.
   The media query picks from the device before any script runs (a finger is
   a "coarse" pointer); then game/input.js switches them to match whatever the
   player actually uses, for devices with both. */
.for-touch {
  display: none;
}

@media (pointer: coarse) {
  .for-keys {
    display: none;
  }

  .for-touch {
    display: inline;
  }
}

html.input-touch .for-keys,
html.input-keys .for-touch {
  display: none;
}

html.input-touch .for-touch,
html.input-keys .for-keys {
  display: inline;
}

.hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 52ch;
}

/* The title on the game page goes back to the home page. */
.home-link {
  color: inherit;
  text-decoration: none;
}

.home-link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
  border-radius: 8px;
}

/* The home page: the caterpillar, the name, and the
   Start button, centered, with the signature pushed to the bottom. */
body.home {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

body.home main {
  flex: 1;
  gap: 0;
}

.home-caterpillar {
  /* Wider than the Snackerpillar logo under her, on any screen. */
  width: min(680px, 100%);
  margin-top: 2.5rem;
  pointer-events: none;
}

.home-caterpillar svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Each circle bobs up and down a moment after the one in front of it, so a
   little wave runs down her body. */
.home-caterpillar .seg {
  animation: crawl 1.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.12s);
}

.home-caterpillar .antennae {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: antennae 2.2s ease-in-out infinite;
}

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

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

.logo {
  margin: 1.6rem 0 0.4rem;
  font-size: clamp(2.4rem, 13vw, 5.2rem);
  letter-spacing: 0.01em;
}

.home-tagline {
  margin: 0 0 1.4rem;
  font-size: clamp(1.05rem, 4.6vw, 1.3rem);
  color: var(--muted);
  letter-spacing: 0.01em;
}

.start-btn {
  margin-top: 0.5rem;
  padding: 0.8rem 2rem;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #2b1a05;
  background: var(--accent);
  border-radius: 999px;
  box-shadow: 0 4px 0 #b86f17;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.2s ease;
}

.start-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 5px 0 #b86f17;
}

.start-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #b86f17;
}

.start-btn:focus-visible {
  outline: 3px solid var(--fg);
  outline-offset: 4px;
}

.about {
  max-width: 34rem;
  margin: 2rem auto 0;
  line-height: 1.5;
  color: var(--muted);
}

.sister-game {
  margin: 0.75rem auto 0;
  color: var(--muted);
}

.sister-game a {
  color: var(--fg);
  font-weight: 700;
}

.signature {
  margin: 2rem 0 0.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  .home-caterpillar .seg,
  .home-caterpillar .antennae {
    animation: none;
  }

  .start-btn {
    transition: none;
  }
}