/* 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: var(--fs-micro); 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: var(--fs-fine); 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: var(--fs-fine);
}
.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: var(--fs-micro); }
.pp-meta { margin-left: auto; color: var(--text-muted); font-size: var(--fs-micro); 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: var(--fs-micro);
  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: var(--fs-micro);
  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: var(--fs-micro); opacity: 0.75; margin-top: 0.1rem; }

/* THE GUESTS CARD (maggie, 2026-10-08: "make this a bit nicer to look at") -
   renderDebugGuests in js/debug-panel.js. Three figures, a funnel and two
   source lists; the bars are the shared .bar-track.thin / .bar-fill. */
#debug-guests { font-size: var(--fs-small); }
.dg-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin: 0.4rem 0 0.8rem; }
.dg-tile { border: 1px solid var(--border-dim); border-radius: 4px; background: var(--bg-surface); padding: 0.55rem 0.6rem; text-align: center; }
.dg-tile-n { font-family: var(--font-serif); font-variant-numeric: lining-nums tabular-nums; font-size: 1.7rem; line-height: 1.1; color: var(--accent-gold); }
.dg-tile-l { color: var(--text-primary); letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--fs-micro); margin-top: 0.2rem; }
.dg-tile-s, .dg-muted { color: var(--text-muted); font-size: var(--fs-micro); }
.dg-live { margin: -0.3rem 0 0.8rem; }
.dg-live-row { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; padding: 0.2rem 0; border-bottom: 1px dotted var(--border-dim); }
.dg-live-page { color: var(--text-primary); }
.dg-block { margin-bottom: 0.8rem; min-width: 0; }
.dg-head { color: var(--accent-gold); letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--fs-micro); margin-bottom: 0.35rem; }
.dg-bar-row { display: grid; grid-template-columns: minmax(6rem, 38%) 1fr 4.2rem; align-items: center; gap: 0.6rem; padding: 0.18rem 0; }
.dg-bar-l { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-bar-n { color: var(--text-primary); font-variant-numeric: tabular-nums; text-align: right; min-width: 2rem; }
.dg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 640px) { .dg-cols { grid-template-columns: 1fr; } .dg-tile-n { font-size: 1.35rem; } }