/* PROXIMA // Wizard, choices and screen-specific styles (second <style> block). */
.px-choices {
  margin: 17px 0 6px;
  padding: 17px 18px;
  border: 1px solid hsl(calc(var(--th-h) + -1.3) calc(51.6% * var(--th-s)) calc(30.8% + var(--th-l)));
  background: linear-gradient(150deg, #191913, hsl(calc(var(--th-bh) + 3.6) calc(18.9% * var(--th-bs)) 7.3%));
  box-shadow: inset 3px 0 hsl(calc(var(--th-h) + -1) calc(59.5% * var(--th-s)) calc(49.4% + var(--th-l)));
  border-radius: 6px;
  display: grid;
  gap: 11px;
}
.px-choices h4 {
  margin: 0;
  font:
    800 13px Consolas,
    monospace;
  letter-spacing: 1.6px;
  color: hsl(calc(var(--th-h) + 0.2) calc(76% * var(--th-s)) calc(62.4% + var(--th-l)));
}
.px-choices p {
  color: #b7bcb9;
  font-size: 12px;
  line-height: 1.55;
  margin: 0;
}
.px-choices label {
  display: block;
  font-size: 12px;
  color: #d5d7d1;
}
.px-choices label small {
  display: block;
  color: hsl(calc(var(--th-h) + -2.8) calc(51.4% * var(--th-s)) calc(58.8% + var(--th-l)));
  font:
    700 10px Consolas,
    monospace;
  letter-spacing: 0.9px;
  margin-bottom: 6px;
}
.px-choices select {
  width: 100%;
  min-width: 0;
  background: hsl(calc(var(--th-bh) + 2.5) calc(25% * var(--th-bs)) 6.3%);
  color: hsl(calc(var(--th-h) + 1.2) calc(25.5% * var(--th-s)) calc(90% + var(--th-l)));
  border: 1px solid hsl(calc(var(--th-h) + 5.3) calc(23.7% * var(--th-s)) calc(25.7% + var(--th-l)));
  padding: 10px;
  border-radius: 4px;
}
.px-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.px-choice-detail {
  padding: 10px;
  background: hsl(calc(var(--th-h) + 4.1) calc(18.6% * var(--th-s)) calc(11.6% + var(--th-l)));
  color: hsl(calc(var(--th-h) + 1.2) calc(36.6% * var(--th-s)) calc(72.2% + var(--th-l)));
  border-left: 2px solid hsl(calc(var(--th-h) + 1.3) calc(63.7% * var(--th-s)) calc(48.6% + var(--th-l)));
  font-size: 12px;
}
.px-level-choice {
  padding: 13px;
  border: 1px solid #363a31;
  background: hsl(calc(var(--th-bh) + 8.3) calc(22% * var(--th-bs)) 8%);
  border-radius: 5px;
  display: grid;
  gap: 9px;
}
.px-level-choice .statrow {
  padding: 0 0 8px;
  border-bottom: 1px solid #373d34;
}
.px-feat-description {
  margin: 8px 0 12px;
  padding: 10px 12px;
  background: #171a17;
  border: 1px solid hsl(calc(var(--th-h) + -2.6) calc(45.3% * var(--th-s)) calc(29.4% + var(--th-l)));
  border-left: 3px solid hsl(calc(var(--th-h) + -0.6) calc(61.2% * var(--th-s)) calc(54.5% + var(--th-l)));
  color: hsl(calc(var(--th-h) + -2.1) calc(17.1% * var(--th-s)) calc(83.9% + var(--th-l)));
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  max-height: 180px;
  overflow: auto;
}
.px-choice-grid select:focus,
.px-choices select:focus {
  outline: 1px solid hsl(calc(var(--th-h) + -1.9) calc(77.7% * var(--th-s)) calc(59.6% + var(--th-l)));
}
.px-level-choice .chip {
  margin-right: 0;
}
@media (max-width: 750px) {
  .px-choice-grid {
    grid-template-columns: 1fr;
  }
  .px-choices {
    padding: 12px;
  }
}

.sidebar .nav-btn {
  position: relative;
  isolation: isolate;
  z-index: 0;
  transform-origin: 15% 50%;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    transform 0.25s cubic-bezier(0.2, 0.82, 0.22, 1.3),
    background-color 0.22s ease,
    color 0.2s ease,
    box-shadow 0.24s ease,
    border-color 0.24s ease;
}
.sidebar .nav-btn::after {
  content: '';
  position: absolute;
  inset: -2px;
  border: 1px solid hsl(calc(var(--th-h) + -0.6) calc(65.1% * var(--th-s)) calc(57.3% + var(--th-l)));
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.sidebar .nav-btn:is(:hover, :focus-visible) {
  transform: translate3d(2px, -4px, 0) scale(1.045);
  z-index: 6;
  background: linear-gradient(
    105deg,
    hsl(calc(var(--th-h) + -3.3) calc(39.1% * var(--th-s)) calc(18% + var(--th-l))) 0%,
    #292b22 67%,
    hsl(calc(var(--th-bh) + -15) calc(11.5% * var(--th-bs)) 10.2%) 100%
  );
  color: hsl(calc(var(--th-h) + -0.3) calc(100% * var(--th-s)) calc(82.4% + var(--th-l)));
  box-shadow:
    0 10px 18px #000a,
    0 0 15px hsl(calc(var(--th-h) + -2.4) calc(56.6% * var(--th-s)) calc(47.8% + var(--th-l)) / 0.2),
    inset 0 0 16px hsl(calc(var(--th-h) + -1.7) calc(67.5% * var(--th-s)) calc(47.1% + var(--th-l)) / 0.1);
}
.sidebar .nav-btn:is(:hover, :focus-visible)::after {
  opacity: 0.83;
}
.sidebar .nav-btn:is(:hover, :focus-visible) .ico {
  color: hsl(calc(var(--th-h) + -0.7) calc(100% * var(--th-s)) calc(72.4% + var(--th-l)));
  text-shadow: 0 0 9px hsl(calc(var(--th-h) + -2.2) calc(58.9% * var(--th-s)) calc(57.1% + var(--th-l)) / 0.6);
  transform: scale(1.14);
}
.sidebar .nav-btn .ico {
  transition:
    transform 0.22s ease,
    color 0.22s ease,
    text-shadow 0.22s ease;
}
.sidebar .nav-btn:active {
  transform: translate3d(1px, -1px, 0) scale(1.012);
}
.sidebar .nav-btn.active:is(:hover, :focus-visible) {
  border-left-color: hsl(calc(var(--th-h) + -1.5) calc(92.7% * var(--th-s)) calc(67.6% + var(--th-l)));
}
@media (max-width: 800px) {
  .sidebar .nav-btn:is(:hover, :focus-visible) {
    transform: translate3d(0, -3px, 0) scale(1.025);
  }
}

.px-page-decompile {
  opacity: 0.78 !important;
  filter: brightness(0.85) blur(0.3px) !important;
  transform: scale(0.998) !important;
  transition:
    opacity 0.09s ease,
    filter 0.09s ease,
    transform 0.09s ease !important;
}
.px-assembly-layer {
  position: fixed;
  top: 0;
  height: 100vh;
  z-index: 90;
  pointer-events: none;
  display: block;
  overflow: hidden;
  contain: layout paint;
}
.px-assembly-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.px-assembly-beam {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 50%;
  height: 1px;
  width: 0;
  background: linear-gradient(
    90deg,
    transparent,
    hsl(calc(var(--th-h) + -2.5) calc(44% * var(--th-s)) calc(42.7% + var(--th-l)) / 0.3) 25%,
    hsl(calc(var(--th-h) + -2.8) calc(49.1% * var(--th-s)) calc(56.9% + var(--th-l)) / 0.5) 50%,
    hsl(calc(var(--th-h) + -2.5) calc(44% * var(--th-s)) calc(42.7% + var(--th-l)) / 0.3) 75%,
    transparent
  );
  transform: translate(-50%, -50%);
  animation: px-assembly-expand 0.58s ease-out both;
}
@keyframes px-assembly-expand {
  0% {
    width: 0;
    opacity: 0;
  }
  20% {
    opacity: 0.38;
  }
  70% {
    width: 70%;
    opacity: 0.27;
  }
  100% {
    width: 105%;
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar .nav-btn,
  .sidebar .nav-btn .ico,
  .sidebar .nav-btn::after {
    transition: none !important;
  }
  .sidebar .nav-btn:is(:hover, :focus-visible),
  .sidebar .nav-btn:active {
    transform: none !important;
  }
  .sidebar .nav-btn:is(:hover, :focus-visible) .ico {
    transform: none !important;
  }
  .px-assembly-layer,
  .px-assembly-canvas,
  .px-assembly-beam {
    display: none !important;
    animation: none !important;
  }
  .px-page-decompile {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

.recruit-card .recruit-emblem {
  height: 86px;
  justify-content: center;
}
.recruit-emblem .px-species-sigil {
  width: 83px;
  height: 83px;
  overflow: visible;
  color: hsl(calc(var(--th-h) + -2.4) calc(60.5% * var(--th-s)) calc(55.3% + var(--th-l)));
  stroke: hsl(calc(var(--th-h) + -2.4) calc(60.5% * var(--th-s)) calc(55.3% + var(--th-l)));
  fill: none;
  filter: drop-shadow(
    0 0 6px hsl(calc(var(--th-h) + -1.5) calc(64.5% * var(--th-s)) calc(39.8% + var(--th-l)) / 0.2)
  );
  transition:
    filter 0.18s ease,
    transform 0.18s ease;
}
.recruit-emblem .px-species-outer {
  stroke: hsl(calc(var(--th-h) + -1.8) calc(35% * var(--th-s)) calc(32% + var(--th-l)));
  stroke-width: 1;
  fill: none;
}
.recruit-emblem .px-species-glyph {
  stroke: currentColor;
  stroke-width: 3;
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.recruit-emblem .px-species-code {
  fill: hsl(calc(var(--th-h) + -1.9) calc(42.4% * var(--th-s)) calc(52.4% + var(--th-l)));
  stroke: none;
  font:
    700 8px Consolas,
    monospace;
  letter-spacing: 1px;
}
.recruit-card:hover .px-species-sigil,
.recruit-card.selected .px-species-sigil {
  color: hsl(calc(var(--th-h) + -1) calc(100% * var(--th-s)) calc(80.2% + var(--th-l)));
  stroke: hsl(calc(var(--th-h) + -1) calc(100% * var(--th-s)) calc(80.2% + var(--th-l)));
  filter: drop-shadow(
    0 0 9px hsl(calc(var(--th-h) + -0.6) calc(71.3% * var(--th-s)) calc(57.6% + var(--th-l)) / 0.5)
  );
  transform: scale(1.055);
}
.px-board-shell {
  background: hsl(calc(var(--th-bh) + 5) calc(15.8% * var(--th-bs)) 7.5%);
  border: 1px solid hsl(calc(var(--th-h) + -2.6) calc(37.2% * var(--th-s)) calc(30.6% + var(--th-l)));
  box-shadow: 0 7px 22px #0005;
  min-width: 0;
}
.px-board-title {
  padding: 15px 16px;
  border-bottom: 1px solid hsl(calc(var(--th-h) + -2.7) calc(42.1% * var(--th-s)) calc(28.4% + var(--th-l)));
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(
    90deg,
    hsl(calc(var(--th-h) + -2.1) calc(24.1% * var(--th-s)) calc(11.4% + var(--th-l))),
    hsl(calc(var(--th-bh) + 12.1) calc(16.3% * var(--th-bs)) 8.4%) 70%
  );
}
.px-board-title strong,
.px-board-aside-title {
  font:
    800 13px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + -1.6) calc(72.2% * var(--th-s)) calc(64.7% + var(--th-l)));
  letter-spacing: 1px;
}
.px-board-title small {
  display: block;
  color: hsl(calc(var(--th-h) + 0.3) calc(27.8% * var(--th-s)) calc(59.8% + var(--th-l)));
  font:
    10px Consolas,
    monospace;
  letter-spacing: 1px;
  margin-top: 5px;
}
.px-board-live {
  margin-left: auto;
  font:
    700 10px Consolas,
    monospace;
  color: #8ac4a5;
  white-space: nowrap;
}
.px-map-pulse {
  height: 11px;
  width: 11px;
  border-radius: 50%;
  background: hsl(calc(var(--th-h) + -2.1) calc(69.1% * var(--th-s)) calc(54.3% + var(--th-l)));
  box-shadow: 0 0 10px hsl(calc(var(--th-h) + -0.9) calc(53.7% * var(--th-s)) calc(51.8% + var(--th-l)) / 0.5);
  flex: none;
}
.px-board-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  min-width: 0;
}
.px-board-layout > div:first-child {
  min-width: 0;
  padding: 14px;
}
.px-board-sidebar {
  border-left: 1px solid hsl(calc(var(--th-h) + 6) calc(16.1% * var(--th-s)) calc(24.3% + var(--th-l)));
  background: hsl(calc(var(--th-bh) + 3.6) calc(17.1% * var(--th-bs)) 8%);
  padding: 14px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.px-board-coords {
  font:
    700 9px Consolas,
    monospace;
  letter-spacing: 0.8px;
  color: hsl(calc(var(--th-h) + -0.7) calc(37% * var(--th-s)) calc(57.6% + var(--th-l)));
  margin-bottom: 10px;
}
.px-board-pan {
  overflow: auto;
  max-width: 100%;
  padding: 0 0 6px;
  scrollbar-color: hsl(calc(var(--th-h) + -4.5) calc(41.7% * var(--th-s)) calc(40.4% + var(--th-l)))
    hsl(calc(var(--th-bh) + 3.6) calc(17.9% * var(--th-bs)) 7.6%);
}
.px-board-grid {
  --px-cell: clamp(29px, 2.65vw, 42px);
  width: max-content;
  display: grid;
  grid-template-columns: repeat(var(--px-board-cols), var(--px-cell));
  grid-auto-rows: var(--px-cell);
  border: 1px solid hsl(calc(var(--th-h) + 2) calc(27.1% * var(--th-s)) calc(33.3% + var(--th-l)));
  background: hsl(calc(var(--th-bh) + 1) calc(23.8% * var(--th-bs)) 8.2%);
  position: relative;
}
.px-board-cell {
  position: relative;
  border-right: 1px solid #ffffff0e;
  border-bottom: 1px solid #ffffff0e;
  background: hsl(calc(var(--th-bh) + -10.5) calc(17.5% * var(--th-bs)) 12.4%);
  display: grid;
  place-items: center;
  cursor: crosshair;
  outline: none;
}
.px-board-cell.offset {
  background: hsl(calc(var(--th-bh) + -12.5) calc(13.8% * var(--th-bs)) 11.4%);
}
.px-board-cell:hover,
.px-board-cell:focus-visible,
.px-board-cell.px-drop-target {
  background: hsl(calc(var(--th-h) + -2.6) calc(32.7% * var(--th-s)) calc(20.4% + var(--th-l)));
  box-shadow: inset 0 0 0 1px
    hsl(calc(var(--th-h) + -2.3) calc(61.3% * var(--th-s)) calc(53.3% + var(--th-l)) / 0.3);
}
.px-board-cell.is-selected {
  box-shadow: inset 0 0 0 2px
    hsl(calc(var(--th-h) + -0.4) calc(79.6% * var(--th-s)) calc(69.2% + var(--th-l)));
}
.px-board-token {
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  padding: 2px;
  background: linear-gradient(
    135deg,
    hsl(calc(var(--th-bh) + -12.5) calc(35.1% * var(--th-bs)) 22.4%),
    hsl(calc(var(--th-bh) + 1) calc(44.1% * var(--th-bs)) 13.3%)
  );
  border: 1px solid #5db8b2;
  color: #9ee4dd;
  display: grid;
  place-items: center;
  cursor: grab;
  transition:
    transform 0.12s ease,
    filter 0.12s ease;
  touch-action: auto;
}
.px-board-token.enemy {
  background: linear-gradient(135deg, #5d342d, #281c20);
  border-color: #d66d56;
  color: #f7ae91;
}
.px-board-token:hover {
  transform: scale(1.12);
  filter: brightness(1.22);
  z-index: 1;
}
.px-unit-rank {
  width: 92%;
  height: 92%;
  max-width: 40px;
  max-height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.px-board-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0;
  color: #b4b3a7;
  font:
    9px/1.6 Consolas,
    monospace;
}
.px-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-radius: 2px;
  background: #82c5bb;
}
.px-dot.foe {
  background: #de8a6c;
}
.px-board-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.px-board-toolbar span {
  color: #aaa793;
  font:
    10px Consolas,
    monospace;
}
.px-board-insert {
  display: grid;
  gap: 14px;
}
.px-board-field {
  display: grid;
  gap: 7px;
}
.px-board-field > label,
.px-board-inspector label {
  display: grid;
  gap: 6px;
  color: hsl(calc(var(--th-h) + -1.4) calc(57.9% * var(--th-s)) calc(66.5% + var(--th-l)));
  font:
    700 10px Consolas,
    monospace;
  letter-spacing: 0.4px;
}
.px-board-field select {
  width: 100%;
}
.px-board-help {
  color: #9fa89f;
  font-size: 11px;
  line-height: 1.6;
  margin: 6px 0;
}
.px-board-aside-title {
  font-size: 11px;
  border-top: 1px solid hsl(calc(var(--th-h) + 3) calc(15.6% * var(--th-s)) calc(25.1% + var(--th-l)));
  padding-top: 13px;
}
.px-board-inspector {
  display: grid;
  gap: 10px;
}
.px-board-inspector-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.px-board-inspector-heading strong {
  display: block;
  overflow-wrap: anywhere;
  font:
    700 12px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + 0) calc(76.9% * var(--th-s)) calc(79.6% + var(--th-l)));
}
.px-board-inspector-heading small {
  font:
    9px Consolas,
    monospace;
  color: #aaad9b;
}
.px-rank-mini {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  color: #9dd8d3;
  border: 1px solid #477e76;
  background: hsl(calc(var(--th-bh) + -12.5) calc(30% * var(--th-bs)) 15.7%);
}
.px-rank-mini.enemy {
  color: #efab90;
  border-color: #915344;
  background: #39231f;
}
.px-rank-mini svg {
  width: 27px;
  height: 27px;
}
.px-board-statrow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.px-board-statrow input {
  width: 100%;
  font-size: 13px;
  padding: 7px;
}
.px-board-movepanel {
  display: flex;
  justify-content: center;
  gap: 7px;
}
.px-board-unit-list {
  display: grid;
  gap: 5px;
  max-height: 260px;
  overflow: auto;
}
.px-board-roster-row {
  width: 100%;
  background: hsl(calc(var(--th-bh) + -5) calc(11.1% * var(--th-bs)) 10.6%);
  border: 1px solid #354038;
  color: #d9ded3;
  padding: 7px;
  display: flex;
  gap: 8px;
  align-items: center;
  text-align: left;
}
.px-board-roster-row.active {
  border-color: hsl(calc(var(--th-h) + -3.6) calc(60.7% * var(--th-s)) calc(55.1% + var(--th-l)));
  background: hsl(calc(var(--th-h) + -7.9) calc(25.9% * var(--th-s)) calc(15.9% + var(--th-l)));
}
.px-board-roster-row b {
  display: block;
  font:
    700 11px Consolas,
    monospace;
  overflow-wrap: anywhere;
}
.px-board-roster-row small {
  display: block;
  font:
    9px Consolas,
    monospace;
  color: #a9aa97;
  margin-top: 4px;
}
.px-board-roster-row > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.px-hp-value {
  color: #a8d0a7;
  font:
    700 10px Consolas,
    monospace;
  white-space: nowrap;
}
.px-danger-text {
  color: #e9a08a !important;
}
@media (max-width: 1100px) {
  .px-board-layout {
    grid-template-columns: 1fr;
  }
  .px-board-sidebar {
    border-left: 0;
    border-top: 1px solid hsl(calc(var(--th-h) + 6) calc(16.1% * var(--th-s)) calc(24.3% + var(--th-l)));
  }
  .px-board-grid {
    --px-cell: 39px;
  }
}
@media (max-width: 650px) {
  .px-board-grid {
    --px-cell: 36px;
  }
  .px-board-title {
    flex-wrap: wrap;
  }
  .px-board-live {
    margin-left: 0;
  }
  .px-board-layout > div:first-child,
  .px-board-sidebar {
    padding: 10px;
  }
  .px-board-legend {
    font-size: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .recruit-emblem .px-species-sigil,
  .px-board-token {
    transition: none !important;
    transform: none !important;
  }
}

.pxu-shell {
  --pxu-bg: hsl(calc(var(--th-bh) + -5) calc(13.5% * var(--th-bs)) 7.3%);
  --pxu-edge: #454a43;
  --pxu-gold: hsl(calc(var(--th-h) + -0.7) calc(55.6% * var(--th-s)) calc(59.4% + var(--th-l)));
  --pxu-txt: #e5e7dc;
  --pxu-dim: #9a9f97;
  color: var(--pxu-txt);
  border: 1px solid hsl(calc(var(--th-h) + 6.1) calc(17.6% * var(--th-s)) calc(30% + var(--th-l)));
  background: hsl(calc(var(--th-bh) + 7) calc(16.1% * var(--th-bs)) 6.1%);
  box-shadow:
    inset 0 0 70px hsl(calc(var(--th-h) + 0.8) calc(77% * var(--th-s)) calc(41% + var(--th-l)) / 0.1),
    0 20px 50px #0006;
  font-family: Consolas, monospace;
}
.pxu-top {
  min-height: 41px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 17px;
  border-bottom: 1px solid hsl(calc(var(--th-h) + 2) calc(22.4% * var(--th-s)) calc(32.4% + var(--th-l)));
  background: linear-gradient(180deg, #2b302b, hsl(calc(var(--th-bh) + -5) calc(14.9% * var(--th-bs)) 9.2%));
  font:
    700 10px Consolas,
    monospace;
  letter-spacing: 1px;
  color: #c1c6b7;
}
.pxu-top strong {
  color: hsl(calc(var(--th-h) + 1) calc(59.7% * var(--th-s)) calc(71.8% + var(--th-l)));
}
.pxu-signal {
  color: #91bd8a;
}
.pxu-two {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(0, 1.07fr);
  gap: 0;
}
.pxu-stash,
.pxu-kit {
  min-width: 0;
  padding: 15px;
  background: radial-gradient(ellipse at 50% 2%, #25282055, transparent 50%),
    hsl(calc(var(--th-bh) + 5) calc(17.6% * var(--th-bs)) 6.7%);
}
.pxu-stash {
  border-right: 1px solid #514f43;
}
.pxu-kit {
  background: radial-gradient(
      ellipse at 48% 25%,
      hsl(calc(var(--th-h) + 12.6) calc(25.3% * var(--th-s)) calc(19.4% + var(--th-l)) / 0.2),
      transparent 48%
    ),
    hsl(calc(var(--th-bh) + 15) calc(18.8% * var(--th-bs)) 6.3%);
}
.pxu-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid hsl(calc(var(--th-h) + 3) calc(14.3% * var(--th-s)) calc(27.5% + var(--th-l)));
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.pxu-overline {
  font:
    700 9px Consolas,
    monospace;
  letter-spacing: 1.65px;
  color: #8b987f;
}
.pxu-panel-heading h3 {
  font:
    800 19px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + 1.2) calc(53.7% * var(--th-s)) calc(76.3% + var(--th-l)));
  letter-spacing: 1.2px;
  margin: 5px 0 0;
}
.pxu-panel-heading h3 small {
  font:
    700 10px Consolas,
    monospace;
  color: #a3ae9d;
  margin-left: 5px;
}
.pxu-count {
  padding: 5px 7px;
  border: 1px solid #454b43;
  background: hsl(calc(var(--th-bh) + -13.6) calc(11.1% * var(--th-bs)) 12.4%);
  color: hsl(calc(var(--th-h) + 11.3) calc(16.8% * var(--th-s)) calc(62.7% + var(--th-l)));
  font:
    700 9px Consolas,
    monospace;
  white-space: nowrap;
}
.pxu-stash-tools {
  display: grid;
  gap: 9px;
  margin-bottom: 10px;
}
.pxu-filters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.pxu-filters button {
  font:
    700 9px Consolas,
    monospace;
  padding: 7px 8px;
  border: 1px solid #475047;
  background: hsl(calc(var(--th-bh) + -22.1) calc(12.3% * var(--th-bs)) 11.2%);
  color: #a9b3a8;
  cursor: pointer;
}
.pxu-filters button:hover {
  color: hsl(calc(var(--th-h) + 0.7) calc(89.8% * var(--th-s)) calc(80.8% + var(--th-l)));
  border-color: hsl(calc(var(--th-h) + -1.5) calc(32.4% * var(--th-s)) calc(41.8% + var(--th-l)));
}
.pxu-filters button.active {
  background: hsl(calc(var(--th-h) + -2.4) calc(49.6% * var(--th-s)) calc(51% + var(--th-l)));
  color: #141712;
  border-color: hsl(calc(var(--th-h) + -1.1) calc(82.7% * var(--th-s)) calc(68.2% + var(--th-l)));
}
.pxu-stash-tools input,
.pxu-supply input {
  background: hsl(calc(var(--th-bh) + 12.1) calc(24.1% * var(--th-bs)) 5.7%);
  border: 1px solid #3f4844;
  font:
    11px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + 8.1) calc(28.9% * var(--th-s)) calc(82.4% + var(--th-l)));
  min-height: 33px;
  padding: 8px;
}
#pxu-stash-grid-wrap {
  position: relative;
}
.pxu-stash-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 67px;
  grid-auto-flow: row dense;
  gap: 3px;
  padding: 5px;
  max-height: 502px;
  min-height: 340px;
  overflow-y: auto;
  align-content: start;
  background: repeating-linear-gradient(
    135deg,
    hsl(calc(var(--th-bh) + -5) calc(10.6% * var(--th-bs)) 9.2%) 0 9px,
    hsl(calc(var(--th-bh) + 5) calc(14.3% * var(--th-bs)) 8.2%) 9px 18px
  );
  border: 1px solid #464c46;
  scrollbar-width: thin;
  scrollbar-color: hsl(calc(var(--th-h) + -1.8) calc(26.9% * var(--th-s)) calc(36.5% + var(--th-l))) #1c211e;
}
.pxu-empty-cell {
  border: 1px solid #373d3a;
  background: linear-gradient(
    135deg,
    hsl(calc(var(--th-bh) + -5) calc(8.5% * var(--th-bs)) 11.6% / 0.9),
    hsl(calc(var(--th-bh) + 5) calc(14.3% * var(--th-bs)) 8.2% / 0.9)
  );
}
.pxu-item {
  position: relative;
  z-index: 1;
  grid-column: span 2;
  min-width: 0;
  grid-row: span 2;
  padding: 7px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  border: 1px solid #626858;
  background: repeating-linear-gradient(
    132deg,
    hsl(calc(var(--th-bh) + -17) calc(13.9% * var(--th-bs)) 14.1%) 0 8px,
    hsl(calc(var(--th-bh) + -18.3) calc(15.3% * var(--th-bs)) 11.6%) 8px 16px
  );
  color: hsl(calc(var(--th-h) + 7.9) calc(17.9% * var(--th-s)) calc(81.4% + var(--th-l)));
  cursor: grab;
  overflow: hidden;
  transition:
    filter 0.16s,
    border-color 0.16s,
    box-shadow 0.16s;
}
.pxu-item:hover {
  border-color: hsl(calc(var(--th-h) + -1.4) calc(65.4% * var(--th-s)) calc(63.7% + var(--th-l)));
  box-shadow: inset 0 0 0 1px
    hsl(calc(var(--th-h) + -3.2) calc(50.2% * var(--th-s)) calc(53.5% + var(--th-l)));
  z-index: 4;
}
.pxu-item.selected {
  border-color: hsl(calc(var(--th-h) + -0.5) calc(68.2% * var(--th-s)) calc(65.5% + var(--th-l)));
  box-shadow:
    inset 0 0 0 1px hsl(calc(var(--th-h) + -1.4) calc(69.9% * var(--th-s)) calc(62.2% + var(--th-l))),
    0 0 13px hsl(calc(var(--th-h) + 5) calc(50.8% * var(--th-s)) calc(46.3% + var(--th-l)) / 0.3);
  background: #2e3026;
}
.pxu-item.wide {
  grid-column: span 3;
  grid-row: span 2;
}
.pxu-item.medium {
  grid-column: span 2;
  grid-row: span 1;
}
.pxu-item-kind {
  color: #acb29a;
  letter-spacing: 0.7px;
  font:
    700 8px Consolas,
    monospace;
  text-transform: uppercase;
}
.pxu-item-graphic {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 20px;
  color: #a9b99f;
  opacity: 0.8;
}
.pxu-item-graphic svg {
  max-width: 95%;
  max-height: 78px;
  width: 75px;
  height: 74px;
  filter: drop-shadow(0 4px 6px #0009);
}
.pxu-item.medium .pxu-item-graphic svg {
  height: 33px;
}
.pxu-item-name {
  font:
    700 9px/1.15 Consolas,
    monospace;
  color: #e4e9d9;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pxu-item-qty {
  position: absolute;
  right: 4px;
  top: 4px;
  border: 1px solid hsl(calc(var(--th-h) + -2.8) calc(31.1% * var(--th-s)) calc(40.4% + var(--th-l)));
  background: #171c19e9;
  color: hsl(calc(var(--th-h) + -0.3) calc(79.2% * var(--th-s)) calc(71.8% + var(--th-l)));
  padding: 2px 4px;
  font:
    800 10px Consolas,
    monospace;
}
.pxu-empty-note {
  position: absolute;
  top: 50%;
  left: 5%;
  width: 90%;
  text-align: center;
  color: #a9b19c;
  font:
    700 10px Consolas,
    monospace;
  pointer-events: none;
}
.pxu-inspector {
  border: 1px solid #515647;
  background: hsl(calc(var(--th-bh) + -5) calc(11.5% * var(--th-bs)) 10.2%);
  padding: 11px;
  margin-top: 11px;
}
.pxu-inner-head {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #3b453e;
  padding-bottom: 9px;
  color: hsl(calc(var(--th-h) + -0.1) calc(66.5% * var(--th-s)) calc(67.3% + var(--th-l)));
  font:
    800 10px Consolas,
    monospace;
  letter-spacing: 1px;
}
.pxu-inner-head span {
  color: #a2ac9e;
}
.pxu-idle {
  padding: 20px 6px;
  color: #8f9d92;
  font:
    11px/1.6 Consolas,
    monospace;
  text-align: center;
}
.pxu-inspected {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
}
.pxu-inspected-icon {
  flex: 0 0 66px;
  height: 62px;
  display: grid;
  place-items: center;
  color: #b3bda9;
  background: hsl(calc(var(--th-bh) + -27.5) calc(10% * var(--th-bs)) 15.7%);
  border: 1px solid #526058;
}
.pxu-inspected-icon svg {
  height: 56px;
  width: 64px;
}
.pxu-inspected b {
  font-size: 12px;
  color: hsl(calc(var(--th-h) + 2.3) calc(35.5% * var(--th-s)) calc(81.8% + var(--th-l)));
  overflow-wrap: anywhere;
}
.pxu-inspected small {
  display: block;
  font:
    10px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + 3.8) calc(33.9% * var(--th-s)) calc(56.7% + var(--th-l)));
  margin-top: 5px;
}
.pxu-inspected p {
  color: #afb5a6;
  margin: 6px 0 0;
  font:
    10px/1.5 Consolas,
    monospace;
  max-height: 65px;
  overflow: auto;
}
.pxu-actions {
  display: flex;
  gap: 6px;
  margin-bottom: 9px;
}
.pxu-actions button,
.pxu-deploy button,
.pxu-target button {
  background: #252d27;
  color: hsl(calc(var(--th-h) + -2.3) calc(76.3% * var(--th-s)) calc(76.9% + var(--th-l)));
  border: 1px solid hsl(calc(var(--th-h) + -2.6) calc(31.9% * var(--th-s)) calc(35.7% + var(--th-l)));
  padding: 8px 11px;
  font:
    800 10px Consolas,
    monospace;
  cursor: pointer;
}
.pxu-actions button:hover,
.pxu-deploy button:hover,
.pxu-target button:hover {
  background: hsl(calc(var(--th-h) + -2.3) calc(37.8% * var(--th-s)) calc(23.3% + var(--th-l)));
}
.pxu-deploy {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
}
.pxu-deploy select {
  min-width: 0;
  font-size: 10px;
  padding: 7px;
}
.pxu-deploy button.gold {
  background: hsl(calc(var(--th-h) + -4) calc(49.5% * var(--th-s)) calc(41.2% + var(--th-l)));
  color: #141812;
  border-color: hsl(calc(var(--th-h) + -1.8) calc(63% * var(--th-s)) calc(57.6% + var(--th-l)));
}
.pxu-advice {
  font:
    10px/1.5 Consolas,
    monospace;
  color: #a3ab9b;
}
.pxu-supply,
.pxu-finance {
  margin-top: 11px;
  border: 1px solid #515345;
  background: hsl(calc(var(--th-bh) + -5) calc(10.6% * var(--th-bs)) 9.2%);
}
.pxu-supply summary,
.pxu-finance summary {
  list-style: none;
  cursor: pointer;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
  color: hsl(calc(var(--th-h) + 0) calc(66.7% * var(--th-s)) calc(64.7% + var(--th-l)));
  font:
    800 11px Consolas,
    monospace;
  letter-spacing: 0.4px;
}
.pxu-supply summary::-webkit-details-marker,
.pxu-finance summary::-webkit-details-marker {
  display: none;
}
.pxu-supply summary:before,
.pxu-finance summary:before {
  content: '▸';
  color: hsl(calc(var(--th-h) + 0.6) calc(49.4% * var(--th-s)) calc(53.5% + var(--th-l)));
}
.pxu-supply[open] summary:before,
.pxu-finance[open] summary:before {
  content: '▾';
}
.pxu-supply summary span,
.pxu-finance summary span {
  color: #a4afa0;
  font-size: 9px;
}
.pxu-supply-body,
.pxu-finance-body {
  padding: 12px;
  border-top: 1px solid #43493f;
  display: grid;
  gap: 10px;
}
.pxu-acquire-list {
  max-height: 210px;
  overflow: auto;
  display: grid;
  gap: 3px;
}
.pxu-acquire-list button {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  background: hsl(calc(var(--th-bh) + -27.5) calc(11.8% * var(--th-bs)) 13.3%);
  border: 1px solid #3d4a41;
  padding: 8px;
  text-align: left;
  color: #dde2d2;
  font:
    10px Consolas,
    monospace;
}
.pxu-acquire-list button:hover {
  border-color: hsl(calc(var(--th-h) + -2.6) calc(58.3% * var(--th-s)) calc(57.6% + var(--th-l)));
  background: #343329;
}
.pxu-acquire-list button b {
  font:
    700 10px Consolas,
    monospace;
  overflow-wrap: anywhere;
}
.pxu-acquire-list button span {
  white-space: nowrap;
  color: hsl(calc(var(--th-h) + 1) calc(33.6% * var(--th-s)) calc(57.5% + var(--th-l)));
  font-size: 9px;
}
.pxu-acquire-list button strong {
  font-size: 14px;
}
.pxu-supply-body small {
  font:
    10px/1.4 Consolas,
    monospace;
  color: #9ca598;
}
.pxu-wallet {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}
.pxu-wallet strong {
  display: block;
  color: hsl(calc(var(--th-h) + -0.5) calc(69.5% * var(--th-s)) calc(62.7% + var(--th-l)));
  font:
    800 20px Consolas,
    monospace;
}
.pxu-wallet small {
  color: #a3a796;
}
.pxu-credit-fields {
  display: grid;
  gap: 8px;
}
.pxu-ledger {
  max-height: 170px;
  overflow: auto;
}
.pxu-ledger > div {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  gap: 10px;
  font:
    10px Consolas,
    monospace;
  border-bottom: 1px solid #354038;
}
.pxu-ledger b {
  color: #b3d5b9;
}
.pxu-ledger b.negative {
  color: #efb098;
}
.pxu-kit {
  position: relative;
}
.pxu-body-grid {
  display: grid;
  position: relative;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(102px, auto));
  gap: 6px;
  isolation: isolate;
}
.pxu-figure {
  position: absolute;
  z-index: -1;
  inset: 15px 10% 0;
  display: grid;
  place-items: center;
  opacity: 0.27;
  pointer-events: none;
}
.pxu-figure svg {
  height: 100%;
  max-height: 450px;
  width: 80%;
  filter: drop-shadow(
    0 0 24px hsl(calc(var(--th-h) + 4.4) calc(44.5% * var(--th-s)) calc(37.5% + var(--th-l)) / 0.3)
  );
}
.pxu-slot {
  position: relative;
  min-width: 0;
  border: 1px solid #505b54;
  background: repeating-linear-gradient(
    135deg,
    hsl(calc(var(--th-bh) + -5) calc(13.6% * var(--th-bs)) 8.6% / 0.9) 0 6px,
    hsl(calc(var(--th-bh) + -5) calc(14.3% * var(--th-bs)) 11% / 0.9) 6px 11px
  );
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  color: hsl(calc(var(--th-h) + 11.5) calc(20% * var(--th-s)) calc(83.3% + var(--th-l)));
  text-align: left;
  cursor: pointer;
  transition:
    filter 0.16s,
    border-color 0.16s,
    transform 0.15s,
    box-shadow 0.16s;
}
.pxu-slot:hover,
.pxu-slot:focus-visible {
  border-color: hsl(calc(var(--th-h) + -0.5) calc(52.6% * var(--th-s)) calc(55.3% + var(--th-l)));
  background: #2b3028;
  z-index: 4;
  transform: translateY(-2px);
  box-shadow: 0 9px 23px #000a;
}
.pxu-slot.active {
  border-color: hsl(calc(var(--th-h) + 0.5) calc(76.3% * var(--th-s)) calc(70.2% + var(--th-l)));
  box-shadow: inset 0 0 0 1px hsl(calc(var(--th-h) + 0) calc(58.3% * var(--th-s)) calc(59.6% + var(--th-l)));
  background: #292d25;
}
.pxu-slot.loaded .pxu-slot-art {
  opacity: 0.89;
}
.pxu-slot-title {
  background: linear-gradient(#3b413a, #242b26);
  border-bottom: 1px solid #495248;
  padding: 5px 7px;
  min-height: 24px;
  color: #d5d6cb;
  font:
    800 10px Consolas,
    monospace;
  letter-spacing: 0.3px;
  display: flex;
  justify-content: space-between;
}
.pxu-slot-arrow {
  color: hsl(calc(var(--th-h) + 2.7) calc(56% * var(--th-s)) calc(59% + var(--th-l)));
}
.pxu-slot-art {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 32px;
  opacity: 0.24;
  color: #c7d4bd;
}
.pxu-slot-art svg {
  width: min(90%, 99px);
  height: 60px;
  filter: drop-shadow(0 2px 4px #0008);
}
.pxu-slot-name {
  font:
    800 10px/1.2 Consolas,
    monospace;
  overflow-wrap: anywhere;
  padding: 6px 7px;
  color: #c9cfba;
}
.pxu-slot.loaded .pxu-slot-name {
  color: hsl(calc(var(--th-h) + -0.5) calc(82.3% * var(--th-s)) calc(77.8% + var(--th-l)));
}
.pxu-slot-mini {
  font-size: 8px;
  color: #9da895;
  padding: 0 7px 6px;
}
.pxu-slot[data-tip]:hover:after,
.pxu-slot[data-tip]:focus-visible:after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 10;
  min-width: 180px;
  max-width: 270px;
  padding: 9px;
  white-space: normal;
  background: hsl(calc(var(--th-bh) + 3.6) calc(28% * var(--th-bs)) 4.9%);
  border: 1px solid hsl(calc(var(--th-h) + 0.8) calc(46.6% * var(--th-s)) calc(53.7% + var(--th-l)));
  color: hsl(calc(var(--th-h) + 0.3) calc(47.7% * var(--th-s)) calc(78.2% + var(--th-l)));
  box-shadow: 0 12px 24px #000c;
  font:
    10px/1.5 Consolas,
    monospace;
  pointer-events: none;
}
.pxu-slot.ear {
  grid-column: 1;
  grid-row: 1;
}
.pxu-slot.head {
  grid-column: 2;
  grid-row: 1;
}
.pxu-slot.face {
  grid-column: 3;
  grid-row: 1;
}
.pxu-slot.eyes {
  grid-column: 4;
  grid-row: 1;
}
.pxu-slot.arms {
  grid-column: 1;
  grid-row: 2;
}
.pxu-slot.chest {
  grid-column: 2 / span 2;
  grid-row: 2;
}
.pxu-slot.legs {
  grid-column: 4;
  grid-row: 2;
}
.pxu-slot.shield {
  grid-column: 2 / span 2;
  grid-row: 3;
}
.pxu-equip-rule {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid hsl(calc(var(--th-h) + 3) calc(17.2% * var(--th-s)) calc(28.4% + var(--th-l)));
  font:
    800 11px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + 0.3) calc(64% * var(--th-s)) calc(65.1% + var(--th-l)));
  padding: 15px 0 7px;
  letter-spacing: 0.6px;
}
.pxu-equip-rule small {
  font-size: 9px;
  color: #959e91;
}
.pxu-weapons {
  display: grid;
  grid-template-columns: 1.45fr 0.85fr;
  gap: 6px;
  margin-top: 8px;
}
.pxu-weapons .pxu-slot {
  min-height: 98px;
}
.pxu-weapons .pxu-slot-art {
  min-height: 25px;
}
.pxu-weapons .pxu-slot-art svg {
  height: 45px;
  width: 98px;
}
.pxu-utility-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 8px;
}
.pxu-utility-grid .pxu-slot {
  min-height: 85px;
}
.pxu-utility-grid .pxu-slot-art svg {
  height: 44px;
}
.pxu-rig .pxu-slot {
  height: 100%;
}
.pxu-pockets {
  border: 1px solid #414941;
  padding: 4px;
}
.pxu-mini-head {
  font:
    700 9px Consolas,
    monospace;
  color: #b3c0b2;
  margin-bottom: 5px;
}
.pxu-pocket-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
}
.pxu-pocket-grid .pxu-slot {
  min-height: 79px;
}
.pxu-pocket-grid .pxu-slot-title {
  font-size: 8px;
  padding: 4px;
  min-height: 18px;
}
.pxu-pocket-grid .pxu-slot-art svg {
  height: 28px;
}
.pxu-pocket-grid .pxu-slot-name {
  font-size: 8px;
  padding: 3px;
}
.pxu-pocket-grid .pxu-slot-arrow {
  display: none;
}
.pxu-target {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 9px;
  padding: 11px;
  border: 1px solid hsl(calc(var(--th-h) + 4.3) calc(28.7% * var(--th-s)) calc(30.8% + var(--th-l)));
  background: #29291d;
  margin-top: 13px;
}
.pxu-target strong {
  color: hsl(calc(var(--th-h) + 0.1) calc(82.3% * var(--th-s)) calc(71.2% + var(--th-l)));
  font:
    800 12px Consolas,
    monospace;
  display: block;
  margin: 4px 0;
}
.pxu-target small {
  color: #afb5a2;
  font:
    10px/1.5 Consolas,
    monospace;
  display: block;
  max-width: 400px;
}
.pxu-noitem {
  color: #898c7f;
  font:
    700 10px Consolas,
    monospace;
}
.pxu-readouts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 11px;
}
.pxu-readouts span {
  border: 1px solid #484b3c;
  background: #191e1b;
  text-align: center;
  padding: 10px 4px;
  font:
    800 9px Consolas,
    monospace;
  color: #a9b2a5;
}
.pxu-readouts b {
  display: block;
  color: hsl(calc(var(--th-h) + 0.8) calc(74.3% * var(--th-s)) calc(71% + var(--th-l)));
  font-size: 22px;
  margin-top: 6px;
}
.pxu-shield-opts {
  border-top: 1px solid #414b44;
  margin-top: 12px;
  padding-top: 12px;
}
.pxu-workbench {
  margin-top: 14px;
}
.pxu-footnote {
  font:
    10px/1.5 Consolas,
    monospace;
  color: #9eac9d;
  padding: 13px;
  border-left: 2px solid hsl(calc(var(--th-h) + -2.1) calc(53.4% * var(--th-s)) calc(53.7% + var(--th-l)));
  background: hsl(calc(var(--th-bh) + -25) calc(13% * var(--th-bs)) 9%);
  margin-top: 13px;
}
.pxu-slot.pxu-drop-on,
.pxu-stash-grid.pxu-drop-on {
  outline: 2px dashed hsl(calc(var(--th-h) + -2.2) calc(69.3% * var(--th-s)) calc(65.5% + var(--th-l)));
  outline-offset: -3px;
  background: hsl(calc(var(--th-h) + 6.9) calc(36.6% * var(--th-s)) calc(19.8% + var(--th-l))) !important;
}
.pxu-item:active {
  cursor: grabbing;
}
.pxu-cargo-panel {
  margin-top: 10px;
  border: 1px solid hsl(calc(var(--th-h) + 7) calc(19.7% * var(--th-s)) calc(29.8% + var(--th-l)));
  background: linear-gradient(160deg, #141916, hsl(calc(var(--th-bh) + -35) calc(11.1% * var(--th-bs)) 7.1%));
  padding: 10px;
  display: grid;
  gap: 8px;
}
.pxu-cargo-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  font:
    800 11px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + 1.1) calc(69.9% * var(--th-s)) calc(66.1% + var(--th-l)));
}
.pxu-cargo-head span {
  color: #adb5a2;
  font-size: 10px;
}
.pxu-cargo-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid #363a31;
}
.pxu-cargo-row:first-of-type {
  border-top: 0;
}
.pxu-cargo-row b {
  color: hsl(calc(var(--th-h) + 3) calc(36.6% * var(--th-s)) calc(92% + var(--th-l)));
  font:
    700 11px Consolas,
    monospace;
}
.pxu-cargo-row span {
  color: hsl(calc(var(--th-h) + 3.4) calc(50.6% * var(--th-s)) calc(65.9% + var(--th-l)));
  font:
    800 11px Consolas,
    monospace;
}
.pxu-cargo-actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.pxu-cargo-actions button {
  padding: 6px 8px;
  border: 1px solid hsl(calc(var(--th-h) + 0) calc(28.9% * var(--th-s)) calc(29.8% + var(--th-l)));
  background: #23251d;
  color: hsl(calc(var(--th-h) + 1.8) calc(72.2% * var(--th-s)) calc(70.4% + var(--th-l)));
  font:
    700 10px Consolas,
    monospace;
}
.pxu-cargo-actions button:hover {
  background: hsl(calc(var(--th-h) + 5) calc(24.5% * var(--th-s)) calc(19.2% + var(--th-l)));
}
.pxu-cargo-idle,
.pxu-cargo-foot {
  color: #aeb4a8;
  font:
    10px/1.5 Consolas,
    monospace;
}
.pxu-cargo-foot {
  padding-top: 3px;
  border-top: 1px solid #32372f;
}
@media (max-width: 660px) {
  .pxu-cargo-row {
    grid-template-columns: 1fr;
  }
  .pxu-cargo-actions {
    justify-content: flex-start;
  }
}
@media (max-width: 1280px) {
  .pxu-two {
    grid-template-columns: 1fr;
  }
  .pxu-stash {
    border-right: 0;
    border-bottom: 1px solid hsl(calc(var(--th-h) + -5) calc(24.8% * var(--th-s)) calc(30.8% + var(--th-l)));
  }
  .pxu-stash-grid {
    max-height: 360px;
  }
  .pxu-body-grid {
    grid-template-rows: repeat(3, minmax(90px, auto));
  }
}
@media (max-width: 660px) {
  .pxu-stash,
  .pxu-kit {
    padding: 9px;
  }
  .pxu-stash-grid {
    grid-auto-rows: 48px;
    min-height: 265px;
  }
  .pxu-item {
    grid-row: span 2;
  }
  .pxu-item.medium {
    grid-row: span 2;
  }
  .pxu-item-name {
    font-size: 8px;
  }
  .pxu-item-kind {
    font-size: 7px;
  }
  .pxu-item-graphic svg {
    height: 44px;
  }
  .pxu-panel-heading h3 {
    font-size: 16px;
  }
  .pxu-body-grid {
    grid-template-rows: repeat(3, minmax(84px, auto));
    gap: 4px;
  }
  .pxu-slot-title {
    font-size: 8px;
    padding: 5px 3px;
  }
  .pxu-slot-name {
    font-size: 8px;
    padding: 4px;
  }
  .pxu-slot-art svg {
    height: 43px;
  }
  .pxu-readouts span {
    font-size: 8px;
  }
  .pxu-readouts b {
    font-size: 17px;
  }
  .pxu-top {
    font-size: 9px;
  }
  .pxu-pocket-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pxu-deploy {
    grid-template-columns: 1fr;
  }
  .pxu-inspected-icon {
    flex-basis: 55px;
    width: 55px;
  }
  .pxu-figure {
    opacity: 0.17;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pxu-slot,
  .pxu-item {
    transition: none !important;
    transform: none !important;
  }
}

.px-combat-intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  margin: 12px 0 16px;
  border: 1px solid hsl(calc(var(--th-h) + -4) calc(25.5% * var(--th-s)) calc(31.6% + var(--th-l)));
  background: linear-gradient(
    110deg,
    #24271d,
    hsl(calc(var(--th-bh) + 5.9) calc(24.4% * var(--th-bs)) 8.8%) 75%
  );
}
.px-combat-intro span {
  font:
    800 10px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + -1.2) calc(60.4% * var(--th-s)) calc(60.4% + var(--th-l)));
  letter-spacing: 1.5px;
}
.px-combat-intro h3 {
  font:
    800 22px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + -0.4) calc(83.7% * var(--th-s)) calc(73.5% + var(--th-l)));
  margin: 8px 0 5px;
}
.px-combat-intro h3 small {
  font-size: 11px;
  color: #aeb5a2;
}
.px-combat-intro p {
  font-size: 12px;
  color: #aab8ad;
  line-height: 1.6;
  max-width: 660px;
  margin: 0;
}
.px-combat-map-link {
  border: 1px solid hsl(calc(var(--th-h) + -2.1) calc(62.5% * var(--th-s)) calc(56.1% + var(--th-l)));
  background: hsl(calc(var(--th-h) + -3.8) calc(57.3% * var(--th-s)) calc(29.4% + var(--th-l)));
  color: hsl(calc(var(--th-h) + 3.5) calc(100% * var(--th-s)) calc(84.7% + var(--th-l)));
  font:
    800 12px Consolas,
    monospace;
  padding: 13px 17px;
  white-space: nowrap;
  transition:
    transform 0.18s,
    box-shadow 0.18s;
}
.px-combat-map-link:hover {
  box-shadow: 0 0 20px hsl(calc(var(--th-h) + -3.7) calc(66.9% * var(--th-s)) calc(50.2% + var(--th-l)) / 0.2);
  transform: translateY(-2px);
}
.px-combat-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}
.px-combat-steps span {
  padding: 12px;
  border: 1px solid #424c44;
  background: hsl(calc(var(--th-bh) + -5) calc(14.9% * var(--th-bs)) 9.2%);
  font:
    800 11px Consolas,
    monospace;
  color: #c5d2c7;
}
.px-combat-steps b {
  color: hsl(calc(var(--th-h) + -1.6) calc(81.9% * var(--th-s)) calc(65.3% + var(--th-l)));
  margin-right: 9px;
}
.px-combat-deep {
  border: 1px solid #424a40;
  margin-top: 22px;
  padding: 8px 14px;
  background: hsl(calc(var(--th-bh) + 3.6) calc(15.6% * var(--th-bs)) 8.8%);
}
.px-combat-deep > summary {
  cursor: pointer;
  font:
    800 12px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + -0.5) calc(71.3% * var(--th-s)) calc(65.9% + var(--th-l)));
  padding: 9px 0;
}
.px-arena-control {
  margin: 15px 0;
  border: 1px solid hsl(calc(var(--th-h) + -5) calc(34.1% * var(--th-s)) calc(34.5% + var(--th-l)));
  background: linear-gradient(
    120deg,
    hsl(calc(var(--th-bh) + 1) calc(22.7% * var(--th-bs)) 8.6%),
    hsl(calc(var(--th-bh) + 21.7) calc(27.3% * var(--th-bs)) 6.5%)
  );
  box-shadow: 0 14px 35px #0004;
  color: hsl(calc(var(--th-h) + 11) calc(24.6% * var(--th-s)) calc(88% + var(--th-l)));
}
.px-arena-bar {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  padding: 16px 18px;
  background: linear-gradient(
    100deg,
    #24291f,
    hsl(calc(var(--th-bh) + 17.5) calc(16.7% * var(--th-bs)) 9.4%)
  );
  border-bottom: 1px solid hsl(calc(var(--th-h) + -5.9) calc(29.5% * var(--th-s)) calc(30.6% + var(--th-l)));
}
.px-arena-bar small {
  font:
    800 10px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + -0.5) calc(56.6% * var(--th-s)) calc(61.2% + var(--th-l)));
  letter-spacing: 1.5px;
}
.px-arena-bar h3 {
  font:
    900 22px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + 0.5) calc(76% * var(--th-s)) calc(75.5% + var(--th-l)));
  margin: 4px 0 5px;
}
.px-arena-bar span {
  font:
    800 11px Consolas,
    monospace;
  color: #9bc6b4;
}
.px-arena-command-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.px-arena-command-buttons button,
.px-arena-fieldrow button,
.px-arena-big-actions button,
.px-arena-support button {
  background: #2a2c24;
  border: 1px solid hsl(calc(var(--th-h) + -3.4) calc(38.1% * var(--th-s)) calc(38.6% + var(--th-l)));
  color: hsl(calc(var(--th-h) + -1.6) calc(60.7% * var(--th-s)) calc(79% + var(--th-l)));
  font:
    800 11px Consolas,
    monospace;
  padding: 10px 12px;
  cursor: pointer;
}
.px-arena-command-buttons button:first-child {
  background: hsl(calc(var(--th-h) + -5.6) calc(54.5% * var(--th-s)) calc(34.5% + var(--th-l)));
  color: hsl(calc(var(--th-h) + -0) calc(100% * var(--th-s)) calc(89.8% + var(--th-l)));
}
.px-arena-command-buttons button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.px-arena-command-buttons button:hover:not(:disabled),
.px-arena-big-actions button:hover:not(:disabled) {
  filter: brightness(1.2);
}
.px-arena-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px;
}
.px-arena-flow-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  background: hsl(calc(var(--th-bh) + 2.5) calc(14.8% * var(--th-bs)) 10.6%);
  border: 1px solid #3b4845;
  padding: 10px;
}
.px-arena-flow-item b {
  grid-row: span 2;
  display: grid;
  place-items: center;
  border: 1px solid hsl(calc(var(--th-h) + -4.6) calc(32.5% * var(--th-s)) calc(33.1% + var(--th-l)));
  width: 25px;
  height: 25px;
  font:
    800 13px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + -1) calc(73.4% * var(--th-s)) calc(69% + var(--th-l)));
}
.px-arena-flow-item span {
  font:
    800 11px Consolas,
    monospace;
  color: #d9ded1;
}
.px-arena-flow-item small {
  font-size: 10px;
  color: #91a69f;
}
.px-arena-workspace {
  display: grid;
  grid-template-columns: minmax(200px, 0.72fr) minmax(0, 1.55fr);
  gap: 10px;
  padding: 0 12px 12px;
}
.px-arena-actors,
.px-arena-action-panel {
  border: 1px solid #424c43;
  background: hsl(calc(var(--th-bh) + 11.4) calc(24.4% * var(--th-bs)) 8.8%);
  padding: 12px;
  min-width: 0;
}
.px-arena-section-title {
  font:
    800 11px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + -1.6) calc(70.3% * var(--th-s)) calc(61.8% + var(--th-l)));
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.px-arena-order {
  display: grid;
  gap: 5px;
  max-height: 340px;
  overflow: auto;
}
.px-arena-order-item {
  width: 100%;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 17px;
  align-items: center;
  text-align: left;
  gap: 9px;
  border: 1px solid #3b4b46;
  background: hsl(calc(var(--th-bh) + 0) calc(22.2% * var(--th-bs)) 10.6%);
  padding: 6px;
  color: hsl(calc(var(--th-h) + 10.7) calc(17.5% * var(--th-s)) calc(84.3% + var(--th-l)));
  cursor: pointer;
}
.px-arena-order-item.active {
  border-color: hsl(calc(var(--th-h) + -1.6) calc(59.4% * var(--th-s)) calc(59.4% + var(--th-l)));
  background: hsl(calc(var(--th-h) + -0.7) calc(28.4% * var(--th-s)) calc(15.9% + var(--th-l)));
}
.px-arena-order-item.down {
  opacity: 0.5;
}
.px-arena-order-icon {
  display: grid;
  place-items: center;
  color: #7bc2b1;
}
.px-arena-order-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.px-arena-order-icon.enemy {
  color: #e08d70;
}
.px-arena-order-item b {
  font:
    800 11px Consolas,
    monospace;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.px-arena-order-item small {
  font-size: 9px;
  color: #a9b7ae;
}
.px-arena-order-item strong {
  color: hsl(calc(var(--th-h) + 1.9) calc(84.9% * var(--th-s)) calc(71.4% + var(--th-l)));
}
.px-arena-combatants {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 9px;
  align-items: center;
  margin-bottom: 13px;
}
.px-arena-portrait {
  border: 1px solid #376e6c;
  background: radial-gradient(
    circle at 50% 35%,
    #1f626651,
    hsl(calc(var(--th-bh) + 11) calc(40.5% * var(--th-bs)) 7.3%)
  );
  display: grid;
  gap: 4px;
  justify-items: center;
  text-align: center;
  padding: 10px 5px;
  min-height: 105px;
}
.px-arena-portrait.enemy {
  border-color: #8e5849;
  background: radial-gradient(circle at 50% 35%, #742d2551, #170f12);
}
.px-arena-portrait > span svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: #8ce2db;
  stroke-width: 2.5;
}
.px-arena-portrait.enemy > span svg {
  stroke: #ee9c76;
}
.px-arena-portrait b {
  font:
    800 11px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + 11.3) calc(28.6% * var(--th-s)) calc(89% + var(--th-l)));
  overflow-wrap: anywhere;
}
.px-arena-portrait small {
  font:
    9px Consolas,
    monospace;
  color: #acc2bd;
}
.px-arena-versus {
  font:
    900 16px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + -3.2) calc(49.8% * var(--th-s)) calc(57.1% + var(--th-l)));
}
.px-arena-fieldrow,
.px-arena-rollrow,
.px-arena-support {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0;
  align-items: end;
}
.px-arena-fieldrow label,
.px-arena-rollrow label,
.px-arena-support label,
.px-arena-saving {
  display: grid;
  gap: 5px;
  font:
    800 10px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + 1.1) calc(36.9% * var(--th-s)) calc(63.3% + var(--th-l)));
  letter-spacing: 0.3px;
}
.px-arena-fieldrow button {
  height: 36px;
}
.px-arena-rollrow {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.px-arena-rollrow input,
.px-arena-fieldrow select,
.px-arena-support input,
.px-arena-support select {
  width: 100%;
  min-height: 35px;
  background: hsl(calc(var(--th-bh) + 11.4) calc(29.7% * var(--th-bs)) 7.3%);
  border: 1px solid #485b52;
  color: hsl(calc(var(--th-h) + 4.1) calc(52.4% * var(--th-s)) calc(91.8% + var(--th-l)));
}
.px-arena-readout {
  font:
    800 10px Consolas,
    monospace;
  color: #97c5bd;
  background: hsl(calc(var(--th-bh) + -1.2) calc(36.4% * var(--th-bs)) 8.6%);
  border-left: 2px solid #6ba69a;
  padding: 8px;
}
.px-arena-big-actions {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 8px;
  margin: 10px 0;
}
.px-arena-big-actions .px-arena-fire {
  background: hsl(calc(var(--th-h) + -10.1) calc(54.5% * var(--th-s)) calc(39.6% + var(--th-l)));
  border-color: hsl(calc(var(--th-h) + -1.3) calc(67.5% * var(--th-s)) calc(62.5% + var(--th-l)));
  color: hsl(calc(var(--th-h) + 1) calc(100% * var(--th-s)) calc(90.8% + var(--th-l)));
  font-size: 14px;
  padding: 13px;
}
.px-arena-big-actions button.selected {
  border-color: #8fe5d0;
  background: hsl(calc(var(--th-bh) + -16.8) calc(42.1% * var(--th-bs)) 23.7%);
}
.px-arena-support {
  grid-template-columns: 1fr auto auto;
}
.px-arena-support > button {
  white-space: nowrap;
}
.px-arena-disclaimer {
  font-size: 10px;
  line-height: 1.6;
  color: #8da59d;
  display: block;
  margin-top: 8px;
}
.px-arena-log {
  border-top: 1px solid #495044;
  padding: 13px;
}
.px-arena-logscroll {
  display: grid;
  gap: 4px;
  max-height: 155px;
  overflow: auto;
}
.px-arena-logentry {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 8px;
  background: hsl(calc(var(--th-bh) + 0.5) calc(23.4% * var(--th-bs)) 9.2%);
  border-left: 3px solid #6a8f84;
  padding: 7px 9px;
  font:
    10px/1.6 Consolas,
    monospace;
  color: #d2dcd3;
}
.px-arena-logentry.hit {
  border-color: #c86449;
}
.px-arena-logentry.heal {
  border-color: #65b98c;
}
.px-arena-logentry.start {
  border-color: hsl(calc(var(--th-h) + 0.5) calc(66% * var(--th-s)) calc(60.8% + var(--th-l)));
}
.px-arena-logentry small {
  color: #9aafab;
}
.px-arena-empty {
  font-size: 11px;
  color: #91a59e;
}
.px-arena-editor {
  border: 1px solid #474b39;
  margin: 14px 0;
  padding: 7px;
  background: hsl(calc(var(--th-bh) + -13.6) calc(14.3% * var(--th-bs)) 9.6%);
}
.px-arena-editor > summary {
  font:
    800 11px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + 0.2) calc(50.3% * var(--th-s)) calc(66.9% + var(--th-l)));
  padding: 9px;
  cursor: pointer;
}
.px-board-cell {
  overflow: visible !important;
}
.px-board-grid {
  --px-cell: clamp(57px, 5.5vw, 71px);
  row-gap: 4px;
  background: hsl(calc(var(--th-bh) + -5) calc(22.7% * var(--th-bs)) 8.6%);
}
.px-board-cell {
  min-width: 0;
  min-height: 0;
  border: 1px solid hsl(calc(var(--th-bh) + -18.3) calc(15% * var(--th-bs)) 23.5%) !important;
}
.px-board-cell.is-selected {
  box-shadow: inset 0 0 0 2px hsl(calc(var(--th-h) + -1) calc(85.6% * var(--th-s)) calc(70% + var(--th-l)));
}
.px-board-cell.px-arena-active {
  outline: 2px solid hsl(calc(var(--th-h) + -0.5) calc(83.1% * var(--th-s)) calc(65.3% + var(--th-l)));
  outline-offset: -2px;
}
.px-board-cell.px-arena-target {
  box-shadow: inset 0 0 0 2px #e67e61;
}
.px-board-cell.px-arena-down {
  filter: saturate(0.35);
  opacity: 0.7;
}
.px-board-token {
  width: 35px;
  height: 35px;
  margin-top: 7px;
  align-self: center;
  justify-self: center;
  border-radius: 50%;
  border-width: 2px !important;
  box-shadow: 0 0 10px #0008;
  z-index: 2;
}
.px-board-token.enemy {
  box-shadow: 0 0 9px #b54c3b55;
}
.px-arena-nameplate {
  position: absolute;
  top: 1px;
  left: -20px;
  right: -20px;
  display: grid;
  justify-items: center;
  pointer-events: none;
  z-index: 4;
  text-shadow:
    0 1px 4px #000,
    0 0 6px #000;
  overflow: visible;
}
.px-arena-nameplate b {
  font:
    900 9px/1.1 Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + -2.3) calc(100% * var(--th-s)) calc(89.8% + var(--th-l)));
  white-space: nowrap;
  max-width: 104px;
  text-overflow: ellipsis;
  overflow: hidden;
}
.px-arena-nameplate small {
  font:
    800 7px Consolas,
    monospace;
  color: #b8d2ca;
  white-space: nowrap;
}
.px-arena-vitals {
  position: absolute;
  bottom: 2px;
  left: 3px;
  right: 3px;
  pointer-events: none;
  z-index: 4;
  display: grid;
  gap: 2px;
}
.px-arena-hpbar,
.px-arena-shieldbar {
  height: 3px;
  background: hsl(calc(var(--th-bh) + 7) calc(38.5% * var(--th-bs)) 5.1%);
  border: 1px solid #0006;
}
.px-arena-hpbar i {
  display: block;
  height: 100%;
  background: #7bca8c;
}
.px-arena-shieldbar i {
  display: block;
  height: 100%;
  background: #60bfea;
}
.px-arena-vitals > span {
  font:
    800 7px Consolas,
    monospace;
  color: #e1efe3;
  white-space: nowrap;
  text-align: center;
  text-shadow: 0 1px 2px #000;
}
.px-arena-fx {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  overflow: visible;
}
.px-arena-beam {
  position: absolute;
  transform-origin: left center;
  height: 3px;
  background: hsl(calc(var(--th-h) + -8.7) calc(88% * var(--th-s)) calc(67.3% + var(--th-l)));
  box-shadow: 0 0 8px hsl(calc(var(--th-h) + -9.4) calc(83.5% * var(--th-s)) calc(62% + var(--th-l)));
  animation: pxAttackBeam 0.44s ease-out both;
}
.px-arena-beam.power {
  height: 5px;
  background: #c393ff;
  box-shadow: 0 0 13px #aa7fff;
}
.px-arena-burst {
  position: absolute;
  width: 34px;
  height: 34px;
  margin: -17px;
  border: 2px solid hsl(calc(var(--th-h) + -14.3) calc(100% * var(--th-s)) calc(74.3% + var(--th-l)));
  border-radius: 50%;
  animation: pxAttackBurst 0.65s ease-out both;
}
.px-arena-float,
.px-arena-heal-float {
  position: absolute;
  z-index: 28;
  transform: translate(-50%, -15px);
  font:
    900 16px Consolas,
    monospace;
  color: #ff937d;
  text-shadow: 0 2px 9px #000;
  white-space: nowrap;
  animation: pxFloatCombat 1.12s ease-out both;
}
.px-arena-float.miss {
  color: #d1d9cd;
}
.px-arena-heal-float {
  left: 50%;
  top: 0;
  color: #88f6b5;
  pointer-events: none;
}
.px-board-stage {
  overflow: visible;
}
.px-board-pan {
  padding-top: 8px;
  overflow: auto;
  scrollbar-width: thin;
}
.px-board-grid {
  margin: 6px 0 12px;
}
.px-board-roster-row .px-hp-value {
  font-size: 11px;
}
@keyframes pxAttackBeam {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  25% {
    opacity: 1;
  }
  75% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
  100% {
    opacity: 0;
    clip-path: inset(0 0 0 0);
  }
}
@keyframes pxAttackBurst {
  0% {
    opacity: 0;
    transform: scale(0.15);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(2);
  }
}
@keyframes pxFloatCombat {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.6);
  }
  25% {
    opacity: 1;
    transform: translate(-50%, -15px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -52px) scale(1);
  }
}
@media (max-width: 1060px) {
  .px-arena-workspace {
    grid-template-columns: 1fr;
  }
  .px-arena-order {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 180px;
  }
  .px-arena-bar {
    flex-direction: column;
    align-items: start;
  }
}
@media (max-width: 700px) {
  .px-combat-intro {
    flex-direction: column;
    align-items: stretch;
  }
  .px-combat-steps {
    grid-template-columns: 1fr;
  }
  .px-arena-flow {
    grid-template-columns: 1fr;
  }
  .px-arena-flow-item {
    grid-template-columns: 26px 1fr;
  }
  .px-arena-workspace {
    padding: 0 7px 7px;
  }
  .px-arena-actors,
  .px-arena-action-panel {
    padding: 8px;
  }
  .px-arena-order {
    grid-template-columns: 1fr;
  }
  .px-arena-rollrow {
    grid-template-columns: repeat(3, 1fr);
  }
  .px-arena-portrait {
    min-height: 90px;
  }
  .px-arena-support {
    grid-template-columns: 1fr auto auto;
  }
  .px-arena-logentry {
    grid-template-columns: 1fr;
  }
  .px-arena-bar {
    padding: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .px-arena-fx .px-arena-beam,
  .px-arena-fx .px-arena-burst,
  .px-arena-float,
  .px-arena-heal-float {
    animation: none !important;
  }
}

.px-arena-status-actions {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 7px;
  align-items: end;
  margin: 8px 0;
}
.px-arena-status-actions label {
  display: grid;
  gap: 5px;
  font:
    800 10px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + 1.1) calc(36.9% * var(--th-s)) calc(63.3% + var(--th-l)));
}
.px-arena-status-actions select {
  min-height: 34px;
  background: hsl(calc(var(--th-bh) + 4.2) calc(28.9% * var(--th-bs)) 8.8%);
  color: #eee;
  border: 1px solid #455c56;
}
.px-arena-status-actions button {
  background: #272d28;
  border: 1px solid hsl(calc(var(--th-h) + 7.3) calc(21.5% * var(--th-s)) calc(35.5% + var(--th-l)));
  color: hsl(calc(var(--th-h) + -4.2) calc(75.8% * var(--th-s)) calc(74.1% + var(--th-l)));
  font:
    800 10px Consolas,
    monospace;
  padding: 10px;
  cursor: pointer;
}
.px-arena-status-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.px-arena-status-chips span {
  border: 1px solid #a05d4a;
  background: #39251e;
  color: #ffc3a1;
  font:
    800 9px Consolas,
    monospace;
  padding: 4px;
}
.px-arena-status-chips small {
  color: #9fac9d;
  font:
    9px Consolas,
    monospace;
}
.px-arena-token-status {
  position: absolute;
  top: 2px;
  right: 1px;
  font:
    800 8px Consolas,
    monospace;
  color: #ffaf6b;
  z-index: 7;
  text-shadow: 0 1px 2px #000;
}
@media (max-width: 700px) {
  .px-arena-status-actions {
    grid-template-columns: 1fr 1fr;
  }
  .px-arena-status-actions label {
    grid-column: 1/-1;
  }
}
.px-arena-portrait {
  position: relative;
  overflow: visible;
}
.px-arena-portrait-cast {
  animation: pxDuelCast 0.6s ease-out;
}
.px-arena-portrait-impact {
  animation: pxDuelHit 0.54s ease-out;
}
.px-arena-duel-float {
  position: absolute;
  top: 22px;
  left: 50%;
  z-index: 12;
  white-space: nowrap;
  font:
    900 22px Consolas,
    monospace;
  color: #ff9677;
  text-shadow: 0 3px 8px #000;
  pointer-events: none;
  animation: pxDuelNumber 1.1s ease-out both;
}
.px-arena-duel-float.miss {
  color: #d8e7d6;
}
@keyframes pxDuelCast {
  0% {
    box-shadow: 0 0 0 #60d4c400;
  }
  38% {
    box-shadow:
      inset 0 0 25px #67d9e466,
      0 0 25px #67d9e433;
  }
  100% {
    box-shadow: none;
  }
}
@keyframes pxDuelHit {
  0% {
    transform: translateX(0);
    filter: brightness(1);
  }
  25% {
    transform: translateX(-4px);
    filter: brightness(1.65);
  }
  50% {
    transform: translateX(4px);
    filter: brightness(1.3);
  }
  75% {
    transform: translateX(-2px);
  }
  100% {
    transform: none;
    filter: none;
  }
}
@keyframes pxDuelNumber {
  0% {
    opacity: 0;
    transform: translate(-50%, 13px) scale(0.5);
  }
  23% {
    opacity: 1;
    transform: translate(-50%, -3px) scale(1.25);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -36px) scale(0.9);
  }
}
@media (prefers-reduced-motion: reduce) {
  .px-arena-portrait-cast,
  .px-arena-portrait-impact,
  .px-arena-duel-float {
    animation: none !important;
  }
}
.px-board-cell.px-arena-reachable {
  background: hsl(calc(var(--th-bh) + -15.9) calc(34% * var(--th-bs)) 19%) !important;
  box-shadow: inset 0 0 0 1px #71dcc16b !important;
}
.px-board-cell.px-arena-reachable:hover {
  background: #3b6658 !important;
}
.px-arena-dr-override {
  display: grid;
  gap: 6px;
  color: hsl(calc(var(--th-h) + 1.1) calc(36.9% * var(--th-s)) calc(63.3% + var(--th-l)));
  font:
    800 10px Consolas,
    monospace;
}
.px-arena-dr-override input {
  min-height: 34px;
  background: hsl(calc(var(--th-bh) + 5.9) calc(25.6% * var(--th-bs)) 8.4%);
  color: hsl(calc(var(--th-h) + -2.1) calc(58.3% * var(--th-s)) calc(90.6% + var(--th-l)));
  border: 1px solid #51615a;
}

.px-board-grid {
  --px-cell: clamp(34px, 3.2vw, 46px) !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
  border: 1px solid #464d49 !important;
  background: hsl(calc(var(--th-bh) + -5) calc(14.9% * var(--th-bs)) 9.2%) !important;
}
.px-board-cell {
  overflow: visible !important;
  border: 1px solid hsl(calc(var(--th-bh) + -26.8) calc(12.4% * var(--th-bs)) 17.5%) !important;
  background: hsl(calc(var(--th-bh) + -12.5) calc(13.3% * var(--th-bs)) 11.8%);
  box-shadow: none !important;
}
.px-board-cell.offset {
  background: hsl(calc(var(--th-bh) + -18.3) calc(15.8% * var(--th-bs)) 11.2%);
}
.px-board-cell.px-arena-active {
  outline: 2px solid hsl(calc(var(--th-h) + 2) calc(23.8% * var(--th-s)) calc(50.6% + var(--th-l)));
  outline-offset: -2px;
}
.px-board-cell.px-arena-target {
  outline: 2px solid #9b695e;
  outline-offset: -2px;
}
.px-board-cell.is-selected {
  outline: 1px solid hsl(calc(var(--th-h) + -0.5) calc(26.2% * var(--th-s)) calc(50.6% + var(--th-l)));
  outline-offset: -1px;
}
.px-board-cell.px-arena-reachable {
  background: hsl(calc(var(--th-bh) + -31.7) calc(20.5% * var(--th-bs)) 17.3%) !important;
  box-shadow: inset 0 0 0 1px #557c60 !important;
}
.px-board-token,
.px-board-token.enemy {
  width: 29px;
  height: 29px;
  margin: 0;
  justify-self: center;
  align-self: center;
  border-radius: 3px;
  box-shadow: none !important;
  filter: none !important;
  transition: none !important;
}
.px-board-token:hover {
  transform: none !important;
  filter: none !important;
  border-color: hsl(calc(var(--th-h) + 0.6) calc(61.7% * var(--th-s)) calc(68.2% + var(--th-l)));
}
.px-arena-nameplate {
  text-shadow: 0 1px 2px #000;
  top: 0;
  left: -14px;
  right: -14px;
}
.px-arena-nameplate b {
  font-size: 8px;
  color: hsl(calc(var(--th-h) + -0.9) calc(45.9% * var(--th-s)) calc(85.5% + var(--th-l)));
  max-width: 94px;
}
.px-arena-nameplate small {
  font-size: 7px;
  color: #aebbb4;
}
.px-arena-vitals {
  bottom: 0;
  left: 2px;
  right: 2px;
  gap: 1px;
}
.px-arena-hpbar,
.px-arena-shieldbar {
  height: 2px;
}
.px-arena-vitals > span {
  font-size: 6px;
  color: #e3e6dc;
  text-shadow: 0 1px 2px #000;
}
.px-board-shell,
.px-board-stage,
.px-board-pan {
  box-shadow: none !important;
}
.px-board-live,
.px-map-pulse {
  animation: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.px-arena-portrait,
.px-arena-portrait.enemy {
  background: hsl(calc(var(--th-bh) + -5) calc(20.8% * var(--th-bs)) 9.4%) !important;
  box-shadow: none !important;
}
.px-arena-fx {
  filter: none !important;
}
.px-arena-beam {
  box-shadow: none !important;
  background: hsl(calc(var(--th-h) + -6.9) calc(50% * var(--th-s)) calc(59.2% + var(--th-l))) !important;
}
.px-world-ship .px-board-cell:not([class*='px-tile-']) {
  background: hsl(calc(var(--th-bh) + 2.5) calc(28.6% * var(--th-bs)) 11%);
}
.px-world-outpost .px-board-cell.px-tile-floor {
  background: #25251f;
}
.px-world-wild .px-board-cell.px-tile-floor {
  background: #18221b;
}
.px-world-note {
  position: absolute;
  top: 0;
  right: 1px;
  font:
    800 9px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + -3.9) calc(44.7% * var(--th-s)) calc(59.6% + var(--th-l)));
  z-index: 6;
  text-shadow: 0 1px 2px #000;
}
.px-world-editor {
  border: 1px solid hsl(calc(var(--th-h) + 8.7) calc(14.7% * var(--th-s)) calc(25.3% + var(--th-l)));
  background: hsl(calc(var(--th-bh) + -22.1) calc(14.9% * var(--th-bs)) 9.2%);
  padding: 12px;
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}
.px-world-fields {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 10px;
}
.px-world-editor label {
  display: grid;
  gap: 5px;
  font:
    800 10px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + -0.6) calc(45.8% * var(--th-s)) calc(65.3% + var(--th-l)));
}
.px-world-editor input,
.px-world-editor select,
.px-world-editor textarea {
  background: hsl(calc(var(--th-bh) + -13.6) calc(18.9% * var(--th-bs)) 7.3%);
  color: hsl(calc(var(--th-h) + 6.4) calc(32.3% * var(--th-s)) calc(87.3% + var(--th-l)));
  border: 1px solid #505a4e;
  min-width: 0;
  width: 100%;
}
.px-world-hint {
  font:
    11px/1.55 Consolas,
    monospace;
  color: #adb6a9;
  border-left: 2px solid hsl(calc(var(--th-h) + 3.9) calc(24.3% * var(--th-s)) calc(43.5% + var(--th-l)));
  padding: 7px 10px;
}
.px-map-brushes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  gap: 6px;
}
.px-board-brush {
  display: grid;
  gap: 2px;
}
.px-board-brush small {
  font:
    9px Consolas,
    monospace;
  color: #9da79b;
}
.px-board-cell.px-tile-covercrate,
.px-board-cell.px-tile-locker,
.px-board-cell.px-tile-checkpoint {
  background: #31312a;
}
.px-board-cell.px-tile-terminal,
.px-board-cell.px-tile-console,
.px-board-cell.px-tile-medstation {
  background: hsl(calc(var(--th-bh) + -15.9) calc(11.8% * var(--th-bs)) 18.2%);
}
.px-board-cell.px-tile-stairs,
.px-board-cell.px-tile-elevator,
.px-board-cell.px-tile-bridge,
.px-board-cell.px-tile-window {
  background: #303331;
}
.px-board-cell.px-tile-vehicle {
  background: #34362c;
}
.px-board-cell.px-tile-smoke {
  background: #333b3b;
}
.px-board-cell.px-tile-ice {
  background: hsl(calc(var(--th-bh) + 7) calc(20.8% * var(--th-bs)) 18.8%);
}
.px-board-cell.px-tile-brush {
  background: #263427;
}
.px-board-cell.px-tile-loot,
.px-board-cell.px-tile-spawn {
  background: hsl(calc(var(--th-h) + 1.2) calc(14.6% * var(--th-s)) calc(17.5% + var(--th-l)));
}
.px-cell-tile {
  color: hsl(calc(var(--th-h) + 6.4) calc(16.1% * var(--th-s)) calc(65.9% + var(--th-l))) !important;
  text-shadow: none !important;
}
.px-campaign-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.px-campaign-summary > div {
  background: hsl(calc(var(--th-bh) + 2.5) calc(16% * var(--th-bs)) 9.8%);
  border: 1px solid #464b42;
  padding: 12px;
}
.px-campaign-summary b {
  font:
    800 27px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + -3) calc(61% * var(--th-s)) calc(67.8% + var(--th-l)));
  display: block;
}
.px-campaign-summary small {
  font:
    800 10px Consolas,
    monospace;
  color: #aab2a5;
}
.px-campaign-controls {
  display: grid;
  gap: 9px;
  background: hsl(calc(var(--th-bh) + 2.5) calc(17.4% * var(--th-bs)) 9%);
  border: 1px solid #4e513f;
  padding: 12px;
  margin-bottom: 15px;
}
.px-campaign-add {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
}
.px-campaign-add > label {
  display: grid;
  gap: 5px;
  min-width: 120px;
  flex: 1;
  font:
    800 10px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + -1.9) calc(56.3% * var(--th-s)) calc(64.1% + var(--th-l)));
}
.px-campaign-add input,
.px-campaign-add select {
  min-height: 34px;
}
.px-campaign-filter {
  display: flex;
  gap: 5px;
  margin-left: auto;
}
.px-campaign-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(315px, 1fr));
  gap: 12px;
}
.px-campaign-card {
  border: 1px solid #4e574d;
  background: linear-gradient(
    150deg,
    hsl(calc(var(--th-bh) + 1.7) calc(15.8% * var(--th-bs)) 11.2%),
    hsl(calc(var(--th-bh) + 3.6) calc(17.1% * var(--th-bs)) 8%)
  );
  padding: 12px;
  display: grid;
  gap: 12px;
}
.px-campaign-card.inactive {
  opacity: 0.66;
}
.px-campaign-card.down {
  border-color: #915644;
}
.px-campaign-card-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.px-campaign-card-head strong {
  font:
    800 15px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + -1.5) calc(64.5% * var(--th-s)) calc(75.7% + var(--th-l)));
}
.px-campaign-card-head small {
  display: block;
  font:
    10px Consolas,
    monospace;
  color: #a5b1a6;
  margin-top: 4px;
}
.px-campaign-bars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.px-campaign-bars > div > span {
  font:
    800 10px Consolas,
    monospace;
  color: #c6d3cb;
}
.px-campaign-track {
  height: 7px;
  margin-top: 5px;
  background: hsl(calc(var(--th-bh) + -11.7) calc(22% * var(--th-bs)) 8%);
  border: 1px solid #354039;
}
.px-campaign-track i {
  display: block;
  height: 100%;
}
.px-campaign-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.px-campaign-fields > label,
.px-campaign-details > label {
  font:
    800 9px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + 0.8) calc(39.1% * var(--th-s)) calc(63.9% + var(--th-l)));
  display: grid;
  gap: 5px;
}
.px-campaign-fields input {
  min-width: 0;
  padding: 6px;
  font-size: 12px;
}
.px-campaign-quick {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 5px;
  border-top: 1px solid #384139;
  padding-top: 9px;
}
.px-campaign-quick label {
  display: grid;
  gap: 4px;
  flex: 0 0 72px;
  color: #bdc2ad;
  font:
    9px Consolas,
    monospace;
}
.px-campaign-quick input {
  padding: 6px;
}
.px-campaign-quick button {
  background: #2b322d;
  border: 1px solid #59614d;
  color: hsl(calc(var(--th-h) + 5.3) calc(36.5% * var(--th-s)) calc(83.3% + var(--th-l)));
  font:
    800 10px Consolas,
    monospace;
  padding: 8px;
  cursor: pointer;
}
.px-campaign-quick button:hover {
  background: #40442d;
}
.px-campaign-details {
  border-top: 1px solid #3e463d;
  padding-top: 8px;
}
.px-campaign-details summary {
  cursor: pointer;
  font:
    800 10px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + -2.8) calc(58.7% * var(--th-s)) calc(69.6% + var(--th-l)));
  margin-bottom: 10px;
}
.px-campaign-details > label {
  margin: 10px 0;
}
.px-campaign-details textarea {
  min-height: 65px;
}
.px-campaign-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.px-campaign-foot button:last-child {
  margin-left: auto;
}
.px-combat-tldr {
  border: 1px solid hsl(calc(var(--th-h) + 1) calc(19% * var(--th-s)) calc(31% + var(--th-l)));
  background: hsl(calc(var(--th-bh) + -25) calc(11.5% * var(--th-bs)) 10.2%);
  padding: 12px 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.px-combat-tldr strong {
  font:
    800 18px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + -3.6) calc(78.6% * var(--th-s)) calc(74.3% + var(--th-l)));
}
.px-combat-tldr span {
  font:
    11px Consolas,
    monospace;
  color: #bbc2b5;
}
.px-combat-tldr .btn-row {
  margin-left: auto;
}
.px-combat-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 18px;
}
.px-combat-kpis > div {
  background: hsl(calc(var(--th-bh) + 7) calc(18.5% * var(--th-bs)) 10.6%);
  border: 1px solid #495148;
  padding: 14px;
}
.px-combat-kpis small {
  display: block;
  color: #afbdad;
  font:
    800 10px Consolas,
    monospace;
}
.px-combat-kpis strong {
  display: block;
  font:
    800 28px Consolas,
    monospace;
  color: #e5ebdc;
  margin: 6px 0;
}
.px-combat-kpis strong i {
  font:
    12px Consolas,
    monospace;
  color: #aab8aa;
}
.px-combat-work {
  display: grid;
  grid-template-columns: 1.25fr 0.95fr;
  gap: 12px;
}
.px-combat-simple {
  border: 1px solid #4a4d40;
  background: hsl(calc(var(--th-bh) + 10) calc(16.7% * var(--th-bs)) 9.4%);
  padding: 16px;
  margin: 0 0 12px;
}
.px-combat-simple h3 {
  font:
    800 13px Consolas,
    monospace;
  letter-spacing: 0.6px;
  color: hsl(calc(var(--th-h) + -3.1) calc(61.7% * var(--th-s)) calc(67.3% + var(--th-l)));
  margin: 0 0 10px;
}
.px-combat-quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.px-combat-actionrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}
.px-combat-mini {
  font:
    11px/1.5 Consolas,
    monospace;
  color: #aab8ac;
  padding: 9px;
  background: hsl(calc(var(--th-bh) + 8.3) calc(23.1% * var(--th-bs)) 7.6%);
}
.px-combat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 0;
}
.px-combat-cond {
  border: 1px solid hsl(calc(var(--th-h) + -14) calc(32.3% * var(--th-s)) calc(36.5% + var(--th-l)));
  background: hsl(calc(var(--th-h) + -9.5) calc(27.5% * var(--th-s)) calc(15.7% + var(--th-l)));
  color: hsl(calc(var(--th-h) + -1.5) calc(83.5% * var(--th-s)) calc(78.6% + var(--th-l)));
  font:
    800 10px Consolas,
    monospace;
  padding: 6px 8px;
}
.px-combat-cond button {
  background: none;
  border: 0;
  color: #faac8a;
  cursor: pointer;
}
.px-combat-expand {
  border-top: 1px solid #43483c;
  padding: 10px 0;
}
.px-combat-expand summary {
  cursor: pointer;
  font:
    800 11px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + -2.9) calc(59.5% * var(--th-s)) calc(68% + var(--th-l)));
}
.px-combat-advanced {
  background: hsl(calc(var(--th-bh) + 3.6) calc(14.9% * var(--th-bs)) 9.2%);
  padding: 14px;
  margin-top: 10px;
  border: 1px solid #484d40;
}
.px-combat-checks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0;
}
@media (max-width: 1000px) {
  .px-combat-work {
    grid-template-columns: 1fr;
  }
  .px-combat-checks {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .px-campaign-grid {
    grid-template-columns: 1fr;
  }
  .px-campaign-summary {
    grid-template-columns: repeat(2, 1fr);
  }
  .px-combat-kpis {
    grid-template-columns: 1fr;
  }
  .px-world-fields {
    grid-template-columns: 1fr;
  }
  .px-board-grid {
    --px-cell: 38px !important;
  }
  .px-campaign-fields {
    grid-template-columns: repeat(2, 1fr);
  }
  .px-combat-checks {
    grid-template-columns: 1fr;
  }
  .px-combat-quick {
    grid-template-columns: 1fr;
  }
}
.px-workspace-switch {
  border: 1px solid #4e4e40;
  background: hsl(calc(var(--th-bh) + -13.6) calc(14.3% * var(--th-bs)) 9.6%);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  margin: 12px 0;
}
.px-workspace-switch > span {
  font:
    800 10px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + 0.6) calc(36.9% * var(--th-s)) calc(60.2% + var(--th-l)));
  letter-spacing: 1px;
  margin-right: 8px;
}
.px-workspace-switch > button {
  border: 1px solid #4e584c;
  background: hsl(calc(var(--th-bh) + -25) calc(13.8% * var(--th-bs)) 12.7%);
  color: #c7d3bf;
  font:
    800 11px Consolas,
    monospace;
  padding: 9px 12px;
  cursor: pointer;
}
.px-workspace-switch > button.active {
  border-color: hsl(calc(var(--th-h) + -1.1) calc(37.7% * var(--th-s)) calc(51.6% + var(--th-l)));
  background: hsl(calc(var(--th-h) + -2.6) calc(18.3% * var(--th-s)) calc(18.2% + var(--th-l)));
  color: hsl(calc(var(--th-h) + 0.8) calc(80.2% * var(--th-s)) calc(78.2% + var(--th-l)));
}
.px-workspace-switch > small {
  font:
    10px Consolas,
    monospace;
  color: #aab5aa;
  margin-left: auto;
}