#layoutEditor{position:fixed;inset:0;z-index:100;background:#10222a;font:12px system-ui;color:#e7f0ed;touch-action:none}
#layoutEditor[hidden]{display:none!important}
.layoutBackdrop,.layoutItems,.layoutZones{position:absolute;inset:0;width:100%;height:100%}
.layoutBackdrop{opacity:.65;pointer-events:none}.layoutZones{pointer-events:none}.layoutZones[hidden]{display:none}
.layoutZone{position:absolute;top:20%;height:71%;padding:8px;border:1px dashed #8ddad5aa;display:flex;align-items:flex-end;justify-content:center;font-size:10px;text-align:center;background:#3caea512}
.layoutZone.left{left:0;width:34%}.layoutZone.right{right:0;width:34%}.layoutZone.center{left:34%;width:32%;border-color:#f0bb6e88;background:#f0bb6e0a;color:#f0cda0}
.layoutItems{pointer-events:none}.layoutItem{position:absolute;pointer-events:auto;touch-action:none;border:1px solid #96b2b1;background:#142b35dc;color:#e2eeee;border-radius:6px;padding:3px;font:11px system-ui;min-width:0;min-height:0;text-transform:none;box-shadow:none;display:grid;place-items:center;cursor:grab;overflow:hidden}
.layoutItem.selected{border:2px solid #ffc880;box-shadow:0 0 0 3px #f0bb6e44;z-index:3}.layoutItem:focus-visible{outline:3px solid #fff}
.layoutItem img{height:65%;max-width:85%;pointer-events:none}.layoutItem small{font:9px system-ui;color:#c5d5d3;pointer-events:none}.layoutItem span{pointer-events:none}
.layoutBar{position:absolute;left:8px;right:8px;top:8px;background:#08141bf2;border:1px solid #658781;padding:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;z-index:5;max-height:44vh;overflow:auto;border-radius:8px;touch-action:pan-y}
.layoutBar strong{color:#f0c790}.layoutBar button{min-height:38px;min-width:0;font:11px system-ui;padding:8px 10px;background:#24424a;border:1px solid #8aa7a4;text-transform:none;box-shadow:none}.layoutBar button[data-layout=save]{background:#496b43}.layoutBar .layoutFields{display:flex;gap:10px;flex-wrap:wrap;width:100%;align-items:center}.layoutFields label{display:flex;gap:6px;align-items:center;min-width:0}.layoutBar select{min-width:0;max-width:230px;font:12px system-ui}.layoutBar input{min-width:0;width:105px;padding:0;accent-color:#f0bb6e}.layoutHelp{font:11px system-ui;margin:0;width:100%;color:#bfcecb}
.layoutBar.folded .layoutFields,.layoutBar.folded .layoutHelp,.layoutBar.folded>strong,.layoutBar.folded>.layoutProfile,.layoutBar.folded>[data-layout=reset]{display:none}.layoutBar.folded{left:auto;right:8px;width:auto;max-width:95vw;padding:5px}
body.layout-editing #pause{visibility:hidden}body.layout-editing #hud,body.layout-editing #touchControls,body.layout-editing #doorHud,body.layout-editing #fpsCounter,body.layout-editing #mapWrap,body.layout-editing #toast{visibility:hidden!important}
body.layout-measuring #hud,body.layout-measuring #touchControls{display:block!important;visibility:hidden!important}
body.layout-measuring #bossWrap,body.layout-measuring #team,body.layout-measuring #mapWrap,body.layout-measuring #doorHud,body.layout-measuring #fpsCounter,body.layout-measuring #weaponNotice,body.layout-measuring #respawn,body.layout-measuring #combatInfo{display:block!important;visibility:hidden!important}
/* Separate capture regions: no touch is shared between movement, aim and central fire. */
body.touch-mode #touchMoveZone{left:0;right:auto;width:34%;top:20%;bottom:9%}
body.touch-mode #touchAimZone{left:auto;right:0;width:34%;top:20%;bottom:9%}
#touchPointZone{position:absolute;left:34%;width:32%;top:20%;bottom:9%;pointer-events:auto;touch-action:none;z-index:0}
#touchPointZone[hidden]{display:none!important}
#pointFireMark{position:fixed;width:24px;height:24px;border:2px solid #ffe8b0;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:13;box-shadow:0 0 8px #000}
#pointFireMark[hidden]{display:none}
@media(max-width:560px){.layoutBar{gap:5px;padding:7px;max-height:37vh}.layoutBar strong{font-size:12px}.layoutBar button{padding:7px;font-size:10px}.layoutFields label{flex-wrap:wrap;font-size:11px}.layoutBar select{max-width:185px}.layoutBar input{width:85px}}

.layoutItem[hidden]{display:none!important}

/* A transformed ancestor changes the reference frame of fixed HUD children. */
html body #statusbar{left:0;right:0;margin-left:auto;margin-right:auto;transform:none}
.layoutItem{padding:0;background:transparent;border:0;border-radius:0;overflow:visible;outline:1px dashed #96b2b180;display:block}
.layoutItem>small{position:absolute;left:0;bottom:0;max-width:100%;background:#08141bd9;font:9px system-ui;z-index:2;opacity:.8}
.layoutItem.selected{border:0;outline:2px solid #ffc880}
.layoutItem img{max-width:none;height:auto}

.layoutItem>small{display:none}.layoutItem.selected>small,.layoutItem:focus-visible>small{display:block}
