.game-window {
  position: relative;
  margin: 0;
  border: 1px solid rgba(141,151,165,.55);
  background: #202326;
  box-shadow: 14px 18px 0 rgba(0,0,0,.24);
}
.game-window::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: -1px auto auto -1px;
  width: 22px;
  height: 22px;
  border-left: 2px solid var(--nebula-blue);
  border-top: 2px solid var(--nebula-blue);
  pointer-events: none;
}
.game-window::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.05);
}
.game-window > figcaption {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 10px 0 12px;
  border-bottom: 1px solid rgba(141,151,165,.42);
  background: #171a1e;
  color: var(--muted);
  font: 700 9px/1 var(--mono);
  letter-spacing: .12em;
}

.status-line,
.preview-notice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.status-line::before,
.preview-notice::before {
  content: "";
  width: 7px;
  height: 7px;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(243,196,78,.09);
}
.status-line { color: var(--plot-green); font: 700 10px/1 var(--mono); letter-spacing: .14em; }

.facility-tabs,
.school-steps {
  display: flex;
  gap: 8px;
  margin: 34px auto 46px;
}
.facility-tabs button,
.school-steps button {
  position: relative;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  padding: 12px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.facility-tabs button:hover,
.school-steps button:hover { color: var(--text); border-color: var(--line-strong); transform: translateY(-1px); }
.facility-tabs button[aria-selected="true"],
.school-steps button[aria-selected="true"] {
  border-color: var(--nebula-blue);
  background: rgba(74,168,255,.10);
  color: var(--text);
}
.facility-tabs button[aria-selected="true"]::after,
.school-steps button[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: 2px;
  background: var(--nebula-blue);
}

.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.tag-list span { border: 1px solid var(--line); padding: 8px 10px; color: var(--muted); font-size: 12px; background: rgba(255,255,255,.012); }

.concept-panel {
  position: relative;
  width: 100%;
  min-height: 520px;
  display: grid;
  place-content: center;
  gap: 18px;
  padding: 42px;
  border: 1px solid var(--line);
  overflow: hidden;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    #101216;
  background-size: 36px 36px;
  text-align: center;
}
.concept-panel::before {
  content: "";
  width: 70px;
  height: 70px;
  justify-self: center;
  border: 1px solid var(--nebula-blue);
  transform: rotate(45deg);
  box-shadow: inset 0 0 0 18px rgba(74,168,255,.035);
}
.concept-panel span { color: var(--muted-2); font: 700 10px/1 var(--mono); letter-spacing: .16em; }
.concept-panel strong { font-size: clamp(34px, 4vw, 66px); letter-spacing: -.05em; }
.concept-panel p { margin: 0; color: var(--warm); font: 700 11px/1 var(--mono); letter-spacing: .16em; }

.demo-image-button {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line-strong);
  background: #17191d;
  color: var(--text);
  cursor: zoom-in;
  text-align: left;
  box-shadow: 16px 18px 0 rgba(0,0,0,.2);
}
.demo-image-button::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 12px;
  border: 1px solid transparent;
  pointer-events: none;
  transition: border-color 180ms ease;
}
.demo-image-button:hover::before { border-color: rgba(74,168,255,.55); }
.demo-image-button img { width: 100%; }
.demo-image-button > span {
  display: flex;
  justify-content: flex-end;
  padding: 11px 14px;
  color: var(--muted);
  font: 700 9px/1 var(--mono);
  letter-spacing: .12em;
}

.school-contact-sheet figure { cursor: default; }
.school-contact-sheet img { transition: transform 260ms ease, opacity 260ms ease; }
.school-contact-sheet figure:hover img { transform: scale(1.025); opacity: .88; }

.lightbox {
  width: min(96vw, 1500px);
  max-width: 1500px;
  max-height: 94vh;
  border: 1px solid var(--line);
  background: #090A0C;
  color: var(--text);
  padding: 40px;
  overflow: auto;
}
.lightbox::backdrop { background: rgba(0,0,0,.82); backdrop-filter: blur(6px); }
.lightbox img { max-width: 100%; max-height: 78vh; margin: auto; object-fit: contain; }
.lightbox p { margin: 20px auto 0; color: var(--muted); text-align: center; }
.lightbox-close {
  position: sticky;
  z-index: 2;
  top: 0;
  float: right;
  width: 38px;
  height: 38px;
  margin: -20px -20px 10px 10px;
  border: 1px solid var(--line);
  background: #101216;
  color: var(--text);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}
.lightbox-close:hover { border-color: var(--nebula-blue); }

@media (max-width: 767px) {
  .game-window { box-shadow: 8px 10px 0 rgba(0,0,0,.22); }
  .concept-panel { min-height: 360px; }
  .lightbox { width: 96vw; padding: 20px; }
  .lightbox-close { margin: -8px -8px 10px 10px; }
}

.image-fallback {
  min-height: 280px;
  display: grid;
  place-content: center;
  gap: 10px;
  padding: 28px;
  border: 1px dashed var(--line);
  background: #111317;
  color: var(--muted);
  text-align: center;
}
.image-fallback span { color: var(--warm); font: 700 11px/1 var(--mono); letter-spacing: .14em; }
.image-fallback strong { color: var(--text); font-weight: 500; }