.campus-board {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 760 / 390;
  min-height: 218px;
  border: 1px solid #335844;
  background: #263f35;
  color: #fff3cf;
  font-family: var(--mono);
}
.campus-board > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.campus-coordinates {
  position: absolute;
  top: 5%;
  left: 5%;
  display: grid;
  gap: 2px;
}
.campus-coordinates strong {
  font: 700 22px/1.15 var(--serif);
}
.campus-coordinates small {
  color: #dae3c8;
  font-size: 12px;
}
.campus-building {
  --campus-side: #547563;
  --campus-front: #748b6e;
  --campus-roof: #b9c2a1;
  position: absolute;
  top: var(--y);
  left: var(--x);
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  gap: 2px;
  width: min(29%, 195px);
  min-width: 68px;
  min-height: 44px;
  padding: 2px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  font-family: var(--body);
  cursor: pointer;
}
.campus-building[data-history-building='model'] {
  --x: 30%;
  --y: 39%;
  --campus-side: #48736e;
  --campus-front: #698f87;
  --campus-roof: #b6cbbb;
}
.campus-building[data-history-building='compute'] {
  --x: 68%;
  --y: 38%;
}
.campus-building[data-history-building='power'] {
  --x: 52%;
  --y: 71%;
  --campus-side: #7d7156;
  --campus-front: #958568;
  --campus-roof: #d5c18e;
}
.campus-building:is(:hover, :focus-visible, [aria-pressed='true']) {
  z-index: 1;
}
.campus-building[aria-pressed='true'] {
  border-color: #e5bf70;
  background: #eed29813;
}
.campus-building:focus-visible {
  outline: 2px solid #ffedb1;
  outline-offset: 2px;
}
.campus-art {
  display: block;
  width: min(100%, 168px);
  overflow: visible;
}
.campus-shadow {
  fill: #172e26;
  opacity: 0.6;
}
.campus-side {
  fill: var(--campus-side);
  stroke: #1b4133;
  stroke-width: 1.3;
}
.campus-front {
  fill: var(--campus-front);
  stroke: #1b4133;
  stroke-width: 1.3;
}
.campus-roof {
  fill: var(--campus-roof);
  stroke: #244638;
  stroke-width: 1.3;
}
.campus-dark {
  fill: #385c50;
  stroke: #234638;
  stroke-width: 1.3;
}
.campus-window {
  fill: #bcebc6;
  stroke: #355b4a;
  stroke-width: 1;
}
.campus-steel,
.campus-live {
  stroke: #d0dbb7;
  fill: none;
  stroke-width: 1.6;
}
.campus-live {
  stroke: #7aebd0;
  stroke-width: 2.5;
}
.campus-building[data-level='0'] .campus-shadow {
  visibility: hidden;
}
.campus-building[data-level='0'] .campus-art path,
.campus-building[data-level='0'] .campus-art ellipse {
  fill: #a9d8b621;
  stroke: #a1bda0;
  stroke-width: 1.3;
  stroke-dasharray: 4 3;
}
.campus-building[data-level='0']:is(
    [data-building-state='building'],
    [data-building-state='queued']
  )
  .campus-art
  :is(path, ellipse) {
  stroke: #efcf89;
}
.campus-name {
  white-space: nowrap;
}
.campus-name,
.campus-level {
  padding: 2px 5px;
  background: #203d32;
  font-size: clamp(11px, 1.4vw, 13px);
  line-height: 1.2;
  font-weight: 700;
}
.campus-building[aria-pressed='true'] .campus-name {
  background: #f1daa2;
  color: #342818;
}
.campus-level {
  color: #dfe5c7;
  font-size: 10px;
}
.campus-building[data-building-state='building'] .campus-level,
.campus-building[data-building-state='queued'] .campus-level {
  background: #e5bf70;
  color: #302417;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .campus-art {
    transition: translate 140ms ease-out;
  }
  .campus-building:hover .campus-art {
    translate: 0 -3px;
  }
}
.campus-meters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid #a9b592;
  border-top: 0;
  background: #a9b592;
}
.campus-meters > div {
  padding: 7px 9px;
  min-width: 0;
  background: #e7ead6;
}
.campus-meters dd {
  overflow-wrap: anywhere;
}
.campus-inspector {
  margin-block: 8px;
}
.campus-inspector-head,
.campus-upgrade header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 10px;
  flex-wrap: wrap;
}
.campus-upgrades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(174px, 100%), 1fr));
  gap: 6px;
}
.campus-upgrade {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 8px;
  background: var(--sheet);
  border: 1px solid var(--line);
}
.campus-upgrade[data-queued='true'] {
  border-color: #987045;
  background: #f7edcc;
}
.campus-upgrade h4 {
  margin: 0;
}
.campus-tag {
  color: #435846;
  font: 700 10px/1.3 var(--mono);
}
.campus-upgrade p.campus-effects {
  color: #234a37;
  font-weight: 700;
}
.campus-note {
  color: var(--ink-soft);
  font-size: 12px;
}
.campus-upgrade button,
.tech-node button {
  white-space: normal;
}
.campus-retired {
  display: grid;
  gap: 8px;
  padding-block: 10px;
  border-block: 1px solid var(--line);
  font-size: 13px;
}
.campus-retired h4 {
  margin: 0;
  font: 700 16px/1.2 var(--serif);
}
.campus-retired .campus-tag {
  padding: 3px 6px;
  background: #e6ebd6;
}
.campus-retired[data-retired-state='building'] .campus-tag {
  background: #f3e2b4;
  color: #643e18;
}
.campus-retired-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.campus-retired-actions > div {
  display: grid;
  gap: 5px;
  align-content: start;
}
.campus-retired-actions > div + div {
  border-inline-start: 1px solid var(--line);
  padding-inline-start: 10px;
}
.campus-retired-actions strong {
  font-family: var(--mono);
}
.campus-retired .button {
  white-space: normal;
}

.research-office {
  --tech-line: #76917b;
}
.tech-lane {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #aebfa3;
  background: repeating-linear-gradient(90deg, transparent 0 28px, #3f655315 28px 29px), #e6ead7;
}
.tech-lane > header {
  display: grid;
  gap: 3px;
}
.tech-chain {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 24px;
  padding: 0;
  list-style: none;
}
.tech-chain > li {
  position: relative;
  min-width: 0;
}
.tech-chain > li + li::before,
.tech-fork > .tech-node::before {
  content: '';
  position: absolute;
  top: 19px;
  left: -24px;
  width: 24px;
  height: 8px;
  background: var(--tech-line);
  clip-path: polygon(
    0 38%,
    calc(100% - 5px) 38%,
    calc(100% - 5px) 0,
    100% 50%,
    calc(100% - 5px) 100%,
    calc(100% - 5px) 62%,
    0 62%
  );
}
.tech-fork {
  display: grid;
  gap: 8px;
}
.tech-chain > .tech-fork::before {
  width: 12px;
  height: 2px;
  top: 22px;
  clip-path: none;
}
.tech-fork > .tech-node::before {
  left: -12px;
  width: 12px;
}
.tech-fork > .tech-node:first-child::after {
  content: '';
  position: absolute;
  top: 22px;
  left: -12px;
  height: calc(100% + 10px);
  border-left: 2px solid var(--tech-line);
}
.tech-fork > .tech-node:last-child {
  background: #f6f0dd;
}
.tech-node {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 9px;
  border: 1px solid #9eae96;
  background: var(--sheet);
}
.tech-node > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 8px;
  flex-wrap: wrap;
}
.tech-node h4 {
  margin: 0;
  font: 700 clamp(16px, 2vw, 21px)/1.15 var(--serif);
}
.tech-state {
  padding: 2px 6px;
  background: #e5ebda;
  color: #254839;
  font: 700 12px/1.4 var(--body);
}
.tech-node[data-state='locked'] {
  border-style: dashed;
}
.tech-node[data-state='locked'] .tech-state {
  background: #eee6d4;
  color: #5b5039;
}
.tech-node[data-state='complete'] {
  border-color: #64836b;
  background: #f1f5e5;
}
.tech-node[data-state='queued'],
.tech-node[data-state='researching'] {
  border-color: #9f7948;
  background: #f9f0d6;
}
.tech-node[data-state='queued'] .tech-state,
.tech-node[data-state='researching'] .tech-state {
  background: #efdfab;
  color: #553711;
}
.tech-effect {
  color: #244c38;
  font-weight: 700;
  font-size: 13px;
}
.tech-detail,
.tech-source,
.tech-node button + p {
  color: var(--ink-soft);
  font-size: 12px;
}
.tech-node button + p {
  margin-top: 4px;
}
.tech-budget {
  font: 700 12px/1.4 var(--mono);
}
.tech-source {
  border-top: 1px dotted var(--line);
  padding-top: 5px;
}

@media (max-width: 640px) {
  .tech-chain {
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
  }
  .tech-chain > li + li::before {
    top: -14px;
    left: 18px;
    width: 2px;
    height: 14px;
    clip-path: none;
  }
  .tech-chain > .tech-fork {
    padding-left: 18px;
  }
  .tech-chain > .tech-fork::before {
    left: 7px;
    width: 2px;
  }
  .tech-fork > .tech-node:first-child::after {
    top: 0;
    left: -12px;
    height: calc(100% + 32px);
  }
  .tech-fork > .tech-node::before {
    left: -11px;
    width: 11px;
  }
  .campus-meters > div {
    padding-inline: 5px;
  }
  .campus-meters dt {
    font-size: 11px;
  }
  .campus-meters dd {
    font-size: 12px;
  }
  .campus-retired-actions {
    grid-template-columns: minmax(0, 1fr);
  }
  .campus-retired-actions > div + div {
    border-inline-start: 0;
    padding-inline-start: 0;
    border-block-start: 1px solid var(--line);
    padding-block-start: 10px;
  }
  .campus-retired .button {
    width: 100%;
  }
}
@media (max-width: 950px) {
  .campus-coordinates strong {
    font-size: 18px;
  }
  .campus-coordinates small {
    font-size: 10px;
  }
  .campus-building[data-history-building='model'],
  .campus-building[data-history-building='compute'] {
    --y: 43%;
  }
}
@media (max-width: 480px) {
  .campus-board {
    min-height: 208px;
  }
  .campus-building[data-history-building='power'] {
    --y: 75%;
  }
}