/* Understory. The forest fills the frame; words are few and set like the captions of an old field guide
   (IM Fell DW Pica, one family, roman and italic). The title sits low on the left so the bird stays in view.
   Gold is kept for the seeds and what belongs to them: the Fly button and the count of a run. */
:root {
  --paper: #f3ecd9;
  --ink: #101a15;
  --seed: #f2c46a;
  --seed-deep: #c98a2b;
  --moss: #8ea562;
  --veil: rgba(10, 19, 15, .62);
  --fell: "IM Fell DW Pica", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--ink); color: var(--paper); font-family: var(--fell); font-size: 18px; line-height: 1.45; overflow: hidden;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
button:focus-visible { outline: 2px solid var(--seed); outline-offset: 4px; }
h1, h2, p, dl, dd { margin: 0; }

/* ---- Title ---- */
#title {
  position: fixed; left: 0; bottom: 0; width: min(100%, 780px); padding: 0 clamp(20px, 5vw, 64px) clamp(22px, 5vh, 56px);
  background: radial-gradient(130% 105% at 0% 100%, var(--veil) 0%, rgba(10, 19, 15, .38) 42%, transparent 70%);
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1);
}
#title h1 {
  font-style: italic; font-weight: 400; font-size: clamp(64px, 12.5vw, 176px); line-height: .86; letter-spacing: -.035em;
  margin: 0 0 .16em -.05em; text-shadow: 0 2px 40px rgba(6, 12, 9, .55);
}
.lede { font-size: clamp(18px, 1.55vw, 23px); line-height: 1.4; max-width: 31em; text-wrap: pretty; text-shadow: 0 1px 12px rgba(6, 12, 9, .7); }
.start { display: flex; align-items: center; gap: 20px; margin: 26px 0 28px; }
.start span { font-style: italic; opacity: .78; }
/* The button is a seed: the first one you take. */
#fly {
  width: 92px; height: 92px; border-radius: 50%; color: #2a1a05; font-size: 27px; font-style: italic;
  background: radial-gradient(circle at 38% 32%, #fff3cf 0%, var(--seed) 38%, var(--seed-deep) 100%);
  box-shadow: 0 0 0 1px rgba(255, 240, 200, .5), 0 0 34px rgba(242, 196, 106, .6), 0 0 110px rgba(242, 196, 106, .35);
  transition: transform .25s ease, box-shadow .25s ease;
}
#fly:hover { transform: scale(1.06); box-shadow: 0 0 0 1px rgba(255, 240, 200, .7), 0 0 44px rgba(242, 196, 106, .85), 0 0 130px rgba(242, 196, 106, .5); }
#fly:active { transform: scale(.97); }
/* The key to the controls, with leaders like the index of a guide. */
.keys { max-width: 470px; font-size: 16.5px; }
.keys div { display: flex; align-items: baseline; gap: 8px; padding: 1.5px 0; }
.keys dt { font-style: italic; white-space: nowrap; }
.keys dt::after { content: ""; }
.keys div::before { content: ""; order: 1; flex: 1; border-bottom: 1px dotted rgba(243, 236, 217, .42); transform: translateY(-4px); min-width: 18px; }
.keys dd { order: 2; opacity: .84; text-align: right; }
.note { margin-top: 18px; font-size: 15px; font-style: italic; opacity: .7; max-width: 30em; }
body.play #title, body.paused #title { opacity: 0; transform: translateY(26px); pointer-events: none; }

/* ---- While flying ---- */
#hud { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease .4s; text-shadow: 0 1px 10px rgba(6, 12, 9, .75); }
body.play #hud { opacity: 1; }
#tally { position: absolute; left: clamp(16px, 2.6vw, 34px); top: clamp(14px, 2.4vh, 26px); display: flex; flex-direction: column; font-size: 19px; line-height: 1.25; }
#best { font-size: 15px; font-style: italic; opacity: .7; }
#run { position: absolute; left: 50%; top: clamp(10px, 2vh, 22px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; color: var(--seed); opacity: 0; transition: opacity .5s ease; }
#run.on { opacity: 1; }
#run b { font-weight: 400; font-style: italic; font-size: clamp(44px, 5.4vw, 70px); line-height: .95; text-shadow: 0 0 28px rgba(242, 196, 106, .55), 0 1px 10px rgba(6, 12, 9, .6); }
#run span { font-size: 15px; font-style: italic; color: var(--paper); opacity: .8; }
#run.pop b { animation: pop .34s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes pop { from { transform: scale(1.32); } to { transform: scale(1); } }
#phase { position: absolute; left: clamp(16px, 2.6vw, 34px); bottom: clamp(16px, 3vh, 32px); font-style: italic; font-size: clamp(24px, 2.6vw, 36px); opacity: 0; transform: translateY(8px); transition: opacity 1.6s ease, transform 1.6s ease; }
#phase.on { opacity: .92; transform: none; }
#hint { position: absolute; left: 0; right: 0; bottom: 15%; padding: 0 24px; text-align: center; font-style: italic; font-size: clamp(19px, 2vw, 26px); text-wrap: balance; opacity: 0; transition: opacity .8s ease; }
#hint.on { opacity: .95; }
#arrow { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; color: var(--seed); opacity: 0; transition: opacity .3s ease; filter: drop-shadow(0 0 8px rgba(242, 196, 106, .8)); }
#arrow.on { opacity: .95; }
#reticle { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; border: 1px solid rgba(243, 236, 217, .16); opacity: 0; transition: opacity .6s ease; }
#reticle.on { opacity: 1; }
#dot { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(243, 236, 217, .7); }

#corner { position: fixed; right: clamp(14px, 2.4vw, 30px); top: clamp(12px, 2.2vh, 24px); display: flex; gap: 20px; font-size: 15.5px; font-style: italic; text-shadow: 0 1px 10px rgba(6, 12, 9, .75); }
#corner button { opacity: .72; padding: 6px 2px; border-bottom: 1px solid rgba(243, 236, 217, .3); transition: opacity .2s ease; }
#corner button:hover { opacity: 1; }
#snd[aria-pressed="false"] { opacity: .5; }

/* ---- Touch ---- */
#touch { display: none; }
body.coarse #touch { display: block; }
body.coarse #reticle { display: none; }
#stick { position: fixed; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; border: 1px solid rgba(243, 236, 217, .35); background: rgba(10, 19, 15, .18); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
#stick.on { opacity: 1; }
#stick i { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: rgba(243, 236, 217, .5); }
#t-flap, #t-slow { position: fixed; right: 22px; width: 84px; height: 84px; border-radius: 50%; font-style: italic; font-size: 19px; border: 1px solid rgba(243, 236, 217, .45); background: rgba(10, 19, 15, .3); }
#t-flap { bottom: calc(34px + env(safe-area-inset-bottom, 0px)); border-color: var(--seed); color: var(--seed); }
#t-slow { bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }

/* ---- Pause and failure ---- */
#pause { position: fixed; inset: 0; display: none; place-items: center; text-align: center; background: rgba(8, 15, 12, .5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
body.paused #pause { display: grid; }
#pause h2 { font-weight: 400; font-style: italic; font-size: clamp(48px, 7vw, 92px); line-height: 1; letter-spacing: -.02em; }
#go-on { margin: 22px 0 14px; padding: 10px 26px; border: 1px solid var(--seed); border-radius: 999px; color: var(--seed); font-size: 21px; font-style: italic; }
#go-on:hover { background: rgba(242, 196, 106, .14); }
#pause p { font-style: italic; opacity: .75; }
#err { position: fixed; inset: 0; display: grid; place-content: center; padding: 28px; text-align: center; background: var(--ink); }
#err[hidden] { display: none; }
#err h2 { font-weight: 400; font-style: italic; font-size: 32px; margin-bottom: 10px; }
#err p { max-width: 30em; opacity: .8; }

@media (max-width: 640px) {
  .keys { display: none; }
  #fly { width: 84px; height: 84px; }
  #corner { gap: 14px; font-size: 14px; }
  #full { display: none; }
}
@media (max-height: 620px) { .keys { display: none; } .note { display: none; } }
@media (pointer: coarse) { .start span { display: none; } }
@media (prefers-reduced-motion: reduce) {
  #run.pop b { animation: none; }
  #title, #hud, #phase, #hint { transition-duration: .01s; }
}