/* ---------- Hanging sign ---------- */
.hud {
  position: fixed; z-index: 10;
  top: var(--safe-t); left: calc(14px + var(--safe-l)); right: calc(12px + var(--safe-r));
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  pointer-events: none;
}
.hud > * { pointer-events: auto; }
.sign {
  position: relative;
  margin-top: 16px;
  padding: 0 12px 2px;
  text-align: center;
}
.sign::before, .sign::after {
  content: ''; position: absolute; top: -28px;
  width: var(--u); height: 24px; background: #2a1d17;
}
.sign::before { left: 14px; }
.sign::after { right: 14px; }
.sign-names { display: block; font: 400 48px/1 var(--names); letter-spacing: 0; }
.sign-date { display: block; font-size: 0.8rem; font-weight: 500; line-height: 1.2; opacity: 0.85; }
.hud-actions { display: flex; gap: 8px; margin-top: 10px; }
#musicBtn[aria-pressed="true"] { border-image-source: var(--f-wood-down); }
/* Music off: a red slash across the note */
#musicBtn { position: relative; }
#musicBtn[aria-pressed="false"]::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  background: var(--i-slash) 0 0 / 30px 30px no-repeat; image-rendering: pixelated; pointer-events: none;
}
/* Pixelify Sans runs wider than a display face, so the names step down on narrow phones to stay on one line */
@media (max-width: 420px) {
  .sign-names { font-size: 30px; }
}
@media (max-width: 379px) {
  .sign-names { font-size: 20px; }
}

/* ---------- Hotbar ---------- */
.hotbar {
  position: fixed; z-index: 10;
  left: 50%; bottom: calc(8px + var(--safe-b));
  transform: translateX(-50%);
  width: min(360px, calc(100% - 16px - var(--safe-l) - var(--safe-r)));
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  padding: 0;
}
.slot {
  --u: 2px;
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 66px; padding: 0;
  border-image-source: var(--f-inset);
  font-size: 0.85rem; font-weight: 600; line-height: 1;
  color: var(--text);
}
.slot > span[data-icon] { height: 36px; display: flex; align-items: flex-end; }
.slot:hover { border-image-source: var(--f-paper); }
.slot:active { transform: translateY(2px); }
.slot.near { outline: var(--u) solid var(--gold); outline-offset: 2px; }
.slot kbd {
  position: absolute; top: -4px; left: -2px;
  font: 600 0.7rem/1 var(--pixel); color: var(--text-soft);
}
@media (pointer: coarse) { .slot kbd { display: none; } }

/* ---------- Joystick ----------
   It appears where a finger touches the map and starts to slide (js/world/input.js sets left and top),
   and lets every touch through to the map underneath */
.joy {
  position: fixed; z-index: 10;
  width: 132px; height: 132px;
  display: none;
  background: var(--joy-base) 0 0 / 132px 132px no-repeat;
  image-rendering: pixelated;
  opacity: 0.5; /* see-through, so the map under the finger stays visible */
  pointer-events: none; user-select: none; -webkit-user-select: none;
}
.joy.floating { display: block; }
.joy-tick {
  position: absolute; left: 50%; top: 50%;
  width: 16px; height: 8px; margin: -4px 0 0 -8px;
  color: var(--tan);
  transform: translate(var(--tx), var(--ty));
}
/* One tick per walking direction, clockwise from up */
.joy-tick[data-tick="0"] { --tx: 0px; --ty: -44px; }
.joy-tick[data-tick="1"] { --tx: 31px; --ty: -31px; }
.joy-tick[data-tick="2"] { --tx: 44px; --ty: 0px; }
.joy-tick[data-tick="3"] { --tx: 31px; --ty: 31px; }
.joy-tick[data-tick="4"] { --tx: 0px; --ty: 44px; }
.joy-tick[data-tick="5"] { --tx: -31px; --ty: 31px; }
.joy-tick[data-tick="6"] { --tx: -44px; --ty: 0px; }
.joy-tick[data-tick="7"] { --tx: -31px; --ty: -31px; }
.joy-tick.on { color: var(--gold); }
.joy-knob {
  position: absolute; left: 50%; top: 50%;
  width: 54px; height: 54px; margin: -27px 0 0 -27px;
  background: var(--joy-knob) 0 0 / 54px 54px no-repeat;
  image-rendering: pixelated;
}
.joy.active .joy-knob { background-image: var(--joy-knob-on); }

/* ---------- Dialog hint and rug prompt ---------- */
.dialog {
  position: fixed; z-index: 12;
  /* Under the sign, whatever height long names give it; hud.js measures --hud-bottom */
  top: calc(var(--hud-bottom, calc(var(--safe-t) + 112px)) + 8px); left: 50%;
  width: max-content; max-width: min(440px, calc(100% - 24px));
  padding: 0 26px 0 6px;
  transform: translateX(-50%);
  font-weight: 500; line-height: 1.4;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s steps(3), visibility 0.2s;
}
.dialog.show { opacity: 1; visibility: visible; }
.dialog .caret { position: absolute; right: 0; bottom: 0; color: var(--rose); animation: blink 0.9s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.prompt {
  position: fixed; z-index: 11;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--bar-h) + var(--safe-b) + 20px);
  white-space: nowrap;
}
.prompt:active { transform: translate(-50%, 2px); }
.key {
  --u: 1px;
  display: inline-block; min-width: 20px; padding: 0 4px;
  border-image-source: var(--f-paper);
  font: 600 0.75rem/1.4 var(--pixel); color: var(--text);
}
@media (pointer: coarse) {
  .prompt .key { display: none; }
  .prompt { left: auto; right: calc(14px + var(--safe-r)); transform: none; bottom: calc(var(--bar-h) + var(--safe-b) + 54px); }
  .prompt:active { transform: translateY(2px); }
}

/* ---------- Cover: a letter addressed to the guest ---------- */
.cover {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: calc(20px + var(--safe-t)) 14px calc(20px + var(--safe-b));
  background: var(--dither);
  transition: opacity 0.4s steps(4), visibility 0.4s;
}
.cover.leaving { opacity: 0; visibility: hidden; }
/* Until main.js has filled in the text and wired the button, an empty letter would only mislead */
.booting .letter { visibility: hidden; }
.letter {
  width: 100%; max-width: 432px;
  padding: 14px 14px 18px;
  text-align: center;
}
.letter-lead { color: var(--text-soft); font-weight: 500; }
.names { font: 400 48px/1.05 var(--names); letter-spacing: 0; overflow-wrap: anywhere; }
.letter .names { margin: 8px 0 10px; }
.letter-date { font-weight: 500; }
.ornament { display: flex; align-items: center; gap: 10px; margin: 16px 6px; color: var(--rose); }
.ornament::before, .ornament::after {
  content: ''; flex: 1; height: var(--u);
  background: repeating-linear-gradient(90deg, var(--tan) 0 6px, transparent 6px 12px);
}
.to { color: var(--text-soft); font-weight: 500; }
.to strong { display: block; color: var(--text); font-size: 1.45rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.to strong.loading { font-size: 1rem; font-weight: 500; color: var(--text-soft); }
.letter-note { margin-top: 12px; color: var(--text-soft); font-size: 0.95rem; }
.letter .pbtn { margin-top: 18px; }

/* ---------- Config errors (only seen while setting up a copy) ---------- */
.config-errors {
  position: fixed; inset: 0; overflow: auto;
  padding: 24px;
  background: #fffaf6; color: #3d2f2a;
  font: 1rem/1.5 ui-monospace, monospace;
}
.config-errors h1 { font-size: 1.2rem; margin-bottom: 12px; }
.config-errors li { margin: 6px 0 0 20px; }