/* Deliverance in Malta — player UI design system (docs/UI_REDESIGN.md).
   Solid surfaces, a restrained Mediterranean palette, one type scale, one spacing scale, visible focus.
   Loaded once from index.html; components in ui/components.js use these classes. */
:root {
  /* Surfaces: the Deliverance palette (limestone white, sand, warm beige, black ink), as the start page and creator.
     Dark mode below swaps these values only; components use the tokens, never fixed colours. */
  --ui-bg: #f7f5f3;
  --ui-surface: #ffffff;
  --ui-raised: #f4efe7;
  --ui-sunk: #efe9e0;
  --ui-line: #e3dbcf;
  --ui-line-strong: #b9aa94;
  --ui-hud: #fffdf9f2;        /* panels floating over the world */
  --ui-hud-base: #fffdf9;     /* the same, solid: Settings → Panel opacity mixes it with the world (ui/a11y.js) */
  --ui-tint: #f0e9df;         /* selected / hovered rows */
  --ui-scrim: #2a221866;
  /* Text */
  --ui-ink: #171512;
  --ui-ink-2: #514b44;
  --ui-mute: #6e665c;
  /* Accents (the name --ui-sea is kept for compatibility: it is the theme accent, stone brown here) */
  --ui-sea: #7a6a56;          /* primary actions, links, selection */
  --ui-sea-ink: #ffffff;      /* text on the accent */
  --ui-green: #2f6b45;        /* success, available */
  --ui-ochre: #8a5a12;        /* warning, time to leave */
  --ui-red: #b13a26;          /* danger, failed, unavailable */
  --ui-violet: #5b4ba0;       /* decisions waiting */
  --ui-focus: #2a2218;
  --ui-shadow: 0 10px 30px #3a2f2029;
  color-scheme: light;
  /* Type */
  --ui-font: "Fjalla One", "Oswald", "Arial Narrow", ui-sans-serif, system-ui, sans-serif;   /* the Deliverance face, as the start page */
  /* Shared with Online and the editor (online/shared/palette.css maps its --dm-* names onto these): display for
     brand marks and page titles, body for reading text and forms. Fonts ship in ui/fonts (no third-party requests). */
  --ui-font-display: "Fjalla One", "Oswald", "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
  --ui-font-body: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ui-ink-rgb: 23 21 18; --ui-sea-rgb: 122 106 86;   /* for Online's Tailwind colours with opacity (bg-primary/10) */
  --ui-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --ui-t-xs: 12px; --ui-t-s: 13px; --ui-t-m: 15px; --ui-t-l: 18px; --ui-t-xl: 24px; --ui-t-xxl: 40px;
  /* Space and shape */
  --ui-s1: 4px; --ui-s2: 8px; --ui-s3: 12px; --ui-s4: 16px; --ui-s5: 24px; --ui-s6: 32px;
  --ui-r1: 6px; --ui-r2: 10px; --ui-r3: 14px; --ui-r4: 22px;
  --ui-hit: 36px; /* minimum interactive height */
}
/* Dark mode: warm charcoal and sand. Follows the system unless Settings → Theme chooses (ui/theme.js sets
   data-ui-theme on <html>). */
:root[data-ui-theme="dark"] {
  --ui-bg: #161412; --ui-surface: #1f1c19; --ui-raised: #29251f; --ui-sunk: #110f0d; --ui-line: #36312a; --ui-line-strong: #5a5243;
  --ui-hud: #1c1916f0; --ui-hud-base: #1c1916; --ui-tint: #312b23; --ui-scrim: #000000a0;
  --ui-ink: #f2ebdc; --ui-ink-2: #cfc6b4; --ui-mute: #a39a88; --ui-ink-rgb: 242 235 220; --ui-sea-rgb: 201 176 138;
  --ui-sea: #c9b08a; --ui-sea-ink: #1a140b; --ui-green: #7cc495; --ui-ochre: #e6b450; --ui-red: #ec7a64; --ui-violet: #b5a8f2; --ui-focus: #f3d27a;
  --ui-shadow: 0 10px 30px #000a; color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-ui-theme="light"]) {
    --ui-bg: #161412; --ui-surface: #1f1c19; --ui-raised: #29251f; --ui-sunk: #110f0d; --ui-line: #36312a; --ui-line-strong: #5a5243;
    --ui-hud: #1c1916f0; --ui-hud-base: #1c1916; --ui-tint: #312b23; --ui-scrim: #000000a0;
    --ui-ink: #f2ebdc; --ui-ink-2: #cfc6b4; --ui-mute: #a39a88; --ui-ink-rgb: 242 235 220; --ui-sea-rgb: 201 176 138;
    --ui-sea: #c9b08a; --ui-sea-ink: #1a140b; --ui-green: #7cc495; --ui-ochre: #e6b450; --ui-red: #ec7a64; --ui-violet: #b5a8f2; --ui-focus: #f3d27a;
    --ui-shadow: 0 10px 30px #000a; color-scheme: dark;
  }
}
/* Hand-drawn style (Settings → Style; ui/theme.js sets data-ui-style): one legible hand face for everything, a little
   more informal for titles (docs/design/HAND_DRAWN_STYLE.md §10). Readable-font choices (ui/a11y.js) override it. */
:root[data-ui-style="hand"] {
  --ui-font: "Shantell Sans", "Fjalla One", "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
  --ui-font-display: "Shantell Sans", "Fjalla One", ui-sans-serif, system-ui, sans-serif;
  --ui-font-body: "Shantell Sans", "Inter", "Segoe UI", system-ui, sans-serif;
  --ui-hand-text: "INFM" 35; --ui-hand-title: "INFM" 85;
}
@media (prefers-reduced-motion: reduce) { :root { --ui-motion: 0s; } * { transition: none !important; animation: none !important; } }

/* ---- Base for every UI surface ---------------------------------------------------------------------------- */
.ui, #phone, #repHud, #worldHud, .worldPanel { font-family: var(--ui-font); }
.ui :focus-visible, #phone :focus-visible, #repHud :focus-visible, #worldHud :focus-visible, .ui-sheet :focus-visible {
  outline: 2px solid var(--ui-focus) !important; outline-offset: 2px;
}
.ui-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Buttons ---------------------------------------------------------------------------------------------- */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-s2); min-height: var(--ui-hit);
  padding: 0 var(--ui-s4); border-radius: var(--ui-r2); border: 1px solid var(--ui-line-strong); background: var(--ui-raised);
  color: var(--ui-ink); font: 600 var(--ui-t-s)/1.2 var(--ui-font); font-weight: 600 !important; cursor: pointer; text-decoration: none; margin: 0; }
.ui-btn:hover { border-color: var(--ui-ink-2); }
.ui-btn.primary { background: var(--ui-sea); border-color: var(--ui-sea); color: var(--ui-sea-ink); font-weight: 700 !important; }
.ui-btn.primary:hover { filter: brightness(1.08); }
.ui-btn.quiet { background: transparent; border-color: transparent; color: var(--ui-sea); padding: 0 var(--ui-s2); }
.ui-btn.danger { background: transparent; border-color: var(--ui-red); color: var(--ui-red); }
.ui-btn.block { width: 100%; }
.ui-btn[disabled], .ui-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ui-btn[aria-busy="true"] { cursor: progress; opacity: .7; }
.ui-iconbtn { width: var(--ui-hit); height: var(--ui-hit); padding: 0; }
.ui-why { display: block; margin-top: var(--ui-s1); color: var(--ui-mute); font-size: var(--ui-t-xs); }

/* ---- Chips (status with text, never colour alone) --------------------------------------------------------- */
.ui-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; font: 700 var(--ui-t-xs)/1.5 var(--ui-font);
  letter-spacing: .02em; border: 1px solid currentColor; white-space: nowrap; }
.ui-chip::before { content: ''; width: 6px; height: 6px; border-radius: 2px; background: currentColor; }
.ui-chip.info { color: var(--ui-sea); } .ui-chip.good { color: var(--ui-green); } .ui-chip.warn { color: var(--ui-ochre); }
.ui-chip.bad { color: var(--ui-red); } .ui-chip.decide { color: var(--ui-violet); } .ui-chip.neutral { color: var(--ui-mute); }

/* ---- Sections, rows, lists -------------------------------------------------------------------------------- */
.ui-section { margin: 0 0 var(--ui-s5); }
.ui-section > header { display: flex !important; position: static !important; max-width: none !important; padding: 0 !important; background: none !important; border-radius: 0 !important; z-index: auto !important; pointer-events: auto !important; /* the game styles and hides bare <header> elements (index.html, app.js) */ align-items: baseline; justify-content: space-between; gap: var(--ui-s3); margin-bottom: var(--ui-s2); }
.ui-section > header h3 { margin: 0; font: 700 var(--ui-t-xs)/1.4 var(--ui-font); letter-spacing: .08em; text-transform: uppercase; color: var(--ui-mute); }
.ui-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ui-line); }
.ui-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--ui-s3); padding: var(--ui-s3) 0;
  border-bottom: 1px solid var(--ui-line); color: var(--ui-ink); }
.ui-row.button { width: 100% !important; box-sizing: border-box; background: none; border-width: 0 0 1px; text-align: left; font: inherit; cursor: pointer; }
.ui-row.button:hover { background: var(--ui-tint); }
.ui-row .lead { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--ui-raised); color: var(--ui-ink); font: 700 var(--ui-t-s) var(--ui-font); }
.ui-row .main { min-width: 0; }
.ui-row .main b { display: block; font: 600 var(--ui-t-m)/1.3 var(--ui-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-row .main small { display: block; color: var(--ui-mute); font-size: var(--ui-t-xs); line-height: 1.4; }
.ui-row .end { text-align: right; font-variant-numeric: tabular-nums; }
.ui-row.unread .main b::after { content: ''; display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--ui-sea); vertical-align: middle; }

/* ---- Values: money, time, meters -------------------------------------------------------------------------- */
.ui-money { font-variant-numeric: tabular-nums; font-weight: 700; }
.ui-money.neg { color: var(--ui-red); }
.ui-meter { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: var(--ui-s2); margin: 6px 0; font-size: var(--ui-t-s); }
.ui-meter .track { height: 8px; border-radius: 4px; background: var(--ui-sunk); overflow: hidden; border: 1px solid var(--ui-line); }
.ui-meter .track i { display: block; height: 100%; background: var(--ui-green); }
.ui-meter.warn .track i { background: var(--ui-ochre); } .ui-meter.bad .track i { background: var(--ui-red); }
.ui-meter .state { font-size: var(--ui-t-xs); color: var(--ui-mute); min-width: 64px; text-align: right; }

/* ---- Empty / unavailable / error / success / loading ------------------------------------------------------ */
.ui-state { padding: var(--ui-s4); border-radius: var(--ui-r3); background: var(--ui-surface); border: 1px dashed var(--ui-line-strong); color: var(--ui-ink-2); }
.ui-state b { display: block; color: var(--ui-ink); font-size: var(--ui-t-m); margin-bottom: 2px; }
.ui-state.bad { border-style: solid; border-color: var(--ui-red); } .ui-state.good { border-style: solid; border-color: var(--ui-green); }
.ui-state .ui-btn, .ui-state > button { display: flex; margin-top: var(--ui-s3); }
.ui-state p { margin: 2px 0 0; }

/* ---- Help (optional explanations) ------------------------------------------------------------------------- */
details.ui-help { margin: var(--ui-s2) 0; color: var(--ui-ink-2); font-size: var(--ui-t-s); }
details.ui-help > summary { cursor: pointer; color: var(--ui-sea); font-weight: 600; list-style: none; }
details.ui-help > summary::-webkit-details-marker { display: none; }
details.ui-help > summary::before { content: '? '; }

/* ---- Segmented control and stepper ------------------------------------------------------------------------ */
.ui-seg { display: inline-flex; border: 1px solid var(--ui-line-strong); border-radius: var(--ui-r2); overflow: hidden; }
.ui-seg button { min-height: var(--ui-hit); padding: 0 var(--ui-s3); background: transparent; border: 0; border-right: 1px solid var(--ui-line-strong);
  color: var(--ui-ink-2); font: 600 var(--ui-t-s) var(--ui-font); cursor: pointer; margin: 0; border-radius: 0; }
.ui-seg button:last-child { border-right: 0; }
.ui-seg button[aria-pressed="true"] { background: var(--ui-sea); color: var(--ui-sea-ink); }
.ui-step { display: inline-flex; align-items: center; gap: var(--ui-s2); }
.ui-step input { width: 84px; min-height: var(--ui-hit); text-align: center; border-radius: var(--ui-r2); border: 1px solid var(--ui-line-strong);
  background: var(--ui-sunk); color: var(--ui-ink); font: 600 var(--ui-t-m) var(--ui-font); }

/* ---- Review sheet (commitments) and action sheet ---------------------------------------------------------- */
.ui-sheet-backdrop { position: fixed; inset: 0; z-index: 2000; background: var(--ui-scrim); display: flex; align-items: flex-end; justify-content: center; }
.ui-sheet { width: min(440px, 100vw); max-height: 80vh; overflow: auto; margin: 0 0 24px; border-radius: var(--ui-r4); background: var(--ui-surface);
  border: 1px solid var(--ui-line-strong); color: var(--ui-ink); padding: var(--ui-s5); box-shadow: var(--ui-shadow); font-family: var(--ui-font); }
.ui-sheet h2 { margin: 0 0 var(--ui-s1); font: 700 var(--ui-t-l)/1.3 var(--ui-font); }
.ui-sheet p { margin: 0 0 var(--ui-s3); color: var(--ui-ink-2); font-size: var(--ui-t-s); }
.ui-sheet dl { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--ui-s4); margin: var(--ui-s3) 0; font-size: var(--ui-t-s); }
.ui-sheet dt { color: var(--ui-mute); } .ui-sheet dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-sheet .warning { padding: var(--ui-s3); border-radius: var(--ui-r2); border: 1px solid var(--ui-line-strong); background: var(--ui-sunk); color: var(--ui-ink); margin: var(--ui-s3) 0; }
.ui-sheet .warning.danger { border-color: var(--ui-red); }
.ui-sheet .actions { display: flex; gap: var(--ui-s2); justify-content: flex-end; margin-top: var(--ui-s4); }

/* ---- Today (phone home) ----------------------------------------------------------------------------------- */
.ui-today { display: grid; gap: var(--ui-s3); margin: 0 0 var(--ui-s5); }
.ui-today .now { padding: var(--ui-s4); border-radius: var(--ui-r3); background: var(--ui-surface); border: 1px solid var(--ui-line); }
.ui-today .now .kicker { display: flex; justify-content: space-between; align-items: center; gap: var(--ui-s2); margin-bottom: var(--ui-s2); }
.ui-today .now h3 { margin: 0; font: 700 var(--ui-t-l)/1.3 var(--ui-font); color: var(--ui-ink); text-transform: none; letter-spacing: 0; }
.ui-today .now p { margin: 4px 0 0; color: var(--ui-ink-2); font-size: var(--ui-t-s); }
.ui-today .actions { display: flex; flex-wrap: wrap; gap: var(--ui-s2); margin-top: var(--ui-s3); }
.ui-today .alert { display: grid; grid-template-columns: auto 1fr auto; gap: var(--ui-s3); align-items: center; padding: var(--ui-s3); border-radius: var(--ui-r3);
  background: var(--ui-surface); border: 1px solid var(--ui-line); color: var(--ui-ink); text-align: left; font: inherit; width: 100%; cursor: pointer; }
.ui-today .alert.decide { border-color: var(--ui-violet); } .ui-today .alert.warn { border-color: var(--ui-ochre); } .ui-today .alert.bad { border-color: var(--ui-red); }
.ui-today .alert b { display: block; font-size: var(--ui-t-m); } .ui-today .alert small { color: var(--ui-mute); font-size: var(--ui-t-xs); }

/* ---- Settings ---------------------------------------------------------------------------------------------- */
.ui-switch { display: grid; grid-template-columns: 1fr auto; gap: var(--ui-s1) var(--ui-s3); align-items: center; padding: var(--ui-s3) 0; border-bottom: 1px solid var(--ui-line); }
.ui-switch label { font: 600 var(--ui-t-m) var(--ui-font); color: var(--ui-ink); }
.ui-switch small { grid-column: 1 / -1; color: var(--ui-mute); font-size: var(--ui-t-xs); }
.ui-switch input { appearance: none; -webkit-appearance: none; position: relative; width: 44px; height: 26px; margin: 0; border-radius: 13px;
  background: var(--ui-sunk); border: 1px solid var(--ui-line-strong); cursor: pointer; transition: background var(--ui-motion, .15s); }
.ui-switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ui-ink-2); transition: transform var(--ui-motion, .15s); }
.ui-switch input:checked { background: var(--ui-sea); border-color: var(--ui-sea); }
.ui-switch input:checked::after { transform: translateX(18px); background: var(--ui-sea-ink); }

/* Decision tray (systems/attention-panel.js): time is paused while it shows decisions. */
.ui-tray { position: fixed; left: 50%; transform: translateX(-50%); top: 110px; z-index: 1200; width: min(360px, calc(100vw - 32px)); max-height: 45vh; overflow: auto;
  background: var(--ui-surface); color: var(--ui-ink); border: 1px solid var(--ui-violet); border-radius: var(--ui-r3); padding: var(--ui-s4);
  box-shadow: var(--ui-shadow); font: var(--ui-t-s)/1.4 var(--ui-font); }
.ui-tray[hidden] { display: none; }
.ui-tray-head { display: flex; align-items: center; gap: var(--ui-s2); margin-bottom: var(--ui-s2); }
.ui-tray-card { padding: var(--ui-s3) 0; border-top: 1px solid var(--ui-line); }
.ui-tray-card p { margin: 0 0 var(--ui-s1); font-size: var(--ui-t-m); }
.ui-tray-card small { color: var(--ui-mute); }
.ui-tray .actions { display: flex; flex-wrap: wrap; gap: var(--ui-s2); margin-top: var(--ui-s2); }
.ui-tray, .ui-tray * { box-sizing: border-box; }
/* Narrow screens: the phone fills the screen, so the tray becomes a bottom sheet and Today stays readable above it. */
@media (max-width: 600px) {
  .ui-tray { left: 0; right: 0; transform: none; top: auto; bottom: 0; width: 100%; max-height: 45vh; border-radius: var(--ui-r3) var(--ui-r3) 0 0; border-width: 1px 0 0; }
}

/* A row with content under it (Schedule shifts: departure note and Plan journey). */
.ui-rowwrap { border-bottom: 1px solid var(--ui-line); padding-bottom: var(--ui-s3); }
.ui-rowwrap > .ui-row { border-bottom: 0; }
.ui-rowwrap .actions, .ui-offer .actions, .ui-msg .actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--ui-s2); margin-top: var(--ui-s2); }
.ui-note { margin: 0; font-size: var(--ui-t-s); color: var(--ui-ink-2); }
.ui-note.warn { color: var(--ui-ochre); } .ui-note.bad { color: var(--ui-red); }

/* Offer card (Jobs, offer messages). */
.ui-offers { display: grid; gap: var(--ui-s3); margin-bottom: var(--ui-s4); }
.ui-offer { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-r3); padding: var(--ui-s4); }
.ui-offer > header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-s2); }
.ui-offer > header small { margin-left: auto; color: var(--ui-mute); font-size: var(--ui-t-xs); }
.ui-offer h4 { margin: var(--ui-s2) 0; font: 600 var(--ui-t-m)/1.35 var(--ui-font); color: var(--ui-ink); }
.ui-offer dl { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--ui-s3); margin: 0 0 var(--ui-s2); font-size: var(--ui-t-s); }
.ui-offer dt { color: var(--ui-mute); } .ui-offer dd { margin: 0; color: var(--ui-ink); }
.ui-offer .travel, .ui-offer .why { margin: 0 0 var(--ui-s1); font-size: var(--ui-t-s); color: var(--ui-ink-2); }
.ui-offer .blockers { margin: var(--ui-s1) 0; padding-left: 18px; color: var(--ui-red); font-size: var(--ui-t-s); }
.ui-offer .checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ui-s1); font-size: var(--ui-t-s); }

/* Message thread. */
.ui-thread-title { text-transform: none; letter-spacing: 0; margin: var(--ui-s2) 0 var(--ui-s1); font: 700 var(--ui-t-l) var(--ui-font); }
.ui-thread { list-style: none; margin: var(--ui-s3) 0; padding: 0; display: grid; gap: var(--ui-s3); }
.ui-msg { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-r3); padding: var(--ui-s3) var(--ui-s4); }
.ui-msg.unread { border-color: var(--ui-sea); }
.ui-msg > small { color: var(--ui-mute); font-size: var(--ui-t-xs); }
.ui-msg p { margin: var(--ui-s1) 0; } .ui-msg .mine { color: var(--ui-ink-2); }
.ui-msg .ui-offer { margin-top: var(--ui-s2); background: var(--ui-raised); }
.ui-section-actions { display: flex; justify-content: flex-end; }

/* Item cards (components.js card): listings, properties, jobs. */
.ui-card { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-r3); padding: var(--ui-s3) var(--ui-s4); margin: 0 0 var(--ui-s3); }
.ui-card.mine { border-color: var(--ui-sea); }
.ui-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--ui-s3); }
.ui-card-head { min-width: 0; }
.ui-card-head small { display: block; font: 700 10px/1.4 var(--ui-font); letter-spacing: .12em; text-transform: uppercase; color: var(--ui-mute); }
.ui-card-head b { display: block; font: 600 var(--ui-t-m)/1.3 var(--ui-font); }
.ui-card-head span { display: block; color: var(--ui-mute); font-size: var(--ui-t-xs); margin-top: 2px; }
.ui-card-fig { text-align: right; font: 700 var(--ui-t-l)/1.2 var(--ui-font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-card-fig small { display: block; font: 500 var(--ui-t-xs) var(--ui-font); color: var(--ui-mute); }
.ui-facts { display: flex; flex-wrap: wrap; gap: var(--ui-s2) var(--ui-s4); margin: var(--ui-s3) 0 0; }
.ui-facts div { min-width: 0; }
.ui-facts dt { font-size: 10.5px; color: var(--ui-mute); font-weight: 600; letter-spacing: .04em; }
.ui-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-actions { display: flex; flex-wrap: wrap; gap: var(--ui-s2); margin-top: var(--ui-s3); }
.ui-actions > * { flex: 1 1 auto; }
.ui-tabsbar { display: flex; margin: 0 0 var(--ui-s4); }
.ui-tabsbar .ui-seg { display: flex; width: 100%; }
.ui-tabsbar .ui-seg button { flex: 1; }
.ui-sub { border-top: 1px solid var(--ui-line); padding-top: var(--ui-s3); margin-top: var(--ui-s3); }
.ui-sub h4 { margin: 0 0 var(--ui-s2); font: 700 10.5px/1.4 var(--ui-font); letter-spacing: .1em; text-transform: uppercase; color: var(--ui-mute); }
.ui-sub p { margin: var(--ui-s2) 0; }
.ui-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-s2); margin: var(--ui-s2) 0; }
.ui-inline label { display: inline-flex; align-items: center; gap: var(--ui-s2); }
/* With the phone open, a review sheet rises inside the phone, not in the middle of the screen. */
body:has(#phone.open:not(.wide)) .ui-sheet-backdrop { justify-content: flex-end; padding-right: 30px; }
body:has(#phone.open:not(.wide)) .ui-sheet { width: 388px; margin-bottom: 32px; }
@media (max-width: 640px) { body:has(#phone.open) .ui-sheet-backdrop { justify-content: center; padding-right: 0; } body:has(#phone.open) .ui-sheet { width: 100vw; margin-bottom: 0; } }

/* ==== Shared components (the game, the start page, Online and the editor; React wrappers in
   online/site/src/components/ui/). Hand-drawn versions: ui/hud-hand.js. ==================================== */
.ui-btn.secondary { background: var(--ui-surface); }
.ui-btn.destructive { background: var(--ui-red); border-color: var(--ui-red); color: #fff; font-weight: 700 !important; }
.ui-btn.small { min-height: 30px; padding: 0 var(--ui-s3); font-size: var(--ui-t-xs); }
.ui-btn.large { min-height: 46px; padding: 0 var(--ui-s5); font-size: var(--ui-t-m); }
.ui-btn[aria-busy="true"]::after { content: ''; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ui-spin .8s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
.ui-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font: 600 var(--ui-t-xs)/1.6 var(--ui-font-body);
  background: var(--ui-raised); color: var(--ui-ink-2); border: 1px solid var(--ui-line); white-space: nowrap; }
.ui-badge.good { color: var(--ui-green); border-color: currentColor; } .ui-badge.warn { color: var(--ui-ochre); border-color: currentColor; }
.ui-badge.bad { color: var(--ui-red); border-color: currentColor; } .ui-badge.accent { background: var(--ui-sea); border-color: var(--ui-sea); color: var(--ui-sea-ink); }
.ui-field { display: grid; gap: 6px; margin: 0 0 var(--ui-s4); }
.ui-field > label, .ui-label { font: 600 var(--ui-t-s)/1.3 var(--ui-font-body); color: var(--ui-ink-2); }
.ui-field > small { color: var(--ui-mute); font-size: var(--ui-t-xs); }
.ui-field.invalid > small { color: var(--ui-red); }
.ui-input, .ui-select, .ui-textarea { box-sizing: border-box; width: 100%; min-height: 40px; padding: 8px 12px; border-radius: var(--ui-r2); border: 1px solid var(--ui-line-strong);
  background: var(--ui-surface); color: var(--ui-ink); font: 400 var(--ui-t-m)/1.4 var(--ui-font-body); margin: 0; }
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--ui-mute); }
.ui-input:focus-visible, .ui-select:focus-visible, .ui-textarea:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 1px; }
.ui-field.invalid .ui-input, .ui-input[aria-invalid="true"] { border-color: var(--ui-red); }
.ui-select { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.ui-textarea { min-height: 96px; resize: vertical; }
.ui-search { position: relative; display: block; }
.ui-search .ui-input { padding-left: 36px; }
.ui-search::before { content: ''; position: absolute; left: 13px; top: 50%; width: 11px; height: 11px; margin-top: -8px; border: 2px solid var(--ui-mute); border-radius: 50%; pointer-events: none; }
.ui-search::after { content: ''; position: absolute; left: 24px; top: 50%; width: 6px; height: 2px; margin-top: 3px; background: var(--ui-mute); transform: rotate(45deg); pointer-events: none; }
.ui-toggle { display: inline-flex; align-items: center; gap: var(--ui-s2); font: 500 var(--ui-t-s) var(--ui-font-body); color: var(--ui-ink); cursor: pointer; }
.ui-toggle input { appearance: none; -webkit-appearance: none; position: relative; width: 40px; height: 24px; margin: 0; border-radius: 12px; background: var(--ui-sunk); border: 1px solid var(--ui-line-strong); cursor: pointer; flex: none; }
.ui-toggle input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ui-ink-2); transition: transform var(--ui-motion, .15s); }
.ui-toggle input:checked { background: var(--ui-sea); border-color: var(--ui-sea); } .ui-toggle input:checked::after { transform: translateX(16px); background: var(--ui-sea-ink); }
.ui-toggle input:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--ui-line); overflow-x: auto; scrollbar-width: none; }
.ui-tabs [role="tab"] { flex: none; min-height: 40px; padding: 0 var(--ui-s3); border: 0; border-bottom: 3px solid transparent; background: none; color: var(--ui-mute);
  font: 600 var(--ui-t-s) var(--ui-font-body); cursor: pointer; margin: 0 0 -1px; border-radius: 0; }
.ui-tabs [role="tab"][aria-selected="true"] { color: var(--ui-ink); border-bottom-color: var(--ui-sea); }
.ui-tabs [role="tab"]:hover { color: var(--ui-ink); }
.ui-dialog-backdrop { position: fixed; inset: 0; z-index: 2100; background: var(--ui-scrim); display: grid; place-items: center; padding: var(--ui-s4); }
.ui-dialog { width: min(480px, 100%); max-height: calc(100dvh - 32px); overflow: auto; border-radius: var(--ui-r4); background: var(--ui-surface); color: var(--ui-ink);
  border: 1px solid var(--ui-line-strong); box-shadow: var(--ui-shadow); padding: var(--ui-s5); font: 400 var(--ui-t-m)/1.5 var(--ui-font-body); position: relative; }
.ui-dialog h2 { margin: 0 0 var(--ui-s2); font: 400 var(--ui-t-xl)/1.15 var(--ui-font-display); font-variation-settings: var(--ui-hand-title, normal); }
.ui-dialog .actions { display: flex; flex-wrap: wrap; gap: var(--ui-s2); justify-content: flex-end; margin-top: var(--ui-s5); }
.ui-toast { display: flex; align-items: flex-start; gap: var(--ui-s3); width: min(380px, calc(100vw - 32px)); padding: var(--ui-s3) var(--ui-s4); border-radius: var(--ui-r3);
  background: var(--ui-surface); color: var(--ui-ink); border: 1px solid var(--ui-line-strong); box-shadow: var(--ui-shadow); font: 500 var(--ui-t-s)/1.4 var(--ui-font-body); position: relative; }
.ui-toast::before { content: ''; flex: none; width: 4px; align-self: stretch; border-radius: 2px; background: var(--ui-sea); }
.ui-toast.good::before { background: var(--ui-green); } .ui-toast.bad::before { background: var(--ui-red); } .ui-toast.warn::before { background: var(--ui-ochre); }
.ui-toasts { position: fixed; z-index: 2200; right: var(--ui-s4); bottom: var(--ui-s4); display: grid; gap: var(--ui-s2); }
.ui-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font: 600 var(--ui-t-s) var(--ui-font-body); }
.ui-pages a, .ui-pages button { display: inline-grid; place-items: center; min-width: 36px; min-height: 36px; padding: 0 8px; border-radius: var(--ui-r2); border: 1px solid var(--ui-line);
  background: var(--ui-surface); color: var(--ui-ink); text-decoration: none; cursor: pointer; margin: 0; font: inherit; position: relative; }
.ui-pages [aria-current="page"] { background: var(--ui-sea); border-color: var(--ui-sea); color: var(--ui-sea-ink); }
.ui-pages [aria-disabled="true"], .ui-pages :disabled { opacity: .45; pointer-events: none; }
.ui-thumb { position: relative; display: block; overflow: hidden; border-radius: var(--ui-r3); background: var(--ui-sunk); border: 1px solid var(--ui-line); aspect-ratio: 4 / 3; color: var(--ui-ink); }
.ui-thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ui-thumb figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 10px; font: 600 var(--ui-t-xs)/1.3 var(--ui-font-body); background: color-mix(in srgb, var(--ui-surface) 88%, transparent); }
.ui-tip { position: relative; display: inline-flex; }
.ui-tip > [role="tooltip"] { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 30; white-space: nowrap; padding: 5px 9px; border-radius: var(--ui-r1);
  background: var(--ui-ink); color: var(--ui-bg); font: 500 var(--ui-t-xs)/1.3 var(--ui-font-body); pointer-events: none; opacity: 0; transition: opacity .12s; }
.ui-tip:hover > [role="tooltip"], .ui-tip:focus-within > [role="tooltip"] { opacity: 1; }
.ui-loading { display: inline-flex; align-items: center; gap: var(--ui-s2); color: var(--ui-mute); font: 500 var(--ui-t-s) var(--ui-font-body); }
.ui-loading::before { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ui-line-strong); border-top-color: var(--ui-sea); animation: ui-spin .8s linear infinite; }
.ui-skeleton { border-radius: var(--ui-r2); background: linear-gradient(90deg, var(--ui-sunk), var(--ui-raised), var(--ui-sunk)); background-size: 200% 100%; animation: ui-shimmer 1.4s ease-in-out infinite; min-height: 14px; }
@keyframes ui-shimmer { to { background-position: -200% 0; } }
.ui-progress { position: relative; height: 10px; border-radius: 999px; background: var(--ui-sunk); border: 1px solid var(--ui-line); overflow: hidden; }
.ui-progress > i { position: absolute; inset: 0 auto 0 0; background: var(--ui-sea); border-radius: 999px; transition: width .3s; }
.ui-title { margin: 0; font: 400 var(--ui-t-xxl)/1.05 var(--ui-font-display); letter-spacing: .01em; font-variation-settings: var(--ui-hand-title, normal); }
.ui-heading { margin: 0 0 var(--ui-s2); font: 400 var(--ui-t-xl)/1.15 var(--ui-font-display); font-variation-settings: var(--ui-hand-title, normal); }
.ui-kicker { font: 700 var(--ui-t-xs)/1.3 var(--ui-font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ui-mute); }
.ui-body { font: 400 var(--ui-t-m)/1.55 var(--ui-font-body); color: var(--ui-ink); font-variation-settings: var(--ui-hand-text, normal); }
.ui-panel { background: var(--ui-surface); color: var(--ui-ink); border: 1px solid var(--ui-line); border-radius: var(--ui-r3); padding: var(--ui-s4); position: relative; }
.ui-menu { min-width: 200px; padding: 6px; border-radius: var(--ui-r3); background: var(--ui-surface); border: 1px solid var(--ui-line-strong); box-shadow: var(--ui-shadow); position: relative; }
.ui-menu [role="menuitem"] { display: flex; align-items: center; gap: var(--ui-s2); width: 100%; min-height: 38px; padding: 0 10px; border: 0; border-radius: var(--ui-r2); background: none;
  color: var(--ui-ink); font: 500 var(--ui-t-s) var(--ui-font-body); text-align: left; cursor: pointer; margin: 0; }
.ui-menu [role="menuitem"]:hover, .ui-menu [role="menuitem"]:focus-visible { background: var(--ui-tint); outline: none; }
.ui-menu hr { border: 0; border-top: 1px solid var(--ui-line); margin: 6px 4px; }
/* The brand wordmark (a slot for the designed logo): the display face, the game's start page and Online's header. */
.ui-wordmark { display: inline-flex; flex-direction: column; align-items: center; text-align: center; font: 400 34px/1.02 var(--ui-font-display); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ui-ink); font-variation-settings: var(--ui-hand-title, normal); text-decoration: none; }
.ui-wordmark small { font: 400 var(--ui-t-s)/1.4 var(--ui-font-body); letter-spacing: .3em; color: var(--ui-mute); text-transform: lowercase; margin: 2px 0; }
.ui-wordmark.line { flex-direction: row; align-items: baseline; gap: .32em; font-size: 21px; white-space: nowrap; }
.ui-wordmark.line small { font-size: 12px; letter-spacing: .18em; margin: 0; }
/* Appearance choices in a popover (Online's header, the editor): one row per setting. */
.ui-appearance { display: grid; gap: 12px; padding: 14px; width: min(360px, calc(100vw - 24px)); }
.ui-appearance-row { display: grid; gap: 6px; }
.ui-appearance .ui-seg { display: flex; flex-wrap: wrap; }
.ui-appearance .ui-seg button { flex: 1 1 auto; min-height: 32px; font-family: var(--ui-font-body); }
/* A site header shared by Online's pages: brand, sections, tools; a drawer on narrow screens. */
.ui-siteheader { position: relative; z-index: 40; background: var(--ui-surface); border-bottom: 1px solid var(--ui-line); color: var(--ui-ink); font-family: var(--ui-font-body); }
/* The header spans the window: the brand starts at the left gutter and the tools end at the right one. */
.ui-siteheader { --ui-gutter: clamp(16px, 2.2vw, 32px); }
.ui-siteheader .bar { padding: 0 var(--ui-gutter); min-height: 64px; display: flex; align-items: center; gap: 18px; }
.ui-siteheader nav.sections { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.ui-siteheader nav.sections a { padding: 8px 10px; border-radius: var(--ui-r2); color: var(--ui-ink-2); text-decoration: none; font: 600 var(--ui-t-s) var(--ui-font-body); white-space: nowrap; }
.ui-siteheader nav.sections a:hover { color: var(--ui-ink); background: var(--ui-tint); }
.ui-siteheader nav.sections a[aria-current="page"] { color: var(--ui-ink); box-shadow: inset 0 -3px var(--ui-sea); border-radius: 0; }
.ui-siteheader .tools { display: flex; align-items: center; gap: 6px; margin-left: auto; margin-right: -8px; }   /* icon buttons' own padding sits in the gutter */
.ui-siteheader .tools .ui-btn.primary { min-height: 36px; padding: 0 14px; font: 600 var(--ui-t-s)/1 var(--ui-font-body); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.ui-siteheader .pop { position: absolute; right: var(--ui-gutter); top: calc(100% + 6px); z-index: 50; max-height: calc(100dvh - 90px); overflow: auto; }
.ui-siteheader .dot { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--ui-red); color: #fff; font: 700 11px/18px var(--ui-font-body); }
.ui-iconbtn svg { width: 20px; height: 20px; }
.ui-drawer-backdrop { position: fixed; inset: 0; z-index: 60; background: var(--ui-scrim); }
/* The menu: a panel from the right on wide screens, the whole screen on a phone. Its heading row stays in view. */
.ui-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(360px, 100vw); display: flex; flex-direction: column; background: var(--ui-surface); border-left: 1px solid var(--ui-line-strong); box-shadow: var(--ui-shadow); animation: ui-drawer-in .18s ease-out; }
.ui-drawer .head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 0 calc(var(--ui-gutter, 16px) - 8px) 0 20px; border-bottom: 1px solid var(--ui-line); flex: none; }
.ui-drawer .head h2 { margin: 0; font: 700 var(--ui-t-l)/1.2 var(--ui-font-body); }
.ui-drawer .body { flex: 1; overflow: auto; padding: 8px 12px 20px; overscroll-behavior: contain; }
.ui-drawer .ui-menu button { min-height: 44px; }
.ui-drawer .ui-menu button[aria-current="page"] { background: var(--ui-tint); font-weight: 700; box-shadow: inset 3px 0 var(--ui-sea); }
@keyframes ui-drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ui-drawer { animation: none; } }
@media (max-width: 560px) { .ui-drawer { width: 100vw; border-left: 0; } }
.ui-drawer .ui-menu { box-shadow: none; border: 0; padding: 0; }
.ui-drawer h3 { margin: 14px 8px 4px; font: 700 var(--ui-t-xs)/1.3 var(--ui-font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ui-mute); }
@media (max-width: 900px) { .ui-siteheader nav.sections { display: none; } .ui-siteheader .bar { gap: 10px; } .ui-siteheader .wide-only { display: none; } }
@media (max-width: 480px) { .ui-siteheader .ui-wordmark.line { font-size: 16px; gap: .25em; } .ui-siteheader .tools { gap: 2px; } }
@media (min-width: 901px) { .ui-siteheader .narrow-only { display: none; } }