/* The public example: a cork board you can move around, and any screen tests the flow from there.
   Read only. No sidebars, no editing, nothing saved: reloading puts every frame back.
   The rules the app follows apply here too: the page never scrolls, nothing read under 15px,
   targets at least 44px, and it works at any browser zoom and on a phone. */
.demo-body {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
}
.demo-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px max(16px, env(safe-area-inset-left)) 12px
    max(16px, env(safe-area-inset-right));
  border-bottom: 1px solid var(--line);
  background: #f8f8f1;
}
/* The way back to the home page, at the top left. */
.demo-back {
  flex-shrink: 0;
  gap: 6px;
  min-height: 44px;
  text-decoration: none;
}
.demo-intro {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  font-size: 16px;
  color: var(--muted);
}
.demo-intro strong {
  color: var(--ink);
  font-size: 17px;
}
.demo-play {
  flex-shrink: 0;
  gap: 8px;
}
.button.primary {
  background: var(--green);
  color: #fbfdf8;
}

/* The header, the cork and the strip below it. On a phone this is what scrolls (see .stacked). */
.demo-scroll {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* The board */
.demo-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background-color: var(--cork);
  background-image:
    radial-gradient(#00000012 1px, transparent 1.4px),
    radial-gradient(#ffffff12 1px, transparent 1.4px);
  background-size:
    13px 13px,
    17px 17px;
  background-position:
    0 0,
    6px 8px;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.demo-stage.panning {
  cursor: grabbing;
}
.demo-world {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  will-change: transform;
}
.demo-yarn {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}
.demo-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 500 18px var(--sans);
  color: #6a5a3c;
}

/* A frame: paper, a tack, tape with its name, the drawing, and what it is. */
.card {
  position: absolute;
  z-index: 3;
  cursor: grab;
}
.card.dragging {
  z-index: 6;
  cursor: grabbing;
}
.card-paper {
  position: relative;
  background: #fffef5;
  padding: 30px 12px 0;
  border-radius: 1px;
  box-shadow:
    1px 3px 4px #52432a2a,
    2px 9px 15px #69543622;
}
.card:hover .card-paper {
  box-shadow:
    1px 4px 7px #52432a30,
    3px 11px 20px #6954362a;
}
.card-tack {
  position: absolute;
  top: 8px;
  left: calc(50% - 8px);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 24%,
    #d98c7d,
    #b55547 40%,
    #8c3b30 70%,
    #c06a5c 71%
  );
  box-shadow: 0 2px 3px #4c3a2540;
}
.card-tape {
  position: absolute;
  left: 0;
  top: -35px;
  max-width: 100%;
  min-height: 30px;
  padding: 3px 13px 5px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--hand);
  font-size: clamp(24px, calc(16px / var(--board-zoom, 1)), 56px);
  font-weight: 600;
  line-height: 1.1;
  color: #686748;
  background: #f5edcf;
  box-shadow: 0 3px 4px #64513128;
  transform: rotate(var(--tilt));
  clip-path: polygon(0.6% 2%, 99% 0, 100% 97%, 0 100%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-home {
  font-size: 1em;
  color: #9b986f;
}
.card-shot {
  position: relative;
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}
.card-shot img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  background: #fdfbf4;
}
.card-shot::after {
  content: "Test from here →";
  z-index: 6;
  white-space: nowrap;
  position: absolute;
  inset: auto 0 0 0;
  padding: 26px 10px 10px;
  font: 600 clamp(16px, calc(16px / var(--board-zoom, 1)), 36px) var(--sans);
  color: #fffdf4;
  text-align: right;
  background: linear-gradient(to top, #24322a9e, transparent);
  opacity: 0;
  transition: opacity 0.15s;
}
/* Only where there is a pointer to hover with: a tap leaves hover stuck on a touch screen. */
.card-shot:focus-visible::after {
  opacity: 1;
}
@media (hover: hover) {
  .card-shot:hover::after {
    opacity: 1;
  }
}
.card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 4px;
  font-size: clamp(14px, calc(15px / var(--board-zoom, 1)), 36px);
  letter-spacing: 1.4px;
  color: #9b9b87;
}
.card-code {
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #6f7e62;
  background: #eef1e6;
  border-radius: 4px;
  padding: 2px 6px;
}
.pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: max(23px, calc(30px / var(--board-zoom, 1)));
  height: max(23px, calc(30px / var(--board-zoom, 1)));
  border-radius: 50%;
  border: 2px solid #fff7e7;
  background: radial-gradient(circle at 35% 25%, #d88573, #ae4d41 70%);
  color: #fff8e9;
  font: 700 max(12px, calc(15px / var(--board-zoom, 1))) var(--sans);
  display: grid;
  place-items: center;
  box-shadow: 1px 3px 5px #553d2855;
  z-index: 5;
  pointer-events: none;
}
.yarn-label {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 4;
  padding: 7px 12px;
  border-radius: 999px;
  background: #f7f1dd;
  border: 1px solid #d9cba3;
  color: #6b5a40;
  font: 600 max(17px, calc(16px / var(--board-zoom, 1))) var(--sans);
  white-space: nowrap;
  max-width: calc(300px / var(--board-zoom, 1));
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 4px #4a3c2430;
  pointer-events: none;
}
/* No room for the words: a small mark on the yarn, with the words on hover or focus. */
.yarn-label.as-dot {
  width: max(14px, calc(14px / var(--board-zoom, 1)));
  height: max(14px, calc(14px / var(--board-zoom, 1)));
  padding: 0;
  color: transparent;
  pointer-events: auto;
  cursor: help;
}
.yarn-label.as-dot:hover,
.yarn-label.as-dot:focus-visible {
  width: auto;
  height: auto;
  padding: 7px 12px;
  color: #6b5a40;
  z-index: 7;
}
.demo-world.far .pin,
.demo-world.far .yarn-label,
.demo-world.far .way-back-mark {
  opacity: 0;
}
.demo-world.far .card-foot {
  visibility: hidden;
}

/* Legend, controls, hint */
/* The strip below the cork: legend, zoom controls and how to move around. Nothing here floats
   over the board, so no frame is ever under it. */
.demo-dock {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 6px max(16px, env(safe-area-inset-right))
    max(6px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  border-top: 1px solid var(--line);
  background: #f8f8f1;
}
.demo-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 16px;
  color: #5d6455;
}
.demo-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.demo-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.demo-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: #fffef5;
  border: 1px solid var(--line);
}
.demo-controls .icon-button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: #4c5648;
  cursor: pointer;
}
.demo-controls .icon-button:hover {
  background: #e9ecdf;
}
.demo-zoom {
  min-width: 52px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #5d6455;
}
.demo-hint {
  font-size: 15px;
  color: #6b5a3c;
  text-align: right;
}
.only-narrow,
.only-stacked,
.by-mouse {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .by-touch {
    display: none;
  }
  .by-mouse {
    display: inline;
  }
}

/* Walking the flow */
.player {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: #2b2a24f2;
  padding: max(12px, env(safe-area-inset-top)) 12px
    calc(max(12px, env(safe-area-inset-bottom)) + 66px);
  gap: 10px;
}
.player[hidden] {
  display: none;
}
.player-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fffef5;
}
.player-where {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 18px;
  min-width: 0;
}
.player-where span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-where b {
  font-size: 15px;
  color: #6f7e62;
  background: #eef1e6;
  border-radius: 4px;
  padding: 3px 7px;
}
.player-kind {
  font-size: 15px;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 4px;
  background: #e7e3d0;
  color: #6b5f3d;
}
.player-steps {
  margin-left: auto;
  font-size: 16px;
  color: var(--muted);
}
.player-close {
  background: var(--green);
  color: #fbfdf8;
  border-color: var(--green);
}
.player-close:hover {
  background: #2b4033;
}
.player-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
}
.player-frame {
  /* Where the drawing sits in the frame (measured in demo.js); pins are placed on it. */
  --shot-x: 10px;
  --shot-y: 10px;
  --shot-w: calc(100% - 20px);
  --shot-h: calc(100% - 20px);
  position: relative;
  max-width: 100%;
  background: #fffef5;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 14px 40px #00000059;
  line-height: 0;
}
.player-frame img {
  display: block;
  width: 100%;
  height: auto;
}
.player-frame img[hidden] {
  display: none;
}
.player-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: 2px solid #fff7e7;
  background: radial-gradient(circle at 35% 25%, #d88573, #ae4d41 70%);
  color: #fff8e9;
  font: 700 17px var(--sans);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 1px 3px 6px #00000066;
  animation: pulse 2.4s ease-in-out infinite;
}
.player-pin:hover,
.player-pin:focus-visible {
  outline: 6px solid #bc615a4d;
}
@keyframes pulse {
  0%,
  100% {
    box-shadow:
      1px 3px 6px #00000066,
      0 0 0 0 #d8857399;
  }
  50% {
    box-shadow:
      1px 3px 6px #00000066,
      0 0 0 10px #d8857300;
  }
}
.player-note {
  flex-shrink: 0;
  text-align: center;
  font-size: 16px;
  color: #efeadb;
}
.player-choice {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #1c1b1899;
  padding: 16px;
}
.player-choice[hidden] {
  display: none;
}
.player-choice-card {
  width: min(460px, 100%);
  max-height: 80dvh;
  overflow: auto;
  background: #fffef5;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.player-choice-card .eyebrow {
  font-size: 15px;
  letter-spacing: 1.4px;
  color: #96a086;
}
.player-choice-card h2 {
  font: 400 27px/1.2 var(--serif);
}
.player-choice-card > p {
  font-size: 17px;
  color: var(--muted);
}
.branch {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fbfcf6;
  cursor: pointer;
  font: inherit;
}
.branch:hover {
  border-color: var(--green);
  background: #f1f3e9;
}
.branch strong {
  font-size: 17px;
}
.branch small {
  font-size: 15px;
  color: var(--muted);
}
.branch em {
  font-size: 15px;
  font-style: normal;
  color: #7d8872;
}

@media (max-width: 720px) {
  .demo-intro {
    display: none;
  }
  .demo-header {
    justify-content: space-between;
  }
  /* On a phone the strip stacks: legend, controls, then how to move around. */
  .demo-dock {
    flex-direction: column;
    gap: 4px;
  }
  .demo-hint {
    text-align: center;
  }
  .only-wide {
    display: none;
  }
  .only-narrow {
    display: inline;
  }
  .demo-legend {
    justify-content: center;
    gap: 4px 12px;
  }
  .player-steps {
    display: none;
  }
  /* The title takes its own row so the buttons share the next one evenly. */
  .player-where {
    flex-basis: 100%;
  }
  .player-bar .button {
    flex: 1;
    justify-content: center;
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;
  }
  .player-frame {
    padding: 6px;
    width: 100%;
  }
  .player-frame img {
    width: 100%;
  }
}
@media (max-height: 520px) {
  .demo-header {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .demo-intro strong {
    display: none;
  }
  /* A short window (a zoomed laptop) keeps the cork: the strip is one row, without the hint. */
  .demo-dock {
    flex-direction: row;
  }
  .demo-hint {
    display: none;
  }
  .player-note {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .player-pin {
    animation: none;
  }
}

/* A frame that is planned but not drawn yet: on the board, and while walking it. The app shows
   the same thing, because a board in progress is most of what a board ever is. */
.card-shot.planned {
  aspect-ratio: 2 / 1;
  display: grid;
  place-items: center;
  padding: 8px;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 23px,
    #efebdc 23px 24px
  );
  border: 2px dashed #cfc8a9;
  border-radius: 6px;
  overflow: hidden;
}
.card-waiting {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: center;
  color: #6f7767;
  min-width: 0;
}
.card-waiting em {
  font-style: normal;
  letter-spacing: 1.1px;
  color: #a08c5a;
  font-size: clamp(14px, calc(15px / var(--board-zoom, 1)), 32px);
}
.card-waiting b {
  font: 400 clamp(18px, calc(16px / var(--board-zoom, 1)), 40px)
    var(--serif, Georgia, serif);
  color: #4c5648;
}
.demo-world.far .card-waiting > * {
  visibility: hidden;
}
/* The app's “Leave it up to the AI” post-it, larger, with its strip of tape. It stays at every
   zoom, since it says what the frame is. */
.card-post-it {
  position: relative;
  max-width: 82%;
  padding: 0.25em 0.45em 0.35em;
  background: #fff1a3;
  color: #5a4a12;
  font: 600 clamp(24px, calc(22px / var(--board-zoom, 1)), 44px) / 1.05
    var(--hand);
  white-space: pre-line;
  text-align: center;
  transform: rotate(-3deg);
  box-shadow: 1px 3px 6px #4f4f3340;
}
/* Zoomed far out its words would be too small to read, so it stays as a plain sticker. */
.demo-world.far .card-post-it {
  color: transparent;
}
/* Pins tied before the drawing wait down the right side, so the post-it keeps clear of them. */
.card-shot.planned:has(.pin) .card-post-it {
  max-width: 70%;
  margin-right: 18%;
}
.card-post-it::before {
  content: "";
  position: absolute;
  top: -0.2em;
  left: 50%;
  width: 1.6em;
  height: 0.45em;
  transform: translateX(-50%) rotate(2deg);
  background: #ffffff99;
  box-shadow: 0 1px 2px #4f4f3320;
}
.card-shot.planned::after {
  padding-top: 14px;
}
/* A pin that stays on its screen or leaves the app says what it is, beside the pin (pinNote). */
.pin-note {
  position: absolute;
  z-index: 9;
  width: max-content;
  max-width: min(340px, calc(100vw - 48px));
  transform: translate(26px, 10px);
  padding: 10px 14px 12px;
  border: 1px solid #d6dccb;
  border-radius: 10px;
  background: #fffef5;
  color: #253b2f;
  box-shadow: 0 8px 22px #0005;
  line-height: 1.45;
  text-align: left;
  /* It never blocks another pin: clicks pass through to the drawing, except on its link. */
  pointer-events: none;
}
.pin-note.flip-x {
  transform: translate(calc(-100% - 26px), 10px);
}
.pin-note.flip-y {
  transform: translate(26px, calc(-100% - 10px));
}
.pin-note.flip-x.flip-y {
  transform: translate(calc(-100% - 26px), calc(-100% - 10px));
}
.pin-note strong {
  display: block;
  font-size: 17px;
}
.pin-note p {
  margin-top: 4px;
  font-size: 16px;
  color: #4c5648;
  overflow-wrap: anywhere;
}
.pin-note a {
  color: var(--green);
  text-decoration: underline;
  pointer-events: auto;
}

/* A page with no drawing yet: its summary, then what its author wants it to do. */
.player-frame.planned {
  width: min(880px, 100%);
  padding: 24px 32px;
}
.plan-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  line-height: 1.55;
  text-align: left;
  color: #253b2f;
}
.plan-summary {
  font: 400 25px/1.35 var(--serif, Georgia, serif);
}
.plan-lead {
  font-size: 18px;
  font-weight: 600;
}
.plan-page ul {
  margin: 0;
  padding-left: 22px;
  display: grid;
  gap: 8px;
  font-size: 18px;
}
.plan-go {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.plan-go:hover {
  color: #2b4033;
}

/* Reachable targets. */
.player-pin {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: none;
  box-shadow: none;
  isolation: isolate;
}
.player-pin::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 2px solid #fff7e7;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #d88573, #ae4d41 70%);
  box-shadow: 0 2px 4px #0005;
  z-index: -1;
}
.player-stage {
  overflow-y: scroll;
  scrollbar-gutter: stable;
  place-items: safe center;
}
.player-note {
  display: block;
  line-height: 1.5;
  width: min(680px, 100%);
  overflow-wrap: anywhere;
}
.player-note[hidden] {
  display: none;
}
.player-note a {
  color: #fff;
  text-decoration: underline;
}
.player-layout {
  align-self: center;
  flex-shrink: 0;
}
.player-scroll-hint {
  position: absolute;
  bottom: 20px;
  right: 30px;
  z-index: 8;
  min-height: 44px;
}
.player-stage {
  position: relative;
}

.player-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* What the walk shows sits in the middle when it fits and starts at the top when it does not. */
  justify-content: flex-start;
  justify-content: safe center;
  gap: 16px;
  scrollbar-width: auto;
  scrollbar-color: #b0b89e #414438;
}
.player-frame {
  flex: none;
}
/* A drawing keeps the size its pins need (see sizeFrame); a narrower stage scrolls sideways too. */
.player-stage {
  overflow-x: auto;
  align-items: safe center;
}
.player-frame:has(> img:not([hidden])) {
  max-width: none;
}
.player-unplaced {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  line-height: 1.4;
}
.player-unplaced .button {
  white-space: normal;
  text-align: left;
}
.player-stage::-webkit-scrollbar,
.player-choice-card::-webkit-scrollbar {
  width: 12px;
}
.player-stage::-webkit-scrollbar-thumb,
.player-choice-card::-webkit-scrollbar-thumb {
  background: #b0b89e;
  border-radius: 8px;
}
.player-scroll-hint[hidden],
.player-layout[hidden],
.player-detail-close[hidden] {
  display: none;
}
@media (max-height: 500px) {
  .player {
    padding: 6px 6px 74px;
    gap: 6px;
  }
  .player-bar {
    padding: 4px 6px;
    gap: 4px;
  }
  .player-where {
    flex: 1;
    max-width: 34%;
    font-size: 16px;
  }
  .player-steps {
    display: none;
  }
  .player-bar .button {
    padding: 8px;
  }
  .demo-header {
    min-height: 58px;
    padding: 6px 12px;
  }
  .demo-intro {
    display: none;
  }
  .demo-hint {
    display: none;
  }
}

/* A way back is a small mark in its frame's footer; the words float above it on hover or focus. */
.way-back-mark {
  position: relative;
  margin-left: auto;
  width: max(25px, calc(25px / var(--board-zoom, 1)));
  height: max(25px, calc(25px / var(--board-zoom, 1)));
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: #718060;
  font: 600 max(17px, calc(17px / var(--board-zoom, 1))) / 1 var(--sans);
  cursor: help;
}
.way-back-mark:hover,
.way-back-mark:focus-visible {
  background: #eef1e6;
}
.way-back-mark > span {
  position: absolute;
  bottom: calc(100% + 4px);
  right: 0;
  z-index: 7;
  display: none;
  padding: 6px 11px;
  border: 1px solid #b3bfa4;
  border-radius: 999px;
  background: #eef1e6;
  box-shadow: 0 2px 6px #4a3c2433;
  color: #5f6e55;
  font: 600 max(16px, calc(16px / var(--board-zoom, 1))) var(--sans);
  white-space: nowrap;
}
.way-back-mark:hover > span,
.way-back-mark:focus-visible > span {
  display: block;
}

/* A laptop at 400% to 500% browser zoom (under 380 CSS px wide or 340 tall): the header keeps
   Home and Test the flow, the walk's buttons share their rows, and the colour key steps aside so
   the cork keeps some room. Nothing reaches past the window. */
@media (max-width: 380px) {
  .demo-header {
    gap: 8px;
  }
  .demo-back {
    padding-left: 14px;
    padding-right: 14px;
  }
  .demo-back-label {
    display: none;
  }
  .player-bar {
    flex-wrap: wrap;
  }
  .player-bar .button {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 6px;
    padding-right: 6px;
  }
}
/* The narrowest phones give the walk their whole width. */
@media (max-width: 359px) {
  .player {
    padding-left: 4px;
    padding-right: 4px;
  }
}
@media (max-height: 340px) {
  .demo-legend {
    display: none;
  }
  /* The walk scrolls as one column: its bar, then the page at the window's full height. */
  .player {
    overflow-y: auto;
    padding-bottom: 12px;
  }
  .player-stage {
    flex: none;
    height: calc(100dvh - 24px);
  }
  /* The hint stays in the window's corner while the walk scrolls, clear of its bar. */
  .player-scroll-hint {
    position: fixed;
    bottom: 6px;
    right: 6px;
  }
}
@media (max-height: 500px), (max-width: 380px) {
  .player-where {
    overflow: hidden;
  }
}

/* A phone: the frames stack in one column (demo.js) and the page scrolls like any other, header
   and key included, so nothing stays pinned over the cork. Frames keep their column: a drag
   scrolls, a tap tests the flow from that frame. */
.stacked .demo-scroll {
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  scrollbar-color: #8a947d #e9eadf;
}
.stacked .demo-scroll::-webkit-scrollbar {
  width: 12px;
}
.stacked .demo-scroll::-webkit-scrollbar-thumb {
  background: #8a947d;
  border: 3px solid #e9eadf;
  border-radius: 8px;
}
.stacked .demo-stage {
  order: 1;
  flex: none;
  touch-action: manipulation;
  cursor: default;
}
.stacked .card {
  cursor: pointer;
}
/* Pins keep their size on the drawing, as in a photo of the board, so pins drawn close together
   stay apart on a narrow screen; never smaller than 22px, with 15px numbers. */
.stacked .pin {
  width: max(calc(22px / var(--board-zoom, 1)), 30px);
  height: max(calc(22px / var(--board-zoom, 1)), 30px);
  font-size: calc(15px / var(--board-zoom, 1));
  border-width: max(calc(1.5px / var(--board-zoom, 1)), 2px);
}
/* The key sits between the header and the cork, and scrolls away with them. */
.stacked .demo-dock {
  border-top: 0;
  border-bottom: 1px solid var(--line);
  padding-top: 10px;
  padding-bottom: 10px;
}
.stacked .demo-controls,
.stacked .only-board {
  display: none;
}
.stacked .only-stacked {
  display: inline;
}

/* A short, wide window (a phone on its side): the header and the strip share one row, so the
   cork keeps most of the height. */
@media (max-height: 520px) and (min-width: 600px) {
  .demo-scroll {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .demo-header {
    grid-area: 1 / 1;
  }
  .demo-dock {
    grid-area: 1 / 2;
    flex-wrap: nowrap;
    justify-content: flex-end;
    border-top: 0;
    border-bottom: 1px solid var(--line);
  }
  .demo-legend {
    justify-content: flex-end;
  }
  .demo-stage {
    grid-area: 2 / 1 / 3 / 3;
  }
}