/* HUD. ART_DIRECTION section 14: clean, pixel-consistent, modern, unobtrusive, highly readable,
   and it must not cover the world with permanent elements. So instead of the old full-width bar
   this is a single small clock plate in one corner, a place name that fades in on arrival, and a
   control hint that stays out of the way. */

#hud {
  position: absolute;
  inset: 0;
  height: auto;
  background: none;
  border: 0;
  display: block;
  padding: 0;
  pointer-events: none;
  text-shadow: none;
  font-size: 20px;
}

/* ---- clock plate ---- */

.hud-clock {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 12px 6px;
  background: rgba(9, 14, 20, 0.78);
  border: 1px solid #4a5f74;
  box-shadow:
    inset 0 0 0 1px rgba(6, 10, 14, 0.9),
    0 3px 0 rgba(4, 7, 10, 0.5);
  letter-spacing: 0;
  line-height: 1;
}

.hud-clock::after {
  /* a hairline of warm light along the top edge keeps the plate from reading as flat chrome */
  content: '';
  position: absolute;
  left: 1px;
  right: 1px;
  top: 1px;
  height: 1px;
  background: rgba(226, 190, 130, 0.22);
}

.hud-day {
  color: #8fa2b3;
  font-size: 10px;
  letter-spacing: 2px;
}

.hud-time {
  color: #f0dcae;
  font-size: 20px;
  letter-spacing: 2px;
}

.hud-weather {
  color: #7d90a2;
  font-size: 10px;
  letter-spacing: 1px;
}

/* ---- place name ---- */

.hud-place {
  position: absolute;
  top: 16px;
  max-width: calc(100% - 360px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  left: 50%;
  transform: translateX(-50%);
  color: #d8cdb2;
  font-size: 10px;
  line-height: 20px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 18px rgba(0, 0, 0, 0.7);
  opacity: 0.72;
}

.hud-place::before,
.hud-place::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 205, 178, 0.5));
}

.hud-place::before { right: 100%; margin-right: 12px; }
.hud-place::after {
  left: 100%;
  margin-left: 12px;
  background: linear-gradient(90deg, rgba(216, 205, 178, 0.5), transparent);
}

/* ---- control hint ---- */

.hud-hint {
  position: absolute;
  right: 14px;
  bottom: 12px;
  max-width: 44vw;
  text-align: right;
  color: #6d7c8b;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 1px;
  opacity: 0.55;
  transition: opacity 400ms linear;
}

#app:hover .hud-hint { opacity: 0.75; }

/* ---- interaction prompt ---- */

.prompt {
  position: absolute;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(9, 14, 20, 0.9);
  border: 1px solid #6b7f93;
  border-radius: 0;
  padding: 8px 16px;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 1px;
  color: #f0e4c6;
  box-shadow:
    inset 0 0 0 1px rgba(6, 10, 14, 0.9),
    0 3px 0 rgba(4, 7, 10, 0.55);
}

.prompt::before {
  content: '';
  position: absolute;
  left: 1px;
  right: 1px;
  top: 1px;
  height: 1px;
  background: rgba(226, 190, 130, 0.26);
}

.toast {
  position: absolute;
  top: 62px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(12, 20, 28, 0.94);
  border: 1px solid #6b7f93;
  border-radius: 0;
  padding: 9px 18px;
  max-width: min(640px, 88vw);
  text-align: center;
  font-size: 20px;
  line-height: 26px;
  color: #e7dcc2;
  box-shadow: 0 3px 0 rgba(4, 7, 10, 0.55);
}

/* Sub-pixel snapping. Percentage centring puts a box at x.5 whenever the viewport and the
   box disagree on parity, and half a device pixel of offset is the one remaining way to
   make an on-grid pixel font look soft. round() pins the box back to whole pixels. A
   browser without round() keeps the plain 50% centring and is no worse off than before. */
@supports (left: round(down, 50%, 1px)) {
  .prompt,
  .toast,
  .hud-place {
    left: round(down, 50%, 1px);
    transform: translateX(round(down, -50%, 1px));
  }
}

@media (max-width: 1100px) {
  /* Below this width the centred place name collides with the clock plate, so it moves
     underneath it and reads left-aligned instead. */
  .hud-place {
    left: 14px;
    top: 54px;
    transform: none;
    max-width: calc(100% - 28px);
  }
  .hud-place::before, .hud-place::after { display: none; }
}

@media (max-width: 800px) {
  .hud-hint { display: none; }
  .hud-place { font-size: 10px; letter-spacing: 2px; }
}