/* Skein: a quiet interface.
   The world carries the game state, so the page adds almost nothing during play: a hairline of
   progress along the top edge and a small ghost burst control. Words appear only between legs,
   set light and small, straight onto the scene. */

/* Jost, served from this site (one variable font file, weights 300-500) so no visitor data goes to a font host. */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/jost-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --cream: #f6f1e6;
  --cream-dim: rgba(246, 241, 230, 0.62);
  --cream-faint: rgba(246, 241, 230, 0.28);
  --rose: #ff7d9b;
  --font: "Jost", "Futura", "Avenir Next", "Century Gothic", sans-serif;
  --gutter: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: #c9c3e4;
  color: var(--cream);
  font-family: var(--font);
  font-weight: 300;
  line-height: 1.4;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
svg { fill: currentColor; }
.sprites { position: absolute; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 1.5px solid var(--cream); outline-offset: 6px; border-radius: 4px; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.app { position: relative; height: 100dvh; overflow: hidden; }
.stage { position: absolute; inset: 0; }
#game {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
#game:focus-visible { outline: none; }

/* ---------- progress: one hairline and four ticks ---------- */

.progress {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: max(var(--gutter), env(safe-area-inset-left)); right: max(var(--gutter), env(safe-area-inset-right));
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.8s ease;
}
.progress-fill { height: 1px; width: 0; background: #fff; }
.route-stop {
  position: absolute; top: 0;
  width: 5px; height: 5px;
  margin: -2px 0 0 -2.5px;
  border-radius: 50%;
  border: 1px solid #fff;
  background: transparent;
}
.route-stop.is-reached { background: #fff; }
.route-stop[data-at="2000"] { margin-left: -5px; }

/* ---------- burst: a ghost of a button; the whole screen is the real target ---------- */

.controls {
  position: absolute;
  right: max(var(--gutter), env(safe-area-inset-right));
  bottom: max(var(--gutter), env(safe-area-inset-bottom));
  z-index: 2;
}
.burst {
  --charge: 1;
  position: relative;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  mix-blend-mode: difference;
  opacity: 0.7;
  touch-action: manipulation;
  transition: opacity 0.3s ease, transform 0.1s ease;
}
.burst-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(from -90deg, #fff calc(var(--charge) * 1turn), rgba(255, 255, 255, 0.25) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
}
.burst-icon { width: 22px; height: 22px; }
.burst:active { transform: scale(0.92); }
.burst[aria-disabled="true"] { opacity: 0.35; }
.burst.is-now { opacity: 1; }

/* sound: the same ghost, bottom left */
.controls-left {
  position: absolute;
  left: max(var(--gutter), env(safe-area-inset-left));
  bottom: max(var(--gutter), env(safe-area-inset-bottom));
  z-index: 2;
  transition: opacity 0.8s ease;
}
.sound {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: #fff;
  mix-blend-mode: difference;
  opacity: 0.55;
  transition: opacity 0.3s ease;
}
.sound:hover { opacity: 0.9; }
.sound svg { width: 20px; height: 20px; grid-area: 1 / 1; }
.sound .icon-off, .sound.is-muted .icon-on { display: none; }
.sound.is-muted .icon-off { display: block; }

/* ---------- pause ---------- */
.controls-left { display: flex; gap: 2px; }
.pause {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: #fff; mix-blend-mode: difference;
  opacity: 0.55;
  transition: opacity 0.3s ease;
}
.pause:hover { opacity: 0.9; }
.haptics[hidden] { display: none; }
.haptics.is-off { opacity: 0.25; }
.pause svg { width: 20px; height: 20px; }
.stage:has(.overlay:not([hidden])) .pause,
.app:has(.results:not([hidden])) .pause { opacity: 0; pointer-events: none; }
.pausepanel { z-index: 8; background: rgba(12, 12, 22, 0.6); }
.pause-title { margin: 14px 0 28px; font-size: clamp(30px, 6vw, 52px); font-weight: 300; letter-spacing: 0.32em; text-indent: 0.32em; }

/* ---------- overlays: words straight onto the world ---------- */

.overlay {
  position: absolute; inset: 0;
  z-index: 5;
  display: flex; flex-direction: column; align-items: center;
  padding: max(28px, env(safe-area-inset-top)) var(--gutter) max(28px, env(safe-area-inset-bottom));
  overflow-y: auto;
  text-align: center;
  background: rgba(16, 16, 26, 0.42);
  text-shadow: 0 1px 18px rgba(10, 10, 20, 0.35);
}
.overlay > :first-child { margin-top: auto; }
.overlay > :last-child { margin-bottom: auto; }
.overlay[hidden] { display: none; }
.stage:has(.overlay:not([hidden])) .progress,
.stage:has(.overlay:not([hidden])) .controls,
.app:has(.results:not([hidden])) .progress,
.app:has(.results:not([hidden])) .controls { opacity: 0; pointer-events: none; }
.app:has(.results:not([hidden])) .controls-left { opacity: 0.5; }

.date, .numeral {
  margin: 0;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

/* intro */
.intro h1 {
  margin: 18px 0 44px;
  font-size: clamp(36px, 7vw, 68px);
  font-weight: 300;
  letter-spacing: 0.28em;
  text-indent: 0.28em; /* balance the trailing tracking */
  line-height: 1;
}
.begin {
  min-width: 44px; min-height: 44px;
  padding: 10px 26px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  border: 1px solid var(--cream-faint);
  border-radius: 999px;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.begin:hover { border-color: var(--cream); background: rgba(246, 241, 230, 0.08); }
.keys {
  margin: 16px 0 0;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--cream-faint);
}

/* the game is a side-scroller: on a phone held upright, everything waits behind this card */
.rotate-gate {
  position: fixed; inset: 0;
  z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  padding: 32px;
  text-align: center;
  background: #1c1932;
  color: var(--cream);
}
.rotate-gate[hidden] { display: none; }
.rotate-phone { width: 46px; height: 46px; fill: currentColor; color: var(--cream-dim); }
.rotate-title { margin: 6px 0 0; font-size: 17px; font-weight: 300; letter-spacing: 0.22em; }
.rotate-help { max-width: 280px; margin: 0; font-size: 13px; line-height: 1.6; letter-spacing: 0.02em; color: var(--cream-dim); }
@media (prefers-reduced-motion: no-preference) {
  .rotate-phone { animation: turn 2.6s ease-in-out infinite; }
  @keyframes turn { 0%, 25% { transform: rotate(0); } 50%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
}

/* chapters */
.level-name {
  margin: -30px 0 36px;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--cream-dim);
}
.levels { display: flex; gap: 6px; margin-top: 30px; }
.level {
  min-width: 56px; min-height: 44px;
  padding: 6px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--cream-dim);
  transition: color 0.3s ease;
}
.level-numeral { font-size: 14px; font-weight: 400; letter-spacing: 0.2em; text-indent: 0.2em; }
.level-title { font-size: 10px; letter-spacing: 0.18em; max-width: 90px; text-align: center; opacity: 0; transition: opacity 0.3s ease; }
.level:hover .level-title, .level.is-selected .level-title, .level:focus-visible .level-title { opacity: 1; }
.level.is-selected { color: var(--cream); box-shadow: inset 0 -1px 0 var(--cream); }
.level[aria-disabled="true"] { color: var(--cream-faint); cursor: default; }
.level[aria-disabled="true"] .level-numeral::after { content: " ·"; opacity: 0.5; }
@media (hover: none) { .level.is-selected .level-title { opacity: 1; } }

/* flight or gauntlet: two small words under the chapters */
.modes { display: flex; gap: 22px; margin-top: 14px; }
.mode {
  min-height: 44px; padding: 6px 4px;
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; text-indent: 0.3em;
  color: var(--cream-dim);
  transition: color 0.3s ease;
}
.mode.is-selected { color: var(--cream); box-shadow: inset 0 -1px 0 var(--cream); }
.mode[aria-disabled="true"] { color: var(--cream-faint); cursor: default; }
.mode[data-mode="gauntlet"][aria-disabled="true"]::after { content: " ·"; opacity: 0.5; }
.mode[data-mode="gauntlet"].is-selected { color: var(--rose); box-shadow: inset 0 -1px 0 var(--rose); }
.app[data-mode="gauntlet"] .progress-fill { background: var(--rose); }

/* the running score: a small number under the progress line, with the multiplier beside it */
.score {
  position: absolute;
  top: calc(max(14px, env(safe-area-inset-top)) + 12px);
  right: max(var(--gutter), env(safe-area-inset-right));
  display: flex; align-items: baseline; gap: 10px;
  font-size: 13px; font-weight: 400; letter-spacing: 0.18em;
  color: #fff;
  mix-blend-mode: difference;
  opacity: 0.7;
  pointer-events: none;
  z-index: 2;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.8s ease;
}
.score-mult { font-size: 11px; letter-spacing: 0.1em; opacity: 0.85; }
.score-mult:empty { display: none; }
.stage:has(.overlay:not([hidden])) .score,
.app:has(.results:not([hidden])) .score { opacity: 0; }

/* the guardian: its name and one pip per strike, small and centred under the progress line */
.boss {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(max(14px, env(safe-area-inset-top)) + 12px);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  color: #fff; mix-blend-mode: difference; opacity: 0.8;
  pointer-events: none; z-index: 2;
  transition: opacity 0.8s ease;
}
.boss[hidden] { display: none; }
.boss-name { font-size: 10px; letter-spacing: 0.34em; text-indent: 0.34em; text-transform: uppercase; }
.boss-hp { width: 132px; height: 4px; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 3px; overflow: hidden; }
.boss-hp-fill { display: block; height: 100%; width: 100%; background: #fff; transition: width 0.3s ease; }
.stage:has(.overlay:not([hidden])) .boss,
.app:has(.results:not([hidden])) .boss { opacity: 0; }

/* the chapter title: a line of text over the world for a few seconds, then gone */
.chapter {
  position: absolute; inset: 0;
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
  text-align: center;
  text-shadow: 0 1px 24px rgba(10, 10, 20, 0.55);
}
.chapter[hidden] { display: none; }
.chapter-numeral { margin: 0 0 10px; font-size: 13px; letter-spacing: 0.4em; text-indent: 0.4em; color: var(--cream-dim); }
.chapter-name { margin: 0; font-size: clamp(30px, 6vw, 56px); font-weight: 300; letter-spacing: 0.22em; text-indent: 0.22em; }
@media (prefers-reduced-motion: no-preference) {
  .chapter { animation: chapter 3.6s ease both; }
  @keyframes chapter { 0% { opacity: 0; } 18% { opacity: 1; } 72% { opacity: 1; } 100% { opacity: 0; } }
}
.text-button-lead { border-color: var(--cream); }

/* rest stops: a chapter card */
.checkpoint h2 {
  margin: 12px 0 10px;
  font-size: clamp(30px, 5.5vw, 48px);
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1.05;
}
.blurb { margin: 0 0 40px; font-size: 16px; font-style: italic; color: var(--cream-dim); }
.rewards { display: flex; gap: clamp(14px, 4vw, 34px); justify-content: center; flex-wrap: wrap; }
.reward {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  min-width: 64px;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.reward-icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--cream-faint);
  transition: border-color 0.25s ease, background 0.25s ease;
}
.reward-icon svg { width: 22px; height: 22px; }
.reward[data-reward="forage"] .reward-icon svg { width: 14px; height: 14px; color: #f6ce78; }
.reward[data-reward="recruit"] .reward-icon svg { color: var(--rose); width: 24px; }
.reward-word { font-size: 13px; font-weight: 400; letter-spacing: 0.18em; color: var(--cream-dim); }
.reward:not(:disabled):hover .reward-icon,
.reward:not(:disabled):focus-visible .reward-icon { border-color: var(--cream); background: rgba(246, 241, 230, 0.1); }
.reward:not(:disabled):hover .reward-word,
.reward:not(:disabled):focus-visible .reward-word { color: var(--cream); }
.reward:focus-visible { outline: none; }
.reward:disabled { opacity: 0.28; cursor: default; }
.caption {
  min-height: 1.4em;
  margin: 28px 0 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--cream-dim);
}

/* results */
/* Field Notes: the card beside its words, so "fly again" and "share" are always on screen, no scrolling. */
.results {
  position: fixed; z-index: 10; background: rgba(14, 14, 24, 0.55);
  flex-direction: row; justify-content: center; align-items: center;
  gap: clamp(24px, 6vw, 64px);
  overflow-y: auto;
}
.results > .results-card, .results > .results-body { margin: 0; }
.results-card { flex: none; }
.results-body {
  display: flex; flex-direction: column; align-items: flex-start;
  width: min(100%, 380px); min-width: 0;
  text-align: left;
}
.results-body .actions { flex-wrap: wrap; gap: 8px 28px; margin-top: 22px; }
.results-body .outcome { margin: 10px 0 0; text-align: left; }
.results-body .best { margin-top: 12px; }
.results-body .share-status { margin-top: 10px; }
.results-body .link { text-align: left; }
#link-fallback[hidden] { display: none; }
#link-fallback { width: 100%; }
@media (max-aspect-ratio: 1/1) {
  .results { flex-direction: column; justify-content: center; gap: 18px; }
  .results-body { align-items: center; text-align: center; }
  .results-body .outcome { text-align: center; }
  .results-body .actions { justify-content: center; }
  .results-body .link { text-align: center; }
}
.outcome {
  max-width: 520px;
  margin: 16px 0 24px;
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.25;
}
.card {
  display: block;
  height: min(calc(100vh - 56px), 440px);
  height: min(calc(100dvh - 56px), 440px);
  width: auto;
  max-width: 100%;
  aspect-ratio: 600 / 800;
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.summary {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); /* the card says it; keep it for screen readers */
  max-width: 460px;
  margin: 24px 0 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--cream-dim);
}
.best { margin: 8px 0 0; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--rose); }
.best:empty { display: none; }
.actions { display: flex; gap: 32px; margin-top: 30px; }
.text-button {
  min-height: 44px;
  padding: 0 4px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.26em;
  border-bottom: 1px solid var(--cream-faint);
  transition: border-color 0.3s ease;
}
.text-button:hover { border-color: var(--cream); }
.share-status { min-height: 1.4em; margin: 16px 0 0; font-size: 12px; color: var(--cream-dim); }
.link {
  width: min(100%, 360px);
  min-height: 40px;
  margin-top: 6px;
  padding: 6px 0;
  font: 300 12px/1.2 var(--font);
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--cream-dim);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--cream-faint);
}

/* entrance: everything fades up slowly, as if the fog were lifting */
@media (prefers-reduced-motion: no-preference) {
  .overlay > * { animation: lift 1.4s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
  .overlay > :nth-child(2) { animation-delay: 0.15s; }
  .overlay > :nth-child(3) { animation-delay: 0.35s; }
  .overlay > :nth-child(4) { animation-delay: 0.55s; }
  .overlay > :nth-child(5) { animation-delay: 0.7s; }
  .overlay > :nth-child(n + 6) { animation-delay: 0.85s; }
  @keyframes lift { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .keys { animation: breathe 3.2s ease-in-out 1.6s infinite alternate !important; }
  @keyframes breathe { from { opacity: 0.4; } to { opacity: 1; } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- the first-time guide ---------- */
.text-link {
  margin-top: 8px; min-height: 44px; padding: 0 6px;
  font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--cream-dim);
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.text-link:hover, .text-link:focus-visible { color: var(--cream); border-color: var(--cream-faint); }
.guide { z-index: 9; background: rgba(14, 14, 24, 0.7); }
.guide-title { margin: 10px 0 14px; font-size: clamp(24px, 4vw, 34px); font-weight: 300; letter-spacing: 0.16em; text-indent: 0.16em; }
.guide-steps { list-style: none; margin: 0; padding: 0; width: min(100%, 420px); }
.guide-step { display: flex; flex-direction: column; align-items: center; }
.guide-step[hidden] { display: none; }
.guide-step p { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: var(--cream-dim); max-width: 36ch; }
.guide-art { width: min(100%, 300px); height: auto; overflow: visible; }
.guide-art * { fill: none; stroke: var(--cream); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.guide-art .g-ground { stroke: var(--cream-faint); }
.guide-art .g-dot, .guide-art .g-flock circle { fill: var(--rose); stroke: none; }
.guide-art .g-flock path { stroke: var(--rose); }
.guide-art .g-line { stroke: var(--cream-dim); stroke-dasharray: 2 5; }
.guide-art .g-ring, .guide-art .g-ripple { stroke: var(--cream); opacity: 0.7; }
.guide-art .g-mid { stroke: #ffdca0; stroke-width: 2.2; }
.guide-art .g-hazard path, .guide-art .g-slide path, .guide-art .g-guardian { fill: rgba(246, 241, 230, 0.12); stroke: var(--cream-dim); }
.guide-art .g-eye { fill: #ffb848; stroke: none; }
.guide-art .g-birds circle { fill: var(--rose); stroke: none; }
.guide-art .g-birds .g-spare { opacity: 0.35; }
.guide-art .g-pips circle { stroke: var(--cream-dim); }
.guide-art .g-pips circle:nth-child(-n+3) { fill: var(--cream); }
.guide-art .g-arch { stroke: #ffdca0; }
.guide-actions { display: flex; gap: 32px; margin-top: 26px; }

@media (prefers-reduced-motion: no-preference) {
  .guide-art .g-flock { animation: g-dive 2.6s ease-in-out infinite; }
  .guide-art .g-ripple { transform-origin: 40px 42px; animation: g-ripple 2.6s ease-out infinite; }
  .guide-art .g-hazard { animation: g-near 2.6s ease-in-out infinite; }
  .guide-art .g-slide { animation: g-slide 3s linear infinite; }
  .guide-art .g-slide.g-slow { animation-duration: 3.6s; }
  .guide-art .g-ring { transform-origin: 40px 42px; animation: g-pulse 1.4s ease-in-out infinite alternate; }
  .guide-art .g-eye { animation: g-blink 3.4s ease-in-out infinite; transform-origin: 174px 30px; }
  @keyframes g-dive { 0%, 20% { transform: translateX(0); } 45%, 70% { transform: translateX(110px); } 100% { transform: translateX(0); } }
  @keyframes g-ripple { 0%, 18% { transform: scale(0.6); opacity: 0; } 22% { opacity: 0.8; } 60% { transform: scale(3.2); opacity: 0; } 100% { opacity: 0; } }
  @keyframes g-near { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-6px); } }
  @keyframes g-slide { 0% { transform: translateX(200px); } 100% { transform: translateX(46px); } }
  @keyframes g-pulse { from { opacity: 0.35; transform: scale(0.92); } to { opacity: 0.95; transform: scale(1.06); } }
  @keyframes g-blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.1); } }
}

/* a hint during the first flight: one quiet line at the foot of the screen */
.coach {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: max(26px, env(safe-area-inset-bottom));
  max-width: min(64vw, 520px); margin: 0;
  font-size: 12px; letter-spacing: 0.18em; text-align: center; line-height: 1.5;
  color: var(--cream);
  text-shadow: 0 1px 14px rgba(10, 10, 20, 0.6);
  pointer-events: none; z-index: 3;
}
.coach[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .coach { animation: coach 4.6s ease both; }
  @keyframes coach { 0% { opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
}
.stage:has(.overlay:not([hidden])) .coach { opacity: 0; }

/* short screens (a phone on its side): tighter results */
@media (max-height: 460px) {
  .results-body .outcome { font-size: 18px; margin-top: 6px; }
  .results-body .actions { margin-top: 14px; }
  .results-body .best { margin-top: 8px; font-size: 10px; }
  .results-body .link { min-height: 30px; margin-top: 0; }
  .guide-step p { font-size: 13px; margin-top: 8px; }
  .guide-art { width: min(100%, 220px); }
  .guide-actions { margin-top: 12px; }
}

/* what a rest-stop gift just did: one line over the flock, so the choice is seen to matter */
.gift {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 30%;
  max-width: min(80vw, 560px); margin: 0;
  font-size: clamp(14px, 2.2vw, 19px); font-weight: 400; letter-spacing: 0.2em; line-height: 1.5; text-align: center;
  color: var(--cream);
  text-shadow: 0 1px 18px rgba(10, 10, 20, 0.6);
  pointer-events: none; z-index: 3;
}
.gift[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .gift { animation: gift 2.8s ease both; }
  @keyframes gift { 0% { opacity: 0; translate: 0 8px; } 14% { opacity: 1; translate: 0 0; } 78% { opacity: 1; } 100% { opacity: 0; } }
}
.stage:has(.overlay:not([hidden])) .gift { opacity: 0; }

/* the hidden switch that gives an iPhone its tap: on the page, but out of sight and out of reach */
.haptic-switch { position: fixed; left: 0; top: 0; width: 44px; height: 44px; opacity: 0.01; pointer-events: none; z-index: -1; }

/* the practice flight */
.intro-links { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.practice-skip {
  position: absolute;
  top: calc(max(14px, env(safe-area-inset-top)) + 12px);
  left: max(var(--gutter), env(safe-area-inset-left));
  z-index: 4;
  min-height: 40px; margin: 0; padding: 0 16px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cream);
  background: rgba(18, 14, 34, 0.74);
  border: 1px solid rgba(246, 241, 230, 0.55);
  border-radius: 999px;
  opacity: 1; mix-blend-mode: normal;
}
.practice-skip::after { content: "\2192"; letter-spacing: 0; font-size: 14px; }
.practice-skip:hover, .practice-skip:focus-visible { background: rgba(18, 14, 34, 0.9); border-color: var(--cream); }
.app:not([data-flight="practice"]) .practice-skip { display: none; }
.stage:has(.overlay:not([hidden])) .practice-skip { opacity: 0; pointer-events: none; }
.app[data-flight="practice"] .score { display: none; }
.practice-done { z-index: 9; background: rgba(14, 14, 24, 0.62); }
.summary-line { margin: 0 0 26px; font-size: 13px; letter-spacing: 0.14em; color: var(--cream-dim); }

/* a quiet question after a run: how hard was it, and was it fun */
.feedback { width: 100%; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--cream-faint); }
.feedback[hidden] { display: none; }
.feedback-q { margin: 0 0 6px; font-size: 12px; letter-spacing: 0.2em; color: var(--cream-dim); }
.feedback-a { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.feedback-choice {
  min-height: 36px; padding: 0 2px;
  font-size: 13px; letter-spacing: 0.18em; color: var(--cream);
  border-bottom: 1px solid var(--cream-faint);
  transition: border-color 0.3s ease;
}
.feedback-choice:hover, .feedback-choice:focus-visible { border-color: var(--cream); }
.feedback-links { display: flex; flex-wrap: wrap; gap: 0 16px; }
.feedback-links .text-link { margin-top: 2px; min-height: 36px; font-size: 10px; }
.feedback-links [hidden] { display: none; }
.feedback-note { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 6px; }
.feedback-note[hidden] { display: none; }
.feedback-note textarea {
  width: 100%; padding: 8px 10px; resize: none;
  font: 300 13px/1.4 var(--font); color: var(--cream);
  background: rgba(10, 10, 20, 0.45); border: 1px solid var(--cream-faint); border-radius: 6px;
}
.feedback-note textarea:focus-visible { outline: none; border-color: var(--cream); }
.feedback-fine { margin: 6px 0 0; font-size: 11px; line-height: 1.5; letter-spacing: 0.04em; color: var(--cream-dim); }
.feedback-fine[hidden] { display: none; }
@media (max-height: 460px) {
  .feedback { margin-top: 8px; padding-top: 8px; }
  .feedback-q { font-size: 11px; margin-bottom: 2px; }
  .feedback-choice { min-height: 32px; font-size: 12px; }
  .feedback-links .text-link { min-height: 30px; }
  .feedback-note textarea { height: 46px; }
  .feedback-note { gap: 4px; }
}
@media (max-aspect-ratio: 1/1) { .feedback-a, .feedback-links { justify-content: center; } .feedback-note { align-items: center; } }