/* The map key and time control share one baseline, independent of the update feed. */
.world-workspace .world-footer {
  position: fixed;
  inset: auto 0 0;
  z-index: 9;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 26px;
  font-family: var(--font-sans);
  letter-spacing: normal;
  pointer-events: none;
}
.world-workspace .world-footer .map-key {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 22px;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: #e0e8ee;
  font-size: var(--text-meta);
  line-height: 1.5;
  background: none;
  pointer-events: auto;
}
.world-footer .map-key-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}
.world-footer .map-key-group > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.world-footer .map-key-caption { color: #cbd7e0; }
.world-footer .map-key i { margin: 0; width: 6px; height: 6px; }
.world-footer .map-key :is(svg, .electricity-icon) { width: 13px; height: 15px; }
.world-footer .human-map-key { color: inherit; }
.world-footer .map-key-group + .map-key-group {
  padding-left: 22px;
  border-left: 1px solid #b6c1ca24;
}
.world-footer .advance-controls {
  display: flex;
  flex: 0 0 140px;
  pointer-events: auto;
}
.world-footer .next-turn { width: 100%; }
.world-workspace .world-notifications {
  bottom: 106px;
  overflow: visible;
}
.world-workspace .world-notifications .rail-content {
  height: 100%;
  padding: 4px 0 20px;
  mask-image: linear-gradient(#000 calc(100% - 20px), transparent);
}
/* Shade only the header and update feed; the footer sits directly on the ocean. */
.has-game-art .world-shade {
  background:
    linear-gradient(#02050bd9, transparent 25%),
    linear-gradient(90deg, transparent 55%, #02050b24 72%, #02050bb3);
}
@media (max-width: 1000px) {
  .world-footer .map-key-group + .map-key-group { border: 0; padding-left: 0; }
}
@media (max-width: 760px) {
  .world-workspace .world-footer { gap: 18px; padding: 14px 18px; }
  .world-footer .advance-controls { flex-basis: 104px; }
  .world-footer .map-key-group { gap: 5px 10px; }
  .world-footer .map-key-group .map-key-caption { display: none; }
  .world-workspace .world-notifications {
    left: 18px;
    right: 18px;
    bottom: 142px;
    top: auto;
    width: auto;
    height: 104px;
    background: none;
  }
  .world-workspace .world-notifications .rail-content { width: 100%; padding-top: 0; }
  .has-game-art .world-shade {
    background: linear-gradient(#02050bcc, transparent 30%);
  }
}