/* Dev console (src/ui/dev-console.js), in the EthrA UI grammar of ethra-ui.css: a dark glass slab in
   the white pixel double frame, a framed tab label, rounded sans, the yellow focus accent. It sits
   over everything (title, HUD, pause menu, Practice panel) because backtick opens it anywhere. */
.dev-console{position:fixed;inset:0;z-index:9000;display:flex;align-items:flex-start;justify-content:center;padding:4vh 16px 0;
 background:linear-gradient(rgba(8,10,12,.55),rgba(8,10,12,.18) 70%,transparent);pointer-events:auto;font-family:var(--ui)!important;color:var(--ef-white)}
.dev-console[hidden]{display:none}
.dev-console *{font-family:var(--ui)!important;box-sizing:border-box}
.dc-panel{width:min(980px,100%);max-height:min(78vh,720px);display:flex;flex-direction:column;border-image:var(--ef-frame-deep) 6 fill/6px stretch;padding:8px 12px 10px}
.dc-head{display:flex;align-items:center;gap:12px;margin:-2px 0 8px}
.dc-tab{font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.dc-hint{flex:1;color:var(--ef-mute);font:700 12px/1.2 var(--ui)}
.dc-x{width:32px;height:32px;border:6px solid;border-image:var(--ef-frame) 6 fill/6px stretch;background:none;color:var(--ef-white);font:900 16px/1 var(--ui);cursor:pointer;padding:0}
.dc-x:hover,.dc-x:focus-visible{border-image-source:var(--ef-frame-on);outline:none}
.dc-body{display:flex;gap:10px;min-height:0;flex:1}
.dc-sections{display:flex;flex-direction:column;gap:4px;flex:0 0 132px}
.dc-sections button{text-align:left;min-height:34px;padding:2px 12px;border:6px solid;border-image:var(--ef-frame) 6 fill/6px stretch;background:none;color:var(--ef-dim);font:800 14px/1.1 var(--ui);cursor:pointer}
.dc-sections button:hover,.dc-sections button:focus-visible{color:var(--ef-white);border-image-source:var(--ef-frame-on);outline:none}
.dc-sections button.on{color:var(--ef-yellow);border-image-source:var(--ef-frame-on);text-shadow:var(--ef-shadow)}
.dc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;min-height:0}
.dc-filter input{width:100%;height:30px;padding:0 10px;background:var(--ef-glass-deep);border:1px solid rgba(247,244,236,.28);color:var(--ef-white);font:700 13px/1 var(--ui)}
.dc-actions{display:flex;flex-wrap:wrap;align-content:flex-start;gap:5px;max-height:34vh;overflow:auto;padding:2px 2px 4px;scrollbar-width:thin}
.dc-actions button{min-height:30px;padding:2px 11px;border:5px solid;border-image:var(--ef-frame) 6 fill/5px stretch;background:none;color:var(--ef-white);font:700 13px/1.1 var(--ui);cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-actions button:hover,.dc-actions button:focus-visible{border-image-source:var(--ef-frame-on);color:var(--ef-yellow);outline:none}
.dc-group{flex:0 0 100%;margin:6px 0 0;color:var(--ef-mute);font:800 11px/1 var(--ui);text-transform:uppercase;letter-spacing:.1em}
.dc-empty{color:var(--ef-mute);font:700 13px var(--ui);padding:6px}
.dc-log{flex:1;min-height:90px;max-height:24vh;overflow:auto;background:rgba(10,12,15,.72);border:1px solid rgba(247,244,236,.16);padding:6px 9px;font:700 12.5px/1.45 ui-monospace,Consolas,monospace!important;white-space:pre-wrap;scrollbar-width:thin}
.dc-log .dc-line{font-family:ui-monospace,Consolas,monospace!important}
.dc-line.cmd{color:var(--ef-mute)}.dc-line.ok{color:var(--ef-white)}.dc-line.err{color:#f08a7c}.dc-line.info{color:var(--ef-blue)}
.dc-input{position:relative;display:flex;align-items:center;gap:8px;margin-top:8px;padding:0 10px;height:38px;background:var(--ef-glass-deep);border:1px solid rgba(247,244,236,.36)}
.dc-input:focus-within{border-color:var(--ef-yellow)}
.dc-prompt{color:var(--ef-yellow);font:900 16px/1 var(--ui)}
.dc-input input{flex:1;min-width:0;height:100%;background:none;border:0;outline:none;color:var(--ef-white);font:700 14px/1 ui-monospace,Consolas,monospace!important}
.dc-sugg{position:absolute;left:24px;bottom:42px;margin:0;padding:4px 0;list-style:none;min-width:220px;max-width:calc(100% - 30px);background:rgba(15,17,21,.96);border:1px solid rgba(247,244,236,.38);box-shadow:0 6px 18px rgba(0,0,0,.45)}
.dc-sugg[hidden]{display:none}
.dc-sugg li{padding:3px 12px;font:700 13px/1.35 ui-monospace,Consolas,monospace!important;color:var(--ef-dim);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-sugg li.on,.dc-sugg li:hover{color:var(--ef-yellow);background:rgba(247,244,236,.08)}
@media (max-width:640px){.dc-body{flex-direction:column}.dc-sections{flex:none;flex-direction:row;flex-wrap:wrap}.dc-sections button{min-height:30px;font-size:12px;padding:0 8px}.dc-hint{display:none}.dc-panel{max-height:88vh}}
.dev-grapple-mark{position:fixed;left:-9px;top:-9px;width:18px;height:18px;z-index:40;pointer-events:none;border:2px solid var(--ef-white);border-radius:50%;box-shadow:0 0 0 2px rgba(0,0,0,.55);display:none}
.dev-grapple-mark::after{content:'';position:absolute;left:6px;top:6px;width:2px;height:2px;background:var(--ef-white)}
.dev-grapple-mark.ledge{border-color:var(--ef-yellow)}.dev-grapple-mark.ledge::after{background:var(--ef-yellow)}
body.photo .dev-grapple-mark{display:none!important}