/* The Dragon's Audit. Builds on /assets/site.css for fonts, colours, .wrap, .top, .brand, .btn, .label, .eyebrow, .meta */

body.game { min-height: 100vh; }

.game .top {
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 22px 0;
}

.game .top nav { gap: 22px; }

/* The brand and each link stay on one line, so the header is one row on a phone */
.game .top .brand,
.game .top nav > * { white-space: nowrap; }

.linkbtn {
  padding: 6px 0;
  border: 0;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background-size .25s ease;
}

.linkbtn:hover { background-size: 100% 1.5px; }

[hidden] { display: none !important; }

button { font-family: inherit; }

button.btn {
  border: 0;
  cursor: pointer;
}

.btn-light {
  background: var(--paper);
  color: var(--ink);
}

.btn-light:hover {
  background: var(--hot);
  color: var(--ink);
}

.btn-ghost {
  background: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 1.5px currentColor;
}

.btn-ghost:hover {
  background: var(--ink);
  color: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

.on-blue .btn-ghost:hover {
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--paper);
}

/* panes: the retro window look, in flow */

.pane {
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: 8px 8px 0 rgba(20, 20, 19, .14);
}

.on-blue .pane { box-shadow: 8px 8px 0 rgba(6, 10, 60, .42); }

.pane-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 30px;
  padding: 0 10px;
  background: var(--ink);
  color: var(--paper);
  font: 400 11px/1 var(--pixel);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pane-bar i {
  width: 10px;
  height: 10px;
  border: 2px solid var(--paper);
}

.pane-bar em {
  margin-left: auto;
  font-style: normal;
  color: var(--sky);
}

/* title screen */

.marquee {
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: end;
  min-height: min(640px, 74vh);
  margin-top: 8px;
  padding: clamp(28px, 5vw, 72px);
  border-radius: 28px;
  background:
    radial-gradient(rgba(240, 238, 233, .2) 1px, transparent 1.3px) 0 0 / 10px 10px,
    var(--blue);
  color: var(--paper);
}

.marquee .orb-a {
  width: 46%;
  left: auto;
  right: -8%;
  bottom: -30%;
}

.marquee .orb-b {
  width: 20%;
  right: 30%;
  top: -14%;
}

.marquee-art {
  position: absolute;
  right: clamp(24px, 7vw, 110px);
  top: 50%;
  width: min(36%, 420px);
  transform: translateY(-54%);
  fill: var(--paper);
}

.marquee-art .hot { fill: var(--hot); }
.marquee-art .sky { fill: var(--sky); }
.marquee-art .ink { fill: var(--ink); }

.marquee-copy {
  position: relative;
  max-width: 640px;
}

.marquee .label { color: var(--sky); }

.marquee h1 {
  margin: 18px 0 0;
  font: 700 clamp(52px, 8.4vw, 124px)/.92 var(--display);
  letter-spacing: -.038em;
}

.marquee h1 .px {
  display: block;
  margin-top: .08em;
  font: 400 .8em/1 var(--pixel);
  letter-spacing: -.07em;
}

.marquee h1 .px b {
  display: inline-block;
  width: .46em;
  height: .7em;
  margin-left: .16em;
  background: var(--hot);
  animation: blink 1.1s steps(1) 3;
}

.marquee .lede {
  margin: 26px 0 32px;
  max-width: 22em;
  font-size: 22px;
  color: var(--paper);
}

.marquee-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* A run to pick up: the last three notes of its working papers under the buttons, oldest first, one line each */
.recap { margin-top: 28px; }

.recap ol {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.recap li {
  display: flex;
  gap: 10px;
  font: 500 16px/1.4 var(--display);
  color: var(--paper);
}

.recap li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: calc((1.4em - 6px) / 2);
  background: var(--hot);
}

.marquee-notes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 32px;
  margin: 40px 0 96px;
}

.marquee-notes div {
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

.marquee-notes dt { margin-bottom: 10px; }

.marquee-notes dd {
  margin: 0;
  font: 550 19px/1.25 var(--display);
  letter-spacing: -.015em;
}

.marquee h1[data-l="zh"] {
  font-size: clamp(60px, 9.4vw, 136px);
  letter-spacing: .02em;
}

.marquee h1[data-l="zh"] b {
  display: inline-block;
  width: .3em;
  height: .82em;
  margin-left: .14em;
  background: var(--hot);
  vertical-align: -.06em;
  animation: blink 1.1s steps(1) 3;
}

/* play screen */

.play {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  gap: clamp(32px, 6vw, 96px);
  padding: clamp(20px, 3vw, 44px) 0 120px;
}

.story { max-width: 700px; }

.scene-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Beside the icon: the eyebrow, and under it the resume line when a run is picked up again */
.scene-words {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 6px;
}

.scene-art {
  flex: none;
  width: 48px;
  height: 48px;
  background: var(--blue);
  image-rendering: pixelated;
}

.story:focus,
.ending h1:focus { outline: none; }

.story h1 {
  margin: 22px 0 0;
  font: 700 clamp(36px, 4.6vw, 60px)/1 var(--display);
  letter-spacing: -.04em;
}

.prose {
  margin-top: 26px;
  font-size: 21px;
  line-height: 1.58;
}

.prose p { margin: 0 0 1.05em; }

/* A run of short lines, such as the exhibits laid out in the file at a3_accuse, is one tight list: ui.js marks
   each line, the gap inside the run is small and the paragraph after it keeps the full gap */
.prose p.line { margin-bottom: .3em; }

.prose p.line + p:not(.line) { margin-top: 1.05em; }

.prose p:last-child { margin-bottom: 0; }

.story.enter .resume,
.story.enter .prose p,
.story.enter h1,
.story.enter .choices li,
.story.enter .rollcard {
  animation: rise .5s cubic-bezier(.2, .7, .2, 1) both;
}

.story.enter .prose p:nth-child(2) { animation-delay: .06s; }
.story.enter .prose p:nth-child(3) { animation-delay: .12s; }
.story.enter .prose p:nth-child(n + 4) { animation-delay: .18s; }
.story.enter .choices li { animation-delay: .26s; }
.story.enter .choices li:nth-child(2) { animation-delay: .31s; }
.story.enter .choices li:nth-child(3) { animation-delay: .36s; }
.story.enter .choices li:nth-child(n + 4) { animation-delay: .41s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* A check's outcome waits for its dice (ui.js presentRoll): the words and the choices keep the space they will
   take, unseen and still, and rise in the moment the dice lie still. Unseen, a choice cannot be pressed. */
.story.held h1,
.story.held .prose,
.story.held .choices,
.story.held .keys-note { visibility: hidden; }

.story.held h1,
.story.held .prose p,
.story.held .choices li { animation: none; }

/* What the job wants next in the act on screen, at every node: one line of the paperwork under the eyebrow, as the
   form chip is in game 02, never over the text. It stays put while the node changes. */
.objective {
  display: flex;
  gap: 8px;
  margin: 0;
  font: 400 11px/1.45 var(--pixel);
  letter-spacing: .02em;
  text-wrap: balance; /* two even lines on a phone, never a word or two left on the second */
  color: var(--ink);
}

.objective::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: calc((1.45em - 6px) / 2);
  background: var(--hot);
}

/* Where a resumed run stands and what the job still needs, until the next move */
.resume {
  margin: 0;
  font: 500 14px/1.35 var(--display);
  color: var(--ink);
}

/* choices */

.choices {
  display: grid;
  gap: 10px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.choice {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 14px;
  width: 100%;
  padding: 17px 20px 17px 16px;
  border: 0;
  border-radius: 16px;
  background: var(--paper-2);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}

/* hover only where a real pointer hovers: a touch browser keeps :hover at the last tap, so the next
   screen's first choice would come up black before anyone chose it (Mike, 30 Sep 2026) */

/* and not before the mouse moves: ui.js puts .no-hover on #choices each time it draws them and takes it off at
   the first pointermove, so the choice that comes up under a resting mouse is not lit before anyone points at it.
   :where() keeps the specificity these rules had. */

@media (hover: hover) and (pointer: fine) {
  :where(.choices:not(.no-hover)) .choice:hover:not(:disabled) {
    background: var(--ink);
    color: var(--paper);
    transform: translateX(4px);
  }

  :where(.choices:not(.no-hover)) .choice:hover:not(:disabled) .tag {
    border-color: rgba(240, 238, 233, .34);
    color: var(--paper);
  }

  :where(.choices:not(.no-hover)) .choice:hover:not(:disabled) .choice-key {
    background: var(--hot);
    color: var(--ink);
  }
}

/* a tap still answers */

.choice:active:not(:disabled) {
  background: var(--ink);
  color: var(--paper);
}

.choice:active:not(:disabled) .choice-key {
  background: var(--hot);
  color: var(--ink);
}

.choice-key {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: var(--ink);
  color: var(--paper);
  font: 400 11px/1 var(--pixel);
}

.choice-label {
  font: 550 18px/1.25 var(--display);
  letter-spacing: -.012em;
}

.choice-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.tag {
  padding: 6px 9px;
  border: 1px solid var(--ink-3);
  font: 400 11px/1 var(--pixel);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-2);
}

.tag-check {
  border-color: var(--blue);
  color: var(--blue);
}

.choice:disabled {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--ink-3);
  cursor: not-allowed;
}

.choice:disabled .choice-key {
  background: var(--paper-3);
  color: var(--ink-3);
}

.choice:disabled .tag {
  border-color: var(--rule);
  color: var(--ink-3);
}

.choice-hint {
  grid-column: 2 / -1;
  font: 400 11px/1.3 var(--pixel);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.keys-note {
  margin: 18px 0 0;
  font: 400 11px/1.4 var(--pixel);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* dice roll card */

.rollcard {
  max-width: 460px;
  margin: 26px 0 8px;
}

.rollcard[data-pass="true"] .pane-bar em { color: #8ff0b0; }
.rollcard[data-pass="false"] .pane-bar em { color: var(--hot); }

.roll-body {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px;
}

/* The dice are pixel art in 32 by 32 frames, drawn at their own size so every pixel stays square. A frame leaves
   4px of air round the die, which the margins take back. art/dice/faces.png holds the faces 1 to 6 and
   tumble.png the die turning, left to right. The box keeps its size, so nothing moves while the dice roll. */
.dice {
  display: flex;
  flex: none;
  height: 32px;
  margin: 0 -4px;
}

.die {
  width: 32px;
  height: 32px;
  background: url(./art/dice/faces.png) 0 0 / 192px 32px no-repeat;
  image-rendering: pixelated;
}

.die[data-face="2"] { background-position: -32px 0; }
.die[data-face="3"] { background-position: -64px 0; }
.die[data-face="4"] { background-position: -96px 0; }
.die[data-face="5"] { background-position: -128px 0; }
.die[data-face="6"] { background-position: -160px 0; }

/* While a die turns, data-frame says what it shows: t1 to t6 a frame of tumble.png, f1 to f6 a face going past */
.die[data-frame^="t"] { background-image: url(./art/dice/tumble.png); }
.die[data-frame="t1"], .die[data-frame="f1"] { background-position: 0 0; }
.die[data-frame="t2"], .die[data-frame="f2"] { background-position: -32px 0; }
.die[data-frame="t3"], .die[data-frame="f3"] { background-position: -64px 0; }
.die[data-frame="t4"], .die[data-frame="f4"] { background-position: -96px 0; }
.die[data-frame="t5"], .die[data-frame="f5"] { background-position: -128px 0; }
.die[data-frame="t6"], .die[data-frame="f6"] { background-position: -160px 0; }

/* The numbers and the verdict wait for the dice, in the space they will take */
.rollcard.rolling .roll-sum { visibility: hidden; }

/* A turning die hops, the two out of step, and a die landing on its face bounces once */
.rolling .die:not(.landed) { animation: die-hop .2s steps(1, end) infinite; }
.rolling .die + .die:not(.landed) { animation-duration: .26s; }
.die.landed { animation: die-land .16s steps(1, end); }

@keyframes die-hop {
  0%, 100% { transform: none; }
  50% { transform: translateY(-2px); }
}

@keyframes die-land {
  0%, 100% { transform: none; }
  20% { transform: translateY(-2px); }
  40% { transform: translateY(-3px); }
  70% { transform: translateY(-1px); }
}

.roll-sum {
  margin: 0;
  font: 400 11px/1.6 var(--pixel);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.roll-sum strong {
  display: block;
  margin-bottom: 2px;
  font: 700 26px/1 var(--display);
  letter-spacing: -.03em;
  text-transform: none;
  color: var(--ink);
}

/* the audit file */

.file {
  position: sticky;
  top: 24px;
}

.file-body {
  display: grid;
  gap: 20px;
  padding: 18px 16px 20px;
}

.meter { display: grid; gap: 9px; }

.meter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.meter-val {
  font: 400 11px/1 var(--pixel);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Time and evidence are the numbers the run is played against */
.meter-big {
  font: 700 26px/1 var(--display);
  letter-spacing: -.03em;
  text-transform: none;
}

.meter-big .goal {
  font: 400 11px/1 var(--pixel);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.pips {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
}

.pips i {
  height: 12px;
  background: var(--paper-3);
}

.pips i.on { background: var(--hot); }

.pips-time i.on { background: var(--blue); }

.pips-six { grid-template-columns: repeat(6, 1fr); }

.pips-six i.on { background: var(--ink); }

/* The rule of the letter on the meter: the third piece names a culprit, the fourth signs a clean opinion */
.pips-six i:nth-child(3),
.pips-six i:nth-child(4) { position: relative; }

.pips-six i:nth-child(3)::after,
.pips-six i:nth-child(4)::after {
  content: "";
  position: absolute;
  right: 0;
  top: calc(100% + 2px);
  width: 2px;
  height: 6px;
  background: var(--ink);
}

.figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: solid var(--rule);
  border-width: 1px 0;
}

.figures div {
  display: grid;
  gap: 8px;
  padding: 13px 0 12px;
}

.figures div + div {
  padding-left: 12px;
  border-left: 1px solid var(--rule);
}

.figures strong {
  font: 700 26px/1 var(--display);
  letter-spacing: -.03em;
}

.file-body h2 { margin: 0 0 10px; }

.file-body ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 500 15px/1.3 var(--display);
}

.file-body li {
  display: flex;
  gap: 9px;
}

.file-body li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 7px;
  background: var(--ink);
}

.file #evidence li::before { background: var(--hot); }

.file-body li.none {
  font: 400 11px/1.4 var(--pixel);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.file-body li.none::before { display: none; }

.file-body li.fresh,
.meter-val.fresh,
.figures strong.fresh,
.filebar .fresh { animation: flash 1.4s ease both; }

@keyframes flash {
  0%, 40% { background: var(--hot); color: var(--ink); box-shadow: 0 0 0 4px var(--hot); }
  100% { background: transparent; box-shadow: 0 0 0 4px transparent; }
}

/* One line from ui.js at the foot of the screen. Empty, it takes no room. */

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 10;
  width: max-content;
  max-width: calc(100% - 2 * var(--gutter));
  margin: 0;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--paper);
  font: 500 15px/1.35 var(--display);
  box-shadow: 6px 6px 0 rgba(20, 20, 19, .14);
  transform: translateX(-50%);
}

.toast:empty {
  padding: 0;
  box-shadow: none;
}

/* compact bar for small screens */

.filebar { display: none; }

/* ending */

.ending {
  max-width: 760px;
  padding: clamp(20px, 3vw, 44px) 0 120px;
}

.ending h1 {
  margin: 22px 0 0;
  font: 700 clamp(48px, 7vw, 96px)/.94 var(--display);
  letter-spacing: -.045em;
}

.opinion {
  position: relative;
  margin: 40px 0 0;
}

.opinion p {
  margin: 0;
  padding: 22px 150px 24px 20px;
  font-size: 20px;
  line-height: 1.45;
}

.stamp {
  position: absolute;
  right: 20px;
  bottom: 18px;
  padding: 9px 12px 8px;
  border: 3px solid var(--hot);
  font: 400 11px/1 var(--pixel);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hot);
  transform: rotate(-7deg);
}

.stamp[data-rank="best"] { border-color: var(--blue); color: var(--blue); }
.stamp[data-rank="secret"] { border-color: var(--ink); color: var(--ink); }

.ending .meta { margin-top: 36px; }

.ending-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* menu dialog */

dialog.sheet {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 10px 10px 0 rgba(20, 20, 19, .3);
}

dialog.sheet::backdrop { background: rgba(20, 20, 19, .5); }

.sheet-body {
  display: grid;
  gap: 26px;
  padding: 24px 22px 26px;
  overflow: auto;
}

.sheet-body h2 {
  margin: 0 0 10px;
  font: 650 26px/1.1 var(--display);
  letter-spacing: -.03em;
}

.sheet-body p {
  margin: 0 0 .7em;
  font-size: 18px;
  line-height: 1.45;
}

.sheet-body ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.sheet-body ol li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  font: 500 16px/1.2 var(--display);
}

.sheet-body ol li.unfound { color: var(--ink-3); }

/* The ways out, after the endings in the menu, folded under their heading and their count */
.ways-out summary { cursor: pointer; }

.ways-out summary h2 { display: inline; }

.ways-out summary .label { margin-left: 12px; }

.ways-out ol { margin-top: 12px; }

/* a stage heading in the list of ways out: the stage and how many of its ways are left, in the label face */
.ways-out ol li.stage {
  padding: 14px 0 8px;
  color: var(--ink-2);
  font: 400 11px/1.2 var(--pixel);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* The escape sheet: the warning of the stage, then the count of the ways out in the pixel face */
.escape-footer {
  font: 400 11px/1.5 var(--pixel);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.sheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pane-bar button {
  margin-left: auto;
  padding: 4px 0 4px 12px;
  border: 0;
  background: none;
  color: var(--paper);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.pane-bar button:hover { color: var(--hot); }


/* short screens, 900px tall or less, such as a 1366 by 768, a 1280 by 800 or a 1440 by 900 laptop: little room over
   the story, the gap before the title a phone's and the gaps before the text and the choices a phone's, so the first
   choice is on screen after a move and after Continue with the resume line on (UX review of 30 Sep 2026; QA, 1 Oct
   2026: four nodes cut by up to 20px at 1366 by 768 after Continue). A phone keeps its own, below. */
@media (max-height: 900px) {
  .play { padding-top: 4px; }

  .story h1 { margin-top: 16px; }

  .prose { margin-top: 20px; }

  .choices { margin-top: 28px; }
}

/* the narrowest phones, under 344px wide: the objective without its square and its spacing, two rows at most
   (QA, 1 Oct 2026: three rows at 320 in English, Acts 2 and 3) */
@media (max-width: 343px) {
  .objective { letter-spacing: 0; }

  .objective::before { display: none; }
}

/* medium screens */

@media (max-width: 1020px) {
  .play {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 12px;
  }

  .file { display: none; }

  dialog.sheet .file-body { padding: 20px 18px 24px; }

  .filebar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 calc(-1 * var(--gutter)) 18px;
    padding: 10px var(--gutter);
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
    font: 400 11px/1 var(--pixel);
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .filebar span { white-space: nowrap; }

  .filebar b {
    font-weight: 400;
    color: var(--ink-2);
  }

  .filebar .narrow { display: none; }

  .filebar button {
    margin-left: auto;
    padding: 8px 11px;
    border: 0;
    background: var(--ink);
    color: var(--paper);
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
  }

  .marquee-art { opacity: .9; }

  .marquee-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
}

@media (max-width: 680px) {
  .marquee {
    min-height: 560px;
    border-radius: 22px;
  }

  .marquee-art {
    top: 24px;
    right: 20px;
    width: 46%;
    transform: none;
  }

  /* the words start under the eye, which is 46% of the panel wide and 26/44 of that tall from 24px down: with the
     recap under the buttons the copy is taller than the panel, and without this it rose under the eye (QA, 1 Oct
     2026, 360 to 412 wide). A short copy still sits at the foot of the panel. */
  .marquee-copy { margin-top: calc(27.2% + 20px); }

  .marquee .lede { font-size: 20px; }

  .marquee-notes { margin-bottom: 72px; }

  .prose { font-size: 19.5px; }

  .choice {
    grid-template-columns: 26px minmax(0, 1fr);
    padding: 15px 16px 15px 14px;
  }

  .choice-tags {
    grid-column: 2;
    justify-content: flex-start;
  }

  .choice:hover:not(:disabled) { transform: none; }

  .keys-note { display: none; }

  .opinion p { padding: 20px 18px 64px; }

  .filebar { gap: 11px; }
}

@media (max-width: 400px) {
  .marquee-notes { grid-template-columns: minmax(0, 1fr); }

  .game .top { column-gap: 12px; }

  .game .top nav { gap: 12px; }

  .game .brand { gap: 8px; }

  .story h1 {
    margin-top: 16px;
    font-size: 28px;
  }

  .scene-art {
    width: 40px;
    height: 40px;
  }

  .prose { margin-top: 20px; }

  /* Two lines at most beside the icon, for the longest a run can show */
  .resume { font-size: 13px; }

  .choices { margin-top: 28px; }

  /* Short labels keep all four figures on the bar; the time needs none, it says days */
  .filebar .wide { display: none; }
  .filebar .narrow { display: inline; }
}

/* phones under 480px wide: the page header and the gaps before the title, the text and the choices are tighter, and
   the scene icon steps aside, so the first choice is on screen after Continue with the objective and the resume line
   over the story, and the objective has the width for two rows (QA, 1 Oct 2026: with the icon, 226 of 231 nodes at
   360 by 780 in English, without it 230) */
@media (max-width: 479px) {
  .game .top { padding: 12px 0; }

  .story h1 { margin-top: 10px; }

  .prose { margin-top: 14px; }

  .choices { margin-top: 20px; }

  .scene-art { display: none; }
}

/* The escape button is a pill, as the language button is, so it reads as something to press and not as a link (UX/UI
   Team, 1 Oct 2026); 44px tall on a phone, where the site's phone rule gives the other header buttons the same */
.game .top #escape-run {
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--paper-2);
  font: 500 14px/1 var(--display);
  transition: background-color .2s ease, color .2s ease;
}

@media (max-width: 479px) {
  .game .top #escape-run {
    min-height: 44px;
    padding: 0 7px;
    font-size: 13px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .game .top #escape-run:hover {
    background: var(--ink);
    color: var(--paper);
  }
}

/* the Close of a sheet is a 44px hit area on a phone, the bar keeping its height (UX/UI Team, 1 Oct 2026) */
@media (max-width: 479px) {
  .pane-bar button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 44px;
    min-height: 44px;
    margin-block: -14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story.enter .resume,
  .story.enter .prose p,
  .story.enter h1,
  .story.enter .choices li,
  .story.enter .rollcard,
  .file-body li.fresh,
  .meter-val.fresh,
  .figures strong.fresh,
  .filebar .fresh,
  .marquee h1 .px b,
  .marquee h1[data-l="zh"] b,
  .rolling .die:not(.landed),
  .die.landed { animation: none; }

  .choice, .linkbtn { transition: none; }
}

/* Chinese */

html[data-lang="zh"] .prose {
  font-size: 19.5px;
  line-height: 1.85;
  letter-spacing: .02em;
}

html[data-lang="zh"] .story h1,
html[data-lang="zh"] .ending h1 { letter-spacing: .01em; }

html[data-lang="zh"] .choice-label {
  font-weight: 500;
  letter-spacing: .02em;
}

html[data-lang="zh"] .opinion p { line-height: 1.7; }

html[data-lang="zh"] .file ul,
html[data-lang="zh"] .sheet-body p { letter-spacing: .02em; }

html[data-lang="zh"] .sheet-body p { line-height: 1.7; }

/* The 11px pixel labels, at the 12.5px site.css gives its own Chinese labels */
html[data-lang="zh"] .tag,
html[data-lang="zh"] .choice-hint,
html[data-lang="zh"] .keys-note,
html[data-lang="zh"] .meter-val,
html[data-lang="zh"] .file-body li.none,
html[data-lang="zh"] .roll-sum,
html[data-lang="zh"] .pane-bar,
html[data-lang="zh"] .filebar,
html[data-lang="zh"] .escape-footer,
html[data-lang="zh"] .objective,
html[data-lang="zh"] .stamp,
html[data-lang="zh"] .meter-big .goal { font-size: 12.5px; }

html[data-lang="zh"] .meter-big {
  font-size: 24px;
  letter-spacing: 0;
}

html[data-lang="zh"] .toast { letter-spacing: .02em; }

html[data-lang="zh"] .resume {
  font-size: 14px;
  letter-spacing: .02em;
}

/* The objective in Chinese breaks only after a comma or a full stop, so 簽意見書 stays whole on a phone; the number
   keeps its 件 by a no-break space in ui.js */
html[data-lang="zh"] .objective {
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: wrap;
}