body.sandbox-mode {
  --sandbox-bg: #050505;
  --sandbox-panel: #090909;
  --sandbox-panel-2: #111;
  --sandbox-line: rgba(255, 255, 255, 0.62);
  --sandbox-text: #fff;
  --sandbox-muted: #bdbdbd;
  --sandbox-accent: #fff;
  --sandbox-accent-2: #d8d8d8;
  background: var(--sandbox-bg);
}

body.sandbox-mode #betaNoticeBanner,
body.sandbox-mode .command-dock,
body.sandbox-mode .pinned-zone,
body.sandbox-mode .context-panel,
body.sandbox-mode .object-inspector,
body.sandbox-mode .maneuver-hud,
body.sandbox-mode .softlock-escape,
body.sandbox-mode .hud-phase,
body.sandbox-mode .hud-vitals,
body.sandbox-mode .hud-controls,
body.sandbox-mode .map-focus,
body.sandbox-mode .force-summary-targets {
  display: none !important;
}

body.sandbox-mode .battle-screen.ui2-shell {
  grid-template-rows: 54px minmax(0, 1fr);
  background: var(--sandbox-bg);
}

body.sandbox-mode .tactical-hud {
  height: 54px;
  grid-template-columns: 1fr;
  padding: 7px 18px;
  border-color: rgba(255, 255, 255, 0.7);
  background: linear-gradient(90deg, #050505, #101010 58%, #050505);
}

body.sandbox-mode .hud-brand small {
  color: var(--sandbox-accent);
}

body.sandbox-mode .ui2-battle-main {
  background: var(--sandbox-bg);
}

body.sandbox-mode .ui2-battle-main .map-stage {
  right: 326px;
  background: #050505;
}

.sandbox-panel {
  position: fixed;
  z-index: 70;
  top: 54px;
  right: 0;
  bottom: 0;
  width: 318px;
  overflow: auto;
  padding: 14px;
  border-left: 1px solid var(--sandbox-line);
  background: var(--sandbox-panel);
  color: var(--sandbox-text);
  font-family: var(--font-ui, "Segoe UI", sans-serif);
  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.72);
}

.sandbox-panel header {
  display: grid;
  gap: 3px;
  margin-bottom: 14px;
}

.sandbox-panel header span,
.sandbox-inspector > span {
  color: var(--sandbox-accent);
  font: 700 9px var(--font-mono, monospace);
  letter-spacing: 0.12em;
}

.sandbox-panel header b {
  font: 700 17px var(--font-display, sans-serif);
  letter-spacing: 0.035em;
}

.sandbox-panel section {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 10px;
  background: #0d0d0d;
}

.sandbox-spawn-grid,
.sandbox-heroes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sandbox-panel label {
  display: grid;
  gap: 4px;
  color: var(--sandbox-muted);
  font-size: 10px;
  font-weight: 700;
}

.sandbox-panel select,
.sandbox-panel input,
.sandbox-panel button {
  min-width: 0;
  height: 34px;
  border: 1px solid var(--sandbox-line);
  border-radius: 7px;
  background: #080808;
  color: var(--sandbox-text);
  font: 700 11px var(--font-ui, sans-serif);
}

.sandbox-panel select,
.sandbox-panel input {
  padding: 0 8px;
}

.sandbox-panel button {
  cursor: pointer;
}

.sandbox-panel button:hover,
.sandbox-panel button.active {
  border-color: var(--sandbox-accent);
  background: #1b1b1b;
}

.sandbox-panel .sandbox-add {
  grid-column: 1 / -1;
  border-color: #fff;
  background: #161616;
}

.sandbox-transport {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.sandbox-speed {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.sandbox-toggles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sandbox-toggles label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
}

.sandbox-toggles input {
  width: 15px;
  height: 15px;
  accent-color: var(--sandbox-accent);
}

#sandboxSelected {
  margin-top: 7px;
  color: var(--sandbox-muted);
  font: 600 10px/1.55 var(--font-mono, monospace);
}

#sandboxSelected b {
  color: var(--sandbox-text);
}

.sandbox-clear {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.sandbox-clear [data-clear="all"] {
  grid-column: 1 / -1;
  border-color: #fff;
  color: #fff;
}

.sandbox-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sandbox-stat {
  display: grid;
  gap: 2px;
  color: var(--sandbox-muted);
  font-size: 9px;
}

.sandbox-stat b {
  color: var(--sandbox-text);
  font: 700 15px var(--font-mono, monospace);
}

.sandbox-panel footer a {
  color: var(--sandbox-muted);
  font-size: 10px;
  text-decoration: none;
}

.sandbox-trash {
  position: absolute;
  z-index: 65;
  right: 16px;
  bottom: 16px;
  display: none;
  place-items: center;
  width: 156px;
  height: 72px;
  border: 1px dashed #fff;
  border-radius: 12px;
  background: rgba(5, 5, 5, 0.94);
  color: #fff;
  pointer-events: none;
}

.sandbox-trash b {
  font-size: 22px;
}

.sandbox-trash span {
  font-size: 9px;
  font-weight: 800;
}

body.sandbox-mode.unit-dragging .sandbox-trash {
  display: grid;
}

body.sandbox-mode.sandbox-trash-hover .sandbox-trash {
  border-style: solid;
  background: rgba(28, 28, 28, 0.98);
  transform: scale(1.03);
}

@media (max-width: 900px) {
  body.sandbox-mode .ui2-battle-main .map-stage {
    right: 278px;
  }

  .sandbox-panel {
    width: 270px;
    padding: 10px;
  }
}