:root {
  --bridge-fit: 1;
  --bridge-observe-scale: 1;
  --bridge-observe-origin-y: 38vh;
  --bridge-lamp-color: #b8dfd9;
  --bridge-cabin-light: 0;
  --bridge-perimeter-light: 0;
  --bridge-screen-light: 0;
  --bridge-look-x: 0px;
  --bridge-look-y: 0px;
  --bridge-look-yaw: 0deg;
  --bridge-look-pitch: 0deg;
  --bridge-room-opacity: 1;
  --bridge-chart-light: 0;
  --bridge-map-ui: 0;
  --bridge-open-opacity: 0;
  --bridge-anchor-x: 50vw;
  --bridge-anchor-y: 74vh;
  --bridge-hit-height: 34vh;
}
body.bridge-entry { background: #000; }
#space-background { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; }
.bridge-room { position: fixed; inset: 0; overflow: hidden; z-index: 3; background: transparent; opacity: var(--bridge-room-opacity); pointer-events: none; }
.bridge-stage { position: absolute; width: 1600px; height: 900px; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(var(--bridge-fit)); }
.bridge-lens { position: absolute; inset: 0; perspective: 1100px; perspective-origin: 50% 45%; transform-origin: 50% 38%; transform: scale(var(--bridge-observe-scale)); }
.bridge-world { position: absolute; inset: 0; transform-style: preserve-3d; transform: translate3d(var(--bridge-look-x), var(--bridge-look-y), 0) rotateX(var(--bridge-look-pitch)) rotateY(var(--bridge-look-yaw)); will-change: transform; }
.bridge-cabin { position: absolute; inset: 0; transform: translateZ(0); }
.bridge-cockpit, .bridge-screen-mask, .bridge-perimeter { position: absolute; inset: 0; width: 1600px; height: 900px; display: block; }
.bridge-cockpit { filter: brightness(var(--bridge-cabin-light)); }
.bridge-screen-mask { opacity: calc(1 - var(--bridge-screen-light)); }
.bridge-perimeter { opacity: var(--bridge-perimeter-light); color: var(--bridge-lamp-color); }
body.bridge-observe-clear .bridge-room { visibility: hidden; }
body.bridge-observing .bridge-open { pointer-events: none; }
.deck-hud, .bridge-screens, .chart-surface {
  transform-origin: 50% var(--bridge-observe-origin-y);
  transform: scale(var(--bridge-observe-scale));
}
.chart-surface { position: fixed; inset: 0; z-index: 6; opacity: var(--bridge-chart-light); isolation: isolate; }
body.bridge-entry .chart-surface { pointer-events: none; }
body.bridge-hidden .bridge-room { display: none; }
.bridge-open { position: fixed; z-index: 7; left: var(--bridge-hit-x, var(--bridge-anchor-x)); top: var(--bridge-hit-y, var(--bridge-anchor-y)); width: var(--bridge-hit-width, min(58vw, 720px)); height: var(--bridge-hit-height, 34vh); transform: translate(-50%, -50%); clip-path: var(--bridge-hit-shape, none); opacity: var(--bridge-open-opacity); border: 0; background: transparent; color: #c2e6df; cursor: pointer; }
.bridge-open:disabled { pointer-events: none; cursor: default; }
.bridge-open:focus-visible { outline: none; }
body:has(.bridge-open:focus-visible) #hud { filter: brightness(1.35); }
body.bridge-hidden .bridge-open { display: none; }
body.bridge-entry .top, body.bridge-entry .intro, body.bridge-entry .dest, body.bridge-entry .foot { opacity: var(--bridge-map-ui); pointer-events: none; transition: none; }
body.bridge-entry .dest button, body.bridge-entry .logo, body.bridge-entry .deck-return { pointer-events: none; }
.deck-return { margin-left: auto; pointer-events: auto; color: var(--dim); padding: 8px 0 8px 15px; font-size: 9px; transition: color .25s, opacity .3s; }
.deck-return:hover { color: var(--fg); }
.deck-return:focus-visible { outline: 1px solid var(--accent); outline-offset: 5px; }
body.fly .deck-return, body.there .deck-return { opacity: 0; pointer-events: none; }
@media (max-width: 800px) {
  .bridge-open { --bridge-hit-width: 84vw; }
  .deck-return { font-size: 8px; }
}