.dev-debug[hidden] { display: none !important; }
.dev-debug {
  position: fixed;
  z-index: 2147483000;
  top: 10px;
  right: 10px;
  width: min(430px, calc(100vw - 20px));
  max-height: calc(100vh - 20px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 8px;
  background: rgba(22, 23, 20, .96);
  box-shadow: 0 10px 34px rgba(0,0,0,.55);
  color: #e8eadf;
  font: 12px/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  text-align: left;
}
.dev-debug button { font: inherit; }
.dev-debug__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  background: #3b3d34;
}
.dev-debug__header > div:first-child { display: flex; align-items: baseline; gap: 8px; }
.dev-debug__header strong { color: #ffd36a; font-size: 14px; letter-spacing: .08em; }
.dev-debug__header small { color: #b9bdad; }
.dev-debug__actions { display: flex; gap: 5px; }
.dev-debug__actions button {
  min-height: 25px;
  padding: 2px 7px;
  border: 1px solid #6d705f;
  border-radius: 4px;
  background: #505346;
  color: #f3f4ed;
  cursor: pointer;
}
.dev-debug__actions button:hover { background: #666a58; }
.dev-debug__status {
  padding: 5px 10px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  color: #aeb5a1;
  background: rgba(0,0,0,.18);
}
.dev-debug__body { overflow: auto; padding: 7px; overscroll-behavior: contain; }
.dev-debug__section {
  margin: 0 0 6px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 5px;
  background: rgba(255,255,255,.025);
}
.dev-debug__section > summary {
  padding: 6px 8px;
  cursor: pointer;
  user-select: none;
  color: #f0cf75;
  font-weight: 700;
  background: rgba(255,255,255,.035);
}
.dev-debug__section-body { padding: 5px 8px 7px; }
.dev-debug__row {
  display: grid;
  grid-template-columns: minmax(105px, .75fr) minmax(0, 1.6fr);
  gap: 8px;
  padding: 2px 0;
  border-bottom: 1px dotted rgba(255,255,255,.07);
}
.dev-debug__row:last-child { border-bottom: 0; }
.dev-debug__row dt { color: #9fa693; }
.dev-debug__row dd { margin: 0; color: #f1f2ec; overflow-wrap: anywhere; }
.dev-debug__fighters { display: grid; gap: 4px; }
.dev-debug__fighter {
  display: grid;
  grid-template-columns: 1.3fr .6fr .8fr .9fr;
  gap: 5px;
  padding: 4px 5px;
  border-left: 3px solid #a55;
  background: rgba(255,255,255,.035);
}
.dev-debug__fighter.is-ally { border-left-color: #6c9d5b; }
.dev-debug__fighter span { color: #c4c8ba; }
.dev-debug__queue { margin: 0; padding-left: 22px; }
.dev-debug__queue li { margin: 2px 0; overflow-wrap: anywhere; }
.dev-debug__empty, .dev-debug__hint { color: #8f9685; }
.dev-debug__hint { padding: 4px 3px 1px; font-size: 11px; }
.dev-debug__hint code { color: #d6dcae; }
@media (max-width: 650px) {
  .dev-debug { top: 5px; right: 5px; width: calc(100vw - 10px); max-height: calc(100vh - 10px); }
  .dev-debug__fighter { grid-template-columns: 1fr 1fr; }
}