/* The platform: design turns 2 to 10 of the Crest Hall handoff (design/platform),
   loaded after crest-hall.css, whose tokens it uses. Where these rules restate
   something from crest-hall.css, the platform handoff supersedes it. */

:root {
  --warm-red: #E9B7A8;
  --red: #C0563A;
  --live: #7FB98A;
  --parchment-82: rgba(232, 223, 200, .82);
  --panel: linear-gradient(180deg, rgba(35, 56, 44, .94), rgba(17, 27, 21, .94));
  --card: linear-gradient(180deg, rgba(35, 56, 44, .9), rgba(17, 27, 21, .9));
  --bar: rgba(13, 21, 15, .72);
  --row-rule: 1px solid rgba(201, 162, 74, .14);
}

/* ---------- buttons ---------- */
.btn-brass.sm { padding: 13px 26px; font-size: 13px; }
.btn-brass.xs { padding: 12px 22px; font-size: 12px; }
.btn-brass.full, .field.full { width: 100%; box-sizing: border-box; flex: none; }
.btn-line, .btn-quiet-line, .btn-danger { padding: 10px 18px; border-radius: 0; font-family: var(--caps); font-size: 12px; letter-spacing: .16em; cursor: pointer; white-space: nowrap; }
.btn-line { background: transparent; border: 1px solid var(--brass); color: var(--brass); }
.btn-line:hover { background: rgba(201, 162, 74, .15); color: var(--brass); }
.btn-quiet-line { background: transparent; border: 1px solid rgba(232, 223, 200, .4); color: rgba(232, 223, 200, .9); }
.btn-quiet-line:hover { border-color: var(--parchment); }
.btn-danger { background: var(--red); border: 0; color: #150C08; }
.btn-danger:hover { background: #D66A4C; }
button.linklike { padding: 0; border: 0; background: none; font: inherit; color: var(--brass); cursor: pointer; }
button.linklike:hover, a.quiet:hover, button.linklike.quiet:hover { color: var(--brass-bright); }
a.quiet, button.linklike.quiet { color: rgba(232, 223, 200, .7); }
.inline { display: inline; margin: 0; }

/* ---------- the signed-out screens (2a, 2b, 2c) ---------- */
.banner.slim { width: 430px; gap: 28px; padding: 42px 60px 38px; }
.banner.slim.wide { width: 470px; gap: 24px; padding: 40px 56px 36px; }
.banner.slim .form-block { width: 100%; }
.crest.small { width: 104px; height: 104px; }
.crest.small .glow { inset: -22px; }
.crest.small .ring-b { inset: 13px; }
.crest.small .ring-c { inset: 30px; }
.crest.small .diamond, .crest.small .square { width: 70px; height: 70px; }
.crest.small .inner { width: 34px; height: 34px; }
.crest.small .core { width: 12px; height: 12px; }
.crest.small .pip { display: none; }
.crest-block.small { gap: 26px; }
.wordmark.small { font-size: 14px; }
.stack { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.lede { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.gate-heading.big { font-size: 32px; }
.lede .gate-line { max-width: none; }
.gate-line.big { font-size: 17px; }
.hair { width: 56px; height: 1px; background: rgba(201, 162, 74, .5); }
.fine { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(232, 223, 200, .6); text-align: center; }
.aside-link { font-size: 14px; font-style: italic; }
.or { font-size: 15px; color: rgba(232, 223, 200, .7); }
.field-code { font-size: 20px; letter-spacing: .42em; }

.providers { flex-direction: column; }
.btn-provider { height: auto; padding: 13px; gap: 12px; font-size: 15px; }
.btn-provider.is-google:hover { border-color: #E3E3E3; }
.btn-provider.is-discord { background: #5865F2; border: 0; color: #FFFFFF; }
.btn-provider.is-discord:hover { background: #6B76F5; color: #FFFFFF; }

.gate-error, .error-note { box-sizing: border-box; width: 100%; max-width: none; margin: 0; padding: 12px 14px; background: rgba(13, 21, 15, .8); border-left: 2px solid var(--red); font-size: 14px; line-height: 1.5; color: var(--warm-red); text-align: left; }
.note-block { box-sizing: border-box; margin: 0; padding: 14px 16px; background: rgba(13, 21, 15, .8); border-left: 2px solid var(--brass); font-size: 15px; line-height: 1.6; color: var(--parchment); }
.note-block.soft { border-left-color: rgba(201, 162, 74, .5); color: rgba(232, 223, 200, .9); }
.note-block.small { font-size: 14px; color: rgba(232, 223, 200, .85); }
.confirm-block { box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 16px; background: rgba(192, 86, 58, .14); border-left: 2px solid var(--red); }
.confirm-block p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--warm-red); }
.confirm-block .buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.confirm-block form { margin: 0; }

/* ---------- form panels (3b, 3c, 6b) ---------- */
.banner.form { align-items: stretch; gap: 26px; padding: 42px 52px 38px; width: 520px; }
.banner.form.wide { width: 560px; gap: 24px; padding: 40px 52px 36px; }
.banner.form form { display: flex; flex-direction: column; gap: 22px; margin: 0; }
.eyebrow { margin: 0; font-family: var(--caps); font-size: 11px; letter-spacing: .22em; color: var(--brass); }
.eyebrow.xs { font-size: 10px; }
.panel-head { display: flex; flex-direction: column; gap: 10px; }
.panel-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: 32px; line-height: 1.2; color: var(--parchment); }
.panel-lede { margin: 0; font-size: 16px; line-height: 1.6; color: var(--parchment-78); }
.fieldset { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.label, .fieldset legend { padding: 0; margin: 0 0 0; font-family: var(--caps); font-size: 11px; letter-spacing: .2em; color: rgba(232, 223, 200, .78); }
.label .aside { font-family: var(--body); font-size: 13px; letter-spacing: .04em; color: rgba(232, 223, 200, .58); }
.field.name { font-size: 17px; }
textarea.field { line-height: 1.6; resize: vertical; min-height: 5.2em; }
.hint { margin: 0; font-size: 14px; color: rgba(232, 223, 200, .62); overflow-wrap: anywhere; }
.hint .brass, .brass { color: var(--brass); }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 4px; }
.form-foot .fine { text-align: left; max-width: 240px; }

/* Diamond checkboxes and radios: a real input, drawn as a gem */
.choices { display: flex; flex-direction: column; }
.choice { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--line-field); font-size: 16px; color: rgba(232, 223, 200, .82); cursor: pointer; }
.choice + .choice { border-top: 0; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice .gem { flex: none; width: 15px; height: 15px; box-sizing: border-box; border: 1px solid rgba(232, 223, 200, .45); transform: rotate(45deg); }
.choice:has(input:checked) { background: rgba(201, 162, 74, .14); border-color: rgba(201, 162, 74, .45); color: var(--parchment); }
.choice + .choice:has(input:checked) { border-top: 0; }
.choice input:checked + .gem { background: var(--brass); border-color: var(--brass); }
.choice:has(input:focus-visible) { outline: 2px solid var(--brass-bright); outline-offset: 2px; }
.choice .aside { margin-left: auto; font-size: 13px; color: rgba(232, 223, 200, .75); }

/* ---------- interior pages: the bar and the switcher ---------- */
.is-room { background: radial-gradient(120% 80% at 50% -10%, #23382C 0%, #16241C 50%, #0D150F 100%); }
.bar { position: relative; z-index: 8; display: flex; align-items: center; justify-content: space-between; gap: 12px 22px; flex-wrap: wrap; padding: 18px 34px; background: var(--bar); border-bottom: 1px solid var(--hairline); }
.bar-left { display: flex; align-items: center; gap: 18px; min-width: 0; }
.bar-mark { flex: none; width: 22px; height: 22px; box-sizing: border-box; border: 1.2px solid var(--brass); transform: rotate(45deg); }
.bar-sep { flex: none; width: 1px; height: 20px; background: rgba(201, 162, 74, .25); }
.bar-label { font-family: var(--caps); font-size: 12px; letter-spacing: .2em; color: var(--brass); }
.bar-right { display: flex; align-items: center; gap: 22px; font-size: 14px; color: rgba(232, 223, 200, .8); }
.bar-right .who-name { color: var(--parchment); }
.chip { font-family: var(--caps); font-size: 10px; letter-spacing: .18em; color: var(--brass); border: 1px solid rgba(201, 162, 74, .5); padding: 3px 7px; white-space: nowrap; }
.chip.quiet { color: rgba(232, 223, 200, .75); border-color: rgba(232, 223, 200, .3); }
.tag { font-family: var(--caps); font-size: 10px; letter-spacing: .16em; color: var(--brass); white-space: nowrap; }
.tag.quiet { color: rgba(232, 223, 200, .6); }

.switcher { position: relative; min-width: 0; }
.switcher > summary { display: flex; align-items: center; gap: 10px; padding: 7px 12px; margin: -8px 0; border: 1px solid transparent; list-style: none; cursor: pointer; }
.switcher > summary::-webkit-details-marker { display: none; }
.switcher > summary:hover, .switcher[open] > summary { border-color: var(--brass); background: rgba(201, 162, 74, .12); }
.switch-names { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.switch-group { font-family: var(--display); font-size: 17px; line-height: 1.1; color: var(--parchment); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.switch-campaign { font-size: 12px; color: rgba(232, 223, 200, .75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chev { flex: none; width: 7px; height: 7px; border-right: 1.5px solid rgba(201, 162, 74, .8); border-bottom: 1.5px solid rgba(201, 162, 74, .8); transform: rotate(45deg) translate(-2px, -2px); }
.switch-panel { position: absolute; z-index: 9; top: calc(100% + 17px); left: -40px; width: 376px; max-width: calc(100vw - 32px); background: linear-gradient(180deg, rgba(35, 56, 44, .98), rgba(17, 27, 21, .98)); border: 1px solid var(--line); border-top: 2px solid var(--brass); box-shadow: 0 26px 60px rgba(0, 0, 0, .7); }
.switch-panel .eyebrow { padding: 16px 20px 10px; }
.switch-table { display: flex; flex-direction: column; gap: 10px; padding: 12px 20px 14px; border-top: var(--row-rule); }
.switch-table.is-here { background: rgba(201, 162, 74, .07); }
.switch-table-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.switch-table-name { font-family: var(--display); font-size: 20px; color: rgba(232, 223, 200, .85); }
.is-here .switch-table-name, .switch-table-name:hover { color: var(--parchment); }
.switch-rows { display: flex; flex-direction: column; gap: 2px; padding-left: 2px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 22px; padding: 9px 12px; border-left: 2px solid transparent; font-size: 15px; color: rgba(232, 223, 200, .8); }
.switch-row:hover { background: rgba(201, 162, 74, .1); border-left-color: rgba(201, 162, 74, .5); color: var(--parchment); }
.switch-row.is-here { background: rgba(201, 162, 74, .16); border-left-color: var(--brass); color: var(--parchment); }
.switch-row.minor { font-size: 14px; color: rgba(232, 223, 200, .75); }
.switch-foot { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid rgba(201, 162, 74, .2); font-family: var(--caps); font-size: 12px; letter-spacing: .2em; color: var(--brass); }
.switch-foot:hover { background: rgba(201, 162, 74, .1); }
.switch-foot .plus { font-family: var(--display); font-size: 18px; letter-spacing: 0; }
.hall:has(.switcher[open]) .dims { opacity: .32; }

/* ---------- interior page bodies ---------- */
.room { position: relative; z-index: 7; flex: 1; display: flex; flex-direction: column; gap: 20px; padding: 30px 34px 34px; }
.room.narrow { width: 100%; max-width: 760px; box-sizing: border-box; margin: 0 auto; }
.room-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.room-head > div { display: flex; flex-direction: column; gap: 6px; }
.room-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: 38px; line-height: 1.05; color: var(--parchment); }
.room-sub { margin: 0; font-size: 15px; color: rgba(232, 223, 200, .78); }
.section { display: flex; flex-direction: column; gap: 8px; }
.list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); background: rgba(13, 21, 15, .55); }
.list.dashed { border: 1px dashed rgba(201, 162, 74, .45); background: rgba(13, 21, 15, .4); }
.list > li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 18px; border-bottom: var(--row-rule); font-size: 16px; color: var(--parchment); }
.list > li:last-child { border-bottom: 0; }
.list.tight > li { padding: 11px 14px; font-size: 15px; }
.list .muted { font-size: 14px; color: rgba(232, 223, 200, .8); }
.list .dim { font-size: 14px; color: rgba(232, 223, 200, .75); }
.list .warn { font-size: 14px; color: var(--warm-red); }
.list .you { font-size: 14px; color: rgba(232, 223, 200, .6); }
.actions { display: flex; gap: 16px; justify-content: flex-end; font-size: 14px; }
.actions form { margin: 0; }
.list.members > li { display: grid; grid-template-columns: 200px 1fr 150px 180px; }
.list.waiting > li { display: grid; grid-template-columns: 260px 1fr 190px 180px; }
.list.members .who, .list.waiting .who { display: flex; align-items: center; gap: 10px; min-width: 0; overflow-wrap: anywhere; }
.room-foot { position: relative; z-index: 8; margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 15px 34px; background: var(--bar); border-top: 1px solid var(--hairline); font-size: 14px; color: rgba(232, 223, 200, .75); }

/* ---------- the campaign page (7a, 7c) ---------- */
.next-panel { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; background: rgba(13, 21, 15, .75); border: 1px solid rgba(201, 162, 74, .35); }
.next-panel p { margin: 0; }
.next-panel .value { font-family: var(--display); font-size: 25px; line-height: 1.1; color: var(--parchment); }
.next-panel .aside { font-size: 14px; color: rgba(232, 223, 200, .85); }
.card-left { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-left: 2px solid var(--brass); }
.spoke-links { display: flex; gap: 10px; }
.spoke-link { flex: 1; min-height: 20px; padding: 13px 10px; text-align: center; border: 1px solid var(--line-field); font-size: 15px; color: rgba(232, 223, 200, .9); }
.spoke-link:hover { border-color: var(--brass); color: var(--parchment); }
.spoke-link.is-soon { border-style: dashed; border-color: rgba(201, 162, 74, .4); color: rgba(232, 223, 200, .75); }
.spoke-link .tag { display: block; margin-top: 4px; }

/* ---------- empty states (10b) ---------- */
.empty-card { box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; max-width: 420px; padding: 26px 24px; background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--brass); }
.empty-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: 25px; line-height: 1.2; color: var(--parchment); }
.empty-text { margin: 0; font-size: 15px; line-height: 1.65; color: var(--parchment-82); }
.empty-card .btn-brass, .empty-card form { align-self: flex-start; margin: 0; }
.empty-strip { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: rgba(13, 21, 15, .6); border: 1px solid var(--line); }

/* ---------- your account (6c) ---------- */
.account { display: flex; gap: 26px; align-items: flex-start; }
.account-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.account-side { width: 330px; flex: none; display: flex; flex-direction: column; gap: 20px; }
.inline-form { display: flex; gap: 10px; margin: 0; }
.inline-form .field { flex: 1; width: auto; }
.side-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: rgba(13, 21, 15, .6); border: 1px solid var(--line); }
.side-card p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(232, 223, 200, .8); }
.side-card .line { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; }
.side-card .line .dim { font-size: 13px; color: rgba(232, 223, 200, .75); }
.side-card .sep-line { height: 1px; margin: 4px 0; background: rgba(201, 162, 74, .18); }
.side-card.danger { background: rgba(192, 86, 58, .1); border-color: rgba(192, 86, 58, .4); }
.side-card.danger .eyebrow { color: var(--warm-red); }
.side-card.danger p, .side-card.danger summary { color: rgba(233, 183, 168, .95); }
.side-card.danger summary { font-size: 14px; cursor: pointer; }
.mark { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; }
.mark.gem { box-sizing: border-box; width: 12px; height: 12px; margin: 0 2px; border: 1px solid rgba(201, 162, 74, .6); transform: rotate(45deg); }
.with-mark { display: flex; align-items: center; gap: 12px; }

/* ---------- the hub on tablets and phones (9a, 9b) ---------- */
.hub .status { order: 99; }
.door-go, .door-desc .short { display: none; }
.door-title span { display: block; }
@media (max-width: 1000px) {
  .hub .hero { align-items: flex-start; text-align: left; padding: 26px 24px 18px; }
  .hub .hero h1 { font-size: 34px; }
  .hub .hero p { font-size: 16px; }
  .hub .status { order: 0; margin: 0 24px 18px; border: 1px solid rgba(201, 162, 74, .35); background: rgba(13, 21, 15, .75); }
  .hub .status-half { padding: 16px 18px; }
  .hub .status-rule { display: none; }
  .hub .status-half + .status-rule + .status-half { flex: none; margin-left: auto; }
  .hub .status-half + .status-rule + .status-half .status-label, .hub .status-half + .status-rule + .status-half .status-aside { display: none; }
  .hub .status-half + .status-rule + .status-half .status-value { font-family: var(--body); font-size: 14px; color: rgba(232, 223, 200, .8); }
  .doors { grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 0 24px 26px; }
  .door { height: auto; box-sizing: border-box; flex-direction: row; align-items: center; gap: 14px; padding: 16px; border-top-width: 1px; border-left: 2px solid var(--brass); }
  .door.is-soon { border-left-color: rgba(201, 162, 74, .45); }
  .door-eyebrow { display: none; }
  .door-body { gap: 4px; min-width: 0; }
  .door-title { font-size: 20px; }
  .door-title span { display: inline; }
  .door-desc { font-size: 13px; }
  .door-go { display: block; margin-left: auto; font-family: var(--caps); font-size: 10px; letter-spacing: .16em; color: var(--brass); white-space: nowrap; }
  .door.is-soon .door-go { color: rgba(201, 162, 74, .6); }
  .door-more { grid-column: 1 / -1; height: auto; flex-direction: row; gap: 14px; padding: 18px; font-size: 15px; }
  .more-list br { display: none; }
  .more-soon { display: none; }
  .account { flex-direction: column; }
  .account-side { width: 100%; }
  .list.members > li, .list.waiting > li { grid-template-columns: 1fr auto; }
  .list.members > li > :nth-child(3), .list.waiting > li > :nth-child(3) { grid-column: 1; }
}
@media (max-width: 640px) {
  .banner.slim, .banner.slim.wide, .banner.form, .banner.form.wide { width: 100%; padding: 30px 20px 28px; }
  .bar { padding: 14px 16px; }
  .bar-mark, .bar-sep, .bar-right .said { display: none; }
  .hub .hero { display: none; }
  .hub .status { margin: 18px 16px 16px; flex-direction: column; }
  .hub .status-half { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; }
  .hub .status-half + .status-rule + .status-half { display: none; }
  .hub .status-value { font-size: 26px; line-height: 1.1; }
  .doors { grid-template-columns: 1fr; gap: 10px; padding: 0 16px 20px; }
  .door-title span { display: inline; }
  .door-desc .long { display: none; }
  .door-desc .short { display: inline; }
  /* crest-hall.css gave phone cards a 150px floor; rows don't need it */
  .door { min-height: 0; gap: 14px; }
  .door-more { padding: 16px; font-size: 14px; }
  .room { padding: 18px 16px 24px; }
  .room-title { font-size: 30px; }
  .form-foot { flex-direction: column; align-items: stretch; }
  .form-foot .fine { max-width: none; }
  .list.members > li, .list.waiting > li { grid-template-columns: 1fr; gap: 6px; }
  .actions { justify-content: flex-start; }
  .spoke-links { flex-wrap: wrap; }
  .switch-panel { left: -8px; }
}

/* ---------- small pieces the templates share ---------- */
.hub-empty { position: relative; z-index: 7; display: flex; justify-content: center; padding: 0 34px 26px; }
.room .hub-empty { padding: 40px 0; }
.more-list span { display: block; }
.banner.form .aside-link { margin: 0; font-style: normal; }
.with-mark svg { flex: none; width: 16px; height: 16px; }
details.add { font-size: 14px; }
details.add > summary { display: inline-block; cursor: pointer; color: var(--brass); list-style: none; }
details.add > summary::-webkit-details-marker { display: none; }
details.add[open] > summary { margin-bottom: 10px; }
.side-card details form { margin-top: 12px; }
.side-card .check { color: rgba(233, 183, 168, .95); }
@media (max-width: 1000px) {
  .more-list span { display: inline; }
  .more-list span + span::before { content: " · "; }
}
@media (max-width: 640px) {
  .hub-empty { padding: 0 16px 16px; }
  .inline-form { flex-direction: column; }
}

/* one-time notices on the hub */
.hub-note { position: relative; z-index: 7; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 34px 20px; }
.hub-note > * { width: 100%; max-width: 720px; }
@media (max-width: 640px) { .hub-note { padding: 0 16px 16px; } }

/* your character, on a campaign's page */
.char-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
.char-name { font-family: var(--display); font-size: 24px; color: var(--parchment); }
.card-left .dim { font-size: 14px; color: rgba(232, 223, 200, .8); }
a.muted { color: rgba(232, 223, 200, .85); }
a.muted:hover { color: var(--brass-bright); }

/* ---------- breadcrumbs, on sub-pages (4b) ---------- */
.bar-left.has-crumbs { gap: 14px; }
.crumbs { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; color: rgba(232, 223, 200, .75); }
.crumbs a { white-space: nowrap; }
.crumb-sep { color: rgba(232, 223, 200, .4); }
.crumb-here { min-width: 0; color: var(--parchment); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- House Notes: the wall (4a) ---------- */
.notes-lede { font-size: 16px; color: rgba(232, 223, 200, .75); }
.note-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.note-card { display: flex; flex-direction: column; gap: 12px; min-height: 200px; box-sizing: border-box; padding: 20px; background: var(--card); border: 1px solid var(--line); border-top: 2px solid var(--brass); color: var(--parchment); }
.note-card:hover { border-color: var(--brass); color: var(--parchment); }
.note-card-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: 23px; line-height: 1.2; color: var(--parchment); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.note-card-text { flex: 1; font-size: 14px; line-height: 1.6; color: rgba(232, 223, 200, .78); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.note-card-sig { font-size: 12px; letter-spacing: .02em; color: rgba(232, 223, 200, .8); }
.note-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 200px; box-sizing: border-box; padding: 20px; border: 1px dashed rgba(201, 162, 74, .5); font-size: 14px; line-height: 1.5; text-align: center; color: rgba(232, 223, 200, .72); }
.note-add:hover { border-color: var(--brass); background: rgba(201, 162, 74, .06); color: var(--parchment); }
.note-add .plus { font-family: var(--display); font-size: 30px; line-height: 1; color: rgba(201, 162, 74, .7); }
.notes-empty .eyebrow { white-space: nowrap; }
.notes-empty p:not(.eyebrow) { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(232, 223, 200, .85); }
.notes-empty a { margin-left: auto; font-size: 15px; white-space: nowrap; }

/* ---------- House Notes: one note open (4b) ---------- */
.note-room { display: flex; gap: 24px; }
.note-main { flex: 1; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 26px 28px; background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--brass); }
.note-rail { width: 320px; flex: none; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 24px 22px; background: rgba(13, 21, 15, .6); border: 1px solid var(--line); }
.note-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: 32px; line-height: 1.15; color: var(--parchment); overflow-wrap: anywhere; }
.note-sig { margin: 0; font-size: 13px; color: rgba(232, 223, 200, .75); }
.note-body { max-width: 68ch; font-size: 16px; line-height: 1.7; color: var(--parchment); overflow-wrap: anywhere; }
.note-body p { margin: 0 0 .9em; }
.note-body p:last-child { margin-bottom: 0; }
.note-body a { text-decoration: underline; text-decoration-color: rgba(201, 162, 74, .45); text-underline-offset: 3px; }
.note-body .dim { color: rgba(232, 223, 200, .6); }
.note-body ul, .note-body ol, .dm-note-body ul, .dm-note-body ol { margin: 0 0 .9em; padding-left: 1.3em; }
.note-body ul:last-child, .note-body ol:last-child, .dm-note-body ul:last-child, .dm-note-body ol:last-child { margin-bottom: 0; }
.note-body li, .dm-note-body li { margin: 0 0 .3em; }
.note-body li::marker, .dm-note-body li::marker { color: var(--brass); }
.note-body strong, .dm-note-body strong { font-weight: 600; color: #F0E7CE; }
.note-actions { display: flex; gap: 10px; margin-top: 6px; }
.note-flag { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; margin: 0; padding: 12px 14px; background: rgba(13, 21, 15, .8); border-left: 2px solid var(--brass); font-size: 14px; line-height: 1.5; color: var(--parchment); }
.note-flag p, .note-flag form { margin: 0; }
.note-flag.soft { border-left-color: rgba(201, 162, 74, .5); color: rgba(232, 223, 200, .88); }
.note-flag-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }

.note-editor .field { display: block; width: 100%; box-sizing: border-box; height: auto; flex: none; }
.note-editor .field::placeholder { letter-spacing: normal; }
.note-editor .note-title-field { padding: 12px 14px; font-family: var(--display); font-size: 26px; }
.note-editor .note-body-field { flex: 1 0 auto; min-height: 320px; padding: 14px; font-family: var(--body); font-size: 16px; line-height: 1.7; resize: vertical; }
.note-editor-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; }
.note-editor-foot .hint { font-size: 13px; color: rgba(232, 223, 200, .8); }
.note-editor-foot .buttons { display: flex; gap: 10px; }
.note-editor-foot .btn-quiet-line { padding: 12px 22px; font-size: 12px; border-color: rgba(232, 223, 200, .35); color: rgba(232, 223, 200, .85); }
.clash-banner { padding: 12px 14px; background: rgba(192, 86, 58, .14); border-left: 2px solid var(--red); }
.clash-banner p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--warm-red); }
.clash-banner a { color: var(--brass-bright); }
.note-clash { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid rgba(201, 162, 74, .18); }

.history { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.history-entry { display: flex; flex-direction: column; gap: 3px; padding-left: 14px; border-left: 2px solid rgba(201, 162, 74, .3); }
.history-entry:hover { border-left-color: var(--brass-bright); }
.history-entry.is-latest { border-left-color: var(--brass); }
.history-entry.is-shown { background: rgba(201, 162, 74, .1); }
.history-who { font-size: 15px; color: rgba(232, 223, 200, .9); }
.is-latest .history-who, .is-shown .history-who, .history-entry:hover .history-who { color: var(--parchment); }
.history-when { font-size: 13px; line-height: 1.45; color: rgba(232, 223, 200, .7); overflow-wrap: anywhere; }
.history-more { font-size: 13px; }
.rail-foot { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 8px; font-size: 14px; }
.rail-foot form { margin: 0; }
.rail-fine { margin: 0; font-size: 12px; line-height: 1.5; color: rgba(232, 223, 200, .6); }
.rail-text { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(232, 223, 200, .8); }

/* what changed between two versions */
.diff { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.diff p { margin: 0; padding: 3px 10px; border-left: 2px solid transparent; }
.diff .same { color: rgba(232, 223, 200, .7); }
.diff .skip { font-size: 13px; font-style: italic; color: rgba(232, 223, 200, .6); }
.diff .gone { border-left-color: var(--red); background: rgba(192, 86, 58, .12); color: var(--warm-red); text-decoration: line-through; text-decoration-color: rgba(233, 183, 168, .55); }
.diff .new { border-left-color: var(--brass); background: rgba(201, 162, 74, .12); color: var(--parchment); }
.diff .changed { border-left-color: rgba(201, 162, 74, .5); color: var(--parchment); }
.diff del { background: rgba(192, 86, 58, .25); color: var(--warm-red); text-decoration: line-through; }
.diff ins { background: rgba(201, 162, 74, .22); color: var(--brass-bright); text-decoration: none; }
.diff .diff-title { color: var(--parchment); }
.note-main.compare { flex: none; }
.compare-pick { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 16px; margin: 0; }
.compare-pick label { display: flex; flex-direction: column; gap: 6px; font-family: var(--caps); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(232, 223, 200, .78); }
.compare-pick select.field { width: auto; min-width: 230px; height: auto; flex: none; padding: 10px 12px; font-family: var(--body); font-size: 15px; letter-spacing: normal; text-transform: none; }

@media (max-width: 1000px) {
  .note-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .note-room { flex-direction: column; }
  .note-rail { width: 100%; }
}
@media (max-width: 640px) {
  .note-grid { grid-template-columns: 1fr; gap: 10px; }
  .note-card { min-height: 0; }
  .note-add { min-height: 0; flex-direction: row; justify-content: flex-start; gap: 14px; padding: 16px 20px; text-align: left; }
  .note-add br { display: none; }
  .notes-empty { flex-direction: column; align-items: flex-start; }
  .notes-empty a { margin-left: 0; }
  .note-main { padding: 20px 16px; }
  .note-title { font-size: 28px; }
  .note-editor .note-title-field { font-size: 22px; }
  .note-editor .note-body-field { min-height: 240px; }
  .note-editor-foot { flex-direction: column; align-items: stretch; }
  .note-editor-foot .buttons > * { flex: 1; text-align: center; }
}

/* ---------- the Campaign Journal (design turn 11, design/journal) ---------- */
/* The journal's own wall. Turn 11 asks for the green ground, plank grain and
   grime that its two screens are drawn on; the rest of the site keeps the
   brown tavern wall of the first Crest Hall handoff, so this is scoped to the
   journal's pages rather than shared. Same layers, same z-indexes, green. */
.is-journal { background: radial-gradient(120% 80% at 50% -10%, #23382C 0%, #16241C 50%, #0D150F 100%); }
.is-journal .wall .specks { opacity: .22; }
.is-journal .wall .planks { background: repeating-linear-gradient(90deg, rgba(24, 38, 29, .55) 0, rgba(18, 30, 23, .3) 3px, rgba(30, 46, 35, .22) 9px, rgba(20, 33, 25, .34) 96px, rgba(10, 18, 13, .6) 102px, rgba(24, 38, 29, .55) 104px); }
.is-journal .wall .warmth { background: linear-gradient(180deg, rgba(12, 22, 16, .55) 0%, rgba(18, 30, 23, .12) 38%, rgba(8, 14, 10, .6) 100%); }
.is-journal .wall .stains {
  background:
    radial-gradient(30% 36% at 4% 92%, rgba(14, 24, 16, .85), transparent 70%),
    radial-gradient(24% 30% at 97% 8%, rgba(20, 32, 20, .8), transparent 72%),
    radial-gradient(18% 22% at 66% 98%, rgba(30, 44, 26, .7), transparent 70%);
}
.is-journal .wall .smoke { background: rgba(40, 74, 46, .26); }
.is-journal .wall .vignette { box-shadow: inset 0 0 120px rgba(0, 0, 0, .78), inset 0 -30px 70px rgba(6, 10, 7, .6); }
.is-journal .wall .soot { display: none; }

/* the column: centred and bounded, with the heading and the button on one
   baseline over a gold hairline */
.journal-col { width: 100%; max-width: 830px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; }
.journal-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.journal-head > div { display: flex; flex-direction: column; gap: 10px; flex: 1 1 340px; min-width: 0; max-width: 560px; }
.journal-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: 46px; line-height: 1.05; color: var(--parchment); }
.journal-lede { margin: 0; font-size: 16px; line-height: 1.65; color: rgba(232, 223, 200, .72); text-wrap: pretty; }
.journal-rule { display: block; height: 1px; margin-top: -6px; background: linear-gradient(90deg, rgba(201, 162, 74, .4), rgba(201, 162, 74, .05)); }

/* one night: the rail, the lit spine and its node, the plaque */
.chronicle { display: flex; flex-direction: column; gap: 22px; }
.chron-row { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 26px; align-items: start; }
.chron-rail { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-top: 22px; text-align: right; }
.chron-no { font-family: var(--caps); font-size: 12px; letter-spacing: .18em; color: var(--brass); }
.chron-when { font-size: 13px; color: rgba(232, 223, 200, .72); }
.chron-line { position: relative; min-width: 0; padding-left: 30px; }
.chron-line .spine { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, rgba(201, 162, 74, .35), rgba(201, 162, 74, .06)); }
.chron-line .spine.is-stub { bottom: auto; height: 22px; }
.chron-line .node { position: absolute; left: -5px; top: 27px; width: 11px; height: 11px; border: 1px solid var(--brass); transform: rotate(45deg); }
.chron-line .node.is-latest { background: var(--brass); }
.chron-line .node.is-stub { left: -3px; top: 24px; width: 7px; height: 7px; border: 0; background: rgba(201, 162, 74, .55); }
.chron-line.stub { display: flex; align-items: center; gap: 14px; padding-bottom: 30px; font-size: 14px; color: rgba(232, 223, 200, .72); }
.chron-line.stub span { padding-top: 14px; }
.plaque { display: flex; flex-direction: column; gap: 12px; padding: 20px 26px 22px; background: linear-gradient(180deg, rgba(27, 42, 33, .82), rgba(16, 26, 20, .82)); border: 1px solid var(--line); border-left: 2px solid rgba(201, 162, 74, .45); box-shadow: 0 18px 44px rgba(0, 0, 0, .45); color: var(--parchment); }
.plaque:hover { color: var(--parchment); border-color: rgba(201, 162, 74, .45); }
.plaque:hover .plaque-title { color: var(--brass-bright); }
.plaque-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: 27px; line-height: 1.15; color: var(--parchment); overflow-wrap: anywhere; }
.plaque-text { font-size: 16px; line-height: 1.7; color: rgba(232, 223, 200, .78); overflow-wrap: anywhere; text-wrap: pretty; }
.plaque-sig { margin-top: 2px; padding-top: 14px; border-top: 1px solid rgba(201, 162, 74, .14); font-size: 13px; color: rgba(232, 223, 200, .72); }
/* the reading room and the composer take the plaque's shell */
.plaque-main { border-left: 2px solid rgba(201, 162, 74, .45); box-shadow: 0 18px 44px rgba(0, 0, 0, .45); }
/* the ordinal in "3rd session"; sup would otherwise stretch the footer's line */
.room-foot sup { font-size: .7em; line-height: 0; vertical-align: .45em; }

/* the composer: the heading on the wall, the fields in a plaque below it, so
   what you're writing already looks like what it becomes */
.compose { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.note-room.solo { justify-content: center; }
.note-room.solo .compose { max-width: 830px; }
.compose-head { display: flex; flex-direction: column; gap: 8px; }
.compose-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: 38px; line-height: 1.1; color: var(--parchment); }
.well { display: flex; flex-direction: column; gap: 8px; }
.well-label { font-family: var(--caps); font-size: 11px; letter-spacing: .2em; color: rgba(201, 162, 74, .8); }
.well-field { box-sizing: border-box; width: 100%; padding: 13px 16px; background: rgba(9, 15, 11, .7); border: 1px solid var(--line); color: var(--parchment); font-family: var(--body); font-size: 16px; line-height: 1.7; }
.well-field:focus { outline: none; border-bottom-color: rgba(201, 162, 74, .4); }
.well-field:focus-visible { outline: 2px solid var(--brass-bright); outline-offset: 2px; }
.well-field::placeholder { color: rgba(232, 223, 200, .35); }
.well-field.is-title { font-family: var(--display); font-size: 22px; }
.well-field.is-body { min-height: 230px; resize: vertical; }
.well-field.is-date { width: auto; min-width: 200px; color-scheme: dark; }
.compose-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 4px; }
.compose-foot .fine { margin: 0; font-size: 13px; color: rgba(232, 223, 200, .72); }
.compose-foot .buttons { display: flex; align-items: center; gap: 14px; }

/* the hub's status strip, once the journal has something in it */
.status-half.is-link { color: inherit; }
.status-half.is-link:hover .status-value { color: var(--brass-bright); }

@media (max-width: 640px) {
  .journal-title { font-size: 34px; }
  .journal-head .btn-brass { width: 100%; text-align: center; }
  .chron-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .chron-rail { flex-direction: row; align-items: baseline; gap: 10px; padding-top: 0; }
  .chron-line { padding-left: 18px; }
  .chron-line .node { left: -4px; top: 22px; width: 9px; height: 9px; }
  .plaque { padding: 16px 18px 18px; }
  .plaque-title { font-size: 22px; }
  .plaque-text { font-size: 15px; }
  .compose-title { font-size: 28px; }
  .compose-foot { flex-direction: column; align-items: stretch; }
  .compose-foot .buttons > * { flex: 1; text-align: center; }
}

/* ---------- the DM's screen (design turns 8a and 14) ---------- */
/* The Party tab's three columns at the handoff's widths: the table and its
   NPCs, the DM's own notes, and passing notes. */
.head-buttons { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dm-room { display: grid; grid-template-columns: 390px minmax(0, 1fr) 330px; grid-template-areas: "table notes pass"; gap: 18px; align-items: start; }
.dm-table { grid-area: table; }
.dm-notes { grid-area: notes; }
.dm-pass { grid-area: pass; }
.dm-col { box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 22px 24px; background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--brass); }
.dm-notes { background: rgba(13, 21, 15, .6); border-top-color: var(--line); }
.dm-col-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sm { font-size: 13px; }

.sheet-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sheet-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.sheet-row:first-child { border-top: 0; padding-top: 2px; }
.sheet-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.sheet-name { font-family: var(--display); font-size: 21px; line-height: 1.2; color: var(--parchment); overflow-wrap: anywhere; }
.sheet-line { font-size: 13px; color: rgba(232, 223, 200, .72); }
.sheet-player { flex: none; font-size: 14px; color: rgba(232, 223, 200, .72); }
.sheet-open { flex: none; font-size: 14px; white-space: nowrap; }
.sheet-row.is-empty .sheet-name { font-family: var(--body); font-size: 16px; color: rgba(232, 223, 200, .78); }
.dm-fine { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(232, 223, 200, .6); }

.dm-compose { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; }
/* .field is flex: 0 1 300px, which in a column becomes a 300px tall box */
.dm-compose .field { flex: none; width: 100%; box-sizing: border-box; height: auto; min-height: 84px; resize: vertical; font-size: 15px; line-height: 1.6; letter-spacing: normal; }
.dm-note-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.dm-note { padding: 12px 14px; background: rgba(13, 21, 15, .55); border-left: 2px solid rgba(201, 162, 74, .4); }
.dm-note-body { margin: 0 0 8px; font-size: 15px; line-height: 1.6; color: var(--parchment); overflow-wrap: anywhere; }
.dm-note-body p { margin: 0 0 .7em; }
.dm-note-body p:last-child { margin-bottom: 0; }
.npc-srd-head { margin-top: 14px; }
.dm-note-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; font-size: 12px; color: rgba(232, 223, 200, .62); }
.dm-note-foot button { font-size: 12px; }

/* Narrower, the table sits over the DM's notes with passing notes beside
   both; the second row takes any spare height so the two stay together */
@media (max-width: 1240px) { .dm-room { grid-template-columns: minmax(0, 1fr) 330px; grid-template-rows: auto 1fr; grid-template-areas: "table pass" "notes pass"; } }
@media (max-width: 1000px) { .dm-room { grid-template-columns: minmax(0, 1fr) 300px; } }
@media (max-width: 820px) {
  .dm-room { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "table" "pass" "notes"; }
  .sheet-row { flex-wrap: wrap; gap: 6px 14px; }
  .sheet-open { margin-left: auto; }
}

/* ---------- the campaign file (in no handoff) ---------- */
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.file-card { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; background: var(--card); border: 1px solid var(--line); border-top: 2px solid var(--brass); }
.file-card > p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(232, 223, 200, .88); }
.file-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.file-form { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; }
.file-pick { max-width: 100%; font-size: 14px; color: var(--parchment); }
.file-text { flex: none; width: 100%; box-sizing: border-box; height: auto; min-height: 160px; resize: vertical; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 13px; line-height: 1.55; letter-spacing: normal; }
.file-sections { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 14px; }
.file-sections div { display: contents; }
.file-sections dt { padding-top: 3px; font-family: var(--caps); font-size: 10px; letter-spacing: .16em; color: var(--brass); }
.file-sections dd { margin: 0; color: rgba(232, 223, 200, .82); }
.import-rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); background: rgba(13, 21, 15, .55); }
.import-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 10px 14px; border-bottom: var(--row-rule); }
.import-row:last-child { border-bottom: 0; }
.import-state { padding-top: 4px; font-family: var(--caps); font-size: 10px; letter-spacing: .16em; color: rgba(232, 223, 200, .75); }
.import-row.is-add .import-state { color: var(--live); }
.import-row.is-update .import-state { color: var(--brass); }
.import-row.is-skip .import-state { color: #E9B7A8; }
.import-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.import-name { font-size: 15px; color: var(--parchment); overflow-wrap: anywhere; }
.import-row.is-same .import-name, .import-row.is-keep .import-name { color: rgba(232, 223, 200, .8); }
.import-detail { font-size: 13px; line-height: 1.5; color: rgba(232, 223, 200, .75); overflow-wrap: anywhere; }
.import-confirm { margin: 0; }
.import-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 640px) {
  .file-sections { grid-template-columns: minmax(0, 1fr); }
  .import-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ---------- passing notes: 8a's third column, and 7a, 7b and 8b ---------- */
.dm-pass { gap: 16px; }
.pass-compose { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 16px; background: linear-gradient(180deg, rgba(35, 56, 44, .96), rgba(17, 27, 21, .96)); border: 1px solid var(--line); border-top: 2px solid var(--brass); }
.pass-to { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.pass-chip { position: relative; flex: 1 1 64px; min-width: 0; }
.pass-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pass-chip span { display: block; padding: 7px 6px; border: 1px solid #3A5544; text-align: center; font-family: var(--caps); font-size: 10px; letter-spacing: .12em; color: rgba(232, 223, 200, .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pass-chip:hover span { border-color: rgba(201, 162, 74, .6); }
.pass-chip input:checked + span { border-color: var(--brass); background: rgba(201, 162, 74, .16); color: var(--parchment); }
.pass-chip input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 2px; }
.pass-compose .field { flex: none; width: 100%; box-sizing: border-box; height: auto; min-height: 84px; padding: 12px; resize: none; background: rgba(11, 18, 14, .7); border-color: var(--brass); font-size: 15px; line-height: 1.6; letter-spacing: normal; }
.pass-compose .btn-brass { padding: 12px; font-size: 12px; }
.pass-status { margin: 0; font-size: 13px; line-height: 1.5; color: var(--live); }
.pass-status:empty { display: none; }
.pass-status.is-error { color: #E9B7A8; }
.passed-region { display: flex; flex-direction: column; gap: 10px; }
.passed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.passed { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: rgba(13, 21, 15, .6); border-left: 2px solid rgba(201, 162, 74, .4); }
.passed.is-confirmed { border-left-color: var(--brass); }
.passed p { margin: 0; }
.passed-body { font-size: 14px; line-height: 1.55; color: rgba(232, 223, 200, .9); white-space: pre-wrap; overflow-wrap: anywhere; }
.passed-meta { font-size: 12px; line-height: 1.5; color: rgba(232, 223, 200, .75); }
.passed-meta .ok { color: var(--live); }
.passed-reply { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding-top: 8px; border-top: 1px solid rgba(201, 162, 74, .14); }
.passed-reply-body { font-size: 14px; line-height: 1.55; color: rgba(232, 223, 200, .9); overflow-wrap: anywhere; }
.passed-earlier summary { cursor: pointer; font-family: var(--caps); font-size: 10px; letter-spacing: .18em; color: rgba(232, 223, 200, .62); }
.passed-earlier[open] summary { margin-bottom: 10px; }
.passed.is-fresh { animation: passed-fresh 1.2s ease-out; }
@keyframes passed-fresh { from { background: rgba(201, 162, 74, .22); } to { background: rgba(13, 21, 15, .6); } }

/* A player's campaign page: the note as it lands (8b), then settled (7b) */
.pn-list { display: flex; flex-direction: column; gap: 10px; }
.pn-list:empty { display: none; }
.passed-note { display: flex; flex-direction: column; gap: 12px; padding: 18px; background: linear-gradient(180deg, rgba(35, 56, 44, .96), rgba(17, 27, 21, .96)); border: 1px solid var(--brass); box-shadow: 0 18px 40px rgba(0, 0, 0, .6); }
.passed-note p { margin: 0; }
.pn-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pn-from { font-family: var(--caps); font-size: 10px; letter-spacing: .2em; color: var(--brass); }
.pn-when { flex: none; font-size: 12px; color: rgba(232, 223, 200, .75); }
.pn-body { font-family: var(--display); font-size: 21px; line-height: 1.4; color: var(--parchment); white-space: pre-wrap; overflow-wrap: anywhere; }
.pn-actions { display: flex; gap: 10px; }
.pn-actions form { flex: 1; display: flex; margin: 0; }
.pn-actions .btn-brass { flex: 1; min-height: 44px; padding: 13px; font-size: 12px; }
.pn-reply-open { flex: 1; box-sizing: border-box; min-height: 44px; padding: 13px; text-align: center; }
.pn-reply { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.pn-reply .field { flex: none; width: 100%; box-sizing: border-box; height: auto; min-height: 84px; padding: 12px; resize: none; background: rgba(11, 18, 14, .7); border-color: #3A5544; font-size: 15px; line-height: 1.6; letter-spacing: normal; }
.pn-reply .field:focus { border-color: var(--brass); }
.pn-reply .btn-brass { min-height: 44px; padding: 13px; font-size: 12px; }
.pn-reply[hidden] { display: none; }
.pn-fine, .pn-meta { font-size: 12px; line-height: 1.5; color: rgba(232, 223, 200, .75); }
.pn-state { font-size: 12px; color: var(--live); }
.pn-status { font-size: 13px; color: #E9B7A8; }
.pn-replies { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pn-replies li { padding: 10px 12px; background: rgba(13, 21, 15, .7); border-left: 2px solid rgba(201, 162, 74, .4); }
.pn-reply-body { font-size: 15px; line-height: 1.55; color: rgba(232, 223, 200, .9); overflow-wrap: anywhere; }
.passed-note.is-confirmed { gap: 8px; padding: 13px 14px; background: rgba(13, 21, 15, .7); border: 0; border-left: 2px solid rgba(201, 162, 74, .4); box-shadow: none; }
.passed-note.is-confirmed .pn-body { font-family: var(--body); font-size: 15px; line-height: 1.55; color: rgba(232, 223, 200, .9); }
.passed-note.is-confirmed .pn-reply-open { flex: none; min-height: 0; padding: 7px 14px; font-size: 10px; }
.passed-note.is-confirmed .pn-fine { display: none; }
.passed-note.is-landing { animation: pn-land .6s ease-out; }
@keyframes pn-land { from { opacity: 0; transform: translateY(-10px); } 55% { opacity: 1; box-shadow: 0 0 34px rgba(201, 162, 74, .4); } to { transform: none; } }
.pn-none { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(232, 223, 200, .7); }
.live-region { display: contents; }
.live-toast { position: fixed; left: 50%; bottom: 20px; z-index: 30; transform: translateX(-50%); box-sizing: border-box; max-width: calc(100vw - 32px); margin: 0; padding: 14px 20px; background: linear-gradient(180deg, rgba(35, 56, 44, .98), rgba(17, 27, 21, .98)); border: 1px solid var(--brass); box-shadow: 0 18px 40px rgba(0, 0, 0, .6); font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .passed.is-fresh, .passed-note.is-landing { animation: none; } }

/* ---------- the owner dashboard (not in the handoff) ---------- */
a.chip:hover { background: rgba(201, 162, 74, .15); color: var(--brass-bright); }
.stat-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.stat { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-top: 2px solid var(--brass); }
.stat b { font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1; color: var(--parchment); font-variant-numeric: tabular-nums; }
.stat span { font-family: var(--caps); font-size: 10px; letter-spacing: .18em; color: rgba(232, 223, 200, .78); }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.admin-main, .admin-side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.chart-fig { margin: 0; padding: 16px 18px 12px; background: rgba(13, 21, 15, .55); border: 1px solid var(--line); }
.chart { display: block; width: 100%; height: auto; }
.chart .bar, .hbar .bar { fill: var(--brass); }
.chart .bar.zero { fill: rgba(201, 162, 74, .22); }
.chart .axis { stroke: rgba(201, 162, 74, .3); stroke-width: 1; }
.chart text { fill: rgba(232, 223, 200, .75); font-family: var(--body); font-size: 12px; }
.chart-fig figcaption { margin-top: 8px; font-size: 13px; color: rgba(232, 223, 200, .78); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); background: rgba(13, 21, 15, .55); }
table.admin { width: 100%; border-collapse: collapse; font-size: 14px; }
table.admin th { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; font-family: var(--caps); font-weight: 400; font-size: 10px; letter-spacing: .16em; color: rgba(232, 223, 200, .75); white-space: nowrap; }
table.admin td { padding: 10px 14px; border-top: var(--row-rule); color: var(--parchment); vertical-align: top; }
table.admin tbody tr:first-child td { border-top: 0; }
table.admin .num { text-align: right; font-variant-numeric: tabular-nums; }
table.admin .dim { color: rgba(232, 223, 200, .75); overflow-wrap: anywhere; }
table.admin .sub { display: block; font-size: 12px; color: rgba(232, 223, 200, .6); }
table.admin .tag { margin-left: 6px; }
.row-actions { display: flex; gap: 14px; justify-content: flex-end; white-space: nowrap; }
.row-actions form { margin: 0; }
.admin-search { display: flex; gap: 8px; margin: 0; }
.admin-search .field { width: 220px; flex: none; padding: 9px 12px; font-size: 14px; letter-spacing: normal; }
.admin-search .field::placeholder { letter-spacing: normal; }
.dim-line { margin: 0; font-size: 14px; color: rgba(232, 223, 200, .72); }
.bar-rows { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; }
.bar-rows li { display: grid; grid-template-columns: 100px minmax(0, 1fr) 30px; align-items: center; gap: 10px; font-size: 13px; color: rgba(232, 223, 200, .85); }
.hbar { display: block; width: 100%; height: 8px; background: rgba(201, 162, 74, .12); }
.bar-n { text-align: right; font-variant-numeric: tabular-nums; }
.side-card .line b { font-weight: 400; color: var(--parchment); font-variant-numeric: tabular-nums; }
.side-card .addr { min-width: 0; overflow-wrap: anywhere; }
.admin-side .side-card form { margin: 0; }
.admin-side .btn-line, .admin-side .btn-quiet-line { align-self: flex-start; }
.feed { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; line-height: 1.5; color: rgba(232, 223, 200, .82); overflow-wrap: anywhere; }
.feed b { font-weight: 400; color: var(--parchment); }
.feed .when { display: block; font-size: 12px; color: rgba(232, 223, 200, .62); }
.rename { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 16px 18px; background: rgba(13, 21, 15, .55); border: 1px solid var(--line); }
.rename + .rename { margin-top: 12px; }
.rename .meta { margin: 0 0 4px; font-size: 14px; color: rgba(232, 223, 200, .78); }
.rename .btn-brass { align-self: flex-start; margin-top: 4px; }
.slug-field { display: flex; align-items: stretch; min-width: 0; }
.slug-prefix { display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--line-field); border-right: 0; font-size: 14px; color: rgba(232, 223, 200, .72); white-space: nowrap; }
.slug-field .field { flex: 1; width: auto; min-width: 0; }
@media (max-width: 1000px) {
  .stat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat b { font-size: 28px; }
  .admin-search { width: 100%; }
  .admin-search .field { width: auto; flex: 1; }
  .slug-field { flex-direction: column; }
  .slug-prefix { padding: 6px 10px; border-right: 1px solid var(--line-field); border-bottom: 0; }
}

/* renaming your own group, on the members page */
.rename.own { max-width: 560px; }

/* ---------- the privacy policy and terms ---------- */
.gate-legal { display: block; margin-top: 8px; font-size: 11px; letter-spacing: .2em; }
.gate-legal a { color: rgba(201, 162, 74, .85); }
.legal-nav a { color: rgba(232, 223, 200, .8); }
.legal-nav a[aria-current] { color: var(--parchment); }
.room.prose { display: block; }
.prose .updated { margin: 8px 0 26px; font-size: 14px; color: rgba(232, 223, 200, .62); }
.prose h2 { margin: 32px 0 10px; font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--parchment); }
.prose p, .prose li { font-size: 16px; line-height: 1.7; color: rgba(232, 223, 200, .88); }
.prose p { max-width: 68ch; margin: 0 0 12px; }
.prose ul { max-width: 68ch; margin: 0 0 14px; padding-left: 1.2em; }
.prose li { margin: 0 0 6px; }
.prose li::marker { color: var(--brass); }
.prose strong { font-weight: 600; color: var(--parchment); }
.prose a { overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: rgba(201, 162, 74, .45); text-underline-offset: 3px; }

/* ---------- Maps: the drawing table and the kept maps ---------- */
/* Every sheet carries its own parchment and border, so it holds against the
   pine on its own (the handoff's "maps on dark chrome"). The kept-maps grid
   carries name and kind under each tile, since labels vanish at 240px. */
.maps-room { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.maps-table, .maps-kept { box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 22px 24px; background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--brass); min-width: 0; }
.maps-kept { background: rgba(13, 21, 15, .6); border-top-color: var(--line); }
.maps-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.maps-kinds { display: flex; gap: 6px; flex-wrap: wrap; }
.maps-kind { padding: 7px 12px; border: 1px solid var(--line-field); font-family: var(--caps); font-size: 11px; letter-spacing: .16em; color: rgba(232, 223, 200, .8); text-transform: uppercase; }
.maps-kind:hover { border-color: var(--brass); color: var(--parchment); }
.maps-kind.is-on { border-color: var(--brass); background: rgba(201, 162, 74, .15); color: var(--brass-bright); }
.map-sheet { margin: 0; line-height: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.map-sheet svg { display: block; width: 100%; height: auto; }
.map-sheet .map-grid { transition: opacity .15s; }
.maps-actions { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; }
.map-keep, .map-rename { display: flex; align-items: center; gap: 8px; margin: 0; flex: 1; min-width: 260px; }
.map-keep .field, .map-rename .field { flex: 1; width: auto; min-width: 0; padding: 9px 12px; font-size: 14px; letter-spacing: normal; }
.map-keep .field::placeholder, .map-rename .field::placeholder { letter-spacing: normal; }
.map-grid-toggle { display: flex; align-items: center; gap: 6px; font-family: var(--caps); font-size: 11px; letter-spacing: .16em; color: rgba(232, 223, 200, .8); cursor: pointer; }
.map-grid-toggle input { accent-color: var(--brass); }
.map-under { display: flex; flex-direction: column; gap: 8px; }
.map-key { columns: 2; column-gap: 28px; margin: 0; padding-left: 1.6em; font-size: 14px; line-height: 1.5; color: rgba(232, 223, 200, .85); }
.map-key li { break-inside: avoid; margin: 0 0 5px; }
.map-key li::marker { color: var(--brass); font-family: var(--caps); }
.map-key b { font-weight: 400; color: var(--parchment); }
.map-key span { color: rgba(232, 223, 200, .7); }
.map-grid-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.map-tile img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.map-tile a:hover img { border-color: var(--brass); }
.map-tile-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 6px; }
.map-tile-name { font-family: var(--display); font-size: 17px; color: var(--parchment); overflow-wrap: anywhere; }
.map-tile-name:hover { color: var(--brass-bright); }
.map-sheet.is-kept { max-width: 1200px; }
@media (max-width: 1000px) { .maps-room { grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; } }
@media (max-width: 820px) {
  .maps-room { grid-template-columns: minmax(0, 1fr); }
  .map-grid-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-key { columns: 1; }
}
@media (max-width: 640px) {
  .maps-table, .maps-kept { padding: 16px; }
  .map-keep { flex-wrap: wrap; }
  .map-grid-list { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- the DM screen's tabs and Story panel (design turn 14) ---------- */
.dm-tabbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin: 0 0 4px; padding: 0 0 12px; border-bottom: 1px solid rgba(201, 162, 74, .14); }
.dm-tabs { display: flex; gap: 8px; }
.dm-tab { padding: 11px 22px 10px; border: 1px solid rgba(201, 162, 74, .22); font-family: var(--caps); font-size: 12px; letter-spacing: .2em; color: rgba(232, 223, 200, .62); }
.dm-tab:hover { color: var(--parchment); border-color: rgba(201, 162, 74, .45); }
.dm-tab.is-on { background: rgba(201, 162, 74, .16); border-color: var(--brass); border-bottom-width: 2px; padding-bottom: 9px; color: #F0E7CE; }
.dm-showing { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; color: rgba(232, 223, 200, .68); }
.dm-showing .dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(201, 162, 74, .3); }
.dm-showing .dot.is-on { background: var(--brass); }
.dm-status { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 22px; }
.dm-presence { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; color: rgba(232, 223, 200, .68); }
.dm-presence .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(127, 185, 138, .25); }
.dm-presence .dot.is-live { background: var(--live); }
.dm-panel { display: flex; flex-direction: column; gap: 16px; }
.dm-panel[hidden] { display: none; }
.story-room { display: grid; grid-template-columns: 348px minmax(0, 1fr); gap: 18px; align-items: start; }
.story-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.spine { padding: 15px; }
.plot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.plot { padding: 11px 12px 10px; background: rgba(11, 18, 14, .5); border-left: 2px solid rgba(201, 162, 74, .45); }
.plot.is-in_play { background: rgba(201, 162, 74, .1); border-left-color: var(--brass); }
.plot.is-held { background: rgba(11, 18, 14, .38); border-left-color: rgba(201, 162, 74, .2); }
.plot-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.plot-title { font-family: var(--display); font-size: 17px; color: var(--parchment); overflow-wrap: anywhere; }
.plot-status { flex: none; font-family: var(--caps); font-size: 9px; letter-spacing: .14em; color: rgba(201, 162, 74, .9); }
.plot.is-in_play .plot-status { color: #7FB98A; }
.plot.is-held .plot-status { color: rgba(232, 223, 200, .5); }
.plot-detail { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; color: rgba(232, 223, 200, .84); white-space: pre-wrap; overflow-wrap: anywhere; }
.plot-tools { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; }
.plot-tools button, .plot-tools summary { font-size: 12px; }
.plot-tools button[disabled] { opacity: .35; cursor: default; }
.plot-select { padding: 3px 6px; background: rgba(11, 18, 14, .7); border: 1px solid var(--line-field); color: rgba(232, 223, 200, .85); font: inherit; font-size: 12px; }
.plot-edit { display: inline; }
.plot-edit > summary { list-style: none; cursor: pointer; color: rgba(232, 223, 200, .7); }
.plot-edit > summary::-webkit-details-marker { display: none; }
.plot-edit > summary:hover { color: var(--brass-bright); }
.plot-edit[open] { display: block; width: 100%; }
.plot-form { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0; }
.plot-form.is-new { margin-top: 4px; padding-top: 14px; border-top: 1px solid rgba(201, 162, 74, .14); }
.plot-form .field { flex: none; width: 100%; box-sizing: border-box; height: auto; padding: 9px 12px; font-size: 14px; letter-spacing: normal; }
.plot-form textarea.field { min-height: 3.6em; line-height: 1.5; resize: vertical; }
.plot-form .field::placeholder { letter-spacing: normal; }
.plot-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.maps-panel { padding: 15px; }
.maps-panel .dm-col-head { flex-wrap: wrap; gap: 8px 16px; }
.map-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.map-filter { padding: 6px 13px; border: 1px solid rgba(201, 162, 74, .25); font-family: var(--caps); font-size: 10px; letter-spacing: .16em; color: rgba(232, 223, 200, .7); text-transform: uppercase; }
.map-filter:hover { color: var(--parchment); border-color: var(--brass); }
.map-filter.is-on { background: rgba(201, 162, 74, .18); border-color: var(--brass); color: #F0E7CE; }
.map-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; }
.map-tiles .map-tile a:first-child, .map-tile-pic { position: relative; display: block; }
.map-tile.is-showing img { border-color: var(--brass); }
.map-tiles .map-tile[hidden] { display: none; }
.map-tiles .map-tile.is-showing img { border-color: var(--brass); }
.map-badge { position: absolute; top: 6px; right: 6px; padding: 2px 6px; background: var(--brass); color: var(--page); font-family: var(--caps); font-size: 8.5px; letter-spacing: .14em; border-radius: 2px; }
.map-tiles .map-tile-meta { flex-direction: column; align-items: flex-start; gap: 2px; }
.map-tiles .map-tile-name { font-size: 15px; }
.map-tiles .map-tile-meta button { font-size: 12px; }
/* the Party tab's NPCs, under the table: in play, or ready-made */
.npcs { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; padding-top: 14px; border-top: 1px solid rgba(201, 162, 74, .14); }
.npc-head { flex-wrap: wrap; gap: 8px 14px; }
.npc-tabs { display: flex; gap: 6px; }
.npc-tab { padding: 5px 12px; border: 1px solid rgba(201, 162, 74, .22); font-family: var(--caps); font-size: 9.5px; letter-spacing: .16em; color: rgba(232, 223, 200, .6); }
.npc-tab:hover { color: var(--parchment); border-color: rgba(201, 162, 74, .45); }
.npc-tab.is-on { background: rgba(201, 162, 74, .16); border-color: var(--brass); color: #F0E7CE; }
.npc-count { color: var(--brass); }
.npc-pane[hidden] { display: none; }
.npc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.npc { display: flex; flex-direction: column; gap: 4px; padding: 11px 0; border-top: 1px solid rgba(201, 162, 74, .14); }
.npc:first-child { border-top: 0; padding-top: 2px; }
.npc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.npc-name { font-family: var(--display); font-size: 16px; color: var(--parchment); overflow-wrap: anywhere; }
.npc-stats { flex: none; font-size: 12px; color: rgba(232, 223, 200, .72); white-space: nowrap; }
.npc-notes { margin: 0; font-size: 12.5px; line-height: 1.45; color: rgba(232, 223, 200, .84); white-space: pre-wrap; overflow-wrap: anywhere; }
.npc-tools { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; font-size: 12px; }
.npc-tools button, .npc-tools summary { font-size: 12px; }
.npc-search { margin: 0; }
.npc-search .field { flex: none; width: 100%; box-sizing: border-box; padding: 8px 12px; font-size: 14px; letter-spacing: normal; }
.npc-search .field::placeholder { letter-spacing: normal; }
.npc-ready { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 6px 12px; padding: 8px 0; border-top: 1px solid rgba(201, 162, 74, .14); }
.npc-ready:first-child { border-top: 0; }
.npc-ready[hidden] { display: none; }
.npc-ready .npc-name { font-size: 15px; }
.npc-ready button { font-size: 12.5px; }
.is-ready { max-height: 380px; overflow-y: auto; }

/* the Story tab's creatures: search, encounters with hit points, loose pins, a stat block */
.creatures-panel { padding: 15px; }
.creatures-panel .dm-col-head { flex-wrap: wrap; gap: 8px 16px; }
.creature-search { display: flex; gap: 8px; margin: 0; flex: 1; max-width: 420px; min-width: 240px; }
.creature-search .field { flex: 1; width: auto; min-width: 0; padding: 8px 12px; font-size: 14px; letter-spacing: normal; }
.creature-search .field::placeholder { letter-spacing: normal; }
.creature-search .btn-line { padding: 8px 14px; }
.creature-results { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: rgba(11, 18, 14, .5); border: 1px solid rgba(201, 162, 74, .2); }
.creature-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.creature-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: center; gap: 6px 14px; padding: 7px 0; border-top: 1px solid rgba(201, 162, 74, .14); font-size: 12.5px; }
.creature-row:first-child { border-top: 0; }
.cr-name { font-family: var(--display); font-size: 15px; color: var(--parchment); }
.cr-cr { font-family: var(--caps); font-size: 10px; letter-spacing: .12em; color: rgba(201, 162, 74, .9); white-space: nowrap; }
.cr-stats { color: rgba(232, 223, 200, .78); }
.cr-pin { display: flex; align-items: center; gap: 6px; }
.encounter { display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 10px; background: rgba(11, 18, 14, .4); border: 1px solid rgba(201, 162, 74, .2); border-top: 2px solid var(--brass); }
.encounter-head { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; }
.encounter-name { font-family: var(--display); font-size: 17px; color: var(--parchment); white-space: nowrap; }
.encounter-meta { font-size: 12.5px; color: rgba(232, 223, 200, .72); white-space: nowrap; }
.encounter-tools { margin-left: auto; display: flex; gap: 12px; font-size: 12.5px; }
.encounter-tools button { font-size: 12.5px; }
.members, .pins { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.member, .pin { display: flex; flex-direction: column; gap: 5px; padding: 11px 12px; background: rgba(11, 18, 14, .6); border: 1px solid rgba(201, 162, 74, .2); min-width: 0; }
.member.is-notable { border-color: rgba(201, 162, 74, .35); }
.member.is-down { opacity: .55; }
.member-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.member-name { font-family: var(--display); font-size: 15px; color: var(--parchment); overflow-wrap: anywhere; }
.member-line { margin: 0; font-size: 12.5px; color: rgba(232, 223, 200, .78); }
.hp-bar { height: 5px; background: rgba(232, 223, 200, .13); overflow: hidden; }
.hp-fill { display: block; height: 100%; background: #8E4A3C; transition: width .15s; }
.hp-fill.w-0 { width: 0 } .hp-fill.w-5 { width: 5% } .hp-fill.w-10 { width: 10% } .hp-fill.w-15 { width: 15% } .hp-fill.w-20 { width: 20% } .hp-fill.w-25 { width: 25% } .hp-fill.w-30 { width: 30% } .hp-fill.w-35 { width: 35% } .hp-fill.w-40 { width: 40% } .hp-fill.w-45 { width: 45% } .hp-fill.w-50 { width: 50% } .hp-fill.w-55 { width: 55% } .hp-fill.w-60 { width: 60% } .hp-fill.w-65 { width: 65% } .hp-fill.w-70 { width: 70% } .hp-fill.w-75 { width: 75% } .hp-fill.w-80 { width: 80% } .hp-fill.w-85 { width: 85% } .hp-fill.w-90 { width: 90% } .hp-fill.w-95 { width: 95% } .hp-fill.w-100 { width: 100% }
.hp-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--parchment); }
.hp-btn { width: 30px; padding: 3px 0; border: 1px solid rgba(201, 162, 74, .4); background: transparent; color: var(--brass); font-family: var(--caps); font-size: 11px; cursor: pointer; }
.hp-btn:hover { background: rgba(201, 162, 74, .15); }
.hp-num { font-variant-numeric: tabular-nums; }
.hp-row .quiet { margin-left: auto; }
.encounter-new { display: flex; gap: 8px; margin: 0; }
.encounter-new .field { flex: 1; width: auto; min-width: 0; padding: 8px 12px; font-size: 14px; letter-spacing: normal; }
.encounter-new .field::placeholder { letter-spacing: normal; }
.encounter-new .btn-line { padding: 8px 14px; white-space: nowrap; }
.pin-card { display: flex; flex-direction: column; gap: 5px; color: inherit; }
.pin-card:hover .member-name { color: var(--brass-bright); }
.pin.is-open { border-color: var(--brass); background: rgba(201, 162, 74, .08); }
.pin-qty { color: var(--brass); }
.pin-tools { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; }
.pin-tools button { font-size: 12px; }
.stat-block { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: rgba(201, 162, 74, .08); border: 1px solid rgba(201, 162, 74, .35); border-top: 2px solid var(--brass); }
.stat-block[hidden] { display: none; }
.sb-head { display: flex; flex-direction: column; gap: 2px; }
.sb-name { margin: 0; font-family: var(--display); font-size: 19px; color: var(--parchment); }
.sb-kind { margin: 0; font-size: 13px; color: rgba(232, 223, 200, .72); font-style: italic; }
.sb-line { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(232, 223, 200, .84); }
.sb-line b { font-weight: 400; color: #F0E7CE; }
.sb-abilities { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 8px 0; border-top: 1px solid rgba(201, 162, 74, .25); border-bottom: 1px solid rgba(201, 162, 74, .25); }
.sb-abilities div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sb-ab { font-family: var(--caps); font-size: 9px; letter-spacing: .14em; color: var(--brass); }
.sb-score { font-size: 14px; color: var(--parchment); white-space: nowrap; }
.sb-save { font-size: 11px; color: rgba(232, 223, 200, .62); white-space: nowrap; }
.sb-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.sb-cols > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sb-group { margin: 6px 0 0; font-family: var(--caps); font-size: 10px; letter-spacing: .18em; color: rgba(201, 162, 74, .85); }
.sb-entry { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(232, 223, 200, .84); white-space: pre-line; }
.sb-entry b { font-weight: 400; color: #F0E7CE; }
.sb-foot { display: flex; gap: 16px; padding-top: 6px; border-top: 1px solid rgba(201, 162, 74, .2); font-size: 13px; }
@media (max-width: 1000px) { .members, .pins { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .members, .pins { grid-template-columns: minmax(0, 1fr); }
  .creature-row { grid-template-columns: minmax(0, 1fr); }
  .sb-cols { grid-template-columns: minmax(0, 1fr); }
  .sb-abilities { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* the Story tab's bottom row: maps beside ambience */
.story-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 318px; gap: 16px; align-items: start; }
.ambience { padding: 15px; gap: 10px; }
.amb-layer { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: 8px 10px; padding: 8px 8px 8px 0; border-left: 2px solid transparent; cursor: pointer; }
.amb-layer.is-focus { border-left-color: var(--brass); padding-left: 8px; }
.amb-layer.is-under { border-top: 1px solid rgba(201, 162, 74, .16); }
.amb-play { width: 36px; height: 36px; padding: 0; border: 1px solid rgba(201, 162, 74, .4); background: transparent; color: var(--brass); font-size: 13px; cursor: pointer; }
.amb-play.is-playing, .is-focus .amb-play:not([disabled]) { background: rgba(201, 162, 74, .18); border-color: var(--brass); }
.amb-play[disabled] { opacity: .45; cursor: default; }
.amb-track { font-size: 14px; color: #F0E7CE; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amb-tag { font-family: var(--caps); font-size: 9px; letter-spacing: .16em; color: rgba(232, 223, 200, .6); }
.amb-loop { padding: 3px 8px; border: 1px solid rgba(201, 162, 74, .22); background: transparent; color: rgba(232, 223, 200, .6); font-family: var(--caps); font-size: 9px; letter-spacing: .14em; cursor: pointer; white-space: nowrap; }
.amb-loop.is-on { border-color: var(--brass); color: #F0E7CE; }
.amb-vol-wrap { grid-column: 2 / -1; display: block; }
.amb-vol { width: 100%; height: 3px; margin: 0; accent-color: var(--brass); }
.amb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.amb-chip { padding: 5px 10px; border: 1px solid rgba(201, 162, 74, .22); background: transparent; color: rgba(232, 223, 200, .85); font: inherit; font-size: 12px; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amb-chip:hover { border-color: var(--brass); color: var(--parchment); }
.amb-add { align-self: flex-start; cursor: pointer; }
@media (max-width: 1000px) { .story-bottom { grid-template-columns: minmax(0, 1fr); } }

/* the Rules tab: three columns of rulings, then the party band */
.rules-room { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.rules-col { padding: 15px; gap: 12px; }
.d20 { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: rgba(201, 162, 74, .09); border: 1px solid rgba(201, 162, 74, .3); }
.d20-die { flex: none; width: 54px; height: 54px; padding: 0; border: 1px solid var(--brass); background: rgba(201, 162, 74, .16); color: #F0E7CE; font-family: var(--display); font-size: 22px; cursor: pointer; }
.d20-die:hover { background: rgba(201, 162, 74, .3); }
.d20-side { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.d20-title { margin: 0; font-family: var(--display); font-size: 16px; color: var(--parchment); }
.d20-line { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13.5px; color: rgba(232, 223, 200, .8); }
.d20-line .is-crit { color: #7FB98A; }
.d20-line .is-fumble { color: var(--warm-red); }
.ladder { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.ladder div { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.ladder dt { font-family: var(--caps); font-size: 11px; letter-spacing: .12em; color: var(--brass); }
.ladder dd { margin: 0; color: rgba(232, 223, 200, .84); }
.ruling, .condition { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(232, 223, 200, .84); }
.ruling b, .condition b { display: block; font-weight: 400; font-family: var(--display); font-size: 15px; color: #F0E7CE; }
.rule-group { display: flex; flex-direction: column; gap: 3px; }
.rule-label { margin: 0; font-family: var(--caps); font-size: 10px; letter-spacing: .18em; color: rgba(201, 162, 74, .85); }
.rule-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(232, 223, 200, .84); }
.party-band { padding: 15px; }
.party-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.party-card { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; background: rgba(11, 18, 14, .6); border: 1px solid rgba(201, 162, 74, .2); min-width: 0; }
.party-card.is-empty { border-style: dashed; }
.party-name { margin: 0; font-family: var(--display); font-size: 16px; color: var(--parchment); overflow-wrap: anywhere; }
.party-name a { color: inherit; }
.party-name a:hover { color: var(--brass-bright); }
.party-line { margin: 0; font-size: 12.5px; color: rgba(232, 223, 200, .78); }
.party-rules { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.45; color: rgba(232, 223, 200, .84); }
.party-rules b { font-weight: 400; color: var(--brass); }
@media (max-width: 1000px) { .party-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .rules-room { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .party-cards { grid-template-columns: minmax(0, 1fr); } }
/* the map on the table, on a player's campaign page and its own page */
.table-map { display: flex; flex-direction: column; gap: 10px; }
.table-map .map-sheet { max-width: 100%; }
.table-map-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
@media (max-width: 1000px) {
  .story-room { grid-template-columns: 300px minmax(0, 1fr); }
  .map-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .story-room { grid-template-columns: minmax(0, 1fr); }
  .map-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dm-tab { padding: 9px 14px 8px; }
}

/* ---------- the DM's screen on a phone (design/dm-phone) ---------- */
/* On a desktop the phone's own pieces stay out of the way */
.dm-phone-head, .dm-note-btn, .dm-parts, .pass-sheet-head, .pass-to-line, .pass-scrim, .dm-new-note, .sb-back, .encounter-next, .member-init, .condition-open, .sheet-by { display: none; }
.dm-unread[hidden] { display: none; }
.pass-table-hint { display: none; margin: 0; font-size: 12.5px; line-height: 1.5; color: rgba(232, 223, 200, .78); }
.pass-compose:has(input[data-table]:checked) .pass-table-hint { display: block; }
.dm-strips { display: flex; flex-direction: column; gap: 8px; }
.dm-strips:empty { display: none; }
.dm-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; box-sizing: border-box; padding: 4px 14px; background: rgba(201, 162, 74, .14); border-left: 2px solid var(--brass); font-size: 14px; line-height: 1.4; color: var(--parchment); }
.dm-strip.is-warn { background: rgba(192, 86, 58, .16); border: 1px solid #C0563A; color: #E9B7A8; }
.dm-strip-act { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--brass); font: inherit; font-size: 14px; cursor: pointer; }
.dm-strip.is-warn .dm-strip-act { color: #E9B7A8; text-decoration: underline; }
.conditions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.condition-toggle { display: block; color: inherit; pointer-events: none; }
.condition-toggle b { display: block; font-weight: 400; font-family: var(--display); font-size: 15px; color: #F0E7CE; }
.condition-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(232, 223, 200, .84); }
.plot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; }
.plot-main { min-width: 0; }
.plot-moves { display: flex; flex-direction: column; gap: 4px; }
.plot-moves form { margin: 0; }
.plot-move { width: 26px; height: 24px; padding: 0; border: 1px solid rgba(201, 162, 74, .4); background: transparent; color: var(--brass); font-size: 10px; line-height: 1; cursor: pointer; }
.plot-move:hover:not([disabled]) { background: rgba(201, 162, 74, .15); }
.plot-move[disabled] { border-color: rgba(201, 162, 74, .25); cursor: default; }

/* 819px and under, or a phone on its side: one column, the tabs at the
   bottom, a header and the live strip at the top. The page scrolls, and the
   chrome is fixed around it. */
@media (max-width: 819px), (max-height: 500px) and (pointer: coarse) {
  .is-dm { --dm-head: calc(48px + env(safe-area-inset-top)); --dm-strip: 30px; --dm-top: calc(var(--dm-head) + var(--dm-strip)); --dm-bar: calc(56px + max(26px, env(safe-area-inset-bottom))); --dm-strips: 0px; overflow: clip; }
  .is-dm:has(.dm-strips > :nth-child(1)) { --dm-strips: 52px; }
  .is-dm:has(.dm-strips > :nth-child(2)) { --dm-strips: 104px; }
  .is-dm .bar { display: none; }
  .is-dm .room { z-index: 9; gap: 16px; padding: calc(var(--dm-top) + var(--dm-strips) + 14px) 14px calc(var(--dm-bar) + 18px); }
  .is-dm .room-foot { padding: 15px 14px calc(var(--dm-bar) + 15px); }

  /* the header */
  .dm-phone-head { position: fixed; z-index: 2; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 12px; box-sizing: border-box; height: var(--dm-head); padding: env(safe-area-inset-top) 14px 0; background: rgba(13, 21, 15, .8); border-bottom: 1px solid rgba(201, 162, 74, .18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .dm-crest { flex: none; width: 16px; height: 16px; box-sizing: border-box; margin: 0 4px; border: 1.2px solid var(--brass); transform: rotate(45deg); }
  .dm-phone-name { flex: 1; min-width: 0; font-family: var(--display); font-size: 16px; color: var(--parchment); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dm-phone-head .chip { font-size: 9.5px; padding: 3px 6px; }
  .dm-leave { min-height: 44px; padding: 0 4px; font-size: 13.5px; }

  /* the live strip, and the strips that come and go under it */
  .dm-tabbar { display: contents; }
  .dm-status { position: fixed; z-index: 2; top: var(--dm-head); left: 0; right: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 14px; box-sizing: border-box; height: var(--dm-strip); padding: 0 14px; background: rgba(13, 21, 15, .72); border-bottom: 1px solid rgba(201, 162, 74, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .dm-presence, .dm-showing { margin: 0; font-size: 12.5px; color: rgba(232, 223, 200, .78); white-space: nowrap; }
  .dm-presence { flex: none; gap: 6px; }
  .dm-presence .dot { width: 7px; height: 7px; background: transparent; box-shadow: inset 0 0 0 1px rgba(232, 223, 200, .5); }
  .dm-presence .dot.is-live { background: var(--live); box-shadow: none; }
  .dm-showing { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .dm-showing .dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; vertical-align: 1px; }
  .dm-strips { position: fixed; z-index: 2; top: var(--dm-top); left: 0; right: 0; padding: 8px 14px 0; }

  /* the tab bar, with NOTE */
  .dm-tabs { position: fixed; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr 1fr 88px; gap: 8px; padding: 8px 12px max(26px, env(safe-area-inset-bottom)); background: rgba(13, 21, 15, .86); border-top: 1px solid rgba(201, 162, 74, .18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .dm-tab, .dm-tab.is-on { display: flex; align-items: center; justify-content: center; height: 48px; box-sizing: border-box; padding: 0; font-size: 11.5px; letter-spacing: .18em; }
  .dm-tab { color: rgba(232, 223, 200, .78); }
  .dm-note-btn { position: relative; display: flex; align-items: center; justify-content: center; height: 48px; box-sizing: border-box; background: var(--brass); font-family: var(--caps); font-size: 11.5px; letter-spacing: .18em; color: #121E16; }
  .dm-note-btn:hover { background: var(--brass-bright); color: #121E16; }
  .dm-note-btn.is-empty { background: transparent; border: 1px solid rgba(201, 162, 74, .35); color: var(--brass); }
  .is-dm:has(.pass-compose.is-open) .dm-note-btn { background: var(--brass-bright); }
  .dm-unread { position: absolute; top: -7px; right: -7px; display: flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; box-sizing: border-box; padding: 0 5px; background: #0D150F; border: 1px solid var(--brass); font-family: var(--caps); font-size: 11px; letter-spacing: 0; color: #F0E7CE; }

  /* PARTY: one column, in the desktop's reading order */
  .is-dm .dm-room { display: flex; flex-direction: column; gap: 16px; }
  .is-dm .dm-col { padding: 14px; }
  .is-dm .eyebrow { font-size: 10.5px; }
  .sheet-row, .sheet-row:first-child { min-height: 56px; box-sizing: border-box; flex-wrap: nowrap; gap: 12px; padding: 6px 0; }
  .sheet-name { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sheet-line { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sheet-by { display: inline; }
  .sheet-player { display: none; }
  .sheet-row.is-empty .sheet-player { display: block; }
  .sheet-open { display: flex; align-items: center; min-height: 44px; margin-left: 0; font-size: 13.5px; }
  .npc-tab { display: inline-flex; align-items: center; min-height: 38px; }
  .dm-notes-count { display: none; }
  .dm-new-note { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
  .dm-compose { display: none; }
  .dm-compose.is-writing { display: flex; }
  .dm-pass > .dm-col-head { display: none; }

  /* the note sheet */
  .dm-panel[hidden] { display: block; position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden; }
  .dm-panel[hidden] .pass-compose.is-open { visibility: visible; }
  .pass-scrim { position: fixed; z-index: 1; inset: 0; background: rgba(7, 12, 9, .72); }
  .dm-pass:has(.pass-compose.is-open) .pass-scrim { display: block; visibility: visible; }
  .pass-compose { position: fixed; z-index: 3; left: 0; right: 0; bottom: var(--dm-bar); display: none; gap: 12px; max-height: calc(100dvh - var(--dm-top) - var(--dm-bar)); overflow-y: auto; box-sizing: border-box; padding: 14px; background: linear-gradient(180deg, rgba(35, 56, 44, .98), rgba(17, 27, 21, .98)); border: 0; border-top: 2px solid var(--brass); }
  .pass-compose.is-open { display: flex; }
  .pass-sheet-head { display: flex; align-items: center; justify-content: space-between; }
  .pass-close { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
  .pass-to { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pass-chip span { display: flex; align-items: center; justify-content: center; height: 44px; box-sizing: border-box; padding: 0 6px; }
  .pass-chip:has(input[data-table]) { grid-column: 1 / -1; }
  .pass-compose:has(input[data-table]:checked) .pass-chip:not(:has(input[data-table])) span { border-color: rgba(58, 85, 68, .5); }
  .pass-compose .field { min-height: 70px; font-size: 16px; }
  .pass-compose .btn-brass { height: 50px; }
  .pass-compose:not(:has(input[name="to"]:checked)) .btn-brass { background: rgba(201, 162, 74, .35); }
  .pass-compose.is-typing { bottom: var(--kb, 0px); max-height: none; }
  .pass-compose.is-typing .pass-sheet-head, .pass-compose.is-typing .pass-to, .pass-compose.is-typing .pass-table-hint { display: none; }
  .pass-compose.is-typing .pass-to-line { display: flex; align-items: center; gap: 10px; min-height: 30px; }
  .is-dm:has(.pass-compose.is-typing) .dm-tabs, .is-dm:has(.pass-compose.is-typing) .dm-status { display: none; }
  .pass-to-label { flex: none; font-family: var(--caps); font-size: 10px; letter-spacing: .18em; color: var(--brass); }
  .pass-to-names { min-width: 0; padding: 4px 8px; border: 1px solid var(--brass); background: rgba(201, 162, 74, .16); font-family: var(--caps); font-size: 10px; letter-spacing: .12em; color: #F0E7CE; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pass-to-line button { flex: none; min-height: 44px; margin: -7px 0; font-size: 13px; }
  .pass-to-line .pass-close { margin-left: auto; }

  /* STORY: one part at a time, under a chip row */
  .dm-parts { position: sticky; z-index: 1; top: calc(var(--dm-top) + var(--dm-strips)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: -14px -14px 0; padding: 8px 14px; background: rgba(13, 21, 15, .86); border-bottom: 1px solid rgba(201, 162, 74, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .dm-part { display: flex; align-items: center; justify-content: center; height: 38px; box-sizing: border-box; padding: 0 4px; border: 1px solid rgba(201, 162, 74, .22); font-family: var(--caps); font-size: 10px; letter-spacing: .14em; color: rgba(232, 223, 200, .78); white-space: nowrap; overflow: hidden; }
  .dm-part.is-on { background: rgba(201, 162, 74, .16); border-color: var(--brass); color: #F0E7CE; }
  .story-room { display: block; }
  .story-right, .story-bottom { display: contents; }
  .story-room [data-story-part] { display: none; }
  .story-room[data-part="spine"] [data-story-part="spine"], .story-room[data-part="creatures"] [data-story-part="creatures"], .story-room[data-part="maps"] [data-story-part="maps"], .story-room[data-part="ambience"] [data-story-part="ambience"] { display: flex; }
  .plot { gap: 0 12px; padding: 12px; }
  .plot-title { font-size: 16px; }
  .plot-moves { gap: 8px; }
  .plot-move { width: 44px; height: 44px; font-size: 14px; }
  .creatures-panel .dm-col-head { flex-direction: column; align-items: stretch; }
  .creature-search { min-width: 0; max-width: none; }
  .creature-search .field { min-height: 44px; font-size: 16px; }
  .creature-row { grid-template-columns: minmax(0, 1fr) auto; min-height: 56px; }
  .creature-row .cr-stats { grid-column: 1; }
  .cr-pin { grid-column: 2; grid-row: 1 / span 2; }
  .cr-pin button, .cr-pin select, .creature-search .btn-line { min-height: 44px; }
  .members { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
  .pins { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
  .encounter-head { position: sticky; z-index: 1; top: calc(var(--dm-top) + var(--dm-strips) + 54px); margin: -12px -12px 0; padding: 10px 12px; background: rgba(13, 21, 15, .92); }
  .encounter-tools { flex-wrap: wrap; }
  .encounter-tools button { min-height: 44px; }
  .member { gap: 8px; padding: 12px; }
  .member-head { justify-content: flex-start; }
  .member-init { display: block; flex: none; width: 22px; font-family: var(--caps); font-size: 11px; color: var(--brass); }
  .member-init-text { display: none; }
  .member-head .member-name { flex: 1; min-width: 0; font-size: 16px; }
  .member:has(.member-init) .member-line, .member:has(.member-init) .hp-bar { margin-left: 30px; }
  .hp-row { flex-wrap: wrap; gap: 8px; }
  .hp-num { order: -1; margin-right: auto; }
  .hp-row .quiet { margin-left: 0; min-height: 44px; }
  .hp-btn { width: 52px; height: 44px; font-size: 14px; }
  .encounter-next { display: block; margin: 0; }
  .encounter-next .btn-line { width: 100%; height: 48px; }
  .creatures-panel.has-open > :not(.stat-block) { display: none; }
  .sb-back { display: flex; align-items: center; min-height: 44px; margin: -6px 0 0; font-size: 14px; }
  .sb-cols { grid-template-columns: minmax(0, 1fr); }
  .sb-abilities { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sb-foot { flex-wrap: wrap; }
  .sb-foot a, .sb-foot button { display: inline-flex; align-items: center; min-height: 44px; }
  .map-filters { flex-wrap: nowrap; overflow-x: auto; }
  .map-filter { display: inline-flex; align-items: center; min-height: 38px; }
  .map-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-tile.is-showing { grid-column: 1 / -1; order: -1; }
  .map-tiles .map-tile-meta button { min-height: 44px; font-size: 13px; }
  .amb-layer { grid-template-columns: 48px minmax(0, 1fr) auto; padding: 12px; border: 1px solid rgba(201, 162, 74, .2); }
  .amb-layer.is-focus { padding-left: 12px; }
  .amb-play { width: 48px; height: 48px; }
  .amb-tag { display: none; }
  .amb-loop { min-height: 44px; padding: 0 12px; }
  .amb-vol-wrap { grid-column: 1 / -1; }
  .amb-chip { min-height: 44px; padding: 0 14px; font-size: 14px; }
  .amb-add { display: inline-flex; align-items: center; min-height: 44px; }

  /* RULES: a jump row over one column; conditions open in place */
  .rules-room { display: flex; flex-direction: column; gap: 16px; }
  #rules-rolls, #rules-turn, #rules-conditions, #rules-party { scroll-margin-top: calc(var(--dm-top) + var(--dm-strips) + 62px); }
  .ladder div { align-items: center; min-height: 32px; }
  .conditions { gap: 8px; }
  .condition { border: 1px solid rgba(201, 162, 74, .2); background: rgba(11, 18, 14, .5); }
  .condition.is-open { border-color: var(--brass); background: rgba(201, 162, 74, .08); }
  .condition-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 14px; pointer-events: auto; }
  .condition-toggle b { font-size: 16px; }
  .condition-open { display: inline; font-size: 13px; color: var(--brass); }
  .condition-text { display: none; padding: 0 14px 14px; }
  .condition.is-open .condition-text { display: block; }
  .party-cards { grid-template-columns: minmax(0, 1fr); }
}
/* a phone on its side: the bar gives back its safe-area padding */
@media (max-height: 500px) and (pointer: coarse) {
  .is-dm { --dm-bar: calc(56px + max(8px, env(safe-area-inset-bottom))); }
  .dm-tabs { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
}

/* ---------- the V2 pilot's banner (v2.dungeonlords.win only; src/index.js) ---------- */
.pilot-banner { position: relative; z-index: 10; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 14px; padding: 8px 16px; background: var(--brass); color: #121E16; font-family: var(--body); font-size: 14px; line-height: 1.4; text-align: center; }
.pilot-banner a { color: #121E16; text-decoration: underline; text-underline-offset: 3px; }
.pilot-banner a:hover { color: #121E16; }
.pilot-tag { font-family: var(--caps); font-size: 11px; letter-spacing: .22em; }

/* ---------- game nights (V2; src/nights-pages.js) ---------- */
.night-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.night-row { display: flex; align-items: center; gap: 16px; padding: 12px 14px; background: rgba(13, 21, 15, .75); border: 1px solid rgba(201, 162, 74, .2); color: var(--parchment); text-decoration: none; }
.night-row:hover { border-color: rgba(201, 162, 74, .55); color: var(--parchment); }
.night-row:focus-visible { outline: 2px solid var(--brass-bright); outline-offset: 2px; }
.night-row.is-off { opacity: .6; }
.night-date { display: flex; flex-direction: column; align-items: center; flex: none; width: 52px; padding: 7px 0 6px; border: 1px solid rgba(201, 162, 74, .35); line-height: 1; }
.night-dow, .night-mon { font-family: var(--caps); font-size: 10px; letter-spacing: .16em; color: var(--brass); }
.night-dom { margin: 4px 0 3px; font-family: var(--display); font-size: 24px; }
.night-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.night-game { font-family: var(--display); font-size: 19px; line-height: 1.2; overflow-wrap: anywhere; }
.night-game .tag { margin-left: 6px; }
.night-meta { font-size: 14px; color: rgba(232, 223, 200, .72); }
.tag.warn { color: #E3A283; }
.rsvp { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 16px 18px; background: rgba(13, 21, 15, .75); border: 1px solid rgba(201, 162, 74, .35); }
.rsvp p { margin: 0; }
.rsvp-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.rsvp-btn { flex: 1 1 120px; min-height: 44px; padding: 0 14px; background: transparent; border: 1px solid rgba(201, 162, 74, .45); color: var(--parchment); font-family: var(--caps); font-size: 12px; letter-spacing: .16em; cursor: pointer; }
.rsvp-btn:hover { border-color: var(--brass); }
.rsvp-btn.is-on { background: var(--brass); border-color: var(--brass); color: #121E16; }
.rsvp-btn:focus-visible { outline: 2px solid var(--brass-bright); outline-offset: 2px; }
.night-form { display: flex; flex-direction: column; gap: 20px; }
.night-when-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.night-details { min-height: 96px; resize: vertical; font-family: var(--body); }
.night-recap { margin: 0; font-family: var(--display); font-size: 20px; }
a.next-panel { color: inherit; text-decoration: none; }
a.next-panel:hover { border-color: var(--brass); color: inherit; }
.next-panel .aside a { color: var(--brass); }
.plaque-game { display: block; margin-bottom: -4px; font-size: 11px; }
@media (max-width: 600px) {
  .night-when-fields { grid-template-columns: minmax(0, 1fr); }
}
.night-off { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; font-size: 14px; }
.night-off .hint { font-size: 13px; }