:root {
  color-scheme: dark;
  --bridge: #090d10;
  --bridge-deep: #040607;
  --steel: #24323a;
  --steel-2: #314650;
  --glass: #87c5d4;
  --text: #e8f0ed;
  --muted: #95aaa6;
  --amber: #d8b46a;
  --signal: #8ad7c1;
  --panel: rgba(13, 21, 24, 0.88);
  --line: rgba(196, 229, 223, 0.22);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  overflow-x: hidden;
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 18%, rgba(58, 86, 89, 0.42), transparent 34rem),
    linear-gradient(180deg, #11191d 0%, var(--bridge) 42%, var(--bridge-deep) 100%);
}

button,
canvas {
  font: inherit;
}

.station-shell {
  min-height: 100vh;
  padding: clamp(14px, 2vw, 26px);
}

.bridge {
  min-height: calc(100vh - clamp(28px, 4vw, 52px));
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(14px, 2vw, 22px);
  border: 1px solid rgba(201, 226, 221, 0.12);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 58px 58px,
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.72);
  padding: clamp(14px, 2vw, 24px);
}

.station-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--amber);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(1.55rem, 3vw, 2.6rem);
  font-weight: 650;
}

h2 {
  margin-bottom: 12px;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
}

.bearing-readout {
  min-width: 132px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: rgba(4, 9, 11, 0.7);
  text-align: right;
}

.bearing-readout span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.bearing-readout strong {
  display: block;
  color: var(--signal);
  font-size: 1.35rem;
}

.optics-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  border: 1px solid rgba(196, 229, 223, 0.16);
  background: rgba(4, 9, 11, 0.46);
  padding: 10px;
}

.optics-status span {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.optics-status strong {
  display: block;
  margin-top: 3px;
  color: var(--signal);
  font-size: 0.92rem;
}

.optics-status strong.is-live {
  color: var(--amber);
}

.optics-upgrade {
  padding: 6px 10px;
  border: 1px solid rgba(216, 180, 106, 0.5);
  background: linear-gradient(135deg, rgba(216, 180, 106, 0.13), rgba(138, 215, 193, 0.08));
  box-shadow: 0 0 18px rgba(216, 180, 106, 0.1);
}

.optics-upgrade em {
  display: inline-block;
  margin-left: 5px;
  padding: 2px 5px;
  border-radius: 2px;
  background: var(--amber);
  color: #151108;
  font-size: 0.58rem;
  font-style: normal;
  letter-spacing: 0.08em;
  vertical-align: 1px;
}

.optics-upgrade strong {
  color: var(--amber);
}

.magnification-control {
  display: grid;
  grid-template-columns: repeat(3, minmax(48px, 1fr));
  gap: 6px;
}

.magnification-control button {
  min-height: 40px;
  border: 1px solid rgba(196, 229, 223, 0.22);
  background: rgba(8, 14, 16, 0.72);
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
}

.magnification-control button:hover,
.magnification-control button:focus-visible {
  border-color: rgba(216, 180, 106, 0.72);
  outline: none;
}

.magnification-control button.is-active {
  border-color: rgba(138, 215, 193, 0.68);
  background: rgba(12, 33, 34, 0.82);
  color: var(--signal);
}

.scope-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 340px);
  gap: clamp(16px, 2.6vw, 28px);
  align-items: center;
}

.scope-stack {
  min-width: 0;
}

.scope-frame {
  position: relative;
  width: min(66vh, 100%);
  max-width: 800px;
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  border: clamp(14px, 2.2vw, 26px) solid #11191c;
  background: #020405;
  box-shadow:
    0 0 0 1px rgba(226, 240, 236, 0.16),
    0 0 0 7px rgba(2, 4, 5, 0.9),
    0 30px 90px rgba(0, 0, 0, 0.68),
    inset 0 0 0 9px rgba(113, 151, 150, 0.16),
    inset 0 0 34px rgba(138, 215, 193, 0.08),
    inset 0 0 90px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}

.scope-frame:active {
  cursor: grabbing;
}

#periscopeCanvas {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}

#periscopeOverlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  pointer-events: none;
}

.glass-sheen {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(118deg, transparent 12%, rgba(235, 255, 250, 0.11) 27%, transparent 37%),
    radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.15), transparent 18%),
    radial-gradient(circle at 62% 48%, transparent 44%, rgba(23, 55, 61, 0.12) 58%, rgba(0, 0, 0, 0.45) 82%, rgba(0, 0, 0, 0.9) 100%);
  mix-blend-mode: screen;
  opacity: 0.62;
}

.glass-sheen::before,
.glass-sheen::after {
  content: "";
  position: absolute;
  inset: 4.5%;
  border-radius: 50%;
  border: 1px solid rgba(138, 215, 193, 0.12);
}

.glass-sheen::after {
  inset: 8.5%;
  border-color: rgba(216, 180, 106, 0.09);
  transform: translateX(2px);
}

.bearing-band {
  pointer-events: none;
  position: absolute;
  left: 13%;
  right: 13%;
  top: 5.5%;
  height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: rgba(226, 240, 236, 0.74);
  font-size: clamp(0.62rem, 1.4vw, 0.8rem);
  text-shadow: 0 1px 4px #000;
}

.bearing-band span {
  position: relative;
  min-width: 28px;
  text-align: center;
}

.bearing-band span::before {
  content: "";
  display: block;
  width: 1px;
  height: 16px;
  margin: 0 auto 5px;
  background: rgba(226, 240, 236, 0.65);
}

.field-note {
  pointer-events: none;
  position: absolute;
  left: 50%;
  bottom: 9%;
  transform: translateX(-50%);
  padding: 7px 11px;
  border: 1px solid rgba(226, 240, 236, 0.2);
  background: rgba(4, 8, 10, 0.68);
  color: rgba(226, 240, 236, 0.78);
  font-size: 0.8rem;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(4px);
}

.field-note.is-acquiring {
  border-color: rgba(216, 180, 106, 0.48);
  background: rgba(20, 17, 9, 0.68);
  color: rgba(255, 236, 190, 0.92);
}

.details-button {
  position: absolute;
  right: 11%;
  bottom: 14%;
  border: 1px solid rgba(138, 215, 193, 0.45);
  background: rgba(11, 28, 30, 0.88);
  color: var(--text);
  padding: 8px 12px;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
}

.details-button:hover,
.details-button:focus-visible {
  border-color: var(--signal);
  outline: none;
}

.contact-strip {
  min-height: 78px;
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.contact-card {
  border: 1px solid var(--line);
  background: rgba(8, 14, 16, 0.72);
  color: inherit;
  cursor: pointer;
  padding: 9px 10px;
  min-width: 0;
  text-align: left;
}

.contact-card strong,
.contact-card span {
  display: block;
}

.contact-card strong {
  overflow: hidden;
  color: var(--signal);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-card span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.74rem;
}

.contact-card.is-visible {
  border-color: rgba(138, 215, 193, 0.62);
  background: rgba(12, 33, 34, 0.82);
}

.contact-card.is-selected {
  border-color: rgba(216, 180, 106, 0.78);
  background:
    linear-gradient(180deg, rgba(216, 180, 106, 0.14), rgba(12, 33, 34, 0.82));
}

.contact-card:hover,
.contact-card:focus-visible {
  border-color: rgba(216, 180, 106, 0.72);
  outline: none;
}

.vessel-panel {
  align-self: stretch;
  min-height: 420px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: inset 0 0 55px rgba(0, 0, 0, 0.42);
  padding: clamp(16px, 2vw, 22px);
}

.panel-empty {
  color: var(--muted);
}

.panel-empty h2 {
  color: var(--text);
}

dl {
  display: grid;
  gap: 14px;
  margin: 0;
}

dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

dd {
  margin: 4px 0 0;
  color: var(--text);
  line-height: 1.45;
}

@media (max-width: 860px) {
  .station-shell {
    padding: 0;
  }

  .bridge {
    min-height: 100vh;
    border: 0;
    padding: 14px;
  }

  .station-header {
    align-items: flex-start;
  }

  .bearing-readout {
    min-width: 108px;
  }

  .scope-layout {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .optics-bar {
    align-items: stretch;
  }

  .scope-frame {
    width: min(92vw, 72vh);
  }

  .contact-strip {
    grid-template-columns: 1fr;
  }

  .vessel-panel {
    min-height: auto;
  }
}

@media (max-width: 520px) {
  .station-header {
    display: grid;
    grid-template-columns: 1fr;
  }

  .bearing-readout {
    width: 100%;
    text-align: left;
  }

  .optics-bar {
    display: grid;
  }

  .scope-frame {
    border-width: 12px;
  }

  .field-note {
    bottom: 7%;
    max-width: 74%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Bridge Station embeds this toy as one of three fixed-height Live Console
   panels; the width-based mobile breakpoints above assume a full phone
   screen's worth of vertical room and actually make the embedded case
   worse (e.g. stacking the header instead of keeping it compact). These
   overrides win regardless of viewport width because is-embedded is only
   ever set by app.js's window.self !== window.top check. Standalone runs
   at toys/periscope/ never get this class and render exactly as before. */
body.is-embedded .station-shell {
  padding: 0;
}

body.is-embedded .bridge {
  min-height: 100vh;
  border: 0;
  padding: 10px;
  gap: 8px;
}

body.is-embedded .eyebrow {
  display: none;
}

body.is-embedded .station-header {
  display: flex;
  flex-direction: row;
  align-items: center;
}

body.is-embedded h1 {
  font-size: 1rem;
}

body.is-embedded .bearing-readout {
  min-width: 0;
  width: auto;
  padding: 4px 8px;
}

body.is-embedded .bearing-readout span {
  font-size: 0.6rem;
}

body.is-embedded .bearing-readout strong {
  font-size: 0.95rem;
}

body.is-embedded .optics-bar {
  display: flex;
  flex-direction: row;
  padding: 6px 8px;
}

body.is-embedded .optics-status + .optics-status {
  display: none;
}

body.is-embedded .magnification-control button {
  min-height: 30px;
  font-size: 0.7rem;
}

body.is-embedded .scope-frame {
  width: min(70vw, 62vh);
  border-width: 8px;
}

body.is-embedded .contact-strip {
  min-height: 0;
  margin-top: 8px;
}

body.is-embedded .vessel-panel {
  min-height: 0;
  padding: 12px;
}