/* --- Modal & panel base (needed for open/close to work) --- */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:20px;
  overflow:auto;
  z-index:1000;
}
.modal.open{ display:flex; }

.panel{
  width:min(1024px,100%);
  background:var(--panel2, #1a1a22);
  border:1px solid var(--border, #252533);
  border-radius:12px;
  overflow:hidden;
}

.panel header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.1));
  border-bottom:1px solid var(--border, #252533);
}

.toolbar{
  display:flex;
  gap:8px;
  padding:10px 12px;
  border-bottom:1px solid var(--border, #252533);
  background:var(--panel, #121219);
}

/* Hide the embedded LPC iframe (headless builder) */
iframe#lpcFrame{
  position:absolute;
  left:-99999px;
  top:auto;
  width:1px;
  height:1px;
  border:0;
  opacity:0;
  pointer-events:none;
}
.panel .content {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  height: 80vh;
  max-height: 80vh;
  overflow: hidden; /* keeps overall modal neat */
}

.panel .content{
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  height:80vh;
  max-height:80vh;
  overflow:hidden;           /* keep overall modal tidy */
}

/* right side scrolls */
.panel .right{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:12px;
  overflow:auto;             /* ✅ scroll here */
}

/* the preview viewport itself also scrolls */
.previewBox{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  flex:1 1 auto;
  min-height:0;              /* ✅ allows child to scroll inside flex parent */
  min-width:0;
  overflow:auto;             /* ✅ scrollbars appear as needed */
  width:100%;
  background:#111;
  border:1px solid var(--border, #252533);
  border-radius:8px;
}

/* never scale the spritesheet; draw at native px */
.previewBox canvas,
#sheetPreview,
.no-stretch img,
.no-stretch canvas{
  image-rendering:pixelated;
  display:block;
  width:auto !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
  border:2px solid #444;
  border-radius:8px;
  background:#0003;
}

.no-stretch img,
.no-stretch canvas {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
}

#sheetPreview {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
}