body { margin: 0; background: #008080; }
.app { margin: 8px; height: calc(100vh - 16px); display: flex; flex-direction: column; box-sizing: border-box; }
[hidden] { display: none !important; }

/* Menu bar */
.menubar { display: flex; padding: 1px 2px; }
.menu { position: relative; }
.menubar button { min-width: 0; min-height: 0; box-shadow: none; background: none; padding: 2px 8px; }
.menubar button:focus { outline: none; }
.menu > button:hover, .menu.open > button { background: #000080; color: #fff; }
.menu-items { display: none; position: absolute; top: 100%; left: 0; z-index: 10; background: silver; min-width: 190px;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff; padding: 3px; }
.menu.open .menu-items { display: block; }
.menu-items button { display: flex; justify-content: space-between; gap: 16px; width: 100%; text-align: left; padding: 3px 16px; }
.menu-items button:hover { background: #000080; color: #fff; }
.menu-items hr, .toolbar .sep { border: 0; border-top: 1px solid grey; border-bottom: 1px solid #fff; margin: 3px 1px; }

/* Toolbar: flat buttons that raise on hover */
.toolbar { display: flex; align-items: center; gap: 2px; padding: 2px 4px; border-top: 1px solid grey; box-shadow: 0 -1px #fff inset; flex-wrap: wrap; }
.toolbar button:not(.swatch) { min-width: 0; min-height: 0; box-shadow: none; background: none; padding: 3px 8px; }
.toolbar button:not(.swatch):hover:not(:disabled) { box-shadow: inset -1px -1px grey, inset 1px 1px #fff; }
.toolbar button:not(.swatch):active:not(:disabled) { box-shadow: inset 1px 1px grey, inset -1px -1px #fff; }
.toolbar .sep { border: 0; border-left: 1px solid grey; border-right: 1px solid #fff; height: 18px; margin: 0 4px; }
.toolbar .base { display: flex; align-items: center; gap: 6px; padding: 0 4px; }

/* Main grid */
.main { flex: 1; min-height: 0; display: grid; grid-template-columns: 200px 1fr 300px; gap: 6px; margin: 4px; }
fieldset { min-height: 0; min-width: 0; overflow: auto; margin: 0; }
fieldset.rows { display: flex; flex-direction: column; overflow: hidden; }
.btns { display: flex; gap: 3px; margin-top: 4px; flex-wrap: wrap; }
.btns button { min-width: 0; flex: 1; padding: 0 4px; }
.rows p { margin: 8px 0 0; }

/* Layers list */
.layers { flex: 1; min-height: 120px; overflow: auto; background: #fff; padding: 2px;
  box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; }
.layer { padding: 3px 4px 4px; cursor: pointer; border-bottom: 1px dotted #c0c0c0; }
.layer:hover { background: #e8e8f4; }
.layer.selected { background: #000080; color: #fff; }
.layer-label { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layer canvas { display: block; width: 160px; max-height: 40px; object-fit: cover; object-position: top;
  image-rendering: pixelated; margin-top: 2px; outline: 1px solid grey; }

/* Stage */
.stage { overflow: auto; background: grey; display: flex; padding: 16px;
  box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; }
.canvas-wrap { position: relative; margin: auto; line-height: 0; }
#empty { position: absolute; top: 100%; left: 0; right: 0; margin: 12px 0 0; color: #fff; text-align: center; line-height: normal; }
#canvas { image-rendering: pixelated; cursor: pointer; display: block; }
#sel { position: absolute; left: -2px; right: -2px; outline: 2px dashed #fff; box-shadow: 0 0 0 4px #000; pointer-events: none; }
#hover { position: absolute; left: 0; right: 0; background: rgba(255,255,255,.18); outline: 1px dotted #fff; pointer-events: none; }

/* Properties */
#props fieldset { margin-bottom: 8px; }
.field { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 6px 0; }
.field input[type=number] { width: 56px; }
.items { display: flex; flex-wrap: wrap; gap: 6px; }
.item { border: 1px solid grey; padding: 4px; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.item .btns button { padding: 0 2px; }
.slots { display: flex; flex-wrap: wrap; gap: 4px; }
.slot { display: flex; align-items: center; gap: 2px; }
.orig { width: 8px; height: 16px; border: 1px solid #000; }

button.swatch { min-width: 0; width: 24px; min-height: 0; height: 18px; padding: 0; vertical-align: middle; }
button.swatch.none { background: repeating-linear-gradient(45deg, #fff 0 3px, #c00 3px 4px) !important; }
button.thumb { min-width: 0; padding: 4px; line-height: 0; }
button.thumb img { image-rendering: pixelated; }
button.thumb.change { display: flex; flex-direction: column; align-items: center; gap: 4px; line-height: normal; }

/* Popups */
.pop { position: fixed; z-index: 40; padding: 4px; }
.pop-label { margin: 2px 0; }
.pal { display: grid; grid-template-columns: repeat(8, 18px); gap: 2px; }
.pal button { min-width: 0; min-height: 0; width: 18px; height: 18px; padding: 0; }
.pal.used { grid-template-columns: repeat(8, 28px); }
.pal.used button { width: 28px; height: 28px; }
.pop .none-btn { margin-top: 4px; width: 100%; }
.overlay { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; }
.overlay .window { max-width: 92vw; max-height: 85vh; display: flex; flex-direction: column; }
.overlay .window.wide { width: min(720px, 92vw); height: 85vh; }
.overlay .window-body { overflow: auto; flex: 1; }
.picker-filter { position: sticky; top: 0; width: 100%; box-sizing: border-box; z-index: 1; }
.picker h4 { margin: 10px 0 4px; font-size: 11px; font-weight: bold; text-transform: capitalize; border-bottom: 1px solid grey; }
.thumbs { display: flex; flex-wrap: wrap; gap: 4px; }
.thumbs button.current { outline: 2px solid #000080; outline-offset: 1px; }

@media (max-width: 800px) {
  .app { height: auto; }
  .main { grid-template-columns: 1fr; }
  .stage { min-height: 200px; }
}