/* Project Outpost — Encounter Experience v1
 * Presentation only. Host commands, Phaser ownership, Rest resolution, Energy,
 * inventory mutation, and authoritative synchronization remain unchanged. */

/* Player Camp --------------------------------------------------------- */

body.outpost-real-page-preview #encounter .camp-player-experience {
  --camp-edge: color-mix(in srgb, var(--op-line) 82%, transparent);
  display: grid;
  min-width: 0;
  gap: 0 !important;
}

body.outpost-real-page-preview #encounter .camp-view-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--op-line);
  border-bottom: 1px solid var(--op-line);
}

body.outpost-real-page-preview #encounter .camp-view-switch button {
  appearance: none;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 10px;
  min-height: 50px;
  padding: 8px 12px;
  border: 0;
  border-right: 1px solid var(--op-line);
  color: var(--op-text-muted);
  background: transparent;
  box-shadow: none;
  text-align: left;
}

body.outpost-real-page-preview #encounter .camp-view-switch button:last-child { border-right: 0; }

body.outpost-real-page-preview #encounter .camp-view-switch button:is(:hover, :focus-visible) {
  outline: 0;
  color: var(--op-text);
  background: var(--op-surface-soft);
}

body.outpost-real-page-preview #encounter .camp-view-switch button.active {
  color: var(--op-text);
  box-shadow: inset 0 -2px 0 var(--op-text);
}

body.outpost-real-page-preview #encounter .camp-view-switch small {
  grid-row: 1 / 3;
  color: var(--op-text-faint);
  font: 8px var(--op-font-mono);
  letter-spacing: .08em;
}

body.outpost-real-page-preview #encounter .camp-view-switch b {
  color: inherit;
  font: 10px var(--op-font-mono);
  letter-spacing: .1em;
}

body.outpost-real-page-preview #encounter .camp-view-switch em {
  overflow: hidden;
  color: var(--op-text-faint);
  font: 8px var(--op-font-body);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview #encounter .camp-scene {
  min-height: clamp(400px, 50vh, 570px);
  isolation: isolate;
  background-color: #080b0b;
  background-image: var(--camp-scene-bg);
  background-position: center;
  background-size: cover;
}

body.outpost-real-page-preview #encounter .camp-scene::before,
body.outpost-real-page-preview #encounter .camp-scene::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
}

body.outpost-real-page-preview #encounter .camp-scene::before {
  background:
    radial-gradient(circle at 50% 66%, rgba(226, 156, 72, .19), transparent 13%),
    linear-gradient(180deg, rgba(6, 8, 9, .22) 0 30%, rgba(3, 5, 5, .84) 100%);
}

body.outpost-real-page-preview #encounter .camp-scene::after {
  opacity: .28;
  background-image:
    linear-gradient(90deg, transparent 49.8%, rgba(255,255,255,.045) 50%, transparent 50.2%),
    linear-gradient(0deg, transparent 49.8%, rgba(255,255,255,.035) 50%, transparent 50.2%);
  background-size: 76px 76px;
  mask-image: linear-gradient(180deg, transparent, #000 28%, #000 82%, transparent);
}

body.outpost-real-page-preview #encounter .camp-scene-shade {
  z-index: 0;
  background: color-mix(in srgb, var(--op-bg) 42%, transparent);
}

body.outpost-real-page-preview #encounter .camp-scene-heading {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  padding: 18px 20px;
  background: color-mix(in srgb, var(--op-bg) 88%, transparent);
}

body.outpost-real-page-preview #encounter .camp-scene-heading > span:last-child {
  display: grid;
  justify-items: end;
  gap: 4px;
}

body.outpost-real-page-preview #encounter .camp-scene-heading > span:last-child b {
  font: 10px var(--op-font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

body.outpost-real-page-preview #encounter .camp-scene-heading > span:last-child small {
  font-size: 8px;
}

body.outpost-real-page-preview #encounter .camp-scene-world {
  position: relative;
  z-index: 2;
  min-height: clamp(400px, 50vh, 570px);
  padding: 82px 20px 64px;
}

body.outpost-real-page-preview #encounter .camp-scene-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

body.outpost-real-page-preview #encounter .camp-scene-atmosphere i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  opacity: .36;
  background: #f2d6a4;
  box-shadow: 0 0 12px rgba(244, 181, 87, .72);
  animation: camp-ember 5.4s ease-in-out infinite;
}

body.outpost-real-page-preview #encounter .camp-scene-atmosphere i:nth-child(1) { left: 47%; bottom: 31%; }
body.outpost-real-page-preview #encounter .camp-scene-atmosphere i:nth-child(2) { left: 53%; bottom: 35%; animation-delay: -1.8s; }
body.outpost-real-page-preview #encounter .camp-scene-atmosphere i:nth-child(3) { left: 50%; bottom: 28%; animation-delay: -3.4s; }

@keyframes camp-ember {
  0%, 100% { opacity: 0; transform: translate3d(0, 8px, 0); }
  28% { opacity: .52; }
  72% { opacity: .12; transform: translate3d(8px, -52px, 0); }
}

body.outpost-real-page-preview #encounter .camp-scene-anchor {
  position: absolute;
  left: 50%;
  bottom: 22%;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 5px;
  width: 132px;
  transform: translateX(-50%);
  color: rgba(255,255,255,.84);
  text-align: center;
  pointer-events: none;
}

body.outpost-real-page-preview #encounter .camp-scene-anchor > i {
  position: relative;
  width: 62px;
  height: 18px;
  border: 1px solid rgba(246, 205, 139, .54);
  border-top: 0;
  transform: perspective(40px) rotateX(52deg);
  background: rgba(204, 104, 39, .23);
  box-shadow: 0 -12px 34px rgba(241, 145, 63, .16);
}

body.outpost-real-page-preview #encounter .camp-scene-anchor > span,
body.outpost-real-page-preview #encounter .camp-scene-anchor > small {
  font: 8px var(--op-font-mono);
  letter-spacing: .14em;
}

body.outpost-real-page-preview #encounter .camp-scene-anchor > small {
  color: rgba(255,255,255,.48);
}

body.outpost-real-page-preview #encounter .camp-hotspot-layer {
  position: absolute;
  inset: 78px 18px 58px;
  display: block;
  min-height: 0;
  padding: 0;
}

body.outpost-real-page-preview #encounter .camp-hotspot {
  position: absolute;
  z-index: 3;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  width: clamp(172px, 18vw, 232px);
  min-height: 66px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.9);
  background: rgba(5, 7, 8, .76);
  backdrop-filter: blur(5px);
  transform: translate3d(0,0,0);
  transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease, opacity 150ms ease;
}

body.outpost-real-page-preview #encounter .camp-hotspot:nth-child(3n + 1) {
  border-left: 1px solid rgba(255,255,255,.18);
}

body.outpost-real-page-preview #encounter .camp-hotspot:is(.available, .node):hover,
body.outpost-real-page-preview #encounter .camp-hotspot:focus-within {
  z-index: 6;
  border-color: rgba(255,255,255,.54);
  background: rgba(7, 10, 11, .92);
  transform: translate3d(0,-3px,0);
}

body.outpost-real-page-preview #encounter .camp-hotspot > i {
  width: 32px;
  height: 32px;
  border-color: rgba(255,255,255,.2);
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.04);
  font-size: 15px;
}

body.outpost-real-page-preview #encounter .camp-hotspot > span {
  align-self: center;
}

body.outpost-real-page-preview #encounter .camp-hotspot b { color: #fff; }
body.outpost-real-page-preview #encounter .camp-hotspot small { color: rgba(255,255,255,.48); }

body.outpost-real-page-preview #encounter .camp-hotspot > div {
  grid-column: 1 / -1;
  justify-content: stretch;
}

body.outpost-real-page-preview #encounter .camp-hotspot > div:empty { display: none; }

body.outpost-real-page-preview #encounter .camp-hotspot button {
  flex: 1 1 auto;
  min-height: 28px;
  border-color: rgba(255,255,255,.24);
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.035);
  font: 8px var(--op-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.outpost-real-page-preview #encounter .camp-zone-center {
  left: 44%;
  bottom: 11%;
  width: clamp(172px, 18vw, 232px);
  margin-left: calc(clamp(172px, 18vw, 232px) / -2);
  transform: none;
}
body.outpost-real-page-preview #encounter .camp-zone-center:hover,
body.outpost-real-page-preview #encounter .camp-zone-center:focus-within { transform: translate3d(0, -1px, 0); }
body.outpost-real-page-preview #encounter .camp-zone-rest { right: 3%; top: 8%; }
body.outpost-real-page-preview #encounter .camp-zone-alchemy { right: 2%; bottom: 16%; }
body.outpost-real-page-preview #encounter .camp-zone-crafting { left: 1%; top: 10%; }
body.outpost-real-page-preview #encounter .camp-zone-forge { left: 2%; bottom: 14%; }
body.outpost-real-page-preview #encounter .camp-zone-caravan { left: 5%; top: 6%; }
body.outpost-real-page-preview #encounter .camp-zone-storage { left: 26%; top: 3%; }
body.outpost-real-page-preview #encounter .camp-zone-forest { left: 1%; top: 31%; }
body.outpost-real-page-preview #encounter .camp-zone-water { right: 25%; bottom: 2%; }
body.outpost-real-page-preview #encounter .camp-zone-ruins,
body.outpost-real-page-preview #encounter .camp-zone-industrial,
body.outpost-real-page-preview #encounter .camp-zone-underground { right: 1%; top: 34%; }

body.outpost-real-page-preview #encounter .camp-hotspot.locked {
  opacity: .23;
  filter: grayscale(1);
}

body.outpost-real-page-preview #encounter .camp-free-actions {
  min-height: 50px;
  border-color: var(--op-line);
  color: var(--op-text);
  background: var(--op-bg);
}

body.outpost-real-page-preview #encounter .camp-free-actions button {
  border-color: var(--op-line-strong);
  color: var(--op-text);
}

body.outpost-real-page-preview #encounter .camp-command-deck {
  min-width: 0;
  border-bottom: 1px solid var(--op-line);
}

body.outpost-real-page-preview #encounter .camp-rest-status-strip {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) minmax(100px, .55fr) minmax(150px, .85fr) minmax(110px, .6fr) minmax(150px, .75fr);
  min-width: 0;
  min-height: 92px;
}

body.outpost-real-page-preview #encounter .camp-rest-status-strip > span {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  padding: 13px 14px;
  border-right: 1px solid var(--op-line-faint);
}

body.outpost-real-page-preview #encounter .camp-rest-status-strip small,
body.outpost-real-page-preview #encounter .camp-rest-status-strip em {
  overflow: hidden;
  color: var(--op-text-faint);
  font: 8px var(--op-font-mono);
  font-style: normal;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview #encounter .camp-rest-status-strip b {
  overflow: hidden;
  color: var(--op-text);
  font: 13px var(--op-font-display);
  font-weight: 580;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview #encounter .camp-rest-status-strip .camp-rest-identity b {
  font-size: 17px;
}

body.outpost-real-page-preview #encounter .camp-rest-status-strip .is-ready {
  box-shadow: inset 2px 0 0 var(--op-success);
}

body.outpost-real-page-preview #encounter .camp-rest-status-strip > button {
  align-self: center;
  min-height: 42px;
  margin: 12px;
}

body.outpost-real-page-preview #encounter .camp-rest-results {
  padding: 0 14px 12px;
  border-top: 1px solid var(--op-line-faint);
}

body.outpost-real-page-preview #encounter .rest-workspace {
  display: block;
}

body.outpost-real-page-preview #encounter .rest-activity-board.panel {
  padding: 14px 0 0;
  background: transparent !important;
}

body.outpost-real-page-preview #encounter .camp-activity-directory-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(126px, auto);
  align-items: end;
  gap: 18px;
  padding: 0 14px 14px;
  border-bottom: 1px solid var(--op-line);
}

body.outpost-real-page-preview #encounter .camp-activity-directory-head > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body.outpost-real-page-preview #encounter .camp-activity-directory-head > span:last-child {
  justify-items: end;
  text-align: right;
}

body.outpost-real-page-preview #encounter .camp-activity-directory-head small,
body.outpost-real-page-preview #encounter .camp-activity-directory-head em {
  color: var(--op-text-faint);
  font: 8px var(--op-font-mono);
  font-style: normal;
  letter-spacing: .09em;
}

body.outpost-real-page-preview #encounter .camp-activity-directory-head b {
  color: var(--op-text);
  font: 19px var(--op-font-display);
  font-weight: 570;
}

body.outpost-real-page-preview #encounter .camp-activity-directory-head > span:last-child b {
  font: 20px var(--op-font-mono);
}

body.outpost-real-page-preview #encounter .camp-player-experience .rest-category-stack {
  /* Retire the legacy two-column Rest matrix, which was forced with !important. */
  display: block !important;
  max-height: min(calc(100dvh - 382px), 560px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border-bottom: 1px solid var(--op-line);
}

body.outpost-real-page-preview #encounter .rest-category-section {
  display: grid;
  grid-template-columns: clamp(156px, 16vw, 210px) minmax(0, 1fr);
  gap: 0;
  width: 100%;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--op-line);
  background: transparent;
}

body.outpost-real-page-preview #encounter .rest-category-title {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-content: start;
  align-items: start;
  gap: 10px;
  padding: 18px 14px;
  border: 0;
  border-right: 1px solid var(--op-line);
  background: var(--op-surface-soft);
}

body.outpost-real-page-preview #encounter .rest-category-title i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--op-line-strong);
  color: var(--op-text-faint);
  background: transparent;
  font: 8px var(--op-font-mono);
  font-style: normal;
}

body.outpost-real-page-preview #encounter .rest-category-title > span {
  display: grid;
  gap: 5px;
  min-width: 0;
}

body.outpost-real-page-preview #encounter .rest-category-title b {
  color: var(--op-text);
  font: 13px var(--op-font-display);
  font-weight: 580;
  letter-spacing: 0;
}

body.outpost-real-page-preview #encounter .rest-category-title small {
  display: block;
  color: var(--op-text-muted);
  font: 9px/1.45 var(--op-font-body);
  letter-spacing: 0;
}

body.outpost-real-page-preview #encounter .rest-category-title em {
  grid-column: 2;
  color: var(--op-text-faint);
  font: 7px var(--op-font-mono);
  font-style: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.outpost-real-page-preview #encounter .camp-player-experience .rest-activity-grid,
body.outpost-real-page-preview #encounter .camp-player-experience .rest-category-creative .rest-activity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0;
  border: 0;
}

body.outpost-real-page-preview #encounter .rest-activity-card {
  appearance: none;
  display: grid;
  grid-template-rows: 72px minmax(0, 1fr) !important;
  align-content: stretch;
  gap: 0 !important;
  min-width: 0;
  height: auto !important;
  min-height: 222px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0;
  border-right: 1px solid var(--op-line-faint);
  color: var(--op-text);
  background: var(--op-bg) !important;
  box-shadow: none;
  text-align: left;
}

body.outpost-real-page-preview #encounter .rest-activity-card::before {
  display: none !important;
}

body.outpost-real-page-preview #encounter .rest-activity-card.actionable {
  cursor: pointer;
}

body.outpost-real-page-preview #encounter .rest-activity-card.actionable:is(:hover, :focus-visible) {
  outline: 0;
  background: var(--op-surface-soft);
  transform: translateY(-2px) !important;
  border-color: var(--op-line-strong) !important;
  background-color: var(--op-surface-soft) !important;
  box-shadow: inset 0 -2px 0 var(--op-text) !important;
}

body.outpost-real-page-preview #encounter .rest-activity-card.disabled {
  opacity: .52;
}

body.outpost-real-page-preview #encounter .rest-activity-art {
  position: relative;
  display: block;
  width: 100% !important;
  height: 72px !important;
  min-height: 72px !important;
  overflow: hidden;
  border: 0 !important;
  border-bottom: 1px solid var(--op-line-faint) !important;
  border-radius: 0 !important;
  background-color: var(--op-surface-soft);
  background-image: var(--rest-activity-bg);
  background-position: center;
  background-size: cover;
  filter: saturate(.35) contrast(.9);
}

body.outpost-real-page-preview #encounter .rest-activity-art::after {
  position: absolute;
  inset: 0;
  content: "";
  background: color-mix(in srgb, var(--op-bg) 58%, transparent);
  pointer-events: none;
}

body.outpost-real-page-preview #encounter .rest-activity-art > span,
body.outpost-real-page-preview #encounter .rest-activity-art > i {
  position: absolute;
  z-index: 1;
  color: var(--op-text);
  font-style: normal;
}

body.outpost-real-page-preview #encounter .rest-activity-art > span {
  top: 9px;
  left: 10px;
  font: 8px var(--op-font-mono);
  letter-spacing: .1em;
}

body.outpost-real-page-preview #encounter .rest-activity-art > i {
  right: 12px;
  bottom: 8px;
  font: 23px var(--op-font-display);
}

body.outpost-real-page-preview #encounter .rest-activity-body {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
  padding: 12px;
}

body.outpost-real-page-preview #encounter .rest-activity-top {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

body.outpost-real-page-preview #encounter .rest-activity-top > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body.outpost-real-page-preview #encounter .rest-activity-top small,
body.outpost-real-page-preview #encounter .rest-activity-top em,
body.outpost-real-page-preview #encounter .rest-activity-spec small,
body.outpost-real-page-preview #encounter .rest-activity-reward,
body.outpost-real-page-preview #encounter .rest-activity-note {
  color: var(--op-text-faint);
  font: 7px var(--op-font-mono);
  font-style: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.outpost-real-page-preview #encounter .rest-activity-top b {
  color: var(--op-text);
  font: 14px var(--op-font-display);
  font-weight: 580;
}

body.outpost-real-page-preview #encounter .rest-activity-top em {
  padding-top: 2px;
  color: var(--op-success);
}

body.outpost-real-page-preview #encounter .rest-activity-card.disabled .rest-activity-top em {
  color: var(--op-text-faint);
}

body.outpost-real-page-preview #encounter .rest-activity-card p {
  min-height: 30px;
  margin: 0;
  color: var(--op-text-muted);
  font-size: 10px;
  line-height: 1.45;
  display: block !important;
  overflow: visible !important;
}

body.outpost-real-page-preview #encounter .rest-activity-spec {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--op-line-faint);
  border-bottom: 1px solid var(--op-line-faint);
}

body.outpost-real-page-preview #encounter .rest-activity-spec > span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 6px 7px 0;
  border-right: 1px solid var(--op-line-faint);
}

body.outpost-real-page-preview #encounter .rest-activity-spec > span:not(:first-child) { padding-left: 6px; }
body.outpost-real-page-preview #encounter .rest-activity-spec > span:last-child { border-right: 0; }

body.outpost-real-page-preview #encounter .rest-activity-spec b {
  overflow: hidden;
  color: var(--op-text);
  font: 8px var(--op-font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview #encounter .rest-activity-reward,
body.outpost-real-page-preview #encounter .rest-activity-note {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
}

/* Camp activity modals use one hierarchy across gathering, production, and creative work. */
body.outpost-real-page-preview .camp-activity-modal {
  padding: 0;
  gap: 0;
  overflow: hidden auto;
  border: 1px solid var(--op-line-strong);
  background: var(--op-bg);
}

body.outpost-real-page-preview .camp-activity-modal > :not(.camp-activity-modal-header) {
  margin-right: 18px;
  margin-left: 18px;
}

body.outpost-real-page-preview .camp-activity-modal > .modal-actions:last-child {
  margin: 0;
  padding: 12px 18px;
  border-top: 1px solid var(--op-line);
  background: var(--op-bg) !important;
}

body.outpost-real-page-preview :is(.camp-activity-modal, .camp-production-modal) > .modal-actions {
  border-radius: 0;
  background: var(--op-bg) !important;
  box-shadow: none;
}

body.outpost-real-page-preview :is(.camp-activity-modal, .camp-production-modal) > .modal-actions button {
  min-width: 108px;
  border: 1px solid var(--op-line-strong);
  border-radius: 0;
  color: var(--op-text);
  background: transparent;
  box-shadow: none;
}

body.outpost-real-page-preview :is(.camp-activity-modal, .camp-production-modal) > .modal-actions button:is(:hover, :focus-visible) {
  border-color: var(--op-text);
  color: var(--op-bg);
  background: var(--op-text);
}

body.outpost-real-page-preview .camp-activity-modal-header {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) minmax(130px, auto);
  align-items: stretch;
  min-height: 106px;
  border-bottom: 1px solid var(--op-line);
}

body.outpost-real-page-preview .camp-activity-modal-mark {
  display: grid;
  place-items: center;
  border-right: 1px solid var(--op-line);
  color: var(--op-text);
  font: 25px var(--op-font-display);
}

body.outpost-real-page-preview .camp-activity-modal-copy,
body.outpost-real-page-preview .camp-activity-modal-meta {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  padding: 14px 16px;
}

body.outpost-real-page-preview .camp-activity-modal-copy small,
body.outpost-real-page-preview .camp-activity-modal-meta > small {
  color: var(--op-text-faint);
  font: 8px var(--op-font-mono);
  letter-spacing: .1em;
}

body.outpost-real-page-preview .camp-activity-modal-copy > b {
  color: var(--op-text);
  font: 22px var(--op-font-display);
  font-weight: 580;
}

body.outpost-real-page-preview .camp-activity-modal-copy p {
  max-width: 680px;
  margin: 0;
  color: var(--op-text-muted);
  font-size: 10px;
  line-height: 1.45;
}

body.outpost-real-page-preview .camp-activity-modal-meta {
  justify-items: end;
  border-left: 1px solid var(--op-line);
  text-align: right;
}

body.outpost-real-page-preview .camp-activity-modal-meta > b {
  color: var(--op-text);
  font: 22px var(--op-font-mono);
}

body.outpost-real-page-preview .camp-activity-modal-meta .rest-minigame-ability {
  margin: 5px 0 0;
}

body.outpost-real-page-preview .camp-activity-picker .rest-recipe-grid {
  margin-top: 18px;
  margin-bottom: 18px;
}

body.outpost-real-page-preview .camp-creative-modal .modal-grid,
body.outpost-real-page-preview .camp-creative-modal .rest-drawing-pad {
  margin-top: 18px;
}

body.outpost-real-page-preview .camp-creative-modal .rest-drawing-pad canvas {
  border-color: var(--op-line-strong);
  border-radius: 0;
  box-shadow: none;
}

body.outpost-real-page-preview .camp-creative-modal .rest-drawing-tools button {
  border-color: var(--op-line);
  border-radius: 0;
  color: var(--op-text);
  background: transparent;
  box-shadow: none;
}

body.outpost-real-page-preview .camp-creative-modal .rest-drawing-tools button:is(:hover, :focus-visible),
body.outpost-real-page-preview .camp-creative-modal .rest-drawing-tools button.active {
  border-color: var(--op-line-strong);
  color: var(--op-text);
  background: var(--op-surface-soft);
  box-shadow: inset 0 -2px 0 var(--op-text);
}

body.outpost-real-page-preview .camp-creative-modal .publish-button {
  border-color: var(--op-line-strong);
  border-radius: 0;
  color: var(--op-bg);
  background: var(--op-text);
  box-shadow: none;
}

body.outpost-real-page-preview .camp-creative-modal .publish-button:is(:hover, :focus-visible) {
  border-color: var(--op-text);
  color: var(--op-bg);
  background: var(--op-text);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--op-bg) 45%, transparent);
}

body.outpost-real-page-preview .camp-production-modal {
  width: min(1180px, calc(100vw - 48px));
  max-width: 1180px;
  max-height: calc(100dvh - 48px);
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 0;
  background: var(--op-bg);
  box-shadow: none;
}

body.outpost-real-page-preview .camp-production-modal .cooking-header {
  margin: 0;
  border-bottom: 1px solid var(--op-line);
}

body.outpost-real-page-preview .camp-production-modal .outpost-workspace-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  align-items: end;
  gap: 20px;
  width: 100%;
  padding: 16px;
}

body.outpost-real-page-preview .camp-production-modal .outpost-workspace-heading {
  display: grid;
  gap: 5px;
}

body.outpost-real-page-preview .camp-production-modal .outpost-workspace-heading :is(h2, p) {
  margin: 0;
}

body.outpost-real-page-preview .camp-production-modal .outpost-workspace-aside {
  min-width: 0;
}

body.outpost-real-page-preview .camp-production-modal .cooking-layout {
  grid-template-columns: minmax(230px, .78fr) minmax(330px, 1.12fr) minmax(250px, .9fr);
  gap: 0;
  border-top: 0;
  border-left: 1px solid var(--op-line);
}

body.outpost-real-page-preview .camp-production-modal .cooking-panel:last-child {
  grid-column: auto;
}

body.outpost-real-page-preview .camp-production-modal .cooking-panel {
  border: 0;
  border-right: 1px solid var(--op-line);
  border-bottom: 1px solid var(--op-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.outpost-real-page-preview .camp-production-modal :is(.cooking-inventory-item, .cooking-recipe-card, .cooking-vessel-drop, .cooking-vessel-item, .cooking-preview) {
  border-radius: 0;
  box-shadow: none;
}

body.outpost-real-page-preview .camp-production-modal .cooking-energy {
  min-width: 0;
  padding: 10px 12px;
  border-color: var(--op-line-strong);
  border-radius: 0;
  color: var(--op-text-muted);
  background: transparent;
}

body.outpost-real-page-preview .camp-production-modal .cooking-energy b {
  color: var(--op-text);
}

body.outpost-real-page-preview .camp-production-modal .cooking-vessel-tabs button.active {
  border-color: var(--op-line-strong);
  color: var(--op-text);
  background: var(--op-surface-soft);
  box-shadow: inset 0 -2px 0 var(--op-text);
}

body.outpost-real-page-preview .camp-production-modal .cooking-vessel-art {
  filter: grayscale(1);
}

body.outpost-real-page-preview .camp-production-modal .cooking-vessel-tabs button {
  filter: grayscale(1);
}

body.outpost-real-page-preview .camp-production-modal .cooking-vessel-drop {
  border-color: var(--op-line-strong) !important;
  background: var(--op-surface-soft) !important;
}

/* Camp activity visuals --------------------------------------------------
   The field art is scenery; item buttons are real Library items and remain
   deliberately quiet until the player points at one. */
body.outpost-real-page-preview .rest-search-field {
  border: 0;
  background-color: var(--op-bg);
}

body.outpost-real-page-preview .rest-search-object {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  min-height: 62px;
  padding: 7px;
  overflow: visible;
  border: 0 !important;
  border-radius: 0;
  color: var(--op-text);
  background: color-mix(in srgb, var(--op-surface-strong) 20%, transparent);
  box-shadow: none;
  backdrop-filter: none;
  transition: transform 120ms ease, background-color 120ms ease, opacity 120ms ease;
}

body.outpost-real-page-preview .rest-search-object:is(:hover, :focus-visible) {
  z-index: 4;
  border: 0 !important;
  outline: 0;
  background: color-mix(in srgb, var(--op-surface-strong) 34%, transparent);
  transform: translate(-50%, -50%) scale(1.06);
}

body.outpost-real-page-preview .rest-search-object i {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: var(--op-text);
  background: transparent;
  font-size: 28px;
}

body.outpost-real-page-preview .rest-search-object i img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 5px 5px rgba(0,0,0,.42));
}

body.outpost-real-page-preview .rest-search-object :is(b, small) { display: none; }

body.outpost-real-page-preview .rest-search-object.good {
  border: 0 !important;
  background: color-mix(in srgb, var(--op-success) 16%, transparent);
}

body.outpost-real-page-preview .rest-search-object.bad {
  border: 0 !important;
  background: color-mix(in srgb, var(--op-danger) 16%, transparent);
}

body.outpost-real-page-preview .rest-search-object:disabled {
  opacity: .3;
  transform: translate(-50%, -50%) scale(.88);
}

body.outpost-real-page-preview .rest-hunt-lane {
  border: 0;
  outline: 0;
  box-shadow: inset 0 0 44px rgba(0,0,0,.32);
}

body.outpost-real-page-preview .rest-hunt-lane:focus-visible {
  box-shadow: inset 0 0 44px rgba(0,0,0,.32), inset 0 -2px var(--op-text);
}

body.outpost-real-page-preview .rest-hunt-target {
  border: 0;
  border-radius: 0;
  background: transparent url("../assets/ui/rest/hunting-deer-v1.png") center/contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 9px 7px rgba(0,0,0,.48));
}

body.outpost-real-page-preview .rest-tracking-fish {
  border-radius: 55% 48% 48% 55%;
}

body.outpost-real-page-preview .rest-tracking-fish::after {
  right: auto;
  left: -9px;
  top: 3px;
  border-top: 5px solid transparent;
  border-right: 10px solid var(--cyan, #6fb7c8);
  border-bottom: 5px solid transparent;
  border-left: 0;
  filter: drop-shadow(-2px 2px 2px rgba(0,0,0,.2));
}

body.outpost-real-page-preview .camp-production-modal .cooking-panel {
  min-height: 500px;
  padding: 16px;
}

body.outpost-real-page-preview .camp-production-modal .cooking-panel > h3 {
  margin: 0 0 5px;
  font: 15px var(--op-font-display);
  font-weight: 570;
}

body.outpost-real-page-preview .camp-production-modal .cooking-panel > h3::before {
  display: inline-block;
  margin-right: 8px;
  color: var(--op-text-faint);
  font: 8px var(--op-font-mono);
  letter-spacing: .08em;
  content: "01";
}

body.outpost-real-page-preview .camp-production-modal .cooking-vessel-panel > :first-child::before { content: none; }
body.outpost-real-page-preview .camp-production-modal .cooking-panel:nth-child(3) > h3::before { content: "03"; }

body.outpost-real-page-preview .camp-production-modal .cooking-inventory-grid,
body.outpost-real-page-preview .camp-production-modal .cooking-recipe-list {
  max-height: 430px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

body.outpost-real-page-preview .camp-production-modal .cooking-inventory-grid {
  grid-template-columns: minmax(0, 1fr);
}

body.outpost-real-page-preview .camp-production-modal .cooking-panel:nth-child(2) > h3::before { content: "02"; }

body.outpost-real-page-preview .camp-production-modal .cooking-vessel-tabs::before {
  align-self: center;
  margin-right: auto;
  color: var(--op-text-faint);
  font: 8px var(--op-font-mono);
  letter-spacing: .08em;
  content: "02 · STATION";
}

body.outpost-real-page-preview .camp-production-modal :is(.cooking-inventory-item, .cooking-recipe-card) {
  border-color: var(--op-line-faint);
  background: transparent;
}

body.outpost-real-page-preview .camp-production-modal :is(.cooking-inventory-item, .cooking-recipe-card):is(:hover, :focus-within),
body.outpost-real-page-preview .camp-production-modal .cooking-inventory-item.selected {
  border-color: var(--op-line-strong);
  background: var(--op-surface-soft);
}

body.outpost-real-page-preview .camp-production-modal :is(button, .cooking-energy, .cooking-vessel-tabs, .cooking-qty) {
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.outpost-real-page-preview .camp-production-modal :is(.cooking-inventory-item em, .cooking-poison-warning, .toxic) {
  color: var(--op-text-muted) !important;
  background: transparent !important;
  border-color: var(--op-line-strong) !important;
}

body.outpost-real-page-preview .camp-production-modal .publish-button {
  border-color: var(--op-text) !important;
  color: var(--op-bg) !important;
  background: var(--op-text) !important;
}

body.outpost-real-page-preview .camp-production-modal .cooking-recipe-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
}

body.outpost-real-page-preview .camp-production-modal .cooking-recipe-title {
  min-width: 0;
}

body.outpost-real-page-preview .camp-smithing-training-modal {
  width: min(1180px, calc(100vw - 48px));
  max-width: 1180px;
  max-height: calc(100dvh - 48px);
  padding: 0;
  overflow: hidden auto;
  border: 1px solid var(--op-line-strong);
  border-radius: 0;
  color: var(--op-text);
  background: var(--op-bg);
  box-shadow: none;
}

body.outpost-real-page-preview .camp-smithing-training-modal #campSmithingTrainingRoot,
body.outpost-real-page-preview .camp-smithing-training-modal .st-system {
  min-height: min(680px, calc(100dvh - 110px));
  color: var(--op-text);
  background: var(--op-bg);
}

body.outpost-real-page-preview .camp-smithing-training-modal :is(button, code, .st-picker-row, .st-chip, .st-skill-card, .st-focus-card, .st-requirements, .st-confirm-panel, .st-outcome) {
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.outpost-real-page-preview .camp-smithing-training-modal :is(.st-stage-heading h2 span, .st-weapon-silhouette span, .st-skill-card b) {
  color: var(--op-text);
}

body.outpost-real-page-preview .camp-smithing-training-modal > .modal-actions {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 10px 14px;
  border-top: 1px solid var(--op-line);
  background: var(--op-bg);
}

body.outpost-real-page-preview .camp-smithing-training-modal > .modal-actions button {
  min-width: 108px;
  border: 1px solid var(--op-line-strong);
  border-radius: 0;
  color: var(--op-text);
  background: transparent;
  box-shadow: none;
}

/* Player Battle ------------------------------------------------------- */

body.outpost-real-page-preview #encounter .battle-encounter-experience {
  display: grid;
  min-width: 0;
  gap: 0;
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-session-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 210px) minmax(140px, 210px);
  min-height: 66px;
  border-top: 1px solid var(--op-line);
  border-bottom: 1px solid var(--op-line);
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-session-header > span {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  padding: 10px 14px;
  border-right: 1px solid var(--op-line-faint);
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-session-header > span:last-child { border-right: 0; }

body.outpost-real-page-preview :is(#encounter, #dm) .battle-session-header small,
body.outpost-real-page-preview :is(#encounter, #dm) .battle-session-header em {
  overflow: hidden;
  color: var(--op-text-faint);
  font: 8px var(--op-font-mono);
  font-style: normal;
  letter-spacing: .09em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-session-header b {
  overflow: hidden;
  color: var(--op-text);
  font: 15px var(--op-font-display);
  font-weight: 560;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-session-header .battle-session-metric b {
  font: 13px var(--op-font-mono);
}

body.outpost-real-page-preview #encounter .battle-session-header[data-battle-session-state="ready"] .battle-session-state {
  box-shadow: inset 2px 0 0 var(--op-success);
}

body.outpost-real-page-preview #encounter .battle-session-header[data-battle-session-state="waiting"] .battle-session-state {
  opacity: .7;
}

body.outpost-real-page-preview #encounter .encounter-battle-frame.panel {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.outpost-real-page-preview #encounter .battle-board-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

body.outpost-real-page-preview #encounter .battle-shell {
  grid-template-columns: minmax(0, 1fr) clamp(214px, 19vw, 270px);
  height: clamp(430px, calc(100dvh - 275px), 790px);
  min-height: 0;
  background: transparent;
}

body.outpost-real-page-preview #encounter .battle-map-panel {
  min-width: 0;
  min-height: 0;
  padding: 0;
}

body.outpost-real-page-preview #encounter .battle-board {
  height: 100%;
  min-height: 0;
}

body.outpost-real-page-preview #encounter .turn-panel {
  min-width: 0;
  height: 100%;
  max-height: none;
  padding: 0 0 0 14px;
  overflow: hidden;
}

body.outpost-real-page-preview #encounter .turn-panel-head {
  min-height: 46px;
  padding: 0 10px;
  border-bottom: 1px solid var(--op-line);
}

body.outpost-real-page-preview #encounter .turn-timeline {
  max-height: calc(100% - 46px);
  padding-right: 6px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body.outpost-real-page-preview #encounter .turn-row {
  min-height: 52px;
  padding: 7px 8px;
}

body.outpost-real-page-preview #encounter .turn-row.active {
  box-shadow: inset 2px 0 0 var(--op-text);
  background: var(--op-surface-soft);
}

/* DM Battle Encounter draft + live session --------------------------- */

body.outpost-real-page-preview #dm .dm-battle-design-workspace {
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--op-line);
  border-bottom: 1px solid var(--op-line);
}

body.outpost-real-page-preview #dm .dm-battle-design-board.panel {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.outpost-real-page-preview #dm .dm-battle-design-side {
  position: static;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: none;
  padding: 0;
  overflow: visible;
  border-top: 1px solid var(--op-line);
  border-left: 0;
  scrollbar-gutter: auto;
}

body.outpost-real-page-preview #dm .dm-battle-design-side > :last-child {
  grid-column: 1 / -1;
}

body.outpost-real-page-preview #dm .dm-battle-design-side > .panel {
  margin: 0;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--op-line-faint);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.outpost-real-page-preview .battle-design-hex-board {
  aspect-ratio: var(--hex-board-ratio, 1.72);
  min-height: 0;
  width: 100%;
  height: auto;
  max-height: 100%;
  margin: auto;
  background-color: var(--battle-board-bg, #05080a);
}

body.outpost-real-page-preview .battle-design-hex-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
}

body.outpost-real-page-preview .battle-design-hex-board .battle-hex-cell {
  position: absolute;
  left: var(--hex-left);
  top: var(--hex-top);
  width: var(--hex-width);
  height: var(--hex-height);
  min-width: 0;
  min-height: 0;
  border: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: transparent;
}

body.outpost-real-page-preview .battle-design-hex-board .battle-hex-outline {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  transition: opacity .14s ease;
}

body.outpost-real-page-preview .battle-design-hex-board .battle-hex-outline polygon {
  fill: none;
  stroke: var(--battle-grid-line, rgba(193, 207, 218, .34));
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

body.outpost-real-page-preview .battle-design-hex-board .battle-hex-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: inherit;
  background: transparent;
  transition: background-color .14s ease, opacity .14s ease;
  pointer-events: none;
}

body.outpost-real-page-preview .battle-design-hex-board .battle-hex-cell:hover::after,
body.outpost-real-page-preview .battle-design-hex-board .battle-hex-cell:focus-visible::after {
  background: var(--battle-grid-hover, rgba(111, 183, 200, .18));
}

body.outpost-real-page-preview .battle-design-hex-board .battle-hex-cell.blocked::after {
  background: repeating-linear-gradient(135deg, rgba(239, 68, 68, .46), rgba(239, 68, 68, .46) 6px, rgba(41, 8, 11, .42) 6px, rgba(41, 8, 11, .42) 12px);
}

body.outpost-real-page-preview .battle-design-hex-board .battle-hex-cell.difficult::after {
  background: repeating-linear-gradient(135deg, rgba(245, 158, 11, .32), rgba(245, 158, 11, .32) 7px, rgba(52, 32, 8, .32) 7px, rgba(52, 32, 8, .32) 14px);
}

body.outpost-real-page-preview .battle-design-hex-board .battle-hex-cell.illumination-light::after {
  background: radial-gradient(circle, rgba(250, 234, 178, .34), rgba(4, 8, 11, .42) 72%);
}

body.outpost-real-page-preview .battle-design-hex-board .battle-hex-cell.illumination-darkness::after {
  background: radial-gradient(circle, rgba(51, 31, 89, .42), rgba(1, 3, 7, .82) 72%);
}

body.outpost-real-page-preview .battle-design-hex-board .battle-hex-cell.illumination-mixed::after {
  background: radial-gradient(circle, rgba(117, 95, 144, .36), rgba(24, 22, 28, .68) 72%);
}

body.outpost-real-page-preview .battle-design-hex-board.hide-grid .battle-hex-cell {
  background: transparent;
}

body.outpost-real-page-preview .battle-design-hex-board.hide-grid .battle-hex-outline,
body.outpost-real-page-preview .battle-design-hex-board.hide-grid .battle-hex-cell::after {
  opacity: 0;
}

body.outpost-real-page-preview .battle-design-hex-board.hide-grid .battle-hex-cell:is(.blocked, .difficult, .illumination-light, .illumination-darkness, .illumination-mixed)::after {
  opacity: 1;
}

body.outpost-real-page-preview .battle-design-hex-board .battle-design-hex-token,
body.outpost-real-page-preview .battle-design-hex-board .battle-design-hex-impact {
  left: var(--hex-left);
  top: var(--hex-top);
  width: var(--hex-token-width);
  height: var(--hex-token-height);
  transform: translate(-50%, -50%);
  padding: 3px;
}

body.outpost-real-page-preview .battle-design-hex-board .battle-design-hex-token {
  z-index: 3;
}

body.outpost-real-page-preview .battle-design-hex-board .battle-design-hex-token.remote-walk {
  animation: outpostHexTokenWalk .46s cubic-bezier(.2, .78, .2, 1) both;
}

@keyframes outpostHexTokenWalk {
  from { transform: translate(-50%, -50%) translate(var(--remote-dx, 0), var(--remote-dy, 0)); }
  to { transform: translate(-50%, -50%) translate(0, 0); }
}

body.outpost-real-page-preview .battle-design-hex-board .battle-hex-edge {
  position: absolute;
  left: var(--edge-left);
  top: var(--edge-top);
  z-index: 2;
  width: var(--edge-width);
  height: 3px;
  transform: translate(-50%, -50%) rotate(var(--edge-angle));
  transform-origin: center;
  pointer-events: none;
  background: var(--op-text-muted);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--battle-board-bg) 72%, transparent);
}

body.outpost-real-page-preview .battle-design-hex-board .battle-hex-edge.edge-wall { height: 6px; background: var(--op-text); }
body.outpost-real-page-preview .battle-design-hex-board .battle-hex-edge.edge-door { height: 5px; background: #d6a84d; }
body.outpost-real-page-preview .battle-design-hex-board .battle-hex-edge.edge-door.is-open {
  opacity: .72;
  background: repeating-linear-gradient(90deg, #6fb88d 0 28%, transparent 28% 55%, #6fb88d 55% 100%);
}
body.outpost-real-page-preview .battle-design-hex-board .battle-hex-edge.cover-half { box-shadow: 0 0 0 1px #67a8c7; }
body.outpost-real-page-preview .battle-design-hex-board .battle-hex-edge.cover-full { box-shadow: 0 0 0 2px #67a8c7; }
}

body.outpost-real-page-preview #dm .dm-battle-rail-heading small {
  color: var(--op-text-faint);
  font: 7px var(--op-font-mono);
  letter-spacing: .11em;
}

body.outpost-real-page-preview #dm .dm-battle-live-board .battle-session-header {
  margin-top: 0;
}

body.outpost-real-page-preview #dm .dm-battle-rail-heading {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--op-line-faint);
}

body.outpost-real-page-preview #dm .dm-battle-rail-heading b {
  color: var(--op-text);
  font: 16px var(--op-font-display);
  font-weight: 560;
}

body.outpost-real-page-preview #dm .dm-battle-rail-heading span {
  color: var(--op-text-muted);
  font-size: 10px;
  line-height: 1.45;
}

/* Shared Battle Surface ------------------------------------------------
   One board shell is used by Player, DM draft, and DM live contexts.
   Camera state is local presentation state; it never mutates Encounter data. */
body.outpost-real-page-preview :is(#encounter, #dm) .battle-surface {
  --battle-board-bg: #05080a;
  --battle-grid-line: rgba(193, 207, 218, .34);
  --battle-grid-hover: rgba(111, 183, 200, .18);
  gap: 14px;
  min-width: 0;
  background: transparent;
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-surface .battle-map-panel {
  display: grid;
  grid-template-rows: 46px minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--op-line);
  background: color-mix(in srgb, var(--op-bg) 96%, transparent);
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-surface-toolbar {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-width: 0;
  border-bottom: 1px solid var(--op-line);
  background: var(--op-bg);
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-surface-meta {
  display: grid;
  grid-template-columns: auto auto;
  align-content: center;
  column-gap: 9px;
  min-width: 0;
  padding: 6px 12px;
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-surface-meta small,
body.outpost-real-page-preview :is(#encounter, #dm) .battle-surface-meta em {
  color: var(--op-text-faint);
  font: 7px var(--op-font-mono);
  font-style: normal;
  letter-spacing: .1em;
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-surface-meta b {
  color: var(--op-text);
  font: 10px var(--op-font-mono);
  letter-spacing: .08em;
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-surface-meta em {
  grid-column: 2;
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-camera-controls {
  display: grid;
  grid-template-columns: 34px 48px 46px 34px;
  align-items: stretch;
  border-left: 1px solid var(--op-line);
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-camera-controls:has([data-dm-toggle-battle-grid]) {
  grid-template-columns: 62px 34px 48px 46px 34px;
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-camera-controls :is(button, output) {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--op-line-faint);
  border-radius: 0;
  color: var(--op-text-muted);
  background: transparent;
  box-shadow: none;
  font: 9px var(--op-font-mono);
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-camera-controls button:last-child { border-right: 0; }
body.outpost-real-page-preview :is(#encounter, #dm) .battle-camera-controls button:hover {
  color: var(--op-text);
  background: var(--op-surface-soft);
  transform: none;
}

/* Combat feedback + player awareness share one quiet presentation layer. */
body.outpost-real-page-preview #encounter .battle-board-viewport {
  position: relative;
}

/* Turn Transition ----------------------------------------------------
 * A short presentation-only cue derived from the current Battle turn.
 * It never captures input and disappears without rebuilding the board. */
body.outpost-real-page-preview #encounter .battle-turn-cue {
  position: absolute;
  z-index: 9;
  top: 72px;
  left: 50%;
  display: grid;
  grid-template-columns: minmax(128px, auto) auto;
  min-width: 250px;
  max-width: min(440px, calc(100% - 32px));
  border: 1px solid var(--op-line-strong);
  border-radius: 0;
  color: var(--op-text);
  background: color-mix(in srgb, var(--op-bg) 94%, transparent);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--op-bg) 55%, transparent);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -8px);
  transition: opacity 150ms ease-out, transform 180ms ease-out;
}

body.outpost-real-page-preview #encounter .battle-turn-cue.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

body.outpost-real-page-preview #encounter .battle-turn-cue.is-leaving {
  opacity: 0;
  transform: translate(-50%, -4px);
}

body.outpost-real-page-preview #encounter .battle-turn-cue::before {
  content: "";
  position: absolute;
  inset: -1px auto -1px -1px;
  width: 2px;
  background: var(--op-text-faint);
}

body.outpost-real-page-preview #encounter .battle-turn-cue.is-own-turn::before {
  background: var(--op-success);
}

body.outpost-real-page-preview #encounter .battle-turn-cue-copy {
  display: grid;
  align-content: center;
  gap: 1px;
  min-width: 0;
  padding: 8px 12px;
}

body.outpost-real-page-preview #encounter .battle-turn-cue :is(small, em, i) {
  font-family: var(--op-font-mono);
  font-style: normal;
  text-transform: uppercase;
}

body.outpost-real-page-preview #encounter .battle-turn-cue-copy small,
body.outpost-real-page-preview #encounter .battle-turn-cue-copy em {
  overflow: hidden;
  color: var(--op-text-faint);
  font-size: 7px;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview #encounter .battle-turn-cue-copy b {
  font: 14px var(--op-font-display);
  font-weight: 650;
  letter-spacing: .01em;
}

body.outpost-real-page-preview #encounter .battle-turn-cue-resources {
  display: grid;
  grid-template-columns: repeat(3, minmax(52px, auto));
  border-left: 1px solid var(--op-line-faint);
}

body.outpost-real-page-preview #encounter .battle-turn-cue-resources i {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  min-width: 54px;
  padding: 7px 8px;
  border-right: 1px solid var(--op-line-faint);
}

body.outpost-real-page-preview #encounter .battle-turn-cue-resources i:last-child {
  border-right: 0;
}

body.outpost-real-page-preview #encounter .battle-turn-cue-resources small {
  color: var(--op-text-faint);
  font-size: 6px;
  letter-spacing: .08em;
}

body.outpost-real-page-preview #encounter .battle-turn-cue-resources b {
  font: 10px var(--op-font-mono);
  font-weight: 650;
}

body.outpost-real-page-preview #quickActionBar.battle-turn-refreshed .quick-status-card.action-economy {
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--op-success) 72%, transparent);
}

body.outpost-real-page-preview[data-op-motion="reduced"] #encounter .battle-turn-cue {
  transition: none;
}

@media (max-width: 760px) {
  body.outpost-real-page-preview #encounter .battle-turn-cue {
    top: 84px;
    grid-template-columns: minmax(112px, 1fr);
    min-width: min(280px, calc(100% - 24px));
  }

  body.outpost-real-page-preview #encounter .battle-turn-cue-resources {
    border-top: 1px solid var(--op-line-faint);
    border-left: 0;
  }
}

body.outpost-real-page-preview #encounter .battle-player-awareness {
  position: absolute;
  z-index: 34;
  top: 10px;
  left: 10px;
  right: 10px;
  display: grid;
  grid-template-columns: minmax(130px, 1.2fr) minmax(118px, 1fr) minmax(104px, .7fr) minmax(142px, 1.15fr);
  max-width: 760px;
  color: var(--text, #eef2f3);
  background: rgba(5, 8, 10, .82);
  border: 1px solid rgba(218, 226, 230, .2);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .22);
  pointer-events: none;
}

body.outpost-real-page-preview #encounter .battle-player-awareness > span {
  position: relative;
  min-width: 0;
  padding: 7px 10px 8px;
  border-right: 1px solid rgba(218, 226, 230, .14);
}

body.outpost-real-page-preview #encounter .battle-player-awareness > span:last-child {
  border-right: 0;
}

body.outpost-real-page-preview #encounter .battle-player-awareness :is(small, b, em) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview #encounter .battle-player-awareness small {
  margin-bottom: 2px;
  color: var(--muted, #8d979c);
  font: 600 8px/1.1 var(--mono, monospace);
  letter-spacing: .11em;
}

body.outpost-real-page-preview #encounter .battle-player-awareness b {
  font: 650 11px/1.15 var(--sans, sans-serif);
}

body.outpost-real-page-preview #encounter .battle-player-awareness em {
  margin-top: 2px;
  color: var(--muted, #a6afb3);
  font: 500 8px/1.15 var(--mono, monospace);
  font-style: normal;
}

body.outpost-real-page-preview #encounter .battle-awareness-target.has-target::before,
body.outpost-real-page-preview #encounter .battle-awareness-threat.has-threat::before,
body.outpost-real-page-preview #encounter .battle-awareness-cue::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: #d8e0e3;
  opacity: .72;
}

body.outpost-real-page-preview #encounter .battle-awareness-threat.has-threat::before,
body.outpost-real-page-preview #encounter .battle-player-awareness.is-warn .battle-awareness-cue::before {
  background: #e2a557;
}

body.outpost-real-page-preview #encounter .battle-player-awareness.is-danger .battle-awareness-cue::before {
  background: #ff6673;
}

body.outpost-real-page-preview #encounter .battle-player-awareness.is-reaction .battle-awareness-cue::before {
  background: #9fe3c2;
}

body.outpost-real-page-preview #encounter .battle-turn-surface .turn-row {
  position: relative;
}

body.outpost-real-page-preview #encounter .battle-turn-surface .turn-awareness-signal {
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: transparent;
}

body.outpost-real-page-preview #encounter .battle-turn-surface .turn-row.is-player-self .turn-awareness-signal {
  background: #f2f5f5;
}

body.outpost-real-page-preview #encounter .battle-turn-surface .turn-row.is-player-target .turn-awareness-signal {
  background: #9fb2ba;
}

body.outpost-real-page-preview #encounter .battle-turn-surface .turn-row.is-immediate-threat .turn-awareness-signal {
  background: #e2a557;
}

body.outpost-real-page-preview #encounter .battle-turn-surface .turn-row.is-low-health .turn-name {
  color: #ff8a94;
}

body[data-outpost-theme="light"].outpost-real-page-preview #encounter .battle-player-awareness,
body[data-op-theme="light"].outpost-real-page-preview #encounter .battle-player-awareness {
  color: #171a1c;
  background: rgba(245, 244, 239, .9);
  border-color: rgba(31, 38, 42, .24);
  box-shadow: 0 8px 24px rgba(41, 46, 49, .1);
}

body[data-outpost-theme="light"].outpost-real-page-preview #encounter .battle-player-awareness > span,
body[data-op-theme="light"].outpost-real-page-preview #encounter .battle-player-awareness > span {
  border-right-color: rgba(31, 38, 42, .14);
}

@media (max-width: 980px) {
  body.outpost-real-page-preview #encounter .battle-player-awareness {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 430px;
  }
  body.outpost-real-page-preview #encounter .battle-player-awareness > span:nth-child(2) {
    border-right: 0;
  }
  body.outpost-real-page-preview #encounter .battle-player-awareness > span:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(218, 226, 230, .14);
  }
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-board-viewport {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--battle-board-bg);
  isolation: isolate;
  container-type: size;
  touch-action: none;
  cursor: default;
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-board-viewport.is-panning {
  cursor: grabbing;
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-board-stage {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  transform: translate3d(var(--battle-pan-x, 0px), var(--battle-pan-y, 0px), 0) scale(var(--battle-view-zoom, 1));
  transform-origin: 50% 50%;
  transition: transform .16s cubic-bezier(.2, .75, .25, 1);
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-surface[data-battle-renderer="phaser"] .battle-board-stage {
  transform: none;
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-board-stage > .battle-board {
  width: 100%;
  max-width: 100%;
  margin: auto;
  border: 0;
  border-radius: 0;
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-board-stage > .battle-design-hex-board {
  width: min(100cqw, calc(100cqh * var(--hex-board-ratio, 1.72)));
  height: auto;
  max-height: 100cqh;
  aspect-ratio: var(--hex-board-ratio, 1.72);
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-design-hex-board .battle-hex-cell:hover,
body.outpost-real-page-preview :is(#encounter, #dm) .battle-design-hex-board .battle-hex-cell:focus-visible {
  transform: translate(-50%, -50%);
  box-shadow: none;
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-design-hex-board .battle-hex-cell {
  -webkit-user-drag: none;
  user-select: none;
  touch-action: none;
}

body.outpost-real-page-preview :is(#encounter, #dm) :is(.battle-surface .turn-panel, .turn-panel.battle-turn-surface) {
  gap: 0;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: stretch;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--op-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Combat Recap -------------------------------------------------------
 * A read-only projection of the existing Roll/Combat history. The
 * panel keeps no authoritative state and occupies the Turn Order rail. */
body.outpost-real-page-preview #encounter .combat-recap {
  display: grid;
  min-width: 0;
  border-bottom: 1px solid var(--op-line);
  border-radius: 0;
  color: var(--op-text);
  background: var(--op-surface-soft);
}

body.outpost-real-page-preview #encounter .combat-recap[hidden] {
  display: none !important;
}

body.outpost-real-page-preview #encounter .combat-recap > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 34px;
  border-bottom: 1px solid var(--op-line-faint);
}

body.outpost-real-page-preview #encounter .combat-recap > header > span {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
  padding: 6px 10px 6px 12px;
}

body.outpost-real-page-preview #encounter .combat-recap :is(small, strong, em, button) {
  font-family: var(--op-font-mono);
  font-style: normal;
  text-transform: uppercase;
}

body.outpost-real-page-preview #encounter .combat-recap > header small {
  color: var(--op-text-faint);
  font-size: 6px;
  letter-spacing: .11em;
}

body.outpost-real-page-preview #encounter .combat-recap > header b {
  overflow: hidden;
  font-size: 10px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview #encounter .combat-recap > header button {
  min-width: 66px;
  min-height: 34px;
  padding: 0 8px;
  border: 0;
  border-left: 1px solid var(--op-line-faint);
  border-radius: 0;
  color: var(--op-text-muted);
  background: transparent;
  box-shadow: none;
  font-size: 7px;
  letter-spacing: .06em;
}

body.outpost-real-page-preview #encounter .combat-recap > header button:is(:hover, :focus-visible) {
  color: var(--op-text);
  background: var(--op-surface-strong);
}

body.outpost-real-page-preview #encounter .combat-recap ol {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.outpost-real-page-preview #encounter .combat-recap li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 8px;
  min-height: 45px;
  padding: 7px 10px 7px 12px;
  border-bottom: 1px solid var(--op-line-faint);
}

body.outpost-real-page-preview #encounter .combat-recap li:last-child {
  border-bottom: 0;
}

body.outpost-real-page-preview #encounter .combat-recap li::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--op-text-muted);
}

body.outpost-real-page-preview #encounter .combat-recap li.is-critical::before { background: var(--op-warning); }
body.outpost-real-page-preview #encounter .combat-recap li.is-miss::before { background: var(--op-text-faint); }
body.outpost-real-page-preview #encounter .combat-recap li.is-heal::before { background: var(--op-success); }

body.outpost-real-page-preview #encounter .combat-recap li > span:first-child {
  display: grid;
  min-width: 0;
}

body.outpost-real-page-preview #encounter .combat-recap li > span:first-child b {
  overflow: hidden;
  color: var(--op-text);
  font-size: 9px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview #encounter .combat-recap li > span:first-child small,
body.outpost-real-page-preview #encounter .combat-recap-result small {
  overflow: hidden;
  color: var(--op-text-faint);
  font-size: 7px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview #encounter .combat-recap-result {
  display: grid;
  justify-items: end;
}

body.outpost-real-page-preview #encounter .combat-recap-result strong {
  color: var(--op-text-muted);
  font-size: 8px;
  letter-spacing: .05em;
}

body.outpost-real-page-preview #encounter .combat-recap li.is-critical .combat-recap-result strong { color: var(--op-warning); }
body.outpost-real-page-preview #encounter .combat-recap li.is-heal .combat-recap-result strong { color: var(--op-success); }

body.outpost-real-page-preview #encounter .combat-recap li > em {
  grid-column: 1 / -1;
  color: var(--op-text);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: .05em;
}

body.outpost-real-page-preview :is(#encounter, #dm) :is(.battle-surface, .battle-turn-surface) .turn-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 58px;
  padding: 8px 0 8px 14px;
  border-bottom: 1px solid var(--op-line);
}

body.outpost-real-page-preview :is(#encounter, #dm) :is(.battle-surface, .battle-turn-surface) .turn-timeline {
  min-height: 0;
  max-height: none;
  padding: 0;
  overflow: auto;
  scrollbar-gutter: stable;
}

body.outpost-real-page-preview :is(#encounter, #dm) :is(.battle-surface, .battle-turn-surface) .turn-panel-head > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.outpost-real-page-preview :is(#encounter, #dm) :is(.battle-surface, .battle-turn-surface) .turn-panel-head small,
body.outpost-real-page-preview :is(#encounter, #dm) :is(.battle-surface, .battle-turn-surface) .turn-panel-head em {
  overflow: hidden;
  color: var(--op-text-faint);
  font: 7px var(--op-font-mono);
  font-style: normal;
  letter-spacing: .09em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview :is(#encounter, #dm) :is(.battle-surface, .battle-turn-surface) .turn-panel-head b {
  color: var(--op-text);
  font: 14px var(--op-font-display);
  font-weight: 560;
}

body.outpost-real-page-preview :is(#encounter, #dm) :is(.battle-surface, .battle-turn-surface) .turn-end-mini {
  min-width: 64px;
  height: 100%;
  min-height: 0;
  padding: 0 8px;
  border: 0;
  border-left: 1px solid var(--op-line);
  border-radius: 0;
  color: var(--op-text);
  background: transparent;
  box-shadow: none;
  font: 8px var(--op-font-mono);
}

body.outpost-real-page-preview :is(#encounter, #dm) :is(.battle-surface, .battle-turn-surface) .turn-row {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  min-height: 50px;
  margin: 0;
  padding: 6px 8px;
  border: 0;
  border-bottom: 1px solid var(--op-line-faint);
  border-radius: 0;
  color: var(--op-text-muted);
  background: transparent;
  box-shadow: none;
  transform: none;
}

body.outpost-real-page-preview :is(#encounter, #dm) :is(.battle-surface, .battle-turn-surface) .turn-row:hover {
  color: var(--op-text);
  background: var(--op-surface-soft);
  transform: none;
}

body.outpost-real-page-preview :is(#encounter, #dm) :is(.battle-surface, .battle-turn-surface) .turn-row.active {
  color: var(--op-text);
  background: var(--op-surface-soft);
  box-shadow: inset 2px 0 0 var(--op-text);
  transform: none;
}

body.outpost-real-page-preview :is(#encounter, #dm) :is(.battle-surface, .battle-turn-surface) .turn-token-icon {
  width: 32px;
  height: 32px;
  border: 1px solid var(--op-line-strong);
  border-radius: 0;
  color: var(--op-text);
  background: var(--op-surface-soft);
  box-shadow: none;
}

body.outpost-real-page-preview :is(#encounter, #dm) :is(.battle-surface, .battle-turn-surface) .turn-name {
  color: var(--op-text-muted);
  font-family: var(--op-font-display);
  font-size: 10px;
  font-weight: 560;
}

body.outpost-real-page-preview :is(#encounter, #dm) :is(.battle-surface, .battle-turn-surface) .turn-name small {
  color: var(--op-text-faint);
  font: 7px var(--op-font-mono);
}

body.outpost-real-page-preview :is(#encounter, #dm) :is(.battle-surface, .battle-turn-surface) .turn-initiative {
  display: grid;
  gap: 2px;
  min-width: 30px;
  justify-items: end;
  color: var(--op-text-faint);
  font-family: var(--op-font-mono);
  line-height: 1;
}

body.outpost-real-page-preview :is(#encounter, #dm) :is(.battle-surface, .battle-turn-surface) .turn-initiative small {
  font-size: 6px;
  letter-spacing: .08em;
}

body.outpost-real-page-preview :is(#encounter, #dm) :is(.battle-surface, .battle-turn-surface) .turn-initiative b {
  color: var(--op-text-muted);
  font-size: 10px;
  font-weight: 620;
}

body.outpost-real-page-preview :is(#encounter, #dm) :is(.battle-surface, .battle-turn-surface) .turn-initiative.pending b {
  color: var(--op-text-faint);
}

body.outpost-real-page-preview :is(#encounter, #dm) :is(.battle-surface, .battle-turn-surface) .turn-row.group-active .turn-initiative {
  margin-right: 14px;
}

body.outpost-real-page-preview :is(#encounter, #dm) :is(.battle-surface, .battle-turn-surface) .turn-row.group-active::after {
  content: "";
  top: 50%;
  right: 9px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid var(--op-text);
  transform: translateY(-50%);
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-design-hex-token {
  padding: 3px;
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-design-hex-token .battle-token-inner {
  border: 1px solid color-mix(in srgb, var(--op-text) 38%, transparent);
  border-radius: 0;
  color: #fff;
  background: rgba(4, 7, 9, .82);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .34);
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-design-hex-token .battle-token-inner:has(img),
body.outpost-real-page-preview :is(#encounter, #dm) .battle-design-hex-token .battle-token-inner:has(.battle-sprite-frame) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-design-hex-token.active-turn .battle-token-inner {
  border-color: color-mix(in srgb, var(--op-text) 54%, transparent);
  box-shadow: none;
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-design-hex-token.active-turn::before {
  top: 2px;
  z-index: 7;
  border-left-width: 5px;
  border-right-width: 5px;
  border-top-width: 7px;
  border-top-color: var(--op-text);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .8));
  pointer-events: none;
}

body.outpost-real-page-preview:is([data-op-theme="light"], [data-outpost-theme="light"]) :is(#encounter, #dm) .battle-surface {
  --battle-board-bg: #f0efea;
  --battle-grid-line: rgba(24, 27, 30, .3);
  --battle-grid-hover: rgba(24, 88, 110, .14);
}

body.outpost-real-page-preview:is([data-op-theme="light"], [data-outpost-theme="light"]) :is(#encounter, #dm) .battle-design-hex-board.has-battle-background {
  --battle-board-bg: #05080a;
  --battle-grid-line: rgba(218, 229, 236, .38);
  --battle-grid-hover: rgba(111, 183, 200, .2);
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-design-hex-token.selected-target .battle-token-inner {
  border-color: transparent;
  box-shadow: none;
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-design-hex-token.selected-target::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(#ef4444, #ef4444) left top / 10px 1px no-repeat,
    linear-gradient(#ef4444, #ef4444) left top / 1px 10px no-repeat,
    linear-gradient(#ef4444, #ef4444) right top / 10px 1px no-repeat,
    linear-gradient(#ef4444, #ef4444) right top / 1px 10px no-repeat,
    linear-gradient(#ef4444, #ef4444) left bottom / 10px 1px no-repeat,
    linear-gradient(#ef4444, #ef4444) left bottom / 1px 10px no-repeat,
    linear-gradient(#ef4444, #ef4444) right bottom / 10px 1px no-repeat,
    linear-gradient(#ef4444, #ef4444) right bottom / 1px 10px no-repeat;
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-design-hex-token > small {
  left: 50%;
  right: auto;
  bottom: -11px;
  width: max-content;
  max-width: 92px;
  transform: translateX(-50%);
  color: #f4f4f2;
  font: 8px var(--op-font-mono);
  text-shadow: 0 1px 4px #000, 0 1px 8px #000;
  opacity: 0;
  transition: opacity .12s ease;
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-design-hex-token:is(:hover, :focus-within, .controlled-token, .selected-target) > small {
  opacity: 1;
}

body.outpost-real-page-preview #encounter .battle-design-hex-token.controlled-token::after {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(var(--op-text), var(--op-text)) left top / 9px 1px no-repeat,
    linear-gradient(var(--op-text), var(--op-text)) left top / 1px 9px no-repeat,
    linear-gradient(var(--op-text), var(--op-text)) right top / 9px 1px no-repeat,
    linear-gradient(var(--op-text), var(--op-text)) right top / 1px 9px no-repeat,
    linear-gradient(var(--op-text), var(--op-text)) left bottom / 9px 1px no-repeat,
    linear-gradient(var(--op-text), var(--op-text)) left bottom / 1px 9px no-repeat,
    linear-gradient(var(--op-text), var(--op-text)) right bottom / 9px 1px no-repeat,
    linear-gradient(var(--op-text), var(--op-text)) right bottom / 1px 9px no-repeat;
  opacity: .72;
}

body.outpost-real-page-preview #encounter .battle-token-hp.controlled-health {
  border-color: color-mix(in srgb, var(--op-text) 92%, transparent);
  box-shadow: 0 1px 5px color-mix(in srgb, var(--op-bg) 64%, transparent);
}

body.outpost-real-page-preview .battle-token-drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 180;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  pointer-events: none;
  will-change: transform;
  color: var(--op-text);
}

body.outpost-real-page-preview .battle-move-destination-ring {
  position: absolute;
  inset: 5px;
  border: 1px solid currentColor;
  background: color-mix(in srgb, var(--op-surface) 62%, transparent);
  clip-path: polygon(25% 7%, 75% 7%, 100% 50%, 75% 93%, 25% 93%, 0 50%);
  opacity: .78;
}

body.outpost-real-page-preview .battle-move-destination-ring::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid currentColor;
  clip-path: inherit;
  opacity: .45;
}

body.outpost-real-page-preview .battle-move-destination-label {
  position: relative;
  z-index: 1;
  padding: 2px 4px;
  color: currentColor;
  background: var(--op-bg);
  font: 600 7px/1 var(--op-font-mono);
  letter-spacing: .12em;
}

body.outpost-real-page-preview .battle-token-drag-ghost.valid-target {
  color: var(--op-accent-cyan, #6fb7c8);
}

body.outpost-real-page-preview .battle-token-drag-ghost.invalid-target {
  color: var(--op-danger, #ef6b73);
}

@supports not (width: 1cqw) {
  body.outpost-real-page-preview :is(#encounter, #dm) .battle-board-stage > .battle-design-hex-board {
    width: 100%;
    height: auto;
  }
}

body.outpost-real-page-preview #dm .dm-battle-design-board .design-preview-grid {
  padding: 0;
  background: transparent;
}

body.outpost-real-page-preview #dm .dm-battle-design-board .battle-surface {
  grid-template-columns: minmax(0, 1fr) clamp(190px, 18vw, 240px);
  height: clamp(460px, calc(100dvh - 310px), 720px);
}

body.outpost-real-page-preview #dm .dm-battle-live-board {
  padding-right: 0;
}

body.outpost-real-page-preview #dm .dm-battle-live-board .encounter-battle-frame {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.outpost-real-page-preview #dm .dm-battle-side-control {
  gap: 0;
  padding-left: 14px;
  border-left: 1px solid var(--op-line);
  background: transparent;
}

body.outpost-real-page-preview #dm .dm-battle-side-control > :is(.panel, details) {
  margin: 0;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--op-line-faint);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.outpost-real-page-preview #dm .dm-battle-summary-grid,
body.outpost-real-page-preview #dm .dm-token-stat-grid {
  gap: 0;
  border-top: 1px solid var(--op-line-faint);
  border-left: 1px solid var(--op-line-faint);
}

body.outpost-real-page-preview #dm :is(.dm-battle-summary-grid, .dm-token-stat-grid) > span {
  min-width: 0;
  padding: 8px;
  border-right: 1px solid var(--op-line-faint);
  border-bottom: 1px solid var(--op-line-faint);
  border-radius: 0;
  background: transparent;
}

body.outpost-real-page-preview #dm .dm-battle-summary-actions button,
body.outpost-real-page-preview #dm .dm-token-turn-primary button,
body.outpost-real-page-preview #dm .dm-token-economy-grid button,
body.outpost-real-page-preview #dm .dm-token-reset-budget {
  min-height: 32px;
  border: 1px solid var(--op-line-strong);
  border-radius: 0;
  color: var(--op-text);
  background: transparent;
  box-shadow: none;
  font: 8px var(--op-font-mono);
}

body.outpost-real-page-preview #dm .dm-token-turn-primary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

body.outpost-real-page-preview #dm .dm-token-economy-advanced {
  margin-top: 8px;
  border-top: 1px solid var(--op-line-faint);
}

body.outpost-real-page-preview #dm .dm-token-economy-advanced > summary {
  padding: 9px 0;
  color: var(--op-text-faint);
  font: 8px var(--op-font-mono);
  letter-spacing: .08em;
  cursor: pointer;
}

body.outpost-real-page-preview #dm .dm-token-economy-grid {
  display: grid;
  gap: 6px;
}

body.outpost-real-page-preview #dm .dm-token-economy-grid > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 56px 62px;
  align-items: center;
  gap: 6px;
  color: var(--op-text-muted);
  font: 8px var(--op-font-mono);
}

body.outpost-real-page-preview #dm .dm-token-economy-grid em {
  color: var(--op-text-faint);
  font-style: normal;
}

body.outpost-real-page-preview #dm .dm-token-reset-budget {
  width: 100%;
  margin-top: 6px;
}

/* DM live Battle command center --------------------------------------
   The shared board remains the visual anchor. Frequent turn work is
   visible; corrective and destructive tools live behind disclosures. */
body.outpost-real-page-preview #dm .dm-battle-session-shell {
  border-top: 0;
}

body.outpost-real-page-preview #dm .dm-battle-control-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(292px, 25vw, 344px);
  align-items: stretch;
  height: clamp(340px, calc(100dvh - 370px), 700px);
  min-height: 0;
  overflow: hidden;
  border-top: 1px solid var(--op-line);
}

body.outpost-real-page-preview #dm .dm-battle-live-board {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

body.outpost-real-page-preview #dm .dm-battle-live-board > .battle-encounter-experience {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

body.outpost-real-page-preview #dm .dm-battle-live-board .encounter-battle-frame {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-self: stretch;
  height: 100%;
  min-height: 0;
}

body.outpost-real-page-preview #dm .dm-battle-live-board .battle-reward-panel {
  display: none;
}

body.outpost-real-page-preview #dm .dm-battle-live-board .battle-shell {
  height: 100%;
  min-height: 0;
}

body.outpost-real-page-preview #dm .dm-battle-side-control {
  position: relative;
  display: block;
  height: 100%;
  max-height: none;
  min-height: 0;
  overflow: auto;
  padding: 0 10px 24px 14px;
  scrollbar-gutter: stable;
}

body.outpost-real-page-preview #dm .dm-battle-rail-heading {
  position: sticky;
  top: 0;
  z-index: 4;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 4px 10px;
  padding: 12px 0 10px;
  background: var(--op-bg);
}

body.outpost-real-page-preview #dm .dm-battle-rail-heading small {
  grid-column: 1 / -1;
}

body.outpost-real-page-preview #dm .dm-battle-rail-heading b {
  font-size: 15px;
}

body.outpost-real-page-preview #dm .dm-battle-now {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--op-line-faint);
}

body.outpost-real-page-preview #dm .dm-battle-now > span:first-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

body.outpost-real-page-preview #dm .dm-battle-now small,
body.outpost-real-page-preview #dm .dm-battle-now-meta em,
body.outpost-real-page-preview #dm .dm-token-control-kicker,
body.outpost-real-page-preview #dm .dm-token-budget-strip small {
  color: var(--op-text-faint);
  font: 7px var(--op-font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

body.outpost-real-page-preview #dm .dm-battle-now b {
  overflow: hidden;
  color: var(--op-text);
  font: 14px var(--op-font-display);
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview #dm .dm-battle-now-meta {
  display: grid;
  gap: 4px;
  text-align: right;
}

body.outpost-real-page-preview #dm .dm-battle-side-control .turn-panel {
  padding: 8px 0;
  border-bottom: 1px solid var(--op-line-faint);
}

body.outpost-real-page-preview #dm .dm-battle-side-control .turn-panel-head {
  padding: 0 0 5px;
}

body.outpost-real-page-preview #dm .dm-battle-side-control .turn-timeline {
  max-height: 76px;
  overflow: auto;
}

body.outpost-real-page-preview #dm .dm-battle-side-control .turn-row {
  min-height: 34px;
  padding: 3px 6px;
}

body.outpost-real-page-preview #dm .dm-battle-side-control .turn-token-icon {
  width: 28px;
  height: 28px;
}

body.outpost-real-page-preview #dm .dm-token-control {
  padding-top: 12px;
}

body.outpost-real-page-preview #dm .dm-token-control-kicker {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
}

body.outpost-real-page-preview #dm .dm-token-control-kicker em {
  color: var(--op-success, #7bdca8);
  font-style: normal;
}

body.outpost-real-page-preview #dm .dm-token-control-head {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 0 0 10px;
}

body.outpost-real-page-preview #dm .dm-token-control-head .shop-card-icon {
  width: 34px;
  height: 34px;
  border-radius: 0;
}

body.outpost-real-page-preview #dm .dm-token-control-head > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

body.outpost-real-page-preview #dm .dm-token-control-head > span:nth-child(2) b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview #dm .dm-token-select-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--op-line-faint);
}

body.outpost-real-page-preview #dm .dm-token-select-row select {
  min-width: 0;
  height: 32px;
}

body.outpost-real-page-preview #dm .dm-token-stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.outpost-real-page-preview #dm .dm-token-budget-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-left: 1px solid var(--op-line-faint);
}

body.outpost-real-page-preview #dm .dm-token-budget-strip > span {
  display: grid;
  gap: 3px;
  padding: 7px 8px;
  border-right: 1px solid var(--op-line-faint);
  border-bottom: 1px solid var(--op-line-faint);
}

body.outpost-real-page-preview #dm .dm-token-budget-strip b {
  color: var(--op-text);
  font: 10px var(--op-font-mono);
}

body.outpost-real-page-preview #dm .dm-token-turn-primary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 8px 0 10px;
}

body.outpost-real-page-preview #dm .dm-token-turn-primary button:disabled {
  color: var(--op-success, #7bdca8);
  border-color: color-mix(in srgb, var(--op-success, #7bdca8) 38%, var(--op-line));
  opacity: 1;
}

body.outpost-real-page-preview #dm .dm-token-live-disclosure {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--op-line-faint);
  border-radius: 0;
  background: transparent;
}

body.outpost-real-page-preview #dm .dm-token-live-disclosure > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 0;
  color: var(--op-text);
  cursor: pointer;
  list-style: none;
}

body.outpost-real-page-preview #dm .dm-token-live-disclosure > summary::-webkit-details-marker { display: none; }

body.outpost-real-page-preview #dm .dm-token-live-disclosure > summary span {
  display: grid;
  gap: 2px;
}

body.outpost-real-page-preview #dm .dm-token-live-disclosure > summary b {
  font: 10px var(--op-font-display);
  font-weight: 620;
}

body.outpost-real-page-preview #dm .dm-token-live-disclosure > summary small,
body.outpost-real-page-preview #dm .dm-token-live-disclosure > summary em {
  color: var(--op-text-faint);
  font: 7px var(--op-font-mono);
  font-style: normal;
  letter-spacing: .07em;
  text-transform: uppercase;
}

body.outpost-real-page-preview #dm .dm-token-live-disclosure[open] > summary em {
  color: var(--op-text);
}

body.outpost-real-page-preview #dm .dm-token-disclosure-body {
  display: grid;
  gap: 10px;
  padding: 0 0 12px;
}

body.outpost-real-page-preview #dm .dm-token-safety-disclosure > summary em {
  color: var(--op-warning, #d6ad65);
}

body.outpost-real-page-preview #dm .dm-token-reposition-toggle {
  min-height: 48px;
  padding: 9px 10px;
  border: 1px solid var(--op-line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--op-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}

body.outpost-real-page-preview #dm .dm-token-reposition-toggle span {
  display: grid;
  gap: 3px;
}

body.outpost-real-page-preview #dm .dm-token-reposition-toggle b,
body.outpost-real-page-preview #dm .dm-token-reposition-toggle em {
  font: 8px var(--op-font-mono);
  font-style: normal;
  letter-spacing: .08em;
}

body.outpost-real-page-preview #dm .dm-token-reposition-toggle small {
  color: var(--op-text-faint);
  font: 7px var(--op-font-mono);
}

body.outpost-real-page-preview #dm .dm-token-reposition-toggle[aria-pressed="true"] {
  border-color: var(--op-warning, #d6ad65);
  background: color-mix(in srgb, var(--op-warning, #d6ad65) 10%, transparent);
}

body.outpost-real-page-preview #dm .dm-token-reposition-toggle[aria-pressed="true"] em {
  color: var(--op-warning, #d6ad65);
}

body.outpost-real-page-preview #dm .dm-token-safety-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-top: 8px;
  border-top: 1px solid var(--op-line-faint);
}

/* Light material keeps scenic darkness inside the Camp only. */
body.outpost-real-page-preview:is([data-op-theme="light"], [data-outpost-theme="light"]) #encounter .camp-command-deck,
body.outpost-real-page-preview:is([data-op-theme="light"], [data-outpost-theme="light"]) #encounter .rest-workspace {
  background: var(--op-bg);
}

body.outpost-real-page-preview:is([data-op-theme="light"], [data-outpost-theme="light"]) #encounter .camp-hotspot {
  border-color: color-mix(in srgb, var(--op-text) 30%, transparent);
  color: var(--op-text);
  background: color-mix(in srgb, var(--op-bg) 90%, transparent);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--op-text) 10%, transparent);
}

body.outpost-real-page-preview:is([data-op-theme="light"], [data-outpost-theme="light"]) #encounter .camp-hotspot :is(b, small),
body.outpost-real-page-preview:is([data-op-theme="light"], [data-outpost-theme="light"]) #encounter .camp-hotspot button {
  color: var(--op-text);
}

body.outpost-real-page-preview:is([data-op-theme="light"], [data-outpost-theme="light"]) #encounter .camp-hotspot button {
  border-color: var(--op-line-strong);
  background: color-mix(in srgb, var(--op-bg) 84%, transparent);
}

body.outpost-real-page-preview :is(.camp-activity-modal, .camp-production-modal) :is(input, select, textarea, option) {
  border-radius: 0;
  border-color: var(--op-line-strong);
  color: var(--op-text);
  background: var(--op-bg);
  box-shadow: none;
}

body.outpost-real-page-preview .camp-production-modal :is(.cooking-panel, .cooking-recipe-card, .cooking-inventory-item, .cooking-vessel-item, .cooking-preview) {
  color: var(--op-text);
}

body.outpost-real-page-preview .camp-production-modal :is(.cooking-recipe-card, .cooking-inventory-item, .cooking-vessel-item) :is(p, small, span) {
  color: var(--op-text-muted);
}

@media (max-width: 1080px) {
  body.outpost-real-page-preview #encounter .camp-player-experience .rest-activity-grid,
  body.outpost-real-page-preview #encounter .camp-player-experience .rest-category-creative .rest-activity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.outpost-real-page-preview #encounter .camp-rest-status-strip {
    grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(96px, .7fr));
  }

  body.outpost-real-page-preview #encounter .camp-rest-status-strip > button {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  body.outpost-real-page-preview #encounter .camp-hotspot {
    width: clamp(158px, 23vw, 210px);
  }
}

@media (max-width: 820px) {
  body.outpost-real-page-preview #encounter .camp-zone-center { margin-left: 0; }
  body.outpost-real-page-preview .camp-production-modal .outpost-workspace-header {
    grid-template-columns: minmax(0, 1fr);
  }

  body.outpost-real-page-preview .camp-production-modal .cooking-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body.outpost-real-page-preview #encounter .rest-category-section {
    grid-template-columns: minmax(0, 1fr);
  }

  body.outpost-real-page-preview #encounter .rest-category-title {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    border-right: 0;
    border-bottom: 1px solid var(--op-line);
  }

  body.outpost-real-page-preview #encounter .rest-category-title em {
    grid-column: auto;
    align-self: center;
  }

  body.outpost-real-page-preview .camp-activity-modal-header {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  body.outpost-real-page-preview .camp-activity-modal-meta {
    grid-column: 1 / -1;
    grid-template-columns: auto auto;
    justify-content: space-between;
    justify-items: start;
    border-top: 1px solid var(--op-line);
    border-left: 0;
    text-align: left;
  }

  body.outpost-real-page-preview #encounter .camp-scene,
  body.outpost-real-page-preview #encounter .camp-scene-world {
    min-height: 620px;
  }

  body.outpost-real-page-preview #encounter .camp-hotspot-layer {
    inset: 82px 12px 58px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    gap: 8px;
  }

  body.outpost-real-page-preview #encounter .camp-hotspot,
  body.outpost-real-page-preview #encounter .camp-hotspot[class*="camp-zone-"] {
    position: static;
    width: auto;
    transform: none;
  }

  body.outpost-real-page-preview #encounter .camp-scene-anchor { display: none; }

  body.outpost-real-page-preview #encounter .camp-rest-status-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.outpost-real-page-preview #encounter .camp-rest-status-strip .camp-rest-identity {
    grid-column: 1 / -1;
  }

  body.outpost-real-page-preview :is(#encounter, #dm) .battle-session-header {
    grid-template-columns: minmax(0, 1fr) repeat(2, 110px);
  }

  body.outpost-real-page-preview #encounter .battle-shell {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }

  body.outpost-real-page-preview #encounter .battle-board {
    min-height: 430px;
  }

  body.outpost-real-page-preview #encounter .turn-panel {
    height: auto;
    max-height: 240px;
    padding: 0;
    border-top: 1px solid var(--op-line);
    border-left: 0;
  }

  body.outpost-real-page-preview #dm .dm-battle-control-layout,
  body.outpost-real-page-preview #dm .dm-battle-design-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  body.outpost-real-page-preview #dm .dm-battle-side-control {
    position: static;
    max-height: none;
    padding: 0;
    border-top: 1px solid var(--op-line);
    border-left: 0;
    overflow: visible;
  }

  body.outpost-real-page-preview #dm .dm-battle-design-side {
    grid-template-columns: minmax(0, 1fr);
    max-height: none;
    padding-left: 0;
    overflow: visible;
  }

  body.outpost-real-page-preview #dm .dm-battle-design-side > :last-child {
    grid-column: auto;
  }
}

@media (max-width: 620px) {
  body.outpost-real-page-preview #encounter .camp-activity-directory-head {
    grid-template-columns: minmax(0, 1fr);
  }

  body.outpost-real-page-preview #encounter .camp-activity-directory-head > span:last-child {
    grid-template-columns: auto auto;
    justify-content: space-between;
    justify-items: start;
    text-align: left;
  }

  body.outpost-real-page-preview #encounter .camp-activity-directory-head > span:last-child em {
    align-self: end;
  }

  body.outpost-real-page-preview #encounter .camp-player-experience .rest-activity-grid,
  body.outpost-real-page-preview #encounter .camp-player-experience .rest-category-creative .rest-activity-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.outpost-real-page-preview #encounter .rest-activity-card {
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    min-height: 178px;
  }

  body.outpost-real-page-preview #encounter .rest-activity-art {
    min-height: 100%;
    border-right: 1px solid var(--op-line-faint);
    border-bottom: 0;
  }

  body.outpost-real-page-preview .camp-activity-modal-copy > b { font-size: 18px; }
  body.outpost-real-page-preview .camp-activity-modal-copy p { font-size: 9px; }

  body.outpost-real-page-preview #encounter .camp-scene-heading {
    align-items: flex-start;
    padding: 14px;
  }

  body.outpost-real-page-preview #encounter .camp-scene-heading > span:last-child small { display: none; }
  body.outpost-real-page-preview #encounter .camp-scene-heading b { font-size: 20px; }

  body.outpost-real-page-preview #encounter .camp-hotspot-layer {
    grid-template-columns: minmax(0, 1fr);
    overflow: auto;
  }

  body.outpost-real-page-preview #encounter .camp-free-actions span { display: none; }
  body.outpost-real-page-preview #encounter .camp-free-actions { justify-content: stretch; }
  body.outpost-real-page-preview #encounter .camp-free-actions button { flex: 1; }

  body.outpost-real-page-preview #encounter .camp-rest-status-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  body.outpost-real-page-preview #encounter .camp-rest-status-strip > span {
    border-right: 0;
    border-bottom: 1px solid var(--op-line-faint);
  }

  body.outpost-real-page-preview :is(#encounter, #dm) .battle-session-header {
    grid-template-columns: minmax(0, 1fr) 92px;
  }

  body.outpost-real-page-preview :is(#encounter, #dm) .battle-session-header .battle-session-state {
    grid-column: 1 / -1;
    border-top: 1px solid var(--op-line-faint);
  }

  body.outpost-real-page-preview #dm .dm-battle-session-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  body.outpost-real-page-preview #encounter .camp-scene-atmosphere i { animation: none; }
  body.outpost-real-page-preview #encounter .camp-hotspot { transition: none; }
}

/* Hybrid Camp Scene v3 -------------------------------------------------
   The scene is the navigation surface. A focused detail rail keeps action
   controls readable without turning every object into a dashboard card. */
body.outpost-real-page-preview #encounter .rest-encounter.camp-player-experience {
  min-height: 0 !important;
  max-height: none !important;
  grid-template-rows: auto !important;
  overflow: visible !important;
  padding-bottom: 0 !important;
}
body.outpost-real-page-preview #encounter .camp-scene {
  min-height: 0;
  border-bottom: 1px solid var(--op-line);
  background: var(--op-bg);
}
body.outpost-real-page-preview #encounter .camp-scene::before,
body.outpost-real-page-preview #encounter .camp-scene::after,
body.outpost-real-page-preview #encounter .camp-scene-anchor,
body.outpost-real-page-preview #encounter .camp-scene-heading { display: none; }

body.outpost-real-page-preview #encounter .camp-scene-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 44px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--op-line);
}
body.outpost-real-page-preview #encounter .camp-scene-meta > span { display: grid; gap: 2px; }
body.outpost-real-page-preview #encounter .camp-scene-meta > span:last-child { justify-items: end; text-align: right; }
body.outpost-real-page-preview #encounter .camp-scene-meta small { color: var(--op-text-faint); font: 7px var(--op-font-mono); letter-spacing: .1em; }
body.outpost-real-page-preview #encounter .camp-scene-meta b { color: var(--op-text); font: 9px var(--op-font-mono); letter-spacing: .08em; }

body.outpost-real-page-preview #encounter .camp-scene-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  min-height: 460px;
}
body.outpost-real-page-preview #encounter .camp-scene-stage {
  position: relative;
  min-width: 0;
  min-height: 460px;
  overflow: hidden;
  border-right: 1px solid var(--op-line);
  background-color: #090c0d;
  background-image: var(--camp-scene-bg);
  background-position: center;
  background-size: cover;
  isolation: isolate;
}
body.outpost-real-page-preview #encounter .camp-scene-shade {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(3, 5, 6, .48);
  pointer-events: none;
}
body.outpost-real-page-preview #encounter .camp-object-layer { position: absolute; inset: 0; z-index: 2; }
body.outpost-real-page-preview #encounter .camp-object {
  appearance: none;
  position: absolute;
  inset: auto;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 132px;
  margin: 0;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  box-shadow: none;
  text-align: center;
  transform: translate3d(-50%, -50%, 0);
  transition: transform 150ms ease, opacity 150ms ease;
}
body.outpost-real-page-preview #encounter .camp-object:is(:hover,:focus-visible,.active) {
  z-index: 5;
  outline: 0;
  transform: translate3d(-50%, calc(-50% - 4px), 0);
}
body.outpost-real-page-preview #encounter .camp-object-visual {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 56px;
  overflow: visible;
  border: 0;
  background: transparent;
}
body.outpost-real-page-preview #encounter .camp-object-visual > .camp-object-glyph {
  color: rgba(255,255,255,.9);
  font: 31px/1 "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
  font-style: normal;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.9));
  transition: opacity 150ms ease, transform 150ms ease;
}
body.outpost-real-page-preview #encounter .camp-object:is(:hover,:focus-visible,.active) .camp-object-glyph { opacity: 1; transform: translate3d(0,-2px,0) scale(1.06); }
body.outpost-real-page-preview #encounter .camp-object.active .camp-object-visual::after {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 34px;
  height: 1px;
  background: rgba(255,255,255,.78);
  transform: translateX(-50%);
  content: "";
  pointer-events: none;
}
body.outpost-real-page-preview #encounter .camp-object-label {
  display: grid;
  gap: 1px;
  width: max-content;
  min-width: 92px;
  max-width: 132px;
  padding: 4px 7px;
  background: rgba(4,6,7,.82);
}
body.outpost-real-page-preview #encounter .camp-object-label b { font: 9px/1.25 var(--op-font-body); font-weight: 650; overflow-wrap: anywhere; }
body.outpost-real-page-preview #encounter .camp-object-label small { color: rgba(255,255,255,.5); font: 6px var(--op-font-mono); letter-spacing: .1em; }
body.outpost-real-page-preview #encounter .camp-object.locked { opacity: .25; filter: grayscale(1); }

body.outpost-real-page-preview #encounter .camp-object.camp-zone-center { left: 48%; top: 62%; }
body.outpost-real-page-preview #encounter .camp-object.camp-zone-rest { left: 68%; top: 27%; }
body.outpost-real-page-preview #encounter .camp-object.camp-zone-alchemy { left: 71%; top: 61%; }
body.outpost-real-page-preview #encounter .camp-object.camp-zone-crafting { left: 29%; top: 57%; }
body.outpost-real-page-preview #encounter .camp-object.camp-zone-forge { left: 21%; top: 30%; }
body.outpost-real-page-preview #encounter .camp-object.camp-zone-caravan { left: 46%; top: 19%; }
body.outpost-real-page-preview #encounter .camp-object.camp-zone-storage { left: 56%; top: 24%; }
body.outpost-real-page-preview #encounter .camp-object.camp-zone-forest { left: 10%; top: 16%; }
body.outpost-real-page-preview #encounter .camp-object.camp-zone-water { left: 83%; top: 70%; }
body.outpost-real-page-preview #encounter .camp-object.camp-zone-ruins { left: 85%; top: 19%; }
body.outpost-real-page-preview #encounter .camp-object.camp-zone-industrial { left: 13%; top: 70%; }
body.outpost-real-page-preview #encounter .camp-object.camp-zone-underground { left: 85%; top: 46%; }

body.outpost-real-page-preview #encounter .campfire-flame {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 54px;
  filter: drop-shadow(0 5px 9px rgba(0,0,0,.92));
}
body.outpost-real-page-preview #encounter .campfire-flame > b {
  z-index: 2;
  font: 35px/1 sans-serif;
  transform-origin: 50% 86%;
  animation: campfire-live 1.45s ease-in-out infinite;
}
body.outpost-real-page-preview #encounter .campfire-flame > i {
  position: absolute;
  left: 50%;
  bottom: 17px;
  z-index: 1;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffd48a;
  box-shadow: 0 0 8px rgba(255,166,61,.86);
  animation: campfire-spark 1.9s ease-out infinite;
}
body.outpost-real-page-preview #encounter .campfire-flame > i:nth-of-type(2) { animation-delay: -.65s; }
body.outpost-real-page-preview #encounter .campfire-flame > i:nth-of-type(3) { animation-delay: -1.25s; }

@keyframes campfire-live {
  0%,100% { opacity: .94; transform: translate3d(0,0,0) scale(.98); }
  48% { opacity: 1; transform: translate3d(1px,-2px,0) scale(1.06,.96); }
  72% { transform: translate3d(-1px,-1px,0) scale(1.01,1.04); }
}
@keyframes campfire-spark {
  0% { opacity: 0; transform: translate3d(-2px,0,0); }
  18% { opacity: .9; }
  100% { opacity: 0; transform: translate3d(8px,-36px,0); }
}

body.outpost-real-page-preview #encounter .camp-scene-caption {
  position: absolute;
  left: 12px;
  bottom: 10px;
  z-index: 4;
  display: grid;
  gap: 2px;
  padding: 6px 8px;
  color: #fff;
  background: rgba(4,6,7,.78);
}
body.outpost-real-page-preview #encounter .camp-scene-caption small { color: rgba(255,255,255,.48); font: 6px var(--op-font-mono); letter-spacing: .1em; }
body.outpost-real-page-preview #encounter .camp-scene-caption b { font: 8px var(--op-font-mono); letter-spacing: .08em; }

body.outpost-real-page-preview #encounter .camp-context-panel {
  display: grid;
  grid-template-rows: auto auto auto minmax(0,1fr) auto;
  min-width: 0;
  padding: 16px;
  background: var(--op-bg);
}
body.outpost-real-page-preview #encounter .camp-context-panel > header { display: grid; gap: 7px; padding-bottom: 14px; border-bottom: 1px solid var(--op-line); }
body.outpost-real-page-preview #encounter .camp-context-panel > header > small,
body.outpost-real-page-preview #encounter .camp-context-panel > header > em { color: var(--op-text-faint); font: 7px var(--op-font-mono); font-style: normal; letter-spacing: .1em; }
body.outpost-real-page-preview #encounter .camp-context-panel > header > b { color: var(--op-text); font: 20px var(--op-font-display); font-weight: 580; }
body.outpost-real-page-preview #encounter .camp-context-visual { display: grid; place-items: center; width: 100%; height: 94px; overflow: hidden; background: var(--op-surface-soft); }
body.outpost-real-page-preview #encounter .camp-context-visual :is(img,svg) { width: 100%; height: 100%; object-fit: cover; filter: saturate(.4); }
body.outpost-real-page-preview #encounter .camp-context-visual > i { color: var(--op-text-muted); font: 34px var(--op-font-display); font-style: normal; }
body.outpost-real-page-preview #encounter .camp-context-visual > .camp-object-glyph { font-size: 38px; filter: none; }
body.outpost-real-page-preview #encounter .camp-context-visual > .campfire-flame { transform: scale(1.12); }
body.outpost-real-page-preview #encounter .camp-context-panel > p { min-height: 48px; margin: 14px 0; color: var(--op-text-muted); font-size: 10px; line-height: 1.5; }
body.outpost-real-page-preview #encounter .camp-context-panel dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0 0 14px; border-top: 1px solid var(--op-line-faint); border-bottom: 1px solid var(--op-line-faint); }
body.outpost-real-page-preview #encounter .camp-context-panel dl > div { display: grid; gap: 3px; padding: 9px 0; }
body.outpost-real-page-preview #encounter .camp-context-panel dl > div + div { padding-left: 10px; border-left: 1px solid var(--op-line-faint); }
body.outpost-real-page-preview #encounter .camp-context-panel dt { color: var(--op-text-faint); font: 7px var(--op-font-mono); letter-spacing: .08em; }
body.outpost-real-page-preview #encounter .camp-context-panel dd { margin: 0; color: var(--op-text); font-size: 9px; }
body.outpost-real-page-preview #encounter .camp-context-actions { display: grid; align-content: start; gap: 7px; }
body.outpost-real-page-preview #encounter .camp-context-actions button,
body.outpost-real-page-preview #encounter .camp-context-panel > footer button { width: 100%; min-height: 34px; border-radius: 0; }
body.outpost-real-page-preview #encounter .camp-context-actions > span { color: var(--op-text-faint); font-size: 9px; }
body.outpost-real-page-preview #encounter .camp-context-panel > footer { padding-top: 14px; border-top: 1px solid var(--op-line); }

body.outpost-real-page-preview #encounter .camp-party-readiness {
  display: grid;
  grid-template-columns: 180px minmax(0,1fr);
  min-width: 0;
  border-top: 1px solid var(--op-line);
  border-bottom: 1px solid var(--op-line);
  background: var(--op-bg);
}
body.outpost-real-page-preview #encounter .camp-party-readiness > header {
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 11px 14px;
  border-right: 1px solid var(--op-line);
}
body.outpost-real-page-preview #encounter .camp-party-readiness > header span { display: grid; gap: 3px; }
body.outpost-real-page-preview #encounter .camp-party-readiness > header small,
body.outpost-real-page-preview #encounter .camp-party-readiness > header em {
  color: var(--op-text-faint);
  font: 7px/1.3 var(--op-font-mono);
  font-style: normal;
  letter-spacing: .09em;
}
body.outpost-real-page-preview #encounter .camp-party-readiness > header b { color: var(--op-text); font: 11px var(--op-font-mono); letter-spacing: .08em; }
body.outpost-real-page-preview #encounter .camp-party-portraits { display: flex; align-items: center; gap: 0; min-width: 0; overflow-x: auto; }
body.outpost-real-page-preview #encounter .camp-party-member {
  display: grid;
  grid-template-columns: 40px minmax(72px,1fr);
  align-items: center;
  gap: 9px;
  min-width: 154px;
  margin: 0;
  padding: 8px 12px;
  border-right: 1px solid var(--op-line-faint);
}
body.outpost-real-page-preview #encounter .camp-party-portrait {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border: 1px solid var(--op-line);
  color: var(--op-text-muted);
  background: var(--op-surface-soft);
}
body.outpost-real-page-preview #encounter .camp-party-portrait img { width: 100%; height: 100%; object-fit: cover; }
body.outpost-real-page-preview #encounter .camp-party-portrait > i { font: 16px var(--op-font-display); font-style: normal; }
body.outpost-real-page-preview #encounter .camp-party-portrait > b {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 6px;
  height: 6px;
  border: 1px solid var(--op-bg);
  border-radius: 50%;
  background: var(--op-text-faint);
}
body.outpost-real-page-preview #encounter .camp-party-member.ready .camp-party-portrait > b { background: var(--op-success); box-shadow: 0 0 7px color-mix(in srgb, var(--op-success) 65%, transparent); }
body.outpost-real-page-preview #encounter .camp-party-member.preparing .camp-party-portrait > b { background: var(--op-warning); }
body.outpost-real-page-preview #encounter .camp-party-member figcaption { display: grid; gap: 2px; min-width: 0; }
body.outpost-real-page-preview #encounter .camp-party-member strong { overflow: hidden; color: var(--op-text); font: 10px var(--op-font-body); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
body.outpost-real-page-preview #encounter .camp-party-member small { color: var(--op-text-faint); font: 7px var(--op-font-mono); letter-spacing: .08em; }
body.outpost-real-page-preview #encounter .camp-party-member.ready small { color: var(--op-success); }
body.outpost-real-page-preview #encounter .camp-party-empty { padding: 14px; color: var(--op-text-faint); font-size: 9px; }

body.outpost-real-page-preview #encounter .camp-scene > .camp-free-actions {
  position: static;
  inset: auto;
  z-index: auto;
}

@media (prefers-reduced-motion: reduce) {
  body.outpost-real-page-preview #encounter .campfire-flame > b,
  body.outpost-real-page-preview #encounter .campfire-flame > i { animation: none !important; }
}

body.outpost-real-page-preview #encounter .rest-activity-group { min-width: 0; border-left: 1px solid var(--op-line); }
body.outpost-real-page-preview #encounter .rest-activity-group-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  min-height: 62px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--op-line);
  background: var(--op-surface-soft);
}
body.outpost-real-page-preview #encounter .rest-activity-group-head > span { display: grid; gap: 3px; }
body.outpost-real-page-preview #encounter .rest-activity-group-head small,
body.outpost-real-page-preview #encounter .rest-activity-group-head em {
  color: var(--op-text-faint);
  font: 8px var(--op-font-mono);
  font-style: normal;
  letter-spacing: .08em;
}
body.outpost-real-page-preview #encounter .rest-activity-group-head b {
  color: var(--op-text);
  font: 16px var(--op-font-display);
  font-weight: 580;
}
body.outpost-real-page-preview #encounter .rest-activity-group-head strong {
  color: var(--op-text-faint);
  font: 18px var(--op-font-mono);
  font-weight: 500;
}

body.outpost-real-page-preview #encounter .camp-activity-browser {
  display: grid;
  grid-template-columns: 196px minmax(0,1fr);
  grid-template-rows: minmax(0,1fr);
  min-height: 450px;
  max-height: min(calc(100dvh - 480px), 570px);
  overflow: hidden;
  border-bottom: 1px solid var(--op-line);
}
body.outpost-real-page-preview #encounter .camp-activity-category-rail { display: grid; grid-template-rows: auto repeat(3,auto) minmax(0,1fr); min-width: 0; }
body.outpost-real-page-preview #encounter .camp-activity-category-rail > header { display: grid; gap: 4px; padding: 14px 12px; border-bottom: 1px solid var(--op-line); }
body.outpost-real-page-preview #encounter .camp-activity-category-rail > header small,
body.outpost-real-page-preview #encounter .camp-activity-category-rail > header em,
body.outpost-real-page-preview #encounter .camp-activity-category-rail button :is(small,em),
body.outpost-real-page-preview #encounter .camp-activity-category-rail > footer small { color: var(--op-text-faint); font: 7px var(--op-font-mono); font-style: normal; letter-spacing: .08em; }
body.outpost-real-page-preview #encounter .camp-activity-category-rail > header b { color: var(--op-text); font: 16px var(--op-font-display); }
body.outpost-real-page-preview #encounter .camp-activity-category-rail button { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 9px; min-height: 65px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--op-line-faint); color: var(--op-text-muted); background: transparent; box-shadow: none; text-align: left; }
body.outpost-real-page-preview #encounter .camp-activity-category-rail button > i { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--op-line); font-style: normal; }
body.outpost-real-page-preview #encounter .camp-activity-category-rail button > span { display: grid; gap: 2px; }
body.outpost-real-page-preview #encounter .camp-activity-category-rail button b { color: inherit; font: 11px var(--op-font-body); font-weight: 650; }
body.outpost-real-page-preview #encounter .camp-activity-category-rail button:is(:hover,:focus-visible,.active) { outline: 0; color: var(--op-text); background: var(--op-surface-soft); box-shadow: inset 2px 0 0 var(--op-text); }
body.outpost-real-page-preview #encounter .camp-activity-category-rail > footer { align-self: end; display: grid; gap: 5px; padding: 12px; border-top: 1px solid var(--op-line); color: var(--op-text-faint); font-size: 8px; line-height: 1.45; }
body.outpost-real-page-preview #encounter .camp-activity-category-workspace { display: grid; grid-template-rows: auto minmax(0,1fr); min-height: 0; overflow: hidden; }
body.outpost-real-page-preview #encounter .camp-activity-category-workspace .rest-activity-master-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; align-content: start; overflow: auto; scrollbar-gutter: stable; }

body.outpost-real-page-preview #encounter .camp-recent-activity { border-top: 1px solid var(--op-line-faint); }
body.outpost-real-page-preview #encounter .camp-recent-activity > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; padding: 8px 14px; cursor: pointer; list-style: none; }
body.outpost-real-page-preview #encounter .camp-recent-activity > summary::-webkit-details-marker { display: none; }
body.outpost-real-page-preview #encounter .camp-recent-activity > summary > span { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; min-width: 0; }
body.outpost-real-page-preview #encounter .camp-recent-activity summary small,
body.outpost-real-page-preview #encounter .camp-recent-activity summary em,
body.outpost-real-page-preview #encounter .camp-recent-activity summary strong { color: var(--op-text-faint); font: 7px var(--op-font-mono); font-style: normal; letter-spacing: .08em; }
body.outpost-real-page-preview #encounter .camp-recent-activity summary b { overflow: hidden; color: var(--op-text); font: 10px var(--op-font-body); text-overflow: ellipsis; white-space: nowrap; }

/* Shared Crafting Recipe workspace ----------------------------------- */
body.outpost-real-page-preview .camp-crafting-modal { padding: 0; }
body.outpost-real-page-preview .camp-crafting-layout {
  display: grid;
  grid-template-columns: minmax(340px, .85fr) minmax(420px, 1.15fr);
  min-height: 520px;
  border-top: 1px solid var(--op-line);
  border-bottom: 1px solid var(--op-line);
}
body.outpost-real-page-preview .camp-crafting-library {
  min-width: 0;
  overflow: auto;
  border-right: 1px solid var(--op-line);
}
body.outpost-real-page-preview .camp-crafting-library-head,
body.outpost-real-page-preview .crafting-recipe-group > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--op-line-faint);
}
body.outpost-real-page-preview :is(.camp-crafting-library-head,.crafting-recipe-group > header) span { display: grid; gap: 3px; }
body.outpost-real-page-preview :is(.camp-crafting-library-head,.crafting-recipe-group > header) small,
body.outpost-real-page-preview :is(.camp-crafting-library-head,.crafting-recipe-group > header) em {
  color: var(--op-text-faint);
  font: 8px var(--op-font-mono);
  font-style: normal;
  letter-spacing: .08em;
}
body.outpost-real-page-preview .crafting-recipe-group > div { display: grid; }
body.outpost-real-page-preview .crafting-recipe-group button {
  display: grid;
  grid-template-columns: 40px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--op-line-faint);
  color: var(--op-text);
  background: transparent;
  box-shadow: none;
  text-align: left;
}
body.outpost-real-page-preview .crafting-recipe-group button:is(:hover,:focus-visible),
body.outpost-real-page-preview .crafting-recipe-group button.active {
  outline: 0;
  background: var(--op-surface-soft);
  box-shadow: inset 2px 0 0 var(--op-text);
}
body.outpost-real-page-preview .crafting-recipe-group button > span:first-child { width: 38px; height: 38px; }
body.outpost-real-page-preview .crafting-recipe-group button > span:first-child :is(img,svg) { width: 100%; height: 100%; object-fit: contain; }
body.outpost-real-page-preview .crafting-recipe-group button > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
body.outpost-real-page-preview .crafting-recipe-group button small,
body.outpost-real-page-preview .crafting-recipe-group button em {
  overflow: hidden;
  color: var(--op-text-faint);
  font: 8px var(--op-font-mono);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.outpost-real-page-preview .camp-crafting-focus { padding: 18px; border: 0; }
body.outpost-real-page-preview .camp-crafting-focus > header,
body.outpost-real-page-preview .camp-crafting-focus > footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}
body.outpost-real-page-preview .camp-crafting-focus > header h2 { margin: 4px 0 0; font: 25px var(--op-font-display); }
body.outpost-real-page-preview .camp-crafting-focus > header small,
body.outpost-real-page-preview .camp-crafting-focus > header em { color: var(--op-text-faint); font: 8px var(--op-font-mono); font-style: normal; letter-spacing: .08em; }
body.outpost-real-page-preview .camp-crafting-focus > header label { display: grid; justify-items: end; gap: 5px; }
body.outpost-real-page-preview .camp-crafting-focus > header label > span { display: grid; grid-template-columns: 30px 34px 30px; align-items: center; text-align: center; }
body.outpost-real-page-preview .camp-crafting-focus > header label button { min-height: 28px; border-radius: 0; }
body.outpost-real-page-preview .camp-crafting-result {
  display: grid;
  grid-template-columns: 88px minmax(0,1fr);
  gap: 16px;
  align-items: center;
  margin-top: 22px;
  padding: 18px 0;
  border-top: 1px solid var(--op-line);
  border-bottom: 1px solid var(--op-line);
}
body.outpost-real-page-preview .camp-crafting-result > span { width: 88px; height: 88px; padding: 10px; background: var(--op-surface-soft); }
body.outpost-real-page-preview .camp-crafting-result > span :is(img,svg) { width: 100%; height: 100%; object-fit: contain; }
body.outpost-real-page-preview .camp-crafting-result > div { display: grid; gap: 5px; }
body.outpost-real-page-preview .camp-crafting-result b { font: 18px var(--op-font-display); }
body.outpost-real-page-preview .camp-crafting-result p { margin: 0; color: var(--op-text-muted); }
body.outpost-real-page-preview .camp-crafting-requirements { margin-top: 18px; }
body.outpost-real-page-preview .camp-crafting-requirements > header { display: flex; justify-content: space-between; padding-bottom: 9px; border-bottom: 1px solid var(--op-line); }
body.outpost-real-page-preview .camp-crafting-requirements ul { display: grid; margin: 0; padding: 0; list-style: none; }
body.outpost-real-page-preview .camp-crafting-requirements li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--op-line-faint); }
body.outpost-real-page-preview .camp-crafting-requirements li span { display: grid; gap: 2px; }
body.outpost-real-page-preview .camp-crafting-requirements li :is(small,em) { color: var(--op-text-faint); font: 8px var(--op-font-mono); font-style: normal; }
body.outpost-real-page-preview .camp-crafting-requirements li.ready em,
body.outpost-real-page-preview .camp-crafting-focus footer .ready { color: var(--op-success); }
body.outpost-real-page-preview .camp-crafting-requirements li.missing em,
body.outpost-real-page-preview .camp-crafting-focus footer .blocked { color: var(--op-danger); }
body.outpost-real-page-preview .camp-crafting-confirm { margin-top: 16px; padding: 12px; border-left: 2px solid var(--op-text); background: var(--op-surface-soft); }
body.outpost-real-page-preview .camp-crafting-confirm p { margin: 4px 0 0; color: var(--op-text-muted); }
body.outpost-real-page-preview .camp-crafting-focus > footer { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--op-line); }
body.outpost-real-page-preview .camp-crafting-focus > footer > span { font: 8px var(--op-font-mono); letter-spacing: .08em; }

body.outpost-real-page-preview:is([data-op-theme="light"],[data-outpost-theme="light"]) #encounter .camp-context-panel,
body.outpost-real-page-preview:is([data-op-theme="light"],[data-outpost-theme="light"]) #encounter .camp-activity-category-rail { background: var(--op-bg); }

@media (max-width: 900px) {
  body.outpost-real-page-preview #encounter .camp-scene-layout { grid-template-columns: minmax(0,1fr); }
  body.outpost-real-page-preview #encounter .camp-scene-stage { min-height: 420px; border-right: 0; border-bottom: 1px solid var(--op-line); }
  body.outpost-real-page-preview #encounter .camp-context-panel { min-height: 300px; }
  body.outpost-real-page-preview #encounter .camp-activity-browser { grid-template-columns: 164px minmax(0,1fr); }
  body.outpost-real-page-preview #encounter .camp-activity-category-workspace .rest-activity-master-grid { grid-template-columns: minmax(0,1fr) !important; }
  body.outpost-real-page-preview .camp-crafting-layout { grid-template-columns: minmax(0,1fr); }
  body.outpost-real-page-preview .camp-crafting-library { max-height: 260px; border-right: 0; border-bottom: 1px solid var(--op-line); }
}

@media (max-width: 620px) {
  body.outpost-real-page-preview #encounter .camp-scene-meta { align-items: start; flex-direction: column; }
  body.outpost-real-page-preview #encounter .camp-scene-meta > span:last-child { justify-items: start; text-align: left; }
  body.outpost-real-page-preview #encounter .camp-object { width: 88px; }
  body.outpost-real-page-preview #encounter .camp-object-visual { width: 58px; height: 48px; }
  body.outpost-real-page-preview #encounter .camp-object-label { min-width: 76px; max-width: 92px; }
  body.outpost-real-page-preview #encounter .camp-party-readiness { grid-template-columns: minmax(0,1fr); }
  body.outpost-real-page-preview #encounter .camp-party-readiness > header { border-right: 0; border-bottom: 1px solid var(--op-line); }
  body.outpost-real-page-preview #encounter .camp-activity-browser { display: block; max-height: none; }
  body.outpost-real-page-preview #encounter .camp-activity-category-rail { grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: auto auto; }
  body.outpost-real-page-preview #encounter .camp-activity-category-rail > header { grid-column: 1 / -1; }
  body.outpost-real-page-preview #encounter .camp-activity-category-rail > footer { display: none; }
  body.outpost-real-page-preview #encounter .camp-activity-category-rail button { grid-template-columns: minmax(0,1fr); justify-items: center; min-height: 58px; padding: 8px 5px; text-align: center; }
  body.outpost-real-page-preview #encounter .camp-activity-category-rail button > i,
  body.outpost-real-page-preview #encounter .camp-activity-category-rail button em { display: none; }
  body.outpost-real-page-preview #encounter .camp-activity-category-workspace { min-height: 430px; border-left: 0; border-top: 1px solid var(--op-line); }
  body.outpost-real-page-preview .camp-crafting-focus > header,
  body.outpost-real-page-preview .camp-crafting-focus > footer { align-items: stretch; flex-direction: column; }
  body.outpost-real-page-preview .camp-crafting-focus > header label { justify-items: start; }
  body.outpost-real-page-preview .crafting-recipe-group button { grid-template-columns: 38px minmax(0,1fr); }
  body.outpost-real-page-preview .crafting-recipe-group button > em { grid-column: 2; }
}

/* DM Battle Scene authoring -------------------------------------------------
 * Drafting is intentionally different from running a live Battle. The board
 * stays dominant, while setup follows three explicit steps in one rail. */
body.outpost-real-page-preview #dm .battle-scene-context .scene-review-strip {
  grid-template-columns: minmax(210px, .65fr) minmax(0, 1.35fr);
}

body.outpost-real-page-preview #dm .dm-content-panel:has(> .battle-scene-authoring) {
  gap: 0;
  padding: 12px 0 0;
}

@media (min-width: 981px) {
  body.outpost-real-page-preview #dm .dm-content-panel:has(> .battle-scene-authoring) {
    grid-template-rows: auto auto auto minmax(0, 1fr);
    align-content: stretch;
    overflow: hidden;
  }
}

/* Local DM Battle focus mode. This changes composition only; the shared
 * Battle renderer and every Host-authoritative command remain untouched. */
body.outpost-real-page-preview #dm .dm-battle-focus-toggle[aria-pressed="true"] {
  color: var(--op-bg);
  background: var(--op-text);
}

body.outpost-real-page-preview #dm .dm-workspace.dm-battle-focus-mode .dm-layout,
body.outpost-real-page-preview #dm .dm-workspace.dm-battle-focus-mode .dm-layout:has(> .dm-health-rail:not([open])) {
  grid-template-columns: minmax(0, 1fr);
}

body.outpost-real-page-preview #dm .dm-workspace.dm-battle-focus-mode :is(.dm-navigation-surface, .dm-health-rail) {
  display: none;
}

body.outpost-real-page-preview #dm .dm-workspace.dm-battle-focus-mode .dm-content-panel {
  padding-inline: clamp(10px, 1.4vw, 22px);
  border-left: 0 !important;
}

body.outpost-real-page-preview #dm .dm-workspace.dm-battle-focus-mode .dm-battle-control-layout {
  height: clamp(420px, calc(100dvh - 300px), 820px);
  grid-template-columns: minmax(0, 1fr) clamp(280px, 22vw, 330px);
}

/* Live DM Battle composition -------------------------------------------
   Preserve the Director navigation. The command plane reclaims the empty
   space around a landscape board instead: turn context sits to the left of
   the map on wide canvases and Token controls sit to the right. */
@media (min-width: 981px) {
  body.outpost-real-page-preview #dm .dm-workspace.dm-live-battle-mode .dm-encounter-control {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
    min-height: 0;
  }

  body.outpost-real-page-preview #dm .dm-workspace.dm-live-battle-mode .dm-content-panel.dm-content-encounter {
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    gap: 0;
    padding: 0 12px 12px;
    overflow: hidden;
  }

  body.outpost-real-page-preview #dm .dm-workspace.dm-live-battle-mode .dm-battle-session-head {
    min-height: 58px;
    padding: 7px 0 9px;
  }

  body.outpost-real-page-preview #dm .dm-workspace.dm-live-battle-mode .dm-battle-session-head .dm-encounter-title-stack {
    gap: 3px;
  }

  body.outpost-real-page-preview #dm .dm-workspace.dm-live-battle-mode .dm-battle-session-head .panel-title {
    font-size: clamp(18px, 1.5vw, 24px);
  }

  body.outpost-real-page-preview #dm .dm-workspace.dm-live-battle-mode .dm-battle-session-shell {
    display: grid;
    flex: 1 1 auto;
    align-self: stretch;
    height: 100%;
    max-height: none;
    min-height: 0;
    overflow: hidden;
    border-top: 1px solid var(--op-line);
    border-bottom: 1px solid var(--op-line);
  }

  body.outpost-real-page-preview #dm .dm-workspace.dm-live-battle-mode .dm-battle-control-layout {
    grid-template-columns: minmax(0, 1fr) clamp(300px, 34%, 330px);
    grid-template-rows: minmax(132px, .34fr) minmax(0, .66fr);
    align-items: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body.outpost-real-page-preview #dm .dm-workspace.dm-live-battle-mode .dm-battle-turn-control {
    grid-column: 2;
    grid-row: 1;
  }

  body.outpost-real-page-preview #dm .dm-workspace.dm-live-battle-mode .dm-battle-live-board {
    grid-column: 1;
    grid-row: 1 / span 2;
    height: 100%;
  }

  body.outpost-real-page-preview #dm .dm-workspace.dm-live-battle-mode .dm-battle-side-control {
    grid-column: 2;
    grid-row: 2;
    background: color-mix(in srgb, var(--op-bg-raised) 30%, transparent);
  }

  body.outpost-real-page-preview #dm .dm-workspace.dm-live-battle-mode .dm-battle-live-board > .battle-encounter-experience,
  body.outpost-real-page-preview #dm .dm-workspace.dm-live-battle-mode .dm-battle-live-board .encounter-battle-frame,
  body.outpost-real-page-preview #dm .dm-workspace.dm-live-battle-mode .dm-battle-live-board .battle-shell {
    height: 100%;
  }

  body.outpost-real-page-preview #dm .dm-workspace.dm-live-battle-mode .dm-battle-live-board .battle-surface[data-battle-renderer="phaser"] .battle-map-panel {
    width: 100%;
    max-width: 100%;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
    aspect-ratio: auto !important;
  }

  body.outpost-real-page-preview #dm .dm-workspace.dm-live-battle-mode .dm-battle-live-board .battle-surface[data-battle-renderer="phaser"] .battle-board-viewport {
    width: 100%;
    max-width: 100%;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
    aspect-ratio: auto !important;
  }
}

@media (min-width: 981px) {
  body.outpost-real-page-preview #dm .dm-workspace.dm-live-battle-mode.dm-battle-focus-mode .dm-battle-session-shell {
    height: 100%;
  }
}

body.outpost-real-page-preview #dm .dm-battle-turn-control {
  min-width: 0;
  min-height: 0;
  padding: 0 14px 16px 0;
  overflow: auto;
  border-right: 1px solid var(--op-line);
  scrollbar-gutter: stable;
}

/* Canonical live-token controls. These intentionally neutralize the old
   rounded/gold combat editor material inherited from styles.css. */
body.outpost-real-page-preview #dm .dm-battle-side-control {
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--op-line-strong) transparent;
}

body.outpost-real-page-preview #dm .dm-battle-side-control :is(button, input, select) {
  border-radius: 0;
  box-shadow: none;
}

body.outpost-real-page-preview #dm .dm-token-control-head button,
body.outpost-real-page-preview #dm .dm-token-control-grid button,
body.outpost-real-page-preview #dm .dm-token-quick-adjust button,
body.outpost-real-page-preview #dm .dm-token-status-preset-grid button,
body.outpost-real-page-preview #dm .dm-token-actions button {
  border: 1px solid var(--op-line-strong);
  color: var(--op-text);
  background: transparent;
  font: 600 8px/1 var(--op-font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

body.outpost-real-page-preview #dm .dm-token-control-section {
  gap: 10px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--op-line-faint);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.outpost-real-page-preview #dm .dm-token-section-title b {
  color: var(--op-text);
  font: 600 11px/1.2 var(--op-font-display);
  text-transform: none;
}

body.outpost-real-page-preview #dm .dm-token-section-title small {
  color: var(--op-text-faint);
  font: 7px/1.4 var(--op-font-mono);
}

body.outpost-real-page-preview #dm .dm-token-live-disclosure > summary {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.outpost-real-page-preview #dm .dm-token-status-preset-grid button {
  grid-template-columns: 2px minmax(0, 1fr);
  min-height: 34px;
  padding: 0 9px;
  border-color: var(--op-line-faint);
}

body.outpost-real-page-preview #dm .dm-token-status-preset-grid i,
body.outpost-real-page-preview #dm .dm-token-mark-strip i {
  width: 2px;
  height: 14px;
  border-radius: 0;
  background: var(--status, var(--mark, var(--op-text-muted)));
  box-shadow: none;
}

body.outpost-real-page-preview #dm .dm-token-mark-strip button {
  min-height: 30px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.outpost-real-page-preview #dm .dm-token-safety-disclosure > summary em {
  color: var(--op-danger, #ef6b73);
}

body.outpost-real-page-preview #dm .dm-battle-turn-control > :is(.panel, details) {
  margin: 0;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--op-line-faint);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.outpost-real-page-preview #dm .dm-battle-turn-control .turn-panel {
  padding: 8px 0;
  border-left: 0;
}

body.outpost-real-page-preview #dm .dm-battle-turn-control .turn-timeline {
  max-height: none;
  overflow: visible;
}

body.outpost-real-page-preview #dm .dm-battle-turn-control .turn-row {
  min-height: 36px;
  padding: 4px 6px;
}

@container (min-width: 1180px) {
  body.outpost-real-page-preview #dm .dm-workspace.dm-live-battle-mode .dm-battle-control-layout {
    grid-template-columns: clamp(220px, 18%, 270px) minmax(0, 1fr) clamp(310px, 23%, 360px);
    grid-template-rows: minmax(0, 1fr);
  }

  body.outpost-real-page-preview #dm .dm-workspace.dm-live-battle-mode .dm-battle-turn-control {
    grid-column: 1;
    grid-row: 1;
  }

  body.outpost-real-page-preview #dm .dm-workspace.dm-live-battle-mode .dm-battle-live-board {
    grid-column: 2;
    grid-row: 1;
  }

  body.outpost-real-page-preview #dm .dm-workspace.dm-live-battle-mode .dm-battle-side-control {
    grid-column: 3;
    grid-row: 1;
  }
}

body.outpost-real-page-preview #dm .dm-token-economy-grid > span {
  min-height: 36px;
  border-bottom: 1px solid var(--op-line-faint);
}

body.outpost-real-page-preview #dm .dm-token-economy-grid button:disabled,
body.outpost-real-page-preview #dm .dm-token-reset-budget:disabled,
body.outpost-real-page-preview #dm .dm-token-safety-actions button:disabled {
  border-color: var(--op-line-faint);
  color: var(--op-text-faint);
  background: transparent;
  cursor: not-allowed;
  opacity: .48;
}

body.outpost-real-page-preview #dm .dm-token-safety-actions .danger {
  border-color: color-mix(in srgb, var(--op-danger, #ef6b73) 52%, var(--op-line));
  color: var(--op-danger, #ef6b73);
}

@media (max-width: 980px) {
  body.outpost-real-page-preview #dm .dm-workspace.dm-battle-focus-mode .dm-battle-control-layout {
    height: auto;
    grid-template-columns: minmax(0, 1fr);
  }
}

body.outpost-real-page-preview #dm .dm-content-panel:has(> .battle-scene-authoring) > .design-header {
  min-height: 50px;
  padding-right: 0;
  padding-bottom: 8px;
}

body.outpost-real-page-preview #dm .battle-scene-context .scene-workflow,
body.outpost-real-page-preview #dm .battle-scene-context .scene-review-message {
  min-height: 36px;
  padding-top: 5px;
  padding-bottom: 5px;
}

body.outpost-real-page-preview #dm .battle-scene-context .design-summary-strip > span {
  min-height: 34px;
  padding-top: 5px;
  padding-bottom: 5px;
}

body.outpost-real-page-preview #dm .dm-battle-design-workspace.battle-scene-authoring {
  display: grid;
  gap: 0;
  min-width: 0;
  min-height: 410px;
  height: clamp(410px, calc(100dvh - 270px), 680px);
  overflow: hidden;
  border-top: 1px solid var(--op-line);
  border-bottom: 1px solid var(--op-line);
}

@media (min-width: 981px) {
  body.outpost-real-page-preview #dm .dm-battle-design-workspace.battle-scene-authoring {
    height: auto;
    min-height: 0;
  }
}

body.outpost-real-page-preview #dm .battle-scene-authoring .dm-battle-design-board {
  min-width: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--op-bg);
}

body.outpost-real-page-preview #dm .battle-scene-authoring .design-preview-grid,
body.outpost-real-page-preview #dm .battle-scene-authoring .design-preview-grid > .panel,
body.outpost-real-page-preview #dm .battle-scene-authoring .battle-surface {
  min-height: 0;
  height: 100%;
}

body.outpost-real-page-preview #dm .battle-scene-authoring .battle-surface {
  grid-template-columns: minmax(0, 1fr);
}

body.outpost-real-page-preview #dm .battle-scene-authoring .turn-panel {
  display: none;
}

body.outpost-real-page-preview #dm .battle-scene-authoring .dm-battle-design-side {
  position: static;
  display: block;
  min-width: 0;
  height: 100%;
  max-height: none;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 0;
  border-left: 1px solid var(--op-line);
  background: var(--op-bg);
  scrollbar-gutter: stable;
}

/* Shared Battle Surface sizing contract ---------------------------------
   The canvas must own an intrinsic block size. Relying on height:100% made
   the Scene authoring branch collapse when an ancestor used content sizing. */
body.outpost-real-page-preview :is(#encounter, #dm) .battle-surface[data-battle-renderer="phaser"] .battle-map-panel {
  height: auto;
  min-height: 0;
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-surface[data-battle-renderer="phaser"] .battle-board-viewport {
  width: 100%;
  height: auto;
  min-height: 300px;
  aspect-ratio: var(--battle-board-ratio, 1.6667);
}

body.outpost-real-page-preview :is(#encounter, #dm) .battle-surface[data-battle-renderer="phaser"] .battle-board-stage,
body.outpost-real-page-preview :is(#encounter, #dm) .battle-surface[data-battle-renderer="phaser"] .phaser-battle-board {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
}

/* DM Battle workspaces already provide a bounded height. Let the shared
   surface consume that height instead of deriving another height from its
   width; the latter overflowed the Scene/Encounter frame and clipped the
   lower part of the board. */
body.outpost-real-page-preview #dm :is(.dm-battle-live-board, .battle-scene-authoring .dm-battle-design-board) .battle-surface[data-battle-renderer="phaser"] .battle-map-panel,
body.outpost-real-page-preview #dm :is(.dm-battle-live-board, .battle-scene-authoring .dm-battle-design-board) .battle-surface[data-battle-renderer="phaser"] .battle-board-viewport {
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
}

@media (max-width: 760px) {
  body.outpost-real-page-preview :is(#encounter, #dm) .battle-surface[data-battle-renderer="phaser"] .battle-board-viewport {
    min-height: 320px;
    aspect-ratio: auto;
  }
}

body.outpost-real-page-preview #dm .dm-battle-authoring-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--op-line);
}

body.outpost-real-page-preview #dm .dm-battle-authoring-head > span {
  display: grid;
  gap: 3px;
}

body.outpost-real-page-preview #dm .dm-battle-authoring-head small,
body.outpost-real-page-preview #dm .dm-battle-authoring-head em,
body.outpost-real-page-preview #dm .dm-battle-setup-step summary em {
  color: var(--op-text-faint);
  font: 7px var(--op-font-mono);
  font-style: normal;
  letter-spacing: .09em;
}

body.outpost-real-page-preview #dm .dm-battle-authoring-head b {
  color: var(--op-text);
  font: 16px var(--op-font-display);
}

body.outpost-real-page-preview #dm .dm-battle-setup-step {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--op-line);
  border-radius: 0;
  background: transparent;
}

body.outpost-real-page-preview #dm .dm-battle-setup-step > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 9px 14px;
  cursor: pointer;
  list-style: none;
}

body.outpost-real-page-preview #dm .dm-battle-setup-step > summary::-webkit-details-marker {
  display: none;
}

body.outpost-real-page-preview #dm .dm-battle-setup-step > summary > span {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 2px 9px;
  min-width: 0;
}

body.outpost-real-page-preview #dm .dm-battle-setup-step > summary i {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--op-line);
  color: var(--op-text-faint);
  font: 8px var(--op-font-mono);
  font-style: normal;
}

body.outpost-real-page-preview #dm .dm-battle-setup-step[open] > summary i {
  border-color: var(--op-line-strong);
  color: var(--op-text);
}

body.outpost-real-page-preview #dm .dm-battle-setup-step > summary b {
  color: var(--op-text);
  font-size: 11px;
}

body.outpost-real-page-preview #dm .dm-battle-setup-step > summary small {
  overflow: hidden;
  color: var(--op-text-muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview #dm .dm-battle-step-body {
  display: grid;
  gap: 12px;
  padding: 4px 14px 16px;
}

body.outpost-real-page-preview #dm .dm-battle-step-body .scene-choice-group {
  margin: 0;
}

body.outpost-real-page-preview #dm .dm-battle-step-body .scene-choice-buttons button {
  min-height: 42px;
}

body.outpost-real-page-preview #dm .dm-battle-title-field,
body.outpost-real-page-preview #dm .dm-battle-radius-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(94px, .75fr);
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--op-line-faint);
}

body.outpost-real-page-preview #dm :is(.dm-battle-title-field, .dm-battle-radius-field) > span {
  display: grid;
  gap: 2px;
}

body.outpost-real-page-preview #dm :is(.dm-battle-title-field, .dm-battle-radius-field) small {
  color: var(--op-text-faint);
  font-size: 8px;
}

body.outpost-real-page-preview #dm .dm-battle-add-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  align-items: end;
  gap: 8px;
}

body.outpost-real-page-preview #dm .dm-battle-add-grid > button,
body.outpost-real-page-preview #dm .dm-battle-add-party {
  min-height: 34px;
}

body.outpost-real-page-preview #dm .dm-battle-add-party {
  width: 100%;
  border-color: var(--op-line-strong);
}

body.outpost-real-page-preview #dm .dm-battle-draft-roster {
  display: grid;
  border-top: 1px solid var(--op-line-faint);
}

body.outpost-real-page-preview #dm .dm-battle-roster-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  border-bottom: 1px solid var(--op-line-faint);
}

body.outpost-real-page-preview #dm .dm-battle-roster-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--op-line);
  color: var(--op-text-muted);
  font: 9px var(--op-font-mono);
}

body.outpost-real-page-preview #dm .dm-battle-roster-row > span:nth-child(2) {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.outpost-real-page-preview #dm .dm-battle-roster-row small {
  overflow: hidden;
  color: var(--op-text-faint);
  font: 7px var(--op-font-mono);
  letter-spacing: .06em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview #dm .dm-battle-roster-row button {
  min-height: 28px;
  padding: 0 7px;
  border: 0;
  color: var(--op-text-faint);
  font-size: 7px;
}

body.outpost-real-page-preview #dm .dm-battle-roster-row button:hover,
body.outpost-real-page-preview #dm .dm-battle-roster-row button:focus-visible {
  color: var(--op-danger);
}

body.outpost-real-page-preview #dm .dm-battle-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

body.outpost-real-page-preview #dm .dm-battle-tool-grid button {
  min-height: 32px;
  margin: 0;
}

body.outpost-real-page-preview #dm .dm-battle-cover-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--op-line-faint);
}

body.outpost-real-page-preview #dm .dm-battle-cover-group legend {
  width: 100%;
  padding: 0 0 6px;
  color: var(--op-text-faint);
  font: 7px var(--op-font-mono);
  letter-spacing: .09em;
}

body.outpost-real-page-preview #dm .dm-battle-cover-group button {
  min-height: 30px;
  border: 0;
  border-right: 1px solid var(--op-line-faint);
}

body.outpost-real-page-preview #dm .dm-battle-cover-group button:last-child {
  border-right: 0;
}

body.outpost-real-page-preview #dm .dm-battle-adjustment-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--op-line-faint);
}

body.outpost-real-page-preview #dm .dm-battle-adjustment-footer span {
  color: var(--op-text-faint);
  font: 7px var(--op-font-mono);
  letter-spacing: .08em;
}

@media (min-width: 981px) {
  body.outpost-real-page-preview #dm .dm-battle-design-workspace.battle-scene-authoring {
    grid-template-columns: minmax(0, 1fr) clamp(292px, 28vw, 350px);
  }
}

@media (max-width: 980px) {
  body.outpost-real-page-preview #dm .dm-battle-design-workspace.battle-scene-authoring {
    display: block;
    height: auto;
    overflow: visible;
  }

  body.outpost-real-page-preview #dm .battle-scene-authoring .dm-battle-design-board {
    min-height: 430px;
  }

  body.outpost-real-page-preview #dm .battle-scene-authoring .dm-battle-design-side {
    height: auto;
    overflow: visible;
    border-top: 1px solid var(--op-line);
    border-left: 0;
  }
}
/* Combat Result Stage ------------------------------------------------------
 * Replaces the legacy circular/gold roll popup with the same sharp,
 * authoritative result language used by the Dice workspace. */
body.outpost-real-page-preview .attack-roll-presentation {
  width: 248px;
  gap: 0;
  justify-items: stretch;
  pointer-events: none;
  filter: drop-shadow(0 18px 34px color-mix(in srgb, #000 46%, transparent));
}

body.outpost-real-page-preview .attack-roll-presentation[data-awaiting="true"] {
  pointer-events: auto;
}

body.outpost-real-page-preview .attack-roll-presentation.anchored {
  transform-origin: center;
  will-change: left, top, opacity, transform;
}

body.outpost-real-page-preview .attack-roll-presentation[data-placement^="top"] {
  transform-origin: 50% 100%;
}

body.outpost-real-page-preview .attack-roll-presentation[data-placement^="bottom"] {
  transform-origin: 50% 0;
}

body.outpost-real-page-preview .attack-roll-presentation[data-placement="left"] {
  transform-origin: 100% 50%;
}

body.outpost-real-page-preview .attack-roll-presentation[data-placement="right"] {
  transform-origin: 0 50%;
}

body.outpost-real-page-preview .attack-roll-shell {
  display: grid;
  border: 1px solid var(--op-line-strong);
  border-radius: 0;
  color: var(--op-text);
  background: color-mix(in srgb, var(--op-bg) 96%, transparent);
  box-shadow: none;
}

body.outpost-real-page-preview .attack-roll-head,
body.outpost-real-page-preview .attack-roll-shell > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--op-line-faint);
  color: var(--op-text-faint);
  font: 8px var(--op-font-mono);
  letter-spacing: .08em;
}

body.outpost-real-page-preview .attack-roll-head small,
body.outpost-real-page-preview .attack-roll-shell > footer small {
  color: var(--op-text-faint);
  font: inherit;
}

body.outpost-real-page-preview .attack-roll-carryover {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  min-height: 27px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--op-line-faint);
  color: var(--op-text-faint);
  background: color-mix(in srgb, var(--op-surface) 62%, transparent);
  font: 7px/1.2 var(--op-font-mono);
  letter-spacing: .08em;
}

body.outpost-real-page-preview .attack-roll-carryover span {
  flex: 0 0 auto;
}

body.outpost-real-page-preview .attack-roll-carryover b {
  min-width: 0;
  overflow: hidden;
  color: var(--op-text-muted);
  font: 600 8px/1.2 var(--op-font-mono);
  letter-spacing: .03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview .attack-roll-result {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  min-height: 112px;
}

body.outpost-real-page-preview .attack-roll-ring {
  display: grid;
  place-items: center;
  align-content: center;
  width: auto;
  aspect-ratio: auto;
  gap: 4px;
  padding: 10px;
  border: 0;
  border-right: 1px solid var(--op-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.outpost-real-page-preview .attack-roll-ring::before {
  content: "";
  grid-area: 1 / 1 / span 2;
  width: 58px;
  aspect-ratio: 1;
  border: 1px solid var(--op-line-strong);
  background: var(--op-surface-strong);
  clip-path: polygon(50% 0, 91% 22%, 91% 78%, 50% 100%, 9% 78%, 9% 22%);
}

body.outpost-real-page-preview .attack-roll-ring > * {
  z-index: 1;
  grid-column: 1;
}

body.outpost-real-page-preview .attack-roll-ring small {
  grid-row: 1;
  align-self: end;
  max-width: none;
  color: var(--op-text-faint);
  font: 7px var(--op-font-mono);
  letter-spacing: .1em;
}

body.outpost-real-page-preview .attack-roll-ring b {
  grid-row: 2;
  align-self: start;
  color: var(--op-text);
  font: 500 24px/1 var(--op-font-mono);
  text-shadow: none;
}

body.outpost-real-page-preview .attack-roll-result-copy {
  display: grid;
  align-content: center;
  min-width: 0;
  gap: 7px;
  padding: 14px;
}

body.outpost-real-page-preview .attack-roll-result-copy > span {
  overflow: hidden;
  color: var(--op-text-faint);
  font: 8px var(--op-font-mono);
  letter-spacing: .08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview .attack-roll-result-copy > strong,
body.outpost-real-page-preview .attack-roll-status {
  width: max-content;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--op-text);
  background: transparent;
  font: 600 13px var(--op-font-sans);
  text-align: left;
}

body.outpost-real-page-preview .attack-roll-presentation.miss .attack-roll-status {
  border: 0;
  color: var(--op-text-muted);
  background: transparent;
}

body.outpost-real-page-preview .attack-roll-presentation:is(.critical, .showing-damage-result) .attack-roll-status {
  border: 0;
  color: var(--op-text);
  background: transparent;
}

body.outpost-real-page-preview .attack-roll-result-copy p {
  margin: 0;
  overflow: hidden;
  color: var(--op-text-muted);
  font: 9px/1.4 var(--op-font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview .attack-roll-sequence {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 0 10px 9px;
}

body.outpost-real-page-preview .attack-roll-sequence i {
  height: 2px;
  background: var(--op-line-faint);
}

body.outpost-real-page-preview .attack-roll-sequence i.active {
  background: var(--op-text-muted);
}

body.outpost-real-page-preview .attack-roll-sequence.single {
  grid-template-columns: 1fr;
}

body.outpost-real-page-preview .attack-roll-sequence.single i + i {
  display: none;
}

body.outpost-real-page-preview .attack-roll-shell > footer {
  min-height: 42px;
  border-top: 1px solid var(--op-line-faint);
  border-bottom: 0;
}

body.outpost-real-page-preview .attack-roll-meta {
  max-width: 132px;
  overflow: hidden;
  color: var(--op-text-faint);
  font: 8px var(--op-font-mono);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview .attack-roll-shell [data-combat-roll-confirm] {
  min-height: 28px;
  padding: 6px 10px;
  border: 1px solid var(--op-line-strong);
  border-radius: 0;
  color: var(--op-bg);
  background: var(--op-text);
  box-shadow: none;
  font: 600 8px var(--op-font-mono);
  letter-spacing: .06em;
}

body.outpost-real-page-preview .attack-roll-shell [data-combat-roll-confirm]:is(:hover, :focus-visible) {
  color: var(--op-text);
  background: var(--op-surface-strong);
}

@media (max-width: 700px) {
  body.outpost-real-page-preview .attack-roll-presentation {
    right: 12px;
    bottom: calc(var(--op-workspace-bottom-safe-area) + 8px);
    width: min(248px, calc(100vw - 24px));
  }
}

/* A wide Battle follows the shared application composition. Only the
   board's intrinsic height needs a component-level release here. */
@media (min-width: 1800px) {
  body.outpost-real-page-preview #encounter .player-battle-experience .battle-shell {
    height: auto;
    min-height: 0;
    align-items: stretch;
  }
}

/* Death Save emphasis — presentation-only modifier on the shared roll stage. */
body.outpost-real-page-preview .attack-roll-presentation[class*="death-save-"] { width: 286px; }
body.outpost-real-page-preview .attack-roll-presentation[class*="death-save-"] .attack-roll-shell { border-color: var(--op-line-strong); }
body.outpost-real-page-preview .attack-roll-presentation[class*="death-save-"] .attack-roll-head { min-height: 38px; color: var(--op-text); }
body.outpost-real-page-preview .attack-roll-presentation[class*="death-save-"] .attack-roll-head > span { font-size: 10px; font-weight: 700; letter-spacing: .14em; }
body.outpost-real-page-preview .attack-roll-presentation[class*="death-save-"] .attack-roll-result { grid-template-columns: 104px minmax(0, 1fr); min-height: 132px; }
body.outpost-real-page-preview .attack-roll-presentation[class*="death-save-"] .attack-roll-ring::before { width: 72px; border-width: 2px; }
body.outpost-real-page-preview .attack-roll-presentation[class*="death-save-"] .attack-roll-ring b { font-size: 31px; font-weight: 650; }
body.outpost-real-page-preview .attack-roll-presentation[class*="death-save-"] .attack-roll-result-copy > span { color: var(--op-text-muted); }
body.outpost-real-page-preview .attack-roll-presentation[class*="death-save-"] .attack-roll-status { font-size: 17px; font-weight: 700; letter-spacing: .04em; }
body.outpost-real-page-preview .attack-roll-presentation[class*="death-save-"] .attack-roll-result-copy p { white-space: normal; overflow: visible; line-height: 1.5; }
body.outpost-real-page-preview .death-save-track { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--op-line-faint); border-bottom:1px solid var(--op-line-faint); }
body.outpost-real-page-preview .death-save-track > div { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:42px; padding:8px 10px; }
body.outpost-real-page-preview .death-save-track > div + div { border-left:1px solid var(--op-line-faint); }
body.outpost-real-page-preview .death-save-track span { color:var(--op-text-faint); font:7px var(--op-font-mono); letter-spacing:.08em; }
body.outpost-real-page-preview .death-save-track b { display:flex; gap:5px; }
body.outpost-real-page-preview .death-save-track i { width:10px; height:10px; border:1px solid var(--op-line-strong); background:transparent; }
body.outpost-real-page-preview .death-save-track > div:first-child i.filled { background:var(--op-text); }
body.outpost-real-page-preview .death-save-track > div:last-child i.filled { background:var(--op-text-muted); }
body.outpost-real-page-preview .attack-roll-presentation[class*="death-save-"][data-awaiting="true"] [data-combat-roll-confirm] { min-height:34px; padding:8px 12px; font-size:9px; letter-spacing:.08em; }
body.outpost-real-page-preview .attack-roll-presentation.death-save-result.success .attack-roll-status,
body.outpost-real-page-preview .attack-roll-presentation.death-save-result.stable .attack-roll-status,
body.outpost-real-page-preview .attack-roll-presentation.death-save-result.revived .attack-roll-status { color:var(--op-text); }
body.outpost-real-page-preview .attack-roll-presentation.death-save-result.failure .attack-roll-status,
body.outpost-real-page-preview .attack-roll-presentation.death-save-result.dead .attack-roll-status,
body.outpost-real-page-preview .attack-roll-presentation.death-save-result.roll-failed .attack-roll-status { color:var(--op-text-muted); }
body.outpost-real-page-preview .attack-roll-presentation[class*="death-save-"] .attack-roll-sequence { display:none; }
@media (max-width:700px) {
  body.outpost-real-page-preview .attack-roll-presentation[class*="death-save-"] { width:min(286px, calc(100vw - 24px)); }
}

/* Battle conclusion — one derived presentation for Player and DM. */
body.outpost-real-page-preview .battle-conclusion {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, .9fr) minmax(280px, 1.35fr) minmax(112px, auto);
  align-items: stretch;
  width: min(820px, calc(100% - 20px));
  max-width: 820px;
  justify-self: center;
  align-self: start;
  margin: 10px auto 0;
  border: 1px solid var(--op-line-strong);
  border-radius: 0;
  color: var(--op-text);
  background: color-mix(in srgb, var(--op-surface) 94%, transparent);
  box-shadow: none;
  overflow: hidden;
}

body.outpost-real-page-preview .battle-conclusion-signal {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--op-success, #9fffc8);
}

body.outpost-real-page-preview .battle-conclusion-defeat .battle-conclusion-signal,
body.outpost-real-page-preview .battle-conclusion-draw .battle-conclusion-signal {
  background: var(--op-danger, #ff6b6b);
}

body.outpost-real-page-preview .battle-conclusion-copy {
  min-width: 0;
  padding: 14px 16px 14px 18px;
}

body.outpost-real-page-preview .battle-conclusion-copy > small,
body.outpost-real-page-preview .battle-conclusion-ledger dt,
body.outpost-real-page-preview .battle-conclusion-ledger small {
  color: var(--op-text-faint);
  font: 7px var(--op-font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

body.outpost-real-page-preview .battle-conclusion-copy h3 {
  margin: 5px 0 3px;
  color: var(--op-text);
  font: 650 18px/1.1 var(--op-font-sans);
}

body.outpost-real-page-preview .battle-conclusion-copy p {
  max-width: 520px;
  margin: 0;
  color: var(--op-text-muted);
  font: 10px/1.45 var(--op-font-sans);
}

body.outpost-real-page-preview .battle-conclusion-copy .battle-conclusion-warning {
  margin-top: 7px;
  padding-left: 8px;
  border-left: 1px solid var(--op-danger, #ff6b6b);
  color: var(--op-text);
}

body.outpost-real-page-preview .battle-conclusion-ledger {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  min-width: 0;
  margin: 0;
  border-left: 1px solid var(--op-line-faint);
}

body.outpost-real-page-preview .battle-conclusion-ledger > div {
  display: flex;
  min-width: 0;
  padding: 11px 12px;
  flex-direction: column;
  justify-content: center;
}

body.outpost-real-page-preview .battle-conclusion-ledger > div + div { border-left: 1px solid var(--op-line-faint); }
body.outpost-real-page-preview .battle-conclusion-ledger dd { margin: 5px 0 3px; color: var(--op-text); font: 650 15px/1 var(--op-font-sans); }
body.outpost-real-page-preview .battle-conclusion-ledger small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

body.outpost-real-page-preview .battle-conclusion-actions {
  display: flex;
  min-width: 132px;
  padding: 10px;
  align-items: center;
  border-left: 1px solid var(--op-line-faint);
}

body.outpost-real-page-preview .battle-conclusion-actions button {
  width: 100%;
  min-height: 36px;
  border-radius: 0;
}

body.outpost-real-page-preview #dm .dm-battle-live-board .encounter-battle-frame:has(.battle-conclusion) {
  grid-template-rows: auto auto minmax(0, 1fr);
}

@media (max-width: 1050px) {
  body.outpost-real-page-preview .battle-conclusion { grid-template-columns: 1fr auto; }
  body.outpost-real-page-preview .battle-conclusion-copy { grid-column: 1 / -1; border-bottom: 1px solid var(--op-line-faint); }
}

@media (max-width: 700px) {
  body.outpost-real-page-preview .battle-conclusion { display: block; }
  body.outpost-real-page-preview .battle-conclusion-ledger { grid-template-columns: 1fr; border-top: 1px solid var(--op-line-faint); border-left: 0; }
  body.outpost-real-page-preview .battle-conclusion-ledger > div + div { border-top: 1px solid var(--op-line-faint); border-left: 0; }
  body.outpost-real-page-preview .battle-conclusion-actions { border-top: 1px solid var(--op-line-faint); border-left: 0; }
}

/* DM selected-token roster + action bar · v54 */
body.outpost-real-page-preview #dm .dm-token-roster{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:6px;margin:8px 0 10px}
body.outpost-real-page-preview #dm .dm-token-roster button{position:relative;display:grid;gap:2px;min-height:46px;padding:8px 9px;text-align:left;border:1px solid var(--op-line);background:var(--op-surface-2);border-radius:0}
body.outpost-real-page-preview #dm .dm-token-roster button.selected{border-color:var(--op-text);transform:translateY(-1px)}
body.outpost-real-page-preview #dm .dm-token-roster button.active-turn{box-shadow:inset 2px 0 0 var(--op-success,#7bdca8)}
body.outpost-real-page-preview #dm .dm-token-roster button[data-downed=true]{opacity:.5}
body.outpost-real-page-preview #dm .dm-token-roster button small{color:var(--op-text-faint);font:8px var(--op-font-mono)}
body.outpost-real-page-preview #dm .dm-token-roster button em{position:absolute;right:6px;top:6px;color:var(--op-success,#7bdca8);font:7px var(--op-font-mono);font-style:normal}
body.outpost-real-page-preview #dm .dm-token-action-bar{padding:10px 0;border-top:1px solid var(--op-line);border-bottom:1px solid var(--op-line);margin-bottom:10px}
body.outpost-real-page-preview #dm .dm-token-action-bar .dm-token-section-title{display:flex;justify-content:space-between;gap:10px;align-items:end;margin-bottom:7px}
body.outpost-real-page-preview #dm .dm-token-action-bar .dm-token-section-title span{display:grid;gap:2px}
body.outpost-real-page-preview #dm .dm-token-action-bar .dm-token-section-title small,body.outpost-real-page-preview #dm .dm-token-action-bar .dm-token-section-title em{color:var(--op-text-faint);font:8px var(--op-font-mono);font-style:normal}
body.outpost-real-page-preview #dm .dm-token-action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:7px}
body.outpost-real-page-preview #dm .dm-token-action-grid button{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;gap:2px 7px;align-items:center;min-height:48px;padding:6px;text-align:left;border:1px solid var(--op-line);background:var(--op-surface-2);border-radius:0}
body.outpost-real-page-preview #dm .dm-token-action-grid button>span{grid-row:1/3;width:34px;height:34px;overflow:hidden;background:var(--op-surface-3)}
body.outpost-real-page-preview #dm .dm-token-action-grid button>span img{width:100%;height:100%;object-fit:cover}
body.outpost-real-page-preview #dm .dm-token-action-grid button b{font-size:10px;line-height:1.1}
body.outpost-real-page-preview #dm .dm-token-action-grid button small{color:var(--op-text-faint);font:7px var(--op-font-mono)}
body.outpost-real-page-preview #dm .dm-token-action-grid button:disabled{opacity:.42;filter:saturate(.45)}

.resonance-chain-overlay {
  position: fixed;
  left: 50%;
  top: 22%;
  z-index: 1200;
  min-width: min(420px, calc(100vw - 48px));
  padding: 14px 22px 16px;
  transform: translate(-50%, 12px) scale(.97);
  opacity: 0;
  pointer-events: none;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--accent, #d8b35b) 72%, transparent);
  background: color-mix(in srgb, var(--panel, #101010) 92%, transparent);
  box-shadow: 0 0 28px color-mix(in srgb, var(--accent, #d8b35b) 22%, transparent);
  transition: opacity .18s ease, transform .18s ease;
}
.resonance-chain-overlay.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.resonance-chain-overlay small { display:block; letter-spacing:.22em; opacity:.72; }
.resonance-chain-overlay b { display:block; margin-top:4px; font-size:clamp(20px,2.4vw,30px); letter-spacing:.08em; }
.resonance-chain-overlay span { display:block; margin-top:5px; opacity:.8; font-size:12px; letter-spacing:.08em; }
@media (prefers-reduced-motion: reduce) {
  .resonance-chain-overlay { transition: opacity .01ms linear; transform: translate(-50%,0); }
}
/* Resonance Signature · Battle Hand + Fusion Picker */
.battle-resonance-strip{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 2px 5px;border-top:1px solid var(--op-border-soft);border-bottom:1px solid var(--op-border-soft)}
.battle-resonance-meter{display:grid;grid-template-columns:auto minmax(84px,1fr);gap:10px;align-items:center;min-width:0}
.battle-resonance-meter>span{display:grid;gap:1px;min-width:74px}
.battle-resonance-meter small{font:650 8px/1 var(--op-font-mono);letter-spacing:.16em;color:var(--op-text-faint)}
.battle-resonance-meter b{font:700 10px/1.1 var(--op-font-mono);letter-spacing:.08em;color:var(--op-text)}
.battle-resonance-meter>i{display:block;height:4px;overflow:hidden;border:1px solid var(--op-border-soft);background:color-mix(in srgb,var(--op-surface-deep) 82%,transparent)}
.battle-resonance-meter>i>em{display:block;height:100%;background:var(--op-text);box-shadow:0 0 9px color-mix(in srgb,var(--op-text) 28%,transparent);transition:width .18s ease}
.battle-resonance-strip[data-resonance-full="true"] .battle-resonance-meter>i>em{box-shadow:0 0 14px color-mix(in srgb,var(--op-text) 52%,transparent)}
.battle-resonance-strip>[data-resonance-ultimate]{min-width:88px;padding:7px 11px;border:1px solid var(--op-border-strong);border-radius:0;background:var(--op-surface);color:var(--op-text);font:700 9px/1 var(--op-font-mono);letter-spacing:.13em}
.battle-resonance-strip>[data-resonance-ultimate]:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 5px 18px color-mix(in srgb,var(--op-text) 12%,transparent)}
.battle-resonance-strip>[data-resonance-ultimate]:disabled{opacity:.34;cursor:not-allowed}
.resonance-fusion-picker{width:min(920px,calc(100vw - 40px));max-height:min(780px,calc(100vh - 48px));overflow:auto;border-radius:0}
.resonance-fusion-picker>p{margin:5px 0 14px;color:var(--op-text-muted)}
.resonance-fusion-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px}
.resonance-fusion-card{display:grid;grid-template-columns:44px minmax(0,1fr);gap:9px;align-items:center;padding:8px;border:1px solid var(--op-border-soft);background:var(--op-surface);transition:transform .14s ease,border-color .14s ease}
.resonance-fusion-card.is-core,.resonance-fusion-card.is-catalyst{border-color:var(--op-border-strong);transform:translateY(-2px)}
.resonance-fusion-card .battle-action-card-art{width:44px;height:56px;grid-row:1/3}
.resonance-fusion-card>div{display:grid;gap:3px;min-width:0}
.resonance-fusion-card>div b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.resonance-fusion-card>div small{font:650 8px/1.2 var(--op-font-mono);letter-spacing:.1em;color:var(--op-text-faint)}
.resonance-fusion-card nav{display:flex;gap:5px;grid-column:2}
.resonance-fusion-card nav button{flex:1;padding:5px 7px;border:1px solid var(--op-border-soft);border-radius:0;background:transparent;color:var(--op-text);font:650 8px/1 var(--op-font-mono);letter-spacing:.1em}
.resonance-fusion-card.is-core [data-fusion-core],.resonance-fusion-card.is-catalyst [data-fusion-catalyst]{background:var(--op-text);color:var(--op-surface-deep)}
.resonance-fusion-preview{display:grid;gap:4px;margin-top:12px;padding:12px;border-top:1px solid var(--op-border-strong);border-bottom:1px solid var(--op-border-soft)}
.resonance-fusion-preview small{font:650 8px/1 var(--op-font-mono);letter-spacing:.16em;color:var(--op-text-faint)}
.resonance-fusion-preview b{font-size:18px;letter-spacing:.05em}
.resonance-fusion-preview span{font:650 9px/1.2 var(--op-font-mono);letter-spacing:.11em;color:var(--op-text-muted)}
.resonance-ultimate-overlay{position:fixed;left:50%;top:18%;z-index:1220;min-width:min(520px,calc(100vw - 42px));padding:18px 26px 20px;transform:translate(-50%,16px) scale(.96);opacity:0;pointer-events:none;text-align:center;border:1px solid var(--op-border-strong);background:color-mix(in srgb,var(--op-surface-deep) 94%,transparent);box-shadow:0 0 42px color-mix(in srgb,var(--op-text) 20%,transparent);transition:opacity .22s ease,transform .22s ease}
.resonance-ultimate-overlay.show{opacity:1;transform:translate(-50%,0) scale(1)}
.resonance-ultimate-overlay small{display:block;font:700 9px/1 var(--op-font-mono);letter-spacing:.26em;color:var(--op-text-muted)}
.resonance-ultimate-overlay b{display:block;margin-top:6px;font-size:clamp(24px,3vw,38px);letter-spacing:.09em}
.resonance-ultimate-overlay span{display:block;margin-top:7px;font:650 10px/1.2 var(--op-font-mono);letter-spacing:.12em;color:var(--op-text-muted)}
@media(max-width:720px){.battle-resonance-strip{grid-template-columns:1fr}.battle-resonance-strip>[data-resonance-ultimate]{width:100%}.resonance-fusion-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.battle-resonance-meter>i>em,.resonance-fusion-card,.resonance-ultimate-overlay{transition:none}.resonance-fusion-card.is-core,.resonance-fusion-card.is-catalyst{transform:none}.resonance-ultimate-overlay{transform:translate(-50%,0)}}
.resonance-fusion-codex{margin-top:10px;padding:9px 11px;border:1px solid var(--op-border-soft);background:color-mix(in srgb,var(--op-surface-deep) 76%,transparent)}
.resonance-fusion-codex summary{cursor:pointer;font:700 9px/1 var(--op-font-mono);letter-spacing:.12em;color:var(--op-text-muted)}
.resonance-fusion-codex>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:6px;margin-top:8px}
.resonance-fusion-codex>div>span{display:grid;gap:2px;padding:7px;border-top:1px solid var(--op-border-soft)}
.resonance-fusion-codex b{font-size:10px}
.resonance-fusion-codex small{font:650 8px/1.2 var(--op-font-mono);letter-spacing:.08em;color:var(--op-text-faint)}
.resonance-fusion-codex.empty{display:grid;gap:4px;color:var(--op-text-muted);font-size:11px}

.quick-pending-card-description{margin:0;padding:8px 0;border-top:1px solid var(--line,#343a40);font-size:12px;line-height:1.45;opacity:.86}.quick-pending-card-effects{display:grid;gap:3px}.quick-pending-card-effects span{font-size:11px;opacity:.8}.quick-pending-card-instruction.is-blocked{opacity:.65}