/* =====================================================================
 * 第五轮：调试工作台。
 * 沿用 styles.css 里模拟编辑器那套零件（.ed / .pn / .tabs / .stage-win / .stage-cv /
 * .cursor / .mock-menu / .kbd-hint / .sd-caption），这里只加积木的发光、调试悬浮窗、
 * 舞台角上的帧率仪表这几样。
 * =================================================================== */

.dbg-ed { aspect-ratio: 16 / 7.4; --bs: 0.62; }
.dbg-ed .ed-body { position: absolute; inset: 34px 0 34px; display: grid; grid-template-columns: 1fr 390px; gap: 5px; padding: 5px; }
.dbg-ed .ed-top .mi.on { color: #fff; }
.dbg-ed .ws .bk-stack { position: absolute; }
.dbg-ed .ws .bk { transition: filter 0.5s; }

/* ---- 积木的光：按耗时描边、正在运行、停下 ---------------------------- */
.bk.heat-hot { filter: drop-shadow(0 0 1.5px #ff6f91) drop-shadow(0 0 5px rgb(255 111 145 / 95%)) drop-shadow(0 0 10px rgb(255 111 145 / 50%)); }
.bk.heat-warm { filter: drop-shadow(0 0 1.5px #ffb454) drop-shadow(0 0 4px rgb(255 180 84 / 75%)); }
.bk.run { filter: drop-shadow(0 0 1.5px var(--acc-hi)) drop-shadow(0 0 6px rgb(45 140 255 / 95%)) drop-shadow(0 0 12px rgb(45 140 255 / 45%)); }
.bk.paused { filter: drop-shadow(2px 0 0 var(--gold)) drop-shadow(-2px 0 0 var(--gold)) drop-shadow(0 2px 0 var(--gold)) drop-shadow(0 -2px 0 var(--gold)); }
.dbg-arrow { position: absolute; z-index: 3; width: 0; height: 0; border: 6px solid transparent; border-left: 9px solid var(--acc-hi); filter: drop-shadow(0 0 4px var(--acc)); opacity: 0; transition: opacity 0.3s, top 0.35s var(--ease), left 0.35s var(--ease); }
.dbg-arrow.show { opacity: 1; }
.dbg-bp { position: absolute; z-index: 3; width: 11px; height: 11px; border-radius: 50%; background: #ff4c4c; border: 2px solid #fff; box-shadow: 0 0 0 2px rgb(255 76 76 / 40%); opacity: 0; scale: 0.4; transition: opacity 0.25s, scale 0.3s var(--spring); }
.dbg-bp.show { opacity: 1; scale: 1; }
.dbg-ring { position: absolute; z-index: 2; border: 2px solid var(--acc-hi); border-radius: 8px; opacity: 0; pointer-events: none; }
.dbg-ring.go { animation: dbgring 0.9s var(--ease) 2; }
@keyframes dbgring { 0% { opacity: 0; scale: 0.9; } 30% { opacity: 1; } 100% { opacity: 0; scale: 1.25; } }

/* ---- 舞台角上的帧率仪表 --------------------------------------------- */
.dbg-stage { right: 12px; top: 12px; width: 38%; max-width: 240px; }
.dbg-hud { position: absolute; left: 6px; top: 6px; display: grid; grid-template-columns: auto auto auto; gap: 1px 9px; align-items: baseline; padding: 5px 8px 6px; font: 10px/1.2 var(--font-mono); color: #fff; background: rgb(22 25 31 / 88%); border-radius: 6px; }
.dbg-hud b { font-size: 15px; font-weight: 600; color: var(--green); transition: color 0.3s; }
.dbg-hud b.bad { color: var(--coral); }
.dbg-hud small { font-size: 9px; color: var(--e-dim); }
.dbg-hud .bars { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 1px; height: 14px; margin-top: 3px; }
.dbg-hud .bars i { flex: 1; height: var(--h, 30%); background: var(--green); border-radius: 1px 1px 0 0; transition: height 0.3s, background 0.3s; }
.dbg-hud .bars i.over { background: var(--coral); }

/* ---- 调试悬浮窗 ---------------------------------------------------- */
.dbg-win { position: relative; border-color: var(--e-line-2); box-shadow: 0 20px 50px rgb(0 0 0 / 50%); opacity: 0; translate: 0 8px; transition: opacity 0.35s, translate 0.35s var(--ease); }
.dbg-win.show { opacity: 1; translate: 0 0; }
.dbg-title { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; font-size: 11.5px; font-weight: 600; color: #fff; background: var(--e-head); border-bottom: 1px solid var(--e-line); flex: none; }
.dbg-title .sp { flex: 1; }
.dbg-title i { width: 12px; height: 12px; border-radius: 3px; background: rgb(255 255 255 / 15%); }
.dbg-tabs { overflow: hidden; }
.dbg-tabs .tab { padding: 0 7px; font-size: 10.5px; transition: color 0.3s; }
.dbg-bar { display: flex; align-items: center; gap: 5px; height: 34px; padding: 0 8px; border-bottom: 1px solid var(--e-line); flex: none; }
.dbg-bar .sp { flex: 1; }
.dbg-btn { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; font-size: 10.5px; color: var(--paper); background: var(--e-input); border-radius: 5px; white-space: nowrap; transition: background 0.3s, color 0.3s; }
.dbg-btn kbd { padding: 0 4px; font-size: 9px; }
.dbg-btn.rec i { width: 7px; height: 7px; border-radius: 50%; background: #ff4c4c; }
.dbg-btn.rec.on { color: #ff8a8a; background: rgb(255 76 76 / 18%); }
.dbg-btn.rec.on i { animation: dbgrec 1s steps(1) infinite; }
@keyframes dbgrec { 50% { opacity: 0.25; } }
.dbg-btn.go { color: #fff; background: #45b747; }
.dbg-page { position: absolute; inset: 0; padding: 8px; overflow: hidden; display: none; }
.dbg-page.on { display: block; }
.dbg-empty { display: grid; gap: 4px; padding: 28px 12px; text-align: center; font-size: 11px; line-height: 1.5; color: var(--e-dim); }
.dbg-empty b { font-size: 12px; color: #fff; }
.dbg-empty[hidden] { display: none; }
.dbg-sum { margin: 0 0 6px; font-size: 10.5px; color: var(--e-dim); }
.dbg-cards { display: grid; gap: 6px; }
.dbg-card { position: relative; display: grid; gap: 2px; padding: 7px 9px 7px 13px; font-size: 10.5px; line-height: 1.45; color: var(--e-dim); background: var(--e-panel); border: 1px solid var(--e-line); border-radius: 7px; opacity: 0; translate: 0 8px; transition: opacity 0.4s, translate 0.4s var(--ease); }
.dbg-card.in { opacity: 1; translate: 0 0; }
.dbg-card::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 2px 2px 0; background: var(--c); }
.dbg-card.bad { --c: var(--coral); } .dbg-card.warn { --c: var(--gold); } .dbg-card.ok { --c: var(--green); }
.dbg-card b { font-size: 11px; font-weight: 600; color: #fff; }
.dbg-card em { justify-self: start; margin-top: 3px; padding: 2px 8px; font-style: normal; font-size: 10px; color: var(--acc-hi); background: var(--acc-soft); border-radius: 4px; transition: background 0.2s; }
.dbg-card em.hi { background: var(--acc); color: #fff; }
.dbg-ctl { display: flex; gap: 5px; margin-bottom: 6px; }
.dbg-h { margin: 8px 0 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--e-dim); }
.dbg-row { display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 8px; font-size: 10.5px; color: var(--paper); background: var(--e-panel); border: 1px solid var(--e-line); border-radius: 6px; }
.dbg-row .dot { width: 9px; height: 9px; border-radius: 50%; background: #ff4c4c; flex: none; }
.dbg-row code { padding: 1px 5px; font-size: 10px; color: var(--gold); background: var(--e-input); border-radius: 4px; }
.dbg-row b { margin-left: auto; font-weight: 500; color: var(--green); }
.dbg-paused { opacity: 0; transition: opacity 0.35s; }
.dbg-paused.show { opacity: 1; }
.dbg-stack { display: grid; gap: 3px; font-size: 10.5px; color: var(--e-dim); }
.dbg-stack span { padding: 4px 8px; border-radius: 5px; background: var(--e-panel); }
.dbg-stack span.cur { color: #fff; background: rgb(255 180 84 / 16%); border-left: 3px solid var(--gold); }
.dbg-var { display: flex; justify-content: space-between; align-items: center; height: 26px; padding: 0 8px; font-size: 10.5px; color: var(--paper); border-bottom: 1px solid var(--e-line); }
.dbg-var b { min-width: 44px; padding: 0 6px; line-height: 18px; text-align: right; font-family: var(--font-mono); font-weight: 500; color: #fff; background: var(--e-input); border: 1px solid transparent; border-radius: 4px; transition: border-color 0.25s; }
.dbg-var b.edit { border-color: var(--acc); }

/* ---- 编辑器下面的说明卡 ------------------------------------------- */
.dbg-grid { margin-top: 2.5rem; }
.dbg-grid .how-it li code { padding: 0.05em 0.4em; font-size: 0.85em; color: var(--gold); background: rgb(255 180 84 / 10%); border-radius: 4px; }

@media (max-width: 860px) {
  body:not(.fit-mode) .dbg-ed { aspect-ratio: auto; height: 560px; }
  body:not(.fit-mode) .dbg-ed .ed-body { grid-template-columns: 1fr; grid-template-rows: 1fr 1.3fr; }
  body:not(.fit-mode) .dbg-stage { display: none; }
}