/* Slither level editor: layout on top of styles.css (temple look). */
.ed-wrap { max-width: 1400px; margin: 0 auto; }
.ed-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 270px;
  gap: 1rem;
  width: 100%;
  align-items: start;
}
.ed-panel {
  background: linear-gradient(180deg, #2b2319, #1f1912);
  border: 1px solid #4a3c2a;
  border-radius: 8px;
  padding: 0.7rem;
  box-shadow: inset 0 1px 0 rgba(255,230,180,0.12), 0 6px 16px rgba(0,0,0,0.4);
}
.ed-panel-title { font-family: var(--display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin: 0.2rem 0 0.5rem; }
.ed-group { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0.6rem 0 0.3rem; font-weight: 700; }
.ed-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px; }
.ed-tile {
  width: 100%; aspect-ratio: 1; padding: 0; cursor: pointer;
  border: 1px solid #1c160f; border-radius: 5px; background: #120e0a;
  box-shadow: 0 2px 0 #0d0a07; display: grid; place-items: center;
}
.ed-tile canvas { width: 100%; height: 100%; display: block; border-radius: 4px; }
.ed-tile.sel { outline: 2px solid var(--gold); outline-offset: 1px; }
.ed-tile:hover { filter: brightness(1.2); }
.ed-tip { font-size: 0.8rem; color: var(--muted); margin: 0.6rem 0 0; line-height: 1.35; min-height: 2.6em; }

.ed-main { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.ed-toolbar { justify-content: flex-start; }
.ed-seg { gap: 0.25rem; }
.ed-toolbar .btn { padding: 0.42rem 0.7rem; font-size: 0.8rem; }
.ed-toolbar .btn.sel { background: linear-gradient(180deg, #ffe9a6, #e2b653); color: #3a2608; border-color: #6f4e15; }
.ed-canvas-wrap { overflow: auto; max-height: 76vh; border-radius: 8px; }
#ed-board { cursor: crosshair; max-width: none; touch-action: none; }
.ed-status { margin: 0; font-size: 0.85rem; color: #d9c9a6; min-height: 1.2em; }
.ed-status.bad { color: #ff8f7a; }

.ed-meta label { display: block; font-size: 0.8rem; color: #d9c9a6; margin-bottom: 0.5rem; font-weight: 700; }
.ed-meta label[hidden] { display: none; }
.ed-meta label small { color: var(--muted); font-weight: 500; }
/* the hint as players see it (keycaps and all), under the Hint box */
.ed-hint-preview { margin: -0.2rem 0 0.6rem; font-size: 0.8rem; line-height: 1.6; color: var(--text); }
.ed-hint-preview small { color: var(--muted); font-weight: 700; }
.ed-meta input, .ed-meta select, .ed-meta textarea, .ed-dialog textarea {
  display: block; width: 100%; margin-top: 0.2rem;
  background: #120e0a; color: var(--text); border: 1px solid #4a3c2a; border-radius: 5px;
  padding: 0.35rem 0.45rem; font: 500 0.9rem var(--body);
}
.ed-meta label.ed-check { display: flex; gap: 0.4rem; align-items: center; }
.ed-meta label.ed-check input { width: auto; display: inline; margin: 0; }
/* The browser's own controls, in the temple palette: a gold checkbox on a
   dark box, a gold chevron on the selects (still native, so the keyboard
   works as usual), and no spinner arrows on the number fields. */
.ed-meta label.ed-check input { accent-color: var(--gold); color-scheme: dark; }
.ed-meta select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 1.7rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23e2b653' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.6rem center; background-size: 10px 6px;
}
.ed-meta select option { background: #120e0a; color: var(--text); }
.ed-meta input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.ed-meta input[type="number"]::-webkit-inner-spin-button,
.ed-meta input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ed-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.ed-actions { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.7rem 0; }
.ed-actions .btn { width: 100%; }
.ed-actions .row .btn { width: auto; flex: 1; }
.ed-result { margin: 0; font-size: 0.82rem; color: #d9c9a6; line-height: 1.35; min-height: 1.2em; }
.ed-result.ok { color: #7fe0a8; }
.ed-result.bad { color: #ff8f7a; }
.ed-mine-row { display: flex; gap: 0.3rem; align-items: center; padding: 0.3rem 0; border-top: 1px solid #3a2f22; font-size: 0.85rem; }
.ed-mine-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-mine-row .btn { padding: 0.25rem 0.45rem; font-size: 0.72rem; }
.ed-dialog { max-width: 640px; }
.ed-dialog::backdrop { background: rgba(5,4,3,0.8); }
.ed-dialog textarea { font: 500 0.8rem ui-monospace, Consolas, monospace; color: var(--ink); background: #f3e6c4; border-color: #9c7f52; margin: 0.5rem 0 0.8rem; }

@media (max-width: 1000px) {
  .ed-layout { grid-template-columns: 1fr; }
  .ed-tiles { grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); }
}