/* Cube Blast editor addon UI (dev-only). High z so it overlays the game. */
/* editor mode: game is NOT pushed/offset — it renders exactly like the real game (centered, full
   resolution) so positions in the editor match in-game 1:1. Editor chrome lives on the LEFT side
   (over the empty side margin), never over the top of the game. */
.ed-bar{ position:fixed; top:0; left:0; bottom:0; width:120px; z-index:100000;
  background:#11161fee; color:#e8eef7; display:flex; flex-direction:column; align-items:stretch; gap:5px; padding:8px 7px;
  font:600 12px/1 system-ui,sans-serif; box-shadow:1px 0 6px #0008; overflow-y:auto; }
.ed-bar b{ color:#ffd56a; margin:0 0 4px; letter-spacing:1px; text-align:center; }
.ed-bar .ed-btn{ width:100%; }
.ed-btn{ background:#243044; color:#dfe7f2; border:1px solid #3a4a63; border-radius:6px;
  padding:5px 8px; font:600 12px system-ui,sans-serif; cursor:pointer; white-space:nowrap; }
.ed-btn:hover{ background:#2f3e57; }
.ed-btn.on{ background:#3b73d6; border-color:#5b93f6; color:#fff; }
.ed-stage{ color:#9fb6d6; padding:0 4px; min-width:64px; text-align:center; }
.ed-btn.ed-disabled{ opacity:.4; }
.ed-btn.ed-disabled:hover{ background:#243044; }

.ed-panel{ position:fixed; top:8px; right:8px; width:268px; max-height:calc(100vh - 16px); overflow-y:auto;
  z-index:100000; background:#141a24f2; color:#dfe7f2; border:1px solid #2c3a52; border-radius:10px;
  padding:8px 10px 12px; font:12px system-ui,sans-serif; box-shadow:0 6px 24px #0009; }
.ed-sec{ color:#ffd56a; font-weight:700; margin:10px 0 4px; border-bottom:1px solid #2c3a52; padding-bottom:3px; }
.ed-row{ display:flex; align-items:center; gap:6px; margin:3px 0; }
.ed-lbl{ flex:0 0 78px; color:#aebfd6; font-size:11px; }
.ed-range{ flex:1; min-width:0; accent-color:#5b93f6; }
.ed-num{ flex:0 0 52px; background:#0e131c; color:#e8eef7; border:1px solid #2c3a52; border-radius:4px; padding:2px 4px; font:11px system-ui; }
.ed-tip{ color:#7f94b3; font-size:10px; margin-top:8px; line-height:1.5; }

#ed-toast{ position:fixed; bottom:14px; left:50%; transform:translateX(-50%) translateY(20px);
  z-index:100001; background:#1b2740ee; color:#fff; padding:8px 16px; border-radius:8px; border:1px solid #3b73d6;
  font:600 13px system-ui; opacity:0; transition:opacity .2s, transform .2s; pointer-events:none; }
#ed-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* voxel-edit sub-panel */
.ed-vpanel{ position:fixed; top:8px; right:8px; width:268px; z-index:100000;
  background:#141a24f6; color:#dfe7f2; border:1px solid #3b73d6; border-radius:10px;
  padding:8px 10px 12px; font:12px system-ui,sans-serif; box-shadow:0 6px 24px #0009; }
.ed-pal{ display:flex; flex-wrap:wrap; gap:5px; margin:6px 0; }
.ed-sw{ width:26px; height:26px; border-radius:5px; cursor:pointer; border:2px solid #0006; box-shadow:0 0 0 1px #0008 inset; }
.ed-sw.on{ border-color:#ffd56a; box-shadow:0 0 6px #ffd56a; }
.ed-vinfo{ color:#9fb6d6; font-size:11px; margin:6px 0; }

/* preview mode: hide editor chrome */
body.ed-previewing .ed-bar, body.ed-previewing .ed-panel, body.ed-previewing .ed-vpanel{ display:none; }
/* 미리보기 중에만 보이는 '편집으로 돌아가기' 플로팅 버튼 */
.ed-backbtn{ display:none; position:fixed; top:10px; left:50%; transform:translateX(-50%); z-index:100002;
  padding:9px 16px; border:none; border-radius:11px; background:#ff5b5b; color:#fff; font-weight:800; font-size:14px;
  cursor:pointer; box-shadow:0 3px 10px rgba(0,0,0,.4); }
.ed-backbtn:active{ transform:translateX(-50%) translateY(2px); }
body.ed-previewing .ed-backbtn{ display:block; }

/* 2D 리소스 에디터 — 드래그/리사이즈/회전 기즈모 + 트리 + 드롭존 */
.ed-ui-outline{ position:fixed; z-index:99998; border:2px dashed #ffd56a; box-shadow:0 0 0 1px #0008;
  background:rgba(255,213,106,.10); cursor:move; touch-action:none; display:none; transform-origin:center center; }
.ed-ui-handle{ position:absolute; width:18px; height:18px; touch-action:none; }
.ed-h-scale{ right:-9px; bottom:-9px; border-radius:3px; background:#3b73d6; border:2px solid #fff; cursor:nwse-resize; }
.ed-h-rot{ right:-11px; top:-11px; width:20px; height:20px; border-radius:50%; background:#22c55e; border:2px solid #fff; cursor:grab; }
.ed-h-rot::after{ content:'↻'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:700; }

.ed-uibar{ position:fixed; top:8px; left:128px; width:248px; max-height:calc(100vh - 16px); overflow-y:auto; z-index:100000;
  background:#141a24f6; color:#dfe7f2; border:1px solid #3b73d6; border-radius:10px;
  padding:8px 10px 12px; font:12px system-ui,sans-serif; box-shadow:0 6px 24px #0009; }
.ed-uibtn{ display:inline-block; margin:4px 0 2px; padding:5px 9px; background:#243044; color:#dfe7f2;
  border:1px solid #3a4a63; border-radius:6px; font:11px system-ui; cursor:pointer; }
.ed-uibtn.on{ background:#3b73d6; border-color:#5b93f6; color:#fff; }
.ed-num2{ flex:0 0 50px; background:#0e131c; color:#e8eef7; border:1px solid #2c3a52; border-radius:4px; padding:2px 4px; font:11px system-ui; }

/* element tree */
.ed-tree{ max-height:240px; overflow-y:auto; margin:4px 0 8px; border:1px solid #25324a; border-radius:6px; background:#0e131c66; }
.ed-tree-grp{ color:#7f94b3; font-size:10px; font-weight:700; padding:5px 8px 2px; letter-spacing:.5px; }
.ed-tree-item{ display:flex; align-items:center; gap:6px; padding:3px 8px; font-size:11px; color:#cdd9ec; cursor:pointer; border-radius:4px; }
.ed-tree-item:hover{ background:#1c2740; }
.ed-tree-item.on{ background:#3b73d6; color:#fff; }
.ed-tree-dot{ flex:0 0 7px; width:7px; height:7px; border-radius:50%; background:#33415c; }
.ed-tree-dot.on{ background:#ffd56a; box-shadow:0 0 4px #ffd56a; }

/* image drop zone */
.ed-drop{ margin:8px 0; padding:10px; border:2px dashed #3a4a63; border-radius:8px; text-align:center;
  background:#0e131c66; cursor:pointer; color:#aebfd6; font-size:11px; }
.ed-drop.over{ border-color:#5b93f6; background:#1c2740; }
.ed-drop-hint{ line-height:1.6; }
.ed-drop-thumb{ max-width:80px; max-height:60px; border-radius:6px; background:#222; display:block; margin:0 auto 5px; }
.ed-drop-x{ color:#9fb6d6; font-size:10px; }

body.ed-previewing .ed-ui-outline, body.ed-previewing .ed-uibar{ display:none !important; }