/* devlog.css — the diagnostics log button + panel (render-only overlay). */
#dlBtn {
  position: fixed; left: 10px; bottom: 10px; z-index: 200; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid #2a3a59; background: #101b2e; color: #cdd9ea; font-size: 17px; cursor: pointer; opacity: .55;
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
#dlBtn:hover { opacity: 1; }
#dlBtn[data-n]:not([data-n="0"])::after {
  content: attr(data-n); position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: 8px; background: #2f86d6; color: #fff; font: 700 9px 'Chakra Petch','Segoe UI',system-ui,sans-serif;
  line-height: 16px; box-sizing: border-box;
}

#dlPanel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 201; height: 46vh; display: none; flex-direction: column;
  background: #070d17f2; border-top: 1px solid #28395a; backdrop-filter: blur(2px);
  font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
}
#dlPanel.show { display: flex; }
.dl-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid #1d2c45; color: #e8eef7; }
.dl-head b { font: 700 13px 'Chakra Petch','Segoe UI',system-ui,sans-serif; margin-right: 4px; }
.dl-head .dl-search { flex: 1; max-width: 280px; background: #0c1626; border: 1px solid #28395a; border-radius: 6px; color: #cdd9ea; font: 500 12px ui-monospace,monospace; padding: 5px 8px; outline: none; }
.dl-head .dl-flash { color: #8fe0bb; font: 600 11px 'Chakra Petch',sans-serif; opacity: 0; transition: opacity .2s; min-width: 60px; }
.dl-head .dl-flash.on { opacity: 1; }
.dl-head button[data-dl] { background: #16233a; border: 1px solid #28395a; border-radius: 6px; color: #cdd9ea; font: 600 11px 'Chakra Petch',sans-serif; padding: 5px 9px; cursor: pointer; }
.dl-head button[data-dl]:hover { background: #1e3052; color: #fff; }
.dl-head button[data-dl].on { background: #2f86d6; color: #fff; border-color: #2f86d6; }
.dl-head button[data-dl="close"] { font-size: 16px; padding: 2px 8px; }

.dl-body { flex: 1; overflow-y: auto; padding: 4px 0; font-size: 11.5px; line-height: 1.5; }
.dl-row { display: flex; gap: 8px; padding: 1px 10px; white-space: pre-wrap; word-break: break-word; border-top: 1px solid #ffffff08; }
.dl-row:hover { background: #ffffff08; }
.dl-t { color: #5f7290; flex: 0 0 auto; }
.dl-c { color: #8da2be; flex: 0 0 92px; font-weight: 700; }
.dl-m { color: #d3deec; flex: 1; }
.dl-m i { color: #7f93b0; font-style: normal; }
/* category tints */
.dl-row.dl-net .dl-c { color: #5cc8ff; }
.dl-row.dl-social .dl-c { color: #8fe0bb; }
.dl-row.dl-signal .dl-c { color: #e0a23a; }
.dl-row.dl-queue .dl-c { color: #c79bff; }
.dl-row.dl-party .dl-c { color: #ff9ecb; }
.dl-row.dl-api .dl-c { color: #7fd4c0; }
.dl-row.dl-clan .dl-c { color: #b8a6ff; }
.dl-row.dl-game .dl-c { color: #ffd27a; }
.dl-row.dl-chat .dl-c { color: #9fd0a0; }
.dl-row.dl-lobby .dl-c { color: #88b6e6; }
.dl-row.dl-account .dl-c { color: #d0a6ff; }
.dl-row.dl-error .dl-c, .dl-row.dl-console .dl-c { color: #ff7a6b; }
.dl-row.dl-error .dl-m, .dl-row.dl-console .dl-m { color: #ffb3a6; }