/* top-hud.css — the top-right "ranger's command shelf".
 *
 * One fixed flex column that stacks three things with deterministic
 * spacing (no magic top:NN coordinates, no overlap):
 *   1. #hud-status   — connection dot + state text + live player count + clock
 *   2. #minimap      — the 220x220 compass map (flows in the column)
 *   3. #hud-controls — Lobby / Logout / Leave Dungeon + a single Tools (gear)
 *                      toggle that reveals the dev/mod tools popover
 *
 * Consumes the brass/forest --rf-* custom properties declared in
 * index.html's :root. Linked by both index.html (live game) and
 * web/dev/top-hud-preview.html (iteration harness) so the two never drift.
 */

#top-right-hud {
  position: fixed;
  right: 14px;
  top: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;   /* right edges of status / map / controls line up */
  gap: 8px;
  z-index: 40;
  /* The shelf itself is inert; only the interactive chips opt back in so
     clicks meant for the world (which the map sits over) pass through. */
  pointer-events: none;
  font: 600 11px/1 'EB Garamond', Georgia, serif;
}

/* ---- Status bar -----------------------------------------------------
 * Same brass shelf as the survival HUD but quieter. A leading dot
 * (::before) conveys websocket state at a glance; the player count and
 * wall clock ride on the right. */
#hud-status {
  width: 220px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: linear-gradient(180deg, var(--rf-forest-2) 0%, var(--rf-forest-1) 100%);
  border: 1px solid var(--rf-brass-edge-dim);
  border-radius: 5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--rf-text-dim);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 220, 150, 0.08);
}
#hud-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6a6a6a;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.55);
  flex-shrink: 0;
}
/* The connection-state classes (is-on / is-pending / is-off) are written
   by net.onState() in index.html, which REPLACES className wholesale — so
   nothing structural may live on #hud-status that needs to persist. */
#hud-status.is-on::before {
  background: #9be29b;
  box-shadow: 0 0 8px rgba(155, 226, 155, 0.85);
}
#hud-status.is-pending::before {
  background: var(--rf-gold);
  box-shadow: 0 0 8px rgba(255, 216, 102, 0.85);
}
#hud-status.is-off::before {
  background: #c64a4a;
  box-shadow: 0 0 6px rgba(200, 80, 80, 0.65);
}
#hud-status .online-text { color: #9be29b; flex: 1; }
#hud-status.is-off .online-text { color: #ff8a8a; }
#hud-status.is-pending .online-text { color: var(--rf-gold); }

/* Live concurrent-player count, fed by the /stats/server poll in
   hud-and-stats.js. A figure glyph + tabular number so it reads as
   "N players online" without spelling it out. Hidden until populated. */
#hud-online-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--rf-parchment);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
#hud-online-count svg { width: 11px; height: 11px; opacity: 0.7; }
#hud-online-count.is-empty { display: none; }

#hud-status .clock {
  color: var(--rf-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

/* ---- Minimap --------------------------------------------------------
 * Now flows in the column instead of being pinned with its own
 * coordinates. Soft drop shadow only; the brass bezel is painted on the
 * canvas itself. */
#minimap {
  width: 220px;
  height: 220px;
  background: transparent;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.65));
  pointer-events: none;
}

/* ---- Control row ----------------------------------------------------
 * Lobby / Logout always; Leave Dungeon while in a dungeon; a gear that
 * toggles the dev/mod tools popover for staff. Right-aligned under the
 * map, wrapping if it runs out of room. */
#hud-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: stretch;
  gap: 6px;
  width: 220px;   /* same width as the map / status bar — one shelf */
}
/* Labeled controls share the shelf width evenly so the row reads as a
   deliberate segmented bar, not chips floating in the corner. The gear
   (inside #hud-tools) stays compact and is excluded. */
#hud-controls > .hud-btn {
  flex: 1 1 0;
  justify-content: center;
}

/* Shared chip silhouette for every control. Per-action accents are layered
   on top via the id selectors below — the base stays neutral brass so the
   row reads as one coherent set, not three unrelated buttons. */
.hud-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  background: linear-gradient(180deg, var(--rf-forest-2) 0%, var(--rf-forest-1) 100%);
  border: 1px solid var(--rf-brass-edge-dim);
  border-radius: 4px;
  color: var(--rf-text-dim);
  font: 600 10px/1 'EB Garamond', Georgia, serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 220, 150, 0.07);
  transition: background 160ms, color 160ms, border-color 160ms, filter 160ms;
}
.hud-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.hud-btn:hover {
  border-color: var(--rf-brass-edge);
  color: var(--rf-text);
}
.hud-btn.hud-btn-icon { padding: 0 8px; }   /* icon-only (gear) */

/* Lobby — gold, the friendly "go home" escape hatch. */
#lobby-link.hud-btn { color: rgba(255, 216, 102, 0.85); }
#lobby-link.hud-btn:hover {
  background: rgba(255, 216, 102, 0.14);
  border-color: rgba(255, 216, 102, 0.65);
  color: var(--rf-gold);
}
/* Logout — neutral at rest, warm-red only on hover so a destructive
   action announces itself without shouting from the resting state. */
#logout-link.hud-btn:hover {
  background: rgba(255, 100, 100, 0.16);
  border-color: rgba(255, 100, 100, 0.55);
  color: #ffcaca;
}
/* Leave Dungeon — keeps the one retained semantic color (violet) because
   it echoes the graveyard portal swirl. Hidden unless in a dungeon. */
#leave-dungeon-btn { display: none; }
body.is-in-dungeon #leave-dungeon-btn { display: inline-flex; }
#leave-dungeon-btn.hud-btn {
  color: #e0caff;
  border-color: rgba(160, 110, 220, 0.45);
}
#leave-dungeon-btn.hud-btn:hover {
  background: rgba(120, 80, 180, 0.22);
  border-color: rgba(160, 110, 220, 0.75);
  color: #f0e4ff;
}
#leave-dungeon-btn:disabled { opacity: 0.5; cursor: default; }

/* ---- Tools toggle + popover ----------------------------------------
 * One gear collapses the developer (DEV) and moderator (MOD) entry points
 * that used to float as two separate colored buttons. Gear is visible only
 * to staff; DEV inside is dev-only, MOD is mod-only. */
#hud-tools { position: relative; pointer-events: auto; display: none; }
body.is-dev #hud-tools,
body.is-mod #hud-tools { display: inline-flex; }

#hud-tools-toggle.hud-btn { color: var(--rf-parchment-dim); }
#hud-tools.open #hud-tools-toggle.hud-btn {
  border-color: var(--rf-brass-edge);
  color: var(--rf-gold);
}
#hud-tools.open #hud-tools-toggle svg { transform: rotate(45deg); }
#hud-tools-toggle svg { transition: transform 200ms; }

#hud-tools-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  min-width: 132px;
  background: linear-gradient(180deg, var(--rf-forest-2) 0%, var(--rf-forest-3) 100%);
  border: 1px solid var(--rf-brass-edge);
  border-radius: 5px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6);
  z-index: 41;
}
#hud-tools.open #hud-tools-pop { display: flex; }

/* DEV / MOD items: full-width rows inside the popover, faint role tint
   (blue / red) kept only as a thin left border so they're distinguishable
   but no longer dominate the screen corner. */
#hud-tools-pop #mapvc-btn,
#hud-tools-pop #mod-btn {
  display: block;
  width: 100%;
  padding: 6px 10px;
  text-align: left;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--rf-brass-edge-dim);
  border-radius: 4px;
  color: var(--rf-text-dim);
  font: 700 10px/1 'JetBrains Mono', ui-monospace, Consolas, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms, border-color 160ms, color 160ms;
}
#hud-tools-pop #mapvc-btn { border-left: 2px solid rgba(120, 160, 220, 0.7); }
#hud-tools-pop #mapvc-btn:hover {
  background: rgba(60, 80, 110, 0.4);
  border-color: rgba(120, 160, 220, 0.6);
  color: #d6e4ff;
}
#hud-tools-pop #mod-btn { border-left: 2px solid rgba(220, 90, 90, 0.7); }
#hud-tools-pop #mod-btn:hover {
  background: rgba(110, 50, 50, 0.4);
  border-color: rgba(220, 90, 90, 0.6);
  color: #ffcaca;
}
/* DEV is dev-only, MOD is mod-only even within the staff popover. */
#hud-tools-pop #mapvc-btn { display: none; }
#hud-tools-pop #mod-btn { display: none; }
body.is-dev #hud-tools-pop #mapvc-btn { display: block; }
body.is-mod #hud-tools-pop #mod-btn { display: block; }