/* The look of everything around the picture: small pixel cards with a dark outline and notched corners, like a sign in a game.
   --u is set by main.js, so the interface scales with the view; --f is the size of the writing, --px the size of one pixel of outline. */
:root {
  --ink: #2b2430; --paper: #fbf5e6; --muted: #7c7064; --red: #d8432c; --gold: #f6cf6a; --sea: #2a9ad2;
  --u: 3px; --f: clamp(14px, calc(var(--u) * 6.2), 26px); --px: max(2px, calc(var(--u) * .84));
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { position: fixed; inset: 0; margin: 0; overflow: hidden; background: #2a9ad2; overscroll-behavior: none; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#paint { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; image-rendering: pixelated; }
#gridtool { position: fixed; left: 0; top: 0; z-index: 1; cursor: crosshair; touch-action: none; }
#gridtool[hidden] { display: none; }
.ic { display: inline-block; vertical-align: middle; flex: none; }
#ui { position: fixed; inset: 0; pointer-events: none; color: var(--ink); font-family: 'DotGothic16', ui-monospace, Menlo, Consolas, Georgia, serif; font-size: var(--f); font-weight: 400; line-height: 1.28; z-index: 2; }
#ui [hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }

/* the card */
.box, .btn {
  background: var(--paper);
  margin: var(--px);
  padding: calc(var(--u) * 1.6) calc(var(--u) * 3.6);
  box-shadow: 0 calc(var(--px) * -1) 0 var(--ink), 0 var(--px) 0 var(--ink), calc(var(--px) * -1) 0 0 var(--ink), var(--px) 0 0 var(--ink), 0 calc(var(--px) * 2) 0 rgba(20, 16, 30, .34);
}
.btn { pointer-events: auto; padding: calc(var(--u) * 1.4) calc(var(--u) * 5); }
.btn:hover, .btn:focus-visible { background: var(--gold); outline: none; }
.btn:active { transform: translateY(var(--px)); box-shadow: 0 calc(var(--px) * -1) 0 var(--ink), 0 var(--px) 0 var(--ink), calc(var(--px) * -1) 0 0 var(--ink), var(--px) 0 0 var(--ink); }
.btn[disabled] { color: var(--muted); background: var(--paper); cursor: default; }
.btn.small { padding: calc(var(--u) * .7) calc(var(--u) * 2.6); font-size: .9em; }
.muted { color: var(--muted); }
/* the smallest writing never goes under 11 pixels, however small the window (the audit of 10 November, 3.4): hence the max() on small sizes */
.gap { display: flex; align-items: center; gap: calc(var(--u) * 2.4); }


/* ---------- on the road ---------- */
#side { position: fixed; top: calc(var(--u) * 3); right: calc(var(--u) * 3); display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * .4); }
#minimap { display: block; width: calc(var(--u) * 78); height: calc(var(--u) * 78); image-rendering: pixelated; pointer-events: auto; cursor: pointer; }
#clock { align-self: center; margin-top: calc(var(--u) * -3); padding: calc(var(--u) * .4) calc(var(--u) * 2.2); gap: calc(var(--u) * 2.2); font-size: .84em; white-space: nowrap; position: relative; }
#tools { padding: calc(var(--u) * .6) calc(var(--u) * 2); gap: calc(var(--u) * 1.2); flex-wrap: wrap; justify-content: flex-end; max-width: calc(var(--u) * 86); }
/* each button under the small map says its key underneath */
#tools .btn { display: flex; flex-direction: column; align-items: center; line-height: 1.12; }
.btn .key { display: block; margin: 0; font-size: max(.66em, 11px); line-height: 1.05; color: var(--muted); }
.btn.on .key { color: inherit; opacity: .7; }
/* before the game has begun there's nothing to count and nothing to press. And while the title card's up as the game loads, only the picture shows */
#ui.prologue #purse, #ui.prologue #tools, #ui.prologue #bagcard { display: none; }
#ui.titled > :not(.veil) { visibility: hidden; }
#ui.titled #panelveil { background: rgba(30, 24, 40, .32); justify-items: start; padding-left: 6vw; }
@media (max-aspect-ratio: 1/1) { #ui.titled #panelveil { justify-items: center; align-items: end; padding-left: calc(var(--u) * 3); } }
#purse { padding: calc(var(--u) * .5) calc(var(--u) * 2.4); gap: calc(var(--u) * 1.4); font-size: .9em; }
.pix { display: block; flex: none; image-rendering: pixelated; width: calc(var(--u) * 11); height: auto; }
.pix.small { width: calc(var(--u) * 7.4); }
#bagcard { position: fixed; top: calc(var(--u) * 4); left: calc(var(--u) * 4); max-width: min(calc(var(--u) * 150), 50vw); padding: calc(var(--u) * 1.2) calc(var(--u) * 2.4); pointer-events: auto; cursor: pointer; }
.slots { display: flex; align-items: flex-start; gap: calc(var(--u) * 1.6); --rc: calc(var(--u) * 10); }
.slot { width: var(--rc); height: var(--rc); background: rgba(43, 36, 48, .1); display: grid; place-items: center; }
.slot .pix { width: calc(var(--rc) * .8); }
.slot.on { background: var(--gold); }
.slot.blue { background: rgba(63, 111, 176, .22); margin-left: calc(var(--u) * 1); }
/* a vehicle's room, small: each place as a little grid of boxes */
.room { display: flex; align-items: flex-start; gap: calc(var(--u) * 1.6); --rc: calc(var(--u) * 3.4); }
.roomgrid { display: grid; gap: max(1px, calc(var(--px) * .5)); }
.roomgrid i { width: var(--rc); height: var(--rc); background: rgba(255, 252, 244, .9); box-shadow: inset 0 0 0 max(1px, calc(var(--px) * .5)) var(--ink); }
.roomgrid b { display: grid; place-items: center; box-shadow: inset 0 0 0 max(1px, calc(var(--px) * .5)) var(--ink); }
.roomgrid b.seat { background: rgba(63, 111, 176, .22); }
.roomgrid b .pix.small { width: calc(var(--rc) * .78); }
.slots .room { --rc: calc(var(--u) * 10); gap: calc(var(--u) * 1.6); }
.slots .roomgrid { gap: calc(var(--u) * .6); }
.slots .roomgrid i { background: rgba(43, 36, 48, .1); box-shadow: none; }
.roomline { align-items: center; justify-content: center; }
.roomline .room { --rc: calc(var(--u) * 6); gap: calc(var(--u) * 3.5); }
.roomplace { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .4); }
.roomplace small { font-size: max(.7em, 11px); }
.slot.top { margin-left: calc(var(--u) * 1); outline: max(2px, var(--px)) dashed var(--ink); outline-offset: calc(var(--px) * -1.5); }
.list { margin-top: calc(var(--u) * 1); display: flex; flex-direction: column; gap: calc(var(--u) * .8); font-size: .8em; line-height: 1.16; }
.list:empty { display: none; }
.addr { display: flex; align-items: flex-start; gap: calc(var(--u) * 1.4); }
.addr.lead { background: var(--gold); box-shadow: 0 0 0 calc(var(--u) * .7) var(--gold); }
/* with a lot aboard, only the address you're going to next is written out */
.list .brief, .list.many .addr:not(.lead) .whole { display: none; }
.list.many .addr:not(.lead) .brief { display: inline; }
.chip { flex: none; padding: calc(var(--u) * .4); box-shadow: 0 0 0 max(1px, calc(var(--px) * .5)) var(--ink); }
.far { flex: none; font-weight: 400; white-space: nowrap; }
.tag { position: fixed; left: 0; top: 0; padding: 0 calc(var(--u) * 1.6); font-size: max(.78em, 11px); line-height: 1.34; white-space: nowrap; color: var(--ink); box-shadow: 0 calc(var(--px) * -1) 0 var(--ink), 0 var(--px) 0 var(--ink), calc(var(--px) * -1) 0 0 var(--ink), var(--px) 0 0 var(--ink); will-change: transform; }
.words { display: flex; flex-direction: column; min-width: 0; flex: 1; text-align: left; }
.next { color: var(--muted); }
.meters { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }
.meters i { display: block; height: max(2px, calc(var(--u) * .7)); background: var(--sea); }
.meters i.care { background: #4f9e5b; }
.meters i.care.low { background: var(--red); }
#sign { position: fixed; right: calc(var(--u) * 4); bottom: calc(var(--u) * 24); padding: calc(var(--u) * 1) calc(var(--u) * 2.6); font-size: .84em; line-height: 1.2; }
.way { display: flex; align-items: center; gap: calc(var(--u) * 1.6); padding: 1px 0; }
.arr { display: block; flex: none; width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); background: var(--red); clip-path: polygon(100% 50%, 30% 0, 30% 30%, 0 30%, 0 70%, 30% 70%, 30% 100%); }
.bubble { position: fixed; left: 0; top: 0; margin: 0; max-width: min(calc(var(--u) * 118), 70vw); padding: calc(var(--u) * 1) calc(var(--u) * 2.6); font-size: .92em; line-height: 1.22; z-index: 3; will-change: transform; }
.bubble b { display: block; font-weight: 400; font-size: .82em; color: var(--red); }
.bubble span { display: block; min-height: 1.2em; }
.bubble i { position: absolute; left: 50%; bottom: calc(var(--px) * -2.6); width: calc(var(--px) * 2); height: calc(var(--px) * 2); margin-left: calc(var(--px) * -1); background: var(--paper); box-shadow: calc(var(--px) * -1) 0 0 var(--ink), var(--px) 0 0 var(--ink), 0 var(--px) 0 var(--ink); }
.bubble .go { display: block; margin-top: 2px; font-size: max(.74em, 11px); color: var(--muted); text-align: right; animation: blink 1s steps(2, end) infinite; }
@keyframes blink { 50% { opacity: .35; } }
#seal { position: fixed; left: 50%; top: 30%; transform: translateX(-50%); padding: calc(var(--u) * 1.4) calc(var(--u) * 3.6); white-space: nowrap; animation: float-in .2s steps(3, end); }
#seal .words { font-size: .92em; line-height: 1.2; }
#seal small { font-size: max(.78em, 11px); }
/* the stickers: a picture with a white edge, the camera's button, and the flash */
.stickerimg { display: block; flex: none; width: calc(var(--u) * 26); height: calc(var(--u) * 26); image-rendering: pixelated; box-shadow: 0 0 0 calc(var(--px) * 1.2) #fff, 0 0 0 calc(var(--px) * 1.7) var(--ink); }
#seal .stickerimg { margin: calc(var(--px) * 1.4); }
#photoprompt { position: fixed; left: 50%; bottom: calc(var(--u) * 22); transform: translateX(-50%); display: flex; align-items: center; gap: calc(var(--u) * 1.6); white-space: nowrap; z-index: 2; }
#photoprompt:active { transform: translateX(-50%) translateY(var(--px)); }
/* while a card's open (prompt 20), the door prompt and anybody's chat keep out of the way */
.carded #doorprompt, .carded .bubble.chat { display: none; }
#doorprompt { position: fixed; left: 50%; bottom: calc(var(--u) * 22); transform: translateX(-50%); display: flex; align-items: center; gap: calc(var(--u) * 1.6); white-space: nowrap; z-index: 2; }
#doorprompt.above { bottom: calc(var(--u) * 31); }
#doorprompt:active { transform: translateX(-50%) translateY(var(--px)); }
#flash { position: fixed; inset: 0; background: #fff; pointer-events: none; z-index: 5; animation: flash .3s steps(5, end) both; }
@keyframes flash { from { opacity: .95; } to { opacity: 0; } }
/* your helmet */
#panelveil .panel.helmetpanel { width: min(calc(var(--u) * 206), 94vw); max-width: 94vw; gap: calc(var(--u) * 1.6); }
.helmetwrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: calc(var(--u) * 4); width: 100%; }
.helmetleft { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .6); }
#helmetview { display: block; width: calc(var(--u) * 108); height: calc(var(--u) * 108); image-rendering: pixelated; pointer-events: auto; touch-action: none; cursor: grab; }
#helmetview:active { cursor: grabbing; }
.helmetright { display: flex; flex-direction: column; gap: calc(var(--u) * 2); flex: 1 1 calc(var(--u) * 84); max-width: calc(var(--u) * 124); }
.stickergrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 1); }
.stickertile { display: grid; place-items: center; aspect-ratio: 1; background: rgba(43, 36, 48, .08); color: var(--muted); pointer-events: auto; }
.stickertile img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.stickertile.on { box-shadow: 0 0 0 var(--px) var(--red); }
.stickerlook { display: flex; align-items: center; gap: calc(var(--u) * 3); text-align: left; min-height: calc(var(--u) * 30); }
.stickerlook .stickerimg { margin-left: calc(var(--px) * 1.8); }
.stickerlook .words small { margin-top: calc(var(--u) * .6); }
.gatebook { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .8); }
.gatebook .gap { gap: calc(var(--u) * 1); justify-content: center; }
#thanks { position: fixed; right: calc(var(--u) * 86); top: calc(var(--u) * 4); padding: calc(var(--u) * 1.2) calc(var(--u) * 2.6); animation: slide-in .22s steps(4, end); }
#thanks .gap { gap: calc(var(--u) * 1.6); }
.stampcell { display: flex; flex-direction: column; align-items: center; font-size: max(.7em, 11px); animation: stamp-down .24s steps(3, end) both; animation-delay: var(--at); }
.stampcell.none { color: var(--muted); animation: none; }
.sum { justify-content: flex-end; margin-top: calc(var(--u) * .6); font-size: .9em; }
@keyframes stamp-down { from { opacity: 0; transform: scale(2.2); } to { opacity: 1; transform: scale(1); } }
@keyframes slide-in { from { transform: translateX(calc(var(--u) * 20)); opacity: 0; } }
#fade { position: fixed; inset: 0; background: #1c1824; opacity: 0; transition: opacity .35s steps(6, end); pointer-events: none; z-index: 5; }
#fade.on { opacity: 1; }
#catcher { position: fixed; inset: 0; pointer-events: auto; z-index: 6; }
/* the cards */
.rows { display: flex; flex-direction: column; gap: calc(var(--u) * .8); width: 100%; }
.row { display: flex; align-items: center; gap: calc(var(--u) * 1.8); width: 100%; padding: calc(var(--u) * .9) calc(var(--u) * 1.6); text-align: left; background: rgba(43, 36, 48, .06); font-size: .86em; line-height: 1.16; pointer-events: auto; }
button.row:hover { background: var(--gold); }
.row.on { background: rgba(246, 207, 106, .7); }
.row .num { color: var(--muted); }
.row .state { color: var(--muted); white-space: nowrap; }
.row small { font-size: max(.82em, 11px); }
.pips { justify-content: center; }
.pip { display: block; width: calc(var(--u) * 5); height: calc(var(--u) * 4); background: rgba(43, 36, 48, .14); }
.pip.on { background: var(--red); }
.waiting { text-align: center; }
.nexts { display: flex; flex-direction: column; align-items: center; font-size: .9em; }
.paper { background: #fffaf0; padding: calc(var(--u) * 2.4) calc(var(--u) * 4); box-shadow: 0 0 0 var(--px) rgba(43, 36, 48, .18); text-align: left; max-width: 100%; }
.paper p { margin: 0 0 calc(var(--u) * 1.2); }
.paper p:last-child { margin: 0; text-align: right; }
.paper.list p, .paper.list p:last-child { margin: 0 0 calc(var(--u) * .7); text-align: left; }
.blueline { color: #3f6fb0; letter-spacing: .04em; }
/* every letter in somebody's own hand, and none of them neat */
.paper.hands { max-height: 62vh; overflow-y: auto; }
.paper.hands p:nth-child(4n+1) { color: #2b2430; transform: skewX(-4deg); }
.paper.hands p:nth-child(4n+2) { color: #6b3f1f; transform: skewX(5deg); }
.paper.hands p:nth-child(4n+3) { color: #274f7a; transform: skewX(-8deg); }
.paper.hands p:nth-child(4n) { color: #7a2a2a; transform: skewX(3deg); }
.bigline { color: #d8432c; font-size: 1.4em; margin: calc(var(--u) * 1.4) 0; }
#panelveil .panel.postbox, #panelveil .panel.bagpanel { width: min(calc(var(--u) * 190), 92vw); }
/* the bag: with a full van it's taller than the screen, so what's in it scrolls, and the switches and the way out stay put at the bottom */
#panelveil .panel.bagpanel { overflow: hidden; }
.bagbody { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2.4); width: 100%; flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.bagfoot { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.4); width: 100%; flex: none; padding-top: calc(var(--u) * 1.8); border-top: max(1px, calc(var(--px) * .5)) solid rgba(43, 36, 48, .2); }
.bagbody > *, .bagfoot > * { flex: none; }
/* the shed stays to one side, with the picture showing, so you can see the paint on Biscuit */
#panelveil.aside { justify-items: end; background: rgba(30, 24, 40, .12); }
#panelveil .panel.shedpanel { width: min(calc(var(--u) * 142), 92vw); gap: calc(var(--u) * 1.6); overflow: hidden; }
/* if the shed is ever taller than the screen, only its middle scrolls: Genzo, your coins and the way out always show */
.shedpanel > .rows { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* the vehicle's name and the arrows stay in sight while the rest scrolls (prompt 20) */
.shedpanel .shedhead { position: sticky; top: 0; z-index: 1; background: var(--paper); padding-bottom: calc(var(--u) * .6); }
.shedrow { min-height: calc(var(--u) * 13); }
.quip { min-height: 2.3em; }
.pips.left { justify-content: flex-start; gap: calc(var(--u) * .8); margin: calc(var(--u) * .4) 0; }
.btn.price { display: flex; align-items: center; gap: calc(var(--u) * 1); }
.btn.price[disabled] { opacity: .55; }
.shedrow.colours { gap: .6em; }
.swatchname { flex: none; width: 5.2em; text-align: left; }
.shedrow .swatches { flex: 1; justify-content: flex-start; gap: .4em; padding-left: max(3px, var(--px)); }
.swatch { position: relative; width: calc(var(--u) * 10.5); height: calc(var(--u) * 10.5); pointer-events: auto; box-shadow: 0 0 0 max(1px, calc(var(--px) * .5)) var(--ink); }
.swatch i { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; }
.swatch small { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 1; margin: 0 !important; font-size: max(.74em, 11px); line-height: 1.1; text-align: center; color: var(--ink); background: rgba(251, 245, 230, .84); }
.swatch small.muted { color: var(--muted); }
.swatch.on { box-shadow: 0 0 0 max(1px, calc(var(--px) * .5)) var(--paper), 0 0 0 max(3px, var(--px)) var(--ink); }
.swatch:hover { outline: max(1px, calc(var(--px) * .5)) solid var(--gold); }
@media (max-aspect-ratio: 1/1) {
  #panelveil.aside { justify-items: center; align-items: end; }
  #bagcard { max-width: 62vw; }
  #minimap { width: calc(var(--u) * 66); height: calc(var(--u) * 66); }
  #thanks { right: calc(var(--u) * 4); top: calc(var(--u) * 112); }
  #sign { bottom: auto; top: calc(var(--u) * 112); }
}
.btn.on { background: var(--ink); color: var(--paper); }
#banner { position: fixed; top: 20%; left: 50%; transform: translateX(-50%); white-space: nowrap; animation: sign-in 2.8s steps(14, end) both; padding: calc(var(--u) * 2) calc(var(--u) * 7); font-size: 1.24em; }
@keyframes sign-in { 0% { opacity: 0; transform: translate(-50%, calc(var(--u) * -6)); } 7% { opacity: 1; transform: translate(-50%, 0); } 90% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 0); } }
#note { position: fixed; left: 50%; bottom: calc(var(--u) * 8); transform: translateX(-50%); width: max-content; max-width: 88vw; text-align: center; animation: float-in .25s ease-out; }
#honked { position: fixed; left: 50%; bottom: calc(var(--u) * 32); transform: translateX(-50%); animation: float-in .12s steps(2, end); }
@keyframes float-in { from { opacity: 0; } }
#honk { position: fixed; right: calc(var(--u) * 7); bottom: calc(var(--u) * 7); }
#stickzone { position: fixed; left: 0; bottom: 0; width: 60%; height: 66%; pointer-events: auto; touch-action: none; }
#stick { position: fixed; left: -20px; top: -20px; width: 40px; height: 40px; background: var(--paper); box-shadow: 0 -3px 0 var(--ink), 0 3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink); pointer-events: none; }
#loading { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
#fatal { position: fixed; inset: auto 10% 40% 10%; text-align: center; }
/* over everything, the title card too, which hides the rest of #ui while it's up (0.256v) */
#ui.titled > #fatal { visibility: visible; }
#fatal { z-index: 50; }
.veil { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: auto; padding: calc(var(--u) * 3); background: rgba(30, 24, 40, .46); z-index: 4; }
.panel { max-height: 100%; overflow: hidden auto; overscroll-behavior: contain; padding: calc(var(--u) * 2.4) calc(var(--u) * 5); text-align: center; }
.panel h2 { margin: 0 0 calc(var(--u) * 1.4); font: inherit; font-size: 1.2em; color: var(--red); }
.panel small { display: block; margin-top: calc(var(--u) * 1.2); }
#mapview { display: block; width: min(calc((100vh - var(--u) * 36) * var(--shape)), 88vw); height: auto; aspect-ratio: var(--shape); image-rendering: pixelated; cursor: crosshair; }
#mapview.stations { cursor: pointer; }
#mapview.dragging { cursor: grabbing; }
/* the map's zoom buttons, top right, and its key, bottom left, both over the map */
.mapwrap { position: relative; }
.mapzoom { position: absolute; top: calc(var(--u) * 1.6); right: calc(var(--u) * 1.6); display: flex; flex-direction: column; align-items: stretch; gap: calc(var(--u) * .6); }
.mapzoom .btn { margin: 0; padding: calc(var(--u) * .5) calc(var(--u) * 1.8); font-size: .82em; }
.mapkey { position: absolute; left: calc(var(--u) * 1.6); bottom: calc(var(--u) * 1.6); text-align: left; font-size: max(.76em, 11px); }
.mapkey .keyopen { margin: 0; padding: calc(var(--u) * .9) calc(var(--u) * 1.2); display: flex; flex-direction: column; gap: calc(var(--u) * .2); }
.mapkey .keyhead { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 3); padding: 0 calc(var(--u) * .6) calc(var(--u) * .4); }
.mapkey .keyhead .btn, .mapkey .keyshut { margin: 0; padding: calc(var(--u) * .4) calc(var(--u) * 1.6); font-size: .92em; }
.mapkey .keyrow { padding: calc(var(--u) * .35) calc(var(--u) * .8); gap: calc(var(--u) * 1.4); font-size: 1em; background: none; }
.mapkey .keyrow:hover { background: var(--gold); }
.mapkey .keyrow.off { opacity: .45; text-decoration: line-through; }
.mapkey .keyrow .pix { width: calc(var(--u) * 5.4); }
.mapkey .keyshut, .mapkey.folded .keyopen { display: none; }
.mapkey.folded .keyshut { display: block; }
#mapveil .gap { justify-content: space-between; }
#mapveil .gap .btn { flex: none; white-space: nowrap; }
#panelveil .panel { max-width: min(calc(var(--u) * 190), 92vw); display: flex; flex-direction: column; gap: calc(var(--u) * 2.4); align-items: center; }
#panelveil p { margin: 0; }
#panelveil small { margin: 0; }
.wrap { flex-wrap: wrap; justify-content: center; }
.stack { display: flex; flex-direction: column; align-items: stretch; gap: calc(var(--u) * 1.4); min-width: min(calc(var(--u) * 80), 100%); }
/* ---------- the title card: a big name, the buttons one under another, and the file buttons kept apart at the bottom ---------- */
#panelveil .panel.titlepanel { width: min(calc(var(--u) * 150), 92vw); gap: calc(var(--u) * 1.6); }
.titlepanel h2 { margin: 0; font-size: 1.9em; line-height: 1.1; }
.pix.emblem { width: calc(var(--u) * 20); }
.titlebody { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2); width: 100%; }
.titlebody .setting { width: auto; min-width: min(calc(var(--u) * 80), 100%); }
.titlefiles { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.4); width: 100%; padding-top: calc(var(--u) * 2); border-top: max(1px, calc(var(--px) * .5)) dashed rgba(43, 36, 48, .3); }
.titlefiles small { max-width: calc(var(--u) * 120); line-height: 1.24; }
.btn.cursor { background: var(--gold); }
.titlebody .warn { color: var(--red); }
/* what every key does: the key on the left, in red */
.keylist { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * .7) calc(var(--u) * 3.4); width: 100%; text-align: left; font-size: .88em; line-height: 1.2; }
.keylist b { font-weight: 400; color: var(--red); white-space: nowrap; }
/* ---------- inside a card ---------- */
/* the cards that only ask one or two things are narrower, so their lines wrap evenly */
#panelveil .panel.narrow { width: min(calc(var(--u) * 158), 92vw); }
/* a setting to a strip: what it is on the left, the choice on the right, and a line about it underneath */
.setting { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * .8) calc(var(--u) * 2.4); width: 100%; padding: calc(var(--u) * 1.4) calc(var(--u) * 2.4); background: rgba(43, 36, 48, .06); text-align: left; }
.setting .name { flex: 1 1 auto; }
.setting .choice { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: calc(var(--u) * 1.2); }
#panelveil .setting > small { flex: 1 1 100%; line-height: 1.24; }
.settings { display: flex; flex-direction: column; gap: calc(var(--u) * 1); width: 100%; }
/* a row of the bag: a picture, what it is, and its button on the right */
.row .btn { flex: none; }
.row.pair { justify-content: center; gap: .5em; }
.row.pair .name { margin-left: 1.4em; }
.row.pair .name:first-child { margin-left: 0; }
/* the buttons that are only there for testing, kept apart at the bottom */
.testing { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(var(--u) * 1.2); width: 100%; padding-top: calc(var(--u) * 2.2); border-top: max(1px, calc(var(--px) * .5)) dashed rgba(43, 36, 48, .3); }
#panelveil .testing > small { flex: 1 1 100%; }
/* how it went, at the end: a tile each, gold when you found them all */
.tally { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 1.2); width: 100%; }
.tally > div { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .6); padding: calc(var(--u) * 1.6) calc(var(--u) * .6); background: rgba(43, 36, 48, .06); }
.tally > div.all { background: rgba(246, 207, 106, .6); }
.tally span { white-space: nowrap; font-size: .9em; }
#panelveil .tally small { font-size: max(.72em, 11px); line-height: 1.1; }
/* the cargo card: the vehicle turning on one side, and on the other each place it carries things, laid out flat as a grid of boxes, with every
   parcel drawn whole across the boxes it takes. The picture is just narrow enough for both to fit side by side on a wide screen */
#cargoview { display: block; width: calc(var(--u) * 104); height: calc(var(--u) * 78); image-rendering: pixelated; pointer-events: auto; touch-action: none; cursor: grab; }
#cargoview:active { cursor: grabbing; }
.boxmode #cargoview { width: calc(var(--u) * 84); height: calc(var(--u) * 63); }
.boxmode > .rows { max-width: calc(var(--u) * 190); }
.cargoright { gap: calc(var(--u) * 1.6); }
.cargosay { min-height: 3.9em; }
.cargosay small { font-size: .8em; }
.cargogrids { display: flex; flex-wrap: wrap; align-items: flex-start; gap: calc(var(--u) * 4); --cell: calc(var(--u) * 17); }
.cargoplace { display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.cargogrid { display: grid; gap: calc(var(--u) * 1); }
.cargocell { width: var(--cell); height: var(--cell); pointer-events: auto; background: rgba(43, 36, 48, .08); box-shadow: inset 0 0 0 max(1px, calc(var(--px) * .5)) rgba(43, 36, 48, .35); }
.cargocell.drop { background: #a6e38f; box-shadow: inset 0 0 0 max(2px, var(--px)) #2f7a3a; }
.cargocell.nodrop { background: #f4a593; box-shadow: inset 0 0 0 max(2px, var(--px)) var(--red); }
.cargocell.cursor { outline: max(2px, var(--px)) dashed var(--red); outline-offset: max(1px, calc(var(--px) * .5)); }
/* a parcel, drawn whole: in its colour, with its picture, and a bar for how it's doing if it can break, cool or melt */
.parcelblock { position: relative; display: grid; place-items: center; z-index: 1; pointer-events: auto; cursor: grab; touch-action: none; box-shadow: inset 0 0 0 max(2px, var(--px)) var(--ink); }
.parcelblock .pix.small { width: calc(var(--cell, calc(var(--u) * 17)) * .58 * var(--s, 1)); }
.parcelblock.held { outline: max(2px, var(--px)) solid var(--ink); outline-offset: max(2px, var(--px)); animation: held-bob .9s steps(2, end) infinite; z-index: 2; }
.parcelblock.lifted { opacity: .3; }
.parcelblock.seat { background: rgba(43, 36, 48, .2); cursor: default; }
.parcelblock.small { width: calc(var(--u) * 10); height: calc(var(--u) * 10); flex: none; cursor: default; outline: max(2px, var(--px)) dashed var(--ink); outline-offset: calc(var(--px) * -1.5); }
.parcelblock.small .pix.small { width: calc(var(--u) * 7); }
.parcelmeter { position: absolute; left: 14%; right: 14%; bottom: 10%; height: max(3px, var(--px)); background: rgba(43, 36, 48, .25); }
.parcelmeter b { display: block; height: 100%; background: var(--ink); }
.cargoghost { position: fixed; z-index: 20; pointer-events: none; opacity: .72; cursor: grabbing; box-shadow: inset 0 0 0 max(2px, var(--px)) var(--ink), 0 calc(var(--px) * 3) 0 rgba(20, 16, 30, .3); }
.cargoghost.ok { box-shadow: inset 0 0 0 max(3px, calc(var(--px) * 1.4)) #2f7a3a, 0 calc(var(--px) * 3) 0 rgba(20, 16, 30, .3); }
.cargoghost.no { box-shadow: inset 0 0 0 max(3px, calc(var(--px) * 1.4)) var(--red), 0 calc(var(--px) * 3) 0 rgba(20, 16, 30, .3); }
@keyframes held-bob { 50% { transform: translateY(calc(var(--px) * -1)); } }
/* your room at a glance: a pip for every box, in the colour of what's in it */
.cargopips { display: flex; align-items: flex-start; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * .6); }
.pipgroup { display: grid; gap: max(1px, calc(var(--px) * .5)); }
.pipgroup i { width: calc(var(--u) * 3.8); height: calc(var(--u) * 3.8); background: rgba(255, 252, 244, .9); box-shadow: inset 0 0 0 max(1px, calc(var(--px) * .5)) var(--ink); }
.pipgroup i.seat { background: rgba(43, 36, 48, .3); }
.cargotop { display: flex; flex-direction: column; gap: calc(var(--u) * .8); }
.toprow { gap: calc(var(--u) * 1.4); max-width: calc(var(--u) * 100); text-align: left; font-size: .82em; line-height: 1.16; }
/* the post box's letters along the top: drag one in, or drag one back */
.cargoshelf .shelfname { align-self: flex-start; font-size: .8em; }
.cargoshelf.dropback { outline: max(2px, var(--px)) dashed var(--sea); outline-offset: max(2px, var(--px)); }
.cargoshelf .row { touch-action: none; }
.row.held { outline: max(2px, var(--px)) solid var(--ink); outline-offset: calc(var(--px) * -1); }
/* all the shed's vehicles at once: a small picture each, its name, and whether it's yours, for sale or still to come */
.shedtop { width: 100%; justify-content: space-between; }
.shedall { display: grid; gap: calc(var(--u) * .8); }
.shedtile { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .3); padding: calc(var(--u) * .6) calc(var(--u) * .3) calc(var(--u) * .8); background: rgba(43, 36, 48, .06); pointer-events: auto; font-size: max(.66em, 11px); line-height: 1.1; }
.shedtile canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.shedtile:hover, .shedtile.on { background: var(--gold); }
#panelveil .shedtile small { display: flex; align-items: center; gap: .3em; margin: 0; font-size: 1em; }
.shedtile small .pix.small { width: 1.1em; }
/* the shed's vehicles, one at a time */
.shedvehicle { display: flex; flex-direction: column; gap: calc(var(--u) * .8); padding-bottom: calc(var(--u) * 1.2); border-bottom: max(1px, calc(var(--px) * .5)) solid rgba(43, 36, 48, .2); }
.shedvehicle > .gap:first-child { justify-content: space-between; }
.shedname { flex: 1; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 .7em; text-align: center; }
.shedpicture { display: block; align-self: center; width: calc(var(--u) * 64); height: calc(var(--u) * 42); image-rendering: pixelated; }
.shedfacts { justify-content: center; gap: .2em 1.1em; }
.shedbars { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: calc(var(--u) * .3) calc(var(--u) * 2); }
.shedbar { display: contents; }
.shedbar b { display: block; height: calc(var(--u) * 2.4); background: rgba(43, 36, 48, .12); }
.shedbar b i { display: block; height: 100%; background: #3f8f6a; }
/* a phone's writing is bigger than the rest of the interface, so there the cards use the whole width, and what you tap is bigger.
   The cargo card is one column, so its boxes go in the middle */
@media (max-aspect-ratio: 1/1) {
  #panelveil .panel.shedpanel, #panelveil .panel.narrow { width: 94vw; max-width: 94vw; }
  .swatch { width: max(calc(var(--u) * 12), 30px); height: max(calc(var(--u) * 12), 30px); }
  .shedrow.colours { flex-direction: column; align-items: stretch; gap: .5em; }
  .swatchname { width: auto; }
  .cargoright { align-items: center; text-align: center; }
  .cargogrids { justify-content: center; --cell: max(calc(var(--u) * 13), 34px); }
}

/* a note for the maker, on N (prompt 53): a small card over everything, the title card too */
.veil.fbveil { z-index: 9; }
.fbpanel { width: min(calc(var(--u) * 178), 94vw); display: flex; flex-direction: column; gap: calc(var(--u) * 1.8); align-items: stretch; text-align: left; }
.fbpanel h2 { margin: 0; text-align: center; }
.fbchips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 1.6); }
.fbchips .btn { font-size: .86em; display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u) * 1); padding: calc(var(--u) * .9) calc(var(--u) * 1.8); text-align: left; }
.fbchips .btn .key { flex: none; }
.fbnote { width: 100%; box-sizing: border-box; resize: none; padding: calc(var(--u) * 1.2) calc(var(--u) * 1.8); font: inherit; color: var(--ink); background: #fffdf6; border: 0; outline: none; box-shadow: inset 0 0 0 max(1px, calc(var(--px) * .5)) var(--ink); }
.fbnote:focus { box-shadow: inset 0 0 0 max(2px, var(--px)) var(--sea); }
.fbnote::placeholder { color: var(--muted); }
.fbwith { display: flex; align-items: center; gap: calc(var(--u) * 2); }
.fbwith img { flex: none; width: calc(var(--u) * 30); height: auto; image-rendering: pixelated; box-shadow: 0 0 0 max(1px, calc(var(--px) * .5)) var(--ink); }
.fbpanel small { margin: 0; color: var(--muted); font-size: max(.82em, 11px); }
.fbhint { min-height: 1.2em; color: var(--red) !important; text-align: center; }
.fbrow { display: flex; justify-content: center; align-items: center; gap: calc(var(--u) * 3); }
.fbrow .btn { display: flex; flex-direction: column; align-items: center; line-height: 1.12; }
.fblist { display: flex; flex-direction: column; gap: calc(var(--u) * .6); }
.fblist:empty { display: none; }
.fbline { display: flex; gap: calc(var(--u) * 1.6); font-size: max(.82em, 11px); }
.fbline b { flex: none; font-weight: 400; color: var(--muted); }
.fbline b.done { color: var(--sea); }
.fbline span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fbtoast { position: fixed; left: 50%; top: calc(var(--u) * 5); transform: translateX(-50%); z-index: 10; padding: calc(var(--u) * 1.2) calc(var(--u) * 3.4); max-width: 86vw; text-align: center; pointer-events: none; }
.fbunsent { align-items: center; justify-content: space-between; color: var(--red); }
.fbunsent span { white-space: normal; }
.fbunsent .btn { flex: none; pointer-events: auto; }