/* Character preview page chrome. Deliberately plain and high-contrast — this
   screen exists to diagnose, not to look like the game. */

body.preview { background: #0a0d16; }

#pv-top { position: fixed; top: 22px; left: 26px; z-index: 5; pointer-events: none; }
#pv-title { font-size: 18px; letter-spacing: .28em; }
#pv-title span { color: var(--cyan); opacity: .7; }
#pv-hint { margin-top: 6px; font-size: 11px; letter-spacing: .1em; opacity: .45; max-width: 42ch; }

/* ── diagnostics ── */
#pv-diag {
  position: fixed; top: 22px; right: 26px; z-index: 5;
  min-width: 290px; padding: 14px 16px;
  background: rgba(5, 9, 20, .9);
  border: 1px solid rgba(56, 232, 255, .22);
  font-family: var(--mono); font-size: 11px;
}
#pv-diag .row {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 3px 0; border-bottom: 1px solid rgba(255, 255, 255, .05);
}
#pv-diag .row span { opacity: .45; letter-spacing: .1em; }
#pv-diag .row b { color: var(--cyan); font-weight: 400; text-align: right; }
#pv-diag .row b.bad { color: #ff5a6e; }
#pv-diag .row b.good { color: #6ef0a0; }

/* Live gait meter — if this bar is flat, the skeleton is not animating. */
#d-bar {
  height: 5px; margin-top: 9px; background: rgba(255, 255, 255, .08); overflow: hidden;
}
#d-bar i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--cyan-dim), var(--cyan));
  box-shadow: 0 0 10px rgba(56, 232, 255, .7);
}
#d-err {
  margin-top: 10px; color: #ff5a6e; font-size: 10px; line-height: 1.5;
  white-space: pre-wrap; max-width: 40ch;
}

/* ── controls ── */
#pv-controls {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 5;
  display: flex; gap: 22px; flex-wrap: wrap; justify-content: center;
}
#pv-controls .grp { display: flex; gap: 2px; }
.pv-btn {
  padding: 9px 16px; cursor: pointer;
  font-family: var(--hud-font); font-size: 11px; letter-spacing: .18em;
  color: #cfe9f5; text-decoration: none;
  background: rgba(10, 18, 34, .85);
  border: 1px solid rgba(56, 232, 255, .2);
  transition: background .14s, color .14s, border-color .14s;
}
.pv-btn:hover { background: rgba(20, 36, 62, .95); }
.pv-btn.on {
  background: linear-gradient(180deg, rgba(56, 232, 255, .22), rgba(56, 232, 255, .07));
  border-color: rgba(56, 232, 255, .6); color: var(--cyan);
}