/* Pixelify Sans draws 2 and 5 almost alike, so those two digits alone come from Silkscreen */
@font-face { font-family: 'Pixel Digits'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/silkscreen/v6/m8JXjfVPf62XiF7kO-i9YLNla0GA1dM.woff2) format('woff2'); unicode-range: U+0032, U+0035; }
@font-face { font-family: 'Pixel Digits'; font-style: normal; font-weight: 600 700; font-display: swap; src: url(https://fonts.gstatic.com/s/silkscreen/v6/m8JUjfVPf62XiF7kO-i9aAhAfmyi2PmeBvY.woff2) format('woff2'); unicode-range: U+0032, U+0035; }
/* Merryfolk: parchment-and-ink interface over a pixel village.
   Layout: full-bleed canvas; floating parchment cards pinned to the corners. */
:root {
  --parch: #f2e4c2;
  --parch-2: #e6d1a2;
  --parch-3: #d8bf88;
  --ink: #2a1c12;
  --ink-2: #5a3a22;
  --ink-3: #8a6a48;
  --moss: #3f6b2f;
  --moss-2: #5c8f3e;
  --brass: #c9a227;
  --berry: #a23b2a;
  --dusk: #1d2a17;
  --shadow: rgba(42, 28, 18, 0.35);
  --font-ui: "Pixel Digits", "Pixelify Sans", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-body: "Alegreya Sans", "Gill Sans", "Trebuchet MS", system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--dusk); color: var(--ink); }
body { font-family: var(--font-body); font-size: 15px; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
kbd {
  font-family: var(--font-ui); font-size: 11px; padding: 0 4px; border: 1px solid var(--ink-3); border-bottom-width: 2px;
  border-radius: 3px; background: var(--parch); color: var(--ink-2); line-height: 1.4;
}

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

/* Inside a hobbit-hole: a live cutaway in a card over the village */
#interior {
  position: absolute; left: 10px; right: 10px; top: 76px; z-index: 4; display: flex; flex-direction: column; gap: 6px;
  max-height: calc(100% - 190px); padding: 10px 12px 10px; background: var(--parch); color: var(--ink);
}
#interior[hidden] { display: none; }
#panel:not([hidden]) ~ #interior { right: 360px; }
.int-head { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.int-who { min-width: 0; }
.int-head h2 { font-family: var(--font-ui); font-size: 20px; margin: 0; color: var(--moss); line-height: 1.1; text-wrap: balance; }
.int-ctl { display: flex; gap: 4px; align-items: center; flex: none; }
.int-ctl button:not(.x) { font-family: var(--font-ui); min-width: 30px; padding: 2px 8px; background: var(--parch-2); border: 1px solid var(--parch-3); border-radius: 4px; cursor: pointer; }
.int-folk { display: flex; flex-wrap: wrap; gap: 4px; }
.int-folk:empty { display: none; }
.int-chip {
  font-family: var(--font-ui); font-size: 13px; padding: 1px 8px 1px 18px; border-radius: 999px; cursor: pointer; position: relative;
  background: var(--parch-2); border: 1px solid var(--parch-3); color: var(--ink-3);
}
.int-chip::before { content: ""; position: absolute; left: 7px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--parch-3); }
.int-chip.home { color: var(--ink); }
.int-chip.home::before { background: var(--moss-2); }
.int-chip.sel { border-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.int-wrap { overflow: auto; min-height: 0; flex: 0 1 auto; border-radius: 4px; background: #1a120c; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.int-stage { position: relative; width: max-content; margin: 0 auto; }
#int-cv { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
#int-bubbles { position: absolute; inset: 0; pointer-events: none; }
.int-bubble {
  position: absolute; transform: translate(-50%, -100%); max-width: 200px; width: max-content; padding: 3px 8px; font-size: 13px; line-height: 1.25;
  background: #fffaf0; color: #2a1c12; border: 2px solid #2a1c12; border-radius: 6px; text-align: center; white-space: normal;
}
.int-bubble[hidden] { display: none; }
.int-bubble.think { background: #f7f4ee; color: #1e2130; font-weight: 600; border: 2px solid #5a5e70; border-radius: 12px; font-style: italic; }
.int-cap { font-size: 14px; color: var(--ink-2); min-height: 1.3em; font-style: italic; }
.now.peek { cursor: pointer; }
.now.peek::after { content: "  Look inside ›"; font-style: normal; font-family: var(--font-ui); font-size: 12px; color: var(--moss); white-space: nowrap; }
/* no text selection, magnifier or callout when a finger rests on the village */
#view { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#view { position: absolute; left: 0; top: 0; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; cursor: grab; }
#overlay { position: absolute; left: 0; top: 0; pointer-events: none; }

.card {
  background: var(--parch);
  border: 2px solid var(--ink);
  border-radius: 6px;
  box-shadow: 0 0 0 2px var(--parch-3) inset, 4px 4px 0 var(--shadow);
}

/* ---------- top bar ---------- */
#topbar {
  position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); left: 10px; right: 10px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; pointer-events: none;
}
#topbar > * { pointer-events: auto; }
.brand-card { display: flex; align-items: center; gap: 14px; padding: 6px 12px 6px 14px; flex-wrap: wrap; }
.brand { font-family: var(--font-ui); font-weight: 700; font-size: 22px; letter-spacing: 0.5px; color: var(--moss); text-shadow: 1px 1px 0 var(--parch-3); }
.clock { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 15px; flex-wrap: wrap; }
.clock .time { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3.2em; }
.pill { background: var(--moss); color: var(--parch); padding: 1px 8px; border-radius: 10px; font-size: 13px; white-space: nowrap; }
.pill.party { background: var(--berry); animation: pulse 1.6s ease-in-out infinite; }
.weather { color: var(--ink-2); font-size: 13px; }
@keyframes pulse { 50% { filter: brightness(1.25); } }

.controls { display: flex; align-items: center; gap: 6px; padding: 5px 6px; flex-wrap: wrap; font-family: var(--font-ui); }
.controls button, .actions button, .intro-actions button {
  font-family: var(--font-ui); font-size: 14px; background: var(--parch-2); border: 2px solid var(--ink); border-radius: 4px;
  padding: 2px 9px; cursor: pointer; box-shadow: 0 2px 0 var(--ink); position: relative; top: 0;
}
.controls button:hover, .actions button:hover { background: #f8eccc; }
.controls button:active, .actions button:active { top: 2px; box-shadow: 0 0 0 var(--ink); }
.controls button.active { background: var(--moss); color: var(--parch); }
.speed { display: flex; gap: 3px; }
.pop { font-size: 14px; color: var(--ink-2); padding: 0 6px; }
button:focus-visible, .tool:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }

/* ---------- toast ---------- */
#toast {
  position: absolute; top: 74px; left: 50%; transform: translate(-50%, -12px); max-width: min(560px, calc(100vw - 32px));
  background: var(--ink); color: var(--parch); font-family: var(--font-body); font-size: 16px; padding: 8px 16px; border-radius: 6px;
  box-shadow: 4px 4px 0 var(--shadow); opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; text-align: center;
  border: 2px solid var(--brass);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast[data-kind="love"] { border-color: #e86a7a; }
#toast[data-kind="birth"] { border-color: #8ad0ff; }
#toast[data-kind="party"] { border-color: #ffcf70; }
#toast[data-kind="adventure"] { border-color: var(--moss-2); }
#toast[data-kind="build"] { border-color: #c8945a; }
#toast[data-kind="rift"] { border-color: #b45aff; box-shadow: 4px 4px 0 var(--shadow), 0 0 12px rgba(180, 90, 255, 0.6); }
#toast[data-kind="season"] { border-color: #e8862a; }

/* ---------- inspector ---------- */
#panel {
  position: absolute; right: 10px; top: 76px; width: 340px; max-height: calc(100% - 180px); overflow-y: auto; padding: 12px 14px 12px;
}
.panel-head { display: grid; grid-template-columns: 60px 1fr auto; gap: 10px; align-items: end; }
#portrait {
  width: 60px; height: 80px; image-rendering: pixelated; background: linear-gradient(#bfe0f0 0 55%, #7bb04c 55%);
  border: 2px solid var(--ink); border-radius: 4px;
}
.who { min-width: 0; }
.who h2 { font-family: var(--font-ui); font-size: 19px; margin: 0; line-height: 1.1; text-wrap: balance; }
.sub { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.mood { font-family: var(--font-ui); font-size: 13px; margin-top: 4px; }
.mood[data-level="good"] { color: var(--moss); }
.mood[data-level="mid"] { color: #8a6a10; }
.mood[data-level="low"] { color: var(--berry); }
.x { align-self: start; background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; color: var(--ink-2); }
.now {
  margin: 10px 0 4px; padding: 6px 10px; background: var(--parch-2); border-radius: 4px; font-style: italic; font-size: 15px;
  border-left: 0; box-shadow: inset 0 0 0 1px var(--parch-3);
}
#panel h3 {
  font-family: var(--font-ui); font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--ink-3);
  margin: 12px 0 5px;
}
.drive { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 8px; font-size: 14px; margin: 3px 0; }
.bar { height: 10px; background: var(--parch-2); border: 2px solid var(--ink); border-radius: 2px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--moss-2); transition: width .4s; }
.bar i[data-level="mid"] { background: #d8a83a; }
.bar i[data-level="high"] { background: var(--berry); }
.pocket { font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { font-size: 13px; padding: 1px 8px; border: 1px solid var(--ink-3); border-radius: 10px; background: var(--parch-2); }
.likes, .rel { font-size: 14px; line-height: 1.45; }
.wishes { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.wishes li { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; padding-left: 16px; position: relative; }
.wishes li::before { content: "✦"; position: absolute; left: 0; color: var(--brass); }
.wishes .hint { font-size: 12px; color: var(--ink-3); font-style: italic; }
.dream { display: grid; grid-template-columns: 1fr 90px; gap: 8px; align-items: center; font-size: 14px; margin-bottom: 6px; }
.likes b, .rel b { font-weight: 700; }
.rel a { color: var(--moss); text-decoration: underline; cursor: pointer; }
.actions { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.actions button { display: inline-flex; gap: 5px; align-items: center; padding: 2px 7px; }
.actions .good { background: #cfe6b0; }
.actions .bad { background: #f0c4b4; }
.actions button.active { background: var(--moss); color: var(--parch); }
.lesson { font-size: 13px; color: var(--moss); min-height: 1.2em; margin-top: 8px; opacity: 0; }
.lesson.show { animation: lesson 3.5s ease forwards; }
@keyframes lesson { 0% { opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* tabs */
.tabs { display: flex; gap: 2px; margin: 10px 0 0; border-bottom: 2px solid var(--ink); flex-wrap: wrap; }
.tabs button {
  font-family: var(--font-ui); font-size: 13px; background: var(--parch-2); border: 2px solid var(--ink); border-bottom: 0;
  border-radius: 5px 5px 0 0; padding: 3px 10px 2px; cursor: pointer; position: relative; top: 2px; color: var(--ink-2);
}
.tabs button:hover { background: #f8eccc; }
.tabs button.active { background: var(--parch); color: var(--ink); top: 2px; padding-bottom: 4px; }
.p-body { min-height: 120px; }
.chip.good { background: #d8ecc0; border-color: var(--moss-2); }
.chip.mid { background: #f4e2a8; border-color: #b8902a; }
.chip.bad { background: #f0c4b4; border-color: var(--berry); }
.drive.small { grid-template-columns: 96px 1fr; font-size: 12.5px; margin: 2px 0; }
.bar.thin { height: 7px; border-width: 1px; }
.bar i.c-ale { background: #c9a227; } .bar i.c-germs { background: #7aa83a; } .bar i.c-toxin { background: #8a4a9a; } .bar i.c-immune { background: #5a8ac8; }
.bar.good i { background: var(--moss-2) !important; }
.bar.low i { background: #b88a6a !important; }
.humors { margin-top: 4px; }
.meter { display: inline-block; height: 7px; background: var(--parch-2); border: 1px solid var(--ink-3); border-radius: 2px; overflow: hidden; vertical-align: middle; }
.meter i { display: block; height: 100%; background: var(--ink-3); }
.traits { display: grid; gap: 2px; }
.trait { display: grid; grid-template-columns: 112px 70px 1fr; gap: 8px; align-items: center; font-size: 13px; }
.trait .meter { width: 100%; }
.trait .tw { color: var(--ink-2); font-style: italic; font-size: 12.5px; padding-left: 4px; min-width: 0; }
.talents div, .skills .skill { display: grid; grid-template-columns: 96px 1fr auto; gap: 8px; align-items: center; font-size: 13.5px; margin: 2px 0; }
.talents div { grid-template-columns: 1fr auto; }
.stars { color: #b8902a; font-size: 12px; letter-spacing: 1px; white-space: nowrap; }
.genes div { font-size: 13.5px; line-height: 1.5; }
.genes b, .likes b { margin-right: 4px; }
.note { margin-top: 6px; padding: 5px 8px; background: #f8eccc; border-left: 3px solid var(--brass); font-size: 13px; border-radius: 2px; }
.hint { margin-top: 6px; font-size: 12.5px; color: var(--ink-3); line-height: 1.35; }
.habits .habit { display: grid; grid-template-columns: 1fr 110px; gap: 8px; align-items: center; font-size: 13.5px; margin: 2px 0; }
.habits .sep { font-family: var(--font-ui); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 1px; margin: 6px 0 2px; }
.likes { margin-top: 6px; }
.edu-fx { margin: 6px 0 4px; padding-left: 18px; font-size: 13.5px; line-height: 1.45; }
.edu-fx li { margin: 1px 0; }
.diary { list-style: none; padding: 0; margin: 0; font-size: 13.5px; }
.diary li { padding: 3px 0 3px 10px; border-left: 3px solid var(--parch-3); margin: 2px 0; line-height: 1.35; }
.diary li[data-v="good"] { border-color: var(--moss-2); }
.diary li[data-v="bad"] { border-color: var(--berry); }
.diary time { font-family: var(--font-ui); font-size: 11px; color: var(--ink-3); margin-right: 4px; }
.friends .friend { display: grid; grid-template-columns: 1fr 100px 14px; gap: 8px; align-items: center; font-size: 14px; margin: 2px 0; }
.heart { color: #c84a5a; }
.rel .gone, .gone { color: var(--ink-3); font-style: italic; }
.rel .meter { width: 60px; }
.row-btns { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.row-btns button, .modal-body button {
  font-family: var(--font-ui); font-size: 14px; background: var(--parch-2); border: 2px solid var(--ink); border-radius: 4px;
  padding: 2px 10px; cursor: pointer; box-shadow: 0 2px 0 var(--ink);
}
.row-btns button:disabled { opacity: 0.5; cursor: default; }
.job { font-size: 14px; display: block; }
.job canvas, .trade canvas, .store canvas { image-rendering: pixelated; vertical-align: middle; }
.job .sub { margin: 2px 0 6px; }
.jobsel { display: block; font-size: 13px; margin-top: 4px; }
.jobsel select { font: inherit; font-size: 13px; background: var(--parch-2); border: 2px solid var(--ink); border-radius: 4px; padding: 1px 4px; margin-left: 4px; }

/* modals */
.modal { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20, 28, 14, 0.45); padding: 16px; z-index: 8; }
.modal[hidden] { display: none; }
.modal-card { width: min(680px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; padding: 14px 18px 16px; }
.modal-card.small { width: min(480px, 100%); }
.modal-head { display: flex; justify-content: space-between; align-items: center; }
.modal-head h2 { font-family: var(--font-ui); font-size: 22px; margin: 0; color: var(--moss); }
.modal-body { overflow-y: auto; padding-top: 8px; }
.modal-card .tabs { margin-top: 6px; }
.lede-s { font-size: 14.5px; line-height: 1.45; margin: 4px 0 6px; color: var(--ink-2); }
.modal-body h3 { font-family: var(--font-ui); font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--ink-3); margin: 14px 0 6px; }
.stores { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.store { display: grid; grid-template-columns: 20px 1fr auto; grid-template-rows: auto auto; column-gap: 6px; align-items: center; background: var(--parch-2); border-radius: 4px; padding: 4px 8px; font-size: 14px; }
.store canvas { grid-row: span 2; }
.store b { font-family: var(--font-ui); font-size: 16px; text-align: right; }
.store small { grid-column: 2 / span 2; color: var(--ink-3); font-size: 11.5px; }
.store.low { box-shadow: inset 0 0 0 2px #d89a7a; }
.trades { display: grid; gap: 8px; }
.trade { display: grid; grid-template-columns: 22px 1fr; gap: 8px; font-size: 14px; background: var(--parch-2); border-radius: 4px; padding: 6px 8px; }
.trade small { color: var(--ink-3); }
.trade a, .modal-body a { color: var(--moss); text-decoration: underline; cursor: pointer; }
#census-chart { width: 100%; height: auto; border: 2px solid var(--ink); border-radius: 4px; }
.legend { display: flex; gap: 14px; font-size: 13px; margin-top: 4px; }
.legend .k::before { content: ""; display: inline-block; width: 14px; height: 4px; margin-right: 5px; vertical-align: middle; }
.legend .pop::before { background: #3f6b2f; } .legend .kids::before { background: #2f6f8f; } .legend .mood::before { background: #c9a227; }
.census-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.census-facts div { background: var(--parch-2); border-radius: 4px; padding: 6px 8px; font-size: 14px; }
.census-facts b { font-family: var(--font-ui); font-size: 20px; display: block; }
.arch { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.arch-row { display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: center; background: var(--parch-2); border-radius: 4px; padding: 4px 8px; }
.arch-row canvas { image-rendering: pixelated; width: 24px; height: 32px; }
.arch-row small { display: block; color: var(--ink-3); font-size: 12px; }
textarea { width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: 12px; background: #fffaf0; border: 2px solid var(--ink); border-radius: 4px; padding: 6px; resize: vertical; }
.err { color: var(--berry); font-size: 13px; }
.tree .trow { display: grid; grid-template-columns: 100px 1fr; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--parch-3); }
.tree .tlabel { font-family: var(--font-ui); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-3); }
.tree .tnodes { display: flex; flex-wrap: wrap; gap: 6px; }
.tnode { display: grid; justify-items: center; width: 84px; padding: 4px; background: var(--parch-2); border: 2px solid transparent; border-radius: 4px; cursor: pointer; font: inherit; }
.tnode canvas { image-rendering: pixelated; width: 36px; height: 48px; }
.tnode b { font-size: 13px; }
.tnode small { font-size: 11px; color: var(--ink-3); }
.tnode.me { border-color: var(--brass); background: #fff6dc; }
.tnode.spouse { border-color: #e86a7a; }
.tnode.gone { opacity: 0.75; }
.pill.season { background: #6a9a3a; }
.pill.season[data-season="summer"] { background: #c9a227; color: var(--ink); }
.pill.season[data-season="autumn"] { background: #b8602a; }
.pill.season[data-season="winter"] { background: #5a7a9a; }
.roster-row b em { font-style: normal; font-weight: 400; color: var(--ink-3); font-size: 12px; margin-left: 4px; }
.roster-away { font-size: 13px; color: var(--ink-2); padding: 2px 4px; }

/* ---------- chronicle ---------- */
#chronicle {
  position: absolute; left: 10px; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); width: 330px; max-height: 40vh; display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
}
.log-head {
  display: flex; justify-content: space-between; align-items: center; background: var(--parch-2); border: 0; border-bottom: 2px solid var(--ink);
  font-family: var(--font-ui); font-size: 14px; padding: 6px 12px; cursor: pointer; text-align: left;
}
#chronicle.collapsed .log-head { border-bottom: 0; }
#chronicle.collapsed #log { display: none; }
#chronicle.collapsed .caret { transform: rotate(-90deg); }
#log { list-style: none; margin: 0; padding: 4px 12px 8px; overflow-y: auto; }
#log li { padding: 6px 0; border-bottom: 1px dashed var(--parch-3); font-size: 14px; line-height: 1.35; }
#log li:last-child { border-bottom: 0; }
#log time { display: block; font-family: var(--font-ui); font-size: 11px; color: var(--ink-3); }
#log li[data-kind="love"] span::before { content: "♥ "; color: #c84a5a; }
#log li[data-kind="birth"] span::before { content: "✿ "; color: #3a7ab0; }
#log li[data-kind="party"] span::before { content: "♪ "; color: var(--berry); }
#log li[data-kind="adventure"] span::before { content: "➶ "; color: var(--moss); }
#log li[data-kind="work"] span::before { content: "⚒ "; color: var(--ink-2); }
#log li[data-kind="learn"] span::before { content: "✎ "; color: #2f6f8f; }
#log li[data-kind="sick"] span::before { content: "✚ "; color: #3a9a6a; }
#log li[data-kind="build"] span::before { content: "⌂ "; color: var(--ink-2); }
#log li[data-kind="rift"] span::before { content: "✦ "; color: #8a3ad8; }
#log li[data-kind="season"] span::before { content: "❀ "; color: #b8602a; }
#log li[data-kind="letter"] span::before { content: "✉ "; color: var(--ink-2); }
#log li[data-kind="quarrel"] span::before { content: "⚡ "; color: var(--berry); }

/* ---------- roster ---------- */
#roster {
  position: absolute; left: 10px; top: 76px; width: 300px; max-height: calc(100% - 200px); overflow-y: auto; padding: 10px 12px; z-index: 3;
}
.roster-head { display: flex; justify-content: space-between; align-items: center; }
.roster-head h3 { font-family: var(--font-ui); margin: 0; font-size: 16px; }
.roster-home h4 { font-family: var(--font-ui); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-3); margin: 10px 0 4px; }
.roster-row {
  display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: center; width: 100%; text-align: left; background: none;
  border: 0; border-radius: 4px; padding: 3px 4px; cursor: pointer;
}
.roster-row:hover { background: var(--parch-2); }
.roster-row canvas { image-rendering: pixelated; width: 24px; height: 32px; }
.roster-row span { display: flex; flex-direction: column; min-width: 0; }
.roster-row small { color: var(--ink-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- toolbar ---------- */
#bottom {
  position: absolute; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: calc(100vw - 20px);
}
.tool-hint {
  font-size: 14px; color: var(--parch); background: rgba(30, 20, 10, 0.72); padding: 3px 10px; border-radius: 4px; text-align: center;
  max-width: 560px;
}
#buildbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 250px); gap: 8px; padding: 6px; width: min(100%, 900px); }
#buildbar[hidden], #toolbar[hidden] { display: none; }
body.building #tool-hint { display: none; }
#buildbar .bb-tools { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
#buildbar .tool { min-width: 62px; grid-template-rows: 20px auto; font-size: 12px; }
#buildbar .tool canvas { width: 20px; height: 20px; image-rendering: pixelated; }
.bb-side { display: grid; gap: 6px; align-content: start; font-size: 14px; min-width: 0; }
.bb-hint { font-style: italic; line-height: 1.3; }
.bb-civic { display: flex; flex-wrap: wrap; gap: 4px; }
.bb-civic button { font-size: 12px; padding: 2px 6px; }
.bb-civic button.on { background: var(--moss); color: var(--parch); }
.bb-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bb-row .sub { flex: 1 1 100%; }
#btn-build.active { background: var(--moss); color: var(--parch); }
body.building #view { cursor: crosshair; }
@media (max-width: 700px) { #buildbar { grid-template-columns: 1fr; } }
#toolbar { display: flex; gap: 4px; padding: 5px; overflow-x: auto; max-width: 100%; }
.tool {
  display: grid; grid-template-rows: 32px auto; justify-items: center; gap: 1px; min-width: 70px; padding: 4px 6px 3px; background: var(--parch-2);
  border: 2px solid transparent; border-radius: 4px; cursor: pointer; position: relative; font-family: var(--font-ui); font-size: 13px;
}
.tool:hover { background: #f8eccc; }
.tool.active { border-color: var(--ink); background: #fff6dc; box-shadow: 0 2px 0 var(--ink); }
.tool-icon { width: 32px; height: 32px; image-rendering: pixelated; }
.tool kbd { position: absolute; top: 2px; right: 3px; font-size: 9px; padding: 0 3px; }

/* ---------- intro ---------- */
#intro {
  position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20, 28, 14, 0.55); padding: 16px; z-index: 10;
  overflow-y: auto;
}
#intro[hidden] { display: none; }
.intro-card { width: min(620px, 100%); padding: 18px 26px 22px; }
.intro-art { height: 0; }
#intro h1 {
  font-family: var(--font-ui); font-weight: 700; font-size: 44px; color: var(--moss); margin: 0 0 6px; letter-spacing: 1px;
  text-shadow: 2px 2px 0 var(--parch-3), 4px 4px 0 rgba(42, 28, 18, 0.2);
}
#intro-canvas { display: block; width: 100%; max-width: 100%; height: auto; image-rendering: pixelated; border: 2px solid var(--ink); border-radius: 4px; margin-bottom: 14px; }
.lede { font-size: 17px; line-height: 1.5; margin: 0 0 14px; max-width: 62ch; }
.how { display: grid; gap: 8px; margin-bottom: 18px; }
.how div { display: grid; grid-template-columns: 130px 1fr; gap: 10px; font-size: 15px; line-height: 1.4; }
.how b { font-family: var(--font-ui); font-weight: 600; color: var(--ink-2); }
.intro-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.intro-actions .primary { background: var(--moss); color: var(--parch); font-size: 17px; padding: 6px 18px; }
.intro-actions .ghost { background: transparent; box-shadow: none; border-color: var(--ink-3); }
.intro-actions .bad { background: #f0c4b4; }
/* ---------- shaping the valley ---------- */
#worldgen {
  position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20, 28, 14, 0.7); padding: 16px; z-index: 11;
  overflow-y: auto;
}
#worldgen[hidden] { display: none; }
.wg-card { width: min(720px, 100%); }
.wg-card h2 { font-family: var(--font-ui); font-weight: 700; font-size: 28px; color: var(--moss); margin: 0 0 6px; text-wrap: balance; }
.wg-lede { font-size: 16px; line-height: 1.45; margin: 0 0 14px; max-width: 62ch; }
#wg-opts { display: grid; gap: 8px; margin-bottom: 18px; }
.wg-row { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: center; margin-bottom: 8px; }
.wg-label { font-family: var(--font-ui); font-weight: 600; color: var(--ink-2); font-size: 15px; }
.wg-seg { display: flex; flex-wrap: wrap; gap: 0; }
.wg-seg button {
  font-family: var(--font-ui); font-size: 14px; padding: 4px 12px; background: var(--parch-2); color: var(--ink);
  border: 2px solid var(--ink); margin-left: -2px; cursor: pointer; min-width: 78px;
}
.wg-seg button:first-child { margin-left: 0; border-radius: 4px 0 0 4px; }
.wg-seg button:last-child { border-radius: 0 4px 4px 0; }
.wg-seg button.on { background: var(--moss); color: var(--parch); }
.wg-seedbox { display: flex; gap: 8px; align-items: center; }
#wg-seed { width: 110px; font-family: var(--font-ui); font-size: 15px; padding: 4px 8px; border: 2px solid var(--ink); border-radius: 4px; background: var(--parch); color: var(--ink); font-variant-numeric: tabular-nums; }
#wg-dice { font-family: var(--font-ui); font-size: 14px; padding: 4px 10px; border: 2px solid var(--ink); border-radius: 4px; background: var(--parch-2); color: var(--ink); cursor: pointer; }
.wg-mapwrap { border: 2px solid var(--ink); border-radius: 4px; overflow: hidden; background: #3a5a2a; line-height: 0; }
#wg-map { display: block; width: 100%; max-width: 100%; height: auto; image-rendering: pixelated; }
.wg-stage { font-family: var(--font-ui); font-size: 17px; color: var(--ink); margin: 10px 0 6px; min-height: 1.4em; }
.wg-progress { height: 8px; border: 2px solid var(--ink); border-radius: 4px; background: var(--parch-2); overflow: hidden; margin-bottom: 8px; }
#wg-bar { height: 100%; width: 0; background: var(--moss-2); transition: width 0.3s; }
.wg-log { margin: 0 0 14px; padding-left: 22px; font-size: 14px; line-height: 1.45; color: var(--ink-3); columns: 2; column-gap: 24px; }
.wg-log li.wg-now { color: var(--ink); font-weight: 600; }
@media (max-width: 560px) {
  .wg-row { grid-template-columns: 1fr; gap: 4px; }
  .wg-seg button { min-width: 0; flex: 1; padding: 4px 6px; }
  .wg-log { columns: 1; }
}
#intro-confirm { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14px; }
#intro-confirm[hidden] { display: none; }

@media (max-width: 760px) {
  .brand { font-size: 18px; }
  .controls { font-size: 12px; }
  .controls button { padding: 2px 6px; font-size: 13px; }
  #panel { left: 10px; right: 10px; width: auto; top: auto; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); max-height: 52vh; }
  .trait { grid-template-columns: 100px 60px 1fr; }
  .census-facts { grid-template-columns: repeat(2, 1fr); }
  .tree .trow { grid-template-columns: 1fr; }
  #chronicle { width: auto; right: 10px; max-height: 30vh; }
  #panel:not([hidden]) ~ #chronicle { display: none; }
  .how div { grid-template-columns: 1fr; gap: 0; }
  .tool { min-width: 58px; font-size: 11px; }
  #toast { top: 120px; }
  #interior, #panel:not([hidden]) ~ #interior { left: 6px; right: 6px; top: calc(6px + env(safe-area-inset-top, 0px)); z-index: 6; max-height: calc(100% - 120px); padding: 8px; }
  #panel:not([hidden]) ~ #interior { max-height: calc(100% - 52vh - 110px); }
  #panel:not([hidden]) ~ #interior .int-cap { display: none; }
  .int-head h2 { font-size: 17px; }
  .int-cap { font-size: 13px; }
  .tool-hint { display: none; }
  #intro h1 { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .pill.party { animation: none; }
  #toast, .bar i { transition: none; }
}
.build-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, 160px); gap: 10px; align-items: center; margin: 3px 0; }
.build-row .bar { display: block; }

/* ---------- rift mode: the interface goes cyberpunk while a rift-born is selected ---------- */
body.rift-mode, .rift-skin {
  --parch: #0f111b;
  --parch-2: #181b2b;
  --parch-3: #2a2f4e;
  --ink: #bff6ff;
  --ink-2: #7fd6e6;
  --ink-3: #c27aff;
  --moss: #7aff5a;
  --moss-2: #3af0ff;
  --brass: #ff3aa8;
  --berry: #ff4a6a;
  --dusk: #07080e;
  --shadow: rgba(180, 90, 255, 0.35);
  --font-ui: "Share Tech Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-body: "Rajdhani", "Share Tech Mono", system-ui, sans-serif;
  --hover: #23284a;
  --hi: #2a1f44;
  color-scheme: dark;
}
.card, .tabs button, .controls button, .tool, .bar, .now, .chip, #portrait { transition: background-color .35s, border-color .35s, color .35s; }
body.rift-mode .card {
  border-color: var(--moss-2);
  background-image: repeating-linear-gradient(0deg, rgba(58, 240, 255, 0.045) 0 1px, transparent 1px 3px);
  box-shadow: 0 0 0 1px var(--parch-3) inset, 0 0 14px rgba(58, 240, 255, 0.28), 4px 4px 0 var(--shadow);
}
body.rift-mode .brand { color: var(--moss-2); text-shadow: 2px 0 0 rgba(255, 58, 168, 0.75), -2px 0 0 rgba(58, 240, 255, 0.5); letter-spacing: 2px; text-transform: uppercase; }
body.rift-mode .who h2 { color: #ffffff; text-transform: uppercase; letter-spacing: 1.5px; animation: rift-glitch 4.5s steps(1) infinite; }
body.rift-mode #panel h3, body.rift-mode .modal-body h3 { color: var(--brass); }
body.rift-mode #panel h3::before { content: "// "; color: var(--moss-2); }
body.rift-mode .body, body.rift-mode #panel, body.rift-mode #log li { font-size: 15.5px; }
body.rift-mode #portrait { background: linear-gradient(#1a0f2e 0 55%, #0a2a2e 55%); border-color: var(--brass); box-shadow: 0 0 10px rgba(255, 58, 168, 0.5); }
body.rift-mode .now { font-style: normal; border-left: 3px solid var(--brass); }
body.rift-mode .now::before { content: "> "; color: var(--moss); font-family: var(--font-ui); }
body.rift-mode .controls button:hover, body.rift-mode .actions button:hover, body.rift-mode .tabs button:hover, body.rift-mode .tool:hover { background: var(--hover); }
body.rift-mode .tool.active, body.rift-mode .tnode.me { background: var(--hi); }
body.rift-mode .controls button.active, body.rift-mode .actions button.active { background: var(--moss-2); color: #07080e; }
body.rift-mode .pill { color: #07080e; }
body.rift-mode .mood[data-level="mid"] { color: #ffd23a; }
body.rift-mode .bar { border-width: 1px; box-shadow: 0 0 6px rgba(58, 240, 255, 0.25); }
body.rift-mode .actions .good { background: #12341f; } body.rift-mode .actions .bad { background: #3a1222; }
body.rift-mode .chip.good { background: #12341f; } body.rift-mode .chip.mid { background: #3a3010; border-color: #ffd23a; } body.rift-mode .chip.bad { background: #3a1222; }
body.rift-mode .note { background: var(--hi); }
body.rift-mode .stars { color: #ffd23a; }
body.rift-mode textarea { background: #07080e; color: var(--ink); }
body.rift-mode #log li { border-bottom-color: var(--parch-3); }
body.rift-mode #log time::before { content: "[ "; } body.rift-mode #log time::after { content: " ]"; }
body.rift-mode #toast { background: #07080e; color: var(--ink); }
body.rift-mode .rel a { color: var(--moss-2); }
body.rift-mode .tool-hint { color: var(--ink); background: rgba(7, 8, 14, 0.82); }
body.glitching .card { animation: rift-shake .42s steps(2) 1; will-change: transform; }
@keyframes rift-glitch {
  0%, 92% { text-shadow: 2px 0 0 rgba(255, 58, 168, 0.7), -2px 0 0 rgba(58, 240, 255, 0.6); transform: none; }
  93% { text-shadow: -4px 0 0 rgba(255, 58, 168, 0.9), 4px 0 0 rgba(58, 240, 255, 0.9); transform: translateX(2px); }
  95% { text-shadow: 3px 1px 0 rgba(122, 255, 90, 0.8), -3px -1px 0 rgba(255, 58, 168, 0.8); transform: translateX(-2px) skewX(-8deg); }
  97% { text-shadow: 2px 0 0 rgba(255, 58, 168, 0.7), -2px 0 0 rgba(58, 240, 255, 0.6); transform: none; }
}
/* transform only, so the shake is composited rather than repainted */
@keyframes rift-shake {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-3px, 1px) skewX(-2deg); }
  50% { transform: translate(3px, -1px); }
  75% { transform: translate(-1px, 0) skewX(1deg); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  body.rift-mode .who h2, body.glitching .card { animation: none; }
}

/* ---------- developer mode: a dark console drawer ---------- */
#dev {
  --dv-bg: rgba(10, 14, 20, 0.94); --dv-line: #2a3644; --dv-fg: #d8e6f0; --dv-dim: #7f93a6; --dv-hi: #ffe14a; --dv-up: #8ae6a0; --dv-down: #ff9a8a; --dv-acc: #6ad0ff;
  position: absolute; left: 10px; top: 76px; bottom: 10px; width: min(460px, calc(100vw - 20px)); z-index: 30;
  display: flex; flex-direction: column; background: var(--dv-bg); color: var(--dv-fg); border: 1px solid var(--dv-line); border-radius: 6px;
  font: 12px/1.45 "Share Tech Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}
#dev[hidden] { display: none; }
body.dev-on #chronicle { visibility: hidden; }
.dev-head { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-bottom: 1px solid var(--dv-line); }
.dev-head b { color: var(--dv-hi); letter-spacing: 2px; }
.dev-tabs { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; }
.dev-tabs button, .dchips button {
  font: inherit; color: var(--dv-fg); background: #16202c; border: 1px solid var(--dv-line); border-radius: 3px; padding: 2px 8px; cursor: pointer;
}
.dev-tabs button.active, .dchips button.on { background: var(--dv-acc); color: #06121c; border-color: var(--dv-acc); }
.dchips input[type=number], .dchips select { width: 4.5em; font: inherit; font-size: 12px; padding: 1px 4px; background: #0b1620; color: inherit; border: 1px solid #2a3a48; border-radius: 3px; }
.dchips select { width: auto; }
.dev-tabs button:hover, .dchips button:hover { border-color: var(--dv-acc); }
.dev-tabs button:focus-visible, .dchips button:focus-visible, .dev-x:focus-visible { outline: 2px solid var(--dv-hi); outline-offset: 1px; }
.dev-x { font-size: 18px; line-height: 1; background: none; border: 0; color: var(--dv-dim); cursor: pointer; padding: 0 4px; }
.dev-overlays { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 4px 8px; border-bottom: 1px solid var(--dv-line); color: var(--dv-dim); }
.dev-overlays label { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }
.dev-overlays #dev-fps { margin-left: auto; font-variant-numeric: tabular-nums; }
.dev-body { overflow-y: auto; padding: 6px 10px 12px; flex: 1; min-height: 0; }
.dev-body h4 { margin: 4px 0 6px; font-size: 14px; color: var(--dv-hi); font-weight: 400; }
.dev-body h5 { margin: 10px 0 4px; font-size: 11px; color: var(--dv-acc); text-transform: uppercase; letter-spacing: 1px; font-weight: 400; }
.dev-body small { color: var(--dv-dim); font-size: 11px; text-transform: none; letter-spacing: 0; }
.dev-body a { color: var(--dv-acc); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.dkv { margin: 1px 0; overflow-wrap: anywhere; }
.dhint { color: var(--dv-dim); }
.dt { color: var(--dv-dim); font-variant-numeric: tabular-nums; margin-right: 4px; }
.up { color: var(--dv-up); } .down { color: var(--dv-down); }
.dnum { text-align: right; font-variant-numeric: tabular-nums; }
.dgrid2 { display: grid; grid-template-columns: 70px 1fr 40px; gap: 2px 8px; align-items: center; }
.dbar { display: inline-block; width: 100%; min-width: 50px; height: 6px; background: #1c2836; border-radius: 2px; overflow: hidden; vertical-align: middle; }
.dbar i { display: block; height: 100%; background: #5aa0c8; }
.dbar i.warm { background: #e8b84a; } .dbar i.hot { background: #ff6a5a; }
.dtab { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.dtab th { text-align: left; color: var(--dv-dim); font-weight: 400; border-bottom: 1px solid var(--dv-line); padding: 2px 4px; }
.dtab td { padding: 2px 4px; border-bottom: 1px solid rgba(42, 54, 68, 0.5); vertical-align: top; }
.dtab tr.cur td { background: rgba(255, 225, 74, 0.12); }
.dtab td:last-child { overflow-wrap: anywhere; }
.dev-body details { margin: 6px 0; } .dev-body summary { cursor: pointer; color: var(--dv-acc); }
.dpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 2px 10px; }
.dchips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; align-items: center; }
.dev-ev { padding: 2px 0; border-bottom: 1px solid rgba(42, 54, 68, 0.5); overflow-wrap: anywhere; }
.dev-ev .dc { display: inline-block; min-width: 56px; color: var(--dv-acc); margin-right: 6px; }
.dev-ev.c-rift .dc { color: #c88aff; } .dev-ev.c-family .dc { color: #ff9ac0; } .dev-ev.c-jobs .dc { color: #e8c86a; }
.dev-ev.c-town .dc, .dev-ev.c-homes .dc { color: #c8a07a; } .dev-ev.c-weather .dc { color: #9ad0ff; } .dev-ev.c-decide .dc, .dev-ev.c-talk .dc { color: var(--dv-up); }
#btn-dev.active { background: #16202c; color: #ffe14a; }
@media (max-width: 720px) {
  #dev { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 58vh; border-radius: 10px 10px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); background: #0a0e14; }
  /* the Brain tab shows the selected villager, so the panel and toolbar step aside */
  body.dev-on #panel, body.dev-on #bottom { display: none; }
}

/* the build stamp, so you can tell when a new version has arrived */
#build {
  position: absolute; right: 8px; bottom: calc(4px + env(safe-area-inset-bottom, 0px)); z-index: 3; pointer-events: none;
  font: 11px/1 "Share Tech Mono", ui-monospace, Menlo, monospace; color: rgba(255, 250, 235, 0.85);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 0 3px rgba(0, 0, 0, 0.5); white-space: nowrap;
}

/* ---------- the steward's desk ---------- */
.pill.content { cursor: pointer; border: 0; font: inherit; font-family: var(--font-ui); }
.pill.content[data-level="good"] { background: #d8ecc0; color: #2a4a1a; }
.pill.content[data-level="mid"] { background: #f2e2a8; color: #5a4a12; }
.pill.content[data-level="low"] { background: #f0c4b4; color: #6a2418; }
.st-meter { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin: 6px 0 10px; }
.st-meter .bar { display: block; width: 100%; margin: 4px 0; }
.st-num { font-family: var(--font-ui); font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; }
.st-num[data-level="good"] { color: var(--moss); } .st-num[data-level="mid"] { color: #8a6a12; } .st-num[data-level="low"] { color: var(--berry); }
.st-num small { font-size: 16px; }
.st-why { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 14px; margin-bottom: 8px; }
.st-why h4 { margin: 0 0 4px; font-family: var(--font-ui); font-size: 13px; color: var(--ink-2); }
.st-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 12px; margin-bottom: 6px; }
.st-job { display: grid; grid-template-columns: 20px 1fr auto 26px 26px auto; gap: 6px; align-items: center; font-size: 14px; }
.st-job .st-n { font-variant-numeric: tabular-nums; font-family: var(--font-ui); }
.st-job .st-n small { color: var(--ink-3); }
.st-job button { padding: 0 4px; min-width: 24px; }
.st-job .st-auto { font-size: 11px; }
@media (max-width: 560px) { .st-why { grid-template-columns: 1fr; } }

/* ---------- the charter ---------- */
.pill.coin { cursor: pointer; border: 0; font: inherit; font-family: var(--font-ui); background: #f2d98a; color: #5a3a12; }
.ch-list { display: grid; gap: 8px; margin-bottom: 8px; }
.ch { display: grid; gap: 3px; padding: 6px 8px; border: 1px solid var(--parch-3); border-radius: 4px; background: var(--parch); }
.ch-t { font-weight: 700; font-size: 15px; }
.ch .bar { display: block; width: 100%; }
.ch-r { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.ch-r button { font-size: 12px; padding: 1px 8px; }
.ch-era { display: grid; gap: 2px; font-size: 15px; margin-bottom: 4px; }
.ch-era .met { color: var(--moss); font-weight: 600; }
#buildbar .tool.locked { opacity: 0.45; filter: grayscale(1); }

/* ---------- the market ---------- */
.mk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mk-grid h4 { margin: 4px 0; font-family: var(--font-ui); color: var(--ink-2); }
.mk-row { display: grid; grid-template-columns: 20px 1fr 34px 42px auto auto; gap: 6px; align-items: center; font-size: 14px; padding: 2px 0; }
.mk-row.want span:nth-child(2) { font-weight: 700; color: var(--moss); }
.mk-row .mk-p { font-variant-numeric: tabular-nums; font-family: var(--font-ui); text-align: right; }
.mk-row button { font-size: 12px; padding: 1px 6px; }
@media (max-width: 640px) { .mk-grid { grid-template-columns: 1fr; } }

.bb-reqs { display: flex; flex-wrap: wrap; gap: 4px; }
.bb-reqs button { font-size: 12px; padding: 1px 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-reqs #bb-appeal.on { background: var(--moss); color: var(--parch); }

/* ---------- the moot ---------- */
#moot { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20, 28, 14, 0.6); padding: 16px; z-index: 12; overflow-y: auto; }
#moot[hidden] { display: none; }
.moot-card { width: min(620px, 100%); }
.moot-card h2 { font-family: var(--font-ui); color: var(--moss); margin: 0 0 8px; font-size: 26px; text-wrap: balance; }
.moot-text { font-size: 16px; line-height: 1.5; margin: 0 0 12px; }
.moot-opts { display: grid; gap: 8px; }
.moot-opt { display: grid; gap: 2px; text-align: left; padding: 8px 12px; background: var(--parch-2); border: 2px solid var(--ink); border-radius: 4px; cursor: pointer; font: inherit; color: var(--ink); }
.moot-opt b { font-family: var(--font-ui); font-size: 17px; color: var(--moss); }
.moot-opt span { font-size: 14px; line-height: 1.35; }
.moot-opt:hover { background: #fff6dc; }

.sent { display: flex; flex-wrap: wrap; gap: 3px; margin: 0 0 4px 4px; }
.sent .chip { font-size: 11px; padding: 0 6px; }

.alm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; margin: 4px 0 8px; }
.alm-grid > div { display: grid; }
.alm-grid b { font-family: var(--font-ui); font-size: 16px; font-variant-numeric: tabular-nums; }
.alm-list { margin: 2px 0 8px; padding-left: 20px; font-size: 14px; line-height: 1.4; }
#moot h3 { font-family: var(--font-ui); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-2); margin: 10px 0 4px; }

.st-idle { grid-column: 1 / -1; font-size: 11px; color: var(--berry); margin-top: -2px; }

.pill.hazard { cursor: pointer; border: 0; font: inherit; font-family: var(--font-ui); background: #f0c4b4; color: #6a2418; animation: hz-pulse 1.6s ease-in-out infinite; }
@keyframes hz-pulse { 50% { background: #f8dccf; } }

/* ---------- HUD tidy (UX review) ---------- */
:root { --hud-top: 76px; --hud-bottom: 100px; }
#toast { display: none; }
#toasts { position: absolute; top: var(--hud-top); left: 50%; transform: translateX(-50%); display: grid; gap: 6px; justify-items: center; z-index: 7; pointer-events: none; width: min(560px, calc(100vw - 32px)); }
#toasts .toast {
  background: var(--ink); color: var(--parch); font-family: var(--font-body); font-size: 15px; padding: 7px 14px; border-radius: 6px; text-align: center;
  box-shadow: 4px 4px 0 var(--shadow); border: 2px solid var(--brass); opacity: 0; transform: translateY(-8px); transition: opacity .3s, transform .3s;
}
#toasts .toast.show { opacity: 1; transform: none; }
#toasts .toast[data-kind="love"] { border-color: #e86a7a; } #toasts .toast[data-kind="birth"] { border-color: #8ad0ff; } #toasts .toast[data-kind="party"] { border-color: #ffcf70; }
#toasts .toast[data-kind="rift"] { border-color: #b45aff; } #toasts .toast[data-kind="sick"] { border-color: #3a9a6a; } #toasts .toast[data-kind="season"] { border-color: #e8862a; }
#panel, #roster { top: var(--hud-top); }
#panel { max-height: calc(100% - var(--hud-top) - var(--hud-bottom)); }
#roster { max-height: calc(100% - var(--hud-top) - var(--hud-bottom)); }
#chronicle { bottom: var(--hud-bottom); }
#interior { top: var(--hud-top) !important; }
/* the gear menu */
.gear-wrap { position: relative; }
.gear-menu { position: absolute; right: 0; top: calc(100% + 6px); display: grid; gap: 4px; padding: 6px; z-index: 12; min-width: 150px; }
.gear-menu[hidden] { display: none; }
.gear-menu button { width: 100%; text-align: left; }
/* chips that look like buttons */
.pill.coin, .pill.era, .pill.content, .pill.hazard { border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); padding: 1px 9px; position: relative; top: 0; cursor: pointer; }
.pill.coin:active, .pill.era:active, .pill.content:active { top: 2px; box-shadow: none; }
.pill.era { background: #d8e4f0; color: #2a3a5a; font-family: var(--font-ui); font-size: 13px; }
.pill.coin::after, .pill.era::after, .pill.content::after { content: " ▾"; font-size: 10px; opacity: 0.6; }
/* the charter tracker */
#objectives { position: absolute; left: 10px; top: var(--hud-top); width: 250px; padding: 6px 8px 8px; display: grid; gap: 5px; z-index: 2; }
#objectives[hidden] { display: none; }
.obj-head { display: flex; justify-content: space-between; align-items: baseline; background: none; border: 0; padding: 0; font-family: var(--font-ui); font-size: 14px; cursor: pointer; color: var(--ink); text-align: left; }
.obj { position: relative; font-size: 12.5px; line-height: 1.25; padding-bottom: 4px; }
.obj i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--moss-2); border-radius: 2px; }
.obj::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--parch-3); z-index: -1; border-radius: 2px; }
.obj-x { position: absolute; right: 6px; top: 4px; background: none; border: 0; cursor: pointer; font-size: 16px; color: var(--ink-3); }
#roster:not([hidden]) ~ #objectives, #panel:not([hidden]) ~ #objectives { display: none; }
/* the steward's errands */
#errand { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--hud-bottom) + 2px); display: grid; gap: 2px; padding: 8px 12px; max-width: min(460px, calc(100vw - 32px)); z-index: 7; border-color: var(--brass); }
#errand[hidden] { display: none; }
#errand b { font-family: var(--font-ui); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-3); }
#errand span { font-size: 15px; }
#errand .err-skip { justify-self: end; background: none; border: 0; font-size: 12px; color: var(--ink-3); cursor: pointer; text-decoration: underline; }
.tut-glow { outline: 3px solid var(--brass) !important; outline-offset: 2px; animation: tutglow 1.2s ease-in-out infinite; }
@keyframes tutglow { 50% { outline-color: rgba(201,162,39,0.25); } }
/* the ledger: fixed height, sub-tabs */
#village .modal-card { height: min(80vh, 720px); }
.subtabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
.subtabs button { font-family: var(--font-ui); font-size: 12.5px; padding: 2px 10px; border: 1px solid var(--ink-3); border-radius: 12px; background: var(--parch); cursor: pointer; color: var(--ink); }
.subtabs button.on { background: var(--ink); color: var(--parch); border-color: var(--ink); }
/* locked tools explain themselves */
#buildbar .tool small.lock { font-size: 9px; color: var(--ink-3); line-height: 1; }
/* the tool hint fades in and out */
.tool-hint { opacity: 0; transition: opacity .4s; pointer-events: none; }
.tool-hint.show { opacity: 1; }
/* phones */
@media (pointer: coarse) {
  .controls button, .pill.coin, .pill.era, .pill.content, .pill.hazard, .tabs button, .actions button, .x, .st-job button, .ch-r button, .bb-reqs button, .subtabs button, .mk-row button, .gear-menu button { min-height: 40px; min-width: 40px; }
  .st-job { grid-template-columns: 20px 1fr auto 40px 40px auto; }
}
@media (max-width: 760px) {
  .brand-card .brand { display: none; }
  #hud-meal, #hud-weather { display: none; }
  #objectives { width: auto; right: 10px; }
  body.has-sel #toolbar, body.has-sel #tool-hint { display: none; }
  #panel { display: flex; flex-direction: column; overflow: hidden; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); max-height: 62vh; }
  #panel .p-body { flex: 1; overflow-y: auto; min-height: 0; }
  #panel .actions { position: sticky; bottom: 0; background: var(--parch); padding-top: 6px; }
  #buildbar { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; grid-template-columns: 1fr; border-radius: 0; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  #buildbar .bb-tools { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 2px; }
  #buildbar .tool { scroll-snap-align: start; flex: 0 0 auto; }
  #buildbar .bb-reqs { max-height: 64px; overflow-y: auto; }
  body.building #chronicle, body.building #objectives { display: none; }
  #village .modal-card { height: calc(100vh - 24px); }
}

body.has-sel #objectives, body.building #objectives { display: none; }
body.building #panel { display: none !important; }
@media (pointer: coarse) {
  #btn-zoomin, #btn-zoomout { display: none; }
}
@media (max-width: 760px) {
  [data-speed="4"], [data-speed="5"], .controls .pop { display: none; }
  .controls { gap: 4px; padding: 4px; }
  .controls button { padding: 2px 6px; }
  .brand-card { gap: 6px; padding: 4px 8px; }
  .clock { gap: 5px; font-size: 13px; }
  .clock .time { font-size: 16px; }
  body.building #bottom { left: 0; right: 0; transform: none; max-width: 100%; bottom: 0; }
  body.building #buildbar { position: static; }
}
@media (max-width: 760px) and (pointer: coarse) {
  .controls button, .pill.coin, .pill.era, .pill.content, .pill.hazard { min-height: 36px; min-width: 36px; }
}

#panel[hidden] { display: none !important; }
@media (max-width: 760px) { #errand { bottom: auto; top: var(--hud-top); z-index: 8; } }

.ec-bn { display: grid; gap: 3px; font-size: 14px; color: var(--berry); margin-bottom: 6px; }
.ec-wrap { overflow-x: auto; }
.ec-table { border-collapse: collapse; font-size: 13.5px; width: 100%; font-variant-numeric: tabular-nums; }
.ec-table th { text-align: left; font-family: var(--font-ui); font-size: 12px; color: var(--ink-3); font-weight: 400; padding: 2px 6px; border-bottom: 1px solid var(--parch-3); }
.ec-table td { padding: 2px 6px; border-bottom: 1px dashed var(--parch-3); }
.ec-table td small { color: var(--ink-3); }
.ec-table td.low { color: var(--berry); font-weight: 700; }
.ec-proj { display: grid; gap: 4px; }
.ec-p { display: grid; grid-template-columns: minmax(0, 1.2fr) 90px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 14px; }
.ec-p.first span:first-child { font-weight: 700; color: var(--moss); }
.ec-p button { font-size: 12px; padding: 1px 6px; }
@media (max-width: 560px) { .ec-p { grid-template-columns: 1fr auto; } .ec-p .bar, .ec-p .sub { grid-column: 1 / -1; } }

#minimap { position: absolute; right: 10px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); width: 192px; height: 144px; image-rendering: pixelated; border: 2px solid var(--ink); border-radius: 4px; box-shadow: 3px 3px 0 var(--shadow); cursor: crosshair; z-index: 2; background: #3a5a2a; }
body.building #minimap { bottom: calc(var(--hud-bottom) + 4px); }
#panel:not([hidden]) ~ #minimap { display: none; }
@media (max-width: 760px) { #minimap { display: none; } }

.pill.petition { background: #f2e2a8; color: #5a3a12; }
.facs { display: grid; gap: 3px; margin-bottom: 4px; }
.fac { display: grid; grid-template-columns: minmax(0, 1fr) 110px 70px; gap: 8px; align-items: center; font-size: 14px; }
.fac .bar { display: block; width: 100%; }
.moot-opt.later { background: transparent; border-style: dashed; }

.lore-now { display: grid; gap: 3px; margin-bottom: 8px; }
.lore-now .bar { display: block; width: 100%; }
.lore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.lore-card { display: grid; gap: 3px; padding: 6px 8px; border: 1px solid var(--parch-3); border-radius: 4px; background: var(--parch); font-size: 13.5px; align-content: start; }
.lore-card b { font-family: var(--font-ui); font-size: 14px; }
.lore-card.known { background: #e2efd0; border-color: var(--moss-2); color: #2f4a2a; }
.lore-card.known b, .lore-card.known span { color: #2f4a2a; }
.lore-card.locked { opacity: 0.55; }
.lore-card.cur { border: 2px solid var(--brass); }
.lore-card button { justify-self: start; font-size: 12px; padding: 1px 8px; }

.log-filters { display: flex; flex-wrap: wrap; gap: 3px; padding: 4px 8px; border-bottom: 1px dashed var(--parch-3); }
.log-filters button { font-family: var(--font-ui); font-size: 11px; padding: 1px 7px; border: 1px solid var(--ink-3); border-radius: 10px; background: var(--parch); cursor: pointer; color: var(--ink); }
.log-filters button.on { background: var(--ink); color: var(--parch); }
#chronicle.collapsed .log-filters { display: none; }
/* the Talk tab: each natter a thread, the two voices to left and right */
#log li.talk-thread { padding: 6px 0 8px; }
#log li.talk-thread time { margin-bottom: 4px; }
#log li.talk-thread time a { color: var(--ink-2); text-decoration: none; border-bottom: 1px dotted var(--ink-3); cursor: pointer; }
.talk-line { display: grid; gap: 1px; margin: 3px 0; padding: 4px 8px; border-radius: 8px; max-width: 86%; font-size: 13.5px; line-height: 1.3; }
.talk-line b { font-family: var(--font-ui); font-size: 11px; font-weight: 600; }
.talk-line b a { color: inherit; text-decoration: none; cursor: pointer; }
.talk-line.a { background: #e9eed6; color: #2b3a1e; border-bottom-left-radius: 2px; margin-right: auto; }
.talk-line.b { background: #f1e6d2; color: #4a2e1a; border-bottom-right-radius: 2px; margin-left: auto; text-align: right; }
.talk-line.c { background: #e3e8ef; color: #2a3444; border-bottom-left-radius: 2px; margin-right: auto; }
.talk-line.d { background: #f0e0e0; color: #4a2a2a; border-bottom-right-radius: 2px; margin-left: auto; text-align: right; }
.talk-line.e { background: #ece8d6; color: #3a3a1e; border-bottom-left-radius: 2px; margin-right: auto; }
.talk-more { font-family: var(--font-ui); font-size: 11px; padding: 1px 8px; margin-top: 2px; border: 1px solid var(--ink-3); border-radius: 10px; background: var(--parch); color: var(--ink-2); cursor: pointer; }
#log li.talk-none { color: var(--ink-3); font-style: italic; }
body.rift-mode .talk-line.a { background: #1c2a3a; color: #bfe8ff; }
body.rift-mode .talk-line.b { background: #2a1f3a; color: #f0c8ff; }
body.rift-mode .talk-line.c, body.rift-mode .talk-line.e { background: #1f2a2a; color: #c8ffe8; }
body.rift-mode .talk-line.d { background: #2a2a1f; color: #ffe8a0; }
.ec-orders { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.ec-o { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--parch-3); border-radius: 4px; background: var(--parch); }
.ec-o b { font-size: 14px; } .ec-o .sub { grid-column: 1; font-size: 12.5px; } .ec-o button { grid-row: 1 / span 2; grid-column: 2; }

#log li.goto { cursor: pointer; }
#log li.goto:hover span { text-decoration: underline dotted; }

.wg-scen .wg-seg button { min-width: 0; }
.wg-scen .sub, .wg-mode .sub { margin-top: 4px; }

.ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.ex { display: grid; gap: 3px; padding: 6px 8px; border: 1px solid var(--parch-3); border-radius: 4px; background: var(--parch); font-size: 13.5px; align-content: start; }
.ex b { font-family: var(--font-ui); font-size: 14px; }
.ex button { justify-self: start; font-size: 12px; padding: 1px 8px; }
/* ---------- phone fixes (QA round 2) ---------- */
@media (max-width: 760px) {
  #panel { top: auto !important; max-height: 58vh; }
  .gear-menu { left: 0; right: auto; }
  #errand { top: auto !important; bottom: calc(var(--hud-bottom) + 44px); z-index: 9; }
  body.has-sel #errand { bottom: calc(58vh + 16px); }
  body.errand-on:not(.phone) #objectives { display: none; }
  #roster { left: 10px; right: 10px; width: auto; }
  #toasts .toast { font-size: 13px; padding: 5px 10px; }
}
#errand { z-index: 9; }
/* the ledger has the floor while it's open: the errand card waits behind it */
body:has(#village:not([hidden])) #errand { display: none; }
@media (pointer: coarse) {
  kbd { display: none; }
  #errand .err-skip, .obj-x, .log-filters button, #bb-undo, #bb-done, .lore-card button, #ch-moot, .wg-seg button, .ch-r button, .int-head button, .ex button, .ec-o button, .ec-p button { min-height: 40px; min-width: 40px; }
  .rel a[data-v], .likes a[data-v], .friend a { display: inline-block; padding: 8px 2px; }
}
#bb-done { background: var(--moss); color: var(--parch); }
@media (max-width: 760px) { #topbar .controls { flex-wrap: nowrap; overflow-x: auto; max-width: calc(100vw - 20px); scrollbar-width: none; } #topbar .controls::-webkit-scrollbar { display: none; } }
/* the scrolling row clips anything absolutely placed inside it, so on phones the settings menu floats free, placed under the button when opened */
@media (max-width: 760px) { .gear-menu { position: fixed; right: auto; z-index: 30; } }

/* a trade with nobody in it */
.st-job.gap .st-n { color: #a0321e; }
.st-gap { font-style: normal; font-size: 11px; color: #a0321e; margin-left: 4px; }
/* ---------- phones (round 3): the interface keeps out of the valley's way ---------- */
/* body.phone is set by resize() when the window is narrower than 760px or shorter than 500px */
body.zoom-1 #view { image-rendering: auto; }
#btn-speed { display: none; }
body.phone #btn-speed { display: inline-block; min-width: 44px; }
body.phone #btn-speed.paused { background: var(--moss); color: var(--parch); }
body.phone .speed { display: none; }
body.phone #btn-zoomin, body.phone #btn-zoomout { display: inline-block; }
body.phone #topbar { left: 6px; right: 6px; top: calc(6px + env(safe-area-inset-top, 0px)); gap: 6px; flex-direction: column; align-items: stretch; }
body.phone .brand-card { padding: 3px 6px; gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
body.phone .brand-card::-webkit-scrollbar { display: none; }
body.phone .brand-card .brand, body.phone #hud-meal, body.phone #hud-weather { display: none; }
body.phone.landscape #topbar { flex-direction: row; align-items: flex-start; }
body.phone.landscape .brand-card { flex: 0 1 auto; }
body.phone.landscape .controls { flex: 0 0 auto; }
body.phone .clock { gap: 4px; font-size: 12px; flex-wrap: nowrap; white-space: nowrap; }
body.phone .clock .time { font-size: 15px; min-width: 0; }
body.phone .clock .pill, body.phone .pill.coin, body.phone .pill.era, body.phone .pill.content, body.phone .pill.hazard { min-height: 30px; min-width: 0; padding: 1px 7px; font-size: 12px; }
body.phone .controls { padding: 3px 4px; gap: 3px; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; justify-content: space-between; }
body.phone .controls button { min-height: 36px; min-width: 36px; padding: 2px 6px; font-size: 13px; }
body.phone .controls .pop, body.phone [data-speed] { display: none; }
/* the charters card is a chip until it's tapped */
body.phone #objectives { width: auto; right: auto; left: 6px; padding: 0; gap: 0; }
body.phone #objectives.folded .obj, body.phone #objectives.folded .obj-x { display: none; }
body.phone #objectives .obj-head { padding: 6px 10px; min-height: 36px; font-size: 13px; gap: 6px; }
body.phone #objectives.folded .obj-head::before { content: "★ "; }
body.phone #objectives.folded .obj-head .sub { display: none; }
body.phone #objectives:not(.folded) { padding: 6px 8px 8px; gap: 5px; right: 6px; z-index: 10; }
/* the chronicle is a chip too, and opens as a sheet over the valley */
body.phone #chronicle { left: 6px; right: auto; bottom: calc(6px + env(safe-area-inset-bottom, 0px)); width: auto; max-height: none; z-index: 5; }
body.phone #chronicle.collapsed { max-height: 44px; }
body.phone #chronicle.collapsed .log-head { padding: 6px 10px; min-height: 36px; font-size: 13px; }
body.phone #chronicle.collapsed .log-head span:first-child::before { content: "📜 "; }
body.phone #chronicle:not(.collapsed) { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; max-height: min(62vh, 100% - var(--hud-top)); border-radius: 8px 8px 0 0; z-index: 20; padding-bottom: env(safe-area-inset-bottom, 0px); }
body.phone #chronicle:not(.collapsed) .log-head { min-height: 44px; }
/* the toolbar shows the tool in hand; a tap opens it out */
body.phone #bottom { left: auto; right: 6px; transform: none; bottom: calc(6px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 12px); align-items: flex-end; z-index: 13; }
body.phone #toolbar { padding: 3px; gap: 3px; }
body.phone #toolbar.folded .tool:not(.active) { display: none; }
body.phone #toolbar .tool { min-width: 50px; font-size: 10px; padding: 2px 3px; }
body.phone #toolbar.folded .tool.active::after { content: "▴"; position: absolute; top: 1px; right: 3px; font-size: 10px; color: var(--ink-3); }
body.phone #toolbar:not(.folded) { max-width: calc(100vw - 12px); overflow-x: auto; }
/* the errand card sits low and small */
body.phone #errand { top: auto !important; bottom: calc(var(--hud-bottom) + 48px) !important; left: 6px; right: auto; transform: none; width: min(360px, calc(100vw - 92px)); max-width: none; padding: 6px 8px; font-size: 13px; z-index: 9; }
body.phone #errand span { font-size: 13px; }
body.phone #errand b { font-size: 11px; }
body.phone.building #errand { display: none; }
body.phone #errand .err-skip { min-height: 32px; font-size: 12px; padding: 2px 8px; }
body.phone.has-sel #errand { bottom: calc(60vh + 12px) !important; }
body.phone #toasts { top: var(--hud-top); width: calc(100vw - 24px); }
body.phone #toasts .toast { font-size: 13px; padding: 5px 10px; }
/* the villager sheet */
body.phone #panel { left: 6px; right: 6px; width: auto; top: auto !important; bottom: calc(6px + env(safe-area-inset-bottom, 0px)); max-height: 60vh; padding: 8px 10px 8px; z-index: 11; }
body.phone .panel-head { grid-template-columns: 44px 1fr auto; gap: 8px; }
body.phone #portrait { width: 44px; height: 59px; }
body.phone .who h2 { font-size: 16px; }
body.phone #panel .tabs button { min-height: 34px; }
body.phone #panel .actions button { min-height: 36px; }
body.phone #roster { left: 6px; right: 6px; width: auto; max-height: calc(100% - var(--hud-top) - 60px); }
body.phone .modal-card { width: 100%; height: calc(100% - 12px); max-height: none; padding: 10px 12px 12px; border-radius: 6px; }
body.phone .modal { padding: 6px; }
body.phone .modal-card .tabs { overflow-x: auto; overflow-y: visible; flex-wrap: nowrap; scrollbar-width: none; padding-top: 4px; min-height: 44px; align-items: flex-end; }
body.phone .modal-card .tabs button { flex: 0 0 auto; min-height: 36px; }
body.phone #interior { left: 6px; right: 6px; top: var(--hud-top) !important; max-height: calc(100% - var(--hud-top) - 70px); padding: 8px; z-index: 12; }
body.phone #minimap { display: none; }
/* the ledger and the other sheets have the floor while they're open */
body.phone:has(.modal:not([hidden])) #bottom, body.phone:has(#roster:not([hidden])) #bottom, body.phone:has(#interior:not([hidden])) #bottom,
body.phone:has(#intro:not([hidden])) #bottom, body.phone:has(#worldgen:not([hidden])) #bottom { display: none; }
body.phone .gear-menu { position: fixed; right: 6px; left: auto; z-index: 30; }
/* short landscape screens: the villager sheet stands to the right and the cards squeeze */
body.phone.landscape #panel { left: auto; right: 6px; width: min(46vw, 360px); top: var(--hud-top) !important; bottom: 6px; max-height: none; }
body.phone.landscape.has-sel #errand { bottom: calc(var(--hud-bottom) + 48px) !important; }
body.phone.landscape #chronicle:not(.collapsed) { left: auto; right: 0; width: min(60vw, 420px); max-height: calc(100% - var(--hud-top)); border-radius: 8px 0 0 0; }
body.phone.landscape #roster { left: 6px; right: auto; width: 300px; }
body.phone.landscape #interior { left: 6px; right: 6px; }

/* ---------- playing as the wizard (body.wizmode) ----------
   Phone first: the bar of things to do sits at the bottom within reach of a
   thumb, and the sheet (a conversation, a choice) rises from the bottom over
   the lower part of the screen while the camera keeps the wizard above it.
   In a wide window the sheet docks on the right instead. */
body.wizmode #toolbar, body.wizmode #tool-hint, body.wizmode #objectives, body.wizmode #errand,
body.wizmode #hud-coin, body.wizmode #hud-era, body.wizmode #hud-content, body.wizmode #hud-petition,
body.wizmode #btn-build, body.wizmode #btn-village, body.wizmode #b-pat, body.wizmode #b-tut, body.wizmode #b-teach { display: none !important; }
#wizbar { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 20px); }
#wizbar[hidden] { display: none; }
#wizbar .wact {
  display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 6px 14px; border-radius: 24px;
  background: var(--parch); border: 2px solid var(--ink); box-shadow: 0 0 0 2px var(--parch-3) inset, 3px 3px 0 var(--shadow);
  font-family: var(--font-ui); font-size: 14px; cursor: pointer;
}
#wizbar .wact.primary { background: var(--brass); }
#wizbar .wact canvas { width: 18px; height: 18px; image-rendering: pixelated; }
#wizbar .wact:active { transform: translate(1px, 1px); box-shadow: 0 0 0 2px var(--parch-3) inset, 1px 1px 0 var(--shadow); }
body.sheet-open #wizbar, body.sheet-open #chronicle, body.sheet-open #toasts, body.sheet-open #toast { display: none; }

.sheet {
  position: absolute; z-index: 8; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  max-height: 58%; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; overflow: hidden;
  animation: sheet-up 0.18s ease-out;
}
.sheet[hidden] { display: none; }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } }
.sheet-head { display: flex; gap: 10px; align-items: center; }
.sheet-head canvas { width: 45px; height: 60px; image-rendering: pixelated; flex: none; background: var(--parch-2); border: 2px solid var(--ink); border-radius: 4px; }
.sheet-who { flex: 1; min-width: 0; }
.sheet-who h2 { margin: 0; font-family: var(--font-ui); font-size: 18px; line-height: 1.15; }
.sheet-who .sub { font-size: 13px; color: var(--ink-2); }
.sheet-body { overflow-y: auto; min-height: 0; flex: 0 0 auto; max-height: 40%; }
.sheet-body p { margin: 0 0 6px; }
.tk-log { display: flex; flex-direction: column; gap: 4px; }
.tk-line { margin: 0; padding: 5px 9px; border-radius: 8px; background: var(--parch-2); font-size: 15px; line-height: 1.35; max-width: 92%; }
.tk-line b { font-family: var(--font-ui); font-size: 12px; margin-right: 4px; color: var(--ink-2); }
.tk-line.wiz { align-self: flex-end; background: #dfe3ea; }
.tk-line.third { background: #e8dcc0; }
.sheet-choices { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
/* in a talk the choices keep their room and what's been said gives way, down
   to a line or two (scrolled to the newest); only past that do the choices scroll */
.sheet.talk .sheet-body { flex: 0 1 auto; max-height: none; min-height: 84px; }
.sheet.talk .sheet-choices { flex: 0 0.001 auto; }
/* words still to be said hold their place; the choices wait till they're said */
.tk-wait { visibility: hidden; }
.tk-unsaid { visibility: hidden; }
.sheet-choices { transition: opacity 0.15s; }
.sheet.typing .sheet-choices { opacity: 0; pointer-events: none; transition: none; }
.sheet-choices .choice {
  text-align: left; min-height: 42px; padding: 7px 12px; border: 2px solid var(--ink); border-radius: 6px; background: #fbf3df;
  font-size: 15px; line-height: 1.3; cursor: pointer; flex-shrink: 0;
}
.sheet-choices .choice:active { background: var(--parch-2); }
.sheet-choices .choice.dim { color: var(--ink-3); }
.sheet-choices .choice.back { background: transparent; border-style: dashed; }
.sheet-choices .choice.primary { background: var(--brass); }
.sheet-choices .choice small { color: var(--ink-3); }
.tone { display: inline-block; font-family: var(--font-ui); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 0 6px; border-radius: 8px; margin-right: 4px; color: var(--parch); }
.tone.warm { background: var(--berry); } .tone.witty { background: #6a4a8a; } .tone.curious { background: var(--moss); }
/* wide windows: the sheet docks on the right, beside the wizard */
@media (min-width: 760px) and (min-height: 500px) {
  .sheet { left: auto; right: 10px; top: 120px; bottom: auto; width: 380px; max-height: calc(100% - 200px); }
}
body.landscape .sheet { left: auto; right: 8px; top: 8px; bottom: 8px; width: min(46vw, 380px); max-height: none; }

#skip { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; background: rgba(16, 20, 34, 0.72); padding: 16px; }
#skip[hidden] { display: none; }
.skip-card { width: min(420px, 100%); padding: 16px 18px; }
.skip-card h2 { margin: 0 0 4px; font-family: var(--font-ui); font-size: 20px; }
.skip-clock { font-family: var(--font-ui); margin: 6px 0; }
#skip-bar { height: 100%; width: 0; background: var(--moss-2); }
.skip-log { list-style: none; margin: 8px 0 0; padding: 0; max-height: 40vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.skip-log li { background: #fbf3df; border: 1px solid var(--parch-3); border-radius: 6px; padding: 6px 9px; font-size: 14px; }

/* ---------- the wizard's hearth: the family book and supper ---------- */
.sheet.book, .sheet.supper { max-height: 82%; }
.sheet.book .sheet-body, .sheet.supper .sheet-body { max-height: none; flex: 1 1 auto; }
.sheet.book .sheet-choices, .sheet.supper .sheet-choices { flex: 0 0 auto; }
.fb { display: flex; flex-direction: column; gap: 8px; }
.fb-card { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; background: #fbf3df; border: 1px solid var(--parch-3); border-radius: 8px; }
.fb-card.lodger { border-color: #7a5aa8; box-shadow: inset 3px 0 0 #7a5aa8; }
.fb-por { width: 36px; height: 48px; image-rendering: pixelated; flex: none; }
.fb-txt { min-width: 0; flex: 1; }
.fb-txt p { margin: 0 0 3px; font-size: 14px; line-height: 1.35; }
.fb-txt .fb-name { font-family: var(--font-ui); font-size: 15px; margin-bottom: 1px; }
.fb-txt .fb-sub { color: var(--ink-2); font-size: 13px; }
.fb-txt .fb-love { color: var(--moss); font-style: italic; }
.fb-tag { font-family: var(--font-body); font-size: 11px; padding: 0 6px; border-radius: 8px; background: #7a5aa8; color: var(--parch); vertical-align: middle; }
.fb-h { font-family: var(--font-ui); font-size: 14px; margin: 12px 0 4px; }
.fb-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.35; }
.fb-log span { font-family: var(--font-ui); font-size: 11px; color: var(--ink-3); margin-right: 4px; }
.sp-scene { display: flex; flex-direction: column; gap: 5px; }
.sp-narr { margin: 0 0 2px; font-style: italic; color: var(--ink-2); font-size: 14px; }
/* ---------- teaching and upbringing (upbringing.js) ---------- */
.upb { display: flex; align-items: center; gap: 6px; margin: 2px 0 6px; font-size: 12px; }
.upb-k { font-family: var(--font-ui); color: var(--ink-2); width: 26px; }
.upb-k:last-child { text-align: right; }
.upb-bar { position: relative; flex: 1; height: 10px; border: 2px solid var(--ink); border-radius: 4px; background: var(--parch-2); overflow: hidden; }
.upb-bar i { position: absolute; top: 0; bottom: 0; }
.upb-bar i.h { right: 50%; background: var(--moss-2); }
.upb-bar i.r { left: 50%; background: #b45aff; }
.upb-bar::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink); opacity: 0.5; }
.lean-log { list-style: none; margin: 4px 0 8px; padding: 0; font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.lean-log li { padding-left: 10px; border-left: 3px solid var(--parch-3); }
.lean-log li[data-k="hill"] { border-color: var(--moss-2); } .lean-log li[data-k="rift"] { border-color: #b45aff; }
.lean-log li[data-k="pat"] { border-color: var(--brass); } .lean-log li[data-k="tut"] { border-color: var(--berry); }
.lean-log time { font-family: var(--font-ui); font-size: 11px; color: var(--ink-3); margin-right: 4px; }
.upb-word { margin-top: 8px; font-size: 14px; }
/* the wizard's bar steps aside while a villager's panel is open over it */
body.wizmode:has(#panel:not([hidden])) #wizbar { display: none; }
.habit.flash, .upb-word.flash, .lean-strip.flash { animation: lean-flash 1.4s ease-out 2; }
@keyframes lean-flash { 0%, 100% { background: transparent; } 30% { background: rgba(201, 162, 39, 0.45); } }
@media (prefers-reduced-motion: reduce) { .upb-word { margin-top: 8px; font-size: 14px; }
/* the wizard's bar steps aside while a villager's panel is open over it */
body.wizmode:has(#panel:not([hidden])) #wizbar { display: none; }
.habit.flash, .upb-word.flash, .lean-strip.flash { animation: none; outline: 2px solid var(--brass); } }
.lean-strip { padding: 4px 8px; border-radius: 6px; background: var(--parch-2); margin-bottom: 6px; font-size: 13px; }
.lean-strip .upb { margin: 2px 0 0; }
.ls-row { display: flex; justify-content: space-between; gap: 8px; }
.ls-last { font-size: 12px; color: var(--ink-2); font-style: italic; }
.tone.hill { background: var(--moss); } .tone.rift { background: #6a3a9a; }
.kid-row { display: block; }
.kid-row small { color: var(--ink-3); }
.kid-rep { display: block; font-size: 13px; color: var(--ink-2); margin-top: 2px; }
/* ---------- the rifts, played as the wizard (riftplay.js, relay.js) ---------- */
.sh-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; position: sticky; top: 0; background: var(--parch); padding-bottom: 4px; z-index: 1; }
.sh-tabs button { font-family: var(--font-ui); font-size: 13px; padding: 4px 10px; min-height: 34px; border: 2px solid var(--ink); border-radius: 16px; background: #fbf3df; cursor: pointer; }
.sh-tabs button.on { background: var(--ink); color: var(--parch); }
.sheet.rifts, .sheet.relay-sheet, .sheet.moot { max-height: 72%; }
.sheet.rifts .sheet-body, .sheet.relay-sheet .sheet-body, .sheet.moot .sheet-body { max-height: none; flex: 1 1 auto; }
.sheet.rifts .sheet-choices, .sheet.relay-sheet .sheet-choices, .sheet.moot .sheet-choices { flex: 0 0 auto; }
.thread { border: 2px solid var(--parch-3); border-left: 4px solid #a83a7a; border-radius: 6px; background: #fbf3df; padding: 7px 10px; margin-bottom: 8px; }
.th-head { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.th-head a { font-family: var(--font-ui); font-size: 15px; color: var(--ink); text-decoration: underline; cursor: pointer; }
.th-head .sub { font-size: 13px; }
.thread ul { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 2px; font-size: 14px; }
.thread li { display: flex; gap: 6px; align-items: baseline; }
.thread li .tick { font-family: var(--font-ui); width: 14px; flex: none; color: var(--ink-3); }
.thread li.done .tick { color: var(--moss); }
.th-next { margin: 4px 0 0; font-size: 13px; font-style: italic; color: var(--ink-2); }
.casebook { display: grid; gap: 6px; }
.casebook .clue { font-size: 14px; padding: 6px 9px; border-radius: 6px; background: #fbf3df; border: 1px dashed var(--parch-3); }
.casebook .clue.found { border-style: solid; border-color: #2a7a8a; }
.faces { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.face { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; border-radius: 6px; border: 2px solid var(--parch-3); background: #fbf3df; cursor: pointer; text-decoration: none; color: var(--ink); min-width: 0; }
.face canvas { width: 30px; height: 40px; image-rendering: pixelated; }
.face span { font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.face.hearthlink { border-color: var(--brass); background: #f6e7b0; }
.face.softclose { border-color: #2f5e9a; background: #dbe6f2; }
.face.undecided { border-color: var(--ink-3); }
.face.unknown { opacity: 0.7; border-style: dashed; }
.face.gb::after { content: '×2'; font-family: var(--font-ui); font-size: 10px; color: #a83a7a; }
.vote-bars { display: grid; gap: 4px; margin: 8px 0; }
.vb { display: grid; grid-template-columns: 84px 1fr 28px; align-items: center; gap: 6px; font-size: 13px; }
.vb i { display: block; height: 12px; border: 1px solid var(--ink); border-radius: 3px; background: var(--ink-3); min-width: 2px; }
.vb.hearthlink i { background: var(--brass); }
.vb.softclose i { background: #2f5e9a; }
.vb b { font-family: var(--font-ui); text-align: right; }
.relay { display: grid; gap: 5px; font-family: 'Share Tech Mono', ui-monospace, monospace; }
.post { background: #1c1e2c; color: #c9f6ff; border-radius: 6px; padding: 6px 9px; border-left: 3px solid #3af0ff; display: grid; gap: 1px; }
.post .pw { font-size: 12px; color: #ff7acb; }
.post .pw small { color: #8a90b0; }
.post .pt { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.post.hill { border-left-color: #c9a227; }
.post.hill .pt { color: #f2e4c2; font-family: var(--font-body); }
.post.kid { border-left-color: #9aff7a; }
.post.wizard { border-left-color: #e8eef8; }
.post.wizard .pt { color: #fff; }
.post.pinned { outline: 2px solid var(--brass); }
/* ---------- the wizard's journeys (journey.js): the journal page and "since you were last here" ---------- */
.skip-card.journey { width: min(460px, 100%); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; overflow: hidden; }
/* away on the road, the village isn't shown: just the journal */
#skip:has(.skip-card.journey) { background: #1a1f16; }
.skip-card.journey #journey-home { flex: none; margin: 8px 0 4px; }
.skip-card.journey .skip-log { max-height: none; flex: 1 1 auto; min-height: 0; }
#journey-road { width: 100%; aspect-ratio: 10 / 3; image-rendering: pixelated; border: 2px solid var(--ink); border-radius: 4px; margin: 6px 0 2px; background: var(--parch-2); }
#journey-road[hidden] { display: none; }
.skip-log li.letter { font-family: var(--font-body); font-size: 15px; line-height: 1.4; background: #fdf7e8; border: 1px solid var(--parch-3); border-left: 4px solid var(--parch-3); }
.skip-log li.letter.call { border-left-color: var(--berry); }
.skip-log .j-day { display: block; font-family: var(--font-ui); font-size: 11px; color: var(--ink-3); margin-bottom: 2px; }
.skip-log .j-sign { display: block; text-align: right; font-style: italic; color: var(--ink-2); margin-top: 4px; }
.skip-log .j-come { display: block; margin-top: 6px; min-height: 40px; width: 100%; border: 2px solid var(--ink); border-radius: 6px; background: var(--brass); font-family: var(--font-ui); cursor: pointer; }
#journey-home { margin-top: 10px; min-height: 46px; width: 100%; border: 2px solid var(--ink); border-radius: 6px; background: var(--brass); font-family: var(--font-ui); font-size: 15px; cursor: pointer; }
#journey-home[hidden] { display: none; }
.j-hint { margin: 0 0 4px; font-size: 14px; color: var(--ink-2); }
.sheet.since .sheet-body { max-height: none; flex: 1 1 auto; }
.sheet.since .sheet-choices { flex: 0 0 auto; }
.since-card { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--parch-3); }
.since-card:last-child { border-bottom: 0; }
.since-pics { display: flex; align-items: center; gap: 2px; flex: none; }
.since-pics canvas { width: 36px; height: 48px; image-rendering: pixelated; background: var(--parch-2); border: 2px solid var(--ink); border-radius: 4px; }
.since-arrow { font-family: var(--font-ui); color: var(--ink-3); }
.since-text { flex: 1; min-width: 0; font-size: 15px; line-height: 1.35; }
.since-go { display: block; margin-top: 4px; min-height: 36px; padding: 2px 12px; border: 2px solid var(--ink); border-radius: 6px; background: #fbf3df; cursor: pointer; }

/* playing as the wizard on a phone: the Chronicle opens from the More page instead of sitting under the bar */
body.wizmode.phone #chronicle:not(.wiz-open) { display: none; }
body.wizmode.phone #chronicle.wiz-open { z-index: 7; }
.sheet-choices .choice canvas { width: 18px; height: 18px; image-rendering: pixelated; vertical-align: -3px; margin-right: 6px; }
body.wizmode.phone #bottom { left: 50%; right: auto; transform: translateX(-50%); align-items: center; width: max-content; }

/* you and them (bond.js): how a hobbit feels about the wizard */
body:not(.wizmode) .wiz-only { display: none; }
.bond-strip { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; margin: 0 0 6px; }
.bond-bar { display: inline-block; width: 64px; height: 8px; border: 2px solid var(--ink); border-radius: 4px; background: var(--parch-2); overflow: hidden; vertical-align: middle; }
.bond-bar.big { width: 100%; height: 10px; }
.bond-bar i { display: block; height: 100%; background: var(--berry); }
.bond-bar i.cool { background: #5a6a8a; }
.bond-bar i.trust { background: var(--moss-2); }
.bond-bar i.respect { background: var(--brass); }
.bond-row { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 4px 8px; align-items: center; margin: 4px 0; font-size: 14px; }
.bond-row b { grid-column: 2; font-weight: 600; font-size: 13px; color: var(--ink-2); }
.bond-said { font-style: italic; color: var(--ink-2); margin: 6px 0; font-size: 14px; }
.bond-list { margin: 0 0 8px; padding-left: 18px; font-size: 14px; line-height: 1.4; }

/* the conversation engine (threads.js) */
.tk-crumb { font-family: var(--font-ui); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); border-bottom: 1px dashed var(--parch-3); padding-bottom: 2px; margin-bottom: 4px; }
.tk-note { margin: 0; font-size: 13px; color: var(--moss); font-style: italic; }
.tk-aside { margin: 0; font-size: 14px; color: var(--ink-2); font-style: italic; }
.tk-feel { margin: 0; font-size: 12px; color: var(--ink-3); font-style: italic; align-self: flex-start; }
.tone.jest { background: #6a4a8a; } .tone.ask { background: var(--moss); } .tone.listen { background: #4a6a7a; } .tone.advise { background: #8a6a2a; }
.tone.share { background: #2f6f8f; } .tone.comfort { background: #a0522d; } .tone.tale { background: #5a3a22; }
.choice-foot { display: flex; gap: 6px; flex-shrink: 0; }
.sheet-choices .choice.foot { flex: 1; min-height: 38px; text-align: center; background: transparent; border-style: dashed; font-size: 14px; }
.sheet-choices .choice:disabled { opacity: 0.55; }