/* MonMMO sprite editor — dark tool theme, no framework. */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #23262b;
  color: #d7dce2;
  font: 14px/1.45 "Segoe UI", system-ui, sans-serif;
}

header {
  display: flex; align-items: baseline; gap: 18px;
  padding: 10px 16px; background: #1b1e22; border-bottom: 1px solid #101216;
}
header h1 { font-size: 18px; margin: 0; }
header .hint { color: #8b949e; font-size: 12px; }
header .hint b { color: #d7dce2; }
#advLink { margin-left: auto; color: #79b8ff; font-size: 12px; white-space: nowrap; }

main {
  display: grid;
  grid-template-columns: 300px 1fr 300px;
  gap: 14px;
  padding: 14px 16px;
  align-items: start;
}

.caption { color: #8b949e; font-size: 12px; margin: 4px 0; }

#actionTabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.tab {
  background: #2c3138; color: #d7dce2; border: 1px solid #101216;
  padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 11px;
}
.tab.active { background: #3d6ea5; border-color: #3d6ea5; }

#thumbs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  max-height: 46vh; overflow-y: auto; padding-right: 4px;
}
.thumb {
  width: 100%; image-rendering: pixelated; cursor: pointer;
  background: #31363c; border: 2px solid transparent; border-radius: 4px;
}
.thumb.selected { border-color: #f5d33c; }

#center { display: flex; flex-direction: column; align-items: center; }
#canvasWrap {
  background: #1b1e22; border: 1px solid #101216; border-radius: 6px; padding: 10px;
}
#canvas { image-rendering: pixelated; cursor: crosshair; background: transparent; }

.row { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }

.box {
  background: #2c3138; border: 1px solid #101216; border-radius: 6px;
  padding: 10px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 6px;
}
.box h3 { margin: 0 0 2px; font-size: 12px; text-transform: uppercase; color: #8b949e; }

button {
  background: #3a4048; color: #d7dce2; border: 1px solid #101216;
  border-radius: 4px; padding: 6px 10px; cursor: pointer; font-size: 13px;
}
button:hover { background: #454c56; }
button:disabled { opacity: 0.4; cursor: default; }
button.primary { background: #3d6ea5; border-color: #2c4f78; font-weight: 600; }
button.primary:hover { background: #4a7fb8; }
.tool.active { background: #3d6ea5; }

input, textarea, select {
  background: #23262b; color: #d7dce2; border: 1px solid #101216;
  border-radius: 4px; padding: 6px 8px; font: inherit;
}
input:focus, textarea:focus { outline: 1px solid #3d6ea5; }

#palette { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-top: 6px; }
.swatch { aspect-ratio: 1; border-radius: 4px; border: 1px solid #101216; padding: 0; }
#harmony { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
#svSquare, #hueStrip { border-radius: 4px; border: 1px solid #101216; cursor: crosshair; width: 100%; }
#swatch-current {
  display: inline-block; width: 34px; height: 34px;
  border-radius: 4px; border: 1px solid #101216;
}
#hexInput { width: 90px; font-family: ui-monospace, monospace; }
#hexInput.invalid { outline: 2px solid #ff7b72; }
.coords { min-width: 44px; color: #8b949e; font-family: ui-monospace, monospace; font-size: 12px; }
.slider input[type="range"] { width: 90px; vertical-align: middle; }
.grouplabel { color: #8b949e; font-size: 12px; }
.brush { min-width: 30px; }
.brush.active { background: #3d6ea5; }
button.danger { background: #6e3232; border-color: #4c2222; }
button.danger:hover { background: #843d3d; }

.filebtn {
  background: #3a4048; border: 1px solid #101216; border-radius: 4px;
  padding: 6px 10px; cursor: pointer; font-size: 13px; text-align: center;
}
.filebtn:hover { background: #454c56; }

#submitResult a { color: #79b8ff; word-break: break-all; }
#contestBox { display: flex; flex-direction: column; gap: 6px; }
#contestBox[hidden] { display: none; }
#contestMonth { margin: 0; }
.contest-terms { display: flex; gap: 6px; align-items: flex-start; line-height: 1.4; }
.contest-terms input { margin-top: 2px; flex: none; }
.contest-terms a { color: #79b8ff; }

.animrow { gap: 12px; }
.animrow input[type="range"] { width: 90px; vertical-align: middle; }
.animframe { color: #8b949e; font-family: ui-monospace, monospace; min-width: 28px; }
#canvas.animating { cursor: default; }

.credit {
  color: #8b949e; font-size: 12px; padding: 6px 0 2px;
  border-top: 1px solid #101216; margin-top: 8px;
}
.credit b { color: #d7dce2; }

footer { padding: 8px 16px; }
#status.ok { color: #7ee787; }
#status.error { color: #ff7b72; }

.fatal { color: #ff7b72; padding: 40px; font-size: 15px; }

@media (max-width: 1100px) {
  main { grid-template-columns: 1fr; }
  #thumbs { grid-template-columns: repeat(8, 1fr); }
}