/* perf.css — the ADMIN frame-profiler button + panel (render-only overlay). Sibling of devlog.css; same palette, and
   deliberately docked to the RIGHT so the 📊 button never sits on top of the 🐞 one. */
#pfBtn {
  position: fixed; right: 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);
}
#pfBtn:hover, #pfBtn.on { opacity: 1; border-color: #3f6fae; }

#pfPanel {
  position: fixed; right: 0; top: 0; bottom: 0; z-index: 201; width: min(560px, 96vw); display: none; flex-direction: column;
  background: #070d17; border-left: 1px solid #28395a;
  font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace; font-size: 11px; color: #cdd9ea;
}
#pfPanel.on { display: flex; }
.pf-bar-top { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-bottom: 1px solid #1d2c45; color: #e8eef7; flex: none; }
.pf-bar-top b { margin-right: auto; font-size: 12px; }
.pf-bar-top button {
  border: 1px solid #2a3a59; background: #0e1828; color: #b8c7dc; border-radius: 5px; padding: 3px 7px; cursor: pointer; font: inherit;
}
.pf-bar-top button:hover { background: #16233a; color: #fff; }
.pf-flash { opacity: 0; transition: opacity .25s; color: #7ad17a; font-size: 10px; }
.pf-flash.on { opacity: 1; }

.pf-body { overflow: auto; padding: 8px 10px 24px; flex: 1 1 auto; }
.pf-empty { opacity: .6; padding: 20px 0; text-align: center; }

.pf-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.pf-big { font-size: 26px; font-weight: 700; line-height: 1; }
.pf-big i { font-size: 11px; font-style: normal; opacity: .6; margin-left: 3px; }
.pf-kv { font-size: 11px; }
.pf-kv b { display: block; opacity: .5; font-weight: 400; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }

/* one shared heat scale everywhere: green under a 60fps frame, amber approaching it, red over */
.cool { color: #6fce7f; } .warm { color: #e3c05a; } .hot { color: #f0716a; }
tr.cool td:first-child { border-left: 2px solid #6fce7f; } tr.warm td:first-child { border-left: 2px solid #e3c05a; }
tr.hot td:first-child { border-left: 2px solid #f0716a; }

.pf-verdict { border: 1px solid #24344f; background: #0c1524; border-radius: 6px; padding: 7px 9px; margin-bottom: 10px; line-height: 1.55; }
.pf-verdict div + div { margin-top: 3px; opacity: .92; }

.pf-t { width: 100%; border-collapse: collapse; margin: 4px 0 6px; }
.pf-t th { text-align: right; font-weight: 400; opacity: .45; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; padding: 2px 4px; border-bottom: 1px solid #1d2c45; }
.pf-t th:first-child, .pf-t th:nth-child(2) { text-align: left; }
.pf-t td { text-align: right; padding: 2px 4px; border-bottom: 1px solid #121d30; white-space: nowrap; }
.pf-t td:first-child { text-align: left; padding-left: 6px; }
.pf-t td:nth-child(2) { text-align: left; }
.pf-n { color: #e8eef7; }
.pf-bar { display: inline-block; width: 110px; height: 7px; background: #14203400; box-shadow: inset 0 0 0 1px #1d2c45; border-radius: 3px; vertical-align: middle; overflow: hidden; }
.pf-bar i { display: block; height: 100%; background: linear-gradient(90deg, #2f86d6, #6fa8e0); }
.pf-t u { text-decoration: none; opacity: .55; margin-left: 5px; font-size: 10px; }

h4 { margin: 12px 0 2px; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; opacity: .5; font-weight: 600; }
.pf-note { opacity: .45; font-size: 9.5px; line-height: 1.5; margin: 2px 0 4px; }
.pf-drv { padding: 2px 0; }
.pf-drv b { color: #e8eef7; font-weight: 600; }
.pf-drv u { text-decoration: none; opacity: .55; }
.pf-lt { line-height: 1.7; word-break: break-word; opacity: .85; }
.pf-lt u { text-decoration: none; opacity: .5; margin-left: 3px; }

@media (max-width: 620px) { #pfPanel { width: 100vw; } .pf-bar { width: 60px; } }

/* ---- the always-on corner readout (F3): a game-style fps counter that leads with the numbers a stutter shows up in.
   Top-LEFT, under the account bar, deliberately away from the 🐞/📊 buttons and the bottom HUD. pointer-events stay on
   so clicking it opens the full panel, but it never blocks the map: it is only as wide as its own text. */
#pfHud {
  position: fixed; left: 10px; top: 56px; z-index: 199; display: none; gap: 9px; align-items: baseline;
  padding: 4px 9px; border-radius: 7px; border: 1px solid #24344f; background: #0a1120;
  font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace; font-size: 10.5px; color: #9fb0c6;
  cursor: pointer; user-select: none; white-space: nowrap; max-width: calc(100vw - 20px); overflow: hidden;
}
#pfHud.on { display: flex; }
#pfHud b { font-size: 15px; font-weight: 700; line-height: 1; }
#pfHud b i { font-size: 9px; font-style: normal; opacity: .55; margin-left: 2px; }
#pfHud em { font-style: normal; font-weight: 600; color: #e8eef7; }
#pfHud .pf-dim { opacity: .5; }