:root {
  --bg: #0c0e13;
  --panel: #161a22;
  --panel2: #1c212c;
  --border: #2c313d;
  --fg: #eef4ff;
  --muted: #93a1ba;
  --accent: #5fbf46;
  --accent-hover: #4fa838;
  --accent-ink: #0c1a0c;
  --danger: #d05656;
  --tbar-h: 52px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
button { font: inherit; }

/* ---- Top toolbar --------------------------------------------------------- */
.tbar {
  height: var(--tbar-h);
  flex: none;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0 0.8rem;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.tbar-group { display: flex; align-items: center; gap: 0.4rem; }
.tbar-tools { margin-left: auto; gap: 0.8rem; }
.tbar-title { font-weight: 800; letter-spacing: 0.2px; margin: 0 0.4rem 0 0.2rem; }
.mapname {
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: 8px;
  padding: 0.35rem 0.6rem;
  width: 12rem;
  font: inherit;
}
.mapname:focus { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); }

.tbtn {
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: 8px;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.12s, border-color 0.12s;
}
.tbtn:hover { background: #262c39; border-color: #3a4150; }
.tbtn.primary { background: var(--accent); border-color: transparent; color: var(--accent-ink); font-weight: 800; }
.tbtn.primary:hover { background: var(--accent-hover); }
.tbtn.ghost { background: transparent; border-color: transparent; font-size: 1.15rem; padding: 0.25rem 0.5rem; text-decoration: none; color: var(--fg); }
.tbtn.ghost:hover { background: var(--panel2); }
.tbtn.icon { padding: 0.3rem 0.55rem; min-width: 2rem; }

.seg { display: flex; align-items: center; gap: 0.35rem; background: var(--panel2); border: 1px solid var(--border); border-radius: 9px; padding: 0.25rem; }
.seg-label { color: var(--muted); font-size: 0.8rem; padding: 0 0.3rem; }
.segbtn { background: transparent; border: none; color: var(--muted); border-radius: 6px; padding: 0.3rem 0.6rem; cursor: pointer; font-weight: 600; }
.segbtn.active { background: var(--accent); color: var(--accent-ink); }
.brush { display: flex; align-items: center; gap: 0.4rem; color: var(--muted); font-size: 0.82rem; padding: 0 0.3rem; }
.brush input { width: 80px; }
.zoomval { color: var(--muted); min-width: 3rem; text-align: center; font-variant-numeric: tabular-nums; }

/* ---- Layout -------------------------------------------------------------- */
.editor { flex: 1; min-height: 0; display: flex; }
.side {
  width: 250px;
  flex: none;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 6px; border-bottom: 1px solid var(--border); }
.tool {
  background: var(--panel2);
  border: 1px solid transparent;
  color: var(--muted);
  border-radius: 8px;
  padding: 0.45rem 0.2rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 0.68rem;
  font-weight: 600;
}
.tool span { font-size: 1.05rem; line-height: 1; }
.tool:hover { color: var(--fg); }
.tool.active { background: color-mix(in srgb, var(--accent) 22%, var(--panel2)); border-color: var(--accent); color: var(--fg); }

/* ---- Palette ------------------------------------------------------------- */
.palette { flex: 1; min-height: 0; overflow-y: auto; padding: 4px; }
.cat { margin-bottom: 4px; }
.cat-head {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.5rem; cursor: pointer;
  color: var(--muted); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.4px; text-transform: uppercase;
}
.cat-head:hover { color: var(--fg); }
.cat-head .caret { transition: transform 0.12s; }
.cat.collapsed .caret { transform: rotate(-90deg); }
.cat.collapsed .cat-body { display: none; }
.grp-head { color: #6b7890; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; padding: 4px 6px 2px; }
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 2px 4px 6px; }
.item {
  aspect-ratio: 1;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.item:hover { border-color: #47506a; }
.item.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.item img { max-width: 82%; max-height: 82%; pointer-events: none; image-rendering: auto; }
.item.terrain img { max-width: 100%; max-height: 100%; border-radius: 6px; }
.item .nm { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font-size: 0.58rem; color: var(--muted); background: rgba(0,0,0,0.35); }

/* ---- Properties ---------------------------------------------------------- */
.props { flex: none; max-height: 42%; overflow-y: auto; border-top: 1px solid var(--border); padding: 0.6rem; background: var(--panel2); }
.props-empty { color: var(--muted); font-size: 0.82rem; line-height: 1.5; }
.props h3 { margin: 0 0 0.5rem; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); }
.prop-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.28rem 0; }
.prop-row label { color: var(--fg); font-size: 0.85rem; }
.prop-row input[type="range"] { width: 110px; }
.prop-row .val { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 2.5rem; text-align: right; }
.chk { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.chk input { width: 15px; height: 15px; accent-color: var(--accent); }
.props .thumb { width: 40px; height: 40px; border-radius: 8px; background: var(--panel); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
.props .thumb img { max-width: 80%; max-height: 80%; }
.props-title { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.pt-info { min-width: 0; }
.pt-namerow { display: flex; align-items: center; gap: 0.4rem; }
.props-title .pt-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-copy { flex: none; background: var(--panel); border: 1px solid var(--border); color: var(--muted); border-radius: 6px; padding: 0 6px; height: 20px; line-height: 18px; font-size: 0.82rem; cursor: pointer; }
.pt-copy:hover { color: var(--fg); border-color: #47506a; }
.props-title .pt-sub { color: var(--muted); font-size: 0.75rem; }
.props-del { width: 100%; margin-top: 0.6rem; background: color-mix(in srgb, var(--danger) 18%, var(--panel2)); border: 1px solid color-mix(in srgb, var(--danger) 50%, var(--border)); color: #ffd9d9; border-radius: 8px; padding: 0.45rem; cursor: pointer; font-weight: 600; }
.props-del:hover { background: color-mix(in srgb, var(--danger) 30%, var(--panel2)); }
.props .note { color: var(--muted); font-size: 0.75rem; margin-top: 0.5rem; }

/* ---- Stage --------------------------------------------------------------- */
.stage { flex: 1; min-width: 0; position: relative; background: #0a0d12; overflow: hidden; }
#edit { display: block; width: 100%; height: 100%; }
.stage.tool-pan #edit, .stage.panning #edit { cursor: grab; }
.stage.panning #edit { cursor: grabbing; }
.stage.tool-select #edit { cursor: default; }
.stage.tool-paint #edit, .stage.tool-spawn #edit { cursor: crosshair; }
.stage.tool-erase #edit { cursor: cell; }

.hint {
  position: absolute; left: 12px; bottom: 12px;
  background: rgba(10,14,20,0.82); border: 1px solid var(--border);
  color: var(--muted); font-size: 0.78rem; padding: 0.35rem 0.6rem; border-radius: 8px;
  pointer-events: none; max-width: 60%;
}

.testbar {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.8rem;
  background: rgba(10,14,20,0.92); border: 1px solid var(--accent);
  padding: 0.4rem 0.7rem; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 40; /* above the test frame */
}
.testlabel { color: var(--accent); font-weight: 800; }
.testinfo { color: var(--muted); font-size: 0.82rem; }

/* In-editor test: the real game runs in a frame over the stage; editor UI stays
   visible but disabled until Stop. */
.testframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #0c0e13; z-index: 30; }
body.testing .side { pointer-events: none; opacity: 0.45; }
body.testing .tbar-group .tbtn:not(#btnStopTest):not(.ghost),
body.testing .tbar-tools,
body.testing .mapname { pointer-events: none; opacity: 0.45; }

/* ---- Modal --------------------------------------------------------------- */
.modal { position: fixed; inset: 0; background: rgba(6,9,14,0.6); display: flex; align-items: center; justify-content: center; z-index: 50; backdrop-filter: blur(2px); }
.modal[hidden] { display: none; }
.modal-panel { width: min(820px, 95vw); max-height: 86vh; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,0.55); display: flex; flex-direction: column; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--border); }
.modal-head h2 { margin: 0; font-size: 1.15rem; }
.modal-body { padding: 0.9rem 1.1rem; overflow-y: auto; }
.modal-note { color: var(--muted); font-size: 0.82rem; margin: 0 0 0.8rem; }
.modal-note a { color: var(--accent); }

.saved-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.7rem; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 0.55rem; }
.saved-row .sr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.sr-rename { width: 100%; max-width: 22rem; background: var(--panel2); border: 1px solid transparent; color: var(--fg); border-radius: 7px; padding: 0.35rem 0.5rem; font: inherit; font-weight: 600; }
.sr-rename:hover { border-color: var(--border); }
.sr-rename:focus { outline: none; border-color: var(--accent); background: var(--panel); }
.sr-note { color: #e6a5a5; font-size: 0.75rem; }
.sr-actions { display: flex; align-items: center; gap: 0.35rem; flex: none; }
.saved-empty { color: var(--muted); text-align: center; padding: 1.6rem 0; }

.sr-status { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.sr-status.pending { color: #ffd27d; border-color: color-mix(in srgb, #ffd27d 45%, var(--border)); background: color-mix(in srgb, #ffd27d 12%, transparent); }
.sr-status.accepted { color: #7ee0b8; border-color: color-mix(in srgb, #7ee0b8 45%, var(--border)); background: color-mix(in srgb, #7ee0b8 12%, transparent); }
.sr-status.denied { color: #e88; border-color: color-mix(in srgb, #e88 45%, var(--border)); background: color-mix(in srgb, #e88 12%, transparent); }
.tbtn.sm { padding: 0.32rem 0.6rem; font-size: 0.82rem; }
.tbtn:disabled { opacity: 0.4; cursor: default; }