/* editor.css */
html,body{
  margin:0;
  padding:0;
  width:100vw;
  height:auto;
  overflow-x:hidden;
  overflow-y:auto;
  background:#000;
  color:#d7ffd9;
  font-family:"Pixellari",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

body{position:relative;}

*{box-sizing:border-box}

.topbar{
  position:fixed;
  left:0;right:0;top:0;
  height:34px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:4px 8px;
  background:#040704;
  border-bottom:1px solid #0f3;
  z-index:400;
}

.brand{
  color:#6cff6c;
  text-shadow:0 0 6px rgba(0,255,0,.25);
  letter-spacing:1px;
  font-size:14px;
  white-space:nowrap;
}
.brand .ver{opacity:.8;font-size:12px;margin-left:6px}

.lvl-tabs{
  display:flex;
  align-items:center;
  gap:6px;
  flex:1 1 auto;
  overflow:auto hidden;
  padding-bottom:2px;
}

.ltab{
  display:flex;
  align-items:center;
  gap:6px;
  padding:2px 8px;
  border:1px solid #0f3;
  background:#000;
  color:#bfffbf;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
  box-shadow:0 0 0 2px #000;
}
.ltab.active{
  background:#062006;
  box-shadow:0 0 0 2px #000, 0 0 10px rgba(0,255,0,.15);
}
.ltab .x{
  display:inline-grid;
  place-items:center;
  width:14px;height:14px;
  border:1px solid #0f3;
  background:#000;
  color:#0f3;
  font-size:12px;
  line-height:12px;
}
.ltab.add{
  font-weight:700;
  padding:2px 10px;
}

.topbtns{display:flex;align-items:center;gap:8px}
.sep{width:1px;height:18px;background:#0f3;opacity:.5;margin:0 4px}

.tbtn{
  height:22px;
  padding:0 10px;
  border:1px solid #0f3;
  background:#000;
  color:#bfffbf;
  cursor:pointer;
  font-family:inherit;
  font-size:12px;
}
.tbtn:hover{background:#062006}
.tbtn.play{border-color:#7ff; color:#dff}
.tbtn.new{border-color:#f3f; color:#ffd9ff}
.tbtn:active{transform:translateY(1px)}

.root{
  position:relative;
  margin-top:34px;
  display:flex;
  overflow:visible;
}

.stage{
  flex:1 1 auto;
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding:10px;
}

.stage-inner{
  position:relative;
  width:820px;
  height:820px;
}

.stage-hud{
  position:absolute;
  left:6px;
  top:6px;
  z-index:50;
  font-size:12px;
  color:#9cff9c;
  text-shadow:0 0 6px rgba(0,255,0,.2);
}
.hudline{margin-bottom:2px}
.hudk{color:#6cff6c;margin-right:6px}

.gridwrap{
  position:absolute;
  left:0;top:0;right:0;bottom:0;
  display:grid;
  place-items:center;
}

.grid{
  position:relative;
  background:#050912;
  box-shadow:0 0 0 6px #000, 0 0 0 7px #0f3, 10px 10px 0 rgba(0,0,0,.55);
  image-rendering:pixelated;
}

.cell{
  position:relative;
  width:16px;height:16px;
  border:1px solid rgba(32,60,40,.35);
}
.cell .ti,.cell .oi{position:absolute;inset:0}
.cell.sel{
  outline:2px solid #ff4cff;
  outline-offset:-2px;
}

.dragviz{
  position:absolute;
  border:2px dashed rgba(120,255,160,.95);
  background:rgba(120,255,160,.08);
  pointer-events:none;
  z-index:200;
  display:none;
}
.dragviz.sel{
  border-color:rgba(255,80,255,.95);
  background:rgba(255,80,255,.08);
}

.spawnmk{
  position:relative;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
}
.spawnmk::before{
  content:"";
  position:absolute;inset:1px;
  background:rgba(50,255,140,0.14);
  box-shadow:inset 0 0 0 1px rgba(50,255,140,0.45);
}
.spawnmk::after{
  content:"";
  position:absolute;left:50%;top:50%;
  width:10px;height:10px;
  transform:translate(-50%,-50%);
  background:
    linear-gradient(rgba(50,255,140,0) 45%, rgba(50,255,140,0.95) 45%, rgba(50,255,140,0.95) 55%, rgba(50,255,140,0) 55%),
    linear-gradient(90deg, rgba(50,255,140,0) 45%, rgba(50,255,140,0.95) 45%, rgba(50,255,140,0.95) 55%, rgba(50,255,140,0) 55%);
}

.lvlprops{
  position:relative;
  margin-top:860px;
  margin-left:8px;
  width:360px;
  z-index:80;
}

.side{
  width:460px;
  padding:10px 10px 10px 0;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:auto;
}

.win{
  border:1px solid #0f3;
  background:#020402;
  box-shadow:0 0 0 3px #000, 8px 8px 0 rgba(0,0,0,.55);
}
.winbar{
  height:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 6px;
  background:#0d3f0d;
  color:#caffca;
  border-bottom:1px solid #0f3;
  font-size:12px;
  letter-spacing:1px;
}
.wint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wmin{
  width:22px;height:16px;
  border:1px solid #0f3;
  background:#000;
  color:#0f3;
  cursor:pointer;
  font-family:inherit;
  font-size:12px;
}
.winbody{padding:8px}
.win.min .winbody{display:none}

.secth{
  font-size:12px;
  margin:2px 0 6px 0;
  color:#7dff7d;
  letter-spacing:1px;
  text-transform:uppercase;
}

.pal{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:8px;
}
.pitem{
  width:38px;height:38px;
  border:1px solid #0f3;
  background:#000;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.pitem .pi{
  width:16px;height:16px;
}
.pitem.active{
  border-color:#ff4cff;
  box-shadow:0 0 10px rgba(255,80,255,.2);
}

.row{
  display:flex;
  align-items:center;
  gap:6px;
  margin:4px 0;
}
.row label{min-width:78px;font-size:12px;color:#a8ffa8}
.row .lab{min-width:70px;font-size:12px;color:#a8ffa8}
.row .val{flex:1;min-width:0;font-size:12px;color:#d7ffd9}
.row input[type="text"], .row input[type="number"], .row select{
  flex:1 1 auto;
  background:#000;
  border:1px solid #0f3;
  color:#d7ffd9;
  padding:2px 6px;
  font-family:inherit;
  font-size:12px;
  height:22px;
}
.row input[type="color"]{
  width:84px;height:22px;
  padding:0;border:1px solid #0f3;background:#000;
}
.row input[type="range"]{flex:1}
.row .zv{
  width:26px;
  text-align:center;
  border:1px solid #0f3;
  background:#000;
  color:#d7ffd9;
  height:22px;
  display:grid;
  place-items:center;
}

.cb{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:#d7ffd9;
  cursor:pointer;
  user-select:none;
}
.cb input{accent-color:#00ff55}

.btn{
  height:22px;
  padding:0 10px;
  border:1px solid #0f3;
  background:#000;
  color:#d7ffd9;
  cursor:pointer;
  font-family:inherit;
  font-size:12px;
}
.btn:hover{background:#062006}
.btn.ghost{border-color:#5f5; color:#bfffbf}
.btn.danger{border-color:#f55;color:#ffd1d1}
.btn:active{transform:translateY(1px)}

.blk{
  display:none;
  margin-top:8px;
  padding-top:8px;
  border-top:1px dashed rgba(0,255,60,.45);
}

.ta{
  width:100%;
  min-height:74px;
  background:#000;
  border:1px solid #0f3;
  color:#d7ffd9;
  font-family:inherit;
  font-size:12px;
  resize:vertical;
  padding:6px;
}

.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:6px 0;
}
.tab{
  padding:2px 8px;
  border:1px solid #0f3;
  background:#000;
  color:#bfffbf;
  cursor:pointer;
  user-select:none;
  font-size:12px;
}
.tab.on{
  border-color:#ff4cff;
  background:#1a001a;
  color:#ffd9ff;
}

.code{
  width:100%;
  height:220px;
  border:1px solid #0f3;
  background:#000;
}

.log{
  width:100%;
  height:120px;
  border:1px solid #0f3;
  background:#000;
  color:#bfffbf;
  font-family:monospace;
  font-size:12px;
  padding:8px;
  resize:vertical;
}

.tools{margin-top:8px}
.toolrow{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0}

.modal{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.65);
  z-index:500;
}
.modalbox{
  width:320px;
  border:1px solid #0f3;
  background:#000;
  box-shadow:0 0 0 3px #000, 10px 10px 0 rgba(0,0,0,.6);
}
.modalh{
  padding:6px 10px;
  background:#0d3f0d;
  border-bottom:1px solid #0f3;
  color:#caffca;
  letter-spacing:1px;
}
.modalb{padding:10px}

/* force the playtest overlay to pin to the viewport (even if some other CSS tries to override it) */
#pt.pt{
  position:fixed !important;
  top:34px !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  z-index:450 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  overflow:hidden;
}

#pt.pt .pt-overlay{
  position:absolute;
  inset:0;
  background:#000 url("../assets/bg/ew.png") 0 0 repeat;
  background-size:auto;
  opacity:.85;
}

#pt.pt .pt-page{
  position:relative !important;
  top:0 !important;
  bottom:auto !important;
  left:auto !important;
  right:auto !important;
  width:600px;
  height:600px;
  z-index:2;
  box-shadow:0 0 0 6px #000, 0 0 0 7px #0f3, 10px 10px 0 rgba(0,0,0,.55);
  overflow:hidden;
  isolation:isolate;
  image-rendering:pixelated;
}

#pt.pt .pt-page::before{
  content:"";
  position:absolute;
  inset:0;
  box-shadow:inset 0 0 0 6px #000;
  pointer-events:none;
  z-index:3;
}

.crt{
  position:relative;
  color:#fefce8;
  background:#050608;
}
.crt-inner{
  position:absolute;
  inset:0;
  padding:16px;
  z-index:1;
}
.crt::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  z-index:2;
  background:
    linear-gradient(rgba(15,12,12,0) 50%,rgba(0,0,0,0.32) 50%),
    linear-gradient(90deg,rgba(255,0,0,0.09),rgba(0,255,0,0.04),rgba(0,0,255,0.09));
  background-size:100% 2px,2.5px 100%;
  mix-blend-mode:screen;
}
.crt::after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  z-index:2;
  background:rgba(8,6,6,0.25);
  opacity:0;
  animation:crt-flicker .14s infinite;
}

@keyframes crt-flicker{
  0%{opacity:.15;}
  20%{opacity:.55;}
  40%{opacity:.08;}
  60%{opacity:.7;}
  80%{opacity:.2;}
  100%{opacity:.5;}
}

.pt-viewport{position:relative;width:100%;height:100%;overflow:hidden;}
.pt-cam{position:absolute;left:0;top:0;will-change:transform;}
.pt-scale{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;}
.pt-tiles,.pt-objs{position:absolute;left:0;top:0;}
.pt-tile,.pt-obj{position:absolute;width:16px;height:16px;image-rendering:pixelated;}
#pt-pl{
  position:absolute;
  width:16px;height:16px;
  pointer-events:none;
  z-index:50;
  image-rendering:pixelated;
}

.pt-ui{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:60;
}
.pt-ui-box{
  width:420px;
  border:1px solid #0f3;
  background:#000;
  box-shadow:0 0 0 3px #000, 10px 10px 0 rgba(0,0,0,.6);
  padding:10px;
}
.pt-ui-title{color:#7dff7d;font-size:14px;letter-spacing:1px;margin-bottom:6px}
.pt-ui-text{color:#d7ffd9;font-size:12px;white-space:pre-wrap;line-height:1.2}
.pt-ui-hint{color:#9cff9c;font-size:12px;margin-top:8px;opacity:.85}

.x{opacity:.8}