/* pixel.ignlab — editor chrome */

#board, #overlay {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#boardWrap {
  /* checkerboard "transparent" backdrop behind the artwork */
  background-color: #2b2f3a;
  background-image:
    linear-gradient(45deg, #1f232c 25%, transparent 25%),
    linear-gradient(-45deg, #1f232c 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1f232c 75%),
    linear-gradient(-45deg, transparent 75%, #1f232c 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

#stage { background: #0b0e14; cursor: crosshair; }
#stage.panning { cursor: grabbing; }

/* Tool buttons */
.tool-btn {
  display: flex; align-items: center; justify-content: center;
  height: 38px; font-size: 16px; line-height: 1;
  background: #1e293b; border: 1px solid #334155; border-radius: 6px;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.tool-btn:hover { background: #273449; }
.tool-btn.active { background: #0e7490; border-color: #22d3ee; }

.act-btn {
  background: #1e293b; border: 1px solid #334155; border-radius: 6px;
  padding: 6px 8px; font-size: 13px; cursor: pointer; transition: background .15s;
}
.act-btn:hover { background: #273449; }
.act-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Layers */
.layer-op {
  width: 26px; height: 26px; font-size: 13px; line-height: 1;
  background: #1e293b; border: 1px solid #334155; border-radius: 5px; cursor: pointer;
}
.layer-op:hover { background: #273449; }
.layer-row {
  display: flex; align-items: center; gap: 6px;
  background: #1e293b; border: 1px solid #334155; border-radius: 6px;
  padding: 5px 7px; cursor: pointer; font-size: 13px;
}
.layer-row.active { border-color: #22d3ee; background: #0e3a45; }
.layer-row .vis { background: none; border: none; cursor: pointer; font-size: 13px; opacity: .9; padding: 0; }
.layer-row .lname { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #cbd5e1; }
.layer-row .op { width: 54px; accent-color: #22d3ee; }

/* Animation timeline */
.frame-cell {
  position: relative; flex: 0 0 auto; cursor: pointer;
  border: 2px solid #334155; border-radius: 6px; background: #0b0e14;
  width: 64px; height: 64px; overflow: hidden;
}
.frame-cell.active { border-color: #d946ef; }
.frame-cell canvas { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.frame-cell .fnum {
  position: absolute; top: 1px; left: 3px; font-size: 10px; color: #cbd5e1;
  text-shadow: 0 0 3px #000; font-family: ui-monospace, monospace;
}

/* Palette swatches */
.swatch {
  width: 100%; aspect-ratio: 1; border-radius: 4px; cursor: pointer;
  border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.swatch:hover { border-color: #64748b; }
.swatch.active { border-color: #22d3ee; }