/* ————————————————————————————————————————————————
   Infinite Sudoku · The Ascent
   One continuous board, growing switchback by
   switchback from the riverbank to the summit.
   ———————————————————————————————————————————————— */

:root {
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-ui: "Karla", "Avenir Next", system-ui, sans-serif;

  /* daylight — cream paper, fir ink, moss, clay, river */
  --paper: #f3efe4;
  --paper-deep: #eae5d4;
  --card: #faf7ee;
  --ink: #2b3a2e;
  --ink-soft: #5c6a55;
  --ink-faint: #8b957f;
  --moss: #5a7058;
  --moss-wash: rgba(90, 112, 88, 0.13);
  --moss-wash-strong: rgba(90, 112, 88, 0.26);
  --peer-wash: rgba(90, 112, 88, 0.055);
  --clay: #b4643f;
  --clay-wash: rgba(180, 100, 63, 0.16);
  --river: #53707f;
  --cave: #1d2620;
  --line-soft: rgba(43, 58, 46, 0.14);
  --line-strong: rgba(43, 58, 46, 0.52);
  --shadow-ground: 0 1px 2px rgba(43, 58, 46, 0.05);
  --shadow-lift: 0 1px 2px rgba(43, 58, 46, 0.05), 0 12px 32px rgba(43, 58, 46, 0.10);
  --shadow-float: 0 2px 6px rgba(28, 38, 30, 0.08), 0 24px 64px rgba(28, 38, 30, 0.18);

  --ease-trail: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 140ms;
  --dur-base: 280ms;
  --dur-slow: 480ms;

  color-scheme: light dark;
}

/* night climb */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #141a14;
    --paper-deep: #10150f;
    --card: #1b231a;
    --ink: #e9e6d6;
    --ink-soft: #a9b29a;
    --ink-faint: #79836c;
    --moss: #8ca380;
    --moss-wash: rgba(140, 163, 128, 0.16);
    --moss-wash-strong: rgba(140, 163, 128, 0.30);
    --peer-wash: rgba(140, 163, 128, 0.07);
    --clay: #d08a63;
    --clay-wash: rgba(208, 138, 99, 0.19);
    --river: #8fb0c1;
    --cave: #060906;
    --line-soft: rgba(233, 230, 214, 0.13);
    --line-strong: rgba(233, 230, 214, 0.46);
    --shadow-ground: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
    --shadow-float: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 64px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  --paper: #141a14;
  --paper-deep: #10150f;
  --card: #1b231a;
  --ink: #e9e6d6;
  --ink-soft: #a9b29a;
  --ink-faint: #79836c;
  --moss: #8ca380;
  --moss-wash: rgba(140, 163, 128, 0.16);
  --moss-wash-strong: rgba(140, 163, 128, 0.30);
  --peer-wash: rgba(140, 163, 128, 0.07);
  --clay: #d08a63;
  --clay-wash: rgba(208, 138, 99, 0.19);
  --river: #8fb0c1;
  --cave: #060906;
  --line-soft: rgba(233, 230, 214, 0.13);
  --line-strong: rgba(233, 230, 214, 0.46);
  --shadow-ground: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-float: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 64px rgba(0, 0, 0, 0.5);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.5;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* paper grain */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

.app {
  max-width: 36rem;
  margin: 0 auto;
  padding: 0 1.25rem 4rem;
}

/* ————— top bar ————— */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0 0;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.wordmark-peak { width: 1rem; height: 1rem; color: var(--moss); }

.topbar-right { display: inline-flex; align-items: center; gap: 0.5rem; }

.trail-time {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  border-radius: 0.75rem;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-trail);
}
.icon-btn:hover { background: var(--peer-wash); }
.icon-btn svg { width: 1.125rem; height: 1.125rem; }
.icon-btn[aria-pressed="false"] { opacity: 0.38; }
.ic-sun { display: none; }
[data-theme="dark"] .ic-moon { display: none; }
[data-theme="dark"] .ic-sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ic-moon { display: none; }
  :root:not([data-theme="light"]) .ic-sun { display: block; }
}

/* ————— elevation header ————— */

.trailhead {
  text-align: center;
  padding: 2.25rem 0 0.5rem;
}

.camp-meta {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.leg-name {
  margin: 0.375rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.375rem, 9vw, 3.25rem);
  font-weight: 470;
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 90;
}

.ridge {
  position: relative;
  height: 4.5rem;
  margin-top: 1.375rem;
  user-select: none;
  -webkit-user-select: none;
}
.ridge svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ridge-dot {
  position: absolute;
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: 50%;
  background: var(--clay);
  transform: translate(-50%, -50%);
  transition: left var(--dur-slow) var(--ease-trail), top var(--dur-slow) var(--ease-trail), transform 600ms var(--ease-trail);
  cursor: default;
  touch-action: none;
}
.ridge-dot::before {
  content: "";
  position: absolute;
  inset: -1.125rem;
  border-radius: 50%;
}
.ridge-dot.listening { transform: translate(-50%, -50%) scale(1.6); }
.ridge-dot::after {
  content: "";
  position: absolute;
  inset: -0.4375rem;
  border-radius: 50%;
  border: 1.5px solid var(--clay);
  opacity: 0.35;
  animation: halo 3.2s var(--ease-trail) infinite;
}
@keyframes halo {
  0%, 100% { transform: scale(0.72); opacity: 0.4; }
  50% { transform: scale(1); opacity: 0.12; }
}

/* ————— the growing board ————— */

.board-wrap { padding-top: 1.75rem; }

/* ————— the growth choreography —————
   ripple: the finished face celebrates, radiating from the last digit
   ignite: the cornerstone block flares before it is carried up
   pan:    the camera pulls up the mountain (FLIP transform on the frame)
   transmute: the old face settles into etched stone
   bloom:  the new face grows outward from its cornerstone */

.board.rippling button.bcell {
  animation: ripple 520ms var(--ease-trail) both;
  animation-delay: calc(var(--rd, 0) * 26ms);
}
@keyframes ripple {
  45% { background: var(--moss-wash-strong); transform: translateY(-0.1875rem); }
}
.board.rippling button.bcell.ignite {
  z-index: 2;
  animation: ignite 640ms var(--ease-trail) both;
  animation-delay: 380ms;
}
@keyframes ignite {
  40% { background: var(--clay-wash); box-shadow: 0 0 0 0.375rem var(--clay-wash); transform: scale(1.07); }
  100% { background: var(--moss-wash-strong); }
}

.bcell.etched {
  transition: background 800ms var(--ease-trail), color 800ms var(--ease-trail);
}
.board.transmuting .bcell.etched {
  background: var(--card);
  color: var(--ink);
  transition: none;
}

.board.blooming .bcell.abloom {
  animation: bloom 340ms var(--ease-trail) both;
  animation-delay: calc(230ms + var(--bd, 0) * 32ms);
}
@keyframes bloom {
  from { opacity: 0; transform: scale(0.78); }
}

.board {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-template-rows: repeat(15, 1fr);
  aspect-ratio: 1;
}
/* pitch 1: no face below yet — a single centered face */
.board.solo {
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  aspect-ratio: 1;
  max-width: 26rem;
  margin: 0 auto;
}
.board.solo .bcell { font-size: clamp(1.1875rem, 4.6vmin, 1.75rem); }
.board.solo .bcell .notes { inset: 6%; font-size: clamp(0.5rem, 1.7vmin, 0.6875rem); }
.board {
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  filter: drop-shadow(0 1px 2px rgba(28, 38, 30, 0.06)) drop-shadow(0 14px 28px rgba(28, 38, 30, 0.09));
}

.bcell {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  background: var(--card);
  grid-row: calc(var(--wr) + 1);
  grid-column: calc(var(--wc) + 1);
  font-family: var(--font-display);
  font-size: clamp(0.9375rem, 2.7vmin, 1.3125rem);
  font-weight: 560;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-trail);
}

/* hairlines + block separators + silhouette edges (classes set by JS) */
.bcell.hl-r { border-right: 1px solid var(--line-soft); }
.bcell.hl-b { border-bottom: 1px solid var(--line-soft); }
.bcell.st-r { border-right: 1.5px solid var(--line-strong); }
.bcell.st-b { border-bottom: 1.5px solid var(--line-strong); }
.bcell.ed-r { border-right: 1.5px solid var(--line-strong); }
.bcell.ed-b { border-bottom: 1.5px solid var(--line-strong); }
.bcell.ed-l { border-left: 1.5px solid var(--line-strong); }
.bcell.ed-t { border-top: 1.5px solid var(--line-strong); }
.bcell.rd-tl { border-top-left-radius: 0.875rem; }
.bcell.rd-tr { border-top-right-radius: 0.875rem; }
.bcell.rd-bl { border-bottom-left-radius: 0.875rem; }
.bcell.rd-br { border-bottom-right-radius: 0.875rem; }

/* the mountain you already climbed */
.bcell.etched {
  background: var(--paper-deep);
  color: var(--ink-faint);
  cursor: default;
  font-weight: 470;
}

/* the cornerstone block carried up from the face below */
.bcell.seed { background: var(--moss-wash); color: var(--ink); }

.bcell.peer { background: var(--peer-wash); }
.bcell.same { background: var(--moss-wash); }
.bcell.etched.same { background: var(--moss-wash); color: var(--ink-soft); }
.bcell.sel { background: var(--moss-wash-strong); }
.bcell.user { color: var(--river); }
.bcell.conflict { background: var(--clay-wash); color: var(--clay); }
.bcell.sel.conflict { background: var(--clay-wash); }

.bcell:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: -2px;
  border-radius: 0.375rem;
}

.bcell .notes {
  position: absolute;
  inset: 4%;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  place-items: center;
  font-family: var(--font-ui);
  font-size: clamp(0.4375rem, 1.25vmin, 0.5625rem);
  font-weight: 600;
  color: var(--ink-soft);
  pointer-events: none;
}

/* ————— long-press radial picker ————— */

.radial {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  pointer-events: none;
}
.radial .petal {
  position: absolute;
  left: 0;
  top: 0;
  width: 2.75rem;
  height: 2.75rem;
  margin: -1.375rem 0 0 -1.375rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--card);
  box-shadow: var(--shadow-lift);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 560;
  font-variant-numeric: lining-nums;
  color: var(--ink);
  opacity: 0;
  transform: translate(0, 0) scale(0.4);
  transition: transform 170ms var(--ease-trail), opacity 170ms var(--ease-trail), background 80ms linear, color 80ms linear;
}
.radial.show .petal { opacity: 1; transform: translate(var(--px), var(--py)) scale(1); }
.radial.show .petal.hot {
  background: var(--moss);
  color: var(--card);
  transform: translate(var(--px), var(--py)) scale(1.22);
}
.radial .hub {
  position: absolute;
  width: 0.625rem;
  height: 0.625rem;
  margin: -0.3125rem 0 0 -0.3125rem;
  border-radius: 50%;
  background: var(--clay);
  opacity: 0;
}
.radial.show .hub { opacity: 0.75; }

/* mobile: crop to the active face — a clean 9×9 with the cornerstone visible */
@media (max-width: 44rem) {
  .board, .board.solo {
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(9, 1fr);
    aspect-ratio: 1;
    background: var(--card);
    border: 1.5px solid var(--line-strong);
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: var(--shadow-lift);
    filter: none;
  }
  .bcell { grid-column: calc(var(--mc) + 1); }
  .bcell.fringe { display: none; }
  .bcell.ed-r { border-right-width: 0; }
  .bcell.ed-b { border-bottom-width: 0; }
  .bcell.ed-l { border-left-width: 0; }
  .bcell.ed-t { border-top-width: 0; }
  .bcell.mno-r { border-right-width: 0; }
  .bcell.mno-b { border-bottom-width: 0; }
  .bcell.rd-tl, .bcell.rd-tr, .bcell.rd-bl, .bcell.rd-br { border-radius: 0; }
  .bcell {
    font-size: clamp(1.1875rem, 4.6vmin, 1.75rem);
  }
  .bcell .notes { inset: 6%; font-size: clamp(0.5rem, 1.7vmin, 0.6875rem); }

  /* compact header — the board and the digits must share one screen */
  .topbar { padding-top: 0.875rem; }
  .trailhead { padding-top: 1.125rem; }
  .leg-name { font-size: clamp(1.625rem, 7vw, 2.125rem); }
  .ridge { height: 2.75rem; margin-top: 0.75rem; }
  .board-wrap { padding-top: 1rem; }

  /* digits live in a fixed glass bar — always in reach, never below the fold */
  .controls {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    padding: 0.625rem max(0.875rem, env(safe-area-inset-left)) calc(0.5rem + env(safe-area-inset-bottom)) max(0.875rem, env(safe-area-inset-right));
    background: color-mix(in srgb, var(--paper) 78%, transparent);
    -webkit-backdrop-filter: saturate(150%) blur(16px);
    backdrop-filter: saturate(150%) blur(16px);
    border-top: 1px solid var(--line-soft);
  }
  .controls .tools { padding-bottom: 0.5rem; }
  .tool { min-height: 2.5rem; }
  .key { min-height: 2.875rem; }
  .foot { padding-bottom: 9.5rem; }
}

@media (max-width: 44rem) and (max-height: 42rem) {
  .ridge { display: none; }
  .trailhead { padding-top: 0.75rem; }
}

/* ————— controls ————— */

.controls { padding-top: 1.375rem; }

.tools {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  padding-bottom: 0.875rem;
}

.tool {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 2.75rem;
  padding: 0 1.125rem;
  border: 1px solid var(--line-soft);
  border-radius: 0.875rem;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-trail), color var(--dur-fast) var(--ease-trail), border-color var(--dur-fast) var(--ease-trail);
}
.tool svg { width: 1rem; height: 1rem; }
.tool:hover { background: var(--peer-wash); }
.tool[aria-pressed="true"] {
  background: var(--clay-wash);
  border-color: transparent;
  color: var(--clay);
}

.pad {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 0.375rem;
}

.key {
  min-height: 3.25rem;
  border: none;
  border-radius: 0.75rem;
  background: var(--paper-deep);
  box-shadow: var(--shadow-ground);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 560;
  font-variant-numeric: lining-nums;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-trail), transform var(--dur-fast) var(--ease-trail), opacity var(--dur-base) var(--ease-trail);
}
.key:hover { background: var(--moss-wash); }
.key:active { transform: translateY(1px) scale(0.97); }
.key.spent { opacity: 0.28; }

.tool:focus-visible, .key:focus-visible, .icon-btn:focus-visible, .linklike:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 2px;
}

/* ————— footer ————— */

.foot {
  text-align: center;
  padding-top: 4.5rem;
  color: var(--ink-faint);
}
.foot-firs {
  width: 3.5rem;
  height: auto;
  color: var(--moss);
  opacity: 0.55;
}
.foot p {
  max-width: 24rem;
  margin: 1rem auto 0;
  font-size: 0.8125rem;
  line-height: 1.7;
}
.foot-rules { margin-top: 1.25rem; }
.foot-fine { font-size: 0.75rem; opacity: 0.8; }
.foot-gap { margin-top: 2.75rem; }
.foot-fine .linklike { display: inline-block; margin-top: 0.25rem; }
.linklike {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.linklike:hover { color: var(--clay); }

/* ————— veil + panel ————— */

.veil {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: color-mix(in srgb, var(--paper) 55%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  backdrop-filter: saturate(140%) blur(18px);
}
.veil[hidden] { display: none; }

.panel {
  width: min(25rem, 100%);
  padding: 2.5rem 2.25rem 2.25rem;
  background: var(--card);
  border-radius: 1.75rem;
  box-shadow: var(--shadow-float);
  text-align: center;
  animation: panel-in var(--dur-base) var(--ease-trail);
}
@keyframes panel-in {
  from { opacity: 0; transform: translateY(0.75rem) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.panel-eyebrow {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay);
  font-variant-numeric: tabular-nums;
}

.panel-title {
  margin: 0.625rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 8vw, 2.875rem);
  font-weight: 470;
  font-style: italic;
  line-height: 1.02;
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 80;
}

/* ————— intro demo: the board grows as you climb ————— */

.demo {
  position: relative;
  width: 6.875rem;
  height: 9.625rem;
  margin: 1.375rem auto 0;
}
.dface {
  position: absolute;
  width: 4.125rem;
  height: 4.125rem;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 0.625rem;
  box-shadow: var(--shadow-ground);
}
.dface::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(to right, transparent calc(33.3% - 1px), var(--line-soft) calc(33.3% - 1px), var(--line-soft) 33.3%, transparent 33.3%, transparent calc(66.7% - 1px), var(--line-soft) calc(66.7% - 1px), var(--line-soft) 66.7%, transparent 66.7%),
    linear-gradient(to bottom, transparent calc(33.3% - 1px), var(--line-soft) calc(33.3% - 1px), var(--line-soft) 33.3%, transparent 33.3%, transparent calc(66.7% - 1px), var(--line-soft) calc(66.7% - 1px), var(--line-soft) 66.7%, transparent 66.7%);
}
.dA { left: 0; bottom: 0; }
.dB { left: 2.75rem; bottom: 2.75rem; }
.dC { left: 0; bottom: 5.5rem; }
.dwipe {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  background: var(--moss-wash);
  transform-origin: bottom;
}
.dlock {
  position: absolute;
  display: block;
  width: 33.4%;
  height: 33.4%;
  background: var(--moss-wash-strong);
}
.la { top: 0; right: 0; border-radius: 0 0.5rem 0 0.25rem; }
.lb-seed { bottom: 0; left: 0; border-radius: 0 0.25rem 0 0.5rem; }
.lb { top: 0; left: 0; border-radius: 0.5rem 0 0.25rem 0; }
.lc-seed { bottom: 0; right: 0; border-radius: 0.25rem 0 0.5rem 0; }

/* animation only when motion is welcome; base styles above are the
   completed stack, which is what reduced-motion users see */
@media (prefers-reduced-motion: no-preference) {
  .demo .dface, .demo .dwipe, .demo .dlock {
    animation-duration: 7.5s;
    animation-iteration-count: infinite;
    animation-timing-function: var(--ease-trail);
  }
  .dA { animation-name: demo-a; }
  .dA .dwipe { animation-name: demo-a-wipe; }
  .dA .la { animation-name: demo-a-lock; }
  .dB { animation-name: demo-b; transform-origin: 16% 84%; }
  .dB .dwipe { animation-name: demo-b-wipe; }
  .dB .lb-seed { animation-name: demo-b-seed; }
  .dB .lb { animation-name: demo-b-lock; }
  .dC { animation-name: demo-c; transform-origin: 84% 84%; }
  .dC .dwipe { animation-name: demo-c-wipe; }
  .dC .lc-seed { animation-name: demo-c-seed; }
}
@keyframes demo-a {
  0% { opacity: 0; transform: translateY(0.375rem); }
  4%, 93% { opacity: 1; transform: none; }
  99%, 100% { opacity: 0; transform: none; }
}
@keyframes demo-a-wipe {
  0%, 8% { transform: scaleY(0); }
  24%, 100% { transform: scaleY(1); }
}
@keyframes demo-a-lock {
  0%, 24% { opacity: 0; }
  30%, 100% { opacity: 1; }
}
@keyframes demo-b {
  0%, 30% { opacity: 0; transform: scale(0.55); }
  37%, 93% { opacity: 1; transform: scale(1); }
  99%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes demo-b-wipe {
  0%, 42% { transform: scaleY(0); }
  58%, 100% { transform: scaleY(1); }
}
@keyframes demo-b-seed {
  0%, 30% { opacity: 0; }
  36%, 100% { opacity: 1; }
}
@keyframes demo-b-lock {
  0%, 58% { opacity: 0; }
  64%, 100% { opacity: 1; }
}
@keyframes demo-c {
  0%, 64% { opacity: 0; transform: scale(0.55); }
  71%, 93% { opacity: 1; transform: scale(1); }
  99%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes demo-c-wipe {
  0%, 74% { transform: scaleY(0); }
  88%, 100% { transform: scaleY(1); }
}
@keyframes demo-c-seed {
  0%, 64% { opacity: 0; }
  70%, 100% { opacity: 1; }
}

.panel-body {
  margin: 1.125rem auto 0;
  max-width: 21rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

.cta {
  display: inline-block;
  margin-top: 1.625rem;
  min-height: 3rem;
  padding: 0.75rem 1.75rem;
  border: none;
  border-radius: 62rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-trail), opacity var(--dur-fast) var(--ease-trail);
}
.cta:hover { opacity: 0.88; }
.cta:active { transform: translateY(1px) scale(0.98); }
.cta:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; }

.panel-fine {
  margin: 1.25rem 0 0;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* ————— confirm dialog: two choices ————— */

.panel-choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.625rem;
}
.panel-choices .cta { margin-top: 0; }
.cta-ghost {
  background: transparent;
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.cta-ghost:hover { opacity: 1; background: var(--peer-wash); }

/* ————— mountain rescue: the extraction (rescue.js) —————
   One fixed SVG stage under the paper grain (z 40), so the whole cinematic
   sits in the board's own light. All drawing and motion live in rescue.js;
   here we only place the stage and ground each layer with the same shadow
   language the board uses. */

.rsq-stage {
  position: fixed;
  inset: 0;
  z-index: 38;
  overflow: hidden;
  pointer-events: none;
}
.rsq-stage svg { display: block; width: 100%; height: 100%; }
.rsq-heli { filter: drop-shadow(0 2px 4px rgba(28, 38, 30, 0.1)) drop-shadow(0 18px 32px rgba(28, 38, 30, 0.2)); }
.rsq-ladder { filter: drop-shadow(0 6px 12px rgba(28, 38, 30, 0.16)); }
.rsq-climber { filter: drop-shadow(0 4px 8px rgba(28, 38, 30, 0.18)); }

/* ————— responsive + motion ————— */

@media (min-width: 40rem) {
  .topbar { padding-top: 2.25rem; }
  .trailhead { padding-top: 3rem; }
  .ridge { height: 5.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}