:root {
  --goal-better: #2e8072;
  --goal-worse: #905448;
  --goal-steady: #334959;
}
.bridge-cue {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
  padding: .7rem .8rem;
  margin-block-end: .65rem;
  border: 1px solid #4d686b;
  border-inline-start: 3px solid #66c5ac;
  background: #152b34;
  color: #e6f0ee;
}
.bridge-cue small { display: block; color: #b8ccd2; }
.map-mission .bridge-cue { margin: .3rem .65rem 0; }
.bridge-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: .65rem;
  margin: .85rem 0;
}
.bridge-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
  padding: .8rem;
  border: 1px solid #aabeb7;
  background: #e7ede3;
}
.bridge-option h3, .bridge-option p, .bridge-option dl { margin: 0; }
.bridge-option p { flex: 1; }
.bridge-option dt { color: var(--muted); font-size: .78rem; }
.bridge-option dd { margin: 0 0 .4rem; font-variant-numeric: tabular-nums; }
.goal-map-legend {
  position: absolute;
  inset: auto 0 37px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .75rem;
  align-items: center;
  padding: .45rem .75rem;
  background: #122331;
  color: #e1eceb;
  font-size: .78rem;
}
body[data-screen=world] .theater-map:has(.goal-map-legend) .map-mission { bottom: 108px; }
body[data-screen=world] .theater-map:has(.goal-map-legend) .map-canvas { bottom: 76px; }
@media (max-width: 580px) {
  .goal-map-legend { position: relative; inset: auto; order: 3; }
  body[data-screen=world] .theater-map:has(.goal-map-legend) .map-mission,
  body[data-screen=world] .theater-map:has(.goal-map-legend) .map-canvas { bottom: auto; }
}
.goal-map-legend i { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; }
.goal-map-legend .better { background: var(--goal-better); }
.goal-map-legend .worse { background: var(--goal-worse); }
.goal-map-legend .steady { background: var(--goal-steady); }
.world-reports .goal-panel { margin-block: .7rem; color: var(--ink); }
.goal-panel details { margin-block: .6rem; }
.goal-panel summary { cursor: pointer; }
.goal-panel .goal-better { color: #187052; }
.goal-panel .goal-worse { color: #a33d30; }
