/* TallmanGames — one stylesheet for every page. No framework and nothing fetched from anyone
   else: the display face is the game's own Chakra Petch, served from fonts/ (OFL, see
   fonts/OFL.txt), and body text stays in the system face.

   The look is Box Stack's: a night harbour, an amber crane, and cargo in any colour. The hero on
   the homepage is always night; everything else follows the visitor's light or dark setting. */

@font-face {
  font-family: "Chakra Petch";
  src: url("fonts/chakra-petch-semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Chakra Petch";
  src: url("fonts/chakra-petch-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* Registered so the hero's sky can ease from one dealt palette to the next. */
@property --field {
  syntax: "<color>";
  inherits: true;
  initial-value: #230d30;
}

:root {
  --bg: #f7f5fa;
  --bg-deep: #efebf4;
  --panel: #ffffff;
  --ink: #1b1523;
  --ink-dim: #5f586d;
  --rule: #e3dee9;
  --amber: #a8650b;          /* amber as text, dark enough to read on white */
  --crane: #e0a83c;          /* amber as paint: the crane, buttons */
  --crane-lit: #f3c877;
  --link: #6a35a8;
  --shadow: 0 1px 2px rgba(27, 21, 35, 0.06), 0 8px 24px rgba(27, 21, 35, 0.07);
  --radius: 14px;
  --display: "Chakra Petch", system-ui, sans-serif;
  --wrap: 68rem;
  --night: #230d30;          /* the store art's night; the hero deals its own over it */
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #110a18;
    --bg-deep: #0c0712;
    --panel: #1b1325;
    --ink: #efe9f6;
    --ink-dim: #aa9fba;
    --rule: #2d2340;
    --amber: #f0b04a;
    --link: #c9a3f7;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.15; letter-spacing: -0.005em; text-wrap: balance; }
[id] { scroll-margin-top: 72px; }      /* land below the sticky bar, not under it */
h1 { font-size: clamp(2.1rem, 5.5vw, 3.4rem); margin: 0 0 0.6rem; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); margin: 0 0 0.75rem; }
h3 { font-size: 1.2rem; margin: 0 0 0.35rem; }
p { margin: 0 0 1rem; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.narrow { max-width: 44rem; }
.meta { color: var(--ink-dim); font-size: 0.92rem; }
.lede { color: var(--ink-dim); font-size: 1.12rem; }
.eyebrow {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 0.6rem;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--panel); color: var(--ink); padding: 0.6rem 1rem; border-radius: 8px;
}
.skip-link:focus { top: 1rem; }

code {
  background: var(--bg-deep);
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 0.1em 0.35em;
  font-size: 0.88em;
}

/* The studio's mark: the wordmark from the game's launch curtain, a silhouette used as a mask so
   it takes the colour of whatever it sits in, the way the game tints it to its own ink. */
.studio-mark {
  display: block; flex: none; aspect-ratio: 720 / 409; background: currentColor;
  -webkit-mask: url("img/tallman-games.png") center / contain no-repeat;
  mask: url("img/tallman-games.png") center / contain no-repeat;
}
/* The tower alone, from the middle of the wordmark, for where the whole of it would be too small
   to read. Drawn as the wordmark draws it, inside an outer line that is new: the right side's,
   mirrored, because in the wordmark the tower's left side is the edge of the L. In its own
   colours, with a pale rim so it holds on any ground. */
.studio-mark.tower {
  aspect-ratio: 138 / 449;
  background: url("img/tallman-tower.png") center / contain no-repeat;
  -webkit-mask: none;
  mask: none;
}

/* ------------------------------------------------------------------ top bar
   Sticky and quiet. On the homepage it starts clear over the night hero, takes the hero's sky
   once the page scrolls, and turns to the usual bar when the hero has gone. */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}
@supports (color: color-mix(in srgb, red, blue)) {
  .topbar {
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
  }
}
.topbar .wrap { display: flex; align-items: center; gap: 1rem; min-height: 60px; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  color: inherit;
  text-decoration: none;
  letter-spacing: 0.01em;
  min-height: 44px;
}
.brand .studio-mark { height: 40px; width: auto; }
.topbar nav { margin-left: auto; display: flex; gap: 0.25rem; }
.topbar nav a {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.98rem;
  color: inherit;
  text-decoration: none;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  opacity: 0.8;
  white-space: nowrap;
}
.topbar nav a:hover { opacity: 1; background: rgba(128, 110, 150, 0.14); }
.topbar nav a[aria-current="page"] { opacity: 1; box-shadow: inset 0 -2px 0 var(--crane); border-radius: 0; }

/* On a phone every page stays in the bar; the name gives way to the mark to make room. */
@media (max-width: 36rem) {
  .topbar .wrap { gap: 0.5rem; }
  .topbar nav { gap: 0; }
  .topbar nav a { padding: 0.55rem 0.5rem; font-size: 0.95rem; }
  .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 22rem) { .topbar nav a { padding: 0.55rem 0.35rem; font-size: 0.88rem; } }

body.home .topbar { margin-bottom: -61px; }   /* lie over the hero rather than push it down */
body.home .topbar.over {
  background: var(--field);
  border-color: rgba(255, 255, 255, 0.08);
  color: #f4eff9;
}
@supports (color: color-mix(in srgb, red, blue)) {
  body.home .topbar.over { background: color-mix(in srgb, var(--field) 92%, transparent); }
}
body.home .topbar.clear {
  background: transparent;
  border-color: transparent;
  color: #f4eff9;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 52px;
  padding: 0.75rem 1.35rem;
  border-radius: 12px;
  border: 1px solid var(--rule);
  background: var(--panel);
  color: var(--ink);
  font: 600 1rem/1.1 var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); text-decoration: none; }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: none; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn.primary {
  background: linear-gradient(180deg, var(--crane-lit), var(--crane) 55%);
  border-color: #b98325;
  color: #1a1206;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 0 rgba(0, 0, 0, 0.15);
}
.btn.primary:hover { filter: brightness(1.05); box-shadow: 0 8px 22px rgba(224, 168, 60, 0.35); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ------------------------------------------------------------------ hero
   A night harbour. Its sky is the field of the palette this visit was dealt, which home.js sets
   as --field; the crane builds a tower on a boat, and the water runs the whole width under it. */

.hero {
  --field: var(--night);
  position: relative;
  overflow: hidden;
  color: #f4eff9;
  background-color: var(--field);
  background-image:
    radial-gradient(80% 70% at 78% 40%, rgba(255, 255, 255, 0.09) 0%, transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 45%, rgba(0, 0, 0, 0.35) 100%);
  transition: --field 1.4s ease;
  padding-top: 61px;
}
.hero .wrap {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: end;
  gap: 2rem;
  min-height: min(720px, 90vh);
}
/* The copy is one centred column at every width, the way it reads on a phone. */
.hero-copy {
  align-self: center; padding: 3rem 0 5rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero .eyebrow { color: var(--crane-lit); }
.hero h1 { color: #fff; text-wrap: balance; max-width: 30rem; }
.hero p { color: #ddd5e8; font-size: 1.15rem; max-width: 33rem; }
.hero .hero-intro span { display: block; }   /* one sentence to a line */
.hero .hero-more { margin: 1.25rem 0 0; font-size: 1rem; }
.hero .hero-logo { width: min(300px, 70vw); margin: 0 0 1.75rem; color: #fff; }

/* Try it here, over the two stores: the button centred over the badges. */
.get { display: inline-flex; flex-direction: column; align-items: center; gap: 0.75rem; max-width: 100%; }
.get .actions, .get .stores { margin: 0; }
/* On the homepage the button is as wide as the badges under it at every width, as on a phone. */
.hero .get { align-items: stretch; }
.hero .actions, .hero .stores { justify-content: center; }
.hero .btn.try { flex: 1 1 15rem; }

/* The store badges, drawn the way the stores draw theirs: black, a grey rim, the store's mark. */
.stores { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; }
.store {
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-width: 11rem; min-height: 56px; padding: 0.45rem 1.1rem 0.45rem 0.85rem;
  background: #000; color: #fff; border: 1px solid #a6a6a6; border-radius: 10px;
  text-decoration: none; line-height: 1.05; text-align: left; white-space: nowrap; touch-action: manipulation;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.store:hover { transform: translateY(-1px); border-color: #fff; text-decoration: none; }
.store svg { width: 26px; height: 30px; flex: none; }
.store small { display: block; font-size: 0.72rem; letter-spacing: 0.02em; }
.store b { display: block; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; }

/* "Coming soon", for a store link that isn't live yet. */
dialog.soon {
  border: 0; border-radius: var(--radius); padding: 1.75rem 1.75rem 1.25rem; max-width: min(22rem, calc(100vw - 2rem));
  background: var(--panel); color: var(--ink); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); text-align: center;
}
dialog.soon::backdrop { background: rgba(12, 7, 18, 0.6); }
dialog.soon h2 { margin: 0 0 0.4rem; font-size: 1.5rem; }
dialog.soon p { color: var(--ink-dim); margin: 0 0 1.25rem; }
dialog.soon .btn { min-width: 8rem; }
.hero .hero-more a { color: var(--crane-lit); font-family: var(--display); font-weight: 600; letter-spacing: 0.02em; }
.hero-art { position: relative; justify-self: center; width: min(380px, 100%); z-index: 1; display: flex; flex-direction: column-reverse; }
.hero-art canvas { display: block; width: 100%; height: auto; cursor: pointer; border-radius: 6px; -webkit-tap-highlight-color: transparent; }
.hero-art canvas:focus-visible { outline-color: var(--crane-lit); }
.hero-hint {
  margin: 0 0 0.4rem; text-align: center;
  font: 600 0.8rem var(--display); letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(244, 239, 249, 0.55); pointer-events: none;
  transition: opacity 0.6s;
}

/* The harbour: two slow layers of swell across the whole width, over the bottom of the boat.
   Each SVG is twice the width and slides by half of itself, so each path must repeat every 800
   viewBox units (a whole number of waves) or the loop jumps when it starts again. */
.water { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; z-index: 2; pointer-events: none; }
.water svg { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; }
.water .back { animation: swell 21s linear infinite; }
.water .front { animation: swell 14s linear infinite reverse; }
@keyframes swell { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .water svg { animation: none; } }

@media (max-width: 52rem) {
  .hero .wrap { grid-template-columns: 1fr; min-height: 0; gap: 0; text-align: center; }
  .hero-copy { padding: 2.5rem 0 1.25rem; }
  .hero-art { width: min(300px, 80vw); }
  .btn.try { flex: 1 1 15rem; }
  .get { display: flex; align-items: stretch; }
  .hero .get { align-self: stretch; }
  .stores { justify-content: center; }
  .store { flex: 1 1 9rem; min-width: 0; justify-content: center; padding: 0.45rem 0.7rem; gap: 0.5rem; }
  .store svg { width: 22px; height: 26px; }
  .store b { font-size: 1.12rem; }

}

/* ------------------------------------------------------------------ sections */

.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section.tint { background: var(--bg-deep); }

/* Box Stack's introduction: the app icon beside its name. */
.game-title { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.game-title img { width: 72px; height: 72px; border-radius: 18px; box-shadow: var(--shadow); flex: none; }
.game-title .tagline { font-family: var(--display); font-weight: 600; color: var(--amber); letter-spacing: 0.04em; margin: 0; }

.two { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 52rem) { .two { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ the Box Stack page */

.game-intro .two { align-items: center; }
.game-intro h1 { margin: 0; }
.game-intro .game-title img { width: 84px; height: 84px; border-radius: 20px; }
.feature { margin: 0; }
.feature img { width: 100%; height: auto; display: block; border-radius: var(--radius); box-shadow: var(--shadow); }
.tips { padding-left: 1.2rem; }
.tips li { margin: 0.6rem 0; color: var(--ink-dim); }
.tips strong { color: var(--ink); }
/* ------------------------------------------------------------------ the Play page
   The real game, from Box Stack's playable ad, and the two stores under it. On a big screen it runs
   inside a phone; on a phone it fills the screen under the bar. */

.play-page { padding: clamp(2rem, 5vw, 3.5rem) 0; }
.play-grid { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.phone-wrap { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; min-width: 0; }
.phone {
  position: relative;
  /* As big as the game is drawn for, and never taller than the window leaves room for. */
  width: min(320px, calc((100svh - 61px - 9rem) * 298 / 600 + 22px));
  min-width: 260px;
  padding: 11px;
  border-radius: 44px;
  background: linear-gradient(145deg, #2d2638, #0f0b15);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 60px rgba(20, 8, 30, 0.35),
              0 0 90px rgba(224, 168, 60, 0.18);
}
.phone-screen {
  position: relative;
  aspect-ratio: 298 / 600;
  border-radius: 34px;
  overflow: hidden;
  background: #0c1018;
}
.phone-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.play-after { margin-top: 1rem; text-align: center; width: min(24rem, 100%); color: var(--ink-dim); font-size: 0.95rem; }
.play-after p { margin: 0 0 0.6rem; }
.play-after p:empty { display: none; }
.play-after .stores { justify-content: center; margin-top: 0; }
.play-after .store { flex: 1 1 0; min-width: 0; justify-content: center; gap: 0.5rem; padding-left: 0.6rem; padding-right: 0.6rem; }
.play-after .store b { font-size: 1.15rem; }

/* On a phone the game is the page: edge to edge, every pixel of height the bar leaves but a strip
   for the badges, which shrink to the stores' own 40px minimum to give it that. The game fits its
   board to the width it gets, so height spent here is width lost there. */
@media (max-width: 52rem) {
  .play-page { padding: 0 0 2.5rem; }
  .phone-wrap { justify-self: stretch; margin: 0 -1.25rem; }
  .phone { width: 100%; min-width: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .phone-screen { aspect-ratio: auto; height: calc(100svh - 61px - 3.5rem); min-height: 420px; border-radius: 0; }
  .play-after { width: auto; margin-top: 0.5rem; padding: 0 1.25rem; }
  .play-after .stores { gap: 0.5rem; }
  .play-after .store { min-height: 40px; padding-top: 0.2rem; padding-bottom: 0.2rem; border-radius: 8px; gap: 0.4rem; }
  .play-after .store svg { width: 18px; height: 22px; }
  .play-after .store small { font-size: 0.6rem; }
  .play-after .store b { font-size: 0.98rem; }
}

/* ------------------------------------------------------------------ cards */

.card {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

.points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 52rem) { .points { grid-template-columns: 1fr; } }
.points .card { box-shadow: none; }
.points h3 { font-size: 1.12rem; }
.points p { margin: 0; color: var(--ink-dim); font-size: 0.97rem; }

.mail {
  display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: center;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 14px;
  padding: 0.4rem 0.4rem 0.4rem 1.1rem; box-shadow: var(--shadow); max-width: 100%;
}
.mail a { font: 600 clamp(1rem, 3.6vw, 1.2rem) var(--display); overflow-wrap: anywhere; display: inline-flex; align-items: center; min-height: 44px; }
.copy {
  min-height: 44px; padding: 0.5rem 0.9rem; border-radius: 10px; border: 1px solid var(--rule);
  background: var(--bg); color: var(--ink); font: 600 0.88rem var(--display); letter-spacing: 0.05em;
  text-transform: uppercase; cursor: pointer; touch-action: manipulation; min-width: 6.2rem;
}
.copy.done { color: #1d7a45; border-color: #2f8a55; }
.card .mail { background: none; border: 0; box-shadow: none; padding: 0; justify-content: flex-start; gap: 0.5rem 0.75rem; }
@media (prefers-color-scheme: dark) { .copy.done { color: #7fd6a3; } }

/* ------------------------------------------------------------------ plain pages */

.page { padding: clamp(2.5rem, 6vw, 4rem) 0 2rem; }
.page h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
.page h2 { font-size: 1.45rem; margin-top: 2.75rem; }
.page ul { padding-left: 1.2rem; }
.page li { margin: 0.35rem 0; }

.faq { display: grid; gap: 0.7rem; margin-top: 1rem; }
.faq details {
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 0 1.2rem;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 1rem 0;
  font: 600 1.08rem/1.35 var(--display);
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--amber); transition: transform 0.2s; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink-dim); }

.callout { border-left: 3px solid var(--crane); padding: 0.2rem 0 0.2rem 1rem; margin: 1.25rem 0; }

/* 404: a little tower whose top box keeps tipping off. */
.lost { text-align: center; padding: clamp(3rem, 10vw, 6rem) 0; }
.fallen { position: relative; width: 150px; height: 104px; margin: 0 auto 1.75rem; }
.fallen::after { content: ""; position: absolute; left: -20px; right: -20px; bottom: -3px; height: 3px; border-radius: 2px; background: var(--rule); }
.fallen i {
  position: absolute; width: 48px; height: 48px; border-radius: 7px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.25), inset 0 -6px 0 rgba(0, 0, 0, 0.22);
}
.fallen i:nth-child(1) { left: 2px; bottom: 0; background: #3aa7b8; }
.fallen i:nth-child(2) { left: 52px; bottom: 0; background: #c08fe3; }
.fallen i:nth-child(3) {
  left: 52px; bottom: 50px; background: #2fcf91;
  transform-origin: 100% 100%;
  animation: tumble 3.2s cubic-bezier(0.5, 0, 0.7, 0.3) infinite;
}
@keyframes tumble {
  0%, 22% { transform: none; opacity: 1; }
  38% { transform: translate(14px, 0) rotate(38deg); }
  56% { transform: translate(50px, 50px) rotate(90deg); }
  62% { transform: translate(50px, 42px) rotate(90deg); }
  68%, 88% { transform: translate(50px, 50px) rotate(90deg); opacity: 1; }
  96% { transform: translate(50px, 50px) rotate(90deg); opacity: 0; }
  100% { transform: none; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .fallen i:nth-child(3) { animation: none; transform: translate(14px, 0) rotate(30deg); } }

/* ------------------------------------------------------------------ footer */

.foot { border-top: 1px solid var(--rule); padding: 2.25rem 0 2.75rem; color: var(--ink-dim); font-size: 0.93rem; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: center; justify-content: space-between; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.foot a { color: inherit; }
.foot .made { display: flex; align-items: center; gap: 0.75rem; line-height: 1.45; }
.foot .made .studio-mark { width: 84px; color: var(--ink); }
@media (max-width: 40rem) { .foot .wrap { flex-direction: column; align-items: flex-start; } }

/* ------------------------------------------------------------------ reveal
   Sections rise into place as they arrive. Only when scripts run and motion is welcome: without
   either, everything is simply there. */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js [data-reveal].shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ------------------------------------------------------------ box-stack/colours/
   The colour vote: one screen, always at night like the game in it. Where you are and the three
   things to do across the top, Box Stack running in the middle wearing the palette, and the
   choice about it where the game's banner sits. A tower is drawn on its palette's own background,
   so its colours are the palette's rather than the theme's. */

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

body.colours {
  --panel: #151a25;
  --panel-lit: #232b3c;
  --ink: #eef0f6;
  --ink-dim: #a6b0c4;
  --rule: #2b3244;
  --link: #c9a3f7;
  --amber: #f0b04a;
  --bg: #0b0e15;
  --bg-deep: #07090e;
  background: var(--bg-deep);
  color: var(--ink);
  color-scheme: dark;
  overflow: hidden;
}
.colours .noscript { position: fixed; inset: auto 1rem 1rem; z-index: 200; background: var(--panel); padding: 1rem; border-radius: 12px; }

.app {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

/* The site's own top bar, then the three tabs. */
.colours .topbar { position: static; padding-top: env(safe-area-inset-top, 0px); }
.app-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "tabs";
  align-items: center;
  padding: 0.45rem calc(env(safe-area-inset-right, 0px) + 0.6rem) 0.45rem calc(env(safe-area-inset-left, 0px) + 0.6rem);
  background: var(--bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.stage-top .info { font-family: var(--display); }
/* The picture picker fills the stage with its own heading; the stage's buttons step aside for it. */
.stage-game:has(.picker:not([hidden])) .stage-top { display: none; }

.tabs {
  grid-area: tabs;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 13px;
  background: var(--panel);
  border: 1px solid var(--rule);
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  min-height: 48px;
  padding: 0.3rem 0.4rem;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--ink-dim);
  font: 600 0.98rem/1.15 var(--display);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.15s, color 0.15s;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { background: var(--panel-lit); color: var(--ink); box-shadow: inset 0 -3px 0 var(--crane); }
.tab-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; letter-spacing: -0.01em; }
.tab-count { font: 600 0.78rem/1 var(--display); font-variant-numeric: tabular-nums; color: var(--ink-dim); }
.tab-count:empty { display: none; }
/* The open tab's count is the stage's "1 of 13"; saying it twice in two forms only confused. */
.tab[aria-selected="true"] .tab-count { display: none; }
@media (max-width: 30rem) { .tab { font-size: clamp(0.8rem, 3.7vw, 0.95rem); padding: 0.3rem 0.15rem; } }
@media (min-width: 52rem) {
  .app-bar { grid-template-columns: minmax(0, 36rem); justify-content: center; }
  .tab { flex-direction: row; gap: 0.5rem; }
}

.app-body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
.app-body:focus { outline: none; }

.stage-game { position: relative; min-height: 0; overflow: hidden; background: var(--bg-deep); }
.stage-game iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.stage-loading {
  position: absolute; inset: 0; margin: 0;
  display: grid; place-items: center; padding: 1rem; text-align: center;
  font: 600 1rem var(--display); color: var(--ink-dim);
}
.stage-loading[hidden] { display: none; }
body.dropping .stage-game { outline: 3px dashed var(--crane); outline-offset: -6px; }

/* The corners the game leaves free in this mode: how far through, then undo and the options. */
.stage-top {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  z-index: 3;
}
.stage-top > * { pointer-events: auto; }
.stage-top .spacer { flex: 1; pointer-events: none; }
.round {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(8, 10, 16, 0.72);
  color: var(--ink);
  font: 600 1.15rem/1 system-ui, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}
.round[hidden] { display: none; }
.round:disabled { opacity: 0.4; cursor: default; }
.count {
  font: 600 0.95rem var(--display);
  font-variant-numeric: tabular-nums;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: rgba(8, 10, 16, 0.72);
  white-space: nowrap;
}
.count:empty { display: none; }

.stage-options {
  position: absolute;
  top: 60px;
  right: 10px;
  z-index: 4;
  width: min(19rem, calc(100% - 20px));
  display: grid;
  justify-items: start;
  padding: 0.5rem 0.9rem 0.4rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}
.stage-options[hidden], .stage-options [hidden] { display: none; }
.toggle { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; font-size: 0.92rem; color: var(--ink-dim); cursor: pointer; margin: 0.4rem 0 0.3rem; }
.toggle b { color: var(--ink); font-weight: 600; }
.toggle input { width: 22px; height: 22px; margin: 0.1rem 0 0; accent-color: var(--crane); }

button.link {
  font: inherit;
  font-size: 0.94rem;
  background: none;
  border: 0;
  color: var(--link);
  cursor: pointer;
  padding: 0.6rem 0.35rem;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 2px;
  touch-action: manipulation;
}
button.link:disabled { color: var(--ink-dim); opacity: 0.6; text-decoration: none; cursor: default; }
button.link[hidden] { display: none; }
.colours button:focus-visible, .colours input:focus-visible, .colours a:focus-visible, .colours label:focus-within {
  outline: 3px solid var(--link);
  outline-offset: 2px;
}
.colours .swatch-picker:focus-within, .colours .slider:focus-within, .colours .hex-field:focus-within { outline: none; }

/* Buttons on the stage are the night's, whatever the visitor's own setting. */
.colours .btn { background: var(--panel); color: var(--ink); border-color: var(--rule); }
.colours .btn.primary { color: #16181d; border-color: transparent; background: linear-gradient(180deg, var(--crane-lit), var(--crane) 55%); }
.colours .btn.small { min-height: 48px; padding: 0.4rem 0.8rem; font-size: 0.92rem; }
.colours .btn[hidden] { display: none; }

/* Where the game's banner sits: what is being asked, and the two answers. */
.stage-bar {
  padding: 0.5rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.stage-bar[hidden] { display: none; }
.ask { margin: 0 0 0.45rem; text-align: center; font: 600 0.98rem var(--display); color: var(--ink-dim); }
.ask .tag {
  display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.5rem; border-radius: 6px;
  font: 600 0.8rem var(--display); color: #16181d; background: var(--crane-lit);
}
.ask .tag[hidden] { display: none; }
.decide { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; max-width: 30rem; margin: 0 auto; }
.decide .btn { min-height: 54px; font-size: 1.08rem; }
.colours .btn.skip { border-color: #b3475a; color: #ffc2cc; background: rgba(179, 71, 90, 0.18); }
.colours .btn.keep { border-color: #2f8a55; color: #c8f5da; background: rgba(47, 138, 85, 0.28); }
.sync { margin: 0.4rem 0 0; text-align: center; font-size: 0.85rem; }
/* With a list finished, its summary is the choice: the bar keeps only what it has to say. */
.stage-bar.idle .ask, .stage-bar.idle .decide { display: none; }
.stage-bar.idle:has(.sync:empty) { display: none; }
.sync:empty { display: none; }

/* The summary at the end of a list, or of the choices so far, over the game. */
/* **The card always fits the stage.** Centred and taller than the stage, it lost its bottom, and
   with it the way on, below the fold; so it is never taller than the stage, and when its towers
   need more room than that, they scroll inside it with the words above and the buttons below. */
.stage-done {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  padding: 0.75rem;
  background: rgba(5, 7, 12, 0.88);
}
.stage-done[hidden] { display: none; }
.done-card {
  width: 100%; max-width: 30rem; max-height: 100%;
  display: flex; flex-direction: column; min-height: 0;
  padding: 1.1rem 1rem 0.9rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 18px;
  text-align: center;
}
.done-card h2 { margin: 0; font-size: 1.25rem; }
.done-card .meta { margin: 0.4rem 0 0; }
.done-card .grid:not([hidden]) {
  flex: 0 1 auto; min-height: 4.5rem; overflow-y: auto; overscroll-behavior: contain;
  margin: 0.9rem 0 0; padding: 2px;
}
.choose { flex: none; display: flex; gap: 0.6rem; width: 100%; margin: 0.9rem auto 0; max-width: 26rem; }
.choose .btn { flex: 1; min-width: 0; min-height: 50px; padding-left: 0.6rem; padding-right: 0.6rem; font-size: 0.95rem; letter-spacing: 0.04em; }
.choose .btn[hidden] { display: none; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 0.5rem;
}
.grid[hidden] { display: none; }

/* A small tower: eight columns of crates, square, with the game's bevel. */
.tower {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 1px;
  padding: 0.4rem;
  border-radius: 8px;
}
.tower i {
  display: block;
  aspect-ratio: 1;
  border-radius: 1px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.tower i.gap { visibility: hidden; }

/* An answered palette, marked with the answer; tapping it changes its mind. */
.pick {
  position: relative;
  padding: 0;
  border: 2px solid #2f8a55;
  border-radius: 10px;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}
.pick .badge {
  position: absolute;
  inset: auto 0.3rem 0.3rem;
  font: 700 0.72rem/1.3 system-ui, sans-serif;
  padding: 0.1rem 0.2rem;
  border-radius: 5px;
  background: #2f8a55;
  color: #fff;
}
.pick.no { border-color: #b3274a; }
.pick.no .tower { opacity: 0.6; }
.pick.no .badge { background: #b3274a; }

/* The palette cleanser: plain mid-grey, on only when asked for. */
.cleanser {
  position: absolute; inset: 0; z-index: 6;
  display: grid; place-items: center;
  background: #808080;
  color: #5c5c5c;
  font: 600 1rem var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
}
.cleanser[hidden] { display: none; }
.cleanser.out { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .cleanser { transition: none; } }

/* ---- making one: its colours, then what changes the chosen one, under the game. */
.stage-sheet {
  display: grid;
  gap: 0.35rem;
  max-height: 58vh;
  max-height: 58dvh;
  overflow-y: auto;
  padding: 0.6rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.stage-sheet[hidden] { display: none; }
/* The background, then the crates and the way to add one, wrapping as there come to be more. */
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 0.5rem; }
.chip-cell.field { grid-column: span 2; }
.chip-cell { display: grid; gap: 0.2rem; justify-items: stretch; text-align: center; font-size: 0.76rem; color: var(--ink-dim); min-width: 0; }
.chip-cell span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip {
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  cursor: pointer;
  touch-action: manipulation;
}
.chip[aria-checked="true"] { outline: 3px solid var(--amber); outline-offset: 2px; }
.chip.add {
  background: none;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
  color: var(--ink);
  font: 600 1.5rem/1 var(--display);
}
.chip.add:hover { box-shadow: inset 0 0 0 2px var(--amber); color: var(--amber); }
@media (max-width: 22.5rem) {
  .chips { grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 0.4rem; }
  .chip { height: 40px; }
}
.sheet-row { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.sheet-row .spacer { flex: 1; }
.sheet-hint { margin: 0.1rem 0 0; font-size: 0.88rem; }
.sheet-row button.link { flex: none; min-width: 3.5rem; }
.sheet-body[hidden] { display: none; }
.sheet-body { display: grid; gap: 0.1rem; }
/* The action stays in reach however far the editor has been scrolled on a small phone. */
.sheet-foot {
  display: grid; gap: 0.2rem;
  position: sticky; bottom: calc(-0.7rem - env(safe-area-inset-bottom, 0px));
  padding: 0.35rem 0 calc(0.7rem + env(safe-area-inset-bottom, 0px));
  margin-bottom: calc(-0.7rem - env(safe-area-inset-bottom, 0px));
  background: var(--bg);
}
.sheet-foot .btn { width: 100%; min-height: 52px; }
.sheet-foot .status { margin: 0; min-height: 1.4em; font-size: 0.9rem; text-align: center; }
.editor-row { display: flex; gap: 0.5rem; margin: 0.25rem 0 0.1rem; }
.swatch-picker input {
  display: block; width: 3.4rem; height: 48px; padding: 0;
  border: 1px solid var(--rule); border-radius: 8px; background: none; cursor: pointer;
}
.swatch-picker input::-webkit-color-swatch-wrapper { padding: 3px; }
.swatch-picker input::-webkit-color-swatch { border: 0; border-radius: 5px; }
.swatch-picker input::-moz-color-swatch { border: 0; border-radius: 5px; }
.hex-field { flex: 1 1 6.5rem; min-width: 6.5rem; }
.hex-field input {
  width: 100%;
  font: 1rem ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
  padding: 0 0.75rem;
  height: 48px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg-deep);
  color: var(--ink);
  text-transform: uppercase;
}
.colours .btn.tool { flex: 0 1 auto; min-width: 0; gap: 0.4rem; letter-spacing: 0.03em; text-transform: none; font-size: 0.95rem; padding-left: 0.7rem; padding-right: 0.7rem; }
.btn.tool span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The narrowest phones keep the tools as their icons, named for a screen reader and on hover. */
/* A phone keeps both tools and "Show more" in one row, words and all. */
@media (max-width: 26rem) {
  .sheet-row { gap: 0.4rem; }
  .colours .btn.tool { padding-left: 0.55rem; padding-right: 0.55rem; gap: 0.3rem; font-size: 0.9rem; letter-spacing: 0.01em; }
}
@media (max-width: 22.5rem) { .btn.tool span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } }
.colours .btn.tool[aria-pressed="true"] { border-color: var(--crane); color: var(--amber); }
.btn.tool svg { width: 20px; height: 20px; }

/* Each slider's track is the colours it reaches, so the way to the colour you want is visible. */
.slider { display: grid; grid-template-columns: 5.6rem 1fr; align-items: center; gap: 0.5rem; font-size: 0.9rem; min-height: 44px; }
.slider input { -webkit-appearance: none; appearance: none; width: 100%; height: 36px; margin: 0; background: none; cursor: pointer; }
.slider input::-webkit-slider-runnable-track { height: 14px; border-radius: 7px; background: var(--track); box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.4); }
.slider input::-moz-range-track { height: 14px; border-radius: 7px; background: var(--track); box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.4); }
.slider input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; margin-top: -6px; border-radius: 50%;
  background: var(--thumb, #fff); border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.4);
}
.slider input::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--thumb, #fff); border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.4);
}
.minor { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1rem; margin-top: 0.25rem; }

/* ---- the picture to take colours from. It shares the stage with the game rather than covering
   it, so the game wears each colour as the finger moves: above it on a phone, beside it on a
   wide screen. */
.picker { display: grid; grid-template-rows: minmax(0, 1fr) auto; background: #0e121b; min-height: 0; min-width: 0; }
.picker[hidden] { display: none; }
body.picking .stage-game { display: flex; flex-direction: column; }
body.picking .stage-game > .picker { flex: 1 1 55%; order: -1; }
/* Until there is a picture there is nothing to try on the game: what to do, and what happens to
   the picture, have the whole stage. */
body.picking .stage-game > .picker.empty { flex-basis: 100%; }
body.picking-empty .stage-game > iframe { display: none; }
body.picking .stage-game > iframe { position: relative; inset: auto; flex: 1 1 45%; height: auto; min-height: 0; border-top: 1px solid var(--rule); }
@media (orientation: landscape) {
  body.picking .stage-game { flex-direction: row; }
  body.picking .stage-game > .picker { flex-basis: 50%; }
  body.picking .stage-game > iframe { flex-basis: 50%; width: auto; border-top: 0; border-left: 1px solid var(--rule); }
}
.picker-empty {
  display: grid; align-content: center; justify-items: center; gap: 0.5rem;
  padding: 1rem; text-align: center; min-height: 0; overflow-y: auto;
}
.picker-empty[hidden] { display: none; }
.picker-empty h2 { margin: 0; font-size: 1.15rem; }
.picker-empty .meta { margin: 0; max-width: 24rem; }
.picker-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 0.4rem; }
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.picker-status:empty { display: none; }
.picker-view { position: relative; min-height: 0; overflow: hidden; }
/* **What happens to a picture is said where the picture is chosen and where it is shown**, not only
   in the page's note: before any is chosen, in full; while one is open, as a badge on it. */
.local-note {
  display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start;
  max-width: 26rem; margin: 0.35rem 0 0.15rem; padding: 0.65rem 0.8rem;
  text-align: left; font-size: 0.9rem; line-height: 1.45; color: var(--ink-dim);
  border: 1px solid rgba(47, 138, 85, 0.7); border-radius: 12px; background: rgba(47, 138, 85, 0.14);
}
.local-note svg { width: 22px; height: 22px; color: #8be0ad; margin-top: 0.1rem; }
.local-note p { margin: 0; }
.local-note b { color: var(--ink); }
.local-badge {
  position: absolute; left: 8px; bottom: 8px; z-index: 1; margin: 0;
  display: inline-flex; align-items: center; gap: 0.35rem; max-width: calc(100% - 16px);
  padding: 0.2rem 0.6rem 0.2rem 0.45rem; border-radius: 999px;
  font: 600 0.8rem var(--display); color: #c8f5da; white-space: nowrap; overflow: hidden;
  background: rgba(8, 10, 16, 0.82); border: 1px solid rgba(47, 138, 85, 0.8); pointer-events: none;
}
.local-badge svg { width: 15px; height: 15px; flex: none; }
.local-badge span { overflow: hidden; text-overflow: ellipsis; }
.picker-view[hidden] { display: none; }
.picker-view canvas#picker-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; }
.loupe {
  position: absolute; left: 0; top: 0;
  width: 120px; height: 120px;
  border-radius: 50%;
  border: 4px solid var(--picked, #fff);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  image-rendering: pixelated;
}
.loupe[hidden] { display: none; }
.picker-bar {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 0.5rem; border-top: 1px solid var(--rule); background: var(--bg);
}
/* What the next tap does, over the top of the picture, out of the finger's way. */
.picker-hint {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 1;
  max-width: calc(100% - 16px); margin: 0; padding: 0.2rem 0.7rem; border-radius: 999px;
  font: 600 0.88rem var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--ink); background: rgba(8, 10, 16, 0.78); pointer-events: none;
}
.picker-buttons { display: flex; align-items: center; gap: 0 0.3rem; }
@media (max-width: 22.5rem) { .picker-buttons button.link { font-size: 0.86rem; padding-left: 0.25rem; padding-right: 0.25rem; } }
.picker-buttons #picker-close { font-weight: 700; }

/* A wide screen gives the maker's sheet a column of its own beside the game. */
@media (min-width: 56rem) and (min-aspect-ratio: 5/4) {
  body[data-mode="make"] .app-body { grid-template-columns: minmax(0, 1fr) 24rem; grid-template-rows: minmax(0, 1fr); }
  body[data-mode="make"] .stage-sheet {
    grid-column: 2; grid-row: 1; max-height: none; align-content: start;
    border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 1rem;
  }
  body[data-mode="make"] .sheet-foot { bottom: 0; margin-bottom: 0; padding-bottom: 0.7rem; }
  /* There the picture and the game side by side would both be narrow: the picture goes over
     the top of the stage instead, and the game below it keeps the stage's full width. */
  body.picking .stage-game { flex-direction: column; }
  body.picking .stage-game > .picker { flex-basis: 55%; }
  body.picking .stage-game > iframe { flex-basis: 45%; width: 100%; border-left: 0; border-top: 1px solid var(--rule); }
}

/* ---- what the page is: a sheet over everything, on a first visit and from the ? */
.about {
  width: min(34rem, calc(100% - 1.5rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}
.about::backdrop { background: rgba(3, 4, 8, 0.72); }
.about-body { padding: 1.25rem 1.25rem 1rem; }
.about h2 { font-size: 1.35rem; margin: 0 0 0.6rem; }
.about h2:focus { outline: none; }
.about h3 { font-size: 1rem; margin: 1rem 0 0.25rem; }
.about .saves { margin: 0.9rem 0 0; }
.about .saves summary { font: 600 1rem var(--display); cursor: pointer; min-height: 32px; display: flex; align-items: center; gap: 0.4rem; }
.about .saves summary::after { content: "+"; color: var(--amber); }
.about .saves[open] summary::after { content: "−"; }
.about .saves p { margin: 0.3rem 0 0; }
.about p { margin: 0 0 0.6rem; }
.about-list { margin: 0 0 0.6rem; padding-left: 1.1rem; }
.about-list li { margin-bottom: 0.35rem; }
.about kbd {
  font: 600 0.8rem ui-monospace, monospace; padding: 0.05rem 0.35rem; border-radius: 5px;
  border: 1px solid var(--rule); background: var(--bg-deep);
}
@media (hover: none) { .about .keys { display: none; } }
.about-links { margin-top: 0.8rem; }
.about form { margin: 0.6rem 0 0; }
.about form .btn { width: 100%; }

/* A short screen gives the bar across the top less height, so the game keeps more. */
@media (max-height: 40rem) {
  .colours .topbar .wrap { min-height: 52px; }
  .app-bar { padding-top: 0.25rem; padding-bottom: 0.3rem; }
  .tab { min-height: 40px; padding-top: 0.15rem; padding-bottom: 0.15rem; gap: 0; }
}