/* The title and button font: Fredoka, under the SIL Open Font License
   (public/fonts/Fredoka-OFL.txt), with Nunito for the small print. They're
   kept here rather than loaded from Google Fonts, so the page doesn't wait
   on, or tell, another site. Until they load, the page uses its usual font. */
@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 {
  --ink: #2b2350; /* every outline, and the text */
  --sky: #a8e0ff;
  --pink: #ff5fa2;
  --yellow: #ffc21a;
  --grass: #5bbe3f;
}

* {
  box-sizing: border-box;
}

/* Each page fills the whole screen, round a phone's notch too
   (viewport-fit=cover), with what's along its edges kept clear of the
   notch by the safe-area insets. No bounce past the edges either, which
   would show the page behind. */
html {
  overscroll-behavior: none;
}

body {
  margin: 0;
  background: var(--grass); /* under the start screen, the hill carries on */
  color: var(--ink);
  font-family: Nunito, system-ui, sans-serif;
  text-align: center;
}

/* ---- The start screen: one full screen, the sky behind it ---- */

.start {
  position: relative;
  min-height: 100vh;
  min-height: 100svh; /* on phones, the screen without the address bar */
  overflow: hidden;
  background: var(--sky);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 3vh, 1.75rem);
  padding: 2rem max(1rem, env(safe-area-inset-right)) 3rem max(1rem, env(safe-area-inset-left));
}

/* Fills the screen and is cropped at the sides on a narrow one, so the
   rainbow stays centered with the hills along the bottom. */
.scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.start > :not(.scene) {
  position: relative;
  z-index: 1;
}

.logo {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Fredoka, system-ui, sans-serif;
  font-weight: 700;
  line-height: 0.9;
}

.logo span {
  -webkit-text-stroke: 0.1em var(--ink);
  paint-order: stroke fill; /* the outline goes behind the letters */
}

.logo-unicorn {
  font-size: clamp(3.5rem, 13vw, 7.75rem);
  color: var(--pink);
  letter-spacing: 0.02em;
}

.logo-dash {
  font-size: clamp(4rem, 15vw, 8.75rem);
  color: var(--yellow);
  letter-spacing: 0.04em;
  transform: rotate(-4deg);
}

/* ---- The unicorn and her rainbow trail ---- */

.stage {
  width: min(88vw, 30rem);
  aspect-ratio: 30 / 16;
  transform: rotate(-8deg); /* leaping up and to the right */
}

.trail {
  position: absolute;
  left: 0;
  width: 62%;
  top: 46%;
  height: 22%;
  display: flex;
  flex-direction: column;
  border-radius: 999px 0 0 999px;
  overflow: hidden;
  transform-origin: right center;
}

.trail span {
  flex: 1;
}

.trail span:nth-child(1) { background: #ff5a5f; }
.trail span:nth-child(2) { background: #ff9f1c; }
.trail span:nth-child(3) { background: #ffd23f; }
.trail span:nth-child(4) { background: #5bd06b; }
.trail span:nth-child(5) { background: #3a8dff; }
.trail span:nth-child(6) { background: #9b6bff; }

.unicorn-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 62%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* no double-tap zoom when tapping twice */
  animation: bob 1.2s ease-in-out infinite;
}

.unicorn-btn:focus-visible {
  outline: 4px dashed var(--ink);
  outline-offset: 4px;
  border-radius: 1rem;
}

.unicorn {
  display: block;
  width: 100%;
  height: auto;
}

/* Bobbing along while she waits */
@keyframes bob {
  50% { transform: translateY(-4%); }
}

/* Tapped: a hop (450ms, HOP_MS in script.js) */
.hopping .unicorn-btn {
  animation: hop 450ms ease-out;
}

@keyframes hop {
  40% { transform: translateY(-38%) rotate(-6deg); }
  100% { transform: translateY(0); }
}

/* Play: off the right of the screen (900ms, DASH_MS), the trail
   stretching out behind her... */
.dashing .unicorn-btn {
  animation: dash-off 900ms ease-in forwards;
}

.dashing .trail {
  animation: stretch 900ms ease-in forwards;
}

@keyframes dash-off {
  20% { transform: translateX(-6%); }
  100% { transform: translateX(120vw); }
}

@keyframes stretch {
  100% { transform: translateX(120vw) scaleX(3); }
}

/* ...then back in from the left (600ms, RETURN_MS) */
.returning .unicorn-btn,
.returning .trail {
  animation: trot-in 600ms ease-out;
}

@keyframes trot-in {
  from { transform: translateX(-120vw); }
}

/* ---- Play ---- */

.play-btn {
  width: 10rem;
  height: 6.5rem;
  border: 6px solid var(--ink);
  border-radius: 2.5rem;
  background: var(--pink);
  box-shadow: 0 10px 0 var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  touch-action: manipulation;
  transition: transform 0.1s, box-shadow 0.1s;
}

.play-btn svg {
  width: 4.5rem;
  height: 4.5rem;
  fill: #ffffff;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linejoin: round;
}

.play-btn:hover {
  background: #ff74b0;
}

/* Pressed down into its shadow */
.play-btn:active,
.play-btn:disabled {
  transform: translateY(8px);
  box-shadow: 0 2px 0 var(--ink);
}

.play-btn:disabled {
  cursor: default;
}

.play-btn:focus-visible {
  outline: 4px dashed var(--ink);
  outline-offset: 6px;
}

/* ---- Below the start screen: for grown-ups ---- */

.about,
.sister-games {
  max-width: 34rem;
  margin: 1.5rem auto 0;
  padding: 0 1rem;
  color: var(--ink); /* white on the green is too faint to read */
  font-size: 1.05rem;
  line-height: 1.5;
}

.sister-games a {
  color: var(--ink);
  font-weight: 700;
}

.signature {
  margin: 2rem 0 0;
  padding: 0 0 1.5rem;
  color: var(--ink);
  font-family: Fredoka, system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
}

/* ---- The world map ---- */

.map {
  position: relative;
  height: 100vh;
  height: 100svh; /* exactly one screen, no scrolling */
  overflow: hidden;
  background: var(--sky);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: max(1.25rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 2rem max(1rem, env(safe-area-inset-left));
  font-family: Fredoka, system-ui, sans-serif;
}

.map > :not(.scene) {
  position: relative;
  z-index: 1;
}

.map-bar {
  width: 100%;
  max-width: 70rem;
  display: flex;
  align-items: center;
}

.icon-btn {
  width: 4rem;
  height: 4rem;
  border: 5px solid var(--ink);
  border-radius: 1.25rem;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-btn svg {
  width: 2.1rem;
  height: 2.1rem;
  fill: var(--ink);
}

.icon-btn:focus-visible,
.island:focus-visible {
  outline: 4px dashed var(--ink);
  outline-offset: 5px;
}

.worlds {
  /* The circles' size, to fit the screen's width and height: small enough
     that all five, with their names, fit in one row on a computer */
  --island: clamp(5rem, min(12vw, 19vh), 10rem);
  list-style: none;
  margin: clamp(1rem, 14vh, 9rem) 0 auto; /* a bit above the middle of the sky */
  padding: 0;
  max-width: 70rem;
  display: flex;
  flex-wrap: wrap; /* on a phone, three worlds and then two */
  justify-content: center;
  align-items: flex-end;
  gap: 1.5rem 2rem;
}

.world {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

/* Where she stands, above her world */
.perch {
  width: calc(var(--island) * 0.85);
  height: calc(var(--island) * 0.68);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Only the world she's in has one; the rest sit lower, with no gap */
.world:not(.here) .perch {
  display: none;
}

.perch .unicorn {
  width: 100%;
  height: auto;
}

.island {
  position: relative;
  width: var(--island);
  aspect-ratio: 1;
  border: 5px solid var(--ink);
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
}

.island > svg {
  width: 55%;
  height: 55%;
}

.world[data-world='meadow'] .island { background: #8edb6e; }
.world[data-world='candy'] .island { background: #ffb3d6; }
.world[data-world='cloud'] .island { background: #e8f4ff; }
.world[data-world='crystal'] .island { background: #9ee6e0; }
.world[data-world='night'] .island { background: #12306a; }

/* Each world's name, under its circle (the circle's label already says it
   to screen readers). Room for two lines, so the circles stay in a row. */
.world-name {
  width: calc(var(--island) + 1.5rem);
  min-height: 2.4em;
  margin-top: 0.5rem; /* clear of the ring round her world */
  font-family: Fredoka, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(0.95rem, calc(var(--island) * 0.14), 1.35rem); /* in step with the circles */
  line-height: 1.2;
  text-align: center;
  color: var(--ink);
  cursor: pointer;
}

/* The world she's in: a white ring, outlined */
.island[aria-pressed='true'] {
  box-shadow: 0 0 0 7px #ffffff, 0 0 0 12px var(--ink);
}

/* Tap her world again and she hops (450ms, HOP_MS in game/unicorn.js) */
.world.hopping .perch {
  animation: hop 450ms ease-out;
}

/* Side by side on a big screen, every other world a little higher, like
   stepping stones */
@media (min-width: 900px) {
  .world:nth-child(even) {
    transform: translateY(calc(var(--island) * -0.35));
  }
}

/* On a phone or small tablet, bigger circles in rows of two or three (not
   four and one), a little closer together to leave room for the names */
@media (max-width: 720px) {
  .worlds {
    --island: clamp(4.5rem, min(30vw, 12.5vh), 8rem);
    max-width: calc(var(--island) * 3 + 8.5rem); /* three, with their names and gaps */
    margin-top: clamp(1rem, 6vh, 3rem);
    row-gap: 1rem;
  }

  .world-name {
    min-height: 0;
    margin-top: 0.25rem;
  }
}

/* The signature sits on the hill, so the map is still one screen */
.map .signature {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.75rem;
  margin: 0;
  padding: 0;
}

/* ---- A level: the Meadow, Candy Canyon ---- */

.level {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--sky);
  font-family: Fredoka, system-ui, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation; /* no double-tap zoom, on the buttons and cards too */
}

/* The play area: tap or hold anywhere. Far hills along the bottom drift
   by slower than the ground (game/meadow.js moves them). */
.view {
  position: absolute;
  inset: 0;
  touch-action: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

/* Far hills along the bottom, drifting by slower than the ground. Their
   own layer, one hill wider than the screen, slid along by level.js and
   wrapped round a hill at a time, so they never need repainting. */
.hills {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% + 640px);
  height: 360px;
  background-image: radial-gradient(circle at 50% 100%, #c6f0ae 0 45%, transparent 45.5%);
  background-size: 640px 360px;
  background-repeat: repeat-x;
  will-change: transform;
}

/* Everything on the course, in world units; meadow.js scales it to the
   screen and slides it along under her. */
.course {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 600px;
  transform-origin: 0 100%;
  will-change: transform; /* slid by the graphics chip, not redrawn */
}

.course > * {
  position: absolute;
}

.ground {
  border: 5px solid var(--ink);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(var(--grass) 0 28px, var(--ink) 28px 33px, #edae76 33px);
}

.sky-cloud {
  opacity: 0.85;
}

/* Candy Canyon's lollipop trees: behind everything else on the course,
   a little faded so they read as far away */
.lollipop-tree {
  height: auto;
  opacity: 0.7;
}

.cloud-platform {
  height: 40px;
  border: 4px solid var(--ink);
  border-radius: 20px;
  background: #ffffff;
}

.gem {
  width: 32px;
  height: 38px;
  transition: transform 0.25s, opacity 0.25s;
}

/* Caught: it pops up and fades */
.gem.got {
  opacity: 0;
  transform: translateY(-30px) scale(1.4);
}

.castle {
  width: 340px;
  height: 300px;
}

/* Gumdrops (Candy Canyon): she bounces off them, and they squish */
.gumdrop {
  width: 90px;
  height: 48px;
  transform-origin: 50% 100%;
}

.gumdrop.squish {
  animation: squish 0.35s ease-out;
}

@keyframes squish {
  30% { transform: scale(1.25, 0.6); }
  60% { transform: scale(0.9, 1.15); }
}

/* Paint pots (Cloud Kingdom): a splash as she dips her mane in */
.paint-pot {
  width: 80px;
  height: 92px;
  transform-origin: 50% 100%;
}

.paint-pot.splash {
  animation: splash 0.4s ease-out;
}

@keyframes splash {
  40% { transform: scale(1.2, 0.85); }
}

/* Something prickly to jump over, in every world: a wobble when she runs
   into it */
.thorns {
  width: 100px;
  height: 74px;
}

.thorns.ouch {
  animation: ouch 0.4s ease-in-out;
}

@keyframes ouch {
  25%, 75% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}

/* Crystal walls (Crystal Caves): a wobble when bumped, and smashed apart
   by a dash, each shard flying its own way */
.crystal-wall {
  width: 128px;
  height: 334px;
  transform-origin: 50% 100%;
}

.crystal-wall.wobble {
  animation: wobble 0.4s ease-in-out;
}

@keyframes wobble {
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}

.crystal-wall .shard {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

.crystal-wall.smashed .shard {
  opacity: 0;
}

.crystal-wall.smashed .shard:nth-child(1) { transform: translate(-60px, -120px) rotate(-50deg); }
.crystal-wall.smashed .shard:nth-child(2) { transform: translate(40px, -180px) rotate(40deg); }
.crystal-wall.smashed .shard:nth-child(3) { transform: translate(120px, -90px) rotate(70deg); }

.crystal-wall.smashed > g:last-child {
  opacity: 0;
}

.cave-crystals {
  height: auto;
  opacity: 0.55;
}

/* Crystal Caves: a dark cave, purple hills, crystal-topped ground */
.level.crystal {
  background: #2e2650;
}

.crystal .hills {
  background-image: radial-gradient(circle at 50% 100%, #463b7a 0 45%, transparent 45.5%);
}

.crystal .ground {
  background: linear-gradient(#7fe3ff 0 28px, var(--ink) 28px 33px, #4b3f7a 33px);
}

.crystal .signature {
  color: #ffffff; /* on the dark cave floor */
}

/* Shooting stars (the Night Sky): glowing as she rides one, then zooming
   off and fading when she hops off */
.shooting-star {
  width: 140px;
  height: 96px;
  filter: drop-shadow(0 0 10px #ffe58a);
}

.shooting-star.riding {
  filter: drop-shadow(0 0 18px #fff3b0);
}

.shooting-star.gone {
  translate: 500px -260px;
  opacity: 0;
  transition: translate 0.9s ease-in, opacity 0.9s ease-in;
}

/* The Night Sky: deep blue, fading to teal at the horizon, with a crescent
   moon and twinkly stars that stay put (they're far away), dark teal hills
   and moonlit grass. Blue and green, to tell it from the purple cave. */
.level.night {
  background-color: #0d1f45;
  background-image:
    radial-gradient(circle at 8% 18%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 22% 8%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 34% 30%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 48% 12%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 58% 26%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 70% 6%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 92% 34%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 14% 42%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 64% 44%, #fff 0 1px, transparent 2px),
    linear-gradient(#0a1838 0%, #12306a 55%, #1f6f8b 100%);
}

.night .view::before {
  content: '';
  position: absolute;
  top: 10%;
  right: 12%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  box-shadow: 24px 10px 0 0 #fff4c7; /* the shadow is the crescent */
  filter: drop-shadow(0 0 12px rgba(255, 244, 199, 0.6));
}

.night .hills {
  background-image: radial-gradient(circle at 50% 100%, #0f4a5c 0 45%, transparent 45.5%);
}

.night .ground {
  background: linear-gradient(#7fdcb4 0 28px, var(--ink) 28px 33px, #174652 33px);
}

.night .signature {
  color: #ffffff;
}

/* Cloud Kingdom: a pale blue sky, white cloud hills and fluffy ground */
.level.cloud {
  background: #dce9ff;
}

.cloud .hills {
  background-image: radial-gradient(circle at 50% 100%, #f4f8ff 0 45%, transparent 45.5%);
}

.cloud .ground {
  background: linear-gradient(#ffffff 0 28px, var(--ink) 28px 33px, #c9d6f5 33px);
}

/* Candy Canyon: a pink sky and hills, frosting on chocolate */
.level.candy {
  background: #ffe3f1;
}

.candy .hills {
  background-image: radial-gradient(circle at 50% 100%, #ffc2df 0 45%, transparent 45.5%);
}

.candy .ground {
  background: linear-gradient(#ff8fc0 0 28px, var(--ink) 28px 33px, #9c6644 33px);
}

/* Fireworks: hidden until every diamond's caught and she's at the castle */
.firework {
  width: 0;
  height: 0;
  display: none;
}

.firework.going {
  display: block;
}

.firework span {
  position: absolute;
  left: -7px;
  top: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color);
  box-shadow: 0 0 0 3px #ffffff;
  opacity: 0;
  animation: burst 1.5s ease-out both; /* once each */
}

@keyframes burst {
  0% { transform: rotate(var(--angle)) translateY(0) scale(0.4); opacity: 1; }
  65% { opacity: 1; }
  100% { transform: rotate(var(--angle)) translateY(-110px) scale(1); opacity: 0; }
}

.runner {
  left: 0;
  width: 140px;
  will-change: transform; /* moved with a transform: no re-layout each frame */
}

.runner .unicorn {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

/* Her rainbow, behind her while she dashes */
.runner .trail {
  left: auto;
  right: 55%;
  top: 40%;
  width: 260px;
  height: 26%;
  opacity: 0;
  transition: opacity 0.15s;
  animation: none !important;
}

.runner.dashing .trail {
  opacity: 1;
}

.level-bar {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  left: max(1rem, env(safe-area-inset-left));
  right: max(1rem, env(safe-area-inset-right));
  z-index: 1; /* above the directions, castle and game over screens, so the map button always works */
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none; /* taps between the buttons still reach the course, or the screen showing */
}

.level-bar > * {
  pointer-events: auto;
}

.gem-count {
  height: 4rem;
  min-width: 6.5rem;
  border: 5px solid var(--ink);
  border-radius: 999px;
  background: #ffffff;
  padding: 0 1.1rem 0 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
}

.gem-count svg {
  width: 1.8rem;
  height: 2.1rem;
}

/* A diamond caught: the counter gives a little bounce */
.gem-count.bump {
  animation: bump 0.25s ease-out;
}

@keyframes bump {
  50% { transform: scale(1.15); }
}

.finish {
  position: absolute;
  inset: 0; /* no dimming, so the fireworks show bright */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  /* in the open sky to the right of the castle and its fireworks */
  padding: 0 max(4vw, env(safe-area-inset-right)) 12vh 50vw;
}

.finish-title,
.game-over-title {
  margin: 0;
  font-size: clamp(3rem, 10vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--yellow);
  -webkit-text-stroke: 0.1em var(--ink);
  paint-order: stroke fill;
  text-align: center;
}

.finish-title {
  color: var(--pink);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
}

.finish[hidden],
.game-over[hidden] {
  display: none;
}

/* Before the run: the world's name, with How to play and Go */
.directions {
  position: absolute;
  inset: 0;
  background: rgba(43, 35, 80, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem max(1rem, env(safe-area-inset-right)) 1rem max(1rem, env(safe-area-inset-left));
}

.directions[hidden] {
  display: none;
}

.directions-card {
  width: fit-content;
  max-width: min(34rem, 100%);
  max-height: 100%;
  overflow-y: auto;
  border: 6px solid var(--ink);
  border-radius: 2rem;
  background: #ffffff;
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.directions-title {
  margin: 0;
  font-size: 2.2rem;
  color: var(--pink);
  -webkit-text-stroke: 0.08em var(--ink);
  paint-order: stroke fill;
}

.how-to {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
}

.how-to[hidden] {
  display: none;
}

.directions-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.how-btn {
  height: 4.5rem;
  padding: 0 1.5rem;
  border: 5px solid var(--ink);
  border-radius: 2.25rem;
  background: #ffffff;
  box-shadow: 0 8px 0 var(--ink);
  color: var(--ink);
  font-family: Fredoka, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  cursor: pointer;
  margin-bottom: 8px;
}

.how-btn[hidden] {
  display: none;
}

.how-btn:active {
  transform: translateY(6px);
  box-shadow: 0 2px 0 var(--ink);
}

.how-btn:focus-visible {
  outline: 4px dashed var(--ink);
  outline-offset: 6px;
}

.direction {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
  width: 100%;
}

.direction p {
  margin: 0;
  font-family: Nunito, system-ui, sans-serif;
  font-size: 1.1rem;
  line-height: 1.4;
}

.direction strong {
  font-family: Fredoka, system-ui, sans-serif;
  font-size: 1.3rem;
}

.direction-pic {
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
}

.thorn-pic {
  display: flex;
  align-items: center;
}

.thorn-pic svg {
  width: 100%;
}

/* On a short screen, the directions closer together, so they all fit */
@media (max-height: 700px) {
  .directions-card {
    padding: 0.9rem 1.25rem 1.1rem;
    gap: 0.6rem;
  }

  .directions-title {
    font-size: 1.8rem;
  }

  .how-to {
    gap: 0.5rem;
  }

  .direction-pic {
    width: 3.25rem;
    height: 3.25rem;
  }

  .direction p {
    font-size: 1rem;
    line-height: 1.3;
  }
}

.direction-keys {
  margin: 0;
  font-family: Nunito, system-ui, sans-serif;
  font-size: 0.95rem;
  color: #5a4ba0;
}

.go-btn {
  min-width: 9rem;
  height: 4.5rem;
  border: 5px solid var(--ink);
  border-radius: 2.25rem;
  background: var(--pink);
  box-shadow: 0 8px 0 var(--ink);
  color: #ffffff;
  -webkit-text-stroke: 0.08em var(--ink);
  paint-order: stroke fill;
  font-family: Fredoka, system-ui, sans-serif;
  font-weight: 700;
  font-size: 2.2rem;
  cursor: pointer;
  margin-bottom: 8px;
}

.go-btn:active {
  transform: translateY(6px);
  box-shadow: 0 2px 0 var(--ink);
}

.go-btn:focus-visible {
  outline: 4px dashed var(--ink);
  outline-offset: 6px;
}

/* Fell in a gap: darker, with her dizzy in a circle above the buttons */
.game-over {
  position: absolute;
  inset: 0;
  background: rgba(43, 35, 80, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.oops {
  position: relative;
  width: min(14rem, 50vw);
  aspect-ratio: 1;
  border: 6px solid var(--ink);
  border-radius: 50%;
  background: var(--sky);
  display: flex;
  align-items: center;
  justify-content: center;
}

.oops .unicorn {
  width: 78%;
  transform: rotate(12deg);
}

.oops svg:last-child {
  position: absolute;
  top: 8%;
  width: 55%;
  animation: dizzy 1.6s linear infinite;
}

@keyframes dizzy {
  50% { transform: translateY(-6%) rotate(-6deg); }
}

.finish-buttons {
  display: flex;
  gap: 1.25rem;
}

.finish .icon-btn,
.game-over .icon-btn {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 1.75rem;
  cursor: pointer;
}

.finish .icon-btn svg,
.game-over .icon-btn svg {
  width: 2.8rem;
  height: 2.8rem;
}

.finish .next-btn {
  background: var(--grass);
}

.replay-btn svg,
.retry-btn svg {
  stroke: var(--ink);
}

.level .signature {
  position: absolute;
  right: max(0.75rem, env(safe-area-inset-right));
  bottom: max(0.4rem, env(safe-area-inset-bottom));
  margin: 0;
  padding: 0;
  font-size: 0.75rem;
  pointer-events: none;
}

/* On a tall screen, like an upright phone, there's open sky for the
   castle buttons, above the fireworks */
@media (max-aspect-ratio: 1/1) {
  .finish {
    justify-content: flex-start;
    padding: 18vh 1rem 0;
  }

  .finish-title {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }
}

/* A phone held sideways: a wide, short screen. Everything sized by the
   screen's height, so each screen still fits without scrolling. */
@media (max-height: 500px) and (min-aspect-ratio: 1/1) {
  .start {
    gap: 0.25rem;
    padding: 0.75rem 1rem 1rem;
  }

  .logo-unicorn {
    font-size: 15vh;
  }

  .logo-dash {
    font-size: 17vh;
  }

  .stage {
    width: min(88vw, 60vh);
  }

  .play-btn {
    width: 7rem;
    height: 4.5rem;
    border-radius: 1.75rem;
  }

  .play-btn svg {
    width: 3rem;
    height: 3rem;
  }

  .worlds {
    --island: clamp(3.5rem, 18vh, 5rem);
    margin-top: 0;
  }

  /* The directions in two columns, side by side */
  .directions-card {
    max-width: min(52rem, 100%);
  }

  .how-to {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1.25rem;
  }

  .direction-keys {
    grid-column: 1 / -1;
  }

  .go-btn {
    height: 3.75rem;
    font-size: 1.9rem;
  }

  .game-over {
    gap: 0.6rem;
  }

  .game-over-title {
    font-size: 13vh;
  }

  .oops {
    width: 34vh;
  }

  .finish {
    gap: 0.75rem;
    padding-top: 4.5rem; /* under the diamond counter */
  }

  .finish-title {
    font-size: 12vh;
  }

  .finish .icon-btn,
  .game-over .icon-btn {
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 1.4rem;
  }

  .finish .icon-btn svg,
  .game-over .icon-btn svg {
    width: 2.2rem;
    height: 2.2rem;
  }
}

/* For players whose devices ask for less motion: she stays put. */
@media (prefers-reduced-motion: reduce) {
  .unicorn-btn,
  .trail,
  .perch {
    animation: none !important;
  }
}