/* Same look as the DDM (OrbisGui/webapp/static/legacy.css): wine-red header,
   wooden desk, parchment sheet, book typeface for headings. */
:root {
  --wine: #52242c;
  --wine-deep: #28161b;
  --wine-soft: #743d44;
  --gold: #b58a43;
  --gold-light: #e0bf78;
  --ink: #372818;
  --muted: #705d46;
  --edge: #baa177;
  --paper: #e2c999;
  --paper-light: #f0dfb8;
  --field: #f8ecd0;
  --ok: #4f6b2f;
  --warn: #8a5a14;
  --danger: #9a2f2f;
  --radius: 4px;
  --nav-height: 56px;  /* top bar on phones and tablets */
  --sticky-top: var(--nav-height);  /* sticky budgets stop under the bar */
  --gap: 1rem;
  --book: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  color-scheme: light;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  line-height: 1.45;
  color: var(--ink);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 320px;
  background: linear-gradient(#241714b0, #241714b0), url("/img/wood.jpg") center / 420px auto, #453024;
}
a { color: var(--wine); }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-family: var(--book); }
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
h2 { font-size: 1.5rem; color: var(--wine); }
h3 { font-size: 1.1rem; color: var(--wine); display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .6rem; }
h4 { font-size: 1rem; color: var(--muted); display: flex; gap: .5rem; align-items: center; margin: 0 0 .4rem; }
p { margin: 0 0 .6rem; }
small, .muted { color: var(--muted); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
::selection { background: #d5b069; color: #2e1d1c; }

/* ---------------------------------------------------------------- shell */
/* Phones and tablets: one sticky top bar; the navigation sits in the bar's
   right half (same grid cell as the brand), so nothing covers the content at
   the bottom. From 900px the navigation becomes the sidebar again. */
.shell {
  min-height: 100vh; padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; align-items: start;
}
.brand {
  grid-column: 1 / -1; grid-row: 1; position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: .8rem;
  height: var(--nav-height); padding: 0 1rem;
  background:
    radial-gradient(ellipse at 38% -80%, #7d4a4c 0, transparent 49%),
    repeating-linear-gradient(45deg, transparent 0 18px, #e2b86b0b 18px 19px, transparent 19px 37px),
    linear-gradient(115deg, #25151b, #4b242c 60%, #2c191e);
  border-bottom: 4px double #bc904c;
  box-shadow: inset 0 -7px #24151b, inset 0 -8px #a47a3c, 0 5px 20px #1d110e5c;
}
.brand a { display: flex; align-items: center; gap: .7rem; color: #fff0cb; text-decoration: none; font: 700 1.6rem/1 var(--book); letter-spacing: .05em; text-shadow: 0 2px #1e1116; }
.brand-mark {
  display: grid; place-items: center; width: 34px; height: 38px;
  border: 2px solid #e3bf78; border-radius: 6px 6px 16px 16px;
  color: #f6dda1; background: radial-gradient(circle at 50% 28%, #9c5b55, #51232d 75%);
  box-shadow: inset 0 0 0 2px #4b2530, inset 0 0 0 3px #d3a75e;
  font: 1.15rem var(--book);
}
.brand-name { white-space: nowrap; }
.view {
  grid-column: 1 / -1; grid-row: 2; justify-self: center;
  width: calc(100% - 1rem); max-width: 1100px; margin: .75rem auto 1.5rem; padding: 1rem; outline: none;
  background: linear-gradient(#f3e4c2d9, #e6cfa2d9), url("/img/parchment.jpg") center / cover, var(--paper);
  border: 2px solid #b58c4e; border-radius: 2px;
  box-shadow: 0 0 0 4px #271b16, 0 0 0 5px #a3763c, 0 16px 32px #110b096e;
}

/* Height of the bar minus its double border. */
.nav {
  grid-column: 2; grid-row: 1; position: sticky; top: 0; z-index: 11;
  display: flex; height: calc(var(--nav-height) - 4px); padding-right: .35rem;
}
.nav:empty { display: none; }
.nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 64px; padding: 0 .45rem;
  color: #e8d0a5; text-decoration: none; font: 600 .74rem var(--book); white-space: nowrap; }
.nav a:hover { color: #fff1d1; }
.nav a.active { color: #fff1d1; background: #ffffff14; box-shadow: inset 0 -3px #d3a45f; }
.nav-icon { font-size: 1.15rem; line-height: 1.1; }
@media (max-width: 899px) {
  .brand a { font-size: 1.3rem; gap: .55rem; }
  .brand-mark { width: 30px; height: 34px; font-size: 1rem; }
}
/* Small phones: the brand keeps its mark; its name stays for screen readers. */
@media (max-width: 459px) {
  .brand { padding: 0 .6rem; }
  .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nav { padding-right: .15rem; }
  .nav a { min-width: 0; padding: 0 .55rem; }
}

@media (min-width: 900px) {
  /* Content column capped and centred; the navigation hugs it on the left. */
  :root { --sticky-top: 0px; }
  .shell { grid-template-columns: minmax(210px, 1fr) minmax(0, 1140px) minmax(0, 1fr); padding-bottom: 0; align-items: stretch; }
  .brand { position: relative; height: auto; min-height: 60px; padding: .5rem 1.5rem; }
  .nav {
    grid-column: 1; grid-row: 2; justify-self: end; width: 190px; align-self: start; position: sticky; top: 1rem; z-index: 10; height: auto; margin: 1.25rem 0 0 1rem;
    flex-direction: column; justify-content: flex-start; gap: .25rem; padding: .5rem;
    background: repeating-linear-gradient(135deg, #dcaa5710 0 1px, transparent 1px 13px), linear-gradient(90deg, #3b1e25, #592a31 65%, #3e2127);
    border: 2px solid #b58c4e; border-radius: 2px; box-shadow: 0 0 0 3px #271b16, 0 10px 24px #110b0960;
  }
  .nav a { min-width: 0; flex: none; flex-direction: row; justify-content: flex-start; gap: .75rem; padding: .65rem .9rem; border-radius: 2px; font-size: 1rem; }
  .nav a.active { box-shadow: inset 3px 0 #d3a45f; }
  .view { grid-column: 2; justify-self: stretch; width: calc(100% - 2.5rem); max-width: none; margin: 1.25rem 1.25rem 2rem; padding: 1.5rem 1.75rem; }
}

/* ---------------------------------------------------------------- layout */
.stack { display: flex; flex-direction: column; gap: var(--gap); }
.card {
  background: #fbf1dab3; border: 1px solid var(--edge); border-radius: var(--radius);
  padding: 1rem; color: inherit; box-shadow: inset 0 0 0 1px #fff6e2a0, 0 1px 2px #5a3f2026;
}
.card > :last-child { margin-bottom: 0; }
.card.narrow { max-width: 560px; margin: 1rem auto; display: flex; flex-direction: column; gap: .75rem; }
.card.empty { text-align: center; padding: 2rem 1rem; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; margin-bottom: var(--gap); }
.two-columns { display: grid; gap: var(--gap); }
@media (min-width: 760px) { .two-columns { grid-template-columns: 1fr 1fr; } }
.section-title { margin: .25rem 0 -.25rem; }
.character-card { text-decoration: none; display: flex; flex-direction: column; gap: .25rem; transition: border-color .15s, box-shadow .15s; }
.character-card strong { font: 700 1.1rem var(--book); color: var(--wine); }
.character-card:hover, .race:hover { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 4px 12px #5a3f2033; }

/* Campaign landing: the campaigns are the primary action; joining is the last tile of the same grid. */
.campaign-list { margin-bottom: 1rem; }
.campaign-intro { margin: -.25rem 0 .8rem; }
.campaign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); gap: 1rem; }
.campaign-tile { min-height: 112px; display: grid; grid-template-columns: 64px minmax(0, 1fr) 28px; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; border-top: 4px solid var(--gold); text-decoration: none; transition: transform .15s, border-color .15s, box-shadow .15s; }
.campaign-tile:hover { transform: translateY(-2px); border-color: var(--wine); box-shadow: 0 7px 18px #5a3f2038; }
.campaign-tile:focus-visible { outline-offset: 3px; }
.campaign-seal { display: grid; place-items: center; width: 62px; height: 70px; border: 2px solid #d6ad61; border-radius: 8px 8px 24px 24px; color: #f8e5b6; background: radial-gradient(circle at 50% 28%, #96534e, #4d202a 76%); box-shadow: inset 0 0 0 2px #4b2530, inset 0 0 0 3px #d3a75e; font: 700 1.6rem/1 var(--book); }
.campaign-tile-copy { min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.campaign-tile-copy strong { color: var(--wine); font: 700 1.45rem/1.2 var(--book); overflow-wrap: anywhere; }
.campaign-tile-copy small { color: var(--muted); font-size: .88rem; text-transform: uppercase; letter-spacing: .04em; }
.campaign-open { color: var(--gold); font: 700 2.2rem/1 var(--book); transition: transform .15s; }
.campaign-tile:hover .campaign-open { transform: translateX(3px); color: var(--wine); }
.campaign-join { border-style: dashed; border-top: 4px solid var(--edge); background: #f6e8c8b3; }
.campaign-join:hover { transform: none; border-color: var(--edge); box-shadow: inset 0 0 0 1px #fff6e2a0, 0 1px 2px #5a3f2026; }
.campaign-join .campaign-tile-copy { grid-column: 2 / -1; }
.campaign-join h3 { margin: 0; font-size: 1.2rem; }
.campaign-join .campaign-tile-copy small { text-transform: none; letter-spacing: 0; }
.join-seal { color: var(--wine); background: #f3e2bd; border-style: dashed; box-shadow: none; }
.campaign-join-form { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; }
.campaign-join-form input { flex: 1 1 9rem; min-width: 0; }
.campaign-join-form input, .campaign-join-form button { min-height: 38px; }

/* Meine Charaktere: monogram crest and name up top, campaigns beneath, a quiet footer. */
.library-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: var(--gap); }
.library-card { gap: .7rem; padding: .9rem 1rem .8rem; border-top: 3px solid var(--gold); }
.library-card:focus-visible { outline-offset: 3px; }
.library-card-head { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.monogram {
  flex: none; display: grid; place-items: center; width: 46px; height: 52px;
  border: 2px solid var(--gold-light); border-radius: 6px 6px 18px 18px;
  color: #f6dda1; background: radial-gradient(circle at 50% 28%, #9c5b55, #51232d 75%);
  box-shadow: inset 0 0 0 2px #4b2530, inset 0 0 0 3px #d3a75e; font: 700 1.35rem/1 var(--book);
}
.monogram.playing { border-color: #a9c27c; }
.library-card-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.character-card .library-card-name { font: 700 1.25rem/1.2 var(--book); color: var(--wine); overflow-wrap: anywhere; hyphens: auto; }
.library-card-state { font-size: .8rem; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.library-card-go { flex: none; color: var(--gold); font: 700 1.6rem/1 var(--book); transition: transform .15s; }
.library-card:hover .library-card-go { transform: translateX(3px); color: var(--wine); }
.library-card-campaigns { list-style: none; margin: 0; padding: .55rem 0 0; border-top: 1px dotted var(--edge); display: flex; flex-direction: column; gap: .3rem; }
.library-card-campaigns li { display: flex; align-items: center; gap: .5rem; min-width: 0; font-size: .92rem; color: var(--ink); }
.library-card-campaigns .campaign-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.library-card-campaigns small { flex: none; font-weight: 600; }
.library-card-campaigns .status-approved small { color: var(--ok); }
.library-card-campaigns .status-pending small { color: var(--warn); }
.status-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.library-card-campaigns .status-approved .status-dot { background: var(--ok); }
.library-card-campaigns .status-pending .status-dot { background: var(--warn); }
.library-card-foot { margin-top: auto; font-size: .8rem; color: var(--muted); }
.archived-card { border-top-color: var(--edge); opacity: .85; }
.archived-card .monogram { filter: grayscale(.7); }

.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: var(--gap); padding-bottom: .75rem; border-bottom: 1px solid var(--edge); }
.page-head h2 { flex: 1; }
.new-character-plus { display: none; }
@media (max-width: 600px) {
  .button.new-character { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%; }
  .new-character-plus { display: inline; font-size: 1.6rem; line-height: 1; }
  .new-character-label { display: none; }
}
.back { display: inline-flex; align-items: center; min-height: 36px; margin-bottom: .25rem; text-decoration: none; color: var(--muted); font-size: .9rem; }
.back:hover { color: var(--wine); }
.back-icon { display: inline-grid; place-items: center; flex: none; width: 42px; height: 42px; min-height: 42px; margin: 0; border: 1px solid var(--edge); border-radius: 50%; background: var(--panel); color: var(--wine); box-shadow: 0 2px 6px #5a3f2020; font: 700 1.35rem/1 "Segoe UI", sans-serif; }
.back-icon:hover, .back-icon:focus-visible { border-color: var(--gold); background: #f5e3bc; box-shadow: 0 0 0 2px #b58a4333; }
.hero { text-align: center; padding: 1.5rem 1rem 1.25rem; }
.hero h1 { font-size: 2.8rem; color: var(--wine); letter-spacing: .1em; margin-bottom: .4rem; }

/* ---------------------------------------------------------------- controls */
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 44px; padding: .5rem 1.1rem; border-radius: 3px;
  border: 1px solid #3a1a20; color: #fff1d1; background: linear-gradient(#743d44, #52242c);
  box-shadow: inset 0 1px #e0bf7866; font: 600 1rem var(--book); letter-spacing: .02em;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
button:hover, .button:hover { filter: brightness(1.12); }
button.secondary, .button.secondary { background: #fbf1da; color: var(--wine); border-color: var(--gold); box-shadow: none; }
button.danger { background: transparent; border-color: var(--danger); color: var(--danger); box-shadow: none; }
button.small { min-height: 34px; padding: .25rem .75rem; font-size: .9rem; }
button.icon { min-height: 32px; width: 32px; padding: 0; background: transparent; border-color: var(--edge); color: var(--muted); box-shadow: none; }
button:disabled { opacity: .45; cursor: not-allowed; filter: none; }
button.level-up { color: #2e1d12; border-color: #8a6524; background: linear-gradient(#ecc977, #c49444); box-shadow: inset 0 1px #fff3c8; }

input, select, textarea {
  width: 100%; min-height: 42px; padding: .5rem .65rem; border-radius: 3px;
  border: 1px solid #ac8954; background: var(--field); color: var(--ink); font: inherit;
}
input:focus, select:focus, textarea:focus { border-color: var(--wine-soft); outline: 0; box-shadow: 0 0 0 2px #b58a4366; }
select:disabled, input:disabled { background: #efe2c4; color: var(--muted); }
textarea { resize: vertical; display: block; }
input[type=checkbox] { width: auto; min-height: 0; accent-color: var(--wine); }
.field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.field[hidden] { display: none; }
.field + .field { margin-top: .75rem; }
.field + button, .field + .button { margin-top: .9rem; }
.field + h4 { margin-top: 1.1rem; }
.field-label { font-size: .82rem; font-weight: 600; color: var(--muted); }
.check { display: flex; align-items: center; gap: .5rem; }
.inline-form { display: flex; gap: .5rem; align-items: flex-end; margin-top: .75rem; }
.inline-form > input, .inline-form > select, .inline-form > textarea { flex: 1; }
.inline-form.wrap { flex-wrap: wrap; }
.inline-form.wrap > * { flex: 1 1 140px; }
@media (max-width: 520px) { .inline-form:not(.wrap) { flex-wrap: wrap; } .inline-form:not(.wrap) > * { flex: 1 1 100%; } }
.stage-codex-actions { flex-wrap: wrap; align-items: center; }
.stage-codex-actions > .button { flex: 0 1 auto !important; }

.stepper { display: inline-flex; flex: none; align-items: stretch; width: max-content; border: 1px solid #ac8954; border-radius: 3px; overflow: hidden; }
.stepper button { min-height: 40px; width: 40px; padding: 0; border: 0; border-radius: 0; background: #e9d4a8; color: var(--wine); box-shadow: none; font: 600 1.2rem/1 sans-serif; }
.stepper button:hover:not(:disabled) { background: #dfc28a; filter: none; }
.stepper input { width: 3.6rem; min-height: 40px; border: 0; border-radius: 0; text-align: center; background: var(--field); -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ---------------------------------------------------------------- rows and stats */
.grid-rows { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: .75rem; min-height: 52px; padding: .3rem 0; border-bottom: 1px dotted var(--edge); }
.row:last-child { border-bottom: 0; }
.row > span:first-child { flex: 1; min-width: 0; }
.row-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.row-card h3 { margin: 0; }
.total { min-width: 2.5rem; text-align: right; }

.stats { --cell: 130px; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .5rem; margin: .5rem 0; }
.stat { background: #f3e2bd; border: 1px solid #d9bf8a; border-radius: 3px; padding: .5rem .7rem; display: flex; flex-direction: column; }
.stat-label { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat strong { font: 700 1.2rem var(--book); color: var(--ink); min-width: 0; overflow-wrap: anywhere; }

.limbs { --cell: 150px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.limb { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.limb > strong { overflow-wrap: anywhere; }
.limb > strong small { color: var(--muted); font-weight: 400; font-size: .8rem; }
.limb-head { display: flex; align-items: center; justify-content: space-between; gap: .4rem; min-height: 26px; }
.limb-note { color: var(--muted); font-size: .75rem; }
.limb.danger .limb-note { color: var(--danger); font-weight: 600; }
/* Charakteransicht: below the Status on phones, beside it from 760px. There it
   takes the Status card's height (at least 250px) instead of stretching it. */
.overview-status { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: stretch; }
.figure-card { display: flex; flex-direction: column; min-width: 0; }
@media (min-width: 760px) {
  .overview-status { grid-template-columns: minmax(0, 1fr) clamp(190px, 27%, 250px); }
  .figure-card { height: 0; min-height: max(100%, 250px); }
}
.figure-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.figure-head h3 { margin: 0; }
.figure-stage { position: relative; flex: 1; width: 100%; min-height: 250px; padding: 0; color: inherit; cursor: zoom-in;
  background: radial-gradient(ellipse at 50% 42%, #fbf1da 0, #f3e2bd 58%, #e6cf9f 100%); background-size: cover; background-position: center; border: 1px solid #d9bf8a; border-radius: 3px; box-shadow: none; }
@media (min-width: 760px) { .figure-stage { min-height: 0; } }
button.figure-stage:hover { filter: none; border-color: var(--gold); }
.figure-stage svg { position: absolute; inset: .35rem; display: block; width: calc(100% - .7rem); height: calc(100% - .7rem); }
.figure-stage.large { flex: none; height: min(56dvh, 520px); cursor: default; }
.figure-edit-button { align-self: stretch; margin-top: .5rem; }
.figure-sheet-layout { display: grid; gap: .75rem; }
.figure-editor[hidden], .figure-details[hidden], .figure-sheet button[hidden] { display: none; }
.figure-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: .65rem; }
.figure-form-section { min-width: 0; }
.figure-form-section h4 { margin: 0 0 .45rem; font: 700 .95rem var(--book); color: var(--wine); }
.figure-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem .75rem; align-items: start; padding-top: .65rem; }
.figure-form-section .figure-form-grid { padding-top: 0; }
.figure-form-grid .field { min-width: 0; margin-top: 0; }
.figure-armour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.figure-controls select { width: 100%; }
.figure-colour input { width: 100%; height: 2.5rem; padding: .15rem; }
.figure-group { min-width: 0; border: 1px solid var(--edge); border-radius: 4px; padding: .35rem .65rem; }
.figure-group summary { cursor: pointer; font-weight: 700; color: var(--wine); }
.figure-form-grid p { margin: 0; }
.figure-editor-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
@media (max-width: 460px) { .figure-form-grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 760px) {
  .sheet.figure-sheet:has(.figure-editor:not([hidden])) { width: min(850px, calc(100vw - 2rem)); }
  .figure-sheet-layout:has(.figure-editor:not([hidden])) { grid-template-columns: minmax(220px, .8fr) minmax(320px, 1fr); align-items: start; }
}
@media (min-width: 600px) { .sheet.figure-sheet { width: min(560px, calc(100vw - 2rem)); } }
.figure-summary { margin: 0; font-size: .85rem; }
.status-adjust { display: inline-flex; gap: .25rem; }
.status-adjust button.icon { width: 26px; min-height: 26px; font: 600 1rem/1 sans-serif; }
.meter { position: relative; height: 7px; background: #dcc79c; border: 1px solid #c4a878; border-radius: 4px; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--ok); transition: width .25s ease-out; }
.meter.low span, .meter.danger span { background: var(--danger); }
.meter.warn span { background: var(--warn); }
/* Vergiftung climbs towards the Toxi-Save; the mark is the threshold. */
.meter.threshold { overflow: visible; }
.meter.threshold span { border-radius: 3px; background: linear-gradient(90deg, #6f7f3a, #8a9a3c); }
.meter.threshold.warn span { background: var(--warn); }
.meter.threshold.danger span { background: var(--danger); }
.meter-mark { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--wine); box-shadow: 0 0 0 1px #fbf1da; }
.meter.mind span { background: linear-gradient(90deg, #4a4f7a, #6b6fa3); }
.meter.mind.warn span { background: var(--warn); }
.meter.mind.danger span { background: var(--danger); }
.budget { margin: .25rem 0 .75rem; }
.budget-text { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; margin-bottom: .3rem; }
.budget .meter span { background: linear-gradient(90deg, #a3763c, #d3a75e); }
.budget.over .meter span { background: var(--danger); }
.budget.over strong { color: var(--danger); }
.sticky-budget { position: sticky; top: var(--sticky-top); z-index: 5; padding: .5rem .75rem; margin: 0 -.25rem; background: #f3e4c2f2; border: 1px solid var(--edge); border-radius: var(--radius); box-shadow: 0 4px 10px #5a3f2026; }
.sticky-budget .budget { margin: 0; }

/* ---------------------------------------------------------------- level */
.level-head { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-bottom: .5rem; }
.level-head h3 { margin: 0; flex: 1; }
.level-card p { font-size: .88rem; }

/* ---------------------------------------------------------------- equipment */
.equipment { display: grid; gap: .75rem; padding: .9rem 0; border-bottom: 1px dotted var(--edge); }
.equipment:first-of-type { padding-top: .25rem; }
.equipment:last-child { border-bottom: 0; padding-bottom: 0; }
.equipment.with-art { grid-template-columns: 64px 1fr; align-items: start; }
.equipment-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem .75rem; align-items: end; min-width: 0; }
.equipment-fields h4 { grid-column: 1 / -1; margin: 0; }
.equipment-fields h4 + .field { grid-column: 1 / -1; }
.equipment-fields .field + .field { margin-top: 0; }
@media (min-width: 640px) {
  .equipment-fields { grid-template-columns: minmax(0, 2fr) minmax(7.5rem, 1fr) auto; }
  .equipment-fields h4 + .field { grid-column: auto; }
  .equipment.with-art { grid-template-columns: 84px 1fr; }
}
.holster-buy { width: 100%; margin-top: .8rem; }
.holster-max { margin: .75rem 0 0; text-align: center; }
.quiver { margin-top: 1rem; padding-top: .85rem; border-top: 1px dotted var(--edge); }
.potion-bag { border-color: #8e6b45; background: linear-gradient(145deg, #fbefcf, #f3dfb5); }
.potion-bag-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .35rem; }
.potion-bag-head h3 { margin: 0; }
.potion-bag-head strong { display: block; margin-top: .15rem; color: var(--wine); font-size: .85rem; }
.potion-bag-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #f8e9c8; background: var(--wine); font-size: 1.5rem; }
/* Bag sizes: one card each, the slots drawn as little bottles. */
.potion-bag-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .5rem; margin: .8rem 0; }
.bag-option { position: relative; flex-direction: column; gap: .2rem; min-height: 0; padding: .75rem .5rem .6rem; white-space: normal;
  color: var(--ink); background: rgba(255,255,255,.45); border: 1px solid #b9935e; border-radius: 10px; box-shadow: none; font: inherit;
  transition: transform .15s, border-color .15s, box-shadow .15s; }
.bag-option:hover { filter: none; border-color: var(--wine-soft); transform: translateY(-1px); box-shadow: 0 5px 14px #5a3f2026; }
.bag-option strong { color: var(--wine); font: 700 1.1rem/1.2 var(--book); }
.bag-option small { color: var(--muted); font-size: .78rem; }
.bag-price { margin-top: .2rem; padding: .1rem .55rem; border-radius: 999px; background: #f3e2bd; color: var(--wine); font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.bag-option.selected { background: linear-gradient(160deg, #f9e6bb, #eed29a); border-color: var(--wine); box-shadow: inset 0 0 0 1px var(--wine); transform: none; cursor: default; }
.bag-option.selected .bag-price { color: #fff1d1; background: var(--wine); }
.bag-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; min-height: 1.5rem; max-width: 5.2rem; margin-bottom: .2rem; }
.bag-slots span { width: .62rem; height: .95rem; border: 1px solid #a9844e; border-radius: .3rem .3rem .2rem .2rem; background: rgba(255,255,255,.5); }
.bag-option.selected .bag-slots span, .bag-compare-side:last-child .bag-slots span { background: var(--wine-soft); border-color: var(--wine); }
.potion-bag-change { margin-top: .85rem; }
.potion-bag-change > summary { display: flex; align-items: center; min-height: 36px; width: max-content; color: var(--wine); font-weight: 600; cursor: pointer; }
.potion-bag-change .potion-bag-options { margin-bottom: 0; }
/* Purchase sheet: old and new bag, then the bill. */
.bag-compare { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; }
.bag-compare-side { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .7rem .5rem; text-align: center;
  background: #fbf1da; border: 1px solid var(--edge); border-radius: 10px; }
.bag-compare-side:last-child { background: #f7e3b8; border-color: var(--wine); }
.bag-compare-side small { color: var(--muted); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; }
.bag-compare-side strong { color: var(--wine); font: 700 1.1rem var(--book); }
.bag-compare-side > span:last-child { color: var(--muted); font-size: .8rem; }
.bag-compare-arrow { color: var(--gold); font-size: 1.4rem; }
.bag-bill { display: grid; gap: .35rem; padding: .7rem .85rem; background: #fbf1da; border: 1px solid var(--edge); border-radius: 10px; font-variant-numeric: tabular-nums; }
.bag-bill > div { display: flex; justify-content: space-between; gap: 1rem; }
.bag-bill > div span { color: var(--muted); }
.bag-bill .total { padding-top: .35rem; border-top: 1px dotted var(--edge); }
.bag-bill .total strong { color: var(--wine); }
.bag-bill .check { margin-top: .2rem; font-size: .88rem; }
.equipment-fields .field.wide { grid-column: 1 / -1; }
/* Overview: everything worn — weapons, armour, the potion hotbar and the load. */
.gear-overview-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; }
.gear-overview-head h3 { margin: 0; }
.armour-total { display: inline-flex; align-items: baseline; gap: .4rem; padding: .2rem .75rem; border-radius: 999px; color: #fff1d1; background: var(--wine); font: 700 1.15rem var(--book); }
.armour-total small { font: 600 .7rem "Segoe UI", system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase; opacity: .8; }
.gear-load { margin: .2rem 0 .4rem; }
.gear-load .budget-text strong { font-variant-numeric: tabular-nums; }
.gear-load .meter { height: 9px; }
.gear-load .meter span { background: linear-gradient(90deg, #a3763c, #d3a75e); }
.gear-load.ok .meter span { background: linear-gradient(90deg, #4f6b2f, #6f8f3a); }
.gear-load.warn .meter span { background: linear-gradient(90deg, #b8641a, #e08a2c); }
.gear-load.danger .meter span { background: linear-gradient(90deg, #8a2626, #b83a3a); }
.gear-load.danger .budget-text strong { color: var(--danger); }
.gear-load small { display: block; margin-top: .25rem; color: var(--muted); font-size: .78rem; }
.gear-group { margin-top: .9rem; }
.gear-group h4 { justify-content: space-between; margin-bottom: .45rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.gear-count { color: var(--wine); font-variant-numeric: tabular-nums; }
.gear-empty { margin: 0; }
.gear-list { --cell: 168px; display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.gear-piece { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: .3rem .6rem; padding: .55rem .65rem;
  background: #f3e2bd; border: 1px solid #d9bf8a; border-radius: 8px; }
.gear-piece.empty { background: transparent; border-style: dashed; }
.gear-piece.empty .gear-icon { opacity: .45; }
.gear-icon { width: 40px; height: 40px; object-fit: contain; }
.gear-icon.placeholder { display: grid; place-items: center; color: var(--muted); font-size: 1.1rem; }
.gear-piece-text { display: grid; min-width: 0; }
.gear-piece-text strong { color: var(--wine); font: 700 .98rem/1.2 var(--book); }
.gear-piece-text small { color: var(--muted); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gear-piece-value { min-width: 2rem; text-align: center; font: 700 1.25rem var(--book); color: var(--ink); font-variant-numeric: tabular-nums; }
.gear-piece.empty .gear-piece-value { color: var(--muted); }
.gear-piece .meter { grid-column: 1 / -1; height: 5px; }

/* Potions: a gem per bottle. The bottle (Stufe) and liquid (Art) come from
   labels.potionImage; the frame glows in the rarity colour of the Stufe. */
.potion-gem { position: relative; display: grid; place-items: center; width: 3.4rem; aspect-ratio: 1; border-radius: 12px;
  background: radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--potion) 38%, transparent), transparent 68%), linear-gradient(160deg, #3a2a24, #1a1210);
  border: 2px solid var(--rarity); box-shadow: 0 0 0 1px #0008, 0 0 12px color-mix(in srgb, var(--rarity) 45%, transparent), inset 0 0 10px #000a; }
.potion-gem img { width: 88%; height: 88%; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--potion) 70%, transparent)); }
.potion-gem.tier-5, .potion-gem.tier-6 { animation: potion-shine 2.6s ease-in-out infinite; }
@keyframes potion-shine {
  50% { box-shadow: 0 0 0 1px #0008, 0 0 20px color-mix(in srgb, var(--rarity) 75%, transparent), inset 0 0 10px #000a; }
}
.potion-tier { position: absolute; right: -6px; bottom: -6px; min-width: 1.35rem; padding: 0 .3rem; border-radius: 6px; color: #1a1210; background: var(--rarity);
  border: 1px solid #0009; font: 800 .68rem/1.25rem var(--book); text-align: center; letter-spacing: .02em; }
.hotbar-key { position: absolute; top: 3px; left: 5px; z-index: 1; color: #e9d7b0; font: 700 .68rem/1 "Segoe UI", system-ui, sans-serif; opacity: .7; text-shadow: 0 1px 1px #000; }

/* Overview hotbar: sockets like an action bar, on a transparent strip. */
.hotbar { display: flex; flex-wrap: wrap; gap: .45rem; }
.hotbar-slot { position: relative; display: grid; place-items: center; width: 4rem; height: 4rem; min-height: 0; padding: 0; border-radius: 12px;
  background: #0f0a09; border: 1px solid #4b3a2b; box-shadow: inset 0 0 10px #000; color: inherit; font: inherit; }
.hotbar-slot.empty::after { content: ""; width: 1.6rem; height: 1.6rem; border: 1px dashed #5d4a36; border-radius: 50%; }
button.hotbar-slot { cursor: pointer; transition: transform .12s; }
button.hotbar-slot:hover { filter: none; transform: translateY(-2px); }
button.hotbar-slot:active { transform: scale(.96); }
.hotbar-slot .potion-gem { width: 3.5rem; }
/* Mini drink button on the slot's lower left corner (the Stufe sits on the right). */
.hotbar-cell { position: relative; }
.hotbar-mini { position: absolute; left: -6px; bottom: -6px; z-index: 2; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; min-height: 0; padding: 0;
  border-radius: 50%; color: #1a1210; background: #e9d7b0; border: 1px solid #0009; box-shadow: 0 1px 3px #0008; }
.hotbar-mini:hover { filter: none; background: #fff1d1; }
.hotbar-mini:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
/* The slot sheet: the bottle in the slot, then the potions of the inventory. */
.potion-sheet-current { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .5rem .9rem; }
.potion-sheet-current > div { display: grid; gap: .1rem; min-width: 0; }
.potion-sheet-current strong { color: var(--wine); font: 700 1.1rem/1.2 var(--book); overflow-wrap: anywhere; }
.potion-sheet-current small { color: var(--muted); font-size: .82rem; }
.potion-sheet-current .potion-rarity { color: var(--ink); }
.potion-sheet-current > button { grid-column: 1 / -1; }
.potion-sheet-text { grid-column: 1 / -1; display: grid; gap: .35rem; }
.potion-sheet-text p { margin: 0; font-size: .92rem; line-height: 1.4; }
.potion-sheet-text .muted { font-size: .84rem; }
.potion-choice .potion-gem { width: 2.6rem; }
.potion-targets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin: 0; padding: 0; border: 0; }
.potion-targets legend { grid-column: 1 / -1; padding: 0; margin-bottom: .4rem; }
.potion-target { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: .35rem; border: 1px solid var(--edge); border-radius: 8px; cursor: pointer; font-weight: 600; }
.potion-target input { position: absolute; opacity: 0; pointer-events: none; }
.potion-target:has(input:checked) { color: #fff1d1; background: var(--wine); border-color: var(--wine); }
.potion-target:has(input:focus-visible) { box-shadow: 0 0 0 2px #b58a4399; }
/* Status card: running potion effects and the poison DoT. */
.potion-effects { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.potion-effects .chip.danger { color: var(--danger); border-color: var(--danger); }

/* Ausrüstung tab: the pouch as an inventory panel. */
.potion-bag-head > div { flex: 1; min-width: 0; }
.potion-bag-head .bag-slots { max-width: 7rem; margin: 0; }
.bag-slots span.filled { background: var(--wine-soft); border-color: var(--wine); }
/* Transparent panel; the slots keep their dark sockets. */
.potion-pouch { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .6rem; margin-top: .85rem; }
.potion-pouch.preview { grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr)); }
.potion-slot { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: center; gap: .55rem .75rem; min-width: 0;
  min-height: 7rem; padding: .7rem; border-radius: 12px; color: #f3e6c8; background: #120c0b; border: 1px solid #4b3a2b; box-shadow: inset 0 0 12px #000; }
.potion-slot.filled { border-color: color-mix(in srgb, var(--rarity) 55%, #4b3a2b);
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--potion) 22%, transparent), transparent 60%), #120c0b; }
.potion-pouch.preview .potion-slot { min-height: 4rem; grid-template-columns: 1fr; grid-template-rows: 1fr; place-items: center; padding: .4rem; }
.potion-slot-open { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .75rem; width: 100%; min-width: 0; min-height: 0; padding: 0;
  color: inherit; text-align: left; white-space: normal; background: none; border: 0; border-radius: 10px; box-shadow: none; cursor: pointer; }
.potion-slot-open:hover { filter: brightness(1.15); }
.potion-slot-open:focus-visible { outline: 2px solid var(--rarity); outline-offset: 3px; }
.potion-slot-info { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.potion-slot-info strong { font: 700 1.05rem/1.2 var(--book); color: #fff4dc; overflow-wrap: anywhere; }
.potion-slot-info small { color: #c9b590; font-size: .78rem; line-height: 1.3; overflow-wrap: anywhere; }
.potion-rarity { color: var(--rarity); font: 700 .72rem/1.2 "Segoe UI", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.potion-slot-actions { grid-column: 1 / -1; display: flex; gap: .4rem; }
.potion-slot-actions button { flex: 1 1 0; min-width: 0; min-height: 36px; padding: .3rem .5rem; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; }
.potion-slot-actions .secondary { color: #e9d7b0; background: #ffffff0d; border-color: #5d4a36; }
.potion-drink { color: #1a1210; background: var(--rarity); border-color: #0009; font-weight: 700; }
.potion-socket { display: grid; place-items: center; width: 3.4rem; aspect-ratio: 1; border-radius: 12px; border: 1px dashed #5d4a36; background: #0b0706; }
.potion-socket::after { content: ""; width: 1.4rem; height: 1.4rem; border: 1px dashed #5d4a36; border-radius: 50%; }
.potion-slot.empty select { min-width: 0; color: #e9d7b0; background-color: #ffffff0d; border-color: #5d4a36; }
.potion-slot.empty select option { color: var(--ink); background: var(--field); }
.potion-slot.empty select:disabled { opacity: .55; }
.potion-note { margin: .6rem 0 0; }
@media (prefers-reduced-motion: reduce) { .potion-gem { animation: none !important; } }
.armour-types { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.armour-type { flex-direction: column; gap: 2px; min-height: 0; padding: .3rem .1rem .25rem; white-space: normal;
  background: #f6e8c8; color: var(--muted); border: 1px solid var(--edge); box-shadow: none; font: 600 .72rem/1.1 "Segoe UI", system-ui, sans-serif; }
.armour-type img { width: 28px; height: 28px; }
.armour-type span { max-width: 100%; overflow-wrap: break-word; hyphens: manual; }
.armour-type:hover { filter: none; border-color: var(--gold); }
.armour-type.selected { color: var(--wine); background: #f7e3b8; border-color: var(--wine); box-shadow: inset 0 0 0 1px var(--wine); }
.armour-type:disabled { opacity: .55; }
.armour-type.selected:disabled { opacity: .9; }
.armour-icon { width: 22px; height: 22px; flex: none; vertical-align: middle; }
.ledger .armour-icon { width: 20px; height: 20px; margin-right: .35rem; }
.weapon-art { display: grid; place-items: center; width: 100%; aspect-ratio: 1; padding: 6px; background: #f6e8c8; border: 1px solid var(--edge); border-radius: 3px; box-shadow: inset 0 0 12px #b58a4333; }
.weapon-art.placeholder { color: #c9ad78; font-size: 1.6rem; }

/* ---------------------------------------------------------------- portraits and races */
.portrait { display: block; width: 100%; aspect-ratio: 5 / 6; object-fit: cover; border: 1px solid #8a6a3a; border-radius: 2px; background: #e6cfa2; }
.portrait.placeholder { display: grid; place-items: center; color: #b89a64; font-size: 2rem; }
.portrait.small { width: 64px; flex: none; }
.portrait.avatar { width: 64px; flex: none; box-shadow: 0 0 0 2px #fbf1da, 0 0 0 3px var(--gold); }
.race-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: .75rem; }
@media (max-width: 520px) {
  .race-grid { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .race { padding: .4rem; gap: .4rem; }
  .race-name { font-size: 1rem; }
  .race-body { font-size: .8rem; }
  .race-ability { font-size: .78rem; }
  .race-stat strong { font-size: .92rem; }
  .race-meta strong { font-size: .8rem; }
}
.race { display: flex; flex-direction: column; gap: .6rem; padding: .6rem; text-align: left; cursor: pointer; font: inherit; color: inherit; background: #fbf1dab3; box-shadow: inset 0 0 0 1px #fff6e2a0; white-space: normal; min-height: 0; }
.race:hover { filter: none; }
.race.selected { border-color: var(--wine); background: #f7e3b8; box-shadow: 0 0 0 2px var(--wine), 0 4px 14px #52242c40; }
.race-body { display: flex; flex-direction: column; gap: .25rem; padding: 0 .15rem; }
.race-name { font: 700 1.15rem var(--book); color: var(--wine); }
.race-ability { font-size: .88rem; font-style: italic; }
/* Race numbers: a fixed 3 × 2 grid of small cells, label above value, so the
   columns line up on every card and every width. */
.race-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin-top: .15rem; }
.race-stat, .race-meta > span { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: .15rem 0 .2rem; background: #f3e2bd; border: 1px solid #d9bf8a; border-radius: 3px; line-height: 1.15; }
.race-stat small, .race-meta small { font-size: .68rem; color: var(--muted); letter-spacing: .02em; }
.race-stat strong, .race-meta strong { font: 700 1rem var(--book); color: var(--ink); }
.race-stat.up strong { color: var(--ok); }
.race-stat.down strong { color: var(--danger); }
.race-meta { display: grid; grid-template-columns: 1.6fr 1fr; gap: 3px; }
.race-meta strong { font-size: .9rem; }
.summary-head { display: flex; align-items: center; gap: .9rem; margin-bottom: .75rem; }
.summary-head h3 { margin: 0; }

/* ---------------------------------------------------------------- editor */
.editor-head { align-items: center; flex-wrap: nowrap; }
.character-portrait-control { position: relative; width: 64px; flex: none; }
.character-portrait-preview { display: block; }
.character-portrait-edit { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 28px; height: 28px; min-height: 0; padding: 0;
  border: 2px solid var(--paper-light); border-radius: 50%; background: var(--wine); color: #fff1d1; box-shadow: 0 2px 6px #110b0955; font: 700 1.15rem/1 sans-serif; }
.character-portrait-edit:hover { background: var(--wine-soft); }
.character-portrait-edit:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.editor-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.editor-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.editor-head .title-input { display: block; width: 100%; min-height: 40px; resize: none; overflow: hidden; padding: .2rem .4rem; font: 700 1.45rem/1.25 var(--book); color: var(--wine); background: transparent; border-color: transparent; }
.editor-head .title-input:hover:not(:disabled) { border-color: var(--edge); }
.editor-head .title-input:focus { border-color: var(--wine-soft); background: var(--field); }
.editor-head .title-input:disabled { background: transparent; color: var(--wine); }
@media (max-width: 520px) { .editor-head .title-input { font-size: 1.15rem; } }

.tabs { display: flex; gap: 3px; overflow-x: auto; margin-bottom: var(--gap); padding: 0 2px; border-bottom: 1px solid #b3915c; scrollbar-width: thin; }
.tabs button {
  flex: none; min-height: 40px; padding: .4rem .9rem; border: 1px solid #684328; border-bottom: 0; border-radius: 3px 3px 0 0;
  color: #f5e4c2; background: linear-gradient(#48281266, #28170c99), url("/img/wood.jpg") center / 180px 110px;
  box-shadow: inset 0 1px #e7c08066; text-shadow: 0 1px 2px #211209; font: 700 .95rem var(--book);
}
.tabs button.active { color: var(--wine); background: linear-gradient(#fcf0d6, var(--paper-light)); border-color: #ae8446; box-shadow: inset 0 3px #bd8d46; text-shadow: none; }
.tabs button[hidden] { display: none; }

/* Character songbook: compact parchment rows with a separate combat marker. */
.music-book { padding: 1rem; }
.music-header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .8rem; }
.music-header h3 { margin-bottom: .15rem; }
.music-header p { margin: 0; font-size: .86rem; }
.music-header > button { flex: none; }
.music-list { display: grid; gap: .45rem; }
.music-row { display: flex; align-items: center; gap: .75rem; min-width: 0; padding: .5rem .65rem; border: 1px solid var(--edge); border-radius: var(--radius); background: #fff9e9a8; transition: background .15s, opacity .15s; }
.music-row.used { background: #e6ddc9c4; border-color: #b5a88c; }
.music-row.used .music-details > summary strong { color: #655b4b; }
.music-details { flex: 1; min-width: 0; }
.music-details > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; min-height: 34px; padding: .18rem 0; }
.music-details > summary strong { color: var(--wine); font: 700 1.04rem/1.25 var(--book); overflow-wrap: anywhere; }
.music-meta { color: var(--muted); font-size: .82rem; }
.music-expanded { padding: .25rem 0 .15rem 1.15rem; font-size: .9rem; }
.music-expanded p { white-space: pre-wrap; overflow-wrap: anywhere; }
.music-edit-actions, .music-usage { display: flex; align-items: center; gap: .4rem; }
.music-usage { flex: none; }
.music-used-label { color: #615949; font-size: .78rem; font-weight: 700; }
.music-add { margin-top: .75rem; }
.music-empty { margin: .4rem 0; }
.music-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
@media (max-width: 599px) {
  .music-header { align-items: flex-start; }
  .music-row { align-items: stretch; flex-direction: column; gap: .25rem; }
  .music-usage { justify-content: flex-end; }
  .music-usage button { min-height: 40px; }
  .music-form-grid { grid-template-columns: 1fr 1fr; }
  .music-form-grid > :last-child { grid-column: 1 / -1; }
}

.badge { display: inline-block; padding: .12rem .55rem; border-radius: 999px; background: #ead2a2; border: 1px solid #cfae73; color: #5d4527; font: 600 .8rem/1.4 "Segoe UI", system-ui, sans-serif; }
.level-badge { background: var(--wine); border-color: #3a1a20; color: #f6dda1; }
.status-pending { color: var(--warn); }
.status-approved { color: var(--ok); }
.status-rejected { color: var(--danger); }
.save-status { font-size: .85rem; color: var(--muted); }
.save-status.ok { color: var(--ok); }
.save-status.busy { color: var(--warn); }
.save-status.error { color: var(--danger); }

.banner { background: #f6e6c4; border: 1px solid var(--edge); border-left: 4px solid var(--gold); border-radius: 3px; padding: .75rem 1rem; margin: 0 0 var(--gap); }
.banner.error { border-left-color: var(--danger); }
.banner.ok { border-left-color: var(--ok); }
.banner p { margin: 0 0 .5rem; }
.warnings { margin: 0 0 .75rem; padding: .6rem 1rem .6rem 2rem; background: #f4dfb0; border: 1px solid #c9a052; border-radius: 3px; color: var(--warn); }
.code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.1rem; letter-spacing: .05em; background: var(--field);
  border: 1px dashed var(--wine-soft); border-radius: 3px; padding: .8rem 1rem; word-break: break-all; user-select: all; text-align: center; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .3rem .2rem .7rem; background: #ead2a2; border: 1px solid #cfae73; border-radius: 999px; }
.chip { max-width: 100%; overflow-wrap: anywhere; }
.characteristic-tags { display: grid; gap: .4rem; margin-top: .7rem; padding-top: .7rem; border-top: 1px dotted var(--edge); }
.characteristic-tag-group { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .85rem; }
.characteristic-tag-group > strong { margin-right: .15rem; color: var(--muted); }
.characteristic-tag { padding: .15rem .55rem; border-radius: 8px; line-height: 1.3; }
.chip button { flex: none; min-height: 32px; width: 32px; padding: 0; border-radius: 50%; background: transparent; border: 0; color: var(--muted); box-shadow: none; }
.ledger { list-style: none; margin: 0 0 .5rem; padding: 0; }
.ledger li { display: flex; align-items: center; gap: .75rem; padding: .45rem 0; border-bottom: 1px dotted var(--edge); flex-wrap: wrap; }
.ledger li > span:first-child { flex: 1; }
.ledger-history { margin-top: .5rem; }
.ledger-history > summary { display: flex; align-items: center; min-height: 40px; color: var(--muted); }
.ledger-history > summary::before { content: "▸"; margin-right: .4rem; transition: transform .15s; }
.ledger-history[open] > summary::before { transform: rotate(90deg); }
.item { border-bottom: 1px dotted var(--edge); padding: .35rem 0; }
.item summary { cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; min-height: 36px; align-items: center; }
details > summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }
details.card > summary, .archived > summary { display: flex; align-items: center; min-height: 40px; font: 700 1.05rem var(--book); color: var(--wine); }
details.card > summary::before, .archived > summary::before { content: "▸"; margin-right: .5rem; transition: transform .15s; }
details[open].card > summary::before, details[open].archived > summary::before { transform: rotate(90deg); }
details.card[open] > summary { margin-bottom: .6rem; }
.archived > summary { color: #f0dfb8; margin-bottom: .75rem; }
.view .archived > summary { color: var(--wine); }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; margin-bottom: .5rem; }
.table th, .table td { text-align: left; padding: .4rem; border-bottom: 1px dotted var(--edge); }
.table th { font-family: var(--book); color: var(--wine); }
.table .actions { width: 1%; text-align: right; }
@media (max-width: 600px) {
  .table.stacked thead { display: none; }
  .table.stacked, .table.stacked tbody { display: block; }
  .table.stacked tr { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: .2rem .75rem; padding: .55rem 2.5rem .55rem 0; border-bottom: 1px dotted var(--edge); }
  .table.stacked td { display: flex; flex-direction: column; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
  .table.stacked td::before { content: attr(data-label); font-size: .75rem; color: var(--muted); }
  .table.stacked td.actions { position: absolute; top: .55rem; right: 0; width: auto; }
}

.progress { display: flex; gap: .25rem; list-style: none; padding: 0; margin: 0 0 var(--gap); overflow-x: auto; counter-reset: step; }
.progress li { flex: 1; min-width: 6.5rem; padding: .45rem .5rem 0; border-top: 3px solid #cdb07a; font: 600 .85rem var(--book); color: var(--muted); counter-increment: step; }
.progress li::before { content: counter(step) ". "; }
.progress li.done { border-color: var(--ok); }
.progress li.current { border-color: var(--wine); color: var(--wine); }
.wizard-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--edge); }

.submission-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.submission .card { margin-top: .75rem; background: #f3e2bd; }
.campaign-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-bottom: var(--gap); }
.campaign-tabs button { justify-content: flex-start; min-height: 58px; padding: .55rem .8rem; text-align: left; background: #ead5aa; color: var(--wine); border-color: var(--edge); box-shadow: inset 0 1px #fff7e0; }
.campaign-tabs button > span:not(.campaign-tab-icon) { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.campaign-tabs button strong { font-size: 1rem; }
.campaign-tabs button small { margin-top: .2rem; color: var(--muted); font: 400 .7rem/1.2 "Segoe UI", sans-serif; white-space: normal; }
.campaign-tabs button.active { background: linear-gradient(#743d44, #52242c); color: #fff1d1; border-color: #3a1a20; box-shadow: inset 0 1px #e0bf7866; }
.campaign-tabs button.active small { color: #ead4ad; }
.campaign-tab-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 50%; font-size: 1.15rem; }
.campaign-section { min-width: 0; }
.campaign-page-head h2 { min-width: 0; overflow-wrap: anywhere; }
.campaign-location { display: flex; align-items: center; gap: 1rem; min-width: 0; overflow: hidden; margin-bottom: var(--gap); padding: .55rem .9rem .55rem .55rem; border-color: var(--gold); background: linear-gradient(100deg, #f2dcad, #fbf1da 60%); }
.campaign-location[hidden] { display: none; }
.campaign-location-art { display: block; flex: none; width: clamp(84px, 14vw, 150px); height: 78px; border-radius: 8px; object-fit: cover; }
.campaign-location-copy { display: flex; flex-direction: column; min-width: 0; }
.campaign-location-copy strong { color: var(--wine); font: 700 clamp(1.1rem, 2vw, 1.5rem)/1.2 var(--book); overflow-wrap: anywhere; }
.campaign-location-copy > span { margin-top: .15rem; color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.campaign-app-links-mobile { display: none; }
@media (max-width: 899px) {
  .campaign-codex-head-link { display: none; }
  .campaign-app-links-mobile { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--gap); }
}
/* Collapsible sections of the camp: title left, a short count right. */
.panel > summary { gap: .75rem; }
.panel-title { flex: 1; min-width: 0; }
.panel-note { flex: none; font: 400 .78rem/1.2 "Segoe UI", sans-serif; }
.panel-body { min-width: 0; }
.panel-body > .stack { gap: .75rem; min-width: 0; }
.panel .session-notes { background: #f3e2bd; box-shadow: none; }
.session-notes h3 { margin: 0 0 .35rem; }
.session-notes p { margin: 0 0 .7rem; overflow-wrap: anywhere; }
.session-notes .button { display: inline-flex; }
/* The party stands apart: wine-red top edge and a darker heading band. */
.party-panel { border-top: 4px solid var(--wine); background: linear-gradient(#f2dcb0e6, #fbf1dab3 5rem); }
.party-panel > summary { font-size: 1.2rem; }
.party-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: .75rem; }
.party-card { margin: 0; }
.party-card p { margin: .45rem 0 0; }
a.party-card { display: block; color: inherit; text-decoration: none; border-color: var(--gold); transition: border-color .15s, box-shadow .15s; }
a.party-card:hover { border-color: var(--wine); box-shadow: 0 0 0 1px var(--gold), 0 4px 12px #5a3f2033; }
.party-open { display: block; margin-top: .6rem; padding-top: .5rem; border-top: 1px dotted var(--edge); color: var(--wine); font: 700 .9rem var(--book); text-align: right; }
.downtime-head { margin-bottom: .75rem; }
.campaign-lower { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; min-width: 0; }
.campaign-lower > * { min-width: 0; }
.campaign-lower .ledger li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 900px) {
  .campaign-lower { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .campaign-lower > .members { grid-column: 2; grid-row: 1; }
  .campaign-lower > .diary { grid-column: 1; grid-row: 1 / span 2; }
  .campaign-lower > .history { grid-column: 2; grid-row: 2; }
}
.downtime-head, .city-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.downtime-head h3, .downtime-head p, .city-head h3, .city-head p { margin: 0; }
.work-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.work-card h3, .work-card p { margin: 0; }
.activity-count { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; color: #fff1d1; background: var(--wine); font: 700 1.35rem var(--book); }
.activity-grid { display: flex; flex-direction: column; gap: .75rem; }
.activity-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; align-items: start; }
.activity-projects { padding-top: .75rem; border-top: 1px dotted var(--edge); }
@media (min-width: 900px) { .activity-routine { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 620px) { .activity-group { grid-template-columns: minmax(0, 1fr); } }
.activity-card { align-self: start; padding: .75rem; border: 1px solid var(--edge); border-radius: 3px; background: #f3e2bd; box-shadow: inset 0 0 0 1px #fff6e266; }
.activity-card > summary { display: flex; align-items: center; gap: .65rem; cursor: pointer; color: var(--wine); }
.activity-card > summary::after { content: "+"; margin-left: auto; font: 700 1.25rem/1 var(--book); }
.activity-card[open] > summary::after { content: "−"; }
.activity-environment { margin: .6rem 0; }
.activity-card > summary > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.activity-card > summary small { margin-top: .1rem; font: 400 .72rem/1.2 "Segoe UI", sans-serif; }
.activity-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 1px solid var(--gold); border-radius: 50%; background: #f8e8c6; }
.activity-card[open] > summary { margin-bottom: .75rem; padding-bottom: .65rem; border-bottom: 1px dotted var(--edge); }
.activity-card > .field { margin-top: .6rem; }
.activity-card > summary + .field { margin-top: 0; }
.activity-card > button { display: flex; margin: .75rem 0 0 auto; }
.alchemy-card { container-type: inline-size; }
.alchemy-card[open] { border-color: var(--gold); background: linear-gradient(145deg, #f7e9ca, #ecd7ab); }
.alchemy-workbench { min-width: 0; }
.alchemy-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
.alchemy-side { min-width: 0; display: flex; flex-direction: column; gap: .7rem; }
.alchemy-step { min-width: 0; padding: .75rem; border: 1px solid #bca37a; border-radius: 8px; background: #fbf1d9c9; box-shadow: 0 2px 8px #4e371519, inset 0 0 0 1px #fff6e280; }
.alchemy-step h4 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .35rem; color: var(--wine); }
.alchemy-step-number { display: inline-grid; flex: none; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8d6a3e, var(--wine));
  border: 1px solid var(--gold); color: #fff8e5; font: 700 .8rem/1 sans-serif; box-shadow: 0 1px 3px #4e371540; transition: background .2s, transform .2s; }
.alchemy-step-number.done { background: radial-gradient(circle at 35% 30%, #86a95a, var(--ok)); transform: scale(1.08); }
.alchemy-step-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .4rem; }
.alchemy-step-heading h4 { margin: 0; }
.alchemy-step-heading select { max-width: 12rem; }
.alchemy-step .field { margin: .35rem 0; }

/* Plants as inventory tiles: a dark socket framed in the rarity colour of the Potenz. */
.alchemy-gem { position: relative; display: grid; flex: none; place-items: center; width: 3rem; aspect-ratio: 1; border-radius: 10px;
  background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--rarity) 30%, transparent), transparent 70%), linear-gradient(160deg, #3a2a24, #1a1210);
  border: 2px solid var(--rarity); box-shadow: 0 0 0 1px #0008, 0 0 9px color-mix(in srgb, var(--rarity) 40%, transparent), inset 0 0 8px #000a; }
.alchemy-gem img { width: 82%; height: 82%; filter: drop-shadow(0 1px 2px #000c); }
.alchemy-gem.tier-5, .alchemy-gem.tier-6 { animation: potion-shine 2.6s ease-in-out infinite; }
.alchemy-gem-count { position: absolute; right: -7px; bottom: -7px; padding: 0 .3rem; border-radius: 6px; color: #f3e6c8; background: #1a1210;
  border: 1px solid var(--rarity); font: 700 .66rem/1.15rem "Segoe UI", system-ui, sans-serif; }
.alchemy-pips { display: flex; gap: 4px; margin: .25rem 0 .2rem 2px; }
.alchemy-pips i { width: .5rem; height: .5rem; transform: rotate(45deg); border: 1px solid #8d7653; background: #e9d9b4; }
.alchemy-pips i.on { border-color: #0007; background: var(--rarity); box-shadow: 0 0 4px color-mix(in srgb, var(--rarity) 70%, transparent); }

.alchemy-plants { display: grid; gap: .5rem; max-height: 25rem; overflow-y: auto; padding: .2rem .35rem .45rem .15rem; }
.alchemy-plant { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .3rem .7rem; align-items: center; padding: .55rem .6rem;
  border: 1px solid var(--edge); border-left: 4px solid var(--rarity); border-radius: 8px; background: #fff9e8; transition: transform .12s, box-shadow .12s; }
.alchemy-plant:hover { transform: translateY(-1px); box-shadow: 0 3px 10px #4e371526; }
.alchemy-plant.selected { border-color: var(--ok); border-left-color: var(--ok); background: linear-gradient(90deg, #e6efd2, #fff9e8 70%); box-shadow: 0 0 0 2px #4f6b2f40; }
.alchemy-plant strong, .alchemy-plant small { display: block; overflow-wrap: anywhere; }
.alchemy-plant strong { font: 700 1rem/1.2 var(--book); color: var(--ink); }
.alchemy-plant small { color: var(--muted); font-size: .76rem; }
.alchemy-plant details { grid-column: 1 / -1; color: var(--muted); font-size: .8rem; }
.alchemy-plant details ul { margin: .3rem 0 0; padding-left: 1.25rem; }
.alchemy-plant button, .alchemy-slot button { padding: .35rem .55rem; min-height: 36px; }
.alchemy-plant.selected button:disabled { color: var(--ok); border-color: var(--ok); opacity: 1; }

/* The cauldron: two ingredient sockets above a meter of the six Stufen. */
.alchemy-cauldron { background: radial-gradient(120% 80% at 50% 0%, #fff6dfcc, transparent 70%), #f3e2bdcc; }
.alchemy-slots { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: .4rem; }
.alchemy-plus { align-self: center; color: var(--gold); font: 700 1.5rem/1 var(--book); text-shadow: 0 1px 0 #fff8; }
.alchemy-slot { display: flex; flex-direction: column; align-items: center; gap: .25rem; min-width: 0; padding: .6rem .45rem; text-align: center;
  border: 1px dashed var(--gold); border-radius: 10px; background: #f8e9c7; }
.alchemy-slot.filled { border-style: solid; border-color: var(--ok); background: #fbf3dc; }
.alchemy-slot .alchemy-gem { width: 3.4rem; }
.alchemy-socket { display: grid; place-items: center; width: 3.4rem; aspect-ratio: 1; border-radius: 10px; border: 1px dashed #5d4a36; background: #1a1210; box-shadow: inset 0 0 10px #000; }
.alchemy-socket::after { content: "+"; color: #6d5840; font: 700 1.3rem/1 var(--book); }
.alchemy-slot strong, .alchemy-slot span { overflow-wrap: anywhere; }
.alchemy-slot.empty strong { color: var(--muted); font-weight: 600; }
.alchemy-slot > span:not(.alchemy-gem):not(.alchemy-socket) { font-size: .8rem; }
.alchemy-meter { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; margin-top: .7rem; }
.alchemy-meter span { position: relative; isolation: isolate; overflow: hidden; height: 1.35rem; border-radius: 4px; border: 1px solid #bca37a; background: #e9d9b4;
  color: #8d7653; font: 700 .68rem/1.3rem var(--book); text-align: center; }
.alchemy-meter span::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: 0; background: var(--rarity); transition: width .3s; }
.alchemy-meter span.half::before { width: 50%; }
.alchemy-meter span.full::before { width: 100%; }
.alchemy-meter span.full, .alchemy-meter span.half { color: #1a1210; border-color: #0005; }
.alchemy-meter span.reach { box-shadow: 0 0 0 1px var(--ok), 0 0 6px color-mix(in srgb, var(--rarity) 70%, transparent); }
.alchemy-potency { margin: .55rem 0 0; color: var(--ok); font-weight: 600; text-align: center; }
.alchemy-quantity { display: inline-flex; align-items: center; gap: .8rem; }
.alchemy-quantity button { width: 38px; height: 38px; padding: 0; }
.alchemy-quantity strong { min-width: 1.6rem; text-align: center; font: 700 1.2rem var(--book); }

/* Brew preview: the expected bottle beside a checklist of what is still missing. */
.alchemy-preview { display: flex; align-items: flex-start; gap: .8rem; margin-top: .65rem; padding: .7rem; border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; background: #f2e1ba; }
.alchemy-preview > div { min-width: 0; }
.alchemy-preview .potion-gem { flex: none; transition: filter .25s, opacity .25s; }
.alchemy-preview .potion-gem.locked { filter: grayscale(1) brightness(.75); opacity: .65; animation: none; }
.alchemy-preview p { margin: .2rem 0; padding-left: 1.2rem; text-indent: -1.2rem; }
.alchemy-preview p::before { content: "○"; display: inline-block; width: 1.2rem; text-indent: 0; color: var(--muted); }
.alchemy-preview p.ok::before { content: "✓"; color: var(--ok); font-weight: 700; }
.alchemy-preview p.bad::before { content: "✗"; color: var(--danger); font-weight: 700; }
.alchemy-preview small { display: block; margin-top: .3rem; color: var(--muted); }
.alchemy-step > button:last-child { margin-top: .7rem; width: 100%; }
.alchemy-brew { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; font: 700 1.02rem var(--book); letter-spacing: .02em; }
.alchemy-brew > span { font-size: 1.2rem; }
.alchemy-brew.ready { color: #fff8e5; background: linear-gradient(180deg, #6d8c3e, var(--ok)); border-color: #2f4219; animation: alchemy-ready 2.2s ease-in-out infinite; }
.alchemy-brew.busy > span { animation: alchemy-bubble .8s ease-in-out infinite; }
.alchemy-feedback { margin: .5rem 0 0; color: var(--danger); }
.alchemy-feedback:empty { display: none; }
@keyframes alchemy-ready { 50% { box-shadow: 0 0 0 3px #4f6b2f33, 0 0 14px #86a95a99; } }
@keyframes alchemy-bubble { 50% { transform: translateY(-3px) rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .alchemy-gem, .alchemy-brew, .alchemy-brew > span { animation: none !important; } }
@container (min-width: 620px) { .alchemy-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.work-fields { display: grid; grid-template-columns: minmax(12rem, 1fr) auto; gap: .6rem; align-items: end; }
.work-fields .field { margin: 0; }
.city-head { position: relative; overflow: hidden; justify-content: flex-start; min-height: 108px; padding: 1.15rem 1.25rem; background: linear-gradient(105deg, #f8e9c8e8, #e4c68ddd); border-top: 3px solid var(--wine); }
.city-head::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 38%; background: radial-gradient(circle at 70% 30%, #b58a4333, transparent 62%); pointer-events: none; }
.place-mark { display: grid; place-items: center; flex: none; width: 58px; height: 64px; border: 2px solid var(--gold); border-radius: 5px 5px 20px 20px; color: #f7dfa7; background: linear-gradient(#743d44, #52242c); box-shadow: inset 0 0 0 2px #f0cc7b55; font: 700 2rem/1 var(--book); }
.city-title { flex: 1; min-width: 0; }
.city-title h3 { font-size: 1.45rem; }
.eyebrow { display: block; margin-bottom: .15rem; color: var(--wine); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.city-facts { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; min-width: 70px; padding-left: 1rem; border-left: 1px solid var(--edge); }
.city-facts strong { font: 700 1.65rem/1 var(--book); color: var(--wine); }
.city-facts small { margin-top: .2rem; }
.city-tools { display: grid; gap: .5rem; }
.city-tools .banner { margin: 0; }
.city-tools .field { margin: 0; }
.city-search { min-width: 0; }
.city-search .field { position: relative; }
.city-search input { padding-left: 2.3rem; }
.city-search .field::after { content: "⌕"; position: absolute; left: .75rem; bottom: .48rem; color: var(--muted); font: 1.35rem/1 var(--book); pointer-events: none; }
.city-search-result { display: block; min-height: 1.25rem; margin-top: .3rem; }
.city-purse { position: sticky; top: var(--sticky-top); z-index: 5; display: flex; align-items: center; gap: .75rem; width: fit-content; max-width: 100%; padding: .55rem .9rem; border: 1px solid var(--gold); border-radius: 999px; background: var(--paper-light); box-shadow: 0 6px 20px #3c261f26; }
.city-purse-icon { display: grid; place-items: center; flex: none; width: 2.15rem; height: 2.15rem; border-radius: 50%; background: var(--wine-fill, var(--wine)); color: var(--gold-light); font-size: 1.2rem; }
.city-purse-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.city-purse-copy small { overflow: hidden; color: var(--muted); font: 600 .68rem/1.2 "Segoe UI", sans-serif; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.city-purse-copy strong { color: var(--wine); font: 700 1.2rem/1.2 var(--book); font-variant-numeric: tabular-nums; }
/* Arbeiten and Markt & Händler: same heading, then their cards. */
.city-section { display: flex; flex-direction: column; gap: .6rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 0 .15rem; }
.section-heading h3 { margin: 0; }
/* The ▸ is a flex item too: the name grows next to it, the count stays right. */
.merchant > summary { gap: .25rem .75rem; }
.merchant > summary > span:first-of-type { flex: 1; display: flex; flex-direction: column; min-width: 0; text-align: left; }
.merchant > summary > span:first-of-type small { margin-top: .1rem; font: 400 .75rem/1.2 "Segoe UI", sans-serif; }
.merchant-count { flex: none; }
.shop-list { display: grid; gap: .25rem; }
.shop-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 4.5rem auto; gap: .55rem; align-items: center; padding: .5rem 0; border-bottom: 1px dotted var(--edge); }
.shop-row span { display: flex; flex-direction: column; min-width: 0; }
.shop-row input { min-height: 40px; }
.shop-row.sold-out { opacity: .55; }
.shop-row[hidden], .merchant[hidden] { display: none; }
.shop-empty { margin: .7rem 0 0; }
.city-work { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(0, 2fr); gap: .75rem 1.25rem; align-items: end; }
.city-work > p { margin: 0; align-self: center; }
.city-work-head { display: flex; align-items: center; gap: .65rem; align-self: center; }
.city-work-head > span:last-child { display: flex; flex-direction: column; min-width: 0; color: var(--wine); }
.city-work-head small { font: 400 .78rem/1.2 "Segoe UI", sans-serif; }
.live-condition > summary { justify-content: space-between; gap: .75rem; }
.live-condition > summary small { margin-left: auto; font: 400 .78rem/1.2 "Segoe UI", sans-serif; text-align: right; }
.live-condition .limbs { margin-top: .85rem; }
.condition-alert { color: var(--danger); }
.empty-place { text-align: center; padding-block: 2rem; }
@media (max-width: 560px) {
  .campaign-tabs button { min-height: 52px; padding: .45rem .55rem; }
  .campaign-tabs button small { display: none; }
  .campaign-tab-icon { width: 30px; height: 30px; font-size: 1rem; }
  .city-head { min-height: 92px; padding: .9rem; }
  .place-mark { width: 46px; height: 52px; font-size: 1.55rem; }
  .city-title h3 { font-size: 1.25rem; }
  .city-facts { min-width: 54px; padding-left: .7rem; }
  .city-work { grid-template-columns: 1fr; }
  .section-heading { align-items: start; flex-direction: column; gap: .15rem; }
  .work-card { align-items: stretch; flex-direction: column; }
  .work-fields { grid-template-columns: 1fr; }
  .shop-row { grid-template-columns: minmax(0, 1fr) auto; }
  .shop-row input, .shop-row button { grid-row: 2; }
}
.danger-zone { border-color: #c48a7a; }
.loading { color: var(--muted); padding: 2rem 0; text-align: center; }

.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(1rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: .5rem; z-index: 20; width: min(92vw, 420px); }
.toast { color: var(--ink); background: var(--paper-light); border: 1px solid var(--edge); border-left: 4px solid var(--gold); border-radius: 3px; padding: .7rem 1rem; box-shadow: 0 6px 24px #110b0980; }
.toast.error { border-left-color: var(--danger); }
@media (min-width: 900px) { .toasts { bottom: 1.5rem; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

@media (max-width: 520px) {
  .equipment.with-art { grid-template-columns: 48px 1fr; gap: .6rem; }
  .equipment-fields .stepper button { width: 36px; }
  .equipment-fields .stepper input { width: 3rem; }
}

/* Smallest phones: the weapon picture moves into the slot heading's corner so
   the dropdowns get the full width. */
@media (max-width: 380px) {
  .equipment.with-art { position: relative; grid-template-columns: 1fr; }
  .equipment-art { position: absolute; top: .5rem; right: 0; width: 44px; }
  .equipment.with-art:first-of-type .equipment-art { top: 0; }
  .equipment.with-art h4 { min-height: 44px; padding-right: 52px; }
}

/* Phones held sideways: little height, so a slimmer bar with one-line nav entries. */
@media (max-height: 500px) and (max-width: 899px) {
  :root { --nav-height: 46px; }
  .brand a { font-size: 1.2rem; }
  .brand-mark { width: 26px; height: 30px; font-size: .95rem; }
  .nav a { flex-direction: row; gap: .4rem; font-size: .9rem; padding: 0 .7rem; }
}

/* Version bar of the editor: Vorlage or a campaign copy. */
.version-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: -.25rem 0 var(--gap); padding: .6rem .8rem;
  background: #f3e2bd; border: 1px solid var(--edge); border-left: 4px solid var(--gold); border-radius: 3px; }
.version-bar.running { border-left-color: var(--ok); }
.version-bar.pending { border-left-color: var(--warn); }
.version-bar p { flex: 1 1 260px; margin: 0; font-size: .9rem; }
.version-picker { display: flex; align-items: center; gap: .5rem; flex: 0 1 340px; min-width: 0; }
.version-picker select { min-height: 38px; }
.card-badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }
.level-value { font: 700 1.2rem var(--book); color: var(--wine); }

/* Inventory: a read-only list, one row per item; the actions sit behind the "…" menu. */
.item-sort { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .5rem 0 .75rem; font-size: .85rem; }
.item-sort button { min-height: 32px; padding: .2rem .75rem; font-size: .85rem; }
.item-group { padding: .75rem .85rem .35rem; border: 1px solid var(--edge); border-radius: 8px; background: var(--paper-light); }
.item-group + .item-group { margin-top: 1rem; }
.item-group h4 { margin: -.75rem -.85rem .55rem; padding: .7rem .85rem; border-bottom: 2px solid var(--edge); border-radius: 7px 7px 0 0; background: var(--field); color: var(--wine); font-size: 1.05rem; }
.item-head, .item-row { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem 6.5rem 6.5rem 32px; gap: .4rem; align-items: center; }
.item-head { font-size: .75rem; color: var(--muted); padding: 0 .55rem .3rem; border-bottom: 1px solid var(--edge); }
.items { list-style: none; margin: 0; padding: 0; }
.item-row { min-height: 48px; padding: .55rem; border-bottom: 1px solid var(--edge); }
.item-row:nth-child(even) { background: var(--field); }
.item-row:last-child { border-bottom: 0; }
.item-row .item-name { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.item-row .item-name small { font-size: .75rem; font-weight: 400; line-height: 1.25; }
.item-row .item-cell { font-variant-numeric: tabular-nums; }
/* Effect and properties: one clipped line; a tap on the name shows them in full. */
.item-row .item-name.has-details { cursor: pointer; }
.item-row .item-details { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.item-row .item-name[aria-expanded="true"] .item-details { white-space: normal; overflow: visible; }
/* Ausrüsten stays visible below weapons and armour. */
.item-extras { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.25rem; }
.item-equip-form { display: inline-flex; align-items: center; gap: .4rem; padding: .1rem 0; }
.item-equip-form select { min-height: 36px; width: auto; }
.item-equip { min-height: 36px; }
.item-menu-wrap { position: relative; justify-self: end; }
.item-menu-toggle { font-weight: 700; letter-spacing: .05em; }
.item-menu { position: absolute; z-index: 20; top: calc(100% + 4px); right: 0; display: grid; min-width: 10rem; padding: .3rem;
  background: var(--paper-light); border: 1px solid var(--edge); border-radius: 8px; box-shadow: 0 8px 24px #2a1a1440; }
.item-menu[hidden] { display: none; }
.item-menu button, .item-menu button.danger { justify-content: flex-start; min-height: 40px; padding: .4rem .7rem; text-align: left;
  color: var(--ink); background: none; border: 0; border-radius: 5px; box-shadow: none; font: inherit; font-size: .92rem; letter-spacing: normal; text-shadow: none; }
.item-menu button:hover, .item-menu button:focus-visible { filter: none; background: #0000000f; }
.item-menu button.danger { color: var(--danger); }
.item-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem .75rem; }
.item-fields .field + .field { margin-top: 0; }
.item-fields-name { grid-column: 1 / -1; }
/* Modal sheets (handing an item over, changing the potion bag): bottom sheet on phones, centred dialog from 600px. */
.sheet { width: 100%; max-width: 100%; max-height: min(88dvh, 640px); margin: auto 0 0; padding: 0; color: var(--ink);
  background: var(--paper-light); border: 1px solid var(--edge); border-bottom: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -10px 40px #110b0980; overflow: hidden; }
.sheet[open] { display: flex; animation: sheet-rise .22s ease-out; }
.sheet::backdrop { background: #1a0f0ca6; backdrop-filter: blur(2px); animation: sheet-fade .22s ease-out; }
.sheet.busy { cursor: progress; }
.sheet-body { display: flex; flex-direction: column; gap: .9rem; width: 100%; min-height: 0; overflow-y: auto; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.sheet-head::before { content: ""; position: absolute; top: .45rem; left: 50%; width: 2.5rem; height: 4px; margin-left: -1.25rem; border-radius: 2px; background: var(--edge); }
.sheet-head small { color: var(--muted); font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; }
.sheet-head h3 { margin: .1rem 0 0; font: 700 1.3rem/1.2 var(--book); overflow-wrap: anywhere; }
.give-amount { display: flex; align-items: center; gap: .6rem; }
.give-amount .field-label { margin-right: auto; }
.give-amount-control { display: inline-flex; align-items: center; border: 1px solid var(--edge); border-radius: 999px; background: var(--field); overflow: hidden; }
.give-amount-control button { width: 42px; min-height: 40px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--wine); box-shadow: none; font: 600 1.2rem/1 sans-serif; }
.give-amount-control button:disabled { color: #b8a483; }
.give-amount-value { min-width: 4.2rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.sell-amount { display: grid; gap: .35rem; }
.sell-amount-head, .sell-payout { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.sell-amount-value, .sell-proceeds { font-variant-numeric: tabular-nums; }
.sell-amount input[type=range] { min-height: 36px; padding: 0; border: 0; background: transparent; accent-color: var(--wine); cursor: pointer; }
.sell-payout { margin: 0; padding: .75rem; border: 1px solid var(--edge); border-radius: 8px; background: var(--field); }
.give-all { min-height: 40px; padding: .3rem .8rem; border-radius: 999px; background: #fbf1da; color: var(--wine); border-color: var(--gold); box-shadow: none; }
.give-choices { display: grid; gap: .45rem; min-height: 0; margin: 0; padding: 0; border: 0; overflow-y: auto; overscroll-behavior: contain; }
.give-choices legend { padding: 0; margin-bottom: .45rem; }
.give-choice { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .6rem .75rem;
  background: #fbf1da; border: 1px solid var(--edge); border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.give-choice:hover { border-color: var(--gold); }
.give-choice input { position: absolute; opacity: 0; pointer-events: none; }
.give-choice:has(input:focus-visible) { box-shadow: 0 0 0 2px #b58a4399; }
.give-choice:has(input:checked) { background: #f7e3b8; border-color: var(--wine); box-shadow: inset 0 0 0 1px var(--wine); }
.give-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; color: #fff1d1; background: var(--wine); font: 700 1.1rem var(--book);
  box-shadow: 0 0 0 2px #fbf1da, 0 0 0 3px var(--gold); }
.give-choice-text { display: grid; min-width: 0; }
.give-choice-text strong { color: var(--wine); font: 700 1.05rem/1.25 var(--book); overflow-wrap: anywhere; }
.give-choice-text small { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.give-check { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--edge); color: transparent; font-size: .85rem; transition: background .15s, color .15s; }
.give-choice:has(input:checked) .give-check { color: #fff1d1; background: var(--wine); border-color: var(--wine); }
.sheet-note { margin: 0; padding: .55rem .75rem; font-size: .88rem; background: #fbf1da; border: 1px solid var(--edge); border-left: 3px solid var(--gold); border-radius: 6px; }
.sheet-note.warning { border-left-color: var(--danger); color: var(--danger); }
.sheet-note[hidden] { display: none; }
.sheet-foot { display: flex; gap: .5rem; padding-top: .25rem; }
.sheet-foot .secondary { flex: none; }
.sheet-submit { display: block; flex: 1; min-width: 0; min-height: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 600px) {
  .sheet { width: min(460px, calc(100vw - 2rem)); margin: auto; border-bottom: 1px solid var(--edge); border-radius: 12px; box-shadow: 0 18px 50px #110b0999; }
  .sheet[open] { animation-name: sheet-pop; }
  .sheet-head::before { display: none; }
  .sheet-body { padding: 1.25rem; }
}
@keyframes sheet-rise { from { transform: translateY(100%); } }
@keyframes sheet-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes sheet-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sheet[open], .sheet::backdrop { animation: none; } }
.item-add { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem 6.5rem 6.5rem minmax(13rem, 14rem) auto; gap: .4rem; margin: 0 0 .35rem; }
.item-book { margin: 0 0 .35rem; font-size: .9rem; }
/* Equipped gear: listed with its catalog values, changed under Ausrüstung. */
.item-row.equipped { min-height: 38px; }
.item-row.equipped .item-name small { font-size: .8rem; }
.item-cell { padding: 0 .5rem; font-variant-numeric: tabular-nums; }
.cost-line { grid-column: 1 / -1; margin: 0; font-size: .85rem; }
.equipment-description { grid-column: 1 / -1; margin: 0; padding: .45rem .65rem; color: var(--ink); font-size: .86rem; line-height: 1.4; background: #f6e6c4; border-left: 3px solid var(--gold); overflow-wrap: anywhere; }
.equipment-natural-info { grid-column: 1 / -1; }
.equipment-natural-info .info-pop { margin: .25rem 0 0; }
.item-value { display: inline-flex; align-items: center; gap: .1rem; white-space: nowrap; }
.item-value .info, .cost-line .info { flex: none; margin: -5px 0; }
.equipment-item-description { grid-column: 1 / -1; margin: .15rem 0 .35rem; line-height: 1.4; overflow-wrap: anywhere; }
.equipment-item-description[hidden] { display: none; }
.catalog-note { font-size: .85rem; margin: .25rem 0 0; }
.profile-grid { --cell: 176px; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .6rem .75rem; }
.profile-grid .field + .field { margin-top: 0; }
.profile-grid .field:has(textarea) { grid-column: 1 / -1; }
/* Up to tablets: name on its own line, the numbers in a row, then type and button. */
@media (max-width: 1199px) {
  .item-add { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .item-add > :first-child, .item-add > select, .item-add > button { grid-column: 1 / -1; }
}
@media (min-width: 641px) and (max-width: 1199px) {
  .item-add > select { grid-column: 1 / 3; }
  .item-add > button { grid-column: 3; }
}
@media (max-width: 640px) {
  .campaign-tile { min-height: 96px; grid-template-columns: 52px minmax(0, 1fr) 22px; gap: .75rem; padding: .85rem; }
  .campaign-seal { width: 50px; height: 57px; font-size: 1.3rem; }
  .campaign-tile-copy strong { font-size: 1.25rem; }
  /* Phones: like the desktop table, but the name takes its own line and the numbers
     line up in columns below it, under the column heads of the group. */
  .item-group { padding: .6rem .55rem .2rem; }
  .item-group h4 { margin: -.6rem -.55rem .4rem; padding: .65rem .7rem; }
  .item-head, .item-row { grid-template-columns: 3.5rem minmax(0, 1.2fr) minmax(0, 1fr) 32px; gap: .2rem .5rem; }
  .item-head { padding: 0 .45rem .3rem; }
  .item-head > :first-child { display: none; }
  .item-row { padding: .6rem .45rem; }
  .item-row .item-name { grid-column: 1 / 4; }
  .item-row .item-cell { grid-row: 2; padding: 0; font-size: .88rem; }
  .item-row .item-menu-wrap { grid-column: 4; grid-row: 1; }
  .item-row.equipped > span:empty { display: none; }
}

/* ⓘ rulebook lookups: a small round button; the text folds open under the row. */
.rule-links { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .65rem; margin-top: 1rem; padding: .5rem .7rem; border: 1px solid var(--edge); border-radius: 6px; background: var(--panel, #fbf1da80); font-size: .85rem; }
.rule-links > span { color: var(--muted); }
.rule-links a { overflow-wrap: anywhere; }
.rule-links a::before { content: '❧ '; }
.activity-card .rule-links { margin: .5rem 0; }
/* The heading ⓘ: a 32px tap target drawn as a 22px circle inside it. */
button.info {
  position: relative; isolation: isolate; display: inline-grid; place-items: center; width: 32px; height: 32px; min-height: 0; padding: 0; margin: -5px 0;
  vertical-align: middle; border: 0; border-radius: 50%; background: none; color: var(--wine); box-shadow: none;
  font: italic 700 .8rem/1 var(--book);
}
button.info::before { content: ""; position: absolute; inset: 5px; z-index: -1; border-radius: 50%; border: 1px solid var(--gold); background: #fbf1da; }
button.info:hover { filter: none; }
button.info[aria-expanded=true] { color: #fff1d1; }
button.info[aria-expanded=true]::before { background: var(--wine); border-color: var(--wine); }
h3 button.info { margin: -5px 0; }
.row { flex-wrap: wrap; }
.info-pop { flex: 1 0 100%; margin: .1rem 0 .35rem; padding: .5rem .75rem; font-size: .88rem; background: #f6e6c4; border-left: 3px solid var(--gold); border-radius: 2px; }
.info-pop p { margin: 0; }
.info-pop p + p { margin-top: .3rem; }
.card > .info-pop { margin: -.2rem 0 .75rem; }
.budget-note { margin: -.4rem 0 .4rem; font-size: .85rem; }

/* Eigenheiten next to the attributes. */
.traits { list-style: none; margin: 0 0 .5rem; padding: 0; }
.trait { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-height: 44px; padding: .25rem 0; border-bottom: 1px dotted var(--edge); }
.trait-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.trait-points.cost { color: var(--danger); }
.trait-points.gain { color: var(--ok); }
.trait-spacer { width: 32px; }
.trait-total { font-size: .88rem; }
.trait-preview { margin: .4rem 0 0; font-size: .88rem; }

/* Wissen und Sprachen: a – / 1 / 2 / 3 picker per field. */
.level-picker { display: inline-grid; grid-template-columns: repeat(4, 38px); flex: none; border: 1px solid #ac8954; border-radius: 3px; overflow: hidden; }
.level-picker button { min-height: 40px; padding: 0; border: 0; border-left: 1px solid #d9bf8a; border-radius: 0; background: #f6e8c8; color: var(--muted); box-shadow: none; font: 700 1rem var(--book); }
.level-picker button:first-child { border-left: 0; }
.level-picker button:hover:not(:disabled) { background: #ecd6a8; filter: none; }
.level-picker button.selected { background: var(--wine); color: #fff1d1; }
/* "Not known" stays quiet, so only the fields you know catch the eye. */
.level-picker button.selected:first-child { background: #e3cd9f; color: var(--muted); }
.level-picker button:disabled:not(.selected) { opacity: .35; }
.knowledge-custom { display: grid; grid-template-columns: minmax(12rem, 20rem); gap: .5rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px dotted var(--edge); }
.knowledge-custom-editor { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .4rem; }
.knowledge-custom-editor[hidden] { display: none; }
.religion-text { margin: .6rem 0 0; font-size: .9rem; }

/* Attribute, skill and knowledge rows: ⓘ column | name + detail line | control.
   The label is one big tap target; the explanation opens across the full row. */
.row.info-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 .75rem; padding: .2rem 0; }
.row-label { display: flex; align-items: center; justify-content: flex-start; gap: .6rem; min-width: 0; min-height: 46px; padding: .35rem 0;
  border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; text-align: left; white-space: normal; cursor: default;
  font: inherit; letter-spacing: normal; }
button.row-label { cursor: pointer; }
button.row-label:hover { filter: none; }
button.row-label:hover .row-name { color: var(--wine); }
button.row-label:disabled { opacity: 1; }
.info-glyph { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--gold); background: #fbf1da; color: var(--wine); font: italic 700 .78rem/1 var(--book); }
.info-glyph.empty { visibility: hidden; }
.row-label[aria-expanded=true] .info-glyph { background: var(--wine); border-color: var(--wine); color: #fff1d1; }
.row-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; line-height: 1.25; }
.row-name { overflow-wrap: break-word; hyphens: auto; }
.row-meta { font-size: .78rem; line-height: 1.3; color: var(--muted); }
.info-row.known .row-name { font-weight: 600; color: var(--wine); }
.info-row > .info-pop { grid-column: 1 / -1; margin: 0 0 .5rem calc(22px + .6rem); }
/* Phones: slimmer controls leave the names room. */
@media (max-width: 420px) {
  .info-row .stepper button { width: 36px; min-height: 38px; }
  .info-row .stepper input { width: 2.9rem; min-height: 38px; padding: .3rem .2rem; }
  .info-row .level-picker { grid-template-columns: repeat(4, 33px); }
  .info-row .level-picker button { min-height: 38px; }
  .row-label { gap: .5rem; }
  .info-row > .info-pop { margin-left: calc(22px + .5rem); }
}
/* Smallest phones: a little less frame around the sheet. */
@media (max-width: 380px) {
  .view { padding: .75rem .6rem; }
  .card { padding: .85rem .75rem; }
  .info-row .stepper button { width: 32px; }
  .info-row .stepper input { width: 2.6rem; }
  .row.info-row { column-gap: .5rem; }
}

/* Skills: the calculated attribute value first, the skill value beside it. */
.skill-control { display: inline-flex; align-items: center; gap: .5rem; }
.skill-attribute { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 3rem; min-height: 40px; padding: .1rem .35rem;
  border: 1px solid #3a1a20; border-radius: 3px; color: #fff1d1; background: linear-gradient(#743d44, #52242c); box-shadow: inset 0 1px #e0bf7866; line-height: 1; cursor: help; }
.skill-attribute strong { font: 700 1.2rem/1 var(--book); }
.skill-attribute small { font-size: .6rem; letter-spacing: .04em; color: #f0d9a8; }
.skill-note { font-size: .85rem; margin: 0; }
/* Narrow phones: the attribute value sits above the stepper, so names keep their width. */
@media (max-width: 420px) {
  .skill-control { flex-direction: column; align-items: stretch; gap: 3px; padding: .15rem 0; }
  .skill-attribute { flex-direction: row; align-items: baseline; gap: .3rem; min-height: 24px; padding: .15rem .4rem; }
  .skill-attribute strong { font-size: 1.05rem; }
  .skill-attribute small { font-size: .68rem; }
}

/* The selected race and its background share the first row; other races flow below. */
.race-feature { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(165px, 1fr) minmax(0, 3fr); gap: .75rem; align-items: stretch; }
.race-feature > .race { width: 100%; }
.race-lore { position: relative; padding: .9rem 1rem .6rem; background: #f7e3b8; border: 2px solid var(--wine); border-radius: var(--radius); box-shadow: 0 4px 14px #52242c33; }
.race-lore h3 { display: flex; align-items: center; gap: .6rem; margin: 0 0 .6rem; color: var(--wine); }
.portrait.tiny { width: 36px; flex: none; }
.race-lore dl { margin: 0; display: grid; gap: .2rem 1rem; }
.race-lore dt { font: 700 .95rem var(--book); color: var(--wine); }
.race-lore dd { margin: 0 0 .55rem; font-size: .92rem; }
@media (min-width: 760px) { .race-lore dl { grid-template-columns: 12rem 1fr; } .race-lore dd { margin-bottom: .35rem; } }
.race-lore-link { display: inline-flex; align-items: center; min-height: 32px; font-size: .9rem; }
@media (max-width: 620px) { .race-feature { grid-template-columns: 1fr; gap: .5rem; } }

/* Progression log, folded under the level card. */
details.progression > summary { font-size: 1rem; }

.natural-note { grid-column: 1 / -1; margin: 0; font-size: .85rem; }

/* Modifiers (running game only). */
.row.modified > span:first-child { color: var(--wine); font-weight: 600; }
.modifiers-active { margin: 0; }

/* Session notes on the campaign page. */
.session-notes textarea { width: 100%; resize: vertical; }
.session-notes > button { margin: .35rem 0 .9rem; }
.session-notes > small { display: block; margin-top: -.2rem; }
.codex-diary-editor form { display: grid; gap: .7rem; margin-top: .8rem; }
.codex-diary-editor form[hidden] { display: none; }
.codex-diary-editor textarea { width: 100%; resize: vertical; }

/* ---------------------------------------------------------------- codex */
/* The Codex opens as a workspace, with the same three-pane rhythm as the GM editor. */
.view.codex-screen { max-width: 1740px; }
.codex-mode .shell { display: block; }
.codex-mode .brand, .codex-mode .nav { display: none; }
.codex-mode .view.codex-screen { width: calc(100% - 1.5rem); min-height: calc(100vh - 2rem); margin: .75rem auto; }
.codex-workspace-head { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.codex-workspace-head h2 { margin: 0; }
.codex-workspace-head .muted { margin-left: auto; }
.campaign-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.campaign-tabs button { white-space: normal; }
@media (max-width: 599px) { .campaign-tabs button { gap: .35rem; padding-inline: .4rem; } .campaign-tabs button strong { font-size: .86rem; overflow-wrap: anywhere; } }
.codex { display: grid; gap: var(--gap); align-items: start; }
@media (min-width: 900px) { .codex { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); } .codex-side { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; } }
@media (max-width: 899px) { .codex-side { max-height: min(48vh, 28rem); overflow-y: auto; } }
.codex-workspace { grid-template-columns: minmax(210px, 260px) minmax(0, 1fr) minmax(220px, 280px); }
.codex-workspace .codex-side, .codex-workspace .codex-tools { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.codex-tools { display: flex; flex-direction: column; gap: .55rem; }
.codex-tools h3, .codex-tools h4, .codex-tools p { margin: 0; }
.codex-tools h4 { margin-top: .8rem; }
.codex-more-discoveries a { display: block; margin-top: .55rem; }
.codex-more-discoveries summary { cursor: pointer; }
.codex-overview-mobile-heading { display: none; }
@media (max-width: 720px) {
  .codex-discoveries-recent { display: none; }
  .codex-overview-heading { display: none; }
  .codex-overview-mobile-heading { display: block; }
  .codex-mode .codex-workspace .codex-overview-section .codex-overview-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; text-align: left; box-shadow: none; }
  .codex-overview-toggle > span { transition: transform .2s ease; }
  .codex-overview-section.is-collapsed .codex-overview-toggle > span { transform: rotate(-90deg); }
  .codex-overview-section.is-collapsed .codex-overview-body { display: none; }
}
.codex-own-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin: .8rem 0 .35rem; }
.character-sheet-head { display: flex; align-items: center; gap: .75rem; margin: .4rem 0 1rem; }
.character-sheet-head h2 { margin: 0; overflow-wrap: anywhere; }
.character-sheet-heading { flex: 1; min-width: 0; }
.character-actions { position: relative; }
.character-actions[hidden] { display: none; }
.character-actions summary { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--edge); border-radius: 7px; cursor: pointer; list-style: none; font-size: 1.4rem; line-height: 1; }
.character-actions summary::-webkit-details-marker { display: none; }
.character-actions-menu { position: absolute; z-index: 30; top: calc(100% + 4px); right: 0; min-width: 12rem; padding: .3rem; border: 1px solid var(--edge); border-radius: 8px; background: var(--panel, #fff8e8); box-shadow: 0 8px 28px #0004; }
.character-actions-menu button { width: 100%; min-height: 40px; padding: .4rem .7rem; text-align: left; }
.character-actions-menu .character-delete-action { color: var(--danger); }
@media (min-width: 600px) { .character-delete-sheet { width: min(380px, calc(100vw - 2rem)); } }
@media (max-width: 1220px) { .codex-workspace { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); } .codex-workspace .codex-tools { grid-column: 1 / -1; position: static; max-height: none; } }
@media (max-width: 720px) { .codex-workspace { grid-template-columns: 1fr; } .codex-workspace .codex-side { position: static; max-height: 45vh; } .codex-workspace .codex-tools { grid-column: auto; } }
.codex-side input[type=search] { width: 100%; margin-bottom: .6rem; }
.codex-side h3 a { text-decoration: none; }
.codex-main { min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }
.codex-tree { list-style: none; margin: 0; padding: 0; }
.codex-tree .codex-tree { padding-left: .9rem; border-left: 1px solid var(--edge); margin-left: .3rem; }
.codex-tree a { display: block; padding: .25rem .35rem; border-radius: 3px; text-decoration: none; overflow-wrap: anywhere; }
.codex-tree a:hover { background: #e9d3a6; }
.codex-tree a.active { background: var(--wine-fill, var(--wine)); color: #fff1d1; }
.codex-tree-heading { margin: .9rem 0 .4rem; font-family: var(--book); font-weight: bold; color: var(--wine); }
.codex-tree-branch > summary { display: flex; align-items: center; justify-content: flex-start; gap: .3rem; padding: .3rem .35rem; cursor: pointer; font-weight: 600; text-align: left; overflow-wrap: anywhere; }
.codex-tree-branch > summary > span { flex: 1; min-width: 0; }
.codex-tree-branch > summary .codex-tree-open { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; padding: 0; font-weight: normal; }
.codex-tree-branch > .codex-tree { padding-left: .75rem; }
.codex-tree-group-branch > summary { color: var(--wine); font-family: var(--book); }
.codex-tree-group-branch > summary::marker { color: var(--muted); font-size: .8em; }
.codex-tree-mark { margin-right: .3rem; }
.codex-crumbs { font-size: .9rem; color: var(--muted); }
.codex-recent { margin: 0; padding-left: 1.1rem; }
.codex-recent li { margin-bottom: .3rem; }
.codex-handouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: .7rem; }
.codex-handout-card { display: flex; flex-direction: column; gap: .2rem; padding: .8rem; border: 1px solid #d9c69c; border-radius: 3px; background: #fff8e4; color: #2f2213; text-decoration: none; box-shadow: 0 2px 6px #0002; }
.codex-handout-card strong { color: #52242c; font-family: var(--book); }
.codex-handout-card small { color: #6b5638; }
.codex-handout-card.codex-skin-parchment { background: #ecd6a3; }
.codex-handout-card.codex-skin-decree { border: 3px double #7a5a2a; }
.codex-presented { display: flex; align-items: center; gap: .8rem; margin-bottom: var(--gap); padding: .7rem 1rem; border: 1px solid var(--gold); border-left: 4px solid var(--wine); border-radius: 3px; background: #f6e6c4; animation: codex-arrive .5s ease-out; }
.codex-presented > span:nth-child(2) { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.codex-presented small { color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; }
.codex-presented strong { font-family: var(--book); font-size: 1.1rem; color: var(--wine); }
.codex-presented-mark { font-size: 1.6rem; }
@keyframes codex-arrive { from { transform: translateY(-6px); opacity: 0; } }
.codex-journal-group + .codex-journal-group { margin-top: .7rem; }
.codex-journal-group h4 { margin-bottom: .25rem; }
.codex-handout-card.codex-skin-newspaper { background: #f1ead9; border-color: #b8ab92; font-family: Georgia, serif; }
.codex-handout-card.codex-skin-newspaper strong { color: #1f1a14; font-family: Georgia, serif; }
.codex-city-link { display: inline-block; margin-left: .6rem; font-weight: 600; }
/* Sidebar sections (bookmarks, recently viewed, wiki, quests, handouts), bookmark button, newest newspaper. */
.codex-side-section + .codex-side-section { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--edge); }
.codex-side-section > summary { cursor: pointer; padding: .15rem 0; font-weight: 600; color: var(--wine); }
.codex-side-section > summary + * { margin-top: .3rem; }
.codex-side-list .codex-quest-status { font-size: .75rem; }
.codex-page-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.codex-bookmark { min-height: 32px; margin-left: auto; padding: .2rem .7rem; font-size: .88rem; }
.codex-bookmark[aria-pressed=true] { border-color: var(--gold); color: #8a5a14; }
.codex-handout-card.codex-front-page { padding: 1rem 1.2rem; border-top: 3px double #1f1a14; }
.codex-front-page small:first-child { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
.codex-front-page strong { font-size: 1.45rem; line-height: 1.2; }
.city-title .codex-city-link { margin: .3rem 0 0; color: inherit; }

/* ------------------------------------------------ codex: the GM Codex look */
/* Same visual language as the GM's Codex (OrbisGui/webapp/static/codex/editor.css):
   wine header bar, wooden desk, three rounded parchment sheets, Segoe UI controls. */
.codex-mode .view.codex-screen { width: 100%; max-width: none; min-height: 100vh; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.codex-mode .codex-workspace-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 1rem; height: 56px; margin: 0;
  padding: 0 clamp(1rem, 2vw, 2rem); background: linear-gradient(#5d2a33, #3b1e25); color: #f3dfb5; border-bottom: 3px double var(--gold); box-shadow: 0 2px 6px #0006; }
.codex-mode .codex-workspace-head .back { min-height: 32px; margin: 0; padding: 0 .4rem; border-radius: 7px; color: #f3dfb5; font-size: 1.15rem; }
.codex-mode .codex-workspace-head .back:hover { background: #ffffff1a; color: #fff1d1; }
.codex-brand { font: 700 1.1rem var(--book); letter-spacing: .03em; }
.codex-campaign { color: #e0bf78; }
.codex-close { display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; margin-left: auto; padding: .25rem .65rem; border: 1px solid #e0bf7880; border-radius: 8px; color: #f3dfb5; font: 600 .85rem "Segoe UI", sans-serif; text-decoration: none; white-space: nowrap; }
.codex-close > span[aria-hidden] { font-size: 1.3rem; line-height: 1; }
.codex-close:hover, .codex-close:focus-visible { background: #ffffff1a; color: #fff1d1; }
.codex-mode .codex-workspace { grid-template-columns: minmax(210px, 250px) minmax(0, 1fr) minmax(230px, 285px); gap: 18px; max-width: 1760px; margin-inline: auto; padding: 18px;
  font: 14px/1.45 "Segoe UI", system-ui, sans-serif; }
.codex-mode .codex-workspace .codex-side, .codex-mode .codex-workspace .codex-tools { top: 74px; max-height: calc(100vh - 92px); }
.codex-mode .codex-workspace > .card, .codex-mode .codex-main { border: 1px solid var(--edge); border-radius: 12px; background: #fbf1dad9; padding: 18px; box-shadow: 0 8px 28px #1d110e38; }
.codex-mode .codex-main { padding: clamp(20px, 3.5vw, 48px); min-height: calc(100vh - 92px); gap: 1.4rem; }
.codex-mode .codex-main > .card, .codex-mode .codex-main > .stack > .card { padding: .4rem 0 0; border: 0; border-top: 1px solid var(--edge); border-radius: 0; background: none; box-shadow: none; }
.codex-mode .codex-main > .stack { display: flex; flex-direction: column; gap: 1.4rem; }
.codex-mode .codex-main .codex-page.codex-skin-page { padding: 0; border: 0; background: none; }
.codex-mode .codex-main :is(.codex-page.character-codex-editor, .codex-page.codex-own-document:not(.is-inline)) {
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
.codex-mode .codex-main .codex-skin-page .codex-title { font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1.14; }
.codex-mode .codex-main .codex-skin-page .codex-cover { margin: calc(-1 * clamp(20px, 3.5vw, 48px)) calc(-1 * clamp(20px, 3.5vw, 48px)) 1rem; overflow: hidden; }
.codex-mode .codex-main .codex-skin-page .codex-cover img { max-height: 240px; border-radius: 12px 12px 0 0; }
.codex-mode .codex-main .codex-skin-page .codex-cover.is-portrait { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #8e6e4812; border-bottom: 1px solid var(--edge, #baa177); border-radius: 12px 12px 0 0; padding: .5rem .75rem; }
html[data-theme="dark"] .codex-mode .codex-main .codex-skin-page .codex-cover.is-portrait { background: #00000035; }
.codex-mode .codex-main .codex-skin-page .codex-cover.is-portrait img { width: auto; max-width: 100%; max-height: 260px; object-fit: contain; margin: 0 auto; border-radius: 6px; box-shadow: 0 4px 20px #00000030; }
.codex-mode .codex-workspace :is(button, .button) { min-height: 32px; padding: .3rem .8rem; border-radius: 7px; font: 600 .9rem "Segoe UI", system-ui, sans-serif; letter-spacing: 0; box-shadow: none; }
.codex-mode .codex-workspace button.small { min-height: 26px; padding: .1rem .55rem; font-size: .85rem; }
.codex-mode .codex-workspace :is(input, select, textarea) { border-radius: 7px; }
.codex-mode .codex-tree a { padding: .35rem .5rem; border-radius: 9px; color: var(--ink); }
.codex-mode .codex-tree a.active { color: #fff1d1; font-weight: 700; }
.codex-mode .codex-tools > a { padding: .2rem .4rem; border-radius: 7px; text-decoration: none; }
.codex-mode .codex-tools > a:hover, .codex-mode .codex-journal-link:hover { background: #0000000d; }
.codex-journal-link { display: block; margin: .3rem 0; padding: .2rem .4rem; border-radius: 7px; text-decoration: none; font-weight: 600; }
.codex-mode .codex-page-tools { margin-bottom: -.6rem; font-size: .85rem; }
.codex-mode button.codex-bookmark { min-height: 28px; min-width: 28px; padding: 0 .35rem; border: 1px solid transparent; background: transparent; color: var(--gold); font-size: 1.15rem; }
.codex-mode button.codex-bookmark:hover { border-color: var(--edge); background: #8e6e4817; filter: none; }
/* Character backgrounds use the same inline block layout and handle language as the GM editor. */
.character-codex-blocks { display: flex; flex-direction: column; }
.character-codex .cx-block { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: start; border-left: 3px solid transparent; }
.character-codex .cx-block.cx-private-block { border-left-color: #8a6420; background: #f3dc9166; }
html[data-theme="dark"] .character-codex .cx-block.cx-private-block { border-left-color: #e0bf78; background: #4a3b1a99; }
.character-codex .cx-gutter { display: flex; gap: 2px; padding-top: .35rem; }
.character-codex .cx-handle, .codex-mode .codex-workspace .character-codex .cx-handle { width: 22px; min-width: 22px; min-height: 22px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 1rem; }
.character-codex .cx-handle:hover { background: #0000001a; }
.character-codex .cx-drag-handle { cursor: grab; touch-action: none; user-select: none; }
.character-codex .cx-drag-handle:active { cursor: grabbing; }
.character-codex .cx-locked .cx-drag-handle { cursor: default; }
.character-codex .cx-block-body { min-width: 0; padding: 1px 0; }
.character-codex .cx-text { display: block; width: 100%; min-height: 2.5rem; padding: .3rem .4rem; overflow: hidden; resize: none; border: 1px solid transparent; background: transparent; line-height: 1.6; font-size: 1.02rem; }
.character-codex .cx-text:hover { border-color: var(--edge); }
.character-codex .cx-text:focus { border-color: var(--edge); background: var(--field, #fffaf0); outline: 0; }
.character-codex .cx-private-block .cx-text:focus { background: transparent; }
.character-codex .cx-h1, .character-codex .cx-h2, .character-codex .cx-h3 { font-family: var(--book); font-weight: 700; color: var(--wine); line-height: 1.25; }
.character-codex .cx-h1 { font-size: 1.45rem; }
.character-codex .cx-h2 { font-size: 1.25rem; }
.character-codex .cx-h3 { font-size: 1.08rem; color: var(--muted); }
.character-codex .cx-formatted-field { position: relative; }
.character-codex .cx-inline-preview { display: none; position: absolute; inset: 0; z-index: 1; min-height: 100%; padding: .3rem .4rem; overflow-wrap: anywhere; white-space: pre-wrap; line-height: 1.6; font-size: 1.02rem; pointer-events: none; }
.character-codex .cx-inline-preview a { pointer-events: auto; }
.character-codex .cx-formatted-field.has-markup:not(:focus-within) textarea.cx-text { color: transparent; }
.character-codex .cx-formatted-field.has-markup:not(:focus-within) .cx-inline-preview { display: block; }
.character-codex .cx-inline-preview.cx-h1, .character-codex .cx-inline-preview.cx-h2, .character-codex .cx-inline-preview.cx-h3 { font-family: var(--book); font-weight: 700; color: var(--wine); }
.character-codex .cx-reference-editor { display: none; white-space: pre-wrap; overflow-wrap: anywhere; outline: 0; }
.character-codex .cx-formatted-field.has-page-reference > textarea { position: absolute; inset: 0; width: 100%; height: 100% !important; opacity: 0; overflow: hidden; }
.character-codex .cx-formatted-field.has-page-reference:not(:focus-within) > .cx-inline-preview { position: relative; overflow: visible; }
.character-codex .cx-formatted-field.has-page-reference:focus-within > textarea { pointer-events: none; }
.character-codex .cx-formatted-field.has-page-reference:focus-within > .cx-reference-editor { display: block; min-height: 2.5rem; }
.character-codex .cx-formatted-field.has-page-reference:focus-within > .cx-inline-preview { display: none; }
.character-codex .cx-block-body > input, .character-codex .cx-block-body > textarea { width: 100%; }
.character-codex .cx-block-body > input { margin: .15rem 0; }
.character-codex .cx-type-quote .cx-block-body { padding-left: .65rem; border-left: 3px solid var(--gold); }
.character-codex .cx-checklist { display: grid; gap: .25rem; padding: .3rem .4rem; }
.character-codex .cx-check-row { display: flex; align-items: center; gap: .5rem; }
.character-codex .cx-check-row input[type=checkbox] { flex: none; width: 1.05rem; height: 1.05rem; }
.character-codex .cx-check-row input[type=text] { flex: 1; min-width: 0; }
.character-codex .cx-block-body .codex-image { max-width: 100%; margin: .3rem 0; }
.character-codex .cx-add-end { padding: .6rem 0 0 48px; }
.character-codex .cx-dragging { opacity: .55; }
.character-codex .cx-drop-before::before, .character-codex .cx-drop-after::after { content: ''; position: absolute; z-index: 2; left: 0; right: 0; height: 3px; border-radius: 3px; background: var(--gold); pointer-events: none; }
.character-codex .cx-drop-before::before { top: -2px; }
.character-codex .cx-drop-after::after { bottom: -2px; }
.character-codex-locked { padding: .35rem .4rem; color: var(--muted); white-space: pre-wrap; }
.character-codex-private { display: block; padding: .2rem .4rem 0; color: var(--muted); }
.character-codex-status { color: var(--muted); font-size: .85rem; }
/* The save state only shows while saving or after an error. */
.character-codex-editor .cx-prop:has(.character-codex-status:empty) { display: none; }
.character-codex-editor .cx-props { display: flex; flex-direction: column; gap: 1px; margin: .1rem 0 1.2rem; padding-bottom: .8rem; border-bottom: 1px solid var(--edge); font-size: .9rem; }
.character-codex-editor .cx-prop { display: grid; grid-template-columns: minmax(7rem, 9.5rem) minmax(0, 1fr); align-items: start; gap: .6rem; padding: 2px 0; border-radius: 6px; }
.character-codex-editor .cx-prop:hover { background: #8e6e480d; }
.character-codex-editor .cx-prop-label { padding: .3rem .4rem; color: var(--muted); }
.character-codex-editor .cx-prop-value { display: flex; align-items: center; gap: .5rem; min-width: 0; min-height: 30px; }
.character-codex-editor .cx-prop-value > input, .character-codex-editor .cx-prop-value > textarea { width: 100%; min-height: 28px; padding: .15rem .45rem; border: 1px solid transparent; background: transparent; color: var(--ink); font: inherit; }
.character-codex-editor .cx-prop-value > input:hover, .character-codex-editor .cx-prop-value > textarea:hover { border-color: var(--edge); }
.character-codex-editor .cx-prop-value > input:focus, .character-codex-editor .cx-prop-value > textarea:focus { border-color: var(--edge); background: var(--field); outline: 0; }
.character-codex-editor .cx-prop-value > textarea { resize: vertical; }
.character-codex-editor .cx-portrait-field, .character-codex-editor .cx-contact-list { display: grid; width: 100%; gap: .3rem; }
.character-codex-editor .cx-portrait-field img { max-width: 130px; max-height: 130px; object-fit: contain; border-radius: 6px; }
.character-codex-editor .cx-portrait-field input[type=url], .character-codex-editor .cx-contact-row input { min-width: 0; width: 100%; }
.character-codex-editor .cx-contact-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto; gap: .3rem; }
.character-codex-editor .cx-contact-row button { align-self: start; }
.character-codex-editor .character-codex-merkmale { margin-bottom: 1rem; }
@media (max-width: 720px) { .character-codex-editor .cx-prop { grid-template-columns: 1fr; gap: 0; } .character-codex-editor .cx-prop-label { padding-bottom: 0; } }
@media (hover: none) { .character-codex .cx-block { grid-template-columns: 66px minmax(0, 1fr); } .character-codex .cx-handle, .codex-mode .codex-workspace .character-codex .cx-handle { width: 32px; min-width: 32px; min-height: 32px; } .character-codex .cx-add-end { padding-left: 66px; } }
@media (max-width: 720px) {
  .character-codex .cx-block { grid-template-columns: 36px minmax(0, 1fr); }
  .character-codex .cx-insert-handle { display: none; }
  .character-codex .cx-add-end { padding-left: 36px; }
}
.codex-mode .codex-workspace .link-button { min-height: 0; padding: 0; border: 0; background: none; color: var(--wine); font-weight: 600; font-size: .85rem; }
.codex-mode .codex-workspace .link-button:hover { text-decoration: underline; filter: none; }
@media (max-width: 1220px) { .codex-mode .codex-workspace { grid-template-columns: minmax(210px, 250px) minmax(0, 1fr); } }
@media (max-width: 720px) { .codex-mode .codex-workspace { grid-template-columns: 1fr; padding: 10px; } .codex-mode .codex-workspace-head { height: 56px; flex-wrap: nowrap; } .codex-mode .codex-main { min-height: 0; } }
/* Phone: the sidebar is a drawer behind "☰ Seiten" in the header; the page gets the screen. */
.codex-side-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.codex-nav-toggle, .codex-nav-close, .codex-nav-backdrop { display: none; }
@media (max-width: 720px) {
  .codex-mode .codex-workspace-head { gap: .6rem; }
  .codex-mode .codex-workspace-head .codex-brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .codex-campaign { display: none; }
  .codex-mode .codex-workspace-head .codex-close { flex: none; justify-content: center; width: 36px; min-height: 36px; padding: 0; }
  .codex-close-label { display: none; }
  .codex-mode .codex-workspace-head .codex-nav-toggle { display: inline-flex; flex: none; min-height: 34px; margin: 0; padding: 0 .7rem; border: 1px solid #e0bf7880;
    border-radius: 7px; background: #ffffff14; color: #f3dfb5; font: 600 .9rem "Segoe UI", system-ui, sans-serif; box-shadow: none; }
  .codex-workspace .codex-side, .codex-mode .codex-workspace .codex-side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: min(86vw, 340px); max-height: none;
    margin: 0; overflow-y: auto; border-radius: 0 12px 12px 0; background: var(--paper-light); transform: translateX(-105%); visibility: hidden;
    transition: transform .2s ease, visibility .2s; }
  .codex-workspace.codex-nav-open .codex-side { transform: none; visibility: visible; box-shadow: 8px 0 30px #1d110e66; }
  .codex-workspace.codex-nav-open .codex-nav-backdrop { display: block; position: fixed; inset: 0; z-index: 39; background: #1a0f0c80; }
  .codex-side .codex-nav-close { display: inline-flex; }
  .codex-side .codex-tree a, .codex-side .codex-tree-branch > summary { min-height: 2.2rem; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) { .codex-workspace .codex-side { transition: none; } }
.animal-page { display: grid; gap: 1rem; }
.animal-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }
.animal-choice { display: flex; align-items: center; gap: .55rem; text-align: left; }
.animal-avatar { display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border: 1px solid var(--gold); border-radius: 50%; background: #f8e8c6; color: var(--wine); font: 1.45rem/1 "Segoe UI Emoji", "Apple Color Emoji", sans-serif; }
.animal-avatar.large { width: 3.25rem; height: 3.25rem; font-size: 1.9rem; }
.animal-avatar img { width: 88%; height: 88%; object-fit: contain; }
.animal-choice-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.animal-choice-name small { color: inherit; opacity: .8; font: .75rem/1.25 var(--book); }
.animal-title { display: flex; align-items: center; gap: .75rem; }
.animal-title .animal-actions { margin-left: auto; flex: none; }
.animal-title h2, .animal-title p { margin: 0; }
.animal-choice.selected { outline: 2px solid var(--accent, #8d643e); }
.animal-detail { margin-top: .75rem; border-top: 1px solid var(--border, #d4c8b6); padding-top: .65rem; }
.animal-detail summary { cursor: pointer; font-weight: 600; }
.animal-value, .animal-item { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .45rem 0; border-bottom: 1px solid var(--border, #d4c8b6); }
.animal-abilities h3 { margin: .9rem 0 .35rem; font-size: 1rem; }
.animal-ability-option > span:first-child { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.animal-ability-option small { color: var(--muted); }
.animal-ability-option button { flex: none; }
.animal-item input { width: 4.5rem; }
@media (max-width: 600px) { .animal-choice { width: 100%; } .animal-choice .badge { margin-left: auto; } .animal-item { flex-wrap: wrap; } }
.animal-limbs { margin-top: .8rem; }
.animal-limb { padding: .7rem; border: 1px solid var(--edge); border-radius: 5px; background: var(--panel); }
.animal-limb.warn { border-color: var(--warn); }
.animal-limb.danger { border-color: var(--danger); }
.animal-armour-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .75rem; margin-top: .75rem; }
.animal-armour-slot { min-width: 0; padding: .75rem; border: 1px solid var(--edge); border-radius: 5px; background: var(--panel); }
.animal-armour-head { display: flex; align-items: center; gap: .6rem; }
.animal-armour-head div { display: flex; flex-direction: column; }
.animal-armour-head small { color: var(--muted); }
.animal-armour-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: .5rem; margin-top: .6rem; }
.animal-armour-controls .field { min-width: 0; }
.animal-armour-condition { margin-top: .6rem; font-size: .82rem; color: var(--muted); }
.animal-armour-condition .meter { margin-top: .25rem; }
.animal-relationships { margin-top: .5rem; }
.animal-loyalty-add { display: grid; grid-template-columns: minmax(150px, 1fr) auto; gap: .5rem; margin-top: .75rem; }
.animal-taming { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--edge); }
.animal-taming input { max-width: 7rem; }
.animal-bag-tabs { display: flex; gap: .5rem; margin: .75rem 0; }
.animal-bag-controls { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(130px, 180px) minmax(145px, 180px); gap: .5rem; margin-bottom: .75rem; }
.animal-inventory-head, .animal-inventory-row { display: grid; grid-template-columns: minmax(120px, 2fr) minmax(95px, 1fr) 65px 90px minmax(155px, auto); gap: .65rem; align-items: center; padding: .55rem .65rem; border-bottom: 1px solid var(--edge); }
.animal-inventory-head { background: #e8d6ae; font-weight: 700; }
.animal-inventory-row:nth-child(odd) { background: #f8efdccc; }
.animal-inventory-name { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.animal-inventory-name small { color: var(--muted); }
.animal-inventory-action { display: flex; gap: .4rem; align-items: center; }
.animal-inventory-action input { width: 4rem; min-height: 34px; }
@media (max-width: 700px) {
  .animal-loyalty-add, .animal-bag-controls { grid-template-columns: 1fr; }
  .animal-inventory-head { display: none; }
  .animal-inventory-row { grid-template-columns: 1fr 1fr; border: 1px solid var(--edge); border-radius: 5px; margin: .5rem 0; background: var(--panel); }
  .animal-inventory-row > span:not(.animal-inventory-name):not(.animal-inventory-action)::before { content: attr(data-label) ': '; color: var(--muted); }
  .animal-inventory-name, .animal-inventory-action { grid-column: 1 / -1; }
}