:root {
  color-scheme: dark;
  --bg: #101415;
  --panel: rgba(19, 24, 27, 0.94);
  --line: #ffffff20;
  --text: #f2eee5;
  --muted: #a9b3b6;
  --cyan: #6cd5df;
  --gold: #dbb97e;
  --red: #a84a53;
  --surface-2: #1b2024;
  --crimson: #7c2e37;
  --crimson-glow: rgba(124, 46, 55, 0.45);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font:
    16px/1.6 system-ui,
    sans-serif;
}
body:before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, #080d1170, #080d1110),
    linear-gradient(0deg, #101415 0%, transparent 80%),
    url("/assets/home-isometric.webp") center/cover;
}
body.login:before {
  background:
    linear-gradient(90deg, #070c1010, #070c1060),
    url("/assets/home-isometric.webp") center/cover;
}
body.table {
  /* Warm near-black instead of the app's default cool near-black — sits
     better behind the candlelit library photography in the Table section
     (hero banner, feature cards) than the cooler blue-gray tone used
     elsewhere (Home/Hangout). */
  --bg: #14100c;
  --panel: rgba(28, 22, 16, 0.94);
  --surface-2: #241a10;
}
body.table:before {
  background:
    linear-gradient(0deg, #14100c 20%, #14100cd8),
    url("/assets/campaign-hero.webp") center/cover;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 19px;
  background: #242c31;
  border: 1px solid #ffffff30;
  border-radius: 7px;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.2s;
}
button:hover,
.button:hover {
  background: #354149;
  transform: translateY(-1px);
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.primary {
  background: #6365d9;
  border-color: #9191ff;
}
.gold {
  background: #713a40;
  border-color: #b9656d;
}
.quiet {
  background: transparent;
}
.danger {
  color: #ffadb2;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 4px;
}
.skip {
  position: absolute;
  top: -80px;
}
.skip:focus {
  top: 10px;
  z-index: 20;
  background: #111;
  padding: 10px;
}
header {
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 20px 4%;
  background: #101519e8;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}
.brand {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 5px;
  white-space: nowrap;
}
.brand small {
  display: block;
  font: 9px monospace;
  letter-spacing: 3px;
  color: var(--muted);
}
nav {
  display: flex;
  gap: 25px;
  align-items: center;
  flex: 1;
}
nav a {
  padding: 9px 0;
  color: var(--muted);
  border-bottom: 2px solid transparent;
}
nav a.active {
  color: var(--text);
  border-color: var(--gold);
}
.account {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 13px monospace;
}
.account button {
  padding: 7px 12px;
  font-size: 12px;
}
main {
  max-width: 1480px;
  margin: auto;
  padding: 45px 4% 70px;
}
h1 {
  font-size: clamp(42px, 5.4vw, 76px);
  letter-spacing: -3px;
  line-height: 1.06;
  margin: 12px 0 16px;
}
h2 {
  font-size: 25px;
  line-height: 1.25;
  margin: 0 0 18px;
}
h3 {
  margin: 0 0 8px;
  font-size: 19px;
}
p {
  margin: 0 0 18px;
}
.eyebrow {
  font: 11px monospace;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--gold);
}
.muted {
  color: var(--muted);
}
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 12px 40px #0003;
  backdrop-filter: blur(12px);
}
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 25px;
}
.stack {
  display: grid;
  gap: 20px;
  align-content: start;
}
.row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.between {
  justify-content: space-between;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.room {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  background: linear-gradient(130deg, #17232be8, #171b20dc);
  border-top: 2px solid #6cd5df70;
}
.room .symbol {
  font-size: 30px;
  color: var(--gold);
}
.room small {
  color: var(--muted);
}
.room.disabled {
  opacity: 0.7;
}
.scene-space {
  height: 180px;
}
.badge {
  font: 11px monospace;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--gold);
}
.resident {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #38484c;
  color: #bce8ed;
  font-weight: 700;
}
.dot {
  width: 7px;
  height: 7px;
  background: #71d5ac;
  border-radius: 50%;
  display: inline-block;
}
.chat-log {
  max-height: 300px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.chat-log p {
  margin: 2px 0;
  overflow-wrap: anywhere;
}
.chat-log small {
  color: var(--gold);
}
input,
textarea,
select {
  width: 100%;
  background: #10171b;
  border: 1px solid #ffffff30;
  border-radius: 6px;
  color: var(--text);
  padding: 11px;
  font: inherit;
}
input#search {
  background-image: url("/icons/search.webp");
  background-repeat: no-repeat;
  background-position: 13px center;
  background-size: 16px 16px;
  padding-left: 40px;
}
textarea {
  min-height: 110px;
  resize: vertical;
}
input[type="checkbox"] {
  width: auto;
  padding: 0;
  background: none;
  border: none;
}
.check-row {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  width: auto;
  margin: 4px 12px 4px 0;
}
label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin: 10px 0;
}
label input,
label select,
label textarea {
  margin-top: 6px;
}
.chat-form {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.chat-form input {
  min-width: 0;
}
.login main {
  min-height: calc(100vh - 100px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}
.login-title {
  max-width: 650px;
  align-self: flex-start;
  margin-top: 45px;
}
.login-title h1 {
  font-size: clamp(60px, 8vw, 110px);
  font-weight: 900;
  letter-spacing: -4px;
}
.login-card {
  width: 400px;
  padding: 38px;
  flex-shrink: 0;
}
.login-card h2 {
  font-size: 35px;
}
.login-card .button {
  width: 100%;
  margin: 10px 0;
}
.login-card footer {
  border-top: 1px solid var(--line);
  margin-top: 20px;
  padding-top: 20px;
  font: 12px monospace;
  color: var(--muted);
}
/* ---- Table app shell: persistent sidebar for the whole Campaign section ---- */
.table-shell {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  align-items: start;
  gap: 28px;
}
.table-sidebar {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 40px #0003;
  backdrop-filter: blur(12px);
}
.table-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  padding-bottom: 18px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.table-logo-mark {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.table-logo strong {
  font: 700 15px/1.3 Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  letter-spacing: 4px;
}
.table-logo small {
  font: 9px monospace;
  letter-spacing: 2px;
  color: var(--muted);
}
.sidebar-campaign {
  padding: 4px 8px 18px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.sidebar-campaign span {
  display: block;
  font: 10px monospace;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.sidebar-campaign select {
  padding: 9px;
  font-size: 13px;
}
.sidebar-campaign #new-campaign {
  width: 100%;
  margin-top: 8px;
  padding: 7px 10px;
  font-size: 12px;
}
.sidebar-group {
  margin-bottom: 4px;
}
.sidebar-label {
  font: 10px monospace;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 8px 6px;
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 14px;
}
.sidebar-link:hover {
  background: #ffffff0a;
  color: var(--text);
}
.sidebar-link.active {
  background: var(--crimson-glow);
  color: var(--text);
  font-weight: 600;
}
.sidebar-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex: 0 0 auto;
  opacity: 0.85;
}
.sidebar-link.active .sidebar-icon {
  opacity: 1;
}
.sidebar-footer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.dm-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  color: var(--gold);
  font: 11px monospace;
  letter-spacing: 1px;
}
.dm-badge > span {
  display: block;
  white-space: nowrap;
}
.dm-badge img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 auto;
}
.dm-badge small {
  display: block;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0;
  margin-top: 2px;
}
.table-content {
  min-width: 0;
}
/* ---- Campaign Overview page ---- */
.hero-block {
  position: relative;
  margin-bottom: 28px;
  padding: 40px 36px;
  border-radius: 14px;
  border: 1px solid var(--line);
  overflow: hidden;
  background:
    linear-gradient(100deg, #14100cf2 0%, #14100cdd 30%, #14100c70 56%, #14100c25 100%),
    url("/assets/campaign-hero.webp") center/cover;
}
.hero-block h1 {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
}
.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 25px;
  align-items: start;
  margin-bottom: 25px;
}
.story-card p {
  margin-bottom: 0;
}
.feature-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 170px;
  padding: 18px 20px;
  border-top: none;
  background-size: cover;
  background-position: center;
}
.feature-card:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #12100af5 12%, #12100a99 48%, #12100a10 80%);
  border-radius: inherit;
}
.feature-card h3,
.feature-card p {
  position: relative;
  z-index: 1;
}
.feature-card h3 {
  margin-bottom: 6px;
}
.feature-card p {
  margin-bottom: 0;
  color: #e6e0d4;
}
.character-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.character-panel-head h2 {
  margin-bottom: 0;
}
.character-nav {
  display: flex;
  gap: 6px;
}
.character-nav button {
  padding: 6px 12px;
}
.avatar-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.avatar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 64px;
  text-align: center;
}
.avatar-item .portrait-frame {
  width: 56px;
}
.avatar-item small {
  font-size: 11px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.character-preview {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.character-preview-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.character-preview .portrait-frame {
  width: 56px;
}
.character-preview .meta {
  font: 11px monospace;
  color: var(--muted);
}
.character-preview .blurb {
  font-size: 13px;
  margin-bottom: 12px;
}
.character-preview .button {
  display: flex;
  width: 100%;
  padding: 12px 19px;
  border-bottom: none;
}
.character-preview .button:after {
  content: none;
}
.party-card.grave {
  border-top-color: var(--muted);
}
.party-card.grave > .badge {
  display: inline-block;
  margin-bottom: 12px;
}
.party-card.grave .portrait-frame {
  filter: grayscale(1);
  opacity: 0.85;
}
.epitaph {
  font-style: italic;
  color: var(--muted);
}
.initiative-card.active-turn {
  border-color: var(--gold);
  box-shadow:
    0 0 0 2px var(--gold),
    0 12px 40px #0006;
}
.initiative-card .hp-form input {
  max-width: 70px;
}
.status-badge {
  display: inline-block;
  margin: 8px 0;
}
.party-card {
  border-top: 3px solid var(--gold);
}
.campaign-manager .party-card {
  border-top: 0;
}
.party-sheet-link {
  display: block;
  min-width: 160px;
  padding: 12px 0;
  border-radius: 8px;
  transition: background 0.2s, transform 0.2s;
}
.party-sheet-link:hover {
  background: #ffffff08;
  transform: translateY(-2px);
}
.party-sheet-link:focus-visible {
  outline-offset: 2px;
}
.party-sheet-action {
  display: inline-block;
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
}
.campaign-manager .city-card.drag-target {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px #dbb97e55, 0 12px 40px #0003;
}
.campaign-manager .draggable-npc { cursor: grab; padding: 7px 4px; border-radius: 6px; }
.campaign-manager .draggable-npc:active { cursor: grabbing; }
.campaign-manager .draggable-npc:hover { background: #ffffff08; }
.campaign-manager .city-npc { align-items: center; }
.campaign-manager .city-npc .portrait-frame { width: 42px; margin: 0 4px 0 0; flex: 0 0 auto; }
.campaign-manager .city-npc-name { flex: 1; min-width: 0; }
.session-prep-list { display: grid; gap: 8px; }
.session-prep-list > .row { padding: 9px 0; border-bottom: 1px solid var(--line); }
.campaign-map-surface { position: relative; min-height: 440px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: radial-gradient(circle at 50% 50%, #4b382255, transparent 42%), linear-gradient(135deg, #17120d, #21170f); }
.campaign-map-surface:before { content: ""; position: absolute; inset: 0; opacity: .32; background-image: linear-gradient(#dbb97e18 1px, transparent 1px), linear-gradient(90deg, #dbb97e18 1px, transparent 1px); background-size: 38px 38px; }
.campaign-map-pin { position: absolute; z-index: 1; transform: translate(-50%, -50%); display: grid; gap: 1px; min-width: 100px; padding: 8px 11px; border-color: var(--gold); background: #21170fee; text-align: center; }
.campaign-map-pin small { color: var(--muted); font-size: 10px; }
.story-entry { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--line); }
.story-entry p { margin: 2px 0 8px; font-size: 12px; }
.player-safe .campaign-workbench, .player-safe .story-board, .player-safe .quiet, .player-safe [id^="add-"], .player-safe [id^="edit-city-"] { display: none !important; }
.player-safe .city-npc .button { display: none; }
.player-safe-bar { margin: 0 0 18px; }
.campaign-search { max-width: 300px; }

/* Battle map workspace: compact control clusters keep the canvas primary. */
#bm-toolbar { position: sticky; top: 12px; z-index: 20; display: flex; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #1c1610ee; box-shadow: 0 12px 30px #0006; backdrop-filter: blur(14px); }
#bm-toolbar > select, #bm-toolbar > .bm-map-name { min-width: 180px; align-self: stretch; display: flex; align-items: center; }
.bm-tool-group { display: flex; align-items: center; gap: 6px; padding-left: 10px; border-left: 1px solid var(--line); }
.bm-tool-group button { min-height: 40px; padding: 8px 12px; font-size: 13px; }
.bm-tool-group button.gold { box-shadow: inset 0 0 0 1px #dbb97e99, 0 0 18px #dbb97e22; }
#bm-stage-wrap { padding: 14px; background: #0d0b09cc; border-radius: 14px; overflow: auto; }
#bm-stage { min-width: 760px; box-shadow: 0 20px 50px #0009; border-radius: 8px; overflow: hidden; }
.battlemap-token { transition: box-shadow .16s ease, transform .16s ease; }
.battlemap-token:hover { box-shadow: 0 0 0 3px #f2eee5, 0 8px 20px #000b !important; }
@media (max-width: 900px) { #bm-toolbar { position: static; overflow-x: auto; flex-wrap: nowrap; } .bm-tool-group { flex: 0 0 auto; } #bm-stage { min-width: 620px; } }
.npc-card {
  border-top: 3px solid var(--cyan); /* overridden per-NPC via inline border-top-color */
}
.party-card .crest {
  font-size: 46px;
  line-height: 1.3;
  color: var(--gold);
  margin-bottom: 12px;
}
.party-card p {
  font-size: 13px;
}
.stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.stat {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px 3px;
  background: #ffffff06;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.stat:hover {
  border-color: var(--gold);
}
.stat b {
  display: block;
  font-size: 24px;
}
.stat small {
  font: 10px monospace;
  color: var(--gold);
}
progress {
  width: 100%;
  height: 10px;
  accent-color: #81c3a1;
}
.entry {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.entry small {
  display: block;
  color: var(--gold);
  font: 12px monospace;
  margin-bottom: 8px;
}
.entry button {
  font-size: 12px;
  padding: 4px 8px;
  margin-top: 8px;
}
.item {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.item .row button {
  font-size: 12px;
  padding: 6px 9px;
}
.spacer {
  margin-top: 25px;
}
details {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 18px;
}
summary {
  cursor: pointer;
  color: var(--gold);
}
#notice {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 20px;
  background: #202e35;
  border: 1px solid var(--cyan);
  border-radius: 8px;
  z-index: 100;
  max-width: 90vw;
}
#notice:empty {
  display: none;
}
.empty {
  padding: 20px;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 8px;
}
.intro {
  max-width: 760px;
}
.number {
  max-width: 100px;
}
.field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.footer-line {
  margin-top: 35px;
  font: 10px monospace;
  letter-spacing: 2px;
  color: #9fadaf;
}
.session-night-page .table-content { max-width: 1120px; }
.session-night-hero { position: relative; overflow: hidden; padding: clamp(34px, 7vw, 80px); border: 1px solid #dbb97e55; border-radius: 14px; background: radial-gradient(circle at 80% 15%, #b9656d55, transparent 35%), linear-gradient(135deg, #21130f, #111b20); box-shadow: inset 0 0 90px #0008; }
.session-night-hero.live { border-color: var(--gold); box-shadow: inset 0 0 90px #0008, 0 0 48px #a84a5333; }
.session-night-hero h1 { max-width: 760px; margin: 4px 0; font-size: clamp(38px, 7vw, 76px); line-height: 1; letter-spacing: -2px; }
.session-schedule { color: var(--gold); font-weight: 700; font-size: 18px; }
.session-quest { display: grid; gap: 3px; max-width: 630px; margin-top: 28px; padding: 16px 18px; border-left: 3px solid var(--gold); background: #080a0a88; }
.session-quest span { color: var(--muted); text-transform: uppercase; letter-spacing: 1.5px; font-size: 11px; }
.session-quest strong { font-size: 19px; }
.session-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.session-copy { white-space: pre-wrap; min-height: 75px; }
.avatar-item.checked-in { color: var(--gold); }
.avatar-item.checked-in .portrait-frame { box-shadow: 0 0 0 2px var(--gold), 0 0 20px #dbb97e88; }
.session-dm { border-color: #b9656d77; }
.session-episode blockquote { margin: 18px 0 0; padding: 12px 18px; border-left: 3px solid var(--gold); color: var(--gold); font-size: 18px; }
dialog {
  background: #161f24;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
  width: min(650px, 90vw);
  max-height: 90vh;
  overflow: auto;
  padding: 28px;
}
dialog::backdrop {
  background: #000a;
  backdrop-filter: blur(5px);
}
.floating-sheet {
  position: fixed;
  z-index: 500;
  top: 8vh;
  left: max(20px, calc(50vw - 390px));
  width: min(780px, calc(100vw - 32px));
  max-height: min(78vh, 760px);
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--cyan);
  border-radius: 12px;
  box-shadow: 0 20px 70px #000b;
}
.floating-sheet-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: #17252b;
  border-bottom: 1px solid var(--line);
  cursor: grab;
  user-select: none;
}
.floating-sheet-bar > span { font-weight: 700; letter-spacing: 1px; }
.floating-sheet-bar button { padding: 5px 8px; font-size: 12px; }
.floating-sheet-body { max-height: calc(min(78vh, 760px) - 50px); overflow: auto; padding: 22px; }
.floating-sheet-body .portrait-frame { width: 120px; float: right; margin: 0 0 14px 18px; }
.floating-sheet-body .item { margin: 10px 0; }
.npc-stat-block { clear: both; margin: 20px 0; }
.npc-stat-block h2 { margin-top: 18px; font-size: 17px; }
.npc-stat-block .stats { margin: 8px 0 20px; }
.npc-stat-block .stat { min-width: 72px; }
.npc-stat-block .row button { padding: 5px 8px; font-size: 11px; }
.prose {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.section-nav {
  margin: 20px 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.section-nav a {
  font-size: 13px;
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 30px;
}
@media (max-width: 1000px) {
  header {
    flex-wrap: wrap;
    gap: 15px;
  }
  nav {
    order: 3;
    width: 100%;
    overflow: auto;
    flex: auto;
  }
  .layout,
  .table-shell,
  .overview-grid,
  .session-grid {
    grid-template-columns: 1fr;
  }
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .table-sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
  }
  .table-logo {
    flex-direction: row;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .table-logo small {
    display: none;
  }
  .sidebar-campaign {
    border-bottom: none;
    padding: 0;
    margin: 0;
  }
  .sidebar-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .sidebar-label {
    padding: 0;
  }
  .sidebar-footer {
    margin: 0;
    padding: 0;
    border-top: none;
    margin-left: auto;
  }
  .login main {
    gap: 25px;
  }
  .login-card {
    width: 360px;
  }
  .brand {
    font-size: 20px;
  }
  .account {
    margin-left: auto;
  }
}
@media (max-width: 650px) {
  main {
    padding: 28px 5%;
  }
  .grid,
  .grid.two,
  .field-grid,
  .feature-cards {
    grid-template-columns: 1fr;
  }
  .login main {
    display: block;
  }
  .login-title {
    margin: 0 0 35px;
  }
  .login-title h1 {
    font-size: 58px;
  }
  .login-card {
    width: 100%;
    padding: 25px;
  }
  .scene-space {
    height: 90px;
  }
  .stats {
    grid-template-columns: repeat(3, 1fr);
  }
  h1 {
    letter-spacing: -2px;
  }
  .panel {
    padding: 20px;
  }
  nav {
    gap: 22px;
    font-size: 14px;
  }
  .account span {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* The Table — same dark app shell as the rest of the site, with a HUD-style
   character-sheet module layered on top (hero banner, ability tiles, item
   cards) instead of the old cream-parchment reskin. */
.section-nav a {
  background: var(--panel);
}
.character-banner {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 22px;
  padding: 28px 32px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    radial-gradient(ellipse 520px 280px at 18% 25%, var(--crimson-glow), transparent 70%),
    linear-gradient(135deg, #14171a, #0d1012 75%);
}
.character-banner:before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.character-banner .intro {
  font-style: italic;
  font-size: 16px;
  max-width: 780px;
}
.portrait-frame {
  position: relative;
  flex-shrink: 0;
  width: 156px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid var(--gold);
  box-shadow:
    0 0 0 5px var(--bg),
    0 0 0 6px var(--line),
    0 8px 24px #0006;
  background: radial-gradient(ellipse, var(--surface-2), #0d1012);
}
.portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.portrait-placeholder {
  display: grid;
  place-items: center;
  height: 100%;
  font: 700 54px system-ui, sans-serif;
  color: var(--gold);
}
.table #change-portrait {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #0d1012d0;
  color: var(--text);
  border: 0;
  border-radius: 0;
  font-size: 11px;
  padding: 6px;
}
.party-card .portrait-frame {
  width: 94px;
  margin-bottom: 16px;
}
.sheet-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.sheet-core,
.sheet-pack {
  min-width: 0;
  display: grid;
  gap: 22px;
}
.sheet-layout .spacer {
  margin-top: 15px;
}
.sheet-layout > * > .spacer {
  margin-top: 0;
}
.character-sheet .stats {
  gap: 12px;
  padding-bottom: 14px;
}
.character-sheet .stat {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(160deg, var(--surface-2), #14181b);
  padding: 16px 2px 26px;
  box-shadow: inset 0 1px 0 #ffffff0a;
}
.character-sheet .stat small {
  color: var(--muted);
  font: 600 10px system-ui, sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.character-sheet .stat b {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  display: block;
  color: var(--text);
}
.ability-mod {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: #14181b;
  color: var(--gold);
  font: 700 14px system-ui, sans-serif;
  box-shadow: 0 0 0 3px var(--bg);
}
.combat-numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 15px 0;
  background: var(--panel);
}
.combat-numbers div {
  text-align: center;
  border-right: 1px solid var(--line);
}
.combat-numbers div:last-child {
  border: 0;
}
.combat-numbers small {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}
.combat-numbers strong {
  font-size: 26px;
  font-weight: 700;
  color: var(--cyan);
}
.combat-numbers .ac-breakdown {
  grid-column: 1 / -1;
  margin: 12px 15px 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--muted);
  font-size: 11px;
}
.equipped-summary {
  margin: 0;
  padding: 18px 20px;
}
.equipped-summary h2 {
  margin-bottom: 2px;
}
.equipped-summary p {
  margin: 0;
  font-size: 13px;
}
.equipped-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}
/* HP, conditions, rests and slots still exist in the data/API, but the
   character-sheet overview intentionally stays focused on the actual sheet. */
.character-sheet #combat {
  display: none;
}
#proficiencies {
  margin: 0;
  padding: 16px 18px;
}
#proficiencies h2 {
  font-size: 19px;
  margin-bottom: 0;
}
#proficiencies h3 {
  display: inline-block;
  margin: 12px 8px 5px 0;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
#proficiencies .row {
  gap: 5px;
}
#proficiencies button {
  padding: 5px 8px;
  font-size: 11px;
}
.sheet-highlights ul {
  padding-left: 20px;
  font-size: 14px;
  line-height: 2;
}
.sheet-pack #inventory {
  padding: 18px;
}
.item-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 15px;
}
.table .item {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 8px;
  min-width: 0;
}
.table .item h3 {
  font-size: 17px;
  overflow-wrap: anywhere;
}
.table .item p {
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.table .item .badge {
  font-size: 10px;
}
.item-illustration {
  height: 95px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: -5px -5px 10px;
  border-radius: 6px 6px 0 0;
  background: radial-gradient(ellipse, rgba(219, 185, 126, 0.14), transparent 70%);
}
.item-illustration img {
  width: 72px;
  height: 72px;
  filter: drop-shadow(0 4px 6px #00000066);
}
.item-illustration > div {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  padding: 4px;
}
.item-state {
  font-size: 9px;
  border: 1px solid #3f6b4f;
  background: #16241c;
  color: #8fd6ab;
  padding: 2px 5px;
  border-radius: 3px;
}
.item-actions summary {
  cursor: pointer;
  color: var(--cyan);
  font-size: 12px;
  padding: 8px 0;
}
.item-actions .row {
  gap: 5px;
}
.table .item-actions button {
  font-size: 11px;
  padding: 6px 8px;
}
.pack-filter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 10px;
}
.pack-filter label {
  font-size: 11px;
  margin-bottom: 0;
}
.pack-filter input,
.pack-filter select {
  padding: 8px;
  font-size: 12px;
}
[hidden] {
  display: none !important;
}
.table #journal {
  margin-top: 25px;
}
#portrait-canvas {
  display: block;
  width: min(100%, 300px);
  height: auto;
  margin: 15px auto;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
#portrait-error {
  color: var(--red);
}
@media (max-width: 1050px) {
  .sheet-layout {
    grid-template-columns: 1fr;
  }
  .item-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .character-banner {
    gap: 15px;
    align-items: flex-start;
    padding: 20px;
  }
  .character-banner .portrait-frame {
    width: 95px;
  }
  .character-banner h1 {
    font-size: 28px;
  }
  .character-banner .intro {
    font-size: 13px;
  }
  .character-sheet .stats {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 28px;
  }
  .item-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .combat-numbers strong {
    font-size: 22px;
  }
  .combat-numbers small {
    font-size: 8px;
  }
  .pack-filter {
    grid-template-columns: 1fr 100px;
  }
}
.resident{display:flex;align-items:center;gap:8px;margin:6px 0}.avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:12px}

/* Dice tray — a small draggable floating window with a real CSS 3D
   tumbling cube, opened alongside the character sheet. See diceTray.js. */
.dice-float {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 270px;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 20px 60px #0008;
  z-index: 500;
}
.dice-float-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  cursor: grab;
  touch-action: none;
  border-radius: 10px 10px 0 0;
  background: #14171a;
}
.dice-float-title {
  font: 600 12px ui-monospace, monospace;
  letter-spacing: 1px;
  color: var(--gold);
}
.dice-float-bar button {
  padding: 3px 8px;
  font-size: 12px;
}
.dice-float-body {
  padding: 16px;
}
.dice-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dice-quick button {
  flex: 1 0 30%;
  padding: 8px 4px;
  font-size: 13px;
}
.dice-form {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.dice-form input[name="notation"] {
  flex: 1;
  min-width: 0;
}
.dice-mod {
  width: 56px;
  flex: none;
}
.dice-result {
  text-align: center;
  font-weight: 700;
  min-height: 1.4em;
  margin-top: 16px;
  color: var(--text);
}
.dice-log {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  max-height: 110px;
  overflow: auto;
  font-size: 12px;
  color: var(--muted);
}
.dice-log li {
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 600px) {
  .dice-float {
    left: 8px;
    bottom: 8px;
    width: calc(100vw - 16px);
  }
}

/* Item library search — live results dropdown under the "Add item" search
   box, sourced from the Foundry-extracted compendium. */
.item-lib-results {
  display: grid;
  gap: 4px;
  max-height: 220px;
  overflow: auto;
  margin-top: 8px;
}
.item-lib-result {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  font-size: 13px;
  padding: 8px 10px;
}
.item-lib-result small {
  white-space: nowrap;
}

/* ---- Battle Map: toolbar clustering + stage chrome ----
   The toolbar accumulated a lot of controls (map management, drawing,
   wall/door/tree building, vision inspection) as separate flat buttons
   with no visual grouping, which read as a raw debug panel rather than a
   designed tool. Wrapping each related cluster in .bm-tool-group gives it
   the same "pill of controls" treatment the rest of the site already uses
   for badges/panels, so related actions visually belong together at a
   glance instead of competing in one undifferentiated row. */
.bm-tool-group {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 11px;
}
.bm-tool-group button,
.bm-tool-group .button {
  padding: 8px 14px;
  font-size: 13px;
}
.bm-tool-group input[type="color"] {
  border-radius: 6px;
}
#bm-stage-wrap {
  padding: 14px;
}
#bm-stage {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line);
}

/* Battle Map: tabletop-first workspace. The controls deliberately read as
   a compact tool dock rather than a second page of form buttons, leaving
   the encounter itself as the dominant surface. */
.battlemap-workspace {
  --bm-rail: rgba(14, 18, 21, .94);
  --bm-edge: rgba(189, 207, 212, .19);
  --bm-active: #6cd5df;
  min-width: 0;
}
.bm-titlebar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 0 2px 10px;
}
.bm-titlebar h1 { margin: 0; letter-spacing: .02em; }
.bm-titlebar p { margin: 0 0 4px; font-size: 13px; }
.bm-help {
  margin: 0 2px 12px;
  font-size: 12px;
}
#bm-toolbar {
  position: sticky;
  top: 8px;
  z-index: 20;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 7px;
  padding: 7px;
  border: 1px solid var(--bm-edge);
  border-radius: 9px;
  background: var(--bm-rail);
  box-shadow: 0 12px 34px #000a, inset 0 1px #ffffff0d;
  backdrop-filter: blur(18px);
}
#bm-toolbar > select,
#bm-toolbar > .bm-map-name {
  min-width: 180px;
  border-radius: 6px;
  background: #0b0f11;
}
.bm-tool-group {
  gap: 3px;
  padding: 0 7px 0 0;
  border: 0;
  border-right: 1px solid var(--bm-edge);
  border-radius: 0;
  background: transparent;
}
.bm-tool-group:last-child { border-right: 0; padding-right: 0; }
.bm-tool-group button,
.bm-tool-group .button {
  min-height: 34px;
  padding: 6px 9px;
  border-color: transparent;
  border-radius: 5px;
  background: transparent;
  color: #d4dcde;
  font-size: 12px;
  line-height: 1;
  box-shadow: none;
}
.bm-tool-group button:hover,
.bm-tool-group .button:hover {
  background: #ffffff14;
  border-color: #ffffff1a;
  transform: none;
}
.bm-tool-group button.gold {
  color: #e7fdff;
  border-color: #6cd5df88;
  background: #36768052;
  box-shadow: inset 0 0 0 1px #6cd5df2e, 0 0 16px #6cd5df1a;
}
.bm-tool-group button.danger:hover { background: #a84a5333; border-color: #ffadb255; }
.bm-tool-group input[type="color"] {
  width: 31px !important;
  height: 31px;
  margin: 1px 2px;
  padding: 2px !important;
  border: 1px solid var(--bm-edge);
  border-radius: 5px;
  background: #0b0f11;
}
#bm-stage-wrap {
  position: relative;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--bm-edge);
  border-radius: 9px;
  background: #090c0e;
  box-shadow: 0 20px 60px #0008;
}
#bm-stage-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .32;
  background-image: radial-gradient(#6cd5df22 1px, transparent 1px);
  background-size: 12px 12px;
}
#bm-stage {
  position: relative;
  z-index: 1;
  min-width: 0;
  border: 1px solid #ffffff1c;
  border-radius: 5px;
  box-shadow: 0 10px 36px #000c, inset 0 0 0 1px #000;
}
.battlemap-token { transition: box-shadow .14s ease, filter .14s ease; }
.battlemap-token:hover { filter: brightness(1.16); }
@media (max-width: 900px) {
  .bm-titlebar { align-items: start; flex-direction: column; gap: 2px; }
  #bm-toolbar { position: static; flex-wrap: nowrap; overflow-x: auto; }
  .bm-tool-group { flex: 0 0 auto; }
  #bm-stage-wrap { padding: 6px; }
  #bm-stage { min-width: 620px; }
}

/* ---- Archive (Wiki): page image + list-card thumbnail ---- */
.wiki-image {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px #0005;
}
.wiki-card {
  overflow: hidden;
}
.wiki-card-image {
  height: 140px;
  margin: -25px -25px 18px;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--line);
}
.wiki-link {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wiki-link-missing {
  color: var(--muted);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
}
#wiki-filters {
  flex-wrap: wrap;
}
#wiki-filters .chip {
  font: 11px monospace;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: transparent;
  color: var(--muted);
}
#wiki-filters .chip.active {
  border-color: var(--gold);
  color: var(--gold);
}

/* The Table: a future-fantasy command room, shared by campaign tools. */
body.table { --bg:#0b1219; --panel:rgba(18,30,40,.96); --surface-2:#1a2b36; --line:#9fbfca29; --gold:#e2c38a; --cyan:#8bd5d9; --muted:#a0b3bf; --text:#edf0ea; --crimson-glow:#34606d44; background:var(--bg); }
body.table::before { background:radial-gradient(ellipse at 15% 15%,#3d545344,transparent 45%),radial-gradient(ellipse at 95% 55%,#253c5355,transparent 55%),linear-gradient(#0a1119ee,#0a1119fa),url('/assets/campaign-hero.webp') center/cover; }
body.table>header { background:#0a1118ed; border-bottom:1px solid #d6bc8030; padding:22px 3vw; gap:30px; }
body.table .brand { font:800 21px/1.2 system-ui,sans-serif; letter-spacing:4px; }
body.table .brand small { color:#8ca5ae; letter-spacing:2.4px; font-size:8px; margin-top:8px; }
body.table>header nav a { font-size:13px; }
body.table>main { max-width:1660px; margin:0 auto; padding:34px 32px 65px; }
body.table .table-shell { grid-template-columns:228px minmax(0,1fr); gap:26px; }
body.table .table-sidebar { top:20px; padding:25px 15px 18px; border:1px solid #a5bcc333; background:linear-gradient(155deg,#1a2a34ed,#0d1821f5); border-radius:14px; box-shadow:0 18px 55px #0004,inset 0 1px #e3fbff0c; }
body.table .table-logo { padding-bottom:23px; gap:10px; }
body.table .table-logo-mark { width:46px; height:46px; filter:drop-shadow(0 0 13px #d5b57344); }
body.table .table-logo strong { font:600 15px/1.3 system-ui,sans-serif; letter-spacing:4px; }
body.table .table-logo small { color:#90afb9; font-size:8px; letter-spacing:2px; }
body.table .sidebar-label { color:#7e9ba8; font-size:9px; padding-top:19px; }
body.table .sidebar-campaign { padding:13px 5px 16px; }
body.table .sidebar-campaign span { font-size:9px; color:#abbdc2; }
body.table .sidebar-link { position:relative; padding:10px 11px; font-size:12px; border:1px solid transparent; margin-bottom:3px; border-radius:6px; transition:background .18s,border-color .18s; }
body.table .sidebar-link:hover { background:#36566644; color:#f1e9d7; border-color:#a5c9cb26; }
body.table .sidebar-link.active { background:linear-gradient(90deg,#99825135,#334d5829); border-color:#d4b57355; color:#f0d7a4; box-shadow:inset 2px 0 #e2c38a; }
body.table .sidebar-icon { width:18px; height:18px; }
body.table .dm-badge { border-color:#d4b57344; background:#c3a3660c; font-size:10px; }
body.table .table-content>.eyebrow { color:#c6b285; letter-spacing:2.5px; }
body.table .table-content>h1 { font:400 clamp(32px,4vw,52px)/1.2 Georgia,serif; letter-spacing:-1px; }
body.table .panel { background:linear-gradient(135deg,#1b2b35dd,#111d27f2); border:1px solid #9fbfca29; box-shadow:0 8px 26px #0002,inset 0 1px #d6f5ff06; border-radius:12px; }
body.table .panel h2 { font:400 25px/1.25 Georgia,serif; letter-spacing:-.3px; }
body.table button,body.table .button { border-radius:6px; background:#1b2d39; border-color:#93b9c43b; font-size:13px; }
body.table button:hover,body.table .button:hover { background:#2c4553; border-color:#93b9c47a; }
body.table .gold { background:#e2c38a; color:#17232c; border-color:#f5dca8; font-weight:650; box-shadow:0 3px 15px #d6b57515; }
body.table .gold:hover { background:#f4dcae; color:#101c24; }
body.table .quiet { background:transparent; color:#d0dce0; }
body.table .danger { color:#ffb3b8; }
body.table :is(input,select,textarea) { background:#0c1821; color:#edf0ea; border:1px solid #8fb0bf45; border-radius:6px; }
body.table .badge { border-color:#93b9c435; background:#0d1a23; color:#c2d3d9; }
body.table .hero-block { padding:48px 40px; min-height:310px; border:1px solid #d5b97d55; border-radius:16px; background:linear-gradient(95deg,#0a1621f5 0%,#0a1621d9 36%,#0d1b2580 68%,#0d1b2544),url('/assets/campaign-hero.webp') center/cover; box-shadow:0 20px 65px #0005; margin-bottom:0; isolation:isolate; }
body.table .hero-block::before { content:''; position:absolute; width:370px; height:370px; right:-80px; top:-85px; border:1px solid #bbdfe230; border-radius:50%; box-shadow:0 0 0 28px #a7d5dc05,0 0 0 29px #a7d5dc16,0 0 0 80px #a7d5dc05,0 0 0 81px #a7d5dc15; pointer-events:none; z-index:-1; }
body.table .hero-block::after { content:''; position:absolute; left:40px; top:0; height:2px; width:75px; background:#e2c38a; box-shadow:0 0 20px #e2c38a88; }
body.table .hero-block .eyebrow { font:10px/1.5 ui-monospace,monospace; letter-spacing:2.7px; color:#d9c28f; }
body.table .hero-block h1 { font:400 clamp(36px,4.5vw,64px)/1.07 Georgia,serif; letter-spacing:-1.6px; max-width:850px; margin:22px 0 17px; text-shadow:0 5px 25px #0008; overflow-wrap:anywhere; }
body.table .hero-block .intro { color:#bfccd0; font-size:15px; max-width:60ch; }
body.table .hero-block .row { margin-top:28px; }
.campaign-readout { display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; padding:18px 4px; margin-bottom:16px; border-bottom:1px solid #93b9c426; color:#a5bbc4; font:11px/1.6 system-ui,sans-serif; }
.campaign-readout>span:first-child { font:9px ui-monospace,monospace; letter-spacing:1.6px; color:#94bcbd; }
.campaign-readout i { font-size:16px; color:#e2c38a; font-style:normal; margin-right:8px; }
.campaign-readout a { margin-left:auto; color:#d9c28f; }
body.table .overview-grid { gap:20px; grid-template-columns:minmax(0,1fr) 290px; }
body.table .story-card { position:relative; border-top-color:#cfb67966; padding:28px; }
body.table .story-card p { line-height:1.9; color:#bac9cd; font-size:14px; }
body.table .story-card a { color:#d1bd8f; font-size:11px; }
body.table .feature-cards { gap:16px; margin-top:0; }
body.table .feature-card { min-height:215px; padding:26px; background-size:cover; background-position:center; overflow:hidden; transition:transform .2s,border-color .2s; }
body.table .feature-card:hover { transform:translateY(-4px); border-color:#d6be8799; }
body.table .feature-card::before { background:linear-gradient(0deg,#0a1721f5 4%,#0a172199 65%,#0a172133); }
body.table .feature-card h3 { font:400 26px/1.3 Georgia,serif; color:#f0e4cd; }
body.table .feature-card p { font-size:12px; color:#becdd4; }
body.table .campaign-overview .party-card { position:relative; padding:26px; border-top:1px solid #d7bd8055; }
body.table .campaign-overview .party-card h2 { margin-top:18px; }
body.table .campaign-overview .party-card p { font-size:13px; }
body.table .campaign-overview .portrait-frame { border-color:#d3b881; box-shadow:0 0 0 5px #d3b88108,0 0 0 6px #d3b88122,0 5px 24px #0006; }
body.table .campaign-overview .avatar-row { gap:20px 16px; margin-top:22px; }
body.table #chronicle { border-top-color:#93cbcf66; }
body.table .session-night-hero { background:radial-gradient(circle at 85% 15%,#436d7e44,transparent 45%),linear-gradient(110deg,#0b1925f5,#0b1925aa),url('/assets/campaign-hero.webp') center/cover; }
body.table .session-night-hero.live { box-shadow:inset 0 0 90px #0005,0 0 40px #80c2c422; }
/* Desktop navigation scrolls independently; small screens retain normal flow. */
@media (min-width:1001px) {
  body.table .table-sidebar {
    max-height:calc(100vh - 40px);
    max-height:calc(100dvh - 40px);
    overflow-y:auto;
    overscroll-behavior-y:contain;
    scrollbar-gutter:stable;
    scrollbar-width:thin;
    scrollbar-color:#a88d59 #101b24;
  }
  body.table .table-sidebar > * { flex-shrink:0; }
  body.table .table-sidebar:focus-visible { outline:2px solid var(--gold, #d4b477); outline-offset:3px; }
}
@media(max-width:1150px) { body.table .overview-grid { grid-template-columns:minmax(0,1fr); } body.table .table-shell { grid-template-columns:210px minmax(0,1fr); gap:20px; } body.table .hero-block { padding:34px 28px; } }
@media(max-width:1000px) { body.table .table-shell { grid-template-columns:minmax(0,1fr); } body.table .table-sidebar { position:static; flex-direction:row; flex-wrap:wrap; padding:18px; gap:12px; } body.table .table-logo { flex-direction:row; padding:0; border:0; margin:0; } body.table .sidebar-campaign { padding:0; margin:0; border:0; } body.table .sidebar-group { display:flex; flex-wrap:wrap; gap:4px; } body.table .sidebar-label { width:100%; padding:8px; } body.table .sidebar-footer { margin:0; padding:0; border:0; } }
@media(max-width:650px) { body.table>main { padding:18px 14px 40px; } body.table>header { padding:18px; } body.table .hero-block { min-height:0; padding:30px 24px; } body.table .hero-block h1 { font-size:38px; } body.table .feature-cards { grid-template-columns:minmax(0,1fr); } body.table .campaign-overview .grid { grid-template-columns:minmax(0,1fr); } .campaign-readout a { margin-left:0; } body.table .sidebar-link { font-size:11px; padding:8px; } body.table .table-logo strong { font-size:13px; } }
/* Campaign-local, language-aware table chat. */
.table-chat-page .table-content > h1 { margin-bottom:8px; }
.table-chat-layout { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:18px; margin-top:26px; align-items:start; }
.table-chat-panel { padding:0!important; overflow:hidden; border-color:#8ecbd04d!important; background:linear-gradient(145deg,#192d39,#0b1824)!important; }
.table-chat-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:22px 24px; border-bottom:1px solid #9bc7c52b; background:linear-gradient(95deg,#2b465155,#13212f); }
.table-chat-head h2 { margin:5px 0 0; font:32px/1.1 Georgia,serif; }
.table-chat-status { color:#9fddd8; font:10px ui-monospace,monospace; text-transform:uppercase; letter-spacing:1px; white-space:nowrap; }
.table-chat-messages { display:flex; flex-direction:column; gap:11px; height:min(57dvh,650px); min-height:340px; overflow:auto; padding:24px; scrollbar-color:#557f8b #0a1722; }
.table-chat-message { max-width:min(90%,720px); padding:14px 17px; border:1px solid #8bb4b32c; border-radius:11px; background:linear-gradient(120deg,#223744,#172631); box-shadow:0 8px 20px #0002; }
.table-chat-message.unknown { border-color:#b79a6555; background:linear-gradient(120deg,#3c332d,#24252d); }
.table-chat-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; color:#a9cad2; font-size:11px; }
.table-chat-meta strong { color:#f1dfb9; font-size:13px; }
.table-chat-meta span { padding:3px 6px; border:1px solid #d1ad683e; border-radius:4px; color:#d9bc84; font:9px ui-monospace,monospace; letter-spacing:.7px; text-transform:uppercase; }
.table-chat-meta time { margin-left:auto; color:#86a0a9; }
.table-chat-message p { margin:10px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.55; }
.table-chat-message.unknown p { color:#efcf9a; font-size:19px; letter-spacing:2px; line-height:1.5; }
.table-chat-message small { color:#b5a482; }
.table-chat-empty { margin:auto; color:#92adb5; font:italic 22px Georgia,serif; }
.table-chat-form { display:flex; gap:10px; align-items:end; padding:15px 18px; border-top:1px solid #9bc7c52b; background:#0a1723; }
.table-chat-form textarea { flex:1; min-width:0; margin:0; resize:vertical; }
.table-chat-form button { white-space:nowrap; }
.table-chat-aside { padding:23px!important; background:linear-gradient(155deg,#1e3440,#101d29)!important; border-color:#a5c4c63d!important; }
.table-chat-aside h2 { margin:7px 0 22px; font:27px Georgia,serif; }
.table-chat-aside label { display:block; margin-bottom:15px; color:#c2d8db; }
.table-chat-aside select { width:100%; margin-top:7px; }
.table-chat-aside .muted { font-size:12px; line-height:1.5; }
.table-chat-rule { display:flex; gap:10px; margin-top:18px; padding-top:17px; border-top:1px solid #a2c5c22b; color:#a9bdc3; font-size:12px; line-height:1.5; }
.table-chat-rule span { color:#dfbf7f; }
.table-chat-rule p { margin:0; }
@media(max-width:900px) { .table-chat-layout { grid-template-columns:1fr; } .table-chat-aside { grid-row:1; } .table-chat-messages { height:52dvh; } }
@media(max-width:580px) { .table-chat-head { padding:17px; } .table-chat-messages { padding:14px; } .table-chat-form { flex-direction:column; align-items:stretch; } }
/* Campaign quest log: a readable party board, with history kept in place. */
.quest-log-page .table-content > h1 { margin-bottom:8px; }
.quest-log-actions { display:flex; align-items:center; gap:10px; margin:24px 0 18px; }
.quest-section > .row { align-items:baseline; gap:16px; margin-bottom:12px; }
.quest-section > .row h2 { margin:0; }
.quest-list { display:grid; gap:14px; }
.quest-card { padding:22px 24px!important; border-left:3px solid #7caeb0!important; }
.quest-card.quest-completed { border-left-color:#d4b573!important; opacity:.88; }
.quest-card.quest-failed { border-left-color:#a56d72!important; opacity:.8; }
.quest-card-head { display:flex; justify-content:space-between; align-items:start; gap:16px; }
.quest-card h2 { margin:7px 0 0; }
.quest-status { color:#91d1cd; font:10px ui-monospace,monospace; text-transform:uppercase; letter-spacing:1.3px; }
.quest-completed .quest-status { color:#e1c284; }
.quest-failed .quest-status { color:#e6a5a9; }
.quest-summary { color:#d6e1e1; font:16px/1.65 Georgia,serif; max-width:78ch; }
.quest-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:18px; }
.quest-details section { padding:14px 16px; border:1px solid #91bac526; border-radius:8px; background:#07131b42; }
.quest-details h3 { margin:0 0 8px; color:#d6c08d; font:11px ui-monospace,monospace; letter-spacing:1px; text-transform:uppercase; }
.quest-details ul { margin:0; padding-left:19px; color:#c3d0d2; }
.quest-details li { margin:6px 0; }
.quest-details .muted { margin:0; font-size:12px; }
.quest-reward { margin:18px 0 0; color:#e6d0a0; }
.quest-notes { margin:13px 0 0; color:#acbec4; white-space:pre-wrap; }
.quest-card footer { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:20px; padding-top:14px; border-top:1px solid #91bac522; font-size:12px; }
.quest-empty { padding:30px!important; text-align:center; }
@media(max-width:650px) { .quest-card { padding:18px!important; } .quest-details { grid-template-columns:1fr; } .quest-card footer { align-items:start; flex-direction:column; } }
/* The shared evidence wall: tactile-looking clues with drafts kept visibly DM-only. */
.handout-actions { display:flex; gap:10px; align-items:center; margin:24px 0 18px; }
.handout-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; }
.handout-card { display:grid; grid-template-columns:150px minmax(0,1fr); min-height:188px; padding:0!important; overflow:hidden; border-color:#baab824d!important; background:linear-gradient(145deg,#252a29,#111d24)!important; }
.handout-card:hover { border-color:#d6bf8790!important; }
.handout-image { display:block; min-height:100%; background:#0b151b; }
.handout-image img { display:block; width:100%; height:100%; min-height:188px; object-fit:cover; }
.handout-mark { display:grid; place-items:center; min-height:188px; color:#ddc287; font:58px Georgia,serif; background:radial-gradient(circle,#5d51412e,#0c171e),repeating-linear-gradient(135deg,#d2bd8320 0 1px,transparent 1px 8px); }
.handout-copy { min-width:0; padding:20px 19px; }
.handout-card-head { display:flex; justify-content:space-between; gap:10px; align-items:start; }
.handout-kind { color:#d7bd82; font:10px ui-monospace,monospace; letter-spacing:1.2px; text-transform:uppercase; }
.handout-card h2 { margin:6px 0 11px; font-size:23px; overflow-wrap:anywhere; }
.handout-body { margin:0 0 14px; color:#d6dddb; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.58; }
.handout-draft { border-color:#c27e795c!important; background:linear-gradient(145deg,#2b2227,#17171e)!important; }
.handout-draft .handout-kind { color:#e2a29f; }
.handout-drafts > .row { align-items:baseline; gap:16px; margin-bottom:12px; }
.handout-drafts > .row h2 { margin:0; }
.handout-empty { grid-column:1/-1; padding:32px!important; text-align:center; }
.handout-feature-card { background:radial-gradient(circle at 78% 20%,#ba9a5955,transparent 38%),linear-gradient(135deg,#263440,#121d24)!important; }
@media(max-width:800px) { .handout-grid { grid-template-columns:1fr; } }
@media(max-width:460px) { .handout-card { grid-template-columns:1fr; } .handout-image img,.handout-mark { min-height:150px; max-height:220px; } }
/* Downtime is a quiet DM queue beside an always-available safety control. */
.downtime-layout { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:18px; align-items:start; margin-top:24px; }
.downtime-actions { display:flex; gap:10px; align-items:center; margin-bottom:14px; }
.downtime-list { display:grid; gap:12px; }
.downtime-entry { padding:20px 22px!important; }
.downtime-entry h2 { margin:7px 0 0; font-size:23px; }
.downtime-entry > p { white-space:pre-wrap; color:#c8d4d5; }
.downtime-state { font:10px ui-monospace,monospace; text-transform:uppercase; letter-spacing:1px; color:#e1c182; }
.downtime-state.resolved { color:#91d2bb; }.downtime-state.declined { color:#dda1a7; }
.downtime-result { margin:14px 0; padding:13px 15px; border-left:2px solid #8dc9c5; background:#0c191f; }.downtime-result p { white-space:pre-wrap; margin:7px 0; }
.downtime-roll { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:14px 0; padding:10px 13px; border:1px solid #d5b97944; border-radius:7px; background:#151b1d; color:#ddcca3; }.downtime-roll span { font:16px Georgia,serif; }.downtime-roll b { color:#fff0c6; font-size:20px; }.downtime-roll small { text-transform:uppercase; letter-spacing:1px; font:10px ui-monospace,monospace; }.downtime-roll.success,.downtime-roll.critical { border-color:#75bca077; color:#b4dfc5; }.downtime-roll.complication { border-color:#c87a7d77; color:#efb1b5; }
.table-care { padding:23px!important; border-color:#d0b47b55!important; }.table-care h2 { margin:7px 0 12px; }.table-care p { line-height:1.6; white-space:pre-wrap; }.table-care.pause-active { border-color:#e0919588!important; box-shadow:0 0 25px #c6636922; }.table-care.pause-active h2 { color:#f0b0b0; }
@media(max-width:900px) { .downtime-layout { grid-template-columns:1fr; }.table-care { grid-row:1; } }
.session-rsvp { margin-top:24px; padding-top:17px; border-top:1px solid #a9c9c533; }.session-rsvp strong { display:block; margin-top:5px; color:#d8c38c; }.session-rsvp form { display:grid; grid-template-columns:150px minmax(0,1fr) auto; gap:8px; margin-top:12px; }.session-rsvp form :is(input,select) { margin:0; }.session-rsvp-list { margin:12px 0 0; color:#aec1c5; font-size:12px; line-height:1.6; }
@media(max-width:600px) { .session-rsvp form { grid-template-columns:1fr; } }