* { box-sizing: border-box; }
body {
  margin: 0; font: 13px/1.4 system-ui, sans-serif;
  background: #11141c; color: #d8def0; height: 100vh;
  display: flex; flex-direction: column;
}

/* ---- top bar ---- */
#top {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px;
  background: #232838; border-bottom: 1px solid #0006; flex: 0 0 auto;
}
#top .brand { color: #8fb0ff; font-size: 15px; margin-right: 6px; }
#top .spacer { flex: 1; }
.inline { display: inline-flex; align-items: center; gap: 4px; color: #aeb6cf; }
#levelSel { background: #1b1f2a; color: #eef; border: 1px solid #3a4666; border-radius: 4px; padding: 3px; }
button.mini { width: auto; padding: 5px 9px; }

/* dropdown (export) */
.dd { position: relative; }
.dd > summary { list-style: none; cursor: pointer; background: #34406a; color: #eef; border-radius: 4px; padding: 5px 9px; }
.dd > summary::-webkit-details-marker { display: none; }
.dd[open] > summary { background: #5b78d8; }
.ddmenu {
  position: absolute; right: 0; top: 110%; z-index: 5; width: 230px;
  background: #2a3146; border: 1px solid #44569a; border-radius: 6px; padding: 8px; box-shadow: 0 6px 20px #0008;
}

/* ---- main 3-pane ---- */
#main { flex: 1; display: flex; min-height: 0; }
#tools {
  flex: 0 0 84px; background: #1c212e; padding: 8px 6px; display: flex; flex-direction: column; gap: 4px;
  border-right: 1px solid #0006; overflow: auto;
}
#tools .tool { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; font-size: 11px; }
#tools .tool span { font-size: 18px; line-height: 1; }
#toolhelp { margin-top: 8px; }

#center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 0; padding: 12px; }
#canvas { image-rendering: pixelated; width: min(640px, 100%); height: auto; aspect-ratio: 4 / 3; border: 1px solid #333; touch-action: none; }
.status { color: #aeb6cf; font-size: 12px; min-height: 16px; text-align: center; }
.status b { color: #ffd23f; }

#panel { flex: 0 0 268px; background: #232838; padding: 10px; overflow: auto; border-left: 1px solid #0006; }

/* ---- generic widgets ---- */
h2, h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #8fb0ff; margin: 14px 0 6px; }
h3:first-child { margin-top: 0; }
button { background: #34406a; color: #eef; border: 0; border-radius: 4px; padding: 6px 8px; margin: 2px 0; cursor: pointer; width: 100%; }
button:hover { background: #44569a; }
button.on { background: #5b78d8; }
.row { display: flex; gap: 4px; align-items: center; margin: 3px 0; }
.row label { flex: 1; }
.row.wrap { flex-wrap: wrap; }
input[type=number] { width: 56px; }
input[type=text] { width: 100%; }
textarea { background: #1b1f2a; color: #cfe; border: 1px solid #3a4666; border-radius: 4px; }
select { background: #1b1f2a; color: #eef; border: 1px solid #3a4666; border-radius: 4px; padding: 3px; }
.hint { color: #8a93ad; font-size: 11px; }
.hint code { color: #b9c4e6; }

/* asset / tileset strips */
.strip { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; width: 40px; }
.chip canvas { width: 40px; height: 40px; image-rendering: pixelated; background: #0008; border: 2px solid #0006; border-radius: 4px; display: block; cursor: pointer; }
.chip.sel canvas { border-color: #ffd23f; }
.chip .name { font-size: 9px; color: #9aa4bd; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip .del { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; padding: 0; border-radius: 50%; background: #8a3a4a; font-size: 11px; line-height: 16px; }

/* tile palette */
.tiles { display: flex; flex-wrap: wrap; gap: 3px; }
.tiles canvas { width: 26px; height: 26px; image-rendering: pixelated; border: 2px solid transparent; cursor: pointer; background: #0006; }
.tiles .sel { border-color: #ffd23f; }

/* layer + list rows */
.lrow { display: flex; gap: 4px; align-items: center; margin: 2px 0; }
.lrow .pick { text-align: left; }
.lrow .pick.on { background: #5b78d8; }
.lrow .del { width: 26px; flex: 0 0 26px; background: #5a3340; }
.lrow .del:hover { background: #8a3a4a; }
.objbtn { text-align: left; }

/* colour swatches */
.swatch { display: flex; gap: 6px; align-items: center; margin: 3px 0; }
.swatch input[type=color] { width: 34px; height: 26px; padding: 0; border: 0; background: none; }
.swatch label { flex: 1; cursor: pointer; }
.swatch .del { width: 26px; flex: 0 0 26px; background: #5a3340; }

/* flag checkboxes + legend */
#flagbox label { display: inline-flex; align-items: center; gap: 3px; margin: 0 8px 4px 0; }
.flag { display: inline-block; width: 11px; height: 11px; }
.flag.solid { color: #ff4d4d; } .flag.coin { color: #ffd23f; }
.flag.goal { color: #45e08a; } .flag.hazard { color: #ff5fff; }
details.help { margin: 6px 0; }
details.help summary { cursor: pointer; color: #8fb0ff; font-size: 11px; }

/* ---- narrow / phone: stack ---- */
@media (max-width: 820px) {
  #main { flex-direction: column; }
  #tools { flex: 0 0 auto; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid #0006; }
  #tools .tool { flex: 1 0 auto; flex-direction: row; }
  #toolhelp { flex: 1 0 100%; }
  #panel { flex: 0 0 auto; border-left: 0; border-top: 1px solid #0006; max-height: 46vh; }
}