/* ────────────────────────────────────────
   DEBUG PANEL (Beta — temporary)
   Controlled by DEBUG_PANEL_ENABLED in player.js.  This file is the whole
   of the panel's styling: every selector is #debug-* or .debug-*, and
   nothing in style.css refers to it.  It is linked AFTER style.css (it uses
   that file's custom properties and was its last block, so the cascade is
   the one it always had).  When the debug feature is retired: delete this
   file and its <link> in index.html.
──────────────────────────────────────── */
#debug-btn {
  position: absolute;
  top: 16px; left: 16px;
  /* Must sit ABOVE #debug-panel (z-index 31) so the user can click ✕ CLOSE
     while the panel is open.  Originally specced at 30 — that put it below
     the panel and made it unreachable once opened. */
  z-index: 32;
  background: var(--surface);
  border: 1px solid var(--border-hi);
  border-radius: 100px;
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-dim);
  cursor: pointer;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 1px 0 rgba(255,255,255,0.07) inset, 0 4px 16px rgba(0,0,0,0.4);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}

#debug-btn:hover {
  color: var(--text-mid);
  border-color: rgba(255,255,255,0.2);
}

#debug-btn.debug-btn-open {
  color: var(--amber);
  border-color: rgba(255,145,0,0.4);
}

#debug-panel {
  position: absolute;
  inset: 0;
  z-index: 31;
  background: rgba(7, 8, 15, 0.92);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  display: none;                  /* JS sets to flex when open */
  flex-direction: column;
  padding: 52px 16px 16px 16px;   /* top room for the DEBUG button */
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
}

#debug-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-hi);
  flex-shrink: 0;
}

#debug-title {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text);
}

#debug-copy-btn {
  background: var(--surface);
  border: 1px solid var(--border-hi);
  border-radius: 8px;
  color: var(--text-mid);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 5px 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

#debug-copy-btn:hover {
  color: var(--text);
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.04);
}

#debug-copy-btn.copied {
  color: var(--green);
  border-color: rgba(0,217,100,0.4);
}

#debug-copy-btn.failed {
  color: var(--red);
  border-color: rgba(255,69,69,0.4);
}

#debug-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

#debug-body::-webkit-scrollbar { width: 4px; }
#debug-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.debug-block {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.debug-block:last-child { border-bottom: none; padding-bottom: 0; }

.debug-block h4 {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.debug-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.debug-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
}

.debug-key {
  color: var(--text-mid);
  flex-shrink: 0;
}

.debug-val {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
  word-break: break-all;
}

.debug-val.ok   { color: var(--green); }
.debug-val.warn { color: var(--yellow); }
.debug-val.bad  { color: var(--red); }

.debug-warn-row {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255,69,69,0.45);
  border-radius: 6px;
  background: rgba(255,69,69,0.08);
  color: var(--red);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  font-weight: 500;
}

#debug-log {
  min-height: 180px;
  max-height: 40dvh;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-mid);
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

#debug-log::-webkit-scrollbar { width: 4px; }
#debug-log::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }