:root {
  --bg: #14161a;
  --panel: #1d2026;
  --panel-hi: #262a32;
  --line: #333844;
  --text: #e6e8ec;
  --dim: #99a0ad;
  --accent: #c8a15a;
  --strong: #4c9a63;
  --weak: #c08a3e;
  --miss: #b1564f;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f6f4ef;
  --panel: #ffffff;
  --panel-hi: #ebe8e1;
  --line: #d5cfc4;
  --text: #1d2026;
  --dim: #6a7280;
  --accent: #8a6420;
  --strong: #2f7d48;
  --weak: #92671b;
  --miss: #a63f39;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 3rem;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
}

header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: env(safe-area-inset-top, 0px) 1rem 0.6rem;
}

h1 {
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0.8rem 0 0.6rem;
}

/* Title left, character sheet and inventory in the middle, rules and theme right */
.titlebar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; }

#theme {
  width: 2.2rem;
  height: 2.2rem;
  font-size: 1rem;
  line-height: 1;
  color: var(--dim);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}

#theme:hover { color: var(--accent); border-color: var(--accent); }

nav { display: flex; gap: 0.5rem; }

nav button {
  flex: 1;
  padding: 0.7rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--dim);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}

nav button.active { color: #fff; background: var(--accent); border-color: var(--accent); }

main { max-width: 42rem; margin: 0 auto; padding: 1rem; }

#search {
  width: 100%;
  padding: 0.7rem 0.8rem;
  margin-bottom: 0.8rem;
  font-size: 1rem;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}

#search:focus { outline: none; border-color: var(--accent); }

.row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.85rem 0.9rem;
  margin-bottom: 0.4rem;
  font-size: 1.05rem;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}

.row:active { background: var(--panel-hi); }
.row.cat { font-weight: 600; color: var(--accent); }
.row.cat[aria-expanded="true"] { border-color: var(--accent); }
.row.cat::after { content: "▸"; float: right; color: var(--dim); }
.row.cat[aria-expanded="true"]::after { content: "▾"; }
.row.move { margin-left: 1rem; width: calc(100% - 1rem); }
.row .cat-tag { display: block; font-size: 0.75rem; color: var(--dim); }

.back {
  padding: 0.4rem 0;
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
  color: var(--dim);
  background: none;
  border: 0;
  cursor: pointer;
}

h2 { margin: 0 0 0.6rem; font-size: 1.4rem; color: var(--accent); }

.trigger { margin: 0 0 0.9rem; font-size: 1.05rem; }

ul { margin: 0 0 0.9rem; padding-left: 1.1rem; }
li { margin-bottom: 0.35rem; }

details {
  margin-bottom: 0.9rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}

summary { padding: 0.6rem 0.9rem; color: var(--dim); cursor: pointer; }
details p, details ul { margin: 0; padding: 0 0.9rem 0.9rem; }
details ul { padding-left: 2rem; }

.outcomes { display: flex; gap: 0.5rem; margin: 1.2rem 0 0.8rem; }

.outcomes button {
  flex: 1;
  padding: 0.9rem 0.3rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}

.outcomes button.on { color: #fff; }
.outcomes button[data-o="Strong"].on { background: var(--strong); border-color: var(--strong); }
.outcomes button[data-o="Weak"].on { background: var(--weak); border-color: var(--weak); }
.outcomes button[data-o="Miss"].on { background: var(--miss); border-color: var(--miss); }

#outcome {
  border-left: 3px solid var(--line);
  padding-left: 0.9rem;
}

#outcome.Strong { border-color: var(--strong); }
#outcome.Weak { border-color: var(--weak); }
#outcome.Miss { border-color: var(--miss); }
#outcome p { margin: 0 0 0.6rem; font-size: 1.1rem; }

.empty { color: var(--dim); }
.hint { margin-top: 1.5rem; font-size: 0.8rem; color: var(--dim); }

/* Oracle tables */

.row.go::after { content: "›"; float: right; color: var(--dim); }

main.wide { max-width: 96rem; }  /* tables get the whole screen, not the reading column */

.table { list-style: none; margin: 0 0 1rem; padding: 0; }

.table li {
  display: flex;
  gap: 0.6rem;
  padding: 0.35rem 0;
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.table .result { flex: 1; min-width: 0; }

.table .roll {
  flex: 0 0 3.6rem;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

/* 100-row tables: ten columns of ten, filled top-to-bottom */
.d100 {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(10, auto);
  column-gap: 1.2rem;
  font-size: 0.85rem;
}

.d100 li { padding: 0.15rem 0; gap: 0.4rem; }
.d100 .roll { flex: 0 0 1.7rem; text-align: right; }

@media (max-width: 1000px) { .d100 { grid-template-rows: repeat(20, auto); } }
@media (max-width: 620px) { .d100 { grid-template-rows: repeat(50, auto); } }

.sub { margin: 0 0 0.4rem 1rem; }
.note { margin: 0.2rem 0 0.8rem; color: var(--dim); }

h3 {
  margin: 0.9rem 0 0.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

/* Mid-length tables: as many columns as the width allows */
.cols { column-gap: 1.4rem; font-size: 0.9rem; }
.cols li { break-inside: avoid; padding: 0.25rem 0; }
.cols .roll { flex: 0 0 auto; min-width: 2.9rem; }
.cols.w1 { column-width: 11rem; }
.cols.w2 { column-width: 17rem; }
.cols.w3 { column-width: 26rem; }

/* Sub-tables sharing a roll column (prefix/suffix, name lists) */
.pairs { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem 4.5rem; }

.pair { border-collapse: collapse; font-size: 0.9rem; }

.pair thead th {
  padding: 0 4rem 0.3rem 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  color: var(--accent);
  border-bottom: 1px solid var(--line);
}

.pair td, .pair tbody th {
  padding: 0.3rem 4rem 0.3rem 0;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.pair th:last-child, .pair td:last-child { padding-right: 0; }

.pair thead th:first-child, .pair tbody th { padding-right: 1.4rem; }

.pair tbody th {
  font-weight: 400;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

/* Creatures */
.rank {
  margin: 0 0 1rem;
  font-weight: 600;
  color: var(--accent);
}

.about { margin: 0 0 0.4rem 1rem; width: calc(100% - 1rem); }
.about p { padding: 0 0.9rem 0.6rem; margin: 0; }

/* A creature expanded under its own button */
.row.move.open {
  margin-bottom: 0;
  border-color: var(--accent);
  border-radius: 6px 6px 0 0;
}

.detail {
  margin: 0 0 0.6rem 1rem;
  padding: 0.6rem 0.9rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 6px 6px;
}

.detail h3 { margin-top: 0.7rem; }
.detail p { margin: 0.5rem 0; }
.detail ul { margin-bottom: 0; }
.detail details { margin: 0.8rem 0 0; }

/* Regions: top-level rows expanding to a panel */
.row.region[aria-expanded="true"] { margin-bottom: 0; border-radius: 6px 6px 0 0; }
.detail.flush { margin-left: 0; }

@media (max-width: 480px) {
  nav button { padding: 0.6rem 0.2rem; font-size: 0.85rem; }
}

/* Cross-references between moves */
.xref {
  padding: 0;
  font: inherit;
  color: var(--accent);
  background: none;
  border: 0;
  border-bottom: 1px dotted var(--accent);
  cursor: pointer;
}

.xref:hover { border-bottom-style: solid; }

/* inside a flex row the link must stay part of the sentence */
.xref { display: inline; vertical-align: baseline; }

/* Regions: map beside the list */
.regions {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  max-width: 70rem;
  margin: 0 auto;
}

.regions .map {
  flex: 0 1 475px;
  width: 475px;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.regions #browse { flex: 1 1 26rem; min-width: 0; }

@media (max-width: 820px) {
  .regions { flex-direction: column; gap: 1.2rem; }
  .regions .map { align-self: center; }
}

/* Roll tables folded into a move: the oracle table look, indented to sit
   inside the fold, with room for rank labels like "Troublesome foe" */
details .table { margin: 0 0.9rem 0.9rem; }
.table.named .roll { flex-basis: 11rem; }

/* The stat you roll with. Weight alone is too weak a signal on a phone in
   dark mode — light text on dark blooms, and Android often synthesises bold —
   so it gets a chip as well. Accent colour is left to links. */
.stat {
  padding: 0.05em 0.35em;
  font-weight: 600;
  white-space: nowrap;
  background: var(--panel-hi);
  border: 1px solid var(--line);
  border-radius: 4px;
}

/* Which-move-when notes under an expanded category */
.guide { margin-left: 1rem; }
.guide .roll { flex-basis: 13rem; color: var(--text); }

@media (max-width: 560px) {
  .guide li { flex-direction: column; gap: 0.1rem; }
  .guide .roll { flex-basis: auto; }
}

/* Rules links and theme toggle top right; page buttons centred */
.pages { display: flex; gap: 0.5rem; }
.tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }

.pages button, .tools .doc {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  height: 2.2rem;
  padding: 0 0.8rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--dim);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}

.pages button:hover, .tools .doc:hover { color: var(--accent); border-color: var(--accent); }
.pages button.active { color: #fff; background: var(--accent); border-color: var(--accent); }

/* Character sheet: laid out like sheet.pdf — momentum down the left, health,
   spirit and supply down the right, everything else in between. */
.cs { max-width: 52rem; margin: 0 auto; }
.cs button { font: inherit; cursor: pointer; }
.cs button:disabled { cursor: default; }

.cs .lbl {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}

.cs input[type="text"], .cs input[type="number"] {
  width: 100%;
  padding: 0.45rem 0.6rem;
  font: inherit;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.cs input:focus { outline: none; border-color: var(--accent); }
.cs input[type="radio"], .cs input[type="checkbox"] { accent-color: var(--accent); margin: 0 0.3rem 0 0; }

.cs-top { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-end; margin-bottom: 1.2rem; }
.cs-name { flex: 1 1 16rem; }
.cs-xp b { color: var(--text); }

.dots { display: grid; grid-template-columns: repeat(15, 1rem); gap: 0.25rem; }

.dot {
  width: 1rem;
  height: 1rem;
  padding: 0;
  background: var(--panel);
  border: 1.5px solid var(--dim);
  border-radius: 50%;
}

.dot.on { background: var(--accent); border-color: var(--accent); }

.cs-body {
  display: grid;
  grid-template-columns: 4.2rem 1fr 4.2rem;
  grid-template-areas: "mom main status";
  gap: 1.2rem;
  align-items: start;
}

.cs-mom { grid-area: mom; }
.cs-main { grid-area: main; min-width: 0; }
.cs-status { grid-area: status; }
.cs-status .lbl:not(:first-child) { margin-top: 0.6rem; }

.track { display: flex; flex-direction: column; gap: 2px; }

.cs .cell {
  display: block;
  width: 100%;
  padding: 0.3rem 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.cs .cell.on { color: #fff; background: var(--accent); border-color: var(--accent); }
.cs .cell:disabled { color: var(--line); background: var(--bg); }

.cs .cell.fixed, .cs-mom > .cell:last-child { margin-top: 0.4rem; font-size: 0.75rem; font-weight: 600; color: var(--dim); }
/* Max is a readout, not a control: no box, same footprint */
.cs .cell.fixed { background: none; border-color: transparent; }
.cs .cell b { display: block; font-size: 1rem; color: var(--text); }

.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4rem; }

.stats label {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

.cs .stats input {
  height: 3.2rem;
  margin-bottom: 0.25rem;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  -moz-appearance: textfield;
}

.stats input::-webkit-inner-spin-button, .stats input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Section headings with a rule either side, as on the sheet */
h3.rule { display: flex; align-items: center; gap: 0.8rem; margin: 1.3rem 0 0.6rem; }
h3.rule::before, h3.rule::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

.boxes { display: flex; justify-content: center; align-items: center; gap: 3px; }

.box {
  flex: 0 1 2rem;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  background: var(--panel);
  border: 1.5px solid var(--dim);
  border-radius: 3px;
}

.box svg { display: block; width: 100%; height: 100%; stroke: var(--text); stroke-width: 2; stroke-linecap: round; }
.box.full { background: var(--accent); border-color: var(--accent); }
.box.full svg { stroke: #fff; }

.score {
  flex: 0 0 1.8rem;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.acts { display: flex; gap: 0.4rem; margin-top: 0.4rem; }
.acts.center { justify-content: center; }

.acts button {
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
  color: var(--dim);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.acts button:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.acts button:disabled { opacity: 0.5; }

.vow { margin-bottom: 1rem; }

.ranks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.1rem 0.9rem;
  margin: 0.35rem 0;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.ranks label, .deb label { display: inline-flex; align-items: center; cursor: pointer; }

.debs { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0.8rem; }
.deb h4 { margin: 0 0 0.3rem; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.deb label { display: flex; margin-bottom: 0.2rem; font-size: 0.85rem; text-transform: uppercase; }
.deb:first-child { display: grid; grid-template-columns: 1fr 1fr; align-content: start; column-gap: 0.8rem; }
.deb:first-child h4 { grid-column: 1 / -1; }

.cs .hint .xref { font-size: inherit; }

/* Phones: the two side columns sit side by side above the rest, as they are
   about the same height */
@media (max-width: 640px) {
  .cs-body {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "mom status" "main main";
  }
  .debs { grid-template-columns: 1fr 1fr; }
  .deb:first-child { grid-column: 1 / -1; }
  .pages button, .tools .doc { padding: 0 0.6rem; font-size: 0.8rem; }
}

.cs-warn { display: block; min-height: 1.2em; margin-top: 0.2rem; font-size: 0.8rem; color: var(--weak); }

/* New / open / delete, under the sheet */
.cs-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.cs-foot button, .cs-foot select, .log-new button {
  padding: 0.5rem 0.8rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.cs-foot select { flex: 0 1 16rem; min-width: 0; cursor: pointer; }
.cs-foot button:hover:not(:disabled), .cs-foot select:hover, .log-new button:hover { border-color: var(--accent); }
.cs-foot button:disabled { opacity: 0.5; }

/* A marked bane is permanent */
.deb label:has(input:disabled) { cursor: default; color: var(--miss); }

/* Log, under the sheet: newest entry first */
.log-new { display: flex; gap: 0.5rem; align-items: flex-start; }

.log-new textarea {
  flex: 1;
  min-width: 0;
  padding: 0.4rem 0.6rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  resize: vertical;
}

.log-new textarea:focus { outline: none; border-color: var(--accent); }

.log { list-style: none; margin: 0.6rem 0 0; padding: 0; }

.log li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  padding: 0.3rem 0;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--line);
}

.log p { flex: 1; min-width: 0; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Entries are edited in place */
.log p:focus { outline: 1px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.log-x {
  flex: 0 0 auto;
  padding: 0 0.3rem;
  font-size: 1.1rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--miss);
  background: none;
  border: 0;
}

.log-x:hover { color: #fff; background: var(--miss); border-radius: 4px; }

/* Inventory: two lists side by side, items dragged between them */
.inv h2 { margin: 0; }
.inv-new { display: flex; gap: 0.5rem; }
.inv-new button, .items button { padding: 0.45rem 0.8rem; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.inv-new button:hover, .items button:hover { border-color: var(--accent); }

.inv-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
@media (max-width: 640px) { .inv-lists { grid-template-columns: 1fr; } }

/* The whole column takes a drop, so an empty list is still a target */
.inv-lists section { min-height: 8rem; padding-bottom: 1rem; border-radius: 6px; }
.inv-lists section.over { outline: 2px dashed var(--accent); outline-offset: 4px; }
.inv-empty { margin: 0.5rem 0; font-size: 0.9rem; color: var(--dim); text-align: center; }

.items { list-style: none; margin: 0; padding: 0; }
/* Grip, name, + and remove on the first line; fields below, their × buttons
   in the same column as the + */
.items li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 1.8rem auto;
  align-items: center;
  gap: 0 0.4rem;
  padding: 0.2rem 0;
  border-bottom: 1px solid var(--line);
}
/* The name box has its own inner padding, the fields don't: pad the bottom
   more when fields end the item so the space above and below matches */
.items li:has(.item-fields) { padding-bottom: 0.4rem; }
.items li.dragging { opacity: 0.4; }
/* Item names and the fields the player adds, one per line with the label
   beside it. The boxes are quiet until hovered or typed in. */
.item-fields { grid-column: 2 / 4; display: grid; grid-template-columns: auto minmax(0, 1fr) 1.8rem; align-items: center; gap: 0 0.4rem; }
.cs .items input { background: transparent; border-color: transparent; }
.cs .items input:hover { border-color: var(--line); }
.cs .items input:focus { background: var(--panel); border-color: var(--accent); }
.cs .items input[data-item="name"] { padding: 0.2rem 0.3rem; font-weight: 600; }
.cs .item-fields input { padding: 0 0.3rem; font-size: 0.85rem; line-height: 1.3; }
.cs .item-fields .lbl { width: 7rem; font-size: 0.65rem; font-weight: 600; color: var(--dim); opacity: 0.7; }
.items .grip { padding: 0.2rem 0.1rem; color: var(--dim); cursor: grab; user-select: none; }
.items .log-x, .items .item-btn { padding: 0.3rem; border: 0; background: none; }
.items .item-btn { width: 1.8rem; font-size: 1.1rem; line-height: 1.2; font-weight: 700; color: var(--dim); }
.items .item-btn:hover { color: var(--accent); }
.item-fields .item-btn { padding: 0; font-size: 0.9rem; opacity: 0.6; }
.item-fields .item-btn:hover { color: var(--miss); opacity: 1; }