/* Debug panel - dev slide-out from the right edge (toggled via inline style.right) */
#debug-panel {
  position: fixed;
  top: 0;
  right: -440px;
  width: 420px;
  max-width: 90vw;
  height: 100dvh;
  background: var(--bg-panel);
  border-left: 1px solid var(--border-dim);
  box-shadow: -8px 0 24px rgba(0,0,0,0.45);
  z-index: 1000;
  overflow-y: auto;
  padding: 1rem 1.1rem;
  transition: right 0.3s ease;
}
.debug-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.08em;
  color: var(--accent-gold);
  border-bottom: 1px solid var(--border-dim);
  padding-bottom: 0.6rem; margin-bottom: 1rem;
}
.debug-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; }
.debug-close:hover { color: var(--text-primary); }
.debug-section { margin-bottom: 1.5rem; }
.debug-section-title {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); border-bottom: 1px solid var(--border-dim);
  padding-bottom: 0.35rem; margin-bottom: 0.75rem;
}
.debug-input {
  width: 64px; padding: 0.35rem 0.5rem; background: var(--bg-surface);
  border: 1px solid var(--border-dim); border-radius: var(--radius);
  color: var(--text-primary); font-family: var(--font-mono);
}
.debug-result { font-size: 0.75rem; color: var(--cond-health); margin-top: 0.5rem; min-height: 1em; }

/* --- Players of the Realm (menu panel) --- */
.panel-player {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.2rem;
  border-bottom: 1px solid var(--border-dim);
  font-size: 0.78rem;
}
.panel-player:last-child { border-bottom: none; }
.pp-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.45;
  flex-shrink: 0;
}
.pp-dot.online { background: var(--status-online); opacity: 1; box-shadow: 0 0 5px rgba(93, 168, 96, 0.7); }
.pp-name { color: var(--text-primary); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-you { color: var(--text-muted); font-weight: 400; font-size: 0.68rem; }
.pp-meta { margin-left: auto; color: var(--text-muted); font-size: 0.68rem; white-space: nowrap; }
.pp-online-txt { color: var(--status-online); font-weight: 600; }

/* OUT-OF-CHARACTER CHIPS (2026-08-07). The language a player reads the game in
   and whether they want to be written to, beside the name in Heirs of the Realm
   and in the character profile popup. Deliberately quiet: this is a label on a
   person, not a badge to compete for, and it sits inline with the name so it
   reads as part of it rather than as another column.
   `pp-rp-keen` / `pp-rp-quiet` come from `tone` in client/data/rp-statuses.json,
   so a status added in the Studio picks a side without touching this file. */
.pp-chip {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
  margin-left: 0.3rem;
  white-space: nowrap;
  vertical-align: 0.05rem;
  border: 1px solid var(--border-dim);
  color: var(--text-muted);
}
.pp-lang { font-family: var(--font-mono, monospace); }
.pp-rp { font-weight: 600; }
.pp-rp-keen  { color: var(--status-online); border-color: var(--status-online); opacity: 0.85; }
.pp-rp-quiet { color: var(--text-muted); opacity: 0.7; }

/* ONE BOX PER PLAYER (2026-08-07). Seventeen names in Heirs of the Realm were
   ten people and nothing said so. Characters of one account are framed together;
   a lone character is NOT framed, or the border would stop meaning anything.
   The account is never named - the frame says "one person" and nothing more. */
.pp-group {
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  padding: 0.1rem 0.3rem;
  margin: 0.3rem 0;
  background: rgba(127, 127, 127, 0.06);
}
/* The rows inside already carry their own separator; a doubled line at the top
   and bottom of the frame reads as a mistake. */
.pp-group .panel-player:first-child { border-top: none; }
.pp-group .panel-player:last-child { border-bottom: none; }
.pp-count {
  font-size: 0.7rem;
  color: var(--text-muted);
  padding: 0 0 0.4rem;
  margin-bottom: 0.2rem;
  border-bottom: 1px solid var(--border-dim);
}
.pp-count-sep { opacity: 0.5; }
.pp-count-hint { font-size: 0.72rem; opacity: 0.75; margin-top: 0.1rem; }