/* Performance diagnostic window (diag/PerfPanel.js): a small floating card, top left, above the game UI. */
.pd-panel { position: fixed; left: 12px; top: 12px; z-index: var(--z-debug); width: min(420px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; padding: 10px 12px; border-radius: 8px; background: rgba(12, 14, 26, 0.94); border: 1px solid rgba(160, 170, 255, 0.35); color: #e8eaff; font: var(--fs-strong)/1.4 GfFont, system-ui, sans-serif; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); }
.pd-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.pd-x { background: none; border: 0; color: inherit; font-size: calc(20px * var(--ui-text)); cursor: pointer; }
.pd-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.pd-tile { padding: 4px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); }
.pd-tile span { display: block; font-size: var(--fs-small); opacity: 0.7; }
.pd-tile b { font-size: var(--fs-title); font-variant-numeric: tabular-nums; }
.pd-bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); margin-bottom: 6px; }
.pd-bar i { display: block; height: 100%; width: 0; border-radius: 2px; background: #7c8cff; }
.pd-status { margin: 0 0 8px; opacity: 0.8; }
.pd-v { margin: 6px 0; padding: 6px 8px; border-radius: 6px; border-left: 3px solid #888; background: rgba(255, 255, 255, 0.05); }
.pd-v.bad { border-color: #ff6b6b; } .pd-v.warn { border-color: #ffc14d; } .pd-v.good { border-color: #5be08a; }
.pd-spikes { margin: 6px 0; padding-left: 18px; font-size: var(--fs-body); }
.pd-btns { display: flex; gap: 8px; margin: 8px 0; }
.pd-report { margin: 0; max-height: 220px; overflow: auto; padding: 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.35); font-size: var(--fs-small); white-space: pre-wrap; user-select: text; }
.pd-badge { position: fixed; left: 12px; bottom: 12px; z-index: var(--z-debug); padding: 3px 9px; border-radius: 12px; background: rgba(12, 14, 26, 0.8); border: 1px solid rgba(160, 170, 255, 0.35); color: #cfd3ff; font: var(--fs-body)/1.4 GfFont, system-ui, sans-serif; pointer-events: none; }
.pd-launch { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 24px)); }