/* War in the Void — map editor UI. Fullscreen 3D stage with a top action bar and a
   bottom tool palette (horizontal thumb strip; works in both orientations). */
.view-editor { position: fixed; inset: 0; overflow: hidden; }
.ed-stage { position: absolute; inset: 0; touch-action: none; }

.ed-bar {
  position: absolute; left: 0; right: 0; z-index: 6;
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  padding: 8px calc(8px + env(safe-area-inset-right)) 8px calc(8px + env(safe-area-inset-left));
}
.ed-bar.is-top { top: 0; padding-top: calc(8px + env(safe-area-inset-top)); }
.ed-bar.is-top { background: linear-gradient(180deg, rgba(8,8,15,0.92), rgba(8,8,15,0)); }

.ed-title { font-weight: 700; letter-spacing: .04em; margin-right: 4px; }
.ed-status { color: #9aa0c0; font-size: 12px; margin-left: auto; }

.ed-btn {
  appearance: none; border: 1px solid #34345a; background: #1b1b2c; color: #d8d8ec;
  border-radius: 8px; padding: 7px 11px; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap; line-height: 1;
}
.ed-btn:hover { background: #23233a; }
.ed-btn:disabled { opacity: .4; cursor: default; }
.ed-btn.is-primary { background: #2f6d46; border-color: #3ec46d; color: #eafff1; }
.ed-btn.is-primary:hover { background: #38804f; }

/* bottom palette */
.ed-palette {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; gap: 10px; align-items: flex-end;
  padding: 8px calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
  background: linear-gradient(0deg, rgba(8,8,15,0.94), rgba(8,8,15,0));
  overflow-x: auto;
}
.ed-group { display: flex; flex-direction: column; gap: 4px; flex: none; }
.ed-group-label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #7a7fa5; padding-left: 2px; }
.ed-row { display: flex; gap: 4px; }

.ed-tool {
  appearance: none; border: 1px solid #34345a; background: #16162400; background-color: #171728;
  color: #cfcfe6; border-radius: 8px; min-width: 44px; height: 44px; padding: 0 8px;
  font-size: 12px; font-weight: 600; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; line-height: 1;
}
.ed-tool .ed-glyph { font-size: 17px; }
.ed-tool:hover { background-color: #20203a; }
.ed-tool.is-active { border-color: #7c9bff; box-shadow: 0 0 0 1px #7c9bff inset; color: #fff; }

.ed-swatches { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 20px); gap: 3px; }
.ed-swatch {
  width: 20px; height: 20px; border-radius: 4px; border: 1px solid #0006; cursor: pointer;
  box-sizing: border-box;
}
.ed-swatch.is-active { border-color: #fff; box-shadow: 0 0 0 2px #7c9bff; }

.ed-file { display: none; }

.ed-name {
  appearance: none; border: 1px solid #34345a; background: #171728; color: #e8e8f4;
  border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight: 600;
  min-width: 110px; max-width: 190px;
}

/* live map thumbnail (top-right) — the same image baked into exported maps so
   a browser / lobby list can preview them. */
.ed-preview {
  position: absolute;
  top: calc(58px + env(safe-area-inset-top));
  right: 8px;
  z-index: 5;
  width: 132px; height: 132px;
  border-radius: 8px;
  border: 1px solid #34345a;
  background: #07070d;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  image-rendering: pixelated;
  pointer-events: none;
}

/* mobile / narrow: keep the action bar to ONE scrollable row (don't wrap into
   3 rows and eat the map), and tighten the palette to thumb size. */
@media (max-width: 620px) {
  .ed-bar.is-top { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ed-bar.is-top::-webkit-scrollbar { display: none; }
  .ed-title, .ed-btn, .ed-bar.is-top select, .ed-status { flex: none; }
  .ed-btn, .ed-bar.is-top select { padding: 6px 8px; font-size: 12px; }
  .ed-title { font-size: 13px; }
  .ed-status { font-size: 11px; margin-left: 6px; }
  .ed-palette { gap: 8px; }
  .ed-group-label { font-size: 9px; }
  .ed-tool { min-width: 42px; height: 42px; font-size: 11px; }
  .ed-tool .ed-glyph { font-size: 15px; }
  .ed-swatch { width: 18px; height: 18px; }
  .ed-swatches { grid-template-rows: repeat(2, 18px); }
  .ed-name { min-width: 84px; max-width: 120px; padding: 6px 8px; font-size: 12px; }
  .ed-preview { width: 92px; height: 92px; }
}