/* Body face: Flete Pixel 12 Bold, Fusion Pixel 12 thickened on its own grid (tools/make-bold-font.py); 16-px content box, so even line heights keep baselines on whole pixels. */
@font-face { font-family: Fusion; src: url(../public/fonts/FletePixel12-Bold.ttf) format('truetype'); font-display: block; }
/* Label face: Flete Pixel 10 Bold for button labels; baseline on a whole pixel at any even line height. */
/* Money face: Flete Digits, hand-drawn 2-px numerals on the grid (tools/make-digits-font.py), crisp at 14px. */
@font-face { font-family: Digits; src: url(../public/fonts/FleteDigits.ttf) format('truetype'); font-display: block; }
@font-face { font-family: Label; src: url(../public/fonts/FletePixel10-Bold.ttf) format('truetype'); font-display: block; }
/* Display face: Press Start 2P, a true bold pixel font on an 8-px grid (names, headers, buttons, plaque, money). */
@font-face { font-family: Display; src: url(../public/fonts/PressStart2P-latin.ttf) format('truetype'); font-display: block; unicode-range: U+0000-00FF, U+2010-2026; }
@font-face { font-family: Display; src: url(../public/fonts/PressStart2P-cyrillic.ttf) format('truetype'); font-display: block; unicode-range: U+0400-045F, U+2116; }

/*
 * One pixel grid for everything: #app is laid out in logical pixels (1 art pixel = 1px here) and zoomed so one
 * logical pixel is a whole number of device pixels (main.mjs fit()). Art comes from public/assets/px at its true size.
 * Rules for this file: whole-pixel sizes only, sprites or hard colour stops, no blur, no rounded corners, no opacity washes.
 */
:root {
  --ink: #f4e4bf;
  --ink-dark: #2b1a0e;
  --wood-0: #1f120a;
  --wood-1: #3b2414;
  --wood-2: #4d301a;
  --brass-0: #5a3a12;
  --brass-1: #a8792a;
  --brass-2: #e0b45a;
  --brass-3: #fbe3a0;
  --teal-0: #0f2a2c;
  --amber-2: #f0b040;
  --paper-ink: #3a2414;
  --paper-soft: #6b4a2c;
  --red: #a8321c; /* stop 1 and the rules that forbid, nothing else (impeccable C1) */
  --pencil: #5c4b3a; /* how-tos, counts, dates: Nico's soft pencil (pressed a little harder: the map's hint read pale) */
  --bad: #ff9a7a;
  --good: #c7e08a;
}
* { box-sizing: border-box; }
html.booting #app { visibility: hidden; } /* nothing until the first picture or line (index.html) */
#boot-error { position: fixed; inset: 16px; margin: 0; z-index: 99999; color: #f3e6c4; font: 13px/1.4 monospace; white-space: pre-wrap; overflow: auto; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--wood-0); touch-action: manipulation; } /* a quick double tap is two taps, not the browser's zoom; a pinch still zooms */
body { padding-left: var(--app-left, 0px); } /* whole device pixels from fit(), so the art grid starts on a device pixel */
#app {
  position: relative; display: flex; flex-direction: column; width: var(--app-w, 270px); height: var(--app-h, 585px); zoom: var(--zoom, 1);
  --safe-top: calc(env(safe-area-inset-top, 0px) / var(--zoom, 1)); --safe-bottom: calc(env(safe-area-inset-bottom, 0px) / var(--zoom, 1));
  color: var(--ink); font: 12px/14px Fusion, monospace; -webkit-font-smoothing: none; font-smooth: never;
  image-rendering: pixelated; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
img { image-rendering: pixelated; display: block; }
img[hidden] { display: none; } /* display: block above would beat the hidden attribute */
small { font-size: inherit; }
b { font-weight: inherit; }
* { font-synthesis: none; } /* the pixel faces are already bold where needed; synthetic bold or italic smears them off the grid */ /* the browser's smaller size would draw a 12-px pixel font at 10 px: mixels */
button, select { font: inherit; color: inherit; cursor: pointer; }
#plaque b, #note h3, #savings-label, .title-plaque b, #note li b { font: 8px/8px Display, monospace; letter-spacing: 0; text-shadow: none; }
.title-plaque small { font: 10px/12px Fusion, monospace; letter-spacing: 1px; text-transform: uppercase; text-shadow: none; }
.tag { font: 8px/8px Display, monospace; }

/* Scene: a 270×309 stage, bottom-anchored, shifted by --stage-left to keep the cab in view. */
#scene { position: relative; flex: none; height: var(--scene-h, 309px); overflow: hidden; background: #2a1a10; }
#stage { position: absolute; z-index: 0; left: var(--stage-left, 0px); top: var(--stage-top, 0px); width: 270px; height: calc(309px + var(--extra, 0px)); } /* tall screens: the street on top, more road below */
#pave { left: -15px; top: 309px; width: 300px; height: var(--extra, 0px); background-repeat: repeat-y; }
#stage > * { position: absolute; }
#app.rainy #bg, #app.rainy #pave { filter: saturate(.4) brightness(.72) contrast(.9); } /* a rain day: the sun's warmth gone from the street */
#fx-water, #fx-rain { position: absolute; } #fx-water[hidden], #fx-rain[hidden] { display: none; } /* the rain and the water on the setts: fx.mjs */
#app.rainy #stage::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: rgba(70, 90, 110, .22); mix-blend-mode: multiply; } /* and a cold grey over the wet setts */
#stage { transition: transform .42s cubic-bezier(.3, .7, .2, 1), transform-origin .42s cubic-bezier(.3, .7, .2, 1); } /* a new origin (another thing chosen) glides too */
#stage.closer { transform: scale(var(--closer-s, 1.25)); } /* a thing chosen: in on the hold */
#in-hand { position: absolute; left: 6px; bottom: 6px; z-index: 7; display: flex; align-items: flex-end; justify-content: center; min-width: 40px; min-height: 40px; max-height: 64px; padding: 4px; border: 2px solid var(--wood-0); background: #e9dcc0; box-shadow: 0 0 0 1px var(--amber-2), 2px 2px 0 rgba(0, 0, 0, .35); overflow: hidden; } /* a paper card with the thing on it, gold-rimmed like the selection */
#in-hand[hidden] { display: none; }
#in-hand { left: auto; right: 6px; bottom: auto; top: calc(6px + var(--safe-top, 0px)); } /* top right, at the screen's top: under the plaque it reached the hold's top row at 360 and a tap there put the thing back */
#app.choosing #plaque { visibility: hidden; } /* while a thing is in hand its card has the top: the day's plaque steps aside (it covered «SAN TELMO» — owner) */ /* top right, over the facade: never on the road's things nor under the words */
#in-hand { flex-direction: row; align-items: center; max-height: 58px; min-height: 0; max-width: 150px; gap: 4px; padding: 3px 4px; } /* the thing, its name and tag, its rules in one row: the reference while a column is chosen, kept short so it stays above the hold */
#app.narrow #in-hand { max-height: 52px; padding-top: 2px; padding-bottom: 2px; } /* at 360 the card stays clear of the niche's tap targets */
#in-hand .pic { flex: none; display: flex; justify-content: center; align-items: center; width: 30px; height: 34px; }
#in-hand .pic img { width: 24px; height: 20px; image-rendering: pixelated; }
#in-hand .info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#in-hand .cap b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* a long name in two lines at most */
#in-hand .cap { display: flex; align-items: flex-start; gap: 3px; font: 10px/11px Label, monospace; /* Label is drawn at 10 px: on the grid (pixel r10: Fusion, a 12-px face, at 10 px made 1-2-3 px strokes) */ color: #3a2626; text-align: left; }
#in-hand .cap .cap-tag { flex: none; width: 9px; height: 14px; margin-top: -1px; }
#in-hand .rule { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; font: 10px/11px Label, monospace; color: #8a2a1a; text-align: left; white-space: nowrap; } /* the rules in words beside their badges, one line */
#in-hand .rule img { flex: none; width: 11px; height: 11px; }
#bg { left: -15px; top: 0; width: 300px; height: 309px; }
#idle-nico { z-index: 1; background-repeat: no-repeat; pointer-events: none; }
#idle-nico[hidden] { display: none; }
#truck { left: 50px; top: 122px; width: 240px; height: 135px; z-index: 1; }
#tyre-r, #tyre-f { top: 213px; width: 36px; height: 36px; z-index: 1; background-size: 240px 135px; transform-origin: 50% 92%; transition: scale .55s cubic-bezier(.34, 1.56, .64, 1); } /* the tyres alone, under the body: TRUCK.y + 91, the hubs at 48.5 and 201.5, 36 px boxes */
#tyre-r { left: 80px; background-position: -30px -91px; } #tyre-f { left: 233px; background-position: -183px -91px; }
#tyre-r[hidden], #tyre-f[hidden] { display: none; }
#truck, #cargo, #lands, #columns { transition: rotate .55s cubic-bezier(.34, 1.56, .64, 1), transform .55s cubic-bezier(.34, 1.56, .64, 1); } /* on springs: past and back */
#roberto { transition: translate .55s cubic-bezier(.34, 1.56, .64, 1); } /* TRUCK in scene.mjs; over the pavement behind it (z 0), under what is in its hold (2, 3) */
.rear-door { position: absolute; z-index: 2; transform-origin: right center; pointer-events: none; } /* the rear door swinging on its hinge (main.mjs wall) */
#ribbon-text { position: absolute; left: 91px; top: 172px; width: 74px; height: 11px; z-index: 2; display: flex; align-items: center; justify-content: center; text-align: center;
  pointer-events: none; overflow: hidden; image-rendering: auto; } /* Roberto's lettering on the side's ribbon, in Spanish as he paints it: a canvas in the world's HD (main.mjs paintRibbon) */
#ribbon-text[hidden] { display: none; }
#ribbon-text.drawn { left: 70px; top: 160px; width: 116px; height: 34px; } /* the drawn lettering covers the whole ribbon (build-px RIBBON_BOX on the truck at 50, 122) */
#cab-open { left: 186px; top: 166px; width: 54px; height: 68px; z-index: 2; pointer-events: none; } /* build-px CAB_BOX on the truck */
#cargo, #columns, #street-items, #lands { inset: 0; }
#lands { z-index: 1; pointer-events: none; } /* marks only: taps go to the road and the columns; on the hold over the truck's drawing (later in the page), under Roberto (z 2 in the hold: qa final, the outline cut through his legs) */
.closed #cargo, .closed #columns, .closed #lands { visibility: hidden; } /* the wall is up: nothing in the hold shows, nothing is held to drop */
#road-shade { left: -20px; right: -20px; top: 262px; bottom: 0; z-index: 1; pointer-events: none; /* scene.mjs ROAD_Y + 16: the road under the load a shade darker, so the things on it read */
  background: linear-gradient(rgba(22, 14, 9, .12) 0 6px, rgba(22, 14, 9, .24) 6px 12px, rgba(22, 14, 9, .36) 12px); } /* in steps, no soft edge on the pixel grid */
#street-items { pointer-events: none; } /* the layer spans the scene: only its items take a finger, the hold's columns under it must too */
#street-items .crate { pointer-events: auto; }
#roberto, #client, #rider { pointer-events: none; background-repeat: no-repeat; }
#cargo, #columns { z-index: 3; } /* over Roberto at the hold's far wall; the columns over the load, for taps */
.pad { position: absolute; background-repeat: no-repeat; pointer-events: none; } /* the blankets packed beside a thing, left in the hold when it goes */
.shim { position: absolute; background: url(../public/assets/px/ui/blanket-patch.png) right bottom / 15px 15px; } /* a folded frazada pushed under a hanging foot: a patch of the same blankets the trunk is packed with */
#app.hi .shim { background-image: url(../public/assets/pxhd/ui/blanket-patch.png); }
@keyframes show { from { opacity: 0; } }
@keyframes tie { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
#held { z-index: 400; pointer-events: none; } /* the item in Nico's hands, over his arms */
#nico { z-index: 300; pointer-events: none; background-repeat: no-repeat; image-rendering: pixelated; }

/* Columns of the hold are tap targets; corner ticks mark where the held item would land. */
.col { position: absolute; border: 0; padding: 0; background: none; } /* no lane lines: the ghost shows where a thing can go */
.col:first-child { background: none; }
.land { position: absolute; pointer-events: none; } /* where it will lie: build-px ghost_sprites, the thing's own chalk outline */
.land .ghost-thing { display: none; } .land .ghost-line { opacity: .85; } /* a chalk outline of the thing on the hold, a breath of its shape inside: a mark, not a glass copy */
#app.hinting .land:not(.hinted) { opacity: .35; } /* the spot «вот сюда» named stands out from the other places */
.land.hinted .ghost-thing { display: block; opacity: .22; } .land.hinted .ghost-line { opacity: 1; } /* the hint's place: the chalk pressed harder */
@keyframes blink { 50% { --c: var(--amber-2); } }
#undo.urge { filter: brightness(1.3); outline: 2px solid var(--amber-2); outline-offset: -2px; } /* a dead end: «Назад» is the way out, lit and still (no blinking) */

.crate { position: absolute; display: flex; align-items: flex-end; justify-content: flex-start; padding: 0; border: 0; background: transparent; }
.crate::after { content: ''; position: absolute; inset: -4px -2px; } /* touch padding beyond the sprite */
#street-items .crate::after { inset: auto; left: 50%; top: 50%; width: max(calc(100% + 4px), var(--hit, 0px)); height: max(calc(100% + 8px), var(--hit, 0px)); transform: translate(-50%, -50%); } /* a small thing on the road still takes a whole fingertip (44 pt); what is drawn under the finger wins (drawnAt) */
.crate img { flex: none; }
.crate img.shadow { position: absolute; bottom: -3px; } /* the ellipse's middle on the base line: half under the thing, half in front */
.crate .rules-badges { position: absolute; right: -3px; top: -4px; display: flex; gap: 1px; pointer-events: none; } /* in the corner, out of the flow: the sprite keeps its whole-pixel spot */
.crate:not(.selected) img.shadow + img { position: relative; }
.crate.selected img:not(.shadow) { transform: translateY(-9px); filter: drop-shadow(1px 0 0 var(--wood-0)) drop-shadow(-1px 0 0 var(--wood-0)) drop-shadow(0 -1px 0 var(--wood-0)) drop-shadow(0 1px 0 var(--wood-0))
  drop-shadow(1px 0 0 var(--amber-2)) drop-shadow(-1px 0 0 var(--amber-2)) drop-shadow(0 -1px 0 var(--amber-2)) drop-shadow(0 1px 0 var(--amber-2)); } /* dark rim inside a bright one: reads on sunlit tiles */
.crate.waiting img:not(.shadow) { animation: hop 1.6s steps(1) infinite; }
.crate.named img:not(.shadow) { animation: hop 1.2s steps(1) infinite; } .crate.named::after { content: ''; position: absolute; left: -4px; right: -4px; bottom: -5px; height: 9px; border: 2px dashed rgba(242, 230, 200, .9); border-radius: 50%; pointer-events: none; } /* the thing the hint named: a chalk ring on the cobbles round its foot, hopping until picked (phone r8) */ /* the thing to start with hops on the cobbles, a pace you see from arm's length */
@keyframes hop { 0%, 70%, 100% { transform: translateY(0); } 76% { transform: translateY(-3px); } 82% { transform: translateY(-4px); } 88% { transform: translateY(-2px); } }
@keyframes bob { 50% { transform: translateY(-1px); } }
.tag { display: inline-block; flex: none; width: 40px; height: 17px; padding: 5px 0 0 20px; color: var(--ink); background: no-repeat 0 0; }
.crate > .stop-pin, .crate > .tag-rule { position: absolute; z-index: 1; } .crate > .tag-rule { z-index: 2; } /* a luggage tag on its string, tied to the thing itself (main.mjs perch) */
#app.at-stop #street-items .crate > .stop-pin, #app.at-stop #street-items .crate > .tag-rule { visibility: hidden; } /* delivered: set down at the client's door it is theirs, no loading tags (qa final: the sign on the cobbles wore its «2» and glass again) */
#cargo .crate > .stop-pin { visibility: hidden; } /* in the hold the tags show while a thing is chosen (deciding where): a loaded hold at rest is the load, not confetti */
#app.choosing #cargo .crate.same-stop > .stop-pin { visibility: visible; } /* only the stop of the thing in hand: where its fellows are, not a labelled grid */

/* Top-left enamel plaque (9-slice sprite). */
#plaque { position: absolute; left: 6px; top: calc(6px + var(--safe-top, 0px)); z-index: 5; display: flex; flex-direction: column; align-items: center;
  padding: 0 6px; border: 6px solid transparent; border-image: url(../public/assets/px/ui/plaque.png) 11 / 11px repeat; background: #013640 padding-box; } /* 11-px slices keep the rivets in the corners; a flat middle never tiles onto a half pixel */
#plaque b { margin-top: 1px; color: var(--ink); text-transform: uppercase; white-space: nowrap; }
#plaque small { display: flex; align-items: center; gap: 3px; margin-top: 2px; color: var(--brass-2); font: 8px/8px Display, monospace; }
#plaque small::before, #plaque small::after { content: ''; width: 12px; height: 2px; background: linear-gradient(var(--brass-1) 1px, transparent 0); } /* 2 px box: centres on a whole pixel in the 8-px line */
.titled #scene > *:not(#title-card), .titled #beam, .titled .actions, .titled .desk, .booked #scene, .booked #beam, .booked #console { filter: brightness(.42) saturate(.8); } /* a uniform darken keeps every pixel on the grid */

/* Day title: its own moment over a 50% dither (a pixel-art fade, no alpha). */
#title-card { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; padding-top: 140px; cursor: pointer;
  background: none; }
#title-card[hidden] { display: none; }
.ribbon { display: flex; align-items: center; justify-content: center; width: 230px; height: 34px; padding: 0 30px 4px; background: url(../public/assets/px/ui/ribbon.png) no-repeat; color: var(--ink-dark); }
.ribbon b { white-space: nowrap; font: 12px/14px Fusion, monospace; } /* the date is words: the proportional pixel face, not the monospaced caps (impeccable T1: «Среда,  10  мая»); the title card in one family, two sizes */
.title-plaque { display: flex; flex-direction: column; align-items: center; padding: 3px 22px; border: 6px solid transparent; border-image: url(../public/assets/px/ui/plaque.png) 11 / 11px repeat; background: #013640 padding-box; } /* 11-px slices keep the rivets in the corners; a flat middle never tiles onto a half pixel */
.title-plaque b { font: 12px/14px Fusion, monospace; letter-spacing: 1px; text-transform: uppercase; text-align: center; }
.title-plaque small { margin-top: 4px; color: var(--brass-3); }

/* Beam between scene and console (9-slice: carved caps, plank middle). */
#beam { flex: none; height: 14px; margin: -3px 0; position: relative; z-index: 4;
  background: url(../public/assets/px/ui/beam-l.png) 0 0 no-repeat, url(../public/assets/px/ui/beam-r.png) 100% 0 no-repeat, url(../public/assets/px/ui/beam-m.png) 22px 0 repeat-x; }

/* Console. */
#console { position: relative; flex: 1; display: flex; flex-direction: column; gap: var(--row-gap, 4px); padding: 4px 4px calc(6px + var(--safe-bottom, 0px)); min-height: 0; overflow: hidden;
  background: url(../public/assets/px/ui/wood-tile.png) 0 0 / 48px 48px repeat; }

#talk { flex: none; position: relative; display: flex; align-items: center; gap: 2px; height: var(--talk-h, 84px); }
#portrait { flex: none; position: relative; width: 76px; height: 76px; padding: 8px; background: #2a1a10 content-box; }
#portrait::after { content: ''; position: absolute; inset: 0; background: url(../public/assets/px/ui/portrait-frame.png) no-repeat; pointer-events: none; } /* the frame over the picture: shoulders and hair go under its bars, never over its ornaments (owner) */
#face { width: 60px; height: 60px; }
#face[hidden] { visibility: hidden; display: block; }
#talk.faceless #portrait { display: none; }
#who-face { display: none; position: absolute; left: 10px; top: 6px; width: 26px; height: 26px; box-shadow: 0 0 0 1px #2b1d16, 0 0 0 2px #8a5a2b, 0 0 0 3px #2b1d16; } /* the speaker's face where the big portrait gives way: story frames, loading words, a narrow stop (critic r8) */
#app.vignette #talk:not(.faceless) #who-face, #app:not(.talking) #talk.toast:not(.faceless) #who-face, #app.narrow.talking.at-stop:not(.vignette) #talk:not(.faceless) #who-face { display: block; }
#app.vignette #talk:not(.faceless) .said, #app:not(.talking) #talk.toast:not(.faceless) .said, #app.narrow.talking.at-stop:not(.vignette) #talk:not(.faceless) .said { padding-left: 44px; min-height: 38px; } /* the words beside the face */
#talk::after { content: ''; position: absolute; right: 2px; top: 2px; width: 18px; height: 18px; background: url(../public/assets/px/ui/corner-tr.png) no-repeat; pointer-events: none; }
#talk .said { flex: 1; align-self: stretch; min-width: 0; position: relative; display: flex; flex-direction: column; padding: 4px 4px 2px 10px; /* the text clears the frame's corner scrolls */ background: #1c2628 padding-box;
  border: 12px solid transparent; border-image: url(../public/assets/px/ui/frame-wide.png) 20 fill / 20px repeat; } /* 20-px slices hold the whole corner scrolls (edge tiles stay plain), drawn 8 px into the padding; never scaled */
#who { display: block; margin: 0 0 2px; font: 12px/12px Fusion, monospace; letter-spacing: 1px; color: var(--amber-2); text-transform: uppercase; }
#who.outsider { color: #9fd6c4; } /* a client or a friend: not the family's amber */
#message { margin: 0; word-spacing: -2px; text-shadow: 1px 1px 0 var(--wood-0); }
#tap { position: absolute; right: 2px; bottom: 2px; animation: bob 0.8s steps(2) infinite; }
#app.talking #message { padding-right: 12px; } /* the words never run under the «next» hand: the same in paging and in showing */
#tap[hidden] { display: none; }
#talk.bad #message { color: var(--bad); }
#talk.good #message { color: var(--good); }
#talk.narrator #message { color: #d9c18c; }

.actions { flex: none; display: flex; gap: var(--btn-gap, 2px); padding-left: var(--btn-pad, 0px); height: 52px; }
/* Each plate is a sprite of the button's exact size (tools/build-px.py), never stretched. */
.tin { flex: none; width: 52px; height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 3px 0 7px;
  border: 0; background: url(../public/assets/px/ui/52/plate-teal.png) no-repeat; text-transform: uppercase; color: var(--ink); }
.tin span { white-space: nowrap; font: 10px/10px Label, monospace; text-shadow: 1px 1px 0 var(--wood-0); }
.tin img { flex: none; }
.tin.go { width: 70px; background-image: url(../public/assets/px/ui/70/plate-amber.png); color: var(--ink-dark); }
.tin.go span { text-shadow: none; }
.tin:active:not(:disabled) { background-image: url(../public/assets/px/ui/52/plate-teal-down.png); }
.tin.go:active:not(:disabled) { background-image: url(../public/assets/px/ui/70/plate-amber-down.png); }
.tin:disabled { background-image: url(../public/assets/px/ui/52/plate-teal-down.png); color: #9fb6b0; cursor: default; }
.tin.go.waiting { background-image: url(../public/assets/px/ui/70/plate-amber-off.png); color: #5a4a30; } /* not lit until everything is loaded */
.mid .tin.go.waiting { background-image: url(../public/assets/px/ui/66/plate-amber-off.png); }
.wide .tin.go.waiting { background-image: url(../public/assets/px/ui/78/plate-amber-off.png); }
.tin.go:disabled { background-image: url(../public/assets/px/ui/70/plate-amber-off.png); color: #5a4a30; }
.mid .tin { width: 56px; background-image: url(../public/assets/px/ui/56/plate-teal.png); }
.mid .tin.go { width: 66px; background-image: url(../public/assets/px/ui/66/plate-amber.png); }
.mid .tin:active:not(:disabled) { background-image: url(../public/assets/px/ui/56/plate-teal-down.png); }
.mid .tin.go:active:not(:disabled) { background-image: url(../public/assets/px/ui/66/plate-amber-down.png); }
.mid .tin:disabled { background-image: url(../public/assets/px/ui/56/plate-teal-down.png); }
.mid .tin.go:disabled { background-image: url(../public/assets/px/ui/66/plate-amber-off.png); }
.wide .tin { width: 58px; background-image: url(../public/assets/px/ui/58/plate-teal.png); }
.wide .tin.go { width: 78px; background-image: url(../public/assets/px/ui/78/plate-amber.png); }
.wide .tin:active:not(:disabled) { background-image: url(../public/assets/px/ui/58/plate-teal-down.png); }
.wide .tin.go:active:not(:disabled) { background-image: url(../public/assets/px/ui/78/plate-amber-down.png); }
.wide .tin:disabled { background-image: url(../public/assets/px/ui/58/plate-teal-down.png); }
.wide .tin.go:disabled { background-image: url(../public/assets/px/ui/78/plate-amber-off.png); }
.sheet .tin, .sheet .tin.go { width: auto; height: auto; min-height: 34px; padding: 4px 8px; line-height: 14px; white-space: normal; border: 6px solid transparent; border-image: url(../public/assets/px/ui/plaque.png) 11 / 11px repeat; background: #013640 padding-box; box-shadow: none;  image-rendering: pixelated;} /* the day plaque's riveted tin: the console's family, not flat web slabs (pixel r9) */
#menu-title { margin: 2px 0 4px; text-align: center; font: 12px/14px Fusion, monospace; letter-spacing: 2px; text-transform: uppercase; color: var(--amber-2); }
.sheet .tin[data-ask] { height: auto; min-height: 34px; padding: 6px 8px; line-height: 14px; color: var(--amber-2); white-space: normal; } /* the question takes the lines it needs */
.sheet .tin.go { background: none; border-image: url(../public/assets/px/ui/plaque.png) 11 fill / 11px repeat; color: #120802; text-shadow: none; box-shadow: none; filter: sepia(1) saturate(3.2) hue-rotate(-8deg) brightness(2.2) contrast(1.05); } /* «Вернуться»: the lit one — the whole plate, rim and rivets, in amber tin like В ПУТЬ, not a flat bar inside a teal plate (critic, pixel r10) */

/* Desk: Nico's closed notebook (cover shows signs only) and the kraft savings pocket. */
.desk { flex: none; min-height: 0; display: flex; gap: 6px; align-items: flex-start; padding: 2px 0 0 2px; }
#book { position: relative; flex: none; width: 150px; height: 98px; padding: 0; border: 0; background: url(../public/assets/px/ui/book-closed.png) no-repeat; }
#book:active { transform: translateY(1px); }
#marks { position: absolute; left: 13px; top: 8px; bottom: 22px; width: 100px; display: flex; flex-direction: column; } /* main.mjs spreads the rows in whole pixels */
.mark-row { display: flex; align-items: center; gap: 3px; height: 17px; }
.mark-row .tag { margin-right: 2px; }
.dot { flex: none; width: 9px; height: 9px; background: url(../public/assets/px/ui/dot-empty.png); }
.dot.in.stop-0 { background-image: url(../public/assets/px/ui/dot-red.png); }
.dot.in.stop-1 { background-image: url(../public/assets/px/ui/dot-blue.png); }
.dot.in.stop-2 { background-image: url(../public/assets/px/ui/dot-amber.png); }
.tick { width: 5px; height: 3px; border-left: 1px solid var(--good); border-bottom: 1px solid var(--good); transform: none; margin-top: -2px; }
.mark-row.bottom { height: 18px; gap: 5px; }
.mark-row.bottom .bar { flex: 1; }
.cal { width: 17px; height: 18px; padding: 7px 0 0 5px; text-align: left; font: 8px/8px Display, monospace; color: var(--ink-dark); background: url(../public/assets/px/ui/calendar.png) no-repeat; }
.bar { display: inline-block; width: 50px; height: 8px; padding: 1px; background: #6b4a2c; border: 1px solid var(--wood-0); box-shadow: inset 0 1px 0 #4a2a12; }
.bar i { display: block; height: 4px; background: var(--amber-2); box-shadow: inset 0 -1px 0 #b8781c; }
.bar.wide { width: 152px; height: 7px; }
.bar.wide i { height: 5px; }
#savings { flex: none; width: 74px; height: 87px; display: flex; justify-content: center; align-items: flex-start; padding-top: 44px; background: url(../public/assets/px/ui/pocket-coins.png) no-repeat; }
#savings.empty { background-image: url(../public/assets/px/ui/pocket-empty.png); }
.tall #book { width: 180px; height: 118px; background-image: url(../public/assets/px/ui/book-closed-tall.png); }
.tall #marks { left: 16px; top: 10px; bottom: 27px; width: 120px; }
.tall #savings { width: 89px; height: 104px; padding-top: 54px; background-image: url(../public/assets/px/ui/pocket-coins-tall.png); }
.tall #savings.empty { background-image: url(../public/assets/px/ui/pocket-empty-tall.png); }
#savings-sum { padding: 2px 3px 1px; border: 1px solid #6b4a2c; background: #f3e6c4; box-shadow: 1px 1px 0 rgba(43, 29, 22, .45); font: 14px/14px Digits, monospace; color: #3a1e0c; } /* a paper label stuck on the envelope: the sum reads over the banknotes (owner: «ни черта не видно») */

/* The open notebook: one page per topic, cloth tabs on the right edge switch pages; tap outside to close. */
#notebook { position: absolute; inset: 0; z-index: 25; }
#notebook[hidden] { display: none; }
#notebook .page { position: absolute; left: var(--page-left, 16px); top: calc(40px + var(--safe-top, 0px)); width: calc(var(--page-w, 200px) + 4px); height: calc(var(--page-h, 260px) + 14px);
  background: no-repeat; color: var(--paper-ink); } /* main.mjs draws the page at this size: the frame, page edges (+4 px) and ribbons (+14 px) */
/* One 14-px rhythm on the page: every row is 14 or 28 px tall and its text baseline sits on the ruled line (row 13 of each 14). */
#page-body { position: absolute; inset: 15px 22px 29px 20px; overflow: hidden auto; scrollbar-width: none; overscroll-behavior: contain; word-spacing: -2px;
  background: repeating-linear-gradient(transparent 0 13px, #d6be92 13px 14px) 0 28px / 100% calc(100% - 28px) no-repeat; }
#page-body.leaf-sheet { pointer-events: none; background-color: #f0e2be; } /* the leaf turning, its paper opaque over the next */
.leaf-flap-box { position: absolute; inset: 15px 22px 29px 20px; pointer-events: none; filter: drop-shadow(-1px -1px 0 rgba(58, 36, 20, .35)); } /* the fold's shadow on the leaf */
.leaf-flap { position: absolute; inset: 0; background: url(../public/assets/px/ui/paper-back.png) 0 0 / 48px 48px; } /* the paper's back, folded over (drawn: build-px page_turn) */
#app.hi .leaf-flap { background-image: url(../public/assets/pxhd/ui/paper-back.png); }
.page .dogear { image-rendering: pixelated; position: absolute; right: 13px; bottom: 22px; width: 34px; height: 34px; padding: 3px; /* a 34-px target round the drawn corner (phone final: 42 pt) */ cursor: pointer; z-index: 2; } /* the page's corner folded over, on the paper's own edge: tap to turn (drawn: build-px page_turn) */
.page .dogear.prev { right: auto; left: 11px; }
.page .dogear::after { content: none; }
.page .dogear[hidden] { display: none; }
.page .leaf-no { position: absolute; left: 0; right: 0; bottom: 31px; text-align: center; font: 10px/12px Fusion, monospace; color: var(--pencil); pointer-events: none; } /* the leaf's number, pencilled at its foot */
#page-body h2 { display: table; margin: 0 auto; padding-top: 14px; font: 12px/14px Fusion, monospace; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-dark); }
#page-body .rule-line { display: table; margin: 0 auto; padding: 5px 0 1px; font: 8px/8px Display, monospace; color: var(--paper-soft); }
#page-body .sub { margin: 0; color: var(--paper-soft); }
#page-body .goal { margin: 0; color: var(--paper-ink); font-weight: bold; } /* the day's pay: a sum, in ink */
#page-body .pencil { margin: 0; color: var(--pencil); }
#page-body .stop-head { display: flex; align-items: flex-start; gap: 4px; min-height: 28px; }
#page-body .stop-head .tag { margin-top: 10px; } /* the tag stands on the ruled line */
#page-body .stop-head b { margin-top: 16px; font: 8px/14px Display, monospace; text-transform: uppercase; } /* each line's glyphs end on a ruled line (row 13 of 14) */
#page-body .addr { margin: 0 0 0 26px; line-height: 14px; color: var(--paper-soft); } /* under the stop's name, in Nico's hand */
#page-body .thing { display: flex; align-items: flex-end; gap: 4px; min-height: 28px; }
#page-body .thing:not(.tipline) { align-items: flex-start; } /* a long name runs on under itself: its box and icon stay with its first line (impeccable T4) */
#page-body .thing:not(.tipline) span, #page-body .thing:not(.tipline) small { margin-top: 14px; line-height: 14px; } /* the first line on the second ruled line, as before */
#page-body .thing:not(.tipline) img { margin-top: 7px; } /* the 20-px icon stands on that line */
#page-body .thing:not(.tipline) .box { margin-top: 16px; }
#page-body .day-row { display: flex; align-items: flex-end; gap: 4px; min-height: 14px; }
#page-body .day-row:not(.mark) { white-space: nowrap; } /* one line a day; the hand-written dates may run on */
#page-body .day-row.arm small { color: var(--paper-ink); text-decoration: underline; } /* armed: the second tap plays it — asked in ink, underlined */
#page-body .thing img { flex: none; }
#page-body .rules { display: flex; flex-wrap: wrap; align-items: center; gap: 0 3px; column-gap: 3px; min-height: 14px; line-height: 14px; margin: 0 0 0 41px; white-space: nowrap; color: var(--red); } /* wraps between its parts (rules · kg · trip) on a narrow page, never inside one (phone r10: cut at 360) */
#page-body .rules .rules-badges { display: flex; gap: 1px; }
#page-body .thing small, #page-body .day-row small { margin-left: auto; color: var(--pencil); }
#page-body .day-row small { color: var(--paper-soft); }
#page-body .day-row:not(.mark) small { min-width: 0; overflow: hidden; text-overflow: clip; } /* a long barrio gives way to the coins, never the coins to the page's edge (phone final: San Telmo's second coin cut at 360) */
#page-body .day-row .stamp { flex: none; }
#page-body .box { flex: none; position: relative; width: 10px; height: 9px; border: 0; background: url(../public/assets/px/ui/ink-box.png) no-repeat; box-shadow: none; } /* a box inked by hand, not a form widget (cartographer r12-r13), drawn on the grid: a rotated CSS border was smoothed (pixel final) */
#page-body .done .box::after, #page-body .day-row.mark.done .box::after { content: ''; position: absolute; left: -1px; top: -3px; width: 13px; height: 9px; background: url(../public/assets/px/ui/ink-tick.png) no-repeat; } /* done: a red pen tick over the box, past its edge as a hand ticks */
#page-body .thing.done span { color: #a8936a; text-decoration: line-through; }
#page-body .day-row.now span { color: var(--ink-dark); text-decoration: underline; }
#page-body .person { display: grid; grid-template-columns: 28px 1fr; grid-auto-rows: auto; column-gap: 4px; margin-bottom: 14px; line-height: 14px; }
#page-body .person .note { grid-column: 2; color: #2f4a86; } /* Nico's ballpoint */
#page-body .person .saying { grid-column: 2; color: var(--pencil); }
#page-body .person .face-blank { grid-row: span 2; width: 28px; height: 28px; border: 1px dashed var(--paper-soft); }
#page-body .person img { grid-row: span 2; align-self: start; width: 26px; height: 26px; border: 1px solid var(--paper-soft); }
#page-body .person small { color: var(--paper-soft); }
#page-body .money { margin: 0 0 14px; font: 14px/14px Digits, monospace; color: #6b2a14; }
#page-body .pay { color: var(--paper-soft); }
#page-body .legend { margin: 0; color: var(--paper-soft); }
#page-body .key-start i, #page-body .key-route i, #map-zoom .key-start i, #map-zoom .key-route i { display: inline-block; width: 11px; height: 11px; margin: 0 4px 0 0; vertical-align: -1px; } #page-body .key-start i, #map-zoom .key-start i { background: url(../public/assets/px/ui/icon-truck.png) center / 11px 11px no-repeat; } #page-body .key-route i, #map-zoom .key-route i { height: 3px; vertical-align: 3px; background: repeating-linear-gradient(90deg, #7a160e 0 4px, transparent 4px 6px); } /* the key's start medallion and route dashes */
#page-body .legend-head, #map-zoom .legend-head { margin: 4px 0 0; font: 10px/14px Label, monospace; letter-spacing: 1px; text-transform: uppercase; color: var(--pencil); } /* the key's own small headings (cartographer r10) */
#page-body p.legend:not(.stop), #map-zoom .zoom-legend p:not(.stop):not(.legend-head) { padding-left: 10px; text-indent: -10px; } /* a wrapped line hangs under its entry, never reads as the next one */
#page-body .legend.stop, #map-zoom .zoom-legend .stop { padding-left: 15px; text-indent: -15px; } /* after the pin */
#page-body .legend b { color: var(--paper-ink); }
#page-body .note { margin: 0; color: #2f4a86; } /* Nico's ballpoint, not the printed ink */
#page-body .cup { margin: 0; color: var(--pencil); }
#page-body .map { position: relative; display: block; padding: 0; border: 0; margin: 0 0 6px; background: no-repeat #e8d6a8; cursor: zoom-in;
  box-shadow: 1px 1px 0 var(--paper-soft), 2px 2px 0 #c8ae80; } /* a cut-out lying on the page */
#page-body .tape { position: absolute; z-index: 1; width: 32px; height: 15px; pointer-events: none; }
#page-body .tape.a { right: -9px; top: -6px; background: url(../public/assets/px/ui/tape-a.png); }
#page-body .tape.b { left: -9px; bottom: -6px; background: url(../public/assets/px/ui/tape-b.png); }
#page-body .ledger .tape.b { top: -6px; bottom: auto; } /* across the slip's top-left corner over blank paper: at its foot it hid «В» of «Взнос собран» (critic, pixel final), lower it sat on the next day's weekday (cartographer r11-r13) */
#page-body .pin::after { content: ''; position: absolute; inset: -15px; } /* 44-px touch target */
#page-body .pin { position: absolute; z-index: 2; width: 16px; height: 16px; margin: -8px 0 0 -8px; padding: 3px 0 0; border: 1px solid var(--wood-0); background: var(--red); color: var(--ink);
  font: 8px/8px Display, monospace; text-align: center; box-shadow: 1px 1px 0 var(--wood-0); }
#page-body .pin.now { background: var(--amber-2); color: var(--ink-dark); }
#page-body .pin-label { position: absolute; z-index: 2; margin: -8px 0 0 10px; padding: 1px 3px; height: 18px; line-height: 14px; background: #f0e2be; border: 1px solid var(--paper-ink);
  color: var(--paper-ink); white-space: nowrap; pointer-events: none; }
#notebook .tabs { position: absolute; left: calc(var(--page-left, 16px) + var(--page-w, 200px) - 4px); top: calc(52px + var(--safe-top, 0px)); display: flex; flex-direction: column; gap: 3px; }
#notebook .tab { position: relative; width: 30px; height: 32px; padding: 0; border: 0; background: no-repeat 0 0; } /* the tab's left cap tucks under the page */
#notebook .tab::after { content: ''; position: absolute; inset: -4px -8px -4px -4px; } /* 44-px touch target */
#notebook .tab[data-tab=task] { background-image: url(../public/assets/px/ui/tab-task.png); }
#notebook .tab[data-tab=people] { background-image: url(../public/assets/px/ui/tab-people.png); }
#notebook .tab[data-tab=days] { background-image: url(../public/assets/px/ui/tab-days.png); }
#notebook .tab[data-tab=money] { background-image: url(../public/assets/px/ui/tab-money.png); }
#notebook .tab[data-tab=map] { background-image: url(../public/assets/px/ui/tab-map.png); }
#notebook .tab[data-tab=rules] { background-image: url(../public/assets/px/ui/tab-rules.png); }
#page-body .rule-group { margin: 0; padding-top: 14px; font: 8px/14px Display, monospace; text-transform: uppercase; color: var(--paper-ink); } /* a heading, in ink */
#page-body .rule-row { display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 14px; line-height: 14px; } /* the sketch, then the rule's words on the ruled lines under it */
#page-body .rule-sketch { flex: none; display: block; width: 168px; height: 120px; margin: 3px 0 3px; image-rendering: pixelated; } /* Nico's sketch of the hold (ui/rules) at ×3: nine ruled lines */
#notebook .tab:not(.on):not([data-tab=close]) { transform: translateX(-4px); filter: brightness(.75); }
#notebook .tab[data-tab=close] { position: absolute; left: 0; top: calc(var(--page-h, 260px) - 44px); background-image: url(../public/assets/px/ui/tab-close.png); } /* a tab like the others, its bottom flush with the notebook's bottom edge */

/* Scenes: a tap anywhere advances; the console keeps its look. */
#story { position: fixed; inset: 0; z-index: 10; cursor: pointer; }
#story[hidden] { display: none; }

#menu-sheet { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; zoom: var(--zoom, 1);
  background: radial-gradient(ellipse at 50% 45%, rgba(20, 10, 4, .42), rgba(20, 10, 4, .72)); } /* a darkening with a vignette, as the title card: the 3-px checker read as a screen door over the HD world (pixel, critic r11-r12) */
#menu-sheet[hidden] { display: none; }
#lang-pick { position: absolute; top: calc(8px + var(--safe-top, 0px)); right: 8px; z-index: 30; width: auto; height: 32px; padding: 0 10px; border: 6px solid transparent; border-image: url(../public/assets/px/ui/plaque.png) 11 / 11px repeat; background: #013640 padding-box; font: 10px/20px Label, monospace; color: var(--amber-2); } /* the other language, on the prologue's first line */
#menu-sheet .restart-ask { margin: -2px 0 4px; text-align: center; } #menu-sheet .restart-ask p { margin: 0 0 4px; font: 10px/12px Label, monospace; color: var(--brass-2); } /* the question under its button, then two plates apart from the finger (phone r10) */
#menu-sheet .restart-ask .pair { display: flex; gap: 6px; } #menu-sheet .restart-ask .pair .tin { flex: 1; min-width: 0; }
.sheet { display: flex; flex-direction: column; gap: 3px; width: min(196px, calc(var(--app-w, 300px) - 24px)); /* wide enough that «IDIOMA: ESPAÑOL» and «ДА, ЗАНОВО» keep one line (critic r11) */ padding: 4px; font: 12px/14px Fusion, monospace; color: var(--ink);
  border: 12px solid transparent; border-image: url(../public/assets/px/ui/frame-wide.png) 20 fill / 20px repeat; background: var(--wood-1) padding-box; } /* a solid board inside the frame: the street no longer shows through (pixel r9) */


#day-pick:not([hidden]) { position: absolute; right: 4px; bottom: 2px; width: 30px; height: 12px; font-size: 12px; opacity: .5; }

.shot *, .shot *::before, .shot *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
#safe-probe { position: fixed; left: 0; top: 0; width: 0; height: 0; padding-bottom: env(safe-area-inset-bottom, 0px); visibility: hidden; }

/* The whole map unfolded on the notebook page: same frame and size as the page, the map pans inside it. */
#map-zoom { position: absolute; inset: 0; z-index: 40; }
#map-zoom[hidden] { display: none; }
#map-zoom .zoom-page { position: absolute; left: var(--page-left, 16px); top: calc(40px + var(--safe-top, 0px)); width: calc(var(--page-w, 200px) + 4px); height: calc(var(--page-h, 260px) + 14px); background: no-repeat; }
#map-zoom .pan { position: absolute; left: 20px; right: 18px; top: 15px; height: min(354px, calc(100% - 44px)); overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y; background: #e8d6a8; scrollbar-width: none; }
#map-zoom .pan::-webkit-scrollbar { display: none; }
#map-zoom .sheet-map { position: relative; width: var(--map-w, 360px); height: var(--map-h, 540px); background: url(../public/assets/px/ui/map.png); }
#app.hi #map-zoom .sheet-map { background-image: url(../public/assets/pxhd/ui/map.png); background-size: var(--map-w, 360px) var(--map-h, 540px); }
#map-zoom .label { position: absolute; padding: 1px 3px; height: 16px; line-height: 14px; background: #f0e2be; border: 1px solid var(--paper-ink); color: var(--paper-ink); white-space: nowrap; }
#map-zoom .zoom-close { position: absolute; left: calc(100% - 8px); top: calc(var(--page-h, 260px) - 32px); width: 30px; height: 32px; padding: 0; border: 0; background: url(../public/assets/px/ui/tab-close.png); } /* the same close tab, over the notebook's */
#map-zoom .zoom-close::after { content: ''; position: absolute; inset: -8px; }
.route { position: absolute; pointer-events: none; image-rendering: auto; } /* ink on the painted map: drawn at its density, soft as it is */
.plaque-over { position: absolute; pointer-events: none; } /* a barrio's plaque, cut from the map and laid over the route */
.garage { position: absolute; pointer-events: none; }
#page-body .map { overflow: hidden; }
#page-body .map-inner { position: absolute; left: 0; top: 0; transform-origin: 0 0; background-repeat: no-repeat; } /* the cut-out's map, shrunk under the page when the route is larger than it */
#page-body .legend-head .lens { float: right; width: 12px; height: 12px; margin: -1px 2px 0 0; background: url(../public/assets/px/ui/ink-lens.png) no-repeat; cursor: zoom-in; } /* the lens in the paper's margin under the map's corner, inked: on the map it covered a barrio's plaque (critic, pixel final: BALVAN▮) */
#map-zoom .zoom-legend { position: absolute; left: 24px; right: 46px; top: 377px; bottom: 29px; overflow: hidden auto; scrollbar-width: none; overscroll-behavior: contain; color: var(--paper-ink); line-height: 14px; }
#map-zoom .zoom-legend p { margin: 0; }
.compass { position: absolute; z-index: 0; width: 11px; height: 19px; pointer-events: none; background: url(../public/assets/px/ui/ink-compass.png) no-repeat; } /* the map's north needle and its N in the map's ink, a paper rim round it: no disc (critic, pixel final: a brass disc read as a scroll button and its N was cut by the map's edge) */
#map-zoom .zoom-legend .note { color: #2f4a86; }

/* The day's receipt: a paper slip laid over the scene, then counted into the envelope. */
#receipt { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; padding: calc(44px + var(--safe-top, 0px)) 0 24px; background: rgba(14, 8, 4, .72); } /* the slip in the middle, under the day plaque; the scene sinks back */
#receipt[hidden] { display: none; }
#receipt .slip { position: relative; width: 139px; margin-top: 0; padding: 9px 7px 14px; color: #3a2626; /* tape out of the slot in the register's base: 153 px = 9 teeth, room for five-digit sums */
  background: url(../public/assets/px/ui/tape-top-edge.png) top left repeat-x, url(../public/assets/px/ui/tape-bottom-edge.png) bottom left repeat-x, linear-gradient(90deg, #2b1d16 1px, #fff3d5 1px calc(100% - 1px), #2b1d16 calc(100% - 1px)) 0 5px / 100% calc(100% - 13px) no-repeat;
  display: flex; flex-direction: column; align-items: stretch; }
#receipt h3 { display: block; text-align: center; margin: 0 0 4px; font: 8px/8px Display, monospace; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-dark); }
#receipt p { margin: 0; line-height: 14px; }
#receipt .sub { color: #6a5650; }
#receipt .sub.addr { font-size: 10px; }
#receipt .sub + .row { margin-top: 4px; }
#receipt .row { display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; min-height: 14px; line-height: 14px; padding-bottom: 1px; /* a rule of whole-pixel dashes: 2 on, 1 off */
  background: repeating-linear-gradient(90deg, #c8ae80 0 2px, transparent 2px 3px) left bottom / 100% 1px no-repeat; }
#receipt .row b { font-weight: inherit; }
#receipt .row > span { min-width: 0; white-space: normal; font: 10px/14px Fusion, monospace; letter-spacing: 0; } /* a long label wraps under itself, never pushing the sum off the slip (es final: «Para el anticipo $135.500» printed on the cobbles) */ /* the words in the proportional face; the sums keep the monospaced figures (impeccable T1) */
#receipt .row.tip b { color: inherit; }
#receipt .row.missed, #receipt .row.missed b { color: #9a8a74; }
#receipt .row.total { height: 16px; margin-top: 2px; background: none; border-top: 1px solid #3a2626; color: #3a2626; }
#receipt .saying { margin-top: 8px; color: #3a2626; }
#receipt .saying small { display: block; color: #6a5650; }
#receipt .sign { text-align: right; color: #22336e; transform: rotate(-4deg) translateX(-4px); transform-origin: right center; font-style: italic; } /* signed in ink by the client's hand, a little askew */
#receipt .tin { align-self: flex-start; margin-top: 8px; }
#page-body::-webkit-scrollbar { display: none; }
/* A refusal shown in place: the cells at fault, outlined red. */
.flash { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.bad-cell { position: absolute; outline: 2px solid #d0402a; outline-offset: -2px; background: rgba(208, 64, 42, .25); }
/* While people talk, the tools rest: the console's buttons and desk dim, the talk frame stays lit. */
#app.talking .actions, #app.talking .desk { filter: brightness(.55); pointer-events: none; }
#app.running .actions { filter: brightness(.55); pointer-events: none; } /* out on the run: nothing to press till the next day */
#receipt .why { margin: 0 0 1px; font-size: inherit; line-height: 14px; color: var(--paper-soft); }
#receipt .why.missed { color: #a8936a; }
#receipt .row.father b { color: inherit; } /* the father's half: family shares, not a fine — in ink (impeccable C2) */
#page-body .day-row.replay { cursor: pointer; min-height: 20px; align-items: center; } /* a past Saturday is a 30-pt target (phone r10, r11: 21 pt rows) */
#page-body .day-confirm { display: flex; gap: 8px; margin: 1px 0 3px 14px; } /* the question on its own line under the row tapped: two buttons a finger wide (phone r10) */
#page-body .day-confirm button { min-width: 64px; height: 30px; padding: 0 8px; border: 1px solid var(--paper-ink); background: rgba(255, 250, 235, .35); font: 12px/28px Fusion, monospace; color: var(--paper-ink); cursor: pointer; }
#page-body .day-confirm .yes { text-decoration: underline; }
#page-body .day-row.mark span { color: #2f4a86; } /* written in by hand */
#page-body .day-row.mark { align-items: flex-start; } #page-body .day-row.mark .box { margin-top: 2px; } /* its box by the first line of a note that runs on */
#page-body .day-row.mark.done span { text-decoration: line-through; color: #6f82aa; } /* gone by: ticked and struck through */
#page-body .day-row.mark small { color: var(--pencil); }
#page-body .pay-sum { display: block; margin: 0 0 0 8px; color: var(--paper-soft); }
#page-body .day-row .stamp { flex: none; margin-bottom: 2px; }
/* Item in hand: a column it can't go into shows why, with the rule's badge at its top. */
.col .why-not { position: absolute; top: 2px; pointer-events: none; }

.niche-mark { position: absolute; pointer-events: none; /* whole-pixel dashes: 2 on, 2 off, on each edge */
  background: repeating-linear-gradient(90deg, var(--brass-3) 0 2px, transparent 2px 4px) top / 100% 1px no-repeat, repeating-linear-gradient(90deg, var(--brass-3) 0 2px, transparent 2px 4px) bottom / 100% 1px no-repeat,
    repeating-linear-gradient(var(--brass-3) 0 2px, transparent 2px 4px) left / 1px 100% no-repeat, repeating-linear-gradient(var(--brass-3) 0 2px, transparent 2px 4px) right / 1px 100% no-repeat; }
#app.receipting #talk { visibility: hidden; } /* the slip has the floor: no empty talk frame behind it */
#app.receipting .desk, #app.receipting #talk { filter: brightness(.4); }
#app.receipting .actions { visibility: hidden; } /* the slip's own button only: «Взять» lay half over СОВЕТ and НАЗАД (impeccable K3) */
#app.watching #hint, #app.watching #undo, #app.watching #go { filter: brightness(.55) saturate(.5); pointer-events: none; } /* the game is showing, not asking: only МЕНЮ stays live (impeccable K4) */
#page-body .tipline { height: auto; min-height: 14px; align-items: flex-start; line-height: 14px; }
#page-body .tipline .box { margin-top: 2px; }
#page-body .tipline.lost span { color: #a8936a; text-decoration: line-through; }
#receipt .row.ticket { color: #6a5650; background: none; }
/* The register: sprite plus pop-up amount flags in its glass. */
.register { position: relative; flex: none; width: 120px; height: 96px; } /* sized before the image loads, so centring is right at once */
.register img { display: block; }
.register .flag { position: absolute; box-sizing: border-box; width: 11px; height: 16px; padding: 0 0 0 2px; text-align: left; font: 14px/16px Digits, monospace; color: #2b1d16; background: url(../public/assets/px/ui/flag.png); } /* glyph on whole pixels, not CSS-centred */
#page-body .register { margin: 2px auto 6px; }
/* The register's paper tape on the Money page: crisp torn edges, one line a day. */
#page-body .register-caption { margin: 0; text-align: center; color: var(--paper-soft); }
#page-body .ledger { position: relative; box-sizing: border-box; margin: 8px 0 0; color: #3a2626; padding: 8px 7px 12px; line-height: 14px;
  background: url(../public/assets/px/ui/tape-top-edge.png) top left repeat-x, url(../public/assets/px/ui/tape-bottom-edge.png) bottom left repeat-x, linear-gradient(90deg, #2b1d16 1px, #fff3d5 1px calc(100% - 1px), #2b1d16 calc(100% - 1px)) 0 5px / 100% calc(100% - 13px) no-repeat; }
#page-body .ledger.first { padding-bottom: 4px; background-image: url(../public/assets/px/ui/tape-top-edge.png), linear-gradient(90deg, #2b1d16 1px, #fff3d5 1px calc(100% - 1px), #2b1d16 calc(100% - 1px)); background-position: top left, 0 5px; background-size: auto, 100% calc(100% - 5px); background-repeat: repeat-x, no-repeat; } /* the tape's head: torn at the top, running on below */
#page-body .ledger.cont { margin-top: 0; padding: 0 7px 2px; background: linear-gradient(90deg, #2b1d16 1px, #fff3d5 1px calc(100% - 1px), #2b1d16 calc(100% - 1px)); } /* a day's piece of the same tape, flush under the one before */
#page-body .ledger.cont.last { padding-bottom: 12px; background: url(../public/assets/px/ui/tape-bottom-edge.png) bottom left repeat-x, linear-gradient(90deg, #2b1d16 1px, #fff3d5 1px calc(100% - 1px), #2b1d16 calc(100% - 1px)) 0 0 / 100% calc(100% - 8px) no-repeat; } /* torn at its foot */
#page-body .tape-line { display: flex; align-items: flex-start; gap: 2px; height: 14px; }
#page-body .tape-line span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: clip; }
#page-body .tape-line b { font-weight: inherit; color: var(--ink-dark); }
#page-body .tape-line .stamp { flex: none; margin-top: 2px; }
#page-body .tape-line b { min-width: 46px; text-align: right; } /* amounts in one right-aligned column, clear of the coins */
#page-body .tape-line.total { margin-top: 3px; padding-top: 2px; background: repeating-linear-gradient(90deg, #9a8a74 0 2px, transparent 2px 3px) left top / 100% 1px no-repeat; color: #3a2626; }
#page-body .tape-line.sum-end { margin-top: 1px; padding-top: 3px; margin-bottom: 4px; padding-bottom: 3px; background-image: repeating-linear-gradient(90deg, #9a8a74 0 2px, transparent 2px 3px), repeating-linear-gradient(90deg, #9a8a74 0 2px, transparent 2px 3px); background-position: left top, left bottom; background-size: 100% 1px; background-repeat: no-repeat; } /* the sums ruled off from the days under them */
/* The board over the cab before day 3: three planks, dark seams, a nail at each end. */
.niche-board { position: absolute; pointer-events: none; outline: 1px solid #2b1a0e; outline-offset: -1px;
  background: radial-gradient(circle at 4px 4px, #c9b48a 0 1px, transparent 1px) 0 0 / 100% 8px no-repeat,
    radial-gradient(circle at calc(100% - 4px) 4px, #c9b48a 0 1px, transparent 1px) 0 0 / 100% 8px no-repeat,
    repeating-linear-gradient(#9a6a3e 0 2px, #84562f 2px 7px, #4a2c16 7px 8px); }
#page-body .ledger-head { margin: 0 0 2px; color: #6a5650; }
#page-body .tape-line.who { color: #6a5650; }
#page-body .tape-line.who { display: block; height: auto; }
/* The wrench on what can travel in parts: one tap takes it apart (or puts it back), while none of it is loaded. */
.crate > .wrench { position: absolute; left: -4px; top: -4px; z-index: 2; width: 11px; height: 11px; padding: 0; border: 0; background: url(../public/assets/px/ui/wrench.png) 1px 1px no-repeat, #f0e2be; outline: 1px solid #2b1d16; }
#app.hi .crate > .wrench { background: url(../public/assets/pxhd/ui/wrench.png) 1px 1px / 9px 9px no-repeat, #f0e2be; } /* the drawn spanner, sharp on big screens */
.crate > .wrench::after { content: ''; position: absolute; inset: -8px; } /* a thumb-sized target */
.post-mark { position: absolute; width: 11px; height: 7px; background: url(../public/assets/px/ui/post.png); pointer-events: none; }
/* The player's answer in a scene: paper slips over the dimmed buttons and notebook, inside #console (one pixel grid). */
#choices { position: absolute; left: 6px; right: 6px; top: calc(var(--talk-h, 84px) + 8px); bottom: calc(6px + var(--safe-bottom, 0px)); z-index: 12; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; scrollbar-width: none; }
#choices[hidden] { display: none; }
#app.vignette #choices { top: calc(8px + var(--safe-top, 0px)); bottom: calc(var(--app-h) - var(--story-talk-y) + 6px); max-height: none; } /* over the print, ending above the words: no option ever under the talk box */
#app.vignette #choices > :first-child { margin-top: auto; } /* gathered down by the words, in the thumb's reach, not under the notch (phone r8) */
#choices.confirm .choice:first-child { background: #fff3cf; } #choices .choice.back { align-self: flex-start; }
#choices.more { padding-bottom: 18px; } #choices.more::after { content: ''; position: sticky; bottom: -18px; align-self: flex-end; margin-right: 6px; flex: none; width: 13px; height: 13px; background: url(../public/assets/px/ui/arrow.png) no-repeat; animation: bob .8s steps(2) infinite; } /* more sayings below */
#notebook .page.more::after, #map-zoom .zoom-page.more::after { content: ''; position: absolute; right: 26px; bottom: 15px; width: 13px; height: 13px; background: url(../public/assets/px/ui/arrow.png) no-repeat; animation: bob .8s steps(2) infinite; pointer-events: none; } /* the page goes on below: the hand in the bottom margin */
#choices .choice { flex: none; min-height: 32px; padding: 6px 8px; border: 1px solid #2b1d16; background: #f0e2be; color: #3a2626; font: 12px/14px Fusion, monospace; text-align: left; box-shadow: 2px 2px 0 #2b1d16; }
#choices .choice:active { translate: 1px 1px; box-shadow: 1px 1px 0 #2b1d16; }
/* The drive between stops (main.mjs drive()): whole-pixel layers moved by JS, never CSS-eased. The map keeps its own
   height (the map's own, at most); the street below takes the rest, its layers anchored to the bottom and the sky stretching. */
#drive { position: absolute; inset: 0; z-index: 25; display: flex; flex-direction: column; padding: calc(10px + var(--safe-top, 0px)) 0 var(--safe-bottom, 0px); background: #2b1d16; overflow: hidden; }
#drive[hidden] { display: none; }
#drive .drive-map { position: relative; flex: 0 1 var(--map-h, 354px); min-height: 150px; margin: 0 8px; overflow: hidden; border: 1px solid #120b07; background: #e8d6a8 no-repeat; box-shadow: 2px 2px 0 #120b07; }
#drive .drive-map canvas, #drive .truck-icon { position: absolute; left: 0; top: 0; }
#drive .drive-inner { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
#drive .truck-icon { z-index: 1; width: 34px; height: 22px; transform-origin: 17px 19px; image-rendering: pixelated; } /* the 17×11 icon doubled by whole pixels over the magnified map, never scaled with it (pixel final: a smoothed 3× icon was a smudge) */
#drive .drive-where { flex: none; align-self: center; position: relative; z-index: 2; margin: 0 8px -26px; padding: 1px 8px 0; /* hung from the map's bottom edge over the street's sky, not floating in a bare band (critic r8), and not over the map's foot, where it hid a barrio plaque (critic r9: BOEDO) */ font: 12px/14px Fusion, monospace; color: var(--ink); text-align: center; white-space: nowrap;
  border: 6px solid transparent; border-image: url(../public/assets/px/ui/plaque.png) 11 / 11px repeat; background: #013640 padding-box; } /* where to: the day plaque's riveted tin, the same family, not a web chip */
#drive .drive-where small { display: block; margin-top: 1px; font: 8px/10px Display, monospace; color: var(--brass-2); } /* the street and number under the name */
#drive .road { position: relative; flex: 1 0 210px; overflow: hidden; }
#drive .road > i { position: absolute; left: 0; right: 0; background-repeat: repeat-x; }
#drive .sky { top: 0; bottom: 40px; background: linear-gradient(180deg, #db9853 0 5px, #e4a65e 5px 11px, #eab46c 11px 18px, #efc27c 18px 26px, #f4d091 26px 35px, #f8dfac 35px); } /* stepped bands from the top down to a pale haze over the far roofs: the strip shows only its top 40-60 px of sky (critic r9: the only bare fill) */
#drive .far { bottom: 106px; height: 78px; background-image: url(../public/assets/px/drive/roof.png); filter: saturate(.35) brightness(1.18) opacity(.5); } /* the city further off, in the haze */
#drive .roof { bottom: 88px; height: 78px; background-image: url(../public/assets/px/drive/roof.png); }
#drive .street { bottom: 40px; height: 110px; background-image: url(../public/assets/px/drive/street.png); }
#drive .asphalt { bottom: 0; height: 40px; background: linear-gradient(#6b605a 0 2px, #4a4038 2px) 0 0 / 100% 100% no-repeat, #4a4038; }
#drive .asphalt::after { content: ''; position: absolute; left: 0; right: 0; top: 22px; height: 2px; background: repeating-linear-gradient(90deg, #d9c79a 0 10px, transparent 10px 24px); background-position: var(--lane, 0) 0; }
#drive .rig { position: absolute; left: 6px; bottom: 18px; width: 240px; height: 135px; }
#drive .rig > img { position: absolute; left: 0; top: 0; width: 240px; height: 135px; }
#app.hi #drive .roof { background-image: url(../public/assets/pxhd/drive/roof.png); background-size: 260px 78px; }
#app.hi #drive .street { background-image: url(../public/assets/pxhd/drive/street.png); background-size: 330px 110px; }
#app.hi #drive .far { background-image: url(../public/assets/pxhd/drive/roof.png); background-size: 260px 78px; }
/* Today's stops: enamel pushpins on the map (no text over the painting), the names in the legend below with the same head. */
.route-pin { position: absolute; width: 17px; height: 22px; padding-top: 4px; box-sizing: border-box; text-align: center; font: 8px/8px Display, monospace; color: #fff3d5; text-shadow: 1px 1px 0 #2b1d16; pointer-events: none; background: no-repeat 0 0; }
.route-pin.at-0 { background-image: url(../public/assets/px/ui/pin-0.png); }
.route-pin.at-1 { background-image: url(../public/assets/px/ui/pin-1.png); }
.route-pin.at-2 { background-image: url(../public/assets/px/ui/pin-2.png); }
.pin-thread { position: absolute; width: 1px; background: #2b1d16; pointer-events: none; } /* a pin lifted off a barrio's plaque, on its thread to the point */
.route-pin.next { animation: pin-hop 1.2s steps(1) infinite; } /* the next stop hops a pixel: here first */
@keyframes pin-hop { 0%, 60% { translate: 0 0; } 70%, 90% { translate: 0 -2px; } }
.route-pin.mini { position: static; display: inline-block; width: 11px; height: 11px; margin: 0 4px 0 0; padding-top: 2px; vertical-align: -1px; font-size: 8px; }
.route-pin.mini.at-0 { background-image: url(../public/assets/px/ui/pin-mini-0.png); }
.route-pin.mini.at-1 { background-image: url(../public/assets/px/ui/pin-mini-1.png); }
.route-pin.mini.at-2 { background-image: url(../public/assets/px/ui/pin-mini-2.png); }
#page-body .legend.stop, #map-zoom .zoom-legend .stop { margin: 0; color: var(--ink-dark, #2b1d16); }
#map-zoom .map-title { position: absolute; left: 20px; top: 15px; }
/* HD world: the AI art is painted illustration, so it is scaled smoothly; the UI around it keeps crisp pixels. */
#app.hi #bg, #app.hi #vignette, #app.hi #held, #app.hi #truck, #app.hi .crate > img:not(.shadow), #app.hi #nico, #app.hi #roberto, #app.hi #idle-nico, #app.hi #face, #app.hi #drive .rig img, #app.hi #drive .road > i,
#app.hi #page-body .map, #app.hi #drive .drive-map, #app.hi #who-face, #app.hi #page-body .person img.face { image-rendering: auto; } /* faces are character art: the world's HD hand, like the big portrait */
#map-zoom .sheet-map { image-rendering: pixelated; } /* the ×2 view: the map's own dots doubled, not a bilinear blur (pixel r9) */
#app.hi #vignette.crisp { image-rendering: pixelated; } /* a story print redrawn on whole device pixels (main.mjs crispPrint): blocks, never blur */

/* the epilogue: Turin has no truck and no load */
#app.epilogue #road-shade, #app.epilogue #truck, #app.epilogue #cargo, #app.epilogue #columns, #app.epilogue #street-items,
#app.epilogue #idle-nico, #app.epilogue #nico, #app.epilogue #roberto { visibility: hidden; }
#app.epilogue .actions, #app.epilogue .desk, #app.prologue .actions, #app.prologue .desk, #app.prologue #plaque,
#app.vignette .actions, #app.vignette .desk, #app.vignette #plaque { visibility: hidden; } /* a drawn moment: no day plaque over the kitchen, no loading console */ /* Turin: no load, no buttons for one */
/* in their place, Carlo's table: the board, the knight in his hand, the letters from Buenos Aires */
#epi-board { position: absolute; left: 4px; right: 4px; top: calc(8px + var(--talk-h, 84px) + var(--row-gap, 4px)); bottom: calc(6px + var(--safe-bottom, 0px)); width: calc(100% - 8px); height: auto; object-fit: cover; object-position: 50% 40%; box-shadow: 0 0 0 1px #2b1d16, 0 0 0 3px #8a5a2b, 0 0 0 4px #2b1d16; }
#app:not(.epilogue) #epi-board { display: none; }

#tilt { position: absolute; inset: 0; pointer-events: none; } /* Roberto's chalk on the cobbles: the balance scale (main.mjs balanceScale) */
#tilt .scale { position: absolute; } /* chalk in the world's HD (drawn at device pixels), not on the UI's grid */
#tilt .end { position: absolute; font: 10px/10px Label, monospace; color: #efe7cf; opacity: .9; text-shadow: 1px 1px 0 rgba(30, 20, 12, .45); white-space: nowrap; }
#tilt .end.cab { text-align: right; }
@keyframes chalk-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes chalk-word { from { opacity: 0; } to { opacity: .9; } }
.land.tilts .ghost-line { filter: url(#chalk-red); } /* the balance alone would shut the day there: red chalk */
.land.tilts::after { content: ''; position: absolute; inset: 3px 2px 1px; background: repeating-linear-gradient(-45deg, rgba(255, 106, 77, .42) 0 1px, transparent 1px 4px); pointer-events: none; } /* hatched in red, not only outlined: on a wide thing the red and white outlines crossed (phone r10) */
#lands:has(.land.tilts) .land:not(.tilts) { opacity: .55; } /* the white places dimmed while a red one shows */
#in-hand .rule .kg { color: #3a2626; }
#notebook .kg, #notebook .trip-note { color: var(--pencil); } #page-body .rules .rules-badges ~ .kg, #page-body .rules .rules-badges ~ .trip-note, #page-body .rules .kg + .trip-note { margin-left: 5px; } /* pencil beside the red rule words: a planning note, not a rule */

/* on a two-trip day's first trip, what waits for the second stands dimmed */
#street-items .later > img:not(.trip-loop) { filter: brightness(.5) saturate(.5); }
#street-items .trip-loop { position: absolute; pointer-events: none; } /* Roberto's chalk round the feet of what waits for the second trip (main.mjs chalkLoop) */

/* a wrench nobody has used yet rocks a pixel each way, in steps */
.wrench.nudge { animation: nudge 1.2s steps(1) infinite; }
#book.nudge { animation: nudge 1.4s steps(1) infinite; } /* the notebook, once Roberto has said it is there, until it is first opened */
#page-body .nowrap { white-space: nowrap; }
#page-body .rule-badge { display: inline-block; width: 11px; height: 11px; margin: 0 2px 0 1px; vertical-align: -1px; } /* the mark the things wear, before its name */
#page-body .rule-badge.ring { width: 14px; height: 12px; filter: brightness(.35) sepia(.6); } /* Roberto's chalk ring, darkened to read on paper */
@keyframes nudge { 0%, 60%, 100% { translate: 0 0; } 70% { translate: -1px 0; } 80% { translate: 1px 0; } 90% { translate: 0 -1px; } }

/* a post ahead: the top-row gaps a torch would look through, while the niche holds something */
.sight { position: absolute; box-sizing: border-box; border: 1px dashed #f6d77a; background: rgba(246, 215, 122, .18); pointer-events: none; }

/* the stop's colour behind an item's rule badges: one marker says where it goes and how to carry it */

/* a story illustration covers the street, the truck and the load; the plaque stays */
#vignette { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% var(--art-top, 0px); background: #1a110b; z-index: 4; } /* the whole frame, a panel above the talk */

/* ---- compact console (one strip + one row of plates); the talk frame rides over the scene ---- */
#console { gap: 4px; }
#strip { flex: none; height: 18px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 2px; }
#strip #marks { position: static; width: auto; display: flex; flex-direction: row; align-items: center; gap: 8px; }
#strip .mark-row { height: 18px; }
#strip .mark-row.bottom .bar { width: 48px; flex: none; }
#strip #savings { width: auto; height: 18px; padding: 0; display: flex; align-items: center; background: none; }
#strip #savings-sum { padding: 1px 3px 0; border: 1px solid #6b4a2c; background: #e9d6a8; font: 14px/14px Digits, monospace; color: #3a1e0c; }
.actions { height: 44px; padding-left: var(--btn-pad, 0px); }
.tin.sq { width: var(--sq, 44px); height: var(--sq, 44px); padding: 4px 0 0; background-image: var(--sq-plate); flex-direction: column; gap: 3px; }
.tin.sq span { font: 10px/10px Label, monospace; letter-spacing: 0; text-transform: uppercase; } /* МЕНЮ · СОВЕТ · НАЗАД under the icons, as in the mockup: the narrow face, clear of the gold inner frame */
.tin.sq:active:not(:disabled), .tin.sq:disabled { background-image: var(--sq-plate-down); }
.tin.go { height: 44px; width: var(--go-w, 70px); padding: 4px 0 0; flex-direction: column; gap: 3px; } /* the truck over В ПУТЬ, as the squares carry their icons (the mockup) */
.actions { height: var(--sq, 44px); align-items: center; } /* narrow phones: smaller squares, the go plate keeps its height */
.tin.go span { font: 10px/10px Label, monospace; letter-spacing: 0; text-transform: uppercase; text-shadow: 1px 1px 0 #f2d9a0; }
#talk { position: absolute; left: 4px; right: 4px; z-index: 6; height: var(--talk-h, 84px); top: calc(var(--scene-h, 309px) - var(--talk-h, 84px) - 4px); }
#talk[hidden] { display: none; }
#app.talking:not(.vignette) #talk { top: auto; bottom: 4px; height: var(--talk-h); } /* one place, one size for every line of a scene: sized to its words, the frame and the face jumped (owner) */ /* at a stop: low over the road and only as tall as the words — the client's facade and sign stay in sight, the things set down mostly too */
#app.narrow.talking.at-stop:not(.vignette) #talk #portrait { display: none; } /* at 360 the portrait left the words a column two words wide: the name plate says who */
#app:not(.talking) #talk.toast { top: auto; bottom: 4px; pointer-events: auto; height: auto; min-height: 50px; } /* three lines' height whatever the bark: only a rare long one grows it */ /* sized to its words, not four lines: it covers as little of the road as it can */
#app:not(.talking) #talk.toast #portrait { display: none; } /* the name plate says who: no big portrait over the things on the road */ /* every word while loading in one place: at the bottom over the road, above the console, growing upwards — never over the truck */ /* a toast isn't paged: a long bark grows the frame, never spills out */
#choices { top: auto; bottom: calc(var(--talk-h, 84px) + 12px); max-height: 60%; }
#app.talking .actions, #app.talking #strip { filter: brightness(.55); pointer-events: none; }
#book.tin { position: static; width: var(--sq, 44px); height: var(--sq, 44px); padding: 0; background: var(--sq-plate) no-repeat; }
#book.tin:active { background-image: var(--sq-plate-down); }
.tin.go { background-image: var(--go-plate); }
.tin.go:active:not(:disabled) { background-image: var(--go-plate-down); }
.tin.go.waiting, .tin.go:disabled, .mid .tin.go.waiting, .wide .tin.go.waiting { background-image: var(--go-plate-off); }


/* the notebook and the envelope lying at the bottom edge: only their tops show */
#console > .desk { height: calc(var(--peek, 46px) + var(--safe-bottom, 0px)); overflow: hidden; padding: 0 0 0 2px; margin-bottom: calc(-6px - var(--safe-bottom, 0px)); align-items: flex-start; position: relative; }
#app:not(.desk-full) #console::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(5px + var(--safe-bottom, 0px)); z-index: 3; pointer-events: none;
  background: linear-gradient(#b07a44, #b07a44) 0 0 / 100% 1px no-repeat, linear-gradient(#2b1d16, #2b1d16) 0 1px / 100% 1px no-repeat, url(../public/assets/px/ui/wood-tile.png) 0 2px; box-shadow: 0 -2px 0 rgba(20, 10, 4, .45); } /* the drawer's front lip: the notebook and the envelope tucked in it, not cut by the screen's edge (impeccable K1), the home bar's strip under it (A2) */
#console > .desk #book { width: 150px; height: 98px; background-image: url(../public/assets/px/ui/book-closed.png); }
#console > .desk #marks { top: 5px; bottom: auto; }
#console > .desk .mark-row { height: 15px; } /* two stops fit in the peek; no day has a third */
#marks .pips { display: flex; gap: 1px; align-items: center; } /* the same rings as the full desk: one counter, one drawing */
#marks .count { font: 12px/12px Digits, monospace; color: #f0e2be; text-shadow: 1px 1px 0 #2b1d16; } /* past five things: «3/7» */
#console > .desk #savings { height: 40px; padding-top: 22px; background-image: url(../public/assets/px/ui/envelope-peek.png); } /* banknotes out of the top, the sum on its face */
#console > .desk #savings.empty { background-image: url(../public/assets/px/ui/envelope-peek-empty.png); }
#console > .desk #savings-sum { padding: 1px 3px 0; }
/* not lit yet: the same ochre tin, dimmed — never a plate of another material */
.tin.go.waiting, .tin.go:disabled, .mid .tin.go.waiting, .wide .tin.go.waiting { background-image: var(--go-plate); filter: brightness(.62) saturate(.55); }
/* room for the whole desk: the closed notebook with its stop tags and a dot per thing, the kraft pocket with the coins */
#app.desk-full #console > .desk { height: 98px; overflow: visible; margin-bottom: 0; }
#app.desk-full #console > .desk #marks { top: 9px; }
#app.desk-full #console > .desk .mark-row { height: auto; min-height: 17px; margin-bottom: 4px; align-items: flex-start; }
#app.desk-full #marks .pips { padding-top: 3px; } /* five in a row clear of the elastic band */
#app.desk-full #console > .desk #savings { height: 87px; padding-top: 44px; background-image: url(../public/assets/px/ui/pocket-coins.png); }
#app.desk-full #console > .desk #savings.empty { background-image: url(../public/assets/px/ui/pocket-empty.png); }

/* Story moments (a drawn frame, the prologue, the day's title card, a chapter's end) have the whole screen: no console, no
   plaque, no street behind; the picture full width, the words under it without a portrait, the pair centred (main.mjs fit). */
#app.vignette #scene, #app.prologue #scene { height: var(--app-h); }
#app.vignette #console, #app.prologue #console, #app.titled #plaque, #app.titled #talk { display: none; }
#app.titled #console { pointer-events: none; } /* the day's card over its street with the console dimmed under it, never a black band below the road */
#app.vignette #scene::before { content: ''; position: absolute; inset: 0; z-index: 3; background: #120b07; }
#app.titled #scene::before { content: ''; position: absolute; inset: 0; z-index: 3; background: rgba(18, 11, 7, .72); } /* dim enough that the card reads first, not the tags on the road (impeccable V4) */ /* the title card over the day's own street, dimmed: not a black loading screen */
#app.vignette #scene::before { background: linear-gradient(rgba(10, 6, 3, .55), rgba(10, 6, 3, .55)), url(../public/assets/px/ui/wood-tile.png) repeat; } /* the kitchen table under the print, not an empty black band */
#app.vignette #vignette { inset: auto; left: var(--story-art-x); top: var(--story-art-y); width: var(--story-art-w); height: var(--story-art-h); object-fit: cover; box-shadow: 0 0 0 3px #efe3c6, 0 0 0 4px #8a7556, 3px 4px 0 4px rgba(0, 0, 0, .45); } /* a photo print: cream border, a hard shadow */
#app.vignette #talk { top: var(--story-talk-y); left: 6px; right: 6px; height: var(--talk-h); } /* in the space under the print, one size for every line (owner: a box sized to its words jumped) */
#app.vignette #talk #portrait { display: none; } /* the picture shows who is there: the name plate is enough */
#app.titled #title-card { justify-content: center; padding-top: 0; }
#title-tap { margin: 18px 24px 0; max-width: 240px; text-align: center; font: 12px/16px Fusion, monospace; color: #f0e2be; text-shadow: 1px 1px 0 var(--wood-0); }
#title-tap::after { content: ''; display: inline-block; width: 13px; height: 13px; margin-left: 6px; vertical-align: -2px; background: url(../public/assets/px/ui/arrow.png) no-repeat; animation: bob .8s steps(2) infinite; } /* the talk frame's own «next» hand, bobbing */