/* ─────────────────────────────────────────────────────────────────
   Donkey Dash — endless-runner game that takes over the viewport
   from the bottom when the user clicks "y" in the donkey's speech
   bubble. Single full-bleed canvas + DOM overlays for HUD, toasts,
   game-over, and the close button.
   ───────────────────────────────────────────────────────────────── */

.donkey-dash {
  /* In-flow block that sits below the page footer. Starts collapsed
     (height: 0) so it adds zero space until the user accepts the
     bubble; .open grows the section to a full viewport in height,
     which the JS scrolls into view smoothly. The page stays
     scrollable — you can scroll back up to the footer or jump back
     down to the game via the floating arrow button. */
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  /* Background matches the canvas's painted sky at cyclePhase = 0.15
     (the game's starting moment, early morning). The previous flat
     #1a1f3a navy made the open-slide read as page-white → navy →
     suddenly-sky once the canvas tick started. Now the bg is the
     SAME sky gradient the canvas paints first, so the ::before
     white-to-transparent overlay blends directly into sky and the
     canvas takes over invisibly. Calculated as lerp(SKY_STOPS[dawn],
     SKY_STOPS[day], 0.6) — see SKY_STOPS in donkey-dash.js. */
  background: linear-gradient(180deg,
    rgb(200, 207, 212) 0%,
    rgb(240, 239, 237) 100%);
  image-rendering: pixelated;
  font-family: 'Press Start 2P', ui-monospace, Menlo, monospace;
  color: #1a1a2e;

  /* 720 ms matches donkey-dash.js's OPEN_DURATION_MS exactly, so the
     height growth and the rAF-driven scroll finish at the same moment.
     Easing is cubic-bezier ≈ ease-out-cubic so the two animations
     visually track each other through the entire open. */
  transition: height 720ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.donkey-dash.open {
  height: 100vh;
  height: 100dvh; /* iOS Safari address-bar aware */
  pointer-events: auto;
}

/* ── Smooth blend with the white page above ─────────────────────
   Soft tall gradient stuck to the TOP of the game container that
   fades from the page's white background down to fully transparent
   over ~32 vh. As the user scrolls into the game, the canvas sky
   appears to materialise out of the page — no hard seam at the
   join. Once the user is fully scrolled into the game, the overlay
   is above the viewport and invisible. */
.donkey-dash::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(220px, 32vh, 420px);
  z-index: 1; /* canvas (default 0) < overlay < HUD (3) / close (4) */
  pointer-events: none;
  background: linear-gradient(180deg,
    #ffffff 0%,
    rgba(255, 255, 255, 0.96) 14%,
    rgba(255, 255, 255, 0.62) 42%,
    rgba(255, 255, 255, 0.22) 72%,
    rgba(255, 255, 255, 0)    100%);
  /* Ease alpha smoothly without banding on retina — extra colour
     stops above already do most of the work. */
  filter: saturate(1.02);
}

/* ── Canvas (sky + parallax + sprites all drawn here) ───────────── */
.dash-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  background: transparent;
}

/* ── HUD (top-right) ────────────────────────────────────────────── */
.dash-hud {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-size: 11px;
  line-height: 1.2;
  color: rgba(26, 26, 46, 0.85);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
  pointer-events: none;
  user-select: none;
}
.dash-hud .dash-row {
  display: flex;
  gap: 14px;
  align-items: baseline;
}
.dash-hud .dash-best {
  font-size: 9px;
  opacity: 0.7;
}

/* ── "Back up" arrow (top-left of game) ─────────────────────────
   Used to live as a close-× button; now it's a navigational up-arrow
   that scrolls the window back to the footer. The game stays open in
   the DOM — the user can jump back down via the floating arrow. */
.dash-close {
  position: absolute;
  top: 16px;
  left: 18px;
  z-index: 4;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  background: #ffffff;
  color: #1a1a2e;
  border: 2px solid #1a1a2e;
  border-radius: 0;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease;
}
.dash-close:hover { background: #f6c3a3; }
.dash-close:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.22);
}

/* ── Floating "jump back down to game" arrow ────────────────────
   Pinned to the bottom-right of the viewport once the game has been
   opened. Hides itself when the game is currently in view (no point
   showing a "jump down" arrow when you're already there) and reveals
   while you're up at the home page or footer. */
.dash-jumpback {
  position: fixed;
  /* Pinned on the LEFT to mirror the in-game "↑" arrow, which sits at
     the top-LEFT of the game. Symmetric: same column for "back up"
     and "back down" — the eye doesn't have to hop sides. */
  left: 22px;
  bottom: 22px;
  z-index: 60;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-family: 'Press Start 2P', ui-monospace, Menlo, monospace;
  font-size: 14px;
  line-height: 1;
  background: #1a1a2e;
  color: #ffffff;
  border: 2px solid #1a1a2e;
  border-radius: 0;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.22);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 240ms ease,
    transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
    background 120ms ease;
}
.dash-jumpback.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.dash-jumpback:hover { background: #3a3a5a; }
.dash-jumpback:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.22);
}

/* ── Toast stack (top-centre, pixel-art "lil announcements") ────── */
.dash-toast-stack {
  position: absolute;
  top: 16px;
  left: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  pointer-events: none;
}

.dash-toast {
  font-family: inherit;
  font-size: 10px;
  line-height: 1.4;
  padding: 10px 14px;
  background: #ffffff;
  color: #1a1a2e;
  border: 3px solid #1a1a2e;
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.22);
  white-space: nowrap;
  text-transform: lowercase;

  opacity: 0;
  transform: translateY(-12px) scale(0.92);
  transition:
    opacity 200ms ease,
    transform 260ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.dash-toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Special-coloured toasts for high-tier milestones. */
.dash-toast.warm    { background: #fde7d3; }
.dash-toast.gold    { background: #ffe48a; }
.dash-toast.shock   { background: #f7c8a8; }
.dash-toast.cool    { background: #cfe6f7; }
.dash-toast.best    { background: #1a1a2e; color: #fff8e0; }

/* ── Game-over overlay ──────────────────────────────────────────── */
.dash-gameover {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(0, 0, 0, 0.55);
  font-family: inherit;
  color: #ffffff;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}
.dash-gameover.show {
  opacity: 1;
  pointer-events: auto;
}
.dash-gameover h2 {
  font-size: 28px;
  letter-spacing: 0.04em;
  margin: 0;
  color: #fff;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
}
.dash-gameover p {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}
.dash-gameover .dash-go-best { font-size: 10px; opacity: 0.7; }
.dash-gameover .dash-go-hint {
  margin-top: 4px;
  font-size: 11px;
  color: #fde7d3;
}

/* ── Name-entry form (visible when the run cracks top 10) ──────── */
.dash-go-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.2);
}
.dash-go-form-label {
  font-size: 10px;
  color: #fde7d3;
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
.dash-go-name {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 11px;
  width: 120px;
  padding: 8px 10px;
  background: #ffffff;
  color: #1a1a2e;
  border: 2px solid #1a1a2e;
  border-radius: 0;
  outline: none;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.5);
}
.dash-go-name:focus { background: #fde7d3; }
.dash-go-save {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 11px;
  padding: 9px 14px;
  background: #1a1a2e;
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 0;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.5);
  cursor: pointer;
  text-transform: lowercase;
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}
.dash-go-save:hover { background: #fde7d3; color: #1a1a2e; }
.dash-go-save:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.5);
}

/* ── Game-over actions (Run again / Leave) ─────────────────────────
   The ONLY restart path on touch devices (no spacebar). Also visible
   on desktop as a nicer affordance — keyboard shortcuts still work
   for those who prefer them. */
.dash-go-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.dash-go-retry,
.dash-go-leave {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 11px;
  padding: 11px 18px;
  border: 2px solid #ffffff;
  border-radius: 0;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.5);
  cursor: pointer;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
  /* Bigger tap target on touch — minimum 44px high for iOS HIG. */
  min-height: 44px;
}
.dash-go-retry {
  background: #fde7d3;
  color: #1a1a2e;
}
.dash-go-leave {
  background: #1a1a2e;
  color: #ffffff;
}
.dash-go-retry:hover { background: #ffd9b3; }
.dash-go-leave:hover { background: #2a2a4e; }
.dash-go-retry:active,
.dash-go-leave:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.5);
}

/* Hide the keyboard hint on touch devices — it's just clutter when
   you can't press space anyway. The buttons above are the affordance. */
@media (hover: none) {
  .dash-gameover .dash-go-hint { display: none; }
}

/* ── Leaderboard list ──────────────────────────────────────────── */
.dash-go-leaderboard {
  width: 100%;
  max-width: 360px;
  margin-top: 4px;
}
.dash-go-leaderboard h3 {
  margin: 0 0 8px;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #fde7d3;
  text-align: center;
}
.dash-leaderboard-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.85);
}
.dash-leaderboard-list li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  padding: 3px 8px;
  align-items: baseline;
}
.dash-leaderboard-list li.new {
  background: rgba(255, 210, 74, 0.18);
  color: #ffd24a;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
}
.dash-leaderboard-list li.empty {
  display: block;
  text-align: center;
  opacity: 0.6;
  font-style: normal;
  letter-spacing: 0.04em;
}
.dash-leaderboard-list .rank  { opacity: 0.7; text-align: right; }
.dash-leaderboard-list .name  {
  letter-spacing: 0.04em;
  text-transform: lowercase;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-leaderboard-list .score { opacity: 0.85; text-align: right; }

/* ── Title overlay (first-time hint) ────────────────────────────── */
.dash-title {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.25);
  font-family: inherit;
  color: #1a1a2e;
  text-align: center;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
  pointer-events: none;
  opacity: 1;
  transition: opacity 240ms ease;
}
.dash-title.gone {
  opacity: 0;
  pointer-events: none;
}
.dash-title h1 {
  margin: 0;
  font-size: 24px;
  letter-spacing: 0.04em;
}
.dash-title p {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  opacity: 0.9;
}

@media (max-width: 540px) {
  .dash-hud { font-size: 10px; right: 14px; top: 14px; }
  .dash-close { top: 12px; left: 12px; width: 32px; height: 32px; }
  .dash-toast { font-size: 9px; padding: 8px 12px; }
  .dash-gameover h2 { font-size: 22px; }
  .dash-title h1 { font-size: 20px; }
}