/* Core Tokens And Base Elements */
:root {
  --bg: #101411;
  --bg-2: #151b17;
  --panel: #18201b;
  --panel-2: #1d261f;
  --line: #314035;
  --line-hot: #7f9f87;
  --text: #d3ddce;
  --muted: #7f8c7d;
  --accent: #a8d37b;
  --warn: #d8b25d;
  --bad: #d87963;
  --ok: #84cfa0;
  --shadow: #070907;
  --mono: "Cascadia Mono", "Consolas", "Courier New", monospace;
  --font-size: 12px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(168, 211, 123, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(168, 211, 123, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 20% 0%, rgba(168, 211, 123, 0.08), transparent 34rem),
    var(--bg);
  background-size: 16px 16px, 16px 16px, auto, auto;
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--font-size);
}

* {
  scrollbar-color: #59635b #101611;
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

*::-webkit-scrollbar-track {
  background: #101611;
}

*::-webkit-scrollbar-thumb {
  border: 1px solid #101611;
  border-radius: 0;
  background: #59635b;
}

*::-webkit-scrollbar-thumb:hover {
  background: #6b766e;
}

*::-webkit-scrollbar-corner {
  background: #101611;
}

button,
select {
  border: 1px solid var(--line);
  border-radius: 0;
  background: #101611;
  color: var(--text);
  font: inherit;
  height: 25px;
}

button {
  padding: 0 8px;
  cursor: pointer;
  text-transform: uppercase;
}

button:hover,
select:hover {
  border-color: var(--line-hot);
  color: #f3ffe8;
}

button:disabled {
  color: #566257;
  cursor: not-allowed;
  border-color: #273027;
}

select {
  width: 100%;
  padding: 0 4px;
}

h2,
h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

h3 {
  color: var(--muted);
  margin-bottom: 6px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid var(--line);
  padding: 4px 5px;
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--muted);
  background: #111711;
  font-weight: 400;
  text-transform: uppercase;
}

pre {
  min-height: 178px;
  margin: 0;
  border: 1px solid var(--line);
  padding: 8px;
  overflow: auto;
  background: #0e130f;
  color: var(--text);
  white-space: pre-wrap;
}

.app-shell {
  width: 100%;
  min-height: 100vh;
}

/* App Shell, Title Bar, And Tabs */
.topbar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 12px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-hot);
  background: rgba(16, 20, 17, 0.96);
  box-shadow: 0 2px 0 var(--shadow);
}

.app-title {
  display: flex;
  align-items: center;
  color: var(--accent);
  font-size: 13px;
  text-transform: uppercase;
}

.continent-switcher {
  position: relative;
  display: inline-flex;
}

#continentSwitcherButton {
  height: 23px;
  border-color: transparent;
  padding: 0 18px 0 3px;
  background: transparent;
  color: var(--accent);
  font-size: 13px;
  text-align: left;
}

#continentSwitcherButton::after {
  position: absolute;
  right: 5px;
  content: "v";
  color: var(--muted);
}

#continentSwitcherButton[aria-expanded="true"] {
  border-color: var(--line-hot);
  background: #101611;
}

.continent-switcher-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 3px);
  left: 0;
  display: grid;
  min-width: 190px;
  border: 1px solid var(--line-hot);
  padding: 3px;
  background: #0c110d;
  box-shadow: 2px 2px 0 var(--shadow);
}

.continent-switcher-menu[hidden] {
  display: none;
}

.continent-switcher-menu button {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  border-color: transparent;
  text-align: left;
}

.continent-switcher-menu button.active {
  border-color: var(--accent);
  color: var(--accent);
}

.continent-switcher-menu .continent-switch-state {
  color: var(--muted);
}

.clockline {
  color: var(--muted);
}

.clockline {
  display: grid;
  grid-template-columns: repeat(3, auto) minmax(120px, auto);
  align-content: center;
  gap: 10px;
  text-transform: uppercase;
}

#tavernResourceLine {
  color: var(--accent);
  text-align: right;
}

.hud-tabs {
  position: sticky;
  top: 34px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid var(--line-hot);
  background: #0d120e;
}

.tab-button {
  position: relative;
  flex: 0 0 auto;
  height: 34px;
  padding: 0 14px;
  border-width: 0 1px 0 0;
  border-color: var(--line);
  background: #111711;
}

.tab-button.tab-notice::after {
  content: "!";
  position: absolute;
  right: 4px;
  top: 4px;
  display: grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border: 1px solid #f3c861;
  border-radius: 50%;
  background: #d14b3f;
  color: #fff3c1;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  pointer-events: none;
}

.tab-button.tab-notice-legacy,
.tab-button.tab-notice-problem {
  padding-right: 24px;
}

.tab-button.tab-notice-legacy.tab-notice-problem {
  padding-right: 40px;
}

.tab-button.tab-notice-legacy::before,
.tab-button.tab-notice-problem::after {
  position: absolute;
  top: 4px;
  display: grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  pointer-events: none;
}

.tab-button.tab-notice-legacy::before {
  content: "!";
  right: 4px;
  border: 1px solid #f3c861;
  background: #9a6a19;
  color: #fff3c1;
}

.tab-button.tab-notice-problem::after {
  content: "+";
  right: 4px;
  border: 1px solid #ff9a8d;
  background: #b53432;
  color: #fff;
}

.tab-button.tab-notice-legacy.tab-notice-problem::before {
  right: 20px;
}

.local-tab-button.tab-notice {
  position: relative;
  padding-right: 20px;
}

.local-tab-button.tab-notice::after {
  content: "!";
  position: absolute;
  right: 4px;
  top: 4px;
  display: grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border: 1px solid #f3c861;
  border-radius: 50%;
  background: #d14b3f;
  color: #fff3c1;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  pointer-events: none;
}

.character-notice-badges {
  position: absolute;
  z-index: 2;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 3px;
}

.character-notice-badge {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
}

.character-notice-badge.legacy {
  border: 1px solid #f3c861;
  background: #9a6a19;
  color: #fff3c1;
}

.character-notice-badge.problem {
  border: 1px solid #ff9a8d;
  background: #b53432;
  color: #fff;
}

.tab-button.active {
  background: var(--panel-2);
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.workspace {
  padding: 0;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: grid;
  gap: 0;
}

.tab-panel[data-tab-panel="map"].active {
  min-height: calc(100vh - 68px);
}

.map-view-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: calc(100vh - 68px);
}

.map-view-tabs {
  display: flex;
  width: max-content;
  max-width: 100%;
  border-width: 0 1px 1px 0;
  background: #0d120e;
}

.map-view-tabs .local-tab-button {
  flex: 0 0 auto;
  width: auto;
  min-width: 72px;
  padding-inline: 12px;
}

.map-view-panel {
  display: none;
  min-height: 0;
}

.map-view-panel.active {
  display: block;
}

.map-view-panel .map-tab-layout,
.map-view-panel .continent-layout,
.map-view-panel .continent-map {
  min-height: calc(100vh - 94px);
}

.map-view-panel .map-side-panel {
  top: 94px;
  max-height: calc(100vh - 94px);
}

.map-view-panel .continent-side-panel {
  top: 94px;
}

[data-map-side-panel="dev"] h3:not(:first-child) {
  margin-top: 12px;
}

.tab-panel.tavern-view.active,
.tab-panel.stats-view.active,
.tab-panel.roster-view.active,
.tab-panel.dungeon-view.active {
  min-height: calc(100vh - 68px);
  align-content: start;
  margin: 0;
  padding: 0;
}

.tab-panel.tavern-view.active {
  background:
    linear-gradient(90deg, rgba(8, 10, 8, 0.68), rgba(8, 10, 8, 0.2) 48%, rgba(8, 10, 8, 0.78)),
    linear-gradient(180deg, rgba(8, 10, 8, 0.18), rgba(8, 10, 8, 0.86)),
    url("assets/tavern-bg.png") center / cover no-repeat;
}

.tab-panel.roster-view.active {
  height: calc(100vh - 68px);
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(8, 10, 8, 0.78), rgba(8, 10, 8, 0.24) 52%, rgba(8, 10, 8, 0.74)),
    linear-gradient(180deg, rgba(8, 10, 8, 0.12), rgba(8, 10, 8, 0.88)),
    url("assets/roster-bg.png") center / cover no-repeat;
}

.tab-panel.dungeon-view.active {
  height: calc(100vh - 68px);
  min-height: 0;
  align-content: stretch;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(8, 10, 8, 0.78), rgba(8, 10, 8, 0.28) 48%, rgba(8, 10, 8, 0.82)),
    linear-gradient(180deg, rgba(8, 10, 8, 0.18), rgba(8, 10, 8, 0.9)),
    url("assets/dungeons-bg.png") center / cover no-repeat;
}

.tab-panel.stats-view.active {
  background:
    linear-gradient(90deg, rgba(8, 10, 8, 0.76), rgba(8, 10, 8, 0.24) 50%, rgba(8, 10, 8, 0.8)),
    linear-gradient(180deg, rgba(8, 10, 8, 0.16), rgba(8, 10, 8, 0.9)),
    url("assets/tavern-bg.png") center / cover no-repeat;
}

/* Shared Panels And Tables */
.panel {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  padding: 8px;
}

.tavern-view .panel,
.stats-view .panel,
.roster-view .panel,
.dungeon-view .panel {
  max-width: 980px;
  background: linear-gradient(180deg, rgba(24, 32, 27, 0.9), rgba(15, 20, 16, 0.94));
  backdrop-filter: blur(1px);
}

.roster-view .panel {
  max-width: none;
}

.population-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  height: calc(100vh - 68px);
  min-height: calc(100vh - 68px);
  overflow: hidden;
}

.tavern-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  gap: 0;
  align-items: stretch;
  min-height: calc(100vh - 68px);
}

.tavern-main {
  display: grid;
  gap: 0;
  align-content: start;
  min-height: calc(100vh - 68px);
}

.stats-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  min-height: calc(100vh - 68px);
}

.stats-local-tabs {
  width: 100%;
  margin: 0;
  border-width: 0 0 1px;
  background: #0d120e;
}

.tavern-bookkeeping-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  gap: 0;
  align-items: stretch;
  min-height: calc(100vh - 94px);
}

.stats-overview-panel {
  min-height: calc(100vh - 94px);
}

.stats-history-panel {
  min-height: calc(100vh - 94px);
}

.stats-history-summary,
.stats-history-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.stats-history-summary {
  justify-content: space-between;
}

.stats-history-key {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text);
}

.stats-history-key i {
  width: 12px;
  height: 3px;
  background: var(--series-color);
}

.stats-history-chart-wrap {
  min-width: 0;
  overflow-x: auto;
  padding: 10px;
}

.stats-history-chart {
  display: block;
  width: 100%;
  min-width: 640px;
  height: min(56vh, 520px);
}

.stats-history-grid {
  stroke: #2d3930;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.stats-history-grid-vertical {
  stroke-dasharray: 3 5;
}

.stats-history-axis-label {
  fill: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
}

.stats-history-series {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: square;
  vector-effect: non-scaling-stroke;
}

.stats-history-endpoint {
  vector-effect: non-scaling-stroke;
}

.expedition-layout,
.continent-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  gap: 0;
  align-items: stretch;
  min-height: calc(100vh - 68px);
}

.expedition-layout .panel,
.continent-layout .panel {
  max-width: none;
}

.expedition-side-panel,
.continent-side-panel {
  position: sticky;
  top: 68px;
}

.continent-map-panel {
  position: relative;
  min-width: 0;
}

.panel-help-corner {
  position: absolute;
  z-index: 12;
  top: 8px;
  right: 8px;
}

.continent-map {
  position: relative;
  min-height: calc(100vh - 68px);
  overflow: hidden;
  border-top: 1px solid var(--line);
  background: #080b08;
}

.continent-world {
  position: absolute;
  inset: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: url("assets/continent-bg.png") center / 100% 100% no-repeat;
}

.continent-transfer-actors {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.continent-transfer-actor {
  z-index: 2;
}

.continent-marker {
  position: absolute;
  min-width: 106px;
  transform: translate(-50%, -50%);
  border-color: var(--line);
  background: rgba(13, 18, 14, 0.92);
  box-shadow: 2px 2px 0 #050805;
}

.continent-marker.unlocked {
  border-color: var(--accent);
}

.continent-marker.locked {
  color: var(--muted);
  border-color: #374038;
  background: rgba(8, 11, 9, 0.78);
}

.continent-marker.focused {
  border-color: var(--ok);
  box-shadow: 0 0 0 1px var(--ok), 2px 2px 0 #050805;
}

.continent-marker.selected {
  outline: 1px solid var(--warn);
  outline-offset: 2px;
}

.continent-context-menu {
  position: absolute;
  z-index: 6;
  display: grid;
  gap: 3px;
  min-width: 84px;
  padding: 4px;
  border: 1px solid var(--accent);
  background: #0c110d;
  box-shadow: 2px 2px 0 #050805;
}

.continent-context-menu button {
  justify-content: flex-start;
  width: 100%;
}

.population-main {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
}

.tavern-layout .panel,
.tavern-bookkeeping-layout .panel,
.stats-overview-panel,
.population-layout .panel {
  max-width: none;
}

.tavern-detail-panel,
.tavern-finance-panel {
  position: sticky;
  top: 68px;
}

.tavern-bookkeeping-main,
.tavern-finance-panel {
  min-height: calc(100vh - 94px);
}

.bookkeeping-section + .bookkeeping-section {
  margin-top: 10px;
}

.bookkeeping-table {
  table-layout: fixed;
}

.bookkeeping-table th,
.bookkeeping-table td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.stats-overview-table,
.stats-overview-table tbody,
.stats-overview-table tr,
.stats-overview-table th,
.stats-overview-table td {
  overflow: visible;
}

.stats-overview-table td.stats-gain-cell {
  position: relative;
  overflow: visible;
  z-index: 1;
}

.stats-overview-table td.stats-gain-cell:hover,
.stats-overview-table td.stats-gain-cell:focus-within {
  z-index: 80;
}

.stats-gain-hover {
  position: relative;
  display: inline-block;
  min-width: 58px;
  color: var(--warn);
  outline: none;
}

.stats-gain-hover:hover > .stats-rate-breakdown,
.stats-gain-hover:focus-within > .stats-rate-breakdown,
.stats-gain-hover:focus > .stats-rate-breakdown {
  display: grid;
  gap: 3px;
}

.stats-rate-breakdown {
  z-index: 90;
  left: calc(100% + 8px);
  top: -8px;
  min-width: 340px;
  max-width: 460px;
}

.stats-rate-section-title {
  margin-top: 4px;
  color: var(--warn);
  font-size: 10px;
  text-transform: uppercase;
}

.stats-rate-section-total {
  border-top: 0;
}

.finance-dashboard {
  display: grid;
  gap: 6px;
}

.finance-metric {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  background: #101611;
  padding: 6px;
}

.finance-metric span {
  color: var(--muted);
  text-transform: uppercase;
}

.finance-metric strong {
  color: var(--accent);
  font-weight: 700;
}

.book2-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-self: end;
}

.book2-mode-controls {
  display: flex;
  gap: 0;
}

.book2-mode-controls button {
  min-width: 96px;
  border-width: 1px 1px 1px 0;
}

.book2-mode-controls button:first-child {
  border-left-width: 1px;
}

.book2-mode-controls button.active {
  color: var(--accent);
  background: #172017;
  box-shadow: inset 0 -2px 0 var(--accent);
}

.party-heatmap-wrap {
  min-width: 0;
  overflow: auto;
}

.party-heatmap {
  min-width: 620px;
  table-layout: fixed;
}

.party-heatmap th,
.party-heatmap td {
  height: 32px;
  text-align: center;
  vertical-align: middle;
}

.party-heatmap th:first-child {
  width: 148px;
  text-align: left;
}

.party-heatmap-cell {
  color: #071007;
  font-weight: 700;
}

.party-heatmap-cell span {
  opacity: 0.72;
}

.heatmap-detail {
  display: grid;
  gap: 8px;
}

.heatmap-legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  align-items: center;
}

.heatmap-legend span {
  height: 18px;
  border: 1px solid var(--line);
}

.heatmap-legend span:nth-child(1) {
  background: rgba(168, 211, 123, 0.08);
}

.heatmap-legend span:nth-child(2) {
  background: rgba(168, 211, 123, 0.49);
}

.heatmap-legend span:nth-child(3) {
  background: rgba(168, 211, 123, 0.9);
}

.heatmap-legend strong {
  color: var(--muted);
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
}

.population-resource-panel {
  position: static;
  height: 100%;
  max-height: none;
  overflow: auto;
}

.population-side-content {
  display: none;
}

.population-side-content.active {
  display: block;
}

.population-resource-panel td:last-child {
  color: var(--accent);
  text-align: right;
}

.dungeon-view .panel {
  max-width: none;
  width: 100%;
}

.dungeon-main-panel {
  display: grid;
  gap: 0;
}

.dungeon-workspace-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  gap: 0;
  align-items: stretch;
  min-height: 0;
  overflow: hidden;
}

.dungeon-main-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.dungeon-graph-panel,
.dungeon-replay-panel {
  min-height: 0;
  overflow: auto;
}

.dungeon-graph-panel {
  display: grid;
}

.dungeon-node-side-panel {
  height: 100%;
  min-height: 0;
  overflow: auto;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 25px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
  color: var(--accent);
}

.panel-head span {
  color: var(--muted);
}

.panel-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.panel-title-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.panel-title-actions h2 {
  flex: 0 1 auto;
}

.panel-help-button,
.wiki-close-button {
  flex: 0 0 auto;
  width: 24px;
  min-width: 24px;
  height: 24px;
  padding: 0;
  border-color: var(--line-hot);
  color: var(--accent);
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

.panel-help-button:hover,
.panel-help-button:focus-visible,
.wiki-close-button:hover,
.wiki-close-button:focus-visible {
  border-color: var(--accent);
  color: #e6f2dc;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(86px, 1fr));
  gap: 4px;
  margin-bottom: 8px;
}

/* Tavern And Population */
.tavern-main-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #080a08;
}

.visitor-grid {
  position: relative;
  width: 100%;
  aspect-ratio: 1672 / 941;
  align-self: start;
  overflow: visible;
  border: 1px solid #4c3c27;
  background: #080706 url("assets/tavern-seats.png") center / 100% 100% no-repeat;
}

.visitor-seat {
  --seat-base-color: #6f592c;
  --seat-progress-color: #ffe49a;
  --seat-glow-color: rgba(241, 210, 125, 0.52);
  position: absolute;
  z-index: 2;
  left: var(--seat-x);
  top: var(--seat-y);
  width: 0;
  height: 0;
}

.visitor-seat-kind-adventurer {
  --seat-base-color: #456884;
  --seat-progress-color: #78a6d1;
  --seat-glow-color: rgba(120, 166, 209, 0.62);
}

.visitor-seat-kind-worker {
  --seat-base-color: #775b2a;
  --seat-progress-color: #d5a85c;
  --seat-glow-color: rgba(213, 168, 92, 0.62);
}

.visitor-seat-kind-traveler {
  --seat-base-color: #743e37;
  --seat-progress-color: #d27767;
  --seat-glow-color: rgba(210, 119, 103, 0.62);
}

.visitor-seat.menu-open {
  z-index: 20;
}

.visitor-seat-button {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: clamp(44px, 5vw, 68px);
  height: clamp(44px, 5vw, 68px);
  padding: 0;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  background: transparent;
  overflow: visible;
  text-transform: none;
}

.visitor-seat-button .cropped-portrait.tavern-seat,
.visitor-seat-button .agent-portrait-missing.tavern-seat,
.visitor-seat-empty-mark {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 4px solid var(--seat-base-color);
  border-radius: 50%;
  background: #111614;
  box-shadow: 0 0 0 2px #151009, 0 0 9px 2px var(--seat-glow-color);
  color: #f7df9a;
  font-size: 22px;
  font-weight: 700;
}

.visitor-seat-progress {
  position: absolute;
  z-index: 2;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  overflow: visible;
  transform: rotate(-90deg);
  pointer-events: none;
}

.visitor-seat-progress circle {
  fill: none;
  stroke: var(--seat-progress-color);
  stroke-width: 5px;
  stroke-linecap: round;
  filter: drop-shadow(0 0 2px var(--seat-glow-color));
  transition: stroke-dasharray 180ms linear;
}

.visitor-seat-button .cropped-portrait.tavern-seat image {
  image-rendering: pixelated;
}

.visitor-seat.selected .visitor-seat-button .cropped-portrait.tavern-seat,
.visitor-seat.menu-open .visitor-seat-button .cropped-portrait.tavern-seat {
  border-color: var(--seat-progress-color);
  box-shadow: 0 0 0 2px #151009, 0 0 14px 4px var(--seat-glow-color);
}

.visitor-seat.selected .visitor-seat-progress circle,
.visitor-seat.menu-open .visitor-seat-progress circle {
  stroke: var(--seat-progress-color);
  filter: drop-shadow(0 0 4px var(--seat-glow-color));
}

.visitor-seat-label {
  position: absolute;
  left: 50%;
  top: calc(100% + 3px);
  max-width: 112px;
  padding: 1px 4px;
  transform: translateX(-50%);
  overflow: hidden;
  border: 1px solid rgba(241, 210, 125, 0.78);
  background: rgba(7, 8, 7, 0.92);
  color: #f7e8bd;
  font-size: 9px;
  line-height: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.visitor-seat-empty .visitor-seat-label {
  color: var(--muted);
}

.visitor-seat-names-hidden .visitor-seat:not(.visitor-seat-empty) .visitor-seat-label {
  display: none;
}

.visitor-seat-cleaning {
  --seat-base-color: #4b504b;
  --seat-progress-color: #7c847c;
  --seat-glow-color: rgba(124, 132, 124, 0.38);
}

.visitor-seat-cleaning .visitor-seat-button {
  cursor: wait;
}

.visitor-seat-cleaning .visitor-seat-empty-mark {
  color: #9da49d;
}

.visitor-seat-arriving .visitor-seat-button {
  animation: visitor-seat-dither-in 1s steps(1, end) both;
}

.visitor-seat-departing .visitor-seat-button {
  animation: visitor-seat-dither-out 1s steps(1, end) forwards;
  pointer-events: none;
}

@keyframes visitor-seat-dither-out {
  0% {
    -webkit-mask-image: linear-gradient(#000, #000);
    mask-image: linear-gradient(#000, #000);
  }
  20% {
    -webkit-mask: radial-gradient(circle, transparent 1px, #000 1px) 0 0 / 5px 5px;
    mask: radial-gradient(circle, transparent 1px, #000 1px) 0 0 / 5px 5px;
  }
  40% {
    -webkit-mask: repeating-conic-gradient(#000 0 75%, transparent 0 100%) 0 0 / 6px 6px;
    mask: repeating-conic-gradient(#000 0 75%, transparent 0 100%) 0 0 / 6px 6px;
  }
  60% {
    -webkit-mask: repeating-conic-gradient(#000 0 25%, transparent 0 50%) 0 0 / 6px 6px;
    mask: repeating-conic-gradient(#000 0 25%, transparent 0 50%) 0 0 / 6px 6px;
  }
  80% {
    -webkit-mask: radial-gradient(circle, #000 1px, transparent 1px) 0 0 / 5px 5px;
    mask: radial-gradient(circle, #000 1px, transparent 1px) 0 0 / 5px 5px;
  }
  100% {
    -webkit-mask-image: linear-gradient(transparent, transparent);
    mask-image: linear-gradient(transparent, transparent);
  }
}

@keyframes visitor-seat-dither-in {
  0% {
    -webkit-mask-image: linear-gradient(transparent, transparent);
    mask-image: linear-gradient(transparent, transparent);
  }
  20% {
    -webkit-mask: radial-gradient(circle, #000 1px, transparent 1px) 0 0 / 5px 5px;
    mask: radial-gradient(circle, #000 1px, transparent 1px) 0 0 / 5px 5px;
  }
  40% {
    -webkit-mask: repeating-conic-gradient(#000 0 25%, transparent 0 50%) 0 0 / 6px 6px;
    mask: repeating-conic-gradient(#000 0 25%, transparent 0 50%) 0 0 / 6px 6px;
  }
  60% {
    -webkit-mask: repeating-conic-gradient(#000 0 75%, transparent 0 100%) 0 0 / 6px 6px;
    mask: repeating-conic-gradient(#000 0 75%, transparent 0 100%) 0 0 / 6px 6px;
  }
  80% {
    -webkit-mask: radial-gradient(circle, transparent 1px, #000 1px) 0 0 / 5px 5px;
    mask: radial-gradient(circle, transparent 1px, #000 1px) 0 0 / 5px 5px;
  }
  100% {
    -webkit-mask-image: linear-gradient(#000, #000);
    mask-image: linear-gradient(#000, #000);
  }
}

.visitor-seat-menu {
  position: absolute;
  z-index: 30;
  left: clamp(29px, 3vw, 40px);
  top: -34px;
  display: grid;
  gap: 4px;
  width: 170px;
  padding: 6px;
  border: 2px solid #f1d27d;
  background: rgba(10, 13, 10, 0.98);
  box-shadow: 3px 3px 0 #050605, 0 0 12px rgba(0, 0, 0, 0.85);
  color: var(--text);
}

.visitor-seat-menu[hidden] {
  display: none;
}

.visitor-seat-menu > strong {
  overflow: hidden;
  color: var(--accent);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visitor-seat-menu > span {
  color: var(--muted);
  font-size: 10px;
}

.visitor-seat-menu > button {
  width: 100%;
  text-align: left;
}

.visitor-seat-policy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(82px, auto);
  gap: 4px;
  align-items: center;
  margin-top: 4px;
}

.visitor-seat-policy select {
  min-width: 0;
  width: 100%;
}

.visitor-seat-policy span {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 10px;
}

.visitor-seat-menu button.danger {
  border-color: var(--bad);
  color: var(--bad);
}

.visitor-description,
.codex-record-description {
  margin: 8px 0;
  color: var(--text);
  line-height: 1.45;
}

.visitor-offers {
  margin-top: 10px;
  border-top: 1px solid var(--line);
}

.visitor-offer-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}

.visitor-offer-row > div,
.visitor-offer-row span {
  display: block;
  min-width: 0;
}

.visitor-offer-row span,
.visitor-dismiss-summary {
  color: var(--muted);
  font-size: 10px;
}

.visitor-offer-row.resolved {
  opacity: 0.65;
}

.visitor-dismiss-summary {
  margin-top: 10px;
  color: var(--warn);
}

#upgradeTavernBtn {
  position: relative;
}

.tavern-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.tavern-panel-title h2 {
  flex: 0 0 auto;
}

.tavern-panel-title #upgradeTavernBtn {
  flex: 0 0 auto;
}

.tavern-seat-name-toggle {
  width: 25px;
  min-width: 25px;
  height: 25px;
  padding: 0;
  font-weight: 700;
}

.tavern-seat-name-toggle.active {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.tavern-upgrade-panel {
  position: absolute;
  z-index: 25;
  left: 0;
  top: calc(100% + 4px);
  display: none;
  min-width: 310px;
  max-width: 390px;
  padding: 8px;
  border: 1px solid var(--accent);
  background: rgba(8, 18, 22, 0.97);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  color: var(--text);
  pointer-events: none;
  text-align: left;
  text-transform: none;
  line-height: 1.35;
  white-space: normal;
}

#upgradeTavernBtn:hover > .tavern-upgrade-panel,
#upgradeTavernBtn:focus > .tavern-upgrade-panel,
#upgradeTavernBtn:focus-within > .tavern-upgrade-panel {
  display: grid;
  gap: 8px;
}

.tavern-upgrade-panel .tavern-upgrade-title {
  color: var(--warn);
  text-transform: uppercase;
}

.tavern-upgrade-panel span {
  color: var(--text);
  font-size: 11px;
}

.tavern-upgrade-section {
  display: grid;
  gap: 2px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.tavern-upgrade-section > strong {
  margin-bottom: 2px;
  color: var(--accent);
  font-size: 10px;
  text-transform: uppercase;
}

.tavern-upgrade-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
}

.tavern-upgrade-row > b {
  color: var(--warn);
  font-weight: 700;
  text-align: right;
}

.tavern-upgrade-row.affordable,
.tavern-upgrade-row.affordable > span,
.tavern-upgrade-row.affordable > b {
  color: var(--ok);
}

.tavern-upgrade-row.unaffordable,
.tavern-upgrade-row.unaffordable > span,
.tavern-upgrade-row.unaffordable > b {
  color: var(--bad);
}

.tavern-upgrade-note {
  padding-top: 6px;
  border-top: 1px solid var(--line);
  color: var(--muted) !important;
}

#partyRows td button {
  margin: 1px;
}

.party-members-cell {
  min-width: 112px;
  white-space: nowrap;
}

.party-member-slot {
  display: inline-flex;
  vertical-align: middle;
}

#partyRows td .party-member-portrait {
  width: 30px;
  height: 30px;
  margin: 1px;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  border-color: var(--line);
  background: #090d09;
}

#partyRows td .party-member-portrait:hover,
#partyRows td .party-member-portrait.active {
  border-color: var(--accent);
}

.char-portrait.party-member {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 50%;
}

.char-portrait.party-member.missing {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 10px;
}

.party-member-menu,
.party-command-menu {
  position: fixed;
  z-index: 30;
  display: grid;
  gap: 2px;
  min-width: 84px;
  padding: 4px;
  border: 1px solid var(--warn);
  background: rgba(8, 12, 8, 0.98);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
}

.party-member-menu button,
.party-command-menu button {
  width: 100%;
  text-align: left;
}

#partyRows tr.selected-party-row td {
  border-top-color: var(--warn);
  border-bottom-color: var(--warn);
  background: rgba(216, 178, 93, 0.08);
}

#partyRows tr.selected-party-row td:first-child {
  border-left-color: var(--warn);
}

#partyRows tr.selected-party-row td:last-child {
  border-right-color: var(--warn);
}

#partyRows tr.selected-party-row.focused-party-row td {
  border-top-color: var(--accent);
  border-bottom-color: var(--accent);
  background: rgba(168, 211, 123, 0.08);
}

#partyRows tr.selected-party-row.focused-party-row td:first-child {
  border-left-color: var(--accent);
}

#partyRows tr.selected-party-row.focused-party-row td:last-child {
  border-right-color: var(--accent);
}

/* Roster And Party Management */
.party-select-cell {
  cursor: pointer;
}

.party-select-cell:hover {
  color: var(--accent);
  background: rgba(168, 211, 123, 0.06);
}

.party-name-cell {
  vertical-align: middle;
}

.party-name-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.party-recovery-controls {
  display: flex;
  gap: 2px;
  margin-top: 3px;
}

#partyRows td .party-recovery-toggle {
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  color: var(--muted);
  line-height: 18px;
  text-align: center;
}

#partyRows td .party-recovery-toggle[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(168, 211, 123, 0.15);
}

.metric {
  border: 1px solid var(--line);
  background: #111711;
  padding: 5px;
}

.metric-label {
  color: var(--muted);
  text-transform: uppercase;
}

.metric-value {
  margin-top: 2px;
  color: #eff8e9;
  font-size: 13px;
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.workshop-section {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.workshop-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 240px));
  gap: 6px;
  margin-bottom: 8px;
}

.workshop-slot {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 7px;
  min-height: 84px;
  padding: 6px;
  border: 1px solid var(--line);
  background: rgba(8, 12, 15, 0.72);
}

.workshop-slot.unmanned {
  opacity: 0.58;
}

.workshop-slot.manned {
  border-color: var(--accent);
}

.workshop-slot.disabled {
  border-style: dashed;
}

.workshop-slot-toggles {
  position: absolute;
  z-index: 3;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 3px;
}

.workshop-square-toggle {
  width: 22px;
  height: 22px;
  min-width: 22px;
  padding: 0;
  color: var(--muted);
  line-height: 20px;
  text-align: center;
}

.workshop-square-toggle[aria-pressed="true"] {
  border-color: var(--accent);
  background: rgba(168, 211, 123, 0.14);
  color: var(--accent);
}

.workshop-recipe-picker {
  position: relative;
  align-self: start;
}

.workshop-recipe-image-button {
  display: block;
  width: 68px;
  height: 68px;
  padding: 0;
  overflow: hidden;
  border-color: var(--line-strong);
  background: #0b1012;
}

.workshop-recipe-image-button:hover,
.workshop-recipe-image-button[aria-expanded="true"] {
  border-color: var(--accent);
}

.workshop-recipe-image {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("assets/resources.png");
  background-position:
    calc(var(--resource-atlas-column) * 100% / 6)
    calc(var(--resource-atlas-row) * 100% / 6);
  background-repeat: no-repeat;
  background-size: 700% 700%;
  image-rendering: pixelated;
}

.workshop-slot-body {
  min-width: 0;
  padding-top: 24px;
}

.workshop-recipe-name {
  min-height: 16px;
  overflow-wrap: anywhere;
}

.workshop-meter-label {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.workshop-slot .meter {
  height: 6px;
  margin: 2px 0 0;
}

.workshop-xp-meter span {
  background: var(--warn);
}

.workshop-recipe-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(104px, 1fr));
  gap: 4px;
  width: min(240px, calc(100vw - 48px));
  padding: 6px;
  border: 1px solid var(--accent);
  background: rgba(8, 18, 22, 0.98);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}

.workshop-recipe-menu[hidden] {
  display: none;
}

.workshop-recipe-choice {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-height: 40px;
  padding: 3px;
  text-align: left;
}

.workshop-recipe-choice .workshop-recipe-image.small {
  width: 34px;
  height: 34px;
}

.workshop-recipe-choice .recipe-xp-panel {
  top: calc(100% + 3px);
  left: 0;
}

.recipe-hover {
  position: relative;
  color: var(--accent);
  cursor: help;
}

.recipe-xp-panel {
  position: absolute;
  z-index: 20;
  left: 0;
  top: calc(100% + 4px);
  display: none;
  min-width: 270px;
  max-width: 340px;
  padding: 8px;
  border: 1px solid var(--accent);
  background: rgba(8, 18, 22, 0.96);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  color: var(--text);
  text-transform: none;
  line-height: 1.35;
  white-space: normal;
}

.recipe-hover:hover > .recipe-xp-panel,
.recipe-hover:focus-within > .recipe-xp-panel {
  display: grid;
  gap: 3px;
}

.recipe-xp-panel strong {
  color: var(--warn);
  text-transform: uppercase;
}

.recipe-xp-panel .meter.small {
  width: 100%;
  height: 6px;
}

.recipe-milestone-summary {
  display: grid;
  gap: 3px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
  color: var(--accent);
}

.skill-detail-panel {
  position: absolute;
  z-index: 24;
  left: calc(100% + 6px);
  right: auto;
  top: 0;
  display: none;
  min-width: 280px;
  max-width: 360px;
  padding: 8px;
  border: 1px solid var(--accent);
  background: rgba(8, 18, 22, 0.97);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  color: var(--text);
  text-align: left;
  text-transform: none;
  line-height: 1.35;
  white-space: normal;
}

.progression-node-wrap.detail-left > .skill-detail-panel,
.roster-detail-panel .progression-node-wrap > .skill-detail-panel,
.tavern-detail-panel .progression-node-wrap > .skill-detail-panel {
  right: calc(100% + 6px);
  left: auto;
}

.skill-node:hover > .skill-detail-panel {
  display: grid;
  gap: 3px;
}

.progression-node-wrap.portal-detail-active > .skill-detail-panel {
  display: none;
}

.progression-detail-overlay {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
}

.skill-detail-panel strong {
  color: var(--warn);
  text-transform: uppercase;
}

.skill-detail-panel > span {
  color: var(--text);
  font-size: 11px;
  text-transform: none;
}

.skill-detail-panel .skill-effect-row {
  display: grid;
  grid-template-columns: minmax(88px, 0.8fr) minmax(130px, 1fr);
  gap: 6px;
  padding-top: 3px;
  border-top: 1px solid rgba(106, 129, 121, 0.35);
}

.skill-detail-panel .skill-effect-row span:first-child {
  color: var(--muted);
}

.recipe-unlock-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  padding-top: 3px;
  border-top: 1px solid rgba(106, 129, 121, 0.35);
}

.recipe-unlock-row.unlocked {
  color: var(--ok);
}

.recipe-unlock-row.locked {
  color: var(--muted);
}

.worker-assignment-controls {
  display: grid;
  grid-template-columns: repeat(2, 24px);
  gap: 3px;
}

.worker-assignment-controls button {
  min-width: 0;
  padding: 2px 0;
}

.wage-controls {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.wage-control-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
}

.wage-control-row button {
  min-width: 0;
  padding: 2px 0;
}

.meter {
  height: 8px;
  margin: 4px 0;
  border: 1px solid var(--line);
  background: #080c10;
}

.meter span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--ok));
}

.roster-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  gap: 0;
  align-items: stretch;
  height: calc(100vh - 68px);
  max-height: calc(100vh - 68px);
  min-height: 0;
  overflow: hidden;
}

.roster-main-panel,
.roster-detail-panel {
  height: calc(100vh - 68px);
  max-height: calc(100vh - 68px);
  min-height: 0;
  overflow: hidden;
}

.roster-main-panel {
  display: flex;
  flex-direction: column;
}

.roster-main-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(360px, 1.1fr);
  gap: 0;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.roster-party-column,
.roster-character-column,
.roster-detail-panel {
  display: flex;
  flex-direction: column;
}

.roster-party-column,
.roster-character-column {
  min-height: 0;
  overflow: hidden;
}

.roster-party-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 4px;
}

.roster-party-table-scroll table {
  table-layout: fixed;
}

.roster-party-table-scroll th:nth-child(1),
.roster-party-table-scroll td:nth-child(1) {
  width: 20%;
}

.roster-party-table-scroll th:nth-child(2),
.roster-party-table-scroll td:nth-child(2) {
  width: 20%;
}

.roster-party-table-scroll th:nth-child(3),
.roster-party-table-scroll td:nth-child(3) {
  width: 38%;
}

.roster-party-table-scroll th:nth-child(4),
.roster-party-table-scroll td:nth-child(4) {
  width: 22%;
}

.roster-party-table-scroll th,
.roster-party-table-scroll td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.roster-party-table-scroll th:nth-child(2),
.roster-party-table-scroll td:nth-child(2),
.roster-party-table-scroll th:nth-child(4),
.roster-party-table-scroll td:nth-child(4) {
  white-space: nowrap;
}

.roster-party-table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #121812;
}

.roster-filter-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 0 0 6px;
}

.roster-filter-controls .local-tab-button {
  flex: 0 0 auto;
  min-width: 0;
  padding: 3px 8px;
}

.roster-detail-panel {
  position: static;
}

/* Temple Shards */
.temple-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(300px, 0.8fr);
  gap: 0;
  align-items: stretch;
}

.temple-board-panel {
  min-height: calc(100vh - 68px);
}

.temple-side-panel {
  position: sticky;
  top: 68px;
}

.temple-stone-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 3px;
  margin-bottom: 8px;
}

.temple-stone-button.active {
  border-color: var(--warn);
  color: var(--warn);
  box-shadow: inset 0 -2px 0 var(--warn);
}

.temple-matrix {
  position: relative;
  width: min(100%, calc((100vh - 278px) * 1.5));
  aspect-ratio: 3 / 2;
  min-height: 0;
  max-height: calc(100vh - 278px);
  margin: 0 auto 6px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: #121b26;
}

.temple-board-surface {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.temple-board-grid {
  background:
    linear-gradient(90deg, rgba(112, 166, 217, 0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(112, 166, 217, 0.035) 1px, transparent 1px),
    #121b26;
  background-size: 18px 18px;
}

.temple-board-surface.altar-triangle {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: url("assets/altar-triangle.png") center / 100% 100% no-repeat;
}

.temple-board-surface.altar-triangle .temple-socket {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.temple-board-surface.altar-triangle .temple-socket.connected {
  border-color: transparent;
  box-shadow: none;
}

.temple-board-surface.altar-triangle .temple-socket.drop-target {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.temple-board-surface.altar-triangle .temple-socket-title,
.temple-board-surface.altar-triangle .temple-socket .detail-line,
.temple-board-surface.altar-triangle .empty-socket {
  display: none;
}

.temple-board-surface.altar-triangle .temple-socket-pad {
  min-height: 100%;
  border-color: transparent;
  background: transparent;
}

.temple-socket {
  position: absolute;
  z-index: 2;
  width: clamp(82px, 15.2%, 132px);
  min-height: clamp(76px, 16%, 116px);
  transform: translate(-50%, -50%);
  border: 2px solid var(--line);
  background: color-mix(in srgb, var(--socket-color, rgba(13, 18, 14, 0.92)) 76%, rgba(5, 8, 7, 0.72));
  padding: 5px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.42);
}

.temple-socket.connected {
  border-color: var(--warn);
  box-shadow: inset 0 0 0 1px rgba(216, 178, 93, 0.32);
}

.temple-socket.drop-target {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.temple-socket-title {
  margin-bottom: 4px;
  color: #081008;
  font-size: 10px;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.18);
}

.temple-socket .detail-line {
  font-size: 9px;
  line-height: 11px;
  color: rgba(5, 10, 6, 0.82);
}

.temple-slot-color {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border: 1px solid #0b0f0c;
  vertical-align: -1px;
}

.temple-socket-pad {
  display: grid;
  place-items: center;
  min-height: clamp(44px, 8vw, 58px);
  border: 1px solid rgba(6, 10, 8, 0.65);
  background: rgba(5, 8, 7, 0.78);
}

.empty-socket {
  color: rgba(211, 221, 206, 0.48);
  text-transform: uppercase;
}

.temple-help {
  position: absolute;
  z-index: 3;
  left: 8px;
  top: 8px;
  color: #70d7dd;
  font-size: 10px;
  line-height: 12px;
  text-transform: uppercase;
}

.temple-link-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.temple-link {
  stroke: var(--line-a);
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.temple-link.active {
  stroke-width: 5;
  filter: drop-shadow(0 0 3px var(--line-b));
}

.temple-link.inactive {
  opacity: 0.18;
}

.temple-link-hit {
  stroke: transparent;
  stroke-width: 11;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
}

.temple-link-hit:hover + .temple-link {
  opacity: 1;
  stroke-width: 6;
}

.shard-grid {
  display: grid;
  grid-template-columns: repeat(10, 58px);
  grid-template-rows: repeat(2, 68px);
  gap: 3px;
  border: 1px solid var(--line);
  background: #0d1318;
  padding: 2px;
  overflow-x: auto;
}

.shard-grid.drop-target {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.shard-inventory-cell {
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 2px;
  min-height: 66px;
  border: 1px solid #95a2a8;
  background: #4b4d4d;
  padding: 2px;
}

.shard-inventory-cell.selected {
  border-color: var(--warn);
  box-shadow: inset 0 0 0 1px rgba(216, 178, 93, 0.4);
}

.shard-inventory-cell.empty {
  background: #3f4241;
}

.shard-inventory-cell.drop-target {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
  background: #536057;
}

.empty-inventory-slot {
  place-self: center;
  color: rgba(211, 221, 206, 0.28);
  font-size: 10px;
}

.shard-token {
  position: relative;
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #d7f2d7;
  background: #050705;
  color: #d8ffd8;
  image-rendering: pixelated;
}

.shard-token.equipped {
  width: 46px;
  height: 46px;
}

.shard-token.selected {
  border-color: var(--warn);
  box-shadow: 0 0 0 2px rgba(216, 178, 93, 0.28);
}

.shard-token.unfound {
  opacity: 0.35;
  filter: grayscale(1);
  cursor: pointer;
}

.shard-token.dragging {
  opacity: 0.5;
}

.shard-glyph {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid currentColor;
  background:
    radial-gradient(circle at 50% 50%, rgba(168, 211, 123, 0.26), transparent 58%),
    #071007;
  font-size: 16px;
  font-weight: 700;
}

.shard-dots {
  position: absolute;
  left: 4px;
  top: 5px;
  display: grid;
  gap: 3px;
}

.shard-dots span {
  width: 6px;
  height: 6px;
  border: 1px solid #101010;
  background: transparent;
}

.shard-dots span.can-slot {
  border-color: #101010;
  background: var(--dot-color);
}

.shard-dots span.affected {
  border-color: var(--dot-color);
  background: transparent;
}

.shard-token-name {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 1px;
  overflow: hidden;
  color: #9ad8de;
  font-size: 8px;
  line-height: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
}

.shard-meta,
.temple-buff-line {
  color: var(--muted);
  font-size: 11px;
}

.temple-buffs {
  display: grid;
  gap: 4px;
}

.temple-buff-line {
  border: 1px solid var(--line);
  background: #101611;
  padding: 5px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}

.dungeon-info-controls {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.time-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
  align-items: end;
}

.map-toolbar {
  display: flex;
  align-items: center;
  min-height: 25px;
  padding: 8px;
  border-bottom: 1px solid var(--line);
}

.map-toolbar .panel-help-button {
  margin-left: auto;
}

.map-toolbar label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  text-transform: uppercase;
  white-space: nowrap;
}

.map-toolbar select {
  width: 180px;
}

/* Overland Map */
.map-layout {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(320px, 0.45fr);
  gap: 0;
}

.map-tab-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  gap: 0;
  align-items: stretch;
  min-height: calc(100vh - 68px);
}

.map-panel,
.map-side-panel {
  min-height: 0;
  padding: 0;
}

.map-panel {
  display: flex;
  flex-direction: column;
}

.map-side-panel {
  position: sticky;
  top: 68px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 68px);
  overflow: hidden;
}

.local-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  margin-bottom: 0;
  border: 1px solid var(--line);
}

.local-tab-button {
  border-width: 0 1px 0 0;
}

.local-tab-button:last-child {
  border-right-width: 0;
}

.local-tab-button.active {
  color: var(--accent);
  background: #172017;
  box-shadow: inset 0 -2px 0 var(--accent);
}

.local-tab-panel {
  display: none;
}

.local-tab-panel.active {
  display: block;
}

.map-side-panel .local-tab-panel.active {
  min-height: 0;
  overflow: auto;
  padding: 8px;
}

.map-side-panel .local-tabs {
  border-width: 0 0 1px;
}

.dungeon-side-tabs,
.population-local-tabs,
.roster-detail-tabs,
.tavern-detail-tabs {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: -8px -8px 0;
  border-width: 0 0 1px;
  background: #0d120e;
}

.dungeon-party-tabs .local-tab-button,
.dungeon-side-tabs .local-tab-button,
.population-local-tabs .local-tab-button,
.roster-detail-tabs .local-tab-button,
.tavern-detail-tabs .local-tab-button {
  min-width: 96px;
  padding: 0 18px;
}

.dungeon-party-tabs {
  display: flex;
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-width: 0 0 1px;
  background: #0d120e;
}

.dungeon-party-tabs .local-tab-button {
  min-width: 112px;
}

.dungeon-party-tabs span {
  color: var(--muted);
}

.dungeon-side-tabs {
  width: 100%;
  margin: 0 0 8px;
  border-width: 0 0 1px;
}

.dungeon-node-side-panel .local-tab-panel.active {
  display: block;
}

.dungeon-node-side-panel .dungeon-info-controls {
  grid-template-columns: 1fr;
}

.population-local-tabs {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  border-width: 1px 1px 0;
}

.population-main > .local-tab-panel > .panel {
  border-top-width: 0;
}

.population-main > .local-tab-panel {
  min-height: 0;
  overflow: hidden;
}

.population-main > .local-tab-panel.active {
  display: flex;
  flex-direction: column;
}

.population-main > .local-tab-panel > .panel {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.population-upgrades-panel > .panel {
  display: flex;
  flex-direction: column;
}

.population-upgrades-panel #workshopUpgradeGraph {
  display: flex;
  flex: 1;
  min-height: 0;
}

.population-upgrades-panel #workshopUpgradeGraph > .progression-graph-canvas {
  flex: 1;
  width: 100%;
  height: auto;
  min-height: 0;
}

.overland-map {
  position: relative;
  flex: 1;
  height: auto;
  min-height: 380px;
  border: 1px solid var(--line);
  border-width: 1px 0 0;
  overflow: hidden;
  background: #080b08;
  cursor: grab;
  touch-action: none;
}

.overland-map.dragging {
  cursor: grabbing;
}

.map-world {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--map-world-width, 1024px);
  height: var(--map-world-height, 1024px);
  transform-origin: 0 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: var(--map-bg-image, url("assets/map-bg.png")) 0 0 / var(--map-world-width, 1024px) var(--map-world-height, 1024px) no-repeat;
}

.map-context-menu {
  position: absolute;
  z-index: 6;
  display: grid;
  gap: 3px;
  min-width: 84px;
  padding: 4px;
  border: 1px solid var(--accent);
  background: #0c110d;
  box-shadow: 2px 2px 0 #050805;
}

.map-context-menu button {
  justify-content: flex-start;
  width: 100%;
}

.map-route {
  position: absolute;
  height: 1px;
  transform-origin: 0 0;
  background: repeating-linear-gradient(90deg, #3a4b3d 0 5px, transparent 5px 10px);
}

.map-actors {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.map-poi,
.map-actor {
  position: absolute;
  transform: translate(-50%, -50%);
}

.map-poi {
  min-width: 84px;
  height: auto;
  padding: 5px;
  border: 1px solid var(--line);
  background: rgba(16, 22, 17, 0.9);
  color: var(--muted);
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}

.map-poi.tavern {
  border-color: var(--accent);
  color: var(--accent);
}

.map-poi.selected {
  border-color: var(--warn);
  color: #fff2c9;
  box-shadow: 0 0 0 1px rgba(216, 178, 93, 0.42);
}

.location-detail {
  min-height: 132px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  background: rgba(14, 19, 15, 0.92);
  padding: 8px;
}

.detail-title {
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.poi-title-image {
  display: block;
  width: 100%;
  max-height: 150px;
  object-fit: cover;
  object-position: center;
  margin-bottom: 7px;
  border: 1px solid var(--line);
  image-rendering: pixelated;
  background: rgba(8, 11, 9, 0.85);
}

.detail-line {
  margin-bottom: 4px;
  color: var(--muted);
}

.location-detail button {
  margin-top: 5px;
}

.character-detail {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(14, 19, 15, 0.92);
  padding: 8px;
}

.character-detail > .local-tab-panel.active {
  height: 100%;
  min-height: 0;
  overflow: auto;
}

.character-detail > .local-tab-panel.active[data-roster-detail-panel="skill1"],
.character-detail > .local-tab-panel.active[data-roster-detail-panel="skill2"],
.character-detail > .local-tab-panel.active[data-tavern-detail-panel="skill1"],
.character-detail > .local-tab-panel.active[data-tavern-detail-panel="skill2"] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.detail-hero-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: start;
  margin-bottom: 8px;
}

.character-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  align-content: start;
  flex: 1 1 auto;
  gap: 6px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 4px;
}

.character-grid.minimized {
  grid-template-columns: repeat(auto-fill, 82px);
  align-items: start;
}

.character-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px;
  height: auto;
  min-height: 94px;
  padding: 6px;
  text-align: left;
  text-transform: none;
  background: rgba(13, 18, 14, 0.9);
}

.character-card.selected {
  border-color: var(--warn);
  box-shadow: inset 0 0 0 1px rgba(216, 178, 93, 0.45);
}

.character-card.compact {
  position: relative;
  display: block;
  width: 82px;
  min-height: 88px;
  padding: 5px;
  text-align: center;
}

.character-card.compact .char-portrait.card {
  width: 68px;
  height: 68px;
}

.compact-name,
.compact-state {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 12px;
}

.compact-name {
  color: var(--accent);
  margin-top: 3px;
  font-size: 10px;
}

.compact-state {
  position: absolute;
  top: 4px;
  right: 4px;
  border: 1px solid var(--line);
  background: rgba(11, 15, 12, 0.88);
  color: var(--warn);
  padding: 0 2px;
  font-size: 9px;
}

.character-card-body {
  min-width: 0;
}

.character-name {
  color: var(--accent);
  text-transform: uppercase;
}

.character-meta {
  color: var(--muted);
  margin-top: 2px;
}

.character-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 6px;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.char-portrait {
  display: inline-block;
  border: 1px solid var(--line);
  background-image: url("assets/chars-atlas.png");
  background-size: 700% 700%;
  image-rendering: pixelated;
  background-repeat: no-repeat;
  box-shadow: 1px 1px 0 var(--shadow);
}

.char-portrait.card {
  width: 68px;
  height: 68px;
}

.char-portrait.large {
  width: 96px;
  height: 96px;
}

.cropped-portrait {
  display: inline-block;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: #111614;
  box-shadow: 1px 1px 0 var(--shadow);
}

.cropped-portrait image {
  image-rendering: pixelated;
}

.cropped-portrait.card {
  width: 68px;
  height: 68px;
}

.cropped-portrait.large {
  width: 96px;
  height: 96px;
}

.dev-view,
.dev-main,
.dev-view [data-dev-local-panel="agents"],
.dev-view [data-dev-local-panel="xp-forecast"],
#devAgentWorkspace,
#devXpForecastWorkspace {
  min-height: 0;
  height: 100%;
}

.dev-xp-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  height: calc(100vh - 94px);
  min-height: 0;
}

.dev-xp-chart-panel,
.dev-xp-controls-panel {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.dev-xp-chart-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.dev-xp-chart-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 4px 2px 9px;
  color: var(--muted);
}

.dev-xp-chart-summary b {
  color: var(--accent);
}

.dev-xp-chart-wrap {
  min-height: 360px;
}

.dev-xp-chart {
  display: block;
  width: 100%;
  height: min(68vh, 680px);
}

.dev-xp-grid {
  stroke: #334039;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.dev-xp-grid-vertical {
  stroke-dasharray: 3 5;
}

.dev-xp-axis-label,
.dev-xp-axis-title {
  fill: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
}

.dev-xp-axis-title {
  fill: var(--text);
  text-transform: uppercase;
}

.dev-xp-series {
  fill: none;
  stroke: var(--warn);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: square;
  vector-effect: non-scaling-stroke;
}

.dev-xp-endpoint {
  fill: var(--accent);
  stroke: #0b100c;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.dev-xp-controls {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.dev-xp-controls input,
.dev-xp-controls select {
  width: 100%;
}

.dev-xp-metrics {
  table-layout: fixed;
}

.dev-xp-metrics th {
  width: 42%;
}

.dev-xp-metrics td {
  color: var(--accent);
  text-align: right;
}

@media (max-width: 900px) {
  .dev-xp-layout {
    grid-template-columns: 1fr;
    height: auto;
  }

  .dev-xp-chart {
    height: 460px;
  }
}

.dev-main {
  display: flex;
  flex-direction: column;
}

.dev-local-tabs {
  flex: 0 0 auto;
}

.dev-agent-toolbar {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  padding: 5px 0;
  overflow-x: auto;
}

.dev-agent-toolbar button {
  white-space: nowrap;
}

.dev-agent-toolbar .primary {
  border-color: var(--accent);
  color: var(--accent);
}

.dev-agent-status {
  min-width: 220px;
  margin-left: auto;
  color: var(--muted);
  text-align: right;
}

.dev-agent-layout {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(430px, 2.2fr) minmax(260px, 1fr);
  gap: 7px;
  height: calc(100% - 42px);
  min-height: 0;
}

.dev-agent-browser,
.dev-agent-editor,
.dev-agent-inspector {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.dev-agent-filters {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px;
  margin-bottom: 6px;
}

.dev-agent-list,
.dev-agent-form,
.dev-agent-inspector {
  overflow-y: auto;
}

.dev-agent-list-row {
  display: block;
  width: 100%;
  padding: 6px;
  text-align: left;
  text-transform: none;
}

.dev-agent-list-row + .dev-agent-list-row {
  margin-top: 3px;
}

.dev-agent-list-row span,
.dev-agent-list-row small,
.dev-agent-preview-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dev-agent-list-row small,
.dev-agent-preview-card small {
  margin-top: 2px;
  color: var(--muted);
}

.dev-agent-list-row.active {
  border-color: var(--warn);
  color: var(--accent);
}

.dev-agent-form fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 7px;
  border: 1px solid var(--line);
  padding: 7px;
}

.dev-agent-form legend {
  color: var(--accent);
  text-transform: uppercase;
}

.dev-agent-form label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
  color: var(--muted);
}

.dev-agent-form input,
.dev-agent-form select,
.dev-agent-form textarea {
  width: 100%;
  min-width: 0;
}

.dev-agent-form textarea,
.dev-agent-form fieldset > label:has(textarea),
.dev-agent-form fieldset > .dev-agent-number-grid,
.dev-agent-check {
  grid-column: 1 / -1;
}

.dev-agent-check {
  flex-direction: row !important;
  align-items: center;
}

.dev-agent-check input {
  width: auto;
}

.dev-agent-number-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 5px;
}

.dev-agent-preview-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin-bottom: 8px;
}

.dev-agent-preview-card strong {
  display: block;
  color: var(--accent);
  text-transform: uppercase;
}

.dev-agent-stat-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  margin-bottom: 8px;
}

.dev-agent-stat-preview span {
  border-bottom: 1px dotted var(--line);
  padding: 2px 0;
  color: var(--muted);
}

.dev-agent-stat-preview b {
  float: right;
  color: var(--text);
}

.dev-agent-validation {
  border: 1px solid var(--line);
  padding: 7px;
}

.dev-agent-validation.valid { border-color: var(--ok); }
.dev-agent-validation.invalid { border-color: var(--bad); }
.dev-agent-validation ul { margin: 4px 0 0; padding-left: 18px; }
.dev-agent-inspector pre { max-height: 320px; overflow: auto; white-space: pre-wrap; }

.combat-strategy-controls {
  margin: 8px 0;
  border: 1px solid var(--line);
  padding: 6px;
}

.combat-strategy-controls h3 { margin: 0 0 5px; }
.combat-strategy-controls label { display: grid; grid-template-columns: 72px 28px 1fr; align-items: center; gap: 5px; color: var(--muted); }
.combat-strategy-controls input { width: 100%; }
.agent-portrait-missing { display: inline-grid; place-items: center; width: 68px; height: 68px; border: 1px solid var(--line); color: var(--muted); background: #111614; }
.agent-portrait-missing.large { width: 96px; height: 96px; }

@media (max-width: 1050px) {
  .dev-agent-layout { grid-template-columns: 210px minmax(380px, 1fr); }
  .dev-agent-inspector { grid-column: 1 / -1; max-height: 300px; }
}

.skill-tree-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 7px;
  min-height: 0;
  margin-top: 10px;
}

.skill-tree {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--line);
  background: rgba(12, 16, 13, 0.82);
  padding: 6px;
}

.skill-tree-title {
  margin-bottom: 5px;
  color: var(--accent);
  text-transform: uppercase;
}

.skill-node {
  display: grid;
  grid-template-columns: 1fr auto;
  width: 100%;
  height: auto;
  min-height: 25px;
  margin-top: 3px;
  text-align: left;
  gap: 6px;
}

.skill-node > span:last-child:not(.skill-detail-panel) {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.skill-node.learned {
  border-color: var(--accent);
}

.progression-graph {
  position: relative;
  min-height: 220px;
  margin-top: 6px;
  border: 1px solid #26322b;
  background: rgba(12, 17, 22, 0.62);
  overflow: hidden;
}

.progression-graph-canvas {
  height: 260px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}

.progression-graph-canvas-inner {
  position: relative;
  transform-origin: 0 0;
}

.dragging .progression-graph-canvas,
.progression-graph-canvas.dragging {
  cursor: grabbing;
}

.skill-tree .progression-graph {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.skill-tree .progression-graph-canvas {
  height: auto;
  overflow: hidden;
}

.progression-link-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.progression-link {
  stroke: #667065;
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}

.progression-node-wrap {
  position: absolute;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
}

.progression-node-wrap.canvas-node-box {
  display: grid;
  place-items: center;
  transform: none;
}

.progression-node {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  width: 48px;
  min-height: 48px;
  height: 48px;
  margin: 0;
  padding: 2px;
  background: #101611;
  box-shadow: 2px 2px 0 #080b09;
  text-align: center;
}

.progression-node.available {
  border-color: var(--warn);
}

.progression-node.locked {
  opacity: 0.55;
}

.progression-node.maxed {
  border-color: var(--ok);
}

.progression-node-icon {
  color: #8c978d;
  font-size: 12px;
  line-height: 13px;
}

.canvas-node-box .progression-node.with-image {
  width: min(calc(100% - 4px), 60px);
  height: min(calc(100% - 4px), 76px);
}

.progression-node-image {
  display: block;
  width: 42px;
  height: 42px;
  border: 1px solid #26322b;
  background: #0b100d;
  image-rendering: pixelated;
}

.progression-node.with-image .progression-node-label {
  max-width: 56px;
}

.progression-node-rank {
  color: #63a8d6;
  font-size: 10px;
  line-height: 11px;
}

.progression-node .progression-node-label {
  max-width: 44px;
  color: var(--muted);
  font-size: 8px;
  line-height: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-actor {
  width: 12px;
  height: 12px;
  border: 1px solid #0b0f0c;
  background: var(--warn);
  box-shadow: 0 0 0 1px var(--line-hot);
}

.map-actor.party {
  background: var(--warn);
}

.map-actor.busy {
  animation: pulse 0.8s steps(2, end) infinite;
}

.map-label {
  display: block;
  margin-top: 2px;
  font-size: 10px;
}

@keyframes pulse {
  50% {
    opacity: 0.45;
  }
}

label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  text-transform: uppercase;
}

.node-map {
  min-height: 320px;
}

.dungeon-graph-panel .node-map {
  height: 100%;
  min-height: 420px;
  overflow: hidden;
}

.node {
  border: 1px solid var(--line);
  padding: 6px;
  min-height: 64px;
  background: #101611;
}

.node.reached {
  border-color: var(--ok);
}

.node.failed {
  border-color: var(--bad);
}

.node-title {
  color: var(--accent);
  text-transform: uppercase;
}

.node-meta {
  color: var(--muted);
  margin-top: 4px;
}

.dungeon-route-graph {
  position: relative;
  min-height: 320px;
  border: 1px solid #26322b;
  background: rgba(12, 17, 22, 0.7);
  overflow: hidden;
}

.dungeon-graph-panel .dungeon-route-graph {
  height: 100%;
  min-height: 0;
}

.dungeon-route-graph.has-map {
  cursor: grab;
  touch-action: none;
}

.dungeon-route-graph.has-map.dragging {
  cursor: grabbing;
}

.dungeon-route-world {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
}

.dungeon-route-graph.has-map .dungeon-route-world {
  inset: auto;
  left: 0;
  top: 0;
  width: var(--dungeon-map-width);
  height: var(--dungeon-map-height);
  background-color: #0d100e;
}

.dungeon-route-map-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.dungeon-route-graph.has-map .dungeon-route-world::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(4, 7, 5, 0.16);
  content: "";
  pointer-events: none;
}

.dungeon-route-link-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.dungeon-route-link {
  stroke: #4c554e;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.dungeon-route-link.in-path {
  stroke: var(--warn);
  stroke-width: 1.8;
}

.dungeon-route-link.locked {
  stroke-dasharray: 4 4;
  opacity: 0.35;
}

.dungeon-route-node {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 2px solid #718077;
  border-radius: 50%;
  background: #253029;
  box-shadow: 0 2px 0 #080b09, 0 0 0 2px rgba(7, 10, 8, 0.72);
  text-align: center;
}

.dungeon-route-node.type-combat {
  border-color: #86a978;
  background: #2b3a27;
}

.dungeon-route-node.type-check {
  border-color: #6fa4bc;
  background: #1d3039;
}

.dungeon-route-node.type-hazard {
  border-color: #d0a64c;
  background: #3a3019;
}

.dungeon-route-node.type-boss {
  border-color: #9b3c45;
  background: #421b20;
}

.dungeon-route-node.type-miniboss {
  border-color: #b46d9a;
  background: #382133;
}

.dungeon-route-node.type-modifier {
  border-color: #b87738;
  background: #3a2617;
}

.dungeon-route-node.type-relief {
  border-color: #49a86b;
  background: #173b25;
}

.dungeon-route-node.in-path {
  border-color: var(--warn);
}

.dungeon-route-node.selected {
  outline: 2px solid var(--warn);
  outline-offset: 3px;
}

.dungeon-route-node.reached {
  border-color: var(--ok);
}

.dungeon-route-node.cleared {
  box-shadow: inset 0 0 0 2px rgba(59, 213, 116, 0.42), 0 2px 0 #080b09, 0 0 0 2px rgba(7, 10, 8, 0.72);
}

.dungeon-route-node.locked {
  opacity: 0.38;
  border-style: dashed;
}

.dungeon-route-node.modified::after {
  position: absolute;
  right: -3px;
  top: -3px;
  width: 8px;
  height: 8px;
  border: 1px solid #0b100d;
  background: var(--bad);
  content: "";
}

.dungeon-route-node.failed {
  border-color: var(--bad);
}

.dungeon-route-node .dungeon-node-icon {
  color: #f3f6ed;
  font-family: "Segoe UI Symbol", "Arial Unicode MS", var(--mono);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  text-transform: none;
}

.dungeon-route-node .dungeon-node-order {
  position: absolute;
  right: -9px;
  bottom: -9px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 3px;
  border: 1px solid #171b18;
  border-radius: 50%;
  background: var(--warn);
  color: #10130f;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.dungeon-node-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 4px;
  margin-top: 8px;
  padding: 6px;
  border: 1px solid var(--line);
  background: rgba(9, 13, 10, 0.86);
}

.dungeon-inspector-empty {
  border: 1px solid var(--line);
  padding: 8px;
  color: var(--muted);
  background: #0e130f;
}

.dungeon-inspector {
  display: grid;
  gap: 8px;
}

.estimate-box {
  display: block;
  min-height: 220px;
  margin: 0;
  white-space: normal;
}

.dungeon-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 4px;
}

.dungeon-stat {
  display: grid;
  gap: 3px;
  min-height: 48px;
  padding: 6px;
  border: 1px solid var(--line);
  background: #101611;
}

.dungeon-stat span {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.dungeon-stat strong {
  color: var(--accent);
  font-weight: 700;
}

.dungeon-reward-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dungeon-reward-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.dungeon-reward-list li span {
  color: var(--muted);
  font-size: 11px;
  text-transform: none;
}

.dungeon-transcript {
  border: 1px solid var(--line);
  background: #0e130f;
  padding: 6px;
}

.dungeon-transcript ol {
  max-height: 180px;
  overflow: auto;
  margin: 6px 0 0;
  padding-left: 22px;
}

.dungeon-transcript li {
  padding: 2px 0;
  color: var(--muted);
}

/* Dungeon Replay */
.dungeon-replay-panel {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.replay-stage {
  display: grid;
  grid-template-columns: minmax(96px, 112px) minmax(0, 1fr) minmax(96px, 112px);
  gap: 8px;
  align-items: stretch;
  margin-bottom: 0;
  min-width: 0;
}

.dungeon-graph-panel .replay-stage {
  grid-template-columns: minmax(96px, 106px) minmax(0, 1fr) minmax(96px, 106px);
  gap: 6px;
}

.replay-timeline-slider {
  width: 100%;
  height: 18px;
  margin: 0 0 8px;
  accent-color: var(--warn);
}

.replay-timeline-markers {
  position: relative;
  height: 30px;
  margin: 3px 8px -3px;
  border-bottom: 1px solid var(--line);
}

.replay-timeline-marker {
  position: absolute;
  bottom: -1px;
  width: 11px;
  height: 18px;
  border: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  transform: translateX(-50%);
}

.replay-timeline-marker::after {
  position: absolute;
  bottom: 0;
  left: 5px;
  width: 1px;
  height: 12px;
  background: var(--muted);
  content: "";
}

.replay-timeline-marker.active::after,
.replay-timeline-marker:hover::after,
.replay-timeline-marker:focus-visible::after {
  width: 2px;
  background: var(--warn);
}

.replay-timeline-marker span {
  position: absolute;
  bottom: 13px;
  left: 5px;
  z-index: 1;
  display: none;
  border: 1px solid var(--line-hot);
  padding: 2px 4px;
  background: #0c110d;
  color: var(--text);
  font-size: 10px;
  line-height: 1.2;
  text-transform: none;
  white-space: nowrap;
  transform: translateX(-50%);
}

.replay-timeline-marker.active span,
.replay-timeline-marker:hover span,
.replay-timeline-marker:focus-visible span {
  display: block;
}

.replay-timeline-marker.edge-start span {
  left: 0;
  transform: none;
}

.replay-timeline-marker.edge-end span {
  right: 0;
  left: auto;
  transform: none;
}

.replay-actors {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 5px;
  min-width: 0;
}

.replay-actor {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px;
  min-height: 90px;
  border: 1px solid var(--line);
  background: rgba(13, 18, 14, 0.9);
  padding: 5px;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.dungeon-graph-panel .replay-actor {
  min-height: 84px;
}

.replay-actor.compact {
  width: 100%;
  min-width: 0;
  text-align: center;
}

.replay-actor.active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(168, 211, 123, 0.35);
}

.replay-actor.targeted {
  border-color: var(--bad);
}

.replay-actor.selected {
  outline: 1px solid var(--warn);
  outline-offset: 1px;
}

.local-tab-button.hidden,
.local-tab-panel.hidden {
  display: none;
}

.replay-portrait {
  width: 58px;
  height: 58px;
}

.enemy-portrait {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid var(--bad);
  background:
    radial-gradient(circle at 50% 38%, rgba(216, 121, 99, 0.28), transparent 52%),
    #160f0d;
  color: var(--bad);
  font-weight: 700;
}

.enemy-portrait.large {
  width: 92px;
  height: 92px;
}

.replay-actor-identity {
  min-width: 0;
}

.replay-actor-name {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--accent);
  margin-top: 3px;
  font-size: 10px;
  line-height: 12px;
}

.replay-actor-bars {
  display: grid;
  grid-template-columns: repeat(2, 8px);
  justify-content: end;
  align-content: stretch;
  gap: 5px;
  width: 22px;
  min-height: 72px;
}

.replay-stat-bar {
  position: relative;
  width: 8px;
  height: 100%;
  border: 1px solid var(--line);
  background: #0a0d0b;
  overflow: hidden;
}

.replay-stat-bar span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
}

.replay-stat-bar.hp span {
  background: var(--accent);
}

.replay-stat-bar.resolve span {
  background: #6aa7d8;
}

.replay-event-center {
  display: grid;
  align-content: center;
  justify-items: center;
  min-width: 0;
  min-height: 150px;
  border: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(216, 178, 93, 0.06), transparent 48%, rgba(216, 121, 99, 0.08)),
    #0e130f;
  padding: 8px;
  text-align: center;
}

.dungeon-graph-panel .replay-event-center {
  min-height: 92px;
  padding: 6px;
}

.replay-action-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--warn);
  color: var(--warn);
  font-weight: 700;
  margin-bottom: 8px;
}

.dungeon-graph-panel .replay-action-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 5px;
}

.replay-event-text {
  max-width: 100%;
  min-width: 0;
  color: var(--text);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.replay-empty {
  border: 1px solid var(--line);
  background: #0e130f;
  color: var(--muted);
  padding: 8px;
}

.replay-log {
  height: 140px;
  overflow: auto;
  margin: 0;
  padding-left: 26px;
  background: #0e130f;
  border: 1px solid var(--line);
}

.dungeon-view .replay-log {
  display: none;
}

.dungeon-view .dungeon-combat-log {
  display: block;
  height: calc(min(74vh, 760px) - 90px);
}

.replay-log li {
  padding: 3px 5px;
  border-bottom: 1px solid #1f2a22;
  color: var(--muted);
}

.replay-log li.current {
  color: var(--accent);
}

/* Systems And Logs */
.log {
  height: 180px;
  overflow: auto;
  margin: 0;
  padding-left: 26px;
  background: #0e130f;
  border: 1px solid var(--line);
}

.map-log-panel.active {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.map-log-panel .panel-head {
  flex: 0 0 auto;
}

.map-log-panel .log {
  flex: 1;
  height: auto;
  min-height: 0;
}

.log li {
  padding: 3px 5px;
  border-bottom: 1px solid #1f2a22;
}

.log .warn {
  color: var(--warn);
}

.log .bad {
  color: var(--bad);
}

.log .ok {
  color: var(--ok);
}

.blueprints {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}

.blueprint {
  border: 1px solid var(--line);
  padding: 6px;
  background: #101611;
}

.blueprint.locked {
  color: #657165;
}

.notes {
  margin: 0;
  padding-left: 16px;
  color: var(--muted);
}

.tag {
  display: inline-block;
  border: 1px solid var(--line);
  padding: 1px 4px;
  color: var(--muted);
  text-transform: uppercase;
}

.bar {
  height: 6px;
  border: 1px solid var(--line);
  background: #0b0f0c;
}

.bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
}

/* First-Step Encounters */
.encounter-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(3, 6, 4, 0.72);
}

.encounter-overlay.hidden {
  display: none;
}

.encounter-panel {
  width: min(620px, 100%);
  border: 1px solid var(--accent);
  background: #0c110d;
  box-shadow: 0 0 0 1px #1f2a22, 0 18px 44px rgba(0, 0, 0, 0.42);
  padding: 10px;
}

.encounter-head {
  align-items: start;
  margin-bottom: 8px;
}

.encounter-kicker {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.encounter-body {
  display: grid;
  gap: 6px;
  margin: 8px 0 10px;
  color: var(--text);
  line-height: 1.45;
}

.encounter-body p {
  margin: 0;
}

.encounter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

/* Context Help */
.wiki-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(3, 6, 4, 0.82);
}

.wiki-overlay.hidden {
  display: none;
}

.wiki-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(820px, 100%);
  max-height: min(86vh, 860px);
  min-height: min(520px, 86vh);
  border: 1px solid var(--accent);
  background: #0c110d;
  box-shadow: 0 0 0 1px #1f2a22, 0 18px 44px rgba(0, 0, 0, 0.56);
  padding: 10px;
}

.wiki-head {
  align-items: start;
  margin-bottom: 0;
  padding-bottom: 8px;
}

.wiki-head h2 {
  margin: 1px 0 0;
}

.wiki-category {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.wiki-summary {
  margin: 8px 0 0;
  padding: 8px;
  border-left: 2px solid var(--line-hot);
  background: #101611;
  color: var(--muted);
  line-height: 1.45;
}

.wiki-content {
  min-height: 0;
  overflow-y: auto;
  padding: 10px 8px 14px 2px;
  color: var(--text);
  line-height: 1.55;
}

.wiki-content h1,
.wiki-content h2,
.wiki-content h3,
.wiki-content h4 {
  margin: 18px 0 6px;
  color: var(--accent);
  letter-spacing: 0;
}

.wiki-content h1:first-child,
.wiki-content h2:first-child,
.wiki-content h3:first-child {
  margin-top: 0;
}

.wiki-content p,
.wiki-content ul,
.wiki-content ol,
.wiki-content table,
.wiki-content pre {
  margin: 0 0 10px;
}

.wiki-content ul,
.wiki-content ol {
  padding-left: 24px;
}

.wiki-content code {
  border: 1px solid #263129;
  background: #080b08;
  padding: 1px 3px;
  color: var(--warn);
  font-family: var(--mono);
}

.wiki-content pre {
  overflow-x: auto;
  border: 1px solid var(--line);
  background: #080b08;
  padding: 8px;
}

.wiki-content pre code {
  border: 0;
  padding: 0;
}

.wiki-content a {
  color: #80a8d8;
}

.wiki-content hr {
  margin: 14px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.wiki-content table {
  width: 100%;
}

/* Responsive Layout */
@media (max-width: 980px) {
  .split,
  .form-grid,
  .map-layout,
  .map-tab-layout,
  .population-layout,
  .expedition-layout,
  .continent-layout,
  .tavern-layout,
  .tavern-bookkeeping-layout,
  .stats-bookkeeping-layout,
  .roster-layout,
  .roster-main-grid,
  .temple-layout {
    grid-template-columns: 1fr;
  }

  .map-side-panel,
  .population-resource-panel,
  .tavern-detail-panel,
  .tavern-finance-panel,
  .expedition-side-panel,
  .continent-side-panel,
  .roster-detail-panel,
  .temple-side-panel {
    position: static;
    height: auto;
    max-height: none;
  }

  .population-layout {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hud-tabs {
    top: 68px;
  }

  .tab-panel.roster-view.active {
    height: auto;
    min-height: calc(100vh - 68px);
    overflow: visible;
  }

  .roster-layout,
  .roster-main-grid,
  .roster-main-panel,
  .roster-detail-panel,
  .roster-party-column,
  .roster-character-column,
  .roster-party-table-scroll {
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
  }

  .roster-party-table-scroll {
    max-height: 55vh;
    overflow-y: auto;
  }

  .character-grid {
    max-height: 55vh;
    overflow-y: auto;
  }

  .clockline {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  #tavernResourceLine {
    text-align: left;
  }

  .tavern-bookkeeping-main,
  .tavern-finance-panel,
  .stats-overview-panel {
    min-height: 0;
  }

  .stats-history-panel {
    min-height: 0;
  }
}



.codex-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 8px;
  min-height: calc(100vh - 92px);
}

.codex-main-panel,
.codex-detail-panel { min-width: 0; }

.codex-filters {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) repeat(3, minmax(120px, auto));
  gap: 6px;
  margin-bottom: 8px;
}

.codex-agent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 6px;
}

.codex-agent {
  min-height: 112px;
  display: grid;
  grid-template-rows: 58px auto auto;
  place-items: center;
  gap: 3px;
  padding: 6px;
  overflow: hidden;
}

.codex-agent.selected { outline: 2px solid var(--accent, #8fae64); }
.codex-agent small { opacity: 0.7; }
.codex-agent .cropped-portrait.card { width: 52px; height: 52px; }

.codex-silhouette,
.codex-enemy-icon {
  width: 52px;
  height: 52px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #59605e;
  background: #242827;
  color: #b8c0bd;
  font-weight: 700;
}

.codex-silhouette {
  background: #303534;
  clip-path: polygon(34% 6%, 66% 6%, 76% 35%, 66% 53%, 88% 68%, 96% 100%, 4% 100%, 12% 68%, 34% 53%, 24% 35%);
  border: 0;
}

.codex-silhouette.large,
.codex-enemy-icon.large { width: 88px; height: 88px; }
.codex-hidden-detail { text-align: center; padding: 28px 8px; }
.codex-hidden-detail .codex-silhouette { margin: 0 auto 12px; }

.career-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 8px 0;
  background: #3a403e;
}

.career-stat-grid > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px;
  background: #181b1a;
}

.legacy-achievements { display: grid; gap: 5px; }
.legacy-achievement { border: 1px solid #454b49; padding: 7px; }
.legacy-achievement.ready { border-color: #91ad65; }
.legacy-achievement.claimed { opacity: 0.7; }
.legacy-achievement-head { display: flex; justify-content: space-between; gap: 8px; }
.legacy-achievement button { margin-top: 5px; }

.combat-contributions { margin-top: 10px; }
.contribution-row { margin: 7px 0; }
.contribution-row > div:first-child { display: flex; justify-content: space-between; gap: 8px; }
.contribution-bar { display: flex; height: 7px; background: #292d2c; margin: 3px 0; }
.contribution-bar .damage { background: #b66d55; }
.contribution-bar .healing { background: #6fa57b; }

@media (max-width: 900px) {
  .codex-layout { grid-template-columns: 1fr; }
  .codex-filters { grid-template-columns: 1fr 1fr; }
}
.camp-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  gap: 0;
  align-items: stretch;
  height: calc(100vh - 94px);
  min-height: 0;
  overflow: hidden;
}

.tavern-layout.hub-content-hidden,
.camp-layout.hub-content-hidden,
#tavernHubContent[hidden],
#campHubContent[hidden] {
  display: none !important;
}

.tavern-view .camp-layout > .panel {
  max-width: none;
  min-height: 0;
  overflow: auto;
}

.camp-shipment-controls {
  grid-template-columns: repeat(2, minmax(160px, 1fr));
}

.camp-routes-panel table {
  width: 100%;
}

@media (max-width: 900px) {
  .camp-layout {
    grid-template-columns: 1fr;
    height: auto;
    min-height: calc(100vh - 94px);
    overflow: visible;
  }
}

@media (max-width: 640px) {
  .wiki-overlay {
    align-items: stretch;
    padding: 8px;
  }

  .wiki-panel {
    min-height: 0;
    max-height: none;
    height: 100%;
  }

  .panel-head-actions {
    flex-wrap: wrap;
  }
}

.dev-visitor-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  gap: 8px;
  min-height: calc(100vh - 104px);
}

.dev-visitor-chart-panel,
.dev-visitor-controls-panel { min-width: 0; }
.dev-visitor-controls-panel { overflow-y: auto; }
.dev-visitor-controls,
.dev-visitor-weight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.dev-visitor-controls label,
.dev-visitor-weight-grid label { display: grid; gap: 3px; }
.dev-visitor-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 8px; }
.dev-visitor-legend span { display: inline-flex; align-items: center; gap: 5px; }
.dev-visitor-legend i { width: 10px; height: 10px; display: inline-block; }
.dev-visitor-chart-wrap { overflow: auto; border: 1px solid #3c4341; background: #151817; }
.dev-visitor-chart { display: block; width: 100%; min-width: 700px; height: auto; }
.dev-visitor-series { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }

@media (max-width: 900px) {
  .dev-visitor-layout { grid-template-columns: 1fr; min-height: 0; }
}
/* Manual item crafting */
.crafting-slots { display:grid; gap:8px; }
.crafting-station { position:relative; display:grid; grid-template-columns:72px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:82px; padding:8px; border:1px solid var(--line, #46505a); background:#171b1e; }
.crafting-station.unmanned, .crafting-station.disabled { opacity:.55; }
.crafting-station-toggles { position:absolute; z-index:3; top:5px; right:5px; display:flex; gap:3px; }
.crafting-square-toggle { width:25px; height:25px; min-width:25px; padding:0; color:var(--muted); line-height:23px; text-align:center; }
.crafting-square-toggle[aria-pressed="true"] { border-width:2px; font-weight:700; box-shadow:inset 0 0 0 1px #0008,0 0 5px currentColor; }
.crafting-square-toggle.manning[aria-pressed="true"] { border-color:#a8d37b; background:#25351f; color:#c7f09d; }
.crafting-square-toggle.continuous[aria-pressed="true"] { border-color:#f0c75e; background:#3b3219; color:#ffe08a; }
.crafting-square-toggle.discard[aria-pressed="true"] { border-color:#e46f61; background:#3d201d; color:#ff9b8f; }
.crafting-recipe-picker { position:relative; }
.crafting-recipe-picker:hover { z-index:20; }
.crafting-image-button { width:64px; height:64px; padding:3px; }
.crafting-image { display:block; width:56px; height:56px; background-repeat:no-repeat; image-rendering:pixelated; border:2px solid #a9c5d1; }
.crafting-image.small { width:36px; height:36px; }
.crafting-recipe-overlay { position:fixed; z-index:120; width:min(560px,calc(100vw - 16px)); min-height:250px; padding:8px; border:1px solid #a9c5d1; background:#101416; box-shadow:0 8px 24px #000; overflow:visible; }
.crafting-recipe-overlay[hidden] { display:none; }
.crafting-recipe-overlay-head { display:flex; align-items:center; justify-content:space-between; min-height:30px; margin-bottom:7px; border-bottom:1px solid #46505a; }
.crafting-recipe-overlay-head button { width:25px; height:25px; padding:0; }
.crafting-recipe-grid { display:grid; grid-template-columns:repeat(2,106px); align-content:start; gap:6px; width:218px; }
.crafting-recipe-choice { display:grid; grid-template-columns:40px minmax(0,1fr); align-items:center; gap:5px; min-height:48px; padding:4px; text-align:left; }
.crafting-recipe-choice.selected { outline:2px solid #f0c75e; outline-offset:-2px; }
.crafting-recipe-choice > span:not(.crafting-image) { overflow-wrap:anywhere; }
.crafting-recipe-preview,
.crafting-recipe-tooltip { position:absolute; left:242px; right:8px; top:46px; bottom:8px; display:grid; align-content:start; gap:8px; padding:9px; border:1px solid #46505a; background:#171b1e; color:#d9e0df; white-space:normal; }
.crafting-recipe-tooltip { z-index:2; display:none; pointer-events:none; }
.crafting-station-tooltip { position:absolute; z-index:30; display:none; left:calc(100% + 8px); top:0; width:270px; padding:9px; border:1px solid #46505a; background:#171b1e; color:#d9e0df; box-shadow:0 6px 18px #000; text-align:left; white-space:normal; pointer-events:none; }
.crafting-station-tooltip > span { display:block; margin-top:4px; }
.crafting-image-button:hover > .crafting-station-tooltip,
.crafting-image-button:focus-visible > .crafting-station-tooltip { display:block; }
.crafting-recipe-choice:hover > .crafting-recipe-tooltip,
.crafting-recipe-choice:focus-visible > .crafting-recipe-tooltip { display:grid; }
.crafting-recipe-preview strong,
.crafting-recipe-tooltip strong { color:#f0c75e; }
.crafting-station-body { display:grid; gap:4px; min-width:0; }
.crafting-inventory-head { margin-top:12px; }
.crafting-inventory { display:grid; grid-template-columns:repeat(auto-fill,minmax(82px,1fr)); gap:6px; align-items:start; }
.crafting-inventory-item { position:relative; display:grid; justify-items:center; gap:3px; min-height:91px; padding:5px; overflow:hidden; }
.crafting-inventory-item span:not(.crafting-image) { max-width:100%; overflow-wrap:anywhere; }
.crafting-inventory-item small { position:absolute; top:3px; right:4px; padding:1px 3px; background:#090b0c; color:#fff; }
.crafting-inventory-item.selected { outline:3px solid #f0c75e; outline-offset:-3px; }
.crafting-inventory-item.incompatible { filter:grayscale(1); opacity:.25; }
.crafting-augment-wrap { position:relative; }
.crafting-item-menu { position:absolute; z-index:10; left:calc(100% + 4px); top:0; padding:4px; border:1px solid #91a6af; background:#101416; }
.crafting-confirm { position:fixed; z-index:140; inset:0; display:grid; place-items:center; background:#0009; }
.crafting-confirm[hidden] { display:none; }
.crafting-confirm-box { width:min(520px,calc(100vw - 24px)); padding:14px; border:1px solid #a9c5d1; background:#151a1d; }
.crafting-effect-compare { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:10px 0; }
.roster-equipment { margin:10px 0 8px; }
.roster-equipment-row { display:grid; grid-template-columns:repeat(4,minmax(82px,1fr)); gap:6px; overflow-x:auto; padding-bottom:2px; }
.roster-equipment-slot { position:relative; display:grid; grid-template-rows:64px auto; place-items:center; gap:4px; min-width:82px; min-height:104px; padding:6px; overflow:visible; }
.roster-equipment-slot.empty { border-style:dashed; color:#91a6af; }
.roster-equipment-slot.occupied { border:2px solid #a9c5d1; }
.roster-equipment-slot .crafting-image { width:64px; height:64px; }
.roster-equipment-slot > span:last-of-type { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.roster-equipment-slot > small { position:absolute; top:3px; right:3px; padding:1px 3px; background:#090b0c; color:#f0c75e; }
.roster-equipment-empty { font-size:24px; line-height:1; }
.roster-equipment-menu { position:fixed; z-index:130; width:min(372px,calc(100vw - 16px)); max-height:320px; padding:8px; border:1px solid #a9c5d1; background:#101416; box-shadow:0 8px 24px #000; overflow:auto; }
.roster-equipment-menu[hidden] { display:none; }
.roster-equipment-menu-head { display:flex; align-items:center; justify-content:space-between; min-height:28px; margin-bottom:7px; border-bottom:1px solid #46505a; }
.roster-equipment-menu-head button { width:25px; height:25px; padding:0; }
.roster-equipment-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.roster-equipment-choice { display:grid; justify-items:center; gap:3px; min-width:0; min-height:102px; padding:5px; text-align:center; }
.roster-equipment-choice .crafting-image { width:64px; height:64px; }
.roster-equipment-choice span:not(.crafting-image),
.roster-equipment-choice small { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.roster-equipment-current { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; padding-top:8px; border-top:1px solid #46505a; }
@media (max-width:620px) {
  .crafting-recipe-overlay { left:8px !important; width:calc(100vw - 16px); min-height:390px; }
  .crafting-recipe-grid { grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; }
  .crafting-recipe-choice { grid-template-columns:36px minmax(0,1fr); }
  .crafting-recipe-preview,
  .crafting-recipe-tooltip { left:8px; top:210px; }
  .crafting-effect-compare { grid-template-columns:1fr; }
}
.pressure-panel {
  display: grid;
  gap: 6px;
  margin: 8px 0;
  padding: 8px;
  border: 1px solid #4d5660;
  background: #11161b;
}

.pressure-meter > div:first-child,
.pressure-forecast-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.pressure-meter.physical .bar > span,
.replay-stat-bar.physical-pressure > span { background: #e07855; }

.pressure-meter.mental .bar > span,
.replay-stat-bar.mental-pressure > span { background: #65a9dc; }

.injury-list,
.pressure-forecast {
  display: grid;
  gap: 5px;
}

.medical-policy-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 6px 0 10px;
  padding: 6px 8px;
  border: 1px solid #3c464e;
}

.medical-policy-controls input[type="number"] { width: 58px; }

.injury-row {
  display: grid;
  grid-template-columns: minmax(110px, auto) 1fr auto;
  gap: 8px;
  padding-top: 5px;
  border-top: 1px solid #343c44;
}

.pressure-forecast {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid #46515b;
  background: #101519;
}

.pressure-forecast-row {
  display: grid;
  grid-template-columns: minmax(90px, 0.7fr) 1fr 1fr;
  align-items: center;
  padding: 4px 0;
  border-top: 1px solid #303941;
}

.pressure-forecast-row.danger,
.character-card.pressure-warning .character-name,
.character-card.compact.pressure-warning .compact-name { color: #ff936f; }

@media (max-width: 800px) {
  .pressure-forecast-row,
  .injury-row { grid-template-columns: 1fr; }
}