/* Please Remain Seated.
   The palette is the cabin's: airline blue-grey, the seat fabric, the emergency yellow on the
   door handles, and the one orange that only ever means fire. Nothing here is decorative; the
   colours are load-bearing, because the player is reading a card of things under time pressure
   and has to be able to tell good from bad at a glance. */

:root {
  --bg:        #16191f;
  --panel:     #1e222a;
  --panel-2:   #252a33;
  --line:      #333a46;
  --ink:       #dfe4ec;
  --ink-dim:   #9aa3b2;
  --ink-faint: #6c7583;
  --blue:      #4a7fb8;
  --seat:      #3f5177;
  --good:      #5fd67a;
  --great:     #8ae8a0;
  --warn:      #e8c53a;
  --fire:      #ff7a10;
  --bad:       #d4483a;
  --gold:      #ffd54a;
  /* The boarding pass is printed on something, and it is the only pale surface in the game. */
  --paper:      #e9e2d4;
  --paper-ink:  #1c1e24;
  --paper-body: #3d4149;
  --paper-dim:  #7b7466;
  --paper-line: #b9b0a0;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

img.spr { image-rendering: pixelated; display: block; }
canvas { image-rendering: pixelated; }

button {
  font: inherit; color: inherit; cursor: pointer;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 8px 14px;
  transition: background .08s, border-color .08s;
}
button:hover { background: #2e3540; border-color: #4a5361; }
button:active { transform: translateY(1px); }

/* ------------------------------------------------------------------ title and prose screens */

.screen { min-height: 100vh; }

.title {
  display: grid; place-items: center; padding: 40px 20px;
  position: relative; overflow: hidden;
}
.title-inner { max-width: 760px; text-align: center; position: relative; z-index: 1; }

/* ------------------------------------------------------------- the cabin behind the title */

/* A real flight, drawn by the real renderer, with a bot flying it slowly. Everything here is in
   service of the words staying readable over it: it is dimmed, it is vignetted towards the
   middle where the title sits, and it fades into the background colour at the top and bottom so
   that the aeroplane has no edges. Nothing in it is clickable - the whole layer is inert. */
.backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* The renderer draws a strip above the aeroplane where the state of the cabin is written -
   HELPING, PANIC, the meters - which is for a player and not for a menu, so it is clipped off
   the top. 1.5 tiles of a 10.5-tile canvas is 14.29% of it, and the 57.14% below is the
   aeroplane: centring that rather than the whole canvas is what the second translate is for. */
.backdrop-cabin {
  position: absolute; left: -21%; width: 142%; height: auto; top: 50%;
  transform: translateY(-57.14%);
  clip-path: inset(14.29% 0 0 0);
  image-rendering: pixelated;
  opacity: .85;
  /* The aeroplane has to stop somewhere and a straight line across the screen is not it, so it
     is faded out at its own top and bottom rather than at the window's. The mask is on the
     canvas because only the canvas knows where the aeroplane actually ends. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 14%, #000 34%,
                                      #000 76%, transparent 99%);
          mask-image: linear-gradient(to bottom, transparent 14%, #000 34%,
                                      #000 76%, transparent 99%);
}
.backdrop::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 46% 40% at 50% 44%,
                    rgba(22, 25, 31, .97) 20%, rgba(22, 25, 31, .78) 62%,
                    rgba(22, 25, 31, .10) 100%),
    linear-gradient(rgba(22, 25, 31, .55), rgba(22, 25, 31, 0) 24%,
                    rgba(22, 25, 31, 0) 74%, rgba(22, 25, 31, .55));
}
.kicker {
  font: 11px/1 var(--mono); letter-spacing: .22em; color: var(--ink-faint);
  margin-bottom: 22px;
}
.title h1 {
  font: 700 clamp(34px, 8vw, 76px)/0.95 var(--sans);
  letter-spacing: -0.03em; margin: 0 0 18px;
  text-transform: uppercase;
}
.title .tag { color: var(--ink-dim); font-size: 16px; max-width: 56ch; margin: 0 auto 30px; }
.title-facts { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
.fact { text-align: center; }
.fact b { display: block; font: 700 26px/1 var(--mono); color: var(--gold); }
.fact-fire b { color: var(--fire); }
.fact i { font-style: normal; font-size: 11px; color: var(--ink-faint); letter-spacing: .06em; }
.title-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 24px 0; }
.title-buttons.sticky {
  position: sticky; bottom: 0; background: linear-gradient(transparent, var(--bg) 40%);
  padding: 20px 0 10px; margin: 0;
}
button.big {
  background: var(--seat); border-color: #5a6b95; font-weight: 600; padding: 11px 22px;
}
button.big:hover { background: #4b6191; }
.footnote { color: var(--ink-faint); font-size: 12px; margin-top: 20px; }

.prose { padding: 40px 20px; }
.prose-inner { max-width: 720px; margin: 0 auto; }
.prose h2 { font-size: 30px; margin: 0 0 24px; letter-spacing: -0.02em; }
.prose p { color: var(--ink-dim); margin: 0 0 16px; }
.prose p b { color: var(--ink); }

/* ------------------------------------------------------------------------------ the game */

.play { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

.hud {
  display: grid; grid-template-columns: 190px 1fr; gap: 16px;
  padding: 10px 14px; background: var(--panel); border-bottom: 1px solid var(--line);
}
@media (max-width: 1100px) { .hud { grid-template-columns: 140px 1fr; } .hud-you { display: none; } }
.clock-label { font: 9px var(--mono); letter-spacing: .18em; color: var(--ink-faint); }
.clock { font: 700 40px/1 var(--mono); letter-spacing: -0.02em; }
.clock.warn { color: var(--warn); }
.clock.urgent { color: var(--fire); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .55; } }

.meter-label { display: flex; justify-content: space-between; font: 9px var(--mono); color: var(--ink-faint); letter-spacing: .08em; }
.meter-label b { color: var(--ink-dim); font-weight: 400; }
.meter-track { height: 3px; background: #2c323c; border-radius: 2px; overflow: hidden; margin-top: 2px; }
.meter-fill { height: 100%; background: var(--blue); transition: width .2s; }
.m-good .meter-fill { background: var(--good); }
.m-cred .meter-fill { background: var(--gold); }
/* Same track, different bar: over the end of the scale it keeps its width and takes the light. */
.meter.over .meter-fill { background: linear-gradient(90deg, var(--gold) 55%, var(--warn) 100%);
                          box-shadow: 0 0 5px var(--warn); }
.meter.over .meter-label b { color: var(--warn); }
.m-lungs .meter-fill { background: #5ac8d0; }
.m-burn .meter-fill { background: var(--bad); }
.carrying .tag { font: 9px var(--mono); color: var(--ink-faint); letter-spacing: .1em; }

.hud-you { border-left: 1px solid var(--line); padding-left: 14px; }
.you-name { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.you-name b { display: block; font-size: 13px; }
.you-name i { font-style: normal; font-size: 10px; color: var(--ink-faint); }
.carrying { font-size: 11px; margin-top: 4px; display: flex; gap: 6px; }
.carrying b { color: var(--good); font-weight: 500; }
.kit { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 6px; }
.kit-item { border: 1px solid var(--line); border-radius: 2px; background: #1a1d23; }

/* Two areas, one column: the aeroplane, and the log under it. There is no list any more - the
   aeroplane is the menu - so the picture gets the whole width, which makes every seat a bigger
   thing to click. */
.board {
  display: grid; flex: 1; min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "view" "log";
}
.col-left  { grid-area: view; }
.logwrap   { grid-area: log; min-height: 0; padding: 0 10px 10px; display: flex; }
@media (max-width: 1000px) {
  .play { height: auto; min-height: 100vh; overflow: auto; }
  .logwrap { max-height: 40vh; }
}

.col-left { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 10px; gap: 8px; }
.canvas-wrap { background: #12151a; border: 1px solid var(--line); border-radius: 4px; padding: 6px; }
.cabin { display: block; width: 100%; height: auto; }

.here { font-size: 12px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.here-place { color: var(--ink-dim); }
.here-hint { color: var(--ink-faint); }
.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 2px 5px; font-size: 11px; }
.chip i { font-style: normal; color: var(--ink-faint); font-size: 10px; }

.log { flex: 1; min-height: 110px; overflow-y: auto; background: #12151a; border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; font-size: 12.5px; }
.log-line { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 3px 0; border-bottom: 1px solid #1c2027; }
.log-t { font: 10px var(--mono); color: var(--ink-faint); padding-top: 2px; }
.log-x { color: var(--ink-dim); white-space: pre-wrap; }
.log-good .log-x { color: var(--good); }
.log-great .log-x { color: var(--great); font-weight: 500; }
.log-bad .log-x { color: #e5897c; }
.log-crew .log-x { color: var(--warn); }
.log-pa .log-x { color: #7fb8e8; font-style: italic; }
.log-medal .log-x { color: var(--gold); }
.log-open .log-x { color: var(--ink); }
.log-rule .log-x { color: var(--ink-faint); font-style: italic; }

.act {
  display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: baseline;
  width: 100%; text-align: left; padding: 6px 8px; margin-bottom: 2px;
  background: transparent; border: 1px solid transparent; border-left: 2px solid var(--line);
  border-radius: 0 3px 3px 0;
}
.act:hover { background: var(--panel-2); border-color: var(--line); border-left-color: var(--blue); }
.act-key { font: 9px var(--mono); color: var(--ink-faint); }
.act-body b { font-weight: 500; font-size: 13px; }
.act-body i { display: block; font-style: normal; font-size: 11px; color: var(--ink-faint); margin-top: 1px; }
.act-cost { font: 11px var(--mono); color: var(--ink-dim); white-space: nowrap; }
.act-good { border-left-color: #2f6b3f; }
.act-good:hover { border-left-color: var(--good); }
.act-bad { border-left-color: #7a3129; }
.act-bad:hover { border-left-color: var(--bad); }
.act.over { opacity: .45; }
.act.over .act-cost { color: var(--bad); }
.empty { color: var(--ink-faint); font-size: 12px; padding: 20px 8px; }

/* -------------------------------------------------------------------------- the report */

.report { padding: 40px 20px 60px; }
.report-inner { max-width: 860px; margin: 0 auto; }
.rep-kicker { font: 10px var(--mono); letter-spacing: .18em; color: var(--ink-faint); }
.rep-head h1 { font-size: clamp(26px, 5vw, 44px); margin: 10px 0 26px; letter-spacing: -0.02em; }
.rep-ending p { font-size: 15px; color: var(--ink-dim); margin: 0 0 14px; white-space: pre-wrap; }
.report h3 { font: 10px var(--mono); letter-spacing: .18em; color: var(--ink-faint); margin: 36px 0 12px; text-transform: uppercase; }

.tally { display: flex; gap: 10px; flex-wrap: wrap; }
.tbox { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 12px 18px; min-width: 108px; }
.tbox b { display: block; font: 700 28px/1 var(--mono); }
.tbox i { font-style: normal; font-size: 11px; color: var(--ink-faint); }
.t-unhurt b { color: var(--good); } .t-treated b { color: var(--warn); }
.t-serious b { color: #e08a2a; } .t-lost b { color: var(--bad); }

.grade-A { border-color: var(--great); } .grade-B { border-color: var(--good); }
.grade-C { border-color: var(--warn); } .grade-D { border-color: #e08a2a; }
.grade-E, .grade-F { border-color: var(--bad); }

.rep-map { background: #12151a; border: 1px solid var(--line); border-radius: 4px; padding: 10px; overflow-x: auto; }
.rep-canvas { width: 100%; max-width: 100%; min-width: 480px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.leg { display: inline-flex; gap: 5px; align-items: center; font-size: 11px; color: var(--ink-faint); }
.leg i { width: 9px; height: 9px; border-radius: 2px; display: block; }

/* The manifest, which is a photograph. Sixty-one souls packed the way a crew photograph packs
   them - shoulder behind shoulder, the next rank's heads in the gaps of the one behind - and in
   the order the report cares about, so it reads green to grey from the top left. Nothing under
   them says which is which: the face does that, and so does the tooltip. */
.photo-wrap { position: relative; border: 1px solid var(--line); border-radius: 4px;
  background: #12151a; padding: 14px 10px 8px; }
.photo { display: grid; grid-template-columns: repeat(auto-fill, 30px); grid-auto-rows: 36px;
  justify-content: center; }
.soul { width: 30px; height: 48px; padding: 0; margin: 0; border: 0; background: none;
  position: relative; cursor: pointer; display: block; }
.soul .spr { width: 48px; height: 48px; display: block; margin-left: -9px;
  image-rendering: pixelated; }
/* Every other soul stands a little lower, which is what a row of people does. */
.soul:nth-child(2n) { padding-top: 3px; }
/* The one being pointed at steps out of the rank and in front of the people beside them. */
.soul:hover, .soul:focus-visible { z-index: 3; }
.soul:hover .spr, .soul:focus-visible .spr { transform: translateY(-4px); }
.soul:focus-visible { outline: none; }
.soul.you::before { content: ""; position: absolute; left: 2px; right: 2px; top: 8px; bottom: 4px;
  border: 1px solid #ffd54a; border-radius: 3px; pointer-events: none; }

.soul-tip { position: absolute; z-index: 9; left: 0; top: 0; width: 320px; max-width: calc(100% - 8px);
  display: none; gap: 12px; padding: 10px 12px; background: var(--panel);
  border: 1px solid #4a5361; border-radius: 5px; box-shadow: 0 14px 40px rgba(0,0,0,.75);
  pointer-events: none; }
.soul-tip.on { display: flex; }
.soul-face { width: 48px; height: 48px; flex: none; image-rendering: pixelated; }
.soul-text { min-width: 0; flex: 1; }
.soul-text b { display: block; font-size: 14px; line-height: 1.2; }
.soul-text i { display: flex; flex-wrap: wrap; gap: 2px 10px; font: 10px var(--mono);
  font-style: normal; color: var(--ink-faint); margin: 3px 0 5px; }
.soul-where { display: block; font-size: 12px; color: var(--ink-dim); }
.soul-text u { display: block; text-decoration: none; font-size: 10.5px; color: var(--ink-faint);
  margin-top: 2px; }
.harm { margin-top: 7px; }
.harm-row { display: grid; grid-template-columns: 1fr 26px; grid-template-areas: "label value" "track track";
  gap: 2px 6px; align-items: center; margin-bottom: 4px; font-size: 10.5px; }
.harm-label { grid-area: label; color: var(--ink-faint); }
.harm-row .spend-track { grid-area: track; height: 5px; }
.harm-row b { grid-area: value; font: 10px var(--mono); color: var(--ink-faint); text-align: right; }
.harm-none { margin-top: 7px; font-size: 11px; color: var(--ink-faint); }

/* A telephone holds ten across instead of twenty-six, and the block reflows in reading order, so
   the ones who walked off are still the top row and the ones who did not are still the last. The
   faces come down to thirty-two pixels, which is two whole screen pixels a sprite pixel. */
@media (max-width: 600px) {
  .photo { grid-template-columns: repeat(auto-fill, 21px); grid-auto-rows: 25px; }
  .soul { width: 21px; height: 32px; }
  .soul .spr { width: 32px; height: 32px; margin-left: -6px; }
  .soul:nth-child(2n) { padding-top: 2px; }
  .soul.you::before { top: 5px; bottom: 2px; }
  .soul-tip { width: 280px; }
}

.timeline { max-height: 340px; overflow-y: auto; border: 1px solid var(--line); border-radius: 4px; }
.tl { display: grid; grid-template-columns: 52px 1fr 52px; gap: 8px; padding: 3px 10px; font-size: 12px; border-bottom: 1px solid #22262e; }
.tl-t, .tl-c { font: 10px var(--mono); color: var(--ink-faint); }
.tl-c { text-align: right; }
.tl-x { color: var(--ink-dim); }

.spend-row { display: grid; grid-template-columns: 150px 1fr 56px; gap: 10px; align-items: center; margin-bottom: 5px; font-size: 12px; }
.spend-label { color: var(--ink-dim); }
.spend-track { height: 8px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.spend-fill { height: 100%; }
.spend-row b { font: 11px var(--mono); color: var(--ink-faint); text-align: right; }

.medals { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.medal { background: var(--panel); border: 1px solid var(--line); border-left: 2px solid var(--gold); border-radius: 0 3px 3px 0; padding: 8px 10px; }
.medal b { display: block; font-size: 12px; color: var(--gold); }
.medal i { font-style: normal; font-size: 11px; color: var(--ink-faint); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #12151a; }
::-webkit-scrollbar-thumb { background: #333a46; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #454e5d; }

/* Changing your mind. The button sits under the clock, because the clock is where the seconds
   come back to, and it always says what it would undo and what it gives back, or why it will
   not, because a rule the player cannot see is a rule they will resent. */
.undo-bar { margin-top: 2px; }
.undo {
  display: flex; align-items: baseline; gap: 6px; width: 100%;
  text-align: left; padding: 3px 7px; font-size: 11px;
  background: #1d2229; border: 1px solid var(--line); border-radius: 3px;
}
.undo:hover { background: #262d36; border-color: var(--gold); }
.undo-mark { font-size: 13px; color: var(--gold); }
.undo b { font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.undo-back { font: 10px var(--mono); color: var(--good); white-space: nowrap; }
.undo.off { background: transparent; border-color: transparent; cursor: default; padding-left: 0; }
.undo.off .undo-mark { color: var(--ink-faint); }
.undo.off i { font-style: normal; color: var(--ink-faint); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------- saying what just happened, and what
   would happen next.

   The cabin does most of this on its canvas - the price floating off the tile, the brackets round
   whoever a row would touch. What is left here is the half that lives in the DOM: the clock
   admitting what it just paid, a meter going briefly bright when its number moves, a log line
   arriving rather than appearing, and the panel that tells you who that is. */

.clock-plan { height: 15px; }
.spent {
  display: inline-block; font: 700 13px var(--mono); color: var(--fire);
  animation: spent .95s ease-out forwards;
}
@keyframes spent {
  0%   { opacity: 0; transform: translateY(-6px); }
  18%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(7px); }
}

.meter.up   .meter-fill { animation: meterlit .7s ease-out; }
.meter.down .meter-fill { animation: meterlit .7s ease-out; }
.meter.up   .meter-label b { animation: labellit .7s ease-out; }
.meter.down .meter-label b { animation: labellit .7s ease-out; }
@keyframes meterlit { 0% { filter: brightness(2.6); } 100% { filter: none; } }
@keyframes labellit { 0% { color: #fff; } 100% { color: var(--ink-dim); } }

.log-line.fresh { animation: freshline .5s ease-out; }
@keyframes freshline {
  0%   { opacity: 0; transform: translateX(-6px); background: #232a35; }
  100% { opacity: 1; transform: none; background: transparent; }
}

.chip.lit { border-color: var(--gold); background: #2b2f38; }
.chip { cursor: default; }
.chip img { image-rendering: pixelated; }

/* Who that is. Sixty people at thirty-six pixels each is a crowd. */
.canvas-wrap { position: relative; }
.tip {
  position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none;
  min-width: 190px; max-width: 320px; opacity: 0; transition: opacity .08s;
  background: rgba(22,25,31,0.97); border: 1px solid var(--line); border-radius: 4px;
  padding: 7px 9px; font-size: 12px; box-shadow: 0 6px 22px rgba(0,0,0,.5);
}
.tip.on { opacity: 1; }
.tip-place { color: var(--ink); font-weight: 500; }
.tip-air { color: var(--fire); font-size: 11px; margin-top: 2px; }
.tip-who { display: grid; grid-template-columns: 32px 1fr; gap: 7px; margin-top: 6px;
           padding-top: 6px; border-top: 1px solid #262b34; }
.tip-who b { display: block; font-size: 12.5px; }
.tip-who i { display: block; font-style: normal; font-size: 11px; color: var(--ink-dim); }
.tip-who u { display: block; text-decoration: none; font-size: 10px; color: var(--blue);
             letter-spacing: .04em; margin-top: 2px; }
.tip-who em { display: block; font-style: normal; font-size: 10px; color: var(--good); }
/* Every action makes a noise, so there is a way to stop it, and it remembers. */
.sound {
  margin-top: 4px; padding: 2px 6px; background: transparent; border-color: var(--line);
  font: 9px var(--mono); letter-spacing: .1em; color: var(--ink-faint);
}
.sound:hover { color: var(--ink-dim); }
.sound.off { color: #7a4a44; border-color: #4a3230; }

/* ------------------------------------------------------------- the aeroplane is the menu ---

   The list of forty things used to be the interface. Now the picture is, and there are three
   things on it you can click: a person, the fire, and yourself. A card hangs off whichever one
   you clicked with the handful of things you could do about it. Everything else is floor. */

.play { position: relative; }
.hud { grid-template-columns: 230px 1fr; }
.hud-buttons { display: flex; gap: 4px; margin-top: 4px; }
/* You on the left, the bag on the right, so the bar stays a bar. */
.hud-you { display: grid; grid-template-columns: 180px auto; gap: 4px 14px; align-content: start; }
.hud-you .meter, .hud-you .carrying, .hud-you .you-name { grid-column: 1; }
.hud-you .bagbar { grid-column: 2; grid-row: 1 / span 5; }
@media (max-width: 1100px) {
  .hud { grid-template-columns: 140px 1fr; }
  .hud-you { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--line);
             padding: 8px 0 0; }
}

/* You are also a button. */
button.you-name { background: transparent; border-color: transparent; padding: 2px 6px 2px 2px;
                  margin: -2px 0 4px -2px; text-align: left; }
button.you-name:hover { background: #262d38; border-color: var(--line); }
button.you-name b, button.you-name i { display: block; }
button.carrying { background: transparent; border-color: transparent; padding: 1px 6px 1px 2px;
                  margin-left: -2px; text-align: left; align-items: baseline; }
button.carrying:hover { background: #262d38; border-color: var(--line); }

/* The bag, where it always was, and now something happens when it is clicked. */
.bagbar { margin-top: 0; }
.bag-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.bag-head b { font: 10px var(--mono); letter-spacing: .14em; color: var(--ink-dim); }
.bag-head i { font-style: normal; font: 9px var(--mono); color: var(--ink-faint); }
.bag-items { display: flex; gap: 5px; flex-wrap: wrap; }
.bag-item {
  display: grid; justify-items: center; gap: 1px; width: 70px; padding: 5px 3px 4px;
  background: #1a1d23; border: 1px solid var(--line); border-radius: 4px;
}
.bag-item:hover { border-color: var(--gold); background: #232833; }
.bag-item.on { border-color: var(--gold); background: #2b2f38; box-shadow: 0 0 0 1px var(--gold) inset; }
.bag-item b { font-size: 10px; font-weight: 500; line-height: 1.15; text-align: center; }
.bag-item i { font: 9px var(--mono); font-style: normal; color: var(--ink-faint); min-height: 11px; }
.bag-item.empty img { opacity: .4; }
.bag-item.empty i { color: #b06a5a; }
.bag-item.wet i { color: #5ac8d0; }
.bag-item.worn i { color: var(--good); }
.bag-empty { font-size: 11px; color: var(--ink-faint); max-width: 34ch; }

/* The tabs on a card, for a tile with several things on it. */
button.chip { padding: 2px 5px; font-size: 11px; line-height: normal; }
.chip.opens { cursor: pointer; }
.chip.opens:hover { border-color: var(--gold); background: #2b2f38; }

/* Rows have an icon column: the thing from your bag, or the face it is about. */
.act { grid-template-columns: 12px 16px 1fr auto; gap: 7px; }
.act-icon { width: 16px; height: 16px; display: block; align-self: center; image-rendering: pixelated; }
.act-icon-walk { font: 700 13px var(--mono); color: var(--gold); text-align: center; line-height: 16px; }
.act.then { opacity: .68; }
.act.then:hover, .act.then:focus { opacity: 1; }
.act.then .act-cost::before { content: "then "; font-size: 9px; color: var(--ink-faint); }
.act-walk { border-left-color: var(--gold); }
.act-walk:hover { border-left-color: var(--gold); background: #2a2a22; }

/* The card. */
.card {
  position: absolute; z-index: 20; width: 330px; max-height: min(560px, 74vh);
  display: none; flex-direction: column;
  background: rgba(24,27,34,0.985); border: 1px solid #4a5361; border-radius: 5px;
  box-shadow: 0 10px 34px rgba(0,0,0,.6);
}
.card.on { display: flex; }
.card-head {
  display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: start;
  padding: 9px 8px 9px 10px; border-bottom: 1px solid var(--line);
  background: #20242c; border-radius: 5px 5px 0 0;
}
.card-icon { display: block; image-rendering: pixelated; min-width: 32px; }
.card-head b { display: block; font-size: 13.5px; }
.card-head i { display: block; font-style: normal; font-size: 11px; color: var(--ink-dim); }
.card-head u { display: block; text-decoration: none; font-size: 10.5px; color: var(--blue); margin-top: 2px; }
.card-head em { display: block; font-style: normal; font-size: 10px; color: var(--good); margin-top: 2px; }
.card-close { padding: 0 6px; font-size: 16px; line-height: 1; background: transparent; border-color: transparent; color: var(--ink-faint); }
.card-close:hover { color: var(--ink); background: transparent; }
.card-tabs { display: flex; gap: 4px; padding: 6px 8px 0; flex-wrap: wrap; }
.card-body { overflow-y: auto; padding: 4px 6px 8px; }
.card-sec { padding: 8px 6px 2px; }
.card-sec b { font: 9px var(--mono); letter-spacing: .14em; color: var(--ink-faint); text-transform: uppercase; }
.card-empty { font-size: 12px; color: var(--ink-faint); padding: 8px 8px; }
.card-more { width: 100%; text-align: left; background: transparent; border-color: transparent; padding: 5px 8px; font-size: 11px; color: var(--ink-faint); }
.card-more:hover { color: var(--ink-dim); border-color: var(--line); }

/* What a click would do, at the bottom of the tooltip. */
.tip-hint { margin-top: 6px; padding-top: 5px; border-top: 1px solid #262b34; font-size: 10.5px; color: var(--gold); }

/* Four sentences, once. */
.help-veil { position: absolute; inset: 0; z-index: 40; background: rgba(10,12,16,.74); display: grid; place-items: center; padding: 20px; }
.help { max-width: 560px; background: var(--panel); border: 1px solid #4a5361; border-radius: 6px; padding: 20px 22px 16px; box-shadow: 0 20px 60px rgba(0,0,0,.7); }
.help h3 { margin: 0 0 14px; font-size: 22px; letter-spacing: -0.02em; }
.help-line { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; margin-bottom: 12px; }
.help-icon { display: grid; place-items: center; height: 34px; }
.help-icon img { image-rendering: pixelated; }
.help-clock { font: 700 15px var(--mono); color: var(--fire); }
.help-line b { font-size: 13.5px; display: block; }
.help-line span { font-size: 12.5px; color: var(--ink-dim); }
.help .title-buttons { margin: 14px 0 0; justify-content: flex-start; }

/* ---------------------------------------------------------------------------- the pass */

/* The boarding pass on the title: who the button puts on the aeroplane.

   It is printed rather than panelled - warm paper, dark ink, a tear-off stub with the button in
   it - because it is the one object on this screen a passenger would actually be holding, and
   because against a dimmed cabin the only pale thing on the page is the thing to press. The
   notches are two circles the colour of nothing, punched over the perforation from both edges. */
.pass {
  --stub-w: 168px;
  display: inline-grid; grid-template-columns: minmax(0, 1fr) var(--stub-w);
  text-align: left; margin: 0 0 2px; width: min(720px, 100%);
  background: var(--paper); color: var(--paper-ink);
  border-radius: 5px; position: relative; isolation: isolate;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 2px 0 rgba(255, 255, 255, .12) inset;
}
.pass-main { padding: 16px 18px 12px; min-width: 0; }
.pass-stub {
  display: grid; gap: 8px; align-content: start; justify-items: start;
  padding: 16px 18px 12px; border-left: 2px dashed var(--paper-line);
}
/* Punched out of both edges, exactly on the perforation. */
.pass::before, .pass::after {
  content: ""; position: absolute; right: var(--stub-w); width: 14px; height: 14px;
  background: var(--bg); border-radius: 50%; margin-right: -7px; z-index: 1;
}
.pass::before { top: -7px; }
.pass::after { bottom: -7px; }

/* A printed field: the small label above, what was typed under it below. */
.pass-field i {
  display: block; font: 9px/1.4 var(--mono); letter-spacing: .18em;
  color: var(--paper-dim); font-style: normal;
}
.pass-field b {
  display: block; font: 600 15px/1.25 var(--sans); letter-spacing: .01em;
  text-transform: uppercase; color: var(--paper-ink);
}
.pass-fields { display: flex; gap: 28px; margin-bottom: 12px; }
.pass-fields .pass-field:last-child b { font-family: var(--mono); }

.pass-who { display: flex; gap: 12px; align-items: flex-start; }
.pass-who i {
  display: block; font-style: normal; font-size: 11px; color: var(--paper-dim);
  text-transform: uppercase; letter-spacing: .1em;
}
/* One sentence about what this person is for, where the five loadout boxes used to be. */
.pass-who .pass-lean {
  display: block; text-decoration: none; margin-top: 5px;
  font-size: 12.5px; line-height: 1.4; color: var(--paper-body); max-width: 42ch;
}
.pass-stub .pass-field b { font-family: var(--mono); font-size: 14px; }
button.pass-go {
  justify-self: stretch; margin-top: 2px; width: 100%;
  background: var(--fire); border-color: #c85c06; color: #1b1206;
  font: 700 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  padding: 12px 20px; border-radius: 3px;
}
button.pass-go:hover { background: #ff9034; border-color: var(--fire); }

/* Bars along the bottom edge of each half. They encode nothing; they are the same bars for the
   same person every time, which is the only thing a barcode has to be. */
.pass-barcode {
  display: flex; align-items: flex-end; gap: 2px; height: 22px; margin-top: 14px;
  overflow: hidden;
}
.pass-stub .pass-barcode { margin-top: 10px; }
.pass-barcode i { display: block; height: 100%; background: var(--paper-ink); }

@media (max-width: 620px) {
  /* A phone is not wide enough to hold thirty rows and still show anybody's face, so it holds
     about a third of the aeroplane instead, which is enough to see that it is one. */
  .backdrop-cabin { left: -62%; width: 224%; }
  .pass { grid-template-columns: minmax(0, 1fr); }
  .pass-stub {
    border-left: 0; border-top: 2px dashed var(--paper-line);
    grid-auto-flow: column; align-items: center; justify-content: start; gap: 20px;
  }
  .pass::before, .pass::after { display: none; }
  .pass-stub .pass-barcode { display: none; }
  .pass-go { justify-self: end; }
}
.logline { margin-top: 6px; color: var(--ink-dim); }

/* The loadout: what you are wearing and the three things on you, as four boxes under the face.
   A box opens a page of choices, unless it is part of who the character is, in which case it
   has a lock in the corner and opens nothing. */
.slots { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.slot {
  position: relative; display: grid; justify-items: center; gap: 2px; width: 74px;
  padding: 6px 4px 5px; background: #1a1d23; border: 1px solid var(--line); border-radius: 4px;
  font: inherit; color: inherit; cursor: default;
}
.slot img { image-rendering: pixelated; }
.slot.opens { cursor: pointer; }
.slot.opens:hover { border-color: var(--gold); background: #232833; }
.slot.fixed { border-color: #3a4150; background: #161920; }
.slot b { font-size: 10px; font-weight: 500; line-height: 1.15; text-align: center; }
.slot i { font: 9px var(--mono); font-style: normal; color: var(--ink-faint); min-height: 11px; text-align: center; }
.slot-empty { width: 48px; height: 48px; display: grid; place-items: center; font: 700 18px var(--mono); color: #2f3540; }
.slot-lock { position: absolute; top: 3px; right: 4px; font: 8px var(--mono); letter-spacing: .1em; color: var(--ink-faint); }
.slot-caret { position: absolute; top: 2px; right: 5px; font-size: 10px; color: var(--gold); }

/* The pages a slot opens. */
.option-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.option {
  display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: start;
  text-align: left; background: var(--panel); padding: 9px; border-color: var(--line);
}
.option.on { border-color: var(--gold); background: #2b2f38; }
.option.locked { cursor: default; filter: grayscale(0.7); opacity: .7; }
.option.locked:hover { background: var(--panel); border-color: var(--line); }
.option img { image-rendering: pixelated; }
.option-text b { display: block; font-size: 13px; }
.option-text i { font-style: normal; display: block; font-size: 11px; color: var(--ink-dim); margin: 2px 0; }
.option-text u { text-decoration: none; display: block; font-size: 11px; color: var(--blue); }
.option-text u.locked { color: var(--warn); }
.option-mod { font: 10px var(--mono); color: var(--gold); }
.slot-dice { font-size: 30px; color: #3a4150; }
.option .seed-input { display: block; width: 100%; box-sizing: border-box; margin: 6px 0 2px; padding: 6px 8px; font: 700 15px var(--mono); letter-spacing: .04em; background: #12151a; color: var(--ink); border: 1px solid var(--line); border-radius: 3px; }
.option .seed-input:focus { outline: none; border-color: var(--gold); }
.option .title-buttons { justify-content: flex-start; margin: 6px 0 0; }

/* ---------------------------------------------------------------------------- the setup */

.picker { padding: 34px 20px 20px; max-width: 1240px; margin: 0 auto; }
.picker h2 { font-size: 30px; margin: 0 0 8px; letter-spacing: -0.02em; }
.picker h3 { font-size: 20px; letter-spacing: -0.02em; margin: 30px 0 4px; }
.lede { color: var(--ink-dim); max-width: 74ch; margin: 0 0 24px; }
.sec-note { color: var(--ink-faint); font-size: 12px; max-width: 74ch; margin: 0 0 12px; }
.picker-body { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .picker-body { grid-template-columns: 1fr; } }

.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.char {
  display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: start;
  text-align: left; padding: 10px; background: var(--panel); border-color: var(--line);
}
.char.on { border-color: var(--gold); background: #2b2f38; }
.char-face { grid-row: span 3; }
.char-id b { display: block; font-size: 14px; }
.char-id i { font-style: normal; font-size: 11px; color: var(--ink-faint); }
.char-stats { grid-column: 2; margin-top: 6px; }
.char-lean { grid-column: 2; display: block; text-decoration: none; font-size: 11px; color: var(--ink-dim); margin-top: 6px; }
.stat { display: grid; grid-template-columns: 26px 1fr 14px; gap: 5px; align-items: center; }
.stat span { font: 9px var(--mono); color: var(--ink-faint); }
.stat b { font: 9px var(--mono); color: var(--ink-dim); text-align: right; }
.stat-track { height: 3px; background: #2f3540; border-radius: 2px; overflow: hidden; }
.stat-fill { height: 100%; background: var(--blue); }
.stat-fill.up { background: var(--good); }
.stat-fill.down { background: #b06a5a; }
.stat b.up { color: var(--good); }
.stat b.down { color: #e08076; }
/* Eleven does not get a longer bar. It gets a full one that is lit at the end it ran out of,
   and a number in the same colour, because the bar is ten wide and the stat no longer is. */
.stat-fill.over { background: linear-gradient(90deg, var(--good) 60%, var(--great) 100%);
                  box-shadow: 0 0 4px var(--great); }
.stat-fill.under { background: #6b4340; }
.stat.under .stat-track { box-shadow: inset 0 0 0 1px #7a4a45; }
.stat b.over { color: var(--great); }
.stat b.under { color: #e08076; }
.big-stats .stat { grid-template-columns: 30px 1fr 18px; margin-bottom: 3px; }
.big-stats .stat-track { height: 6px; }
.big-stats .stat span, .big-stats .stat b { font-size: 11px; }

/* A locked card is a goal, not a blank: the name, the face, and exactly what turns it over. */
.char.locked, .outfit.locked { cursor: default; filter: grayscale(0.7); }
.char.locked .char-face { opacity: .45; }
.char.locked:hover, .outfit.locked:hover { background: var(--panel); border-color: var(--line); }
.char-lock { grid-column: 2; margin-top: 6px; }
.lock-tag {
  font: 9px var(--mono); letter-spacing: .12em; color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 2px; padding: 1px 4px;
}
.char-lock i { display: block; font-style: normal; font-size: 11px; color: var(--warn); margin-top: 4px; }

.outfit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.outfit { text-align: left; background: var(--panel); padding: 11px 12px; }
.outfit.on { border-color: var(--gold); background: #2b2f38; }
.outfit-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.outfit-head b { font-size: 14px; }
.outfit-mod { font: 10px var(--mono); color: var(--gold); white-space: nowrap; }
.outfit i { display: block; font-style: normal; font-size: 12px; color: var(--ink-dim); margin: 6px 0 4px; }
.outfit u { display: block; text-decoration: none; font-size: 11px; color: var(--blue); }

.char-detail { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 18px; position: sticky; top: 16px; }
.char-detail .you-name { margin-bottom: 10px; }
.char-detail .you-name b { font-size: 16px; }
.char-detail .sub { color: var(--ink-faint); font-size: 12px; margin: 10px 0 12px; }
.char-detail p { color: var(--ink-dim); font-size: 13px; }
.char-detail p.lean { color: var(--ink); }
.char-detail .slots { margin: 12px 0 4px; }
.char-detail .title-buttons { margin: 16px 0 0; }
@media (max-width: 900px) { .char-detail { position: static; order: -1; } }

/* The log book, on the report. */
.book { margin-top: 10px; padding: 12px 16px; border-left: 3px solid var(--gold); background: var(--panel); }
.book b { display: block; font-size: 15px; color: var(--gold); }
.book i { display: block; font-style: normal; font-size: 12px; color: var(--ink-faint); margin: 3px 0; }
.book span { font-size: 13px; color: var(--ink-dim); }
.book .unlocked { color: var(--great); font-weight: 500; }

.fold { margin-top: 10px; }
.fold-head {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  color: var(--ink-dim); font: inherit;
}
.fold-head:hover { border-color: var(--ink-faint); color: var(--ink); }
.fold-head b { font-size: 13px; font-weight: 500; }
.fold-arrow { font: 700 14px/1 var(--mono); color: var(--ink-faint); width: 10px; }
.fold.open .fold-head { border-radius: 4px 4px 0 0; border-bottom: none; }
.fold .timeline, .fold .share {
  border: 1px solid var(--line); border-top: none; border-radius: 0 0 4px 4px;
}

/* The flight recorder. It lives inside the share panel now, behind a button, so it is a
   section of that panel rather than a panel of its own: a rule across the top, and no box. */
.rec { margin-top: 14px; padding: 14px 0 0; border-top: 1px solid var(--line); }
.rec b { display: block; font-size: 13px; color: var(--ink); }
.rec i { display: block; font-style: normal; font-size: 12px; color: var(--ink-faint); margin: 3px 0 8px; }
.rec textarea {
  width: 100%; min-height: 64px; box-sizing: border-box; resize: vertical; padding: 8px;
  background: #12151a; color: var(--ink); border: 1px solid var(--line); border-radius: 4px;
  font: 13px/1.4 inherit;
}
.rec .title-buttons { justify-content: flex-start; margin: 8px 0 0; }
.rec .done { font: 11px var(--mono); color: var(--great); align-self: center; }

/* -------------------------------------------------------------------- what you changed --- */
/* The screen after the report: one difference, one bar, one card. Nothing else fits on it. */
.unlocks .report-inner { max-width: 620px; }
.unlocks .title-buttons { margin-top: 34px; }

.versus { display: flex; flex-wrap: wrap; gap: 6px 34px; align-items: baseline; margin-top: 14px;
  font: 13px var(--mono); color: var(--ink-faint); }
.versus b { font-size: clamp(34px, 9vw, 52px); margin-left: 10px; color: var(--ink-dim); }
.versus .you b { color: var(--great); }
.versus .you.worse b { color: var(--bad); }
.versus .you.same b { color: var(--ink-dim); }
.delta { font-size: 17px; color: var(--ink); margin: 6px 0 0; }

.souls { margin-top: 30px; }
.soul-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.soul-top b { font-size: 15px; color: var(--gold); }
.soul-top i { font-style: normal; font: 12px var(--mono); color: var(--ink-faint); }
.soul-track {
  position: relative; height: 10px; margin: 7px 0 6px; border-radius: 5px; overflow: hidden;
  background: #12151a; border: 1px solid var(--line);
}
/* Two bars from the same left edge, one hidden under the other. The gain runs all the way to
   where the book is now; what you walked on with lies on top and covers all of it but the end,
   so the only gold on the track is the part this flight put there. */
.soul-grown {
  position: absolute; left: 0; top: 0; height: 100%; border-radius: 5px;
  background: var(--gold);
  transition: width 1100ms cubic-bezier(.2, .8, .3, 1);
}
.soul-held {
  position: absolute; left: 0; top: 0; height: 100%; border-radius: 5px;
  background: var(--great);
}

/* The wardrobe along the bar: one pip per outfit, at the souls it opens on. Locked ones are
   there and grey, because a ladder you can see the top of is the reason to fly again. */
.soul-ladder { position: relative; height: 40px; margin-top: 10px; }
.soul-pip {
  position: absolute; bottom: 0; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.soul-pip img {
  width: 26px; height: 26px; image-rendering: pixelated;
  opacity: .3; filter: grayscale(1); transition: opacity 280ms, filter 280ms;
}
.soul-pip u { font: 9px var(--mono); color: var(--ink-faint); text-decoration: none; }
.soul-pip.open img { opacity: 1; filter: none; }
.soul-pip.open u { color: var(--great); }
/* Turned over on this flight: dark until the bar reaches it, then it comes up. */
.soul-pip.fresh img { opacity: .3; filter: grayscale(1); }
.soul-pip.fresh.lit img { opacity: 1; filter: none; }
.soul-pip.fresh.lit u { color: var(--gold); }
.soul-next { display: block; font-style: normal; font-size: 13px; color: var(--ink-dim); }
.unlocked { color: var(--great); font-size: 14px; margin: 14px 0 0;
            display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.ul-label { color: var(--ink-dim); }
/* Icon and name as one thing, so a row of three reads as three cards and not six words. */
.ul-item { display: inline-flex; align-items: center; gap: 6px; }
.ul-item img { width: 24px; height: 24px; image-rendering: pixelated; }

.near { margin-top: 32px; }
.near .rep-kicker { margin-bottom: 8px; }
/* The face is drawn at eighty, so it gets eighty here rather than leaning on the next line. */
.near-card { width: 100%; box-sizing: border-box; grid-template-columns: 80px 1fr; padding: 12px; }
.near-card .char-lock .soul-track { margin: 2px 0 5px; }
.near-card .char-lock i { color: var(--ink-dim); }
.near-how { font-size: 13px; color: var(--warn); margin: 8px 0 0; }

.history { border: 1px solid var(--line); border-radius: 4px; margin-bottom: 20px; }
.hrow { display: grid; grid-template-columns: 16px 1fr 100px 80px 34px 1fr; gap: 8px; align-items: center; padding: 6px 10px; font-size: 12px; border-bottom: 1px solid #22262e; }
.hrow i { font-style: normal; color: var(--ink-faint); }
.hrow img { image-rendering: pixelated; }
.stat { display: grid; grid-template-columns: 26px 1fr 14px; gap: 5px; align-items: center; }
.stat span { font: 9px var(--mono); color: var(--ink-faint); }
.stat b { font: 9px var(--mono); color: var(--ink-dim); text-align: right; }
.stat-track { height: 3px; background: #2f3540; border-radius: 2px; overflow: hidden; }
.stat-fill { height: 100%; background: var(--blue); }

/* ------------------------------------------------------------- the seconds going by ---

   An action's seconds are played out on the aeroplane rather than jumped over, and while they
   are going by the cabin is something you watch and not something you touch. The card stays
   where it is, half lit, because it is about to be right again - and it only dims if the wait
   is long enough to notice, so a single step does not make the screen blink. */
.play.busy .card, .play.busy .undo, .play.busy .bag-item,
.play.busy button.you-name, .play.busy button.carrying { pointer-events: none; }
.card { transition: opacity .12s; }
.play.busy .card { opacity: .6; transition: opacity .2s .12s; }
.play.busy .undo { opacity: .45; }


/* --------------------------------------------------------------------------- languages ---

   German says the same thing in about a third more letters and puts some of it in one word,
   so the layout has to survive a noun nobody can break. Two rules do most of it: every box of
   prose may hyphenate (the browser needs the lang attribute for that, which i18n.js sets on
   <html>), and every box that is a fixed width may break a word rather than push past its own
   edge. The rest is a few places where the English fitted exactly and nothing longer would. */

.screen, .card, .option, .slot, .fact, .tbox, .medal, .rep-ending, .prose-inner {
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
.slot b, .slot i, .fact i, .tbox i, .leg span, .stat span,
.soul-where, .soul-text b, .card-title, .bag-item b { overflow-wrap: anywhere; }

/* The language picker: the names languages call themselves. */
.langs { display: flex; gap: 6px; flex-wrap: wrap; }
.langs .lang {
  background: none; border: 1px solid transparent; border-radius: 3px;
  color: var(--ink-faint); font: 11px var(--mono); letter-spacing: .06em;
  padding: 3px 9px; cursor: pointer;
}
.langs .lang:hover { color: var(--ink-dim); border-color: var(--line); }
.langs .lang.on { color: var(--ink); border-color: var(--line); background: var(--panel-2); cursor: default; }

/* Where the English fitted and a longer word will not. */
:lang(de) .fact i { font-size: 10px; }
:lang(de) .tbox i { font-size: 10px; }
:lang(de) .slot b { font-size: 9px; }
:lang(de) .hrow { grid-template-columns: 16px 1fr 110px 90px 34px 1fr; }

/* ------------------------------------------------------------------------------ settings ---

   One panel, from the title or from Escape in the air, over whatever is showing. It borrows the
   help card's veil and box, because it is the same kind of thing: a small page of choices that
   stops the aeroplane being the thing you are looking at for as long as it is open. */

.settings-veil {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(10,12,16,.78);
  display: grid; place-items: center; padding: 20px;
}
.settings {
  width: 100%; max-width: 420px;
  background: var(--panel); border: 1px solid #4a5361; border-radius: 6px;
  padding: 20px 22px 16px; box-shadow: 0 20px 60px rgba(0,0,0,.7);
}
.settings h3 { margin: 0 0 16px; font-size: 20px; letter-spacing: -0.02em; }
.settings .title-buttons { margin: 18px 0 0; justify-content: flex-start; }
.settings .footnote { margin-top: 10px; }

.set-row { margin-bottom: 16px; }
.set-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 7px;
}
.set-value { color: var(--ink-dim); font: 10px var(--mono); letter-spacing: .06em; }
.set-control { display: flex; gap: 10px; align-items: center; }

.set-slider {
  flex: 1; appearance: none; -webkit-appearance: none;
  height: 4px; border-radius: 2px; background: #2f3540; outline: none; cursor: pointer;
}
.set-slider::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--blue); border: 0; cursor: pointer;
}
.set-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--blue); border: 0; cursor: pointer;
}
.set-slider:disabled { opacity: .4; cursor: default; }
.set-slider:disabled::-webkit-slider-thumb { cursor: default; }

.set-toggle {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px;
  color: var(--ink-dim); font: 11px var(--mono); letter-spacing: .06em;
  padding: 5px 11px; cursor: pointer; white-space: nowrap;
}
.set-toggle:hover { color: var(--ink); border-color: #4a5361; }
.set-toggle.off { color: var(--warn); }
.set-toggle.leave { color: #c08a80; border-color: #4a3230; }
.set-toggle.leave:hover { color: var(--warn); border-color: #6b4340; }

/* A question with two answers, over everything, in the game's own furniture - because
   window.confirm is not always allowed to open, and when it is not it answers no without ever
   asking, which turns whatever called it into a button that does nothing. The answer that
   changes something is on the right and dressed as what it does. */
.ask-veil { z-index: 90; }
.ask { max-width: 380px; }
.ask h3 { margin-bottom: 10px; }
.ask p { margin: 0; color: var(--ink-dim); font-size: 13px; line-height: 1.5; }
.ask .title-buttons { margin: 18px 0 0; justify-content: flex-end; }
.ask button.big.warn { background: #6b3a35; border-color: #8a4a42; }
.ask button.big.warn:hover { background: #7d443e; }

/* ------------------------------------------------------------------- the day's aeroplane --- */
/* Under the boarding pass, because it is the other way onto an aeroplane and not a setting.
   It reads like the strip on a departure board: what today is, what you made of it, and the
   one button. Flown, it goes quiet - the border comes off the gold and the button stops being
   the big one - because a day already flown is not the thing the screen is asking for. */

.daily-strip {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  justify-content: space-between; text-align: left;
  max-width: 620px; margin: 18px auto 0; padding: 12px 16px;
  background: var(--panel); border: 1px solid var(--gold); border-radius: 4px;
}
.daily-strip.flown { border-color: var(--line); }
.daily-what b { display: block; font: 11px var(--mono); letter-spacing: .1em; color: var(--gold); }
.daily-strip.flown .daily-what b { color: var(--ink-faint); }
.daily-what i { font-style: normal; font: 13px var(--mono); color: var(--ink-dim); }
.daily-said { flex: 1; min-width: 160px; }
.daily-said > i { display: block; font-style: normal; font-size: 11px; color: var(--ink-faint); }
.daily-score { display: flex; gap: 8px; align-items: baseline; }
.daily-score b { font: 700 20px/1 var(--mono); color: var(--ink); }
.daily-score i { font-style: normal; font-size: 13px; color: var(--ink-faint); }
.daily-score u {
  text-decoration: none; font: 700 13px var(--mono);
  border: 1px solid var(--line); border-radius: 3px; padding: 1px 6px;
}
.daily-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

/* The letter as a badge rather than a row. The grade rules above own the five colours and only
   ever set a border with them; here the letter is the thing being read, so it takes the colour
   too. */
.daily-score u.grade-A { color: var(--great); border-color: var(--great); }
.daily-score u.grade-B { color: var(--good);  border-color: var(--good); }
.daily-score u.grade-C { color: var(--warn);  border-color: var(--warn); }
.daily-score u.grade-D { color: #e08a2a;      border-color: #e08a2a; }
.daily-score u.grade-E,
.daily-score u.grade-F { color: var(--bad);   border-color: var(--bad); }

/* --------------------------------------------------------- a flight somebody sent you --- */

.paste { max-width: 620px; margin: 26px 0 0; }
.paste h3 { margin: 0 0 4px; font-size: 18px; letter-spacing: -0.02em; }
.paste .footnote { margin: 0 0 8px; }
.paste-input {
  width: 100%; resize: vertical; padding: 8px;
  background: #12151a; color: var(--ink);
  border: 1px solid var(--line); border-radius: 4px;
  font: 12px/1.4 var(--mono); word-break: break-all;
}
.paste-input:focus { outline: none; border-color: var(--gold); }
.paste .title-buttons { justify-content: flex-start; margin: 8px 0 0; }
.paste-said { font-size: 12px; color: var(--ink-dim); margin: 8px 0 0; min-height: 1.2em; }
.paste-said.good { color: var(--great); }
.paste-said.bad { color: #d99; }

/* ------------------------------------------------------------------ telling somebody --- */
/* Four lines and a button. The block of squares is the only thing in the game set in emoji, so
   it is given a font stack that will actually draw them and enough leading that fifteen of them
   read as one bar rather than fifteen boxes. */

/* Standalone on the day's share screen; inside a drawer on the report, where the rule above
   takes the top border off so it joins the heading it opened from. */
.share { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px; }
.fold .share { margin-top: 0; }
.share-text {
  margin: 0; white-space: pre-wrap; word-break: break-all;
  font: 12px/1.7 var(--mono); color: var(--ink-dim);
  font-variant-emoji: emoji;
}
.share .title-buttons { justify-content: flex-start; margin: 10px 0 0; }
/* The way out to the flight recorder. Deliberately the quietest thing on the panel: it is for
   one person, and everybody else on this screen is looking for the button above it. */
.share-back {
  display: block; margin-top: 14px; padding: 0; background: none; border: none;
  color: var(--ink-faint); font-size: 12px; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--line);
}
.share-back:hover { background: none; color: var(--ink-dim); text-decoration-color: var(--ink-faint); }
.share .done { font: 11px var(--mono); color: var(--great); align-self: center; }
.share .footnote { margin-top: 10px; }

/* The day's line on the screen after the report. */
.day-card {
  margin-top: 26px; padding: 12px 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  border-left: 2px solid var(--ink-faint);
}
.day-card.stands { border-left-color: var(--gold); }
.day-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.day-head b { font: 700 13px var(--mono); letter-spacing: .04em; }
.day-head i { font-style: normal; font-size: 11px; color: var(--ink-faint); }
.day-said { margin: 6px 0 0; font-size: 13px; color: var(--ink-dim); }
.day-card .title-buttons { justify-content: flex-start; margin: 10px 0 0; }

/* ---------------------------------------------------------- somebody else's cabin --- */
/* Under yours, smaller, on the same clock. It is deliberately the quieter of the two pictures:
   dimmed a little, no reach, no trail, nothing under the pointer, because none of what is
   happening down there is a decision anybody is making now. */

.ghost { border: 1px solid var(--line); border-radius: 4px; background: #12151a; padding: 6px; }
.ghost-head {
  display: flex; gap: 12px; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; padding: 0 2px 5px;
}
.ghost-head b { font: 11px var(--mono); letter-spacing: .08em; color: var(--ink-faint); }
.ghost-line { font: 11px var(--mono); color: var(--ink-dim); }
.ghost-cabin { display: block; opacity: .82; }

/* The days, above the flights in the log book. A day has one line by definition. */
.days { margin: 20px 0 26px; }
.days h3 { font-size: 18px; letter-spacing: -0.02em; margin: 0 0 2px; }
.days .footnote { margin: 0 0 10px; }
.dayrow {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 6px 0; border-top: 1px solid var(--line);
  font: 12px var(--mono); color: var(--ink-dim);
}
.dayrow b { color: var(--ink); }
.dayrow i { font-style: normal; color: var(--ink-faint); flex: 1; }
.dayrow span.grade-A, .dayrow span.grade-B, .dayrow span.grade-C,
.dayrow span.grade-D, .dayrow span.grade-E, .dayrow span.grade-F {
  border: 1px solid var(--line); border-radius: 3px; padding: 1px 6px;
}
.dayrow button { padding: 3px 10px; font-size: 11px; }