:root {
  color-scheme: dark;
  --bg: #14110e;
  --panel: #1a1612;
  --raise: #251f19;
  --raise-2: #30281f;
  --line: #3b3229;
  --text: #f2e9d8;
  --dim: #a79c8a;
  --accent: #f0b43c;
  --accent-ink: #281b04;
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'DM Mono', ui-monospace, Menlo, monospace;
  /* The display face for words in the world's own script. The engine sets it from the world. */
  --script: sans-serif;
  /* How far Arai's own screens keep from the edges of the window. The globe and
     the page of maps share these, so the name of the game does not move between them. */
  --edge-top: clamp(22px, 6vh, 64px);
  --edge-left: clamp(22px, 6vw, 84px);
  --edge-right: clamp(22px, 6vw, 84px);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.4 var(--sans);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

#app {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: minmax(0, 54fr) minmax(0, 46fr);
}

/* The street */

#street {
  position: relative;
  overflow: hidden;
  background: linear-gradient(#0f151a 0%, #16212a 44%, #33302c 76%, #6a4a31 100%);
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

/* Each map brings its own sky. Talat is early morning. */
#street[data-map='talat'] { background: linear-gradient(#bcdcec 0%, #d8ecef 46%, #f2e7cc 78%, #e8d4ab 100%); }
/* In daylight the top bar needs a deeper shade behind it to stay readable. */
#street[data-map='talat'] #hud { background: linear-gradient(rgba(10, 9, 8, 0.86), rgba(10, 9, 8, 0.6) 55%, rgba(10, 9, 8, 0)); }
#street[data-map='talat'] :is(#deadline, .hud-label, #carry) { color: #ddd5c4; }

#far, #world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
/* The engine sizes the world, and the backdrop painted for it, to the map. */
.layer { position: absolute; left: 0; top: 0; }
.layer svg { display: block; }
#front { pointer-events: none; }

.sign { font: 400 11px var(--script); }
.hand { font: 400 15px 'Sriracha', 'Thonburi', cursive; }
.neon { font: 400 22px var(--script); }

.backdrop { display: block; }
.sprite img { display: block; }
.crisp .backdrop, .crisp .sprite img { image-rendering: pixelated; }

#closeup { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#closeup:not(.indoors)::before {
  content: '';
  position: absolute;
  inset: 0 0 0 45%;
  background: linear-gradient(to right, rgba(12, 10, 8, 0), rgba(12, 10, 8, 0.62));
}
#interior { position: absolute; max-width: none; image-rendering: pixelated; }
#figureClip { position: absolute; overflow: hidden; }
#figure { display: block; width: auto; max-width: none; image-rendering: pixelated; }

.actor { position: absolute; left: 0; top: 0; pointer-events: none; }
.actor svg { display: block; overflow: visible; }
.leg { transform-box: fill-box; transform-origin: 50% 0; }
.walking .leg.a { animation: stride 0.38s ease-in-out infinite alternate; }
.walking .leg.b { animation: stride 0.38s ease-in-out infinite alternate-reverse; }
.walking svg { animation: bob 0.38s ease-in-out infinite; }
.tail { transform-box: fill-box; transform-origin: 100% 100%; }
.happy .tail { animation: wag 0.28s ease-in-out infinite alternate; }

.smoke { opacity: 0; transform-box: fill-box; animation: smoke 5.2s linear infinite; }
.coals { animation: coals 1.7s ease-in-out infinite alternate; }
.beacon { animation: blink 2.6s steps(2, jump-none) infinite; }
.train { animation: train 52s linear infinite; }

@keyframes stride { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@keyframes bob { 50% { transform: translateY(-2px); } }
@keyframes wag { from { transform: rotate(-14deg); } to { transform: rotate(18deg); } }
@keyframes smoke {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  18% { opacity: 0.15; }
  100% { opacity: 0; transform: translate(30px, -96px) scale(2.3); }
}
@keyframes coals { from { fill: #c95a2a; } to { fill: #f08a3a; } }
@keyframes blink { 50% { opacity: 0.15; } }
@keyframes train { from { transform: translateX(-320px); } 45%, to { transform: translateX(2200px); } }

.prompt {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--text);
  color: #1b1611;
  font: 600 13px/1 var(--sans);
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(8, 6, 4, 0.45);
}
.prompt::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: var(--text);
}
.prompt kbd {
  font: 600 11px/1 var(--sans);
  border: 1px solid rgba(27, 22, 17, 0.4);
  border-radius: 4px;
  padding: 2px 5px;
  margin-left: 8px;
}
@media (pointer: coarse) { .prompt kbd { display: none; } }

/* Clock, Confidence, pockets */

#hud {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  align-items: flex-start;
  gap: 34px;
  padding: 14px 22px 40px;
  background: linear-gradient(rgba(10, 9, 8, 0.78), rgba(10, 9, 8, 0));
  pointer-events: none;
}
#clock { display: block; font: 600 36px/1 var(--serif); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
#clock.late { color: var(--accent); }
#deadline, .hud-label, #carry { font-size: 13px; color: var(--dim); }
#deadline { display: block; margin-top: 5px; white-space: nowrap; }
.hud-time, .hud-conf { flex: none; }
.hud-conf { padding-top: 3px; }
.hud-label { display: block; margin-bottom: 8px; }
.hud-label b { color: var(--text); font-weight: 600; margin-left: 4px; }
#confDelta { font-style: normal; font-weight: 600; color: var(--accent); margin-left: 6px; opacity: 0; transition: opacity 0.9s ease 0.9s; }
#confDelta.show { opacity: 1; transition: none; }
#ticks { display: flex; gap: 3px; }
#ticks i { width: 5px; height: 15px; border-radius: 1.5px; background: rgba(242, 233, 216, 0.2); transition: background 0.3s ease; }
#ticks i.on { background: var(--accent); }
#ticks i.gate { margin-left: 5px; }
.hud-carry { margin-left: auto; text-align: right; }
#cash { display: block; font: 600 24px/1 var(--serif); font-variant-numeric: tabular-nums; margin-top: 5px; }
#carry { display: block; margin-top: 7px; max-width: 36ch; }

/* Conversation */

#panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  min-height: 0;
  background: var(--panel);
  color: var(--text);
  border-top: 1px solid var(--line);
}

/* Panel colours, picked on the page of maps. Paper is the default. The street and
   the top bar keep the night colours above, and Arai's own screens keep theirs.
   The conversation, the choices, and the sheet on a map's start and end screens
   change, and so does the sample of them beside the picker. */
:is(#panel, .sheet, .swatch, .preview)[data-theme='night'] {
  --panel: #0c1b25; --raise: #142b39; --raise-2: #1c394a; --line: #2a4658;
  --text: #eaf0ee; --dim: #8fa8b1; --accent: #f5b83f; --accent-ink: #251a02;
}
:is(#panel, .sheet, .swatch, .preview)[data-theme='jade'] {
  --panel: #0e1e19; --raise: #162e27; --raise-2: #1e3c33; --line: #2c4d42;
  --text: #eef0e6; --dim: #93a99d; --accent: #f3c14b; --accent-ink: #241b03;
}
:is(#panel, .sheet, .swatch, .preview)[data-theme='neon'] {
  --panel: #180f26; --raise: #27193b; --raise-2: #33214c; --line: #49336c;
  --text: #f4edfb; --dim: #ad9dc6; --accent: #ff6b9d; --accent-ink: #2a0716;
}
:is(#panel, .sheet, .swatch, .preview)[data-theme='paper'] {
  --panel: #efe6d3; --raise: #f8f1e1; --raise-2: #fffaf0; --line: #d3c8ae;
  --text: #2a2118; --dim: #6d6252; --accent: #b5402f; --accent-ink: #fff6ee;
}
:is(#panel, .sheet, .preview)[data-theme='paper'] { color-scheme: light; }

#feed, #tray { min-height: 0; overflow-y: auto; padding: 20px 24px 28px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
#tray { display: flex; flex-direction: column; padding-bottom: 0; }
#tray > :last-child:not(.help, .foot) { margin-bottom: 26px; }
#feed { display: flex; flex-direction: column; gap: 14px; border-right: 1px solid var(--line); scroll-behavior: smooth; }
#feed > :first-child { margin-top: auto; }

.note, .cue { font: italic 400 17px/1.45 var(--serif); margin: 0; max-width: 44ch; }
.cue { color: var(--dim); font-size: 16px; }
.turn { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.turn.mine { align-items: flex-end; }
.gloss { font: 500 14px/1.4 var(--sans); margin: 0; max-width: 46ch; }
.gloss.meaning { color: var(--accent); }

.bubble {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 15px 8px 13px;
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: 17px 17px 17px 5px;
  cursor: pointer;
}
.bubble:hover { background: var(--raise-2); }
.bubble.mine { background: transparent; border-color: color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 17px 17px 5px 17px; }
.who { font-size: 13px; font-weight: 600; color: var(--dim); }
.bars { display: inline-flex; align-items: center; gap: 2px; height: 28px; min-width: 30px; }
.bars i { width: 3px; border-radius: 2px; background: color-mix(in srgb, currentColor 34%, transparent); }
.bars i.on { background: var(--text); }
.mine .bars i.on, .chip .bars i.on { background: var(--accent); }

/* Choices */

.group { margin-bottom: 20px; }
.tray-h { font: 500 13px/1.3 var(--sans); color: var(--dim); margin: 0 0 10px; }
.chips, .actions, .notes { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 330px;
  padding: 8px 13px 8px 11px;
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: 12px;
  font: 500 15px/1.25 var(--sans);
  text-align: left;
  cursor: pointer;
}
.chip:hover { background: var(--raise-2); }
.chip.armed { border-color: var(--accent); background: var(--raise-2); }
.chip .bars { height: 22px; flex: none; }
.chip .bars i { width: 2.5px; }
.chip .memo { font: italic 400 14px/1.3 var(--serif); color: var(--dim); }
.chip.locked { opacity: 0.55; }

.btn.more { display: block; margin-top: 6px; }
.confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.confirm:not(:empty) { margin-bottom: 8px; }
.confirm .why { font-size: 14px; color: var(--dim); }

.btn {
  padding: 12px 16px;
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: 10px;
  font: 600 15px/1 var(--sans);
  cursor: pointer;
}
.btn:hover:not(:disabled) { background: var(--raise-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 86%, white); }
.btn.quiet { padding: 8px 0; background: none; border-color: transparent; color: var(--dim); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.btn.quiet:hover:not(:disabled) { background: none; color: var(--text); }
.btn:disabled { opacity: 0.4; cursor: default; }
.cost { margin-left: 8px; font-weight: 500; opacity: 0.7; font-variant-numeric: tabular-nums; }

.foot, .help { position: sticky; bottom: 0; margin-top: auto; padding: 10px 0 14px; background: var(--panel); border-top: 1px solid var(--line); }
.help { display: flex; flex-wrap: wrap; gap: 0 22px; padding-top: 8px; }
.foot .help { position: static; margin: 0; padding: 0; border: 0; }
.foot:not(:has(.help)):has(.confirm:empty) { display: none; }
#tray.busy { pointer-events: none; opacity: 0.55; }
.keys { font-size: 14px; color: var(--dim); max-width: 46ch; margin: 0; }
.tip { font-size: 14px; color: var(--dim); max-width: 54ch; margin: 12px 0 0; }

.fingers button { display: inline-flex; align-items: flex-end; gap: 4px; height: 46px; padding: 0 14px 11px; }
.fingers i { width: 5px; height: 20px; border-radius: 3px; background: var(--text); }

.till {
  display: inline-block;
  margin-bottom: 16px;
  padding: 9px 14px 8px;
  background: #0b110c;
  border-radius: 6px;
  color: #a5e6a0;
  font: 500 24px/1 var(--mono);
}
.cash {
  position: relative;
  min-width: 66px;
  height: 40px;
  border: 0;
  border-radius: 5px;
  color: #fbf6ea;
  font: 600 17px/1 var(--serif);
  cursor: pointer;
}
/* Notes are oblong and coins are round. Each one's colour comes from the world. */
.cash.coin { min-width: 40px; border-radius: 50%; }
.cash:disabled { opacity: 0.25; cursor: default; }
.cash .n {
  position: absolute;
  right: -7px;
  top: -7px;
  min-width: 20px;
  padding: 3px 5px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--dim);
  font: 600 11px/1 var(--sans);
}
.shelf .chip.armed .price { color: var(--accent); }
.price { color: var(--dim); font-variant-numeric: tabular-nums; margin-left: 4px; }

/* Start and end of the evening */

/* The street stays in view with the title over it. Everything else sits on a sheet
   that stands exactly where the panel is, in the panel's colours. */
#overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
#app:has(#overlay:not([hidden])) :is(#hud, #prompts) { visibility: hidden; }
.marquee {
  flex: 1 0 auto;
  display: flex;
  align-items: flex-end;
  min-height: 150px;
  padding: 22px clamp(22px, 6vw, 84px) clamp(18px, 3vw, 30px);
  background: linear-gradient(rgba(10, 9, 8, 0.25), rgba(10, 9, 8, 0.78));
  text-shadow: 0 2px 22px rgba(6, 5, 4, 0.7);
}
.sheet {
  flex: none;
  min-height: 46vh;
  min-height: calc(46dvh + 1px);
  padding: 26px clamp(22px, 6vw, 84px) max(26px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  color: var(--text);
}
.col { flex: none; max-width: 640px; }
.sheet-h { font: 600 13px/1.3 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); margin: 0 0 12px; }
.title { font: 600 clamp(72px, 13vw, 136px)/0.86 var(--serif); letter-spacing: -0.035em; margin: 0; }
.title span { font: 400 0.36em/1 var(--script); letter-spacing: 0; color: var(--accent); margin-left: 0.35em; }

/* Arai's own screen inside a world: the maps there and the settings, laid over the
   same sky as the globe, with nothing of any map behind them. The maps' cards and
   the settings board are in the player's colours. */
.hub {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--edge-top) var(--edge-right) max(30px, env(safe-area-inset-bottom)) var(--edge-left);
  color: var(--text);
  color-scheme: dark;
  scrollbar-width: thin;
  scrollbar-color: #2a2f3a transparent;
  transition: opacity 0.25s ease;
}
/* Coming in from the globe, the page waits for the Earth to fall away. Going back
   out, it gets out of the way at once. */
.hub.arriving { animation: arrive 0.6s ease-out 0.4s both; }
.hub.leaving { opacity: 0; pointer-events: none; }
@keyframes arrive { from { opacity: 0; transform: translateY(10px); } }
/* Arai's own look, which the globe set: night sky, panels of dark glass with a
   hairline round them, amber for whatever can be done next, and pixel art for
   every picture. It does not change with the colours the player picks for the
   talking. */
.hub, #atlas {
  --hair: #2a2f3a; --hair-2: #3d4556; --glass: rgba(12, 16, 24, 0.9); --glass-2: rgba(12, 16, 24, 0.78);
  --text: #f2e9d8; --dim: #a79c8a; --line: var(--hair); --accent: #f0b43c; --accent-ink: #281b04;
  --panel: var(--glass); --raise: rgba(255, 255, 255, 0.05); --raise-2: rgba(255, 255, 255, 0.09);
}
/* A pill: something small to press, often with a pixel picture at its head. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 16px;
  background: var(--glass-2);
  border: 1px solid var(--hair);
  border-radius: 999px;
  color: var(--text);
  font: 600 14px/1 var(--sans);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pill:hover { border-color: var(--accent); }
.pill[aria-pressed='true'] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--glass-2)); }
.pill .px { flex: none; color: var(--accent); }
.pill .cost { margin-left: 0; color: var(--dim); }
.px { display: block; flex: none; }
/* The thing to do next, with a pixel arrow after its words. */
.go { display: inline-flex; align-items: center; gap: 10px; }
.hub .btn.primary:active, #atlas .btn.primary:active { transform: translateY(1px); }
/* Small headings: on the sky over a group of cards, and inside a board. */
.hub .sheet-h { display: flex; align-items: center; gap: 10px; color: var(--dim); }
.hub .sheet-h::before { content: ''; width: 6px; height: 6px; background: var(--accent); }
.label { font: 600 12px/1.3 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); margin: 0 0 4px; }
.board .label:not(:first-child) { margin-top: 24px; }
.hub-head { position: relative; margin-bottom: clamp(24px, 6vh, 52px); padding-bottom: clamp(18px, 3vh, 28px); border-bottom: 1px solid var(--line); }
/* The page is headed with the place, which is longer than the game's name, so it
   is set smaller, with the same thing in the place's own language on a line of
   its own under it. The heading keeps clear of the way back out, in the corner. */
.hub-head .name { display: grid; justify-items: start; gap: clamp(2px, 0.5vw, 6px); }
.hub .title { padding-right: 150px; font-size: clamp(40px, 7.2vw, 96px); line-height: 0.96; text-wrap: balance; }
.hub .say { margin-left: -10px; font-size: clamp(18px, 5.4vw, 38px); white-space: nowrap; }
.hub-grid { display: flex; flex-direction: column; gap: 30px; max-width: 1180px; }
.hub.fresh .setup { order: -1; }
.setup { max-width: 640px; }
.board { padding: 18px 20px 20px; background: var(--glass); border: 1px solid var(--hair); border-radius: 16px; backdrop-filter: blur(6px); }
.hub .small { font-size: 14px; color: var(--dim); max-width: 52ch; margin: 0 0 12px; }

/* The way back out to the globe: a small Earth, turning. */
.to-world { position: absolute; right: 0; top: 0; padding: 0 15px 0 4px; }
.to-world canvas { display: block; border-radius: 50%; image-rendering: pixelated; }

/* A heading with a word beside it in the world's own script. On the page of maps
   that word is a sound you can tap, like every phrase in the game. */
.name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.06em; }
.say {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: clamp(8px, 1.4vw, 18px);
  padding: 6px 10px;
  background: none;
  border: 0;
  border-radius: 10px;
  color: var(--accent);
  font: 400 clamp(26px, 4.7vw, 49px)/1 var(--script);
  cursor: pointer;
}
.say:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.say .bars { height: 26px; min-width: 0; color: var(--text); }
.say .bars i.on { background: var(--accent); }
.tagline { font: italic 400 clamp(16px, 2vw, 21px)/1.35 var(--serif); margin: 14px 0 0; max-width: 30em; }

/* A map: a picture of the place with when it happens pinned over it, fading
   through a pattern of dots into what is said about it, and the way in. */
.map-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.map { position: relative; display: flex; flex-direction: column; background: var(--glass); border: 1px solid var(--hair); border-radius: 16px; backdrop-filter: blur(6px); transition: border-color 0.2s ease; }
.map-art { position: relative; height: clamp(120px, 21vh, 184px); overflow: hidden; border-radius: 15px 15px 0 0; background: #0b0f17 50% 50% / cover no-repeat; }
.map-art::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 36px;
  background: rgb(12, 16, 24);
  -webkit-mask: var(--dither) 0 100% / 12px 36px repeat-x;
  mask: var(--dither) 0 100% / 12px 36px repeat-x;
}
.map-body { flex: 1; display: grid; gap: 8px; justify-items: start; align-content: start; padding: 4px 18px 18px; }
.map h3 { font: 600 30px/1 var(--serif); letter-spacing: -0.02em; margin: 0; }
.map h3 span { font: 400 0.55em/1 var(--script); letter-spacing: 0; color: var(--accent); margin-left: 0.45em; }
.map-what { font: 400 16px/1.45 var(--serif); margin: 0; }
.map-history { font: 500 13px/1.4 var(--sans); color: var(--dim); margin: 0; }
.hub .small.need { margin: 0; color: var(--accent); font-weight: 600; }
/* A map that is open is pressed anywhere: its name is the button, stretched over
   the whole card, with an arrow beside it to say the card goes somewhere. */
.map.open { cursor: pointer; transition: border-color 0.2s ease, transform 0.08s ease; }
.map.open:active { transform: translateY(1px); }
.map-name { display: flex; align-items: center; justify-content: space-between; gap: 12px; justify-self: stretch; }
.enter { padding: 0; background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
.enter::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: 16px; }
.enter:focus-visible { outline: none; } /* the frame round the card shows where the keys are */
.cue { flex: none; color: var(--accent); opacity: 0.6; transition: opacity 0.15s ease, transform 0.15s ease; }
.map.open:is(:hover, :focus-within) .cue { opacity: 1; transform: translateX(4px); }
/* It answers the pointer, and the keys, with a frame round it, the way a game
   marks what is picked. */
.map::after {
  --mark: linear-gradient(var(--accent) 0 0);
  content: '';
  position: absolute;
  inset: -3px;
  background:
    var(--mark) 0 0 / 14px 2px, var(--mark) 0 0 / 2px 14px,
    var(--mark) 100% 0 / 14px 2px, var(--mark) 100% 0 / 2px 14px,
    var(--mark) 0 100% / 14px 2px, var(--mark) 0 100% / 2px 14px,
    var(--mark) 100% 100% / 14px 2px, var(--mark) 100% 100% / 2px 14px;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, inset 0.15s ease;
}
.map.open:is(:hover, :focus-within) { border-color: var(--hair-2); }
.map.open:is(:hover, :focus-within)::after { inset: -7px; opacity: 1; }

/* Pinned over a picture: when a map happens, or that it is new. */
.tag {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px 6px 8px;
  background: rgba(7, 9, 13, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: var(--text);
  font: 600 12px/1 var(--sans);
}
.tag b { font-weight: 600; font-variant-numeric: tabular-nums; }
.tag span { color: var(--dim); font-weight: 500; }
.tag .px { color: var(--accent); }
.tag.new { left: auto; right: 10px; padding: 7px 11px; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); letter-spacing: 0.06em; text-transform: uppercase; }

/* Built but not open to this player yet: the picture goes dark and drained, with a padlock on it. */
.map.shut .map-art { background-color: #1a2233; background-blend-mode: luminosity; }
.map.shut .map-art::before { content: ''; position: absolute; inset: 0; background: rgba(7, 9, 13, 0.58); }
.bolt { position: absolute; inset: 0 0 18px; display: grid; place-items: center; color: var(--text); filter: drop-shadow(0 2px 0 rgba(7, 9, 13, 0.9)); }
.map.shut .tag { opacity: 0.75; }
.map.shut h3, .map.shut .map-what { color: var(--dim); }
.map.shut h3 span { color: inherit; }
.map.shut .map-history { color: var(--text); font-weight: 600; }
/* Not built yet: an empty place, waiting. */
.map.locked { flex-direction: row; align-items: center; gap: 16px; min-height: 96px; padding: 16px 18px; background: none; border-style: dashed; border-color: var(--hair-2); backdrop-filter: none; }
.slot { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid var(--hair-2); border-radius: 10px; color: var(--dim); }
.map.locked .map-body { flex: 1; gap: 4px; padding: 0; }
.map.locked h3 { font: 600 15px/1.3 var(--sans); letter-spacing: 0; color: var(--dim); }
.map.locked .map-what { font: 400 14px/1.4 var(--sans); color: var(--dim); }
/* A text message: pictures and amounts, no words. */
.sms { display: inline-flex; flex-wrap: wrap; gap: 6px 16px; padding: 9px 15px; background: var(--raise); border: 1px solid var(--line); border-radius: 17px 17px 17px 5px; font: 600 17px/1.3 var(--sans); font-style: normal; white-space: nowrap; }
.pocket-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0 0; font-size: 14px; color: var(--dim); }
.pocket-note .sms { color: var(--text); }

.opened { font: 600 16px/1.4 var(--sans); color: var(--accent); margin: 0 0 12px; }

/* Who the player is: the characters stand on a small stage. Whoever is chosen is
   in the light, with a pointer over their head. The rest wait in the dark. */
.cast { position: relative; display: flex; justify-content: center; gap: clamp(4px, 3vw, 28px); padding: 34px 12px 0; overflow: hidden; border: 1px solid var(--hair); border-radius: 12px; background: linear-gradient(#080b12, #0e1522 82%); transition: border-color 0.2s ease; }
.cast::after { content: ''; position: absolute; inset: auto 0 0 0; height: 32px; background: linear-gradient(#2a3345 0 2px, #161c29 2px 100%); }
.cast.nudge { border-color: var(--accent); }
.who-card { position: relative; z-index: 1; display: grid; justify-items: center; }
.who-card.chosen::before { content: ''; position: absolute; inset: -34px -22px 32px; background: radial-gradient(50% 60% at 50% 44%, rgba(240, 180, 60, 0.22), rgba(240, 180, 60, 0) 72%); pointer-events: none; }
.who { position: relative; display: grid; justify-items: center; padding: 0 8px; background: none; border: 0; border-radius: 10px; color: var(--dim); cursor: pointer; }
.figure { position: relative; display: block; width: 92px; min-height: 120px; }
.figure img { position: absolute; left: 50%; bottom: 0; display: block; max-width: none; image-rendering: pixelated; font-size: 13px; filter: brightness(0.42) saturate(0.4); transition: filter 0.2s ease; }
.who:hover .figure img, .cast.undecided .figure img { filter: brightness(0.8) saturate(0.85); }
.cast.undecided .who:hover .figure img { filter: none; }
.who-card.chosen .figure img { filter: none; }
.who .bars { height: 32px; min-width: 0; }
.who .bars i.on { background: var(--accent); }
.who-card.chosen .bars { color: var(--text); }
.pointer { position: absolute; left: 50%; top: -24px; margin-left: -7px; color: var(--accent); visibility: hidden; }
.who-card.chosen .pointer { visibility: visible; animation: hover 1s steps(2, jump-none) infinite; }
@keyframes hover { 50% { transform: translateY(3px); } }
/* What the chosen one is wearing, with a square for each thing they could wear. */
.outfit { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; }
.arrow { display: grid; place-items: center; width: 44px; height: 44px; flex: none; background: var(--glass-2); border: 1px solid var(--hair); border-radius: 50%; color: var(--text); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; }
.arrow:hover { border-color: var(--accent); color: var(--accent); }
.wearing { display: grid; justify-items: center; gap: 7px; min-width: 8.5em; }
.wear { font: 600 15px/1 var(--sans); }
.pips { display: flex; gap: 5px; }
.pips i { width: 6px; height: 6px; background: var(--hair-2); }
.pips i.on { background: var(--accent); }

/* The colours for the talking: a pill for each with a scrap of it at its head,
   and under them a sample in whichever is picked. */
.looks { display: flex; flex-wrap: wrap; gap: 8px; }
.look { padding-left: 11px; }
.swatch { width: 18px; height: 18px; flex: none; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 5px; background: linear-gradient(var(--accent) 0 0) right 3px bottom 3px / 6px 6px no-repeat, var(--panel); }
.preview { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 12px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; color: var(--text); transition: background 0.2s ease, border-color 0.2s ease; }
.preview .bubble { cursor: default; }
.preview .bubble.mine { margin-left: auto; }
.preview .bars { height: 24px; }
/* What the player carries between maps, and the way to put it all down. */
.kit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hair); }
.headline { font: 600 clamp(34px, 5vw, 52px)/1.04 var(--serif); letter-spacing: -0.02em; margin: 0; max-width: 18em; }
.lede { font: 400 20px/1.5 var(--serif); margin: 0 0 14px; max-width: 34em; }
.sheet .small { font-size: 14px; color: var(--dim); max-width: 52ch; margin: 0 0 12px; }
.sheet .picked { margin-top: 26px; }
.sheet .actions { margin: 22px 0 18px; align-items: center; }
.voice { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.voice + .small { margin-top: 22px; }
.voice .btn[aria-pressed='true'] { border-color: var(--accent); background: var(--raise-2); }
.recap { margin: 0 0 6px; padding: 0; list-style: none; }
.recap li { font: 400 18px/1.45 var(--serif); padding: 9px 0; border-top: 1px solid var(--line); }
.recap li:last-child { border-bottom: 1px solid var(--line); }
.sounds { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }

@media (min-width: 900px) and (min-height: 541px) {
  .sheet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(32px, 5vw, 72px); align-content: start; }
  .sheet .col > :first-child { margin-top: 0; }
  .hub-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0 clamp(36px, 6vw, 84px); align-items: start; }
  .hub.fresh .setup { order: 0; }
}

/* The globe: the first thing a player sees. The sky and the Earth fill the window.
   The name of the game, a name beside each light, and the card for a place that
   has been picked float over them and let touches through to the Earth, except
   where there is something to press. Behind the page of maps only the sky is left. */

#atlas {
  --line: #2a2f3a;
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 60%, #101826 0%, #0a0e16 45%, #07090d 100%);
  color: var(--text);
  user-select: none;
}
#atlas > * { transition: opacity 0.5s ease-out; }
#atlas.receded > :not(.sky) { opacity: 0; transition: opacity 0.7s ease-in; }
.sky { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.earth { position: absolute; left: 0; top: 0; display: block; image-rendering: pixelated; touch-action: none; cursor: grab; }
.pins { position: absolute; left: 0; top: 0; pointer-events: none; }

/* The name of the game sits exactly where it does on the page of maps. */
.mark {
  position: absolute;
  inset: 0 0 auto 0;
  padding: var(--edge-top) var(--edge-right) 44px var(--edge-left);
  background: linear-gradient(rgba(7, 9, 13, 0.62), rgba(7, 9, 13, 0));
  text-shadow: 0 2px 22px rgba(7, 9, 13, 0.85);
  pointer-events: none;
}
.mark .word { margin-left: clamp(8px, 1.4vw, 18px); padding: 6px 10px; color: var(--accent); font: 400 clamp(26px, 4.7vw, 49px)/1 var(--script); }
.mark .say { text-shadow: inherit; pointer-events: auto; }
.mark .tagline { transition: opacity 0.3s ease; }
.at-place .mark .tagline { opacity: 0; }
.resume { position: absolute; right: var(--edge-right); top: var(--edge-top); text-shadow: none; pointer-events: auto; }
.at-place .resume { display: none; }

.place {
  position: absolute;
  left: 0;
  top: 0;
  padding: 6px 10px 6px 9px;
  background: rgba(12, 16, 24, 0.86);
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--text);
  font: 600 14px/1 var(--sans);
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
}
.place::before { content: ''; position: absolute; left: -9px; bottom: -9px; width: 12px; height: 2px; background: var(--accent); transform: rotate(-40deg); transform-origin: 100% 50%; }
.place:hover { background: var(--accent); color: var(--accent-ink); }
.at-place .place { display: none; }

/* The place that has been picked: beside the Earth on a wide window, under it on a tall one. */
.place-card {
  position: absolute;
  right: clamp(16px, 7vw, 110px);
  top: 52%;
  transform: translateY(-50%);
  width: min(370px, 40vw);
  padding: 22px 22px 20px;
  background: rgba(12, 16, 24, 0.9);
  border: 1px solid var(--line);
  border-radius: 16px;
  backdrop-filter: blur(6px);
  user-select: text;
}
.place-card .where { font: 600 12px/1.3 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); margin: 0 0 8px; }
.place-card h2 { font: 600 42px/1 var(--serif); letter-spacing: -0.02em; margin: 0 0 12px; }
.place-card h2 span { display: block; font: 400 18px/1.3 var(--script); letter-spacing: 0; color: var(--accent); margin-top: 8px; }
.place-card .about { font: 400 17px/1.5 var(--serif); margin: 0 0 20px; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }

.hint { position: absolute; inset: auto 0 0 0; margin: 0; padding: 6px var(--edge-right) max(18px, env(safe-area-inset-bottom)) var(--edge-left); text-align: center; font-size: 14px; color: var(--dim); text-shadow: 0 1px 10px rgba(7, 9, 13, 0.9); pointer-events: none; }
.at-place .hint { visibility: hidden; }

/* The notebook: a pad from the player's pocket. Always paper, whatever the panel is. */

#notebook {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  justify-items: center;
  align-items: start;
  padding: clamp(14px, 4vh, 48px) 14px;
  background: rgba(10, 8, 6, 0.74);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.pad {
  --ink: #2b241b;
  --faint: #7a6d59;
  --rule: #d9cdb1;
  --pen: #a8392b;
  position: relative;
  width: min(100%, 620px);
  padding: 44px clamp(18px, 5vw, 38px) 26px;
  background:
    radial-gradient(circle at 50% 14px, #14110e 0 5px, transparent 5.5px) 0 0 / 34px 28px repeat-x,
    radial-gradient(circle, rgba(43, 36, 27, 0.13) 1px, transparent 1.4px) 0 6px / 18px 18px,
    #f1e8d4;
  border-radius: 4px 4px 10px 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  color: var(--ink);
  color-scheme: light;
}
.pad h2 { font: 600 34px/1 var(--serif); letter-spacing: -0.02em; margin: 0 0 4px; }
.pad h3 { font: 600 13px/1.3 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin: 26px 0 0; padding-bottom: 8px; border-bottom: 1.5px solid var(--ink); }
.pad .shut { position: absolute; right: clamp(14px, 4vw, 30px); top: 38px; padding: 9px 13px; background: none; border: 1.5px solid var(--ink); border-radius: 8px; font: 600 14px/1 var(--sans); cursor: pointer; }
.pad .shut:hover { background: var(--ink); color: #f1e8d4; }
.pad :focus-visible { outline-color: var(--pen); }
.entry { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 4px 18px; align-items: start; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.ink { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 44px; padding: 7px 10px; background: rgba(43, 36, 27, 0.06); border: 1px solid var(--rule); border-radius: 9px; cursor: pointer; }
.ink:hover { background: rgba(43, 36, 27, 0.11); }
.ink .who { font-size: 12px; color: var(--faint); text-align: left; }
.ink .bars { height: 24px; max-width: 100%; overflow: hidden; }
.ink .bars i { width: 2.5px; flex: none; }
.ink .bars i.on { background: var(--pen); }
.entry p { margin: 0; }
.entry .text { display: grid; gap: 3px; justify-items: start; padding-top: 2px; }
.entry .means { font: 400 20px/1.25 'Sriracha', var(--serif); }
.entry .means.unsure { font: italic 400 16px/1.35 var(--serif); color: var(--faint); }
.entry .memo { font: italic 400 15px/1.35 var(--serif); color: var(--faint); }
.entry .count { font: 500 12px/1.3 var(--sans); color: var(--faint); }
.find { margin-top: 5px; padding: 7px 0; text-align: left; background: none; border: 0; color: var(--pen); font: 600 14px/1.2 var(--sans); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.find:disabled { opacity: 0.45; cursor: default; }
.foot-note { margin: 18px 0 0; font: italic 400 14px/1.4 var(--serif); color: var(--faint); max-width: 48ch; }

/* Smaller screens. Three shapes:
   wide and tall (desktop, tablet): street above, conversation and choices side by side.
   narrow (phone held upright):     street above, conversation, then choices.
   short and wide (phone on its side): street on the left, everything else on the right. */

#prompts { position: absolute; inset: 0; pointer-events: none; }
#prompts .prompt { pointer-events: auto; }
body { touch-action: manipulation; }
#hud { padding-left: max(22px, env(safe-area-inset-left)); padding-right: max(22px, env(safe-area-inset-right)); padding-top: max(14px, env(safe-area-inset-top)); }
#feed, #tray { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
.foot, .help { padding-bottom: max(14px, env(safe-area-inset-bottom)); }

@media (pointer: coarse) {
  .prompt { font-size: 15px; padding: 12px 14px; }
  .btn.quiet { padding: 13px 0; }
  .chip { min-height: 44px; }
  .bubble { min-height: 44px; }
  .cash { height: 46px; min-width: 70px; }
  .cash.coin { min-width: 46px; }
  .place { padding: 11px 13px 11px 12px; }
}

@media (max-width: 760px) {
  #app { grid-template-rows: minmax(0, 36fr) minmax(0, 64fr); }
  #panel { grid-template-columns: 1fr; grid-template-rows: minmax(0, 32%) minmax(0, 1fr); }
  .group { margin-bottom: 14px; }
  .chip { padding: 7px 11px 7px 9px; font-size: 14px; }
  .chip .memo { font-size: 13px; }
  .hud-carry { min-width: 0; }
  #feed { border-right: 0; border-bottom: 1px solid var(--line); gap: 10px; }
  #feed, #tray { padding: 12px 16px 16px; }
  #tray { padding-bottom: 0; }
  #hud { gap: 14px; padding: max(10px, env(safe-area-inset-top)) 14px 30px; }
  #clock { font-size: 26px; }
  #cash { font-size: 20px; margin-top: 3px; }
  #ticks { gap: 2px; }
  #ticks i { width: 4px; height: 12px; }
  #ticks i.gate { margin-left: 4px; }
  #carry { max-width: 20ch; font-size: 12px; }
  .hud-label { font-size: 12px; margin-bottom: 6px; }
  .note { font-size: 16px; }
  .cue { font-size: 15px; }
  .sheet { min-height: 64vh; min-height: calc(64dvh + 1px); padding-top: 18px; }
  :root { --edge-top: max(22px, env(safe-area-inset-top)); }
  .hub-head { margin-bottom: 22px; }
  .map-body { padding: 4px 16px 16px; }
  .board { padding: 16px 16px 18px; }
  .lede { font-size: 17px; }
  .entry { grid-template-columns: 104px minmax(0, 1fr); gap: 4px 12px; }
  .entry .means { font-size: 18px; }
  .pad h2 { font-size: 28px; }
}

/* On a tall or narrow window the card for a place goes under the Earth, and the
   way back in goes under the name of the game. */
@media (max-width: 820px), (orientation: portrait) {
  .place-card { inset: auto 12px max(12px, env(safe-area-inset-bottom)) 12px; transform: none; width: auto; max-width: 460px; margin: 0 auto; padding: 18px 18px 16px; }
  .place-card h2 { font-size: 34px; }
  .place-card .about { font-size: 16px; margin-bottom: 16px; }
}
@media (max-width: 560px) {
  .resume { position: static; margin-top: 14px; }
  .to-world { padding: 3px; }
  .to-world span { display: none; }
  /* The way back out is only a small Earth here, so the heading can run closer to it. */
  .hub .title { padding-right: 52px; }
}

@media (max-height: 540px) and (min-width: 600px) {
  #app { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); }
  #panel { grid-template-columns: 1fr; grid-template-rows: minmax(0, 36%) minmax(0, 1fr); border-top: 0; border-left: 1px solid var(--line); }
  #feed { border-right: 0; border-bottom: 1px solid var(--line); gap: 8px; }
  #feed, #tray { padding: 10px 14px 12px; }
  #feed { padding-left: 14px; }
  #tray { padding-bottom: 0; padding-right: max(14px, env(safe-area-inset-right)); }
  #hud { gap: 12px; padding: 8px 12px 26px max(12px, env(safe-area-inset-left)); }
  #clock { font-size: 24px; }
  #deadline, .hud-label, #carry { font-size: 11px; }
  .hud-label { margin-bottom: 5px; }
  #cash { font-size: 18px; margin-top: 2px; }
  #ticks { gap: 2px; }
  #ticks i { width: 3px; height: 10px; }
  #ticks i.gate { margin-left: 3px; }
  #carry { max-width: 18ch; }
  .group { margin-bottom: 10px; }
  .tray-h { margin-bottom: 7px; }
  .chip { padding: 6px 10px 6px 8px; font-size: 14px; }
  .chip .memo { font-size: 13px; }
  .note, .cue { font-size: 15px; }
  .btn { padding: 10px 13px; }
  #overlay { flex-direction: row; overflow: hidden; }
  .marquee { flex: 0 0 54%; min-height: 0; padding: 14px 16px 16px max(16px, env(safe-area-inset-left)); }
  .sheet { flex: 1 1 0; min-width: 0; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 14px max(16px, env(safe-area-inset-right)) 16px 16px; border-top: 0; border-left: 1px solid var(--line); }
  .sheet.pin .actions { position: sticky; bottom: -16px; z-index: 1; flex-wrap: nowrap; gap: 14px; margin: 12px 0 10px; padding: 10px 0 max(16px, env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--line); }
  .sheet.pin .actions .btn { flex: none; }
  .sheet.pin .actions .btn.quiet { flex: 0 1 auto; padding: 0; text-align: left; line-height: 1.25; }
  :root { --edge-top: 16px; --edge-left: max(18px, env(safe-area-inset-left)); --edge-right: max(18px, env(safe-area-inset-right)); }
  .hub { padding-bottom: 18px; }
  .mark .word { font-size: 24px; }
  .place-card { inset: 50% var(--edge-right) auto auto; transform: translateY(-50%); width: min(320px, 44vw); max-width: none; margin: 0; padding: 14px 16px; }
  .place-card h2 { font-size: 28px; }
  .place-card .about { font-size: 15px; margin-bottom: 12px; }
  .hub-head { margin-bottom: 16px; padding-bottom: 14px; }
  .hub-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0 28px; align-items: start; }
  .hub.fresh .setup { order: 0; }
  .map-art { height: 104px; }
  .say { font-size: 24px; }
  .say .bars { height: 20px; }
  .tagline { font-size: 15px; margin-top: 8px; }
  .title { font-size: 64px; }
  .lede { font-size: 16px; }
  .headline { font-size: 30px; }
  #notebook { padding: 10px max(14px, env(safe-area-inset-left)); }
  .pad { width: min(100%, 760px); }
}

@media (prefers-reduced-motion: reduce) {
  .smoke, .coals, .beacon, .train, .walking svg, .walking .leg, .happy .tail, .hub.arriving { animation: none; }
  #atlas > *, .mark .tagline, .hub { transition: none; }
  #feed { scroll-behavior: auto; }
}