:root {
  --sun: #FFC93C; --fern: #1E7A5F; --poppy: #FF5A45; --sky: #3EC1D3;
  --paper: #FFF9EC; --ink: #1B2E28; --dim: #5b6f68;
  --hatchling-shell: #23241f; --hatchling-shell-light: #3a3b34;
  --adult-shell: #8a3d24; --adult-shell-light: #b0552f;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper); color: var(--ink);
  font-family: 'Nunito', sans-serif; font-size: 17px; line-height: 1.5;
  overflow-x: hidden;
}
#app { max-width: 480px; margin: 0 auto; padding: 20px 16px 40px; }

header { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 14px; }
.by-zvuvim { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); font-size: 13px; }
.by-zvuvim svg { width: 18px; height: 18px; }
.by-zvuvim strong { font-family: 'Fredoka', sans-serif; font-weight: 600; }
h1 { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 28px; margin: 0; }

#stage {
  display: grid;
  border: 1px solid #e9dfc8; border-radius: 14px; overflow: hidden;
  background: var(--paper);
}
#stage > .screen {
  grid-area: 1 / 1;
  opacity: 0; pointer-events: none; transform: scale(0.98);
  transition: opacity 420ms ease, transform 420ms ease;
}
#stage > .screen.is-active {
  opacity: 1; pointer-events: auto; transform: scale(1);
}
.screen svg { display: block; width: 100%; height: auto; }

.shell-outer { fill: var(--shell); }
.shell-inner { fill: var(--shell-light); }

#screen-beach .hatchling {
  transition: transform 1000ms cubic-bezier(.4,0,.2,1);
}
#screen-beach.is-leaving .hatchling {
  transform: translate(120px, 6px) scale(0.6);
}
.beach-prompt {
  padding: 14px 16px 18px; font-size: 16px;
}
.tap-target {
  cursor: pointer;
}

#screen-crossing .crossing-caption {
  padding: 10px 16px 4px; font-size: 15px; color: var(--dim);
}
.swim-controls {
  display: flex; align-items: center; justify-content: center;
  padding: 6px 16px 18px;
}
#swim-btn {
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 17px;
  background: var(--sky); color: var(--ink); border: none; border-radius: 999px;
  padding: 12px 28px; cursor: pointer; transition: transform 120ms ease, background 120ms ease;
}
#swim-btn:active { transform: scale(0.94); background: #34a9ba; }

.path-base { fill: none; stroke: #bfe0e6; stroke-width: 3; }
.path-trail {
  fill: none; stroke: var(--fern); stroke-width: 3; stroke-linecap: round;
  transition: stroke-dashoffset 550ms cubic-bezier(.3,.7,.4,1);
}
.swim-turtle { transition: transform 550ms cubic-bezier(.3,.7,.4,1); }

#screen-gutter .gutter-caption {
  text-align: center; font-size: 30px; color: var(--dim); letter-spacing: 6px;
  padding: 0;
}
#screen-gutter svg { min-height: 300px; }

#screen-arrival .arrival-caption { padding: 14px 16px 18px; font-size: 16px; }
.mark-pulse { animation: pulse 1400ms ease-in-out 2; }
@keyframes pulse {
  0%, 100% { r: 4; opacity: 1; }
  50% { r: 7; opacity: 0.6; }
}

#screen-fact .fact-card {
  background: #F3EEDD; border-radius: 14px; padding: 20px 18px; margin: 0;
}
.fact-mark-note {
  font-size: 14px; color: var(--dim); margin: 0 0 14px;
  border-left: 3px solid var(--poppy); padding-left: 10px;
}
.fact-card h2 {
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 20px;
  margin: 0 0 10px;
}
.fact-card p { margin: 0 0 12px; }
.fact-note { font-size: 14px; color: var(--dim); }
.source { font-size: 13px; color: var(--dim); }
.source a { color: var(--fern); }

.continue-row { display: flex; justify-content: flex-end; padding: 0 16px 16px; }
.continue-row button, .restart-row button {
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 15px;
  background: none; color: var(--fern); border: 1px solid var(--fern);
  border-radius: 999px; padding: 9px 18px; cursor: pointer;
}
.restart-row { display: flex; justify-content: center; padding: 4px 16px 4px; }

footer { margin-top: 28px; font-size: 13px; color: var(--dim); }
footer a { color: var(--fern); }

@media (prefers-reduced-motion: reduce) {
  #stage > .screen, #screen-beach .hatchling, .swim-turtle, .mark-pulse {
    transition: none !important; animation: none !important;
  }
}