/* Fallowborn — dark parchment theme, mobile-first */
:root {
  --main-text-color: #f2eadb;
  --helper-text-color: #c9b991;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
html { -webkit-text-size-adjust: 100%; }
body { overscroll-behavior: none; } /* no pull-to-refresh inside the itch iframe */
body {
  background: #171310;
  color: var(--main-text-color);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 16px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums; /* digits share a width: no layout wobble as counters run */
}
/* Desktop scrollbars stay narrow and recede into the parchment chrome.
   Touch devices retain their platform-native overlay scrolling. */
@media (pointer: fine) {
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(122,98,52,.68) transparent;
  }
  *::-webkit-scrollbar { width: 8px; height: 8px; }
  *::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; }
  *::-webkit-scrollbar-thumb {
    min-height: 28px; border: 2px solid transparent; border-radius: 999px;
    background: rgba(122,98,52,.68); background-clip: padding-box;
  }
  *::-webkit-scrollbar-thumb:hover { background-color: rgba(201,162,74,.78); }
  *::-webkit-scrollbar-button { width: 0; height: 0; display: none; }
}
button, select { font-family: inherit; }
/* touch-action kills the double-tap-zoom delay; buttons are chrome, not text */
button, .tab, .traitchip, .charrow, .toast {
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #e0c060; outline-offset: 1px;
}
.btn, .bigbtn, .actionbtn, .evopt, .tab, .kv, .hint, .toast, .gm-body-text, .coachmark {
  overflow-wrap: anywhere;
}
/* press feedback on touch (hover never fires there) */
.btn:active, .bigbtn:active, .actionbtn:active:not(:disabled), .evopt:active, .tab:active {
  filter: brightness(1.35);
}
.keyhint {
  display: inline-block; min-width: 15px; padding: 0 4px; margin-right: 7px;
  background: #191410; border: 1px solid #66522f; border-radius: 4px;
  font-size: 11px; line-height: 16px; color: #c9a24a; text-align: center;
  vertical-align: 1px;
}
.tabkeyhint { margin-right: 0; }
.tabfulllabel { display: none; }
/* no keyboard, no keyboard hints */
@media (pointer: coarse) { .keyhint { display: none; } }
/* live counters: monospace digits so changing numbers never change width */
.mono { font-family: Consolas, Menlo, 'Courier New', monospace; font-size: 0.95em; }
#tooltip {
  position: fixed; z-index: 80; pointer-events: none;
  background: #2c2418; border: 1px solid #a5842f; border-radius: 8px;
  max-width: 280px; padding: 9px 11px; font-size: 13px; line-height: 1.4;
  color: var(--main-text-color); box-shadow: 0 4px 18px #000;
}
#tooltip b { color: #e0c060; }
.hidden { display: none !important; }
.row { display: flex; align-items: center; }
.gap { gap: 10px; }
.wrap { flex-wrap: wrap; }

/* ---------- screens ---------- */
.screen {
  position: fixed; inset: 0; z-index: 40;
  background: radial-gradient(ellipse at 50% 30%, #2a221a 0%, #171310 70%);
  display: flex; flex-direction: column; align-items: center;
  padding: 20px; text-align: center; overflow-y: auto; overflow-x: hidden;
}
/* auto-margin spacers: short content centers, tall content scrolls from the
   top (justify-content:center would push the heading above the scroll origin,
   where it can never be scrolled back into view) */
.screen::before, .screen::after { content: ''; margin: auto 0; }
.gametitle {
  font-size: clamp(34px, 8vw, 60px); color: #d8b24a; letter-spacing: 2px;
  text-shadow: 0 2px 8px #000; margin-bottom: 8px;
}
.subtitle { color: var(--helper-text-color); font-style: italic; margin-bottom: 26px; }
/* which world the title screen will spawn (shown only when mods are stored) */
.modnote { color: #c9a24a; font-size: 14px; margin: -16px 0 22px; max-width: 480px; }
.credits { color: var(--main-text-color); font-size: 13px; margin-top: 30px; max-width: 480px; }
.offline-status {
  margin-top: 7px; color: #9daf75; font-size: 13px;
}
.update-banner {
  position: fixed; z-index: 90; top: max(10px, env(safe-area-inset-top));
  left: 50%; transform: translateX(-50%); width: calc(100% - 24px); max-width: 680px;
  display: flex; align-items: center; gap: 14px; padding: 11px 12px 11px 15px;
  background: rgba(35, 28, 18, .98); border: 1px solid #b18a32; border-radius: 9px;
  color: var(--main-text-color); text-align: left; box-shadow: 0 8px 28px rgba(0,0,0,.62);
}
.update-banner-copy { flex: 1 1 240px; min-width: 0; }
.update-banner-copy strong { display: block; color: #f0d77d; font-size: 15px; }
.update-banner-copy span { display: block; margin-top: 1px; font-size: 14px; }
.update-banner .btn { flex: 0 0 auto; white-space: nowrap; }
.loadbarwrap { width: min(70vw, 360px); height: 10px; background: #33291f; border-radius: 5px; margin-top: 16px; overflow: hidden; }
#loadbar { height: 100%; width: 0%; background: linear-gradient(90deg, #a07828, #e0c060); transition: width .15s; }
#loadmsg { color: var(--helper-text-color); font-style: italic; }
.music-choice {
  width: min(92vw, 560px); margin-top: 22px; padding: 16px;
  background: #241d15; border: 1px solid #66522f; border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.35); text-align: left;
}
.music-choice h2 { text-align: center; }
.music-choice > p { margin-bottom: 10px; color: var(--main-text-color); }
.music-choice .row { justify-content: center; }

.menubtns { display: flex; flex-direction: column; gap: 12px; width: min(80vw, 300px); }
.bigbtn {
  background: linear-gradient(180deg, #4a3a24, #33281a);
  color: var(--main-text-color); border: 1px solid #7a6234; border-radius: 8px;
  padding: 13px 22px; font-size: 17px; cursor: pointer; min-height: 48px;
  transition: filter .1s;
}
.bigbtn:hover { filter: brightness(1.2); }
.bigbtn:disabled { opacity: .45; cursor: default; }

/* The hosted title often lives in a short iframe. Scale its vertical rhythm
   with the viewport so the complete menu normally fits without scrolling. */
#title { padding-block: clamp(10px, 2vh, 20px); }
#title #titlecrest { width: clamp(78px, 12vh, 120px); height: auto; }
#title .gametitle {
  font-size: clamp(30px, min(13vw, 7vh), 60px);
  line-height: 1.1; margin-bottom: clamp(2px, 1vh, 8px);
}
#title .subtitle { margin-bottom: clamp(10px, 2.5vh, 26px); }
#title .modnote { margin: -8px 0 clamp(8px, 2vh, 18px); }
#title .menubtns { gap: clamp(5px, 1.3vh, 12px); }
#title .bigbtn {
  min-height: clamp(38px, 5.5vh, 48px);
  padding: clamp(6px, 1.2vh, 13px) 22px;
  font-size: clamp(15px, 2.1vh, 17px);
}
#title .title-menu-icon {
  display: inline-block; width: 1.5em; margin-right: .4em; text-align: center;
}
#title .credits { margin-top: clamp(10px, 3vh, 30px); }
#title .offline-status { margin-top: clamp(4px, 1vh, 7px); }
/* floating music-download progress: shown while a bank downloads and the
   downloads dialog is not on screen, so progress started from the title menu
   stays visible inside the game */
.music-dl-chip {
  position: fixed; right: 12px; bottom: 64px; z-index: 46;
  right: calc(12px + env(safe-area-inset-right));
  bottom: calc(64px + env(safe-area-inset-bottom));
  max-width: min(70vw, 340px); padding: 7px 12px;
  border: 1px solid #7a6234; border-radius: 12px;
  background: rgba(36,29,21,.94); color: var(--main-text-color);
  box-shadow: 0 3px 12px rgba(0,0,0,.45);
  font: 13px/1.35 Georgia, serif; pointer-events: none;
}
.title-music-controls {
  position: fixed; left: 12px; bottom: 12px; z-index: 45;
  left: calc(12px + env(safe-area-inset-left));
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; gap: 8px;
}
.title-music-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 1px solid #7a6234;
  border-radius: 50%; background: rgba(36,29,21,.94); color: #e0c060;
  box-shadow: 0 3px 12px rgba(0,0,0,.45); font: 20px/1 serif; cursor: pointer;
}
.title-music-toggle:hover { filter: brightness(1.2); }
.title-music-toggle:focus-visible { outline: 2px solid #e0c060; outline-offset: 2px; }

/* the birthplace and character screens put their Back button in the same
   bottom-left corner — yield the corner on phone-sized screens */
@media (max-width: 820px), (max-height: 520px) {
  body.ng-back-corner .title-music-controls { display: none; }
}

.btn {
  background: #33291d; color: var(--main-text-color); border: 1px solid #66522f; border-radius: 6px;
  padding: 9px 14px; font-size: 15px; cursor: pointer; min-height: 40px;
}
.btn:hover { filter: brightness(1.25); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: #4c3b1e; border-color: #a5842f; color: var(--main-text-color); }
.btn.small { min-height: 32px; padding: 4px 10px; font-size: 14px; }
.btn.danger { border-color: #a04030; color: #e8b0a0; }

.screen h2 { color: #d8b24a; margin-bottom: 14px; font-size: clamp(20px, 4.5vw, 28px); }
.hint { color: var(--helper-text-color); font-style: italic; font-size: 14px; line-height: 1.4; margin-bottom: 12px; max-width: 560px; }
.adesc, .odesc, .cmeta, .muted, .path-hint { color: var(--helper-text-color); }
.pickinfo {
  background: #241d15; border: 1px solid #55452a; border-radius: 8px;
  padding: 10px 14px; margin: 10px 0 16px; min-width: min(85vw, 420px); max-width: 560px; font-size: 14px;
}

/* scenario cards */
#scenariolist, #bookmarklist {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 12px; width: min(100%, 900px); margin-bottom: 16px;
}
.scencard {
  background: #241d15; border: 1px solid #55452a; border-radius: 10px;
  padding: 12px; text-align: left; cursor: pointer; color: inherit; font-size: 14px;
}
.scencard:hover { border-color: #c9a24a; background: #2c241a; }
.scencard h3 { color: #e0c060; font-size: 16px; margin-bottom: 4px; }
.scencard .diff { color: var(--helper-text-color); font-size: 13px; margin-bottom: 6px; }
.scencard p { color: var(--main-text-color); }

.cgform { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-bottom: 16px; }
.cgform label { display: flex; gap: 8px; align-items: center; }
.cgform input[type=text] {
  background: #241d15; border: 1px solid #66522f; color: var(--main-text-color); border-radius: 6px;
  padding: 8px 10px; font-size: 16px; font-family: inherit; width: 200px;
}
.radio { font-size: 15px; }

/* chargen starting-family presets: one stacked, tappable card per preset */
.cgfamily { display: flex; flex-direction: column; gap: 6px; width: min(100%, 420px); }
.cgfamily-card { align-items: flex-start !important; text-align: left; }
.cgfamily-card input { margin-top: 3px; }

/* shareable start seeds: the New Game paste box and the menu's tap-to-copy row */
#ng-seed {
  background: #241d15; border: 1px solid #66522f; color: var(--main-text-color); border-radius: 6px;
  padding: 8px 10px; font-size: 15px; font-family: inherit; width: min(100%, 340px);
  display: block; margin: 0 auto 6px; text-align: center;
}
.seedrow { margin-top: 12px; text-align: center; }
.seedrow label { display: block; color: var(--main-text-color); font-size: 13px; margin-bottom: 4px; }
.seedrow input {
  background: #241d15; border: 1px solid #66522f; color: var(--main-text-color); border-radius: 6px;
  padding: 7px 10px; font-size: 14px; font-family: inherit; width: 100%;
  text-align: center; cursor: copy;
}

/* pick-province mode borrows the game screen as its map backdrop — a prior
   life's topbar/panels must not show through, and the map takes the room */
body.picking #topbar, body.picking #panels { display: none; }
body.picking #mapwrap { flex: 1 1 auto; }

/* pick-province mode: screen collapses to a banner so the map shows through */
.screen.asbar {
  top: auto; bottom: 0; height: auto; justify-content: flex-end;
  background: linear-gradient(0deg, rgba(18,14,10,.96) 60%, rgba(18,14,10,0));
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 45; pointer-events: none;
}
.screen.asbar > * { pointer-events: auto; }
.screen.asbar h2 { font-size: 18px; margin-bottom: 4px; }

/* ---------- game layout ---------- */
#game { position: fixed; inset: 0; display: flex; flex-direction: column; }
#topbar {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px;
  background: #221b13; border-bottom: 2px solid #55452a; flex: 0 0 auto; min-height: 48px;
  padding-top: max(6px, env(safe-area-inset-top));
  padding-left: max(10px, env(safe-area-inset-left));
  padding-right: max(10px, env(safe-area-inset-right));
}
#crest { flex: 0 0 auto; }
/* the identity block takes the leftover middle space with a *zero* basis, so a
   long name can never dictate the row width: on the wrapping mobile bar an auto
   (content-sized) basis would bump the ☰ menu to a new line before the name got
   a chance to shrink. min-width:0 + the name's nowrap/ellipsis do the truncating. */
#tb-id { flex: 1 1 0; min-width: 0; }
#tb-name { font-weight: bold; color: var(--main-text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
#tb-title { color: var(--main-text-color); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the stats never wrap to a second row: when space runs out the row clips
   from the left instead of growing the topbar and bouncing everything below */
#tb-stats { display: flex; gap: 10px; margin-left: auto; flex-wrap: nowrap; justify-content: flex-end; min-width: 0; overflow: hidden; }
/* fixed boxes for running numbers — Georgia's digits are proportional, so
   reserve space instead of relying on tabular figures */
.stat { font-size: 14px; white-space: nowrap; min-width: 58px; flex: 0 0 auto; }
.stat .net { font-size: 12px; } /* last season's net gain, beside the stat */
/* gold/prestige/piety are buttons (hover or tap opens the per-season source
   breakdown); the reset keeps them looking like the plain figures they were,
   and the padding/negative-margin pair gives hit room without moving them */
button.stat {
  background: none; border: 0; border-radius: 5px; cursor: pointer;
  color: inherit; text-align: left;
  padding: 1px 3px; margin: -1px -3px;
}
button.stat:hover { background: #3a2f1e; }
button.stat:active { filter: brightness(1.35); } /* press feedback on touch */
/* the breakdown itself, shared by the hover tooltip and the tap modal */
.bd-row { display: flex; justify-content: space-between; gap: 14px; padding: 1px 0; }
.bd-amt { font-family: Consolas, Menlo, 'Courier New', monospace; white-space: nowrap; }
.bd-total { border-top: 1px solid #55452a; margin-top: 4px; padding-top: 4px; font-weight: bold; }
.bd-note { color: var(--helper-text-color); font-size: 12px; line-height: 1.4; margin-top: 6px; }
#tb-date { color: #d8b24a; font-size: 14px; white-space: nowrap; width: 156px; min-width: 156px; text-align: right; overflow: hidden; }
#tb-portrait { border: 1px solid #66522f; border-radius: 5px; background: #241d15; cursor: pointer; }

#main { flex: 1 1 auto; display: flex; min-height: 0; }
/* on desktop the panel wrapper vanishes so Self/Kin | map | Deeds flank as before */
#panels { display: contents; }
#left { order: 0; }
#mapwrap { order: 1; }
#side { order: 2; }
#mapwrap { flex: 1 1 auto; position: relative; min-width: 0; background: #23405e; }
.travel-picker {
  position: absolute; z-index: 32; left: 12px; bottom: 12px;
  width: min(390px, calc(100% - 24px)); max-height: calc(100% - 24px);
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; overflow: hidden;
  color: var(--main-text-color); background: rgba(31, 25, 17, .96);
  border: 2px solid #7a6234; border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.55);
}
.travel-picker.hidden { display: none; }
.travel-picker h3 { color: #e0c060; margin: 0; font-size: 17px; }
.travel-destination-list {
  overflow-y: auto; display: flex; flex-direction: column; gap: 5px;
  min-height: 0;
}
.travel-destination {
  width: 100%; text-align: left; border: 1px solid #5f5137;
  border-radius: 7px; padding: 8px 9px; color: var(--main-text-color);
  background: #2a2218; cursor: pointer; font-family: inherit;
}
.travel-destination:hover, .travel-destination.selected {
  border-color: #d0ad50; background: #382e1c;
}
.travel-destination:disabled { opacity: .48; cursor: default; }
.travel-destination .adesc { display: block; color: var(--helper-text-color); font-size: 13px; margin-top: 2px; }
body.travel-picking #timebtns { visibility: hidden; }
.raid-picker {
  position: absolute; z-index: 32; left: 12px; bottom: 12px;
  width: min(440px, calc(100% - 24px)); max-height: calc(100% - 24px);
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; overflow: hidden;
  color: var(--main-text-color); background: rgba(31, 25, 17, .96);
  border: 2px solid #7a6234; border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.55);
}
.raid-picker.hidden { display: none; }
.raid-picker-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
.raid-picker h3 { color: #e0c060; margin: 0; font-size: 16px; }
.raid-picker-strategy-wrap { flex: 0 1 140px; }
.raid-picker-strategy-wrap select { min-height: 30px; font-size: 12px; padding: 4px 22px 4px 8px; }
.raid-picker-summary { font-size: 13px; line-height: 1.3; }
.raid-picker-actions {
  display: grid; grid-template-columns: 1fr 1.1fr 1.3fr; gap: 6px;
  align-items: stretch; margin-top: 4px; width: 100%;
}
.raid-picker-actions .btn {
  font-size: 12.5px; padding: 5px 4px; min-height: 32px; height: 32px;
  line-height: 1.15; text-align: center; white-space: nowrap; box-sizing: border-box;
}
.raid-picker-actions .btn.primary { font-weight: bold; }
body.raid-picking #timebtns { visibility: hidden; }
#map { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#maphud { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 6px; z-index: 4; }
.hudbtn { width: 40px; height: 40px; font-size: 19px; padding: 0; opacity: .9; flex: 0 0 auto; }
.hudbtn.on { opacity: 1; box-shadow: 0 0 0 2px #ffd24a inset; }
.market-lens-controls {
  position: absolute; left: 10px; top: 10px; z-index: 3;
  display: grid; grid-template-columns: minmax(400px, auto) minmax(210px, 1fr);
  align-items: stretch; gap: 8px; max-width: calc(100% - 76px); padding: 8px;
  border: 1px solid #806936; border-radius: 9px;
  background: linear-gradient(180deg, rgba(37,31,23,.97), rgba(22,25,29,.97));
  color: var(--main-text-color); box-shadow: 0 5px 18px rgba(0,0,0,.48), inset 0 1px rgba(255,236,181,.05);
}
.market-lens-picker {
  display: grid; grid-template-columns: auto minmax(280px, 1fr);
  align-items: center; gap: 8px; min-width: 0;
}
.market-lens-picker label {
  color: var(--main-text-color); font-size: 13px; font-weight: bold; white-space: nowrap;
}
.market-lens-actions {
  display: grid; grid-template-columns: minmax(138px, 1fr) auto;
  align-items: stretch; gap: 8px; min-width: 0;
}
.market-lens-select-wrap { position: relative; display: block; min-width: 0; }
.market-lens-select-wrap::after {
  content: '▾'; position: absolute; right: 11px; top: 50%; transform: translateY(-53%);
  color: #d8b24a; font-size: 14px; line-height: 1; pointer-events: none;
}
.market-lens-controls select {
  width: 100%; min-height: 42px; padding: 7px 34px 7px 11px;
  -webkit-appearance: none; appearance: none;
  border: 1px solid #8a6e34; border-radius: 6px;
  background: linear-gradient(180deg, #3b3020, #2a2218); color: var(--main-text-color);
  color-scheme: dark; font-size: 15px; line-height: 1.2; cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.05);
}
.market-lens-controls select:hover { border-color: #c9a24a; }
.market-lens-controls select option { background: #2a2218; color: var(--main-text-color); }
.market-lens-controls #market-lens-details {
  min-height: 42px; padding: 7px 14px; white-space: nowrap;
  border-color: #806936; background: linear-gradient(180deg, #453820, #302719);
  color: var(--main-text-color); font-size: 14px; font-weight: bold;
}
.market-price-legend {
  display: grid; grid-template-columns: repeat(3, minmax(58px, 1fr));
  align-items: center; justify-items: center; gap: 5px; min-height: 42px;
  padding: 6px 9px; border: 1px solid #4f4636; border-radius: 6px;
  background: rgba(10,13,16,.42); font-size: 13px; line-height: 1;
}
.market-price-key {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  width: 100%; min-width: 0; font-style: normal; font-weight: bold; text-align: center;
  text-shadow: 0 1px 2px #000;
}
.market-price-key b { min-width: 13px; font-size: 13px; text-align: center; }
.market-price-cheap { color: #6ee5d3; }
.market-price-steady { color: #f0d170; }
.market-price-dear { color: #ff9676; }
.market-lens-controls.hidden { display: none; }
.market-sheet-picker {
  display: grid; grid-template-columns: minmax(0, 1fr);
  align-items: stretch; gap: 4px; margin-bottom: 9px;
}
.market-sheet-label {
  color: var(--main-text-color); font-size: 13px; font-weight: bold; white-space: nowrap;
}
.market-sheet-dropdown { position: relative; min-width: 0; }
.market-sheet-dropdown summary {
  display: flex; align-items: center; width: 100%; min-height: 42px;
  padding: 7px 11px; list-style: none;
  border: 1px solid #8a6e34; border-radius: 6px;
  background: linear-gradient(180deg, #3b3020, #2a2218); color: var(--main-text-color);
  font-size: 15px; line-height: 1.2; cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.05);
}
.market-sheet-dropdown summary::-webkit-details-marker { display: none; }
.market-sheet-dropdown summary::after {
  content: '▾'; margin-left: auto; padding-left: 12px;
  color: #d8b24a; font-size: 14px; line-height: 1;
}
.market-sheet-dropdown summary:hover { border-color: #c9a24a; }
.market-sheet-dropdown summary:focus-visible {
  outline: 2px solid #e0c060; outline-offset: 1px;
}
.market-sheet-dropdown[open] summary {
  border-color: #d0ad50; border-radius: 6px 6px 0 0;
}
.market-sheet-dropdown[open] summary::after { transform: rotate(180deg); }
.market-sheet-options {
  position: absolute; z-index: 6; top: 100%; left: 0; right: 0;
  display: grid; grid-template-columns: minmax(0, 1fr);
  width: 100%; max-height: min(240px, 42vh); overflow-y: auto;
  border: 1px solid #806936; border-top: 0; border-radius: 0 0 6px 6px;
  background: #211b13; box-shadow: 0 8px 18px rgba(0,0,0,.42);
}
.market-sheet-option {
  width: 100%; min-width: 0; min-height: 38px; padding: 7px 11px;
  border: 0; border-top: 1px solid #403522;
  background: #2a2218; color: var(--main-text-color);
  font: 15px/1.2 Georgia, serif; text-align: left; cursor: pointer;
}
.market-sheet-option:first-child { border-top: 0; }
.market-sheet-option:hover, .market-sheet-option:focus-visible { background: #3a3020; }
.market-sheet-option.selected {
  background: #40341f; color: #f0d170; font-weight: bold;
}
.map-finder {
  position: absolute; z-index: 31; left: 10px; top: 10px;
  width: min(340px, calc(100% - 70px)); max-height: calc(100% - 20px);
  display: flex; flex-direction: column; padding: 10px;
  background: linear-gradient(180deg, rgba(37,31,23,.97), rgba(22,25,29,.97));
  border: 1px solid #806936; border-radius: 9px;
  box-shadow: 0 6px 24px rgba(0,0,0,.52), inset 0 1px rgba(255,236,181,.05);
  color: var(--main-text-color);
}
.map-finder-header {
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.map-finder-input-wrap {
  position: relative; flex: 1 1 auto; display: flex; align-items: center; min-width: 0;
}
.map-finder-icon {
  position: absolute; left: 9px; pointer-events: none;
  font-size: 13px; opacity: .7; line-height: 1;
}
.map-finder-input {
  width: 100%; min-height: 36px; padding: 6px 28px 6px 28px;
  border: 1px solid #775f32; border-radius: 6px;
  background: #201a13; color: var(--main-text-color);
  font-family: inherit; font-size: 13px; outline: none;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.35);
}
.map-finder-input:focus {
  border-color: #ffd24a; box-shadow: 0 0 0 1px #ffd24a, inset 0 1px 3px rgba(0,0,0,.35);
}
.map-finder-clear {
  position: absolute; right: 5px; width: 22px; height: 22px; min-width: 22px; min-height: 22px;
  padding: 0; font-size: 11px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; opacity: .7; cursor: pointer; color: var(--main-text-color);
}
.map-finder-clear:hover { opacity: 1; }
.map-finder-close {
  width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0;
  font-size: 14px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.map-finder-results {
  margin-top: 8px; overflow-y: auto; max-height: 320px;
  display: flex; flex-direction: column; gap: 4px; padding-right: 2px;
}
.map-finder-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 9px; text-align: left;
  border: 1px solid #55452a; border-radius: 6px;
  background: #272017; color: var(--main-text-color);
  cursor: pointer; font-family: inherit; font-size: 13px; line-height: 1.3;
  transition: background .12s, border-color .12s;
}
.map-finder-item:hover, .map-finder-item:focus-visible, .map-finder-item.selected {
  background: #3a2f1d; border-color: #d0ad50; outline: none;
}
.map-finder-badge {
  flex-shrink: 0; font-size: 14px; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px; background: rgba(0,0,0,.28);
}
.map-finder-info {
  display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto;
}
.map-finder-name {
  font-weight: bold; color: var(--main-text-color);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.map-finder-name mark {
  background: transparent; color: #ffd24a; text-decoration: underline; font-weight: bold;
}
.map-finder-context {
  font-size: 11px; color: var(--helper-text-color);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px;
}
.map-finder-type {
  font-size: 10px; color: #c09d4e; text-transform: uppercase; letter-spacing: .04em;
  margin-left: auto; flex-shrink: 0; padding-left: 4px;
}
.map-finder-empty {
  padding: 14px 10px; text-align: center; font-size: 13px; color: var(--helper-text-color);
}
.music-controls {
  position: absolute; z-index: 31; left: 10px; top: 10px;
  width: min(320px, calc(100% - 70px)); max-height: calc(100% - 20px);
  overflow-y: auto; padding: 12px;
  background: rgba(30,24,16,.96); border: 1px solid #806936;
  border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.5);
}
.music-overlay-close {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px;
  min-width: 26px; min-height: 26px; padding: 0; line-height: 1;
  font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.music-track-header { margin-bottom: 8px; padding-right: 28px; }
.music-track-title { display: block; font-size: 15px; color: #f0d170; }
.music-track-bank { font-size: 12px; color: var(--helper-text-color); margin-top: 2px; }
.music-track-kvs { display: grid; gap: 4px; margin: 8px 0; font-size: 13px; }
.music-track-kvs .kv { justify-content: space-between; }
.music-track-actions {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  margin: 10px 0 0;
}
.music-track-actions .btn { width: 100%; }
.music-track-navigation {
  grid-column: 1 / -1; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
.music-track-navigation .btn {
  min-width: 0; padding-inline: 6px; white-space: nowrap;
}
.music-bank-row {
  margin: 8px 0; padding: 10px; background: #241d15;
  border: 1px solid #55452a; border-radius: 8px;
}
.music-bank-row .adesc { display: block; color: var(--helper-text-color); font-size: 12px; margin: 3px 0 8px; }
.music-bank-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.music-download-progress { margin: 8px 0; color: #c9a24a; font-size: 13px; }

#toasts { position: absolute; left: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 6px; max-width: 75%; pointer-events: none; }
/* the container lets the map through; each toast itself takes the tap that dismisses it */
.toast {
  background: rgba(30,24,16,.92); border: 1px solid #66522f; border-radius: 6px;
  padding: 8px 12px; font-size: 14px; color: var(--main-text-color); animation: toastin .25s;
  pointer-events: auto; cursor: pointer;
}
.event-receipt-toast {
  position: relative; z-index: 85; order: 1; max-width: 680px;
  text-align: left; font-family: inherit;
  box-shadow: 0 6px 24px rgba(0,0,0,.58);
  animation: toastin .25s;
}
.event-receipt-headline { display: block; margin-bottom: 6px; color: var(--main-text-color); }
@keyframes toastin { from { opacity: 0; } to { opacity: 1; } }

/* coachmarks: beginner lessons anchored to the control they teach. Each
   stays open until dismissed, with its target lit; below the modal layer so
   a dialog always wins the screen (the lesson simply waits for it). Only the
   buttons take pointer input — a lesson never blocks the map or a panel
   beneath it. */
.coachmark {
  position: fixed; z-index: 55; max-width: 300px;
  background: rgba(30,24,16,.97); border: 1px solid #c9a24a; border-radius: 8px;
  padding: 10px 12px; font-size: 14px; color: var(--main-text-color);
  box-shadow: 0 6px 24px rgba(0,0,0,.58); animation: toastin .25s;
  pointer-events: none;
}
.coachmark-text { margin-bottom: 8px; }
.coachmark-actions { display: flex; gap: 7px; }
.coachmark-actions button { pointer-events: auto; }
/* Got it keeps the bottom-left; Back and Next group at the bottom-right. On
   the final lesson (no Next) Got it takes the bottom-right slot. */
.coachmark-dismiss + .coachmark-back,
.coachmark-dismiss + .coachmark-next,
.coachmark-back + .coachmark-dismiss { margin-left: auto; }
/* the save lesson re-presents above the open menu sheet, beneath modals'
   tooltip layer */
.coachmark.overmodal { z-index: 70; }
.coachmark-arrow {
  position: absolute; width: 12px; height: 12px; margin-left: -6px;
  background: rgba(30,24,16,.97); border: 1px solid #c9a24a;
  transform: rotate(45deg);
}
.coachmark.arrow-top .coachmark-arrow { top: -7px; border-right: none; border-bottom: none; }
.coachmark.arrow-bottom .coachmark-arrow { bottom: -7px; border-top: none; border-left: none; }
.coachmark.noarrow { left: 10px; bottom: 10px; }
.coachmark.noarrow .coachmark-arrow { display: none; }
.coachmark-lit {
  outline: 2px solid #c9a24a; outline-offset: 2px;
  animation: coachlit 1.4s ease-in-out infinite;
}
@keyframes coachlit {
  0%, 100% { outline-color: #c9a24a; }
  50% { outline-color: rgba(201,162,74,.25); }
}

#side {
  flex: 0 0 340px; display: flex; flex-direction: column;
  background: #201a12; border-left: 2px solid #55452a;
  min-width: 0; min-height: 0;
}
#left {
  flex: 0 0 290px; display: flex; flex-direction: column;
  background: #201a12; border-right: 2px solid #55452a;
  min-width: 0; min-height: 0;
}
#lefttabs { display: flex; flex: 0 0 auto; }
#leftbody { flex: 1 1 auto; overflow-y: auto; padding: 10px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
#sidetabs { display: flex; flex: 0 0 auto; }
.tab {
  flex: 1; background: #191410; color: var(--main-text-color); border: none; border-bottom: 2px solid #55452a;
  padding: 9px 2px; font-size: 14px; cursor: pointer; min-height: 40px;
}
.tab.active { background: #201a12; color: #e0c060; border-bottom-color: #c9a24a; }
#sidebody { flex: 1 1 auto; overflow-y: auto; padding: 10px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.tabpane { display: none; }
.tabpane.active { display: block; }
#timebtns { display: flex; gap: 6px; margin: 8px; flex: 0 0 auto; }
/* flex-basis 0: button widths come only from the container, never from label text */
#btn-endturn {
  flex: 1 1 0; min-width: 0; text-align: left;
  padding-left: 10px; padding-right: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#btn-endturn .keyhint { margin-right: 5px; }
/* icon-only time buttons hold two Emoji-property glyphs (skip = two triangles,
   auto = gear + tick). The browser allows a line break between two such glyphs
   even when they render monochrome, so in a fixed-width box without nowrap they
   wrap and stack. Keep them on one line and trim the wide .bigbtn text padding
   so both glyphs sit centered. */
#btn-skip, #btn-auto { white-space: nowrap; padding-left: 6px; padding-right: 6px; flex: 0 0 64px; }
.pp { display: inline-block; }
.actionbtn.focused { border-color: #e0c060; background: #3a2f1c; }

/* side panel content */
.panelh { color: #d8b24a; font-size: 16px; margin: 10px 0 6px; border-bottom: 1px solid #40331f; padding-bottom: 3px; }
.panelh:first-child { margin-top: 0; }
.actionbtn {
  display: block; width: 100%; flex-shrink: 0; text-align: left; margin-bottom: 7px;
  background: #2a2216; border: 1px solid #55452a; color: var(--main-text-color); border-radius: 8px;
  padding: 9px 12px; font-size: 15px; cursor: pointer; min-height: 44px;
}
.actionbtn:hover { border-color: #c9a24a; }
a.actionbtn { text-decoration: none; }
.actionbtn:disabled { opacity: .45; cursor: default; }
.actionbtn .adesc { display: block; color: var(--helper-text-color); font-size: 13px; line-height: 1.35; }
.actionbtn.done { border-style: dashed; opacity: .55; }
.interaction-card {
  display: flex; flex-direction: column; gap: 10px; margin-top: 12px;
}
.interaction-context { text-align: left; }
.interaction-context-row {
  display: grid; grid-template-columns: minmax(96px, .62fr) minmax(0, 1.62fr);
  gap: 8px; min-width: 0; padding: 2px 0;
}
.interaction-context-row span {
  color: var(--helper-text-color); font-size: 11px; font-weight: bold;
  letter-spacing: .04em; text-transform: uppercase; padding-top: 2px;
}
.interaction-context-row b {
  min-width: 0; color: var(--main-text-color); font-size: 14px; font-weight: normal;
  overflow-wrap: anywhere;
}
.interaction-standing {
  padding: 9px 10px; border: 1px solid #65512d;
  border-radius: 8px; background: #241d15;
}
.interaction-standing > div {
  display: flex; justify-content: space-between; gap: 12px;
}
.interaction-standing > div > span:first-child { color: #d8b24a; }
.interaction-standing p {
  margin: 4px 0 0; color: var(--helper-text-color); font-size: 13px; line-height: 1.4;
}
.interaction-commitments {
  display: grid; gap: 1px; overflow: hidden;
  border: 1px solid #65512d; border-radius: 8px; background: #493b25;
}
.interaction-commitment {
  display: flex; padding: 8px 10px; flex-direction: column; gap: 2px;
  background: #241d15;
}
.interaction-commitment.urgent {
  border-left: 3px solid #b86c52; padding-left: 7px;
}
.interaction-commitment b {
  color: #e0c060; font-size: 13px; font-weight: normal;
}
.interaction-commitment span {
  color: var(--helper-text-color); font-size: 13px; line-height: 1.35;
}
.interaction-action-group h4 {
  margin: 2px 0 6px; padding-bottom: 3px;
  border-bottom: 1px solid #40331f;
  color: #d8b24a; font-size: 14px; font-weight: normal;
}
.interaction-action-label { display: block; color: var(--main-text-color); }
.interaction-action .interaction-action-detail { margin-top: 2px; }
.interaction-action .interaction-blocked {
  margin-top: 4px; color: #d09a78; font-weight: bold;
}
.interaction-action .interaction-consequence {
  margin-top: 4px; color: #c9aa72;
}
.interaction-action:disabled { opacity: .78; }
.interaction-action:disabled .interaction-action-label { color: var(--main-text-color); }
.ongoing-commitments {
  margin-bottom: 10px; overflow: hidden;
  border: 1px solid #65512d; border-radius: 9px; background: #211a12;
}
.ongoing-commitments-head {
  border-bottom: 1px solid #493b25;
  background: linear-gradient(180deg, #302719, #282015);
}
.ongoing-commitments.collapsed .ongoing-commitments-head { border-bottom: 0; }
.ongoing-commitments-head h3 {
  margin: 0; color: #d8b24a; font-size: 15px; font-weight: normal;
}
.ongoing-commitments-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 44px; padding: 8px 10px; border: 0;
  background: transparent; color: #d8b24a; font: inherit; text-align: left;
  cursor: pointer;
}
.ongoing-commitments-toggle:hover,
.ongoing-commitments-toggle:focus-visible { background: #362b1b; }
.ongoing-commitments-head p {
  margin: -4px 10px 8px; color: var(--helper-text-color); font-size: 12px; line-height: 1.4;
}
.ongoing-commitment-list {
  display: grid; gap: 1px; background: #493b25;
}
.ongoing-commitment-row {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 7px; align-items: center; width: 100%; min-width: 0; min-height: 52px;
  margin: 0; padding: 7px 9px; border: 0; border-radius: 0;
  background: #241d15; color: var(--main-text-color); font: inherit; text-align: left;
}
.ongoing-commitment-row[data-commitment="focus"] { display: none; }
button.ongoing-commitment-row { cursor: pointer; }
button.ongoing-commitment-row:hover,
button.ongoing-commitment-row:focus-visible { background: #302619; }
.ongoing-commitment-row.disabled { opacity: .72; }
.ongoing-commitment-icon {
  color: #d8b24a; font-size: 19px; text-align: center;
}
.ongoing-commitment-copy { min-width: 0; }
.ongoing-commitment-copy b {
  display: block; color: var(--main-text-color); font-size: 14px; font-weight: normal;
}
.ongoing-commitment-copy small {
  display: block; min-width: 0; margin-top: 1px; color: var(--helper-text-color);
  font-size: 12px; line-height: 1.4; overflow-wrap: anywhere;
}
.ongoing-commitment-edit {
  color: #d8b24a; font-size: 12px; white-space: nowrap;
}
.ongoing-commitment-row.disabled .ongoing-commitment-edit { color: var(--helper-text-color); }
.person-assignment-card { position: relative; padding: 10px 12px; }
.person-assignment-card.selected {
  border-color: #c9a24a; background: #342a1a;
}
.person-assignment-card.selected:disabled { opacity: 1; cursor: default; }
.person-assignment-card > .keyhint {
  position: absolute; top: 12px; left: 12px; margin: 0;
}
.person-assignment-card > .keyhint + .person-assignment-head { padding-left: 27px; }
.person-assignment-head {
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.person-assignment-choice {
  flex: 0 0 auto; color: #d8b24a; font-size: 16px;
}
.person-assignment-head .pface, .person-assignment-head .crest {
  flex: 0 0 auto;
}
.person-assignment-icon {
  display: inline-flex; flex: 0 0 34px; width: 34px; min-height: 40px;
  align-items: center; justify-content: center; font-size: 24px;
}
.person-assignment-name {
  min-width: 0; flex: 1 1 auto; color: var(--main-text-color); font-size: 14px;
}
.person-assignment-eligibility {
  flex: 0 0 auto; max-width: 42%; padding: 2px 6px;
  border: 1px solid #6b603f; border-radius: 999px;
  color: #b9c98a; font-size: 12px; text-align: right;
}
.person-assignment-card.unavailable .person-assignment-eligibility {
  color: #d09a78; border-color: #704737;
}
.person-assignment-rows {
  display: block; margin: 8px 0 0 58px; padding-top: 5px;
  border-top: 1px solid #463923;
}
.person-assignment-row {
  display: grid; grid-template-columns: minmax(90px, .72fr) minmax(0, 1.5fr);
  gap: 8px; padding: 2px 0; font-size: 13px; line-height: 1.4;
}
.person-assignment-label { color: var(--helper-text-color); }
.person-assignment-value { min-width: 0; color: var(--main-text-color); }
.person-assignment-row.consequence .person-assignment-value { color: #d0ad76; }
.asset-effect-summary {
  display: block; width: 100%; margin-top: 8px; text-align: left;
}
.asset-effect-cell {
  display: grid; grid-template-columns: minmax(96px, .62fr) minmax(0, 1.62fr);
  gap: 8px; min-width: 0; padding: 2px 0;
}
.asset-effect-label {
  color: var(--helper-text-color); font-size: 11px; font-weight: bold;
  letter-spacing: .04em; text-transform: uppercase; padding-top: 2px;
}
.asset-effect-value {
  min-width: 0; color: var(--main-text-color); font-size: 13px; line-height: 1.4;
  overflow-wrap: anywhere;
}
.asset-effect-cell.unaffordable .asset-effect-value { color: #d79579; }
.fullsheet-modal .asset-effect-summary {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}
.asset-owned-list { display: grid; gap: 8px; margin: 6px 0 10px; }
.asset-owned-row {
  padding: 9px 10px; border: 1px solid #55452a; border-radius: 8px;
  background: #2a2216; color: var(--main-text-color); font-size: 14px;
}
.asset-owned-row > b { display: block; color: var(--main-text-color); }
.fort-asset-row { border-style: double; }
.fort-detail { margin: 5px 2px 10px; line-height: 1.4; }
.fort-next-tier {
  margin: 8px 0; padding: 8px 10px; border-left: 3px solid #a5842f;
  background: #211a12; color: var(--main-text-color);
}
.fort-next-tier > b, .fort-next-tier .adesc { display: block; }
.fort-next-tier .adesc { margin-top: 3px; color: var(--helper-text-color); font-size: 12px; }

/* Better Household uses the same dense scan rhythm as Technology. */
.household-modal .modalcard { width: min(94vw, 780px); }
.household-summary {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; margin-bottom: 6px; overflow: hidden;
  border: 1px solid #493c27; border-radius: 7px; background: #493c27;
}
.household-summary .kv {
  min-width: 0; padding: 6px 8px; flex-direction: column;
  justify-content: flex-start; gap: 2px; background: #211a13;
}
.household-summary .kv > span:first-child {
  color: var(--helper-text-color); font-size: 11px; font-weight: bold;
  letter-spacing: .04em; text-transform: uppercase;
}
.household-summary .kv b { font-size: 14px; }
.household-intro, .household-warning, .household-section-hint {
  color: var(--helper-text-color); font-size: 12px; line-height: 1.4;
  overflow-wrap: anywhere;
}
.household-intro { margin: 0 2px 6px; }
.household-warning { margin: 5px 2px 7px; }
.household-catalogue-section { margin: 0 0 11px; }
.household-catalogue-section h4 {
  margin: 7px 0 4px; color: #d3ac4e; font-size: 13px;
  letter-spacing: .04em;
}
.household-catalogue-section h5 {
  margin: 8px 0 4px; color: #bca16a; font-size: 11px;
  letter-spacing: .04em; text-transform: uppercase;
}
.household-section-hint { margin: -1px 2px 5px; }
.household-catalogue-list { display: grid; gap: 4px; }
.household-entry.actionbtn, .household-entry {
  position: relative; display: block; width: 100%; min-height: 48px;
  margin: 0; padding: 0; border: 1px solid #4f422d;
  border-radius: 7px; background: #241d15; color: var(--main-text-color);
  text-align: left;
}
.household-entry.actionbtn:hover,
.household-entry.actionbtn:focus-visible {
  border-color: #b28a35; background: #2e2518;
}
.household-entry.household-entry-active,
.household-entry.household-entry-owned {
  border-color: #47684b; background: #20291f;
}
.household-entry.household-entry-dormant { border-style: dashed; opacity: .72; }
.household-entry.actionbtn > .keyhint {
  position: absolute; z-index: 1; top: 50%; left: 7px;
  margin: 0; transform: translateY(-50%);
}
.household-entry-layout {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(104px, auto);
  gap: 8px; align-items: center; width: 100%; min-height: 48px;
  padding: 6px 9px 6px 35px;
}
.household-entry-icon { font-size: 21px; text-align: center; }
.household-entry-copy { min-width: 0; }
.household-entry-copy b {
  display: block; overflow: hidden; color: var(--main-text-color); font-size: 14px;
  text-overflow: ellipsis; white-space: nowrap;
}
.household-entry-copy small {
  display: block; overflow: hidden; color: var(--helper-text-color); font-size: 12px;
  line-height: 1.3; text-overflow: ellipsis; white-space: nowrap;
}
.household-entry-copy .household-entry-status,
.household-entry-copy .household-entry-effect {
  display: -webkit-box; max-height: 2.6em; color: var(--main-text-color);
  white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.household-entry-copy .household-entry-status { color: var(--helper-text-color); }
.household-entry-cost {
  display: flex; min-width: 104px; flex-direction: column;
  align-items: flex-end; color: #d0ad54; font-size: 13px; text-align: right;
}
.household-entry-cost b { font-weight: normal; }
.household-entry-cost small {
  color: var(--helper-text-color); font-size: 11px; line-height: 1.3;
}
.household-entry-cost small:last-child { color: var(--helper-text-color); font-size: 11px; }
.household-entry-cost.unaffordable b,
.household-entry-cost.unaffordable small:first-of-type { color: #d79579; }
.household-empty {
  padding: 8px 9px; border: 1px dashed #493c27; border-radius: 7px;
  color: var(--helper-text-color); font-size: 12px; overflow-wrap: anywhere;
}
@media (pointer: coarse) {
  .household-entry-layout { padding-left: 9px; }
}
.household-standard-modal .modalcard { width: min(92vw, 660px); }
.household-standard-detail {
  display: grid; gap: 8px; margin-bottom: 8px;
}
.household-standard-description {
  margin: 0; color: var(--main-text-color); line-height: 1.4;
}
.household-standard-current {
  padding: 8px 10px; border: 1px solid #55452a; border-radius: 8px;
  background: #241d15;
}
.household-standard-eyebrow,
.household-standard-choice-terms small {
  display: block; color: var(--helper-text-color); font-size: 10px; font-weight: bold;
  letter-spacing: .04em; text-transform: uppercase;
}
.household-standard-current-line {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-top: 2px;
}
.household-standard-current-line b {
  min-width: 0; color: var(--main-text-color); font-size: 14px;
}
.household-standard-current-line span {
  flex: 0 0 auto; color: var(--main-text-color); font-size: 12px;
}
.household-standard-current p {
  margin: 3px 0 0; color: var(--helper-text-color); font-size: 12px; line-height: 1.35;
}
.household-standard-rules {
  display: grid; grid-template-columns: minmax(135px, .55fr) minmax(0, 1.45fr);
  gap: 10px; align-items: start; padding: 7px 9px;
  border-left: 2px solid #806733; color: var(--helper-text-color);
  font-size: 11px; line-height: 1.35;
}
.household-standard-rules b { color: var(--main-text-color); font-weight: normal; }
.household-standard-choice.actionbtn {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1fr) auto; gap: 7px 16px;
  margin: 0 0 8px; padding: 10px 12px; text-align: left;
}
.household-standard-choice > .keyhint {
  position: absolute; top: 10px; left: 12px; margin: 0;
}
.household-standard-choice > .keyhint + .household-standard-choice-head {
  padding-left: 27px;
}
.household-standard-choice-head {
  display: flex; grid-column: 1 / -1; align-items: baseline;
  justify-content: space-between; gap: 12px; min-width: 0;
}
.household-standard-choice-head b {
  min-width: 0; color: var(--main-text-color); font-size: 14px; font-weight: normal;
}
.household-standard-choice-head > span {
  flex: 0 0 auto; color: #d8b24a; font-size: 20px; line-height: 1;
}
.household-standard-choice-effect {
  min-width: 0; align-self: center; color: var(--helper-text-color);
  font-size: 12px; line-height: 1.35; overflow-wrap: anywhere;
}
.household-standard-choice-terms {
  display: grid; grid-template-columns: repeat(2, minmax(90px, 1fr));
  gap: 8px; min-width: 210px;
}
.household-standard-choice-terms > span {
  padding-left: 8px; border-left: 1px solid #4d4029;
}
.household-standard-choice-terms b {
  display: block; margin-top: 1px; color: #d8bd7b;
  font-size: 12px; font-weight: normal; line-height: 1.25;
  overflow-wrap: anywhere;
}
.household-standard-choice-terms b.unaffordable { color: #d79579; }
.household-standard-choice-blocked {
  grid-column: 1 / -1; margin: 0; color: #c29173;
}
.enterprise-worker-lock {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px;
  align-items: start; margin: 0 0 10px; padding: 10px 12px;
  border: 1px solid #55452a; border-radius: 8px;
  background: #211b12; color: var(--main-text-color); cursor: pointer;
}
.enterprise-worker-lock input { margin-top: 3px; }
.enterprise-worker-lock .adesc {
  grid-column: 2; color: var(--helper-text-color); font-size: 12px; line-height: 1.35;
}
.enterprise-worker-lock.disabled { opacity: .58; cursor: default; }
.enterprise-catalogue-summary {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; margin: 8px 0 12px;
}
.enterprise-catalogue-summary .kv { margin: 0; }
.enterprise-catalogue-group { margin-top: 5px; }
.enterprise-purchase-option { position: relative; }
.enterprise-purchase-option.blocked {
  border-style: dashed; border-color: #704737; opacity: 1;
}
.enterprise-purchase-option.warning { border-color: #8a6b31; }
.enterprise-purchase-option.ready { border-color: #566d3b; }
.enterprise-purchase-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; min-width: 0; margin-bottom: 3px;
}
.enterprise-purchase-head > span:first-child {
  min-width: 0; color: var(--main-text-color); font-weight: bold;
  overflow-wrap: anywhere;
}
.enterprise-purchase-state {
  flex: 0 1 auto; max-width: 48%; padding: 2px 6px;
  border: 1px solid #6b603f; border-radius: 999px;
  color: #b9c98a; font-size: 11px; text-align: right;
  overflow-wrap: anywhere;
}
.enterprise-purchase-option.blocked .enterprise-purchase-state,
.enterprise-purchase-option.blocked .enterprise-purchase-reason {
  color: #d09a78; border-color: #704737;
}
.enterprise-purchase-option.warning .enterprise-purchase-state,
.enterprise-purchase-option.warning .enterprise-purchase-reason {
  color: #e0bd79; border-color: #8a6b31;
}
.enterprise-purchase-reason { margin-top: 4px; font-weight: bold; }
.enterprise-purchase-review { margin-top: 2px; }
.enterprise-requirement-summary,
.enterprise-requirement-warning,
.enterprise-management-status,
.enterprise-worker-empty {
  display: flex; flex-direction: column; gap: 3px;
  margin: 0 0 10px; padding: 10px 12px;
  border: 1px solid #55452a; border-radius: 8px; background: #211b12;
}
.enterprise-requirement-summary.ready,
.enterprise-management-status.staffed { border-color: #566d3b; }
.enterprise-requirement-summary.warning,
.enterprise-requirement-warning,
.enterprise-management-status.idle { border-color: #8a6b31; }
.enterprise-requirement-summary.blocked,
.enterprise-management-status.blocked,
.enterprise-worker-empty { border-color: #704737; }
.enterprise-requirement-summary span,
.enterprise-requirement-warning span,
.enterprise-management-status span,
.enterprise-worker-empty span {
  color: var(--helper-text-color); font-size: 12px; line-height: 1.4;
}
.enterprise-requirement-list { display: grid; gap: 8px; margin-bottom: 10px; }
.enterprise-requirement-row {
  display: flex; flex-direction: column; gap: 3px; padding: 9px 10px;
  border-left: 3px solid #704737; background: #241d15;
}
.enterprise-requirement-row b { color: #d09a78; font-size: 13px; }
.enterprise-requirement-row span,
.enterprise-management-guidance { color: var(--helper-text-color); font-size: 12px; }
.enterprise-staffing-hint { margin: 8px 0; }
.enterprise-staffing-modal .modalcard { width: min(96vw, 820px); }
.enterprise-staffing-notice {
  margin-bottom: 10px; border-color: #a87932; color: #e0bd79;
}
.enterprise-staffing-totals {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px; align-items: center; margin-bottom: 12px; padding: 10px 12px;
  border: 1px solid #66522f; border-radius: 8px; background: #211a12;
}
.enterprise-staffing-totals > div:not(.enterprise-staffing-arrow) {
  display: flex; flex-direction: column; gap: 2px;
}
.enterprise-staffing-totals span, .enterprise-staffing-comparison span {
  color: var(--helper-text-color); font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em;
}
.enterprise-staffing-totals b { color: var(--main-text-color); font-size: 15px; }
.enterprise-staffing-arrow { color: #d8b24a; font-size: 20px; }
.enterprise-staffing-rows { display: grid; gap: 8px; }
.enterprise-staffing-row {
  padding: 10px 12px; border: 1px solid #55452a; border-radius: 8px;
  background: #2a2216;
}
.enterprise-staffing-row.locked { border-color: #75673e; }
.enterprise-staffing-row.unresolved { border-color: #704737; }
.enterprise-staffing-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.enterprise-staffing-name {
  min-width: 0; overflow-wrap: anywhere; color: var(--main-text-color); font-weight: bold;
}
.enterprise-staffing-status {
  flex: 0 1 auto; max-width: 48%; overflow-wrap: anywhere; padding: 2px 6px;
  border: 1px solid #6b603f; border-radius: 999px;
  color: #b9c98a; font-size: 11px; text-align: right;
}
.enterprise-staffing-row.unresolved .enterprise-staffing-status {
  border-color: #704737; color: #d09a78;
}
.enterprise-staffing-place { margin-top: 2px; color: var(--helper-text-color); font-size: 12px; }
.enterprise-staffing-comparison {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; margin-top: 8px;
}
.enterprise-staffing-comparison > div {
  display: flex; flex-direction: column; min-width: 0; padding: 7px 8px;
  border: 1px solid #463923; border-radius: 6px; background: #241d15;
}
.enterprise-staffing-comparison b {
  overflow-wrap: anywhere; color: var(--main-text-color); font-size: 13px;
}
.enterprise-staffing-comparison small { color: var(--helper-text-color); font-size: 11px; }
.enterprise-staffing-change, .enterprise-staffing-reason {
  margin-top: 7px; color: var(--helper-text-color); font-size: 12px; line-height: 1.4;
}
.enterprise-staffing-reason { color: #d09a78; }
.actiongroup-toggle {
  display:flex; justify-content:space-between; gap:10px; width:100%; min-height:44px;
  margin:10px 0 6px; padding:9px 10px; border:1px solid #55452a; border-radius:8px;
  background:#211b12; color:#d8b24a; font:inherit; text-align:left; cursor:pointer;
}
.actiongroup-toggle:hover { border-color:#c9a24a; }
.actiongroup-toggle span:last-child { color:var(--helper-text-color); font-size:13px; white-space:nowrap; }
.actionsubhead { color:var(--helper-text-color); font-size:13px; margin:7px 3px 5px; }
.kv { display: flex; justify-content: space-between; font-size: 14px; padding: 3px 0; }
.kv b { color: var(--main-text-color); font-weight: normal; }
.land-section {
  margin: 0 0 9px; padding: 7px 9px 8px;
  border: 1px solid #40331f; border-radius: 7px; background: #1c1710;
}
.land-section-title {
  margin: 0 0 4px; color: #bfa45d; font-size: 12px; font-weight: normal;
  letter-spacing: .06em; line-height: 1.3; text-transform: uppercase;
}
.land-kv {
  display: grid; grid-template-columns: minmax(112px, .85fr) minmax(0, 1.15fr);
  align-items: start; gap: 10px; min-width: 0; padding: 3px 0;
}
.land-kv > span, .land-kv > b { min-width: 0; overflow-wrap: anywhere; }
.land-kv > span { color: var(--main-text-color); line-height: 1.35; }
.land-kv > b { line-height: 1.35; text-align: right; }
.land-kv-detail { grid-template-columns: minmax(0, 1fr); gap: 1px; padding: 5px 0; }
.land-kv-detail > span { color: var(--helper-text-color); font-size: 12px; }
.land-kv-detail > b { text-align: left; }
.land-section .progressnote { margin: 6px 0 0; }
.land-market-card {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center; gap: 9px; width: 100%; min-height: 58px;
  margin-top: 8px; padding: 8px 10px;
  border: 1px solid #66522f; border-radius: 7px;
  background: linear-gradient(135deg, #2d2518, #211b14); color: var(--main-text-color);
  font: inherit; text-align: left; cursor: pointer;
  box-shadow: inset 0 1px rgba(255,236,181,.04);
}
.land-market-card:hover { border-color: #c9a24a; background: #33291a; }
.land-market-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 1px solid #705b32; border-radius: 50%;
  background: #1a1610; color: #e0c060; font-size: 17px;
}
.land-market-card-copy { min-width: 0; }
.land-market-card-copy b {
  display: block; color: var(--main-text-color); font-size: 15px; line-height: 1.3;
}
.land-market-card-copy small {
  display: block; margin-top: 3px; color: var(--helper-text-color); font-size: 13px; line-height: 1.35;
}
.land-market-card-copy .market-price-cheap,
.land-market-card-copy .market-price-steady,
.land-market-card-copy .market-price-dear { font-weight: bold; }
.land-market-card-open { color: #a98b45; font-size: 24px; line-height: 1; }
.land-section .land-settlements {
  grid-template-columns: minmax(112px, .85fr) minmax(0, 1.15fr);
  gap: 10px; padding: 3px 0;
}
.land-section .land-settlements > span { color: var(--main-text-color); line-height: 1.35; }
.land-section .land-settlements .settlist { line-height: 1.35; }
.settblock {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start;
  gap: 0 10px; font-size: 14px; padding: 3px 0;
}
.settblock.council-claim > b { text-align: right; }
.settblock.council-claim > small {
  grid-column: 1 / -1; color: var(--helper-text-color); line-height: 1.35;
  overflow-wrap: anywhere;
}
.settlist {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: 2px 12px; min-width: 0;
}
.settlist > * { white-space: nowrap; }
.traitchip {
  display: inline-block; background: #2c2418; border: 1px solid #55452a; border-radius: 12px;
  padding: 2px 9px; margin: 2px 3px 2px 0; color: inherit; font: inherit;
  font-size: 13px; line-height: 1.45; cursor: help;
}
.modifier-list { padding: 2px 0 6px; }
.modifier-choice-preview {
  color: var(--main-text-color);
}
button.modifierchip {
  color: inherit; font-family: inherit; line-height: inherit; text-align: left;
}
button.modifierchip:hover, button.modifierchip:focus-visible {
  border-color: #a5842f; background: #3a2f1e; outline: none;
}
.modifier-duration { color: var(--helper-text-color); margin-left: 4px; }
.traitgroups { display: grid; gap: 5px; }
.traitgroup { min-width: 0; }
.traitgroup-label {
  color: var(--helper-text-color); font-size: 12px; line-height: 1.25; margin: 2px 0 1px;
  text-transform: uppercase; letter-spacing: .04em;
}
.traitgroup-chips { display: flex; flex-wrap: wrap; align-items: center; }
.skillrow { display: flex; align-items: center; gap: 6px; font-size: 14px; margin: 3px 0; }
.skillrow .skill-label {
  width: 86px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.skillrow button.skill-label {
  padding: 0; border: 0; background: transparent; font: inherit;
  text-align: left;
}
.skillrow .bar { flex: 1; height: 7px; background: #191410; border-radius: 4px; overflow: hidden; }
.skillrow .bar i { display: block; height: 100%; background: #c9a24a; }
.skillrow .bar i.over { background: #ffe08a; box-shadow: 0 0 4px #c9a24a; }
.skillrow .num { width: 20px; text-align: right; color: var(--main-text-color); }
.charrow {
  display: flex; gap: 8px; align-items: center; padding: 6px; margin-bottom: 5px;
  background: #241d15; border: 1px solid #40331f; border-radius: 8px; font-size: 13px;
}
.charrow[data-cid] { cursor: pointer; }
.charrow[data-cid]:hover { border-color: #c9a24a; }
.linklike { color: #d8b24a; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.linklike:hover { color: var(--main-text-color); }
/* a link-styled button (settlement names in the Land panel): looks like the
   span variant but keeps native focus + Enter/Space activation. The color
   repeats here so it beats the `.kv b` value styling (equal specificity,
   later rule wins) */
button.linklike { background: none; border: 0; padding: 0; font: inherit; color: #d8b24a; }
.realm-highlight-summary, .main-text-color-summary, .helper-text-color-summary {
  display: flex; align-items: center; gap: 11px; margin: 4px 0 10px;
  padding: 9px 10px; border: 1px solid #493c27; border-radius: 7px;
  background: #211a13;
}
.realm-highlight-summary .adesc, .main-text-color-summary .adesc,
.helper-text-color-summary .adesc { margin: 0; }
.realm-highlight-swatch {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid #f8f2e0; box-shadow: 0 0 0 2px #17120d;
}
.main-text-color-swatch, .helper-text-color-swatch {
  display: inline-flex; flex: 0 0 42px; width: 42px; height: 42px;
  align-items: center; justify-content: center; border: 1px solid #66522f;
  border-radius: 7px; background: #2a2216;
  font-size: 15px; font-weight: bold;
}
.main-text-color-swatch { color: var(--main-text-color); }
.helper-text-color-swatch { color: var(--helper-text-color); }
.realm-highlight-opacity {
  margin: 0 0 10px; padding: 9px 10px; border: 1px solid #493c27;
  border-radius: 7px; background: #211a13;
}
.realm-highlight-opacity-label {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: #d8b24a; font-weight: bold;
}
.realm-highlight-opacity-label output { color: var(--main-text-color); }
.realm-highlight-opacity input[type="range"] {
  display: block; width: 100%; min-height: 44px; margin: 2px 0 0;
}
.realm-highlight-opacity .adesc { margin: 0; }
.realm-highlight-actions, .main-text-color-actions, .helper-text-color-actions {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 4px;
}
.realm-highlight-actions .btn, .main-text-color-actions .btn,
.helper-text-color-actions .btn {
  flex: 1 1 190px; min-height: 44px;
}
.realm-highlight-change, .main-text-color-change, .helper-text-color-change {
  position: relative; display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
}
.realm-highlight-input, .main-text-color-input, .helper-text-color-input {
  position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer;
}
.realm-highlight-change:focus-within, .main-text-color-change:focus-within,
.helper-text-color-change:focus-within {
  outline: 2px solid #e0c060; outline-offset: 1px;
}
/* a building's flavor line under its kv row in the settlement view */
.settdesc { margin: 0 0 8px; }
.sett-demolish { display: block; margin: 0 0 12px auto; min-height: 36px; padding: 6px 10px; }
.charcard[data-cid] { cursor: pointer; }
.charcard[data-cid]:hover { border-color: #c9a24a; }
.charrow .cname { color: var(--main-text-color); }
.charrow .cmeta { color: var(--helper-text-color); font-size: 12px; }
.charrow .cop { margin-left: auto; font-size: 12px; white-space: nowrap; }
.op-good, .adesc.op-good { color: #9fc06a; }
.op-bad, .adesc.op-bad, .adesc.warnote { color: #d07050; }
.op-mid, .adesc.op-mid { color: var(--helper-text-color); }
.logentry { font-size: 13px; padding: 4px 0; border-bottom: 1px dotted #33291d; }
.logentry .ldate { color: var(--helper-text-color); font-size: 11px; }
.chronicle-filters {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 9px; border: 1px solid #66522f; border-radius: 8px;
  overflow: hidden;
}
.chronicle-filters button {
  min-height: 36px; border: 0; border-right: 1px solid #55452a;
  background: #211a12; color: var(--main-text-color); font: inherit; cursor: pointer;
}
.chronicle-filters button:last-child { border-right: 0; }
.chronicle-filters button.active,
.chronicle-filters button[aria-pressed="true"] { background: #3a2d1b; color: #e0c060; }
.logentry.choice-entry {
  margin: 6px 0; padding: 12px; border: 1px solid #4f4028;
  border-radius: 8px; background: #241d15;
}
.choice-receipt-title { color: #e0c060; font-weight: bold; margin: 2px 0 3px; }
.choice-receipt-option { color: var(--main-text-color); }
.choice-receipt-option > span {
  color: var(--helper-text-color); font-size: 10px; font-weight: bold;
  letter-spacing: .04em; text-transform: uppercase;
}
.choice-receipt-outcome { margin-top: 4px; color: var(--helper-text-color); font-style: italic; }
.progressnote { background: #241d15; border: 1px solid #55452a; border-radius: 8px; padding: 8px 10px; font-size: 13px; margin-bottom: 8px; }
.warnote { border-color: #8a4030; }
.tutorial-card .tutorial-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.tutorial-card ul { list-style: none; margin: 0; padding: 0; }
.tutorial-card li { padding: 1px 0; }
.tutorial-card li.done { color: #9fc06a; }

/* ---------- modals ---------- */
.modal {
  position: fixed; inset: 0; z-index: 60; background: rgba(8,6,4,.72);
  display: flex; align-items: center; justify-content: center; padding: 14px;
}
.modalcard {
  background: linear-gradient(180deg, #2c2418, #221b13);
  border: 2px solid #7a6234; border-radius: 12px; box-shadow: 0 8px 40px #000;
  width: min(94vw, 560px); max-height: 88vh; overflow-y: auto; padding: 18px;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
#genmodal .modalcard {
  display: flex; flex-direction: column; overflow: hidden;
}
#genmodal #gm-body {
  display: flex; flex-direction: column; min-height: 0; overflow-y: auto;
  padding-right: 10px;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.gm-heading, .equip-picker-heading { display: flex; gap: 8px; }
.gm-heading { align-items: center; margin-bottom: 10px; }
.gm-heading.has-modal-guide { display: block; }
.gm-heading.has-modal-guide::after { content: ''; display: block; clear: both; }
.equip-picker-heading { align-items: flex-start; }
.gm-heading h3, .equip-picker-heading h3 { flex: 1 1 auto; min-width: 0; }
.gm-heading h3 {
  display: flex; align-items: center; min-height: 34px; margin: 0;
  line-height: 1.2; transform: translateY(2px);
}
.modal-guide-button, .panel-inline-icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #6f5a30; border-radius: 6px;
  background: transparent; color: #e0c060; cursor: pointer;
  padding: 0;
}
.modal-guide-button {
  flex: 0 0 34px; width: 34px; min-height: 34px; height: 34px;
  font: bold italic 22px/1 Georgia, serif;
}
.gm-heading.has-modal-guide h3 { float: left; width: calc(100% - 42px); }
.gm-heading.has-modal-guide .modal-guide-button {
  margin-left: 8px; vertical-align: top; transform: translateY(2px);
}
.panel-inline-icon-button {
  flex: 0 0 28px; width: 28px; min-height: 28px; height: 28px;
  font: 18px/1 Georgia, serif;
}
.modal-guide-button:hover, .panel-inline-icon-button:hover {
  border-color: #b89543; background: transparent; color: #f0d170;
}
.modal-guide-button:focus-visible, .panel-inline-icon-button:focus-visible {
  outline: 2px solid #e0c060; outline-offset: 1px;
}
.equip-picker-history-back { display: none; flex: 0 0 auto; white-space: nowrap; }
.modalcard h3 { color: #e0c060; margin-bottom: 10px; font-size: 20px; }
.modalcard .gm-heading h3 { margin-bottom: 0; }
.evtext { color: var(--main-text-color); margin-bottom: 14px; font-size: 16px; }
.evname { display: flex; gap: 8px; align-items: center; justify-content: center; margin-bottom: 12px; }
.evname label { display: flex; gap: 8px; align-items: center; color: var(--main-text-color); font-size: 14px; }
.evname input[type=text] {
  background: #241d15; border: 1px solid #66522f; color: var(--main-text-color); border-radius: 6px;
  padding: 8px 10px; font-size: 16px; font-family: inherit; width: 180px;
}
.evopt {
  display: block; width: 100%; text-align: left; margin-bottom: 8px;
  background: #33281a; border: 1px solid #66522f; color: var(--main-text-color); border-radius: 8px;
  padding: 11px 13px; font-size: 15px; cursor: pointer; min-height: 46px;
}
.evopt:hover { border-color: #d8b24a; background: #3d3020; }
.evopt .odesc { display: block; color: var(--helper-text-color); font-size: 13px; line-height: 1.35; margin-top: 2px; }
.event-choice {
  display: grid; grid-template-columns: minmax(0, 1fr);
  align-items: stretch; gap: 7px; margin-bottom: 8px;
}
.event-choice.has-details {
  grid-template-columns: minmax(0, 1fr) auto;
}
.event-choice .evopt { margin-bottom: 0; min-width: 0; }
.btn.small.event-details-button {
  width: 46px; min-width: 46px; height: 46px; min-height: 46px;
  align-self: center; margin: 0; padding: 0; border-radius: 50%;
  font-size: 20px; font-weight: bold; line-height: 1;
}
.event-choice-details {
  grid-column: 1 / -1; padding: 9px 10px; border: 1px solid #55452a;
  border-radius: 8px; background: #211a12; color: var(--helper-text-color);
}
.event-consequence-section + .event-consequence-section { margin-top: 8px; }
.event-consequence-section > b {
  display: block; margin-bottom: 4px; color: #c9a24a; font-size: 13px;
}
.event-chance-line {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px; color: var(--helper-text-color); font-size: 13px;
}
.event-impact-chips {
  display: flex; flex-wrap: wrap; gap: 4px; min-width: 0;
}
.event-impact-chips.receipt { margin-top: 2px; }
.event-impact-chips.chronicle { margin-top: 7px; }
.event-impact-chip, .event-impact-more {
  display: inline-flex; align-items: center; max-width: 100%;
  padding: 2px 6px; border: 1px solid #5e5037; border-radius: 999px;
  background: #211b14; color: var(--helper-text-color); font-size: 12px; line-height: 1.4;
  white-space: normal; overflow-wrap: anywhere;
}
.event-impact-chip.cost { border-color: #8a5b3b; color: #d9a17e; }
.event-impact-chip.danger { border-color: #a2463b; color: #ef9b8d; }
.event-impact-chip.gain { border-color: #58703c; color: #abc978; }
.event-impact-more { color: var(--helper-text-color); }
.gm-list button { margin-bottom: 8px; }
.automation-protection {
  display: block; margin: 8px 0 12px; padding: 9px 10px;
  border: 1px solid #5a492c; border-radius: 6px;
  background: #241d15; color: var(--main-text-color); cursor: pointer;
}
.automation-protection input { margin-right: 7px; }
.automation-protection .adesc {
  display: block; margin: 3px 0 0 25px; color: var(--helper-text-color);
  font-size: 13px; line-height: 1.4;
}
.protected-choice {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px; align-items: stretch;
}
.protected-choice .protection-toggle { min-height: 46px; margin-bottom: 8px; }
.staffing-worker-protection { margin: -3px 0 9px 8px; }
/* Every dialog exit/action footer uses the same centered control geometry.
   Generic and equipment-dialog footers stay visible at the bottom while
   their content scrolls; the travel picker and Self/Kin drawer reuse the
   same button dimensions. */
.gm-footer, .travel-picker-actions, .drawer-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px; margin-top: auto;
}
.gm-footer .btn, .travel-picker-actions .btn, .drawer-footer .btn {
  flex: 0 1 200px; width: 200px; max-width: 100%; min-height: 52px;
  padding: 10px 16px; font-size: 16px; text-align: center;
}
#genmodal .gm-footer, .equip-picker-body .gm-footer {
  position: sticky; bottom: 0; z-index: 1;
  padding: 12px 0;
  border-top: 1px solid #493c27; background: #221b13;
}
.drawer-footer, #btn-closeself { display: none; }
.gm-body-text { font-size: 15px; color: var(--main-text-color); }
.gm-body-text h4 { color: #d8b24a; margin: 12px 0 4px; }
.gm-body-text p, .gm-body-text li { margin-bottom: 6px; }
.gm-body-text ul { padding-left: 18px; }
.building-county-picker {
  position: sticky; top: 0; z-index: 2;
  flex: 0 0 auto;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: 10px; margin-bottom: 10px; padding: 8px 0 10px;
  background: linear-gradient(180deg, #2b2318 78%, rgba(43,35,24,.92));
  color: #d8b24a; font-size: 15px; font-weight: bold;
}
.building-county-picker select {
  width: 100%; min-width: 0; min-height: 42px; padding: 7px 9px;
  border: 1px solid #66522f; border-radius: 6px;
  background: #211a12; color: var(--main-text-color); font: inherit;
}

@media (pointer: coarse), (max-width: 820px), (max-height: 520px) {
  .modal-guide-button, .panel-inline-icon-button, .character-skills-guide {
    flex-basis: 44px; width: 44px; min-height: 44px; height: 44px; font-size: 22px;
  }
  .gm-heading.has-modal-guide h3 { width: calc(100% - 52px); min-height: 44px; }
}

.dynasty-house-row { align-items: center; gap: 8px; }
.dynasty-house-value {
  display: block; min-width: 0; text-align: right;
}
.dynasty-house-value b { min-width: 0; overflow-wrap: anywhere; text-align: right; }
.dynasty-house-value .panel-inline-icon-button { margin-left: 6px; vertical-align: middle; }

/* Shared large-list grammar for Work & Enterprises and Network. Counts and
   attention stay in the section button while routine rows disclose gradually. */
.work-list-modal .modalcard { width: min(96vw, 760px); }
.large-list-surface { min-width: 0; }
.large-list-toolbar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px;
  margin: 8px 0 10px; padding: 9px;
  border: 1px solid #493c27; border-radius: 9px; background: #241d15;
}
.large-list-search { flex: 1 1 260px; min-width: 0; }
.large-list-search > label {
  display: block; margin-bottom: 4px; color: #d8b24a;
  font-size: 13px; font-weight: bold;
}
.large-list-search > div { display: flex; align-items: stretch; gap: 6px; }
.large-list-search input {
  flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 7px 9px;
  border: 1px solid #66522f; border-radius: 6px;
  background: #211a12; color: var(--main-text-color); font: inherit;
}
.large-list-filters {
  display: flex; flex: 1 1 250px; flex-wrap: wrap; align-items: center; gap: 5px;
}
.large-list-filters .btn {
  flex: 0 1 auto; min-width: 0; min-height: 38px; margin: 0;
  padding: 6px 9px; white-space: normal;
}
.large-list-filters .btn[aria-pressed="true"] {
  color: #f3d979; border-color: #c9a24a; background: #3a2f1c;
  box-shadow: inset 0 -2px 0 #c9a24a;
}
.large-list-section { min-width: 0; margin: 0 0 10px; }
.large-list-section > h4 { margin: 0; }
.large-list-section > h4:focus {
  outline: 2px solid #e0c060; outline-offset: 2px;
}
.large-list-section-toggle {
  display: flex; width: 100%; min-width: 0; min-height: 44px;
  align-items: center; gap: 7px; padding: 8px 9px;
  color: #d8b24a; background: #211a12;
  border: 1px solid #55452a; border-radius: 8px;
  font: inherit; text-align: left; cursor: pointer;
}
.large-list-section-toggle:hover { border-color: #c9a24a; }
.large-list-section-title {
  flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: bold;
  overflow-wrap: anywhere;
}
.large-list-section-count, .large-list-attention-count {
  flex: 0 1 auto; padding: 2px 6px; border-radius: 999px;
  color: var(--helper-text-color); background: #302719; font-size: 12px;
  text-align: center; overflow-wrap: anywhere;
}
.large-list-attention-count {
  color: #f0b48e; background: #4b271e; border: 1px solid #78402f;
}
.large-list-attention-count.none {
  color: var(--helper-text-color); background: #292219; border-color: #403522;
}
.large-list-section-caret { flex: 0 0 12px; text-align: center; }
.large-list-section-body {
  min-width: 0; padding: 8px 4px 2px;
  border-left: 1px solid #40331f; border-right: 1px solid #40331f;
  border-bottom: 1px solid #40331f; border-radius: 0 0 8px 8px;
}
.large-list-section-summary { margin-bottom: 8px; }
.large-list-rows { min-width: 0; }
.large-list-row, .large-list-entry { min-width: 0; }
.large-list-row.actionbtn, .large-list-target-button {
  display: flex; align-items: center; gap: 8px;
}
.large-list-row-main {
  display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 8px;
}
.large-list-row-copy {
  display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column;
  gap: 2px; text-align: left; overflow-wrap: anywhere;
}
.large-list-row-title {
  color: var(--main-text-color); font-weight: bold; overflow-wrap: anywhere;
}
.large-list-enterprise-icon {
  display: inline-flex; flex: 0 0 32px; min-height: 32px;
  align-items: center; justify-content: center; font-size: 22px;
}
.large-list-state {
  flex: 0 1 auto; max-width: 130px; padding: 3px 6px;
  color: var(--helper-text-color); background: #211a12; border: 1px solid #4c402b;
  border-radius: 999px; font-size: 12px; line-height: 1.3;
  text-align: center; overflow-wrap: anywhere;
}
.large-list-state.needs-attention {
  color: #f0b48e; background: #48261d; border-color: #8a4935;
}
.large-list-entry {
  margin-bottom: 7px; padding: 6px;
  border: 1px solid #40331f; border-radius: 8px; background: #241d15;
}
.large-list-entry .large-list-target-button {
  width: 100%; min-width: 0; margin: 0; font-family: inherit;
}
.large-list-entry .charrow.large-list-target-button {
  color: var(--main-text-color); background: transparent; border: 0;
}
.large-list-entry .actionbtn.large-list-target-button {
  background: transparent; border-color: transparent;
}
.large-list-entry .large-list-target-button:hover {
  border-color: #c9a24a; background: #2f2618;
}
.large-list-entry .large-list-inline-action {
  display: block; width: calc(100% - 12px); min-width: 0;
  margin: 6px 6px 0; text-align: left; white-space: normal;
}
.large-list-inline-action .adesc {
  display: block; margin-top: 2px; color: var(--helper-text-color); font-size: 12px;
}
.large-list-static-row {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px;
}
.large-list-show-all {
  display: block; width: min(100%, 240px); min-height: 44px;
  margin: 8px auto 4px;
}
.large-list-section-footer {
  margin-top: 8px; padding-top: 8px; border-top: 1px dotted #493c27;
}
.large-list-empty, .large-list-no-results { margin: 6px 0; }
.large-list-surface [hidden] { display: none !important; }
.large-list-filters-section { margin-bottom: 8px; }
.large-list-filters-section .large-list-section-toggle {
  min-height: 38px; padding: 6px 9px; background: #201a13;
}
.large-list-filters-body {
  padding: 8px; background: #18130d;
}
.large-list-filters-body .enterprise-view-controls {
  margin: 0 0 6px;
}
.large-list-filters-body .large-list-toolbar {
  margin: 0; padding: 7px; background: #1f1811;
}
.enterprise-view-controls {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: end;
  margin: 8px 0; padding: 8px; border: 1px solid #4a3b27;
  border-radius: 8px; background: #211a13;
}
.enterprise-view-controls label {
  display: grid; gap: 4px; flex: 1 1 220px; min-width: 0;
}
.enterprise-view-controls label > span { color: var(--helper-text-color); font-size: 12px; }
.enterprise-view-select { position: relative; display: block; width: 100%; min-width: 0; }
.enterprise-view-select::after {
  content: '▾'; position: absolute; right: 11px; top: 50%; transform: translateY(-53%);
  color: #d8b24a; font-size: 14px; line-height: 1; pointer-events: none;
}
.enterprise-view-controls .enterprise-view-select select {
  width: 100%; min-width: 0; min-height: 42px; padding: 7px 34px 7px 11px;
  -webkit-appearance: none; appearance: none;
  border: 1px solid #8a6e34; border-radius: 6px;
  background: linear-gradient(180deg, #3b3020, #2a2218); color: var(--main-text-color);
  color-scheme: dark; font: 15px/1.2 Georgia, serif; cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.05);
}
.enterprise-view-controls .enterprise-view-select select:hover { border-color: #c9a24a; }
.enterprise-view-controls .enterprise-view-select select:focus-visible {
  outline: 2px solid #e0c060; outline-offset: 1px;
}
.enterprise-view-controls .enterprise-view-select select option {
  background: #2a2218; color: var(--main-text-color);
}

.war-target-toolbar {
  position: sticky; top: 0; z-index: 2;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 7px; padding: 8px; margin-bottom: 8px;
  background: #1b1711; border: 1px solid #4a3b27; border-radius: 8px;
}
.war-target-search { grid-column: span 2; }
.war-target-toolbar label { display: grid; gap: 4px; min-width: 0; }
.war-target-toolbar label > span { color: var(--helper-text-color); font-size: 11px; }
.war-target-toolbar input, .war-target-toolbar select { width: 100%; min-width: 0; }
.war-target-row[disabled] { opacity: 0.72; cursor: not-allowed; }
/* .actionbtn's display:block would defeat the hidden attribute the filter sets */
.war-target-row[hidden] { display: none !important; }

/* ---------- raiding expedition target toolbar ---------- */
.raid-target-toolbar {
  position: sticky; top: 0; z-index: 2;
  display: grid; grid-template-columns: minmax(190px, 1.35fr) minmax(150px, 1fr);
  align-items: start;
  gap: 10px; padding: 8px 10px; margin-bottom: 8px;
  background: #1b1711; border: 1px solid #4a3b27; border-radius: 8px;
}
.raid-target-toolbar label {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  color: var(--helper-text-color); font-size: 11px;
}
.raid-target-toolbar label > span {
  color: var(--helper-text-color); font-size: 11px; font-weight: bold; line-height: 1.2;
}
.raid-strategy-select-wrap {
  position: relative; display: block; width: 100%; min-width: 0;
}
.raid-strategy-select-wrap::after {
  content: '▾'; position: absolute; right: 11px; top: 50%; transform: translateY(-53%);
  color: #d8b24a; font-size: 14px; line-height: 1; pointer-events: none;
}
.raid-target-toolbar select {
  width: 100%; height: 38px; min-height: 38px; padding: 6px 32px 6px 9px;
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  border: 1px solid #66522f; border-radius: 6px;
  background: linear-gradient(180deg, #3b3020, #2a2218); color: var(--main-text-color);
  color-scheme: dark; font: inherit; font-size: 13px; line-height: 1.25; cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.05);
}
.raid-target-toolbar select:hover { border-color: #c9a24a; }
.raid-target-toolbar select:focus-visible {
  outline: 2px solid #e0c060; outline-offset: 1px;
}
.raid-target-toolbar select option {
  background: #2a2218; color: var(--main-text-color);
}
.raid-strategy-hint {
  display: block; margin-top: 3px; font-size: 11px; line-height: 1.35;
  color: var(--helper-text-color);
}
.raid-search-wrap {
  position: relative; display: flex; align-items: center; width: 100%; min-width: 0;
}
.raid-search-icon {
  position: absolute; left: 9px; pointer-events: none;
  font-size: 13px; opacity: .7; line-height: 1;
}
.raid-target-toolbar input[type="search"],
.raid-target-toolbar input[type="text"] {
  width: 100%; height: 38px; min-height: 38px; padding: 6px 28px 6px 28px;
  box-sizing: border-box;
  border: 1px solid #66522f; border-radius: 6px;
  background: #201a13; color: var(--main-text-color);
  font-family: inherit; font-size: 13px; outline: none;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.35);
}
.raid-target-toolbar input[type="search"]:focus,
.raid-target-toolbar input[type="text"]:focus {
  border-color: #ffd24a; box-shadow: 0 0 0 1px #ffd24a, inset 0 1px 3px rgba(0,0,0,.35);
}
.raid-search-clear {
  position: absolute; right: 5px; width: 22px; height: 22px; min-width: 22px; min-height: 22px;
  padding: 0; font-size: 11px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; opacity: .7; cursor: pointer; color: var(--main-text-color);
}
.raid-search-clear:hover { opacity: 1; }
.raid-search-clear.hidden { display: none; }
.raid-target-toolbar-extra {
  display: flex; justify-content: flex-end; margin-bottom: 8px;
}

/* Household Plan: one wide, scan-friendly ledger on desktop. Each actionable
   cell remains an ordinary .actionbtn so modal focus and number shortcuts work. */
.household-plan-modal .modalcard { width: min(98vw, 1280px); }
#genmodal.household-plan-modal #gm-body {
  overflow: hidden; padding-right: 0;
}
.household-plan-content {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 10px;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
#genmodal.household-plan-modal .gm-footer {
  position: relative; bottom: auto; flex: 0 0 auto; margin-top: 0;
}
.household-plan-intro { margin-bottom: 8px; }
.household-policy-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-bottom: 10px; padding: 10px 12px;
  border: 1px solid #6b5831; border-radius: 8px; background: #2a2216;
}
.household-policy-summary > div { min-width: 0; }
.household-policy-summary strong {
  display: block; color: #e3c66e; font-size: 14px;
}
.household-policy-summary span {
  display: block; margin-top: 2px; color: var(--helper-text-color); font-size: 12px;
}
.household-policy-summary .btn { flex: 0 0 auto; }
.education-policy-form {
  width: min(100%, 720px); margin: 0 auto 12px; padding: 12px;
  border: 1px solid #55452a; border-radius: 8px; background: #241d15;
}
.education-policy-field {
  display: block; margin-bottom: 14px; color: var(--main-text-color); font-size: 14px;
}
.education-policy-field > span {
  display: block; margin-bottom: 5px; color: #d8b24a; font-weight: bold;
}
.education-policy-field select, .education-policy-field input[type="number"] {
  width: min(100%, 440px); min-height: 42px; padding: 8px 10px;
  border: 1px solid #66522f; border-radius: 6px;
  background: #211a12; color: var(--main-text-color); font: inherit;
}
.education-policy-field input[type="number"] { width: min(100%, 220px); }
.education-policy-field small {
  display: block; max-width: 620px; margin-top: 4px;
  color: var(--helper-text-color); font-size: 12px; line-height: 1.4;
}
.education-policy-check { margin: 8px 0 14px; color: var(--main-text-color); }
.education-policy-preview-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px; width: min(100%, 900px); margin: 0 auto 12px;
}
.education-policy-preview-card {
  padding: 10px 12px; border: 1px solid #55452a;
  border-radius: 8px; background: #241d15; color: var(--main-text-color);
}
.education-policy-preview-card > strong { color: var(--main-text-color); }
.education-policy-preview-card dl { margin: 7px 0 0; }
.education-policy-preview-card dl > div {
  display: grid; grid-template-columns: minmax(105px, 38%) minmax(0, 1fr);
  gap: 8px; padding: 3px 0; border-top: 1px solid #3f3423;
}
.education-policy-preview-card dt { color: var(--helper-text-color); }
.education-policy-preview-card dd { margin: 0; color: var(--main-text-color); }
.education-policy-preview-card dd small {
  display: block; color: #b8ca8e; font-size: 11px;
}
.education-policy-empty { grid-column: 1 / -1; padding: 18px 10px; }
.match-policy-recommended.actionbtn {
  border-color: #b7953c; background: #302817;
  box-shadow: inset 3px 0 0 #d8b24a;
}
.household-plan-wrap {
  min-height: 0; overflow-x: auto; padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.household-plan-table {
  width: 100%; min-width: 1120px; border-spacing: 0; border-collapse: separate;
  table-layout: fixed; font-size: 12px;
}
.household-plan-table th {
  padding: 7px 8px; color: #d8b24a; background: #211a12;
  border-top: 1px solid #55452a; border-bottom: 1px solid #55452a;
  text-align: left; font-size: 12px;
}
.household-plan-table th:first-child {
  border-left: 1px solid #55452a; border-radius: 8px 0 0 0;
}
.household-plan-table th:last-child {
  border-right: 1px solid #55452a; border-radius: 0 8px 0 0;
}
.household-plan-table th:nth-child(1) { width: 15%; }
.household-plan-table th:nth-child(2) { width: 12%; }
.household-plan-table th:nth-child(3) { width: 18%; }
.household-plan-table th:nth-child(4) { width: 17%; }
.household-plan-table th:nth-child(5) { width: 17%; }
.household-plan-table th:nth-child(6) { width: 10%; }
.household-plan-table th:nth-child(7) { width: 11%; }
.household-plan-table td {
  height: 1px; padding: 0; vertical-align: top; background: #241d15;
  border-right: 1px solid #40331f; border-bottom: 1px solid #40331f;
}
.household-plan-table td:first-child { border-left: 1px solid #40331f; }
.household-plan-table tbody tr:last-child td:first-child { border-radius: 0 0 0 8px; }
.household-plan-table tbody tr:last-child td:last-child { border-radius: 0 0 8px 0; }
.household-plan-table tr:not(.household-plan-retainer) +
  tr.household-plan-retainer td {
  border-top: 2px solid #7a6234;
}
.household-plan-action.actionbtn, .household-plan-static {
  width: 100%; min-height: 100%; margin: 0; padding: 9px 8px;
  border: 0; border-radius: 0; background: transparent;
  color: var(--main-text-color); font-size: 12px; line-height: 1.35; text-align: left;
}
.household-plan-action.actionbtn:hover {
  background: #33291b; box-shadow: inset 0 0 0 1px #a5842f;
}
.household-plan-action .keyhint { float: left; margin-right: 4px; }
.household-plan-primary {
  display: block; color: var(--main-text-color); font-weight: bold;
}
.household-plan-secondary, .household-plan-tertiary {
  display: block; margin-top: 2px; color: var(--helper-text-color);
}
.household-plan-action .household-plan-secondary,
.household-plan-action .household-plan-tertiary,
.household-plan-action .household-plan-warning {
  clear: both;
}
.household-plan-warning {
  display: block; margin-top: 3px; color: #db8b65;
}
.household-plan-person { display: flex; align-items: flex-start; gap: 7px; }
.household-plan-person > span { min-width: 0; }

.papacy-summary {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; margin-bottom: 10px;
}
.papacy-card, .papacy-alert {
  padding: 10px 12px; margin-bottom: 10px;
  background: #241d15; border: 1px solid #55452a; border-radius: 8px;
}
.papacy-card .panelh, .papacy-alert .panelh { margin-top: 0; }
.papacy-alert { border-color: #a87932; background: #302416; }
.papacy-tabs, .papacy-tactics {
  display: flex; flex-wrap: wrap; gap: 7px; margin: 6px 0 12px;
}
.papacy-college {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px; margin-bottom: 10px;
}
.papacy-elector {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; width: 100%; min-height: 58px; padding: 8px 10px;
  color: var(--main-text-color); background: #2a2216; border: 1px solid #55452a;
  border-radius: 8px; font: inherit; text-align: left; cursor: pointer;
}
.papacy-elector:hover { border-color: #c9a24a; }
.papacy-elector span { min-width: 0; }
.papacy-elector small, .papacy-choice small, .papacy-sanction-row small {
  display: block; color: var(--helper-text-color); font-size: 12px; margin-top: 2px;
}
.papacy-vote { flex: 0 1 42%; color: #d8b24a; text-align: right; }
.papacy-choice, .papacy-sanction-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px;
  margin-bottom: 7px; background: #2a2216; border: 1px solid #55452a;
  border-radius: 8px; color: var(--main-text-color);
}
.papacy-choice input { margin-top: 4px; }
.papacy-sanction-row { justify-content: space-between; flex-wrap: wrap; }
.papacy-sanction-row > div {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px;
  margin-left: auto;
}
textarea.modjson, textarea.savetext {
  width: 100%; height: 120px; background: #191410; color: var(--main-text-color); border: 1px solid #55452a;
  border-radius: 6px; font-family: monospace; font-size: 12px; padding: 8px;
}
.modrow {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px; margin: 6px 0;
  background: #241d15; border: 1px solid #55452a; border-radius: 8px; font-size: 14px;
}
.modrow .cmeta { color: var(--helper-text-color); font-size: 12px; }
.modrow button { margin-left: auto; }

/* portraits & character cards */
.pface { border: 1px solid #55452a; border-radius: 5px; background: #241d15; flex: 0 0 auto; }
.charcard {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 10px;
  background: #241d15; border: 1px solid #55452a; border-radius: 8px; padding: 9px; font-size: 13px;
}
.charcard .ccname { color: var(--main-text-color); font-size: 14px; }
.charcard .ccmeta { color: var(--helper-text-color); font-size: 12px; margin: 2px 0 4px; }
.charcard .ccskills { color: var(--main-text-color); font-size: 12px; margin-bottom: 3px; }
.character-card-portrait-button {
  flex: 0 0 auto; padding: 0; border: 0; border-radius: 5px;
  background: transparent; cursor: pointer; line-height: 0;
}
.character-card-portrait-button .pface { display: block; }
.character-card-portrait-button:hover .pface { border-color: #c9a24a; }
.character-card-portrait-button:focus-visible {
  outline: 2px solid #e0c060; outline-offset: 2px;
}
.ccskills-guide { display: flex; align-items: center; gap: 5px; }
.ccskills-guide > span { min-width: 0; }
.realm-ruler-card .ccskills { font-size: 14px; line-height: 1.3; }
.realm-ruler-card .realm-ruler-muster {
  color: #e0c060; font-size: 13px; line-height: 1.35;
}
.realm-ruler-card .character-card-portrait-button {
  position: relative; padding: 4px; border: 1px solid #c6a243; border-radius: 8px;
  background: linear-gradient(135deg, #342a16, #241d15 62%);
  box-shadow: 0 0 0 2px #322613, 0 0 0 3px #8d7029,
    inset 0 0 0 1px rgba(242, 206, 106, 0.28);
}
.realm-ruler-card .character-card-portrait-button::after {
  content: ''; pointer-events: none; position: absolute; inset: 2px;
  border: 1px solid rgba(232, 194, 87, 0.46); border-radius: 5px;
}
.character-skills-guide {
  display: inline-flex; flex: 0 0 24px; align-items: center; justify-content: center;
  width: 24px; min-height: 24px; height: 24px; padding: 0;
  border: 1px solid #6f5a30; border-radius: 50%; background: transparent;
  color: #e0c060; cursor: pointer; font: bold italic 15px/1 Georgia, serif;
}
.character-skills-guide:hover { border-color: #b89543; color: #f0d170; }
.character-skills-guide:focus-visible { outline: 2px solid #e0c060; outline-offset: 1px; }
/* coats of arms ride inline on cards: house shield by the name, realm shield
   by the home line; drawCrest strokes its own border, no css frame needed */
.ccname .crest { vertical-align: -4px; margin-left: 6px; }
.ccmeta .crest { vertical-align: -3px; margin-right: 4px; }
.self-overview {
  display: grid; grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px; align-items: start; margin-bottom: 4px;
}
.self-portrait-tools { min-width: 0; }
.self-portrait-button {
  display: block; margin: 0 auto 6px; padding: 0; border: 0; border-radius: 5px;
  background: none; cursor: pointer; line-height: 0;
}
#selfportrait { display: block; margin: 0; }
.portrait-equip {
  display: block; width: 96px; min-height: 34px; margin: 0 auto;
  padding: 5px 6px; font-size: 12px; line-height: 1.15;
}
.self-overview-skills { min-width: 0; }
.self-overview-skills .panelh { margin: 0 0 5px; font-size: 13px; }
.self-overview-skills .skillrow { gap: 4px; margin: 3px 0; font-size: 11px; }
.self-overview-skills .skill-label { width: 68px; }
.self-overview-skills .skillrow .num { width: 18px; }
.self-name { border-bottom: 0; padding-bottom: 0; }
.self-details-divider { display: none; }
@media (pointer: coarse) { .portrait-equip { min-height: 44px; } }

/* Governance is the territorial ruler's political home. Its section strip
   switches one consistent content surface instead of stacking mismatched
   dashboard cards into a long, sparse sheet. */
.governance-modal .modalcard {
  width: min(94vw, 1040px); max-width: 1040px;
  height: min(88vh, 760px); max-height: 88vh;
}
.governance-modal #gm-body { min-height: 0; overflow: hidden; }
.governance-nav {
  display: flex; flex: 0 0 auto; gap: 0;
  margin: 0 0 10px; padding: 0 4px;
  border-bottom: 1px solid #5b492b;
}
.governance-nav .btn {
  position: relative; min-width: 0; min-height: 38px;
  margin: 0 0 -1px; padding: 7px 12px;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: transparent; color: var(--main-text-color);
}
.governance-nav .btn:hover,
.governance-nav .btn:focus-visible {
  border-color: #806a38; background: #2b2318; color: var(--main-text-color);
}
.governance-nav .btn[aria-selected="true"] {
  border-bottom-color: #d8b24a; background: #2b2318; color: var(--main-text-color);
}
.governance-sections {
  flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto;
  padding: 0 10px 4px 4px;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.governance-card {
  min-width: 0; padding: 13px 14px 15px;
  border: 1px solid #55452a; border-radius: 8px;
  background: linear-gradient(180deg, #251e15, #211a13);
}
.governance-card:focus { outline: 1px solid #a8863a; outline-offset: 2px; }
.governance-card h4 {
  margin: 0 0 10px; padding-bottom: 8px;
  border-bottom: 1px solid #40331f;
  color: #d8b24a; font-size: 16px;
}
.governance-county-row {
  display: grid; grid-template-columns: minmax(120px, 1fr) auto minmax(185px, auto);
  align-items: center; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid #3e3321;
  color: var(--helper-text-color); font-size: 12px;
}
.governance-county-row:last-of-type { border-bottom: 0; }
.governance-county-protections {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px;
}
.governance-county-protections .btn { min-height: 32px; white-space: normal; }
.governance-markers { color: var(--helper-text-color); font-size: 11px; }
.governance-subhead {
  margin: 10px 0 5px; color: #bfa45d; font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase;
}
.governance-modifier-county {
  margin: 6px 0; padding: 7px 8px; border: 1px solid #463a25;
  border-radius: 4px; background: #211b13;
}
.governance-modifier-county .modifier-list { padding: 4px 0 0; }
.governance-vassal {
  display: grid;
  grid-template-columns: minmax(150px, .85fr) minmax(390px, 2.25fr)
    minmax(190px, 1fr);
  gap: 12px; align-items: start; margin: 0; padding: 4px 2px;
  border: 0; border-bottom: 1px solid #493c27;
  border-radius: 0; background: transparent;
}
.governance-vassal:last-child { border-bottom: 0; }
.governance-vassal-head {
  display: flex; min-width: 0; flex-direction: column;
  align-items: flex-start; gap: 3px; margin: 0;
}
.governance-vassal-head > div { min-width: 0; }
.governance-vassal-head > div > span {
  display: block; margin-top: 2px; color: var(--helper-text-color); font-size: 12px;
}
.governance-vassal-stats {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.governance-vassal-stats .kv {
  min-width: 0; padding: 0; flex-direction: column;
  justify-content: flex-start; gap: 2px;
}
.governance-vassal-stats .kv > span:first-child {
  color: var(--helper-text-color); font-size: 9px; font-weight: bold;
  letter-spacing: .035em; line-height: 1.25; text-transform: uppercase;
}
.governance-vassal-stats .kv b {
  overflow-wrap: anywhere; color: var(--main-text-color); font-size: 12px;
}
.governance-vassal-actions { min-width: 0; }
.governance-vassal-actions .cmeta {
  margin-top: 4px; color: var(--helper-text-color); font-size: 10px; line-height: 1.3;
}
.governance-inline-actions {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 5px; margin: 0;
}
.governance-inline-actions .btn {
  min-width: 0; min-height: 36px; padding: 5px 7px;
  line-height: 1.15; white-space: normal;
}
.council-protection-list {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0 12px;
}
.council-protection-list .btn { min-height: 36px; white-space: normal; }
.governance-seat {
  display: grid; grid-template-columns: minmax(120px, .7fr) minmax(0, 1fr);
  gap: 2px 9px; margin: 6px 0; padding: 7px 8px;
  border-left: 3px solid #596b3d; background: #211a13;
}
.governance-seat-warning { border-left-color: #9a5639; }
.governance-seat > b { color: var(--main-text-color); font-size: 12px; }
.governance-seat > span { min-width: 0; text-align: right; font-size: 12px; }
.governance-seat > small {
  grid-column: 1 / -1; color: var(--helper-text-color); line-height: 1.35;
}
.governance-vote-factors { margin: 7px 0; }
.political-bloc-card {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #493c27;
  border-left: 3px solid #a8863a;
  border-radius: 4px;
  background: rgba(20, 17, 12, .45);
}
.political-bloc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.political-bloc-head h5 {
  margin: 0;
  color: var(--main-text-color);
  font-size: 13px;
}
.political-posture {
  flex: 0 0 auto;
  padding: 2px 7px;
  border: 1px solid #665637;
  border-radius: 999px;
  color: var(--helper-text-color);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.political-posture-support { border-color: #50764f; color: #a9c997; }
.political-posture-oppose { border-color: #874d42; color: #d39b8e; }
.political-members,
.political-reasons {
  margin-top: 8px;
  font-size: 12px;
}
.political-members > b,
.political-reasons > b { color: var(--main-text-color); }
.political-members .linklike { margin: 3px 3px 0 0; }
.political-reasons ul {
  margin: 4px 0 0;
  padding-left: 18px;
  color: var(--helper-text-color);
}
.political-motion-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 8px;
  border-bottom: 1px solid #493c27;
}
.political-motion-row > div { min-width: 0; }
.political-motion-row .cmeta {
  display: block;
  margin-top: 3px;
}
.governance-action-group { margin-bottom: 10px; }
.governance-action-group h5 {
  margin: 0 0 5px; color: #bfa45d; font-size: 12px; font-weight: normal;
}
.governance-modal .gm-footer {
  flex: 0 0 auto; margin-top: 0; padding-bottom: 0;
}

@media (max-width: 960px) and (min-width: 821px) and (min-height: 521px) {
  .governance-vassal {
    grid-template-columns: minmax(150px, .75fr) minmax(0, 2fr);
  }
  .governance-vassal-actions {
    display: grid; grid-column: 1 / -1;
    grid-template-columns: minmax(310px, 2fr) minmax(0, 1fr);
    gap: 8px; align-items: center;
  }
  .governance-vassal-actions .cmeta { margin: 0; }
}

@media (min-width: 821px) and (min-height: 521px) {
  #tb-portrait { display: none; }
  .self-name { display: none; }
  .self-details-divider {
    display: block; border-top: 1px solid #40331f; margin: 9px 0 5px;
  }
}

/* household paper dolls and exact equipment slots */
.equipment-modal #gm-title {
  flex: 1 1 auto; text-align: center; white-space: pre-line;
}
.paper-sheet {
  display: grid; grid-template-columns: minmax(150px, 180px) minmax(0, 1fr);
  gap: 12px; align-items: start; margin: 4px 0 12px;
}
.paperdoll {
  display: block; width: 100%; height: auto; max-width: 180px; margin: 0 auto;
  border: 1px solid #66522f; border-radius: 8px; background: #211b14;
}
.paper-figure { min-width: 0; }
.equip-bonuses {
  margin-top: 7px; padding: 7px 8px; border: 1px solid #514126;
  border-radius: 7px; background: #292116; color: var(--main-text-color);
  font-size: 12px; line-height: 1.4;
}
.equip-bonus-heading { color: #d8b24a; font-size: 11px; margin-bottom: 3px; }
.equip-panel { min-width: 0; }
.equip-heading { color: #d8b24a; font-size: 14px; margin-bottom: 6px; }
.equip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.equip-slot {
  min-height: 44px; min-width: 0; padding: 5px 7px; cursor: pointer;
  border: 1px solid #5b4a30; border-radius: 7px;
  background: #292116; color: var(--main-text-color); font: inherit; text-align: left;
}
.equip-slot:hover:not(:disabled) { border-color: #c9a24a; background: #33291b; }
.equip-slot:disabled { opacity: .48; cursor: default; }
.equip-slot span {
  display: block; color: var(--helper-text-color); font-size: 11px; line-height: 1.2;
}
.equip-slot b {
  display: block; overflow: hidden; color: var(--main-text-color); font-size: 12px;
  font-weight: normal; line-height: 1.25; text-overflow: ellipsis;
}
.equip-note { color: var(--helper-text-color); font-size: 11px; line-height: 1.35; margin-top: 7px; }
.equip-best-action, .barber-action {
  width: 100%; min-height: 44px; margin-top: 10px;
}
.barber-modal .modalcard {
  width: min(94vw, 1040px); height: min(88vh, 760px);
}
#genmodal.barber-modal #gm-body { overflow-y: hidden; padding-right: 0; }
.barber-sheet {
  display: grid; grid-template-columns: minmax(210px, 270px) minmax(0, 1fr);
  flex: 1 1 auto; gap: 18px; align-items: stretch;
  width: min(100%, 980px); min-height: 0; margin: 0 auto;
  overflow: hidden;
}
.barber-preview-wrap { min-width: 0; align-self: start; }
.barber-preview {
  display: block; width: min(100%, 240px); height: auto; margin: 0 auto;
  border: 1px solid #66522f; border-radius: 8px; background: #211b14;
}
.barber-quote {
  margin-top: 9px; color: var(--main-text-color); font-size: 13px; line-height: 1.4;
  text-align: center;
}
.barber-preview-wrap .progressnote { margin-top: 7px; }
.barber-controls {
  min-width: 0; min-height: 0; overflow-y: auto; padding-right: 10px;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.barber-group { margin: 0 0 14px; }
.barber-group h4 { margin: 0 0 7px; color: #d8b24a; font-size: 14px; }
.barber-choices {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  gap: 7px;
}
.barber-choice {
  min-width: 0; min-height: 44px; padding: 7px 9px;
  border: 1px solid #5b4a30; border-radius: 7px;
  background: #292116; color: var(--main-text-color); cursor: pointer;
  font: inherit; line-height: 1.2; white-space: normal;
}
.barber-choice:hover { border-color: #a8863a; background: #33291b; }
.barber-choice[hidden] { display: none; }
.barber-choice[aria-pressed="true"] {
  border-color: #d8b24a; background: #44351d; color: var(--main-text-color);
  box-shadow: inset 0 0 0 1px rgba(216,178,74,.28);
}
.barber-cycle {
  display: none; grid-template-columns: minmax(86px, 1fr) minmax(0, 1.25fr)
    minmax(86px, 1fr); gap: 7px; align-items: stretch;
}
.barber-cycle-button, .barber-cycle-current {
  min-width: 0; min-height: 44px; padding: 7px 9px;
  border: 1px solid #5b4a30; border-radius: 7px;
  font: inherit; line-height: 1.2; text-align: center;
}
.barber-cycle-button {
  background: #292116; color: var(--main-text-color); cursor: pointer;
}
.barber-cycle-button:hover { border-color: #a8863a; background: #33291b; }
.barber-cycle-current {
  display: flex; align-items: center; justify-content: center;
  background: #44351d; border-color: #d8b24a; color: var(--main-text-color);
  overflow-wrap: anywhere;
}
@media (max-width: 820px) {
  .barber-modal .barber-choices { display: none; }
  .barber-modal .barber-cycle { display: grid; }
}
.equip-best-section { width: min(100%, 900px); margin: 0 auto 14px; }
.equip-best-section h4 { margin: 0 0 7px; color: #d8b24a; }
.equip-best-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px;
}
.equip-best-row {
  min-width: 0; padding: 9px 10px; border: 1px solid #55452a;
  border-radius: 7px; background: #241d15;
}
.equip-best-row strong {
  display: block; color: var(--main-text-color); font-size: 13px; overflow-wrap: anywhere;
}
.equip-best-row span, .equip-best-row small {
  display: block; margin-top: 2px; color: var(--helper-text-color); font-size: 12px;
}
.equip-best-row small { color: #8fa874; }
.equip-best-movements {
  padding: 4px 10px; border: 1px solid #4a3d29;
  border-radius: 7px; background: #211a13;
}
.equip-best-movement {
  padding: 6px 0; border-bottom: 1px dotted #4a3b27;
  color: var(--main-text-color); font-size: 12px; line-height: 1.4;
}
.equip-best-movement:last-child { border-bottom: 0; }
.equip-best-notice { width: min(100%, 900px); margin: 0 auto 12px; }
.equip-picker-overlay {
  position: fixed; inset: 0; z-index: 4; display: flex; align-items: center;
  justify-content: center; padding: 24px; background: rgba(8,6,4,.68);
}
.equip-picker-card {
  display: flex; flex-direction: column;
  width: min(90vw, 520px); max-height: 82vh; overflow: hidden; padding: 18px;
  border: 2px solid #7a6234; border-radius: 12px;
  background: linear-gradient(180deg, #2c2418, #221b13);
  box-shadow: 0 8px 40px #000; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.equip-picker-body {
  display: flex; flex-direction: column; min-height: 0; overflow-y: auto;
  padding-right: 10px;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.equip-picker-card h3 { color: #e0c060; margin-bottom: 10px; font-size: 19px; }
.item-card { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 10px; }
.itemart {
  display: block; flex: 0 0 auto; border: 1px solid #66522f;
  border-radius: 7px; background: #211b14;
}
.item-card .itemart { width: 144px; height: 144px; }
.item-card-copy { flex: 1 1 auto; min-width: 0; }
.equip-choice { display: flex; align-items: center; gap: 10px; }
.equip-choice > span { min-width: 0; }
.equip-choice .itemart { width: 54px; height: 54px; }
/* market gear shop: buy and sell panes sit side by side on wide layouts;
   on mobile/tablet widths the .shop-tabs pair toggles one visible pane */
.shop-tabs { display: none; }
.shop-split { display: flex; gap: 14px; align-items: flex-start; }
.shop-pane { flex: 1 1 0; min-width: 0; }
.shop-pane h4 { color: #d8b24a; margin: 12px 0 4px; }
@media (max-width: 820px), (max-height: 520px) {
  .shop-tabs { display: flex; margin: 8px 0 4px; }
  .shop-split { display: block; }
  .shop-pane { display: none; }
  .shop-pane.active { display: block; }
}
.death-paper {
  display: grid; grid-template-columns: minmax(135px, 170px) minmax(0, 1fr);
  gap: 12px; align-items: start; margin: 12px 0;
}
.death-paper .paperdoll { max-width: 170px; }
.death-worn h4 { color: #d8b24a; margin: 0 0 6px; }
.death-worn-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 4px 0; border-bottom: 1px dotted #4a3b27; font-size: 12px;
}
.death-worn-row span { color: var(--helper-text-color); }
.death-worn-row b { color: var(--main-text-color); font-weight: normal; text-align: right; }

/* ---------- family tree modal ----------
   Couples share a box; broods hang beneath their parents on drawn blood
   lines. Wide trees scroll sideways inside .ftwrap; min-width:max-content
   keeps the tree's left edge scroll-reachable (a centered flex box that
   merely overflowed would clip its left side past scroll reach). */
.ftwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 8px 0 4px; }
.family-tree-toolbar {
  position: sticky; top: 0; z-index: 2; display: grid; gap: 7px;
  padding: 8px; margin: 0 0 8px; background: #1b1711;
  border: 1px solid #4a3b27; border-radius: 8px;
}
.family-tree-toolbar > label { display: grid; gap: 4px; color: var(--helper-text-color); font-size: 12px; }
.family-tree-toolbar input { width: 100%; min-height: 40px; }
.family-tree-jumps, .family-tree-search-results {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.family-tree-search-results[hidden] { display: none; }
.ftbranch-toggle {
  display: inline-flex; align-items: center; gap: 4px; margin: 3px 0 0;
  padding: 2px 6px; color: var(--helper-text-color); background: #211a13;
  border: 1px solid #4a3b27; border-radius: 10px; font-size: 10px; cursor: pointer;
}
.ftbranch-toggle:hover, .ftbranch-toggle:focus { border-color: #c9a24a; }
@media (pointer: coarse) {
  .ftbranch-toggle { min-height: 44px; min-width: 44px; padding: 7px 10px; font-size: 12px; }
  .war-target-toolbar input, .war-target-toolbar select,
  .raid-target-toolbar input, .raid-target-toolbar select,
  .enterprise-view-controls select { min-height: 44px; }
}
.fttree { display: flex; justify-content: center; min-width: max-content; }
.ftnode { display: flex; flex-direction: column; align-items: center; }
.ftcouple {
  display: flex; align-items: stretch; gap: 3px;
  background: #241d15; border: 1px solid #55452a; border-radius: 9px; padding: 4px;
}
.ftstem { width: 0; height: 12px; border-left: 2px solid #6b5836; }
.ftkids { display: flex; align-items: flex-start; }
/* the flex display would defeat the hidden attribute branch collapse sets */
.ftkids[hidden], .ftstem[hidden] { display: none !important; }
.ftkids > .ftnode { position: relative; padding: 14px 4px 0; }
/* drop line down to each child, and the rail joining siblings */
.ftkids > .ftnode::before {
  content: ''; position: absolute; top: 0; left: 50%; margin-left: -1px;
  height: 14px; border-left: 2px solid #6b5836;
}
.ftkids > .ftnode::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; border-top: 2px solid #6b5836;
}
.ftkids > .ftnode:first-child::after { left: 50%; }
.ftkids > .ftnode:last-child::after { right: 50%; }
.ftkids > .ftnode:only-child::after { display: none; }
.ftchip {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 76px; padding: 5px 2px 4px; background: none; border: 1px solid transparent;
  border-radius: 7px; cursor: pointer; text-align: center; line-height: 1.25;
}
.ftchip[data-cid]:hover { border-color: #c9a24a; background: #2c2418; }
.ftchip .fname {
  color: var(--main-text-color); font-size: 12px; max-width: 72px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ftchip .frel { color: var(--helper-text-color); font-size: 11px; }
.ftchip.me { border-color: #a5842f; background: #332a18; }
.ftchip.search-hit { border-color: #f0c75a; box-shadow: 0 0 0 2px #6d5620; }
.ftchip.dead .pface { opacity: 0.55; }
.ftchip.dead .fname { color: var(--main-text-color); }
.ftchip.dup { opacity: 0.5; }
.ftchip.ghost { cursor: default; justify-content: center; min-height: 56px; }

/* the living court beside a realm's ruler - consort and heirs, bounded */
.court-strip {
  display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 8px;
  padding: 4px 2px; border-top: 1px solid #3a3122;
  border-bottom: 1px solid #3a3122;
}
.court-strip .ftchip:hover { border-color: #c9a24a; background: #2c2418; }
.court-strip .fname {
  white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15;
}
.court-strip .realm-ruler-chip {
  border-color: transparent; background: none; box-shadow: none;
}
.court-strip .realm-heir-chip {
  border-color: transparent; background: none; box-shadow: none;
}
.court-strip .realm-ruler-chip .pface {
  border-color: #b99537;
  box-shadow: 0 0 0 1px #322613, 0 0 0 2px #8d7029,
    inset 0 0 0 1px rgba(236, 197, 89, 0.25);
}
.court-strip .realm-heir-chip .pface {
  border-color: #8e7435;
  box-shadow: 0 0 0 1px #47391d, inset 0 0 0 1px rgba(201, 166, 74, 0.16);
}

/* ---------- autoresolve dialog ---------- */
.autorow { display: block; margin: 7px 0; cursor: pointer; }
.autorow input { margin-right: 7px; }
.autorow .adesc { display: block; color: var(--helper-text-color); font-size: 12px; margin: 2px 0 0 26px; }
.autorow.auto-select { margin-left: 26px; cursor: default; }

/* Semantic desktop shortcuts are edited as key/action pairs. Status stays on
   its own line so long translated blocking reasons do not squeeze selects. */
.shortcut-settings-entry {
  position: relative; display: block; width: 100%; margin-top: 10px;
  padding: 11px 42px 11px 14px; text-align: left; line-height: 1.3;
  background: #2a2116; border-color: #6f5932;
}
.shortcut-settings-entry::after {
  content: '›'; position: absolute; top: 50%; right: 14px;
  color: #c9a24a; font-size: 24px; line-height: 1; transform: translateY(-50%);
}
.shortcut-settings-title {
  display: block; color: var(--main-text-color); font-size: 14px; font-weight: bold;
}
.shortcut-settings-entry .adesc {
  display: block; margin-top: 4px; color: var(--helper-text-color);
  font-size: 12px; font-weight: normal; line-height: 1.4; white-space: normal;
}
.shortcut-bindings { display: grid; gap: 8px; margin: 10px 0; }
.shortcut-binding-row {
  display: grid; grid-template-columns: 86px minmax(220px, 1fr) auto;
  gap: 8px; align-items: end; padding: 9px;
  border: 1px solid #4a3b27; border-radius: 8px; background: #211a13;
}
.shortcut-binding-row label { display: grid; gap: 4px; min-width: 0; }
.shortcut-binding-row label > span,
.shortcut-binding-status { color: var(--helper-text-color); font-size: 12px; }
.shortcut-binding-row select { width: 100%; min-width: 0; }
.shortcut-binding-status { grid-column: 1 / -1; }
.action-keyhint { margin-left: 2px; }
.autorow.auto-select > span:first-child { display: block; margin-bottom: 4px; }
.autorow.auto-select select {
  width: min(100%, 420px); min-height: 38px; padding: 7px 8px;
  border: 1px solid #66522f; border-radius: 6px;
  background: #211a12; color: var(--main-text-color); font: inherit;
}
.autorow.auto-select .adesc { margin-left: 0; }

/* ---------- historical technology catalogue ---------- */
.tech-summary {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px; margin-bottom: 8px;
}
.tech-auto-bar { display: flex; justify-content: flex-end; margin: 2px 0 10px; }
.tech-auto-bar .btn { min-width: min(100%, 260px); }
.tech-active-strip {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px; margin: 8px 0 12px;
}
.tech-active-project {
  min-width: 0; padding: 8px 9px; border: 1px solid #9c7a2e;
  border-radius: 7px; background: #332919; color: var(--main-text-color);
  cursor: pointer; text-align: left;
}
.tech-active-project span { display: block; color: var(--helper-text-color); font-size: 12px; margin-top: 3px; }
.tech-controls {
  position: sticky; top: 0; z-index: 2;
  display: grid; grid-template-columns: minmax(170px, 2fr) minmax(145px, 1fr) minmax(120px, .8fr);
  gap: 8px; padding: 8px 0 10px;
  background: linear-gradient(180deg, #2c2418 86%, rgba(44,36,24,.94));
}
.tech-controls label { color: var(--helper-text-color); font-size: 12px; }
.tech-controls label span { display: block; margin: 0 0 3px 2px; }
.tech-controls input, .tech-controls select {
  width: 100%; min-height: 38px; padding: 7px 8px;
  border: 1px solid #66522f; border-radius: 6px;
  background: #211a12; color: var(--main-text-color); font: inherit;
}
.tech-domain-group { margin: 0 0 13px; }
.tech-domain-group h4 {
  margin: 8px 0 5px; color: #d3ac4e; font-size: 14px;
  letter-spacing: .04em;
}
.tech-entry {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 8px; align-items: center; width: 100%; min-height: 48px;
  padding: 7px 9px; margin: 4px 0; border: 1px solid #4f422d;
  border-radius: 7px; background: #241d15; color: var(--main-text-color);
  cursor: pointer; text-align: left;
}
.tech-entry:hover, .tech-entry:focus-visible { border-color: #b28a35; background: #2e2518; }
.tech-entry.tech-completed { border-color: #47684b; background: #20291f; }
.tech-entry.tech-active { border-color: #a67f2b; background: #302717; }
.tech-entry.tech-exposed:not(.tech-completed) { border-left: 3px solid #5d84a6; }
.tech-entry-icon { font-size: 22px; text-align: center; }
.tech-entry-copy { min-width: 0; }
.tech-entry-copy b {
  display: block; overflow: hidden; text-overflow: ellipsis;
  color: var(--main-text-color); font-size: 14px; white-space: nowrap;
}
.tech-entry-copy small { display: block; color: var(--helper-text-color); font-size: 12px; margin-top: 2px; }
.tech-entry-copy .tech-entry-discovery {
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; color: var(--helper-text-color); line-height: 1.35;
}
.tech-entry-cost { color: #d0ad54; font-size: 13px; text-align: right; }
.tech-empty { padding: 22px 8px; color: var(--helper-text-color); text-align: center; }
.tech-detail-meta { margin-bottom: 8px; color: var(--helper-text-color); font-size: 13px; }
.tech-prereq-line { margin: 8px 0; color: var(--helper-text-color); font-size: 13px; }
.tech-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.tech-chip {
  min-height: 34px; padding: 5px 9px; border: 1px solid #66522f;
  border-radius: 999px; background: #241d15; color: var(--main-text-color); cursor: pointer;
}
.tech-chip.complete { border-color: #4f7955; background: #213022; }
.tech-effects {
  margin: 6px 0 12px; padding: 8px 10px; border: 1px solid #4d402b;
  border-radius: 7px; background: #211a13; color: var(--main-text-color);
  font-size: 13px; line-height: 1.55;
}
.tech-locked-link { border-style: dashed; }
.contextual-help-link {
  display: block; margin: -3px 0 8px auto; color: #dbc37f;
}

/* ---------- searchable offline guide and role orientation ---------- */
.guide-controls {
  position: sticky; top: 0; z-index: 3;
  display: grid; grid-template-columns: minmax(220px, 2fr) minmax(150px, 1fr);
  gap: 8px; padding: 8px 2px 10px;
  background: linear-gradient(180deg, #2c2418 86%, rgba(44,36,24,.94));
}
.guide-controls label { color: var(--helper-text-color); font-size: 12px; }
.guide-controls label span { display: block; margin: 0 0 3px 2px; }
.guide-controls input, .guide-controls select {
  width: 100%; min-height: 40px; padding: 7px 8px;
  border: 1px solid #66522f; border-radius: 6px;
  background: #211a12; color: var(--main-text-color); font: inherit;
}
.guide-results {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px; align-content: start;
}
.guide-card { min-width: 0; }
.guide-card.expanded { grid-column: 1 / -1; }
.guide-result {
  position: relative; width: 100%; min-width: 0; min-height: 66px;
  padding: 9px 36px 9px 10px;
  border: 1px solid #4f422d; border-radius: 8px;
  background: #241d15; color: var(--main-text-color); cursor: pointer; text-align: left;
}
.guide-result:hover, .guide-result:focus-visible {
  border-color: #b28a35; background: #2e2518;
}
.guide-result::after {
  content: '+'; position: absolute; top: 50%; right: 12px;
  color: #bda768; font-size: 20px; line-height: 1;
  transform: translateY(-50%);
}
.guide-result[aria-expanded="true"] {
  border-color: #b28a35; border-radius: 8px 8px 0 0;
  background: #302719;
}
.guide-result[aria-expanded="true"]::after { content: '\2212'; }
.guide-result b { display: block; color: var(--main-text-color); font-size: 15px; }
.guide-result span {
  display: block; margin-top: 3px; color: var(--helper-text-color);
  font-size: 13px; line-height: 1.4;
}
.guide-entry-detail {
  padding: 12px 12px 4px; border: 1px solid #6a552f; border-top: 0;
  border-radius: 0 0 8px 8px; background: #211a13;
}
.guide-entry-body {
  color: var(--main-text-color); font-size: 15px; line-height: 1.55;
}
.guide-entry-body p { margin: 0 0 10px; }
.guide-entry-body ul, .role-orientation ol { padding-left: 22px; }
.guide-entry-body li, .role-orientation li { margin-bottom: 7px; }
.guide-entry-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  padding: 4px 0 10px;
}
.guide-entry-actions .btn {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.role-orientation .kv { align-items: flex-start; }
.role-orientation .kv b { max-width: 68%; text-align: right; }
.succession-review { margin: 5px 0 10px; }
.succession-review-row {
  display: grid; grid-template-columns: minmax(120px, .7fr) minmax(0, 1.6fr);
  gap: 10px; padding: 8px 9px; margin: 4px 0;
  border: 1px solid #4a3d29; border-radius: 7px; background: #241d15;
}
.succession-review-row span { color: var(--helper-text-color); font-size: 12px; }
.settlement-development-summary {
  padding: 8px 10px; margin-bottom: 10px;
  border: 1px solid #4a3d29; border-radius: 7px; background: #241d15;
}

/* ---------- settings: speed-of-days slider ---------- */
.speedrow { margin: 10px 0; }
.speedrow input[type="range"] { width: 100%; margin: 0; }
.setlang {
  width: 100%; min-height: 42px; margin: 2px 0 8px; padding: 8px 10px;
  background: #241d15; color: var(--main-text-color); border: 1px solid #66522f;
  border-radius: 6px; font-size: 15px;
}

/* Desktop panels begin at 80% of their full width and grow at the same rate
   through 1440px. The map therefore keeps useful room at the 821px breakpoint
   without changing the established wide-desktop proportions. */
@media (min-width: 821px) {
  #left { flex-basis: clamp(232px, calc(9.37vw + 155.1px), 290px); }
  #side { flex-basis: clamp(272px, calc(10.99vw + 181.8px), 340px); }
}

/* The desktop side panels can leave a center map column narrower than
   the wide lens toolbar even though the viewport is not a mobile layout. */
@media (min-width: 821px) and (max-width: 1339px) and (min-height: 521px) {
  .market-lens-controls {
    grid-template-columns: minmax(0, 1fr);
    width: min(440px, calc(100% - 76px)); max-width: calc(100% - 76px);
    gap: 6px; padding: 7px;
  }
  .market-lens-picker { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .market-lens-picker label {
    font-size: 11px; letter-spacing: .04em; line-height: 1.2; text-transform: uppercase;
  }
  .market-lens-actions {
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 6px;
  }
  .market-lens-controls select { font-size: 14px; }
  .market-lens-controls #market-lens-details {
    width: 100%; padding-inline: 8px; font-size: 13px;
  }
  .market-price-legend {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px; padding-inline: 4px; font-size: 11px;
  }
  .market-price-key { gap: 2px; }
  .market-price-key b { min-width: 11px; font-size: 11px; }
}

/* ---------- mobile ----------
   Touch sizing & thumb-zone chrome for any narrow or short screen; then a
   portrait layout (map atop a swipeable Deeds ⇄ Self/Kin page carousel) and
   a landscape layout (map left, carousel right). */
@media (max-width: 820px), (max-height: 520px) {
  .governance-nav {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    margin-bottom: 8px;
    padding-right: max(2px, env(safe-area-inset-right));
    padding-left: max(2px, env(safe-area-inset-left));
  }
  .governance-nav .btn {
    flex: 0 0 auto; min-height: 44px; padding: 8px 12px;
    white-space: nowrap;
  }
  .governance-sections { padding: 0 0 4px; }
  .governance-card { padding: 11px 10px 13px; }
  .governance-county-row { grid-template-columns: minmax(0, 1fr); }
  .governance-county-protections { justify-content: flex-start; }
  .governance-vassal {
    display: block; margin-bottom: 8px; padding: 10px;
    border: 1px solid #493c27; border-radius: 7px; background: #211a13;
  }
  .governance-vassal:last-child { border-bottom: 1px solid #493c27; }
  .governance-vassal-head {
    flex-direction: row; justify-content: space-between; gap: 8px;
    margin-bottom: 8px;
  }
  .governance-vassal-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 10px;
  }
  .governance-vassal-actions { margin-top: 9px; }
  .governance-inline-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .protected-choice { grid-template-columns: minmax(0, 1fr); }
  .protected-choice .protection-toggle { margin-top: -5px; }
  .governance-inline-actions .btn { width: 100%; min-height: 44px; }
  .political-bloc-head,
  .political-motion-row {
    align-items: stretch;
    flex-direction: column;
  }
  .political-motion-row .btn { min-height: 44px; }
  .household-policy-summary {
    align-items: stretch; flex-direction: column;
  }
  .household-policy-summary .btn { width: 100%; }
  .education-policy-preview-list { grid-template-columns: 1fr; }
  .equip-best-list { grid-template-columns: 1fr; }
  .education-policy-field select,
  .education-policy-field input[type="number"] { width: 100%; min-height: 48px; }
  .papacy-summary, .papacy-college { grid-template-columns: 1fr; }
  .papacy-elector { min-height: 68px; }
  #tb-date { display: none; }
  .stat { font-size: 14px; min-width: 52px; }
  /* tabs use ordinary words here; desktop keycaps are not mobile chrome */
  .tabfulllabel { display: inline; }
  .tabhotkeylabel { display: none; }
  /* a taller tap target for the resource breakdown, layout left as it was */
  button.stat { padding: 8px 3px; margin: -8px -3px; }
  .tab { font-size: 15px; min-height: 48px; }
  .actionbtn { min-height: 48px; font-size: 16px; padding: 10px 12px; }
  .actionbtn .adesc { font-size: 14px; }
  .ongoing-commitment-row { min-height: 58px; padding: 9px 10px; }
  .ongoing-commitment-row[data-commitment="focus"] { display: grid; }
  .ongoing-commitment-copy b { font-size: 15px; }
  .ongoing-commitment-copy small,
  .ongoing-commitment-edit { font-size: 12px; }
  .evopt { min-height: 52px; font-size: 16px; }
  .evopt .odesc { font-size: 14px; }
  .btn { min-height: 44px; }
  .btn.small { min-height: 40px; min-width: 44px; }
  .political-motion-row .btn.small { min-height: 44px; }
  .building-county-picker select { min-height: 48px; }
  .hudbtn {
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
    font-size: 20px;
  }
  #maphud {
    right: max(4px, env(safe-area-inset-right)); top: 2px; gap: 2px;
    max-height: calc(100% - 4px);
  }
  .market-lens-controls {
    left: max(8px, env(safe-area-inset-left)); top: 8px;
    grid-template-columns: minmax(0, 1fr); width: min(300px, calc(100% - 76px));
    max-width: calc(100% - 76px); gap: 6px; padding: 7px;
  }
  .market-lens-picker { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .market-lens-actions {
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 6px;
  }
  .market-lens-picker label, .market-sheet-label {
    font-size: 11px; letter-spacing: .04em; line-height: 1.2; text-transform: uppercase;
  }
  .market-lens-controls select, .market-lens-controls .btn,
  .market-price-legend { min-height: 44px; }
  .market-lens-controls select { font-size: 14px; }
  .market-lens-controls #market-lens-details {
    width: 100%; padding-inline: 8px; font-size: 13px;
  }
  .market-price-legend {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px; padding-inline: 4px; font-size: 11px;
  }
  .market-price-key { gap: 2px; }
  .market-price-key b { min-width: 11px; font-size: 11px; }
  .market-sheet-picker {
    grid-template-columns: minmax(0, 1fr); gap: 4px; margin-bottom: 10px;
  }
  .map-finder-input, .map-finder-clear, .map-finder-close {
    min-height: 44px;
  }
  .map-finder-clear, .map-finder-close { min-width: 44px; }
  .market-sheet-dropdown summary, .market-sheet-option,
  .enterprise-view-controls .enterprise-view-select select {
    min-height: 44px; font-size: 14px;
  }
  #toasts {
    left: max(10px, env(safe-area-inset-left));
    bottom: max(10px, env(safe-area-inset-bottom));
    max-width: calc(100% - 60px);
  }
  .coachmark.noarrow {
    left: max(10px, env(safe-area-inset-left));
    bottom: max(10px, env(safe-area-inset-bottom));
  }
  .event-receipt-toast {
    width: 100%;
  }
  .kv { font-size: 15px; padding: 4px 0; }
  .land-section { padding: 9px 10px 10px; }
  .land-kv, .land-section .land-settlements {
    grid-template-columns: minmax(0, 1fr); gap: 1px; padding: 5px 0;
  }
  .land-kv > b { text-align: left; }
  .land-kv > span, .land-section .land-settlements > span {
    color: var(--helper-text-color); font-size: 13px;
  }
  .land-section .land-settlements .settlist {
    justify-content: flex-start; margin-top: 1px;
  }
  .settblock { font-size: 15px; padding: 4px 0; }
  .charrow { font-size: 15px; padding: 8px; }
  .traitchip { font-size: 14px; padding: 4px 11px; }
  .logentry { font-size: 15px; padding: 6px 0; }
  .autorow input { width: 20px; height: 20px; vertical-align: -4px; }
  .tech-summary { grid-template-columns: 1fr; }
  .tech-active-strip { grid-template-columns: 1fr; }
  .tech-controls {
    grid-template-columns: 1fr 1fr;
    padding-top: 4px;
  }
  .tech-controls label:first-child { grid-column: 1 / -1; }
  .tech-controls input, .tech-controls select, .tech-chip { min-height: 44px; }
  .tech-entry { min-height: 52px; padding: 9px; }
  .tech-entry-copy b { font-size: 15px; }
  .tech-entry-copy small { font-size: 13px; white-space: normal; }
  .guide-controls { grid-template-columns: 1fr; padding-top: 4px; }
  .guide-controls input, .guide-controls select { min-height: 44px; }
  .guide-results { grid-template-columns: 1fr; }
  .guide-result { min-height: 58px; }
  .succession-review-row { grid-template-columns: 1fr; gap: 3px; }
  .role-orientation .kv { display: block; }
  .role-orientation .kv b {
    display: block; max-width: none; margin-top: 3px; text-align: left;
  }
  /* the flow of time lives in the thumb zone, always visible */
  #timebtns {
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; margin: 0;
    padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    background: rgba(24, 19, 13, .96); border-top: 2px solid #55452a;
  }
  #btn-skip, #btn-auto { flex: 0 0 72px; }
  #sidebody, #leftbody { padding-bottom: 78px; } /* clear the fixed bar */
  body.picking #timebtns { display: none; } /* not while choosing a birthplace */
  .travel-picker {
    position: fixed; z-index: 41;
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: calc(10px + env(safe-area-inset-bottom));
    width: auto;
    max-height: calc(55vh - 10px - env(safe-area-inset-bottom));
    max-height: calc(55dvh - 10px - env(safe-area-inset-bottom));
    border-radius: 14px; border-width: 2px;
    padding: 14px;
  }
  .raid-picker {
    position: fixed; z-index: 41;
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: auto;
    max-height: calc(50vh - 8px - env(safe-area-inset-bottom));
    border-radius: 10px; border-width: 2px;
    padding: 8px 10px;
    gap: 6px;
  }
  .raid-picker-actions .btn {
    min-height: 34px; height: 34px; font-size: 13px; padding: 4px 6px;
  }
  .travel-destination { min-height: 48px; font-size: 16px; }
  /* Self/Kin lives in a full-screen drawer opened by tapping the portrait;
     it covers the topbar too */
  #left {
    position: fixed; z-index: 38; inset: 0;
    padding-top: env(safe-area-inset-top);
    display: none; flex-direction: column;
    background: #201a12; border: none;
    max-width: none;
  }
  body.showself #left { display: flex; }
  .drawer-footer {
    display: flex; flex: 0 0 auto; margin-top: 0;
    padding: 12px max(12px, env(safe-area-inset-right))
      calc(76px + env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
    background: linear-gradient(180deg, rgba(32,26,18,0), #201a12 35%);
  }
  #btn-closeself { display: block; }
  /* the fixed time bar's keyboard badges are noise on a small screen */
  #timebtns .keyhint { display: none; }
  /* Ordinary modals become framed bottom sheets. Keep the full lower edge
     above the device safe area so it cannot read as clipped by the viewport. */
  .modal {
    align-items: flex-end;
    padding: 0 max(10px, env(safe-area-inset-right))
      calc(10px + env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }
  .modalcard {
    width: 100%;
    max-height: calc(86vh - 10px - env(safe-area-inset-bottom));
    max-height: calc(86dvh - 10px - env(safe-area-inset-bottom));
    border: 2px solid #7a6234; border-radius: 14px;
    padding: 16px;
  }
  /* The wide household ledger becomes one labeled card per person. Keep the
     table semantics in the DOM while making every column explicit on screen. */
  .household-plan-wrap { overflow: visible; padding: 0; }
  .household-plan-table, .household-plan-table tbody,
  .household-plan-table tr, .household-plan-table td {
    display: block; width: 100%; min-width: 0;
  }
  .household-plan-table { font-size: 14px; }
  .household-plan-table thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .household-plan-table tr {
    margin-bottom: 12px; overflow: hidden; border: 1px solid #55452a;
    border-radius: 10px; background: #241d15;
  }
  .household-plan-table tr.household-plan-head { border-color: #a5842f; }
  .household-plan-table tr:not(.household-plan-retainer) +
    tr.household-plan-retainer td { border-top: 0; }
  .household-plan-table td, .household-plan-table td:first-child {
    display: grid; grid-template-columns: minmax(96px, 30%) minmax(0, 1fr);
    align-items: stretch; height: auto; border: 0; border-bottom: 1px solid #40331f;
    border-radius: 0;
  }
  .household-plan-table td:last-child { border-bottom: 0; }
  .household-plan-table td::before {
    content: attr(data-label); padding: 11px 9px; color: var(--helper-text-color);
    background: #211a12; font-size: 12px; font-weight: bold;
  }
  .household-plan-action.actionbtn, .household-plan-static {
    min-height: 48px; padding: 10px; font-size: 14px;
  }
  .household-plan-person { align-items: center; }
  .equip-picker-overlay.embedded-history-back .equip-picker-heading {
    position: sticky; top: 0; z-index: 2;
    background: linear-gradient(180deg, #2c2418 82%, rgba(44,36,24,.92));
  }
  .equip-picker-history-back:not(.hidden) {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 8px 10px;
  }
  /* Tall dialogs with a Close pinned to the bottom middle, so a long list
     needs no scroll to shut and no reach for the top edge to dismiss. Two
     flavours share the column layout + sticky footer below:
       • changelog — an evenly framed panel (keeps its border and margins)
       • fullsheet (Menu, Automation) — edge-to-edge, fills the whole screen */
  .modal.changelog-modal {
    align-items: center; justify-content: center;
    padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  }
  .modal.fullsheet-modal { align-items: stretch; padding: 0; }
  .changelog-modal .modalcard, .fullsheet-modal .modalcard {
    display: flex; flex-direction: column;
    width: 100%; max-height: 100%; overflow: hidden;
  }
  .changelog-modal .modalcard {
    padding: 16px 16px 0;
    border: 2px solid #7a6234; border-radius: 14px;
  }
  .fullsheet-modal .modalcard {
    height: 100%; max-width: none;
    padding: max(14px, env(safe-area-inset-top)) 16px 0;
    border: none; border-radius: 0;
  }
  .changelog-modal .gm-heading, .fullsheet-modal .gm-heading { flex: 0 0 auto; }
  .changelog-modal .modalcard h3, .fullsheet-modal .modalcard h3 { flex: 0 0 auto; margin-bottom: 8px; }
  .changelog-modal .gm-heading h3, .fullsheet-modal .gm-heading h3 { margin-bottom: 0; }
  .changelog-modal #gm-body, .fullsheet-modal #gm-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  .changelog-modal .gm-footer, .fullsheet-modal .gm-footer {
    position: sticky; bottom: 0; margin-top: auto;
    display: flex; justify-content: center;
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid #493c27; background: #221b13;
  }
  /* full-screen sheets: a column body whose footer margin soaks up the slack
     keeps the Close at the very bottom even when the content is short (the
     sticky rule above still handles the long, scrolling case) */
  .fullsheet-modal #gm-body { display: flex; flex-direction: column; }
  .equip-picker-overlay {
    align-items: flex-end;
    padding: 0 max(10px, env(safe-area-inset-right))
      calc(10px + env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }
  .equip-picker-card {
    width: 100%;
    max-height: calc(86vh - 10px - env(safe-area-inset-bottom));
    max-height: calc(86dvh - 10px - env(safe-area-inset-bottom));
    padding: 16px;
    border: 2px solid #7a6234; border-radius: 14px;
  }
  .music-controls {
    overflow: hidden; padding: 6px 8px;
    border-radius: 8px;
  }
  .music-overlay-close {
    top: 4px; right: 4px; width: 20px; height: 20px;
    min-width: 20px; min-height: 20px; font-size: 11px;
  }
  .music-track-header {
    margin-bottom: 2px; padding-right: 22px;
  }
  .music-track-title {
    font-size: 12px; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .music-track-bank {
    font-size: 11px; margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .music-track-kvs {
    display: flex; flex-wrap: wrap; gap: 2px 8px;
    margin: 2px 0; font-size: 11px;
  }
  .music-track-kvs .kv {
    display: inline-flex; gap: 4px; justify-content: flex-start;
    padding: 0; font-size: 11px;
  }
  .music-track-kvs .kv-secondary {
    display: none;
  }
  .music-track-actions {
    margin: 3px 0 0; gap: 3px;
  }
  .music-track-actions .btn {
    padding: 2px 4px; font-size: 11px; min-height: 26px;
  }
  .music-track-navigation {
    gap: 3px;
  }
  .music-track-navigation .btn {
    padding-inline: 4px; font-size: 11px; min-height: 26px;
  }
  .music-overlay-footer {
    display: none;
  }
}

@media (max-width: 600px) {
  .update-banner { flex-wrap: wrap; gap: 9px; }
  .update-banner-copy { flex-basis: 100%; }
  .update-banner .btn { width: 100%; }
  .large-list-toolbar { align-items: stretch; flex-direction: column; }
  .large-list-search, .large-list-filters { width: 100%; flex-basis: auto; }
  .large-list-search > div { flex-wrap: wrap; }
  .large-list-search input { flex-basis: 180px; min-height: 44px; }
  .large-list-search .btn { flex: 0 0 auto; }
  .large-list-filters .btn { flex: 1 1 105px; min-height: 44px; }
  .enterprise-view-controls { align-items: stretch; flex-direction: column; }
  .enterprise-view-controls label { width: 100%; flex-basis: auto; }
  .war-target-toolbar { position: static; grid-template-columns: 1fr 1fr; }
  .war-target-search { grid-column: 1 / -1; }
  .raid-target-toolbar { position: static; grid-template-columns: 1fr; }
  .shortcut-binding-row { grid-template-columns: 72px minmax(0, 1fr); }
  .shortcut-binding-row > .btn { grid-column: 1 / -1; }
  .large-list-row.actionbtn, .large-list-target-button,
  .large-list-static-row { align-items: flex-start; flex-wrap: wrap; }
  .large-list-row-main { align-items: flex-start; }
  .large-list-state {
    max-width: 100%; margin-left: auto; text-align: left;
  }
  .large-list-entry .large-list-inline-action {
    width: 100%; min-height: 44px; margin: 7px 0 0;
  }
  .paper-sheet, .death-paper { grid-template-columns: 1fr; }
  .paper-sheet .paperdoll, .death-paper .paperdoll { width: 150px; }
  .barber-sheet {
    grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
  }
  .barber-preview { width: min(68vw, 220px); }
  .barber-modal .gm-footer .btn { flex: 1 1 140px; width: auto; }
  .item-card .itemart { width: 112px; height: 112px; }
  .person-assignment-head {
    display: grid; grid-template-columns: 18px 34px minmax(0, 1fr);
  }
  .person-assignment-eligibility {
    grid-column: 3; max-width: 100%; justify-self: start; text-align: left;
  }
  .person-assignment-rows { margin-left: 0; }
  .person-assignment-row { grid-template-columns: 1fr; gap: 0; padding: 3px 0; }
  .interaction-context-row { grid-template-columns: 1fr; gap: 0; padding: 3px 0; }
  .interaction-action {
    min-height: 52px; padding: 11px 12px;
  }
  .household-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .household-summary .kv:last-child { grid-column: span 2; }
  .household-intro, .household-warning, .household-section-hint,
  .household-empty { font-size: 12px; }
  .household-entry-layout {
    grid-template-columns: 28px minmax(0, 1fr) minmax(86px, auto);
    gap: 6px; min-height: 52px;
  }
  .household-entry-copy b { font-size: 14px; }
  .household-entry-copy small {
    font-size: 12px; white-space: normal;
  }
  .household-entry-cost { min-width: 86px; }
  .household-entry-cost small { font-size: 10px; }
  .household-entry-cost small:last-child { font-size: 11px; }
  .household-standard-rules { grid-template-columns: 1fr; gap: 2px; }
  .household-standard-choice.actionbtn { grid-template-columns: 1fr; }
  .household-standard-choice-effect,
  .household-standard-choice-terms { grid-column: 1; }
  .household-standard-choice-terms { min-width: 0; }
  .fullsheet-modal .asset-effect-summary { display: block; }
  .asset-effect-cell { grid-template-columns: 1fr; gap: 0; padding: 3px 0; }
  .enterprise-staffing-totals {
    grid-template-columns: 1fr; gap: 5px; padding: 9px;
  }
  .enterprise-staffing-totals b { font-size: 13px; }
  .enterprise-staffing-arrow { justify-self: center; transform: rotate(90deg); }
  .enterprise-staffing-comparison { grid-template-columns: 1fr; }
  .enterprise-staffing-head { align-items: flex-start; flex-direction: column; gap: 5px; }
  .enterprise-staffing-status { max-width: 100%; text-align: left; }
}

@media (max-width: 600px) and (max-height: 600px) {
  .barber-preview-wrap {
    display: grid; grid-template-columns: minmax(96px, 112px) minmax(0, 1fr);
    grid-template-rows: auto auto; align-items: center; gap: 7px 10px;
  }
  .barber-preview {
    grid-column: 1; grid-row: 1 / span 2; width: 100%;
  }
  .barber-quote {
    grid-column: 2; grid-row: 1; margin-top: 0; text-align: left;
  }
  .barber-preview-wrap .progressnote {
    grid-column: 2; grid-row: 2; margin-top: 0;
  }
}

@media (max-width: 380px) {
  .household-standard-current-line {
    align-items: flex-start; flex-direction: column; gap: 2px;
  }
  .household-standard-choice-terms { grid-template-columns: 1fr; }
  .ongoing-commitment-row {
    grid-template-columns: 25px minmax(0, 1fr);
  }
  .ongoing-commitment-edit {
    grid-column: 2; justify-self: start; margin-top: -2px;
  }
  .item-card { align-items: center; flex-direction: column; }
  .item-card .itemart { width: 128px; height: 128px; }
}

/* portrait: map on top, the Deeds/Land/Chronicle panel full-width beneath */
@media (max-width: 820px) and (orientation: portrait) {
  /* three-row topbar: identity + ☰ menu up top, then the full date on its
     own line, then the four resources — nothing clips on a narrow screen.
     A tight row-gap keeps three rows cheap in height. */
  #topbar { flex-wrap: wrap; row-gap: 2px; }
  /* the stats row used to push the ☰ right; with it wrapped away the
     button pins itself */
  #btn-menu { margin-left: auto; }
  /* the date drops to its own full-width line directly above the resources
     (order 4 < the stats' 5), so it never squeezes the identity row; a single
     divider opens the date + resources band. */
  #tb-date {
    order: 4; flex: 1 1 100%; display: block;
    width: auto; max-width: none; min-width: 0; overflow: visible;
    white-space: nowrap; text-align: left;
    border-top: 1px solid #40331f; margin-top: 4px; padding-top: 5px;
  }
  #tb-stats {
    order: 5; flex: 1 1 100%; margin-left: 0; overflow: visible;
    justify-content: space-between; padding-top: 4px;
  }
  #main { display: flex; flex-direction: column; }
  #mapwrap { order: 0; flex: 0 0 42%; min-height: 324px; }
  #panels {
    order: 1; display: flex; flex: 1 1 auto; min-height: 0;
    border-top: 2px solid #55452a;
  }
  #side { flex: 1 1 auto; min-width: 0; border: none; }
  #maphud {
    top: 2px; right: max(2px, env(safe-area-inset-right)); gap: 2px;
  }
  .hudbtn {
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
    font-size: 20px;
  }
  .music-controls, .map-finder {
    left: 8px; top: 8px; width: min(300px, calc(100% - 66px));
    max-width: calc(100% - 66px);
    max-height: calc(100% - 16px);
  }
}

/* Keep the phone HUD as one right-hand rail. Tighter spacing preserves the
   44px touch floor while leaving room for playback on shallow maps. */
@media (max-width: 480px) and (orientation: portrait) {
  #maphud {
    display: flex; flex-direction: column; flex-wrap: nowrap;
    top: 2px; right: max(2px, env(safe-area-inset-right)); gap: 2px;
  }
  .hudbtn {
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
    font-size: 20px;
  }
  .market-lens-controls {
    left: max(8px, env(safe-area-inset-left)); top: 8px;
    width: min(292px, calc(100% - 66px));
    max-width: calc(100% - 66px);
  }
  .music-controls, .map-finder {
    left: 8px; top: 8px; width: min(290px, calc(100% - 66px));
    max-width: calc(100% - 66px);
    overflow: hidden;
  }
}

@media (max-width: 380px) and (orientation: portrait) {
  #maphud {
    top: 2px; right: max(2px, env(safe-area-inset-right)); gap: 2px;
  }
  .hudbtn {
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
    font-size: 20px;
  }
  .market-lens-controls {
    left: max(4px, env(safe-area-inset-left)); top: 4px;
    width: min(260px, calc(100% - 46px));
    max-width: calc(100% - 46px);
  }
  .music-controls, .map-finder {
    left: 4px; top: 4px; width: min(260px, calc(100% - 46px));
    max-width: calc(100% - 46px);
    max-height: calc(100% - 8px);
  }
}

@media (max-width: 330px) and (orientation: portrait) {
  #maphud {
    top: 2px; right: max(2px, env(safe-area-inset-right)); gap: 2px;
  }
  .hudbtn {
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
    font-size: 20px;
  }
  .market-lens-controls {
    left: max(3px, env(safe-area-inset-left)); top: 2px;
    width: min(240px, calc(100% - 38px));
    max-width: calc(100% - 38px);
  }
  .music-controls, .map-finder {
    left: 3px; top: 2px; width: min(240px, calc(100% - 38px));
    max-width: calc(100% - 38px);
    max-height: calc(100% - 4px);
  }
}

@media (max-height: 480px) and (orientation: landscape) {
  #maphud {
    display: grid; grid-template-columns: repeat(2, 44px);
    top: 3px; right: max(4px, env(safe-area-inset-right)); gap: 2px;
  }
  .hudbtn {
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
    font-size: 20px;
  }
  .market-lens-controls {
    left: max(8px, env(safe-area-inset-left)); top: 8px;
    width: min(300px, calc(100% - 112px));
    max-width: calc(100% - 112px); padding: 7px; gap: 6px;
  }
  .map-finder {
    left: max(8px, env(safe-area-inset-left)); top: 8px;
    width: min(300px, calc(100% - 112px));
    max-width: calc(100% - 112px); max-height: calc(100% - 16px);
    padding: 7px;
  }
  .map-finder-results { max-height: 160px; }
}

@media (max-height: 360px), (max-width: 480px) and (max-height: 680px) and (orientation: portrait) {
  .map-finder-results { max-height: 120px; }
}

@media (max-height: 300px) {
  .map-finder-results { max-height: 90px; }
}

/* landscape phones: map left, panel column right */
@media (max-height: 520px) and (max-width: 950px) and (orientation: landscape) {
  #main { display: flex; }
  #mapwrap { order: 1; flex: 1 1 auto; }
  #panels { order: 2; display: flex; flex: 0 0 320px; min-height: 0; }
  #side { flex: 1 1 auto; min-width: 0; border: none; border-left: 2px solid #55452a; }
  #timebtns { left: auto; width: 320px; }
  #topbar { min-height: 44px; }
}

@media (max-width: 480px) {
  /* one-line topbar: drop the crest, tighten the stats, let the name give way */
  #crest { display: none; }
  #topbar { gap: 7px; }
  #tb-stats { gap: 6px; }
  .stat { font-size: 13px; min-width: 0; }
  #tb-name { font-size: 14px; }
  #tb-title { font-size: 12px; }
}

/* observe mode (New Game → 👁 Observe): a watcher has no face, purse, or deeds */
body.observing #tb-portrait, body.observing #crest, body.observing #tb-stats,
body.observing #left, body.observing #btn-auto,
body.observing #sidetabs .tab[data-tab="actions"],
body.observing #sidetabs .tab[data-tab="network"] { display: none; }

/* observe mode, panel hidden (☰ → Settings): the map takes the whole stage;
   scoped to .observing so leaving the mode neutralizes it on its own */
body.observing.obshidepanel #side { flex: 0 0 auto; background: none; border: none; }
body.observing.obshidepanel #sidetabs, body.observing.obshidepanel #sidebody { display: none; }

/* tutorial tab nudges: a gold dot on the tab holding the next beginner
   lesson; pure decoration, toggled from updateTabNudges (ui_panels.js) */
.tab.nudge { position: relative; }
.tab.nudge::after { content: ''; position: absolute; top: 3px; right: 4px;
  width: 8px; height: 8px; border-radius: 50%; background: #e0c060; }