html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #07080c; }
canvas { display: block; cursor: crosshair; }

#hud {
  position: fixed; top: 12px; left: 12px;
  font-family: ui-monospace, Menlo, monospace; font-size: 12px;
  color: #6b7280; user-select: none; pointer-events: none;
}

#panel {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(12, 13, 18, 0.94);
  border-top: 1px solid #23262f;
  font-family: ui-monospace, Menlo, monospace; font-size: 12px;
  color: #9ca3af;
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 8px;
  user-select: none;
}
.row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.row label { width: 52px; }
.row input {
  width: 110px; text-align: right;
  background: #0c0d12; color: #e5e7eb;
  border: 1px solid #23262f; border-radius: 3px;
  font: inherit; padding: 3px 6px; margin: 0 6px;
}
.row button {
  background: #16181f; color: #9ca3af;
  border: 1px solid #23262f; border-radius: 3px;
  font: inherit; font-size: 11px;
  padding: 3px 5px; cursor: pointer; min-width: 46px;
}
.row button:hover { background: #1f2229; color: #e5e7eb; }

#fire {
  background: #1f2229; border-color: #3a3f4b; color: #e5e7eb;
  min-width: 80px; font-weight: bold; margin-left: 16px;
}
#fire:hover { background: #2a2e38; }

#trailColor {
  width: 36px; height: 26px; padding: 0;
  border: 1px solid #23262f; border-radius: 3px;
  background: none; cursor: pointer; margin-left: 16px;
}

#settingsToggle { min-width: 32px; margin-left: 8px; }

#settings {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 18px;
  padding-top: 8px; border-top: 1px solid #23262f;
}
#settings .cfg {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; cursor: pointer;
}
#settings .cfg input {
  width: 64px; text-align: right;
  background: #0c0d12; color: #e5e7eb;
  border: 1px solid #23262f; border-radius: 3px;
  font: inherit; padding: 2px 5px;
}
#resetConfig {
  background: #16181f; color: #9ca3af;
  border: 1px solid #3a3f4b; border-radius: 3px;
  font: inherit; font-size: 11px;
  padding: 3px 8px; cursor: pointer;
  margin-left: auto;
}
#resetConfig:hover { background: #1f2229; color: #e5e7eb; }

#ghostLabel {
  margin-left: 16px; width: auto;
  display: flex; align-items: center; gap: 5px;
  cursor: pointer;
}
#ghostLabel input { width: auto; margin: 0; }

#solverModeLabel {
  margin-left: 16px; width: auto;
  display: flex; align-items: center; gap: 6px;
}
#solverModeLabel select {
  background: #0c0d12; color: #e5e7eb;
  border: 1px solid #23262f; border-radius: 3px;
  font: inherit; padding: 2px 4px;
}

#solver {
  position: fixed; top: 12px; right: 14px;
  font-family: ui-monospace, Menlo, monospace; font-size: 12px;
  line-height: 1.5;
  color: #d4a94f; text-align: right;
  white-space: pre; display: none;
  user-select: none; pointer-events: none;
  text-shadow: 0 0 8px rgba(212, 169, 79, 0.25);
}