/* Dedicated station pages and navigable engineering diagram. */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand {
  text-decoration: none;
  color: inherit;
}
.masthead h1 {
  font-size: 42px;
}
.wallet {
  display: flex;
  gap: 16px;
  font-size: 13px;
  flex-wrap: wrap;
}
.wallet span {
  padding: 10px;
  background: #09121c;
  border: 1px solid #465967;
  color: #efd093;
}
.topnav {
  display: flex;
  gap: 8px;
  margin: 14px 0 24px;
  flex-wrap: wrap;
}
.topnav button {
  font-size: 12px;
  flex: 1;
}
.topnav button.active {
  border-bottom-color: #efc078;
  color: #ffe0aa;
}
.topnav button:disabled {
  opacity: 0.4;
}
.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
}
.page-heading h2 {
  font:
    600 clamp(25px, 3vw, 40px) Georgia,
    serif;
  color: #eed5a8;
  margin: 8px 0;
}
.page-heading small {
  font-size: 10px;
}
.page-heading span {
  font-size: 12px;
  color: #b9cabb;
}
body {
  max-width: 1600px;
}
.page {
  animation: page-in 0.25s ease-out;
}
.workshop-layout {
  display: grid;
  grid-template-columns: 240px minmax(360px, 1fr) 260px;
  gap: 14px;
}
.character-panel {
  padding: 0;
  overflow: hidden;
  position: relative;
}
.character-panel img {
  width: 100%;
  display: block;
  aspect-ratio: 2/3;
  object-fit: cover;
}
.character-copy {
  padding: 16px;
  background: linear-gradient(#15212b, #0c1723);
}
.character-copy small {
  font-size: 9px;
}
.character-copy h3 {
  font:
    italic 26px Georgia,
    serif;
  color: #f3d4a3;
  margin: 10px 0;
}
.character-copy p {
  font:
    italic 14px/1.5 Georgia,
    serif;
  margin-bottom: 0;
}
#preview {
  width: 100%;
  height: auto;
  border: 0;
  touch-action: auto;
}
#preview-caption {
  font-size: 9px;
  padding: 10px;
  display: block;
}
#build-stats {
  font-size: 11px;
  padding: 12px;
  line-height: 1.8;
  color: #afc9c7;
}
.diagram-panel {
  min-width: 0;
  background: radial-gradient(ellipse, #193139, #0a1421 70%);
  border: 4px ridge #4d626e;
  display: flex;
  flex-direction: column;
}
.tree-tools {
  padding: 10px;
  background: #14202c;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 11px;
}
.tree-tools button {
  padding: 7px;
  font-size: 12px;
}
.tree-tools label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tree-tools input {
  flex: 1;
  min-width: 120px;
  width: 150px;
}
select,
input:not([type="checkbox"]) {
  background: #09141d;
  border: 1px solid #4f6471;
  color: #cad9d4;
  padding: 9px;
  font-family: inherit;
  max-width: 100%;
  box-sizing: border-box;
}
#tree {
  width: 100%;
  height: 650px;
  max-height: 72vh;
  min-height: 420px;
  overflow: hidden;
}
#tree svg {
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}
#tree svg:active {
  cursor: grabbing;
}
.skill-link {
  stroke-width: 4;
  opacity: 0.2;
}
.skill-link.powered {
  opacity: 0.8;
  filter: drop-shadow(0 0 5px #d4c8a5);
}
.tree-core {
  fill: #172a33;
  stroke: #c7b386;
  stroke-width: 8;
}
.family-label {
  font:
    22px "Courier New",
    monospace;
  letter-spacing: 4px;
}
.node-shell {
  fill: #0d1a27;
  stroke-width: 3;
}
.skill-node {
  cursor: pointer;
  outline: none;
}
.node-rank {
  fill: #b3c5c9;
  font: bold 16px monospace;
}
.skill-node.owned .node-shell {
  fill: #385c60;
  stroke-width: 6;
}
.skill-node.available .node-shell {
  filter: drop-shadow(0 0 10px #bcefd4);
  stroke-width: 5;
}
.skill-node.locked {
  opacity: 0.5;
}
.skill-node.selected .node-shell,
.skill-node:focus .node-shell {
  stroke: #fff5d8;
  stroke-width: 8;
  filter: drop-shadow(0 0 14px #f4c87b);
}
.skill-node.dimmed {
  opacity: 0.1;
}
.tree-legend {
  padding: 12px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 10px;
  color: #83a2ab;
  margin-top: auto;
}
#tree-count {
  align-self: flex-end;
  padding: 8px 12px 10px;
  color: #f0cf91;
  font-size: 12px;
  text-align: right;
}
#skill-detail {
  padding: 18px;
  display: flex;
  flex-direction: column;
}
#skill-detail h3 {
  font:
    24px Georgia,
    serif;
  color: #f4d9a8;
}
#skill-detail small {
  font-size: 10px;
}
#skill-detail p {
  font-size: 12px;
}
#skill-detail .effect {
  color: #b7ebd1;
  font-size: 16px;
  line-height: 1.6;
  padding: 12px 0;
  border-block: 1px solid #3d555f;
}
#skill-detail .visual {
  color: #d5bd91;
}
#skill-detail button {
  font-size: 12px;
  padding: 12px;
}
#skill-detail #refund-all {
  margin-top: auto;
}
.rank-track {
  display: flex;
  gap: 5px;
  margin: 15px 0;
}
.rank-track i {
  height: 8px;
  flex: 1;
  background: #15232d;
  border: 1px solid #4b5d6b;
}
.rank-track i.on {
  background: #e6bf72;
  box-shadow: 0 0 7px #e6bf7244;
}
.shop-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 14px;
}
.ability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 14px;
}
.ability-card {
  border: 3px ridge #526470;
  background: radial-gradient(ellipse at top, #253949, #101b29);
  padding: 20px;
  position: relative;
}
.ability-card.owned {
  border-color: #b9a16b;
}
.ability-card .sigil {
  font-size: 42px;
  display: block;
  text-align: center;
  color: var(--accent);
  text-shadow: 0 0 20px var(--accent);
  margin: 8px;
}
.ability-card h3 {
  font:
    22px Georgia,
    serif;
  color: #e5d2ac;
}
.ability-card p {
  font-size: 12px;
  line-height: 1.6;
}
.ability-card small {
  font-size: 10px;
  letter-spacing: 0;
}
.ability-card button {
  display: block;
  width: 100%;
  margin-top: 12px;
  font-size: 12px;
}
.loadout-panel {
  margin-top: 24px;
  padding: 20px;
  background: #101c28;
  border: 3px ridge #576b76;
}
#loadout {
  display: flex;
  gap: 16px;
}
#loadout label {
  flex: 1;
  font-size: 12px;
}
#loadout select {
  display: block;
  width: 100%;
  margin-top: 8px;
}
#hotbar button {
  width: 100%;
  min-height: 70px;
  border-left: 5px solid var(--accent);
  text-align: left;
  white-space: pre-line;
}
#hotbar .ready {
  box-shadow: 0 0 15px #a9ddbc33;
}
#combat-stats,
#diagnostics {
  font-size: 11px;
  line-height: 1.8;
  white-space: pre-line;
}
.fuel-label {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #d7be8d;
}
#flight {
  grid-template-columns: 280px minmax(320px, 1fr) 280px;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
  min-height: calc(100vh - 120px);
}
#flight-rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
#flight-rail #card-readout {
  margin: 14px 0;
}
#flight-rail #relic-readout {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
#flight-rail #relic-readout div {
  color: #ffe3a4;
  overflow-wrap: anywhere;
}
.held-card-tray {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}
.held-card-face {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 7px;
  padding: 7px 8px;
  border: 1px solid #bb9c69;
  background: linear-gradient(145deg, #273d45, #101b28);
  box-shadow: inset 0 0 0 2px #08111b;
  color: #ffe0a2;
  text-align: left;
}
.held-card-sigil {
  grid-row: 1/3;
  display: grid;
  place-items: center;
  color: #ffe3a1;
  font-size: 18px;
}
.held-card-face strong {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.held-card-face small {
  color: #b9d0cc;
  font-size: 10px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
#flight-rail #relic-readout:empty::after {
  content: "None yet — win a boss sector";
  color: #9db4c8;
  font-size: 12px;
}
#flight > section {
  max-width: none;
  margin: auto;
  width: 100%;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  grid-row: 1;
}
.playfield-shell {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: auto;
}
.playfield-shell #game {
  position: relative;
  z-index: 1;
}
#flight > aside {
  min-width: 0;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#flight aside #pause {
  order: 20;
  margin-top: auto;
}
#flight aside #abandon {
  order: 21;
}
#flight-ticker {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  box-sizing: border-box;
}
#flight .flight-readouts {
  margin: 14px 0 18px;
}
#flight .flight-readouts .hud {
  margin-bottom: 8px;
}
#flight .flight-readouts .currency-readout {
  margin-top: 8px;
}
#flight .flight-readouts progress {
  margin-bottom: 0;
}
#flight-mode {
  color: #9ff5e1;
  letter-spacing: 0.08em;
  text-shadow: 0 0 12px #52e7c8aa;
  animation: console-pulse 2.4s ease-in-out infinite;
}
/* Flight notices render as pixel banners on the game canvas; this DOM node
   stays for screen readers only. */
.flight-announcement {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}
@keyframes console-pulse {
  0%,
  100% {
    opacity: 0.72;
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 20px #52e7c8;
  }
}
.station-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.station-actions button {
  margin: 5px 0;
}
.utility {
  margin-top: 24px;
  font-size: 12px;
}
.utility button,
.utility label {
  margin: 10px 5px 0 0;
  font-size: 11px;
}
.file-button input {
  display: block;
  max-width: 250px;
}
.result-card {
  max-width: 780px;
  max-height: 85vh;
  overflow: auto;
}
#card-offer {
  display: block;
  width: 100%;
  min-width: 0;
}
.result-card h2 {
  font-size: clamp(32px, 6vw, 68px);
}
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #183a35;
  border: 2px solid #b8d1a5;
  padding: 18px;
  z-index: 30;
  max-width: 80vw;
  box-shadow: 0 10px 35px #000;
  animation: page-in 0.25s;
}
dialog {
  background: #162532;
  color: #dbe1d2;
  border: 4px ridge #b59d6d;
  max-width: 500px;
  padding: 25px;
}
dialog::backdrop {
  background: #050b15cc;
}
dialog button {
  margin: 10px;
}
.selected-card {
  border-color: #ffd695 !important;
  background: #465540 !important;
}
.selected-card::after {
  content: " ✓";
  color: #ffd695;
  font-weight: 700;
}
#emporium-lock {
  padding: 15px;
  background: #422d2288;
  margin-bottom: 15px;
  font-size: 13px;
}
#emporium-lock:empty {
  display: none;
}
@keyframes page-in {
  from {
    opacity: 0.4;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 1100px) {
  .shop-layout {
    grid-template-columns: 190px minmax(0, 1fr);
  }
  #flight {
    grid-template-columns: 190px minmax(0, 1fr) 220px;
  }
  #flight-rail {
    font-size: 13px;
  }
  .workshop-layout {
    grid-template-columns: 190px minmax(300px, 1fr);
  }
  #skill-detail {
    grid-column: 1/-1;
  }
  .character-copy p {
    font-size: 12px;
  }
}
@media (max-width: 700px) {
  .masthead {
    display: block;
  }
  .workshop-layout,
  .shop-layout {
    grid-template-columns: 1fr;
  }
  .workshop-layout .character-panel {
    display: grid;
    grid-template-columns: 110px 1fr;
  }
  .workshop-layout .character-panel img {
    height: 165px;
  }
  .workshop-layout .character-copy {
    padding: 10px;
  }
  .workshop-layout #preview {
    grid-column: 1/-1;
    max-height: 140px;
    object-fit: contain;
  }
  .workshop-layout #build-stats {
    display: none;
  }
  .workshop-layout #preview-caption {
    grid-column: 1/-1;
  }
  .shop-layout .character-panel {
    display: grid;
    grid-template-columns: 110px 1fr;
  }
  .shop-layout .character-panel img {
    height: 165px;
  }
  .shop-layout .character-copy {
    padding: 10px;
  }
  #tree {
    height: 480px;
  }
  .topnav button {
    flex-basis: 40%;
  }
  #flight {
    grid-template-columns: 1fr;
  }
  #flight aside {
    order: -1;
  }
  #flight aside > p {
    display: none;
  }
  #hotbar {
    display: flex;
    gap: 10px;
  }
  #hotbar button {
    min-height: 44px;
    font-size: 11px;
  }
  #combat-stats {
    display: none;
  }
  .page-heading {
    display: block;
  }
  .wallet {
    gap: 6px;
  }
  .wallet span {
    padding: 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .page,
  #toast {
    animation: none;
  }
}
#tree-tooltip {
  position: fixed;
  z-index: 40;
  width: 280px;
  padding: 14px;
  background: #0c1926f5;
  border: 2px solid #bdc6a3;
  color: #dfdac3;
  white-space: pre-line;
  font:
    12px/1.7 "Courier New",
    monospace;
  pointer-events: none;
  box-shadow: 0 10px 30px #000;
}
#scrap-diagram {
  overflow-x: auto;
  margin-bottom: 20px;
  border: 3px ridge #485f6d;
  background: radial-gradient(ellipse, #283d50, #0b1624);
}
#scrap-diagram svg {
  display: block;
  width: 100%;
  min-width: 700px;
  height: auto;
}
#scrap-diagram [role="button"] {
  cursor: pointer;
  outline: none;
}
#scrap-diagram [role="button"]:hover circle,
#scrap-diagram [role="button"]:focus circle {
  stroke: #ffe9b6;
  stroke-width: 4;
}
#ability-preview {
  width: 100%;
  height: auto;
  border: 0;
}
#ability-caption {
  font-size: 10px;
  display: block;
  padding: 12px;
}
.ability-card:target,
.ability-card.inspecting {
  outline: 2px solid #ebcb8a;
  outline-offset: 2px;
}
#workshop #preview {
  height: 160px;
  object-fit: contain;
}
.topnav {
  position: relative;
  z-index: 1;
}

#intro-dialog {
  width: min(720px, calc(100vw - 40px));
  max-height: calc(100dvh - 40px);
  box-sizing: border-box;
  overflow-y: auto;
  padding: clamp(18px, 4vw, 36px);
  border: 3px ridge #7e9395;
  background: radial-gradient(ellipse at top left, #233946, #0c1723 75%);
  color: #e6e0ce;
  line-height: 1.65;
}
#intro-dialog h2 {
  font:
    600 clamp(26px, 4vw, 38px) Georgia,
    serif;
  color: #eed5a8;
}
.intro-speaker {
  color: #e7bd72;
}
.intro-orders {
  padding: 14px 18px;
  border-left: 3px solid #83bdb5;
  background: #070e1980;
  font-size: 14px;
}

#result-story {
  text-align: left;
  margin: 18px 0;
  padding: 16px;
  border-left: 3px solid #e2bb73;
  background: #0b1624;
  max-height: 38vh;
  overflow-y: auto;
  line-height: 1.6;
}
#result-story h3 {
  color: #eed5a8;
  font-family: Georgia, serif;
}
#result-story p {
  font-size: 14px;
}

.profile-picker {
  margin: 24px 0;
  padding: 16px;
  border: 1px solid #536b78;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: end;
}
.profile-picker label {
  display: grid;
  gap: 8px;
}
.profile-picker p {
  flex-basis: 100%;
  font-size: 12px;
}
.profile-picker input,
.profile-picker select {
  max-width: 100%;
  box-sizing: border-box;
}

/* Station services share the shops' open canvas and framed content. */
.masthead {
  justify-content: flex-end;
  gap: 0;
}
.wallet span {
  padding: 6px 10px;
}
.topnav {
  margin: 10px 0 18px;
}
.concourse-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(300px, 1fr);
  gap: 14px;
  align-items: stretch;
}
.concourse-panorama {
  margin: 0;
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border: 3px ridge #617477;
  box-shadow: 0 10px 30px #0008;
}
.concourse-panorama img {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
}
.concourse-panorama figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px;
  background: linear-gradient(transparent, #050b12ee);
  color: #eac78c;
  font-size: 11px;
  letter-spacing: 2px;
}
.station-controls,
.narrative-copy {
  min-width: 0;
  padding: 12px;
  border: 3px ridge #617477;
  background: radial-gradient(ellipse at top left, #233946, #0c1723 75%);
  box-shadow:
    inset 0 1px #b6c7bb40,
    0 10px 30px #0008;
}
.station-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.station-controls .destinations {
  display: grid;
  gap: 6px;
  margin: 0;
}
.station-controls .destinations button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  line-height: 1.1;
  text-align: left;
}
.station-controls .station-actions {
  display: grid;
  gap: 6px;
  margin-top: auto;
}
.station-controls #launch {
  order: -1;
  width: 100%;
  min-width: 0;
  min-height: 64px;
  font-size: 23px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #20170b;
  border: 3px ridge #ffe5a0;
  background: linear-gradient(#ffe4a0, #d79c44 48%, #ae6b24 51%, #e8b965);
  box-shadow:
    0 0 24px #eeae3b40,
    inset 0 1px 0 #fff1bc;
  text-shadow: 0 1px #fff3b7;
}
.station-controls #launch:hover {
  filter: brightness(1.15);
  box-shadow: 0 0 32px #eeae3b70;
}
#campaign-info {
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}
#intro-dialog {
  width: min(1120px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  background: transparent;
}
.narrative-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.narrative-copy h2 {
  margin-top: 10px;
}
#intro-launch {
  background: linear-gradient(#e4b965, #a56a2d);
  color: #171a1c;
  font-weight: bold;
}
#result-story:not([hidden]) {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 18px;
}
#result-story-portrait {
  width: 100%;
  height: auto;
  border: 2px ridge #617477;
}
.transmission-copy {
  min-width: 0;
}
@media (max-width: 1100px) {
  .narrative-layout {
    grid-template-columns: 190px minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .concourse-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .concourse-panorama {
    min-height: 190px;
  }
  .station-controls,
  .narrative-copy {
    padding: 8px;
  }
  .narrative-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .narrative-layout .character-panel {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
  }
  .narrative-layout .character-panel img {
    width: 110px;
    height: 165px;
    object-fit: cover;
  }
  #result-story:not([hidden]) {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }
}
#intro-dialog {
  max-width: calc(100vw - 32px);
}
.station-controls .destinations button {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.station-controls .destinations button::before {
  margin: 0;
}
.audio-controls {
  margin-right: auto;
  position: relative;
  z-index: 5;
  font-size: 12px;
}
.audio-controls summary {
  cursor: pointer;
  color: #eac78c;
  padding: 8px 12px;
}
.audio-panel {
  position: absolute;
  top: 100%;
  left: 0;
  width: min(310px, calc(100vw - 60px));
  padding: 16px;
  display: grid;
  gap: 14px;
  background: #12212e;
  border: 3px ridge #617477;
  box-shadow: 0 10px 30px #000a;
}
.audio-panel label {
  display: grid;
  gap: 6px;
}
.audio-panel select {
  min-width: 0;
  width: 100%;
}
.audio-panel small {
  line-height: 1.6;
}
@media (max-width: 700px) {
  .masthead {
    display: flex;
    flex-wrap: wrap;
  }
}
.masthead {
  margin: 0;
  padding: 0;
  min-height: 28px;
}
.page-heading {
  margin: 4px 0 10px;
}
.page-heading h2,
#station .page-heading h2 {
  font-size: 26px;
  margin: 4px 0;
}
.page-heading small {
  display: none;
}
.shop-main {
  min-width: 0;
}
.wallet-slot {
  min-height: 40px;
  position: sticky;
  top: 0;
  z-index: 3;
  background: #0a1420;
}
.wallet {
  justify-content: center;
  gap: 20px;
  padding: 5px;
}
.currency {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.currency svg {
  width: 24px;
  height: 24px;
  flex: none;
}
.wallet .currency {
  background: none;
  border: 0;
  padding: 0;
  color: #f1dab0;
  font-size: 17px;
}
.shop-services {
  display: grid;
  gap: 5px;
  padding: 10px;
  background: linear-gradient(#223440, #111d28);
  border: 3px ridge #617477;
}
.shop-services button,
#workshop .shop-services button {
  margin: 0;
  padding: 9px 10px;
  text-align: left;
  font-size: 12px;
}
.shop-services button.active {
  border-color: #e6ba69;
  color: #ffe1a0;
}
.shop-main .diagram-panel {
  min-height: 660px;
}
.character-copy {
  padding: 10px;
}
.character-copy h3 {
  margin: 5px 0;
}
@media (max-width: 700px) {
  .shop-services {
    grid-column: 1/-1;
    grid-template-columns: 1fr 1fr;
  }
  .wallet-slot {
    top: 0;
  }
  .shop-main .diagram-panel {
    min-height: 0;
  }
}
#workshop {
  margin: 0;
}
.shop-layout > .character-panel,
.workshop-layout > #skill-detail {
  align-self: start;
}

#emporium .loadout-panel {
  position: sticky;
  top: 40px;
  z-index: 5;
  margin: 0 0 18px;
  padding: 10px 16px;
  box-shadow: 0 8px 18px #0009;
}
#legendary .astral-character {
  min-height: 560px;
}
#legendary #astral-portrait {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  margin: 0;
  display: block;
}
#legendary .character-copy {
  text-align: center;
}
#legendary .character-copy p {
  font-size: 12px;
  line-height: 1.55;
  color: #9fb0b7;
}
#legendary .shop-main {
  min-width: 0;
}
.main-services {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.main-services button {
  padding: 7px 12px;
  font-size: 12px;
}
button.locked-service::after {
  content: " · Locked";
  font-size: 10px;
}
.cross-link {
  stroke-dasharray: 10 8;
  opacity: 0.72;
}
.cross-link.powered {
  opacity: 1;
  stroke-width: 4;
  filter: drop-shadow(0 0 5px currentColor);
}
#emporium .loadout-panel h3 {
  margin: 0 0 6px;
  font-size: 15px;
}
#emporium .loadout-panel p {
  display: none;
}
#emporium .ability-card {
  display: flex;
  flex-direction: column;
}
#emporium .ability-card button {
  margin-top: auto;
}
#emporium .ability-card small {
  padding-bottom: 16px;
}
.vex-icon {
  display: block;
  width: 96px;
  height: 96px;
  align-self: center;
  flex-shrink: 0;
  background-image: url("assets/vex-icons.png");
  background-size: 1152px 1920px;
  background-position: 0 calc(var(--icon-row) * -96px);
  image-rendering: pixelated;
  animation: vex-icon-loop 1.2s steps(12) infinite;
}
@keyframes vex-icon-loop {
  to {
    background-position-x: -1152px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vex-icon {
    animation: none;
  }
}
#emporium #loadout label {
  min-width: 0;
}
#emporium #loadout select {
  max-width: 100%;
}
.help-layout {
  display: grid;
  grid-template-columns: minmax(210px, 280px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.help-heading-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.help-character {
  position: sticky;
  top: 18px;
}
.help-content {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.help-card {
  background: linear-gradient(145deg, #142638e8, #091521f2);
  border: 1px solid #3d6574;
  padding: 20px 22px;
  box-shadow: 0 8px 24px #0008;
}
.help-card h3 {
  color: #f3d4a3;
  margin: 5px 0 12px;
}
#npc-dossiers,
#lore-database {
  grid-column: 1 / -1;
}
.npc-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.npc-dossier {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  padding: 12px;
  background: #ffffff08;
  border: 1px solid #3d657466;
}
.npc-portrait {
  width: 84px;
  height: 112px;
  object-fit: cover;
  object-position: top;
  border: 2px solid #5a6d76;
  background: #0a1422;
}
.npc-portrait.silhouette {
  filter: brightness(0) contrast(1.15);
  box-shadow: 0 0 14px #52e7c83d;
}
.npc-dossier h4 {
  margin: 2px 0 6px;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: #f3d4a3;
}
.npc-dossier small {
  color: #9db4c8;
  letter-spacing: 0.06em;
}
.npc-hint {
  color: #9db4c8;
  font-style: italic;
}
.npc-bio {
  color: #c1d1d8;
}
.lore-grid {
  display: grid;
  gap: 12px;
}
.lore-section-label {
  color: #9db4c8;
  letter-spacing: 0.1em;
  border-bottom: 1px solid #5a6d7655;
  padding-bottom: 4px;
}
.lore-entry {
  padding: 10px 12px;
  border-left: 3px solid #ecb765;
  background: #ffffff05;
}
.lore-entry.sealed {
  border-left-color: #5a6d76;
}
.lore-entry h4 {
  margin: 0 0 4px;
  font-size: 13px;
  color: #f3d4a3;
}
.lore-entry .lore-entry-text {
  color: #c1d1d8;
  margin: 6px 0 4px;
}
.lore-entry small {
  color: #9db4c8;
  letter-spacing: 0.06em;
}
.help-card p,
.help-card li {
  color: #c1d1d8;
  line-height: 1.55;
}
.help-card ol {
  margin: 10px 0 14px;
  padding-left: 25px;
}
.help-callout {
  border-left: 3px solid #e7cc65;
  padding: 10px 13px;
  background: #d4a74b12;
}
.help-example {
  margin: 18px 0 2px;
  border: 1px solid #315365;
  background: #07111b;
  padding: 8px;
}
.help-example img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  object-position: top;
  image-rendering: auto;
}
.help-example figcaption {
  color: #9fb4be;
  font-size: 12px;
  line-height: 1.45;
  padding: 9px 4px 2px;
}
.help-card details {
  border-top: 1px solid #315365;
  padding: 11px 0;
}
.help-card details:first-of-type {
  border-top: 0;
}
.help-card summary {
  cursor: pointer;
  color: #8fe5e4;
  font-weight: 600;
}
kbd {
  border: 1px solid #6d8990;
  background: #07121c;
  border-radius: 3px;
  padding: 1px 5px;
  color: #f8d88b;
}
@media (max-width: 700px) {
  .help-layout {
    grid-template-columns: 1fr;
  }
  .help-character {
    position: static;
    display: grid;
    grid-template-columns: 110px 1fr;
  }
  .help-character img {
    aspect-ratio: 2/3;
  }
  .help-character .character-copy {
    padding: 12px;
  }
  .help-character .character-copy h3 {
    font-size: 20px;
    margin: 5px 0;
  }
  .help-card {
    padding: 16px;
  }
}
@media (max-width: 700px) {
  .help-heading-actions {
    align-items: stretch;
  }
  .help-heading-actions span {
    display: none;
  }
  .help-heading-actions button {
    font-size: 12px;
    padding: 8px 10px;
  }
}
#exchange .ability-card button {
  margin-top: auto;
}
#exchange-grid .ability-card {
  display: flex;
  flex-direction: column;
}
#hal-tree {
  width: 100%;
  height: 650px;
  max-height: 75vh;
  min-height: 440px;
  overflow: hidden;
}
#hal-tree svg {
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}
#hal-tree svg:active {
  cursor: grabbing;
}
#hal-tree .skill-node.dimmed {
  opacity: 0.14;
}
#hal-tree .skill-node.owned .node-shell {
  fill: url(#hal-metal);
  stroke: #a4f8bc;
}
#hal-detail {
  align-self: start;
  min-width: 0;
}
#hal-detail h3 {
  font-size: 25px;
  color: #ffd9a0;
}
#hal-detail p {
  font-size: 13px;
}
.hal-tooltip {
  position: fixed;
  z-index: 30;
  width: 290px;
  max-width: 85vw;
  padding: 14px;
  background: #081624f5;
  border: 2px ridge #9bbccb;
  box-shadow: 0 8px 28px #000c;
  pointer-events: none;
  font-size: 13px;
}
.hal-tooltip strong {
  color: #ffe0a2;
}
.hal-tooltip p {
  margin: 8px 0;
}
@media (max-width: 700px) {
  #hal-tree {
    height: 500px;
    min-height: 400px;
  }
  #hal-detail {
    position: static;
  }
}