/* Yuzu Onsen Capybaras: the page around the game canvas, in pixel style to match the game. */

/* the pixel font: Fusion Pixel 12px (SIL OFL 1.1, see assets/fonts), cut down by tools/build_font.py; English
   uses its Latin cut first, whose quotes, dashes and ellipsis are narrow (the Chinese build's are full width) */
@font-face {
  font-family: "Fusion Pixel";
  src: url("assets/fonts/pixel.woff2?v=dc5f121687") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Fusion Pixel Latin";
  src: url("assets/fonts/pixel-latin.woff2?v=dc5f121687") format("woff2");
  font-display: swap;
}

:root {
  --ink: #3a2a20;
  --ink-muted: #6e5a4a;
  --paper: #fff8ec;
  --paper-2: #f4e9d8;
  --line: #d9c6ab;
  --wood: #6b4a32;
  --accent: #d9772e;
  --accent-fill: #b15e20; /* under white text: 4.7:1 */
  --accent-dark: #8f4a19;
  --hud-ink: #fff4e2;
  --focus: #3d8bd9;
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", system-ui, sans-serif;
  --pixel: "Fusion Pixel", var(--font);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  /* one pixel of the frames round the boxes and buttons */
  --u: 2px;
  /* The font is drawn 12 pixels tall and stays sharp only when each of its pixels is a whole number of
     screen pixels: so the sizes go in steps that depend on the screen's pixel density. s: labels;
     hud: the clock and buttons over the game; m: most text; l: titles. */
  --fs-s: 12px;
  --fs-hud: 24px;
  --fs-m: 24px;
  --fs-l: 36px;
  --fs-xl: 48px; /* (the name of the game on the title screen) */
  --fs-name: 24px; /* (who's speaking, over their words in the dialogue box: the labels' size, half theirs, was too small
     to read; the words' own size, but on a phone, where the box is narrow, a step under them) */
  /* pixel-art frames (tools/build_frames.py): outline with rounded pixel corners, a light and a shaded bevel.
     The frame is only the edge; each box's own background (inside the edge) is its fill colour below. */
  --fill-paper: #fff8ec;
  --fill-paper2: #f4e9d8;
  --fill-card: #ffffff;
  --fill-picked: #fff1e2;
  --fill-hud: rgba(46, 33, 26, 0.9);
  --fill-accent: #b15e20;
  --fill-accent-down: #9c521b;
  --fill-quiet: #f4e9d8;
  --fill-quiet-down: #ebdcc6;
  --fill-mint: #e8f1e4;
  --frame-paper: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%277%27 height=%277%27 shape-rendering=%27crispEdges%27%3E%3Crect x=%271%27 y=%270%27 width=%275%27 height=%271%27 fill=%27%235c3f2c%27/%3E%3Crect x=%271%27 y=%276%27 width=%275%27 height=%271%27 fill=%27%235c3f2c%27/%3E%3Crect x=%270%27 y=%271%27 width=%271%27 height=%275%27 fill=%27%235c3f2c%27/%3E%3Crect x=%276%27 y=%271%27 width=%271%27 height=%275%27 fill=%27%235c3f2c%27/%3E%3Crect x=%271%27 y=%271%27 width=%275%27 height=%271%27 fill=%27%23ffffff%27/%3E%3Crect x=%271%27 y=%272%27 width=%271%27 height=%273%27 fill=%27%23ffffff%27/%3E%3Crect x=%271%27 y=%275%27 width=%275%27 height=%271%27 fill=%27%23e9d7bd%27/%3E%3Crect x=%275%27 y=%272%27 width=%271%27 height=%273%27 fill=%27%23e9d7bd%27/%3E%3Crect x=%272%27 y=%272%27 width=%273%27 height=%273%27 fill=%27%23fff8ec%27/%3E%3C/svg%3E");
  --frame-paper2: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%277%27 height=%277%27 shape-rendering=%27crispEdges%27%3E%3Crect x=%271%27 y=%270%27 width=%275%27 height=%271%27 fill=%27%23a88b70%27/%3E%3Crect x=%271%27 y=%276%27 width=%275%27 height=%271%27 fill=%27%23a88b70%27/%3E%3Crect x=%270%27 y=%271%27 width=%271%27 height=%275%27 fill=%27%23a88b70%27/%3E%3Crect x=%276%27 y=%271%27 width=%271%27 height=%275%27 fill=%27%23a88b70%27/%3E%3Crect x=%271%27 y=%271%27 width=%275%27 height=%271%27 fill=%27%23fffdf7%27/%3E%3Crect x=%271%27 y=%272%27 width=%271%27 height=%273%27 fill=%27%23fffdf7%27/%3E%3Crect x=%271%27 y=%275%27 width=%275%27 height=%271%27 fill=%27%23dcc8ab%27/%3E%3Crect x=%275%27 y=%272%27 width=%271%27 height=%273%27 fill=%27%23dcc8ab%27/%3E%3Crect x=%272%27 y=%272%27 width=%273%27 height=%273%27 fill=%27%23f4e9d8%27/%3E%3C/svg%3E");
  --frame-card: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%277%27 height=%277%27 shape-rendering=%27crispEdges%27%3E%3Crect x=%271%27 y=%270%27 width=%275%27 height=%271%27 fill=%27%23c9b394%27/%3E%3Crect x=%271%27 y=%276%27 width=%275%27 height=%271%27 fill=%27%23c9b394%27/%3E%3Crect x=%270%27 y=%271%27 width=%271%27 height=%275%27 fill=%27%23c9b394%27/%3E%3Crect x=%276%27 y=%271%27 width=%271%27 height=%275%27 fill=%27%23c9b394%27/%3E%3Crect x=%271%27 y=%271%27 width=%275%27 height=%271%27 fill=%27%23ffffff%27/%3E%3Crect x=%271%27 y=%272%27 width=%271%27 height=%273%27 fill=%27%23ffffff%27/%3E%3Crect x=%271%27 y=%275%27 width=%275%27 height=%271%27 fill=%27%23efe4d2%27/%3E%3Crect x=%275%27 y=%272%27 width=%271%27 height=%273%27 fill=%27%23efe4d2%27/%3E%3Crect x=%272%27 y=%272%27 width=%273%27 height=%273%27 fill=%27%23ffffff%27/%3E%3C/svg%3E");
  --frame-picked: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%277%27 height=%277%27 shape-rendering=%27crispEdges%27%3E%3Crect x=%271%27 y=%270%27 width=%275%27 height=%271%27 fill=%27%23c96a22%27/%3E%3Crect x=%271%27 y=%276%27 width=%275%27 height=%271%27 fill=%27%23c96a22%27/%3E%3Crect x=%270%27 y=%271%27 width=%271%27 height=%275%27 fill=%27%23c96a22%27/%3E%3Crect x=%276%27 y=%271%27 width=%271%27 height=%275%27 fill=%27%23c96a22%27/%3E%3Crect x=%271%27 y=%271%27 width=%275%27 height=%271%27 fill=%27%23ffffff%27/%3E%3Crect x=%271%27 y=%272%27 width=%271%27 height=%273%27 fill=%27%23ffffff%27/%3E%3Crect x=%271%27 y=%275%27 width=%275%27 height=%271%27 fill=%27%23f3d9bf%27/%3E%3Crect x=%275%27 y=%272%27 width=%271%27 height=%273%27 fill=%27%23f3d9bf%27/%3E%3Crect x=%272%27 y=%272%27 width=%273%27 height=%273%27 fill=%27%23fff1e2%27/%3E%3C/svg%3E");
  --frame-hud: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%277%27 height=%277%27 shape-rendering=%27crispEdges%27%3E%3Crect x=%271%27 y=%270%27 width=%275%27 height=%271%27 fill=%27rgba(18,12,9,0.92)%27/%3E%3Crect x=%271%27 y=%276%27 width=%275%27 height=%271%27 fill=%27rgba(18,12,9,0.92)%27/%3E%3Crect x=%270%27 y=%271%27 width=%271%27 height=%275%27 fill=%27rgba(18,12,9,0.92)%27/%3E%3Crect x=%276%27 y=%271%27 width=%271%27 height=%275%27 fill=%27rgba(18,12,9,0.92)%27/%3E%3Crect x=%271%27 y=%271%27 width=%275%27 height=%271%27 fill=%27%236a5446%27/%3E%3Crect x=%271%27 y=%272%27 width=%271%27 height=%273%27 fill=%27%236a5446%27/%3E%3Crect x=%271%27 y=%275%27 width=%275%27 height=%271%27 fill=%27%232b201a%27/%3E%3Crect x=%275%27 y=%272%27 width=%271%27 height=%273%27 fill=%27%232b201a%27/%3E%3Crect x=%272%27 y=%272%27 width=%273%27 height=%273%27 fill=%27rgba(46,33,26,0.9)%27/%3E%3C/svg%3E");
  --frame-accent: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%277%27 height=%277%27 shape-rendering=%27crispEdges%27%3E%3Crect x=%271%27 y=%270%27 width=%275%27 height=%271%27 fill=%27%235e2f12%27/%3E%3Crect x=%271%27 y=%276%27 width=%275%27 height=%271%27 fill=%27%235e2f12%27/%3E%3Crect x=%270%27 y=%271%27 width=%271%27 height=%275%27 fill=%27%235e2f12%27/%3E%3Crect x=%276%27 y=%271%27 width=%271%27 height=%275%27 fill=%27%235e2f12%27/%3E%3Crect x=%271%27 y=%271%27 width=%275%27 height=%271%27 fill=%27%23e3925a%27/%3E%3Crect x=%271%27 y=%272%27 width=%271%27 height=%273%27 fill=%27%23e3925a%27/%3E%3Crect x=%271%27 y=%275%27 width=%275%27 height=%271%27 fill=%27%238a4517%27/%3E%3Crect x=%275%27 y=%272%27 width=%271%27 height=%273%27 fill=%27%238a4517%27/%3E%3Crect x=%272%27 y=%272%27 width=%273%27 height=%273%27 fill=%27%23b15e20%27/%3E%3C/svg%3E");
  --frame-accent-down: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%277%27 height=%277%27 shape-rendering=%27crispEdges%27%3E%3Crect x=%271%27 y=%270%27 width=%275%27 height=%271%27 fill=%27%235e2f12%27/%3E%3Crect x=%271%27 y=%276%27 width=%275%27 height=%271%27 fill=%27%235e2f12%27/%3E%3Crect x=%270%27 y=%271%27 width=%271%27 height=%275%27 fill=%27%235e2f12%27/%3E%3Crect x=%276%27 y=%271%27 width=%271%27 height=%275%27 fill=%27%235e2f12%27/%3E%3Crect x=%271%27 y=%271%27 width=%275%27 height=%271%27 fill=%27%238a4517%27/%3E%3Crect x=%271%27 y=%272%27 width=%271%27 height=%273%27 fill=%27%238a4517%27/%3E%3Crect x=%271%27 y=%275%27 width=%275%27 height=%271%27 fill=%27%23b8682c%27/%3E%3Crect x=%275%27 y=%272%27 width=%271%27 height=%273%27 fill=%27%23b8682c%27/%3E%3Crect x=%272%27 y=%272%27 width=%273%27 height=%273%27 fill=%27%239c521b%27/%3E%3C/svg%3E");
  --frame-quiet: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%277%27 height=%277%27 shape-rendering=%27crispEdges%27%3E%3Crect x=%271%27 y=%270%27 width=%275%27 height=%271%27 fill=%27%23a88b70%27/%3E%3Crect x=%271%27 y=%276%27 width=%275%27 height=%271%27 fill=%27%23a88b70%27/%3E%3Crect x=%270%27 y=%271%27 width=%271%27 height=%275%27 fill=%27%23a88b70%27/%3E%3Crect x=%276%27 y=%271%27 width=%271%27 height=%275%27 fill=%27%23a88b70%27/%3E%3Crect x=%271%27 y=%271%27 width=%275%27 height=%271%27 fill=%27%23fffdf7%27/%3E%3Crect x=%271%27 y=%272%27 width=%271%27 height=%273%27 fill=%27%23fffdf7%27/%3E%3Crect x=%271%27 y=%275%27 width=%275%27 height=%271%27 fill=%27%23d9c6ab%27/%3E%3Crect x=%275%27 y=%272%27 width=%271%27 height=%273%27 fill=%27%23d9c6ab%27/%3E%3Crect x=%272%27 y=%272%27 width=%273%27 height=%273%27 fill=%27%23f4e9d8%27/%3E%3C/svg%3E");
  --frame-quiet-down: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%277%27 height=%277%27 shape-rendering=%27crispEdges%27%3E%3Crect x=%271%27 y=%270%27 width=%275%27 height=%271%27 fill=%27%23a88b70%27/%3E%3Crect x=%271%27 y=%276%27 width=%275%27 height=%271%27 fill=%27%23a88b70%27/%3E%3Crect x=%270%27 y=%271%27 width=%271%27 height=%275%27 fill=%27%23a88b70%27/%3E%3Crect x=%276%27 y=%271%27 width=%271%27 height=%275%27 fill=%27%23a88b70%27/%3E%3Crect x=%271%27 y=%271%27 width=%275%27 height=%271%27 fill=%27%23d9c6ab%27/%3E%3Crect x=%271%27 y=%272%27 width=%271%27 height=%273%27 fill=%27%23d9c6ab%27/%3E%3Crect x=%271%27 y=%275%27 width=%275%27 height=%271%27 fill=%27%23fffdf7%27/%3E%3Crect x=%275%27 y=%272%27 width=%271%27 height=%273%27 fill=%27%23fffdf7%27/%3E%3Crect x=%272%27 y=%272%27 width=%273%27 height=%273%27 fill=%27%23ebdcc6%27/%3E%3C/svg%3E");
  --frame-mint: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%277%27 height=%277%27 shape-rendering=%27crispEdges%27%3E%3Crect x=%271%27 y=%270%27 width=%275%27 height=%271%27 fill=%27%237fae8f%27/%3E%3Crect x=%271%27 y=%276%27 width=%275%27 height=%271%27 fill=%27%237fae8f%27/%3E%3Crect x=%270%27 y=%271%27 width=%271%27 height=%275%27 fill=%27%237fae8f%27/%3E%3Crect x=%276%27 y=%271%27 width=%271%27 height=%275%27 fill=%27%237fae8f%27/%3E%3Crect x=%271%27 y=%271%27 width=%275%27 height=%271%27 fill=%27%23f6fbf4%27/%3E%3Crect x=%271%27 y=%272%27 width=%271%27 height=%273%27 fill=%27%23f6fbf4%27/%3E%3Crect x=%271%27 y=%275%27 width=%275%27 height=%271%27 fill=%27%23cfe2cf%27/%3E%3Crect x=%275%27 y=%272%27 width=%271%27 height=%273%27 fill=%27%23cfe2cf%27/%3E%3Crect x=%272%27 y=%272%27 width=%273%27 height=%273%27 fill=%27%23e8f1e4%27/%3E%3C/svg%3E");
}

html[lang="en"] { --pixel: "Fusion Pixel Latin", "Fusion Pixel", var(--font); }

@media (min-resolution: 1.5dppx) { :root { --fs-s: 16px; --fs-hud: 16px; --fs-m: 16px; --fs-l: 24px; --fs-xl: 40px; --fs-name: 16px; } }
@media (min-resolution: 2dppx) { :root { --fs-s: 12px; --fs-hud: 12px; --fs-m: 18px; --fs-l: 24px; --fs-xl: 36px; --fs-name: 18px; } }
@media (min-resolution: 2.5dppx) { :root { --fs-s: 12px; --fs-hud: 12px; --fs-m: 16px; --fs-l: 20px; --fs-xl: 28px; --fs-name: 12px; } }
/* (a big screen at its own pixels, 1920 by 1080 say: in the panels and the boxes and cards over the game, the small
   words (what's in her bag at a shop's counter, the help's notes, a wish's reward) at the font's next size, as they are at
   one and a half times its pixels, where the small and the middle sizes are one already: its smallest, a pixel a screen
   pixel, was too small to read from a desk)
   (these are the sizes until the game's started: then src/screen.js fitPixels sets them for any density, on its grid) */
:root { --fs-ps: var(--fs-s); }
@media (min-width: 1600px) and (min-height: 860px) and (max-resolution: 1.49dppx) { :root { --fs-ps: 24px; } }
.modal, .dialog, .menu, .tasks, .payslip, .info-card { --fs-s: var(--fs-ps); }

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #1f2433;
  color: var(--ink);
  font-family: var(--pixel);
  font-size: var(--fs-m);
  font-weight: normal;
  font-synthesis: none; /* (one weight only: no smeared fake bold) */
  -webkit-font-smoothing: none;
  -webkit-text-size-adjust: 100%;
}

#app {
  position: fixed;
  inset: 0;
}

#game {
  position: absolute;
  inset: 0;
  display: block;
  touch-action: none;
  image-rendering: pixelated;
  outline: none;
}

button,
input {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

strong,
b,
h1,
h2,
h3 {
  font-weight: normal;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- HUD ---------- */

.hud {
  position: absolute;
  top: calc(10px + var(--safe-t));
  left: calc(10px + var(--safe-l));
  right: calc(10px + var(--safe-r));
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
}

.hud__left,
.hud__right {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  pointer-events: none;
}

.hud__left {
  flex-wrap: wrap;
  position: relative;
}

/* (on a narrow screen the round buttons go onto a second row rather than off the edge: a festival's
   star in the date, or the envelope of a letter, can tip a phone over) */
.hud__right {
  flex: 0 1 auto;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.hud button,
.hud .tasks {
  pointer-events: auto;
}

/* dark pixel boxes over the game: the clock, the jobs button, the round buttons on the right */
.pill,
.icon-btn {
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-hud) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-hud) padding-box;
  color: var(--hud-ink);
  filter: drop-shadow(0 var(--u) 0 rgba(10, 8, 14, 0.35));
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 4px 10px;
  font-size: var(--fs-hud);
  line-height: 1.5;
  white-space: nowrap;
}

#clockText {
  white-space: normal;
}

#clockText > span {
  white-space: nowrap;
}

.clock svg {
  width: 16px;
  height: 16px;
  fill: #ffd36b;
  stroke: #ffd36b;
  stroke-width: 1.4;
  stroke-linecap: round;
  shape-rendering: crispEdges;
}

.clock__moon { display: none; }

/* (the day's weather by the time, in the sun's place by day (the moon's still there at night): sim/weather.js) */
.clock__wx:empty { display: none; }
.clock.has-wx:not(.is-night) .clock__sun { display: none; }
.clock__wx svg { fill: none; stroke: #d9e6f5; stroke-width: 1.5; }
.clock__wx[data-wx="petals"] svg { fill: #f2b7c8; stroke: #f2b7c8; }
.clock__wx[data-wx="leaves"] svg { stroke: #f0a35a; }
.clock__wx[data-wx="rain"] svg,
.clock__wx[data-wx="shower"] svg,
.clock__wx[data-wx="drizzle"] svg { stroke: #b9cfe8; }
.clock.is-night .clock__sun { display: none; }
.clock.is-night .clock__moon { display: block; fill: #dfe7ff; stroke: none; }

.tasks__rating {
  color: var(--accent-dark);
  font-size: var(--fs-s);
}

.tasks-btn .count {
  color: #ffd36b;
  font-variant-numeric: tabular-nums;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
}

.icon-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/* the speaker: two waves with everything on, one with effects only, a cross when off */
.sound-btn .sound-btn__off,
.sound-btn[data-mode="sfx"] .sound-btn__far,
.sound-btn[data-mode="off"] .sound-btn__near,
.sound-btn[data-mode="off"] .sound-btn__far {
  display: none;
}

.sound-btn[data-mode="off"] .sound-btn__off {
  display: inline;
}

.icon-btn--text {
  width: auto;
  min-width: 40px;
  padding: 0 8px;
  font-size: var(--fs-hud);
  white-space: nowrap;
}

.icon-btn:hover,
.pill:is(button):hover {
  filter: drop-shadow(0 var(--u) 0 rgba(10, 8, 14, 0.35)) brightness(1.25);
}

.icon-btn:active,
.pill:is(button):active {
  transform: translateY(var(--u));
  filter: none;
}

.new-day {
  position: absolute;
  top: calc(60px + var(--safe-t));
  left: 50%;
  transform: translateX(-50%);
  border-image: var(--frame-accent) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-accent) padding-box;
  color: #fff;
  font-size: var(--fs-m);
}

.new-day:active {
  transform: translate(-50%, var(--u));
  border-image: var(--frame-accent-down) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-accent-down) padding-box;
}

/* the day's jobs, dropping down under the button */
.tasks {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  margin: 0;
  padding: 8px 12px;
  width: max-content;
  min-width: 260px;
  /* (wide enough for a guest and their "not here yet" on one line: a visiting day's list fits at 1280 by 720) */
  max-width: min(620px, calc(100vw - 20px));
  /* (a festival, the story and a request all at once: on a phone on its side it scrolls) */
  max-height: calc(100vh - 150px - var(--safe-t) - var(--safe-b));
  max-height: calc(100dvh - 150px - var(--safe-t) - var(--safe-b));
  overflow-y: auto;
  list-style: none;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-paper) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-paper) padding-box;
  filter: drop-shadow(0 calc(var(--u) * 2) 0 rgba(30, 20, 15, 0.3));
  font-size: var(--fs-m);
  line-height: 1.5;
}

.tasks li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}

/* a pixel tick box (drawn, not a font glyph) */
.tasks .check {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  border: var(--u) solid #c9b394;
  background: #ffffff;
  color: transparent;
  font-size: 0;
}

.tasks li.is-done .check {
  border-color: #7fae8f;
  background: var(--fill-mint);
}

.tasks li.is-done .check::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 6px;
  width: 2px;
  height: 2px;
  background: #3e7a52;
  box-shadow: 2px 2px 0 #3e7a52, 4px 0 0 #3e7a52, 6px -2px 0 #3e7a52, 8px -4px 0 #3e7a52;
}

.tasks li.is-done span:nth-child(2) {
  color: var(--ink-muted);
  text-decoration: line-through;
}

/* on a visiting day, the guests and their wishes under the day's jobs */
.tasks .tasks__head {
  margin-top: 6px;
  padding-top: 8px;
  border-top: var(--u) dashed var(--line);
  color: var(--ink-muted);
}

.tasks li.is-waiting span:nth-child(2) {
  color: var(--ink-muted);
}

.tasks__note {
  margin-left: auto;
  padding-left: 6px;
  color: var(--ink-muted);
  font-size: var(--fs-s);
  white-space: nowrap;
}

/* ---------- the bar along the bottom ---------- */

:root {
  --bar-h: 72px; /* the bar's height, so the hint chip and the messages sit above it */
}

.bar {
  position: absolute;
  left: 50%;
  bottom: calc(8px + var(--safe-b));
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  padding: 4px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-paper) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-paper) padding-box;
  filter: drop-shadow(0 calc(var(--u) * 2) 0 rgba(20, 14, 10, 0.3));
}

.slot {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-card) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-card) padding-box;
}

.slot canvas {
  --px-down: 1; /* (src/screen.js crisp: never bigger than the slot's room) */
  image-rendering: pixelated;
}

.slot[aria-pressed="true"] {
  border-image: var(--frame-picked) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-picked) padding-box;
}

.slot:active {
  transform: translateY(var(--u));
}

.slot__n {
  position: absolute;
  right: 1px;
  bottom: -2px;
  color: var(--ink);
  font-size: var(--fs-s);
  line-height: 1;
  text-shadow: 1px 0 #fff, -1px 0 #fff, 0 1px #fff, 0 -1px #fff;
}

.slot__key {
  position: absolute;
  left: 2px;
  top: 0;
  color: var(--ink-muted);
  font-size: var(--fs-s);
  line-height: 1;
}

.slot--bag {
  border-image: var(--frame-quiet) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-quiet) padding-box;
}

/* a little pixel satchel */
.slot__bag {
  position: relative;
  width: 24px;
  height: 20px;
  margin-top: 4px;
  border: 3px solid #7a5230;
  border-top-width: 6px;
  background: #c8915a;
}

.slot__bag::before {
  content: "";
  position: absolute;
  left: 3px;
  top: -13px;
  width: 12px;
  height: 7px;
  border: 3px solid #7a5230;
  border-bottom: 0;
}

.money::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 2px;
  background: #ffd36b;
  box-shadow: inset -2px -2px 0 #e0a83a, 0 0 0 2px #8a5a1c;
}

/* the whole bag */
.bag {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
}

.bag__grid {
  display: grid;
  grid-template-columns: repeat(6, 56px);
  gap: 4px;
}

.bag__grid .slot--onbar {
  border-image: var(--frame-paper2) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-paper2) padding-box;
}

.bag__grid .slot[aria-pressed="true"] {
  border-image: var(--frame-picked) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-picked) padding-box;
}

.bag__detail {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}

.bag__detail strong {
  color: var(--accent-dark);
}

.bag__detail p {
  margin: 4px 0 0;
  line-height: 1.5;
}

.bag__money {
  margin-right: auto;
  align-self: center;
}

/* what can be done with the thing on the card (eat it, move it): a row of buttons under its words */
.bag__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* moving a thing: the slot it's in marked, till the slot it goes to is picked */
.bag__grid .slot.is-moving {
  outline: calc(var(--u) * 1) dashed var(--accent-dark);
  outline-offset: 1px;
}

.bag__where {
  color: var(--accent-dark);
}

/* her cupboard by the bed: its slots and her bag's, side by side (one above the other on a narrow screen); a press on
   one moves all of it across, and what happened is said under them */
.store {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  gap: 10px 20px;
  align-items: start;
}

.store__head {
  margin: 0 0 6px;
  color: var(--accent-dark);
  font-size: var(--fs-m);
}

.store__grid {
  display: grid;
  grid-template-columns: repeat(6, 52px);
  gap: 4px;
}

.store__grid .slot {
  width: 52px;
  height: 52px;
}

.store__grid--bag .slot--onbar {
  border-image: var(--frame-paper2) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-paper2) padding-box;
}

.store__say {
  min-height: 3em;
  margin: 10px 0 0;
  color: var(--accent-dark);
  line-height: 1.5;
}

.store__say--hint {
  color: var(--ink-muted);
}

/* put down out of the bag: how long it stays, under the card's buttons */
.bag__putnote {
  margin-top: 6px;
}

@media (max-width: 760px) {
  .store { grid-template-columns: auto; }
}

/* (a phone on its side: wider, flatter grids, side by side, the bag's first row its bar, so it all fits the screen) */
@media (max-height: 520px) and (min-width: 761px) {
  .modal:has(.store) { width: min(820px, calc(100vw - 20px)); }
  .store__grid { gap: 3px; }
  .store__grid--cup { grid-template-columns: repeat(9, 40px); }
  .store__grid--bag { grid-template-columns: repeat(8, 40px); }
  .store__grid .slot { width: 40px; height: 40px; }
  .store__head { margin-bottom: 4px; }
  .store__say { min-height: 1.5em; margin-top: 6px; }
}

@media (max-width: 600px) {
  :root { --bar-h: 56px; }
  .slot { width: 40px; height: 40px; }
  .bar { gap: 1px; padding: 2px; }
  .slot__key { display: none; }
  .bag { grid-template-columns: 1fr; }
  .bag__grid { grid-template-columns: repeat(6, 44px); }
  .bag__grid .slot { width: 44px; height: 44px; }
  .store__grid { grid-template-columns: repeat(6, 44px); }
  .store__grid .slot { width: 44px; height: 44px; }
}

/* ---------- hint chip, info card and toasts ---------- */

.hint {
  position: absolute;
  left: 50%;
  bottom: calc(14px + var(--bar-h) + var(--safe-b));
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 10px 2px 4px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-hud) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-hud) padding-box;
  color: var(--hud-ink);
  font-size: var(--fs-m);
  line-height: 1.5;
  pointer-events: none;
  white-space: nowrap;
}

/* (a controller's A button: round) */
.hint kbd.kbd--pad {
  min-width: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #4f8a3a;
  color: #fff;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25), 0 0 0 2px rgba(255, 255, 255, 0.6);
}

/* with a controller the focus is always shown (its keys are made up, so the browser can't tell) */
.is-pad :is(button, input, select, a[href], [tabindex="0"]):focus {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.hint kbd {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-quiet) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-quiet) padding-box;
  color: var(--ink);
  font: var(--fs-s) / 1 var(--pixel);
}

/* a little card about the furniture she is standing by (or that was tapped) */
.info-card {
  position: absolute;
  left: 50%;
  top: calc(60px + var(--safe-t));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(calc(100vw - 32px), 360px);
  padding: 6px 10px 6px 6px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-paper) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-paper) padding-box;
  filter: drop-shadow(0 calc(var(--u) * 2) 0 rgba(30, 20, 15, 0.3));
  color: var(--ink);
  pointer-events: none;
  animation: card-in 0.22s steps(3, end);
}

.info-card[hidden] {
  display: none;
}

.info-card__art {
  flex: none;
  width: 60px;
  height: 60px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-paper2) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-paper2) padding-box;
  image-rendering: pixelated;
}

.info-card__name {
  margin: 0 0 2px;
  color: var(--accent-dark);
  font-size: var(--fs-m);
}

.info-card__text {
  margin: 0;
  font-size: var(--fs-s);
  line-height: 1.5;
  color: var(--ink-muted);
  text-wrap: balance; /* no single character left alone on the last line */
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translate(-50%, -6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .info-card {
    animation: none;
  }
}

.toasts {
  position: absolute;
  z-index: 9; /* (over the panels and their backdrop: a wish filled, a dish made, said where it's seen) */
  left: 50%;
  bottom: calc(40px + var(--fs-m) * 1.5 + var(--bar-h) + var(--safe-b)); /* (above the hint chip and the bar) */
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(92vw, 560px);
  pointer-events: none;
}

.toast {
  padding: 4px 12px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-paper) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-paper) padding-box;
  filter: drop-shadow(0 var(--u) 0 rgba(30, 20, 15, 0.3));
  color: var(--ink);
  font-size: var(--fs-m);
  line-height: 1.5;
  text-align: center;
  animation: toast-in 0.25s steps(3, end);
  transition: opacity 0.4s steps(4, end), transform 0.4s steps(4, end);
}

.toast.is-out {
  opacity: 0;
  transform: translateY(6px);
}

/* (waiting its turn: one message at a time, ui.js toast) */
.toast.is-waiting {
  display: none;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
}

/* the morning's pay slip (what yesterday came to: her wage, help, the crate's sales and what it sold) */
.payslip {
  position: absolute;
  left: calc(10px + var(--safe-l));
  width: min(calc(100vw - 20px - var(--safe-l) - var(--safe-r)), 324px);
  padding: 6px 12px 8px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-paper) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-paper) padding-box;
  filter: drop-shadow(0 calc(var(--u) * 2) 0 rgba(30, 20, 15, 0.3));
  color: var(--ink);
  font-size: var(--fs-s);
  line-height: 1.5;
  overflow-y: auto;
  animation: card-in-left 0.22s steps(3, end);
  transition: opacity 0.4s steps(4, end);
}

.payslip.is-out {
  opacity: 0;
}

.payslip__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.payslip__title {
  margin: 0;
  color: var(--accent-dark);
  font-size: var(--fs-m);
}

.payslip__rows {
  margin: 0;
}

.payslip__rows > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.payslip__rows dd {
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

.payslip__row dt {
  color: var(--ink-muted);
}

/* (what the crate sold, under its sales) */
.payslip__line {
  padding-left: 12px;
  color: var(--ink-muted);
}

.payslip__total {
  margin-top: 2px;
  padding-top: 2px;
  border-top: var(--u) dashed var(--line);
  font-size: var(--fs-m);
}

.payslip__total dt {
  color: var(--ink);
}

.payslip__note {
  margin: 4px 0 0;
  color: var(--ink-muted);
}

.payslip__close {
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-quiet) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-quiet) padding-box;
  color: var(--ink);
  font-size: var(--fs-m);
  line-height: 1;
}

.payslip__close:active {
  transform: translateY(var(--u));
  border-image: var(--frame-quiet-down) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-quiet-down) padding-box;
}

/* (a screen too narrow for both: the slip has the top to itself while it's up) */
@media (max-width: 980px) {
  body:has(.payslip) .info-card {
    display: none;
  }
}

@keyframes card-in-left {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .payslip { animation: none; transition: none; }
}

/* the name of a place, for a moment, as she arrives */
.place-banner {
  position: absolute;
  left: 50%;
  top: calc(64px + var(--safe-t));
  transform: translateX(-50%);
  margin: 0;
  padding: 4px 18px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-paper) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-paper) padding-box;
  filter: drop-shadow(0 calc(var(--u) * 2) 0 rgba(30, 20, 15, 0.3));
  color: var(--accent-dark);
  font-size: var(--fs-l);
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
  animation: banner-in 0.4s steps(4, end);
  transition: opacity 0.5s steps(5, end);
}

.place-banner.is-out {
  opacity: 0;
}

@keyframes banner-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
}

@media (prefers-reduced-motion: reduce) {
  .place-banner { animation: none; transition: none; }
}

/* ---------- panels ---------- */

.panel {
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-paper) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-paper) padding-box;
  filter: drop-shadow(0 calc(var(--u) * 2) 0 rgba(20, 14, 10, 0.35));
}

.menu {
  position: absolute;
  z-index: 5;
  min-width: 200px;
  max-width: min(280px, 80vw);
  padding: 6px;
}

.menu__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 2px 6px 8px;
  border-bottom: var(--u) dashed var(--line);
  margin-bottom: 4px;
}

.menu__head strong {
  color: var(--accent-dark);
  font-size: var(--fs-m);
}

.menu__state {
  width: 100%;
  color: var(--ink-muted);
  font-size: var(--fs-s);
}

.menu__state span {
  white-space: nowrap;
}

.chip {
  padding: 0 6px;
  border: var(--u) solid #7fae8f;
  background: var(--fill-mint);
  color: #3e6b49;
  font-size: var(--fs-s);
  line-height: 1.5;
}

.menu__item {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: var(--fs-m);
  line-height: 1.5;
}

.menu__item:hover,
.menu__item:focus-visible {
  background: var(--paper-2);
  box-shadow: inset var(--u) 0 0 var(--accent);
}

/* small screens: actions two to a row, so the menu fits beside or under its capybara */
@media (max-width: 600px), (max-height: 560px) {
  .menu {
    max-width: min(320px, calc(100vw - 16px));
  }

  .menu__items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 6px;
  }
}

/* a phone held upright: docked along the bottom, with the capybara shown above it; and kept light (it was a quarter
   of the screen): its name, kind and hearts on one line, its actions side by side, as many to a row as their words
   allow, each still a thumb's height */
.menu.menu--sheet {
  left: calc(8px + var(--safe-l));
  right: calc(8px + var(--safe-r));
  bottom: calc(8px + var(--safe-b));
  max-width: none;
}

.menu.menu--sheet .menu__head {
  padding-bottom: 6px;
}

.menu.menu--sheet .menu__hearts {
  flex-basis: auto;
}

.menu.menu--sheet .menu__items {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
}

.menu.menu--sheet .menu__item {
  flex: 1 1 auto;
  width: auto;
  padding: 6px 8px;
  text-align: center;
  white-space: nowrap;
}

/* the dialogue box: a face in a frame, a name, what they say, and buttons */
.dialog {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  bottom: calc(14px + var(--safe-b));
  margin: 0 auto; /* (in the middle as the panels are: on the screen's pixels) */
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  /* (wide enough on a wide screen that a long line isn't a tall box: the opening's first, seven lines at 1280 by 720, hid
     her and left room above it for nobody) */
  width: min(860px, calc(100vw - 20px));
  padding: 10px 12px;
}

.dialog__face {
  grid-row: span 2;
  width: 72px;
  height: auto;
  image-rendering: pixelated;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-paper2) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-paper2) padding-box;
}

.dialog__name {
  color: var(--accent-dark);
  font-size: var(--fs-name);
}

.dialog__body p {
  margin: 2px 0 0;
  font-size: var(--fs-m);
  line-height: 1.5;
  text-wrap: pretty; /* (no single character alone on the last line) */
}

.dialog__actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* a question's answers share the row */
.dialog__actions--choice .btn {
  flex: 1 1 auto;
}

/* what she sees, told plainly (Yungu's scenes): no face, the words the whole width */
.dialog--narration {
  grid-template-columns: 1fr;
}

.dialog--narration .dialog__actions {
  grid-column: 1;
}

.dialog--narration .dialog__body p {
  color: var(--ink-muted);
}

.dialog:focus {
  outline: none;
}

/* a question's word on how to answer it: the keyboard's keys, or a controller's (body.is-pad); none on a touch screen.
   (The words' own size, in their quieter colour: at the labels' size, a font pixel a screen pixel at 1280 by 720, it was
   too small to read, and it's the one thing on the box that says how to answer) */
.dialog__keys {
  margin-top: 4px;
  color: var(--ink-muted);
  font-size: var(--fs-m);
  line-height: 1.4;
}

.dialog__keys-pad,
.is-pad .dialog__keys-kb {
  display: none;
}

.is-pad .dialog__keys-pad {
  display: inline;
}

@media (pointer: coarse) {
  body:not(.is-pad) .dialog__keys {
    display: none;
  }
}

/* ---------- the letter about tomorrow's guests ---------- */

.letter {
  position: relative;
  padding: 14px 16px 10px;
  border: var(--u) dashed var(--line);
  background: #fffdf6;
  line-height: 1.5;
}

.letter p {
  margin: 0 0 10px;
}

.letter > p:first-of-type {
  min-height: 42px; /* (the stamp sits beside it) */
  padding-right: 64px;
}

.letter .letter__sign {
  margin: 0;
  text-align: right;
  color: var(--ink-muted);
}

.letter__stamp {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 56px;
  height: auto;
  image-rendering: pixelated;
  border: 3px dotted #e3cfb1;
  transform: rotate(4deg);
}

.letter__guests {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.letter__guest {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-paper2) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-paper2) padding-box;
}

.letter__face {
  flex: none;
  height: auto;
  image-rendering: pixelated;
}

.letter__who {
  display: grid;
  gap: 2px;
}

.letter__who strong {
  color: var(--accent-dark);
}

.letter__who span {
  font-size: var(--fs-s);
  line-height: 1.5;
}

/* ---------- buttons ---------- */

.btn {
  min-height: 40px;
  padding: 4px 14px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-accent) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-accent) padding-box;
  color: #fff;
  font-size: var(--fs-m);
  line-height: 1.5;
}

.btn:hover {
  filter: brightness(1.08);
}

.btn:active {
  transform: translateY(var(--u));
  border-image: var(--frame-accent-down) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-accent-down) padding-box;
}

/* (a link dressed as a button: the web demo's last word, to the game's page on Steam) */
a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn--quiet {
  border-image: var(--frame-quiet) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-quiet) padding-box;
  color: var(--ink);
}

.btn--quiet:active {
  border-image: var(--frame-quiet-down) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-quiet-down) padding-box;
}

.backdrop {
  position: absolute;
  inset: 0;
  z-index: 7;
  background: rgba(20, 16, 30, 0.45);
}

.modal {
  position: absolute;
  z-index: 8;
  /* (in the middle by its margins, not moved half its size, which put its frame between the screen's pixels, blurred, at
     125 % and the like: where the page lays it, the browser snaps to them) */
  inset: 0;
  margin: auto;
  width: min(740px, calc(100vw - 20px));
  height: fit-content;
  max-height: calc(100vh - 20px - var(--safe-t) - var(--safe-b));
  overflow: auto;
  padding: 12px 16px;
}

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.modal__head h2 {
  margin: 0;
  color: var(--accent-dark);
  font-size: var(--fs-l);
  line-height: 1.25;
}

/* (the panel's name takes the keys as it opens, so that Tab goes on from its top: it's a heading, not a control, and
   wore a blue ring for it) */
.modal__head h2:focus {
  outline: none;
}

.modal__close {
  width: 40px;
  height: 40px;
  padding: 0;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-quiet) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-quiet) padding-box;
  font-size: var(--fs-l);
  line-height: 1;
}

.modal__close:active {
  transform: translateY(var(--u));
  border-image: var(--frame-quiet-down) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-quiet-down) padding-box;
}

.modal__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.hint-text {
  color: var(--ink-muted);
  font-size: var(--fs-s);
  line-height: 1.5;
}

/* the calendar */

.cal {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  table-layout: fixed;
}

.cal th {
  padding: 2px 0;
  color: var(--ink-muted);
  font-size: var(--fs-s);
  font-weight: normal;
}

.cal__day {
  height: 64px;
  padding: 2px 4px;
  vertical-align: top;
  border: var(--u) solid var(--line);
  background: #ffffff;
  font-size: var(--fs-s);
  line-height: 1.25;
}

.cal__n {
  display: block;
  color: var(--ink);
  font-size: var(--fs-m);
}

.cal__fest {
  display: block;
  color: #a33c52;
}

.cal__guests {
  display: block;
  color: #2f6b52;
}

.cal__day.is-past {
  background: var(--paper-2);
}

.cal__day.is-past .cal__n {
  color: var(--ink-muted);
}

.cal__day.is-festival {
  border-color: #e4a0b0;
  background: #fff0f3;
}

.cal__day.is-today {
  border: calc(var(--u) * 2) solid var(--accent);
  background: #fff1e2;
}

.cal__legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  color: var(--ink-muted);
  font-size: var(--fs-s);
}

.cal__key {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 8px;
}

.cal__key--fest { background: #e4a0b0; }
.cal__key--guests { background: #8cc7a8; }

@media (max-width: 600px) {
  .cal { border-spacing: 2px; }
  .cal__day { height: 52px; padding: 1px 2px; }
  .cal__fest, .cal__guests { font-size: 0; height: 6px; margin-top: 2px; }
  .cal__fest { background: #e4a0b0; }
  .cal__guests { background: #8cc7a8; }
}

/* wardrobe */

.wardrobe__who {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
  padding: 2px 2px 8px;
}

.who,
.item {
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-card) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-card) padding-box;
  font-size: var(--fs-s);
  line-height: 1.25;
}

.who {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  padding: 4px 2px;
}

.who canvas {
  width: 48px;
  height: auto;
  image-rendering: pixelated;
}

.who[aria-pressed="true"],
.item[aria-pressed="true"] {
  border-image: var(--frame-picked) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-picked) padding-box;
}

.who:active,
.item:active {
  transform: translateY(var(--u));
}

.wardrobe__main {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 14px;
  align-items: start;
}

.wardrobe__stage {
  margin: 0;
  text-align: center;
}

.wardrobe__preview {
  width: 210px;
  height: auto;
  image-rendering: pixelated;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-paper2) 2 / calc(var(--u) * 2) / 0 stretch;
}

.wardrobe__stage figcaption {
  margin-top: 6px;
  font-size: var(--fs-s);
  color: var(--ink-muted);
}

.wardrobe__row h3 {
  margin: 0 0 6px;
  color: var(--accent-dark);
  font-size: var(--fs-s);
}

.wardrobe__row + .wardrobe__row {
  margin-top: 10px;
}

.wardrobe__items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.item {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  width: 74px;
  min-height: 68px;
  padding: 4px 2px;
}

.item canvas {
  width: 30px;
  height: auto;
  image-rendering: pixelated;
}

.item--none span {
  color: var(--ink-muted);
}

/* rename */

.rename input,
.unlock input,
.title__menu input {
  width: 100%;
  min-height: 48px;
  padding: 6px 12px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-card) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-card) padding-box;
  color: var(--ink);
  font-size: var(--fs-l);
}

.rename input:focus,
.unlock input:focus,
.title__menu input:focus {
  border-image: var(--frame-picked) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-picked) padding-box;
  outline: none;
}

/* a name's box, and beside it a button that puts one of a few names in it (ui.nameIdea: no keyboard, a controller); the
   box wide enough for the longest name it takes, twelve characters as wide as they come (a Chinese one's 1em, and a
   little over for one from another font), the button under it, at its end, when there's no room for both (beside it, the
   box showed eleven and a bit of twelve: the last one cut off) */
.name-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: calc(var(--u) * 2) 8px; /* (under it, close: the look maker's step fits 1280 by 720 still) */
}

.name-row input {
  flex: 1 1 calc(12.5em + 24px + var(--u) * 4);
  min-width: 0;
}

.name-row .btn {
  flex: none;
}

/* the web demo: the key to the whole game */

.unlock {
  display: grid;
  gap: 8px;
}

.unlock input {
  font-family: var(--pixel);
  font-size: var(--fs-m); /* (a whole key fits on a phone) */
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.unlock input::placeholder {
  color: var(--ink-muted);
  opacity: 0.6;
}

.unlock__note {
  min-height: 3em;
  margin: 0;
}

.unlock__note.is-wrong {
  color: var(--accent-dark);
  font-size: var(--fs-m);
}

/* summary and help */

.stats,
.help {
  margin: 0;
  display: grid;
  gap: 2px;
}

.stat {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 4px;
  border-bottom: var(--u) dashed var(--line);
  line-height: 1.5;
}

.stat dt {
  color: var(--ink-muted);
}

.stat dd {
  margin: 0;
  text-align: right;
}

/* (the help's guide: each thing's name, then a line or two about it under the name, read from the left) */
.help--guide .stat {
  display: block;
}

.help--guide .stat dt {
  margin-bottom: 2px;
}

.help--guide .stat dd {
  text-align: left;
}

/* ---------- the townsfolk: hearts in the dialogue box, the friends tab ---------- */

.dialog__who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}

.dialog__hearts,
.friend__hearts {
  color: #e0607e;
  font-size: var(--fs-s);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.menu-tabs {
  display: flex;
  flex-wrap: wrap; /* (a phone's too narrow for all five: whole tabs on to a second row, never a name broken) */
  gap: 8px;
  margin-bottom: 10px;
}

.menu-tabs .shop__tab {
  white-space: nowrap;
}

@media (max-width: 480px) {
  .menu-tabs { gap: 6px; }
  .menu-tabs .shop__tab { padding: 4px 10px; }
}

.friends {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.friend {
  display: grid;
  grid-template-columns: 76px 1fr; /* (the widest face, 38 of its pixels, at two CSS pixels to one: the names in a line) */
  justify-items: start;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 6px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-card) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-card) padding-box;
}

.friend__face {
  justify-self: center;
  width: 50px;
  height: auto;
  image-rendering: pixelated;
  background: var(--fill-paper2);
}

/* (faces each their own width, all at one scale: CSS pixels to one of their pixels, made a whole number of screen pixels
   by src/screen.js crisp, as every canvas of pixel art is; by their width alone, 1.32 to 1.85, some came out twice the
   others) */
.friend__face:not(.friend__face--capy), .maker__face, .item canvas { --px: 1.5; }
.friend--unmet .friend__face { filter: grayscale(1) brightness(0.9) opacity(0.7); }
.friend__face--capy { width: 60px; background: transparent; }
.dialog__face--capy { width: 72px; }

.menu__hearts {
  flex-basis: 100%;
  color: #e0607e;
  font-size: var(--fs-s);
  letter-spacing: 0.08em;
}

.friend__main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.friend__name { line-height: 1.4; }

.friend__info {
  color: var(--ink-muted);
  font-size: var(--fs-s);
  line-height: 1.5;
}

.friend--unmet .friend__hearts { opacity: 0.4; }

.cal__bday {
  display: block;
  line-height: 0;
}

.cal__bday canvas,
.cal__legend canvas {
  image-rendering: pixelated;
  vertical-align: middle;
}

/* ---------- ice fishing ---------- */

.fishing {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: calc(16px + var(--bar-h) + var(--safe-b));
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 20px));
  display: grid;
  gap: 10px;
  padding: 12px 16px;
}

.fishing__say {
  margin: 0;
  line-height: 1.5;
}

.reel {
  position: relative;
  height: 28px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-card) 2 / calc(var(--u) * 2) / 0 stretch;
  background: #dbe9f6 padding-box;
}

.reel__mark {
  position: absolute;
  top: 0;
  bottom: 0;
  background: #8fd0a6;
  box-shadow: inset 0 0 0 2px #5ea67a;
}

.reel__pos {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 6px;
  margin-left: -3px;
  background: #b15e20;
  box-shadow: 0 0 0 2px #fff8ec;
}

.fishing__pips {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pip {
  width: 14px;
  height: 14px;
  background: #e6dccb;
  box-shadow: inset 0 0 0 2px #c9b394;
}

.pip.is-hit { background: #8fd0a6; box-shadow: inset 0 0 0 2px #5ea67a; }
.pip--miss.is-hit { background: #e58a8a; box-shadow: inset 0 0 0 2px #c05a5a; }
.pips__gap { width: 14px; }

.fishing__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.fishing__go { min-width: 120px; }

.fishing__go.is-urgent {
  animation: urgent 0.3s steps(2) infinite;
}

@keyframes urgent {
  50% { transform: translateY(calc(var(--u) * -2)); }
}

@media (prefers-reduced-motion: reduce) {
  .fishing__go.is-urgent { animation: none; }
}

body.is-title .fishing { display: none !important; }

/* ---------- the wish book ---------- */

.wishes {
  position: relative; /* (what's in it for screen readers only, kept in it: below its fold, it made the panel round it scroll on into nothing) */
  display: grid;
  grid-auto-rows: max-content; /* (each line its own height: the list scrolls, its lines aren't squeezed) */
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  max-height: min(56vh, 460px);
  overflow: auto;
}

/* (a wish book's list takes what height its panel has left under the rest: the whole panel on the screen, its Close in
   sight at 720p, and only the list scrolling, not the panel round it as well) */
.modal:has(> .wishes) { display: flex; flex-direction: column; }
.modal:has(> .wishes) > * { flex: none; }
.modal > .wishes { flex: 0 1 auto; min-height: 7.5em; }

.wish {
  display: grid;
  gap: 4px;
  padding: 8px 12px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-card) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-card) padding-box;
}

.wish.is-done {
  border-image: var(--frame-mint) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-mint) padding-box;
}

.wish__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.wish__done { color: #2f7448; font-size: var(--fs-s); } /* (4.5:1 on the mint card: #3f8a5a was 3.6) */
.wish__why { margin: 0; color: var(--ink-muted); font-size: var(--fs-s); line-height: 1.5; }

.wish__items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.wish__item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--ink-muted);
  font-size: var(--fs-s);
}

.wish__item canvas { image-rendering: pixelated; }
.wish__item.is-have { color: var(--accent-dark); }
.wish__item.is-given { color: #2f7448; }

.wish__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
}

.wish .btn:disabled { opacity: 0.5; cursor: default; }

.tasks__story { color: var(--accent-dark); }

/* the town's wish book (sim/wishbook.js): a page for each of its four, its name and how it stands over its wishes */
.wishbook__tabs { margin-top: 8px; }
.wishbook__page { display: grid; gap: 2px; margin-top: 10px; }
.wishbook__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
  margin: 0;
  font-size: var(--fs-m);
  color: var(--accent-dark);
}
.wishbook__state { color: var(--ink-muted); font-size: var(--fs-s); }
.wishbook__page.is-fixed .wishbook__state { color: #2f7448; }
@media (max-width: 480px) {
  .wishbook__tabs .shop__tab { padding: 4px 10px; }
  .wishbook__page + .wishes { max-height: min(44vh, 420px); }
}

/* ---------- the little kitchen ---------- */

.cooks {
  display: grid;
  grid-auto-rows: max-content; /* (each line its own height: the list scrolls, its lines aren't squeezed) */
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: min(52vh, 420px);
  overflow: auto;
}

.cook {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 6px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-card) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-card) padding-box;
}

.cook canvas { image-rendering: pixelated; }

.cook__main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cook__needs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.cook__need {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #b0503f;
  font-size: var(--fs-s);
}

.cook__need.is-have { color: #2f7448; } /* (5.7:1 on white, as the wish books' done: #3f8a5a was 4.2, under the 4.5 small text needs) */

.cook .btn:disabled { opacity: 0.5; cursor: default; }

/* ---------- the notice board, letters ---------- */

.board__note {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-card) 2 / calc(var(--u) * 2) / 0 stretch;
  background: #fffdf6 padding-box;
  transform: rotate(-0.6deg);
}

.board__who,
.board__want {
  display: flex;
  align-items: center;
  gap: 10px;
}

.board__face {
  width: 44px;
  height: auto;
  image-rendering: pixelated;
}

.board__want canvas { image-rendering: pixelated; }
.board__want p,
.board__reward,
.board__empty { margin: 0; line-height: 1.5; }
.board__reward { color: var(--accent-dark); }

.mail-btn {
  position: relative;
}

.mail-btn svg path {
  stroke-linejoin: round;
}

.mail-btn__n {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  padding: 0 4px;
  background: #d64f6e;
  color: #fff;
  font-size: var(--fs-s);
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px rgba(18, 12, 9, 0.9);
}

.letters {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr;
  gap: 12px;
  align-items: start;
}

@media (max-width: 600px) {
  .letters { grid-template-columns: 1fr; }
}

.letters__list {
  display: grid;
  grid-auto-rows: max-content; /* (each line its own height: the list scrolls, its lines aren't squeezed) */
  gap: 4px;
  max-height: min(48vh, 360px);
  overflow: auto;
  padding: 2px;
}

.letters__item {
  display: grid;
  gap: 2px;
  padding: 6px 10px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-card) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-card) padding-box;
  text-align: left;
  line-height: 1.4;
}

.letters__item[aria-pressed="true"] {
  border-image: var(--frame-picked) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-picked) padding-box;
}

.letters__item.is-new strong::before {
  content: "● ";
  color: #d64f6e;
}

.letter-paper {
  padding: 14px 18px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-paper2) 2 / calc(var(--u) * 2) / 0 stretch;
  background: #fffaf0 padding-box;
  line-height: 1.6;
}

.letter-paper p { margin: 0 0 10px; }

.letter-paper__gift {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.letter-paper__gift canvas { image-rendering: pixelated; }

/* ---------- buying and selling at a counter ---------- */

.shop {
  display: grid;
  gap: 10px;
}

.shop__tabs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.shop__tab {
  min-height: 40px;
  padding: 4px 16px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-quiet) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-quiet) padding-box;
  font-size: var(--fs-m);
  line-height: 1.5;
}

.shop__tab[aria-selected="true"] {
  border-image: var(--frame-picked) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-picked) padding-box;
  color: var(--accent-dark);
}

.shop__purse {
  margin-left: auto;
  color: var(--ink-muted);
  font-size: var(--fs-m);
}

.shop__list {
  display: grid;
  grid-auto-rows: max-content; /* (each line its own height: the list scrolls, its lines aren't squeezed) */
  gap: 4px;
  max-height: min(36vh, 300px);
  overflow: auto;
  padding: 2px;
}

.shop__line {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 2px 10px 2px 4px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-card) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-card) padding-box;
  text-align: left;
  font-size: var(--fs-m);
  line-height: 1.5;
}

.shop__line[aria-pressed="true"] {
  border-image: var(--frame-picked) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-picked) padding-box;
}

.shop__line canvas { image-rendering: pixelated; }
/* (the keys on a line: the ring inside its edge, as the list scrolls and clips anything outside it: only the ring's
   bottom showed, a line under the line) */
.shop__list .shop__line:focus-visible { outline-offset: -5px; }

.shop__price {
  color: var(--accent-dark);
  white-space: nowrap;
}

.shop__detail {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: start;
  padding: 10px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-paper2) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-paper2) padding-box;
}

.shop__detail > canvas { image-rendering: pixelated; }

.shop__about p {
  margin: 2px 0 0;
  line-height: 1.5;
}

.shop__deal {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 14px;
}

.shop__qty {
  display: flex;
  align-items: center;
  gap: 6px;
}

.shop__step {
  min-width: 40px;
  padding: 4px 8px;
}

.shop__step:disabled {
  opacity: 0.45;
  cursor: default;
}

.shop__n {
  min-width: 2.2em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.shop__total { color: var(--ink-muted); }

.shop__note {
  min-height: 1.5em;
  margin: 0;
  color: var(--accent-dark);
  line-height: 1.5;
}

.shop__empty { margin: 8px 4px; }

/* her garden's shipping crate, and the neighbours' orders (ui.js) */
.ship,
.orders {
  display: grid;
  gap: 8px;
}

.ship h3,
.orders h3 {
  margin: 4px 0 0;
  font-size: var(--fs-m);
  color: var(--accent-dark);
}

.ship__list {
  display: grid;
  gap: 4px;
}

.ship__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  min-height: 44px;
  padding: 2px 8px 2px 4px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-card) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-card) padding-box;
  font-size: var(--fs-m);
}

.ship__row canvas { image-rendering: pixelated; }

.ship__name {
  flex: 1 1 12em;
  line-height: 1.5;
}

.orders__week {
  margin: 0;
  color: var(--ink-muted);
}

.orders__cards {
  display: grid;
  gap: 6px;
}

.order {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-paper2) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-paper2) padding-box;
  line-height: 1.5;
}

.order__head {
  color: var(--accent-dark);
  font-size: var(--fs-m);
}

.order__what,
.order__pays {
  margin: 0;
}

.order__pays {
  color: var(--ink-muted);
}

.order__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px 10px;
  margin-top: 4px;
}

.order__short {
  margin-right: auto;
  color: var(--accent-dark);
}

.orders__more {
  display: flex;
  justify-content: flex-end;
}

.order .btn:disabled { opacity: 0.5; cursor: default; }

/* her own book (ui.js openBook) */
.book {
  display: grid;
  gap: 8px;
}

.book__views {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* (a third view, the shop's own page, on a phone in English: the tab on a row of its own, its name never broken) */
.book__views .shop__tab {
  white-space: nowrap;
}

.book__views .shop__tab[aria-pressed="true"] {
  border-image: var(--frame-picked) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-picked) padding-box;
  color: var(--accent-dark);
}

.book__part {
  padding: 6px 10px 8px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-paper2) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-paper2) padding-box;
  line-height: 1.5;
}

.book__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 2px;
  font-size: var(--fs-m);
  color: var(--accent-dark);
}

.book__rows {
  margin: 0;
}

.book__rows > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.book__rows dt {
  color: var(--ink-muted);
}

.book__rows dd {
  margin: 0;
  white-space: nowrap;
}

.book__in { color: #3f7a3a; }
.book__out { color: #a2512b; }
.book__shop { color: var(--ink-muted); }

/* (how her book's set out, as Dove and she settled it: a word before the two ways, so it isn't taken for the views) */
.book__ways {
  flex-wrap: wrap;
  align-items: center;
}

.book__label {
  color: var(--ink-muted);
  font-size: var(--fs-s);
}

/* (what's left, under what came in and went out: the book set out briefly, as Dove and she settled it) */
.book__rows > .book__left {
  margin-top: 2px;
  padding-top: 2px;
  border-top: 1px dashed rgba(91, 58, 41, 0.35);
  font-weight: bold;
}

/* her garden notes (ui.js openNotes) */
.notes {
  display: grid;
  gap: 8px;
}

.notes__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  min-height: 40px;
  padding: 6px 12px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-paper2) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-paper2) padding-box;
  color: var(--accent-dark);
  font-size: var(--fs-m);
}

/* (the catalog's cover: the notebook's four seasons, a quarter each) */
.notes__head--cover {
  background: linear-gradient(90deg, #f7d3dc 0 25%, #d8edc4 25% 50%, #f7d2a6 50% 75%, #d6e6f5 75%) padding-box;
}

/* (all four seasons seen: their corners on the page) */
.notes__head--seasons {
  outline: var(--u) dashed rgba(91, 70, 50, 0.45);
  outline-offset: calc(var(--u) * -4);
}

.notes__pennant {
  padding: 0 8px;
  background: #e39a3c;
  color: #fff9ec;
  font-size: var(--fs-s);
  line-height: 1.8;
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%);
}

.notes__stickers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
  padding: 2px;
}

/* (a sticker: its picture in the game's pixels, a white edge round it as a sticker has, stuck on a little askew) */
.sticker {
  width: 21px;
  height: 21px;
  image-rendering: pixelated;
  transform: rotate(var(--r, 0deg));
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 1px 0 rgba(30, 20, 15, 0.3));
}

.notes__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.note {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 4px 8px 4px 4px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-card) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-card) padding-box;
}

.note canvas { image-rendering: pixelated; }

/* (one not had yet: its "?" faded and its name muted, but every word on it as easy to read as the rest (WCAG AA): the
   whole card faded to 0.72 left its small grey words at 3.4:1) */
.note--unknown .note__unknown { opacity: 0.72; }

/* (one of the Spring Vein's things not found yet: a shadow of its picture, faded as the "?" is) */
.note--unknown .icon-shadow { opacity: 0.72; }

.note--unknown .note__main strong { color: var(--ink-muted); }

.note__unknown {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  color: var(--ink-muted);
  font-size: var(--fs-l);
}

.note__main {
  display: grid;
  line-height: 1.4;
}

.note__info,
.note__marks {
  color: var(--ink-muted);
  font-size: var(--fs-s);
}

.notes__memories h3 {
  margin: 4px 0 2px;
  font-size: var(--fs-m);
  color: var(--accent-dark);
}

.notes__memories p {
  margin: 0;
  line-height: 1.5;
}

/* (Mino's bread beside his line; Theo's photographs, hers to stop or allow) */
.notes__memories .sticker {
  margin: 0 8px 0 2px;
  vertical-align: middle;
}

.notes__change {
  margin-left: 6px;
  vertical-align: middle;
}

/* ---------- the title screen ---------- */

/* over the shop going on behind it: the name of the game, and a paper box with the buttons */
.title {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: calc(64px + var(--safe-t)) calc(16px + var(--safe-r)) calc(24px + var(--safe-b)) calc(16px + var(--safe-l));
  background: radial-gradient(ellipse at 50% 42%, rgba(24, 26, 48, 0.05) 30%, rgba(24, 26, 48, 0.5));
  transition: opacity 0.7s;
}

/* (going dark before the game begins, then the dark lifts) */
.title::before {
  content: "";
  position: fixed;
  inset: 0;
  background: #12142a;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}

.title.is-leaving::before { opacity: 1; }
.title.is-leaving .title__card { opacity: 0; transition: opacity 0.3s; }
.title.is-gone { opacity: 0; pointer-events: none; }

.title { outline: none; }

.title__card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(640px, 100%);
  text-align: center;
}

.title__logo {
  display: grid;
  justify-items: center;
  gap: 8px;
  /* (on a soft dark plate of its own, its edges fading out: the yard going on behind, capybaras swimming by and their
     bubbles, no longer through the letters) */
  padding: 8px 14px 14px;
  border-radius: 22px;
  background: rgba(46, 31, 42, 0.74);
  box-shadow: 0 0 24px 16px rgba(46, 31, 42, 0.74);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.title__capys {
  image-rendering: pixelated;
  margin-bottom: -6px;
}

/* the name, cream with a dark pixel outline one font pixel wide (the font is 12 pixels tall) */
.title__name,
.title__sub {
  --fp: calc(var(--fs-xl) / 12);
  --edge: #4a2f22;
  margin: 0;
  color: #fff6e6;
  text-wrap: balance;
  text-shadow:
    var(--fp) 0 0 var(--edge), calc(var(--fp) * -1) 0 0 var(--edge), 0 var(--fp) 0 var(--edge), 0 calc(var(--fp) * -1) 0 var(--edge),
    var(--fp) var(--fp) 0 var(--edge), calc(var(--fp) * -1) var(--fp) 0 var(--edge), var(--fp) calc(var(--fp) * -1) 0 var(--edge), calc(var(--fp) * -1) calc(var(--fp) * -1) 0 var(--edge),
    0 calc(var(--fp) * 2) 0 rgba(30, 20, 40, 0.45);
}

.title__name {
  font-size: var(--fs-xl);
  line-height: 1.25;
}

.title__sub {
  --fp: calc(var(--fs-m) / 12);
  font-size: var(--fs-m);
  line-height: 1.5;
  color: #ffe3b8;
}

.title__menu {
  display: grid;
  gap: 10px;
  width: min(360px, 100%);
  padding: 14px;
  text-align: left;
}

/* a phone on its side: the name on the left, the box on the right */
@media (orientation: landscape) and (max-height: 520px) {
  .title { padding-top: calc(16px + var(--safe-t)); }
  .title__card { grid-template-columns: 1fr minmax(0, 340px); align-items: center; width: min(900px, 100%); }
  /* (but the look maker, 600 px of it, in a column of its own, and the HUD's sound and language buttons put away while
     it's up: squeezed into the second column in the desktop app's smallest window, 640 by 400, its 21 picks hung
     outside its paper, and the two buttons sat over its heading, there and on a phone on its side, and over its picks
     as it scrolled) */
  .title__card:has(.title__menu--make) { grid-template-columns: minmax(0, 600px); }
  body.is-title:has(.title__menu--make) .hud { visibility: hidden; }
}

.title__btn {
  display: grid;
  gap: 2px;
  justify-items: center;
  width: 100%;
  padding-block: 8px;
}

.title__coins { white-space: nowrap; }

.title__detail {
  font-size: var(--fs-s);
  line-height: 1.5;
  opacity: 0.92;
}

.title__ask {
  margin: 0;
  color: var(--accent-dark);
  font-size: var(--fs-m);
  line-height: 1.5;
}

.title__note {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--fs-s);
  line-height: 1.5;
  text-align: center;
}

.title__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* ---------- who she is: the creator (ui.lookMaker), on the title screen and from the wardrobe ---------- */

.title__menu--make { width: min(600px, 100%); }
/* (the capybaras over the name make room for it) */
.title__card:has(.title__menu--make) .title__capys { display: none; }
/* (and on a screen too short for both, 1280 by 720 say, the name's plate too: the box with her in it is taller than
   what's left, the screen scrolled down to her name's box, and the plate was cut off at the top; 1280 by 800 and 1366 by
   768 too since "Another name" went under her name's box, Start below the screen's edge) */
@media (max-height: 880px) {
  .title__card:has(.title__menu--make) .title__logo { display: none; }
}

/* her, walking round, beside what to pick; on a narrow screen, above it */
.maker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.maker__side {
  display: grid;
  gap: 8px;
  justify-items: stretch;
}

.maker__figure {
  margin: 0;
  padding: 6px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-card) 2 / calc(var(--u) * 2) / 0 stretch;
  background: #efe4d2 padding-box;
}

.maker__stage {
  display: block;
  width: 180px;
  height: 198px;
  image-rendering: pixelated;
}

.maker__choices {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.maker__row h3 {
  margin: 0 0 4px;
  color: var(--ink-muted);
  font-size: var(--fs-s);
  line-height: 1.5;
}

.maker__items {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.maker__pick {
  display: grid;
  place-items: center;
  min-width: 36px;
  min-height: 36px;
  padding: 3px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-card) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-card) padding-box;
}

.maker__pick[aria-pressed="true"] {
  border-image: var(--frame-picked) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-picked) padding-box;
}

.maker__pick:active { transform: translateY(var(--u)); }

/* the five hairs: head and shoulders of each, in her colours */
.maker__pick--base {
  align-items: start;
  width: 52px;
  height: 56px;
  overflow: hidden;
  padding: 2px 0 0;
}

.maker__face {
  width: 50px;
  height: auto;
  image-rendering: pixelated;
}

.maker__swatch {
  display: block;
  width: 22px;
  height: 22px;
  background: var(--c);
  box-shadow: inset 0 0 0 var(--u) rgba(58, 42, 32, 0.35);
}

.maker__pick--apron canvas {
  width: 30px;
  height: auto;
  image-rendering: pixelated;
}

@media (max-width: 560px) {
  .maker { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .maker__side { grid-template-columns: auto auto; align-items: end; }
  .maker__stage { width: 120px; height: 132px; }
  .maker__choices { justify-self: stretch; }
  /* (all eight hair colours in a row) */
  .maker__items--hair { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .maker__items--hair .maker__pick { min-width: 0; }
}

/* while it's up: only the sound and language buttons of the HUD, over it; nothing else of the game */
body.is-title .hud { z-index: 4; }
body.is-title :is(.hud__left, #photoBtn, #helpBtn, #settingsBtn, #mailBtn, .bar, .new-day, .hint, .info-card, .toasts, .payslip, .place-banner) { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .title, .title::before, .title.is-leaving .title__card { transition: none; }
}

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

/* a row each: what it is, then a slider (and how far up it is) or a pair of buttons */
.settings {
  display: grid;
  gap: 14px;
}

.settings__row {
  display: grid;
  grid-template-columns: minmax(7em, auto) 1fr auto;
  align-items: center;
  gap: 12px;
}

.settings__row > label,
.settings__label {
  color: var(--ink);
}

.settings__val {
  min-width: 4ch;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.settings__pair {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings__opt[aria-pressed="true"] {
  border-image: var(--frame-picked) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-picked) padding-box;
  color: var(--accent-dark);
}

/* the sliders: a wooden groove with a round handle, in pixels */
.settings__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.settings__range::-webkit-slider-runnable-track {
  height: 8px;
  border: var(--u) solid var(--wood);
  background: linear-gradient(to right, var(--accent) 0 var(--fill, 100%), var(--paper-2) var(--fill, 100%));
}

.settings__range::-moz-range-track {
  height: 8px;
  border: var(--u) solid var(--wood);
  background: var(--paper-2);
}

.settings__range::-moz-range-progress {
  height: 8px;
  background: var(--accent);
}

.settings__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border: var(--u) solid var(--wood);
  background: var(--fill-card);
  box-shadow: inset 0 calc(var(--u) * -2) 0 var(--paper-2);
}

.settings__range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: var(--u) solid var(--wood);
  border-radius: 0;
  background: var(--fill-card);
}

.settings__range:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.settings__ask {
  align-items: center;
}

.settings__q {
  flex: 1 1 100%;
  margin: 0;
  color: var(--accent-dark);
  line-height: 1.5;
}

.help__head {
  margin: 14px 0 6px;
  color: var(--accent-dark);
  font-size: var(--fs-m);
}

@media (max-width: 600px) {
  .settings__row { grid-template-columns: 1fr auto; }
  .settings__row > label, .settings__label { grid-column: 1 / -1; }
  .settings__pair { grid-column: 1 / -1; }
}

/* ---------- loading ---------- */

.loading {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-content: center;
  gap: 12px;
  text-align: center;
  background: linear-gradient(#1f2433, #2d3550);
  color: #f4ecdf;
  transition: opacity 0.6s;
}

.loading h1 {
  margin: 0;
  font-size: 48px;
  line-height: 1.25;
  letter-spacing: 0.04em;
}

.loading h1 span {
  display: block;
  margin-top: 8px;
  font-size: 24px;
  letter-spacing: 0.1em;
  opacity: 0.8;
}

.loading p {
  margin: 0;
  opacity: 0.8;
}

.loading.is-done {
  opacity: 0;
  pointer-events: none;
}

/* (its words go first, so they don't show through the title screen as it fades) */
.loading.is-done > * {
  opacity: 0;
  transition: opacity 0.15s;
}

.loading__snow {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(2px 2px at 20% 30%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 70% 60%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 40% 80%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 85% 20%, #fff 50%, transparent 51%);
  background-size: 180px 180px;
  opacity: 0.5;
  animation: snow 9s linear infinite;
}

@keyframes snow {
  to { background-position: 0 180px; }
}

.noscript {
  position: absolute;
  inset: auto 0 40% 0;
  text-align: center;
  color: #fff;
}

/* ---------- small screens ---------- */

@media (max-width: 600px) {
  .pill { min-height: 36px; padding: 2px 8px; }
  .icon-btn { height: 36px; }
  .icon-btn:not(.icon-btn--text) { width: 36px; }
  .tasks { min-width: min(260px, calc(100vw - 20px)); }
  .wardrobe__main { grid-template-columns: 1fr; }
  .wardrobe__preview { width: 168px; }
  .dialog { grid-template-columns: auto 1fr; padding: 8px; }
  .dialog__face { width: 56px; }
  .loading h1 { font-size: 36px; }
  .loading h1 span { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .toast, .loading__snow { animation: none; }
}

/* --- festivals: today's in the jobs list; the look back over the winter at New Year --- */
.tasks__fest { color: var(--accent-dark); }

.year {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0 12px;
}

/* each a little card: the number large, what it counts under it */
.year__row {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  padding: 8px 6px 6px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-card) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-card) padding-box;
  text-align: center;
}

.year dt { color: var(--ink-muted); font-size: var(--fs-s); line-height: 1.3; }
.year dd { margin: 0; font-family: var(--pixel); font-size: var(--fs-m); line-height: 1.2; font-variant-numeric: tabular-nums; }
.year__head { margin: 4px 0 6px; font-size: var(--fs-s); } /* (the font's own sizes: 20 and 14 px were between them, blurred) */

.year__capys {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 6px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.year__capy {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 6px 4px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-card) 2 / calc(var(--u) * 2) / 0 stretch;
  background: var(--fill-card) padding-box;
  font-size: var(--fs-s);
  text-align: center;
}

.year__face { width: 52px; height: auto; image-rendering: pixelated; }
.year__hearts { color: #c4405f; font-size: var(--fs-s); letter-spacing: 0.04em; word-break: break-all; }
.year__note { margin: 0 0 4px; color: var(--ink-muted); line-height: 1.6; }

/* --- the festival games (games.js): goldfish scooping, the capybara race, the watermelon, the leaves --- */
.scoop,
.race,
.suika,
.leaves {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.scoop__tub,
.race__course,
.suika__mat,
.leaves__field {
  display: block;
  max-width: 100%;
  image-rendering: pixelated;
  touch-action: none;
  cursor: crosshair;
}

.race__course,
.suika__mat { cursor: pointer; }
.leaves__field { cursor: ew-resize; }
.scoop__tub:focus-visible,
.race__course:focus-visible,
.suika__mat:focus-visible,
.leaves__field:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* (what to do, under the field; in a short window, the desktop app's smallest, 640 by 400, or a phone on its side, beside
   it: under it, the race's Cheer! and the scooping's and the watermelon's buttons were below the fold even with the field
   at a CSS pixel to its pixel, the re-verification's E-3. games.js fitPanel then sizes the field to what's left) */
.game__how { display: contents; }

@media (orientation: landscape) and (max-height: 520px) {
  .scoop,
  .race,
  .suika,
  .leaves { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 16px; }
  .game__how { display: grid; justify-items: center; gap: 8px; width: 100%; }
  /* (and what's said as it goes at the size of the words beside it: at the size it is under the field, the race's last
     place, three lines of it in the column, put the Cheer! back below the fold) */
  .scoop__say,
  .race__say,
  .suika__say { font-size: var(--fs-s); }
  /* (the race's bar, watched with the course, under it) */
  .race > .race__bar { grid-column: 1; }
  .race > .game__how { grid-column: 2; grid-row: 1 / span 2; }
}

.scoop__row,
.suika__row,
.leaves__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 16px;
  width: 100%;
}

/* how much is left of the scoop's paper */
.scoop__paper {
  position: relative;
  width: 160px;
  height: 14px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-card) 2 / calc(var(--u) * 2) / 0 stretch;
  background: #e6eef4 padding-box;
}

.scoop__fill {
  display: block;
  height: 100%;
  background: #8fd0ec;
  transition: width 0.1s linear;
}

.scoop__paper.is-low .scoop__fill { background: #ec9a8f; }
.scoop__got,
.suika__left,
.leaves__count { margin: 0; font-family: var(--pixel); font-size: var(--fs-m); }
.scoop__say,
.race__say { min-height: 1.6em; margin: 0; text-align: center; line-height: 1.5; }
/* (the crowd's calls: two lines' room, so the panel doesn't jump as they change) */
.suika__say { display: flex; flex: 1 1 14em; align-items: center; justify-content: center; min-height: 3em; margin: 0; text-align: center; line-height: 1.5; }

/* how long the breeze lasts, at the Leaf Viewing */
.leaves__time {
  position: relative;
  width: 160px;
  height: 14px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-card) 2 / calc(var(--u) * 2) / 0 stretch;
  background: #f4e9d8 padding-box;
}

.leaves__fill {
  display: block;
  height: 100%;
  background: #e8763a;
  transition: width 0.1s linear;
}

/* the race's bar: cheer while the marker is in the middle */
.race__bar {
  position: relative;
  width: min(100%, 360px);
  height: 22px;
  border: calc(var(--u) * 2) solid transparent;
  border-image: var(--frame-card) 2 / calc(var(--u) * 2) / 0 stretch;
  background: #f4e9d8 padding-box;
}

.race__zone {
  position: absolute;
  top: 0;
  bottom: 0;
  background: #b9e3a5;
}

.race__bar.is-hot .race__zone { background: #8fd17a; }

.race__marker {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 6px;
  margin-left: -3px;
  background: var(--accent-fill);
  box-shadow: 0 0 0 2px #fff8ec;
}

.race__legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  justify-content: center;
  gap: 2px 18px;
  margin: 0;
  padding: 0;
  list-style: decimal inside;
  font-size: var(--fs-s);
  color: var(--ink-muted);
}

@media (max-width: 520px) {
  .race__legend { grid-template-columns: minmax(0, max-content); }
}

.race__cheer { min-width: 10em; }

/* a camera's flash (Lin's photo at the Blossom Picnic) */
.flash {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #fff;
  pointer-events: none;
  animation: flash 0.6s ease-out forwards;
}

@keyframes flash {
  from { opacity: 0.85; }
  to { opacity: 0; }
}

/* --- her own clothes (the wardrobe's "You": ui.openCloset) --- */
.who__face {
  width: 40px;
  height: auto;
  image-rendering: pixelated;
}

.closet__preview { width: 228px; }

/* one she hasn't got yet: faded, with how she might come by it */
.item--locked {
  opacity: 0.62;
  cursor: default;
}

.item--locked:active { transform: none; }

.item__how {
  color: var(--ink-muted);
  font-size: var(--fs-s);
  line-height: 1.2;
  text-align: center;
}

/* (the pay slip, with the leaf Dove drew on it in her garden story) */
.payslip--leaf .payslip__title::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  vertical-align: -1px;
  background: #79b965;
  clip-path: polygon(50% 0, 100% 35%, 70% 100%, 30% 100%, 0 35%);
}

/* (the crate's route, said first, as Noel labelled it) */
.ship__route {
  margin: 0 0 4px;
  color: var(--accent-dark);
  font-size: var(--fs-s);
}